@mittwald/flow-react-components 1.5.14 → 1.5.16
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/Markdown/Markdown.mjs +17 -3
- package/dist/js/packages/components/src/components/Markdown/Markdown.mjs.map +1 -1
- package/dist/js/packages/components/src/components/Markdown/lib/isExternalHref.mjs +8 -0
- package/dist/js/packages/components/src/components/Markdown/lib/isExternalHref.mjs.map +1 -0
- package/dist/js/packages/components/src/components/MenuItem/MenuItem.mjs +32 -3
- package/dist/js/packages/components/src/components/MenuItem/MenuItem.mjs.map +1 -1
- package/dist/js/packages/components/src/components/MenuItem/MenuItem.module.mjs +1 -3
- package/dist/js/packages/components/src/components/Navigation/Navigation.module.mjs +1 -3
- package/dist/js/packages/components/src/components/Option/Option.module.mjs +1 -3
- package/dist/types/components/Markdown/lib/isExternalHref.d.ts +1 -0
- package/package.json +10 -10
|
@@ -10,9 +10,10 @@ import { Link } from "../Link/Link.mjs";
|
|
|
10
10
|
import { InlineCode } from "../InlineCode/InlineCode.mjs";
|
|
11
11
|
import Markdown_module_default from "./Markdown.module.mjs";
|
|
12
12
|
import { getHeadingLevelWithOffset } from "./lib/getHeadingLevelWithOffset.mjs";
|
|
13
|
+
import { isExternalHref } from "./lib/isExternalHref.mjs";
|
|
13
14
|
import { SkeletonBlockText, SkeletonInlineContent } from "./components/SkeletonBlocks.mjs";
|
|
14
15
|
import clsx from "clsx";
|
|
15
|
-
import { Children, isValidElement } from "react";
|
|
16
|
+
import { Children, isValidElement, useId } from "react";
|
|
16
17
|
import { jsx } from "react/jsx-runtime";
|
|
17
18
|
import ReactMarkdown from "react-markdown";
|
|
18
19
|
import remarkGfm from "remark-gfm";
|
|
@@ -24,9 +25,13 @@ import remarkGfm from "remark-gfm";
|
|
|
24
25
|
var Markdown = (props) => {
|
|
25
26
|
const { children, color = "default", className, headingOffset = 0, components: customComponents, ref, allowElement, allowedElements, disallowedElements, rehypePlugins, remarkPlugins, remarkRehypeOptions, skipHtml, unwrapDisallowed, urlTransform, ...rest } = props;
|
|
26
27
|
const isSkeleton = useSkeletonMode();
|
|
28
|
+
const clobberPrefix = `user-content-${useId().replace(/[^\w-]/g, "")}-`;
|
|
27
29
|
const defaultComponents = {
|
|
28
30
|
a: (props) => /* @__PURE__ */ jsx(Link, {
|
|
29
|
-
|
|
31
|
+
id: props.id,
|
|
32
|
+
"aria-label": props["aria-label"],
|
|
33
|
+
"aria-describedby": props["aria-describedby"],
|
|
34
|
+
target: isExternalHref(props.href) ? "_blank" : void 0,
|
|
30
35
|
color,
|
|
31
36
|
href: props.href,
|
|
32
37
|
children: props.children
|
|
@@ -41,31 +46,37 @@ var Markdown = (props) => {
|
|
|
41
46
|
children: props.children
|
|
42
47
|
}),
|
|
43
48
|
h1: (props) => /* @__PURE__ */ jsx(Heading, {
|
|
49
|
+
id: props.id,
|
|
44
50
|
level: getHeadingLevelWithOffset(1, headingOffset),
|
|
45
51
|
color,
|
|
46
52
|
children: props.children
|
|
47
53
|
}),
|
|
48
54
|
h2: (props) => /* @__PURE__ */ jsx(Heading, {
|
|
55
|
+
id: props.id,
|
|
49
56
|
level: getHeadingLevelWithOffset(2, headingOffset),
|
|
50
57
|
color,
|
|
51
58
|
children: props.children
|
|
52
59
|
}),
|
|
53
60
|
h3: (props) => /* @__PURE__ */ jsx(Heading, {
|
|
61
|
+
id: props.id,
|
|
54
62
|
level: getHeadingLevelWithOffset(3, headingOffset),
|
|
55
63
|
color,
|
|
56
64
|
children: props.children
|
|
57
65
|
}),
|
|
58
66
|
h4: (props) => /* @__PURE__ */ jsx(Heading, {
|
|
67
|
+
id: props.id,
|
|
59
68
|
level: getHeadingLevelWithOffset(4, headingOffset),
|
|
60
69
|
color,
|
|
61
70
|
children: props.children
|
|
62
71
|
}),
|
|
63
72
|
h5: (props) => /* @__PURE__ */ jsx(Heading, {
|
|
73
|
+
id: props.id,
|
|
64
74
|
level: getHeadingLevelWithOffset(5, headingOffset),
|
|
65
75
|
color,
|
|
66
76
|
children: props.children
|
|
67
77
|
}),
|
|
68
78
|
h6: (props) => /* @__PURE__ */ jsx(Heading, {
|
|
79
|
+
id: props.id,
|
|
69
80
|
level: getHeadingLevelWithOffset(6, headingOffset),
|
|
70
81
|
color,
|
|
71
82
|
children: props.children
|
|
@@ -120,7 +131,10 @@ var Markdown = (props) => {
|
|
|
120
131
|
disallowedElements,
|
|
121
132
|
rehypePlugins,
|
|
122
133
|
remarkPlugins: remarkPlugins ?? [remarkGfm],
|
|
123
|
-
remarkRehypeOptions
|
|
134
|
+
remarkRehypeOptions: {
|
|
135
|
+
clobberPrefix,
|
|
136
|
+
...remarkRehypeOptions
|
|
137
|
+
},
|
|
124
138
|
skipHtml,
|
|
125
139
|
unwrapDisallowed,
|
|
126
140
|
urlTransform,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Markdown.mjs","names":["styles"],"sources":["../../../../../../../src/components/Markdown/Markdown.tsx"],"sourcesContent":["import { CodeBlock } from \"@/components/CodeBlock\";\nimport { Heading } from \"@/components/Heading\";\nimport { InlineCode } from \"@/components/InlineCode\";\nimport { Link } from \"@/components/Link\";\nimport { Separator } from \"@/components/Separator\";\nimport { Text } from \"@/components/Text\";\nimport type { CSSProperties, FC, Ref } from \"react\";\nimport { Children, isValidElement } from \"react\";\nimport type { Components, Options } from \"react-markdown\";\nimport ReactMarkdown from \"react-markdown\";\nimport styles from \"./Markdown.module.scss\";\nimport { extractTextFromFirstChild } from \"@/lib/react/remote\";\nimport type { AlphaColor, PropsWithClassName } from \"@/lib/types/props\";\nimport clsx from \"clsx\";\nimport remarkGfm from \"remark-gfm\";\nimport { getHeadingLevelWithOffset } from \"@/components/Markdown/lib/getHeadingLevelWithOffset\";\nimport type { CodeEditorLanguage } from \"@/components/CodeEditor/languages\";\nimport {\n SkeletonBlockText,\n SkeletonInlineContent,\n} from \"@/components/Markdown/components/SkeletonBlocks\";\nimport { useSkeletonMode } from \"@/components/SkeletonMode/skeletonModeContext\";\n\nexport interface MarkdownProps\n extends PropsWithClassName, Omit<Options, \"components\"> {\n /** The color schema of the markdown component. @default \"default\" */\n color?: \"default\" | AlphaColor;\n /** Shifts all heading levels by the given offset. @default 0 */\n headingOffset?: number;\n /** Allows overriding markdown element renderers from outside. */\n components?: Components;\n /** @internal */\n style?: CSSProperties;\n /** A ref to the elements root. */\n ref?: Ref<HTMLDivElement>;\n}\n\n/**\n * @flr-generate all\n * @flr-ignore-props components\n */\nexport const Markdown: FC<MarkdownProps> = (props) => {\n const {\n children,\n color = \"default\",\n className,\n headingOffset = 0,\n components: customComponents,\n ref,\n allowElement,\n allowedElements,\n disallowedElements,\n rehypePlugins,\n remarkPlugins,\n remarkRehypeOptions,\n skipHtml,\n unwrapDisallowed,\n urlTransform,\n ...rest\n } = props;\n\n const isSkeleton = useSkeletonMode();\n\n const defaultComponents: Components = {\n a: (props) => (\n <Link
|
|
1
|
+
{"version":3,"file":"Markdown.mjs","names":["styles"],"sources":["../../../../../../../src/components/Markdown/Markdown.tsx"],"sourcesContent":["import { CodeBlock } from \"@/components/CodeBlock\";\nimport { Heading } from \"@/components/Heading\";\nimport { InlineCode } from \"@/components/InlineCode\";\nimport { Link } from \"@/components/Link\";\nimport { Separator } from \"@/components/Separator\";\nimport { Text } from \"@/components/Text\";\nimport type { CSSProperties, FC, Ref } from \"react\";\nimport { Children, isValidElement, useId } from \"react\";\nimport type { Components, Options } from \"react-markdown\";\nimport ReactMarkdown from \"react-markdown\";\nimport styles from \"./Markdown.module.scss\";\nimport { extractTextFromFirstChild } from \"@/lib/react/remote\";\nimport type { AlphaColor, PropsWithClassName } from \"@/lib/types/props\";\nimport clsx from \"clsx\";\nimport remarkGfm from \"remark-gfm\";\nimport { getHeadingLevelWithOffset } from \"@/components/Markdown/lib/getHeadingLevelWithOffset\";\nimport { isExternalHref } from \"@/components/Markdown/lib/isExternalHref\";\nimport type { CodeEditorLanguage } from \"@/components/CodeEditor/languages\";\nimport {\n SkeletonBlockText,\n SkeletonInlineContent,\n} from \"@/components/Markdown/components/SkeletonBlocks\";\nimport { useSkeletonMode } from \"@/components/SkeletonMode/skeletonModeContext\";\n\nexport interface MarkdownProps\n extends PropsWithClassName, Omit<Options, \"components\"> {\n /** The color schema of the markdown component. @default \"default\" */\n color?: \"default\" | AlphaColor;\n /** Shifts all heading levels by the given offset. @default 0 */\n headingOffset?: number;\n /** Allows overriding markdown element renderers from outside. */\n components?: Components;\n /** @internal */\n style?: CSSProperties;\n /** A ref to the elements root. */\n ref?: Ref<HTMLDivElement>;\n}\n\n/**\n * @flr-generate all\n * @flr-ignore-props components\n */\nexport const Markdown: FC<MarkdownProps> = (props) => {\n const {\n children,\n color = \"default\",\n className,\n headingOffset = 0,\n components: customComponents,\n ref,\n allowElement,\n allowedElements,\n disallowedElements,\n rehypePlugins,\n remarkPlugins,\n remarkRehypeOptions,\n skipHtml,\n unwrapDisallowed,\n urlTransform,\n ...rest\n } = props;\n\n const isSkeleton = useSkeletonMode();\n /* Footnote ids are per document, so two instances on one page would share\n them and a back link would jump into the other one. */\n const clobberPrefix = `user-content-${useId().replace(/[^\\w-]/g, \"\")}-`;\n\n const defaultComponents: Components = {\n /* GFM footnotes link through `id` (the back link's target), `aria-label`\n and `aria-describedby`. */\n a: (props) => (\n <Link\n id={props.id}\n aria-label={props[\"aria-label\"]}\n aria-describedby={props[\"aria-describedby\"]}\n target={isExternalHref(props.href) ? \"_blank\" : undefined}\n color={color}\n href={props.href}\n >\n {props.children}\n </Link>\n ),\n p: (props) => (\n <Text elementType=\"p\" color={color}>\n {props.children}\n </Text>\n ),\n code: (props) => <InlineCode color={color}>{props.children}</InlineCode>,\n h1: (props) => (\n <Heading\n id={props.id}\n level={getHeadingLevelWithOffset(1, headingOffset)}\n color={color}\n >\n {props.children}\n </Heading>\n ),\n h2: (props) => (\n <Heading\n id={props.id}\n level={getHeadingLevelWithOffset(2, headingOffset)}\n color={color}\n >\n {props.children}\n </Heading>\n ),\n h3: (props) => (\n <Heading\n id={props.id}\n level={getHeadingLevelWithOffset(3, headingOffset)}\n color={color}\n >\n {props.children}\n </Heading>\n ),\n h4: (props) => (\n <Heading\n id={props.id}\n level={getHeadingLevelWithOffset(4, headingOffset)}\n color={color}\n >\n {props.children}\n </Heading>\n ),\n h5: (props) => (\n <Heading\n id={props.id}\n level={getHeadingLevelWithOffset(5, headingOffset)}\n color={color}\n >\n {props.children}\n </Heading>\n ),\n h6: (props) => (\n <Heading\n id={props.id}\n level={getHeadingLevelWithOffset(6, headingOffset)}\n color={color}\n >\n {props.children}\n </Heading>\n ),\n hr: () => <Separator />,\n pre: (props) => {\n const preElementContent = Children.toArray(props.children)[0];\n\n return (\n <CodeBlock\n copyable={false}\n language={\n isValidElement<{ className?: string }>(preElementContent) &&\n preElementContent.props.className\n ? (preElementContent.props.className.replace(\n \"language-\",\n \"\",\n ) as CodeEditorLanguage)\n : undefined\n }\n code={String(\n isValidElement<{ children: string }>(preElementContent)\n ? preElementContent.props.children\n : preElementContent,\n ).trim()}\n />\n );\n },\n ul: ({ node: ignoredNode, ...props }) => (\n <SkeletonBlockText color={color}>\n <ul {...props} />\n </SkeletonBlockText>\n ),\n ol: ({ node: ignoredNode, ...props }) => (\n <SkeletonBlockText color={color}>\n <ol {...props} />\n </SkeletonBlockText>\n ),\n li: ({ node: ignoredNode, children, ...props }) => (\n <li {...props}>\n <SkeletonInlineContent>{children}</SkeletonInlineContent>\n </li>\n ),\n th: ({ node: ignoredNode, children, ...props }) => (\n <th {...props}>\n <SkeletonInlineContent>{children}</SkeletonInlineContent>\n </th>\n ),\n td: ({ node: ignoredNode, children, ...props }) => (\n <td {...props}>\n <SkeletonInlineContent>{children}</SkeletonInlineContent>\n </td>\n ),\n /* A text bar resets the mode for its content, so the image reads it\n from here. A skeleton issues no request. */\n img: ({ node: ignoredNode, ...props }) =>\n isSkeleton ? null : <img {...props} />,\n blockquote: (props) => (\n <SkeletonBlockText color={color}>\n <blockquote>{props.children}</blockquote>\n </SkeletonBlockText>\n ),\n };\n\n const textContent = extractTextFromFirstChild(children);\n const mergedComponents: Components = {\n ...defaultComponents,\n ...customComponents,\n };\n\n return (\n <div className={clsx(styles.markdown, className)} {...rest} ref={ref}>\n <ReactMarkdown\n allowElement={allowElement}\n allowedElements={allowedElements}\n disallowedElements={disallowedElements}\n rehypePlugins={rehypePlugins}\n remarkPlugins={remarkPlugins ?? [remarkGfm]}\n remarkRehypeOptions={{ clobberPrefix, ...remarkRehypeOptions }}\n skipHtml={skipHtml}\n unwrapDisallowed={unwrapDisallowed}\n urlTransform={urlTransform}\n components={mergedComponents}\n >\n {textContent}\n </ReactMarkdown>\n </div>\n );\n};\n\nexport default Markdown;\n"],"mappings":"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"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"isExternalHref.mjs","names":[],"sources":["../../../../../../../../src/components/Markdown/lib/isExternalHref.ts"],"sourcesContent":["/* Only web URLs with a host leave the page. Relative paths, anchors, schemes\n like `mailto:` and `https:foo` (resolved against the current page) stay in\n the current tab. */\nexport const isExternalHref = (href: string | undefined) =>\n !!href && /^(https?:)?\\/\\//i.test(href);\n"],"mappings":";;;AAGA,IAAa,kBAAkB,SAC7B,CAAC,CAAC,QAAQ,mBAAmB,KAAK,IAAI"}
|
|
@@ -12,9 +12,36 @@ import { createElement } from "react";
|
|
|
12
12
|
import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
|
|
13
13
|
import * as Aria from "react-aria-components";
|
|
14
14
|
//#region src/components/MenuItem/MenuItem.tsx
|
|
15
|
+
var isMuted = (props) => !!(props.isPending || props.isSucceeded || props.isFailed || props["aria-disabled"]);
|
|
16
|
+
var renderElement = (domProps) => "href" in domProps ? /* @__PURE__ */ jsx("a", { ...domProps }) : /* @__PURE__ */ jsx("div", { ...domProps });
|
|
17
|
+
/**
|
|
18
|
+
* React Aria drops `aria-disabled` from the props it forwards to the DOM, so it
|
|
19
|
+
* is added to the rendered element. React Aria's `onClick` runs the menu's
|
|
20
|
+
* `onAction`, follows the link and toggles the selection. A mouse release that
|
|
21
|
+
* started outside the item toggles it on pointer up, Enter and Space toggle it
|
|
22
|
+
* on key down. All three handlers are replaced, and like React Aria they stop
|
|
23
|
+
* the event. A muted submenu trigger still opens its submenu on hover and
|
|
24
|
+
* ArrowRight, only Enter and Space are swallowed.
|
|
25
|
+
*/
|
|
26
|
+
var renderMuted = (render = renderElement) => (domProps, renderProps) => render({
|
|
27
|
+
...domProps,
|
|
28
|
+
"aria-disabled": true,
|
|
29
|
+
onClick: (e) => {
|
|
30
|
+
e.preventDefault();
|
|
31
|
+
e.stopPropagation();
|
|
32
|
+
},
|
|
33
|
+
onPointerUp: void 0,
|
|
34
|
+
onKeyDown: (e) => {
|
|
35
|
+
if (e.key === "Enter" || e.key === " ") {
|
|
36
|
+
e.preventDefault();
|
|
37
|
+
e.stopPropagation();
|
|
38
|
+
} else domProps.onKeyDown?.(e);
|
|
39
|
+
}
|
|
40
|
+
}, renderProps);
|
|
15
41
|
var disablePendingProps = (props) => {
|
|
16
|
-
if (props
|
|
42
|
+
if (isMuted(props)) {
|
|
17
43
|
props = { ...props };
|
|
44
|
+
props.onAction = void 0;
|
|
18
45
|
props.onPress = void 0;
|
|
19
46
|
props.onPressStart = void 0;
|
|
20
47
|
props.onPressEnd = void 0;
|
|
@@ -25,8 +52,9 @@ var disablePendingProps = (props) => {
|
|
|
25
52
|
};
|
|
26
53
|
/** @flr-generate all */
|
|
27
54
|
var MenuItem = flowComponent("MenuItem", (props) => {
|
|
55
|
+
const muted = isMuted(props);
|
|
28
56
|
props = disablePendingProps(props);
|
|
29
|
-
const { children, className, selectionVariant, isIndeterminate, id, ref, "aria-disabled":
|
|
57
|
+
const { children, className, selectionVariant, isIndeterminate, id, ref, "aria-disabled": ignoredAriaDisabled, "aria-current": ariaCurrent, render, isPending, isSucceeded, isFailed, ...rest } = props;
|
|
30
58
|
/**
|
|
31
59
|
* React Aria drops `aria-current` from the props it forwards to the DOM, so
|
|
32
60
|
* the current state is exposed as a data attribute (`data-*` passes the
|
|
@@ -35,7 +63,7 @@ var MenuItem = flowComponent("MenuItem", (props) => {
|
|
|
35
63
|
* "false".
|
|
36
64
|
*/
|
|
37
65
|
const currentProps = ariaCurrent && ariaCurrent !== "false" ? { "data-current": true } : {};
|
|
38
|
-
const rootClassName = clsx(MenuItem_module_default.menuItem,
|
|
66
|
+
const rootClassName = clsx(MenuItem_module_default.menuItem, className);
|
|
39
67
|
useAriaAnnounceActionState(isPending ? "isPending" : isSucceeded ? "isSucceeded" : isFailed ? "isFailed" : "isIdle");
|
|
40
68
|
const stateIconElement = isSucceeded ? /* @__PURE__ */ jsx(IconSucceeded, { color: "success" }) : isFailed ? /* @__PURE__ */ jsx(IconFailed, { color: "danger" }) : isPending ? /* @__PURE__ */ jsx(LoadingSpinner, {}) : void 0;
|
|
41
69
|
const stateIcon = stateIconElement && /* @__PURE__ */ jsx("div", {
|
|
@@ -45,6 +73,7 @@ var MenuItem = flowComponent("MenuItem", (props) => {
|
|
|
45
73
|
return /* @__PURE__ */ createElement(Aria.MenuItem, {
|
|
46
74
|
...rest,
|
|
47
75
|
...currentProps,
|
|
76
|
+
render: muted ? renderMuted(render) : render,
|
|
48
77
|
key: id,
|
|
49
78
|
id,
|
|
50
79
|
className: rootClassName,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"MenuItem.mjs","names":["styles","_Fragment"],"sources":["../../../../../../../src/components/MenuItem/MenuItem.tsx"],"sourcesContent":["import type { PropsWithChildren } from \"react\";\nimport * as Aria from \"react-aria-components\";\nimport styles from \"./MenuItem.module.scss\";\nimport clsx from \"clsx\";\nimport { MenuItemContent } from \"@/components/MenuItem/components/MenuItemContent/MenuItemContent\";\nimport type { FlowComponentProps } from \"@/lib/componentFactory/flowComponent\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\nimport { useAriaAnnounceActionState } from \"@/components/Action/lib/ariaLive\";\nimport { IconFailed, IconSucceeded } from \"@/components/Icon/components/icons\";\nimport LoadingSpinner from \"@/components/LoadingSpinner\";\n\nexport interface MenuItemProps\n extends\n Omit<Aria.MenuItemProps, \"children\">,\n PropsWithChildren,\n FlowComponentProps {\n selectionVariant?: \"control\" | \"navigation\" | \"switch\";\n /**\n * Shows the checkbox of a multiple-selection item as partially checked,\n * unless the item is selected.\n */\n isIndeterminate?: 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 /** Disables button but keeps it focusable. */\n \"aria-disabled\"?: boolean;\n /** Marks the menu item as referring to the currently active page. */\n \"aria-current\"?: string;\n}\n\nconst
|
|
1
|
+
{"version":3,"file":"MenuItem.mjs","names":["styles","_Fragment"],"sources":["../../../../../../../src/components/MenuItem/MenuItem.tsx"],"sourcesContent":["import type { KeyboardEvent, MouseEvent, PropsWithChildren } from \"react\";\nimport * as Aria from \"react-aria-components\";\nimport styles from \"./MenuItem.module.scss\";\nimport clsx from \"clsx\";\nimport { MenuItemContent } from \"@/components/MenuItem/components/MenuItemContent/MenuItemContent\";\nimport type { FlowComponentProps } from \"@/lib/componentFactory/flowComponent\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\nimport { useAriaAnnounceActionState } from \"@/components/Action/lib/ariaLive\";\nimport { IconFailed, IconSucceeded } from \"@/components/Icon/components/icons\";\nimport LoadingSpinner from \"@/components/LoadingSpinner\";\n\nexport interface MenuItemProps\n extends\n Omit<Aria.MenuItemProps, \"children\">,\n PropsWithChildren,\n FlowComponentProps {\n selectionVariant?: \"control\" | \"navigation\" | \"switch\";\n /**\n * Shows the checkbox of a multiple-selection item as partially checked,\n * unless the item is selected.\n */\n isIndeterminate?: 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 /** Disables button but keeps it focusable. */\n \"aria-disabled\"?: boolean;\n /** Marks the menu item as referring to the currently active page. */\n \"aria-current\"?: string;\n}\n\nconst isMuted = (props: MenuItemProps) =>\n !!(\n props.isPending ||\n props.isSucceeded ||\n props.isFailed ||\n props[\"aria-disabled\"]\n );\n\ntype RenderFunction = NonNullable<MenuItemProps[\"render\"]>;\n\nconst renderElement: RenderFunction = (domProps) =>\n \"href\" in domProps ? <a {...domProps} /> : <div {...domProps} />;\n\n/**\n * React Aria drops `aria-disabled` from the props it forwards to the DOM, so it\n * is added to the rendered element. React Aria's `onClick` runs the menu's\n * `onAction`, follows the link and toggles the selection. A mouse release that\n * started outside the item toggles it on pointer up, Enter and Space toggle it\n * on key down. All three handlers are replaced, and like React Aria they stop\n * the event. A muted submenu trigger still opens its submenu on hover and\n * ArrowRight, only Enter and Space are swallowed.\n */\nconst renderMuted =\n (render: RenderFunction = renderElement): RenderFunction =>\n (domProps, renderProps) =>\n render(\n {\n ...domProps,\n \"aria-disabled\": true,\n onClick: (e: MouseEvent) => {\n e.preventDefault();\n e.stopPropagation();\n },\n onPointerUp: undefined,\n onKeyDown: (e: KeyboardEvent<HTMLDivElement & HTMLAnchorElement>) => {\n if (e.key === \"Enter\" || e.key === \" \") {\n e.preventDefault();\n e.stopPropagation();\n } else {\n domProps.onKeyDown?.(e);\n }\n },\n },\n renderProps,\n );\n\nconst disablePendingProps = (props: MenuItemProps) => {\n if (isMuted(props)) {\n props = { ...props };\n props.onAction = undefined;\n props.onPress = undefined;\n props.onPressStart = undefined;\n props.onPressEnd = undefined;\n props.onPressChange = undefined;\n props.onPressUp = undefined;\n }\n\n return props;\n};\n\n/** @flr-generate all */\nexport const MenuItem = flowComponent(\"MenuItem\", (props) => {\n const muted = isMuted(props);\n props = disablePendingProps(props);\n\n const {\n children,\n className,\n selectionVariant,\n isIndeterminate,\n id,\n ref,\n \"aria-disabled\": ignoredAriaDisabled,\n \"aria-current\": ariaCurrent,\n render,\n isPending,\n isSucceeded,\n isFailed,\n ...rest\n } = props;\n\n /**\n * React Aria drops `aria-current` from the props it forwards to the DOM, so\n * the current state is exposed as a data attribute (`data-*` passes the\n * filter) — that is what the `menuItem` styling matches on. Every\n * `aria-current` value marks the item as current, except an explicit\n * \"false\".\n */\n const currentProps =\n ariaCurrent && ariaCurrent !== \"false\" ? { \"data-current\": true } : {};\n\n const rootClassName = clsx(styles.menuItem, className);\n\n useAriaAnnounceActionState(\n isPending\n ? \"isPending\"\n : isSucceeded\n ? \"isSucceeded\"\n : isFailed\n ? \"isFailed\"\n : \"isIdle\",\n );\n\n const stateIconElement = isSucceeded ? (\n <IconSucceeded color=\"success\" />\n ) : isFailed ? (\n <IconFailed color=\"danger\" />\n ) : isPending ? (\n <LoadingSpinner />\n ) : undefined;\n\n const stateIcon = stateIconElement && (\n <div className={styles.stateIcon}>{stateIconElement}</div>\n );\n\n return (\n <Aria.MenuItem\n {...rest}\n {...currentProps}\n render={muted ? renderMuted(render) : render}\n key={id}\n id={id}\n className={rootClassName}\n ref={ref}\n >\n {(props) => (\n <>\n <MenuItemContent\n {...props}\n selectionVariant={selectionVariant}\n isIndeterminate={isIndeterminate}\n >\n {children}\n </MenuItemContent>\n {stateIcon}\n </>\n )}\n </Aria.MenuItem>\n );\n});\n\nexport default MenuItem;\n"],"mappings":";;;;;;;;;;;;;;AAkCA,IAAM,WAAW,UACf,CAAC,EACC,MAAM,aACN,MAAM,eACN,MAAM,YACN,MAAM;AAKV,IAAM,iBAAiC,aACrC,UAAU,WAAW,oBAAC,KAAD,EAAG,GAAI,SAAW,CAAA,IAAI,oBAAC,OAAD,EAAK,GAAI,SAAW,CAAA;;;;;;;;;;AAWjE,IAAM,eACH,SAAyB,mBACzB,UAAU,gBACT,OACE;CACE,GAAG;CACH,iBAAiB;CACjB,UAAU,MAAkB;EAC1B,EAAE,eAAe;EACjB,EAAE,gBAAgB;CACpB;CACA,aAAa,KAAA;CACb,YAAY,MAAyD;EACnE,IAAI,EAAE,QAAQ,WAAW,EAAE,QAAQ,KAAK;GACtC,EAAE,eAAe;GACjB,EAAE,gBAAgB;EACpB,OACE,SAAS,YAAY,CAAC;CAE1B;AACF,GACA,WACF;AAEJ,IAAM,uBAAuB,UAAyB;CACpD,IAAI,QAAQ,KAAK,GAAG;EAClB,QAAQ,EAAE,GAAG,MAAM;EACnB,MAAM,WAAW,KAAA;EACjB,MAAM,UAAU,KAAA;EAChB,MAAM,eAAe,KAAA;EACrB,MAAM,aAAa,KAAA;EACnB,MAAM,gBAAgB,KAAA;EACtB,MAAM,YAAY,KAAA;CACpB;CAEA,OAAO;AACT;;AAGA,IAAa,WAAW,cAAc,aAAa,UAAU;CAC3D,MAAM,QAAQ,QAAQ,KAAK;CAC3B,QAAQ,oBAAoB,KAAK;CAEjC,MAAM,EACJ,UACA,WACA,kBACA,iBACA,IACA,KACA,iBAAiB,qBACjB,gBAAgB,aAChB,QACA,WACA,aACA,UACA,GAAG,SACD;;;;;;;;CASJ,MAAM,eACJ,eAAe,gBAAgB,UAAU,EAAE,gBAAgB,KAAK,IAAI,CAAC;CAEvE,MAAM,gBAAgB,KAAKA,wBAAO,UAAU,SAAS;CAErD,2BACE,YACI,cACA,cACE,gBACA,WACE,aACA,QACV;CAEA,MAAM,mBAAmB,cACvB,oBAAC,eAAD,EAAe,OAAM,UAAW,CAAA,IAC9B,WACF,oBAAC,YAAD,EAAY,OAAM,SAAU,CAAA,IAC1B,YACF,oBAAC,gBAAD,CAAiB,CAAA,IACf,KAAA;CAEJ,MAAM,YAAY,oBAChB,oBAAC,OAAD;EAAK,WAAWA,wBAAO;EAAY,UAAA;CAAsB,CAAA;CAG3D,OACE,8BAAC,KAAK,UAAN;EACE,GAAI;EACJ,GAAI;EACJ,QAAQ,QAAQ,YAAY,MAAM,IAAI;EACtC,KAAK;EACD;EACJ,WAAW;EACN;CAcQ,IAZX,UACA,qBAAAC,YAAA,EAAA,UAAA,CACE,oBAAC,iBAAD;EACE,GAAI;EACc;EACD;EAEhB;CACc,CAAA,GAChB,SACD,EAAA,CAAA,CAES;AAEnB,CAAC"}
|
|
@@ -5,7 +5,6 @@ var menuItem = "flow--menu-item";
|
|
|
5
5
|
var icon = "flow--menu-item--icon";
|
|
6
6
|
var checkMark = "flow--menu-item--check-mark";
|
|
7
7
|
var controlIcon = "flow--menu-item--control-icon";
|
|
8
|
-
var ariaDisabled = "flow--menu-item--aria-disabled";
|
|
9
8
|
var avatar = "flow--menu-item--avatar";
|
|
10
9
|
var stateIcon = "flow--menu-item--state-icon";
|
|
11
10
|
var controlIconActive = "flow--menu-item--control-icon-active";
|
|
@@ -17,7 +16,6 @@ var MenuItem_module_default = {
|
|
|
17
16
|
icon,
|
|
18
17
|
checkMark,
|
|
19
18
|
controlIcon,
|
|
20
|
-
ariaDisabled,
|
|
21
19
|
avatar,
|
|
22
20
|
stateIcon,
|
|
23
21
|
controlIconActive,
|
|
@@ -25,6 +23,6 @@ var MenuItem_module_default = {
|
|
|
25
23
|
badge
|
|
26
24
|
};
|
|
27
25
|
//#endregion
|
|
28
|
-
export {
|
|
26
|
+
export { avatar, badge, checkMark, controlIcon, controlIconActive, MenuItem_module_default as default, icon, kbd, menuItem, stateIcon };
|
|
29
27
|
|
|
30
28
|
//# sourceMappingURL=MenuItem.module.mjs.map
|
|
@@ -7,7 +7,6 @@ var item = "flow--navigation--item";
|
|
|
7
7
|
var icon = "flow--navigation--icon";
|
|
8
8
|
var checkMark = "flow--navigation--check-mark";
|
|
9
9
|
var controlIcon = "flow--navigation--control-icon";
|
|
10
|
-
var ariaDisabled = "flow--navigation--aria-disabled";
|
|
11
10
|
var avatar = "flow--navigation--avatar";
|
|
12
11
|
var badge = "flow--navigation--badge";
|
|
13
12
|
var Navigation_module_default = {
|
|
@@ -18,11 +17,10 @@ var Navigation_module_default = {
|
|
|
18
17
|
icon,
|
|
19
18
|
checkMark,
|
|
20
19
|
controlIcon,
|
|
21
|
-
ariaDisabled,
|
|
22
20
|
avatar,
|
|
23
21
|
badge
|
|
24
22
|
};
|
|
25
23
|
//#endregion
|
|
26
|
-
export {
|
|
24
|
+
export { avatar, badge, checkMark, controlIcon, Navigation_module_default as default, icon, item, linkList, navigation };
|
|
27
25
|
|
|
28
26
|
//# sourceMappingURL=Navigation.module.mjs.map
|
|
@@ -5,7 +5,6 @@ var option = "flow--option";
|
|
|
5
5
|
var icon = "flow--option--icon";
|
|
6
6
|
var checkMark = "flow--option--check-mark";
|
|
7
7
|
var controlIcon = "flow--option--control-icon";
|
|
8
|
-
var ariaDisabled = "flow--option--aria-disabled";
|
|
9
8
|
var avatar = "flow--option--avatar";
|
|
10
9
|
var content = "flow--option--content";
|
|
11
10
|
var Option_module_default = {
|
|
@@ -14,11 +13,10 @@ var Option_module_default = {
|
|
|
14
13
|
icon,
|
|
15
14
|
checkMark,
|
|
16
15
|
controlIcon,
|
|
17
|
-
ariaDisabled,
|
|
18
16
|
avatar,
|
|
19
17
|
content
|
|
20
18
|
};
|
|
21
19
|
//#endregion
|
|
22
|
-
export {
|
|
20
|
+
export { avatar, checkMark, content, controlIcon, Option_module_default as default, icon, option };
|
|
23
21
|
|
|
24
22
|
//# sourceMappingURL=Option.module.mjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export declare const isExternalHref: (href: string | undefined) => boolean;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@mittwald/flow-react-components",
|
|
3
|
-
"version": "1.5.
|
|
3
|
+
"version": "1.5.16",
|
|
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.5.
|
|
87
|
+
"@mittwald/flow-icons": "^1.5.16",
|
|
88
88
|
"@mittwald/password-tools-js": "^3.0.0",
|
|
89
|
-
"@mittwald/react-tunnel": "^1.5.
|
|
89
|
+
"@mittwald/react-tunnel": "^1.5.16",
|
|
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,13 +139,13 @@
|
|
|
139
139
|
"@internationalized/date": "^3.12.3",
|
|
140
140
|
"@lezer/generator": "^1.8.0",
|
|
141
141
|
"@lezer/lr": "^1.4.10",
|
|
142
|
-
"@mittwald/flow-components-base": "1.5.
|
|
143
|
-
"@mittwald/flow-core": "1.5.
|
|
144
|
-
"@mittwald/flow-design-tokens": "1.5.
|
|
145
|
-
"@mittwald/flow-icons-base": "1.5.
|
|
142
|
+
"@mittwald/flow-components-base": "1.5.16",
|
|
143
|
+
"@mittwald/flow-core": "1.5.16",
|
|
144
|
+
"@mittwald/flow-design-tokens": "1.5.16",
|
|
145
|
+
"@mittwald/flow-icons-base": "1.5.16",
|
|
146
146
|
"@mittwald/react-use-promise": "^4.2.2",
|
|
147
147
|
"@mittwald/remote-dom-react": "1.2.2-mittwald.10",
|
|
148
|
-
"@mittwald/typescript-config": "1.5.
|
|
148
|
+
"@mittwald/typescript-config": "1.5.16",
|
|
149
149
|
"@nx/storybook": "^22.7.6",
|
|
150
150
|
"@storybook/addon-a11y": "^10.5.10",
|
|
151
151
|
"@storybook/addon-actions": "^9.0.8",
|
|
@@ -199,7 +199,7 @@
|
|
|
199
199
|
},
|
|
200
200
|
"peerDependencies": {
|
|
201
201
|
"@internationalized/date": "^3.12.2",
|
|
202
|
-
"@mittwald/flow-icons-pro": "1.5.
|
|
202
|
+
"@mittwald/flow-icons-pro": "1.5.16",
|
|
203
203
|
"@mittwald/react-use-promise": "^4.2.2",
|
|
204
204
|
"next": "^16.2.3",
|
|
205
205
|
"react": "^19.2.0",
|
|
@@ -223,5 +223,5 @@
|
|
|
223
223
|
"browserslist": [
|
|
224
224
|
"baseline widely available"
|
|
225
225
|
],
|
|
226
|
-
"gitHead": "
|
|
226
|
+
"gitHead": "d1bc9af39685c830d052fc726f36ad2d7d3e204a"
|
|
227
227
|
}
|