@mittwald/flow-react-components 1.4.17 → 1.4.18
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/ActionGroup/ActionGroup.mjs.map +1 -1
- package/dist/js/packages/components/src/components/ActionGroup/ActionGroup.module.mjs.map +1 -1
- package/dist/js/packages/components/src/components/Button/Button.mjs.map +1 -1
- package/dist/js/packages/components/src/components/Link/Link.mjs.map +1 -1
- package/dist/types/components/ActionGroup/ActionGroup.d.ts +3 -2
- package/dist/types/components/Button/Button.d.ts +7 -1
- package/dist/types/components/Link/Link.d.ts +5 -1
- package/package.json +9 -9
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ActionGroup.mjs","names":[],"sources":["../../../../../../../src/components/ActionGroup/ActionGroup.tsx"],"sourcesContent":["import type { PropsWithChildren } from \"react\";\nimport styles from \"./ActionGroup.module.scss\";\nimport { styleClassname } from \"@/lib/scss/selectors\";\nimport type { PropsContext } from \"@/lib/propsContext\";\nimport { dynamic, PropsContextProvider } from \"@/lib/propsContext\";\nimport clsx from \"clsx\";\nimport type { FlowComponentProps } from \"@/lib/componentFactory/flowComponent\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\nimport type { PropsWithClassName } from \"@/lib/types/props\";\nimport { ActionStateContextProvider } from \"@/components/Action/models/ActionStateContext\";\nimport { getActionGroupSlot } from \"@/components/ActionGroup/lib/getActionGroupSlot\";\nimport type { ButtonProps } from \"@/components/Button\";\n\nexport interface ActionGroupProps\n extends\n PropsWithChildren,\n FlowComponentProps<HTMLDivElement>,\n PropsWithClassName {\n /** The spacing between the buttons inside the action group. @default \"s\" */\n spacing?: \"s\" | \"m\";\n /** The size of the buttons and links inside the action group. @default \"m\" */\n size?: ButtonProps[\"size\"];\n /**\n * When set, the buttons are not sorted
|
|
1
|
+
{"version":3,"file":"ActionGroup.mjs","names":[],"sources":["../../../../../../../src/components/ActionGroup/ActionGroup.tsx"],"sourcesContent":["import type { PropsWithChildren } from \"react\";\nimport styles from \"./ActionGroup.module.scss\";\nimport { styleClassname } from \"@/lib/scss/selectors\";\nimport type { PropsContext } from \"@/lib/propsContext\";\nimport { dynamic, PropsContextProvider } from \"@/lib/propsContext\";\nimport clsx from \"clsx\";\nimport type { FlowComponentProps } from \"@/lib/componentFactory/flowComponent\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\nimport type { PropsWithClassName } from \"@/lib/types/props\";\nimport { ActionStateContextProvider } from \"@/components/Action/models/ActionStateContext\";\nimport { getActionGroupSlot } from \"@/components/ActionGroup/lib/getActionGroupSlot\";\nimport type { ButtonProps } from \"@/components/Button\";\n\nexport interface ActionGroupProps\n extends\n PropsWithChildren,\n FlowComponentProps<HTMLDivElement>,\n PropsWithClassName {\n /** The spacing between the buttons inside the action group. @default \"s\" */\n spacing?: \"s\" | \"m\";\n /** The size of the buttons and links inside the action group. @default \"m\" */\n size?: ButtonProps[\"size\"];\n /**\n * When set, the buttons are not sorted into the slots `primary`, `secondary`\n * and `abort` but stay in source order. Use it when the actions have no such\n * hierarchy, e.g. a row of equal actions or icon buttons. @default false\n */\n preserveOrder?: boolean;\n}\n\n/** @flr-generate all */\nexport const ActionGroup = flowComponent(\n \"ActionGroup\",\n (props) => {\n const {\n children,\n className,\n ref,\n spacing = \"s\",\n size,\n preserveOrder = false,\n ...rest\n } = props;\n\n const rootClassName = clsx(\n styles.actionGroup,\n styles[spacing],\n !preserveOrder && styles.sorted,\n className,\n );\n\n const propsContext: PropsContext = preserveOrder\n ? {\n Button: { size },\n Switch: {\n labelPosition: \"leading\",\n },\n Link: { size },\n }\n : {\n Button: {\n size,\n slot: dynamic((props) => getActionGroupSlot(props)),\n className: dynamic((props) => {\n const slot = getActionGroupSlot(props);\n return clsx(props.className, styleClassname(styles, slot));\n }),\n },\n Switch: {\n labelPosition: \"leading\",\n className: dynamic((props) => {\n return clsx(\n props.className,\n props.slot && styleClassname(styles, props.slot),\n );\n }),\n },\n Link: {\n size,\n className: dynamic((props) => {\n return clsx(\n props.className,\n props.slot && styleClassname(styles, props.slot),\n );\n }),\n },\n };\n\n return (\n <ActionStateContextProvider>\n <PropsContextProvider\n props={propsContext}\n dependencies={[preserveOrder, size]}\n >\n <div {...rest} className={rootClassName} ref={ref} role=\"group\">\n {children}\n </div>\n </PropsContextProvider>\n </ActionStateContextProvider>\n );\n },\n {\n type: \"layout\",\n },\n);\n\nexport default ActionGroup;\n"],"mappings":";;;;;;;;;;;;;AA+BA,IAAa,cAAc,cACzB,gBACC,UAAU;CACT,MAAM,EACJ,UACA,WACA,KACA,UAAU,KACV,MACA,gBAAgB,OAChB,GAAG,SACD;CAEJ,MAAM,gBAAgB,KACpB,2BAAO,aACP,2BAAO,UACP,CAAC,iBAAiB,2BAAO,QACzB,SACF;CAEA,MAAM,eAA6B,gBAC/B;EACE,QAAQ,EAAE,KAAK;EACf,QAAQ,EACN,eAAe,UACjB;EACA,MAAM,EAAE,KAAK;CACf,IACA;EACE,QAAQ;GACN;GACA,MAAM,SAAS,UAAU,mBAAmB,KAAK,CAAC;GAClD,WAAW,SAAS,UAAU;IAC5B,MAAM,OAAO,mBAAmB,KAAK;IACrC,OAAO,KAAK,MAAM,WAAW,eAAe,4BAAQ,IAAI,CAAC;GAC3D,CAAC;EACH;EACA,QAAQ;GACN,eAAe;GACf,WAAW,SAAS,UAAU;IAC5B,OAAO,KACL,MAAM,WACN,MAAM,QAAQ,eAAe,4BAAQ,MAAM,IAAI,CACjD;GACF,CAAC;EACH;EACA,MAAM;GACJ;GACA,WAAW,SAAS,UAAU;IAC5B,OAAO,KACL,MAAM,WACN,MAAM,QAAQ,eAAe,4BAAQ,MAAM,IAAI,CACjD;GACF,CAAC;EACH;CACF;CAEJ,OACE,oBAAC,4BAAD,EAAA,UACE,oBAAC,sBAAD;EACE,OAAO;EACP,cAAc,CAAC,eAAe,IAAI;EAElC,UAAA,oBAAC,OAAD;GAAK,GAAI;GAAM,WAAW;GAAoB;GAAK,MAAK;GACrD;EACE,CAAA;CACe,CAAA,EACI,CAAA;AAEhC,GACA,EACE,MAAM,SACR,CACF"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ActionGroup.module.mjs","names":[],"sources":["../../../../../../../src/components/ActionGroup/ActionGroup.module.scss"],"sourcesContent":[".actionGroup {\n display: flex;\n align-items: center;\n flex-wrap: wrap;\n\n @mixin spacing($spacing) {\n &.#{$spacing} {\n gap: var(--action-group--spacing--#{$spacing});\n }\n }\n\n @include spacing(s);\n @include spacing(m);\n\n &.sorted {\n justify-content: flex-end;\n flex-grow: 1;\n\n .primary {\n order: 3;\n\n &:only-child {\n margin-inline-start: auto;\n }\n }\n\n .secondary {\n order: 2;\n }\n\n .abort {\n order: 1;\n margin-inline-end: auto;\n }\n }\n}\n"],"mappings":""}
|
|
1
|
+
{"version":3,"file":"ActionGroup.module.mjs","names":[],"sources":["../../../../../../../src/components/ActionGroup/ActionGroup.module.scss"],"sourcesContent":[".actionGroup {\n display: flex;\n align-items: center;\n flex-wrap: wrap;\n\n @mixin spacing($spacing) {\n &.#{$spacing} {\n gap: var(--action-group--spacing--#{$spacing});\n }\n }\n\n @include spacing(s);\n @include spacing(m);\n\n &.sorted {\n justify-content: flex-end;\n flex-grow: 1;\n\n .primary {\n order: 3;\n\n &:only-child {\n margin-inline-start: auto;\n }\n }\n\n .secondary {\n order: 2;\n }\n\n .abort {\n order: 1;\n\n // Only the last abort action pushes the others away, so several abort\n // actions stay together at the start.\n &:not(:has(~ .abort)) {\n margin-inline-end: auto;\n }\n }\n }\n}\n"],"mappings":""}
|
|
@@ -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
|
|
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 /**\n * Slot for button placement in action groups: `primary` (at the end),\n * `secondary` (before the primary action) or `abort` (at the start). Without\n * a slot, an action group places the colors primary, success and danger in\n * `primary` and every other color in `abort`. A secondary-colored button that\n * does not abort therefore needs `slot=\"secondary\"`.\n */\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":"Link.mjs","names":[],"sources":["../../../../../../../src/components/Link/Link.tsx"],"sourcesContent":["import type {\n ComponentProps,\n ComponentType,\n CSSProperties,\n MouseEvent,\n PropsWithChildren,\n} from \"react\";\nimport { useContext } from \"react\";\nimport * as Aria from \"react-aria-components\";\nimport { dynamic, type PropsContext } from \"@/lib/propsContext\";\nimport { PropsContextProvider } from \"@/lib/propsContext\";\nimport styles from \"./Link.module.scss\";\nimport clsx from \"clsx\";\nimport type { FlowComponentProps } from \"@/lib/componentFactory/flowComponent\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\nimport {\n type AlphaColor,\n isAlphaColor,\n type PropsWithClassName,\n} from \"@/lib/types/props\";\nimport { linkContext } from \"@/components/Link/context\";\nimport { LinkIcon } from \"@/components/Link/components/LinkIcon\";\nimport { handleLinkClick, useRouter } from \"@react-aria/utils\";\nimport { UiComponentTunnelExit } from \"@/components/UiComponentTunnel/UiComponentTunnelExit\";\n\nexport interface LinkProps\n extends\n PropsWithChildren<Omit<Aria.LinkProps, \"children\" | \"slot\" | \"className\">>,\n FlowComponentProps<HTMLAnchorElement>,\n PropsWithClassName {\n /** Whether the link should be styled for being displayed inside a text. */\n inline?: boolean;\n /** An alternative link component. */\n linkComponent?: ComponentType<Omit<ComponentProps<\"a\">, \"ref\">>;\n /** The color of the link. @default \"default\" */\n color?: \"default\" | AlphaColor;\n /** Marks the link as the currently active one, e.g. in a navigation. */\n \"aria-current\"?: string;\n
|
|
1
|
+
{"version":3,"file":"Link.mjs","names":[],"sources":["../../../../../../../src/components/Link/Link.tsx"],"sourcesContent":["import type {\n ComponentProps,\n ComponentType,\n CSSProperties,\n MouseEvent,\n PropsWithChildren,\n} from \"react\";\nimport { useContext } from \"react\";\nimport * as Aria from \"react-aria-components\";\nimport { dynamic, type PropsContext } from \"@/lib/propsContext\";\nimport { PropsContextProvider } from \"@/lib/propsContext\";\nimport styles from \"./Link.module.scss\";\nimport clsx from \"clsx\";\nimport type { FlowComponentProps } from \"@/lib/componentFactory/flowComponent\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\nimport {\n type AlphaColor,\n isAlphaColor,\n type PropsWithClassName,\n} from \"@/lib/types/props\";\nimport { linkContext } from \"@/components/Link/context\";\nimport { LinkIcon } from \"@/components/Link/components/LinkIcon\";\nimport { handleLinkClick, useRouter } from \"@react-aria/utils\";\nimport { UiComponentTunnelExit } from \"@/components/UiComponentTunnel/UiComponentTunnelExit\";\n\nexport interface LinkProps\n extends\n PropsWithChildren<Omit<Aria.LinkProps, \"children\" | \"slot\" | \"className\">>,\n FlowComponentProps<HTMLAnchorElement>,\n PropsWithClassName {\n /** Whether the link should be styled for being displayed inside a text. */\n inline?: boolean;\n /** An alternative link component. */\n linkComponent?: ComponentType<Omit<ComponentProps<\"a\">, \"ref\">>;\n /** The color of the link. @default \"default\" */\n color?: \"default\" | AlphaColor;\n /** Marks the link as the currently active one, e.g. in a navigation. */\n \"aria-current\"?: string;\n /**\n * The name of the slot the link is placed in. In action groups: `primary` (at\n * the end), `secondary` (before the primary action) or `abort` (at the\n * start).\n */\n slot?: string;\n /** The whiteSpace css value of the element. */\n whiteSpace?: CSSProperties[\"whiteSpace\"];\n /** The size of the element. @default \"m\" */\n size?: \"s\" | \"m\";\n /** @internal */\n unstyled?: boolean;\n}\n\n/** @flr-generate all */\nexport const Link = flowComponent(\"Link\", (props) => {\n const {\n children,\n className,\n inline,\n linkComponent: linkComponentFromProps,\n color = \"default\",\n unstyled = false,\n \"aria-current\": ariaCurrent,\n ref,\n slot: ignoredSlotProp,\n style,\n whiteSpace,\n size = \"m\",\n onClickCapture: onClickCaptureFromProps,\n target,\n download,\n ...rest\n } = props;\n\n const { linkComponent: linkComponentFromContext } = useContext(linkContext);\n const Link = linkComponentFromProps\n ? (linkComponentFromProps as typeof Aria.Link)\n : props.href && linkComponentFromContext\n ? (linkComponentFromContext as typeof Aria.Link)\n : Aria.Link;\n\n const router = useRouter();\n\n /**\n * An interactive child (e.g. a Button) stops click propagation via React\n * Aria's `usePress`, so the anchor's own `onClick` never runs and navigation\n * falls back to a full page load. Handling it in the capture phase (top-down,\n * before the child) keeps navigation client-side. Only needed for React\n * Aria's `<a>`; custom link components handle navigation themselves.\n */\n const handleClickCapture =\n Link === Aria.Link && props.href\n ? (event: MouseEvent<HTMLAnchorElement>) => {\n onClickCaptureFromProps?.(event);\n if (event.target !== event.currentTarget) {\n handleLinkClick(event, router, props.href, props.routerOptions);\n }\n }\n : onClickCaptureFromProps;\n\n const rootClassName = unstyled\n ? className\n : clsx(\n styles.link,\n inline && styles.inline,\n isAlphaColor(color) && styles[color],\n size === \"s\" && styles[\"size-s\"],\n className,\n );\n\n const propsContext: PropsContext = {\n Icon: {\n tunnel: {\n component: \"Link\",\n id: \"icon\",\n },\n className: styles.icon,\n size: \"s\",\n },\n AlertText: {\n className: styles.alertText,\n },\n AccentBox: { className: styles.accentBox },\n LayoutCard: { className: styles.layoutCard },\n Button: {\n elementType: \"span\",\n className: styles.button,\n size: props.size,\n color: props.color === \"default\" ? undefined : props.color,\n isDisabled: props.isDisabled,\n children: dynamic((buttonProps) => (\n <>\n {buttonProps.children}\n <LinkIcon download={download} target={target} unstyled={unstyled} />\n </>\n )),\n },\n };\n\n const unsupportedTypingsLinkProps = ariaCurrent\n ? ({\n \"aria-current\": true,\n } as Record<string, unknown>)\n : {};\n\n return (\n <Link\n {...unsupportedTypingsLinkProps}\n {...rest}\n target={target}\n download={download}\n onClickCapture={handleClickCapture}\n className={rootClassName}\n ref={ref}\n style={{ ...style, whiteSpace }}\n >\n <PropsContextProvider props={propsContext}>\n {children}\n <LinkIcon\n withZeroWidthJoiner\n unstyled={unstyled}\n target={target}\n download={download}\n >\n <UiComponentTunnelExit id={\"icon\"} component={\"Link\"} />\n </LinkIcon>\n </PropsContextProvider>\n </Link>\n );\n});\n\nexport default Link;\n"],"mappings":";;;;;;;;;;;;;;;;;AAqDA,IAAa,OAAO,cAAc,SAAS,UAAU;CACnD,MAAM,EACJ,UACA,WACA,QACA,eAAe,wBACf,QAAQ,WACR,WAAW,OACX,gBAAgB,aAChB,KACA,MAAM,iBACN,OACA,YACA,OAAO,KACP,gBAAgB,yBAChB,QACA,UACA,GAAG,SACD;CAEJ,MAAM,EAAE,eAAe,6BAA6B,WAAW,WAAW;CAC1E,MAAM,OAAO,yBACR,yBACD,MAAM,QAAQ,2BACX,2BACD,KAAK;CAEX,MAAM,SAAS,UAAU;;;;;;;;CASzB,MAAM,qBACJ,SAAS,KAAK,QAAQ,MAAM,QACvB,UAAyC;EACxC,0BAA0B,KAAK;EAC/B,IAAI,MAAM,WAAW,MAAM,eACzB,gBAAgB,OAAO,QAAQ,MAAM,MAAM,MAAM,aAAa;CAElE,IACA;CAEN,MAAM,gBAAgB,WAClB,YACA,KACE,oBAAO,MACP,UAAU,oBAAO,QACjB,aAAa,KAAK,KAAK,oBAAO,QAC9B,SAAS,OAAO,oBAAO,WACvB,SACF;CAEJ,MAAM,eAA6B;EACjC,MAAM;GACJ,QAAQ;IACN,WAAW;IACX,IAAI;GACN;GACA,WAAW,oBAAO;GAClB,MAAM;EACR;EACA,WAAW,EACT,WAAW,oBAAO,UACpB;EACA,WAAW,EAAE,WAAW,oBAAO,UAAU;EACzC,YAAY,EAAE,WAAW,oBAAO,WAAW;EAC3C,QAAQ;GACN,aAAa;GACb,WAAW,oBAAO;GAClB,MAAM,MAAM;GACZ,OAAO,MAAM,UAAU,YAAY,KAAA,IAAY,MAAM;GACrD,YAAY,MAAM;GAClB,UAAU,SAAS,gBACjB,qBAAA,YAAA,EAAA,UAAA,CACG,YAAY,UACb,oBAAC,UAAD;IAAoB;IAAkB;IAAkB;GAAW,CAAA,CACnE,EAAA,CAAA,CACH;EACH;CACF;CAQA,OACE,oBAAC,MAAD;EACE,GARgC,cAC/B,EACC,gBAAgB,KAClB,IACA,CAAC;EAKD,GAAI;EACI;EACE;EACV,gBAAgB;EAChB,WAAW;EACN;EACL,OAAO;GAAE,GAAG;GAAO;EAAW;EAE9B,UAAA,qBAAC,sBAAD;GAAsB,OAAO;GAA7B,UAAA,CACG,UACD,oBAAC,UAAD;IACE,qBAAA;IACU;IACF;IACE;IAEV,UAAA,oBAAC,uBAAD;KAAuB,IAAI;KAAQ,WAAW;IAAS,CAAA;GAC/C,CAAA,CACU;;CAClB,CAAA;AAEV,CAAC"}
|
|
@@ -8,8 +8,9 @@ export interface ActionGroupProps extends PropsWithChildren, FlowComponentProps<
|
|
|
8
8
|
/** The size of the buttons and links inside the action group. @default "m" */
|
|
9
9
|
size?: ButtonProps["size"];
|
|
10
10
|
/**
|
|
11
|
-
* When set, the buttons are not sorted
|
|
12
|
-
* order.
|
|
11
|
+
* When set, the buttons are not sorted into the slots `primary`, `secondary`
|
|
12
|
+
* and `abort` but stay in source order. Use it when the actions have no such
|
|
13
|
+
* hierarchy, e.g. a row of equal actions or icon buttons. @default false
|
|
13
14
|
*/
|
|
14
15
|
preserveOrder?: boolean;
|
|
15
16
|
}
|
|
@@ -3,7 +3,13 @@ import { FlowComponentProps } from '../../lib/componentFactory/flowComponent';
|
|
|
3
3
|
import { AlphaColor } from '../../lib/types/props';
|
|
4
4
|
import * as Aria from "react-aria-components";
|
|
5
5
|
export interface ButtonProps extends PropsWithChildren<Aria.ButtonProps>, FlowComponentProps<HTMLButtonElement> {
|
|
6
|
-
/**
|
|
6
|
+
/**
|
|
7
|
+
* Slot for button placement in action groups: `primary` (at the end),
|
|
8
|
+
* `secondary` (before the primary action) or `abort` (at the start). Without
|
|
9
|
+
* a slot, an action group places the colors primary, success and danger in
|
|
10
|
+
* `primary` and every other color in `abort`. A secondary-colored button that
|
|
11
|
+
* does not abort therefore needs `slot="secondary"`.
|
|
12
|
+
*/
|
|
7
13
|
slot?: string;
|
|
8
14
|
/**
|
|
9
15
|
* The color of the button.
|
|
@@ -11,7 +11,11 @@ export interface LinkProps extends PropsWithChildren<Omit<Aria.LinkProps, "child
|
|
|
11
11
|
color?: "default" | AlphaColor;
|
|
12
12
|
/** Marks the link as the currently active one, e.g. in a navigation. */
|
|
13
13
|
"aria-current"?: string;
|
|
14
|
-
/**
|
|
14
|
+
/**
|
|
15
|
+
* The name of the slot the link is placed in. In action groups: `primary` (at
|
|
16
|
+
* the end), `secondary` (before the primary action) or `abort` (at the
|
|
17
|
+
* start).
|
|
18
|
+
*/
|
|
15
19
|
slot?: string;
|
|
16
20
|
/** The whiteSpace css value of the element. */
|
|
17
21
|
whiteSpace?: CSSProperties["whiteSpace"];
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@mittwald/flow-react-components",
|
|
3
|
-
"version": "1.4.
|
|
3
|
+
"version": "1.4.18",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"description": "A React implementation of Flow, mittwald’s design system",
|
|
6
6
|
"homepage": "https://flow.mittwald.de",
|
|
@@ -84,9 +84,9 @@
|
|
|
84
84
|
"@internationalized/string-compiler": "^3.4.1",
|
|
85
85
|
"@lezer/common": "^1.5.2",
|
|
86
86
|
"@lezer/highlight": "^1.2.3",
|
|
87
|
-
"@mittwald/flow-icons": "^1.4.
|
|
87
|
+
"@mittwald/flow-icons": "^1.4.18",
|
|
88
88
|
"@mittwald/password-tools-js": "^3.0.0",
|
|
89
|
-
"@mittwald/react-tunnel": "^1.4.
|
|
89
|
+
"@mittwald/react-tunnel": "^1.4.18",
|
|
90
90
|
"@mittwald/react-use-promise": "^4.2.2",
|
|
91
91
|
"@react-aria/form": "^3.2.1",
|
|
92
92
|
"@react-aria/i18n": "^3.13.1",
|
|
@@ -139,12 +139,12 @@
|
|
|
139
139
|
"@internationalized/date": "^3.12.3",
|
|
140
140
|
"@lezer/generator": "^1.8.0",
|
|
141
141
|
"@lezer/lr": "^1.4.10",
|
|
142
|
-
"@mittwald/flow-core": "1.4.
|
|
143
|
-
"@mittwald/flow-design-tokens": "1.4.
|
|
144
|
-
"@mittwald/flow-icons-base": "1.4.
|
|
142
|
+
"@mittwald/flow-core": "1.4.18",
|
|
143
|
+
"@mittwald/flow-design-tokens": "1.4.18",
|
|
144
|
+
"@mittwald/flow-icons-base": "1.4.18",
|
|
145
145
|
"@mittwald/react-use-promise": "^4.2.2",
|
|
146
146
|
"@mittwald/remote-dom-react": "1.2.2-mittwald.10",
|
|
147
|
-
"@mittwald/typescript-config": "1.4.
|
|
147
|
+
"@mittwald/typescript-config": "1.4.18",
|
|
148
148
|
"@nx/storybook": "^22.7.6",
|
|
149
149
|
"@storybook/addon-a11y": "^10.5.10",
|
|
150
150
|
"@storybook/addon-actions": "^9.0.8",
|
|
@@ -196,7 +196,7 @@
|
|
|
196
196
|
},
|
|
197
197
|
"peerDependencies": {
|
|
198
198
|
"@internationalized/date": "^3.12.2",
|
|
199
|
-
"@mittwald/flow-icons-pro": "1.4.
|
|
199
|
+
"@mittwald/flow-icons-pro": "1.4.18",
|
|
200
200
|
"@mittwald/react-use-promise": "^4.2.2",
|
|
201
201
|
"next": "^16.2.3",
|
|
202
202
|
"react": "^19.2.0",
|
|
@@ -220,5 +220,5 @@
|
|
|
220
220
|
"browserslist": [
|
|
221
221
|
"baseline widely available"
|
|
222
222
|
],
|
|
223
|
-
"gitHead": "
|
|
223
|
+
"gitHead": "a22d7bf1327998a16b7bc0e8e2af13eaf38b0ff8"
|
|
224
224
|
}
|