@godxjp/ui 20.0.0 → 20.2.0

package/dist/components/data-entry/time-range-picker.js

@@ -0,0 +1,89 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { useTranslation } from "../../i18n/use-translation.js";
+import { useControlledLatch } from "../../lib/hooks.js";
+import { pickGroupFieldA11y } from "../../lib/field-a11y.js";
+import { Flex } from "../layout/flex.js";
+import { TimePicker } from "./time-picker.js";
+function edgeAllowClear(allowClear, edgeAllowsEmpty) {
+  if (!edgeAllowsEmpty || allowClear === false) return false;
+  return allowClear ?? true;
+}
+function TimeRangePicker({
+  value: controlledValue,
+  defaultValue,
+  onValueChange,
+  order = true,
+  open: openProp,
+  defaultOpen = false,
+  onOpenChange,
+  allowEmpty = [true, true],
+  name,
+  id,
+  placeholder,
+  className,
+  ref,
+  ...props
+}) {
+  const { t } = useTranslation();
+  const autoId = React.useId();
+  const groupId = id ?? autoId;
+  const controlled = useControlledLatch(controlledValue !== void 0);
+  const [internal, setInternal] = React.useState(defaultValue ?? ["", ""]);
+  const value = controlled ? controlledValue ?? ["", ""] : internal;
+  const [internalOpen, setInternalOpen] = React.useState(defaultOpen);
+  const [activeEdge, setActiveEdge] = React.useState(0);
+  const open = openProp ?? internalOpen;
+  const changeOpen = (edge, next) => {
+    if (next) setActiveEdge(edge);
+    if (openProp === void 0) setInternalOpen(next);
+    onOpenChange?.(next);
+  };
+  const choose = (edge, time) => {
+    if (!time && !allowEmpty[edge]) return;
+    const next = [value[0], value[1]];
+    next[edge] = time;
+    if (order && next[0] && next[1] && next[0] > next[1]) next.reverse();
+    if (!controlled) setInternal(next);
+    onValueChange?.(next);
+  };
+  return /* @__PURE__ */ jsxs(Flex, { role: "group", id: groupId, className, gap: "sm", ...pickGroupFieldA11y(props), children: [
+    /* @__PURE__ */ jsx(
+      TimePicker,
+      {
+        ...props,
+        open: open && activeEdge === 0,
+        onOpenChange: (next) => changeOpen(0, next),
+        ref,
+        id: `${groupId}-from`,
+        name: name ? `${name}_from` : void 0,
+        "aria-labelledby": void 0,
+        "aria-label": t("dataEntry.dateRangePicker.from"),
+        placeholder: placeholder?.[0],
+        value: value[0],
+        onValueChange: (time) => choose(0, time),
+        allowClear: edgeAllowClear(props.allowClear, allowEmpty[0])
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      TimePicker,
+      {
+        ...props,
+        open: open && activeEdge === 1,
+        onOpenChange: (next) => changeOpen(1, next),
+        id: `${groupId}-to`,
+        name: name ? `${name}_to` : void 0,
+        "aria-labelledby": void 0,
+        "aria-label": t("dataEntry.dateRangePicker.to"),
+        placeholder: placeholder?.[1],
+        value: value[1],
+        onValueChange: (time) => choose(1, time),
+        allowClear: edgeAllowClear(props.allowClear, allowEmpty[1])
+      }
+    )
+  ] });
+}
+export {
+  TimeRangePicker
+};

package/dist/components/data-entry/transfer.d.ts

@@ -1,4 +1,4 @@
 import * as React from "react";
 import type { TransferProp } from "../../props/components/data-entry.prop.js";
 export type { TransferProp, TransferProp as TransferProps, TransferItemProp, } from "../../props/components/data-entry.prop.js";
-export declare function Transfer({ dataSource, targetKeys, onValueChange, titles, showSearch, oneWay, disabled, id, className, selectedKeys: selectedKeysProp, onSelectChange, ...ariaProps }: TransferProp): React.JSX.Element;
+export declare function Transfer({ dataSource, targetKeys: legacyTargetKeys, value, defaultValue, name, readOnly, pagination, defaultTargetKeys, onValueChange, titles, showSearch, showSelectAll, filterOption, render, oneWay, disabled, id, className, selectedKeys: selectedKeysProp, onSelectChange, ...ariaProps }: TransferProp): React.JSX.Element;

package/dist/components/data-entry/transfer.js

@@ -1,11 +1,12 @@
 "use client";
-import { jsx, jsxs } from "react/jsx-runtime";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import * as React from "react";
 import { ChevronLeft, ChevronRight } from "lucide-react";
 import { useTranslation } from "../../i18n/use-translation.js";
 import { cn } from "../../lib/utils.js";
 import { pickGroupFieldA11y } from "../../lib/field-a11y.js";
 import { Button } from "../general/button.js";
+import { Pagination } from "../navigation/pagination.js";
 import { ScrollArea } from "../data-display/scroll-area.js";
 import { Checkbox } from "./checkbox.js";
 import { SearchInput } from "./search-input.js";
@@ -15,8 +16,11 @@ function TransferPanel({
   items,
   selectedKeys,
   onSelectChange,
-  onSelectAll,
   showSearch,
+  showSelectAll,
+  filterOption,
+  render,
+  pagination,
   disabled,
   searchPlaceholder,
   emptyText,
@@ -26,15 +30,21 @@ function TransferPanel({
   const titleId = React.useId();
   const [query, setQuery] = React.useState("");
   const filtered = React.useMemo(() => {
-    const q = query.trim().toLowerCase();
+    const q = query.trim();
     if (!q) return items;
+    if (filterOption) return items.filter((item) => filterOption(q, item));
+    const needle = q.toLowerCase();
     return items.filter((item) => {
-      const titleMatch = reactNodeText(item.title).toLowerCase().includes(q);
-      const descMatch = item.description ? reactNodeText(item.description).toLowerCase().includes(q) : false;
+      const titleMatch = reactNodeText(item.title).toLowerCase().includes(needle);
+      const descMatch = item.description ? reactNodeText(item.description).toLowerCase().includes(needle) : false;
       return titleMatch || descMatch;
     });
-  }, [items, query]);
-  const enabledItems = filtered.filter((i) => !i.disabled);
+  }, [items, query, filterOption]);
+  const [page, setPage] = React.useState(1);
+  const pageSize = typeof pagination === "object" ? Math.max(1, Math.floor(pagination.pageSize ?? 10)) : 10;
+  const currentPage = Math.min(page, Math.max(1, Math.ceil(filtered.length / pageSize)));
+  const visible = pagination ? filtered.slice((currentPage - 1) * pageSize, currentPage * pageSize) : filtered;
+  const enabledItems = visible.filter((i) => !i.disabled);
   const allChecked = enabledItems.length > 0 && enabledItems.every((i) => selectedKeys.includes(i.key));
   const indeterminate = !allChecked && enabledItems.some((i) => selectedKeys.includes(i.key));
   const toggleKey = (key, checked) => {
@@ -43,15 +53,20 @@ function TransferPanel({
   return /* @__PURE__ */ jsxs("div", { className: "ui-transfer-pane", children: [
     /* @__PURE__ */ jsxs("div", { className: "ui-transfer-pane-header", children: [
       /* @__PURE__ */ jsxs("div", { className: "ui-transfer-pane-check", children: [
-        /* @__PURE__ */ jsx(
+        showSelectAll ? /* @__PURE__ */ jsx(
           Checkbox,
           {
             checked: allChecked ? true : indeterminate ? "indeterminate" : false,
             disabled: Boolean(disabled) || enabledItems.length === 0,
-            onCheckedChange: (v) => onSelectAll(v === true),
+            onCheckedChange: (v) => {
+              const keys = enabledItems.map((item) => item.key);
+              onSelectChange(
+                v === true ? [.../* @__PURE__ */ new Set([...selectedKeys, ...keys])] : selectedKeys.filter((key) => !keys.includes(key))
+              );
+            },
             "aria-label": direction === "left" ? t("dataEntry.transfer.selectAllSource") : t("dataEntry.transfer.selectAllTarget")
           }
-        ),
+        ) : null,
         /* @__PURE__ */ jsx("span", { id: titleId, children: title })
       ] }),
       /* @__PURE__ */ jsxs("span", { className: "text-muted-foreground text-xs", children: [
@@ -63,13 +78,17 @@ function TransferPanel({
     showSearch && /* @__PURE__ */ jsx("div", { className: "ui-transfer-search", "data-disabled": disabled ? "" : void 0, children: /* @__PURE__ */ jsx(
       SearchInput,
       {
-        onSearch: setQuery,
+        onSearch: (next) => {
+          setQuery(next);
+          setPage(1);
+        },
+        disabled,
         placeholder: searchPlaceholder,
         ariaLabel: searchPlaceholder,
         debounce: 0
       }
     ) }),
-    /* @__PURE__ */ jsx(ScrollArea, { className: "flex-1", children: /* @__PURE__ */ jsx("ul", { className: "ui-transfer-list", "aria-labelledby": titleId, children: filtered.length === 0 ? /* @__PURE__ */ jsx("li", { className: "ui-transfer-empty", children: emptyText }) : filtered.map((item) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsxs(
+    /* @__PURE__ */ jsx(ScrollArea, { className: "flex-1", children: /* @__PURE__ */ jsx("ul", { className: "ui-transfer-list", "aria-labelledby": titleId, children: filtered.length === 0 ? /* @__PURE__ */ jsx("li", { className: "ui-transfer-empty", children: emptyText }) : visible.map((item) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsxs(
       "div",
       {
         className: cn(
@@ -89,29 +108,50 @@ function TransferPanel({
               className: "ui-transfer-row-check"
             }
           ),
-          /* @__PURE__ */ jsxs(
+          /* @__PURE__ */ jsx(
             "label",
             {
               className: "ui-transfer-row-body",
               id: `${titleId}-${item.key}`,
               htmlFor: `${titleId}-${item.key}-box`,
-              children: [
+              children: render ? render(item) : /* @__PURE__ */ jsxs(Fragment, { children: [
                 /* @__PURE__ */ jsx("span", { className: "block truncate font-medium", children: item.title }),
                 item.description && /* @__PURE__ */ jsx("span", { className: "ui-transfer-row-description text-muted-foreground block truncate", children: item.description })
-              ]
+              ] })
             }
           )
         ]
       }
-    ) }, item.key)) }) })
+    ) }, item.key)) }) }),
+    pagination && filtered.length > pageSize ? /* @__PURE__ */ jsx(
+      Pagination,
+      {
+        value: currentPage,
+        pageSize,
+        total: filtered.length,
+        onValueChange: setPage,
+        showSizeChanger: false,
+        simple: true,
+        disabled
+      }
+    ) : null
   ] });
 }
 function Transfer({
   dataSource,
-  targetKeys,
+  targetKeys: legacyTargetKeys,
+  value,
+  defaultValue,
+  name,
+  readOnly,
+  pagination,
+  defaultTargetKeys,
   onValueChange,
   titles,
   showSearch,
+  showSelectAll = true,
+  filterOption,
+  render,
   oneWay,
   disabled,
   id,
@@ -124,22 +164,33 @@ function Transfer({
   const groupA11y = pickGroupFieldA11y(ariaProps);
   const [internalSelected, setInternalSelected] = React.useState([[], []]);
   const selected = selectedKeysProp ?? internalSelected;
+  const [internalTargetKeys, setInternalTargetKeys] = React.useState(
+    defaultValue ?? defaultTargetKeys ?? []
+  );
+  const targetKeysProp = value ?? legacyTargetKeys;
+  const isTargetControlled = targetKeysProp !== void 0;
+  const targetKeys = isTargetControlled ? targetKeysProp : internalTargetKeys;
   const sourceItems = dataSource.filter((item) => !targetKeys.includes(item.key));
   const targetItems = dataSource.filter((item) => targetKeys.includes(item.key));
   const setSelected = (side, keys) => {
     const next = side === 0 ? [keys, selected[1]] : [selected[0], keys];
-    if (selectedKeysProp) onSelectChange?.(next[0], next[1]);
-    else setInternalSelected(next);
+    if (!selectedKeysProp) setInternalSelected(next);
+    onSelectChange?.(next[0], next[1]);
   };
   const move = (direction) => {
     const fromSide = direction === "right" ? 0 : 1;
-    const keys = selected[fromSide];
+    if (disabled || readOnly) return;
+    const available = direction === "right" ? sourceItems : targetItems;
+    const keys = selected[fromSide].filter(
+      (key) => available.some((item) => item.key === key && !item.disabled)
+    );
     if (!keys.length) return;
     const nextTarget = direction === "right" ? [...targetKeys, ...keys.filter((k) => !targetKeys.includes(k))] : targetKeys.filter((k) => !keys.includes(k));
+    if (!isTargetControlled) setInternalTargetKeys(nextTarget);
     onValueChange?.(nextTarget, direction, keys);
     const cleared = fromSide === 0 ? [[], selected[1]] : [selected[0], []];
-    if (selectedKeysProp) onSelectChange?.(cleared[0], cleared[1]);
-    else setInternalSelected(cleared);
+    if (!selectedKeysProp) setInternalSelected(cleared);
+    onSelectChange?.(cleared[0], cleared[1]);
   };
   const leftTitle = titles?.[0] ?? t("dataEntry.transfer.source");
   const rightTitle = titles?.[1] ?? t("dataEntry.transfer.target");
@@ -152,6 +203,7 @@ function Transfer({
       "aria-disabled": disabled ? true : void 0,
       className: cn("ui-transfer", className),
       children: [
+        name && !disabled ? targetKeys.map((key) => /* @__PURE__ */ jsx("input", { type: "hidden", name, value: key }, key)) : null,
         /* @__PURE__ */ jsx(
           TransferPanel,
           {
@@ -160,9 +212,12 @@ function Transfer({
             items: sourceItems,
             selectedKeys: selected[0],
             onSelectChange: (keys) => setSelected(0, keys),
-            onSelectAll: (checked) => setSelected(0, checked ? sourceItems.filter((i) => !i.disabled).map((i) => i.key) : []),
             showSearch,
-            disabled,
+            showSelectAll,
+            filterOption,
+            render,
+            disabled: disabled || readOnly,
+            pagination,
             searchPlaceholder: t("dataEntry.transfer.searchPlaceholder"),
             emptyText: t("dataEntry.transfer.empty")
           }
@@ -174,7 +229,7 @@ function Transfer({
               type: "button",
               size: "icon",
               variant: "outline",
-              disabled: Boolean(disabled) || selected[0].length === 0,
+              disabled: Boolean(disabled || readOnly) || selected[0].length === 0,
               "aria-label": t("dataEntry.transfer.moveRight"),
               onClick: () => move("right"),
               children: /* @__PURE__ */ jsx(ChevronRight, { className: "ui-transfer-action-icon", "aria-hidden": "true" })
@@ -186,7 +241,7 @@ function Transfer({
               type: "button",
               size: "icon",
               variant: "outline",
-              disabled: Boolean(disabled) || selected[1].length === 0,
+              disabled: Boolean(disabled || readOnly) || selected[1].length === 0,
               "aria-label": t("dataEntry.transfer.moveLeft"),
               onClick: () => move("left"),
               children: /* @__PURE__ */ jsx(ChevronLeft, { className: "ui-transfer-action-icon", "aria-hidden": "true" })
@@ -201,9 +256,12 @@ function Transfer({
             items: targetItems,
             selectedKeys: selected[1],
             onSelectChange: (keys) => setSelected(1, keys),
-            onSelectAll: (checked) => setSelected(1, checked ? targetItems.filter((i) => !i.disabled).map((i) => i.key) : []),
             showSearch,
-            disabled,
+            showSelectAll,
+            filterOption,
+            render,
+            disabled: disabled || readOnly,
+            pagination,
             searchPlaceholder: t("dataEntry.transfer.searchPlaceholder"),
             emptyText: t("dataEntry.transfer.empty")
           }

package/dist/components/data-entry/tree-select.d.ts

@@ -2,7 +2,7 @@ import * as React from "react";
 import type { TreeSelectProp } from "../../props/components/data-entry.prop.js";
 export type { TreeSelectProp, TreeSelectProp as TreeSelectProps, } from "../../props/components/data-entry.prop.js";
 export { SHOW_CHILD, SHOW_PARENT, SHOW_ALL } from "./tree-select-strategy.js";
-declare function TreeSelectRoot({ treeData: treeDataProp, value, defaultValue, onValueChange, multiple, treeCheckable, treeCheckStrictly, showSearch, showCheckedStrategy, treeDefaultExpandAll, placeholder, disabled, allowClear, className, id, fieldNames, ...ariaProps }: TreeSelectProp): React.JSX.Element;
+declare function TreeSelectRoot({ treeData: treeDataProp, value, defaultValue, onValueChange, multiple, treeCheckable, treeCheckStrictly, showSearch, showCheckedStrategy, treeDefaultExpandAll, placeholder, disabled, readOnly, name, allowClear, className, id, fieldNames, size, status, variant, loading, open: openProp, defaultOpen, onOpenChange, loadData, treeTitleRender, maxTagCount, maxTagPlaceholder, notFoundContent, autoClearSearchValue, search: searchProp, onSearchChange, ...ariaProps }: TreeSelectProp): React.JSX.Element;
 export declare const TreeSelect: typeof TreeSelectRoot & {
     SHOW_CHILD: "SHOW_CHILD";
     SHOW_PARENT: "SHOW_PARENT";