@expcat/tigercat-react 1.1.0 → 1.2.14

package/dist/chunk-3SV6J7I5.mjs

@@ -0,0 +1,271 @@
+import {
+  renderBodyPortal,
+  useBodyScrollLock,
+  useEscapeKey,
+  useFocusTrap
+} from "./chunk-SEWNVIHH.mjs";
+
+// src/components/Spotlight.tsx
+import React, { useCallback, useEffect, useId, useMemo, useRef, useState } from "react";
+import {
+  captureActiveElement,
+  classNames,
+  focusFirst,
+  getInitialPickerActiveIndex,
+  getPickerComboboxAria,
+  getPickerListboxAria,
+  getPickerNavigationIndex,
+  getPickerOptionAria,
+  getPickerOptionId,
+  getSpotlightOptionClasses,
+  getSpotlightSearchState,
+  getSpotlightShortcutLabel,
+  restoreFocus,
+  shouldCloseOnMaskClick,
+  spotlightEmptyClasses,
+  spotlightGroupClasses,
+  spotlightGroupLabelClasses,
+  spotlightHeaderClasses,
+  spotlightInputClasses,
+  spotlightListClasses,
+  spotlightMaskClasses,
+  spotlightPanelClasses,
+  spotlightRootClasses,
+  spotlightTitleClasses
+} from "@expcat/tigercat-core";
+import { jsx, jsxs } from "react/jsx-runtime";
+var EMPTY_ITEMS = [];
+function getRenderableIcon(icon) {
+  if (icon === null || icon === void 0) return null;
+  if (typeof icon === "string" || typeof icon === "number") return icon;
+  if (React.isValidElement(icon)) return icon;
+  if (Array.isArray(icon)) return icon;
+  return null;
+}
+var Spotlight = ({
+  open,
+  defaultOpen = false,
+  query,
+  defaultQuery = "",
+  items = EMPTY_ITEMS,
+  title = "Spotlight",
+  placeholder = "Search",
+  emptyText = "No results found",
+  inputAriaLabel,
+  listboxLabel,
+  closeOnSelect = true,
+  mask = true,
+  maskClosable = true,
+  zIndex = 1e3,
+  className,
+  defaultActiveFirstItem = true,
+  filterItem,
+  limit,
+  onOpenChange,
+  onQueryChange,
+  onSelect,
+  style,
+  ...rest
+}) => {
+  const [uncontrolledOpen, setUncontrolledOpen] = useState(defaultOpen);
+  const [uncontrolledQuery, setUncontrolledQuery] = useState(defaultQuery);
+  const [activeIndex, setActiveIndex] = useState(-1);
+  const isOpenControlled = open !== void 0;
+  const isQueryControlled = query !== void 0;
+  const resolvedOpen = isOpenControlled ? Boolean(open) : uncontrolledOpen;
+  const resolvedQuery = isQueryControlled ? String(query) : uncontrolledQuery;
+  const reactId = useId();
+  const dialogId = `tiger-spotlight-${reactId}`;
+  const titleId = `${dialogId}-title`;
+  const listboxId = `${dialogId}-listbox`;
+  const dialogRef = useRef(null);
+  const inputRef = useRef(null);
+  const previousActiveElementRef = useRef(null);
+  const searchState = useMemo(
+    () => getSpotlightSearchState(items, resolvedQuery, { filterItem, limit }),
+    [items, resolvedQuery, filterItem, limit]
+  );
+  const setOpenValue = useCallback(
+    (nextOpen) => {
+      if (!isOpenControlled) setUncontrolledOpen(nextOpen);
+      onOpenChange?.(nextOpen);
+    },
+    [isOpenControlled, onOpenChange]
+  );
+  const setQueryValue = useCallback(
+    (nextQuery) => {
+      if (!isQueryControlled) setUncontrolledQuery(nextQuery);
+      onQueryChange?.(nextQuery);
+    },
+    [isQueryControlled, onQueryChange]
+  );
+  const closeSpotlight = useCallback(() => {
+    setOpenValue(false);
+  }, [setOpenValue]);
+  useEscapeKey({ enabled: resolvedOpen, onEscape: closeSpotlight });
+  useBodyScrollLock({ enabled: resolvedOpen });
+  useFocusTrap({ enabled: resolvedOpen, containerRef: dialogRef });
+  useEffect(() => {
+    if (!resolvedOpen) {
+      restoreFocus(previousActiveElementRef.current);
+      return;
+    }
+    previousActiveElementRef.current = captureActiveElement();
+    const timer = window.setTimeout(() => {
+      focusFirst([inputRef.current, dialogRef.current]);
+    }, 0);
+    return () => window.clearTimeout(timer);
+  }, [resolvedOpen]);
+  useEffect(() => {
+    if (!resolvedOpen) {
+      setActiveIndex(-1);
+      return;
+    }
+    setActiveIndex(
+      getInitialPickerActiveIndex(
+        searchState.flatResults,
+        defaultActiveFirstItem,
+        (result) => result.item.disabled === true
+      )
+    );
+  }, [resolvedOpen, resolvedQuery, items, searchState.flatResults, defaultActiveFirstItem]);
+  const selectItem = useCallback(
+    (item) => {
+      if (item.disabled) return;
+      onSelect?.(item);
+      if (closeOnSelect) closeSpotlight();
+    },
+    [closeOnSelect, closeSpotlight, onSelect]
+  );
+  const handleMaskClick = useCallback(
+    (event) => {
+      if (shouldCloseOnMaskClick(event, maskClosable)) {
+        closeSpotlight();
+      }
+    },
+    [closeSpotlight, maskClosable]
+  );
+  const handleKeyDown = (event) => {
+    switch (event.key) {
+      case "ArrowDown":
+      case "ArrowUp":
+      case "Home":
+      case "End":
+        event.preventDefault();
+        setActiveIndex(
+          (current) => getPickerNavigationIndex(
+            searchState.flatResults,
+            current,
+            event.key,
+            (result) => result.item.disabled === true
+          )
+        );
+        break;
+      case "Enter": {
+        event.preventDefault();
+        const result = searchState.flatResults[activeIndex];
+        if (result) selectItem(result.item);
+        break;
+      }
+      case "Escape":
+        event.preventDefault();
+        closeSpotlight();
+        break;
+    }
+  };
+  if (!resolvedOpen) return null;
+  const activeResult = searchState.flatResults[activeIndex];
+  const activeOptionId = activeResult ? getPickerOptionId(listboxId, activeResult.flatIndex) : void 0;
+  const content = /* @__PURE__ */ jsxs("div", { className: spotlightRootClasses, style: { zIndex }, "data-tiger-spotlight-root": "", children: [
+    mask && /* @__PURE__ */ jsx("div", { className: spotlightMaskClasses, "aria-hidden": "true", onClick: handleMaskClick }),
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref: dialogRef,
+        id: dialogId,
+        role: "dialog",
+        "aria-modal": "true",
+        "aria-labelledby": title ? titleId : void 0,
+        tabIndex: -1,
+        className: classNames(spotlightPanelClasses, className),
+        style,
+        ...rest,
+        children: [
+          /* @__PURE__ */ jsxs("div", { className: spotlightHeaderClasses, children: [
+            title && /* @__PURE__ */ jsx("div", { id: titleId, className: spotlightTitleClasses, children: title }),
+            /* @__PURE__ */ jsx(
+              "input",
+              {
+                ref: inputRef,
+                value: resolvedQuery,
+                type: "search",
+                className: spotlightInputClasses,
+                placeholder,
+                "aria-label": inputAriaLabel ?? placeholder,
+                autoComplete: "off",
+                ...getPickerComboboxAria({
+                  expanded: true,
+                  listboxId,
+                  activeOptionId
+                }),
+                onChange: (event) => setQueryValue(event.currentTarget.value),
+                onKeyDown: handleKeyDown
+              }
+            )
+          ] }),
+          searchState.flatResults.length > 0 ? /* @__PURE__ */ jsx(
+            "div",
+            {
+              ...getPickerListboxAria({ id: listboxId, label: listboxLabel }),
+              className: spotlightListClasses,
+              children: searchState.groups.map((group, groupIndex) => /* @__PURE__ */ jsxs(
+                "div",
+                {
+                  className: spotlightGroupClasses,
+                  role: group.label ? "group" : void 0,
+                  "aria-label": group.label,
+                  children: [
+                    group.label && /* @__PURE__ */ jsx("div", { className: spotlightGroupLabelClasses, children: group.label }),
+                    group.items.map((result) => {
+                      const active = result.flatIndex === activeIndex;
+                      const shortcutLabel = getSpotlightShortcutLabel(result.item.shortcut);
+                      const iconNode = getRenderableIcon(result.item.icon);
+                      return /* @__PURE__ */ jsxs(
+                        "div",
+                        {
+                          id: getPickerOptionId(listboxId, result.flatIndex),
+                          ...getPickerOptionAria({ selected: active, disabled: result.item.disabled }),
+                          className: getSpotlightOptionClasses(active, result.item.disabled === true),
+                          onMouseEnter: () => setActiveIndex(result.flatIndex),
+                          onMouseDown: (event) => event.preventDefault(),
+                          onClick: () => selectItem(result.item),
+                          children: [
+                            iconNode && /* @__PURE__ */ jsx("span", { className: "shrink-0", children: iconNode }),
+                            /* @__PURE__ */ jsxs("span", { className: "min-w-0 flex-1", children: [
+                              /* @__PURE__ */ jsx("span", { className: "block truncate text-sm font-medium", children: result.item.label }),
+                              result.item.description && /* @__PURE__ */ jsx("span", { className: "block truncate text-xs text-[var(--tiger-spotlight-item-description,var(--tiger-text-muted,#6b7280))]", children: result.item.description })
+                            ] }),
+                            shortcutLabel && /* @__PURE__ */ jsx("kbd", { className: "shrink-0 rounded border border-[var(--tiger-spotlight-shortcut-border,var(--tiger-border,#d1d5db))] px-1.5 py-0.5 text-xs text-[var(--tiger-spotlight-shortcut-text,var(--tiger-text-muted,#6b7280))]", children: shortcutLabel })
+                          ]
+                        },
+                        String(result.item.key)
+                      );
+                    })
+                  ]
+                },
+                group.label ?? `group-${groupIndex}`
+              ))
+            }
+          ) : /* @__PURE__ */ jsx("div", { className: spotlightEmptyClasses, children: emptyText })
+        ]
+      }
+    )
+  ] });
+  return renderBodyPortal(content);
+};
+var Spotlight_default = Spotlight;
+
+export {
+  Spotlight,
+  Spotlight_default
+};

package/dist/{chunk-WT6CULN3.mjs → chunk-3ZNZLGQO.mjs}

@@ -1,8 +1,36 @@
-import { useTigerConfig } from './chunk-VBZE77VM.mjs';
-import { useMemo, useRef, useState, useCallback } from 'react';
-import { getSpinnerSVG, mergeTigerLocale, getUploadLabels, classNames, prepareUploadFiles, fileToUploadFile, getDragAreaClasses, interpolateUploadLabel, formatFileSize, getUploadButtonClasses, getFileListItemClasses, icon20ViewBox, getUploadStatusIconClasses, successCircleSolidIcon20PathD, errorCircleSolidIcon20PathD, closeSolidIcon20PathD, getPictureCardClasses, handleUploadDrop, handleUploadDragLeave, handleUploadDragOver } from '@expcat/tigercat-core';
-import { jsxs, jsx } from 'react/jsx-runtime';
+import {
+  useTigerConfig
+} from "./chunk-QAIBQHIO.mjs";
 
+// src/components/Upload.tsx
+import { useRef, useState, useCallback, useMemo } from "react";
+import {
+  classNames,
+  icon20ViewBox,
+  closeSolidIcon20PathD,
+  successCircleSolidIcon20PathD,
+  errorCircleSolidIcon20PathD,
+  getSpinnerSVG,
+  getUploadLabels,
+  interpolateUploadLabel,
+  mergeTigerLocale,
+  prepareUploadFiles,
+  fileToUploadFile,
+  createUploadChunks,
+  createUploadQueueItem,
+  getUploadResumeKey,
+  runUploadQueue,
+  handleUploadDragOver,
+  handleUploadDragLeave,
+  handleUploadDrop,
+  formatFileSize,
+  getUploadButtonClasses,
+  getDragAreaClasses,
+  getFileListItemClasses,
+  getPictureCardClasses,
+  getUploadStatusIconClasses
+} from "@expcat/tigercat-core";
+import { jsx, jsxs } from "react/jsx-runtime";
 var spinnerSvg = getSpinnerSVG("spinner");
 var Upload = ({
   accept,
@@ -15,7 +43,13 @@ var Upload = ({
   fileList: controlledFileList,
   showFileList = true,
   autoUpload = true,
+  queue = false,
+  maxConcurrent = 2,
+  chunkSize,
+  resumable = false,
   customRequest,
+  onQueueChange,
+  onChunkProgress,
   onChange,
   onRemove,
   onPreview,
@@ -85,36 +119,96 @@ var Upload = ({
       if (onChange) {
         onChange(uploadFile, nextFileList);
       }
-      if (autoUpload) {
-        uploadFile.status = "uploading";
-        if (customRequest) {
-          customRequest({
-            file,
-            onProgress: (progress) => {
-              uploadFile.progress = progress;
-              if (onProgress) {
-                onProgress(progress, uploadFile);
-              }
-            },
-            onSuccess: (response) => {
-              uploadFile.status = "success";
-              if (onSuccess) {
-                onSuccess(response, uploadFile);
-              }
-            },
-            onError: (error) => {
-              uploadFile.status = "error";
-              uploadFile.error = error.message;
-              if (onError) {
-                onError(error, uploadFile);
-              }
-            }
-          });
-        } else {
-          uploadFile.status = "success";
-        }
+      if (autoUpload && !queue) {
+        await uploadOne(file, uploadFile, () => updateFileList([...nextFileList]));
       }
     }
+    if (autoUpload && queue) {
+      const queueItems = prepared.acceptedFiles.map(
+        (file) => createUploadQueueItem(file, nextFileList.find((item) => item.file === file)?.uid, chunkSize)
+      );
+      onQueueChange?.(queueItems);
+      await runUploadQueue(
+        queueItems,
+        async (item) => {
+          const uploadFile = nextFileList.find((candidate) => candidate.uid === item.id);
+          if (!uploadFile) return;
+          await uploadOne(item.file, uploadFile, () => updateFileList([...nextFileList]));
+        },
+        { concurrency: maxConcurrent, onChange: onQueueChange }
+      );
+    }
+  };
+  const uploadOne = async (file, uploadFile, notify) => {
+    uploadFile.status = "uploading";
+    notify();
+    if (!customRequest) {
+      uploadFile.progress = 100;
+      uploadFile.status = "success";
+      notify();
+      return;
+    }
+    const chunks = chunkSize ? createUploadChunks(file, chunkSize) : [];
+    const resumeKey = resumable ? getUploadResumeKey(file) : void 0;
+    if (chunks.length <= 1) {
+      await requestUpload(file, uploadFile, notify, { resumeKey });
+      return;
+    }
+    for (const chunk of chunks) {
+      const chunkFile = new File([chunk.blob], file.name, {
+        type: file.type,
+        lastModified: file.lastModified
+      });
+      await requestUpload(chunkFile, uploadFile, notify, {
+        originalFile: file,
+        chunk,
+        totalChunks: chunks.length,
+        resumeKey
+      });
+    }
+    uploadFile.progress = 100;
+    uploadFile.status = "success";
+    onSuccess?.({ chunks: chunks.length, resumeKey }, uploadFile);
+    notify();
+  };
+  const requestUpload = (file, uploadFile, notify, options) => {
+    return new Promise((resolve, reject) => {
+      customRequest?.({
+        file,
+        originalFile: options.originalFile,
+        chunk: options.chunk,
+        chunkIndex: options.chunk?.index,
+        totalChunks: options.totalChunks,
+        resumeKey: options.resumeKey,
+        onProgress: (progress) => {
+          const nextProgress = options.chunk ? Math.round(
+            (options.chunk.index + progress / 100) / (options.totalChunks ?? 1) * 100
+          ) : progress;
+          uploadFile.progress = nextProgress;
+          if (options.chunk) {
+            onChunkProgress?.(options.chunk, progress, uploadFile);
+          }
+          onProgress?.(nextProgress, uploadFile);
+          notify();
+        },
+        onSuccess: (response) => {
+          if (!options.chunk) {
+            uploadFile.status = "success";
+            uploadFile.progress = 100;
+            onSuccess?.(response, uploadFile);
+            notify();
+          }
+          resolve();
+        },
+        onError: (error) => {
+          uploadFile.status = "error";
+          uploadFile.error = error.message;
+          onError?.(error, uploadFile);
+          notify();
+          reject(error);
+        }
+      });
+    });
   };
   const handleRemove = (file) => {
     const newFileList = fileList.filter((f) => f.uid !== file.uid);
@@ -399,4 +493,6 @@ var Upload = ({
   ] });
 };
 
-export { Upload };
+export {
+  Upload
+};

package/dist/chunk-4DTMFQCY.js

@@ -0,0 +1,167 @@
+"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 _chunkUKLVOR4Ejs = require('./chunk-UKLVOR4E.js');
+
+// src/components/OrgChart.tsx
+var _react = require('react');
+
+
+
+
+
+
+
+
+
+
+
+var _tigercatcore = require('@expcat/tigercat-core');
+var _jsxruntime = require('react/jsx-runtime');
+function OrgChart({
+  data,
+  width = 720,
+  height = 420,
+  padding = 24,
+  nodeWidth = 160,
+  nodeHeight = 72,
+  levelGap = 80,
+  siblingGap = 32,
+  direction = "vertical",
+  showAvatars = true,
+  showSubtitles = true,
+  hoverable = false,
+  selectable = false,
+  selectedId,
+  activeOpacity = 1,
+  inactiveOpacity = 0.35,
+  colors,
+  title,
+  desc,
+  ariaLabel = "Organization chart",
+  className,
+  onNodeClick,
+  onNodeHover,
+  onSelectedIdChange
+}) {
+  const [innerSelectedId, setInnerSelectedId] = _react.useState.call(void 0, null);
+  const [hoveredId, setHoveredId] = _react.useState.call(void 0, null);
+  const resolvedSelectedId = selectedId === void 0 ? innerSelectedId : selectedId;
+  const innerRect = _react.useMemo.call(void 0, 
+    () => _tigercatcore.getChartInnerRect.call(void 0, width, height, padding),
+    [height, padding, width]
+  );
+  const layout = _react.useMemo.call(void 0, 
+    () => _tigercatcore.computeOrgChartLayout.call(void 0, data, {
+      nodeWidth,
+      nodeHeight,
+      levelGap,
+      siblingGap,
+      direction,
+      colors
+    }),
+    [colors, data, direction, levelGap, nodeHeight, nodeWidth, siblingGap]
+  );
+  const offsetX = Math.max(0, (innerRect.width - layout.width) / 2);
+  const offsetY = Math.max(0, (innerRect.height - layout.height) / 2);
+  const activeId = _nullishCoalesce(resolvedSelectedId, () => ( hoveredId));
+  const selectNode = (node) => {
+    if (selectable && !node.node.disabled) {
+      const nextId = resolvedSelectedId === node.id ? null : node.id;
+      if (selectedId === void 0) setInnerSelectedId(nextId);
+      _optionalChain([onSelectedIdChange, 'optionalCall', _ => _(nextId)]);
+    }
+    _optionalChain([onNodeClick, 'optionalCall', _2 => _2(node.node)]);
+  };
+  const setHoveredNode = (node) => {
+    if (!hoverable) return;
+    setHoveredId(_nullishCoalesce(_optionalChain([node, 'optionalAccess', _3 => _3.id]), () => ( null)));
+    _optionalChain([onNodeHover, 'optionalCall', _4 => _4(_nullishCoalesce(_optionalChain([node, 'optionalAccess', _5 => _5.node]), () => ( null)))]);
+  };
+  const getNodeOpacity = (node) => {
+    if (activeId === null) return activeOpacity;
+    return activeId === node.id ? activeOpacity : inactiveOpacity;
+  };
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+    _chunkUKLVOR4Ejs.ChartCanvas,
+    {
+      width,
+      height,
+      padding,
+      title,
+      desc,
+      className: _tigercatcore.classNames.call(void 0, className),
+      role: "img",
+      "aria-label": ariaLabel,
+      children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "g", { transform: `translate(${offsetX}, ${offsetY})`, "data-series-type": "org-chart", children: [
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "g", { "data-org-chart-links": "true", children: layout.links.map((link) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+          "path",
+          {
+            d: link.path,
+            className: _tigercatcore.orgChartLinkClasses
+          },
+          `${link.sourceId}-${link.targetId}`
+        )) }),
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "g", { "data-org-chart-nodes": "true", children: layout.nodes.map((node) => {
+          const selected = resolvedSelectedId === node.id;
+          const interactive = (hoverable || selectable) && !node.node.disabled;
+          const textStart = showAvatars && node.node.avatar ? 58 : 16;
+          return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+            "g",
+            {
+              transform: `translate(${node.x}, ${node.y})`,
+              className: _tigercatcore.getOrgChartNodeClasses.call(void 0, interactive, selected),
+              opacity: getNodeOpacity(node),
+              role: interactive ? "button" : "group",
+              tabIndex: interactive ? 0 : void 0,
+              "aria-label": _tigercatcore.getOrgChartNodeAriaLabel.call(void 0, node.node),
+              onMouseEnter: () => setHoveredNode(node),
+              onMouseLeave: () => setHoveredNode(null),
+              onClick: () => selectNode(node),
+              onKeyDown: (event) => {
+                if (event.key === "Enter" || event.key === " ") {
+                  event.preventDefault();
+                  selectNode(node);
+                }
+              },
+              children: [
+                /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+                  "rect",
+                  {
+                    width: node.width,
+                    height: node.height,
+                    rx: 8,
+                    className: _tigercatcore.orgChartNodeRectClasses,
+                    stroke: selected ? node.color : void 0,
+                    strokeWidth: selected ? 2 : 1
+                  }
+                ),
+                /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "rect", { width: 4, height: node.height, rx: 2, fill: node.color }),
+                showAvatars && node.node.avatar ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+                  "image",
+                  {
+                    href: node.node.avatar,
+                    x: 16,
+                    y: 16,
+                    width: 32,
+                    height: 32,
+                    preserveAspectRatio: "xMidYMid slice",
+                    "aria-hidden": "true"
+                  }
+                ) : null,
+                /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "text", { x: textStart, y: 26, className: _tigercatcore.orgChartNodeLabelClasses, children: node.node.label }),
+                node.node.title ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "text", { x: textStart, y: 44, className: _tigercatcore.orgChartNodeTitleClasses, children: node.node.title }) : null,
+                showSubtitles && node.node.subtitle ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "text", { x: textStart, y: 60, className: _tigercatcore.orgChartNodeSubtitleClasses, children: node.node.subtitle }) : null
+              ]
+            },
+            node.id
+          );
+        }) })
+      ] })
+    }
+  );
+}
+OrgChart.displayName = "OrgChart";
+
+
+
+exports.OrgChart = OrgChart;