@frontify/fondue-components 3.3.3 → 3.3.4
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/fondue-components22.js +9 -9
- package/dist/fondue-components22.js.map +1 -1
- package/dist/fondue-components26.js +1 -1
- package/dist/fondue-components29.js +1 -1
- package/dist/fondue-components31.js +1 -1
- package/dist/fondue-components36.js +7 -7
- package/dist/fondue-components50.js +1 -1
- package/dist/fondue-components53.js +1 -1
- package/dist/fondue-components58.js +11 -2
- package/dist/fondue-components58.js.map +1 -1
- package/dist/fondue-components59.js +2 -39
- package/dist/fondue-components59.js.map +1 -1
- package/dist/fondue-components60.js +38 -10
- package/dist/fondue-components60.js.map +1 -1
- package/dist/fondue-components7.js.map +1 -1
- package/dist/index.d.ts +1 -1
- package/dist/style.css +1 -1
- package/package.json +1 -1
|
@@ -1,11 +1,11 @@
|
|
|
1
1
|
import { jsx as e, jsxs as T } from "react/jsx-runtime";
|
|
2
2
|
import * as o from "@radix-ui/react-tooltip";
|
|
3
|
-
import { forwardRef as
|
|
3
|
+
import { forwardRef as n } from "react";
|
|
4
4
|
import { cn as f } from "./fondue-components25.js";
|
|
5
|
-
import
|
|
5
|
+
import s from "./fondue-components57.js";
|
|
6
6
|
const d = ({ children: t, enterDelay: r = 700, open: i, onOpenChange: a }) => /* @__PURE__ */ e(o.Provider, { children: /* @__PURE__ */ e(o.Root, { delayDuration: r, open: i, onOpenChange: a, children: t }) });
|
|
7
7
|
d.displayName = "Tooltip.Root";
|
|
8
|
-
const l = ({ children: t, "data-test-id": r = "fondue-tooltip-trigger" }, i) => /* @__PURE__ */ e(o.Trigger, { "data-test-id": r,
|
|
8
|
+
const l = ({ children: t, "data-test-id": r = "fondue-tooltip-trigger" }, i) => /* @__PURE__ */ e(o.Trigger, { "data-test-id": r, ref: i, children: t });
|
|
9
9
|
l.displayName = "Tooltip.Trigger";
|
|
10
10
|
const p = ({
|
|
11
11
|
children: t,
|
|
@@ -19,7 +19,7 @@ const p = ({
|
|
|
19
19
|
{
|
|
20
20
|
"data-test-id": a,
|
|
21
21
|
"data-tooltip-spacing": m,
|
|
22
|
-
className: f(
|
|
22
|
+
className: f(s.root, r),
|
|
23
23
|
style: { maxWidth: i },
|
|
24
24
|
collisionPadding: 16,
|
|
25
25
|
sideOffset: 8,
|
|
@@ -27,18 +27,18 @@ const p = ({
|
|
|
27
27
|
...c,
|
|
28
28
|
children: [
|
|
29
29
|
t,
|
|
30
|
-
/* @__PURE__ */ e(o.Arrow, { "aria-hidden": "true", className:
|
|
30
|
+
/* @__PURE__ */ e(o.Arrow, { "aria-hidden": "true", className: s.arrow })
|
|
31
31
|
]
|
|
32
32
|
}
|
|
33
33
|
) });
|
|
34
34
|
p.displayName = "Tooltip.Content";
|
|
35
|
-
const
|
|
35
|
+
const h = {
|
|
36
36
|
Root: d,
|
|
37
|
-
Trigger:
|
|
38
|
-
Content:
|
|
37
|
+
Trigger: n(l),
|
|
38
|
+
Content: n(p)
|
|
39
39
|
};
|
|
40
40
|
export {
|
|
41
|
-
|
|
41
|
+
h as Tooltip,
|
|
42
42
|
p as TooltipContent,
|
|
43
43
|
d as TooltipRoot,
|
|
44
44
|
l as TooltipTrigger
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"fondue-components22.js","sources":["../src/components/Tooltip/Tooltip.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport * as RadixTooltip from '@radix-ui/react-tooltip';\nimport { forwardRef, type ForwardedRef, type ReactElement, type ReactNode } from 'react';\n\nimport { cn } from '#/utilities/styleUtilities';\n\nimport styles from './styles/tooltip.module.scss';\n\nexport type TooltipRootProps = {\n /**\n * Sets the open state of the tooltip.\n */\n open?: boolean;\n /**\n * Callback that is called when the open state of the tooltip changes.\n */\n onOpenChange?: (open: boolean) => void;\n /**\n * The delay in milliseconds before the tooltip appears.\n * @default 700\n */\n enterDelay?: number;\n children: Array<ReactElement<TooltipTriggerProps | TooltipContentProps>>;\n};\nexport type TooltipTriggerProps = {
|
|
1
|
+
{"version":3,"file":"fondue-components22.js","sources":["../src/components/Tooltip/Tooltip.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport * as RadixTooltip from '@radix-ui/react-tooltip';\nimport { forwardRef, type ForwardedRef, type ReactElement, type ReactNode } from 'react';\n\nimport { cn } from '#/utilities/styleUtilities';\n\nimport styles from './styles/tooltip.module.scss';\n\nexport type TooltipRootProps = {\n /**\n * Sets the open state of the tooltip.\n */\n open?: boolean;\n /**\n * Callback that is called when the open state of the tooltip changes.\n */\n onOpenChange?: (open: boolean) => void;\n /**\n * The delay in milliseconds before the tooltip appears.\n * @default 700\n */\n enterDelay?: number;\n children: Array<ReactElement<TooltipTriggerProps | TooltipContentProps>>;\n};\nexport type TooltipTriggerProps = {\n children: ReactNode;\n 'data-test-id'?: string;\n};\nexport type TooltipContentProps = {\n /**\n * @default \"spacious\"\n */\n padding?: 'spacious' | 'compact';\n /**\n * Defines the preferred side of the tooltip. It will not be respected if there are collisions with the viewport.\n */\n side?: 'top' | 'right' | 'bottom' | 'left';\n maxWidth?: string;\n className?: string;\n children: ReactNode;\n 'data-test-id'?: string;\n};\n\nexport const TooltipRoot = ({ children, enterDelay = 700, open, onOpenChange }: TooltipRootProps) => {\n return (\n <RadixTooltip.Provider>\n <RadixTooltip.Root delayDuration={enterDelay} open={open} onOpenChange={onOpenChange}>\n {children}\n </RadixTooltip.Root>\n </RadixTooltip.Provider>\n );\n};\nTooltipRoot.displayName = 'Tooltip.Root';\n\nexport const TooltipTrigger = (\n { children, 'data-test-id': dataTestId = 'fondue-tooltip-trigger' }: TooltipTriggerProps,\n ref: ForwardedRef<HTMLButtonElement>,\n) => {\n return (\n <RadixTooltip.Trigger data-test-id={dataTestId} ref={ref}>\n {children}\n </RadixTooltip.Trigger>\n );\n};\nTooltipTrigger.displayName = 'Tooltip.Trigger';\n\nexport const TooltipContent = (\n {\n children,\n className,\n maxWidth,\n 'data-test-id': dataTestId = 'fondue-tooltip-content',\n padding = 'spacious',\n ...props\n }: TooltipContentProps,\n ref: ForwardedRef<HTMLDivElement>,\n) => {\n return (\n <RadixTooltip.Portal>\n <RadixTooltip.Content\n data-test-id={dataTestId}\n data-tooltip-spacing={padding}\n className={cn(styles.root, className)}\n style={{ maxWidth }}\n collisionPadding={16}\n sideOffset={8}\n ref={ref}\n {...props}\n >\n {children}\n <RadixTooltip.Arrow aria-hidden=\"true\" className={styles.arrow} />\n </RadixTooltip.Content>\n </RadixTooltip.Portal>\n );\n};\nTooltipContent.displayName = 'Tooltip.Content';\n\nexport const Tooltip = {\n Root: TooltipRoot,\n Trigger: forwardRef<HTMLButtonElement, TooltipTriggerProps>(TooltipTrigger),\n Content: forwardRef<HTMLDivElement, TooltipContentProps>(TooltipContent),\n};\n"],"names":["TooltipRoot","children","enterDelay","open","onOpenChange","jsx","RadixTooltip","TooltipTrigger","dataTestId","ref","TooltipContent","className","maxWidth","padding","props","jsxs","cn","styles","Tooltip","forwardRef"],"mappings":";;;;;AA4Ca,MAAAA,IAAc,CAAC,EAAE,UAAAC,GAAU,YAAAC,IAAa,KAAK,MAAAC,GAAM,cAAAC,QAEvD,gBAAAC,EAAAC,EAAa,UAAb,EACG,UAAC,gBAAAD,EAAAC,EAAa,MAAb,EAAkB,eAAeJ,GAAY,MAAAC,GAAY,cAAAC,GACrD,UAAAH,GACL,EACJ,CAAA;AAGRD,EAAY,cAAc;AAEb,MAAAO,IAAiB,CAC1B,EAAE,UAAAN,GAAU,gBAAgBO,IAAa,4BACzCC,wBAGKH,EAAa,SAAb,EAAqB,gBAAcE,GAAY,KAAAC,GAC3C,UAAAR,EACL,CAAA;AAGRM,EAAe,cAAc;AAEtB,MAAMG,IAAiB,CAC1B;AAAA,EACI,UAAAT;AAAA,EACA,WAAAU;AAAA,EACA,UAAAC;AAAA,EACA,gBAAgBJ,IAAa;AAAA,EAC7B,SAAAK,IAAU;AAAA,EACV,GAAGC;AACP,GACAL,MAGI,gBAAAJ,EAACC,EAAa,QAAb,EACG,UAAA,gBAAAS;AAAA,EAACT,EAAa;AAAA,EAAb;AAAA,IACG,gBAAcE;AAAA,IACd,wBAAsBK;AAAA,IACtB,WAAWG,EAAGC,EAAO,MAAMN,CAAS;AAAA,IACpC,OAAO,EAAE,UAAAC,EAAS;AAAA,IAClB,kBAAkB;AAAA,IAClB,YAAY;AAAA,IACZ,KAAAH;AAAA,IACC,GAAGK;AAAA,IAEH,UAAA;AAAA,MAAAb;AAAA,MACD,gBAAAI,EAACC,EAAa,OAAb,EAAmB,eAAY,QAAO,WAAWW,EAAO,OAAO;AAAA,IAAA;AAAA,EAAA;AAExE,EAAA,CAAA;AAGRP,EAAe,cAAc;AAEtB,MAAMQ,IAAU;AAAA,EACnB,MAAMlB;AAAA,EACN,SAASmB,EAAmDZ,CAAc;AAAA,EAC1E,SAASY,EAAgDT,CAAc;AAC3E;"}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { FOCUS_OUTLINE as t } from "./fondue-
|
|
1
|
+
import { FOCUS_OUTLINE as t } from "./fondue-components59.js";
|
|
2
2
|
import { sv as e } from "./fondue-components25.js";
|
|
3
3
|
const o = e({
|
|
4
4
|
base: `tw-group tw-border tw-relative tw-flex tw-flex-row tw-gap-2 tw-items-center tw-justify-center tw-cursor-pointer tw-font-body tw-font-medium ${t}`,
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { FOCUS_OUTLINE as t } from "./fondue-
|
|
1
|
+
import { FOCUS_OUTLINE as t } from "./fondue-components59.js";
|
|
2
2
|
import { sv as e } from "./fondue-components25.js";
|
|
3
3
|
const s = e({
|
|
4
4
|
base: `tw-peer tw-relative tw-inline-flex tw-bg-base tw-text-white tw-shrink-0 tw-rounded tw-border tw-border-line-x-strong group-hover:tw-border-line-xx-strong hover:tw-border-line-xx-strong tw-transition-colors data-[state="checked"]:tw-border-transparent data-[state="indeterminate"]:tw-border-transparent disabled:tw-border-line-strong disabled:tw-bg-base disabled:tw-cursor-not-allowed data-[state="checked"]:disabled:tw-bg-box-disabled-strong ${t}`,
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { jsxs as d, jsx as a, Fragment as m } from "react/jsx-runtime";
|
|
2
2
|
import { IconDroplet as n, IconTrashBin as p, IconCaretDown as f } from "@frontify/fondue-icons";
|
|
3
3
|
import { forwardRef as I, useId as N } from "react";
|
|
4
|
-
import i from "./fondue-
|
|
4
|
+
import i from "./fondue-components58.js";
|
|
5
5
|
import { colorToCss as h } from "./fondue-components34.js";
|
|
6
6
|
const c = ({ currentColor: e, onClear: s, "data-test-id": t = "color-picker-input", ...r }, l) => {
|
|
7
7
|
const o = N();
|
|
@@ -1,17 +1,17 @@
|
|
|
1
|
-
const o = "
|
|
1
|
+
const o = "_content_1nokb_6", n = "_header_1nokb_50", t = "_footer_1nokb_51", e = "_body_1nokb_52", _ = "_underlay_1nokb_77", d = "_sideContent_1nokb_90", s = {
|
|
2
2
|
content: o,
|
|
3
|
-
header:
|
|
4
|
-
footer:
|
|
5
|
-
body:
|
|
3
|
+
header: n,
|
|
4
|
+
footer: t,
|
|
5
|
+
body: e,
|
|
6
6
|
underlay: _,
|
|
7
7
|
sideContent: d
|
|
8
8
|
};
|
|
9
9
|
export {
|
|
10
|
-
|
|
10
|
+
e as body,
|
|
11
11
|
o as content,
|
|
12
12
|
s as default,
|
|
13
|
-
|
|
14
|
-
|
|
13
|
+
t as footer,
|
|
14
|
+
n as header,
|
|
15
15
|
d as sideContent,
|
|
16
16
|
_ as underlay
|
|
17
17
|
};
|
|
@@ -4,7 +4,7 @@ import { Slot as S } from "@radix-ui/react-slot";
|
|
|
4
4
|
import { useRef as g, isValidElement as C } from "react";
|
|
5
5
|
import { usePreventDropdownOverflow as M } from "./fondue-components38.js";
|
|
6
6
|
import n from "./fondue-components52.js";
|
|
7
|
-
import { recursiveMap as N, getSelectOptionValue as P } from "./fondue-
|
|
7
|
+
import { recursiveMap as N, getSelectOptionValue as P } from "./fondue-components60.js";
|
|
8
8
|
const V = ({
|
|
9
9
|
highlightedIndex: p,
|
|
10
10
|
getMenuProps: u,
|
|
@@ -3,7 +3,7 @@ import { IconCross as x } from "@frontify/fondue-icons";
|
|
|
3
3
|
import { useState as B, useMemo as i, Children as f, isValidElement as a, cloneElement as E, useCallback as v } from "react";
|
|
4
4
|
import { ForwardedRefSelectItem as F } from "./fondue-components49.js";
|
|
5
5
|
import { ForwardedRefSelectSlot as c } from "./fondue-components51.js";
|
|
6
|
-
import { getSelectOptionValue as I } from "./fondue-
|
|
6
|
+
import { getSelectOptionValue as I } from "./fondue-components60.js";
|
|
7
7
|
const S = (r) => {
|
|
8
8
|
const t = [];
|
|
9
9
|
return f.forEach(r, (o) => {
|
|
@@ -1,5 +1,14 @@
|
|
|
1
|
-
const t = "
|
|
1
|
+
const o = "_root_6hy5w_5", c = "_colorName_6hy5w_53", t = "_colorIndicator_6hy5w_57", r = "_caret_6hy5w_63", _ = {
|
|
2
|
+
root: o,
|
|
3
|
+
colorName: c,
|
|
4
|
+
colorIndicator: t,
|
|
5
|
+
caret: r
|
|
6
|
+
};
|
|
2
7
|
export {
|
|
3
|
-
|
|
8
|
+
r as caret,
|
|
9
|
+
t as colorIndicator,
|
|
10
|
+
c as colorName,
|
|
11
|
+
_ as default,
|
|
12
|
+
o as root
|
|
4
13
|
};
|
|
5
14
|
//# sourceMappingURL=fondue-components58.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"fondue-components58.js","sources":[
|
|
1
|
+
{"version":3,"file":"fondue-components58.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;"}
|
|
@@ -1,42 +1,5 @@
|
|
|
1
|
-
|
|
2
|
-
import { ForwardedRefSelectItem as E } from "./fondue-components49.js";
|
|
3
|
-
const g = ({
|
|
4
|
-
children: r,
|
|
5
|
-
value: o,
|
|
6
|
-
label: s
|
|
7
|
-
}) => r && typeof r == "string" ? {
|
|
8
|
-
value: o || r,
|
|
9
|
-
label: s || r
|
|
10
|
-
} : {
|
|
11
|
-
value: o || "",
|
|
12
|
-
label: s || o || ""
|
|
13
|
-
}, w = (r, o) => u(r) && r.type === o, y = (r, o, s, p = 0) => {
|
|
14
|
-
const n = [];
|
|
15
|
-
let t = 0;
|
|
16
|
-
return a.forEach(r, (e) => {
|
|
17
|
-
if (w(e, E) && u(e))
|
|
18
|
-
g(e.props).label.toLowerCase().includes((s == null ? void 0 : s.toLowerCase()) || "") && (n.push(o(e, p + t)), t++);
|
|
19
|
-
else if (u(e) && (e != null && e.props.children)) {
|
|
20
|
-
const { parsedChildren: m, subElementCount: C } = y(
|
|
21
|
-
e.props.children,
|
|
22
|
-
o,
|
|
23
|
-
"",
|
|
24
|
-
p + t
|
|
25
|
-
);
|
|
26
|
-
e = f(e, {
|
|
27
|
-
children: m,
|
|
28
|
-
key: `group-${p + t}`
|
|
29
|
-
}), n.push(e), t += C;
|
|
30
|
-
} else
|
|
31
|
-
n.push(e);
|
|
32
|
-
}), {
|
|
33
|
-
parsedChildren: n,
|
|
34
|
-
subElementCount: t
|
|
35
|
-
};
|
|
36
|
-
};
|
|
1
|
+
const t = "focus-visible:tw-outline has-[[data-show-focus-ring=true]]:tw-outline tw-outline-4 tw-outline-offset-2 tw-outline-blue focus-visible:tw-outline-blue";
|
|
37
2
|
export {
|
|
38
|
-
|
|
39
|
-
w as isReactLeaf,
|
|
40
|
-
y as recursiveMap
|
|
3
|
+
t as FOCUS_OUTLINE
|
|
41
4
|
};
|
|
42
5
|
//# sourceMappingURL=fondue-components59.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"fondue-components59.js","sources":["../src/
|
|
1
|
+
{"version":3,"file":"fondue-components59.js","sources":["../src/utilities/focusStyle.ts"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nexport const FOCUS_OUTLINE =\n 'focus-visible:tw-outline has-[[data-show-focus-ring=true]]:tw-outline tw-outline-4 tw-outline-offset-2 tw-outline-blue focus-visible:tw-outline-blue'; // second declaration of tw-outline-blue is to assure that in firefox the outline isn't overriden by a global definition of :-moz-focusring which is coming from tailwinds normalization styling\n"],"names":["FOCUS_OUTLINE"],"mappings":"AAEO,MAAMA,IACT;"}
|
|
@@ -1,14 +1,42 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
1
|
+
import { Children as a, isValidElement as u, cloneElement as f } from "react";
|
|
2
|
+
import { ForwardedRefSelectItem as E } from "./fondue-components49.js";
|
|
3
|
+
const g = ({
|
|
4
|
+
children: r,
|
|
5
|
+
value: o,
|
|
6
|
+
label: s
|
|
7
|
+
}) => r && typeof r == "string" ? {
|
|
8
|
+
value: o || r,
|
|
9
|
+
label: s || r
|
|
10
|
+
} : {
|
|
11
|
+
value: o || "",
|
|
12
|
+
label: s || o || ""
|
|
13
|
+
}, w = (r, o) => u(r) && r.type === o, y = (r, o, s, p = 0) => {
|
|
14
|
+
const n = [];
|
|
15
|
+
let t = 0;
|
|
16
|
+
return a.forEach(r, (e) => {
|
|
17
|
+
if (w(e, E) && u(e))
|
|
18
|
+
g(e.props).label.toLowerCase().includes((s == null ? void 0 : s.toLowerCase()) || "") && (n.push(o(e, p + t)), t++);
|
|
19
|
+
else if (u(e) && (e != null && e.props.children)) {
|
|
20
|
+
const { parsedChildren: m, subElementCount: C } = y(
|
|
21
|
+
e.props.children,
|
|
22
|
+
o,
|
|
23
|
+
"",
|
|
24
|
+
p + t
|
|
25
|
+
);
|
|
26
|
+
e = f(e, {
|
|
27
|
+
children: m,
|
|
28
|
+
key: `group-${p + t}`
|
|
29
|
+
}), n.push(e), t += C;
|
|
30
|
+
} else
|
|
31
|
+
n.push(e);
|
|
32
|
+
}), {
|
|
33
|
+
parsedChildren: n,
|
|
34
|
+
subElementCount: t
|
|
35
|
+
};
|
|
6
36
|
};
|
|
7
37
|
export {
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
_ as default,
|
|
12
|
-
o as root
|
|
38
|
+
g as getSelectOptionValue,
|
|
39
|
+
w as isReactLeaf,
|
|
40
|
+
y as recursiveMap
|
|
13
41
|
};
|
|
14
42
|
//# sourceMappingURL=fondue-components60.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"fondue-components60.js","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"fondue-components60.js","sources":["../src/components/Select/utils.ts"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport {\n Children,\n cloneElement,\n isValidElement,\n type JSXElementConstructor,\n type ReactElement,\n type ReactNode,\n} from 'react';\n\nimport { ForwardedRefSelectItem, type SelectItemProps } from './SelectItem';\n\n/**\n * Extracts and returns an object containing `value` and `label` from a given SelectItemProps object.\n * It prioritizes explicit `value` and `label` properties but will fall back to using `children` as the value or label if necessary.\n *\n * @param {SelectItemProps} props - The properties of a select item, which include potential children, value, and label.\n * @returns {{ value: string; label: string }} An object containing `value` and `label` as strings.\n *\n * @example\n * // Returns { value: 'option1', label: 'Option 1' }\n * getSelectOptionValue({ value: 'option1', label: 'Option 1' });\n *\n * @example\n * // Uses children as the value and label when they are not explicitly provided\n * // Returns { value: 'Default', label: 'Default' }\n * getSelectOptionValue({ children: 'Default' });\n */\nexport const getSelectOptionValue = ({\n children,\n value,\n label,\n}: SelectItemProps): {\n value: string;\n label: string;\n} => {\n if (children && typeof children === 'string') {\n return {\n value: value ? value : children,\n label: label ? label : children,\n };\n }\n\n return {\n value: value || '',\n label: label ? label : value || '',\n };\n};\n/**\n * Determines if the child is a leaf node of React, meaning it has one final child of a native type;\n *\n * @param {ReactNode} child - The React child node to check.\n * @param {JSXElementConstructor<never>} Component - The React component constructor used for comparison.\n * @returns {boolean} Returns true if the `child` is a valid React element of the specified `Component` type.\n *\n * @example\n * // Assuming ForwardedRefSelectItem is a component that renders an <input> element\n * // Returns true\n * isReactLeaf(<ForwardedRefSelectItem />, ForwardedRefSelectItem);\n *\n * @example\n * // Returns false for non-matching types or non-leaf components\n * isReactLeaf(<div><ForwardedRefSelectItem /></div>, ForwardedRefSelectItem);\n */\nexport const isReactLeaf = (child: ReactNode, Component: JSXElementConstructor<never>): child is ReactElement =>\n isValidElement(child) && child.type === Component;\n\n/**\n * Recursively maps through React children, applying a callback to each child that meets the specified conditions.\n * This function is useful for deeply nested structures where modifications or checks are needed at multiple levels.\n *\n * @param {ReactNode} children - The children to be recursively processed.\n * @param {function(ReactNode, number): ReactNode} callback - A function that is called for each child that meets the condition. It receives the child and its index, and returns a React node.\n * @param {string} [filterText=''] - Optional text used to filter children based on their properties.\n * @param {number} [nextIndex=0] - The starting index for numbering children, defaults to 0.\n * @returns {{ parsedChildren: ReactNode[], subElementCount: number }} An object containing the transformed children array and the count of all processed sub-elements.\n *\n * @example\n * // Example usage in a select component where only items containing a certain text are modified\n * recursiveMap(children, (child, index) => React.cloneElement(child, { extraProp: 'value' }), 'specific text');\n *\n * @example\n * // Nested structure transformation, adding class names based on index\n * recursiveMap(children, (child, index) => React.cloneElement(child, { className: `item-${index}` }));\n */\nexport const recursiveMap = (\n children: ReactNode,\n callback: (child: ReactNode, nextIndex: number) => ReactNode,\n filterText?: string,\n nextIndex: number = 0,\n): {\n parsedChildren: ReactNode[];\n subElementCount: number;\n} => {\n const resultingChildren: ReactNode[] = [];\n let itemCounter = 0;\n Children.forEach(children, (child) => {\n if (isReactLeaf(child, ForwardedRefSelectItem) && isValidElement<SelectItemProps>(child)) {\n if (\n getSelectOptionValue(child.props)\n .label.toLowerCase()\n .includes(filterText?.toLowerCase() || '')\n ) {\n resultingChildren.push(callback(child, nextIndex + itemCounter));\n itemCounter++;\n }\n } else if (isValidElement<{ children: ReactNode }>(child) && child?.props.children) {\n const { parsedChildren, subElementCount } = recursiveMap(\n child.props.children,\n callback,\n '',\n nextIndex + itemCounter,\n );\n child = cloneElement(child, {\n children: parsedChildren,\n key: `group-${nextIndex + itemCounter}`,\n });\n resultingChildren.push(child);\n itemCounter += subElementCount;\n } else {\n resultingChildren.push(child);\n }\n });\n return {\n parsedChildren: resultingChildren,\n subElementCount: itemCounter,\n };\n};\n"],"names":["getSelectOptionValue","children","value","label","isReactLeaf","child","Component","isValidElement","recursiveMap","callback","filterText","nextIndex","resultingChildren","itemCounter","Children","ForwardedRefSelectItem","parsedChildren","subElementCount","cloneElement"],"mappings":";;AA6BO,MAAMA,IAAuB,CAAC;AAAA,EACjC,UAAAC;AAAA,EACA,OAAAC;AAAA,EACA,OAAAC;AACJ,MAIQF,KAAY,OAAOA,KAAa,WACzB;AAAA,EACH,OAAOC,KAAgBD;AAAA,EACvB,OAAOE,KAAgBF;AAAA,IAIxB;AAAA,EACH,OAAOC,KAAS;AAAA,EAChB,OAAOC,KAAgBD,KAAS;AAAA,GAmB3BE,IAAc,CAACC,GAAkBC,MAC1CC,EAAeF,CAAK,KAAKA,EAAM,SAASC,GAoB/BE,IAAe,CACxBP,GACAQ,GACAC,GACAC,IAAoB,MAInB;AACD,QAAMC,IAAiC,CAAA;AACvC,MAAIC,IAAc;AACT,SAAAC,EAAA,QAAQb,GAAU,CAACI,MAAU;AAClC,QAAID,EAAYC,GAAOU,CAAsB,KAAKR,EAAgCF,CAAK;AACnF,MACIL,EAAqBK,EAAM,KAAK,EAC3B,MAAM,cACN,UAASK,KAAA,gBAAAA,EAAY,kBAAiB,EAAE,MAE7CE,EAAkB,KAAKH,EAASJ,GAAOM,IAAYE,CAAW,CAAC,GAC/DA;AAAA,aAEGN,EAAwCF,CAAK,MAAKA,KAAA,QAAAA,EAAO,MAAM,WAAU;AAC1E,YAAA,EAAE,gBAAAW,GAAgB,iBAAAC,EAAA,IAAoBT;AAAA,QACxCH,EAAM,MAAM;AAAA,QACZI;AAAA,QACA;AAAA,QACAE,IAAYE;AAAA,MAAA;AAEhB,MAAAR,IAAQa,EAAab,GAAO;AAAA,QACxB,UAAUW;AAAA,QACV,KAAK,SAASL,IAAYE,CAAW;AAAA,MAAA,CACxC,GACDD,EAAkB,KAAKP,CAAK,GACbQ,KAAAI;AAAA,IAAA;AAEf,MAAAL,EAAkB,KAAKP,CAAK;AAAA,EAChC,CACH,GACM;AAAA,IACH,gBAAgBO;AAAA,IAChB,iBAAiBC;AAAA,EAAA;AAEzB;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"fondue-components7.js","sources":["../src/components/Dialog/Dialog.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { IconCross } from '@frontify/fondue-icons';\nimport * as RadixDialog from '@radix-ui/react-dialog';\nimport { createContext, forwardRef, useContext, type CSSProperties, type ForwardedRef, type ReactNode } from 'react';\n\nimport { addAutoFocusAttribute, addShowFocusRing } from '#/utilities/domUtilities';\n\nimport styles from './styles/dialog.module.scss';\n\nexport type DialogRootProps = {\n /**\n * Disable interaction with the rest of the page\n * @default false\n */\n modal?: boolean;\n /**\n * The controlled `open` state of the dialog\n * @default false\n */\n open?: boolean;\n /**\n * Event handler called when the `open` state changes\n */\n onOpenChange?: (open: boolean) => void;\n children?: ReactNode;\n};\n\nexport type DialogContentProps = {\n /**\n * Add rounded corners to the dialog\n * @default true\n */\n rounded?: boolean;\n /**\n * Define the padding of the dialog\n * @default \"compact\"\n */\n padding?: 'none' | 'tight' | 'compact' | 'comfortable' | 'spacious';\n /**\n * The vertical alignment of the divider\n * @default \"center\"\n */\n verticalAlign?: 'top' | 'center';\n\n /**\n * Define a maximum width for the dialog\n * @default \"800px\"\n */\n maxWidth?: string;\n /**\n * Define a minimum width for the dialog\n * @default \"400px\"\n */\n minWidth?: string;\n /**\n * Define a maximum height for the dialog\n * @default \"200px\"\n */\n minHeight?: string;\n /**\n * Show a dark underlay behind the dialog\n * @default false\n */\n showUnderlay?: boolean;\n children?: ReactNode;\n 'data-test-id'?: string;\n};\n\nexport type DialogTriggerProps = { children?: ReactNode; 'data-test-id'?: string };\n\nexport type DialogHeaderProps = {\n /**\n * Show a close button in the header\n * @default true\n */\n showCloseButton?: boolean;\n children?: ReactNode;\n 'data-test-id'?: string;\n};\n\nexport type DialogFooterProps = { children?: ReactNode; 'data-test-id'?: string };\n\nexport type DialogBodyProps = { children?: ReactNode; 'data-test-id'?: string };\n\nexport type DialogSideContentProps = { children?: ReactNode; 'data-test-id'?: string };\n\nexport type DialogCloseProps = { children?: ReactNode };\n\nexport type DialogAnnouncementProps = { children?: ReactNode; asChild?: boolean };\n\ntype DialogContextType = {\n isModal: boolean;\n};\n\nconst DialogContext = createContext<DialogContextType>({ isModal: false });\n\nexport const DialogRoot = ({ children, ...props }: DialogRootProps) => {\n return (\n <DialogContext.Provider value={{ isModal: props.modal ?? false }}>\n <RadixDialog.Root {...props}>{children}</RadixDialog.Root>\n </DialogContext.Provider>\n );\n};\nDialogRoot.displayName = 'Dialog.Root';\n\nexport const DialogTrigger = (\n { children, 'data-test-id': dataTestId = 'fondue-dialog-trigger' }: DialogTriggerProps,\n ref: ForwardedRef<HTMLButtonElement>,\n) => {\n return (\n <RadixDialog.Trigger\n onMouseDown={addAutoFocusAttribute}\n data-auto-focus-visible=\"true\"\n data-auto-focus-trigger\n data-test-id={dataTestId}\n asChild\n ref={ref}\n >\n {children}\n </RadixDialog.Trigger>\n );\n};\nDialogTrigger.displayName = 'Dialog.Trigger';\n\nconst DialogUnderlay = ({ children, showUnderlay }: { children: ReactNode; showUnderlay: boolean }) => {\n const { isModal } = useContext(DialogContext);\n if (isModal) {\n return (\n <RadixDialog.Overlay data-visible={showUnderlay} className={styles.underlay}>\n {children}\n </RadixDialog.Overlay>\n );\n }\n return (\n <div className={styles.underlay} data-visible={showUnderlay}>\n {children}\n </div>\n );\n};\n\nexport const DialogContent = (\n {\n maxWidth = '800px',\n minWidth = '400px',\n minHeight = '200px',\n padding = 'compact',\n verticalAlign = 'center',\n 'data-test-id': dataTestId = 'fondue-dialog-content',\n showUnderlay = false,\n children,\n rounded = true,\n ...props\n }: DialogContentProps,\n ref: ForwardedRef<HTMLDivElement>,\n) => {\n return (\n <RadixDialog.Portal>\n <DialogUnderlay showUnderlay={showUnderlay}>\n <RadixDialog.Content\n style={\n {\n '--dialog-max-width': maxWidth,\n '--dialog-min-width': minWidth,\n '--dialog-min-height': minHeight,\n } as CSSProperties\n }\n ref={ref}\n className={styles.content}\n onFocus={addShowFocusRing}\n data-dialog-rounded={rounded}\n data-dialog-spacing={padding}\n data-test-id={dataTestId}\n data-dialog-vertical-align={verticalAlign}\n {...props}\n >\n {children}\n </RadixDialog.Content>\n </DialogUnderlay>\n </RadixDialog.Portal>\n );\n};\nDialogContent.displayName = 'Dialog.Content';\n\nexport const DialogHeader = (\n { children, showCloseButton = true, 'data-test-id': dataTestId = 'fondue-dialog-header' }: DialogHeaderProps,\n ref: ForwardedRef<HTMLDivElement>,\n) => {\n return (\n <div data-test-id={dataTestId} ref={ref} className={styles.header} data-dialog-layout-component>\n <div>{children}</div>\n {showCloseButton && (\n <RadixDialog.Close role=\"button\" data-test-id={`${dataTestId}-close`} className=\"tw-cursor-pointer\">\n <IconCross size={20} />\n </RadixDialog.Close>\n )}\n </div>\n );\n};\nDialogHeader.displayName = 'Dialog.Header';\n\nexport const DialogFooter = (\n { children, 'data-test-id': dataTestId = 'fondue-dialog-footer' }: DialogFooterProps,\n ref: ForwardedRef<HTMLDivElement>,\n) => {\n return (\n <div data-test-id={dataTestId} ref={ref} className={styles.footer} data-dialog-layout-component>\n {children}\n </div>\n );\n};\nDialogFooter.displayName = 'Dialog.Footer';\n\nexport const DialogBody = (\n { children, 'data-test-id': dataTestId = 'fondue-dialog-body' }: DialogBodyProps,\n ref: ForwardedRef<HTMLDivElement>,\n) => {\n return (\n <div data-test-id={dataTestId} ref={ref} className={styles.body} data-dialog-layout-component>\n {children}\n </div>\n );\n};\nDialogBody.displayName = 'Dialog.Body';\n\nexport const DialogSideContent = (\n { children, 'data-test-id': dataTestId = 'fondue-dialog-side-content' }: DialogSideContentProps,\n ref: ForwardedRef<HTMLDivElement>,\n) => {\n return (\n <div data-test-id={dataTestId} ref={ref} className={styles.sideContent} data-dialog-layout-component>\n {children}\n </div>\n );\n};\nDialogSideContent.displayName = 'Dialog.SideContent';\n\nexport const DialogClose = ({ children }: DialogCloseProps) => {\n return <RadixDialog.Close asChild>{children}</RadixDialog.Close>;\n};\nDialogClose.displayName = 'Dialog.Close';\n\nexport const DialogTitle = ({ children, asChild }: DialogAnnouncementProps) => {\n return <RadixDialog.Title asChild={asChild}>{children}</RadixDialog.Title>;\n};\nDialogTitle.displayName = 'Dialog.Title';\n\nexport const DialogDescription = ({ children, asChild }: DialogAnnouncementProps) => {\n return <RadixDialog.Description asChild={asChild}>{children}</RadixDialog.Description>;\n};\nDialogDescription.displayName = 'Dialog.Description';\n\nexport const Dialog = {\n Root: DialogRoot,\n Title: DialogTitle,\n Description: DialogDescription,\n Close: DialogClose,\n Trigger: forwardRef<HTMLButtonElement, DialogTriggerProps>(DialogTrigger),\n Content: forwardRef<HTMLDivElement, DialogContentProps>(DialogContent),\n Header: forwardRef<HTMLDivElement, DialogHeaderProps>(DialogHeader),\n Footer: forwardRef<HTMLDivElement, DialogFooterProps>(DialogFooter),\n Body: forwardRef<HTMLDivElement, DialogBodyProps>(DialogBody),\n SideContent: forwardRef<HTMLDivElement, DialogSideContentProps>(DialogSideContent),\n};\n"],"names":["DialogContext","createContext","DialogRoot","children","props","RadixDialog","DialogTrigger","dataTestId","ref","jsx","addAutoFocusAttribute","DialogUnderlay","showUnderlay","isModal","useContext","styles","DialogContent","maxWidth","minWidth","minHeight","padding","verticalAlign","rounded","addShowFocusRing","DialogHeader","showCloseButton","jsxs","IconCross","DialogFooter","DialogBody","DialogSideContent","DialogClose","DialogTitle","asChild","DialogDescription","Dialog","forwardRef"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"fondue-components7.js","sources":["../src/components/Dialog/Dialog.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { IconCross } from '@frontify/fondue-icons';\nimport * as RadixDialog from '@radix-ui/react-dialog';\nimport { createContext, forwardRef, useContext, type CSSProperties, type ForwardedRef, type ReactNode } from 'react';\n\nimport { addAutoFocusAttribute, addShowFocusRing } from '#/utilities/domUtilities';\n\nimport styles from './styles/dialog.module.scss';\n\nexport type DialogRootProps = {\n /**\n * Disable interaction with the rest of the page\n * @default false\n */\n modal?: boolean;\n /**\n * The controlled `open` state of the dialog\n * @default false\n */\n open?: boolean;\n /**\n * Event handler called when the `open` state changes\n */\n onOpenChange?: (open: boolean) => void;\n children?: ReactNode;\n};\n\nexport type DialogContentProps = {\n /**\n * Add rounded corners to the dialog\n * @default true\n */\n rounded?: boolean;\n /**\n * Define the padding of the dialog\n * @default \"compact\"\n */\n padding?: 'none' | 'tight' | 'compact' | 'comfortable' | 'spacious';\n /**\n * The vertical alignment of the divider\n * @default \"center\"\n */\n verticalAlign?: 'top' | 'center';\n\n /**\n * Define a maximum width for the dialog\n * @default \"800px\"\n */\n maxWidth?: string;\n /**\n * Define a minimum width for the dialog\n * @default \"400px\"\n */\n minWidth?: string;\n /**\n * Define a minimum height for the dialog\n * @default \"200px\"\n */\n minHeight?: string;\n /**\n * Show a dark underlay behind the dialog\n * @default false\n */\n showUnderlay?: boolean;\n children?: ReactNode;\n 'data-test-id'?: string;\n};\n\nexport type DialogTriggerProps = { children?: ReactNode; 'data-test-id'?: string };\n\nexport type DialogHeaderProps = {\n /**\n * Show a close button in the header\n * @default true\n */\n showCloseButton?: boolean;\n children?: ReactNode;\n 'data-test-id'?: string;\n};\n\nexport type DialogFooterProps = { children?: ReactNode; 'data-test-id'?: string };\n\nexport type DialogBodyProps = { children?: ReactNode; 'data-test-id'?: string };\n\nexport type DialogSideContentProps = { children?: ReactNode; 'data-test-id'?: string };\n\nexport type DialogCloseProps = { children?: ReactNode };\n\nexport type DialogAnnouncementProps = { children?: ReactNode; asChild?: boolean };\n\ntype DialogContextType = {\n isModal: boolean;\n};\n\nconst DialogContext = createContext<DialogContextType>({ isModal: false });\n\nexport const DialogRoot = ({ children, ...props }: DialogRootProps) => {\n return (\n <DialogContext.Provider value={{ isModal: props.modal ?? false }}>\n <RadixDialog.Root {...props}>{children}</RadixDialog.Root>\n </DialogContext.Provider>\n );\n};\nDialogRoot.displayName = 'Dialog.Root';\n\nexport const DialogTrigger = (\n { children, 'data-test-id': dataTestId = 'fondue-dialog-trigger' }: DialogTriggerProps,\n ref: ForwardedRef<HTMLButtonElement>,\n) => {\n return (\n <RadixDialog.Trigger\n onMouseDown={addAutoFocusAttribute}\n data-auto-focus-visible=\"true\"\n data-auto-focus-trigger\n data-test-id={dataTestId}\n asChild\n ref={ref}\n >\n {children}\n </RadixDialog.Trigger>\n );\n};\nDialogTrigger.displayName = 'Dialog.Trigger';\n\nconst DialogUnderlay = ({ children, showUnderlay }: { children: ReactNode; showUnderlay: boolean }) => {\n const { isModal } = useContext(DialogContext);\n if (isModal) {\n return (\n <RadixDialog.Overlay data-visible={showUnderlay} className={styles.underlay}>\n {children}\n </RadixDialog.Overlay>\n );\n }\n return (\n <div className={styles.underlay} data-visible={showUnderlay}>\n {children}\n </div>\n );\n};\n\nexport const DialogContent = (\n {\n maxWidth = '800px',\n minWidth = '400px',\n minHeight = '200px',\n padding = 'compact',\n verticalAlign = 'center',\n 'data-test-id': dataTestId = 'fondue-dialog-content',\n showUnderlay = false,\n children,\n rounded = true,\n ...props\n }: DialogContentProps,\n ref: ForwardedRef<HTMLDivElement>,\n) => {\n return (\n <RadixDialog.Portal>\n <DialogUnderlay showUnderlay={showUnderlay}>\n <RadixDialog.Content\n style={\n {\n '--dialog-max-width': maxWidth,\n '--dialog-min-width': minWidth,\n '--dialog-min-height': minHeight,\n } as CSSProperties\n }\n ref={ref}\n className={styles.content}\n onFocus={addShowFocusRing}\n data-dialog-rounded={rounded}\n data-dialog-spacing={padding}\n data-test-id={dataTestId}\n data-dialog-vertical-align={verticalAlign}\n {...props}\n >\n {children}\n </RadixDialog.Content>\n </DialogUnderlay>\n </RadixDialog.Portal>\n );\n};\nDialogContent.displayName = 'Dialog.Content';\n\nexport const DialogHeader = (\n { children, showCloseButton = true, 'data-test-id': dataTestId = 'fondue-dialog-header' }: DialogHeaderProps,\n ref: ForwardedRef<HTMLDivElement>,\n) => {\n return (\n <div data-test-id={dataTestId} ref={ref} className={styles.header} data-dialog-layout-component>\n <div>{children}</div>\n {showCloseButton && (\n <RadixDialog.Close role=\"button\" data-test-id={`${dataTestId}-close`} className=\"tw-cursor-pointer\">\n <IconCross size={20} />\n </RadixDialog.Close>\n )}\n </div>\n );\n};\nDialogHeader.displayName = 'Dialog.Header';\n\nexport const DialogFooter = (\n { children, 'data-test-id': dataTestId = 'fondue-dialog-footer' }: DialogFooterProps,\n ref: ForwardedRef<HTMLDivElement>,\n) => {\n return (\n <div data-test-id={dataTestId} ref={ref} className={styles.footer} data-dialog-layout-component>\n {children}\n </div>\n );\n};\nDialogFooter.displayName = 'Dialog.Footer';\n\nexport const DialogBody = (\n { children, 'data-test-id': dataTestId = 'fondue-dialog-body' }: DialogBodyProps,\n ref: ForwardedRef<HTMLDivElement>,\n) => {\n return (\n <div data-test-id={dataTestId} ref={ref} className={styles.body} data-dialog-layout-component>\n {children}\n </div>\n );\n};\nDialogBody.displayName = 'Dialog.Body';\n\nexport const DialogSideContent = (\n { children, 'data-test-id': dataTestId = 'fondue-dialog-side-content' }: DialogSideContentProps,\n ref: ForwardedRef<HTMLDivElement>,\n) => {\n return (\n <div data-test-id={dataTestId} ref={ref} className={styles.sideContent} data-dialog-layout-component>\n {children}\n </div>\n );\n};\nDialogSideContent.displayName = 'Dialog.SideContent';\n\nexport const DialogClose = ({ children }: DialogCloseProps) => {\n return <RadixDialog.Close asChild>{children}</RadixDialog.Close>;\n};\nDialogClose.displayName = 'Dialog.Close';\n\nexport const DialogTitle = ({ children, asChild }: DialogAnnouncementProps) => {\n return <RadixDialog.Title asChild={asChild}>{children}</RadixDialog.Title>;\n};\nDialogTitle.displayName = 'Dialog.Title';\n\nexport const DialogDescription = ({ children, asChild }: DialogAnnouncementProps) => {\n return <RadixDialog.Description asChild={asChild}>{children}</RadixDialog.Description>;\n};\nDialogDescription.displayName = 'Dialog.Description';\n\nexport const Dialog = {\n Root: DialogRoot,\n Title: DialogTitle,\n Description: DialogDescription,\n Close: DialogClose,\n Trigger: forwardRef<HTMLButtonElement, DialogTriggerProps>(DialogTrigger),\n Content: forwardRef<HTMLDivElement, DialogContentProps>(DialogContent),\n Header: forwardRef<HTMLDivElement, DialogHeaderProps>(DialogHeader),\n Footer: forwardRef<HTMLDivElement, DialogFooterProps>(DialogFooter),\n Body: forwardRef<HTMLDivElement, DialogBodyProps>(DialogBody),\n SideContent: forwardRef<HTMLDivElement, DialogSideContentProps>(DialogSideContent),\n};\n"],"names":["DialogContext","createContext","DialogRoot","children","props","RadixDialog","DialogTrigger","dataTestId","ref","jsx","addAutoFocusAttribute","DialogUnderlay","showUnderlay","isModal","useContext","styles","DialogContent","maxWidth","minWidth","minHeight","padding","verticalAlign","rounded","addShowFocusRing","DialogHeader","showCloseButton","jsxs","IconCross","DialogFooter","DialogBody","DialogSideContent","DialogClose","DialogTitle","asChild","DialogDescription","Dialog","forwardRef"],"mappings":"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"}
|