@comitor/ui 2.0.0 → 2.1.0

package/dist/components/ui/key-value.js

@@ -0,0 +1,641 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Slot } from "@radix-ui/react-slot";
+import { Plus, X } from "lucide-react";
+import * as React from "react";
+import { cn } from "../../lib/cn.js";
+import { useComposedRefs } from "../../lib/compose-refs.js";
+import { useAsRef } from "../../lib/use-as-ref.js";
+import { useIsomorphicLayoutEffect } from "../../lib/use-isomorphic-layout-effect.js";
+import { useLazyRef } from "../../lib/use-lazy-ref.js";
+import { VisuallyHiddenInput } from "../../lib/visually-hidden-input.js";
+import { Button } from "./button.js";
+import { Input } from "./input.js";
+import { DEFAULT_KEY_VALUE_LABELS } from "./key-value-constants.js";
+import { Textarea } from "./textarea.js";
+const ROOT_NAME = "KeyValue";
+const LIST_NAME = "KeyValueList";
+const ITEM_NAME = "KeyValueItem";
+const KEY_INPUT_NAME = "KeyValueKeyInput";
+const VALUE_INPUT_NAME = "KeyValueValueInput";
+const REMOVE_NAME = "KeyValueRemove";
+const ADD_NAME = "KeyValueAdd";
+const ERROR_NAME = "KeyValueError";
+function getErrorId(rootId, itemId, field) {
+  return `${rootId}-${itemId}-${field}-error`;
+}
+let fallbackIdCounter = 0;
+function createItemId() {
+  if (typeof crypto !== "undefined" && typeof crypto.randomUUID === "function") {
+    return crypto.randomUUID();
+  }
+  fallbackIdCounter += 1;
+  return `kv-${Date.now().toString(36)}-${fallbackIdCounter}`;
+}
+function removeQuotes(string, shouldStrip) {
+  if (!shouldStrip) return string;
+  const trimmed = string.trim();
+  if (trimmed.startsWith('"') && trimmed.endsWith('"') || trimmed.startsWith("'") && trimmed.endsWith("'")) {
+    return trimmed.slice(1, -1);
+  }
+  return trimmed;
+}
+function useStore(selector, ogStore) {
+  const contextStore = React.useContext(StoreContext);
+  const store = ogStore ?? contextStore;
+  if (!store) {
+    throw new Error(`\`useKeyValueStore\` ph\u1EA3i \u0111\u01B0\u1EE3c g\u1ECDi b\xEAn trong \`${ROOT_NAME}\``);
+  }
+  const getSnapshot = React.useCallback(() => selector(store.getState()), [store, selector]);
+  return React.useSyncExternalStore(store.subscribe, getSnapshot, getSnapshot);
+}
+const StoreContext = React.createContext(null);
+function useStoreContext(consumerName) {
+  const context = React.useContext(StoreContext);
+  if (!context) {
+    throw new Error(`\`${consumerName}\` ph\u1EA3i n\u1EB1m b\xEAn trong \`${ROOT_NAME}\``);
+  }
+  return context;
+}
+const KeyValueContext = React.createContext(null);
+function useKeyValueContext(consumerName) {
+  const context = React.useContext(KeyValueContext);
+  if (!context) {
+    throw new Error(`\`${consumerName}\` ph\u1EA3i n\u1EB1m b\xEAn trong \`${ROOT_NAME}\``);
+  }
+  return context;
+}
+function KeyValue(props) {
+  const {
+    value: valueProp,
+    defaultValue,
+    onValueChange,
+    onPaste,
+    onAdd,
+    onRemove,
+    onKeyValidate,
+    onValueValidate,
+    maxItems,
+    minItems = 0,
+    labels: labelsProp,
+    keyPlaceholder: keyPlaceholderProp,
+    valuePlaceholder: valuePlaceholderProp,
+    allowDuplicateKeys = false,
+    asChild,
+    enablePaste = true,
+    trim = true,
+    stripQuotes = true,
+    disabled = false,
+    readOnly = false,
+    required = false,
+    className,
+    id,
+    name,
+    ref,
+    ...rootProps
+  } = props;
+  const instanceId = React.useId();
+  const rootId = id ?? instanceId;
+  const labels = React.useMemo(() => ({ ...DEFAULT_KEY_VALUE_LABELS, ...labelsProp }), [labelsProp]);
+  const keyPlaceholder = keyPlaceholderProp ?? labels.keyPlaceholder;
+  const valuePlaceholder = valuePlaceholderProp ?? labels.valuePlaceholder;
+  const [formTrigger, setFormTrigger] = React.useState(null);
+  const composedRef = useComposedRefs(ref, (node) => setFormTrigger(node));
+  const isFormControl = formTrigger ? !!formTrigger.closest("form") : true;
+  const listenersRef = useLazyRef(() => /* @__PURE__ */ new Set());
+  const stateRef = useLazyRef(() => ({
+    value: valueProp ?? defaultValue ?? [{ id: createItemId(), key: "", value: "" }],
+    focusedId: null,
+    errors: {}
+  }));
+  const propsRef = useAsRef({ onValueChange });
+  const store = React.useMemo(() => {
+    return {
+      subscribe: (cb) => {
+        listenersRef.current.add(cb);
+        return () => listenersRef.current.delete(cb);
+      },
+      getState: () => stateRef.current,
+      setState: (key, val) => {
+        if (Object.is(stateRef.current[key], val)) return;
+        if (key === "value" && Array.isArray(val)) {
+          stateRef.current.value = val;
+          propsRef.current.onValueChange?.(val);
+        } else {
+          stateRef.current[key] = val;
+        }
+        store.notify();
+      },
+      notify: () => {
+        for (const cb of listenersRef.current) {
+          cb();
+        }
+      }
+    };
+  }, [listenersRef, stateRef, propsRef]);
+  const value = useStore((state) => state.value, store);
+  const errors = useStore((state) => state.errors, store);
+  const isInvalid = Object.keys(errors).length > 0;
+  useIsomorphicLayoutEffect(() => {
+    if (valueProp !== void 0) {
+      store.setState("value", valueProp);
+    }
+  }, [valueProp]);
+  const contextValue = React.useMemo(
+    () => ({
+      onPaste,
+      onAdd,
+      onRemove,
+      onKeyValidate,
+      onValueValidate,
+      rootId,
+      maxItems,
+      minItems,
+      keyPlaceholder,
+      valuePlaceholder,
+      labels,
+      allowDuplicateKeys,
+      enablePaste,
+      trim,
+      stripQuotes,
+      disabled,
+      readOnly,
+      required
+    }),
+    [
+      onPaste,
+      onAdd,
+      onRemove,
+      onKeyValidate,
+      onValueValidate,
+      rootId,
+      disabled,
+      readOnly,
+      required,
+      maxItems,
+      minItems,
+      keyPlaceholder,
+      valuePlaceholder,
+      labels,
+      allowDuplicateKeys,
+      enablePaste,
+      trim,
+      stripQuotes
+    ]
+  );
+  const RootPrimitive = asChild ? Slot : "div";
+  return /* @__PURE__ */ jsx(StoreContext.Provider, { value: store, children: /* @__PURE__ */ jsxs(KeyValueContext.Provider, { value: contextValue, children: [
+    /* @__PURE__ */ jsx(
+      RootPrimitive,
+      {
+        id,
+        "data-slot": "key-value",
+        "data-disabled": disabled ? "" : void 0,
+        "data-invalid": isInvalid ? "" : void 0,
+        "data-readonly": readOnly ? "" : void 0,
+        ...rootProps,
+        ref: composedRef,
+        className: cn("flex flex-col gap-2", className)
+      }
+    ),
+    isFormControl && /* @__PURE__ */ jsx(
+      VisuallyHiddenInput,
+      {
+        type: "hidden",
+        control: formTrigger,
+        name,
+        value,
+        disabled,
+        readOnly,
+        required
+      }
+    )
+  ] }) });
+}
+function KeyValueList(props) {
+  const { orientation = "vertical", asChild, className, ...listProps } = props;
+  const value = useStore((state) => state.value);
+  const ListPrimitive = asChild ? Slot : "div";
+  return /* @__PURE__ */ jsx(
+    ListPrimitive,
+    {
+      role: "list",
+      "data-slot": "key-value-list",
+      "data-orientation": orientation,
+      ...listProps,
+      className: cn("flex", orientation === "vertical" ? "flex-col gap-2" : "flex-row gap-2", className),
+      children: value.map((item) => {
+        const children = React.Children.toArray(props.children);
+        return /* @__PURE__ */ jsx(KeyValueItemContext.Provider, { value: item, children }, item.id);
+      })
+    }
+  );
+}
+const KeyValueItemContext = React.createContext(null);
+function useKeyValueItemContext(consumerName) {
+  const context = React.useContext(KeyValueItemContext);
+  if (!context) {
+    throw new Error(`\`${consumerName}\` ph\u1EA3i n\u1EB1m b\xEAn trong \`${LIST_NAME}\``);
+  }
+  return context;
+}
+function KeyValueItem(props) {
+  const { asChild, className, ...itemProps } = props;
+  const itemData = useKeyValueItemContext(ITEM_NAME);
+  const focusedId = useStore((state) => state.focusedId);
+  const ItemPrimitive = asChild ? Slot : "div";
+  return /* @__PURE__ */ jsx(
+    ItemPrimitive,
+    {
+      role: "listitem",
+      "data-slot": "key-value-item",
+      "data-highlighted": focusedId === itemData.id ? "" : void 0,
+      ...itemProps,
+      className: cn("flex items-start gap-2", className)
+    }
+  );
+}
+function KeyValueKeyInput(props) {
+  const {
+    onChange: onChangeProp,
+    onPaste: onPasteProp,
+    asChild,
+    disabled,
+    readOnly,
+    required,
+    ref,
+    ...keyInputProps
+  } = props;
+  const context = useKeyValueContext(KEY_INPUT_NAME);
+  const itemData = useKeyValueItemContext(KEY_INPUT_NAME);
+  const store = useStoreContext(KEY_INPUT_NAME);
+  const errors = useStore((state) => state.errors);
+  const focusedId = useStore((state) => state.focusedId);
+  const inputRef = React.useRef(null);
+  const composedRef = useComposedRefs(ref, inputRef);
+  React.useEffect(() => {
+    if (focusedId === itemData.id) {
+      inputRef.current?.focus();
+    }
+  }, [focusedId, itemData.id]);
+  const propsRef = useAsRef({
+    onChange: onChangeProp,
+    onPaste: onPasteProp
+  });
+  const isDisabled = disabled || context.disabled;
+  const isReadOnly = readOnly || context.readOnly;
+  const isRequired = required || context.required;
+  const isInvalid = errors[itemData.id]?.key !== void 0;
+  const onChange = React.useCallback(
+    (event) => {
+      const state = store.getState();
+      const newValue = state.value.map((item) => {
+        if (item.id !== itemData.id) return item;
+        const updated = { ...item, key: event.target.value };
+        if (context.trim) updated.key = updated.key.trim();
+        return updated;
+      });
+      store.setState("value", newValue);
+      const updatedItemData = newValue.find((item) => item.id === itemData.id);
+      if (updatedItemData) {
+        const errors2 = {};
+        if (context.onKeyValidate) {
+          const keyError = context.onKeyValidate(updatedItemData.key, newValue);
+          if (keyError) errors2.key = keyError;
+        }
+        if (!context.allowDuplicateKeys) {
+          const duplicateKey = newValue.find(
+            (item) => item.id !== updatedItemData.id && item.key === updatedItemData.key && updatedItemData.key !== ""
+          );
+          if (duplicateKey) {
+            errors2.key = context.labels.duplicateKey;
+          }
+        }
+        if (context.onValueValidate) {
+          const valueError = context.onValueValidate(updatedItemData.value, updatedItemData.key, newValue);
+          if (valueError) errors2.value = valueError;
+        }
+        const newErrorsState = { ...state.errors };
+        if (Object.keys(errors2).length > 0) {
+          newErrorsState[itemData.id] = errors2;
+        } else {
+          delete newErrorsState[itemData.id];
+        }
+        store.setState("errors", newErrorsState);
+      }
+      propsRef.current.onChange?.(event);
+    },
+    [store, itemData.id, context, propsRef]
+  );
+  const onPaste = React.useCallback(
+    (event) => {
+      if (!context.enablePaste) return;
+      propsRef.current.onPaste?.(event);
+      if (event.defaultPrevented) return;
+      const content = event.clipboardData.getData("text");
+      const lines = content.split(/\r?\n/).filter((line) => line.trim());
+      if (lines.length > 1) {
+        event.preventDefault();
+        const parsed = [];
+        for (const line of lines) {
+          let key = "";
+          let value = "";
+          if (line.includes("=")) {
+            const parts = line.split("=");
+            key = parts[0]?.trim() ?? "";
+            value = removeQuotes(parts.slice(1).join("=").trim(), context.stripQuotes);
+          } else if (line.includes(":")) {
+            const parts = line.split(":");
+            key = parts[0]?.trim() ?? "";
+            value = removeQuotes(parts.slice(1).join(":").trim(), context.stripQuotes);
+          } else if (/\s{2,}|\t/.test(line)) {
+            const parts = line.split(/\s{2,}|\t/);
+            key = parts[0]?.trim() ?? "";
+            value = removeQuotes(parts.slice(1).join(" ").trim(), context.stripQuotes);
+          }
+          if (key) {
+            parsed.push({ id: createItemId(), key, value });
+          }
+        }
+        if (parsed.length > 0) {
+          const state = store.getState();
+          const currentIndex = state.value.findIndex((item) => item.id === itemData.id);
+          let newValue;
+          if (itemData.key === "" && itemData.value === "") {
+            newValue = [...state.value.slice(0, currentIndex), ...parsed, ...state.value.slice(currentIndex + 1)];
+          } else {
+            newValue = [...state.value.slice(0, currentIndex + 1), ...parsed, ...state.value.slice(currentIndex + 1)];
+          }
+          if (context.maxItems !== void 0) {
+            newValue = newValue.slice(0, context.maxItems);
+          }
+          store.setState("value", newValue);
+          if (context.onPaste) {
+            context.onPaste(event.nativeEvent, parsed);
+          }
+        }
+      }
+    },
+    [context, store, itemData, propsRef]
+  );
+  const KeyInputPrimitive = asChild ? Slot : Input;
+  return /* @__PURE__ */ jsx(
+    KeyInputPrimitive,
+    {
+      "aria-invalid": isInvalid,
+      "aria-describedby": isInvalid ? getErrorId(context.rootId, itemData.id, "key") : void 0,
+      "data-slot": "key-value-key-input",
+      autoCapitalize: "off",
+      autoComplete: "off",
+      autoCorrect: "off",
+      spellCheck: "false",
+      disabled: isDisabled,
+      readOnly: isReadOnly,
+      required: isRequired,
+      placeholder: context.keyPlaceholder,
+      ...keyInputProps,
+      ref: composedRef,
+      value: itemData.key,
+      onChange,
+      onPaste
+    }
+  );
+}
+function KeyValueValueInput(props) {
+  const {
+    onChange: onChangeProp,
+    asChild,
+    disabled,
+    readOnly,
+    required,
+    className,
+    maxRows,
+    style,
+    ...valueInputProps
+  } = props;
+  const context = useKeyValueContext(VALUE_INPUT_NAME);
+  const itemData = useKeyValueItemContext(VALUE_INPUT_NAME);
+  const store = useStoreContext(VALUE_INPUT_NAME);
+  const errors = useStore((state) => state.errors);
+  const propsRef = useAsRef({
+    onChange: onChangeProp
+  });
+  const isDisabled = disabled || context.disabled;
+  const isReadOnly = readOnly || context.readOnly;
+  const isRequired = required || context.required;
+  const isInvalid = errors[itemData.id]?.value !== void 0;
+  const maxHeight = maxRows ? `calc(${maxRows} * 1.5em + 1rem)` : void 0;
+  const onChange = React.useCallback(
+    (event) => {
+      propsRef.current.onChange?.(event);
+      const state = store.getState();
+      const newValue = state.value.map((item) => {
+        if (item.id !== itemData.id) return item;
+        const updated = { ...item, value: event.target.value };
+        if (context.trim) updated.value = updated.value.trim();
+        return updated;
+      });
+      store.setState("value", newValue);
+      const updatedItemData = newValue.find((item) => item.id === itemData.id);
+      if (updatedItemData) {
+        const errors2 = {};
+        if (context.onKeyValidate) {
+          const keyError = context.onKeyValidate(updatedItemData.key, newValue);
+          if (keyError) errors2.key = keyError;
+        }
+        if (!context.allowDuplicateKeys) {
+          const duplicateKey = newValue.find(
+            (item) => item.id !== updatedItemData.id && item.key === updatedItemData.key && updatedItemData.key !== ""
+          );
+          if (duplicateKey) {
+            errors2.key = context.labels.duplicateKey;
+          }
+        }
+        if (context.onValueValidate) {
+          const valueError = context.onValueValidate(updatedItemData.value, updatedItemData.key, newValue);
+          if (valueError) errors2.value = valueError;
+        }
+        const newErrorsState = { ...state.errors };
+        if (Object.keys(errors2).length > 0) {
+          newErrorsState[itemData.id] = errors2;
+        } else {
+          delete newErrorsState[itemData.id];
+        }
+        store.setState("errors", newErrorsState);
+      }
+    },
+    [store, itemData.id, context, propsRef]
+  );
+  const ValueInputPrimitive = asChild ? Slot : Textarea;
+  return /* @__PURE__ */ jsx(
+    ValueInputPrimitive,
+    {
+      "aria-invalid": isInvalid,
+      "aria-describedby": isInvalid ? getErrorId(context.rootId, itemData.id, "value") : void 0,
+      "data-slot": "key-value-value-input",
+      autoCapitalize: "off",
+      autoComplete: "off",
+      autoCorrect: "off",
+      spellCheck: "false",
+      disabled: isDisabled,
+      readOnly: isReadOnly,
+      required: isRequired,
+      placeholder: context.valuePlaceholder,
+      ...valueInputProps,
+      className: cn(
+        /*
+         * ⚠ Khác thượng nguồn: ô giá trị phải trông như ô khoá (`Input`) đứng ngay cạnh khi còn MỘT
+         * dòng. `Textarea` của gói theo comitor-ds: `text-base md:text-sm` + `py-2` (cao 38px ở
+         * desktop, 42px và chữ 16px ở mobile), nền `bg-transparent dark:bg-input-fill`, có
+         * `shadow-xs`; còn `Input` là `h-9 text-sm bg-background`, không bóng. Ghi đè ở ĐÂY chứ
+         * không sửa hai primitive: `text-sm` ở mọi cỡ màn, `min-h-9` + `py-1.5` (dòng chữ 20px cách
+         * mép trên 7px — đúng chỗ `Input` căn giữa dòng chữ trong 36px), `bg-background` ở cả hai
+         * theme, bỏ bóng. Nhiều dòng thì `field-sizing-content` vẫn cho ô cao dần như cũ.
+         */
+        "field-sizing-content min-h-9 resize-none py-1.5 text-sm md:text-sm bg-background dark:bg-background shadow-none",
+        maxRows && "overflow-y-auto",
+        className
+      ),
+      style: {
+        ...style,
+        ...maxHeight && { maxHeight }
+      },
+      value: itemData.value,
+      onChange
+    }
+  );
+}
+function KeyValueRemove(props) {
+  const { onClick: onClickProp, children, className, ...removeProps } = props;
+  const context = useKeyValueContext(REMOVE_NAME);
+  const itemData = useKeyValueItemContext(REMOVE_NAME);
+  const store = useStoreContext(REMOVE_NAME);
+  const propsRef = useAsRef({
+    onClick: onClickProp
+  });
+  const value = useStore((state) => state.value);
+  const isDisabled = context.disabled || value.length <= context.minItems;
+  const itemIndex = value.findIndex((item) => item.id === itemData.id);
+  const onClick = React.useCallback(
+    (event) => {
+      propsRef.current.onClick?.(event);
+      const state = store.getState();
+      if (state.value.length <= context.minItems) return;
+      const itemToRemove = state.value.find((item) => item.id === itemData.id);
+      if (!itemToRemove) return;
+      const button = event.currentTarget;
+      const hadFocus = button.ownerDocument.activeElement === button;
+      const root = button.closest('[data-slot="key-value"]');
+      const removedIndex = state.value.indexOf(itemToRemove);
+      const newValue = state.value.filter((item) => item.id !== itemData.id);
+      const newErrors = { ...state.errors };
+      delete newErrors[itemData.id];
+      store.setState("value", newValue);
+      store.setState("errors", newErrors);
+      context.onRemove?.(itemToRemove);
+      if (hadFocus && root) {
+        requestAnimationFrame(() => {
+          const removeButtons = root.querySelectorAll('[data-slot="key-value-remove"]:not(:disabled)');
+          const nextTarget = removeButtons[Math.min(removedIndex, removeButtons.length - 1)] ?? root.querySelector('[data-slot="key-value-add"]:not(:disabled)');
+          nextTarget?.focus();
+        });
+      }
+    },
+    [store, context, itemData.id, propsRef]
+  );
+  return /* @__PURE__ */ jsx(
+    Button,
+    {
+      type: "button",
+      "data-slot": "key-value-remove",
+      variant: "outline",
+      size: "icon",
+      "aria-label": context.labels.remove(itemData.key, itemIndex + 1),
+      disabled: isDisabled,
+      ...removeProps,
+      className: cn("shrink-0", className),
+      onClick,
+      children: children ?? /* @__PURE__ */ jsx(X, { "aria-hidden": "true", className: "size-4" })
+    }
+  );
+}
+function KeyValueAdd(props) {
+  const { onClick: onClickProp, children, ...addProps } = props;
+  const context = useKeyValueContext(ADD_NAME);
+  const store = useStoreContext(ADD_NAME);
+  const propsRef = useAsRef({
+    onClick: onClickProp
+  });
+  const value = useStore((state) => state.value);
+  const isDisabled = context.disabled || context.maxItems !== void 0 && value.length >= context.maxItems;
+  const onClick = React.useCallback(
+    (event) => {
+      propsRef.current.onClick?.(event);
+      const state = store.getState();
+      if (context.maxItems !== void 0 && state.value.length >= context.maxItems) {
+        return;
+      }
+      const newItem = {
+        id: createItemId(),
+        key: "",
+        value: ""
+      };
+      const newValue = [...state.value, newItem];
+      store.setState("value", newValue);
+      store.setState("focusedId", newItem.id);
+      context.onAdd?.(newItem);
+    },
+    [store, context, propsRef]
+  );
+  return /* @__PURE__ */ jsx(
+    Button,
+    {
+      type: "button",
+      "data-slot": "key-value-add",
+      variant: "outline",
+      disabled: isDisabled,
+      ...addProps,
+      onClick,
+      children: children ?? /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(Plus, { "aria-hidden": "true", className: "size-4" }),
+        context.labels.add
+      ] })
+    }
+  );
+}
+function KeyValueError(props) {
+  const { field, asChild, className, ...errorProps } = props;
+  const context = useKeyValueContext(ERROR_NAME);
+  const itemData = useKeyValueItemContext(ERROR_NAME);
+  const errors = useStore((state) => state.errors);
+  const error = errors[itemData.id]?.[field];
+  if (!error) return null;
+  const ErrorPrimitive = asChild ? Slot : "span";
+  return /* @__PURE__ */ jsx(
+    ErrorPrimitive,
+    {
+      id: getErrorId(context.rootId, itemData.id, field),
+      role: "alert",
+      ...errorProps,
+      className: cn(
+        // ⚠ Khác thượng nguồn: `text-destructive` (bậc TÔ NỀN) → `text-destructive-ink`, bậc dành
+        // cho chữ trên nền trang — cùng token với chữ lỗi của `Input`.
+        "text-sm font-medium text-destructive-ink",
+        className
+      ),
+      children: error
+    }
+  );
+}
+export {
+  KeyValue,
+  KeyValueAdd,
+  KeyValueError,
+  KeyValueItem,
+  KeyValueKeyInput,
+  KeyValueList,
+  KeyValueRemove,
+  KeyValueValueInput,
+  useStore as useKeyValueStore
+};
+//# sourceMappingURL=key-value.js.map