@ozen-ui/kit 0.69.0 → 0.71.0

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

@@ -0,0 +1,57 @@
+import { useRerender } from '../../../../hooks/useRerender';
+import { useStoredValue } from '../../../../hooks/useStoredValue';
+import { extractElementsFromChildren, resolveChildren, } from '../../../../utils/react';
+import { getOptionIndex as getOptionIndexExternal, isDataListBaseItem, } from '../../utils';
+export var useDataListBaseOptionsStore = function (children) {
+    var rerender = useRerender();
+    var focused = useStoredValue(null);
+    var currentOption = useStoredValue(null);
+    var setFocused = function (option) {
+        focused.current = option;
+        rerender();
+    };
+    var setCurrent = function (option) {
+        currentOption.current = option;
+        rerender();
+    };
+    var registeredOptions = useStoredValue({});
+    var options = useStoredValue([]);
+    var availableOptions = useStoredValue([]);
+    options.current = [];
+    availableOptions.current = [];
+    extractElementsFromChildren(resolveChildren(children), isDataListBaseItem, function (element) {
+        var _a;
+        var option = {
+            id: element.props.listId,
+            disabled: (_a = element.props.disabled) !== null && _a !== void 0 ? _a : false,
+        };
+        options.current.push(option);
+        if (!option.disabled) {
+            availableOptions.current.push(option);
+        }
+    });
+    var getOptionIndex = function (id) {
+        return getOptionIndexExternal(options.current, id);
+    };
+    var registerOption = function (option) {
+        registeredOptions.current[option.id] = option;
+    };
+    var unregisterOption = function (option) {
+        delete registeredOptions.current[option.id];
+    };
+    var getOptionFullInfo = function (id) { var _a; return (_a = registeredOptions.current[id]) !== null && _a !== void 0 ? _a : null; };
+    var hasOptions = options.current.length > 0;
+    return {
+        availableOptions: availableOptions,
+        options: options,
+        focused: focused,
+        setFocused: setFocused,
+        currentOption: currentOption,
+        setCurrentOption: setCurrent,
+        getOptionIndex: getOptionIndex,
+        registerOption: registerOption,
+        unregisterOption: unregisterOption,
+        getOptionFullInfo: getOptionFullInfo,
+        hasOptions: hasOptions,
+    };
+};

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

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

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

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

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

@@ -0,0 +1,5 @@
+import type { DataListBaseOptionId } from '../../entities';
+export type DataListBaseScrollToOption = (optionId: DataListBaseOptionId) => void;
+export type DataListBaseScrollControl = {
+    scrollToOption: DataListBaseScrollToOption;
+};

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

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

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

@@ -0,0 +1,10 @@
+import type { RefObject } from 'react';
+import type { DataListBaseOptionsStore } from '../useDataListBaseOptionsStore';
+import type { DataListBaseValueControl } from '../useDataListBaseValue';
+import type { DataListBaseScrollControl } from './types';
+export declare const useDataListBaseScroll: ({ dataListRef, valueControl, active, optionsStore, }: {
+    dataListRef: RefObject<HTMLElement>;
+    valueControl: DataListBaseValueControl<boolean>;
+    active: boolean;
+    optionsStore: DataListBaseOptionsStore;
+}) => DataListBaseScrollControl;

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

@@ -0,0 +1,35 @@
+import { useEffect } from 'react';
+import { usePrevious } from '../../../../hooks/usePrevious';
+import { scrollContainerToElement } from '../../../../utils/scrollContainerToElement';
+export var useDataListBaseScroll = function (_a) {
+    var dataListRef = _a.dataListRef, valueControl = _a.valueControl, active = _a.active, optionsStore = _a.optionsStore;
+    var scrollToOption = function (optionId) {
+        var optionInfo = optionsStore.getOptionFullInfo(optionId);
+        if (!optionInfo) {
+            return;
+        }
+        var hasFocusedElement = !!optionsStore.focused.current;
+        scrollContainerToElement({
+            container: dataListRef.current,
+            element: optionInfo.ref.current,
+            behavior: hasFocusedElement ? 'smooth' : 'instant',
+        });
+    };
+    var previousCurrent = usePrevious(optionsStore.currentOption.current);
+    useEffect(function () {
+        var _a;
+        if (!active) {
+            return;
+        }
+        var firstCurrent = previousCurrent === null ? optionsStore.currentOption.current : null;
+        var selected = (_a = optionsStore.focused.current) !== null && _a !== void 0 ? _a : firstCurrent;
+        if (selected !== null) {
+            // Прокрутка списка
+            setTimeout(function () {
+                // Прокрутка списка
+                scrollToOption(selected);
+            });
+        }
+    }, [active, optionsStore.focused.current, valueControl.lastSelected]);
+    return { scrollToOption: scrollToOption };
+};

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

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

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

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

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

@@ -0,0 +1,10 @@
+import type { SyntheticEvent } from 'react';
+import type { DataListBaseOptionId, DataListBaseValue } from '../../entities';
+export type DataListBaseValueControlSetValue = (event: SyntheticEvent | KeyboardEvent | null, option: DataListBaseOptionId | null) => void;
+export type DataListBaseValueControl<Multiple extends boolean> = {
+    value: DataListBaseValue<Multiple> | undefined;
+    setValue: DataListBaseValueControlSetValue;
+    hasValue: boolean;
+    selectedOptionsLength: number;
+    lastSelected: DataListBaseOptionId | null;
+};

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

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

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

@@ -0,0 +1,10 @@
+import type { DataListBaseOnChange, DataListBaseValue } from '../../entities';
+import type { DataListBaseBaseProps } from '../../types';
+import type { DataListBaseValueControl } from './types';
+export declare const useDataListBaseValue: <Multiple extends boolean>({ value: valueProp, defaultValue, onChange: onChangeProp, inProps, multiple, }: {
+    value: DataListBaseValue<Multiple> | undefined;
+    defaultValue: DataListBaseValue<Multiple> | undefined;
+    onChange: DataListBaseOnChange<Multiple>;
+    inProps: DataListBaseBaseProps<Multiple>;
+    multiple: Multiple;
+}) => DataListBaseValueControl<Multiple>;

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

@@ -0,0 +1,65 @@
+import { __assign, __read, __spreadArray } from "tslib";
+import { useControlled } from '../../../../hooks/useControlled';
+import { isNotNil } from '../../../../utils/isNotNil';
+import { isMultipleInternalValue, isMultipleProps, isSingleProps, lastSelectedValue, } from '../../utils';
+export var useDataListBaseValue = function (_a) {
+    var _b;
+    var valueProp = _a.value, defaultValue = _a.defaultValue, onChangeProp = _a.onChange, inProps = _a.inProps, multiple = _a.multiple;
+    var _c = __read(useControlled({
+        value: valueProp === undefined ? undefined : valueProp,
+        defaultValue: defaultValue === undefined ? undefined : defaultValue,
+        name: 'DataListBase',
+        state: 'value',
+    }), 2), valueState = _c[0], setValueState = _c[1];
+    var onChange = function (event, option, changedOption) {
+        setValueState(option);
+        onChangeProp === null || onChangeProp === void 0 ? void 0 : onChangeProp(event, option, changedOption);
+    };
+    var setValue = function (event, optionId) {
+        var _a, _b;
+        if (!optionId) {
+            onChange(event, null, null);
+            return;
+        }
+        var params = __assign(__assign({}, inProps), { onChange: onChange });
+        if (isMultipleProps(params) &&
+            isMultipleInternalValue(valueState, multiple)) {
+            var value_1 = valueState !== null && valueState !== void 0 ? valueState : [];
+            var optionIsAlreadySelected_1 = valueState === null || valueState === void 0 ? void 0 : valueState.find(function (selectedOptionId) { return selectedOptionId === optionId; });
+            var result = (function () {
+                if (optionIsAlreadySelected_1) {
+                    var options_1 = [];
+                    value_1.forEach(function (selectedOption) {
+                        if (selectedOption !== optionId) {
+                            options_1.push(selectedOption);
+                        }
+                    });
+                    return options_1;
+                }
+                if (optionId) {
+                    return __spreadArray(__spreadArray([], __read(value_1), false), [optionId], false);
+                }
+                return __spreadArray([], __read(value_1), false);
+            })();
+            (_a = params.onChange) === null || _a === void 0 ? void 0 : _a.call(params, event, result, optionId);
+            return;
+        }
+        if (isSingleProps(params)) {
+            (_b = params.onChange) === null || _b === void 0 ? void 0 : _b.call(params, event, optionId, optionId);
+        }
+    };
+    var hasValue = isMultipleInternalValue(valueState, multiple)
+        ? !!valueState && valueState.length > 0
+        : isNotNil(valueState);
+    var selectedOptionsLength = isMultipleInternalValue(valueState, multiple)
+        ? (_b = valueState === null || valueState === void 0 ? void 0 : valueState.length) !== null && _b !== void 0 ? _b : 0
+        : 0;
+    var lastSelected = lastSelectedValue(valueState !== null && valueState !== void 0 ? valueState : null);
+    return {
+        value: valueState,
+        setValue: setValue,
+        hasValue: hasValue,
+        selectedOptionsLength: selectedOptionsLength,
+        lastSelected: lastSelected,
+    };
+};

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

@@ -0,0 +1,7 @@
+export * from './entities';
+export * from './hooks';
+export * from './utils';
+export * from './constants';
+export * from './DataListBase';
+export * from './DataListBaseContext';
+export * from './types';

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

@@ -0,0 +1,7 @@
+export * from './entities';
+export * from './hooks';
+export * from './utils';
+export * from './constants';
+export * from './DataListBase';
+export * from './DataListBaseContext';
+export * from './types';

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

@@ -0,0 +1,35 @@
+import type { ElementType, ReactElement, ReactNode } from 'react';
+import type { WithRequired } from '../../types/object';
+import type { WithDisplayName } from '../../types/react';
+import type { PolymorphicComponentPropsWithRef, PolymorphicComponentRef } from '../../utils/polymorphicComponentWithRef';
+import type { PopoverBaseProps } from '../Popover';
+import type { DATA_LIST_BASE_DEFAULT_TAG } from './constants';
+import type { DataListBaseOnChange, DataListBaseOptionId, DataListBaseValue } from './entities';
+import type { DataListBaseOptionsStore } from './hooks';
+export type DataListBaseItemProps = {
+    /** Id компонента */
+    listId: DataListBaseOptionId;
+    /** Если `true`, то отключает взаимодействие с компонентом  */
+    disabled?: boolean;
+};
+export type DataListBaseBaseProps<Multiple extends boolean = false> = WithRequired<PopoverBaseProps, 'anchorRef'> & {
+    /** Контент */
+    children: ReactNode;
+    /** Если `true` из списка можно выбрать несколько вариантов */
+    multiple?: Multiple;
+    /** Выбранная или выбранные опции */
+    value?: DataListBaseValue<Multiple>;
+    /** Выбранная опция по умолчанию */
+    defaultValue?: DataListBaseValue<Multiple>;
+    /** Функция обратного вызова для выбора значения */
+    onChange?: DataListBaseOnChange<Multiple>;
+    /** Если `true, отображает загрузку элемента */
+    loading?: boolean;
+    /** Если `true, отключает возможность выбора элементов */
+    disabled?: boolean;
+    /** Внешний store с опциями */
+    optionsStore?: DataListBaseOptionsStore;
+};
+export type DataListBaseRef = PolymorphicComponentRef<typeof DATA_LIST_BASE_DEFAULT_TAG>;
+export type DataListBaseProps<As extends ElementType = typeof DATA_LIST_BASE_DEFAULT_TAG, Multiple extends boolean = false> = PolymorphicComponentPropsWithRef<DataListBaseBaseProps<Multiple>, As>;
+export type DataListBaseComponent = WithDisplayName<(<As extends ElementType = typeof DATA_LIST_BASE_DEFAULT_TAG, Multiple extends boolean = false>(props: PolymorphicComponentPropsWithRef<DataListBaseBaseProps<Multiple>, As>) => ReactElement | null)>;

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

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

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

@@ -0,0 +1,2 @@
+import type { DataListBaseOption, DataListBaseOptionId } from '../entities';
+export declare const getOptionIndex: (options: DataListBaseOption[], id: DataListBaseOptionId) => number | null;

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

@@ -0,0 +1,7 @@
+export var getOptionIndex = function (options, id) {
+    var index = options.findIndex(function (option) { return option.id === id; });
+    if (index === -1) {
+        return null;
+    }
+    return index;
+};

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

@@ -0,0 +1,6 @@
+export * from './getOptionIndex';
+export * from './isDataListBaseItem';
+export * from './isMultiple';
+export * from './isSelectedValue';
+export * from './isSingle';
+export * from './lastSelectedValue';

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

@@ -0,0 +1,6 @@
+export * from './getOptionIndex';
+export * from './isDataListBaseItem';
+export * from './isMultiple';
+export * from './isSelectedValue';
+export * from './isSingle';
+export * from './lastSelectedValue';

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

@@ -0,0 +1,3 @@
+import type { ReactElement } from 'react';
+import type { DataListBaseItemProps } from '../types';
+export declare const isDataListBaseItem: (child: ReactElement) => child is ReactElement<DataListBaseItemProps>;

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

@@ -0,0 +1,5 @@
+import { isNodeWithDisplayName } from '../../../utils/react';
+import { DATA_LIST_BASE_ITEM_DISPLAY_NAME } from '../constants';
+export var isDataListBaseItem = function (child) {
+    return isNodeWithDisplayName(child, DATA_LIST_BASE_ITEM_DISPLAY_NAME);
+};

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

@@ -0,0 +1,4 @@
+import type { DataListBaseValue, DataListBaseMultipleValue } from '../entities';
+import type { DataListBaseBaseProps } from '../types';
+export declare const isMultipleProps: (props: DataListBaseBaseProps<boolean>) => props is DataListBaseBaseProps<true>;
+export declare const isMultipleInternalValue: (_: DataListBaseValue<boolean> | undefined, multiple: boolean) => _ is DataListBaseMultipleValue | undefined;

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

@@ -0,0 +1,2 @@
+export var isMultipleProps = function (props) { return !!props.multiple; };
+export var isMultipleInternalValue = function (_, multiple) { return multiple; };

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

@@ -0,0 +1,2 @@
+import type { DataListBaseValue, DataListBaseValueNonNullable } from '../entities';
+export declare const isSelectedValue: <Multiple extends boolean>(selected: DataListBaseValue<Multiple>) => selected is DataListBaseValueNonNullable<Multiple>;

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

@@ -0,0 +1 @@
+export var isSelectedValue = function (selected) { return selected !== null; };

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

@@ -0,0 +1,4 @@
+import type { DataListBaseSingleValue, DataListBaseValue } from '../entities';
+import type { DataListBaseBaseProps } from '../types';
+export declare const isSingleProps: (props: DataListBaseBaseProps<boolean>) => props is DataListBaseBaseProps<false>;
+export declare const isSingleInternalValue: (_: DataListBaseValue<boolean> | undefined, multiple: boolean) => _ is DataListBaseSingleValue | undefined;

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

@@ -0,0 +1,2 @@
+export var isSingleProps = function (props) { return !props.multiple; };
+export var isSingleInternalValue = function (_, multiple) { return !multiple; };

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

@@ -0,0 +1,2 @@
+import type { DataListBaseSingleValue, DataListBaseValue } from '../entities';
+export declare const lastSelectedValue: <Selected extends DataListBaseValue<boolean>>(selected: Selected) => DataListBaseSingleValue | null;

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

@@ -0,0 +1,12 @@
+import { isArray } from '../../../utils/array';
+import { isSelectedValue } from './isSelectedValue';
+export var lastSelectedValue = function (selected) {
+    var _a;
+    if (!isSelectedValue(selected)) {
+        return null;
+    }
+    if (isArray(selected)) {
+        return (_a = selected[selected.length - 1]) !== null && _a !== void 0 ? _a : null;
+    }
+    return selected;
+};

package/__inner__/esm/components/DataListCard/DataListCard.css

@@ -0,0 +1,48 @@
+.DataListCard {
+  --scroll-bar-size: 12px;
+}
+  .DataListCard::-webkit-scrollbar {
+    inline-size: var(--scroll-bar-size);
+  }
+  .DataListCard::-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;
+  }
+  .DataListCard::-webkit-scrollbar-thumb:hover,
+    .DataListCard::-webkit-scrollbar-thumb:active {
+      border: calc(var(--scroll-bar-size) / 4) solid transparent;
+      background-clip: padding-box;
+    }
+  .DataListCard::-webkit-scrollbar-thumb:hover {
+      background-color: var(--color-background-secondary-hover);
+    }
+  .DataListCard::-webkit-scrollbar-thumb:active {
+      background-color: var(--color-background-secondary-pressed);
+    }
+  .DataListCard::-webkit-scrollbar-corner {
+    background: transparent;
+  }
+  .DataListCard {
+  overflow: hidden auto;
+}
+
+  .DataListCard > * {
+    margin-block: var(--data-list-card-padding-block);
+    margin-inline: var(--data-list-card-padding-inline);
+  }
+
+  .DataListCard.DataListCard_size_xs, .DataListCard.DataListCard_size_s {
+    --data-list-card-padding-inline: var(--spacing-3xs);
+    --data-list-card-padding-block: var(--spacing-3xs);
+    gap: var(--spacing-4xs);
+  }
+
+  .DataListCard.DataListCard_size_m, .DataListCard.DataListCard_size_l {
+    --data-list-card-padding-inline: var(--spacing-2xs);
+    --data-list-card-padding-block: var(--spacing-2xs);
+    gap: var(--spacing-3xs);
+  }

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

@@ -0,0 +1,6 @@
+import './modules/DataListCardStatus/DataListCardStatus.css';
+import './modules/DataListCardItem/DataListCardItem.css';
+import './DataListCard.css';
+import type { DataListCardComponent } from './types';
+export declare const cnDataListCard: import("@bem-react/classname").ClassNameFormatter;
+export declare const DataListCard: DataListCardComponent;

package/__inner__/esm/components/DataListCard/DataListCard.js

@@ -0,0 +1,41 @@
+import { __assign, __rest } from "tslib";
+import './modules/DataListCardStatus/DataListCardStatus.css';
+import './modules/DataListCardItem/DataListCardItem.css';
+import './DataListCard.css';
+import React from 'react';
+import { useThemeProps } from '../../hooks/useThemeProps';
+import { cn } from '../../utils/classname';
+import { polymorphicComponentWithRef } from '../../utils/polymorphicComponentWithRef';
+import { DataListBase } from '../DataListBase';
+import { ListCardContext } from '../ListCard';
+import { DataListCardNoOption, DataListCardLoading } from './components';
+import { DATA_LIST_CARD_DEFAULT_LOADING, DATA_LIST_CARD_DEFAULT_SHADOW, DATA_LIST_CARD_DEFAULT_SHOW_NO_OPTIONS, DATA_LIST_CARD_DEFAULT_TAG, DATA_LIST_CARD_RADIUS_BY_SIZE, DATA_LIST_CARD_DEFAULT_BACKGROUND_COLOR_SCHEME, DATA_LIST_CARD_DEFAULT_CONTENT_TRAILING_RATIO, DATA_LIST_CARD_DEFAULT_INTERACTIVE, DATA_LIST_CARD_DEFAULT_SIZE, } from './constants';
+import { DataListCardContext } from './DataListCardContext';
+export var cnDataListCard = cn('DataListCard');
+var DataListCardRender = function (inProps, ref) {
+    var props = useThemeProps({
+        props: inProps,
+        name: 'DataListCard',
+    });
+    var className = props.className, children = props.children, _a = props.as, as = _a === void 0 ? DATA_LIST_CARD_DEFAULT_TAG : _a, active = props.active, _b = props.size, size = _b === void 0 ? DATA_LIST_CARD_DEFAULT_SIZE : _b, borderColorScheme = props.borderColorScheme, _c = props.backgroundColorScheme, backgroundColorScheme = _c === void 0 ? DATA_LIST_CARD_DEFAULT_BACKGROUND_COLOR_SCHEME : _c, _d = props.interactive, interactive = _d === void 0 ? DATA_LIST_CARD_DEFAULT_INTERACTIVE : _d, _e = props.contentTrailingRatio, contentTrailingRatio = _e === void 0 ? DATA_LIST_CARD_DEFAULT_CONTENT_TRAILING_RATIO : _e, _f = props.shadow, shadow = _f === void 0 ? DATA_LIST_CARD_DEFAULT_SHADOW : _f, radiusProp = props.radius, _g = props.loading, loading = _g === void 0 ? DATA_LIST_CARD_DEFAULT_LOADING : _g, loadingText = props.loadingText, _h = props.showNoOptions, showNoOptions = _h === void 0 ? DATA_LIST_CARD_DEFAULT_SHOW_NO_OPTIONS : _h, noOptionsText = props.noOptionsText, other = __rest(props, ["className", "children", "as", "active", "size", "borderColorScheme", "backgroundColorScheme", "interactive", "contentTrailingRatio", "shadow", "radius", "loading", "loadingText", "showNoOptions", "noOptionsText"]);
+    var radius = radiusProp !== null && radiusProp !== void 0 ? radiusProp : DATA_LIST_CARD_RADIUS_BY_SIZE[size];
+    return (React.createElement(ListCardContext.Provider, { value: {
+            variant: 'list',
+            size: size,
+            borderColorScheme: borderColorScheme,
+            backgroundColorScheme: backgroundColorScheme,
+            interactive: interactive,
+            contentTrailingRatio: contentTrailingRatio,
+        } },
+        React.createElement(DataListCardContext.Provider, { value: {
+                size: size,
+                showNoOptions: showNoOptions,
+                loading: loading,
+            } },
+            React.createElement(DataListBase, __assign({}, other, { as: as, active: active, className: cnDataListCard({ size: size }, [className]), shadow: shadow, radius: radius, ref: ref }),
+                children,
+                React.createElement(DataListCardLoading, { loadingText: loadingText }),
+                React.createElement(DataListCardNoOption, { noOptionsText: noOptionsText })))));
+};
+export var DataListCard = polymorphicComponentWithRef(DataListCardRender);
+DataListCard.displayName = 'DataListCard';

package/__inner__/esm/components/DataListCard/DataListCardContext.d.ts

@@ -0,0 +1,9 @@
+import type { ListCardItemSizeVariant } from '../ListCardItem';
+export type DataListCardContextValue = {
+    size: ListCardItemSizeVariant;
+    loading: boolean;
+    showNoOptions: boolean;
+};
+export declare const DataListCardContextDefaultValue: DataListCardContextValue;
+export declare const DataListCardContext: import("react").Context<DataListCardContextValue>;
+export declare const useDataListCardContext: () => DataListCardContextValue;

package/__inner__/esm/components/DataListCard/DataListCardContext.js

@@ -0,0 +1,14 @@
+import { useContext, createContext } from 'react';
+import { isDev } from '../../constants/environment';
+import { DATA_LIST_CARD_DEFAULT_LOADING, DATA_LIST_CARD_DEFAULT_SHOW_NO_OPTIONS, DATA_LIST_CARD_DEFAULT_SIZE, } from './constants';
+export var DataListCardContextDefaultValue = {
+    size: DATA_LIST_CARD_DEFAULT_SIZE,
+    loading: DATA_LIST_CARD_DEFAULT_LOADING,
+    showNoOptions: DATA_LIST_CARD_DEFAULT_SHOW_NO_OPTIONS,
+};
+export var DataListCardContext = createContext(DataListCardContextDefaultValue);
+export var useDataListCardContext = function () { return useContext(DataListCardContext); };
+// Именованный провайдер
+if (isDev) {
+    DataListCardContext.displayName = 'DataListCardContext';
+}

package/__inner__/esm/components/DataListCard/components/DataListCardLoading/DataListCardLoading.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import type { DataListCardLoadingProps } from './types';
+export declare const cnDataListCardLoading: import("@bem-react/classname").ClassNameFormatter;
+export declare const DataListCardLoading: ({ loadingText, className, ...other }: DataListCardLoadingProps) => boolean | Iterable<React.ReactNode> | React.JSX.Element | null | undefined;

package/__inner__/esm/components/DataListCard/components/DataListCardLoading/DataListCardLoading.js

@@ -0,0 +1,24 @@
+import { __assign, __rest } from "tslib";
+import React from 'react';
+import { cn } from '../../../../utils/classname';
+import { getIconSizeToFormElement } from '../../../../utils/getIconSizeToFormElement';
+import { isString } from '../../../../utils/isString';
+import { isNumber } from '../../../../utils/number';
+import { useDataListBaseContext } from '../../../DataListBase';
+import { Loader } from '../../../Loader';
+import { useDataListCardContext } from '../../DataListCardContext';
+import { DataListCardStatus, DataListCardStatusText } from '../../modules';
+export var cnDataListCardLoading = cn('DataListCardLoading');
+export var DataListCardLoading = function (_a) {
+    var loadingText = _a.loadingText, className = _a.className, other = __rest(_a, ["loadingText", "className"]);
+    var optionsStore = useDataListBaseContext().optionsStore;
+    var _b = useDataListCardContext(), loading = _b.loading, size = _b.size;
+    var show = !optionsStore.hasOptions && loading;
+    if (!show) {
+        return null;
+    }
+    var loaderSize = getIconSizeToFormElement(size);
+    return isString(loadingText) || isNumber(loadingText) ? (React.createElement(DataListCardStatus, __assign({}, other, { className: cnDataListCardLoading('', [className]) }),
+        React.createElement(Loader, { size: loaderSize }),
+        React.createElement(DataListCardStatusText, null, loadingText))) : (loadingText);
+};

package/__inner__/esm/components/DataListCard/components/DataListCardLoading/index.d.ts

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

package/__inner__/esm/components/DataListCard/components/DataListCardLoading/index.js

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

package/__inner__/esm/components/DataListCard/components/DataListCardLoading/types.d.ts

@@ -0,0 +1,5 @@
+import type { ReactNode } from 'react';
+import type { DataListCardStatusProps } from '../../modules';
+export type DataListCardLoadingProps = DataListCardStatusProps & {
+    loadingText: ReactNode;
+};

package/__inner__/esm/components/DataListCard/components/DataListCardLoading/types.js

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

package/__inner__/esm/components/DataListCard/components/DataListCardNoOption/DataListCardNoOption.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import type { DataListCardNoOptionProps } from './types';
+export declare const cnDataListCardNoOption: import("@bem-react/classname").ClassNameFormatter;
+export declare const DataListCardNoOption: ({ noOptionsText, className, ...other }: DataListCardNoOptionProps) => boolean | Iterable<React.ReactNode> | React.JSX.Element | null | undefined;

package/__inner__/esm/components/DataListCard/components/DataListCardNoOption/DataListCardNoOption.js

@@ -0,0 +1,21 @@
+import { __assign, __rest } from "tslib";
+import React from 'react';
+import { cn } from '../../../../utils/classname';
+import { isString } from '../../../../utils/isString';
+import { isNumber } from '../../../../utils/number';
+import { useDataListBaseContext } from '../../../DataListBase';
+import { useDataListCardContext } from '../../DataListCardContext';
+import { DataListCardStatusText } from '../../modules';
+import { DataListCardStatus } from '../../modules/DataListCardStatus';
+export var cnDataListCardNoOption = cn('DataListCardNoOption');
+export var DataListCardNoOption = function (_a) {
+    var noOptionsText = _a.noOptionsText, className = _a.className, other = __rest(_a, ["noOptionsText", "className"]);
+    var optionsStore = useDataListBaseContext().optionsStore;
+    var _b = useDataListCardContext(), showNoOptions = _b.showNoOptions, loading = _b.loading;
+    var show = !optionsStore.hasOptions && !loading && showNoOptions;
+    if (!show) {
+        return null;
+    }
+    return isString(noOptionsText) || isNumber(noOptionsText) ? (React.createElement(DataListCardStatus, __assign({}, other, { className: cnDataListCardNoOption('', [className]) }),
+        React.createElement(DataListCardStatusText, null, noOptionsText))) : (noOptionsText);
+};

package/__inner__/esm/components/DataListCard/components/DataListCardNoOption/index.d.ts

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

package/__inner__/esm/components/DataListCard/components/DataListCardNoOption/index.js

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

package/__inner__/esm/components/DataListCard/components/DataListCardNoOption/types.d.ts

@@ -0,0 +1,5 @@
+import type { ReactNode } from 'react';
+import type { DataListCardStatusProps } from '../../modules';
+export type DataListCardNoOptionProps = DataListCardStatusProps & {
+    noOptionsText: ReactNode;
+};

package/__inner__/esm/components/DataListCard/components/DataListCardNoOption/types.js

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

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

@@ -0,0 +1,2 @@
+export * from './DataListCardLoading';
+export * from './DataListCardNoOption';

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

@@ -0,0 +1,2 @@
+export * from './DataListCardLoading';
+export * from './DataListCardNoOption';

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

@@ -0,0 +1,15 @@
+import type { ListCardItemSizeVariant } from '../ListCardItem';
+import type { PaperRadiusVariant } from '../Paper';
+export declare const DATA_LIST_CARD_DEFAULT_TAG = "ul";
+export declare const DATA_LIST_CARD_DEFAULT_SIZE = "m";
+export declare const DATA_LIST_CARD_DEFAULT_BACKGROUND_COLOR_SCHEME: {
+    base: "background-main";
+    hover: "background-main-hover";
+    pressed: "background-main-pressed";
+};
+export declare const DATA_LIST_CARD_DEFAULT_INTERACTIVE = true;
+export declare const DATA_LIST_CARD_DEFAULT_CONTENT_TRAILING_RATIO = 0.85;
+export declare const DATA_LIST_CARD_DEFAULT_LOADING = false;
+export declare const DATA_LIST_CARD_DEFAULT_SHOW_NO_OPTIONS = true;
+export declare const DATA_LIST_CARD_DEFAULT_SHADOW = "l";
+export declare const DATA_LIST_CARD_RADIUS_BY_SIZE: Readonly<Record<ListCardItemSizeVariant, PaperRadiusVariant>>;