@mittwald/flow-react-components 1.5.4 → 1.5.5
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/js/packages/components/src/components/ContextMenu/ContextMenu.mjs +3 -2
- package/dist/js/packages/components/src/components/ContextMenu/ContextMenu.mjs.map +1 -1
- package/dist/js/packages/components/src/components/Markdown/Markdown.mjs +4 -4
- package/dist/js/packages/components/src/components/Markdown/Markdown.mjs.map +1 -1
- package/dist/js/packages/components/src/components/SkeletonText/SkeletonText.mjs +4 -3
- package/dist/js/packages/components/src/components/SkeletonText/SkeletonText.mjs.map +1 -1
- package/dist/js/packages/components/src/components/TimeField/TimeField.mjs +4 -2
- package/dist/js/packages/components/src/components/TimeField/TimeField.mjs.map +1 -1
- package/package.json +10 -10
|
@@ -11,11 +11,12 @@ import ContextMenuContentView from "../../views/ContextMenuContentView.mjs";
|
|
|
11
11
|
import ContextMenu_module_default from "./ContextMenu.module.mjs";
|
|
12
12
|
import { OverlayContentSuspendWatcher } from "../../lib/controller/overlay/OverlayContentSuspendWatcher.mjs";
|
|
13
13
|
import { ContextMenuSelectAll } from "./components/ContextMenuSelectAll/ContextMenuSelectAll.mjs";
|
|
14
|
+
import clsx from "clsx";
|
|
14
15
|
import { jsx, jsxs } from "react/jsx-runtime";
|
|
15
16
|
//#region src/components/ContextMenu/ContextMenu.tsx
|
|
16
17
|
/** @flr-generate all */
|
|
17
18
|
var ContextMenu = flowComponent("ContextMenu", (props) => {
|
|
18
|
-
const { children, onAction, selectionMode, selectedKeys, defaultSelectedKeys, disabledKeys, onSelectionChange, renderEmptyState, showSelectAll, ref, controller: overlayControllerFromProps, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, "aria-details": ariaDetails, ...rest } = props;
|
|
19
|
+
const { children, onAction, selectionMode, selectedKeys, defaultSelectedKeys, disabledKeys, onSelectionChange, renderEmptyState, showSelectAll, ref, className, controller: overlayControllerFromProps, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, "aria-details": ariaDetails, ...rest } = props;
|
|
19
20
|
const overlayControllerFromContext = useOverlayController("ContextMenu", { reuseControllerFromContext: true });
|
|
20
21
|
const overlayController = overlayControllerFromProps ?? overlayControllerFromContext;
|
|
21
22
|
const selectionVariant = getMenuItemSelectionVariant(selectionMode);
|
|
@@ -35,7 +36,7 @@ var ContextMenu = flowComponent("ContextMenu", (props) => {
|
|
|
35
36
|
overlayController,
|
|
36
37
|
children: /* @__PURE__ */ jsx(Popover, {
|
|
37
38
|
...rest,
|
|
38
|
-
className: ContextMenu_module_default.popover,
|
|
39
|
+
className: clsx(ContextMenu_module_default.popover, className),
|
|
39
40
|
controller: overlayController,
|
|
40
41
|
isDialogContent: false,
|
|
41
42
|
children: /* @__PURE__ */ jsx(OverlayContextProvider, {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ContextMenu.mjs","names":["styles"],"sources":["../../../../../../../src/components/ContextMenu/ContextMenu.tsx"],"sourcesContent":["import { Action } from \"@/components/Action\";\nimport type { ContextMenuSelectionMode } from \"@/components/ContextMenu/lib\";\nimport {\n getAriaSelectionMode,\n closesOnSelect,\n getMenuItemSelectionVariant,\n} from \"@/components/ContextMenu/lib\";\nimport type { MenuItemProps } from \"@/components/MenuItem\";\nimport { Popover, type PopoverProps } from \"@/components/Popover/Popover\";\nimport type { FlowComponentProps } from \"@/lib/componentFactory/flowComponent\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\nimport { useOverlayController } from \"@/lib/controller\";\nimport { OverlayContextProvider } from \"@/lib/controller/overlay/OverlayContextProvider\";\nimport type { PropsContext } from \"@/lib/propsContext\";\nimport { PropsContextProvider } from \"@/lib/propsContext\";\nimport ContextMenuContentView from \"@/views/ContextMenuContentView\";\nimport type * as Aria from \"react-aria-components\";\nimport styles from \"./ContextMenu.module.scss\";\nimport { OverlayContentSuspendWatcher } from \"@/lib/controller/overlay/OverlayContentSuspendWatcher\";\nimport { ContextMenuSelectAll } from \"@/components/ContextMenu/components/ContextMenuSelectAll/ContextMenuSelectAll\";\n\nexport interface ContextMenuProps\n extends\n Omit<PopoverProps, \"withTip\" | \"modality\">,\n Pick<\n Aria.MenuProps<MenuItemProps>,\n | \"onAction\"\n | \"selectedKeys\"\n | \"defaultSelectedKeys\"\n | \"onSelectionChange\"\n | \"disabledKeys\"\n | \"renderEmptyState\"\n >,\n FlowComponentProps {\n /** The type of selection that is allowed in the context menu. */\n selectionMode?: ContextMenuSelectionMode;\n /** Sets the context menu to a fixed width. */\n width?: string | number;\n /**\n * Adds a first entry that selects or deselects all items at once. Only\n * applies to `selectionMode=\"multiple\"`.\n */\n showSelectAll?: boolean;\n}\n\n/** @flr-generate all */\nexport const ContextMenu = flowComponent(\"ContextMenu\", (props) => {\n const {\n children,\n onAction,\n selectionMode,\n selectedKeys,\n defaultSelectedKeys,\n disabledKeys,\n onSelectionChange,\n renderEmptyState,\n showSelectAll,\n ref,\n controller: overlayControllerFromProps,\n \"aria-label\": ariaLabel,\n \"aria-labelledby\": ariaLabelledBy,\n \"aria-describedby\": ariaDescribedBy,\n \"aria-details\": ariaDetails,\n ...rest\n } = props;\n\n const overlayControllerFromContext = useOverlayController(\"ContextMenu\", {\n reuseControllerFromContext: true,\n });\n\n const overlayController =\n overlayControllerFromProps ?? overlayControllerFromContext;\n\n const selectionVariant = getMenuItemSelectionVariant(selectionMode);\n\n const selectAll = showSelectAll && selectionMode === \"multiple\" && (\n <ContextMenuSelectAll />\n );\n\n const propsContext: PropsContext = {\n MenuItem: {\n selectionVariant,\n Avatar: {\n size: \"l\",\n },\n },\n\n Section: {\n MenuItem: {\n Avatar: {\n size: \"l\",\n },\n },\n renderContextMenuSection: true,\n },\n\n ContextMenuSection: {\n MenuItem: {\n Avatar: {\n size: \"l\",\n },\n },\n },\n };\n\n return (\n <OverlayContentSuspendWatcher overlayController={overlayController}>\n <Popover\n {...rest}\n className={styles.popover}\n controller={overlayController}\n isDialogContent={false}\n >\n <OverlayContextProvider\n type=\"ContextMenu\"\n controller={overlayController}\n >\n <ContextMenuContentView\n className={styles.contextMenu}\n onAction={onAction}\n selectionMode={getAriaSelectionMode(selectionMode)}\n selectedKeys={selectedKeys}\n defaultSelectedKeys={defaultSelectedKeys}\n disabledKeys={disabledKeys}\n onSelectionChange={onSelectionChange}\n renderEmptyState={renderEmptyState}\n aria-label={ariaLabel}\n aria-labelledby={ariaLabelledBy}\n aria-describedby={ariaDescribedBy}\n aria-details={ariaDetails}\n ref={ref}\n >\n {selectAll}\n <PropsContextProvider props={propsContext}>\n <Action closeOverlay={closesOnSelect(selectionMode)}>\n {children}\n </Action>\n </PropsContextProvider>\n </ContextMenuContentView>\n </OverlayContextProvider>\n </Popover>\n </OverlayContentSuspendWatcher>\n );\n});\n\nexport default ContextMenu;\n"],"mappings":"
|
|
1
|
+
{"version":3,"file":"ContextMenu.mjs","names":["styles"],"sources":["../../../../../../../src/components/ContextMenu/ContextMenu.tsx"],"sourcesContent":["import { Action } from \"@/components/Action\";\nimport type { ContextMenuSelectionMode } from \"@/components/ContextMenu/lib\";\nimport {\n getAriaSelectionMode,\n closesOnSelect,\n getMenuItemSelectionVariant,\n} from \"@/components/ContextMenu/lib\";\nimport type { MenuItemProps } from \"@/components/MenuItem\";\nimport { Popover, type PopoverProps } from \"@/components/Popover/Popover\";\nimport type { FlowComponentProps } from \"@/lib/componentFactory/flowComponent\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\nimport { useOverlayController } from \"@/lib/controller\";\nimport { OverlayContextProvider } from \"@/lib/controller/overlay/OverlayContextProvider\";\nimport type { PropsContext } from \"@/lib/propsContext\";\nimport { PropsContextProvider } from \"@/lib/propsContext\";\nimport ContextMenuContentView from \"@/views/ContextMenuContentView\";\nimport type * as Aria from \"react-aria-components\";\nimport clsx from \"clsx\";\nimport styles from \"./ContextMenu.module.scss\";\nimport { OverlayContentSuspendWatcher } from \"@/lib/controller/overlay/OverlayContentSuspendWatcher\";\nimport { ContextMenuSelectAll } from \"@/components/ContextMenu/components/ContextMenuSelectAll/ContextMenuSelectAll\";\n\nexport interface ContextMenuProps\n extends\n Omit<PopoverProps, \"withTip\" | \"modality\">,\n Pick<\n Aria.MenuProps<MenuItemProps>,\n | \"onAction\"\n | \"selectedKeys\"\n | \"defaultSelectedKeys\"\n | \"onSelectionChange\"\n | \"disabledKeys\"\n | \"renderEmptyState\"\n >,\n FlowComponentProps {\n /** The type of selection that is allowed in the context menu. */\n selectionMode?: ContextMenuSelectionMode;\n /** Sets the context menu to a fixed width. */\n width?: string | number;\n /**\n * Adds a first entry that selects or deselects all items at once. Only\n * applies to `selectionMode=\"multiple\"`.\n */\n showSelectAll?: boolean;\n}\n\n/** @flr-generate all */\nexport const ContextMenu = flowComponent(\"ContextMenu\", (props) => {\n const {\n children,\n onAction,\n selectionMode,\n selectedKeys,\n defaultSelectedKeys,\n disabledKeys,\n onSelectionChange,\n renderEmptyState,\n showSelectAll,\n ref,\n className,\n controller: overlayControllerFromProps,\n \"aria-label\": ariaLabel,\n \"aria-labelledby\": ariaLabelledBy,\n \"aria-describedby\": ariaDescribedBy,\n \"aria-details\": ariaDetails,\n ...rest\n } = props;\n\n const overlayControllerFromContext = useOverlayController(\"ContextMenu\", {\n reuseControllerFromContext: true,\n });\n\n const overlayController =\n overlayControllerFromProps ?? overlayControllerFromContext;\n\n const selectionVariant = getMenuItemSelectionVariant(selectionMode);\n\n const selectAll = showSelectAll && selectionMode === \"multiple\" && (\n <ContextMenuSelectAll />\n );\n\n const propsContext: PropsContext = {\n MenuItem: {\n selectionVariant,\n Avatar: {\n size: \"l\",\n },\n },\n\n Section: {\n MenuItem: {\n Avatar: {\n size: \"l\",\n },\n },\n renderContextMenuSection: true,\n },\n\n ContextMenuSection: {\n MenuItem: {\n Avatar: {\n size: \"l\",\n },\n },\n },\n };\n\n return (\n <OverlayContentSuspendWatcher overlayController={overlayController}>\n <Popover\n {...rest}\n className={clsx(styles.popover, className)}\n controller={overlayController}\n isDialogContent={false}\n >\n <OverlayContextProvider\n type=\"ContextMenu\"\n controller={overlayController}\n >\n <ContextMenuContentView\n className={styles.contextMenu}\n onAction={onAction}\n selectionMode={getAriaSelectionMode(selectionMode)}\n selectedKeys={selectedKeys}\n defaultSelectedKeys={defaultSelectedKeys}\n disabledKeys={disabledKeys}\n onSelectionChange={onSelectionChange}\n renderEmptyState={renderEmptyState}\n aria-label={ariaLabel}\n aria-labelledby={ariaLabelledBy}\n aria-describedby={ariaDescribedBy}\n aria-details={ariaDetails}\n ref={ref}\n >\n {selectAll}\n <PropsContextProvider props={propsContext}>\n <Action closeOverlay={closesOnSelect(selectionMode)}>\n {children}\n </Action>\n </PropsContextProvider>\n </ContextMenuContentView>\n </OverlayContextProvider>\n </Popover>\n </OverlayContentSuspendWatcher>\n );\n});\n\nexport default ContextMenu;\n"],"mappings":";;;;;;;;;;;;;;;;;AA+CA,IAAa,cAAc,cAAc,gBAAgB,UAAU;CACjE,MAAM,EACJ,UACA,UACA,eACA,cACA,qBACA,cACA,mBACA,kBACA,eACA,KACA,WACA,YAAY,4BACZ,cAAc,WACd,mBAAmB,gBACnB,oBAAoB,iBACpB,gBAAgB,aAChB,GAAG,SACD;CAEJ,MAAM,+BAA+B,qBAAqB,eAAe,EACvE,4BAA4B,KAC9B,CAAC;CAED,MAAM,oBACJ,8BAA8B;CAEhC,MAAM,mBAAmB,4BAA4B,aAAa;CAElE,MAAM,YAAY,iBAAiB,kBAAkB,cACnD,oBAAC,sBAAD,CAAuB,CAAA;CAGzB,MAAM,eAA6B;EACjC,UAAU;GACR;GACA,QAAQ,EACN,MAAM,IACR;EACF;EAEA,SAAS;GACP,UAAU,EACR,QAAQ,EACN,MAAM,IACR,EACF;GACA,0BAA0B;EAC5B;EAEA,oBAAoB,EAClB,UAAU,EACR,QAAQ,EACN,MAAM,IACR,EACF,EACF;CACF;CAEA,OACE,oBAAC,8BAAD;EAAiD;EAC/C,UAAA,oBAAC,SAAD;GACE,GAAI;GACJ,WAAW,KAAKA,2BAAO,SAAS,SAAS;GACzC,YAAY;GACZ,iBAAiB;GAEjB,UAAA,oBAAC,wBAAD;IACE,MAAK;IACL,YAAY;IAEZ,UAAA,qBAAC,wBAAD;KACE,WAAWA,2BAAO;KACR;KACV,eAAe,qBAAqB,aAAa;KACnC;KACO;KACP;KACK;KACD;KAClB,cAAY;KACZ,mBAAiB;KACjB,oBAAkB;KAClB,gBAAc;KACT;KAbP,UAAA,CAeG,WACD,oBAAC,sBAAD;MAAsB,OAAO;MAC3B,UAAA,oBAAC,QAAD;OAAQ,cAAc,eAAe,aAAa;OAC/C;MACK,CAAA;KACY,CAAA,CACA;;GACF,CAAA;EACjB,CAAA;CACmB,CAAA;AAElC,CAAC"}
|
|
@@ -79,13 +79,13 @@ var Markdown = (props) => {
|
|
|
79
79
|
code: String(isValidElement(preElementContent) ? preElementContent.props.children : preElementContent).trim()
|
|
80
80
|
});
|
|
81
81
|
},
|
|
82
|
-
ul: (props) => /* @__PURE__ */ jsx(SkeletonBlockText, {
|
|
82
|
+
ul: ({ node: ignoredNode, ...props }) => /* @__PURE__ */ jsx(SkeletonBlockText, {
|
|
83
83
|
color,
|
|
84
|
-
children: /* @__PURE__ */ jsx("ul", {
|
|
84
|
+
children: /* @__PURE__ */ jsx("ul", { ...props })
|
|
85
85
|
}),
|
|
86
|
-
ol: (props) => /* @__PURE__ */ jsx(SkeletonBlockText, {
|
|
86
|
+
ol: ({ node: ignoredNode, ...props }) => /* @__PURE__ */ jsx(SkeletonBlockText, {
|
|
87
87
|
color,
|
|
88
|
-
children: /* @__PURE__ */ jsx("ol", {
|
|
88
|
+
children: /* @__PURE__ */ jsx("ol", { ...props })
|
|
89
89
|
}),
|
|
90
90
|
li: ({ node: ignoredNode, children, ...props }) => /* @__PURE__ */ jsx("li", {
|
|
91
91
|
...props,
|
|
@@ -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,
|
|
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 target=\"_blank\" color={color} href={props.href}>\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 level={getHeadingLevelWithOffset(1, headingOffset)}\n color={color}\n >\n {props.children}\n </Heading>\n ),\n h2: (props) => (\n <Heading\n level={getHeadingLevelWithOffset(2, headingOffset)}\n color={color}\n >\n {props.children}\n </Heading>\n ),\n h3: (props) => (\n <Heading\n level={getHeadingLevelWithOffset(3, headingOffset)}\n color={color}\n >\n {props.children}\n </Heading>\n ),\n h4: (props) => (\n <Heading\n level={getHeadingLevelWithOffset(4, headingOffset)}\n color={color}\n >\n {props.children}\n </Heading>\n ),\n h5: (props) => (\n <Heading\n level={getHeadingLevelWithOffset(5, headingOffset)}\n color={color}\n >\n {props.children}\n </Heading>\n ),\n h6: (props) => (\n <Heading\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={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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"}
|
|
@@ -1,19 +1,20 @@
|
|
|
1
1
|
"use client"
|
|
2
2
|
/* */
|
|
3
3
|
import SkeletonText_module_default from "./SkeletonText.module.mjs";
|
|
4
|
+
import clsx from "clsx";
|
|
4
5
|
import { jsx } from "react/jsx-runtime";
|
|
5
6
|
//#region src/components/SkeletonText/SkeletonText.tsx
|
|
6
7
|
/** @flr-generate all */
|
|
7
8
|
var SkeletonText = (props) => {
|
|
8
|
-
const { width, style = {}, ...rest } = props;
|
|
9
|
+
const { width, style = {}, className, ...rest } = props;
|
|
9
10
|
return /* @__PURE__ */ jsx("span", {
|
|
10
11
|
"aria-hidden": true,
|
|
11
|
-
className: SkeletonText_module_default.skeletonText,
|
|
12
12
|
style: {
|
|
13
13
|
width,
|
|
14
14
|
...style
|
|
15
15
|
},
|
|
16
|
-
...rest
|
|
16
|
+
...rest,
|
|
17
|
+
className: clsx(SkeletonText_module_default.skeletonText, className)
|
|
17
18
|
});
|
|
18
19
|
};
|
|
19
20
|
//#endregion
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SkeletonText.mjs","names":["styles"],"sources":["../../../../../../../src/components/SkeletonText/SkeletonText.tsx"],"sourcesContent":["import type { ComponentProps, CSSProperties, FC } from \"react\";\nimport styles from \"./SkeletonText.module.scss\";\n\nexport interface SkeletonTextProps extends ComponentProps<\"span\"> {\n /** The width of the skeleton text. */\n width?: CSSProperties[\"width\"];\n}\n\n/** @flr-generate all */\nexport const SkeletonText: FC<SkeletonTextProps> = (props) => {\n const { width, style = {}, ...rest } = props;\n return (\n <span\n aria-hidden\n
|
|
1
|
+
{"version":3,"file":"SkeletonText.mjs","names":["styles"],"sources":["../../../../../../../src/components/SkeletonText/SkeletonText.tsx"],"sourcesContent":["import type { ComponentProps, CSSProperties, FC } from \"react\";\nimport clsx from \"clsx\";\nimport styles from \"./SkeletonText.module.scss\";\n\nexport interface SkeletonTextProps extends ComponentProps<\"span\"> {\n /** The width of the skeleton text. */\n width?: CSSProperties[\"width\"];\n}\n\n/** @flr-generate all */\nexport const SkeletonText: FC<SkeletonTextProps> = (props) => {\n const { width, style = {}, className, ...rest } = props;\n return (\n <span\n aria-hidden\n style={{ width, ...style }}\n {...rest}\n className={clsx(styles.skeletonText, className)}\n />\n );\n};\n\nexport default SkeletonText;\n"],"mappings":";;;;;;;AAUA,IAAa,gBAAuC,UAAU;CAC5D,MAAM,EAAE,OAAO,QAAQ,CAAC,GAAG,WAAW,GAAG,SAAS;CAClD,OACE,oBAAC,QAAD;EACE,eAAA;EACA,OAAO;GAAE;GAAO,GAAG;EAAM;EACzB,GAAI;EACJ,WAAW,KAAKA,4BAAO,cAAc,SAAS;CAC/C,CAAA;AAEL"}
|
|
@@ -6,20 +6,22 @@ import { useFieldComponent } from "../../lib/hooks/useFieldComponent.mjs";
|
|
|
6
6
|
import { useControlledHostValueProps } from "../../lib/remote/useControlledHostValueProps.mjs";
|
|
7
7
|
import { DateInput } from "../DateInput/DateInput.mjs";
|
|
8
8
|
import TimeField_module_default from "./TimeField.module.mjs";
|
|
9
|
+
import clsx from "clsx";
|
|
9
10
|
import "react";
|
|
10
11
|
import { jsx, jsxs } from "react/jsx-runtime";
|
|
11
12
|
import * as Aria from "react-aria-components";
|
|
12
13
|
//#region src/components/TimeField/TimeField.tsx
|
|
13
14
|
/** @flr-generate all */
|
|
14
15
|
var TimeField = flowComponent("TimeField", (props) => {
|
|
15
|
-
const { children, ref, ...rest } = useControlledHostValueProps(props, null);
|
|
16
|
+
const { children, className, ref, ...rest } = useControlledHostValueProps(props, null);
|
|
16
17
|
const { FieldErrorView, FieldErrorCaptureContext, fieldPropsContext, wrapperProps, controlProps, skeletonProps } = useFieldComponent(props, "TimeField");
|
|
18
|
+
const rootClassName = clsx(wrapperProps.className, className);
|
|
17
19
|
return /* @__PURE__ */ jsxs(Aria.TimeField, {
|
|
18
20
|
hourCycle: 24,
|
|
19
21
|
...rest,
|
|
20
|
-
...wrapperProps,
|
|
21
22
|
...controlProps,
|
|
22
23
|
...skeletonProps,
|
|
24
|
+
className: rootClassName,
|
|
23
25
|
children: [/* @__PURE__ */ jsxs(FieldErrorCaptureContext, { children: [/* @__PURE__ */ jsx(DateInput, {
|
|
24
26
|
className: TimeField_module_default.dateInput,
|
|
25
27
|
ref
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TimeField.mjs","names":["styles"],"sources":["../../../../../../../src/components/TimeField/TimeField.tsx"],"sourcesContent":["import { type PropsWithChildren } from \"react\";\nimport * as Aria from \"react-aria-components\";\nimport {\n flowComponent,\n type FlowComponentProps,\n} from \"@/lib/componentFactory/flowComponent\";\nimport { PropsContextProvider } from \"@/lib/propsContext\";\nimport styles from \"./TimeField.module.scss\";\nimport { useFieldComponent } from \"@/lib/hooks/useFieldComponent\";\nimport DateInput from \"@/components/DateInput\";\nimport { useControlledHostValueProps } from \"@/lib/remote/useControlledHostValueProps\";\n\nexport interface TimeFieldProps<T extends Aria.TimeValue = Aria.TimeValue>\n extends\n PropsWithChildren<Omit<Aria.TimeFieldProps<T>, \"children\">>,\n FlowComponentProps<HTMLSpanElement> {}\n\n/** @flr-generate all */\nexport const TimeField = flowComponent(\"TimeField\", (props) => {\n // `null` is what react-aria's time field state uses for \"no time\"\n const { children, ref, ...rest } = useControlledHostValueProps(props
|
|
1
|
+
{"version":3,"file":"TimeField.mjs","names":["styles"],"sources":["../../../../../../../src/components/TimeField/TimeField.tsx"],"sourcesContent":["import { type PropsWithChildren } from \"react\";\nimport clsx from \"clsx\";\nimport * as Aria from \"react-aria-components\";\nimport {\n flowComponent,\n type FlowComponentProps,\n} from \"@/lib/componentFactory/flowComponent\";\nimport { PropsContextProvider } from \"@/lib/propsContext\";\nimport styles from \"./TimeField.module.scss\";\nimport { useFieldComponent } from \"@/lib/hooks/useFieldComponent\";\nimport DateInput from \"@/components/DateInput\";\nimport { useControlledHostValueProps } from \"@/lib/remote/useControlledHostValueProps\";\n\nexport interface TimeFieldProps<T extends Aria.TimeValue = Aria.TimeValue>\n extends\n PropsWithChildren<Omit<Aria.TimeFieldProps<T>, \"children\">>,\n FlowComponentProps<HTMLSpanElement> {}\n\n/** @flr-generate all */\nexport const TimeField = flowComponent(\"TimeField\", (props) => {\n // `null` is what react-aria's time field state uses for \"no time\"\n const { children, className, ref, ...rest } = useControlledHostValueProps(\n props,\n null,\n );\n\n const {\n FieldErrorView,\n FieldErrorCaptureContext,\n fieldPropsContext,\n wrapperProps,\n controlProps,\n skeletonProps,\n } = useFieldComponent(props, \"TimeField\");\n\n const rootClassName = clsx(wrapperProps.className, className);\n\n return (\n <Aria.TimeField\n hourCycle={24}\n {...rest}\n {...controlProps}\n {...skeletonProps}\n className={rootClassName}\n >\n <FieldErrorCaptureContext>\n <DateInput className={styles.dateInput} ref={ref} />\n <PropsContextProvider props={fieldPropsContext}>\n {children}\n </PropsContextProvider>\n </FieldErrorCaptureContext>\n <FieldErrorView />\n </Aria.TimeField>\n );\n});\n\nexport default TimeField;\n"],"mappings":";;;;;;;;;;;;;;AAmBA,IAAa,YAAY,cAAc,cAAc,UAAU;CAE7D,MAAM,EAAE,UAAU,WAAW,KAAK,GAAG,SAAS,4BAC5C,OACA,IACF;CAEA,MAAM,EACJ,gBACA,0BACA,mBACA,cACA,cACA,kBACE,kBAAkB,OAAO,WAAW;CAExC,MAAM,gBAAgB,KAAK,aAAa,WAAW,SAAS;CAE5D,OACE,qBAAC,KAAK,WAAN;EACE,WAAW;EACX,GAAI;EACJ,GAAI;EACJ,GAAI;EACJ,WAAW;EALb,UAAA,CAOE,qBAAC,0BAAD,EAAA,UAAA,CACE,oBAAC,WAAD;GAAW,WAAWA,yBAAO;GAAgB;EAAM,CAAA,GACnD,oBAAC,sBAAD;GAAsB,OAAO;GAC1B;EACmB,CAAA,CACE,EAAA,CAAA,GAC1B,oBAAC,gBAAD,CAAiB,CAAA,CACH;;AAEpB,CAAC"}
|
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.5",
|
|
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.5",
|
|
88
88
|
"@mittwald/password-tools-js": "^3.0.0",
|
|
89
|
-
"@mittwald/react-tunnel": "^1.5.
|
|
89
|
+
"@mittwald/react-tunnel": "^1.5.5",
|
|
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.5",
|
|
143
|
+
"@mittwald/flow-core": "1.5.5",
|
|
144
|
+
"@mittwald/flow-design-tokens": "1.5.5",
|
|
145
|
+
"@mittwald/flow-icons-base": "1.5.5",
|
|
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.5",
|
|
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.5",
|
|
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": "a69092be4bfa9b0a94ec475fc621c12bf78f0f8b"
|
|
227
227
|
}
|