@smwb/ui-react 2.0.2 → 2.1.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/assets/styles/less/components/carousel/carousel.entry.css +1 -1
- package/dist/components/dataDisplay/carousel/carousel.d.ts +10 -0
- package/dist/components/dataDisplay/carousel/carousel.js +249 -131
- package/dist/components/dataDisplay/carousel/carousel.js.map +1 -1
- package/dist/components/dataDisplay/carousel/utils.d.ts +5 -0
- package/dist/components/dataDisplay/carousel/utils.js +32 -18
- package/dist/components/dataDisplay/carousel/utils.js.map +1 -1
- package/dist/components/inputs/selectField/selectField.js +85 -84
- package/dist/components/inputs/selectField/selectField.js.map +1 -1
- package/dist/headless/components/dataDisplay/carousel/carousel.js +249 -131
- package/dist/headless/components/dataDisplay/carousel/carousel.js.map +1 -1
- package/dist/headless/components/dataDisplay/carousel/utils.js +32 -18
- package/dist/headless/components/dataDisplay/carousel/utils.js.map +1 -1
- package/dist/headless/components/inputs/selectField/selectField.js +102 -101
- package/dist/headless/components/inputs/selectField/selectField.js.map +1 -1
- package/dist/index.cjs +2 -2
- package/dist/index.cjs.map +1 -1
- package/package.json +2 -2
|
@@ -2,38 +2,49 @@ function o(t, n) {
|
|
|
2
2
|
const r = Math.floor(t / n);
|
|
3
3
|
return t % n === 0 ? r - 1 : r;
|
|
4
4
|
}
|
|
5
|
-
function
|
|
5
|
+
function a(t, n, r, f) {
|
|
6
6
|
const u = o(r, n);
|
|
7
|
-
return t === r + n ? 0 :
|
|
7
|
+
return t === r + n ? 0 : f || t < n && t !== 0 ? u : t === 0 ? r % n === 0 ? u : u - 1 : n > 0 ? Math.floor(t / n) - 1 : 0;
|
|
8
8
|
}
|
|
9
|
-
function
|
|
9
|
+
function i(t) {
|
|
10
10
|
return !(t instanceof Event);
|
|
11
11
|
}
|
|
12
12
|
function c(t) {
|
|
13
|
-
return
|
|
14
|
-
}
|
|
15
|
-
function f(t) {
|
|
16
|
-
return window.TouchEvent && (e(t) && t.nativeEvent instanceof TouchEvent || t instanceof TouchEvent);
|
|
13
|
+
return i(t) && t.nativeEvent instanceof MouseEvent || t instanceof MouseEvent;
|
|
17
14
|
}
|
|
18
|
-
function
|
|
19
|
-
return
|
|
15
|
+
function e(t) {
|
|
16
|
+
return window.TouchEvent && (i(t) && t.nativeEvent instanceof TouchEvent || t instanceof TouchEvent);
|
|
20
17
|
}
|
|
21
18
|
function h(t) {
|
|
22
|
-
return c(t) ? t.
|
|
19
|
+
return c(t) ? t.clientX : e(t) ? t.changedTouches[0].clientX : 0;
|
|
20
|
+
}
|
|
21
|
+
function E(t) {
|
|
22
|
+
return c(t) ? t.clientY : e(t) ? t.changedTouches[0].clientY : 0;
|
|
23
23
|
}
|
|
24
24
|
function M(t) {
|
|
25
25
|
const n = t.target;
|
|
26
26
|
(n.tagName === "A" || n.tagName === "IMG") && t.preventDefault();
|
|
27
27
|
}
|
|
28
28
|
function m(t) {
|
|
29
|
-
return { width: `${
|
|
29
|
+
return { width: `${g(t)}%` };
|
|
30
30
|
}
|
|
31
|
-
function
|
|
31
|
+
function g(t) {
|
|
32
32
|
return 100 / t;
|
|
33
33
|
}
|
|
34
34
|
function p(t, n) {
|
|
35
35
|
return t <= 0 || n === 0 ? 1 : t > n ? n : t;
|
|
36
36
|
}
|
|
37
|
+
function d(t, n, r) {
|
|
38
|
+
return Math.min(Math.max(t, n), r);
|
|
39
|
+
}
|
|
40
|
+
function L(t) {
|
|
41
|
+
if (t != null)
|
|
42
|
+
return typeof t == "number" ? `${t}px` : t;
|
|
43
|
+
}
|
|
44
|
+
function N(t) {
|
|
45
|
+
if (t != null)
|
|
46
|
+
return String(t);
|
|
47
|
+
}
|
|
37
48
|
function X(t, n) {
|
|
38
49
|
if (t <= 0 || n === 0)
|
|
39
50
|
return 0;
|
|
@@ -41,17 +52,20 @@ function X(t, n) {
|
|
|
41
52
|
return t > r ? r : t;
|
|
42
53
|
}
|
|
43
54
|
export {
|
|
44
|
-
|
|
45
|
-
h as
|
|
55
|
+
d as clamp,
|
|
56
|
+
h as coordX,
|
|
57
|
+
E as coordY,
|
|
46
58
|
M as dragPrevent,
|
|
47
59
|
o as getActiveSlideDotsLength,
|
|
48
|
-
|
|
60
|
+
a as getSlideIndexForMultipleParts,
|
|
49
61
|
m as getSlideStyle,
|
|
50
|
-
|
|
62
|
+
g as getSlideWidth,
|
|
51
63
|
p as getSlidesToShow,
|
|
52
64
|
X as getStartSlide,
|
|
53
65
|
c as isMouseEvent,
|
|
54
|
-
|
|
55
|
-
|
|
66
|
+
i as isReactEvent,
|
|
67
|
+
e as isTouchEvent,
|
|
68
|
+
L as toCssLength,
|
|
69
|
+
N as toCssNumber
|
|
56
70
|
};
|
|
57
71
|
//# sourceMappingURL=utils.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"utils.js","sources":["../../../../../src/components/dataDisplay/carousel/utils.ts"],"sourcesContent":["import React from \"react\";\n\nexport function getActiveSlideDotsLength(slidesCount: number, slidesToShow: number): number {\n const dots = Math.floor(slidesCount / slidesToShow);\n\n return slidesCount % slidesToShow === 0 ? dots - 1 : dots;\n}\n\nexport function getSlideIndexForMultipleParts(\n activeIndex: number,\n slidesToShow: number,\n slidesCount: number,\n isNextSlideDisabled: boolean\n): number {\n const dotsLength = getActiveSlideDotsLength(slidesCount, slidesToShow);\n\n if (activeIndex === slidesCount + slidesToShow) {\n return 0;\n }\n\n if (isNextSlideDisabled || (activeIndex < slidesToShow && activeIndex !== 0)) {\n return dotsLength;\n }\n\n if (activeIndex === 0) {\n return slidesCount % slidesToShow === 0 ? dotsLength : dotsLength - 1;\n }\n\n return slidesToShow > 0 ? Math.floor(activeIndex / slidesToShow) - 1 : 0;\n}\n\nexport function isReactEvent(event: React.SyntheticEvent | Event): event is React.SyntheticEvent {\n return !(event instanceof Event);\n}\n\nexport function isMouseEvent(\n event: React.MouseEvent | React.TouchEvent | MouseEvent | TouchEvent\n): event is React.MouseEvent | MouseEvent {\n return (isReactEvent(event) && event.nativeEvent instanceof MouseEvent) || event instanceof MouseEvent;\n}\n\nexport function isTouchEvent(\n event: React.MouseEvent | React.TouchEvent | MouseEvent | TouchEvent\n): event is React.TouchEvent | TouchEvent {\n return (\n window.TouchEvent &&\n ((isReactEvent(event) && event.nativeEvent instanceof TouchEvent) || event instanceof TouchEvent)\n );\n}\n\nexport function coordX(event: React.MouseEvent | React.TouchEvent | MouseEvent | TouchEvent): number {\n if (isMouseEvent(event)) {\n return event.clientX;\n }\n\n if (isTouchEvent(event)) {\n return event.changedTouches[0].clientX;\n }\n\n return 0;\n}\n\nexport function coordY(event: React.MouseEvent | React.TouchEvent | MouseEvent | TouchEvent): number {\n if (isMouseEvent(event)) {\n return event.clientY;\n }\n\n if (isTouchEvent(event)) {\n return event.changedTouches[0].clientY;\n }\n\n return 0;\n}\n\nexport function dragPrevent(event: React.SyntheticEvent) {\n const target = event.target as HTMLElement;\n\n if (target.tagName === \"A\" || target.tagName === \"IMG\") {\n event.preventDefault();\n }\n}\n\nexport function getSlideStyle(slidesToShow: number): React.CSSProperties {\n const width = `${getSlideWidth(slidesToShow)}%`;\n\n return { width };\n}\n\nexport function getSlideWidth(slidesToShow: number): number {\n return 100 / slidesToShow;\n}\n\nexport function getSlidesToShow(slidesToShow: number, slidesCount: number): number {\n if (slidesToShow <= 0 || slidesCount === 0) {\n return 1;\n }\n\n if (slidesToShow > slidesCount) {\n return slidesCount;\n }\n\n return slidesToShow;\n}\n\nexport function getStartSlide(startSlide: number, slidesCount: number): number {\n if (startSlide <= 0 || slidesCount === 0) {\n return 0;\n }\n\n const maxIndex = slidesCount - 1;\n\n if (startSlide > maxIndex) {\n return maxIndex;\n }\n\n return startSlide;\n}\n"],"names":["getActiveSlideDotsLength","slidesCount","slidesToShow","dots","getSlideIndexForMultipleParts","activeIndex","isNextSlideDisabled","dotsLength","isReactEvent","event","isMouseEvent","isTouchEvent","coordX","coordY","dragPrevent","target","getSlideStyle","getSlideWidth","getSlidesToShow","getStartSlide","startSlide","maxIndex"],"mappings":"AAEO,SAASA,EAAyBC,GAAqBC,GAA8B;AAC1F,QAAMC,IAAO,KAAK,MAAMF,IAAcC,CAAY;AAElD,SAAOD,IAAcC,MAAiB,IAAIC,IAAO,IAAIA;AACvD;AAEO,SAASC,EACdC,GACAH,GACAD,GACAK,GACQ;AACR,QAAMC,IAAaP,EAAyBC,GAAaC,CAAY;AAErE,SAAIG,MAAgBJ,IAAcC,IACzB,IAGLI,KAAwBD,IAAcH,KAAgBG,MAAgB,IACjEE,IAGLF,MAAgB,IACXJ,IAAcC,MAAiB,IAAIK,IAAaA,IAAa,IAG/DL,IAAe,IAAI,KAAK,MAAMG,IAAcH,CAAY,IAAI,IAAI;AACzE;AAEO,SAASM,EAAaC,GAAoE;AAC/F,SAAO,EAAEA,aAAiB;AAC5B;AAEO,SAASC,EACdD,GACwC;AACxC,SAAQD,EAAaC,CAAK,KAAKA,EAAM,uBAAuB,cAAeA,aAAiB;AAC9F;AAEO,SAASE,EACdF,GACwC;AACxC,SACE,OAAO,eACLD,EAAaC,CAAK,KAAKA,EAAM,uBAAuB,cAAeA,aAAiB;AAE1F;AAEO,SAASG,EAAOH,GAA8E;AACnG,SAAIC,EAAaD,CAAK,IACbA,EAAM,UAGXE,EAAaF,CAAK,IACbA,EAAM,eAAe,CAAC,EAAE,UAG1B;AACT;AAEO,SAASI,EAAOJ,GAA8E;AACnG,SAAIC,EAAaD,CAAK,IACbA,EAAM,UAGXE,EAAaF,CAAK,IACbA,EAAM,eAAe,CAAC,EAAE,UAG1B;AACT;AAEO,SAASK,EAAYL,GAA6B;AACvD,QAAMM,IAASN,EAAM;AAErB,GAAIM,EAAO,YAAY,OAAOA,EAAO,YAAY,UAC/CN,EAAM,eAAA;AAEV;AAEO,SAASO,EAAcd,GAA2C;AAGvE,SAAO,EAAE,OAFK,GAAGe,EAAcf,CAAY,CAAC,IAEnC;AACX;AAEO,SAASe,EAAcf,GAA8B;AAC1D,SAAO,MAAMA;AACf;AAEO,SAASgB,EAAgBhB,GAAsBD,GAA6B;AACjF,SAAIC,KAAgB,KAAKD,MAAgB,IAChC,IAGLC,IAAeD,IACVA,IAGFC;AACT;AAEO,SAASiB,EAAcC,
|
|
1
|
+
{"version":3,"file":"utils.js","sources":["../../../../../src/components/dataDisplay/carousel/utils.ts"],"sourcesContent":["import React from \"react\";\n\nexport function getActiveSlideDotsLength(slidesCount: number, slidesToShow: number): number {\n const dots = Math.floor(slidesCount / slidesToShow);\n\n return slidesCount % slidesToShow === 0 ? dots - 1 : dots;\n}\n\nexport function getSlideIndexForMultipleParts(\n activeIndex: number,\n slidesToShow: number,\n slidesCount: number,\n isNextSlideDisabled: boolean\n): number {\n const dotsLength = getActiveSlideDotsLength(slidesCount, slidesToShow);\n\n if (activeIndex === slidesCount + slidesToShow) {\n return 0;\n }\n\n if (isNextSlideDisabled || (activeIndex < slidesToShow && activeIndex !== 0)) {\n return dotsLength;\n }\n\n if (activeIndex === 0) {\n return slidesCount % slidesToShow === 0 ? dotsLength : dotsLength - 1;\n }\n\n return slidesToShow > 0 ? Math.floor(activeIndex / slidesToShow) - 1 : 0;\n}\n\nexport function isReactEvent(event: React.SyntheticEvent | Event): event is React.SyntheticEvent {\n return !(event instanceof Event);\n}\n\nexport function isMouseEvent(\n event: React.MouseEvent | React.TouchEvent | MouseEvent | TouchEvent\n): event is React.MouseEvent | MouseEvent {\n return (isReactEvent(event) && event.nativeEvent instanceof MouseEvent) || event instanceof MouseEvent;\n}\n\nexport function isTouchEvent(\n event: React.MouseEvent | React.TouchEvent | MouseEvent | TouchEvent\n): event is React.TouchEvent | TouchEvent {\n return (\n window.TouchEvent &&\n ((isReactEvent(event) && event.nativeEvent instanceof TouchEvent) || event instanceof TouchEvent)\n );\n}\n\nexport function coordX(event: React.MouseEvent | React.TouchEvent | MouseEvent | TouchEvent): number {\n if (isMouseEvent(event)) {\n return event.clientX;\n }\n\n if (isTouchEvent(event)) {\n return event.changedTouches[0].clientX;\n }\n\n return 0;\n}\n\nexport function coordY(event: React.MouseEvent | React.TouchEvent | MouseEvent | TouchEvent): number {\n if (isMouseEvent(event)) {\n return event.clientY;\n }\n\n if (isTouchEvent(event)) {\n return event.changedTouches[0].clientY;\n }\n\n return 0;\n}\n\nexport function dragPrevent(event: React.SyntheticEvent) {\n const target = event.target as HTMLElement;\n\n if (target.tagName === \"A\" || target.tagName === \"IMG\") {\n event.preventDefault();\n }\n}\n\nexport function getSlideStyle(slidesToShow: number): React.CSSProperties {\n const width = `${getSlideWidth(slidesToShow)}%`;\n\n return { width };\n}\n\nexport function getSlideWidth(slidesToShow: number): number {\n return 100 / slidesToShow;\n}\n\nexport function getSlidesToShow(slidesToShow: number, slidesCount: number): number {\n if (slidesToShow <= 0 || slidesCount === 0) {\n return 1;\n }\n\n if (slidesToShow > slidesCount) {\n return slidesCount;\n }\n\n return slidesToShow;\n}\n\nexport function clamp(value: number, min: number, max: number): number {\n return Math.min(Math.max(value, min), max);\n}\n\n/** Number -> \"<n>px\", string -> as-is, nullish -> undefined. */\nexport function toCssLength(value?: number | string): string | undefined {\n if (value === undefined || value === null) {\n return undefined;\n }\n\n return typeof value === \"number\" ? `${value}px` : value;\n}\n\n/** Number/string -> string, nullish -> undefined (for unit-less CSS values like aspect-ratio). */\nexport function toCssNumber(value?: number | string): string | undefined {\n if (value === undefined || value === null) {\n return undefined;\n }\n\n return String(value);\n}\n\nexport function getStartSlide(startSlide: number, slidesCount: number): number {\n if (startSlide <= 0 || slidesCount === 0) {\n return 0;\n }\n\n const maxIndex = slidesCount - 1;\n\n if (startSlide > maxIndex) {\n return maxIndex;\n }\n\n return startSlide;\n}\n"],"names":["getActiveSlideDotsLength","slidesCount","slidesToShow","dots","getSlideIndexForMultipleParts","activeIndex","isNextSlideDisabled","dotsLength","isReactEvent","event","isMouseEvent","isTouchEvent","coordX","coordY","dragPrevent","target","getSlideStyle","getSlideWidth","getSlidesToShow","clamp","value","min","max","toCssLength","toCssNumber","getStartSlide","startSlide","maxIndex"],"mappings":"AAEO,SAASA,EAAyBC,GAAqBC,GAA8B;AAC1F,QAAMC,IAAO,KAAK,MAAMF,IAAcC,CAAY;AAElD,SAAOD,IAAcC,MAAiB,IAAIC,IAAO,IAAIA;AACvD;AAEO,SAASC,EACdC,GACAH,GACAD,GACAK,GACQ;AACR,QAAMC,IAAaP,EAAyBC,GAAaC,CAAY;AAErE,SAAIG,MAAgBJ,IAAcC,IACzB,IAGLI,KAAwBD,IAAcH,KAAgBG,MAAgB,IACjEE,IAGLF,MAAgB,IACXJ,IAAcC,MAAiB,IAAIK,IAAaA,IAAa,IAG/DL,IAAe,IAAI,KAAK,MAAMG,IAAcH,CAAY,IAAI,IAAI;AACzE;AAEO,SAASM,EAAaC,GAAoE;AAC/F,SAAO,EAAEA,aAAiB;AAC5B;AAEO,SAASC,EACdD,GACwC;AACxC,SAAQD,EAAaC,CAAK,KAAKA,EAAM,uBAAuB,cAAeA,aAAiB;AAC9F;AAEO,SAASE,EACdF,GACwC;AACxC,SACE,OAAO,eACLD,EAAaC,CAAK,KAAKA,EAAM,uBAAuB,cAAeA,aAAiB;AAE1F;AAEO,SAASG,EAAOH,GAA8E;AACnG,SAAIC,EAAaD,CAAK,IACbA,EAAM,UAGXE,EAAaF,CAAK,IACbA,EAAM,eAAe,CAAC,EAAE,UAG1B;AACT;AAEO,SAASI,EAAOJ,GAA8E;AACnG,SAAIC,EAAaD,CAAK,IACbA,EAAM,UAGXE,EAAaF,CAAK,IACbA,EAAM,eAAe,CAAC,EAAE,UAG1B;AACT;AAEO,SAASK,EAAYL,GAA6B;AACvD,QAAMM,IAASN,EAAM;AAErB,GAAIM,EAAO,YAAY,OAAOA,EAAO,YAAY,UAC/CN,EAAM,eAAA;AAEV;AAEO,SAASO,EAAcd,GAA2C;AAGvE,SAAO,EAAE,OAFK,GAAGe,EAAcf,CAAY,CAAC,IAEnC;AACX;AAEO,SAASe,EAAcf,GAA8B;AAC1D,SAAO,MAAMA;AACf;AAEO,SAASgB,EAAgBhB,GAAsBD,GAA6B;AACjF,SAAIC,KAAgB,KAAKD,MAAgB,IAChC,IAGLC,IAAeD,IACVA,IAGFC;AACT;AAEO,SAASiB,EAAMC,GAAeC,GAAaC,GAAqB;AACrE,SAAO,KAAK,IAAI,KAAK,IAAIF,GAAOC,CAAG,GAAGC,CAAG;AAC3C;AAGO,SAASC,EAAYH,GAA6C;AACvE,MAA2BA,KAAU;AAIrC,WAAO,OAAOA,KAAU,WAAW,GAAGA,CAAK,OAAOA;AACpD;AAGO,SAASI,EAAYJ,GAA6C;AACvE,MAA2BA,KAAU;AAIrC,WAAO,OAAOA,CAAK;AACrB;AAEO,SAASK,EAAcC,GAAoBzB,GAA6B;AAC7E,MAAIyB,KAAc,KAAKzB,MAAgB;AACrC,WAAO;AAGT,QAAM0B,IAAW1B,IAAc;AAE/B,SAAIyB,IAAaC,IACRA,IAGFD;AACT;"}
|
|
@@ -1,23 +1,23 @@
|
|
|
1
|
-
import { jsx as
|
|
2
|
-
import { forwardRef as Ne, useState as D, useRef as S, useMemo as Fe, useEffect as
|
|
3
|
-
import
|
|
1
|
+
import { jsx as a, jsxs as b, Fragment as Ce } from "react/jsx-runtime";
|
|
2
|
+
import { forwardRef as Ne, useState as D, useRef as S, useMemo as Fe, useEffect as U } from "react";
|
|
3
|
+
import V from "clsx";
|
|
4
4
|
import { useSafeLayoutEffect as Me } from "../../../hooks/useSafeLayoutEffect.js";
|
|
5
5
|
import { useForkRef as Re } from "../../../hooks/useForkRef.js";
|
|
6
6
|
import { DropdownMenu as Ve } from "./dropdownMenu.js";
|
|
7
7
|
import { Chip as Ee } from "../../dataDisplay/chip/chip.js";
|
|
8
|
-
import { Icon as
|
|
8
|
+
import { Icon as q } from "../../base/icon/icon.js";
|
|
9
9
|
import { TextFieldWrapper as Le } from "../textField/textFieldWrapper.js";
|
|
10
|
-
const ke = (
|
|
11
|
-
function
|
|
12
|
-
|
|
10
|
+
const ke = (i) => /* @__PURE__ */ a(q, { name: "arrow_drop_down", ...i }), Pe = (i) => /* @__PURE__ */ a(q, { name: "close", size: 20, ...i });
|
|
11
|
+
function $(i) {
|
|
12
|
+
i.preventDefault(), i.stopPropagation();
|
|
13
13
|
}
|
|
14
|
-
const $e = Ne(function(
|
|
14
|
+
const $e = Ne(function(E, G) {
|
|
15
15
|
const {
|
|
16
|
-
className:
|
|
17
|
-
value:
|
|
18
|
-
defaultValue:
|
|
16
|
+
className: L,
|
|
17
|
+
value: _,
|
|
18
|
+
defaultValue: k,
|
|
19
19
|
onChange: C,
|
|
20
|
-
disabled:
|
|
20
|
+
disabled: f,
|
|
21
21
|
readOnly: N,
|
|
22
22
|
name: J,
|
|
23
23
|
multiple: P,
|
|
@@ -25,136 +25,137 @@ const $e = Ne(function(L, q) {
|
|
|
25
25
|
menuMiddleware: X,
|
|
26
26
|
menuNoItemsMessage: Y,
|
|
27
27
|
menuContainer: Z,
|
|
28
|
-
search:
|
|
28
|
+
search: c,
|
|
29
29
|
chips: ee,
|
|
30
30
|
isFocused: K,
|
|
31
31
|
error: O,
|
|
32
|
-
items:
|
|
32
|
+
items: r,
|
|
33
33
|
label: W,
|
|
34
34
|
variant: j = "outlined",
|
|
35
35
|
fullWidth: se,
|
|
36
|
-
helperText:
|
|
37
|
-
onSearch:
|
|
36
|
+
helperText: le,
|
|
37
|
+
onSearch: v,
|
|
38
38
|
resetSearch: y,
|
|
39
|
-
isLoading:
|
|
39
|
+
isLoading: te,
|
|
40
40
|
inline: z,
|
|
41
41
|
endAdornment: ne,
|
|
42
42
|
hideSelectArrowIcon: oe,
|
|
43
|
-
optionRenderer:
|
|
44
|
-
clearable:
|
|
43
|
+
optionRenderer: ae,
|
|
44
|
+
clearable: re,
|
|
45
45
|
creatable: ie,
|
|
46
46
|
onCreate: F,
|
|
47
47
|
virtualized: ce,
|
|
48
|
-
itemHeight:
|
|
49
|
-
"aria-label":
|
|
48
|
+
itemHeight: ue,
|
|
49
|
+
"aria-label": de,
|
|
50
50
|
id: fe,
|
|
51
51
|
...me
|
|
52
|
-
} =
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
52
|
+
} = E, [o, u] = D(!1), [pe, we] = D(k), [m, p] = D(() => {
|
|
53
|
+
const e = _ != null ? _ : k;
|
|
54
|
+
if (Array.isArray(e))
|
|
55
|
+
return r.filter((t) => e.includes(t.value));
|
|
56
|
+
const s = e == null ? void 0 : r.find((t) => t.value === e);
|
|
57
|
+
return s ? [s] : [];
|
|
58
|
+
}), [n, x] = D(""), { current: he } = S(_ != null), h = S(null), be = Re(G, h), A = S(null), H = S(null), l = he ? _ : pe, g = Fe(() => K || o, [K, o]), _e = (e) => {
|
|
58
59
|
var s;
|
|
59
|
-
e.button === 0 && (e.preventDefault(), (s =
|
|
60
|
-
},
|
|
60
|
+
e.button === 0 && (e.preventDefault(), (s = h.current) == null || s.focus(), u(!o));
|
|
61
|
+
}, ve = () => {
|
|
61
62
|
var e;
|
|
62
|
-
u(!1), (e =
|
|
63
|
+
u(!1), (e = h.current) == null || e.focus();
|
|
63
64
|
}, ye = () => {
|
|
64
65
|
var e;
|
|
65
|
-
|
|
66
|
-
},
|
|
66
|
+
c === !0 && ((e = H.current) == null || e.focus());
|
|
67
|
+
}, xe = (e) => {
|
|
67
68
|
N || [" ", "ArrowUp", "ArrowDown", "Enter"].includes(e.key) && (e.preventDefault(), u(!o));
|
|
68
69
|
};
|
|
69
|
-
|
|
70
|
-
(!g ||
|
|
71
|
-
}, [g,
|
|
72
|
-
(
|
|
73
|
-
|
|
74
|
-
if (
|
|
75
|
-
|
|
70
|
+
U(() => {
|
|
71
|
+
(!g || c === "menu" && !o) && (x(""), y == null || y());
|
|
72
|
+
}, [g, c, o, y]), U(() => {
|
|
73
|
+
if (Array.isArray(l))
|
|
74
|
+
p(r.filter((e) => l.includes(e.value)));
|
|
75
|
+
else if (l == null || l === "")
|
|
76
|
+
p([]);
|
|
76
77
|
else {
|
|
77
|
-
const e =
|
|
78
|
-
|
|
78
|
+
const e = r.find((s) => s.value === l);
|
|
79
|
+
p(e ? [e] : []);
|
|
79
80
|
}
|
|
80
|
-
}, [
|
|
81
|
-
|
|
82
|
-
}, [
|
|
81
|
+
}, [l, r]), Me(() => {
|
|
82
|
+
A.current && (A.current.scrollLeft = A.current.scrollWidth);
|
|
83
|
+
}, [l]);
|
|
83
84
|
const M = (e, s) => {
|
|
84
|
-
C == null || C(e, { ...
|
|
85
|
-
},
|
|
86
|
-
var
|
|
87
|
-
let
|
|
85
|
+
C == null || C(e, { ...E, value: s, name: J || void 0 }), we(s);
|
|
86
|
+
}, Ae = (e, s) => {
|
|
87
|
+
var w;
|
|
88
|
+
let t, d;
|
|
88
89
|
if (P) {
|
|
89
|
-
const B = Array.isArray(
|
|
90
|
-
|
|
90
|
+
const B = Array.isArray(l) ? l : [l].filter(Boolean);
|
|
91
|
+
t = B.slice(), d = m.slice();
|
|
91
92
|
const R = B.findIndex((Se) => Se === s.value);
|
|
92
|
-
R === -1 ? (
|
|
93
|
+
R === -1 ? (t.push(s.value), d.push(s)) : (t.splice(R, 1), d.splice(R, 1));
|
|
93
94
|
} else
|
|
94
|
-
|
|
95
|
-
|
|
95
|
+
t = l === s.value ? "" : s.value, d = [s];
|
|
96
|
+
n && x(""), P || (u(!1), (w = h.current) == null || w.focus()), p(d), M(e, t);
|
|
96
97
|
}, T = (e) => {
|
|
97
|
-
|
|
98
|
+
x(e.target.value), v == null || v(e), o || u(!0);
|
|
98
99
|
}, ge = (e) => (s) => {
|
|
99
|
-
if (Array.isArray(
|
|
100
|
-
const
|
|
101
|
-
M(s,
|
|
102
|
-
const
|
|
103
|
-
|
|
100
|
+
if (Array.isArray(l)) {
|
|
101
|
+
const t = l.filter((w) => e !== w);
|
|
102
|
+
M(s, t);
|
|
103
|
+
const d = m.filter((w) => w.value !== e);
|
|
104
|
+
p(d);
|
|
104
105
|
}
|
|
105
106
|
}, Ie = (e) => {
|
|
106
|
-
M(e, []),
|
|
107
|
+
M(e, []), p([]);
|
|
107
108
|
};
|
|
108
109
|
let I;
|
|
109
|
-
const De =
|
|
110
|
+
const De = V("smwb-select-field", L, {
|
|
110
111
|
"smwb-select-field--filled": j === "filled" && W,
|
|
111
|
-
"smwb-select-field--disabled":
|
|
112
|
-
"smwb-select-field--search":
|
|
112
|
+
"smwb-select-field--disabled": f,
|
|
113
|
+
"smwb-select-field--search": c,
|
|
113
114
|
"smwb-select-field--inline": z
|
|
114
115
|
});
|
|
115
|
-
return ee ? I =
|
|
116
|
-
/* @__PURE__ */
|
|
116
|
+
return ee ? I = m.map(({ key: e, value: s, text: t }) => /* @__PURE__ */ a(Ee, { label: t, onDelete: ge(s), onDeleteMouseDown: $ }, e || s)) : I = m.map((e) => e.text).join(", "), /* @__PURE__ */ b(Ce, { children: [
|
|
117
|
+
/* @__PURE__ */ a(
|
|
117
118
|
Le,
|
|
118
119
|
{
|
|
119
120
|
label: W,
|
|
120
|
-
helperText:
|
|
121
|
+
helperText: le,
|
|
121
122
|
variant: j,
|
|
122
|
-
disabled:
|
|
123
|
-
className:
|
|
123
|
+
disabled: f,
|
|
124
|
+
className: L,
|
|
124
125
|
error: O,
|
|
125
126
|
fullWidth: se,
|
|
126
|
-
isFilledState: !!
|
|
127
|
+
isFilledState: !!m.length || !!n,
|
|
127
128
|
isFocused: g,
|
|
128
129
|
inline: z,
|
|
129
130
|
...me,
|
|
130
|
-
children: /* @__PURE__ */
|
|
131
|
+
children: /* @__PURE__ */ b(
|
|
131
132
|
"span",
|
|
132
133
|
{
|
|
133
134
|
ref: be,
|
|
134
135
|
id: fe,
|
|
135
136
|
className: De,
|
|
136
|
-
tabIndex:
|
|
137
|
+
tabIndex: f ? void 0 : 0,
|
|
137
138
|
role: "button",
|
|
138
139
|
"aria-haspopup": "listbox",
|
|
139
140
|
"aria-expanded": o,
|
|
140
|
-
"aria-disabled":
|
|
141
|
-
"aria-label":
|
|
142
|
-
onMouseDown:
|
|
141
|
+
"aria-disabled": f || void 0,
|
|
142
|
+
"aria-label": de,
|
|
143
|
+
onMouseDown: f || N ? void 0 : _e,
|
|
143
144
|
onFocus: ye,
|
|
144
|
-
onKeyDown:
|
|
145
|
+
onKeyDown: xe,
|
|
145
146
|
"data-testid": "select-field",
|
|
146
147
|
children: [
|
|
147
|
-
/* @__PURE__ */
|
|
148
|
-
I && /* @__PURE__ */
|
|
149
|
-
|
|
150
|
-
/* @__PURE__ */
|
|
151
|
-
/* @__PURE__ */
|
|
148
|
+
/* @__PURE__ */ b("span", { className: "smwb-select-field__search-wrapper", ref: A, children: [
|
|
149
|
+
I && /* @__PURE__ */ a("span", { className: "smwb-select-field__values", children: I }),
|
|
150
|
+
c && typeof c == "boolean" && !N && /* @__PURE__ */ b("span", { className: "smwb-select-field__search", children: [
|
|
151
|
+
/* @__PURE__ */ a("span", { className: "smwb-select-field__search-text", children: n }),
|
|
152
|
+
/* @__PURE__ */ a(
|
|
152
153
|
"input",
|
|
153
154
|
{
|
|
154
155
|
className: "smwb-select-field__search-input",
|
|
155
156
|
ref: H,
|
|
156
157
|
type: "text",
|
|
157
|
-
value:
|
|
158
|
+
value: n,
|
|
158
159
|
onChange: T,
|
|
159
160
|
onMouseDown: (e) => {
|
|
160
161
|
e.stopPropagation(), u(!0);
|
|
@@ -167,22 +168,22 @@ const $e = Ne(function(L, q) {
|
|
|
167
168
|
)
|
|
168
169
|
] })
|
|
169
170
|
] }),
|
|
170
|
-
/* @__PURE__ */
|
|
171
|
-
(Array.isArray(
|
|
171
|
+
/* @__PURE__ */ b("span", { className: "smwb-select-field__actions", children: [
|
|
172
|
+
(Array.isArray(l) && l.length > 0 || re && m.length > 0) && !f && /* @__PURE__ */ a(
|
|
172
173
|
Pe,
|
|
173
174
|
{
|
|
174
175
|
onClick: Ie,
|
|
175
|
-
onMouseDown:
|
|
176
|
-
className:
|
|
176
|
+
onMouseDown: $,
|
|
177
|
+
className: V("smwb-select-field__icon", "smwb-select-field__icon--close"),
|
|
177
178
|
"aria-label": "Clear selection",
|
|
178
179
|
role: "button"
|
|
179
180
|
}
|
|
180
181
|
),
|
|
181
182
|
ne,
|
|
182
|
-
!oe && /* @__PURE__ */
|
|
183
|
+
!oe && /* @__PURE__ */ a(
|
|
183
184
|
ke,
|
|
184
185
|
{
|
|
185
|
-
className:
|
|
186
|
+
className: V("smwb-select-field__icon", "smwb-select-field__icon--arrow", {
|
|
186
187
|
"smwb-select-field__icon--opened": o,
|
|
187
188
|
"smwb-select-field__icon--focused": g,
|
|
188
189
|
"smwb-select-field__icon--error": O
|
|
@@ -195,30 +196,30 @@ const $e = Ne(function(L, q) {
|
|
|
195
196
|
)
|
|
196
197
|
}
|
|
197
198
|
),
|
|
198
|
-
/* @__PURE__ */
|
|
199
|
+
/* @__PURE__ */ a(
|
|
199
200
|
Ve,
|
|
200
201
|
{
|
|
201
|
-
anchorElementRef:
|
|
202
|
+
anchorElementRef: h,
|
|
202
203
|
menuMaxHeight: Q,
|
|
203
204
|
menuMiddleware: X,
|
|
204
|
-
search:
|
|
205
|
+
search: c === "menu",
|
|
205
206
|
onSearchInputChange: T,
|
|
206
|
-
optionRenderer:
|
|
207
|
-
items:
|
|
208
|
-
searchValue:
|
|
207
|
+
optionRenderer: ae,
|
|
208
|
+
items: v ? r : n ? r.filter((e) => e.text.search(new RegExp(n, "i")) !== -1) : r,
|
|
209
|
+
searchValue: n,
|
|
209
210
|
isOpen: o,
|
|
210
|
-
onClose:
|
|
211
|
-
onItemClick:
|
|
212
|
-
value:
|
|
213
|
-
isLoading:
|
|
211
|
+
onClose: ve,
|
|
212
|
+
onItemClick: Ae,
|
|
213
|
+
value: l,
|
|
214
|
+
isLoading: te,
|
|
214
215
|
menuNoItemsMessage: Y,
|
|
215
216
|
container: Z,
|
|
216
217
|
virtualized: ce,
|
|
217
|
-
itemHeight:
|
|
218
|
-
createOption: ie &&
|
|
219
|
-
text: `Создать "${
|
|
218
|
+
itemHeight: ue,
|
|
219
|
+
createOption: ie && n && !r.some((e) => e.text.toLowerCase() === String(n).toLowerCase()) ? {
|
|
220
|
+
text: `Создать "${n}"`,
|
|
220
221
|
onCreate: (e) => {
|
|
221
|
-
F == null || F(String(
|
|
222
|
+
F == null || F(String(n), e), x(""), u(!1);
|
|
222
223
|
}
|
|
223
224
|
} : void 0
|
|
224
225
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"selectField.js","sources":["../../../../../src/components/inputs/selectField/selectField.tsx"],"sourcesContent":["import type { HTMLAttributes, SyntheticEvent } from \"react\";\nimport React, { useState, useRef, useEffect, useMemo, forwardRef } from \"react\";\nimport cn from \"clsx\";\nimport { useSafeLayoutEffect } from \"../../../hooks/useSafeLayoutEffect\";\nimport { useForkRef } from \"../../../hooks/useForkRef\";\nimport { DropdownMenu, DropdownItem, DropdownItemProps } from \"./dropdownMenu\";\nimport Chip from \"../../dataDisplay/chip/chip\";\nimport { TextFieldWrapper } from \"../textField\";\nimport Icon from \"../../base/icon/icon\";\nimport { MenuItemProps } from \"../../navigation/menu\";\n\nconst SelectArrowIcon = (props: HTMLAttributes<HTMLSpanElement>) => <Icon name=\"arrow_drop_down\" {...props} />;\n\nconst ClearIcon = (props: HTMLAttributes<HTMLSpanElement>) => <Icon name=\"close\" size={20} {...props} />;\n\nfunction stopEvent(event: React.SyntheticEvent) {\n event.preventDefault();\n event.stopPropagation();\n}\n\nexport type OnSelectChange = (e: SyntheticEvent, data: SelectFieldProps) => void;\n\nexport interface SelectFieldProps {\n className?: string;\n value?: null | string | number | (string | number | undefined | null)[];\n defaultValue?: null | string | number | (string | number)[];\n onChange?: OnSelectChange;\n disabled?: boolean;\n readOnly?: boolean;\n name?: string;\n multiple?: boolean;\n menuMaxHeight?: number;\n menuMiddleware?: DropdownItemProps[\"menuMiddleware\"];\n menuNoItemsMessage?: React.ReactNode;\n menuContainer?: HTMLElement;\n search?: true | false | \"menu\";\n chips?: boolean;\n isFocused?: boolean;\n error?: boolean;\n items: DropdownItem[];\n label?: string;\n variant?: \"outlined\" | \"filled\";\n fullWidth?: boolean;\n helperText?: React.ReactNode;\n onSearch?: (e: React.ChangeEvent<HTMLInputElement>) => void;\n isLoading?: boolean;\n resetSearch?: () => void;\n inline?: boolean;\n endAdornment?: React.ReactNode;\n hideSelectArrowIcon?: boolean;\n optionRenderer?: (args: MenuItemProps) => React.ReactNode;\n /** Shows a clear button to reset the selection. */\n clearable?: boolean;\n /** Allows creating a new option from the current search text. */\n creatable?: boolean;\n /** Invoked with the typed text when the user creates a new option. */\n onCreate?: (inputValue: string, event: React.SyntheticEvent) => void;\n /** Windows long option lists for performance (fixed row height). */\n virtualized?: boolean;\n /** Row height (px) used when `virtualized`. */\n itemHeight?: number;\n /** Accessible label for the combobox control. */\n \"aria-label\"?: string;\n id?: string;\n}\n\nexport const SelectField = forwardRef<HTMLSpanElement, SelectFieldProps>(function SelectField(props, ref) {\n const {\n className,\n value: valueProp,\n defaultValue,\n onChange,\n disabled,\n readOnly,\n name,\n multiple,\n menuMaxHeight,\n menuMiddleware,\n menuNoItemsMessage,\n menuContainer,\n search,\n chips,\n isFocused: isFocusedProp,\n error,\n items,\n label,\n variant = \"outlined\",\n fullWidth,\n helperText,\n onSearch,\n resetSearch,\n isLoading,\n inline,\n endAdornment,\n hideSelectArrowIcon,\n optionRenderer,\n clearable,\n creatable,\n onCreate,\n virtualized,\n itemHeight,\n \"aria-label\": ariaLabel,\n id,\n ...rest\n } = props;\n const [isOpen, setIsOpen] = useState<boolean>(false);\n const [valueState, setValueState] = useState<typeof valueProp>(defaultValue);\n const [selectedItems, setSelectedItems] = useState<typeof items>(() => {\n if (Array.isArray(valueProp)) {\n return items.filter((item) => valueProp.includes(item.value));\n }\n\n const item = items.find((i) => i.value === valueProp);\n\n return item ? [item] : [];\n });\n const [searchValue, setSearchValue] = useState(\"\");\n const { current: isControlled } = useRef(valueProp != null);\n const anchorElementRef = useRef<HTMLSpanElement>(null);\n const forkedAnchorRef = useForkRef<HTMLSpanElement>(ref, anchorElementRef);\n const searchWrapperRef = useRef<HTMLSpanElement>(null);\n const searchInputRef = useRef<HTMLInputElement>(null);\n const value = isControlled ? valueProp : valueState;\n\n const isFocused = useMemo(() => isFocusedProp || isOpen, [isFocusedProp, isOpen]);\n\n const onMouseDown = (event: React.MouseEvent<HTMLDivElement>) => {\n // Только для левой клавиши мышки.\n if (event.button !== 0) {\n return;\n }\n event.preventDefault();\n anchorElementRef.current?.focus();\n setIsOpen(!isOpen);\n };\n\n const onClose = () => {\n setIsOpen(false);\n anchorElementRef.current?.focus();\n };\n\n const onFocus = () => {\n if (search === true) {\n searchInputRef.current?.focus();\n }\n };\n\n const onKeyDown = (event: React.KeyboardEvent<HTMLDivElement>) => {\n if (!readOnly) {\n const validKeys = [\" \", \"ArrowUp\", \"ArrowDown\", \"Enter\"];\n\n if (validKeys.includes(event.key)) {\n event.preventDefault();\n setIsOpen(!isOpen);\n }\n }\n };\n\n useEffect(() => {\n if (!isFocused || (search === \"menu\" && !isOpen)) {\n setSearchValue(\"\");\n resetSearch?.();\n }\n }, [isFocused, search, isOpen, resetSearch]);\n\n useEffect(() => {\n if (!value || (Array.isArray(value) && !value.length)) {\n setSelectedItems([]);\n }\n }, [value]);\n\n useEffect(() => {\n if (Array.isArray(valueProp)) {\n setSelectedItems(items.filter((item) => valueProp.includes(item.value)));\n } else {\n const item = valueProp == undefined ? undefined : items.find((item) => item.value === valueProp);\n\n if (item === undefined) {\n setSelectedItems([]);\n } else {\n setSelectedItems([item]);\n }\n }\n }, [valueProp, items]);\n\n useSafeLayoutEffect(() => {\n if (searchWrapperRef.current) {\n searchWrapperRef.current.scrollLeft = searchWrapperRef.current.scrollWidth;\n }\n }, [value]);\n\n const updateValue = (event: React.SyntheticEvent, value: typeof valueProp) => {\n onChange?.(event, { ...props, value, name: name || undefined });\n setValueState(value);\n };\n\n const onItemClick = (event: React.SyntheticEvent, item: DropdownItem) => {\n let newValue: typeof valueProp;\n let newSelectedItem: typeof selectedItems;\n if (multiple) {\n const valueArray = Array.isArray(value) ? value : [value].filter(Boolean);\n newValue = valueArray.slice();\n newSelectedItem = selectedItems.slice();\n const itemIndex = valueArray.findIndex((el) => el === item.value);\n\n if (itemIndex === -1) {\n newValue.push(item.value);\n newSelectedItem.push(item);\n } else {\n newValue.splice(itemIndex, 1);\n newSelectedItem.splice(itemIndex, 1);\n }\n } else {\n newValue = value === item.value ? \"\" : item.value;\n newSelectedItem = [item];\n }\n\n if (searchValue) {\n setSearchValue(\"\");\n }\n\n if (!multiple) {\n setIsOpen(false);\n anchorElementRef.current?.focus();\n }\n setSelectedItems(newSelectedItem);\n updateValue(event, newValue);\n };\n\n const onSearchInputChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n setSearchValue(event.target.value);\n onSearch?.(event);\n if (!isOpen) {\n setIsOpen(true);\n }\n };\n\n const onDeleteChip = (currentValue: typeof valueProp) => (event: React.SyntheticEvent) => {\n if (Array.isArray(value)) {\n const newValue = value.filter((value) => currentValue !== value);\n updateValue(event, newValue);\n const newSelectedItems = selectedItems.filter((el) => el.value !== currentValue);\n setSelectedItems(newSelectedItems);\n }\n };\n\n const onResetSelected = (event: React.MouseEvent) => {\n updateValue(event, []);\n setSelectedItems([]);\n };\n\n let displayValues: string | React.ReactNode[];\n\n const classes = cn(\"smwb-select-field\", className, {\n \"smwb-select-field--filled\": variant === \"filled\" && label,\n \"smwb-select-field--disabled\": disabled,\n \"smwb-select-field--search\": search,\n \"smwb-select-field--inline\": inline,\n });\n\n if (chips) {\n displayValues = selectedItems.map(({ key, value, text }) => (\n <Chip key={key || value} label={text} onDelete={onDeleteChip(value)} onDeleteMouseDown={stopEvent} />\n ));\n } else {\n displayValues = selectedItems.map((el) => el.text).join(\", \");\n }\n\n return (\n <>\n <TextFieldWrapper\n label={label}\n helperText={helperText}\n variant={variant}\n disabled={disabled}\n className={className}\n error={error}\n fullWidth={fullWidth}\n isFilledState={!!selectedItems.length || !!searchValue}\n isFocused={isFocused}\n inline={inline}\n {...rest}\n >\n <span\n ref={forkedAnchorRef}\n id={id}\n className={classes}\n tabIndex={disabled ? undefined : 0}\n role=\"button\"\n aria-haspopup=\"listbox\"\n aria-expanded={isOpen}\n aria-disabled={disabled || undefined}\n aria-label={ariaLabel}\n onMouseDown={disabled || readOnly ? undefined : onMouseDown}\n onFocus={onFocus}\n onKeyDown={onKeyDown}\n data-testid=\"select-field\"\n >\n <span className=\"smwb-select-field__search-wrapper\" ref={searchWrapperRef}>\n {displayValues && <span className=\"smwb-select-field__values\">{displayValues}</span>}\n {search && typeof search === \"boolean\" && !readOnly && (\n <span className=\"smwb-select-field__search\">\n <span className=\"smwb-select-field__search-text\">{searchValue}</span>\n <input\n className=\"smwb-select-field__search-input\"\n ref={searchInputRef}\n type=\"text\"\n value={searchValue}\n onChange={onSearchInputChange}\n onMouseDown={(event: React.MouseEvent<HTMLInputElement>) => {\n event.stopPropagation();\n setIsOpen(true);\n }}\n onKeyDown={(event) => {\n event.stopPropagation();\n }}\n data-testid=\"search-input\"\n />\n </span>\n )}\n </span>\n <span className=\"smwb-select-field__actions\">\n {((Array.isArray(value) && value.length > 0) || (clearable && selectedItems.length > 0)) && !disabled && (\n <ClearIcon\n onClick={onResetSelected}\n onMouseDown={stopEvent}\n className={cn(\"smwb-select-field__icon\", \"smwb-select-field__icon--close\")}\n aria-label=\"Clear selection\"\n role=\"button\"\n />\n )}\n {endAdornment}\n {!hideSelectArrowIcon && (\n <SelectArrowIcon\n className={cn(\"smwb-select-field__icon\", \"smwb-select-field__icon--arrow\", {\n \"smwb-select-field__icon--opened\": isOpen,\n \"smwb-select-field__icon--focused\": isFocused,\n \"smwb-select-field__icon--error\": error,\n })}\n />\n )}\n </span>\n </span>\n </TextFieldWrapper>\n <DropdownMenu\n anchorElementRef={anchorElementRef}\n menuMaxHeight={menuMaxHeight}\n menuMiddleware={menuMiddleware}\n search={search === \"menu\"}\n onSearchInputChange={onSearchInputChange}\n optionRenderer={optionRenderer}\n items={\n onSearch\n ? items\n : searchValue\n ? items.filter((el) => el.text.search(new RegExp(searchValue, \"i\")) !== -1)\n : items\n }\n searchValue={searchValue}\n isOpen={isOpen}\n onClose={onClose}\n onItemClick={onItemClick}\n value={value}\n isLoading={isLoading}\n menuNoItemsMessage={menuNoItemsMessage}\n container={menuContainer}\n virtualized={virtualized}\n itemHeight={itemHeight}\n createOption={\n creatable && searchValue && !items.some((i) => i.text.toLowerCase() === String(searchValue).toLowerCase())\n ? {\n text: `Создать \"${searchValue}\"`,\n onCreate: (event: React.SyntheticEvent) => {\n onCreate?.(String(searchValue), event);\n setSearchValue(\"\");\n setIsOpen(false);\n },\n }\n : undefined\n }\n />\n </>\n );\n});\n\nexport default SelectField;\n"],"names":["SelectArrowIcon","props","jsx","Icon","ClearIcon","stopEvent","event","SelectField","forwardRef","ref","className","valueProp","defaultValue","onChange","disabled","readOnly","name","multiple","menuMaxHeight","menuMiddleware","menuNoItemsMessage","menuContainer","search","chips","isFocusedProp","error","items","label","variant","fullWidth","helperText","onSearch","resetSearch","isLoading","inline","endAdornment","hideSelectArrowIcon","optionRenderer","clearable","creatable","onCreate","virtualized","itemHeight","ariaLabel","id","rest","isOpen","setIsOpen","useState","valueState","setValueState","selectedItems","setSelectedItems","item","i","searchValue","setSearchValue","isControlled","useRef","anchorElementRef","forkedAnchorRef","useForkRef","searchWrapperRef","searchInputRef","value","isFocused","useMemo","onMouseDown","_a","onClose","onFocus","onKeyDown","useEffect","useSafeLayoutEffect","updateValue","onItemClick","newValue","newSelectedItem","valueArray","itemIndex","el","onSearchInputChange","onDeleteChip","currentValue","newSelectedItems","onResetSelected","displayValues","classes","cn","key","text","Chip","jsxs","Fragment","TextFieldWrapper","DropdownMenu"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"selectField.js","sources":["../../../../../src/components/inputs/selectField/selectField.tsx"],"sourcesContent":["import type { HTMLAttributes, SyntheticEvent } from \"react\";\nimport React, { useState, useRef, useEffect, useMemo, forwardRef } from \"react\";\nimport cn from \"clsx\";\nimport { useSafeLayoutEffect } from \"../../../hooks/useSafeLayoutEffect\";\nimport { useForkRef } from \"../../../hooks/useForkRef\";\nimport { DropdownMenu, DropdownItem, DropdownItemProps } from \"./dropdownMenu\";\nimport Chip from \"../../dataDisplay/chip/chip\";\nimport { TextFieldWrapper } from \"../textField\";\nimport Icon from \"../../base/icon/icon\";\nimport { MenuItemProps } from \"../../navigation/menu\";\n\nconst SelectArrowIcon = (props: HTMLAttributes<HTMLSpanElement>) => <Icon name=\"arrow_drop_down\" {...props} />;\n\nconst ClearIcon = (props: HTMLAttributes<HTMLSpanElement>) => <Icon name=\"close\" size={20} {...props} />;\n\nfunction stopEvent(event: React.SyntheticEvent) {\n event.preventDefault();\n event.stopPropagation();\n}\n\nexport type OnSelectChange = (e: SyntheticEvent, data: SelectFieldProps) => void;\n\nexport interface SelectFieldProps {\n className?: string;\n value?: null | string | number | (string | number | undefined | null)[];\n defaultValue?: null | string | number | (string | number)[];\n onChange?: OnSelectChange;\n disabled?: boolean;\n readOnly?: boolean;\n name?: string;\n multiple?: boolean;\n menuMaxHeight?: number;\n menuMiddleware?: DropdownItemProps[\"menuMiddleware\"];\n menuNoItemsMessage?: React.ReactNode;\n menuContainer?: HTMLElement;\n search?: true | false | \"menu\";\n chips?: boolean;\n isFocused?: boolean;\n error?: boolean;\n items: DropdownItem[];\n label?: string;\n variant?: \"outlined\" | \"filled\";\n fullWidth?: boolean;\n helperText?: React.ReactNode;\n onSearch?: (e: React.ChangeEvent<HTMLInputElement>) => void;\n isLoading?: boolean;\n resetSearch?: () => void;\n inline?: boolean;\n endAdornment?: React.ReactNode;\n hideSelectArrowIcon?: boolean;\n optionRenderer?: (args: MenuItemProps) => React.ReactNode;\n /** Shows a clear button to reset the selection. */\n clearable?: boolean;\n /** Allows creating a new option from the current search text. */\n creatable?: boolean;\n /** Invoked with the typed text when the user creates a new option. */\n onCreate?: (inputValue: string, event: React.SyntheticEvent) => void;\n /** Windows long option lists for performance (fixed row height). */\n virtualized?: boolean;\n /** Row height (px) used when `virtualized`. */\n itemHeight?: number;\n /** Accessible label for the combobox control. */\n \"aria-label\"?: string;\n id?: string;\n}\n\nexport const SelectField = forwardRef<HTMLSpanElement, SelectFieldProps>(function SelectField(props, ref) {\n const {\n className,\n value: valueProp,\n defaultValue,\n onChange,\n disabled,\n readOnly,\n name,\n multiple,\n menuMaxHeight,\n menuMiddleware,\n menuNoItemsMessage,\n menuContainer,\n search,\n chips,\n isFocused: isFocusedProp,\n error,\n items,\n label,\n variant = \"outlined\",\n fullWidth,\n helperText,\n onSearch,\n resetSearch,\n isLoading,\n inline,\n endAdornment,\n hideSelectArrowIcon,\n optionRenderer,\n clearable,\n creatable,\n onCreate,\n virtualized,\n itemHeight,\n \"aria-label\": ariaLabel,\n id,\n ...rest\n } = props;\n const [isOpen, setIsOpen] = useState<boolean>(false);\n const [valueState, setValueState] = useState<typeof valueProp>(defaultValue);\n const [selectedItems, setSelectedItems] = useState<typeof items>(() => {\n // Seed from the effective initial value so an uncontrolled `defaultValue`\n // shows its selection (and floats the label) before any interaction.\n const initialValue = valueProp != null ? valueProp : defaultValue;\n\n if (Array.isArray(initialValue)) {\n return items.filter((item) => initialValue.includes(item.value));\n }\n\n const item = initialValue == null ? undefined : items.find((i) => i.value === initialValue);\n\n return item ? [item] : [];\n });\n const [searchValue, setSearchValue] = useState(\"\");\n const { current: isControlled } = useRef(valueProp != null);\n const anchorElementRef = useRef<HTMLSpanElement>(null);\n const forkedAnchorRef = useForkRef<HTMLSpanElement>(ref, anchorElementRef);\n const searchWrapperRef = useRef<HTMLSpanElement>(null);\n const searchInputRef = useRef<HTMLInputElement>(null);\n const value = isControlled ? valueProp : valueState;\n\n const isFocused = useMemo(() => isFocusedProp || isOpen, [isFocusedProp, isOpen]);\n\n const onMouseDown = (event: React.MouseEvent<HTMLDivElement>) => {\n // Только для левой клавиши мышки.\n if (event.button !== 0) {\n return;\n }\n event.preventDefault();\n anchorElementRef.current?.focus();\n setIsOpen(!isOpen);\n };\n\n const onClose = () => {\n setIsOpen(false);\n anchorElementRef.current?.focus();\n };\n\n const onFocus = () => {\n if (search === true) {\n searchInputRef.current?.focus();\n }\n };\n\n const onKeyDown = (event: React.KeyboardEvent<HTMLDivElement>) => {\n if (!readOnly) {\n const validKeys = [\" \", \"ArrowUp\", \"ArrowDown\", \"Enter\"];\n\n if (validKeys.includes(event.key)) {\n event.preventDefault();\n setIsOpen(!isOpen);\n }\n }\n };\n\n useEffect(() => {\n if (!isFocused || (search === \"menu\" && !isOpen)) {\n setSearchValue(\"\");\n resetSearch?.();\n }\n }, [isFocused, search, isOpen, resetSearch]);\n\n // Keep the displayed selection in sync with the effective value (controlled\n // `value` or uncontrolled `defaultValue`/internal state), so the label floats\n // whenever there is a value — including the initial default, without focus.\n useEffect(() => {\n if (Array.isArray(value)) {\n setSelectedItems(items.filter((item) => value.includes(item.value)));\n } else if (value == null || value === \"\") {\n setSelectedItems([]);\n } else {\n const item = items.find((item) => item.value === value);\n setSelectedItems(item ? [item] : []);\n }\n }, [value, items]);\n\n useSafeLayoutEffect(() => {\n if (searchWrapperRef.current) {\n searchWrapperRef.current.scrollLeft = searchWrapperRef.current.scrollWidth;\n }\n }, [value]);\n\n const updateValue = (event: React.SyntheticEvent, value: typeof valueProp) => {\n onChange?.(event, { ...props, value, name: name || undefined });\n setValueState(value);\n };\n\n const onItemClick = (event: React.SyntheticEvent, item: DropdownItem) => {\n let newValue: typeof valueProp;\n let newSelectedItem: typeof selectedItems;\n if (multiple) {\n const valueArray = Array.isArray(value) ? value : [value].filter(Boolean);\n newValue = valueArray.slice();\n newSelectedItem = selectedItems.slice();\n const itemIndex = valueArray.findIndex((el) => el === item.value);\n\n if (itemIndex === -1) {\n newValue.push(item.value);\n newSelectedItem.push(item);\n } else {\n newValue.splice(itemIndex, 1);\n newSelectedItem.splice(itemIndex, 1);\n }\n } else {\n newValue = value === item.value ? \"\" : item.value;\n newSelectedItem = [item];\n }\n\n if (searchValue) {\n setSearchValue(\"\");\n }\n\n if (!multiple) {\n setIsOpen(false);\n anchorElementRef.current?.focus();\n }\n setSelectedItems(newSelectedItem);\n updateValue(event, newValue);\n };\n\n const onSearchInputChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n setSearchValue(event.target.value);\n onSearch?.(event);\n if (!isOpen) {\n setIsOpen(true);\n }\n };\n\n const onDeleteChip = (currentValue: typeof valueProp) => (event: React.SyntheticEvent) => {\n if (Array.isArray(value)) {\n const newValue = value.filter((value) => currentValue !== value);\n updateValue(event, newValue);\n const newSelectedItems = selectedItems.filter((el) => el.value !== currentValue);\n setSelectedItems(newSelectedItems);\n }\n };\n\n const onResetSelected = (event: React.MouseEvent) => {\n updateValue(event, []);\n setSelectedItems([]);\n };\n\n let displayValues: string | React.ReactNode[];\n\n const classes = cn(\"smwb-select-field\", className, {\n \"smwb-select-field--filled\": variant === \"filled\" && label,\n \"smwb-select-field--disabled\": disabled,\n \"smwb-select-field--search\": search,\n \"smwb-select-field--inline\": inline,\n });\n\n if (chips) {\n displayValues = selectedItems.map(({ key, value, text }) => (\n <Chip key={key || value} label={text} onDelete={onDeleteChip(value)} onDeleteMouseDown={stopEvent} />\n ));\n } else {\n displayValues = selectedItems.map((el) => el.text).join(\", \");\n }\n\n return (\n <>\n <TextFieldWrapper\n label={label}\n helperText={helperText}\n variant={variant}\n disabled={disabled}\n className={className}\n error={error}\n fullWidth={fullWidth}\n isFilledState={!!selectedItems.length || !!searchValue}\n isFocused={isFocused}\n inline={inline}\n {...rest}\n >\n <span\n ref={forkedAnchorRef}\n id={id}\n className={classes}\n tabIndex={disabled ? undefined : 0}\n role=\"button\"\n aria-haspopup=\"listbox\"\n aria-expanded={isOpen}\n aria-disabled={disabled || undefined}\n aria-label={ariaLabel}\n onMouseDown={disabled || readOnly ? undefined : onMouseDown}\n onFocus={onFocus}\n onKeyDown={onKeyDown}\n data-testid=\"select-field\"\n >\n <span className=\"smwb-select-field__search-wrapper\" ref={searchWrapperRef}>\n {displayValues && <span className=\"smwb-select-field__values\">{displayValues}</span>}\n {search && typeof search === \"boolean\" && !readOnly && (\n <span className=\"smwb-select-field__search\">\n <span className=\"smwb-select-field__search-text\">{searchValue}</span>\n <input\n className=\"smwb-select-field__search-input\"\n ref={searchInputRef}\n type=\"text\"\n value={searchValue}\n onChange={onSearchInputChange}\n onMouseDown={(event: React.MouseEvent<HTMLInputElement>) => {\n event.stopPropagation();\n setIsOpen(true);\n }}\n onKeyDown={(event) => {\n event.stopPropagation();\n }}\n data-testid=\"search-input\"\n />\n </span>\n )}\n </span>\n <span className=\"smwb-select-field__actions\">\n {((Array.isArray(value) && value.length > 0) || (clearable && selectedItems.length > 0)) && !disabled && (\n <ClearIcon\n onClick={onResetSelected}\n onMouseDown={stopEvent}\n className={cn(\"smwb-select-field__icon\", \"smwb-select-field__icon--close\")}\n aria-label=\"Clear selection\"\n role=\"button\"\n />\n )}\n {endAdornment}\n {!hideSelectArrowIcon && (\n <SelectArrowIcon\n className={cn(\"smwb-select-field__icon\", \"smwb-select-field__icon--arrow\", {\n \"smwb-select-field__icon--opened\": isOpen,\n \"smwb-select-field__icon--focused\": isFocused,\n \"smwb-select-field__icon--error\": error,\n })}\n />\n )}\n </span>\n </span>\n </TextFieldWrapper>\n <DropdownMenu\n anchorElementRef={anchorElementRef}\n menuMaxHeight={menuMaxHeight}\n menuMiddleware={menuMiddleware}\n search={search === \"menu\"}\n onSearchInputChange={onSearchInputChange}\n optionRenderer={optionRenderer}\n items={\n onSearch\n ? items\n : searchValue\n ? items.filter((el) => el.text.search(new RegExp(searchValue, \"i\")) !== -1)\n : items\n }\n searchValue={searchValue}\n isOpen={isOpen}\n onClose={onClose}\n onItemClick={onItemClick}\n value={value}\n isLoading={isLoading}\n menuNoItemsMessage={menuNoItemsMessage}\n container={menuContainer}\n virtualized={virtualized}\n itemHeight={itemHeight}\n createOption={\n creatable && searchValue && !items.some((i) => i.text.toLowerCase() === String(searchValue).toLowerCase())\n ? {\n text: `Создать \"${searchValue}\"`,\n onCreate: (event: React.SyntheticEvent) => {\n onCreate?.(String(searchValue), event);\n setSearchValue(\"\");\n setIsOpen(false);\n },\n }\n : undefined\n }\n />\n </>\n );\n});\n\nexport default SelectField;\n"],"names":["SelectArrowIcon","props","jsx","Icon","ClearIcon","stopEvent","event","SelectField","forwardRef","ref","className","valueProp","defaultValue","onChange","disabled","readOnly","name","multiple","menuMaxHeight","menuMiddleware","menuNoItemsMessage","menuContainer","search","chips","isFocusedProp","error","items","label","variant","fullWidth","helperText","onSearch","resetSearch","isLoading","inline","endAdornment","hideSelectArrowIcon","optionRenderer","clearable","creatable","onCreate","virtualized","itemHeight","ariaLabel","id","rest","isOpen","setIsOpen","useState","valueState","setValueState","selectedItems","setSelectedItems","initialValue","item","i","searchValue","setSearchValue","isControlled","useRef","anchorElementRef","forkedAnchorRef","useForkRef","searchWrapperRef","searchInputRef","value","isFocused","useMemo","onMouseDown","_a","onClose","onFocus","onKeyDown","useEffect","useSafeLayoutEffect","updateValue","onItemClick","newValue","newSelectedItem","valueArray","itemIndex","el","onSearchInputChange","onDeleteChip","currentValue","newSelectedItems","onResetSelected","displayValues","classes","cn","key","text","Chip","jsxs","Fragment","TextFieldWrapper","DropdownMenu"],"mappings":"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"}
|