@expcat/tigercat-react 1.0.7 → 1.2.0

package/dist/chunk-NZNSUKPT.js

@@ -1,500 +0,0 @@
-'use strict';
-
-var react = require('react');
-var tigercatCore = require('@expcat/tigercat-core');
-var jsxRuntime = require('react/jsx-runtime');
-
-// src/components/Select.tsx
-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,
-    onSearch,
-    className
-  } = props;
-  const SELECT_KEYS = /* @__PURE__ */ new Set([
-    "options",
-    "size",
-    "disabled",
-    "placeholder",
-    "searchable",
-    "clearable",
-    "noOptionsText",
-    "noDataText",
-    "maxTagCount",
-    "virtual",
-    "listHeight",
-    "onSearch",
-    "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();
-  const listboxId = `tiger-select-listbox-${instanceId}`;
-  const [isOpen, setIsOpen] = react.useState(false);
-  const [searchQuery, setSearchQuery] = react.useState("");
-  const [activeIndex, setActiveIndex] = react.useState(-1);
-  const dropdownRef = react.useRef(null);
-  const triggerRef = react.useRef(null);
-  const searchInputRef = react.useRef(null);
-  const filteredOptions = react.useMemo(
-    () => searchable && searchQuery ? tigercatCore.filterOptions(options, searchQuery) : options,
-    [options, searchable, searchQuery]
-  );
-  const flatFilteredOptions = react.useMemo(
-    () => tigercatCore.flattenSelectOptions(filteredOptions),
-    [filteredOptions]
-  );
-  const allOptions = react.useMemo(() => tigercatCore.flattenSelectOptions(options), [options]);
-  const displayText = react.useMemo(() => {
-    if (isMultipleSelect(props)) {
-      const value2 = props.value ?? [];
-      if (value2.length === 0) return placeholder;
-      const labels = allOptions.filter((opt) => value2.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(", ");
-    }
-    const value = props.value;
-    if (value === void 0 || value === null || value === "") return placeholder;
-    return allOptions.find((opt) => opt.value === value)?.label ?? placeholder;
-  }, [props.multiple, props.value, allOptions, placeholder, maxTagCount]);
-  const showClearButton = react.useMemo(
-    () => clearable && !disabled && props.value !== void 0 && props.value !== null && props.value !== "" && (!Array.isArray(props.value) || props.value.length > 0),
-    [clearable, disabled, props.value]
-  );
-  const isSelected = (option) => {
-    if (isMultipleSelect(props)) {
-      return (props.value ?? []).includes(option.value);
-    }
-    return props.value === option.value;
-  };
-  const getOptionId = (index) => `tiger-select-option-${instanceId}-${index}`;
-  const findFirstEnabledIndex = () => flatFilteredOptions.findIndex((opt) => !opt.disabled);
-  const findLastEnabledIndex = () => {
-    for (let i = flatFilteredOptions.length - 1; i >= 0; i--) {
-      if (!flatFilteredOptions[i]?.disabled) {
-        return i;
-      }
-    }
-    return -1;
-  };
-  const findNextEnabledIndex = (current, direction) => {
-    if (flatFilteredOptions.length === 0) {
-      return -1;
-    }
-    const start = current < 0 ? direction === 1 ? 0 : flatFilteredOptions.length - 1 : current + direction;
-    for (let i = start; i >= 0 && i < flatFilteredOptions.length; i += direction) {
-      if (!flatFilteredOptions[i]?.disabled) {
-        return i;
-      }
-    }
-    return current;
-  };
-  const focusOptionAt = (index) => {
-    if (index < 0) {
-      return;
-    }
-    requestAnimationFrame(() => {
-      const el = dropdownRef.current?.querySelector(`[data-option-index="${index}"]`);
-      el?.focus();
-      el?.scrollIntoView({ 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 flatFilteredOptions[activeIndex];
-  };
-  const selectActiveOption = () => {
-    const option = getActiveOption();
-    if (!option || option.disabled) {
-      return;
-    }
-    selectOption(option);
-  };
-  const selectOption = (option) => {
-    if (option.disabled) {
-      return;
-    }
-    if (isMultipleSelect(props)) {
-      const currentValue = props.value ?? [];
-      const nextValue = currentValue.includes(option.value) ? currentValue.filter((v) => v !== option.value) : [...currentValue, option.value];
-      props.onChange?.(nextValue);
-      return;
-    }
-    props.onChange?.(option.value);
-    closeDropdown();
-    requestAnimationFrame(() => {
-      triggerRef.current?.focus();
-    });
-  };
-  const clearSelection = (event) => {
-    event.stopPropagation();
-    if (isMultipleSelect(props)) {
-      props.onChange?.([]);
-      return;
-    }
-    props.onChange?.(void 0);
-  };
-  const handleSearchInput = (event) => {
-    const query = event.target.value;
-    setSearchQuery(query);
-    onSearch?.(query);
-  };
-  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();
-        triggerRef.current?.focus();
-        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();
-        triggerRef.current?.focus();
-        return;
-      }
-      default:
-        return;
-    }
-  };
-  react.useEffect(() => {
-    if (isOpen && searchable) {
-      searchInputRef.current?.focus();
-    }
-  }, [isOpen, searchable]);
-  react.useEffect(() => {
-    if (!isOpen) {
-      return;
-    }
-    if (flatFilteredOptions.length === 0) {
-      setActiveIndex(-1);
-      return;
-    }
-    const selectedIndex = (() => {
-      if (isMultipleSelect(props)) {
-        const value2 = props.value ?? [];
-        if (value2.length === 0) {
-          return -1;
-        }
-        return flatFilteredOptions.findIndex((opt) => value2.includes(opt.value) && !opt.disabled);
-      }
-      const value = props.value;
-      if (value === void 0 || value === null || value === "") {
-        return -1;
-      }
-      return flatFilteredOptions.findIndex((opt) => opt.value === value && !opt.disabled);
-    })();
-    const nextActive = selectedIndex >= 0 ? selectedIndex : findFirstEnabledIndex();
-    setActiveIndex(nextActive);
-    if (!searchable) {
-      focusOptionAt(nextActive);
-    }
-  }, [isOpen, searchable, flatFilteredOptions, props.multiple, props.value]);
-  react.useEffect(() => {
-    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(size, disabled, isOpen);
-  const renderOption = (option, index) => {
-    const optionSelected = isSelected(option);
-    const optionActive = index === activeIndex;
-    return /* @__PURE__ */ jsxRuntime.jsx(
-      "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(optionSelected, !!option.disabled, size),
-        onMouseEnter: () => {
-          if (!option.disabled) {
-            setActiveIndex(index);
-          }
-        },
-        onClick: () => selectOption(option),
-        children: /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "flex items-center justify-between w-full", children: [
-          /* @__PURE__ */ jsxRuntime.jsx("span", { children: option.label }),
-          optionSelected && /* @__PURE__ */ jsxRuntime.jsx(
-            "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("path", { fillRule: "evenodd", d: tigercatCore.checkSolidIcon20PathD, clipRule: "evenodd" })
-            }
-          )
-        ] })
-      },
-      option.value
-    );
-  };
-  const hasOptions = filteredOptions.length > 0;
-  const renderOptions = () => {
-    if (!hasOptions) {
-      return /* @__PURE__ */ jsxRuntime.jsx("div", { className: tigercatCore.selectEmptyStateClasses, children: options.length === 0 ? noDataText : noOptionsText });
-    }
-    let optionIndex = -1;
-    return filteredOptions.map((item) => {
-      if (tigercatCore.isOptionGroup(item)) {
-        return /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-          /* @__PURE__ */ jsxRuntime.jsx("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);
-    });
-  };
-  const containerClasses = tigercatCore.classNames(tigercatCore.selectBaseClasses, className);
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { ...divProps, className: containerClasses, children: [
-    /* @__PURE__ */ jsxRuntime.jsxs(
-      "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(
-            "span",
-            {
-              className: tigercatCore.classNames(
-                "flex-1 text-left truncate",
-                displayText === placeholder && "text-[var(--tiger-select-placeholder,var(--tiger-text-muted,#9ca3af))]"
-              ),
-              children: displayText
-            }
-          ),
-          /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "flex items-center gap-1", children: [
-            showClearButton && /* @__PURE__ */ jsxRuntime.jsx(
-              "span",
-              {
-                className: "inline-flex",
-                "data-tiger-select-clear": true,
-                "aria-label": "Clear selection",
-                onClick: clearSelection,
-                children: /* @__PURE__ */ jsxRuntime.jsx(
-                  "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("path", { fillRule: "evenodd", d: tigercatCore.closeSolidIcon20PathD, clipRule: "evenodd" })
-                  }
-                )
-              }
-            ),
-            /* @__PURE__ */ jsxRuntime.jsx("span", { className: tigercatCore.classNames("inline-flex", isOpen && "rotate-180"), children: /* @__PURE__ */ jsxRuntime.jsx(
-              "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("path", { fillRule: "evenodd", d: tigercatCore.chevronDownSolidIcon20PathD, clipRule: "evenodd" })
-              }
-            ) })
-          ] })
-        ]
-      }
-    ),
-    isOpen && /* @__PURE__ */ jsxRuntime.jsxs(
-      "div",
-      {
-        ref: dropdownRef,
-        className: tigercatCore.selectDropdownBaseClasses,
-        role: "listbox",
-        id: listboxId,
-        "aria-multiselectable": isMultipleSelect(props) ? true : void 0,
-        onKeyDown: handleDropdownKeyDown,
-        children: [
-          searchable && /* @__PURE__ */ jsxRuntime.jsx(
-            "input",
-            {
-              ref: searchInputRef,
-              type: "text",
-              className: tigercatCore.selectSearchInputClasses,
-              placeholder: "Search...",
-              value: searchQuery,
-              onChange: handleSearchInput,
-              onKeyDown: handleSearchKeyDown
-            }
-          ),
-          renderOptions()
-        ]
-      }
-    )
-  ] });
-};
-
-exports.Select = Select;