@cuemath/leap 3.2.20 → 3.2.21-as111
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.
@@ -1,114 +1,117 @@
|
|
1
|
-
import { jsxs as
|
2
|
-
import { useMemo as
|
3
|
-
import
|
4
|
-
import
|
5
|
-
import
|
6
|
-
import { Input as
|
7
|
-
import { Container as
|
8
|
-
import
|
9
|
-
import
|
10
|
-
const
|
1
|
+
import { jsxs as y, jsx as o } from "react/jsx-runtime";
|
2
|
+
import { useMemo as q, useRef as V, useCallback as d } from "react";
|
3
|
+
import G from "../../../../assets/line-icons/icons/cross.js";
|
4
|
+
import J from "../../hooks/use-context-menu-click-handler.js";
|
5
|
+
import K from "../base-input/base-input.js";
|
6
|
+
import { Input as N } from "../text-input/text-input-styled.js";
|
7
|
+
import { Container as P, OptionsContainer as Q, OptionsWrapper as U, StyledChevronDownIcon as Y, StyledDownIcon as Z } from "./base-select-input-styled.js";
|
8
|
+
import _ from "./select-option/select-option.js";
|
9
|
+
import ee from "./select-section/select-section.js";
|
10
|
+
const ue = (A) => {
|
11
11
|
const {
|
12
|
-
label:
|
12
|
+
label: b,
|
13
13
|
value: r,
|
14
14
|
options: u,
|
15
15
|
searchable: n = !1,
|
16
|
-
searchText:
|
17
|
-
onCloseWithoutSelection:
|
18
|
-
onSearchTextChange:
|
19
|
-
onChange:
|
16
|
+
searchText: v,
|
17
|
+
onCloseWithoutSelection: E,
|
18
|
+
onSearchTextChange: s,
|
19
|
+
onChange: w,
|
20
20
|
renderAs: h,
|
21
|
-
width:
|
22
|
-
widthX:
|
23
|
-
disabled:
|
24
|
-
willShowMessage:
|
25
|
-
mandatory:
|
26
|
-
size:
|
27
|
-
shape:
|
21
|
+
width: L,
|
22
|
+
widthX: R,
|
23
|
+
disabled: m,
|
24
|
+
willShowMessage: j,
|
25
|
+
mandatory: z,
|
26
|
+
size: I = "regular",
|
27
|
+
shape: p,
|
28
28
|
theme: f = "light",
|
29
|
-
isTransparent:
|
29
|
+
isTransparent: S = !1,
|
30
30
|
renderOptionsAs: $ = "list",
|
31
|
-
errorMessage:
|
32
|
-
|
33
|
-
|
34
|
-
|
35
|
-
if (
|
36
|
-
|
37
|
-
|
38
|
-
|
39
|
-
|
31
|
+
errorMessage: B,
|
32
|
+
getSectionInputLabel: C
|
33
|
+
} = A, i = $ === "section-list" && u, l = $ === "list" && u, x = q(() => {
|
34
|
+
var e;
|
35
|
+
if (n) return v;
|
36
|
+
if (i) {
|
37
|
+
const t = i.find((g) => g.data.some(({ id: H }) => H === r)), c = t == null ? void 0 : t.data.find(({ id: g }) => g === r);
|
38
|
+
return t && C ? C(t, c) : (c == null ? void 0 : c.label) || "";
|
39
|
+
}
|
40
|
+
if (l) return (e = l.find((t) => t.id === r)) == null ? void 0 : e.label;
|
41
|
+
}, [n, v, i, l, C, r]), O = V(null), k = V(null), { menuVisible: a, onMenuClick: D, hideMenu: M } = J(
|
42
|
+
O,
|
40
43
|
void 0,
|
41
44
|
!n,
|
42
|
-
|
43
|
-
|
44
|
-
),
|
45
|
+
E,
|
46
|
+
m
|
47
|
+
), F = d(
|
45
48
|
(e) => {
|
46
|
-
n &&
|
49
|
+
n && s && s(e.target.value);
|
47
50
|
},
|
48
|
-
[
|
49
|
-
),
|
50
|
-
(e,
|
51
|
-
M(),
|
51
|
+
[s, n]
|
52
|
+
), T = d(
|
53
|
+
(e, t) => {
|
54
|
+
M(), w(e, t);
|
52
55
|
},
|
53
|
-
[M,
|
54
|
-
),
|
56
|
+
[M, w]
|
57
|
+
), W = d((e) => {
|
55
58
|
e.target.select(), setTimeout(() => {
|
56
59
|
e.target.scrollIntoView({
|
57
60
|
behavior: "smooth"
|
58
61
|
});
|
59
62
|
}, 300);
|
60
|
-
}, []),
|
63
|
+
}, []), X = d(() => {
|
61
64
|
var e;
|
62
|
-
|
63
|
-
}, [
|
64
|
-
return /* @__PURE__ */
|
65
|
-
/* @__PURE__ */
|
66
|
-
|
65
|
+
s && (s(""), (e = k.current) == null || e.focus());
|
66
|
+
}, [s]);
|
67
|
+
return /* @__PURE__ */ y(P, { ref: O, $width: L, $widthX: R, onClick: D, children: [
|
68
|
+
/* @__PURE__ */ o(
|
69
|
+
K,
|
67
70
|
{
|
68
71
|
renderAs: h,
|
69
|
-
label:
|
72
|
+
label: b,
|
70
73
|
stickyLabel: !0,
|
71
|
-
disabled:
|
72
|
-
willShowMessage:
|
73
|
-
size:
|
74
|
-
mandatory:
|
75
|
-
shape:
|
76
|
-
isTransparent:
|
77
|
-
inputElement: /* @__PURE__ */
|
78
|
-
|
74
|
+
disabled: m,
|
75
|
+
willShowMessage: j,
|
76
|
+
size: I,
|
77
|
+
mandatory: z,
|
78
|
+
shape: p,
|
79
|
+
isTransparent: S,
|
80
|
+
inputElement: /* @__PURE__ */ o(
|
81
|
+
N,
|
79
82
|
{
|
80
|
-
ref:
|
83
|
+
ref: k,
|
81
84
|
$renderAs: h,
|
82
|
-
$size:
|
83
|
-
placeholder:
|
84
|
-
disabled:
|
85
|
+
$size: I,
|
86
|
+
placeholder: x ? "" : b,
|
87
|
+
disabled: m,
|
85
88
|
readOnly: !n,
|
86
|
-
value:
|
87
|
-
onFocus: n ?
|
88
|
-
onChange: n ?
|
89
|
-
$isTransparent:
|
89
|
+
value: x ?? "",
|
90
|
+
onFocus: n ? W : void 0,
|
91
|
+
onChange: n ? F : void 0,
|
92
|
+
$isTransparent: S
|
90
93
|
}
|
91
94
|
),
|
92
|
-
siblingElement: n && a ? /* @__PURE__ */
|
93
|
-
errorMessage:
|
95
|
+
siblingElement: n && a ? /* @__PURE__ */ o(G, { onClick: X }) : p === "curved" || p === "borderLess" ? /* @__PURE__ */ o(Y, { $menuVisible: a, pointerEvents: "none" }) : /* @__PURE__ */ o(Z, { $menuVisible: a, pointerEvents: "none" }),
|
96
|
+
errorMessage: B
|
94
97
|
}
|
95
98
|
),
|
96
|
-
u.length > 0 && /* @__PURE__ */
|
97
|
-
i && /* @__PURE__ */
|
98
|
-
|
99
|
+
u.length > 0 && /* @__PURE__ */ o(Q, { $visible: a, children: /* @__PURE__ */ y(U, { $renderAs: h, $theme: f, children: [
|
100
|
+
i && /* @__PURE__ */ o(
|
101
|
+
ee,
|
99
102
|
{
|
100
103
|
sectionOptions: i,
|
101
104
|
theme: f,
|
102
105
|
value: r,
|
103
|
-
onChange:
|
106
|
+
onChange: T
|
104
107
|
}
|
105
108
|
),
|
106
|
-
|
107
|
-
|
109
|
+
l && l.map((e) => /* @__PURE__ */ o(
|
110
|
+
_,
|
108
111
|
{
|
109
112
|
option: e,
|
110
113
|
selected: e.id === r,
|
111
|
-
onChange:
|
114
|
+
onChange: T,
|
112
115
|
theme: f
|
113
116
|
},
|
114
117
|
e.id
|
@@ -117,6 +120,6 @@ const ae = (y) => {
|
|
117
120
|
] });
|
118
121
|
};
|
119
122
|
export {
|
120
|
-
|
123
|
+
ue as default
|
121
124
|
};
|
122
125
|
//# sourceMappingURL=base-select-input.js.map
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"base-select-input.js","sources":["../../../../../src/features/ui/inputs/base-select-input/base-select-input.tsx"],"sourcesContent":["import type { ISectionOption } from '../../section-list/section-list-types';\nimport type { IBaseSelectInputProps, ISelectOption } from './base-select-input-types';\nimport type { ChangeEvent, FocusEvent, ReactElement } from 'react';\n\nimport { useCallback, useMemo, useRef } from 'react';\n\nimport CrossIcon from '../../../../assets/line-icons/icons/cross';\nimport useContextMenuClickHandler from '../../hooks/use-context-menu-click-handler';\nimport BaseInput from '../base-input/base-input';\nimport { Input } from '../text-input/text-input-styled';\nimport * as Styled from './base-select-input-styled';\nimport SelectOption from './select-option/select-option';\nimport SelectSection from './select-section/select-section';\n\nconst BaseSelectInput = <IDType extends string | number>(\n props: IBaseSelectInputProps<IDType>,\n): ReactElement => {\n const {\n label,\n value,\n options,\n searchable = false,\n searchText,\n onCloseWithoutSelection,\n onSearchTextChange,\n onChange,\n renderAs,\n width,\n widthX,\n disabled,\n willShowMessage,\n mandatory,\n size = 'regular',\n shape,\n theme = 'light',\n isTransparent = false,\n renderOptionsAs = 'list',\n errorMessage,\n } = props;\n\n const sectionOptions =\n renderOptionsAs === 'section-list' && (options as ISectionOption<ISelectOption<IDType>>[]);\n const selectOptions = renderOptionsAs === 'list' && (options as ISelectOption<IDType>[]);\n\n const inputValue = useMemo(() => {\n if (searchable) return searchText;\n\n if (sectionOptions) {\n
|
1
|
+
{"version":3,"file":"base-select-input.js","sources":["../../../../../src/features/ui/inputs/base-select-input/base-select-input.tsx"],"sourcesContent":["import type { ISectionOption } from '../../section-list/section-list-types';\nimport type { IBaseSelectInputProps, ISelectOption } from './base-select-input-types';\nimport type { ChangeEvent, FocusEvent, ReactElement } from 'react';\n\nimport { useCallback, useMemo, useRef } from 'react';\n\nimport CrossIcon from '../../../../assets/line-icons/icons/cross';\nimport useContextMenuClickHandler from '../../hooks/use-context-menu-click-handler';\nimport BaseInput from '../base-input/base-input';\nimport { Input } from '../text-input/text-input-styled';\nimport * as Styled from './base-select-input-styled';\nimport SelectOption from './select-option/select-option';\nimport SelectSection from './select-section/select-section';\n\nconst BaseSelectInput = <IDType extends string | number>(\n props: IBaseSelectInputProps<IDType>,\n): ReactElement => {\n const {\n label,\n value,\n options,\n searchable = false,\n searchText,\n onCloseWithoutSelection,\n onSearchTextChange,\n onChange,\n renderAs,\n width,\n widthX,\n disabled,\n willShowMessage,\n mandatory,\n size = 'regular',\n shape,\n theme = 'light',\n isTransparent = false,\n renderOptionsAs = 'list',\n errorMessage,\n getSectionInputLabel,\n } = props;\n\n const sectionOptions =\n renderOptionsAs === 'section-list' && (options as ISectionOption<ISelectOption<IDType>>[]);\n const selectOptions = renderOptionsAs === 'list' && (options as ISelectOption<IDType>[]);\n\n const inputValue = useMemo(() => {\n if (searchable) return searchText;\n\n if (sectionOptions) {\n const section = sectionOptions.find(sec => sec.data.some(({ id }) => id === value));\n const option = section?.data.find(({ id }) => id === value);\n\n if (section && getSectionInputLabel) return getSectionInputLabel(section, option);\n\n return option?.label || '';\n }\n\n if (selectOptions) return selectOptions.find(option => option.id === value)?.label;\n }, [searchable, searchText, sectionOptions, selectOptions, getSectionInputLabel, value]);\n\n const containerRef = useRef<HTMLDivElement>(null) as React.RefObject<HTMLDivElement>;\n const inputRef = useRef<HTMLInputElement>(null) as React.RefObject<HTMLInputElement>;\n const { menuVisible, onMenuClick, hideMenu } = useContextMenuClickHandler(\n containerRef,\n undefined,\n !searchable,\n onCloseWithoutSelection,\n disabled,\n );\n\n const handleTextChange = useCallback(\n (e: ChangeEvent<HTMLInputElement>) => {\n if (searchable && onSearchTextChange) {\n onSearchTextChange(e.target.value);\n }\n },\n [onSearchTextChange, searchable],\n );\n\n const handleChange = useCallback<IBaseSelectInputProps<IDType>['onChange']>(\n (id, option) => {\n hideMenu();\n onChange(id, option);\n },\n [hideMenu, onChange],\n );\n\n const handleFocus = useCallback((e: FocusEvent<HTMLInputElement>) => {\n e.target.select();\n setTimeout(() => {\n e.target.scrollIntoView({\n behavior: 'smooth',\n });\n }, 300);\n }, []);\n\n const handleClear = useCallback(() => {\n if (onSearchTextChange) {\n onSearchTextChange('');\n inputRef.current?.focus();\n }\n }, [onSearchTextChange]);\n\n const downIcon =\n shape === 'curved' || shape === 'borderLess' ? (\n <Styled.StyledChevronDownIcon $menuVisible={menuVisible} pointerEvents=\"none\" />\n ) : (\n <Styled.StyledDownIcon $menuVisible={menuVisible} pointerEvents=\"none\" />\n );\n\n return (\n <Styled.Container ref={containerRef} $width={width} $widthX={widthX} onClick={onMenuClick}>\n <BaseInput\n renderAs={renderAs}\n label={label}\n stickyLabel={true}\n disabled={disabled}\n willShowMessage={willShowMessage}\n size={size}\n mandatory={mandatory}\n shape={shape}\n isTransparent={isTransparent}\n inputElement={\n <Input\n ref={inputRef}\n $renderAs={renderAs}\n $size={size}\n placeholder={inputValue ? '' : label}\n disabled={disabled}\n readOnly={!searchable}\n value={inputValue ?? ''}\n onFocus={searchable ? handleFocus : undefined}\n onChange={searchable ? handleTextChange : undefined}\n $isTransparent={isTransparent}\n />\n }\n siblingElement={searchable && menuVisible ? <CrossIcon onClick={handleClear} /> : downIcon}\n errorMessage={errorMessage}\n />\n\n {options.length > 0 && (\n <Styled.OptionsContainer $visible={menuVisible}>\n <Styled.OptionsWrapper $renderAs={renderAs} $theme={theme}>\n {sectionOptions && (\n <SelectSection<IDType>\n sectionOptions={sectionOptions}\n theme={theme}\n value={value}\n onChange={handleChange}\n />\n )}\n\n {selectOptions &&\n selectOptions.map(option => (\n <SelectOption<IDType>\n key={option.id}\n option={option}\n selected={option.id === value}\n onChange={handleChange}\n theme={theme}\n />\n ))}\n </Styled.OptionsWrapper>\n </Styled.OptionsContainer>\n )}\n </Styled.Container>\n );\n};\n\nexport default BaseSelectInput;\n"],"names":["BaseSelectInput","props","label","value","options","searchable","searchText","onCloseWithoutSelection","onSearchTextChange","onChange","renderAs","width","widthX","disabled","willShowMessage","mandatory","size","shape","theme","isTransparent","renderOptionsAs","errorMessage","getSectionInputLabel","sectionOptions","selectOptions","inputValue","useMemo","section","sec","id","option","_a","containerRef","useRef","inputRef","menuVisible","onMenuClick","hideMenu","useContextMenuClickHandler","handleTextChange","useCallback","handleChange","handleFocus","handleClear","jsxs","Styled.Container","jsx","BaseInput","Input","CrossIcon","Styled.StyledChevronDownIcon","Styled.StyledDownIcon","Styled.OptionsContainer","Styled.OptionsWrapper","SelectSection","SelectOption"],"mappings":"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"}
|
package/dist/index.d.ts
CHANGED
@@ -838,6 +838,7 @@ declare interface IBaseSelectInputProps<IDType extends string | number> extends
|
|
838
838
|
controlled?: boolean;
|
839
839
|
size?: TInputSizes;
|
840
840
|
theme?: 'light' | 'dark';
|
841
|
+
getSectionInputLabel?: (section: ISectionOption<ISelectOption<IDType>>, option: ISelectOption<IDType> | undefined) => string;
|
841
842
|
}
|
842
843
|
|
843
844
|
declare interface IBaseWebGameProps {
|