@muraldevkit/ui-toolkit 4.68.0-dev-NFbt.1 → 4.68.0-dev-nPeA.1

package/dist/esm/components/notification/MrlBlockNotification/MrlBlockNotification.js.map

@@ -1 +1 @@
-{"version":3,"file":"MrlBlockNotification.js","sources":["../../../../../src/components/notification/MrlBlockNotification/MrlBlockNotification.tsx"],"sourcesContent":["import * as React from 'react';\nimport { check, close, error, info, warning } from '@muraldevkit/ds-icons';\nimport classNames from 'classnames';\nimport { AttrsObject, setAttributes } from '../../../utils';\nimport {\n\tdefaults,\n\tNotificationKind,\n\tNotificationScope,\n\tNotificationState,\n\tNotificationLevel,\n\tTransitionDuration\n} from '../constants';\nimport { DSIconType, MrlIconButton, MrlSvg, MrlTextHeading } from '../..';\n\nimport styles from './MrlBlockNotification.module.scss';\nimport './MrlBlockNotification.global.scss';\nimport { useAutoClose } from '../../../hooks/useAutoClose';\n\nexport interface MrlBlockNotificationProps {\n\t/**\n\t * Block Notification Wrapper Class\n\t */\n\tclassName?: string;\n\n\t/**\n\t * QA attribute for close button to allow tests to find the element easier\n\t */\n\tcloseQa?: string;\n\n\t/**\n\t * Children\n\t *\n\t * IMPORTANT! — Make sure to set shouldAutoClose: false if children of this component\n\t * contain interactive elements. Autoclosing interactive elements is an accessibility\n\t * anti-pattern and should be avoided.\n\t */\n\tchildren?: React.ReactNode;\n\n\t/**\n\t * Adds CTA button to the notification\n\t */\n\tcta?: React.ReactElement;\n\n\t/**\n\t * The kind of notification to display.\n\t *\n\t * Examples: warning, error, info, success\n\t */\n\tkind?: NotificationKind;\n\n\t/**\n\t * A custom DS icon.\n\t */\n\tcustomIcon?: DSIconType;\n\n\t/**\n\t * Sets header text for notification\n\t */\n\theading?: string;\n\n\t/**\n\t * Adds a close button to notificaiton if true\n\t */\n\tdismissible?: boolean;\n\n\t/**\n\t * Sets the primary content for the notification\n\t */\n\tmessage?: React.ReactNode;\n\n\t/**\n\t * Sets the scope of the notification\n\t */\n\tscope?: NotificationScope;\n\n\t/**\n\t * Open/Close state of the notification\n\t */\n\tstate?: NotificationState;\n\n\t/**\n\t * Open notification callback\n\t * @returns {void}\n\t */\n\thookOpen?: () => void;\n\n\t/**\n\t * Close notification callback\n\t * @returns {void}\n\t */\n\thookClose?: () => void;\n\n\t/**\n\t * Sets the header level\n\t * Example output: h1, h2, h3, h4\n\t */\n\tlevel?: NotificationLevel;\n\n\t/**\n\t * Attributes that are applied to the component during the initial render.\n\t *\n\t * Example usage: html attributes, custom data attributes (data-qa), aria\n\t */\n\tattrs?: AttrsObject;\n\n\t/**\n\t * When false prevents automated close (e.g. can be used to prevent auto-dismissal of interactive elements, an accessibility anti-pattern) (see useAutoClose)\n\t */\n\tshouldAutoClose?: Parameters<useAutoClose>[0];\n\n\t/**\n\t * Delay in milliseconds before the component closes (see useAutoClose)\n\t */\n\tautoCloseAfterMs?: Parameters<useAutoClose>[1];\n\n\t/**\n\t * Callback to be called when component closes (see useAutoClose)\n\t */\n\tonAutoClose?: Parameters<useAutoClose>[2];\n}\n\n/**\n * Configuration options for icons\n */\nconst iconOptions: Record<string, DSIconType> = {\n\terror,\n\tinfo,\n\tsuccess: check,\n\twarning\n};\n\n/**\n * Block Notification Component\n * @param props - Component props\n * @returns {Element} Block Notification\n */\nexport const MrlBlockNotification = (props: MrlBlockNotificationProps): JSX.Element => {\n\tconst {\n\t\tattrs,\n\t\tautoCloseAfterMs,\n\t\tchildren,\n\t\tclassName,\n\t\tcloseQa,\n\t\tcta,\n\t\tkind = defaults.kind,\n\t\tdismissible = defaults.dismissible,\n\t\theading,\n\t\thookClose,\n\t\thookOpen,\n\t\tcustomIcon,\n\t\tlevel = defaults.level,\n\t\tmessage,\n\t\tonAutoClose,\n\t\tscope = defaults.scope,\n\t\tshouldAutoClose = false,\n\t\tstate = defaults.state,\n\t\t...rest\n\t} = props;\n\n\t/**\n\t * Sets the open/close state of the notification\n\t */\n\tconst [notificationState, setNotificationState] = React.useState<NotificationState>(\n\t\tdefaults.state\n\t);\n\n\t/**\n\t * Reference to the notification\n\t */\n\tconst notification = React.useRef<HTMLDivElement>(null);\n\n\t/**\n\t * Handles logic for opening the notification\n\t */\n\tconst handleOpen = React.useCallback(() => {\n\t\tsetNotificationState('open');\n\n\t\tsetTimeout(() => {\n\t\t\thookOpen && hookOpen();\n\t\t}, TransitionDuration);\n\t}, [hookOpen]);\n\n\t/**\n\t * It is an accessibility anti-pattern to auto-close an interactive element.\n\t * Both the dismiss button and cta are interactive elements.\n\t */\n\tconst isInteractiveElementPresent = dismissible || cta;\n\t/**\n\t * Controls auto-close behavior of the notification\n\t */\n\tconst [autoClosed] = useAutoClose(\n\t\tshouldAutoClose && !isInteractiveElementPresent,\n\t\tautoCloseAfterMs,\n\t\tonAutoClose\n\t);\n\n\t/**\n\t * Handles logic for closing the notification\n\t */\n\tconst handleClose = React.useCallback(() => {\n\t\tsetNotificationState('close');\n\n\t\tsetTimeout(() => {\n\t\t\t// add class mrl-is--closed\n\t\t\tnotification.current?.classList.add('mrl-is--closed');\n\t\t\thookClose && hookClose();\n\t\t}, TransitionDuration);\n\t}, [hookClose]);\n\n\t/**\n\t * Toggles the open/closed state based on the state of the component\n\t */\n\tReact.useEffect(() => {\n\t\tif (notificationState === 'open' && autoClosed !== true) {\n\t\t\thandleOpen();\n\t\t} else {\n\t\t\thandleClose();\n\t\t}\n\t}, [notificationState, handleClose, handleOpen, autoClosed]);\n\n\t/**\n\t * Updates the internal state of the component when the state prop changes\n\t */\n\tReact.useEffect(() => {\n\t\tsetNotificationState(state || defaults.state);\n\t}, [state]);\n\n\t/**\n\t * Renders a custom icon or a default icon if the kind supports it.\n\t * @returns ReactElement | null\n\t */\n\tconst renderIcon = (): React.ReactElement | null => {\n\t\tconst notificationIcon = typeof customIcon === 'undefined' ? iconOptions[kind] : customIcon;\n\n\t\t// It could be undefined if the kind doesn't support a default icon.\n\t\tif (!notificationIcon) return null;\n\n\t\treturn (\n\t\t\t<div\n\t\t\t\tclassName={classNames(styles['mrl-blockNotification-icon'], 'mrl-blockNotification-icon')}\n\t\t\t>\n\t\t\t\t<MrlSvg size=\"small\" svg={notificationIcon} />\n\t\t\t</div>\n\t\t);\n\t};\n\n\tconst attributes = setAttributes(attrs, {\n\t\t'aria-hidden': (state === 'close').toString(),\n\n\t\t// @todo need to determine if we want errors to always be assertive or\n\t\t// if we want an easier ability to overwrite than the attrs object.\n\t\t'aria-live': kind === 'error' ? 'assertive' : 'polite',\n\t\trole: 'status'\n\t});\n\n\tconst allClasses = classNames(\n\t\tstyles['mrl-blockNotification'],\n\t\tclassName,\n\t\t'mrl-blockNotification',\n\t\t{\n\t\t\t[styles['mrl-blockNotification--dismissible']]: Boolean(dismissible),\n\t\t\t'mrl-is--transitioning': notificationState === 'close'\n\t\t}\n\t);\n\n\tconst closeButtonKind = React.useMemo(() => {\n\t\treturn kind === 'warning' ? 'ghost' : 'ghost-inverse';\n\t}, [kind]);\n\n\tdelete attributes.class;\n\tdelete attributes.className;\n\n\treturn (\n\t\t<div\n\t\t\t{...rest}\n\t\t\tclassName={allClasses}\n\t\t\t{...attributes}\n\t\t\tdata-kind={kind}\n\t\t\tdata-scope={scope}\n\t\t\tref={notification}\n\t\t>\n\t\t\t{renderIcon()}\n\t\t\t<div\n\t\t\t\tclassName={classNames(\n\t\t\t\t\tstyles['mrl-blockNotification-message'],\n\t\t\t\t\t'mrl-blockNotification-message'\n\t\t\t\t)}\n\t\t\t>\n\t\t\t\t{/* // to do, add configurable header based on level, when MrlText is completed */}\n\t\t\t\t{heading && (\n\t\t\t\t\t<MrlTextHeading\n\t\t\t\t\t\tclassName={classNames(\n\t\t\t\t\t\t\tstyles['mrl-blockNotification-heading'],\n\t\t\t\t\t\t\t'mrl-blockNotification-heading'\n\t\t\t\t\t\t)}\n\t\t\t\t\t\tkind=\"title\"\n\t\t\t\t\t\tsize=\"small\"\n\t\t\t\t\t\tlevel={level}\n\t\t\t\t\t\ttext={heading}\n\t\t\t\t\t/>\n\t\t\t\t)}\n\t\t\t\t{message && (\n\t\t\t\t\t<p\n\t\t\t\t\t\tclassName={classNames(\n\t\t\t\t\t\t\tstyles['mrl-blockNotification-text'],\n\t\t\t\t\t\t\t'mrl-blockNotification-text'\n\t\t\t\t\t\t)}\n\t\t\t\t\t>\n\t\t\t\t\t\t{message}\n\t\t\t\t\t</p>\n\t\t\t\t)}\n\t\t\t\t{children && <>{children}</>}\n\t\t\t</div>\n\t\t\t{cta && <div className={classNames('cta', styles['cta'])}>{cta}</div>}\n\t\t\t{dismissible && (\n\t\t\t\t<MrlIconButton\n\t\t\t\t\tattrs={{\n\t\t\t\t\t\t'data-qa': closeQa\n\t\t\t\t\t}}\n\t\t\t\t\ticon={<MrlSvg svg={close} size=\"small\" />}\n\t\t\t\t\tonClick={handleClose}\n\t\t\t\t\ttext=\"Close\"\n\t\t\t\t\tsize=\"small\"\n\t\t\t\t\tkind={closeButtonKind}\n\t\t\t\t\tstate=\"default\"\n\t\t\t\t\tposition=\"bottom\"\n\t\t\t\t\ttipAnchor=\"center\"\n\t\t\t\t\twrapperClassName={classNames(\n\t\t\t\t\t\tstyles['mrl-blockNotification-close-wrapper'],\n\t\t\t\t\t\t'mrl-blockNotification-close-wrapper'\n\t\t\t\t\t)}\n\t\t\t\t/>\n\t\t\t)}\n\t\t</div>\n\t);\n};\n"],"names":["iconOptions","error","info","success","check","warning","MrlBlockNotification","props","attrs","autoCloseAfterMs","children","className","closeQa","cta","_props$kind","kind","defaults","_props$dismissible","dismissible","heading","hookClose","hookOpen","customIcon","_props$level","level","message","onAutoClose","_props$scope","scope","_props$shouldAutoClos","shouldAutoClose","_props$state","state","rest","_objectWithoutProperties","_excluded","_React$useState","React","useState","_React$useState2","_slicedToArray","notificationState","setNotificationState","notification","useRef","handleOpen","useCallback","setTimeout","TransitionDuration","isInteractiveElementPresent","_useAutoClose","useAutoClose","_useAutoClose2","autoClosed","handleClose","_notification$current","current","classList","add","useEffect","renderIcon","notificationIcon","createElement","classNames","styles","MrlSvg","size","svg","attributes","setAttributes","toString","role","allClasses","_defineProperty","Boolean","closeButtonKind","useMemo","_extends","ref","MrlTextHeading","text","Fragment","MrlIconButton","icon","close","onClick","position","tipAnchor","wrapperClassName"],"mappings":";;;;;;;;;;;;;AAyHA;AACA;AACA;AACA,IAAMA,WAAuC,GAAG;AAC/CC,EAAAA,KAAK,EAALA,KAAK;AACLC,EAAAA,IAAI,EAAJA,IAAI;AACJC,EAAAA,OAAO,EAAEC,KAAK;AACdC,EAAAA,OAAO,EAAPA;AACD,CAAC;;AAED;AACA;AACA;AACA;AACA;IACaC,oBAAoB,GAAG,SAAvBA,oBAAoBA,CAAIC,KAAgC,EAAkB;AACtF,EAAA,IACCC,KAAK,GAmBFD,KAAK,CAnBRC,KAAK;IACLC,gBAAgB,GAkBbF,KAAK,CAlBRE,gBAAgB;IAChBC,QAAQ,GAiBLH,KAAK,CAjBRG,QAAQ;IACRC,SAAS,GAgBNJ,KAAK,CAhBRI,SAAS;IACTC,OAAO,GAeJL,KAAK,CAfRK,OAAO;IACPC,GAAG,GAcAN,KAAK,CAdRM,GAAG;IAAAC,WAAA,GAcAP,KAAK,CAbRQ,IAAI;AAAJA,IAAAA,IAAI,GAAAD,WAAA,KAAA,MAAA,GAAGE,QAAQ,CAACD,IAAI,GAAAD,WAAA;IAAAG,kBAAA,GAajBV,KAAK,CAZRW,WAAW;AAAXA,IAAAA,WAAW,GAAAD,kBAAA,KAAA,MAAA,GAAGD,QAAQ,CAACE,WAAW,GAAAD,kBAAA;IAClCE,OAAO,GAWJZ,KAAK,CAXRY,OAAO;IACPC,SAAS,GAUNb,KAAK,CAVRa,SAAS;IACTC,QAAQ,GASLd,KAAK,CATRc,QAAQ;IACRC,UAAU,GAQPf,KAAK,CARRe,UAAU;IAAAC,YAAA,GAQPhB,KAAK,CAPRiB,KAAK;AAALA,IAAAA,KAAK,GAAAD,YAAA,KAAA,MAAA,GAAGP,QAAQ,CAACQ,KAAK,GAAAD,YAAA;IACtBE,OAAO,GAMJlB,KAAK,CANRkB,OAAO;IACPC,WAAW,GAKRnB,KAAK,CALRmB,WAAW;IAAAC,YAAA,GAKRpB,KAAK,CAJRqB,KAAK;AAALA,IAAAA,KAAK,GAAAD,YAAA,KAAA,MAAA,GAAGX,QAAQ,CAACY,KAAK,GAAAD,YAAA;IAAAE,qBAAA,GAInBtB,KAAK,CAHRuB,eAAe;AAAfA,IAAAA,eAAe,GAAAD,qBAAA,KAAA,MAAA,GAAG,KAAK,GAAAA,qBAAA;IAAAE,YAAA,GAGpBxB,KAAK,CAFRyB,KAAK;AAALA,IAAAA,KAAK,GAAAD,YAAA,KAAA,MAAA,GAAGf,QAAQ,CAACgB,KAAK,GAAAD,YAAA;AACnBE,IAAAA,IAAI,GAAAC,wBAAA,CACJ3B,KAAK,EAAA4B,SAAA,CAAA;;AAET;AACD;AACA;EACC,IAAAC,eAAA,GAAkDC,KAAK,CAACC,QAAQ,CAC/DtB,QAAQ,CAACgB,KACV,CAAC;IAAAO,gBAAA,GAAAC,cAAA,CAAAJ,eAAA,EAAA,CAAA,CAAA;AAFMK,IAAAA,iBAAiB,GAAAF,gBAAA,CAAA,CAAA,CAAA;AAAEG,IAAAA,oBAAoB,GAAAH,gBAAA,CAAA,CAAA,CAAA;;AAI9C;AACD;AACA;AACC,EAAA,IAAMI,YAAY,GAAGN,KAAK,CAACO,MAAM,CAAiB,IAAI,CAAC;;AAEvD;AACD;AACA;AACC,EAAA,IAAMC,UAAU,GAAGR,KAAK,CAACS,WAAW,CAAC,YAAM;IAC1CJ,oBAAoB,CAAC,MAAM,CAAC;AAE5BK,IAAAA,UAAU,CAAC,YAAM;MAChB1B,QAAQ,IAAIA,QAAQ,EAAE;IACvB,CAAC,EAAE2B,kBAAkB,CAAC;AACvB,EAAA,CAAC,EAAE,CAAC3B,QAAQ,CAAC,CAAC;;AAEd;AACD;AACA;AACA;AACC,EAAA,IAAM4B,2BAA2B,GAAG/B,WAAW,IAAIL,GAAG;AACtD;AACD;AACA;AACC,EAAA,IAAAqC,aAAA,GAAqBC,YAAY,CAChCrB,eAAe,IAAI,CAACmB,2BAA2B,EAC/CxC,gBAAgB,EAChBiB,WACD,CAAC;IAAA0B,cAAA,GAAAZ,cAAA,CAAAU,aAAA,EAAA,CAAA,CAAA;AAJMG,IAAAA,UAAU,GAAAD,cAAA,CAAA,CAAA,CAAA;;AAMjB;AACD;AACA;AACC,EAAA,IAAME,WAAW,GAAGjB,KAAK,CAACS,WAAW,CAAC,YAAM;IAC3CJ,oBAAoB,CAAC,OAAO,CAAC;AAE7BK,IAAAA,UAAU,CAAC,YAAM;AAAA,MAAA,IAAAQ,qBAAA;AAChB;AACA,MAAA,CAAAA,qBAAA,GAAAZ,YAAY,CAACa,OAAO,MAAA,IAAA,IAAAD,qBAAA,KAAA,MAAA,GAAA,MAAA,GAApBA,qBAAA,CAAsBE,SAAS,CAACC,GAAG,CAAC,gBAAgB,CAAC;MACrDtC,SAAS,IAAIA,SAAS,EAAE;IACzB,CAAC,EAAE4B,kBAAkB,CAAC;AACvB,EAAA,CAAC,EAAE,CAAC5B,SAAS,CAAC,CAAC;;AAEf;AACD;AACA;EACCiB,KAAK,CAACsB,SAAS,CAAC,YAAM;AACrB,IAAA,IAAIlB,iBAAiB,KAAK,MAAM,IAAIY,UAAU,KAAK,IAAI,EAAE;AACxDR,MAAAA,UAAU,EAAE;AACb,IAAA,CAAC,MAAM;AACNS,MAAAA,WAAW,EAAE;AACd,IAAA;EACD,CAAC,EAAE,CAACb,iBAAiB,EAAEa,WAAW,EAAET,UAAU,EAAEQ,UAAU,CAAC,CAAC;;AAE5D;AACD;AACA;EACChB,KAAK,CAACsB,SAAS,CAAC,YAAM;AACrBjB,IAAAA,oBAAoB,CAACV,KAAK,IAAIhB,QAAQ,CAACgB,KAAK,CAAC;AAC9C,EAAA,CAAC,EAAE,CAACA,KAAK,CAAC,CAAC;;AAEX;AACD;AACA;AACA;AACC,EAAA,IAAM4B,UAAU,GAAG,SAAbA,UAAUA,GAAoC;AACnD,IAAA,IAAMC,gBAAgB,GAAG,OAAOvC,UAAU,KAAK,WAAW,GAAGtB,WAAW,CAACe,IAAI,CAAC,GAAGO,UAAU;;AAE3F;AACA,IAAA,IAAI,CAACuC,gBAAgB,EAAE,OAAO,IAAI;IAElC,oBACCxB,KAAA,CAAAyB,aAAA,CAAA,KAAA,EAAA;MACCnD,SAAS,EAAEoD,UAAU,CAACC,MAAM,CAAC,4BAA4B,CAAC,EAAE,4BAA4B;AAAE,KAAA,eAE1F3B,KAAA,CAAAyB,aAAA,CAACG,MAAM,EAAA;AAACC,MAAAA,IAAI,EAAC,OAAO;AAACC,MAAAA,GAAG,EAAEN;AAAiB,KAAE,CACzC,CAAC;EAER,CAAC;AAED,EAAA,IAAMO,UAAU,GAAGC,aAAa,CAAC7D,KAAK,EAAE;IACvC,aAAa,EAAE,CAACwB,KAAK,KAAK,OAAO,EAAEsC,QAAQ,EAAE;AAE7C;AACA;AACA,IAAA,WAAW,EAAEvD,IAAI,KAAK,OAAO,GAAG,WAAW,GAAG,QAAQ;AACtDwD,IAAAA,IAAI,EAAE;AACP,GAAC,CAAC;AAEF,EAAA,IAAMC,UAAU,GAAGT,UAAU,CAC5BC,MAAM,CAAC,uBAAuB,CAAC,EAC/BrD,SAAS,EACT,uBAAuB,EAAA8D,eAAA,CAAAA,eAAA,CAAA,EAAA,EAErBT,MAAM,CAAC,oCAAoC,CAAC,EAAGU,OAAO,CAACxD,WAAW,CAAC,CAAA,EACpE,uBAAuB,EAAEuB,iBAAiB,KAAK,OAAO,CAExD,CAAC;AAED,EAAA,IAAMkC,eAAe,GAAGtC,KAAK,CAACuC,OAAO,CAAC,YAAM;AAC3C,IAAA,OAAO7D,IAAI,KAAK,SAAS,GAAG,OAAO,GAAG,eAAe;AACtD,EAAA,CAAC,EAAE,CAACA,IAAI,CAAC,CAAC;AAEV,EAAA,OAAOqD,UAAU,CAAA,OAAA,CAAM;EACvB,OAAOA,UAAU,CAACzD,SAAS;AAE3B,EAAA,oBACC0B,KAAA,CAAAyB,aAAA,CAAA,KAAA,EAAAe,QAAA,KACK5C,IAAI,EAAA;AACRtB,IAAAA,SAAS,EAAE6D;AAAW,GAAA,EAClBJ,UAAU,EAAA;AACd,IAAA,WAAA,EAAWrD,IAAK;AAChB,IAAA,YAAA,EAAYa,KAAM;AAClBkD,IAAAA,GAAG,EAAEnC;AAAa,GAAA,CAAA,EAEjBiB,UAAU,EAAE,eACbvB,KAAA,CAAAyB,aAAA,CAAA,KAAA,EAAA;IACCnD,SAAS,EAAEoD,UAAU,CACpBC,MAAM,CAAC,+BAA+B,CAAC,EACvC,+BACD;AAAE,GAAA,EAGD7C,OAAO,iBACPkB,KAAA,CAAAyB,aAAA,CAACiB,cAAc,EAAA;IACdpE,SAAS,EAAEoD,UAAU,CACpBC,MAAM,CAAC,+BAA+B,CAAC,EACvC,+BACD,CAAE;AACFjD,IAAAA,IAAI,EAAC,OAAO;AACZmD,IAAAA,IAAI,EAAC,OAAO;AACZ1C,IAAAA,KAAK,EAAEA,KAAM;AACbwD,IAAAA,IAAI,EAAE7D;AAAQ,GACd,CACD,EACAM,OAAO,iBACPY,KAAA,CAAAyB,aAAA,CAAA,GAAA,EAAA;IACCnD,SAAS,EAAEoD,UAAU,CACpBC,MAAM,CAAC,4BAA4B,CAAC,EACpC,4BACD;GAAE,EAEDvC,OACC,CACH,EACAf,QAAQ,iBAAI2B,KAAA,CAAAyB,aAAA,CAAAzB,KAAA,CAAA4C,QAAA,EAAA,IAAA,EAAGvE,QAAW,CACvB,CAAC,EACLG,GAAG,iBAAIwB,KAAA,CAAAyB,aAAA,CAAA,KAAA,EAAA;IAAKnD,SAAS,EAAEoD,UAAU,CAAC,KAAK,EAAEC,MAAM,CAAC,KAAK,CAAC;GAAE,EAAEnD,GAAS,CAAC,EACpEK,WAAW,iBACXmB,KAAA,CAAAyB,aAAA,CAACoB,aAAa,EAAA;AACb1E,IAAAA,KAAK,EAAE;AACN,MAAA,SAAS,EAAEI;KACV;AACFuE,IAAAA,IAAI,eAAE9C,KAAA,CAAAyB,aAAA,CAACG,MAAM,EAAA;AAACE,MAAAA,GAAG,EAAEiB,KAAM;AAAClB,MAAAA,IAAI,EAAC;AAAO,KAAE,CAAE;AAC1CmB,IAAAA,OAAO,EAAE/B,WAAY;AACrB0B,IAAAA,IAAI,EAAC,OAAO;AACZd,IAAAA,IAAI,EAAC,OAAO;AACZnD,IAAAA,IAAI,EAAE4D,eAAgB;AACtB3C,IAAAA,KAAK,EAAC,SAAS;AACfsD,IAAAA,QAAQ,EAAC,QAAQ;AACjBC,IAAAA,SAAS,EAAC,QAAQ;IAClBC,gBAAgB,EAAEzB,UAAU,CAC3BC,MAAM,CAAC,qCAAqC,CAAC,EAC7C,qCACD;AAAE,GACF,CAEE,CAAC;AAER;;;;"}
+{"version":3,"file":"MrlBlockNotification.js","sources":["../../../../../src/components/notification/MrlBlockNotification/MrlBlockNotification.tsx"],"sourcesContent":["import * as React from 'react';\nimport { check, close, error, info, warning } from '@muraldevkit/ds-icons';\nimport classNames from 'classnames';\nimport { AttrsObject, setAttributes } from '../../../utils';\nimport {\n\tdefaults,\n\tNotificationKind,\n\tNotificationScope,\n\tNotificationState,\n\tNotificationLevel,\n\tTransitionDuration\n} from '../constants';\nimport { DSIconType, MrlIconButton, MrlSvg, MrlTextHeading } from '../..';\n\nimport styles from './MrlBlockNotification.module.scss';\nimport './MrlBlockNotification.global.scss';\nimport { useAutoClose } from '../../../hooks/useAutoClose';\n\nexport interface MrlBlockNotificationProps {\n\t/**\n\t * Block Notification Wrapper Class\n\t */\n\tclassName?: string;\n\n\t/**\n\t * QA attribute for close button to allow tests to find the element easier\n\t */\n\tcloseQa?: string;\n\n\t/**\n\t * Children\n\t *\n\t * IMPORTANT! — Make sure to set shouldAutoClose: false if children of this component\n\t * contain interactive elements. Autoclosing interactive elements is an accessibility\n\t * anti-pattern and should be avoided.\n\t */\n\tchildren?: React.ReactNode;\n\n\t/**\n\t * Adds CTA button to the notification\n\t */\n\tcta?: React.ReactElement;\n\n\t/**\n\t * The kind of notification to display.\n\t *\n\t * Examples: warning, error, info, success\n\t */\n\tkind?: NotificationKind;\n\n\t/**\n\t * A custom DS icon.\n\t */\n\tcustomIcon?: DSIconType;\n\n\t/**\n\t * Sets header text for notification\n\t */\n\theading?: string;\n\n\t/**\n\t * Adds a close button to notificaiton if true\n\t */\n\tdismissible?: boolean;\n\n\t/**\n\t * Sets the primary content for the notification\n\t */\n\tmessage?: React.ReactNode;\n\n\t/**\n\t * Sets the scope of the notification\n\t */\n\tscope?: NotificationScope;\n\n\t/**\n\t * Open/Close state of the notification\n\t */\n\tstate?: NotificationState;\n\n\t/**\n\t * Open notification callback\n\t * @returns {void}\n\t */\n\thookOpen?: () => void;\n\n\t/**\n\t * Close notification callback\n\t * @returns {void}\n\t */\n\thookClose?: () => void;\n\n\t/**\n\t * Sets the header level\n\t * Example output: h1, h2, h3, h4\n\t */\n\tlevel?: NotificationLevel;\n\n\t/**\n\t * Attributes that are applied to the component during the initial render.\n\t *\n\t * Example usage: html attributes, custom data attributes (data-qa), aria\n\t */\n\tattrs?: AttrsObject;\n\n\t/**\n\t * When false prevents automated close (e.g. can be used to prevent auto-dismissal of interactive elements, an accessibility anti-pattern) (see useAutoClose)\n\t */\n\tshouldAutoClose?: Parameters<useAutoClose>[0];\n\n\t/**\n\t * Delay in milliseconds before the component closes (see useAutoClose)\n\t */\n\tautoCloseAfterMs?: Parameters<useAutoClose>[1];\n\n\t/**\n\t * Callback to be called when component closes (see useAutoClose)\n\t */\n\tonAutoClose?: Parameters<useAutoClose>[2];\n}\n\n/**\n * Configuration options for icons\n */\nconst iconOptions: Record<string, DSIconType> = {\n\terror,\n\tinfo,\n\tsuccess: check,\n\twarning\n};\n\n/**\n * Block Notification Component\n * @param props - Component props\n * @returns {Element} Block Notification\n */\nexport const MrlBlockNotification = (props: MrlBlockNotificationProps): JSX.Element => {\n\tconst {\n\t\tattrs,\n\t\tautoCloseAfterMs,\n\t\tchildren,\n\t\tclassName,\n\t\tcloseQa,\n\t\tcta,\n\t\tkind = defaults.kind,\n\t\tdismissible = defaults.dismissible,\n\t\theading,\n\t\thookClose,\n\t\thookOpen,\n\t\tcustomIcon,\n\t\tlevel = defaults.level,\n\t\tmessage,\n\t\tonAutoClose,\n\t\tscope = defaults.scope,\n\t\tshouldAutoClose = false,\n\t\tstate = defaults.state,\n\t\t...rest\n\t} = props;\n\n\t/**\n\t * Sets the open/close state of the notification\n\t */\n\tconst [notificationState, setNotificationState] = React.useState<NotificationState>(\n\t\tdefaults.state\n\t);\n\n\t/**\n\t * Reference to the notification\n\t */\n\tconst notification = React.useRef<HTMLDivElement>(null);\n\n\t/**\n\t * Handles logic for opening the notification\n\t */\n\tconst handleOpen = React.useCallback(() => {\n\t\tsetNotificationState('open');\n\n\t\tsetTimeout(() => {\n\t\t\thookOpen && hookOpen();\n\t\t}, TransitionDuration);\n\t}, [hookOpen]);\n\n\t/**\n\t * It is an accessibility anti-pattern to auto-close an interactive element.\n\t * Both the dismiss button and cta are interactive elements.\n\t */\n\tconst isInteractiveElementPresent = dismissible || cta;\n\t/**\n\t * Controls auto-close behavior of the notification\n\t */\n\tconst [autoClosed] = useAutoClose(\n\t\tshouldAutoClose && !isInteractiveElementPresent,\n\t\tautoCloseAfterMs,\n\t\tonAutoClose\n\t);\n\n\t/**\n\t * Handles logic for closing the notification\n\t */\n\tconst handleClose = React.useCallback(() => {\n\t\tsetNotificationState('close');\n\n\t\tsetTimeout(() => {\n\t\t\t// add class mrl-is--closed\n\t\t\tnotification.current?.classList.add('mrl-is--closed');\n\t\t\thookClose && hookClose();\n\t\t}, TransitionDuration);\n\t}, [hookClose]);\n\n\t/**\n\t * Toggles the open/closed state based on the state of the component\n\t */\n\tReact.useEffect(() => {\n\t\tif (notificationState === 'open' && autoClosed !== true) {\n\t\t\thandleOpen();\n\t\t} else {\n\t\t\thandleClose();\n\t\t}\n\t}, [notificationState, handleClose, handleOpen, autoClosed]);\n\n\t/**\n\t * Updates the internal state of the component when the state prop changes\n\t */\n\tReact.useEffect(() => {\n\t\tsetNotificationState(state || defaults.state);\n\t}, [state]);\n\n\t/**\n\t * Renders a custom icon or a default icon if the kind supports it.\n\t * @returns ReactElement | null\n\t */\n\tconst renderIcon = (): React.ReactElement | null => {\n\t\tconst notificationIcon = typeof customIcon === 'undefined' ? iconOptions[kind] : customIcon;\n\n\t\t// It could be undefined if the kind doesn't support a default icon.\n\t\tif (!notificationIcon) return null;\n\n\t\treturn (\n\t\t\t<div\n\t\t\t\tclassName={classNames(styles['mrl-blockNotification-icon'], 'mrl-blockNotification-icon')}\n\t\t\t>\n\t\t\t\t<MrlSvg size=\"small\" svg={notificationIcon} />\n\t\t\t</div>\n\t\t);\n\t};\n\n\tconst attributes = setAttributes(attrs, {\n\t\t'aria-hidden': (state === 'close').toString(),\n\n\t\t// @todo need to determine if we want errors to always be assertive or\n\t\t// if we want an easier ability to overwrite than the attrs object.\n\t\t'aria-live': kind === 'error' ? 'assertive' : 'polite',\n\t\trole: 'status'\n\t});\n\n\tconst allClasses = classNames(\n\t\tstyles['mrl-blockNotification'],\n\t\tclassName,\n\t\t'mrl-blockNotification',\n\t\t{\n\t\t\t[styles['mrl-blockNotification--dismissible']]: Boolean(dismissible),\n\t\t\t'mrl-is--transitioning': notificationState === 'close'\n\t\t}\n\t);\n\n\tconst closeButtonKind = React.useMemo(() => {\n\t\treturn kind === 'warning' ? 'ghost' : 'ghost-inverse';\n\t}, [kind]);\n\n\tdelete attributes.class;\n\tdelete attributes.className;\n\n\treturn (\n\t\t<div\n\t\t\t{...rest}\n\t\t\tclassName={allClasses}\n\t\t\t{...attributes}\n\t\t\tdata-kind={kind}\n\t\t\tdata-scope={scope}\n\t\t\tref={notification}\n\t\t>\n\t\t\t{renderIcon()}\n\t\t\t<div\n\t\t\t\tclassName={classNames(\n\t\t\t\t\tstyles['mrl-blockNotification-message'],\n\t\t\t\t\t'mrl-blockNotification-message'\n\t\t\t\t)}\n\t\t\t>\n\t\t\t\t{/* // to do, add configurable header based on level, when MrlText is completed */}\n\t\t\t\t{heading && (\n\t\t\t\t\t<MrlTextHeading\n\t\t\t\t\t\tclassName={classNames(\n\t\t\t\t\t\t\tstyles['mrl-blockNotification-heading'],\n\t\t\t\t\t\t\t'mrl-blockNotification-heading'\n\t\t\t\t\t\t)}\n\t\t\t\t\t\tkind=\"title\"\n\t\t\t\t\t\tsize=\"small\"\n\t\t\t\t\t\tlevel={level}\n\t\t\t\t\t\ttext={heading}\n\t\t\t\t\t/>\n\t\t\t\t)}\n\t\t\t\t{message && (\n\t\t\t\t\t<p\n\t\t\t\t\t\tclassName={classNames(\n\t\t\t\t\t\t\tstyles['mrl-blockNotification-text'],\n\t\t\t\t\t\t\t'mrl-blockNotification-text'\n\t\t\t\t\t\t)}\n\t\t\t\t\t>\n\t\t\t\t\t\t{message}\n\t\t\t\t\t</p>\n\t\t\t\t)}\n\t\t\t\t{children && <>{children}</>}\n\t\t\t</div>\n\t\t\t{cta && <div className={classNames('cta', styles['cta'])}>{cta}</div>}\n\t\t\t{dismissible && (\n\t\t\t\t<MrlIconButton\n\t\t\t\t\tattrs={{\n\t\t\t\t\t\t'data-qa': closeQa\n\t\t\t\t\t}}\n\t\t\t\t\ticon={<MrlSvg svg={close} size=\"small\" />}\n\t\t\t\t\tonClick={handleClose}\n\t\t\t\t\ttext=\"Close\"\n\t\t\t\t\tsize=\"small\"\n\t\t\t\t\tkind={closeButtonKind}\n\t\t\t\t\tstate=\"default\"\n\t\t\t\t\tposition=\"bottom\"\n\t\t\t\t\ttipAnchor=\"center\"\n\t\t\t\t\twrapperClassName={classNames(\n\t\t\t\t\t\tstyles['mrl-blockNotification-close-wrapper'],\n\t\t\t\t\t\t'mrl-blockNotification-close-wrapper'\n\t\t\t\t\t)}\n\t\t\t\t/>\n\t\t\t)}\n\t\t</div>\n\t);\n};\n"],"names":["iconOptions","error","info","success","check","warning","MrlBlockNotification","props","attrs","autoCloseAfterMs","children","className","closeQa","cta","_props$kind","kind","defaults","_props$dismissible","dismissible","heading","hookClose","hookOpen","customIcon","_props$level","level","message","onAutoClose","_props$scope","scope","_props$shouldAutoClos","shouldAutoClose","_props$state","state","rest","_objectWithoutProperties","_excluded","_React$useState","React","useState","_React$useState2","_slicedToArray","notificationState","setNotificationState","notification","useRef","handleOpen","useCallback","setTimeout","TransitionDuration","isInteractiveElementPresent","_useAutoClose","useAutoClose","_useAutoClose2","autoClosed","handleClose","_notification$current","current","classList","add","useEffect","renderIcon","notificationIcon","createElement","classNames","styles","MrlSvg","size","svg","attributes","setAttributes","toString","role","allClasses","Boolean","closeButtonKind","useMemo","class","_extends","ref","MrlTextHeading","text","Fragment","MrlIconButton","icon","close","onClick","position","tipAnchor","wrapperClassName"],"mappings":"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"}

package/dist/esm/components/notification/MrlInlineMessage/MrlInlineMessage.js

@@ -1,4 +1,4 @@
-import { objectWithoutProperties as _objectWithoutProperties, defineProperty as _defineProperty, extends as _extends } from '../../../_virtual/_rollupPluginBabelHelpers.js';
+import { objectWithoutProperties as _objectWithoutProperties, extends as _extends } from '../../../_virtual/_rollupPluginBabelHelpers.js';
 import * as React from 'react';
 import { check, warning, info, error } from '@muraldevkit/ds-icons';
 import classnames from 'classnames';
@@ -6,7 +6,7 @@ import styles from './MrlInlineMessage.module.scss.js';
 import { MrlSvg } from '../../svg/MrlSvg/MrlSvg.js';
 
 var _excluded = ["children", "customIcon", "id", "kind", "message", "data-qa"];
-var getIcon = function getIcon(kind, customIcon) {
+var getIcon = (kind, customIcon) => {
   switch (kind) {
     case 'error':
       return error;
@@ -20,7 +20,7 @@ var getIcon = function getIcon(kind, customIcon) {
       return customIcon ? customIcon : undefined;
   }
 };
-var renderIcon = function renderIcon(icon, iconClasses) {
+var renderIcon = (icon, iconClasses) => {
   if (icon) {
     return /*#__PURE__*/React.createElement("span", {
       className: iconClasses
@@ -36,7 +36,7 @@ var renderIcon = function renderIcon(icon, iconClasses) {
  * @param props - The properties of the component.
  * @returns A React component.
  */
-var MrlInlineMessage = function MrlInlineMessage(_ref) {
+var MrlInlineMessage = _ref => {
   var children = _ref.children,
     customIcon = _ref.customIcon,
     id = _ref.id,
@@ -47,7 +47,13 @@ var MrlInlineMessage = function MrlInlineMessage(_ref) {
     rest = _objectWithoutProperties(_ref, _excluded);
   var icon = getIcon(kind, customIcon);
   var iconClasses = classnames(styles['MrlInlineMessage-icon']);
-  var notificationClasses = classnames(styles['MrlInlineMessage'], 'MrlInlineMessage', _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, styles.error, kind === 'error'), styles.information, kind === 'info'), styles.success, kind === 'success'), styles.warning, kind === 'warning'), styles.helper, kind === 'helper'));
+  var notificationClasses = classnames(styles['MrlInlineMessage'], 'MrlInlineMessage', {
+    [styles.error]: kind === 'error',
+    [styles.information]: kind === 'info',
+    [styles.success]: kind === 'success',
+    [styles.warning]: kind === 'warning',
+    [styles.helper]: kind === 'helper'
+  });
   return /*#__PURE__*/React.createElement("span", _extends({}, rest, {
     className: notificationClasses,
     "data-qa": qa,

package/dist/esm/components/notification/MrlInlineMessage/MrlInlineMessage.js.map

@@ -1 +1 @@
-{"version":3,"file":"MrlInlineMessage.js","sources":["../../../../../src/components/notification/MrlInlineMessage/MrlInlineMessage.tsx"],"sourcesContent":["import * as React from 'react';\nimport { error, info, warning, check } from '@muraldevkit/ds-icons';\nimport { DSIconType, MrlSvg } from '../../svg';\nimport classNames from 'classnames';\nimport styles from './MrlInlineMessage.module.scss';\n\nexport type InlineMessageKind = 'error' | 'info' | 'warning' | 'success' | 'helper';\n\nexport interface MrlInlineMessageProps {\n\t/**\n\t * A custom DS icon which is only applied if the alert is not an error, info, or warning type\n\t */\n\tcustomIcon?: DSIconType;\n\n\t/**\n\t * The id of the notification.\n\t *\n\t * Used to link the notification to a form field using aria-describedby.\n\t */\n\tid: string;\n\n\t/**\n\t * Choose the kind of notification to display.\n\t *\n\t * Accepted values: error, info, warning, success, helper\n\t */\n\tkind: InlineMessageKind;\n\n\t/**\n\t * The text to be displayed in the notification. If not provided, children will be used.\n\t */\n\tmessage?: string;\n\n\t/**\n\t * Children to be rendered within the component, it will be used as the message if message is not provided.\n\t */\n\tchildren?: React.ReactNode;\n\n\t/**\n\t * The data-qa attribute for testing purposes.\n\t */\n\t['data-qa']?: string;\n}\n\nconst getIcon = (kind: InlineMessageKind, customIcon?: DSIconType): DSIconType | undefined => {\n\tswitch (kind) {\n\t\tcase 'error':\n\t\t\treturn error;\n\t\tcase 'info':\n\t\t\treturn info;\n\t\tcase 'warning':\n\t\t\treturn warning;\n\t\tcase 'success':\n\t\t\treturn check;\n\t\tdefault:\n\t\t\treturn customIcon ? customIcon : undefined;\n\t}\n};\n\nconst renderIcon = (\n\ticon: DSIconType | undefined,\n\ticonClasses: string\n): React.ReactElement | undefined => {\n\tif (icon) {\n\t\treturn (\n\t\t\t<span className={iconClasses}>\n\t\t\t\t<MrlSvg size=\"auto\" svg={icon} />\n\t\t\t</span>\n\t\t);\n\t}\n};\n\n/**\n * MrlInlineMessage is a notification component that can be used to display messages to the user.\n * @param props - The properties of the component.\n * @returns A React component.\n */\nexport const MrlInlineMessage = ({\n\tchildren,\n\tcustomIcon,\n\tid,\n\tkind,\n\tmessage,\n\t['data-qa']: qa = 'mrl-inline-notification',\n\t...rest\n}: MrlInlineMessageProps): React.ReactElement => {\n\tconst icon = getIcon(kind, customIcon);\n\tconst iconClasses = classNames(styles['MrlInlineMessage-icon']);\n\n\tconst notificationClasses = classNames(styles['MrlInlineMessage'], 'MrlInlineMessage', {\n\t\t[styles.error]: kind === 'error',\n\t\t[styles.information]: kind === 'info',\n\t\t[styles.success]: kind === 'success',\n\t\t[styles.warning]: kind === 'warning',\n\t\t[styles.helper]: kind === 'helper'\n\t});\n\n\treturn (\n\t\t<span {...rest} className={notificationClasses} data-qa={qa} id={id}>\n\t\t\t{renderIcon(icon, iconClasses)}\n\t\t\t<span className=\"MrlInlineMessage-message\">\n\t\t\t\t{typeof message !== 'undefined' ? message : children}\n\t\t\t</span>\n\t\t</span>\n\t);\n};\n"],"names":["getIcon","kind","customIcon","error","info","warning","check","undefined","renderIcon","icon","iconClasses","React","createElement","className","MrlSvg","size","svg","MrlInlineMessage","_ref","children","id","message","_ref$dataQa","qa","rest","_objectWithoutProperties","_excluded","classNames","styles","notificationClasses","_defineProperty","information","success","helper","_extends"],"mappings":";;;;;;;;AA4CA,IAAMA,OAAO,GAAG,SAAVA,OAAOA,CAAIC,IAAuB,EAAEC,UAAuB,EAA6B;AAC7F,EAAA,QAAQD,IAAI;AACX,IAAA,KAAK,OAAO;AACX,MAAA,OAAOE,KAAK;AACb,IAAA,KAAK,MAAM;AACV,MAAA,OAAOC,IAAI;AACZ,IAAA,KAAK,SAAS;AACb,MAAA,OAAOC,OAAO;AACf,IAAA,KAAK,SAAS;AACb,MAAA,OAAOC,KAAK;AACb,IAAA;AACC,MAAA,OAAOJ,UAAU,GAAGA,UAAU,GAAGK,SAAS;AAC5C;AACD,CAAC;AAED,IAAMC,UAAU,GAAG,SAAbA,UAAUA,CACfC,IAA4B,EAC5BC,WAAmB,EACiB;AACpC,EAAA,IAAID,IAAI,EAAE;IACT,oBACCE,KAAA,CAAAC,aAAA,CAAA,MAAA,EAAA;AAAMC,MAAAA,SAAS,EAAEH;AAAY,KAAA,eAC5BC,KAAA,CAAAC,aAAA,CAACE,MAAM,EAAA;AAACC,MAAAA,IAAI,EAAC,MAAM;AAACC,MAAAA,GAAG,EAAEP;AAAK,KAAE,CAC3B,CAAC;AAET,EAAA;AACD,CAAC;;AAED;AACA;AACA;AACA;AACA;IACaQ,gBAAgB,GAAG,SAAnBA,gBAAgBA,CAAAC,IAAA,EAQoB;AAAA,EAAA,IAPhDC,QAAQ,GAAAD,IAAA,CAARC,QAAQ;IACRjB,UAAU,GAAAgB,IAAA,CAAVhB,UAAU;IACVkB,EAAE,GAAAF,IAAA,CAAFE,EAAE;IACFnB,IAAI,GAAAiB,IAAA,CAAJjB,IAAI;IACJoB,OAAO,GAAAH,IAAA,CAAPG,OAAO;IAAAC,WAAA,GAAAJ,IAAA,CACN,SAAS,CAAA;AAAGK,IAAAA,EAAE,GAAAD,WAAA,KAAA,MAAA,GAAG,yBAAyB,GAAAA,WAAA;AACxCE,IAAAA,IAAI,GAAAC,wBAAA,CAAAP,IAAA,EAAAQ,SAAA,CAAA;AAEP,EAAA,IAAMjB,IAAI,GAAGT,OAAO,CAACC,IAAI,EAAEC,UAAU,CAAC;EACtC,IAAMQ,WAAW,GAAGiB,UAAU,CAACC,MAAM,CAAC,uBAAuB,CAAC,CAAC;AAE/D,EAAA,IAAMC,mBAAmB,GAAGF,UAAU,CAACC,MAAM,CAAC,kBAAkB,CAAC,EAAE,kBAAkB,EAAAE,eAAA,CAAAA,eAAA,CAAAA,eAAA,CAAAA,eAAA,CAAAA,eAAA,CAAA,EAAA,EACnFF,MAAM,CAACzB,KAAK,EAAGF,IAAI,KAAK,OAAO,CAAA,EAC/B2B,MAAM,CAACG,WAAW,EAAG9B,IAAI,KAAK,MAAM,CAAA,EACpC2B,MAAM,CAACI,OAAO,EAAG/B,IAAI,KAAK,SAAS,CAAA,EACnC2B,MAAM,CAACvB,OAAO,EAAGJ,IAAI,KAAK,SAAS,CAAA,EACnC2B,MAAM,CAACK,MAAM,EAAGhC,IAAI,KAAK,QAAQ,CAClC,CAAC;AAEF,EAAA,oBACCU,KAAA,CAAAC,aAAA,CAAA,MAAA,EAAAsB,QAAA,KAAUV,IAAI,EAAA;AAAEX,IAAAA,SAAS,EAAEgB,mBAAoB;AAAC,IAAA,SAAA,EAASN,EAAG;AAACH,IAAAA,EAAE,EAAEA;GAAG,CAAA,EAClEZ,UAAU,CAACC,IAAI,EAAEC,WAAW,CAAC,eAC9BC,KAAA,CAAAC,aAAA,CAAA,MAAA,EAAA;AAAMC,IAAAA,SAAS,EAAC;GAA0B,EACxC,OAAOQ,OAAO,KAAK,WAAW,GAAGA,OAAO,GAAGF,QACvC,CACD,CAAC;AAET;;;;"}
+{"version":3,"file":"MrlInlineMessage.js","sources":["../../../../../src/components/notification/MrlInlineMessage/MrlInlineMessage.tsx"],"sourcesContent":["import * as React from 'react';\nimport { error, info, warning, check } from '@muraldevkit/ds-icons';\nimport { DSIconType, MrlSvg } from '../../svg';\nimport classNames from 'classnames';\nimport styles from './MrlInlineMessage.module.scss';\n\nexport type InlineMessageKind = 'error' | 'info' | 'warning' | 'success' | 'helper';\n\nexport interface MrlInlineMessageProps {\n\t/**\n\t * A custom DS icon which is only applied if the alert is not an error, info, or warning type\n\t */\n\tcustomIcon?: DSIconType;\n\n\t/**\n\t * The id of the notification.\n\t *\n\t * Used to link the notification to a form field using aria-describedby.\n\t */\n\tid: string;\n\n\t/**\n\t * Choose the kind of notification to display.\n\t *\n\t * Accepted values: error, info, warning, success, helper\n\t */\n\tkind: InlineMessageKind;\n\n\t/**\n\t * The text to be displayed in the notification. If not provided, children will be used.\n\t */\n\tmessage?: string;\n\n\t/**\n\t * Children to be rendered within the component, it will be used as the message if message is not provided.\n\t */\n\tchildren?: React.ReactNode;\n\n\t/**\n\t * The data-qa attribute for testing purposes.\n\t */\n\t['data-qa']?: string;\n}\n\nconst getIcon = (kind: InlineMessageKind, customIcon?: DSIconType): DSIconType | undefined => {\n\tswitch (kind) {\n\t\tcase 'error':\n\t\t\treturn error;\n\t\tcase 'info':\n\t\t\treturn info;\n\t\tcase 'warning':\n\t\t\treturn warning;\n\t\tcase 'success':\n\t\t\treturn check;\n\t\tdefault:\n\t\t\treturn customIcon ? customIcon : undefined;\n\t}\n};\n\nconst renderIcon = (\n\ticon: DSIconType | undefined,\n\ticonClasses: string\n): React.ReactElement | undefined => {\n\tif (icon) {\n\t\treturn (\n\t\t\t<span className={iconClasses}>\n\t\t\t\t<MrlSvg size=\"auto\" svg={icon} />\n\t\t\t</span>\n\t\t);\n\t}\n};\n\n/**\n * MrlInlineMessage is a notification component that can be used to display messages to the user.\n * @param props - The properties of the component.\n * @returns A React component.\n */\nexport const MrlInlineMessage = ({\n\tchildren,\n\tcustomIcon,\n\tid,\n\tkind,\n\tmessage,\n\t['data-qa']: qa = 'mrl-inline-notification',\n\t...rest\n}: MrlInlineMessageProps): React.ReactElement => {\n\tconst icon = getIcon(kind, customIcon);\n\tconst iconClasses = classNames(styles['MrlInlineMessage-icon']);\n\n\tconst notificationClasses = classNames(styles['MrlInlineMessage'], 'MrlInlineMessage', {\n\t\t[styles.error]: kind === 'error',\n\t\t[styles.information]: kind === 'info',\n\t\t[styles.success]: kind === 'success',\n\t\t[styles.warning]: kind === 'warning',\n\t\t[styles.helper]: kind === 'helper'\n\t});\n\n\treturn (\n\t\t<span {...rest} className={notificationClasses} data-qa={qa} id={id}>\n\t\t\t{renderIcon(icon, iconClasses)}\n\t\t\t<span className=\"MrlInlineMessage-message\">\n\t\t\t\t{typeof message !== 'undefined' ? message : children}\n\t\t\t</span>\n\t\t</span>\n\t);\n};\n"],"names":["getIcon","kind","customIcon","error","info","warning","check","undefined","renderIcon","icon","iconClasses","React","createElement","className","MrlSvg","size","svg","MrlInlineMessage","_ref","children","id","message","_ref$dataQa","qa","rest","_objectWithoutProperties","_excluded","classNames","styles","notificationClasses","information","success","helper","_extends"],"mappings":";;;;;;;;AA4CA,IAAMA,OAAO,GAAGA,CAACC,IAAuB,EAAEC,UAAuB,KAA6B;AAC7F,EAAA,QAAQD,IAAI;AACX,IAAA,KAAK,OAAO;AACX,MAAA,OAAOE,KAAK;AACb,IAAA,KAAK,MAAM;AACV,MAAA,OAAOC,IAAI;AACZ,IAAA,KAAK,SAAS;AACb,MAAA,OAAOC,OAAO;AACf,IAAA,KAAK,SAAS;AACb,MAAA,OAAOC,KAAK;AACb,IAAA;AACC,MAAA,OAAOJ,UAAU,GAAGA,UAAU,GAAGK,SAAS;AAC5C;AACD,CAAC;AAED,IAAMC,UAAU,GAAGA,CAClBC,IAA4B,EAC5BC,WAAmB,KACiB;AACpC,EAAA,IAAID,IAAI,EAAE;IACT,oBACCE,KAAA,CAAAC,aAAA,CAAA,MAAA,EAAA;AAAMC,MAAAA,SAAS,EAAEH;AAAY,KAAA,eAC5BC,KAAA,CAAAC,aAAA,CAACE,MAAM,EAAA;AAACC,MAAAA,IAAI,EAAC,MAAM;AAACC,MAAAA,GAAG,EAAEP;AAAK,KAAE,CAC3B,CAAC;AAET,EAAA;AACD,CAAC;;AAED;AACA;AACA;AACA;AACA;AACO,IAAMQ,gBAAgB,GAAGC,IAAA,IAQiB;AAAA,EAAA,IAPhDC,QAAQ,GAAAD,IAAA,CAARC,QAAQ;IACRjB,UAAU,GAAAgB,IAAA,CAAVhB,UAAU;IACVkB,EAAE,GAAAF,IAAA,CAAFE,EAAE;IACFnB,IAAI,GAAAiB,IAAA,CAAJjB,IAAI;IACJoB,OAAO,GAAAH,IAAA,CAAPG,OAAO;IAAAC,WAAA,GAAAJ,IAAA,CACN,SAAS,CAAA;AAAGK,IAAAA,EAAE,GAAAD,WAAA,KAAA,MAAA,GAAG,yBAAyB,GAAAA,WAAA;AACxCE,IAAAA,IAAI,GAAAC,wBAAA,CAAAP,IAAA,EAAAQ,SAAA,CAAA;AAEP,EAAA,IAAMjB,IAAI,GAAGT,OAAO,CAACC,IAAI,EAAEC,UAAU,CAAC;EACtC,IAAMQ,WAAW,GAAGiB,UAAU,CAACC,MAAM,CAAC,uBAAuB,CAAC,CAAC;EAE/D,IAAMC,mBAAmB,GAAGF,UAAU,CAACC,MAAM,CAAC,kBAAkB,CAAC,EAAE,kBAAkB,EAAE;AACtF,IAAA,CAACA,MAAM,CAACzB,KAAK,GAAGF,IAAI,KAAK,OAAO;AAChC,IAAA,CAAC2B,MAAM,CAACE,WAAW,GAAG7B,IAAI,KAAK,MAAM;AACrC,IAAA,CAAC2B,MAAM,CAACG,OAAO,GAAG9B,IAAI,KAAK,SAAS;AACpC,IAAA,CAAC2B,MAAM,CAACvB,OAAO,GAAGJ,IAAI,KAAK,SAAS;AACpC,IAAA,CAAC2B,MAAM,CAACI,MAAM,GAAG/B,IAAI,KAAK;AAC3B,GAAC,CAAC;AAEF,EAAA,oBACCU,KAAA,CAAAC,aAAA,CAAA,MAAA,EAAAqB,QAAA,KAAUT,IAAI,EAAA;AAAEX,IAAAA,SAAS,EAAEgB,mBAAoB;AAAC,IAAA,SAAA,EAASN,EAAG;AAACH,IAAAA,EAAE,EAAEA;GAAG,CAAA,EAClEZ,UAAU,CAACC,IAAI,EAAEC,WAAW,CAAC,eAC9BC,KAAA,CAAAC,aAAA,CAAA,MAAA,EAAA;AAAMC,IAAAA,SAAS,EAAC;GAA0B,EACxC,OAAOQ,OAAO,KAAK,WAAW,GAAGA,OAAO,GAAGF,QACvC,CACD,CAAC;AAET;;;;"}

package/dist/esm/components/notification/MrlToast/MrlToast.js

@@ -1,4 +1,4 @@
-import { objectWithoutProperties as _objectWithoutProperties, slicedToArray as _slicedToArray, defineProperty as _defineProperty, extends as _extends } from '../../../_virtual/_rollupPluginBabelHelpers.js';
+import { objectWithoutProperties as _objectWithoutProperties, slicedToArray as _slicedToArray, extends as _extends } from '../../../_virtual/_rollupPluginBabelHelpers.js';
 import * as React from 'react';
 import { warning, check, modePrivate, info, error, lock, close } from '@muraldevkit/ds-icons';
 import { stickyTextColor } from '@tactivos/mural-shared/lib/colors';
@@ -17,7 +17,7 @@ var _excluded = ["data-qa", "autoClose", "avatar", "backgroundColor", "className
  * @param {MrlToastProps} props - The props for the MrlToast component.
  * @returns {React.ReactElement} The MrlToast component.
  */
-var MrlToast = function MrlToast(_ref) {
+var MrlToast = _ref => {
   var _ref$dataQa = _ref['data-qa'],
     qa = _ref$dataQa === void 0 ? 'toast-notification' : _ref$dataQa,
     _ref$autoClose = _ref.autoClose,
@@ -53,27 +53,32 @@ var MrlToast = function MrlToast(_ref) {
     _useAutoClose2 = _slicedToArray(_useAutoClose, 2),
     closed = _useAutoClose2[0],
     setClosed = _useAutoClose2[1];
-  var handleClose = function handleClose() {
+  var handleClose = () => {
     setClosed(true);
 
     // Slightly delay the onClose callback to allow the toast to animate out.
     // This will prevent the toast from disappearing abruptly depending on how
     // it is implemented within the application
-    setTimeout(function () {
+    setTimeout(() => {
       if (onClose) onClose();
     }, 500);
   };
   var DEFAULT_ICONS = {
     collaborator: lock,
-    error: error,
-    info: info,
-    "private": modePrivate,
+    error,
+    info,
+    private: modePrivate,
     success: check,
-    warning: warning
+    warning
   };
   var hasAvatar = typeof avatar !== 'undefined' && kind === 'collaborator';
   var darkCollaborator = kind === 'collaborator' && backgroundColor && stickyTextColor(backgroundColor, 'light', 'dark') === 'light';
-  var classes = classnames(styles['MrlToast'], className, styles["".concat(kind, "Notification")], _defineProperty(_defineProperty(_defineProperty(_defineProperty({}, styles.darkCollaborator, !!darkCollaborator), styles.closing, closed), styles['has-cta'], !!hasInteractiveElements), styles['has-avatar'], hasAvatar));
+  var classes = classnames(styles['MrlToast'], className, styles["".concat(kind, "Notification")], {
+    [styles.darkCollaborator]: !!darkCollaborator,
+    [styles.closing]: closed,
+    [styles['has-cta']]: !!hasInteractiveElements,
+    [styles['has-avatar']]: hasAvatar
+  });
   var closeButtonkind = kind === 'warning' || darkCollaborator ? 'ghost' : 'ghost-inverse';
   var customTextColor = !!backgroundColor && kind === 'collaborator' ? stickyTextColor(backgroundColor, '#000000', '#ffffff') : undefined;
   var primaryMessageClasses = classnames(styles.primaryMessage, 'MrlToast--primaryMessage');

package/dist/esm/components/notification/MrlToast/MrlToast.js.map

@@ -1 +1 @@
-{"version":3,"file":"MrlToast.js","sources":["../../../../../src/components/notification/MrlToast/MrlToast.tsx"],"sourcesContent":["import * as React from 'react';\nimport { check, close, error, info, lock, modePrivate, warning } from '@muraldevkit/ds-icons';\nimport { stickyTextColor } from '@tactivos/mural-shared/lib/colors';\nimport { MrlIconButton, MrlButton } from '../../button';\nimport { MrlLink } from '../../link';\nimport { MrlSvg, DSIconType } from '../../svg';\nimport { MrlAvatarPropTypes } from '../../avatar/MrlAvatar';\nimport styles from './MrlToast.module.scss';\nimport classNames from 'classnames';\nimport { NotificationKind } from '../constants';\nimport { PORTAL_LAYERS as layers } from '../../../utils/layers';\nimport { useAutoClose } from '../../../hooks/useAutoClose';\n\nexport type MrlToastKind = NotificationKind | 'collaborator' | 'general';\n\nexport type MrlToastPosition = 'bottom' | 'top';\n\nexport interface MrlToastCTA {\n\tonClick: () => void;\n\ttext: string;\n\tdataQa: string;\n}\n\nexport interface MrlToastLink {\n\ttext: string;\n\turl: string;\n}\n\nexport interface MrlToastProps {\n\t['data-qa']?: string;\n\t/**\n\t * Determines whether the Toast Notification should automatically close after the time specified in `closeAfterMs` (default 3000ms).\n\t *\n\t * Note: auto-closing is only possible when no interactive elements (e.g. close button & CTA's) exist on the toast notification\n\t */\n\tautoClose?: boolean;\n\t/**\n\t * A MrlAvatar component instance to display in the toast notification.\n\t *\n\t * Note: This is only applicable when `kind` is set to 'collaborator'. When provided, the avatar will be shown instead of the default icon.\n\t * The `showIcon` prop will be ignored when `avatar` is present.\n\t *\n\t * @example\n\t * ```tsx\n\t * <MrlToast\n\t *   kind=\"collaborator\"\n\t *   avatar={<MrlAvatar name=\"John Doe\" size=\"small\" avatarColor=\"#FF5733\" />}\n\t *   primaryMessage=\"John Doe joined the mural\"\n\t * />\n\t * ```\n\t */\n\tavatar?: React.ReactElement<MrlAvatarPropTypes>;\n\t/**\n\t * Sets the background color of the toast notification.\n\t *\n\t * Note: this is only applicable when the `kind` is set to 'collaborator'.\n\t */\n\tbackgroundColor?: string;\n\tclassName?: string;\n\t/**\n\t * The time in milliseconds after which the toast notification should automatically close.\n\t */\n\tcloseAfterMs?: number;\n\tkind?: MrlToastKind;\n\tlink?: MrlToastLink;\n\tonClose?: () => void;\n\tprimaryCTA?: MrlToastCTA;\n\tprimaryMessage: string | JSX.Element;\n\tsecondaryCTA?: MrlToastCTA;\n\tsecondaryMessage?: string | JSX.Element;\n\t/** Determines whether the close icon button should be shown. */\n\tshowCloseButton?: boolean;\n\tshowIcon?: boolean;\n}\n\n/**\n * MrlToast component.\n * @param {MrlToastProps} props - The props for the MrlToast component.\n * @returns {React.ReactElement} The MrlToast component.\n */\nexport const MrlToast = ({\n\t['data-qa']: qa = 'toast-notification',\n\tautoClose = true,\n\tavatar,\n\tbackgroundColor,\n\tclassName,\n\tcloseAfterMs = 3000,\n\tkind = 'info',\n\tlink,\n\tonClose,\n\tprimaryCTA,\n\tprimaryMessage,\n\tsecondaryCTA,\n\tsecondaryMessage,\n\tshowCloseButton = false,\n\tshowIcon = true,\n\t...rest\n}: MrlToastProps): React.ReactElement => {\n\t// Set to true if any buttons exist on the toast, false otherwise\n\tconst hasInteractiveElements = showCloseButton || primaryCTA || secondaryCTA;\n\n\t// Allowing autoClose when there are interactive elements in the toast is an anti-pattern\n\t// and should be avoided. If autoClose is set to true and interactive elements exist, the\n\t// toast will not close automatically.\n\tconst shouldAutoClose = autoClose && !hasInteractiveElements;\n\n\t/* Boolean value tracking if the close timeout has been reached */\n\tconst [closed, setClosed] = useAutoClose(shouldAutoClose, closeAfterMs, onClose);\n\n\tconst handleClose = (): void => {\n\t\tsetClosed(true);\n\n\t\t// Slightly delay the onClose callback to allow the toast to animate out.\n\t\t// This will prevent the toast from disappearing abruptly depending on how\n\t\t// it is implemented within the application\n\t\tsetTimeout(() => {\n\t\t\tif (onClose) onClose();\n\t\t}, 500);\n\t};\n\n\tconst DEFAULT_ICONS: Partial<Record<MrlToastKind, DSIconType>> = {\n\t\tcollaborator: lock,\n\t\terror,\n\t\tinfo,\n\t\tprivate: modePrivate,\n\t\tsuccess: check,\n\t\twarning\n\t};\n\n\tconst hasAvatar = typeof avatar !== 'undefined' && kind === 'collaborator';\n\n\tconst darkCollaborator =\n\t\tkind === 'collaborator' &&\n\t\tbackgroundColor &&\n\t\tstickyTextColor(backgroundColor, 'light', 'dark') === 'light';\n\n\tconst classes = classNames(styles['MrlToast'], className, styles[`${kind}Notification`], {\n\t\t[styles.darkCollaborator]: !!darkCollaborator,\n\t\t[styles.closing]: closed,\n\t\t[styles['has-cta']]: !!hasInteractiveElements,\n\t\t[styles['has-avatar']]: hasAvatar\n\t});\n\n\tconst closeButtonkind = kind === 'warning' || darkCollaborator ? 'ghost' : 'ghost-inverse';\n\n\tconst customTextColor =\n\t\t!!backgroundColor && kind === 'collaborator'\n\t\t\t? stickyTextColor(backgroundColor, '#000000', '#ffffff')\n\t\t\t: undefined;\n\n\tconst primaryMessageClasses = classNames(styles.primaryMessage, 'MrlToast--primaryMessage');\n\tconst secondaryMessageClasses = classNames(styles.secondaryMessage, 'MrlToast--secondaryMessage');\n\n\treturn (\n\t\t<div\n\t\t\t{...rest}\n\t\t\tclassName={classes}\n\t\t\tdata-qa={qa}\n\t\t\tstyle={{\n\t\t\t\tbackgroundColor: kind === 'collaborator' ? backgroundColor : undefined,\n\t\t\t\tcolor: customTextColor,\n\t\t\t\tzIndex: layers.TOAST.zIndex\n\t\t\t}}\n\t\t>\n\t\t\t<div className={styles.content}>\n\t\t\t\t{hasAvatar && <span className={styles.avatarWrapper}>{avatar}</span>}\n\t\t\t\t{!hasAvatar && showIcon && (\n\t\t\t\t\t<span className={styles.iconWrapper}>\n\t\t\t\t\t\t<MrlSvg size=\"small\" svg={DEFAULT_ICONS[kind] || info} />\n\t\t\t\t\t</span>\n\t\t\t\t)}\n\t\t\t\t<span className={styles.textContent}>\n\t\t\t\t\t<span className={primaryMessageClasses} data-qa=\"toast-primary-content\">\n\t\t\t\t\t\t{primaryMessage}\n\t\t\t\t\t</span>{' '}\n\t\t\t\t\t<span className={secondaryMessageClasses}>{secondaryMessage}</span>\n\t\t\t\t\t{link && (\n\t\t\t\t\t\t<span className={styles.link}>\n\t\t\t\t\t\t\t<MrlLink\n\t\t\t\t\t\t\t\ttext={link.text}\n\t\t\t\t\t\t\t\thref={link.url}\n\t\t\t\t\t\t\t\tkind=\"simple\"\n\t\t\t\t\t\t\t\tstyle={{ color: 'inherit' }}\n\t\t\t\t\t\t\t\tsize=\"small\"\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</span>\n\t\t\t\t\t)}\n\t\t\t\t</span>\n\t\t\t</div>\n\t\t\t{hasInteractiveElements && (\n\t\t\t\t<div className={styles['cta-container']}>\n\t\t\t\t\t{secondaryCTA && (\n\t\t\t\t\t\t<MrlButton\n\t\t\t\t\t\t\tattrs={{\n\t\t\t\t\t\t\t\tclassName: styles['cta--secondary']\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\tdata-qa={secondaryCTA.dataQa}\n\t\t\t\t\t\t\tkind=\"inverse\"\n\t\t\t\t\t\t\tonClick={secondaryCTA.onClick}\n\t\t\t\t\t\t\tsize=\"xsmall\"\n\t\t\t\t\t\t\ttext={secondaryCTA.text}\n\t\t\t\t\t\t/>\n\t\t\t\t\t)}\n\t\t\t\t\t{primaryCTA && (\n\t\t\t\t\t\t<MrlButton\n\t\t\t\t\t\t\tattrs={{\n\t\t\t\t\t\t\t\tclassName: styles['cta--primary']\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\tdata-qa={primaryCTA.dataQa}\n\t\t\t\t\t\t\tkind=\"inverse\"\n\t\t\t\t\t\t\tonClick={primaryCTA.onClick}\n\t\t\t\t\t\t\tsize=\"xsmall\"\n\t\t\t\t\t\t\ttext={primaryCTA.text}\n\t\t\t\t\t\t/>\n\t\t\t\t\t)}\n\t\t\t\t\t{showCloseButton && (\n\t\t\t\t\t\t<MrlIconButton\n\t\t\t\t\t\t\tattrs={{\n\t\t\t\t\t\t\t\tclassName: styles['cta--close']\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\tdata-qa=\"mrl-toast-close-button\"\n\t\t\t\t\t\t\ticon={<MrlSvg svg={close} />}\n\t\t\t\t\t\t\tkind={closeButtonkind}\n\t\t\t\t\t\t\tonClick={handleClose}\n\t\t\t\t\t\t\tsize=\"xsmall\"\n\t\t\t\t\t\t\ttext=\"Close\"\n\t\t\t\t\t\t\tstate=\"default\"\n\t\t\t\t\t\t/>\n\t\t\t\t\t)}\n\t\t\t\t</div>\n\t\t\t)}\n\t\t</div>\n\t);\n};\n"],"names":["MrlToast","_ref","_ref$dataQa","qa","_ref$autoClose","autoClose","avatar","backgroundColor","className","_ref$closeAfterMs","closeAfterMs","_ref$kind","kind","link","onClose","primaryCTA","primaryMessage","secondaryCTA","secondaryMessage","_ref$showCloseButton","showCloseButton","_ref$showIcon","showIcon","rest","_objectWithoutProperties","_excluded","hasInteractiveElements","shouldAutoClose","_useAutoClose","useAutoClose","_useAutoClose2","_slicedToArray","closed","setClosed","handleClose","setTimeout","DEFAULT_ICONS","collaborator","lock","error","info","modePrivate","success","check","warning","hasAvatar","darkCollaborator","stickyTextColor","classes","classNames","styles","concat","_defineProperty","closing","closeButtonkind","customTextColor","undefined","primaryMessageClasses","secondaryMessageClasses","React","createElement","_extends","style","color","zIndex","layers","TOAST","content","avatarWrapper","iconWrapper","MrlSvg","size","svg","textContent","MrlLink","text","href","url","MrlButton","attrs","dataQa","onClick","MrlIconButton","icon","close","state"],"mappings":"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"}
+{"version":3,"file":"MrlToast.js","sources":["../../../../../src/components/notification/MrlToast/MrlToast.tsx"],"sourcesContent":["import * as React from 'react';\nimport { check, close, error, info, lock, modePrivate, warning } from '@muraldevkit/ds-icons';\nimport { stickyTextColor } from '@tactivos/mural-shared/lib/colors';\nimport { MrlIconButton, MrlButton } from '../../button';\nimport { MrlLink } from '../../link';\nimport { MrlSvg, DSIconType } from '../../svg';\nimport { MrlAvatarPropTypes } from '../../avatar/MrlAvatar';\nimport styles from './MrlToast.module.scss';\nimport classNames from 'classnames';\nimport { NotificationKind } from '../constants';\nimport { PORTAL_LAYERS as layers } from '../../../utils/layers';\nimport { useAutoClose } from '../../../hooks/useAutoClose';\n\nexport type MrlToastKind = NotificationKind | 'collaborator' | 'general';\n\nexport type MrlToastPosition = 'bottom' | 'top';\n\nexport interface MrlToastCTA {\n\tonClick: () => void;\n\ttext: string;\n\tdataQa: string;\n}\n\nexport interface MrlToastLink {\n\ttext: string;\n\turl: string;\n}\n\nexport interface MrlToastProps {\n\t['data-qa']?: string;\n\t/**\n\t * Determines whether the Toast Notification should automatically close after the time specified in `closeAfterMs` (default 3000ms).\n\t *\n\t * Note: auto-closing is only possible when no interactive elements (e.g. close button & CTA's) exist on the toast notification\n\t */\n\tautoClose?: boolean;\n\t/**\n\t * A MrlAvatar component instance to display in the toast notification.\n\t *\n\t * Note: This is only applicable when `kind` is set to 'collaborator'. When provided, the avatar will be shown instead of the default icon.\n\t * The `showIcon` prop will be ignored when `avatar` is present.\n\t *\n\t * @example\n\t * ```tsx\n\t * <MrlToast\n\t *   kind=\"collaborator\"\n\t *   avatar={<MrlAvatar name=\"John Doe\" size=\"small\" avatarColor=\"#FF5733\" />}\n\t *   primaryMessage=\"John Doe joined the mural\"\n\t * />\n\t * ```\n\t */\n\tavatar?: React.ReactElement<MrlAvatarPropTypes>;\n\t/**\n\t * Sets the background color of the toast notification.\n\t *\n\t * Note: this is only applicable when the `kind` is set to 'collaborator'.\n\t */\n\tbackgroundColor?: string;\n\tclassName?: string;\n\t/**\n\t * The time in milliseconds after which the toast notification should automatically close.\n\t */\n\tcloseAfterMs?: number;\n\tkind?: MrlToastKind;\n\tlink?: MrlToastLink;\n\tonClose?: () => void;\n\tprimaryCTA?: MrlToastCTA;\n\tprimaryMessage: string | JSX.Element;\n\tsecondaryCTA?: MrlToastCTA;\n\tsecondaryMessage?: string | JSX.Element;\n\t/** Determines whether the close icon button should be shown. */\n\tshowCloseButton?: boolean;\n\tshowIcon?: boolean;\n}\n\n/**\n * MrlToast component.\n * @param {MrlToastProps} props - The props for the MrlToast component.\n * @returns {React.ReactElement} The MrlToast component.\n */\nexport const MrlToast = ({\n\t['data-qa']: qa = 'toast-notification',\n\tautoClose = true,\n\tavatar,\n\tbackgroundColor,\n\tclassName,\n\tcloseAfterMs = 3000,\n\tkind = 'info',\n\tlink,\n\tonClose,\n\tprimaryCTA,\n\tprimaryMessage,\n\tsecondaryCTA,\n\tsecondaryMessage,\n\tshowCloseButton = false,\n\tshowIcon = true,\n\t...rest\n}: MrlToastProps): React.ReactElement => {\n\t// Set to true if any buttons exist on the toast, false otherwise\n\tconst hasInteractiveElements = showCloseButton || primaryCTA || secondaryCTA;\n\n\t// Allowing autoClose when there are interactive elements in the toast is an anti-pattern\n\t// and should be avoided. If autoClose is set to true and interactive elements exist, the\n\t// toast will not close automatically.\n\tconst shouldAutoClose = autoClose && !hasInteractiveElements;\n\n\t/* Boolean value tracking if the close timeout has been reached */\n\tconst [closed, setClosed] = useAutoClose(shouldAutoClose, closeAfterMs, onClose);\n\n\tconst handleClose = (): void => {\n\t\tsetClosed(true);\n\n\t\t// Slightly delay the onClose callback to allow the toast to animate out.\n\t\t// This will prevent the toast from disappearing abruptly depending on how\n\t\t// it is implemented within the application\n\t\tsetTimeout(() => {\n\t\t\tif (onClose) onClose();\n\t\t}, 500);\n\t};\n\n\tconst DEFAULT_ICONS: Partial<Record<MrlToastKind, DSIconType>> = {\n\t\tcollaborator: lock,\n\t\terror,\n\t\tinfo,\n\t\tprivate: modePrivate,\n\t\tsuccess: check,\n\t\twarning\n\t};\n\n\tconst hasAvatar = typeof avatar !== 'undefined' && kind === 'collaborator';\n\n\tconst darkCollaborator =\n\t\tkind === 'collaborator' &&\n\t\tbackgroundColor &&\n\t\tstickyTextColor(backgroundColor, 'light', 'dark') === 'light';\n\n\tconst classes = classNames(styles['MrlToast'], className, styles[`${kind}Notification`], {\n\t\t[styles.darkCollaborator]: !!darkCollaborator,\n\t\t[styles.closing]: closed,\n\t\t[styles['has-cta']]: !!hasInteractiveElements,\n\t\t[styles['has-avatar']]: hasAvatar\n\t});\n\n\tconst closeButtonkind = kind === 'warning' || darkCollaborator ? 'ghost' : 'ghost-inverse';\n\n\tconst customTextColor =\n\t\t!!backgroundColor && kind === 'collaborator'\n\t\t\t? stickyTextColor(backgroundColor, '#000000', '#ffffff')\n\t\t\t: undefined;\n\n\tconst primaryMessageClasses = classNames(styles.primaryMessage, 'MrlToast--primaryMessage');\n\tconst secondaryMessageClasses = classNames(styles.secondaryMessage, 'MrlToast--secondaryMessage');\n\n\treturn (\n\t\t<div\n\t\t\t{...rest}\n\t\t\tclassName={classes}\n\t\t\tdata-qa={qa}\n\t\t\tstyle={{\n\t\t\t\tbackgroundColor: kind === 'collaborator' ? backgroundColor : undefined,\n\t\t\t\tcolor: customTextColor,\n\t\t\t\tzIndex: layers.TOAST.zIndex\n\t\t\t}}\n\t\t>\n\t\t\t<div className={styles.content}>\n\t\t\t\t{hasAvatar && <span className={styles.avatarWrapper}>{avatar}</span>}\n\t\t\t\t{!hasAvatar && showIcon && (\n\t\t\t\t\t<span className={styles.iconWrapper}>\n\t\t\t\t\t\t<MrlSvg size=\"small\" svg={DEFAULT_ICONS[kind] || info} />\n\t\t\t\t\t</span>\n\t\t\t\t)}\n\t\t\t\t<span className={styles.textContent}>\n\t\t\t\t\t<span className={primaryMessageClasses} data-qa=\"toast-primary-content\">\n\t\t\t\t\t\t{primaryMessage}\n\t\t\t\t\t</span>{' '}\n\t\t\t\t\t<span className={secondaryMessageClasses}>{secondaryMessage}</span>\n\t\t\t\t\t{link && (\n\t\t\t\t\t\t<span className={styles.link}>\n\t\t\t\t\t\t\t<MrlLink\n\t\t\t\t\t\t\t\ttext={link.text}\n\t\t\t\t\t\t\t\thref={link.url}\n\t\t\t\t\t\t\t\tkind=\"simple\"\n\t\t\t\t\t\t\t\tstyle={{ color: 'inherit' }}\n\t\t\t\t\t\t\t\tsize=\"small\"\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</span>\n\t\t\t\t\t)}\n\t\t\t\t</span>\n\t\t\t</div>\n\t\t\t{hasInteractiveElements && (\n\t\t\t\t<div className={styles['cta-container']}>\n\t\t\t\t\t{secondaryCTA && (\n\t\t\t\t\t\t<MrlButton\n\t\t\t\t\t\t\tattrs={{\n\t\t\t\t\t\t\t\tclassName: styles['cta--secondary']\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\tdata-qa={secondaryCTA.dataQa}\n\t\t\t\t\t\t\tkind=\"inverse\"\n\t\t\t\t\t\t\tonClick={secondaryCTA.onClick}\n\t\t\t\t\t\t\tsize=\"xsmall\"\n\t\t\t\t\t\t\ttext={secondaryCTA.text}\n\t\t\t\t\t\t/>\n\t\t\t\t\t)}\n\t\t\t\t\t{primaryCTA && (\n\t\t\t\t\t\t<MrlButton\n\t\t\t\t\t\t\tattrs={{\n\t\t\t\t\t\t\t\tclassName: styles['cta--primary']\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\tdata-qa={primaryCTA.dataQa}\n\t\t\t\t\t\t\tkind=\"inverse\"\n\t\t\t\t\t\t\tonClick={primaryCTA.onClick}\n\t\t\t\t\t\t\tsize=\"xsmall\"\n\t\t\t\t\t\t\ttext={primaryCTA.text}\n\t\t\t\t\t\t/>\n\t\t\t\t\t)}\n\t\t\t\t\t{showCloseButton && (\n\t\t\t\t\t\t<MrlIconButton\n\t\t\t\t\t\t\tattrs={{\n\t\t\t\t\t\t\t\tclassName: styles['cta--close']\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\tdata-qa=\"mrl-toast-close-button\"\n\t\t\t\t\t\t\ticon={<MrlSvg svg={close} />}\n\t\t\t\t\t\t\tkind={closeButtonkind}\n\t\t\t\t\t\t\tonClick={handleClose}\n\t\t\t\t\t\t\tsize=\"xsmall\"\n\t\t\t\t\t\t\ttext=\"Close\"\n\t\t\t\t\t\t\tstate=\"default\"\n\t\t\t\t\t\t/>\n\t\t\t\t\t)}\n\t\t\t\t</div>\n\t\t\t)}\n\t\t</div>\n\t);\n};\n"],"names":["MrlToast","_ref","_ref$dataQa","qa","_ref$autoClose","autoClose","avatar","backgroundColor","className","_ref$closeAfterMs","closeAfterMs","_ref$kind","kind","link","onClose","primaryCTA","primaryMessage","secondaryCTA","secondaryMessage","_ref$showCloseButton","showCloseButton","_ref$showIcon","showIcon","rest","_objectWithoutProperties","_excluded","hasInteractiveElements","shouldAutoClose","_useAutoClose","useAutoClose","_useAutoClose2","_slicedToArray","closed","setClosed","handleClose","setTimeout","DEFAULT_ICONS","collaborator","lock","error","info","private","modePrivate","success","check","warning","hasAvatar","darkCollaborator","stickyTextColor","classes","classNames","styles","concat","closing","closeButtonkind","customTextColor","undefined","primaryMessageClasses","secondaryMessageClasses","React","createElement","_extends","style","color","zIndex","layers","TOAST","content","avatarWrapper","iconWrapper","MrlSvg","size","svg","textContent","MrlLink","text","href","url","MrlButton","attrs","dataQa","onClick","MrlIconButton","icon","close","state"],"mappings":"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"}

package/dist/esm/components/panel/MrlPanel/MrlPanel.js

@@ -1,4 +1,4 @@
-import { objectWithoutProperties as _objectWithoutProperties, extends as _extends, defineProperty as _defineProperty, objectSpread2 as _objectSpread2 } from '../../../_virtual/_rollupPluginBabelHelpers.js';
+import { objectWithoutProperties as _objectWithoutProperties, extends as _extends, objectSpread2 as _objectSpread2 } from '../../../_virtual/_rollupPluginBabelHelpers.js';
 import * as React from 'react';
 import classnames from 'classnames';
 import styles from './MrlPanel.module.scss.js';
@@ -52,10 +52,10 @@ var MrlPanel = /*#__PURE__*/React.forwardRef(function MrlPanel(props, ref) {
     horizontalScrollbarHeight = _useScrollbarInfo.horizontalScrollbarHeight,
     verticalScrollbarWidth = _useScrollbarInfo.verticalScrollbarWidth;
   var hasFocusableDescendant = useHasFocusableDescendant(scrollableContainerRef);
-  React.useImperativeHandle(ref, function () {
+  React.useImperativeHandle(ref, () => {
     return panelRef.current;
   });
-  var handleKeyDown = React.useCallback(function (e) {
+  var handleKeyDown = React.useCallback(e => {
     if (e.key === 'Escape' && typeof onClose === 'function') {
       e.preventDefault();
       e.stopPropagation();
@@ -65,10 +65,10 @@ var MrlPanel = /*#__PURE__*/React.forwardRef(function MrlPanel(props, ref) {
   var panelClasses = classnames(styles['MrlPanel'], 'MrlPanel', className);
   return /*#__PURE__*/React.createElement(MrlPanelContext.Provider, {
     value: {
-      hasHorizontalScrollbar: hasHorizontalScrollbar,
-      hasVerticalScrollbar: hasVerticalScrollbar,
-      horizontalScrollbarHeight: horizontalScrollbarHeight,
-      verticalScrollbarWidth: verticalScrollbarWidth
+      hasHorizontalScrollbar,
+      hasVerticalScrollbar,
+      horizontalScrollbarHeight,
+      verticalScrollbarWidth
     }
   }, /*#__PURE__*/React.createElement("div", _extends({}, rest, {
     className: panelClasses,
@@ -86,12 +86,14 @@ var MrlPanel = /*#__PURE__*/React.forwardRef(function MrlPanel(props, ref) {
   }, /*#__PURE__*/React.createElement("header", {
     className: classnames(styles['MrlPanel--header'], 'MrlPanel--header')
   }, !header && /*#__PURE__*/React.createElement("div", {
-    className: classnames(styles['MrlPanel--header-content'], 'MrlPanel--header-content', _defineProperty({}, styles['MrlPanel--header-content-description'], !!description))
+    className: classnames(styles['MrlPanel--header-content'], 'MrlPanel--header-content', {
+      [styles['MrlPanel--header-content-description']]: !!description
+    })
   }, /*#__PURE__*/React.createElement(MrlTextHeading, {
     className: styles['MrlPanel--title'],
     attrs: {
       'data-qa': "".concat(qa, "-header-title"),
-      id: id
+      id
     },
     hierarchy: "primary",
     kind: "title",
@@ -122,7 +124,9 @@ var MrlPanel = /*#__PURE__*/React.forwardRef(function MrlPanel(props, ref) {
     ref: scrollableContainerRef,
     "data-scroll-anchor": hasDataScrollAnchor,
     "data-qa": "".concat(qa, "-scrollable"),
-    className: classnames(styles['MrlPanel--scrollable'], 'MrlPanel--scrollable', _defineProperty({}, styles['MrlPanel--scrollable-has-sticky-header'], hasStickyHeader))
+    className: classnames(styles['MrlPanel--scrollable'], 'MrlPanel--scrollable', {
+      [styles['MrlPanel--scrollable-has-sticky-header']]: hasStickyHeader
+    })
   }, verticalScrollbarWidth > 0 && {
     style: {
       paddingRight: "calc(var(--mrl-spacing-06) - ".concat(verticalScrollbarWidth, "px)")

package/dist/esm/components/panel/MrlPanel/MrlPanel.js.map

@@ -1 +1 @@
-{"version":3,"file":"MrlPanel.js","sources":["../../../../../src/components/panel/MrlPanel/MrlPanel.tsx"],"sourcesContent":["import * as React from 'react';\nimport classnames from 'classnames';\nimport styles from './MrlPanel.module.scss';\nimport { MrlIconButton } from '../../button';\nimport { MrlSvg } from '../../svg';\nimport { close } from '@muraldevkit/ds-icons';\nimport { MrlFocusTrap } from '../../focus-trap';\nimport { MrlText, MrlTextHeading } from '../../text';\nimport { MrlDivider } from '../../divider';\nimport { MrlPanelContext } from '../MrlPanelContext';\nimport { useHasFocusableDescendant } from '../../../hooks/useHasFocusableDescendant';\nimport { useScrollbarInfo } from '../../../hooks/useScrollbarInfo';\nimport { getUniqueId } from '../../../utils';\n\n/**\n * Props for the MrlPanel component.\n */\ninterface MrlPanelProps extends React.ComponentPropsWithRef<'div'> {\n\t/**\n\t * A string value used for data-qa attribute.\n\t */\n\t['data-qa']?: string;\n\n\t/**\n\t * Callback function that is called when the panel is closed.\n\t */\n\tonClose?: () => void;\n\n\t/**\n\t * The custom header element to be rendered in the panel.\n\t * When a custom header is used developers need to provide th aria-label and aria-describedby.\n\t */\n\theader?: React.ReactNode;\n\n\t/**\n\t * The custom top actions to be rendered in the panel header.\n\t * By default top actions are rendered on the right side of the title and include a MrlDivider at the end.\n\t * The close button should not be included as part of the top actions.\n\t */\n\ttopActions?: React.ReactNode;\n\n\t/**\n\t * The title of the panel.\n\t */\n\ttitle?: string;\n\n\t/**\n\t * The description of the panel.\n\t */\n\tdescription?: string;\n\n\t/**\n\t * Specifies whether to disable autofocus on the panel.\n\t */\n\tdisableAutofocus?: boolean;\n\n\t/**\n\t * Specifies whether the panel has a sticky header to adjust styles.\n\t */\n\thasStickyHeader?: boolean;\n\n\t/**\n\t * hasDataScrollAnchor is required to enable infinite scroll\n\t */\n\thasDataScrollAnchor?: boolean;\n}\n\n/**\n * MrlPanel component.\n *\n * @param props The MrlPanel component properties.\n * @returns The MrlPanel component.\n */\nexport const MrlPanel = React.forwardRef<HTMLDivElement, MrlPanelProps>(\n\tfunction MrlPanel(props, ref): JSX.Element {\n\t\tconst {\n\t\t\tclassName,\n\t\t\ttitle,\n\t\t\tid,\n\t\t\tchildren,\n\t\t\thasStickyHeader,\n\t\t\theader,\n\t\t\tdescription,\n\t\t\tdisableAutofocus,\n\t\t\ttopActions,\n\t\t\thasDataScrollAnchor,\n\t\t\tonClose,\n\t\t\t['data-qa']: qa = 'panel',\n\t\t\t...rest\n\t\t} = props;\n\n\t\tconst panelRef = React.useRef<HTMLDivElement>(null);\n\n\t\t// Unique ID for aria-describedby\n\t\tconst descriptionIdRef = React.useRef<string>(\n\t\t\tdescription ? getUniqueId('mrl-panel-description') : ''\n\t\t);\n\n\t\tconst {\n\t\t\tscrollableContainerRef,\n\t\t\thasVerticalScrollbar,\n\t\t\thasHorizontalScrollbar,\n\t\t\thorizontalScrollbarHeight,\n\t\t\tverticalScrollbarWidth\n\t\t} = useScrollbarInfo<HTMLDivElement>();\n\n\t\tconst hasFocusableDescendant = useHasFocusableDescendant(scrollableContainerRef);\n\n\t\tReact.useImperativeHandle<HTMLDivElement | null, HTMLDivElement | null>(ref, () => {\n\t\t\treturn panelRef.current;\n\t\t});\n\n\t\tconst handleKeyDown = React.useCallback(\n\t\t\t(e: React.KeyboardEvent<HTMLDivElement>) => {\n\t\t\t\tif (e.key === 'Escape' && typeof onClose === 'function') {\n\t\t\t\t\te.preventDefault();\n\t\t\t\t\te.stopPropagation();\n\t\t\t\t\tonClose();\n\t\t\t\t}\n\t\t\t},\n\t\t\t[onClose]\n\t\t);\n\n\t\tconst panelClasses = classnames(styles['MrlPanel'], 'MrlPanel', className);\n\n\t\treturn (\n\t\t\t<MrlPanelContext.Provider\n\t\t\t\tvalue={{\n\t\t\t\t\thasHorizontalScrollbar,\n\t\t\t\t\thasVerticalScrollbar,\n\t\t\t\t\thorizontalScrollbarHeight,\n\t\t\t\t\tverticalScrollbarWidth\n\t\t\t\t}}\n\t\t\t>\n\t\t\t\t{/* eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions */}\n\t\t\t\t<div\n\t\t\t\t\t{...rest}\n\t\t\t\t\tclassName={panelClasses}\n\t\t\t\t\taria-describedby={descriptionIdRef.current || props['aria-describedby']}\n\t\t\t\t\taria-label={title || props['aria-label']}\n\t\t\t\t\taria-modal=\"false\"\n\t\t\t\t\tdata-qa={qa}\n\t\t\t\t\tid={id}\n\t\t\t\t\tonKeyDown={handleKeyDown}\n\t\t\t\t\trole=\"dialog\"\n\t\t\t\t\tref={panelRef}\n\t\t\t\t>\n\t\t\t\t\t<MrlFocusTrap containerRef={panelRef} disableAutofocus={disableAutofocus}>\n\t\t\t\t\t\t<header className={classnames(styles['MrlPanel--header'], 'MrlPanel--header')}>\n\t\t\t\t\t\t\t{!header && (\n\t\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\t\tclassName={classnames(\n\t\t\t\t\t\t\t\t\t\tstyles['MrlPanel--header-content'],\n\t\t\t\t\t\t\t\t\t\t'MrlPanel--header-content',\n\t\t\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\t\t\t[styles['MrlPanel--header-content-description']]: !!description\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t<MrlTextHeading\n\t\t\t\t\t\t\t\t\t\tclassName={styles['MrlPanel--title']}\n\t\t\t\t\t\t\t\t\t\tattrs={{\n\t\t\t\t\t\t\t\t\t\t\t'data-qa': `${qa}-header-title`,\n\t\t\t\t\t\t\t\t\t\t\tid\n\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t\thierarchy=\"primary\"\n\t\t\t\t\t\t\t\t\t\tkind=\"title\"\n\t\t\t\t\t\t\t\t\t\tlevel=\"2\"\n\t\t\t\t\t\t\t\t\t\tsize=\"medium\"\n\t\t\t\t\t\t\t\t\t\ttext={title}\n\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t{topActions && (\n\t\t\t\t\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\t\t\t\t\tclassName={classnames(\n\t\t\t\t\t\t\t\t\t\t\t\t\tstyles['MrlPanel--top-actions'],\n\t\t\t\t\t\t\t\t\t\t\t\t\t'MrlPanel--top-actions'\n\t\t\t\t\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t\t{topActions}\n\t\t\t\t\t\t\t\t\t\t\t\t<MrlDivider\n\t\t\t\t\t\t\t\t\t\t\t\t\torientation=\"vertical\"\n\t\t\t\t\t\t\t\t\t\t\t\t\tspacing=\"small\"\n\t\t\t\t\t\t\t\t\t\t\t\t\tlength=\"var(--mrl-spacing-06)\"\n\t\t\t\t\t\t\t\t\t\t\t\t\tclassName={classnames(\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tstyles['MrlPanel--top-actions-divider'],\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t'MrlPanel--top-actions-divider'\n\t\t\t\t\t\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t\t</>\n\t\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t{header}\n\t\t\t\t\t\t\t<MrlIconButton\n\t\t\t\t\t\t\t\tdata-qa={`${qa}-close-button`}\n\t\t\t\t\t\t\t\twrapperClassName={classnames(styles['MrlPanel--close'], 'MrlPanel--close')}\n\t\t\t\t\t\t\t\ticon={<MrlSvg svg={close} />}\n\t\t\t\t\t\t\t\tonClick={onClose}\n\t\t\t\t\t\t\t\ttext=\"Close\"\n\t\t\t\t\t\t\t\tsize=\"small\"\n\t\t\t\t\t\t\t\tstate=\"default\"\n\t\t\t\t\t\t\t\tposition=\"bottom\"\n\t\t\t\t\t\t\t\ttipAnchor=\"center\"\n\t\t\t\t\t\t\t\tkind=\"ghost\"\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</header>\n\n\t\t\t\t\t\t{/*\n\t\t\t\t\t\t * Scrollable container — includes description, sticky header and main\n\t\t\t\t\t\t * content. Per ACT rule 0ssw9k a scrollable element passes WCAG 2.1.1\n\t\t\t\t\t\t * Keyboard if it is itself focusable OR has a focusable descendant. We\n\t\t\t\t\t\t * therefore expose `tabindex=\"0\"` only when the wrapper has no focusable\n\t\t\t\t\t\t * descendants, which avoids the \"meaningless tab stop\" finding for\n\t\t\t\t\t\t * panels filled with interactive controls while still making text-only\n\t\t\t\t\t\t * panels keyboard-scrollable. The labeled `role=\"region\"` is preserved\n\t\t\t\t\t\t * whenever the panel overflows so screen-reader users get a landmark.\n\t\t\t\t\t\t * https://www.w3.org/WAI/standards-guidelines/act/rules/0ssw9k/\n\t\t\t\t\t\t */}\n\t\t\t\t\t\t<div\n\t\t\t\t\t\t\tref={scrollableContainerRef}\n\t\t\t\t\t\t\tdata-scroll-anchor={hasDataScrollAnchor}\n\t\t\t\t\t\t\tdata-qa={`${qa}-scrollable`}\n\t\t\t\t\t\t\tclassName={classnames(styles['MrlPanel--scrollable'], 'MrlPanel--scrollable', {\n\t\t\t\t\t\t\t\t[styles['MrlPanel--scrollable-has-sticky-header']]: hasStickyHeader\n\t\t\t\t\t\t\t})}\n\t\t\t\t\t\t\t{...(verticalScrollbarWidth > 0 && {\n\t\t\t\t\t\t\t\tstyle: {\n\t\t\t\t\t\t\t\t\tpaddingRight: `calc(var(--mrl-spacing-06) - ${verticalScrollbarWidth}px)`\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t})}\n\t\t\t\t\t\t\t{...(hasVerticalScrollbar && {\n\t\t\t\t\t\t\t\t'aria-label': title\n\t\t\t\t\t\t\t\t\t? `${title} panel scrollable content`\n\t\t\t\t\t\t\t\t\t: 'Panel scrollable content',\n\t\t\t\t\t\t\t\trole: 'region',\n\t\t\t\t\t\t\t\t...(!hasFocusableDescendant && {\n\t\t\t\t\t\t\t\t\t// eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex\n\t\t\t\t\t\t\t\t\ttabIndex: 0\n\t\t\t\t\t\t\t\t})\n\t\t\t\t\t\t\t})}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{description && (\n\t\t\t\t\t\t\t\t<MrlText\n\t\t\t\t\t\t\t\t\tattrs={{\n\t\t\t\t\t\t\t\t\t\tclassName: classnames(styles['MrlPanel--description'], 'MrlPanel--description'),\n\t\t\t\t\t\t\t\t\t\tid: descriptionIdRef.current\n\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\tsize=\"xsmall\"\n\t\t\t\t\t\t\t\t\ttext={description}\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t{children}\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</MrlFocusTrap>\n\t\t\t\t</div>\n\t\t\t</MrlPanelContext.Provider>\n\t\t);\n\t}\n);\n"],"names":["MrlPanel","React","forwardRef","props","ref","className","title","id","children","hasStickyHeader","header","description","disableAutofocus","topActions","hasDataScrollAnchor","onClose","_props$dataQa","qa","rest","_objectWithoutProperties","_excluded","panelRef","useRef","descriptionIdRef","getUniqueId","_useScrollbarInfo","useScrollbarInfo","scrollableContainerRef","hasVerticalScrollbar","hasHorizontalScrollbar","horizontalScrollbarHeight","verticalScrollbarWidth","hasFocusableDescendant","useHasFocusableDescendant","useImperativeHandle","current","handleKeyDown","useCallback","e","key","preventDefault","stopPropagation","panelClasses","classnames","styles","createElement","MrlPanelContext","Provider","value","_extends","onKeyDown","role","MrlFocusTrap","containerRef","_defineProperty","MrlTextHeading","attrs","concat","hierarchy","kind","level","size","text","Fragment","MrlDivider","orientation","spacing","length","MrlIconButton","wrapperClassName","icon","MrlSvg","svg","close","onClick","state","position","tipAnchor","style","paddingRight","_objectSpread","tabIndex","MrlText"],"mappings":"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"}
+{"version":3,"file":"MrlPanel.js","sources":["../../../../../src/components/panel/MrlPanel/MrlPanel.tsx"],"sourcesContent":["import * as React from 'react';\nimport classnames from 'classnames';\nimport styles from './MrlPanel.module.scss';\nimport { MrlIconButton } from '../../button';\nimport { MrlSvg } from '../../svg';\nimport { close } from '@muraldevkit/ds-icons';\nimport { MrlFocusTrap } from '../../focus-trap';\nimport { MrlText, MrlTextHeading } from '../../text';\nimport { MrlDivider } from '../../divider';\nimport { MrlPanelContext } from '../MrlPanelContext';\nimport { useHasFocusableDescendant } from '../../../hooks/useHasFocusableDescendant';\nimport { useScrollbarInfo } from '../../../hooks/useScrollbarInfo';\nimport { getUniqueId } from '../../../utils';\n\n/**\n * Props for the MrlPanel component.\n */\ninterface MrlPanelProps extends React.ComponentPropsWithRef<'div'> {\n\t/**\n\t * A string value used for data-qa attribute.\n\t */\n\t['data-qa']?: string;\n\n\t/**\n\t * Callback function that is called when the panel is closed.\n\t */\n\tonClose?: () => void;\n\n\t/**\n\t * The custom header element to be rendered in the panel.\n\t * When a custom header is used developers need to provide th aria-label and aria-describedby.\n\t */\n\theader?: React.ReactNode;\n\n\t/**\n\t * The custom top actions to be rendered in the panel header.\n\t * By default top actions are rendered on the right side of the title and include a MrlDivider at the end.\n\t * The close button should not be included as part of the top actions.\n\t */\n\ttopActions?: React.ReactNode;\n\n\t/**\n\t * The title of the panel.\n\t */\n\ttitle?: string;\n\n\t/**\n\t * The description of the panel.\n\t */\n\tdescription?: string;\n\n\t/**\n\t * Specifies whether to disable autofocus on the panel.\n\t */\n\tdisableAutofocus?: boolean;\n\n\t/**\n\t * Specifies whether the panel has a sticky header to adjust styles.\n\t */\n\thasStickyHeader?: boolean;\n\n\t/**\n\t * hasDataScrollAnchor is required to enable infinite scroll\n\t */\n\thasDataScrollAnchor?: boolean;\n}\n\n/**\n * MrlPanel component.\n *\n * @param props The MrlPanel component properties.\n * @returns The MrlPanel component.\n */\nexport const MrlPanel = React.forwardRef<HTMLDivElement, MrlPanelProps>(\n\tfunction MrlPanel(props, ref): JSX.Element {\n\t\tconst {\n\t\t\tclassName,\n\t\t\ttitle,\n\t\t\tid,\n\t\t\tchildren,\n\t\t\thasStickyHeader,\n\t\t\theader,\n\t\t\tdescription,\n\t\t\tdisableAutofocus,\n\t\t\ttopActions,\n\t\t\thasDataScrollAnchor,\n\t\t\tonClose,\n\t\t\t['data-qa']: qa = 'panel',\n\t\t\t...rest\n\t\t} = props;\n\n\t\tconst panelRef = React.useRef<HTMLDivElement>(null);\n\n\t\t// Unique ID for aria-describedby\n\t\tconst descriptionIdRef = React.useRef<string>(\n\t\t\tdescription ? getUniqueId('mrl-panel-description') : ''\n\t\t);\n\n\t\tconst {\n\t\t\tscrollableContainerRef,\n\t\t\thasVerticalScrollbar,\n\t\t\thasHorizontalScrollbar,\n\t\t\thorizontalScrollbarHeight,\n\t\t\tverticalScrollbarWidth\n\t\t} = useScrollbarInfo<HTMLDivElement>();\n\n\t\tconst hasFocusableDescendant = useHasFocusableDescendant(scrollableContainerRef);\n\n\t\tReact.useImperativeHandle<HTMLDivElement | null, HTMLDivElement | null>(ref, () => {\n\t\t\treturn panelRef.current;\n\t\t});\n\n\t\tconst handleKeyDown = React.useCallback(\n\t\t\t(e: React.KeyboardEvent<HTMLDivElement>) => {\n\t\t\t\tif (e.key === 'Escape' && typeof onClose === 'function') {\n\t\t\t\t\te.preventDefault();\n\t\t\t\t\te.stopPropagation();\n\t\t\t\t\tonClose();\n\t\t\t\t}\n\t\t\t},\n\t\t\t[onClose]\n\t\t);\n\n\t\tconst panelClasses = classnames(styles['MrlPanel'], 'MrlPanel', className);\n\n\t\treturn (\n\t\t\t<MrlPanelContext.Provider\n\t\t\t\tvalue={{\n\t\t\t\t\thasHorizontalScrollbar,\n\t\t\t\t\thasVerticalScrollbar,\n\t\t\t\t\thorizontalScrollbarHeight,\n\t\t\t\t\tverticalScrollbarWidth\n\t\t\t\t}}\n\t\t\t>\n\t\t\t\t{/* eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions */}\n\t\t\t\t<div\n\t\t\t\t\t{...rest}\n\t\t\t\t\tclassName={panelClasses}\n\t\t\t\t\taria-describedby={descriptionIdRef.current || props['aria-describedby']}\n\t\t\t\t\taria-label={title || props['aria-label']}\n\t\t\t\t\taria-modal=\"false\"\n\t\t\t\t\tdata-qa={qa}\n\t\t\t\t\tid={id}\n\t\t\t\t\tonKeyDown={handleKeyDown}\n\t\t\t\t\trole=\"dialog\"\n\t\t\t\t\tref={panelRef}\n\t\t\t\t>\n\t\t\t\t\t<MrlFocusTrap containerRef={panelRef} disableAutofocus={disableAutofocus}>\n\t\t\t\t\t\t<header className={classnames(styles['MrlPanel--header'], 'MrlPanel--header')}>\n\t\t\t\t\t\t\t{!header && (\n\t\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\t\tclassName={classnames(\n\t\t\t\t\t\t\t\t\t\tstyles['MrlPanel--header-content'],\n\t\t\t\t\t\t\t\t\t\t'MrlPanel--header-content',\n\t\t\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\t\t\t[styles['MrlPanel--header-content-description']]: !!description\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t<MrlTextHeading\n\t\t\t\t\t\t\t\t\t\tclassName={styles['MrlPanel--title']}\n\t\t\t\t\t\t\t\t\t\tattrs={{\n\t\t\t\t\t\t\t\t\t\t\t'data-qa': `${qa}-header-title`,\n\t\t\t\t\t\t\t\t\t\t\tid\n\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t\thierarchy=\"primary\"\n\t\t\t\t\t\t\t\t\t\tkind=\"title\"\n\t\t\t\t\t\t\t\t\t\tlevel=\"2\"\n\t\t\t\t\t\t\t\t\t\tsize=\"medium\"\n\t\t\t\t\t\t\t\t\t\ttext={title}\n\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t{topActions && (\n\t\t\t\t\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\t\t\t\t\tclassName={classnames(\n\t\t\t\t\t\t\t\t\t\t\t\t\tstyles['MrlPanel--top-actions'],\n\t\t\t\t\t\t\t\t\t\t\t\t\t'MrlPanel--top-actions'\n\t\t\t\t\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t\t{topActions}\n\t\t\t\t\t\t\t\t\t\t\t\t<MrlDivider\n\t\t\t\t\t\t\t\t\t\t\t\t\torientation=\"vertical\"\n\t\t\t\t\t\t\t\t\t\t\t\t\tspacing=\"small\"\n\t\t\t\t\t\t\t\t\t\t\t\t\tlength=\"var(--mrl-spacing-06)\"\n\t\t\t\t\t\t\t\t\t\t\t\t\tclassName={classnames(\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tstyles['MrlPanel--top-actions-divider'],\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t'MrlPanel--top-actions-divider'\n\t\t\t\t\t\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t\t</>\n\t\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t{header}\n\t\t\t\t\t\t\t<MrlIconButton\n\t\t\t\t\t\t\t\tdata-qa={`${qa}-close-button`}\n\t\t\t\t\t\t\t\twrapperClassName={classnames(styles['MrlPanel--close'], 'MrlPanel--close')}\n\t\t\t\t\t\t\t\ticon={<MrlSvg svg={close} />}\n\t\t\t\t\t\t\t\tonClick={onClose}\n\t\t\t\t\t\t\t\ttext=\"Close\"\n\t\t\t\t\t\t\t\tsize=\"small\"\n\t\t\t\t\t\t\t\tstate=\"default\"\n\t\t\t\t\t\t\t\tposition=\"bottom\"\n\t\t\t\t\t\t\t\ttipAnchor=\"center\"\n\t\t\t\t\t\t\t\tkind=\"ghost\"\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</header>\n\n\t\t\t\t\t\t{/*\n\t\t\t\t\t\t * Scrollable container — includes description, sticky header and main\n\t\t\t\t\t\t * content. Per ACT rule 0ssw9k a scrollable element passes WCAG 2.1.1\n\t\t\t\t\t\t * Keyboard if it is itself focusable OR has a focusable descendant. We\n\t\t\t\t\t\t * therefore expose `tabindex=\"0\"` only when the wrapper has no focusable\n\t\t\t\t\t\t * descendants, which avoids the \"meaningless tab stop\" finding for\n\t\t\t\t\t\t * panels filled with interactive controls while still making text-only\n\t\t\t\t\t\t * panels keyboard-scrollable. The labeled `role=\"region\"` is preserved\n\t\t\t\t\t\t * whenever the panel overflows so screen-reader users get a landmark.\n\t\t\t\t\t\t * https://www.w3.org/WAI/standards-guidelines/act/rules/0ssw9k/\n\t\t\t\t\t\t */}\n\t\t\t\t\t\t<div\n\t\t\t\t\t\t\tref={scrollableContainerRef}\n\t\t\t\t\t\t\tdata-scroll-anchor={hasDataScrollAnchor}\n\t\t\t\t\t\t\tdata-qa={`${qa}-scrollable`}\n\t\t\t\t\t\t\tclassName={classnames(styles['MrlPanel--scrollable'], 'MrlPanel--scrollable', {\n\t\t\t\t\t\t\t\t[styles['MrlPanel--scrollable-has-sticky-header']]: hasStickyHeader\n\t\t\t\t\t\t\t})}\n\t\t\t\t\t\t\t{...(verticalScrollbarWidth > 0 && {\n\t\t\t\t\t\t\t\tstyle: {\n\t\t\t\t\t\t\t\t\tpaddingRight: `calc(var(--mrl-spacing-06) - ${verticalScrollbarWidth}px)`\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t})}\n\t\t\t\t\t\t\t{...(hasVerticalScrollbar && {\n\t\t\t\t\t\t\t\t'aria-label': title\n\t\t\t\t\t\t\t\t\t? `${title} panel scrollable content`\n\t\t\t\t\t\t\t\t\t: 'Panel scrollable content',\n\t\t\t\t\t\t\t\trole: 'region',\n\t\t\t\t\t\t\t\t...(!hasFocusableDescendant && {\n\t\t\t\t\t\t\t\t\t// eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex\n\t\t\t\t\t\t\t\t\ttabIndex: 0\n\t\t\t\t\t\t\t\t})\n\t\t\t\t\t\t\t})}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{description && (\n\t\t\t\t\t\t\t\t<MrlText\n\t\t\t\t\t\t\t\t\tattrs={{\n\t\t\t\t\t\t\t\t\t\tclassName: classnames(styles['MrlPanel--description'], 'MrlPanel--description'),\n\t\t\t\t\t\t\t\t\t\tid: descriptionIdRef.current\n\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\tsize=\"xsmall\"\n\t\t\t\t\t\t\t\t\ttext={description}\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t{children}\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</MrlFocusTrap>\n\t\t\t\t</div>\n\t\t\t</MrlPanelContext.Provider>\n\t\t);\n\t}\n);\n"],"names":["MrlPanel","React","forwardRef","props","ref","className","title","id","children","hasStickyHeader","header","description","disableAutofocus","topActions","hasDataScrollAnchor","onClose","_props$dataQa","qa","rest","_objectWithoutProperties","_excluded","panelRef","useRef","descriptionIdRef","getUniqueId","_useScrollbarInfo","useScrollbarInfo","scrollableContainerRef","hasVerticalScrollbar","hasHorizontalScrollbar","horizontalScrollbarHeight","verticalScrollbarWidth","hasFocusableDescendant","useHasFocusableDescendant","useImperativeHandle","current","handleKeyDown","useCallback","e","key","preventDefault","stopPropagation","panelClasses","classnames","styles","createElement","MrlPanelContext","Provider","value","_extends","onKeyDown","role","MrlFocusTrap","containerRef","MrlTextHeading","attrs","concat","hierarchy","kind","level","size","text","Fragment","MrlDivider","orientation","spacing","length","MrlIconButton","wrapperClassName","icon","MrlSvg","svg","close","onClick","state","position","tipAnchor","style","paddingRight","_objectSpread","tabIndex","MrlText"],"mappings":"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"}

package/dist/esm/components/panel/MrlPanelFooter/MrlPanelFooter.js

@@ -1,4 +1,4 @@
-import { objectWithoutProperties as _objectWithoutProperties, extends as _extends, typeof as _typeof } from '../../../_virtual/_rollupPluginBabelHelpers.js';
+import { objectWithoutProperties as _objectWithoutProperties, extends as _extends } from '../../../_virtual/_rollupPluginBabelHelpers.js';
 import * as React from 'react';
 import classnames from 'classnames';
 import styles from './MrlPanelFooter.module.scss.js';
@@ -31,7 +31,7 @@ var MrlPanelFooter = /*#__PURE__*/React.forwardRef(function MrlPanelFooter(_ref,
   }), typeof children === 'string' && /*#__PURE__*/React.createElement(MrlText, {
     size: "xsmall",
     text: children
-  }), _typeof(children) === 'object' && children);
+  }), typeof children === 'object' && children);
 });
 
 export { MrlPanelFooter };

package/dist/esm/components/panel/MrlPanelFooter/MrlPanelFooter.js.map

@@ -1 +1 @@
-{"version":3,"file":"MrlPanelFooter.js","sources":["../../../../../src/components/panel/MrlPanelFooter/MrlPanelFooter.tsx"],"sourcesContent":["import * as React from 'react';\nimport classnames from 'classnames';\nimport styles from './MrlPanelFooter.module.scss';\nimport { MrlText } from '../../text';\nimport { MrlDivider } from '../../divider';\n\n/**\n * Props for the MrlPanelFooter component.\n */\ninterface MrlPanelFooterProps extends React.ComponentPropsWithRef<'footer'> {\n\t/**\n\t * The children of the MrlPanelFooter component.\n\t */\n\tchildren?: React.ReactNode;\n\n\t/**\n\t * Specifies whether to show the divider.\n\t */\n\thasDivider?: boolean;\n}\n\n/**\n * MrlPanelFooter component.\n *\n * @param props The MrlPanelFooter component properties.\n * @returns The MrlPanelFooter component.\n */\nexport const MrlPanelFooter = React.forwardRef<HTMLElement, MrlPanelFooterProps>(\n\tfunction MrlPanelFooter({ children, hasDivider, className, ...rest }, ref): JSX.Element {\n\t\treturn (\n\t\t\t<footer\n\t\t\t\t{...rest}\n\t\t\t\tref={ref}\n\t\t\t\tclassName={classnames(styles['MrlPanelFooter'], 'MrlPanelFooter', className)}\n\t\t\t>\n\t\t\t\t{hasDivider && (\n\t\t\t\t\t<MrlDivider\n\t\t\t\t\t\tspacing=\"small\"\n\t\t\t\t\t\tclassName={classnames(styles['MrlPanelFooter--divider'], 'MrlPanelFooter--divider')}\n\t\t\t\t\t/>\n\t\t\t\t)}\n\t\t\t\t{typeof children === 'string' && <MrlText size=\"xsmall\" text={children} />}\n\t\t\t\t{typeof children === 'object' && children}\n\t\t\t</footer>\n\t\t);\n\t}\n);\n"],"names":["MrlPanelFooter","React","forwardRef","_ref","ref","children","hasDivider","className","rest","_objectWithoutProperties","_excluded","createElement","_extends","classnames","styles","MrlDivider","spacing","MrlText","size","text","_typeof"],"mappings":";;;;;;;;;AAMA;AACA;AACA;;AAaA;AACA;AACA;AACA;AACA;AACA;AACO,IAAMA,cAAc,gBAAGC,KAAK,CAACC,UAAU,CAC7C,SAASF,cAAcA,CAAAG,IAAA,EAA+CC,GAAG,EAAe;AAAA,EAAA,IAA9DC,QAAQ,GAAAF,IAAA,CAARE,QAAQ;IAAEC,UAAU,GAAAH,IAAA,CAAVG,UAAU;IAAEC,SAAS,GAAAJ,IAAA,CAATI,SAAS;AAAKC,IAAAA,IAAI,GAAAC,wBAAA,CAAAN,IAAA,EAAAO,SAAA,CAAA;AACjE,EAAA,oBACCT,KAAA,CAAAU,aAAA,CAAA,QAAA,EAAAC,QAAA,KACKJ,IAAI,EAAA;AACRJ,IAAAA,GAAG,EAAEA,GAAI;IACTG,SAAS,EAAEM,UAAU,CAACC,MAAM,CAAC,gBAAgB,CAAC,EAAE,gBAAgB,EAAEP,SAAS;AAAE,GAAA,CAAA,EAE5ED,UAAU,iBACVL,KAAA,CAAAU,aAAA,CAACI,UAAU,EAAA;AACVC,IAAAA,OAAO,EAAC,OAAO;IACfT,SAAS,EAAEM,UAAU,CAACC,MAAM,CAAC,yBAAyB,CAAC,EAAE,yBAAyB;GAClF,CACD,EACA,OAAOT,QAAQ,KAAK,QAAQ,iBAAIJ,KAAA,CAAAU,aAAA,CAACM,OAAO,EAAA;AAACC,IAAAA,IAAI,EAAC,QAAQ;AAACC,IAAAA,IAAI,EAAEd;GAAW,CAAC,EACzEe,OAAA,CAAOf,QAAQ,CAAA,KAAK,QAAQ,IAAIA,QAC1B,CAAC;AAEX,CACD;;;;"}
+{"version":3,"file":"MrlPanelFooter.js","sources":["../../../../../src/components/panel/MrlPanelFooter/MrlPanelFooter.tsx"],"sourcesContent":["import * as React from 'react';\nimport classnames from 'classnames';\nimport styles from './MrlPanelFooter.module.scss';\nimport { MrlText } from '../../text';\nimport { MrlDivider } from '../../divider';\n\n/**\n * Props for the MrlPanelFooter component.\n */\ninterface MrlPanelFooterProps extends React.ComponentPropsWithRef<'footer'> {\n\t/**\n\t * The children of the MrlPanelFooter component.\n\t */\n\tchildren?: React.ReactNode;\n\n\t/**\n\t * Specifies whether to show the divider.\n\t */\n\thasDivider?: boolean;\n}\n\n/**\n * MrlPanelFooter component.\n *\n * @param props The MrlPanelFooter component properties.\n * @returns The MrlPanelFooter component.\n */\nexport const MrlPanelFooter = React.forwardRef<HTMLElement, MrlPanelFooterProps>(\n\tfunction MrlPanelFooter({ children, hasDivider, className, ...rest }, ref): JSX.Element {\n\t\treturn (\n\t\t\t<footer\n\t\t\t\t{...rest}\n\t\t\t\tref={ref}\n\t\t\t\tclassName={classnames(styles['MrlPanelFooter'], 'MrlPanelFooter', className)}\n\t\t\t>\n\t\t\t\t{hasDivider && (\n\t\t\t\t\t<MrlDivider\n\t\t\t\t\t\tspacing=\"small\"\n\t\t\t\t\t\tclassName={classnames(styles['MrlPanelFooter--divider'], 'MrlPanelFooter--divider')}\n\t\t\t\t\t/>\n\t\t\t\t)}\n\t\t\t\t{typeof children === 'string' && <MrlText size=\"xsmall\" text={children} />}\n\t\t\t\t{typeof children === 'object' && children}\n\t\t\t</footer>\n\t\t);\n\t}\n);\n"],"names":["MrlPanelFooter","React","forwardRef","_ref","ref","children","hasDivider","className","rest","_objectWithoutProperties","_excluded","createElement","_extends","classnames","styles","MrlDivider","spacing","MrlText","size","text"],"mappings":";;;;;;;;;AAMA;AACA;AACA;;AAaA;AACA;AACA;AACA;AACA;AACA;AACO,IAAMA,cAAc,gBAAGC,KAAK,CAACC,UAAU,CAC7C,SAASF,cAAcA,CAAAG,IAAA,EAA+CC,GAAG,EAAe;AAAA,EAAA,IAA9DC,QAAQ,GAAAF,IAAA,CAARE,QAAQ;IAAEC,UAAU,GAAAH,IAAA,CAAVG,UAAU;IAAEC,SAAS,GAAAJ,IAAA,CAATI,SAAS;AAAKC,IAAAA,IAAI,GAAAC,wBAAA,CAAAN,IAAA,EAAAO,SAAA,CAAA;AACjE,EAAA,oBACCT,KAAA,CAAAU,aAAA,CAAA,QAAA,EAAAC,QAAA,KACKJ,IAAI,EAAA;AACRJ,IAAAA,GAAG,EAAEA,GAAI;IACTG,SAAS,EAAEM,UAAU,CAACC,MAAM,CAAC,gBAAgB,CAAC,EAAE,gBAAgB,EAAEP,SAAS;AAAE,GAAA,CAAA,EAE5ED,UAAU,iBACVL,KAAA,CAAAU,aAAA,CAACI,UAAU,EAAA;AACVC,IAAAA,OAAO,EAAC,OAAO;IACfT,SAAS,EAAEM,UAAU,CAACC,MAAM,CAAC,yBAAyB,CAAC,EAAE,yBAAyB;GAClF,CACD,EACA,OAAOT,QAAQ,KAAK,QAAQ,iBAAIJ,KAAA,CAAAU,aAAA,CAACM,OAAO,EAAA;AAACC,IAAAA,IAAI,EAAC,QAAQ;AAACC,IAAAA,IAAI,EAAEd;GAAW,CAAC,EACzE,OAAOA,QAAQ,KAAK,QAAQ,IAAIA,QAC1B,CAAC;AAEX,CACD;;;;"}

package/dist/esm/components/panel/MrlPanelStickyHeader/MrlPanelStickyHeader.js

@@ -15,7 +15,7 @@ var _excluded = ["children", "className"];
  * @param props The MrlPanelStickyHeader component properties.
  * @returns The MrlPanel component.
  */
-var MrlPanelStickyHeader = function MrlPanelStickyHeader(_ref) {
+var MrlPanelStickyHeader = _ref => {
   var children = _ref.children,
     className = _ref.className,
     rest = _objectWithoutProperties(_ref, _excluded);

package/dist/esm/components/panel/MrlPanelStickyHeader/MrlPanelStickyHeader.js.map

@@ -1 +1 @@
-{"version":3,"file":"MrlPanelStickyHeader.js","sources":["../../../../../src/components/panel/MrlPanelStickyHeader/MrlPanelStickyHeader.tsx"],"sourcesContent":["import * as React from 'react';\nimport classnames from 'classnames';\nimport styles from './MrlPanelStickyHeader.module.scss';\n\n/**\n * Props for the MrlPanelStickyHeader component.\n */\ninterface MrlPanelStickyHeaderProps extends React.ComponentPropsWithRef<'div'> {\n\t/**\n\t * The children of the MrlPanelStickyHeader component.\n\t */\n\tchildren?: React.ReactNode;\n}\n\n/**\n * MrlPanelStickyHeader component.\n *\n * @param props The MrlPanelStickyHeader component properties.\n * @returns The MrlPanel component.\n */\nexport const MrlPanelStickyHeader = ({\n\tchildren,\n\tclassName,\n\t...rest\n}: MrlPanelStickyHeaderProps): JSX.Element => {\n\treturn (\n\t\t<div\n\t\t\t{...rest}\n\t\t\tclassName={classnames(styles['MrlPanelStickyHeader'], 'MrlPanelStickyHeader', className)}\n\t\t>\n\t\t\t{children}\n\t\t</div>\n\t);\n};\n"],"names":["MrlPanelStickyHeader","_ref","children","className","rest","_objectWithoutProperties","_excluded","React","createElement","_extends","classnames","styles"],"mappings":";;;;;;;AAIA;AACA;AACA;;AAQA;AACA;AACA;AACA;AACA;AACA;IACaA,oBAAoB,GAAG,SAAvBA,oBAAoBA,CAAAC,IAAA,EAIa;AAAA,EAAA,IAH7CC,QAAQ,GAAAD,IAAA,CAARC,QAAQ;IACRC,SAAS,GAAAF,IAAA,CAATE,SAAS;AACNC,IAAAA,IAAI,GAAAC,wBAAA,CAAAJ,IAAA,EAAAK,SAAA,CAAA;AAEP,EAAA,oBACCC,KAAA,CAAAC,aAAA,CAAA,KAAA,EAAAC,QAAA,KACKL,IAAI,EAAA;IACRD,SAAS,EAAEO,UAAU,CAACC,MAAM,CAAC,sBAAsB,CAAC,EAAE,sBAAsB,EAAER,SAAS;AAAE,GAAA,CAAA,EAExFD,QACG,CAAC;AAER;;;;"}
+{"version":3,"file":"MrlPanelStickyHeader.js","sources":["../../../../../src/components/panel/MrlPanelStickyHeader/MrlPanelStickyHeader.tsx"],"sourcesContent":["import * as React from 'react';\nimport classnames from 'classnames';\nimport styles from './MrlPanelStickyHeader.module.scss';\n\n/**\n * Props for the MrlPanelStickyHeader component.\n */\ninterface MrlPanelStickyHeaderProps extends React.ComponentPropsWithRef<'div'> {\n\t/**\n\t * The children of the MrlPanelStickyHeader component.\n\t */\n\tchildren?: React.ReactNode;\n}\n\n/**\n * MrlPanelStickyHeader component.\n *\n * @param props The MrlPanelStickyHeader component properties.\n * @returns The MrlPanel component.\n */\nexport const MrlPanelStickyHeader = ({\n\tchildren,\n\tclassName,\n\t...rest\n}: MrlPanelStickyHeaderProps): JSX.Element => {\n\treturn (\n\t\t<div\n\t\t\t{...rest}\n\t\t\tclassName={classnames(styles['MrlPanelStickyHeader'], 'MrlPanelStickyHeader', className)}\n\t\t>\n\t\t\t{children}\n\t\t</div>\n\t);\n};\n"],"names":["MrlPanelStickyHeader","_ref","children","className","rest","_objectWithoutProperties","_excluded","React","createElement","_extends","classnames","styles"],"mappings":";;;;;;;AAIA;AACA;AACA;;AAQA;AACA;AACA;AACA;AACA;AACA;AACO,IAAMA,oBAAoB,GAAGC,IAAA,IAIU;AAAA,EAAA,IAH7CC,QAAQ,GAAAD,IAAA,CAARC,QAAQ;IACRC,SAAS,GAAAF,IAAA,CAATE,SAAS;AACNC,IAAAA,IAAI,GAAAC,wBAAA,CAAAJ,IAAA,EAAAK,SAAA,CAAA;AAEP,EAAA,oBACCC,KAAA,CAAAC,aAAA,CAAA,KAAA,EAAAC,QAAA,KACKL,IAAI,EAAA;IACRD,SAAS,EAAEO,UAAU,CAACC,MAAM,CAAC,sBAAsB,CAAC,EAAE,sBAAsB,EAAER,SAAS;AAAE,GAAA,CAAA,EAExFD,QACG,CAAC;AAER;;;;"}