feat(@clayui/core): adds new width API for the picker

packages/clay-core/docs/picker.js

@@ -13,6 +13,52 @@ import Layout from '@clayui/layout';
 import {useId} from '@clayui/shared';
 import React from 'react';
 
+const PickerWidthExample = () => {
+	const imports = `import {Option, Picker} from '@clayui/core';
+import Form from '@clayui/form';
+import React from 'react';`;
+
+	const code = `const CustomWidth = () => {
+	return (
+		<div style={{width: '240px'}}>
+			<Form.Group>
+				<label htmlFor="picker" id="picker-label">
+					Choose a fruit
+				</label>
+				<Picker
+					width="flexible"
+					aria-labelledby="picker-label"
+					id="picker"
+					items={[
+						'Apple',
+						'Banana',
+						'Mangos',
+						'Blueberry',
+						'Boysenberry',
+						'Cherry',
+						'Cranberry',
+						'Eggplant',
+						'Fig',
+						'Grape',
+						'Guava',
+						'Huckleberry',
+					]}
+					placeholder="Select a fruit"
+				>
+					{(item) => <Option key={item}>{item}</Option>}
+				</Picker>
+			</Form.Group>
+		</div>
+	);
+};
+
+render(<CustomWidth />)`;
+
+	return (
+		<Editor code={code} imports={imports} scope={{Form, Option, Picker}} />
+	);
+};
+
 const exampleImports = `import {Option, Picker} from '@clayui/core';
 import Form from '@clayui/form';
 import React from 'react';`;
@@ -262,6 +308,7 @@ const PickerGroupExample = () => {
 	);
 };
 export {
+	PickerWidthExample,
 	PickerExample,
 	PickerGroupExample,
 	PickerTriggerExample,

packages/clay-core/docs/picker.mdx

@@ -7,6 +7,7 @@ storybookPath: 'design-system-components-picker'
 ---
 
 import {
+	PickerWidthExample,
 	PickerExample,
 	PickerGroupExample,
 	PickerTriggerExample,
@@ -26,6 +27,7 @@ import {
     -   [Custom Trigger](#custom-trigger)
     -   [Custom Options](#custom-options)
     -   [Group](#group)
+-   [Flexibe width](#flexibe-width)
 -   [Hybrid component](#hybrid-component)
 
 </div>
@@ -153,6 +155,10 @@ The composition allows you to customize the component or add new features. See s
 
 <PickerGroupExample />
 
+## Flexibe width
+
+<PickerWidthExample />
+
 ## Hybrid component
 
 Native select for mobile devices offers a better experience compared to Picker in some cases. The Picker offers the possibility to render using the native selector of the browser of the device when it is detected that it is on a mobile device, by default this property is disabled but it can be enabled by setting the `native` property to `true`.

packages/clay-core/src/picker/Picker.tsx

@@ -126,6 +126,11 @@ export type Props<T> = {
 	 */
 	selectedKey?: React.Key;
 
+	/**
+	 * Flag to define the panel width behavior.
+	 */
+	width?: 'flexible' | 'fixed';
+
 	/**
 	 * Sets the className for the React.Portal Menu element.
 	 */
@@ -163,6 +168,7 @@ export function Picker<T extends Record<string, any> | string | number>({
 	onSelectionChange,
 	placeholder = 'Select an option',
 	selectedKey: externalSelectedKey,
+	width = 'fixed',
 	...otherProps
 }: Props<T>) {
 	const [active, setActive] = useControlledState({
@@ -529,6 +535,15 @@ export function Picker<T extends Record<string, any> | string | number>({
 						)}
 						ref={menuRef}
 						role="presentation"
+						style={
+							width === 'flexible' &&
+							(triggerRef.current?.clientWidth || 0) > 160
+								? {
+										maxWidth: 'none',
+										width: `${triggerRef.current?.clientWidth}px`,
+								  }
+								: {}
+						}
 					>
 						{UNSAFE_behavior === 'secondary' &&
 							(isArrowVisible === 'top' ||

packages/clay-core/stories/Picker.stories.tsx

@@ -225,3 +225,45 @@ export const CustomGroup = () => {
 		</div>
 	);
 };
+
+export const Width = ({width}: {width: 'fixed' | 'flexible'}) => {
+	const pickerId = useId();
+	const labelId = useId();
+
+	return (
+		<div style={{width: '250px'}}>
+			<Form.Group>
+				<label htmlFor={pickerId} id={labelId}>
+					Choose a fruit
+				</label>
+				<Picker aria-labelledby={labelId} id={pickerId} width={width}>
+					<Option key="apple">Apple</Option>
+					<Option disabled key="banana">
+						Banana
+					</Option>
+					<Option key="mangos">Mangos</Option>
+					<Option key="blueberry">Blueberry</Option>
+					<Option key="boysenberry">Boysenberry</Option>
+					<Option key="cherry">Cherry</Option>
+					<Option key="cranberry">Cranberry</Option>
+					<Option key="eggplant">Eggplant</Option>
+					<Option key="fig">Fig</Option>
+					<Option key="grape">Grape</Option>
+					<Option key="guava">Guava</Option>
+					<Option key="huckleberry">Huckleberry</Option>
+				</Picker>
+			</Form.Group>
+		</div>
+	);
+};
+
+Width.args = {
+	width: 'flexible',
+};
+
+Width.argTypes = {
+	width: {
+		control: {type: 'select'},
+		options: ['fixed', 'flexible'],
+	},
+};

packages/clay-css/src/scss/variables/_dropdowns.scss

@@ -943,6 +943,7 @@ $dropdown-menu-palette: () !default;
 $dropdown-menu-palette: map-deep-merge(
 	(
 		'.dropdown-menu-select.dropdown-menu': (
+			min-width: 160px,
 			dropdown-header: (
 				padding-bottom: 0.375rem,
 				padding-left: 1.75rem,