Fix component selection

Make sure some elements' children are not selectable.

categories/choice/react/package.json

@@ -75,10 +75,12 @@
       "import": "./dist/esm/production/index.js",
       "types": "./dist/types/index.d.ts"
     },
+    "./dist/DropdownSelect.css": "./dist/DropdownSelect.css",
+    "./dist/MenuSelect.css": "./dist/MenuSelect.css",
     "./dist/RadioButton.css": "./dist/RadioButton.css",
     "./dist/RadioTickBox.css": "./dist/RadioTickBox.css"
   },
   "typesVersions": {
     "*": {}
   }
-}
+}

categories/choice/react/pridepack.json

@@ -1,3 +1,9 @@
 {
-  "target": "es2018"
-}
+  "target": "es2018",
+  "entryPoints": {
+    ".": "src/index.ts",
+    "./dist/DropdownSelect.css": "src/components/DropdownSelect/DropdownSelect.css",
+    "./dist/RadioButton.css": "src/components/RadioButton/RadioButton.css",
+    "./dist/RadioTickBox.css": "src/components/RadioTickBox/RadioTickBox.css"
+  }
+}

categories/choice/react/scripts/build.ts

@@ -1,4 +1,4 @@
-import { copyFileSync } from 'fs';
+import { copyFileSync, readFileSync, writeFileSync } from 'fs';
 import { resolve } from 'path';
 
 const doCopy = (src: string, dest: string) => {
@@ -7,8 +7,16 @@ const doCopy = (src: string, dest: string) => {
   console.log('Copying...');
   console.log(`${trueSrc} -> ${trueDest}`);
   copyFileSync(trueSrc, trueDest);
+  const packageJsonContents = readFileSync('./package.json', 'utf-8');
+  const packageJson = JSON.parse(packageJsonContents);
+  packageJson.exports[dest] = dest;
+  const newPackageJsonContents = JSON.stringify(packageJson, null, 2);
+  console.log('Updating package.json...');
+  writeFileSync('./package.json', newPackageJsonContents);
   console.log('Done');
 }
 
+doCopy('./src/components/DropdownSelect/DropdownSelect.css', './dist/DropdownSelect.css');
+doCopy('./src/components/MenuSelect/MenuSelect.css', './dist/MenuSelect.css');
 doCopy('./src/components/RadioButton/RadioButton.css', './dist/RadioButton.css');
 doCopy('./src/components/RadioTickBox/RadioTickBox.css', './dist/RadioTickBox.css');

categories/choice/react/src/components/ComboBox/index.tsx

@@ -92,7 +92,7 @@ export const ComboBox = React.forwardRef<ComboBoxDerivedElement, ComboBoxProps>(
       </datalist>
       <div
         className={clsx(
-          'relative rounded ring-secondary/50',
+          'relative rounded ring-secondary/50 overflow-hidden',
           'focus-within:ring-4',
           {
             'block': block,
@@ -148,7 +148,7 @@ export const ComboBox = React.forwardRef<ComboBoxDerivedElement, ComboBoxProps>(
               id={labelId}
               htmlFor={id}
               className={clsx(
-                'absolute z-[1] w-full top-0.5 left-0 pointer-events-none pl-1 text-xxs font-bold peer-disabled:opacity-50 peer-focus:text-secondary text-primary leading-none bg-negative',
+                'absolute z-[1] w-full top-0.5 left-0 pointer-events-none pl-1 text-xxs font-bold peer-disabled:opacity-50 peer-focus:text-secondary text-primary leading-none bg-negative select-none',
                 {
                   'sr-only': hiddenLabel,
                 },
@@ -172,7 +172,7 @@ export const ComboBox = React.forwardRef<ComboBoxDerivedElement, ComboBoxProps>(
           <div
             data-testid="hint"
             className={clsx(
-              'absolute left-0 px-1 pointer-events-none text-xxs peer-disabled:opacity-50 leading-none w-full bg-negative',
+              'absolute left-0 px-1 pointer-events-none text-xxs peer-disabled:opacity-50 leading-none w-full bg-negative select-none',
               {
                 'bottom-0 pl-4 pb-1': variant === 'default',
                 'top-0.5': variant === 'alternate',
@@ -202,7 +202,7 @@ export const ComboBox = React.forwardRef<ComboBoxDerivedElement, ComboBoxProps>(
         {indicator && (
           <div
             className={clsx(
-              'text-center flex items-center justify-center peer-disabled:opacity-50 aspect-square absolute bottom-0 right-0 pointer-events-none',
+              'text-center flex items-center justify-center peer-disabled:opacity-50 aspect-square absolute bottom-0 right-0 pointer-events-none select-none',
               {
                 'w-10': size === 'small',
                 'w-12': size === 'medium',

categories/choice/react/src/components/DropdownSelect/DropdownSelect.css

@@ -0,0 +1,17 @@
+.tesseract-design-dropdown-select optgroup {
+  color: rgb(var(--color-positive) / 50%);
+  text-transform: uppercase;
+  font-size: 0.75em;
+  margin-top: 0.5rem;
+  user-select: none;
+}
+
+.tesseract-design-dropdown-select optgroup > option {
+  color: rgb(var(--color-positive));
+  text-transform: none;
+  font-size: 1.333333em;
+}
+
+.tesseract-design-dropdown-select option {
+  user-select: none;
+}

categories/choice/react/src/components/DropdownSelect/index.tsx

@@ -85,7 +85,7 @@ export const DropdownSelect = React.forwardRef<DropdownSelectDerivedElement, Dro
           aria-labelledby={labelId}
           data-testid="input"
           className={clsx(
-            'bg-negative rounded-inherit w-full peer block appearance-none',
+            'tesseract-design-dropdown-select bg-negative rounded-inherit w-full peer block appearance-none cursor-pointer select-none',
             'focus:outline-0',
             'disabled:opacity-50 disabled:cursor-not-allowed',
             {
@@ -124,7 +124,7 @@ export const DropdownSelect = React.forwardRef<DropdownSelectDerivedElement, Dro
               data-testid="label"
               id={labelId}
               className={clsx(
-                'absolute z-[1] w-full top-0.5 left-0 pointer-events-none pl-1 text-xxs font-bold peer-disabled:opacity-50 peer-focus:text-secondary text-primary leading-none bg-negative',
+                'absolute z-[1] w-full top-0.5 left-0 pointer-events-none pl-1 text-xxs font-bold peer-disabled:opacity-50 peer-focus:text-secondary text-primary leading-none bg-negative select-none',
                 {
                   'sr-only': hiddenLabel,
                 },
@@ -148,7 +148,7 @@ export const DropdownSelect = React.forwardRef<DropdownSelectDerivedElement, Dro
           <div
             data-testid="hint"
             className={clsx(
-              'absolute left-0 px-1 pointer-events-none text-xxs peer-disabled:opacity-50 leading-none w-full bg-negative',
+              'absolute left-0 px-1 pointer-events-none text-xxs peer-disabled:opacity-50 leading-none w-full bg-negative select-none',
               {
                 'bottom-0 pl-4 pb-1': variant === 'default',
                 'top-0.5': variant === 'alternate',
@@ -178,7 +178,7 @@ export const DropdownSelect = React.forwardRef<DropdownSelectDerivedElement, Dro
         {indicator && (
           <div
             className={clsx(
-              'text-center flex items-center justify-center peer-disabled:opacity-50 aspect-square absolute bottom-0 right-0 pointer-events-none',
+              'text-center flex items-center justify-center peer-disabled:opacity-50 aspect-square absolute bottom-0 right-0 pointer-events-none select-none',
               {
                 'w-10': size === 'small',
                 'w-12': size === 'medium',

categories/choice/react/src/components/MenuSelect/MenuSelect.css

@@ -0,0 +1,17 @@
+.tesseract-design-menu-select optgroup {
+  color: rgb(var(--color-positive) / 50%);
+  text-transform: uppercase;
+  font-size: 0.75em;
+  margin-top: 0.5rem;
+  user-select: none;
+}
+
+.tesseract-design-menu-select optgroup > option {
+  color: rgb(var(--color-positive));
+  text-transform: none;
+  font-size: 1.333333em;
+}
+
+.tesseract-design-menu-select option {
+  user-select: none;
+}

categories/choice/react/src/components/MenuSelect/index.tsx

@@ -93,7 +93,7 @@ export const MenuSelect = React.forwardRef<MenuSelectDerivedElement, MenuSelectP
             height: startingHeight,
           }}
           className={clsx(
-            'bg-negative rounded-inherit w-full peer block overflow-auto',
+            'tesseract-design-menu-select bg-negative rounded-inherit w-full peer block overflow-auto cursor-pointer',
             'focus:outline-0',
             'disabled:opacity-50 disabled:cursor-not-allowed',
             {
@@ -141,7 +141,7 @@ export const MenuSelect = React.forwardRef<MenuSelectDerivedElement, MenuSelectP
               htmlFor={id}
               id={labelId}
               className={clsx(
-                'absolute z-[1] w-full top-0.5 left-0 pointer-events-none pl-1 text-xxs font-bold peer-disabled:opacity-50 peer-focus:text-secondary text-primary leading-none bg-negative',
+                'absolute z-[1] w-full top-0.5 left-0 pointer-events-none pl-1 text-xxs font-bold peer-disabled:opacity-50 peer-focus:text-secondary text-primary leading-none bg-negative select-none',
                 {
                   'sr-only': hiddenLabel,
                 },
@@ -165,7 +165,7 @@ export const MenuSelect = React.forwardRef<MenuSelectDerivedElement, MenuSelectP
           <div
             data-testid="hint"
             className={clsx(
-              'absolute left-0 px-1 pointer-events-none text-xxs peer-disabled:opacity-50 leading-none w-full bg-negative',
+              'absolute left-0 px-1 pointer-events-none text-xxs peer-disabled:opacity-50 leading-none w-full bg-negative select-none',
               {
                 'bottom-0 pl-4 pb-1': variant === 'default',
                 'top-0.5': variant === 'alternate',
@@ -195,7 +195,7 @@ export const MenuSelect = React.forwardRef<MenuSelectDerivedElement, MenuSelectP
         {indicator && (
           <div
             className={clsx(
-              'text-center flex items-center justify-center peer-disabled:opacity-50 aspect-square absolute bottom-0 right-0 pointer-events-none',
+              'text-center flex items-center justify-center peer-disabled:opacity-50 aspect-square absolute bottom-0 right-0 pointer-events-none select-none',
               {
                 'w-10': size === 'small',
                 'w-12': size === 'medium',

categories/multichoice/react/package.json

@@ -77,6 +77,7 @@
       "import": "./dist/esm/production/index.js",
       "types": "./dist/types/index.d.ts"
     },
+    "./dist/MenuMultiSelect.css": "./dist/MenuMultiSelect.css",
     "./dist/TagInput.css": "./dist/TagInput.css",
     "./dist/ToggleButton.css": "./dist/ToggleButton.css",
     "./dist/ToggleSwitch.css": "./dist/ToggleSwitch.css",
@@ -85,4 +86,4 @@
   "typesVersions": {
     "*": {}
   }
-}
+}

categories/multichoice/react/scripts/build.ts

@@ -1,4 +1,4 @@
-import { copyFileSync } from 'fs';
+import { copyFileSync, readFileSync, writeFileSync } from 'fs';
 import { resolve } from 'path';
 
 const doCopy = (src: string, dest: string) => {
@@ -7,9 +7,16 @@ const doCopy = (src: string, dest: string) => {
   console.log('Copying...');
   console.log(`${trueSrc} -> ${trueDest}`);
   copyFileSync(trueSrc, trueDest);
+  const packageJsonContents = readFileSync('./package.json', 'utf-8');
+  const packageJson = JSON.parse(packageJsonContents);
+  packageJson.exports[dest] = dest;
+  const newPackageJsonContents = JSON.stringify(packageJson, null, 2);
+  console.log('Updating package.json...');
+  writeFileSync('./package.json', newPackageJsonContents);
   console.log('Done');
 }
 
+doCopy('./src/components/MenuMultiSelect/MenuMultiSelect.css', './dist/MenuMultiSelect.css');
 doCopy('./src/components/TagInput/TagInput.css', './dist/TagInput.css');
 doCopy('./src/components/ToggleButton/ToggleButton.css', './dist/ToggleButton.css');
 doCopy('./src/components/ToggleSwitch/ToggleSwitch.css', './dist/ToggleSwitch.css');

categories/multichoice/react/src/components/MenuMultiSelect/MenuMultiSelect.css

@@ -0,0 +1,17 @@
+.tesseract-design-menu-multi-select optgroup {
+  color: rgb(var(--color-positive) / 50%);
+  text-transform: uppercase;
+  font-size: 0.75em;
+  margin-top: 0.5rem;
+  user-select: none;
+}
+
+.tesseract-design-menu-multi-select optgroup > option {
+  color: rgb(var(--color-positive));
+  text-transform: none;
+  font-size: 1.333333em;
+}
+
+.tesseract-design-menu-multi-select option {
+  user-select: none;
+}

categories/multichoice/react/src/components/MenuMultiSelect/index.tsx

@@ -75,7 +75,7 @@ export const MenuMultiSelect = React.forwardRef<
   return (
     <div
       className={clsx(
-        'relative rounded ring-secondary/50',
+        'tesseract-design-menu-multi-select relative rounded ring-secondary/50',
         'focus-within:ring-4',
         {
           'block': block,
@@ -144,7 +144,7 @@ export const MenuMultiSelect = React.forwardRef<
             id={labelId}
             htmlFor={id}
             className={clsx(
-              'absolute z-[1] w-full top-0.5 left-0 pointer-events-none pl-1 text-xxs font-bold peer-disabled:opacity-50 peer-focus:text-secondary text-primary leading-none bg-negative',
+              'absolute z-[1] w-full top-0.5 left-0 pointer-events-none pl-1 text-xxs font-bold peer-disabled:opacity-50 peer-focus:text-secondary text-primary leading-none bg-negative select-none',
               {
                 'sr-only': hiddenLabel,
               },
@@ -168,7 +168,7 @@ export const MenuMultiSelect = React.forwardRef<
         <div
           data-testid="hint"
           className={clsx(
-            'absolute left-0 px-1 pointer-events-none text-xxs peer-disabled:opacity-50 leading-none w-full bg-negative',
+            'absolute left-0 px-1 pointer-events-none text-xxs peer-disabled:opacity-50 leading-none w-full bg-negative select-none',
             {
               'bottom-0 pl-4 pb-1': variant === 'default',
               'top-0.5': variant === 'alternate',
@@ -198,7 +198,7 @@ export const MenuMultiSelect = React.forwardRef<
       {indicator && (
         <div
           className={clsx(
-            'text-center flex items-center justify-center peer-disabled:opacity-50 aspect-square absolute bottom-0 right-0 pointer-events-none',
+            'text-center flex items-center justify-center peer-disabled:opacity-50 aspect-square absolute bottom-0 right-0 pointer-events-none select-none',
             {
               'w-10': size === 'small',
               'w-12': size === 'medium',

categories/multichoice/react/src/components/TagInput/index.tsx

@@ -217,7 +217,7 @@ export const TagInput = React.forwardRef<TagInputDerivedElement, TagInputProps>(
           value={tags}
           classNames={{
             input: 'peer bg-transparent',
-            tag: 'text-xs p-2',
+            tag: 'text-xs p-2 select-none',
           }}
           disabled={disabled}
           onChange={handleTagsInputChange}
@@ -232,7 +232,7 @@ export const TagInput = React.forwardRef<TagInputDerivedElement, TagInputProps>(
             id={labelId}
             htmlFor={id}
             className={clsx(
-              'absolute z-[1] w-full top-0.5 left-0 pointer-events-none pl-1 text-xxs font-bold peer-disabled:opacity-50 group-focus-within:text-secondary text-primary leading-none bg-negative',
+              'absolute z-[1] w-full top-0.5 left-0 pointer-events-none pl-1 text-xxs font-bold peer-disabled:opacity-50 group-focus-within:text-secondary text-primary leading-none bg-negative select-none',
               {
                 'sr-only': hiddenLabel,
               },
@@ -256,7 +256,7 @@ export const TagInput = React.forwardRef<TagInputDerivedElement, TagInputProps>(
         <div
           data-testid="hint"
           className={clsx(
-            'absolute left-0 px-1 pointer-events-none text-xxs peer-disabled:opacity-50 leading-none w-full bg-negative',
+            'absolute left-0 px-1 pointer-events-none text-xxs peer-disabled:opacity-50 leading-none w-full bg-negative select-none',
             {
               'bottom-0 pl-4 pb-1': variant === 'default',
               'top-0.5': variant === 'alternate',
@@ -286,7 +286,7 @@ export const TagInput = React.forwardRef<TagInputDerivedElement, TagInputProps>(
       {indicator && (
         <div
           className={clsx(
-            'text-center flex items-center justify-center peer-disabled:opacity-50 aspect-square absolute bottom-0 right-0 pointer-events-none',
+            'text-center flex items-center justify-center peer-disabled:opacity-50 aspect-square absolute bottom-0 right-0 pointer-events-none select-none',
             {
               'w-10': size === 'small',
               'w-12': size === 'medium',

categories/number/react/scripts/build.ts

@@ -1,4 +1,4 @@
-import { copyFileSync } from 'fs';
+import { copyFileSync, readFileSync, writeFileSync } from 'fs';
 import { resolve } from 'path';
 
 const doCopy = (src: string, dest: string) => {
@@ -7,6 +7,12 @@ const doCopy = (src: string, dest: string) => {
   console.log('Copying...');
   console.log(`${trueSrc} -> ${trueDest}`);
   copyFileSync(trueSrc, trueDest);
+  const packageJsonContents = readFileSync('./package.json', 'utf-8');
+  const packageJson = JSON.parse(packageJsonContents);
+  packageJson.exports[dest] = dest;
+  const newPackageJsonContents = JSON.stringify(packageJson, null, 2);
+  console.log('Updating package.json...');
+  writeFileSync('./package.json', newPackageJsonContents);
   console.log('Done');
 }
 

showcases/web-kitchensink-reactnext/src/pages/_app.tsx

@@ -1,9 +1,12 @@
 import '@/styles/globals.css'
 import '@/styles/kitchen-sink.css'
 
+import '@tesseract-design/web-choice-react/dist/DropdownSelect.css'
+import '@tesseract-design/web-choice-react/dist/MenuSelect.css'
 import '@tesseract-design/web-choice-react/dist/RadioButton.css'
 import '@tesseract-design/web-choice-react/dist/RadioTickBox.css'
 
+import '@tesseract-design/web-multichoice-react/dist/MenuMultiSelect.css'
 import '@tesseract-design/web-multichoice-react/dist/TagInput.css'
 import '@tesseract-design/web-multichoice-react/dist/ToggleButton.css'
 import '@tesseract-design/web-multichoice-react/dist/ToggleSwitch.css'