@synerise/ds-select 1.3.34 → 1.4.0

package/dist/Select.js

@@ -1,74 +1,396 @@
 import { jsxs, jsx } from "react/jsx-runtime";
-import { Select as Select$1 } from "antd";
-import classNames from "classnames";
-import { forwardRef } from "react";
+import { forwardRef, useState, useRef, useId, useEffect } from "react";
+import Dropdown from "@synerise/ds-dropdown";
 import FormField from "@synerise/ds-form-field";
-import Icon, { CloseS, Close3M } from "@synerise/ds-icon";
+import Icon, { AngleDownS, Close3M } from "@synerise/ds-icon";
 import Tooltip from "@synerise/ds-tooltip";
 import { getPopupContainer } from "@synerise/ds-utils";
-import { SelectWrapper, PrefixWrapper, AntdSelect, SuffixWrapper, SelectContainer } from "./Select.styles.js";
-import "./style/index.css";
-const Select = forwardRef(({
-  label,
-  description,
-  errorText,
-  error,
-  tooltip,
-  tooltipConfig,
-  clearTooltip,
-  prefixel,
-  suffixel,
-  style,
-  size,
-  listHeight,
-  className,
-  getPopupContainer: getPopupContainer$1 = getPopupContainer,
-  grey,
-  dropdownClassName,
-  asFormElement,
-  raw,
-  readOnly,
-  disabled,
-  ...antdProps
-}, forwardedRef) => {
-  const hasBottomMargin = asFormElement || Boolean(errorText || description);
-  const simpleSelect = /* @__PURE__ */ jsxs(SelectWrapper, { grey, error: Boolean(errorText), className: classNames("ds-select-wrapper", {
-    error: errorText || error
-  }, {
-    [className]: !!className
-  }), style, ref: raw ? forwardedRef : void 0, children: [
-    !!prefixel && /* @__PURE__ */ jsx(PrefixWrapper, { children: prefixel }),
-    /* @__PURE__ */ jsx(
-      AntdSelect,
-      {
-        dropdownAlign: {
-          offset: [0, 8]
-        },
-        ...antdProps,
-        getPopupContainer: getPopupContainer$1,
-        listHeight,
-        size,
-        withPrefixel: !!prefixel,
-        withSuffixel: !!suffixel,
-        disabled: disabled || readOnly,
-        readOnly,
-        clearIcon: /* @__PURE__ */ jsx(Tooltip, { title: clearTooltip, children: /* @__PURE__ */ jsx("span", { children: /* @__PURE__ */ jsx(Icon, { component: /* @__PURE__ */ jsx(Close3M, {}), size: size === "small" ? 18 : 24 }) }) }),
-        removeIcon: /* @__PURE__ */ jsx(Icon, { component: /* @__PURE__ */ jsx(CloseS, {}) }),
-        className: classNames({
-          error: errorText || error
-        }),
-        dropdownClassName: classNames("ps__child--consume", dropdownClassName)
+import { Option } from "./Option.js";
+import { SelectWrapper, PrefixWrapper, Selector, Arrow, ClearWrapper, SuffixWrapper, SelectContainer } from "./Select.styles.js";
+import { OptionList } from "./components/OptionList.js";
+import { SelectorContent } from "./components/SelectorContent.js";
+import { useSelectOptions } from "./hooks/useSelectOptions.js";
+import { findOption } from "./utils/getOptionsFromChildren.js";
+import { DEFAULT_LIST_HEIGHT, cx, toArray } from "./utils/helpers.js";
+const SelectInner = forwardRef((props, ref) => {
+  const {
+    value,
+    defaultValue,
+    onChange,
+    onSelect,
+    onDeselect,
+    onBlur,
+    onFocus,
+    onDropdownVisibleChange,
+    onSearch,
+    onPopupScroll,
+    onClear,
+    onClick,
+    onInputKeyDown,
+    onKeyDown,
+    mode,
+    options,
+    children,
+    placeholder,
+    disabled,
+    readOnly,
+    loading,
+    allowClear,
+    showSearch,
+    searchValue,
+    maxLength,
+    filterOption,
+    optionFilterProp,
+    optionLabelProp,
+    tokenSeparators,
+    maxTagCount,
+    maxTagTextLength,
+    maxTagPlaceholder,
+    showArrow = true,
+    suffixIcon,
+    tabIndex,
+    autoFocus,
+    open: openProp,
+    defaultOpen,
+    getPopupContainer: getPopupContainer$1 = getPopupContainer,
+    placement,
+    dropdownClassName,
+    popupClassName,
+    dropdownStyle,
+    dropdownMatchSelectWidth = true,
+    dropdownRender,
+    listHeight = DEFAULT_LIST_HEIGHT,
+    notFoundContent = "No data",
+    clearIcon,
+    clearTooltip,
+    prefixel,
+    suffixel,
+    grey,
+    raw,
+    asFormElement,
+    selectorStyle,
+    size,
+    error,
+    label,
+    description,
+    errorText,
+    tooltip,
+    tooltipConfig,
+    className,
+    style,
+    id,
+    rowKey
+  } = props;
+  const isTags = mode === "tags";
+  const isMultiple = mode === "multiple" || isTags;
+  const isDisabled = Boolean(disabled || readOnly);
+  const hasInput = Boolean(showSearch || isMultiple);
+  const passthroughAttrs = Object.fromEntries(Object.entries(props).filter(([key]) => key.startsWith("data-") || key.startsWith("aria-")));
+  const [internalValue, setInternalValue] = useState(defaultValue);
+  const currentValue = value !== void 0 ? value : internalValue;
+  const selectedValues = toArray(currentValue);
+  const [internalOpen, setInternalOpen] = useState(!!defaultOpen);
+  const isControlledOpen = openProp !== void 0;
+  const isOpen = isControlledOpen ? !!openProp : internalOpen;
+  const [searchQuery, setSearchQuery] = useState("");
+  const isSearchControlled = searchValue !== void 0;
+  const effectiveQuery = isSearchControlled ? searchValue : searchQuery;
+  const inputRef = useRef(null);
+  const selectorRef = useRef(null);
+  const [activeIndex, setActiveIndex] = useState(-1);
+  const baseId = useId();
+  const listboxId = `${baseId}-listbox`;
+  const optionDomId = (index) => `${baseId}-option-${index}`;
+  const {
+    resolvedOptions,
+    displayedOptions
+  } = useSelectOptions({
+    options,
+    children,
+    filterOption,
+    optionFilterProp,
+    effectiveQuery,
+    isTags,
+    selectedValues
+  });
+  const firstEnabledIndex = () => displayedOptions.findIndex((option) => !option.disabled);
+  const lastEnabledIndex = () => {
+    for (let i = displayedOptions.length - 1; i >= 0; i -= 1) {
+      if (!displayedOptions[i].disabled) {
+        return i;
+      }
+    }
+    return -1;
+  };
+  const moveActive = (direction) => {
+    const count = displayedOptions.length;
+    if (count === 0) {
+      return;
+    }
+    setActiveIndex((current) => {
+      let next = current;
+      for (let step = 0; step < count; step += 1) {
+        next = (next + direction + count) % count;
+        if (!displayedOptions[next].disabled) {
+          return next;
+        }
+      }
+      return current;
+    });
+  };
+  useEffect(() => {
+    if (!isOpen) {
+      setActiveIndex(-1);
+      return;
+    }
+    setActiveIndex((current) => {
+      if (current >= 0 && current < displayedOptions.length && !displayedOptions[current].disabled) {
+        return current;
+      }
+      const selected = displayedOptions.findIndex((option) => !option.disabled && selectedValues.includes(option.value));
+      return selected >= 0 ? selected : firstEnabledIndex();
+    });
+  }, [isOpen]);
+  useEffect(() => {
+    if (!isOpen) {
+      return;
+    }
+    setActiveIndex(firstEnabledIndex());
+  }, [effectiveQuery]);
+  useEffect(() => {
+    if (!isOpen || activeIndex < 0) {
+      return;
+    }
+    const activeEl = document.getElementById(optionDomId(activeIndex));
+    activeEl?.scrollIntoView?.({
+      block: "nearest"
+    });
+  }, [activeIndex, isOpen]);
+  useEffect(() => {
+    if (autoFocus && !hasInput) {
+      selectorRef.current?.focus();
+    }
+  }, []);
+  const $size = size === "large" ? "large" : "default";
+  const labelFor = (v) => {
+    const option = findOption(resolvedOptions, v);
+    if (option && optionLabelProp === "value") {
+      return option.value;
+    }
+    return option?.label ?? v;
+  };
+  const setOpen = (next) => {
+    if (isDisabled) {
+      return;
+    }
+    if (!isControlledOpen) {
+      setInternalOpen(next);
+    }
+    onDropdownVisibleChange?.(next);
+  };
+  const commit = (next) => {
+    if (value === void 0) {
+      setInternalValue(next);
+    }
+  };
+  const clearQuery = () => {
+    if (effectiveQuery) {
+      if (!isSearchControlled) {
+        setSearchQuery("");
       }
-    ),
+      onSearch?.("");
+    }
+  };
+  const addValue = (optionValue, option) => {
+    const next = [...selectedValues, optionValue];
+    commit(next);
+    onChange?.(next, next.map((v) => findOption(resolvedOptions, v) ?? {
+      value: v,
+      key: v
+    }));
+    onSelect?.(optionValue, option);
+    clearQuery();
+  };
+  const removeValue = (optionValue) => {
+    const next = selectedValues.filter((v) => v !== optionValue);
+    commit(next);
+    onChange?.(next, next.map((v) => findOption(resolvedOptions, v) ?? {
+      value: v,
+      key: v
+    }));
+    onDeselect?.(optionValue, findOption(resolvedOptions, optionValue));
+  };
+  const handleSelect = (option) => {
+    if (option.disabled) {
+      return;
+    }
+    if (isMultiple) {
+      if (selectedValues.includes(option.value)) {
+        removeValue(option.value);
+      } else {
+        addValue(option.value, option);
+      }
+      inputRef.current?.focus();
+    } else {
+      commit(option.value);
+      onChange?.(option.value, option);
+      onSelect?.(option.value, option);
+      clearQuery();
+      setOpen(false);
+      inputRef.current?.blur();
+    }
+  };
+  const handleClear = (event) => {
+    event.stopPropagation();
+    const cleared = isMultiple ? [] : void 0;
+    commit(cleared);
+    onChange?.(cleared, isMultiple ? [] : void 0);
+    clearQuery();
+    onClear?.();
+  };
+  const handleSearchChange = (event) => {
+    const next = event.currentTarget.value;
+    if (!isSearchControlled) {
+      setSearchQuery(next);
+    }
+    onSearch?.(next);
+    if (!isOpen) {
+      setOpen(true);
+    }
+  };
+  const commitActiveOrTag = () => {
+    const query = effectiveQuery.trim();
+    if (isOpen && activeIndex >= 0 && displayedOptions[activeIndex]) {
+      handleSelect(displayedOptions[activeIndex]);
+    } else if (isTags && query) {
+      if (selectedValues.some((v) => String(v) === query)) {
+        clearQuery();
+      } else {
+        addValue(query);
+      }
+    } else if (!isOpen) {
+      setOpen(true);
+    }
+  };
+  const handleKeyDown = (event) => {
+    if (isDisabled) {
+      return;
+    }
+    const query = effectiveQuery.trim();
+    switch (event.key) {
+      case "ArrowDown":
+        event.preventDefault();
+        if (!isOpen) {
+          setOpen(true);
+        } else {
+          moveActive(1);
+        }
+        return;
+      case "ArrowUp":
+        event.preventDefault();
+        if (!isOpen) {
+          setOpen(true);
+        } else {
+          moveActive(-1);
+        }
+        return;
+      case "Home":
+        if (isOpen) {
+          event.preventDefault();
+          setActiveIndex(firstEnabledIndex());
+        }
+        return;
+      case "End":
+        if (isOpen) {
+          event.preventDefault();
+          setActiveIndex(lastEnabledIndex());
+        }
+        return;
+      case "Escape":
+        if (isOpen) {
+          event.preventDefault();
+          setOpen(false);
+          clearQuery();
+        }
+        return;
+      case "Tab":
+        if (isOpen) {
+          setOpen(false);
+        }
+        return;
+      case "Enter":
+        event.preventDefault();
+        commitActiveOrTag();
+        return;
+      case " ":
+        if (!hasInput) {
+          event.preventDefault();
+          if (!isOpen) {
+            setOpen(true);
+          } else if (activeIndex >= 0 && displayedOptions[activeIndex]) {
+            handleSelect(displayedOptions[activeIndex]);
+          }
+        }
+        return;
+      case "Backspace":
+        if (!effectiveQuery && isMultiple && selectedValues.length > 0) {
+          removeValue(selectedValues[selectedValues.length - 1]);
+        }
+        return;
+      default:
+        if (isTags && query && (tokenSeparators ?? []).includes(event.key)) {
+          event.preventDefault();
+          if (selectedValues.some((v) => String(v) === query)) {
+            clearQuery();
+          } else {
+            addValue(query);
+          }
+        }
+    }
+  };
+  const handleRootFocus = (event) => {
+    if (event.relatedTarget && event.currentTarget.contains(event.relatedTarget)) {
+      return;
+    }
+    onFocus?.(event);
+  };
+  const handleRootBlur = (event) => {
+    if (event.relatedTarget && event.currentTarget.contains(event.relatedTarget)) {
+      return;
+    }
+    onBlur?.(event);
+  };
+  const hasValue = selectedValues.length > 0;
+  const showClear = allowClear && hasValue && !isDisabled;
+  const placeholderStr = typeof placeholder === "string" ? placeholder : void 0;
+  const menu = /* @__PURE__ */ jsx(OptionList, { loading, options: displayedOptions, notFoundContent, listHeight, isMultiple, listboxId, selectedValues, activeIndex, rowKey, optionDomId, onOptionActivate: setActiveIndex, onOptionSelect: handleSelect, onPopupScroll });
+  const handleSearchKeyDown = (event) => {
+    onInputKeyDown?.(event);
+    onKeyDown?.(event);
+    handleKeyDown(event);
+  };
+  const selectorContent = /* @__PURE__ */ jsx(SelectorContent, { isMultiple, showSearch, hasValue, placeholder, placeholderStr, selectedValues, effectiveQuery, labelFor, onRemoveValue: removeValue, maxTagCount, maxTagTextLength, maxTagPlaceholder, inputRef, isDisabled, hasInput, autoFocus, maxLength, id, isOpen, listboxId, activeIndex, optionDomId, onSearchChange: handleSearchChange, onSearchKeyDown: handleSearchKeyDown });
+  const selector = /* @__PURE__ */ jsxs(SelectWrapper, { className: "ds-select-wrapper", style, ref: raw ? ref : void 0, onClick, onFocus: handleRootFocus, onBlur: handleRootBlur, ...passthroughAttrs, children: [
+    !!prefixel && /* @__PURE__ */ jsx(PrefixWrapper, { children: prefixel }),
+    /* @__PURE__ */ jsx(Dropdown, { open: isOpen, onOpenChange: setOpen, disabled: isDisabled, placement, size: typeof dropdownMatchSelectWidth === "number" ? dropdownMatchSelectWidth : dropdownMatchSelectWidth ? "match-trigger" : "min-match-trigger", getPopupContainer: getPopupContainer$1, hideOnItemClick: false, overlayClassName: cx("ds-select-dropdown", "ps__child--consume", dropdownClassName, popupClassName), overlayStyle: dropdownStyle, asChild: true, overlay: dropdownRender ? dropdownRender(menu) : menu, children: /* @__PURE__ */ jsxs(Selector, { ref: selectorRef, className: cx("ds-select", isMultiple && "ds-select-multiple", isOpen && "ds-select-open", isDisabled && "ds-select-disabled", error && "error"), $size, $open: isOpen, $error: Boolean(errorText || error), $disabled: isDisabled, $readOnly: readOnly, $grey: grey, $multiple: isMultiple, $clearable: showClear, $withPrefixel: !!prefixel, $withSuffixel: !!suffixel, $selectorStyle: selectorStyle, "aria-disabled": isDisabled, tabIndex: tabIndex ?? (hasInput || isDisabled ? void 0 : 0), onKeyDown: hasInput ? void 0 : (event) => {
+      onKeyDown?.(event);
+      handleKeyDown(event);
+    }, role: hasInput ? void 0 : "combobox", "aria-expanded": hasInput ? void 0 : isOpen, "aria-haspopup": hasInput ? void 0 : "listbox", "aria-controls": !hasInput && isOpen ? listboxId : void 0, "aria-activedescendant": !hasInput && isOpen && activeIndex >= 0 ? optionDomId(activeIndex) : void 0, children: [
+      selectorContent,
+      suffixIcon ? /* @__PURE__ */ jsx(Arrow, { className: "ds-select-arrow", children: suffixIcon }) : showArrow && /* @__PURE__ */ jsx(Arrow, { className: "ds-select-arrow", $open: isOpen, children: /* @__PURE__ */ jsx(Icon, { component: /* @__PURE__ */ jsx(AngleDownS, {}) }) }),
+      showClear && /* @__PURE__ */ jsx(ClearWrapper, { className: "ds-select-clear", onClick: handleClear, "data-testid": "select-clear", children: /* @__PURE__ */ jsx(Tooltip, { title: clearTooltip, children: /* @__PURE__ */ jsx("span", { children: clearIcon ?? /* @__PURE__ */ jsx(Icon, { component: /* @__PURE__ */ jsx(Close3M, {}), size: 24 }) }) }) })
+    ] }) }),
     !!suffixel && /* @__PURE__ */ jsx(SuffixWrapper, { children: suffixel })
   ] });
-  return raw ? simpleSelect : /* @__PURE__ */ jsx(SelectContainer, { className: "ds-select-container", hasBottomMargin, ref: forwardedRef, children: /* @__PURE__ */ jsx(FormField, { errorText, description, label, tooltip, tooltipConfig, children: simpleSelect }) });
-});
-const SelectWithComponents = Object.assign(Select, {
-  Option: Select$1.Option,
-  OptGroup: Select$1.OptGroup
+  if (raw) {
+    return selector;
+  }
+  const hasBottomMargin = Boolean(asFormElement || errorText || description);
+  return /* @__PURE__ */ jsx(SelectContainer, { className: cx("ds-select-container", className), hasBottomMargin, ref, children: /* @__PURE__ */ jsx(FormField, { errorText, description, label, tooltip, tooltipConfig, children: selector }) });
 });
+SelectInner.displayName = "Select";
+const Select = SelectInner;
+Select.Option = Option;
 export {
-  Select,
-  SelectWithComponents as default
+  Select as default
 };

package/dist/Select.styles.d.ts

@@ -1,17 +1,45 @@
-import { default as React } from 'react';
-import { Props } from './Select.types';
+import { CSSObject } from 'styled-components';
+import { StyledListItem } from '@synerise/ds-list-item';
+type SelectorProps = {
+    $size?: string;
+    $open?: boolean;
+    $error?: boolean;
+    $disabled?: boolean;
+    $readOnly?: boolean;
+    $grey?: boolean;
+    $multiple?: boolean;
+    $clearable?: boolean;
+    $withPrefixel?: boolean;
+    $withSuffixel?: boolean;
+    $selectorStyle?: CSSObject;
+};
 export declare const SelectContainer: import('styled-components').StyledComponent<"div", any, {
     hasBottomMargin?: boolean;
 }, never>;
-export declare const AntdSelect: import('styled-components').StyledComponent<React.ComponentType<Props>, any, {
-    size?: string;
-    withPrefixel?: boolean;
-    withSuffixel?: boolean;
-    readOnly?: boolean;
-}, never>;
+export declare const SelectWrapper: import('styled-components').StyledComponent<"div", any, {}, never>;
 export declare const PrefixWrapper: import('styled-components').StyledComponent<"div", any, {}, never>;
 export declare const SuffixWrapper: import('styled-components').StyledComponent<"div", any, {}, never>;
-export declare const SelectWrapper: import('styled-components').StyledComponent<"div", any, {
-    error?: boolean;
-    grey?: boolean;
+/** The trigger box (the `.ds-select` selector). */
+export declare const Selector: import('styled-components').StyledComponent<"div", any, SelectorProps, never>;
+export declare const SelectionItem: import('styled-components').StyledComponent<"span", any, {}, never>;
+export declare const Placeholder: import('styled-components').StyledComponent<"span", any, {}, never>;
+export declare const Arrow: import('styled-components').StyledComponent<"span", any, {
+    $open?: boolean;
+}, never>;
+export declare const ClearWrapper: import('styled-components').StyledComponent<"span", any, {}, never>;
+export declare const DropdownWrapper: import('styled-components').StyledComponent<"div", any, {}, never>;
+export declare const ScrollList: import('styled-components').StyledComponent<({ children, onClick, maxToShowItems, texts, ...htmlAttributes }: import('@synerise/ds-list-item').ListWrapperProps) => React.JSX.Element, any, {}, never>;
+export declare const Inner: import('styled-components').StyledComponent<"div", any, {}, never>;
+export declare const NotFound: import('styled-components').StyledComponent<"div", any, {}, never>;
+export declare const Loading: import('styled-components').StyledComponent<"div", any, {}, never>;
+export declare const OptionItem: StyledListItem;
+/** In-selector search input (showSearch / multiple / tags). */
+export declare const SearchInputEl: import('styled-components').StyledComponent<"input", any, {
+    $overlay?: boolean;
 }, never>;
+/** Wraps chips + the search input for multiple/tags mode. */
+export declare const MultiValueArea: import('styled-components').StyledComponent<"div", any, {}, never>;
+export declare const Chip: import('styled-components').StyledComponent<"span", any, {}, never>;
+export declare const ChipLabel: import('styled-components').StyledComponent<"span", any, {}, never>;
+export declare const ChipRemove: import('styled-components').StyledComponent<"span", any, {}, never>;
+export {};