@mittwald/flow-react-components 0.2.0-alpha.186 → 0.2.0-alpha.187
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/CHANGELOG.md +6 -0
- package/dist/assets/doc-properties.json +1209 -1171
- package/dist/js/components/src/components/ColumnLayout/ColumnLayout.mjs +10 -2
- package/dist/js/components/src/components/ColumnLayout/ColumnLayout.mjs.map +1 -1
- package/dist/js/components/src/components/List/components/ListItemView/components/ListItemViewContent/ListItemViewContent.mjs +1 -0
- package/dist/js/components/src/components/List/components/ListItemView/components/ListItemViewContent/ListItemViewContent.mjs.map +1 -1
- package/dist/types/components/ColumnLayout/ColumnLayout.d.ts.map +1 -1
- package/dist/types/components/List/components/ListItemView/components/ListItemViewContent/ListItemViewContent.d.ts.map +1 -1
- package/package.json +4 -4
|
@@ -22,7 +22,8 @@ const ColumnLayout = flowComponent("ColumnLayout", (props) => {
|
|
|
22
22
|
columnGap = gap,
|
|
23
23
|
elementType = "div",
|
|
24
24
|
"aria-label": ariaLabel,
|
|
25
|
-
ref
|
|
25
|
+
ref,
|
|
26
|
+
mergeInParentContext
|
|
26
27
|
} = props;
|
|
27
28
|
let elementClassName = styles.columnLayout;
|
|
28
29
|
s?.map((v, i) => {
|
|
@@ -63,7 +64,14 @@ const ColumnLayout = flowComponent("ColumnLayout", (props) => {
|
|
|
63
64
|
ref,
|
|
64
65
|
"aria-label": ariaLabel,
|
|
65
66
|
className: elementClassName,
|
|
66
|
-
children: /* @__PURE__ */ jsx(
|
|
67
|
+
children: /* @__PURE__ */ jsx(
|
|
68
|
+
PropsContextProvider,
|
|
69
|
+
{
|
|
70
|
+
props: propsContext,
|
|
71
|
+
mergeInParentContext,
|
|
72
|
+
children
|
|
73
|
+
}
|
|
74
|
+
)
|
|
67
75
|
}
|
|
68
76
|
) });
|
|
69
77
|
});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ColumnLayout.mjs","sources":["../../../../../../src/components/ColumnLayout/ColumnLayout.tsx"],"sourcesContent":["import type { CSSProperties, PropsWithChildren } from \"react\";\nimport React from \"react\";\nimport styles from \"./ColumnLayout.module.scss\";\nimport { getColumns } from \"./lib/getColumns\";\nimport clsx from \"clsx\";\nimport type {\n PropsWithClassName,\n PropsWithElementType,\n} from \"@/lib/types/props\";\nimport type { PropsContext } from \"@/lib/propsContext\";\nimport { PropsContextProvider } from \"@/lib/propsContext\";\nimport {\n flowComponent,\n type FlowComponentProps,\n} from \"@/lib/componentFactory/flowComponent\";\n\ntype GapSize = \"s\" | \"m\" | \"l\" | \"xl\";\n\nexport interface ColumnLayoutProps<\n T extends keyof HTMLElementTagNameMap = \"div\" | \"ul\",\n> extends PropsWithChildren,\n PropsWithElementType<T>,\n PropsWithClassName,\n FlowComponentProps<HTMLElementTagNameMap[T]> {\n /** Column layout for container size s. */\n s?: (number | null)[];\n /** Column layout for container size m. */\n m?: (number | null)[];\n /** Column layout for container size l. */\n l?: (number | null)[];\n /**\n * Size of the row and column gap between the content blocks inside the column\n * layout.\n *\n * @default \"m\"\n */\n gap?: GapSize;\n /** Size of the row gap between the content blocks inside the column layout. */\n rowGap?: GapSize;\n /** Size of the column gap between the content blocks inside the column layout. */\n columnGap?: GapSize;\n}\n\n/**\n * @flr-generate all\n * @flr-clear-props-context\n */\nexport const ColumnLayout = flowComponent(\"ColumnLayout\", (props) => {\n const {\n children,\n className,\n s,\n m,\n l,\n gap = \"m\",\n rowGap = gap,\n columnGap = gap,\n elementType = \"div\",\n \"aria-label\": ariaLabel,\n ref,\n } = props;\n\n let elementClassName = styles.columnLayout;\n\n s?.map((v, i) => {\n if (v === null) {\n elementClassName = clsx(elementClassName, styles[`hide-s-${i + 1}`]);\n }\n });\n m?.map((v, i) => {\n if (v === null) {\n elementClassName = clsx(elementClassName, styles[`hide-m-${i + 1}`]);\n }\n });\n l?.map((v, i) => {\n if (v === null) {\n elementClassName = clsx(elementClassName, styles[`hide-l-${i + 1}`]);\n }\n });\n\n const columnsS = s ? getColumns(s) : \"1fr\";\n const columnsM = m ? getColumns(m) : s ? columnsS : \"1fr 1fr\";\n const columnsL = l ? getColumns(l) : m || s ? columnsM : \"1fr 1fr 1fr\";\n\n const style = {\n \"--column-layout--columns-s\": columnsS,\n \"--column-layout--columns-m\": columnsM,\n \"--column-layout--columns-l\": columnsL,\n \"--column-layout--row-gap\": `var(--column-layout--gap--${rowGap})`,\n \"--column-layout--column-gap\": `var(--column-layout--gap--${columnGap})`,\n } as CSSProperties;\n\n const rootClassName = clsx(styles.columnLayoutContainer, className);\n\n const Element = elementType;\n\n const propsContext: PropsContext = {\n Section: {\n hideSeparator: true,\n },\n };\n\n return (\n <div className={rootClassName} style={style}>\n <Element\n ref={ref as never}\n aria-label={ariaLabel}\n className={elementClassName}\n >\n <PropsContextProvider
|
|
1
|
+
{"version":3,"file":"ColumnLayout.mjs","sources":["../../../../../../src/components/ColumnLayout/ColumnLayout.tsx"],"sourcesContent":["import type { CSSProperties, PropsWithChildren } from \"react\";\nimport React from \"react\";\nimport styles from \"./ColumnLayout.module.scss\";\nimport { getColumns } from \"./lib/getColumns\";\nimport clsx from \"clsx\";\nimport type {\n PropsWithClassName,\n PropsWithElementType,\n} from \"@/lib/types/props\";\nimport type { PropsContext } from \"@/lib/propsContext\";\nimport { PropsContextProvider } from \"@/lib/propsContext\";\nimport {\n flowComponent,\n type FlowComponentProps,\n} from \"@/lib/componentFactory/flowComponent\";\n\ntype GapSize = \"s\" | \"m\" | \"l\" | \"xl\";\n\nexport interface ColumnLayoutProps<\n T extends keyof HTMLElementTagNameMap = \"div\" | \"ul\",\n> extends PropsWithChildren,\n PropsWithElementType<T>,\n PropsWithClassName,\n FlowComponentProps<HTMLElementTagNameMap[T]> {\n /** Column layout for container size s. */\n s?: (number | null)[];\n /** Column layout for container size m. */\n m?: (number | null)[];\n /** Column layout for container size l. */\n l?: (number | null)[];\n /**\n * Size of the row and column gap between the content blocks inside the column\n * layout.\n *\n * @default \"m\"\n */\n gap?: GapSize;\n /** Size of the row gap between the content blocks inside the column layout. */\n rowGap?: GapSize;\n /** Size of the column gap between the content blocks inside the column layout. */\n columnGap?: GapSize;\n /* @internal */\n mergeInParentContext?: boolean;\n}\n\n/**\n * @flr-generate all\n * @flr-clear-props-context\n */\nexport const ColumnLayout = flowComponent(\"ColumnLayout\", (props) => {\n const {\n children,\n className,\n s,\n m,\n l,\n gap = \"m\",\n rowGap = gap,\n columnGap = gap,\n elementType = \"div\",\n \"aria-label\": ariaLabel,\n ref,\n mergeInParentContext,\n } = props;\n\n let elementClassName = styles.columnLayout;\n\n s?.map((v, i) => {\n if (v === null) {\n elementClassName = clsx(elementClassName, styles[`hide-s-${i + 1}`]);\n }\n });\n m?.map((v, i) => {\n if (v === null) {\n elementClassName = clsx(elementClassName, styles[`hide-m-${i + 1}`]);\n }\n });\n l?.map((v, i) => {\n if (v === null) {\n elementClassName = clsx(elementClassName, styles[`hide-l-${i + 1}`]);\n }\n });\n\n const columnsS = s ? getColumns(s) : \"1fr\";\n const columnsM = m ? getColumns(m) : s ? columnsS : \"1fr 1fr\";\n const columnsL = l ? getColumns(l) : m || s ? columnsM : \"1fr 1fr 1fr\";\n\n const style = {\n \"--column-layout--columns-s\": columnsS,\n \"--column-layout--columns-m\": columnsM,\n \"--column-layout--columns-l\": columnsL,\n \"--column-layout--row-gap\": `var(--column-layout--gap--${rowGap})`,\n \"--column-layout--column-gap\": `var(--column-layout--gap--${columnGap})`,\n } as CSSProperties;\n\n const rootClassName = clsx(styles.columnLayoutContainer, className);\n\n const Element = elementType;\n\n const propsContext: PropsContext = {\n Section: {\n hideSeparator: true,\n },\n };\n\n return (\n <div className={rootClassName} style={style}>\n <Element\n ref={ref as never}\n aria-label={ariaLabel}\n className={elementClassName}\n >\n <PropsContextProvider\n props={propsContext}\n mergeInParentContext={mergeInParentContext}\n >\n {children}\n </PropsContextProvider>\n </Element>\n </div>\n );\n});\n\nexport default ColumnLayout;\n"],"names":[],"mappings":";;;;;;;;;;AAiDO,MAAM,YAAe,GAAA,aAAA,CAAc,cAAgB,EAAA,CAAC,KAAU,KAAA;AACnE,EAAM,MAAA;AAAA,IACJ,QAAA;AAAA,IACA,SAAA;AAAA,IACA,CAAA;AAAA,IACA,CAAA;AAAA,IACA,CAAA;AAAA,IACA,GAAM,GAAA,GAAA;AAAA,IACN,MAAS,GAAA,GAAA;AAAA,IACT,SAAY,GAAA,GAAA;AAAA,IACZ,WAAc,GAAA,KAAA;AAAA,IACd,YAAc,EAAA,SAAA;AAAA,IACd,GAAA;AAAA,IACA;AAAA,GACE,GAAA,KAAA;AAEJ,EAAA,IAAI,mBAAmB,MAAO,CAAA,YAAA;AAE9B,EAAG,CAAA,EAAA,GAAA,CAAI,CAAC,CAAA,EAAG,CAAM,KAAA;AACf,IAAA,IAAI,MAAM,IAAM,EAAA;AACd,MAAA,gBAAA,GAAmB,KAAK,gBAAkB,EAAA,MAAA,CAAO,UAAU,CAAI,GAAA,CAAC,EAAE,CAAC,CAAA;AAAA;AACrE,GACD,CAAA;AACD,EAAG,CAAA,EAAA,GAAA,CAAI,CAAC,CAAA,EAAG,CAAM,KAAA;AACf,IAAA,IAAI,MAAM,IAAM,EAAA;AACd,MAAA,gBAAA,GAAmB,KAAK,gBAAkB,EAAA,MAAA,CAAO,UAAU,CAAI,GAAA,CAAC,EAAE,CAAC,CAAA;AAAA;AACrE,GACD,CAAA;AACD,EAAG,CAAA,EAAA,GAAA,CAAI,CAAC,CAAA,EAAG,CAAM,KAAA;AACf,IAAA,IAAI,MAAM,IAAM,EAAA;AACd,MAAA,gBAAA,GAAmB,KAAK,gBAAkB,EAAA,MAAA,CAAO,UAAU,CAAI,GAAA,CAAC,EAAE,CAAC,CAAA;AAAA;AACrE,GACD,CAAA;AAED,EAAA,MAAM,QAAW,GAAA,CAAA,GAAI,UAAW,CAAA,CAAC,CAAI,GAAA,KAAA;AACrC,EAAA,MAAM,WAAW,CAAI,GAAA,UAAA,CAAW,CAAC,CAAA,GAAI,IAAI,QAAW,GAAA,SAAA;AACpD,EAAA,MAAM,WAAW,CAAI,GAAA,UAAA,CAAW,CAAC,CAAI,GAAA,CAAA,IAAK,IAAI,QAAW,GAAA,aAAA;AAEzD,EAAA,MAAM,KAAQ,GAAA;AAAA,IACZ,4BAA8B,EAAA,QAAA;AAAA,IAC9B,4BAA8B,EAAA,QAAA;AAAA,IAC9B,4BAA8B,EAAA,QAAA;AAAA,IAC9B,0BAAA,EAA4B,6BAA6B,MAAM,CAAA,CAAA,CAAA;AAAA,IAC/D,6BAAA,EAA+B,6BAA6B,SAAS,CAAA,CAAA;AAAA,GACvE;AAEA,EAAA,MAAM,aAAgB,GAAA,IAAA,CAAK,MAAO,CAAA,qBAAA,EAAuB,SAAS,CAAA;AAElE,EAAA,MAAM,OAAU,GAAA,WAAA;AAEhB,EAAA,MAAM,YAA6B,GAAA;AAAA,IACjC,OAAS,EAAA;AAAA,MACP,aAAe,EAAA;AAAA;AACjB,GACF;AAEA,EAAA,uBACG,GAAA,CAAA,KAAA,EAAA,EAAI,SAAW,EAAA,aAAA,EAAe,KAC7B,EAAA,QAAA,kBAAA,GAAA;AAAA,IAAC,OAAA;AAAA,IAAA;AAAA,MACC,GAAA;AAAA,MACA,YAAY,EAAA,SAAA;AAAA,MACZ,SAAW,EAAA,gBAAA;AAAA,MAEX,QAAA,kBAAA,GAAA;AAAA,QAAC,oBAAA;AAAA,QAAA;AAAA,UACC,KAAO,EAAA,YAAA;AAAA,UACP,oBAAA;AAAA,UAEC;AAAA;AAAA;AACH;AAAA,GAEJ,EAAA,CAAA;AAEJ,CAAC;;;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ListItemViewContent.mjs","sources":["../../../../../../../../../../src/components/List/components/ListItemView/components/ListItemViewContent/ListItemViewContent.tsx"],"sourcesContent":["import type { ComponentProps, PropsWithChildren, ReactNode } from \"react\";\nimport React from \"react\";\nimport styles from \"../../ListItemView.module.scss\";\nimport {\n dynamic,\n type PropsContext,\n PropsContextProvider,\n} from \"@/lib/propsContext\";\nimport type { ListViewMode } from \"@/components/List/model/types\";\nimport clsx from \"clsx\";\nimport {\n ColumnLayout,\n type ColumnLayoutProps,\n} from \"@/components/ColumnLayout\";\n\nexport type ListItemViewContentProps = PropsWithChildren &\n Pick<ColumnLayoutProps, \"s\" | \"m\" | \"l\"> & {\n title?: ReactNode;\n subTitle?: ReactNode;\n avatar?: ReactNode;\n button?: ReactNode;\n bottom?: ReactNode;\n checkbox?: ReactNode;\n viewMode?: ListViewMode;\n };\n\nconst getStyleForContentSlot = (slot?: string) =>\n slot === \"top\"\n ? styles.topContent\n : slot === \"bottom\"\n ? styles.bottomContent\n : styles.topContent;\n\n/** @flr-generate all */\nexport const ListItemViewContent = (props: ListItemViewContentProps) => {\n const {\n children,\n avatar,\n title,\n subTitle,\n button,\n bottom,\n checkbox,\n viewMode,\n s,\n m,\n l,\n } = props;\n\n const contentProps: Record<string, ComponentProps<\"div\">> = {\n bottom: {\n onMouseDown: (e) => e.stopPropagation(),\n onPointerDown: (e) => e.stopPropagation(),\n className: styles.bottomContent,\n },\n top: {\n className: styles.topContent,\n },\n };\n\n const propsContext: PropsContext = {\n ContextMenu: {\n placement: \"bottom end\",\n },\n Button: {\n className: styles.action,\n },\n ActionGroup: {\n className: styles.action,\n },\n Content: {\n className: dynamic((p) => getStyleForContentSlot(p.slot)),\n onMouseDown: dynamic((p) => contentProps[p.slot ?? \"top\"]?.onMouseDown),\n onPointerDown: dynamic(\n (p) => contentProps[p.slot ?? \"top\"]?.onPointerDown,\n ),\n },\n Avatar: {\n className: styles.avatar,\n },\n Heading: {\n className: styles.heading,\n level: 5,\n Badge: { className: styles.badge },\n AlertBadge: { className: styles.badge },\n },\n Text: {\n className: styles.text,\n },\n Link: {\n unstyled: true,\n },\n };\n\n const className = clsx(\n styles.view,\n viewMode === \"tiles\" ? styles.tileView : styles.listView,\n );\n\n const header = (\n <div className={styles.header}>\n <div className={styles.checkboxContainer}>{checkbox}</div>\n {avatar}\n <div className={styles.title}>\n {title}\n <div className={styles.subTitle}>{subTitle}</div>\n </div>\n </div>\n );\n\n return (\n <PropsContextProvider props={propsContext} mergeInParentContext>\n <div className={className}>\n {viewMode === \"list\" && (\n <>\n <div className={styles.contentWrapper}>\n {s || m || l ? (\n <ColumnLayout\n s={s}\n m={m}\n l={l}\n className={clsx(styles.content, styles.columnLayout)}\n >\n {header}\n {children}\n </ColumnLayout>\n ) : (\n <div className={styles.content}>\n {header}\n {children}\n </div>\n )}\n {button}\n </div>\n {bottom}\n </>\n )}\n\n {viewMode === \"tiles\" && (\n <>\n <div className={styles.avatarContainer}>{avatar}</div>\n <div className={styles.content}>\n <div className={styles.header}>\n <div className={styles.checkboxContainer}>{checkbox}</div>\n <div className={styles.title}>\n {title}\n <div className={styles.subTitle}>{subTitle}</div>\n </div>\n </div>\n {button}\n {children}\n {bottom}\n </div>\n </>\n )}\n </div>\n </PropsContextProvider>\n );\n};\n\nexport default ListItemViewContent;\n"],"names":[],"mappings":"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
|
|
1
|
+
{"version":3,"file":"ListItemViewContent.mjs","sources":["../../../../../../../../../../src/components/List/components/ListItemView/components/ListItemViewContent/ListItemViewContent.tsx"],"sourcesContent":["import type { ComponentProps, PropsWithChildren, ReactNode } from \"react\";\nimport React from \"react\";\nimport styles from \"../../ListItemView.module.scss\";\nimport {\n dynamic,\n type PropsContext,\n PropsContextProvider,\n} from \"@/lib/propsContext\";\nimport type { ListViewMode } from \"@/components/List/model/types\";\nimport clsx from \"clsx\";\nimport {\n ColumnLayout,\n type ColumnLayoutProps,\n} from \"@/components/ColumnLayout\";\n\nexport type ListItemViewContentProps = PropsWithChildren &\n Pick<ColumnLayoutProps, \"s\" | \"m\" | \"l\"> & {\n title?: ReactNode;\n subTitle?: ReactNode;\n avatar?: ReactNode;\n button?: ReactNode;\n bottom?: ReactNode;\n checkbox?: ReactNode;\n viewMode?: ListViewMode;\n };\n\nconst getStyleForContentSlot = (slot?: string) =>\n slot === \"top\"\n ? styles.topContent\n : slot === \"bottom\"\n ? styles.bottomContent\n : styles.topContent;\n\n/** @flr-generate all */\nexport const ListItemViewContent = (props: ListItemViewContentProps) => {\n const {\n children,\n avatar,\n title,\n subTitle,\n button,\n bottom,\n checkbox,\n viewMode,\n s,\n m,\n l,\n } = props;\n\n const contentProps: Record<string, ComponentProps<\"div\">> = {\n bottom: {\n onMouseDown: (e) => e.stopPropagation(),\n onPointerDown: (e) => e.stopPropagation(),\n className: styles.bottomContent,\n },\n top: {\n className: styles.topContent,\n },\n };\n\n const propsContext: PropsContext = {\n ContextMenu: {\n placement: \"bottom end\",\n },\n Button: {\n className: styles.action,\n },\n ActionGroup: {\n className: styles.action,\n },\n Content: {\n className: dynamic((p) => getStyleForContentSlot(p.slot)),\n onMouseDown: dynamic((p) => contentProps[p.slot ?? \"top\"]?.onMouseDown),\n onPointerDown: dynamic(\n (p) => contentProps[p.slot ?? \"top\"]?.onPointerDown,\n ),\n },\n Avatar: {\n className: styles.avatar,\n },\n Heading: {\n className: styles.heading,\n level: 5,\n Badge: { className: styles.badge },\n AlertBadge: { className: styles.badge },\n },\n Text: {\n className: styles.text,\n },\n Link: {\n unstyled: true,\n },\n };\n\n const className = clsx(\n styles.view,\n viewMode === \"tiles\" ? styles.tileView : styles.listView,\n );\n\n const header = (\n <div className={styles.header}>\n <div className={styles.checkboxContainer}>{checkbox}</div>\n {avatar}\n <div className={styles.title}>\n {title}\n <div className={styles.subTitle}>{subTitle}</div>\n </div>\n </div>\n );\n\n return (\n <PropsContextProvider props={propsContext} mergeInParentContext>\n <div className={className}>\n {viewMode === \"list\" && (\n <>\n <div className={styles.contentWrapper}>\n {s || m || l ? (\n <ColumnLayout\n s={s}\n m={m}\n l={l}\n className={clsx(styles.content, styles.columnLayout)}\n mergeInParentContext\n >\n {header}\n {children}\n </ColumnLayout>\n ) : (\n <div className={styles.content}>\n {header}\n {children}\n </div>\n )}\n {button}\n </div>\n {bottom}\n </>\n )}\n\n {viewMode === \"tiles\" && (\n <>\n <div className={styles.avatarContainer}>{avatar}</div>\n <div className={styles.content}>\n <div className={styles.header}>\n <div className={styles.checkboxContainer}>{checkbox}</div>\n <div className={styles.title}>\n {title}\n <div className={styles.subTitle}>{subTitle}</div>\n </div>\n </div>\n {button}\n {children}\n {bottom}\n </div>\n </>\n )}\n </div>\n </PropsContextProvider>\n );\n};\n\nexport default ListItemViewContent;\n"],"names":[],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ColumnLayout.d.ts","sourceRoot":"","sources":["../../../../src/components/ColumnLayout/ColumnLayout.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAiB,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAC9D,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,OAAO,KAAK,EACV,kBAAkB,EAClB,oBAAoB,EACrB,MAAM,mBAAmB,CAAC;AAG3B,OAAO,EAEL,KAAK,kBAAkB,EACxB,MAAM,sCAAsC,CAAC;AAE9C,KAAK,OAAO,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,IAAI,CAAC;AAEtC,MAAM,WAAW,iBAAiB,CAChC,CAAC,SAAS,MAAM,qBAAqB,GAAG,KAAK,GAAG,IAAI,CACpD,SAAQ,iBAAiB,EACvB,oBAAoB,CAAC,CAAC,CAAC,EACvB,kBAAkB,EAClB,kBAAkB,CAAC,qBAAqB,CAAC,CAAC,CAAC,CAAC;IAC9C,0CAA0C;IAC1C,CAAC,CAAC,EAAE,CAAC,MAAM,GAAG,IAAI,CAAC,EAAE,CAAC;IACtB,0CAA0C;IAC1C,CAAC,CAAC,EAAE,CAAC,MAAM,GAAG,IAAI,CAAC,EAAE,CAAC;IACtB,0CAA0C;IAC1C,CAAC,CAAC,EAAE,CAAC,MAAM,GAAG,IAAI,CAAC,EAAE,CAAC;IACtB;;;;;OAKG;IACH,GAAG,CAAC,EAAE,OAAO,CAAC;IACd,+EAA+E;IAC/E,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,kFAAkF;IAClF,SAAS,CAAC,EAAE,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"ColumnLayout.d.ts","sourceRoot":"","sources":["../../../../src/components/ColumnLayout/ColumnLayout.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAiB,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAC9D,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,OAAO,KAAK,EACV,kBAAkB,EAClB,oBAAoB,EACrB,MAAM,mBAAmB,CAAC;AAG3B,OAAO,EAEL,KAAK,kBAAkB,EACxB,MAAM,sCAAsC,CAAC;AAE9C,KAAK,OAAO,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,IAAI,CAAC;AAEtC,MAAM,WAAW,iBAAiB,CAChC,CAAC,SAAS,MAAM,qBAAqB,GAAG,KAAK,GAAG,IAAI,CACpD,SAAQ,iBAAiB,EACvB,oBAAoB,CAAC,CAAC,CAAC,EACvB,kBAAkB,EAClB,kBAAkB,CAAC,qBAAqB,CAAC,CAAC,CAAC,CAAC;IAC9C,0CAA0C;IAC1C,CAAC,CAAC,EAAE,CAAC,MAAM,GAAG,IAAI,CAAC,EAAE,CAAC;IACtB,0CAA0C;IAC1C,CAAC,CAAC,EAAE,CAAC,MAAM,GAAG,IAAI,CAAC,EAAE,CAAC;IACtB,0CAA0C;IAC1C,CAAC,CAAC,EAAE,CAAC,MAAM,GAAG,IAAI,CAAC,EAAE,CAAC;IACtB;;;;;OAKG;IACH,GAAG,CAAC,EAAE,OAAO,CAAC;IACd,+EAA+E;IAC/E,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,kFAAkF;IAClF,SAAS,CAAC,EAAE,OAAO,CAAC;CAGrB;AAED;;;GAGG;AACH,eAAO,MAAM,YAAY,mHAwEvB,CAAC;AAEH,eAAe,YAAY,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ListItemViewContent.d.ts","sourceRoot":"","sources":["../../../../../../../../src/components/List/components/ListItemView/components/ListItemViewContent/ListItemViewContent.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAkB,iBAAiB,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAQ1E,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,+BAA+B,CAAC;AAElE,OAAO,EAEL,KAAK,iBAAiB,EACvB,MAAM,2BAA2B,CAAC;AAEnC,MAAM,MAAM,wBAAwB,GAAG,iBAAiB,GACtD,IAAI,CAAC,iBAAiB,EAAE,GAAG,GAAG,GAAG,GAAG,GAAG,CAAC,GAAG;IACzC,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,QAAQ,CAAC,EAAE,YAAY,CAAC;CACzB,CAAC;AASJ,wBAAwB;AACxB,eAAO,MAAM,mBAAmB,GAAI,OAAO,wBAAwB,
|
|
1
|
+
{"version":3,"file":"ListItemViewContent.d.ts","sourceRoot":"","sources":["../../../../../../../../src/components/List/components/ListItemView/components/ListItemViewContent/ListItemViewContent.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAkB,iBAAiB,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAQ1E,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,+BAA+B,CAAC;AAElE,OAAO,EAEL,KAAK,iBAAiB,EACvB,MAAM,2BAA2B,CAAC;AAEnC,MAAM,MAAM,wBAAwB,GAAG,iBAAiB,GACtD,IAAI,CAAC,iBAAiB,EAAE,GAAG,GAAG,GAAG,GAAG,GAAG,CAAC,GAAG;IACzC,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,QAAQ,CAAC,EAAE,YAAY,CAAC;CACzB,CAAC;AASJ,wBAAwB;AACxB,eAAO,MAAM,mBAAmB,GAAI,OAAO,wBAAwB,4CA6HlE,CAAC;AAEF,eAAe,mBAAmB,CAAC"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@mittwald/flow-react-components",
|
|
3
|
-
"version": "0.2.0-alpha.
|
|
3
|
+
"version": "0.2.0-alpha.187",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"description": "A React implementation of Flow, mittwald’s design system",
|
|
6
6
|
"homepage": "https://mittwald.github.io/flow",
|
|
@@ -53,7 +53,7 @@
|
|
|
53
53
|
"dependencies": {
|
|
54
54
|
"@chakra-ui/live-region": "^2.1.0",
|
|
55
55
|
"@internationalized/string-compiler": "^3.2.6",
|
|
56
|
-
"@mittwald/react-tunnel": "0.2.0-alpha.
|
|
56
|
+
"@mittwald/react-tunnel": "0.2.0-alpha.187",
|
|
57
57
|
"@mittwald/react-use-promise": "^3.0.4",
|
|
58
58
|
"@react-aria/form": "^3.0.14",
|
|
59
59
|
"@react-aria/utils": "^3.28.1",
|
|
@@ -92,7 +92,7 @@
|
|
|
92
92
|
"devDependencies": {
|
|
93
93
|
"@faker-js/faker": "^9.6.0",
|
|
94
94
|
"@internationalized/date": "^3.7.0",
|
|
95
|
-
"@mittwald/flow-design-tokens": "0.2.0-alpha.
|
|
95
|
+
"@mittwald/flow-design-tokens": "0.2.0-alpha.187",
|
|
96
96
|
"@mittwald/react-use-promise": "^2.6.0",
|
|
97
97
|
"@mittwald/remote-dom-react": "1.2.2-mittwald.3",
|
|
98
98
|
"@mittwald/typescript-config": "",
|
|
@@ -173,5 +173,5 @@
|
|
|
173
173
|
"optional": true
|
|
174
174
|
}
|
|
175
175
|
},
|
|
176
|
-
"gitHead": "
|
|
176
|
+
"gitHead": "bf723899648ba469d1ee6204b6015c8fa33c0e64"
|
|
177
177
|
}
|