@mittwald/flow-react-components 1.5.0-next.6 → 1.5.0-next.8
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/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/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/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/types/integrations/react-hook-form/components/FormRootError/FormRootError.d.ts +12 -2
- package/package.json +9 -9
|
@@ -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":""}
|
|
@@ -3,17 +3,20 @@
|
|
|
3
3
|
import { useFormContext } from "../FormContextProvider/FormContextProvider.mjs";
|
|
4
4
|
import FieldErrorView from "../../../../views/FieldErrorView.mjs";
|
|
5
5
|
import { useMountedFormRootErrorComponent } from "./useMountedFormRootErrorComponent.mjs";
|
|
6
|
-
import { jsx } from "react/jsx-runtime";
|
|
6
|
+
import { Fragment, jsx } from "react/jsx-runtime";
|
|
7
7
|
//#region src/integrations/react-hook-form/components/FormRootError/FormRootError.tsx
|
|
8
8
|
/** @flowStatus new */
|
|
9
|
-
var FormRootError = () => {
|
|
9
|
+
var FormRootError = (props) => {
|
|
10
|
+
const { children } = props;
|
|
10
11
|
const form = useFormContext().form;
|
|
11
12
|
useMountedFormRootErrorComponent();
|
|
12
13
|
const error = form.formState.errors.root;
|
|
13
|
-
return /* @__PURE__ */ jsx(FieldErrorView, {
|
|
14
|
+
if (children === void 0) return /* @__PURE__ */ jsx(FieldErrorView, {
|
|
14
15
|
renderAlert: true,
|
|
15
16
|
children: error?.message
|
|
16
17
|
});
|
|
18
|
+
if (!error) return null;
|
|
19
|
+
return /* @__PURE__ */ jsx(Fragment, { children: typeof children === "function" ? children(error) : children });
|
|
17
20
|
};
|
|
18
21
|
//#endregion
|
|
19
22
|
export { FormRootError, FormRootError as default };
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FormRootError.mjs","names":[],"sources":["../../../../../../../../../src/integrations/react-hook-form/components/FormRootError/FormRootError.tsx"],"sourcesContent":["import type { FC } from \"react\";\nimport { useFormContext } from \"../FormContextProvider\";\nimport FieldErrorView from \"@/views/FieldErrorView\";\nimport { useMountedFormRootErrorComponent } from \"./useMountedFormRootErrorComponent\";\n\n/** @flowStatus new */\nexport const FormRootError: FC = () => {\n const form = useFormContext().form;\n useMountedFormRootErrorComponent();\n const error = form.formState.errors.root;\n return <FieldErrorView renderAlert>{error?.message}</FieldErrorView>;\n};\n\nexport default FormRootError;\n"],"mappings":";;;;;;;;
|
|
1
|
+
{"version":3,"file":"FormRootError.mjs","names":[],"sources":["../../../../../../../../../src/integrations/react-hook-form/components/FormRootError/FormRootError.tsx"],"sourcesContent":["import type { FC, ReactNode } from \"react\";\nimport type { FieldErrors } from \"react-hook-form\";\nimport { useFormContext } from \"../FormContextProvider\";\nimport FieldErrorView from \"@/views/FieldErrorView\";\nimport { useMountedFormRootErrorComponent } from \"./useMountedFormRootErrorComponent\";\n\nexport type FormRootErrorValue = NonNullable<FieldErrors[\"root\"]>;\n\nexport interface FormRootErrorProps {\n /**\n * Custom content shown instead of the default alert. Rendered only while a\n * root error is set. A function receives the root error, e.g. to pick the\n * content by its `type`.\n */\n children?: ReactNode | ((error: FormRootErrorValue) => ReactNode);\n}\n\n/** @flowStatus new */\nexport const FormRootError: FC<FormRootErrorProps> = (props) => {\n const { children } = props;\n const form = useFormContext().form;\n useMountedFormRootErrorComponent();\n const error = form.formState.errors.root;\n\n if (children === undefined) {\n return <FieldErrorView renderAlert>{error?.message}</FieldErrorView>;\n }\n\n if (!error) {\n return null;\n }\n\n return <>{typeof children === \"function\" ? children(error) : children}</>;\n};\n\nexport default FormRootError;\n"],"mappings":";;;;;;;;AAkBA,IAAa,iBAAyC,UAAU;CAC9D,MAAM,EAAE,aAAa;CACrB,MAAM,OAAO,eAAe,CAAC,CAAC;CAC9B,iCAAiC;CACjC,MAAM,QAAQ,KAAK,UAAU,OAAO;CAEpC,IAAI,aAAa,KAAA,GACf,OAAO,oBAAC,gBAAD;EAAgB,aAAA;EAAa,UAAA,OAAO;CAAwB,CAAA;CAGrE,IAAI,CAAC,OACH,OAAO;CAGT,OAAO,oBAAA,UAAA,EAAA,UAAG,OAAO,aAAa,aAAa,SAAS,KAAK,IAAI,SAAW,CAAA;AAC1E"}
|
|
@@ -1,4 +1,14 @@
|
|
|
1
|
-
import { FC } from 'react';
|
|
1
|
+
import { FC, ReactNode } from 'react';
|
|
2
|
+
import { FieldErrors } from 'react-hook-form';
|
|
3
|
+
export type FormRootErrorValue = NonNullable<FieldErrors["root"]>;
|
|
4
|
+
export interface FormRootErrorProps {
|
|
5
|
+
/**
|
|
6
|
+
* Custom content shown instead of the default alert. Rendered only while a
|
|
7
|
+
* root error is set. A function receives the root error, e.g. to pick the
|
|
8
|
+
* content by its `type`.
|
|
9
|
+
*/
|
|
10
|
+
children?: ReactNode | ((error: FormRootErrorValue) => ReactNode);
|
|
11
|
+
}
|
|
2
12
|
/** @flowStatus new */
|
|
3
|
-
export declare const FormRootError: FC
|
|
13
|
+
export declare const FormRootError: FC<FormRootErrorProps>;
|
|
4
14
|
export default FormRootError;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@mittwald/flow-react-components",
|
|
3
|
-
"version": "1.5.0-next.
|
|
3
|
+
"version": "1.5.0-next.8",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"description": "A React implementation of Flow, mittwald’s design system",
|
|
6
6
|
"homepage": "https://flow.mittwald.de",
|
|
@@ -83,9 +83,9 @@
|
|
|
83
83
|
"@internationalized/string-compiler": "^3.4.1",
|
|
84
84
|
"@lezer/common": "^1.5.2",
|
|
85
85
|
"@lezer/highlight": "^1.2.3",
|
|
86
|
-
"@mittwald/flow-icons": "^1.5.0-next.
|
|
86
|
+
"@mittwald/flow-icons": "^1.5.0-next.8",
|
|
87
87
|
"@mittwald/password-tools-js": "^3.0.0",
|
|
88
|
-
"@mittwald/react-tunnel": "^1.5.0-next.
|
|
88
|
+
"@mittwald/react-tunnel": "^1.5.0-next.8",
|
|
89
89
|
"@mittwald/react-use-promise": "^4.2.2",
|
|
90
90
|
"@react-aria/form": "^3.2.1",
|
|
91
91
|
"@react-aria/i18n": "^3.13.1",
|
|
@@ -138,12 +138,12 @@
|
|
|
138
138
|
"@internationalized/date": "^3.12.3",
|
|
139
139
|
"@lezer/generator": "^1.8.0",
|
|
140
140
|
"@lezer/lr": "^1.4.10",
|
|
141
|
-
"@mittwald/flow-core": "1.5.0-next.
|
|
142
|
-
"@mittwald/flow-design-tokens": "1.5.0-next.
|
|
143
|
-
"@mittwald/flow-icons-base": "1.5.0-next.
|
|
141
|
+
"@mittwald/flow-core": "1.5.0-next.8",
|
|
142
|
+
"@mittwald/flow-design-tokens": "1.5.0-next.8",
|
|
143
|
+
"@mittwald/flow-icons-base": "1.5.0-next.8",
|
|
144
144
|
"@mittwald/react-use-promise": "^4.2.2",
|
|
145
145
|
"@mittwald/remote-dom-react": "1.2.2-mittwald.10",
|
|
146
|
-
"@mittwald/typescript-config": "1.5.0-next.
|
|
146
|
+
"@mittwald/typescript-config": "1.5.0-next.8",
|
|
147
147
|
"@nx/storybook": "^22.7.6",
|
|
148
148
|
"@storybook/addon-a11y": "^10.5.10",
|
|
149
149
|
"@storybook/addon-actions": "^9.0.8",
|
|
@@ -195,7 +195,7 @@
|
|
|
195
195
|
},
|
|
196
196
|
"peerDependencies": {
|
|
197
197
|
"@internationalized/date": "^3.12.2",
|
|
198
|
-
"@mittwald/flow-icons-pro": "1.5.0-next.
|
|
198
|
+
"@mittwald/flow-icons-pro": "1.5.0-next.8",
|
|
199
199
|
"@mittwald/react-use-promise": "^4.2.2",
|
|
200
200
|
"next": "^16.2.3",
|
|
201
201
|
"react": "^19.2.0",
|
|
@@ -219,5 +219,5 @@
|
|
|
219
219
|
"browserslist": [
|
|
220
220
|
"baseline widely available"
|
|
221
221
|
],
|
|
222
|
-
"gitHead": "
|
|
222
|
+
"gitHead": "512563065849610b77b5b2d484ee49ccbbfeae79"
|
|
223
223
|
}
|