@ozen-ui/kit 0.65.0 → 0.66.0

package/BaseBottomSheet/package.json

@@ -0,0 +1,5 @@
+{
+	"main": "../__inner__/cjs/components/BaseBottomSheet/index.js",
+	"module": "../__inner__/esm/components/BaseBottomSheet/index.js",
+	"types": "../__inner__/esm/components/BaseBottomSheet/index.d.ts"
+}

package/DialogNext/package.json

@@ -0,0 +1,5 @@
+{
+	"main": "../__inner__/cjs/components/DialogNext/index.js",
+	"module": "../__inner__/esm/components/DialogNext/index.js",
+	"types": "../__inner__/esm/components/DialogNext/index.d.ts"
+}

package/DrawerNext/package.json

@@ -0,0 +1,5 @@
+{
+	"main": "../__inner__/cjs/components/DrawerNext/index.js",
+	"module": "../__inner__/esm/components/DrawerNext/index.js",
+	"types": "../__inner__/esm/components/DrawerNext/index.d.ts"
+}

package/__inner__/cjs/components/AutocompleteNext/Autocomplete.css

@@ -30,6 +30,7 @@
   .AutocompleteNext-RenderRight {
     display: flex;
     gap: var(--spacing-2xs);
+    align-items: center;
   }
 
   .AutocompleteNext-ClearButton {

package/__inner__/cjs/components/AutocompleteNext/Autocomplete.js

@@ -20,30 +20,30 @@ function AutocompleteRender(inProps, ref) {
         props: inProps,
         name: 'AutocompleteNext',
     });
-    var _a = (0, helpers_1.withDefaultGetters)(props), _b = _a.disabled, disabled = _b === void 0 ? constants_1.AUTOCOMPLETE_DEFAULT_DISABLED : _b, _c = _a.required, required = _c === void 0 ? constants_1.AUTOCOMPLETE_DEFAULT_REQUIRED : _c, _d = _a.autoFocus, autoFocus = _d === void 0 ? constants_1.AUTOCOMPLETE_DEFAULT_AUTOFOCUS : _d, _e = _a.fullWidth, fullWidth = _e === void 0 ? constants_1.AUTOCOMPLETE_DEFAULT_FULLWIDTH : _e, _f = _a.size, size = _f === void 0 ? constants_1.AUTOCOMPLETE_DEFAULT_SIZE : _f, _g = _a.allowCustomValue, allowCustomValue = _g === void 0 ? constants_1.AUTOCOMPLETE_DEFAULT_ALLOW_CUSTOM_VALUE : _g, _h = _a.disableShowChevron, disableShowChevron = _h === void 0 ? constants_1.AUTOCOMPLETE_DEFAULT_DISABLE_SHOW_CHEVRON : _h, _j = _a.disableClearButton, disableClearButton = _j === void 0 ? constants_1.AUTOCOMPLETE_DEFAULT_DISABLE_CLEAR_BUTTON : _j, _k = _a.disableCloseOnSelect, disableCloseOnSelect = _k === void 0 ? constants_1.AUTOCOMPLETE_DEFAULT_DISABLE_CLOSE_ON_SELECT : _k, _l = _a.disableShowEmptyOptionsList, disableShowEmptyOptionsList = _l === void 0 ? constants_1.AUTOCOMPLETE_DEFAULT_DISABLE_SHOW_EMPTY_OPTIONS_LIST : _l, limitTags = _a.limitTags, renderInput = _a.renderInput, multiple = _a.multiple, searchFunctionProp = _a.searchFunction, inputValueProp = _a.inputValue, valueProp = _a.value, options = _a.options, defaultValue = _a.defaultValue, onInputChange = _a.onInputChange, getOptionKey = _a.getOptionKey, getOptionLabel = _a.getOptionLabel, getOptionDisabled = _a.getOptionDisabled, onCloseProp = _a.onClose, onOpenProp = _a.onOpen, openProp = _a.open, defaultOpen = _a.defaultOpen, loading = _a.loading, inputProps = _a.inputProps, bodyProps = _a.bodyProps, onKeyDown = _a.onKeyDown, noOptionsText = _a.noOptionsText, clearText = _a.clearText, openText = _a.openText, renderOption = _a.renderOption, loadingText = _a.loadingText, closeText = _a.closeText, listProps = _a.listProps, popoverProps = _a.popoverProps, onChangeProp = _a.onChange, other = tslib_1.__rest(_a, ["disabled", "required", "autoFocus", "fullWidth", "size", "allowCustomValue", "disableShowChevron", "disableClearButton", "disableCloseOnSelect", "disableShowEmptyOptionsList", "limitTags", "renderInput", "multiple", "searchFunction", "inputValue", "value", "options", "defaultValue", "onInputChange", "getOptionKey", "getOptionLabel", "getOptionDisabled", "onClose", "onOpen", "open", "defaultOpen", "loading", "inputProps", "bodyProps", "onKeyDown", "noOptionsText", "clearText", "openText", "renderOption", "loadingText", "closeText", "listProps", "popoverProps", "onChange"]);
-    var _m = (0, useElementSize_1.useElementSize)(), inputRef = _m.ref, height = _m.height;
+    var _a = (0, helpers_1.withDefaultGetters)(props), _b = _a.disabled, disabled = _b === void 0 ? constants_1.AUTOCOMPLETE_DEFAULT_DISABLED : _b, _c = _a.required, required = _c === void 0 ? constants_1.AUTOCOMPLETE_DEFAULT_REQUIRED : _c, _d = _a.autoFocus, autoFocus = _d === void 0 ? constants_1.AUTOCOMPLETE_DEFAULT_AUTOFOCUS : _d, _e = _a.fullWidth, fullWidth = _e === void 0 ? constants_1.AUTOCOMPLETE_DEFAULT_FULLWIDTH : _e, _f = _a.size, size = _f === void 0 ? constants_1.AUTOCOMPLETE_DEFAULT_SIZE : _f, _g = _a.allowCustomValue, allowCustomValue = _g === void 0 ? constants_1.AUTOCOMPLETE_DEFAULT_ALLOW_CUSTOM_VALUE : _g, _h = _a.disableShowChevron, disableShowChevron = _h === void 0 ? constants_1.AUTOCOMPLETE_DEFAULT_DISABLE_SHOW_CHEVRON : _h, _j = _a.disableClearButton, disableClearButton = _j === void 0 ? constants_1.AUTOCOMPLETE_DEFAULT_DISABLE_CLEAR_BUTTON : _j, _k = _a.disableCloseOnSelect, disableCloseOnSelect = _k === void 0 ? constants_1.AUTOCOMPLETE_DEFAULT_DISABLE_CLOSE_ON_SELECT : _k, _l = _a.disableShowEmptyOptionsList, disableShowEmptyOptionsList = _l === void 0 ? constants_1.AUTOCOMPLETE_DEFAULT_DISABLE_SHOW_EMPTY_OPTIONS_LIST : _l, _m = _a.renderRightPosition, renderRightPosition = _m === void 0 ? constants_1.AUTOCOMPLETE_DEFAULT_RENDER_RIGHT_POSITION : _m, limitTags = _a.limitTags, renderInput = _a.renderInput, multiple = _a.multiple, searchFunctionProp = _a.searchFunction, inputValueProp = _a.inputValue, valueProp = _a.value, options = _a.options, defaultValue = _a.defaultValue, onInputChange = _a.onInputChange, getOptionKey = _a.getOptionKey, getOptionLabel = _a.getOptionLabel, getOptionDisabled = _a.getOptionDisabled, onCloseProp = _a.onClose, onOpenProp = _a.onOpen, openProp = _a.open, defaultOpen = _a.defaultOpen, loading = _a.loading, inputProps = _a.inputProps, bodyProps = _a.bodyProps, onKeyDown = _a.onKeyDown, noOptionsText = _a.noOptionsText, clearText = _a.clearText, openText = _a.openText, renderOption = _a.renderOption, loadingText = _a.loadingText, closeText = _a.closeText, listProps = _a.listProps, popoverProps = _a.popoverProps, onChangeProp = _a.onChange, other = tslib_1.__rest(_a, ["disabled", "required", "autoFocus", "fullWidth", "size", "allowCustomValue", "disableShowChevron", "disableClearButton", "disableCloseOnSelect", "disableShowEmptyOptionsList", "renderRightPosition", "limitTags", "renderInput", "multiple", "searchFunction", "inputValue", "value", "options", "defaultValue", "onInputChange", "getOptionKey", "getOptionLabel", "getOptionDisabled", "onClose", "onOpen", "open", "defaultOpen", "loading", "inputProps", "bodyProps", "onKeyDown", "noOptionsText", "clearText", "openText", "renderOption", "loadingText", "closeText", "listProps", "popoverProps", "onChange"]);
+    var _o = (0, useElementSize_1.useElementSize)(), inputRef = _o.ref, height = _o.height;
     var lastInputValue = (0, react_1.useRef)('');
     var anchorRef = (0, react_1.useRef)(null);
     var inputBodyRef = (0, useMultiRef_1.useMultiRef)([anchorRef, bodyProps === null || bodyProps === void 0 ? void 0 : bodyProps.ref]);
     var rootRef = (0, useMultiRef_1.useMultiRef)([ref, inputRef]);
-    var _o = tslib_1.__read((0, useControlled_1.useControlled)({
+    var _p = tslib_1.__read((0, useControlled_1.useControlled)({
         value: inputValueProp,
         defaultValue: '',
         name: 'AutocompleteNext',
         state: 'inputValue',
-    }), 2), inputValue = _o[0], setInputValue = _o[1];
-    var _p = tslib_1.__read((0, useControlled_1.useControlled)({
+    }), 2), inputValue = _p[0], setInputValue = _p[1];
+    var _q = tslib_1.__read((0, useControlled_1.useControlled)({
         value: valueProp,
         defaultValue: defaultValue,
         name: 'AutocompleteNext',
         state: 'value',
-    }), 2), valueState = _p[0], setValueState = _p[1];
-    var _q = tslib_1.__read((0, useControlled_1.useControlled)({
+    }), 2), valueState = _q[0], setValueState = _q[1];
+    var _r = tslib_1.__read((0, useControlled_1.useControlled)({
         value: openProp,
         defaultValue: defaultOpen,
         name: 'AutocompleteNext',
         state: 'open',
-    }), 2), open = _q[0], setOpen = _q[1];
+    }), 2), open = _r[0], setOpen = _r[1];
     var searchFunctionDefault = function (options, searchValue) {
         return options === null || options === void 0 ? void 0 : options.filter(function (option) {
             return getOptionLabel(option).toLowerCase().includes(searchValue.toLowerCase());
@@ -51,10 +51,10 @@ function AutocompleteRender(inProps, ref) {
     };
     var savedOnInputChange = (0, useMutableRef_1.useMutableRef)(onInputChange);
     var savedGetOptionLabel = (0, useMutableRef_1.useMutableRef)(getOptionLabel);
-    var _r = tslib_1.__read((0, react_1.useState)(tslib_1.__spreadArray([], tslib_1.__read(options), false)), 2), filteredOptions = _r[0], setFilteredOptions = _r[1];
+    var _s = tslib_1.__read((0, react_1.useState)(tslib_1.__spreadArray([], tslib_1.__read(options), false)), 2), filteredOptions = _s[0], setFilteredOptions = _s[1];
     var searchFunction = searchFunctionProp || searchFunctionDefault;
     var hasOptions = !!(filteredOptions === null || filteredOptions === void 0 ? void 0 : filteredOptions.length);
-    var _s = tslib_1.__read((0, react_1.useState)(undefined), 2), search = _s[0], setSearch = _s[1];
+    var _t = tslib_1.__read((0, react_1.useState)(undefined), 2), search = _t[0], setSearch = _t[1];
     var changeInputValue = function (e, value) {
         var _a;
         setInputValue(value);
@@ -198,7 +198,7 @@ function AutocompleteRender(inProps, ref) {
         if (!disableCloseOnSelect)
             handleClose();
     };
-    var autocompleteInputProps = tslib_1.__assign({ open: open, size: size, limitTags: limitTags, disabled: disabled, multiple: multiple, required: required, fullWidth: fullWidth, clearText: clearText, closeText: closeText, openText: openText, inputProps: tslib_1.__assign(tslib_1.__assign({}, inputProps), { onBlur: handleBlur, onClick: handleClickOnInput }), bodyProps: tslib_1.__assign(tslib_1.__assign({}, bodyProps), { ref: inputBodyRef }), renderInput: renderInput, getOptionKey: getOptionKey, getOptionLabel: getOptionLabel, getOptionDisabled: getOptionDisabled, value: inputValue, disableShowChevron: disableShowChevron, disableClearButton: disableClearButton, onClear: handleClear, onOpen: handleToggle, onRemoveTag: callOnChange, onKeyDown: handleKeyDown, onChange: handleChangeInput, selectedOptions: valueState }, other);
+    var autocompleteInputProps = tslib_1.__assign({ open: open, size: size, limitTags: limitTags, disabled: disabled, multiple: multiple, required: required, fullWidth: fullWidth, clearText: clearText, closeText: closeText, openText: openText, inputProps: tslib_1.__assign(tslib_1.__assign({}, inputProps), { onBlur: handleBlur, onClick: handleClickOnInput }), bodyProps: tslib_1.__assign(tslib_1.__assign({}, bodyProps), { ref: inputBodyRef }), renderInput: renderInput, renderRightPosition: renderRightPosition, getOptionKey: getOptionKey, getOptionLabel: getOptionLabel, getOptionDisabled: getOptionDisabled, value: inputValue, disableShowChevron: disableShowChevron, disableClearButton: disableClearButton, onClear: handleClear, onOpen: handleToggle, onRemoveTag: callOnChange, onKeyDown: handleKeyDown, onChange: handleChangeInput, selectedOptions: valueState }, other);
     var update = (0, react_1.useRef)();
     var setUpdate = function (func) {
         if (func) {

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

@@ -11,7 +11,7 @@ var components_1 = require("./components");
 var helpers_1 = require("./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, label = inProps.label, 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 = tslib_1.__rest(inProps, ["size", "open", "value", "onOpen", "onClear", "multiple", "disabled", "label", "openText", "onRemoveTag", "clearText", "closeText", "className", "bodyProps", "inputProps", "renderRight", "placeholder", "selectedOptions", "getOptionKey", "getOptionLabel", "getOptionDisabled", "limitTags", "disableClearButton", "disableShowChevron", "renderTag", "renderInput", "renderMoreTag"]);
+    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, label = inProps.label, openText = inProps.openText, onRemoveTag = inProps.onRemoveTag, clearText = inProps.clearText, closeText = inProps.closeText, className = inProps.className, bodyProps = inProps.bodyProps, inputProps = inProps.inputProps, renderRight = inProps.renderRight, renderRightPosition = inProps.renderRightPosition, 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 = tslib_1.__rest(inProps, ["size", "open", "value", "onOpen", "onClear", "multiple", "disabled", "label", "openText", "onRemoveTag", "clearText", "closeText", "className", "bodyProps", "inputProps", "renderRight", "renderRightPosition", "placeholder", "selectedOptions", "getOptionKey", "getOptionLabel", "getOptionDisabled", "limitTags", "disableClearButton", "disableShowChevron", "renderTag", "renderInput", "renderMoreTag"]);
     var hasValue = (0, helpers_1.isMultipleParams)(inProps)
         ? !!((_a = inProps.selectedOptions) === null || _a === void 0 ? void 0 : _a.length)
         : (0, isNotNil_1.isNotNil)(selectedOptions);
@@ -31,7 +31,7 @@ var AutocompleteInputRender = function (inProps, ref) {
         }
         return null;
     };
-    return renderInput(tslib_1.__assign({ size: size, disabled: disabled, label: label, value: value || '', placeholder: placeholder, renderRight: (react_1.default.createElement(AutocompleteRenderRight_1.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: {
+    return renderInput(tslib_1.__assign({ size: size, disabled: disabled, label: label, value: value || '', placeholder: placeholder, renderRight: (react_1.default.createElement(AutocompleteRenderRight_1.AutocompleteRenderRight, { open: open, size: size, onOpen: onOpen, onClear: onClear, hasValue: hasValue, openText: openText, disabled: disabled, clearText: clearText, closeText: closeText, renderRight: renderRight, renderRightPosition: renderRightPosition, disableShowChevron: disableShowChevron, disableClearButton: disableClearButton })), labelProps: {
             shrink: !!selectedOptionsLength,
         }, inputProps: tslib_1.__assign(tslib_1.__assign({ autoComplete: 'off' }, inputProps), { renderComponent: renderComponent }), bodyProps: tslib_1.__assign({ 'aria-expanded': open }, bodyProps), className: (0, index_1.cnAutocomplete)({ size: size, multiple: multiple, hasChevron: !disableShowChevron }, [className]) }, other), ref);
 };

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

@@ -1,10 +1,11 @@
 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 { AutocompleteDefaultOption, AutocompletePropGetOptionKey, AutocompletePropGetOptionLabel, AutocompletePropValue, AutocompletePropRenderInput, AutocompletePropRenderTag, AutocompletePropRenderMoreTag, AutocompletePropGetOptionDisabled, AutocompleteRenderRightPosition } 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' | 'label'> & Pick<AutocompleteRenderRightProps, 'onOpen' | 'onClear'> & {
+    renderRightPosition: AutocompleteRenderRightPosition;
     open?: boolean;
     openText?: string;
     closeText?: string;

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

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

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

@@ -9,20 +9,25 @@ var FieldIcon_1 = require("../../../FieldIcon");
 var IconButtonNext_1 = require("../../../IconButtonNext");
 var index_1 = require("../../index");
 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 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, renderRightPosition = _a.renderRightPosition, disableClearButton = _a.disableClearButton, disableShowChevron = _a.disableShowChevron;
     var _b = tslib_1.__read((0, FieldControl_1.useFieldControl)(), 1), _c = _b[0], focused = _c.focused, hovered = _c.hovered;
     var isVisibleClearButton = !!(hovered || open || focused) && hasValue;
+    var renderedIcon = react_1.default.createElement(FieldIcon_1.FieldIcon, { icon: renderRight });
+    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 (e) {
+            e.preventDefault();
+            onClear === null || onClear === void 0 ? void 0 : onClear(e);
+        }, className: (0, index_1.cnAutocomplete)('ClearButton', {
+            visibility: isVisibleClearButton,
+        }), compressed: true }));
     return (react_1.default.createElement("div", { className: (0, index_1.cnAutocomplete)('RenderRight') },
-        !disableClearButton && (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 (e) {
-                e.preventDefault();
-                onClear === null || onClear === void 0 ? void 0 : onClear(e);
-            }, className: (0, index_1.cnAutocomplete)('ClearButton', {
-                visibility: isVisibleClearButton,
-            }), compressed: true })),
-        react_1.default.createElement(FieldIcon_1.FieldIcon, { icon: renderRight }),
+        !disableClearButton && !isVisibleClearButton && clearButton,
+        renderRightPosition === 'before' && renderedIcon,
+        !disableClearButton && isVisibleClearButton && clearButton,
+        renderRightPosition === 'between' && renderedIcon,
         !disableShowChevron && (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 (e) {
                 e.preventDefault();
                 onOpen();
-            }, compressed: true }))));
+            }, compressed: true })),
+        renderRightPosition === 'after' && renderedIcon));
 };
 exports.AutocompleteRenderRight = AutocompleteRenderRight;

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

@@ -8,3 +8,4 @@ export declare const AUTOCOMPLETE_DEFAULT_DISABLE_SHOW_EMPTY_OPTIONS_LIST = fals
 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";
+export declare const AUTOCOMPLETE_DEFAULT_RENDER_RIGHT_POSITION = "between";

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

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.AUTOCOMPLETE_DEFAULT_SIZE = exports.AUTOCOMPLETE_DEFAULT_DISABLE_CLEAR_BUTTON = exports.AUTOCOMPLETE_DEFAULT_DISABLE_CLOSE_ON_SELECT = exports.AUTOCOMPLETE_DEFAULT_DISABLE_SHOW_EMPTY_OPTIONS_LIST = exports.AUTOCOMPLETE_DEFAULT_DISABLE_SHOW_CHEVRON = exports.AUTOCOMPLETE_DEFAULT_ALLOW_CUSTOM_VALUE = exports.AUTOCOMPLETE_DEFAULT_FULLWIDTH = exports.AUTOCOMPLETE_DEFAULT_AUTOFOCUS = exports.AUTOCOMPLETE_DEFAULT_REQUIRED = exports.AUTOCOMPLETE_DEFAULT_DISABLED = void 0;
+exports.AUTOCOMPLETE_DEFAULT_RENDER_RIGHT_POSITION = exports.AUTOCOMPLETE_DEFAULT_SIZE = exports.AUTOCOMPLETE_DEFAULT_DISABLE_CLEAR_BUTTON = exports.AUTOCOMPLETE_DEFAULT_DISABLE_CLOSE_ON_SELECT = exports.AUTOCOMPLETE_DEFAULT_DISABLE_SHOW_EMPTY_OPTIONS_LIST = exports.AUTOCOMPLETE_DEFAULT_DISABLE_SHOW_CHEVRON = exports.AUTOCOMPLETE_DEFAULT_ALLOW_CUSTOM_VALUE = exports.AUTOCOMPLETE_DEFAULT_FULLWIDTH = exports.AUTOCOMPLETE_DEFAULT_AUTOFOCUS = exports.AUTOCOMPLETE_DEFAULT_REQUIRED = exports.AUTOCOMPLETE_DEFAULT_DISABLED = void 0;
 exports.AUTOCOMPLETE_DEFAULT_DISABLED = false;
 exports.AUTOCOMPLETE_DEFAULT_REQUIRED = false;
 exports.AUTOCOMPLETE_DEFAULT_AUTOFOCUS = false;
@@ -11,3 +11,4 @@ exports.AUTOCOMPLETE_DEFAULT_DISABLE_SHOW_EMPTY_OPTIONS_LIST = false;
 exports.AUTOCOMPLETE_DEFAULT_DISABLE_CLOSE_ON_SELECT = false;
 exports.AUTOCOMPLETE_DEFAULT_DISABLE_CLEAR_BUTTON = false;
 exports.AUTOCOMPLETE_DEFAULT_SIZE = 'm';
+exports.AUTOCOMPLETE_DEFAULT_RENDER_RIGHT_POSITION = 'between';

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

@@ -14,6 +14,7 @@ export declare function withDefaultGetters<OPTION = AutocompleteDefaultOption, M
     open?: boolean;
     defaultOpen?: boolean;
     onChange?: import("./types").AutocompleteOnChange<OPTION, MULTIPLE> | undefined;
+    renderRightPosition?: import("./types").AutocompleteRenderRightPosition;
     inputValue?: string;
     onInputChange?: import("./types").AutocompleteOnInputChange;
     renderInput?: import("./types").AutocompletePropRenderInput;

package/__inner__/cjs/components/AutocompleteNext/types.d.ts

@@ -3,6 +3,8 @@ import type { TagProps, TagRef } from '../../components/TagNext';
 import type { FormElementSizeVariant } from '../../types/FormElementSizeVariant';
 import type { InputProps, InputRef } from '../Input';
 import type { AutocompleteDropdownProps } from './components';
+export declare const autocompleteRenderRightPosition: readonly ["before", "between", "after"];
+export type AutocompleteRenderRightPosition = (typeof autocompleteRenderRightPosition)[number];
 export type AutocompleteRenderOptionProps<OPTION> = {
     option: OPTION;
     state: {
@@ -61,6 +63,8 @@ export type AutocompleteProps<OPTION = AutocompleteDefaultOption, MULTIPLE exten
     defaultOpen?: boolean;
     /** Функция обратного вызова, которая будет вызвана при выборе значения */
     onChange?: AutocompleteOnChange<OPTION, MULTIPLE>;
+    /** Положение компонента справа */
+    renderRightPosition?: AutocompleteRenderRightPosition;
     /** Введённое значение в текстовом поле */
     inputValue?: string;
     /** Функция обратного вызова, которая будет вызвана при вводе значения с клавиатуры */

package/__inner__/cjs/components/AutocompleteNext/types.js

@@ -1,2 +1,8 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.autocompleteRenderRightPosition = void 0;
+exports.autocompleteRenderRightPosition = [
+    'before',
+    'between',
+    'after',
+];

package/__inner__/cjs/components/ButtonNext/types.d.ts

@@ -9,6 +9,7 @@ export declare const buttonColorVariant: readonly ["primary", "secondary", "tert
 export type ButtonVariant = (typeof buttonVariant)[number];
 export type ButtonColorVariant = (typeof buttonColorVariant)[number];
 export type ButtonIcon = RenderContentType<IconProps>['content'];
+export type ButtonSize = FormElementSizeVariant;
 export type ButtonBaseProps = {
     /**
      * Вариант отображения кнопки
@@ -19,7 +20,7 @@ export type ButtonBaseProps = {
      * Размер
      * @default m
      * */
-    size?: FormElementSizeVariant;
+    size?: ButtonSize;
     /**
      * Цвет
      * @default primary
@@ -41,5 +42,7 @@ export type ButtonBaseProps = {
     fullWidth?: boolean;
     /** Свойства лейбла кнопки */
     labelProps?: ComponentPropsWithRef<'span'>;
+    /** data-атрибут для тестирования */
+    'data-testid'?: string;
 };
 export type ButtonProps<As extends ElementType = typeof BUTTON_DEFAULT_TAG> = PolymorphicComponentPropsWithoutRef<ButtonBaseProps, As>;

package/__inner__/cjs/components/Dialog/Dialog.d.ts

@@ -27,9 +27,7 @@ export declare const Dialog: React.ForwardRefExoticComponent<{
     transitionProps?: Partial<import("react-transition-group/CSSTransition").CSSTransitionProps> & {
         "data-testid"?: string;
     };
-    windowProps?: import("../Paper").PaperProps & {
-        "data-testid"?: string;
-    };
+    windowProps?: import("../Paper").PaperProps;
     className?: string;
     'data-testid'?: string;
     ignoreClickOutsideRefs?: React.RefObject<HTMLElement>[];

package/__inner__/cjs/components/Drawer/Drawer.d.ts

@@ -1,6 +1,9 @@
 import './Drawer.css';
 import React from 'react';
 export declare const cnDrawer: import("@bem-react/classname").ClassNameFormatter;
+/**
+ * @deprecated Компонент устарел. Для замены используйте компонент DrawerNext
+ */
 export declare const Drawer: React.ForwardRefExoticComponent<{
     variant?: import("./types").DrawerVariant;
     size?: import("./types").DrawerSizeVariant;
@@ -28,9 +31,7 @@ export declare const Drawer: React.ForwardRefExoticComponent<{
     transitionProps?: Partial<import("react-transition-group/CSSTransition").CSSTransitionProps> & {
         "data-testid"?: string;
     };
-    windowProps?: import("../Paper").PaperProps & {
-        "data-testid"?: string;
-    };
+    windowProps?: import("../Paper").PaperProps;
     className?: string;
     'data-testid'?: string;
     ignoreClickOutsideRefs?: React.RefObject<HTMLElement>[];

package/__inner__/cjs/components/Drawer/Drawer.js

@@ -12,6 +12,9 @@ var Modal_1 = require("../Modal");
 var constants_1 = require("./constants");
 var utils_1 = require("./utils");
 exports.cnDrawer = (0, classname_1.cn)('Drawer');
+/**
+ * @deprecated Компонент устарел. Для замены используйте компонент DrawerNext
+ */
 exports.Drawer = (0, react_1.forwardRef)(function (inProps, ref) {
     var props = (0, useThemeProps_1.useThemeProps)({
         props: inProps,

package/__inner__/cjs/components/DrawerNext/Drawer.css

@@ -0,0 +1,117 @@
+.DrawerNext {
+  --drawer-inline-padding: var(--spacing-s);
+  --drawer-block-padding: var(--spacing-l);
+  --drawer-blocks-gap: var(--spacing-m);
+  display: flex;
+}
+
+  .DrawerNext .Modal-Window {
+    position: relative;
+    inline-size: 100%;
+    max-inline-size: var(--drawer-next-max-width);
+    block-size: 100%;
+    display: flex;
+    flex-direction: column;
+    box-sizing: border-box;
+    border: none;
+    inset-block-start: auto;
+    inset-inline-start: auto;
+    transform: none;
+    padding: 0;
+    outline: none;
+  }
+
+  /* ---- INNER CONTAINER ---- */
+
+  .DrawerNext-InnerContainer {
+    display: flex;
+    flex-direction: column;
+    flex-grow: 1;
+    max-block-size: 100%;
+    overflow: auto;
+  }
+
+  /* ---- FULL SCREEN ---- */
+
+  .DrawerNext_fullScreen .Modal-Window {
+      border-radius: 0;
+    }
+
+  /* ---- DEVICE TYPE ----  */
+
+  /* --- DESKTOP ---  */
+
+  .DrawerNext_deviceType_desktop.DrawerNext_size_s {
+    --drawer-inline-padding: var(--spacing-m);
+    --drawer-block-padding: var(--spacing-m);
+  }
+
+  .DrawerNext_deviceType_desktop.DrawerNext_size_m {
+    --drawer-inline-padding: var(--spacing-l);
+    --drawer-blocks-gap: var(--spacing-l);
+  }
+
+  /* ---- CLOSE BUTTON ----  */
+
+  .DrawerNext-CloseButtonContainer {
+    position: absolute;
+    inset-block-start: 8px;
+    inset-inline-end: 8px;
+  }
+
+  .DrawerNext_hasCloseButton {
+    --drawer-header-item-padding-right: var(--spacing-m);
+  }
+
+  /* ---- PLACEMENT ---- */
+
+  .DrawerNext_placement_right {
+    --drawer-start-position: 100%;
+    justify-content: flex-end;
+  }
+
+  .DrawerNext_placement_right .Modal-Window {
+      border-start-end-radius: 0;
+      border-end-end-radius: 0;
+    }
+
+  .DrawerNext_placement_left {
+    --drawer-start-position: -100%;
+    justify-content: flex-start;
+  }
+
+  .DrawerNext_placement_left .Modal-Window {
+      border-start-start-radius: 0;
+      border-end-start-radius: 0;
+    }
+
+  /* ---- ANIMATION ---- */
+
+  .DrawerNext_animation-appear .Modal-Window, .DrawerNext_animation-enter .Modal-Window {
+      transform: translate(var(--drawer-start-position), 0);
+    }
+
+  .DrawerNext_animation-appear-active .Modal-Window, .DrawerNext_animation-enter-active .Modal-Window {
+      transition: transform var(--transition-slow);
+      transform: translate(0, 0);
+    }
+
+  .DrawerNext_animation-enter-done .Modal-Window {
+      transform: translate(0, 0);
+    }
+
+  .DrawerNext_animation-exit .Modal-Window {
+      visibility: visible;
+      transform: translate(0, 0);
+    }
+
+  .DrawerNext_animation-exit-active .Modal-Window {
+      visibility: visible;
+      transition: transform var(--transition-slow);
+      transform: translate(var(--drawer-start-position), 0);
+    }
+
+  .DrawerNext_animation-exit-done .Modal-Window {
+      visibility: hidden;
+      transform: translate(var(--drawer-start-position), 0);
+    }

package/__inner__/cjs/components/DrawerNext/Drawer.d.ts

@@ -0,0 +1,11 @@
+import './Drawer.css';
+import './modules/DrawerBody/DrawerBody.css';
+import './modules/DrawerFooter/DrawerFooter.css';
+import './modules/DrawerFooterButtonsGroup/DrawerFooterButtonsGroup.css';
+import './modules/DrawerHeader/DrawerHeader.css';
+import './modules/DrawerSubtitle/DrawerSubtitle.css';
+import './modules/DrawerTitle/DrawerTitle.css';
+import React from 'react';
+import type { DrawerProps } from './types';
+export declare const cnDrawer: import("@bem-react/classname").ClassNameFormatter;
+export declare const Drawer: React.ForwardRefExoticComponent<DrawerProps & React.RefAttributes<HTMLDivElement>>;

package/__inner__/cjs/components/DrawerNext/Drawer.js

@@ -0,0 +1,55 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Drawer = exports.cnDrawer = void 0;
+var tslib_1 = require("tslib");
+require("./Drawer.css");
+require("./modules/DrawerBody/DrawerBody.css");
+require("./modules/DrawerFooter/DrawerFooter.css");
+require("./modules/DrawerFooterButtonsGroup/DrawerFooterButtonsGroup.css");
+require("./modules/DrawerHeader/DrawerHeader.css");
+require("./modules/DrawerSubtitle/DrawerSubtitle.css");
+require("./modules/DrawerTitle/DrawerTitle.css");
+var react_1 = tslib_1.__importStar(require("react"));
+var useThemeProps_1 = require("../../hooks/useThemeProps");
+var classname_1 = require("../../utils/classname");
+var css_1 = require("../../utils/css");
+var renderContent_1 = require("../../utils/renderContent");
+var Modal_1 = require("../Modal");
+var constants_1 = require("./constants");
+var DrawerContext_1 = require("./DrawerContext");
+var hooks_1 = require("./hooks");
+var modules_1 = require("./modules");
+var utils_1 = require("./utils");
+exports.cnDrawer = (0, classname_1.cn)('DrawerNext');
+exports.Drawer = (0, react_1.forwardRef)(function (inProps, ref) {
+    var _a;
+    var props = (0, useThemeProps_1.useThemeProps)({
+        props: inProps,
+        name: 'DrawerNext',
+    });
+    var _b = props.variant, variant = _b === void 0 ? constants_1.DRAWER_DEFAULT_VARIANT : _b, _c = props.size, size = _c === void 0 ? constants_1.DRAWER_DEFAULT_SIZE : _c, _d = props.placement, placement = _d === void 0 ? constants_1.DRAWER_DEFAULT_PLACEMENT : _d, _e = props.hideCloseButton, hideCloseButton = _e === void 0 ? constants_1.DRAWER_DEFAULT_HIDE_CLOSE_BUTTON : _e, _f = props.deviceType, deviceType = _f === void 0 ? constants_1.DRAWER_DEFAULT_DEVICE_TYPE : _f, open = props.open, _g = props.onClose, onClose = _g === void 0 ? function () { } : _g, children = props.children, className = props.className, windowProps = props.windowProps, transitionProps = props.transitionProps, _h = props.renderCloseButton, renderCloseButton = _h === void 0 ? react_1.default.createElement(modules_1.DrawerCloseButton, null) : _h, style = props.style, other = tslib_1.__rest(props, ["variant", "size", "placement", "hideCloseButton", "deviceType", "open", "onClose", "children", "className", "windowProps", "transitionProps", "renderCloseButton", "style"]);
+    var _j = (0, hooks_1.useDrawerWidth)({ variant: variant }), isFullWidth = _j.isFullWidth, maxWidth = _j.maxWidth;
+    var radius = utils_1.paperRadiusBySize[deviceType][size];
+    return (react_1.default.createElement(DrawerContext_1.DrawerContext.Provider, { value: {
+            size: size,
+            variant: variant,
+            onClose: onClose,
+            deviceType: deviceType,
+        } },
+        react_1.default.createElement(Modal_1.Modal, tslib_1.__assign({}, other, { open: open, style: tslib_1.__assign(tslib_1.__assign({}, style), (0, css_1.generateCSSVariables)((_a = {},
+                _a[constants_1.DRAWER_CSS_VARIABLE.MAX_WIDTH] = "".concat(maxWidth, "px"),
+                _a))), onClose: onClose, windowProps: tslib_1.__assign({ radius: radius, shadow: 'l' }, windowProps), className: (0, exports.cnDrawer)({
+                variant: variant,
+                size: size,
+                placement: placement,
+                deviceType: deviceType,
+                hasCloseButton: !hideCloseButton,
+                fullScreen: isFullWidth,
+            }, [className]), transitionProps: tslib_1.__assign({ classNames: (0, exports.cnDrawer)({ animation: true }) }, transitionProps), ref: ref }),
+            !hideCloseButton && (react_1.default.createElement("div", { className: (0, exports.cnDrawer)('CloseButtonContainer') }, (0, renderContent_1.renderContent)({
+                content: renderCloseButton,
+                props: {},
+            }))),
+            react_1.default.createElement("div", { className: (0, exports.cnDrawer)('InnerContainer') }, children))));
+});
+exports.Drawer.displayName = 'Drawer';

package/__inner__/cjs/components/DrawerNext/DrawerContext.d.ts

@@ -0,0 +1,10 @@
+import type { DrawerDeviceType, DrawerSizeVariantByDeviceType, DrawerVariant } from './entities';
+export type DrawerContextValue<DeviceType extends DrawerDeviceType> = {
+    size: DrawerSizeVariantByDeviceType[DeviceType];
+    variant: DrawerVariant;
+    onClose: () => void;
+    deviceType: DeviceType;
+};
+export declare const DrawerContextDefaultValue: DrawerContextValue<DrawerDeviceType>;
+export declare const DrawerContext: import("react").Context<DrawerContextValue<"mobile" | "desktop">>;
+export declare const useDrawerContext: <DeviceType extends DrawerDeviceType>() => DrawerContextValue<DeviceType>;

package/__inner__/cjs/components/DrawerNext/DrawerContext.js

@@ -0,0 +1,21 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useDrawerContext = exports.DrawerContext = exports.DrawerContextDefaultValue = void 0;
+var react_1 = require("react");
+var environment_1 = require("../../constants/environment");
+var constants_1 = require("./constants");
+exports.DrawerContextDefaultValue = {
+    size: constants_1.DRAWER_DEFAULT_SIZE,
+    variant: constants_1.DRAWER_DEFAULT_VARIANT,
+    onClose: function () { },
+    deviceType: constants_1.DRAWER_DEFAULT_DEVICE_TYPE,
+};
+exports.DrawerContext = (0, react_1.createContext)(exports.DrawerContextDefaultValue);
+var useDrawerContext = function () {
+    return (0, react_1.useContext)(exports.DrawerContext);
+};
+exports.useDrawerContext = useDrawerContext;
+// Именованный провайдер
+if (environment_1.IS_DEV) {
+    exports.DrawerContext.displayName = 'DrawerContext';
+}

package/__inner__/cjs/components/DrawerNext/constants.d.ts

@@ -0,0 +1,8 @@
+export declare const DRAWER_DEFAULT_VARIANT = "medium";
+export declare const DRAWER_DEFAULT_SIZE = "m";
+export declare const DRAWER_DEFAULT_PLACEMENT = "right";
+export declare const DRAWER_DEFAULT_HIDE_CLOSE_BUTTON = false;
+export declare const DRAWER_DEFAULT_DEVICE_TYPE = "desktop";
+export declare const DRAWER_CSS_VARIABLE: {
+    readonly MAX_WIDTH: "drawer-next-max-width";
+};

package/__inner__/cjs/components/DrawerNext/constants.js

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DRAWER_CSS_VARIABLE = exports.DRAWER_DEFAULT_DEVICE_TYPE = exports.DRAWER_DEFAULT_HIDE_CLOSE_BUTTON = exports.DRAWER_DEFAULT_PLACEMENT = exports.DRAWER_DEFAULT_SIZE = exports.DRAWER_DEFAULT_VARIANT = void 0;
+exports.DRAWER_DEFAULT_VARIANT = 'medium';
+exports.DRAWER_DEFAULT_SIZE = 'm';
+exports.DRAWER_DEFAULT_PLACEMENT = 'right';
+exports.DRAWER_DEFAULT_HIDE_CLOSE_BUTTON = false;
+exports.DRAWER_DEFAULT_DEVICE_TYPE = 'desktop';
+exports.DRAWER_CSS_VARIABLE = {
+    MAX_WIDTH: 'drawer-next-max-width',
+};

package/__inner__/cjs/components/DrawerNext/entities/device.d.ts

@@ -0,0 +1,2 @@
+export declare const drawerDeviceType: readonly ["mobile", "desktop"];
+export type DrawerDeviceType = (typeof drawerDeviceType)[number];

package/__inner__/cjs/components/DrawerNext/entities/device.js

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.drawerDeviceType = void 0;
+exports.drawerDeviceType = ['mobile', 'desktop'];

package/__inner__/cjs/components/DrawerNext/entities/index.d.ts

@@ -0,0 +1,4 @@
+export * from './device';
+export * from './placement';
+export * from './size';
+export * from './variant';

package/__inner__/cjs/components/DrawerNext/entities/index.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var tslib_1 = require("tslib");
+tslib_1.__exportStar(require("./device"), exports);
+tslib_1.__exportStar(require("./placement"), exports);
+tslib_1.__exportStar(require("./size"), exports);
+tslib_1.__exportStar(require("./variant"), exports);

package/__inner__/cjs/components/DrawerNext/entities/placement.d.ts

@@ -0,0 +1,2 @@
+export declare const drawerPlacementVariant: readonly ["left", "right"];
+export type DrawerPlacementVariant = (typeof drawerPlacementVariant)[number];

package/__inner__/cjs/components/DrawerNext/entities/placement.js

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.drawerPlacementVariant = void 0;
+exports.drawerPlacementVariant = ['left', 'right'];

package/__inner__/cjs/components/DrawerNext/entities/size.d.ts

@@ -0,0 +1,11 @@
+import type { DrawerDeviceType } from './device';
+export declare const drawerSizeVariantByDeviceType: {
+    readonly desktop: readonly ["s", "m"];
+    readonly mobile: readonly ["m"];
+};
+export type DrawerSizeVariantByDeviceType = {
+    [key in DrawerDeviceType]: (typeof drawerSizeVariantByDeviceType)[key][number];
+};
+export type DrawerValueBySize<DeviceType extends DrawerDeviceType, Value> = {
+    [key in DrawerSizeVariantByDeviceType[DeviceType]]: Value;
+};

package/__inner__/cjs/components/DrawerNext/entities/size.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.drawerSizeVariantByDeviceType = void 0;
+exports.drawerSizeVariantByDeviceType = {
+    desktop: ['s', 'm'],
+    mobile: ['m'],
+};