@wisdomgarden/torque 0.1.0

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

@@ -0,0 +1,161 @@
+"use client";
+import { jsx as a, Fragment as E, jsxs as B } from "react/jsx-runtime";
+import { Stack as S, Divider as K, ScrollArea as L, Group as P } from "@mantine/core";
+import { isValidElement as V, cloneElement as j, useState as x } from "react";
+import "../../../provider/ui-context.js";
+import { useLocale as N } from "../../../provider/hooks.js";
+import { Button as D } from "../../button/button.js";
+import { drawers as w } from "../../drawer/drawer-events.js";
+import { TextInput as z } from "../../text-input/text-input.js";
+import { ActionItem as M } from "./bottom-action-item.js";
+import d from "./bottom-action.module.css.js";
+const O = ({
+  items: p,
+  labelCenter: C,
+  selectType: i,
+  initialValue: c,
+  onItemClick: s,
+  onConfirm: k,
+  openSubMenu: b,
+  renderOption: A,
+  searchable: f
+}) => {
+  const n = N(), [m, I] = x(""), [h, g] = x(
+    i === "multiple" && Array.isArray(c) ? c : []
+  ), v = (e, t) => {
+    if (!t.disabled) {
+      if (t.children && t.children.length > 0) {
+        b(t.label ?? "", t.children);
+        return;
+      }
+      if (i === "multiple") {
+        if (!t.value) return;
+        g((u) => u.includes(t.value) ? u.filter((r) => r !== t.value) : [...u, t.value]);
+      } else
+        s(e, t);
+    }
+  };
+  return /* @__PURE__ */ B(S, { gap: 0, children: [
+    f && /* @__PURE__ */ a(
+      z,
+      {
+        size: "lg",
+        leftIconName: "search",
+        className: d.searchInput,
+        value: m,
+        "aria-label": n.search,
+        onChange: (e) => {
+          I(e.target.value);
+        }
+      }
+    ),
+    !f && /* @__PURE__ */ a(K, { className: d.divider }),
+    /* @__PURE__ */ a(L.Autosize, { mah: "60vh", type: "auto", children: /* @__PURE__ */ a(S, { gap: 0, children: (f ? p.filter(
+      (e) => e.label?.toLowerCase()?.includes(m.toLowerCase())
+    ) : p).map((e, t) => /* @__PURE__ */ a(
+      M,
+      {
+        labelCenter: C,
+        selectType: i,
+        value: i === "multiple" ? h : c,
+        currentItem: e,
+        handleItemClick: v,
+        renderOption: A
+      },
+      e.value ?? e.label ?? t
+    )) }) }),
+    i === "multiple" && /* @__PURE__ */ B(P, { className: d.footer, wrap: "nowrap", gap: 12, children: [
+      /* @__PURE__ */ a(
+        D,
+        {
+          className: d.footerButton,
+          variant: "stroke",
+          color: "regular",
+          onClick: () => {
+            g([]);
+          },
+          children: n.reset
+        }
+      ),
+      /* @__PURE__ */ a(
+        D,
+        {
+          className: d.footerButton,
+          variant: "primary",
+          color: "brand",
+          onClick: () => {
+            k?.(h), w.closeAll();
+          },
+          children: n.confirm
+        }
+      )
+    ] })
+  ] });
+}, Y = ({
+  title: p,
+  labelCenter: C = !1,
+  actionItems: i,
+  onClick: c,
+  children: s,
+  selectType: k,
+  value: b,
+  onConfirm: A,
+  searchable: f,
+  disabled: n = !1,
+  triggerAriaLabel: m,
+  renderOption: I,
+  "data-testid": h
+}) => {
+  const g = N(), v = () => {
+    n || u(p ?? "", i);
+  }, e = (o) => {
+    o.stopPropagation(), o.preventDefault(), v();
+  }, t = (o) => {
+    n || (o.key === "Enter" || o.key === " ") && (o.preventDefault(), o.stopPropagation(), v());
+  }, u = (o, l) => {
+    w.open({
+      title: o,
+      position: "bottom",
+      withCloseButton: !!o,
+      height: "fit-content",
+      noMinHeight: !0,
+      children: /* @__PURE__ */ a(
+        O,
+        {
+          renderOption: I,
+          items: l,
+          labelCenter: C,
+          selectType: k,
+          initialValue: b,
+          onItemClick: y,
+          onConfirm: A,
+          openSubMenu: u,
+          searchable: f
+        }
+      )
+    });
+  }, y = (o, l) => {
+    (l.type === "option" || !l.type) && (l.onClick && l.onClick(o, l), c && c(o, l), w.closeAll());
+  };
+  if (!V(s))
+    return s;
+  const r = s.props;
+  return /* @__PURE__ */ a(E, { children: j(s, {
+    role: r.role ?? "button",
+    tabIndex: n ? -1 : r.tabIndex ?? 0,
+    "aria-haspopup": "dialog",
+    "aria-disabled": n || r["aria-disabled"],
+    "data-testid": h ?? r["data-testid"],
+    "aria-label": r["aria-label"] ?? m ?? p ?? g.pleaseSelect,
+    onClick: (o) => {
+      r.onClick?.(o), e(o);
+    },
+    onKeyDown: (o) => {
+      r.onKeyDown?.(o), t(o);
+    }
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  }) });
+};
+export {
+  Y as BottomAction
+};

package/dist/components/_inner/bottom-action/bottom-action.module.css.js

@@ -0,0 +1,46 @@
+"use client";
+const e = "_searchInput_1n8vw_2", t = "_divider_1n8vw_6", n = "_footer_1n8vw_10", o = "_footerButton_1n8vw_15", r = "_itemDivider_1n8vw_19", _ = "_thickDivider_1n8vw_23", i = "_itemLabelHeader_1n8vw_28", c = "_itemLabelHeaderCenter_1n8vw_35", a = "_rowWrap_1n8vw_39", w = "_disabledOverlay_1n8vw_44", v = "_row_1n8vw_39", s = "_rowButton_1n8vw_62", d = "_rowMain_1n8vw_71", l = "_rowMainCenter_1n8vw_76", b = "_itemIcon_1n8vw_80", m = "_label_1n8vw_84", p = "_rowSide_1n8vw_99", h = "_itemDescription_1n8vw_103", u = "_chevron_1n8vw_108", D = "_checkboxWrap_1n8vw_112", f = {
+  searchInput: e,
+  divider: t,
+  footer: n,
+  footerButton: o,
+  itemDivider: r,
+  thickDivider: _,
+  itemLabelHeader: i,
+  itemLabelHeaderCenter: c,
+  rowWrap: a,
+  disabledOverlay: w,
+  row: v,
+  rowButton: s,
+  rowMain: d,
+  rowMainCenter: l,
+  itemIcon: b,
+  label: m,
+  rowSide: p,
+  itemDescription: h,
+  chevron: u,
+  checkboxWrap: D
+};
+export {
+  D as checkboxWrap,
+  u as chevron,
+  f as default,
+  w as disabledOverlay,
+  t as divider,
+  n as footer,
+  o as footerButton,
+  h as itemDescription,
+  r as itemDivider,
+  b as itemIcon,
+  i as itemLabelHeader,
+  c as itemLabelHeaderCenter,
+  m as label,
+  v as row,
+  s as rowButton,
+  d as rowMain,
+  l as rowMainCenter,
+  p as rowSide,
+  a as rowWrap,
+  e as searchInput,
+  _ as thickDivider
+};

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

@@ -0,0 +1,117 @@
+import { IconButtonProps } from '../../icon-button';
+import { RenderOptionFunction } from '../base-select/common/select.types';
+import type { IconName } from '@wisdomgarden/torque-icons';
+export interface BottomActionItem {
+    'data-testid'?: string;
+    /**
+     * 可用于业务中判断点击了哪一项
+     */
+    value?: string;
+    /**
+     * 菜单项的标签
+     */
+    label?: string;
+    /**
+     * 菜单项的提示文字
+     */
+    description?: string;
+    /**
+     * 菜单项的左侧图标
+     */
+    leftIconName?: IconName;
+    /**
+     * 菜单项的左侧图标的类名
+     */
+    leftIconClassName?: string;
+    /**
+     * 菜单项标签的自定义 className（会覆盖 dangerous/selected 默认色）
+     */
+    labelClassName?: string;
+    /**
+     * 是否使用原始颜色渲染左侧图标
+     */
+    leftUseOriginalColor?: boolean;
+    /**
+     * 子菜单项
+     */
+    children?: BottomActionItem[];
+    /**
+     * 是否为危险操作
+     */
+    dangerous?: boolean;
+    /**
+     * 是否禁用菜单项
+     */
+    disabled?: boolean;
+    /**
+     * 禁用时 hover 显示的 Tooltip 文字
+     */
+    disabledTooltip?: string;
+    /**
+     * 右侧图标可以展示tooltip
+     */
+    rightIconTooltip?: string;
+    /**
+     * 菜单项的类型
+     *   option: 普通选项
+     *   label: 标签
+     *   divider: 分隔线
+     *   thick-divider: 粗分隔线（仅移动端展示8px高度，PC端解析为普通divider）
+     */
+    type?: 'option' | 'label' | 'divider' | 'thick-divider';
+    /**
+     * 点击菜单项的回调函数
+     */
+    onClick?: BottomActionOnClick;
+    /**
+     * 右侧图标按钮的属性
+     */
+    rightIconButtonProps?: IconButtonProps;
+}
+export type BottomActionOnClick = (e: React.MouseEvent<HTMLButtonElement>, item: BottomActionItem) => void;
+export interface BottomActionProps {
+    /** 选项列表 */
+    readonly actionItems: BottomActionItem[];
+    /** 可以整体设置点击事件 */
+    readonly onClick?: BottomActionOnClick;
+    /** target元素 */
+    readonly children: React.ReactNode;
+    /**
+     * 移动端的时候，用于展示第一层BottomDrawer的标题 后续的展示上一级的选中结果
+     */
+    readonly title?: string;
+    /**
+     * 移动端的时候，是否居中展示标题
+     * 如果为true，将不会展示leftIcon、description、rightIcon
+     */
+    readonly labelCenter?: boolean;
+    /**
+     * 为单选还是多选
+     */
+    readonly selectType?: 'single' | 'multiple';
+    /**
+     * 单选或者多选的值
+     */
+    readonly value?: string | string[];
+    /**
+     * 是否可搜索
+     */
+    readonly searchable?: boolean;
+    /**
+     * 多选时候点击确认按钮的回调函数
+     */
+    readonly onConfirm?: (value: string[]) => void;
+    /**
+     * 是否禁用BottomAction
+     */
+    readonly disabled?: boolean;
+    /**
+     * 触发器的aria-label
+     */
+    readonly triggerAriaLabel?: string;
+    readonly 'data-testid'?: string;
+    /**
+     * 自定义选项渲染函数。
+     */
+    renderOption?: RenderOptionFunction;
+}

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

@@ -0,0 +1,2 @@
+export { BottomAction } from './bottom-action';
+export type * from './bottom-action.types';

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

@@ -0,0 +1,5 @@
+"use client";
+import { BottomAction as e } from "./bottom-action.js";
+export {
+  e as BottomAction
+};

package/dist/components/_inner/drawer/base-bottom-drawer.d.ts

@@ -0,0 +1,32 @@
+import { ReactNode } from 'react';
+import { DistributiveOmit, DrawerProps } from '../../drawer';
+export type BaseBottomDrawerProps = DistributiveOmit<DrawerProps, 'withXPadding' | 'topPadding'> & {
+    /**
+     * 底部抽屉的内容节点
+     */
+    readonly children?: ReactNode;
+    /**
+     * 固定在底部抽屉主体区域底部的节点
+     */
+    readonly bottomSection?: ReactNode;
+    /**
+     * 底部抽屉的高度，可以是具体数值(如 '300px')或百分比(如 '50%')，默认由内容撑开 ('fit-content')
+     */
+    readonly height?: string;
+    /**
+     * 是否不设置最小高度 默认false
+     */
+    readonly noMinHeight?: boolean;
+    /**
+     * 底部抽屉内容区域(外层容器)的自定义类名
+     */
+    readonly contentClassName?: string;
+    /**
+     * 底部抽屉主体区域(内层容器)的自定义类名
+     */
+    readonly bodyClassName?: string;
+};
+/**
+ * 移动端使用的底部弹出的抽屉组件
+ */
+export declare const BaseBottomDrawer: ({ withCloseButton, title, "aria-label": ariaLabel, children, bottomSection, height, noMinHeight, contentClassName, bodyClassName, ...props }: BaseBottomDrawerProps) => import("react").JSX.Element;

package/dist/components/_inner/drawer/base-bottom-drawer.js

@@ -0,0 +1,91 @@
+"use client";
+import { jsxs as s, jsx as r, Fragment as u } from "react/jsx-runtime";
+import { Drawer as C, Space as y, Text as N } from "@mantine/core";
+import { clsx as c } from "clsx";
+import "../../../provider/ui-context.js";
+import "react";
+import { useLocale as x } from "../../../provider/hooks.js";
+import t from "../../drawer/drawer.module.css.js";
+import { IconButton as g } from "../../icon-button/icon-button.js";
+import a from "./base-bottom-drawer.module.css.js";
+const k = ({
+  withCloseButton: e = !0,
+  title: o,
+  "aria-label": m,
+  children: i,
+  bottomSection: n,
+  height: d = "fit-content",
+  noMinHeight: h = !1,
+  contentClassName: w,
+  bodyClassName: f,
+  ...l
+}) => {
+  const B = o || e;
+  return (
+    // todo 无障碍aria-describedby没有正确关联的问题待解决
+    /* @__PURE__ */ s(
+      C,
+      {
+        ...l,
+        position: "bottom",
+        title: m ?? (typeof o == "string" ? o : void 0),
+        withCloseButton: !1,
+        styles: {
+          content: {
+            height: d
+          }
+        },
+        classNames: {
+          content: c(
+            t.drawerContent,
+            n && t.drawerContentWithBottomSection,
+            w,
+            a.content,
+            !h && a.contentMinHeight
+          ),
+          header: t.hiddenHeader,
+          body: c(
+            t.drawerBody,
+            n && t.drawerBodyWithBottomSection,
+            f
+          )
+        },
+        children: [
+          B && /* @__PURE__ */ r(
+            p,
+            {
+              title: o,
+              withCloseButton: e,
+              onClose: l.onClose
+            }
+          ),
+          n ? /* @__PURE__ */ s(u, { children: [
+            /* @__PURE__ */ r("div", { className: t.drawerMain, children: i }),
+            /* @__PURE__ */ r("div", { className: t.drawerBottomSection, children: n })
+          ] }) : i
+        ]
+      }
+    )
+  );
+}, p = (e) => {
+  const o = x();
+  return /* @__PURE__ */ s("div", { className: a.header, children: [
+    e.withCloseButton && /* @__PURE__ */ r(y, { w: 40 }),
+    /* @__PURE__ */ r(N, { className: a.headerTitle, children: e.title }),
+    e.withCloseButton && /* @__PURE__ */ r(
+      g,
+      {
+        iconName: "close",
+        variant: "text",
+        color: "regular",
+        size: "lg",
+        className: a.headerClose,
+        onClick: () => e.onClose?.(),
+        "aria-label": o.close
+      }
+    )
+  ] });
+};
+export {
+  k as BaseBottomDrawer
+};

package/dist/components/_inner/drawer/base-bottom-drawer.module.css.js

@@ -0,0 +1,18 @@
+"use client";
+const e = "_content_wgw7p_2", t = "_contentMinHeight_wgw7p_9", n = "_header_wgw7p_13", o = "_headerTitle_wgw7p_21", d = "_headerClose_wgw7p_32", _ = "_bodyXPadding_wgw7p_36", a = {
+  content: e,
+  contentMinHeight: t,
+  header: n,
+  headerTitle: o,
+  headerClose: d,
+  bodyXPadding: _
+};
+export {
+  _ as bodyXPadding,
+  e as content,
+  t as contentMinHeight,
+  a as default,
+  n as header,
+  d as headerClose,
+  o as headerTitle
+};

package/dist/components/_inner/dropdown/empty-state.d.ts

@@ -0,0 +1,6 @@
+import { ReactNode } from 'react';
+export interface DropDownEmptyStateProps {
+    readonly icon?: ReactNode;
+    readonly text?: string;
+}
+export declare const DropDownEmptyState: ({ icon, text }: DropDownEmptyStateProps) => import("react").JSX.Element;

package/dist/components/_inner/dropdown/empty-state.js

@@ -0,0 +1,16 @@
+"use client";
+import { jsxs as s, jsx as o } from "react/jsx-runtime";
+import "../../../provider/ui-context.js";
+import "react";
+import { useLocale as a } from "../../../provider/hooks.js";
+import t from "./empty-state.module.css.js";
+const d = ({ icon: e, text: m }) => {
+  const r = a();
+  return /* @__PURE__ */ s("div", { className: t.emptyState, children: [
+    e && /* @__PURE__ */ o("div", { className: t.emptyIcon, children: e }),
+    /* @__PURE__ */ o("div", { className: t.emptyText, children: m ?? r.noData })
+  ] });
+};
+export {
+  d as DropDownEmptyState
+};

package/dist/components/_inner/dropdown/empty-state.module.css.js

@@ -0,0 +1,12 @@
+"use client";
+const t = "_emptyState_19023_2", e = "_emptyIcon_19023_12", p = "_emptyText_19023_20", y = {
+  emptyState: t,
+  emptyIcon: e,
+  emptyText: p
+};
+export {
+  y as default,
+  e as emptyIcon,
+  t as emptyState,
+  p as emptyText
+};

package/dist/components/_inner/dropdown/options-drop-down.d.ts

@@ -0,0 +1,22 @@
+import React from 'react';
+import { PopoverDropdownProps } from '../../popover/popover.types';
+import { RenderOptionFunction, SelectOptions } from '../base-select/common/select.types';
+export interface OptionsDropDownEmptyState {
+    icon?: React.ReactNode;
+    text?: string;
+    node?: React.ReactNode;
+}
+export interface OptionsDropDownProps extends Pick<PopoverDropdownProps, 'width' | 'maxHeight' | 'matchTargetWidth' | 'withinPortal' | 'className'> {
+    options: SelectOptions[];
+    multiSelect?: boolean;
+    value?: string | string[];
+    defaultValue?: string | string[];
+    header?: React.ReactNode;
+    footer?: React.ReactNode;
+    emptyState?: OptionsDropDownEmptyState;
+    renderOption?: RenderOptionFunction;
+    /** 非 desktop 时作为 BottomDrawer 标题。 */
+    title?: string;
+}
+/** 基于系统 Combobox 的统一选项下拉列表。 */
+export declare function OptionsDropDown({ options, multiSelect, value, defaultValue, header, footer, emptyState, renderOption, title, className, matchTargetWidth, ...dropdownProps }: Readonly<OptionsDropDownProps>): React.JSX.Element;

package/dist/components/_inner/dropdown/options-drop-down.js

@@ -0,0 +1,95 @@
+"use client";
+import { jsxs as c, jsx as a, Fragment as o } from "react/jsx-runtime";
+import { Icon as d } from "@wisdomgarden/torque-icons";
+import { clsx as v } from "clsx";
+import { Checkbox as C } from "../../checkbox/checkbox.js";
+import { Combobox as t } from "../../combobox/combobox.js";
+import { DropDownEmptyState as w } from "./empty-state.js";
+import l from "./options-drop-down.module.css.js";
+const y = (s, r) => r ? Array.isArray(r) ? r.includes(s) : r === s : !1;
+function $({
+  options: s,
+  multiSelect: r,
+  value: m,
+  defaultValue: h,
+  header: f,
+  footer: u,
+  emptyState: n,
+  renderOption: g,
+  title: x,
+  className: N,
+  matchTargetWidth: b = !0,
+  ...I
+}) {
+  const O = m ?? h, p = s.length === 0;
+  return /* @__PURE__ */ c(
+    t.Dropdown,
+    {
+      ...I,
+      title: x,
+      className: v(l.dropdown, N),
+      matchTargetWidth: b,
+      children: [
+        f,
+        p ? n?.node ?? /* @__PURE__ */ a(w, { icon: n?.icon, text: n?.text }) : /* @__PURE__ */ c(o, { children: [
+          /* @__PURE__ */ a(t.Options, { "aria-multiselectable": r || void 0, children: s.map((e) => {
+            const i = y(e.value, O);
+            return /* @__PURE__ */ c(
+              t.Option,
+              {
+                value: e.value,
+                active: i,
+                disabled: e.disabled,
+                "data-single-selected": i && !r ? "" : void 0,
+                "data-multi-select": r ? "" : void 0,
+                className: l.option,
+                style: {
+                  paddingInlineStart: `calc(5px + ${e.level ?? 0} * 12px)`
+                },
+                children: [
+                  r && /* @__PURE__ */ a(
+                    C,
+                    {
+                      visualOnly: !0,
+                      checked: i,
+                      className: l.checkbox
+                    }
+                  ),
+                  g?.(e, i) ?? /* @__PURE__ */ c(o, { children: [
+                    e.leftIconName && /* @__PURE__ */ a(
+                      d,
+                      {
+                        width: 16,
+                        height: 16,
+                        name: e.leftIconName,
+                        useOriginalColor: e.leftUseOriginalColor,
+                        className: l.leftIcon
+                      }
+                    ),
+                    /* @__PURE__ */ a("span", { className: l.label, children: e.label }),
+                    e.rightIconName && /* @__PURE__ */ a(
+                      d,
+                      {
+                        "aria-hidden": "true",
+                        width: 16,
+                        height: 16,
+                        name: e.rightIconName,
+                        useOriginalColor: e.rightIconUseOriginalColor,
+                        className: l.rightIcon
+                      }
+                    )
+                  ] })
+                ]
+              },
+              e.value
+            );
+          }) }),
+          u
+        ] })
+      ]
+    }
+  );
+}
+export {
+  $ as OptionsDropDown
+};

package/dist/components/_inner/dropdown/options-drop-down.module.css.js

@@ -0,0 +1,18 @@
+"use client";
+const o = "_dropdown_kq4wl_2", c = "_option_kq4wl_9", n = "_checkbox_kq4wl_55", t = "_leftIcon_kq4wl_61", l = "_label_kq4wl_66", _ = "_rightIcon_kq4wl_71", e = {
+  dropdown: o,
+  option: c,
+  checkbox: n,
+  leftIcon: t,
+  label: l,
+  rightIcon: _
+};
+export {
+  n as checkbox,
+  e as default,
+  o as dropdown,
+  l as label,
+  t as leftIcon,
+  c as option,
+  _ as rightIcon
+};

package/dist/components/_inner/menu/_mobile/menu.mobile.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+import { MenuProps } from '../../../menu/menu.types';
+type MenuMobileProps = Omit<MenuProps, 'renderTarget' | 'position'> & {
+    readonly children: React.ReactNode;
+    readonly renderTarget?: never;
+};
+/**
+ * 下拉菜单移动端适配
+ */
+export declare const MenuMobile: ({ menuItems, ...props }: MenuMobileProps) => React.JSX.Element;
+export {};

package/dist/components/_inner/menu/_mobile/menu.mobile.js

@@ -0,0 +1,15 @@
+"use client";
+import { jsx as r } from "react/jsx-runtime";
+import { BottomAction as o } from "../../bottom-action/bottom-action.js";
+const l = ({ menuItems: t, ...e }) => /* @__PURE__ */ r(
+  o,
+  {
+    ...e,
+    triggerAriaLabel: e.triggerAriaLabel,
+    disabled: e.disabled,
+    actionItems: t.map((i) => ({ ...i }))
+  }
+);
+export {
+  l as MenuMobile
+};