@ozen-ui/kit 0.57.0 → 0.58.0

package/__inner__/esm/components/AutocompleteNext/components/AutocompleteDropdown/utils/useDataListNavigation.js

@@ -0,0 +1,67 @@
+import { __assign, __read } from "tslib";
+import { useEffect, useState, useCallback } from 'react';
+import { useMutableRef } from '../../../../../hooks/useMutableRef';
+import { getNextIndex } from '../../../../../utils/getNextIndex';
+import { getPrevIndex } from '../../../../../utils/getPrevIndex';
+import { isKey } from '../../../../../utils/isKey';
+import { isKeys } from '../../../../../utils/isKeys';
+/** Навигация по элементам списка без перехвата фокуса с элемента контроля */
+export function useDataListNavigation(_a) {
+    var selected = _a.selected, onSelect = _a.onSelect, _b = _a.active, active = _b === void 0 ? false : _b, itemsProps = _a.items;
+    var savedItems = useMutableRef(itemsProps);
+    var savedSelected = useMutableRef(selected);
+    var savedOnSelect = useMutableRef(onSelect);
+    var _c = __read(useState({}), 2), state = _c[0], setState = _c[1];
+    var findInItems = function (value) { var _a; return (_a = savedItems.current) === null || _a === void 0 ? void 0 : _a.find(function (item) { return item === value; }); };
+    useEffect(function () {
+        if (!active)
+            return;
+        setState(function (prevState) {
+            var _a, _b, _c;
+            return (__assign(__assign({}, prevState), { focused: (_a = findInItems(prevState.focused)) !== null && _a !== void 0 ? _a : null, current: (_b = findInItems(savedSelected.current)) !== null && _b !== void 0 ? _b : (_c = savedItems.current) === null || _c === void 0 ? void 0 : _c[0] }));
+        });
+    }, [itemsProps, active]);
+    // Сброс
+    useEffect(function () {
+        if (!active)
+            return undefined;
+        return function () {
+            setState({});
+        };
+    }, [active]);
+    var onClick = useCallback(function (event, item) {
+        var _a;
+        if (!active)
+            return;
+        var focused = item === state.focused ? item : null;
+        setState(__assign(__assign({}, state), { focused: focused, current: item }));
+        (_a = savedOnSelect.current) === null || _a === void 0 ? void 0 : _a.call(savedOnSelect, event, item);
+    }, [state.focused, active]);
+    var onKeyDown = useCallback(function (event) {
+        var _a, _b, _c, _d, _e, _f, _g;
+        if (!active || !isKeys(event, ['Enter', 'ArrowUp', 'ArrowDown']))
+            return;
+        var current = (_a = state.focused) !== null && _a !== void 0 ? _a : state.current;
+        if (isKey(event, 'Enter')) {
+            // Не обрабатываем ввод в пустом списке
+            if (!((_b = savedItems.current) === null || _b === void 0 ? void 0 : _b.length))
+                return;
+            event.preventDefault();
+            setState(__assign(__assign({}, state), { current: current, focused: current }));
+            (_c = savedOnSelect.current) === null || _c === void 0 ? void 0 : _c.call(savedOnSelect, event, current);
+        }
+        if (isKeys(event, ['ArrowUp', 'ArrowDown'])) {
+            event.preventDefault();
+            var currentIndex = typeof current !== 'undefined'
+                ? (_d = savedItems.current) === null || _d === void 0 ? void 0 : _d.indexOf(current)
+                : null;
+            var isArrowUp = isKey(event, 'ArrowUp');
+            var newIndex = isArrowUp
+                ? getPrevIndex(currentIndex !== null && currentIndex !== void 0 ? currentIndex : 0, ((_e = savedItems.current) === null || _e === void 0 ? void 0 : _e.length) || 0)
+                : getNextIndex(currentIndex !== null && currentIndex !== void 0 ? currentIndex : -1, ((_f = savedItems.current) === null || _f === void 0 ? void 0 : _f.length) || 0);
+            var newItem = (_g = savedItems.current) === null || _g === void 0 ? void 0 : _g[newIndex];
+            setState(__assign(__assign({}, state), { focused: newItem }));
+        }
+    }, [state.focused, state.current, active]);
+    return __assign(__assign({}, state), { onClick: onClick, onKeyDown: onKeyDown });
+}

package/__inner__/esm/components/AutocompleteNext/components/AutocompleteDropdown/utils/useScrollContainerToElement.d.ts

@@ -0,0 +1,3 @@
+import type { RefObject } from 'react';
+import type { ScrollContainerToElement } from '../../../../../utils/scrollContainerToElement';
+export declare function useScrollContainerToElement(container: RefObject<HTMLElement>, element: RefObject<HTMLElement>, behavior?: ScrollContainerToElement['behavior']): void;

package/__inner__/esm/components/AutocompleteNext/components/AutocompleteDropdown/utils/useScrollContainerToElement.js

@@ -0,0 +1,11 @@
+import { useEffect } from 'react';
+import { scrollContainerToElement } from '../../../../../utils/scrollContainerToElement';
+export function useScrollContainerToElement(container, element, behavior) {
+    useEffect(function () {
+        scrollContainerToElement({
+            container: container.current,
+            element: element.current,
+            behavior: behavior,
+        });
+    }, [container, element]);
+}

package/__inner__/esm/components/AutocompleteNext/components/AutocompleteInput/AutocompleteInput.d.ts

@@ -0,0 +1,2 @@
+import type { AutocompleteInputComponent } from './types';
+export declare const AutocompleteInput: AutocompleteInputComponent;

package/__inner__/esm/components/AutocompleteNext/components/AutocompleteInput/AutocompleteInput.js

@@ -0,0 +1,35 @@
+import { __assign, __rest } from "tslib";
+import React, { forwardRef } from 'react';
+import { isNotNil } from '../../../../utils/isNotNil';
+import { Input } from '../../../Input';
+import { cnAutocomplete } from '../../index';
+import { AutocompleteRenderRight } from '../AutocompleteRenderRight';
+import { AutocompleteInputMultiple } from './components';
+import { isNotMultipleParams, isMultipleParams } from './helpers';
+var AutocompleteInputRender = function (inProps, ref) {
+    var _a, _b;
+    var _c = inProps.size, size = _c === void 0 ? 'm' : _c, open = inProps.open, value = inProps.value, onOpen = inProps.onOpen, onClear = inProps.onClear, multiple = inProps.multiple, disabled = inProps.disabled, openText = inProps.openText, onRemoveTag = inProps.onRemoveTag, clearText = inProps.clearText, closeText = inProps.closeText, className = inProps.className, bodyProps = inProps.bodyProps, inputProps = inProps.inputProps, renderRight = inProps.renderRight, placeholder = inProps.placeholder, selectedOptions = inProps.selectedOptions, getOptionKey = inProps.getOptionKey, getOptionLabel = inProps.getOptionLabel, getOptionDisabled = inProps.getOptionDisabled, limitTags = inProps.limitTags, disableClearButton = inProps.disableClearButton, disableShowChevron = inProps.disableShowChevron, renderTag = inProps.renderTag, renderInputProp = inProps.renderInput, renderMoreTag = inProps.renderMoreTag, other = __rest(inProps, ["size", "open", "value", "onOpen", "onClear", "multiple", "disabled", "openText", "onRemoveTag", "clearText", "closeText", "className", "bodyProps", "inputProps", "renderRight", "placeholder", "selectedOptions", "getOptionKey", "getOptionLabel", "getOptionDisabled", "limitTags", "disableClearButton", "disableShowChevron", "renderTag", "renderInput", "renderMoreTag"]);
+    var hasValue = isMultipleParams(inProps)
+        ? !!((_a = inProps.selectedOptions) === null || _a === void 0 ? void 0 : _a.length)
+        : isNotNil(selectedOptions);
+    var selectedOptionsLength = isMultipleParams(inProps)
+        ? ((_b = inProps.selectedOptions) === null || _b === void 0 ? void 0 : _b.length) || 0
+        : 0;
+    var renderInputDefault = function (props, ref) { return (React.createElement(Input, __assign({}, props, { ref: ref }))); };
+    var renderInput = renderInputProp || renderInputDefault;
+    var renderComponent = function (_a, ref) {
+        var className = _a.className, other = __rest(_a, ["className"]);
+        if (isNotMultipleParams(inProps)) {
+            return (React.createElement("input", __assign({}, other, { ref: ref, className: cnAutocomplete('Input', { multiple: multiple }, [className]) })));
+        }
+        if (isMultipleParams(inProps)) {
+            var selectedOptions_1 = inProps.selectedOptions;
+            return (React.createElement(AutocompleteInputMultiple, __assign({ renderTag: renderTag, limitTags: limitTags, onRemoveTag: onRemoveTag, getOptionKey: getOptionKey, renderMoreTag: renderMoreTag, getOptionLabel: getOptionLabel, getOptionDisabled: getOptionDisabled, selectedOptions: selectedOptions_1, ref: ref }, other)));
+        }
+        return null;
+    };
+    return renderInput(__assign({ size: size, disabled: disabled, value: value || '', placeholder: placeholder, renderRight: (React.createElement(AutocompleteRenderRight, { open: open, size: size, onOpen: onOpen, onClear: onClear, hasValue: hasValue, openText: openText, disabled: disabled, clearText: clearText, closeText: closeText, renderRight: renderRight, disableShowChevron: disableShowChevron, disableClearButton: disableClearButton })), labelProps: {
+            shrink: !!selectedOptionsLength,
+        }, inputProps: __assign(__assign({ autoComplete: 'off' }, inputProps), { renderComponent: renderComponent }), bodyProps: __assign({ 'aria-expanded': open }, bodyProps), className: cnAutocomplete({ size: size, multiple: multiple, hasChevron: !disableShowChevron }, [className]) }, other), ref);
+};
+export var AutocompleteInput = forwardRef(AutocompleteInputRender);

package/__inner__/esm/components/AutocompleteNext/components/AutocompleteInput/components/AutocompleteInputMultiple.d.ts

@@ -0,0 +1,2 @@
+import type { AutocompleteInputMultipleComponent } from './types';
+export declare const AutocompleteInputMultiple: AutocompleteInputMultipleComponent;

package/__inner__/esm/components/AutocompleteNext/components/AutocompleteInput/components/AutocompleteInputMultiple.js

@@ -0,0 +1,109 @@
+import { __assign, __read, __rest } from "tslib";
+import React, { forwardRef, useState } from 'react';
+import { CrossSmallIcon } from '@ozen-ui/icons';
+import { useElementSize } from '../../../../../hooks/useElementSize';
+import { useIsomorphicEffect } from '../../../../../hooks/useIsomorphicEffect';
+import { isNumber } from '../../../../../utils/isNumber';
+import { Tag } from '../../../../TagNext';
+import { cnAutocomplete, } from '../../../index';
+import { calcElementSize, calcElementsSize, createMap, getAutocompleteSizeToTag, } from './helpers';
+var AutocompleteInputMultipleRender = function (inProps, ref) {
+    var _a = inProps.size, size = _a === void 0 ? 'm' : _a, value = inProps.value, placeholder = inProps.placeholder, selectedOptions = inProps.selectedOptions, onRemoveTag = inProps.onRemoveTag, renderTagProp = inProps.renderTag, renderMoreTagProp = inProps.renderMoreTag, getOptionKey = inProps.getOptionKey, getOptionLabel = inProps.getOptionLabel, getOptionDisabled = inProps.getOptionDisabled, limitTags = inProps.limitTags, other = __rest(inProps, ["size", "value", "placeholder", "selectedOptions", "onRemoveTag", "renderTag", "renderMoreTag", "getOptionKey", "getOptionLabel", "getOptionDisabled", "limitTags"]);
+    var selectedOptionsLength = (selectedOptions === null || selectedOptions === void 0 ? void 0 : selectedOptions.length) || 0;
+    var responsive = limitTags === 'responsive';
+    var hasLimitTags = isNumber(limitTags) && limitTags > 0;
+    var showMoreTag = !!selectedOptionsLength && (responsive || hasLimitTags);
+    var _b = __read(useState(), 2), visibleMap = _b[0], setVisibleMap = _b[1];
+    var omittedValues = selectedOptions === null || selectedOptions === void 0 ? void 0 : selectedOptions.filter(function (_, i) { return !(visibleMap === null || visibleMap === void 0 ? void 0 : visibleMap[i]); });
+    var renderMoreTagDefault = function (_a, ref) {
+        var props = _a.props;
+        return React.createElement(Tag, __assign({ color: "neutral" }, props, { ref: ref }));
+    };
+    var renderMoreTag = renderMoreTagProp || renderMoreTagDefault;
+    var renderTagDefault = function (props, ref) { return (React.createElement(Tag, __assign({ color: "neutral" }, props, { ref: ref }))); };
+    var renderTag = renderTagProp || renderTagDefault;
+    var _c = useElementSize(), parentRef = _c.ref, parentSize = _c.width;
+    var moreTagSize = (parentRef === null || parentRef === void 0 ? void 0 : parentRef.current)
+        ? calcElementSize(parentRef === null || parentRef === void 0 ? void 0 : parentRef.current.children[selectedOptionsLength])
+        : 0;
+    var _d = useElementSize(), helperInputRef = _d.ref, _e = _d.width, helperInputSize = _e === void 0 ? 20 : _e;
+    var getInputSize = function () {
+        var inputSize = helperInputSize + 20;
+        if (responsive &&
+            (visibleMap === null || visibleMap === void 0 ? void 0 : visibleMap.filter(function (item) { return !item; }).length) === selectedOptionsLength) {
+            return inputSize > parentSize - moreTagSize
+                ? parentSize - moreTagSize
+                : inputSize;
+        }
+        return inputSize > parentSize ? parentSize : inputSize;
+    };
+    var inputSize = getInputSize();
+    useIsomorphicEffect(function () {
+        if ((!responsive && !isNumber(limitTags)) || !parentSize)
+            return;
+        var optionsLength = selectedOptionsLength;
+        var parentSizeWithoutInput = parentSize - inputSize;
+        var moreIndex = optionsLength;
+        var map = createMap(optionsLength + 1, moreIndex);
+        for (var i = 0; i < optionsLength + 1; i += 1) {
+            var index = moreIndex - i;
+            if (index !== moreIndex) {
+                var elementsSize = calcElementsSize(parentRef.current.children, map);
+                var condition = responsive
+                    ? elementsSize > parentSizeWithoutInput
+                    : isNumber(limitTags) && limitTags <= index;
+                if (condition) {
+                    map[index] = false;
+                    map[moreIndex] = true;
+                }
+            }
+        }
+        setVisibleMap(map);
+    }, [
+        limitTags,
+        inputSize,
+        parentSize,
+        selectedOptions,
+        selectedOptionsLength,
+    ]);
+    return (React.createElement(React.Fragment, null,
+        React.createElement("div", { ref: parentRef, className: cnAutocomplete('Input', { responsive: responsive, multiple: true }) }, selectedOptions === null || selectedOptions === void 0 ? void 0 :
+            selectedOptions.map(function (option, index) {
+                var label = (getOptionLabel === null || getOptionLabel === void 0 ? void 0 : getOptionLabel(option)) || '';
+                var key = getOptionKey === null || getOptionKey === void 0 ? void 0 : getOptionKey(option);
+                var disabled = getOptionDisabled === null || getOptionDisabled === void 0 ? void 0 : getOptionDisabled(option);
+                return renderTag({
+                    key: key,
+                    label: label,
+                    size: getAutocompleteSizeToTag(size),
+                    className: cnAutocomplete('Tag', {
+                        hidden: (responsive || hasLimitTags) && !(visibleMap === null || visibleMap === void 0 ? void 0 : visibleMap[index]),
+                        disabled: disabled,
+                    }),
+                    iconRight: function (_a) {
+                        var size = _a.size;
+                        return (React.createElement("span", { "aria-hidden": "true", "data-testid": "clear-tag", className: cnAutocomplete('ClearTag'), onClick: function (e) {
+                                if (disabled)
+                                    return;
+                                e.preventDefault();
+                                onRemoveTag === null || onRemoveTag === void 0 ? void 0 : onRemoveTag(e, option);
+                            } },
+                            React.createElement(CrossSmallIcon, { size: size })));
+                    },
+                });
+            }),
+            showMoreTag &&
+                renderMoreTag({
+                    omittedValues: omittedValues,
+                    props: {
+                        label: "+".concat(visibleMap === null || visibleMap === void 0 ? void 0 : visibleMap.filter(function (item) { return !item; }).length),
+                        size: getAutocompleteSizeToTag(size),
+                        className: cnAutocomplete('Tag', {
+                            hidden: !(visibleMap === null || visibleMap === void 0 ? void 0 : visibleMap[selectedOptionsLength]),
+                        }),
+                    },
+                }),
+            React.createElement("input", __assign({}, other, { value: value, ref: ref, style: { width: inputSize }, placeholder: placeholder }))),
+        React.createElement("div", { className: cnAutocomplete('HelperInput'), ref: helperInputRef }, value || placeholder)));
+};
+export var AutocompleteInputMultiple = forwardRef(AutocompleteInputMultipleRender);

package/__inner__/esm/components/AutocompleteNext/components/AutocompleteInput/components/helpers.d.ts

@@ -0,0 +1,5 @@
+import type { AutocompletePropSize } from '../../../index';
+export declare const getAutocompleteSizeToTag: (size: AutocompletePropSize) => "s" | "m" | "l" | "2xs" | "xs";
+export declare function calcElementSize(el?: Element): number;
+export declare const calcElementsSize: (elements: Element[], map: boolean[]) => number;
+export declare const createMap: (length: number, moreIndex: number) => boolean[];

package/__inner__/esm/components/AutocompleteNext/components/AutocompleteInput/components/helpers.js

@@ -0,0 +1,29 @@
+import { getByMap } from '../../../../../utils/getByMap';
+var typeMap = {
+    '2xs': '2xs',
+    xs: '2xs',
+    s: '2xs',
+    m: 'xs',
+    l: 'xs',
+};
+export var getAutocompleteSizeToTag = function (size) {
+    return getByMap(typeMap, size);
+};
+export function calcElementSize(el) {
+    if (!el)
+        return 0;
+    var _a = getComputedStyle(el), marginRight = _a.marginRight, marginLeft = _a.marginLeft;
+    return (el.getBoundingClientRect().width +
+        parseInt(marginRight, 10) +
+        parseInt(marginLeft, 10));
+}
+export var calcElementsSize = function (elements, map) {
+    var sum = 0;
+    for (var index = 0; index < elements.length; index++) {
+        sum += map[index] ? calcElementSize(elements === null || elements === void 0 ? void 0 : elements[index]) : 0;
+    }
+    return sum;
+};
+export var createMap = function (length, moreIndex) {
+    return new Array(length).fill(0).map(function (_, index) { return index !== moreIndex; });
+};

package/__inner__/esm/components/AutocompleteNext/components/AutocompleteInput/components/index.d.ts

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

package/__inner__/esm/components/AutocompleteNext/components/AutocompleteInput/components/index.js

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

package/__inner__/esm/components/AutocompleteNext/components/AutocompleteInput/components/types.d.ts

@@ -0,0 +1,17 @@
+import type { ReactElement, Ref } from 'react';
+import type { InputProps } from '../../../../Input';
+import type { AutocompleteDefaultOption, AutocompletePropGetOptionDisabled, AutocompletePropGetOptionKey, AutocompletePropGetOptionLabel, AutocompletePropRenderMoreTag, AutocompletePropRenderTag, AutocompletePropValue } from '../../../index';
+import type { AutocompleteDropdownOnChange } from '../../index';
+export type AutocompleteInputMultipleRef = HTMLInputElement;
+export type AutocompleteInputMultipleProps<OPTION = AutocompleteDefaultOption> = Pick<InputProps, 'size' | 'value' | 'placeholder'> & {
+    getOptionLabel?: AutocompletePropGetOptionLabel<OPTION>;
+    getOptionKey?: AutocompletePropGetOptionKey<OPTION>;
+    getOptionDisabled?: AutocompletePropGetOptionDisabled<OPTION>;
+    onRemoveTag?: AutocompleteDropdownOnChange<OPTION>;
+    selectedOptions?: AutocompletePropValue<OPTION, true>;
+    renderTag?: AutocompletePropRenderTag;
+    renderMoreTag?: AutocompletePropRenderMoreTag<OPTION>;
+    limitTags?: 'responsive' | number;
+    ref?: Ref<AutocompleteInputMultipleRef>;
+};
+export type AutocompleteInputMultipleComponent = <OPTION = AutocompleteDefaultOption>(props: AutocompleteInputMultipleProps<OPTION>) => ReactElement | null;

package/__inner__/esm/components/AutocompleteNext/components/AutocompleteInput/components/types.js

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

package/__inner__/esm/components/AutocompleteNext/components/AutocompleteInput/helpers.d.ts

@@ -0,0 +1,3 @@
+import type { AutocompleteInputProps } from './types';
+export declare const isMultipleParams: <OPTION>(params: AutocompleteInputProps<OPTION, boolean>) => params is AutocompleteInputProps<OPTION, true>;
+export declare const isNotMultipleParams: <OPTION>(params: AutocompleteInputProps<OPTION, boolean>) => params is AutocompleteInputProps<OPTION, false>;

package/__inner__/esm/components/AutocompleteNext/components/AutocompleteInput/index.d.ts

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

package/__inner__/esm/components/AutocompleteNext/components/AutocompleteInput/index.js

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

package/__inner__/esm/components/AutocompleteNext/components/AutocompleteInput/types.d.ts

@@ -0,0 +1,26 @@
+import type { ReactElement, Ref } from 'react';
+import type { InputProps, InputRef } from '../../../Input';
+import type { AutocompleteDefaultOption, AutocompletePropGetOptionKey, AutocompletePropGetOptionLabel, AutocompletePropValue, AutocompletePropRenderInput, AutocompletePropRenderTag, AutocompletePropRenderMoreTag, AutocompletePropGetOptionDisabled } from '../../index';
+import type { AutocompleteDropdownOnChange } from '../AutocompleteDropdown';
+import type { AutocompleteRenderRightProps } from '../AutocompleteRenderRight';
+export type AutocompleteInputRef = InputRef;
+export type AutocompleteInputProps<OPTION = AutocompleteDefaultOption, MULTIPLE extends boolean = false> = Pick<InputProps, 'size' | 'value' | 'disabled' | 'required' | 'onChange' | 'fullWidth' | 'onKeyDown' | 'className' | 'bodyProps' | 'inputProps' | 'renderRight' | 'placeholder'> & Pick<AutocompleteRenderRightProps, 'onOpen' | 'onClear'> & {
+    open?: boolean;
+    openText?: string;
+    closeText?: string;
+    clearText?: string;
+    multiple?: MULTIPLE;
+    disableShowChevron?: boolean;
+    disableClearButton?: boolean;
+    ref?: Ref<AutocompleteInputRef>;
+    limitTags?: 'responsive' | number;
+    renderTag?: AutocompletePropRenderTag;
+    renderInput?: AutocompletePropRenderInput;
+    onRemoveTag?: AutocompleteDropdownOnChange<OPTION>;
+    getOptionKey?: AutocompletePropGetOptionKey<OPTION>;
+    renderMoreTag?: AutocompletePropRenderMoreTag<OPTION>;
+    getOptionLabel?: AutocompletePropGetOptionLabel<OPTION>;
+    getOptionDisabled?: AutocompletePropGetOptionDisabled<OPTION>;
+    selectedOptions?: AutocompletePropValue<OPTION, MULTIPLE>;
+};
+export type AutocompleteInputComponent = <OPTION = AutocompleteDefaultOption, MULTIPLE extends boolean = false>(props: AutocompleteInputProps<OPTION, MULTIPLE>) => ReactElement | null;

package/__inner__/esm/components/AutocompleteNext/components/AutocompleteInput/types.js

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

package/__inner__/esm/components/AutocompleteNext/components/AutocompleteRenderRight/AutocompleteRenderRight.d.ts

@@ -0,0 +1,8 @@
+import type { FC, MouseEvent } from 'react';
+import type { AutocompleteProps } from '../../index';
+export type AutocompleteRenderRightProps = {
+    hasValue: boolean;
+    onOpen: () => void;
+    onClear: (e: MouseEvent<HTMLElement>) => void;
+} & Pick<AutocompleteProps, 'size' | 'open' | 'disabled' | 'openText' | 'clearText' | 'closeText' | 'renderRight' | 'disableClearButton' | 'disableShowChevron'>;
+export declare const AutocompleteRenderRight: FC<AutocompleteRenderRightProps>;

package/__inner__/esm/components/AutocompleteNext/components/AutocompleteRenderRight/AutocompleteRenderRight.js

@@ -0,0 +1,24 @@
+import { __read } from "tslib";
+import React from 'react';
+import { ChevronDownIcon, ChevronUpIcon, CrossIcon } from '@ozen-ui/icons';
+import { useFieldControl } from '../../../FieldControl';
+import { FieldIcon } from '../../../FieldIcon';
+import { IconButton } from '../../../IconButtonNext';
+import { cnAutocomplete } from '../../index';
+export var AutocompleteRenderRight = function (_a) {
+    var open = _a.open, size = _a.size, onOpen = _a.onOpen, onClear = _a.onClear, openText = _a.openText, disabled = _a.disabled, hasValue = _a.hasValue, clearText = _a.clearText, closeText = _a.closeText, renderRight = _a.renderRight, disableClearButton = _a.disableClearButton, disableShowChevron = _a.disableShowChevron;
+    var _b = __read(useFieldControl(), 1), _c = _b[0], focused = _c.focused, hovered = _c.hovered;
+    var isVisibleClearButton = !!(hovered || open || focused) && hasValue;
+    return (React.createElement("div", { className: cnAutocomplete('RenderRight') },
+        !disableClearButton && (React.createElement(IconButton, { size: size, type: "button", tabIndex: -1, icon: CrossIcon, variant: "function", title: clearText, "aria-label": clearText, onClick: function (e) {
+                e.preventDefault();
+                onClear === null || onClear === void 0 ? void 0 : onClear(e);
+            }, className: cnAutocomplete('ClearButton', {
+                visibility: isVisibleClearButton,
+            }), compressed: true })),
+        React.createElement(FieldIcon, { icon: renderRight }),
+        !disableShowChevron && (React.createElement(IconButton, { size: size, type: "button", tabIndex: -1, variant: "ghost", disabled: disabled, title: open ? closeText : openText, "aria-label": open ? closeText : openText, icon: open ? ChevronUpIcon : ChevronDownIcon, onClick: function (e) {
+                e.preventDefault();
+                onOpen();
+            }, compressed: true }))));
+};

package/__inner__/esm/components/AutocompleteNext/components/AutocompleteRenderRight/index.d.ts

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

package/__inner__/esm/components/AutocompleteNext/components/AutocompleteRenderRight/index.js

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

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

@@ -0,0 +1,3 @@
+export * from './AutocompleteRenderRight';
+export * from './AutocompleteDropdown';
+export * from './AutocompleteInput';

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

@@ -0,0 +1,3 @@
+export * from './AutocompleteRenderRight';
+export * from './AutocompleteDropdown';
+export * from './AutocompleteInput';

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

@@ -0,0 +1,10 @@
+export declare const AUTOCOMPLETE_DEFAULT_DISABLED = false;
+export declare const AUTOCOMPLETE_DEFAULT_REQUIRED = false;
+export declare const AUTOCOMPLETE_DEFAULT_AUTOFOCUS = false;
+export declare const AUTOCOMPLETE_DEFAULT_FULLWIDTH = false;
+export declare const AUTOCOMPLETE_DEFAULT_ALLOW_CUSTOM_VALUE = false;
+export declare const AUTOCOMPLETE_DEFAULT_DISABLE_SHOW_CHEVRON = false;
+export declare const AUTOCOMPLETE_DEFAULT_DISABLE_SHOW_EMPTY_OPTIONS_LIST = false;
+export declare const AUTOCOMPLETE_DEFAULT_DISABLE_CLOSE_ON_SELECT = false;
+export declare const AUTOCOMPLETE_DEFAULT_DISABLE_CLEAR_BUTTON = false;
+export declare const AUTOCOMPLETE_DEFAULT_SIZE = "m";

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

@@ -0,0 +1,10 @@
+export var AUTOCOMPLETE_DEFAULT_DISABLED = false;
+export var AUTOCOMPLETE_DEFAULT_REQUIRED = false;
+export var AUTOCOMPLETE_DEFAULT_AUTOFOCUS = false;
+export var AUTOCOMPLETE_DEFAULT_FULLWIDTH = false;
+export var AUTOCOMPLETE_DEFAULT_ALLOW_CUSTOM_VALUE = false;
+export var AUTOCOMPLETE_DEFAULT_DISABLE_SHOW_CHEVRON = false;
+export var AUTOCOMPLETE_DEFAULT_DISABLE_SHOW_EMPTY_OPTIONS_LIST = false;
+export var AUTOCOMPLETE_DEFAULT_DISABLE_CLOSE_ON_SELECT = false;
+export var AUTOCOMPLETE_DEFAULT_DISABLE_CLEAR_BUTTON = false;
+export var AUTOCOMPLETE_DEFAULT_SIZE = 'm';

package/__inner__/esm/components/AutocompleteNext/helpers.d.ts

@@ -0,0 +1,152 @@
+/// <reference types="react" />
+import type { AutocompleteDefaultOption, AutocompletePropGetOptionDisabled, AutocompletePropGetOptionKey, AutocompletePropGetOptionLabel, AutocompleteProps } from './types';
+export declare const defaultGetOptionKey: AutocompletePropGetOptionKey<AutocompleteDefaultOption>;
+export declare const defaultGetOptionLabel: AutocompletePropGetOptionLabel<AutocompleteDefaultOption>;
+export declare const defaultGetOptionDisabled: AutocompletePropGetOptionDisabled<AutocompleteDefaultOption>;
+export declare function withDefaultGetters<OPTION = AutocompleteDefaultOption, MULTIPLE extends boolean = false>(props: AutocompleteProps<OPTION, MULTIPLE>): ({
+    multiple?: MULTIPLE | undefined;
+    limitTags?: number | "responsive" | undefined;
+    renderTag?: import("./types").AutocompletePropRenderTag | undefined;
+    renderMoreTag?: import("./types").AutocompletePropRenderMoreTag<OPTION> | undefined;
+    options: OPTION[];
+    size?: "s" | "m" | "l" | "2xs" | "xs" | undefined;
+    value?: import("./types").AutocompletePropValue<OPTION, MULTIPLE>;
+    defaultValue?: import("./types").AutocompletePropValue<OPTION, MULTIPLE>;
+    onChange?: import("./types").AutocompleteOnChange<OPTION, MULTIPLE> | undefined;
+    inputValue?: string | undefined;
+    onInputChange?: import("./types").AutocompleteOnInputChange | undefined;
+    renderInput?: import("./types").AutocompletePropRenderInput | undefined;
+    renderOption?: import("./types").AutocompletePropRenderOption<OPTION> | undefined;
+    getOptionLabel?: AutocompletePropGetOptionLabel<OPTION> | undefined;
+    getOptionKey?: AutocompletePropGetOptionKey<OPTION> | undefined;
+    getOptionDisabled?: AutocompletePropGetOptionDisabled<OPTION> | undefined;
+    disableCloseOnSelect?: boolean | undefined;
+    allowCustomValue?: boolean | undefined;
+    loading?: boolean | undefined;
+    noOptionsText?: import("react").ReactNode;
+    clearText?: string | undefined;
+    openText?: string | undefined;
+    closeText?: string | undefined;
+    loadingText?: import("react").ReactNode;
+    onClose?(): void;
+    onOpen?(): void;
+    disableClearButton?: boolean | undefined;
+    searchFunction?: import("./types").AutocompletePropSearchFunction<OPTION> | undefined;
+    disableShowEmptyOptionsList?: boolean | undefined;
+    disableShowChevron?: boolean | undefined;
+    popoverProps?: Partial<Omit<import("../Popover").PopoverProps, "className" | "children" | "open" | "onClose" | "anchorRef">> | undefined;
+    listProps?: Partial<Omit<import("../List").ListProps, "children">> | undefined;
+} & {
+    error?: boolean | undefined;
+    label?: string | undefined;
+    style?: import("react").CSSProperties | undefined;
+    className?: string | undefined;
+    onKeyDown?: import("react").KeyboardEventHandler<HTMLDivElement> | undefined;
+    autoFocus?: boolean | undefined;
+    disabled?: boolean | undefined;
+    placeholder?: string | undefined;
+    required?: boolean | undefined;
+    fullWidth?: boolean | undefined;
+    disableStroke?: boolean | undefined;
+    hint?: string | null | undefined;
+    renderLeft?: string | number | import("react").FC<import("@ozen-ui/icons").IconProps> | import("react").ReactElement<import("@ozen-ui/icons").IconProps, string | import("react").JSXElementConstructor<any>> | (() => import("react").ReactElement<import("@ozen-ui/icons").IconProps, string | import("react").JSXElementConstructor<any>>) | undefined;
+    renderRight?: string | number | import("react").FC<import("@ozen-ui/icons").IconProps> | import("react").ReactElement<import("@ozen-ui/icons").IconProps, string | import("react").JSXElementConstructor<any>> | (() => import("react").ReactElement<import("@ozen-ui/icons").IconProps, string | import("react").JSXElementConstructor<any>>) | undefined;
+    inputProps?: import("../FieldInput").FieldInputProps | undefined;
+    bodyProps?: (Omit<import("react").DetailedHTMLProps<import("react").LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>, "ref"> & {
+        ref?: ((instance: HTMLLabelElement | null) => void) | import("react").RefObject<HTMLLabelElement> | null | undefined;
+    }) | undefined;
+    hintProps?: Omit<import("../FieldHint").FieldHintProps, "children"> | undefined;
+} & {
+    open?: boolean | undefined;
+    defaultOpen?: undefined;
+} & (OPTION extends {
+    label: string;
+} ? Record<string, unknown> : {
+    getOptionLabel?: AutocompletePropGetOptionLabel<OPTION> | undefined;
+}) & (OPTION extends {
+    id: string | number;
+} ? Record<string, unknown> : {
+    getOptionKey?: AutocompletePropGetOptionKey<OPTION> | undefined;
+}) & (OPTION extends {
+    disabled: boolean | undefined;
+} ? Record<string, unknown> : {
+    getOptionDisabled?: AutocompletePropGetOptionDisabled<OPTION> | undefined;
+}) & {
+    getOptionLabel: AutocompletePropGetOptionLabel<AutocompleteDefaultOption> | AutocompletePropGetOptionLabel<OPTION>;
+    getOptionKey: AutocompletePropGetOptionKey<AutocompleteDefaultOption> | AutocompletePropGetOptionKey<OPTION>;
+    getOptionDisabled: AutocompletePropGetOptionDisabled<AutocompleteDefaultOption> | AutocompletePropGetOptionDisabled<OPTION>;
+}) | ({
+    multiple?: MULTIPLE | undefined;
+    limitTags?: number | "responsive" | undefined;
+    renderTag?: import("./types").AutocompletePropRenderTag | undefined;
+    renderMoreTag?: import("./types").AutocompletePropRenderMoreTag<OPTION> | undefined;
+    options: OPTION[];
+    size?: "s" | "m" | "l" | "2xs" | "xs" | undefined;
+    value?: import("./types").AutocompletePropValue<OPTION, MULTIPLE>;
+    defaultValue?: import("./types").AutocompletePropValue<OPTION, MULTIPLE>;
+    onChange?: import("./types").AutocompleteOnChange<OPTION, MULTIPLE> | undefined;
+    inputValue?: string | undefined;
+    onInputChange?: import("./types").AutocompleteOnInputChange | undefined;
+    renderInput?: import("./types").AutocompletePropRenderInput | undefined;
+    renderOption?: import("./types").AutocompletePropRenderOption<OPTION> | undefined;
+    getOptionLabel?: AutocompletePropGetOptionLabel<OPTION> | undefined;
+    getOptionKey?: AutocompletePropGetOptionKey<OPTION> | undefined;
+    getOptionDisabled?: AutocompletePropGetOptionDisabled<OPTION> | undefined;
+    disableCloseOnSelect?: boolean | undefined;
+    allowCustomValue?: boolean | undefined;
+    loading?: boolean | undefined;
+    noOptionsText?: import("react").ReactNode;
+    clearText?: string | undefined;
+    openText?: string | undefined;
+    closeText?: string | undefined;
+    loadingText?: import("react").ReactNode;
+    onClose?(): void;
+    onOpen?(): void;
+    disableClearButton?: boolean | undefined;
+    searchFunction?: import("./types").AutocompletePropSearchFunction<OPTION> | undefined;
+    disableShowEmptyOptionsList?: boolean | undefined;
+    disableShowChevron?: boolean | undefined;
+    popoverProps?: Partial<Omit<import("../Popover").PopoverProps, "className" | "children" | "open" | "onClose" | "anchorRef">> | undefined;
+    listProps?: Partial<Omit<import("../List").ListProps, "children">> | undefined;
+} & {
+    error?: boolean | undefined;
+    label?: string | undefined;
+    style?: import("react").CSSProperties | undefined;
+    className?: string | undefined;
+    onKeyDown?: import("react").KeyboardEventHandler<HTMLDivElement> | undefined;
+    autoFocus?: boolean | undefined;
+    disabled?: boolean | undefined;
+    placeholder?: string | undefined;
+    required?: boolean | undefined;
+    fullWidth?: boolean | undefined;
+    disableStroke?: boolean | undefined;
+    hint?: string | null | undefined;
+    renderLeft?: string | number | import("react").FC<import("@ozen-ui/icons").IconProps> | import("react").ReactElement<import("@ozen-ui/icons").IconProps, string | import("react").JSXElementConstructor<any>> | (() => import("react").ReactElement<import("@ozen-ui/icons").IconProps, string | import("react").JSXElementConstructor<any>>) | undefined;
+    renderRight?: string | number | import("react").FC<import("@ozen-ui/icons").IconProps> | import("react").ReactElement<import("@ozen-ui/icons").IconProps, string | import("react").JSXElementConstructor<any>> | (() => import("react").ReactElement<import("@ozen-ui/icons").IconProps, string | import("react").JSXElementConstructor<any>>) | undefined;
+    inputProps?: import("../FieldInput").FieldInputProps | undefined;
+    bodyProps?: (Omit<import("react").DetailedHTMLProps<import("react").LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>, "ref"> & {
+        ref?: ((instance: HTMLLabelElement | null) => void) | import("react").RefObject<HTMLLabelElement> | null | undefined;
+    }) | undefined;
+    hintProps?: Omit<import("../FieldHint").FieldHintProps, "children"> | undefined;
+} & {
+    open?: undefined;
+    defaultOpen?: boolean | undefined;
+} & (OPTION extends {
+    label: string;
+} ? Record<string, unknown> : {
+    getOptionLabel?: AutocompletePropGetOptionLabel<OPTION> | undefined;
+}) & (OPTION extends {
+    id: string | number;
+} ? Record<string, unknown> : {
+    getOptionKey?: AutocompletePropGetOptionKey<OPTION> | undefined;
+}) & (OPTION extends {
+    disabled: boolean | undefined;
+} ? Record<string, unknown> : {
+    getOptionDisabled?: AutocompletePropGetOptionDisabled<OPTION> | undefined;
+}) & {
+    getOptionLabel: AutocompletePropGetOptionLabel<AutocompleteDefaultOption> | AutocompletePropGetOptionLabel<OPTION>;
+    getOptionKey: AutocompletePropGetOptionKey<AutocompleteDefaultOption> | AutocompletePropGetOptionKey<OPTION>;
+    getOptionDisabled: AutocompletePropGetOptionDisabled<AutocompleteDefaultOption> | AutocompletePropGetOptionDisabled<OPTION>;
+});
+export declare const isMultipleParams: <OPTION>(params: AutocompleteProps<OPTION, boolean>) => params is AutocompleteProps<OPTION, true>;
+export declare const isNotMultipleParams: <OPTION>(params: AutocompleteProps<OPTION, boolean>) => params is AutocompleteProps<OPTION, false>;

package/__inner__/esm/components/AutocompleteNext/helpers.js

@@ -0,0 +1,9 @@
+import { __assign } from "tslib";
+export var defaultGetOptionKey = function (option) { var _a; return (_a = option.id) !== null && _a !== void 0 ? _a : option; };
+export var defaultGetOptionLabel = function (option) { var _a; return (_a = option.label) !== null && _a !== void 0 ? _a : option; };
+export var defaultGetOptionDisabled = function (option) { var _a; return (_a = option.disabled) !== null && _a !== void 0 ? _a : false; };
+export function withDefaultGetters(props) {
+    return __assign(__assign({}, props), { getOptionLabel: props.getOptionLabel || defaultGetOptionLabel, getOptionKey: props.getOptionKey || defaultGetOptionKey, getOptionDisabled: props.getOptionDisabled || defaultGetOptionDisabled });
+}
+export var isMultipleParams = function (params) { return !!params.multiple; };
+export var isNotMultipleParams = function (params) { return !params.multiple; };

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

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

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

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