@expcat/tigercat-react 1.4.0 → 2.0.0-preview.1

package/dist/chunk-KYNWNTGO.js

@@ -1,649 +0,0 @@
-"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _nullishCoalesce(lhs, rhsFn) { if (lhs != null) { return lhs; } else { return rhsFn(); } } function _optionalChain(ops) { let lastAccessLHS = undefined; let value = ops[0]; let i = 1; while (i < ops.length) { const op = ops[i]; const fn = ops[i + 1]; i += 2; if ((op === 'optionalAccess' || op === 'optionalCall') && value == null) { return undefined; } if (op === 'access' || op === 'optionalAccess') { lastAccessLHS = value; value = fn(value); } else if (op === 'call' || op === 'optionalCall') { value = fn((...args) => value.call(lastAccessLHS, ...args)); lastAccessLHS = undefined; } } return value; }
-
-var _chunkTDODFBBOjs = require('./chunk-TDODFBBO.js');
-
-// src/components/Select.tsx
-
-
-
-
-var _tigercatcore = require('@expcat/tigercat-core');
-
-// src/components/Select/state.ts
-var _react = require('react');
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-var SELECT_KEYS = /* @__PURE__ */ new Set([
-  "options",
-  "size",
-  "disabled",
-  "placeholder",
-  "searchable",
-  "clearable",
-  "noOptionsText",
-  "noDataText",
-  "maxTagCount",
-  "virtual",
-  "remote",
-  "searchDebounce",
-  "creatable",
-  "createOptionText",
-  "listHeight",
-  "onSearch",
-  "onCreate",
-  "className",
-  "value",
-  "onChange",
-  "multiple",
-  "locale"
-]);
-function useSelectState(props) {
-  const {
-    options = [],
-    size = "md",
-    disabled = false,
-    placeholder = "Select an option",
-    searchable = false,
-    clearable = true,
-    noOptionsText,
-    noDataText,
-    maxTagCount,
-    remote = false,
-    searchDebounce = 0,
-    creatable = false,
-    createOptionText = "Create",
-    onSearch,
-    onCreate,
-    className,
-    value,
-    onChange,
-    multiple,
-    locale
-  } = props;
-  const isMultiple = multiple === true;
-  const config = _chunkTDODFBBOjs.useTigerConfig.call(void 0, );
-  const mergedLocale = _react.useMemo.call(void 0, 
-    () => _tigercatcore.mergeTigerLocale.call(void 0, config.locale, locale),
-    [config.locale, locale]
-  );
-  const divProps = {};
-  for (const [k, v] of Object.entries(props)) {
-    if (!SELECT_KEYS.has(k)) divProps[k] = v;
-  }
-  const instanceId = _react.useId.call(void 0, );
-  const listboxId = `tiger-select-listbox-${instanceId}`;
-  const [isOpen, setIsOpen] = _react.useState.call(void 0, false);
-  const [searchQuery, setSearchQuery] = _react.useState.call(void 0, "");
-  const [activeIndex, setActiveIndex] = _react.useState.call(void 0, -1);
-  const [createdOptions, setCreatedOptions] = _react.useState.call(void 0, []);
-  const dropdownRef = _react.useRef.call(void 0, null);
-  const triggerRef = _react.useRef.call(void 0, null);
-  const searchInputRef = _react.useRef.call(void 0, null);
-  const searchDebouncerRef = _react.useRef.call(void 0, null);
-  const filteredOptions = _react.useMemo.call(void 0, 
-    () => _tigercatcore.resolveSelectFilteredOptions.call(void 0, options, searchQuery, { searchable, remote }),
-    [options, remote, searchable, searchQuery]
-  );
-  const flatFilteredOptions = _react.useMemo.call(void 0, 
-    () => _tigercatcore.flattenSelectOptions.call(void 0, filteredOptions),
-    [filteredOptions]
-  );
-  const creatableOption = _react.useMemo.call(void 0, 
-    () => _tigercatcore.resolveCreatableSelectOption.call(void 0, [...options, ...createdOptions], searchQuery, {
-      creatable: creatable && searchable
-    }),
-    [creatable, createdOptions, options, searchable, searchQuery]
-  );
-  const flatSelectableOptions = _react.useMemo.call(void 0, 
-    () => creatableOption ? [...flatFilteredOptions, creatableOption] : flatFilteredOptions,
-    [creatableOption, flatFilteredOptions]
-  );
-  const allOptions = _react.useMemo.call(void 0, () => _tigercatcore.flattenSelectOptions.call(void 0, options), [options]);
-  const displayText = _react.useMemo.call(void 0, () => {
-    if (isMultiple) {
-      const values = Array.isArray(value) ? value : [];
-      if (values.length === 0) return placeholder;
-      const labels = [...allOptions, ...createdOptions].filter((opt) => values.includes(opt.value)).map((opt) => opt.label);
-      if (maxTagCount !== void 0 && labels.length > maxTagCount) {
-        const visible = labels.slice(0, maxTagCount);
-        return `${visible.join(", ")} +${labels.length - maxTagCount}`;
-      }
-      return labels.join(", ");
-    }
-    if (value === void 0 || value === null || value === "") return placeholder;
-    return _nullishCoalesce(_optionalChain([[...allOptions, ...createdOptions], 'access', _ => _.find, 'call', _2 => _2((opt) => opt.value === value), 'optionalAccess', _3 => _3.label]), () => ( placeholder));
-  }, [isMultiple, value, allOptions, createdOptions, placeholder, maxTagCount]);
-  const showClearButton = _react.useMemo.call(void 0, 
-    () => clearable && !disabled && value !== void 0 && value !== null && value !== "" && (!Array.isArray(value) || value.length > 0),
-    [clearable, disabled, value]
-  );
-  const isSelected = (option) => {
-    if (isMultiple) {
-      return (Array.isArray(value) ? value : []).includes(option.value);
-    }
-    return value === option.value;
-  };
-  const getOptionId = (index) => `tiger-select-option-${instanceId}-${index}`;
-  const findFirstEnabledIndex = _react.useCallback.call(void 0, 
-    () => _tigercatcore.findFirstEnabledIndex.call(void 0, flatSelectableOptions),
-    [flatSelectableOptions]
-  );
-  const findLastEnabledIndex = () => _tigercatcore.findLastEnabledIndex.call(void 0, flatSelectableOptions);
-  const findNextEnabledIndex = (current, direction) => _tigercatcore.findNextEnabledIndex.call(void 0, flatSelectableOptions, current, direction);
-  const focusOptionAt = _react.useCallback.call(void 0, (index) => {
-    if (index < 0) {
-      return;
-    }
-    requestAnimationFrame(() => {
-      const el = _optionalChain([dropdownRef, 'access', _4 => _4.current, 'optionalAccess', _5 => _5.querySelector, 'call', _6 => _6(`[data-option-index="${index}"]`)]);
-      _optionalChain([el, 'optionalAccess', _7 => _7.focus, 'call', _8 => _8()]);
-      _optionalChain([el, 'optionalAccess', _9 => _9.scrollIntoView, 'call', _10 => _10({ block: "nearest" })]);
-    });
-  }, []);
-  const setActiveAndFocus = (index) => {
-    setActiveIndex(index);
-    focusOptionAt(index);
-  };
-  const closeDropdown = () => {
-    setIsOpen(false);
-    setSearchQuery("");
-    setActiveIndex(-1);
-  };
-  const toggleDropdown = () => {
-    if (!disabled) {
-      setIsOpen((prev) => !prev);
-    }
-  };
-  const getActiveOption = () => {
-    if (activeIndex < 0) {
-      return void 0;
-    }
-    return flatSelectableOptions[activeIndex];
-  };
-  const selectActiveOption = () => {
-    const option = getActiveOption();
-    if (!option || option.disabled) {
-      return;
-    }
-    selectOption(option);
-  };
-  const selectOption = (option) => {
-    if (option.disabled) {
-      return;
-    }
-    if (creatableOption && option.value === creatableOption.value) {
-      setCreatedOptions((current) => [...current, option]);
-      _optionalChain([onCreate, 'optionalCall', _11 => _11(option)]);
-    }
-    if (isMultiple) {
-      const currentValue = Array.isArray(value) ? value : [];
-      const nextValue = currentValue.includes(option.value) ? currentValue.filter((v) => v !== option.value) : [...currentValue, option.value];
-      _optionalChain([onChange, 'optionalCall', _12 => _12(nextValue)]);
-      return;
-    }
-    ;
-    _optionalChain([onChange, 'optionalCall', _13 => _13(option.value)]);
-    closeDropdown();
-    requestAnimationFrame(() => {
-      _optionalChain([triggerRef, 'access', _14 => _14.current, 'optionalAccess', _15 => _15.focus, 'call', _16 => _16()]);
-    });
-  };
-  const clearSelection = (event) => {
-    event.stopPropagation();
-    if (isMultiple) {
-      ;
-      _optionalChain([onChange, 'optionalCall', _17 => _17([])]);
-      return;
-    }
-    ;
-    _optionalChain([onChange, 'optionalCall', _18 => _18(void 0)]);
-  };
-  const handleSearchInput = (event) => {
-    const query = event.target.value;
-    setSearchQuery(query);
-    _optionalChain([searchDebouncerRef, 'access', _19 => _19.current, 'optionalAccess', _20 => _20.schedule, 'call', _21 => _21(query)]);
-  };
-  _react.useEffect.call(void 0, () => {
-    _optionalChain([searchDebouncerRef, 'access', _22 => _22.current, 'optionalAccess', _23 => _23.cancel, 'call', _24 => _24()]);
-    searchDebouncerRef.current = _tigercatcore.createSelectSearchDebouncer.call(void 0, {
-      delay: searchDebounce,
-      onSearch: (query) => _optionalChain([onSearch, 'optionalCall', _25 => _25(query)])
-    });
-    return () => _optionalChain([searchDebouncerRef, 'access', _26 => _26.current, 'optionalAccess', _27 => _27.cancel, 'call', _28 => _28()]);
-  }, [onSearch, searchDebounce]);
-  const handleTriggerKeyDown = (event) => {
-    if (disabled) {
-      return;
-    }
-    switch (event.key) {
-      case "ArrowDown": {
-        event.preventDefault();
-        if (!isOpen) {
-          setIsOpen(true);
-          return;
-        }
-        const next = findNextEnabledIndex(activeIndex, 1);
-        setActiveAndFocus(next);
-        return;
-      }
-      case "ArrowUp": {
-        event.preventDefault();
-        if (!isOpen) {
-          setIsOpen(true);
-          return;
-        }
-        const next = findNextEnabledIndex(activeIndex, -1);
-        setActiveAndFocus(next);
-        return;
-      }
-      case "Enter":
-      case " ": {
-        event.preventDefault();
-        if (!isOpen) {
-          setIsOpen(true);
-          return;
-        }
-        selectActiveOption();
-        return;
-      }
-      case "Escape": {
-        if (isOpen) {
-          event.preventDefault();
-          closeDropdown();
-        }
-        return;
-      }
-      default:
-        return;
-    }
-  };
-  const handleDropdownKeyDown = (event) => {
-    switch (event.key) {
-      case "ArrowDown": {
-        event.preventDefault();
-        const next = findNextEnabledIndex(activeIndex, 1);
-        setActiveAndFocus(next);
-        return;
-      }
-      case "ArrowUp": {
-        event.preventDefault();
-        const next = findNextEnabledIndex(activeIndex, -1);
-        setActiveAndFocus(next);
-        return;
-      }
-      case "Home": {
-        event.preventDefault();
-        const next = findFirstEnabledIndex();
-        setActiveAndFocus(next);
-        return;
-      }
-      case "End": {
-        event.preventDefault();
-        const next = findLastEnabledIndex();
-        setActiveAndFocus(next);
-        return;
-      }
-      case "Enter":
-      case " ": {
-        event.preventDefault();
-        selectActiveOption();
-        return;
-      }
-      case "Escape": {
-        event.preventDefault();
-        closeDropdown();
-        _optionalChain([triggerRef, 'access', _29 => _29.current, 'optionalAccess', _30 => _30.focus, 'call', _31 => _31()]);
-        return;
-      }
-      case "Tab": {
-        closeDropdown();
-        return;
-      }
-      default:
-        return;
-    }
-  };
-  const handleSearchKeyDown = (event) => {
-    switch (event.key) {
-      case " ": {
-        event.stopPropagation();
-        return;
-      }
-      case "ArrowDown": {
-        event.preventDefault();
-        event.stopPropagation();
-        const next = activeIndex >= 0 ? activeIndex : findFirstEnabledIndex();
-        setActiveAndFocus(next);
-        return;
-      }
-      case "ArrowUp": {
-        event.preventDefault();
-        event.stopPropagation();
-        const next = activeIndex >= 0 ? activeIndex : findLastEnabledIndex();
-        setActiveAndFocus(next);
-        return;
-      }
-      case "Enter": {
-        if (activeIndex >= 0) {
-          event.preventDefault();
-          event.stopPropagation();
-          selectActiveOption();
-        }
-        return;
-      }
-      case "Escape": {
-        event.preventDefault();
-        event.stopPropagation();
-        closeDropdown();
-        _optionalChain([triggerRef, 'access', _32 => _32.current, 'optionalAccess', _33 => _33.focus, 'call', _34 => _34()]);
-        return;
-      }
-      default:
-        return;
-    }
-  };
-  _react.useEffect.call(void 0, () => {
-    if (isOpen && searchable) {
-      _optionalChain([searchInputRef, 'access', _35 => _35.current, 'optionalAccess', _36 => _36.focus, 'call', _37 => _37()]);
-    }
-  }, [isOpen, searchable]);
-  _react.useEffect.call(void 0, () => {
-    if (!isOpen) {
-      return;
-    }
-    if (flatSelectableOptions.length === 0) {
-      setActiveIndex(-1);
-      return;
-    }
-    const selectedIndex = (() => {
-      if (isMultiple) {
-        const values = Array.isArray(value) ? value : [];
-        if (values.length === 0) {
-          return -1;
-        }
-        return flatSelectableOptions.findIndex((opt) => values.includes(opt.value) && !opt.disabled);
-      }
-      if (value === void 0 || value === null || value === "") {
-        return -1;
-      }
-      return flatSelectableOptions.findIndex((opt) => opt.value === value && !opt.disabled);
-    })();
-    const nextActive = selectedIndex >= 0 ? selectedIndex : findFirstEnabledIndex();
-    setActiveIndex(nextActive);
-    if (!searchable) {
-      focusOptionAt(nextActive);
-    }
-  }, [
-    isOpen,
-    searchable,
-    flatSelectableOptions,
-    isMultiple,
-    value,
-    findFirstEnabledIndex,
-    focusOptionAt
-  ]);
-  _react.useEffect.call(void 0, () => {
-    if (!isOpen) {
-      return;
-    }
-    const handleClickOutside = (event) => {
-      const target = event.target;
-      if (dropdownRef.current && triggerRef.current && !dropdownRef.current.contains(target) && !triggerRef.current.contains(target)) {
-        closeDropdown();
-      }
-    };
-    document.addEventListener("click", handleClickOutside);
-    return () => {
-      document.removeEventListener("click", handleClickOutside);
-    };
-  }, [isOpen]);
-  return {
-    listboxId,
-    getOptionId,
-    isOpen,
-    searchQuery,
-    activeIndex,
-    setActiveIndex,
-    dropdownRef,
-    triggerRef,
-    searchInputRef,
-    isMultiple,
-    size,
-    disabled,
-    placeholder,
-    searchable,
-    clearable,
-    noDataText: _tigercatcore.resolveLocaleText.call(void 0, 
-      "No options available",
-      noDataText,
-      _optionalChain([mergedLocale, 'optionalAccess', _38 => _38.common, 'optionalAccess', _39 => _39.emptyText])
-    ),
-    noOptionsText: _tigercatcore.resolveLocaleText.call(void 0, 
-      "No options found",
-      noOptionsText,
-      _optionalChain([mergedLocale, 'optionalAccess', _40 => _40.common, 'optionalAccess', _41 => _41.emptyText])
-    ),
-    createOptionText,
-    className,
-    divProps,
-    searchPlaceholder: _tigercatcore.resolveLocaleText.call(void 0, "Search...", _optionalChain([mergedLocale, 'optionalAccess', _42 => _42.common, 'optionalAccess', _43 => _43.searchPlaceholder])),
-    filteredOptions,
-    flatSelectableOptions,
-    creatableOption,
-    hasOptions: filteredOptions.length > 0,
-    optionsLength: options.length,
-    displayText,
-    showClearButton,
-    containerClasses: _tigercatcore.classNames.call(void 0, _tigercatcore.selectBaseClasses, className),
-    triggerClasses: _tigercatcore.getSelectTriggerClasses.call(void 0, size, disabled, isOpen),
-    isSelected,
-    selectOption,
-    clearSelection,
-    toggleDropdown,
-    handleSearchInput,
-    handleTriggerKeyDown,
-    handleDropdownKeyDown,
-    handleSearchKeyDown
-  };
-}
-
-// src/components/Select/render-option.tsx
-
-
-
-
-
-
-
-
-// src/components/Select/icons.tsx
-
-
-
-
-
-
-var _jsxruntime = require('react/jsx-runtime');
-var SelectIcon = ({ path, className }) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-  "svg",
-  {
-    className,
-    xmlns: "http://www.w3.org/2000/svg",
-    viewBox: _tigercatcore.icon20ViewBox,
-    fill: "currentColor",
-    children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "path", { fillRule: "evenodd", d: path, clipRule: "evenodd" })
-  }
-);
-var SelectCheckIcon = () => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-  SelectIcon,
-  {
-    path: _tigercatcore.checkSolidIcon20PathD,
-    className: "w-5 h-5 text-[var(--tiger-select-check-icon,var(--tiger-primary,#2563eb))]"
-  }
-);
-var SelectClearIcon = () => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-  SelectIcon,
-  {
-    path: _tigercatcore.closeSolidIcon20PathD,
-    className: "w-4 h-4 text-[var(--tiger-select-icon,var(--tiger-text-muted,#9ca3af))] hover:text-[var(--tiger-select-icon-hover,var(--tiger-text-muted,#6b7280))]"
-  }
-);
-var SelectChevronIcon = () => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-  SelectIcon,
-  {
-    path: _tigercatcore.chevronDownSolidIcon20PathD,
-    className: "w-5 h-5 text-[var(--tiger-select-icon,var(--tiger-text-muted,#9ca3af))] transition-transform"
-  }
-);
-
-// src/components/Select/render-option.tsx
-
-function renderOption(ctx, option, index, displayLabel = option.label) {
-  const optionSelected = ctx.isSelected(option);
-  const optionActive = index === ctx.activeIndex;
-  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-    "div",
-    {
-      id: ctx.getOptionId(index),
-      "data-option-index": index,
-      role: "option",
-      "aria-selected": optionSelected,
-      "aria-disabled": option.disabled ? true : void 0,
-      tabIndex: optionActive ? 0 : -1,
-      className: _tigercatcore.getSelectOptionClasses.call(void 0, optionSelected, !!option.disabled, ctx.size),
-      onMouseEnter: () => {
-        if (!option.disabled) {
-          ctx.setActiveIndex(index);
-        }
-      },
-      onClick: () => ctx.selectOption(option),
-      children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "span", { className: "flex items-center justify-between w-full", children: [
-        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { children: displayLabel }),
-        optionSelected && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, SelectCheckIcon, {})
-      ] })
-    },
-    option.value
-  );
-}
-function renderOptions(ctx) {
-  if (!ctx.hasOptions && !ctx.creatableOption) {
-    return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: _tigercatcore.selectEmptyStateClasses, children: ctx.optionsLength === 0 ? ctx.noDataText : ctx.noOptionsText });
-  }
-  let optionIndex = -1;
-  const optionNodes = ctx.filteredOptions.map((item) => {
-    if (_tigercatcore.isOptionGroup.call(void 0, item)) {
-      return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { children: [
-        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: _tigercatcore.selectGroupLabelClasses, children: item.label }),
-        item.options.map((option) => {
-          optionIndex += 1;
-          return renderOption(ctx, option, optionIndex);
-        })
-      ] }, item.label);
-    }
-    optionIndex += 1;
-    return renderOption(ctx, item, optionIndex);
-  });
-  if (ctx.creatableOption) {
-    optionIndex += 1;
-    optionNodes.push(
-      renderOption(
-        ctx,
-        ctx.creatableOption,
-        optionIndex,
-        _tigercatcore.getCreateSelectOptionLabel.call(void 0, ctx.creatableOption, ctx.createOptionText)
-      )
-    );
-  }
-  return optionNodes;
-}
-
-// src/components/Select.tsx
-
-var Select = (props) => {
-  const ctx = useSelectState(props);
-  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { ...ctx.divProps, className: ctx.containerClasses, children: [
-    /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
-      "button",
-      {
-        ref: ctx.triggerRef,
-        type: "button",
-        className: ctx.triggerClasses,
-        disabled: ctx.disabled,
-        onClick: ctx.toggleDropdown,
-        onKeyDown: ctx.handleTriggerKeyDown,
-        "aria-haspopup": "listbox",
-        "aria-expanded": ctx.isOpen,
-        "aria-controls": ctx.listboxId,
-        "aria-activedescendant": ctx.isOpen && ctx.activeIndex >= 0 ? ctx.getOptionId(ctx.activeIndex) : void 0,
-        "data-state": ctx.isOpen ? "open" : "closed",
-        children: [
-          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-            "span",
-            {
-              className: _tigercatcore.classNames.call(void 0, 
-                "flex-1 text-left truncate",
-                ctx.displayText === ctx.placeholder && "text-[var(--tiger-select-placeholder,var(--tiger-text-muted,#9ca3af))]"
-              ),
-              children: ctx.displayText
-            }
-          ),
-          /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "span", { className: "flex items-center gap-1", children: [
-            ctx.showClearButton && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-              "span",
-              {
-                className: "inline-flex",
-                "data-tiger-select-clear": true,
-                "aria-label": "Clear selection",
-                onClick: ctx.clearSelection,
-                children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, SelectClearIcon, {})
-              }
-            ),
-            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: _tigercatcore.classNames.call(void 0, "inline-flex", ctx.isOpen && "rotate-180"), children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, SelectChevronIcon, {}) })
-          ] })
-        ]
-      }
-    ),
-    ctx.isOpen && /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
-      "div",
-      {
-        ref: ctx.dropdownRef,
-        className: _tigercatcore.selectDropdownBaseClasses,
-        role: "listbox",
-        id: ctx.listboxId,
-        "aria-multiselectable": ctx.isMultiple ? true : void 0,
-        onKeyDown: ctx.handleDropdownKeyDown,
-        children: [
-          ctx.searchable && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-            "input",
-            {
-              ref: ctx.searchInputRef,
-              type: "text",
-              className: _tigercatcore.selectSearchInputClasses,
-              placeholder: ctx.searchPlaceholder,
-              value: ctx.searchQuery,
-              onChange: ctx.handleSearchInput,
-              onKeyDown: ctx.handleSearchKeyDown
-            }
-          ),
-          renderOptions(ctx)
-        ]
-      }
-    )
-  ] });
-};
-
-
-
-exports.Select = Select;