diff --git a/src/components/Select/SingleSelect.stories.tsx b/src/components/Select/SingleSelect.stories.tsx
index b9926453..d1ff13b2 100644
--- a/src/components/Select/SingleSelect.stories.tsx
+++ b/src/components/Select/SingleSelect.stories.tsx
@@ -1,7 +1,10 @@
-import { Select, SelectProps } from "./SingleSelect";
import { Preview } from "@storybook/react";
-import { selectOptions } from "./selectOptions";
+import { Select, SelectProps } from "@/components/Select/SingleSelect";
+import { selectOptions } from "@/components/Select/selectOptions";
import { useEffect, useState } from "react";
+import { Container } from "@/components/Container/Container";
+import { Panel } from "@/components/Panel/Panel";
+import { Title } from "@/components/Typography/Title/Title";
interface Props extends SelectProps {
childrenType: "children" | "options";
}
@@ -67,6 +70,8 @@ export default {
orientation: { control: "inline-radio", options: ["horizontal", "vertical"] },
dir: { control: "inline-radio", options: ["start", "end"] },
childrenType: { control: "inline-radio", options: ["children", "options"] },
+ useFullWidthItems: { control: "boolean" },
+ itemCharacterLimit: { control: "text" },
},
};
@@ -123,3 +128,63 @@ ${
},
},
};
+
+export const UseFullWidth = {
+ args: {},
+ render: () => {
+ return (
+
+
+ Full width items
+
+
+ Larger itemCharacterLimit
+
+
+ Not full width items
+
+
+
+ );
+ },
+ tags: ["form-field", "select", "autodocs"],
+};
diff --git a/src/components/Select/SingleSelect.tsx b/src/components/Select/SingleSelect.tsx
index 14c30d37..6d58cf82 100644
--- a/src/components/Select/SingleSelect.tsx
+++ b/src/components/Select/SingleSelect.tsx
@@ -12,6 +12,8 @@ export interface SelectProps
value?: string;
placeholder?: string;
onOpenChange?: (open: boolean) => void;
+ useFullWidthItems?: boolean;
+ itemCharacterLimit?: string;
}
export const Select = ({
diff --git a/src/components/Select/common/InternalSelect.tsx b/src/components/Select/common/InternalSelect.tsx
index 0b64db2c..83cde9f2 100644
--- a/src/components/Select/common/InternalSelect.tsx
+++ b/src/components/Select/common/InternalSelect.tsx
@@ -118,6 +118,8 @@ export const InternalSelect = ({
selectLabel,
showSearch = false,
container,
+ useFullWidthItems = false,
+ itemCharacterLimit = "64ch",
...props
}: SelectContainerProps) => {
const defaultId = useId();
@@ -380,6 +382,8 @@ export const InternalSelect = ({
setHighlighted(visibleList.current[0]);
}}
align="start"
+ $useFullWidthItems={useFullWidthItems}
+ $itemCharacterLimit={itemCharacterLimit}
>
diff --git a/src/components/Select/common/SelectStyled.tsx b/src/components/Select/common/SelectStyled.tsx
index a25abcad..80366c75 100644
--- a/src/components/Select/common/SelectStyled.tsx
+++ b/src/components/Select/common/SelectStyled.tsx
@@ -81,12 +81,27 @@ export const StyledSelectTrigger = styled(Trigger)<{ $error: boolean }>`
}
`;
-export const SelectPopoverContent = styled(Content)`
+export const SelectPopoverContent = styled(Content)<{
+ $useFullWidthItems: boolean;
+ $itemCharacterLimit?: string;
+}>`
width: var(--radix-popover-trigger-width);
max-height: var(--radix-popover-content-available-height);
border-radius: 0.25rem;
pointer-events: auto;
+ ${({ $useFullWidthItems, $itemCharacterLimit }) => `
+ ${
+ $useFullWidthItems
+ ? `
+ max-width: ${$itemCharacterLimit};
+ min-width: var(--radix-popover-trigger-width);
+ width: 100%;
+ `
+ : "width: var(--radix-popover-trigger-width)"
+ };
+ `}
+
${({ theme }) => `
border: 1px solid ${theme.click.genericMenu.item.color.stroke.default};
background: ${theme.click.genericMenu.item.color.background.default};
diff --git a/src/components/Select/common/types.ts b/src/components/Select/common/types.ts
index e8a5d8e4..9638ddf8 100644
--- a/src/components/Select/common/types.ts
+++ b/src/components/Select/common/types.ts
@@ -82,6 +82,8 @@ interface InternalSelectProps
showSearch?: boolean;
customText?: string;
container?: HTMLElement;
+ useFullWidthItems?: boolean;
+ itemCharacterLimit?: string;
}
export type SelectOptionProp = SelectOptionType | SelectChildrenType;