@expcat/tigercat-react 2.1.2 → 2.1.3

package/dist/chunk-6NCG4SLX.mjs

@@ -0,0 +1,158 @@
+import {
+  Dropdown,
+  DropdownItem,
+  DropdownMenu
+} from "./chunk-CJSB5NOK.mjs";
+import {
+  useTigerConfig
+} from "./chunk-RUIFGSVN.mjs";
+
+// src/components/DataExport.tsx
+import {
+  forwardRef,
+  useCallback,
+  useImperativeHandle,
+  useMemo,
+  useRef,
+  useState
+} from "react";
+import {
+  classNames,
+  DEFAULT_DATA_EXPORT_FORMATS,
+  devWarn,
+  getDataExportFormatLabel,
+  getDataExportLabels,
+  isDataExportFormat,
+  mergeTigerLocale,
+  resolveButtonClasses,
+  yieldDataExportFrame
+} from "@expcat/tigercat-core";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var dataExportModulePromise = null;
+function loadDataExportModule() {
+  dataExportModulePromise ??= import("@expcat/tigercat-core/utils/data-export");
+  return dataExportModulePromise;
+}
+function DataExportInner({
+  columns,
+  dataSource,
+  formats = DEFAULT_DATA_EXPORT_FORMATS,
+  fileName = "export",
+  sheetName,
+  cellFormatter,
+  hiddenColumnKeys,
+  disabled = false,
+  locale,
+  labels,
+  className,
+  id,
+  style,
+  onExport,
+  onError,
+  ...rest
+}, ref) {
+  const config = useTigerConfig();
+  const mergedLocale = useMemo(
+    () => mergeTigerLocale(config.locale, locale),
+    [config.locale, locale]
+  );
+  const resolvedLabels = useMemo(
+    () => getDataExportLabels(mergedLocale, labels),
+    [mergedLocale, labels]
+  );
+  const exportingLockRef = useRef(false);
+  const [exporting, setExporting] = useState(false);
+  const [exportError, setExportError] = useState(null);
+  const formatsEmpty = formats.length === 0;
+  const offeredFormats = formatsEmpty ? DEFAULT_DATA_EXPORT_FORMATS : formats;
+  const triggerDisabled = disabled || exporting || formatsEmpty;
+  const handleExport = useCallback(
+    async (format) => {
+      if (triggerDisabled || exportingLockRef.current) return;
+      if (!isDataExportFormat(format)) {
+        devWarn("DataExport.format", `Unknown export format "${String(format)}"`);
+        return;
+      }
+      exportingLockRef.current = true;
+      setExporting(true);
+      setExportError(null);
+      try {
+        await yieldDataExportFrame();
+        const mod = await loadDataExportModule();
+        mod.runDataExport({
+          columns,
+          dataSource,
+          format,
+          fileName,
+          sheetName,
+          cellFormatter,
+          hiddenColumnKeys
+        });
+        onExport?.(format);
+      } catch (error) {
+        setExportError(resolvedLabels.errorText);
+        onError?.(error);
+      } finally {
+        exportingLockRef.current = false;
+        setExporting(false);
+      }
+    },
+    [
+      triggerDisabled,
+      columns,
+      dataSource,
+      fileName,
+      sheetName,
+      cellFormatter,
+      hiddenColumnKeys,
+      onExport,
+      onError,
+      resolvedLabels.errorText
+    ]
+  );
+  useImperativeHandle(ref, () => ({ export: handleExport }), [handleExport]);
+  if (formatsEmpty) {
+    devWarn("DataExport.formats", "formats is empty; the export trigger stays disabled");
+  }
+  const triggerText = exporting ? resolvedLabels.exportingText : offeredFormats.length === 1 ? getDataExportFormatLabel(offeredFormats[0], resolvedLabels) : resolvedLabels.triggerText;
+  const triggerButton = /* @__PURE__ */ jsx(
+    "button",
+    {
+      type: "button",
+      id,
+      style,
+      className: classNames(
+        resolveButtonClasses({
+          variant: "outline",
+          size: "sm",
+          disabled: triggerDisabled
+        }),
+        className
+      ),
+      disabled: triggerDisabled,
+      "aria-busy": exporting || void 0,
+      onClick: offeredFormats.length === 1 && !formatsEmpty ? () => void handleExport(offeredFormats[0]) : void 0,
+      ...rest,
+      children: triggerText
+    }
+  );
+  const errorStatus = exportError ? /* @__PURE__ */ jsx("span", { role: "status", "aria-live": "polite", children: exportError }) : null;
+  if (offeredFormats.length === 1 || formatsEmpty) {
+    return /* @__PURE__ */ jsxs(Fragment, { children: [
+      triggerButton,
+      errorStatus
+    ] });
+  }
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs(Dropdown, { trigger: "click", disabled: triggerDisabled, asChild: true, showArrow: false, children: [
+      triggerButton,
+      /* @__PURE__ */ jsx(DropdownMenu, { children: offeredFormats.map((format) => /* @__PURE__ */ jsx(DropdownItem, { onClick: () => void handleExport(format), children: getDataExportFormatLabel(format, resolvedLabels) }, format)) })
+    ] }),
+    errorStatus
+  ] });
+}
+var DataExport = forwardRef(DataExportInner);
+
+export {
+  DataExport
+};

package/dist/chunk-6NJMDDL6.mjs

@@ -0,0 +1,244 @@
+import {
+  useTigerConfig
+} from "./chunk-RUIFGSVN.mjs";
+
+// src/components/Form.tsx
+import {
+  createContext,
+  useContext,
+  useMemo,
+  useRef,
+  useEffect,
+  useCallback,
+  useImperativeHandle,
+  useReducer,
+  forwardRef
+} from "react";
+import {
+  classNames,
+  createFormEngine,
+  createFormErrorMap,
+  focusFirstInvalidField,
+  mergeTigerLocale,
+  getFormValidationLabels
+} from "@expcat/tigercat-core";
+import { jsx } from "react/jsx-runtime";
+var FormContext = createContext(null);
+var useFormContext = () => useContext(FormContext);
+function isFormEngine(controller) {
+  return typeof controller.replaceValues === "function";
+}
+function FormInner({
+  model,
+  controller,
+  rules,
+  labelWidth,
+  labelPosition = "left",
+  labelAlign,
+  size = "md",
+  inlineMessage = true,
+  showRequiredAsterisk = true,
+  disabled = false,
+  loading = false,
+  children,
+  onSubmit,
+  onValidate,
+  onChange,
+  className,
+  fieldDependencies,
+  conditions,
+  validateDebounce = 0,
+  undoable = false,
+  maxHistorySize = 50,
+  locale,
+  ...domProps
+}, ref) {
+  const config = useTigerConfig();
+  const validationMessages = useMemo(
+    () => getFormValidationLabels(mergeTigerLocale(config.locale, locale)),
+    [config.locale, locale]
+  );
+  const optionsRef = useRef({
+    rules,
+    conditions,
+    fieldDependencies,
+    validateDebounce,
+    onValidate,
+    onChange,
+    validationMessages
+  });
+  optionsRef.current = {
+    rules,
+    conditions,
+    fieldDependencies,
+    validateDebounce,
+    onValidate,
+    onChange,
+    validationMessages
+  };
+  const ownedEngineRef = useRef(null);
+  if (!controller && ownedEngineRef.current === null) {
+    ownedEngineRef.current = createFormEngine({
+      initialValues: model ?? {},
+      undoable,
+      maxHistorySize,
+      getRules: () => optionsRef.current.rules,
+      getConditions: () => optionsRef.current.conditions,
+      getFieldDependencies: () => optionsRef.current.fieldDependencies,
+      getMessages: () => optionsRef.current.validationMessages,
+      getValidateDebounce: () => optionsRef.current.validateDebounce,
+      onValidate: (fieldName, valid, error) => optionsRef.current.onValidate?.(fieldName, valid, error),
+      onValuesChange: (next) => optionsRef.current.onChange?.(next)
+    });
+  }
+  const engine = controller && isFormEngine(controller) ? controller : ownedEngineRef.current;
+  if (!engine) {
+    throw new Error("Form is missing a form engine");
+  }
+  if (!controller && model !== void 0) {
+    engine.replaceValues(model, { emit: false });
+  }
+  if (controller && isFormEngine(controller)) {
+    controller.setOptions({
+      rules,
+      conditions,
+      fieldDependencies,
+      messages: validationMessages,
+      validateDebounce,
+      onValidate
+    });
+  }
+  const [, rerender] = useReducer((count) => count + 1, 0);
+  useEffect(() => {
+    const unsubscribe = engine.subscribe(rerender);
+    return unsubscribe;
+  }, [engine]);
+  useEffect(() => {
+    const owned = ownedEngineRef.current;
+    return () => {
+      owned?.dispose();
+      ownedEngineRef.current = null;
+    };
+  }, []);
+  const formElementRef = useRef(null);
+  const values = engine.getValues();
+  const errors = engine.getErrors();
+  const errorsByField = useMemo(() => createFormErrorMap(errors), [errors]);
+  const validateField = useCallback(
+    async (fieldName, rulesOverride, trigger) => {
+      await engine.validateField(fieldName, rulesOverride, trigger);
+    },
+    [engine]
+  );
+  const submitForm = useCallback(async () => {
+    if (loading) return false;
+    const valid = await engine.validate();
+    if (!valid) {
+      focusFirstInvalidField(formElementRef.current);
+    }
+    onSubmit?.({ valid, values: engine.getValues(), errors: engine.getErrors() });
+    return valid;
+  }, [engine, loading, onSubmit]);
+  useImperativeHandle(
+    ref,
+    () => ({
+      validate: () => engine.validate(),
+      validateFields: (fieldNames) => engine.validateFields(fieldNames),
+      validateField,
+      clearValidate: (fieldNames) => engine.clearValidate(fieldNames),
+      resetFields: () => engine.reset(),
+      addField: (fieldName, defaultValue) => engine.addField(fieldName, defaultValue),
+      removeField: (fieldName) => engine.removeField(fieldName),
+      undo: () => engine.undo(),
+      redo: () => engine.redo(),
+      snapshotHistory: () => engine.snapshotHistory(),
+      get canUndo() {
+        return engine.canUndo;
+      },
+      get canRedo() {
+        return engine.canRedo;
+      }
+    }),
+    [engine, validateField]
+  );
+  const contextValue = useMemo(
+    () => ({
+      model: values,
+      rules,
+      labelWidth,
+      labelPosition,
+      labelAlign,
+      size,
+      inlineMessage,
+      showRequiredAsterisk,
+      disabled,
+      loading,
+      errors,
+      errorsByField,
+      registerFieldRules: engine.registerFieldRules,
+      registerFieldCondition: engine.registerFieldCondition,
+      getFieldConditionState: engine.getFieldConditionState,
+      validateField,
+      clearValidate: engine.clearValidate,
+      getFieldValue: engine.getFieldValue,
+      updateValue: engine.setFieldValue,
+      validate: () => engine.validate(),
+      validateFields: (fieldNames) => engine.validateFields(fieldNames),
+      getValues: () => engine.getValues(),
+      submit: submitForm
+    }),
+    [
+      values,
+      rules,
+      labelWidth,
+      labelPosition,
+      labelAlign,
+      size,
+      inlineMessage,
+      showRequiredAsterisk,
+      disabled,
+      loading,
+      errors,
+      errorsByField,
+      engine,
+      submitForm,
+      validateField
+    ]
+  );
+  const handleSubmit = async (event) => {
+    event.preventDefault();
+    await submitForm();
+  };
+  const handleReset = (event) => {
+    event.preventDefault();
+    engine.reset();
+  };
+  const formClasses = classNames(
+    "tiger-form",
+    `tiger-form--label-${labelPosition}`,
+    disabled && "tiger-form--disabled",
+    loading && "tiger-form--loading",
+    className
+  );
+  return /* @__PURE__ */ jsx(FormContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx(
+    "form",
+    {
+      ...domProps,
+      ref: formElementRef,
+      className: formClasses,
+      noValidate: true,
+      "aria-busy": loading || void 0,
+      onSubmit: handleSubmit,
+      onReset: handleReset,
+      children: /* @__PURE__ */ jsx("fieldset", { disabled: disabled || loading, className: "contents m-0 min-w-0 border-0 p-0", children })
+    }
+  ) });
+}
+var FormForward = forwardRef(FormInner);
+FormForward.displayName = "TigerForm";
+var Form = FormForward;
+
+export {
+  useFormContext,
+  Form
+};

package/dist/chunk-6R66IQ5V.mjs

@@ -0,0 +1,214 @@
+import {
+  useTigerConfig
+} from "./chunk-RUIFGSVN.mjs";
+
+// src/components/Steps.tsx
+import React, { createContext, useContext, useMemo, useCallback } from "react";
+import {
+  classNames,
+  getStepContentClasses,
+  getStepDescriptionClasses,
+  getStepIconClasses,
+  getStepItemClasses,
+  getStepTailClasses,
+  getStepTitleClasses,
+  getStepsContainerClasses,
+  calculateStepStatus,
+  clampStepCurrent,
+  getStepStatusText,
+  isStepsItemType,
+  mergeTigerLocale,
+  getStepsLabels,
+  stepFinishIconViewBox,
+  stepFinishIconStrokeWidth,
+  stepFinishIconPathD
+} from "@expcat/tigercat-core";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var StepsContext = createContext(null);
+function useStepsContext() {
+  return useContext(StepsContext);
+}
+var StepsItem = ({
+  title,
+  description,
+  icon,
+  status: customStatus,
+  disabled = false,
+  stepIndex = 0,
+  isLast = false,
+  className,
+  style,
+  ...props
+}) => {
+  const stepsContext = useStepsContext();
+  if (!stepsContext) {
+    throw new Error("StepsItem must be used within a Steps component");
+  }
+  const stepStatus = calculateStepStatus(
+    stepIndex,
+    stepsContext.current,
+    stepsContext.status,
+    customStatus
+  );
+  const isClickable = !!stepsContext.handleStepClick && !disabled;
+  const itemClasses = classNames(getStepItemClasses(stepsContext.direction, isLast), className);
+  const iconClasses = getStepIconClasses(stepStatus, stepsContext.size, stepsContext.simple, !!icon);
+  const tailClasses = getStepTailClasses(
+    stepsContext.direction,
+    stepStatus,
+    isLast,
+    stepsContext.size,
+    stepsContext.simple
+  );
+  const contentClasses = getStepContentClasses(stepsContext.direction);
+  const titleClasses = getStepTitleClasses(stepStatus, stepsContext.size, isClickable);
+  const descriptionClasses = getStepDescriptionClasses(stepStatus, stepsContext.size);
+  const handleClick = () => {
+    if (!isClickable) return;
+    stepsContext.handleStepClick?.(stepIndex);
+  };
+  const statusText = getStepStatusText(stepStatus, stepsContext.labels);
+  const renderIcon = () => {
+    const inner = icon ? icon : stepStatus === "finish" ? /* @__PURE__ */ jsx(
+      "svg",
+      {
+        className: "w-4 h-4 shrink-0 tiger-animate-fade-in",
+        fill: "none",
+        stroke: "currentColor",
+        strokeWidth: stepFinishIconStrokeWidth,
+        viewBox: stepFinishIconViewBox,
+        "aria-hidden": "true",
+        children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: stepFinishIconPathD })
+      }
+    ) : stepStatus === "error" ? /* @__PURE__ */ jsx("span", { "aria-hidden": "true", children: "!" }) : /* @__PURE__ */ jsx("span", { "aria-hidden": "true", children: stepIndex + 1 });
+    return /* @__PURE__ */ jsx("div", { className: iconClasses, "aria-hidden": "true", children: inner });
+  };
+  const renderContent = () => /* @__PURE__ */ jsxs("div", { className: contentClasses, children: [
+    /* @__PURE__ */ jsx("div", { className: titleClasses, children: title }),
+    !stepsContext.simple && description && /* @__PURE__ */ jsx("div", { className: descriptionClasses, children: description })
+  ] });
+  const body = /* @__PURE__ */ jsxs(Fragment, { children: [
+    stepsContext.direction === "vertical" ? /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+      renderIcon(),
+      /* @__PURE__ */ jsx("div", { className: tailClasses })
+    ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+      renderIcon(),
+      /* @__PURE__ */ jsx("div", { className: tailClasses })
+    ] }),
+    renderContent(),
+    /* @__PURE__ */ jsx("span", { className: "sr-only", children: statusText })
+  ] });
+  return /* @__PURE__ */ jsx(
+    "li",
+    {
+      ...props,
+      className: itemClasses,
+      style,
+      "aria-current": stepIndex === stepsContext.current ? "step" : void 0,
+      "aria-disabled": disabled || void 0,
+      children: isClickable ? /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          className: stepsContext.direction === "vertical" ? "flex w-full flex-row items-start bg-transparent p-0 text-start" : "flex w-full flex-col items-center bg-transparent p-0",
+          onClick: handleClick,
+          children: body
+        }
+      ) : body
+    }
+  );
+};
+var Steps = ({
+  current = 0,
+  status = "process",
+  direction = "horizontal",
+  size = "default",
+  simple = false,
+  clickable = false,
+  items,
+  className,
+  style,
+  onChange,
+  children,
+  locale,
+  labels: labelsOverride,
+  ...props
+}) => {
+  const config = useTigerConfig();
+  const mergedLocale = useMemo(
+    () => mergeTigerLocale(config.locale, locale),
+    [config.locale, locale]
+  );
+  const stepLabels = useMemo(
+    () => getStepsLabels(mergedLocale, labelsOverride),
+    [mergedLocale, labelsOverride]
+  );
+  const { "aria-label": ariaLabelProp, ...rest } = props;
+  const itemNodes = useMemo(() => {
+    if (items && items.length > 0) {
+      return items.map((item) => /* @__PURE__ */ jsx(
+        StepsItem,
+        {
+          title: item.title,
+          description: item.description,
+          icon: item.icon,
+          status: item.status,
+          disabled: item.disabled
+        },
+        item.key ?? item.title
+      ));
+    }
+    return React.Children.toArray(children).filter(
+      (child) => React.isValidElement(child) && isStepsItemType(child.type, StepsItem)
+    );
+  }, [items, children]);
+  const clampedCurrent = clampStepCurrent(current, itemNodes.length);
+  const containerClasses = useMemo(
+    () => classNames(getStepsContainerClasses(direction), className),
+    [direction, className]
+  );
+  const handleStepClick = useCallback(
+    (index) => {
+      if (!clickable) return;
+      onChange?.(index);
+    },
+    [clickable, onChange]
+  );
+  const contextValue = useMemo(
+    () => ({
+      current: clampedCurrent,
+      status,
+      direction,
+      size,
+      simple,
+      clickable,
+      labels: stepLabels,
+      handleStepClick: clickable ? handleStepClick : void 0
+    }),
+    [clampedCurrent, status, direction, size, simple, clickable, stepLabels, handleStepClick]
+  );
+  const stepsWithProps = itemNodes.map((child, index) => {
+    if (!React.isValidElement(child)) return child;
+    return React.cloneElement(child, {
+      stepIndex: index,
+      isLast: index === itemNodes.length - 1
+    });
+  });
+  return /* @__PURE__ */ jsx(StepsContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx(
+    "ol",
+    {
+      ...rest,
+      className: containerClasses,
+      style,
+      role: "list",
+      "aria-label": ariaLabelProp ?? stepLabels.ariaLabel,
+      children: stepsWithProps
+    }
+  ) });
+};
+
+export {
+  useStepsContext,
+  StepsItem,
+  Steps
+};