@frontify/fondue 12.0.0-beta.171 → 12.0.0-beta.172

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.
@@ -1,19 +1,19 @@
1
- import { toShortRgb as r } from "../../utilities/colors.es.js";
2
- import e from "react";
1
+ import { toShortRgb as e } from "../../utilities/colors.es.js";
2
+ import t from "react";
3
3
  import w from "tinycolor2";
4
- const i = ({ color: t }) => {
5
- const o = w(r(t)).toRgbString();
6
- return /* @__PURE__ */ e.createElement(
4
+ const l = ({ color: o }) => {
5
+ const r = w(e(o)).toRgbString();
6
+ return /* @__PURE__ */ t.createElement("div", { className: "tw-sticky tw-ml-[-1px] tw-mt-[-1px] tw-border tw-border-transparent tw-w-full tw-box-content tw-shrink-0 tw-h-2 tw-top-0 tw-rounded-t tw-overflow-hidden" }, /* @__PURE__ */ t.createElement(
7
7
  "div",
8
8
  {
9
- className: "tw-sticky tw-box-content tw-shrink-0 tw-h-2 tw-top-0 tw-bg-white tw-z-20 dark:tw-bg-black-95 tw-border-line tw-mt-[-1px] tw-rounded-t tw-border tw-border-b-0",
10
- style: { backgroundColor: o },
9
+ className: "tw-h-full tw-w-full tw-bg-white tw-z-20 dark:tw-bg-black-95",
10
+ style: { backgroundColor: r },
11
11
  "data-test-id": "color-preview"
12
12
  }
13
- );
13
+ ));
14
14
  };
15
- i.displayName = "FondueColorPreview";
15
+ l.displayName = "FondueColorPreview";
16
16
  export {
17
- i as ColorPreview
17
+ l as ColorPreview
18
18
  };
19
19
  //# sourceMappingURL=ColorPreview.es.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"ColorPreview.es.js","sources":["../../../src/components/ColorPicker/ColorPreview.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { toShortRgb } from '@utilities/colors';\nimport React, { ReactElement } from 'react';\nimport tinycolor from 'tinycolor2';\nimport { Color } from '../../types/colors';\n\ntype ColorPreviewProps = {\n color: Color;\n};\n\nexport const ColorPreview = ({ color }: ColorPreviewProps): ReactElement => {\n const parsedColor = tinycolor(toShortRgb(color));\n const backgroundColor = parsedColor.toRgbString();\n\n return (\n <div\n className=\"tw-sticky tw-box-content tw-shrink-0 tw-h-2 tw-top-0 tw-bg-white tw-z-20 dark:tw-bg-black-95 tw-border-line tw-mt-[-1px] tw-rounded-t tw-border tw-border-b-0\"\n style={{ backgroundColor }}\n data-test-id=\"color-preview\"\n ></div>\n );\n};\nColorPreview.displayName = 'FondueColorPreview';\n"],"names":["ColorPreview","color","backgroundColor","tinycolor","toShortRgb","React"],"mappings":";;;AAWO,MAAMA,IAAe,CAAC,EAAE,OAAAC,QAA6C;AAElE,QAAAC,IADcC,EAAUC,EAAWH,CAAK,CAAC,EACX;AAGhC,SAAA,gBAAAI,EAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACG,WAAU;AAAA,MACV,OAAO,EAAE,iBAAAH,EAAgB;AAAA,MACzB,gBAAa;AAAA,IAAA;AAAA,EAAA;AAGzB;AACAF,EAAa,cAAc;"}
1
+ {"version":3,"file":"ColorPreview.es.js","sources":["../../../src/components/ColorPicker/ColorPreview.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { toShortRgb } from '@utilities/colors';\nimport React, { ReactElement } from 'react';\nimport tinycolor from 'tinycolor2';\nimport { Color } from '../../types/colors';\n\ntype ColorPreviewProps = {\n color: Color;\n};\n\nexport const ColorPreview = ({ color }: ColorPreviewProps): ReactElement => {\n const parsedColor = tinycolor(toShortRgb(color));\n const backgroundColor = parsedColor.toRgbString();\n\n return (\n <div className=\"tw-sticky tw-ml-[-1px] tw-mt-[-1px] tw-border tw-border-transparent tw-w-full tw-box-content tw-shrink-0 tw-h-2 tw-top-0 tw-rounded-t tw-overflow-hidden\">\n <div\n className=\"tw-h-full tw-w-full tw-bg-white tw-z-20 dark:tw-bg-black-95\"\n style={{ backgroundColor }}\n data-test-id=\"color-preview\"\n ></div>\n </div>\n );\n};\nColorPreview.displayName = 'FondueColorPreview';\n"],"names":["ColorPreview","color","backgroundColor","tinycolor","toShortRgb","React"],"mappings":";;;AAWO,MAAMA,IAAe,CAAC,EAAE,OAAAC,QAA6C;AAElE,QAAAC,IADcC,EAAUC,EAAWH,CAAK,CAAC,EACX;AAGhC,SAAA,gBAAAI,EAAA,cAAC,OAAI,EAAA,WAAU,2JACX,GAAA,gBAAAA,EAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACG,WAAU;AAAA,MACV,OAAO,EAAE,iBAAAH,EAAgB;AAAA,MACzB,gBAAa;AAAA,IAAA;AAAA,EAAA,CAErB;AAER;AACAF,EAAa,cAAc;"}
@@ -1,41 +1,41 @@
1
- import { merge as n } from "../../utilities/merge.es.js";
1
+ import { merge as i } from "../../utilities/merge.es.js";
2
2
  import o from "react";
3
3
  import u from "../../foundation/Icon/Generated/IconCheckMark.es.js";
4
- import { Button as c } from "../Button/Button.es.js";
5
- import { ButtonSize as s, ButtonStyle as r, ButtonEmphasis as l } from "../Button/ButtonTypes.es.js";
6
- const a = ({ buttons: t, border: e = !0 }) => /* @__PURE__ */ o.createElement(
4
+ import { Button as s } from "../Button/Button.es.js";
5
+ import { ButtonSize as c, ButtonStyle as r, ButtonEmphasis as l } from "../Button/ButtonTypes.es.js";
6
+ const n = ({ buttons: e, border: t = !0 }) => /* @__PURE__ */ o.createElement(
7
7
  "div",
8
8
  {
9
- className: n([
10
- "tw-flex tw-gap-x-3 tw-justify-end tw-py-5 tw-px-8 tw-bg-white dark:tw-bg-black-95",
11
- e && "tw-border-t tw-border-t-black-10",
9
+ className: i([
10
+ "tw-flex tw-gap-x-3 tw-rounded-b tw-justify-end tw-py-5 tw-px-8 tw-bg-base",
11
+ t && "tw-border-t tw-border-line",
12
12
  // The footer min-height should be 76px, since we Tailwind doesn't have a tw-h-19 class
13
13
  // we force TW to create it
14
14
  // The 19 comes from, 10 from the tw-py-5 + 9 from button height tw-h-9
15
15
  "tw-min-h-[4.75rem]"
16
16
  ])
17
17
  },
18
- t.map((m, i) => /* @__PURE__ */ o.createElement(c, { key: `flyout-footer-button-${i}`, ...m, size: s.Medium }))
18
+ e.map((a, m) => /* @__PURE__ */ o.createElement(s, { key: `flyout-footer-button-${m}`, ...a, size: c.Medium }))
19
19
  );
20
- a.displayName = "FondueFlyoutFooter";
20
+ n.displayName = "FondueFlyoutFooter";
21
21
  const p = ({
22
- onConfirm: t,
23
- onCancel: e
22
+ onConfirm: e,
23
+ onCancel: t
24
24
  }) => /* @__PURE__ */ o.createElement(
25
- a,
25
+ n,
26
26
  {
27
- buttons: t ? [
27
+ buttons: e ? [
28
28
  {
29
29
  style: r.Default,
30
30
  emphasis: l.Default,
31
31
  children: "Cancel",
32
- onClick: e
32
+ onClick: t
33
33
  },
34
34
  {
35
35
  style: r.Default,
36
36
  emphasis: l.Strong,
37
37
  children: "Confirm",
38
- onClick: t,
38
+ onClick: e,
39
39
  icon: /* @__PURE__ */ o.createElement(u, null)
40
40
  }
41
41
  ] : [
@@ -43,14 +43,14 @@ const p = ({
43
43
  style: r.Default,
44
44
  emphasis: l.Default,
45
45
  children: "Close",
46
- onClick: e
46
+ onClick: t
47
47
  }
48
48
  ]
49
49
  }
50
50
  );
51
51
  p.displayName = "FondueLegacyFlyoutFooter";
52
52
  export {
53
- a as FlyoutFooter,
53
+ n as FlyoutFooter,
54
54
  p as LegacyFlyoutFooter
55
55
  };
56
56
  //# sourceMappingURL=FlyoutFooter.es.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"FlyoutFooter.es.js","sources":["../../../src/components/Flyout/FlyoutFooter.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { Button, ButtonEmphasis, ButtonProps, ButtonSize, ButtonStyle } from '@components/Button';\nimport { IconCheckMark } from '@foundation/Icon/Generated';\nimport { merge } from '@utilities/merge';\nimport React, { ReactElement, ReactNode } from 'react';\n\nexport type FlyoutFooterProps = {\n buttons: [ButtonProps, ButtonProps] | [ButtonProps];\n border?: boolean;\n children?: ReactNode;\n};\n\nexport const FlyoutFooter = ({ buttons, border = true }: FlyoutFooterProps): ReactElement => {\n return (\n <div\n className={merge([\n 'tw-flex tw-gap-x-3 tw-justify-end tw-py-5 tw-px-8 tw-bg-white dark:tw-bg-black-95',\n border && 'tw-border-t tw-border-t-black-10',\n // The footer min-height should be 76px, since we Tailwind doesn't have a tw-h-19 class\n // we force TW to create it\n // The 19 comes from, 10 from the tw-py-5 + 9 from button height tw-h-9\n 'tw-min-h-[4.75rem]',\n ])}\n >\n {buttons.map((button, index) => (\n <Button key={`flyout-footer-button-${index}`} {...button} size={ButtonSize.Medium} />\n ))}\n </div>\n );\n};\nFlyoutFooter.displayName = 'FondueFlyoutFooter';\n\nexport const LegacyFlyoutFooter = ({\n onConfirm,\n onCancel,\n}: {\n onConfirm?: () => void;\n onCancel?: () => void;\n}): ReactElement => (\n <FlyoutFooter\n buttons={\n onConfirm\n ? [\n {\n style: ButtonStyle.Default,\n emphasis: ButtonEmphasis.Default,\n children: 'Cancel',\n onClick: onCancel,\n },\n {\n style: ButtonStyle.Default,\n emphasis: ButtonEmphasis.Strong,\n children: 'Confirm',\n onClick: onConfirm,\n icon: <IconCheckMark />,\n },\n ]\n : [\n {\n style: ButtonStyle.Default,\n emphasis: ButtonEmphasis.Default,\n children: 'Close',\n onClick: onCancel,\n },\n ]\n }\n />\n);\nLegacyFlyoutFooter.displayName = 'FondueLegacyFlyoutFooter';\n"],"names":["FlyoutFooter","buttons","border","React","merge","button","index","Button","ButtonSize","LegacyFlyoutFooter","onConfirm","onCancel","ButtonStyle","ButtonEmphasis","IconCheckMark"],"mappings":";;;;;AAaO,MAAMA,IAAe,CAAC,EAAE,SAAAC,GAAS,QAAAC,IAAS,SAEzC,gBAAAC,EAAA;AAAA,EAAC;AAAA,EAAA;AAAA,IACG,WAAWC,EAAM;AAAA,MACb;AAAA,MACAF,KAAU;AAAA;AAAA;AAAA;AAAA,MAIV;AAAA,IAAA,CACH;AAAA,EAAA;AAAA,EAEAD,EAAQ,IAAI,CAACI,GAAQC,MACjB,gBAAAH,EAAA,cAAAI,GAAA,EAAO,KAAK,wBAAwBD,KAAU,GAAGD,GAAQ,MAAMG,EAAW,QAAQ,CACtF;AAAA;AAIbR,EAAa,cAAc;AAEpB,MAAMS,IAAqB,CAAC;AAAA,EAC/B,WAAAC;AAAA,EACA,UAAAC;AACJ,MAII,gBAAAR,EAAA;AAAA,EAACH;AAAA,EAAA;AAAA,IACG,SACIU,IACM;AAAA,MACI;AAAA,QACI,OAAOE,EAAY;AAAA,QACnB,UAAUC,EAAe;AAAA,QACzB,UAAU;AAAA,QACV,SAASF;AAAA,MACb;AAAA,MACA;AAAA,QACI,OAAOC,EAAY;AAAA,QACnB,UAAUC,EAAe;AAAA,QACzB,UAAU;AAAA,QACV,SAASH;AAAA,QACT,sCAAOI,GAAc,IAAA;AAAA,MACzB;AAAA,IAAA,IAEJ;AAAA,MACI;AAAA,QACI,OAAOF,EAAY;AAAA,QACnB,UAAUC,EAAe;AAAA,QACzB,UAAU;AAAA,QACV,SAASF;AAAA,MACb;AAAA,IACJ;AAAA,EAAA;AAEd;AAEJF,EAAmB,cAAc;"}
1
+ {"version":3,"file":"FlyoutFooter.es.js","sources":["../../../src/components/Flyout/FlyoutFooter.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { Button, ButtonEmphasis, ButtonProps, ButtonSize, ButtonStyle } from '@components/Button';\nimport { IconCheckMark } from '@foundation/Icon/Generated';\nimport { merge } from '@utilities/merge';\nimport React, { ReactElement, ReactNode } from 'react';\n\nexport type FlyoutFooterProps = {\n buttons: [ButtonProps, ButtonProps] | [ButtonProps];\n border?: boolean;\n children?: ReactNode;\n};\n\nexport const FlyoutFooter = ({ buttons, border = true }: FlyoutFooterProps): ReactElement => {\n return (\n <div\n className={merge([\n 'tw-flex tw-gap-x-3 tw-rounded-b tw-justify-end tw-py-5 tw-px-8 tw-bg-base',\n border && 'tw-border-t tw-border-line',\n // The footer min-height should be 76px, since we Tailwind doesn't have a tw-h-19 class\n // we force TW to create it\n // The 19 comes from, 10 from the tw-py-5 + 9 from button height tw-h-9\n 'tw-min-h-[4.75rem]',\n ])}\n >\n {buttons.map((button, index) => (\n <Button key={`flyout-footer-button-${index}`} {...button} size={ButtonSize.Medium} />\n ))}\n </div>\n );\n};\nFlyoutFooter.displayName = 'FondueFlyoutFooter';\n\nexport const LegacyFlyoutFooter = ({\n onConfirm,\n onCancel,\n}: {\n onConfirm?: () => void;\n onCancel?: () => void;\n}): ReactElement => (\n <FlyoutFooter\n buttons={\n onConfirm\n ? [\n {\n style: ButtonStyle.Default,\n emphasis: ButtonEmphasis.Default,\n children: 'Cancel',\n onClick: onCancel,\n },\n {\n style: ButtonStyle.Default,\n emphasis: ButtonEmphasis.Strong,\n children: 'Confirm',\n onClick: onConfirm,\n icon: <IconCheckMark />,\n },\n ]\n : [\n {\n style: ButtonStyle.Default,\n emphasis: ButtonEmphasis.Default,\n children: 'Close',\n onClick: onCancel,\n },\n ]\n }\n />\n);\nLegacyFlyoutFooter.displayName = 'FondueLegacyFlyoutFooter';\n"],"names":["FlyoutFooter","buttons","border","React","merge","button","index","Button","ButtonSize","LegacyFlyoutFooter","onConfirm","onCancel","ButtonStyle","ButtonEmphasis","IconCheckMark"],"mappings":";;;;;AAaO,MAAMA,IAAe,CAAC,EAAE,SAAAC,GAAS,QAAAC,IAAS,SAEzC,gBAAAC,EAAA;AAAA,EAAC;AAAA,EAAA;AAAA,IACG,WAAWC,EAAM;AAAA,MACb;AAAA,MACAF,KAAU;AAAA;AAAA;AAAA;AAAA,MAIV;AAAA,IAAA,CACH;AAAA,EAAA;AAAA,EAEAD,EAAQ,IAAI,CAACI,GAAQC,MACjB,gBAAAH,EAAA,cAAAI,GAAA,EAAO,KAAK,wBAAwBD,KAAU,GAAGD,GAAQ,MAAMG,EAAW,QAAQ,CACtF;AAAA;AAIbR,EAAa,cAAc;AAEpB,MAAMS,IAAqB,CAAC;AAAA,EAC/B,WAAAC;AAAA,EACA,UAAAC;AACJ,MAII,gBAAAR,EAAA;AAAA,EAACH;AAAA,EAAA;AAAA,IACG,SACIU,IACM;AAAA,MACI;AAAA,QACI,OAAOE,EAAY;AAAA,QACnB,UAAUC,EAAe;AAAA,QACzB,UAAU;AAAA,QACV,SAASF;AAAA,MACb;AAAA,MACA;AAAA,QACI,OAAOC,EAAY;AAAA,QACnB,UAAUC,EAAe;AAAA,QACzB,UAAU;AAAA,QACV,SAASH;AAAA,QACT,sCAAOI,GAAc,IAAA;AAAA,MACzB;AAAA,IAAA,IAEJ;AAAA,MACI;AAAA,QACI,OAAOF,EAAY;AAAA,QACnB,UAAUC,EAAe;AAAA,QACzB,UAAU;AAAA,QACV,SAASF;AAAA,MACb;AAAA,IACJ;AAAA,EAAA;AAEd;AAEJF,EAAmB,cAAc;"}
@@ -1,12 +1,11 @@
1
- import { Badge as N } from "../Badge/Badge.es.js";
1
+ import { Badge as h } from "../Badge/Badge.es.js";
2
2
  import { FieldsetHeader as k } from "../FieldsetHeader/FieldsetHeader.es.js";
3
- import { useDialog as h } from "@react-aria/dialog";
4
- import { useOverlay as D, useModal as O, DismissButton as P } from "@react-aria/overlays";
5
- import { mergeProps as R } from "@react-aria/utils";
3
+ import { useDialog as N } from "@react-aria/dialog";
4
+ import { useOverlay as P, useModal as D, DismissButton as O } from "@react-aria/overlays";
5
+ import { mergeProps as B } from "@react-aria/utils";
6
6
  import { merge as l } from "../../utilities/merge.es.js";
7
- import e, { forwardRef as B, Children as $ } from "react";
8
- import { INSET_BORDER as j } from "../../utilities/borderStyle.es.js";
9
- const C = ({
7
+ import e, { forwardRef as R, Children as $ } from "react";
8
+ const j = ({
10
9
  title: o,
11
10
  decorator: n,
12
11
  badges: s = [],
@@ -16,43 +15,53 @@ const C = ({
16
15
  positionProps: p,
17
16
  overlayTriggerProps: f,
18
17
  scrollRef: v,
19
- fixedHeader: m,
20
- fixedFooter: w,
18
+ fixedHeader: w,
19
+ fixedFooter: m,
21
20
  fitContent: u,
22
21
  contentMinHeight: x
23
22
  }, t) => {
24
- const { overlayProps: y } = D({ onClose: i, isOpen: c, isDismissable: !0 }, t), { modalProps: E } = O(), { dialogProps: g, titleProps: b } = h({}, t);
23
+ const { overlayProps: y } = P({ onClose: i, isOpen: c, isDismissable: !0 }, t), { modalProps: g } = D(), { dialogProps: b, titleProps: E } = N({}, t);
25
24
  return /* @__PURE__ */ e.createElement(
26
25
  "div",
27
26
  {
28
- ...R(y, g, E, p, f),
27
+ ...B(y, b, g, p, f),
29
28
  ref: t,
30
29
  className: l([
31
30
  "tw-rounded tw-flex tw-outline-none tw-relative",
32
31
  u ? "tw-min-w-0" : "tw-min-w-[400px]"
33
32
  ])
34
33
  },
35
- /* @__PURE__ */ e.createElement("div", { className: l(["tw-flex tw-flex-col tw-flex-auto tw-min-h-0 tw-rounded", j]) }, m, /* @__PURE__ */ e.createElement(
34
+ /* @__PURE__ */ e.createElement(
36
35
  "div",
37
36
  {
38
- ref: v,
39
37
  className: l([
40
- "tw-flex tw-overflow-y-auto tw-overflow-x-hidden tw-flex-col tw-divide-y tw-divide tw-divide-black-10 tw-bg-white tw-text-black dark:tw-text-white dark:tw-bg-black-95",
41
- !m && "tw-rounded-t",
42
- !w && "tw-rounded-b"
43
- ]),
44
- style: {
45
- minHeight: `${x}px`
46
- }
38
+ "tw-flex tw-flex-col tw-flex-auto tw-min-h-0 tw-rounded tw-shadow-mid tw-border tw-border-line-x-strong"
39
+ ])
47
40
  },
48
- o && /* @__PURE__ */ e.createElement("div", { className: "tw-flex tw-justify-between tw-flex-wrap tw-gap-3 tw-p-8" }, /* @__PURE__ */ e.createElement("div", { ...b, className: "tw-inline-flex" }, /* @__PURE__ */ e.createElement(k, { decorator: n }, o)), /* @__PURE__ */ e.createElement("div", { className: "tw-inline-flex tw-gap-2 tw-flex-wrap" }, s.map((r, a) => /* @__PURE__ */ e.createElement(N, { ...r, key: `flyout-badge-${a}` })))),
49
- $.map(d, (r, a) => /* @__PURE__ */ e.createElement("div", { key: a }, r)),
50
- /* @__PURE__ */ e.createElement(P, { onDismiss: i })
51
- ), w)
41
+ w,
42
+ /* @__PURE__ */ e.createElement(
43
+ "div",
44
+ {
45
+ ref: v,
46
+ className: l([
47
+ "tw-flex tw-overflow-y-auto tw-overflow-x-hidden tw-flex-col tw-divide-y tw-divide tw-divide-black-10 tw-bg-white tw-text-black dark:tw-text-white dark:tw-bg-black-95",
48
+ !w && "tw-rounded-t",
49
+ !m && "tw-rounded-b"
50
+ ]),
51
+ style: {
52
+ minHeight: `${x}px`
53
+ }
54
+ },
55
+ o && /* @__PURE__ */ e.createElement("div", { className: "tw-flex tw-justify-between tw-flex-wrap tw-gap-3 tw-p-8" }, /* @__PURE__ */ e.createElement("div", { ...E, className: "tw-inline-flex" }, /* @__PURE__ */ e.createElement(k, { decorator: n }, o)), /* @__PURE__ */ e.createElement("div", { className: "tw-inline-flex tw-gap-2 tw-flex-wrap" }, s.map((r, a) => /* @__PURE__ */ e.createElement(h, { ...r, key: `flyout-badge-${a}` })))),
56
+ $.map(d, (r, a) => /* @__PURE__ */ e.createElement("div", { key: a }, r)),
57
+ /* @__PURE__ */ e.createElement(O, { onDismiss: i })
58
+ ),
59
+ m
60
+ )
52
61
  );
53
- }, F = B(C);
54
- F.displayName = "FondueOverlay";
62
+ }, C = R(j);
63
+ C.displayName = "FondueOverlay";
55
64
  export {
56
- F as Overlay
65
+ C as Overlay
57
66
  };
58
67
  //# sourceMappingURL=Overlay.es.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"Overlay.es.js","sources":["../../../src/components/Flyout/Overlay.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { Badge } from '@components/Badge/Badge';\nimport { FieldsetHeader } from '@components/FieldsetHeader/FieldsetHeader';\nimport { useDialog } from '@react-aria/dialog';\nimport { DismissButton, useModal, useOverlay } from '@react-aria/overlays';\nimport { mergeProps } from '@react-aria/utils';\nimport { merge } from '@utilities/merge';\nimport React, { Children, ForwardRefRenderFunction, HTMLAttributes, RefObject, forwardRef } from 'react';\nimport { FlyoutProps } from '.';\nimport { INSET_BORDER } from '@utilities/borderStyle';\n\ntype OverlayProps = Omit<FlyoutProps, 'trigger' | 'onOpenChange' | 'onConfirm' | 'legacyFooter' | 'onCancel'> & {\n positionProps: HTMLAttributes<Element>;\n overlayTriggerProps: HTMLAttributes<Element>;\n scrollRef: RefObject<HTMLDivElement>;\n onClose: () => void;\n};\n\nconst OverlayComponent: ForwardRefRenderFunction<HTMLDivElement, OverlayProps> = (\n {\n title,\n decorator,\n badges = [],\n onClose,\n children,\n isOpen,\n positionProps,\n overlayTriggerProps,\n scrollRef,\n fixedHeader,\n fixedFooter,\n fitContent,\n contentMinHeight,\n },\n ref,\n) => {\n const { overlayProps } = useOverlay({ onClose, isOpen, isDismissable: true }, ref as RefObject<HTMLDivElement>);\n const { modalProps } = useModal();\n const { dialogProps, titleProps } = useDialog({}, ref as RefObject<HTMLDivElement>);\n\n return (\n <div\n {...mergeProps(overlayProps, dialogProps, modalProps, positionProps, overlayTriggerProps)}\n ref={ref}\n className={merge([\n 'tw-rounded tw-flex tw-outline-none tw-relative',\n fitContent ? 'tw-min-w-0' : 'tw-min-w-[400px]',\n ])}\n >\n <div className={merge(['tw-flex tw-flex-col tw-flex-auto tw-min-h-0 tw-rounded', INSET_BORDER])}>\n {fixedHeader}\n <div\n ref={scrollRef}\n className={merge([\n 'tw-flex tw-overflow-y-auto tw-overflow-x-hidden tw-flex-col tw-divide-y tw-divide tw-divide-black-10 tw-bg-white tw-text-black dark:tw-text-white dark:tw-bg-black-95',\n !fixedHeader && 'tw-rounded-t',\n !fixedFooter && 'tw-rounded-b',\n ])}\n style={{\n minHeight: `${contentMinHeight}px`,\n }}\n >\n {title && (\n <div className=\"tw-flex tw-justify-between tw-flex-wrap tw-gap-3 tw-p-8\">\n <div {...titleProps} className=\"tw-inline-flex\">\n <FieldsetHeader decorator={decorator}>{title}</FieldsetHeader>\n </div>\n <div className=\"tw-inline-flex tw-gap-2 tw-flex-wrap\">\n {badges.map((badgeProps, index) => (\n <Badge {...badgeProps} key={`flyout-badge-${index}`} />\n ))}\n </div>\n </div>\n )}\n {Children.map(children, (child, index) => (\n <div key={index}>{child}</div>\n ))}\n <DismissButton onDismiss={onClose} />\n </div>\n {fixedFooter}\n </div>\n </div>\n );\n};\n\nexport const Overlay = forwardRef<HTMLDivElement, OverlayProps>(OverlayComponent);\nOverlay.displayName = 'FondueOverlay';\n"],"names":["OverlayComponent","title","decorator","badges","onClose","children","isOpen","positionProps","overlayTriggerProps","scrollRef","fixedHeader","fixedFooter","fitContent","contentMinHeight","ref","overlayProps","useOverlay","modalProps","useModal","dialogProps","titleProps","useDialog","React","mergeProps","merge","INSET_BORDER","FieldsetHeader","badgeProps","index","Badge","Children","child","DismissButton","Overlay","forwardRef"],"mappings":";;;;;;;;AAmBA,MAAMA,IAA2E,CAC7E;AAAA,EACI,OAAAC;AAAA,EACA,WAAAC;AAAA,EACA,QAAAC,IAAS,CAAC;AAAA,EACV,SAAAC;AAAA,EACA,UAAAC;AAAA,EACA,QAAAC;AAAA,EACA,eAAAC;AAAA,EACA,qBAAAC;AAAA,EACA,WAAAC;AAAA,EACA,aAAAC;AAAA,EACA,aAAAC;AAAA,EACA,YAAAC;AAAA,EACA,kBAAAC;AACJ,GACAC,MACC;AACK,QAAA,EAAE,cAAAC,MAAiBC,EAAW,EAAE,SAAAZ,GAAS,QAAAE,GAAQ,eAAe,MAAQQ,CAAgC,GACxG,EAAE,YAAAG,MAAeC,KACjB,EAAE,aAAAC,GAAa,YAAAC,EAAA,IAAeC,EAAU,CAAA,GAAIP,CAAgC;AAG9E,SAAA,gBAAAQ,EAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACI,GAAGC,EAAWR,GAAcI,GAAaF,GAAYV,GAAeC,CAAmB;AAAA,MACxF,KAAAM;AAAA,MACA,WAAWU,EAAM;AAAA,QACb;AAAA,QACAZ,IAAa,eAAe;AAAA,MAAA,CAC/B;AAAA,IAAA;AAAA,IAED,gBAAAU,EAAA,cAAC,SAAI,WAAWE,EAAM,CAAC,0DAA0DC,CAAY,CAAC,EAAA,GACzFf,GACD,gBAAAY,EAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACG,KAAKb;AAAA,QACL,WAAWe,EAAM;AAAA,UACb;AAAA,UACA,CAACd,KAAe;AAAA,UAChB,CAACC,KAAe;AAAA,QAAA,CACnB;AAAA,QACD,OAAO;AAAA,UACH,WAAW,GAAGE;AAAA,QAClB;AAAA,MAAA;AAAA,MAECZ,KACG,gBAAAqB,EAAA,cAAC,OAAI,EAAA,WAAU,6DACV,gBAAAA,EAAA,cAAA,OAAA,EAAK,GAAGF,GAAY,WAAU,iBAC3B,GAAA,gBAAAE,EAAA,cAACI,GAAe,EAAA,WAAAxB,KAAuBD,CAAM,CACjD,GACC,gBAAAqB,EAAA,cAAA,OAAA,EAAI,WAAU,uCACV,GAAAnB,EAAO,IAAI,CAACwB,GAAYC,MACrB,gBAAAN,EAAA,cAACO,GAAO,EAAA,GAAGF,GAAY,KAAK,gBAAgBC,KAAS,CACxD,CACL,CACJ;AAAA,MAEHE,EAAS,IAAIzB,GAAU,CAAC0B,GAAOH,MAC5B,gBAAAN,EAAA,cAAC,OAAI,EAAA,KAAKM,EAAQ,GAAAG,CAAM,CAC3B;AAAA,MACD,gBAAAT,EAAA,cAACU,GAAc,EAAA,WAAW5B,EAAS,CAAA;AAAA,OAEtCO,CACL;AAAA,EAAA;AAGZ,GAEasB,IAAUC,EAAyClC,CAAgB;AAChFiC,EAAQ,cAAc;"}
1
+ {"version":3,"file":"Overlay.es.js","sources":["../../../src/components/Flyout/Overlay.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { Badge } from '@components/Badge/Badge';\nimport { FieldsetHeader } from '@components/FieldsetHeader/FieldsetHeader';\nimport { useDialog } from '@react-aria/dialog';\nimport { DismissButton, useModal, useOverlay } from '@react-aria/overlays';\nimport { mergeProps } from '@react-aria/utils';\nimport { merge } from '@utilities/merge';\nimport React, { Children, ForwardRefRenderFunction, HTMLAttributes, RefObject, forwardRef } from 'react';\nimport { FlyoutProps } from '.';\n\ntype OverlayProps = Omit<FlyoutProps, 'trigger' | 'onOpenChange' | 'onConfirm' | 'legacyFooter' | 'onCancel'> & {\n positionProps: HTMLAttributes<Element>;\n overlayTriggerProps: HTMLAttributes<Element>;\n scrollRef: RefObject<HTMLDivElement>;\n onClose: () => void;\n};\n\nconst OverlayComponent: ForwardRefRenderFunction<HTMLDivElement, OverlayProps> = (\n {\n title,\n decorator,\n badges = [],\n onClose,\n children,\n isOpen,\n positionProps,\n overlayTriggerProps,\n scrollRef,\n fixedHeader,\n fixedFooter,\n fitContent,\n contentMinHeight,\n },\n ref,\n) => {\n const { overlayProps } = useOverlay({ onClose, isOpen, isDismissable: true }, ref as RefObject<HTMLDivElement>);\n const { modalProps } = useModal();\n const { dialogProps, titleProps } = useDialog({}, ref as RefObject<HTMLDivElement>);\n\n return (\n <div\n {...mergeProps(overlayProps, dialogProps, modalProps, positionProps, overlayTriggerProps)}\n ref={ref}\n className={merge([\n 'tw-rounded tw-flex tw-outline-none tw-relative',\n fitContent ? 'tw-min-w-0' : 'tw-min-w-[400px]',\n ])}\n >\n <div\n className={merge([\n 'tw-flex tw-flex-col tw-flex-auto tw-min-h-0 tw-rounded tw-shadow-mid tw-border tw-border-line-x-strong',\n ])}\n >\n {fixedHeader}\n <div\n ref={scrollRef}\n className={merge([\n 'tw-flex tw-overflow-y-auto tw-overflow-x-hidden tw-flex-col tw-divide-y tw-divide tw-divide-black-10 tw-bg-white tw-text-black dark:tw-text-white dark:tw-bg-black-95',\n !fixedHeader && 'tw-rounded-t',\n !fixedFooter && 'tw-rounded-b',\n ])}\n style={{\n minHeight: `${contentMinHeight}px`,\n }}\n >\n {title && (\n <div className=\"tw-flex tw-justify-between tw-flex-wrap tw-gap-3 tw-p-8\">\n <div {...titleProps} className=\"tw-inline-flex\">\n <FieldsetHeader decorator={decorator}>{title}</FieldsetHeader>\n </div>\n <div className=\"tw-inline-flex tw-gap-2 tw-flex-wrap\">\n {badges.map((badgeProps, index) => (\n <Badge {...badgeProps} key={`flyout-badge-${index}`} />\n ))}\n </div>\n </div>\n )}\n {Children.map(children, (child, index) => (\n <div key={index}>{child}</div>\n ))}\n <DismissButton onDismiss={onClose} />\n </div>\n {fixedFooter}\n </div>\n </div>\n );\n};\n\nexport const Overlay = forwardRef<HTMLDivElement, OverlayProps>(OverlayComponent);\nOverlay.displayName = 'FondueOverlay';\n"],"names":["OverlayComponent","title","decorator","badges","onClose","children","isOpen","positionProps","overlayTriggerProps","scrollRef","fixedHeader","fixedFooter","fitContent","contentMinHeight","ref","overlayProps","useOverlay","modalProps","useModal","dialogProps","titleProps","useDialog","React","mergeProps","merge","FieldsetHeader","badgeProps","index","Badge","Children","child","DismissButton","Overlay","forwardRef"],"mappings":";;;;;;;AAkBA,MAAMA,IAA2E,CAC7E;AAAA,EACI,OAAAC;AAAA,EACA,WAAAC;AAAA,EACA,QAAAC,IAAS,CAAC;AAAA,EACV,SAAAC;AAAA,EACA,UAAAC;AAAA,EACA,QAAAC;AAAA,EACA,eAAAC;AAAA,EACA,qBAAAC;AAAA,EACA,WAAAC;AAAA,EACA,aAAAC;AAAA,EACA,aAAAC;AAAA,EACA,YAAAC;AAAA,EACA,kBAAAC;AACJ,GACAC,MACC;AACK,QAAA,EAAE,cAAAC,MAAiBC,EAAW,EAAE,SAAAZ,GAAS,QAAAE,GAAQ,eAAe,MAAQQ,CAAgC,GACxG,EAAE,YAAAG,MAAeC,KACjB,EAAE,aAAAC,GAAa,YAAAC,EAAA,IAAeC,EAAU,CAAA,GAAIP,CAAgC;AAG9E,SAAA,gBAAAQ,EAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACI,GAAGC,EAAWR,GAAcI,GAAaF,GAAYV,GAAeC,CAAmB;AAAA,MACxF,KAAAM;AAAA,MACA,WAAWU,EAAM;AAAA,QACb;AAAA,QACAZ,IAAa,eAAe;AAAA,MAAA,CAC/B;AAAA,IAAA;AAAA,IAED,gBAAAU,EAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACG,WAAWE,EAAM;AAAA,UACb;AAAA,QAAA,CACH;AAAA,MAAA;AAAA,MAEAd;AAAA,MACD,gBAAAY,EAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACG,KAAKb;AAAA,UACL,WAAWe,EAAM;AAAA,YACb;AAAA,YACA,CAACd,KAAe;AAAA,YAChB,CAACC,KAAe;AAAA,UAAA,CACnB;AAAA,UACD,OAAO;AAAA,YACH,WAAW,GAAGE;AAAA,UAClB;AAAA,QAAA;AAAA,QAECZ,KACG,gBAAAqB,EAAA,cAAC,OAAI,EAAA,WAAU,6DACV,gBAAAA,EAAA,cAAA,OAAA,EAAK,GAAGF,GAAY,WAAU,iBAC3B,GAAA,gBAAAE,EAAA,cAACG,GAAe,EAAA,WAAAvB,KAAuBD,CAAM,CACjD,GACC,gBAAAqB,EAAA,cAAA,OAAA,EAAI,WAAU,uCACV,GAAAnB,EAAO,IAAI,CAACuB,GAAYC,MACrB,gBAAAL,EAAA,cAACM,GAAO,EAAA,GAAGF,GAAY,KAAK,gBAAgBC,KAAS,CACxD,CACL,CACJ;AAAA,QAEHE,EAAS,IAAIxB,GAAU,CAACyB,GAAOH,MAC5B,gBAAAL,EAAA,cAAC,OAAI,EAAA,KAAKK,EAAQ,GAAAG,CAAM,CAC3B;AAAA,QACD,gBAAAR,EAAA,cAACS,GAAc,EAAA,WAAW3B,EAAS,CAAA;AAAA,MACvC;AAAA,MACCO;AAAA,IACL;AAAA,EAAA;AAGZ,GAEaqB,IAAUC,EAAyCjC,CAAgB;AAChFgC,EAAQ,cAAc;"}