@ozen-ui/kit 0.53.0 → 0.54.0

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

@@ -1,39 +1,39 @@
 import './DatePicker.css';
 import React from 'react';
-import type { CalendarOnChange } from '../Calendar';
+import type { DatePickerOnChange } from './types';
 export declare const cnDatePicker: import("@bem-react/classname").ClassNameFormatter;
 export declare const DatePicker: React.ForwardRefExoticComponent<(Omit<{
     value?: Date | null | undefined;
     defaultValue?: Date | null | undefined;
-    onChange?: CalendarOnChange | undefined;
+    onChange?: DatePickerOnChange | undefined;
     onInputChange?: import("./types").DatePickerOnInputChange | undefined;
     onClose?: (() => void) | undefined;
     onOpen?: (() => void) | undefined;
-    calendarProps?: import("../Calendar").CalendarBaseProps | undefined;
+    calendarProps?: import("../Calendar").CalendarProps | undefined;
     popoverProps?: import("../Popover").PopoverBaseProps | undefined;
     clearText?: string | undefined;
     disableClearButton?: boolean | undefined;
     onError?: import("./types").DatePickerPropOnError | undefined;
 } & Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
     ref?: ((instance: HTMLDivElement | null) => void) | React.RefObject<HTMLDivElement> | null | undefined;
-}, "defaultValue" | "onChange" | "onError"> & Pick<import("../Calendar").CalendarBaseProps, "exclude" | "offsetDate" | "minDate" | "maxDate"> & Pick<import("../Input").InputProps, "error" | "label" | "onKeyDown" | "disabled" | "placeholder" | "required" | "size" | "fullWidth" | "hint" | "renderLeft" | "renderRight" | "inputProps"> & {
+}, "defaultValue" | "onChange" | "onError"> & Pick<import("../Calendar").CalendarProps, "exclude" | "offsetDate" | "minDate" | "maxDate"> & Pick<import("../Input").InputProps, "error" | "label" | "onKeyDown" | "disabled" | "placeholder" | "required" | "size" | "fullWidth" | "disableStroke" | "hint" | "renderLeft" | "renderRight" | "inputProps" | "hintProps"> & {
     open?: boolean | undefined;
     defaultOpen?: undefined;
 }, "ref"> | Omit<{
     value?: Date | null | undefined;
     defaultValue?: Date | null | undefined;
-    onChange?: CalendarOnChange | undefined;
+    onChange?: DatePickerOnChange | undefined;
     onInputChange?: import("./types").DatePickerOnInputChange | undefined;
     onClose?: (() => void) | undefined;
     onOpen?: (() => void) | undefined;
-    calendarProps?: import("../Calendar").CalendarBaseProps | undefined;
+    calendarProps?: import("../Calendar").CalendarProps | undefined;
     popoverProps?: import("../Popover").PopoverBaseProps | undefined;
     clearText?: string | undefined;
     disableClearButton?: boolean | undefined;
     onError?: import("./types").DatePickerPropOnError | undefined;
 } & Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
     ref?: ((instance: HTMLDivElement | null) => void) | React.RefObject<HTMLDivElement> | null | undefined;
-}, "defaultValue" | "onChange" | "onError"> & Pick<import("../Calendar").CalendarBaseProps, "exclude" | "offsetDate" | "minDate" | "maxDate"> & Pick<import("../Input").InputProps, "error" | "label" | "onKeyDown" | "disabled" | "placeholder" | "required" | "size" | "fullWidth" | "hint" | "renderLeft" | "renderRight" | "inputProps"> & {
+}, "defaultValue" | "onChange" | "onError"> & Pick<import("../Calendar").CalendarProps, "exclude" | "offsetDate" | "minDate" | "maxDate"> & Pick<import("../Input").InputProps, "error" | "label" | "onKeyDown" | "disabled" | "placeholder" | "required" | "size" | "fullWidth" | "disableStroke" | "hint" | "renderLeft" | "renderRight" | "inputProps" | "hintProps"> & {
     open?: undefined;
     defaultOpen?: boolean | undefined;
 }, "ref">) & React.RefAttributes<HTMLDivElement>>;

package/__inner__/cjs/components/DatePicker/DatePicker.js

@@ -44,7 +44,7 @@ exports.DatePicker = (0, react_1.forwardRef)(function (inProps, ref) {
         state: 'value',
     }), 2), value = _d[0], setValue = _d[1];
     /** Соотношение размера календаря к размеру элемента контроля */
-    var calendarSize = utils_2.matchCalendarSizeToFormElement[size];
+    var calendarSize = (0, utils_2.getCalendarSizeToFormElement)(size);
     /** Вычисление border-radius по размеру компонента */
     var radius = (0, getPaperSizeToFormElement_1.getPaperSizeToFormElement)(size);
     var callOnChange = function (value) {

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

@@ -1,8 +1,8 @@
 import type { ComponentPropsWithRef, ChangeEvent } from 'react';
-import type { CalendarBaseProps, CalendarOnChange } from '../Calendar';
+import type { CalendarProps, CalendarOnChange } from '../Calendar';
 import type { InputProps } from '../Input';
 import type { PopoverBaseProps } from '../Popover';
-export type DatePickerOnChange = CalendarOnChange;
+export type DatePickerOnChange = CalendarOnChange<'single'>;
 export type DatePickerOnInputChange = (e: ChangeEvent<HTMLInputElement> | null, value: string) => void;
 export type DatePickerPropOnError = (props: {
     type: 'outOfRange';
@@ -39,7 +39,7 @@ export type DatePickerProps = {
     /** Функция обратного вызова, которая будет вызвана когда компонент запрашивает открытие */
     onOpen?: () => void;
     /** Свойства компонента Calendar */
-    calendarProps?: CalendarBaseProps;
+    calendarProps?: CalendarProps;
     /** Свойства компонента Popover */
     popoverProps?: PopoverBaseProps;
     /** Текст для кнопки очистки поля */
@@ -48,5 +48,5 @@ export type DatePickerProps = {
     disableClearButton?: boolean;
     /** Функция обратно вызова, которая сработает если пользователь ввёл дату с ошибкой */
     onError?: DatePickerPropOnError;
-} & Omit<ComponentPropsWithRef<'div'>, 'onChange' | 'defaultValue' | 'onError'> & Pick<CalendarBaseProps, 'minDate' | 'maxDate' | 'exclude' | 'offsetDate'> & Pick<InputProps, 'label' | 'hint' | 'onKeyDown' | 'size' | 'error' | 'required' | 'fullWidth' | 'disabled' | 'renderLeft' | 'renderRight' | 'placeholder' | 'inputProps'> & (DatePickerOpenControlledProps | DatePickerOpenUncontrolledProps);
+} & Omit<ComponentPropsWithRef<'div'>, 'onChange' | 'defaultValue' | 'onError'> & Pick<CalendarProps, 'minDate' | 'maxDate' | 'exclude' | 'offsetDate'> & Pick<InputProps, 'label' | 'hint' | 'onKeyDown' | 'size' | 'error' | 'required' | 'fullWidth' | 'disableStroke' | 'disabled' | 'renderLeft' | 'renderRight' | 'placeholder' | 'inputProps' | 'hintProps'> & (DatePickerOpenControlledProps | DatePickerOpenUncontrolledProps);
 export {};

package/__inner__/cjs/components/DatePicker/utils/getCalendarSizeToFormElement/getCalendarSizeToFormElement.d.ts

@@ -0,0 +1,2 @@
+import type { FormElementSizeVariant } from '../../../../types/FormElementSizeVariant';
+export declare const getCalendarSizeToFormElement: (size: FormElementSizeVariant) => "s" | "m" | "l";

package/__inner__/cjs/components/DatePicker/utils/getCalendarSizeToFormElement/getCalendarSizeToFormElement.js

@@ -0,0 +1,15 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getCalendarSizeToFormElement = void 0;
+var getByMap_1 = require("../../../../utils/getByMap");
+var typeMap = {
+    '2xs': 's',
+    xs: 's',
+    s: 's',
+    m: 'm',
+    l: 'l',
+};
+var getCalendarSizeToFormElement = function (size) {
+    return (0, getByMap_1.getByMap)(typeMap, size);
+};
+exports.getCalendarSizeToFormElement = getCalendarSizeToFormElement;

package/__inner__/cjs/components/DatePicker/utils/getCalendarSizeToFormElement/index.d.ts

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

package/__inner__/cjs/components/DatePicker/utils/getCalendarSizeToFormElement/index.js

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

package/__inner__/cjs/components/DatePicker/utils/index.d.ts

@@ -1,4 +1,4 @@
-export * from './matchCalendarSizeToFormElement';
+export * from './getCalendarSizeToFormElement';
 export * from './formatDateToString';
 export * from './formatStringToDate';
 export * from './isOutOfRange';

package/__inner__/cjs/components/DatePicker/utils/index.js

@@ -1,7 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 var tslib_1 = require("tslib");
-tslib_1.__exportStar(require("./matchCalendarSizeToFormElement"), exports);
+tslib_1.__exportStar(require("./getCalendarSizeToFormElement"), exports);
 tslib_1.__exportStar(require("./formatDateToString"), exports);
 tslib_1.__exportStar(require("./formatStringToDate"), exports);
 tslib_1.__exportStar(require("./isOutOfRange"), exports);

package/__inner__/cjs/components/FieldControl/FieldControl.css

@@ -102,18 +102,21 @@
 .FieldControl_fullWidth {
     inline-size: 100%;
   }
+.FieldControl_disableStroke {
+    --textfield-border-color: transparent;
+  }
 .FieldControl:hover {
     --textfield-border-color: var(--color-border-main-hover);
   }
 .FieldControl_focused,
   .FieldControl_focused:hover {
-    --textfield-border-width: var(--border-width-s);
     --textfield-border-color: var(--color-border-action);
     --textfield-background-color: var(--color-background-main);
   }
 .FieldControl_error,
   .FieldControl_error.FieldControl:hover,
   .FieldControl_error.FieldControl_focused,
+  .FieldControl_error.FieldControl_disableStroke,
   .FieldControl_error.FieldControl_focused:hover {
     --textfield-border-color: var(--color-border-error);
   }
@@ -124,3 +127,6 @@
     cursor: default;
     pointer-events: none;
   }
+.FieldControl_disableStroke.FieldControl_disabled {
+    --textfield-border-color: transparent;
+  }

package/__inner__/cjs/components/FieldControl/FieldControl.js

@@ -19,7 +19,7 @@ exports.FieldControl = (0, polymorphicComponentWithRef_1.polymorphicComponentWit
     });
     var innerRef = (0, react_1.useRef)(null);
     var hovered = (0, useHover_1.useHover)(innerRef);
-    var _a = props.as, Tag = _a === void 0 ? exports.FIELD_CONTROL_DEFAULT_TAG : _a, sizeProp = props.size, disabledProp = props.disabled, requiredProp = props.required, errorProp = props.error, fullWidthProp = props.fullWidth, filledProp = props.filled, focusedProp = props.focused, children = props.children, className = props.className, otherProp = tslib_1.__rest(props, ["as", "size", "disabled", "required", "error", "fullWidth", "filled", "focused", "children", "className"]);
+    var _a = props.as, Tag = _a === void 0 ? exports.FIELD_CONTROL_DEFAULT_TAG : _a, disableStrokeProp = props.disableStroke, sizeProp = props.size, disabledProp = props.disabled, requiredProp = props.required, errorProp = props.error, fullWidthProp = props.fullWidth, filledProp = props.filled, focusedProp = props.focused, children = props.children, className = props.className, otherProp = tslib_1.__rest(props, ["as", "disableStroke", "size", "disabled", "required", "error", "fullWidth", "filled", "focused", "children", "className"]);
     var focused = focusedProp;
     var filled = filledProp;
     var size = sizeProp;
@@ -27,6 +27,7 @@ exports.FieldControl = (0, polymorphicComponentWithRef_1.polymorphicComponentWit
     var disabled = disabledProp;
     var error = errorProp;
     var fullWidth = fullWidthProp;
+    var disableStroke = disableStrokeProp;
     var initialState = {
         size: size,
         filled: filled,
@@ -59,6 +60,9 @@ exports.FieldControl = (0, polymorphicComponentWithRef_1.polymorphicComponentWit
     if (fullWidth === undefined && state.fullWidth) {
         fullWidth = state.fullWidth;
     }
+    if (disableStroke === undefined && state.disableStroke) {
+        disableStroke = state.disableStroke;
+    }
     return (react_1.default.createElement(Tag, tslib_1.__assign({ className: (0, exports.cnFieldControl)({
             error: error,
             fullWidth: fullWidth,
@@ -67,6 +71,7 @@ exports.FieldControl = (0, polymorphicComponentWithRef_1.polymorphicComponentWit
             size: size,
             filled: filled,
             focused: focused,
+            disableStroke: disableStroke,
             hasLabel: !!label,
         }, [className]) }, otherProp, { ref: (0, useMultiRef_1.useMultiRef)([ref, innerRef]) }),
         react_1.default.createElement(index_1.FieldControlContext.Provider, { value: [
@@ -81,6 +86,7 @@ exports.FieldControl = (0, polymorphicComponentWithRef_1.polymorphicComponentWit
                     focused: focused,
                     hovered: hovered,
                     value: value,
+                    disableStroke: disableStroke,
                 },
                 setState,
             ] }, children)));

package/__inner__/cjs/components/FieldControl/FieldControlContext.d.ts

@@ -11,6 +11,7 @@ export type FieldControlContextValue = {
     focused?: boolean;
     hovered?: boolean;
     label?: string;
+    disableStroke?: boolean;
     value?: string | number;
 };
 export declare const FieldControlContext: React.Context<[FieldControlContextValue, Dispatch<SetStateAction<FieldControlContextValue>>]>;

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

@@ -21,6 +21,7 @@ export declare const FilePicker: React.ForwardRefExoticComponent<{
     }) | undefined;
     disableTruncate?: boolean | undefined;
     required?: boolean | undefined;
+    disableStroke?: boolean | undefined;
     renderLeft?: string | number | React.FC<React.SVGProps<SVGSVGElement> & {
         color?: string | undefined;
         ref?: React.Ref<SVGSVGElement> | undefined;
@@ -68,7 +69,7 @@ export declare const FilePicker: React.ForwardRefExoticComponent<{
 } & {
     labelRef?: ((instance: HTMLSpanElement | null) => void) | React.RefObject<HTMLSpanElement> | null | undefined;
     inputRef?: React.Ref<HTMLInputElement> | undefined;
-} & Omit<React.HTMLAttributes<HTMLDivElement>, "name" | "error" | "label" | "className" | "id" | "onChange" | "autoFocus" | "disabled" | "accept" | "multiple" | "placeholder" | "required" | "size" | "fullWidth" | "labelProps" | "data-testid" | "hint" | "renderLeft" | "renderRight" | "inputProps" | "hintProps" | "clearText" | "onClear" | "fileList" | "disableTruncate" | "renderValue" | keyof {
+} & Omit<React.HTMLAttributes<HTMLDivElement>, "name" | "error" | "label" | "className" | "id" | "onChange" | "autoFocus" | "disabled" | "accept" | "multiple" | "placeholder" | "required" | "size" | "fullWidth" | "labelProps" | "data-testid" | "disableStroke" | "hint" | "renderLeft" | "renderRight" | "inputProps" | "hintProps" | "clearText" | "onClear" | "fileList" | "disableTruncate" | "renderValue" | keyof {
     labelRef?: ((instance: HTMLSpanElement | null) => void) | React.RefObject<HTMLSpanElement> | null | undefined;
     inputRef?: React.Ref<HTMLInputElement> | undefined;
 }> & React.RefAttributes<HTMLDivElement>>;

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

@@ -50,6 +50,8 @@ export type FilePickerBaseProps = {
     disableTruncate?: boolean;
     /** Если {true} делает элемент обязательным к заполнению */
     required?: boolean;
+    /** Если {true} отключает обводку */
+    disableStroke?: boolean;
     /** Текст или иконка слева */
     renderLeft?: FieldIconProps['icon'];
     /** Текст или иконка справа */

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

@@ -46,6 +46,8 @@ export type InputProps = Omit<ComponentPropsWithRef<typeof FIELD_CONTROL_DEFAULT
     disabled?: boolean;
     /** Если {true} делает элемент обязательным к заполнению */
     required?: boolean;
+    /** Если {true} отключает обводку */
+    disableStroke?: boolean;
     /** Минимальное количество символов разрешенных для ввода */
     minLength?: InputElement['minLength'];
     /** Максимальное количество символов разрешенных для ввода */

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

@@ -38,6 +38,8 @@ export type InputNumberProps = {
     disabled?: boolean;
     /** Если {true} делает элемент обязательным к заполнению */
     required?: boolean;
+    /** Если {true} отключает обводку */
+    disableStroke?: boolean;
     /** Текст или иконка слева */
     renderLeft?: FieldIconProps['icon'];
     /** Текст или иконка справа */

package/__inner__/cjs/components/Select/Select.js

@@ -20,7 +20,7 @@ var SelectRender = function (inProps, ref) {
         props: inProps,
         name: 'Select',
     });
-    var _a = props.size, size = _a === void 0 ? constants_1.SELECT_DEFAULT_SIZE : _a, _b = props.autoFocus, autoFocus = _b === void 0 ? constants_1.SELECT_DEFAULT_AUTO_FOCUS : _b, _c = props.fullWidth, fullWidth = _c === void 0 ? constants_1.SELECT_DEFAULT_FULL_WIDTH : _c, _d = props.disabled, disabled = _d === void 0 ? constants_1.SELECT_DEFAULT_DISABLED : _d, _e = props.required, required = _e === void 0 ? constants_1.SELECT_DEFAULT_REQUIRED : _e, _f = props.multiline, multiline = _f === void 0 ? constants_1.SELECT_DEFAULT_MULTILINE : _f, _g = props.defaultOpen, defaultOpen = _g === void 0 ? constants_1.SELECT_DEFAULT_DEFAULT_OPEN : _g, id = props.id, name = props.name, valueProp = props.value, defaultValue = props.defaultValue, error = props.error, onChange = props.onChange, label = props.label, placeholder = props.placeholder, renderValueProp = props.renderValue, renderLeft = props.renderLeft, renderRight = props.renderRight, hint = props.hint, children = props.children, onClick = props.onClick, onKeyDown = props.onKeyDown, menuProps = props.menuProps, dataListPropsProp = props.dataListProps, bodyProps = props.bodyProps, hintProps = props.hintProps, bodeRefProp = props.bodyRef, onCloseProp = props.onClose, onOpenProp = props.onOpen, openProp = props.open, multiple = props.multiple, other = tslib_1.__rest(props, ["size", "autoFocus", "fullWidth", "disabled", "required", "multiline", "defaultOpen", "id", "name", "value", "defaultValue", "error", "onChange", "label", "placeholder", "renderValue", "renderLeft", "renderRight", "hint", "children", "onClick", "onKeyDown", "menuProps", "dataListProps", "bodyProps", "hintProps", "bodyRef", "onClose", "onOpen", "open", "multiple"]);
+    var _a = props.size, size = _a === void 0 ? constants_1.SELECT_DEFAULT_SIZE : _a, _b = props.autoFocus, autoFocus = _b === void 0 ? constants_1.SELECT_DEFAULT_AUTO_FOCUS : _b, _c = props.fullWidth, fullWidth = _c === void 0 ? constants_1.SELECT_DEFAULT_FULL_WIDTH : _c, _d = props.disabled, disabled = _d === void 0 ? constants_1.SELECT_DEFAULT_DISABLED : _d, _e = props.required, required = _e === void 0 ? constants_1.SELECT_DEFAULT_REQUIRED : _e, _f = props.multiline, multiline = _f === void 0 ? constants_1.SELECT_DEFAULT_MULTILINE : _f, _g = props.defaultOpen, defaultOpen = _g === void 0 ? constants_1.SELECT_DEFAULT_DEFAULT_OPEN : _g, valueProp = props.value, defaultValue = props.defaultValue, onChange = props.onChange, renderValueProp = props.renderValue, children = props.children, onClick = props.onClick, onKeyDown = props.onKeyDown, menuProps = props.menuProps, dataListPropsProp = props.dataListProps, bodyProps = props.bodyProps, bodeRefProp = props.bodyRef, onCloseProp = props.onClose, onOpenProp = props.onOpen, openProp = props.open, multiple = props.multiple, other = tslib_1.__rest(props, ["size", "autoFocus", "fullWidth", "disabled", "required", "multiline", "defaultOpen", "value", "defaultValue", "onChange", "renderValue", "children", "onClick", "onKeyDown", "menuProps", "dataListProps", "bodyProps", "bodyRef", "onClose", "onOpen", "open", "multiple"]);
     var bodyInnerRef = (0, react_1.useRef)(null);
     /** @deprecated props */
     var bodyRef = (bodyProps === null || bodyProps === void 0 ? void 0 : bodyProps.ref) || bodeRefProp;
@@ -45,7 +45,7 @@ var SelectRender = function (inProps, ref) {
     react_1.Children.forEach(resolvedChildren, function (child) {
         var _a, _b;
         if (!isNotSelectOption(child)) {
-            var label_1 = typeof child.props.children === 'string'
+            var label = typeof child.props.children === 'string'
                 ? (_a = child.props.label) !== null && _a !== void 0 ? _a : child.props.children
                 : child.props.label;
             var params = {
@@ -57,14 +57,14 @@ var SelectRender = function (inProps, ref) {
                 var selected = (_b = params.value) === null || _b === void 0 ? void 0 : _b.includes(child.props.value);
                 if (selected) {
                     currentLabel = tslib_1.__spreadArray(tslib_1.__spreadArray([], tslib_1.__read((params.label || [])), false), [
-                        label_1,
+                        label,
                     ], false);
                 }
             }
             if ((0, helpers_1.isNotMultipleParams)(params)) {
                 var selected = params.value === child.props.value;
                 if (selected) {
-                    currentLabel = label_1;
+                    currentLabel = label;
                 }
             }
         }
@@ -162,10 +162,10 @@ var SelectRender = function (inProps, ref) {
         }
     }, [autoFocus]);
     return (react_1.default.createElement(react_1.default.Fragment, null,
-        react_1.default.createElement(components_1.SelectInput, tslib_1.__assign({ id: id, name: name, label: label, placeholder: placeholder, size: size, disabled: disabled, required: required, multiline: multiline, error: error, hint: hint, fullWidth: fullWidth, renderLeft: renderLeft, renderRight: renderRight }, other, { open: open, value: inputValue() || '', onKeyDown: handleKeyDown, onClick: handleClick, bodyProps: tslib_1.__assign(tslib_1.__assign({}, bodyProps), { ref: (0, useMultiRef_1.useMultiRef)([bodyRef, bodyInnerRef]) }), hintProps: hintProps, ref: ref, renderedValue: renderValue({
+        react_1.default.createElement(components_1.SelectInput, tslib_1.__assign({ size: size, disabled: disabled, required: required, multiline: multiline, fullWidth: fullWidth }, other, { open: open, onClick: handleClick, onKeyDown: handleKeyDown, value: inputValue(), renderedValue: renderValue({
                 label: currentLabel,
                 value: valueState,
-            }) })),
+            }), bodyProps: tslib_1.__assign(tslib_1.__assign({}, bodyProps), { ref: (0, useMultiRef_1.useMultiRef)([bodyRef, bodyInnerRef]) }), ref: ref })),
         react_1.default.createElement(DataList_1.DataList, tslib_1.__assign({ equalAnchorWidth: true }, dataListProps, { listProps: tslib_1.__assign({ size: size, role: 'listbox' }, dataListProps === null || dataListProps === void 0 ? void 0 : dataListProps.listProps), open: open, multiple: multiple, selected: (valueState || ''), onSelect: handleChange, anchorRef: bodyInnerRef, onClose: handleClose }), children)));
 };
 exports.Select = (0, react_1.forwardRef)(SelectRender);

package/__inner__/cjs/components/Select/components/SelectInput/types.d.ts

@@ -60,6 +60,8 @@ export type SelectInputProps = Omit<ComponentPropsWithRef<'div'>, 'value' | 'def
     disabled?: boolean;
     /** Если {true} делает элемент обязательным к заполнению */
     required?: boolean;
+    /** Если {true} отключает обводку */
+    disableStroke?: boolean;
     /** Если {true} предотвращает сокращение текста в значении и
      * задает гибкую высоту контейнера компонента */
     multiline?: boolean;

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

@@ -65,6 +65,6 @@ export type SelectProps<MULTIPLE extends boolean = false> = {
     multiple?: MULTIPLE;
     /** Идентификатор компонента для тестов */
     'data-testid'?: string;
-} & Pick<SelectInputProps, 'id' | 'name' | 'label' | 'placeholder' | 'disabled' | 'required' | 'error' | 'hint' | 'fullWidth' | 'renderLeft' | 'renderRight' | 'multiline' | 'inputProps' | 'labelProps' | 'hintProps' | 'bodyProps' | 'inputRef' | 'labelRef' | 'bodyRef'> & Omit<ComponentPropsWithRef<'div'>, 'onChange' | 'defaultValue'> & SelectPropsDeprecated<MULTIPLE> & (SelectControlledProps<MULTIPLE> | SelectUncontrolledProps<MULTIPLE>) & (SelectOpenControlledProps | SelectOpenUncontrolledProps);
+} & Pick<SelectInputProps, 'id' | 'name' | 'label' | 'placeholder' | 'disabled' | 'required' | 'disableStroke' | 'error' | 'hint' | 'fullWidth' | 'renderLeft' | 'renderRight' | 'multiline' | 'inputProps' | 'labelProps' | 'hintProps' | 'bodyProps' | 'inputRef' | 'labelRef' | 'bodyRef'> & Omit<ComponentPropsWithRef<'div'>, 'onChange' | 'defaultValue'> & SelectPropsDeprecated<MULTIPLE> & (SelectControlledProps<MULTIPLE> | SelectUncontrolledProps<MULTIPLE>) & (SelectOpenControlledProps | SelectOpenUncontrolledProps);
 export type SelectComponent = <MULTIPLE extends boolean = false>(props: SelectProps<MULTIPLE>) => ReactElement | null;
 export {};

package/__inner__/cjs/components/Tag/Tag.css

@@ -5,6 +5,8 @@
   align-items: center;
   display: inline-flex;
   text-decoration: none;
+  white-space: nowrap;
+  max-inline-size: 100%;
   gap: var(--spacing-3xs);
   padding: var(--tag-padding);
   border-radius: var(--tag-border-radius);
@@ -13,6 +15,9 @@
     background-color var(--transition-default),
     color var(--transition-default);
 }
+.Tag > svg {
+    flex-shrink: 0;
+  }
 .Tag_size_2xs {
       font: var(--typography-text-3xs-font);
       letter-spacing: var(--typography-text-3xs-letter_spacing, 0);

package/__inner__/cjs/components/Tag/Tag.js

@@ -4,6 +4,7 @@ exports.Tag = exports.cnTag = exports.tagSizeVariant = exports.tagVariant = void
 var tslib_1 = require("tslib");
 require("./Tag.css");
 var react_1 = tslib_1.__importDefault(require("react"));
+var logger_1 = require("@ozen-ui/logger");
 var useThemeProps_1 = require("../../hooks/useThemeProps");
 var classname_1 = require("../../utils/classname");
 var polymorphicComponentWithRef_1 = require("../../utils/polymorphicComponentWithRef");
@@ -22,6 +23,9 @@ exports.cnTag = (0, classname_1.cn)('Tag');
 exports.Tag = (0, polymorphicComponentWithRef_1.polymorphicComponentWithRef)(function (inProps, ref) {
     var props = (0, useThemeProps_1.useThemeProps)({ props: inProps, name: 'Tag' });
     var _a = props.size, size = _a === void 0 ? constants_1.TAG_DEFAULT_SIZE : _a, _b = props.as, Tag = _b === void 0 ? constants_1.TAG_DEFAULT_AS : _b, _c = props.variant, variant = _c === void 0 ? constants_1.TAG_DEFAULT_VARIANT : _c, IconLeft = props.iconLeft, IconRight = props.iconRight, label = props.label, className = props.className, onRemove = props.onRemove, other = tslib_1.__rest(props, ["size", "as", "variant", "iconLeft", "iconRight", "label", "className", "onRemove"]);
+    if (process.env.NODE_ENV !== 'production') {
+        (0, logger_1.deprecate)('Компонент «Tag» устарел. Для замены используйте компонент «TagNext».');
+    }
     return (react_1.default.createElement(Tag, tslib_1.__assign({ className: (0, exports.cnTag)({ variant: variant, size: size }, [className]) }, other, { ref: ref }),
         IconLeft && react_1.default.createElement(IconLeft, { size: "s" }),
         react_1.default.createElement("span", { className: (0, exports.cnTag)('Label') }, label),

package/__inner__/cjs/components/TagNext/Tag.css

@@ -0,0 +1,244 @@
+/* stylelint-disable */
+.TagNext {
+  border: none;
+  outline: none;
+  align-items: center;
+  display: inline-flex;
+  text-decoration: none;
+  white-space: nowrap;
+  max-inline-size: 100%;
+  gap: var(--tag-gap);
+  padding: var(--tag-padding);
+  border-radius: var(--tag-border-radius);
+  transition:
+    box-shadow var(--transition-default),
+    background-color var(--transition-default),
+    color var(--transition-default);
+}
+.TagNext > svg {
+    flex-shrink: 0;
+  }
+.TagNext_size_2xs {
+      font: var(--typography-text-3xs-font);
+      letter-spacing: var(--typography-text-3xs-letter_spacing, 0);
+      text-transform: var(--typography-text-3xs-text_transform, none);
+
+      --tag-padding: 0 4px;
+      --tag-gap: var(--spacing-3xs);
+      --tag-border-radius: var(--border-radius-s);
+    }
+.TagNext_size_xs {
+      font: var(--typography-text-xs-font);
+      letter-spacing: var(--typography-text-xs-letter_spacing, 0);
+      text-transform: var(--typography-text-xs-text_transform, none);
+
+      --tag-padding: 4px 8px;
+      --tag-gap: var(--spacing-3xs);
+      --tag-border-radius: var(--border-radius-s);
+    }
+.TagNext_size_s {
+      font: var(--typography-text-s-font);
+      letter-spacing: var(--typography-text-s-letter_spacing, 0);
+      text-transform: var(--typography-text-s-text_transform, none);
+
+      --tag-padding: 6px 12px;
+      --tag-gap: var(--spacing-3xs);
+      --tag-border-radius: var(--border-radius-m);
+    }
+.TagNext_size_m {
+      font: var(--typography-text-m-font);
+      letter-spacing: var(--typography-text-m-letter_spacing, 0);
+      text-transform: var(--typography-text-m-text_transform, none);
+
+      --tag-padding: 6px 12px;
+      --tag-gap: var(--spacing-2xs);
+      --tag-border-radius: var(--border-radius-m);
+    }
+.TagNext_size_l {
+      font: var(--typography-text-l-font);
+      letter-spacing: var(--typography-text-l-letter_spacing, 0);
+      text-transform: var(--typography-text-l-text_transform, none);
+
+      --tag-padding: 6px 12px;
+      --tag-gap: var(--spacing-2xs);
+      --tag-border-radius: var(--border-radius-m);
+    }
+.TagNext_interactive:focus:not(:focus-visible) {
+      box-shadow: none;
+    }
+.TagNext_interactive:focus {
+      box-shadow: var(--shadow-outline-focused);
+    }
+/** primary & neutral */
+.TagNext_variant_primary.TagNext_color_neutral {
+    background-color: var(--color-background-action-secondary);
+    color: var(--color-content-action-on);
+  }
+.TagNext_variant_primary.TagNext_color_neutral.TagNext_interactive {
+    cursor: pointer;
+  }
+.TagNext_variant_primary.TagNext_color_neutral.TagNext_interactive:hover {
+      background-color: var(--color-background-action-secondary-hover);
+    }
+.TagNext_variant_primary.TagNext_color_neutral.TagNext_interactive:active {
+      background-color: var(--color-background-action-secondary-pressed);
+    }
+/** primary & action */
+.TagNext_variant_primary.TagNext_color_action {
+    background-color: var(--color-background-action);
+    color: var(--color-content-action-on);
+  }
+.TagNext_variant_primary.TagNext_color_action.TagNext_interactive {
+    cursor: pointer;
+  }
+.TagNext_variant_primary.TagNext_color_action.TagNext_interactive:hover {
+      background-color: var(--color-background-action-hover);
+    }
+.TagNext_variant_primary.TagNext_color_action.TagNext_interactive:active {
+      background-color: var(--color-background-action-pressed);
+    }
+/** primary & error */
+.TagNext_variant_primary.TagNext_color_error {
+    background-color: var(--color-background-error);
+    color: var(--color-content-action-on);
+  }
+.TagNext_variant_primary.TagNext_color_error.TagNext_interactive {
+    cursor: pointer;
+  }
+.TagNext_variant_primary.TagNext_color_error.TagNext_interactive:hover {
+      background-color: var(--color-background-error-hover);
+    }
+.TagNext_variant_primary.TagNext_color_error.TagNext_interactive:active {
+      background-color: var(--color-background-error-pressed);
+    }
+/** primary & warning */
+.TagNext_variant_primary.TagNext_color_warning {
+    background-color: var(--color-background-warning);
+    color: var(--color-content-action-on);
+  }
+.TagNext_variant_primary.TagNext_color_warning.TagNext_interactive {
+    cursor: pointer;
+  }
+.TagNext_variant_primary.TagNext_color_warning.TagNext_interactive:hover {
+      background-color: var(--color-background-warning-hover);
+    }
+.TagNext_variant_primary.TagNext_color_warning.TagNext_interactive:active {
+      background-color: var(--color-background-warning-pressed);
+    }
+/** primary & success */
+.TagNext_variant_primary.TagNext_color_success {
+    background-color: var(--color-background-success);
+    color: var(--color-content-action-on);
+  }
+.TagNext_variant_primary.TagNext_color_success.TagNext_interactive {
+    cursor: pointer;
+  }
+.TagNext_variant_primary.TagNext_color_success.TagNext_interactive:hover {
+      background-color: var(--color-background-success-hover);
+    }
+.TagNext_variant_primary.TagNext_color_success.TagNext_interactive:active {
+      background-color: var(--color-background-success-pressed);
+    }
+/** primary & info */
+.TagNext_variant_primary.TagNext_color_info {
+    background-color: var(--color-background-info);
+    color: var(--color-content-action-on);
+  }
+.TagNext_variant_primary.TagNext_color_info.TagNext_interactive {
+    cursor: pointer;
+  }
+.TagNext_variant_primary.TagNext_color_info.TagNext_interactive:hover {
+      background-color: var(--color-background-info-hover);
+    }
+.TagNext_variant_primary.TagNext_color_info.TagNext_interactive:active {
+      background-color: var(--color-background-info-pressed);
+    }
+/** secondary & neutral */
+.TagNext_variant_secondary.TagNext_color_neutral {
+    background-color: var(--color-background-secondary);
+    color: var(--color-content-primary);
+  }
+.TagNext_variant_secondary.TagNext_color_neutral.TagNext_interactive {
+    cursor: pointer;
+  }
+.TagNext_variant_secondary.TagNext_color_neutral.TagNext_interactive:hover {
+      background-color: var(--color-background-secondary-hover);
+    }
+.TagNext_variant_secondary.TagNext_color_neutral.TagNext_interactive:active {
+      background-color: var(--color-background-secondary-pressed);
+    }
+/** secondary & action */
+.TagNext_variant_secondary.TagNext_color_action {
+    background-color: var(--color-background-action-light);
+    color: var(--color-content-action-dark);
+  }
+.TagNext_variant_secondary.TagNext_color_action.TagNext_interactive {
+    cursor: pointer;
+  }
+.TagNext_variant_secondary.TagNext_color_action.TagNext_interactive:hover {
+      background-color: var(--color-background-action-light-hover);
+    }
+.TagNext_variant_secondary.TagNext_color_action.TagNext_interactive:active {
+      background-color: var(--color-background-action-light-pressed);
+    }
+/** secondary & error */
+.TagNext_variant_secondary.TagNext_color_error {
+    background-color: var(--color-background-error-light);
+    color: var(--color-content-error-dark);
+  }
+.TagNext_variant_secondary.TagNext_color_error.TagNext_interactive {
+    cursor: pointer;
+  }
+.TagNext_variant_secondary.TagNext_color_error.TagNext_interactive:hover {
+      background-color: var(--color-background-error-light-hover);
+    }
+.TagNext_variant_secondary.TagNext_color_error.TagNext_interactive:active {
+      background-color: var(--color-background-error-light-pressed);
+    }
+/** secondary & warning */
+.TagNext_variant_secondary.TagNext_color_warning {
+    background-color: var(--color-background-warning-light);
+    color: var(--color-content-warning-dark);
+  }
+.TagNext_variant_secondary.TagNext_color_warning.TagNext_interactive {
+    cursor: pointer;
+  }
+.TagNext_variant_secondary.TagNext_color_warning.TagNext_interactive:hover {
+      background-color: var(--color-background-warning-light-hover);
+    }
+.TagNext_variant_secondary.TagNext_color_warning.TagNext_interactive:active {
+      background-color: var(--color-background-warning-light-pressed);
+    }
+/** secondary & success */
+.TagNext_variant_secondary.TagNext_color_success {
+    background-color: var(--color-background-success-light);
+    color: var(--color-content-success-dark);
+  }
+.TagNext_variant_secondary.TagNext_color_success.TagNext_interactive {
+    cursor: pointer;
+  }
+.TagNext_variant_secondary.TagNext_color_success.TagNext_interactive:hover {
+      background-color: var(--color-background-success-light-hover);
+    }
+.TagNext_variant_secondary.TagNext_color_success.TagNext_interactive:active {
+      background-color: var(--color-background-success-light-pressed);
+    }
+/** secondary & info */
+.TagNext_variant_secondary.TagNext_color_info {
+    background-color: var(--color-background-info-light);
+    color: var(--color-content-info-dark);
+  }
+.TagNext_variant_secondary.TagNext_color_info.TagNext_interactive {
+    cursor: pointer;
+  }
+.TagNext_variant_secondary.TagNext_color_info.TagNext_interactive:hover {
+      background-color: var(--color-background-info-light-hover);
+    }
+.TagNext_variant_secondary.TagNext_color_info.TagNext_interactive:active {
+      background-color: var(--color-background-info-light-pressed);
+    }
+.TagNext-Label {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }