@ozen-ui/kit 0.70.0 → 0.71.1

package/__inner__/esm/components/Avatar/types.d.ts

@@ -24,4 +24,6 @@ export type AvatarProps = ExtendableComponentPropsWithRef<{
     indicatorProps?: IndicatorProps;
     /** Содержимое компонента — иконка */
     children?: ReactNode;
+    /** Идентификатор компонента для тестов */
+    'data-testid'?: string;
 }, typeof AVATAR_DEFAULT_TAG>;

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

@@ -1,4 +1,4 @@
 import './Backdrop.css';
 import type { BackdropBaseProps } from './index';
 export declare const cnBackdrop: import("@bem-react/classname").ClassNameFormatter;
-export declare const Backdrop: import("../../utils/polymorphicComponentWithRef").PolymorphicComponentWithRef<BackdropBaseProps, "div">;
+export declare const Backdrop: import("../../utils/polymorphicComponentWithRef").PolymorphicComponentWithRef<BackdropBaseProps, "div", "as">;

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

@@ -1,4 +1,4 @@
 import './Badge.css';
 import type { BadgeBaseProps } from './index';
 export declare const cnBadge: import("@bem-react/classname").ClassNameFormatter;
-export declare const Badge: import("../../utils/polymorphicComponentWithRef").PolymorphicComponentWithRef<BadgeBaseProps, "div">;
+export declare const Badge: import("../../utils/polymorphicComponentWithRef").PolymorphicComponentWithRef<BadgeBaseProps, "div", "as">;

package/__inner__/esm/components/BottomSheetBase/modules/BottomSheetBaseBackdrop/BottomSheetBaseBackdrop.d.ts

@@ -1,4 +1,4 @@
 import './BottomSheetBaseBackdrop.css';
 import type { BottomSheetBaseBackdropBaseProps } from './types';
 export declare const cnBottomSheetBaseBackdrop: import("@bem-react/classname").ClassNameFormatter;
-export declare const BottomSheetBaseBackdrop: import("../../../../utils/polymorphicComponentWithRef").PolymorphicComponentWithRef<BottomSheetBaseBackdropBaseProps, "div">;
+export declare const BottomSheetBaseBackdrop: import("../../../../utils/polymorphicComponentWithRef").PolymorphicComponentWithRef<BottomSheetBaseBackdropBaseProps, "div", "as">;

package/__inner__/esm/components/Breadcrumbs/components/BreadcrumbItem.d.ts

@@ -1,3 +1,3 @@
 import type { BreadcrumbItemBaseProps } from './index';
 export declare const cnBreadcrumbItem: import("@bem-react/classname").ClassNameFormatter;
-export declare const BreadcrumbItem: import("../../../utils/polymorphicComponentWithRef").PolymorphicComponentWithRef<BreadcrumbItemBaseProps, "a">;
+export declare const BreadcrumbItem: import("../../../utils/polymorphicComponentWithRef").PolymorphicComponentWithRef<BreadcrumbItemBaseProps, "a", "as">;

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

@@ -48,5 +48,5 @@ export declare const cnButton: import("@bem-react/classname").ClassNameFormatter
 /**
  * @deprecated Компонент устарел. Для замены используйте компонент ButtonNext
  */
-export declare const Button: import("../../utils/polymorphicComponentWithRef").PolymorphicComponentWithRef<ButtonBaseProps, "button">;
+export declare const Button: import("../../utils/polymorphicComponentWithRef").PolymorphicComponentWithRef<ButtonBaseProps, "button", "as">;
 export {};

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

@@ -16,5 +16,5 @@ type ButtonBaseBaseProps = {
 };
 export type ButtonBaseProps<As extends ElementType = typeof BUTTON_BASE_DEFAULT_TAG> = PolymorphicComponentPropsWithoutRef<ButtonBaseBaseProps, As>;
 export declare const cnButtonBase: import("@bem-react/classname").ClassNameFormatter;
-export declare const ButtonBase: import("../../utils/polymorphicComponentWithRef").PolymorphicComponentWithRef<ButtonBaseBaseProps, "button">;
+export declare const ButtonBase: import("../../utils/polymorphicComponentWithRef").PolymorphicComponentWithRef<ButtonBaseBaseProps, "button", "as">;
 export {};

package/__inner__/esm/components/ButtonNext/Button.d.ts

@@ -1,4 +1,4 @@
 import './Button.css';
 import type { ButtonBaseProps } from './index';
 export declare const cnButton: import("@bem-react/classname").ClassNameFormatter;
-export declare const Button: import("../../utils/polymorphicComponentWithRef").PolymorphicComponentWithRef<ButtonBaseProps, "button">;
+export declare const Button: import("../../utils/polymorphicComponentWithRef").PolymorphicComponentWithRef<ButtonBaseProps, "button", "as">;

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

@@ -1,4 +1,4 @@
 import './Card.css';
 import type { CardBaseProps } from './index';
 export declare const cnCard: import("@bem-react/classname").ClassNameFormatter;
-export declare const Card: import("../../utils/polymorphicComponentWithRef").PolymorphicComponentWithRef<CardBaseProps, "div">;
+export declare const Card: import("../../utils/polymorphicComponentWithRef").PolymorphicComponentWithRef<CardBaseProps, "div", "as">;

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

@@ -4,4 +4,4 @@ export declare const cnCheckboxGroup: import("@bem-react/classname").ClassNameFo
 /**
  * @deprecated Компонент устарел. Для замены используйте компонент CheckboxGroupNext
  */
-export declare const CheckboxGroup: import("../../utils/polymorphicComponentWithRef").PolymorphicComponentWithRef<CheckboxGroupBaseProps, "div">;
+export declare const CheckboxGroup: import("../../utils/polymorphicComponentWithRef").PolymorphicComponentWithRef<CheckboxGroupBaseProps, "div", "as">;

package/__inner__/esm/components/CheckboxGroupNext/CheckboxGroup.d.ts

@@ -1,4 +1,4 @@
 import './CheckboxGroup.css';
 import type { CheckboxGroupBaseProps } from './types';
 export declare const cnCheckboxGroup: import("@bem-react/classname").ClassNameFormatter;
-export declare const CheckboxGroup: import("../../utils/polymorphicComponentWithRef").PolymorphicComponentWithRef<CheckboxGroupBaseProps, "div">;
+export declare const CheckboxGroup: import("../../utils/polymorphicComponentWithRef").PolymorphicComponentWithRef<CheckboxGroupBaseProps, "div", "as">;

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

@@ -1,4 +1,4 @@
 import './ChipGroup.css';
 import type { ChipGroupBaseProps } from './types';
 export declare const cnChipGroup: import("@bem-react/classname").ClassNameFormatter;
-export declare const ChipGroup: import("../../utils/polymorphicComponentWithRef").PolymorphicComponentWithRef<ChipGroupBaseProps, "div">;
+export declare const ChipGroup: import("../../utils/polymorphicComponentWithRef").PolymorphicComponentWithRef<ChipGroupBaseProps, "div", "as">;

package/__inner__/esm/components/ChipNext/Chip.d.ts

@@ -1,4 +1,4 @@
 import './Chip.css';
 import type { ChipBaseProps } from './index';
 export declare const cnChip: import("@bem-react/classname").ClassNameFormatter;
-export declare const Chip: import("../../utils/polymorphicComponentWithRef").PolymorphicComponentWithRef<ChipBaseProps, "button">;
+export declare const Chip: import("../../utils/polymorphicComponentWithRef").PolymorphicComponentWithRef<ChipBaseProps, "button", "as">;

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

@@ -22,5 +22,5 @@ export type ContainerBaseProps = {
     className?: string;
 };
 export type ContainerProps<As extends ElementType = 'div'> = PolymorphicComponentPropsWithoutRef<ContainerBaseProps, As>;
-export declare const Container: import("../../utils/polymorphicComponentWithRef").PolymorphicComponentWithRef<ContainerBaseProps, "div">;
+export declare const Container: import("../../utils/polymorphicComponentWithRef").PolymorphicComponentWithRef<ContainerBaseProps, "div", "as">;
 export {};

package/__inner__/esm/components/DataListBase/DataListBase.css

@@ -0,0 +1,70 @@
+.DataListBase {
+  --scroll-bar-size: 12px;
+}
+  .DataListBase::-webkit-scrollbar {
+    inline-size: var(--scroll-bar-size);
+  }
+  .DataListBase::-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;
+  }
+  .DataListBase::-webkit-scrollbar-thumb:hover,
+    .DataListBase::-webkit-scrollbar-thumb:active {
+      border: calc(var(--scroll-bar-size) / 4) solid transparent;
+      background-clip: padding-box;
+    }
+  .DataListBase::-webkit-scrollbar-thumb:hover {
+      background-color: var(--color-background-secondary-hover);
+    }
+  .DataListBase::-webkit-scrollbar-thumb:active {
+      background-color: var(--color-background-secondary-pressed);
+    }
+  .DataListBase::-webkit-scrollbar-corner {
+    background: transparent;
+  }
+  .DataListBase {
+  box-sizing: border-box;
+  overflow: hidden auto;
+  max-block-size: 40vh;
+  padding: 0;
+  margin: 0;
+}
+.DataListBase-animation-enter {
+    opacity: 0;
+    transform: translate(0, calc(var(--spacing-2xs) * -1));
+    pointer-events: none;
+  }
+.DataListBase-animation-enter-active {
+    opacity: 1;
+    transition:
+      opacity var(--transition-default),
+      transform var(--transition-default);
+    transform: translate(0);
+    pointer-events: none;
+  }
+.DataListBase-animation-enter-done {
+    opacity: 1;
+    transform: translate(0);
+  }
+.DataListBase-animation-exit {
+    opacity: 1;
+    transform: translate(0);
+    pointer-events: none;
+  }
+.DataListBase-animation-exit-active {
+    opacity: 0;
+    transition:
+      opacity var(--transition-default),
+      transform var(--transition-default);
+    transform: translate(0, calc(var(--spacing-2xs) * -1));
+    pointer-events: none;
+  }
+.DataListBase-animation-exit-done {
+    opacity: 0;
+    transform: translate(0, calc(var(--spacing-2xs) * -1));
+    pointer-events: none;
+  }

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

@@ -0,0 +1,4 @@
+import './DataListBase.css';
+import type { DataListBaseComponent } from './types';
+export declare const cnDataListBase: import("@bem-react/classname").ClassNameFormatter;
+export declare const DataListBase: DataListBaseComponent;

package/__inner__/esm/components/DataListBase/DataListBase.js

@@ -0,0 +1,69 @@
+import { __assign, __rest } from "tslib";
+import './DataListBase.css';
+import React, { useRef } from 'react';
+import { useMultiRef } from '../../hooks/useMultiRef';
+import { useThemeProps } from '../../hooks/useThemeProps';
+import { cn } from '../../utils/classname';
+import { polymorphicComponentWithRef } from '../../utils/polymorphicComponentWithRef';
+import { Popover } from '../Popover';
+import { DATA_LIST_BASE_DEFAULT_DISABLED, DATA_LIST_BASE_DEFAULT_MULTIPLE, DATA_LIST_BASE_DEFAULT_TAG, } from './constants';
+import { DataListBaseContext } from './DataListBaseContext';
+import { useDataListBaseEvents, useDataListBaseControls, useDataListBaseOptions, useDataListBaseOptionsStore, useDataListBaseScroll, useDataListBaseValue, } from './hooks';
+export var cnDataListBase = cn('DataListBase');
+var DataListBaseRender = function (inProps, ref) {
+    var props = useThemeProps({
+        props: inProps,
+        name: 'DataListBase',
+    });
+    var children = props.children, _a = props.as, as = _a === void 0 ? DATA_LIST_BASE_DEFAULT_TAG : _a, value = props.value, defaultValue = props.defaultValue, _b = props.multiple, multiple = _b === void 0 ? DATA_LIST_BASE_DEFAULT_MULTIPLE : _b, open = props.open, anchorRef = props.anchorRef, onMouseDown = props.onMouseDown, className = props.className, onChange = props.onChange, onClose = props.onClose, optionsStoreProp = props.optionsStore, _c = props.disabled, disabled = _c === void 0 ? DATA_LIST_BASE_DEFAULT_DISABLED : _c, other = __rest(props, ["children", "as", "value", "defaultValue", "multiple", "open", "anchorRef", "onMouseDown", "className", "onChange", "onClose", "optionsStore", "disabled"]);
+    var active = !!open;
+    var internalRef = useRef(null);
+    var internalOptionsStore = useDataListBaseOptionsStore(children);
+    var optionsStore = optionsStoreProp !== null && optionsStoreProp !== void 0 ? optionsStoreProp : internalOptionsStore;
+    var valueControl = useDataListBaseValue({
+        value: value,
+        defaultValue: defaultValue,
+        onChange: function (event, value, changedOption) {
+            onChange === null || onChange === void 0 ? void 0 : onChange(event, value, changedOption);
+        },
+        inProps: inProps,
+        multiple: multiple,
+    });
+    var controlsControl = useDataListBaseControls({
+        active: active,
+        valueControl: valueControl,
+        optionsStore: optionsStore,
+    });
+    useDataListBaseEvents({
+        container: anchorRef !== null && anchorRef !== void 0 ? anchorRef : internalRef,
+        onClose: onClose,
+        active: active,
+        controlsControl: controlsControl,
+    });
+    var optionsControl = useDataListBaseOptions({
+        optionsStore: optionsStore,
+        valueControl: valueControl,
+        multiple: multiple,
+    });
+    var scrollControl = useDataListBaseScroll({
+        dataListRef: internalRef,
+        active: active,
+        valueControl: valueControl,
+        optionsStore: optionsStore,
+    });
+    return (React.createElement(DataListBaseContext.Provider, { value: {
+            optionsStore: optionsStore,
+            valueControl: valueControl,
+            optionsControl: optionsControl,
+            multiple: multiple,
+            scrollControl: scrollControl,
+            active: active,
+            disabled: disabled,
+        } },
+        React.createElement(Popover, __assign({ disableReturnFocus: true, disableEnforceFocus: true, equalAnchorWidth: true, offset: [0, 4], strategy: "absolute", placement: "bottom-start" }, other, { onClose: onClose, transitionProps: { classNames: 'DataListBase-animation' }, className: cnDataListBase('', [className]), as: as, open: open, anchorRef: anchorRef, onMouseDown: function (event) {
+                event.preventDefault();
+                onMouseDown === null || onMouseDown === void 0 ? void 0 : onMouseDown(event);
+            }, ref: useMultiRef([internalRef, ref]) }), children)));
+};
+export var DataListBase = polymorphicComponentWithRef(DataListBaseRender);
+DataListBase.displayName = 'DataListBase';

package/__inner__/esm/components/DataListBase/DataListBaseContext.d.ts

@@ -0,0 +1,13 @@
+import type { DataListBaseOptionsControl, DataListBaseOptionsStore, DataListBaseScrollControl, DataListBaseValueControl } from './hooks';
+export type DataListBaseContextValue<Multiple extends boolean = boolean> = {
+    optionsStore: DataListBaseOptionsStore;
+    optionsControl: DataListBaseOptionsControl;
+    scrollControl: DataListBaseScrollControl;
+    valueControl: DataListBaseValueControl<Multiple>;
+    multiple: Multiple;
+    active: boolean;
+    disabled: boolean;
+};
+export declare const DataListBaseContextDefaultValue: DataListBaseContextValue;
+export declare const DataListBaseContext: import("react").Context<DataListBaseContextValue<boolean>>;
+export declare const useDataListBaseContext: <Multiple extends boolean = boolean>() => DataListBaseContextValue<Multiple>;

package/__inner__/esm/components/DataListBase/DataListBaseContext.js

@@ -0,0 +1,44 @@
+import { useContext, createContext } from 'react';
+import { isDev } from '../../constants/environment';
+export var DataListBaseContextDefaultValue = {
+    optionsStore: {
+        setFocused: function () { },
+        availableOptions: { current: [] },
+        options: {
+            current: [],
+        },
+        currentOption: { current: null },
+        focused: { current: null },
+        setCurrentOption: function () { },
+        getOptionFullInfo: function () { return null; },
+        getOptionIndex: function () { return null; },
+        unregisterOption: function () { },
+        registerOption: function () { },
+        hasOptions: false,
+    },
+    optionsControl: {
+        isFocused: function () { return false; },
+        isSelected: function () { return false; },
+    },
+    scrollControl: {
+        scrollToOption: function () { },
+    },
+    valueControl: {
+        value: null,
+        hasValue: false,
+        setValue: function () { },
+        selectedOptionsLength: 0,
+        lastSelected: null,
+    },
+    multiple: false,
+    active: false,
+    disabled: true,
+};
+export var DataListBaseContext = createContext(DataListBaseContextDefaultValue);
+export var useDataListBaseContext = function () {
+    return useContext(DataListBaseContext);
+};
+// Именованный провайдер
+if (isDev) {
+    DataListBaseContext.displayName = 'DataListBaseContext';
+}

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

@@ -0,0 +1,4 @@
+export declare const DATA_LIST_BASE_DEFAULT_TAG = "ul";
+export declare const DATA_LIST_BASE_DEFAULT_MULTIPLE = false;
+export declare const DATA_LIST_BASE_DEFAULT_DISABLED = false;
+export declare const DATA_LIST_BASE_ITEM_DISPLAY_NAME = "DataListBaseItem";

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

@@ -0,0 +1,4 @@
+export var DATA_LIST_BASE_DEFAULT_TAG = 'ul';
+export var DATA_LIST_BASE_DEFAULT_MULTIPLE = false;
+export var DATA_LIST_BASE_DEFAULT_DISABLED = false;
+export var DATA_LIST_BASE_ITEM_DISPLAY_NAME = 'DataListBaseItem';

package/__inner__/esm/components/DataListBase/entities/events/index.d.ts

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

package/__inner__/esm/components/DataListBase/entities/events/index.js

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

package/__inner__/esm/components/DataListBase/entities/events/onChange.d.ts

@@ -0,0 +1,3 @@
+import type { SyntheticEvent } from 'react';
+import type { DataListBaseSingleValue, DataListBaseValue } from '../value';
+export type DataListBaseOnChange<Multiple extends boolean> = (event: SyntheticEvent | KeyboardEvent | null, value: DataListBaseValue<Multiple>, changedOption: DataListBaseSingleValue | null) => void;

package/__inner__/esm/components/DataListBase/entities/events/onChange.js

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

package/__inner__/esm/components/DataListBase/entities/index.d.ts

@@ -0,0 +1,3 @@
+export * from './events';
+export * from './option';
+export * from './value';

package/__inner__/esm/components/DataListBase/entities/index.js

@@ -0,0 +1,3 @@
+export * from './events';
+export * from './option';
+export * from './value';

package/__inner__/esm/components/DataListBase/entities/option.d.ts

@@ -0,0 +1,10 @@
+import type { RefObject } from 'react';
+export type DataListBaseOptionId = string;
+export type DataListBaseOptionRef = HTMLElement;
+export type DataListBaseOption = {
+    id: DataListBaseOptionId;
+    disabled: boolean;
+};
+export type DataListBaseInternalOption = DataListBaseOption & {
+    ref: RefObject<DataListBaseOptionRef | null>;
+};

package/__inner__/esm/components/DataListBase/entities/option.js

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

package/__inner__/esm/components/DataListBase/entities/value.d.ts

@@ -0,0 +1,5 @@
+import type { DataListBaseOptionId } from './option';
+export type DataListBaseSingleValue = DataListBaseOptionId;
+export type DataListBaseMultipleValue = DataListBaseOptionId[];
+export type DataListBaseValueNonNullable<Multiple extends boolean> = Multiple extends true ? DataListBaseMultipleValue : DataListBaseSingleValue;
+export type DataListBaseValue<Multiple extends boolean> = DataListBaseValueNonNullable<Multiple> | null;

package/__inner__/esm/components/DataListBase/entities/value.js

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

package/__inner__/esm/components/DataListBase/hooks/index.d.ts

@@ -0,0 +1,7 @@
+export * from './useAsDataListBaseItem';
+export * from './useDataListBaseControls';
+export * from './useDataListBaseEvents';
+export * from './useDataListBaseOptions';
+export * from './useDataListBaseOptionsStore';
+export * from './useDataListBaseScroll';
+export * from './useDataListBaseValue';

package/__inner__/esm/components/DataListBase/hooks/index.js

@@ -0,0 +1,7 @@
+export * from './useAsDataListBaseItem';
+export * from './useDataListBaseControls';
+export * from './useDataListBaseEvents';
+export * from './useDataListBaseOptions';
+export * from './useDataListBaseOptionsStore';
+export * from './useDataListBaseScroll';
+export * from './useDataListBaseValue';

package/__inner__/esm/components/DataListBase/hooks/useAsDataListBaseItem/index.d.ts

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

package/__inner__/esm/components/DataListBase/hooks/useAsDataListBaseItem/index.js

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

package/__inner__/esm/components/DataListBase/hooks/useAsDataListBaseItem/useAsDataListBaseItem.d.ts

@@ -0,0 +1,13 @@
+import type { RefObject, MouseEvent } from 'react';
+import type { DataListBaseOptionId, DataListBaseOptionRef } from '../../entities';
+export declare const useAsDataListBaseItem: ({ optionId, ref, disabled: disabledProp, }: {
+    optionId: DataListBaseOptionId;
+    ref: RefObject<DataListBaseOptionRef>;
+    disabled?: boolean;
+}) => {
+    select: () => void;
+    selected: boolean;
+    focused: boolean;
+    onClick: (event: MouseEvent<HTMLElement>) => void;
+    disabled: boolean;
+};

package/__inner__/esm/components/DataListBase/hooks/useAsDataListBaseItem/useAsDataListBaseItem.js

@@ -0,0 +1,40 @@
+import { useEffect } from 'react';
+import { useDataListBaseContext } from '../../DataListBaseContext';
+export var useAsDataListBaseItem = function (_a) {
+    var optionId = _a.optionId, ref = _a.ref, _b = _a.disabled, disabledProp = _b === void 0 ? false : _b;
+    var _c = useDataListBaseContext(), optionsControl = _c.optionsControl, optionsStore = _c.optionsStore, valueControl = _c.valueControl, active = _c.active, globalDisabled = _c.disabled;
+    var disabled = disabledProp || globalDisabled;
+    var option = {
+        id: optionId,
+        disabled: disabled,
+        ref: ref,
+    };
+    var onClick = function (event) {
+        if (!active || disabled) {
+            return;
+        }
+        var newFocused = option.id === optionsStore.focused.current ? option.id : null;
+        optionsStore.setFocused(newFocused);
+        optionsStore.setCurrentOption(option.id);
+        valueControl.setValue(event, option.id);
+    };
+    optionsStore.registerOption(option);
+    useEffect(function () { return function () {
+        optionsStore.unregisterOption(option);
+    }; }, []);
+    var select = function () {
+        if (disabled) {
+            return;
+        }
+        valueControl.setValue(null, option.id);
+    };
+    var isSelected = optionsControl.isSelected(option);
+    var isFocused = optionsControl.isFocused(option);
+    return {
+        select: select,
+        selected: isSelected,
+        focused: isFocused,
+        onClick: onClick,
+        disabled: disabled,
+    };
+};

package/__inner__/esm/components/DataListBase/hooks/useDataListBaseControls/index.d.ts

@@ -0,0 +1,2 @@
+export * from './useDataListBaseControls';
+export * from './types';

package/__inner__/esm/components/DataListBase/hooks/useDataListBaseControls/index.js

@@ -0,0 +1,2 @@
+export * from './useDataListBaseControls';
+export * from './types';

package/__inner__/esm/components/DataListBase/hooks/useDataListBaseControls/types.d.ts

@@ -0,0 +1,4 @@
+export type DataListBaseControlsOnKeyDown = (event: KeyboardEvent) => void;
+export type DataListBaseControlsControl = {
+    onKeyDown: DataListBaseControlsOnKeyDown;
+};

package/__inner__/esm/components/DataListBase/hooks/useDataListBaseControls/types.js

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

package/__inner__/esm/components/DataListBase/hooks/useDataListBaseControls/useDataListBaseControls.d.ts

@@ -0,0 +1,8 @@
+import type { DataListBaseOptionsStore } from '../useDataListBaseOptionsStore';
+import type { DataListBaseValueControl } from '../useDataListBaseValue';
+import type { DataListBaseControlsControl } from './types';
+export declare const useDataListBaseControls: ({ active, valueControl, optionsStore, }: {
+    active: boolean;
+    valueControl: DataListBaseValueControl<boolean>;
+    optionsStore: DataListBaseOptionsStore;
+}) => DataListBaseControlsControl;

package/__inner__/esm/components/DataListBase/hooks/useDataListBaseControls/useDataListBaseControls.js

@@ -0,0 +1,75 @@
+import { useEffect } from 'react';
+import { getNextIndex } from '../../../../utils/getNextIndex';
+import { getPrevIndex } from '../../../../utils/getPrevIndex';
+import { isKey } from '../../../../utils/isKey';
+import { isKeys } from '../../../../utils/isKeys';
+import { lastSelectedValue, getOptionIndex } from '../../utils';
+export var useDataListBaseControls = function (_a) {
+    var active = _a.active, valueControl = _a.valueControl, optionsStore = _a.optionsStore;
+    var findOption = function (value) {
+        var _a, _b;
+        if (value === null) {
+            return null;
+        }
+        var lastId = lastSelectedValue(value !== null && value !== void 0 ? value : null);
+        return ((_b = (_a = optionsStore.options.current.find(function (option) { return option.id === lastId; })) === null || _a === void 0 ? void 0 : _a.id) !== null && _b !== void 0 ? _b : null);
+    };
+    useEffect(function () {
+        var _a, _b;
+        if (!active) {
+            return;
+        }
+        optionsStore.setFocused(findOption(optionsStore.focused.current));
+        optionsStore.setCurrentOption(valueControl.value
+            ? findOption(lastSelectedValue(valueControl.value))
+            : (_b = (_a = optionsStore.options.current[0]) === null || _a === void 0 ? void 0 : _a.id) !== null && _b !== void 0 ? _b : null);
+    }, [active]);
+    // Сброс
+    useEffect(function () {
+        if (!active) {
+            return undefined;
+        }
+        return function () {
+            optionsStore.setFocused(null);
+            optionsStore.setCurrentOption(null);
+        };
+    }, [active]);
+    var onKeyDown = function (event) {
+        var _a, _b, _c;
+        if (!active || !isKeys(event, ['Enter', 'ArrowUp', 'ArrowDown'])) {
+            return;
+        }
+        var currentOption = (_a = optionsStore.focused.current) !== null && _a !== void 0 ? _a : optionsStore.currentOption.current;
+        if (isKey(event, 'Enter')) {
+            // Не обрабатываем ввод в пустом списке
+            if (!optionsStore.options.current.length) {
+                return;
+            }
+            if (!currentOption) {
+                return;
+            }
+            var optionFullInfo = optionsStore.getOptionFullInfo(currentOption);
+            if (!optionFullInfo || optionFullInfo.disabled) {
+                return;
+            }
+            event.preventDefault();
+            optionsStore.setFocused(optionFullInfo.id);
+            optionsStore.setCurrentOption(optionFullInfo.id);
+            valueControl.setValue(event, optionFullInfo.id);
+        }
+        if (isKeys(event, ['ArrowUp', 'ArrowDown'])) {
+            event.preventDefault();
+            var availableOptions = optionsStore.availableOptions.current;
+            var currentIndex = currentOption
+                ? getOptionIndex(availableOptions, currentOption)
+                : null;
+            var isArrowUp = isKey(event, 'ArrowUp');
+            var newIndex = isArrowUp
+                ? getPrevIndex(currentIndex !== null && currentIndex !== void 0 ? currentIndex : 0, availableOptions.length)
+                : getNextIndex(currentIndex !== null && currentIndex !== void 0 ? currentIndex : -1, availableOptions.length);
+            var newItem = (_c = (_b = availableOptions[newIndex]) === null || _b === void 0 ? void 0 : _b.id) !== null && _c !== void 0 ? _c : null;
+            optionsStore.setFocused(newItem);
+        }
+    };
+    return { onKeyDown: onKeyDown };
+};

package/__inner__/esm/components/DataListBase/hooks/useDataListBaseEvents/index.d.ts

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

package/__inner__/esm/components/DataListBase/hooks/useDataListBaseEvents/index.js

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

package/__inner__/esm/components/DataListBase/hooks/useDataListBaseEvents/useDataListBaseEvents.d.ts

@@ -0,0 +1,8 @@
+import type { RefObject } from 'react';
+import type { DataListBaseControlsControl } from '../useDataListBaseControls';
+export declare const useDataListBaseEvents: ({ container, onClose, active, controlsControl, }: {
+    container: RefObject<HTMLElement>;
+    onClose: (() => void) | undefined;
+    active: boolean;
+    controlsControl: DataListBaseControlsControl;
+}) => void;

package/__inner__/esm/components/DataListBase/hooks/useDataListBaseEvents/useDataListBaseEvents.js

@@ -0,0 +1,25 @@
+import { useEventListener } from '../../../../hooks/useEventListener';
+import { isKey } from '../../../../utils/isKey';
+export var useDataListBaseEvents = function (_a) {
+    var container = _a.container, onClose = _a.onClose, active = _a.active, controlsControl = _a.controlsControl;
+    // Назначает элементу контроля событие управления списком с клавиатуры
+    useEventListener({
+        eventName: 'keydown',
+        element: container,
+        active: active,
+        handler: function (event) {
+            controlsControl.onKeyDown(event);
+        },
+    });
+    // Закрывает список по нажатию на клавишу {Tab}
+    useEventListener({
+        active: active,
+        eventName: 'keydown',
+        element: container,
+        handler: function (event) {
+            if (isKey(event, 'Tab')) {
+                onClose === null || onClose === void 0 ? void 0 : onClose();
+            }
+        },
+    });
+};

package/__inner__/esm/components/DataListBase/hooks/useDataListBaseOptions/index.d.ts

@@ -0,0 +1,2 @@
+export * from './useDataListBaseOptions';
+export * from './types';

package/__inner__/esm/components/DataListBase/hooks/useDataListBaseOptions/index.js

@@ -0,0 +1,2 @@
+export * from './useDataListBaseOptions';
+export * from './types';

package/__inner__/esm/components/DataListBase/hooks/useDataListBaseOptions/types.d.ts

@@ -0,0 +1,7 @@
+import type { DataListBaseInternalOption } from '../../entities';
+export type DataListBaseOptionsIsFocused = (option: DataListBaseInternalOption) => boolean;
+export type DataListBaseOptionsIsSelected = (option: DataListBaseInternalOption) => boolean;
+export type DataListBaseOptionsControl = {
+    isFocused: DataListBaseOptionsIsFocused;
+    isSelected: DataListBaseOptionsIsSelected;
+};

package/__inner__/esm/components/DataListBase/hooks/useDataListBaseOptions/types.js

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