@embeddable.com/remarkable-ui 0.1.34 → 0.1.36
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/ComparisonPeriodSelectFieldPro.js +2 -2
- package/dist/DateRangeSelectFieldPro.js +1 -1
- package/dist/EditorCard-VE-lXcu3.js +76 -0
- package/dist/EditorCard-VE-lXcu3.js.map +1 -0
- package/dist/MultiSelectFieldPro.js +1 -1
- package/dist/SingleSelectField-Dzx78rCq.js +107 -0
- package/dist/SingleSelectField-Dzx78rCq.js.map +1 -0
- package/dist/SingleSelectFieldPro.js +1 -1
- package/dist/component.constants-D59iJ42U.js.map +1 -1
- package/dist/embeddable-components.json +11 -11
- package/dist/{index-CWufi8Tg.js → index-BlqpkSit.js} +3 -3
- package/dist/{index-CWufi8Tg.js.map → index-BlqpkSit.js.map} +1 -1
- package/dist/index-CVw4TFfQ.js +220 -0
- package/dist/index-CVw4TFfQ.js.map +1 -0
- package/dist/{index-D10laZQ1.js → index-IjB-3gUH.js} +3 -3
- package/dist/{index-D10laZQ1.js.map → index-IjB-3gUH.js.map} +1 -1
- package/dist/index.js +6 -6
- package/dist/remarkable-ui/editors/select/MultiSelectField/MultiSelectField.d.ts +2 -2
- package/dist/remarkable-ui/editors/select/MultiSelectField/MultiSelectField.d.ts.map +1 -1
- package/dist/remarkable-ui/editors/select/MultiSelectField/MultiSelectField.stories.d.ts +2 -0
- package/dist/remarkable-ui/editors/select/MultiSelectField/MultiSelectField.stories.d.ts.map +1 -1
- package/dist/remarkable-ui/editors/select/SingleSelectField/SingleSelectField.d.ts +2 -2
- package/dist/remarkable-ui/editors/select/SingleSelectField/SingleSelectField.d.ts.map +1 -1
- package/dist/remarkable-ui/editors/select/SingleSelectField/SingleSelectField.stories.d.ts +1 -0
- package/dist/remarkable-ui/editors/select/SingleSelectField/SingleSelectField.stories.d.ts.map +1 -1
- package/dist/remarkable-ui/editors/select/shared/SelectList/SelectListOptions/SelectListCategory/SelectListCategory.d.ts +7 -0
- package/dist/remarkable-ui/editors/select/shared/SelectList/SelectListOptions/SelectListCategory/SelectListCategory.d.ts.map +1 -0
- package/dist/remarkable-ui/editors/select/shared/SelectList/SelectListOptions/SelectListOption/SelectListOption.d.ts +3 -0
- package/dist/remarkable-ui/editors/select/shared/SelectList/SelectListOptions/SelectListOption/SelectListOption.d.ts.map +1 -1
- package/dist/remarkable-ui/editors/select/shared/SelectList/selectList.utils.d.ts +7 -0
- package/dist/remarkable-ui/editors/select/shared/SelectList/selectList.utils.d.ts.map +1 -0
- package/dist/remarkable-ui.css +1 -1
- package/package.json +1 -1
- package/dist/EditorCard-B7s7sQ-B.js +0 -62
- package/dist/EditorCard-B7s7sQ-B.js.map +0 -1
- package/dist/SingleSelectField-DXVRxF0n.js +0 -96
- package/dist/SingleSelectField-DXVRxF0n.js.map +0 -1
- package/dist/index-Bh33sXJ4.js +0 -209
- package/dist/index-Bh33sXJ4.js.map +0 -1
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
import { useTheme as v, defineComponent as h } from "@embeddable.com/react";
|
|
2
2
|
import { ac as y, a2 as P, i as f, r as b, j as l, U as C, t as S, c as F, ad as R, V as d } from "./component.constants-D59iJ42U.js";
|
|
3
3
|
import { useMemo as M, useEffect as k } from "react";
|
|
4
|
-
import { S as D } from "./SingleSelectField-
|
|
4
|
+
import { S as D } from "./SingleSelectField-Dzx78rCq.js";
|
|
5
5
|
import { g as T, u as j, a as x } from "./editors.timeRange.utils-D9m6B3r1.js";
|
|
6
|
-
import { E as L } from "./EditorCard-
|
|
6
|
+
import { E as L } from "./EditorCard-VE-lXcu3.js";
|
|
7
7
|
import { C as s } from "./ComparisonPeriod.type.emb-C7ixEJKv.js";
|
|
8
8
|
/**
|
|
9
9
|
* @license @tabler/icons-react v3.35.0 - MIT
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { defineComponent as t } from "@embeddable.com/react";
|
|
2
2
|
import { t as l, c as n, ad as r, V as a } from "./component.constants-D59iJ42U.js";
|
|
3
|
-
import { D as o } from "./index-
|
|
3
|
+
import { D as o } from "./index-BlqpkSit.js";
|
|
4
4
|
const d = {
|
|
5
5
|
name: "DateRangeSelectFieldPro",
|
|
6
6
|
label: "Date Range Select Field",
|
|
@@ -0,0 +1,76 @@
|
|
|
1
|
+
import { ac as u, j as a, af as g, i as m, ah as y, ai as _, al as p, am as h, U as x, aO as f } from "./component.constants-D59iJ42U.js";
|
|
2
|
+
import { useEffect as C } from "react";
|
|
3
|
+
import { useTheme as b } from "@embeddable.com/react";
|
|
4
|
+
/**
|
|
5
|
+
* @license @tabler/icons-react v3.35.0 - MIT
|
|
6
|
+
*
|
|
7
|
+
* This source code is licensed under the MIT license.
|
|
8
|
+
* See the LICENSE file in the root directory of this source tree.
|
|
9
|
+
*/
|
|
10
|
+
const j = [["path", { d: "M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0", key: "svg-0" }], ["path", { d: "M21 21l-6 -6", key: "svg-1" }]], $ = u("outline", "search", "Search", j), v = "_listOptions_2o1ip_1", S = "_disabled_2o1ip_6", c = {
|
|
11
|
+
listOptions: v,
|
|
12
|
+
disabled: S
|
|
13
|
+
}, A = ({ children: t, disabled: s, ...e }) => /* @__PURE__ */ a.jsx("div", { className: g(c.listOptions, s && c.disabled), ...e, children: t }), O = "_category_1govg_1", L = "_categoryLabel_1govg_9", n = {
|
|
14
|
+
category: O,
|
|
15
|
+
categoryLabel: L
|
|
16
|
+
}, B = ({ label: t }) => /* @__PURE__ */ a.jsx("div", { className: n.category, children: /* @__PURE__ */ a.jsx("span", { className: n.categoryLabel, children: t }) });
|
|
17
|
+
function D(t, s = 300) {
|
|
18
|
+
let e;
|
|
19
|
+
return (...r) => {
|
|
20
|
+
clearTimeout(e), e = setTimeout(() => {
|
|
21
|
+
t(...r);
|
|
22
|
+
}, s);
|
|
23
|
+
};
|
|
24
|
+
}
|
|
25
|
+
const H = (t) => {
|
|
26
|
+
const s = t.reduce((e, r) => {
|
|
27
|
+
if ("category" in r && r.category) {
|
|
28
|
+
const o = r.category;
|
|
29
|
+
e[o] || (e[o] = []), e[o].push(r);
|
|
30
|
+
}
|
|
31
|
+
return e;
|
|
32
|
+
}, {});
|
|
33
|
+
return Object.keys(s).length === 0 ? null : s;
|
|
34
|
+
}, M = (t, s) => {
|
|
35
|
+
C(() => {
|
|
36
|
+
t && setTimeout(() => {
|
|
37
|
+
var e;
|
|
38
|
+
(e = s.current) == null || e.focus();
|
|
39
|
+
}, 100);
|
|
40
|
+
}, [t, s]);
|
|
41
|
+
}, N = "_error_1xvr5_1", T = "_card_1xvr5_7", i = {
|
|
42
|
+
error: N,
|
|
43
|
+
card: T
|
|
44
|
+
}, R = ({
|
|
45
|
+
title: t,
|
|
46
|
+
subtitle: s,
|
|
47
|
+
children: e,
|
|
48
|
+
errorMessage: r,
|
|
49
|
+
...o
|
|
50
|
+
}) => {
|
|
51
|
+
const l = b();
|
|
52
|
+
m(l);
|
|
53
|
+
const d = () => r ? /* @__PURE__ */ a.jsx(
|
|
54
|
+
h,
|
|
55
|
+
{
|
|
56
|
+
className: i.error,
|
|
57
|
+
icon: f,
|
|
58
|
+
title: x.t("editors.errorTitle"),
|
|
59
|
+
message: r
|
|
60
|
+
}
|
|
61
|
+
) : e;
|
|
62
|
+
return /* @__PURE__ */ a.jsxs(y, { className: i.card, ...o, children: [
|
|
63
|
+
/* @__PURE__ */ a.jsx(_, { title: t, subtitle: s }),
|
|
64
|
+
/* @__PURE__ */ a.jsx(p, { children: d() })
|
|
65
|
+
] });
|
|
66
|
+
};
|
|
67
|
+
export {
|
|
68
|
+
R as E,
|
|
69
|
+
$ as I,
|
|
70
|
+
A as S,
|
|
71
|
+
B as a,
|
|
72
|
+
D as d,
|
|
73
|
+
H as g,
|
|
74
|
+
M as u
|
|
75
|
+
};
|
|
76
|
+
//# sourceMappingURL=EditorCard-VE-lXcu3.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"EditorCard-VE-lXcu3.js","sources":["../node_modules/@tabler/icons-react/dist/esm/icons/IconSearch.mjs","../src/remarkable-ui/editors/select/shared/SelectList/SelectListOptions/SelectListOptions.tsx","../src/remarkable-ui/editors/select/shared/SelectList/SelectListOptions/SelectListCategory/SelectListCategory.tsx","../src/remarkable-ui/utils/debounce.utils.ts","../src/remarkable-ui/editors/select/shared/SelectList/selectList.utils.ts","../src/remarkable-ui/editors/select/shared/useSelectSearchFocus.hook.ts","../src/remarkable-pro/components/editors/shared/EditorCard/EditorCard.tsx"],"sourcesContent":["/**\n * @license @tabler/icons-react v3.35.0 - MIT\n *\n * This source code is licensed under the MIT license.\n * See the LICENSE file in the root directory of this source tree.\n */\n\nimport createReactComponent from '../createReactComponent.mjs';\n\nconst __iconNode = [[\"path\", { \"d\": \"M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0\", \"key\": \"svg-0\" }], [\"path\", { \"d\": \"M21 21l-6 -6\", \"key\": \"svg-1\" }]];\nconst IconSearch = createReactComponent(\"outline\", \"search\", \"Search\", __iconNode);\n\nexport { __iconNode, IconSearch as default };\n//# sourceMappingURL=IconSearch.mjs.map\n","import { FC } from 'react';\nimport styles from './SelectListOptions.module.css';\nimport clsx from 'clsx';\n\nexport type SelectListOptionsProps = React.HTMLAttributes<HTMLDivElement> & {\n children: React.ReactNode;\n disabled?: boolean;\n};\n\nexport const SelectListOptions: FC<SelectListOptionsProps> = ({ children, disabled, ...props }) => {\n return (\n <div className={clsx(styles.listOptions, disabled && styles.disabled)} {...props}>\n {children}\n </div>\n );\n};\n","import { FC } from 'react';\nimport styles from './SelectListCategory.module.css';\n\ntype SelectListCategoryProps = {\n label: string;\n};\n\nexport const SelectListCategory: FC<SelectListCategoryProps> = ({ label }) => {\n return (\n <div className={styles.category}>\n <span className={styles.categoryLabel}>{label}</span>\n </div>\n );\n};\n","// eslint-disable-next-line @typescript-eslint/no-explicit-any\nexport function debounce<T extends (...args: any[]) => void>(\n fn: T,\n delay = 300,\n): (...args: Parameters<T>) => void {\n let timer: NodeJS.Timeout;\n return (...args: Parameters<T>) => {\n clearTimeout(timer);\n timer = setTimeout(() => {\n fn(...args);\n }, delay);\n };\n}\n","import {\n SelectListOptionProps,\n SelectListOptionPropsWithCategory,\n} from './SelectListOptions/SelectListOption/SelectListOption';\n\ntype GroupedOptions = {\n [category: string]: SelectListOptionPropsWithCategory[];\n};\n\nexport const groupOptionsByCategory = (\n options: (SelectListOptionProps | SelectListOptionPropsWithCategory)[],\n): GroupedOptions | null => {\n const result = options.reduce<GroupedOptions>((acc, option) => {\n if ('category' in option && option.category) {\n const category = option.category;\n if (!acc[category]) {\n acc[category] = [];\n }\n acc[category].push(option);\n }\n return acc;\n }, {});\n\n // Return null if no categories were found\n return Object.keys(result).length === 0 ? null : result;\n};\n","import { useEffect } from 'react';\n\nexport const useSelectSearchFocus = (\n isOpen: boolean,\n searchFieldRef: React.RefObject<HTMLInputElement | null>,\n) => {\n useEffect(() => {\n if (isOpen) {\n setTimeout(() => {\n (searchFieldRef.current as unknown as HTMLInputElement)?.focus();\n }, 100);\n }\n }, [isOpen, searchFieldRef]);\n};\n","import { useTheme } from '@embeddable.com/react';\nimport { i18n, i18nSetup } from '../../../../theme/i18n/i18n';\nimport styles from './EditorCard.module.css';\nimport { FC } from 'react';\nimport { Theme } from '../../../../theme/theme.types';\nimport { Card, CardContent, CardContentInfo, CardHeader } from '../../../../../remarkable-ui';\nimport { IconAlertCircle } from '@tabler/icons-react';\n\ntype EditorCardProps = {\n title?: string;\n subtitle?: string;\n children: React.ReactNode;\n errorMessage?: string;\n};\n\nexport const EditorCard: FC<EditorCardProps> = ({\n title,\n subtitle,\n children,\n errorMessage,\n ...props\n}) => {\n const theme: Theme = useTheme() as Theme;\n i18nSetup(theme);\n\n const getDisplay = () => {\n if (errorMessage) {\n return (\n <CardContentInfo\n className={styles.error}\n icon={IconAlertCircle}\n title={i18n.t('editors.errorTitle')}\n message={errorMessage}\n />\n );\n }\n\n return children;\n };\n\n return (\n <Card className={styles.card} {...props}>\n <CardHeader title={title} subtitle={subtitle} />\n <CardContent>{getDisplay()}</CardContent>\n </Card>\n );\n};\n"],"names":["__iconNode","IconSearch","createReactComponent","SelectListOptions","children","disabled","props","jsx","clsx","styles","SelectListCategory","label","debounce","fn","delay","timer","args","groupOptionsByCategory","options","result","acc","option","category","useSelectSearchFocus","isOpen","searchFieldRef","useEffect","_a","EditorCard","title","subtitle","errorMessage","theme","useTheme","i18nSetup","getDisplay","CardContentInfo","IconAlertCircle","i18n","Card","CardHeader","CardContent"],"mappings":";;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AASA,MAAMA,IAAa,CAAC,CAAC,QAAQ,EAAE,GAAK,8CAA8C,KAAO,QAAO,CAAE,GAAG,CAAC,QAAQ,EAAE,GAAK,gBAAgB,KAAO,QAAO,CAAE,CAAC,GAChJC,IAAaC,EAAqB,WAAW,UAAU,UAAUF,CAAU;;;GCDpEG,IAAgD,CAAC,EAAE,UAAAC,GAAU,UAAAC,GAAU,GAAGC,QAEnFC,gBAAAA,EAAAA,IAAC,OAAA,EAAI,WAAWC,EAAKC,EAAO,aAAaJ,KAAYI,EAAO,QAAQ,GAAI,GAAGH,GACxE,UAAAF,EAAA,CACH;;;GCNSM,IAAkD,CAAC,EAAE,OAAAC,QAE9DJ,gBAAAA,EAAAA,IAAC,OAAA,EAAI,WAAWE,EAAO,UACrB,UAAAF,gBAAAA,EAAAA,IAAC,QAAA,EAAK,WAAWE,EAAO,eAAgB,UAAAE,EAAA,CAAM,GAChD;ACVG,SAASC,EACdC,GACAC,IAAQ,KAC0B;AAClC,MAAIC;AACJ,SAAO,IAAIC,MAAwB;AACjC,iBAAaD,CAAK,GAClBA,IAAQ,WAAW,MAAM;AACvB,MAAAF,EAAG,GAAGG,CAAI;AAAA,IACZ,GAAGF,CAAK;AAAA,EACV;AACF;ACHO,MAAMG,IAAyB,CACpCC,MAC0B;AAC1B,QAAMC,IAASD,EAAQ,OAAuB,CAACE,GAAKC,MAAW;AAC7D,QAAI,cAAcA,KAAUA,EAAO,UAAU;AAC3C,YAAMC,IAAWD,EAAO;AACxB,MAAKD,EAAIE,CAAQ,MACfF,EAAIE,CAAQ,IAAI,CAAA,IAElBF,EAAIE,CAAQ,EAAE,KAAKD,CAAM;AAAA,IAC3B;AACA,WAAOD;AAAA,EACT,GAAG,CAAA,CAAE;AAGL,SAAO,OAAO,KAAKD,CAAM,EAAE,WAAW,IAAI,OAAOA;AACnD,GCvBaI,IAAuB,CAClCC,GACAC,MACG;AACH,EAAAC,EAAU,MAAM;AACd,IAAIF,KACF,WAAW,MAAM;;AACd,OAAAG,IAAAF,EAAe,YAAf,QAAAE,EAAwD;AAAA,IAC3D,GAAG,GAAG;AAAA,EAEV,GAAG,CAACH,GAAQC,CAAc,CAAC;AAC7B;;;GCEaG,IAAkC,CAAC;AAAA,EAC9C,OAAAC;AAAA,EACA,UAAAC;AAAA,EACA,UAAA1B;AAAA,EACA,cAAA2B;AAAA,EACA,GAAGzB;AACL,MAAM;AACJ,QAAM0B,IAAeC,EAAA;AACrB,EAAAC,EAAUF,CAAK;AAEf,QAAMG,IAAa,MACbJ,IAEAxB,gBAAAA,EAAAA;AAAAA,IAAC6B;AAAA,IAAA;AAAA,MACC,WAAW3B,EAAO;AAAA,MAClB,MAAM4B;AAAA,MACN,OAAOC,EAAK,EAAE,oBAAoB;AAAA,MAClC,SAASP;AAAA,IAAA;AAAA,EAAA,IAKR3B;AAGT,gCACGmC,GAAA,EAAK,WAAW9B,EAAO,MAAO,GAAGH,GAChC,UAAA;AAAA,IAAAC,gBAAAA,EAAAA,IAACiC,GAAA,EAAW,OAAAX,GAAc,UAAAC,EAAA,CAAoB;AAAA,IAC9CvB,gBAAAA,EAAAA,IAACkC,GAAA,EAAa,UAAAN,EAAA,EAAW,CAAE;AAAA,EAAA,GAC7B;AAEJ;","x_google_ignoreList":[0]}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { defineComponent as i } from "@embeddable.com/react";
|
|
2
2
|
import { d as r, z as s, t as d, c as u, ad as m, V as t, o as c } from "./component.constants-D59iJ42U.js";
|
|
3
|
-
import { M as p, a as f } from "./index-
|
|
3
|
+
import { M as p, a as f } from "./index-CVw4TFfQ.js";
|
|
4
4
|
const g = {
|
|
5
5
|
name: "MultiSelectFieldPro",
|
|
6
6
|
label: "Multi Select Field",
|
|
@@ -0,0 +1,107 @@
|
|
|
1
|
+
import { j as s, ao as D, ar as N, as as q, ap as x, aq as w, an as K } from "./component.constants-D59iJ42U.js";
|
|
2
|
+
import { useState as b, useRef as P, useEffect as T, useMemo as O } from "react";
|
|
3
|
+
import { u as z, d as A, g as G, I as H, S as J, a as M } from "./EditorCard-VE-lXcu3.js";
|
|
4
|
+
const Q = "_selectField_73cni_1", U = {
|
|
5
|
+
selectField: Q
|
|
6
|
+
}, Y = ({
|
|
7
|
+
value: t = "",
|
|
8
|
+
startIcon: L,
|
|
9
|
+
options: c,
|
|
10
|
+
disabled: j,
|
|
11
|
+
placeholder: y,
|
|
12
|
+
isSearchable: m,
|
|
13
|
+
isClearable: o,
|
|
14
|
+
isLoading: g,
|
|
15
|
+
noOptionsMessage: E = "No options available",
|
|
16
|
+
onChange: I,
|
|
17
|
+
onSearch: a,
|
|
18
|
+
error: p = !1,
|
|
19
|
+
errorMessage: i
|
|
20
|
+
}) => {
|
|
21
|
+
const [h, R] = b(!1), [C, v] = b(""), [_, d] = b(t), S = P(null);
|
|
22
|
+
z(h, S), T(() => {
|
|
23
|
+
if (!t) {
|
|
24
|
+
d("");
|
|
25
|
+
return;
|
|
26
|
+
}
|
|
27
|
+
const e = c.find((r) => r.value === t);
|
|
28
|
+
e && d(e.label);
|
|
29
|
+
}, [t, c]);
|
|
30
|
+
const n = O(() => a ? A(a) : void 0, [a]), u = m && !a ? c.filter((e) => e.label.toLowerCase().includes(C.toLowerCase())) : c, F = O(() => G(u), [u]), f = (e) => {
|
|
31
|
+
if (v(""), I(e ?? ""), a == null || a(""), e === "")
|
|
32
|
+
d("");
|
|
33
|
+
else {
|
|
34
|
+
const r = c.find((l) => l.value === e);
|
|
35
|
+
r && d(r.label);
|
|
36
|
+
}
|
|
37
|
+
}, k = (e) => {
|
|
38
|
+
v(e), n == null || n(e);
|
|
39
|
+
}, B = p || !!i;
|
|
40
|
+
return /* @__PURE__ */ s.jsxs("div", { className: U.selectField, children: [
|
|
41
|
+
/* @__PURE__ */ s.jsx(
|
|
42
|
+
D,
|
|
43
|
+
{
|
|
44
|
+
open: h,
|
|
45
|
+
onOpenChange: R,
|
|
46
|
+
disabled: j,
|
|
47
|
+
triggerComponent: /* @__PURE__ */ s.jsx(
|
|
48
|
+
w,
|
|
49
|
+
{
|
|
50
|
+
startIcon: L,
|
|
51
|
+
"aria-label": "Select option",
|
|
52
|
+
placeholder: y,
|
|
53
|
+
disabled: j,
|
|
54
|
+
valueLabel: _,
|
|
55
|
+
onClear: () => f(""),
|
|
56
|
+
isClearable: o,
|
|
57
|
+
isLoading: g,
|
|
58
|
+
error: B
|
|
59
|
+
}
|
|
60
|
+
),
|
|
61
|
+
children: /* @__PURE__ */ s.jsxs(N, { children: [
|
|
62
|
+
m && /* @__PURE__ */ s.jsx(
|
|
63
|
+
q,
|
|
64
|
+
{
|
|
65
|
+
ref: S,
|
|
66
|
+
startIcon: H,
|
|
67
|
+
"aria-label": "Search options",
|
|
68
|
+
placeholder: "Search…",
|
|
69
|
+
role: "searchbox",
|
|
70
|
+
value: C,
|
|
71
|
+
onKeyDown: (e) => e.stopPropagation(),
|
|
72
|
+
onChange: k
|
|
73
|
+
}
|
|
74
|
+
),
|
|
75
|
+
/* @__PURE__ */ s.jsxs(J, { disabled: g, children: [
|
|
76
|
+
F ? Object.entries(F).map(([e, r]) => /* @__PURE__ */ s.jsxs("div", { children: [
|
|
77
|
+
/* @__PURE__ */ s.jsx(M, { label: e }),
|
|
78
|
+
r.map((l) => /* @__PURE__ */ s.jsx(
|
|
79
|
+
x,
|
|
80
|
+
{
|
|
81
|
+
onClick: () => f(l == null ? void 0 : l.value),
|
|
82
|
+
isSelected: l.value === t,
|
|
83
|
+
...l
|
|
84
|
+
},
|
|
85
|
+
(l == null ? void 0 : l.value) ?? l.label
|
|
86
|
+
))
|
|
87
|
+
] }, e)) : u.map((e) => /* @__PURE__ */ s.jsx(
|
|
88
|
+
x,
|
|
89
|
+
{
|
|
90
|
+
onClick: () => f(e == null ? void 0 : e.value),
|
|
91
|
+
isSelected: e.value === t,
|
|
92
|
+
...e
|
|
93
|
+
},
|
|
94
|
+
(e == null ? void 0 : e.value) ?? e.label
|
|
95
|
+
)),
|
|
96
|
+
c.length === 0 && /* @__PURE__ */ s.jsx(x, { disabled: !0, value: "empty", label: E })
|
|
97
|
+
] })
|
|
98
|
+
] })
|
|
99
|
+
}
|
|
100
|
+
),
|
|
101
|
+
i && /* @__PURE__ */ s.jsx(K, { message: i })
|
|
102
|
+
] });
|
|
103
|
+
};
|
|
104
|
+
export {
|
|
105
|
+
Y as S
|
|
106
|
+
};
|
|
107
|
+
//# sourceMappingURL=SingleSelectField-Dzx78rCq.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"SingleSelectField-Dzx78rCq.js","sources":["../src/remarkable-ui/editors/select/SingleSelectField/SingleSelectField.tsx"],"sourcesContent":["import { FC, useEffect, useMemo, useRef, useState } from 'react';\nimport { TextField } from '../../TextField/TextField';\nimport { SelectButton } from '../shared/SelectButton/SelectButton';\nimport { Dropdown } from '../../../shared/Dropdown/Dropdown';\nimport { SelectList } from '../shared/SelectList/SelectList';\nimport { SelectListOptions } from '../shared/SelectList/SelectListOptions/SelectListOptions';\nimport {\n SelectListOption,\n SelectListOptionProps,\n SelectListOptionPropsWithCategory,\n} from '../shared/SelectList/SelectListOptions/SelectListOption/SelectListOption';\nimport { SelectListCategory } from '../shared/SelectList/SelectListOptions/SelectListCategory/SelectListCategory';\nimport { groupOptionsByCategory } from '../shared/SelectList/selectList.utils';\nimport { debounce } from '../../../utils/debounce.utils';\nimport { IconSearch, TablerIcon } from '@tabler/icons-react';\nimport { useSelectSearchFocus } from '../shared/useSelectSearchFocus.hook';\nimport styles from './SingleSelectField.module.css';\nimport { FieldErrorMessage } from '../../../shared/FieldErrorMessage/FieldErrorMessage';\n\nexport type SingleSelectFieldProps = {\n options: (SelectListOptionProps | SelectListOptionPropsWithCategory)[];\n startIcon?: TablerIcon;\n value?: string;\n disabled?: boolean;\n placeholder?: string;\n isSearchable?: boolean;\n isClearable?: boolean;\n isLoading?: boolean;\n noOptionsMessage?: string;\n onChange: (value: string) => void;\n onSearch?: (search: string) => void;\n error?: boolean;\n errorMessage?: string;\n};\n\nexport const SingleSelectField: FC<SingleSelectFieldProps> = ({\n value = '',\n startIcon,\n options,\n disabled,\n placeholder,\n isSearchable,\n isClearable,\n isLoading,\n noOptionsMessage = 'No options available',\n onChange,\n onSearch,\n error = false,\n errorMessage,\n}) => {\n const [isOpen, setIsOpen] = useState(false);\n const [searchValue, setSearchValue] = useState<string>('');\n const [selectedLabel, setSelectedLabel] = useState<string>(value);\n\n const searchFieldRef = useRef<HTMLInputElement>(null);\n useSelectSearchFocus(isOpen, searchFieldRef);\n\n useEffect(() => {\n if (!value) {\n setSelectedLabel('');\n return;\n }\n\n const option = options.find((opt) => opt.value === value);\n if (option) {\n setSelectedLabel(option.label);\n }\n }, [value, options]);\n\n const debouncedSearch = useMemo(() => (onSearch ? debounce(onSearch) : undefined), [onSearch]);\n\n const displayOptions =\n isSearchable && !onSearch\n ? options.filter((option) => option.label.toLowerCase().includes(searchValue.toLowerCase()))\n : options;\n\n const groupedOptions = useMemo(() => groupOptionsByCategory(displayOptions), [displayOptions]);\n\n const handleChange = (newValue?: string) => {\n setSearchValue('');\n onChange(newValue ?? '');\n onSearch?.('');\n\n if (newValue === '') {\n setSelectedLabel('');\n } else {\n const option = options.find((opt) => opt.value === newValue);\n if (option) setSelectedLabel(option.label);\n }\n };\n\n const handleSearch = (newSearch: string) => {\n setSearchValue(newSearch);\n debouncedSearch?.(newSearch);\n };\n\n const hasError = error || !!errorMessage;\n\n return (\n <div className={styles.selectField}>\n <Dropdown\n open={isOpen}\n onOpenChange={setIsOpen}\n disabled={disabled}\n triggerComponent={\n <SelectButton\n startIcon={startIcon}\n aria-label=\"Select option\"\n placeholder={placeholder}\n disabled={disabled}\n valueLabel={selectedLabel}\n onClear={() => handleChange('')}\n isClearable={isClearable}\n isLoading={isLoading}\n error={hasError}\n />\n }\n >\n <SelectList>\n {isSearchable && (\n <TextField\n ref={searchFieldRef}\n startIcon={IconSearch}\n aria-label=\"Search options\"\n placeholder=\"Search…\"\n role=\"searchbox\"\n value={searchValue}\n onKeyDown={(e) => e.stopPropagation()}\n onChange={handleSearch}\n />\n )}\n <SelectListOptions disabled={isLoading}>\n {groupedOptions\n ? Object.entries(groupedOptions).map(([category, categoryOptions]) => (\n <div key={category}>\n <SelectListCategory label={category} />\n {categoryOptions.map((option) => (\n <SelectListOption\n key={option?.value ?? option.label}\n onClick={() => handleChange(option?.value)}\n isSelected={option.value === value}\n {...option}\n />\n ))}\n </div>\n ))\n : displayOptions.map((option) => (\n <SelectListOption\n key={option?.value ?? option.label}\n onClick={() => handleChange(option?.value)}\n isSelected={option.value === value}\n {...option}\n />\n ))}\n {options.length === 0 && (\n <SelectListOption disabled value=\"empty\" label={noOptionsMessage} />\n )}\n </SelectListOptions>\n </SelectList>\n </Dropdown>\n {errorMessage && <FieldErrorMessage message={errorMessage} />}\n </div>\n );\n};\n"],"names":["SingleSelectField","value","startIcon","options","disabled","placeholder","isSearchable","isClearable","isLoading","noOptionsMessage","onChange","onSearch","error","errorMessage","isOpen","setIsOpen","useState","searchValue","setSearchValue","selectedLabel","setSelectedLabel","searchFieldRef","useRef","useSelectSearchFocus","useEffect","option","opt","debouncedSearch","useMemo","debounce","displayOptions","groupedOptions","groupOptionsByCategory","handleChange","newValue","handleSearch","newSearch","hasError","jsxs","styles","jsx","Dropdown","SelectButton","SelectList","TextField","IconSearch","SelectListOptions","category","categoryOptions","SelectListCategory","SelectListOption","FieldErrorMessage"],"mappings":"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"}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { defineComponent as i } from "@embeddable.com/react";
|
|
2
2
|
import { d as s, z as r, t as d, c as m, ad as c, V as n, o as u } from "./component.constants-D59iJ42U.js";
|
|
3
|
-
import { M as p, S as g } from "./index-
|
|
3
|
+
import { M as p, S as g } from "./index-IjB-3gUH.js";
|
|
4
4
|
const f = {
|
|
5
5
|
name: "SingleSelectFieldPro",
|
|
6
6
|
label: "Single Select Field",
|