@synerise/ds-select 1.3.34 → 1.4.0

package/dist/Select.styles.js

@@ -1,85 +1,112 @@
-import { Select } from "antd";
 import styled, { css } from "styled-components";
-const errorStyle = (props) => `
-  border-color: ${props.theme.palette["red-600"]};
-  box-shadow: inset 0 0 0 1px ${props.theme.palette["red-600"]};
-  background: ${props.theme.palette["red-050"]};
-`;
-const searchIconWithCustomColor = (color) => {
-  const colorValueForSvg = color.replace(/#/, "%23");
-  const iconWithColor = `data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-6 -6 36 36' >/><path fill='none' d='M0 0h24v24H0z' /><path style='fill: ${colorValueForSvg};' d='M10.734 17.234a6.463 6.463 0 004.03-1.41l3.721 3.722a.75.75 0 001.06-1.06l-3.72-3.722a6.494 6.494 0 10-5.09 2.47zm0-11.5a5 5 0 11-5 5 5.006 5.006 0 015-5z'/></svg>`;
-  return iconWithColor;
+import DSListItem, { ListWrapper } from "@synerise/ds-list-item";
+const HEIGHT = {
+  large: 48,
+  default: 32
 };
-const withPrefixStyles = () => `
-  border-top-left-radius:0;
-  border-bottom-left-radius:0;
-`;
-const withSuffixStyles = () => `
-  border-top-right-radius:0;
-  border-bottom-right-radius:0;
-`;
-const addonStyles = (props) => `
-  display: flex;
-  align-items: center;
-  background: ${props.theme.palette["grey-050"]};
-  box-shadow: inset 0 0 0 1px ${props.theme.palette["grey-300"]};
-  color: ${props.theme.palette["grey-500"]};
-  font-size:13px;
-  line-height: 1.39;
- `;
+const addonStyles = /* @__PURE__ */ css(["display:flex;align-items:center;background:", ";box-shadow:inset 0 0 0 1px ", ";color:", ";font-size:13px;line-height:1.39;"], (props) => props.theme.palette["grey-050"], (props) => props.theme.palette["grey-300"], (props) => props.theme.palette["grey-500"]);
 const SelectContainer = /* @__PURE__ */ styled.div.withConfig({
   displayName: "Selectstyles__SelectContainer",
   componentId: "sc-n9lk0v-0"
 })(["display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;margin:0 0 ", "px;"], (props) => props.hasBottomMargin ? 16 : 0);
-const AntdSelect = /* @__PURE__ */ styled(Select).withConfig({
-  displayName: "Selectstyles__AntdSelect",
+const SelectWrapper = /* @__PURE__ */ styled.div.withConfig({
+  displayName: "Selectstyles__SelectWrapper",
   componentId: "sc-n9lk0v-1"
-})(["", " &.ant-select-multiple{.ant-select-arrow{top:16px;}}&&{.ant-select-selector{", "}}&&&{width:100%;.ant-select-clear{height:18px;background-position:center;background-repeat:no-repeat;background-size:contain;top:50%;right:8px;transform-origin:50% 25%;display:flex;transform:translateY(-50%);align-items:center;justify-content:center;margin-top:0;}.ant-select-selector{", " ", "}span[aria-label='search']{svg{display:none;}width:24px;height:24px;background-color:rgba(0,0,0,0);background-image:", ";}}&.error{.ant-select-selector.ant-select-selector{", "}.ant-select-clear{background-color:", ";}}&&&.ant-select-disabled{.ant-select-selector.ant-select-selector{color:", ";cursor:", ";background-color:", ";}.ant-select-arrow{opacity:0.5;}}"], (props) => props.size === "large" && `
-
-    &.ant-select-single .ant-select-selector, 
-    &.ant-select-single .ant-select-selection-search-input {
-      height:48px;
-    }
-
-    &.ant-select-single .ant-select-selection-item, 
-    &.ant-select-single .ant-select-selection-placeholder {
-      line-height:46px;
-    }
-    
-    &.ant-select-multiple.ant-select-lg {
-      .ant-select-arrow {
-        top: 23px
-      }
-      .ant-select-selector {
-        padding: 8px;
-      }
-
-      .ant-select-selector::after,
-      .ant-select-selection-item,
-      .ant-select-selection-search,
-      .ant-select-selection-search-input {
-        height: 24px; 
-        line-height: 22px;
-      }
-    }
-
-  `, (props) => !!props.selectorStyle && css(props.selectorStyle), (props) => !!props.withPrefixel && withPrefixStyles(), (props) => !!props.withSuffixel && withSuffixStyles(), (props) => `url("${searchIconWithCustomColor(props.theme.palette["grey-400"])}")`, (props) => errorStyle(props), (props) => props.theme.palette["red-050"], (props) => props.readOnly ? props.theme.palette["grey-600"] : props.theme.palette["grey-400"], (props) => props.readOnly ? "default" : "not-allowed", (props) => props.readOnly ? props.theme.palette.white : props.theme.palette["grey-050"]);
+})(["display:flex;width:100%;"]);
 const PrefixWrapper = /* @__PURE__ */ styled.div.withConfig({
   displayName: "Selectstyles__PrefixWrapper",
   componentId: "sc-n9lk0v-2"
-})(["border-radius:3px 0 0 3px;margin-right:-2px;padding-right:1px;", ";"], (props) => addonStyles(props));
+})(["border-radius:3px 0 0 3px;margin-right:-2px;padding-right:1px;", ";"], addonStyles);
 const SuffixWrapper = /* @__PURE__ */ styled.div.withConfig({
   displayName: "Selectstyles__SuffixWrapper",
   componentId: "sc-n9lk0v-3"
-})(["border-radius:0 3px 3px 0;margin-left:-1px;", ";"], (props) => addonStyles(props));
-const SelectWrapper = /* @__PURE__ */ styled.div.withConfig({
-  displayName: "Selectstyles__SelectWrapper",
+})(["border-radius:0 3px 3px 0;margin-left:-1px;", ";"], addonStyles);
+const Selector = /* @__PURE__ */ styled.div.withConfig({
+  displayName: "Selectstyles__Selector",
   componentId: "sc-n9lk0v-4"
-})(["display:flex;", ""], (props) => props.grey && !props.error && css(["&&&{.ant-select-selector{background-color:", ";}}"], props.theme.palette["grey-050"]));
+})(["position:relative;display:flex;align-items:center;width:100%;min-width:0;box-sizing:border-box;", " border:1px solid ", ";border-radius:3px;background-color:", ";color:", ";font-size:13px;cursor:pointer;transition:all 0.3s;", " ", " ", " ", " ", " ", " ", " ", ""], (props) => {
+  const h = HEIGHT[props.$size ?? "default"] ?? HEIGHT.default;
+  return props.$multiple ? css(["min-height:", "px;height:auto;padding:3px 30px 3px 8px;flex-wrap:wrap;gap:4px;"], h) : css(["height:", "px;padding:0 30px 0 12px;"], h);
+}, (props) => props.theme.palette["grey-300"], (props) => props.$grey ? props.theme.palette["grey-050"] : props.theme.palette.white, (props) => props.theme.palette["grey-700"], (props) => props.$withPrefixel && css(["border-top-left-radius:0;border-bottom-left-radius:0;"]), (props) => props.$withSuffixel && css(["border-top-right-radius:0;border-bottom-right-radius:0;"]), (props) => !props.$open && !props.$error && css(["&:hover{border-color:", ";}"], props.theme.palette["grey-400"]), (props) => props.$clearable && css(["&:hover .ds-select-arrow{display:none;}&:hover .ds-select-clear{display:flex;}"]), (props) => props.$open && css(["box-shadow:inset 0 0 0 1px ", ";border-color:", ";background-color:", ";"], props.theme.palette["blue-600"], props.theme.palette["blue-600"], props.theme.palette["blue-050"]), (props) => props.$error && css(["border-color:", ";box-shadow:inset 0 0 0 1px ", ";background:", ";"], props.theme.palette["red-600"], props.theme.palette["red-600"], props.theme.palette["red-050"]), (props) => props.$disabled && css(["cursor:", ";color:", ";background-color:", ";&:hover{border-color:", ";}"], props.$readOnly ? "default" : "not-allowed", props.$readOnly ? props.theme.palette["grey-600"] : props.theme.palette["grey-400"], props.$readOnly ? props.theme.palette.white : props.theme.palette["grey-050"], props.theme.palette["grey-300"]), (props) => !!props.$selectorStyle && css(props.$selectorStyle));
+const SelectionItem = /* @__PURE__ */ styled.span.withConfig({
+  displayName: "Selectstyles__SelectionItem",
+  componentId: "sc-n9lk0v-5"
+})(["flex:1;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;"]);
+const Placeholder = /* @__PURE__ */ styled.span.withConfig({
+  displayName: "Selectstyles__Placeholder",
+  componentId: "sc-n9lk0v-6"
+})(["flex:1;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;color:", ";"], (props) => props.theme.palette["grey-500"]);
+const Arrow = /* @__PURE__ */ styled.span.withConfig({
+  displayName: "Selectstyles__Arrow",
+  componentId: "sc-n9lk0v-7"
+})(["position:absolute;right:8px;top:50%;display:flex;align-items:center;transform:translateY(-50%) ", ";transition:transform 0.3s;color:", ";pointer-events:none;"], (props) => props.$open ? "rotate(180deg)" : "", (props) => props.theme.palette["grey-500"]);
+const ClearWrapper = /* @__PURE__ */ styled.span.withConfig({
+  displayName: "Selectstyles__ClearWrapper",
+  componentId: "sc-n9lk0v-8"
+})(["position:absolute;right:8px;top:50%;transform:translateY(-50%);display:none;align-items:center;cursor:pointer;color:", ";"], (props) => props.theme.palette["red-600"]);
+const DropdownWrapper = /* @__PURE__ */ styled.div.withConfig({
+  displayName: "Selectstyles__DropdownWrapper",
+  componentId: "sc-n9lk0v-9"
+})(["display:flex;flex-direction:column;align-items:stretch;min-width:120px;"]);
+const ScrollList = /* @__PURE__ */ styled(ListWrapper).withConfig({
+  displayName: "Selectstyles__ScrollList",
+  componentId: "sc-n9lk0v-10"
+})(["&&{padding-right:0;}"]);
+const Inner = /* @__PURE__ */ styled.div.withConfig({
+  displayName: "Selectstyles__Inner",
+  componentId: "sc-n9lk0v-11"
+})(["padding-right:8px;"]);
+const NotFound = /* @__PURE__ */ styled.div.withConfig({
+  displayName: "Selectstyles__NotFound",
+  componentId: "sc-n9lk0v-12"
+})(["display:flex;align-items:center;justify-content:center;padding:8px 12px;color:", ";font-weight:normal;"], (props) => props.theme.palette["grey-600"]);
+const Loading = /* @__PURE__ */ styled.div.withConfig({
+  displayName: "Selectstyles__Loading",
+  componentId: "sc-n9lk0v-13"
+})(["display:flex;align-items:center;justify-content:center;padding:16px;"]);
+const OptionItem = /* @__PURE__ */ styled(DSListItem).withConfig({
+  displayName: "Selectstyles__OptionItem",
+  componentId: "sc-n9lk0v-14"
+})(["min-width:auto;font-weight:normal;&&:hover:not(.ds-list-item-disabled),&&.ds-select-item-option-active:not(.ds-list-item-disabled){background-color:", ";}"], (props) => props.theme.palette["blue-050"]);
+const SearchInputEl = /* @__PURE__ */ styled.input.withConfig({
+  displayName: "Selectstyles__SearchInputEl",
+  componentId: "sc-n9lk0v-15"
+})(["flex:1 1 30px;min-width:30px;width:100%;border:none;outline:none;background:transparent;padding:0;margin:0;font-family:inherit;font-size:13px;color:", ";cursor:inherit;&::placeholder{color:", ";}&:disabled{cursor:not-allowed;}", ""], (props) => props.theme.palette["grey-700"], (props) => props.theme.palette["grey-500"], (props) => props.$overlay && css(["position:absolute;top:0;left:0;width:100%;height:100%;flex:none;box-sizing:border-box;padding:0 30px 0 12px;"]));
+const MultiValueArea = /* @__PURE__ */ styled.div.withConfig({
+  displayName: "Selectstyles__MultiValueArea",
+  componentId: "sc-n9lk0v-16"
+})(["display:flex;flex-wrap:wrap;align-items:center;gap:4px;flex:1;min-width:0;"]);
+const Chip = /* @__PURE__ */ styled.span.withConfig({
+  displayName: "Selectstyles__Chip",
+  componentId: "sc-n9lk0v-17"
+})(["position:relative;display:inline-flex;align-items:center;box-sizing:border-box;width:max-content;max-width:100%;min-height:24px;padding:0 8px;background:", ";border:none;border-radius:3px;font-size:13px;line-height:1;color:", ";&:hover{background:", ";color:", ";}&:hover .ds-select-selection-item-label{max-width:calc(100% - 24px);}&:hover .ds-select-selection-item-remove{display:inline-flex;}"], (props) => props.theme.palette["grey-200"], (props) => props.theme.palette["grey-600"], (props) => props.theme.palette["grey-300"], (props) => props.theme.palette["grey-800"]);
+const ChipLabel = /* @__PURE__ */ styled.span.withConfig({
+  displayName: "Selectstyles__ChipLabel",
+  componentId: "sc-n9lk0v-18"
+})(["max-width:100%;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;"]);
+const ChipRemove = /* @__PURE__ */ styled.span.withConfig({
+  displayName: "Selectstyles__ChipRemove",
+  componentId: "sc-n9lk0v-19"
+})(["position:absolute;right:4px;top:50%;transform:translateY(-50%);display:none;align-items:center;justify-content:center;width:24px;height:24px;cursor:pointer;color:", ";"], (props) => props.theme.palette["red-600"]);
 export {
-  AntdSelect,
+  Arrow,
+  Chip,
+  ChipLabel,
+  ChipRemove,
+  ClearWrapper,
+  DropdownWrapper,
+  Inner,
+  Loading,
+  MultiValueArea,
+  NotFound,
+  OptionItem,
+  Placeholder,
   PrefixWrapper,
+  ScrollList,
+  SearchInputEl,
   SelectContainer,
   SelectWrapper,
+  SelectionItem,
+  Selector,
   SuffixWrapper
 };

package/dist/Select.types.d.ts

@@ -1,18 +1,144 @@
-import { SelectProps } from 'antd';
-import { SelectValue } from 'antd/lib/select';
-import { ReactNode, ReactText } from 'react';
+import { AriaAttributes, CSSProperties, FocusEvent, Key, KeyboardEvent, MouseEvent, ReactElement, ReactNode, UIEvent } from 'react';
 import { CSSObject } from 'styled-components';
+import { DropdownPlacement } from '@synerise/ds-dropdown';
 import { FormFieldCommonProps } from '@synerise/ds-form-field';
-export type Props<T = SelectValue> = Omit<SelectProps<T>, 'listHeight'> & {
-    error?: boolean;
-    clearTooltip?: string;
+/**
+ * The selected value. A plain value for single-select, an array for
+ * `mode="multiple"` / `mode="tags"`. Replaces antd's `SelectValue`.
+ */
+export type RawValueType = string | number;
+export type SelectValue = RawValueType | RawValueType[] | undefined;
+export type SelectMode = 'multiple' | 'tags';
+/** Internal, normalised option shape (from `options` prop or `<Select.Option>` children). */
+export type SelectOption = {
+    value: RawValueType;
+    /** antd-parity alias of `value`; some consumers read `option.key` in callbacks. */
+    key?: RawValueType;
+    /** Rendered content in the dropdown row (and the selector unless `optionLabelProp` picks another field). */
+    label?: ReactNode;
+    disabled?: boolean;
+    /** Native `title` on the option (hover tooltip / accessible text), mirrors antd. */
+    title?: ReactNode;
+    /** antd parity: raw children of `<Select.Option>`; some consumers read `option.children`. */
+    children?: ReactNode;
+    /** antd parity: forwarded to the rendered option row. */
+    style?: CSSProperties;
+    /** Value used for client-side filtering when `optionFilterProp` is set. */
+    filterValue?: string;
+    /** antd parity: per-option `data-*` / `aria-*` attributes, forwarded to the rendered option row. */
+    [dataAttr: `data-${string}`]: unknown;
+    [ariaAttr: `aria-${string}`]: unknown;
+};
+/** Signature of a client-side option filter (antd-compatible). */
+export type FilterOptionFn = (input: string, option: SelectOption) => boolean;
+/** antd-parity: type for a select `onChange` / `onSelect` handler. */
+export type SelectHandler<VT extends RawValueType = RawValueType> = (value: VT, option?: SelectOption | SelectOption[]) => void;
+export type SelectProps<VT extends SelectValue = SelectValue> = {
+    value?: VT;
+    defaultValue?: VT;
+    onChange?: (value: VT, option?: SelectOption | SelectOption[]) => void;
+    onSelect?: (value: RawValueType, option?: SelectOption) => void;
+    onDeselect?: (value: RawValueType, option?: SelectOption) => void;
+    onBlur?: (event: FocusEvent<HTMLElement>) => void;
+    onFocus?: (event: FocusEvent<HTMLElement>) => void;
+    onDropdownVisibleChange?: (open: boolean) => void;
+    /** Remote-search callback (pair with `filterOption={false}`). */
+    onSearch?: (value: string) => void;
+    /** antd parity: fired as the dropdown option list scrolls (e.g. to page in more options). */
+    onPopupScroll?: (event: UIEvent<HTMLDivElement>) => void;
+    /** antd parity: fired when the clear affordance is used. */
+    onClear?: () => void;
+    /** antd parity: click handler on the selector box. */
+    onClick?: (event: MouseEvent<HTMLDivElement>) => void;
+    /** antd parity: keydown on the inner search input. */
+    onInputKeyDown?: (event: KeyboardEvent<HTMLInputElement>) => void;
+    /** antd parity: keydown on the selector. */
+    onKeyDown?: (event: KeyboardEvent<HTMLElement>) => void;
+    /** `undefined` = single-select; `'multiple'` / `'tags'` = multi-value. */
+    mode?: SelectMode;
+    /** Options as data. When omitted, `<Select.Option>` children are read instead. */
+    options?: SelectOption[];
+    showSearch?: boolean;
+    /** Controlled search-input value (antd parity). Pairs with `onSearch`. */
+    searchValue?: string;
+    /** antd parity: max length of the search input. */
+    maxLength?: number;
+    /** `true`/`false` toggles built-in filtering; a function is a custom predicate. */
+    filterOption?: boolean | FilterOptionFn;
+    /** Which option field the built-in filter matches against (default: label). */
+    optionFilterProp?: string;
+    /** Which option field renders in the selector (default: label). */
+    optionLabelProp?: string;
+    placeholder?: ReactNode;
+    disabled?: boolean;
+    loading?: boolean;
+    allowClear?: boolean;
+    autoFocus?: boolean;
+    /**
+     * antd parity: accepted for back-compat but NOT implemented. The dropdown
+     * always highlights the selected (or first enabled) option on open, so this
+     * flag has no effect.
+     */
+    defaultActiveFirstOption?: boolean;
+    showArrow?: boolean;
+    /** antd parity: custom icon replacing the dropdown arrow. */
+    suffixIcon?: ReactNode;
+    /** antd parity: tab index forwarded to the selector / search input. */
+    tabIndex?: number;
+    /** Max chips rendered in `multiple` / `tags` mode before the rest collapse into an overflow chip. */
+    maxTagCount?: number;
+    /** Max characters shown per chip label; longer labels are truncated with an ellipsis. */
+    maxTagTextLength?: number;
+    /**
+     * Content of the collapsed-overflow chip (antd parity). A node renders as-is;
+     * a function receives the omitted options and returns the node. Defaults to `+ N`.
+     */
+    maxTagPlaceholder?: ReactNode | ((omittedValues: Array<{
+        value: RawValueType;
+        label: ReactNode;
+    }>) => ReactNode);
+    /** Characters that split typed text into tags in `mode="tags"`. */
+    tokenSeparators?: string[];
+    open?: boolean;
+    defaultOpen?: boolean;
+    /** Dropdown positioning / sizing. antd parity: consumers may return `parentNode` (`ParentNode | null`). */
+    getPopupContainer?: (trigger: HTMLElement) => HTMLElement | ParentNode | null;
+    placement?: DropdownPlacement;
+    dropdownClassName?: string;
+    /** antd v4 alias of `dropdownClassName`. */
+    popupClassName?: string;
+    /** antd parity: dropdown alignment config (accepted for compatibility). */
+    dropdownAlign?: Record<string, unknown>;
+    dropdownStyle?: CSSProperties;
+    /** Match the dropdown width to the selector (default true). A number fixes the dropdown width in px (antd parity). */
+    dropdownMatchSelectWidth?: boolean | number;
+    /** Wrap the rendered option menu (custom footer / scroll container). antd parity: receives a `ReactElement`. */
+    dropdownRender?: (menu: ReactElement) => ReactNode;
+    /** Max dropdown list height (px). */
+    listHeight?: number | string;
+    /** antd parity: fixed height per option row (px). Accepted for compatibility (non-virtualised list). */
+    listItemHeight?: number;
+    notFoundContent?: ReactNode;
+    clearIcon?: ReactNode;
+    /** Item key extractor for `<Select.Option>` children / options. */
+    rowKey?: (option: SelectOption) => Key;
     prefixel?: ReactNode;
     suffixel?: ReactNode;
-    listHeight?: ReactText;
     grey?: boolean;
-    asFormElement?: boolean;
-    selectorStyle?: CSSObject;
+    /** Render just the selector (no FormField chrome). */
     raw?: boolean;
     readOnly?: boolean;
-    disabled?: boolean;
-} & FormFieldCommonProps;
+    asFormElement?: boolean;
+    selectorStyle?: CSSObject;
+    clearTooltip?: string;
+    size?: 'middle' | 'large' | 'default';
+    error?: boolean;
+    id?: string;
+    className?: string;
+    style?: CSSProperties;
+    children?: ReactNode;
+    /** antd parity: forward native `data-*` attributes (e.g. `data-testid`) to the select root. */
+    [dataAttr: `data-${string}`]: unknown;
+} & FormFieldCommonProps & AriaAttributes;
+/** @deprecated internal alias kept for back-compat with the antd-era `Props` name. */
+export type Props<VT extends SelectValue = SelectValue> = SelectProps<VT>;

package/dist/components/OptionList.d.ts

@@ -0,0 +1,23 @@
+import { Key, ReactElement, ReactNode, UIEvent } from 'react';
+import { RawValueType, SelectOption } from '../Select.types';
+type OptionListProps = {
+    loading?: boolean;
+    /** Options to render (already filtered / with the tags create-row). */
+    options: SelectOption[];
+    notFoundContent?: ReactNode;
+    listHeight?: number | string;
+    isMultiple: boolean;
+    listboxId: string;
+    selectedValues: RawValueType[];
+    /** Keyboard-highlighted option index. */
+    activeIndex: number;
+    rowKey?: (option: SelectOption) => Key;
+    optionDomId: (index: number) => string;
+    onOptionActivate: (index: number) => void;
+    onOptionSelect: (option: SelectOption) => void;
+    /** antd parity: fired as the option list scrolls (e.g. to page in more options). */
+    onPopupScroll?: (event: UIEvent<HTMLDivElement>) => void;
+};
+/** The dropdown overlay: loading / empty / the scrollable listbox of options. */
+export declare const OptionList: ({ loading, options, notFoundContent, listHeight, isMultiple, listboxId, selectedValues, activeIndex, rowKey, optionDomId, onOptionActivate, onOptionSelect, onPopupScroll, }: OptionListProps) => ReactElement;
+export {};

package/dist/components/OptionList.js

@@ -0,0 +1,32 @@
+import { jsx } from "react/jsx-runtime";
+import Loader from "@synerise/ds-loader";
+import Scrollbar from "@synerise/ds-scrollbar";
+import { DropdownWrapper, Loading, NotFound, ScrollList, Inner, OptionItem } from "../Select.styles.js";
+import { DEFAULT_LIST_HEIGHT, cx } from "../utils/helpers.js";
+const OptionList = ({
+  loading,
+  options,
+  notFoundContent,
+  listHeight,
+  isMultiple,
+  listboxId,
+  selectedValues,
+  activeIndex,
+  rowKey,
+  optionDomId,
+  onOptionActivate,
+  onOptionSelect,
+  onPopupScroll
+}) => /* @__PURE__ */ jsx(DropdownWrapper, { onMouseDown: (event) => {
+  const target = event.target;
+  if (!target.closest('input, textarea, [contenteditable="true"]')) {
+    event.preventDefault();
+  }
+}, children: loading ? /* @__PURE__ */ jsx(Loading, { className: "ds-select-loading", children: /* @__PURE__ */ jsx(Loader, { size: "M" }) }) : options.length === 0 ? /* @__PURE__ */ jsx(NotFound, { className: "ds-select-empty", children: notFoundContent }) : /* @__PURE__ */ jsx(ScrollList, { children: /* @__PURE__ */ jsx(Scrollbar, { absolute: true, maxHeight: Number(listHeight) || DEFAULT_LIST_HEIGHT, onScroll: onPopupScroll ? (event) => onPopupScroll(event) : void 0, children: /* @__PURE__ */ jsx(Inner, { role: "listbox", id: listboxId, "aria-multiselectable": isMultiple || void 0, children: options.map((option, index) => {
+  const isSelected = selectedValues.includes(option.value);
+  const optionAttrs = Object.fromEntries(Object.entries(option).filter(([key]) => key.startsWith("data-") || key.startsWith("aria-")));
+  return /* @__PURE__ */ jsx(OptionItem, { id: optionDomId(index), role: "option", className: cx("ds-select-item-option", isSelected && "ds-select-item-option-selected", index === activeIndex && "ds-select-item-option-active"), selected: isSelected, "aria-selected": isSelected, "data-testid": "select-option", title: typeof option.title === "string" ? option.title : void 0, text: option.label ?? option.value, style: option.style, disabled: option.disabled, onMouseEnter: () => onOptionActivate(index), onClick: () => onOptionSelect(option), ...optionAttrs }, rowKey ? rowKey(option) : option.value);
+}) }) }) }) });
+export {
+  OptionList
+};

package/dist/components/SelectorContent.d.ts

@@ -0,0 +1,34 @@
+import { ChangeEvent, KeyboardEvent, ReactElement, ReactNode, RefObject } from 'react';
+import { RawValueType } from '../Select.types';
+type SelectorContentProps = {
+    isMultiple: boolean;
+    showSearch?: boolean;
+    hasValue: boolean;
+    placeholder?: ReactNode;
+    placeholderStr?: string;
+    selectedValues: RawValueType[];
+    effectiveQuery: string;
+    labelFor: (value: RawValueType) => ReactNode;
+    onRemoveValue: (value: RawValueType) => void;
+    maxTagCount?: number;
+    maxTagTextLength?: number;
+    maxTagPlaceholder?: ReactNode | ((omittedValues: Array<{
+        value: RawValueType;
+        label: ReactNode;
+    }>) => ReactNode);
+    inputRef: RefObject<HTMLInputElement>;
+    isDisabled: boolean;
+    hasInput: boolean;
+    autoFocus?: boolean;
+    maxLength?: number;
+    id?: string;
+    isOpen: boolean;
+    listboxId: string;
+    activeIndex: number;
+    optionDomId: (index: number) => string;
+    onSearchChange: (event: ChangeEvent<HTMLInputElement>) => void;
+    onSearchKeyDown: (event: KeyboardEvent<HTMLInputElement>) => void;
+};
+/** Content rendered inside the selector box: chips / selected label / placeholder + search input. */
+export declare const SelectorContent: ({ isMultiple, showSearch, hasValue, placeholder, placeholderStr, selectedValues, effectiveQuery, labelFor, onRemoveValue, maxTagCount, maxTagTextLength, maxTagPlaceholder, inputRef, isDisabled, hasInput, autoFocus, maxLength, id, isOpen, listboxId, activeIndex, optionDomId, onSearchChange, onSearchKeyDown, }: SelectorContentProps) => ReactElement;
+export {};

package/dist/components/SelectorContent.js

@@ -0,0 +1,72 @@
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+import Icon, { CloseS } from "@synerise/ds-icon";
+import { SearchInputEl, MultiValueArea, Chip, ChipLabel, ChipRemove, SelectionItem, Placeholder } from "../Select.styles.js";
+const SelectorContent = ({
+  isMultiple,
+  showSearch,
+  hasValue,
+  placeholder,
+  placeholderStr,
+  selectedValues,
+  effectiveQuery,
+  labelFor,
+  onRemoveValue,
+  maxTagCount,
+  maxTagTextLength,
+  maxTagPlaceholder,
+  inputRef,
+  isDisabled,
+  hasInput,
+  autoFocus,
+  maxLength,
+  id,
+  isOpen,
+  listboxId,
+  activeIndex,
+  optionDomId,
+  onSearchChange,
+  onSearchKeyDown
+}) => {
+  const isSingleSearch = !!showSearch && !isMultiple;
+  const searchInput = /* @__PURE__ */ jsx(SearchInputEl, { ref: inputRef, $overlay: isSingleSearch, className: "ds-select-search", value: effectiveQuery, onChange: onSearchChange, onKeyDown: onSearchKeyDown, placeholder: hasValue ? void 0 : placeholderStr, disabled: isDisabled, autoFocus, maxLength, autoComplete: "off", readOnly: !hasInput, id, role: "combobox", "aria-autocomplete": "list", "aria-expanded": isOpen, "aria-haspopup": "listbox", "aria-controls": isOpen ? listboxId : void 0, "aria-activedescendant": isOpen && activeIndex >= 0 ? optionDomId(activeIndex) : void 0 });
+  if (isMultiple) {
+    const displayedValues = typeof maxTagCount === "number" ? selectedValues.slice(0, Math.max(maxTagCount, 0)) : selectedValues;
+    const omittedValues = selectedValues.slice(displayedValues.length);
+    const chipLabel = (v) => {
+      const label = labelFor(v);
+      if (typeof maxTagTextLength === "number" && typeof label === "string" && label.length > maxTagTextLength) {
+        return `${label.slice(0, maxTagTextLength)}...`;
+      }
+      return label;
+    };
+    const overflowContent = typeof maxTagPlaceholder === "function" ? maxTagPlaceholder(omittedValues.map((v) => ({
+      value: v,
+      label: labelFor(v)
+    }))) : maxTagPlaceholder ?? `+ ${omittedValues.length}`;
+    return /* @__PURE__ */ jsxs(MultiValueArea, { children: [
+      displayedValues.map((v) => /* @__PURE__ */ jsxs(Chip, { className: "ds-select-selection-item", children: [
+        /* @__PURE__ */ jsx(ChipLabel, { className: "ds-select-selection-item-label", children: chipLabel(v) }),
+        /* @__PURE__ */ jsx(ChipRemove, { className: "ds-select-selection-item-remove", onMouseDown: (e) => {
+          e.preventDefault();
+          e.stopPropagation();
+          onRemoveValue(v);
+        }, children: /* @__PURE__ */ jsx(Icon, { component: /* @__PURE__ */ jsx(CloseS, {}), size: 24 }) })
+      ] }, v)),
+      omittedValues.length > 0 && /* @__PURE__ */ jsx(Chip, { className: "ds-select-selection-overflow", "data-testid": "select-tag-overflow", children: /* @__PURE__ */ jsx(ChipLabel, { className: "ds-select-selection-item-label", children: overflowContent }) }),
+      searchInput
+    ] });
+  }
+  if (showSearch) {
+    return /* @__PURE__ */ jsxs(Fragment, { children: [
+      hasValue && !effectiveQuery && /* @__PURE__ */ jsx(SelectionItem, { className: "ds-select-selection-item", children: labelFor(selectedValues[0]) }),
+      searchInput
+    ] });
+  }
+  if (hasValue) {
+    return /* @__PURE__ */ jsx(SelectionItem, { className: "ds-select-selection-item", children: labelFor(selectedValues[0]) });
+  }
+  return /* @__PURE__ */ jsx(Placeholder, { className: "ds-select-selection-placeholder", children: placeholder });
+};
+export {
+  SelectorContent
+};

package/dist/hooks/useSelectOptions.d.ts

@@ -0,0 +1,28 @@
+import { ReactNode } from 'react';
+import { FilterOptionFn, RawValueType, SelectOption } from '../Select.types';
+type UseSelectOptionsParams = {
+    /** Options as data; when empty, `<Select.Option>` children are read instead. */
+    options?: SelectOption[];
+    children: ReactNode;
+    /** `false` = remote search (never filter locally); a function is a custom predicate. */
+    filterOption?: boolean | FilterOptionFn;
+    optionFilterProp?: string;
+    /** Current search text (controlled `searchValue` or the internal query). */
+    effectiveQuery: string;
+    isTags: boolean;
+    /** Already-selected values (so tags mode doesn't offer an existing value as new). */
+    selectedValues: RawValueType[];
+};
+type UseSelectOptionsResult = {
+    /** Options from the `options` prop, or resolved from `<Select.Option>` children. */
+    resolvedOptions: SelectOption[];
+    /** `resolvedOptions` after client-side filtering + the tags create-row. */
+    displayedOptions: SelectOption[];
+};
+/**
+ * Resolve a Select's option list: `options` prop → `<Select.Option>` children,
+ * then apply client-side filtering (`filterOption` / `optionFilterProp`) and, in
+ * `mode="tags"`, prepend the typed text as a create-able row.
+ */
+export declare const useSelectOptions: ({ options, children, filterOption, optionFilterProp, effectiveQuery, isTags, selectedValues, }: UseSelectOptionsParams) => UseSelectOptionsResult;
+export {};

package/dist/hooks/useSelectOptions.js

@@ -0,0 +1,41 @@
+import { useMemo } from "react";
+import { getOptionsFromChildren } from "../utils/getOptionsFromChildren.js";
+import { defaultFilter } from "../utils/helpers.js";
+const useSelectOptions = ({
+  options,
+  children,
+  filterOption,
+  optionFilterProp,
+  effectiveQuery,
+  isTags,
+  selectedValues
+}) => {
+  const resolvedOptions = useMemo(() => {
+    if (options && options.length > 0) {
+      return options;
+    }
+    return getOptionsFromChildren(children);
+  }, [options, children]);
+  const displayedOptions = useMemo(() => {
+    let list = resolvedOptions;
+    if (filterOption !== false && effectiveQuery) {
+      const match = typeof filterOption === "function" ? filterOption : defaultFilter(optionFilterProp);
+      list = resolvedOptions.filter((option) => match(effectiveQuery, option));
+    }
+    if (isTags && effectiveQuery && !resolvedOptions.some((option) => String(option.value) === effectiveQuery) && !selectedValues.some((v) => String(v) === effectiveQuery)) {
+      list = [{
+        value: effectiveQuery,
+        key: effectiveQuery,
+        label: effectiveQuery
+      }, ...list];
+    }
+    return list;
+  }, [resolvedOptions, filterOption, optionFilterProp, effectiveQuery, isTags, selectedValues]);
+  return {
+    resolvedOptions,
+    displayedOptions
+  };
+};
+export {
+  useSelectOptions
+};

package/dist/index.d.ts

@@ -1,3 +1,5 @@
 export { default } from './Select';
-export type { Props as SelectProps } from './Select.types';
+export { Option, type OptionProps } from './Option';
+export type { Props, SelectProps, SelectValue, SelectOption, SelectMode, SelectHandler, RawValueType, FilterOptionFn, } from './Select.types';
 export * as SelectStyles from './Select.styles';
+export { getOptionsFromChildren, findOption, } from './utils/getOptionsFromChildren';

package/dist/index.js

@@ -1,6 +1,11 @@
 import { default as default2 } from "./Select.js";
+import { Option } from "./Option.js";
 import * as Select_styles from "./Select.styles.js";
+import { findOption, getOptionsFromChildren } from "./utils/getOptionsFromChildren.js";
 export {
+  Option,
   Select_styles as SelectStyles,
-  default2 as default
+  default2 as default,
+  findOption,
+  getOptionsFromChildren
 };

package/dist/utils/getOptionsFromChildren.d.ts

@@ -0,0 +1,11 @@
+import { ReactNode } from 'react';
+import { SelectOption } from '../Select.types';
+/**
+ * Maps declarative `<Select.Option>` children to the internal option shape.
+ * Only direct `Option` children are considered; anything else is ignored.
+ * `label`/`title` are preserved so the selector display (`optionLabelProp`) and
+ * client-side filtering (`optionFilterProp`) can pick the right field.
+ */
+export declare const getOptionsFromChildren: (children: ReactNode) => SelectOption[];
+/** Resolve the display node for a selected value from the options list. */
+export declare const findOption: (options: SelectOption[], value: SelectOption["value"]) => SelectOption | undefined;

package/dist/utils/getOptionsFromChildren.js

@@ -0,0 +1,41 @@
+import { Children, isValidElement } from "react";
+import { Option } from "../Option.js";
+const getOptionsFromChildren = (children) => {
+  const options = [];
+  Children.forEach(children, (child) => {
+    if (!isValidElement(child) || child.type !== Option) {
+      return;
+    }
+    const optionProps = child.props;
+    const {
+      value,
+      disabled,
+      title,
+      label,
+      children: optionLabel,
+      style
+    } = optionProps;
+    const resolvedValue = value ?? child.key ?? void 0;
+    const option = {
+      value: resolvedValue,
+      key: resolvedValue,
+      disabled,
+      title,
+      label: label ?? optionLabel,
+      children: optionLabel,
+      style
+    };
+    Object.entries(optionProps).forEach(([key, val]) => {
+      if (key.startsWith("data-") || key.startsWith("aria-")) {
+        option[key] = val;
+      }
+    });
+    options.push(option);
+  });
+  return options;
+};
+const findOption = (options, value) => options.find((option) => option.value === value);
+export {
+  findOption,
+  getOptionsFromChildren
+};