Select: add maxHeight prop (#673)

Author: hoorayimhelping

src/components/Select/MultiSelect.stories.tsx

@@ -2,6 +2,8 @@ import { Meta, StoryObj } from "@storybook/react-vite";
 import { MultiSelect } from "./MultiSelect";
 import { selectOptions } from "./selectOptions";
 import { useEffect, useState } from "react";
+import { Container } from "../Container/Container";
+import { Panel } from "../Panel/Panel";
 
 const meta: Meta<typeof MultiSelect> = {
   component: MultiSelect,
@@ -79,3 +81,26 @@ export const OptionsAsProp: StoryObj<typeof MultiSelect> = {
     );
   },
 };
+
+export const MaxHeight = {
+  args: {},
+  render: () => {
+    return (
+      <Container fillWidth>
+        <Panel>
+          <MultiSelect maxHeight="200px">
+            <MultiSelect.Item value="item 1">Fish</MultiSelect.Item>
+            <MultiSelect.Item value="item 2">Bread</MultiSelect.Item>
+            <MultiSelect.Item value="item 3">Rocks</MultiSelect.Item>
+            <MultiSelect.Item value="item 4">Snakes</MultiSelect.Item>
+            <MultiSelect.Item value="item 5">Boats</MultiSelect.Item>
+            <MultiSelect.Item value="item 6">Sandals</MultiSelect.Item>
+            <MultiSelect.Item value="item 7">Potatoes</MultiSelect.Item>
+            <MultiSelect.Item value="item 8">Rabbits</MultiSelect.Item>
+          </MultiSelect>
+        </Panel>
+      </Container>
+    );
+  },
+  tags: ["form-field", "select", "autodocs"],
+};

src/components/Select/SingleSelect.stories.tsx

@@ -124,6 +124,30 @@ export const UseFullWidth = {
   tags: ["form-field", "select", "autodocs"],
 };
 
+export const MaxHeight = {
+  args: {},
+  render: () => {
+    return (
+      <Container fillWidth>
+        <Panel>
+          <Title type="h2">Select with max height</Title>
+          <Select maxHeight="200px">
+            <Select.Item value="item 1">Fish</Select.Item>
+            <Select.Item value="item 2">Bread</Select.Item>
+            <Select.Item value="item 3">Rocks</Select.Item>
+            <Select.Item value="item 4">Snakes</Select.Item>
+            <Select.Item value="item 5">Boats</Select.Item>
+            <Select.Item value="item 6">Sandals</Select.Item>
+            <Select.Item value="item 7">Potatoes</Select.Item>
+            <Select.Item value="item 8">Rabbits</Select.Item>
+          </Select>
+        </Panel>
+      </Container>
+    );
+  },
+  tags: ["form-field", "select", "autodocs"],
+};
+
 export const NoOptions: StoryObj<typeof Select> = {
   // prettier-ignore
   args: { label: "Label", customText: "No results for \"{search}\"" },
@@ -202,6 +226,7 @@ const NoOptionsComponent = ({
     </Container>
   );
 };
+
 export const NoOptionCustomNode: StoryObj<typeof Select> = {
   // prettier-ignore
   args: { },

src/components/Select/common/InternalSelect.tsx

@@ -215,6 +215,7 @@ export const InternalSelect = ({
   options,
   sortable = false,
   placeholder = "Select an option",
+  maxHeight,
   multiple,
   checkbox,
   selectLabel,
@@ -507,7 +508,7 @@ export const InternalSelect = ({
                     size="xs"
                   />
                 </SearchBarContainer>
-                <SelectListContent>
+                <SelectListContent $maxHeight={maxHeight}>
                   <OptionContext.Provider value={optionContextValue}>
                     {options && options.length > 0
                       ? options.map((props, index) => {

src/components/Select/common/SelectStyled.tsx

@@ -178,10 +178,16 @@ export const SelectList = styled.div`
   width: inherit;
   max-height: calc(var(--radix-popover-content-available-height) - 1rem);
 `;
-export const SelectListContent = styled.div`
+export const SelectListContent = styled.div<{ $maxHeight?: string }>`
   width: inherit;
   overflow: auto;
   flex: 1;
+
+  ${({ $maxHeight }) =>
+    $maxHeight &&
+    `
+      max-height: ${$maxHeight};
+    `}
 `;
 
 export const HiddenSelectElement = styled.select`

src/components/Select/common/types.ts

@@ -71,40 +71,41 @@ export type SelectionType = "custom" | "default";
 interface InternalSelectProps
   extends PopoverProps,
     Omit<HTMLAttributes<HTMLDivElement>, "onChange" | "dir" | "onSelect" | "children"> {
-  label?: ReactNode;
-  error?: ReactNode;
-  disabled?: boolean;
-  name?: string;
-  form?: string;
-  dir?: "start" | "end";
-  orientation?: "horizontal" | "vertical";
-  allowCreateOption?: boolean;
   onChange: (selectedValues: Array<string>) => void;
-  open: boolean;
   onOpenChange: (open: boolean) => void;
-  value: Array<string>;
-  sortable?: boolean;
   onSelect: (
     value: string,
     type?: SelectionType,
     evt?: KeyboardEvent<HTMLElement> | MouseEvent<HTMLElement>
   ) => void;
-  multiple?: boolean;
+  open: boolean;
+  value: Array<string>;
+  allowCreateOption?: boolean;
   checkbox?: boolean;
-  selectLabel?: string;
-  placeholder?: string;
-  showSearch?: boolean;
-  customText?: string;
   container?: HTMLElement;
-  useFullWidthItems?: boolean;
+  customText?: string;
+  dir?: "start" | "end";
+  disabled?: boolean;
+  error?: ReactNode;
+  form?: string;
   itemCharacterLimit?: string;
+  label?: ReactNode;
+  maxHeight?: string;
+  multiple?: boolean;
+  name?: string;
   /**
    * Controls rendering when no options are available.
    * - false: renders nothing
    * - true: renders default message 'No Options found' with search term if present
    * - ({ search: string, onClose: () => void }) => ReactNode: renders the returned node allowing dynamic content based on current search string
    */
   noAvailableOptions?: boolean | ((props: NoAvailableOptionsFactoryProps) => ReactNode);
+  orientation?: "horizontal" | "vertical";
+  placeholder?: string;
+  selectLabel?: string;
+  showSearch?: boolean;
+  sortable?: boolean;
+  useFullWidthItems?: boolean;
 }
 
 export type SelectOptionProp = SelectOptionType | SelectChildrenType;