prime-ui-kit 0.7.7 → 0.7.9

package/dist/index.js

@@ -9130,6 +9130,7 @@ function PopoverContent({
   trapFocus = false,
   insetPadding = "none",
   insetGap = "pad",
+  stackAboveDropdown = false,
   children,
   className
 }) {
@@ -9167,6 +9168,7 @@ function PopoverContent({
       "aria-labelledby": triggerId,
       "data-react-aria-top-layer": "true",
       "data-overlay-portal-layer": overlayPortalLayer,
+      "data-overlay-stack": stackAboveDropdown ? "above-dropdown" : void 0,
       "data-side": layout?.resolvedSide ?? side,
       "data-size": size,
       "data-inset-padding": insetPadding,
@@ -10405,12 +10407,40 @@ var TagSelect_default = {
   hint: "TagSelect_hint",
   optionRow: "TagSelect_optionRow",
   createRow: "TagSelect_createRow",
-  createLabel: "TagSelect_createLabel"
+  createLabel: "TagSelect_createLabel",
+  optionRowWrap: "TagSelect_optionRowWrap",
+  optionRowSelect: "TagSelect_optionRowSelect",
+  optionMenuTrigger: "TagSelect_optionMenuTrigger",
+  optionMenuDots: "TagSelect_optionMenuDots",
+  managePopoverSurface: "TagSelect_managePopoverSurface",
+  managePopoverShell: "TagSelect_managePopoverShell",
+  manageDelete: "TagSelect_manageDelete",
+  manageDeleteIcon: "TagSelect_manageDeleteIcon",
+  manageSeparator: "TagSelect_manageSeparator",
+  manageColorsHeading: "TagSelect_manageColorsHeading",
+  manageColorList: "TagSelect_manageColorList",
+  manageColorRow: "TagSelect_manageColorRow",
+  manageColorSwatch: "TagSelect_manageColorSwatch",
+  manageColorLabel: "TagSelect_manageColorLabel",
+  manageCheck: "TagSelect_manageCheck",
+  manageCheckPlaceholder: "TagSelect_manageCheckPlaceholder"
 };
 
 // src/components/tag-select/TagSelect.tsx
-import { jsx as jsx57, jsxs as jsxs31 } from "react/jsx-runtime";
+import { Fragment as Fragment6, jsx as jsx57, jsxs as jsxs31 } from "react/jsx-runtime";
 var CREATE_VALUE = "__prime_tag_select_create__";
+var TAG_COLOR_CHOICES = [
+  { color: "gray", label: "Default" },
+  { color: "red", label: "Red" },
+  { color: "orange", label: "Orange" },
+  { color: "yellow", label: "Yellow" },
+  { color: "green", label: "Green" },
+  { color: "blue", label: "Blue" },
+  { color: "purple", label: "Purple" },
+  { color: "pink", label: "Pink" },
+  { color: "sky", label: "Sky" },
+  { color: "teal", label: "Teal" }
+];
 function normalizeList(selected, options, defaultTagColor) {
   return selected.map((v) => {
     const o = options.find((x) => x.value === v);
@@ -10441,6 +10471,183 @@ function shouldShowCreate(creatable, inputTrim, selected, options) {
   );
   return !exists;
 }
+function mergeOptionsWithCreated(options, created) {
+  const existing = new Set(options.map((o) => o.value));
+  const extra = created.filter((c) => !existing.has(c.value));
+  return extra.length === 0 ? options : [...options, ...extra];
+}
+function TagOptionManagePopover({
+  option,
+  open,
+  onOpenChange,
+  defaultTagColor,
+  management,
+  disabled
+}) {
+  const inputRef = React71.useRef(null);
+  const resolvedColor = option.color ?? defaultTagColor;
+  const [draftLabel, setDraftLabel] = React71.useState(option.label);
+  React71.useEffect(() => {
+    if (open) {
+      setDraftLabel(option.label);
+    }
+  }, [open, option.label]);
+  React71.useEffect(() => {
+    if (!open) return;
+    const id = requestAnimationFrame(() => inputRef.current?.focus());
+    return () => cancelAnimationFrame(id);
+  }, [open]);
+  const commitLabel = () => {
+    const next = draftLabel.trim();
+    if (next.length > 0 && next !== option.label) {
+      management.onUpdate(option.value, { label: next });
+    }
+    if (next.length === 0) {
+      setDraftLabel(option.label);
+    }
+  };
+  const colorsSectionLabel = management.colorsSectionLabel ?? "Colors";
+  const deleteLabel = management.deleteLabel ?? "Delete";
+  const menuPrefix = management.editMenuAriaLabelPrefix ?? "Edit tag";
+  return /* @__PURE__ */ jsxs31(Popover.Root, { open, onOpenChange, children: [
+    /* @__PURE__ */ jsx57(Popover.Trigger, { asChild: true, children: /* @__PURE__ */ jsx57(
+      "button",
+      {
+        type: "button",
+        className: TagSelect_default.optionMenuTrigger,
+        "aria-label": `${menuPrefix} ${option.label}`,
+        disabled,
+        onMouseDown: (e) => {
+          e.preventDefault();
+          e.stopPropagation();
+        },
+        onClick: (e) => {
+          e.stopPropagation();
+        },
+        children: /* @__PURE__ */ jsxs31(
+          "svg",
+          {
+            className: TagSelect_default.optionMenuDots,
+            viewBox: "0 0 16 16",
+            fill: "currentColor",
+            "aria-hidden": true,
+            children: [
+              /* @__PURE__ */ jsx57("circle", { cx: "4", cy: "8", r: "1.5" }),
+              /* @__PURE__ */ jsx57("circle", { cx: "8", cy: "8", r: "1.5" }),
+              /* @__PURE__ */ jsx57("circle", { cx: "12", cy: "8", r: "1.5" })
+            ]
+          }
+        )
+      }
+    ) }),
+    /* @__PURE__ */ jsx57(
+      Popover.Content,
+      {
+        side: "bottom",
+        align: "end",
+        trapFocus: false,
+        insetPadding: "none",
+        insetGap: "none",
+        size: "s",
+        stackAboveDropdown: true,
+        className: TagSelect_default.managePopoverSurface,
+        children: /* @__PURE__ */ jsxs31(
+          "fieldset",
+          {
+            className: TagSelect_default.managePopoverShell,
+            onKeyDown: (e) => {
+              e.stopPropagation();
+            },
+            children: [
+              /* @__PURE__ */ jsx57(Input.Root, { size: "s", children: /* @__PURE__ */ jsx57(Input.Wrapper, { children: /* @__PURE__ */ jsx57(
+                Input.Field,
+                {
+                  ref: inputRef,
+                  value: draftLabel,
+                  onChange: (e) => setDraftLabel(e.target.value),
+                  onBlur: commitLabel,
+                  onKeyDown: (e) => {
+                    if (e.key === "Enter") {
+                      e.preventDefault();
+                      commitLabel();
+                      onOpenChange(false);
+                    }
+                  },
+                  "aria-label": "Tag name"
+                }
+              ) }) }),
+              /* @__PURE__ */ jsxs31(
+                Button.Root,
+                {
+                  type: "button",
+                  variant: "error",
+                  mode: "ghost",
+                  size: "s",
+                  className: TagSelect_default.manageDelete,
+                  onClick: () => {
+                    management.onDelete(option.value);
+                    onOpenChange(false);
+                  },
+                  children: [
+                    /* @__PURE__ */ jsx57("svg", { className: TagSelect_default.manageDeleteIcon, viewBox: "0 0 16 16", fill: "none", "aria-hidden": true, children: /* @__PURE__ */ jsx57(
+                      "path",
+                      {
+                        d: "M4 4h8M6 4V3h4v1m2 0v9a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V4h10zM6 7v4M10 7v4",
+                        stroke: "currentColor",
+                        strokeWidth: "1.25",
+                        strokeLinecap: "round",
+                        strokeLinejoin: "round"
+                      }
+                    ) }),
+                    deleteLabel
+                  ]
+                }
+              ),
+              /* @__PURE__ */ jsx57("hr", { className: TagSelect_default.manageSeparator }),
+              /* @__PURE__ */ jsx57("span", { className: TagSelect_default.manageColorsHeading, children: colorsSectionLabel }),
+              /* @__PURE__ */ jsx57("div", { className: TagSelect_default.manageColorList, children: TAG_COLOR_CHOICES.map((row) => {
+                const selected = resolvedColor === row.color;
+                return /* @__PURE__ */ jsxs31(
+                  "button",
+                  {
+                    type: "button",
+                    className: TagSelect_default.manageColorRow,
+                    onClick: () => {
+                      management.onUpdate(option.value, { color: row.color });
+                    },
+                    children: [
+                      /* @__PURE__ */ jsx57(
+                        "span",
+                        {
+                          className: TagSelect_default.manageColorSwatch,
+                          "aria-hidden": true,
+                          ...toDataAttributes({ color: row.color })
+                        }
+                      ),
+                      /* @__PURE__ */ jsx57("span", { className: TagSelect_default.manageColorLabel, children: row.label }),
+                      selected ? /* @__PURE__ */ jsx57(Fragment6, { children: /* @__PURE__ */ jsx57("svg", { className: TagSelect_default.manageCheck, viewBox: "0 0 16 16", "aria-hidden": true, children: /* @__PURE__ */ jsx57(
+                        "path",
+                        {
+                          d: "M3 8l3 3 7-7",
+                          stroke: "currentColor",
+                          strokeWidth: "1.75",
+                          fill: "none",
+                          strokeLinecap: "round",
+                          strokeLinejoin: "round"
+                        }
+                      ) }) }) : /* @__PURE__ */ jsx57("span", { className: TagSelect_default.manageCheckPlaceholder, "aria-hidden": true })
+                    ]
+                  },
+                  `${row.label}-${row.color}`
+                );
+              }) })
+            ]
+          }
+        )
+      }
+    )
+  ] });
+}
 function TagSelectRoot({
   options,
   value: valueProp,
@@ -10455,6 +10662,7 @@ function TagSelectRoot({
   placeholder = "",
   hasError = false,
   size = "m",
+  optionManagement,
   id: idProp,
   className,
   "aria-label": ariaLabel,
@@ -10473,6 +10681,8 @@ function TagSelectRoot({
   const [inputFocused, setInputFocused] = React71.useState(false);
   const [open, setOpen] = React71.useState(false);
   const [highlightedValue, setHighlightedValue] = React71.useState(void 0);
+  const [manageOpenValue, setManageOpenValue] = React71.useState(null);
+  const [createdOptions, setCreatedOptions] = React71.useState([]);
   const triggerRef = React71.useRef(null);
   const inputRef = React71.useRef(null);
   const listboxRef = React71.useRef(null);
@@ -10484,11 +10694,47 @@ function TagSelectRoot({
   const updateRef = React71.useRef(update);
   updateRef.current = update;
   const inputTrim = inputValue.trim();
+  const mergedOptions = React71.useMemo(
+    () => mergeOptionsWithCreated(options, createdOptions),
+    [options, createdOptions]
+  );
+  React71.useEffect(() => {
+    setCreatedOptions((prev) => {
+      const next = prev.filter((c) => !options.some((o) => o.value === c.value));
+      return next.length === prev.length ? prev : next;
+    });
+  }, [options]);
   const filtered = React71.useMemo(
-    () => optionsForList(options, inputValue, selected),
-    [options, inputValue, selected]
+    () => optionsForList(mergedOptions, inputValue, selected),
+    [mergedOptions, inputValue, selected]
   );
-  const showCreate = shouldShowCreate(creatable, inputTrim, selected, options);
+  const showCreate = shouldShowCreate(creatable, inputTrim, selected, mergedOptions);
+  const resolvedOptionManagement = React71.useMemo(() => {
+    if (!optionManagement) return void 0;
+    return {
+      ...optionManagement,
+      onUpdate: (value, updates) => {
+        const inProps = options.some((o) => o.value === value);
+        if (!inProps) {
+          setCreatedOptions(
+            (prev) => prev.map(
+              (o) => o.value === value ? {
+                ...o,
+                ...updates.label !== void 0 ? { label: updates.label } : {},
+                ...updates.color !== void 0 ? { color: updates.color } : {}
+              } : o
+            )
+          );
+        }
+        optionManagement.onUpdate(value, updates);
+      },
+      onDelete: (value) => {
+        setSelected((prev) => prev.filter((x) => x !== value));
+        setCreatedOptions((prev) => prev.filter((o) => o.value !== value));
+        optionManagement.onDelete(value);
+      }
+    };
+  }, [optionManagement, options, setSelected]);
   const hasPanelContent = filtered.length > 0 || showCreate;
   const flatOptionValues = React71.useMemo(() => {
     const v = [];
@@ -10551,11 +10797,20 @@ function TagSelectRoot({
     if (!open) return;
     if (!hasPanelContent) setOpen(false);
   }, [open, hasPanelContent]);
-  useEscapeKey({ enabled: open, onEscape: () => setOpen(false) });
+  React71.useEffect(() => {
+    if (!open) setManageOpenValue(null);
+  }, [open]);
+  useEscapeKey({ enabled: open && manageOpenValue === null, onEscape: () => setOpen(false) });
   useOutsideClick({
     refs: [triggerRef, listboxRef],
     enabled: open,
-    onOutsideClick: () => setOpen(false)
+    onOutsideClick: () => setOpen(false),
+    shouldSuppressOutsideClick: (target) => {
+      if (!(target instanceof Element)) return false;
+      const dialog = target.closest('[role="dialog"][data-react-aria-top-layer="true"]');
+      if (!dialog) return false;
+      return dialog !== listboxRef.current;
+    }
   });
   const toggleValue = React71.useCallback(
     (value) => {
@@ -10578,13 +10833,19 @@ function TagSelectRoot({
           onCreated?.(v);
           return [...prev, v];
         });
+        setCreatedOptions((prev) => {
+          if (prev.some((o) => o.value === v) || options.some((o) => o.value === v)) {
+            return prev;
+          }
+          return [...prev, { value: v, label: v, color: defaultTagColor }];
+        });
         setInputValue("");
         return;
       }
       toggleValue(rawValue);
       setInputValue("");
     },
-    [inputTrim, onCreated, setSelected, toggleValue]
+    [defaultTagColor, inputTrim, onCreated, options, setSelected, toggleValue]
   );
   const getItems = React71.useCallback(() => queryEnabledSelectOptions(listboxRef.current), []);
   const onListboxKeyDown = (e) => {
@@ -10627,7 +10888,7 @@ function TagSelectRoot({
         if (hv === CREATE_VALUE) {
           handleSelectFromList(CREATE_VALUE);
         } else if (hv) {
-          const o = options.find((x) => x.value === hv);
+          const o = mergedOptions.find((x) => x.value === hv);
           if (o && !o.disabled) {
             handleSelectFromList(o.value);
           }
@@ -10643,7 +10904,7 @@ function TagSelectRoot({
       });
     }
   };
-  const chips = normalizeList(selected, options, defaultTagColor);
+  const chips = normalizeList(selected, mergedOptions, defaultTagColor);
   const isEmpty = selected.length === 0 && inputTrim.length === 0;
   const inputCollapsed = !inputFocused && inputTrim.length === 0 && selected.length > 0;
   const focusInput = () => {
@@ -10740,8 +11001,9 @@ function TagSelectRoot({
                   const next = e.target.value;
                   setInputValue(next);
                   const nextTrim = next.trim();
-                  const nextFiltered = optionsForList(options, next, selected);
-                  const nextShowCreate = shouldShowCreate(creatable, nextTrim, selected, options);
+                  const nextMerged = mergeOptionsWithCreated(options, createdOptions);
+                  const nextFiltered = optionsForList(nextMerged, next, selected);
+                  const nextShowCreate = shouldShowCreate(creatable, nextTrim, selected, nextMerged);
                   if (nextFiltered.length > 0 || nextShowCreate) {
                     setOpen(true);
                   } else {
@@ -10812,7 +11074,50 @@ function TagSelectRoot({
             },
             CREATE_VALUE
           ) : null,
-          filtered.map((o) => /* @__PURE__ */ jsx57(
+          resolvedOptionManagement ? filtered.map((o) => /* @__PURE__ */ jsxs31(
+            "div",
+            {
+              role: "option",
+              tabIndex: -1,
+              "aria-selected": false,
+              className: TagSelect_default.optionRowWrap,
+              ...toDataAttributes({
+                value: o.value,
+                label: o.label,
+                highlighted: highlightedValue === o.value,
+                selected: false,
+                disabled: Boolean(o.disabled)
+              }),
+              onMouseEnter: () => !o.disabled && setHighlightedValue(o.value),
+              children: [
+                /* @__PURE__ */ jsx57(
+                  "button",
+                  {
+                    type: "button",
+                    className: TagSelect_default.optionRowSelect,
+                    disabled: o.disabled,
+                    onMouseDown: (e) => {
+                      if (!o.disabled) e.preventDefault();
+                    },
+                    onClick: () => !o.disabled && handleSelectFromList(o.value),
+                    children: /* @__PURE__ */ jsx57(Badge.Root, { color: o.color ?? defaultTagColor, variant: "filled", children: o.label })
+                  }
+                ),
+                !o.disabled ? /* @__PURE__ */ jsx57(
+                  TagOptionManagePopover,
+                  {
+                    option: o,
+                    open: manageOpenValue === o.value,
+                    onOpenChange: (next) => setManageOpenValue(next ? o.value : null),
+                    defaultTagColor,
+                    management: resolvedOptionManagement,
+                    disabled
+                  }
+                ) : null
+              ]
+            },
+            o.value
+          )) : filtered.map((o) => /* @__PURE__ */ jsx57(
             "button",
             {
               type: "button",