cetec-design-system 3.4.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;
         }
@@ -23193,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;
@@ -23252,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]);
@@ -23285,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);
     }
@@ -23376,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")) {
@@ -23505,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,
                 {
@@ -23522,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({