@mittwald/flow-react-components 1.1.50 → 1.1.52
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/Popover/Popover.module.mjs.map +1 -1
- package/dist/js/packages/components/src/components/Popover/components/PopoverContent/PopoverContent.mjs +11 -2
- package/dist/js/packages/components/src/components/Popover/components/PopoverContent/PopoverContent.mjs.map +1 -1
- package/dist/js/packages/components/src/components/Section/components/SectionHeader/SectionHeader.mjs +5 -5
- package/dist/js/packages/components/src/components/Section/components/SectionHeader/SectionHeader.mjs.map +1 -1
- package/dist/js/packages/design-tokens/dist/json-runtime/all-dark.mjs +4 -0
- package/dist/js/packages/design-tokens/dist/json-runtime/all-dark.mjs.map +1 -1
- package/dist/js/packages/design-tokens/dist/json-runtime/all-light.mjs +4 -0
- package/dist/js/packages/design-tokens/dist/json-runtime/all-light.mjs.map +1 -1
- package/dist/types/lib/theming/hooks/useDesignTokens.d.ts +4 -0
- package/package.json +9 -9
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Popover.module.mjs","names":[],"sources":["../../../../../../../src/components/Popover/Popover.module.scss"],"sourcesContent":["@use \"@/styles/mixins/scrollbar\";\n\n.popover {\n background-color: var(--popover--background-color);\n box-shadow: var(--popover--box-shadow);\n border-radius: var(--popover--corner-radius);\n display: flex;\n flex-direction: column;\n\n --size-px--s--negative: calc(var(--size-px--s) * -1);\n\n min-width: var(--popover--min-width);\n border-width: var(--popover--border-width);\n border-style: var(--popover--border-style);\n border-color: var(--popover--border-color);\n max-width:
|
|
1
|
+
{"version":3,"file":"Popover.module.mjs","names":[],"sources":["../../../../../../../src/components/Popover/Popover.module.scss"],"sourcesContent":["@use \"@/styles/mixins/scrollbar\";\n\n.popover {\n background-color: var(--popover--background-color);\n box-shadow: var(--popover--box-shadow);\n border-radius: var(--popover--corner-radius);\n display: flex;\n flex-direction: column;\n\n --size-px--s--negative: calc(var(--size-px--s) * -1);\n\n min-width: var(--popover--min-width);\n border-width: var(--popover--border-width);\n border-style: var(--popover--border-style);\n border-color: var(--popover--border-color);\n max-width: calc(100% - 2 * var(--popover--viewport-padding));\n\n :where(.content) {\n @include scrollbar.scrollbar;\n\n overflow-y: auto;\n\n &:focus-visible {\n outline: none;\n }\n }\n\n .tip {\n width: var(--popover--tip-width);\n\n svg {\n display: block;\n fill: var(--popover--background-color);\n stroke: var(--popover--border-color);\n stroke-width: var(--popover--border-width);\n }\n }\n\n &[data-placement=\"top\"] {\n --origin: translateY(var(--size-px--s));\n\n &:has(.tip) {\n margin-bottom: var(--popover--tip-height);\n }\n }\n\n &[data-placement=\"bottom\"] {\n --origin: translateY(var(--size-px--s--negative));\n\n &:has(.tip) {\n margin-top: var(--popover--tip-height);\n }\n\n .tip svg {\n transform: rotate(180deg);\n }\n }\n\n &[data-placement=\"right\"] {\n --origin: translateX(var(--size-px--s--negative));\n\n &:has(.tip) {\n margin-inline-start: var(--popover--tip-height);\n }\n\n .tip svg {\n transform: rotate(90deg);\n }\n }\n\n &[data-placement=\"left\"] {\n --origin: translateX(var(--size-px--s));\n\n &:has(.tip) {\n margin-inline-end: var(--popover--tip-height);\n }\n\n .tip svg {\n transform: rotate(-90deg);\n }\n }\n\n &[data-entering] {\n animation: popover-slide var(--transition--duration--default);\n }\n\n &[data-exiting] {\n animation: popover-slide var(--transition--duration--default) reverse\n ease-in;\n pointer-events: none;\n }\n\n &:has(:global(.flow--options):empty) {\n display: none;\n }\n}\n\n@keyframes popover-slide {\n from {\n transform: var(--origin);\n opacity: 0;\n }\n\n to {\n transform: translateY(0);\n opacity: 1;\n }\n}\n"],"mappings":""}
|
|
@@ -1,10 +1,19 @@
|
|
|
1
1
|
"use client"
|
|
2
2
|
/* */
|
|
3
|
+
import all_light_default from "../../../../../../design-tokens/dist/json-runtime/all-light.mjs";
|
|
3
4
|
import { useIsActivityActive } from "../../../Activity/context.mjs";
|
|
4
5
|
import Popover_module_default from "../../Popover.module.mjs";
|
|
5
6
|
import { jsx, jsxs } from "react/jsx-runtime";
|
|
6
7
|
import * as Aria from "react-aria-components";
|
|
7
8
|
//#region src/components/Popover/components/PopoverContent/PopoverContent.tsx
|
|
9
|
+
/**
|
|
10
|
+
* The gap a popover keeps to the viewport edge. The stylesheet caps the
|
|
11
|
+
* popover's width with it, `containerPadding` insets the position by it — and
|
|
12
|
+
* `containerPadding` is a number, so it cannot read the CSS variable.
|
|
13
|
+
*
|
|
14
|
+
* @internal
|
|
15
|
+
*/
|
|
16
|
+
var popoverViewportPadding = Number.parseFloat(all_light_default.popover["viewport-padding"].value);
|
|
8
17
|
/** @flr-generate all */
|
|
9
18
|
var PopoverContent = (props) => {
|
|
10
19
|
const { children, className, isDialogContent = false, withTip, onOpenChange, ref, isOpen, width, ...rest } = props;
|
|
@@ -14,7 +23,7 @@ var PopoverContent = (props) => {
|
|
|
14
23
|
return /* @__PURE__ */ jsxs(Aria.Popover, {
|
|
15
24
|
...rest,
|
|
16
25
|
className,
|
|
17
|
-
containerPadding:
|
|
26
|
+
containerPadding: popoverViewportPadding,
|
|
18
27
|
ref,
|
|
19
28
|
isOpen,
|
|
20
29
|
onOpenChange,
|
|
@@ -34,6 +43,6 @@ var PopoverContent = (props) => {
|
|
|
34
43
|
});
|
|
35
44
|
};
|
|
36
45
|
//#endregion
|
|
37
|
-
export { PopoverContent, PopoverContent as default };
|
|
46
|
+
export { PopoverContent, PopoverContent as default, popoverViewportPadding };
|
|
38
47
|
|
|
39
48
|
//# sourceMappingURL=PopoverContent.mjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"PopoverContent.mjs","names":[],"sources":["../../../../../../../../../src/components/Popover/components/PopoverContent/PopoverContent.tsx"],"sourcesContent":["import type { FC, PropsWithChildren, Ref, RefObject } from \"react\";\nimport * as Aria from \"react-aria-components\";\nimport styles from \"../../Popover.module.scss\";\nimport type { PropsWithClassName } from \"@/lib/types/props\";\nimport { useIsActivityActive } from \"@/components/Activity/context\";\n\nexport interface PopoverContentProps\n extends PropsWithChildren, PropsWithClassName {\n withTip?: boolean;\n isDialogContent?: boolean;\n isOpen?: boolean;\n width?: string | number;\n onOpenChange: (isOpen: boolean) => void;\n ref?: Ref<HTMLElement>;\n triggerRef?: RefObject<Element | null>;\n}\n\n/** @flr-generate all */\nexport const PopoverContent: FC<PopoverContentProps> = (props) => {\n const {\n children,\n className,\n isDialogContent = false,\n withTip,\n onOpenChange,\n ref,\n isOpen,\n width,\n ...rest\n } = props;\n\n const isActivityActive = useIsActivityActive();\n\n const ContentComponent = isDialogContent ? Aria.Dialog : \"div\";\n\n if (!isActivityActive) {\n return null;\n }\n\n return (\n <Aria.Popover\n {...rest}\n className={className}\n containerPadding={
|
|
1
|
+
{"version":3,"file":"PopoverContent.mjs","names":[],"sources":["../../../../../../../../../src/components/Popover/components/PopoverContent/PopoverContent.tsx"],"sourcesContent":["import type { FC, PropsWithChildren, Ref, RefObject } from \"react\";\nimport * as Aria from \"react-aria-components\";\nimport styles from \"../../Popover.module.scss\";\nimport type { PropsWithClassName } from \"@/lib/types/props\";\nimport { useIsActivityActive } from \"@/components/Activity/context\";\nimport tokens from \"@mittwald/flow-design-tokens/json-runtime/all-light.json\";\n\n/**\n * The gap a popover keeps to the viewport edge. The stylesheet caps the\n * popover's width with it, `containerPadding` insets the position by it — and\n * `containerPadding` is a number, so it cannot read the CSS variable.\n *\n * @internal\n */\nexport const popoverViewportPadding = Number.parseFloat(\n tokens.popover[\"viewport-padding\"].value,\n);\n\nexport interface PopoverContentProps\n extends PropsWithChildren, PropsWithClassName {\n withTip?: boolean;\n isDialogContent?: boolean;\n isOpen?: boolean;\n width?: string | number;\n onOpenChange: (isOpen: boolean) => void;\n ref?: Ref<HTMLElement>;\n triggerRef?: RefObject<Element | null>;\n}\n\n/** @flr-generate all */\nexport const PopoverContent: FC<PopoverContentProps> = (props) => {\n const {\n children,\n className,\n isDialogContent = false,\n withTip,\n onOpenChange,\n ref,\n isOpen,\n width,\n ...rest\n } = props;\n\n const isActivityActive = useIsActivityActive();\n\n const ContentComponent = isDialogContent ? Aria.Dialog : \"div\";\n\n if (!isActivityActive) {\n return null;\n }\n\n return (\n <Aria.Popover\n {...rest}\n className={className}\n containerPadding={popoverViewportPadding}\n ref={ref}\n isOpen={isOpen}\n onOpenChange={onOpenChange}\n style={{ width }}\n >\n {withTip && (\n <Aria.OverlayArrow className={styles.tip}>\n <svg width={16} height={16} viewBox=\"0 0 16 16\">\n <path d=\"M0 0 L8 8 L16 0\" />\n </svg>\n </Aria.OverlayArrow>\n )}\n <ContentComponent className={styles.content}>{children}</ContentComponent>\n </Aria.Popover>\n );\n};\n\nexport default PopoverContent;\n"],"mappings":";;;;;;;;;;;;;;;AAcA,IAAa,yBAAyB,OAAO,WAC3C,kBAAO,QAAQ,mBAAmB,CAAC,KACrC;;AAcA,IAAa,kBAA2C,UAAU;CAChE,MAAM,EACJ,UACA,WACA,kBAAkB,OAClB,SACA,cACA,KACA,QACA,OACA,GAAG,SACD;CAEJ,MAAM,mBAAmB,oBAAoB;CAE7C,MAAM,mBAAmB,kBAAkB,KAAK,SAAS;CAEzD,IAAI,CAAC,kBACH,OAAO;CAGT,OACE,qBAAC,KAAK,SAAN;EACE,GAAI;EACO;EACX,kBAAkB;EACb;EACG;EACM;EACd,OAAO,EAAE,MAAM;EAPjB,UAAA,CASG,WACC,oBAAC,KAAK,cAAN;GAAmB,WAAW,uBAAO;GACnC,UAAA,oBAAC,OAAD;IAAK,OAAO;IAAI,QAAQ;IAAI,SAAQ;IAClC,UAAA,oBAAC,QAAD,EAAM,GAAE,kBAAmB,CAAA;GACxB,CAAA;EACY,CAAA,GAErB,oBAAC,kBAAD;GAAkB,WAAW,uBAAO;GAAU;EAA2B,CAAA,CAC7D;;AAElB"}
|
|
@@ -31,7 +31,10 @@ var SectionHeader = flowComponent("SectionHeader", (props) => {
|
|
|
31
31
|
tunnel: actionsTunnel,
|
|
32
32
|
Button: { tunnel: null },
|
|
33
33
|
Switch: { tunnel: null },
|
|
34
|
-
Link: {
|
|
34
|
+
Link: {
|
|
35
|
+
size: "m",
|
|
36
|
+
tunnel: null
|
|
37
|
+
}
|
|
35
38
|
},
|
|
36
39
|
FileField: {
|
|
37
40
|
tunnel: actionsTunnel,
|
|
@@ -42,10 +45,7 @@ var SectionHeader = flowComponent("SectionHeader", (props) => {
|
|
|
42
45
|
Button: { tunnel: null }
|
|
43
46
|
},
|
|
44
47
|
Heading: { level: 2 },
|
|
45
|
-
Link: {
|
|
46
|
-
size: "s",
|
|
47
|
-
tunnel: actionsTunnel
|
|
48
|
-
}
|
|
48
|
+
Link: { tunnel: actionsTunnel }
|
|
49
49
|
};
|
|
50
50
|
return /* @__PURE__ */ jsx("header", {
|
|
51
51
|
ref,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SectionHeader.mjs","names":[],"sources":["../../../../../../../../../src/components/Section/components/SectionHeader/SectionHeader.tsx"],"sourcesContent":["import type { FC, PropsWithChildren, RefAttributes } from \"react\";\nimport styles from \"./SectionHeader.module.scss\";\nimport clsx from \"clsx\";\nimport type { PropsContext } from \"@/lib/propsContext\";\nimport {\n overlayTriggersTunneledTo,\n PropsContextProvider,\n} from \"@/lib/propsContext\";\nimport type { PropsWithClassName } from \"@/lib/types/props\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\nimport { UiComponentTunnelExit } from \"@/components/UiComponentTunnel/UiComponentTunnelExit\";\n\nexport type SectionHeaderProps = PropsWithChildren &\n PropsWithClassName &\n RefAttributes<HTMLHeadingElement>;\n\nexport const SectionHeader: FC<SectionHeaderProps> = flowComponent(\n \"SectionHeader\",\n (props) => {\n const { children, className, ref } = props;\n\n const rootClassName = clsx(styles.sectionHeader, className);\n\n const actionsTunnel = {\n id: \"actions\",\n component: \"SectionHeader\",\n } as const;\n\n const propsContext: PropsContext = {\n ...overlayTriggersTunneledTo(actionsTunnel),\n Switch: {\n labelPosition: \"leading\",\n tunnel: actionsTunnel,\n },\n Button: {\n size: \"s\",\n tunnel: actionsTunnel,\n },\n ActionGroup: {\n preserveOrder: true,\n size: \"s\",\n tunnel: actionsTunnel,\n Button: {\n tunnel: null,\n },\n Switch: {\n tunnel: null,\n },\n Link: {\n tunnel: null,\n },\n },\n FileField: {\n tunnel: actionsTunnel,\n Button: { size: \"s\" },\n },\n Action: {\n tunnel: actionsTunnel,\n Button: {\n tunnel: null,\n },\n },\n Heading: {\n level: 2,\n },\n Link: {\n
|
|
1
|
+
{"version":3,"file":"SectionHeader.mjs","names":[],"sources":["../../../../../../../../../src/components/Section/components/SectionHeader/SectionHeader.tsx"],"sourcesContent":["import type { FC, PropsWithChildren, RefAttributes } from \"react\";\nimport styles from \"./SectionHeader.module.scss\";\nimport clsx from \"clsx\";\nimport type { PropsContext } from \"@/lib/propsContext\";\nimport {\n overlayTriggersTunneledTo,\n PropsContextProvider,\n} from \"@/lib/propsContext\";\nimport type { PropsWithClassName } from \"@/lib/types/props\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\nimport { UiComponentTunnelExit } from \"@/components/UiComponentTunnel/UiComponentTunnelExit\";\n\nexport type SectionHeaderProps = PropsWithChildren &\n PropsWithClassName &\n RefAttributes<HTMLHeadingElement>;\n\nexport const SectionHeader: FC<SectionHeaderProps> = flowComponent(\n \"SectionHeader\",\n (props) => {\n const { children, className, ref } = props;\n\n const rootClassName = clsx(styles.sectionHeader, className);\n\n const actionsTunnel = {\n id: \"actions\",\n component: \"SectionHeader\",\n } as const;\n\n const propsContext: PropsContext = {\n ...overlayTriggersTunneledTo(actionsTunnel),\n Switch: {\n labelPosition: \"leading\",\n tunnel: actionsTunnel,\n },\n Button: {\n size: \"s\",\n tunnel: actionsTunnel,\n },\n ActionGroup: {\n preserveOrder: true,\n size: \"s\",\n tunnel: actionsTunnel,\n Button: {\n tunnel: null,\n },\n Switch: {\n tunnel: null,\n },\n Link: {\n size: \"m\",\n tunnel: null,\n },\n },\n FileField: {\n tunnel: actionsTunnel,\n Button: { size: \"s\" },\n },\n Action: {\n tunnel: actionsTunnel,\n Button: {\n tunnel: null,\n },\n },\n Heading: {\n level: 2,\n },\n Link: {\n tunnel: actionsTunnel,\n },\n };\n\n return (\n <header ref={ref} className={rootClassName}>\n <PropsContextProvider props={propsContext}>\n {children}\n <div className={styles.actions}>\n <UiComponentTunnelExit id=\"actions\" component=\"SectionHeader\" />\n </div>\n </PropsContextProvider>\n </header>\n );\n },\n {\n type: \"layout\",\n },\n);\n\nexport default SectionHeader;\n"],"mappings":";;;;;;;;;;AAgBA,IAAa,gBAAwC,cACnD,kBACC,UAAU;CACT,MAAM,EAAE,UAAU,WAAW,QAAQ;CAErC,MAAM,gBAAgB,KAAK,6BAAO,eAAe,SAAS;CAE1D,MAAM,gBAAgB;EACpB,IAAI;EACJ,WAAW;CACb;CAEA,MAAM,eAA6B;EACjC,GAAG,0BAA0B,aAAa;EAC1C,QAAQ;GACN,eAAe;GACf,QAAQ;EACV;EACA,QAAQ;GACN,MAAM;GACN,QAAQ;EACV;EACA,aAAa;GACX,eAAe;GACf,MAAM;GACN,QAAQ;GACR,QAAQ,EACN,QAAQ,KACV;GACA,QAAQ,EACN,QAAQ,KACV;GACA,MAAM;IACJ,MAAM;IACN,QAAQ;GACV;EACF;EACA,WAAW;GACT,QAAQ;GACR,QAAQ,EAAE,MAAM,IAAI;EACtB;EACA,QAAQ;GACN,QAAQ;GACR,QAAQ,EACN,QAAQ,KACV;EACF;EACA,SAAS,EACP,OAAO,EACT;EACA,MAAM,EACJ,QAAQ,cACV;CACF;CAEA,OACE,oBAAC,UAAD;EAAa;EAAK,WAAW;EAC3B,UAAA,qBAAC,sBAAD;GAAsB,OAAO;GAA7B,UAAA,CACG,UACD,oBAAC,OAAD;IAAK,WAAW,6BAAO;IACrB,UAAA,oBAAC,uBAAD;KAAuB,IAAG;KAAU,WAAU;IAAiB,CAAA;GAC5D,CAAA,CACe;;CAChB,CAAA;AAEZ,GACA,EACE,MAAM,SACR,CACF"}
|
|
@@ -2216,6 +2216,10 @@ var popover = {
|
|
|
2216
2216
|
"value": "200px",
|
|
2217
2217
|
"path": ["popover", "min-width"]
|
|
2218
2218
|
},
|
|
2219
|
+
"viewport-padding": {
|
|
2220
|
+
"value": "16px",
|
|
2221
|
+
"path": ["popover", "viewport-padding"]
|
|
2222
|
+
},
|
|
2219
2223
|
"border-width": {
|
|
2220
2224
|
"value": "1px",
|
|
2221
2225
|
"path": ["popover", "border-width"]
|