cetec-design-system 3.3.0-0 → 3.5.0-0

package/dist/index.js

@@ -9183,7 +9183,7 @@ function useListNavigation(context2, props) {
         const isCrossCloseKey = isCrossOrientationCloseKey(event.key, orientation, rtl, cols);
         const isParentCrossOpenKey = isCrossOrientationOpenKey(event.key, getParentOrientation(), rtl);
         const isMainKey = isMainOrientationKey(event.key, orientation);
-        const isNavigationKey = (nested ? isParentCrossOpenKey : isMainKey) || event.key === "Enter" || event.key.trim() === "";
+        const isNavigationKey2 = (nested ? isParentCrossOpenKey : isMainKey) || event.key === "Enter" || event.key.trim() === "";
         if (virtual && open) {
           const rootNode = tree == null ? void 0 : tree.nodesRef.current.find((node) => node.parentId == null);
           const deepestNode = tree && rootNode ? getDeepestNode(tree.nodesRef.current, rootNode.id) : null;
@@ -9216,7 +9216,7 @@ function useListNavigation(context2, props) {
         if (!open && !openOnArrowKeyDown && isArrowKey) {
           return;
         }
-        if (isNavigationKey) {
+        if (isNavigationKey2) {
           const isParentMainKey = isMainOrientationKey(event.key, getParentOrientation());
           keyRef.current = nested && isParentMainKey ? null : event.key;
         }
@@ -14948,6 +14948,21 @@ const createOverlayMiddleware = (options = {}) => {
     ...extras
   ];
 };
+const availableHeightMiddleware = (options = {}) => {
+  const { matchReferenceWidth = false, padding = 8 } = options;
+  return size({
+    padding,
+    apply({ rects, elements, availableHeight }) {
+      if (matchReferenceWidth) {
+        elements.floating.style.minWidth = `${rects.reference.width}px`;
+      }
+      elements.floating.style.setProperty(
+        "--available-height",
+        `${Math.max(availableHeight, 0)}px`
+      );
+    }
+  });
+};
 const useOverlayFloating = (options) => {
   const {
     open,
@@ -15003,13 +15018,15 @@ const Tooltip = (props) => {
     placement = "bottom",
     offset: offset2 = 8,
     delay,
+    disabled = false,
     ...rest
   } = props;
   const [className, otherProps] = splitProps(rest);
   const [isOpen, setIsOpen] = useState(false);
+  if (disabled && isOpen) setIsOpen(false);
   const arrowRef = useRef(null);
   const { refs, elements, floatingStyles, context: context2 } = useOverlayFloating({
-    open: isOpen,
+    open: isOpen && !disabled,
     onOpenChange: setIsOpen,
     placement,
     middleware: createOverlayMiddleware({
@@ -15017,10 +15034,10 @@ const Tooltip = (props) => {
       extras: [arrow({ element: arrowRef })]
     })
   });
-  const hover = useHover(context2, { move: false, delay });
-  const focus = useFocus(context2);
-  const dismiss = useDismiss(context2);
-  const role = useRole(context2, { role: "tooltip" });
+  const hover = useHover(context2, { move: false, delay, enabled: !disabled });
+  const focus = useFocus(context2, { enabled: !disabled });
+  const dismiss = useDismiss(context2, { enabled: !disabled });
+  const role = useRole(context2, { role: "tooltip", enabled: !disabled });
   const { getReferenceProps, getFloatingProps } = useInteractions([
     hover,
     focus,
@@ -15042,7 +15059,7 @@ const Tooltip = (props) => {
         children
       }
     ),
-    isOpen && /* @__PURE__ */ jsx(FloatingPortal, { children: /* @__PURE__ */ jsx(DsChainPortalRoot, { reference: elements.domReference, children: /* @__PURE__ */ jsxs(
+    isOpen && !disabled && /* @__PURE__ */ jsx(FloatingPortal, { children: /* @__PURE__ */ jsx(DsChainPortalRoot, { reference: elements.domReference, children: /* @__PURE__ */ jsxs(
       Box,
       {
         ...dsComponent("Tooltip"),
@@ -16555,6 +16572,7 @@ const ChipGroupContext = createContext(
 const useChipGroup = () => {
   return useContext(ChipGroupContext);
 };
+const MAX_VISIBLE_ITEMS = 2;
 const Chip = (props) => {
   const groupContext = useChipGroup();
   const fieldContext = useFieldContext();
@@ -16562,6 +16580,7 @@ const Chip = (props) => {
   const {
     size: sizeProp,
     children,
+    items,
     before,
     after,
     loading,
@@ -16591,19 +16610,20 @@ const Chip = (props) => {
   const isDisabled = disabled || loading;
   const isSelectable = value !== void 0 && groupContext !== null;
   const hasPrimaryAction = Boolean(onClick) || isSelectable;
+  const isEmpty = (items == null ? void 0 : items.length) === 0;
   const isMultiSelected = isSelectable && value !== void 0 && groupContext !== null && groupContext.type === "multi" && Array.isArray(groupContext.value) && groupContext.value.includes(value);
   const isSelected = isSelectable && groupContext !== null ? groupContext.type === "single" ? groupContext.value === value : isMultiSelected : false;
   const hasBefore = Boolean(before) || isMultiSelected;
   const hasAfter = Boolean(after) || dismissable;
   useEffect(() => {
-    if (!isSelectable || isDisabled || !registerChip || !unregisterChip || value === void 0) {
+    if (!isSelectable || isDisabled || isEmpty || !registerChip || !unregisterChip || value === void 0) {
       return;
     }
     registerChip(value, buttonRef);
     return () => {
       unregisterChip(value);
     };
-  }, [isDisabled, isSelectable, registerChip, unregisterChip, value]);
+  }, [isDisabled, isEmpty, isSelectable, registerChip, unregisterChip, value]);
   const classes = chip({
     size: size2,
     before: hasBefore,
@@ -16674,7 +16694,9 @@ const Chip = (props) => {
     }
     return 0;
   };
-  const resolvedDismissLabel = dismissLabel || `Remove ${children}`;
+  const isOverflowing = items !== void 0 && items.length > MAX_VISIBLE_ITEMS;
+  const label2 = items ? isOverflowing ? `${items.slice(0, MAX_VISIBLE_ITEMS).join(", ")} +${items.length - MAX_VISIBLE_ITEMS}` : items.join(", ") : children;
+  const resolvedDismissLabel = dismissLabel || `Remove ${items ? items.join(", ") : children}`;
   const handleDismissClick = (e) => {
     e.stopPropagation();
     onDismiss == null ? void 0 : onDismiss();
@@ -16704,7 +16726,10 @@ const Chip = (props) => {
   const bodyContent = /* @__PURE__ */ jsxs(Fragment, { children: [
     isMultiSelected && /* @__PURE__ */ jsx(Box, { as: "span", className: classes.slot, children: /* @__PURE__ */ jsx(Icon, { name: "check", fill: "icon.inverse", "aria-hidden": true }) }),
     renderSlot(before, "before"),
-    /* @__PURE__ */ jsx(Box, { as: "span", className: classes.mainContent, children }),
+    /* @__PURE__ */ jsx(Box, { as: "span", className: classes.mainContent, children: items ? /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx("span", { "aria-hidden": isOverflowing || void 0, children: label2 }),
+      isOverflowing && /* @__PURE__ */ jsx(Box, { as: "span", srOnly: true, children: items.join(", ") })
+    ] }) : label2 }),
     renderSlot(after, "after")
   ] });
   const body = hasPrimaryAction ? /* @__PURE__ */ jsx(
@@ -16734,6 +16759,7 @@ const Chip = (props) => {
     {
       as: "span",
       className: classes.body,
+      tabIndex: isOverflowing && !isDisabled ? 0 : void 0,
       "data-deleted": deleted ? true : void 0,
       "data-disabled": isDisabled || void 0,
       "data-error": error2 || void 0,
@@ -16742,6 +16768,9 @@ const Chip = (props) => {
       children: bodyContent
     }
   );
+  if (isEmpty) {
+    return null;
+  }
   return /* @__PURE__ */ jsxs(
     Box,
     {
@@ -16757,7 +16786,7 @@ const Chip = (props) => {
       "aria-invalid": invalid || void 0,
       ...otherProps,
       children: [
-        body,
+        items ? /* @__PURE__ */ jsx(Tooltip, { text: items.join(", "), disabled: !isOverflowing || loading, children: body }) : body,
         dismissable && dismissButton,
         loading && /* @__PURE__ */ jsx(Spinner, { size: "sm", centered: true })
       ]
@@ -18455,9 +18484,14 @@ const Menu = (props) => {
   } = props;
   const [className, otherProps] = splitProps(rest);
   const userStyle = otherProps.style;
-  const classes = menu({ density, panel, layer: floatingLayer });
-  const listClassName = list({ density });
   const hasReference = Boolean(trigger) && !inline;
+  const classes = menu({
+    density,
+    panel,
+    layer: floatingLayer,
+    scrollable: hasReference && !panel
+  });
+  const listClassName = list({ density });
   const [uncontrolledOpen, setUncontrolledOpen] = useState(
     defaultOpen ?? false
   );
@@ -18493,7 +18527,7 @@ const Menu = (props) => {
     placement,
     strategy,
     middleware: createOverlayMiddleware({
-      extras: [size()]
+      extras: [availableHeightMiddleware()]
     })
   });
   const listRef = useRef([]);
@@ -18600,6 +18634,25 @@ const Menu = (props) => {
   const shouldUsePanelDiginProbeFill = Boolean(panel) && subMenuInteraction === "digin";
   const shouldUseDiginSizing = subMenuInteraction === "digin" && hasVisibleResults;
   const sizeProbeRef = useRef(null);
+  const activeLevelRef = useRef(null);
+  const activeBackHeaderRef = useRef(null);
+  useLayoutEffect(() => {
+    const levelEl = activeLevelRef.current;
+    const headerEl = activeBackHeaderRef.current;
+    if (!levelEl) return;
+    if (!headerEl) {
+      levelEl.style.removeProperty("--menu-back-header-height");
+      return;
+    }
+    const update = () => levelEl.style.setProperty(
+      "--menu-back-header-height",
+      `${headerEl.offsetHeight}px`
+    );
+    update();
+    const observer = new ResizeObserver(update);
+    observer.observe(headerEl);
+    return () => observer.disconnect();
+  }, [diginDepth, density, hasVisibleResults]);
   useLayoutEffect(() => {
     if (!isMenuVisible || !shouldUseDiginSizing) {
       setWrapperSize({ width: null, height: null });
@@ -18737,6 +18790,7 @@ const Menu = (props) => {
                     children: /* @__PURE__ */ jsx(FloatingList, { elementsRef: listRef, labelsRef, children: /* @__PURE__ */ jsxs(
                       Box,
                       {
+                        ref: activeLevelRef,
                         className: classes.level,
                         style: {
                           flex: `0 0 ${levelWidthPercent}%`
@@ -18747,6 +18801,7 @@ const Menu = (props) => {
                             {
                               as: "button",
                               type: "button",
+                              ref: activeBackHeaderRef,
                               className: classes.backHeader,
                               onClick: rootContextValue.onPopDiginLevel,
                               children: [
@@ -19255,7 +19310,8 @@ const SubMenu = (props) => {
   const resolvedDensity = typeof density === "string" ? density : rootContext.density;
   const classes = menu({
     density: resolvedDensity,
-    layer: floatingLayer
+    layer: floatingLayer,
+    scrollable: true
   });
   const listClassName = list({ density: resolvedDensity });
   const itemClassName = listItem({
@@ -19303,7 +19359,8 @@ const SubMenu = (props) => {
     middleware: [
       offset({ mainAxis: 0, alignmentAxis: -4 }),
       flip(),
-      shift({ padding: 8 })
+      shift({ padding: 8 }),
+      availableHeightMiddleware()
     ]
   });
   const hover = useHover(floating.context, {
@@ -23136,6 +23193,8 @@ const isSelectOptionElement = (child) => {
 const getOptionText = (option) => {
   return option.props.label;
 };
+const NAVIGATION_KEYS = /* @__PURE__ */ new Set(["ArrowUp", "ArrowDown", "Home", "End"]);
+const isNavigationKey = (event) => NAVIGATION_KEYS.has(event.key) || event.key.length === 1 && !event.ctrlKey && !event.metaKey && !event.altKey;
 const getSelectedDisplay = (options, value, multiple, placeholder) => {
   if (value === null || value === void 0 || value === "") {
     return placeholder;
@@ -23180,7 +23239,7 @@ const Select = (props) => {
     name,
     disabled = false,
     error: error2 = false,
-    size: size$12 = "md",
+    size: size2 = "md",
     density = defaultDensity,
     autoSize = false,
     "data-ds-component": dsComponentName,
@@ -23195,9 +23254,12 @@ const Select = (props) => {
   const [internalOpen, setInternalOpen] = useState(defaultOpen);
   const [internalValue, setInternalValue] = useState(defaultValue);
   const [activeIndex, setActiveIndex] = useState(null);
+  const [hasNavigated, setHasNavigated] = useState(false);
+  const [openedByKeyboard, setOpenedByKeyboard] = useState(false);
   const isOpenControlled = controlledOpen !== void 0;
   const isOpen = isOpenControlled ? controlledOpen : internalOpen;
   const value = controlledValue !== void 0 ? controlledValue : internalValue;
+  const [prevIsOpen, setPrevIsOpen] = useState(isOpen);
   const options = useMemo(() => {
     return Children.toArray(children).filter(isSelectOptionElement);
   }, [children]);
@@ -23228,10 +23290,15 @@ const Select = (props) => {
     );
   }, [options]);
   const initialActiveIndex = selectedIndex >= 0 ? selectedIndex : firstEnabledIndex >= 0 ? firstEnabledIndex : null;
-  const resolvedActiveIndex = isOpen ? activeIndex ?? initialActiveIndex : null;
+  if (isOpen !== prevIsOpen) {
+    setPrevIsOpen(isOpen);
+    setActiveIndex(isOpen ? initialActiveIndex : null);
+    setHasNavigated(isOpen && openedByKeyboard);
+    setOpenedByKeyboard(false);
+  }
+  const resolvedActiveIndex = isOpen ? activeIndex ?? (hasNavigated ? null : initialActiveIndex) : null;
   const activeOptionId = resolvedActiveIndex !== null ? `${triggerId}-option-${resolvedActiveIndex}` : void 0;
   const setOpenState = (nextOpen) => {
-    setActiveIndex(nextOpen ? initialActiveIndex : null);
     if (!isOpenControlled) {
       setInternalOpen(nextOpen);
     }
@@ -23259,19 +23326,8 @@ const Select = (props) => {
       extras: [
         // Floating UI only positions the listbox; without a height cap a long
         // option list overflows the viewport on whichever side flip() picks.
-        // Only measured values are written here; the `menu` recipe's
-        // `scrollable` variant applies the cap and scrolling. `padding`
-        // mirrors the overlay middleware's default `shiftPadding`.
-        size({
-          padding: 8,
-          apply({ rects, elements, availableHeight }) {
-            elements.floating.style.minWidth = `${rects.reference.width}px`;
-            elements.floating.style.setProperty(
-              "--available-height",
-              `${Math.max(availableHeight, 0)}px`
-            );
-          }
-        })
+        // The `menu` recipe's `scrollable` variant applies the cap.
+        availableHeightMiddleware({ matchReferenceWidth: true })
       ]
     })
   });
@@ -23315,14 +23371,14 @@ const Select = (props) => {
     placeholder
   );
   const selectedOptions = getSelectedOptions(options, value, multiple);
-  const classes = select({ size: size$12, multiple, autoSize });
+  const classes = select({ size: size2, multiple, autoSize });
   const menuClasses = menu({
     density,
     layer: floatingLayer,
     scrollable: true
   });
   const hasValue = value !== null && value !== void 0 && value !== "";
-  const chipSize = resolveChipSize(size$12);
+  const chipSize = resolveChipSize(size2);
   const accessibleName = typeof displayValue === "string" && displayValue.length > 0 ? displayValue : placeholder;
   const handleTriggerKeyDown = (event) => {
     if (disabled) {
@@ -23330,6 +23386,7 @@ const Select = (props) => {
     }
     if (!isOpen && (event.key === "ArrowDown" || event.key === "ArrowUp" || event.key === "Enter" || event.key === " ")) {
       event.preventDefault();
+      setOpenedByKeyboard(true);
       setOpenState(true);
     }
     if (!multiple && hasValue && (event.key === "Backspace" || event.key === "Delete")) {
@@ -23459,10 +23516,26 @@ const Select = (props) => {
             density,
             className: menuClasses.wrapper,
             style: floating.floatingStyles,
-            ...getFloatingProps(),
+            ...getFloatingProps({
+              // floating-ui also reports `onNavigate` while opening, so
+              // only real input on the list counts as the user pointing
+              // at a row. Option events bubble here, and the listbox
+              // itself holds focus after the pointer leaves the options.
+              onKeyDown: (event) => {
+                if (isNavigationKey(event)) {
+                  setHasNavigated(true);
+                }
+              },
+              onPointerMove: (event) => {
+                if (event.pointerType !== "touch") {
+                  setHasNavigated(true);
+                }
+              }
+            }),
             children: options.map((option, index2) => {
               const optionLabel = getOptionText(option);
               const isSelected = multiple ? selectedValueSet.has(option.props.value) : value === option.props.value;
+              const isPointed = !option.props.disabled && hasNavigated && activeIndex === index2;
               return /* @__PURE__ */ jsx(
                 ListItem,
                 {
@@ -23476,7 +23549,7 @@ const Select = (props) => {
                   variant: multiple ? "checkbox" : "default",
                   label: optionLabel,
                   description: option.props.description,
-                  iconBefore: !multiple ? option.props.iconLeft ?? "check" : option.props.iconLeft,
+                  iconBefore: !multiple ? isSelected && isPointed ? "x" : option.props.iconLeft ?? "check" : option.props.iconLeft,
                   iconBeforeFill: !multiple ? isSelected ? "icon" : option.props.iconLeft ? void 0 : "transparent" : void 0,
                   iconAfter: option.props.iconRight,
                   ...getItemProps({