draft-components 3.3.0 → 3.4.0

package/css/draft-components.css

@@ -2056,6 +2056,75 @@
   color-scheme: dark;
 }
 
+.dc-search-select-button-label {
+  display: inline-flex;
+  gap: 0.5em;
+  align-items: center;
+}
+
+.dc-search-select-button-label > b {
+  font-weight: 700;
+}
+
+.dc-search-select-option {
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  min-height: 28px;
+  padding: 4px 8px;
+  font-size: 14px;
+  line-height: 1.25;
+  color: inherit;
+  cursor: default;
+  border-radius: 5px;
+}
+
+.dc-search-select-option_highlighted {
+  color: var(--dc-control-primary-text-color);
+  background: var(--dc-control-bg-inset);
+}
+
+.dc-search-select-option_selected {
+  color: var(--dc-control-on-primary-color);
+  background: var(--dc-control-primary-color);
+}
+
+.dc-search-select-option__caption {
+  font-size: 80%;
+  opacity: 0.75;
+}
+
+.dc-search-select-separator {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  padding: 8px 0;
+}
+
+.dc-search-select-separator::before,
+.dc-search-select-separator::after {
+  display: block;
+  height: 1px;
+  content: '';
+  background: var(--dc-control-bg-inset);
+}
+
+.dc-search-select-separator::before {
+  flex-shrink: 0;
+  width: 12px;
+}
+
+.dc-search-select-separator::after {
+  flex-grow: 1;
+}
+
+.dc-search-select-separator__label {
+  padding: 0 8px;
+  font-size: 12px;
+  color: var(--dc-control-secondary-text-color);
+}
+
 .dc-search-select {
   --dc-search-select-font-size: 14px;
   --dc-search-select-text-color: var(--dc-control-primary-text-color);
@@ -2124,7 +2193,7 @@
   --dc-search-select-radius: 8px;
 }
 
-.dc-search-select__slot-left {
+.dc-search-select__slot-right {
   position: absolute;
   top: 0;
   right: 0;
@@ -2142,18 +2211,21 @@
 }
 
 .dc-search-select__popover {
+  --dc-search-select-popover-padding: 8px;
+  --dc-search-select-popover-radius: 8px;
+
   padding: 0;
-  padding-bottom: 8px;
-  border-radius: 8px;
+  padding-bottom: var(--dc-search-select-popover-padding);
+  border-radius: var(--dc-search-select-popover-radius);
 }
 
 .dc-search-select__textbox {
-  padding: 8px;
+  padding: var(--dc-search-select-popover-padding);
 }
 
 .dc-search-select__listbox {
   max-height: 352px;
-  padding: 0 8px;
+  padding: 0 var(--dc-search-select-popover-padding);
   margin: 0;
   overflow-y: auto;
   list-style: none;
@@ -2161,58 +2233,10 @@
   border-bottom-left-radius: inherit;
 }
 
-.dc-search-select__option {
-  padding: 4px;
-  font-size: 14px;
-  color: inherit;
-  cursor: default;
-  border-radius: 4px;
-}
-
-.dc-search-select__option_highlighted {
-  color: var(--dc-control-primary-text-color);
-  background: var(--dc-control-bg-inset);
-}
-
-.dc-search-select__option_selected {
-  color: var(--dc-control-on-primary-color);
-  background: var(--dc-control-primary-color);
-}
-
-.dc-search-select__listbox > .dc-search-select__option + .dc-search-select__option {
+.dc-search-select__listbox > [role="option"] + [role="option"] {
   margin-top: 2px;
 }
 
-.dc-search-select__separator {
-  display: flex;
-  align-items: center;
-  width: 100%;
-  padding: 8px 0;
-}
-
-.dc-search-select__separator::before,
-.dc-search-select__separator::after {
-  display: block;
-  height: 1px;
-  content: '';
-  background: var(--dc-control-bg-inset);
-}
-
-.dc-search-select__separator::before {
-  flex-shrink: 0;
-  width: 12px;
-}
-
-.dc-search-select__separator::after {
-  flex-grow: 1;
-}
-
-.dc-search-select__separator-label {
-  padding: 0 8px;
-  font-size: 12px;
-  color: var(--dc-control-secondary-text-color);
-}
-
 .dark .dc-search-select,
 .dark.dc-search-select {
   color-scheme: dark;
@@ -3340,8 +3364,7 @@
   height: 1px;
   overflow: hidden;
   clip: rect(0 0 0 0);
-  -webkit-clip-path: inset(50%);
-          clip-path: inset(50%);
+  clip-path: inset(50%);
   white-space: nowrap;
 }
 

package/dist/components/button/icon-button.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { ButtonProps } from './button.js';
 export type IconButtonProps = Omit<ButtonProps, 'caption' | 'iconLeft' | 'iconRight'>;
 export declare const IconButton: import("react").ForwardRefExoticComponent<Omit<IconButtonProps, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;

package/dist/components/color-picker/color-picker.css

@@ -45,8 +45,7 @@
   height: 1px;
   overflow: hidden;
   clip: rect(0 0 0 0);
-  -webkit-clip-path: inset(50%);
-          clip-path: inset(50%);
+  clip-path: inset(50%);
   white-space: nowrap;
 }
 

package/dist/components/filtered-search/string-set-filter-item.d.ts

@@ -10,6 +10,6 @@ export type StringSetFilterItemProps = {
 export declare function StringSetFilterItem({ filter, isEditing, onEditStart, onEditCancel, onRemove, onChange, }: StringSetFilterItemProps): import("react/jsx-runtime").JSX.Element;
 export declare namespace StringSetFilterItem {
     var defaultValueFormatter: (value: string) => string;
-    var defaultValuesFormatter: (values: string[]) => string;
+    var defaultValuesFormatter: (values: StringSetFilter["value"]) => string;
     var defaultOperatorFormatter: (operator: StringSetFilterOperator) => string;
 }

package/dist/components/hero-icons/24/outline/arrow-small-down-icon.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 export declare const ArrowSmallDownIcon: import("react").ForwardRefExoticComponent<Omit<Omit<import("react").SVGProps<SVGSVGElement>, "ref"> & {
-    ref?: ((instance: SVGSVGElement | null) => void) | import("react").RefObject<SVGSVGElement> | null | undefined;
+    ref?: ((instance: SVGSVGElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<SVGSVGElement> | null | undefined;
 }, "ref"> & import("react").RefAttributes<SVGSVGElement>>;

package/dist/components/hero-icons/24/outline/arrow-small-up-icon.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 export declare const ArrowSmallUpIcon: import("react").ForwardRefExoticComponent<Omit<Omit<import("react").SVGProps<SVGSVGElement>, "ref"> & {
-    ref?: ((instance: SVGSVGElement | null) => void) | import("react").RefObject<SVGSVGElement> | null | undefined;
+    ref?: ((instance: SVGSVGElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<SVGSVGElement> | null | undefined;
 }, "ref"> & import("react").RefAttributes<SVGSVGElement>>;

package/dist/components/hero-icons/24/outline/arrows-up-down-icon.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 export declare const ArrowsUpDownIcon: import("react").ForwardRefExoticComponent<Omit<Omit<import("react").SVGProps<SVGSVGElement>, "ref"> & {
-    ref?: ((instance: SVGSVGElement | null) => void) | import("react").RefObject<SVGSVGElement> | null | undefined;
+    ref?: ((instance: SVGSVGElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<SVGSVGElement> | null | undefined;
 }, "ref"> & import("react").RefAttributes<SVGSVGElement>>;

package/dist/components/hero-icons/24/outline/chevron-left-icon.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 export declare const ChevronLeftIcon: import("react").ForwardRefExoticComponent<Omit<Omit<import("react").SVGProps<SVGSVGElement>, "ref"> & {
-    ref?: ((instance: SVGSVGElement | null) => void) | import("react").RefObject<SVGSVGElement> | null | undefined;
+    ref?: ((instance: SVGSVGElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<SVGSVGElement> | null | undefined;
 }, "ref"> & import("react").RefAttributes<SVGSVGElement>>;

package/dist/components/hero-icons/24/outline/chevron-right-icon.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 export declare const ChevronRightIcon: import("react").ForwardRefExoticComponent<Omit<Omit<import("react").SVGProps<SVGSVGElement>, "ref"> & {
-    ref?: ((instance: SVGSVGElement | null) => void) | import("react").RefObject<SVGSVGElement> | null | undefined;
+    ref?: ((instance: SVGSVGElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<SVGSVGElement> | null | undefined;
 }, "ref"> & import("react").RefAttributes<SVGSVGElement>>;

package/dist/components/hero-icons/24/outline/eye-icon.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 export declare const EyeIcon: import("react").ForwardRefExoticComponent<Omit<Omit<import("react").SVGProps<SVGSVGElement>, "ref"> & {
-    ref?: ((instance: SVGSVGElement | null) => void) | import("react").RefObject<SVGSVGElement> | null | undefined;
+    ref?: ((instance: SVGSVGElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<SVGSVGElement> | null | undefined;
 }, "ref"> & import("react").RefAttributes<SVGSVGElement>>;

package/dist/components/hero-icons/24/outline/eye-slash-icon.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 export declare const EyeSlashIcon: import("react").ForwardRefExoticComponent<Omit<Omit<import("react").SVGProps<SVGSVGElement>, "ref"> & {
-    ref?: ((instance: SVGSVGElement | null) => void) | import("react").RefObject<SVGSVGElement> | null | undefined;
+    ref?: ((instance: SVGSVGElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<SVGSVGElement> | null | undefined;
 }, "ref"> & import("react").RefAttributes<SVGSVGElement>>;

package/dist/components/hero-icons/24/outline/magnifying-glass-icon.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 export declare const MagnifyingGlassIcon: import("react").ForwardRefExoticComponent<Omit<Omit<import("react").SVGProps<SVGSVGElement>, "ref"> & {
-    ref?: ((instance: SVGSVGElement | null) => void) | import("react").RefObject<SVGSVGElement> | null | undefined;
+    ref?: ((instance: SVGSVGElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<SVGSVGElement> | null | undefined;
 }, "ref"> & import("react").RefAttributes<SVGSVGElement>>;

package/dist/components/hero-icons/24/outline/trash-icon.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 export declare const TrashIcon: import("react").ForwardRefExoticComponent<Omit<Omit<import("react").SVGProps<SVGSVGElement>, "ref"> & {
-    ref?: ((instance: SVGSVGElement | null) => void) | import("react").RefObject<SVGSVGElement> | null | undefined;
+    ref?: ((instance: SVGSVGElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<SVGSVGElement> | null | undefined;
 }, "ref"> & import("react").RefAttributes<SVGSVGElement>>;

package/dist/components/hero-icons/24/outline/x-mark-icon.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 export declare const XMarkIcon: import("react").ForwardRefExoticComponent<Omit<Omit<import("react").SVGProps<SVGSVGElement>, "ref"> & {
-    ref?: ((instance: SVGSVGElement | null) => void) | import("react").RefObject<SVGSVGElement> | null | undefined;
+    ref?: ((instance: SVGSVGElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<SVGSVGElement> | null | undefined;
 }, "ref"> & import("react").RefAttributes<SVGSVGElement>>;

package/dist/components/hero-icons/24/solid/exclamation-triangle-icon.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 export declare const ExclamationTriangleIcon: import("react").ForwardRefExoticComponent<Omit<Omit<import("react").SVGProps<SVGSVGElement>, "ref"> & {
-    ref?: ((instance: SVGSVGElement | null) => void) | import("react").RefObject<SVGSVGElement> | null | undefined;
+    ref?: ((instance: SVGSVGElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<SVGSVGElement> | null | undefined;
 }, "ref"> & import("react").RefAttributes<SVGSVGElement>>;

package/dist/components/popover/popover.d.ts

@@ -34,18 +34,18 @@ export type PopoverProps = {
     onClose?: PopoverCloseCallback;
 } & PopoverHTMLProps;
 export declare const Popover: import("react").ForwardRefExoticComponent<{
-    defaultIsOpen?: boolean | undefined;
-    isOpen?: boolean | undefined;
-    shouldTrapFocus?: boolean | undefined;
-    shouldFocusAnchorAfterEscPress?: boolean | undefined;
-    transitionDurationMs?: number | undefined;
-    anchorGap?: number | undefined;
-    viewportGap?: number | undefined;
+    defaultIsOpen?: boolean;
+    isOpen?: boolean;
+    shouldTrapFocus?: boolean;
+    shouldFocusAnchorAfterEscPress?: boolean;
+    transitionDurationMs?: number;
+    anchorGap?: number;
+    viewportGap?: number;
     placement?: PopoverPlacement;
     alignment?: PopoverAlignment;
     anchor: ReactNode | PopoverAnchorRenderFn;
     children: ReactNode;
-    onOpen?: PopoverOpenCallback | undefined;
-    onClose?: PopoverCloseCallback | undefined;
+    onOpen?: PopoverOpenCallback;
+    onClose?: PopoverCloseCallback;
 } & Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("react").RefAttributes<PopoverRef>>;
 export {};

package/dist/components/search-select/search-select.css

@@ -1,3 +1,72 @@
+.dc-search-select-button-label {
+  display: inline-flex;
+  gap: 0.5em;
+  align-items: center;
+}
+
+.dc-search-select-button-label > b {
+  font-weight: 700;
+}
+
+.dc-search-select-option {
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  min-height: 28px;
+  padding: 4px 8px;
+  font-size: 14px;
+  line-height: 1.25;
+  color: inherit;
+  cursor: default;
+  border-radius: 5px;
+}
+
+.dc-search-select-option_highlighted {
+  color: var(--dc-control-primary-text-color);
+  background: var(--dc-control-bg-inset);
+}
+
+.dc-search-select-option_selected {
+  color: var(--dc-control-on-primary-color);
+  background: var(--dc-control-primary-color);
+}
+
+.dc-search-select-option__caption {
+  font-size: 80%;
+  opacity: 0.75;
+}
+
+.dc-search-select-separator {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  padding: 8px 0;
+}
+
+.dc-search-select-separator::before,
+.dc-search-select-separator::after {
+  display: block;
+  height: 1px;
+  content: '';
+  background: var(--dc-control-bg-inset);
+}
+
+.dc-search-select-separator::before {
+  flex-shrink: 0;
+  width: 12px;
+}
+
+.dc-search-select-separator::after {
+  flex-grow: 1;
+}
+
+.dc-search-select-separator__label {
+  padding: 0 8px;
+  font-size: 12px;
+  color: var(--dc-control-secondary-text-color);
+}
+
 .dc-search-select {
   --dc-search-select-font-size: 14px;
   --dc-search-select-text-color: var(--dc-control-primary-text-color);
@@ -66,7 +135,7 @@
   --dc-search-select-radius: 8px;
 }
 
-.dc-search-select__slot-left {
+.dc-search-select__slot-right {
   position: absolute;
   top: 0;
   right: 0;
@@ -84,18 +153,21 @@
 }
 
 .dc-search-select__popover {
+  --dc-search-select-popover-padding: 8px;
+  --dc-search-select-popover-radius: 8px;
+
   padding: 0;
-  padding-bottom: 8px;
-  border-radius: 8px;
+  padding-bottom: var(--dc-search-select-popover-padding);
+  border-radius: var(--dc-search-select-popover-radius);
 }
 
 .dc-search-select__textbox {
-  padding: 8px;
+  padding: var(--dc-search-select-popover-padding);
 }
 
 .dc-search-select__listbox {
   max-height: 352px;
-  padding: 0 8px;
+  padding: 0 var(--dc-search-select-popover-padding);
   margin: 0;
   overflow-y: auto;
   list-style: none;
@@ -103,58 +175,10 @@
   border-bottom-left-radius: inherit;
 }
 
-.dc-search-select__option {
-  padding: 4px;
-  font-size: 14px;
-  color: inherit;
-  cursor: default;
-  border-radius: 4px;
-}
-
-.dc-search-select__option_highlighted {
-  color: var(--dc-control-primary-text-color);
-  background: var(--dc-control-bg-inset);
-}
-
-.dc-search-select__option_selected {
-  color: var(--dc-control-on-primary-color);
-  background: var(--dc-control-primary-color);
-}
-
-.dc-search-select__listbox > .dc-search-select__option + .dc-search-select__option {
+.dc-search-select__listbox > [role="option"] + [role="option"] {
   margin-top: 2px;
 }
 
-.dc-search-select__separator {
-  display: flex;
-  align-items: center;
-  width: 100%;
-  padding: 8px 0;
-}
-
-.dc-search-select__separator::before,
-.dc-search-select__separator::after {
-  display: block;
-  height: 1px;
-  content: '';
-  background: var(--dc-control-bg-inset);
-}
-
-.dc-search-select__separator::before {
-  flex-shrink: 0;
-  width: 12px;
-}
-
-.dc-search-select__separator::after {
-  flex-grow: 1;
-}
-
-.dc-search-select__separator-label {
-  padding: 0 8px;
-  font-size: 12px;
-  color: var(--dc-control-secondary-text-color);
-}
-
 .dark .dc-search-select,
 .dark.dc-search-select {
   color-scheme: dark;

package/dist/components/search-select/search-select.d.ts

@@ -2,7 +2,7 @@ import { ReactNode } from 'react';
 type RenderLabelFn<Value> = (value: Value) => ReactNode;
 type RenderOptionsFn = (props: {
     searchQuery: string;
-    searchQueryLowercased: string;
+    searchQueryLowerCased: string;
 }) => ReactNode;
 export type SearchSelectSize = 'sm' | 'md' | 'lg';
 export type SearchSelectProps<Value> = {
@@ -23,14 +23,21 @@ export type SearchSelectProps<Value> = {
 };
 export declare function SearchSelect<Value>({ className, size, fullWidth, invalid, loading, disabled, textboxIcon, textboxAriaLabel, textboxPlaceholder, labelledBy, displayedValue, children, value: selectedValue, onChange: onSelectedValueChange, }: SearchSelectProps<Value>): import("react/jsx-runtime").JSX.Element;
 export declare namespace SearchSelect {
-    var Option: <T>({ className, value, children, }: {
-        className?: string | undefined;
+    var Option: <T>({ className, value, children, caption, }: {
+        className?: string;
         value: T;
         children: ReactNode;
+        caption?: ReactNode;
     }) => import("react/jsx-runtime").JSX.Element;
     var Separator: ({ className, children, }: {
-        className?: string | undefined;
+        className?: string;
         children?: ReactNode;
     }) => import("react/jsx-runtime").JSX.Element;
+    var ButtonLabel: ({ className, icon, value, children, }: {
+        className?: string;
+        icon?: ReactNode;
+        value: ReactNode;
+        children: ReactNode;
+    }) => import("react/jsx-runtime").JSX.Element;
 }
 export {};

package/dist/components/search-select/search-select.js

@@ -146,30 +146,35 @@ export function SearchSelect({ className, size = 'md', fullWidth, invalid, loadi
                 [`dc-search-select_size_${size}`]: size,
             }), id: buttonId, "aria-expanded": isOpen, "aria-controls": listboxId, "aria-labelledby": labelledBy, tabIndex: disabled || loading ? -1 : undefined, type: "button", onClick: handleButtonClick, onKeyDown: handleButtonKeyDown, children: [typeof displayedValue === 'function'
                     ? displayedValue(selectedValue)
-                    : displayedValue, _jsx("span", { className: "dc-search-select__slot-left", children: loading
+                    : displayedValue, _jsx("span", { className: "dc-search-select__slot-right", children: loading
                         ? (_jsx(Spinner, { className: "dc-search-select__spinner", width: "1.05em", height: "1.05em" }))
                         : (_jsx(ChevronDown, { className: "dc-search-select__arrow", width: "1.05em", height: "1.05em", strokeWidth: 2 })) })] })), alignment: "start", placement: "bottom", children: _jsxs(_Fragment, { children: [_jsx("div", { className: "dc-search-select__textbox", children: _jsx(TextInput, { id: textboxId, fullWidth: true, slotLeft: textboxIcon || _jsx(MagnifyingGlass, { width: 16, height: 16 }), placeholder: textboxPlaceholder, size: "sm", type: "text", role: "combobox", "aria-controls": listboxId, "aria-expanded": "true", "aria-autocomplete": "list", "aria-activedescendant": options.idOf(highlightedValue), "aria-label": textboxAriaLabel, value: searchQuery, onChange: handleTextboxChange, onKeyDown: handleTextboxKeyDown }) }), _jsx(SearchSelectContextProvider, { value: ctx, children: _jsx("ul", { className: "dc-search-select__listbox", id: listboxId, role: "listbox", children: typeof children === 'function'
                             ? children({
                                 searchQuery,
-                                searchQueryLowercased: searchQuery.toLowerCase(),
+                                searchQueryLowerCased: searchQuery.toLowerCase(),
                             })
                             : children }) })] }) }));
 }
-SearchSelect.Option = function SearchSelectOption({ className, value, children, }) {
+SearchSelect.Option = function SearchSelectOption({ className, value, children, caption, }) {
     const { options, selectedValue, highlightedValue, setSelectedValue, setHighlightedValue, } = useSearchSelectContext();
     const id = options.append(value);
     const selected = value === selectedValue;
     const highlighted = value === highlightedValue;
     return (
     /* eslint-disable jsx-a11y/click-events-have-key-events */
-    _jsx("li", { className: classNames(className, {
-            'dc-search-select__option': true,
-            'dc-search-select__option_selected': selected,
-            'dc-search-select__option_highlighted': highlighted,
-        }), id: id, role: "option", "aria-selected": highlighted, onClick: () => setSelectedValue(value), onMouseEnter: () => setHighlightedValue(value), children: children }));
+    _jsxs("li", { className: classNames(className, {
+            'dc-search-select-option': true,
+            'dc-search-select-option_selected': selected,
+            'dc-search-select-option_highlighted': highlighted,
+        }), id: id, role: "option", "aria-selected": highlighted, onClick: () => setSelectedValue(value), onMouseEnter: () => setHighlightedValue(value), children: [_jsx("div", { className: "dc-search-select-option__label", children: children }), caption
+                ? _jsx("div", { className: "dc-search-select-option__caption", children: caption })
+                : null] }));
 };
 SearchSelect.Separator = function SearchSelectSeparator({ className, children, }) {
-    return (_jsx("li", { className: classNames('dc-search-select__separator', className), role: "separator", children: children
-            ? _jsx("div", { className: "dc-search-select__separator-label", children: children })
+    return (_jsx("li", { className: classNames('dc-search-select-separator', className), role: "separator", children: children
+            ? _jsx("div", { className: "dc-search-select-separator__label", children: children })
             : null }));
 };
+SearchSelect.ButtonLabel = function SearchSelectButtonLabel({ className, icon, value, children, }) {
+    return (_jsxs("div", { className: classNames('dc-search-select-button-label', className), children: [icon, _jsxs("span", { children: [children, " ", _jsx("b", { children: value })] })] }));
+};

package/dist/components/select/select.d.ts

@@ -20,30 +20,30 @@ export type SelectProps = SelectBaseProps & ({
     onChangeValue?: (value: string[]) => void;
 });
 export declare const Select: import("react").ForwardRefExoticComponent<(Omit<Omit<Omit<import("react").DetailedHTMLProps<import("react").SelectHTMLAttributes<HTMLSelectElement>, HTMLSelectElement>, "ref"> & {
-    ref?: ((instance: HTMLSelectElement | null) => void) | import("react").RefObject<HTMLSelectElement> | null | undefined;
+    ref?: ((instance: HTMLSelectElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLSelectElement> | null | undefined;
 }, "defaultValue" | "size" | "value" | "multiple"> & {
-    fullWidth?: boolean | undefined;
-    invalid?: boolean | undefined;
-    loading?: boolean | undefined;
-    size?: SelectSize | undefined;
-    displayedOptionsCount?: number | undefined;
+    fullWidth?: boolean;
+    invalid?: boolean;
+    loading?: boolean;
+    size?: SelectSize;
+    displayedOptionsCount?: number;
 } & {
-    multiple?: false | undefined;
-    value?: string | number | undefined;
-    defaultValue?: string | number | undefined;
-    onChangeValue?: ((value: string) => void) | undefined;
+    multiple?: false;
+    value?: string | number;
+    defaultValue?: string | number;
+    onChangeValue?: (value: string) => void;
 }, "ref"> | Omit<Omit<Omit<import("react").DetailedHTMLProps<import("react").SelectHTMLAttributes<HTMLSelectElement>, HTMLSelectElement>, "ref"> & {
-    ref?: ((instance: HTMLSelectElement | null) => void) | import("react").RefObject<HTMLSelectElement> | null | undefined;
+    ref?: ((instance: HTMLSelectElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLSelectElement> | null | undefined;
 }, "defaultValue" | "size" | "value" | "multiple"> & {
-    fullWidth?: boolean | undefined;
-    invalid?: boolean | undefined;
-    loading?: boolean | undefined;
-    size?: SelectSize | undefined;
-    displayedOptionsCount?: number | undefined;
+    fullWidth?: boolean;
+    invalid?: boolean;
+    loading?: boolean;
+    size?: SelectSize;
+    displayedOptionsCount?: number;
 } & {
     multiple: true;
-    value?: string[] | undefined;
-    defaultValue?: string[] | undefined;
-    onChangeValue?: ((value: string[]) => void) | undefined;
+    value?: string[];
+    defaultValue?: string[];
+    onChangeValue?: (value: string[]) => void;
 }, "ref">) & import("react").RefAttributes<HTMLSelectElement>>;
 export {};

package/dist/components/selection-control/selection-control.d.ts

@@ -11,7 +11,7 @@ export type SelectionControlProps = {
     children: JSX.Element | SelectionControlRenderFn;
 } & SelectionControlBaseProps;
 export declare const SelectionControl: import("react").ForwardRefExoticComponent<{
-    labelFor?: string | undefined;
+    labelFor?: string;
     caption?: ReactNode;
     label: ReactNode;
     children: JSX.Element | SelectionControlRenderFn;

package/dist/components/slide-over/slide-over.d.ts

@@ -14,10 +14,10 @@ export type SlideOverRef = {
     close: () => void;
 };
 export declare const SlideOver: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
-    animationDurationMs?: number | undefined;
-    animationDisabled?: boolean | undefined;
-    shouldCloseOnEscKeyPress?: boolean | undefined;
-    shouldCloseOnBackdropClick?: boolean | undefined;
+    animationDurationMs?: number;
+    animationDisabled?: boolean;
+    shouldCloseOnEscKeyPress?: boolean;
+    shouldCloseOnBackdropClick?: boolean;
     onClose: SlideOverCloseCallback;
 } & import("react").RefAttributes<SlideOverRef>> & {
     Header: typeof SlideOverHeader;

package/dist/components/spinner/spinner.d.ts

@@ -3,5 +3,5 @@ export type SpinnerProps = ComponentPropsWithoutRef<'svg'> & {
     size?: number | string;
 };
 export declare const Spinner: import("react").ForwardRefExoticComponent<Omit<import("react").SVGProps<SVGSVGElement>, "ref"> & {
-    size?: string | number | undefined;
+    size?: number | string;
 } & import("react").RefAttributes<SVGSVGElement>>;

package/dist/components/table/table-body.d.ts

@@ -1,5 +1,5 @@
 import { ComponentPropsWithRef } from 'react';
 export type TableBodyProps = ComponentPropsWithRef<'tbody'>;
 export declare const TableBody: import("react").ForwardRefExoticComponent<Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLTableSectionElement>, HTMLTableSectionElement>, "ref"> & {
-    ref?: ((instance: HTMLTableSectionElement | null) => void) | import("react").RefObject<HTMLTableSectionElement> | null | undefined;
+    ref?: ((instance: HTMLTableSectionElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLTableSectionElement> | null | undefined;
 }, "ref"> & import("react").RefAttributes<HTMLTableSectionElement>>;

package/dist/components/table/table-cell.d.ts

@@ -1,5 +1,5 @@
 import { ComponentPropsWithRef } from 'react';
 export type TableCellProps = ComponentPropsWithRef<'td'>;
 export declare const TableCell: import("react").ForwardRefExoticComponent<Omit<Omit<import("react").DetailedHTMLProps<import("react").TdHTMLAttributes<HTMLTableDataCellElement>, HTMLTableDataCellElement>, "ref"> & {
-    ref?: ((instance: HTMLTableDataCellElement | null) => void) | import("react").RefObject<HTMLTableDataCellElement> | null | undefined;
+    ref?: ((instance: HTMLTableDataCellElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLTableDataCellElement> | null | undefined;
 }, "ref"> & import("react").RefAttributes<HTMLTableCellElement>>;

package/dist/components/toast/toast-button.d.ts

@@ -1,5 +1,5 @@
 import { ComponentPropsWithRef } from 'react';
 export type ToastButtonProps = ComponentPropsWithRef<'button'>;
 export declare const ToastButton: import("react").ForwardRefExoticComponent<Omit<Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
-    ref?: ((instance: HTMLButtonElement | null) => void) | import("react").RefObject<HTMLButtonElement> | null | undefined;
+    ref?: ((instance: HTMLButtonElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLButtonElement> | null | undefined;
 }, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;

package/dist/components/toaster/toaster.js

@@ -15,7 +15,7 @@ export class Toaster {
     onHide;
     constructor(params) {
         this._id = 0;
-        this.timeoutMs = params?.timeoutMs || 10000;
+        this.timeoutMs = params?.timeoutMs || 10_000;
         this.onShow = params?.onShowToast;
         this.onHide = params?.onHideToast;
     }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "draft-components",
-  "version": "3.3.0",
+  "version": "3.4.0",
   "description": "The React based UI components library.",
   "type": "module",
   "exports": {
@@ -22,7 +22,7 @@
     "css"
   ],
   "scripts": {
-    "prepare": "husky install",
+    "prepare": "husky",
     "test": "vitest run",
     "coverage": "vitest run --coverage",
     "lint": "npm run lint-js && npm run lint-css",
@@ -55,47 +55,49 @@
     "react-dom": ">= 18"
   },
   "devDependencies": {
-    "@heroicons/react": "2.1.1",
-    "@storybook/addon-actions": "7.6.7",
-    "@storybook/addon-essentials": "7.6.7",
-    "@storybook/addon-links": "7.6.7",
-    "@storybook/addon-themes": "7.6.7",
-    "@storybook/react": "7.6.7",
-    "@storybook/react-vite": "7.6.7",
-    "@stylistic/eslint-plugin": "1.6.3",
-    "@testing-library/dom": "9.3.3",
-    "@testing-library/jest-dom": "6.2.0",
-    "@testing-library/react": "14.1.2",
+    "@heroicons/react": "2.1.5",
+    "@storybook/addon-actions": "^8.2.7",
+    "@storybook/addon-essentials": "^8.2.7",
+    "@storybook/addon-links": "^8.2.7",
+    "@storybook/addon-themes": "^8.2.7",
+    "@storybook/core-common": "^8.2.7",
+    "@storybook/react": "^8.2.7",
+    "@storybook/react-vite": "^8.2.7",
+    "@stylistic/eslint-plugin": "2.6.1",
+    "@testing-library/dom": "10.4.0",
+    "@testing-library/jest-dom": "6.4.8",
+    "@testing-library/react": "16.0.0",
     "@testing-library/user-event": "14.5.2",
-    "@types/node": "20.10.7",
-    "@types/react": "18.2.47",
-    "@types/react-dom": "18.2.18",
-    "@typescript-eslint/eslint-plugin": "7.1.1",
-    "@typescript-eslint/parser": "7.1.1",
-    "@vitest/coverage-istanbul": "1.1.3",
-    "autoprefixer": "10.4.16",
+    "@types/node": "20.14.13",
+    "@types/react": "18.3.3",
+    "@types/react-dom": "18.3.0",
+    "@typescript-eslint/eslint-plugin": "8.0.0",
+    "@typescript-eslint/parser": "8.0.0",
+    "@vitejs/plugin-react": "4.3.1",
+    "@vitest/coverage-istanbul": "2.0.5",
+    "autoprefixer": "10.4.19",
     "color": "4.2.3",
     "eslint": "8.57.0",
-    "eslint-plugin-jsx-a11y": "6.8.0",
-    "eslint-plugin-react": "7.34.0",
-    "eslint-plugin-react-hooks": "4.6.0",
+    "eslint-plugin-jsx-a11y": "6.9.0",
+    "eslint-plugin-react": "7.35.0",
+    "eslint-plugin-react-hooks": "4.6.2",
     "eslint-plugin-storybook": "0.8.0",
-    "eslint-plugin-testing-library": "6.2.0",
-    "glob": "10.3.10",
-    "husky": "8.0.3",
-    "jsdom": "23.2.0",
-    "lint-staged": "15.2.0",
-    "postcss": "8.4.33",
-    "postcss-import": "16.0.0",
-    "react": "18.2.0",
-    "react-dom": "18.2.0",
-    "storybook": "7.6.7",
-    "stylelint": "16.2.1",
-    "stylelint-config-recess-order": "5.0.0",
-    "stylelint-config-standard": "36.0.0",
-    "typescript": "5.3.3",
-    "vite": "5.0.11",
-    "vitest": "1.1.3"
+    "eslint-plugin-testing-library": "6.2.2",
+    "glob": "11.0.0",
+    "husky": "9.1.4",
+    "jsdom": "24.1.1",
+    "lint-staged": "15.2.7",
+    "postcss": "8.4.40",
+    "postcss-import": "16.1.0",
+    "react": "18.3.1",
+    "react-dom": "18.3.1",
+    "storybook": "^8.2.7",
+    "stylelint": "16.8.1",
+    "stylelint-config-recess-order": "5.0.1",
+    "stylelint-config-standard": "36.0.1",
+    "typescript": "5.5.4",
+    "vite": "5.3.5",
+    "vitest": "2.0.5"
   },
   "lint-staged": {
     "*.ts?(x)": "npm run lint-js",