@veeqo/ui 15.8.0 → 15.10.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/Alerts/Alert/Alert.cjs +1 -2
- package/dist/components/Alerts/Alert/Alert.cjs.map +1 -1
- package/dist/components/Alerts/Alert/Alert.js +1 -2
- package/dist/components/Alerts/Alert/Alert.js.map +1 -1
- package/dist/components/Alerts/Alert/types.d.ts +5 -2
- package/dist/components/DataGrid/components/Body/BodyCell/BodyCell.cjs +1 -1
- package/dist/components/DataGrid/components/Body/BodyCell/BodyCell.js +1 -1
- package/dist/components/DataGrid/components/Body/LoadingBody/LoadingBodyCell.cjs +1 -1
- package/dist/components/DataGrid/components/Body/LoadingBody/LoadingBodyCell.js +1 -1
- package/dist/components/DataGrid/components/GridContainer/GridContainer.cjs +1 -1
- package/dist/components/DataGrid/components/GridContainer/GridContainer.js +1 -1
- package/dist/components/DataGrid/components/Header/HeaderCell/HeaderCell.cjs +1 -1
- package/dist/components/DataGrid/components/Header/HeaderCell/HeaderCell.js +1 -1
- package/dist/components/Modal/Modal.cjs +11 -11
- package/dist/components/Modal/Modal.cjs.map +1 -1
- package/dist/components/Modal/Modal.js +11 -11
- package/dist/components/Modal/Modal.js.map +1 -1
- package/dist/components/Modal/Modal.module.scss.cjs +2 -2
- package/dist/components/Modal/Modal.module.scss.cjs.map +1 -1
- package/dist/components/Modal/Modal.module.scss.js +2 -2
- package/dist/components/Modal/Modal.module.scss.js.map +1 -1
- package/dist/components/Modal/components/Dialog/Dialog.cjs +2 -2
- package/dist/components/Modal/components/Dialog/Dialog.cjs.map +1 -1
- package/dist/components/Modal/components/Dialog/Dialog.d.ts +2 -2
- package/dist/components/Modal/components/Dialog/Dialog.js +2 -2
- package/dist/components/Modal/components/Dialog/Dialog.js.map +1 -1
- package/dist/components/Modal/types.cjs.map +1 -1
- package/dist/components/Modal/types.d.ts +56 -7
- package/dist/components/Modal/types.js.map +1 -1
- package/dist/components/Tooltip/Tooltip.cjs +14 -6
- package/dist/components/Tooltip/Tooltip.cjs.map +1 -1
- package/dist/components/Tooltip/Tooltip.d.ts +2 -2
- package/dist/components/Tooltip/Tooltip.js +14 -6
- package/dist/components/Tooltip/Tooltip.js.map +1 -1
- package/dist/components/Tooltip/Tooltip.module.scss.cjs +2 -2
- package/dist/components/Tooltip/Tooltip.module.scss.cjs.map +1 -1
- package/dist/components/Tooltip/Tooltip.module.scss.js +2 -2
- package/dist/components/Tooltip/Tooltip.module.scss.js.map +1 -1
- package/dist/components/Tooltip/components/TooltipPopover.cjs +5 -5
- package/dist/components/Tooltip/components/TooltipPopover.cjs.map +1 -1
- package/dist/components/Tooltip/components/TooltipPopover.js +5 -5
- package/dist/components/Tooltip/components/TooltipPopover.js.map +1 -1
- package/dist/components/Tooltip/types.cjs.map +1 -1
- package/dist/components/Tooltip/types.d.ts +1 -6
- package/dist/components/Tooltip/types.js.map +1 -1
- package/dist/components/index.d.ts +1 -1
- package/package.json +1 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Modal.module.scss.js","sources":["../../../src/components/Modal/Modal.module.scss"],"sourcesContent":["/* Scroll-lock: prevents body scrolling when modal is open.\n The class persists through AnimatePresence exit animations because\n it's managed by the ScrollLock component mounted inside AnimatePresence. */\n:global(body.veeqo-modal-open) {\n overflow: hidden;\n scrollbar-gutter: stable;\n}\n\n@keyframes fadeIn {\n from {\n opacity: 0;\n }\n to {\n opacity: 1;\n }\n}\n\n.dialog {\n padding: 0;\n border: none;\n border-radius: var(--sizes-sm);\n box-shadow: var(--shadows-lg);\n z-index: var(--layers-modal);\n\n &::backdrop {\n animation: fadeIn 0.25s ease forwards;\n background-color: rgba(55, 66, 77, 0.5);\n width: 100%;\n height: 100%;\n }\n\n /* Targets Card.Surface: the sole direct child of dialog.\n Wave 3 (Card migration) can update to CSS Module class reference. */\n & > :first-child {\n display: flex;\n flex-direction: column;\n }\n\n & > :first-child .mainSection {\n padding-bottom: var(--sizes-md);\n }\n\n /* Targets Card.Footer */\n & > :first-child footer {\n margin-top: 0;\n }\n}\n\n.secondaryAppearance {\n &::backdrop {\n animation: none;\n opacity: 0;\n }\n}\n\n/* ---------- MainSection ---------- */\n\n.mainSection {\n flex: 1;\n overflow-y: auto;\n}\n\n.mainSection:not(.fullBleed) {\n padding: 0 var(--sizes-md);\n}\n\n/* Scrollable shadow on Card.Footer when content overflows */\n.mainSection.scrollable + footer {\n box-shadow: 0px 10px 15px 0px var(--colors-neutral-ink-dark);\n}\n\n/* ---------- Modal display mode ---------- */\n\n.modal {\n min-width: 464px;\n\n /* Critical for framer-motion exit animations: prevents HTML dialog from\n hiding via UA stylesheet when 'open' attribute is removed. */\n &:not([open]) {\n display: block;\n position: fixed;\n inset: 0;\n transform: translate(-50%, -50%);\n }\n}\n\n/* ---------- Side drawer shared base ---------- */\n\n.leftDrawer,\n.rightDrawer {\n height: 100%;\n max-height: 100%;\n min-width: 320px;\n width: 400px;\n margin: 0;\n position: fixed;\n transform: none;\n border-radius: 0;\n overflow: visible;\n\n & > :first-child {\n border-radius: 0;\n height: 100%;\n }\n\n /* Critical for framer-motion exit animations */\n &:not([open]) {\n display: block;\n }\n}\n\n.leftDrawer {\n inset: 0 auto 0 0;\n}\n\n.rightDrawer {\n inset: 0 0 0 auto;\n}\n\n/* ----------
|
|
1
|
+
{"version":3,"file":"Modal.module.scss.js","sources":["../../../src/components/Modal/Modal.module.scss"],"sourcesContent":["/* Scroll-lock: prevents body scrolling when modal is open.\n The class persists through AnimatePresence exit animations because\n it's managed by the ScrollLock component mounted inside AnimatePresence. */\n:global(body.veeqo-modal-open) {\n overflow: hidden;\n scrollbar-gutter: stable;\n}\n\n@keyframes fadeIn {\n from {\n opacity: 0;\n }\n to {\n opacity: 1;\n }\n}\n\n.dialog {\n padding: 0;\n border: none;\n border-radius: var(--sizes-sm);\n box-shadow: var(--shadows-lg);\n z-index: var(--layers-modal);\n\n &::backdrop {\n animation: fadeIn 0.25s ease forwards;\n background-color: rgba(55, 66, 77, 0.5);\n width: 100%;\n height: 100%;\n }\n\n /* Targets Card.Surface: the sole direct child of dialog.\n Wave 3 (Card migration) can update to CSS Module class reference. */\n & > :first-child {\n display: flex;\n flex-direction: column;\n }\n\n & > :first-child .mainSection {\n padding-bottom: var(--sizes-md);\n }\n\n /* Targets Card.Footer */\n & > :first-child footer {\n margin-top: 0;\n }\n}\n\n.secondaryAppearance {\n &::backdrop {\n animation: none;\n opacity: 0;\n }\n}\n\n/* ---------- MainSection ---------- */\n\n.mainSection {\n flex: 1;\n overflow-y: auto;\n}\n\n.mainSection:not(.fullBleed) {\n padding: 0 var(--sizes-md);\n}\n\n/* Scrollable shadow on Card.Footer when content overflows */\n.mainSection.scrollable + footer {\n box-shadow: 0px 10px 15px 0px var(--colors-neutral-ink-dark);\n}\n\n/* ---------- Modal display mode ---------- */\n\n.modal {\n min-width: 464px;\n \n & > :first-child {\n border: none;\n }\n\n /* Critical for framer-motion exit animations: prevents HTML dialog from\n hiding via UA stylesheet when 'open' attribute is removed. */\n &:not([open]) {\n display: block;\n position: fixed;\n inset: 0;\n transform: translate(-50%, -50%);\n }\n}\n\n/* ---------- Side drawer shared base ---------- */\n\n.leftDrawer,\n.rightDrawer {\n height: 100%;\n max-height: 100%;\n min-width: 320px;\n width: 400px;\n margin: 0;\n position: fixed;\n transform: none;\n border-radius: 0;\n overflow: visible;\n\n & > :first-child {\n border-radius: 0;\n height: 100%;\n }\n\n /* Critical for framer-motion exit animations */\n &:not([open]) {\n display: block;\n }\n}\n\n.leftDrawer {\n inset: 0 auto 0 0;\n}\n\n.rightDrawer {\n inset: 0 0 0 auto;\n}\n\n/* ---------- Size-specific responsive widths ---------- */\n/* Values hardcoded from constants.ts (heightMap, widthMap, fullScreenBreakpointMap) */\n\n.xs-size {\n & > :first-child {\n max-height: 84vh;\n }\n\n /* fullScreenBreakpointMap['xs'] = 640px (breakpoints.mobile) */\n @media (width <= 640px) {\n margin: 0;\n width: 100%;\n max-width: 100vw;\n max-height: 100vh;\n\n &,\n & > :first-child {\n border-radius: 0;\n height: 100%;\n width: 100%;\n max-height: unset;\n }\n }\n\n @media (width >= 641px) and (width <= 720px) {\n max-width: 60vw;\n }\n\n @media (width >= 720px) and (width <= 960px) {\n max-width: 48vw;\n }\n\n @media (width >= 960px) and (width <= 1280px) {\n max-width: 36vw;\n }\n\n @media (width >= 1280px) {\n max-width: 32vw;\n }\n}\n\n.sm-size {\n & > :first-child {\n max-height: 72vh;\n }\n\n /* fullScreenBreakpointMap['sm'] = 640px (breakpoints.mobile) */\n @media (width <= 640px) {\n margin: 0;\n width: 100%;\n max-width: 100vw;\n max-height: 100vh;\n\n &,\n & > :first-child {\n border-radius: 0;\n height: 100%;\n width: 100%;\n max-height: unset;\n }\n }\n\n @media (width >= 641px) and (width <= 720px) {\n max-width: 72vw;\n }\n\n @media (width >= 720px) and (width <= 960px) {\n max-width: 56vw;\n }\n\n @media (width >= 960px) and (width <= 1280px) {\n max-width: 44vw;\n }\n\n @media (width >= 1280px) {\n max-width: 40vw;\n }\n}\n\n.base-size {\n & > :first-child {\n max-height: 84vh;\n }\n\n /* fullScreenBreakpointMap['base'] = 720px (breakpoints.tablet) */\n @media (width <= 720px) {\n margin: 0;\n width: 100%;\n max-width: 100vw;\n max-height: 100vh;\n\n &,\n & > :first-child {\n border-radius: 0;\n height: 100%;\n width: 100%;\n max-height: unset;\n }\n }\n\n @media (width >= 720px) and (width <= 960px) {\n max-width: 88vw;\n }\n\n @media (width >= 960px) and (width <= 1280px) {\n max-width: 72vw;\n }\n\n @media (width >= 1280px) {\n max-width: 52vw;\n }\n}\n\n.lg-size {\n & > :first-child {\n max-height: 96vh;\n }\n\n /* fullScreenBreakpointMap['lg'] = 960px (breakpoints.lgTablet) */\n @media (width <= 960px) {\n margin: 0;\n width: 100%;\n max-width: 100vw;\n max-height: 100vh;\n\n &,\n & > :first-child {\n border-radius: 0;\n height: 100%;\n width: 100%;\n max-height: unset;\n }\n }\n\n @media (width >= 960px) and (width <= 1280px) {\n max-width: 88vw;\n }\n\n @media (width >= 1280px) {\n max-width: 80vw;\n }\n}\n"],"names":["___$insertStyle"],"mappings":";;AAAAA,WAAA,CAAA,6vLAAA;AAAA,kBAAA,CAAA,QAAA,CAAA,kBAAA,CAAA,QAAA,CAAA,iBAAA,CAAA,aAAA,CAAA,uBAAA,CAAA,qBAAA,CAAA,+BAAA,CAAA,WAAA,CAAA,qBAAA,CAAA,YAAA,CAAA,sBAAA,CAAA,OAAA,CAAA,iBAAA,CAAA,YAAA,CAAA,sBAAA,CAAA,aAAA,CAAA,uBAAA,CAAA,SAAA,CAAA,oBAAA,CAAA,SAAA,CAAA,oBAAA,CAAA,WAAA,CAAA,sBAAA,CAAA,SAAA,CAAA,oBAAA;;;;"}
|
|
@@ -28,7 +28,7 @@ const animations = {
|
|
|
28
28
|
animate: { opacity: 1, y: 0, bounce: 0 },
|
|
29
29
|
},
|
|
30
30
|
};
|
|
31
|
-
const Dialog = React__default.default.forwardRef(({
|
|
31
|
+
const Dialog = React__default.default.forwardRef(({ size, displayMode, appearance, className, children, onClose, ...rest }, ref) => {
|
|
32
32
|
// framer-motion's type definitions for motion.dialog omit the standard
|
|
33
33
|
// HTML dialog onClose handler. Cast through a focused type to pass it
|
|
34
34
|
// safely to the underlying DOM element.
|
|
@@ -36,7 +36,7 @@ const Dialog = React__default.default.forwardRef(({ variant, displayMode, appear
|
|
|
36
36
|
return (React__default.default.createElement(framerMotion.motion.dialog, { ref: ref, className: buildClassnames.buildClassnames([
|
|
37
37
|
Modal_module.dialog,
|
|
38
38
|
Modal_module[displayMode],
|
|
39
|
-
Modal_module[`${
|
|
39
|
+
Modal_module[`${size}-size`],
|
|
40
40
|
appearance === 'secondary' && Modal_module.secondaryAppearance,
|
|
41
41
|
className,
|
|
42
42
|
]), initial: animations[displayMode].initial, animate: animations[displayMode].animate, exit: animations[displayMode].exit, transition: { type: 'tween', duration: 0.25 }, ...closeHandler, ...rest }, children));
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Dialog.cjs","sources":["../../../../../src/components/Modal/components/Dialog/Dialog.tsx"],"sourcesContent":["import React from 'react';\nimport { motion } from 'framer-motion';\nimport { ModalAppearance,
|
|
1
|
+
{"version":3,"file":"Dialog.cjs","sources":["../../../../../src/components/Modal/components/Dialog/Dialog.tsx"],"sourcesContent":["import React from 'react';\nimport { motion } from 'framer-motion';\nimport { ModalAppearance, ModalSizes, ModalTypes } from '../../types';\nimport { buildClassnames } from '../../../../utils';\nimport modalStyles from '../../Modal.module.scss';\n\n// Animation configurations\nconst animations = {\n leftDrawer: {\n initial: { opacity: 0, x: -300, bounce: 0 },\n exit: { opacity: 0, x: -300, bounce: 0 },\n animate: { opacity: 1, x: 0, bounce: 0 },\n },\n rightDrawer: {\n initial: { opacity: 0, x: 300, bounce: 0 },\n exit: { opacity: 0, x: 300, bounce: 0 },\n animate: { opacity: 1, x: 0, bounce: 0 },\n },\n modal: {\n initial: { opacity: 0, y: -50, bounce: 0 },\n exit: { opacity: 0, y: -50, bounce: 0 },\n animate: { opacity: 1, y: 0, bounce: 0 },\n },\n};\n\ntype DialogProps = {\n size: ModalSizes;\n displayMode: ModalTypes;\n appearance?: ModalAppearance;\n className?: string;\n children?: React.ReactNode;\n onClose?: () => void;\n onKeyDown?: React.KeyboardEventHandler<HTMLDialogElement>;\n onClick?: React.MouseEventHandler<HTMLDialogElement>;\n style?: React.CSSProperties;\n [key: `data-${string}`]: string | undefined;\n [key: `aria-${string}`]: string | undefined;\n};\n\nexport const Dialog = React.forwardRef<HTMLDialogElement, DialogProps>(\n ({ size, displayMode, appearance, className, children, onClose, ...rest }, ref) => {\n // framer-motion's type definitions for motion.dialog omit the standard\n // HTML dialog onClose handler. Cast through a focused type to pass it\n // safely to the underlying DOM element.\n const closeHandler = { onClose } as Pick<\n React.DialogHTMLAttributes<HTMLDialogElement>,\n 'onClose'\n >;\n\n return (\n <motion.dialog\n ref={ref}\n className={buildClassnames([\n modalStyles.dialog,\n modalStyles[displayMode],\n modalStyles[`${size}-size`],\n appearance === 'secondary' && modalStyles.secondaryAppearance,\n className,\n ])}\n initial={animations[displayMode].initial}\n animate={animations[displayMode].animate}\n exit={animations[displayMode].exit}\n transition={{ type: 'tween', duration: 0.25 }}\n {...closeHandler}\n {...rest}\n >\n {children}\n </motion.dialog>\n );\n },\n);\n"],"names":["React","motion","buildClassnames","modalStyles"],"mappings":";;;;;;;;;;;;AAMA;AACA,MAAM,UAAU,GAAG;AACjB,IAAA,UAAU,EAAE;AACV,QAAA,OAAO,EAAE,EAAE,OAAO,EAAE,CAAC,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC,EAAE;AAC3C,QAAA,IAAI,EAAE,EAAE,OAAO,EAAE,CAAC,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC,EAAE;AACxC,QAAA,OAAO,EAAE,EAAE,OAAO,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE;AACzC,KAAA;AACD,IAAA,WAAW,EAAE;AACX,QAAA,OAAO,EAAE,EAAE,OAAO,EAAE,CAAC,EAAE,CAAC,EAAE,GAAG,EAAE,MAAM,EAAE,CAAC,EAAE;AAC1C,QAAA,IAAI,EAAE,EAAE,OAAO,EAAE,CAAC,EAAE,CAAC,EAAE,GAAG,EAAE,MAAM,EAAE,CAAC,EAAE;AACvC,QAAA,OAAO,EAAE,EAAE,OAAO,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE;AACzC,KAAA;AACD,IAAA,KAAK,EAAE;AACL,QAAA,OAAO,EAAE,EAAE,OAAO,EAAE,CAAC,EAAE,CAAC,EAAE,GAAG,EAAE,MAAM,EAAE,CAAC,EAAE;AAC1C,QAAA,IAAI,EAAE,EAAE,OAAO,EAAE,CAAC,EAAE,CAAC,EAAE,GAAG,EAAE,MAAM,EAAE,CAAC,EAAE;AACvC,QAAA,OAAO,EAAE,EAAE,OAAO,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE;AACzC,KAAA;CACF;AAgBM,MAAM,MAAM,GAAGA,sBAAK,CAAC,UAAU,CACpC,CAAC,EAAE,IAAI,EAAE,WAAW,EAAE,UAAU,EAAE,SAAS,EAAE,QAAQ,EAAE,OAAO,EAAE,GAAG,IAAI,EAAE,EAAE,GAAG,KAAI;;;;AAIhF,IAAA,MAAM,YAAY,GAAG,EAAE,OAAO,EAG7B;AAED,IAAA,QACEA,sBAAA,CAAA,aAAA,CAACC,mBAAM,CAAC,MAAM,EAAA,EACZ,GAAG,EAAE,GAAG,EACR,SAAS,EAAEC,+BAAe,CAAC;AACzB,YAAAC,YAAW,CAAC,MAAM;YAClBA,YAAW,CAAC,WAAW,CAAC;AACxB,YAAAA,YAAW,CAAC,CAAA,EAAG,IAAI,CAAA,KAAA,CAAO,CAAC;AAC3B,YAAA,UAAU,KAAK,WAAW,IAAIA,YAAW,CAAC,mBAAmB;YAC7D,SAAS;SACV,CAAC,EACF,OAAO,EAAE,UAAU,CAAC,WAAW,CAAC,CAAC,OAAO,EACxC,OAAO,EAAE,UAAU,CAAC,WAAW,CAAC,CAAC,OAAO,EACxC,IAAI,EAAE,UAAU,CAAC,WAAW,CAAC,CAAC,IAAI,EAClC,UAAU,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE,QAAQ,EAAE,IAAI,EAAE,KACzC,YAAY,EAAA,GACZ,IAAI,EAAA,EAEP,QAAQ,CACK;AAEpB,CAAC;;;;"}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
-
import { ModalAppearance,
|
|
2
|
+
import { ModalAppearance, ModalSizes, ModalTypes } from '../../types';
|
|
3
3
|
type DialogProps = {
|
|
4
|
-
|
|
4
|
+
size: ModalSizes;
|
|
5
5
|
displayMode: ModalTypes;
|
|
6
6
|
appearance?: ModalAppearance;
|
|
7
7
|
className?: string;
|
|
@@ -22,7 +22,7 @@ const animations = {
|
|
|
22
22
|
animate: { opacity: 1, y: 0, bounce: 0 },
|
|
23
23
|
},
|
|
24
24
|
};
|
|
25
|
-
const Dialog = React__default.forwardRef(({
|
|
25
|
+
const Dialog = React__default.forwardRef(({ size, displayMode, appearance, className, children, onClose, ...rest }, ref) => {
|
|
26
26
|
// framer-motion's type definitions for motion.dialog omit the standard
|
|
27
27
|
// HTML dialog onClose handler. Cast through a focused type to pass it
|
|
28
28
|
// safely to the underlying DOM element.
|
|
@@ -30,7 +30,7 @@ const Dialog = React__default.forwardRef(({ variant, displayMode, appearance, cl
|
|
|
30
30
|
return (React__default.createElement(motion.dialog, { ref: ref, className: buildClassnames([
|
|
31
31
|
modalStyles.dialog,
|
|
32
32
|
modalStyles[displayMode],
|
|
33
|
-
modalStyles[`${
|
|
33
|
+
modalStyles[`${size}-size`],
|
|
34
34
|
appearance === 'secondary' && modalStyles.secondaryAppearance,
|
|
35
35
|
className,
|
|
36
36
|
]), initial: animations[displayMode].initial, animate: animations[displayMode].animate, exit: animations[displayMode].exit, transition: { type: 'tween', duration: 0.25 }, ...closeHandler, ...rest }, children));
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Dialog.js","sources":["../../../../../src/components/Modal/components/Dialog/Dialog.tsx"],"sourcesContent":["import React from 'react';\nimport { motion } from 'framer-motion';\nimport { ModalAppearance,
|
|
1
|
+
{"version":3,"file":"Dialog.js","sources":["../../../../../src/components/Modal/components/Dialog/Dialog.tsx"],"sourcesContent":["import React from 'react';\nimport { motion } from 'framer-motion';\nimport { ModalAppearance, ModalSizes, ModalTypes } from '../../types';\nimport { buildClassnames } from '../../../../utils';\nimport modalStyles from '../../Modal.module.scss';\n\n// Animation configurations\nconst animations = {\n leftDrawer: {\n initial: { opacity: 0, x: -300, bounce: 0 },\n exit: { opacity: 0, x: -300, bounce: 0 },\n animate: { opacity: 1, x: 0, bounce: 0 },\n },\n rightDrawer: {\n initial: { opacity: 0, x: 300, bounce: 0 },\n exit: { opacity: 0, x: 300, bounce: 0 },\n animate: { opacity: 1, x: 0, bounce: 0 },\n },\n modal: {\n initial: { opacity: 0, y: -50, bounce: 0 },\n exit: { opacity: 0, y: -50, bounce: 0 },\n animate: { opacity: 1, y: 0, bounce: 0 },\n },\n};\n\ntype DialogProps = {\n size: ModalSizes;\n displayMode: ModalTypes;\n appearance?: ModalAppearance;\n className?: string;\n children?: React.ReactNode;\n onClose?: () => void;\n onKeyDown?: React.KeyboardEventHandler<HTMLDialogElement>;\n onClick?: React.MouseEventHandler<HTMLDialogElement>;\n style?: React.CSSProperties;\n [key: `data-${string}`]: string | undefined;\n [key: `aria-${string}`]: string | undefined;\n};\n\nexport const Dialog = React.forwardRef<HTMLDialogElement, DialogProps>(\n ({ size, displayMode, appearance, className, children, onClose, ...rest }, ref) => {\n // framer-motion's type definitions for motion.dialog omit the standard\n // HTML dialog onClose handler. Cast through a focused type to pass it\n // safely to the underlying DOM element.\n const closeHandler = { onClose } as Pick<\n React.DialogHTMLAttributes<HTMLDialogElement>,\n 'onClose'\n >;\n\n return (\n <motion.dialog\n ref={ref}\n className={buildClassnames([\n modalStyles.dialog,\n modalStyles[displayMode],\n modalStyles[`${size}-size`],\n appearance === 'secondary' && modalStyles.secondaryAppearance,\n className,\n ])}\n initial={animations[displayMode].initial}\n animate={animations[displayMode].animate}\n exit={animations[displayMode].exit}\n transition={{ type: 'tween', duration: 0.25 }}\n {...closeHandler}\n {...rest}\n >\n {children}\n </motion.dialog>\n );\n },\n);\n"],"names":["React"],"mappings":";;;;;;AAMA;AACA,MAAM,UAAU,GAAG;AACjB,IAAA,UAAU,EAAE;AACV,QAAA,OAAO,EAAE,EAAE,OAAO,EAAE,CAAC,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC,EAAE;AAC3C,QAAA,IAAI,EAAE,EAAE,OAAO,EAAE,CAAC,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC,EAAE;AACxC,QAAA,OAAO,EAAE,EAAE,OAAO,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE;AACzC,KAAA;AACD,IAAA,WAAW,EAAE;AACX,QAAA,OAAO,EAAE,EAAE,OAAO,EAAE,CAAC,EAAE,CAAC,EAAE,GAAG,EAAE,MAAM,EAAE,CAAC,EAAE;AAC1C,QAAA,IAAI,EAAE,EAAE,OAAO,EAAE,CAAC,EAAE,CAAC,EAAE,GAAG,EAAE,MAAM,EAAE,CAAC,EAAE;AACvC,QAAA,OAAO,EAAE,EAAE,OAAO,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE;AACzC,KAAA;AACD,IAAA,KAAK,EAAE;AACL,QAAA,OAAO,EAAE,EAAE,OAAO,EAAE,CAAC,EAAE,CAAC,EAAE,GAAG,EAAE,MAAM,EAAE,CAAC,EAAE;AAC1C,QAAA,IAAI,EAAE,EAAE,OAAO,EAAE,CAAC,EAAE,CAAC,EAAE,GAAG,EAAE,MAAM,EAAE,CAAC,EAAE;AACvC,QAAA,OAAO,EAAE,EAAE,OAAO,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE;AACzC,KAAA;CACF;AAgBM,MAAM,MAAM,GAAGA,cAAK,CAAC,UAAU,CACpC,CAAC,EAAE,IAAI,EAAE,WAAW,EAAE,UAAU,EAAE,SAAS,EAAE,QAAQ,EAAE,OAAO,EAAE,GAAG,IAAI,EAAE,EAAE,GAAG,KAAI;;;;AAIhF,IAAA,MAAM,YAAY,GAAG,EAAE,OAAO,EAG7B;AAED,IAAA,QACEA,cAAA,CAAA,aAAA,CAAC,MAAM,CAAC,MAAM,EAAA,EACZ,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,eAAe,CAAC;AACzB,YAAA,WAAW,CAAC,MAAM;YAClB,WAAW,CAAC,WAAW,CAAC;AACxB,YAAA,WAAW,CAAC,CAAA,EAAG,IAAI,CAAA,KAAA,CAAO,CAAC;AAC3B,YAAA,UAAU,KAAK,WAAW,IAAI,WAAW,CAAC,mBAAmB;YAC7D,SAAS;SACV,CAAC,EACF,OAAO,EAAE,UAAU,CAAC,WAAW,CAAC,CAAC,OAAO,EACxC,OAAO,EAAE,UAAU,CAAC,WAAW,CAAC,CAAC,OAAO,EACxC,IAAI,EAAE,UAAU,CAAC,WAAW,CAAC,CAAC,IAAI,EAClC,UAAU,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE,QAAQ,EAAE,IAAI,EAAE,KACzC,YAAY,EAAA,GACZ,IAAI,EAAA,EAEP,QAAQ,CACK;AAEpB,CAAC;;;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"types.cjs","sources":["../../../src/components/Modal/types.ts"],"sourcesContent":["import { CSSProperties, HTMLAttributes } from 'react';\nimport {
|
|
1
|
+
{"version":3,"file":"types.cjs","sources":["../../../src/components/Modal/types.ts"],"sourcesContent":["import { CSSProperties, HTMLAttributes } from 'react';\nimport { ActionProps } from '../Action/types';\n\nexport type ModalSizes = 'xs' | 'sm' | 'base' | 'lg';\nexport type ModalTypes = 'modal' | 'leftDrawer' | 'rightDrawer';\nexport type ModalAppearance = 'primary' | 'secondary';\n\n// Base Modal props shared by all sizes.\ntype BaseModalProps = {\n /** Whether the modal is visible. */\n shouldShow: boolean;\n /** Show the close button in the header. */\n showHeaderCloseButton?: boolean;\n /** Prevent the modal from closing via backdrop click or ESC. */\n preventClose?: boolean;\n /** Remove internal padding from content area. */\n fullBleed?: boolean;\n /** Size of the modal. */\n size?: ModalSizes;\n /** Display type — standard modal or side drawer. */\n displayMode?: ModalTypes;\n /** Custom inline styles applied to the dialog element. */\n style?: CSSProperties;\n /** Handler called when close is triggered. Return `false` to cancel. */\n onClose: () => void | boolean;\n /** Modal body content. */\n children?: React.ReactNode;\n /** Additional CSS class applied to the dialog element. */\n className?: string;\n} & Omit<HTMLAttributes<HTMLDialogElement>, 'onClose'>;\n\n// Optional slot types.\n\ntype WithHeaderSlot = {\n /** Custom ReactNode replacing the default header. */\n headerSlot: React.ReactNode;\n};\n\ntype WithFooterSlot = {\n /** Custom ReactNode replacing the default footer. */\n footerSlot: React.ReactNode;\n};\n\ntype SideDrawType = {\n /** Display mode set to a side drawer direction. */\n displayMode: 'leftDrawer' | 'rightDrawer';\n /** Appearance style (applies to side drawers). */\n appearance?: ModalAppearance;\n};\n\n// Default header and footer options.\n\ntype DefaultHeaderOptions = {\n /** Title text shown in the default header. */\n headerTitle: string;\n /** Subtitle text shown below the header title. */\n headerSubtitle?: string;\n};\n\ntype ModalType = {\n /** Display mode set to standard centered modal. */\n displayMode?: 'modal';\n};\n\nexport type Action = { label: string } & ActionProps<'button'>;\ntype DefaultFooterOptions = {\n /** Action buttons on the left side of the footer. */\n leftActions?: Action[];\n /** Action buttons on the right side of the footer. */\n rightActions?: Action[];\n};\n\n// Either we have a header slot or default header options, same for footer.\ntype HeaderOptions = WithHeaderSlot | DefaultHeaderOptions;\ntype FooterOptions = WithFooterSlot | DefaultFooterOptions;\ntype TypeProps = ModalType | SideDrawType;\n\n// Modal props are shared props + the header and footer options (potentially with slots.)\nexport type ModalProps = BaseModalProps & HeaderOptions & FooterOptions & TypeProps;\n\n/**\n * Type guard to check if a header slot has been passed to the component.\n */\nexport const hasHeaderSlot = (\n props: ModalProps,\n): props is BaseModalProps & WithHeaderSlot & FooterOptions & TypeProps => {\n return !!(props as WithHeaderSlot).headerSlot;\n};\n\n/**\n * Type guard to check if a footer slot has been passed to the component.\n */\nexport const hasFooterSlot = (\n props: ModalProps,\n): props is BaseModalProps & HeaderOptions & WithFooterSlot & TypeProps => {\n return !!(props as WithFooterSlot).footerSlot;\n};\n\n/**\n * Type guard to check if the modal is a sidedraw\n */\nexport const isSideDraw = (\n props: ModalProps,\n): props is BaseModalProps & HeaderOptions & FooterOptions & SideDrawType => {\n return props.displayMode === 'leftDrawer' || props.displayMode === 'rightDrawer';\n};\n"],"names":[],"mappings":";;AAgFA;;AAEG;AACI,MAAM,aAAa,GAAG,CAC3B,KAAiB,KACuD;AACxE,IAAA,OAAO,CAAC,CAAE,KAAwB,CAAC,UAAU;AAC/C;AAEA;;AAEG;AACI,MAAM,aAAa,GAAG,CAC3B,KAAiB,KACuD;AACxE,IAAA,OAAO,CAAC,CAAE,KAAwB,CAAC,UAAU;AAC/C;AAEA;;AAEG;AACI,MAAM,UAAU,GAAG,CACxB,KAAiB,KACyD;IAC1E,OAAO,KAAK,CAAC,WAAW,KAAK,YAAY,IAAI,KAAK,CAAC,WAAW,KAAK,aAAa;AAClF;;;;;;"}
|
|
@@ -1,42 +1,61 @@
|
|
|
1
1
|
import { CSSProperties, HTMLAttributes } from 'react';
|
|
2
|
-
import {
|
|
3
|
-
export type
|
|
2
|
+
import { ActionProps } from '../Action/types';
|
|
3
|
+
export type ModalSizes = 'xs' | 'sm' | 'base' | 'lg';
|
|
4
4
|
export type ModalTypes = 'modal' | 'leftDrawer' | 'rightDrawer';
|
|
5
5
|
export type ModalAppearance = 'primary' | 'secondary';
|
|
6
6
|
type BaseModalProps = {
|
|
7
|
+
/** Whether the modal is visible. */
|
|
7
8
|
shouldShow: boolean;
|
|
9
|
+
/** Show the close button in the header. */
|
|
8
10
|
showHeaderCloseButton?: boolean;
|
|
11
|
+
/** Prevent the modal from closing via backdrop click or ESC. */
|
|
9
12
|
preventClose?: boolean;
|
|
13
|
+
/** Remove internal padding from content area. */
|
|
10
14
|
fullBleed?: boolean;
|
|
11
|
-
|
|
15
|
+
/** Size of the modal. */
|
|
16
|
+
size?: ModalSizes;
|
|
17
|
+
/** Display type — standard modal or side drawer. */
|
|
12
18
|
displayMode?: ModalTypes;
|
|
19
|
+
/** Custom inline styles applied to the dialog element. */
|
|
13
20
|
style?: CSSProperties;
|
|
21
|
+
/** Handler called when close is triggered. Return `false` to cancel. */
|
|
14
22
|
onClose: () => void | boolean;
|
|
23
|
+
/** Modal body content. */
|
|
15
24
|
children?: React.ReactNode;
|
|
25
|
+
/** Additional CSS class applied to the dialog element. */
|
|
16
26
|
className?: string;
|
|
17
27
|
} & Omit<HTMLAttributes<HTMLDialogElement>, 'onClose'>;
|
|
18
28
|
type WithHeaderSlot = {
|
|
29
|
+
/** Custom ReactNode replacing the default header. */
|
|
19
30
|
headerSlot: React.ReactNode;
|
|
20
31
|
};
|
|
21
32
|
type WithFooterSlot = {
|
|
33
|
+
/** Custom ReactNode replacing the default footer. */
|
|
22
34
|
footerSlot: React.ReactNode;
|
|
23
35
|
};
|
|
24
36
|
type SideDrawType = {
|
|
37
|
+
/** Display mode set to a side drawer direction. */
|
|
25
38
|
displayMode: 'leftDrawer' | 'rightDrawer';
|
|
39
|
+
/** Appearance style (applies to side drawers). */
|
|
26
40
|
appearance?: ModalAppearance;
|
|
27
41
|
};
|
|
28
42
|
type DefaultHeaderOptions = {
|
|
43
|
+
/** Title text shown in the default header. */
|
|
29
44
|
headerTitle: string;
|
|
45
|
+
/** Subtitle text shown below the header title. */
|
|
30
46
|
headerSubtitle?: string;
|
|
31
47
|
};
|
|
32
48
|
type ModalType = {
|
|
49
|
+
/** Display mode set to standard centered modal. */
|
|
33
50
|
displayMode?: 'modal';
|
|
34
51
|
};
|
|
35
52
|
export type Action = {
|
|
36
53
|
label: string;
|
|
37
|
-
} &
|
|
54
|
+
} & ActionProps<'button'>;
|
|
38
55
|
type DefaultFooterOptions = {
|
|
56
|
+
/** Action buttons on the left side of the footer. */
|
|
39
57
|
leftActions?: Action[];
|
|
58
|
+
/** Action buttons on the right side of the footer. */
|
|
40
59
|
rightActions?: Action[];
|
|
41
60
|
};
|
|
42
61
|
type HeaderOptions = WithHeaderSlot | DefaultHeaderOptions;
|
|
@@ -47,45 +66,75 @@ export type ModalProps = BaseModalProps & HeaderOptions & FooterOptions & TypePr
|
|
|
47
66
|
* Type guard to check if a header slot has been passed to the component.
|
|
48
67
|
*/
|
|
49
68
|
export declare const hasHeaderSlot: (props: ModalProps) => props is {
|
|
69
|
+
/** Whether the modal is visible. */
|
|
50
70
|
shouldShow: boolean;
|
|
71
|
+
/** Show the close button in the header. */
|
|
51
72
|
showHeaderCloseButton?: boolean | undefined;
|
|
73
|
+
/** Prevent the modal from closing via backdrop click or ESC. */
|
|
52
74
|
preventClose?: boolean | undefined;
|
|
75
|
+
/** Remove internal padding from content area. */
|
|
53
76
|
fullBleed?: boolean | undefined;
|
|
54
|
-
|
|
77
|
+
/** Size of the modal. */
|
|
78
|
+
size?: ModalSizes | undefined;
|
|
79
|
+
/** Display type — standard modal or side drawer. */
|
|
55
80
|
displayMode?: ModalTypes | undefined;
|
|
81
|
+
/** Custom inline styles applied to the dialog element. */
|
|
56
82
|
style?: CSSProperties | undefined;
|
|
83
|
+
/** Handler called when close is triggered. Return `false` to cancel. */
|
|
57
84
|
onClose: () => void | boolean;
|
|
85
|
+
/** Modal body content. */
|
|
58
86
|
children?: React.ReactNode;
|
|
87
|
+
/** Additional CSS class applied to the dialog element. */
|
|
59
88
|
className?: string | undefined;
|
|
60
89
|
} & Omit<HTMLAttributes<HTMLDialogElement>, "onClose"> & WithHeaderSlot & FooterOptions & TypeProps;
|
|
61
90
|
/**
|
|
62
91
|
* Type guard to check if a footer slot has been passed to the component.
|
|
63
92
|
*/
|
|
64
93
|
export declare const hasFooterSlot: (props: ModalProps) => props is {
|
|
94
|
+
/** Whether the modal is visible. */
|
|
65
95
|
shouldShow: boolean;
|
|
96
|
+
/** Show the close button in the header. */
|
|
66
97
|
showHeaderCloseButton?: boolean | undefined;
|
|
98
|
+
/** Prevent the modal from closing via backdrop click or ESC. */
|
|
67
99
|
preventClose?: boolean | undefined;
|
|
100
|
+
/** Remove internal padding from content area. */
|
|
68
101
|
fullBleed?: boolean | undefined;
|
|
69
|
-
|
|
102
|
+
/** Size of the modal. */
|
|
103
|
+
size?: ModalSizes | undefined;
|
|
104
|
+
/** Display type — standard modal or side drawer. */
|
|
70
105
|
displayMode?: ModalTypes | undefined;
|
|
106
|
+
/** Custom inline styles applied to the dialog element. */
|
|
71
107
|
style?: CSSProperties | undefined;
|
|
108
|
+
/** Handler called when close is triggered. Return `false` to cancel. */
|
|
72
109
|
onClose: () => void | boolean;
|
|
110
|
+
/** Modal body content. */
|
|
73
111
|
children?: React.ReactNode;
|
|
112
|
+
/** Additional CSS class applied to the dialog element. */
|
|
74
113
|
className?: string | undefined;
|
|
75
114
|
} & Omit<HTMLAttributes<HTMLDialogElement>, "onClose"> & HeaderOptions & WithFooterSlot & TypeProps;
|
|
76
115
|
/**
|
|
77
116
|
* Type guard to check if the modal is a sidedraw
|
|
78
117
|
*/
|
|
79
118
|
export declare const isSideDraw: (props: ModalProps) => props is {
|
|
119
|
+
/** Whether the modal is visible. */
|
|
80
120
|
shouldShow: boolean;
|
|
121
|
+
/** Show the close button in the header. */
|
|
81
122
|
showHeaderCloseButton?: boolean | undefined;
|
|
123
|
+
/** Prevent the modal from closing via backdrop click or ESC. */
|
|
82
124
|
preventClose?: boolean | undefined;
|
|
125
|
+
/** Remove internal padding from content area. */
|
|
83
126
|
fullBleed?: boolean | undefined;
|
|
84
|
-
|
|
127
|
+
/** Size of the modal. */
|
|
128
|
+
size?: ModalSizes | undefined;
|
|
129
|
+
/** Display type — standard modal or side drawer. */
|
|
85
130
|
displayMode?: ModalTypes | undefined;
|
|
131
|
+
/** Custom inline styles applied to the dialog element. */
|
|
86
132
|
style?: CSSProperties | undefined;
|
|
133
|
+
/** Handler called when close is triggered. Return `false` to cancel. */
|
|
87
134
|
onClose: () => void | boolean;
|
|
135
|
+
/** Modal body content. */
|
|
88
136
|
children?: React.ReactNode;
|
|
137
|
+
/** Additional CSS class applied to the dialog element. */
|
|
89
138
|
className?: string | undefined;
|
|
90
139
|
} & Omit<HTMLAttributes<HTMLDialogElement>, "onClose"> & HeaderOptions & FooterOptions & SideDrawType;
|
|
91
140
|
export {};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"types.js","sources":["../../../src/components/Modal/types.ts"],"sourcesContent":["import { CSSProperties, HTMLAttributes } from 'react';\nimport {
|
|
1
|
+
{"version":3,"file":"types.js","sources":["../../../src/components/Modal/types.ts"],"sourcesContent":["import { CSSProperties, HTMLAttributes } from 'react';\nimport { ActionProps } from '../Action/types';\n\nexport type ModalSizes = 'xs' | 'sm' | 'base' | 'lg';\nexport type ModalTypes = 'modal' | 'leftDrawer' | 'rightDrawer';\nexport type ModalAppearance = 'primary' | 'secondary';\n\n// Base Modal props shared by all sizes.\ntype BaseModalProps = {\n /** Whether the modal is visible. */\n shouldShow: boolean;\n /** Show the close button in the header. */\n showHeaderCloseButton?: boolean;\n /** Prevent the modal from closing via backdrop click or ESC. */\n preventClose?: boolean;\n /** Remove internal padding from content area. */\n fullBleed?: boolean;\n /** Size of the modal. */\n size?: ModalSizes;\n /** Display type — standard modal or side drawer. */\n displayMode?: ModalTypes;\n /** Custom inline styles applied to the dialog element. */\n style?: CSSProperties;\n /** Handler called when close is triggered. Return `false` to cancel. */\n onClose: () => void | boolean;\n /** Modal body content. */\n children?: React.ReactNode;\n /** Additional CSS class applied to the dialog element. */\n className?: string;\n} & Omit<HTMLAttributes<HTMLDialogElement>, 'onClose'>;\n\n// Optional slot types.\n\ntype WithHeaderSlot = {\n /** Custom ReactNode replacing the default header. */\n headerSlot: React.ReactNode;\n};\n\ntype WithFooterSlot = {\n /** Custom ReactNode replacing the default footer. */\n footerSlot: React.ReactNode;\n};\n\ntype SideDrawType = {\n /** Display mode set to a side drawer direction. */\n displayMode: 'leftDrawer' | 'rightDrawer';\n /** Appearance style (applies to side drawers). */\n appearance?: ModalAppearance;\n};\n\n// Default header and footer options.\n\ntype DefaultHeaderOptions = {\n /** Title text shown in the default header. */\n headerTitle: string;\n /** Subtitle text shown below the header title. */\n headerSubtitle?: string;\n};\n\ntype ModalType = {\n /** Display mode set to standard centered modal. */\n displayMode?: 'modal';\n};\n\nexport type Action = { label: string } & ActionProps<'button'>;\ntype DefaultFooterOptions = {\n /** Action buttons on the left side of the footer. */\n leftActions?: Action[];\n /** Action buttons on the right side of the footer. */\n rightActions?: Action[];\n};\n\n// Either we have a header slot or default header options, same for footer.\ntype HeaderOptions = WithHeaderSlot | DefaultHeaderOptions;\ntype FooterOptions = WithFooterSlot | DefaultFooterOptions;\ntype TypeProps = ModalType | SideDrawType;\n\n// Modal props are shared props + the header and footer options (potentially with slots.)\nexport type ModalProps = BaseModalProps & HeaderOptions & FooterOptions & TypeProps;\n\n/**\n * Type guard to check if a header slot has been passed to the component.\n */\nexport const hasHeaderSlot = (\n props: ModalProps,\n): props is BaseModalProps & WithHeaderSlot & FooterOptions & TypeProps => {\n return !!(props as WithHeaderSlot).headerSlot;\n};\n\n/**\n * Type guard to check if a footer slot has been passed to the component.\n */\nexport const hasFooterSlot = (\n props: ModalProps,\n): props is BaseModalProps & HeaderOptions & WithFooterSlot & TypeProps => {\n return !!(props as WithFooterSlot).footerSlot;\n};\n\n/**\n * Type guard to check if the modal is a sidedraw\n */\nexport const isSideDraw = (\n props: ModalProps,\n): props is BaseModalProps & HeaderOptions & FooterOptions & SideDrawType => {\n return props.displayMode === 'leftDrawer' || props.displayMode === 'rightDrawer';\n};\n"],"names":[],"mappings":"AAgFA;;AAEG;AACI,MAAM,aAAa,GAAG,CAC3B,KAAiB,KACuD;AACxE,IAAA,OAAO,CAAC,CAAE,KAAwB,CAAC,UAAU;AAC/C;AAEA;;AAEG;AACI,MAAM,aAAa,GAAG,CAC3B,KAAiB,KACuD;AACxE,IAAA,OAAO,CAAC,CAAE,KAAwB,CAAC,UAAU;AAC/C;AAEA;;AAEG;AACI,MAAM,UAAU,GAAG,CACxB,KAAiB,KACyD;IAC1E,OAAO,KAAK,CAAC,WAAW,KAAK,YAAY,IAAI,KAAK,CAAC,WAAW,KAAK,aAAa;AAClF;;;;"}
|
|
@@ -1,12 +1,12 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var React = require('react');
|
|
4
3
|
var framerMotion = require('framer-motion');
|
|
5
|
-
var
|
|
6
|
-
var Portal = require('../Portal/Portal.cjs');
|
|
7
|
-
require('../Portal/PortalContext.cjs');
|
|
4
|
+
var React = require('react');
|
|
8
5
|
var buildClassnames = require('../../utils/buildClassnames.cjs');
|
|
9
6
|
require('uid/secure');
|
|
7
|
+
var Portal = require('../Portal/Portal.cjs');
|
|
8
|
+
require('../Portal/PortalContext.cjs');
|
|
9
|
+
var TooltipPopover = require('./components/TooltipPopover.cjs');
|
|
10
10
|
var Tooltip_module = require('./Tooltip.module.scss.cjs');
|
|
11
11
|
|
|
12
12
|
function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
|
|
@@ -34,10 +34,18 @@ const Tooltip = ({ children, text, content, config, reversed = false, className,
|
|
|
34
34
|
return children;
|
|
35
35
|
const show = () => setShouldShow(true);
|
|
36
36
|
const hide = () => setShouldShow(false);
|
|
37
|
-
return (React__default.default.createElement("div", { className: buildClassnames.buildClassnames([
|
|
37
|
+
return (React__default.default.createElement("div", { className: buildClassnames.buildClassnames([
|
|
38
|
+
Tooltip_module.container,
|
|
39
|
+
className,
|
|
40
|
+
className && `${className}-container`,
|
|
41
|
+
]) },
|
|
38
42
|
React__default.default.createElement(framerMotion.AnimatePresence, null, shouldShow && (React__default.default.createElement(WithOptionalPortal, { usePortal: useReactPortal },
|
|
39
43
|
React__default.default.createElement(TooltipPopover.TooltipPopover, { key: "tooltip-popover", hoverableElement: hoverableElement, config: config, reversed: reversed, withTriangle: withTriangle, text: text, content: content, legacyClassNames: legacyClassNames })))),
|
|
40
|
-
React__default.default.createElement("div", { ref: setHoverableElement, className: buildClassnames.buildClassnames([
|
|
44
|
+
React__default.default.createElement("div", { ref: setHoverableElement, className: buildClassnames.buildClassnames([
|
|
45
|
+
Tooltip_module.hoverable,
|
|
46
|
+
hoverableClassName,
|
|
47
|
+
className && `${className}-hoverable`,
|
|
48
|
+
]), onMouseEnter: show, onMouseLeave: hide, onFocus: show, onBlur: hide }, children)));
|
|
41
49
|
};
|
|
42
50
|
|
|
43
51
|
exports.Tooltip = Tooltip;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Tooltip.cjs","sources":["../../../src/components/Tooltip/Tooltip.tsx"],"sourcesContent":["import React, {
|
|
1
|
+
{"version":3,"file":"Tooltip.cjs","sources":["../../../src/components/Tooltip/Tooltip.tsx"],"sourcesContent":["import { AnimatePresence } from 'framer-motion';\nimport React, { ReactNode, useState } from 'react';\nimport { buildClassnames } from '../../utils';\nimport { Portal } from '../Portal';\nimport { TooltipPopover } from './components/TooltipPopover';\nimport { LegacyClassNames } from './components/types';\nimport tooltipStyles from './Tooltip.module.scss';\nimport { TooltipProps } from './types';\n\nconst WithOptionalPortal: React.FC<{ usePortal: boolean; children: ReactNode }> = ({\n usePortal = false,\n children,\n // eslint-disable-next-line react/jsx-no-useless-fragment\n}) => (usePortal ? <Portal>{children}</Portal> : <>{children}</>);\n\nexport const Tooltip = ({\n children,\n text,\n content,\n config,\n reversed = false,\n className,\n hoverableClassName,\n withTriangle,\n initialShouldShow = false,\n useReactPortal = true,\n}: TooltipProps): ReactNode => {\n const [shouldShow, setShouldShow] = useState(initialShouldShow);\n const [hoverableElement, setHoverableElement] = useState<HTMLDivElement | null>(null);\n\n const hasText = text ? text.trim().length > 0 : false;\n const hasContent = !!(content || hasText);\n\n // Backward-compatible suffix classes for monolith consumers that\n // target sub-elements via the className prefix convention.\n const legacyClassNames: LegacyClassNames | undefined = className\n ? {\n tip: `${className}-tip`,\n wrap: `${className}-wrap`,\n triangle: `${className}-triangle`,\n }\n : undefined;\n\n if (!hasContent) return children;\n\n const show = () => setShouldShow(true);\n const hide = () => setShouldShow(false);\n\n return (\n <div\n className={buildClassnames([\n tooltipStyles.container,\n className,\n className && `${className}-container`,\n ])}\n >\n <AnimatePresence>\n {shouldShow && (\n <WithOptionalPortal usePortal={useReactPortal}>\n <TooltipPopover\n key=\"tooltip-popover\"\n hoverableElement={hoverableElement}\n config={config}\n reversed={reversed}\n withTriangle={withTriangle}\n text={text}\n content={content}\n legacyClassNames={legacyClassNames}\n />\n </WithOptionalPortal>\n )}\n </AnimatePresence>\n\n <div\n ref={setHoverableElement}\n className={buildClassnames([\n tooltipStyles.hoverable,\n hoverableClassName,\n className && `${className}-hoverable`,\n ])}\n onMouseEnter={show}\n onMouseLeave={hide}\n onFocus={show}\n onBlur={hide}\n >\n {children}\n </div>\n </div>\n );\n};\n"],"names":["React","Portal","useState","buildClassnames","tooltipStyles","AnimatePresence","TooltipPopover"],"mappings":";;;;;;;;;;;;;;;AASA,MAAM,kBAAkB,GAA0D,CAAC,EACjF,SAAS,GAAG,KAAK,EACjB,QAAQ;AACR;AACD,EAAA,MAAM,SAAS,GAAGA,sBAAA,CAAA,aAAA,CAACC,aAAM,QAAE,QAAQ,CAAU,GAAGD,4EAAG,QAAQ,CAAI,CAAC;AAE1D,MAAM,OAAO,GAAG,CAAC,EACtB,QAAQ,EACR,IAAI,EACJ,OAAO,EACP,MAAM,EACN,QAAQ,GAAG,KAAK,EAChB,SAAS,EACT,kBAAkB,EAClB,YAAY,EACZ,iBAAiB,GAAG,KAAK,EACzB,cAAc,GAAG,IAAI,GACR,KAAe;IAC5B,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAGE,cAAQ,CAAC,iBAAiB,CAAC;IAC/D,MAAM,CAAC,gBAAgB,EAAE,mBAAmB,CAAC,GAAGA,cAAQ,CAAwB,IAAI,CAAC;AAErF,IAAA,MAAM,OAAO,GAAG,IAAI,GAAG,IAAI,CAAC,IAAI,EAAE,CAAC,MAAM,GAAG,CAAC,GAAG,KAAK;IACrD,MAAM,UAAU,GAAG,CAAC,EAAE,OAAO,IAAI,OAAO,CAAC;;;IAIzC,MAAM,gBAAgB,GAAiC;AACrD,UAAE;YACE,GAAG,EAAE,CAAA,EAAG,SAAS,CAAA,IAAA,CAAM;YACvB,IAAI,EAAE,CAAA,EAAG,SAAS,CAAA,KAAA,CAAO;YACzB,QAAQ,EAAE,CAAA,EAAG,SAAS,CAAA,SAAA,CAAW;AAClC;UACD,SAAS;AAEb,IAAA,IAAI,CAAC,UAAU;AAAE,QAAA,OAAO,QAAQ;IAEhC,MAAM,IAAI,GAAG,MAAM,aAAa,CAAC,IAAI,CAAC;IACtC,MAAM,IAAI,GAAG,MAAM,aAAa,CAAC,KAAK,CAAC;AAEvC,IAAA,QACEF,sBAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EACE,SAAS,EAAEG,+BAAe,CAAC;AACzB,YAAAC,cAAa,CAAC,SAAS;YACvB,SAAS;YACT,SAAS,IAAI,CAAA,EAAG,SAAS,CAAA,UAAA,CAAY;SACtC,CAAC,EAAA;QAEFJ,sBAAA,CAAA,aAAA,CAACK,4BAAe,EAAA,IAAA,EACb,UAAU,KACTL,qCAAC,kBAAkB,EAAA,EAAC,SAAS,EAAE,cAAc,EAAA;AAC3C,YAAAA,sBAAA,CAAA,aAAA,CAACM,6BAAc,EAAA,EACb,GAAG,EAAC,iBAAiB,EACrB,gBAAgB,EAAE,gBAAgB,EAClC,MAAM,EAAE,MAAM,EACd,QAAQ,EAAE,QAAQ,EAClB,YAAY,EAAE,YAAY,EAC1B,IAAI,EAAE,IAAI,EACV,OAAO,EAAE,OAAO,EAChB,gBAAgB,EAAE,gBAAgB,EAAA,CAClC,CACiB,CACtB,CACe;AAElB,QAAAN,sBAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EACE,GAAG,EAAE,mBAAmB,EACxB,SAAS,EAAEG,+BAAe,CAAC;AACzB,gBAAAC,cAAa,CAAC,SAAS;gBACvB,kBAAkB;gBAClB,SAAS,IAAI,CAAA,EAAG,SAAS,CAAA,UAAA,CAAY;aACtC,CAAC,EACF,YAAY,EAAE,IAAI,EAClB,YAAY,EAAE,IAAI,EAClB,OAAO,EAAE,IAAI,EACb,MAAM,EAAE,IAAI,IAEX,QAAQ,CACL,CACF;AAEV;;;;"}
|
|
@@ -1,3 +1,3 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { ReactNode } from 'react';
|
|
2
2
|
import { TooltipProps } from './types';
|
|
3
|
-
export declare const Tooltip: ({ children, text, content, config, reversed, className, hoverableClassName, withTriangle, initialShouldShow, useReactPortal, }: TooltipProps) =>
|
|
3
|
+
export declare const Tooltip: ({ children, text, content, config, reversed, className, hoverableClassName, withTriangle, initialShouldShow, useReactPortal, }: TooltipProps) => ReactNode;
|
|
@@ -1,10 +1,10 @@
|
|
|
1
|
-
import React__default, { useState } from 'react';
|
|
2
1
|
import { AnimatePresence } from 'framer-motion';
|
|
3
|
-
import {
|
|
4
|
-
import { Portal } from '../Portal/Portal.js';
|
|
5
|
-
import '../Portal/PortalContext.js';
|
|
2
|
+
import React__default, { useState } from 'react';
|
|
6
3
|
import { buildClassnames } from '../../utils/buildClassnames.js';
|
|
7
4
|
import 'uid/secure';
|
|
5
|
+
import { Portal } from '../Portal/Portal.js';
|
|
6
|
+
import '../Portal/PortalContext.js';
|
|
7
|
+
import { TooltipPopover } from './components/TooltipPopover.js';
|
|
8
8
|
import tooltipStyles from './Tooltip.module.scss.js';
|
|
9
9
|
|
|
10
10
|
const WithOptionalPortal = ({ usePortal = false, children,
|
|
@@ -28,10 +28,18 @@ const Tooltip = ({ children, text, content, config, reversed = false, className,
|
|
|
28
28
|
return children;
|
|
29
29
|
const show = () => setShouldShow(true);
|
|
30
30
|
const hide = () => setShouldShow(false);
|
|
31
|
-
return (React__default.createElement("div", { className: buildClassnames([
|
|
31
|
+
return (React__default.createElement("div", { className: buildClassnames([
|
|
32
|
+
tooltipStyles.container,
|
|
33
|
+
className,
|
|
34
|
+
className && `${className}-container`,
|
|
35
|
+
]) },
|
|
32
36
|
React__default.createElement(AnimatePresence, null, shouldShow && (React__default.createElement(WithOptionalPortal, { usePortal: useReactPortal },
|
|
33
37
|
React__default.createElement(TooltipPopover, { key: "tooltip-popover", hoverableElement: hoverableElement, config: config, reversed: reversed, withTriangle: withTriangle, text: text, content: content, legacyClassNames: legacyClassNames })))),
|
|
34
|
-
React__default.createElement("div", { ref: setHoverableElement, className: buildClassnames([
|
|
38
|
+
React__default.createElement("div", { ref: setHoverableElement, className: buildClassnames([
|
|
39
|
+
tooltipStyles.hoverable,
|
|
40
|
+
hoverableClassName,
|
|
41
|
+
className && `${className}-hoverable`,
|
|
42
|
+
]), onMouseEnter: show, onMouseLeave: hide, onFocus: show, onBlur: hide }, children)));
|
|
35
43
|
};
|
|
36
44
|
|
|
37
45
|
export { Tooltip };
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Tooltip.js","sources":["../../../src/components/Tooltip/Tooltip.tsx"],"sourcesContent":["import React, {
|
|
1
|
+
{"version":3,"file":"Tooltip.js","sources":["../../../src/components/Tooltip/Tooltip.tsx"],"sourcesContent":["import { AnimatePresence } from 'framer-motion';\nimport React, { ReactNode, useState } from 'react';\nimport { buildClassnames } from '../../utils';\nimport { Portal } from '../Portal';\nimport { TooltipPopover } from './components/TooltipPopover';\nimport { LegacyClassNames } from './components/types';\nimport tooltipStyles from './Tooltip.module.scss';\nimport { TooltipProps } from './types';\n\nconst WithOptionalPortal: React.FC<{ usePortal: boolean; children: ReactNode }> = ({\n usePortal = false,\n children,\n // eslint-disable-next-line react/jsx-no-useless-fragment\n}) => (usePortal ? <Portal>{children}</Portal> : <>{children}</>);\n\nexport const Tooltip = ({\n children,\n text,\n content,\n config,\n reversed = false,\n className,\n hoverableClassName,\n withTriangle,\n initialShouldShow = false,\n useReactPortal = true,\n}: TooltipProps): ReactNode => {\n const [shouldShow, setShouldShow] = useState(initialShouldShow);\n const [hoverableElement, setHoverableElement] = useState<HTMLDivElement | null>(null);\n\n const hasText = text ? text.trim().length > 0 : false;\n const hasContent = !!(content || hasText);\n\n // Backward-compatible suffix classes for monolith consumers that\n // target sub-elements via the className prefix convention.\n const legacyClassNames: LegacyClassNames | undefined = className\n ? {\n tip: `${className}-tip`,\n wrap: `${className}-wrap`,\n triangle: `${className}-triangle`,\n }\n : undefined;\n\n if (!hasContent) return children;\n\n const show = () => setShouldShow(true);\n const hide = () => setShouldShow(false);\n\n return (\n <div\n className={buildClassnames([\n tooltipStyles.container,\n className,\n className && `${className}-container`,\n ])}\n >\n <AnimatePresence>\n {shouldShow && (\n <WithOptionalPortal usePortal={useReactPortal}>\n <TooltipPopover\n key=\"tooltip-popover\"\n hoverableElement={hoverableElement}\n config={config}\n reversed={reversed}\n withTriangle={withTriangle}\n text={text}\n content={content}\n legacyClassNames={legacyClassNames}\n />\n </WithOptionalPortal>\n )}\n </AnimatePresence>\n\n <div\n ref={setHoverableElement}\n className={buildClassnames([\n tooltipStyles.hoverable,\n hoverableClassName,\n className && `${className}-hoverable`,\n ])}\n onMouseEnter={show}\n onMouseLeave={hide}\n onFocus={show}\n onBlur={hide}\n >\n {children}\n </div>\n </div>\n );\n};\n"],"names":["React"],"mappings":";;;;;;;;;AASA,MAAM,kBAAkB,GAA0D,CAAC,EACjF,SAAS,GAAG,KAAK,EACjB,QAAQ;AACR;AACD,EAAA,MAAM,SAAS,GAAGA,cAAA,CAAA,aAAA,CAAC,MAAM,QAAE,QAAQ,CAAU,GAAGA,4DAAG,QAAQ,CAAI,CAAC;AAE1D,MAAM,OAAO,GAAG,CAAC,EACtB,QAAQ,EACR,IAAI,EACJ,OAAO,EACP,MAAM,EACN,QAAQ,GAAG,KAAK,EAChB,SAAS,EACT,kBAAkB,EAClB,YAAY,EACZ,iBAAiB,GAAG,KAAK,EACzB,cAAc,GAAG,IAAI,GACR,KAAe;IAC5B,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,QAAQ,CAAC,iBAAiB,CAAC;IAC/D,MAAM,CAAC,gBAAgB,EAAE,mBAAmB,CAAC,GAAG,QAAQ,CAAwB,IAAI,CAAC;AAErF,IAAA,MAAM,OAAO,GAAG,IAAI,GAAG,IAAI,CAAC,IAAI,EAAE,CAAC,MAAM,GAAG,CAAC,GAAG,KAAK;IACrD,MAAM,UAAU,GAAG,CAAC,EAAE,OAAO,IAAI,OAAO,CAAC;;;IAIzC,MAAM,gBAAgB,GAAiC;AACrD,UAAE;YACE,GAAG,EAAE,CAAA,EAAG,SAAS,CAAA,IAAA,CAAM;YACvB,IAAI,EAAE,CAAA,EAAG,SAAS,CAAA,KAAA,CAAO;YACzB,QAAQ,EAAE,CAAA,EAAG,SAAS,CAAA,SAAA,CAAW;AAClC;UACD,SAAS;AAEb,IAAA,IAAI,CAAC,UAAU;AAAE,QAAA,OAAO,QAAQ;IAEhC,MAAM,IAAI,GAAG,MAAM,aAAa,CAAC,IAAI,CAAC;IACtC,MAAM,IAAI,GAAG,MAAM,aAAa,CAAC,KAAK,CAAC;AAEvC,IAAA,QACEA,cAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EACE,SAAS,EAAE,eAAe,CAAC;AACzB,YAAA,aAAa,CAAC,SAAS;YACvB,SAAS;YACT,SAAS,IAAI,CAAA,EAAG,SAAS,CAAA,UAAA,CAAY;SACtC,CAAC,EAAA;QAEFA,cAAA,CAAA,aAAA,CAAC,eAAe,EAAA,IAAA,EACb,UAAU,KACTA,6BAAC,kBAAkB,EAAA,EAAC,SAAS,EAAE,cAAc,EAAA;AAC3C,YAAAA,cAAA,CAAA,aAAA,CAAC,cAAc,EAAA,EACb,GAAG,EAAC,iBAAiB,EACrB,gBAAgB,EAAE,gBAAgB,EAClC,MAAM,EAAE,MAAM,EACd,QAAQ,EAAE,QAAQ,EAClB,YAAY,EAAE,YAAY,EAC1B,IAAI,EAAE,IAAI,EACV,OAAO,EAAE,OAAO,EAChB,gBAAgB,EAAE,gBAAgB,EAAA,CAClC,CACiB,CACtB,CACe;AAElB,QAAAA,cAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EACE,GAAG,EAAE,mBAAmB,EACxB,SAAS,EAAE,eAAe,CAAC;AACzB,gBAAA,aAAa,CAAC,SAAS;gBACvB,kBAAkB;gBAClB,SAAS,IAAI,CAAA,EAAG,SAAS,CAAA,UAAA,CAAY;aACtC,CAAC,EACF,YAAY,EAAE,IAAI,EAClB,YAAY,EAAE,IAAI,EAClB,OAAO,EAAE,IAAI,EACb,MAAM,EAAE,IAAI,IAEX,QAAQ,CACL,CACF;AAEV;;;;"}
|
|
@@ -2,8 +2,8 @@
|
|
|
2
2
|
|
|
3
3
|
var ___$insertStyle = require('../../_virtual/____insertStyle.cjs');
|
|
4
4
|
|
|
5
|
-
___$insertStyle(".
|
|
6
|
-
var tooltipStyles = {"container":"
|
|
5
|
+
___$insertStyle("._container_1ko1n_1 {\n display: inline-block;\n}\n\n._hoverable_1ko1n_5 {\n display: inline-block;\n}\n\n._tip_1ko1n_9 {\n width: max-content;\n pointer-events: none;\n will-change: opacity, transform;\n z-index: var(--layers-tooltip);\n}\n._tip_1ko1n_9[data-placement^=top-start] > ._triangle_1ko1n_15 {\n left: var(--sizes-sm);\n bottom: 0;\n}\n._tip_1ko1n_9[data-placement^=top-end] > ._triangle_1ko1n_15 {\n right: var(--sizes-sm);\n bottom: 0;\n}\n._tip_1ko1n_9[data-placement^=bottom-start] > ._triangle_1ko1n_15 {\n left: var(--sizes-sm);\n top: calc(var(--sizes-xs) * -1);\n}\n._tip_1ko1n_9[data-placement^=bottom-end] > ._triangle_1ko1n_15 {\n right: var(--sizes-sm);\n top: calc(var(--sizes-xs) * -1);\n}\n\n._wrap_1ko1n_32 {\n display: inline-block;\n padding: var(--sizes-base) var(--sizes-5);\n overflow: hidden;\n z-index: var(--layers-tooltip);\n min-width: var(--tip-min-width);\n max-width: var(--tip-max-width);\n color: #fff;\n border-radius: var(--radius-md);\n box-shadow: var(--shadows-base);\n background: var(--colors-neutral-ink-dark);\n}\n\n._triangle_1ko1n_15 {\n background-color: var(--colors-neutral-ink-dark);\n height: var(--sizes-base);\n width: var(--sizes-base);\n position: absolute;\n transform: rotate(45deg);\n z-index: var(--layers-tooltip);\n}");
|
|
6
|
+
var tooltipStyles = {"container":"_container_1ko1n_1","hoverable":"_hoverable_1ko1n_5","tip":"_tip_1ko1n_9","triangle":"_triangle_1ko1n_15","wrap":"_wrap_1ko1n_32"};
|
|
7
7
|
|
|
8
8
|
module.exports = tooltipStyles;
|
|
9
9
|
//# sourceMappingURL=Tooltip.module.scss.cjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Tooltip.module.scss.cjs","sources":["../../../src/components/Tooltip/Tooltip.module.scss"],"sourcesContent":[".container {\n display: inline-block;\n}\n\n.hoverable {\n display: inline-block;\n}\n\n.tip {\n width: max-content;\n pointer-events: none;\n will-change: opacity, transform;\n z-index: var(--layers-tooltip);\n\n &[data-placement^='top-start'] > .triangle {\n left:
|
|
1
|
+
{"version":3,"file":"Tooltip.module.scss.cjs","sources":["../../../src/components/Tooltip/Tooltip.module.scss"],"sourcesContent":[".container {\n display: inline-block;\n}\n\n.hoverable {\n display: inline-block;\n}\n\n.tip {\n width: max-content;\n pointer-events: none;\n will-change: opacity, transform;\n z-index: var(--layers-tooltip);\n\n &[data-placement^='top-start'] > .triangle {\n left: var(--sizes-sm);\n bottom: 0;\n }\n\n &[data-placement^='top-end'] > .triangle {\n right: var(--sizes-sm);\n bottom: 0;\n }\n\n &[data-placement^='bottom-start'] > .triangle {\n left: var(--sizes-sm);\n top: calc(var(--sizes-xs) * -1);\n }\n\n &[data-placement^='bottom-end'] > .triangle {\n right: var(--sizes-sm);\n top: calc(var(--sizes-xs) * -1);\n }\n}\n\n.wrap {\n display: inline-block;\n padding: var(--sizes-base) var(--sizes-5);\n overflow: hidden;\n z-index: var(--layers-tooltip);\n min-width: var(--tip-min-width);\n max-width: var(--tip-max-width);\n color: #fff;\n border-radius: var(--radius-md);\n box-shadow: var(--shadows-base);\n background: var(--colors-neutral-ink-dark);\n}\n\n.triangle {\n background-color: var(--colors-neutral-ink-dark);\n height: var(--sizes-base);\n width: var(--sizes-base);\n position: absolute;\n transform: rotate(45deg);\n z-index: var(--layers-tooltip);\n}\n"],"names":[],"mappings":";;;;AACE,eAAA,CAAA,qyCAAA;;;;;"}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import insertStyle from '../../_virtual/____insertStyle.js';
|
|
2
2
|
|
|
3
|
-
insertStyle(".
|
|
4
|
-
var tooltipStyles = {"container":"
|
|
3
|
+
insertStyle("._container_1ko1n_1 {\n display: inline-block;\n}\n\n._hoverable_1ko1n_5 {\n display: inline-block;\n}\n\n._tip_1ko1n_9 {\n width: max-content;\n pointer-events: none;\n will-change: opacity, transform;\n z-index: var(--layers-tooltip);\n}\n._tip_1ko1n_9[data-placement^=top-start] > ._triangle_1ko1n_15 {\n left: var(--sizes-sm);\n bottom: 0;\n}\n._tip_1ko1n_9[data-placement^=top-end] > ._triangle_1ko1n_15 {\n right: var(--sizes-sm);\n bottom: 0;\n}\n._tip_1ko1n_9[data-placement^=bottom-start] > ._triangle_1ko1n_15 {\n left: var(--sizes-sm);\n top: calc(var(--sizes-xs) * -1);\n}\n._tip_1ko1n_9[data-placement^=bottom-end] > ._triangle_1ko1n_15 {\n right: var(--sizes-sm);\n top: calc(var(--sizes-xs) * -1);\n}\n\n._wrap_1ko1n_32 {\n display: inline-block;\n padding: var(--sizes-base) var(--sizes-5);\n overflow: hidden;\n z-index: var(--layers-tooltip);\n min-width: var(--tip-min-width);\n max-width: var(--tip-max-width);\n color: #fff;\n border-radius: var(--radius-md);\n box-shadow: var(--shadows-base);\n background: var(--colors-neutral-ink-dark);\n}\n\n._triangle_1ko1n_15 {\n background-color: var(--colors-neutral-ink-dark);\n height: var(--sizes-base);\n width: var(--sizes-base);\n position: absolute;\n transform: rotate(45deg);\n z-index: var(--layers-tooltip);\n}");
|
|
4
|
+
var tooltipStyles = {"container":"_container_1ko1n_1","hoverable":"_hoverable_1ko1n_5","tip":"_tip_1ko1n_9","triangle":"_triangle_1ko1n_15","wrap":"_wrap_1ko1n_32"};
|
|
5
5
|
|
|
6
6
|
export { tooltipStyles as default };
|
|
7
7
|
//# sourceMappingURL=Tooltip.module.scss.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Tooltip.module.scss.js","sources":["../../../src/components/Tooltip/Tooltip.module.scss"],"sourcesContent":[".container {\n display: inline-block;\n}\n\n.hoverable {\n display: inline-block;\n}\n\n.tip {\n width: max-content;\n pointer-events: none;\n will-change: opacity, transform;\n z-index: var(--layers-tooltip);\n\n &[data-placement^='top-start'] > .triangle {\n left:
|
|
1
|
+
{"version":3,"file":"Tooltip.module.scss.js","sources":["../../../src/components/Tooltip/Tooltip.module.scss"],"sourcesContent":[".container {\n display: inline-block;\n}\n\n.hoverable {\n display: inline-block;\n}\n\n.tip {\n width: max-content;\n pointer-events: none;\n will-change: opacity, transform;\n z-index: var(--layers-tooltip);\n\n &[data-placement^='top-start'] > .triangle {\n left: var(--sizes-sm);\n bottom: 0;\n }\n\n &[data-placement^='top-end'] > .triangle {\n right: var(--sizes-sm);\n bottom: 0;\n }\n\n &[data-placement^='bottom-start'] > .triangle {\n left: var(--sizes-sm);\n top: calc(var(--sizes-xs) * -1);\n }\n\n &[data-placement^='bottom-end'] > .triangle {\n right: var(--sizes-sm);\n top: calc(var(--sizes-xs) * -1);\n }\n}\n\n.wrap {\n display: inline-block;\n padding: var(--sizes-base) var(--sizes-5);\n overflow: hidden;\n z-index: var(--layers-tooltip);\n min-width: var(--tip-min-width);\n max-width: var(--tip-max-width);\n color: #fff;\n border-radius: var(--radius-md);\n box-shadow: var(--shadows-base);\n background: var(--colors-neutral-ink-dark);\n}\n\n.triangle {\n background-color: var(--colors-neutral-ink-dark);\n height: var(--sizes-base);\n width: var(--sizes-base);\n position: absolute;\n transform: rotate(45deg);\n z-index: var(--layers-tooltip);\n}\n"],"names":["___$insertStyle"],"mappings":";;AACEA,WAAA,CAAA,qyCAAA;;;;;"}
|
|
@@ -1,14 +1,14 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var React = require('react');
|
|
4
|
-
var framerMotion = require('framer-motion');
|
|
5
3
|
var react = require('@floating-ui/react');
|
|
6
|
-
var
|
|
7
|
-
var
|
|
4
|
+
var framerMotion = require('framer-motion');
|
|
5
|
+
var React = require('react');
|
|
8
6
|
var buildClassnames = require('../../../utils/buildClassnames.cjs');
|
|
9
7
|
require('uid/secure');
|
|
10
8
|
var assignCssVars = require('../../../utils/assignCssVars.cjs');
|
|
9
|
+
var Text = require('../../Text/Text.cjs');
|
|
11
10
|
var Tooltip_module = require('../Tooltip.module.scss.cjs');
|
|
11
|
+
var types = require('../types.cjs');
|
|
12
12
|
|
|
13
13
|
function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
|
|
14
14
|
|
|
@@ -30,7 +30,7 @@ const TooltipPopover = ({ content, text, hoverableElement, config, reversed, wit
|
|
|
30
30
|
});
|
|
31
31
|
return (React__default.default.createElement(framerMotion.motion.div, { key: "tooltip-tip", className: buildClassnames.buildClassnames([Tooltip_module.tip, legacyClassNames === null || legacyClassNames === void 0 ? void 0 : legacyClassNames.tip]), ref: refs.setFloating, style: floatingStyles, initial: { opacity: 0 }, animate: { opacity: 1 }, exit: { opacity: 0 }, transition: { duration: 0.15 }, "data-placement": placement, role: "tooltip" },
|
|
32
32
|
React__default.default.createElement("div", { className: buildClassnames.buildClassnames([Tooltip_module.wrap, legacyClassNames === null || legacyClassNames === void 0 ? void 0 : legacyClassNames.wrap]), style: assignCssVars.assignCssVars({ tipMinWidth: `${tipMinWidth}px`, tipMaxWidth: `${tipMaxWidth}px` }) }, content !== null && content !== void 0 ? content : (React__default.default.createElement(Text.Text, { variant: "bodySmall", style: { color: 'white' } }, text))),
|
|
33
|
-
withTriangle && React__default.default.createElement("div", {
|
|
33
|
+
withTriangle && (React__default.default.createElement("div", { "data-testid": "tooltip-triangle", className: buildClassnames.buildClassnames([Tooltip_module.triangle, legacyClassNames === null || legacyClassNames === void 0 ? void 0 : legacyClassNames.triangle]) }))));
|
|
34
34
|
};
|
|
35
35
|
|
|
36
36
|
exports.TooltipPopover = TooltipPopover;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TooltipPopover.cjs","sources":["../../../../src/components/Tooltip/components/TooltipPopover.tsx"],"sourcesContent":["import
|
|
1
|
+
{"version":3,"file":"TooltipPopover.cjs","sources":["../../../../src/components/Tooltip/components/TooltipPopover.tsx"],"sourcesContent":["import {\n autoUpdate,\n flip,\n limitShift,\n offset,\n Placement,\n shift,\n useFloating,\n} from '@floating-ui/react';\nimport { motion } from 'framer-motion';\nimport React from 'react';\nimport { assignCssVars, buildClassnames } from '../../../utils';\nimport { Text } from '../../Text';\nimport tooltipStyles from '../Tooltip.module.scss';\nimport { IConfig, Sides } from '../types';\nimport { TooltipPopoverProps } from './types';\n\nconst defaultConfig: IConfig = {\n side: Sides.TOP,\n tipMinWidth: 60,\n tipMaxWidth: 340,\n};\n\nexport const TooltipPopover = ({\n content,\n text,\n hoverableElement,\n config,\n reversed,\n withTriangle,\n legacyClassNames,\n}: TooltipPopoverProps) => {\n const usedConfig = { ...defaultConfig, ...config };\n const { side, tipMinWidth, tipMaxWidth } = usedConfig;\n\n const { refs, floatingStyles, placement } = useFloating({\n elements: { reference: hoverableElement },\n placement: `${side}-${reversed ? 'end' : 'start'}` as Placement,\n middleware: [offset(8), flip(), shift({ limiter: limitShift() })],\n whileElementsMounted: autoUpdate,\n });\n\n return (\n <motion.div\n key=\"tooltip-tip\"\n className={buildClassnames([tooltipStyles.tip, legacyClassNames?.tip])}\n ref={refs.setFloating}\n style={floatingStyles}\n initial={{ opacity: 0 }}\n animate={{ opacity: 1 }}\n exit={{ opacity: 0 }}\n transition={{ duration: 0.15 }}\n data-placement={placement}\n role=\"tooltip\"\n >\n <div\n className={buildClassnames([tooltipStyles.wrap, legacyClassNames?.wrap])}\n style={assignCssVars({ tipMinWidth: `${tipMinWidth}px`, tipMaxWidth: `${tipMaxWidth}px` })}\n >\n {content ?? (\n <Text variant=\"bodySmall\" style={{ color: 'white' }}>\n {text}\n </Text>\n )}\n </div>\n {withTriangle && (\n <div\n data-testid=\"tooltip-triangle\"\n className={buildClassnames([tooltipStyles.triangle, legacyClassNames?.triangle])}\n />\n )}\n </motion.div>\n );\n};\n"],"names":["Sides","useFloating","offset","flip","shift","limitShift","autoUpdate","React","motion","buildClassnames","tooltipStyles","assignCssVars","Text"],"mappings":";;;;;;;;;;;;;;;;AAiBA,MAAM,aAAa,GAAY;IAC7B,IAAI,EAAEA,WAAK,CAAC,GAAG;AACf,IAAA,WAAW,EAAE,EAAE;AACf,IAAA,WAAW,EAAE,GAAG;CACjB;MAEY,cAAc,GAAG,CAAC,EAC7B,OAAO,EACP,IAAI,EACJ,gBAAgB,EAChB,MAAM,EACN,QAAQ,EACR,YAAY,EACZ,gBAAgB,GACI,KAAI;IACxB,MAAM,UAAU,GAAG,EAAE,GAAG,aAAa,EAAE,GAAG,MAAM,EAAE;IAClD,MAAM,EAAE,IAAI,EAAE,WAAW,EAAE,WAAW,EAAE,GAAG,UAAU;IAErD,MAAM,EAAE,IAAI,EAAE,cAAc,EAAE,SAAS,EAAE,GAAGC,iBAAW,CAAC;AACtD,QAAA,QAAQ,EAAE,EAAE,SAAS,EAAE,gBAAgB,EAAE;AACzC,QAAA,SAAS,EAAE,CAAA,EAAG,IAAI,CAAA,CAAA,EAAI,QAAQ,GAAG,KAAK,GAAG,OAAO,CAAA,CAAe;AAC/D,QAAA,UAAU,EAAE,CAACC,YAAM,CAAC,CAAC,CAAC,EAAEC,UAAI,EAAE,EAAEC,WAAK,CAAC,EAAE,OAAO,EAAEC,gBAAU,EAAE,EAAE,CAAC,CAAC;AACjE,QAAA,oBAAoB,EAAEC,gBAAU;AACjC,KAAA,CAAC;AAEF,IAAA,QACEC,sBAAA,CAAA,aAAA,CAACC,mBAAM,CAAC,GAAG,EAAA,EACT,GAAG,EAAC,aAAa,EACjB,SAAS,EAAEC,+BAAe,CAAC,CAACC,cAAa,CAAC,GAAG,EAAE,gBAAgB,KAAA,IAAA,IAAhB,gBAAgB,KAAA,MAAA,GAAA,MAAA,GAAhB,gBAAgB,CAAE,GAAG,CAAC,CAAC,EACtE,GAAG,EAAE,IAAI,CAAC,WAAW,EACrB,KAAK,EAAE,cAAc,EACrB,OAAO,EAAE,EAAE,OAAO,EAAE,CAAC,EAAE,EACvB,OAAO,EAAE,EAAE,OAAO,EAAE,CAAC,EAAE,EACvB,IAAI,EAAE,EAAE,OAAO,EAAE,CAAC,EAAE,EACpB,UAAU,EAAE,EAAE,QAAQ,EAAE,IAAI,EAAE,EAAA,gBAAA,EACd,SAAS,EACzB,IAAI,EAAC,SAAS,EAAA;AAEd,QAAAH,sBAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EACE,SAAS,EAAEE,+BAAe,CAAC,CAACC,cAAa,CAAC,IAAI,EAAE,gBAAgB,KAAA,IAAA,IAAhB,gBAAgB,KAAA,MAAA,GAAA,MAAA,GAAhB,gBAAgB,CAAE,IAAI,CAAC,CAAC,EACxE,KAAK,EAAEC,2BAAa,CAAC,EAAE,WAAW,EAAE,CAAA,EAAG,WAAW,IAAI,EAAE,WAAW,EAAE,CAAA,EAAG,WAAW,CAAA,EAAA,CAAI,EAAE,CAAC,EAAA,EAEzF,OAAO,KAAA,IAAA,IAAP,OAAO,KAAA,MAAA,GAAP,OAAO,IACNJ,qCAACK,SAAI,EAAA,EAAC,OAAO,EAAC,WAAW,EAAC,KAAK,EAAE,EAAE,KAAK,EAAE,OAAO,EAAE,EAAA,EAChD,IAAI,CACA,CACR,CACG;QACL,YAAY,KACXL,sBAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,aAAA,EACc,kBAAkB,EAC9B,SAAS,EAAEE,+BAAe,CAAC,CAACC,cAAa,CAAC,QAAQ,EAAE,gBAAgB,KAAA,IAAA,IAAhB,gBAAgB,KAAA,MAAA,GAAA,MAAA,GAAhB,gBAAgB,CAAE,QAAQ,CAAC,CAAC,EAAA,CAChF,CACH,CACU;AAEjB;;;;"}
|
|
@@ -1,12 +1,12 @@
|
|
|
1
|
-
import React__default from 'react';
|
|
2
|
-
import { motion } from 'framer-motion';
|
|
3
1
|
import { useFloating, autoUpdate, offset, flip, shift, limitShift } from '@floating-ui/react';
|
|
4
|
-
import {
|
|
5
|
-
import
|
|
2
|
+
import { motion } from 'framer-motion';
|
|
3
|
+
import React__default from 'react';
|
|
6
4
|
import { buildClassnames } from '../../../utils/buildClassnames.js';
|
|
7
5
|
import 'uid/secure';
|
|
8
6
|
import { assignCssVars } from '../../../utils/assignCssVars.js';
|
|
7
|
+
import { Text } from '../../Text/Text.js';
|
|
9
8
|
import tooltipStyles from '../Tooltip.module.scss.js';
|
|
9
|
+
import { Sides } from '../types.js';
|
|
10
10
|
|
|
11
11
|
const defaultConfig = {
|
|
12
12
|
side: Sides.TOP,
|
|
@@ -24,7 +24,7 @@ const TooltipPopover = ({ content, text, hoverableElement, config, reversed, wit
|
|
|
24
24
|
});
|
|
25
25
|
return (React__default.createElement(motion.div, { key: "tooltip-tip", className: buildClassnames([tooltipStyles.tip, legacyClassNames === null || legacyClassNames === void 0 ? void 0 : legacyClassNames.tip]), ref: refs.setFloating, style: floatingStyles, initial: { opacity: 0 }, animate: { opacity: 1 }, exit: { opacity: 0 }, transition: { duration: 0.15 }, "data-placement": placement, role: "tooltip" },
|
|
26
26
|
React__default.createElement("div", { className: buildClassnames([tooltipStyles.wrap, legacyClassNames === null || legacyClassNames === void 0 ? void 0 : legacyClassNames.wrap]), style: assignCssVars({ tipMinWidth: `${tipMinWidth}px`, tipMaxWidth: `${tipMaxWidth}px` }) }, content !== null && content !== void 0 ? content : (React__default.createElement(Text, { variant: "bodySmall", style: { color: 'white' } }, text))),
|
|
27
|
-
withTriangle && React__default.createElement("div", {
|
|
27
|
+
withTriangle && (React__default.createElement("div", { "data-testid": "tooltip-triangle", className: buildClassnames([tooltipStyles.triangle, legacyClassNames === null || legacyClassNames === void 0 ? void 0 : legacyClassNames.triangle]) }))));
|
|
28
28
|
};
|
|
29
29
|
|
|
30
30
|
export { TooltipPopover };
|