@snack-uikit/list 0.11.0 → 0.11.1

package/dist/components/Items/NextListItem/NextListItem.js

@@ -10,58 +10,68 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import { jsx as _jsx } from "react/jsx-runtime";
-import { useCallback, useMemo, useRef, useState } from 'react';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { Dropdown } from '@snack-uikit/dropdown';
 import { ChevronRightSVG } from '@snack-uikit/icons';
-import { withCollapsedItems } from '../../../utils';
-import { ParentListContext, useParentListContext } from '../../Lists/contexts';
+import { useCollapseContext, useFocusListContext, useNewListContext, useSelectionContext } from '../../Lists/contexts';
 import { ListPrivate } from '../../Lists/ListPrivate';
 import { BaseItem } from '../BaseItem';
 import { useGroupItemSelection } from '../hooks';
-import { useKeyboardNavigation } from './hooks';
-const FALLBACK_PLACEMENTS = [
-    'right',
-    'right-start',
-    'right-end',
-    'left',
-    'left-start',
-    'left-end',
-];
+import { extractActiveItems, isNextListItem } from '../utils';
+import { FALLBACK_PLACEMENTS } from './constants';
 export function NextListItem(_a) {
-    var { items: itemsProp, placement = 'right-start', id, search, scroll, scrollRef, disabled, onSublistOpenChanged, loading = false } = _a, option = __rest(_a, ["items", "placement", "id", "search", "scroll", "scrollRef", "disabled", "onSublistOpenChanged", "loading"]);
-    const listRef = useRef(null);
-    const [openCollapsedItems, setOpenCollapsedItems] = useState([]);
-    const { items, itemRefs, ids, expandedIds } = useMemo(() => withCollapsedItems({
-        items: itemsProp,
-        openCollapsedItems,
-    }), [itemsProp, openCollapsedItems]);
-    const { parentOpenNestedIndex, parentIds, triggerRef, parentResetNestedIndex, parentResetActiveFocusIndex } = useParentListContext();
-    const { open, setOpen, handleListKeyDown, activeFocusIndex, openNestedIndex, resetNestedIndex, resetActiveFocusIndex, } = useKeyboardNavigation({ ids, expandedIds, itemRefs, id });
-    const { isIndeterminate, checked, handleOnSelect } = useGroupItemSelection({ items: itemsProp, id, disabled });
-    const handleOpenChange = useCallback((open) => {
-        if (!open) {
-            resetActiveFocusIndex();
-            resetNestedIndex();
-            setOpenCollapsedItems([]);
+    var { items, placement = 'right-start', id, scroll, scrollRef, disabled, onSublistOpenChanged, allChildIds, loading = false, focusId = id } = _a, option = __rest(_a, ["items", "placement", "id", "scroll", "scrollRef", "disabled", "onSublistOpenChanged", "allChildIds", "loading", "focusId"]);
+    const { flattenItems, focusFlattenItems } = useNewListContext();
+    const { isSelectionMultiple } = useSelectionContext();
+    const { openCollapseItems = [] } = useCollapseContext();
+    const item = flattenItems[id];
+    const { ids, expandedIds } = useMemo(() => {
+        const { ids, expandedIds } = extractActiveItems({
+            focusCloseChildIds: items,
+            focusFlattenItems,
+            openCollapseItems,
+            isSelectionMultiple,
+        });
+        return { ids, expandedIds: expandedIds.concat([id]) };
+    }, [focusFlattenItems, id, isSelectionMultiple, items, openCollapseItems]);
+    const { handleListKeyDownFactory, activeItemId, forceUpdateActiveItemId } = useFocusListContext();
+    const [open, setOpen] = useState();
+    const handleListKeyDown = useCallback((e) => {
+        handleListKeyDownFactory(ids, expandedIds)(e);
+        if (e.key === 'ArrowLeft') {
+            forceUpdateActiveItemId === null || forceUpdateActiveItemId === void 0 ? void 0 : forceUpdateActiveItemId(focusId);
+            setOpen(false);
+            e.stopPropagation();
+            return;
         }
-        onSublistOpenChanged === null || onSublistOpenChanged === void 0 ? void 0 : onSublistOpenChanged(open, id);
-        setOpen(open);
-    }, [id, onSublistOpenChanged, resetActiveFocusIndex, resetNestedIndex, setOpen]);
+    }, [handleListKeyDownFactory, ids, expandedIds, forceUpdateActiveItemId, focusId]);
+    const { indeterminate, checked, handleOnSelect } = useGroupItemSelection({
+        items: isNextListItem(item) ? item.items : [],
+        id,
+        disabled,
+        allChildIds,
+    });
     const handleOutsideClick = useCallback(() => {
-        parentResetNestedIndex === null || parentResetNestedIndex === void 0 ? void 0 : parentResetNestedIndex();
-        parentResetActiveFocusIndex === null || parentResetActiveFocusIndex === void 0 ? void 0 : parentResetActiveFocusIndex();
+        forceUpdateActiveItemId === null || forceUpdateActiveItemId === void 0 ? void 0 : forceUpdateActiveItemId('~drop-focus');
+        setOpen(false);
         return true;
-    }, [parentResetActiveFocusIndex, parentResetNestedIndex]);
-    return (_jsx(Dropdown, { outsideClick: handleOutsideClick, fallbackPlacements: FALLBACK_PLACEMENTS, content: _jsx(ParentListContext.Provider, { value: {
-                parentIds: ids,
-                parentActiveFocusIndex: activeFocusIndex,
-                parentExpandedIds: expandedIds,
-                parentItemRefs: itemRefs,
-                parentOpenNestedIndex: openNestedIndex,
-                triggerRef,
-                parentRef: listRef,
-                parentResetNestedIndex: resetNestedIndex,
-                parentResetActiveFocusIndex: resetActiveFocusIndex,
-                toggleOpenCollapsedItems: id => setOpenCollapsedItems(items => items.includes(id) ? items.filter(item => item !== id) : items.concat([id])),
-            }, children: _jsx(ListPrivate, { onKeyDown: handleListKeyDown, items: items, nested: true, search: search, scroll: scroll, scrollRef: scrollRef, limitedScrollHeight: true, loading: loading }) }), trigger: 'hover', open: (open || parentIds[parentOpenNestedIndex] === id) && !disabled, onOpenChange: handleOpenChange, placement: placement, widthStrategy: 'auto', children: _jsx(BaseItem, Object.assign({}, option, { disabled: disabled, open: open, expandIcon: _jsx(ChevronRightSVG, {}), id: id, isParentNode: true, indeterminate: isIndeterminate && !checked, onSelect: handleOnSelect })) }));
+    }, [forceUpdateActiveItemId]);
+    const isOpen = useMemo(() => Boolean(!disabled && activeItemId && focusFlattenItems[focusId].allChildIds.includes(activeItemId)), [activeItemId, disabled, focusFlattenItems, focusId]);
+    useEffect(() => {
+        setOpen(open => open && isOpen);
+    }, [id, isOpen]);
+    const listRef = useRef(null);
+    return (_jsx(Dropdown, { outsideClick: handleOutsideClick, fallbackPlacements: FALLBACK_PLACEMENTS, content: _jsx(ListPrivate, { onKeyDown: handleListKeyDown, items: items, nested: true, scroll: scroll, tabIndex: 0, ref: listRef, onFocus: e => {
+                e.stopPropagation();
+                forceUpdateActiveItemId === null || forceUpdateActiveItemId === void 0 ? void 0 : forceUpdateActiveItemId(ids[0]);
+            }, scrollRef: scrollRef, limitedScrollHeight: true, loading: loading }), trigger: 'hover', open: isOpen || open, onOpenChange: value => {
+            setOpen(value);
+            onSublistOpenChanged === null || onSublistOpenChanged === void 0 ? void 0 : onSublistOpenChanged(value, id);
+        }, placement: placement, widthStrategy: 'auto', children: _jsx(BaseItem, Object.assign({}, option, { disabled: disabled, open: open, expandIcon: _jsx(ChevronRightSVG, {}), id: id, isParentNode: true, indeterminate: indeterminate, checked: checked, onOpenNestedList: () => {
+                setOpen(true);
+                setTimeout(() => {
+                    var _a;
+                    (_a = listRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+                }, 0);
+            }, onSelect: handleOnSelect })) }));
 }

package/dist/components/Items/NextListItem/constants.d.ts

@@ -0,0 +1,2 @@
+import { DropdownProps } from '@snack-uikit/dropdown';
+export declare const FALLBACK_PLACEMENTS: DropdownProps['fallbackPlacements'];

package/dist/components/Items/NextListItem/constants.js

@@ -0,0 +1,10 @@
+export const FALLBACK_PLACEMENTS = [
+    'right',
+    'right-start',
+    'right-end',
+    'left',
+    'left-start',
+    'left-end',
+    'bottom',
+    'top',
+];

package/dist/components/Items/PinGroupItem/PinGroupItem.js

@@ -1,15 +1,19 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import cn from 'classnames';
+import { Divider } from '@snack-uikit/divider';
+import { useNewListContext } from '../../Lists/contexts';
 import styles from './styles.module.css';
 export function PinTopGroupItem({ children }) {
+    const { size = 's' } = useNewListContext();
     if (!children) {
         return null;
     }
-    return (_jsx("div", { className: cn(styles.pinTopItem), "data-test-id": 'list__pin-top-group-item', children: children }));
+    return (_jsxs("div", { className: cn(styles.pinTopItem), "data-size": size, "data-test-id": 'list__pin-top-group-item', children: [_jsx("div", { children: children }), _jsx(Divider, { weight: 'regular' })] }));
 }
 export function PinBottomGroupItem({ children }) {
+    const { size = 's' } = useNewListContext();
     if (!children) {
         return null;
     }
-    return (_jsx("div", { className: cn(styles.pinBottomItem), "data-test-id": 'list__pin-bottom-group-item', children: children }));
+    return (_jsxs("div", { className: cn(styles.pinBottomItem), "data-size": size, "data-test-id": 'list__pin-bottom-group-item', children: [_jsx(Divider, { weight: 'regular' }), _jsx("div", { children: children })] }));
 }

package/dist/components/Items/PinGroupItem/styles.module.css

@@ -1,13 +1,19 @@
 .pinTopItem{
-  padding-bottom:var(--radius-drop-list-container, 8px);
-  border-bottom:var(--border-width-droplist-pin-content, 1px);
   display:flex;
   flex-direction:column;
-  border-color:var(--sys-neutral-decor-default, #dfe2ec);
-  border-style:solid;
-  border-top:0;
-  border-right:0;
-  border-left:0;
+  border:none;
+}
+.pinTopItem[data-size=s]{
+  padding-bottom:var(--radius-drop-list-container, 8px);
+  gap:var(--radius-drop-list-container, 8px);
+}
+.pinTopItem[data-size=m]{
+  padding-bottom:var(--radius-drop-list-container, 8px);
+  gap:var(--radius-drop-list-container, 8px);
+}
+.pinTopItem[data-size=l]{
+  padding-bottom:var(--radius-drop-list-container, 8px);
+  gap:var(--radius-drop-list-container, 8px);
 }
 .pinTopItem li,
 .pinTopItem ul{
@@ -15,15 +21,21 @@
 }
 
 .pinBottomItem{
-  padding-top:var(--radius-drop-list-container, 8px);
-  border-top:var(--border-width-droplist-pin-content, 1px);
   display:flex;
   flex-direction:column;
-  border-color:var(--sys-neutral-decor-default, #dfe2ec);
-  border-style:solid;
-  border-right:0;
-  border-bottom:0;
-  border-left:0;
+  border:none;
+}
+.pinBottomItem[data-size=s]{
+  padding-top:var(--radius-drop-list-container, 8px);
+  gap:var(--radius-drop-list-container, 8px);
+}
+.pinBottomItem[data-size=m]{
+  padding-top:var(--radius-drop-list-container, 8px);
+  gap:var(--radius-drop-list-container, 8px);
+}
+.pinBottomItem[data-size=l]{
+  padding-top:var(--radius-drop-list-container, 8px);
+  gap:var(--radius-drop-list-container, 8px);
 }
 .pinBottomItem li,
 .pinBottomItem ul{

package/dist/components/Items/SearchItem/SearchItem.d.ts

@@ -1,5 +1,7 @@
+import { RefObject } from 'react';
 import { SearchState } from '../../../types';
 export type SearchItemProps = {
     search?: SearchState;
+    itemRef?: RefObject<HTMLElement>;
 };
-export declare function SearchItem({ search }: SearchItemProps): import("react/jsx-runtime").JSX.Element | null;
+export declare function SearchItem({ search, itemRef }: SearchItemProps): import("react/jsx-runtime").JSX.Element | null;

package/dist/components/Items/SearchItem/SearchItem.js

@@ -1,28 +1,25 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import cn from 'classnames';
 import { SearchPrivate } from '@snack-uikit/search-private';
-import { useListContext, useParentListContext } from '../../Lists/contexts';
+import { useNewListContext } from '../../Lists/contexts';
 import commonStyles from '../styles.module.css';
 import styles from './styles.module.css';
-export function SearchItem({ search }) {
-    const { parentItemRefs, parentSetActiveFocusIndex } = useParentListContext();
-    const { size } = useListContext();
+export function SearchItem({ search, itemRef }) {
+    const { size = 's' } = useNewListContext();
     const handleKeyDown = (e) => {
         if (['ArrowDown', 'ArrowUp'].includes(e.key)) {
             e.preventDefault();
         }
         if (['ArrowRight'].includes(e.key)) {
             e.stopPropagation();
+            e.preventDefault();
         }
     };
     const handleFocus = (e) => {
-        if (e.target === parentItemRefs[0].current) {
-            parentSetActiveFocusIndex === null || parentSetActiveFocusIndex === void 0 ? void 0 : parentSetActiveFocusIndex(0);
-        }
         e.stopPropagation();
     };
     if (!Boolean(search)) {
         return null;
     }
-    return (_jsx("div", { className: cn(commonStyles.listItem, styles.searchItem), "data-size": size, "data-test-id": 'list__search-item', children: _jsx(SearchPrivate, Object.assign({ size: size, tabIndex: -1, onKeyDown: handleKeyDown, onFocus: handleFocus }, search, { ref: parentItemRefs[0] })) }));
+    return (_jsx("div", { className: cn(commonStyles.listItem, styles.searchItem), "data-size": size, "data-test-id": 'list__search-item', children: _jsx(SearchPrivate, Object.assign({ size: size, tabIndex: -1, onKeyDown: handleKeyDown, onFocus: handleFocus }, search, { ref: itemRef })) }));
 }

package/dist/components/Items/hooks.d.ts

@@ -1,22 +1,23 @@
 import { RefObject } from 'react';
-import { ItemProps } from './types';
-export declare function useRenderItems(items: ItemProps[]): import("react/jsx-runtime").JSX.Element[];
-type UseItemsWithIdsProps = {
+import { Flatten, FlattenBaseItem, ItemId } from './types';
+export declare function useRenderItems(focusCloseChildIds?: ItemId[]): import("react/jsx-runtime").JSX.Element[] | null[];
+type UseCreateBaseItemsProps = {
     search?: boolean;
     footerActiveElementsRefs?: RefObject<HTMLElement>[];
 };
-export declare function useItemsWithIds({ search, footerActiveElementsRefs }: UseItemsWithIdsProps): {
-    search: ItemProps[];
-    footerRefs: ItemProps[];
+export declare function useCreateBaseItems({ footerActiveElementsRefs }: UseCreateBaseItemsProps): {
+    searchItem: Flatten<FlattenBaseItem, 'itemRef'>;
+    footerItems: Flatten<FlattenBaseItem, 'itemRef'>[];
 };
 type UseGroupItemSelectionProps = {
-    items: ItemProps[];
-    id?: string | number;
+    allChildIds: ItemId[];
+    items: ItemId[];
+    id: ItemId;
     disabled?: boolean;
 };
-export declare function useGroupItemSelection({ id, items, disabled }: UseGroupItemSelectionProps): {
+export declare function useGroupItemSelection({ id, allChildIds }: UseGroupItemSelectionProps): {
     checked: boolean | undefined;
-    isIndeterminate: boolean;
+    indeterminate: boolean;
     handleOnSelect: () => void;
 };
 export {};

package/dist/components/Items/hooks.js

@@ -1,61 +1,79 @@
 import { createElement as _createElement } from "react";
-import { createRef, useEffect, useMemo } from 'react';
-import { extractAllChildIds, extractChildIds } from '../../utils';
-import { useSelectionContext } from '../Lists/contexts';
+import { createRef, useMemo } from 'react';
+import { useNewListContext, useSelectionContext } from '../Lists/contexts';
 import { AccordionItem } from './AccordionItem';
 import { BaseItem } from './BaseItem';
 import { GroupItem } from './GroupItem';
+import { GroupSelectItem } from './GroupSelectItem';
 import { NextListItem } from './NextListItem';
-import { addItemsIds, isAccordionItemProps, isGroupItemProps, isNextListItemProps } from './utils';
-export function useRenderItems(items) {
-    return useMemo(() => items.map(item => {
-        if (isGroupItemProps(item)) {
-            return _createElement(GroupItem, Object.assign({}, item, { key: item.label }));
+import { isAccordionItem, isGroupItem, isGroupSelectItem, isNextListItem } from './utils';
+export function useRenderItems(focusCloseChildIds) {
+    const { focusFlattenItems, flattenItems } = useNewListContext();
+    const { isSelectionMultiple } = useSelectionContext();
+    return useMemo(() => {
+        if (!focusCloseChildIds) {
+            return [null];
         }
-        if (isAccordionItemProps(item)) {
-            return _createElement(AccordionItem, Object.assign({}, item, { key: item.key }));
-        }
-        if (isNextListItemProps(item)) {
-            return _createElement(NextListItem, Object.assign({}, item, { key: item.key }));
-        }
-        return _createElement(BaseItem, Object.assign({}, item, { key: item.key }));
-    }), [items]);
+        return focusCloseChildIds.map(id => {
+            const { itemRef, key, originalId, items } = focusFlattenItems[id];
+            const flattenItem = flattenItems[originalId];
+            if (isGroupItem(flattenItem) ||
+                (!isSelectionMultiple && isGroupSelectItem(flattenItem))) {
+                return _createElement(GroupItem, Object.assign({}, flattenItem, { items: items, key: key }));
+            }
+            if (isGroupSelectItem(flattenItem)) {
+                return _createElement(GroupSelectItem, Object.assign({}, flattenItem, { items: items, itemRef: itemRef, key: key }));
+            }
+            if (isAccordionItem(flattenItem)) {
+                return _createElement(AccordionItem, Object.assign({}, flattenItem, { items: items, itemRef: itemRef, key: key }));
+            }
+            if (isNextListItem(flattenItem)) {
+                return _createElement(NextListItem, Object.assign({}, flattenItem, { focusId: id, items: items, itemRef: itemRef, key: key }));
+            }
+            return _createElement(BaseItem, Object.assign({}, flattenItem, { itemRef: itemRef, key: key }));
+        });
+    }, [flattenItems, focusCloseChildIds, focusFlattenItems, isSelectionMultiple]);
 }
-export function useItemsWithIds({ search, footerActiveElementsRefs }) {
-    return useMemo(() => ({
-        search: addItemsIds(search ? [{ itemRef: createRef() }] : [], 'search'),
-        footerRefs: addItemsIds(footerActiveElementsRefs
-            ? footerActiveElementsRefs === null || footerActiveElementsRefs === void 0 ? void 0 : footerActiveElementsRefs.map(ref => ({ itemRef: ref }))
-            : [], 'footer'),
-    }), [footerActiveElementsRefs, search]);
+export function useCreateBaseItems({ footerActiveElementsRefs }) {
+    return useMemo(() => {
+        var _a;
+        return ({
+            searchItem: {
+                itemRef: createRef(),
+                id: '~search',
+                parentId: '~main',
+                items: [],
+                allChildIds: [],
+            },
+            footerItems: (_a = footerActiveElementsRefs === null || footerActiveElementsRefs === void 0 ? void 0 : footerActiveElementsRefs.map((itemRef, idx) => ({
+                id: `~footer__${idx}`,
+                itemRef,
+                parentId: '~main',
+                items: [],
+                allChildIds: [],
+            }))) !== null && _a !== void 0 ? _a : [],
+        });
+    }, [footerActiveElementsRefs]);
 }
-export function useGroupItemSelection({ id, items, disabled }) {
+export function useGroupItemSelection({ id, allChildIds }) {
     const { value, setValue, isSelectionMultiple } = useSelectionContext();
-    const { childIds, allChildIds } = useMemo(() => ({ childIds: extractChildIds({ items }), allChildIds: extractAllChildIds({ items }) }), [items]);
-    const isIndeterminate = isSelectionMultiple
-        ? allChildIds.some(childId => value === null || value === void 0 ? void 0 : value.includes(childId))
-        : allChildIds.includes(value !== null && value !== void 0 ? value : '');
-    const checked = isSelectionMultiple ? allChildIds.every(childId => value === null || value === void 0 ? void 0 : value.includes(childId)) : undefined;
-    useEffect(() => {
-        if (isSelectionMultiple) {
-            if (checked && !(value === null || value === void 0 ? void 0 : value.includes(id))) {
-                setValue === null || setValue === void 0 ? void 0 : setValue((value) => (value !== null && value !== void 0 ? value : []).concat([id !== null && id !== void 0 ? id : '']));
-            }
-            if (!checked && (value === null || value === void 0 ? void 0 : value.includes(id))) {
-                setValue === null || setValue === void 0 ? void 0 : setValue((value) => (value !== null && value !== void 0 ? value : []).filter(itemId => itemId !== id));
-            }
-        }
-    }, [checked, disabled, id, isSelectionMultiple, setValue, value]);
+    const { flattenItems } = useNewListContext();
+    const baseChildIds = useMemo(() => allChildIds.filter(itemId => {
+        const item = flattenItems[itemId];
+        return item && !('type' in item);
+    }), [allChildIds, flattenItems]);
+    const checked = isSelectionMultiple
+        ? value && Boolean(value.length) && baseChildIds.every(childId => value === null || value === void 0 ? void 0 : value.includes(childId))
+        : undefined;
+    const indeterminate = isSelectionMultiple
+        ? !checked && baseChildIds.some(childId => value === null || value === void 0 ? void 0 : value.includes(childId))
+        : baseChildIds.includes(value !== null && value !== void 0 ? value : '');
     const handleOnSelect = () => {
         if (checked) {
-            setValue === null || setValue === void 0 ? void 0 : setValue((value) => (value !== null && value !== void 0 ? value : []).filter(itemId => itemId !== id && !childIds.includes(itemId)));
-            return;
-        }
-        if (isIndeterminate) {
-            setValue === null || setValue === void 0 ? void 0 : setValue((value) => Array.from(new Set([...(value !== null && value !== void 0 ? value : []), ...childIds, id])));
+            setValue === null || setValue === void 0 ? void 0 : setValue((value) => (value !== null && value !== void 0 ? value : []).filter(itemId => itemId !== id && !baseChildIds.includes(itemId)));
             return;
         }
-        setValue === null || setValue === void 0 ? void 0 : setValue((value) => (value !== null && value !== void 0 ? value : []).concat([...childIds, id !== null && id !== void 0 ? id : '']));
+        setValue === null || setValue === void 0 ? void 0 : setValue((value) => Array.from(new Set([...(value !== null && value !== void 0 ? value : []), ...baseChildIds])));
     };
-    return { checked, isIndeterminate, handleOnSelect };
+    return { checked, indeterminate, handleOnSelect };
 }

package/dist/components/Items/index.d.ts

@@ -1,9 +1,5 @@
-export * from './BaseItem';
-export * from './NextListItem';
-export * from './AccordionItem';
-export * from './GroupItem';
-export * from './SearchItem';
 export * from './hooks';
 export * from './types';
 export * from './utils';
+export * from './SearchItem';
 export * from './PinGroupItem';

package/dist/components/Items/index.js

@@ -1,9 +1,5 @@
-export * from './BaseItem';
-export * from './NextListItem';
-export * from './AccordionItem';
-export * from './GroupItem';
-export * from './SearchItem';
 export * from './hooks';
 export * from './types';
 export * from './utils';
+export * from './SearchItem';
 export * from './PinGroupItem';

package/dist/components/Items/styles.module.css

@@ -1,3 +1,36 @@
+.itemWrapper{
+  position:relative;
+  min-width:100%;
+  margin:0;
+  padding:0;
+}
+.itemWrapper::before, .itemWrapper::after{
+  pointer-events:none;
+  content:"";
+  position:absolute;
+  top:0;
+  left:0;
+  width:100%;
+  height:100%;
+  background-color:transparent;
+}
+.itemWrapper[data-disabled], .itemWrapper:disabled{
+  cursor:not-allowed;
+  background-color:transparent;
+  outline:none;
+}
+.itemWrapper[data-disabled]::before, .itemWrapper:disabled::before{
+  display:none;
+}
+.itemWrapper[data-disabled]::after, .itemWrapper:disabled::after{
+  cursor:not-allowed;
+  background-color:transparent;
+}
+.itemWrapper:not([data-inactive], [data-disabled])[data-open]::before, .itemWrapper:not([data-inactive], [data-disabled])[data-focused]::before, .itemWrapper:not([data-inactive], [data-disabled]):hover::before, .itemWrapper:not([data-inactive], [data-disabled]):focus-visible::before{
+  opacity:var(--opacity-a008, 0.08);
+  background-color:var(--sys-neutral-accent-default, #6f717c);
+}
+
 .listItem{
   cursor:pointer;
   position:relative;
@@ -40,32 +73,6 @@
   padding-right:var(--space-drop-list-item-l-container-horizontal-padding, 12px);
   gap:var(--space-drop-list-item-l-container-gap, 8px);
 }
-.listItem::after{
-  pointer-events:none;
-  content:"";
-  position:absolute;
-  top:0;
-  left:0;
-  width:100%;
-  height:100%;
-  background-color:transparent;
-}
-.listItem[data-disabled], .listItem:disabled{
-  cursor:not-allowed;
-  background-color:transparent;
-  outline:none;
-}
-.listItem[data-disabled]::before, .listItem:disabled::before{
-  display:none;
-}
-.listItem[data-disabled]::after, .listItem:disabled::after{
-  cursor:not-allowed;
-  background-color:transparent;
-}
-.listItem:not([data-inactive], [data-disabled])[data-open]::after, .listItem:not([data-inactive], [data-disabled])[data-focused]::after, .listItem:not([data-inactive], [data-disabled]):hover::after, .listItem:not([data-inactive], [data-disabled]):focus-visible::after{
-  opacity:var(--opacity-a008, 0.08);
-  background-color:var(--sys-neutral-accent-default, #6f717c);
-}
 .listItem:not([data-inactive], [data-disabled])[data-focused], .listItem:not([data-inactive], [data-disabled]):focus-visible{
   outline-width:var(--border-state-focus-s-border-width, 2px);
   outline-style:var(--border-state-focus-s-border-style, solid);