@ozen-ui/kit 0.16.1 → 0.17.0

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

@@ -1,16 +0,0 @@
-import type { SyntheticEvent, MouseEvent } from 'react';
-import type React from 'react';
-import type { FormElementSizeVariant } from '../../types/FormElementSizeVariant';
-export type DataListContextState = {
-    'data-list': string;
-    selected?: string | string[];
-    focused?: string | null;
-    highlighted?: string | null;
-    size: FormElementSizeVariant;
-    onClick?: (event: React.MouseEvent<HTMLElement>) => void;
-    onSelect?: (event: SyntheticEvent, option: string) => void;
-    onMouseMove?: (event: MouseEvent<HTMLElement>) => void;
-    onMouseLeave?: (event: MouseEvent<HTMLElement>) => void;
-};
-export declare const DataListContext: React.Context<DataListContextState>;
-export declare const useDataListContext: () => DataListContextState;

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

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

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

@@ -1,37 +0,0 @@
-import { __assign, __rest } from "tslib";
-import React, { forwardRef } from 'react';
-import { TickIcon } from '@ozen-ui/icons';
-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, onMouseMoveProp = _a.onMouseMove, onMouseLeaveProp = _a.onMouseLeave, onClickProp = _a.onClick, _b = _a.disabled, disabled = _b === void 0 ? DATA_LIST_OPTION_DEFAULT_DISABLED : _b, label = _a.children, className = _a.className, other = __rest(_a, ["value", "onMouseMove", "onMouseLeave", "onClick", "disabled", "children", "className"]);
-    var _c = useDataListContext(), size = _c.size, _d = _c.selected, selected = _d === void 0 ? [] : _d, focused = _c.focused, highlighted = _c.highlighted, onClick = _c.onClick, onMouseMove = _c.onMouseMove, onMouseLeave = _c.onMouseLeave, dataListName = _c["data-list"];
-    var iconSize = getIconSizeToFormElement(size);
-    var isSelected = Array.isArray(selected)
-        ? selected.includes(value)
-        : selected === value;
-    var handleClick = function (event) {
-        onClickProp === null || onClickProp === void 0 ? void 0 : onClickProp(event);
-        onClick === null || onClick === void 0 ? void 0 : onClick(event);
-    };
-    var handleMouseMove = function (event) {
-        onMouseMoveProp === null || onMouseMoveProp === void 0 ? void 0 : onMouseMoveProp(event);
-        onMouseMove === null || onMouseMove === void 0 ? void 0 : onMouseMove(event);
-    };
-    var handleMouseLeave = function (event) {
-        onMouseLeave === null || onMouseLeave === void 0 ? void 0 : onMouseLeave(event);
-        onMouseLeaveProp === null || onMouseLeaveProp === void 0 ? void 0 : onMouseLeaveProp(event);
-    };
-    return (React.createElement(ListItem, __assign({ role: "option", "data-list": dataListName, "data-list-value": value, "data-list-disabled": disabled, "aria-selected": isSelected, "aria-disabled": disabled, onClick: handleClick, onMouseMove: handleMouseMove, onMouseLeave: handleMouseLeave, className: cnDataList('Option', {
-            disabled: disabled,
-            highlighted: !disabled && highlighted === value,
-            focused: !disabled && focused === value,
-        }, [className]) }, other, { ref: ref }), typeof label === 'string' ? (React.createElement(React.Fragment, null,
-        React.createElement(ListItemText, { className: cnDataList('Text'), primary: label }),
-        React.createElement("div", { className: cnDataList('IconWrapper', { size: iconSize }) }, isSelected && (React.createElement(ListItemIcon, null,
-            React.createElement(TickIcon, { size: iconSize })))))) : (label)));
-});
-DataListOption.displayName = 'DataListOption';

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

@@ -1,23 +0,0 @@
-import type React from 'react';
-import type { MouseEvent, RefObject } from 'react';
-type UserListItemValue = string | null;
-export type UseListNavigationProps = {
-    name?: string;
-    ref?: RefObject<HTMLElement>;
-    selected?: UserListItemValue;
-    active?: boolean;
-    onSelect?: (e: React.SyntheticEvent | KeyboardEvent, selectedItem: string) => void;
-};
-export type UseListNavigationValue = {
-    'data-list': string;
-    focused?: UserListItemValue;
-    highlighted?: UserListItemValue;
-    ref?: RefObject<HTMLElement>;
-    onKeyDown: (event: KeyboardEvent) => void;
-    onMouseMove: (event: MouseEvent<HTMLElement>) => void;
-    onMouseLeave: (event: MouseEvent<HTMLElement>) => void;
-    onClick: (event: React.MouseEvent<HTMLElement>) => void;
-};
-/** Навигация по элементам списка без перехвата фокуса с элемента контроля */
-export declare function useDataListNavigation({ name: nameProp, selected, active, onSelect, }?: UseListNavigationProps): UseListNavigationValue;
-export {};

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

@@ -1,105 +0,0 @@
-import { __read } from "tslib";
-import { useEffect, useState, useCallback, useRef } from 'react';
-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';
-var getData = function (el, attr) {
-    if (!el) {
-        return null;
-    }
-    if ('currentTarget' in el)
-        return el.currentTarget.getAttribute("data-list-".concat(attr));
-    return el.getAttribute("data-list-".concat(attr));
-};
-/** Навигация по элементам списка без перехвата фокуса с элемента контроля */
-export function useDataListNavigation(_a) {
-    var _b = _a === void 0 ? {} : _a, nameProp = _b.name, selected = _b.selected, _c = _b.active, active = _c === void 0 ? false : _c, onSelect = _b.onSelect;
-    var name = useUniqueId(nameProp);
-    var ref = useRef(null);
-    var _d = __read(useState(null), 2), current = _d[0], setCurrent = _d[1];
-    var _e = __read(useState(), 2), focused = _e[0], serFocused = _e[1];
-    var _f = __read(useState(), 2), highlighted = _f[0], setHighlighted = _f[1];
-    var getItems = useCallback(function () {
-        var _a;
-        return Array.from(((_a = ref === null || ref === void 0 ? void 0 : ref.current) === null || _a === void 0 ? void 0 : _a.querySelectorAll("[data-list=\"".concat(name, "\"]"))) ||
-            []).filter(function (item) { return getData(item, 'disabled') !== 'true'; });
-    }, [name]);
-    var getCurrentItem = useCallback(function (value) {
-        return getItems().find(function (item) { return getData(item, 'value') === value; });
-    }, []);
-    var getItemsValues = useCallback(function () { return getItems().map(function (item) { return getData(item, 'value'); }); }, []);
-    var currentValue = current || selected;
-    useEffect(function () {
-        if (!active) {
-            return undefined;
-        }
-        var selectedItem = getCurrentItem(currentValue || '');
-        if (ref === null || ref === void 0 ? void 0 : ref.current) {
-            scrollContainerToElement({
-                container: ref.current,
-                element: selectedItem,
-            });
-            setCurrent(getData(selectedItem, 'value') || '');
-        }
-        return function () {
-            setCurrent(null);
-            serFocused(null);
-            setHighlighted(null);
-        };
-    }, [active]);
-    var onClick = function (event) {
-        if (getData(event, 'disabled') === 'true') {
-            return;
-        }
-        var value = getData(event, 'value');
-        serFocused(null);
-        setCurrent(value);
-        onSelect === null || onSelect === void 0 ? void 0 : onSelect(event, value || '');
-    };
-    var onKeyDown = function (event) {
-        if (isKey(event, 'Enter')) {
-            event.preventDefault();
-            var test_1 = currentValue || getItemsValues()[0] || '';
-            serFocused(test_1);
-            onSelect === null || onSelect === void 0 ? void 0 : onSelect(event, test_1);
-        }
-        if (!isKey(event, 'ArrowUp') && !isKey(event, 'ArrowDown')) {
-            return;
-        }
-        event.preventDefault();
-        var values = getItemsValues();
-        var currentIndex = currentValue ? values.indexOf(currentValue) : null;
-        var isArrowUp = isKey(event, 'ArrowUp');
-        var newIndex = isArrowUp
-            ? getPrevIndex(currentIndex !== null && currentIndex !== void 0 ? currentIndex : 0, values.length)
-            : getNextIndex(currentIndex !== null && currentIndex !== void 0 ? currentIndex : -1, values.length);
-        var newValue = values[newIndex] || '';
-        setCurrent(newValue);
-        serFocused(newValue);
-        if (ref === null || ref === void 0 ? void 0 : ref.current) {
-            scrollContainerToElement({
-                container: ref.current,
-                element: getCurrentItem(newValue || ''),
-            });
-        }
-    };
-    var onMouseMove = function (event) {
-        if (getData(event, 'disabled') !== 'true')
-            setHighlighted(getData(event, 'value'));
-    };
-    var onMouseLeave = function () {
-        setHighlighted(null);
-    };
-    return {
-        'data-list': name,
-        ref: ref,
-        focused: focused,
-        highlighted: highlighted,
-        onClick: onClick,
-        onKeyDown: onKeyDown,
-        onMouseMove: onMouseMove,
-        onMouseLeave: onMouseLeave,
-    };
-}

package/__inner__/esm/components/Select/components/SelectCheckIcon/SelectCheckIcon.css

@@ -1,13 +0,0 @@
-.SelectCheckIcon {
-  inline-size: var(--select-check-icon-size);
-  block-size: var(--select-check-icon-size);
-  display: flex;
-}
-
-  .SelectCheckIcon_size_s {
-      --select-check-icon-size: 16px;
-    }
-
-  .SelectCheckIcon_size_m {
-      --select-check-icon-size: 24px;
-    }

package/__inner__/esm/components/Select/components/SelectCheckIcon/SelectCheckIcon.js

@@ -1,9 +0,0 @@
-import './SelectCheckIcon.css';
-import React from 'react';
-import { TickIcon } from '@ozen-ui/icons';
-import { cn } from '../../../../utils/classname';
-var cnSelectCheckIcon = cn('SelectCheckIcon');
-export var SelectCheckIcon = function (_a) {
-    var size = _a.size, selected = _a.selected;
-    return (React.createElement("div", { className: cnSelectCheckIcon({ size: size }) }, selected && React.createElement(TickIcon, { size: size })));
-};

package/__inner__/esm/components/Select/components/SelectCheckIcon/index.d.ts

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

package/__inner__/esm/components/Select/components/SelectCheckIcon/index.js

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