mimir-ui-kit 1.8.0 → 1.9.0

package/dist/{DatePickerModal-ByEDSY5o.js → DatePickerModal-DUUCHAWF.js}

@@ -3,28 +3,28 @@ import { useRef, useState, useEffect } from "react";
 import { week } from "./components/DatePicker/constants.js";
 import { formating } from "./utils/index.js";
 import { Button } from "./components/Button/Button.js";
-import './assets/DatePickerModal.css';const input = "_input_1a7j7_2";
-const wrapper = "_wrapper_1a7j7_20";
-const active = "_active_1a7j7_26";
-const button = "_button_1a7j7_34";
-const h = "_h_1a7j7_80";
-const b = "_b_1a7j7_34";
-const d = "_d_1a7j7_6";
-const m = "_m_1a7j7_99";
-const a = "_a_1a7j7_26";
-const prev = "_prev_1a7j7_101";
-const orange = "_orange_1a7j7_117";
-const current = "_current_1a7j7_142";
+import './assets/DatePickerModal.css';const input = "_input_187xq_2";
+const wrapper = "_wrapper_187xq_20";
+const active = "_active_187xq_26";
+const button = "_button_187xq_34";
+const h = "_h_187xq_80";
+const b = "_b_187xq_34";
+const d = "_d_187xq_6";
+const m = "_m_187xq_99";
+const a = "_a_187xq_26";
+const prev = "_prev_187xq_101";
+const orange = "_orange_187xq_117";
+const current = "_current_187xq_142";
 const cls = {
   input,
-  "date-wrapper": "_date-wrapper_1a7j7_6",
+  "date-wrapper": "_date-wrapper_187xq_6",
   wrapper,
   active,
-  "input-wrapper": "_input-wrapper_1a7j7_30",
-  "button-wrapper": "_button-wrapper_1a7j7_34",
+  "input-wrapper": "_input-wrapper_187xq_30",
+  "button-wrapper": "_button-wrapper_187xq_34",
   button,
-  "field-overlow": "_field-overlow_1a7j7_51",
-  "calendar-block": "_calendar-block_1a7j7_57",
+  "field-overlow": "_field-overlow_187xq_51",
+  "calendar-block": "_calendar-block_187xq_57",
   h,
   b,
   d,

package/dist/assets/DatePickerModal.css

@@ -1 +1 @@
-._input_1a7j7_2{padding-right:var(--space-3xl)}._date-wrapper_1a7j7_6{position:relative}._date-wrapper_1a7j7_6:hover input{background:var(--input-bg-color-hover)}._date-wrapper_1a7j7_6:before{position:absolute;top:0;right:60px;bottom:0;left:0;z-index:3;cursor:pointer;content:""}._wrapper_1a7j7_20{position:relative;display:flex;align-items:center;border-radius:var(--control-radius-s)}._wrapper_1a7j7_20._active_1a7j7_26{border-bottom:1px solid var(--citrine-100)}._input-wrapper_1a7j7_30{flex:1}._button-wrapper_1a7j7_34{position:absolute;top:0;right:0;z-index:2;display:flex;width:44px;height:100%;max-height:var(--button-height-xxl)}._button_1a7j7_34{align-self:center;background-color:transparent;border-radius:var(--control-radius-s)}._field-overlow_1a7j7_51{position:fixed;top:0;right:0;bottom:0;left:0;z-index:3}._calendar-block_1a7j7_57{position:absolute;z-index:3;display:flex;flex-direction:column;width:368px;max-height:none;padding:16px;font-weight:var(--font-weight-text-regular);font-size:var(--size-text-l);font-family:var(--font-inter);font-style:normal;line-height:var(--line-height-text-2xs);text-align:center;text-overflow:ellipsis;background:#fff;border-radius:var(--control-radius-s);box-shadow:0 0 #16172705,0 2px 4px #16172705,0 6px 6px #16172705,0 15px 9px #16172703;opacity:0;transition:height .5s ease-in;font-feature-settings:"zero";font-variant-numeric:slashed-zero}._calendar-block_1a7j7_57 ._h_1a7j7_80{display:flex;width:100%;color:var(--black-100)}._calendar-block_1a7j7_57 ._b_1a7j7_34{display:grid;grid-template-columns:repeat(7,1fr)}._calendar-block_1a7j7_57 ._d_1a7j7_6{display:flex;flex:1;align-items:center;justify-content:center;color:var(--black-100)}._calendar-block_1a7j7_57 ._m_1a7j7_99,._calendar-block_1a7j7_57 ._a_1a7j7_26,._calendar-block_1a7j7_57 ._prev_1a7j7_101{width:48px;height:48px;overflow:hidden}._calendar-block_1a7j7_57 ._m_1a7j7_99{display:flex;align-items:center;justify-content:center;color:var(--disabled)}._calendar-block_1a7j7_57 ._m_1a7j7_99 b{font-weight:var(--font-weight-text-regular)}._calendar-block_1a7j7_57 ._orange_1a7j7_117{color:var(--citrine-100)}._calendar-block_1a7j7_57 ._a_1a7j7_26{color:var(--black-100);border-radius:var(--control-radius-xs)}._calendar-block_1a7j7_57 ._a_1a7j7_26 b{display:flex;align-items:center;justify-content:center;width:100%;height:100%;font-weight:var(--font-weight-text-regular);cursor:pointer}._calendar-block_1a7j7_57 ._a_1a7j7_26 b:hover{background:var(--black-10)}._calendar-block_1a7j7_57 ._a_1a7j7_26 b:active{color:var(--white);background:var(--sapphire-100)}._calendar-block_1a7j7_57 ._current_1a7j7_142{background:var(--sapphire-10);border-radius:var(--control-radius-xs)}
+._input_187xq_2{padding-right:var(--space-3xl)}._date-wrapper_187xq_6{position:relative}._date-wrapper_187xq_6:hover input{background:var(--input-bg-color-hover)}._date-wrapper_187xq_6:before{position:absolute;top:0;right:60px;bottom:0;left:0;z-index:3;cursor:pointer;content:""}._wrapper_187xq_20{position:relative;display:flex;align-items:center;border-radius:var(--control-radius-s)}._wrapper_187xq_20._active_187xq_26{border-bottom:1px solid var(--citrine-100)}._input-wrapper_187xq_30{flex:1}._button-wrapper_187xq_34{position:absolute;top:0;right:0;z-index:2;display:flex;width:44px;height:100%;max-height:var(--button-height-xxl)}._button_187xq_34{align-self:center;background-color:transparent;border-radius:var(--control-radius-s)}._field-overlow_187xq_51{position:fixed;top:0;right:0;bottom:0;left:0;z-index:3}._calendar-block_187xq_57{position:absolute;z-index:3;display:flex;flex-direction:column;width:368px;max-height:none;padding:16px;font-weight:var(--font-weight-text-regular);font-size:var(--size-text-l);font-family:var(--font-inter);font-style:normal;line-height:var(--line-height-text-2xs);text-align:center;text-overflow:ellipsis;background:#fff;border-radius:var(--control-radius-s);box-shadow:0 0 #16172705,0 2px 4px #16172705,0 6px 6px #16172705,0 15px 9px #16172703;opacity:0;transition:height .5s ease-in;font-feature-settings:"zero";font-variant-numeric:slashed-zero}._calendar-block_187xq_57 ._h_187xq_80{display:flex;width:100%;color:var(--black-100)}._calendar-block_187xq_57 ._b_187xq_34{display:grid;grid-template-columns:repeat(7,1fr)}._calendar-block_187xq_57 ._d_187xq_6{display:flex;flex:1;align-items:center;justify-content:center;color:var(--black-100)}._calendar-block_187xq_57 ._m_187xq_99,._calendar-block_187xq_57 ._a_187xq_26,._calendar-block_187xq_57 ._prev_187xq_101{width:48px;height:48px;overflow:hidden}._calendar-block_187xq_57 ._m_187xq_99{display:flex;align-items:center;justify-content:center;color:var(--disabled)}._calendar-block_187xq_57 ._m_187xq_99 b{font-weight:var(--font-weight-text-regular)}._calendar-block_187xq_57 ._orange_187xq_117{color:var(--citrine-100)}._calendar-block_187xq_57 ._a_187xq_26{color:var(--black-100);border-radius:var(--control-radius-s)}._calendar-block_187xq_57 ._a_187xq_26 b{display:flex;align-items:center;justify-content:center;width:100%;height:100%;font-weight:var(--font-weight-text-regular);cursor:pointer}._calendar-block_187xq_57 ._a_187xq_26 b:hover{background:var(--black-10)}._calendar-block_187xq_57 ._a_187xq_26 b:active{color:var(--white);background:var(--sapphire-100)}._calendar-block_187xq_57 ._current_187xq_142{background:var(--sapphire-10);border-radius:var(--control-radius-s)}

package/dist/assets/SelectSearch.css

@@ -1 +1 @@
-._select-search_1oxs1_2{position:relative}._container_1oxs1_6{display:flex;gap:var(--select-search-gap);align-items:center;justify-content:space-between;height:var(--select-search-height);padding:var(--select-search-space);background-color:var(--black-5);border-radius:var(--select-search-radius)}._container-open_1oxs1_16{border-bottom:1px solid var(--citrine-100)}._full_1oxs1_20{width:100%}._selectorIcon-open_1oxs1_24{transform:rotate(180deg)}._placeholder_1oxs1_28{position:absolute;top:var(--select-search-input-top);left:0;color:var(--black-60);font-size:var(--select-search-input-font-size);transition:all .3s ease;pointer-events:none}._placeholder-top_1oxs1_37{font-size:var(--size-text-s);transform:translateY(-10px);transition-duration:.2s,.1s}._input_1oxs1_43{width:100%;height:100%;color:var(--black-100);font-size:var(--select-search-input-font-size);background-color:var(--black-5)}._input_1oxs1_43:focus~._placeholder_1oxs1_28{font-size:var(--size-text-s);transform:translateY(-10px);transition-duration:.2s,.1s}._input-container_1oxs1_55{position:relative;align-self:flex-end;width:100%}._button_1oxs1_61{display:flex;align-items:center;background:none;border:none;cursor:pointer}._options_1oxs1_69{position:absolute;top:100%;z-index:10;width:100%;height:-webkit-max-content;height:-moz-max-content;height:max-content;max-height:var(--select-search-options-height-desktop);overflow-y:auto;font-size:var(--size-text-l);background:var(--white);border-radius:0 0 var(--select-search-radius) var(--select-search-radius);box-shadow:var(--box-shadow-select-search)}._options_1oxs1_69::-webkit-scrollbar{width:2px}._options_1oxs1_69::-webkit-scrollbar-thumb{background-color:var(--black-80);border-radius:2px}._options_1oxs1_69::-webkit-scrollbar-track{background-color:var(--white)}@media (max-width: 600px){._options_1oxs1_69{max-height:var(--select-search-options-height-mobile)}}._option_1oxs1_69{padding:var(--select-search-option-space);cursor:pointer;transition:background-color .2s ease-in-out}._option-active_1oxs1_103{background-color:var(--black-5)}._option-inner_1oxs1_106{display:flex;gap:var(--space-m);align-items:center;justify-content:space-between}._no-options_1oxs1_113{padding:var(--select-search-option-space);color:var(--black-80)}._l_1oxs1_118{--select-search-height: var(--select-search-height-l);--select-search-space: var(--space-xss) var(--space-m);--select-search-radius: var(--control-radius);--select-search-input-font-size: var(--size-text-l);--select-search-gap: var(--space-2xs);--select-search-option-space: var(--space-2s) var(--space-m);--select-search-input-top: var(--select-search-input-top-l)}._xxl_1oxs1_128{--select-search-height: var(--select-search-height-xxl);--select-search-space: var(--space-xss) var(--space-m);--select-search-radius: var(--control-radius-xs);--select-search-input-font-size: var(--size-text-xl);--select-search-gap: var(--space-xs);--select-search-option-space: var(--space-2l) var(--space-m);--select-search-input-top: var(--select-search-input-top-xxl)}._selected-icon_1oxs1_138 path{fill:var(--sapphire-100)}
+._select-search_xswn2_2{position:relative}._container_xswn2_6{display:flex;gap:var(--select-search-gap);align-items:center;justify-content:space-between;height:var(--select-search-height);padding:var(--select-search-space);background-color:var(--black-5);border-radius:var(--select-search-radius)}._container-open_xswn2_16{border-bottom:1px solid var(--citrine-100)}._full_xswn2_20{width:100%}._selectorIcon-open_xswn2_24{transform:rotate(180deg)}._placeholder_xswn2_28{position:absolute;top:var(--select-search-input-top);left:0;color:var(--black-60);font-size:var(--select-search-input-font-size);transition:all .3s ease;pointer-events:none}._placeholder-top_xswn2_37{font-size:var(--size-text-s);transform:translateY(-10px);transition-duration:.2s,.1s}._input_xswn2_43{width:100%;height:100%;color:var(--black-100);font-size:var(--select-search-input-font-size);background-color:var(--black-5)}._input_xswn2_43:focus~._placeholder_xswn2_28{font-size:var(--size-text-s);transform:translateY(-10px);transition-duration:.2s,.1s}._input-container_xswn2_55{position:relative;align-self:flex-end;width:100%}._button_xswn2_61{display:flex;align-items:center;background:none;border:none;cursor:pointer}._options_xswn2_69{position:absolute;top:100%;z-index:10;width:100%;height:-webkit-max-content;height:-moz-max-content;height:max-content;max-height:var(--select-search-options-height-desktop);overflow-y:auto;font-size:var(--size-text-l);background:var(--white);border-radius:0 0 var(--select-search-radius) var(--select-search-radius);box-shadow:var(--box-shadow-select-search)}._options_xswn2_69::-webkit-scrollbar{width:2px}._options_xswn2_69::-webkit-scrollbar-thumb{background-color:var(--black-80);border-radius:2px}._options_xswn2_69::-webkit-scrollbar-track{background-color:var(--white)}@media (max-width: 600px){._options_xswn2_69{max-height:var(--select-search-options-height-mobile)}}._option_xswn2_69{padding:var(--select-search-option-space);cursor:pointer;transition:background-color .2s ease-in-out}._option-active_xswn2_103{background-color:var(--black-5)}._option-inner_xswn2_106{display:flex;gap:var(--space-m);align-items:center;justify-content:space-between}._no-options_xswn2_113{padding:var(--select-search-option-space);color:var(--black-80)}._l_xswn2_118{--select-search-height: var(--select-search-height-l);--select-search-space: var(--space-xss) var(--space-m);--select-search-radius: var(--control-radius);--select-search-input-font-size: var(--size-text-l);--select-search-gap: var(--space-2xs);--select-search-option-space: var(--space-2s) var(--space-m);--select-search-input-top: var(--select-search-input-top-l)}._xxl_xswn2_128{--select-search-height: var(--select-search-height-xxl);--select-search-space: var(--space-xss) var(--space-m);--select-search-radius: var(--control-radius-s);--select-search-input-font-size: var(--size-text-xl);--select-search-gap: var(--space-xs);--select-search-option-space: var(--space-2l) var(--space-m);--select-search-input-top: var(--select-search-input-top-xxl)}._selected-icon_xswn2_138 path{fill:var(--sapphire-100)}

package/dist/assets/Timer.css

@@ -0,0 +1 @@
+._timer_llwad_3{color:var(--black-60);font-size:var(--size-text-l)}@media (max-width: 600px){._timer_llwad_3{font-size:var(--size-text-m)}}

package/dist/components/DatePicker/DatePicker.d.ts

@@ -4,7 +4,7 @@ export type DatePicker = {
     /**
      * функция=callback, которая вызывается при изменении значения и передает имя и новое значение для обновления стейта (data),
      */
-    onChangeValue: (e: TDatePickerValue) => void;
+    onChangeValue?: (e: TDatePickerValue) => void;
     /**
     * функция ограничения выбора даты
     (до какой даты выбор не доступен)
@@ -13,17 +13,17 @@ export type DatePicker = {
     /**
      * значение из стейта (data)
      */
-    value: string;
+    value?: string;
 } & TInputProps;
 export type TDatePickerValue = {
-    value: Date;
+    value?: Date;
     name?: string;
 };
 export declare const DatePicker: import('react').MemoExoticComponent<import('react').ForwardRefExoticComponent<{
     /**
      * функция=callback, которая вызывается при изменении значения и передает имя и новое значение для обновления стейта (data),
      */
-    onChangeValue: (e: TDatePickerValue) => void;
+    onChangeValue?: (e: TDatePickerValue) => void;
     /**
     * функция ограничения выбора даты
     (до какой даты выбор не доступен)
@@ -32,7 +32,7 @@ export declare const DatePicker: import('react').MemoExoticComponent<import('rea
     /**
      * значение из стейта (data)
      */
-    value: string;
+    value?: string;
 } & import('../Input/types').TInputProps & {
     size?: import('../Input').TSize;
     variant?: import('../Input').TVariant;

package/dist/components/DatePicker/DatePicker.js

@@ -1,7 +1,7 @@
 import { jsxs, jsx } from "react/jsx-runtime";
 import { c as classNames } from "../../index-CweZ_OcN.js";
 import { memo, forwardRef, useState } from "react";
-import { c as cls, D as DatePickerModal } from "../../DatePickerModal-ByEDSY5o.js";
+import { c as cls, D as DatePickerModal } from "../../DatePickerModal-DUUCHAWF.js";
 import { useClickOutside } from "../../hooks/useClickOutside/useClickOutside.js";
 import { formating } from "../../utils/index.js";
 import { Button } from "../Button/Button.js";

package/dist/components/DatePicker/DatePickerModal.js

@@ -1,7 +1,7 @@
 import "react/jsx-runtime";
 import "react";
 import "./constants.js";
-import { D } from "../../DatePickerModal-ByEDSY5o.js";
+import { D } from "../../DatePickerModal-DUUCHAWF.js";
 import "../../utils/index.js";
 import "../Button/Button.js";
 export {

package/dist/components/DatePicker/index.d.ts

@@ -1,2 +1,2 @@
 export { DatePicker } from './DatePicker';
-export type { DatePicker as TDatePickerProps } from './DatePicker';
+export type { DatePicker as TDatePickerProps, TDatePickerValue } from './DatePicker';

package/dist/components/Input/Input.d.ts

@@ -7,7 +7,7 @@ export type TProps = TInputProps & {
      */
     size?: TSize;
     /**
-     * `Варинты отображения ввода. Может быть 'alert', 'success', 'default', 'default-gray', 'default-white'.`
+     * `Варианты отображения ввода. Может быть 'alert', 'success', 'default', 'default-gray', 'default-white'.`
      */
     variant?: TVariant;
     /**
@@ -37,7 +37,7 @@ export declare const Input: import('react').MemoExoticComponent<import('react').
      */
     size?: TSize;
     /**
-     * `Варинты отображения ввода. Может быть 'alert', 'success', 'default', 'default-gray', 'default-white'.`
+     * `Варианты отображения ввода. Может быть 'alert', 'success', 'default', 'default-gray', 'default-white'.`
      */
     variant?: TVariant;
     /**

package/dist/components/RadioGroup/RadioGroup.d.ts

@@ -7,7 +7,7 @@ export interface TRadioOption {
 /**
  * Свойства компонента RadioGroup.
  */
-export type TProps = Omit<RadioGroupProps, 'value'> & {
+export type TRadioGroupProps = Omit<RadioGroupProps, 'value'> & {
     /**
      * Массив опций для радиогруппы.
      * Каждая опция должна содержать значение и метку.
@@ -27,4 +27,20 @@ export type TProps = Omit<RadioGroupProps, 'value'> & {
 /**
  * Компонент RadioGroup для выбора одной опции из нескольких.
  */
-export declare function RadioGroup({ options, value, onChange, label, ...props }: TProps): import("react/jsx-runtime").JSX.Element;
+export declare const RadioGroup: import('react').ForwardRefExoticComponent<Omit<RadioGroupProps, "value"> & {
+    /**
+     * Массив опций для радиогруппы.
+     * Каждая опция должна содержать значение и метку.
+     */
+    options: TRadioOption[];
+    /**
+     * Выбранное значение опции.
+     * Может быть необязательным, если нет выбранного значения.
+     */
+    value?: TRadioOption["value"];
+    /**
+     * Текст метки, отображаемой над радиогруппой.
+     * Может быть необязательным.
+     */
+    label?: string;
+} & import('react').RefAttributes<HTMLElement>>;

package/dist/components/RadioGroup/RadioGroup.js

@@ -1,6 +1,6 @@
 import { jsxs, jsx, Fragment } from "react/jsx-runtime";
 import { W, K, w, b as a, z as z$1, U, y, l, T, o, j as j$1, H, s, n, $ as $f7dceffc5ad7768b$export$4e328f61c538687f, c as $6179b936705e76d3$export$ae780daf29e6d456, D, d as u$1, I, G, a as u$2, u as u$3, e as o$1, f as p, r } from "../../label-BXAcSLy0.js";
-import React__default, { createContext, useId, useReducer, useRef, useMemo, useCallback, useContext } from "react";
+import React__default, { createContext, useId, useReducer, useRef, useMemo, useCallback, useContext, forwardRef } from "react";
 import { u, P, F, T as T$1, _ } from "../../focus-management-CFDo6ZSc.js";
 import { c as classNames } from "../../index-CweZ_OcN.js";
 import '../../assets/RadioGroup.css';var Le = ((e) => (e[e.RegisterOption = 0] = "RegisterOption", e[e.UnregisterOption = 1] = "UnregisterOption", e))(Le || {});
@@ -116,51 +116,57 @@ const cls = {
   frame,
   checked
 };
-function RadioGroup({
-  options,
-  value,
-  onChange,
-  label: label2,
-  ...props
-}) {
-  const radioClasses = classNames(cls["radio-wrapper"], {
-    [cls.disabled]: props.disabled
-  });
-  return /* @__PURE__ */ jsxs(Tt, { value, className: cls.group, onChange, ...props, children: [
-    label2 && /* @__PURE__ */ jsx(K, { as: "p", className: cls.label, children: label2 }),
-    /* @__PURE__ */ jsx("div", { className: cls["content-wrapper"], children: options.map(({ label: label22, value: value2 }) => /* @__PURE__ */ jsx(
-      Be,
+const RadioGroup = forwardRef(
+  ({ options, value, onChange, label: label2, ...props }, ref) => {
+    const radioClasses = classNames(cls["radio-wrapper"], {
+      [cls.disabled]: props.disabled
+    });
+    return /* @__PURE__ */ jsxs(
+      Tt,
       {
-        as: "span",
-        value: value2,
-        disabled: props.disabled,
-        className: radioClasses,
-        children: ({ checked: checked2, disabled: disabled2 }) => /* @__PURE__ */ jsxs(Fragment, { children: [
-          /* @__PURE__ */ jsx(
-            K,
+        ref,
+        value,
+        className: cls.group,
+        onChange,
+        ...props,
+        children: [
+          label2 && /* @__PURE__ */ jsx(K, { as: "p", className: cls.label, children: label2 }),
+          /* @__PURE__ */ jsx("div", { className: cls["content-wrapper"], children: options.map(({ label: label22, value: value2 }) => /* @__PURE__ */ jsx(
+            Be,
             {
-              as: "button",
-              className: classNames(cls.radio, {
-                [cls.disabled]: props.disabled
-              }),
-              children: /* @__PURE__ */ jsx(
-                "span",
-                {
-                  className: classNames(cls.frame, {
-                    [cls.checked]: checked2,
-                    [cls.disabled]: disabled2
-                  })
-                }
-              )
-            }
-          ),
-          label22
-        ] })
-      },
-      label22
-    )) })
-  ] });
-}
+              as: "span",
+              value: value2,
+              disabled: props.disabled,
+              className: radioClasses,
+              children: ({ checked: checked2, disabled: disabled2 }) => /* @__PURE__ */ jsxs(Fragment, { children: [
+                /* @__PURE__ */ jsx(
+                  K,
+                  {
+                    as: "button",
+                    className: classNames(cls.radio, {
+                      [cls.disabled]: props.disabled
+                    }),
+                    children: /* @__PURE__ */ jsx(
+                      "span",
+                      {
+                        className: classNames(cls.frame, {
+                          [cls.checked]: checked2,
+                          [cls.disabled]: disabled2
+                        })
+                      }
+                    )
+                  }
+                ),
+                label22
+              ] })
+            },
+            label22
+          )) })
+        ]
+      }
+    );
+  }
+);
 export {
   RadioGroup
 };

package/dist/components/RadioGroup/index.d.ts

@@ -1,2 +1,2 @@
 export { RadioGroup } from './RadioGroup';
-export type { TRadioOption } from './RadioGroup';
+export type { TRadioOption, TRadioGroupProps } from './RadioGroup';

package/dist/components/SelectSearch/SelectSearch.d.ts

@@ -1,21 +1,15 @@
-import { TSelectSearchItem, TSelectSearchProps } from './types';
+import { ESelectSearchSize } from './constants';
 
-export type TProps = TSelectSearchProps & {
-    /**
-     * Список элементов для выбора в SelectSearch.
-     */
+export type TSelectSearchItem = {
+    id: number;
+    name: string;
+};
+export type TSelectSearchProps = {
     items: TSelectSearchItem[];
-    /**
-     * Текст-заполнитель для поля ввода.
-     */
+    value?: TSelectSearchItem | null;
+    onChange?: (value: TSelectSearchItem | null) => void;
     placeholder?: string;
-    /**
-     * Размер SelectSearch. Допустимые значения: `l`, `xxl`.
-     */
-    size?: 'l' | 'xxl';
-    /**
-     * Флаг, указывающий, что элемент занимает все доступное пространство.
-     */
+    size?: ESelectSearchSize;
     full?: boolean;
 };
-export declare const SelectSearch: ({ items, placeholder, size, onChange, value, full }: TProps) => import("react/jsx-runtime").JSX.Element;
+export declare const SelectSearch: import('react').ForwardRefExoticComponent<TSelectSearchProps & import('react').RefAttributes<HTMLElement>>;

package/dist/components/SelectSearch/SelectSearch.js

@@ -1,7 +1,7 @@
 import { jsx, jsxs, Fragment as Fragment$1 } from "react/jsx-runtime";
 import { c as classNames } from "../../index-CweZ_OcN.js";
 import * as React from "react";
-import React__default, { useReducer, useMemo, useSyncExternalStore, useId as useId$1, useEffect, useCallback, useRef, useState, useLayoutEffect, createContext, useContext, Fragment, createRef } from "react";
+import React__default, { useReducer, useMemo, useSyncExternalStore, useId as useId$1, useEffect, useCallback, useRef, useState, useLayoutEffect, createContext, useContext, Fragment, createRef, forwardRef } from "react";
 import { ESelectSearchSize } from "./constants.js";
 import { useMediaQuery } from "../../hooks/useMediaQuery/useMediaQuery.js";
 import { EMediaQuery } from "../../hooks/useMediaQuery/constants.js";
@@ -3841,125 +3841,121 @@ function No(o2, r2) {
   return H({ ourProps: { id: d2, ref: M2, role: "option", tabIndex: s2 === true ? void 0 : -1, "aria-disabled": s2 === true ? true : void 0, "aria-selected": C, disabled: void 0, onMouseDown: y2, onFocus: A2, onPointerEnter: h2, onMouseEnter: h2, onPointerMove: O, onMouseMove: O, onPointerLeave: G2, onMouseLeave: G2 }, theirProps: a3, slot: J2, defaultTag: ko, name: "Combobox.Option" });
 }
 let Uo = W$1(ho), Ho = W$1(Vo), Go = W$1(Mo), jo = K, zo = W$1(Bo), Ko = W$1(No), Nt = Object.assign(Uo, { Input: Go, Button: Ho, Label: jo, Options: zo, Option: Ko });
-const container = "_container_1oxs1_6";
-const full = "_full_1oxs1_20";
-const placeholder = "_placeholder_1oxs1_28";
-const input = "_input_1oxs1_43";
-const button = "_button_1oxs1_61";
-const options = "_options_1oxs1_69";
-const option = "_option_1oxs1_69";
-const l = "_l_1oxs1_118";
-const xxl = "_xxl_1oxs1_128";
+const container = "_container_xswn2_6";
+const full = "_full_xswn2_20";
+const placeholder = "_placeholder_xswn2_28";
+const input = "_input_xswn2_43";
+const button = "_button_xswn2_61";
+const options = "_options_xswn2_69";
+const option = "_option_xswn2_69";
+const l = "_l_xswn2_118";
+const xxl = "_xxl_xswn2_128";
 const cls = {
-  "select-search": "_select-search_1oxs1_2",
+  "select-search": "_select-search_xswn2_2",
   container,
-  "container-open": "_container-open_1oxs1_16",
+  "container-open": "_container-open_xswn2_16",
   full,
-  "selectorIcon-open": "_selectorIcon-open_1oxs1_24",
+  "selectorIcon-open": "_selectorIcon-open_xswn2_24",
   placeholder,
-  "placeholder-top": "_placeholder-top_1oxs1_37",
+  "placeholder-top": "_placeholder-top_xswn2_37",
   input,
-  "input-container": "_input-container_1oxs1_55",
+  "input-container": "_input-container_xswn2_55",
   button,
   options,
   option,
-  "option-active": "_option-active_1oxs1_103",
-  "option-inner": "_option-inner_1oxs1_106",
-  "no-options": "_no-options_1oxs1_113",
+  "option-active": "_option-active_xswn2_103",
+  "option-inner": "_option-inner_xswn2_106",
+  "no-options": "_no-options_xswn2_113",
   l,
   xxl,
-  "selected-icon": "_selected-icon_1oxs1_138"
+  "selected-icon": "_selected-icon_xswn2_138"
 };
-const SelectSearch = ({
-  items,
-  placeholder: placeholder2,
-  size: size2 = ESelectSearchSize.L,
-  onChange,
-  value,
-  full: full2
-}) => {
-  const [searchValue, setSearchValue] = useState("");
-  const [isItemSelected, setIsItemSelected] = useState(false);
-  const isMobile = useMediaQuery(EMediaQuery.XSS);
-  const filteredItems = useMemo(() => {
-    return searchValue.trim().toLowerCase() ? items.filter(
-      (item) => item.name.toLowerCase().includes(searchValue.toLowerCase())
-    ) : items;
-  }, [searchValue, items]);
-  const handleOneChange = (newValue) => {
-    onChange == null ? void 0 : onChange(newValue);
-    setIsItemSelected(!!newValue);
-  };
-  return /* @__PURE__ */ jsx(
-    Nt,
-    {
-      as: "div",
-      onChange: handleOneChange,
-      value,
-      className: classNames(cls["select-search"], { [cls.full]: full2 }),
-      children: ({ open }) => /* @__PURE__ */ jsxs(Fragment$1, { children: [
-        /* @__PURE__ */ jsxs(
-          "div",
-          {
-            className: classNames(cls.container, cls[size2], {
-              [cls["container-open"]]: open
-            }),
-            children: [
-              /* @__PURE__ */ jsxs("div", { className: cls["input-container"], children: [
-                /* @__PURE__ */ jsx(
-                  Go,
+const SelectSearch = forwardRef(
+  ({ items, placeholder: placeholder2, size: size2 = ESelectSearchSize.L, onChange, value, full: full2 }, ref) => {
+    const [searchValue, setSearchValue] = useState("");
+    const [isItemSelected, setIsItemSelected] = useState(false);
+    const isMobile = useMediaQuery(EMediaQuery.XSS);
+    const filteredItems = useMemo(() => {
+      return searchValue.trim().toLowerCase() ? items.filter(
+        (item) => item.name.toLowerCase().includes(searchValue.toLowerCase())
+      ) : items;
+    }, [searchValue, items]);
+    const handleOneChange = (newValue) => {
+      onChange == null ? void 0 : onChange(newValue);
+      setIsItemSelected(!!newValue);
+    };
+    return /* @__PURE__ */ jsx(
+      Nt,
+      {
+        as: "div",
+        onChange: handleOneChange,
+        value,
+        className: classNames(cls["select-search"], { [cls.full]: full2 }),
+        ref,
+        children: ({ open }) => /* @__PURE__ */ jsxs(Fragment$1, { children: [
+          /* @__PURE__ */ jsxs(
+            "div",
+            {
+              className: classNames(cls.container, cls[size2], {
+                [cls["container-open"]]: open
+              }),
+              children: [
+                /* @__PURE__ */ jsxs("div", { className: cls["input-container"], children: [
+                  /* @__PURE__ */ jsx(
+                    Go,
+                    {
+                      className: cls.input,
+                      onChange: (event) => setSearchValue(event.target.value),
+                      displayValue: (item) => item == null ? void 0 : item.name
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(
+                    "span",
+                    {
+                      className: classNames(cls.placeholder, {
+                        [cls["placeholder-top"]]: isItemSelected || open || searchValue
+                      }),
+                      children: placeholder2
+                    }
+                  )
+                ] }),
+                /* @__PURE__ */ jsx(Ho, { className: cls.button, children: /* @__PURE__ */ jsx(
+                  Icon,
                   {
-                    className: cls.input,
-                    onChange: (event) => setSearchValue(event.target.value),
-                    displayValue: (item) => item == null ? void 0 : item.name
+                    iconName: isMobile ? "DropdownArrowBottom16px" : "DropdownArrowDown24px",
+                    className: classNames(cls["selector-icon"], {
+                      [cls["selector-icon-open"]]: open
+                    })
                   }
-                ),
-                /* @__PURE__ */ jsx(
-                  "span",
+                ) })
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsx(zo, { className: classNames(cls.options, cls[size2]), children: !items.length ? /* @__PURE__ */ jsx("div", { className: cls["no-options"], children: "Нет данных" }) : !filteredItems.length && searchValue.trim() ? /* @__PURE__ */ jsx("div", { className: cls["no-options"], children: "Ничего не найдено" }) : filteredItems.map((item) => /* @__PURE__ */ jsx(
+            Ko,
+            {
+              value: item,
+              className: ({ focus }) => classNames(cls.option, {
+                [cls["option-active"]]: focus
+              }),
+              children: ({ selected }) => /* @__PURE__ */ jsxs("div", { className: cls["option-inner"], children: [
+                /* @__PURE__ */ jsx("span", { className: cls["option-text"], children: item.name }),
+                selected && /* @__PURE__ */ jsx(
+                  Icon,
                   {
-                    className: classNames(cls.placeholder, {
-                      [cls["placeholder-top"]]: isItemSelected || open || searchValue
-                    }),
-                    children: placeholder2
+                    iconName: "Done16px",
+                    className: cls["selected-icon"]
                   }
                 )
-              ] }),
-              /* @__PURE__ */ jsx(Ho, { className: cls.button, children: /* @__PURE__ */ jsx(
-                Icon,
-                {
-                  iconName: isMobile ? "DropdownArrowBottom16px" : "DropdownArrowDown24px",
-                  className: classNames(cls["selector-icon"], {
-                    [cls["selector-icon-open"]]: open
-                  })
-                }
-              ) })
-            ]
-          }
-        ),
-        /* @__PURE__ */ jsx(zo, { className: classNames(cls.options, cls[size2]), children: !items.length ? /* @__PURE__ */ jsx("div", { className: cls["no-options"], children: "Нет данных" }) : !filteredItems.length && searchValue.trim() ? /* @__PURE__ */ jsx("div", { className: cls["no-options"], children: "Ничего не найдено" }) : filteredItems.map((item) => /* @__PURE__ */ jsx(
-          Ko,
-          {
-            value: item,
-            className: ({ focus }) => classNames(cls.option, {
-              [cls["option-active"]]: focus
-            }),
-            children: ({ selected }) => /* @__PURE__ */ jsxs("div", { className: cls["option-inner"], children: [
-              /* @__PURE__ */ jsx("span", { className: cls["option-text"], children: item.name }),
-              selected && /* @__PURE__ */ jsx(
-                Icon,
-                {
-                  iconName: "Done16px",
-                  className: cls["selected-icon"]
-                }
-              )
-            ] })
-          },
-          item.id
-        )) })
-      ] })
-    }
-  );
-};
+              ] })
+            },
+            item.id
+          )) })
+        ] })
+      }
+    );
+  }
+);
 export {
   SelectSearch
 };

package/dist/components/SelectSearch/index.d.ts

@@ -1,3 +1,2 @@
-export { SelectSearch, type TProps as TSelectSearchProps } from './SelectSearch';
+export { SelectSearch, type TSelectSearchProps, type TSelectSearchItem } from './SelectSearch';
 export { ESelectSearchSize } from './constants';
-export type { TSelectSearchItem, TSelectSearchSize } from './types';