@expcat/tigercat-react 1.0.7 → 1.2.0

package/dist/chunk-6Z4LLPZA.js

@@ -0,0 +1,564 @@
+"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; }// src/components/Select.tsx
+var _react = require('react');
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+var _tigercatcore = require('@expcat/tigercat-core');
+var _jsxruntime = require('react/jsx-runtime');
+var isMultipleSelect = (props) => props.multiple === true;
+var Select = (props) => {
+  const {
+    options = [],
+    size = "md",
+    disabled = false,
+    placeholder = "Select an option",
+    searchable = false,
+    clearable = true,
+    noOptionsText = "No options found",
+    noDataText = "No options available",
+    maxTagCount,
+    remote = false,
+    searchDebounce = 0,
+    creatable = false,
+    createOptionText = "Create",
+    onSearch,
+    onCreate,
+    className,
+    value,
+    onChange,
+    multiple
+  } = props;
+  const isMultiple = multiple === true;
+  const 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"
+  ]);
+  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]);
+  const triggerClasses = _tigercatcore.getSelectTriggerClasses.call(void 0, size, disabled, isOpen);
+  const renderOption = (option, index, displayLabel = option.label) => {
+    const optionSelected = isSelected(option);
+    const optionActive = index === activeIndex;
+    return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+      "div",
+      {
+        id: 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, size),
+        onMouseEnter: () => {
+          if (!option.disabled) {
+            setActiveIndex(index);
+          }
+        },
+        onClick: () => 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, 
+            "svg",
+            {
+              className: "w-5 h-5 text-[var(--tiger-select-check-icon,var(--tiger-primary,#2563eb))]",
+              xmlns: "http://www.w3.org/2000/svg",
+              viewBox: _tigercatcore.icon20ViewBox,
+              fill: "currentColor",
+              children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "path", { fillRule: "evenodd", d: _tigercatcore.checkSolidIcon20PathD, clipRule: "evenodd" })
+            }
+          )
+        ] })
+      },
+      option.value
+    );
+  };
+  const hasOptions = filteredOptions.length > 0;
+  const renderOptions = () => {
+    if (!hasOptions && !creatableOption) {
+      return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: _tigercatcore.selectEmptyStateClasses, children: options.length === 0 ? noDataText : noOptionsText });
+    }
+    let optionIndex = -1;
+    const optionNodes = 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(option, optionIndex);
+          })
+        ] }, item.label);
+      }
+      optionIndex += 1;
+      return renderOption(item, optionIndex);
+    });
+    if (creatableOption) {
+      optionIndex += 1;
+      optionNodes.push(
+        renderOption(
+          creatableOption,
+          optionIndex,
+          _tigercatcore.getCreateSelectOptionLabel.call(void 0, creatableOption, createOptionText)
+        )
+      );
+    }
+    return optionNodes;
+  };
+  const containerClasses = _tigercatcore.classNames.call(void 0, _tigercatcore.selectBaseClasses, className);
+  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { ...divProps, className: containerClasses, children: [
+    /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+      "button",
+      {
+        ref: triggerRef,
+        type: "button",
+        className: triggerClasses,
+        disabled,
+        onClick: toggleDropdown,
+        onKeyDown: handleTriggerKeyDown,
+        "aria-haspopup": "listbox",
+        "aria-expanded": isOpen,
+        "aria-controls": listboxId,
+        "aria-activedescendant": isOpen && activeIndex >= 0 ? getOptionId(activeIndex) : void 0,
+        children: [
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+            "span",
+            {
+              className: _tigercatcore.classNames.call(void 0, 
+                "flex-1 text-left truncate",
+                displayText === placeholder && "text-[var(--tiger-select-placeholder,var(--tiger-text-muted,#9ca3af))]"
+              ),
+              children: displayText
+            }
+          ),
+          /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "span", { className: "flex items-center gap-1", children: [
+            showClearButton && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+              "span",
+              {
+                className: "inline-flex",
+                "data-tiger-select-clear": true,
+                "aria-label": "Clear selection",
+                onClick: clearSelection,
+                children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+                  "svg",
+                  {
+                    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))]",
+                    xmlns: "http://www.w3.org/2000/svg",
+                    viewBox: _tigercatcore.icon20ViewBox,
+                    fill: "currentColor",
+                    children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "path", { fillRule: "evenodd", d: _tigercatcore.closeSolidIcon20PathD, clipRule: "evenodd" })
+                  }
+                )
+              }
+            ),
+            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: _tigercatcore.classNames.call(void 0, "inline-flex", isOpen && "rotate-180"), children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+              "svg",
+              {
+                className: "w-5 h-5 text-[var(--tiger-select-icon,var(--tiger-text-muted,#9ca3af))] transition-transform",
+                xmlns: "http://www.w3.org/2000/svg",
+                viewBox: _tigercatcore.icon20ViewBox,
+                fill: "currentColor",
+                children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "path", { fillRule: "evenodd", d: _tigercatcore.chevronDownSolidIcon20PathD, clipRule: "evenodd" })
+              }
+            ) })
+          ] })
+        ]
+      }
+    ),
+    isOpen && /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+      "div",
+      {
+        ref: dropdownRef,
+        className: _tigercatcore.selectDropdownBaseClasses,
+        role: "listbox",
+        id: listboxId,
+        "aria-multiselectable": isMultipleSelect(props) ? true : void 0,
+        onKeyDown: handleDropdownKeyDown,
+        children: [
+          searchable && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+            "input",
+            {
+              ref: searchInputRef,
+              type: "text",
+              className: _tigercatcore.selectSearchInputClasses,
+              placeholder: "Search...",
+              value: searchQuery,
+              onChange: handleSearchInput,
+              onKeyDown: handleSearchKeyDown
+            }
+          ),
+          renderOptions()
+        ]
+      }
+    )
+  ] });
+};
+
+
+
+exports.Select = Select;

package/dist/{chunk-ZD4BVRYG.mjs → chunk-73OAHAPC.mjs}

@@ -1,8 +1,14 @@
-import { DropdownContext } from './chunk-2UQC3WOI.mjs';
-import { useContext } from 'react';
-import { classNames, getDropdownItemClasses } from '@expcat/tigercat-core';
-import { jsx } from 'react/jsx-runtime';
+import {
+  DropdownContext
+} from "./chunk-WVTUGFWO.mjs";
 
+// src/components/DropdownItem.tsx
+import { useContext } from "react";
+import {
+  classNames,
+  getDropdownItemClasses
+} from "@expcat/tigercat-core";
+import { jsx } from "react/jsx-runtime";
 var DropdownItem = ({
   disabled = false,
   divided = false,
@@ -39,4 +45,6 @@ var DropdownItem = ({
   );
 };
 
-export { DropdownItem };
+export {
+  DropdownItem
+};