@wisdomgarden/torque 0.1.0

package/dist/components/_inner/base-select/common/select.types.d.ts

@@ -0,0 +1,169 @@
+import { FormProps, InputWrapProps, RefProps, RootClassNameProps, SelectSize } from '../../../../common/components.types';
+import { BaseInputClassNames } from '../../../base-input';
+import { PopoverPosition } from '../../../popover/popover.types';
+import type { OptionsDropDownEmptyState } from '../../dropdown/options-drop-down';
+import type { IconName } from '@wisdomgarden/torque-icons';
+export type RenderOptionFunction = (option: SelectOptions, selected?: boolean) => React.ReactNode;
+export interface SelectOptionsProps {
+    options: SelectOptions[];
+    multiSelect?: boolean;
+    value?: string | string[];
+    defaultValue?: string | string[];
+    header?: React.ReactNode;
+    footer?: React.ReactNode;
+    emptyState?: OptionsDropDownEmptyState;
+    searchable?: boolean;
+    /**
+     * 自定义选项渲染函数,业务需要实现对移动端和PC端的判断，渲染不同的符合的样式。
+     */
+    renderOption?: RenderOptionFunction;
+}
+export interface SelectProps extends InputWrapProps, FormProps, RootClassNameProps, RefProps<HTMLInputElement>, SelectOptionsProps {
+    /**
+     * 左侧图标名称
+     */
+    leftIconName?: IconName;
+    /**
+     * 辅助访问标签
+     */
+    'aria-label'?: string;
+    /**
+     * 当前选中的值（受控模式）
+     */
+    value?: string;
+    /**
+     * 默认选中的值（非受控模式）
+     */
+    defaultValue?: string;
+    /**
+     * 由父组件计算好的显示文本（option.label），
+     * 提供后 trigger 直接使用，不再从 options 中查找。
+     */
+    displayValue?: string;
+    /**
+     * 唯一标识符
+     */
+    id?: string;
+    /**
+     * 选中值改变时的回调事件
+     */
+    onChange?: (value: string | null) => void;
+    /**
+     * 清除选中值时的回调事件
+     */
+    onClear?: () => void;
+    /**
+     * 下拉框的宽度
+     */
+    dropDownWidth?: string;
+    /**
+     * 是否支持搜索
+     */
+    searchable?: boolean;
+    /**
+     * 是否禁用
+     */
+    disabled?: boolean;
+    /**
+     * 占位符文本，在移动端也会作为 BottomAction 的标题
+     */
+    placeholder?: string;
+    /**
+     * 是否显示错误状态，传入字符串时显示错误文字
+     */
+    error?: boolean | string;
+    /**
+     * 是否允许清除选中值
+     */
+    clearable?: boolean;
+    /**
+     * 是否隐藏选中的值（仅显示图标）
+     */
+    hideValue?: boolean;
+    /**
+     * 左侧图标是否使用原色
+     */
+    leftIconUseOriginalColor?: boolean;
+    /**
+     * 圆角大小
+     * @default 'full'
+     */
+    borderRadius?: 'full' | 'sm';
+    /**
+     * 选择框尺寸
+     */
+    size?: SelectSize;
+    /**
+     * 各内部层的额外 className，透传给底层 BaseInput
+     */
+    classNames?: BaseInputClassNames;
+    /** PC 端下拉是否渲染到 Portal。@default true */
+    withinPortal?: boolean;
+}
+export type BaseSearchSelectProps = SelectProps;
+export interface SingleSelectRenderTargetProps extends SelectProps {
+    /** 当前选中项的显示文本 */
+    displayValue: string;
+    /** PC 端下拉是否展开 */
+    dropdownOpened: boolean;
+    'aria-describedby'?: string;
+}
+export interface BaseSingleSelectProps extends SelectProps {
+    /** 内部调用方可覆盖 PC 浮层位置。 */
+    position?: PopoverPosition;
+    renderTarget: (props: SingleSelectRenderTargetProps) => React.ReactElement;
+    renderDropdownHeader?: (props: SingleSelectRenderTargetProps) => React.ReactNode;
+}
+export interface SelectOptions {
+    /**
+     * 选项的值，必须唯一
+     */
+    value: string;
+    /**
+     * 选项的显示文本
+     */
+    label: string;
+    /**
+     * 选项左侧的图标名称
+     */
+    leftIconName?: string;
+    /**
+     * 左侧图标是否使用原色
+     */
+    leftUseOriginalColor?: boolean;
+    /**
+     * 选项右侧的纯展示图标
+     */
+    rightIconName?: IconName;
+    /**
+     * 右侧图标是否使用 SVG 原色
+     */
+    rightIconUseOriginalColor?: boolean;
+    /**
+     * 是否禁用该选项
+     */
+    disabled?: boolean;
+    /**
+     * 选项的层级，默认为 0，表示一级选项。可以通过增加层级来实现树形结构的选择框。
+     */
+    level?: number;
+}
+/** 仍供通用动效配置使用；Select 迁移后不再作为 store 契约。 */
+export interface TransitionProps {
+    transition: {
+        in: {
+            opacity: number;
+            transform: string;
+        };
+        out: {
+            opacity: number;
+            transform: string;
+        };
+        common: {
+            transformOrigin: string;
+        };
+        transitionProperty: string;
+    };
+    duration: number;
+    timingFunction: string;
+}

package/dist/components/_inner/base-select/common/select.types.js

@@ -0,0 +1 @@
+"use client";

package/dist/components/_inner/base-select/search-select/index.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+import { BaseSearchSelectProps } from '../common/select.types';
+export declare const SearchSelect: {
+    ({ ref, ...props }: BaseSearchSelectProps): React.JSX.Element;
+    displayName: string;
+};

package/dist/components/_inner/base-select/search-select/index.js

@@ -0,0 +1,106 @@
+"use client";
+import { jsxs as y, jsx as l } from "react/jsx-runtime";
+import { useUncontrolled as x } from "@mantine/hooks";
+import { clsx as O } from "clsx";
+import { useCallback as v, useState as s, useEffect as D } from "react";
+import { useFormWrapperProps as L } from "../../../../common/use-form-wrapper-props.js";
+import "../../../../provider/ui-context.js";
+import { useLocale as N } from "../../../../provider/hooks.js";
+import { BaseInput as R } from "../../../base-input/base-input.js";
+import { Combobox as b } from "../../../combobox/combobox.js";
+import { useCombobox as V } from "../../../combobox/hooks/use-combobox.js";
+import { FormItemWrapper as W } from "../../../form-wrapper/form-item-wrapper.js";
+import { OptionsDropDown as P } from "../../dropdown/options-drop-down.js";
+import h from "./search-select.module.css.js";
+const p = ({ ref: d, ...e }) => {
+  const a = N(), { wrapProps: g, outerDescribedBy: w } = L(e, e.id), [c, u] = x({
+    value: e.value,
+    defaultValue: e.defaultValue,
+    finalValue: "",
+    onChange: e.onChange
+  }), i = v(
+    () => e.options.find((t) => t.value === c)?.label ?? "",
+    [c, e.options]
+  ), [C, o] = s(i), [m, r] = s(""), n = V({
+    onDropdownOpen: () => r(""),
+    onDropdownClose: () => {
+      o(i()), r("");
+    }
+  });
+  D(() => {
+    o(i());
+  }, [i]);
+  const I = m ? e.options.filter((t) => t.label.includes(m)) : e.options;
+  return /* @__PURE__ */ y(
+    b,
+    {
+      store: n,
+      position: "bottom-start",
+      onOptionSubmit: (t) => {
+        const f = String(t);
+        u(f), o(
+          e.options.find((S) => S.value === f)?.label ?? ""
+        ), r("");
+      },
+      children: [
+        /* @__PURE__ */ l(W, { ...g, id: e.id, children: /* @__PURE__ */ l(b.Target, { targetType: "input", children: /* @__PURE__ */ l(
+          A,
+          {
+            inputRef: d,
+            id: e.id,
+            size: e.size,
+            "aria-label": e["aria-label"],
+            rightIconName: "arrow-down-filled",
+            rightIconColor: "regular",
+            rightIconAriaLabel: n.opened ? a.collapse : a.expand,
+            onRightIconClick: n.toggle,
+            leftIconName: e.leftIconName,
+            rightIconClassName: O(
+              h.dropdownArrow,
+              n.opened && h.dropdownArrowOpen
+            ),
+            value: C,
+            onChange: (t) => {
+              o(t.target.value), r(t.target.value);
+            },
+            disabled: e.disabled,
+            error: e.error,
+            placeholder: e.placeholder,
+            leftIconUseOriginalColor: e.leftIconUseOriginalColor,
+            clearable: e.clearable,
+            onClear: () => {
+              o(""), r(""), e.onClear ? e.onClear() : u("");
+            },
+            borderRadius: e.borderRadius,
+            required: e.required,
+            "aria-describedby": w
+          }
+        ) }) }),
+        /* @__PURE__ */ l(
+          P,
+          {
+            options: I,
+            value: c,
+            renderOption: e.renderOption,
+            width: e.dropDownWidth,
+            matchTargetWidth: !e.dropDownWidth,
+            withinPortal: e.withinPortal ?? !0,
+            title: e.placeholder,
+            emptyState: e.emptyState
+          }
+        )
+      ]
+    }
+  );
+};
+p.displayName = "SearchSelect";
+function A({
+  ref: d,
+  inputRef: e,
+  ...a
+}) {
+  return /* @__PURE__ */ l(R, { ...a, ref: e, wrapperRef: d });
+}
+export {
+  p as SearchSelect
+};

package/dist/components/_inner/base-select/search-select/search-select.module.css.js

@@ -0,0 +1,10 @@
+"use client";
+const o = "_dropdownArrow_1kjuz_2", r = "_dropdownArrowOpen_1kjuz_6", d = {
+  dropdownArrow: o,
+  dropdownArrowOpen: r
+};
+export {
+  d as default,
+  o as dropdownArrow,
+  r as dropdownArrowOpen
+};

package/dist/components/_inner/base-select/single-select/index.d.ts

@@ -0,0 +1 @@
+export { SingleSelect } from './single-select';

package/dist/components/_inner/base-select/single-select/index.js

@@ -0,0 +1,5 @@
+"use client";
+import { SingleSelect as t } from "./single-select.js";
+export {
+  t as SingleSelect
+};

package/dist/components/_inner/base-select/single-select/single-select.d.ts

@@ -0,0 +1,5 @@
+import { BaseSingleSelectProps } from '../common/select.types';
+/**
+ * 组件库内部使用
+ */
+export declare function SingleSelect(props: Readonly<BaseSingleSelectProps>): import("react").JSX.Element;

package/dist/components/_inner/base-select/single-select/single-select.js

@@ -0,0 +1,58 @@
+"use client";
+import { jsxs as s, jsx as n } from "react/jsx-runtime";
+import { useUncontrolled as b } from "@mantine/hooks";
+import { useFormWrapperProps as g } from "../../../../common/use-form-wrapper-props.js";
+import { Combobox as d } from "../../../combobox/combobox.js";
+import { useCombobox as w } from "../../../combobox/hooks/use-combobox.js";
+import { FormItemWrapper as D } from "../../../form-wrapper/form-item-wrapper.js";
+import { OptionsDropDown as x } from "../../dropdown/options-drop-down.js";
+function p(e) {
+  const r = w(), { wrapProps: l, rest: m, outerDescribedBy: u } = g(
+    e,
+    e.id
+  ), { emptyState: c, ...h } = m, [o, i] = b({
+    value: e.value,
+    defaultValue: e.defaultValue,
+    finalValue: "",
+    onChange: e.onChange
+  }), f = e.options.find((t) => t.value === o)?.label ?? "", a = {
+    ...h,
+    value: o,
+    displayValue: f,
+    dropdownOpened: r.opened,
+    onChange: (t) => i(t ?? "")
+  };
+  return /* @__PURE__ */ s(
+    d,
+    {
+      store: r,
+      position: e.position,
+      onOptionSubmit: (t) => {
+        i(String(t));
+      },
+      children: [
+        /* @__PURE__ */ n(D, { ...l, id: e.id, children: /* @__PURE__ */ n(d.Target, { children: e.renderTarget({
+          ...a,
+          "aria-describedby": u
+        }) }) }),
+        /* @__PURE__ */ n(
+          x,
+          {
+            options: e.options,
+            value: o,
+            renderOption: e.renderOption,
+            width: e.dropDownWidth,
+            matchTargetWidth: !e.dropDownWidth,
+            withinPortal: e.withinPortal ?? !0,
+            title: e.placeholder,
+            emptyState: c,
+            header: e.renderDropdownHeader ? e.renderDropdownHeader(a) : null
+          }
+        )
+      ]
+    }
+  );
+}
+export {
+  p as SingleSelect
+};

package/dist/components/_inner/base-select/target/single-select-target.d.ts

@@ -0,0 +1,15 @@
+import { AriaAttributes } from 'react';
+import { SelectProps } from '../common/select.types';
+type SingleSelectTargetProps = SelectProps & {
+    readonly displayValue?: string;
+    readonly dropdownOpened?: boolean;
+    readonly onClick?: () => void;
+    readonly renderTarget?: unknown;
+    readonly renderDropdownHeader?: unknown;
+    readonly position?: unknown;
+};
+export declare const SingleSelectTarget: {
+    (props: SingleSelectTargetProps & AriaAttributes): import("react").JSX.Element;
+    displayName: string;
+};
+export {};

package/dist/components/_inner/base-select/target/single-select-target.js

@@ -0,0 +1,56 @@
+"use client";
+import { jsx as o } from "react/jsx-runtime";
+import { BaseInput as t } from "../../../base-input/base-input.js";
+const c = (e) => {
+  const {
+    renderTarget: u,
+    renderDropdownHeader: f,
+    renderOption: g,
+    dropdownOpened: h,
+    className: b,
+    dropDownWidth: m,
+    withinPortal: s,
+    position: w,
+    options: a,
+    displayValue: l,
+    defaultValue: C,
+    ref: r,
+    ...n
+  } = e, i = l ?? (e.value && a.find((d) => d.value === e.value)?.label) ?? e.value ?? "";
+  return /* @__PURE__ */ o(
+    t,
+    {
+      ...n,
+      imeSafe: !1,
+      size: e.size,
+      wrapperRef: r,
+      id: e.id,
+      "aria-label": e["aria-label"],
+      "aria-describedby": e["aria-describedby"],
+      value: i,
+      onClear: () => {
+        e.onClear ? e.onClear() : e.onChange?.("");
+      },
+      onChange: () => {
+      },
+      disabled: e.disabled,
+      error: e.error,
+      leftIconName: e.leftIconName,
+      leftIconUseOriginalColor: e.leftIconUseOriginalColor,
+      readOnly: !0,
+      pointer: !0,
+      hideValue: e.hideValue,
+      clearable: e.clearable,
+      placeholder: e.placeholder,
+      rightIconName: "arrow-down-filled",
+      rightIconColor: "regular",
+      rightIconClassName: `${e.dropdownOpened ? "rotate-180" : ""} transition-transform`,
+      onClick: () => e.onClick?.(),
+      borderRadius: e.borderRadius
+    }
+  );
+};
+c.displayName = "SingleSelectTarget";
+export {
+  c as SingleSelectTarget
+};

package/dist/components/_inner/bottom-action/bottom-action-item.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+import { RenderOptionFunction } from '../base-select/common/select.types';
+import { BottomActionItem, BottomActionOnClick } from './bottom-action.types';
+export declare function ActionItem({ currentItem: item, handleItemClick, labelCenter, selectType, value, renderOption, }: {
+    readonly currentItem: BottomActionItem;
+    readonly handleItemClick: BottomActionOnClick;
+    readonly labelCenter?: boolean;
+    readonly selectType?: 'single' | 'multiple';
+    readonly value?: string | string[];
+    readonly renderOption?: RenderOptionFunction;
+}): React.JSX.Element;

package/dist/components/_inner/bottom-action/bottom-action-item.js

@@ -0,0 +1,140 @@
+"use client";
+import { jsx as r, jsxs as i } from "react/jsx-runtime";
+import { Divider as I, Text as g, Group as t, UnstyledButton as v } from "@mantine/core";
+import { Icon as b } from "@wisdomgarden/torque-icons";
+import { clsx as d } from "clsx";
+import { Checkbox as x } from "../../checkbox/checkbox.js";
+import { IconButton as y } from "../../icon-button/icon-button.js";
+import { Tooltip as f } from "../../tooltip/index.js";
+import a from "./bottom-action.module.css.js";
+function S({
+  currentItem: o,
+  handleItemClick: p,
+  labelCenter: s,
+  selectType: c,
+  value: h,
+  renderOption: N
+}) {
+  if (o.type === "divider")
+    return /* @__PURE__ */ r(I, { my: "xs", className: a.itemDivider });
+  if (o.type === "thick-divider")
+    return /* @__PURE__ */ r("div", { className: a.thickDivider });
+  if (o.type === "label")
+    return /* @__PURE__ */ r(
+      g,
+      {
+        className: d(
+          a.itemLabelHeader,
+          s && a.itemLabelHeaderCenter
+        ),
+        children: o.label
+      }
+    );
+  const u = o.dangerous, e = o.disabled, n = c === "single" ? h === o.value : h?.includes(o.value ?? ""), w = u ? "dangerous" : n ? "selected" : "default", m = n ? "brand" : "regular";
+  return /* @__PURE__ */ i("div", { className: a.rowWrap, children: [
+    e && o.disabledTooltip && /* @__PURE__ */ r(f, { label: o.disabledTooltip, children: /* @__PURE__ */ r(
+      "div",
+      {
+        className: a.disabledOverlay,
+        onClickCapture: (l) => l.stopPropagation()
+      }
+    ) }),
+    /* @__PURE__ */ i(
+      t,
+      {
+        className: a.row,
+        "data-color": w,
+        style: {
+          opacity: e ? 0.4 : 1,
+          cursor: e ? "not-allowed" : "pointer"
+        },
+        gap: 0,
+        children: [
+          /* @__PURE__ */ r(
+            v,
+            {
+              disabled: e,
+              "data-testid": o["data-testid"],
+              "aria-disabled": e,
+              "aria-pressed": c ? n : void 0,
+              type: "button",
+              className: a.rowButton,
+              onClick: (l) => p(l, o),
+              children: N?.({ ...o }, n) ?? /* @__PURE__ */ i(t, { justify: "space-between", wrap: "nowrap", children: [
+                /* @__PURE__ */ i(
+                  t,
+                  {
+                    gap: "sm",
+                    wrap: "nowrap",
+                    className: d(
+                      a.rowMain,
+                      s && a.rowMainCenter
+                    ),
+                    children: [
+                      o.leftIconName && !s && /* @__PURE__ */ r(
+                        b,
+                        {
+                          name: o.leftIconName,
+                          width: 20,
+                          height: 20,
+                          useOriginalColor: o.leftUseOriginalColor,
+                          className: o.leftIconClassName ?? a.itemIcon
+                        }
+                      ),
+                      /* @__PURE__ */ r("span", { className: d(a.label, o.labelClassName), children: o.label })
+                    ]
+                  }
+                ),
+                !s && /* @__PURE__ */ i(t, { gap: "xs", wrap: "nowrap", className: a.rowSide, children: [
+                  o.description && /* @__PURE__ */ r(g, { className: a.itemDescription, children: o.description }),
+                  !o.rightIconButtonProps && o.children && o.children.length > 0 && /* @__PURE__ */ r(
+                    b,
+                    {
+                      name: "right",
+                      width: 16,
+                      height: 16,
+                      className: a.chevron
+                    }
+                  )
+                ] })
+              ] })
+            }
+          ),
+          !s && o.rightIconButtonProps && /* @__PURE__ */ r(
+            f,
+            {
+              label: o.rightIconTooltip,
+              disabled: !o.rightIconTooltip,
+              children: /* @__PURE__ */ r(
+                y,
+                {
+                  variant: "text",
+                  color: u ? "dangerous" : m,
+                  ...o.rightIconButtonProps,
+                  "aria-label": o.rightIconButtonProps["aria-label"] || o.rightIconTooltip
+                }
+              )
+            }
+          ),
+          c === "multiple" && /* @__PURE__ */ r("div", { className: a.checkboxWrap, children: /* @__PURE__ */ r(
+            x,
+            {
+              checked: n,
+              disabled: e,
+              onChange: (l) => {
+                l.stopPropagation(), p(
+                  l,
+                  o
+                );
+              },
+              tabIndex: -1
+            }
+          ) })
+        ]
+      }
+    )
+  ] });
+}
+export {
+  S as ActionItem
+};

package/dist/components/_inner/bottom-action/bottom-action.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+import { BottomActionProps } from './bottom-action.types';
+/**
+ * 底部弹出菜单封装 对应Pc端的dropdown的封装
+ */
+export declare const BottomAction: ({ title, labelCenter, actionItems, onClick, children, selectType, value, onConfirm, searchable, disabled, triggerAriaLabel, renderOption, "data-testid": dataTestId, }: BottomActionProps) => string | number | bigint | boolean | Iterable<React.ReactNode> | Promise<string | number | bigint | boolean | React.ReactPortal | React.ReactElement<unknown, string | React.JSXElementConstructor<any>> | Iterable<React.ReactNode> | null | undefined> | React.JSX.Element | null | undefined;