@enonic/ui 0.13.2 → 0.15.0

package/dist/enonic-ui.es.js

@@ -81,6 +81,17 @@ const useMenu = () => {
   }
   return context;
 };
+const SearchFieldContext = createContext(void 0);
+const SearchFieldProvider = ({ value, children }) => {
+  return /* @__PURE__ */ u(SearchFieldContext.Provider, { value, children });
+};
+const useSearchField = () => {
+  const context = useContext(SearchFieldContext);
+  if (!context) {
+    throw new Error("useSearchField must be used within a SearchFieldProvider");
+  }
+  return context;
+};
 function generateAriaId(baseId, suffix) {
   return `${baseId}-${suffix}`;
 }
@@ -3855,7 +3866,27 @@ const IconButton = forwardRef(
   }
 );
 IconButton.displayName = "IconButton";
+function areArraysEquals(left, right, order = "any") {
+  if (left === right) {
+    return true;
+  }
+  if (left == null || right == null) {
+    return false;
+  }
+  if (left.length !== right.length) {
+    return false;
+  }
+  const leftArray = order === "any" ? [...left].sort() : left;
+  const rightArray = order === "any" ? [...right].sort() : right;
+  for (let i = 0; i < leftArray.length; i += 1) {
+    if (leftArray[i] !== rightArray[i]) {
+      return false;
+    }
+  }
+  return true;
+}
 const EMPTY_SELECTION$1 = [];
+const updateArrayIfChanged = (next) => (prev) => areArraysEquals(prev, next) ? prev : next;
 const ComboboxRoot = ({
   children,
   open: controlledOpen,
@@ -3878,25 +3909,35 @@ const ComboboxRoot = ({
   const baseId = usePrefixedId();
   const [open, setOpenInternal] = useControlledState(controlledOpen, defaultOpen, onOpenChange);
   const [inputValue, setInputValueInternal] = useControlledState(value, defaultValue, onChange);
+  const isMultipleSelection = selectionMode !== "single";
+  const stagingEnabled = selectionMode === "staged";
   const [uncontrolledSelection, setUncontrolledSelection] = useState(() => new Set(defaultSelection));
   const isSelectionControlled = controlledSelection !== void 0;
-  const selectionSet = useMemo(
+  const appliedSelectionSet = useMemo(
     () => isSelectionControlled ? new Set(controlledSelection) : uncontrolledSelection,
     [isSelectionControlled, controlledSelection, uncontrolledSelection]
   );
-  const onSelectionChangeInner = useCallback(
-    (newSelection) => {
-      const newSet = new Set(newSelection);
-      if (!isSelectionControlled) {
-        setUncontrolledSelection(newSet);
-      }
-      onSelectionChange?.(newSelection);
-      if (selectionMode === "single") {
-        setOpenInternal(false);
-      }
-    },
-    [isSelectionControlled, selectionMode, setOpenInternal, onSelectionChange]
+  const appliedSelection = useMemo(() => Array.from(appliedSelectionSet), [appliedSelectionSet]);
+  const [stagedSelection, setStagedSelection] = useState(appliedSelection);
+  useEffect(() => {
+    if (!stagingEnabled) {
+      setStagedSelection(appliedSelection);
+      return;
+    }
+    setStagedSelection(updateArrayIfChanged(appliedSelection));
+  }, [appliedSelection, stagingEnabled]);
+  const currentSelection = stagingEnabled ? stagedSelection : appliedSelection;
+  const currentSelectionSet = useMemo(() => new Set(currentSelection), [currentSelection]);
+  const hasStagedChanges = useMemo(
+    () => stagingEnabled && !areArraysEquals(stagedSelection, appliedSelection),
+    [stagingEnabled, stagedSelection, appliedSelection]
   );
+  const resetStagedSelection = useCallback(() => {
+    if (!stagingEnabled) {
+      return;
+    }
+    setStagedSelection(updateArrayIfChanged(appliedSelection));
+  }, [stagingEnabled, appliedSelection]);
   const [activeInternal, setActiveInternal] = useControlledState(controlledActive, defaultActive, setActive);
   const { registerItem, unregisterItem, getItems, isItemDisabled } = useItemRegistry();
   const setInputValue = useCallback(
@@ -3909,9 +3950,44 @@ const ComboboxRoot = ({
   const setOpen = useCallback(
     (next) => {
       setOpenInternal(next);
+      if (!next) {
+        resetStagedSelection();
+      }
     },
-    [setOpenInternal]
+    [setOpenInternal, resetStagedSelection]
   );
+  const commitSelection = useCallback(
+    (newSelection) => {
+      const newSet = new Set(newSelection);
+      if (!isSelectionControlled) {
+        setUncontrolledSelection(newSet);
+      }
+      onSelectionChange?.(newSelection);
+      if (selectionMode === "single") {
+        setOpenInternal(false);
+      }
+    },
+    [isSelectionControlled, onSelectionChange, selectionMode, setOpenInternal]
+  );
+  const handleSelectionChange = useCallback(
+    (nextSelection) => {
+      if (stagingEnabled) {
+        setStagedSelection(nextSelection);
+        return;
+      }
+      commitSelection(nextSelection);
+    },
+    [stagingEnabled, commitSelection]
+  );
+  const applyStagedSelection = useCallback(() => {
+    if (!stagingEnabled) {
+      return;
+    }
+    if (!areArraysEquals(stagedSelection, appliedSelection)) {
+      commitSelection(stagedSelection);
+    }
+    setOpenInternal(false);
+  }, [stagingEnabled, stagedSelection, appliedSelection, commitSelection, setOpenInternal]);
   const { handleKeyDown: handleNavKeyDown } = useKeyboardNavigation({
     getItems,
     isItemDisabled,
@@ -3920,8 +3996,15 @@ const ComboboxRoot = ({
     loop: false,
     orientation: "vertical",
     onSelect: (id) => {
-      const newSelection = selectionMode === "multiple" ? selectionSet.has(id) ? Array.from(selectionSet).filter((item) => item !== id) : [...Array.from(selectionSet), id] : [id];
-      onSelectionChangeInner(newSelection);
+      let nextSelection;
+      if (!isMultipleSelection) {
+        nextSelection = [id];
+      } else if (currentSelection.includes(id)) {
+        nextSelection = currentSelection.filter((item) => item !== id);
+      } else {
+        nextSelection = [...currentSelection, id];
+      }
+      handleSelectionChange(nextSelection);
     }
   });
   const keyHandler = useCallback(
@@ -3937,12 +4020,12 @@ const ComboboxRoot = ({
       }
       if (e.key === "Escape") {
         e.preventDefault();
-        setOpenInternal(false);
+        setOpen(false);
         return;
       }
       handleNavKeyDown(e);
     },
-    [disabled, open, setOpenInternal, handleNavKeyDown]
+    [disabled, open, setOpenInternal, setOpen, handleNavKeyDown]
   );
   useEffect(() => {
     if (open && activeInternal === void 0) {
@@ -3964,7 +4047,13 @@ const ComboboxRoot = ({
       error,
       closeOnBlur,
       keyHandler,
-      selection: selectionSet
+      selection: currentSelectionSet,
+      appliedSelection,
+      stagedSelection,
+      stagingEnabled,
+      hasStagedChanges,
+      applyStagedSelection,
+      resetStagedSelection
     }),
     [
       open,
@@ -3977,15 +4066,21 @@ const ComboboxRoot = ({
       baseId,
       disabled,
       error,
-      selectionSet
+      currentSelectionSet,
+      appliedSelection,
+      stagedSelection,
+      stagingEnabled,
+      hasStagedChanges,
+      applyStagedSelection,
+      resetStagedSelection
     ]
   );
   return /* @__PURE__ */ u(ComboboxProvider, { value: context, children: /* @__PURE__ */ u(
     Listbox.Root,
     {
-      selectionMode,
-      selection: Array.from(selectionSet),
-      onSelectionChange: onSelectionChangeInner,
+      selectionMode: isMultipleSelection ? "multiple" : "single",
+      selection: currentSelection,
+      onSelectionChange: handleSelectionChange,
       disabled,
       active: activeInternal,
       focusable: false,
@@ -4002,10 +4097,10 @@ const ComboboxRoot = ({
 };
 ComboboxRoot.displayName = "Combobox.Root";
 const ComboboxContent = forwardRef(
-  ({ className, children }, ref) => {
+  ({ className, children, ...props }, ref) => {
     const innerRef = useRef(null);
-    const { setOpen, baseId, closeOnBlur } = useCombobox();
-    const handleFocusOut = closeOnBlur ? useCallback(
+    const { setOpen, closeOnBlur } = useCombobox();
+    const handleOnBlur = closeOnBlur ? useCallback(
       (e) => {
         const nextTarget = e.relatedTarget;
         if (nextTarget && innerRef.current?.contains(nextTarget)) {
@@ -4013,18 +4108,18 @@ const ComboboxContent = forwardRef(
         }
         setOpen(false);
       },
-      [baseId, setOpen]
+      [setOpen]
     ) : void 0;
     return (
-      // eslint-disable-next-line react/no-unknown-property
-      /* @__PURE__ */ u("div", { onFocusOut: handleFocusOut, ref: useComposedRefs(ref, innerRef), className, children })
+      // eslint-disable-next-line jsx-a11y/no-static-element-interactions
+      /* @__PURE__ */ u("div", { ref: useComposedRefs(ref, innerRef), className, onBlur: handleOnBlur, ...props, children })
     );
   }
 );
 ComboboxContent.displayName = "Combobox.Content";
 const comboboxControlVariants = cva(
   [
-    "flex items-center",
+    "flex gap-2.5 items-center",
     "h-12 rounded-sm border bg-surface-neutral",
     "focus-within:outline-none focus-within:ring-3 focus-within:ring-ring/50 focus-within:ring-offset-0",
     "transition-highlight"
@@ -4051,7 +4146,7 @@ const comboboxControlVariants = cva(
     }
   }
 );
-const ComboboxControl = ({ children, className }) => {
+const ComboboxControl = ({ className, children, ...props }) => {
   const { open, disabled, error } = useCombobox();
   return /* @__PURE__ */ u(
     "div",
@@ -4065,31 +4160,27 @@ const ComboboxControl = ({ children, className }) => {
         className
       ),
       "data-open": open ? "true" : void 0,
+      ...props,
       children
     }
   );
 };
 ComboboxControl.displayName = "Combobox.Control";
 const ComboboxInput = forwardRef(
-  ({ className, placeholder, ...props }, ref) => {
+  ({ placeholder, ...props }, ref) => {
     const innerRef = useRef(null);
-    const { inputValue, setInputValue, open, keyHandler, selection, baseId, active, disabled, error } = useCombobox();
+    const { open, keyHandler, baseId, active, disabled, error } = useCombobox();
     useEffect(() => {
       if (open && !disabled) {
         innerRef.current?.focus();
       }
-    }, [open, selection, disabled]);
+    }, [open, disabled]);
     return /* @__PURE__ */ u(
-      SearchInput,
+      SearchField.Input,
       {
         ref: useComposedRefs(ref, innerRef),
         id: `${baseId}-input`,
-        className: "border-none focus:outline-none focus-within:outline-none h-auto focus-within:ring-0 grow",
-        value: inputValue,
-        onChange: setInputValue,
         onKeyDown: keyHandler,
-        placeholder,
-        disabled,
         "aria-disabled": disabled,
         "aria-invalid": error ?? void 0,
         role: "combobox",
@@ -4098,41 +4189,74 @@ const ComboboxInput = forwardRef(
         "aria-haspopup": "listbox",
         "aria-controls": `${baseId}-listbox`,
         "aria-activedescendant": active ? `${baseId}-listbox-option-${active}` : void 0,
-        showClearButton: false,
         ...props
       }
     );
   }
 );
 ComboboxInput.displayName = "Combobox.Input";
-const ComboboxToggle = ({ className }) => {
+const ComboboxSearch = ({ children, className, ...props }) => {
+  const { inputValue, setInputValue } = useCombobox();
+  return /* @__PURE__ */ u(
+    SearchField.Root,
+    {
+      value: inputValue,
+      onChange: setInputValue,
+      className: cn(
+        "w-full pr-0",
+        "border-0 focus-within:border-0 focus-within:ring-0 focus-within:ring-offset-0",
+        className
+      ),
+      ...props,
+      children
+    }
+  );
+};
+ComboboxSearch.displayName = "Combobox.Search";
+const ComboboxToggle = ({ className, ...props }) => {
   const { open, setOpen, disabled } = useCombobox();
   return /* @__PURE__ */ u(
     IconButton,
     {
       type: "button",
       variant: "text",
-      size: "md",
+      size: "lg",
       icon: ChevronDown,
       "aria-label": "Toggle",
       onClick: () => {
-        if (disabled) {
-          return;
-        }
-        setOpen(!open);
+        if (!disabled) setOpen(!open);
       },
       disabled,
       tabIndex: -1,
       className: cn(
-        "h-10 w-10 text-subtle transition-transform hover:bg-surface-primary-hover mr-1",
+        "shrink-0 text-subtle transition-transform hover:bg-surface-primary-hover",
         open && "rotate-180",
         className
-      )
+      ),
+      ...props
     }
   );
 };
 ComboboxToggle.displayName = "Combobox.Toggle";
-const ComboboxPopup = ({ children, className }) => {
+const ComboboxApply = ({ className, label = "Apply", ...props }) => {
+  const { stagingEnabled, hasStagedChanges, applyStagedSelection } = useCombobox();
+  if (!stagingEnabled || !hasStagedChanges) {
+    return null;
+  }
+  return /* @__PURE__ */ u(
+    Button,
+    {
+      className: cn("h-7 px-2.5 min-w-14 gap-2 text-xs", className),
+      type: "button",
+      label,
+      variant: "outline",
+      onClick: applyStagedSelection,
+      ...props
+    }
+  );
+};
+ComboboxApply.displayName = "Combobox.Apply";
+const ComboboxPopup = ({ children, className, ...props }) => {
   const { open } = useCombobox();
   if (!open) {
     return null;
@@ -4144,6 +4268,7 @@ const ComboboxPopup = ({ children, className }) => {
         "absolute left-0 right-0 z-50 mt-1 rounded-sm bg-surface-neutral shadow-lg ring-1 ring-bdr-subtle",
         className
       ),
+      ...props,
       children
     }
   );
@@ -4153,8 +4278,11 @@ const Combobox = Object.assign(ComboboxRoot, {
   Root: ComboboxRoot,
   Content: ComboboxContent,
   Control: ComboboxControl,
+  Search: ComboboxSearch,
   Input: ComboboxInput,
+  SearchIcon: SearchField.Icon,
   Toggle: ComboboxToggle,
+  Apply: ComboboxApply,
   Popup: ComboboxPopup
 });
 const DialogRoot = ({
@@ -4505,18 +4633,11 @@ const Input = forwardRef(
     const hasError = state === "error";
     return /* @__PURE__ */ u("div", { className: cn("w-full", disabled && "opacity-30", className), children: [
       (!!label || !!description) && /* @__PURE__ */ u("div", { className: "mb-2", children: [
-        label && /* @__PURE__ */ u(
-          "label",
-          {
-            htmlFor: inputId,
-            className: cn("block text-base font-semibold text-main", disabled && "opacity-30"),
-            children: /* @__PURE__ */ u("div", { className: "flex items-center gap-2", children: [
-              readOnly && /* @__PURE__ */ u(LockKeyhole, { size: 16, strokeWidth: 2.5 }),
-              label
-            ] })
-          }
-        ),
-        description && /* @__PURE__ */ u("div", { className: cn("text-sm text-subtle", disabled && "opacity-30"), children: description })
+        label && /* @__PURE__ */ u("label", { htmlFor: inputId, className: "block text-base font-semibold text-main", children: /* @__PURE__ */ u("div", { className: "flex items-center gap-2", children: [
+          readOnly && /* @__PURE__ */ u(LockKeyhole, { size: 16, strokeWidth: 2.5 }),
+          label
+        ] }) }),
+        description && /* @__PURE__ */ u("div", { className: "text-sm text-subtle", children: description })
       ] }),
       /* @__PURE__ */ u("div", { className: cn(inputContainerVariants({ state, disabled })), children: [
         startAddon && /* @__PURE__ */ u(Addon, { error: hasError, children: startAddon }),
@@ -4529,7 +4650,7 @@ const Input = forwardRef(
               "flex-1 w-full px-4.5 text-base",
               "text-main bg-surface-neutral placeholder:text-subtle",
               "border-0 focus:outline-none",
-              "disabled:select-none read-only:bg-surface-primary",
+              "disabled:select-none enabled:read-only:bg-surface-primary",
               startAddon && "rounded-l-none",
               endAddon && "rounded-r-none"
             ),
@@ -4817,7 +4938,7 @@ const ListboxContent = forwardRef(
   }
 );
 ListboxContent.displayName = "ListboxContent";
-const listboxItemVariants = cva("flex w-full items-center px-4.5 py-1 gap-x-2.5 cursor-pointer", {
+const listboxItemVariants = cva("group flex w-full items-center px-4.5 py-1 gap-x-2.5 cursor-pointer", {
   variants: {
     selected: {
       true: "bg-surface-primary-selected text-alt hover:bg-surface-primary-selected-hover",
@@ -4874,6 +4995,7 @@ const ListboxItem = ({ value, disabled = false, children, className, ...props })
         "aria-disabled": isDisabled ?? void 0,
         "data-value": value,
         "data-active": isActive || void 0,
+        "data-tone": isSelected && "inverse",
         onClick: handleClick,
         ...props,
         children
@@ -5243,95 +5365,126 @@ const Menu = Object.assign(MenuRoot, {
   Label: MenuLabel,
   Separator: MenuSeparator
 });
-const SearchInput = forwardRef(
-  ({
-    id,
-    value,
-    defaultValue = "",
-    placeholder = "Search",
-    clearLabel = "Clear",
-    onChange,
-    disabled,
-    readOnly,
-    showSearchIcon = true,
-    showClearButton = true,
-    className,
-    ...props
-  }, ref) => {
-    const inputId = usePrefixedId(unwrap(id));
-    const inputRef = useRef(null);
-    const [inputValue, setInputValue] = useControlledState(value, defaultValue, onChange);
-    const isValueSet = inputValue.length > 0;
-    const canClear = showClearButton && isValueSet && !disabled && !readOnly;
+const SearchFieldRoot = ({
+  id,
+  value,
+  defaultValue = "",
+  onChange,
+  placeholder = "Search",
+  clearLabel = "Clear",
+  disabled,
+  readOnly,
+  children,
+  className,
+  ...props
+}) => {
+  const inputId = usePrefixedId(unwrap(id));
+  const inputRef = useRef(null);
+  const [inputValue, setInputValue] = useControlledState(value, defaultValue, onChange);
+  const context = useMemo(
+    () => ({
+      id: inputId,
+      value: inputValue,
+      disabled,
+      readOnly,
+      placeholder,
+      clearLabel,
+      setValue: setInputValue,
+      inputRef
+    }),
+    [inputId, inputValue, disabled, readOnly, placeholder, clearLabel, setInputValue]
+  );
+  return /* @__PURE__ */ u(SearchFieldProvider, { value: context, children: /* @__PURE__ */ u(
+    "div",
+    {
+      className: cn(
+        "relative flex gap-2.5 items-center rounded-sm overflow-hidden",
+        "h-11.5 px-4.5 py-3",
+        "border border-bdr-subtle focus-within:border-bdr-strong",
+        "focus-within:outline-none focus-within:ring-3 focus-within:ring-ring/50 focus-within:ring-offset-0",
+        "transition-highlight",
+        readOnly ? "bg-surface-primary" : "bg-surface-neutral",
+        disabled && "pointer-events-none select-none opacity-30",
+        className
+      ),
+      ...props,
+      children
+    }
+  ) });
+};
+SearchFieldRoot.displayName = "SearchFieldRoot";
+const SearchFieldIcon = ({ className }) => {
+  return /* @__PURE__ */ u(
+    Search,
+    {
+      className: cn("flex items-center justify-center shrink-0 size-5.5 text-subtle", className),
+      strokeWidth: 1.5
+    }
+  );
+};
+SearchFieldIcon.displayName = "SearchFieldIcon";
+const SearchFieldInput = forwardRef(
+  ({ className, ...props }, ref) => {
+    const { id, value, disabled, readOnly, placeholder, setValue, inputRef } = useSearchField();
     const handleChange = (e) => {
-      const newValue = e.currentTarget.value;
-      setInputValue(newValue);
-    };
-    const handleClear = () => {
-      setInputValue("");
-      inputRef.current?.focus();
+      setValue(e.currentTarget.value);
     };
     return /* @__PURE__ */ u(
-      "div",
+      "input",
       {
+        ref: useComposedRefs(ref, inputRef),
+        id,
         className: cn(
-          "relative flex items-center rounded-sm overflow-hidden",
-          "h-12 border border-bdr-subtle focus-within:border-bdr-strong",
-          "focus-within:outline-none focus-within:ring-3 focus-within:ring-ring/50 focus-within:ring-offset-0",
-          "transition-highlight",
-          disabled && "pointer-events-none select-none opacity-30",
+          "h-5.5 w-full text-base border-0",
+          "text-main bg-surface-neutral",
+          "placeholder:text-subtle",
+          "focus:outline-none",
+          "enabled:read-only:bg-surface-primary",
           className
         ),
-        children: [
-          showSearchIcon && /* @__PURE__ */ u(
-            Search,
-            {
-              className: "flex items-center justify-center shrink-0 w-10 text-subtle pointer-events-none",
-              size: 20,
-              strokeWidth: 1.5
-            }
-          ),
-          /* @__PURE__ */ u(
-            "input",
-            {
-              ref: useComposedRefs(ref, inputRef),
-              id: inputId,
-              className: cn(
-                "w-full text-base border-0",
-                "text-main bg-surface-neutral",
-                "placeholder:text-subtle",
-                "focus:outline-none focus:ring-0",
-                "read-only:bg-surface-primary",
-                !showSearchIcon && "pl-4.5",
-                "pr-4"
-              ),
-              value: inputValue,
-              onChange: handleChange,
-              readOnly,
-              disabled,
-              placeholder,
-              "aria-label": "Search",
-              "aria-disabled": disabled,
-              ...props
-            }
-          ),
-          canClear && /* @__PURE__ */ u(
-            IconButton,
-            {
-              className: "flex items-center justify-center shrink-0 h-10 w-10 mr-1 text-subtle",
-              size: "lg",
-              icon: X,
-              title: clearLabel,
-              onClick: handleClear,
-              disabled
-            }
-          )
-        ]
+        value,
+        onChange: handleChange,
+        readOnly,
+        disabled,
+        placeholder,
+        "aria-label": "Search",
+        "aria-disabled": disabled,
+        ...props
       }
     );
   }
 );
-SearchInput.displayName = "SearchInput";
+SearchFieldInput.displayName = "SearchFieldInput";
+const SearchFieldClear = ({ className, ...props }) => {
+  const { value, disabled, readOnly, clearLabel, setValue, inputRef } = useSearchField();
+  if (!value || disabled || readOnly) {
+    return null;
+  }
+  const handleClear = () => {
+    setValue("");
+    inputRef.current?.focus();
+  };
+  return /* @__PURE__ */ u(
+    IconButton,
+    {
+      className: cn("flex items-center justify-center shrink-0 size-7 -mx-1.5 text-subtle", className),
+      icon: X,
+      title: clearLabel,
+      onClick: handleClear,
+      disabled,
+      iconSize: 28,
+      iconStrokeWidth: 1.25,
+      ...props
+    }
+  );
+};
+SearchFieldClear.displayName = "SearchFieldClear";
+const SearchField = Object.assign(SearchFieldRoot, {
+  Root: SearchFieldRoot,
+  Icon: SearchFieldIcon,
+  Input: SearchFieldInput,
+  Clear: SearchFieldClear
+});
 const SelectableListItem = ({
   className,
   selected,
@@ -5624,7 +5777,8 @@ export {
   ListboxProvider,
   Menu,
   MenuProvider,
-  SearchInput,
+  SearchField,
+  SearchFieldProvider,
   SelectableListItem,
   Separator,
   Tooltip,
@@ -5645,5 +5799,6 @@ export {
   useListbox,
   useMenu,
   usePrefixedId,
-  useScrollLock
+  useScrollLock,
+  useSearchField
 };