@expcat/tigercat-react 2.1.2 → 2.1.4

package/dist/chunk-YDIEWFBM.mjs

@@ -0,0 +1,361 @@
+import {
+  useDrag
+} from "./chunk-REJVXLW5.mjs";
+import {
+  Pagination
+} from "./chunk-XAYOEQGB.mjs";
+import {
+  VirtualList
+} from "./chunk-NTCVAVYZ.mjs";
+import {
+  Empty
+} from "./chunk-RLUBTLOT.mjs";
+import {
+  Loading
+} from "./chunk-VW6RNQK4.mjs";
+import {
+  useTigerConfig
+} from "./chunk-RUIFGSVN.mjs";
+
+// src/components/List.tsx
+import { forwardRef, useMemo, useRef, useState, useLayoutEffect } from "react";
+import {
+  classNames,
+  reorderSequence,
+  mergeTigerLocale,
+  getListClasses,
+  getListItemClasses,
+  getListItemExtraClasses,
+  getListHeaderFooterClasses,
+  getListGridColumnClass,
+  getListGridGapStyle,
+  getListSourceIndex,
+  resolveListGridColumnCount,
+  resolveListVirtualItemHeight,
+  paginateData,
+  calculatePagination,
+  listWrapperClasses,
+  listSizeClasses,
+  listEmptyStateClasses,
+  listLoadingOverlayClasses,
+  listItemMetaClasses,
+  listItemAvatarClasses,
+  listItemContentClasses,
+  listItemTitleClasses,
+  listItemDescriptionClasses,
+  listGridContainerClasses,
+  listDragHandleClasses,
+  getBuiltInPaginationContainerClasses,
+  resolvePaginationDisplayMode,
+  getPaginationLabels,
+  getListLabels,
+  formatPaginationTotal,
+  observeElementSize,
+  devWarn
+} from "@expcat/tigercat-core";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+function isInteractiveTarget(target) {
+  if (!(target instanceof Element)) return false;
+  return Boolean(target.closest("button, a, input, textarea, select, [data-list-drag-handle]"));
+}
+function ListInner({
+  dataSource = [],
+  size = "md",
+  bordered = false,
+  loading = false,
+  emptyText,
+  locale,
+  split = true,
+  itemLayout = "horizontal",
+  header,
+  footer,
+  pagination = false,
+  grid,
+  virtual = false,
+  virtualHeight = 400,
+  virtualItemHeight,
+  virtualOverscan = 5,
+  rowKey = "key",
+  hoverable = false,
+  renderItem,
+  onItemClick,
+  onPageChange,
+  className,
+  draggable: isDraggable = false,
+  onReorder,
+  ...divProps
+}, ref) {
+  const config = useTigerConfig();
+  const mergedLocale = useMemo(
+    () => mergeTigerLocale(config.locale, locale),
+    [config.locale, locale]
+  );
+  const labels = getListLabels(mergedLocale);
+  const rootRef = useRef(null);
+  const [containerWidth, setContainerWidth] = useState(0);
+  useLayoutEffect(() => {
+    if (!grid) return void 0;
+    return observeElementSize(rootRef.current, ({ width }) => setContainerWidth(width));
+  }, [grid]);
+  const paginationCfg = pagination !== false && typeof pagination === "object" ? pagination : null;
+  const isRemotePagination = paginationCfg?.remote === true;
+  const [internalCurrentPage, setInternalCurrentPage] = useState(paginationCfg?.current || 1);
+  const [internalCurrentPageSize, setInternalCurrentPageSize] = useState(
+    paginationCfg?.pageSize || 10
+  );
+  const currentPage = paginationCfg?.current !== void 0 ? paginationCfg.current : internalCurrentPage;
+  const currentPageSize = paginationCfg?.pageSize !== void 0 ? paginationCfg.pageSize : internalCurrentPageSize;
+  const drag = useDrag({
+    containerId: "list",
+    config: { handleSelector: "[data-list-drag-handle]" },
+    onDrop: (event) => {
+      if (event.fromIndex === event.toIndex) return;
+      onReorder?.(
+        reorderSequence(dataSource, event.fromIndex, event.toIndex),
+        event.fromIndex,
+        event.toIndex
+      );
+    }
+  });
+  if (virtual && grid) {
+    devWarn("List.virtualGrid", "List: `virtual` is ignored when `grid` is set.");
+  }
+  const useVirtual = virtual && !grid;
+  const itemHeight = resolveListVirtualItemHeight(size, virtualItemHeight);
+  const paginatedData = useMemo(() => {
+    if (pagination === false) return dataSource;
+    if (isRemotePagination) return dataSource;
+    return paginateData(dataSource, currentPage, currentPageSize);
+  }, [dataSource, currentPage, currentPageSize, pagination, isRemotePagination]);
+  const paginationTotal = isRemotePagination ? paginationCfg?.total ?? dataSource.length : dataSource.length;
+  const paginationInfo = pagination === false ? null : calculatePagination(paginationTotal, currentPage, currentPageSize);
+  const gridColumnCount = grid ? resolveListGridColumnCount(grid, containerWidth) : 1;
+  const handlePageChange = (page) => {
+    if (paginationCfg?.current === void 0) setInternalCurrentPage(page);
+    onPageChange?.({ current: page, pageSize: currentPageSize });
+  };
+  const handlePageSizeChange = (pageSize) => {
+    if (paginationCfg?.pageSize === void 0) setInternalCurrentPageSize(pageSize);
+    if (paginationCfg?.current === void 0) setInternalCurrentPage(1);
+    onPageChange?.({ current: 1, pageSize });
+  };
+  const getItemKey = (item, index) => {
+    if (typeof rowKey === "function") return rowKey(item, index);
+    return item[rowKey] || index;
+  };
+  const renderDefaultListItem = (item) => {
+    const metaContent = [];
+    if (item.avatar) {
+      metaContent.push(
+        /* @__PURE__ */ jsx("div", { className: listItemAvatarClasses, children: typeof item.avatar === "string" ? /* @__PURE__ */ jsx(
+          "img",
+          {
+            src: item.avatar,
+            alt: item.title ? "" : labels.avatarAlt,
+            className: "w-10 h-10 rounded-full object-cover"
+          }
+        ) : item.avatar }, "avatar")
+      );
+    }
+    const contentChildren = [];
+    if (item.title) {
+      contentChildren.push(
+        /* @__PURE__ */ jsx("div", { className: listItemTitleClasses, children: item.title }, "title")
+      );
+    }
+    if (item.description) {
+      contentChildren.push(
+        /* @__PURE__ */ jsx("div", { className: listItemDescriptionClasses, children: item.description }, "description")
+      );
+    }
+    if (contentChildren.length > 0) {
+      metaContent.push(
+        /* @__PURE__ */ jsx("div", { className: listItemContentClasses, children: contentChildren }, "content")
+      );
+    }
+    return /* @__PURE__ */ jsxs(Fragment, { children: [
+      metaContent.length > 0 ? /* @__PURE__ */ jsx("div", { className: listItemMetaClasses, children: metaContent }) : null,
+      item.extra ? /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: getListItemExtraClasses(itemLayout),
+          onClick: (event) => event.stopPropagation(),
+          onKeyDown: (event) => event.stopPropagation(),
+          children: item.extra
+        }
+      ) : null
+    ] });
+  };
+  const renderListItem = (item, pageIndex) => {
+    const sourceIndex = getListSourceIndex(
+      pageIndex,
+      currentPage,
+      currentPageSize,
+      isRemotePagination
+    );
+    const key = getItemKey(item, sourceIndex);
+    const divided = split && !grid;
+    const itemClasses = getListItemClasses(size, itemLayout, divided, hoverable);
+    const clickable = typeof onItemClick === "function";
+    const bindings = isDraggable ? drag.getDragItemProps({ id: String(key), index: sourceIndex, containerId: "list" }) : {};
+    const {
+      className: dragClassName,
+      onPointerDown,
+      draggable: _d,
+      ...dragRest
+    } = bindings;
+    const body = renderItem ? renderItem(item, sourceIndex) : renderDefaultListItem(item);
+    const handleReorderKey = (event) => {
+      if (!event.altKey || event.key !== "ArrowUp" && event.key !== "ArrowDown") return;
+      event.preventDefault();
+      event.stopPropagation();
+      const to = event.key === "ArrowUp" ? sourceIndex - 1 : sourceIndex + 1;
+      if (to < 0 || to >= dataSource.length) return;
+      onReorder?.(reorderSequence(dataSource, sourceIndex, to), sourceIndex, to);
+    };
+    return /* @__PURE__ */ jsxs(
+      "li",
+      {
+        className: classNames(itemClasses, dragClassName),
+        onClick: clickable ? (event) => {
+          if (isInteractiveTarget(event.target)) return;
+          onItemClick?.(item, sourceIndex);
+        } : void 0,
+        ...dragRest,
+        children: [
+          isDraggable ? /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              "data-list-drag-handle": "",
+              className: listDragHandleClasses,
+              "aria-label": labels.dragHandleAriaLabel,
+              onPointerDown: (event) => {
+                event.stopPropagation();
+                onPointerDown?.(event);
+              },
+              onKeyDown: handleReorderKey,
+              onClick: (event) => event.stopPropagation(),
+              children: "\u22EE\u22EE"
+            }
+          ) : null,
+          clickable && !renderItem ? /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              className: "flex min-w-0 flex-1 items-center text-start",
+              onClick: () => onItemClick?.(item, sourceIndex),
+              children: body
+            }
+          ) : body
+        ]
+      },
+      key
+    );
+  };
+  const renderItems = () => {
+    if (paginatedData.length === 0) {
+      return /* @__PURE__ */ jsx("div", { className: listEmptyStateClasses, children: /* @__PURE__ */ jsx(
+        Empty,
+        {
+          description: emptyText ?? mergedLocale?.common?.emptyText,
+          showImage: false,
+          locale: mergedLocale
+        }
+      ) });
+    }
+    const items = paginatedData.map((item, index) => renderListItem(item, index));
+    if (grid) {
+      return /* @__PURE__ */ jsx(
+        "ul",
+        {
+          className: classNames(
+            listGridContainerClasses,
+            getListGridColumnClass(gridColumnCount),
+            grid.gutter === void 0 && "gap-4"
+          ),
+          style: getListGridGapStyle(grid.gutter),
+          ...isDraggable ? drag.getDropZoneProps() : {},
+          children: items
+        }
+      );
+    }
+    if (useVirtual) {
+      return /* @__PURE__ */ jsx(
+        VirtualList,
+        {
+          role: "none",
+          itemCount: paginatedData.length,
+          itemHeight,
+          height: virtualHeight,
+          overscan: virtualOverscan,
+          renderItem: ({ index }) => renderListItem(paginatedData[index], index)
+        }
+      );
+    }
+    return /* @__PURE__ */ jsx("ul", { ...isDraggable ? drag.getDropZoneProps() : {}, children: items });
+  };
+  const renderPaginationBar = () => {
+    if (pagination === false || !paginationInfo) return null;
+    const { totalPages } = paginationInfo;
+    const paginationConfig = pagination;
+    const paginationLabels = getPaginationLabels(mergedLocale);
+    const localeCode = mergedLocale?.locale;
+    const { simple, showQuickJumper } = resolvePaginationDisplayMode(totalPages, paginationConfig);
+    const totalText = paginationConfig.totalText ?? ((value, range) => formatPaginationTotal(paginationLabels.totalText, value, range, localeCode));
+    return /* @__PURE__ */ jsx("div", { className: getBuiltInPaginationContainerClasses(), children: /* @__PURE__ */ jsx(
+      Pagination,
+      {
+        size: size === "lg" ? "large" : size === "sm" ? "small" : "medium",
+        align: "right",
+        current: currentPage,
+        pageSize: currentPageSize,
+        total: paginationTotal,
+        simple,
+        showQuickJumper,
+        showSizeChanger: paginationConfig.showSizeChanger !== false,
+        showTotal: paginationConfig.showTotal !== false,
+        totalText,
+        pageIndicatorText: paginationConfig.pageIndicatorText,
+        pageSizeOptions: paginationConfig.pageSizeOptions || [10, 20, 50, 100],
+        locale: mergedLocale,
+        onChange: (page) => handlePageChange(page),
+        onPageSizeChange: (_page, pageSize) => handlePageSizeChange(pageSize)
+      }
+    ) });
+  };
+  const setRef = (node) => {
+    rootRef.current = node;
+    if (typeof ref === "function") ref(node);
+    else if (ref) ref.current = node;
+  };
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ...divProps,
+      ref: setRef,
+      className: classNames(
+        listWrapperClasses,
+        getListClasses(bordered),
+        listSizeClasses[size],
+        className
+      ),
+      children: [
+        header ? /* @__PURE__ */ jsx("div", { className: getListHeaderFooterClasses(size, false), children: header }) : null,
+        /* @__PURE__ */ jsxs("div", { className: "relative", "aria-busy": loading || void 0, children: [
+          renderItems(),
+          loading ? /* @__PURE__ */ jsx("div", { className: listLoadingOverlayClasses, children: /* @__PURE__ */ jsx(Loading, { variant: "spinner", "aria-hidden": true, role: "presentation" }) }) : null
+        ] }),
+        footer ? /* @__PURE__ */ jsx("div", { className: getListHeaderFooterClasses(size, true), children: footer }) : null,
+        renderPaginationBar()
+      ]
+    }
+  );
+}
+var List = forwardRef(ListInner);
+var List_default = List;
+
+export {
+  List,
+  List_default
+};

package/dist/chunk-YDO3V3SK.mjs

@@ -0,0 +1,70 @@
+// src/components/Badge.tsx
+import { forwardRef } from "react";
+import {
+  classNames,
+  getBadgeVariantClasses,
+  badgeBaseClasses,
+  badgeSizeClasses,
+  dotSizeClasses,
+  badgeTypeClasses,
+  badgeWrapperClasses,
+  badgePositionClasses,
+  resolveBadgeContent,
+  warnStandaloneBadgeChildren
+} from "@expcat/tigercat-core";
+import { jsx, jsxs } from "react/jsx-runtime";
+var Badge = forwardRef(function Badge2({
+  locale: _locale,
+  variant = "danger",
+  size = "md",
+  type = "number",
+  content,
+  max = 99,
+  showZero = false,
+  position = "top-right",
+  standalone = true,
+  className,
+  children,
+  ["aria-label"]: ariaLabelProp,
+  ["aria-labelledby"]: ariaLabelledbyProp,
+  ["aria-hidden"]: ariaHiddenProp,
+  ...props
+}, ref) {
+  warnStandaloneBadgeChildren(children != null && children !== false, standalone);
+  const resolved = resolveBadgeContent({ type, content, max, showZero });
+  const isDot = resolved.kind === "dot";
+  const isHidden = resolved.kind === "hidden";
+  const badgeClasses = classNames(
+    badgeBaseClasses,
+    getBadgeVariantClasses(variant),
+    isDot ? dotSizeClasses[size] : badgeSizeClasses[size],
+    badgeTypeClasses[type],
+    !standalone && badgePositionClasses[position]
+  );
+  const userNamed = Boolean(ariaLabelProp || ariaLabelledbyProp);
+  const hideFromAT = ariaHiddenProp ?? (!userNamed && (isDot || !standalone));
+  const badgeElement = !isHidden ? /* @__PURE__ */ jsx(
+    "span",
+    {
+      ...standalone ? props : void 0,
+      ref: standalone ? ref : void 0,
+      className: classNames(badgeClasses, standalone && className),
+      "aria-hidden": hideFromAT ? true : ariaHiddenProp,
+      "aria-label": hideFromAT ? void 0 : ariaLabelProp,
+      "aria-labelledby": hideFromAT ? void 0 : ariaLabelledbyProp,
+      children: resolved.kind === "text" ? resolved.value : null
+    }
+  ) : null;
+  if (standalone) {
+    return badgeElement;
+  }
+  return /* @__PURE__ */ jsxs("span", { ref, className: classNames(badgeWrapperClasses, className), ...props, children: [
+    children,
+    badgeElement
+  ] });
+});
+Badge.displayName = "Badge";
+
+export {
+  Badge
+};