@purpur/library 9.6.0 → 9.7.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.json +57 -0
- package/CHANGELOG.md +26 -1
- package/dist/LICENSE.txt +7 -7
- package/dist/ThemeProvider-D7oXcAde.js +2 -0
- package/dist/{ThemeProvider-Dy771oix.js.map → ThemeProvider-D7oXcAde.js.map} +1 -1
- package/dist/ThemeProvider-DiDBfyFA.mjs +348 -0
- package/dist/{ThemeProvider-CkX-BNWN.mjs.map → ThemeProvider-DiDBfyFA.mjs.map} +1 -1
- package/dist/carousel-BIKcwvYz.mjs +1658 -0
- package/dist/carousel-BIKcwvYz.mjs.map +1 -0
- package/dist/carousel-DnSaLDZf.js +2 -0
- package/dist/carousel-DnSaLDZf.js.map +1 -0
- package/dist/carousel.cjs.js +1 -1
- package/dist/carousel.es.js +1 -1
- package/dist/{comparison-table-Nhp5W6Yc.js → comparison-table-0UDB2BTU.js} +2 -2
- package/dist/{comparison-table-Nhp5W6Yc.js.map → comparison-table-0UDB2BTU.js.map} +1 -1
- package/dist/{comparison-table-CZMKl1TX.mjs → comparison-table-CjTE-fHN.mjs} +48 -48
- package/dist/{comparison-table-CZMKl1TX.mjs.map → comparison-table-CjTE-fHN.mjs.map} +1 -1
- package/dist/comparison-table.cjs.js +1 -1
- package/dist/comparison-table.es.js +1 -1
- package/dist/components/button/src/button.d.ts +1 -1
- package/dist/components/button/src/button.visual.fixtures.d.ts +43 -0
- package/dist/components/button/src/button.visual.fixtures.d.ts.map +1 -0
- package/dist/components/carousel/src/carousel.d.ts.map +1 -1
- package/dist/components/date-picker/src/date-picker.d.ts +8 -0
- package/dist/components/date-picker/src/date-picker.d.ts.map +1 -1
- package/dist/components/drawer/src/drawer-content.d.ts +21 -0
- package/dist/components/drawer/src/drawer-content.d.ts.map +1 -1
- package/dist/components/hero-banner/src/hero-banner.visual.fixtures.d.ts +14 -0
- package/dist/components/hero-banner/src/hero-banner.visual.fixtures.d.ts.map +1 -0
- package/dist/components/modal/src/modal-content.d.ts +21 -0
- package/dist/components/modal/src/modal-content.d.ts.map +1 -1
- package/dist/components/modal/src/modal.d.ts +2 -0
- package/dist/components/modal/src/modal.d.ts.map +1 -1
- package/dist/components/popover/src/popover-content.d.ts +14 -0
- package/dist/components/popover/src/popover-content.d.ts.map +1 -1
- package/dist/components/radio-card-group/src/is-radio-card-item.d.ts +4 -0
- package/dist/components/radio-card-group/src/is-radio-card-item.d.ts.map +1 -0
- package/dist/components/radio-card-group/src/radio-card-group.constants.d.ts +5 -0
- package/dist/components/radio-card-group/src/radio-card-group.constants.d.ts.map +1 -0
- package/dist/components/radio-card-group/src/radio-card-group.d.ts +5 -6
- package/dist/components/radio-card-group/src/radio-card-group.d.ts.map +1 -1
- package/dist/components/radio-card-group/src/radio-card-item.d.ts +1 -2
- package/dist/components/radio-card-group/src/radio-card-item.d.ts.map +1 -1
- package/dist/components/search-field/src/search-field-autocomplete.d.ts +6 -3
- package/dist/components/search-field/src/search-field-autocomplete.d.ts.map +1 -1
- package/dist/components/search-field/src/search-field-base.d.ts +10 -3
- package/dist/components/search-field/src/search-field-base.d.ts.map +1 -1
- package/dist/components/search-field/src/search-field-button.d.ts +3 -1
- package/dist/components/search-field/src/search-field-button.d.ts.map +1 -1
- package/dist/components/search-field/src/search-field.d.ts +12 -6
- package/dist/components/search-field/src/search-field.d.ts.map +1 -1
- package/dist/components/table/src/drag-indicator-circle.d.ts +8 -1
- package/dist/components/table/src/drag-indicator-circle.d.ts.map +1 -1
- package/dist/components/table/src/table.d.ts.map +1 -1
- package/dist/components/tooltip/src/tooltip.d.ts +21 -0
- package/dist/components/tooltip/src/tooltip.d.ts.map +1 -1
- package/dist/components-metadata.js +0 -2
- package/dist/date-picker-CIizn3Pv.js +2 -0
- package/dist/{date-picker-uyPKJulK.js.map → date-picker-CIizn3Pv.js.map} +1 -1
- package/dist/date-picker-DixxW60s.mjs +1617 -0
- package/dist/{date-picker-CzxhZxsw.mjs.map → date-picker-DixxW60s.mjs.map} +1 -1
- package/dist/date-picker.cjs.js +1 -1
- package/dist/date-picker.es.js +1 -1
- package/dist/drawer-BzkRd9F0.mjs +577 -0
- package/dist/drawer-BzkRd9F0.mjs.map +1 -0
- package/dist/drawer-DyhsP34o.js +2 -0
- package/dist/drawer-DyhsP34o.js.map +1 -0
- package/dist/drawer.cjs.js +1 -1
- package/dist/drawer.es.js +1 -1
- package/dist/{footer-D9AcPwlH.js → footer-3Y-664-8.js} +2 -2
- package/dist/{footer-D9AcPwlH.js.map → footer-3Y-664-8.js.map} +1 -1
- package/dist/{footer-BLPlXaZK.mjs → footer-DenAcikt.mjs} +3 -3
- package/dist/{footer-BLPlXaZK.mjs.map → footer-DenAcikt.mjs.map} +1 -1
- package/dist/footer.cjs.js +1 -1
- package/dist/footer.es.js +1 -1
- package/dist/{hero-banner-DkC_BqM7.mjs → hero-banner-B7xrDfzN.mjs} +2 -2
- package/dist/{hero-banner-DkC_BqM7.mjs.map → hero-banner-B7xrDfzN.mjs.map} +1 -1
- package/dist/{hero-banner-D1A-_qou.js → hero-banner-DthITuQ7.js} +2 -2
- package/dist/{hero-banner-D1A-_qou.js.map → hero-banner-DthITuQ7.js.map} +1 -1
- package/dist/hero-banner.cjs.js +1 -1
- package/dist/hero-banner.es.js +1 -1
- package/dist/libraries/theme/src/ThemeProvider.d.ts.map +1 -1
- package/dist/libraries/theme/src/theme.d.ts +1 -0
- package/dist/libraries/theme/src/theme.d.ts.map +1 -1
- package/dist/libraries/theme/src/types.d.ts +7 -0
- package/dist/libraries/theme/src/types.d.ts.map +1 -1
- package/dist/libraries/theme/src/useThemePortalContainer.d.ts +12 -0
- package/dist/libraries/theme/src/useThemePortalContainer.d.ts.map +1 -0
- package/dist/library.cjs.js +1 -1
- package/dist/library.es.js +469 -469
- package/dist/library.es.js.map +1 -1
- package/dist/modal-DJn9idcw.js +2 -0
- package/dist/modal-DJn9idcw.js.map +1 -0
- package/dist/{modal-fp37VbrH.mjs → modal-EIP36327.mjs} +83 -80
- package/dist/modal-EIP36327.mjs.map +1 -0
- package/dist/modal.cjs.js +1 -1
- package/dist/modal.es.js +1 -1
- package/dist/{popover-I26xNbTz.mjs → popover-DERrvReO.mjs} +328 -325
- package/dist/popover-DERrvReO.mjs.map +1 -0
- package/dist/popover-DnGgzfQr.js +2 -0
- package/dist/popover-DnGgzfQr.js.map +1 -0
- package/dist/popover.cjs.js +1 -1
- package/dist/popover.es.js +1 -1
- package/dist/{promotion-card-BiHnQvhn.mjs → promotion-card-BnzIVNQ4.mjs} +2 -2
- package/dist/{promotion-card-BiHnQvhn.mjs.map → promotion-card-BnzIVNQ4.mjs.map} +1 -1
- package/dist/{promotion-card-Bag64gqP.js → promotion-card-DKc2Cx1h.js} +2 -2
- package/dist/{promotion-card-Bag64gqP.js.map → promotion-card-DKc2Cx1h.js.map} +1 -1
- package/dist/promotion-card.cjs.js +1 -1
- package/dist/promotion-card.es.js +1 -1
- package/dist/purpur.css +1 -1
- package/dist/radio-card-group-ZBXjYcQs.mjs +166 -0
- package/dist/radio-card-group-ZBXjYcQs.mjs.map +1 -0
- package/dist/radio-card-group-nrDi5EPK.js +2 -0
- package/dist/radio-card-group-nrDi5EPK.js.map +1 -0
- package/dist/radio-card-group.cjs.js +1 -1
- package/dist/radio-card-group.es.js +3 -5
- package/dist/search-field-2vdDbiT0.js +2 -0
- package/dist/search-field-2vdDbiT0.js.map +1 -0
- package/dist/search-field-DKyNh7pE.mjs +167 -0
- package/dist/search-field-DKyNh7pE.mjs.map +1 -0
- package/dist/search-field.cjs.js +1 -1
- package/dist/search-field.es.js +1 -1
- package/dist/{stepper-CWR2vGPj.mjs → stepper-BDsSa6yr.mjs} +2 -2
- package/dist/{stepper-CWR2vGPj.mjs.map → stepper-BDsSa6yr.mjs.map} +1 -1
- package/dist/{stepper-Df4X7DDR.js → stepper-DpauItjx.js} +2 -2
- package/dist/{stepper-Df4X7DDR.js.map → stepper-DpauItjx.js.map} +1 -1
- package/dist/stepper.cjs.js +1 -1
- package/dist/stepper.es.js +1 -1
- package/dist/{table-gnGUejtb.js → table-BOCcBzSO.js} +4 -4
- package/dist/table-BOCcBzSO.js.map +1 -0
- package/dist/{table-g_n68i4s.mjs → table-i1Gs9e0e.mjs} +440 -440
- package/dist/table-i1Gs9e0e.mjs.map +1 -0
- package/dist/table.cjs.js +1 -1
- package/dist/table.es.js +1 -1
- package/dist/{text-area-peNKG7g4.js → text-area-D0truMT1.js} +2 -2
- package/dist/{text-area-peNKG7g4.js.map → text-area-D0truMT1.js.map} +1 -1
- package/dist/{text-area-kJvg6cFp.mjs → text-area-IVH-k4MM.mjs} +3 -3
- package/dist/{text-area-kJvg6cFp.mjs.map → text-area-IVH-k4MM.mjs.map} +1 -1
- package/dist/text-area.cjs.js +1 -1
- package/dist/text-area.es.js +1 -1
- package/dist/theme.cjs.js +1 -1
- package/dist/theme.es.js +8 -6
- package/dist/theme.es.js.map +1 -1
- package/dist/tooltip-CJGmJDFQ.js +2 -0
- package/dist/{tooltip-C8Zxnqdb.js.map → tooltip-CJGmJDFQ.js.map} +1 -1
- package/dist/{tooltip-LU2Cy-QC.mjs → tooltip-RA-03bKs.mjs} +277 -274
- package/dist/{tooltip-LU2Cy-QC.mjs.map → tooltip-RA-03bKs.mjs.map} +1 -1
- package/dist/tooltip.cjs.js +1 -1
- package/dist/tooltip.es.js +1 -1
- package/dist/{useColorScheme-tAkY9LHt.mjs → useColorScheme-B9DWd-LN.mjs} +2 -2
- package/dist/{useColorScheme-tAkY9LHt.mjs.map → useColorScheme-B9DWd-LN.mjs.map} +1 -1
- package/dist/useColorScheme-DbTQjxNB.js +2 -0
- package/dist/{useColorScheme-DNyjsWX9.js.map → useColorScheme-DbTQjxNB.js.map} +1 -1
- package/dist/useThemePortalContainer-D9BYjEvT.js +2 -0
- package/dist/useThemePortalContainer-D9BYjEvT.js.map +1 -0
- package/dist/useThemePortalContainer-tFLTaYKN.mjs +9 -0
- package/dist/useThemePortalContainer-tFLTaYKN.mjs.map +1 -0
- package/package.json +29 -29
- package/scripts/generate.mts +62 -3
- package/src/library.ts +2 -71
- package/dist/ThemeProvider-CkX-BNWN.mjs +0 -337
- package/dist/ThemeProvider-Dy771oix.js +0 -2
- package/dist/carousel-DLkTL9sj.mjs +0 -1633
- package/dist/carousel-DLkTL9sj.mjs.map +0 -1
- package/dist/carousel-DXrtxRz5.js +0 -2
- package/dist/carousel-DXrtxRz5.js.map +0 -1
- package/dist/date-picker-CzxhZxsw.mjs +0 -1611
- package/dist/date-picker-uyPKJulK.js +0 -2
- package/dist/drawer-8Acg4wkV.mjs +0 -574
- package/dist/drawer-8Acg4wkV.mjs.map +0 -1
- package/dist/drawer-BLHgcEqb.js +0 -2
- package/dist/drawer-BLHgcEqb.js.map +0 -1
- package/dist/modal-Baisuc6m.js +0 -2
- package/dist/modal-Baisuc6m.js.map +0 -1
- package/dist/modal-fp37VbrH.mjs.map +0 -1
- package/dist/popover-B0XJZ5mj.js +0 -2
- package/dist/popover-B0XJZ5mj.js.map +0 -1
- package/dist/popover-I26xNbTz.mjs.map +0 -1
- package/dist/radio-card-group-CneOprGY.mjs +0 -168
- package/dist/radio-card-group-CneOprGY.mjs.map +0 -1
- package/dist/radio-card-group-Ctuvg61o.js +0 -2
- package/dist/radio-card-group-Ctuvg61o.js.map +0 -1
- package/dist/search-field-CpkHGIYi.mjs +0 -151
- package/dist/search-field-CpkHGIYi.mjs.map +0 -1
- package/dist/search-field-Z0PqDARl.js +0 -2
- package/dist/search-field-Z0PqDARl.js.map +0 -1
- package/dist/table-g_n68i4s.mjs.map +0 -1
- package/dist/table-gnGUejtb.js.map +0 -1
- package/dist/tooltip-C8Zxnqdb.js +0 -2
- package/dist/useColorScheme-DNyjsWX9.js +0 -2
- package/tokens/_dark.scss +0 -9
- package/tokens/_index.scss +0 -9
- package/tokens/border/variables.css +0 -13
- package/tokens/border/variables.d.ts +0 -10
- package/tokens/border/variables.dark.css +0 -12
- package/tokens/border/variables.dark.d.ts +0 -10
- package/tokens/border/variables.dark.js +0 -10
- package/tokens/border/variables.dark.json +0 -18
- package/tokens/border/variables.dark.scss +0 -10
- package/tokens/border/variables.js +0 -10
- package/tokens/border/variables.json +0 -18
- package/tokens/border/variables.scss +0 -10
- package/tokens/breakpoint/variables.css +0 -11
- package/tokens/breakpoint/variables.d.ts +0 -8
- package/tokens/breakpoint/variables.dark.css +0 -10
- package/tokens/breakpoint/variables.dark.d.ts +0 -8
- package/tokens/breakpoint/variables.dark.js +0 -8
- package/tokens/breakpoint/variables.dark.json +0 -14
- package/tokens/breakpoint/variables.dark.scss +0 -8
- package/tokens/breakpoint/variables.js +0 -8
- package/tokens/breakpoint/variables.json +0 -14
- package/tokens/breakpoint/variables.scss +0 -8
- package/tokens/color/variables.css +0 -262
- package/tokens/color/variables.d.ts +0 -253
- package/tokens/color/variables.dark.css +0 -262
- package/tokens/color/variables.dark.d.ts +0 -252
- package/tokens/color/variables.dark.js +0 -252
- package/tokens/color/variables.dark.json +0 -306
- package/tokens/color/variables.dark.scss +0 -252
- package/tokens/color/variables.js +0 -253
- package/tokens/color/variables.json +0 -307
- package/tokens/color/variables.scss +0 -253
- package/tokens/dark.css +0 -9
- package/tokens/dark.d.ts +0 -9
- package/tokens/dark.js +0 -9
- package/tokens/filter/variables.css +0 -4
- package/tokens/filter/variables.d.ts +0 -1
- package/tokens/filter/variables.dark.css +0 -3
- package/tokens/filter/variables.dark.d.ts +0 -1
- package/tokens/filter/variables.dark.js +0 -1
- package/tokens/filter/variables.dark.json +0 -7
- package/tokens/filter/variables.dark.scss +0 -1
- package/tokens/filter/variables.js +0 -1
- package/tokens/filter/variables.json +0 -7
- package/tokens/filter/variables.scss +0 -1
- package/tokens/gradient/variables.css +0 -53
- package/tokens/gradient/variables.d.ts +0 -9
- package/tokens/gradient/variables.dark.css +0 -51
- package/tokens/gradient/variables.dark.d.ts +0 -9
- package/tokens/gradient/variables.dark.js +0 -18
- package/tokens/gradient/variables.dark.json +0 -27
- package/tokens/gradient/variables.dark.scss +0 -36
- package/tokens/gradient/variables.js +0 -18
- package/tokens/gradient/variables.json +0 -27
- package/tokens/gradient/variables.scss +0 -42
- package/tokens/index.css +0 -18
- package/tokens/index.d.ts +0 -9
- package/tokens/index.js +0 -9
- package/tokens/motion/variables.css +0 -14
- package/tokens/motion/variables.d.ts +0 -11
- package/tokens/motion/variables.dark.css +0 -13
- package/tokens/motion/variables.dark.d.ts +0 -11
- package/tokens/motion/variables.dark.js +0 -11
- package/tokens/motion/variables.dark.json +0 -19
- package/tokens/motion/variables.dark.scss +0 -11
- package/tokens/motion/variables.js +0 -11
- package/tokens/motion/variables.json +0 -19
- package/tokens/motion/variables.scss +0 -11
- package/tokens/shadow/variables.css +0 -11
- package/tokens/shadow/variables.d.ts +0 -4
- package/tokens/shadow/variables.dark.css +0 -10
- package/tokens/shadow/variables.dark.d.ts +0 -4
- package/tokens/shadow/variables.dark.js +0 -4
- package/tokens/shadow/variables.dark.json +0 -8
- package/tokens/shadow/variables.dark.scss +0 -4
- package/tokens/shadow/variables.js +0 -4
- package/tokens/shadow/variables.json +0 -8
- package/tokens/shadow/variables.scss +0 -4
- package/tokens/spacing/variables.css +0 -26
- package/tokens/spacing/variables.d.ts +0 -23
- package/tokens/spacing/variables.dark.css +0 -17
- package/tokens/spacing/variables.dark.d.ts +0 -15
- package/tokens/spacing/variables.dark.js +0 -15
- package/tokens/spacing/variables.dark.json +0 -19
- package/tokens/spacing/variables.dark.scss +0 -15
- package/tokens/spacing/variables.js +0 -23
- package/tokens/spacing/variables.json +0 -31
- package/tokens/spacing/variables.scss +0 -23
- package/tokens/typography/variables.css +0 -30
- package/tokens/typography/variables.d.ts +0 -26
- package/tokens/typography/variables.dark.css +0 -29
- package/tokens/typography/variables.dark.d.ts +0 -26
- package/tokens/typography/variables.dark.js +0 -28
- package/tokens/typography/variables.dark.json +0 -38
- package/tokens/typography/variables.dark.scss +0 -26
- package/tokens/typography/variables.js +0 -28
- package/tokens/typography/variables.json +0 -38
- package/tokens/typography/variables.scss +0 -26
|
@@ -19,10 +19,10 @@ const er = {
|
|
|
19
19
|
"purpur-comparison-table__cards": "_purpur-comparison-table__cards_1udkj_32",
|
|
20
20
|
"purpur-comparison-table__separator": "_purpur-comparison-table__separator_1udkj_49"
|
|
21
21
|
}, or = {
|
|
22
|
-
"purpur-comparison-table-cell": "_purpur-comparison-table-
|
|
23
|
-
"purpur-comparison-table-cell--check": "_purpur-comparison-table-cell--
|
|
24
|
-
"purpur-comparison-table-cell--minus": "_purpur-comparison-table-cell--
|
|
25
|
-
"purpur-comparison-table-cell__icon": "_purpur-comparison-table-
|
|
22
|
+
"purpur-comparison-table-cell": "_purpur-comparison-table-cell_glb5z_1",
|
|
23
|
+
"purpur-comparison-table-cell--check": "_purpur-comparison-table-cell--check_glb5z_17",
|
|
24
|
+
"purpur-comparison-table-cell--minus": "_purpur-comparison-table-cell--minus_glb5z_20",
|
|
25
|
+
"purpur-comparison-table-cell__icon": "_purpur-comparison-table-cell__icon_glb5z_23"
|
|
26
26
|
}, H = D.bind(or), L = "purpur-comparison-table-cell", tr = ({ value: t }) => {
|
|
27
27
|
const n = W(t) || ["string", "number"].includes(typeof t), a = H(L, [n ? "" : `${L}--${t ? "check" : "minus"}`]), y = t ? Q : U;
|
|
28
28
|
return /* @__PURE__ */ o("span", { className: H(a), children: n ? t : /* @__PURE__ */ o(y, { size: "xs", className: H(`${L}__icon`) }) });
|
|
@@ -33,9 +33,9 @@ const er = {
|
|
|
33
33
|
"purpur-comparison-table-lead-cell__summary-title": "_purpur-comparison-table-lead-cell__summary-title_rqs9w_48",
|
|
34
34
|
"purpur-comparison-table-lead-cell__summary-icon": "_purpur-comparison-table-lead-cell__summary-icon_rqs9w_51"
|
|
35
35
|
}, O = D.bind(ar), j = "purpur-comparison-table-lead-cell", sr = ({ title: t, description: n }) => {
|
|
36
|
-
const
|
|
37
|
-
return /* @__PURE__ */ u("details", { className: a, "data-is-expandable":
|
|
38
|
-
/* @__PURE__ */ u("summary", { className: O(`${j}__summary`), tabIndex:
|
|
36
|
+
const l = typeof n == "string", a = O(j);
|
|
37
|
+
return /* @__PURE__ */ u("details", { className: a, "data-is-expandable": l, children: [
|
|
38
|
+
/* @__PURE__ */ u("summary", { className: O(`${j}__summary`), tabIndex: l ? 0 : -1, children: [
|
|
39
39
|
/* @__PURE__ */ o(q, { className: O(`${j}__summary-title`), variant: "paragraph-100-bold", children: t }),
|
|
40
40
|
/* @__PURE__ */ o(F, { className: O(`${j}__summary-icon`), size: "sm" })
|
|
41
41
|
] }),
|
|
@@ -60,49 +60,49 @@ const er = {
|
|
|
60
60
|
}, m = D.bind(nr), c = "purpur-comparison-table-option-card", cr = ({
|
|
61
61
|
id: t,
|
|
62
62
|
cardIndex: n,
|
|
63
|
-
description:
|
|
63
|
+
description: l,
|
|
64
64
|
variablePriceText: a,
|
|
65
65
|
price: y,
|
|
66
66
|
isHighlighted: f,
|
|
67
67
|
ariaLabels: g,
|
|
68
68
|
badge: h,
|
|
69
69
|
actions: N,
|
|
70
|
-
isFirstCard:
|
|
70
|
+
isFirstCard: z,
|
|
71
71
|
image: r,
|
|
72
72
|
title: i,
|
|
73
73
|
showFullDescriptions: _,
|
|
74
74
|
toggleShowFullDescriptions: d
|
|
75
75
|
}) => {
|
|
76
|
-
const
|
|
76
|
+
const p = A(null), s = A(null), e = A(_), [b, w] = V(!1), k = m(c, {
|
|
77
77
|
[`${c}--highlighted`]: f,
|
|
78
|
-
[`${c}--first-card`]:
|
|
78
|
+
[`${c}--first-card`]: z,
|
|
79
79
|
[`${c}--show-full-descriptions`]: _
|
|
80
80
|
});
|
|
81
81
|
M(() => {
|
|
82
82
|
e.current = _;
|
|
83
83
|
}, [_]);
|
|
84
|
-
const
|
|
84
|
+
const I = C(() => {
|
|
85
85
|
if (e.current)
|
|
86
86
|
return;
|
|
87
|
-
const
|
|
88
|
-
if (!
|
|
87
|
+
const S = p.current, E = s.current;
|
|
88
|
+
if (!S || !E) {
|
|
89
89
|
w(!1);
|
|
90
90
|
return;
|
|
91
91
|
}
|
|
92
|
-
const B =
|
|
92
|
+
const B = S.clientHeight, K = E.offsetHeight;
|
|
93
93
|
w(K > B + 1);
|
|
94
94
|
}, []);
|
|
95
95
|
M(() => {
|
|
96
|
-
const
|
|
97
|
-
if (
|
|
96
|
+
const S = p.current;
|
|
97
|
+
if (I(), !S || typeof ResizeObserver > "u")
|
|
98
98
|
return;
|
|
99
|
-
const E = new ResizeObserver(
|
|
100
|
-
return E.observe(
|
|
99
|
+
const E = new ResizeObserver(I);
|
|
100
|
+
return E.observe(S), () => {
|
|
101
101
|
E.disconnect();
|
|
102
102
|
};
|
|
103
|
-
}, [
|
|
104
|
-
const T = () =>
|
|
105
|
-
/* @__PURE__ */ o(q, { ref:
|
|
103
|
+
}, [I, l]);
|
|
104
|
+
const T = () => l ? /* @__PURE__ */ u("div", { className: m(`${c}__description`), children: [
|
|
105
|
+
/* @__PURE__ */ o(q, { ref: p, className: m(`${c}__description-text`), children: /* @__PURE__ */ o("span", { ref: s, children: l }) }),
|
|
106
106
|
/* @__PURE__ */ u(
|
|
107
107
|
P,
|
|
108
108
|
{
|
|
@@ -138,7 +138,7 @@ const er = {
|
|
|
138
138
|
N
|
|
139
139
|
] })
|
|
140
140
|
] });
|
|
141
|
-
}, ir = "_active_kvsnm_44",
|
|
141
|
+
}, ir = "_active_kvsnm_44", lr = {
|
|
142
142
|
"purpur-comparison-table-scroll-progress": "_purpur-comparison-table-scroll-progress_kvsnm_1",
|
|
143
143
|
"purpur-comparison-table-scroll-progress__indicators": "_purpur-comparison-table-scroll-progress__indicators_kvsnm_15",
|
|
144
144
|
"purpur-comparison-table-scroll-progress__indicator": "_purpur-comparison-table-scroll-progress__indicator_kvsnm_15",
|
|
@@ -146,7 +146,7 @@ const er = {
|
|
|
146
146
|
"purpur-comparison-table-scroll-progress__buttons": "_purpur-comparison-table-scroll-progress__buttons_kvsnm_48",
|
|
147
147
|
"purpur-comparison-table-scroll-progress__button": "_purpur-comparison-table-scroll-progress__button_kvsnm_48",
|
|
148
148
|
"purpur-comparison-table-scroll-progress__button-icon": "_purpur-comparison-table-scroll-progress__button-icon_kvsnm_57"
|
|
149
|
-
}, $ = D.bind(
|
|
149
|
+
}, $ = D.bind(lr), v = "purpur-comparison-table-scroll-progress", pr = ({ items: t, container: n, ariaLabels: l }) => {
|
|
150
150
|
const [a, y] = V(/* @__PURE__ */ new Set()), f = C(
|
|
151
151
|
(r) => {
|
|
152
152
|
const i = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
|
|
@@ -175,44 +175,44 @@ const er = {
|
|
|
175
175
|
const i = new IntersectionObserver(
|
|
176
176
|
(_) => {
|
|
177
177
|
y((d) => {
|
|
178
|
-
const
|
|
178
|
+
const p = new Set(d);
|
|
179
179
|
return _.forEach((s) => {
|
|
180
180
|
const e = Number(s.target.getAttribute("data-card-index"));
|
|
181
|
-
Number.isNaN(e) || (s.isIntersecting ?
|
|
182
|
-
}),
|
|
181
|
+
Number.isNaN(e) || (s.isIntersecting ? p.add(e) : p.delete(e));
|
|
182
|
+
}), p;
|
|
183
183
|
});
|
|
184
184
|
},
|
|
185
185
|
{ root: r, threshold: 0.5 }
|
|
186
186
|
);
|
|
187
187
|
return t.forEach((_, d) => {
|
|
188
|
-
const
|
|
189
|
-
|
|
188
|
+
const p = r.querySelector(`[data-card-index="${d}"]`);
|
|
189
|
+
p && i.observe(p);
|
|
190
190
|
}), () => i.disconnect();
|
|
191
191
|
}, [n, t]), M(() => {
|
|
192
192
|
const r = n.current;
|
|
193
193
|
if (r)
|
|
194
194
|
return r.addEventListener("keydown", N), () => r.removeEventListener("keydown", N);
|
|
195
195
|
}, [n, N]);
|
|
196
|
-
const
|
|
196
|
+
const z = () => {
|
|
197
197
|
if (a.size === 0) return;
|
|
198
|
-
const r = [], i = a.size, _ = Math.min(...Array.from(a)), d = t.slice(0, _).length,
|
|
198
|
+
const r = [], i = a.size, _ = Math.min(...Array.from(a)), d = t.slice(0, _).length, p = t.slice(_ + i).length;
|
|
199
199
|
let s = 0;
|
|
200
200
|
for (let e = 0; e < t.length; e++) {
|
|
201
|
-
if (d + 1 !== e && d <= e && e < t.length -
|
|
201
|
+
if (d + 1 !== e && d <= e && e < t.length - p) continue;
|
|
202
202
|
let b = "active";
|
|
203
|
-
(e < d || e > t.length - 1 -
|
|
203
|
+
(e < d || e > t.length - 1 - p) && (b = ""), r.push(
|
|
204
204
|
/* @__PURE__ */ o("li", { className: $(`${v}__indicator`, b) }, `indicator-${s++}`)
|
|
205
205
|
);
|
|
206
206
|
}
|
|
207
207
|
return r.length < 2 ? null : r;
|
|
208
208
|
};
|
|
209
209
|
return /* @__PURE__ */ u("li", { className: $(v), children: [
|
|
210
|
-
/* @__PURE__ */ o("ul", { className: $(`${v}__indicators`), children:
|
|
210
|
+
/* @__PURE__ */ o("ul", { className: $(`${v}__indicators`), children: z() }),
|
|
211
211
|
/* @__PURE__ */ u("div", { className: $(`${v}__buttons`), children: [
|
|
212
212
|
/* @__PURE__ */ o(
|
|
213
213
|
P,
|
|
214
214
|
{
|
|
215
|
-
"aria-label":
|
|
215
|
+
"aria-label": l.previous,
|
|
216
216
|
variant: "secondary",
|
|
217
217
|
iconOnly: !0,
|
|
218
218
|
className: $(`${v}__button`),
|
|
@@ -224,7 +224,7 @@ const er = {
|
|
|
224
224
|
/* @__PURE__ */ o(
|
|
225
225
|
P,
|
|
226
226
|
{
|
|
227
|
-
"aria-label":
|
|
227
|
+
"aria-label": l.next,
|
|
228
228
|
variant: "secondary",
|
|
229
229
|
iconOnly: !0,
|
|
230
230
|
className: $(`${v}__button`),
|
|
@@ -238,15 +238,15 @@ const er = {
|
|
|
238
238
|
}, R = D.bind(er), x = "purpur-comparison-table", _r = ({
|
|
239
239
|
classname: t,
|
|
240
240
|
features: n,
|
|
241
|
-
items:
|
|
241
|
+
items: l,
|
|
242
242
|
ariaLabels: a,
|
|
243
243
|
variant: y = "primary"
|
|
244
244
|
}) => {
|
|
245
|
-
const f = G(), g = R(t, x, `${x}--${y}`), h = A(null), [N,
|
|
246
|
-
|
|
245
|
+
const f = G(), g = R(t, x, `${x}--${y}`), h = A(null), [N, z] = V(!1), r = C(() => {
|
|
246
|
+
z((s) => !s);
|
|
247
247
|
}, []), i = () => /* @__PURE__ */ u("li", { className: R(`${x}__cards`), children: [
|
|
248
248
|
/* @__PURE__ */ o("div", { className: R(`${x}__separator`) }),
|
|
249
|
-
|
|
249
|
+
l.map((s, e) => /* @__PURE__ */ J(
|
|
250
250
|
cr,
|
|
251
251
|
{
|
|
252
252
|
...s,
|
|
@@ -261,10 +261,10 @@ const er = {
|
|
|
261
261
|
))
|
|
262
262
|
] }), _ = () => Object.entries(n).map(([s, e], b) => /* @__PURE__ */ u("li", { className: R(`${x}__feature-row`), children: [
|
|
263
263
|
/* @__PURE__ */ o(sr, { title: s, description: e }),
|
|
264
|
-
|
|
265
|
-
] }, b)), d = A(0),
|
|
266
|
-
const e = s.currentTarget, b = e.querySelector("[data-card-id]")?.clientWidth ?? 0, w = Math.round(e.scrollLeft / b), k = w * b + w,
|
|
267
|
-
d.current &&
|
|
264
|
+
l.map((w, k) => /* @__PURE__ */ o(tr, { value: w.features[s] ?? !1 }, k))
|
|
265
|
+
] }, b)), d = A(0), p = (s) => {
|
|
266
|
+
const e = s.currentTarget, b = e.querySelector("[data-card-id]")?.clientWidth ?? 0, w = Math.round(e.scrollLeft / b), k = w * b + w, I = s.timeStamp - d.current, T = Math.abs(e.scrollLeft - k);
|
|
267
|
+
d.current && I < 200 || T < 10 || (d.current = s.timeStamp, e.scrollTo({ left: k, behavior: "smooth" }));
|
|
268
268
|
};
|
|
269
269
|
return /* @__PURE__ */ o("div", { className: R(x + "__wrapper"), children: /* @__PURE__ */ u(
|
|
270
270
|
"ul",
|
|
@@ -272,13 +272,13 @@ const er = {
|
|
|
272
272
|
id: x + `-${f}`,
|
|
273
273
|
ref: h,
|
|
274
274
|
className: g,
|
|
275
|
-
onScrollEnd:
|
|
275
|
+
onScrollEnd: p,
|
|
276
276
|
style: {
|
|
277
277
|
// @ts-expect-error | Typescript doesn't recognize the CSS variable, but it works as intended
|
|
278
|
-
"--initial-columns":
|
|
278
|
+
"--initial-columns": l.length + 1
|
|
279
279
|
},
|
|
280
280
|
children: [
|
|
281
|
-
/* @__PURE__ */ o(
|
|
281
|
+
/* @__PURE__ */ o(pr, { items: l, container: h, ariaLabels: a }),
|
|
282
282
|
i(),
|
|
283
283
|
_()
|
|
284
284
|
]
|
|
@@ -289,4 +289,4 @@ _r.displayName = "ComparisonTable";
|
|
|
289
289
|
export {
|
|
290
290
|
_r as C
|
|
291
291
|
};
|
|
292
|
-
//# sourceMappingURL=comparison-table-
|
|
292
|
+
//# sourceMappingURL=comparison-table-CjTE-fHN.mjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"comparison-table-CZMKl1TX.mjs","sources":["../../../components/comparison-table/src/components/Cell/cell.tsx","../../../components/comparison-table/src/components/LeadCell/lead-cell.tsx","../../../components/comparison-table/src/components/OptionCard/option-card.tsx","../../../components/comparison-table/src/components/ScrollProgress/scroll-progress.tsx","../../../components/comparison-table/src/comparison-table.tsx"],"sourcesContent":["import React, { isValidElement, type ReactNode } from \"react\";\nimport { IconCheckmark } from \"@purpur/icon/checkmark\";\nimport { IconMinus } from \"@purpur/icon/minus\";\nimport c from \"classnames/bind\";\n\nimport styles from \"./cell.module.scss\";\n\ntype CellProps = {\n value: boolean | ReactNode;\n};\n\nconst cx = c.bind(styles);\n\nconst rootClassName = \"purpur-comparison-table-cell\";\n\nexport const Cell = ({ value }: CellProps) => {\n const isReactNode = isValidElement(value) || [\"string\", \"number\"].includes(typeof value);\n\n const getClassName = () => {\n if (isReactNode) return \"\";\n return `${rootClassName}--${value ? \"check\" : \"minus\"}`;\n };\n\n const classes = cx(rootClassName, [getClassName()]);\n\n const Icon = value ? IconCheckmark : IconMinus;\n\n return (\n <span className={cx(classes)}>\n {isReactNode ? value : <Icon size=\"xs\" className={cx(`${rootClassName}__icon`)} />}\n </span>\n );\n};\n","import React, { type ReactNode } from \"react\";\nimport { IconChevronDown } from \"@purpur/icon/chevron-down\";\nimport { Paragraph } from \"@purpur/paragraph\";\nimport c from \"classnames/bind\";\n\nimport styles from \"./lead-cell.module.scss\";\n\ntype LeadCellProps = {\n title: string;\n description?: ReactNode;\n};\n\nconst cx = c.bind(styles);\n\nconst rootClassName = \"purpur-comparison-table-lead-cell\";\n\nexport const LeadCell = ({ title, description }: LeadCellProps) => {\n const isExpandable = typeof description === \"string\";\n const classes = cx(rootClassName);\n\n return (\n <details className={classes} data-is-expandable={isExpandable}>\n <summary className={cx(`${rootClassName}__summary`)} tabIndex={isExpandable ? 0 : -1}>\n <Paragraph className={cx(`${rootClassName}__summary-title`)} variant=\"paragraph-100-bold\">\n {title}\n </Paragraph>\n <IconChevronDown className={cx(`${rootClassName}__summary-icon`)} size=\"sm\" />\n </summary>\n {description && (\n <Paragraph variant=\"paragraph-100\" className={cx(`${rootClassName}__description`)}>\n {description}\n </Paragraph>\n )}\n </details>\n );\n};\n","import React, { type ReactNode, useCallback, useEffect, useRef, useState } from \"react\";\nimport { Badge, type BadgeProps } from \"@purpur/badge\";\nimport { Button } from \"@purpur/button\";\nimport { Heading } from \"@purpur/heading\";\nimport { IconChevronDown } from \"@purpur/icon/chevron-down\";\nimport { Paragraph } from \"@purpur/paragraph\";\nimport c from \"classnames/bind\";\n\nimport { type ComparisonTableProps } from \"../../comparison-table\";\nimport styles from \"./option-card.module.scss\";\n\nconst cx = c.bind(styles);\n\nconst rootClassName = \"purpur-comparison-table-option-card\";\n\nexport type OptionCardProps = {\n image: {\n src: string;\n alt: string;\n };\n\n title: string;\n description: string;\n variablePriceText: string;\n price: string;\n\n actions: ReactNode;\n\n badge?: BadgeProps;\n isHighlighted?: boolean;\n};\n\ntype OptionCardPropsAdditions = {\n id: string;\n cardIndex: number;\n isFirstCard: boolean;\n ariaLabels: ComparisonTableProps[\"ariaLabels\"];\n\n showFullDescriptions: boolean;\n toggleShowFullDescriptions: () => void;\n};\n\nexport const OptionCard = ({\n id,\n cardIndex,\n description,\n variablePriceText,\n price,\n isHighlighted,\n ariaLabels,\n badge,\n actions,\n isFirstCard,\n image,\n title,\n showFullDescriptions,\n toggleShowFullDescriptions,\n}: OptionCardProps & OptionCardPropsAdditions) => {\n const descriptionRef = useRef<HTMLParagraphElement>(null);\n const descriptionContentRef = useRef<HTMLSpanElement>(null);\n const showFullDescriptionsRef = useRef(showFullDescriptions);\n const [descriptionOverflows, setDescriptionOverflows] = useState(false);\n\n const classes = cx(rootClassName, {\n [`${rootClassName}--highlighted`]: isHighlighted,\n [`${rootClassName}--first-card`]: isFirstCard,\n [`${rootClassName}--show-full-descriptions`]: showFullDescriptions,\n });\n\n useEffect(() => {\n showFullDescriptionsRef.current = showFullDescriptions;\n }, [showFullDescriptions]);\n\n const checkDescriptionOverflow = useCallback(() => {\n if (showFullDescriptionsRef.current) {\n return;\n }\n\n const description = descriptionRef.current;\n const descriptionContent = descriptionContentRef.current;\n\n if (!description || !descriptionContent) {\n setDescriptionOverflows(false);\n return;\n }\n\n const descriptionHeight = description.clientHeight;\n const contentHeight = descriptionContent.offsetHeight;\n\n setDescriptionOverflows(contentHeight > descriptionHeight + 1);\n }, []);\n\n useEffect(() => {\n const descriptionElement = descriptionRef.current;\n\n checkDescriptionOverflow();\n\n if (!descriptionElement || typeof ResizeObserver === \"undefined\") {\n return undefined;\n }\n\n const resizeObserver = new ResizeObserver(checkDescriptionOverflow);\n resizeObserver.observe(descriptionElement);\n\n return () => {\n resizeObserver.disconnect();\n };\n }, [checkDescriptionOverflow, description]);\n\n const renderDescription = () => {\n if (!description) return null;\n\n return (\n <div className={cx(`${rootClassName}__description`)}>\n <Paragraph ref={descriptionRef} className={cx(`${rootClassName}__description-text`)}>\n <span ref={descriptionContentRef}>{description}</span>\n </Paragraph>\n <Button\n variant=\"text\"\n size=\"xs\"\n className={cx(`${rootClassName}__read-more`, {\n [`${rootClassName}__read-more--hidden`]: !descriptionOverflows,\n })}\n onClick={toggleShowFullDescriptions}\n aria-hidden={!descriptionOverflows}\n tabIndex={descriptionOverflows ? undefined : -1}\n >\n <span className={cx(`${rootClassName}__read-more-text`)}>\n {showFullDescriptions ? ariaLabels.readLess : ariaLabels.readMore}\n </span>\n <IconChevronDown className={cx(`${rootClassName}__read-more-icon`)} size=\"xs\" />\n </Button>\n </div>\n );\n };\n\n return (\n <article className={classes} data-card-id={id} data-card-index={cardIndex}>\n {badge && <Badge {...badge} className={cx(`${rootClassName}__badge`)} />}\n\n <section className={cx(`${rootClassName}__main-content`)}>\n <img src={image.src} alt={image.alt} className={cx(`${rootClassName}__image`)} />\n\n <div className={cx(`${rootClassName}__body`)}>\n <Heading tag=\"h3\" variant=\"title-200\" className={cx(`${rootClassName}__title`)}>\n {title}\n </Heading>\n {renderDescription()}\n </div>\n </section>\n\n <footer className={cx(`${rootClassName}__footer`)}>\n <span className={cx(`${rootClassName}__price`)} id={id}>\n <Paragraph variant=\"paragraph-100\">{variablePriceText}</Paragraph>\n <Paragraph variant=\"paragraph-100-bold\">{price}</Paragraph>\n </span>\n\n {actions}\n </footer>\n </article>\n );\n};\n","import React, { type RefObject, useCallback, useEffect, useState } from \"react\";\nimport { Button } from \"@purpur/button\";\nimport { IconArrowLeft } from \"@purpur/icon/arrow-left\";\nimport { IconArrowRight } from \"@purpur/icon/arrow-right\";\nimport c from \"classnames/bind\";\n\nimport { type ComparisonTableProps, type Features, type Item } from \"../../comparison-table\";\nimport styles from \"./scroll-progress.module.scss\";\n\nconst cx = c.bind(styles);\nconst rootClassName = \"purpur-comparison-table-scroll-progress\";\n\ntype ScrollProgressProps = {\n items: Array<Item<Features>>;\n container: RefObject<HTMLUListElement | null>;\n ariaLabels: ComparisonTableProps[\"ariaLabels\"];\n};\n\nexport const ScrollProgress = ({ items, container, ariaLabels }: ScrollProgressProps) => {\n const [inViewSet, setInViewSet] = useState<Set<number>>(new Set());\n\n const scrollToCard = useCallback(\n (index: number) => {\n const reduceMotion = window.matchMedia(\"(prefers-reduced-motion: reduce)\").matches;\n\n const card = container.current?.querySelector(\n `[data-card-index=\"${index}\"]`\n ) as HTMLElement | null;\n card?.scrollIntoView({ behavior: reduceMotion ? \"instant\" : \"smooth\", block: \"nearest\" });\n },\n [container]\n );\n\n const previousCard = useCallback(() => {\n if (inViewSet.size === 0) return;\n\n const leftmostactiveIndex = Math.min(...Array.from(inViewSet));\n const targetIndex = leftmostactiveIndex - 1;\n\n if (targetIndex < 0) return;\n\n scrollToCard(targetIndex);\n }, [inViewSet, scrollToCard]);\n\n const nextCard = useCallback(() => {\n if (inViewSet.size === 0) return;\n\n const rightmostactiveIndex = Math.max(...Array.from(inViewSet));\n const targetIndex = rightmostactiveIndex + 1;\n\n if (targetIndex >= items.length) return;\n\n scrollToCard(targetIndex);\n }, [inViewSet, items.length, scrollToCard]);\n\n const handleKeyDown = useCallback(\n (e: KeyboardEvent) => {\n if (e.key === \"ArrowRight\" || e.key === \"ArrowLeft\") {\n e.preventDefault();\n\n if (e.key === \"ArrowRight\") nextCard();\n else if (e.key === \"ArrowLeft\") previousCard();\n }\n },\n [nextCard, previousCard]\n );\n\n useEffect(() => {\n const root = container.current;\n\n if (!root) return;\n\n const observer = new IntersectionObserver(\n (entries) => {\n setInViewSet((prev) => {\n const next = new Set(prev);\n\n entries.forEach((entry) => {\n const index = Number(entry.target.getAttribute(\"data-card-index\"));\n\n if (Number.isNaN(index)) return;\n\n if (entry.isIntersecting) {\n next.add(index);\n } else {\n next.delete(index);\n }\n });\n return next;\n });\n },\n { root, threshold: 0.5 }\n );\n\n items.forEach((_, index) => {\n const card = root.querySelector(`[data-card-index=\"${index}\"]`) as HTMLElement | null;\n\n if (card) observer.observe(card);\n });\n\n return () => observer.disconnect();\n }, [container, items]);\n\n useEffect(() => {\n const root = container.current;\n\n if (!root) return;\n\n root.addEventListener(\"keydown\", handleKeyDown);\n\n return () => root.removeEventListener(\"keydown\", handleKeyDown);\n }, [container, handleKeyDown]);\n\n const renderIndicators = () => {\n if (inViewSet.size === 0) return;\n\n const indicators = [];\n const viewCapacity = inViewSet.size;\n const leftmostActiveIndex = Math.min(...Array.from(inViewSet));\n const head = items.slice(0, leftmostActiveIndex).length;\n const trail = items.slice(leftmostActiveIndex + viewCapacity).length;\n\n let key = 0;\n\n for (let i = 0; i < items.length; i++) {\n if (head + 1 !== i && head <= i && i < items.length - trail) continue;\n\n let status = \"active\";\n\n if (i < head || i > items.length - 1 - trail) status = \"\";\n\n indicators.push(\n <li key={`indicator-${key++}`} className={cx(`${rootClassName}__indicator`, status)} />\n );\n }\n\n if (indicators.length < 2) return null;\n\n return indicators;\n };\n\n return (\n <li className={cx(rootClassName)}>\n <ul className={cx(`${rootClassName}__indicators`)}>{renderIndicators()}</ul>\n\n <div className={cx(`${rootClassName}__buttons`)}>\n <Button\n aria-label={ariaLabels.previous}\n variant=\"secondary\"\n iconOnly\n className={cx(`${rootClassName}__button`)}\n disabled={inViewSet.has(0)}\n onClick={previousCard}\n >\n <IconArrowLeft className={cx(`${rootClassName}__button-icon`)} size=\"xs\" />\n </Button>\n <Button\n aria-label={ariaLabels.next}\n variant=\"secondary\"\n iconOnly\n className={cx(`${rootClassName}__button`)}\n disabled={inViewSet.has(items.length - 1)}\n onClick={nextCard}\n >\n <IconArrowRight className={cx(`${rootClassName}__button-icon`)} size=\"xs\" />\n </Button>\n </div>\n </li>\n );\n};\n","import React, { type ReactNode, type UIEvent, useCallback, useId, useRef, useState } from \"react\";\nimport c from \"classnames/bind\";\n\nimport styles from \"./comparison-table.module.scss\";\nimport { Cell } from \"./components/Cell/cell\";\nimport { LeadCell } from \"./components/LeadCell/lead-cell\";\nimport { OptionCard, type OptionCardProps } from \"./components/OptionCard/option-card\";\nimport { ScrollProgress } from \"./components/ScrollProgress/scroll-progress\";\n\nconst cx = c.bind(styles);\n\nconst rootClassName = \"purpur-comparison-table\";\n\nexport type Features = Record<string, ReactNode | null>;\n\nexport type Item<TFeatures extends Features = Features> = OptionCardProps & {\n features: Partial<Record<keyof TFeatures, ReactNode | string | boolean>>;\n};\n\nexport type ComparisonTableProps<TFeatures extends Features = Features> = {\n /** List of features that can be supported by the comparison table\n *\n * string = description of the feature that can be viewed by expanding cell.\n *\n * null = no description\n *\n {\n [featureName]: ReactNode | null\n }\n */\n features: TFeatures;\n\n /** List of items to be displayed in the comparison table\n *\n *\n Item = {\n image: {\n src: string;\n alt: string;\n };\n\n title: string;\n description: string;\n variablePriceText: string;\n price: string;\n actions: ReactNode;\n badge?: BadgeProps;\n isHighlighted?: boolean;\n\n features: {\n [featureName in keyof Features]?: string | boolean;\n };\n }\n */\n items: Array<Item<TFeatures>>;\n\n /** Aria labels for the comparison table and various components\n *\n {\n previous: string;\n next: string;\n readMore: string;\n readLess: string;\n }\n */\n ariaLabels: {\n previous: string;\n next: string;\n readMore: string;\n readLess: string;\n };\n variant?: \"primary\" | \"secondary\";\n classname?: string;\n};\n\nexport const ComparisonTable = <TFeatures extends Features>({\n classname,\n features,\n items,\n ariaLabels,\n variant = \"primary\",\n}: ComparisonTableProps<TFeatures>) => {\n const id = useId();\n const classes = cx(classname, rootClassName, `${rootClassName}--${variant}`);\n const containerRef = useRef<HTMLUListElement>(null);\n const [showFullDescriptions, setShowFullDescriptions] = useState(false);\n\n const handleToggleShowFullDescriptions = useCallback(() => {\n setShowFullDescriptions((prev) => !prev);\n }, []);\n\n const renderCards = () => {\n return (\n <li className={cx(`${rootClassName}__cards`)}>\n <div className={cx(`${rootClassName}__separator`)} />\n {items.map((item, index) => (\n <OptionCard\n {...item}\n showFullDescriptions={showFullDescriptions}\n toggleShowFullDescriptions={handleToggleShowFullDescriptions}\n key={index}\n isFirstCard={index === 0}\n ariaLabels={ariaLabels}\n cardIndex={index}\n id={`${index}-${id}`}\n />\n ))}\n </li>\n );\n };\n\n const renderFeatures = () => {\n return Object.entries(features).map(([title, description], i) => (\n <li key={i} className={cx(`${rootClassName}__feature-row`)}>\n <LeadCell title={title} description={description} />\n {items.map((item, index) => (\n <Cell key={index} value={item.features[title as keyof TFeatures] ?? false} />\n ))}\n </li>\n ));\n };\n\n const deltaTime = useRef(0);\n\n const handleScrollEnd = (e: UIEvent<HTMLUListElement>) => {\n /**\n * This function makes sure that the scroll position is never stuck between two cards, since scroll snap is not fully reliable.\n */\n\n const target = e.currentTarget;\n const cardwidth = target.querySelector(\"[data-card-id]\")?.clientWidth ?? 0;\n const cardPos = Math.round(target.scrollLeft / cardwidth);\n const scrollTarget = cardPos * cardwidth + cardPos;\n const timeDiff = e.timeStamp - deltaTime.current;\n const scrollDiff = Math.abs(target.scrollLeft - scrollTarget);\n\n if (deltaTime.current && timeDiff < 200) return;\n if (scrollDiff < 10) return;\n\n deltaTime.current = e.timeStamp;\n\n target.scrollTo({ left: scrollTarget, behavior: \"smooth\" });\n };\n\n return (\n <div className={cx(rootClassName + \"__wrapper\")}>\n <ul\n id={rootClassName + `-${id}`}\n ref={containerRef}\n className={classes}\n // eslint-disable-next-line react/no-unknown-property\n onScrollEnd={handleScrollEnd}\n style={{\n // @ts-expect-error | Typescript doesn't recognize the CSS variable, but it works as intended\n [\"--initial-columns\"]: items.length + 1,\n }}\n >\n <ScrollProgress items={items} container={containerRef} ariaLabels={ariaLabels} />\n {renderCards()}\n {renderFeatures()}\n </ul>\n </div>\n );\n};\n\nComparisonTable.displayName = \"ComparisonTable\";\n"],"names":["cx","c","styles","rootClassName","Cell","value","isReactNode","isValidElement","classes","Icon","IconCheckmark","IconMinus","jsx","LeadCell","title","description","isExpandable","jsxs","Paragraph","IconChevronDown","OptionCard","id","cardIndex","variablePriceText","price","isHighlighted","ariaLabels","badge","actions","isFirstCard","image","showFullDescriptions","toggleShowFullDescriptions","descriptionRef","useRef","descriptionContentRef","showFullDescriptionsRef","descriptionOverflows","setDescriptionOverflows","useState","useEffect","checkDescriptionOverflow","useCallback","descriptionContent","descriptionHeight","contentHeight","descriptionElement","resizeObserver","renderDescription","Button","Badge","Heading","ScrollProgress","items","container","inViewSet","setInViewSet","scrollToCard","index","reduceMotion","previousCard","targetIndex","nextCard","handleKeyDown","e","root","observer","entries","prev","next","entry","card","renderIndicators","indicators","viewCapacity","leftmostActiveIndex","head","trail","key","i","status","IconArrowLeft","IconArrowRight","ComparisonTable","classname","features","variant","useId","containerRef","setShowFullDescriptions","handleToggleShowFullDescriptions","renderCards","item","createElement","renderFeatures","deltaTime","handleScrollEnd","target","cardwidth","cardPos","scrollTarget","timeDiff","scrollDiff"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"comparison-table-CjTE-fHN.mjs","sources":["../../../components/comparison-table/src/components/Cell/cell.tsx","../../../components/comparison-table/src/components/LeadCell/lead-cell.tsx","../../../components/comparison-table/src/components/OptionCard/option-card.tsx","../../../components/comparison-table/src/components/ScrollProgress/scroll-progress.tsx","../../../components/comparison-table/src/comparison-table.tsx"],"sourcesContent":["import React, { isValidElement, type ReactNode } from \"react\";\nimport { IconCheckmark } from \"@purpur/icon/checkmark\";\nimport { IconMinus } from \"@purpur/icon/minus\";\nimport c from \"classnames/bind\";\n\nimport styles from \"./cell.module.scss\";\n\ntype CellProps = {\n value: boolean | ReactNode;\n};\n\nconst cx = c.bind(styles);\n\nconst rootClassName = \"purpur-comparison-table-cell\";\n\nexport const Cell = ({ value }: CellProps) => {\n const isReactNode = isValidElement(value) || [\"string\", \"number\"].includes(typeof value);\n\n const getClassName = () => {\n if (isReactNode) return \"\";\n return `${rootClassName}--${value ? \"check\" : \"minus\"}`;\n };\n\n const classes = cx(rootClassName, [getClassName()]);\n\n const Icon = value ? IconCheckmark : IconMinus;\n\n return (\n <span className={cx(classes)}>\n {isReactNode ? value : <Icon size=\"xs\" className={cx(`${rootClassName}__icon`)} />}\n </span>\n );\n};\n","import React, { type ReactNode } from \"react\";\nimport { IconChevronDown } from \"@purpur/icon/chevron-down\";\nimport { Paragraph } from \"@purpur/paragraph\";\nimport c from \"classnames/bind\";\n\nimport styles from \"./lead-cell.module.scss\";\n\ntype LeadCellProps = {\n title: string;\n description?: ReactNode;\n};\n\nconst cx = c.bind(styles);\n\nconst rootClassName = \"purpur-comparison-table-lead-cell\";\n\nexport const LeadCell = ({ title, description }: LeadCellProps) => {\n const isExpandable = typeof description === \"string\";\n const classes = cx(rootClassName);\n\n return (\n <details className={classes} data-is-expandable={isExpandable}>\n <summary className={cx(`${rootClassName}__summary`)} tabIndex={isExpandable ? 0 : -1}>\n <Paragraph className={cx(`${rootClassName}__summary-title`)} variant=\"paragraph-100-bold\">\n {title}\n </Paragraph>\n <IconChevronDown className={cx(`${rootClassName}__summary-icon`)} size=\"sm\" />\n </summary>\n {description && (\n <Paragraph variant=\"paragraph-100\" className={cx(`${rootClassName}__description`)}>\n {description}\n </Paragraph>\n )}\n </details>\n );\n};\n","import React, { type ReactNode, useCallback, useEffect, useRef, useState } from \"react\";\nimport { Badge, type BadgeProps } from \"@purpur/badge\";\nimport { Button } from \"@purpur/button\";\nimport { Heading } from \"@purpur/heading\";\nimport { IconChevronDown } from \"@purpur/icon/chevron-down\";\nimport { Paragraph } from \"@purpur/paragraph\";\nimport c from \"classnames/bind\";\n\nimport { type ComparisonTableProps } from \"../../comparison-table\";\nimport styles from \"./option-card.module.scss\";\n\nconst cx = c.bind(styles);\n\nconst rootClassName = \"purpur-comparison-table-option-card\";\n\nexport type OptionCardProps = {\n image: {\n src: string;\n alt: string;\n };\n\n title: string;\n description: string;\n variablePriceText: string;\n price: string;\n\n actions: ReactNode;\n\n badge?: BadgeProps;\n isHighlighted?: boolean;\n};\n\ntype OptionCardPropsAdditions = {\n id: string;\n cardIndex: number;\n isFirstCard: boolean;\n ariaLabels: ComparisonTableProps[\"ariaLabels\"];\n\n showFullDescriptions: boolean;\n toggleShowFullDescriptions: () => void;\n};\n\nexport const OptionCard = ({\n id,\n cardIndex,\n description,\n variablePriceText,\n price,\n isHighlighted,\n ariaLabels,\n badge,\n actions,\n isFirstCard,\n image,\n title,\n showFullDescriptions,\n toggleShowFullDescriptions,\n}: OptionCardProps & OptionCardPropsAdditions) => {\n const descriptionRef = useRef<HTMLParagraphElement>(null);\n const descriptionContentRef = useRef<HTMLSpanElement>(null);\n const showFullDescriptionsRef = useRef(showFullDescriptions);\n const [descriptionOverflows, setDescriptionOverflows] = useState(false);\n\n const classes = cx(rootClassName, {\n [`${rootClassName}--highlighted`]: isHighlighted,\n [`${rootClassName}--first-card`]: isFirstCard,\n [`${rootClassName}--show-full-descriptions`]: showFullDescriptions,\n });\n\n useEffect(() => {\n showFullDescriptionsRef.current = showFullDescriptions;\n }, [showFullDescriptions]);\n\n const checkDescriptionOverflow = useCallback(() => {\n if (showFullDescriptionsRef.current) {\n return;\n }\n\n const description = descriptionRef.current;\n const descriptionContent = descriptionContentRef.current;\n\n if (!description || !descriptionContent) {\n setDescriptionOverflows(false);\n return;\n }\n\n const descriptionHeight = description.clientHeight;\n const contentHeight = descriptionContent.offsetHeight;\n\n setDescriptionOverflows(contentHeight > descriptionHeight + 1);\n }, []);\n\n useEffect(() => {\n const descriptionElement = descriptionRef.current;\n\n checkDescriptionOverflow();\n\n if (!descriptionElement || typeof ResizeObserver === \"undefined\") {\n return undefined;\n }\n\n const resizeObserver = new ResizeObserver(checkDescriptionOverflow);\n resizeObserver.observe(descriptionElement);\n\n return () => {\n resizeObserver.disconnect();\n };\n }, [checkDescriptionOverflow, description]);\n\n const renderDescription = () => {\n if (!description) return null;\n\n return (\n <div className={cx(`${rootClassName}__description`)}>\n <Paragraph ref={descriptionRef} className={cx(`${rootClassName}__description-text`)}>\n <span ref={descriptionContentRef}>{description}</span>\n </Paragraph>\n <Button\n variant=\"text\"\n size=\"xs\"\n className={cx(`${rootClassName}__read-more`, {\n [`${rootClassName}__read-more--hidden`]: !descriptionOverflows,\n })}\n onClick={toggleShowFullDescriptions}\n aria-hidden={!descriptionOverflows}\n tabIndex={descriptionOverflows ? undefined : -1}\n >\n <span className={cx(`${rootClassName}__read-more-text`)}>\n {showFullDescriptions ? ariaLabels.readLess : ariaLabels.readMore}\n </span>\n <IconChevronDown className={cx(`${rootClassName}__read-more-icon`)} size=\"xs\" />\n </Button>\n </div>\n );\n };\n\n return (\n <article className={classes} data-card-id={id} data-card-index={cardIndex}>\n {badge && <Badge {...badge} className={cx(`${rootClassName}__badge`)} />}\n\n <section className={cx(`${rootClassName}__main-content`)}>\n <img src={image.src} alt={image.alt} className={cx(`${rootClassName}__image`)} />\n\n <div className={cx(`${rootClassName}__body`)}>\n <Heading tag=\"h3\" variant=\"title-200\" className={cx(`${rootClassName}__title`)}>\n {title}\n </Heading>\n {renderDescription()}\n </div>\n </section>\n\n <footer className={cx(`${rootClassName}__footer`)}>\n <span className={cx(`${rootClassName}__price`)} id={id}>\n <Paragraph variant=\"paragraph-100\">{variablePriceText}</Paragraph>\n <Paragraph variant=\"paragraph-100-bold\">{price}</Paragraph>\n </span>\n\n {actions}\n </footer>\n </article>\n );\n};\n","import React, { type RefObject, useCallback, useEffect, useState } from \"react\";\nimport { Button } from \"@purpur/button\";\nimport { IconArrowLeft } from \"@purpur/icon/arrow-left\";\nimport { IconArrowRight } from \"@purpur/icon/arrow-right\";\nimport c from \"classnames/bind\";\n\nimport { type ComparisonTableProps, type Features, type Item } from \"../../comparison-table\";\nimport styles from \"./scroll-progress.module.scss\";\n\nconst cx = c.bind(styles);\nconst rootClassName = \"purpur-comparison-table-scroll-progress\";\n\ntype ScrollProgressProps = {\n items: Array<Item<Features>>;\n container: RefObject<HTMLUListElement | null>;\n ariaLabels: ComparisonTableProps[\"ariaLabels\"];\n};\n\nexport const ScrollProgress = ({ items, container, ariaLabels }: ScrollProgressProps) => {\n const [inViewSet, setInViewSet] = useState<Set<number>>(new Set());\n\n const scrollToCard = useCallback(\n (index: number) => {\n const reduceMotion = window.matchMedia(\"(prefers-reduced-motion: reduce)\").matches;\n\n const card = container.current?.querySelector(\n `[data-card-index=\"${index}\"]`\n ) as HTMLElement | null;\n card?.scrollIntoView({ behavior: reduceMotion ? \"instant\" : \"smooth\", block: \"nearest\" });\n },\n [container]\n );\n\n const previousCard = useCallback(() => {\n if (inViewSet.size === 0) return;\n\n const leftmostactiveIndex = Math.min(...Array.from(inViewSet));\n const targetIndex = leftmostactiveIndex - 1;\n\n if (targetIndex < 0) return;\n\n scrollToCard(targetIndex);\n }, [inViewSet, scrollToCard]);\n\n const nextCard = useCallback(() => {\n if (inViewSet.size === 0) return;\n\n const rightmostactiveIndex = Math.max(...Array.from(inViewSet));\n const targetIndex = rightmostactiveIndex + 1;\n\n if (targetIndex >= items.length) return;\n\n scrollToCard(targetIndex);\n }, [inViewSet, items.length, scrollToCard]);\n\n const handleKeyDown = useCallback(\n (e: KeyboardEvent) => {\n if (e.key === \"ArrowRight\" || e.key === \"ArrowLeft\") {\n e.preventDefault();\n\n if (e.key === \"ArrowRight\") nextCard();\n else if (e.key === \"ArrowLeft\") previousCard();\n }\n },\n [nextCard, previousCard]\n );\n\n useEffect(() => {\n const root = container.current;\n\n if (!root) return;\n\n const observer = new IntersectionObserver(\n (entries) => {\n setInViewSet((prev) => {\n const next = new Set(prev);\n\n entries.forEach((entry) => {\n const index = Number(entry.target.getAttribute(\"data-card-index\"));\n\n if (Number.isNaN(index)) return;\n\n if (entry.isIntersecting) {\n next.add(index);\n } else {\n next.delete(index);\n }\n });\n return next;\n });\n },\n { root, threshold: 0.5 }\n );\n\n items.forEach((_, index) => {\n const card = root.querySelector(`[data-card-index=\"${index}\"]`) as HTMLElement | null;\n\n if (card) observer.observe(card);\n });\n\n return () => observer.disconnect();\n }, [container, items]);\n\n useEffect(() => {\n const root = container.current;\n\n if (!root) return;\n\n root.addEventListener(\"keydown\", handleKeyDown);\n\n return () => root.removeEventListener(\"keydown\", handleKeyDown);\n }, [container, handleKeyDown]);\n\n const renderIndicators = () => {\n if (inViewSet.size === 0) return;\n\n const indicators = [];\n const viewCapacity = inViewSet.size;\n const leftmostActiveIndex = Math.min(...Array.from(inViewSet));\n const head = items.slice(0, leftmostActiveIndex).length;\n const trail = items.slice(leftmostActiveIndex + viewCapacity).length;\n\n let key = 0;\n\n for (let i = 0; i < items.length; i++) {\n if (head + 1 !== i && head <= i && i < items.length - trail) continue;\n\n let status = \"active\";\n\n if (i < head || i > items.length - 1 - trail) status = \"\";\n\n indicators.push(\n <li key={`indicator-${key++}`} className={cx(`${rootClassName}__indicator`, status)} />\n );\n }\n\n if (indicators.length < 2) return null;\n\n return indicators;\n };\n\n return (\n <li className={cx(rootClassName)}>\n <ul className={cx(`${rootClassName}__indicators`)}>{renderIndicators()}</ul>\n\n <div className={cx(`${rootClassName}__buttons`)}>\n <Button\n aria-label={ariaLabels.previous}\n variant=\"secondary\"\n iconOnly\n className={cx(`${rootClassName}__button`)}\n disabled={inViewSet.has(0)}\n onClick={previousCard}\n >\n <IconArrowLeft className={cx(`${rootClassName}__button-icon`)} size=\"xs\" />\n </Button>\n <Button\n aria-label={ariaLabels.next}\n variant=\"secondary\"\n iconOnly\n className={cx(`${rootClassName}__button`)}\n disabled={inViewSet.has(items.length - 1)}\n onClick={nextCard}\n >\n <IconArrowRight className={cx(`${rootClassName}__button-icon`)} size=\"xs\" />\n </Button>\n </div>\n </li>\n );\n};\n","import React, { type ReactNode, type UIEvent, useCallback, useId, useRef, useState } from \"react\";\nimport c from \"classnames/bind\";\n\nimport styles from \"./comparison-table.module.scss\";\nimport { Cell } from \"./components/Cell/cell\";\nimport { LeadCell } from \"./components/LeadCell/lead-cell\";\nimport { OptionCard, type OptionCardProps } from \"./components/OptionCard/option-card\";\nimport { ScrollProgress } from \"./components/ScrollProgress/scroll-progress\";\n\nconst cx = c.bind(styles);\n\nconst rootClassName = \"purpur-comparison-table\";\n\nexport type Features = Record<string, ReactNode | null>;\n\nexport type Item<TFeatures extends Features = Features> = OptionCardProps & {\n features: Partial<Record<keyof TFeatures, ReactNode | string | boolean>>;\n};\n\nexport type ComparisonTableProps<TFeatures extends Features = Features> = {\n /** List of features that can be supported by the comparison table\n *\n * string = description of the feature that can be viewed by expanding cell.\n *\n * null = no description\n *\n {\n [featureName]: ReactNode | null\n }\n */\n features: TFeatures;\n\n /** List of items to be displayed in the comparison table\n *\n *\n Item = {\n image: {\n src: string;\n alt: string;\n };\n\n title: string;\n description: string;\n variablePriceText: string;\n price: string;\n actions: ReactNode;\n badge?: BadgeProps;\n isHighlighted?: boolean;\n\n features: {\n [featureName in keyof Features]?: string | boolean;\n };\n }\n */\n items: Array<Item<TFeatures>>;\n\n /** Aria labels for the comparison table and various components\n *\n {\n previous: string;\n next: string;\n readMore: string;\n readLess: string;\n }\n */\n ariaLabels: {\n previous: string;\n next: string;\n readMore: string;\n readLess: string;\n };\n variant?: \"primary\" | \"secondary\";\n classname?: string;\n};\n\nexport const ComparisonTable = <TFeatures extends Features>({\n classname,\n features,\n items,\n ariaLabels,\n variant = \"primary\",\n}: ComparisonTableProps<TFeatures>) => {\n const id = useId();\n const classes = cx(classname, rootClassName, `${rootClassName}--${variant}`);\n const containerRef = useRef<HTMLUListElement>(null);\n const [showFullDescriptions, setShowFullDescriptions] = useState(false);\n\n const handleToggleShowFullDescriptions = useCallback(() => {\n setShowFullDescriptions((prev) => !prev);\n }, []);\n\n const renderCards = () => {\n return (\n <li className={cx(`${rootClassName}__cards`)}>\n <div className={cx(`${rootClassName}__separator`)} />\n {items.map((item, index) => (\n <OptionCard\n {...item}\n showFullDescriptions={showFullDescriptions}\n toggleShowFullDescriptions={handleToggleShowFullDescriptions}\n key={index}\n isFirstCard={index === 0}\n ariaLabels={ariaLabels}\n cardIndex={index}\n id={`${index}-${id}`}\n />\n ))}\n </li>\n );\n };\n\n const renderFeatures = () => {\n return Object.entries(features).map(([title, description], i) => (\n <li key={i} className={cx(`${rootClassName}__feature-row`)}>\n <LeadCell title={title} description={description} />\n {items.map((item, index) => (\n <Cell key={index} value={item.features[title as keyof TFeatures] ?? false} />\n ))}\n </li>\n ));\n };\n\n const deltaTime = useRef(0);\n\n const handleScrollEnd = (e: UIEvent<HTMLUListElement>) => {\n /**\n * This function makes sure that the scroll position is never stuck between two cards, since scroll snap is not fully reliable.\n */\n\n const target = e.currentTarget;\n const cardwidth = target.querySelector(\"[data-card-id]\")?.clientWidth ?? 0;\n const cardPos = Math.round(target.scrollLeft / cardwidth);\n const scrollTarget = cardPos * cardwidth + cardPos;\n const timeDiff = e.timeStamp - deltaTime.current;\n const scrollDiff = Math.abs(target.scrollLeft - scrollTarget);\n\n if (deltaTime.current && timeDiff < 200) return;\n if (scrollDiff < 10) return;\n\n deltaTime.current = e.timeStamp;\n\n target.scrollTo({ left: scrollTarget, behavior: \"smooth\" });\n };\n\n return (\n <div className={cx(rootClassName + \"__wrapper\")}>\n <ul\n id={rootClassName + `-${id}`}\n ref={containerRef}\n className={classes}\n // eslint-disable-next-line react/no-unknown-property\n onScrollEnd={handleScrollEnd}\n style={{\n // @ts-expect-error | Typescript doesn't recognize the CSS variable, but it works as intended\n [\"--initial-columns\"]: items.length + 1,\n }}\n >\n <ScrollProgress items={items} container={containerRef} ariaLabels={ariaLabels} />\n {renderCards()}\n {renderFeatures()}\n </ul>\n </div>\n );\n};\n\nComparisonTable.displayName = \"ComparisonTable\";\n"],"names":["cx","c","styles","rootClassName","Cell","value","isReactNode","isValidElement","classes","Icon","IconCheckmark","IconMinus","jsx","LeadCell","title","description","isExpandable","jsxs","Paragraph","IconChevronDown","OptionCard","id","cardIndex","variablePriceText","price","isHighlighted","ariaLabels","badge","actions","isFirstCard","image","showFullDescriptions","toggleShowFullDescriptions","descriptionRef","useRef","descriptionContentRef","showFullDescriptionsRef","descriptionOverflows","setDescriptionOverflows","useState","useEffect","checkDescriptionOverflow","useCallback","descriptionContent","descriptionHeight","contentHeight","descriptionElement","resizeObserver","renderDescription","Button","Badge","Heading","ScrollProgress","items","container","inViewSet","setInViewSet","scrollToCard","index","reduceMotion","previousCard","targetIndex","nextCard","handleKeyDown","e","root","observer","entries","prev","next","entry","card","renderIndicators","indicators","viewCapacity","leftmostActiveIndex","head","trail","key","i","status","IconArrowLeft","IconArrowRight","ComparisonTable","classname","features","variant","useId","containerRef","setShowFullDescriptions","handleToggleShowFullDescriptions","renderCards","item","createElement","renderFeatures","deltaTime","handleScrollEnd","target","cardwidth","cardPos","scrollTarget","timeDiff","scrollDiff"],"mappings":"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"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./comparison-table-
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./comparison-table-0UDB2BTU.js");exports.ComparisonTable=e.ComparisonTable;
|
|
2
2
|
//# sourceMappingURL=comparison-table.cjs.js.map
|
|
@@ -68,7 +68,7 @@ export declare const Button: React.ForwardRefExoticComponent<(Omit<Omit<{
|
|
|
68
68
|
fullWidth?: boolean;
|
|
69
69
|
negative?: boolean;
|
|
70
70
|
size?: import('../../../libraries/action/src/action').Size;
|
|
71
|
-
variant: "text" |
|
|
71
|
+
variant: "text" | import('../../../libraries/action/src/action').Variant | "tertiary-purple";
|
|
72
72
|
} & {
|
|
73
73
|
iconOnly: boolean;
|
|
74
74
|
"aria-label": string;
|
|
@@ -0,0 +1,43 @@
|
|
|
1
|
+
import { default as React } from 'react';
|
|
2
|
+
import { sizes } from '../../../libraries/action/src/action';
|
|
3
|
+
import { ButtonProps } from './button';
|
|
4
|
+
export type ButtonVisualState = "default" | "hover" | "active" | "disabled" | "loading";
|
|
5
|
+
export type ButtonVisualSize = (typeof sizes)[number];
|
|
6
|
+
export type ButtonVisualAppearance = "regular" | "negative" | "ai" | "ai-negative";
|
|
7
|
+
export type ButtonVisualAppearanceGroup = "default-surface" | "negative-surface";
|
|
8
|
+
export type ButtonVisualLayout = LayoutMode;
|
|
9
|
+
export type ButtonVisualLayoutGroup = "text" | "icon-only";
|
|
10
|
+
type LayoutMode = "text" | "icon-only";
|
|
11
|
+
type VisualCell = {
|
|
12
|
+
id: string;
|
|
13
|
+
label: string;
|
|
14
|
+
state: ButtonVisualState;
|
|
15
|
+
props: ButtonProps;
|
|
16
|
+
surface: "default" | "negative";
|
|
17
|
+
};
|
|
18
|
+
type VisualSection = {
|
|
19
|
+
key: string;
|
|
20
|
+
title: string;
|
|
21
|
+
surface: "default" | "negative";
|
|
22
|
+
cells: VisualCell[];
|
|
23
|
+
};
|
|
24
|
+
type VisualGroup = {
|
|
25
|
+
key: ButtonVisualLayoutGroup;
|
|
26
|
+
title: string;
|
|
27
|
+
description: string;
|
|
28
|
+
sections: VisualSection[];
|
|
29
|
+
};
|
|
30
|
+
export declare const buttonVisualStates: ButtonVisualState[];
|
|
31
|
+
export declare const buttonVisualSizes: ("xs" | "sm" | "md" | "lg")[];
|
|
32
|
+
export declare const buttonVisualAppearanceGroups: ButtonVisualAppearanceGroup[];
|
|
33
|
+
export declare const buttonVisualAppearancesByGroup: Record<ButtonVisualAppearanceGroup, ButtonVisualAppearance[]>;
|
|
34
|
+
export declare const buttonVisualLayouts: LayoutMode[];
|
|
35
|
+
export declare const buttonVisualLayoutGroups: ButtonVisualLayoutGroup[];
|
|
36
|
+
export declare const createVisualGroups: (state: ButtonVisualState, size: ButtonVisualSize, appearanceGroup: ButtonVisualAppearanceGroup) => VisualGroup[];
|
|
37
|
+
export declare const ButtonVisualBoard: ({ state, size, appearanceGroup, }: {
|
|
38
|
+
state: ButtonVisualState;
|
|
39
|
+
size: ButtonVisualSize;
|
|
40
|
+
appearanceGroup: ButtonVisualAppearanceGroup;
|
|
41
|
+
}) => React.JSX.Element;
|
|
42
|
+
export {};
|
|
43
|
+
//# sourceMappingURL=button.visual.fixtures.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"button.visual.fixtures.d.ts","sourceRoot":"","sources":["../../../../../../components/button/src/button.visual.fixtures.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA6C,MAAM,OAAO,CAAC;AAClE,OAAO,EAAE,KAAK,EAAE,MAAM,gBAAgB,CAAC;AAGvC,OAAO,EAAU,KAAK,WAAW,EAAkB,MAAM,UAAU,CAAC;AAEpE,MAAM,MAAM,iBAAiB,GAAG,SAAS,GAAG,OAAO,GAAG,QAAQ,GAAG,UAAU,GAAG,SAAS,CAAC;AACxF,MAAM,MAAM,gBAAgB,GAAG,CAAC,OAAO,KAAK,CAAC,CAAC,MAAM,CAAC,CAAC;AACtD,MAAM,MAAM,sBAAsB,GAAG,SAAS,GAAG,UAAU,GAAG,IAAI,GAAG,aAAa,CAAC;AACnF,MAAM,MAAM,2BAA2B,GAAG,iBAAiB,GAAG,kBAAkB,CAAC;AACjF,MAAM,MAAM,kBAAkB,GAAG,UAAU,CAAC;AAC5C,MAAM,MAAM,uBAAuB,GAAG,MAAM,GAAG,WAAW,CAAC;AAE3D,KAAK,UAAU,GAAG,MAAM,GAAG,WAAW,CAAC;AAGvC,KAAK,UAAU,GAAG;IAChB,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,iBAAiB,CAAC;IACzB,KAAK,EAAE,WAAW,CAAC;IACnB,OAAO,EAAE,SAAS,GAAG,UAAU,CAAC;CACjC,CAAC;AAEF,KAAK,aAAa,GAAG;IACnB,GAAG,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,SAAS,GAAG,UAAU,CAAC;IAChC,KAAK,EAAE,UAAU,EAAE,CAAC;CACrB,CAAC;AAEF,KAAK,WAAW,GAAG;IACjB,GAAG,EAAE,uBAAuB,CAAC;IAC7B,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,EAAE,MAAM,CAAC;IACpB,QAAQ,EAAE,aAAa,EAAE,CAAC;CAC3B,CAAC;AAgRF,eAAO,MAAM,kBAAkB,EAAE,iBAAiB,EAMjD,CAAC;AAEF,eAAO,MAAM,iBAAiB,+BAAQ,CAAC;AAEvC,eAAO,MAAM,4BAA4B,+BAA6C,CAAC;AACvF,eAAO,MAAM,8BAA8B,EAEtC,MAAM,CAAC,2BAA2B,EAAE,sBAAsB,EAAE,CAAC,CAAC;AACnE,eAAO,MAAM,mBAAmB,cAA0C,CAAC;AAC3E,eAAO,MAAM,wBAAwB,2BAAyC,CAAC;AAE/E,eAAO,MAAM,kBAAkB,GAC7B,OAAO,iBAAiB,EACxB,MAAM,gBAAgB,EACtB,iBAAiB,2BAA2B,KAC3C,WAAW,EAeb,CAAC;AAEF,eAAO,MAAM,iBAAiB,GAAI,mCAI/B;IACD,KAAK,EAAE,iBAAiB,CAAC;IACzB,IAAI,EAAE,gBAAgB,CAAC;IACvB,eAAe,EAAE,2BAA2B,CAAC;CAC9C,sBAoIA,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"carousel.d.ts","sourceRoot":"","sources":["../../../../../../components/carousel/src/carousel.tsx"],"names":[],"mappings":"AAAA,OAAO,
|
|
1
|
+
{"version":3,"file":"carousel.d.ts","sourceRoot":"","sources":["../../../../../../components/carousel/src/carousel.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAgE,MAAM,OAAO,CAAC;AAOrF,OAAO,EAAE,KAAK,gBAAgB,EAAwB,MAAM,gBAAgB,CAAC;AAC7E,OAAiB,EAAE,KAAK,mBAAmB,EAAE,MAAM,yBAAyB,CAAC;AAc7E,KAAK,wBAAwB,GAAG,gBAAgB,GAAG;IAAE,YAAY,CAAC,EAAE,MAAM,CAAA;CAAE,CAAC;AAE7E,KAAK,kBAAkB,GACnB,CAAC,GACD,EAAE,GACF,EAAE,GACF,EAAE,GACF,GAAG,GACH,GAAG,GACH,GAAG,GACH,GAAG,GACH,GAAG,GACH,GAAG,GACH,GAAG,GACH,GAAG,GACH,IAAI,GACJ,IAAI,GACJ,IAAI,CAAC;AAET,MAAM,MAAM,aAAa,GAAG;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,OAAO,EAAE,wBAAwB,GAAG;QAClC,WAAW,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,wBAAwB,CAAC,CAAC,CAAC;KACjE,CAAC;IACF,QAAQ,CAAC,EAAE,OAAO,GAAG,mBAAmB,CAAC;IACzC,oDAAoD;IACpD,YAAY,CAAC,EAAE,kBAAkB,CAAC;IAClC,mBAAmB,CAAC,EAAE,KAAK,GAAG,QAAQ,GAAG,QAAQ,CAAC;IAElD,+EAA+E;IAC/E,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B;;;OAGG;IACH,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAE1B,UAAU,EAAE;QACV,UAAU,EAAE,MAAM,CAAC;QACnB,cAAc,EAAE,MAAM,CAAC;QACvB,QAAQ,EAAE;YACR,IAAI,EAAE,MAAM,CAAC;YACb,KAAK,EAAE,MAAM,CAAC;YACd,SAAS,EAAE,MAAM,CAAC;SACnB,CAAC;KACH,CAAC;CACH,CAAC;AAIF,eAAO,MAAM,QAAQ;sEAMlB,aAAa;;0BAkIqB;QAAE,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;KAAE;CAFjE,CAAC"}
|
|
@@ -5,6 +5,14 @@ import { DateRangeFieldProps } from '../../date-range-field/src/date-range-field
|
|
|
5
5
|
import { Drawer } from '../../drawer/src/drawer';
|
|
6
6
|
type CommonDatePickerProps = {
|
|
7
7
|
calendarProps?: CalendarProps;
|
|
8
|
+
/**
|
|
9
|
+
* Optional DOM element to portal the calendar / drawer content into. When
|
|
10
|
+
* omitted, the overlay renders inside the nearest `ThemeProvider` so it
|
|
11
|
+
* inherits the active color scheme. Pass `document.body` (or any other
|
|
12
|
+
* element) to override. Pass `null` to fall back to the default
|
|
13
|
+
* (`document.body`).
|
|
14
|
+
*/
|
|
15
|
+
container?: HTMLElement | null;
|
|
8
16
|
drawerContentProps: Omit<ComponentProps<typeof Drawer.Content>, "children" | "backButton" | "backButtonText" | "backButtonOnlyIcon" | "onBackButtonClick" | "zIndex">;
|
|
9
17
|
overlayZIndex?: number;
|
|
10
18
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"date-picker.d.ts","sourceRoot":"","sources":["../../../../../../components/date-picker/src/date-picker.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EACZ,KAAK,cAAc,EASpB,MAAM,OAAO,CAAC;AAYf,OAAO,EAAY,KAAK,aAAa,EAAkB,MAAM,kBAAkB,CAAC;AAChF,OAAO,EAAa,KAAK,cAAc,EAAE,MAAM,oBAAoB,CAAC;AACpE,OAAO,EAAkB,KAAK,mBAAmB,EAAE,MAAM,0BAA0B,CAAC;AACpF,OAAO,EAAE,MAAM,EAAE,MAAM,gBAAgB,CAAC;
|
|
1
|
+
{"version":3,"file":"date-picker.d.ts","sourceRoot":"","sources":["../../../../../../components/date-picker/src/date-picker.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EACZ,KAAK,cAAc,EASpB,MAAM,OAAO,CAAC;AAYf,OAAO,EAAY,KAAK,aAAa,EAAkB,MAAM,kBAAkB,CAAC;AAChF,OAAO,EAAa,KAAK,cAAc,EAAE,MAAM,oBAAoB,CAAC;AACpE,OAAO,EAAkB,KAAK,mBAAmB,EAAE,MAAM,0BAA0B,CAAC;AACpF,OAAO,EAAE,MAAM,EAAE,MAAM,gBAAgB,CAAC;AAMxC,OAAO,2BAA2B,CAAC;AACnC,OAAO,iCAAiC,CAAC;AACzC,OAAO,yBAAyB,CAAC;AACjC,OAAO,uBAAuB,CAAC;AAC/B,OAAO,qBAAqB,CAAC;AAK7B,KAAK,qBAAqB,GAAG;IAC3B,aAAa,CAAC,EAAE,aAAa,CAAC;IAC9B;;;;;;OAMG;IACH,SAAS,CAAC,EAAE,WAAW,GAAG,IAAI,CAAC;IAC/B,kBAAkB,EAAE,IAAI,CACtB,cAAc,CAAC,OAAO,MAAM,CAAC,OAAO,CAAC,EACnC,UAAU,GACV,YAAY,GACZ,gBAAgB,GAChB,oBAAoB,GACpB,mBAAmB,GACnB,QAAQ,CACX,CAAC;IACF,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB,CAAC;AAEF,KAAK,qBAAqB,GAAG,qBAAqB,GAChD,cAAc,GAAG;IACf,IAAI,CAAC,EAAE,QAAQ,CAAC;CACjB,CAAC;AAEJ,KAAK,oBAAoB,GAAG,qBAAqB,GAC/C,mBAAmB,GAAG;IACpB,IAAI,EAAE,OAAO,CAAC;CACf,CAAC;AAEJ,MAAM,MAAM,eAAe,GAAG,qBAAqB,GAAG,oBAAoB,CAAC;AAC3E,YAAY,EAAE,oBAAoB,EAAE,qBAAqB,EAAE,CAAC;AAE5D,eAAO,MAAM,UAAU,oIAQtB,CAAC"}
|
|
@@ -17,6 +17,13 @@ export type DrawerContentProps = Omit<BaseProps, "children"> & {
|
|
|
17
17
|
bodyText?: string;
|
|
18
18
|
children: ReactNode;
|
|
19
19
|
closeButtonAriaLabel: string;
|
|
20
|
+
/**
|
|
21
|
+
* Optional DOM element to portal the drawer content into. When omitted,
|
|
22
|
+
* the drawer renders inside the nearest `ThemeProvider` so it inherits
|
|
23
|
+
* the active color scheme. Pass `document.body` (or any other element) to
|
|
24
|
+
* override. Pass `null` to fall back to Radix' default (`document.body`).
|
|
25
|
+
*/
|
|
26
|
+
container?: HTMLElement | null;
|
|
20
27
|
disableCloseOnClickOutside?: boolean;
|
|
21
28
|
/**
|
|
22
29
|
* If true, the drawer height will fit to its content on small screens.
|
|
@@ -36,6 +43,13 @@ export declare const DrawerContent: React.ForwardRefExoticComponent<(Omit<Omit<R
|
|
|
36
43
|
bodyText?: string;
|
|
37
44
|
children: ReactNode;
|
|
38
45
|
closeButtonAriaLabel: string;
|
|
46
|
+
/**
|
|
47
|
+
* Optional DOM element to portal the drawer content into. When omitted,
|
|
48
|
+
* the drawer renders inside the nearest `ThemeProvider` so it inherits
|
|
49
|
+
* the active color scheme. Pass `document.body` (or any other element) to
|
|
50
|
+
* override. Pass `null` to fall back to Radix' default (`document.body`).
|
|
51
|
+
*/
|
|
52
|
+
container?: HTMLElement | null;
|
|
39
53
|
disableCloseOnClickOutside?: boolean;
|
|
40
54
|
/**
|
|
41
55
|
* If true, the drawer height will fit to its content on small screens.
|
|
@@ -54,6 +68,13 @@ export declare const DrawerContent: React.ForwardRefExoticComponent<(Omit<Omit<R
|
|
|
54
68
|
bodyText?: string;
|
|
55
69
|
children: ReactNode;
|
|
56
70
|
closeButtonAriaLabel: string;
|
|
71
|
+
/**
|
|
72
|
+
* Optional DOM element to portal the drawer content into. When omitted,
|
|
73
|
+
* the drawer renders inside the nearest `ThemeProvider` so it inherits
|
|
74
|
+
* the active color scheme. Pass `document.body` (or any other element) to
|
|
75
|
+
* override. Pass `null` to fall back to Radix' default (`document.body`).
|
|
76
|
+
*/
|
|
77
|
+
container?: HTMLElement | null;
|
|
57
78
|
disableCloseOnClickOutside?: boolean;
|
|
58
79
|
/**
|
|
59
80
|
* If true, the drawer height will fit to its content on small screens.
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"drawer-content.d.ts","sourceRoot":"","sources":["../../../../../../components/drawer/src/drawer-content.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAc,KAAK,SAAS,EAAsB,MAAM,OAAO,CAAC;AAC9E,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,sBAAsB,CAAC;
|
|
1
|
+
{"version":3,"file":"drawer-content.d.ts","sourceRoot":"","sources":["../../../../../../components/drawer/src/drawer-content.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAc,KAAK,SAAS,EAAsB,MAAM,OAAO,CAAC;AAC9E,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,sBAAsB,CAAC;AAQtD,OAAO,EAAE,KAAK,QAAQ,EAAE,MAAM,SAAS,CAAC;AAKxC,MAAM,MAAM,cAAc,GAAG;IAC3B,UAAU,EAAE,OAAO,CAAC;IACpB,cAAc,EAAE,MAAM,CAAC;IACvB,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,iBAAiB,EAAE,MAAM,IAAI,CAAC;CAC/B,CAAC;AAEF,MAAM,MAAM,iBAAiB,GAAG;IAC9B,UAAU,CAAC,EAAE,KAAK,CAAC;IACnB,cAAc,CAAC,EAAE,KAAK,CAAC;IACvB,kBAAkB,CAAC,EAAE,KAAK,CAAC;IAC3B,iBAAiB,CAAC,EAAE,KAAK,CAAC;CAC3B,CAAC;AAEF,MAAM,MAAM,kBAAkB,GAAG,IAAI,CAAC,SAAS,EAAE,UAAU,CAAC,GAAG;IAC7D,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,EAAE,SAAS,CAAC;IACpB,oBAAoB,EAAE,MAAM,CAAC;IAC7B;;;;;OAKG;IACH,SAAS,CAAC,EAAE,WAAW,GAAG,IAAI,CAAC;IAC/B,0BAA0B,CAAC,EAAE,OAAO,CAAC;IACrC;;OAEG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,aAAa,CAAC,EAAE,SAAS,CAAC;IAC1B,aAAa,CAAC,EAAE,SAAS,CAAC;IAC1B,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;IAC1B,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,QAAQ,CAAC,EAAE,QAAQ,CAAC;CACrB,GAAG,CAAC,iBAAiB,GAAG,cAAc,CAAC,CAAC;AAIzC,eAAO,MAAM,aAAa;;;eA1Bb,MAAM;cACP,SAAS;0BACG,MAAM;IAC5B;;;;;OAKG;gBACS,WAAW,GAAG,IAAI;iCACD,OAAO;IACpC;;OAEG;mBACY,OAAO;oBACN,SAAS;oBACT,SAAS;mBACV,MAAM,IAAI;mBACV,OAAO;WACf,MAAM;aACJ,MAAM;eACJ,QAAQ;;;;eArBR,MAAM;cACP,SAAS;0BACG,MAAM;IAC5B;;;;;OAKG;gBACS,WAAW,GAAG,IAAI;iCACD,OAAO;IACpC;;OAEG;mBACY,OAAO;oBACN,SAAS;oBACT,SAAS;mBACV,MAAM,IAAI;mBACV,OAAO;WACf,MAAM;aACJ,MAAM;eACJ,QAAQ;qEA4KpB,CAAC"}
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
import { default as React } from 'react';
|
|
2
|
+
import { HeroBannerProps } from './hero-banner';
|
|
3
|
+
type HeroBannerVisualScenario = {
|
|
4
|
+
key: string;
|
|
5
|
+
title: string;
|
|
6
|
+
createProps: () => HeroBannerProps;
|
|
7
|
+
};
|
|
8
|
+
export declare const heroBannerVisualScenarios: HeroBannerVisualScenario[];
|
|
9
|
+
export declare const getHeroBannerVisualTestId: (scenarioKey: string) => string;
|
|
10
|
+
export declare const HeroBannerVisualScenarioRoot: ({ scenarioKey }: {
|
|
11
|
+
scenarioKey: string;
|
|
12
|
+
}) => React.JSX.Element;
|
|
13
|
+
export {};
|
|
14
|
+
//# sourceMappingURL=hero-banner.visual.fixtures.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"hero-banner.visual.fixtures.d.ts","sourceRoot":"","sources":["../../../../../../components/hero-banner/src/hero-banner.visual.fixtures.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAQ1B,OAAO,EAAc,KAAK,eAAe,EAAsB,MAAM,eAAe,CAAC;AAGrF,KAAK,wBAAwB,GAAG;IAC9B,GAAG,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,EAAE,MAAM,eAAe,CAAC;CACpC,CAAC;AAuEF,eAAO,MAAM,yBAAyB,EAAE,wBAAwB,EAkE/D,CAAC;AAEF,eAAO,MAAM,yBAAyB,GAAI,aAAa,MAAM,WACxB,CAAC;AAEtC,eAAO,MAAM,4BAA4B,GAAI,iBAAiB;IAAE,WAAW,EAAE,MAAM,CAAA;CAAE,sBAUpF,CAAC"}
|
|
@@ -38,6 +38,13 @@ export type DefaultProps = Omit<BaseProps, "children"> & {
|
|
|
38
38
|
* z-index of the modal
|
|
39
39
|
* */
|
|
40
40
|
zIndex?: number;
|
|
41
|
+
/**
|
|
42
|
+
* Optional DOM element to portal the modal content into. When omitted,
|
|
43
|
+
* the modal renders inside the nearest `ThemeProvider` so it inherits
|
|
44
|
+
* the active color scheme. Pass `document.body` (or any other element) to
|
|
45
|
+
* override. Pass `null` to fall back to Radix' default (`document.body`).
|
|
46
|
+
* */
|
|
47
|
+
container?: HTMLElement | null;
|
|
41
48
|
/**
|
|
42
49
|
* Event handler called when focus moves to the trigger after closing.
|
|
43
50
|
* */
|
|
@@ -104,6 +111,13 @@ export declare const ModalContent: React.ForwardRefExoticComponent<(Omit<Omit<Re
|
|
|
104
111
|
* z-index of the modal
|
|
105
112
|
* */
|
|
106
113
|
zIndex?: number;
|
|
114
|
+
/**
|
|
115
|
+
* Optional DOM element to portal the modal content into. When omitted,
|
|
116
|
+
* the modal renders inside the nearest `ThemeProvider` so it inherits
|
|
117
|
+
* the active color scheme. Pass `document.body` (or any other element) to
|
|
118
|
+
* override. Pass `null` to fall back to Radix' default (`document.body`).
|
|
119
|
+
* */
|
|
120
|
+
container?: HTMLElement | null;
|
|
107
121
|
/**
|
|
108
122
|
* Event handler called when focus moves to the trigger after closing.
|
|
109
123
|
* */
|
|
@@ -148,6 +162,13 @@ export declare const ModalContent: React.ForwardRefExoticComponent<(Omit<Omit<Re
|
|
|
148
162
|
* z-index of the modal
|
|
149
163
|
* */
|
|
150
164
|
zIndex?: number;
|
|
165
|
+
/**
|
|
166
|
+
* Optional DOM element to portal the modal content into. When omitted,
|
|
167
|
+
* the modal renders inside the nearest `ThemeProvider` so it inherits
|
|
168
|
+
* the active color scheme. Pass `document.body` (or any other element) to
|
|
169
|
+
* override. Pass `null` to fall back to Radix' default (`document.body`).
|
|
170
|
+
* */
|
|
171
|
+
container?: HTMLElement | null;
|
|
151
172
|
/**
|
|
152
173
|
* Event handler called when focus moves to the trigger after closing.
|
|
153
174
|
* */
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"modal-content.d.ts","sourceRoot":"","sources":["../../../../../../components/modal/src/modal-content.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAc,KAAK,SAAS,EAA4C,MAAM,OAAO,CAAC;AAEpG,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,sBAAsB,CAAC;
|
|
1
|
+
{"version":3,"file":"modal-content.d.ts","sourceRoot":"","sources":["../../../../../../components/modal/src/modal-content.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAc,KAAK,SAAS,EAA4C,MAAM,OAAO,CAAC;AAEpG,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,sBAAsB,CAAC;AAgBtD,OAAO,6BAA6B,CAAC;AAGrC,MAAM,MAAM,YAAY,GAAG,IAAI,CAAC,SAAS,EAAE,UAAU,CAAC,GAAG;IACvD;;SAEK;IACL,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,QAAQ,EAAE,SAAS,CAAC;IACpB;;SAEK;IACL,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;SAEK;IACL,0BAA0B,CAAC,EAAE,OAAO,CAAC;IACrC;;SAEK;IACL,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B;;SAEK;IACL,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB;;SAEK;IACL,YAAY,CAAC,EAAE,SAAS,CAAC;IACzB;;SAEK;IACL,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB;;SAEK;IACL,KAAK,EAAE,MAAM,CAAC;IACd;;SAEK;IACL,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB;;;;;SAKK;IACL,SAAS,CAAC,EAAE,WAAW,GAAG,IAAI,CAAC;IAC/B;;SAEK;IACL,gBAAgB,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,KAAK,IAAI,CAAC;CACvC,CAAC;AAEF,KAAK,kBAAkB,GAAG;IACxB;;SAEK;IACL,oBAAoB,CAAC,EAAE,KAAK,CAAC;IAC7B;;SAEK;IACL,eAAe,CAAC,EAAE,KAAK,CAAC;CACzB,CAAC;AAEF,KAAK,gBAAgB,GAAG;IACtB;;SAEK;IACL,oBAAoB,EAAE,MAAM,CAAC;IAC7B;;SAEK;IACL,eAAe,EAAE,IAAI,CAAC;CACvB,CAAC;AAEF,MAAM,MAAM,iBAAiB,GAAG,YAAY,GAAG,CAAC,gBAAgB,GAAG,kBAAkB,CAAC,CAAC;AASvF,eAAO,MAAM,YAAY;;;IAjFvB;;SAEK;cACK,SAAS;cACT,SAAS;IACnB;;SAEK;kBACS,MAAM;IACpB;;SAEK;iCACwB,OAAO;IACpC;;SAEK;sBACa,OAAO;IACzB;;SAEK;YACG,SAAS;IACjB;;SAEK;mBACU,SAAS;IACxB;;SAEK;oBACW,OAAO;IACvB;;SAEK;WACE,MAAM;IACb;;SAEK;aACI,MAAM;IACf;;;;;SAKK;gBACO,WAAW,GAAG,IAAI;IAC9B;;SAEK;uBACc,CAAC,CAAC,EAAE,KAAK,KAAK,IAAI;;;;IA/CrC;;SAEK;cACK,SAAS;cACT,SAAS;IACnB;;SAEK;kBACS,MAAM;IACpB;;SAEK;iCACwB,OAAO;IACpC;;SAEK;sBACa,OAAO;IACzB;;SAEK;YACG,SAAS;IACjB;;SAEK;mBACU,SAAS;IACxB;;SAEK;oBACW,OAAO;IACvB;;SAEK;WACE,MAAM;IACb;;SAEK;aACI,MAAM;IACf;;;;;SAKK;gBACO,WAAW,GAAG,IAAI;IAC9B;;SAEK;uBACc,CAAC,CAAC,EAAE,KAAK,KAAK,IAAI;oEAsNtC,CAAC;AA6BF,eAAO,MAAM,qBAAqB,IAAI,CAAC;AAEvC,eAAO,MAAM,YAAY,GAAI,4BAG1B,IAAI,CAAC,iBAAiB,EAAE,SAAS,GAAG,cAAc,CAAC,6BAsBrD,CAAC"}
|