@expcat/tigercat-react 1.1.0 → 1.2.0

package/dist/chunk-3QFHVAZT.js

@@ -1,10 +1,12 @@
-'use strict';
+"use strict";Object.defineProperty(exports, "__esModule", {value: true}); 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/ChartGrid.tsx
+var _react = require('react');
 
-var react = require('react');
-var tigercatCore = require('@expcat/tigercat-core');
-var jsxRuntime = require('react/jsx-runtime');
 
-// src/components/ChartGrid.tsx
+
+
+
+var _tigercatcore = require('@expcat/tigercat-core');
+var _jsxruntime = require('react/jsx-runtime');
 var ChartGrid = ({
   xScale,
   yScale,
@@ -20,41 +22,41 @@ var ChartGrid = ({
   className,
   ...props
 }) => {
-  const dasharray = react.useMemo(() => tigercatCore.getChartGridLineDasharray(lineStyle), [lineStyle]);
-  const resolvedXTicks = react.useMemo(() => {
+  const dasharray = _react.useMemo.call(void 0, () => _tigercatcore.getChartGridLineDasharray.call(void 0, lineStyle), [lineStyle]);
+  const resolvedXTicks = _react.useMemo.call(void 0, () => {
     if (!xScale) return [];
-    return tigercatCore.getChartAxisTicks(xScale, { tickCount: xTicks, tickValues: xTickValues });
+    return _tigercatcore.getChartAxisTicks.call(void 0, xScale, { tickCount: xTicks, tickValues: xTickValues });
   }, [xScale, xTicks, xTickValues]);
-  const resolvedYTicks = react.useMemo(() => {
+  const resolvedYTicks = _react.useMemo.call(void 0, () => {
     if (!yScale) return [];
-    return tigercatCore.getChartAxisTicks(yScale, { tickCount: yTicks, tickValues: yTickValues });
+    return _tigercatcore.getChartAxisTicks.call(void 0, yScale, { tickCount: yTicks, tickValues: yTickValues });
   }, [yScale, yTicks, yTickValues]);
   const shouldRenderX = show === "both" || show === "x";
   const shouldRenderY = show === "both" || show === "y";
-  const xRange = xScale?.range;
-  const yRange = yScale?.range;
-  return /* @__PURE__ */ jsxRuntime.jsxs("g", { ...props, className: tigercatCore.classNames(className), transform: `translate(${x}, ${y})`, children: [
-    shouldRenderX && xScale && yRange ? resolvedXTicks.map((tick) => /* @__PURE__ */ jsxRuntime.jsx(
+  const xRange = _optionalChain([xScale, 'optionalAccess', _ => _.range]);
+  const yRange = _optionalChain([yScale, 'optionalAccess', _2 => _2.range]);
+  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "g", { ...props, className: _tigercatcore.classNames.call(void 0, className), transform: `translate(${x}, ${y})`, children: [
+    shouldRenderX && xScale && yRange ? resolvedXTicks.map((tick) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
       "line",
       {
         x1: tick.position,
         y1: yRange[0],
         x2: tick.position,
         y2: yRange[1],
-        className: tigercatCore.chartGridLineClasses,
+        className: _tigercatcore.chartGridLineClasses,
         strokeWidth,
         strokeDasharray: dasharray
       },
       `x-${tick.value}`
     )) : null,
-    shouldRenderY && yScale && xRange ? resolvedYTicks.map((tick) => /* @__PURE__ */ jsxRuntime.jsx(
+    shouldRenderY && yScale && xRange ? resolvedYTicks.map((tick) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
       "line",
       {
         x1: xRange[0],
         y1: tick.position,
         x2: xRange[1],
         y2: tick.position,
-        className: tigercatCore.chartGridLineClasses,
+        className: _tigercatcore.chartGridLineClasses,
         strokeWidth,
         strokeDasharray: dasharray
       },
@@ -64,5 +66,7 @@ var ChartGrid = ({
 };
 var ChartGrid_default = ChartGrid;
 
-exports.ChartGrid = ChartGrid;
-exports.ChartGrid_default = ChartGrid_default;
+
+
+
+exports.ChartGrid = ChartGrid; exports.ChartGrid_default = ChartGrid_default;

package/dist/{chunk-TR4DGL3U.mjs → chunk-3QPCQH62.mjs}

@@ -1,8 +1,15 @@
-import { ImagePreview } from './chunk-WNX4TH7U.mjs';
-import { createContext, useState, useRef, useCallback, useMemo } from 'react';
-import { registerImageGroupItem, unregisterImageGroupItem, getImageGroupClasses } from '@expcat/tigercat-core';
-import { jsx, jsxs } from 'react/jsx-runtime';
+import {
+  ImagePreview
+} from "./chunk-6GYT3EZD.mjs";
 
+// src/components/ImageGroup.tsx
+import { useState, useCallback, useMemo, createContext, useRef } from "react";
+import {
+  getImageGroupClasses,
+  registerImageGroupItem,
+  unregisterImageGroupItem
+} from "@expcat/tigercat-core";
+import { jsx, jsxs } from "react/jsx-runtime";
 var ImageGroupContext = createContext(null);
 var ImageGroup = ({
   preview = true,
@@ -52,4 +59,7 @@ var ImageGroup = ({
   ] }) });
 };
 
-export { ImageGroup, ImageGroupContext };
+export {
+  ImageGroupContext,
+  ImageGroup
+};

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
+};