@snack-uikit/list 0.10.0 → 0.10.1-preview-69abc1d3.0

package/dist/components/Lists/contexts/FocusListProvider.d.ts

@@ -0,0 +1,9 @@
+import { KeyboardEvent } from 'react';
+import { ItemId } from '../../Items';
+export type FocusListContextType = {
+    activeItemId?: ItemId;
+    forceUpdateActiveItemId?(itemId: ItemId): void;
+    handleListKeyDownFactory: (ids: ItemId[], expandedIds: ItemId[]) => (e: KeyboardEvent<HTMLElement>) => void;
+};
+export declare const FocusListContext: import("react").Context<FocusListContextType>;
+export declare const useFocusListContext: () => FocusListContextType;

package/dist/components/Lists/contexts/FocusListProvider.js

@@ -0,0 +1,5 @@
+import { createContext, useContext } from 'react';
+export const FocusListContext = createContext({
+    handleListKeyDownFactory: () => () => { },
+});
+export const useFocusListContext = () => useContext(FocusListContext);

package/dist/components/Lists/contexts/NewListProvider.d.ts

@@ -0,0 +1,32 @@
+import { ReactNode } from 'react';
+import { ItemContentProps } from '../../../helperComponents';
+import { FlattenItem, FocusFlattenItem, ItemId } from '../../Items';
+type ContentRenderProps = {
+    id?: ItemId;
+    content?: ItemContentProps | ReactNode;
+};
+export type PublicListContextType = {
+    /** Размер списка */
+    size?: 's' | 'm' | 'l';
+    /** Отображать ли маркер у выбранного жлемента списка */
+    marker?: boolean;
+    /**
+     * Рендер функция основного контента айтема
+     */
+    contentRender?(props: ContentRenderProps): ReactNode;
+};
+export type PrivateListContextType = {
+    flattenItems: Record<string, FlattenItem>;
+    focusFlattenItems: Record<string, FocusFlattenItem>;
+};
+type Child = {
+    children: ReactNode;
+};
+type ListContextType = PublicListContextType & PrivateListContextType;
+export declare const ListContext: import("react").Context<{
+    flattenItems: {};
+    focusFlattenItems: {};
+}>;
+export declare function useNewListContext(): ListContextType;
+export declare function NewListContextProvider({ children, ...props }: ListContextType & Child): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/Lists/contexts/{ListProvider.js → NewListProvider.js}

@@ -11,12 +11,17 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 import { jsx as _jsx } from "react/jsx-runtime";
 import { createContext, useContext } from 'react';
-export const ListContext = createContext({});
-export const useListContext = () => useContext(ListContext);
-function extractListProps({ size, marker, parent }) {
-    return { size, marker, parent };
+export const ListContext = createContext({
+    flattenItems: {},
+    focusFlattenItems: {},
+});
+export function useNewListContext() {
+    return useContext(ListContext);
 }
-export function ListContextProvider(_a) {
+function extractListProps({ size, marker, flattenItems, focusFlattenItems, contentRender, }) {
+    return { size, marker, parent, contentRender, flattenItems, focusFlattenItems };
+}
+export function NewListContextProvider(_a) {
     var { children } = _a, props = __rest(_a, ["children"]);
     return _jsx(ListContext.Provider, { value: extractListProps(props), children: children });
 }

package/dist/components/Lists/contexts/SelectionProvider.d.ts

@@ -1,17 +1,19 @@
 import { ReactNode } from 'react';
-export type SelectionSingleValueType = string | number | undefined;
+import { AnyType, ItemId } from '../../Items';
+export type OnChangeHandler<T = AnyType> = (value: T) => void;
+export type SelectionSingleValueType = ItemId;
 export type SelectionSingleState = {
     /** Начальное состояние */
-    defaultValue?: SelectionSingleValueType;
+    defaultValue?: ItemId;
     /** Controlled состояние */
-    value?: SelectionSingleValueType;
+    value?: ItemId;
     /** Controlled обработчик измения состояния */
-    onChange?(value: any): void;
+    onChange?: OnChangeHandler;
     /** Режим выбора */
     mode: 'single';
 };
 export type SelectionSingleProps = {
-    setValue?(value: any): void;
+    setValue?(value: AnyType): void;
     /** Режим выбора single */
     isSelectionSingle: true;
     /** Режим выбора multi */
@@ -19,23 +21,23 @@ export type SelectionSingleProps = {
 } & SelectionSingleState;
 export type SelectionMultipleState = {
     /** Начальное состояние */
-    defaultValue?: SelectionSingleValueType[];
+    defaultValue?: ItemId[];
     /** Controlled состояние */
-    value?: SelectionSingleValueType[];
+    value?: ItemId[];
     /** Controlled обработчик измения состояния */
-    onChange?(value: any): void;
+    onChange?: OnChangeHandler;
     /** Режим выбора */
     mode: 'multiple';
 };
 export type SelectionMultipleProps = {
-    setValue?(value: any): void;
+    setValue?(value: AnyType): void;
     /** Режим выбора single */
     isSelectionSingle: false;
     /** Режим выбора multi */
     isSelectionMultiple: true;
 } & SelectionMultipleState;
 type SelectionNoneProps = {
-    mode?: undefined;
+    mode?: 'none';
     value?: undefined;
     onChange?: undefined;
     setValue?: undefined;
@@ -43,18 +45,26 @@ type SelectionNoneProps = {
     isSelectionSingle?: undefined;
     isSelectionMultiple?: undefined;
 };
-type SelectionProviderProps = SelectionSingleProps | SelectionMultipleProps | SelectionNoneProps;
 type SelectionContextType = Omit<SelectionNoneProps, 'defaultValue'> | Omit<SelectionSingleProps, 'defaultValue'> | Omit<SelectionMultipleProps, 'defaultValue'>;
 export type SelectionState = {
     selection?: SelectionSingleState | SelectionMultipleState;
 };
 export declare const SelectionContext: import("react").Context<SelectionContextType>;
-export declare function isSelectionMultipleProps(props: any): props is SelectionMultipleProps;
-export declare function isSelectionSingleProps(props: any): props is SelectionSingleProps;
+export declare function isSelectionMultipleProps(props: AnyType): props is SelectionMultipleProps;
+export declare function isSelectionSingleProps(props: AnyType): props is SelectionSingleProps;
 type Child = {
     children: ReactNode;
 };
+type SelectionProviderProps = {
+    /** Начальное состояние */
+    defaultValue?: AnyType;
+    /** Controlled состояние */
+    value?: AnyType;
+    /** Controlled обработчик измения состояния */
+    onChange?: OnChangeHandler;
+    /** Режим выбора */
+    mode?: 'multiple' | 'single' | 'none';
+};
 export declare function SelectionProvider({ children, ...props }: SelectionProviderProps & Child): import("react/jsx-runtime").JSX.Element;
-export declare const useSelectionContext: () => SelectionContextType;
-export declare function extractSelectionProps<T extends SelectionState>({ selection }: T): SelectionProviderProps;
+export declare function useSelectionContext(): SelectionContextType;
 export {};

package/dist/components/Lists/contexts/SelectionProvider.js

@@ -11,24 +11,28 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 import { jsx as _jsx } from "react/jsx-runtime";
 import { createContext, useCallback, useContext } from 'react';
-import { useUncontrolledProp } from 'uncontrollable';
+import { useValueControl } from '@snack-uikit/utils';
 export const SelectionContext = createContext({
     value: undefined,
     onChange: undefined,
     mode: undefined,
 });
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
 export function isSelectionMultipleProps(props) {
     return 'mode' in props && props['mode'] === 'multiple';
 }
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
 export function isSelectionSingleProps(props) {
     return 'mode' in props && props['mode'] === 'single';
 }
+function SelectionNoneProvider({ children }) {
+    return (_jsx(SelectionContext.Provider, { value: {
+            mode: 'none',
+        }, children: children }));
+}
 function SelectionSingleProvider({ value: valueProp, defaultValue, onChange: onChangeProp, children, }) {
-    const [value, setValue] = useUncontrolledProp(valueProp, defaultValue, newValue => {
-        const result = typeof newValue === 'function' ? newValue(value) : newValue;
-        onChangeProp === null || onChangeProp === void 0 ? void 0 : onChangeProp(result);
+    const [value, setValue] = useValueControl({
+        value: valueProp,
+        defaultValue,
+        onChange: onChangeProp,
     });
     const onChange = useCallback((newValue) => setValue((oldValue) => {
         if (newValue !== oldValue) {
@@ -46,9 +50,10 @@ function SelectionSingleProvider({ value: valueProp, defaultValue, onChange: onC
         }, children: children }));
 }
 function SelectionMultipleProvider({ value: valueProp, defaultValue, onChange: onChangeProp, children, }) {
-    const [value, setValue] = useUncontrolledProp(valueProp, defaultValue, newValue => {
-        const result = typeof newValue === 'function' ? newValue(value) : newValue;
-        onChangeProp === null || onChangeProp === void 0 ? void 0 : onChangeProp(result);
+    const [value, setValue] = useValueControl({
+        value: valueProp,
+        defaultValue,
+        onChange: onChangeProp,
     });
     const onChange = useCallback((newValue) => {
         setValue((oldValues) => {
@@ -81,9 +86,8 @@ export function SelectionProvider(_a) {
     if (isSelectionMultipleProps(props)) {
         return _jsx(SelectionMultipleProvider, Object.assign({}, props, { children: children }));
     }
-    return _jsx(SelectionContext.Provider, { value: {}, children: children });
+    return _jsx(SelectionNoneProvider, { children: children });
 }
-export const useSelectionContext = () => useContext(SelectionContext);
-export function extractSelectionProps({ selection }) {
-    return Object.assign({}, (selection !== null && selection !== void 0 ? selection : {}));
+export function useSelectionContext() {
+    return useContext(SelectionContext);
 }

package/dist/components/Lists/contexts/index.d.ts

@@ -1,4 +1,4 @@
-export * from './ListProvider';
 export * from './SelectionProvider';
-export * from './ParentListProvider';
 export * from './CollapseProvider';
+export * from './NewListProvider';
+export { useFocusListContext, FocusListContext } from './FocusListProvider';

package/dist/components/Lists/contexts/index.js

@@ -1,4 +1,4 @@
-export * from './ListProvider';
 export * from './SelectionProvider';
-export * from './ParentListProvider';
 export * from './CollapseProvider';
+export * from './NewListProvider';
+export { useFocusListContext, FocusListContext } from './FocusListProvider';

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

@@ -1,16 +1,14 @@
 import { KeyboardEvent, RefObject } from 'react';
-export type UseKeyboardNavigationProps<T extends HTMLElement> = {
-    ids: Array<number | string>;
-    expandedIds: Array<number | string>;
-    parentRef?: RefObject<T>;
+import { FocusFlattenItem, ItemId } from '../Items';
+type UseNewKeyboardNavigationProps<T extends HTMLElement> = {
+    mainRef?: RefObject<T>;
     btnRef?: RefObject<HTMLButtonElement>;
-    itemRefs?: RefObject<HTMLElement>[];
+    focusFlattenItems: Record<string, FocusFlattenItem>;
 };
-export declare function useKeyboardNavigation<T extends HTMLElement>({ ids, itemRefs, expandedIds, parentRef, btnRef, }: UseKeyboardNavigationProps<T>): {
-    activeFocusIndex: number;
-    setActiveFocusIndex: import("react").Dispatch<import("react").SetStateAction<number>>;
-    openNestedIndex: number;
-    resetNestedIndex: () => void;
-    resetActiveFocusIndex: () => void;
-    handleListKeyDown: (e: KeyboardEvent<T>) => void;
+export declare function useNewKeyboardNavigation<T extends HTMLElement>({ mainRef, btnRef, focusFlattenItems, }: UseNewKeyboardNavigationProps<T>): {
+    resetActiveItemId: () => void;
+    activeItemId: ItemId | undefined;
+    forceUpdateActiveItemId: (itemId: ItemId) => void;
+    handleListKeyDownFactory: (ids: ItemId[], expandedIds: ItemId[]) => (e: KeyboardEvent<T>) => void;
 };
+export {};

package/dist/components/Lists/hooks.js

@@ -1,73 +1,106 @@
-import { useEffect, useState } from 'react';
-export function useKeyboardNavigation({ ids, itemRefs, expandedIds, parentRef, btnRef, }) {
-    const [activeFocusIndex, setActiveFocusIndex] = useState(-1);
-    const [openNestedIndex, setOpenNestedIndex] = useState(-1);
-    const handleListKeyDown = (e) => {
-        var _a, _b, _c, _d;
+import { useCallback, useRef, useState } from 'react';
+export function useNewKeyboardNavigation({ mainRef, btnRef, focusFlattenItems, }) {
+    const [activeItemId, setActiveItemId] = useState();
+    const activeItemIdRef = useRef();
+    const handleListKeyDownFactory = useCallback((ids, expandedIds) => (e) => {
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
         switch (e.key) {
             case 'ArrowDown': {
-                setActiveFocusIndex(activeIndex => Math.min(activeIndex + 1, ids.length - 1));
-                // TODO: go to loader from last item
-                // if (activeFocusIndex === ids.length - 2) {
-                //   return;
-                // }
+                if (activeItemIdRef.current !== undefined) {
+                    const activeIndex = ids.findIndex(id => id === activeItemIdRef.current);
+                    const nextId = Math.min(activeIndex + 1, ids.length - 1);
+                    const itemId = ids[nextId];
+                    const item = focusFlattenItems[itemId];
+                    activeItemIdRef.current = itemId;
+                    setActiveItemId(itemId);
+                    if (item.type !== 'group') {
+                        (_b = (_a = item.itemRef) === null || _a === void 0 ? void 0 : _a.current) === null || _b === void 0 ? void 0 : _b.focus();
+                    }
+                }
+                else {
+                    const itemId = ids[0];
+                    const item = focusFlattenItems[itemId];
+                    activeItemIdRef.current = itemId;
+                    setActiveItemId(itemId);
+                    if (item.type !== 'group') {
+                        (_d = (_c = item.itemRef) === null || _c === void 0 ? void 0 : _c.current) === null || _d === void 0 ? void 0 : _d.focus();
+                    }
+                }
                 e.stopPropagation();
                 e.preventDefault();
                 return;
             }
             case 'ArrowUp': {
-                if (activeFocusIndex === 0) {
-                    (_a = parentRef === null || parentRef === void 0 ? void 0 : parentRef.current) === null || _a === void 0 ? void 0 : _a.focus();
-                    setActiveFocusIndex(-1);
+                if (ids[0] === activeItemIdRef.current) {
+                    const item = focusFlattenItems[ids[0]];
+                    if (item.parentId === '~main') {
+                        activeItemIdRef.current = undefined;
+                        setActiveItemId(undefined);
+                        (_e = mainRef === null || mainRef === void 0 ? void 0 : mainRef.current) === null || _e === void 0 ? void 0 : _e.focus();
+                    }
                     return;
                 }
-                setActiveFocusIndex(activeIndex => Math.max(activeIndex - 1, 0));
+                if (activeItemIdRef.current !== undefined) {
+                    const activeIndex = ids.findIndex(id => id === activeItemIdRef.current);
+                    const nextId = Math.max(activeIndex - 1, 0);
+                    const itemId = ids[nextId];
+                    const item = focusFlattenItems[itemId];
+                    activeItemIdRef.current = itemId;
+                    setActiveItemId(itemId);
+                    if (item.type !== 'group') {
+                        (_g = (_f = item.itemRef) === null || _f === void 0 ? void 0 : _f.current) === null || _g === void 0 ? void 0 : _g.focus();
+                    }
+                }
                 e.stopPropagation();
                 e.preventDefault();
                 return;
             }
             case 'ArrowRight': {
-                if (expandedIds.includes(ids[activeFocusIndex])) {
-                    setOpenNestedIndex(activeFocusIndex);
+                if (activeItemIdRef.current !== undefined && expandedIds.includes(activeItemIdRef.current)) {
+                    const item = focusFlattenItems[activeItemIdRef.current];
+                    const newItemId = item.items[0];
+                    const newItem = focusFlattenItems[newItemId];
+                    activeItemIdRef.current = newItemId;
+                    setActiveItemId(newItemId);
+                    setTimeout(() => { var _a, _b; return (_b = (_a = newItem.itemRef) === null || _a === void 0 ? void 0 : _a.current) === null || _b === void 0 ? void 0 : _b.focus(); }, 0);
                 }
                 e.stopPropagation();
                 e.preventDefault();
                 return;
             }
             case 'Tab': {
-                if (parentRef && activeFocusIndex !== -1) {
+                if (activeItemIdRef.current !== undefined) {
                     e.preventDefault();
-                    (_b = parentRef === null || parentRef === void 0 ? void 0 : parentRef.current) === null || _b === void 0 ? void 0 : _b.focus();
+                    e.stopPropagation();
+                    activeItemIdRef.current = undefined;
+                    setActiveItemId(undefined);
+                    (_h = mainRef === null || mainRef === void 0 ? void 0 : mainRef.current) === null || _h === void 0 ? void 0 : _h.focus();
                 }
-                else if (activeFocusIndex === -1) {
-                    btnRef && !e.shiftKey ? (_c = btnRef === null || btnRef === void 0 ? void 0 : btnRef.current) === null || _c === void 0 ? void 0 : _c.focus() : (_d = parentRef === null || parentRef === void 0 ? void 0 : parentRef.current) === null || _d === void 0 ? void 0 : _d.focus();
+                else {
+                    btnRef && !e.shiftKey ? (_j = btnRef === null || btnRef === void 0 ? void 0 : btnRef.current) === null || _j === void 0 ? void 0 : _j.focus() : (_k = mainRef === null || mainRef === void 0 ? void 0 : mainRef.current) === null || _k === void 0 ? void 0 : _k.focus();
                 }
-                setOpenNestedIndex(-1);
-                setActiveFocusIndex(-1);
                 return;
             }
             default: {
                 return;
             }
         }
-    };
-    const resetNestedIndex = () => {
-        setActiveFocusIndex(openNestedIndex);
-        setOpenNestedIndex(-1);
-    };
-    const resetActiveFocusIndex = () => {
-        setActiveFocusIndex(-1);
-    };
-    useEffect(() => {
+    }, [focusFlattenItems, mainRef, btnRef]);
+    const resetActiveItemId = useCallback(() => {
+        setActiveItemId(undefined);
+        activeItemIdRef.current = undefined;
+    }, []);
+    const forceUpdateActiveItemId = useCallback((itemId) => {
         var _a, _b;
-        activeFocusIndex !== -1 && openNestedIndex === -1 && ((_b = (_a = itemRefs === null || itemRefs === void 0 ? void 0 : itemRefs[activeFocusIndex]) === null || _a === void 0 ? void 0 : _a.current) === null || _b === void 0 ? void 0 : _b.focus());
-    }, [activeFocusIndex, itemRefs, openNestedIndex]);
+        setActiveItemId(itemId);
+        activeItemIdRef.current = itemId;
+        const item = focusFlattenItems[itemId];
+        (_b = (_a = item === null || item === void 0 ? void 0 : item.itemRef) === null || _a === void 0 ? void 0 : _a.current) === null || _b === void 0 ? void 0 : _b.focus();
+    }, [focusFlattenItems]);
     return {
-        activeFocusIndex,
-        setActiveFocusIndex,
-        openNestedIndex,
-        resetNestedIndex,
-        resetActiveFocusIndex,
-        handleListKeyDown,
+        resetActiveItemId,
+        activeItemId,
+        forceUpdateActiveItemId,
+        handleListKeyDownFactory,
     };
 }

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

@@ -3,13 +3,8 @@ import { DropdownProps } from '@snack-uikit/dropdown';
 import { WithSupportProps } from '@snack-uikit/utils';
 import { EmptyStateProps } from '../../helperComponents';
 import { ScrollProps, SearchState } from '../../types';
-import { ItemProps } from '../Items';
-import { ListContextPrivateType, ListContextType, SelectionState } from './contexts';
-type CollapseState = {
-    value?: (string | number)[];
-    onChange?(value: (string | number)[]): void;
-    defaultValue?: (string | number)[];
-};
+import { FlattenBaseItem, Item, ItemId } from '../Items';
+import { CollapseState, PublicListContextType, SelectionState } from './contexts';
 export type EmptyState = {
     dataFiltered?: boolean;
     dataError?: boolean;
@@ -22,11 +17,11 @@ export type EmptyState = {
 };
 export type ListProps = WithSupportProps<{
     /** Основные элементы списка */
-    items: ItemProps[];
+    items: Item[];
     /** Элементы списка, закрепленные сверху */
-    pinTop?: ItemProps[];
+    pinTop?: Item[];
     /** Элементы списка, закрепленные снизу */
-    pinBottom?: ItemProps[];
+    pinBottom?: Item[];
     /**
      * Кастомизируемый элемент в конце списка
      * @type ReactNode;
@@ -45,7 +40,7 @@ export type ListProps = WithSupportProps<{
     onKeyDown?(e: KeyboardEvent<HTMLElement>): void;
     /** Флаг, отвещающий за состояние загрузки списка */
     loading?: boolean;
-} & SelectionState & ListContextType & ScrollProps & EmptyState>;
+} & SelectionState & PublicListContextType & ScrollProps & EmptyState>;
 export type DroplistProps = {
     /** Ссылка на элемент-триггер для дроплиста */
     triggerElemRef?: RefObject<HTMLElement>;
@@ -57,8 +52,8 @@ export type DroplistProps = {
     children: ReactNode | ((params: {
         onKeyDown?: (e: KeyboardEvent<HTMLElement>) => void;
     }) => ReactNode);
-} & Pick<DropdownProps, 'trigger' | 'placement' | 'widthStrategy' | 'open' | 'onOpenChange'> & Omit<ListProps, 'tabIndex' | 'onKeyDown'>;
-export type ListPrivateProps = ListProps & ListContextPrivateType & {
+} & Pick<DropdownProps, 'trigger' | 'placement' | 'widthStrategy' | 'open' | 'onOpenChange' | 'triggerClassName'> & Omit<ListProps, 'tabIndex' | 'onKeyDown'>;
+export type ListPrivateProps = Omit<ListProps, 'pinTop' | 'pinBottom' | 'items'> & {
     nested?: boolean;
     active?: boolean;
     tabIndex?: number;
@@ -66,5 +61,8 @@ export type ListPrivateProps = ListProps & ListContextPrivateType & {
     onBlur?(e: FocusEvent<HTMLElement>): void;
     onKeyDown?(e: KeyboardEvent<HTMLElement>): void;
     limitedScrollHeight?: boolean;
+    searchItem?: FlattenBaseItem;
+    pinTop?: ItemId[];
+    items: ItemId[];
+    pinBottom?: ItemId[];
 };
-export {};

package/dist/components/index.d.ts

@@ -1,4 +1,4 @@
 export * from './Lists';
-export type { AccordionItemProps, NextListItemProps, BaseItemProps, GroupItemProps, ItemProps } from './Items';
-export { isAccordionItemProps, isBaseItemProps, isGroupItemProps, isNextListItemProps } from './Items';
+export type { AccordionItemProps, NextListItemProps, BaseItemProps, GroupItemProps, ItemProps, GroupSelectItemProps, } from './Items';
+export { isAccordionItemProps, isBaseItemProps, isGroupItemProps, isNextListItemProps, isGroupSelectItem, } from './Items';
 export { useGroupItemSelection } from './Items/hooks';

package/dist/components/index.js

@@ -1,3 +1,3 @@
 export * from './Lists';
-export { isAccordionItemProps, isBaseItemProps, isGroupItemProps, isNextListItemProps } from './Items';
+export { isAccordionItemProps, isBaseItemProps, isGroupItemProps, isNextListItemProps, isGroupSelectItem, } from './Items';
 export { useGroupItemSelection } from './Items/hooks';

package/dist/helperComponents/ItemContent/ItemContent.d.ts

@@ -0,0 +1,15 @@
+import { TruncateStringProps } from '@snack-uikit/truncate-string';
+import { WithSupportProps } from '@snack-uikit/utils';
+export type ItemContentProps = WithSupportProps<{
+    option: string | number;
+    caption?: string;
+    description?: string;
+    truncate?: {
+        option?: number;
+        description?: number;
+        variant?: TruncateStringProps['variant'];
+    };
+    disabled?: boolean;
+    className?: string;
+}>;
+export declare function ItemContent({ truncate, caption, description, option, className, disabled, ...rest }: ItemContentProps): import("react/jsx-runtime").JSX.Element;

package/dist/helperComponents/ItemContent/ItemContent.js

@@ -0,0 +1,23 @@
+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 { TruncateString } from '@snack-uikit/truncate-string';
+import { extractSupportProps } from '@snack-uikit/utils';
+import { useNewListContext } from '../../components/Lists/contexts';
+import styles from './styles.module.css';
+export function ItemContent(_a) {
+    var _b, _c;
+    var { truncate, caption, description, option, className, disabled } = _a, rest = __rest(_a, ["truncate", "caption", "description", "option", "className", "disabled"]);
+    const { size = 's' } = useNewListContext();
+    return (_jsxs("div", Object.assign({ className: cn(styles.content, className) }, extractSupportProps(rest), { "data-size": size !== null && size !== void 0 ? size : 's', "data-disabled": disabled || undefined, children: [_jsxs("div", { className: styles.headline, children: [_jsx("span", { className: styles.label, children: _jsx(TruncateString, { variant: truncate === null || truncate === void 0 ? void 0 : truncate.variant, text: String(option), maxLines: (_b = truncate === null || truncate === void 0 ? void 0 : truncate.option) !== null && _b !== void 0 ? _b : 1, "data-test-id": 'list__base-item-option' }) }), caption && _jsx("span", { className: styles.caption, children: caption })] }), description && (_jsx("div", { className: styles.description, children: _jsx(TruncateString, { text: description, maxLines: (_c = truncate === null || truncate === void 0 ? void 0 : truncate.description) !== null && _c !== void 0 ? _c : 2, "data-test-id": 'list__base-item-description' }) }))] })));
+}

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

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

package/dist/helperComponents/ItemContent/index.js

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