@mittwald/flow-react-components 1.1.50 → 1.1.51
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/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"}
|
|
@@ -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"]
|