@hyphen/hyphen-components 7.1.0 → 7.2.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hyphen/hyphen-components",
-  "version": "7.1.0",
+  "version": "7.2.0",
   "license": "MIT",
   "author": {
     "name": "@hyphen"

package/src/components/Formik/Formik.stories.tsx

@@ -42,6 +42,7 @@ export const FormikForm = () =>
       { value: 'chocolate', label: 'Chocolate' },
       { value: 'strawberry', label: 'Strawberry' },
       { value: 'vanilla', label: 'Vanilla' },
+      { value: 'mint', label: 'Mint', disabled: true },
     ];
     const colorOptions = [
       { value: 'red', label: 'red' },

package/src/components/SelectInputNative/SelectInputNative.stories.tsx

@@ -18,6 +18,7 @@ const options = [
   { value: 'chocolate', label: 'Chocolate' },
   { value: 'strawberry', label: 'Strawberry' },
   { value: 'vanilla', label: 'Vanilla' },
+  { value: 'mint', label: 'Mint', disabled: true },
 ];
 
 export const Default = () => {

package/src/components/SelectInputNative/SelectInputNative.test.tsx

@@ -5,9 +5,23 @@ import { SelectInputNative } from './SelectInputNative';
 
 const selectOptions = [
   { value: 'chocolate', label: 'Chocolate' },
-  { value: 'strawberry', label: 'Strawberry' },
+  { value: 'strawberry', label: 'Strawberry', disabled: true },
   { value: 'vanilla', label: 'Vanilla' },
 ];
+test('option with disabled property is rendered as disabled', () => {
+  const mockedHandleChange = jest.fn();
+  render(
+    <SelectInputNative
+      id="testId"
+      label="Disabled Option Test"
+      onChange={mockedHandleChange}
+      options={selectOptions}
+      value={null}
+    />
+  );
+  const option = screen.getByText('Strawberry');
+  expect(option).toBeDisabled();
+});
 
 function getByTextWithMarkup(text: string) {
   // eslint-disable-next-line

package/src/components/SelectInputNative/SelectInputNative.tsx

@@ -7,11 +7,17 @@ import { FormControl, FormControlProps } from '../FormControl/FormControl';
 import styles from './SelectInputNative.module.scss';
 
 export type SelectInputNativeSize = 'sm' | 'md' | 'lg';
+export interface SelectInputNativeOption {
+  value: string | number;
+  label: string | number;
+  disabled?: boolean;
+}
+
 export interface SelectInputNativeProps extends BoxProps, FormControlProps {
   /**
    * List of options for the select input.
    */
-  options: { value: string | number; label: string | number }[];
+  options: SelectInputNativeOption[];
   /**
    * onChange callback from select element.
    */
@@ -60,8 +66,15 @@ export const SelectInputNative: React.FC<SelectInputNativeProps> = ({
   size = 'md',
   ...restProps
 }) => {
-  const placeholderOption = { value: '', label: placeholder };
-  const optionsWithPlaceholder = [{ ...placeholderOption }, ...options];
+  const placeholderOption: SelectInputNativeOption = {
+    value: '',
+    label: placeholder,
+    disabled: true,
+  };
+  const optionsWithPlaceholder: SelectInputNativeOption[] = [
+    placeholderOption,
+    ...options,
+  ];
 
   const responsiveClasses = generateResponsiveClasses('size', size);
 
@@ -107,7 +120,7 @@ export const SelectInputNative: React.FC<SelectInputNativeProps> = ({
               as="option"
               key={option.value}
               value={option.value}
-              disabled={option.value === ''}
+              disabled={option.disabled ?? false}
               hidden={option.value === ''}
               color={option.value === '' ? 'disabled' : 'base'}
             >