@mittwald/flow-react-components 1.5.0-next.2 → 1.5.0-next.20
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/AGENTS.md +14 -9
- package/USAGE.md +2 -0
- package/dist/assets/component-index.json +1 -1
- package/dist/assets/doc-properties.json +1 -1
- package/dist/css/all-layered.css +1 -1
- package/dist/css/all.css +1 -1
- package/dist/js/packages/components/src/components/Accordion/Accordion.module.mjs.map +1 -1
- package/dist/js/packages/components/src/components/Autocomplete/Autocomplete.mjs +14 -7
- package/dist/js/packages/components/src/components/Autocomplete/Autocomplete.mjs.map +1 -1
- package/dist/js/packages/components/src/components/Button/Button.mjs +5 -17
- package/dist/js/packages/components/src/components/Button/Button.mjs.map +1 -1
- package/dist/js/packages/components/src/components/Button/Button.module.mjs.map +1 -1
- package/dist/js/packages/components/src/components/CartesianChart/components/YAxis/YAxis.mjs +5 -1
- package/dist/js/packages/components/src/components/CartesianChart/components/YAxis/YAxis.mjs.map +1 -1
- package/dist/js/packages/components/src/components/Checkbox/Checkbox.mjs +3 -3
- package/dist/js/packages/components/src/components/Checkbox/Checkbox.mjs.map +1 -1
- package/dist/js/packages/components/src/components/CheckboxButton/CheckboxButton.mjs +3 -3
- package/dist/js/packages/components/src/components/CheckboxButton/CheckboxButton.mjs.map +1 -1
- package/dist/js/packages/components/src/components/CheckboxGroup/CheckboxGroup.mjs +3 -3
- package/dist/js/packages/components/src/components/CheckboxGroup/CheckboxGroup.mjs.map +1 -1
- package/dist/js/packages/components/src/components/CodeEditor/CodeEditor.mjs +24 -10
- package/dist/js/packages/components/src/components/CodeEditor/CodeEditor.mjs.map +1 -1
- package/dist/js/packages/components/src/components/ComboBox/ComboBox.mjs +3 -3
- package/dist/js/packages/components/src/components/ComboBox/ComboBox.mjs.map +1 -1
- package/dist/js/packages/components/src/components/ContextMenu/ContextMenu.mjs +5 -1
- package/dist/js/packages/components/src/components/ContextMenu/ContextMenu.mjs.map +1 -1
- package/dist/js/packages/components/src/components/DatePicker/DatePicker.mjs +6 -5
- package/dist/js/packages/components/src/components/DatePicker/DatePicker.mjs.map +1 -1
- package/dist/js/packages/components/src/components/DateRangePicker/DateRangePicker.mjs +4 -3
- package/dist/js/packages/components/src/components/DateRangePicker/DateRangePicker.mjs.map +1 -1
- package/dist/js/packages/components/src/components/FieldError/FieldError.mjs +40 -31
- package/dist/js/packages/components/src/components/FieldError/FieldError.mjs.map +1 -1
- package/dist/js/packages/components/src/components/FileDropZone/FileDropZone.mjs +8 -6
- package/dist/js/packages/components/src/components/FileDropZone/FileDropZone.mjs.map +1 -1
- package/dist/js/packages/components/src/components/FileField/FileField.mjs +3 -3
- package/dist/js/packages/components/src/components/FileField/FileField.mjs.map +1 -1
- package/dist/js/packages/components/src/components/Flex/Flex.mjs +5 -5
- package/dist/js/packages/components/src/components/Flex/Flex.mjs.map +1 -1
- package/dist/js/packages/components/src/components/List/components/ListItemView/ListItemView.module.mjs.map +1 -1
- package/dist/js/packages/components/src/components/NumberField/NumberField.mjs +3 -2
- package/dist/js/packages/components/src/components/NumberField/NumberField.mjs.map +1 -1
- package/dist/js/packages/components/src/components/PasswordCreationField/PasswordCreationField.mjs +42 -19
- package/dist/js/packages/components/src/components/PasswordCreationField/PasswordCreationField.mjs.map +1 -1
- package/dist/js/packages/components/src/components/PasswordCreationField/components/ComplexityIndicator/ComplexityIndicator.mjs +2 -2
- package/dist/js/packages/components/src/components/PasswordCreationField/components/ComplexityIndicator/ComplexityIndicator.mjs.map +1 -1
- package/dist/js/packages/components/src/components/PasswordCreationField/lib/usePolicyValidationResult.mjs +12 -0
- package/dist/js/packages/components/src/components/PasswordCreationField/lib/usePolicyValidationResult.mjs.map +1 -1
- package/dist/js/packages/components/src/components/RadioGroup/RadioGroup.mjs +3 -2
- package/dist/js/packages/components/src/components/RadioGroup/RadioGroup.mjs.map +1 -1
- package/dist/js/packages/components/src/components/Rating/Rating.mjs +3 -2
- package/dist/js/packages/components/src/components/Rating/Rating.mjs.map +1 -1
- package/dist/js/packages/components/src/components/SearchField/SearchField.mjs +3 -3
- package/dist/js/packages/components/src/components/SearchField/SearchField.mjs.map +1 -1
- package/dist/js/packages/components/src/components/SegmentedControl/SegmentedControl.mjs +3 -2
- package/dist/js/packages/components/src/components/SegmentedControl/SegmentedControl.mjs.map +1 -1
- package/dist/js/packages/components/src/components/Select/Select.mjs +3 -3
- package/dist/js/packages/components/src/components/Select/Select.mjs.map +1 -1
- package/dist/js/packages/components/src/components/Slider/Slider.mjs +8 -8
- package/dist/js/packages/components/src/components/Slider/Slider.mjs.map +1 -1
- package/dist/js/packages/components/src/components/Slider/Slider.module.mjs.map +1 -1
- package/dist/js/packages/components/src/components/Switch/Switch.mjs +3 -2
- package/dist/js/packages/components/src/components/Switch/Switch.mjs.map +1 -1
- package/dist/js/packages/components/src/components/TextArea/TextArea.mjs +3 -3
- package/dist/js/packages/components/src/components/TextArea/TextArea.mjs.map +1 -1
- package/dist/js/packages/components/src/components/TextField/TextField.mjs +3 -3
- package/dist/js/packages/components/src/components/TextField/TextField.mjs.map +1 -1
- package/dist/js/packages/components/src/components/TimeField/TimeField.mjs +5 -3
- package/dist/js/packages/components/src/components/TimeField/TimeField.mjs.map +1 -1
- package/dist/js/packages/components/src/integrations/react-hook-form/components/FormRootError/FormRootError.mjs +6 -3
- package/dist/js/packages/components/src/integrations/react-hook-form/components/FormRootError/FormRootError.mjs.map +1 -1
- package/dist/js/packages/components/src/lib/hooks/fieldErrorRenderedContext.mjs +16 -0
- package/dist/js/packages/components/src/lib/hooks/fieldErrorRenderedContext.mjs.map +1 -0
- package/dist/js/packages/components/src/lib/hooks/useFieldComponent.mjs +8 -7
- package/dist/js/packages/components/src/lib/hooks/useFieldComponent.mjs.map +1 -1
- package/dist/js/packages/components/src/lib/hooks/useFieldError.mjs +34 -21
- package/dist/js/packages/components/src/lib/hooks/useFieldError.mjs.map +1 -1
- package/dist/types/components/CartesianChart/components/YAxis/YAxis.d.ts +7 -0
- package/dist/types/components/FileField/FileField.d.ts +1 -1
- package/dist/types/components/Flex/Flex.d.ts +4 -0
- package/dist/types/components/PasswordCreationField/components/ComplexityIndicator/ComplexityIndicator.d.ts +5 -0
- package/dist/types/integrations/react-hook-form/components/FormRootError/FormRootError.d.ts +12 -2
- package/dist/types/lib/hooks/fieldErrorRenderedContext.d.ts +1 -0
- package/dist/types/lib/hooks/useFieldComponent.d.ts +15 -4
- package/dist/types/lib/hooks/useFieldError.d.ts +7 -1
- package/package.json +10 -9
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Accordion.module.mjs","names":[],"sources":["../../../../../../../src/components/Accordion/Accordion.module.scss"],"sourcesContent":["@use \"@/styles/mixins/expandTransition\";\n@use \"@/styles/mixins/focus\";\n\n.accordion {\n display: flex;\n flex-direction: column;\n\n /* Elements */\n\n .header {\n display: flex;\n flex-direction: column;\n }\n\n .headerButton {\n display: flex;\n justify-content: space-between;\n align-items: center;\n text-align: start;\n flex-grow: 1;\n padding-inline: var(--accordion--padding-x);\n padding-block: var(--accordion--padding-y);\n border-radius: var(--accordion--corner-radius);\n column-gap: var(--accordion--spacing);\n border: none;\n background: none;\n width: 100%;\n transition-property: background-color;\n transition-duration: var(--transition--duration--fast);\n\n @include focus.focus;\n\n &:hover {\n background-color: var(--accordion--background-color--hover);\n }\n }\n\n .content {\n display:
|
|
1
|
+
{"version":3,"file":"Accordion.module.mjs","names":[],"sources":["../../../../../../../src/components/Accordion/Accordion.module.scss"],"sourcesContent":["@use \"@/styles/mixins/expandTransition\";\n@use \"@/styles/mixins/focus\";\n\n.accordion {\n display: flex;\n flex-direction: column;\n\n /* Elements */\n\n .header {\n display: flex;\n flex-direction: column;\n }\n\n .headerButton {\n display: flex;\n justify-content: space-between;\n align-items: center;\n text-align: start;\n flex-grow: 1;\n padding-inline: var(--accordion--padding-x);\n padding-block: var(--accordion--padding-y);\n border-radius: var(--accordion--corner-radius);\n column-gap: var(--accordion--spacing);\n border: none;\n background: none;\n width: 100%;\n transition-property: background-color;\n transition-duration: var(--transition--duration--fast);\n\n @include focus.focus;\n\n &:hover {\n background-color: var(--accordion--background-color--hover);\n }\n }\n\n /* Animates `height` to `auto` instead of the `grid-template-rows: 0fr/1fr`\n trick: in Chromium, hover backgrounds inside a grid row sporadically\n drop out for a frame. Browsers without `interpolate-size` expand without\n animation. `display: block` overrides the `hidden` attribute. */\n .content {\n display: block;\n height: 0;\n overflow: hidden;\n interpolate-size: allow-keywords;\n transition-property: height, visibility;\n visibility: hidden;\n\n @include expandTransition.expandTransition;\n }\n\n .contentInner {\n overflow: hidden;\n padding-inline: var(--accordion--padding-x);\n transition-property: padding;\n\n @include expandTransition.expandTransition;\n }\n\n .chevron {\n transition-property: transform;\n\n @include expandTransition.expandTransition;\n }\n\n &.outline {\n border-color: var(--accordion--border-color);\n border-width: var(--accordion--border-width);\n border-style: var(--accordion--border-style);\n border-radius: var(--accordion--corner-radius);\n }\n\n &.expanded {\n .content {\n height: auto;\n visibility: visible;\n }\n\n .contentInner {\n padding-block: var(--accordion--padding-y);\n }\n\n .chevron {\n transform: rotate(180deg);\n }\n }\n}\n"],"mappings":""}
|
|
@@ -2,6 +2,7 @@
|
|
|
2
2
|
/* */
|
|
3
3
|
import { PropsContextProvider } from "../../lib/propsContext/components/PropsContextProvider.mjs";
|
|
4
4
|
import { flowComponent } from "../../lib/componentFactory/flowComponent.mjs";
|
|
5
|
+
import dynamic from "../../lib/propsContext/dynamicProps/dynamic.mjs";
|
|
5
6
|
import { UiComponentTunnelExit } from "../UiComponentTunnel/UiComponentTunnelExit.mjs";
|
|
6
7
|
import { useOverlayController } from "../../lib/controller/overlay/useOverlayController.mjs";
|
|
7
8
|
import { Text } from "../Text/Text.mjs";
|
|
@@ -9,7 +10,7 @@ import { getOptionsTunnelProps } from "../Option/optionsTunnel.mjs";
|
|
|
9
10
|
import { Options } from "../Options/Options.mjs";
|
|
10
11
|
import __locale_default from "../../../../../_virtual/_3.locale.mjs";
|
|
11
12
|
import Autocomplete_module_default from "./Autocomplete.module.mjs";
|
|
12
|
-
import { useFieldComponent } from "../../lib/hooks/useFieldComponent.mjs";
|
|
13
|
+
import { joinIds, useFieldComponent } from "../../lib/hooks/useFieldComponent.mjs";
|
|
13
14
|
import { isFocused } from "../../lib/form/isFocused.mjs";
|
|
14
15
|
import { emitElementValueChange } from "../../lib/react/emitElementValueChange.mjs";
|
|
15
16
|
import clsx from "clsx";
|
|
@@ -40,6 +41,7 @@ var Autocomplete = flowComponent("Autocomplete", (props) => {
|
|
|
40
41
|
if (inputRef.current) emitElementValueChange(inputRef.current, value);
|
|
41
42
|
optionsOverlayController.close();
|
|
42
43
|
};
|
|
44
|
+
const { FieldErrorView, FieldErrorCaptureContext, fieldPropsContext, wrapperProps, controlProps } = useFieldComponent(props, "Autocomplete");
|
|
43
45
|
const inputProps = {
|
|
44
46
|
onKeyDown: (e) => {
|
|
45
47
|
if (e.key === "Enter" && optionsOverlayController.isOpen) e.preventDefault();
|
|
@@ -47,21 +49,26 @@ var Autocomplete = flowComponent("Autocomplete", (props) => {
|
|
|
47
49
|
ref: inputRef,
|
|
48
50
|
onChange: handleInputChange
|
|
49
51
|
};
|
|
50
|
-
const
|
|
51
|
-
const rootClassName = clsx(Autocomplete_module_default.autocomplete,
|
|
52
|
+
const errorDescribedBy = controlProps["aria-describedby"];
|
|
53
|
+
const rootClassName = clsx(Autocomplete_module_default.autocomplete, wrapperProps.className, className);
|
|
52
54
|
const propsContext = {
|
|
53
|
-
SearchField:
|
|
54
|
-
|
|
55
|
+
SearchField: {
|
|
56
|
+
...inputProps,
|
|
57
|
+
"aria-describedby": dynamic((p) => joinIds(errorDescribedBy, p["aria-describedby"]))
|
|
58
|
+
},
|
|
59
|
+
TextField: {
|
|
60
|
+
...inputProps,
|
|
61
|
+
"aria-describedby": dynamic((p) => joinIds(errorDescribedBy, p["aria-describedby"]))
|
|
62
|
+
},
|
|
55
63
|
Option: { tunnel: getOptionsTunnelProps("Autocomplete") },
|
|
56
64
|
Popover: { className: Autocomplete_module_default.popover },
|
|
57
65
|
...fieldPropsContext
|
|
58
66
|
};
|
|
59
67
|
return /* @__PURE__ */ jsxs("div", {
|
|
60
|
-
...fieldProps,
|
|
61
68
|
className: rootClassName,
|
|
62
69
|
children: [/* @__PURE__ */ jsx(FieldErrorCaptureContext, { children: /* @__PURE__ */ jsx(PropsContextProvider, {
|
|
63
70
|
props: propsContext,
|
|
64
|
-
dependencies: [optionsOverlayController],
|
|
71
|
+
dependencies: [optionsOverlayController, errorDescribedBy],
|
|
65
72
|
children: /* @__PURE__ */ jsx("div", {
|
|
66
73
|
...focusWithin.focusWithinProps,
|
|
67
74
|
ref: container,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Autocomplete.mjs","names":[],"sources":["../../../../../../../src/components/Autocomplete/Autocomplete.tsx"],"sourcesContent":["import { getOptionsTunnelProps } from \"@/components/Option/optionsTunnel\";\nimport { useRef, type PropsWithChildren } from \"react\";\nimport type { PropsWithClassName } from \"@/lib/types/props\";\nimport {
|
|
1
|
+
{"version":3,"file":"Autocomplete.mjs","names":[],"sources":["../../../../../../../src/components/Autocomplete/Autocomplete.tsx"],"sourcesContent":["import { getOptionsTunnelProps } from \"@/components/Option/optionsTunnel\";\nimport { useRef, type PropsWithChildren } from \"react\";\nimport type { PropsWithClassName } from \"@/lib/types/props\";\nimport {\n dynamic,\n type PropsContext,\n PropsContextProvider,\n} from \"@/lib/propsContext\";\nimport * as Aria from \"react-aria-components\";\nimport { useOverlayController } from \"@/lib/controller\";\nimport {\n flowComponent,\n type FlowComponentProps,\n} from \"@/lib/componentFactory/flowComponent\";\nimport type { SearchFieldProps } from \"@/components/SearchField\";\nimport type { TextFieldProps } from \"@/components/TextField\";\nimport Options from \"@/components/Options\";\nimport locales from \"./locales/*.locale.json\";\nimport Text from \"@/components/Text\";\nimport styles from \"./Autocomplete.module.scss\";\nimport {\n UNSAFE_PortalProvider,\n useFocusWithin,\n useLocalizedStringFormatter,\n useObjectRef,\n} from \"react-aria\";\nimport { joinIds, useFieldComponent } from \"@/lib/hooks/useFieldComponent\";\nimport { isFocused } from \"@/lib/form/isFocused\";\nimport { emitElementValueChange } from \"@/lib/react/emitElementValueChange\";\nimport { UiComponentTunnelExit } from \"@/components/UiComponentTunnel/UiComponentTunnelExit\";\nimport clsx from \"clsx\";\n\nexport interface AutocompleteProps\n extends\n PropsWithChildren,\n PropsWithClassName,\n FlowComponentProps<HTMLInputElement>,\n Omit<\n Aria.AutocompleteProps,\n \"children\" | \"onInputChange\" | \"inputValue\" | \"defaultInputValue\" | \"ref\"\n > {}\n\n/** @flr-generate all */\nexport const Autocomplete = flowComponent(\"Autocomplete\", (props) => {\n const { children, className, ref, ...rest } = props;\n\n const inputRef = useObjectRef(ref);\n\n const { contains } = Aria.useFilter({ sensitivity: \"base\" });\n const stringFormatter = useLocalizedStringFormatter(locales);\n const container = useRef(null);\n\n const optionsOverlayController = useOverlayController(\"Popover\", {\n reuseControllerFromContext: false,\n });\n\n const focusWithin = useFocusWithin({\n onBlurWithin: () => optionsOverlayController.close(),\n });\n\n const renderEmptyState = () => (\n <Text className={styles.empty}>\n {stringFormatter.format(\"autocomplete.empty\")}\n </Text>\n );\n\n const handleInputChange = (value: string) => {\n if (value === \"\") {\n optionsOverlayController.close();\n } else if (isFocused(inputRef.current)) {\n optionsOverlayController.open();\n }\n };\n\n const handleOptionAction = (key: Aria.Key) => {\n const value = String(key);\n if (inputRef.current) {\n emitElementValueChange(inputRef.current, value);\n }\n optionsOverlayController.close();\n };\n\n const {\n FieldErrorView,\n FieldErrorCaptureContext,\n fieldPropsContext,\n wrapperProps,\n controlProps,\n } = useFieldComponent(props, \"Autocomplete\");\n\n const inputProps: SearchFieldProps & TextFieldProps = {\n onKeyDown: (e) => {\n if (e.key === \"Enter\" && optionsOverlayController.isOpen) {\n e.preventDefault();\n }\n },\n ref: inputRef,\n onChange: handleInputChange,\n };\n\n const errorDescribedBy = controlProps[\"aria-describedby\"];\n\n const rootClassName = clsx(\n styles.autocomplete,\n wrapperProps.className,\n className,\n );\n\n const propsContext: PropsContext = {\n // Merged, not replaced: a field's own `aria-describedby` must not unlink\n // the Autocomplete's error.\n SearchField: {\n ...inputProps,\n \"aria-describedby\": dynamic((p) =>\n joinIds(errorDescribedBy, p[\"aria-describedby\"]),\n ),\n },\n TextField: {\n ...inputProps,\n \"aria-describedby\": dynamic((p) =>\n joinIds(errorDescribedBy, p[\"aria-describedby\"]),\n ),\n },\n Option: {\n tunnel: getOptionsTunnelProps(\"Autocomplete\"),\n },\n Popover: {\n className: styles.popover,\n },\n ...fieldPropsContext,\n };\n\n return (\n <div className={rootClassName}>\n <FieldErrorCaptureContext>\n <PropsContextProvider\n props={propsContext}\n dependencies={[optionsOverlayController, errorDescribedBy]}\n >\n <div {...focusWithin.focusWithinProps} ref={container}>\n <UNSAFE_PortalProvider getContainer={() => container.current}>\n <Aria.Autocomplete\n filter={contains}\n disableAutoFocusFirst\n {...rest}\n >\n {children}\n <Options\n onAction={handleOptionAction}\n triggerRef={container}\n controller={optionsOverlayController}\n renderEmptyState={renderEmptyState}\n isNonModal\n placement=\"bottom start\"\n >\n <UiComponentTunnelExit\n id=\"options\"\n component=\"Autocomplete\"\n />\n </Options>\n </Aria.Autocomplete>\n </UNSAFE_PortalProvider>\n </div>\n </PropsContextProvider>\n </FieldErrorCaptureContext>\n <FieldErrorView />\n </div>\n );\n});\n\nexport default Autocomplete;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;AA2CA,IAAa,eAAe,cAAc,iBAAiB,UAAU;CACnE,MAAM,EAAE,UAAU,WAAW,KAAK,GAAG,SAAS;CAE9C,MAAM,WAAW,aAAa,GAAG;CAEjC,MAAM,EAAE,aAAa,KAAK,UAAU,EAAE,aAAa,OAAO,CAAC;CAC3D,MAAM,kBAAkB,4BAA4B,gBAAO;CAC3D,MAAM,YAAY,OAAO,IAAI;CAE7B,MAAM,2BAA2B,qBAAqB,WAAW,EAC/D,4BAA4B,MAC9B,CAAC;CAED,MAAM,cAAc,eAAe,EACjC,oBAAoB,yBAAyB,MAAM,EACrD,CAAC;CAED,MAAM,yBACJ,oBAAC,MAAD;EAAM,WAAW,4BAAO;EACrB,UAAA,gBAAgB,OAAO,oBAAoB;CACxC,CAAA;CAGR,MAAM,qBAAqB,UAAkB;EAC3C,IAAI,UAAU,IACZ,yBAAyB,MAAM;OAC1B,IAAI,UAAU,SAAS,OAAO,GACnC,yBAAyB,KAAK;CAElC;CAEA,MAAM,sBAAsB,QAAkB;EAC5C,MAAM,QAAQ,OAAO,GAAG;EACxB,IAAI,SAAS,SACX,uBAAuB,SAAS,SAAS,KAAK;EAEhD,yBAAyB,MAAM;CACjC;CAEA,MAAM,EACJ,gBACA,0BACA,mBACA,cACA,iBACE,kBAAkB,OAAO,cAAc;CAE3C,MAAM,aAAgD;EACpD,YAAY,MAAM;GAChB,IAAI,EAAE,QAAQ,WAAW,yBAAyB,QAChD,EAAE,eAAe;EAErB;EACA,KAAK;EACL,UAAU;CACZ;CAEA,MAAM,mBAAmB,aAAa;CAEtC,MAAM,gBAAgB,KACpB,4BAAO,cACP,aAAa,WACb,SACF;CAEA,MAAM,eAA6B;EAGjC,aAAa;GACX,GAAG;GACH,oBAAoB,SAAS,MAC3B,QAAQ,kBAAkB,EAAE,mBAAmB,CACjD;EACF;EACA,WAAW;GACT,GAAG;GACH,oBAAoB,SAAS,MAC3B,QAAQ,kBAAkB,EAAE,mBAAmB,CACjD;EACF;EACA,QAAQ,EACN,QAAQ,sBAAsB,cAAc,EAC9C;EACA,SAAS,EACP,WAAW,4BAAO,QACpB;EACA,GAAG;CACL;CAEA,OACE,qBAAC,OAAD;EAAK,WAAW;EAAhB,UAAA,CACE,oBAAC,0BAAD,EAAA,UACE,oBAAC,sBAAD;GACE,OAAO;GACP,cAAc,CAAC,0BAA0B,gBAAgB;GAEzD,UAAA,oBAAC,OAAD;IAAK,GAAI,YAAY;IAAkB,KAAK;IAC1C,UAAA,oBAAC,uBAAD;KAAuB,oBAAoB,UAAU;KACnD,UAAA,qBAAC,KAAK,cAAN;MACE,QAAQ;MACR,uBAAA;MACA,GAAI;MAHN,UAAA,CAKG,UACD,oBAAC,SAAD;OACE,UAAU;OACV,YAAY;OACZ,YAAY;OACM;OAClB,YAAA;OACA,WAAU;OAEV,UAAA,oBAAC,uBAAD;QACE,IAAG;QACH,WAAU;OACX,CAAA;MACM,CAAA,CACQ;;IACE,CAAA;GACpB,CAAA;EACe,CAAA,EACE,CAAA,GAC1B,oBAAC,gBAAD,CAAiB,CAAA,CACd;;AAET,CAAC"}
|
|
@@ -15,8 +15,9 @@ import { Fragment, jsx, jsxs } from "react/jsx-runtime";
|
|
|
15
15
|
import { filterDOMProps } from "@react-aria/utils";
|
|
16
16
|
import * as Aria from "react-aria-components";
|
|
17
17
|
//#region src/components/Button/Button.tsx
|
|
18
|
+
var isMuted = (props) => !!(props.isPending || props.isSucceeded || props.isFailed || props["aria-disabled"] || props.isReadOnly);
|
|
18
19
|
var disablePendingProps = (props) => {
|
|
19
|
-
if (props
|
|
20
|
+
if (isMuted(props)) {
|
|
20
21
|
props = { ...props };
|
|
21
22
|
const mutedActionHandler = (e) => {
|
|
22
23
|
if (e && typeof e === "object") {
|
|
@@ -38,6 +39,7 @@ var disablePendingProps = (props) => {
|
|
|
38
39
|
};
|
|
39
40
|
/** @flr-generate all */
|
|
40
41
|
var Button = flowComponent("Button", (props) => {
|
|
42
|
+
const muted = isMuted(props);
|
|
41
43
|
props = disablePendingProps(props);
|
|
42
44
|
const warnDeprecation = useWarnDeprecation();
|
|
43
45
|
const { color: colorFromProps = "primary", variant = "solid", children, className, size = "m", isPending, isSucceeded, isFailed, "aria-disabled": ariaDisabled, ref, slot: ignoredSlotProp, ariaSlot: slot, unstyled, isReadOnly, elementType, ...restProps } = props;
|
|
@@ -48,22 +50,7 @@ var Button = flowComponent("Button", (props) => {
|
|
|
48
50
|
* carries the marker. An explicit `Text` child is matched by `:has(.text)`.
|
|
49
51
|
*/
|
|
50
52
|
const hasText = containsTextChild(children);
|
|
51
|
-
const rootClassName = unstyled ? className : clsx(
|
|
52
|
-
Button_module_default.button,
|
|
53
|
-
isPending && Button_module_default.isPending,
|
|
54
|
-
isSucceeded && Button_module_default.isSucceeded,
|
|
55
|
-
isFailed && Button_module_default.isFailed,
|
|
56
|
-
size === "s" && Button_module_default["size-s"],
|
|
57
|
-
Button_module_default[color],
|
|
58
|
-
Button_module_default[variant],
|
|
59
|
-
/**
|
|
60
|
-
* Workaround warning: The Aria.Button does not support "aria-disabled"
|
|
61
|
-
* by now, so this Button will be visually disabled via CSS.
|
|
62
|
-
*/
|
|
63
|
-
ariaDisabled && Button_module_default.ariaDisabled,
|
|
64
|
-
hasText && Button_module_default.hasText,
|
|
65
|
-
className
|
|
66
|
-
);
|
|
53
|
+
const rootClassName = unstyled ? className : clsx(Button_module_default.button, isPending && Button_module_default.isPending, isSucceeded && Button_module_default.isSucceeded, isFailed && Button_module_default.isFailed, size === "s" && Button_module_default["size-s"], Button_module_default[color], Button_module_default[variant], ariaDisabled && Button_module_default.ariaDisabled, hasText && Button_module_default.hasText, className);
|
|
67
54
|
useAriaAnnounceActionState(isPending ? "isPending" : isSucceeded ? "isSucceeded" : isFailed ? "isFailed" : "isIdle");
|
|
68
55
|
const propsContext = {
|
|
69
56
|
Icon: {
|
|
@@ -113,6 +100,7 @@ var Button = flowComponent("Button", (props) => {
|
|
|
113
100
|
slot,
|
|
114
101
|
...isReadOnly === true ? { "data-readonly": true } : {},
|
|
115
102
|
...restProps,
|
|
103
|
+
"aria-disabled": muted || void 0,
|
|
116
104
|
children: content
|
|
117
105
|
});
|
|
118
106
|
});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Button.mjs","names":[],"sources":["../../../../../../../src/components/Button/Button.tsx"],"sourcesContent":["import type { PropsWithChildren } from \"react\";\nimport styles from \"./Button.module.scss\";\nimport * as Aria from \"react-aria-components\";\nimport clsx from \"clsx\";\nimport type { PropsContext } from \"@/lib/propsContext\";\nimport { PropsContextProvider } from \"@/lib/propsContext\";\nimport { IconFailed, IconSucceeded } from \"@/components/Icon/components/icons\";\nimport { Wrap } from \"@/components/Wrap\";\nimport type { FlowComponentProps } from \"@/lib/componentFactory/flowComponent\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\nimport LoadingSpinner from \"@/components/LoadingSpinner/LoadingSpinner\";\nimport { useAriaAnnounceActionState } from \"@/components/Action/lib/ariaLive\";\nimport { containsTextChild } from \"@/lib/react/remote\";\nimport type { AlphaColor } from \"@/lib/types/props\";\nimport { filterDOMProps } from \"@react-aria/utils\";\nimport { useWarnDeprecation } from \"@/components/DeprecationWarningProvider\";\n\nexport interface ButtonProps\n extends\n PropsWithChildren<Aria.ButtonProps>,\n FlowComponentProps<HTMLButtonElement> {\n /** Slot for button placement in action groups. */\n slot?: string;\n /**\n * The color of the button.\n *\n * @default \"primary\"\n * @deprecatedValues accent\n */\n color?:\n \"primary\" | \"success\" | \"secondary\" | \"danger\" | AlphaColor | \"accent\";\n /** The visual variant of the button. @default \"solid\" */\n variant?: \"plain\" | \"solid\" | \"soft\" | \"outline\";\n /** The size of the button. @default \"m\" */\n size?: \"m\" | \"s\";\n /** Disables button but keeps it focusable. */\n \"aria-disabled\"?: boolean;\n /** Whether the button is in a pending state. */\n isPending?: boolean;\n /** Whether the button is in a succeeded state. */\n isSucceeded?: boolean;\n /** Whether the button is in a failed state. */\n isFailed?: boolean;\n /** Whether the button is in a read only state. */\n isReadOnly?: boolean;\n /** @internal */\n unstyled?: boolean;\n /** @internal */\n ariaSlot?: string | null;\n /** @internal */\n elementType?: \"button\" | \"span\";\n}\n\nconst
|
|
1
|
+
{"version":3,"file":"Button.mjs","names":[],"sources":["../../../../../../../src/components/Button/Button.tsx"],"sourcesContent":["import type { PropsWithChildren } from \"react\";\nimport styles from \"./Button.module.scss\";\nimport * as Aria from \"react-aria-components\";\nimport clsx from \"clsx\";\nimport type { PropsContext } from \"@/lib/propsContext\";\nimport { PropsContextProvider } from \"@/lib/propsContext\";\nimport { IconFailed, IconSucceeded } from \"@/components/Icon/components/icons\";\nimport { Wrap } from \"@/components/Wrap\";\nimport type { FlowComponentProps } from \"@/lib/componentFactory/flowComponent\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\nimport LoadingSpinner from \"@/components/LoadingSpinner/LoadingSpinner\";\nimport { useAriaAnnounceActionState } from \"@/components/Action/lib/ariaLive\";\nimport { containsTextChild } from \"@/lib/react/remote\";\nimport type { AlphaColor } from \"@/lib/types/props\";\nimport { filterDOMProps } from \"@react-aria/utils\";\nimport { useWarnDeprecation } from \"@/components/DeprecationWarningProvider\";\n\nexport interface ButtonProps\n extends\n PropsWithChildren<Aria.ButtonProps>,\n FlowComponentProps<HTMLButtonElement> {\n /** Slot for button placement in action groups. */\n slot?: string;\n /**\n * The color of the button.\n *\n * @default \"primary\"\n * @deprecatedValues accent\n */\n color?:\n \"primary\" | \"success\" | \"secondary\" | \"danger\" | AlphaColor | \"accent\";\n /** The visual variant of the button. @default \"solid\" */\n variant?: \"plain\" | \"solid\" | \"soft\" | \"outline\";\n /** The size of the button. @default \"m\" */\n size?: \"m\" | \"s\";\n /** Disables button but keeps it focusable. */\n \"aria-disabled\"?: boolean;\n /** Whether the button is in a pending state. */\n isPending?: boolean;\n /** Whether the button is in a succeeded state. */\n isSucceeded?: boolean;\n /** Whether the button is in a failed state. */\n isFailed?: boolean;\n /** Whether the button is in a read only state. */\n isReadOnly?: boolean;\n /** @internal */\n unstyled?: boolean;\n /** @internal */\n ariaSlot?: string | null;\n /** @internal */\n elementType?: \"button\" | \"span\";\n}\n\nconst isMuted = (props: ButtonProps) =>\n !!(\n props.isPending ||\n props.isSucceeded ||\n props.isFailed ||\n props[\"aria-disabled\"] ||\n props.isReadOnly\n );\n\nconst disablePendingProps = (props: ButtonProps) => {\n if (isMuted(props)) {\n props = { ...props };\n\n const mutedActionHandler = (e: unknown) => {\n if (e && typeof e === \"object\") {\n // stopPropagation is the default behavior in React Aria\n const isReactAriaEvent =\n \"continuePropagation\" in e &&\n typeof e.continuePropagation === \"function\";\n\n if (\n !isReactAriaEvent &&\n \"stopPropagation\" in e &&\n typeof e.stopPropagation === \"function\"\n ) {\n e.stopPropagation();\n }\n if (\"preventDefault\" in e && typeof e.preventDefault === \"function\") {\n e.preventDefault();\n }\n }\n\n return false;\n };\n\n props.onClick = mutedActionHandler;\n props.onPress = mutedActionHandler;\n props.onPressStart = mutedActionHandler;\n props.onPressEnd = mutedActionHandler;\n props.onPressChange = mutedActionHandler;\n props.onPressUp = mutedActionHandler;\n props.onKeyDown = mutedActionHandler;\n props.onKeyUp = mutedActionHandler;\n }\n\n return props;\n};\n\n/** @flr-generate all */\nexport const Button = flowComponent(\"Button\", (props) => {\n const muted = isMuted(props);\n props = disablePendingProps(props);\n\n const warnDeprecation = useWarnDeprecation();\n\n const {\n color: colorFromProps = \"primary\",\n variant = \"solid\",\n children,\n className,\n size = \"m\",\n isPending,\n isSucceeded,\n isFailed,\n \"aria-disabled\": ariaDisabled,\n ref,\n slot: ignoredSlotProp,\n ariaSlot: slot,\n unstyled,\n isReadOnly,\n elementType,\n ...restProps\n } = props;\n\n if (colorFromProps === \"accent\") {\n warnDeprecation(\n \"The color 'accent' is deprecated and will be removed in a future release. Use 'success' instead.\",\n );\n }\n\n const color = colorFromProps === \"accent\" ? \"success\" : colorFromProps;\n\n /**\n * A string child renders no element the CSS could match, so the button itself\n * carries the marker. An explicit `Text` child is matched by `:has(.text)`.\n */\n const hasText = containsTextChild(children);\n\n const rootClassName = unstyled\n ? className\n : clsx(\n styles.button,\n isPending && styles.isPending,\n isSucceeded && styles.isSucceeded,\n isFailed && styles.isFailed,\n size === \"s\" && styles[\"size-s\"],\n styles[color],\n styles[variant],\n ariaDisabled && styles.ariaDisabled,\n hasText && styles.hasText,\n className,\n );\n\n useAriaAnnounceActionState(\n isPending\n ? \"isPending\"\n : isSucceeded\n ? \"isSucceeded\"\n : isFailed\n ? \"isFailed\"\n : \"isIdle\",\n );\n\n const propsContext: PropsContext = {\n Icon: {\n className: styles.icon,\n \"aria-hidden\": true,\n size,\n },\n Text: {\n className: styles.text,\n },\n Avatar: {\n className: styles.avatar,\n },\n CounterBadge: {\n className: styles.counterBadge,\n },\n Image: {\n className: styles.image,\n },\n };\n\n const stateIcon = isSucceeded ? (\n <IconSucceeded size={size} className={styles.stateIcon} color=\"success\" />\n ) : isFailed ? (\n <IconFailed size={size} className={styles.stateIcon} color=\"danger\" />\n ) : isPending ? (\n <LoadingSpinner size={size} className={styles.stateIcon} />\n ) : undefined;\n\n const content = (\n <>\n <PropsContextProvider props={propsContext}>\n <Wrap if={!unstyled}>\n <span className={styles.content}>{children}</span>\n </Wrap>\n </PropsContextProvider>\n {stateIcon}\n </>\n );\n\n if (elementType === \"span\") {\n const spanProps = filterDOMProps(restProps, { global: true });\n\n return (\n <span\n {...spanProps}\n data-disabled={restProps.isDisabled || undefined}\n className={\n typeof rootClassName === \"string\" ? rootClassName : undefined\n }\n >\n {content}\n </span>\n );\n }\n\n return (\n <Aria.Button\n className={rootClassName}\n ref={ref}\n slot={slot}\n {...(isReadOnly === true ? { \"data-readonly\": true } : {})}\n {...restProps}\n aria-disabled={muted || undefined}\n >\n {content}\n </Aria.Button>\n );\n});\n\nexport default Button;\n"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Button.module.mjs","names":[],"sources":["../../../../../../../src/components/Button/Button.module.scss"],"sourcesContent":["@use \"@/styles/mixins/ellipsis\";\n@use \"@/styles/mixins/focus\";\n@use \"@/styles/mixins/avatarButton\";\n\n.button {\n position: relative;\n font-family: Inter, sans-serif;\n font-size: var(--font-size-text--m);\n font-weight: bold;\n line-height: var(--line-height);\n border: none;\n border-radius: var(--button--corner-radius);\n padding-block: var(--button--padding-y);\n padding-inline: var(--button--padding-x);\n transition-property: color, background-color, transform;\n transition-duration:\n var(--transition--duration--default), var(--transition--duration--default),\n var(--transition--duration--fast);\n transition-timing-function: ease, ease, ease-out;\n max-width: 100%;\n display: grid;\n align-items: center;\n grid-template-areas: \"content\";\n width: fit-content;\n\n &:where(.outline) {\n border-width: var(--button--border-width);\n border-style: var(--button--border-style);\n padding-block: calc(var(--button--padding-y) - var(--button--border-width));\n padding-inline: calc(\n var(--button--padding-x) - var(--button--border-width)\n );\n }\n\n @include focus.focus;\n\n @extend .primary;\n @extend .solid;\n\n /* Elements */\n .content {\n display: flex;\n column-gap: var(--button--spacing);\n align-items: center;\n justify-content: center;\n text-align: start;\n text-wrap-style: pretty;\n\n /* Fade the label out when a state icon (pending/success/fail) takes over. */\n transition-property: opacity;\n transition-duration: var(--transition--duration--fast);\n }\n\n .content,\n .stateIcon {\n grid-area: content;\n }\n\n .stateIcon {\n justify-self: center;\n }\n\n &:where(:has(.icon):not(:has(.text), .hasText)) {\n padding: var(--button--padding-icon-only);\n\n &:where(.outline) {\n padding: calc(\n var(--button--padding-icon-only) - var(--button--border-width)\n );\n }\n }\n\n .counterBadge {\n position: absolute;\n top: calc(var(--size-px--xxs) * -1);\n inset-inline-end: calc(var(--size-px--xxs) * -1);\n }\n\n /* States */\n\n /* Subtle tactile press feedback: a slight inward scale while pressed.\n Overlay triggers
|
|
1
|
+
{"version":3,"file":"Button.module.mjs","names":[],"sources":["../../../../../../../src/components/Button/Button.module.scss"],"sourcesContent":["@use \"@/styles/mixins/ellipsis\";\n@use \"@/styles/mixins/focus\";\n@use \"@/styles/mixins/avatarButton\";\n\n.button {\n position: relative;\n font-family: Inter, sans-serif;\n font-size: var(--font-size-text--m);\n font-weight: bold;\n line-height: var(--line-height);\n border: none;\n border-radius: var(--button--corner-radius);\n padding-block: var(--button--padding-y);\n padding-inline: var(--button--padding-x);\n transition-property: color, background-color, transform;\n transition-duration:\n var(--transition--duration--default), var(--transition--duration--default),\n var(--transition--duration--fast);\n transition-timing-function: ease, ease, ease-out;\n max-width: 100%;\n display: grid;\n align-items: center;\n grid-template-areas: \"content\";\n width: fit-content;\n\n &:where(.outline) {\n border-width: var(--button--border-width);\n border-style: var(--button--border-style);\n padding-block: calc(var(--button--padding-y) - var(--button--border-width));\n padding-inline: calc(\n var(--button--padding-x) - var(--button--border-width)\n );\n }\n\n @include focus.focus;\n\n @extend .primary;\n @extend .solid;\n\n /* Elements */\n .content {\n display: flex;\n column-gap: var(--button--spacing);\n align-items: center;\n justify-content: center;\n text-align: start;\n text-wrap-style: pretty;\n\n /* Fade the label out when a state icon (pending/success/fail) takes over. */\n transition-property: opacity;\n transition-duration: var(--transition--duration--fast);\n }\n\n .content,\n .stateIcon {\n grid-area: content;\n }\n\n .stateIcon {\n justify-self: center;\n }\n\n &:where(:has(.icon):not(:has(.text), .hasText)) {\n padding: var(--button--padding-icon-only);\n\n &:where(.outline) {\n padding: calc(\n var(--button--padding-icon-only) - var(--button--border-width)\n );\n }\n }\n\n .counterBadge {\n position: absolute;\n top: calc(var(--size-px--xxs) * -1);\n inset-inline-end: calc(var(--size-px--xxs) * -1);\n }\n\n /* States */\n\n /* Subtle tactile press feedback: a slight inward scale while pressed.\n A muted button ignores the press, so it does not scale. Overlay triggers\n keep data-pressed while their overlay is open, so an expanded trigger is\n excluded. */\n &[data-pressed]:where(\n :not([data-readonly], [aria-disabled=\"true\"], [aria-expanded=\"true\"])\n ) {\n transform: scale(0.97);\n }\n\n &.isPending,\n &.isFailed,\n &.isSucceeded {\n .content {\n opacity: 0;\n }\n }\n\n &.isPending {\n .stateIcon {\n color: var(--button--pending-icon-color);\n }\n }\n\n /* Success/failure icon pops in when it replaces the label. The pending\n spinner is left alone — it has its own animation. */\n &.isSucceeded,\n &.isFailed {\n .stateIcon {\n animation: state-icon-pop var(--transition--duration--default)\n cubic-bezier(0.34, 1.35, 0.5, 1);\n }\n }\n\n /* Size */\n\n &:where(.size-s) {\n font-size: var(--button--font-size-s);\n line-height: var(--button--line-height-s);\n padding-block: var(--button--padding-s-y);\n padding-inline: var(--button--padding-s-x);\n column-gap: var(--button--spacing-s);\n border-radius: var(--button--corner-radius-s);\n\n &:where(.outline) {\n padding-block: calc(\n var(--button--padding-s-y) - var(--button--border-width)\n );\n padding-inline: calc(\n var(--button--padding-s-x) - var(--button--border-width)\n );\n }\n\n &:where(:has(.icon):not(:has(.text), .hasText)) {\n padding: var(--button--padding-s-icon-only);\n\n &:where(.outline) {\n padding: calc(\n var(--button--padding-s-icon-only) - var(--button--border-width)\n );\n }\n }\n\n .content {\n column-gap: var(--button--spacing-s);\n }\n }\n\n /* Variants */\n\n @mixin variant($color, $variant) {\n &:where(.#{$color}.#{$variant}) {\n background-color: var(\n --button--#{$color}-#{$variant}-background-color--default\n );\n color: var(--button--#{$color}-#{$variant}-content-color--default);\n\n &:hover:where(:not([data-readonly])) {\n background-color: var(\n --button--#{$color}-#{$variant}-background-color--hover\n );\n }\n\n &[data-pressed]:where(:not([data-readonly])) {\n background-color: var(\n --button--#{$color}-#{$variant}-background-color--pressed\n );\n }\n\n &[disabled],\n &[data-disabled],\n &.ariaDisabled,\n &.isPending,\n &.isFailed,\n &.isSucceeded {\n background-color: var(\n --button--#{$color}-#{$variant}-background-color--disabled\n );\n color: var(--button--#{$color}-#{$variant}-content-color--disabled);\n }\n }\n }\n\n @include variant(primary, solid);\n @include variant(success, solid);\n @include variant(danger, solid);\n @include variant(secondary, solid);\n @include variant(dark, solid);\n @include variant(light, solid);\n @include variant(dark-static, solid);\n @include variant(light-static, solid);\n @include variant(primary, plain);\n @include variant(success, plain);\n @include variant(danger, plain);\n @include variant(secondary, plain);\n @include variant(dark, plain);\n @include variant(light, plain);\n @include variant(dark-static, plain);\n @include variant(light-static, plain);\n @include variant(primary, soft);\n @include variant(success, soft);\n @include variant(danger, soft);\n @include variant(secondary, soft);\n @include variant(dark, soft);\n @include variant(light, soft);\n @include variant(dark-static, soft);\n @include variant(light-static, soft);\n @include variant(primary, outline);\n @include variant(success, outline);\n @include variant(danger, outline);\n @include variant(secondary, outline);\n @include variant(dark, outline);\n @include variant(light, outline);\n @include variant(dark-static, outline);\n @include variant(light-static, outline);\n\n /* Outline */\n\n @mixin outline($color, $variant) {\n &:where(.#{$color}.#{$variant}) {\n &.outline {\n border-color: var(\n --button--#{$color}-#{$variant}-border-color--default\n );\n\n &[disabled],\n &[data-disabled],\n &.ariaDisabled,\n &.isPending,\n &.isFailed {\n border-color: var(\n --button--#{$color}-#{$variant}-border-color--disabled\n );\n }\n }\n }\n }\n\n @include outline(primary, outline);\n @include outline(success, outline);\n @include outline(danger, outline);\n @include outline(secondary, outline);\n @include outline(dark, outline);\n @include outline(light, outline);\n @include outline(dark-static, outline);\n @include outline(light-static, outline);\n @include avatarButton.avatarButton();\n\n &:has(.image) {\n padding: 0;\n background: none;\n height: fit-content;\n\n &:hover:where(:not([data-readonly])) .image {\n background: var(--button--dark-plain-background-color--hover);\n filter: brightness(var(--image-button--brightness--hover));\n }\n\n &[data-pressed]:where(:not([data-readonly])) .image {\n background: var(--button--dark-plain-background-color--pressed);\n filter: brightness(var(--image-button--brightness--pressed));\n }\n\n .image {\n width: 100%;\n }\n }\n}\n\n@keyframes state-icon-pop {\n from {\n transform: scale(0.6);\n opacity: 0;\n }\n\n to {\n transform: scale(1);\n opacity: 1;\n }\n}\n"],"mappings":""}
|
package/dist/js/packages/components/src/components/CartesianChart/components/YAxis/YAxis.mjs
CHANGED
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
"use client"
|
|
2
2
|
/* */
|
|
3
3
|
import { useDesignTokens } from "../../../../lib/theming/hooks/useDesignTokens.mjs";
|
|
4
|
+
import { useCartesianChartContext } from "../../context.mjs";
|
|
4
5
|
import { TypedYAxis } from "./types.mjs";
|
|
5
6
|
import { jsx } from "react/jsx-runtime";
|
|
6
7
|
import * as Recharts from "recharts";
|
|
@@ -16,13 +17,16 @@ import * as Recharts from "recharts";
|
|
|
16
17
|
* @flr-ignore-props tickFormatter
|
|
17
18
|
*/
|
|
18
19
|
var YAxis = (props) => {
|
|
19
|
-
const { domain, type = "auto", ...rest } = props;
|
|
20
|
+
const { domain, type = "auto", width, ...rest } = props;
|
|
20
21
|
const tokens = useDesignTokens();
|
|
22
|
+
const { layout } = useCartesianChartContext();
|
|
23
|
+
const isCategoryAxis = type === "category" || type === "auto" && layout === "vertical";
|
|
21
24
|
return /* @__PURE__ */ jsx(Recharts.YAxis, {
|
|
22
25
|
...rest,
|
|
23
26
|
allowDataOverflow: true,
|
|
24
27
|
domain,
|
|
25
28
|
type,
|
|
29
|
+
width: width ?? (isCategoryAxis ? "auto" : void 0),
|
|
26
30
|
fontSize: tokens.axis["font-size"].value,
|
|
27
31
|
tick: { fill: tokens.axis["color"].value },
|
|
28
32
|
tickMargin: parseInt(tokens.axis.spacing.value),
|
package/dist/js/packages/components/src/components/CartesianChart/components/YAxis/YAxis.mjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"YAxis.mjs","names":[],"sources":["../../../../../../../../../src/components/CartesianChart/components/YAxis/YAxis.tsx"],"sourcesContent":["import type { FC } from \"react\";\nimport * as Recharts from \"recharts\";\nimport type {\n ChartDataValue,\n DataKey,\n DataKeyValue,\n} from \"@/components/CartesianChart/types\";\nimport { useDesignTokens } from \"@/lib/theming\";\n\nexport type YAxisProps<\n TData extends ChartDataValue = ChartDataValue,\n TDataKey extends DataKey<TData> = DataKey<TData>,\n TDataMatch = DataKeyValue<TData, TDataKey>,\n> = Pick<\n Recharts.YAxisProps,\n | \"className\"\n | \"orientation\"\n | \"allowDecimals\"\n | \"interval\"\n | \"minTickGap\"\n | \"scale\"\n | \"type\"\n | \"domain\"\n | \"hide\"\n | \"unit\"\n> & {\n dataKey?: TDataKey;\n tickFormatter?: (value: TDataMatch, index: number) => string;\n};\n\n/**\n * `tickFormatter` is deliberately not part of the remote surface. A function\n * property crosses the boundary as a thread proxy whose call returns a Promise,\n * and recharts concatenates the formatter's result straight into the tick label\n * — so remotely every tick rendered `[object Promise]`. Dropping it from the\n * remote surface leaves the raw value there; the prop keeps working locally.\n *\n * @flr-generate all\n * @flr-ignore-props tickFormatter\n */\nexport const YAxis: FC<YAxisProps> = (props) => {\n const { domain, type = \"auto\", ...rest } = props;\n\n const tokens = useDesignTokens();\n\n return (\n <Recharts.YAxis\n {...rest}\n allowDataOverflow\n domain={domain}\n type={type}\n fontSize={tokens.axis[\"font-size\"].value}\n tick={{\n fill: tokens.axis[\"color\"].value,\n }}\n tickMargin={parseInt(tokens.axis.spacing.value)}\n tickSize={parseInt(tokens.axis[\"tick-size\"].value)}\n />\n );\n};\n\nexport { TypedYAxis } from \"./types\";\n\nexport default YAxis;\n"],"mappings":"
|
|
1
|
+
{"version":3,"file":"YAxis.mjs","names":[],"sources":["../../../../../../../../../src/components/CartesianChart/components/YAxis/YAxis.tsx"],"sourcesContent":["import type { FC } from \"react\";\nimport * as Recharts from \"recharts\";\nimport type {\n ChartDataValue,\n DataKey,\n DataKeyValue,\n} from \"@/components/CartesianChart/types\";\nimport { useCartesianChartContext } from \"@/components/CartesianChart/context\";\nimport { useDesignTokens } from \"@/lib/theming\";\n\nexport type YAxisProps<\n TData extends ChartDataValue = ChartDataValue,\n TDataKey extends DataKey<TData> = DataKey<TData>,\n TDataMatch = DataKeyValue<TData, TDataKey>,\n> = Pick<\n Recharts.YAxisProps,\n | \"className\"\n | \"orientation\"\n | \"allowDecimals\"\n | \"interval\"\n | \"minTickGap\"\n | \"scale\"\n | \"type\"\n | \"domain\"\n | \"hide\"\n | \"unit\"\n> & {\n dataKey?: TDataKey;\n tickFormatter?: (value: TDataMatch, index: number) => string;\n /**\n * The width of the axis in pixels. `\"auto\"` sizes the axis to its widest tick\n * label. Defaults to `\"auto\"` for a category axis (e.g. with `layout` set to\n * `\"vertical\"`) and to `60` otherwise. Pin a number to align the plot areas\n * of synchronized charts.\n */\n width?: number | \"auto\";\n};\n\n/**\n * `tickFormatter` is deliberately not part of the remote surface. A function\n * property crosses the boundary as a thread proxy whose call returns a Promise,\n * and recharts concatenates the formatter's result straight into the tick label\n * — so remotely every tick rendered `[object Promise]`. Dropping it from the\n * remote surface leaves the raw value there; the prop keeps working locally.\n *\n * @flr-generate all\n * @flr-ignore-props tickFormatter\n */\nexport const YAxis: FC<YAxisProps> = (props) => {\n const { domain, type = \"auto\", width, ...rest } = props;\n\n const tokens = useDesignTokens();\n const { layout } = useCartesianChartContext();\n\n const isCategoryAxis =\n type === \"category\" || (type === \"auto\" && layout === \"vertical\");\n\n return (\n <Recharts.YAxis\n {...rest}\n allowDataOverflow\n domain={domain}\n type={type}\n width={width ?? (isCategoryAxis ? \"auto\" : undefined)}\n fontSize={tokens.axis[\"font-size\"].value}\n tick={{\n fill: tokens.axis[\"color\"].value,\n }}\n tickMargin={parseInt(tokens.axis.spacing.value)}\n tickSize={parseInt(tokens.axis[\"tick-size\"].value)}\n />\n );\n};\n\nexport { TypedYAxis } from \"./types\";\n\nexport default YAxis;\n"],"mappings":";;;;;;;;;;;;;;;;;;AAgDA,IAAa,SAAyB,UAAU;CAC9C,MAAM,EAAE,QAAQ,OAAO,QAAQ,OAAO,GAAG,SAAS;CAElD,MAAM,SAAS,gBAAgB;CAC/B,MAAM,EAAE,WAAW,yBAAyB;CAE5C,MAAM,iBACJ,SAAS,cAAe,SAAS,UAAU,WAAW;CAExD,OACE,oBAAC,SAAS,OAAV;EACE,GAAI;EACJ,mBAAA;EACQ;EACF;EACN,OAAO,UAAU,iBAAiB,SAAS,KAAA;EAC3C,UAAU,OAAO,KAAK,YAAY,CAAC;EACnC,MAAM,EACJ,MAAM,OAAO,KAAK,QAAQ,CAAC,MAC7B;EACA,YAAY,SAAS,OAAO,KAAK,QAAQ,KAAK;EAC9C,UAAU,SAAS,OAAO,KAAK,YAAY,CAAC,KAAK;CAClD,CAAA;AAEL"}
|
|
@@ -15,13 +15,13 @@ import { useObjectRef } from "react-aria";
|
|
|
15
15
|
/** @flr-generate all */
|
|
16
16
|
var Checkbox = flowComponent("Checkbox", (props) => {
|
|
17
17
|
const { children, className, ref, inputClassName, ...rest } = props;
|
|
18
|
-
const { FieldErrorView, FieldErrorCaptureContext, fieldPropsContext,
|
|
18
|
+
const { FieldErrorView, FieldErrorCaptureContext, fieldPropsContext, wrapperProps, controlProps } = useFieldComponent(props, "Checkbox");
|
|
19
19
|
const inputRef = useObjectRef(ref);
|
|
20
20
|
return /* @__PURE__ */ jsxs("div", {
|
|
21
|
-
|
|
22
|
-
className: clsx(Checkbox_module_default.checkbox, className, fieldProps.className),
|
|
21
|
+
className: clsx(Checkbox_module_default.checkbox, className, wrapperProps.className),
|
|
23
22
|
children: [/* @__PURE__ */ jsx(FieldErrorCaptureContext, { children: /* @__PURE__ */ jsx(Aria.Checkbox, {
|
|
24
23
|
...rest,
|
|
24
|
+
"aria-describedby": controlProps["aria-describedby"],
|
|
25
25
|
inputRef,
|
|
26
26
|
className: clsx(inputClassName, Checkbox_module_default.input),
|
|
27
27
|
children: ({ isSelected, isIndeterminate }) => /* @__PURE__ */ jsxs(PropsContextProvider, {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Checkbox.mjs","names":[],"sources":["../../../../../../../src/components/Checkbox/Checkbox.tsx"],"sourcesContent":["import {\n IconCheckboxChecked,\n IconCheckboxEmpty,\n IconCheckboxIndeterminate,\n} from \"@/components/Icon/components/icons\";\nimport type { FlowComponentProps } from \"@/lib/componentFactory/flowComponent\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\nimport clsx from \"clsx\";\nimport type { PropsWithChildren } from \"react\";\nimport * as Aria from \"react-aria-components\";\nimport styles from \"./Checkbox.module.scss\";\nimport { useFieldComponent } from \"@/lib/hooks/useFieldComponent\";\nimport { PropsContextProvider } from \"@/lib/propsContext\";\nimport { useObjectRef } from \"react-aria\";\n\nexport interface CheckboxProps\n extends\n PropsWithChildren<\n Omit<Aria.CheckboxProps, \"children\" | \"ref\" | \"inputRef\">\n >,\n FlowComponentProps<HTMLInputElement> {\n /** The class name of the underlying input element. */\n inputClassName?: string;\n}\n\n/** @flr-generate all */\nexport const Checkbox = flowComponent(\"Checkbox\", (props) => {\n const { children, className, ref, inputClassName, ...rest } = props;\n\n const {\n FieldErrorView,\n FieldErrorCaptureContext,\n fieldPropsContext,\n
|
|
1
|
+
{"version":3,"file":"Checkbox.mjs","names":[],"sources":["../../../../../../../src/components/Checkbox/Checkbox.tsx"],"sourcesContent":["import {\n IconCheckboxChecked,\n IconCheckboxEmpty,\n IconCheckboxIndeterminate,\n} from \"@/components/Icon/components/icons\";\nimport type { FlowComponentProps } from \"@/lib/componentFactory/flowComponent\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\nimport clsx from \"clsx\";\nimport type { PropsWithChildren } from \"react\";\nimport * as Aria from \"react-aria-components\";\nimport styles from \"./Checkbox.module.scss\";\nimport { useFieldComponent } from \"@/lib/hooks/useFieldComponent\";\nimport { PropsContextProvider } from \"@/lib/propsContext\";\nimport { useObjectRef } from \"react-aria\";\n\nexport interface CheckboxProps\n extends\n PropsWithChildren<\n Omit<Aria.CheckboxProps, \"children\" | \"ref\" | \"inputRef\">\n >,\n FlowComponentProps<HTMLInputElement> {\n /** The class name of the underlying input element. */\n inputClassName?: string;\n}\n\n/** @flr-generate all */\nexport const Checkbox = flowComponent(\"Checkbox\", (props) => {\n const { children, className, ref, inputClassName, ...rest } = props;\n\n const {\n FieldErrorView,\n FieldErrorCaptureContext,\n fieldPropsContext,\n wrapperProps,\n controlProps,\n } = useFieldComponent(props, \"Checkbox\");\n\n const inputRef = useObjectRef(ref);\n\n return (\n <div className={clsx(styles.checkbox, className, wrapperProps.className)}>\n <FieldErrorCaptureContext>\n <Aria.Checkbox\n {...rest}\n aria-describedby={controlProps[\"aria-describedby\"]}\n inputRef={inputRef}\n className={clsx(inputClassName, styles.input)}\n >\n {({ isSelected, isIndeterminate }) => (\n <PropsContextProvider props={fieldPropsContext}>\n {isSelected ? (\n <IconCheckboxChecked className={styles.icon} />\n ) : isIndeterminate ? (\n <IconCheckboxIndeterminate className={styles.icon} />\n ) : (\n <IconCheckboxEmpty className={styles.icon} />\n )}\n {children}\n </PropsContextProvider>\n )}\n </Aria.Checkbox>\n </FieldErrorCaptureContext>\n <FieldErrorView />\n </div>\n );\n});\n\nexport default Checkbox;\n"],"mappings":";;;;;;;;;;;;;;;AA0BA,IAAa,WAAW,cAAc,aAAa,UAAU;CAC3D,MAAM,EAAE,UAAU,WAAW,KAAK,gBAAgB,GAAG,SAAS;CAE9D,MAAM,EACJ,gBACA,0BACA,mBACA,cACA,iBACE,kBAAkB,OAAO,UAAU;CAEvC,MAAM,WAAW,aAAa,GAAG;CAEjC,OACE,qBAAC,OAAD;EAAK,WAAW,KAAK,wBAAO,UAAU,WAAW,aAAa,SAAS;EAAvE,UAAA,CACE,oBAAC,0BAAD,EAAA,UACE,oBAAC,KAAK,UAAN;GACE,GAAI;GACJ,oBAAkB,aAAa;GACrB;GACV,WAAW,KAAK,gBAAgB,wBAAO,KAAK;GAE1C,WAAA,EAAE,YAAY,sBACd,qBAAC,sBAAD;IAAsB,OAAO;IAA7B,UAAA,CACG,aACC,oBAAC,qBAAD,EAAqB,WAAW,wBAAO,KAAO,CAAA,IAC5C,kBACF,oBAAC,2BAAD,EAA2B,WAAW,wBAAO,KAAO,CAAA,IAEpD,oBAAC,mBAAD,EAAmB,WAAW,wBAAO,KAAO,CAAA,GAE7C,QACmB;;EAEX,CAAA,EACS,CAAA,GAC1B,oBAAC,gBAAD,CAAiB,CAAA,CACd;;AAET,CAAC"}
|
|
@@ -11,17 +11,17 @@ import { jsx, jsxs } from "react/jsx-runtime";
|
|
|
11
11
|
/** @flr-generate all */
|
|
12
12
|
var CheckboxButton = flowComponent("CheckboxButton", (props) => {
|
|
13
13
|
const { children, className, inputClassName, ...rest } = props;
|
|
14
|
-
const { fieldPropsContext,
|
|
14
|
+
const { fieldPropsContext, wrapperProps, controlProps, FieldErrorView, FieldErrorCaptureContext } = useFieldComponent(props, "CheckboxButton");
|
|
15
15
|
const mergedPropsContext = {
|
|
16
16
|
Text: { className: CheckboxButton_module_default.label },
|
|
17
17
|
Content: { className: CheckboxButton_module_default.content },
|
|
18
18
|
...fieldPropsContext
|
|
19
19
|
};
|
|
20
20
|
return /* @__PURE__ */ jsxs("div", {
|
|
21
|
-
|
|
22
|
-
className: clsx(fieldProps.className, CheckboxButton_module_default.checkboxButton, className),
|
|
21
|
+
className: clsx(wrapperProps.className, CheckboxButton_module_default.checkboxButton, className),
|
|
23
22
|
children: [/* @__PURE__ */ jsx(FieldErrorCaptureContext, { children: /* @__PURE__ */ jsx(Checkbox, {
|
|
24
23
|
...rest,
|
|
24
|
+
"aria-describedby": controlProps["aria-describedby"],
|
|
25
25
|
className: CheckboxButton_module_default.checkbox,
|
|
26
26
|
inputClassName: clsx(inputClassName, CheckboxButton_module_default.input),
|
|
27
27
|
children: /* @__PURE__ */ jsx(PropsContextProvider, {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CheckboxButton.mjs","names":[],"sources":["../../../../../../../src/components/CheckboxButton/CheckboxButton.tsx"],"sourcesContent":["import styles from \"./CheckboxButton.module.scss\";\nimport clsx from \"clsx\";\nimport type { PropsContext } from \"@/lib/propsContext\";\nimport { PropsContextProvider } from \"@/lib/propsContext\";\nimport type { CheckboxProps } from \"@/components/Checkbox\";\nimport { Checkbox } from \"@/components/Checkbox\";\nimport type { FlowComponentProps } from \"@/lib/componentFactory/flowComponent\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\nimport { useFieldComponent } from \"@/lib/hooks/useFieldComponent\";\n\nexport interface CheckboxButtonProps\n extends CheckboxProps, FlowComponentProps<HTMLInputElement> {}\n\n/** @flr-generate all */\nexport const CheckboxButton = flowComponent(\"CheckboxButton\", (props) => {\n const { children, className, inputClassName, ...rest } = props;\n\n const {\n fieldPropsContext,\n
|
|
1
|
+
{"version":3,"file":"CheckboxButton.mjs","names":[],"sources":["../../../../../../../src/components/CheckboxButton/CheckboxButton.tsx"],"sourcesContent":["import styles from \"./CheckboxButton.module.scss\";\nimport clsx from \"clsx\";\nimport type { PropsContext } from \"@/lib/propsContext\";\nimport { PropsContextProvider } from \"@/lib/propsContext\";\nimport type { CheckboxProps } from \"@/components/Checkbox\";\nimport { Checkbox } from \"@/components/Checkbox\";\nimport type { FlowComponentProps } from \"@/lib/componentFactory/flowComponent\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\nimport { useFieldComponent } from \"@/lib/hooks/useFieldComponent\";\n\nexport interface CheckboxButtonProps\n extends CheckboxProps, FlowComponentProps<HTMLInputElement> {}\n\n/** @flr-generate all */\nexport const CheckboxButton = flowComponent(\"CheckboxButton\", (props) => {\n const { children, className, inputClassName, ...rest } = props;\n\n const {\n fieldPropsContext,\n wrapperProps,\n controlProps,\n FieldErrorView,\n FieldErrorCaptureContext,\n } = useFieldComponent(props, \"CheckboxButton\");\n\n const mergedPropsContext: PropsContext = {\n Text: {\n className: styles.label,\n },\n Content: {\n className: styles.content,\n },\n ...fieldPropsContext,\n };\n\n return (\n <div\n className={clsx(wrapperProps.className, styles.checkboxButton, className)}\n >\n <FieldErrorCaptureContext>\n <Checkbox\n {...rest}\n aria-describedby={controlProps[\"aria-describedby\"]}\n className={styles.checkbox}\n inputClassName={clsx(inputClassName, styles.input)}\n >\n <PropsContextProvider props={mergedPropsContext}>\n {children}\n </PropsContextProvider>\n </Checkbox>\n </FieldErrorCaptureContext>\n <FieldErrorView />\n </div>\n );\n});\n\nexport default CheckboxButton;\n"],"mappings":";;;;;;;;;;;AAcA,IAAa,iBAAiB,cAAc,mBAAmB,UAAU;CACvE,MAAM,EAAE,UAAU,WAAW,gBAAgB,GAAG,SAAS;CAEzD,MAAM,EACJ,mBACA,cACA,cACA,gBACA,6BACE,kBAAkB,OAAO,gBAAgB;CAE7C,MAAM,qBAAmC;EACvC,MAAM,EACJ,WAAW,8BAAO,MACpB;EACA,SAAS,EACP,WAAW,8BAAO,QACpB;EACA,GAAG;CACL;CAEA,OACE,qBAAC,OAAD;EACE,WAAW,KAAK,aAAa,WAAW,8BAAO,gBAAgB,SAAS;EAD1E,UAAA,CAGE,oBAAC,0BAAD,EAAA,UACE,oBAAC,UAAD;GACE,GAAI;GACJ,oBAAkB,aAAa;GAC/B,WAAW,8BAAO;GAClB,gBAAgB,KAAK,gBAAgB,8BAAO,KAAK;GAEjD,UAAA,oBAAC,sBAAD;IAAsB,OAAO;IAC1B;GACmB,CAAA;EACd,CAAA,EACc,CAAA,GAC1B,oBAAC,gBAAD,CAAiB,CAAA,CACd;;AAET,CAAC"}
|
|
@@ -15,7 +15,7 @@ import * as Aria from "react-aria-components";
|
|
|
15
15
|
/** @flr-generate all */
|
|
16
16
|
var CheckboxGroup = flowComponent("CheckboxGroup", (props) => {
|
|
17
17
|
const { children, className, isInvalid, s, m, l, ref, ...rest } = props;
|
|
18
|
-
const { FieldErrorView, fieldPropsContext,
|
|
18
|
+
const { FieldErrorView, fieldPropsContext, wrapperProps, controlProps, FieldErrorCaptureContext } = useFieldComponent(props, "CheckboxGroup");
|
|
19
19
|
const propsContext = {
|
|
20
20
|
Checkbox: {
|
|
21
21
|
isInvalid,
|
|
@@ -39,9 +39,9 @@ var CheckboxGroup = flowComponent("CheckboxGroup", (props) => {
|
|
|
39
39
|
useMakeFocusable(objectRef);
|
|
40
40
|
return /* @__PURE__ */ jsxs(Aria.CheckboxGroup, {
|
|
41
41
|
...rest,
|
|
42
|
-
...
|
|
42
|
+
...controlProps,
|
|
43
43
|
isInvalid,
|
|
44
|
-
className: clsx(
|
|
44
|
+
className: clsx(wrapperProps.className, className),
|
|
45
45
|
ref: objectRef,
|
|
46
46
|
children: [/* @__PURE__ */ jsx(FieldErrorCaptureContext, { children: /* @__PURE__ */ jsxs(PropsContextProvider, {
|
|
47
47
|
props: propsContext,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CheckboxGroup.mjs","names":[],"sources":["../../../../../../../src/components/CheckboxGroup/CheckboxGroup.tsx"],"sourcesContent":["import type { ColumnLayoutProps } from \"@/components/ColumnLayout\";\nimport { ColumnLayout } from \"@/components/ColumnLayout\";\nimport type { FlowComponentProps } from \"@/lib/componentFactory/flowComponent\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\nimport type { PropsContext } from \"@/lib/propsContext\";\nimport { PropsContextProvider } from \"@/lib/propsContext\";\nimport clsx from \"clsx\";\nimport type { PropsWithChildren } from \"react\";\nimport * as Aria from \"react-aria-components\";\nimport styles from \"./CheckboxGroup.module.scss\";\nimport { useObjectRef } from \"@react-aria/utils\";\nimport { useMakeFocusable } from \"@/lib/hooks/dom/useMakeFocusable\";\nimport { useFieldComponent } from \"@/lib/hooks/useFieldComponent\";\nimport { UiComponentTunnelExit } from \"@/components/UiComponentTunnel/UiComponentTunnelExit\";\n\nexport interface CheckboxGroupProps\n extends\n PropsWithChildren<Omit<Aria.CheckboxGroupProps, \"children\">>,\n Pick<ColumnLayoutProps, \"s\" | \"m\" | \"l\">,\n FlowComponentProps {}\n\n/** @flr-generate all */\nexport const CheckboxGroup = flowComponent(\"CheckboxGroup\", (props) => {\n const { children, className, isInvalid, s, m, l, ref, ...rest } = props;\n\n const {\n FieldErrorView,\n fieldPropsContext,\n
|
|
1
|
+
{"version":3,"file":"CheckboxGroup.mjs","names":[],"sources":["../../../../../../../src/components/CheckboxGroup/CheckboxGroup.tsx"],"sourcesContent":["import type { ColumnLayoutProps } from \"@/components/ColumnLayout\";\nimport { ColumnLayout } from \"@/components/ColumnLayout\";\nimport type { FlowComponentProps } from \"@/lib/componentFactory/flowComponent\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\nimport type { PropsContext } from \"@/lib/propsContext\";\nimport { PropsContextProvider } from \"@/lib/propsContext\";\nimport clsx from \"clsx\";\nimport type { PropsWithChildren } from \"react\";\nimport * as Aria from \"react-aria-components\";\nimport styles from \"./CheckboxGroup.module.scss\";\nimport { useObjectRef } from \"@react-aria/utils\";\nimport { useMakeFocusable } from \"@/lib/hooks/dom/useMakeFocusable\";\nimport { useFieldComponent } from \"@/lib/hooks/useFieldComponent\";\nimport { UiComponentTunnelExit } from \"@/components/UiComponentTunnel/UiComponentTunnelExit\";\n\nexport interface CheckboxGroupProps\n extends\n PropsWithChildren<Omit<Aria.CheckboxGroupProps, \"children\">>,\n Pick<ColumnLayoutProps, \"s\" | \"m\" | \"l\">,\n FlowComponentProps {}\n\n/** @flr-generate all */\nexport const CheckboxGroup = flowComponent(\"CheckboxGroup\", (props) => {\n const { children, className, isInvalid, s, m, l, ref, ...rest } = props;\n\n const {\n FieldErrorView,\n fieldPropsContext,\n wrapperProps,\n controlProps,\n FieldErrorCaptureContext,\n } = useFieldComponent(props, \"CheckboxGroup\");\n\n const propsContext: PropsContext = {\n Checkbox: {\n isInvalid,\n className: styles.checkbox,\n tunnel: {\n id: \"checkboxes\",\n component: \"CheckboxGroup\",\n },\n },\n CheckboxButton: {\n isInvalid,\n className: styles.checkboxButton,\n tunnel: {\n id: \"checkboxButtons\",\n component: \"CheckboxGroup\",\n },\n },\n ...fieldPropsContext,\n };\n\n const objectRef = useObjectRef(ref);\n useMakeFocusable(objectRef);\n\n return (\n <Aria.CheckboxGroup\n {...rest}\n {...controlProps}\n isInvalid={isInvalid}\n className={clsx(wrapperProps.className, className)}\n ref={objectRef}\n >\n <FieldErrorCaptureContext>\n <PropsContextProvider props={propsContext}>\n {children}\n\n <ColumnLayout s={s} m={m} l={l} className={styles.checkboxGroup}>\n <UiComponentTunnelExit\n id=\"checkboxButtons\"\n component=\"CheckboxGroup\"\n />\n </ColumnLayout>\n\n <ColumnLayout\n s={s ?? [1]}\n m={m ?? [1]}\n l={l ?? [1]}\n rowGap=\"s\"\n className={styles.checkboxGroup}\n >\n <UiComponentTunnelExit id=\"checkboxes\" component=\"CheckboxGroup\" />\n </ColumnLayout>\n </PropsContextProvider>\n </FieldErrorCaptureContext>\n <FieldErrorView />\n </Aria.CheckboxGroup>\n );\n});\n\nexport default CheckboxGroup;\n"],"mappings":";;;;;;;;;;;;;;;AAsBA,IAAa,gBAAgB,cAAc,kBAAkB,UAAU;CACrE,MAAM,EAAE,UAAU,WAAW,WAAW,GAAG,GAAG,GAAG,KAAK,GAAG,SAAS;CAElE,MAAM,EACJ,gBACA,mBACA,cACA,cACA,6BACE,kBAAkB,OAAO,eAAe;CAE5C,MAAM,eAA6B;EACjC,UAAU;GACR;GACA,WAAW,6BAAO;GAClB,QAAQ;IACN,IAAI;IACJ,WAAW;GACb;EACF;EACA,gBAAgB;GACd;GACA,WAAW,6BAAO;GAClB,QAAQ;IACN,IAAI;IACJ,WAAW;GACb;EACF;EACA,GAAG;CACL;CAEA,MAAM,YAAY,aAAa,GAAG;CAClC,iBAAiB,SAAS;CAE1B,OACE,qBAAC,KAAK,eAAN;EACE,GAAI;EACJ,GAAI;EACO;EACX,WAAW,KAAK,aAAa,WAAW,SAAS;EACjD,KAAK;EALP,UAAA,CAOE,oBAAC,0BAAD,EAAA,UACE,qBAAC,sBAAD;GAAsB,OAAO;GAA7B,UAAA;IACG;IAED,oBAAC,cAAD;KAAiB;KAAM;KAAM;KAAG,WAAW,6BAAO;KAChD,UAAA,oBAAC,uBAAD;MACE,IAAG;MACH,WAAU;KACX,CAAA;IACW,CAAA;IAEd,oBAAC,cAAD;KACE,GAAG,KAAK,CAAC,CAAC;KACV,GAAG,KAAK,CAAC,CAAC;KACV,GAAG,KAAK,CAAC,CAAC;KACV,QAAO;KACP,WAAW,6BAAO;KAElB,UAAA,oBAAC,uBAAD;MAAuB,IAAG;MAAa,WAAU;KAAiB,CAAA;IACtD,CAAA;GACM;EACE,CAAA,EAAA,CAAA,GAC1B,oBAAC,gBAAD,CAAiB,CAAA,CACC;;AAExB,CAAC"}
|
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
import { PropsContextProvider } from "../../lib/propsContext/components/PropsContextProvider.mjs";
|
|
4
4
|
import { flowComponent } from "../../lib/componentFactory/flowComponent.mjs";
|
|
5
5
|
import { UiComponentTunnelExit } from "../UiComponentTunnel/UiComponentTunnelExit.mjs";
|
|
6
|
-
import { useFieldComponent } from "../../lib/hooks/useFieldComponent.mjs";
|
|
6
|
+
import { joinIds, useFieldComponent } from "../../lib/hooks/useFieldComponent.mjs";
|
|
7
7
|
import { useMakeFocusable } from "../../lib/hooks/dom/useMakeFocusable.mjs";
|
|
8
8
|
import { useControlledHostValueProps } from "../../lib/remote/useControlledHostValueProps.mjs";
|
|
9
9
|
import CodeEditor_module_default from "./CodeEditor.module.mjs";
|
|
@@ -11,7 +11,7 @@ import { defaultLightTheme } from "./themes/defaultEditorTheme.mjs";
|
|
|
11
11
|
import { useCodeEditorExtensions } from "./hooks/useCodeEditorExtensions.mjs";
|
|
12
12
|
import { CopyButton } from "../CopyButton/CopyButton.mjs";
|
|
13
13
|
import clsx from "clsx";
|
|
14
|
-
import { useId } from "react";
|
|
14
|
+
import { useCallback, useId, useState } from "react";
|
|
15
15
|
import { jsx, jsxs } from "react/jsx-runtime";
|
|
16
16
|
import { useObjectRef } from "react-aria";
|
|
17
17
|
import CodeMirror, { EditorView } from "@uiw/react-codemirror";
|
|
@@ -22,11 +22,25 @@ import CodeMirror, { EditorView } from "@uiw/react-codemirror";
|
|
|
22
22
|
*/
|
|
23
23
|
var CodeEditor = flowComponent("CodeEditor", (props) => {
|
|
24
24
|
const { ref, children, className, language, extensions, isReadOnly, isInvalid, isRequired, validationBehavior: _ignoredValidationBehavior, value, showLineNumbers = true, showCodeFolding = true, showCodeIndentationMakers = true, showLinterMarkers = true, showActiveLineMarker = true, copyable = true, height, minHeight, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, ...rest } = useControlledHostValueProps(props, "");
|
|
25
|
-
const { FieldErrorView, FieldErrorCaptureContext,
|
|
26
|
-
const rootClassName = clsx(
|
|
25
|
+
const { FieldErrorView, FieldErrorCaptureContext, wrapperProps, controlProps, fieldPropsContext } = useFieldComponent(props, "CodeEditor");
|
|
26
|
+
const rootClassName = clsx(wrapperProps.className, CodeEditor_module_default.codeEditor, className);
|
|
27
27
|
const labelId = useId();
|
|
28
28
|
const descriptionId = useId();
|
|
29
29
|
/**
|
|
30
|
+
* Both are optional. Their refs tell whether they are rendered, so the editor
|
|
31
|
+
* never references an element that does not exist – a dangling id fails HTML
|
|
32
|
+
* validators and a11y checks. The callbacks are stable: a new one per render
|
|
33
|
+
* would detach and re-attach on every render.
|
|
34
|
+
*/
|
|
35
|
+
const [hasLabel, setHasLabel] = useState(false);
|
|
36
|
+
const [hasDescription, setHasDescription] = useState(false);
|
|
37
|
+
const labelRef = useCallback((element) => {
|
|
38
|
+
setHasLabel(!!element);
|
|
39
|
+
}, []);
|
|
40
|
+
const descriptionRef = useCallback((element) => {
|
|
41
|
+
setHasDescription(!!element);
|
|
42
|
+
}, []);
|
|
43
|
+
/**
|
|
30
44
|
* The label and the field description are declared as children of the code
|
|
31
45
|
* editor, but must be rendered outside of the editor itself. They are
|
|
32
46
|
* tunneled out of the editor – just like the field error. Their ids are the
|
|
@@ -37,6 +51,7 @@ var CodeEditor = flowComponent("CodeEditor", (props) => {
|
|
|
37
51
|
Label: {
|
|
38
52
|
...fieldPropsContext.Label,
|
|
39
53
|
id: labelId,
|
|
54
|
+
ref: labelRef,
|
|
40
55
|
tunnel: {
|
|
41
56
|
id: "label",
|
|
42
57
|
component: "CodeEditor"
|
|
@@ -45,6 +60,7 @@ var CodeEditor = flowComponent("CodeEditor", (props) => {
|
|
|
45
60
|
FieldDescription: {
|
|
46
61
|
...fieldPropsContext.FieldDescription,
|
|
47
62
|
id: descriptionId,
|
|
63
|
+
ref: descriptionRef,
|
|
48
64
|
tunnel: {
|
|
49
65
|
id: "fieldDescription",
|
|
50
66
|
component: "CodeEditor"
|
|
@@ -62,14 +78,12 @@ var CodeEditor = flowComponent("CodeEditor", (props) => {
|
|
|
62
78
|
* root element the props are applied to. Its ARIA attributes are set through
|
|
63
79
|
* the content attributes facet.
|
|
64
80
|
*
|
|
65
|
-
*
|
|
66
|
-
* `aria-label` names the editor instead – the name computation skips
|
|
67
|
-
* references that point at nothing.
|
|
81
|
+
* Without a label, an `aria-label` names the editor instead.
|
|
68
82
|
*/
|
|
69
|
-
const labelledBy =
|
|
70
|
-
const describedBy =
|
|
83
|
+
const labelledBy = joinIds(ariaLabelledBy, hasLabel && labelId);
|
|
84
|
+
const describedBy = joinIds(hasDescription && descriptionId, controlProps["aria-describedby"]);
|
|
71
85
|
const contentAttributes = EditorView.contentAttributes.of({
|
|
72
|
-
"aria-labelledby": labelledBy,
|
|
86
|
+
...labelledBy ? { "aria-labelledby": labelledBy } : {},
|
|
73
87
|
...ariaLabel ? { "aria-label": ariaLabel } : {},
|
|
74
88
|
...describedBy ? { "aria-describedby": describedBy } : {},
|
|
75
89
|
...isRequired ? { "aria-required": "true" } : {},
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CodeEditor.mjs","names":[],"sources":["../../../../../../../src/components/CodeEditor/CodeEditor.tsx"],"sourcesContent":["import type { ReactCodeMirrorProps } from \"@uiw/react-codemirror\";\nimport CodeMirror, { EditorView } from \"@uiw/react-codemirror\";\nimport { useId } from \"react\";\nimport {\n flowComponent,\n type FlowComponentProps,\n} from \"@/lib/componentFactory/flowComponent\";\nimport { useControlledHostValueProps } from \"@/lib/remote/useControlledHostValueProps\";\nimport { useFieldComponent } from \"@/lib/hooks/useFieldComponent\";\nimport { type PropsContext, PropsContextProvider } from \"@/lib/propsContext\";\nimport clsx from \"clsx\";\nimport styles from \"./CodeEditor.module.scss\";\nimport { type CodeEditorLanguage } from \"@/components/CodeEditor/languages\";\nimport { useMakeFocusable } from \"@/lib/hooks/dom/useMakeFocusable\";\nimport { useObjectRef } from \"react-aria\";\nimport { defaultLightTheme } from \"@/components/CodeEditor/themes/defaultEditorTheme\";\nimport {\n type CodeEditorSetup,\n useCodeEditorExtensions,\n} from \"@/components/CodeEditor/hooks/useCodeEditorExtensions\";\nimport { CopyButton } from \"@/components/CopyButton\";\nimport { UiComponentTunnelExit } from \"@/components/UiComponentTunnel/UiComponentTunnelExit\";\n\nexport interface CodeEditorProps\n extends\n Omit<ReactCodeMirrorProps, \"theme\" | \"lang\" | \"basicSetup\" | \"readOnly\">,\n CodeEditorSetup,\n FlowComponentProps {\n /** The initial code of an uncontrolled editor. */\n defaultValue?: string;\n /**\n * Whether the code can be read but not edited.\n *\n * @default false\n */\n isReadOnly?: boolean;\n /**\n * Whether the editor is displayed as invalid.\n *\n * @default false\n */\n isInvalid?: boolean;\n /** The elements class name. */\n className?: string;\n /** The language the code is highlighted as. */\n language?: CodeEditorLanguage;\n /**\n * Whether a button to copy the code to the clipboard is shown.\n *\n * @default true\n */\n copyable?: boolean;\n /**\n * Whether the field must be filled in. Only marks the editor as required for\n * assistive technology — the editor does not validate itself.\n *\n * @default false\n */\n isRequired?: boolean;\n /**\n * @internal Set by `<Field />` on every form field. The editor has no\n * react-aria validation to forward it to and drops it.\n */\n validationBehavior?: unknown;\n}\n\n/**\n * @flr-generate all\n * @flowStatus new\n */\nexport const CodeEditor = flowComponent(\"CodeEditor\", (props) => {\n const {\n ref,\n children,\n className,\n language,\n extensions,\n isReadOnly,\n isInvalid,\n isRequired,\n validationBehavior: _ignoredValidationBehavior,\n value,\n showLineNumbers = true,\n showCodeFolding = true,\n showCodeIndentationMakers = true,\n showLinterMarkers = true,\n showActiveLineMarker = true,\n copyable = true,\n height,\n minHeight,\n \"aria-label\": ariaLabel,\n \"aria-labelledby\": ariaLabelledBy,\n ...rest\n } = useControlledHostValueProps(props, \"\");\n\n const {\n FieldErrorView,\n FieldErrorCaptureContext,\n
|
|
1
|
+
{"version":3,"file":"CodeEditor.mjs","names":[],"sources":["../../../../../../../src/components/CodeEditor/CodeEditor.tsx"],"sourcesContent":["import type { ReactCodeMirrorProps } from \"@uiw/react-codemirror\";\nimport CodeMirror, { EditorView } from \"@uiw/react-codemirror\";\nimport { useCallback, useId, useState } from \"react\";\nimport {\n flowComponent,\n type FlowComponentProps,\n} from \"@/lib/componentFactory/flowComponent\";\nimport { useControlledHostValueProps } from \"@/lib/remote/useControlledHostValueProps\";\nimport { joinIds, useFieldComponent } from \"@/lib/hooks/useFieldComponent\";\nimport { type PropsContext, PropsContextProvider } from \"@/lib/propsContext\";\nimport clsx from \"clsx\";\nimport styles from \"./CodeEditor.module.scss\";\nimport { type CodeEditorLanguage } from \"@/components/CodeEditor/languages\";\nimport { useMakeFocusable } from \"@/lib/hooks/dom/useMakeFocusable\";\nimport { useObjectRef } from \"react-aria\";\nimport { defaultLightTheme } from \"@/components/CodeEditor/themes/defaultEditorTheme\";\nimport {\n type CodeEditorSetup,\n useCodeEditorExtensions,\n} from \"@/components/CodeEditor/hooks/useCodeEditorExtensions\";\nimport { CopyButton } from \"@/components/CopyButton\";\nimport { UiComponentTunnelExit } from \"@/components/UiComponentTunnel/UiComponentTunnelExit\";\n\nexport interface CodeEditorProps\n extends\n Omit<ReactCodeMirrorProps, \"theme\" | \"lang\" | \"basicSetup\" | \"readOnly\">,\n CodeEditorSetup,\n FlowComponentProps {\n /** The initial code of an uncontrolled editor. */\n defaultValue?: string;\n /**\n * Whether the code can be read but not edited.\n *\n * @default false\n */\n isReadOnly?: boolean;\n /**\n * Whether the editor is displayed as invalid.\n *\n * @default false\n */\n isInvalid?: boolean;\n /** The elements class name. */\n className?: string;\n /** The language the code is highlighted as. */\n language?: CodeEditorLanguage;\n /**\n * Whether a button to copy the code to the clipboard is shown.\n *\n * @default true\n */\n copyable?: boolean;\n /**\n * Whether the field must be filled in. Only marks the editor as required for\n * assistive technology — the editor does not validate itself.\n *\n * @default false\n */\n isRequired?: boolean;\n /**\n * @internal Set by `<Field />` on every form field. The editor has no\n * react-aria validation to forward it to and drops it.\n */\n validationBehavior?: unknown;\n}\n\n/**\n * @flr-generate all\n * @flowStatus new\n */\nexport const CodeEditor = flowComponent(\"CodeEditor\", (props) => {\n const {\n ref,\n children,\n className,\n language,\n extensions,\n isReadOnly,\n isInvalid,\n isRequired,\n validationBehavior: _ignoredValidationBehavior,\n value,\n showLineNumbers = true,\n showCodeFolding = true,\n showCodeIndentationMakers = true,\n showLinterMarkers = true,\n showActiveLineMarker = true,\n copyable = true,\n height,\n minHeight,\n \"aria-label\": ariaLabel,\n \"aria-labelledby\": ariaLabelledBy,\n ...rest\n } = useControlledHostValueProps(props, \"\");\n\n const {\n FieldErrorView,\n FieldErrorCaptureContext,\n wrapperProps,\n controlProps,\n fieldPropsContext,\n } = useFieldComponent(props, \"CodeEditor\");\n\n const rootClassName = clsx(\n wrapperProps.className,\n styles.codeEditor,\n className,\n );\n\n const labelId = useId();\n const descriptionId = useId();\n\n /**\n * Both are optional. Their refs tell whether they are rendered, so the editor\n * never references an element that does not exist – a dangling id fails HTML\n * validators and a11y checks. The callbacks are stable: a new one per render\n * would detach and re-attach on every render.\n */\n const [hasLabel, setHasLabel] = useState(false);\n const [hasDescription, setHasDescription] = useState(false);\n const labelRef = useCallback((element: Element | null) => {\n setHasLabel(!!element);\n }, []);\n const descriptionRef = useCallback((element: Element | null) => {\n setHasDescription(!!element);\n }, []);\n\n /**\n * The label and the field description are declared as children of the code\n * editor, but must be rendered outside of the editor itself. They are\n * tunneled out of the editor – just like the field error. Their ids are the\n * ones the editor references.\n */\n const propsContext: PropsContext = {\n ...fieldPropsContext,\n Label: {\n ...fieldPropsContext.Label,\n id: labelId,\n ref: labelRef,\n tunnel: { id: \"label\", component: \"CodeEditor\" },\n },\n FieldDescription: {\n ...fieldPropsContext.FieldDescription,\n id: descriptionId,\n ref: descriptionRef,\n tunnel: { id: \"fieldDescription\", component: \"CodeEditor\" },\n },\n };\n\n const enabledExtensions = useCodeEditorExtensions(language, extensions, {\n showLineNumbers: showLineNumbers,\n showCodeIndentationMakers: showCodeIndentationMakers,\n showCodeFolding: showCodeFolding,\n showLinterMarkers: showLinterMarkers,\n });\n\n /**\n * The editable element of CodeMirror is the `.cm-content` element – not the\n * root element the props are applied to. Its ARIA attributes are set through\n * the content attributes facet.\n *\n * Without a label, an `aria-label` names the editor instead.\n */\n const labelledBy = joinIds(ariaLabelledBy, hasLabel && labelId);\n const describedBy = joinIds(\n hasDescription && descriptionId,\n controlProps[\"aria-describedby\"],\n );\n\n const contentAttributes = EditorView.contentAttributes.of({\n ...(labelledBy ? { \"aria-labelledby\": labelledBy } : {}),\n ...(ariaLabel ? { \"aria-label\": ariaLabel } : {}),\n ...(describedBy ? { \"aria-describedby\": describedBy } : {}),\n ...(isRequired ? { \"aria-required\": \"true\" } : {}),\n ...(isInvalid ? { \"aria-invalid\": \"true\" } : {}),\n });\n\n const localRef = useObjectRef(ref);\n\n useMakeFocusable(localRef);\n\n return (\n <div className={rootClassName}>\n <PropsContextProvider props={propsContext}>\n <UiComponentTunnelExit id=\"label\" component=\"CodeEditor\" />\n <FieldErrorCaptureContext>\n <CodeMirror\n {...rest}\n value={value}\n basicSetup={{\n highlightActiveLine: showActiveLineMarker,\n highlightActiveLineGutter: showActiveLineMarker,\n autocompletion: false,\n lineNumbers: false,\n foldGutter: false,\n highlightSelectionMatches: false,\n }}\n theme={defaultLightTheme}\n data-invalid={isInvalid || undefined}\n readOnly={isReadOnly}\n className={clsx(styles.codeMirror, isReadOnly && styles.readonly)}\n ref={(codeMirrorRef) => {\n if (codeMirrorRef?.editor) {\n localRef.current = codeMirrorRef.editor;\n }\n }}\n extensions={[...enabledExtensions, contentAttributes]}\n height={height ?? minHeight}\n >\n {copyable && (\n <CopyButton\n className={styles.copyButton}\n size=\"s\"\n variant=\"soft\"\n text={value}\n />\n )}\n {children}\n </CodeMirror>\n </FieldErrorCaptureContext>\n <UiComponentTunnelExit id=\"fieldDescription\" component=\"CodeEditor\" />\n <FieldErrorView />\n </PropsContextProvider>\n </div>\n );\n});\n\nexport default CodeEditor;\n"],"mappings":"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"}
|
|
@@ -20,9 +20,9 @@ import * as Aria from "react-aria-components";
|
|
|
20
20
|
/** @flr-generate all */
|
|
21
21
|
var ComboBox = flowComponent("ComboBox", (props) => {
|
|
22
22
|
const { children, className, menuTrigger = "focus", onChange, onSelectionChange, placeholder, ref, renderEmptyState, ...rest } = props;
|
|
23
|
-
const { FieldErrorView, FieldErrorCaptureContext,
|
|
23
|
+
const { FieldErrorView, FieldErrorCaptureContext, wrapperProps, controlProps, fieldPropsContext } = useFieldComponent(props, "ComboBox");
|
|
24
24
|
const stringFormatter = useLocalizedStringFormatter(__locale_default, "ComboBox");
|
|
25
|
-
const rootClassName = clsx(
|
|
25
|
+
const rootClassName = clsx(wrapperProps.className, ComboBox_module_default.comboBox, className);
|
|
26
26
|
const propsContext = {
|
|
27
27
|
Option: { tunnel: getOptionsTunnelProps("ComboBox") },
|
|
28
28
|
...fieldPropsContext
|
|
@@ -34,10 +34,10 @@ var ComboBox = flowComponent("ComboBox", (props) => {
|
|
|
34
34
|
};
|
|
35
35
|
const controller = useOverlayController("ComboBox", { reuseControllerFromContext: false });
|
|
36
36
|
return /* @__PURE__ */ jsx(Aria.ComboBox, {
|
|
37
|
-
...fieldProps,
|
|
38
37
|
menuTrigger,
|
|
39
38
|
className: rootClassName,
|
|
40
39
|
...rest,
|
|
40
|
+
...controlProps,
|
|
41
41
|
onSelectionChange: handleSelectionChange,
|
|
42
42
|
onOpenChange: (isOpen) => {
|
|
43
43
|
controller.setOpen(isOpen);
|