@expcat/tigercat-react 0.2.27 → 0.3.69

package/dist/{chunk-XS5JP2KO.mjs → chunk-ZFHTSHXS.mjs}

@@ -1,5 +1,5 @@
-import { useState, useRef, useEffect } from 'react';
-import { parseDate, formatDate, getCalendarDays, getShortDayNames, getDatePickerLabels, getDatePickerInputClasses, getDatePickerIconButtonClasses, classNames, datePickerInputWrapperClasses, datePickerClearButtonClasses, CloseIconPath, CalendarIconPath, datePickerCalendarClasses, datePickerCalendarHeaderClasses, datePickerNavButtonClasses, ChevronLeftIconPath, formatMonthYear, datePickerMonthYearClasses, ChevronRightIconPath, datePickerCalendarGridClasses, datePickerDayNameClasses, isSameDay, normalizeDate, isToday, getDatePickerDayCellClasses, datePickerFooterClasses, datePickerFooterButtonClasses, datePickerBaseClasses, isDateInRange, icon20ViewBox } from '@expcat/tigercat-core';
+import { useState, useRef, useMemo, useEffect } from 'react';
+import { parseDate, formatDate, getCalendarDays, getShortDayNames, getDatePickerLabels, getDatePickerInputClasses, getDatePickerIconButtonClasses, classNames, datePickerInputWrapperClasses, datePickerClearButtonClasses, CloseIconPath, CalendarIconPath, datePickerCalendarClasses, datePickerCalendarHeaderClasses, datePickerNavButtonClasses, ChevronLeftIconPath, formatMonthYear, datePickerMonthYearClasses, ChevronRightIconPath, datePickerCalendarGridClasses, datePickerDayNameClasses, normalizeDate, isSameDay, isToday, getDatePickerDayCellClasses, datePickerFooterClasses, datePickerFooterButtonClasses, datePickerBaseClasses, isDateInRange, icon20ViewBox } from '@expcat/tigercat-core';
 import { jsxs, jsx } from 'react/jsx-runtime';
 
 // src/components/DatePicker.tsx
@@ -80,8 +80,8 @@ var DatePicker = (props) => {
     const end = Array.isArray(tuple) ? parseDate(tuple[1]) : null;
     return [start, end];
   })();
-  const minDateParsed = parseDate(props.minDate ?? null);
-  const maxDateParsed = parseDate(props.maxDate ?? null);
+  const minDateParsed = useMemo(() => parseDate(props.minDate ?? null), [props.minDate]);
+  const maxDateParsed = useMemo(() => parseDate(props.maxDate ?? null), [props.maxDate]);
   const [viewingMonth, setViewingMonth] = useState(
     (selectedDate ?? selectedRange[0])?.getMonth() ?? (/* @__PURE__ */ new Date()).getMonth()
   );
@@ -104,14 +104,20 @@ var DatePicker = (props) => {
     if (!isRangeMode) return selectedDate !== null;
     return selectedRange[0] !== null || selectedRange[1] !== null;
   })();
-  const calendarDays = getCalendarDays(viewingYear, viewingMonth);
-  const dayNames = getShortDayNames(props.locale);
-  const labels = getDatePickerLabels(props.locale, props.labels);
+  const calendarDays = useMemo(
+    () => getCalendarDays(viewingYear, viewingMonth),
+    [viewingYear, viewingMonth]
+  );
+  const dayNames = useMemo(() => getShortDayNames(props.locale), [props.locale]);
+  const labels = useMemo(
+    () => getDatePickerLabels(props.locale, props.labels),
+    [props.locale, props.labels]
+  );
   const toggleCalendar = () => {
     if (!disabled && !readonly) {
       setIsOpen(!isOpen);
       if (!isOpen) {
-        restoreFocusRef.current = document.activeElement ?? null;
+        restoreFocusRef.current = inputRef.current ?? null;
         const baseDate = selectedDate ?? selectedRange[0];
         if (baseDate) {
           setViewingMonth(baseDate.getMonth());
@@ -256,11 +262,7 @@ var DatePicker = (props) => {
       setRangeValue([normalizedDate, null]);
       return;
     }
-    if (normalizedDate < start) {
-      setRangeValue([start, start]);
-    } else {
-      setRangeValue([start, normalizedDate]);
-    }
+    setRangeValue([start, normalizedDate < start ? start : normalizedDate]);
   };
   const setToday = () => {
     selectDate(/* @__PURE__ */ new Date());
@@ -301,25 +303,14 @@ var DatePicker = (props) => {
     if (!date) return false;
     return date.getMonth() === viewingMonth;
   };
-  const handleInputClick = () => {
-    toggleCalendar();
-  };
   useEffect(() => {
-    const handleClickOutside = (event) => {
-      if (calendarRef.current && inputWrapperRef.current && !calendarRef.current.contains(event.target) && !inputWrapperRef.current.contains(event.target)) {
-        closeCalendar();
-      }
-    };
     if (isOpen) {
-      document.addEventListener("click", handleClickOutside);
-      return () => {
-        document.removeEventListener("click", handleClickOutside);
+      const handleClickOutside = (event) => {
+        if (calendarRef.current && inputWrapperRef.current && !calendarRef.current.contains(event.target) && !inputWrapperRef.current.contains(event.target)) {
+          closeCalendar();
+        }
       };
-    }
-  }, [isOpen]);
-  useEffect(() => {
-    if (isOpen) {
-      restoreFocusRef.current = document.activeElement ?? null;
+      document.addEventListener("click", handleClickOutside);
       const preferred = pendingFocusIsoRef.current ?? getPreferredFocusIso();
       pendingFocusIsoRef.current = null;
       setTimeout(() => {
@@ -327,11 +318,9 @@ var DatePicker = (props) => {
         const fallback = getFirstEnabledIsoInView();
         if (fallback) focusDateButtonByIso(fallback);
       }, 0);
-      return;
+      return () => document.removeEventListener("click", handleClickOutside);
     }
-    setTimeout(() => {
-      restoreFocus();
-    }, 0);
+    setTimeout(() => restoreFocus(), 0);
   }, [isOpen]);
   useEffect(() => {
     if (!isOpen) return;
@@ -344,8 +333,11 @@ var DatePicker = (props) => {
       if (fallback) focusDateButtonByIso(fallback);
     }, 0);
   }, [isOpen, viewingMonth, viewingYear]);
-  const inputClasses = getDatePickerInputClasses(size, disabled || readonly);
-  const iconButtonClasses = getDatePickerIconButtonClasses(size);
+  const inputClasses = useMemo(
+    () => getDatePickerInputClasses(size, disabled || readonly),
+    [size, disabled, readonly]
+  );
+  const iconButtonClasses = useMemo(() => getDatePickerIconButtonClasses(size), [size]);
   return /* @__PURE__ */ jsxs("div", { className: classNames(datePickerBaseClasses, props.className), ...divProps, children: [
     /* @__PURE__ */ jsxs("div", { ref: inputWrapperRef, className: datePickerInputWrapperClasses, children: [
       /* @__PURE__ */ jsx(
@@ -361,7 +353,7 @@ var DatePicker = (props) => {
           required,
           name: props.name,
           id: props.id,
-          onClick: handleInputClick,
+          onClick: toggleCalendar,
           "aria-label": placeholder || "Select date"
         }
       ),
@@ -421,55 +413,60 @@ var DatePicker = (props) => {
             )
           ] }),
           /* @__PURE__ */ jsx("div", { className: datePickerCalendarGridClasses, role: "row", children: dayNames.map((day) => /* @__PURE__ */ jsx("div", { className: datePickerDayNameClasses, role: "columnheader", children: day }, day)) }),
-          /* @__PURE__ */ jsx(
-            "div",
-            {
-              className: datePickerCalendarGridClasses,
-              role: "grid",
-              "aria-rowcount": 6,
-              "aria-colcount": 7,
-              children: calendarDays.map((date, index) => {
-                if (!date) return null;
-                const [rangeStart, rangeEnd] = selectedRange;
-                const isRangeStart = isRangeMode && rangeStart ? isSameDay(date, rangeStart) : false;
-                const isRangeEnd = isRangeMode && rangeEnd ? isSameDay(date, rangeEnd) : false;
-                const isInRange = isRangeMode && rangeStart && rangeEnd && normalizeDate(date) >= normalizeDate(rangeStart) && normalizeDate(date) <= normalizeDate(rangeEnd);
-                const isSelected = !isRangeMode ? selectedDate ? isSameDay(date, selectedDate) : false : isRangeStart || isRangeEnd;
-                const isCurrentMonthDay = isCurrentMonth(date);
-                const isTodayDay = isToday(date);
-                const isSelectingRangeEnd = isRangeMode && Boolean(rangeStart) && !rangeEnd;
-                const isBeforeRangeStart = isSelectingRangeEnd && rangeStart && normalizeDate(date) < normalizeDate(rangeStart);
-                const isDisabled = isDateDisabled(date) || Boolean(isBeforeRangeStart);
-                const iso = formatDate(date, "yyyy-MM-dd");
-                return /* @__PURE__ */ jsx(
-                  "button",
-                  {
-                    type: "button",
-                    className: getDatePickerDayCellClasses(
-                      isCurrentMonthDay,
-                      isSelected,
-                      isTodayDay,
-                      isDisabled,
-                      Boolean(isInRange),
-                      Boolean(isRangeStart),
-                      Boolean(isRangeEnd)
-                    ),
-                    disabled: isDisabled,
-                    onClick: () => selectDate(date),
-                    role: "gridcell",
-                    "data-date": iso,
-                    onFocus: () => setActiveDateIso(iso),
-                    tabIndex: activeDateIso === iso && !isDisabled ? 0 : -1,
-                    "aria-label": iso,
-                    "aria-selected": isSelected,
-                    "aria-current": isTodayDay ? "date" : void 0,
-                    children: date.getDate()
-                  },
-                  index
-                );
-              })
-            }
-          ),
+          (() => {
+            const [rangeStart, rangeEnd] = selectedRange;
+            const normStart = rangeStart ? normalizeDate(rangeStart) : null;
+            const normEnd = rangeEnd ? normalizeDate(rangeEnd) : null;
+            const isSelectingEnd = isRangeMode && Boolean(rangeStart) && !rangeEnd;
+            return /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: datePickerCalendarGridClasses,
+                role: "grid",
+                "aria-rowcount": 6,
+                "aria-colcount": 7,
+                children: calendarDays.map((date, index) => {
+                  if (!date) return null;
+                  const normDate = normalizeDate(date);
+                  const isRangeStart = isRangeMode && rangeStart ? isSameDay(date, rangeStart) : false;
+                  const isRangeEnd = isRangeMode && rangeEnd ? isSameDay(date, rangeEnd) : false;
+                  const isInRange = isRangeMode && normStart && normEnd && normDate >= normStart && normDate <= normEnd;
+                  const isSelected = !isRangeMode ? selectedDate ? isSameDay(date, selectedDate) : false : isRangeStart || isRangeEnd;
+                  const isCurrentMonthDay = isCurrentMonth(date);
+                  const isTodayDay = isToday(date);
+                  const isBeforeRangeStart = isSelectingEnd && normStart && normDate < normStart;
+                  const isDisabled = isDateDisabled(date) || Boolean(isBeforeRangeStart);
+                  const iso = formatDate(date, "yyyy-MM-dd");
+                  return /* @__PURE__ */ jsx(
+                    "button",
+                    {
+                      type: "button",
+                      className: getDatePickerDayCellClasses(
+                        isCurrentMonthDay,
+                        isSelected,
+                        isTodayDay,
+                        isDisabled,
+                        Boolean(isInRange),
+                        Boolean(isRangeStart),
+                        Boolean(isRangeEnd)
+                      ),
+                      disabled: isDisabled,
+                      onClick: () => selectDate(date),
+                      role: "gridcell",
+                      "data-date": iso,
+                      onFocus: () => setActiveDateIso(iso),
+                      tabIndex: activeDateIso === iso && !isDisabled ? 0 : -1,
+                      "aria-label": iso,
+                      "aria-selected": isSelected,
+                      "aria-current": isTodayDay ? "date" : void 0,
+                      children: date.getDate()
+                    },
+                    index
+                  );
+                })
+              }
+            );
+          })(),
           isRangeMode && /* @__PURE__ */ jsxs("div", { className: datePickerFooterClasses, children: [
             /* @__PURE__ */ jsx("button", { type: "button", className: datePickerFooterButtonClasses, onClick: setToday, children: labels.today }),
             /* @__PURE__ */ jsx(

package/dist/chunk-ZGQOYCQT.mjs

@@ -0,0 +1,194 @@
+import { Table } from './chunk-3577FW3I.mjs';
+import { Select } from './chunk-MDZDPGRK.mjs';
+import { Pagination } from './chunk-NZLOLMT2.mjs';
+import { Input } from './chunk-RPTLVIBF.mjs';
+import { Button } from './chunk-ENSLMM3L.mjs';
+import { useState, useEffect, useMemo } from 'react';
+import { classNames } from '@expcat/tigercat-core';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var DataTableWithToolbar = ({
+  toolbar,
+  onSearchChange,
+  onSearch,
+  onFiltersChange,
+  onBulkAction,
+  pagination = false,
+  onPageChange,
+  onPageSizeChange,
+  className,
+  tableClassName,
+  ...tableProps
+}) => {
+  const [internalSearch, setInternalSearch] = useState(toolbar?.defaultSearchValue ?? "");
+  const [internalFilters, setInternalFilters] = useState(
+    () => {
+      const initial = {};
+      toolbar?.filters?.forEach((filter) => {
+        if (filter.value === void 0) {
+          initial[filter.key] = filter.defaultValue ?? null;
+        }
+      });
+      return initial;
+    }
+  );
+  useEffect(() => {
+    if (toolbar?.searchValue !== void 0) {
+      setInternalSearch(toolbar.searchValue ?? "");
+    }
+  }, [toolbar?.searchValue]);
+  useEffect(() => {
+    const filters = toolbar?.filters;
+    if (!filters) return;
+    setInternalFilters((prev) => {
+      const next = { ...prev };
+      filters.forEach((filter) => {
+        if (filter.value === void 0 && !(filter.key in next)) {
+          next[filter.key] = filter.defaultValue ?? null;
+        }
+      });
+      return next;
+    });
+  }, [toolbar?.filters]);
+  const searchValue = toolbar?.searchValue !== void 0 ? toolbar.searchValue : internalSearch;
+  const resolvedFilters = useMemo(() => {
+    const next = {};
+    toolbar?.filters?.forEach((filter) => {
+      next[filter.key] = filter.value !== void 0 ? filter.value : internalFilters[filter.key] ?? filter.defaultValue ?? null;
+    });
+    return next;
+  }, [toolbar?.filters, internalFilters]);
+  const hasSearch = Boolean(
+    toolbar && (toolbar.searchPlaceholder || toolbar.searchValue !== void 0 || toolbar.defaultSearchValue !== void 0 || toolbar.showSearchButton || toolbar.onSearchChange || toolbar.onSearch || onSearchChange || onSearch)
+  );
+  const hasFilters = Boolean(toolbar?.filters && toolbar.filters.length > 0);
+  const hasBulkActions = Boolean(toolbar?.bulkActions && toolbar.bulkActions.length > 0);
+  const selectedKeys = toolbar?.selectedKeys ?? tableProps.rowSelection?.selectedRowKeys ?? [];
+  const selectedCount = toolbar?.selectedCount ?? selectedKeys.length;
+  const bulkLabel = toolbar?.bulkActionsLabel ?? "\u5DF2\u9009\u62E9";
+  const wrapperClasses = useMemo(
+    () => classNames("tiger-data-table-with-toolbar flex flex-col gap-3", className),
+    [className]
+  );
+  const handleSearchChange = (value) => {
+    if (toolbar?.searchValue === void 0) {
+      setInternalSearch(value);
+    }
+    onSearchChange?.(value);
+    toolbar?.onSearchChange?.(value);
+  };
+  const handleSearchSubmit = () => {
+    onSearch?.(searchValue ?? "");
+    toolbar?.onSearch?.(searchValue ?? "");
+  };
+  const handleFilterSelect = (filter, value) => {
+    const nextFilters = {
+      ...resolvedFilters,
+      [filter.key]: value
+    };
+    if (filter.value === void 0) {
+      setInternalFilters((prev) => ({
+        ...prev,
+        [filter.key]: value
+      }));
+    }
+    onFiltersChange?.(nextFilters);
+    toolbar?.onFiltersChange?.(nextFilters);
+  };
+  const handleBulkAction = (action) => {
+    const keys = selectedKeys ?? [];
+    action.onClick?.(keys);
+    onBulkAction?.(action, keys);
+    toolbar?.onBulkAction?.(action, keys);
+  };
+  const renderToolbar = () => {
+    if (!hasSearch && !hasFilters && !hasBulkActions) return null;
+    return /* @__PURE__ */ jsxs("div", { className: "tiger-data-table-toolbar flex flex-wrap items-center gap-2 pb-3", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 flex-wrap flex-1 min-w-0", children: [
+        hasSearch ? /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 w-full sm:w-auto sm:min-w-[200px] sm:max-w-[320px]", children: [
+          /* @__PURE__ */ jsx(
+            Input,
+            {
+              type: "search",
+              size: "sm",
+              value: searchValue,
+              placeholder: toolbar?.searchPlaceholder ?? "\u641C\u7D22",
+              onChange: (event) => handleSearchChange(String(event.currentTarget.value)),
+              onKeyDown: (event) => {
+                if (event.key === "Enter") {
+                  handleSearchSubmit();
+                }
+              }
+            }
+          ),
+          toolbar?.showSearchButton ?? true ? /* @__PURE__ */ jsx(
+            Button,
+            {
+              size: "sm",
+              variant: "primary",
+              className: "whitespace-nowrap shrink-0",
+              onClick: handleSearchSubmit,
+              disabled: !onSearch && !toolbar?.onSearch,
+              children: toolbar?.searchButtonText ?? "\u641C\u7D22"
+            }
+          ) : null
+        ] }) : null,
+        hasFilters ? toolbar?.filters?.map((filter) => {
+          const currentValue = resolvedFilters[filter.key];
+          const clearable = filter.clearable !== false;
+          return /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: "w-full sm:w-auto sm:min-w-[120px] sm:max-w-[180px]",
+              children: /* @__PURE__ */ jsx(
+                Select,
+                {
+                  size: "sm",
+                  options: filter.options.map((opt) => ({
+                    label: opt.label,
+                    value: opt.value
+                  })),
+                  value: currentValue ?? void 0,
+                  placeholder: filter.placeholder ?? filter.label,
+                  clearable,
+                  onChange: (value) => {
+                    handleFilterSelect(filter, value ?? null);
+                  }
+                }
+              )
+            },
+            filter.key
+          );
+        }) : null
+      ] }),
+      hasBulkActions ? /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 flex-wrap ml-auto shrink-0", children: [
+        selectedCount > 0 ? /* @__PURE__ */ jsxs("span", { className: "text-sm text-[var(--tiger-text-muted,#6b7280)]", children: [
+          bulkLabel,
+          " ",
+          selectedCount,
+          " \u9879"
+        ] }) : null,
+        toolbar?.bulkActions?.map((action) => /* @__PURE__ */ jsx(
+          Button,
+          {
+            size: "sm",
+            variant: action.variant ?? "outline",
+            disabled: action.disabled || selectedCount === 0,
+            onClick: () => handleBulkAction(action),
+            children: action.label
+          },
+          action.key
+        ))
+      ] }) : null
+    ] });
+  };
+  const showPagination = pagination && typeof pagination === "object";
+  return /* @__PURE__ */ jsxs("div", { className: wrapperClasses, "data-tiger-data-table-with-toolbar": true, children: [
+    renderToolbar(),
+    /* @__PURE__ */ jsx(Table, { ...tableProps, pagination: false, className: tableClassName }),
+    showPagination ? /* @__PURE__ */ jsx(Pagination, { ...pagination, onChange: onPageChange, onPageSizeChange }) : null
+  ] });
+};
+var DataTableWithToolbar_default = DataTableWithToolbar;
+
+export { DataTableWithToolbar, DataTableWithToolbar_default };

package/dist/{chunk-WDAMDVLU.mjs → chunk-ZIUOENTL.mjs}

@@ -1,5 +1,5 @@
 import { createContext, useContext, useRef, useState, useCallback, useMemo, useEffect } from 'react';
-import { classNames, getMenuClasses } from '@expcat/tigercat-core';
+import { replaceKeys, toggleKey, classNames, getMenuClasses, initRovingTabIndex } from '@expcat/tigercat-core';
 import { jsx } from 'react/jsx-runtime';
 
 // src/components/Menu.tsx
@@ -30,27 +30,18 @@ var Menu = ({
   const openKeys = controlledOpenKeys !== void 0 ? controlledOpenKeys : internalOpenKeys;
   const handleSelect = useCallback(
     (key) => {
-      const newSelectedKeys = [key];
+      const newSelectedKeys = replaceKeys(key, selectedKeys);
       if (controlledSelectedKeys === void 0) {
         setInternalSelectedKeys(newSelectedKeys);
       }
       onSelect?.(key, { selectedKeys: newSelectedKeys });
     },
-    [controlledSelectedKeys, onSelect]
+    [controlledSelectedKeys, selectedKeys, onSelect]
   );
   const handleOpenChange = useCallback(
     (key) => {
-      const isOpen = openKeys.includes(key);
-      let newOpenKeys;
-      if (isOpen) {
-        newOpenKeys = openKeys.filter((k) => k !== key);
-      } else {
-        if (multiple) {
-          newOpenKeys = [...openKeys, key];
-        } else {
-          newOpenKeys = [key];
-        }
-      }
+      const toggled = toggleKey(key, openKeys);
+      const newOpenKeys = multiple ? toggled : toggled.includes(key) ? [key] : [];
       if (controlledOpenKeys === void 0) {
         setInternalOpenKeys(newOpenKeys);
       }
@@ -75,19 +66,7 @@ var Menu = ({
     [mode, theme, collapsed, inlineIndent, selectedKeys, openKeys, handleSelect, handleOpenChange]
   );
   useEffect(() => {
-    const root = menuRef.current;
-    if (!root) return;
-    const items = Array.from(
-      root.querySelectorAll('button[data-tiger-menuitem="true"]')
-    ).filter((el) => !el.disabled && !el.closest('[data-tiger-menu-hidden="true"]'));
-    if (items.length === 0) return;
-    const hasActive = items.some((el) => el.tabIndex === 0);
-    if (hasActive) return;
-    const selected = items.find((el) => el.dataset.tigerSelected === "true");
-    const active = selected ?? items[0];
-    items.forEach((el) => {
-      el.tabIndex = el === active ? 0 : -1;
-    });
+    if (menuRef.current) initRovingTabIndex(menuRef.current);
   }, [mode, collapsed, selectedKeys, openKeys]);
   return /* @__PURE__ */ jsx(MenuContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx(
     "ul",