@ozen-ui/kit 0.68.0 → 0.70.0

package/__inner__/cjs/components/AutocompleteBase/modules/AutocompleteBaseDropdown/AutocompleteBaseDropdown.js

@@ -0,0 +1,37 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AutocompleteBaseDropdown = void 0;
+var tslib_1 = require("tslib");
+var react_1 = tslib_1.__importStar(require("react"));
+var useCreateResizeObserver_1 = require("../../../../hooks/useCreateResizeObserver");
+var useMultiRef_1 = require("../../../../hooks/useMultiRef");
+var useStoredValue_1 = require("../../../../hooks/useStoredValue");
+var classname_1 = require("../../../../utils/classname");
+var getPaperSizeToFormElement_1 = require("../../../../utils/getPaperSizeToFormElement");
+var polymorphicComponentWithRef_1 = require("../../../../utils/polymorphicComponentWithRef");
+var Paper_1 = require("../../../Paper");
+var Popover_1 = require("../../../Popover");
+var AutocompleteBaseContext_1 = require("../../AutocompleteBaseContext");
+var cnAutocompleteBaseDropdown = (0, classname_1.cn)('AutocompleteBaseDropdown');
+exports.AutocompleteBaseDropdown = (0, polymorphicComponentWithRef_1.polymorphicComponentWithRef)(function (_a, ref) {
+    var children = _a.children, _b = _a.strategy, strategy = _b === void 0 ? 'absolute' : _b, _c = _a.offset, offset = _c === void 0 ? [0, 4] : _c, _d = _a.placement, placement = _d === void 0 ? 'bottom-start' : _d, _e = _a.as, as = _e === void 0 ? Paper_1.Paper : _e, className = _a.className, onExited = _a.onExited, popoverProps = tslib_1.__rest(_a, ["children", "strategy", "offset", "placement", "as", "className", "onExited"]);
+    var _f = (0, AutocompleteBaseContext_1.useAutocompleteBaseContext)(), size = _f.size, dropdownControl = _f.dropdownControl, searchControl = _f.searchControl, anchorRef = _f.anchorRef, inputRef = _f.inputRef;
+    var radius = (0, getPaperSizeToFormElement_1.getPaperSizeToFormElement)(size);
+    var updateStored = (0, useStoredValue_1.useStoredValue)(null);
+    var resizeObserver = (0, useCreateResizeObserver_1.useCreateResizeObserver)(function () {
+        var _a;
+        (_a = updateStored.current) === null || _a === void 0 ? void 0 : _a.call(updateStored);
+    });
+    (0, react_1.useEffect)(function () {
+        var input = inputRef.current;
+        if (input) {
+            resizeObserver === null || resizeObserver === void 0 ? void 0 : resizeObserver.observe(inputRef.current);
+        }
+    }, [inputRef]);
+    return (react_1.default.createElement(Popover_1.Popover, tslib_1.__assign({ offset: offset, strategy: strategy, placement: placement, setUpdate: function (update) {
+            updateStored.current = update;
+        }, as: as, transitionProps: { classNames: 'AutocompleteBaseDropdown-animation' }, className: cnAutocompleteBaseDropdown('', [className]), equalAnchorWidth: true, disableReturnFocus: true, disableEnforceFocus: true, onExited: function () {
+            onExited === null || onExited === void 0 ? void 0 : onExited();
+            searchControl.deactivate();
+        } }, popoverProps, { open: dropdownControl.isOpen, radius: radius, onClose: dropdownControl.close, anchorRef: anchorRef, ref: (0, useMultiRef_1.useMultiRef)([ref, popoverProps === null || popoverProps === void 0 ? void 0 : popoverProps.ref]) }), children));
+});

package/__inner__/cjs/components/AutocompleteBase/modules/AutocompleteBaseDropdown/constants.d.ts

@@ -0,0 +1 @@
+export declare const AUTOCOMPLETE_BASE_DROPDOWN_DEFAULT_TAG: import("../../../../utils/polymorphicComponentWithRef").PolymorphicComponentWithRef<import("../../../Paper").PaperBaseProps, "div">;

package/__inner__/cjs/components/AutocompleteBase/modules/AutocompleteBaseDropdown/constants.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AUTOCOMPLETE_BASE_DROPDOWN_DEFAULT_TAG = void 0;
+var Paper_1 = require("../../../Paper");
+exports.AUTOCOMPLETE_BASE_DROPDOWN_DEFAULT_TAG = Paper_1.Paper;

package/__inner__/cjs/components/AutocompleteBase/modules/AutocompleteBaseDropdown/index.d.ts

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

package/__inner__/cjs/components/AutocompleteBase/modules/AutocompleteBaseDropdown/index.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var tslib_1 = require("tslib");
+tslib_1.__exportStar(require("./AutocompleteBaseDropdown"), exports);
+tslib_1.__exportStar(require("./types"), exports);

package/__inner__/cjs/components/AutocompleteBase/modules/AutocompleteBaseDropdown/types.d.ts

@@ -0,0 +1,10 @@
+import type { ComponentRef, ElementType } from 'react';
+import type { PolymorphicComponentPropsWithRef } from '../../../../utils/polymorphicComponentWithRef';
+import type { PopoverBaseProps } from '../../../Popover';
+import type { AUTOCOMPLETE_BASE_DROPDOWN_DEFAULT_TAG } from './constants';
+export type AutocompleteBaseDropdownBaseProps = Omit<PopoverBaseProps, 'setUpdate' | 'anchorRef' | 'open' | 'onClose'> & {
+    disableCloseOnSelect?: boolean;
+    disableShowEmptyOptionsList?: boolean;
+};
+export type AutocompleteBaseDropdownRef = ComponentRef<typeof AUTOCOMPLETE_BASE_DROPDOWN_DEFAULT_TAG>;
+export type AutocompleteBaseDropdownProps<As extends ElementType = typeof AUTOCOMPLETE_BASE_DROPDOWN_DEFAULT_TAG> = PolymorphicComponentPropsWithRef<PopoverBaseProps, As>;

package/__inner__/cjs/components/AutocompleteBase/modules/AutocompleteBaseDropdown/types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/__inner__/cjs/components/AutocompleteBase/modules/AutocompleteBaseInput/AutocompleteBaseInput.css

@@ -0,0 +1,128 @@
+.AutocompleteBaseInput {
+  --autocomplete-base-input-gutter-x: 0 var(--textfield-gutter-x);
+}
+
+  .AutocompleteBaseInput_hasChevron.AutocompleteBaseInput_size_2xs {
+      --autocomplete-base-input-gutter-x: 0 var(--control-padding-2xs) 0
+      var(--control-padding-xs);
+    }
+
+  .AutocompleteBaseInput_hasChevron.AutocompleteBaseInput_size_xs {
+      --autocomplete-base-input-gutter-x: 0 var(--control-padding-2xs) 0
+      var(--control-padding-xs);
+    }
+
+  .AutocompleteBaseInput_hasChevron.AutocompleteBaseInput_size_s {
+      --autocomplete-base-input-gutter-x: 0 var(--control-padding-2xs) 0
+      var(--control-padding-s);
+    }
+
+  .AutocompleteBaseInput_hasChevron.AutocompleteBaseInput_size_m {
+      --autocomplete-base-input-gutter-x: 0 var(--control-padding-2xs) 0
+      var(--control-padding-m);
+    }
+
+  .AutocompleteBaseInput_hasChevron.AutocompleteBaseInput_size_l {
+      --autocomplete-base-input-gutter-x: 0 var(--control-padding-2xs) 0
+      var(--control-padding-l);
+    }
+
+  .AutocompleteBaseInput-HelperInput {
+    inset-block-start: 0;
+    block-size: 0;
+    overflow: hidden;
+    position: absolute;
+    visibility: hidden;
+    white-space: nowrap;
+  }
+
+  .AutocompleteBaseInput .Input-Body {
+    padding: var(--autocomplete-base-input-gutter-x);
+    align-items: flex-start;
+  }
+
+  .AutocompleteBaseInput .FieldIcon {
+    block-size: var(--textfield-input-height);
+  }
+
+  .AutocompleteBaseInput-ClearTag {
+    cursor: pointer;
+    display: inline-flex;
+    align-items: center;
+    block-size: inherit;
+  }
+
+  .AutocompleteBaseInput-Tag_hidden {
+      inset-block-start: 0;
+      block-size: 0;
+      visibility: hidden;
+      position: absolute;
+    }
+
+  .AutocompleteBaseInput-Tag_disabled {
+      pointer-events: none;
+      opacity: 0.6;
+    }
+
+  .AutocompleteBaseInput-RenderRight {
+    display: flex;
+    gap: var(--spacing-2xs);
+    align-items: center;
+  }
+
+  .AutocompleteBaseInput-ClearButton {
+    visibility: hidden;
+    transition: visibility var(--transition-default);
+  }
+
+  .AutocompleteBaseInput-ClearButton_visibility {
+      visibility: visible;
+    }
+
+
+.AutocompleteBaseInput-Input_responsive {
+    flex-wrap: nowrap;
+    gap: unset;
+  }
+
+
+/* ToDo. Tag */
+
+
+.AutocompleteBaseInput-Input_responsive .AutocompleteBaseInput-Tag {
+      margin-inline-end: var(--spacing-3xs);
+    }
+
+
+.AutocompleteBaseInput-Input_multiple {
+    display: flex;
+    flex-wrap: wrap;
+    overflow: hidden;
+    inline-size: 100%;
+    align-items: center;
+    box-sizing: border-box;
+    padding: var(--textfield-input-padding);
+    min-block-size: var(--textfield-input-height);
+    gap: var(--spacing-3xs);
+  }
+
+
+.AutocompleteBaseInput-Input_multiple input {
+      padding: 0;
+      border: none;
+      outline: none;
+      font: inherit;
+      background: none;
+      box-sizing: border-box;
+      color: var(--textfield-color);
+    }
+
+
+.AutocompleteBaseInput-Input_multiple.AutocompleteBaseInput-Input_hasLabel input::placeholder {
+      opacity: 0;
+    }
+
+
+.AutocompleteBaseInput-Input_multiple * + input::placeholder, .AutocompleteBaseInput-Input_multiple input:focus::placeholder, .AutocompleteBaseInput-Input_multiple.AutocompleteBaseInput-Input_hasLabel * + input::placeholder, .AutocompleteBaseInput-Input_multiple.AutocompleteBaseInput-Input_hasLabel input:focus::placeholder {
+        opacity: 1;
+      }

package/__inner__/cjs/components/AutocompleteBase/modules/AutocompleteBaseInput/AutocompleteBaseInput.d.ts

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

package/__inner__/cjs/components/AutocompleteBase/modules/AutocompleteBaseInput/AutocompleteBaseInput.js

@@ -0,0 +1,47 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AutocompleteBaseInput = void 0;
+var tslib_1 = require("tslib");
+var react_1 = tslib_1.__importStar(require("react"));
+var useMultiRef_1 = require("../../../../hooks/useMultiRef");
+var useThemeProps_1 = require("../../../../hooks/useThemeProps");
+var Input_1 = require("../../../Input");
+var AutocompleteBaseContext_1 = require("../../AutocompleteBaseContext");
+var classNames_1 = require("./classNames");
+var components_1 = require("./components");
+var constants_1 = require("./constants");
+var AutocompleteBaseInputRender = function (inProps, ref) {
+    var _a;
+    var props = (0, useThemeProps_1.useThemeProps)({
+        props: inProps,
+        name: 'AutocompleteBaseInput',
+    });
+    var label = props.label, openText = props.openText, clearText = props.clearText, closeText = props.closeText, className = props.className, bodyProps = props.bodyProps, inputProps = props.inputProps, renderSuffix = props.renderSuffix, _b = props.suffixPosition, suffixPosition = _b === void 0 ? constants_1.AUTOCOMPLETE_BASE_INPUT_DEFAULT_SUFFIX_POSITION : _b, renderBefore = props.renderBefore, placeholder = props.placeholder, limitTags = props.limitTags, _c = props.showClearButton, showClearButton = _c === void 0 ? constants_1.AUTOCOMPLETE_BASE_INPUT_DEFAULT_SHOW_CLEAR_BUTTON : _c, _d = props.showChevron, showChevron = _d === void 0 ? constants_1.AUTOCOMPLETE_BASE_INPUT_DEFAULT_SHOW_CHEVRON : _d, renderTag = props.renderTag, renderMoreTag = props.renderMoreTag, labelProps = props.labelProps, other = tslib_1.__rest(props, ["label", "openText", "clearText", "closeText", "className", "bodyProps", "inputProps", "renderSuffix", "suffixPosition", "renderBefore", "placeholder", "limitTags", "showClearButton", "showChevron", "renderTag", "renderMoreTag", "labelProps"]);
+    var _e = (0, AutocompleteBaseContext_1.useAutocompleteBaseContext)(), valueControl = _e.valueControl, inputControl = _e.inputControl, inputEventsControl = _e.inputEventsControl, inputRef = _e.inputRef, anchorRef = _e.anchorRef, size = _e.size, multiple = _e.multiple, disabled = _e.disabled, dropdownControl = _e.dropdownControl, error = _e.error;
+    var open = dropdownControl.isOpen;
+    var inputMultiRef = (0, useMultiRef_1.useMultiRef)([inputRef, ref]);
+    var renderComponent = function (_a, ref) {
+        var className = _a.className, other = tslib_1.__rest(_a, ["className"]);
+        if (multiple) {
+            return (react_1.default.createElement(components_1.AutocompleteBaseInputMultiple, tslib_1.__assign({ label: label, renderTag: renderTag, limitTags: limitTags, renderMoreTag: renderMoreTag }, other, { ref: ref })));
+        }
+        return (react_1.default.createElement("input", tslib_1.__assign({}, other, { ref: ref, className: (0, classNames_1.cnAutocompleteBaseInput)('Input', [className]) })));
+    };
+    return (react_1.default.createElement(Input_1.Input, tslib_1.__assign({}, other, { size: size, disabled: disabled, label: label, value: (_a = inputControl.value) !== null && _a !== void 0 ? _a : '', onChange: inputEventsControl.onChange, placeholder: placeholder, renderLeft: renderBefore, renderRight: react_1.default.createElement(components_1.AutocompleteBaseRenderRight, { openText: openText, clearText: clearText, closeText: closeText, renderSuffix: renderSuffix, suffixPosition: suffixPosition, showChevron: showChevron, showClearButton: showClearButton }), labelProps: tslib_1.__assign({ shrink: !!valueControl.selectedOptionsLength }, labelProps), bodyProps: tslib_1.__assign(tslib_1.__assign({ 'aria-expanded': open }, bodyProps), { ref: (0, useMultiRef_1.useMultiRef)([
+                anchorRef,
+                bodyProps === null || bodyProps === void 0 ? void 0 : bodyProps.ref,
+            ]) }), inputProps: tslib_1.__assign(tslib_1.__assign({ autoComplete: 'off' }, inputProps), { onClick: function (event) {
+                var _a;
+                inputEventsControl.onClick(event);
+                (_a = inputProps === null || inputProps === void 0 ? void 0 : inputProps.onClick) === null || _a === void 0 ? void 0 : _a.call(inputProps, event);
+            }, onBlur: function (event) {
+                var _a;
+                inputEventsControl.onBlur(event);
+                (_a = inputProps === null || inputProps === void 0 ? void 0 : inputProps.onBlur) === null || _a === void 0 ? void 0 : _a.call(inputProps, event);
+            }, onKeyDown: function (event) {
+                var _a;
+                inputEventsControl.onKeyDown(event);
+                (_a = inputProps === null || inputProps === void 0 ? void 0 : inputProps.onKeyDown) === null || _a === void 0 ? void 0 : _a.call(inputProps, event);
+            }, renderComponent: renderComponent }), className: (0, classNames_1.cnAutocompleteBaseInput)({ size: size, multiple: multiple, hasChevron: showChevron }, [className]), error: error, ref: inputMultiRef })));
+};
+exports.AutocompleteBaseInput = (0, react_1.forwardRef)(AutocompleteBaseInputRender);

package/__inner__/cjs/components/AutocompleteBase/modules/AutocompleteBaseInput/classNames.d.ts

@@ -0,0 +1 @@
+export declare const cnAutocompleteBaseInput: import("@bem-react/classname").ClassNameFormatter;

package/__inner__/cjs/components/AutocompleteBase/modules/AutocompleteBaseInput/classNames.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.cnAutocompleteBaseInput = void 0;
+var classname_1 = require("../../../../utils/classname");
+exports.cnAutocompleteBaseInput = (0, classname_1.cn)('AutocompleteBaseInput');

package/__inner__/cjs/components/AutocompleteBase/modules/AutocompleteBaseInput/components/AutocompleteBaseInputMultiple/AutocompleteBaseInputMultiple.d.ts

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

package/__inner__/cjs/components/AutocompleteBase/modules/AutocompleteBaseInput/components/AutocompleteBaseInputMultiple/AutocompleteBaseInputMultiple.js

@@ -0,0 +1,120 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AutocompleteBaseInputMultiple = void 0;
+var tslib_1 = require("tslib");
+var react_1 = tslib_1.__importStar(require("react"));
+var icons_1 = require("@ozen-ui/icons");
+var useElementSize_1 = require("../../../../../../hooks/useElementSize");
+var useIsomorphicEffect_1 = require("../../../../../../hooks/useIsomorphicEffect");
+var number_1 = require("../../../../../../utils/number");
+var AutocompleteBaseContext_1 = require("../../../../AutocompleteBaseContext");
+var AutocompleteBaseInputTag_1 = require("../../../AutocompleteBaseInputTag");
+var classNames_1 = require("../../classNames");
+var utils_1 = require("./utils");
+var AutocompleteInputMultipleRender = function (_a, ref) {
+    var label = _a.label, placeholder = _a.placeholder, renderTagProp = _a.renderTag, renderMoreTagProp = _a.renderMoreTag, limitTags = _a.limitTags, other = tslib_1.__rest(_a, ["label", "placeholder", "renderTag", "renderMoreTag", "limitTags"]);
+    var _b = (0, AutocompleteBaseContext_1.useAutocompleteBaseContext)(), inputControl = _b.inputControl, valueControl = _b.valueControl;
+    var value = inputControl.value;
+    var selectedOptions = valueControl.value;
+    var selectedOptionsLength = (selectedOptions === null || selectedOptions === void 0 ? void 0 : selectedOptions.length) || 0;
+    var responsive = limitTags === 'responsive';
+    var hasLimitTags = (0, number_1.isNumber)(limitTags) && limitTags > 0;
+    var showMoreTag = !!selectedOptionsLength && (responsive || hasLimitTags);
+    var _c = tslib_1.__read((0, react_1.useState)(), 2), visibleMap = _c[0], setVisibleMap = _c[1];
+    var omittedValues = selectedOptions === null || selectedOptions === void 0 ? void 0 : selectedOptions.filter(function (_, index) { return !(visibleMap === null || visibleMap === void 0 ? void 0 : visibleMap[index]); });
+    var renderMoreTagDefault = function (_a, ref) {
+        var props = _a.props;
+        return react_1.default.createElement(AutocompleteBaseInputTag_1.AutocompleteBaseInputTag, tslib_1.__assign({}, props, { ref: ref }));
+    };
+    var renderMoreTag = renderMoreTagProp || renderMoreTagDefault;
+    var renderTagDefault = function (_, props, ref) { return react_1.default.createElement(AutocompleteBaseInputTag_1.AutocompleteBaseInputTag, tslib_1.__assign({}, props, { ref: ref })); };
+    var renderTag = renderTagProp || renderTagDefault;
+    var _d = (0, useElementSize_1.useElementSize)(), parentRef = _d.ref, parentSize = _d.width;
+    var moreTagSize = (parentRef === null || parentRef === void 0 ? void 0 : parentRef.current)
+        ? (0, utils_1.calcElementSize)(parentRef === null || parentRef === void 0 ? void 0 : parentRef.current.children[selectedOptionsLength])
+        : 0;
+    var _e = (0, useElementSize_1.useElementSize)(), helperInputRef = _e.ref, _f = _e.width, helperInputSize = _f === void 0 ? 20 : _f;
+    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();
+    (0, useIsomorphicEffect_1.useIsomorphicEffect)(function () {
+        if ((!responsive && !(0, number_1.isNumber)(limitTags)) || !parentSize) {
+            return;
+        }
+        var optionsLength = selectedOptionsLength;
+        var parentSizeWithoutInput = parentSize - inputSize;
+        var moreIndex = optionsLength;
+        var map = (0, utils_1.createMap)(optionsLength + 1, moreIndex);
+        for (var i = 0; i < optionsLength + 1; i += 1) {
+            var index = moreIndex - i;
+            if (index !== moreIndex) {
+                var elementsSize = (0, utils_1.calcElementsSize)(parentRef.current.children, map);
+                var condition = responsive
+                    ? elementsSize > parentSizeWithoutInput
+                    : (0, number_1.isNumber)(limitTags) && limitTags <= index;
+                if (condition) {
+                    map[index] = false;
+                    map[moreIndex] = true;
+                }
+            }
+        }
+        setVisibleMap(map);
+    }, [
+        limitTags,
+        inputSize,
+        parentSize,
+        selectedOptions,
+        selectedOptionsLength,
+    ]);
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement("div", { ref: parentRef, className: (0, classNames_1.cnAutocompleteBaseInput)('Input', {
+                responsive: responsive,
+                multiple: true,
+                hasLabel: !!label,
+            }) }, selectedOptions === null || selectedOptions === void 0 ? void 0 :
+            selectedOptions.map(function (option, index) {
+                return renderTag(option, {
+                    key: option.id,
+                    label: option.label,
+                    className: (0, classNames_1.cnAutocompleteBaseInput)('Tag'),
+                    disabled: option.disabled,
+                    iconRight: function (_a) {
+                        var size = _a.size;
+                        return (react_1.default.createElement("span", { "aria-hidden": "true", "data-testid": "clear-tag", className: (0, classNames_1.cnAutocompleteBaseInput)('ClearTag', {
+                                hidden: (responsive || hasLimitTags) && !(visibleMap === null || visibleMap === void 0 ? void 0 : visibleMap[index]),
+                                disabled: option.disabled,
+                            }), onClick: function (event) {
+                                if (option.disabled) {
+                                    return;
+                                }
+                                event.preventDefault();
+                                valueControl.setValue(event, option, {
+                                    source: 'input',
+                                });
+                            } },
+                            react_1.default.createElement(icons_1.CrossSmallIcon, { size: size })));
+                    },
+                });
+            }),
+            showMoreTag &&
+                renderMoreTag({
+                    omittedValues: omittedValues,
+                    props: {
+                        label: "+".concat(visibleMap === null || visibleMap === void 0 ? void 0 : visibleMap.filter(function (item) { return !item; }).length),
+                        className: (0, classNames_1.cnAutocompleteBaseInput)('Tag', {
+                            hidden: !(visibleMap === null || visibleMap === void 0 ? void 0 : visibleMap[selectedOptionsLength]),
+                        }),
+                    },
+                }),
+            react_1.default.createElement("input", tslib_1.__assign({}, other, { value: value, ref: ref, style: { width: inputSize }, placeholder: placeholder }))),
+        react_1.default.createElement("div", { className: (0, classNames_1.cnAutocompleteBaseInput)('HelperInput'), ref: helperInputRef }, value || placeholder)));
+};
+exports.AutocompleteBaseInputMultiple = (0, react_1.forwardRef)(AutocompleteInputMultipleRender);

package/__inner__/cjs/components/AutocompleteBase/modules/AutocompleteBaseInput/components/AutocompleteBaseInputMultiple/index.d.ts

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

package/__inner__/cjs/components/AutocompleteBase/modules/AutocompleteBaseInput/components/AutocompleteBaseInputMultiple/index.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var tslib_1 = require("tslib");
+tslib_1.__exportStar(require("./AutocompleteBaseInputMultiple"), exports);
+tslib_1.__exportStar(require("./types"), exports);

package/__inner__/cjs/components/AutocompleteBase/modules/AutocompleteBaseInput/components/AutocompleteBaseInputMultiple/types.d.ts

@@ -0,0 +1,12 @@
+import type { ReactElement, Ref } from 'react';
+import type { InputProps } from '../../../../../Input';
+import type { AutocompleteBaseDefaultOption } from '../../../../entities';
+import type { AutocompleteBaseRenderMoreTag, AutocompleteBaseRenderTag } from '../../entities';
+export type AutocompleteBaseInputMultipleRef = HTMLInputElement;
+export type AutocompleteBaseInputMultipleProps<Option = AutocompleteBaseDefaultOption> = Pick<InputProps, 'placeholder' | 'label'> & {
+    renderTag?: AutocompleteBaseRenderTag<Option>;
+    renderMoreTag?: AutocompleteBaseRenderMoreTag<Option>;
+    limitTags?: 'responsive' | number;
+    ref?: Ref<AutocompleteBaseInputMultipleRef>;
+};
+export type AutocompleteBaseInputMultipleComponent = <Option = AutocompleteBaseDefaultOption>(props: AutocompleteBaseInputMultipleProps<Option>) => ReactElement | null;

package/__inner__/cjs/components/AutocompleteBase/modules/AutocompleteBaseInput/components/AutocompleteBaseInputMultiple/types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/__inner__/cjs/components/AutocompleteBase/modules/AutocompleteBaseInput/components/AutocompleteBaseInputMultiple/utils.d.ts

@@ -0,0 +1,3 @@
+export declare const calcElementSize: (element?: Element) => number;
+export declare const calcElementsSize: (elements: Element[], map: boolean[]) => number;
+export declare const createMap: (length: number, moreIndex: number) => boolean[];

package/__inner__/cjs/components/AutocompleteBase/modules/AutocompleteBaseInput/components/AutocompleteBaseInputMultiple/utils.js

@@ -0,0 +1,25 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.createMap = exports.calcElementsSize = exports.calcElementSize = void 0;
+var calcElementSize = function (element) {
+    if (!element) {
+        return 0;
+    }
+    var _a = getComputedStyle(element), marginRight = _a.marginRight, marginLeft = _a.marginLeft;
+    return (element.getBoundingClientRect().width +
+        parseInt(marginRight, 10) +
+        parseInt(marginLeft, 10));
+};
+exports.calcElementSize = calcElementSize;
+var calcElementsSize = function (elements, map) {
+    var sum = 0;
+    for (var index = 0; index < elements.length; index++) {
+        sum += map[index] ? (0, exports.calcElementSize)(elements === null || elements === void 0 ? void 0 : elements[index]) : 0;
+    }
+    return sum;
+};
+exports.calcElementsSize = calcElementsSize;
+var createMap = function (length, moreIndex) {
+    return new Array(length).fill(0).map(function (_, index) { return index !== moreIndex; });
+};
+exports.createMap = createMap;

package/__inner__/cjs/components/AutocompleteBase/modules/AutocompleteBaseInput/components/AutocompleteBaseRenderRight/AutocompleteBaseRenderRight.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import type { AutocompleteBaseRenderRightProps } from './types';
+export declare const AutocompleteBaseRenderRight: ({ openText, clearText, closeText, renderSuffix, suffixPosition, showClearButton, showChevron, className, ...other }: AutocompleteBaseRenderRightProps) => React.JSX.Element;

package/__inner__/cjs/components/AutocompleteBase/modules/AutocompleteBaseInput/components/AutocompleteBaseRenderRight/AutocompleteBaseRenderRight.js

@@ -0,0 +1,38 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AutocompleteBaseRenderRight = void 0;
+var tslib_1 = require("tslib");
+var react_1 = tslib_1.__importDefault(require("react"));
+var icons_1 = require("@ozen-ui/icons");
+var renderContent_1 = require("../../../../../../utils/renderContent");
+var FieldControl_1 = require("../../../../../FieldControl");
+var IconButtonNext_1 = require("../../../../../IconButtonNext");
+var AutocompleteBaseContext_1 = require("../../../../AutocompleteBaseContext");
+var classNames_1 = require("../../classNames");
+var AutocompleteBaseRenderRight = function (_a) {
+    var openText = _a.openText, clearText = _a.clearText, closeText = _a.closeText, renderSuffix = _a.renderSuffix, suffixPosition = _a.suffixPosition, showClearButton = _a.showClearButton, showChevron = _a.showChevron, className = _a.className, other = tslib_1.__rest(_a, ["openText", "clearText", "closeText", "renderSuffix", "suffixPosition", "showClearButton", "showChevron", "className"]);
+    var _b = (0, AutocompleteBaseContext_1.useAutocompleteBaseContext)(), dropdownControl = _b.dropdownControl, valueControl = _b.valueControl, disabled = _b.disabled, size = _b.size, clear = _b.clear;
+    var open = dropdownControl.isOpen;
+    var _c = tslib_1.__read((0, FieldControl_1.useFieldControl)(), 1), _d = _c[0], focused = _d.focused, hovered = _d.hovered;
+    var isVisibleClearButton = !!(hovered || open || focused) && valueControl.hasValue;
+    var renderedSuffix = (0, renderContent_1.renderContent)({
+        content: renderSuffix,
+    });
+    var clearButton = (react_1.default.createElement(IconButtonNext_1.IconButton, { size: size, type: "button", tabIndex: -1, icon: icons_1.CrossIcon, variant: "function", title: clearText, "aria-label": clearText, onClick: function (event) {
+            event.preventDefault();
+            clear(event);
+        }, className: (0, classNames_1.cnAutocompleteBaseInput)('ClearButton', {
+            visibility: isVisibleClearButton,
+        }), compressed: true }));
+    return (react_1.default.createElement("div", tslib_1.__assign({ className: (0, classNames_1.cnAutocompleteBaseInput)('RenderRight', [className]) }, other),
+        showClearButton && !isVisibleClearButton && clearButton,
+        suffixPosition === 'before' && renderedSuffix,
+        showClearButton && isVisibleClearButton && clearButton,
+        suffixPosition === 'between' && renderedSuffix,
+        showChevron && (react_1.default.createElement(IconButtonNext_1.IconButton, { size: size, type: "button", tabIndex: -1, variant: "ghost", disabled: disabled, title: open ? closeText : openText, "aria-label": open ? closeText : openText, icon: open ? icons_1.ChevronUpIcon : icons_1.ChevronDownIcon, onClick: function (event) {
+                event.preventDefault();
+                dropdownControl.toggle();
+            }, compressed: true })),
+        suffixPosition === 'after' && renderedSuffix));
+};
+exports.AutocompleteBaseRenderRight = AutocompleteBaseRenderRight;

package/__inner__/cjs/components/AutocompleteBase/modules/AutocompleteBaseInput/components/AutocompleteBaseRenderRight/index.d.ts

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

package/__inner__/cjs/components/AutocompleteBase/modules/AutocompleteBaseInput/components/AutocompleteBaseRenderRight/index.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var tslib_1 = require("tslib");
+tslib_1.__exportStar(require("./AutocompleteBaseRenderRight"), exports);
+tslib_1.__exportStar(require("./types"), exports);

package/__inner__/cjs/components/AutocompleteBase/modules/AutocompleteBaseInput/components/AutocompleteBaseRenderRight/types.d.ts

@@ -0,0 +1,11 @@
+import type { ComponentProps } from 'react';
+import type { AutocompleteBaseRenderSuffix, AutocompleteBaseSuffixPosition } from '../../entities';
+export type AutocompleteBaseRenderRightProps = {
+    suffixPosition: AutocompleteBaseSuffixPosition;
+    showClearButton: boolean;
+    showChevron: boolean;
+    renderSuffix?: AutocompleteBaseRenderSuffix;
+    openText?: string;
+    clearText?: string;
+    closeText?: string;
+} & ComponentProps<'div'>;

package/__inner__/cjs/components/AutocompleteBase/modules/AutocompleteBaseInput/components/AutocompleteBaseRenderRight/types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/__inner__/cjs/components/AutocompleteBase/modules/AutocompleteBaseInput/components/index.d.ts

@@ -0,0 +1,2 @@
+export * from './AutocompleteBaseInputMultiple';
+export * from './AutocompleteBaseRenderRight';

package/__inner__/cjs/components/AutocompleteBase/modules/AutocompleteBaseInput/components/index.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var tslib_1 = require("tslib");
+tslib_1.__exportStar(require("./AutocompleteBaseInputMultiple"), exports);
+tslib_1.__exportStar(require("./AutocompleteBaseRenderRight"), exports);

package/__inner__/cjs/components/AutocompleteBase/modules/AutocompleteBaseInput/constants.d.ts

@@ -0,0 +1,3 @@
+export declare const AUTOCOMPLETE_BASE_INPUT_DEFAULT_SUFFIX_POSITION = "between";
+export declare const AUTOCOMPLETE_BASE_INPUT_DEFAULT_SHOW_CLEAR_BUTTON = true;
+export declare const AUTOCOMPLETE_BASE_INPUT_DEFAULT_SHOW_CHEVRON = true;

package/__inner__/cjs/components/AutocompleteBase/modules/AutocompleteBaseInput/constants.js

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AUTOCOMPLETE_BASE_INPUT_DEFAULT_SHOW_CHEVRON = exports.AUTOCOMPLETE_BASE_INPUT_DEFAULT_SHOW_CLEAR_BUTTON = exports.AUTOCOMPLETE_BASE_INPUT_DEFAULT_SUFFIX_POSITION = void 0;
+exports.AUTOCOMPLETE_BASE_INPUT_DEFAULT_SUFFIX_POSITION = 'between';
+exports.AUTOCOMPLETE_BASE_INPUT_DEFAULT_SHOW_CLEAR_BUTTON = true;
+exports.AUTOCOMPLETE_BASE_INPUT_DEFAULT_SHOW_CHEVRON = true;

package/__inner__/cjs/components/AutocompleteBase/modules/AutocompleteBaseInput/entities/index.d.ts

@@ -0,0 +1,5 @@
+export * from './renderBefore';
+export * from './renderMoreTag';
+export * from './renderSuffix';
+export * from './renderTag';
+export * from './suffixPosition';

package/__inner__/cjs/components/AutocompleteBase/modules/AutocompleteBaseInput/entities/index.js

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var tslib_1 = require("tslib");
+tslib_1.__exportStar(require("./renderBefore"), exports);
+tslib_1.__exportStar(require("./renderMoreTag"), exports);
+tslib_1.__exportStar(require("./renderSuffix"), exports);
+tslib_1.__exportStar(require("./renderTag"), exports);
+tslib_1.__exportStar(require("./suffixPosition"), exports);

package/__inner__/cjs/components/AutocompleteBase/modules/AutocompleteBaseInput/entities/renderBefore.d.ts

@@ -0,0 +1,2 @@
+import type { RenderContentTypeEmptyProps } from '../../../../../utils/renderContent';
+export type AutocompleteBaseRenderBefore = RenderContentTypeEmptyProps['content'];

package/__inner__/cjs/components/AutocompleteBase/modules/AutocompleteBaseInput/entities/renderBefore.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/__inner__/cjs/components/AutocompleteBase/modules/AutocompleteBaseInput/entities/renderMoreTag.d.ts

@@ -0,0 +1,8 @@
+import type { ReactNode, Ref } from 'react';
+import type { AutocompleteBaseInternalValue } from '../../../entities';
+import type { AutocompleteBaseInputTagProps, AutocompleteBaseInputTagRef } from '../../AutocompleteBaseInputTag';
+export type AutocompleteBaseRenderMoreTagProps<Option> = {
+    props: AutocompleteBaseInputTagProps;
+    omittedValues?: AutocompleteBaseInternalValue<Option, true>;
+};
+export type AutocompleteBaseRenderMoreTag<Option> = (props: AutocompleteBaseRenderMoreTagProps<Option>, ref?: Ref<AutocompleteBaseInputTagRef>) => ReactNode;

package/__inner__/cjs/components/AutocompleteBase/modules/AutocompleteBaseInput/entities/renderMoreTag.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/__inner__/cjs/components/AutocompleteBase/modules/AutocompleteBaseInput/entities/renderSuffix.d.ts

@@ -0,0 +1,2 @@
+import type { RenderContentTypeEmptyProps } from '../../../../../utils/renderContent';
+export type AutocompleteBaseRenderSuffix = RenderContentTypeEmptyProps['content'];

package/__inner__/cjs/components/AutocompleteBase/modules/AutocompleteBaseInput/entities/renderSuffix.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/__inner__/cjs/components/AutocompleteBase/modules/AutocompleteBaseInput/entities/renderTag.d.ts

@@ -0,0 +1,6 @@
+import type { ReactNode, Ref } from 'react';
+import type { AutocompleteBaseInternalOption } from '../../../entities';
+import type { AutocompleteBaseInputTagProps, AutocompleteBaseInputTagRef } from '../../AutocompleteBaseInputTag';
+export type AutocompleteBaseRenderTagProps = AutocompleteBaseInputTagProps;
+export type AutocompleteBaseRenderTagRef = AutocompleteBaseInputTagRef;
+export type AutocompleteBaseRenderTag<Option> = (option: AutocompleteBaseInternalOption<Option>, props: AutocompleteBaseRenderTagProps, ref?: Ref<AutocompleteBaseRenderTagRef>) => ReactNode;

package/__inner__/cjs/components/AutocompleteBase/modules/AutocompleteBaseInput/entities/renderTag.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/__inner__/cjs/components/AutocompleteBase/modules/AutocompleteBaseInput/entities/suffixPosition.d.ts

@@ -0,0 +1,2 @@
+export declare const autocompleteBaseSuffixPosition: readonly ["before", "between", "after"];
+export type AutocompleteBaseSuffixPosition = (typeof autocompleteBaseSuffixPosition)[number];