tide-design-system 2.0.29 → 2.0.30

package/index.ts

@@ -67,7 +67,7 @@ import type { Priority } from '@/types/Priority';
 import type { Raw } from '@/types/Raw';
 import type { Realm } from '@/types/Realm';
 import type { RealmConfig } from '@/types/RealmConfig';
-import type { SelectOption, SelectOptGroup } from '@/types/Select';
+import type { SelectOption, SelectOptionGroup } from '@/types/Select';
 import type { Size } from '@/types/Size';
 import type { Breakpoint, CssUtility } from '@/types/Styles';
 import type { Tab } from '@/types/Tab';
@@ -128,7 +128,7 @@ export type {
   RealmConfig,
   SelectField,
   SelectInput,
-  SelectOptGroup,
+  SelectOptionGroup,
   SelectOption,
   Size,
   StringField,

package/package.json

@@ -52,5 +52,5 @@
   "main": "dist/tide-design-system.cjs",
   "module": "dist/tide-design-system.esm.js",
   "types": "dist/tide-design-system.esm.d.ts",
-  "version": "2.0.29"
+  "version": "2.0.30"
 }

package/src/components/TideInputSelect.vue

@@ -115,6 +115,23 @@
           :id="uniqueId"
           v-model="value"
         >
+          <component
+            :class="[CSS.WIDTH.FULL, CSS.BG.SURFACE.DEFAULT]"
+            :key="optgroup.label"
+            :label="optgroup.label"
+            :is="optgroup.options ? 'optgroup' : 'option'"
+            v-for="optgroup in props.optgroups"
+          >
+            <option
+              :class="[CSS.WIDTH.FULL, CSS.BG.SURFACE.DEFAULT]"
+              :key="option.value"
+              :value="option.value"
+              v-for="option in optgroup.options"
+            >
+              {{ option.label }}
+            </option>
+          </component>
+
           <option
             :class="[CSS.WIDTH.FULL, CSS.BG.SURFACE.DEFAULT]"
             :key="option.value"

package/src/stories/TideInputSelect.stories.ts

@@ -1,6 +1,6 @@
 import { action } from '@storybook/addon-actions';
 
-import type { SelectOption } from '@/types/Select';
+import type { SelectOption, SelectOptionGroup } from '@/types/Select';
 
 import TideInputSelect from '@/components/TideInputSelect.vue';
 import {
@@ -19,6 +19,43 @@ const options = {
   'Option 3': 3,
 };
 
+const selectOptionGroups: SelectOptionGroup[] = [
+  {
+    label: 'Group A',
+    options: [
+      {
+        label: 'Option 1',
+        value: 1,
+      },
+      {
+        label: 'Option 2',
+        value: 2,
+      },
+      {
+        label: 'Option 3',
+        value: 3,
+      },
+    ],
+  },
+  {
+    label: 'Group B',
+    options: [
+      {
+        label: 'Option 4',
+        value: 4,
+      },
+      {
+        label: 'Option 5',
+        value: 5,
+      },
+      {
+        label: 'Option 6',
+        value: 6,
+      },
+    ],
+  },
+];
+
 const selectOptions: SelectOption[] = [
   {
     label: 'Option 1',
@@ -87,10 +124,20 @@ export default {
         type: { summary: 'string' },
       },
     },
+    optgroups: {
+      ...formatArgType({ selectOptionGroups }),
+      control: 'object',
+      description: 'Determines grouped values found inside Select',
+      isCustom: true,
+      table: {
+        defaultValue: { summary: '[]' },
+        type: { summary: 'SelectOptionGroup[]' },
+      },
+    },
     options: {
       ...formatArgType({ selectOptions }),
       control: 'object',
-      description: 'Determines values found inside Select',
+      description: 'Determines ungrouped values found inside Select',
       isCustom: true,
       table: {
         defaultValue: { summary: '[]' },
@@ -130,6 +177,7 @@ export default {
     inputId: '',
     label: 'Input label',
     name: '',
+    optgroups: selectOptionGroups,
     options: selectOptions,
     required: undefined,
     supportingText: '',

package/src/types/Field.ts

@@ -1,5 +1,5 @@
 import type { FormValueTransformer } from '@/types/Form';
-import type { SelectOption } from '@/types/Select';
+import type { SelectOptionGroup, SelectOption } from '@/types/Select';
 import type { TextInputType } from '@/types/TextInput';
 import type { ValidationError, Validator } from '@/types/Validation';
 
@@ -25,7 +25,8 @@ interface GenericInput {
 }
 
 interface SelectField extends GenericInput, StringValue {
-  options: SelectOption[];
+  optgroups?: SelectOptionGroup[];
+  options?: SelectOption[];
 }
 
 interface StringValue {

package/src/types/Form.ts

@@ -1,4 +1,4 @@
-import type { SelectOptGroup, SelectOption } from '@/types/Select';
+import type { SelectOptionGroup, SelectOption } from '@/types/Select';
 import type { TextInputType } from '@/types/TextInput';
 import type { ValidationError, Validator } from '@/types/Validation';
 
@@ -24,7 +24,7 @@ export type SelectInput = GenericInput &
   StringValue & {
     options?: SelectOption[] | readonly SelectOption[];
     placeholder?: string;
-    optgroups?: SelectOptGroup[];
+    optgroups?: SelectOptionGroup[];
   };
 
 export type TextInput = GenericInput &

package/src/types/Select.ts

@@ -3,8 +3,7 @@ export type SelectOption = {
   value: any;
 };
 
-export type SelectOptGroup = {
+export type SelectOptionGroup = {
   label: string;
   options?: SelectOption[];
-  value?: any;
 };