@tipp/ui 2.3.33 → 2.3.35

package/dist/molecules/index.cjs

@@ -79,6 +79,7 @@ var __async = (__this, __arguments, generator) => {
 // src/molecules/index.ts
 var molecules_exports = {};
 __export(molecules_exports, {
+  AutocompleteTextfield: () => AutocompleteTextfield,
   CurriculumBody: () => CurriculumBody,
   CurriculumProvider: () => CurriculumProvider,
   CurriculumSidebar: () => CurriculumSidebar,
@@ -782,14 +783,24 @@ function Pagination(props) {
     }
     return Array.from({ length: end - start + 1 }, (_, i) => i + start);
   }, [count, page, siblingCount]);
+  const onChangeRef = (0, import_react3.useRef)(onChange);
   (0, import_react3.useEffect)(() => {
-    onChange == null ? void 0 : onChange(page);
-  }, [onChange, page]);
+    onChangeRef.current = onChange;
+  });
+  const isFirstRender = (0, import_react3.useRef)(true);
+  (0, import_react3.useEffect)(() => {
+    var _a;
+    if (isFirstRender.current) {
+      isFirstRender.current = false;
+      return;
+    }
+    (_a = onChangeRef.current) == null ? void 0 : _a.call(onChangeRef, page);
+  }, [page]);
   (0, import_react3.useEffect)(() => {
-    if (props.page) {
+    if (props.page && props.page !== page) {
       setPage(props.page);
     }
-  }, [props.page]);
+  }, [props.page, page]);
   const prev = (0, import_react3.useMemo)(() => {
     const p = page - 1;
     return p < 1 ? void 0 : p;
@@ -990,6 +1001,7 @@ function ExpandTable(props) {
     pageIndex = 0,
     pageSize = 10,
     siblingCount = 2,
+    onPageChange,
     getRowStyle,
     getCellStyle,
     variant = "card"
@@ -999,6 +1011,13 @@ function ExpandTable(props) {
     pageIndex: pageIndex || 0,
     pageSize: pageSize || 9999
   });
+  (0, import_react6.useEffect)(() => {
+    setPagination((prev) => {
+      const next = pageIndex;
+      if (prev.pageIndex === next) return prev;
+      return __spreadProps(__spreadValues({}, prev), { pageIndex: next });
+    });
+  }, [pageIndex]);
   const [sorting, setSorting] = (0, import_react6.useState)([]);
   const { getRowModel, getHeaderGroups, setPageIndex } = (0, import_react_table2.useReactTable)({
     data: data || [],
@@ -1023,9 +1042,11 @@ function ExpandTable(props) {
   const rowModels = getRowModel();
   const onChangePagination = (0, import_react6.useCallback)(
     (page) => {
-      setPageIndex(page - 1);
+      const idx = page - 1;
+      setPageIndex(idx);
+      onPageChange == null ? void 0 : onPageChange(idx);
     },
-    [setPageIndex]
+    [setPageIndex, onPageChange]
   );
   const helpCompRender = (0, import_react6.useCallback)(
     (rowLength) => {
@@ -7131,8 +7152,293 @@ function DynamicFormEditor(props) {
     /* @__PURE__ */ (0, import_jsx_runtime88.jsx)(DynamicFormEditorPreviewPanel, { fields: effectiveSchema.fields, show: showPreview })
   ] });
 }
+
+// src/molecules/autocomplete-textfield.tsx
+var import_react47 = require("react");
+var import_themes42 = require("@radix-ui/themes");
+
+// src/atoms/dropdown-menu.tsx
+var import_themes41 = require("@radix-ui/themes");
+var import_react46 = require("react");
+var import_jsx_runtime89 = require("react/jsx-runtime");
+var Content4 = (0, import_react46.forwardRef)((props, ref) => {
+  const _a = props, { isNavigation, className } = _a, rest = __objRest(_a, ["isNavigation", "className"]);
+  const contentClassName = (0, import_react46.useMemo)(() => {
+    const cls = isNavigation ? "dropdown-navigation" : "";
+    return [cls, className].join(" ");
+  }, [isNavigation, className]);
+  return /* @__PURE__ */ (0, import_jsx_runtime89.jsx)(
+    import_themes41.DropdownMenu.Content,
+    __spreadProps(__spreadValues({
+      ref
+    }, rest), {
+      className: contentClassName
+    })
+  );
+});
+Content4.displayName = "DropdownMenu.Content";
+var Trigger4 = (0, import_react46.forwardRef)(
+  (_a, ref) => {
+    var _b = _a, { asChild: _asChild } = _b, props = __objRest(_b, ["asChild"]);
+    return /* @__PURE__ */ (0, import_jsx_runtime89.jsx)(import_themes41.DropdownMenu.Trigger, __spreadValues({ ref }, props));
+  }
+);
+Trigger4.displayName = "DropdownMenu.Trigger";
+var DropdownMenu = __spreadProps(__spreadValues({}, import_themes41.DropdownMenu), {
+  Content: Content4,
+  Trigger: Trigger4
+});
+
+// src/molecules/autocomplete-textfield.tsx
+var import_jsx_runtime90 = require("react/jsx-runtime");
+var AutocompleteTextfield = (0, import_react47.forwardRef)(
+  (_a, ref) => {
+    var _b = _a, {
+      options,
+      value: externalValue,
+      onChange,
+      onSelect,
+      placeholder,
+      emptyMessage = "\uAC80\uC0C9 \uACB0\uACFC\uAC00 \uC5C6\uC2B5\uB2C8\uB2E4.",
+      maxItems = 10,
+      slotLeft,
+      slotRight,
+      error
+    } = _b, rest = __objRest(_b, [
+      "options",
+      "value",
+      "onChange",
+      "onSelect",
+      "placeholder",
+      "emptyMessage",
+      "maxItems",
+      "slotLeft",
+      "slotRight",
+      "error"
+    ]);
+    const isControlled = externalValue !== void 0;
+    const [internalValue, setInternalValue] = (0, import_react47.useState)("");
+    const inputValue = isControlled ? externalValue : internalValue;
+    const [open, setOpen] = (0, import_react47.useState)(false);
+    const [highlightedIndex, setHighlightedIndex] = (0, import_react47.useState)(-1);
+    const inputRef = (0, import_react47.useRef)(null);
+    const listRef = (0, import_react47.useRef)(null);
+    const listboxId = (0, import_react47.useId)();
+    const justSelectedRef = (0, import_react47.useRef)(false);
+    const filtered = options.filter(
+      (opt) => opt.label.toLowerCase().includes(inputValue.toLowerCase())
+    ).slice(0, maxItems);
+    const handleInputChange = (0, import_react47.useCallback)(
+      (e) => {
+        const next = e.target.value;
+        if (!isControlled) setInternalValue(next);
+        onChange == null ? void 0 : onChange(next);
+        const nextFiltered = options.filter((opt) => opt.label.toLowerCase().includes(next.toLowerCase())).slice(0, maxItems);
+        setOpen(nextFiltered.length > 0 || emptyMessage !== null);
+        setHighlightedIndex(-1);
+      },
+      [isControlled, onChange, options, maxItems, emptyMessage]
+    );
+    const handleSelect = (0, import_react47.useCallback)(
+      (option) => {
+        var _a2;
+        if (!isControlled) setInternalValue(option.label);
+        onChange == null ? void 0 : onChange(option.label);
+        onSelect == null ? void 0 : onSelect(option);
+        setOpen(false);
+        setHighlightedIndex(-1);
+        justSelectedRef.current = true;
+        (_a2 = inputRef.current) == null ? void 0 : _a2.focus();
+      },
+      [isControlled, onChange, onSelect]
+    );
+    const handleFocus = (0, import_react47.useCallback)(() => {
+      if (justSelectedRef.current) {
+        justSelectedRef.current = false;
+        return;
+      }
+      const currentFiltered = options.filter((opt) => opt.label.toLowerCase().includes(inputValue.toLowerCase())).slice(0, maxItems);
+      setOpen(currentFiltered.length > 0 || emptyMessage !== null);
+    }, [options, inputValue, maxItems, emptyMessage]);
+    const handleBlur = (0, import_react47.useCallback)((e) => {
+      var _a2, _b2;
+      if (e.relatedTarget && ((_b2 = (_a2 = inputRef.current) == null ? void 0 : _a2.parentElement) == null ? void 0 : _b2.contains(e.relatedTarget))) {
+        return;
+      }
+      setOpen(false);
+      setHighlightedIndex(-1);
+    }, []);
+    const handleKeyDown = (0, import_react47.useCallback)(
+      (e) => {
+        if (!open) {
+          if (e.key === "ArrowDown" || e.key === "ArrowUp") {
+            setOpen(true);
+            setHighlightedIndex(0);
+            e.preventDefault();
+          }
+          return;
+        }
+        switch (e.key) {
+          case "ArrowDown":
+            e.preventDefault();
+            setHighlightedIndex(
+              (prev) => prev < filtered.length - 1 ? prev + 1 : 0
+            );
+            break;
+          case "ArrowUp":
+            e.preventDefault();
+            setHighlightedIndex(
+              (prev) => prev > 0 ? prev - 1 : filtered.length - 1
+            );
+            break;
+          case "Enter":
+            e.preventDefault();
+            if (highlightedIndex >= 0 && filtered[highlightedIndex]) {
+              handleSelect(filtered[highlightedIndex]);
+            }
+            break;
+          case "Escape":
+            setOpen(false);
+            setHighlightedIndex(-1);
+            break;
+          case "Tab":
+            setOpen(false);
+            setHighlightedIndex(-1);
+            break;
+          default:
+            break;
+        }
+      },
+      [open, filtered, highlightedIndex, handleSelect]
+    );
+    (0, import_react47.useEffect)(() => {
+      if (!listRef.current || highlightedIndex < 0) return;
+      const item = listRef.current.children[highlightedIndex];
+      item.scrollIntoView({ block: "nearest" });
+    }, [highlightedIndex]);
+    return /* @__PURE__ */ (0, import_jsx_runtime90.jsxs)(import_themes42.Box, { position: "relative", style: { width: "100%" }, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime90.jsxs)(
+        TextField.Root,
+        __spreadProps(__spreadValues({
+          "aria-activedescendant": open && highlightedIndex >= 0 ? `${listboxId}-option-${highlightedIndex}` : void 0,
+          "aria-autocomplete": "list",
+          "aria-controls": open ? listboxId : void 0,
+          "aria-expanded": open,
+          error,
+          onBlur: handleBlur,
+          onChange: handleInputChange,
+          onFocus: handleFocus,
+          onKeyDown: handleKeyDown,
+          placeholder,
+          ref: (node) => {
+            inputRef.current = node;
+            if (typeof ref === "function") {
+              ref(node);
+            } else if (ref) {
+              ref.current = node;
+            }
+          },
+          role: "combobox",
+          style: { width: "100%" },
+          value: inputValue
+        }, rest), {
+          children: [
+            slotLeft && /* @__PURE__ */ (0, import_jsx_runtime90.jsx)(TextField.Slot, { side: "left", children: slotLeft }),
+            slotRight && /* @__PURE__ */ (0, import_jsx_runtime90.jsx)(TextField.Slot, { side: "right", children: slotRight })
+          ]
+        })
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime90.jsxs)(
+        DropdownMenu.Root,
+        {
+          modal: false,
+          onOpenChange: (nextOpen) => {
+            if (!nextOpen && document.activeElement !== inputRef.current) {
+              setOpen(false);
+              setHighlightedIndex(-1);
+            }
+          },
+          open,
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime90.jsx)(DropdownMenu.Trigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime90.jsx)(
+              "span",
+              {
+                "aria-hidden": "true",
+                style: {
+                  bottom: 0,
+                  height: 0,
+                  left: 0,
+                  opacity: 0,
+                  pointerEvents: "none",
+                  position: "absolute",
+                  width: "100%"
+                }
+              }
+            ) }),
+            /* @__PURE__ */ (0, import_jsx_runtime90.jsx)(
+              DropdownMenu.Content,
+              {
+                align: "start",
+                onCloseAutoFocus: (e) => {
+                  e.preventDefault();
+                },
+                onOpenAutoFocus: (e) => {
+                  e.preventDefault();
+                },
+                sideOffset: 4,
+                style: {
+                  maxHeight: 240,
+                  overflowY: "auto",
+                  padding: 0,
+                  width: "var(--radix-dropdown-menu-trigger-width)"
+                },
+                children: filtered.length === 0 && emptyMessage !== null ? /* @__PURE__ */ (0, import_jsx_runtime90.jsx)(import_themes42.Box, { px: "2", py: "2", children: /* @__PURE__ */ (0, import_jsx_runtime90.jsx)(Typo, { color: "gray", children: emptyMessage }) }) : /* @__PURE__ */ (0, import_jsx_runtime90.jsx)(
+                  "ul",
+                  {
+                    id: listboxId,
+                    ref: listRef,
+                    role: "listbox",
+                    style: { listStyle: "none", margin: 0, padding: 0 },
+                    children: filtered.map((option, index) => {
+                      const isHighlighted = index === highlightedIndex;
+                      return /* @__PURE__ */ (0, import_jsx_runtime90.jsx)(
+                        "li",
+                        {
+                          "aria-selected": isHighlighted,
+                          id: `${listboxId}-option-${index}`,
+                          onMouseEnter: () => {
+                            setHighlightedIndex(index);
+                          },
+                          onPointerDown: (e) => {
+                            e.preventDefault();
+                            handleSelect(option);
+                          },
+                          role: "option",
+                          style: {
+                            padding: "var(--spacing-4) var(--spacing-6)",
+                            cursor: "pointer",
+                            backgroundColor: isHighlighted ? "var(--accent-3)" : "transparent",
+                            transition: "background-color 80ms"
+                          },
+                          children: /* @__PURE__ */ (0, import_jsx_runtime90.jsx)(Typo, { variant: "body", children: option.label })
+                        },
+                        option.value
+                      );
+                    })
+                  }
+                )
+              }
+            )
+          ]
+        }
+      )
+    ] });
+  }
+);
+AutocompleteTextfield.displayName = "AutocompleteTextfield";
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
+  AutocompleteTextfield,
   CurriculumBody,
   CurriculumProvider,
   CurriculumSidebar,