@dragunio/fe-libs 0.1.11 → 0.1.12

package/dist/index.d.mts

@@ -411,7 +411,21 @@ type SelectionProps = Omit<HTMLAttributes<HTMLDivElement>, 'onChange' | 'default
     disabled?: boolean;
     name?: string;
     onKeyDown?: KeyboardEventHandler<HTMLButtonElement>;
+    /**
+     * Caps the field width. Numbers are pixels (`240` → `240px`); strings are
+     * any CSS length (`'16rem'`, `'50%'`). The field still shrinks inside
+     * narrower containers.
+     */
+    maxWidth?: number | string;
+    /**
+     * How a selected label longer than the field is shown:
+     * - `'ellipsis'` (default): one line ending in `…`; the full text appears
+     *   in a tooltip on hover or focus.
+     * - `'wrap'`: the label wraps onto more lines and the field grows taller.
+     */
+    overflow?: SelectionOverflow;
 };
+type SelectionOverflow = 'ellipsis' | 'wrap';
 
 /** A rounded, searchable custom dropdown with single, multiple, and tag modes. */
 declare const Selection: react.ForwardRefExoticComponent<Omit<react.HTMLAttributes<HTMLDivElement>, "value" | "defaultValue" | "onChange" | "onKeyDown"> & {
@@ -435,6 +449,8 @@ declare const Selection: react.ForwardRefExoticComponent<Omit<react.HTMLAttribut
     disabled?: boolean;
     name?: string;
     onKeyDown?: react.KeyboardEventHandler<HTMLButtonElement>;
+    maxWidth?: number | string;
+    overflow?: SelectionOverflow;
 } & react.RefAttributes<HTMLDivElement>>;
 
 declare function formatNumber(value: number, decimals?: number, thousandSeparator?: string, decimalSeparator?: string): string;
@@ -1001,4 +1017,4 @@ declare function NotFoundLost(props: NotFoundSceneProps): react.JSX.Element;
 /** A 404 page with a stable random design, or an explicitly selected variant. */
 declare function NotFound({ variant, ...props }: NotFoundProps): react.JSX.Element;
 
-export { Avatar, AvatarGroup, type AvatarGroupProps, type AvatarProps, type AvatarShape, type AvatarSize, Button, ButtonBar, type ButtonBarAction, type ButtonBarItem, type ButtonBarProps, type ButtonColor, type ButtonHierarchy, type ButtonProps, type ButtonSize, type ButtonVariant, Checkbox, type CheckboxProps, Chip, type ChipProps, type ChipStatus, type ChipVariant, type ColumnResizeHandler, type ControlLabelPosition, type Currency, CurrencyInput, type CurrencyInputProps, type DateRange, DateTimePicker, type DateTimePickerProps, type DateTimePickerRangeProps, type DateTimePickerSingleProps, type DescriptionDisplay, Drawer, type DrawerProps, type DrawerSide, type DrawerWidth, type DrawerWidthPreset, DrawerWidths, EmailInput, type EmailInputProps, ExpandableSection, type ExpandableSectionProps, FILE_UPLOAD_ACCEPTS, type FieldError, FilePreview, type FilePreviewActionHandler, type FilePreviewCloseReason, type FilePreviewKind, type FilePreviewProps, FileUpload, type FileUploadAccept, type FileUploadFileType, type FileUploadProps, type FileUploadRejection, type FileUploadRejectionCode, type InputValidator, Loading, type LoadingProps, type LoadingSize, Message, type MessageOptions, type MessageProps, type MessageSeverity, Modal, type ModalAction, type ModalProps, type ModalSize, NotFound, NotFoundCaveman, NotFoundLost, type NotFoundProps, type NotFoundSceneProps, type NotFoundVariant, NotFoundYeti, NumberInput, type NumberInputProps, Pagination, type PaginationProps, PasswordInput, type PasswordInputProps, PhoneNumberInput, type PhoneNumberInputProps, ProgressBar, type ProgressBarProps, type ProgressBarSize, RadioButton, type RadioButtonProps, RadioGroup, type RadioGroupOption, type RadioGroupProps, type RadioValue, Selection, type SelectionOption, type SelectionProps, type SelectionValue, Skeleton, SkeletonBox, type SkeletonBoxProps, SkeletonCircle, SkeletonLine, type SkeletonProps, type SkeletonSizeProps, SkeletonSquare, type SkeletonVariant, Snackbar, type SnackbarAnchorOrigin, type SnackbarProps, type TabChangeEvent, type TabItem, Table, TableBody, TableCaption, TableCell, type TableCellProps, type TableColumn, type TableColumnWidths, type TableData, TableHead, TableHeader, type TableHeaderProps, type TablePaginationPosition, type TableProps, type TableResizeHandler, TableRow, Tabs, type TabsProps, type TabsScrollButtons, type TabsVariant, TextArea, type TextAreaProps, TextInput, type TextInputProps, Toggle, type ToggleProps, Tooltip, type TooltipProps, type ValidatedTextInputProps, type ValidationTiming, formatFileSize, formatNumber, getFilePreviewKind, getIconSize, message, normalizePhoneNumber, validateEmail, validatePassword, validatePhoneNumber };
+export { Avatar, AvatarGroup, type AvatarGroupProps, type AvatarProps, type AvatarShape, type AvatarSize, Button, ButtonBar, type ButtonBarAction, type ButtonBarItem, type ButtonBarProps, type ButtonColor, type ButtonHierarchy, type ButtonProps, type ButtonSize, type ButtonVariant, Checkbox, type CheckboxProps, Chip, type ChipProps, type ChipStatus, type ChipVariant, type ColumnResizeHandler, type ControlLabelPosition, type Currency, CurrencyInput, type CurrencyInputProps, type DateRange, DateTimePicker, type DateTimePickerProps, type DateTimePickerRangeProps, type DateTimePickerSingleProps, type DescriptionDisplay, Drawer, type DrawerProps, type DrawerSide, type DrawerWidth, type DrawerWidthPreset, DrawerWidths, EmailInput, type EmailInputProps, ExpandableSection, type ExpandableSectionProps, FILE_UPLOAD_ACCEPTS, type FieldError, FilePreview, type FilePreviewActionHandler, type FilePreviewCloseReason, type FilePreviewKind, type FilePreviewProps, FileUpload, type FileUploadAccept, type FileUploadFileType, type FileUploadProps, type FileUploadRejection, type FileUploadRejectionCode, type InputValidator, Loading, type LoadingProps, type LoadingSize, Message, type MessageOptions, type MessageProps, type MessageSeverity, Modal, type ModalAction, type ModalProps, type ModalSize, NotFound, NotFoundCaveman, NotFoundLost, type NotFoundProps, type NotFoundSceneProps, type NotFoundVariant, NotFoundYeti, NumberInput, type NumberInputProps, Pagination, type PaginationProps, PasswordInput, type PasswordInputProps, PhoneNumberInput, type PhoneNumberInputProps, ProgressBar, type ProgressBarProps, type ProgressBarSize, RadioButton, type RadioButtonProps, RadioGroup, type RadioGroupOption, type RadioGroupProps, type RadioValue, Selection, type SelectionOption, type SelectionOverflow, type SelectionProps, type SelectionValue, Skeleton, SkeletonBox, type SkeletonBoxProps, SkeletonCircle, SkeletonLine, type SkeletonProps, type SkeletonSizeProps, SkeletonSquare, type SkeletonVariant, Snackbar, type SnackbarAnchorOrigin, type SnackbarProps, type TabChangeEvent, type TabItem, Table, TableBody, TableCaption, TableCell, type TableCellProps, type TableColumn, type TableColumnWidths, type TableData, TableHead, TableHeader, type TableHeaderProps, type TablePaginationPosition, type TableProps, type TableResizeHandler, TableRow, Tabs, type TabsProps, type TabsScrollButtons, type TabsVariant, TextArea, type TextAreaProps, TextInput, type TextInputProps, Toggle, type ToggleProps, Tooltip, type TooltipProps, type ValidatedTextInputProps, type ValidationTiming, formatFileSize, formatNumber, getFilePreviewKind, getIconSize, message, normalizePhoneNumber, validateEmail, validatePassword, validatePhoneNumber };

package/dist/index.d.ts

@@ -411,7 +411,21 @@ type SelectionProps = Omit<HTMLAttributes<HTMLDivElement>, 'onChange' | 'default
     disabled?: boolean;
     name?: string;
     onKeyDown?: KeyboardEventHandler<HTMLButtonElement>;
+    /**
+     * Caps the field width. Numbers are pixels (`240` → `240px`); strings are
+     * any CSS length (`'16rem'`, `'50%'`). The field still shrinks inside
+     * narrower containers.
+     */
+    maxWidth?: number | string;
+    /**
+     * How a selected label longer than the field is shown:
+     * - `'ellipsis'` (default): one line ending in `…`; the full text appears
+     *   in a tooltip on hover or focus.
+     * - `'wrap'`: the label wraps onto more lines and the field grows taller.
+     */
+    overflow?: SelectionOverflow;
 };
+type SelectionOverflow = 'ellipsis' | 'wrap';
 
 /** A rounded, searchable custom dropdown with single, multiple, and tag modes. */
 declare const Selection: react.ForwardRefExoticComponent<Omit<react.HTMLAttributes<HTMLDivElement>, "value" | "defaultValue" | "onChange" | "onKeyDown"> & {
@@ -435,6 +449,8 @@ declare const Selection: react.ForwardRefExoticComponent<Omit<react.HTMLAttribut
     disabled?: boolean;
     name?: string;
     onKeyDown?: react.KeyboardEventHandler<HTMLButtonElement>;
+    maxWidth?: number | string;
+    overflow?: SelectionOverflow;
 } & react.RefAttributes<HTMLDivElement>>;
 
 declare function formatNumber(value: number, decimals?: number, thousandSeparator?: string, decimalSeparator?: string): string;
@@ -1001,4 +1017,4 @@ declare function NotFoundLost(props: NotFoundSceneProps): react.JSX.Element;
 /** A 404 page with a stable random design, or an explicitly selected variant. */
 declare function NotFound({ variant, ...props }: NotFoundProps): react.JSX.Element;
 
-export { Avatar, AvatarGroup, type AvatarGroupProps, type AvatarProps, type AvatarShape, type AvatarSize, Button, ButtonBar, type ButtonBarAction, type ButtonBarItem, type ButtonBarProps, type ButtonColor, type ButtonHierarchy, type ButtonProps, type ButtonSize, type ButtonVariant, Checkbox, type CheckboxProps, Chip, type ChipProps, type ChipStatus, type ChipVariant, type ColumnResizeHandler, type ControlLabelPosition, type Currency, CurrencyInput, type CurrencyInputProps, type DateRange, DateTimePicker, type DateTimePickerProps, type DateTimePickerRangeProps, type DateTimePickerSingleProps, type DescriptionDisplay, Drawer, type DrawerProps, type DrawerSide, type DrawerWidth, type DrawerWidthPreset, DrawerWidths, EmailInput, type EmailInputProps, ExpandableSection, type ExpandableSectionProps, FILE_UPLOAD_ACCEPTS, type FieldError, FilePreview, type FilePreviewActionHandler, type FilePreviewCloseReason, type FilePreviewKind, type FilePreviewProps, FileUpload, type FileUploadAccept, type FileUploadFileType, type FileUploadProps, type FileUploadRejection, type FileUploadRejectionCode, type InputValidator, Loading, type LoadingProps, type LoadingSize, Message, type MessageOptions, type MessageProps, type MessageSeverity, Modal, type ModalAction, type ModalProps, type ModalSize, NotFound, NotFoundCaveman, NotFoundLost, type NotFoundProps, type NotFoundSceneProps, type NotFoundVariant, NotFoundYeti, NumberInput, type NumberInputProps, Pagination, type PaginationProps, PasswordInput, type PasswordInputProps, PhoneNumberInput, type PhoneNumberInputProps, ProgressBar, type ProgressBarProps, type ProgressBarSize, RadioButton, type RadioButtonProps, RadioGroup, type RadioGroupOption, type RadioGroupProps, type RadioValue, Selection, type SelectionOption, type SelectionProps, type SelectionValue, Skeleton, SkeletonBox, type SkeletonBoxProps, SkeletonCircle, SkeletonLine, type SkeletonProps, type SkeletonSizeProps, SkeletonSquare, type SkeletonVariant, Snackbar, type SnackbarAnchorOrigin, type SnackbarProps, type TabChangeEvent, type TabItem, Table, TableBody, TableCaption, TableCell, type TableCellProps, type TableColumn, type TableColumnWidths, type TableData, TableHead, TableHeader, type TableHeaderProps, type TablePaginationPosition, type TableProps, type TableResizeHandler, TableRow, Tabs, type TabsProps, type TabsScrollButtons, type TabsVariant, TextArea, type TextAreaProps, TextInput, type TextInputProps, Toggle, type ToggleProps, Tooltip, type TooltipProps, type ValidatedTextInputProps, type ValidationTiming, formatFileSize, formatNumber, getFilePreviewKind, getIconSize, message, normalizePhoneNumber, validateEmail, validatePassword, validatePhoneNumber };
+export { Avatar, AvatarGroup, type AvatarGroupProps, type AvatarProps, type AvatarShape, type AvatarSize, Button, ButtonBar, type ButtonBarAction, type ButtonBarItem, type ButtonBarProps, type ButtonColor, type ButtonHierarchy, type ButtonProps, type ButtonSize, type ButtonVariant, Checkbox, type CheckboxProps, Chip, type ChipProps, type ChipStatus, type ChipVariant, type ColumnResizeHandler, type ControlLabelPosition, type Currency, CurrencyInput, type CurrencyInputProps, type DateRange, DateTimePicker, type DateTimePickerProps, type DateTimePickerRangeProps, type DateTimePickerSingleProps, type DescriptionDisplay, Drawer, type DrawerProps, type DrawerSide, type DrawerWidth, type DrawerWidthPreset, DrawerWidths, EmailInput, type EmailInputProps, ExpandableSection, type ExpandableSectionProps, FILE_UPLOAD_ACCEPTS, type FieldError, FilePreview, type FilePreviewActionHandler, type FilePreviewCloseReason, type FilePreviewKind, type FilePreviewProps, FileUpload, type FileUploadAccept, type FileUploadFileType, type FileUploadProps, type FileUploadRejection, type FileUploadRejectionCode, type InputValidator, Loading, type LoadingProps, type LoadingSize, Message, type MessageOptions, type MessageProps, type MessageSeverity, Modal, type ModalAction, type ModalProps, type ModalSize, NotFound, NotFoundCaveman, NotFoundLost, type NotFoundProps, type NotFoundSceneProps, type NotFoundVariant, NotFoundYeti, NumberInput, type NumberInputProps, Pagination, type PaginationProps, PasswordInput, type PasswordInputProps, PhoneNumberInput, type PhoneNumberInputProps, ProgressBar, type ProgressBarProps, type ProgressBarSize, RadioButton, type RadioButtonProps, RadioGroup, type RadioGroupOption, type RadioGroupProps, type RadioValue, Selection, type SelectionOption, type SelectionOverflow, type SelectionProps, type SelectionValue, Skeleton, SkeletonBox, type SkeletonBoxProps, SkeletonCircle, SkeletonLine, type SkeletonProps, type SkeletonSizeProps, SkeletonSquare, type SkeletonVariant, Snackbar, type SnackbarAnchorOrigin, type SnackbarProps, type TabChangeEvent, type TabItem, Table, TableBody, TableCaption, TableCell, type TableCellProps, type TableColumn, type TableColumnWidths, type TableData, TableHead, TableHeader, type TableHeaderProps, type TablePaginationPosition, type TableProps, type TableResizeHandler, TableRow, Tabs, type TabsProps, type TabsScrollButtons, type TabsVariant, TextArea, type TextAreaProps, TextInput, type TextInputProps, Toggle, type ToggleProps, Tooltip, type TooltipProps, type ValidatedTextInputProps, type ValidationTiming, formatFileSize, formatNumber, getFilePreviewKind, getIconSize, message, normalizePhoneNumber, validateEmail, validatePassword, validatePhoneNumber };

package/dist/index.js

@@ -2127,6 +2127,9 @@ var Selection = (0, import_react17.forwardRef)(
     disabled = false,
     name,
     onKeyDown,
+    maxWidth,
+    overflow = "ellipsis",
+    style,
     "aria-label": ariaLabel,
     "aria-describedby": ariaDescribedBy,
     "aria-labelledby": ariaLabelledBy,
@@ -2137,6 +2140,7 @@ var Selection = (0, import_react17.forwardRef)(
     const listboxId = triggerId + "-listbox";
     const labelId = generatedId + "-label";
     const messageId2 = generatedId + "-message";
+    const tooltipId = generatedId + "-tooltip";
     const fieldError = getFieldError(error, errorMessage);
     const hasError = fieldError !== void 0 && fieldError !== false && fieldError !== null;
     const resolvedDescription = description ?? helperText;
@@ -2163,6 +2167,26 @@ var Selection = (0, import_react17.forwardRef)(
     const [activeIndex, setActiveIndex] = (0, import_react17.useState)(0);
     const rootRef = (0, import_react17.useRef)(null);
     const menuRef = (0, import_react17.useRef)(null);
+    const valueRef = (0, import_react17.useRef)(null);
+    const [truncated, setTruncated] = (0, import_react17.useState)(false);
+    const [hovered, setHovered] = (0, import_react17.useState)(false);
+    const [focused, setFocused] = (0, import_react17.useState)(false);
+    const showsTags = tag && multiple && selectedOptions.length > 0;
+    const canTruncate = overflow === "ellipsis" && !showsTags && selectedOptions.length > 0;
+    const selectedKey = selectedOptions.map((option) => String(option.value)).join("|");
+    (0, import_react17.useLayoutEffect)(() => {
+      const node = valueRef.current;
+      if (!canTruncate || !node) {
+        setTruncated(false);
+        return;
+      }
+      const measure = () => setTruncated(node.scrollWidth > node.clientWidth + 1);
+      measure();
+      if (typeof ResizeObserver === "undefined") return;
+      const observer = new ResizeObserver(measure);
+      observer.observe(node);
+      return () => observer.disconnect();
+    }, [canTruncate, selectedKey]);
     const [menuPosition, setMenuPosition] = (0, import_react17.useState)(null);
     (0, import_react17.useEffect)(() => {
       const close = (event) => {
@@ -2227,6 +2251,12 @@ var Selection = (0, import_react17.forwardRef)(
       setQuery("");
     };
     const displayLabel = selectedOptions.length ? selectedOptions.map((option) => option.label) : null;
+    const showTooltip = truncated && (hovered || focused) && !open;
+    const renderLabels = () => displayLabel?.map((item, index) => /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("span", { children: [
+      item,
+      index < displayLabel.length - 1 ? ", " : ""
+    ] }, index));
+    const toPx = (length) => typeof length === "number" ? length + "px" : length;
     const onTriggerKeyDown = (event) => {
       onKeyDown?.(event);
       if (disabled) return;
@@ -2258,12 +2288,14 @@ var Selection = (0, import_react17.forwardRef)(
         className: [
           "fe-selection",
           "fe-selection--" + size,
+          "fe-selection--" + overflow,
           open && "fe-selection--open",
           clearable && selectedOptions.length > 0 && "fe-selection--clearable",
           hasError && "fe-selection--error",
           disabled && "fe-selection--disabled",
           className
         ].filter(Boolean).join(" "),
+        style: maxWidth === void 0 ? style : { ...style, maxWidth: toPx(maxWidth) },
         ...props,
         children: [
           /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
@@ -2297,16 +2329,24 @@ var Selection = (0, import_react17.forwardRef)(
                 "aria-invalid": hasError || void 0,
                 "aria-required": isRequired || void 0,
                 "aria-labelledby": labelledBy,
-                "aria-describedby": describedBy,
+                "aria-describedby": getDescribedBy(
+                  describedBy,
+                  showTooltip ? tooltipId : void 0
+                ),
                 "aria-haspopup": "listbox",
                 "aria-expanded": open,
                 "aria-controls": listboxId,
                 onClick: () => setOpen((current) => !current),
                 onKeyDown: onTriggerKeyDown,
+                onMouseEnter: () => setHovered(true),
+                onMouseLeave: () => setHovered(false),
+                onFocus: () => setFocused(true),
+                onBlur: () => setFocused(false),
                 children: [
                   /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
                     "span",
                     {
+                      ref: valueRef,
                       className: [
                         "fe-selection__value",
                         !selectedOptions.length && "is-placeholder",
@@ -2322,10 +2362,7 @@ var Selection = (0, import_react17.forwardRef)(
                           ]
                         },
                         String(option.value)
-                      )) : displayLabel.map((item, index) => /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("span", { children: [
-                        item,
-                        index < displayLabel.length - 1 ? ", " : ""
-                      ] }, index)) : /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(import_jsx_runtime19.Fragment, { children: [
+                      )) : renderLabels() : /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(import_jsx_runtime19.Fragment, { children: [
                         /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("span", { children: placeholder }),
                         isRequired && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("span", { className: "fe-field__required", "aria-hidden": "true", children: "*" })
                       ] })
@@ -2344,6 +2381,7 @@ var Selection = (0, import_react17.forwardRef)(
                 onClick: clear
               }
             ),
+            showTooltip && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("span", { id: tooltipId, role: "tooltip", className: "fe-selection__tooltip", children: renderLabels() }),
             open && menuPosition && (0, import_react_dom2.createPortal)(
               /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
                 "div",
@@ -2395,7 +2433,7 @@ var Selection = (0, import_react17.forwardRef)(
                           onMouseMove: () => setActiveIndex(index),
                           onClick: () => choose(option),
                           children: [
-                            /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("span", { children: option.label }),
+                            /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("span", { className: "fe-selection__option-label", children: option.label }),
                             isSelected && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
                               "span",
                               {

package/dist/index.mjs

@@ -1821,6 +1821,9 @@ var Selection = forwardRef9(
     disabled = false,
     name,
     onKeyDown,
+    maxWidth,
+    overflow = "ellipsis",
+    style,
     "aria-label": ariaLabel,
     "aria-describedby": ariaDescribedBy,
     "aria-labelledby": ariaLabelledBy,
@@ -1831,6 +1834,7 @@ var Selection = forwardRef9(
     const listboxId = triggerId + "-listbox";
     const labelId = generatedId + "-label";
     const messageId2 = generatedId + "-message";
+    const tooltipId = generatedId + "-tooltip";
     const fieldError = getFieldError(error, errorMessage);
     const hasError = fieldError !== void 0 && fieldError !== false && fieldError !== null;
     const resolvedDescription = description ?? helperText;
@@ -1857,6 +1861,26 @@ var Selection = forwardRef9(
     const [activeIndex, setActiveIndex] = useState11(0);
     const rootRef = useRef7(null);
     const menuRef = useRef7(null);
+    const valueRef = useRef7(null);
+    const [truncated, setTruncated] = useState11(false);
+    const [hovered, setHovered] = useState11(false);
+    const [focused, setFocused] = useState11(false);
+    const showsTags = tag && multiple && selectedOptions.length > 0;
+    const canTruncate = overflow === "ellipsis" && !showsTags && selectedOptions.length > 0;
+    const selectedKey = selectedOptions.map((option) => String(option.value)).join("|");
+    useLayoutEffect3(() => {
+      const node = valueRef.current;
+      if (!canTruncate || !node) {
+        setTruncated(false);
+        return;
+      }
+      const measure = () => setTruncated(node.scrollWidth > node.clientWidth + 1);
+      measure();
+      if (typeof ResizeObserver === "undefined") return;
+      const observer = new ResizeObserver(measure);
+      observer.observe(node);
+      return () => observer.disconnect();
+    }, [canTruncate, selectedKey]);
     const [menuPosition, setMenuPosition] = useState11(null);
     useEffect5(() => {
       const close = (event) => {
@@ -1921,6 +1945,12 @@ var Selection = forwardRef9(
       setQuery("");
     };
     const displayLabel = selectedOptions.length ? selectedOptions.map((option) => option.label) : null;
+    const showTooltip = truncated && (hovered || focused) && !open;
+    const renderLabels = () => displayLabel?.map((item, index) => /* @__PURE__ */ jsxs12("span", { children: [
+      item,
+      index < displayLabel.length - 1 ? ", " : ""
+    ] }, index));
+    const toPx = (length) => typeof length === "number" ? length + "px" : length;
     const onTriggerKeyDown = (event) => {
       onKeyDown?.(event);
       if (disabled) return;
@@ -1952,12 +1982,14 @@ var Selection = forwardRef9(
         className: [
           "fe-selection",
           "fe-selection--" + size,
+          "fe-selection--" + overflow,
           open && "fe-selection--open",
           clearable && selectedOptions.length > 0 && "fe-selection--clearable",
           hasError && "fe-selection--error",
           disabled && "fe-selection--disabled",
           className
         ].filter(Boolean).join(" "),
+        style: maxWidth === void 0 ? style : { ...style, maxWidth: toPx(maxWidth) },
         ...props,
         children: [
           /* @__PURE__ */ jsx15(
@@ -1991,16 +2023,24 @@ var Selection = forwardRef9(
                 "aria-invalid": hasError || void 0,
                 "aria-required": isRequired || void 0,
                 "aria-labelledby": labelledBy,
-                "aria-describedby": describedBy,
+                "aria-describedby": getDescribedBy(
+                  describedBy,
+                  showTooltip ? tooltipId : void 0
+                ),
                 "aria-haspopup": "listbox",
                 "aria-expanded": open,
                 "aria-controls": listboxId,
                 onClick: () => setOpen((current) => !current),
                 onKeyDown: onTriggerKeyDown,
+                onMouseEnter: () => setHovered(true),
+                onMouseLeave: () => setHovered(false),
+                onFocus: () => setFocused(true),
+                onBlur: () => setFocused(false),
                 children: [
                   /* @__PURE__ */ jsx15(
                     "span",
                     {
+                      ref: valueRef,
                       className: [
                         "fe-selection__value",
                         !selectedOptions.length && "is-placeholder",
@@ -2016,10 +2056,7 @@ var Selection = forwardRef9(
                           ]
                         },
                         String(option.value)
-                      )) : displayLabel.map((item, index) => /* @__PURE__ */ jsxs12("span", { children: [
-                        item,
-                        index < displayLabel.length - 1 ? ", " : ""
-                      ] }, index)) : /* @__PURE__ */ jsxs12(Fragment2, { children: [
+                      )) : renderLabels() : /* @__PURE__ */ jsxs12(Fragment2, { children: [
                         /* @__PURE__ */ jsx15("span", { children: placeholder }),
                         isRequired && /* @__PURE__ */ jsx15("span", { className: "fe-field__required", "aria-hidden": "true", children: "*" })
                       ] })
@@ -2038,6 +2075,7 @@ var Selection = forwardRef9(
                 onClick: clear
               }
             ),
+            showTooltip && /* @__PURE__ */ jsx15("span", { id: tooltipId, role: "tooltip", className: "fe-selection__tooltip", children: renderLabels() }),
             open && menuPosition && createPortal2(
               /* @__PURE__ */ jsxs12(
                 "div",
@@ -2089,7 +2127,7 @@ var Selection = forwardRef9(
                           onMouseMove: () => setActiveIndex(index),
                           onClick: () => choose(option),
                           children: [
-                            /* @__PURE__ */ jsx15("span", { children: option.label }),
+                            /* @__PURE__ */ jsx15("span", { className: "fe-selection__option-label", children: option.label }),
                             isSelected && /* @__PURE__ */ jsx15(
                               "span",
                               {

package/dist/styles.css

@@ -886,8 +886,9 @@ table[data-fe-table][data-resizing] {
   display: flex;
   align-items: center;
   width: 100%;
+  min-width: 0;
   min-height: 40px;
-  padding: 0 13px;
+  padding: 0 40px 0 13px;
   border: 1px solid #d4d8e0;
   border-radius: 12px;
   outline: 0;
@@ -902,7 +903,11 @@ table[data-fe-table][data-resizing] {
     background 0.15s;
 }
 .fe-selection--clearable .fe-selection__trigger {
-  padding-right: 64px;
+  padding-right: 72px;
+}
+.fe-selection--wrap .fe-selection__trigger {
+  padding-top: 8px;
+  padding-bottom: 8px;
 }
 .fe-selection--small .fe-selection__trigger {
   min-height: 34px;
@@ -922,19 +927,24 @@ table[data-fe-table][data-resizing] {
   box-shadow: 0 0 0 3px rgba(40, 120, 240, 0.12);
 }
 .fe-selection__value {
-  display: flex;
+  display: block;
   width: 100%;
   min-width: 0;
   flex: 1 1 auto;
-  align-items: center;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
+.fe-selection--wrap .fe-selection__value {
+  line-height: 1.4;
+  overflow-wrap: anywhere;
+  white-space: normal;
+}
 .fe-selection__value.is-placeholder {
   color: #8b94a4;
 }
 .fe-selection__value.is-tags {
+  display: flex;
   flex-wrap: wrap;
   align-content: center;
   gap: 5px;
@@ -1013,6 +1023,24 @@ table[data-fe-table][data-resizing] {
   outline: 2px solid #2878f0;
   outline-offset: 1px;
 }
+.fe-selection__tooltip {
+  position: absolute;
+  z-index: 50;
+  bottom: calc(100% + 8px);
+  left: 0;
+  width: max-content;
+  max-width: min(320px, calc(100vw - 32px));
+  padding: 7px 9px;
+  border-radius: 7px;
+  background: #20242c;
+  color: #fff;
+  font-size: 12px;
+  font-weight: 500;
+  line-height: 1.35;
+  overflow-wrap: anywhere;
+  box-shadow: 0 5px 18px rgba(0, 0, 0, 0.22);
+  pointer-events: none;
+}
 .fe-selection__chevron {
   position: absolute;
   top: 2px;
@@ -1073,6 +1101,7 @@ table[data-fe-table][data-resizing] {
   display: flex;
   align-items: center;
   justify-content: space-between;
+  gap: 8px;
   width: 100%;
   min-height: 37px;
   padding: 8px 10px;
@@ -1098,7 +1127,12 @@ table[data-fe-table][data-resizing] {
   opacity: 0.45;
   cursor: not-allowed;
 }
+.fe-selection__option-label {
+  min-width: 0;
+  overflow-wrap: anywhere;
+}
 .fe-selection__check {
+  flex: none;
   font-weight: 800;
 }
 .fe-selection__empty {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dragunio/fe-libs",
-  "version": "0.1.11",
+  "version": "0.1.12",
   "description": "Reusable React components, icons, and table primitives.",
   "license": "MIT",
   "repository": {
@@ -93,4 +93,4 @@
       "public"
     ]
   }
-}
+}