@tsed/react-formio 3.0.0-rc.23 → 3.0.0-rc.25
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/all.js +1 -2
- package/dist/all.js.map +1 -1
- package/dist/atoms/icon/Icon.js +4 -4
- package/dist/atoms/icon/Icon.js.map +1 -1
- package/dist/chunks/clsx.js +17 -0
- package/dist/chunks/clsx.js.map +1 -0
- package/dist/chunks/index.js +59969 -36
- package/dist/chunks/index.js.map +1 -1
- package/dist/contexts/FormioContext.js +1 -1
- package/dist/index.js +1 -1
- package/dist/molecules/button/Button.js +4 -4
- package/dist/molecules/button/Button.js.map +1 -1
- package/dist/molecules/card/Card.js +4 -4
- package/dist/molecules/card/Card.js.map +1 -1
- package/dist/molecules/forms/form-control/FormControl.js +1 -1
- package/dist/molecules/forms/form-control/FormControl.js.map +1 -1
- package/dist/molecules/forms/select/components/ChoicesSelect.js +53 -46
- package/dist/molecules/forms/select/components/ChoicesSelect.js.map +1 -1
- package/dist/molecules/forms/select/components/HtmlSelect.js +21 -21
- package/dist/molecules/forms/select/components/HtmlSelect.js.map +1 -1
- package/dist/molecules/forms/select/components/choices.template.d.ts +27 -2
- package/dist/molecules/forms/select/components/choices.template.js +1085 -1086
- package/dist/molecules/forms/select/components/choices.template.js.map +1 -1
- package/dist/molecules/forms/select/hooks/useOptions.d.ts +1 -1
- package/dist/molecules/forms/select/hooks/useOptions.js +15 -15
- package/dist/molecules/forms/select/hooks/useOptions.js.map +1 -1
- package/dist/molecules/loader/Loader.js +2 -5
- package/dist/molecules/loader/Loader.js.map +1 -1
- package/dist/molecules/pagination/Pagination.js +8 -8
- package/dist/molecules/pagination/Pagination.js.map +1 -1
- package/dist/molecules/pagination/PaginationButton.js +4 -4
- package/dist/molecules/pagination/PaginationButton.js.map +1 -1
- package/dist/molecules/table/Table.js +1 -1
- package/dist/molecules/table/Table.js.map +1 -1
- package/dist/molecules/table/components/DefaultCellHeader.js +1 -1
- package/dist/molecules/table/components/DefaultCellHeader.js.map +1 -1
- package/dist/molecules/table/components/DefaultOperationButton.js +1 -1
- package/dist/molecules/table/components/DefaultOperationButton.js.map +1 -1
- package/dist/molecules/table/filters/Filters.d.ts +2 -2
- package/dist/molecules/table/hooks/useUniqValues.d.ts +6 -2
- package/dist/molecules/table/hooks/useUniqValues.js.map +1 -1
- package/dist/molecules/table/utils/mapFormToColumns.js +27 -28
- package/dist/molecules/table/utils/mapFormToColumns.js.map +1 -1
- package/dist/molecules/tabs/Tab.js +1 -1
- package/dist/molecules/tabs/Tab.js.map +1 -1
- package/dist/molecules/tabs/TabPanel.js +4 -4
- package/dist/molecules/tabs/TabPanel.js.map +1 -1
- package/dist/molecules/tabs/Tabs.js +1 -1
- package/dist/molecules/tabs/Tabs.js.map +1 -1
- package/dist/organisms/form/actions/FormAction.js +1 -1
- package/dist/organisms/form/builder/FormEdit.js +1 -1
- package/dist/organisms/form/builder/FormEdit.js.map +1 -1
- package/dist/organisms/form/builder/useFormBuilder.js +1 -1
- package/dist/organisms/form/useForm.js +1 -1
- package/dist/organisms/modal/RemoveModal.js +1 -1
- package/dist/organisms/modal/RemoveModal.js.map +1 -1
- package/dist/organisms/table/actions/ActionsTable.js +1 -1
- package/dist/organisms/table/actions/ActionsTable.js.map +1 -1
- package/dist/organisms/table/forms/components/FormsCell.js +1 -1
- package/dist/organisms/table/forms/components/FormsCell.js.map +1 -1
- package/dist/utils/iconClass.js +1 -1
- package/package.json +4 -4
- package/src/atoms/icon/Icon.tsx +1 -1
- package/src/molecules/button/Button.tsx +1 -1
- package/src/molecules/card/Card.tsx +2 -2
- package/src/molecules/forms/form-control/FormControl.tsx +2 -2
- package/src/molecules/forms/select/components/ChoicesSelect.stories.tsx +134 -2
- package/src/molecules/forms/select/components/ChoicesSelect.tsx +11 -4
- package/src/molecules/forms/select/components/HtmlSelect.tsx +7 -7
- package/src/molecules/forms/select/components/choices.template.tsx +51 -29
- package/src/molecules/forms/select/hooks/useOptions.ts +1 -5
- package/src/molecules/loader/Loader.tsx +3 -7
- package/src/molecules/pagination/Pagination.tsx +5 -5
- package/src/molecules/pagination/PaginationButton.tsx +2 -2
- package/src/molecules/table/Table.tsx +2 -2
- package/src/molecules/table/components/DefaultCellHeader.tsx +3 -3
- package/src/molecules/table/components/DefaultOperationButton.tsx +1 -1
- package/src/molecules/table/filters/Filters.ts +2 -2
- package/src/molecules/table/hooks/useUniqValues.tsx +7 -3
- package/src/molecules/table/utils/mapFormToColumns.tsx +4 -4
- package/src/molecules/tabs/Tab.tsx +3 -3
- package/src/molecules/tabs/TabPanel.tsx +2 -2
- package/src/molecules/tabs/Tabs.tsx +2 -2
- package/src/organisms/form/builder/FormEdit.tsx +2 -2
- package/src/organisms/modal/RemoveModal.tsx +3 -3
- package/src/organisms/table/actions/ActionsTable.tsx +2 -2
- package/src/organisms/table/forms/components/FormsCell.tsx +1 -1
- package/dist/chunks/index2.js +0 -59979
- package/dist/chunks/index2.js.map +0 -1
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { jsx as f } from "react/jsx-runtime";
|
|
2
|
-
import { c as r } from "../chunks/
|
|
2
|
+
import { c as r } from "../chunks/index.js";
|
|
3
3
|
import { createContext as g, useState as c, useEffect as U } from "react";
|
|
4
4
|
const m = ({ baseUrl: t, projectUrl: o, Formio: e }) => e ? (t && e.setBaseUrl(t), o && e.setProjectUrl(o), {
|
|
5
5
|
Formio: e,
|
package/dist/index.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { c as s } from "./chunks/
|
|
1
|
+
import { c as s } from "./chunks/index.js";
|
|
2
2
|
const t = s.Builders, e = s.Components, r = s.DefaultEvaluator, n = s.Displays, i = s.EventEmitter, c = s.Form, l = s.FormBuilder, m = s.Formio, u = s.Licenses, d = s.Providers, a = s.Templates, p = s.Utils, E = s.Webform, v = s.Widgets, F = s.registerModule, f = s.useModule;
|
|
3
3
|
export {
|
|
4
4
|
t as Builders,
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { jsx as d } from "react/jsx-runtime";
|
|
2
|
-
import { c as s } from "../../chunks/
|
|
2
|
+
import { c as s } from "../../chunks/clsx.js";
|
|
3
3
|
import { forwardRef as u } from "react";
|
|
4
4
|
import { registerComponent as c } from "../../registries/components.js";
|
|
5
5
|
const k = [
|
|
@@ -21,11 +21,11 @@ const k = [
|
|
|
21
21
|
"outline-light",
|
|
22
22
|
"outline-dark",
|
|
23
23
|
"outline-link"
|
|
24
|
-
], i = u(({ tag: t = "button", variant: e, className: o, children:
|
|
24
|
+
], i = u(({ tag: t = "button", variant: e, className: o, children: l, ...n }, a) => /* @__PURE__ */ d(
|
|
25
25
|
t,
|
|
26
26
|
{
|
|
27
27
|
...n,
|
|
28
|
-
ref:
|
|
28
|
+
ref: a,
|
|
29
29
|
className: s(
|
|
30
30
|
"btn flex gap-1",
|
|
31
31
|
{
|
|
@@ -36,7 +36,7 @@ const k = [
|
|
|
36
36
|
),
|
|
37
37
|
disabled: n.disabled,
|
|
38
38
|
onClick: (r) => !n.disabled && n.onClick?.(r),
|
|
39
|
-
children:
|
|
39
|
+
children: l
|
|
40
40
|
}
|
|
41
41
|
));
|
|
42
42
|
i.displayName = "Button";
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Button.js","sources":["../../../src/molecules/button/Button.tsx"],"sourcesContent":["import cx from \"
|
|
1
|
+
{"version":3,"file":"Button.js","sources":["../../../src/molecules/button/Button.tsx"],"sourcesContent":["import cx from \"clsx\";\nimport { type ButtonHTMLAttributes, forwardRef, type PropsWithChildren } from \"react\";\n\nimport { registerComponent } from \"../../registries/components\";\n\nexport const BUTTON_VARIANTS = [\n \"primary\",\n \"secondary\",\n \"success\",\n \"danger\",\n \"warning\",\n \"info\",\n \"light\",\n \"dark\",\n \"link\",\n \"outline-primary\",\n \"outline-secondary\",\n \"outline-success\",\n \"outline-danger\",\n \"outline-warning\",\n \"outline-info\",\n \"outline-light\",\n \"outline-dark\",\n \"outline-link\"\n];\n\ninterface BaseButtonProps<T extends HTMLElement> extends ButtonHTMLAttributes<T> {\n tag?: \"button\" | \"a\" | \"input\" | \"div\";\n variant?: (typeof BUTTON_VARIANTS)[keyof typeof BUTTON_VARIANTS] | string;\n}\n\ninterface HTMLAnchorProps extends BaseButtonProps<HTMLAnchorElement> {\n tag: \"a\";\n}\n\ninterface HTMLButtonProps extends BaseButtonProps<HTMLButtonElement> {\n tag?: \"button\";\n}\n\ninterface HTMLInputProps extends BaseButtonProps<HTMLInputElement> {\n tag: \"input\";\n}\n\ninterface HTMLDivProps extends BaseButtonProps<HTMLDivElement> {\n tag: \"div\";\n}\n\nexport type ButtonProps = HTMLAnchorProps | HTMLButtonProps | HTMLInputProps | HTMLDivProps;\n\nexport const Button = forwardRef(({ tag: Tag = \"button\", variant, className, children, ...props }: PropsWithChildren<ButtonProps>, ref) => {\n return (\n <Tag\n {...(props as any)}\n ref={ref as any}\n className={cx(\n \"btn flex gap-1\",\n {\n disabled: props.disabled\n },\n `btn-${variant}`,\n className\n )}\n disabled={props.disabled}\n onClick={(evt) => !props.disabled && props.onClick?.(evt as any)}\n >\n {children}\n </Tag>\n );\n});\n\nButton.displayName = \"Button\";\n\nregisterComponent(\"Button\", Button);\n"],"names":["BUTTON_VARIANTS","Button","forwardRef","Tag","variant","className","children","props","ref","jsx","cx","evt","registerComponent"],"mappings":";;;;AAKO,MAAMA,IAAkB;AAAA,EAC7B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAyBaC,IAASC,EAAW,CAAC,EAAE,KAAKC,IAAM,UAAU,SAAAC,GAAS,WAAAC,GAAW,UAAAC,GAAU,GAAGC,EAAA,GAAyCC,MAE/H,gBAAAC;AAAA,EAACN;AAAA,EAAA;AAAA,IACE,GAAII;AAAA,IACL,KAAAC;AAAA,IACA,WAAWE;AAAAA,MACT;AAAA,MACA;AAAA,QACE,UAAUH,EAAM;AAAA,MAAA;AAAA,MAElB,OAAOH,CAAO;AAAA,MACdC;AAAA,IAAA;AAAA,IAEF,UAAUE,EAAM;AAAA,IAChB,SAAS,CAACI,MAAQ,CAACJ,EAAM,YAAYA,EAAM,UAAUI,CAAU;AAAA,IAE9D,UAAAL;AAAA,EAAA;AAAA,CAGN;AAEDL,EAAO,cAAc;AAErBW,EAAkB,UAAUX,CAAM;"}
|
|
@@ -1,13 +1,13 @@
|
|
|
1
1
|
import { jsxs as d, jsx as r } from "react/jsx-runtime";
|
|
2
|
-
import { c as
|
|
3
|
-
import { registerComponent as
|
|
2
|
+
import { c as s } from "../../chunks/clsx.js";
|
|
3
|
+
import { registerComponent as i } from "../../registries/components.js";
|
|
4
4
|
function o({ children: a, label: e, className: c }) {
|
|
5
|
-
return /* @__PURE__ */ d("div", { className:
|
|
5
|
+
return /* @__PURE__ */ d("div", { className: s("card", c), children: [
|
|
6
6
|
/* @__PURE__ */ r("div", { className: "card-header ", children: /* @__PURE__ */ r("h4", { className: "card-title", children: e }) }),
|
|
7
7
|
/* @__PURE__ */ r("div", { className: "card-body", role: "article", children: a })
|
|
8
8
|
] });
|
|
9
9
|
}
|
|
10
|
-
|
|
10
|
+
i("Card", o);
|
|
11
11
|
export {
|
|
12
12
|
o as Card
|
|
13
13
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Card.js","sources":["../../../src/molecules/card/Card.tsx"],"sourcesContent":["import
|
|
1
|
+
{"version":3,"file":"Card.js","sources":["../../../src/molecules/card/Card.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport { PropsWithChildren } from \"react\";\n\nimport { registerComponent } from \"../../registries/components.js\";\n\nexport interface CardProps {\n label: string;\n className?: string;\n}\n\nexport function Card({ children, label, className }: PropsWithChildren<CardProps>) {\n return (\n <div className={clsx(\"card\", className)}>\n <div className={\"card-header \"}>\n <h4 className={\"card-title\"}>{label}</h4>\n </div>\n <div className={\"card-body\"} role={\"article\"}>\n {children}\n </div>\n </div>\n );\n}\n\nregisterComponent(\"Card\", Card);\n"],"names":["Card","children","label","className","clsx","jsx","registerComponent"],"mappings":";;;AAUO,SAASA,EAAK,EAAE,UAAAC,GAAU,OAAAC,GAAO,WAAAC,KAA2C;AACjF,2BACG,OAAA,EAAI,WAAWC,EAAK,QAAQD,CAAS,GACpC,UAAA;AAAA,IAAA,gBAAAE,EAAC,OAAA,EAAI,WAAW,gBACd,UAAA,gBAAAA,EAAC,QAAG,WAAW,cAAe,aAAM,EAAA,CACtC;AAAA,sBACC,OAAA,EAAI,WAAW,aAAa,MAAM,WAChC,UAAAJ,EAAA,CACH;AAAA,EAAA,GACF;AAEJ;AAEAK,EAAkB,QAAQN,CAAI;"}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { jsxs as m, jsx as o } from "react/jsx-runtime";
|
|
2
|
-
import { c } from "../../../chunks/
|
|
2
|
+
import { c } from "../../../chunks/clsx.js";
|
|
3
3
|
import { g as u } from "../../../chunks/_commonjsHelpers.js";
|
|
4
4
|
import { r as f } from "../../../chunks/omit.js";
|
|
5
5
|
import { registerComponent as x } from "../../../registries/components.js";
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FormControl.js","sources":["../../../../src/molecules/forms/form-control/FormControl.tsx"],"sourcesContent":["import
|
|
1
|
+
{"version":3,"file":"FormControl.js","sources":["../../../../src/molecules/forms/form-control/FormControl.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport omit from \"lodash/omit\";\nimport { HTMLAttributes, InputHTMLAttributes, PropsWithChildren, ReactNode } from \"react\";\n\nimport { registerComponent } from \"../../../registries/components\";\n\nexport type BaseFormControlProps<Value = unknown> = {\n label?: string;\n description?: string | ReactNode;\n before?: ReactNode | string;\n after?: ReactNode | string;\n shadow?: boolean;\n value?: Value;\n onChange?: (name: string | undefined, value: Value) => void;\n /**\n * The input size\n */\n size?: \"small\" | string;\n};\nexport type FormControlProps<\n Value = unknown,\n Attributes extends HTMLAttributes<HTMLElement> = InputHTMLAttributes<HTMLInputElement>\n> = BaseFormControlProps<Value> & Omit<Attributes, \"onChange\" | \"value\" | \"size\">;\n\nexport function cleanFormControlProps(props: FormControlProps, omitted: string[] = []): any {\n return omit(props, [\"label\", \"description\", \"prefix\", \"suffix\", \"size\", \"shadow\", ...omitted]);\n}\n\nexport function FormControl<Value = unknown>({\n children,\n name = \"\",\n id = name,\n required,\n before,\n after,\n description,\n label,\n size,\n className\n}: PropsWithChildren<FormControlProps<Value>>) {\n return (\n <div\n data-testid={name && `form-group-${name}`}\n id={`form-group-${name || \"\"}`}\n className={clsx(\n \"form-group\",\n {\n \"-with-before\": !!before,\n \"-with-after\": !!after\n },\n size && `-size-${size}`,\n className\n )}\n >\n {label && (\n <label htmlFor={id} data-testid='form-control-label' className={`col-form-label ${required ? \" field-required\" : \"\"}`}>\n {label}\n </label>\n )}\n <div className={\"input-group\"}>\n {before && (\n <div className='input-group-prepend'>\n <span className='input-group-text' data-testid='form-control-prefix'>\n {before}\n </span>\n </div>\n )}\n {children}\n {after && (\n <div className='input-group-append'>\n <span className='input-group-text' data-testid='form-control-suffix'>\n {after}\n </span>\n </div>\n )}\n </div>\n {description && (\n <div data-testid='form-control-description' className='form-text text-muted'>\n {description}\n </div>\n )}\n </div>\n );\n}\n\nregisterComponent(\"FormControl\", FormControl);\n"],"names":["cleanFormControlProps","props","omitted","omit","FormControl","children","name","id","required","before","after","description","label","size","className","jsxs","clsx","jsx","registerComponent"],"mappings":";;;;;;;AAwBO,SAASA,EAAsBC,GAAyBC,IAAoB,IAAS;AAC1F,SAAOC,EAAKF,GAAO,CAAC,SAAS,eAAe,UAAU,UAAU,QAAQ,UAAU,GAAGC,CAAO,CAAC;AAC/F;AAEO,SAASE,EAA6B;AAAA,EAC3C,UAAAC;AAAA,EACA,MAAAC,IAAO;AAAA,EACP,IAAAC,IAAKD;AAAA,EACL,UAAAE;AAAA,EACA,QAAAC;AAAA,EACA,OAAAC;AAAA,EACA,aAAAC;AAAA,EACA,OAAAC;AAAA,EACA,MAAAC;AAAA,EACA,WAAAC;AACF,GAA+C;AAC7C,SACE,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,eAAaT,KAAQ,cAAcA,CAAI;AAAA,MACvC,IAAI,cAAcA,KAAQ,EAAE;AAAA,MAC5B,WAAWU;AAAA,QACT;AAAA,QACA;AAAA,UACE,gBAAgB,CAAC,CAACP;AAAA,UAClB,eAAe,CAAC,CAACC;AAAA,QAAA;AAAA,QAEnBG,KAAQ,SAASA,CAAI;AAAA,QACrBC;AAAA,MAAA;AAAA,MAGD,UAAA;AAAA,QAAAF,KACC,gBAAAK,EAAC,SAAA,EAAM,SAASV,GAAI,eAAY,sBAAqB,WAAW,kBAAkBC,IAAW,oBAAoB,EAAE,IAChH,UAAAI,GACH;AAAA,QAEF,gBAAAG,EAAC,OAAA,EAAI,WAAW,eACb,UAAA;AAAA,UAAAN,KACC,gBAAAQ,EAAC,OAAA,EAAI,WAAU,uBACb,UAAA,gBAAAA,EAAC,QAAA,EAAK,WAAU,oBAAmB,eAAY,uBAC5C,UAAAR,EAAA,CACH,GACF;AAAA,UAEDJ;AAAA,UACAK,KACC,gBAAAO,EAAC,OAAA,EAAI,WAAU,sBACb,UAAA,gBAAAA,EAAC,QAAA,EAAK,WAAU,oBAAmB,eAAY,uBAC5C,UAAAP,EAAA,CACH,EAAA,CACF;AAAA,QAAA,GAEJ;AAAA,QACCC,KACC,gBAAAM,EAAC,OAAA,EAAI,eAAY,4BAA2B,WAAU,wBACnD,UAAAN,EAAA,CACH;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAIR;AAEAO,EAAkB,eAAed,CAAW;"}
|
|
@@ -1,12 +1,12 @@
|
|
|
1
|
-
import { jsx as
|
|
1
|
+
import { jsx as x } from "react/jsx-runtime";
|
|
2
2
|
import { C as w } from "../../../../chunks/choices.js";
|
|
3
|
-
import { c as
|
|
4
|
-
import { useRef as
|
|
5
|
-
import { c as
|
|
6
|
-
import { registerComponent as
|
|
7
|
-
import { cleanFormControlProps as
|
|
8
|
-
import { callbackOnCreateTemplates as
|
|
9
|
-
function
|
|
3
|
+
import { c as O } from "../../../../chunks/clsx.js";
|
|
4
|
+
import { useRef as S, useMemo as z, useEffect as p } from "react";
|
|
5
|
+
import { c as M } from "../../../../chunks/index.module.js";
|
|
6
|
+
import { registerComponent as $ } from "../../../../registries/components.js";
|
|
7
|
+
import { cleanFormControlProps as g } from "../../form-control/FormControl.js";
|
|
8
|
+
import { callbackOnCreateTemplates as j } from "./choices.template.js";
|
|
9
|
+
function B({
|
|
10
10
|
name: r,
|
|
11
11
|
disabled: i,
|
|
12
12
|
multiple: c,
|
|
@@ -14,80 +14,87 @@ function H({
|
|
|
14
14
|
placeholder: l,
|
|
15
15
|
searchEnabled: d = !0,
|
|
16
16
|
customProperties: v = {},
|
|
17
|
-
size:
|
|
17
|
+
size: E,
|
|
18
18
|
value: a,
|
|
19
|
-
required:
|
|
20
|
-
onChange:
|
|
19
|
+
required: C,
|
|
20
|
+
onChange: b
|
|
21
21
|
}) {
|
|
22
|
-
const
|
|
23
|
-
const
|
|
22
|
+
const h = S(), t = S(), m = z(() => {
|
|
23
|
+
const n = (e) => [].concat(a).includes(e), s = f.map((e) => (e.options && (e = {
|
|
24
24
|
...e,
|
|
25
|
-
choices: e.options.map((
|
|
26
|
-
...
|
|
27
|
-
selected: o
|
|
25
|
+
choices: e.options.map((o) => ({
|
|
26
|
+
...o,
|
|
27
|
+
selected: n(o.value)
|
|
28
28
|
}))
|
|
29
29
|
}), {
|
|
30
30
|
...e,
|
|
31
|
-
selected:
|
|
31
|
+
selected: n(e.value)
|
|
32
32
|
}));
|
|
33
33
|
return !c && l ? [
|
|
34
34
|
{
|
|
35
|
-
disabled:
|
|
35
|
+
disabled: C,
|
|
36
36
|
label: l,
|
|
37
37
|
value: ""
|
|
38
38
|
},
|
|
39
|
-
...
|
|
40
|
-
] :
|
|
41
|
-
}, [f, a,
|
|
42
|
-
|
|
39
|
+
...s
|
|
40
|
+
] : s;
|
|
41
|
+
}, [f, a, C, c, l]), u = M((n, s) => {
|
|
42
|
+
b?.(n, s);
|
|
43
43
|
}, 50);
|
|
44
|
-
return
|
|
44
|
+
return p(() => {
|
|
45
45
|
t.current && (c && t.current.clearStore(), t.current.setChoices(m, "value", "label", !0));
|
|
46
|
-
}, [m]),
|
|
46
|
+
}, [m]), p(() => {
|
|
47
47
|
if (!t.current) {
|
|
48
|
-
const {
|
|
49
|
-
|
|
48
|
+
const {
|
|
49
|
+
allowHTML: e = !0,
|
|
50
|
+
silent: o = !0,
|
|
51
|
+
removeItemButton: I = !0,
|
|
52
|
+
shouldSort: T = !1,
|
|
53
|
+
itemSelectText: L = "",
|
|
54
|
+
callbackOnCreateTemplates: k
|
|
55
|
+
} = v;
|
|
56
|
+
t.current = new w(h.current, {
|
|
50
57
|
...v,
|
|
51
58
|
allowHTML: e,
|
|
52
|
-
silent:
|
|
59
|
+
silent: o,
|
|
53
60
|
searchEnabled: d,
|
|
54
|
-
removeItemButton:
|
|
61
|
+
removeItemButton: I,
|
|
55
62
|
choices: m,
|
|
56
63
|
placeholder: l,
|
|
57
64
|
placeholderValue: "",
|
|
58
|
-
itemSelectText:
|
|
59
|
-
shouldSort:
|
|
60
|
-
callbackOnCreateTemplates:
|
|
65
|
+
itemSelectText: L,
|
|
66
|
+
shouldSort: T,
|
|
67
|
+
callbackOnCreateTemplates: k || j
|
|
61
68
|
});
|
|
62
69
|
}
|
|
63
70
|
i ? t.current?.disable() : t.current?.enable();
|
|
64
|
-
const
|
|
71
|
+
const n = ({ detail: { value: e } }) => {
|
|
65
72
|
u(r, c ? [.../* @__PURE__ */ new Set([...new Set(a), e])] : e);
|
|
66
|
-
},
|
|
73
|
+
}, s = ({ detail: { value: e } }) => {
|
|
67
74
|
c ? u(
|
|
68
75
|
r,
|
|
69
|
-
a.filter((
|
|
76
|
+
a.filter((o) => o !== e)
|
|
70
77
|
) : u(r, void 0);
|
|
71
78
|
};
|
|
72
|
-
return t.current?.passedElement.element.addEventListener("addItem",
|
|
73
|
-
t.current?.passedElement.element.removeEventListener("addItem",
|
|
79
|
+
return t.current?.passedElement.element.addEventListener("addItem", n), t.current?.passedElement.element.addEventListener("removeItem", s), () => {
|
|
80
|
+
t.current?.passedElement.element.removeEventListener("addItem", n), t.current?.passedElement.element.removeEventListener("removeItem", s);
|
|
74
81
|
};
|
|
75
|
-
}, [i,
|
|
76
|
-
ref:
|
|
82
|
+
}, [i, b, m, l, d, E, a]), {
|
|
83
|
+
ref: h,
|
|
77
84
|
choicesRef: t
|
|
78
85
|
};
|
|
79
86
|
}
|
|
80
|
-
function
|
|
81
|
-
const { ref: i } =
|
|
87
|
+
function H(r) {
|
|
88
|
+
const { ref: i } = B({
|
|
82
89
|
...r,
|
|
83
90
|
searchEnabled: !r.disableSearch
|
|
84
91
|
});
|
|
85
|
-
return /* @__PURE__ */
|
|
92
|
+
return /* @__PURE__ */ x(
|
|
86
93
|
"select",
|
|
87
94
|
{
|
|
88
95
|
ref: i,
|
|
89
96
|
"data-testid": `select_${r.name}`,
|
|
90
|
-
...
|
|
97
|
+
...g(r, [
|
|
91
98
|
"className",
|
|
92
99
|
"size",
|
|
93
100
|
"value",
|
|
@@ -101,13 +108,13 @@ function N(r) {
|
|
|
101
108
|
"itemSelectText",
|
|
102
109
|
"customProperties"
|
|
103
110
|
]),
|
|
104
|
-
className:
|
|
111
|
+
className: O("form-control", r.size && `form-control-${r.size}`)
|
|
105
112
|
}
|
|
106
113
|
);
|
|
107
114
|
}
|
|
108
|
-
|
|
115
|
+
$("Select.choicesjs", H);
|
|
109
116
|
export {
|
|
110
|
-
|
|
111
|
-
|
|
117
|
+
H as ChoiceSelect,
|
|
118
|
+
B as useChoices
|
|
112
119
|
};
|
|
113
120
|
//# sourceMappingURL=ChoicesSelect.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ChoicesSelect.js","sources":["../../../../../src/molecules/forms/select/components/ChoicesSelect.tsx"],"sourcesContent":["import Choices from \"choices.js\";\nimport cx from \"
|
|
1
|
+
{"version":3,"file":"ChoicesSelect.js","sources":["../../../../../src/molecules/forms/select/components/ChoicesSelect.tsx"],"sourcesContent":["import Choices from \"choices.js\";\nimport cx from \"clsx\";\nimport { useEffect, useMemo, useRef } from \"react\";\nimport { useDebouncedCallback } from \"use-debounce\";\n\nimport { registerComponent } from \"../../../../registries/components\";\nimport { cleanFormControlProps } from \"../../form-control/FormControl\";\nimport type { AllSelectProps } from \"../Select.interface\";\nimport { callbackOnCreateTemplates as defaultTemplateCallback } from \"./choices.template\";\n\nexport function useChoices({\n name,\n disabled,\n multiple,\n options,\n placeholder,\n searchEnabled = true,\n customProperties = {},\n size,\n value,\n required,\n onChange\n}: AllSelectProps) {\n const ref = useRef<any>();\n const choicesRef = useRef<Choices>();\n\n const opts = useMemo(() => {\n const isSelected = (itemValue: any) => [].concat(value as any).includes(itemValue as never);\n\n const opts = options.map((item) => {\n if (item.options) {\n item = {\n ...item,\n choices: item.options.map((item: any) => ({\n ...item,\n selected: isSelected(item.value)\n }))\n };\n }\n\n return {\n ...item,\n selected: isSelected(item.value)\n };\n });\n\n if (!multiple && placeholder) {\n return [\n {\n disabled: required,\n label: placeholder,\n value: \"\"\n },\n ...opts\n ];\n }\n\n return opts;\n }, [options, value, required, multiple, placeholder]);\n\n const onChangeCallback = useDebouncedCallback((name: string | undefined, value: any) => {\n onChange?.(name, value);\n }, 50);\n\n useEffect(() => {\n if (choicesRef.current) {\n if (multiple) {\n choicesRef.current.clearStore();\n choicesRef.current.setChoices(opts as any, \"value\", \"label\", true);\n } else {\n choicesRef.current.setChoices(opts as any, \"value\", \"label\", true);\n }\n }\n }, [opts]);\n\n useEffect(() => {\n if (!choicesRef.current) {\n const {\n allowHTML = true,\n silent = true,\n removeItemButton = true,\n shouldSort = false,\n itemSelectText = \"\",\n callbackOnCreateTemplates\n } = customProperties;\n choicesRef.current = new Choices(ref.current, {\n ...customProperties,\n allowHTML,\n silent,\n searchEnabled,\n removeItemButton,\n choices: opts,\n placeholder: placeholder as string,\n placeholderValue: \"\" as string,\n itemSelectText,\n shouldSort,\n callbackOnCreateTemplates: callbackOnCreateTemplates || defaultTemplateCallback\n } as any);\n }\n\n if (disabled) {\n choicesRef.current?.disable();\n } else {\n choicesRef.current?.enable();\n }\n\n const addItem = ({ detail: { value: newValue } }: any) => {\n onChangeCallback(name, multiple ? [...new Set([...new Set(value as string[]), newValue])] : newValue);\n };\n\n const removeItem = ({ detail: { value: newValue } }: any) => {\n if (multiple) {\n onChangeCallback(\n name,\n (value as string[]).filter((v) => v !== newValue)\n );\n } else {\n onChangeCallback(name, undefined as any);\n }\n };\n\n choicesRef.current?.passedElement.element.addEventListener(\"addItem\", addItem);\n choicesRef.current?.passedElement.element.addEventListener(\"removeItem\", removeItem);\n\n return () => {\n choicesRef.current?.passedElement.element.removeEventListener(\"addItem\", addItem);\n choicesRef.current?.passedElement.element.removeEventListener(\"removeItem\", removeItem);\n };\n }, [disabled, onChange, opts, placeholder, searchEnabled, size, value]);\n\n return {\n ref,\n choicesRef\n };\n}\n\nexport function ChoiceSelect(props: AllSelectProps) {\n const { ref } = useChoices({\n ...props,\n searchEnabled: !props.disableSearch\n });\n\n return (\n <select\n ref={ref}\n data-testid={`select_${props.name}`}\n {...cleanFormControlProps(props as any, [\n \"className\",\n \"size\",\n \"value\",\n \"options\",\n \"placeholder\",\n \"onChange\",\n \"allowHTML\",\n \"silent\",\n \"removeItemButton\",\n \"shouldSort\",\n \"itemSelectText\",\n \"customProperties\"\n ])}\n className={cx(\"form-control\", props.size && `form-control-${props.size}`)}\n />\n );\n}\n\nregisterComponent(\"Select.choicesjs\", ChoiceSelect);\n"],"names":["useChoices","name","disabled","multiple","options","placeholder","searchEnabled","customProperties","size","value","required","onChange","ref","useRef","choicesRef","opts","useMemo","isSelected","itemValue","item","onChangeCallback","useDebouncedCallback","useEffect","allowHTML","silent","removeItemButton","shouldSort","itemSelectText","callbackOnCreateTemplates","Choices","defaultTemplateCallback","addItem","newValue","removeItem","v","ChoiceSelect","props","jsx","cleanFormControlProps","cx","registerComponent"],"mappings":"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"}
|
|
@@ -1,35 +1,35 @@
|
|
|
1
|
-
import { jsxs as g, jsx as
|
|
2
|
-
import { c as
|
|
1
|
+
import { jsxs as g, jsx as e } from "react/jsx-runtime";
|
|
2
|
+
import { c as x } from "../../../../chunks/clsx.js";
|
|
3
3
|
import { registerComponent as v } from "../../../../registries/components.js";
|
|
4
|
-
import { getEventValue as
|
|
5
|
-
import { cleanFormControlProps as
|
|
6
|
-
function
|
|
7
|
-
return /* @__PURE__ */
|
|
4
|
+
import { getEventValue as j } from "../../../../utils/getEventValue.js";
|
|
5
|
+
import { cleanFormControlProps as C } from "../../form-control/FormControl.js";
|
|
6
|
+
function i({ value: o, label: r, ...n }) {
|
|
7
|
+
return /* @__PURE__ */ e("option", { ...n, value: o, children: r });
|
|
8
8
|
}
|
|
9
|
-
function
|
|
10
|
-
const f = !!
|
|
9
|
+
function S({ name: o, id: r = o, size: n, value: u, multiple: l, onChange: m, options: p, placeholder: s, ...a }) {
|
|
10
|
+
const f = !!p[0].options;
|
|
11
11
|
return /* @__PURE__ */ g(
|
|
12
12
|
"select",
|
|
13
13
|
{
|
|
14
|
-
"data-testid": `select_${
|
|
15
|
-
...
|
|
16
|
-
className:
|
|
17
|
-
name:
|
|
18
|
-
id:
|
|
19
|
-
multiple:
|
|
20
|
-
value:
|
|
21
|
-
onChange: (
|
|
22
|
-
m && m(
|
|
14
|
+
"data-testid": `select_${o}`,
|
|
15
|
+
...C(a),
|
|
16
|
+
className: x("form-control", n && `form-control-${n}`),
|
|
17
|
+
name: o,
|
|
18
|
+
id: r,
|
|
19
|
+
multiple: l,
|
|
20
|
+
value: u || "",
|
|
21
|
+
onChange: (t) => {
|
|
22
|
+
m && m(o, j(t));
|
|
23
23
|
},
|
|
24
24
|
children: [
|
|
25
|
-
|
|
26
|
-
f ?
|
|
25
|
+
s && !l && /* @__PURE__ */ e("option", { value: "", disabled: !0, children: s }),
|
|
26
|
+
f ? p.map(({ label: t, options: c }, $) => /* @__PURE__ */ e("optgroup", { label: t, children: c.map((h, d) => /* @__PURE__ */ e(i, { ...h }, `${r}-optgroup-${d}`)) }, r + "-" + $)) : p.map((t, c) => /* @__PURE__ */ e(i, { ...t }, `${r}-option-${c}`))
|
|
27
27
|
]
|
|
28
28
|
}
|
|
29
29
|
);
|
|
30
30
|
}
|
|
31
|
-
v("Select.html5",
|
|
31
|
+
v("Select.html5", S);
|
|
32
32
|
export {
|
|
33
|
-
|
|
33
|
+
S as HTMLSelect
|
|
34
34
|
};
|
|
35
35
|
//# sourceMappingURL=HtmlSelect.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"HtmlSelect.js","sources":["../../../../../src/molecules/forms/select/components/HtmlSelect.tsx"],"sourcesContent":["import cx from \"
|
|
1
|
+
{"version":3,"file":"HtmlSelect.js","sources":["../../../../../src/molecules/forms/select/components/HtmlSelect.tsx"],"sourcesContent":["import cx from \"clsx\";\n\nimport { registerComponent } from \"../../../../registries/components\";\nimport { getEventValue } from \"../../../../utils/getEventValue\";\nimport { cleanFormControlProps } from \"../../form-control/FormControl\";\nimport { AllSelectProps, SelectOptionBaseProps } from \"../Select.interface\";\n\nfunction Option({ value, label, ...props }: SelectOptionBaseProps) {\n return (\n <option {...props} value={value as any}>\n {label}\n </option>\n );\n}\n\nexport function HTMLSelect({ name, id = name, size, value, multiple, onChange, options, placeholder, ...props }: AllSelectProps) {\n const hasGroup = !!options[0].options;\n\n return (\n <select\n data-testid={`select_${name}`}\n {...cleanFormControlProps(props as any)}\n className={cx(\"form-control\", size && `form-control-${size}`)}\n name={name}\n id={id}\n multiple={multiple}\n value={value || (\"\" as any)}\n onChange={(event) => {\n onChange && onChange(name, getEventValue(event));\n }}\n >\n {placeholder && !multiple && (\n <option value='' disabled>\n {placeholder}\n </option>\n )}\n {hasGroup\n ? options.map(({ label, options }, index) => {\n return (\n <optgroup key={id + \"-\" + index} label={label}>\n {options.map((props: SelectOptionBaseProps, index: number) => {\n return <Option key={`${id}-optgroup-${index}`} {...props} />;\n })}\n </optgroup>\n );\n })\n : (options as SelectOptionBaseProps[]).map((props, index) => {\n return <Option key={`${id}-option-${index}`} {...props} />;\n })}\n </select>\n );\n}\n\nregisterComponent(\"Select.html5\", HTMLSelect);\n"],"names":["Option","value","label","props","jsx","HTMLSelect","name","id","size","multiple","onChange","options","placeholder","hasGroup","jsxs","cleanFormControlProps","cx","event","getEventValue","index","registerComponent"],"mappings":";;;;;AAOA,SAASA,EAAO,EAAE,OAAAC,GAAO,OAAAC,GAAO,GAAGC,KAAgC;AACjE,SACE,gBAAAC,EAAC,UAAA,EAAQ,GAAGD,GAAO,OAAAF,GAChB,UAAAC,GACH;AAEJ;AAEO,SAASG,EAAW,EAAE,MAAAC,GAAM,IAAAC,IAAKD,GAAM,MAAAE,GAAM,OAAAP,GAAO,UAAAQ,GAAU,UAAAC,GAAU,SAAAC,GAAS,aAAAC,GAAa,GAAGT,KAAyB;AAC/H,QAAMU,IAAW,CAAC,CAACF,EAAQ,CAAC,EAAE;AAE9B,SACE,gBAAAG;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,eAAa,UAAUR,CAAI;AAAA,MAC1B,GAAGS,EAAsBZ,CAAY;AAAA,MACtC,WAAWa,EAAG,gBAAgBR,KAAQ,gBAAgBA,CAAI,EAAE;AAAA,MAC5D,MAAAF;AAAA,MACA,IAAAC;AAAA,MACA,UAAAE;AAAA,MACA,OAAOR,KAAU;AAAA,MACjB,UAAU,CAACgB,MAAU;AACnB,QAAAP,KAAYA,EAASJ,GAAMY,EAAcD,CAAK,CAAC;AAAA,MACjD;AAAA,MAEC,UAAA;AAAA,QAAAL,KAAe,CAACH,KACf,gBAAAL,EAAC,UAAA,EAAO,OAAM,IAAG,UAAQ,IACtB,UAAAQ,EAAA,CACH;AAAA,QAEDC,IACGF,EAAQ,IAAI,CAAC,EAAE,OAAAT,GAAO,SAAAS,EAAAA,GAAWQ,MAE7B,gBAAAf,EAAC,cAAgC,OAAAF,GAC9B,UAAAS,EAAQ,IAAI,CAACR,GAA8BgB,MACnC,gBAAAf,EAACJ,KAAwC,GAAGG,EAAAA,GAA/B,GAAGI,CAAE,aAAaY,CAAK,EAAe,CAC3D,EAAA,GAHYZ,IAAK,MAAMY,CAI1B,CAEH,IACAR,EAAoC,IAAI,CAACR,GAAOgB,MACxC,gBAAAf,EAACJ,KAAsC,GAAGG,EAAAA,GAA7B,GAAGI,CAAE,WAAWY,CAAK,EAAe,CACzD;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGX;AAEAC,EAAkB,gBAAgBf,CAAU;"}
|
|
@@ -1,7 +1,32 @@
|
|
|
1
|
+
type StrToEl = (template: string) => HTMLElement;
|
|
2
|
+
type EscapeForTemplate = (allowHTML: boolean, value: unknown) => string;
|
|
3
|
+
type GetClassNames = (className: string | string[]) => string[];
|
|
4
|
+
/**
|
|
5
|
+
* Choices.js v11 template callback.
|
|
6
|
+
*
|
|
7
|
+
* Why this file exists:
|
|
8
|
+
* - We need to keep Choices expected DOM/data attributes (`data-choice`, `data-id`,
|
|
9
|
+
* `data-value`, `data-choice-selectable`, etc.) so keyboard/mouse interactions keep working.
|
|
10
|
+
* - We optionally support a React custom option renderer via `customProperties.template`.
|
|
11
|
+
*
|
|
12
|
+
* Notes:
|
|
13
|
+
* - The callback signature changed in Choices v11 and now receives:
|
|
14
|
+
* `strToEl`, `escapeForTemplate`, `getClassNames`.
|
|
15
|
+
* - `this` is the current Choices instance, so we can read `this.config`.
|
|
16
|
+
*/
|
|
1
17
|
export declare function callbackOnCreateTemplates(this: {
|
|
2
18
|
config: {
|
|
3
19
|
itemSelectText: string;
|
|
20
|
+
allowHTML: boolean;
|
|
4
21
|
};
|
|
5
|
-
}, strToEl:
|
|
6
|
-
|
|
22
|
+
}, strToEl: StrToEl, escapeForTemplate: EscapeForTemplate, getClassNames: GetClassNames): {
|
|
23
|
+
/**
|
|
24
|
+
* Custom renderer for each dropdown option ("choice" in Choices terminology).
|
|
25
|
+
* Keep all required attributes when editing this template, otherwise
|
|
26
|
+
* selection/highlight/accessibility behavior can break.
|
|
27
|
+
*/
|
|
28
|
+
choice: ({ classNames }: {
|
|
29
|
+
classNames: Record<string, string | string[]>;
|
|
30
|
+
}, data: any) => HTMLElement;
|
|
7
31
|
};
|
|
32
|
+
export {};
|