[LG-2163] chore: Select component removed readOnly prop (#3241)

Author: adamrasheed

.changeset/moody-cougars-sell.md

@@ -0,0 +1,5 @@
+---
+'@leafygreen-ui/select': minor
+---
+
+Removed readOnly prop

packages/select/README.md

@@ -97,7 +97,6 @@ function ControlledSelect() {
 | `value`              | `string`                                            | Sets the `<Option />` that will appear selected and makes the component a controlled component.                                                                                                                                                                                                                                                                                       | `''`                                |
 | `defaultValue`       | `string`                                            | Sets the `<Option />` that will appear selected on page load when the component is uncontrolled.                                                                                                                                                                                                                                                                                      | `''`                                |
 | `onChange`           | `function`                                          | A function that gets called when the selected value changes. Receives the value string as the first argument.                                                                                                                                                                                                                                                                         | `() => {}`                          |
-| `readOnly`           | `boolean`                                           | Disables the console warning when the component is controlled and no `onChange` prop is provided.                                                                                                                                                                                                                                                                                     | `false`                             |
 | `allowDeselect`      | `boolean`                                           | Enables or disables the option for a user to select a null default value.                                                                                                                                                                                                                                                                                                             | `true`                              |
 | `open`               | `boolean`                                           | Controls whether the dropdown menu is open. When provided, the component becomes a controlled component for the open state.                                                                                                                                                                                                                                                           |                                     |
 | `setOpen`            | `function`                                          | Callback function that is called when the open state should change. Required when `open` prop is provided. Receives a boolean value as the first argument.                                                                                                                                                                                                                            |                                     |

packages/select/src/MenuButton/MenuButton.tsx

@@ -36,7 +36,6 @@ const MenuButton = React.forwardRef<HTMLButtonElement, MenuButtonProps>(
       text,
       name,
       deselected,
-      readOnly,
       onClose,
       onOpen,
       state,

packages/select/src/MenuButton/MenuButton.types.ts

@@ -9,7 +9,6 @@ export interface MenuButtonBaseProps extends React.ComponentProps<'button'> {
   text: React.ReactNode;
   name?: string;
   deselected: boolean;
-  readOnly?: boolean;
   onClose: () => void;
   onOpen: () => void;
   state?: State;

packages/select/src/Select.stories.tsx

@@ -119,7 +119,6 @@ const meta: StoryMetaType<typeof Select> = {
     label: { control: 'text' },
     description: { control: 'text' },
     defaultValue: { control: 'text' },
-    readOnly: { control: 'boolean' },
     errorMessage: { control: 'text' },
     allowDeselect: { control: 'boolean' },
     open: {

packages/select/src/Select/Select.spec.tsx

@@ -313,21 +313,19 @@ describe('packages/select', () => {
     Context.within(Jest.spyContext(console, 'warn'), spy => {
       spy.mockImplementation();
 
-      // @ts-ignore React18-expect-error - expecting `readOnly` prop
       render(<Select {...defaultProps} value="" />);
 
       expect(spy).toHaveBeenCalledTimes(1);
       expect(spy).toHaveBeenCalledWith(
         'You provided a `value` prop to a form field without an `onChange` handler. ' +
           'This will render a read-only field. ' +
           'If the field should be mutable use `defaultValue`. ' +
-          'Otherwise, set either `onChange` or `readOnly`.',
+          'Otherwise, set `onChange`.',
       );
 
       spy.mockClear();
 
       render(<Select {...defaultProps} defaultValue="" />);
-      render(<Select {...defaultProps} value="" readOnly />);
       render(<Select {...defaultProps} value="" onChange={() => {}} />);
 
       expect(spy).not.toHaveBeenCalled();

packages/select/src/Select/Select.tsx

@@ -85,7 +85,6 @@ export const Select = forwardRef<HTMLDivElement, SelectProps>(
       defaultValue,
       value,
       onChange,
-      readOnly,
       portalContainer,
       portalRef,
       scrollContainer,
@@ -142,15 +141,15 @@ export const Select = forwardRef<HTMLDivElement, SelectProps>(
     }, [size, open, disabled, lgIds]);
 
     useEffect(() => {
-      if (value !== undefined && onChange === undefined && readOnly !== true) {
+      if (value !== undefined && onChange === undefined) {
         console.warn(
           'You provided a `value` prop to a form field without an `onChange` handler. ' +
             'This will render a read-only field. ' +
             'If the field should be mutable use `defaultValue`. ' +
-            'Otherwise, set either `onChange` or `readOnly`.',
+            'Otherwise, set `onChange`.',
         );
       }
-    }, [onChange, readOnly, value]);
+    }, [onChange, value]);
 
     useEffect(() => {
       if (openProp !== undefined && setOpenProp === undefined) {
@@ -623,7 +622,6 @@ export const Select = forwardRef<HTMLDivElement, SelectProps>(
               id={menuButtonId}
               ref={menuButtonRef}
               name={name}
-              readOnly={readOnly}
               value={getOptionValue(selectedOption)}
               text={
                 selectedOption !== null

packages/select/src/Select/Select.types.ts

@@ -139,7 +139,7 @@ export type SelectProps = BaseSelectProps &
   Either<LabelProp, 'label' | 'aria-labelledby' | 'aria-label'> &
   (
     | // Uncontrolled
-    ({
+    {
         /**
          * `value` makes the component a controlled component and using `defaultValue` makes it uncontrolled.
          */
@@ -148,7 +148,6 @@ export type SelectProps = BaseSelectProps &
          * `value` makes the component a controlled component and using `defaultValue` makes it uncontrolled.
          */
         value?: undefined;
-      } & {
         /**
          * A function that takes in the value of the selected option, and the event that was used to select the value (i.e. React.MouseEvent | KeyboardEvent | React.KeyboardEvent).
          *
@@ -158,25 +157,19 @@ export type SelectProps = BaseSelectProps &
           value: string,
           event: React.MouseEvent | KeyboardEvent | React.KeyboardEvent,
         ) => void;
+      }
+    // Controlled
+    | {
+        value: string;
+        defaultValue?: undefined;
         /**
-         * Indicates that the component's value cannot be changed.
+         * A function that takes in the value of the selected option, and the event that was used to select the value (i.e. React.MouseEvent | KeyboardEvent | React.KeyboardEvent).
+         *
+         * Note: This API is different from the native HTML `<select>` element's `onChange` prop given the current technical design of this component.
          */
-        readOnly?: false;
-      })
-    // Controlled
-    | ({ value: string; defaultValue?: undefined } & (
-        | {
-            /**
-             * A function that takes in the value of the selected option, and the event that was used to select the value (i.e. React.MouseEvent | KeyboardEvent | React.KeyboardEvent).
-             *
-             * Note: This API is different from the native HTML `<select>` element's `onChange` prop given the current technical design of this component.
-             */
-            onChange: (
-              value: string,
-              event: React.MouseEvent | KeyboardEvent | React.KeyboardEvent,
-            ) => void;
-            readOnly?: false;
-          }
-        | { readOnly: true; onChange?: undefined }
-      ))
+        onChange?: (
+          value: string,
+          event: React.MouseEvent | KeyboardEvent | React.KeyboardEvent,
+        ) => void;
+      }
   );