@snack-uikit/list 0.1.1-preview-57c837e3.0

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

@@ -0,0 +1,70 @@
+.listContainer{
+  margin:0;
+  padding:0;
+}
+.listContainer:focus-visible{
+  border:none;
+  outline:none;
+}
+.listContainer:focus-visible[data-active]{
+  outline-width:var(--border-state-focus-s-border-width, 2px);
+  outline-style:var(--border-state-focus-s-border-style, solid);
+  outline-color:var(--border-state-focus-s-border-color, );
+  outline-offset:calc(var(--border-state-focus-s-border-width, 2px) * -1);
+  outline-color:var(--sys-available-complementary, #131313);
+}
+.listContainer:focus-visible[data-active] *{
+  cursor:inherit;
+}
+.listContainer li,
+.listContainer ul{
+  list-style-type:none;
+}
+
+.wrapper{
+  position:relative;
+  overflow:hidden;
+  display:block;
+  box-sizing:border-box;
+  padding:var(--dimension-025m, 2px);
+}
+.wrapper:has(.listContainer:focus-visible){
+  outline-width:var(--border-state-focus-s-border-width, 2px);
+  outline-style:var(--border-state-focus-s-border-style, solid);
+  outline-color:var(--border-state-focus-s-border-color, );
+  outline-offset:calc(var(--border-state-focus-s-border-width, 2px) * -1);
+  outline-color:var(--sys-available-complementary, #131313);
+}
+.wrapper li,
+.wrapper ul{
+  list-style-type:none;
+}
+
+.scrollContainerS{
+  height:auto;
+  max-height:calc(var(--dimension-1m, 8px) * 32);
+}
+
+.scrollContainerM{
+  height:auto;
+  max-height:calc(var(--dimension-1m, 8px) * 40);
+}
+
+.scrollContainerL{
+  height:auto;
+  max-height:calc(var(--dimension-1m, 8px) * 48);
+}
+
+.infoBlock{
+  font-family:var(--sans-body-s-font-family, SB Sans Interface);
+  font-weight:var(--sans-body-s-font-weight, Regular);
+  line-height:var(--sans-body-s-line-height, 16px);
+  font-size:var(--sans-body-s-font-size, 12px);
+  letter-spacing:var(--sans-body-s-letter-spacing, 0.1px);
+  paragraph-spacing:var(--sans-body-s-paragraph-spacing, 6.6px);
+  display:flex;
+  align-items:center;
+  justify-content:center;
+  padding:var(--dimension-1m, 8px);
+  color:var(--sys-neutral-text-support, #565656);
+}

package/dist/components/Lists/types.d.ts

@@ -0,0 +1,35 @@
+import { FocusEvent, KeyboardEvent, ReactNode, RefObject } from 'react';
+import { DropdownProps } from '@snack-uikit/dropdown';
+import { WithSupportProps } from '@snack-uikit/utils';
+import { ScrollProps, SearchState } from '../../types';
+import { ItemProps } from '../Items';
+import { ListContextType, SelectionProviderProps } from './contexts';
+export type ListProps = WithSupportProps<{
+    items: ItemProps[];
+    pinTop?: ItemProps[];
+    pinBottom?: ItemProps[];
+    footer?: ReactNode;
+    search?: SearchState;
+    loading?: boolean;
+    noData?: string;
+    noResults?: string;
+    footerActiveElementsRefs?: RefObject<HTMLElement>[];
+} & Pick<SelectionProviderProps, 'value' | 'defaultValue' | 'onChange' | 'selection'> & ListContextType & ScrollProps>;
+export type DroplistProps = {
+    triggerElemRef?: RefObject<HTMLElement>;
+    children?: ReactNode;
+    open?: boolean;
+    onOpenChange?(open: boolean): void;
+    trigger?: DropdownProps['trigger'];
+    placement?: DropdownProps['placement'];
+    widthStrategy?: DropdownProps['widthStrategy'];
+} & ListProps;
+export type ListPrivateProps = ListProps & {
+    nested?: boolean;
+    active?: boolean;
+    tabIndex?: number;
+    onFocus?(e: FocusEvent<HTMLElement>): void;
+    onBlur?(e: FocusEvent<HTMLElement>): void;
+    onKeyDown?(e: KeyboardEvent<HTMLElement>): void;
+    collapse?: 'single' | 'multiple';
+};

package/dist/components/Lists/types.js

@@ -0,0 +1 @@
+export {};

package/dist/components/index.d.ts

@@ -0,0 +1,2 @@
+export * from './Lists';
+export type { AccordionItemProps, NextListItemProps, BaseItemProps, GroupItemProps, ItemProps } from './Items/types';

package/dist/components/index.js

@@ -0,0 +1 @@
+export * from './Lists';

package/dist/helperComponents/CollapseBlockPrivate/CollapseBlockPrivate.d.ts

@@ -0,0 +1,9 @@
+import { ReactNode } from 'react';
+import { WithSupportProps } from '@snack-uikit/utils';
+export type CollapseBlockPrivateProps = WithSupportProps<{
+    children: ReactNode;
+    header: ReactNode;
+    expanded: boolean;
+    className?: string;
+}>;
+export declare function CollapseBlockPrivate({ children, expanded, className, header, ...rest }: CollapseBlockPrivateProps): import("react/jsx-runtime").JSX.Element;

package/dist/helperComponents/CollapseBlockPrivate/CollapseBlockPrivate.js

@@ -0,0 +1,20 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import cn from 'classnames';
+import { extractSupportProps } from '@snack-uikit/utils';
+import styles from './styles.module.css';
+// TODO: Add animation. Solution like in Accordion/Tree does not work with Scroll =(
+export function CollapseBlockPrivate(_a) {
+    var { children, expanded, className, header } = _a, rest = __rest(_a, ["children", "expanded", "className", "header"]);
+    return (_jsxs("div", Object.assign({ className: cn(styles.accordion, className), role: 'menuitem', "aria-haspopup": true, "aria-expanded": expanded }, extractSupportProps(rest), { children: [header, _jsx("div", { className: styles.contentWrapper, "aria-hidden": !expanded, children: _jsx("div", { className: styles.content, "data-content": true, children: children }) })] })));
+}

package/dist/helperComponents/CollapseBlockPrivate/index.d.ts

@@ -0,0 +1 @@
+export * from './CollapseBlockPrivate';

package/dist/helperComponents/CollapseBlockPrivate/index.js

@@ -0,0 +1 @@
+export * from './CollapseBlockPrivate';

package/dist/helperComponents/CollapseBlockPrivate/styles.module.css

@@ -0,0 +1,38 @@
+.accordion{
+  display:flex;
+  flex-direction:column;
+  box-sizing:border-box;
+  transition:gap 300ms;
+}
+.accordion::-webkit-scrollbar{
+  width:0;
+}
+.accordion[aria-expanded=false]{
+  gap:0;
+}
+
+.contentWrapper{
+  box-sizing:border-box;
+  width:100%;
+}
+.contentWrapper[aria-hidden=false] > div[data-content]{
+  display:block;
+}
+
+.content{
+  position:relative;
+  display:none;
+  box-sizing:border-box;
+  width:100%;
+}
+.content::before{
+  pointer-events:none;
+  content:"";
+  position:absolute;
+  top:0;
+  left:0;
+  width:100%;
+  height:100%;
+  opacity:var(--opacity-a004, 0.04);
+  background-color:var(--sys-neutral-accent-default, #757575);
+}

package/dist/helperComponents/HiddenTabButton/HiddenTabButton.d.ts

@@ -0,0 +1,6 @@
+import { RefObject } from 'react';
+type HiddenTabButtonProps = {
+    listRef: RefObject<HTMLElement>;
+};
+export declare const HiddenTabButton: import("react").ForwardRefExoticComponent<HiddenTabButtonProps & import("react").RefAttributes<HTMLButtonElement>>;
+export {};

package/dist/helperComponents/HiddenTabButton/HiddenTabButton.js

@@ -0,0 +1,17 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef, useCallback } from 'react';
+import styles from './styles.module.css';
+export const HiddenTabButton = forwardRef(({ listRef }, ref) => {
+    const handleFocus = useCallback((e) => {
+        var _a;
+        if (e.relatedTarget !== listRef.current) {
+            (_a = listRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+        }
+        e.preventDefault();
+        e.stopPropagation();
+    }, [listRef]);
+    const handleKeyDown = useCallback((e) => {
+        e.stopPropagation();
+    }, []);
+    return _jsx("button", { "aria-hidden": true, ref: ref, onKeyDown: handleKeyDown, onFocus: handleFocus, className: styles.hiddenBtn });
+});

package/dist/helperComponents/HiddenTabButton/index.d.ts

@@ -0,0 +1 @@
+export * from './HiddenTabButton';

package/dist/helperComponents/HiddenTabButton/index.js

@@ -0,0 +1 @@
+export * from './HiddenTabButton';

package/dist/helperComponents/HiddenTabButton/styles.module.css

@@ -0,0 +1,9 @@
+.hiddenBtn{
+  position:absolute;
+  width:0;
+  height:0;
+  margin:0;
+  padding:0;
+  border:none;
+  outline:none;
+}

package/dist/helperComponents/Separator/Separator.d.ts

@@ -0,0 +1,7 @@
+export type SeparatorProps = {
+    label?: string;
+    mode?: 'primary' | 'secondary';
+    divider?: boolean;
+    size?: 's' | 'm' | 'l';
+};
+export declare function Separator({ label, divider, mode, size }: SeparatorProps): import("react/jsx-runtime").JSX.Element | null;

package/dist/helperComponents/Separator/Separator.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Divider } from '@snack-uikit/divider';
+import styles from './styles.module.css';
+export function Separator({ label, divider, mode = 'secondary', size = 's' }) {
+    if (label) {
+        return (_jsxs("div", { className: styles.separatorWithLabel, "data-size": size, children: [_jsx("span", { className: styles.label, "data-mode": mode, children: label }), divider && _jsx(Divider, { weight: mode === 'primary' ? 'regular' : 'light' })] }));
+    }
+    if (divider) {
+        return (_jsx("div", { className: styles.separatorWithoutLabel, "data-size": size, children: _jsx(Divider, { weight: 'regular' }) }));
+    }
+    return null;
+}

package/dist/helperComponents/Separator/index.d.ts

@@ -0,0 +1 @@
+export * from './Separator';

package/dist/helperComponents/Separator/index.js

@@ -0,0 +1 @@
+export * from './Separator';

package/dist/helperComponents/Separator/styles.module.css

@@ -0,0 +1,112 @@
+.separatorWithLabel{
+  display:flex;
+  gap:var(--dimension-1m, 8px);
+  align-items:flex-end;
+  box-sizing:border-box;
+}
+.separatorWithLabel[data-size=s]{
+  padding-top:var(--space-drop-list-item-s-container-separator-subheader-vertical-padding, 4px);
+  padding-bottom:var(--space-drop-list-item-s-container-separator-subheader-vertical-padding, 4px);
+  padding-left:var(--space-drop-list-item-s-container-horizontal-padding, 8px);
+  padding-right:var(--space-drop-list-item-s-container-horizontal-padding, 8px);
+  gap:var(--space-drop-list-item-s-container-gap, 8px);
+  height:var(--size-drop-list-item-s-container-separator-subheader-height, 32px);
+}
+.separatorWithLabel[data-size=s] .label[data-mode=primary]{
+  font-family:var(--sans-label-m-font-family, SB Sans Interface);
+  font-weight:var(--sans-label-m-font-weight, Semibold);
+  line-height:var(--sans-label-m-line-height, 16px);
+  font-size:var(--sans-label-m-font-size, 12px);
+  letter-spacing:var(--sans-label-m-letter-spacing, -0.1px);
+  paragraph-spacing:var(--sans-label-m-paragraph-spacing, 6.6px);
+}
+.separatorWithLabel[data-size=s] .label[data-mode=secondary]{
+  font-family:var(--light-label-m-font-family, SB Sans Interface);
+  font-weight:var(--light-label-m-font-weight, Regular);
+  line-height:var(--light-label-m-line-height, 16px);
+  font-size:var(--light-label-m-font-size, 12px);
+  letter-spacing:var(--light-label-m-letter-spacing, -0.1px);
+  paragraph-spacing:var(--light-label-m-paragraph-spacing, 6.6px);
+}
+.separatorWithLabel[data-size=m]{
+  padding-top:var(--space-drop-list-item-m-container-separator-subheader-vertical-padding, 5px);
+  padding-bottom:var(--space-drop-list-item-m-container-separator-subheader-vertical-padding, 5px);
+  padding-left:var(--space-drop-list-item-m-container-horizontal-padding, 10px);
+  padding-right:var(--space-drop-list-item-m-container-horizontal-padding, 10px);
+  gap:var(--space-drop-list-item-m-container-gap, 8px);
+  height:var(--size-drop-list-item-m-container-separator-subheader-height, 40px);
+}
+.separatorWithLabel[data-size=m] .label[data-mode=primary]{
+  font-family:var(--sans-label-l-font-family, SB Sans Interface);
+  font-weight:var(--sans-label-l-font-weight, Semibold);
+  line-height:var(--sans-label-l-line-height, 20px);
+  font-size:var(--sans-label-l-font-size, 14px);
+  letter-spacing:var(--sans-label-l-letter-spacing, -0.1px);
+  paragraph-spacing:var(--sans-label-l-paragraph-spacing, 7.7px);
+}
+.separatorWithLabel[data-size=m] .label[data-mode=secondary]{
+  font-family:var(--light-label-l-font-family, SB Sans Interface);
+  font-weight:var(--light-label-l-font-weight, Regular);
+  line-height:var(--light-label-l-line-height, 20px);
+  font-size:var(--light-label-l-font-size, 14px);
+  letter-spacing:var(--light-label-l-letter-spacing, -0.1px);
+  paragraph-spacing:var(--light-label-l-paragraph-spacing, 7.7px);
+}
+.separatorWithLabel[data-size=l]{
+  padding-top:var(--space-drop-list-item-l-container-separator-subheader-vertical-padding, 6px);
+  padding-bottom:var(--space-drop-list-item-l-container-separator-subheader-vertical-padding, 6px);
+  padding-left:var(--space-drop-list-item-l-container-horizontal-padding, 12px);
+  padding-right:var(--space-drop-list-item-l-container-horizontal-padding, 12px);
+  gap:var(--space-drop-list-item-l-container-gap, 8px);
+  height:var(--size-drop-list-item-l-container-separator-subheader-height, 48px);
+}
+.separatorWithLabel[data-size=l] .label[data-mode=primary]{
+  font-family:var(--sans-title-m-font-family, SB Sans Interface);
+  font-weight:var(--sans-title-m-font-weight, Semibold);
+  line-height:var(--sans-title-m-line-height, 24px);
+  font-size:var(--sans-title-m-font-size, 16px);
+  letter-spacing:var(--sans-title-m-letter-spacing, 0.15px);
+  paragraph-spacing:var(--sans-title-m-paragraph-spacing, 8.8px);
+}
+.separatorWithLabel[data-size=l] .label[data-mode=secondary]{
+  font-family:var(--light-title-m-font-family, SB Sans Interface);
+  font-weight:var(--light-title-m-font-weight, Regular);
+  line-height:var(--light-title-m-line-height, 24px);
+  font-size:var(--light-title-m-font-size, 16px);
+  letter-spacing:var(--light-title-m-letter-spacing, 0.15px);
+  paragraph-spacing:var(--light-title-m-paragraph-spacing, 8.8px);
+}
+
+.separatorWithoutLabel{
+  display:flex;
+  align-items:flex-end;
+  box-sizing:border-box;
+}
+.separatorWithoutLabel[data-size=s]{
+  padding-top:var(--space-drop-list-item-s-container-separator-subheader-vertical-padding, 4px);
+  padding-bottom:var(--space-drop-list-item-s-container-separator-subheader-vertical-padding, 4px);
+  padding-left:var(--space-drop-list-item-s-container-horizontal-padding, 8px);
+  padding-right:var(--space-drop-list-item-s-container-horizontal-padding, 8px);
+}
+.separatorWithoutLabel[data-size=m]{
+  padding-top:var(--space-drop-list-item-m-container-separator-subheader-vertical-padding, 5px);
+  padding-bottom:var(--space-drop-list-item-m-container-separator-subheader-vertical-padding, 5px);
+  padding-left:var(--space-drop-list-item-m-container-horizontal-padding, 10px);
+  padding-right:var(--space-drop-list-item-m-container-horizontal-padding, 10px);
+}
+.separatorWithoutLabel[data-size=l]{
+  padding-top:var(--space-drop-list-item-l-container-separator-subheader-vertical-padding, 6px);
+  padding-bottom:var(--space-drop-list-item-l-container-separator-subheader-vertical-padding, 6px);
+  padding-left:var(--space-drop-list-item-l-container-horizontal-padding, 12px);
+  padding-right:var(--space-drop-list-item-l-container-horizontal-padding, 12px);
+}
+
+.label{
+  flex-shrink:0;
+}
+.label[data-mode=primary]{
+  color:var(--sys-neutral-text-main, #333333);
+}
+.label[data-mode=secondary]{
+  color:var(--sys-neutral-text-light, #898989);
+}

package/dist/helperComponents/index.d.ts

@@ -0,0 +1,3 @@
+export * from './CollapseBlockPrivate';
+export * from './Separator';
+export * from './HiddenTabButton';

package/dist/helperComponents/index.js

@@ -0,0 +1,3 @@
+export * from './CollapseBlockPrivate';
+export * from './Separator';
+export * from './HiddenTabButton';

package/dist/index.d.ts

@@ -0,0 +1 @@
+export * from './components';

package/dist/index.js

@@ -0,0 +1 @@
+export * from './components';

package/dist/types.d.ts

@@ -0,0 +1,12 @@
+import { RefObject } from 'react';
+export type SearchState = {
+    placeholder?: string;
+    value?: string;
+    onChange(value: string): void;
+    loading?: boolean;
+};
+export type ScrollProps = {
+    scroll?: boolean;
+    scrollRef?: RefObject<HTMLElement>;
+    scrollContainerRef?: RefObject<HTMLElement>;
+};

package/dist/types.js

@@ -0,0 +1 @@
+export {};

package/dist/utils.d.ts

@@ -0,0 +1,18 @@
+import { RefObject } from 'react';
+import { ItemProps } from './components/Items';
+type WithCollapsedItemsProps = {
+    items: ItemProps[];
+    openCollapsedItems: Array<number | string>;
+};
+export declare function withCollapsedItems({ items, openCollapsedItems }: WithCollapsedItemsProps): {
+    items: ItemProps[];
+    itemRefs: RefObject<HTMLButtonElement>[];
+    ids: (string | number)[];
+    expandedIds: (string | number)[];
+};
+export declare function extractItemRefs(items: ItemProps[]): RefObject<HTMLButtonElement>[];
+export declare function extractItemIds(items: ItemProps[]): Array<string | number>;
+export declare function extractChildIds({ items }: {
+    items: ItemProps[];
+}): Array<string | number>;
+export {};

package/dist/utils.js

@@ -0,0 +1,69 @@
+import { isAccordionItemProps, isBaseItemProps, isGroupItemProps, isNextListItemProps, } from './components/Items';
+export function withCollapsedItems({ items, openCollapsedItems }) {
+    let itemRefs = [];
+    let newItems = [];
+    let ids = [];
+    let expandedIds = [];
+    items.forEach(item => {
+        var _a;
+        if ((isBaseItemProps(item) || isNextListItemProps(item) || isAccordionItemProps(item)) && !item.disabled) {
+            newItems = newItems.concat([item]);
+            ids = ids.concat([(_a = item.id) !== null && _a !== void 0 ? _a : '']);
+            if (item.itemRef) {
+                itemRefs = itemRefs.concat([item.itemRef]);
+            }
+        }
+        if (isNextListItemProps(item) && item.id && !item.disabled) {
+            expandedIds = expandedIds.concat(item.id);
+        }
+        if (isGroupItemProps(item)) {
+            const { itemRefs: nestedItemsRefs, ids: nestedIds } = withCollapsedItems({
+                items: item.items,
+                openCollapsedItems,
+            });
+            ids = ids.concat(nestedIds);
+            itemRefs = itemRefs.concat(nestedItemsRefs);
+        }
+        if (isAccordionItemProps(item) && item.id && openCollapsedItems.includes(item.id)) {
+            const { itemRefs: nestedItemsRefs, ids: nestedIds, items: nestedItems, expandedIds: nestedExpandedIds, } = withCollapsedItems({
+                items: item.items,
+                openCollapsedItems,
+            });
+            ids = ids.concat(nestedIds);
+            newItems = newItems.concat(nestedItems);
+            itemRefs = itemRefs.concat(nestedItemsRefs);
+            expandedIds = expandedIds.concat(nestedExpandedIds);
+        }
+    });
+    return { items, itemRefs, ids, expandedIds };
+}
+export function extractItemRefs(items) {
+    return items.reduce((prev, item) => {
+        if (isGroupItemProps(item)) {
+            return prev.concat(extractItemRefs(item.items));
+        }
+        return item.itemRef ? prev.concat([item.itemRef]) : prev;
+    }, []);
+}
+export function extractItemIds(items) {
+    return items.reduce((prev, item) => {
+        if (isGroupItemProps(item)) {
+            return prev.concat(extractItemIds(item.items));
+        }
+        return item.id ? prev.concat([item.id]) : prev;
+    }, []);
+}
+export function extractChildIds({ items }) {
+    return items
+        .filter(item => isAccordionItemProps(item) || isNextListItemProps(item) || isGroupItemProps(item) || !item.disabled)
+        .reduce((prev, item) => {
+        var _a;
+        if (isAccordionItemProps(item) || isNextListItemProps(item)) {
+            return prev.concat([(_a = item.id) !== null && _a !== void 0 ? _a : '']).concat(extractChildIds({ items: item.items }));
+        }
+        if (isGroupItemProps(item)) {
+            return prev.concat(extractChildIds({ items: item.items }));
+        }
+        return item.id && !isGroupItemProps(item) ? prev.concat([item.id]) : prev;
+    }, []);
+}

package/package.json

@@ -0,0 +1,48 @@
+{
+  "name": "@snack-uikit/list",
+  "publishConfig": {
+    "access": "public"
+  },
+  "title": "List",
+  "version": "0.1.1-preview-57c837e3.0",
+  "sideEffects": [
+    "*.css",
+    "*.woff",
+    "*.woff2"
+  ],
+  "description": "",
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "homepage": "https://cloud-ru-tech.github.io/snack-uikit/packages/list",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/cloud-ru-tech/snack-uikit/tree/master",
+    "directory": "packages/list"
+  },
+  "author": "Nikita Ershov <niershov@cloud.ru>",
+  "contributors": [
+    "Nikita Ershov <niershov@cloud.ru>"
+  ],
+  "files": [
+    "dist",
+    "src",
+    "./CHANGELOG.md",
+    "./LICENSE"
+  ],
+  "license": "Apache-2.0",
+  "scripts": {},
+  "dependencies": {
+    "@snack-uikit/divider": "3.0.1",
+    "@snack-uikit/dropdown": "0.1.0",
+    "@snack-uikit/icons": "0.20.0",
+    "@snack-uikit/loaders": "0.5.0",
+    "@snack-uikit/scroll": "0.5.0",
+    "@snack-uikit/search-private": "0.1.2",
+    "@snack-uikit/toggles": "0.9.4",
+    "@snack-uikit/truncate-string": "0.4.5",
+    "@snack-uikit/utils": "3.2.0",
+    "classnames": "2.5.1",
+    "uncontrollable": "8.0.4"
+  },
+  "gitHead": "0539acbacf5bc065cdb55739e06f63366ac9178b"
+}

package/src/components/Items/AccordionItem/AccordionItem.tsx

@@ -0,0 +1,60 @@
+import { KeyboardEvent, MouseEvent } from 'react';
+
+import { ChevronDownSVG, ChevronUpSVG } from '@snack-uikit/icons';
+import { useToggleGroup } from '@snack-uikit/toggles';
+
+import { CollapseBlockPrivate } from '../../../helperComponents';
+import { CollapseContext, useCollapseContext, useParentListContext } from '../../Lists/contexts';
+import { BaseItem } from '../BaseItem';
+import { useGroupItemSelection, useRenderItems } from '../hooks';
+import { AccordionItemProps } from '../types';
+
+export function AccordionItem({ items: itemsProp, id, disabled, ...option }: AccordionItemProps) {
+  const { level = 1 } = useCollapseContext();
+  const { toggleOpenCollapsedItems } = useParentListContext();
+  const { isIndeterminate, checked, handleOnSelect } = useGroupItemSelection({ items: itemsProp, id, disabled });
+
+  const { isChecked: open, handleClick: handleChange } = useToggleGroup({ value: String(id) });
+
+  const handleKeyDown = (e: KeyboardEvent<HTMLButtonElement>) => {
+    if (e.key === 'ArrowRight') {
+      handleChange();
+      toggleOpenCollapsedItems?.(id ?? '');
+
+      e.preventDefault();
+      e.stopPropagation();
+    }
+  };
+
+  const itemsJSX = useRenderItems(itemsProp);
+
+  const handleItemClick = (e: MouseEvent<HTMLButtonElement>) => {
+    handleChange();
+    toggleOpenCollapsedItems?.(id ?? '');
+    option.onClick?.(e);
+  };
+
+  return (
+    <li style={{ listStyleType: 'none' }}>
+      <CollapseBlockPrivate
+        header={
+          <BaseItem
+            {...option}
+            id={id}
+            disabled={disabled}
+            expandIcon={open ? <ChevronUpSVG /> : <ChevronDownSVG />}
+            onClick={handleItemClick}
+            isParentNode
+            onKeyDown={handleKeyDown}
+            indeterminate={isIndeterminate && !checked}
+            onSelect={!disabled ? handleOnSelect : undefined}
+          />
+        }
+        expanded={open}
+        data-test-id={`list__accordion-item-${id}`}
+      >
+        <CollapseContext.Provider value={{ level: level + 1 }}>{itemsJSX}</CollapseContext.Provider>
+      </CollapseBlockPrivate>
+    </li>
+  );
+}

package/src/components/Items/AccordionItem/index.ts

@@ -0,0 +1 @@
+export * from './AccordionItem';