@mittwald/flow-react-components 0.2.0-alpha.498 → 0.2.0-alpha.499
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/CHANGELOG.md +6 -0
- package/dist/assets/doc-properties.json +22680 -22661
- package/dist/css/all.css +1 -1
- package/dist/js/components/src/components/BrowserOnly/BrowserOnly.mjs +2 -1
- package/dist/js/components/src/components/BrowserOnly/BrowserOnly.mjs.map +1 -1
- package/dist/js/components/src/components/CheckboxGroup/CheckboxGroup.mjs +32 -20
- package/dist/js/components/src/components/CheckboxGroup/CheckboxGroup.mjs.map +1 -1
- package/dist/js/components/src/components/ComboBox/ComboBox.mjs +5 -1
- package/dist/js/components/src/components/ComboBox/ComboBox.mjs.map +1 -1
- package/dist/js/components/src/components/DatePicker/DatePicker.mjs +6 -2
- package/dist/js/components/src/components/DatePicker/DatePicker.mjs.map +1 -1
- package/dist/js/components/src/components/DateRangePicker/DateRangePicker.mjs +5 -1
- package/dist/js/components/src/components/DateRangePicker/DateRangePicker.mjs.map +1 -1
- package/dist/js/components/src/components/FileField/FileField.mjs +3 -2
- package/dist/js/components/src/components/FileField/FileField.mjs.map +1 -1
- package/dist/js/components/src/components/FileField/components/FileInput.mjs +1 -1
- package/dist/js/components/src/components/FileField/components/FileInput.mjs.map +1 -1
- package/dist/js/components/src/components/FileField/components/FileInput.module.scss.mjs +3 -1
- package/dist/js/components/src/components/FileField/components/FileInput.module.scss.mjs.map +1 -1
- package/dist/js/components/src/components/List/components/Header/components/SearchField/SearchField.mjs +2 -1
- package/dist/js/components/src/components/List/components/Header/components/SearchField/SearchField.mjs.map +1 -1
- package/dist/js/components/src/components/List/hooks/useAriaAnnounceSearchState.mjs +2 -1
- package/dist/js/components/src/components/List/hooks/useAriaAnnounceSearchState.mjs.map +1 -1
- package/dist/js/components/src/components/RadioGroup/RadioGroup.mjs +6 -6
- package/dist/js/components/src/components/RadioGroup/RadioGroup.mjs.map +1 -1
- package/dist/js/components/src/components/SegmentedControl/SegmentedControl.mjs +6 -1
- package/dist/js/components/src/components/SegmentedControl/SegmentedControl.mjs.map +1 -1
- package/dist/js/components/src/components/Select/Select.mjs +21 -6
- package/dist/js/components/src/components/Select/Select.mjs.map +1 -1
- package/dist/js/components/src/components/Slider/Slider.mjs +81 -60
- package/dist/js/components/src/components/Slider/Slider.mjs.map +1 -1
- package/dist/js/components/src/components/Switch/Switch.mjs +40 -7
- package/dist/js/components/src/components/Switch/Switch.mjs.map +1 -1
- package/dist/js/components/src/components/TimeField/TimeField.mjs +6 -1
- package/dist/js/components/src/components/TimeField/TimeField.mjs.map +1 -1
- package/dist/js/components/src/integrations/react-hook-form/components/Form/lib/useRegisterActionStateContext.mjs +5 -1
- package/dist/js/components/src/integrations/react-hook-form/components/Form/lib/useRegisterActionStateContext.mjs.map +1 -1
- package/dist/js/components/src/lib/getContainerBreakpointSizeClassName.mjs.map +1 -1
- package/dist/js/components/src/lib/hooks/dom/useMakeFocusable.mjs +28 -0
- package/dist/js/components/src/lib/hooks/dom/useMakeFocusable.mjs.map +1 -0
- package/dist/js/components/src/lib/hooks/useProps.mjs +5 -2
- package/dist/js/components/src/lib/hooks/useProps.mjs.map +1 -1
- package/dist/types/components/CheckboxButton/stories/Default.stories.d.ts.map +1 -1
- package/dist/types/components/CheckboxGroup/CheckboxGroup.d.ts.map +1 -1
- package/dist/types/components/ComboBox/ComboBox.d.ts.map +1 -1
- package/dist/types/components/DatePicker/DatePicker.d.ts.map +1 -1
- package/dist/types/components/DateRangePicker/DateRangePicker.d.ts.map +1 -1
- package/dist/types/components/FileField/FileField.d.ts.map +1 -1
- package/dist/types/components/FileField/stories/Default.stories.d.ts +0 -1
- package/dist/types/components/FileField/stories/Default.stories.d.ts.map +1 -1
- package/dist/types/components/MarkdownEditor/stories/Default.stories.d.ts +0 -1
- package/dist/types/components/MarkdownEditor/stories/Default.stories.d.ts.map +1 -1
- package/dist/types/components/PasswordCreationField/stories/Default.stories.d.ts +0 -1
- package/dist/types/components/PasswordCreationField/stories/Default.stories.d.ts.map +1 -1
- package/dist/types/components/RadioGroup/RadioGroup.d.ts.map +1 -1
- package/dist/types/components/SegmentedControl/SegmentedControl.d.ts +2 -2
- package/dist/types/components/SegmentedControl/SegmentedControl.d.ts.map +1 -1
- package/dist/types/components/Select/Select.d.ts +1 -3
- package/dist/types/components/Select/Select.d.ts.map +1 -1
- package/dist/types/components/Slider/Slider.d.ts +3 -3
- package/dist/types/components/Slider/Slider.d.ts.map +1 -1
- package/dist/types/components/Switch/Switch.d.ts.map +1 -1
- package/dist/types/components/TextField/stories/Default.stories.d.ts +0 -1
- package/dist/types/components/TextField/stories/Default.stories.d.ts.map +1 -1
- package/dist/types/components/TimeField/TimeField.d.ts.map +1 -1
- package/dist/types/integrations/react-hook-form/components/Field/stories/Autocomplete.stories.d.ts +1 -0
- package/dist/types/integrations/react-hook-form/components/Field/stories/Autocomplete.stories.d.ts.map +1 -1
- package/dist/types/integrations/react-hook-form/components/Field/stories/Checkbox.stories.d.ts +1 -0
- package/dist/types/integrations/react-hook-form/components/Field/stories/Checkbox.stories.d.ts.map +1 -1
- package/dist/types/integrations/react-hook-form/components/Field/stories/CheckboxGroup.stories.d.ts +1 -0
- package/dist/types/integrations/react-hook-form/components/Field/stories/CheckboxGroup.stories.d.ts.map +1 -1
- package/dist/types/integrations/react-hook-form/components/Field/stories/ComboBox.stories.d.ts +1 -0
- package/dist/types/integrations/react-hook-form/components/Field/stories/ComboBox.stories.d.ts.map +1 -1
- package/dist/types/integrations/react-hook-form/components/Field/stories/DatePicker.stories.d.ts +1 -0
- package/dist/types/integrations/react-hook-form/components/Field/stories/DatePicker.stories.d.ts.map +1 -1
- package/dist/types/integrations/react-hook-form/components/Field/stories/DateRangePicker.stories.d.ts +1 -0
- package/dist/types/integrations/react-hook-form/components/Field/stories/DateRangePicker.stories.d.ts.map +1 -1
- package/dist/types/integrations/react-hook-form/components/Field/stories/FileField.stories.d.ts +8 -0
- package/dist/types/integrations/react-hook-form/components/Field/stories/FileField.stories.d.ts.map +1 -0
- package/dist/types/integrations/react-hook-form/components/Field/stories/MarkdownEditor.stories.d.ts +8 -0
- package/dist/types/integrations/react-hook-form/components/Field/stories/MarkdownEditor.stories.d.ts.map +1 -0
- package/dist/types/integrations/react-hook-form/components/Field/stories/NumberField.stories.d.ts +1 -0
- package/dist/types/integrations/react-hook-form/components/Field/stories/NumberField.stories.d.ts.map +1 -1
- package/dist/types/integrations/react-hook-form/components/Field/stories/PasswordCreationField.stories.d.ts +9 -0
- package/dist/types/integrations/react-hook-form/components/Field/stories/PasswordCreationField.stories.d.ts.map +1 -0
- package/dist/types/integrations/react-hook-form/components/Field/stories/RadioGroup.stories.d.ts +1 -0
- package/dist/types/integrations/react-hook-form/components/Field/stories/RadioGroup.stories.d.ts.map +1 -1
- package/dist/types/integrations/react-hook-form/components/Field/stories/SearchField.stories.d.ts +8 -0
- package/dist/types/integrations/react-hook-form/components/Field/stories/SearchField.stories.d.ts.map +1 -0
- package/dist/types/integrations/react-hook-form/components/Field/stories/SegmentedControl.stories.d.ts +8 -0
- package/dist/types/integrations/react-hook-form/components/Field/stories/SegmentedControl.stories.d.ts.map +1 -0
- package/dist/types/integrations/react-hook-form/components/Field/stories/Select.stories.d.ts +1 -0
- package/dist/types/integrations/react-hook-form/components/Field/stories/Select.stories.d.ts.map +1 -1
- package/dist/types/integrations/react-hook-form/components/Field/stories/Slider.stories.d.ts +1 -0
- package/dist/types/integrations/react-hook-form/components/Field/stories/Slider.stories.d.ts.map +1 -1
- package/dist/types/integrations/react-hook-form/components/Field/stories/Switch.stories.d.ts +8 -0
- package/dist/types/integrations/react-hook-form/components/Field/stories/Switch.stories.d.ts.map +1 -0
- package/dist/types/integrations/react-hook-form/components/Field/stories/TextArea.stories.d.ts +1 -0
- package/dist/types/integrations/react-hook-form/components/Field/stories/TextArea.stories.d.ts.map +1 -1
- package/dist/types/integrations/react-hook-form/components/Field/stories/TextField.stories.d.ts +1 -0
- package/dist/types/integrations/react-hook-form/components/Field/stories/TextField.stories.d.ts.map +1 -1
- package/dist/types/integrations/react-hook-form/components/Field/stories/TimeField.stories.d.ts +1 -0
- package/dist/types/integrations/react-hook-form/components/Field/stories/TimeField.stories.d.ts.map +1 -1
- package/dist/types/integrations/react-hook-form/components/Form/lib/useRegisterActionStateContext.d.ts.map +1 -1
- package/dist/types/lib/getContainerBreakpointSizeClassName.d.ts.map +1 -1
- package/dist/types/lib/hooks/dom/useMakeFocusable.d.ts +7 -0
- package/dist/types/lib/hooks/dom/useMakeFocusable.d.ts.map +1 -0
- package/dist/types/lib/hooks/useProps.d.ts.map +1 -1
- package/package.json +4 -4
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
"use client"
|
|
2
2
|
/* */
|
|
3
3
|
import { jsx, jsxs } from 'react/jsx-runtime';
|
|
4
|
+
import { useRef } from 'react';
|
|
4
5
|
import * as Aria from 'react-aria-components';
|
|
5
6
|
import '../../lib/propsContext/propsContext.mjs';
|
|
6
7
|
import { PropsContextProvider } from '../../lib/propsContext/components/PropsContextProvider.mjs';
|
|
@@ -8,7 +9,6 @@ import formFieldStyles from '../FormField/FormField.module.scss.mjs';
|
|
|
8
9
|
import { FieldError } from '../FieldError/FieldError.mjs';
|
|
9
10
|
import styles from './Select.module.scss.mjs';
|
|
10
11
|
import clsx from 'clsx';
|
|
11
|
-
import 'react';
|
|
12
12
|
import '@tabler/icons-react';
|
|
13
13
|
import '../Icon/Icon.mjs';
|
|
14
14
|
import '../../views/IconView.mjs';
|
|
@@ -18,6 +18,8 @@ import { Options } from '../Options/Options.mjs';
|
|
|
18
18
|
import { TunnelProvider, TunnelExit } from '@mittwald/react-tunnel';
|
|
19
19
|
import 'mobx';
|
|
20
20
|
import { useOverlayController } from '../../lib/controller/overlay/useOverlayController.mjs';
|
|
21
|
+
import { useObjectRef } from '@react-aria/utils';
|
|
22
|
+
import { useMakeFocusable } from '../../lib/hooks/dom/useMakeFocusable.mjs';
|
|
21
23
|
|
|
22
24
|
const Select = flowComponent("Select", (props) => {
|
|
23
25
|
const {
|
|
@@ -59,6 +61,11 @@ const Select = flowComponent("Select", (props) => {
|
|
|
59
61
|
const controllerFromContext = useOverlayController("Select", {
|
|
60
62
|
reuseControllerFromContext: true
|
|
61
63
|
});
|
|
64
|
+
const localSelectRef = useObjectRef(ref);
|
|
65
|
+
const localButtonRef = useRef(null);
|
|
66
|
+
useMakeFocusable(localSelectRef, () => {
|
|
67
|
+
localButtonRef.current?.focus();
|
|
68
|
+
});
|
|
62
69
|
const controller = controllerFromProps ?? controllerFromContext;
|
|
63
70
|
const isOpen = controller.useIsOpen();
|
|
64
71
|
return /* @__PURE__ */ jsx(
|
|
@@ -66,16 +73,24 @@ const Select = flowComponent("Select", (props) => {
|
|
|
66
73
|
{
|
|
67
74
|
...rest,
|
|
68
75
|
className: rootClassName,
|
|
69
|
-
ref,
|
|
76
|
+
ref: localSelectRef,
|
|
70
77
|
onSelectionChange: isReadOnly ? void 0 : handleOnSelectionChange,
|
|
71
78
|
onOpenChange: (isOpen2) => !isReadOnly && controller.setOpen(isOpen2),
|
|
72
79
|
isOpen,
|
|
73
80
|
"data-readonly": isReadOnly,
|
|
74
81
|
children: /* @__PURE__ */ jsx(PropsContextProvider, { props: propsContext, children: /* @__PURE__ */ jsxs(TunnelProvider, { children: [
|
|
75
|
-
/* @__PURE__ */ jsxs(
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
82
|
+
/* @__PURE__ */ jsxs(
|
|
83
|
+
Aria.Button,
|
|
84
|
+
{
|
|
85
|
+
ref: localButtonRef,
|
|
86
|
+
"data-readonly": isReadOnly,
|
|
87
|
+
className: styles.toggle,
|
|
88
|
+
children: [
|
|
89
|
+
/* @__PURE__ */ jsx(Aria.SelectValue, {}),
|
|
90
|
+
/* @__PURE__ */ jsx(IconChevronDown, {})
|
|
91
|
+
]
|
|
92
|
+
}
|
|
93
|
+
),
|
|
79
94
|
children,
|
|
80
95
|
/* @__PURE__ */ jsx(Options, { controller, children: /* @__PURE__ */ jsx(TunnelExit, { id: "options" }) }),
|
|
81
96
|
/* @__PURE__ */ jsx(FieldError, { className: formFieldStyles.fieldError })
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Select.mjs","sources":["../../../../../../src/components/Select/Select.tsx"],"sourcesContent":["import type
|
|
1
|
+
{"version":3,"file":"Select.mjs","sources":["../../../../../../src/components/Select/Select.tsx"],"sourcesContent":["import { type PropsWithChildren, useRef } from \"react\";\nimport type { Key } from \"react-aria-components\";\nimport * as Aria from \"react-aria-components\";\nimport type { PropsContext } from \"@/lib/propsContext\";\nimport { PropsContextProvider } from \"@/lib/propsContext\";\nimport formFieldStyles from \"@/components/FormField/FormField.module.scss\";\nimport { FieldError } from \"@/components/FieldError\";\nimport styles from \"./Select.module.scss\";\nimport clsx from \"clsx\";\nimport { IconChevronDown } from \"@/components/Icon/components/icons\";\nimport type { FlowComponentProps } from \"@/lib/componentFactory/flowComponent\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\nimport { Options } from \"@/components/Options\";\nimport { TunnelExit, TunnelProvider } from \"@mittwald/react-tunnel\";\nimport type { PropsWithClassName } from \"@/lib/types/props\";\nimport { type OverlayController, useOverlayController } from \"@/lib/controller\";\nimport { useObjectRef } from \"@react-aria/utils\";\nimport { useMakeFocusable } from \"@/lib/hooks/dom/useMakeFocusable\";\n\nexport interface SelectProps\n extends PropsWithChildren<Omit<Aria.SelectProps, \"children\" | \"className\">>,\n FlowComponentProps,\n PropsWithClassName {\n /** Handler that is called when the selected value changes. */\n onChange?: (value: string | number) => void;\n /** An overlay controller to control the select option popover state. */\n controller?: OverlayController;\n /** Whether the component is read only. */\n isReadOnly?: boolean;\n}\n\n/** @flr-generate all */\nexport const Select = flowComponent(\"Select\", (props) => {\n const {\n children,\n className,\n onChange = () => {\n // default: do nothing\n },\n onSelectionChange = () => {\n // default: do nothing\n },\n controller: controllerFromProps,\n ref,\n isReadOnly,\n ...rest\n } = props;\n\n const rootClassName = clsx(\n styles.select,\n formFieldStyles.formField,\n className,\n );\n\n const propsContext: PropsContext = {\n Label: {\n className: formFieldStyles.label,\n optional: !props.isRequired,\n },\n FieldDescription: {\n className: formFieldStyles.fieldDescription,\n },\n FieldError: {\n className: formFieldStyles.customFieldError,\n },\n Option: {\n tunnelId: \"options\",\n },\n };\n\n const handleOnSelectionChange = (id: Key | null) => {\n onChange(String(id));\n onSelectionChange(id);\n };\n\n const controllerFromContext = useOverlayController(\"Select\", {\n reuseControllerFromContext: true,\n });\n\n const localSelectRef = useObjectRef(ref);\n const localButtonRef = useRef<HTMLButtonElement>(null);\n\n useMakeFocusable(localSelectRef, () => {\n localButtonRef.current?.focus();\n });\n\n const controller = controllerFromProps ?? controllerFromContext;\n const isOpen = controller.useIsOpen();\n\n return (\n <Aria.Select\n {...rest}\n className={rootClassName}\n ref={localSelectRef}\n onSelectionChange={isReadOnly ? undefined : handleOnSelectionChange}\n onOpenChange={(isOpen) => !isReadOnly && controller.setOpen(isOpen)}\n isOpen={isOpen}\n data-readonly={isReadOnly}\n >\n <PropsContextProvider props={propsContext}>\n <TunnelProvider>\n <Aria.Button\n ref={localButtonRef}\n data-readonly={isReadOnly}\n className={styles.toggle}\n >\n <Aria.SelectValue />\n <IconChevronDown />\n </Aria.Button>\n\n {children}\n <Options controller={controller}>\n <TunnelExit id=\"options\" />\n </Options>\n\n <FieldError className={formFieldStyles.fieldError} />\n </TunnelProvider>\n </PropsContextProvider>\n </Aria.Select>\n );\n});\n\nexport default Select;\n"],"names":["isOpen"],"mappings":"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"}
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
"use client"
|
|
2
2
|
/* */
|
|
3
|
-
import {
|
|
3
|
+
import { jsx, jsxs } from 'react/jsx-runtime';
|
|
4
|
+
import 'react';
|
|
4
5
|
import { flowComponent } from '../../lib/componentFactory/flowComponent.mjs';
|
|
5
6
|
import * as Aria from 'react-aria-components';
|
|
6
7
|
import clsx from 'clsx';
|
|
@@ -8,7 +9,6 @@ import styles from './Slider.module.scss.mjs';
|
|
|
8
9
|
import '../../lib/propsContext/propsContext.mjs';
|
|
9
10
|
import { PropsContextProvider } from '../../lib/propsContext/components/PropsContextProvider.mjs';
|
|
10
11
|
import { Button } from '../Button/Button.mjs';
|
|
11
|
-
import 'react';
|
|
12
12
|
import '@tabler/icons-react';
|
|
13
13
|
import '../Icon/Icon.mjs';
|
|
14
14
|
import '../../views/IconView.mjs';
|
|
@@ -16,6 +16,9 @@ import { IconMinus } from '../Icon/components/icons/IconMinus.mjs';
|
|
|
16
16
|
import { IconPlus } from '../Icon/components/icons/IconPlus.mjs';
|
|
17
17
|
import locales from '../../../../_virtual/_.locale.json@3ed2dc50f997451bdd85a713c54e1025.mjs';
|
|
18
18
|
import { useLocalizedStringFormatter } from 'react-aria';
|
|
19
|
+
import { TunnelExit } from '@mittwald/react-tunnel';
|
|
20
|
+
import { useObjectRef } from '@react-aria/utils';
|
|
21
|
+
import { useMakeFocusable } from '../../lib/hooks/dom/useMakeFocusable.mjs';
|
|
19
22
|
|
|
20
23
|
const Slider = flowComponent("Slider", (props) => {
|
|
21
24
|
const {
|
|
@@ -26,6 +29,8 @@ const Slider = flowComponent("Slider", (props) => {
|
|
|
26
29
|
defaultValue,
|
|
27
30
|
showInitialMarker,
|
|
28
31
|
isReadOnly,
|
|
32
|
+
ref,
|
|
33
|
+
inputRef,
|
|
29
34
|
...rest
|
|
30
35
|
} = props;
|
|
31
36
|
const rootClassName = clsx(
|
|
@@ -34,80 +39,96 @@ const Slider = flowComponent("Slider", (props) => {
|
|
|
34
39
|
className
|
|
35
40
|
);
|
|
36
41
|
const stringFormatter = useLocalizedStringFormatter(locales);
|
|
42
|
+
const localSliderRef = useObjectRef(ref);
|
|
43
|
+
const localInputRef = useObjectRef(inputRef);
|
|
44
|
+
useMakeFocusable(localSliderRef, () => {
|
|
45
|
+
localInputRef.current?.focus();
|
|
46
|
+
});
|
|
37
47
|
const propsContext = {
|
|
38
48
|
Label: {
|
|
39
|
-
unstyled: true
|
|
49
|
+
unstyled: true,
|
|
50
|
+
tunnelId: "label"
|
|
40
51
|
}
|
|
41
52
|
};
|
|
42
|
-
return /* @__PURE__ */ jsxs(
|
|
53
|
+
return /* @__PURE__ */ jsx(PropsContextProvider, { props: propsContext, children: /* @__PURE__ */ jsxs(
|
|
43
54
|
Aria.Slider,
|
|
44
55
|
{
|
|
56
|
+
...rest,
|
|
57
|
+
ref: localSliderRef,
|
|
45
58
|
className: rootClassName,
|
|
46
59
|
isDisabled,
|
|
47
60
|
defaultValue,
|
|
48
|
-
...rest,
|
|
49
61
|
children: [
|
|
50
62
|
/* @__PURE__ */ jsxs("div", { className: styles.text, children: [
|
|
51
63
|
/* @__PURE__ */ jsx(Aria.SliderOutput, { className: styles.value }),
|
|
52
|
-
/* @__PURE__ */ jsx(
|
|
64
|
+
/* @__PURE__ */ jsx(TunnelExit, { id: "label" })
|
|
53
65
|
] }),
|
|
54
|
-
/* @__PURE__ */ jsx(Aria.SliderTrack, { className: styles.track, children: ({ state }) => /* @__PURE__ */ jsxs(
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
{
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
}
|
|
68
|
-
),
|
|
69
|
-
/* @__PURE__ */ jsx(
|
|
70
|
-
Button,
|
|
71
|
-
{
|
|
72
|
-
onPress: () => state.incrementThumb(0),
|
|
73
|
-
"aria-label": stringFormatter.format("slider.increment"),
|
|
74
|
-
variant: "plain",
|
|
75
|
-
color: "secondary",
|
|
76
|
-
className: styles.increment,
|
|
77
|
-
isDisabled,
|
|
78
|
-
excludeFromTabOrder: true,
|
|
79
|
-
isReadOnly,
|
|
80
|
-
children: /* @__PURE__ */ jsx(IconPlus, {})
|
|
81
|
-
}
|
|
82
|
-
),
|
|
83
|
-
/* @__PURE__ */ jsx(
|
|
84
|
-
"div",
|
|
85
|
-
{
|
|
86
|
-
className: styles.fill,
|
|
87
|
-
style: { width: state.getThumbPercent(0) * 100 + "%" }
|
|
88
|
-
}
|
|
89
|
-
),
|
|
90
|
-
showInitialMarker && defaultValue && typeof defaultValue === "number" && /* @__PURE__ */ jsx(
|
|
91
|
-
"div",
|
|
92
|
-
{
|
|
93
|
-
className: styles.initialMarker,
|
|
94
|
-
style: {
|
|
95
|
-
left: `calc(${state.getValuePercent(defaultValue) * 100}% - 2px)`
|
|
66
|
+
/* @__PURE__ */ jsx(Aria.SliderTrack, { className: styles.track, children: ({ state }) => /* @__PURE__ */ jsxs(
|
|
67
|
+
PropsContextProvider,
|
|
68
|
+
{
|
|
69
|
+
props: {
|
|
70
|
+
Button: {
|
|
71
|
+
isPending: false,
|
|
72
|
+
isFailed: false,
|
|
73
|
+
isSucceeded: false,
|
|
74
|
+
isReadOnly,
|
|
75
|
+
excludeFromTabOrder: true,
|
|
76
|
+
isDisabled,
|
|
77
|
+
variant: "plain",
|
|
78
|
+
color: "secondary"
|
|
96
79
|
}
|
|
97
|
-
}
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
80
|
+
},
|
|
81
|
+
children: [
|
|
82
|
+
/* @__PURE__ */ jsx(
|
|
83
|
+
Button,
|
|
84
|
+
{
|
|
85
|
+
onPress: () => state.decrementThumb(0),
|
|
86
|
+
"aria-label": stringFormatter.format("slider.decrement"),
|
|
87
|
+
className: styles.decrement,
|
|
88
|
+
children: /* @__PURE__ */ jsx(IconMinus, {})
|
|
89
|
+
}
|
|
90
|
+
),
|
|
91
|
+
/* @__PURE__ */ jsx(
|
|
92
|
+
Button,
|
|
93
|
+
{
|
|
94
|
+
onPress: () => state.incrementThumb(0),
|
|
95
|
+
"aria-label": stringFormatter.format("slider.increment"),
|
|
96
|
+
className: styles.increment,
|
|
97
|
+
children: /* @__PURE__ */ jsx(IconPlus, {})
|
|
98
|
+
}
|
|
99
|
+
),
|
|
100
|
+
/* @__PURE__ */ jsx(
|
|
101
|
+
"div",
|
|
102
|
+
{
|
|
103
|
+
className: styles.fill,
|
|
104
|
+
style: { width: state.getThumbPercent(0) * 100 + "%" }
|
|
105
|
+
}
|
|
106
|
+
),
|
|
107
|
+
showInitialMarker && defaultValue && typeof defaultValue === "number" && /* @__PURE__ */ jsx(
|
|
108
|
+
"div",
|
|
109
|
+
{
|
|
110
|
+
className: styles.initialMarker,
|
|
111
|
+
style: {
|
|
112
|
+
left: `calc(${state.getValuePercent(defaultValue) * 100}% - 2px)`
|
|
113
|
+
}
|
|
114
|
+
}
|
|
115
|
+
),
|
|
116
|
+
/* @__PURE__ */ jsx(
|
|
117
|
+
Aria.SliderThumb,
|
|
118
|
+
{
|
|
119
|
+
inputRef: localInputRef,
|
|
120
|
+
name,
|
|
121
|
+
className: styles.handle,
|
|
122
|
+
isDisabled: isReadOnly
|
|
123
|
+
}
|
|
124
|
+
)
|
|
125
|
+
]
|
|
126
|
+
}
|
|
127
|
+
) }),
|
|
128
|
+
children
|
|
108
129
|
]
|
|
109
130
|
}
|
|
110
|
-
);
|
|
131
|
+
) });
|
|
111
132
|
});
|
|
112
133
|
|
|
113
134
|
export { Slider, Slider as default };
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Slider.mjs","sources":["../../../../../../src/components/Slider/Slider.tsx"],"sourcesContent":["import type
|
|
1
|
+
{"version":3,"file":"Slider.mjs","sources":["../../../../../../src/components/Slider/Slider.tsx"],"sourcesContent":["import { type PropsWithChildren } from \"react\";\nimport React from \"react\";\nimport type { FlowComponentProps } from \"@/lib/componentFactory/flowComponent\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\nimport * as Aria from \"react-aria-components\";\nimport clsx from \"clsx\";\nimport styles from \"./Slider.module.scss\";\nimport type { PropsContext } from \"@/lib/propsContext\";\nimport { PropsContextProvider } from \"@/lib/propsContext\";\nimport { Button } from \"@/components/Button\";\nimport { IconMinus, IconPlus } from \"@/components/Icon/components/icons\";\nimport locales from \"./locales/*.locale.json\";\nimport { useLocalizedStringFormatter } from \"react-aria\";\nimport { TunnelExit } from \"@mittwald/react-tunnel\";\nimport { useObjectRef } from \"@react-aria/utils\";\nimport { useMakeFocusable } from \"@/lib/hooks/dom/useMakeFocusable\";\n\nexport interface SliderProps\n extends FlowComponentProps,\n PropsWithChildren<Aria.SliderProps>,\n Pick<Aria.SliderThumbProps, \"inputRef\" | \"name\"> {\n showInitialMarker?: boolean;\n /** Whether the component is read only. */\n isReadOnly?: boolean;\n}\n\n/** @flr-generate all */\nexport const Slider = flowComponent(\"Slider\", (props) => {\n const {\n className,\n children,\n name,\n isDisabled,\n defaultValue,\n showInitialMarker,\n isReadOnly,\n ref,\n inputRef,\n ...rest\n } = props;\n\n const rootClassName = clsx(\n styles.slider,\n isDisabled && styles.disabled,\n className,\n );\n\n const stringFormatter = useLocalizedStringFormatter(locales);\n\n const localSliderRef = useObjectRef(ref);\n const localInputRef = useObjectRef(inputRef);\n\n useMakeFocusable(localSliderRef, () => {\n localInputRef.current?.focus();\n });\n\n const propsContext: PropsContext = {\n Label: {\n unstyled: true,\n tunnelId: \"label\",\n },\n };\n\n return (\n <PropsContextProvider props={propsContext}>\n <Aria.Slider\n {...rest}\n ref={localSliderRef}\n className={rootClassName}\n isDisabled={isDisabled}\n defaultValue={defaultValue}\n >\n <div className={styles.text}>\n <Aria.SliderOutput className={styles.value} />\n <TunnelExit id=\"label\" />\n </div>\n\n <Aria.SliderTrack className={styles.track}>\n {({ state }) => (\n <PropsContextProvider\n props={{\n Button: {\n isPending: false,\n isFailed: false,\n isSucceeded: false,\n isReadOnly: isReadOnly,\n excludeFromTabOrder: true,\n isDisabled,\n variant: \"plain\",\n color: \"secondary\",\n },\n }}\n >\n <Button\n onPress={() => state.decrementThumb(0)}\n aria-label={stringFormatter.format(\"slider.decrement\")}\n className={styles.decrement}\n >\n <IconMinus />\n </Button>\n\n <Button\n onPress={() => state.incrementThumb(0)}\n aria-label={stringFormatter.format(\"slider.increment\")}\n className={styles.increment}\n >\n <IconPlus />\n </Button>\n\n <div\n className={styles.fill}\n style={{ width: state.getThumbPercent(0) * 100 + \"%\" }}\n />\n\n {showInitialMarker &&\n defaultValue &&\n typeof defaultValue === \"number\" && (\n <div\n className={styles.initialMarker}\n style={{\n left: `calc(${state.getValuePercent(defaultValue) * 100}% - 2px)`,\n }}\n />\n )}\n\n <Aria.SliderThumb\n inputRef={localInputRef}\n name={name}\n className={styles.handle}\n isDisabled={isReadOnly}\n />\n </PropsContextProvider>\n )}\n </Aria.SliderTrack>\n {children}\n </Aria.Slider>\n </PropsContextProvider>\n );\n});\n\nexport default Slider;\n"],"names":[],"mappings":"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"}
|
|
@@ -1,17 +1,21 @@
|
|
|
1
1
|
"use client"
|
|
2
2
|
/* */
|
|
3
|
-
import {
|
|
3
|
+
import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
|
|
4
|
+
import 'react';
|
|
4
5
|
import * as Aria from 'react-aria-components';
|
|
5
6
|
import styles from './Switch.module.scss.mjs';
|
|
6
7
|
import clsx from 'clsx';
|
|
7
|
-
import 'react';
|
|
8
8
|
import '@tabler/icons-react';
|
|
9
9
|
import '../Icon/Icon.mjs';
|
|
10
10
|
import '../../views/IconView.mjs';
|
|
11
11
|
import { IconCheck } from '../Icon/components/icons/IconCheck.mjs';
|
|
12
12
|
import { IconClose } from '../Icon/components/icons/IconClose.mjs';
|
|
13
|
-
import { Label } from '../Label/Label.mjs';
|
|
14
13
|
import { flowComponent } from '../../lib/componentFactory/flowComponent.mjs';
|
|
14
|
+
import '../../lib/propsContext/propsContext.mjs';
|
|
15
|
+
import { PropsContextProvider } from '../../lib/propsContext/components/PropsContextProvider.mjs';
|
|
16
|
+
import { TunnelExit } from '@mittwald/react-tunnel';
|
|
17
|
+
import { useObjectRef } from '@react-aria/utils';
|
|
18
|
+
import { useMakeFocusable } from '../../lib/hooks/dom/useMakeFocusable.mjs';
|
|
15
19
|
|
|
16
20
|
const Switch = flowComponent("Switch", (props) => {
|
|
17
21
|
const {
|
|
@@ -19,6 +23,7 @@ const Switch = flowComponent("Switch", (props) => {
|
|
|
19
23
|
className,
|
|
20
24
|
labelPosition = "trailing",
|
|
21
25
|
ref,
|
|
26
|
+
inputRef,
|
|
22
27
|
...rest
|
|
23
28
|
} = props;
|
|
24
29
|
const rootClassName = clsx(
|
|
@@ -26,10 +31,38 @@ const Switch = flowComponent("Switch", (props) => {
|
|
|
26
31
|
styles[`label-${labelPosition}`],
|
|
27
32
|
className
|
|
28
33
|
);
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
34
|
+
const localSwitchRef = useObjectRef(ref);
|
|
35
|
+
const localInputRef = useObjectRef(inputRef);
|
|
36
|
+
useMakeFocusable(localSwitchRef, () => {
|
|
37
|
+
localInputRef.current?.focus();
|
|
38
|
+
});
|
|
39
|
+
return /* @__PURE__ */ jsxs(
|
|
40
|
+
PropsContextProvider,
|
|
41
|
+
{
|
|
42
|
+
props: {
|
|
43
|
+
Label: {
|
|
44
|
+
tunnelId: "label",
|
|
45
|
+
className: styles.label
|
|
46
|
+
}
|
|
47
|
+
},
|
|
48
|
+
children: [
|
|
49
|
+
/* @__PURE__ */ jsx(
|
|
50
|
+
Aria.Switch,
|
|
51
|
+
{
|
|
52
|
+
...rest,
|
|
53
|
+
className: rootClassName,
|
|
54
|
+
ref: localSwitchRef,
|
|
55
|
+
inputRef: localInputRef,
|
|
56
|
+
children: ({ isSelected }) => /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
57
|
+
/* @__PURE__ */ jsx("div", { className: styles.track, children: /* @__PURE__ */ jsx("div", { className: styles.handle, children: isSelected ? /* @__PURE__ */ jsx(IconCheck, { size: "s" }) : /* @__PURE__ */ jsx(IconClose, { size: "s" }) }) }),
|
|
58
|
+
/* @__PURE__ */ jsx(TunnelExit, { id: "label" })
|
|
59
|
+
] })
|
|
60
|
+
}
|
|
61
|
+
),
|
|
62
|
+
children
|
|
63
|
+
]
|
|
64
|
+
}
|
|
65
|
+
);
|
|
33
66
|
});
|
|
34
67
|
|
|
35
68
|
export { Switch, Switch as default };
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Switch.mjs","sources":["../../../../../../src/components/Switch/Switch.tsx"],"sourcesContent":["import type
|
|
1
|
+
{"version":3,"file":"Switch.mjs","sources":["../../../../../../src/components/Switch/Switch.tsx"],"sourcesContent":["import { type PropsWithChildren } from \"react\";\nimport * as Aria from \"react-aria-components\";\nimport styles from \"./Switch.module.scss\";\nimport clsx from \"clsx\";\nimport { IconCheck, IconClose } from \"@/components/Icon/components/icons\";\nimport type { FlowComponentProps } from \"@/lib/componentFactory/flowComponent\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\nimport { PropsContextProvider } from \"@/lib/propsContext\";\nimport { TunnelExit } from \"@mittwald/react-tunnel\";\nimport { useObjectRef } from \"@react-aria/utils\";\nimport { useMakeFocusable } from \"@/lib/hooks/dom/useMakeFocusable\";\n\nexport interface SwitchProps\n extends PropsWithChildren<Omit<Aria.SwitchProps, \"children\">>,\n FlowComponentProps<HTMLLabelElement> {\n /**\n * Whether the label should appear before or after the switch. @default\n * \"trailing\"\n */\n labelPosition?: \"leading\" | \"trailing\";\n}\n\n/** @flr-generate all */\nexport const Switch = flowComponent(\"Switch\", (props) => {\n const {\n children,\n className,\n labelPosition = \"trailing\",\n ref,\n inputRef,\n ...rest\n } = props;\n\n const rootClassName = clsx(\n styles.switch,\n styles[`label-${labelPosition}`],\n className,\n );\n\n const localSwitchRef = useObjectRef(ref);\n const localInputRef = useObjectRef(inputRef);\n\n useMakeFocusable(localSwitchRef, () => {\n localInputRef.current?.focus();\n });\n\n return (\n <PropsContextProvider\n props={{\n Label: {\n tunnelId: \"label\",\n className: styles.label,\n },\n }}\n >\n <Aria.Switch\n {...rest}\n className={rootClassName}\n ref={localSwitchRef}\n inputRef={localInputRef}\n >\n {({ isSelected }) => (\n <>\n <div className={styles.track}>\n <div className={styles.handle}>\n {isSelected ? <IconCheck size=\"s\" /> : <IconClose size=\"s\" />}\n </div>\n </div>\n <TunnelExit id=\"label\" />\n </>\n )}\n </Aria.Switch>\n {children}\n </PropsContextProvider>\n );\n});\n\nexport default Switch;\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;AAuBO,MAAM,MAAS,GAAA,aAAA,CAAc,QAAU,EAAA,CAAC,KAAU,KAAA;AACvD,EAAM,MAAA;AAAA,IACJ,QAAA;AAAA,IACA,SAAA;AAAA,IACA,aAAgB,GAAA,UAAA;AAAA,IAChB,GAAA;AAAA,IACA,QAAA;AAAA,IACA,GAAG;AAAA,GACD,GAAA,KAAA;AAEJ,EAAA,MAAM,aAAgB,GAAA,IAAA;AAAA,IACpB,MAAO,CAAA,MAAA;AAAA,IACP,MAAA,CAAO,CAAS,MAAA,EAAA,aAAa,CAAE,CAAA,CAAA;AAAA,IAC/B;AAAA,GACF;AAEA,EAAM,MAAA,cAAA,GAAiB,aAAa,GAAG,CAAA;AACvC,EAAM,MAAA,aAAA,GAAgB,aAAa,QAAQ,CAAA;AAE3C,EAAA,gBAAA,CAAiB,gBAAgB,MAAM;AACrC,IAAA,aAAA,CAAc,SAAS,KAAM,EAAA;AAAA,GAC9B,CAAA;AAED,EACE,uBAAA,IAAA;AAAA,IAAC,oBAAA;AAAA,IAAA;AAAA,MACC,KAAO,EAAA;AAAA,QACL,KAAO,EAAA;AAAA,UACL,QAAU,EAAA,OAAA;AAAA,UACV,WAAW,MAAO,CAAA;AAAA;AACpB,OACF;AAAA,MAEA,QAAA,EAAA;AAAA,wBAAA,GAAA;AAAA,UAAC,IAAK,CAAA,MAAA;AAAA,UAAL;AAAA,YACE,GAAG,IAAA;AAAA,YACJ,SAAW,EAAA,aAAA;AAAA,YACX,GAAK,EAAA,cAAA;AAAA,YACL,QAAU,EAAA,aAAA;AAAA,YAET,QAAC,EAAA,CAAA,EAAE,UAAW,EAAA,qBAEX,IAAA,CAAA,QAAA,EAAA,EAAA,QAAA,EAAA;AAAA,8BAAC,GAAA,CAAA,KAAA,EAAA,EAAI,WAAW,MAAO,CAAA,KAAA,EACrB,8BAAC,KAAI,EAAA,EAAA,SAAA,EAAW,OAAO,MACpB,EAAA,QAAA,EAAA,UAAA,uBAAc,SAAU,EAAA,EAAA,IAAA,EAAK,KAAI,CAAK,mBAAA,GAAA,CAAC,aAAU,IAAK,EAAA,GAAA,EAAI,GAC7D,CACF,EAAA,CAAA;AAAA,8BACA,GAAA,CAAC,UAAW,EAAA,EAAA,EAAA,EAAG,OAAQ,EAAA;AAAA,aACzB,EAAA;AAAA;AAAA,SAEJ;AAAA,QACC;AAAA;AAAA;AAAA,GACH;AAEJ,CAAC;;;;"}
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
"use client"
|
|
2
2
|
/* */
|
|
3
3
|
import { jsxs, jsx } from 'react/jsx-runtime';
|
|
4
|
+
import 'react';
|
|
4
5
|
import * as Aria from 'react-aria-components';
|
|
5
6
|
import { flowComponent } from '../../lib/componentFactory/flowComponent.mjs';
|
|
6
7
|
import '../../lib/propsContext/propsContext.mjs';
|
|
@@ -9,6 +10,8 @@ import formFieldStyles from '../FormField/FormField.module.scss.mjs';
|
|
|
9
10
|
import { FieldError } from '../FieldError/FieldError.mjs';
|
|
10
11
|
import clsx from 'clsx';
|
|
11
12
|
import styles from './TimeField.module.scss.mjs';
|
|
13
|
+
import { useMakeFocusable } from '../../lib/hooks/dom/useMakeFocusable.mjs';
|
|
14
|
+
import { useObjectRef } from '@react-aria/utils';
|
|
12
15
|
|
|
13
16
|
const TimeField = flowComponent("TimeField", (props) => {
|
|
14
17
|
const { children, errorMessage, className, ref, ...rest } = props;
|
|
@@ -26,10 +29,12 @@ const TimeField = flowComponent("TimeField", (props) => {
|
|
|
26
29
|
className: formFieldStyles.customFieldError
|
|
27
30
|
}
|
|
28
31
|
};
|
|
32
|
+
const localRef = useObjectRef(ref);
|
|
33
|
+
useMakeFocusable(localRef);
|
|
29
34
|
return /* @__PURE__ */ jsxs(
|
|
30
35
|
Aria.TimeField,
|
|
31
36
|
{
|
|
32
|
-
ref,
|
|
37
|
+
ref: localRef,
|
|
33
38
|
hourCycle: 24,
|
|
34
39
|
className: rootClassName,
|
|
35
40
|
...rest,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TimeField.mjs","sources":["../../../../../../src/components/TimeField/TimeField.tsx"],"sourcesContent":["import type
|
|
1
|
+
{"version":3,"file":"TimeField.mjs","sources":["../../../../../../src/components/TimeField/TimeField.tsx"],"sourcesContent":["import { type PropsWithChildren, type ReactNode } from \"react\";\nimport * as Aria from \"react-aria-components\";\nimport {\n flowComponent,\n type FlowComponentProps,\n} from \"@/lib/componentFactory/flowComponent\";\nimport type { PropsContext } from \"@/lib/propsContext\";\nimport { PropsContextProvider } from \"@/lib/propsContext\";\nimport formFieldStyles from \"@/components/FormField/FormField.module.scss\";\nimport { FieldError } from \"@/components/FieldError\";\nimport clsx from \"clsx\";\nimport styles from \"./TimeField.module.scss\";\nimport { useMakeFocusable } from \"@/lib/hooks/dom/useMakeFocusable\";\nimport { useObjectRef } from \"@react-aria/utils\";\n\nexport interface TimeFieldProps<T extends Aria.TimeValue = Aria.TimeValue>\n extends PropsWithChildren<Omit<Aria.TimeFieldProps<T>, \"children\">>,\n FlowComponentProps<HTMLInputElement> {\n /** An error message to be displayed below the field */\n errorMessage?: ReactNode;\n}\n\n/** @flr-generate all */\nexport const TimeField = flowComponent(\"TimeField\", (props) => {\n const { children, errorMessage, className, ref, ...rest } = props;\n\n const rootClassName = clsx(formFieldStyles.formField, className);\n\n const propsContext: PropsContext = {\n Label: {\n className: formFieldStyles.label,\n optional: !props.isRequired,\n isDisabled: rest.isDisabled,\n },\n FieldDescription: {\n className: formFieldStyles.fieldDescription,\n },\n FieldError: {\n className: formFieldStyles.customFieldError,\n },\n };\n\n const localRef = useObjectRef(ref);\n useMakeFocusable(localRef);\n\n return (\n <Aria.TimeField\n ref={localRef}\n hourCycle={24}\n className={rootClassName}\n {...rest}\n >\n <PropsContextProvider props={propsContext}>\n {children}\n </PropsContextProvider>\n <FieldError className={formFieldStyles.fieldError}>\n {errorMessage}\n </FieldError>\n <Aria.DateInput className={styles.dateInput}>\n {(segment) => <Aria.DateSegment segment={segment} />}\n </Aria.DateInput>\n </Aria.TimeField>\n );\n});\n\nexport default TimeField;\n"],"names":[],"mappings":";;;;;;;;;;;;;AAuBO,MAAM,SAAY,GAAA,aAAA,CAAc,WAAa,EAAA,CAAC,KAAU,KAAA;AAC7D,EAAA,MAAM,EAAE,QAAU,EAAA,YAAA,EAAc,WAAW,GAAK,EAAA,GAAG,MAAS,GAAA,KAAA;AAE5D,EAAA,MAAM,aAAgB,GAAA,IAAA,CAAK,eAAgB,CAAA,SAAA,EAAW,SAAS,CAAA;AAE/D,EAAA,MAAM,YAA6B,GAAA;AAAA,IACjC,KAAO,EAAA;AAAA,MACL,WAAW,eAAgB,CAAA,KAAA;AAAA,MAC3B,QAAA,EAAU,CAAC,KAAM,CAAA,UAAA;AAAA,MACjB,YAAY,IAAK,CAAA;AAAA,KACnB;AAAA,IACA,gBAAkB,EAAA;AAAA,MAChB,WAAW,eAAgB,CAAA;AAAA,KAC7B;AAAA,IACA,UAAY,EAAA;AAAA,MACV,WAAW,eAAgB,CAAA;AAAA;AAC7B,GACF;AAEA,EAAM,MAAA,QAAA,GAAW,aAAa,GAAG,CAAA;AACjC,EAAA,gBAAA,CAAiB,QAAQ,CAAA;AAEzB,EACE,uBAAA,IAAA;AAAA,IAAC,IAAK,CAAA,SAAA;AAAA,IAAL;AAAA,MACC,GAAK,EAAA,QAAA;AAAA,MACL,SAAW,EAAA,EAAA;AAAA,MACX,SAAW,EAAA,aAAA;AAAA,MACV,GAAG,IAAA;AAAA,MAEJ,QAAA,EAAA;AAAA,wBAAC,GAAA,CAAA,oBAAA,EAAA,EAAqB,KAAO,EAAA,YAAA,EAC1B,QACH,EAAA,CAAA;AAAA,wBACC,GAAA,CAAA,UAAA,EAAA,EAAW,SAAW,EAAA,eAAA,CAAgB,YACpC,QACH,EAAA,YAAA,EAAA,CAAA;AAAA,wBACC,GAAA,CAAA,IAAA,CAAK,SAAL,EAAA,EAAe,WAAW,MAAO,CAAA,SAAA,EAC/B,QAAC,EAAA,CAAA,OAAA,qBAAa,GAAA,CAAA,IAAA,CAAK,WAAL,EAAA,EAAiB,SAAkB,CACpD,EAAA;AAAA;AAAA;AAAA,GACF;AAEJ,CAAC;;;;"}
|
|
@@ -55,9 +55,13 @@ const useRegisterActionStateContext = (form) => {
|
|
|
55
55
|
});
|
|
56
56
|
}, [form.subscribe, action.state]);
|
|
57
57
|
const registerSubmitResult = (result) => {
|
|
58
|
-
submitHandlerResultRef.current = result;
|
|
59
58
|
if (isPromise(result)) {
|
|
60
59
|
void action.state.onAsyncStart();
|
|
60
|
+
result.then((submitResult) => {
|
|
61
|
+
submitHandlerResultRef.current = submitResult;
|
|
62
|
+
});
|
|
63
|
+
} else {
|
|
64
|
+
submitHandlerResultRef.current = result;
|
|
61
65
|
}
|
|
62
66
|
};
|
|
63
67
|
return {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useRegisterActionStateContext.mjs","sources":["../../../../../../../../../src/integrations/react-hook-form/components/Form/lib/useRegisterActionStateContext.ts"],"sourcesContent":["import { ActionModel } from \"@/components/Action/models/ActionModel\";\nimport { useEffect, useRef } from \"react\";\nimport { isPromise } from \"remeda\";\nimport type { FieldValues, UseFormReturn } from \"react-hook-form\";\n\nconst callAfterSubmitFunction = (result: unknown) => {\n const callFn = (something: unknown) => {\n if (typeof something === \"function\") {\n something();\n }\n };\n\n if (result instanceof Promise) {\n result.then(callFn);\n } else {\n callFn(result);\n }\n};\n\nexport const useRegisterActionStateContext = <T extends FieldValues>(\n form: UseFormReturn<T>,\n) => {\n const action = ActionModel.useNew({});\n const trackedSubmitCount = useRef(0);\n const submitHandlerResultRef = useRef<unknown>(null);\n\n useEffect(() => {\n return form.subscribe({\n formState: {\n errors: true,\n isValid: true,\n },\n callback: ({\n isValid,\n isSubmitted = false,\n isSubmitSuccessful = false,\n submitCount = 0,\n errors,\n }) => {\n if (submitCount === 0 && trackedSubmitCount.current > 0) {\n trackedSubmitCount.current = 0;\n }\n\n if (trackedSubmitCount.current === submitCount) {\n return;\n }\n trackedSubmitCount.current = submitCount;\n\n if (isSubmitted) {\n if (isSubmitSuccessful) {\n void action.state.onSucceeded();\n\n if (isValid) {\n callAfterSubmitFunction(submitHandlerResultRef.current);\n }\n } else {\n const hasFailedWithError =\n isSubmitted && errors && Object.entries(errors).length > 0\n ? errors\n : undefined;\n\n void action.state.onFailed(hasFailedWithError);\n }\n }\n },\n });\n }, [form.subscribe, action.state]);\n\n const registerSubmitResult = (result: unknown) => {\n
|
|
1
|
+
{"version":3,"file":"useRegisterActionStateContext.mjs","sources":["../../../../../../../../../src/integrations/react-hook-form/components/Form/lib/useRegisterActionStateContext.ts"],"sourcesContent":["import { ActionModel } from \"@/components/Action/models/ActionModel\";\nimport { useEffect, useRef } from \"react\";\nimport { isPromise } from \"remeda\";\nimport type { FieldValues, UseFormReturn } from \"react-hook-form\";\n\nconst callAfterSubmitFunction = (result: unknown) => {\n const callFn = (something: unknown) => {\n if (typeof something === \"function\") {\n something();\n }\n };\n\n if (result instanceof Promise) {\n result.then(callFn);\n } else {\n callFn(result);\n }\n};\n\nexport const useRegisterActionStateContext = <T extends FieldValues>(\n form: UseFormReturn<T>,\n) => {\n const action = ActionModel.useNew({});\n const trackedSubmitCount = useRef(0);\n const submitHandlerResultRef = useRef<unknown>(null);\n\n useEffect(() => {\n return form.subscribe({\n formState: {\n errors: true,\n isValid: true,\n },\n callback: ({\n isValid,\n isSubmitted = false,\n isSubmitSuccessful = false,\n submitCount = 0,\n errors,\n }) => {\n if (submitCount === 0 && trackedSubmitCount.current > 0) {\n trackedSubmitCount.current = 0;\n }\n\n if (trackedSubmitCount.current === submitCount) {\n return;\n }\n trackedSubmitCount.current = submitCount;\n\n if (isSubmitted) {\n if (isSubmitSuccessful) {\n void action.state.onSucceeded();\n\n if (isValid) {\n callAfterSubmitFunction(submitHandlerResultRef.current);\n }\n } else {\n const hasFailedWithError =\n isSubmitted && errors && Object.entries(errors).length > 0\n ? errors\n : undefined;\n\n void action.state.onFailed(hasFailedWithError);\n }\n }\n },\n });\n }, [form.subscribe, action.state]);\n\n const registerSubmitResult = (result: unknown) => {\n if (isPromise(result)) {\n void action.state.onAsyncStart();\n result.then((submitResult) => {\n submitHandlerResultRef.current = submitResult;\n });\n } else {\n submitHandlerResultRef.current = result;\n }\n };\n\n return {\n action,\n registerSubmitResult,\n } as const;\n};\n"],"names":[],"mappings":";;;;AAKA,MAAM,uBAAA,GAA0B,CAAC,MAAoB,KAAA;AACnD,EAAM,MAAA,MAAA,GAAS,CAAC,SAAuB,KAAA;AACrC,IAAI,IAAA,OAAO,cAAc,UAAY,EAAA;AACnC,MAAU,SAAA,EAAA;AAAA;AACZ,GACF;AAEA,EAAA,IAAI,kBAAkB,OAAS,EAAA;AAC7B,IAAA,MAAA,CAAO,KAAK,MAAM,CAAA;AAAA,GACb,MAAA;AACL,IAAA,MAAA,CAAO,MAAM,CAAA;AAAA;AAEjB,CAAA;AAEa,MAAA,6BAAA,GAAgC,CAC3C,IACG,KAAA;AACH,EAAA,MAAM,MAAS,GAAA,WAAA,CAAY,MAAO,CAAA,EAAE,CAAA;AACpC,EAAM,MAAA,kBAAA,GAAqB,OAAO,CAAC,CAAA;AACnC,EAAM,MAAA,sBAAA,GAAyB,OAAgB,IAAI,CAAA;AAEnD,EAAA,SAAA,CAAU,MAAM;AACd,IAAA,OAAO,KAAK,SAAU,CAAA;AAAA,MACpB,SAAW,EAAA;AAAA,QACT,MAAQ,EAAA,IAAA;AAAA,QACR,OAAS,EAAA;AAAA,OACX;AAAA,MACA,UAAU,CAAC;AAAA,QACT,OAAA;AAAA,QACA,WAAc,GAAA,KAAA;AAAA,QACd,kBAAqB,GAAA,KAAA;AAAA,QACrB,WAAc,GAAA,CAAA;AAAA,QACd;AAAA,OACI,KAAA;AACJ,QAAA,IAAI,WAAgB,KAAA,CAAA,IAAK,kBAAmB,CAAA,OAAA,GAAU,CAAG,EAAA;AACvD,UAAA,kBAAA,CAAmB,OAAU,GAAA,CAAA;AAAA;AAG/B,QAAI,IAAA,kBAAA,CAAmB,YAAY,WAAa,EAAA;AAC9C,UAAA;AAAA;AAEF,QAAA,kBAAA,CAAmB,OAAU,GAAA,WAAA;AAE7B,QAAA,IAAI,WAAa,EAAA;AACf,UAAA,IAAI,kBAAoB,EAAA;AACtB,YAAK,KAAA,MAAA,CAAO,MAAM,WAAY,EAAA;AAE9B,YAAA,IAAI,OAAS,EAAA;AACX,cAAA,uBAAA,CAAwB,uBAAuB,OAAO,CAAA;AAAA;AACxD,WACK,MAAA;AACL,YAAM,MAAA,kBAAA,GACJ,eAAe,MAAU,IAAA,MAAA,CAAO,QAAQ,MAAM,CAAA,CAAE,MAAS,GAAA,CAAA,GACrD,MACA,GAAA,MAAA;AAEN,YAAK,KAAA,MAAA,CAAO,KAAM,CAAA,QAAA,CAAS,kBAAkB,CAAA;AAAA;AAC/C;AACF;AACF,KACD,CAAA;AAAA,KACA,CAAC,IAAA,CAAK,SAAW,EAAA,MAAA,CAAO,KAAK,CAAC,CAAA;AAEjC,EAAM,MAAA,oBAAA,GAAuB,CAAC,MAAoB,KAAA;AAChD,IAAI,IAAA,SAAA,CAAU,MAAM,CAAG,EAAA;AACrB,MAAK,KAAA,MAAA,CAAO,MAAM,YAAa,EAAA;AAC/B,MAAO,MAAA,CAAA,IAAA,CAAK,CAAC,YAAiB,KAAA;AAC5B,QAAA,sBAAA,CAAuB,OAAU,GAAA,YAAA;AAAA,OAClC,CAAA;AAAA,KACI,MAAA;AACL,MAAA,sBAAA,CAAuB,OAAU,GAAA,MAAA;AAAA;AACnC,GACF;AAEA,EAAO,OAAA;AAAA,IACL,MAAA;AAAA,IACA;AAAA,GACF;AACF;;;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"getContainerBreakpointSizeClassName.mjs","sources":["../../../../../src/lib/getContainerBreakpointSizeClassName.ts"],"sourcesContent":["import type { ContainerBreakpointSize } from \"@/lib/types/props\";\n\nexport const getContainerBreakpointSizeClassName = (\n containerBreakpointSize: ContainerBreakpointSize,\n)
|
|
1
|
+
{"version":3,"file":"getContainerBreakpointSizeClassName.mjs","sources":["../../../../../src/lib/getContainerBreakpointSizeClassName.ts"],"sourcesContent":["import type { ContainerBreakpointSize } from \"@/lib/types/props\";\n\nexport const getContainerBreakpointSizeClassName = (\n containerBreakpointSize: ContainerBreakpointSize,\n) => `container-breakpoint-size-${containerBreakpointSize}`;\n"],"names":[],"mappings":"AAEO,MAAM,mCAAsC,GAAA,CACjD,uBACG,KAAA,CAAA,0BAAA,EAA6B,uBAAuB,CAAA;;;;"}
|
|
@@ -0,0 +1,28 @@
|
|
|
1
|
+
"use client"
|
|
2
|
+
/* */
|
|
3
|
+
import { useEffect } from 'react';
|
|
4
|
+
|
|
5
|
+
const useMakeFocusable = (ref, onFocus) => {
|
|
6
|
+
useEffect(() => {
|
|
7
|
+
const element = ref.current;
|
|
8
|
+
const shouldProcessElement = element && element instanceof HTMLElement;
|
|
9
|
+
if (!shouldProcessElement) {
|
|
10
|
+
return;
|
|
11
|
+
}
|
|
12
|
+
const onFocusHandler = () => onFocus?.();
|
|
13
|
+
element.addEventListener("focus", onFocusHandler);
|
|
14
|
+
const hasTabIndex = element.hasAttribute("tabIndex");
|
|
15
|
+
if (!hasTabIndex) {
|
|
16
|
+
element.setAttribute("tabIndex", "-1");
|
|
17
|
+
}
|
|
18
|
+
return () => {
|
|
19
|
+
element.removeEventListener("focus", onFocusHandler);
|
|
20
|
+
if (!hasTabIndex) {
|
|
21
|
+
element.removeAttribute("tabIndex");
|
|
22
|
+
}
|
|
23
|
+
};
|
|
24
|
+
}, [ref.current, onFocus]);
|
|
25
|
+
};
|
|
26
|
+
|
|
27
|
+
export { useMakeFocusable };
|
|
28
|
+
//# sourceMappingURL=useMakeFocusable.mjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"useMakeFocusable.mjs","sources":["../../../../../../../src/lib/hooks/dom/useMakeFocusable.ts"],"sourcesContent":["import { type RefObject, useEffect } from \"react\";\n\n/**\n * A hook that makes an element focusable and calls a callback when it receives\n * focus.\n */\nexport const useMakeFocusable = (\n ref: RefObject<unknown>,\n onFocus?: CallableFunction,\n) => {\n useEffect(() => {\n const element = ref.current;\n const shouldProcessElement = element && element instanceof HTMLElement;\n\n if (!shouldProcessElement) {\n return;\n }\n\n const onFocusHandler = () => onFocus?.();\n element.addEventListener(\"focus\", onFocusHandler);\n\n const hasTabIndex = element.hasAttribute(\"tabIndex\");\n if (!hasTabIndex) {\n // when we have no tabIndex, we set it to -1 to make it focusable\n element.setAttribute(\"tabIndex\", \"-1\");\n }\n\n return () => {\n element.removeEventListener(\"focus\", onFocusHandler);\n if (!hasTabIndex) {\n element.removeAttribute(\"tabIndex\");\n }\n };\n }, [ref.current, onFocus]);\n};\n"],"names":[],"mappings":";;AAMa,MAAA,gBAAA,GAAmB,CAC9B,GAAA,EACA,OACG,KAAA;AACH,EAAA,SAAA,CAAU,MAAM;AACd,IAAA,MAAM,UAAU,GAAI,CAAA,OAAA;AACpB,IAAM,MAAA,oBAAA,GAAuB,WAAW,OAAmB,YAAA,WAAA;AAE3D,IAAA,IAAI,CAAC,oBAAsB,EAAA;AACzB,MAAA;AAAA;AAGF,IAAM,MAAA,cAAA,GAAiB,MAAM,OAAU,IAAA;AACvC,IAAQ,OAAA,CAAA,gBAAA,CAAiB,SAAS,cAAc,CAAA;AAEhD,IAAM,MAAA,WAAA,GAAc,OAAQ,CAAA,YAAA,CAAa,UAAU,CAAA;AACnD,IAAA,IAAI,CAAC,WAAa,EAAA;AAEhB,MAAQ,OAAA,CAAA,YAAA,CAAa,YAAY,IAAI,CAAA;AAAA;AAGvC,IAAA,OAAO,MAAM;AACX,MAAQ,OAAA,CAAA,mBAAA,CAAoB,SAAS,cAAc,CAAA;AACnD,MAAA,IAAI,CAAC,WAAa,EAAA;AAChB,QAAA,OAAA,CAAQ,gBAAgB,UAAU,CAAA;AAAA;AACpC,KACF;AAAA,GACC,EAAA,CAAC,GAAI,CAAA,OAAA,EAAS,OAAO,CAAC,CAAA;AAC3B;;;;"}
|
|
@@ -1,6 +1,5 @@
|
|
|
1
1
|
"use client"
|
|
2
2
|
/* */
|
|
3
|
-
import { mergeProps } from '@react-aria/utils';
|
|
4
3
|
import { resolveDynamicProps } from '../propsContext/dynamicProps/resolveDynamicProps.mjs';
|
|
5
4
|
import { useComponentPropsContext } from '../propsContext/propsContext.mjs';
|
|
6
5
|
import { omitBy } from 'remeda';
|
|
@@ -9,6 +8,7 @@ import { isFlowComponentName } from '../propsContext/isFlowComponentName.mjs';
|
|
|
9
8
|
import { isInheritedPropsContextKey } from '../propsContext/inherit/lib.mjs';
|
|
10
9
|
import { areChildrenEmpty } from '../react/areChildrenEmpty.mjs';
|
|
11
10
|
import { isNestingLevelKey } from '../propsContext/nestedPropsContext/lib.mjs';
|
|
11
|
+
import { getPropsMerger } from '../react/getPropsMerger.mjs';
|
|
12
12
|
|
|
13
13
|
const withoutChildren = (props) => {
|
|
14
14
|
if ("children" in props) {
|
|
@@ -19,6 +19,9 @@ const withoutChildren = (props) => {
|
|
|
19
19
|
}
|
|
20
20
|
return props;
|
|
21
21
|
};
|
|
22
|
+
const merger = getPropsMerger({
|
|
23
|
+
mergeRefs: true
|
|
24
|
+
});
|
|
22
25
|
const useProps = (component, localProps) => {
|
|
23
26
|
localProps = withoutChildren(localProps);
|
|
24
27
|
const componentPropsContext = useComponentPropsContext(component);
|
|
@@ -27,7 +30,7 @@ const useProps = (component, localProps) => {
|
|
|
27
30
|
componentPropsContext,
|
|
28
31
|
(value, key) => isFlowComponentName(key) || isInheritedPropsContextKey(key) || isNestingLevelKey(key) || isDynamicProp(value)
|
|
29
32
|
) : void 0;
|
|
30
|
-
return
|
|
33
|
+
return merger(
|
|
31
34
|
withoutInternalProps,
|
|
32
35
|
localProps,
|
|
33
36
|
withResolvedDynamicProps
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useProps.mjs","sources":["../../../../../../src/lib/hooks/useProps.ts"],"sourcesContent":["import {\n type FlowComponentName,\n type FlowComponentProps,\n} from \"@/components/propTypes\";\nimport {
|
|
1
|
+
{"version":3,"file":"useProps.mjs","sources":["../../../../../../src/lib/hooks/useProps.ts"],"sourcesContent":["import {\n type FlowComponentName,\n type FlowComponentProps,\n} from \"@/components/propTypes\";\nimport { resolveDynamicProps } from \"@/lib/propsContext/dynamicProps/resolveDynamicProps\";\nimport { useComponentPropsContext } from \"@/lib/propsContext/propsContext\";\nimport { omitBy } from \"remeda\";\nimport isDynamicProp from \"@/lib/propsContext/dynamicProps/lib\";\nimport { isFlowComponentName } from \"@/lib/propsContext/isFlowComponentName\";\nimport { isInheritedPropsContextKey } from \"@/lib/propsContext/inherit/lib\";\nimport { areChildrenEmpty } from \"@/lib/react/areChildrenEmpty\";\nimport { isNestingLevelKey } from \"@/lib/propsContext/nestedPropsContext/lib\";\nimport { getPropsMerger } from \"@/lib/react/getPropsMerger\";\n\nconst withoutChildren = <C extends FlowComponentName>(\n props: FlowComponentProps<C>,\n) => {\n if (\"children\" in props) {\n if (areChildrenEmpty(props.children)) {\n const { children: ignored, ...rest } = props;\n return rest as FlowComponentProps<C>;\n }\n }\n return props;\n};\n\nconst merger = getPropsMerger({\n mergeRefs: true,\n});\n\nexport const useProps = <C extends FlowComponentName>(\n component: C,\n localProps: FlowComponentProps<C>,\n): FlowComponentProps<C> => {\n localProps = withoutChildren(localProps);\n\n const componentPropsContext = useComponentPropsContext(component);\n\n const withResolvedDynamicProps = componentPropsContext\n ? resolveDynamicProps(componentPropsContext, localProps)\n : undefined;\n\n const withoutInternalProps = componentPropsContext\n ? omitBy(\n componentPropsContext,\n (value, key) =>\n isFlowComponentName(key) ||\n isInheritedPropsContextKey(key) ||\n isNestingLevelKey(key) ||\n isDynamicProp(value),\n )\n : undefined;\n\n return merger(\n withoutInternalProps,\n localProps,\n withResolvedDynamicProps,\n ) as FlowComponentProps<C>;\n};\n\nexport default useProps;\n"],"names":[],"mappings":";;;;;;;;;;AAcA,MAAM,eAAA,GAAkB,CACtB,KACG,KAAA;AACH,EAAA,IAAI,cAAc,KAAO,EAAA;AACvB,IAAI,IAAA,gBAAA,CAAiB,KAAM,CAAA,QAAQ,CAAG,EAAA;AACpC,MAAA,MAAM,EAAE,QAAA,EAAU,OAAS,EAAA,GAAG,MAAS,GAAA,KAAA;AACvC,MAAO,OAAA,IAAA;AAAA;AACT;AAEF,EAAO,OAAA,KAAA;AACT,CAAA;AAEA,MAAM,SAAS,cAAe,CAAA;AAAA,EAC5B,SAAW,EAAA;AACb,CAAC,CAAA;AAEY,MAAA,QAAA,GAAW,CACtB,SAAA,EACA,UAC0B,KAAA;AAC1B,EAAA,UAAA,GAAa,gBAAgB,UAAU,CAAA;AAEvC,EAAM,MAAA,qBAAA,GAAwB,yBAAyB,SAAS,CAAA;AAEhE,EAAA,MAAM,wBAA2B,GAAA,qBAAA,GAC7B,mBAAoB,CAAA,qBAAA,EAAuB,UAAU,CACrD,GAAA,MAAA;AAEJ,EAAA,MAAM,uBAAuB,qBACzB,GAAA,MAAA;AAAA,IACE,qBAAA;AAAA,IACA,CAAC,KAAA,EAAO,GACN,KAAA,mBAAA,CAAoB,GAAG,CAAA,IACvB,0BAA2B,CAAA,GAAG,CAC9B,IAAA,iBAAA,CAAkB,GAAG,CAAA,IACrB,cAAc,KAAK;AAAA,GAEvB,GAAA,MAAA;AAEJ,EAAO,OAAA,MAAA;AAAA,IACL,oBAAA;AAAA,IACA,UAAA;AAAA,IACA;AAAA,GACF;AACF;;;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Default.stories.d.ts","sourceRoot":"","sources":["../../../../../src/components/CheckboxButton/stories/Default.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AACvD,OAAO,EAAE,cAAc,EAAE,MAAM,UAAU,CAAC;
|
|
1
|
+
{"version":3,"file":"Default.stories.d.ts","sourceRoot":"","sources":["../../../../../src/components/CheckboxButton/stories/Default.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AACvD,OAAO,EAAE,cAAc,EAAE,MAAM,UAAU,CAAC;AAK1C,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,cAAc,CAYrC,CAAC;AAEF,eAAe,IAAI,CAAC;AAEpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,cAAc,CAAC,CAAC;AAE7C,eAAO,MAAM,OAAO,EAAE,KAAU,CAAC;AAEjC,eAAO,MAAM,QAAQ,EAAE,KAAsC,CAAC;AAC9D,eAAO,MAAM,QAAQ,EAAE,KAAsC,CAAC;AAE9D,eAAO,MAAM,aAAa,EAAE,KAA2C,CAAC;AAExE,eAAO,MAAM,gBAAgB,EAAE,KAE9B,CAAC;AAEF,eAAO,MAAM,WAAW,EAAE,KAOzB,CAAC;AAEF,eAAO,MAAM,OAAO,EAAE,KAErB,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CheckboxGroup.d.ts","sourceRoot":"","sources":["../../../../src/components/CheckboxGroup/CheckboxGroup.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,2BAA2B,CAAC;AAGnE,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,sCAAsC,CAAC;AAM/E,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAC/C,OAAO,KAAK,IAAI,MAAM,uBAAuB,CAAC;
|
|
1
|
+
{"version":3,"file":"CheckboxGroup.d.ts","sourceRoot":"","sources":["../../../../src/components/CheckboxGroup/CheckboxGroup.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,2BAA2B,CAAC;AAGnE,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,sCAAsC,CAAC;AAM/E,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAC/C,OAAO,KAAK,IAAI,MAAM,uBAAuB,CAAC;AAM9C,MAAM,WAAW,kBACf,SAAQ,iBAAiB,CAAC,IAAI,CAAC,IAAI,CAAC,kBAAkB,EAAE,UAAU,CAAC,CAAC,EAClE,IAAI,CAAC,iBAAiB,EAAE,GAAG,GAAG,GAAG,GAAG,GAAG,CAAC,EACxC,kBAAkB;CAAG;AAEzB,wBAAwB;AACxB,eAAO,MAAM,aAAa,uGA6DxB,CAAC;AAEH,eAAe,aAAa,CAAC"}
|