@aurora-ds/components 0.19.0 → 0.19.2

package/dist/esm/components/forms/select/Select.props.d.ts

@@ -5,13 +5,21 @@ export type SelectProps = {
      */
     options: SelectOption[];
     /**
-     * The currently selected value
+     * The currently selected value (null to show placeholder)
      */
-    value?: string | number;
+    value: string | number | null;
     /**
      * Callback when selection changes
      */
-    onChange?: (value: string | number) => void;
+    onChange: (value: string | number | null) => void;
+    /**
+     * Label displayed above the select
+     */
+    label?: string;
+    /**
+     * Whether the field is mandatory (displays an asterisk next to the label)
+     */
+    mandatory?: boolean;
     /**
      * Placeholder text when no option is selected
      */

package/dist/esm/components/index.d.ts

@@ -28,3 +28,4 @@ export type { AlertVariant, AlertPosition } from '@interfaces/alert.types';
 export type { ButtonVariants, ButtonVariantStyle } from '@interfaces/button.types';
 export type { TextVariants, TextVariantStyle } from '@interfaces/text.types';
 export type { ChipVariant, ChipColor, ChipSize } from '@interfaces/chip.types';
+export type { SelectOption } from '@interfaces/select.types';

package/dist/esm/index.js

@@ -1403,10 +1403,11 @@ MenuItem.displayName = 'MenuItem';
 /**
  * Select component that uses Menu for dropdown
  */
-const Select = ({ options, value, onChange, placeholder = 'Select an option', disabled = false, width }) => {
+const Select = ({ options, value, onChange, label, mandatory = false, placeholder = 'Select an option', disabled = false, width }) => {
     const [isOpen, setIsOpen] = useState(false);
     const triggerRef = useRef(null);
     const selectedOption = options.find(option => option.value === value);
+    const menuWidth = triggerRef.current?.offsetWidth ?? width;
     const handleTriggerClick = () => {
         if (!disabled) {
             setIsOpen(!isOpen);
@@ -1416,10 +1417,10 @@ const Select = ({ options, value, onChange, placeholder = 'Select an option', di
         setIsOpen(false);
     };
     const handleSelect = (selectedValue) => {
-        onChange?.(selectedValue);
+        onChange(selectedValue);
         setIsOpen(false);
     };
-    return (jsxs(Fragment$1, { children: [jsxs("div", { ref: triggerRef, className: SELECT_STYLES.root({ disabled, width }), onClick: handleTriggerClick, role: 'button', tabIndex: disabled ? -1 : 0, "aria-expanded": isOpen, "aria-haspopup": 'listbox', children: [jsx("div", { className: SELECT_STYLES.trigger, children: jsx(Text, { variant: 'p', maxLines: 1, color: selectedOption ? 'text' : 'textSecondary', children: selectedOption ? selectedOption.label : placeholder }) }), jsx(Icon, { children: jsx(ChevronDownIcon, {}) })] }), jsx(Menu, { anchor: isOpen ? triggerRef.current : null, onClose: handleClose, width: width, children: jsx(MenuGroup, { children: options.map(option => (jsx(SelectItem, { option: option, isSelected: option.value === value, onSelect: handleSelect }, option.value))) }) })] }));
+    return (jsxs(Stack, { direction: 'column', gap: 'xs', align: 'stretch', width: width ?? '100%', children: [label && (jsxs(Stack, { direction: 'row', gap: 'xs', align: 'center', children: [jsx(Text, { variant: 'label', fontSize: 'sm', children: label }), mandatory && (jsx(Text, { variant: 'label', fontSize: 'sm', color: 'error', children: "*" }))] })), jsxs("div", { ref: triggerRef, className: SELECT_STYLES.root({ disabled, width }), onClick: handleTriggerClick, role: 'button', tabIndex: disabled ? -1 : 0, "aria-expanded": isOpen, "aria-haspopup": 'listbox', children: [jsx("div", { className: SELECT_STYLES.trigger, children: jsx(Text, { variant: 'p', maxLines: 1, color: selectedOption ? 'text' : 'textSecondary', children: selectedOption ? selectedOption.label : placeholder }) }), jsx(Icon, { children: jsx(ChevronDownIcon, {}) })] }), jsx(Menu, { anchor: isOpen ? triggerRef.current : null, onClose: handleClose, width: menuWidth, children: jsx(MenuGroup, { children: options.map(option => (jsx(SelectItem, { option: option, isSelected: option.value === value, onSelect: handleSelect }, option.value))) }) })] }));
 };
 Select.displayName = 'Select';