mimir-ui-kit 1.20.1 → 1.20.3
Sign up to get free protection for your applications and to get access to all the features.
- package/dist/{Input-BcrXWzen.js → Input-6mudFqTb.js} +4 -3
- package/dist/assets/TextArea.css +1 -1
- package/dist/components/DatePicker/DatePicker.js +1 -1
- package/dist/components/Input/Input.js +1 -1
- package/dist/components/Input/index.js +1 -1
- package/dist/components/InputPassword/InputPassword.js +1 -1
- package/dist/components/InputPhoneNumber/InputPhoneNumber.js +1 -1
- package/dist/components/OtpInput/OtpInput.js +1 -1
- package/dist/components/SelectSearch/SelectSearch.js +1 -1
- package/dist/components/TextArea/TextArea.js +17 -18
- package/dist/components/index.js +1 -1
- package/dist/index.js +1 -1
- package/package.json +1 -1
@@ -149,8 +149,9 @@ const Input = memo(
|
|
149
149
|
[cls["has-left-slot"]]: !!currentLeftAddon,
|
150
150
|
[cls["has-right-slot"]]: !!currentRightAddon
|
151
151
|
};
|
152
|
+
const isActiveLabel = isFocused || withValue || !!value;
|
152
153
|
const labelClassNames = classNames(cls.label, className, cls[size], {
|
153
|
-
[cls["active-label"]]:
|
154
|
+
[cls["active-label"]]: isActiveLabel,
|
154
155
|
[cls.disabled]: disabled2 || readonly,
|
155
156
|
[cls["has-left-slot"]]: !!currentLeftAddon
|
156
157
|
});
|
@@ -177,7 +178,7 @@ const Input = memo(
|
|
177
178
|
"span",
|
178
179
|
{
|
179
180
|
className: classNames(cls["left-slot"], {
|
180
|
-
[cls.focused]:
|
181
|
+
[cls.focused]: isActiveLabel,
|
181
182
|
[cls["has-label"]]: !!label2
|
182
183
|
}),
|
183
184
|
children: currentLeftAddon
|
@@ -204,7 +205,7 @@ const Input = memo(
|
|
204
205
|
"span",
|
205
206
|
{
|
206
207
|
className: classNames(cls["right-slot"], {
|
207
|
-
[cls.focused]:
|
208
|
+
[cls.focused]: isActiveLabel,
|
208
209
|
[cls["has-label"]]: !!label2
|
209
210
|
}),
|
210
211
|
children: currentRightAddon
|
package/dist/assets/TextArea.css
CHANGED
@@ -1 +1 @@
|
|
1
|
-
._textarea-
|
1
|
+
._textarea-wrapper_mbbjz_2 ._textarea_mbbjz_2{min-height:var(--textarea-height);padding-top:var(--textarea-space)!important;padding-bottom:var(--textarea-space);resize:none}._textarea-wrapper_mbbjz_2 ._textarea_mbbjz_2._has-label_mbbjz_8{padding-top:var(--textarea-top-space)!important}._textarea-wrapper_mbbjz_2 ._label_mbbjz_11{position:absolute;top:calc(var(--textarea-space) / 2 - var(--textarea-space) / 2);left:var(--space-m);z-index:1;display:block;color:var(--label-color);font-size:var(--input-font-size);white-space:nowrap;transform-origin:left center;transition:transform .15s ease-out,left .15s ease-out,color .15s ease-out;pointer-events:none}._textarea-wrapper_mbbjz_2 ._label_mbbjz_11._has-left-slot_mbbjz_24{left:calc(var(--space-m) + var(--icon-size) + var(--clear-button-mg))}._textarea-wrapper_mbbjz_2 ._label_mbbjz_11._active-label_mbbjz_27{transform:scale(var(--label-scaled)) translateY(calc(var(--textarea-transform-label) * -1))}._textarea-wrapper_mbbjz_2 ._label_mbbjz_11._active-label_mbbjz_27._has-left-slot_mbbjz_24{left:calc(var(--space-m) + var(--icon-size) + var(--space-s));transform:scale(var(--label-scaled)) translate(calc((var(--space-m) + var(--left-addon-position)) * 2 * -1),calc(var(--textarea-transform-label) * -1))}._s_mbbjz_35{--textarea-space: var(--space-2s);--textarea-top-space: var(--space-l);--textarea-transform-label: var(--space-xss);--textarea-height: 76px;--textarea-padding: var(--space-xs) var(--space-s)}._m_mbbjz_43{--textarea-space: var(--space-2s);--textarea-top-space: var(--space-l);--textarea-transform-label: var(--space-s);--textarea-height: 88px;--textarea-padding: var(--space-xs) var(--space-s)}._l_mbbjz_11{--textarea-space: var(--space-2m);--textarea-top-space: 25px;--textarea-transform-label: var(--space-m);--textarea-height: 120px;--textarea-padding: var(--space-2m)}
|
@@ -5,7 +5,7 @@ import { c as cls, D as DatePickerModal } from "../../DatePickerModal-BM0BgzTb.j
|
|
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";
|
8
|
-
import { I as Input } from "../../Input-
|
8
|
+
import { I as Input } from "../../Input-6mudFqTb.js";
|
9
9
|
const DatePicker = memo(
|
10
10
|
forwardRef(
|
11
11
|
({ size, value, onChangeValue, name, before, ...props }, ref) => {
|
@@ -2,7 +2,7 @@ import "react/jsx-runtime";
|
|
2
2
|
import "../../index-CweZ_OcN.js";
|
3
3
|
import "react";
|
4
4
|
import "./constants.js";
|
5
|
-
import { I } from "../../Input-
|
5
|
+
import { I } from "../../Input-6mudFqTb.js";
|
6
6
|
import "../../hooks/useMergeRefs/useMergeRefs.js";
|
7
7
|
import "../../icons/Icon.js";
|
8
8
|
import "../Button/Button.js";
|
@@ -2,7 +2,7 @@ import { jsxs, jsx } from "react/jsx-runtime";
|
|
2
2
|
import { memo, forwardRef, useState } from "react";
|
3
3
|
import { Icon } from "../../icons/Icon.js";
|
4
4
|
import { Button } from "../Button/Button.js";
|
5
|
-
import { I as Input } from "../../Input-
|
5
|
+
import { I as Input } from "../../Input-6mudFqTb.js";
|
6
6
|
import '../../assets/InputPassword.css';const input = "_input_mam1g_2";
|
7
7
|
const wrapper = "_wrapper_mam1g_6";
|
8
8
|
const button = "_button_mam1g_17";
|
@@ -1,7 +1,7 @@
|
|
1
1
|
import { jsx } from "react/jsx-runtime";
|
2
2
|
import { memo, forwardRef, useState, useCallback, useImperativeHandle } from "react";
|
3
3
|
import { getMaskedInputPhoneValue, getUnmaskedInputValue } from "./utils.js";
|
4
|
-
import { I as Input } from "../../Input-
|
4
|
+
import { I as Input } from "../../Input-6mudFqTb.js";
|
5
5
|
const InputPhoneNumber = memo(
|
6
6
|
forwardRef(
|
7
7
|
({ value = "", onChange, ...props }, ref) => {
|
@@ -3,7 +3,7 @@ import { c as classNames } from "../../index-CweZ_OcN.js";
|
|
3
3
|
import { forwardRef, useImperativeHandle, Fragment } from "react";
|
4
4
|
import { ITEMS_PER_SEPARATOR, DEFAULT_VALUE_LENGTH } from "./constants.js";
|
5
5
|
import { useOTPInput } from "./hooks.js";
|
6
|
-
import { I as Input } from "../../Input-
|
6
|
+
import { I as Input } from "../../Input-6mudFqTb.js";
|
7
7
|
import '../../assets/OtpInput.css';const otp = "_otp_196ev_3";
|
8
8
|
const input = "_input_196ev_14";
|
9
9
|
const separator = "_separator_196ev_28";
|
@@ -4,7 +4,7 @@ import * as React from "react";
|
|
4
4
|
import React__default, { useReducer, useMemo, useSyncExternalStore, useId as useId$1, useEffect, useCallback, useRef, useLayoutEffect, createContext, useContext, useState, Fragment, createRef, forwardRef } from "react";
|
5
5
|
import { ESelectSearchSize } from "./constants.js";
|
6
6
|
import { Icon } from "../../icons/Icon.js";
|
7
|
-
import { I as Input } from "../../Input-
|
7
|
+
import { I as Input } from "../../Input-6mudFqTb.js";
|
8
8
|
import { EInputVariant, EInputSize } from "../Input/constants.js";
|
9
9
|
import { n as n$2, u as u$3, d as o$1, s as s$3, o as o$2, p as p$1, t as t$3, e as s$4, W as W$1, y as y$3, T, H, M as M$1, a as u$5, $ as $f7dceffc5ad7768b$export$4e328f61c538687f, b as $6179b936705e76d3$export$ae780daf29e6d456, D as D$2, c as o$3 } from "../../keyboard-B256ZoM-.js";
|
10
10
|
import * as ReactDOM from "react-dom";
|
@@ -5,20 +5,20 @@ import { useAutoResizeTextArea } from "./hooks.js";
|
|
5
5
|
import { useMergeRefs } from "../../hooks/useMergeRefs/useMergeRefs.js";
|
6
6
|
import { Icon } from "../../icons/Icon.js";
|
7
7
|
import { Button } from "../Button/Button.js";
|
8
|
-
import { c as cls } from "../../Input-
|
8
|
+
import { c as cls } from "../../Input-6mudFqTb.js";
|
9
9
|
import { EInputVariant } from "../Input/constants.js";
|
10
|
-
import '../../assets/TextArea.css';const textarea = "
|
11
|
-
const label = "
|
12
|
-
const s = "
|
13
|
-
const m = "
|
14
|
-
const l = "
|
10
|
+
import '../../assets/TextArea.css';const textarea = "_textarea_mbbjz_2";
|
11
|
+
const label = "_label_mbbjz_11";
|
12
|
+
const s = "_s_mbbjz_35";
|
13
|
+
const m = "_m_mbbjz_43";
|
14
|
+
const l = "_l_mbbjz_11";
|
15
15
|
const textareaCls = {
|
16
|
-
"textarea-wrapper": "_textarea-
|
16
|
+
"textarea-wrapper": "_textarea-wrapper_mbbjz_2",
|
17
17
|
textarea,
|
18
|
-
"has-label": "_has-
|
18
|
+
"has-label": "_has-label_mbbjz_8",
|
19
19
|
label,
|
20
|
-
"has-left-slot": "_has-left-
|
21
|
-
"active-label": "_active-
|
20
|
+
"has-left-slot": "_has-left-slot_mbbjz_24",
|
21
|
+
"active-label": "_active-label_mbbjz_27",
|
22
22
|
s,
|
23
23
|
m,
|
24
24
|
l
|
@@ -89,10 +89,8 @@ const TextArea = memo(
|
|
89
89
|
const handleBlur = (event) => {
|
90
90
|
const currentValue = event.currentTarget.value;
|
91
91
|
onBlur == null ? void 0 : onBlur(event);
|
92
|
-
if (currentValue) {
|
93
|
-
return;
|
94
|
-
}
|
95
92
|
setIsFocused(false);
|
93
|
+
setWithValue(!!currentValue);
|
96
94
|
};
|
97
95
|
const handleFocus = (event) => {
|
98
96
|
if (readonly) {
|
@@ -122,17 +120,18 @@ const TextArea = memo(
|
|
122
120
|
const currentRightAddon = renderAddon(rightAddon);
|
123
121
|
const mods = {
|
124
122
|
[cls.readonly]: disabled || readonly,
|
125
|
-
[cls.focused]: isFocused
|
123
|
+
[cls.focused]: isFocused,
|
126
124
|
[cls.disabled]: disabled || readonly,
|
127
125
|
[cls["has-left-slot"]]: !!currentLeftAddon,
|
128
126
|
[cls["has-right-slot"]]: !!currentRightAddon,
|
129
127
|
[textareaCls["has-label"]]: !!label2
|
130
128
|
};
|
129
|
+
const isActiveLabel = isFocused || withValue || !!value;
|
131
130
|
const labelClassNames = classNames(
|
132
131
|
cls.label,
|
133
132
|
textareaCls.label,
|
134
133
|
{
|
135
|
-
[textareaCls["active-label"]]:
|
134
|
+
[textareaCls["active-label"]]: isActiveLabel,
|
136
135
|
[cls.disabled]: disabled || readonly,
|
137
136
|
[textareaCls["has-left-slot"]]: !!currentLeftAddon
|
138
137
|
},
|
@@ -157,7 +156,7 @@ const TextArea = memo(
|
|
157
156
|
cls[size],
|
158
157
|
{
|
159
158
|
[cls.disabled]: disabled || readonly,
|
160
|
-
[cls.focused]: isFocused
|
159
|
+
[cls.focused]: isFocused
|
161
160
|
},
|
162
161
|
wrapperClassName
|
163
162
|
),
|
@@ -167,7 +166,7 @@ const TextArea = memo(
|
|
167
166
|
"span",
|
168
167
|
{
|
169
168
|
className: classNames(cls["left-slot"], {
|
170
|
-
[cls.focused]:
|
169
|
+
[cls.focused]: isActiveLabel,
|
171
170
|
[cls["has-label"]]: !!label2
|
172
171
|
}),
|
173
172
|
children: currentLeftAddon
|
@@ -191,7 +190,7 @@ const TextArea = memo(
|
|
191
190
|
"span",
|
192
191
|
{
|
193
192
|
className: classNames(cls["right-slot"], {
|
194
|
-
[cls.focused]:
|
193
|
+
[cls.focused]: isActiveLabel,
|
195
194
|
[cls["has-label"]]: !!label2
|
196
195
|
}),
|
197
196
|
children: currentRightAddon
|
package/dist/components/index.js
CHANGED
@@ -1,6 +1,6 @@
|
|
1
1
|
import { Button } from "./Button/Button.js";
|
2
2
|
import { EButtonForm, EButtonSize, EButtonVariantDefault, EButtonVariantOutline, EButtonVariantRound } from "./Button/constants.js";
|
3
|
-
import { I } from "../Input-
|
3
|
+
import { I } from "../Input-6mudFqTb.js";
|
4
4
|
import { EInputSize, EInputVariant } from "./Input/constants.js";
|
5
5
|
import { TextArea } from "./TextArea/TextArea.js";
|
6
6
|
import { InputPassword } from "./InputPassword/InputPassword.js";
|
package/dist/index.js
CHANGED
@@ -1,6 +1,6 @@
|
|
1
1
|
import { Button } from "./components/Button/Button.js";
|
2
2
|
import { EButtonForm, EButtonSize, EButtonVariantDefault, EButtonVariantOutline, EButtonVariantRound } from "./components/Button/constants.js";
|
3
|
-
import { I } from "./Input-
|
3
|
+
import { I } from "./Input-6mudFqTb.js";
|
4
4
|
import { EInputSize, EInputVariant } from "./components/Input/constants.js";
|
5
5
|
import { TextArea } from "./components/TextArea/TextArea.js";
|
6
6
|
import { InputPassword } from "./components/InputPassword/InputPassword.js";
|