@ozen-ui/kit 0.0.1

package/__inner__/esm/components/Container/Container.css

@@ -0,0 +1,174 @@
+/* xs >= 0px */
+/* s >= 640px */
+/* m >= 1024px */
+/* l >= 1280px */
+.Container {
+  inline-size: 100%;
+  box-sizing: border-box;
+}
+.Container_position_start {
+      margin-inline-start: 0;
+      margin-inline-end: auto;
+    }
+.Container_position_center {
+      margin-inline-start: auto;
+      margin-inline-end: auto;
+    }
+.Container_maxWidth_s {
+    max-inline-size: var(--breakpoint-s);
+  }
+.Container_maxWidth_m {
+    max-inline-size: var(--breakpoint-m);
+  }
+.Container_maxWidth_l {
+    max-inline-size: var(--breakpoint-l);
+  }
+.Container_maxWidth_fullWidth {
+    max-inline-size: 100%;
+  }
+.Container_gutters_xs {
+    padding: 0 var(--space-xs);
+  }
+.Container_gutters_s {
+    padding: 0 var(--space-s);
+  }
+.Container_gutters_m {
+    padding: 0 var(--space-m);
+  }
+.Container_gutters_l {
+    padding: 0 var(--space-l);
+  }
+.Container_gutters_xl {
+    padding: 0 var(--space-xl);
+  }
+.Container_gutters_2xl {
+    padding: 0 var(--space-2xl);
+  }
+@media (width >= 0) {
+      .Container_gutters_xs_xs {
+    padding: 0 var(--space-xs);
+  }
+      .Container_gutters_xs_s {
+    padding: 0 var(--space-s);
+  }
+      .Container_gutters_xs_m {
+    padding: 0 var(--space-m);
+  }
+      .Container_gutters_xs_l {
+    padding: 0 var(--space-l);
+  }
+      .Container_gutters_xs_xl {
+    padding: 0 var(--space-xl);
+  }
+      .Container_gutters_xs_2xl {
+    padding: 0 var(--space-2xl);
+  }
+      .Container_maxWidth_xs_s {
+    max-inline-size: var(--breakpoint-s);
+  }
+      .Container_maxWidth_xs_m {
+    max-inline-size: var(--breakpoint-m);
+  }
+      .Container_maxWidth_xs_l {
+    max-inline-size: var(--breakpoint-l);
+  }
+      .Container_maxWidth_xs_fullWidth {
+    max-inline-size: 100%;
+  }
+  }
+@media (width >= 640px) {
+      .Container_gutters_s_xs {
+    padding: 0 var(--space-xs);
+  }
+      .Container_gutters_s_s {
+    padding: 0 var(--space-s);
+  }
+      .Container_gutters_s_m {
+    padding: 0 var(--space-m);
+  }
+      .Container_gutters_s_l {
+    padding: 0 var(--space-l);
+  }
+      .Container_gutters_s_xl {
+    padding: 0 var(--space-xl);
+  }
+      .Container_gutters_s_2xl {
+    padding: 0 var(--space-2xl);
+  }
+      .Container_maxWidth_s_s {
+    max-inline-size: var(--breakpoint-s);
+  }
+      .Container_maxWidth_s_m {
+    max-inline-size: var(--breakpoint-m);
+  }
+      .Container_maxWidth_s_l {
+    max-inline-size: var(--breakpoint-l);
+  }
+      .Container_maxWidth_s_fullWidth {
+    max-inline-size: 100%;
+  }
+  }
+@media (width >=  1024px) {
+      .Container_gutters_m_xs {
+    padding: 0 var(--space-xs);
+  }
+      .Container_gutters_m_s {
+    padding: 0 var(--space-s);
+  }
+      .Container_gutters_m_m {
+    padding: 0 var(--space-m);
+  }
+      .Container_gutters_m_l {
+    padding: 0 var(--space-l);
+  }
+      .Container_gutters_m_xl {
+    padding: 0 var(--space-xl);
+  }
+      .Container_gutters_m_2xl {
+    padding: 0 var(--space-2xl);
+  }
+      .Container_maxWidth_m_s {
+    max-inline-size: var(--breakpoint-s);
+  }
+      .Container_maxWidth_m_m {
+    max-inline-size: var(--breakpoint-m);
+  }
+      .Container_maxWidth_m_l {
+    max-inline-size: var(--breakpoint-l);
+  }
+      .Container_maxWidth_m_fullWidth {
+    max-inline-size: 100%;
+  }
+  }
+@media (width >= 1280px) {
+      .Container_gutters_l_xs {
+    padding: 0 var(--space-xs);
+  }
+      .Container_gutters_l_s {
+    padding: 0 var(--space-s);
+  }
+      .Container_gutters_l_m {
+    padding: 0 var(--space-m);
+  }
+      .Container_gutters_l_l {
+    padding: 0 var(--space-l);
+  }
+      .Container_gutters_l_xl {
+    padding: 0 var(--space-xl);
+  }
+      .Container_gutters_l_2xl {
+    padding: 0 var(--space-2xl);
+  }
+      .Container_maxWidth_l_s {
+    max-inline-size: var(--breakpoint-s);
+  }
+      .Container_maxWidth_l_m {
+    max-inline-size: var(--breakpoint-m);
+  }
+      .Container_maxWidth_l_l {
+    max-inline-size: var(--breakpoint-l);
+  }
+      .Container_maxWidth_l_fullWidth {
+    max-inline-size: 100%;
+  }
+  }

package/__inner__/esm/components/Container/Container.d.ts

@@ -0,0 +1,26 @@
+import './Container.css';
+import type { ElementType, ReactNode } from 'react';
+import type { ResponsiveValue } from '../../types/ResponsiveValue';
+import { type PolymorphicComponentPropsWithoutRef } from '../../utils/polymorphicComponentWithRef';
+export declare const cnContainer: import("@bem-react/classname").ClassNameFormatter;
+declare const containerGuttersVariant: readonly ["xs", "s", "m", "l", "xl", "2xl"];
+export type ContainerGuttersVariant = (typeof containerGuttersVariant)[number];
+declare const containerMaxWidthVariant: readonly ["s", "m", "l", "fullWidth"];
+export type ContainerMaxWidthVariant = (typeof containerMaxWidthVariant)[number];
+declare const containerPositionVariant: readonly ["start", "center"];
+export type ContainerPositionVariant = (typeof containerPositionVariant)[number];
+export type ContainerBaseProps = {
+    /** Позиционирование контейнера */
+    position?: ContainerPositionVariant;
+    /** Максимальная ширина контейнера */
+    maxWidth?: ResponsiveValue<ContainerMaxWidthVariant>;
+    /** Боковые отступы (padding) */
+    gutters?: ResponsiveValue<ContainerGuttersVariant>;
+    /** Содержимое компонента */
+    children?: ReactNode;
+    /** Дополнительные CSS-классы */
+    className?: string;
+};
+export type ContainerProps<As extends ElementType = 'div'> = PolymorphicComponentPropsWithoutRef<ContainerBaseProps, As>;
+export declare const Container: import("../../utils/polymorphicComponentWithRef").PolymorphicComponentWithRef<ContainerBaseProps, "div">;
+export {};

package/__inner__/esm/components/Container/Container.js

@@ -0,0 +1,19 @@
+import { __assign, __rest } from "tslib";
+import './Container.css';
+import React from 'react';
+import { classnames } from '@bem-react/classnames';
+import { useThemeProps } from '../../hooks/useThemeProps';
+import { cn } from '../../utils/classname';
+import { polymorphicComponentWithRef, } from '../../utils/polymorphicComponentWithRef';
+import { useGenerateGuttersCn } from './useGutters';
+import { useGenerateMaxWidthCn } from './useMaxWidth';
+export var cnContainer = cn('Container');
+var containerGuttersVariant = ['xs', 's', 'm', 'l', 'xl', '2xl'];
+var containerMaxWidthVariant = ['s', 'm', 'l', 'fullWidth'];
+var containerPositionVariant = ['start', 'center'];
+export var Container = polymorphicComponentWithRef(function (inProps, ref) {
+    var props = useThemeProps({ props: inProps, name: 'Container' });
+    var children = props.children, className = props.className, maxWidth = props.maxWidth, position = props.position, gutters = props.gutters, _a = props.as, Tag = _a === void 0 ? 'div' : _a, other = __rest(props, ["children", "className", "maxWidth", "position", "gutters", "as"]);
+    return (React.createElement(Tag, __assign({ className: classnames(cnContainer({ position: position }), useGenerateMaxWidthCn(cnContainer, maxWidth), useGenerateGuttersCn(cnContainer, gutters), className) }, other, { ref: ref }), children));
+});
+Container.displayName = 'Container';

package/__inner__/esm/components/Container/index.d.ts

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

package/__inner__/esm/components/Container/index.js

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

package/__inner__/esm/components/Container/useGutters.d.ts

@@ -0,0 +1,3 @@
+import type { ClassNameFormatter } from '@bem-react/classname';
+import type { ContainerProps } from './Container';
+export declare const useGenerateGuttersCn: (cn: ClassNameFormatter, gutters: ContainerProps['gutters']) => string;

package/__inner__/esm/components/Container/useGutters.js

@@ -0,0 +1,17 @@
+import { __read } from "tslib";
+import { classnames } from '@bem-react/classnames';
+export var useGenerateGuttersCn = function (cn, gutters) {
+    if (typeof gutters === 'string') {
+        return cn({ gutters: gutters });
+    }
+    if (typeof gutters === 'object') {
+        return classnames(Object.entries(gutters)
+            .reduce(function (acc, _a) {
+            var _b;
+            var _c = __read(_a, 2), key = _c[0], value = _c[1];
+            return "".concat(acc, " ").concat(cn((_b = {}, _b["gutters_".concat(key)] = value, _b)));
+        }, '')
+            .trim());
+    }
+    return '';
+};

package/__inner__/esm/components/Container/useMaxWidth.d.ts

@@ -0,0 +1,3 @@
+import type { ClassNameFormatter } from '@bem-react/classname';
+import type { ContainerProps } from './Container';
+export declare const useGenerateMaxWidthCn: (cn: ClassNameFormatter, maxWidth: ContainerProps['maxWidth']) => string;

package/__inner__/esm/components/Container/useMaxWidth.js

@@ -0,0 +1,17 @@
+import { __read } from "tslib";
+import { classnames } from '@bem-react/classnames';
+export var useGenerateMaxWidthCn = function (cn, maxWidth) {
+    if (typeof maxWidth === 'string') {
+        return cn({ maxWidth: maxWidth });
+    }
+    if (typeof maxWidth === 'object') {
+        return classnames(Object.entries(maxWidth)
+            .reduce(function (acc, _a) {
+            var _b;
+            var _c = __read(_a, 2), key = _c[0], value = _c[1];
+            return "".concat(acc, " ").concat(cn((_b = {}, _b["maxWidth_".concat(key)] = value, _b)));
+        }, '')
+            .trim());
+    }
+    return '';
+};

package/__inner__/esm/components/DataList/DataList.css

@@ -0,0 +1,67 @@
+.DataList {
+  --scroll-bar-size: 12px;
+}
+  .DataList::-webkit-scrollbar {
+    inline-size: var(--scroll-bar-size);
+  }
+  .DataList::-webkit-scrollbar-thumb {
+    background-color: var(--color-background-secondary);
+    border-radius: calc(var(--scroll-bar-size) / 2);
+    border: calc(var(--scroll-bar-size) / 4) solid transparent;
+    background-clip: padding-box;
+    border-image: initial;
+    min-block-size: 24px;
+  }
+  .DataList::-webkit-scrollbar-thumb:hover,
+    .DataList::-webkit-scrollbar-thumb:active {
+      border: calc(var(--scroll-bar-size) / 4) solid transparent;
+      background-clip: padding-box;
+    }
+  .DataList::-webkit-scrollbar-thumb:hover {
+      background-color: var(--color-background-secondary-hover);
+    }
+  .DataList::-webkit-scrollbar-thumb:active {
+      background-color: var(--color-background-secondary-pressed);
+    }
+  .DataList::-webkit-scrollbar-corner {
+    background: transparent;
+  }
+  .DataList {
+  scroll-behavior: smooth;
+  overflow: hidden auto;
+  max-block-size: 40vb;
+}
+
+  .DataList-Option {
+    cursor: pointer;
+  }
+
+  .DataList-Option:not(.DataList-Option_disabled).DataList-Option_highlighted {
+      background-color: var(--color-background-main-hover);
+    }
+
+  .DataList-Option:not(.DataList-Option_disabled).DataList-Option_outlined {
+      box-shadow: inset var(--shadow-outline-focused);
+    }
+
+  .DataList-Option_disabled {
+      cursor: not-allowed;
+    }
+
+  .DataList-Option_disabled .ListItemText-TextPrimary {
+        color: var(--color-content-disabled);
+      }
+
+  .DataList-IconWrapper {
+    min-inline-size: var(--select-check-icon-size);
+    min-block-size: var(--select-check-icon-size);
+    display: flex;
+  }
+
+  .DataList-IconWrapper_size_s {
+        --select-check-icon-size: 16px;
+      }
+
+  .DataList-IconWrapper_size_m {
+        --select-check-icon-size: 24px;
+      }

package/__inner__/esm/components/DataList/DataList.d.ts

@@ -0,0 +1,32 @@
+import './DataList.css';
+import React from 'react';
+import type { ReactNode } from 'react';
+import { FormElementSizeVariant } from '../../types/FormElementSizeVariant';
+import { type ListProps } from '../List';
+import { type PopoverProps } from '../Popover';
+export declare const cnDataList: import("@bem-react/classname").ClassNameFormatter;
+export type DataListPayload = {
+    name?: string;
+    value: string;
+};
+export type DataListProps = Omit<PopoverProps, 'onSelect'> & {
+    /** Имя списка */
+    name?: string;
+    /** Признак по которому компонент будет представлен */
+    open?: boolean;
+    /** Содержимое компонента */
+    children: ReactNode;
+    /** Дополнительные CSS-классы */
+    className?: string;
+    /** Размер компонента */
+    size?: FormElementSizeVariant;
+    /** Выбранная опция */
+    selected?: string;
+    /** Выбранная опция по умолчанию */
+    defaultSelected?: string;
+    /** Функция обратного вызова для выбора значения */
+    onSelect?: (event: React.SyntheticEvent | KeyboardEvent, payload: DataListPayload) => void;
+    /** Свойства компонента List */
+    listProps?: ListProps;
+};
+export declare const DataList: React.ForwardRefExoticComponent<Omit<DataListProps, "ref"> & React.RefAttributes<HTMLDivElement>>;

package/__inner__/esm/components/DataList/DataList.js

@@ -0,0 +1,49 @@
+import { __assign, __read, __rest } from "tslib";
+import './DataList.css';
+import React, { forwardRef, useRef } from 'react';
+import { useControlled } from '../../hooks/useControlled';
+import { useEventListener } from '../../hooks/useEventListener';
+import { useMultiRef } from '../../hooks/useMultiRef';
+import { useThemeProps } from '../../hooks/useThemeProps';
+import { cn } from '../../utils/classname';
+import { isKey } from '../../utils/isKey';
+import { List } from '../List';
+import { Popover } from '../Popover';
+import { DATA_LIST_DEFAULT_SIZE, DATA_LIST_DEFAULT_OPEN } from './constants';
+import { DataListContext } from './DataListProvider';
+import { useDataListNavigation } from './useDataListNavigation';
+export var cnDataList = cn('DataList');
+export var DataList = forwardRef(function (inProps, ref) {
+    var _a = useThemeProps({ props: inProps, name: 'DataList' }), _b = _a.open, open = _b === void 0 ? DATA_LIST_DEFAULT_OPEN : _b, _c = _a.size, size = _c === void 0 ? DATA_LIST_DEFAULT_SIZE : _c, name = _a.name, children = _a.children, anchorRef = _a.anchorRef, onSelect = _a.onSelect, selectedProp = _a.selected, defaultSelected = _a.defaultSelected, listProps = _a.listProps, other = __rest(_a, ["open", "size", "name", "children", "anchorRef", "onSelect", "selected", "defaultSelected", "listProps"]);
+    var _d = __read(useControlled({
+        name: 'DataList',
+        defaultValue: defaultSelected,
+        value: selectedProp,
+        state: 'selected'
+    }), 2), selected = _d[0], setSelected = _d[1];
+    var listRef = useRef(null);
+    var handleSelect = function (event, option) {
+        setSelected(option);
+        onSelect === null || onSelect === void 0 ? void 0 : onSelect(event, { name: name, value: option });
+    };
+    var _e = useDataListNavigation({
+        name: name,
+        listRef: listRef
+    }), onKeyDown = _e.onKeyDown, currentItem = _e.currentItem, listNavigation = __rest(_e, ["onKeyDown", "currentItem"]);
+    useEventListener({
+        active: open,
+        eventName: 'keydown',
+        element: anchorRef,
+        handler: function (event) {
+            var _a;
+            onKeyDown(event);
+            if (isKey(event, 'Enter')) {
+                handleSelect(event, ((_a = currentItem === null || currentItem === void 0 ? void 0 : currentItem.dataset) === null || _a === void 0 ? void 0 : _a.value) || '');
+            }
+        }
+    });
+    return (React.createElement(Popover, __assign({ open: open, placement: "bottom-start", disableReturnFocus: true, disableEnforceFocus: true, equalAnchorWidth: true, offset: [0, 4], anchorRef: anchorRef }, other, { ref: ref }),
+        React.createElement(DataListContext.Provider, { value: __assign({ selected: selected, size: size, onSelect: handleSelect, currentItem: currentItem }, listNavigation) },
+            React.createElement(List, __assign({ as: "ul", size: size }, listProps, { ref: useMultiRef([listRef, listProps === null || listProps === void 0 ? void 0 : listProps.ref]), className: cnDataList('', [listProps === null || listProps === void 0 ? void 0 : listProps.className]) }), children))));
+});
+DataList.displayName = 'DataList';

package/__inner__/esm/components/DataList/DataListProvider.d.ts

@@ -0,0 +1,18 @@
+import React from 'react';
+import type { FormElementSizeVariant } from '../../types/FormElementSizeVariant';
+export type DataListSelectPayload = {
+    name?: string;
+    value: string;
+};
+export type DataListContextState = {
+    'data-list': string;
+    currentItem: HTMLElement | null;
+    selected?: string;
+    keyboardHighlight: boolean;
+    size: FormElementSizeVariant;
+    onSelect?: (event: React.SyntheticEvent, option: string) => void;
+    onMouseMove?: (event: React.MouseEvent<HTMLLIElement>) => void;
+    onMouseLeave?: (event: React.MouseEvent<HTMLLIElement>) => void;
+};
+export declare const DataListContext: React.Context<DataListContextState>;
+export declare const useDataListContext: () => DataListContextState;

package/__inner__/esm/components/DataList/DataListProvider.js

@@ -0,0 +1,9 @@
+import { createContext, useContext } from 'react';
+import { DATA_LIST_DEFAULT_SIZE } from './constants';
+export var DataListContext = createContext({
+    'data-list': '',
+    currentItem: null,
+    keyboardHighlight: false,
+    size: DATA_LIST_DEFAULT_SIZE
+});
+export var useDataListContext = function () { return useContext(DataListContext); };

package/__inner__/esm/components/DataList/components/DataListOption.d.ts

@@ -0,0 +1,30 @@
+import React from 'react';
+import type { KeyboardEventHandler, MouseEventHandler, HTMLAttributes } from 'react';
+export type DataListOptionProps = {
+    /** Если {true} отображает опцию заблокированной */
+    disabled?: boolean;
+    /** Значение, если оно отличается от содержимого опции */
+    value?: string;
+    /** Функция обратного вызова обработчик нажатий на клавиатуре */
+    onKeyDown?: KeyboardEventHandler<HTMLLIElement>;
+    /** Функция обратного вызова обработчик нажатий на клавиатуре */
+    onMouseMove?: MouseEventHandler<HTMLLIElement>;
+    /** Функция обратного вызова обработчик нажатий на клавиатуре */
+    onMouseLeave?: MouseEventHandler<HTMLLIElement>;
+    /** Содержимое компонента */
+    children: string;
+} & HTMLAttributes<HTMLLIElement>;
+export declare const DataListOption: React.ForwardRefExoticComponent<{
+    /** Если {true} отображает опцию заблокированной */
+    disabled?: boolean | undefined;
+    /** Значение, если оно отличается от содержимого опции */
+    value?: string | undefined;
+    /** Функция обратного вызова обработчик нажатий на клавиатуре */
+    onKeyDown?: React.KeyboardEventHandler<HTMLLIElement> | undefined;
+    /** Функция обратного вызова обработчик нажатий на клавиатуре */
+    onMouseMove?: React.MouseEventHandler<HTMLLIElement> | undefined;
+    /** Функция обратного вызова обработчик нажатий на клавиатуре */
+    onMouseLeave?: React.MouseEventHandler<HTMLLIElement> | undefined;
+    /** Содержимое компонента */
+    children: string;
+} & React.HTMLAttributes<HTMLLIElement> & React.RefAttributes<HTMLLIElement>>;

package/__inner__/esm/components/DataList/components/DataListOption.js

@@ -0,0 +1,44 @@
+import React, { useRef, forwardRef } from 'react';
+import { TickIcon } from '@ozen-ui/icons';
+import { useMultiRef } from '../../../hooks/useMultiRef';
+import { getIconSizeToFormElement } from '../../../utils/getIconSizeToFormElement';
+import { ListItem, ListItemText, ListItemIcon } from '../../List';
+import { DATA_LIST_OPTION_DEFAULT_DISABLED } from '../constants';
+import { cnDataList } from '../DataList';
+import { useDataListContext } from '../DataListProvider';
+export var DataListOption = forwardRef(function (_a, ref) {
+    var value = _a.value, onMouseDown = _a.onMouseDown, onMouseMoveProp = _a.onMouseMove, onMouseLeaveProp = _a.onMouseLeave, _b = _a.disabled, disabled = _b === void 0 ? DATA_LIST_OPTION_DEFAULT_DISABLED : _b, label = _a.children;
+    var optionRef = useRef(null);
+    var _c = useDataListContext(), size = _c.size, currentItem = _c.currentItem, _d = _c.selected, selected = _d === void 0 ? '' : _d, keyboardHighlight = _c.keyboardHighlight, onSelect = _c.onSelect, onMouseMove = _c.onMouseMove, onMouseLeave = _c.onMouseLeave, dataListName = _c["data-list"];
+    var iconSize = getIconSizeToFormElement(size);
+    var isSelected = (value || label) === selected;
+    var isHighlighted = !!currentItem && currentItem === optionRef.current;
+    var handleClick = function (event) {
+        var _a;
+        if (disabled) {
+            return;
+        }
+        onSelect === null || onSelect === void 0 ? void 0 : onSelect(event, ((_a = event.currentTarget.dataset) === null || _a === void 0 ? void 0 : _a.value) || '');
+    };
+    var handleMouseMove = function (event) {
+        onMouseMove === null || onMouseMove === void 0 ? void 0 : onMouseMove(event);
+        onMouseMoveProp === null || onMouseMoveProp === void 0 ? void 0 : onMouseMoveProp(event);
+    };
+    var handleMouseLeave = function (event) {
+        onMouseLeave === null || onMouseLeave === void 0 ? void 0 : onMouseLeave(event);
+        onMouseLeaveProp === null || onMouseLeaveProp === void 0 ? void 0 : onMouseLeaveProp(event);
+    };
+    var handleMouseDown = function (event) {
+        event.preventDefault();
+        onMouseDown === null || onMouseDown === void 0 ? void 0 : onMouseDown(event);
+    };
+    return (React.createElement(ListItem, { role: "option", ref: useMultiRef([optionRef, ref]), "data-list": dataListName, "data-value": value || label, "aria-selected": isSelected, "aria-disabled": disabled, onClick: handleClick, onMouseDown: handleMouseDown, onMouseMove: handleMouseMove, onMouseLeave: handleMouseLeave, className: cnDataList('Option', {
+            disabled: disabled,
+            highlighted: !disabled && isHighlighted && !keyboardHighlight,
+            outlined: !disabled && isHighlighted && keyboardHighlight
+        }) },
+        React.createElement(ListItemText, { className: cnDataList('Text', { disabled: disabled }), primary: label }),
+        React.createElement("div", { className: cnDataList('IconWrapper', { size: iconSize }) }, isSelected && (React.createElement(ListItemIcon, null,
+            React.createElement(TickIcon, { size: iconSize }))))));
+});
+DataListOption.displayName = 'DataListOption';

package/__inner__/esm/components/DataList/components/index.d.ts

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

package/__inner__/esm/components/DataList/components/index.js

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

package/__inner__/esm/components/DataList/constants.d.ts

@@ -0,0 +1,3 @@
+export declare const DATA_LIST_DEFAULT_SIZE = "m";
+export declare const DATA_LIST_DEFAULT_OPEN = false;
+export declare const DATA_LIST_OPTION_DEFAULT_DISABLED = false;

package/__inner__/esm/components/DataList/constants.js

@@ -0,0 +1,3 @@
+export var DATA_LIST_DEFAULT_SIZE = 'm';
+export var DATA_LIST_DEFAULT_OPEN = false;
+export var DATA_LIST_OPTION_DEFAULT_DISABLED = false;

package/__inner__/esm/components/DataList/index.d.ts

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

package/__inner__/esm/components/DataList/index.js

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

package/__inner__/esm/components/DataList/useDataListNavigation.d.ts

@@ -0,0 +1,14 @@
+import type { MouseEvent, RefObject } from 'react';
+export type UseListNavigationProps = {
+    name?: string;
+    listRef?: RefObject<HTMLUListElement>;
+};
+export type UseListNavigationValue = {
+    'data-list': string;
+    currentItem: HTMLLIElement | null;
+    keyboardHighlight: boolean;
+    onKeyDown: (event: KeyboardEvent) => void;
+    onMouseMove: (event: MouseEvent<HTMLLIElement>) => void;
+    onMouseLeave: (event: MouseEvent<HTMLLIElement>) => void;
+};
+export declare function useDataListNavigation({ name: nameProp, listRef, }?: UseListNavigationProps): UseListNavigationValue;

package/__inner__/esm/components/DataList/useDataListNavigation.js

@@ -0,0 +1,56 @@
+import { __read } from "tslib";
+import { useState } from 'react';
+import { useBoolean } from '../../hooks/useBoolean';
+import { useUniqueId } from '../../hooks/useUniqueId';
+import { getNextIndex } from '../../utils/getNextIndex';
+import { getPrevIndex } from '../../utils/getPrevIndex';
+import { isKey } from '../../utils/isKey';
+import { scrollContainerToElement } from '../../utils/scrollContainerToElement';
+export function useDataListNavigation(_a) {
+    var _b = _a === void 0 ? {} : _a, nameProp = _b.name, listRef = _b.listRef;
+    var name = useUniqueId(nameProp);
+    var _c = __read(useState(null), 2), currentItem = _c[0], setCurrentItem = _c[1];
+    var _d = __read(useBoolean(false), 2), keyboardHighlight = _d[0], _e = _d[1], showKeyboardHighlight = _e.on, hideKeyboardHighlight = _e.off;
+    var onKeyDown = function (event) {
+        var _a;
+        if (!isKey(event, 'ArrowUp') && !isKey(event, 'ArrowDown')) {
+            return;
+        }
+        event.preventDefault();
+        var items = Array.from(((_a = listRef === null || listRef === void 0 ? void 0 : listRef.current) === null || _a === void 0 ? void 0 : _a.querySelectorAll("[data-list=\"".concat(name, "\"]"))) || []).filter(function (item) { return item.getAttribute('aria-disabled') !== 'true'; });
+        var currentIndex = currentItem !== null ? items.indexOf(currentItem) : null;
+        var isArrowUp = isKey(event, 'ArrowUp');
+        var newIndex = isArrowUp
+            ? getPrevIndex(currentIndex !== null && currentIndex !== void 0 ? currentIndex : 0, items.length)
+            : getNextIndex(currentIndex !== null && currentIndex !== void 0 ? currentIndex : -1, items.length);
+        var item = items[newIndex];
+        setCurrentItem(item);
+        showKeyboardHighlight();
+        if (listRef === null || listRef === void 0 ? void 0 : listRef.current) {
+            scrollContainerToElement({
+                container: listRef.current,
+                element: item
+            });
+        }
+    };
+    var onMouseMove = function (event) {
+        if (currentItem !== event.currentTarget) {
+            setCurrentItem(event.currentTarget || null);
+        }
+        hideKeyboardHighlight();
+    };
+    var onMouseLeave = function () {
+        if (keyboardHighlight) {
+            return;
+        }
+        setCurrentItem(null);
+    };
+    return {
+        'data-list': name,
+        currentItem: currentItem,
+        keyboardHighlight: keyboardHighlight,
+        onKeyDown: onKeyDown,
+        onMouseMove: onMouseMove,
+        onMouseLeave: onMouseLeave
+    };
+}