mimir-ui-kit 1.8.0 → 1.9.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/{DatePickerModal-ByEDSY5o.js → DatePickerModal-DUUCHAWF.js} +17 -17
- package/dist/assets/DatePickerModal.css +1 -1
- package/dist/assets/SelectSearch.css +1 -1
- package/dist/assets/Timer.css +1 -0
- package/dist/components/DatePicker/DatePicker.d.ts +5 -5
- package/dist/components/DatePicker/DatePicker.js +1 -1
- package/dist/components/DatePicker/DatePickerModal.js +1 -1
- package/dist/components/DatePicker/index.d.ts +1 -1
- package/dist/components/Input/Input.d.ts +2 -2
- package/dist/components/RadioGroup/RadioGroup.d.ts +18 -2
- package/dist/components/RadioGroup/RadioGroup.js +50 -44
- package/dist/components/RadioGroup/index.d.ts +1 -1
- package/dist/components/SelectSearch/SelectSearch.d.ts +10 -16
- package/dist/components/SelectSearch/SelectSearch.js +100 -104
- package/dist/components/SelectSearch/index.d.ts +1 -2
- package/dist/components/Switch/Switch.d.ts +293 -3
- package/dist/components/Switch/Switch.js +27 -22
- package/dist/components/Switch/index.d.ts +1 -1
- package/dist/components/Timer/Timer.d.ts +24 -0
- package/dist/components/Timer/Timer.js +29 -0
- package/dist/components/Timer/index.d.ts +1 -0
- package/dist/components/Timer/index.js +4 -0
- package/dist/components/index.d.ts +4 -3
- package/dist/components/index.js +2 -0
- package/dist/hooks/index.d.ts +2 -0
- package/dist/hooks/index.js +5 -1
- package/dist/hooks/useInterval/index.d.ts +1 -0
- package/dist/hooks/useInterval/index.js +4 -0
- package/dist/hooks/useInterval/useInterval.d.ts +1 -0
- package/dist/hooks/useInterval/useInterval.js +17 -0
- package/dist/hooks/useTimer/index.d.ts +18 -0
- package/dist/hooks/useTimer/index.js +83 -0
- package/dist/hooks/useTimer/useTimer.d.ts +18 -0
- package/dist/hooks/useTimer/useTimer.js +83 -0
- package/dist/hooks/useTimer/utils.d.ts +20 -0
- package/dist/hooks/useTimer/utils.js +78 -0
- package/dist/index.js +7 -1
- package/package.json +1 -1
- package/dist/components/SelectSearch/types.d.ts +0 -17
- package/dist/components/SelectSearch/types.js +0 -1
- package/dist/components/Switch/types.d.ts +0 -4
- package/dist/components/Switch/types.js +0 -1
@@ -3,28 +3,28 @@ import { useRef, useState, useEffect } from "react";
|
|
3
3
|
import { week } from "./components/DatePicker/constants.js";
|
4
4
|
import { formating } from "./utils/index.js";
|
5
5
|
import { Button } from "./components/Button/Button.js";
|
6
|
-
import './assets/DatePickerModal.css';const input = "
|
7
|
-
const wrapper = "
|
8
|
-
const active = "
|
9
|
-
const button = "
|
10
|
-
const h = "
|
11
|
-
const b = "
|
12
|
-
const d = "
|
13
|
-
const m = "
|
14
|
-
const a = "
|
15
|
-
const prev = "
|
16
|
-
const orange = "
|
17
|
-
const current = "
|
6
|
+
import './assets/DatePickerModal.css';const input = "_input_187xq_2";
|
7
|
+
const wrapper = "_wrapper_187xq_20";
|
8
|
+
const active = "_active_187xq_26";
|
9
|
+
const button = "_button_187xq_34";
|
10
|
+
const h = "_h_187xq_80";
|
11
|
+
const b = "_b_187xq_34";
|
12
|
+
const d = "_d_187xq_6";
|
13
|
+
const m = "_m_187xq_99";
|
14
|
+
const a = "_a_187xq_26";
|
15
|
+
const prev = "_prev_187xq_101";
|
16
|
+
const orange = "_orange_187xq_117";
|
17
|
+
const current = "_current_187xq_142";
|
18
18
|
const cls = {
|
19
19
|
input,
|
20
|
-
"date-wrapper": "_date-
|
20
|
+
"date-wrapper": "_date-wrapper_187xq_6",
|
21
21
|
wrapper,
|
22
22
|
active,
|
23
|
-
"input-wrapper": "_input-
|
24
|
-
"button-wrapper": "_button-
|
23
|
+
"input-wrapper": "_input-wrapper_187xq_30",
|
24
|
+
"button-wrapper": "_button-wrapper_187xq_34",
|
25
25
|
button,
|
26
|
-
"field-overlow": "_field-
|
27
|
-
"calendar-block": "_calendar-
|
26
|
+
"field-overlow": "_field-overlow_187xq_51",
|
27
|
+
"calendar-block": "_calendar-block_187xq_57",
|
28
28
|
h,
|
29
29
|
b,
|
30
30
|
d,
|
@@ -1 +1 @@
|
|
1
|
-
.
|
1
|
+
._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)}
|
@@ -1 +1 @@
|
|
1
|
-
._select-
|
1
|
+
._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)}
|
@@ -0,0 +1 @@
|
|
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)}}
|
@@ -4,7 +4,7 @@ export type DatePicker = {
|
|
4
4
|
/**
|
5
5
|
* функция=callback, которая вызывается при изменении значения и передает имя и новое значение для обновления стейта (data),
|
6
6
|
*/
|
7
|
-
onChangeValue
|
7
|
+
onChangeValue?: (e: TDatePickerValue) => void;
|
8
8
|
/**
|
9
9
|
* функция ограничения выбора даты
|
10
10
|
(до какой даты выбор не доступен)
|
@@ -13,17 +13,17 @@ export type DatePicker = {
|
|
13
13
|
/**
|
14
14
|
* значение из стейта (data)
|
15
15
|
*/
|
16
|
-
value
|
16
|
+
value?: string;
|
17
17
|
} & TInputProps;
|
18
18
|
export type TDatePickerValue = {
|
19
|
-
value
|
19
|
+
value?: Date;
|
20
20
|
name?: string;
|
21
21
|
};
|
22
22
|
export declare const DatePicker: import('react').MemoExoticComponent<import('react').ForwardRefExoticComponent<{
|
23
23
|
/**
|
24
24
|
* функция=callback, которая вызывается при изменении значения и передает имя и новое значение для обновления стейта (data),
|
25
25
|
*/
|
26
|
-
onChangeValue
|
26
|
+
onChangeValue?: (e: TDatePickerValue) => void;
|
27
27
|
/**
|
28
28
|
* функция ограничения выбора даты
|
29
29
|
(до какой даты выбор не доступен)
|
@@ -32,7 +32,7 @@ export declare const DatePicker: import('react').MemoExoticComponent<import('rea
|
|
32
32
|
/**
|
33
33
|
* значение из стейта (data)
|
34
34
|
*/
|
35
|
-
value
|
35
|
+
value?: string;
|
36
36
|
} & import('../Input/types').TInputProps & {
|
37
37
|
size?: import('../Input').TSize;
|
38
38
|
variant?: import('../Input').TVariant;
|
@@ -1,7 +1,7 @@
|
|
1
1
|
import { jsxs, jsx } from "react/jsx-runtime";
|
2
2
|
import { c as classNames } from "../../index-CweZ_OcN.js";
|
3
3
|
import { memo, forwardRef, useState } from "react";
|
4
|
-
import { c as cls, D as DatePickerModal } from "../../DatePickerModal-
|
4
|
+
import { c as cls, D as DatePickerModal } from "../../DatePickerModal-DUUCHAWF.js";
|
5
5
|
import { useClickOutside } from "../../hooks/useClickOutside/useClickOutside.js";
|
6
6
|
import { formating } from "../../utils/index.js";
|
7
7
|
import { Button } from "../Button/Button.js";
|
@@ -1,2 +1,2 @@
|
|
1
1
|
export { DatePicker } from './DatePicker';
|
2
|
-
export type { DatePicker as TDatePickerProps } from './DatePicker';
|
2
|
+
export type { DatePicker as TDatePickerProps, TDatePickerValue } from './DatePicker';
|
@@ -7,7 +7,7 @@ export type TProps = TInputProps & {
|
|
7
7
|
*/
|
8
8
|
size?: TSize;
|
9
9
|
/**
|
10
|
-
*
|
10
|
+
* `Варианты отображения ввода. Может быть 'alert', 'success', 'default', 'default-gray', 'default-white'.`
|
11
11
|
*/
|
12
12
|
variant?: TVariant;
|
13
13
|
/**
|
@@ -37,7 +37,7 @@ export declare const Input: import('react').MemoExoticComponent<import('react').
|
|
37
37
|
*/
|
38
38
|
size?: TSize;
|
39
39
|
/**
|
40
|
-
*
|
40
|
+
* `Варианты отображения ввода. Может быть 'alert', 'success', 'default', 'default-gray', 'default-white'.`
|
41
41
|
*/
|
42
42
|
variant?: TVariant;
|
43
43
|
/**
|
@@ -7,7 +7,7 @@ export interface TRadioOption {
|
|
7
7
|
/**
|
8
8
|
* Свойства компонента RadioGroup.
|
9
9
|
*/
|
10
|
-
export type
|
10
|
+
export type TRadioGroupProps = Omit<RadioGroupProps, 'value'> & {
|
11
11
|
/**
|
12
12
|
* Массив опций для радиогруппы.
|
13
13
|
* Каждая опция должна содержать значение и метку.
|
@@ -27,4 +27,20 @@ export type TProps = Omit<RadioGroupProps, 'value'> & {
|
|
27
27
|
/**
|
28
28
|
* Компонент RadioGroup для выбора одной опции из нескольких.
|
29
29
|
*/
|
30
|
-
export declare
|
30
|
+
export declare const RadioGroup: import('react').ForwardRefExoticComponent<Omit<RadioGroupProps, "value"> & {
|
31
|
+
/**
|
32
|
+
* Массив опций для радиогруппы.
|
33
|
+
* Каждая опция должна содержать значение и метку.
|
34
|
+
*/
|
35
|
+
options: TRadioOption[];
|
36
|
+
/**
|
37
|
+
* Выбранное значение опции.
|
38
|
+
* Может быть необязательным, если нет выбранного значения.
|
39
|
+
*/
|
40
|
+
value?: TRadioOption["value"];
|
41
|
+
/**
|
42
|
+
* Текст метки, отображаемой над радиогруппой.
|
43
|
+
* Может быть необязательным.
|
44
|
+
*/
|
45
|
+
label?: string;
|
46
|
+
} & import('react').RefAttributes<HTMLElement>>;
|
@@ -1,6 +1,6 @@
|
|
1
1
|
import { jsxs, jsx, Fragment } from "react/jsx-runtime";
|
2
2
|
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";
|
3
|
-
import React__default, { createContext, useId, useReducer, useRef, useMemo, useCallback, useContext } from "react";
|
3
|
+
import React__default, { createContext, useId, useReducer, useRef, useMemo, useCallback, useContext, forwardRef } from "react";
|
4
4
|
import { u, P, F, T as T$1, _ } from "../../focus-management-CFDo6ZSc.js";
|
5
5
|
import { c as classNames } from "../../index-CweZ_OcN.js";
|
6
6
|
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 = {
|
|
116
116
|
frame,
|
117
117
|
checked
|
118
118
|
};
|
119
|
-
|
120
|
-
options,
|
121
|
-
|
122
|
-
|
123
|
-
|
124
|
-
|
125
|
-
|
126
|
-
const radioClasses = classNames(cls["radio-wrapper"], {
|
127
|
-
[cls.disabled]: props.disabled
|
128
|
-
});
|
129
|
-
return /* @__PURE__ */ jsxs(Tt, { value, className: cls.group, onChange, ...props, children: [
|
130
|
-
label2 && /* @__PURE__ */ jsx(K, { as: "p", className: cls.label, children: label2 }),
|
131
|
-
/* @__PURE__ */ jsx("div", { className: cls["content-wrapper"], children: options.map(({ label: label22, value: value2 }) => /* @__PURE__ */ jsx(
|
132
|
-
Be,
|
119
|
+
const RadioGroup = forwardRef(
|
120
|
+
({ options, value, onChange, label: label2, ...props }, ref) => {
|
121
|
+
const radioClasses = classNames(cls["radio-wrapper"], {
|
122
|
+
[cls.disabled]: props.disabled
|
123
|
+
});
|
124
|
+
return /* @__PURE__ */ jsxs(
|
125
|
+
Tt,
|
133
126
|
{
|
134
|
-
|
135
|
-
value
|
136
|
-
|
137
|
-
|
138
|
-
|
139
|
-
|
140
|
-
|
127
|
+
ref,
|
128
|
+
value,
|
129
|
+
className: cls.group,
|
130
|
+
onChange,
|
131
|
+
...props,
|
132
|
+
children: [
|
133
|
+
label2 && /* @__PURE__ */ jsx(K, { as: "p", className: cls.label, children: label2 }),
|
134
|
+
/* @__PURE__ */ jsx("div", { className: cls["content-wrapper"], children: options.map(({ label: label22, value: value2 }) => /* @__PURE__ */ jsx(
|
135
|
+
Be,
|
141
136
|
{
|
142
|
-
as: "
|
143
|
-
|
144
|
-
|
145
|
-
|
146
|
-
children: /* @__PURE__ */
|
147
|
-
|
148
|
-
|
149
|
-
|
150
|
-
|
151
|
-
|
152
|
-
|
153
|
-
|
154
|
-
|
155
|
-
|
156
|
-
|
157
|
-
|
158
|
-
|
159
|
-
|
160
|
-
|
161
|
-
|
162
|
-
|
163
|
-
}
|
137
|
+
as: "span",
|
138
|
+
value: value2,
|
139
|
+
disabled: props.disabled,
|
140
|
+
className: radioClasses,
|
141
|
+
children: ({ checked: checked2, disabled: disabled2 }) => /* @__PURE__ */ jsxs(Fragment, { children: [
|
142
|
+
/* @__PURE__ */ jsx(
|
143
|
+
K,
|
144
|
+
{
|
145
|
+
as: "button",
|
146
|
+
className: classNames(cls.radio, {
|
147
|
+
[cls.disabled]: props.disabled
|
148
|
+
}),
|
149
|
+
children: /* @__PURE__ */ jsx(
|
150
|
+
"span",
|
151
|
+
{
|
152
|
+
className: classNames(cls.frame, {
|
153
|
+
[cls.checked]: checked2,
|
154
|
+
[cls.disabled]: disabled2
|
155
|
+
})
|
156
|
+
}
|
157
|
+
)
|
158
|
+
}
|
159
|
+
),
|
160
|
+
label22
|
161
|
+
] })
|
162
|
+
},
|
163
|
+
label22
|
164
|
+
)) })
|
165
|
+
]
|
166
|
+
}
|
167
|
+
);
|
168
|
+
}
|
169
|
+
);
|
164
170
|
export {
|
165
171
|
RadioGroup
|
166
172
|
};
|
@@ -1,2 +1,2 @@
|
|
1
1
|
export { RadioGroup } from './RadioGroup';
|
2
|
-
export type { TRadioOption } from './RadioGroup';
|
2
|
+
export type { TRadioOption, TRadioGroupProps } from './RadioGroup';
|
@@ -1,21 +1,15 @@
|
|
1
|
-
import {
|
1
|
+
import { ESelectSearchSize } from './constants';
|
2
2
|
|
3
|
-
export type
|
4
|
-
|
5
|
-
|
6
|
-
|
3
|
+
export type TSelectSearchItem = {
|
4
|
+
id: number;
|
5
|
+
name: string;
|
6
|
+
};
|
7
|
+
export type TSelectSearchProps = {
|
7
8
|
items: TSelectSearchItem[];
|
8
|
-
|
9
|
-
|
10
|
-
*/
|
9
|
+
value?: TSelectSearchItem | null;
|
10
|
+
onChange?: (value: TSelectSearchItem | null) => void;
|
11
11
|
placeholder?: string;
|
12
|
-
|
13
|
-
* Размер SelectSearch. Допустимые значения: `l`, `xxl`.
|
14
|
-
*/
|
15
|
-
size?: 'l' | 'xxl';
|
16
|
-
/**
|
17
|
-
* Флаг, указывающий, что элемент занимает все доступное пространство.
|
18
|
-
*/
|
12
|
+
size?: ESelectSearchSize;
|
19
13
|
full?: boolean;
|
20
14
|
};
|
21
|
-
export declare const SelectSearch: (
|
15
|
+
export declare const SelectSearch: import('react').ForwardRefExoticComponent<TSelectSearchProps & import('react').RefAttributes<HTMLElement>>;
|
@@ -1,7 +1,7 @@
|
|
1
1
|
import { jsx, jsxs, Fragment as Fragment$1 } from "react/jsx-runtime";
|
2
2
|
import { c as classNames } from "../../index-CweZ_OcN.js";
|
3
3
|
import * as React from "react";
|
4
|
-
import React__default, { useReducer, useMemo, useSyncExternalStore, useId as useId$1, useEffect, useCallback, useRef, useState, useLayoutEffect, createContext, useContext, Fragment, createRef } from "react";
|
4
|
+
import React__default, { useReducer, useMemo, useSyncExternalStore, useId as useId$1, useEffect, useCallback, useRef, useState, useLayoutEffect, createContext, useContext, Fragment, createRef, forwardRef } from "react";
|
5
5
|
import { ESelectSearchSize } from "./constants.js";
|
6
6
|
import { useMediaQuery } from "../../hooks/useMediaQuery/useMediaQuery.js";
|
7
7
|
import { EMediaQuery } from "../../hooks/useMediaQuery/constants.js";
|
@@ -3841,125 +3841,121 @@ function No(o2, r2) {
|
|
3841
3841
|
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" });
|
3842
3842
|
}
|
3843
3843
|
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 });
|
3844
|
-
const container = "
|
3845
|
-
const full = "
|
3846
|
-
const placeholder = "
|
3847
|
-
const input = "
|
3848
|
-
const button = "
|
3849
|
-
const options = "
|
3850
|
-
const option = "
|
3851
|
-
const l = "
|
3852
|
-
const xxl = "
|
3844
|
+
const container = "_container_xswn2_6";
|
3845
|
+
const full = "_full_xswn2_20";
|
3846
|
+
const placeholder = "_placeholder_xswn2_28";
|
3847
|
+
const input = "_input_xswn2_43";
|
3848
|
+
const button = "_button_xswn2_61";
|
3849
|
+
const options = "_options_xswn2_69";
|
3850
|
+
const option = "_option_xswn2_69";
|
3851
|
+
const l = "_l_xswn2_118";
|
3852
|
+
const xxl = "_xxl_xswn2_128";
|
3853
3853
|
const cls = {
|
3854
|
-
"select-search": "_select-
|
3854
|
+
"select-search": "_select-search_xswn2_2",
|
3855
3855
|
container,
|
3856
|
-
"container-open": "_container-
|
3856
|
+
"container-open": "_container-open_xswn2_16",
|
3857
3857
|
full,
|
3858
|
-
"selectorIcon-open": "_selectorIcon-
|
3858
|
+
"selectorIcon-open": "_selectorIcon-open_xswn2_24",
|
3859
3859
|
placeholder,
|
3860
|
-
"placeholder-top": "_placeholder-
|
3860
|
+
"placeholder-top": "_placeholder-top_xswn2_37",
|
3861
3861
|
input,
|
3862
|
-
"input-container": "_input-
|
3862
|
+
"input-container": "_input-container_xswn2_55",
|
3863
3863
|
button,
|
3864
3864
|
options,
|
3865
3865
|
option,
|
3866
|
-
"option-active": "_option-
|
3867
|
-
"option-inner": "_option-
|
3868
|
-
"no-options": "_no-
|
3866
|
+
"option-active": "_option-active_xswn2_103",
|
3867
|
+
"option-inner": "_option-inner_xswn2_106",
|
3868
|
+
"no-options": "_no-options_xswn2_113",
|
3869
3869
|
l,
|
3870
3870
|
xxl,
|
3871
|
-
"selected-icon": "_selected-
|
3871
|
+
"selected-icon": "_selected-icon_xswn2_138"
|
3872
3872
|
};
|
3873
|
-
const SelectSearch = (
|
3874
|
-
items,
|
3875
|
-
|
3876
|
-
|
3877
|
-
|
3878
|
-
|
3879
|
-
|
3880
|
-
|
3881
|
-
|
3882
|
-
|
3883
|
-
|
3884
|
-
|
3885
|
-
|
3886
|
-
|
3887
|
-
|
3888
|
-
|
3889
|
-
|
3890
|
-
|
3891
|
-
|
3892
|
-
|
3893
|
-
|
3894
|
-
|
3895
|
-
|
3896
|
-
|
3897
|
-
|
3898
|
-
|
3899
|
-
|
3900
|
-
|
3901
|
-
|
3902
|
-
|
3903
|
-
|
3904
|
-
|
3905
|
-
|
3906
|
-
|
3907
|
-
|
3908
|
-
|
3909
|
-
|
3910
|
-
|
3873
|
+
const SelectSearch = forwardRef(
|
3874
|
+
({ items, placeholder: placeholder2, size: size2 = ESelectSearchSize.L, onChange, value, full: full2 }, ref) => {
|
3875
|
+
const [searchValue, setSearchValue] = useState("");
|
3876
|
+
const [isItemSelected, setIsItemSelected] = useState(false);
|
3877
|
+
const isMobile = useMediaQuery(EMediaQuery.XSS);
|
3878
|
+
const filteredItems = useMemo(() => {
|
3879
|
+
return searchValue.trim().toLowerCase() ? items.filter(
|
3880
|
+
(item) => item.name.toLowerCase().includes(searchValue.toLowerCase())
|
3881
|
+
) : items;
|
3882
|
+
}, [searchValue, items]);
|
3883
|
+
const handleOneChange = (newValue) => {
|
3884
|
+
onChange == null ? void 0 : onChange(newValue);
|
3885
|
+
setIsItemSelected(!!newValue);
|
3886
|
+
};
|
3887
|
+
return /* @__PURE__ */ jsx(
|
3888
|
+
Nt,
|
3889
|
+
{
|
3890
|
+
as: "div",
|
3891
|
+
onChange: handleOneChange,
|
3892
|
+
value,
|
3893
|
+
className: classNames(cls["select-search"], { [cls.full]: full2 }),
|
3894
|
+
ref,
|
3895
|
+
children: ({ open }) => /* @__PURE__ */ jsxs(Fragment$1, { children: [
|
3896
|
+
/* @__PURE__ */ jsxs(
|
3897
|
+
"div",
|
3898
|
+
{
|
3899
|
+
className: classNames(cls.container, cls[size2], {
|
3900
|
+
[cls["container-open"]]: open
|
3901
|
+
}),
|
3902
|
+
children: [
|
3903
|
+
/* @__PURE__ */ jsxs("div", { className: cls["input-container"], children: [
|
3904
|
+
/* @__PURE__ */ jsx(
|
3905
|
+
Go,
|
3906
|
+
{
|
3907
|
+
className: cls.input,
|
3908
|
+
onChange: (event) => setSearchValue(event.target.value),
|
3909
|
+
displayValue: (item) => item == null ? void 0 : item.name
|
3910
|
+
}
|
3911
|
+
),
|
3912
|
+
/* @__PURE__ */ jsx(
|
3913
|
+
"span",
|
3914
|
+
{
|
3915
|
+
className: classNames(cls.placeholder, {
|
3916
|
+
[cls["placeholder-top"]]: isItemSelected || open || searchValue
|
3917
|
+
}),
|
3918
|
+
children: placeholder2
|
3919
|
+
}
|
3920
|
+
)
|
3921
|
+
] }),
|
3922
|
+
/* @__PURE__ */ jsx(Ho, { className: cls.button, children: /* @__PURE__ */ jsx(
|
3923
|
+
Icon,
|
3911
3924
|
{
|
3912
|
-
|
3913
|
-
|
3914
|
-
|
3925
|
+
iconName: isMobile ? "DropdownArrowBottom16px" : "DropdownArrowDown24px",
|
3926
|
+
className: classNames(cls["selector-icon"], {
|
3927
|
+
[cls["selector-icon-open"]]: open
|
3928
|
+
})
|
3915
3929
|
}
|
3916
|
-
)
|
3917
|
-
|
3918
|
-
|
3930
|
+
) })
|
3931
|
+
]
|
3932
|
+
}
|
3933
|
+
),
|
3934
|
+
/* @__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(
|
3935
|
+
Ko,
|
3936
|
+
{
|
3937
|
+
value: item,
|
3938
|
+
className: ({ focus }) => classNames(cls.option, {
|
3939
|
+
[cls["option-active"]]: focus
|
3940
|
+
}),
|
3941
|
+
children: ({ selected }) => /* @__PURE__ */ jsxs("div", { className: cls["option-inner"], children: [
|
3942
|
+
/* @__PURE__ */ jsx("span", { className: cls["option-text"], children: item.name }),
|
3943
|
+
selected && /* @__PURE__ */ jsx(
|
3944
|
+
Icon,
|
3919
3945
|
{
|
3920
|
-
|
3921
|
-
|
3922
|
-
}),
|
3923
|
-
children: placeholder2
|
3946
|
+
iconName: "Done16px",
|
3947
|
+
className: cls["selected-icon"]
|
3924
3948
|
}
|
3925
3949
|
)
|
3926
|
-
] })
|
3927
|
-
|
3928
|
-
|
3929
|
-
|
3930
|
-
|
3931
|
-
|
3932
|
-
|
3933
|
-
|
3934
|
-
|
3935
|
-
) })
|
3936
|
-
]
|
3937
|
-
}
|
3938
|
-
),
|
3939
|
-
/* @__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(
|
3940
|
-
Ko,
|
3941
|
-
{
|
3942
|
-
value: item,
|
3943
|
-
className: ({ focus }) => classNames(cls.option, {
|
3944
|
-
[cls["option-active"]]: focus
|
3945
|
-
}),
|
3946
|
-
children: ({ selected }) => /* @__PURE__ */ jsxs("div", { className: cls["option-inner"], children: [
|
3947
|
-
/* @__PURE__ */ jsx("span", { className: cls["option-text"], children: item.name }),
|
3948
|
-
selected && /* @__PURE__ */ jsx(
|
3949
|
-
Icon,
|
3950
|
-
{
|
3951
|
-
iconName: "Done16px",
|
3952
|
-
className: cls["selected-icon"]
|
3953
|
-
}
|
3954
|
-
)
|
3955
|
-
] })
|
3956
|
-
},
|
3957
|
-
item.id
|
3958
|
-
)) })
|
3959
|
-
] })
|
3960
|
-
}
|
3961
|
-
);
|
3962
|
-
};
|
3950
|
+
] })
|
3951
|
+
},
|
3952
|
+
item.id
|
3953
|
+
)) })
|
3954
|
+
] })
|
3955
|
+
}
|
3956
|
+
);
|
3957
|
+
}
|
3958
|
+
);
|
3963
3959
|
export {
|
3964
3960
|
SelectSearch
|
3965
3961
|
};
|
@@ -1,3 +1,2 @@
|
|
1
|
-
export { SelectSearch, type
|
1
|
+
export { SelectSearch, type TSelectSearchProps, type TSelectSearchItem } from './SelectSearch';
|
2
2
|
export { ESelectSearchSize } from './constants';
|
3
|
-
export type { TSelectSearchItem, TSelectSearchSize } from './types';
|