@sia.soul/sia-react-ui 0.1.6 → 0.1.8

package/dist/chunk-R7BVDN3Q.js

@@ -1,366 +0,0 @@
-import {
-  Icon,
-  PopupPortal
-} from "./chunk-EJ23MVR6.js";
-import {
-  useControllableState,
-  useFloatingPlaceholder
-} from "./chunk-EJDPRAU2.js";
-
-// src/components/Select.tsx
-import { forwardRef, useDeferredValue, useEffect, useId, useMemo, useRef as useRef2, useState as useState2 } from "react";
-
-// src/components/OverflowTags.tsx
-import { useLayoutEffect, useRef, useState } from "react";
-import { jsx, jsxs } from "react/jsx-runtime";
-function OverflowTags({ items, maxCount, className = "", tagClassName, restClassName = "" }) {
-  const rootRef = useRef(null);
-  const measureRef = useRef(null);
-  const limit = Math.min(items.length, Math.max(0, Math.floor(maxCount) || 0));
-  const [visibleCount, setVisibleCount] = useState(0);
-  useLayoutEffect(() => {
-    const root = rootRef.current;
-    const measure = measureRef.current;
-    if (!root || !measure) return;
-    const update = () => {
-      const gap = Number.parseFloat(getComputedStyle(root).columnGap) || 0;
-      const widths = Array.from(measure.children, (child) => child.getBoundingClientRect().width);
-      let used = 0;
-      let fitting = 0;
-      for (let count2 = 1; count2 <= limit; count2 += 1) {
-        used += widths[count2 - 1] + (count2 > 1 ? gap : 0);
-        const rest = count2 < items.length ? gap + widths[limit + count2] : 0;
-        if (used + rest <= root.clientWidth) fitting = count2;
-      }
-      setVisibleCount((previous) => previous === fitting ? previous : fitting);
-    };
-    update();
-    const observer = new ResizeObserver(update);
-    observer.observe(root);
-    for (const child of measure.children) observer.observe(child);
-    return () => observer.disconnect();
-  }, [items, limit]);
-  const count = Math.min(visibleCount, limit);
-  return /* @__PURE__ */ jsxs("span", { ref: rootRef, className: `sia-overflow-tags ${className}`.trim(), children: [
-    items.slice(0, count).map((item) => /* @__PURE__ */ jsx("span", { className: tagClassName, children: item.label }, item.key)),
-    items.length > count ? /* @__PURE__ */ jsxs("span", { className: `${tagClassName} sia-overflow-tags__rest ${restClassName}`.trim(), children: [
-      "+",
-      items.length - count
-    ] }) : null,
-    /* @__PURE__ */ jsxs("span", { ref: measureRef, className: "sia-overflow-tags__measure", "aria-hidden": "true", children: [
-      items.slice(0, limit).map((item) => /* @__PURE__ */ jsx("span", { className: tagClassName, children: item.label }, item.key)),
-      Array.from({ length: limit + 1 }, (_, index) => /* @__PURE__ */ jsxs("span", { className: `${tagClassName} ${restClassName}`.trim(), children: [
-        "+",
-        items.length - index
-      ] }, `rest-${index}`))
-    ] })
-  ] });
-}
-
-// src/components/Select.tsx
-import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
-function defaultFilterOption(query, option) {
-  return String(option.label).toLowerCase().includes(query.toLowerCase());
-}
-var Select = forwardRef(function Select2({
-  options,
-  mode = "single",
-  value,
-  defaultValue,
-  onChange,
-  placeholder = "\u8BF7\u9009\u62E9",
-  placeholderMode,
-  size = "medium",
-  status = "default",
-  allowClear = false,
-  loading = false,
-  showSearch = false,
-  allowInput = false,
-  inputMaxLength,
-  searchPlaceholder = "\u641C\u7D22\u9009\u9879",
-  onSearch,
-  filterOption = defaultFilterOption,
-  showSelectAll = false,
-  maxTagCount = 2,
-  virtual = true,
-  virtualThreshold = 100,
-  listHeight = 256,
-  optionHeight = 34,
-  disabled,
-  className = "",
-  id,
-  notFoundContent = "\u6682\u65E0\u6570\u636E",
-  onKeyDown,
-  ...props
-}, forwardedRef) {
-  const fallbackId = useId();
-  const selectId = id ?? fallbackId;
-  const listboxId = `${selectId}-listbox`;
-  const rootRef = useRef2(null);
-  const popupRef = useRef2(null);
-  const searchRef = useRef2(null);
-  const listRef = useRef2(null);
-  const [open, setOpen] = useState2(false);
-  const [query, setQuery] = useState2("");
-  const [activeIndex, setActiveIndex] = useState2(-1);
-  const [scrollTop, setScrollTop] = useState2(0);
-  const deferredQuery = useDeferredValue(query.trim());
-  const initialValue = defaultValue === void 0 ? mode === "multiple" ? [] : null : defaultValue;
-  const [currentValue, setCurrentValue] = useControllableState({
-    value,
-    defaultValue: initialValue,
-    onChange: (nextValue) => {
-      if (Array.isArray(nextValue)) {
-        const selectedOptions2 = nextValue.map((selectedValue) => options.find((option) => option.value === selectedValue) ?? (allowInput ? { label: String(selectedValue), value: selectedValue } : void 0)).filter((option) => option !== void 0);
-        onChange?.(nextValue, selectedOptions2);
-      } else {
-        const selectedOption = nextValue === null ? null : options.find((option) => option.value === nextValue) ?? (allowInput ? { label: String(nextValue), value: nextValue } : null);
-        onChange?.(nextValue, selectedOption);
-      }
-    }
-  });
-  const selectedValues = useMemo(() => {
-    if (mode === "multiple") return Array.isArray(currentValue) ? currentValue : currentValue === null ? [] : [currentValue];
-    return Array.isArray(currentValue) ? currentValue.slice(0, 1) : currentValue === null ? [] : [currentValue];
-  }, [currentValue, mode]);
-  const selectedValueSet = useMemo(() => new Set(selectedValues), [selectedValues]);
-  const availableOptions = useMemo(() => {
-    if (!allowInput) return options;
-    const optionValueSet = new Set(options.map((option) => option.value));
-    const selectedCustomOptions = selectedValues.filter((selectedValue) => !optionValueSet.has(selectedValue)).map((selectedValue) => ({ label: String(selectedValue), value: selectedValue }));
-    return selectedCustomOptions.length ? [...selectedCustomOptions, ...options] : options;
-  }, [allowInput, options, selectedValues]);
-  const selectedOptions = useMemo(() => selectedValues.map((selectedValue) => availableOptions.find((option) => option.value === selectedValue)).filter((option) => option !== void 0), [availableOptions, selectedValues]);
-  const filteredOptions = useMemo(() => deferredQuery ? availableOptions.filter((option) => filterOption(deferredQuery, option)) : availableOptions, [availableOptions, deferredQuery, filterOption]);
-  const inputValue = query.trim();
-  const exactInputOption = inputValue ? availableOptions.find((option) => String(option.value).toLowerCase() === inputValue.toLowerCase() || typeof option.label === "string" && option.label.toLowerCase() === inputValue.toLowerCase()) : void 0;
-  const canSubmitInput = allowInput && Boolean(inputValue) && !exactInputOption;
-  const multiple = mode === "multiple";
-  const hasValue = selectedOptions.length > 0;
-  const virtualEnabled = virtual && filteredOptions.length >= virtualThreshold;
-  const overscan = 3;
-  const visibleCount = Math.ceil(listHeight / optionHeight) + overscan * 2;
-  const virtualStart = virtualEnabled ? Math.max(0, Math.floor(scrollTop / optionHeight) - overscan) : 0;
-  const virtualEnd = virtualEnabled ? Math.min(filteredOptions.length, virtualStart + visibleCount) : filteredOptions.length;
-  const renderedOptions = virtualEnabled ? filteredOptions.slice(virtualStart, virtualEnd) : filteredOptions;
-  const enabledFilteredOptions = filteredOptions.filter((option) => !option.disabled);
-  const allFilteredSelected = enabledFilteredOptions.length > 0 && enabledFilteredOptions.every((option) => selectedValueSet.has(option.value));
-  useEffect(() => {
-    if (!open) return void 0;
-    function closeFromOutside(event) {
-      const target = event.target;
-      if (!rootRef.current?.contains(target) && !popupRef.current?.contains(target)) closeDropdown();
-    }
-    document.addEventListener("mousedown", closeFromOutside);
-    return () => document.removeEventListener("mousedown", closeFromOutside);
-  }, [open]);
-  useEffect(() => {
-    if (open && (showSearch || allowInput)) searchRef.current?.focus();
-  }, [allowInput, open, showSearch]);
-  function firstEnabledIndex() {
-    return filteredOptions.findIndex((option) => !option.disabled);
-  }
-  function closeDropdown() {
-    setOpen(false);
-    setQuery("");
-    setScrollTop(0);
-  }
-  function openDropdown() {
-    if (disabled || loading) return;
-    const selectedIndex = filteredOptions.findIndex((option) => selectedValueSet.has(option.value) && !option.disabled);
-    setActiveIndex(selectedIndex >= 0 ? selectedIndex : firstEnabledIndex());
-    setOpen(true);
-  }
-  function keepActiveVisible(index) {
-    if (!virtualEnabled || !listRef.current) return;
-    const optionTop = index * optionHeight;
-    const optionBottom = optionTop + optionHeight;
-    const viewportTop = listRef.current.scrollTop;
-    const viewportBottom = viewportTop + listHeight;
-    const nextScrollTop = optionTop < viewportTop ? optionTop : optionBottom > viewportBottom ? optionBottom - listHeight : viewportTop;
-    if (nextScrollTop !== viewportTop) {
-      listRef.current.scrollTop = nextScrollTop;
-      setScrollTop(nextScrollTop);
-    }
-  }
-  function moveActive(direction) {
-    if (filteredOptions.length === 0) return;
-    let nextIndex = activeIndex;
-    for (let index = 0; index < filteredOptions.length; index += 1) {
-      nextIndex = (nextIndex + direction + filteredOptions.length) % filteredOptions.length;
-      if (!filteredOptions[nextIndex]?.disabled) {
-        setActiveIndex(nextIndex);
-        keepActiveVisible(nextIndex);
-        return;
-      }
-    }
-  }
-  function selectOption(option) {
-    if (option.disabled) return;
-    if (multiple) {
-      const nextValues = selectedValueSet.has(option.value) ? selectedValues.filter((item) => item !== option.value) : [...selectedValues, option.value];
-      setCurrentValue(nextValues);
-      return;
-    }
-    setCurrentValue(option.value);
-    closeDropdown();
-  }
-  function selectAllFiltered() {
-    if (allFilteredSelected) return;
-    const nextValues = [...selectedValues];
-    const nextValueSet = new Set(nextValues);
-    enabledFilteredOptions.forEach((option) => {
-      if (!nextValueSet.has(option.value)) nextValues.push(option.value);
-    });
-    setCurrentValue(nextValues);
-  }
-  function submitInputValue() {
-    if (!allowInput || !inputValue) return;
-    selectOption(exactInputOption ?? { label: inputValue, value: inputValue });
-    if (multiple) {
-      setQuery("");
-      setActiveIndex(-1);
-      setScrollTop(0);
-    }
-  }
-  function clearSelection() {
-    setCurrentValue(multiple ? [] : null);
-  }
-  function handleInteractionKeyDown(event, fromSearch = false) {
-    if (event.key === "ArrowDown" || event.key === "ArrowUp") {
-      event.preventDefault();
-      if (!open) openDropdown();
-      else moveActive(event.key === "ArrowDown" ? 1 : -1);
-    } else if (event.key === "Enter" || event.key === " " && !fromSearch) {
-      event.preventDefault();
-      if (!open) openDropdown();
-      else if (activeIndex >= 0 && filteredOptions[activeIndex]) selectOption(filteredOptions[activeIndex]);
-      else if (fromSearch && allowInput) submitInputValue();
-    } else if (event.key === "Escape") {
-      closeDropdown();
-    } else if (event.key === "Home" && open && !fromSearch) {
-      event.preventDefault();
-      const firstIndex = firstEnabledIndex();
-      setActiveIndex(firstIndex);
-      keepActiveVisible(firstIndex);
-    } else if (event.key === "End" && open && !fromSearch) {
-      event.preventDefault();
-      const reversedIndex = [...filteredOptions].reverse().findIndex((option) => !option.disabled);
-      const lastIndex = reversedIndex < 0 ? -1 : filteredOptions.length - 1 - reversedIndex;
-      setActiveIndex(lastIndex);
-      keepActiveVisible(lastIndex);
-    }
-  }
-  function handleTriggerKeyDown(event) {
-    handleInteractionKeyDown(event);
-    onKeyDown?.(event);
-  }
-  function handleSearchChange(event) {
-    const nextQuery = event.target.value;
-    setQuery(nextQuery);
-    setActiveIndex(-1);
-    setScrollTop(0);
-    if (listRef.current) listRef.current.scrollTop = 0;
-    onSearch?.(nextQuery);
-  }
-  function clearValue(event) {
-    event.stopPropagation();
-    clearSelection();
-  }
-  function handleListScroll(event) {
-    if (virtualEnabled) setScrollTop(event.currentTarget.scrollTop);
-  }
-  function renderOption(option, renderedIndex) {
-    const optionIndex = virtualEnabled ? virtualStart + renderedIndex : renderedIndex;
-    const selected = selectedValueSet.has(option.value);
-    return /* @__PURE__ */ jsxs2(
-      "div",
-      {
-        id: `${listboxId}-${optionIndex}`,
-        className: `sia-select__option${selected ? " is-selected" : ""}${optionIndex === activeIndex ? " is-active" : ""}${option.disabled ? " is-disabled" : ""}`,
-        role: "option",
-        "aria-selected": selected,
-        "aria-disabled": option.disabled || void 0,
-        style: virtualEnabled ? { position: "absolute", top: optionIndex * optionHeight, right: 0, left: 0, height: optionHeight } : void 0,
-        onMouseEnter: () => !option.disabled && setActiveIndex(optionIndex),
-        onMouseDown: (event) => event.preventDefault(),
-        onClick: () => selectOption(option),
-        children: [
-          /* @__PURE__ */ jsx2("span", { children: option.label }),
-          selected ? /* @__PURE__ */ jsx2(Icon, { name: "check", size: 15 }) : null
-        ]
-      },
-      `${typeof option.value}-${option.value}`
-    );
-  }
-  const floating = useFloatingPlaceholder({ mode: placeholderMode, placeholder, filled: hasValue, active: open });
-  return /* @__PURE__ */ jsxs2("div", { ref: rootRef, className: `sia-select sia-select--${size} sia-select--${status}${open ? " is-open" : ""}${disabled ? " is-disabled" : ""}${multiple ? " sia-select--multiple" : ""} ${className}`.trim(), children: [
-    /* @__PURE__ */ jsxs2(
-      "button",
-      {
-        ...props,
-        ref: forwardedRef,
-        className: `sia-select__trigger${floating.className}`,
-        id: selectId,
-        type: "button",
-        role: "combobox",
-        "aria-controls": listboxId,
-        "aria-expanded": open,
-        "aria-haspopup": "listbox",
-        "aria-activedescendant": open && activeIndex >= 0 ? `${listboxId}-${activeIndex}` : void 0,
-        "aria-invalid": status === "error" || void 0,
-        disabled,
-        onClick: () => open ? closeDropdown() : openDropdown(),
-        onKeyDown: handleTriggerKeyDown,
-        children: [
-          multiple && hasValue ? /* @__PURE__ */ jsx2(OverflowTags, { className: "sia-select__tags", tagClassName: "sia-select__tag", restClassName: "sia-select__tag--rest", maxCount: maxTagCount, items: selectedOptions.map((option) => ({ key: `${typeof option.value}-${option.value}`, label: option.label })) }) : /* @__PURE__ */ jsx2("span", { className: `sia-select__value${hasValue ? "" : " is-placeholder"}`, children: selectedOptions[0]?.label ?? placeholder }),
-          loading ? /* @__PURE__ */ jsx2("span", { className: "sia-select__spinner", "aria-hidden": "true" }) : null,
-          floating.label,
-          /* @__PURE__ */ jsx2(Icon, { className: "sia-select__arrow", name: "chevron-down", size: 15 })
-        ]
-      }
-    ),
-    allowClear && hasValue && !disabled && !loading ? /* @__PURE__ */ jsx2("button", { className: "sia-select__clear", type: "button", "aria-label": "\u6E05\u7A7A\u9009\u62E9", onClick: clearValue, children: /* @__PURE__ */ jsx2(Icon, { name: "circle-close", variant: "filled", size: 15 }) }) : null,
-    /* @__PURE__ */ jsxs2(PopupPortal, { ref: popupRef, anchorRef: rootRef, open, className: "sia-select__dropdown", children: [
-      showSearch || allowInput ? /* @__PURE__ */ jsxs2("label", { className: "sia-select__search", children: [
-        /* @__PURE__ */ jsx2(Icon, { name: "search", size: 15 }),
-        /* @__PURE__ */ jsx2("input", { ref: searchRef, value: query, maxLength: inputMaxLength, onChange: handleSearchChange, onKeyDown: (event) => handleInteractionKeyDown(event, true), placeholder: searchPlaceholder, "aria-label": searchPlaceholder })
-      ] }) : null,
-      canSubmitInput ? /* @__PURE__ */ jsxs2("button", { type: "button", className: "sia-select__input-option", onMouseDown: (event) => event.preventDefault(), onClick: submitInputValue, children: [
-        /* @__PURE__ */ jsx2(Icon, { name: "plus", size: 14 }),
-        /* @__PURE__ */ jsxs2("span", { children: [
-          "\u4F7F\u7528\u201C",
-          inputValue,
-          "\u201D"
-        ] })
-      ] }) : null,
-      multiple && showSelectAll ? /* @__PURE__ */ jsxs2("div", { className: "sia-select__actions", children: [
-        /* @__PURE__ */ jsx2("button", { type: "button", disabled: allFilteredSelected || enabledFilteredOptions.length === 0, onClick: selectAllFiltered, children: "\u5168\u9009" }),
-        /* @__PURE__ */ jsx2("button", { type: "button", disabled: !hasValue, onClick: clearSelection, children: "\u6E05\u9664" }),
-        /* @__PURE__ */ jsxs2("span", { children: [
-          selectedValues.length,
-          " \u9879\u5DF2\u9009"
-        ] })
-      ] }) : null,
-      /* @__PURE__ */ jsx2(
-        "div",
-        {
-          ref: listRef,
-          id: listboxId,
-          className: "sia-select__list",
-          role: "listbox",
-          "aria-labelledby": selectId,
-          "aria-multiselectable": multiple || void 0,
-          style: { maxHeight: listHeight },
-          onScroll: handleListScroll,
-          children: filteredOptions.length > 0 ? virtualEnabled ? /* @__PURE__ */ jsx2("div", { className: "sia-select__virtual-space", style: { height: filteredOptions.length * optionHeight }, children: renderedOptions.map(renderOption) }) : renderedOptions.map(renderOption) : canSubmitInput ? null : /* @__PURE__ */ jsx2("div", { className: "sia-select__empty", children: notFoundContent })
-        }
-      )
-    ] })
-  ] });
-});
-
-export {
-  OverflowTags,
-  Select
-};