@synerise/ds-select 1.3.34 → 1.5.0

package/dist/Select.styles.js

@@ -1,85 +1,117 @@
-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;", ""], (props) => props.$responsive && css(["position:relative;flex-wrap:nowrap;overflow:hidden;> .ds-select-selection-item,> .ds-select-selection-overflow{flex:0 0 auto;}> .ds-select-search{flex:1 1 0;min-width:0;}"]));
+const TagMeasureRow = /* @__PURE__ */ styled.div.withConfig({
+  displayName: "Selectstyles__TagMeasureRow",
+  componentId: "sc-n9lk0v-17"
+})(["position:absolute;top:0;left:0;width:100%;height:0;display:flex;flex-wrap:nowrap;gap:4px;overflow:hidden;visibility:hidden;pointer-events:none;> *{flex:0 0 auto;}"]);
+const Chip = /* @__PURE__ */ styled.span.withConfig({
+  displayName: "Selectstyles__Chip",
+  componentId: "sc-n9lk0v-18"
+})(["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-19"
+})(["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-20"
+})(["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,
-  SuffixWrapper
+  SelectionItem,
+  Selector,
+  SuffixWrapper,
+  TagMeasureRow
 };

package/dist/Select.types.d.ts

@@ -1,18 +1,148 @@
-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. `'responsive'` (antd parity) instead fits as many chips as
+     * the selector width allows on a single line and recomputes on resize.
+     */
+    maxTagCount?: number | 'responsive';
+    /** 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 | 'responsive';
+    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,97 @@
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+import Icon, { CloseS } from "@synerise/ds-icon";
+import { SearchInputEl, MultiValueArea, TagMeasureRow, Chip, ChipLabel, ChipRemove, SelectionItem, Placeholder } from "../Select.styles.js";
+import { useResponsiveTagCount } from "../hooks/useResponsiveTagCount.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 isResponsive = maxTagCount === "responsive";
+  const {
+    areaRef,
+    measureRef,
+    visibleCount
+  } = useResponsiveTagCount({
+    enabled: isResponsive && isMultiple,
+    items: selectedValues,
+    reserveInput: !isDisabled
+  });
+  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 displayCount = (() => {
+      if (isResponsive) {
+        return visibleCount ?? selectedValues.length;
+      }
+      if (typeof maxTagCount === "number") {
+        return Math.max(maxTagCount, 0);
+      }
+      return selectedValues.length;
+    })();
+    const displayedValues = selectedValues.slice(0, displayCount);
+    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 overflowContentFor = (omitted) => typeof maxTagPlaceholder === "function" ? maxTagPlaceholder(omitted.map((v) => ({
+      value: v,
+      label: labelFor(v)
+    }))) : maxTagPlaceholder ?? `+ ${omitted.length}`;
+    const overflowContent = overflowContentFor(omittedValues);
+    return /* @__PURE__ */ jsxs(MultiValueArea, { ref: areaRef, className: "ds-select-selection-list", $responsive: isResponsive, children: [
+      isResponsive && /* @__PURE__ */ jsxs(TagMeasureRow, { ref: measureRef, "aria-hidden": true, children: [
+        selectedValues.map((v) => /* @__PURE__ */ jsx(Chip, { "data-measure-chip": "", children: /* @__PURE__ */ jsx(ChipLabel, { children: chipLabel(v) }) }, v)),
+        /* @__PURE__ */ jsx(Chip, { "data-measure-overflow": "", children: /* @__PURE__ */ jsx(ChipLabel, { children: overflowContentFor(selectedValues) }) })
+      ] }),
+      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/useResponsiveTagCount.d.ts

@@ -0,0 +1,27 @@
+import { RefObject } from 'react';
+import { RawValueType } from '../Select.types';
+type UseResponsiveTagCountParams = {
+    /** `maxTagCount === 'responsive'` in a multi-value mode. */
+    enabled: boolean;
+    /** Every selected value, in render order — one ghost chip each. */
+    items: RawValueType[];
+    /** Keep room for the search caret (skipped when disabled / readOnly). */
+    reserveInput: boolean;
+};
+type UseResponsiveTagCountResult = {
+    /** Attach to the chip row — its width is the space chips must fit into. */
+    areaRef: RefObject<HTMLDivElement>;
+    /** Attach to the off-flow row holding one ghost chip per value + the overflow chip. */
+    measureRef: RefObject<HTMLDivElement>;
+    /** Chips that fit on one line; `null` while unmeasured (SSR, hidden, zero-width) — render all. */
+    visibleCount: number | null;
+};
+/**
+ * Fit-to-width chip count for `maxTagCount="responsive"` (antd / rc-overflow parity).
+ *
+ * Widths come from an off-flow ghost row rather than the visible chips: hiding a
+ * chip would zero its width, and the ghost's own size never depends on the count
+ * we derive from it — so the ResizeObserver can't feed itself.
+ */
+export declare const useResponsiveTagCount: ({ enabled, items, reserveInput, }: UseResponsiveTagCountParams) => UseResponsiveTagCountResult;
+export {};

package/dist/hooks/useResponsiveTagCount.js

@@ -0,0 +1,72 @@
+import { useRef, useState, useCallback, useEffect, useLayoutEffect } from "react";
+const CHIP_GAP = 4;
+const INPUT_RESERVE = 30;
+const useIsomorphicLayoutEffect = typeof window === "undefined" ? useEffect : useLayoutEffect;
+const useResponsiveTagCount = ({
+  enabled,
+  items,
+  reserveInput
+}) => {
+  const areaRef = useRef(null);
+  const measureRef = useRef(null);
+  const [visibleCount, setVisibleCount] = useState(null);
+  const itemCount = items.length;
+  const itemsKey = items.join("\0");
+  const measure = useCallback(() => {
+    const area = areaRef.current;
+    const row = measureRef.current;
+    if (!enabled || !area || !row) {
+      return;
+    }
+    const areaWidth = area.clientWidth;
+    if (areaWidth <= 0) {
+      setVisibleCount(null);
+      return;
+    }
+    const ghosts = Array.from(row.children);
+    const widths = ghosts.slice(0, itemCount).map((chip) => chip.offsetWidth);
+    const overflowWidth = ghosts[itemCount]?.offsetWidth ?? 0;
+    const available = areaWidth - (reserveInput ? INPUT_RESERVE : 0);
+    const totalWidth = widths.reduce((sum, width, index) => sum + width + (index > 0 ? CHIP_GAP : 0), 0);
+    if (totalWidth <= available) {
+      setVisibleCount(itemCount);
+      return;
+    }
+    let used = 0;
+    let count = 0;
+    for (let index = 0; index < widths.length; index += 1) {
+      const next = used + widths[index] + (count > 0 ? CHIP_GAP : 0);
+      if (next + CHIP_GAP + overflowWidth > available) {
+        break;
+      }
+      used = next;
+      count += 1;
+    }
+    setVisibleCount(count === 0 && itemCount === 1 ? 1 : count);
+  }, [enabled, itemCount, reserveInput]);
+  useIsomorphicLayoutEffect(() => {
+    if (!enabled) {
+      setVisibleCount(null);
+      return void 0;
+    }
+    measure();
+    if (typeof ResizeObserver === "undefined") {
+      window.addEventListener("resize", measure);
+      return () => window.removeEventListener("resize", measure);
+    }
+    const observer = new ResizeObserver(() => measure());
+    if (areaRef.current) {
+      observer.observe(areaRef.current);
+    }
+    Array.from(measureRef.current?.children ?? []).forEach((ghost) => observer.observe(ghost));
+    return () => observer.disconnect();
+  }, [enabled, measure, itemsKey]);
+  return {
+    areaRef,
+    measureRef,
+    visibleCount
+  };
+};
+export {
+  useResponsiveTagCount
+};