@drivy/cobalt 2.19.0 → 2.19.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/components/Modal/index.js +6 -5
- package/components/Modal/index.js.map +1 -1
- package/components/ProgressBanner/index.js +5 -3
- package/components/ProgressBanner/index.js.map +1 -1
- package/components/Sidepanel/index.js +7 -4
- package/components/Sidepanel/index.js.map +1 -1
- package/package.json +1 -1
- package/styles/components/Modal/index.scss +14 -2
- package/styles/components/ProgressBanner/index.scss +7 -0
- package/styles/components/Sidepanel/index.scss +9 -3
- package/types/src/components/Modal/index.d.ts +1 -0
- package/types/src/components/ProgressBanner/index.d.ts +2 -1
- package/types/src/components/Sidepanel/index.d.ts +2 -1
|
@@ -8,7 +8,7 @@ import ModalHeader from './ModalHeader.js';
|
|
|
8
8
|
// Only for the API, render nothing, we use ModalFooterInternal internally
|
|
9
9
|
const ModalFooterAPI = (_props) => null;
|
|
10
10
|
const isModalFooterAPIComponent = (component) => React.isValidElement(component) && component.type === ModalFooterAPI;
|
|
11
|
-
const Modal = forwardRef(({ isOpen, close, className, initialFocusRef, "aria-label": ariaLabel, title, children, overflowHidden = true, bodySpacing = true, fullWidth, fullHeight, onHidden, onShow, skipAnimation, onDismissAttempt, }, ref) => {
|
|
11
|
+
const Modal = forwardRef(({ isOpen, close, className, initialFocusRef, "aria-label": ariaLabel, title, children, overflowHidden = true, bodySpacing = true, fullWidth, fullHeight, fullScreen, onHidden, onShow, skipAnimation, onDismissAttempt, }, ref) => {
|
|
12
12
|
useEffect(() => {
|
|
13
13
|
isOpen && (onShow === null || onShow === void 0 ? void 0 : onShow());
|
|
14
14
|
}, [onShow, isOpen]);
|
|
@@ -19,15 +19,16 @@ const Modal = forwardRef(({ isOpen, close, className, initialFocusRef, "aria-lab
|
|
|
19
19
|
}, onExitComplete: onHidden, initialFocusEl: initialFocusRef && (() => initialFocusRef.current), onPointerDownOutside: close ? undefined : onDismissAttempt, lazyMount: true,
|
|
20
20
|
// For some reason, onHidden can sometimes not be called if we use unmountOnExit
|
|
21
21
|
unmountOnExit: !onHidden, children: jsx(Portal, { children: jsx(Dialog.Backdrop, { className: cx("cobalt-modal__overlay", {
|
|
22
|
-
"cobalt-modal--skipAnimation__enter": skipAnimation === null || skipAnimation === void 0 ? void 0 : skipAnimation.enter,
|
|
23
|
-
"cobalt-modal--skipAnimation__leave": skipAnimation === null || skipAnimation === void 0 ? void 0 : skipAnimation.leave,
|
|
22
|
+
"cobalt-modal--skipAnimation__enter": (skipAnimation === null || skipAnimation === void 0 ? void 0 : skipAnimation.enter) || fullScreen,
|
|
23
|
+
"cobalt-modal--skipAnimation__leave": (skipAnimation === null || skipAnimation === void 0 ? void 0 : skipAnimation.leave) || fullScreen,
|
|
24
24
|
}), children: jsx(Dialog.Positioner, { className: cx("cobalt-modal", {
|
|
25
25
|
"cobalt-modal--overflowHidden": overflowHidden,
|
|
26
26
|
"cobalt-modal--fullHeight": fullHeight,
|
|
27
27
|
"cobalt-modal--fullWidth": fullWidth,
|
|
28
|
+
"cobalt-modal--fullScreen": fullScreen,
|
|
28
29
|
}), ref: ref, children: jsxs(Dialog.Content, { className: cx("cobalt-modal__content", className, {
|
|
29
|
-
"cobalt-modal--skipAnimation__enter": skipAnimation === null || skipAnimation === void 0 ? void 0 : skipAnimation.enter,
|
|
30
|
-
"cobalt-modal--skipAnimation__leave": skipAnimation === null || skipAnimation === void 0 ? void 0 : skipAnimation.leave,
|
|
30
|
+
"cobalt-modal--skipAnimation__enter": (skipAnimation === null || skipAnimation === void 0 ? void 0 : skipAnimation.enter) || fullScreen,
|
|
31
|
+
"cobalt-modal--skipAnimation__leave": (skipAnimation === null || skipAnimation === void 0 ? void 0 : skipAnimation.leave) || fullScreen,
|
|
31
32
|
}), children: [jsx(ModalHeader, { title: title, close: close }), jsxs(Dialog.Description, { className: "cobalt-modal-body__wrapper", children: [jsx("div", { className: cx("cobalt-modal-body", {
|
|
32
33
|
"cobalt-modal-body--bodySpacing": bodySpacing,
|
|
33
34
|
"cobalt-modal-body--hasFooter": hasFooter,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":["../../../src/components/Modal/index.tsx"],"sourcesContent":["import { Dialog, Portal } from \"@ark-ui/react\"\nimport cx from \"classnames\"\nimport React, { forwardRef, isValidElement, useEffect } from \"react\"\nimport ModalFooter, { type ModalFooterPropsType } from \"./ModalFooter\"\nimport ModalHeader from \"./ModalHeader\"\n\nexport type ModalPropsType = {\n /**\n * mandatory for A11y\n */\n \"aria-label\": string\n /**\n * Function called to close the modal, providing it make the modal closeable\n */\n close?: () => void\n /**\n * React.ref of the element to focus first when the modal opens\n */\n initialFocusRef?: React.RefObject<HTMLElement>\n /**\n * State to show or hide the modal/dialog\n */\n isOpen: boolean\n /**\n * Custom css classes to add to the modal\n */\n className?: string\n /**\n * Action to fire if the user try to dismiss when the modal is not closeable\n */\n onDismissAttempt?: () => void\n /**\n * Listener called when the modal has been fully hidden\n */\n onHidden?: () => void\n /**\n * Listener called when the modal begins to show\n */\n onShow?: () => void\n /**\n * Modal title\n */\n title?: React.ReactNode\n /**\n * Disable/Enable body paddings (enabled by default)\n */\n bodySpacing?: boolean\n /**\n * Disable/Enable hidding overflowing absolute elements (enabled by default)\n */\n overflowHidden?: boolean\n /**\n * Disable enter/leave animation (animation enabled by default)\n */\n skipAnimation?: {\n enter: boolean\n leave: boolean\n }\n /**\n * Disable modal max-width limit\n */\n fullWidth?: boolean\n /**\n * Always take the full height of the screen\n */\n fullHeight?: boolean\n /**\n * Remove the modal from the DOM on hidden (enabled by default)\n */\n unmountOnHidden?: boolean\n /**\n * Modal body content\n */\n children: React.ReactNode\n}\n\n// Only for the API, render nothing, we use ModalFooterInternal internally\nexport const ModalFooterAPI = (_props: ModalFooterPropsType) => null\n\nexport const isModalFooterAPIComponent = (\n component: React.ReactNode,\n): component is React.ReactElement<ModalFooterPropsType> =>\n React.isValidElement(component) && component.type === ModalFooterAPI\n\nconst Modal = forwardRef<HTMLDivElement, ModalPropsType>(\n (\n {\n isOpen,\n close,\n className,\n initialFocusRef,\n \"aria-label\": ariaLabel,\n title,\n children,\n overflowHidden = true,\n bodySpacing = true,\n fullWidth,\n fullHeight,\n onHidden,\n onShow,\n skipAnimation,\n onDismissAttempt,\n }: ModalPropsType,\n ref,\n ) => {\n useEffect(() => {\n isOpen && onShow?.()\n }, [onShow, isOpen])\n\n const modalFooter = React.Children.toArray(children).find((c) =>\n isModalFooterAPIComponent(c),\n )\n const hasFooter = isValidElement(modalFooter)\n\n return (\n <Dialog.Root\n aria-label={ariaLabel}\n open={isOpen}\n onOpenChange={(e) => {\n e.open ? onShow?.() : close?.()\n }}\n onExitComplete={onHidden}\n initialFocusEl={initialFocusRef && (() => initialFocusRef.current)}\n onPointerDownOutside={close ? undefined : onDismissAttempt}\n lazyMount\n // For some reason, onHidden can sometimes not be called if we use unmountOnExit\n unmountOnExit={!onHidden}\n >\n <Portal>\n <Dialog.Backdrop\n className={cx(\"cobalt-modal__overlay\", {\n \"cobalt-modal--skipAnimation__enter\"
|
|
1
|
+
{"version":3,"file":"index.js","sources":["../../../src/components/Modal/index.tsx"],"sourcesContent":["import { Dialog, Portal } from \"@ark-ui/react\"\nimport cx from \"classnames\"\nimport React, { forwardRef, isValidElement, useEffect } from \"react\"\nimport ModalFooter, { type ModalFooterPropsType } from \"./ModalFooter\"\nimport ModalHeader from \"./ModalHeader\"\n\nexport type ModalPropsType = {\n /**\n * mandatory for A11y\n */\n \"aria-label\": string\n /**\n * Function called to close the modal, providing it make the modal closeable\n */\n close?: () => void\n /**\n * React.ref of the element to focus first when the modal opens\n */\n initialFocusRef?: React.RefObject<HTMLElement>\n /**\n * State to show or hide the modal/dialog\n */\n isOpen: boolean\n /**\n * Custom css classes to add to the modal\n */\n className?: string\n /**\n * Action to fire if the user try to dismiss when the modal is not closeable\n */\n onDismissAttempt?: () => void\n /**\n * Listener called when the modal has been fully hidden\n */\n onHidden?: () => void\n /**\n * Listener called when the modal begins to show\n */\n onShow?: () => void\n /**\n * Modal title\n */\n title?: React.ReactNode\n /**\n * Disable/Enable body paddings (enabled by default)\n */\n bodySpacing?: boolean\n /**\n * Disable/Enable hidding overflowing absolute elements (enabled by default)\n */\n overflowHidden?: boolean\n /**\n * Disable enter/leave animation (animation enabled by default)\n */\n skipAnimation?: {\n enter: boolean\n leave: boolean\n }\n /**\n * Disable modal max-width limit\n */\n fullWidth?: boolean\n /**\n * Always take the full height of the screen\n */\n fullHeight?: boolean\n fullScreen?: boolean\n /**\n * Remove the modal from the DOM on hidden (enabled by default)\n */\n unmountOnHidden?: boolean\n /**\n * Modal body content\n */\n children: React.ReactNode\n}\n\n// Only for the API, render nothing, we use ModalFooterInternal internally\nexport const ModalFooterAPI = (_props: ModalFooterPropsType) => null\n\nexport const isModalFooterAPIComponent = (\n component: React.ReactNode,\n): component is React.ReactElement<ModalFooterPropsType> =>\n React.isValidElement(component) && component.type === ModalFooterAPI\n\nconst Modal = forwardRef<HTMLDivElement, ModalPropsType>(\n (\n {\n isOpen,\n close,\n className,\n initialFocusRef,\n \"aria-label\": ariaLabel,\n title,\n children,\n overflowHidden = true,\n bodySpacing = true,\n fullWidth,\n fullHeight,\n fullScreen,\n onHidden,\n onShow,\n skipAnimation,\n onDismissAttempt,\n }: ModalPropsType,\n ref,\n ) => {\n useEffect(() => {\n isOpen && onShow?.()\n }, [onShow, isOpen])\n\n const modalFooter = React.Children.toArray(children).find((c) =>\n isModalFooterAPIComponent(c),\n )\n const hasFooter = isValidElement(modalFooter)\n\n return (\n <Dialog.Root\n aria-label={ariaLabel}\n open={isOpen}\n onOpenChange={(e) => {\n e.open ? onShow?.() : close?.()\n }}\n onExitComplete={onHidden}\n initialFocusEl={initialFocusRef && (() => initialFocusRef.current)}\n onPointerDownOutside={close ? undefined : onDismissAttempt}\n lazyMount\n // For some reason, onHidden can sometimes not be called if we use unmountOnExit\n unmountOnExit={!onHidden}\n >\n <Portal>\n <Dialog.Backdrop\n className={cx(\"cobalt-modal__overlay\", {\n \"cobalt-modal--skipAnimation__enter\":\n skipAnimation?.enter || fullScreen,\n \"cobalt-modal--skipAnimation__leave\":\n skipAnimation?.leave || fullScreen,\n })}\n >\n <Dialog.Positioner\n className={cx(\"cobalt-modal\", {\n \"cobalt-modal--overflowHidden\": overflowHidden,\n \"cobalt-modal--fullHeight\": fullHeight,\n \"cobalt-modal--fullWidth\": fullWidth,\n \"cobalt-modal--fullScreen\": fullScreen,\n })}\n ref={ref}\n >\n <Dialog.Content\n className={cx(\"cobalt-modal__content\", className, {\n \"cobalt-modal--skipAnimation__enter\":\n skipAnimation?.enter || fullScreen,\n \"cobalt-modal--skipAnimation__leave\":\n skipAnimation?.leave || fullScreen,\n })}\n >\n <ModalHeader title={title} close={close} />\n <Dialog.Description className=\"cobalt-modal-body__wrapper\">\n <div\n className={cx(\"cobalt-modal-body\", {\n \"cobalt-modal-body--bodySpacing\": bodySpacing,\n \"cobalt-modal-body--hasFooter\": hasFooter,\n })}\n >\n {children}\n </div>\n {hasFooter && <ModalFooter {...modalFooter.props} />}\n </Dialog.Description>\n </Dialog.Content>\n </Dialog.Positioner>\n </Dialog.Backdrop>\n </Portal>\n </Dialog.Root>\n )\n },\n)\n\nModal.displayName = \"Modal\"\n\nexport default Object.assign(Modal, { Footer: ModalFooterAPI })\n\nexport { default as MultiStepModal, type ModalStepType } from \"./MultiStepModal\"\n"],"names":["_jsx","_jsxs"],"mappings":"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"}
|
|
@@ -3,14 +3,16 @@ import cx from 'classnames';
|
|
|
3
3
|
import '../Icon/index.js';
|
|
4
4
|
import { ProgressCircular } from '../ProgressCircular/index.js';
|
|
5
5
|
import CheckIcon from '../Icon/__generated__/CheckIcon.js';
|
|
6
|
+
import ChevronRightIcon from '../Icon/__generated__/ChevronRightIcon.js';
|
|
6
7
|
|
|
7
|
-
function ProgressBanner({ progress, title, description, completed = false, animated = false, fullWidth = false, className, }) {
|
|
8
|
-
|
|
8
|
+
function ProgressBanner({ progress, title, description, completed = false, animated = false, fullWidth = false, className, href, }) {
|
|
9
|
+
const Root = href != null ? "a" : "div";
|
|
10
|
+
return (jsxs(Root, { ...(href != null ? { href } : null), className: cx("cobalt-progressBanner", className, {
|
|
9
11
|
"cobalt-progressBanner--completed": completed,
|
|
10
12
|
"cobalt-progressBanner--fullWidth": fullWidth,
|
|
11
13
|
}), children: [progress && !completed && (jsx(ProgressCircular, { size: 48, progress: (progress.done * 100) / progress.total, animated: animated, children: jsxs("div", { className: "cobalt-progressBanner__progress-container", children: [progress.done, "/", progress.total] }) })), completed && (jsx("div", { className: cx("cobalt-progressBanner__completed-icon-container", {
|
|
12
14
|
"cobalt-progressBanner__completed-icon-container--animated": animated,
|
|
13
|
-
}), children: jsx(CheckIcon, { color: "success", size: 32 }) })), jsxs("div", { className: "cobalt-progressBanner__text-container", children: [jsx("div", { className: "cobalt-progressBanner__title", children: title }), jsx("div", { className: "cobalt-progressBanner__description", children: description })] })] }));
|
|
15
|
+
}), children: jsx(CheckIcon, { color: "success", size: 32 }) })), jsxs("div", { className: "cobalt-progressBanner__text-container", children: [jsx("div", { className: "cobalt-progressBanner__title", children: title }), jsx("div", { className: "cobalt-progressBanner__description", children: description })] }), href && (jsx("div", { className: "c-flex", children: jsx(ChevronRightIcon, {}) }))] }));
|
|
14
16
|
}
|
|
15
17
|
|
|
16
18
|
export { ProgressBanner };
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":["../../../src/components/ProgressBanner/index.tsx"],"sourcesContent":["import cx from \"classnames\"\nimport { CheckIcon } from \"../Icon\"\nimport { ProgressCircular } from \"../ProgressCircular\"\n\ntype ProgressBannerPropsType = {\n progress?: {\n done: number\n total: number\n }\n title: string\n description: string\n completed?: boolean\n animated?: boolean\n fullWidth?: boolean\n className?: string\n}\n\nexport function ProgressBanner({\n progress,\n title,\n description,\n completed = false,\n animated = false,\n fullWidth = false,\n className,\n}: ProgressBannerPropsType) {\n return (\n <
|
|
1
|
+
{"version":3,"file":"index.js","sources":["../../../src/components/ProgressBanner/index.tsx"],"sourcesContent":["import cx from \"classnames\"\nimport type React from \"react\"\nimport { CheckIcon, ChevronRightIcon } from \"../Icon\"\nimport { ProgressCircular } from \"../ProgressCircular\"\n\ntype ProgressBannerPropsType = {\n progress?: {\n done: number\n total: number\n }\n title: string\n description: string\n completed?: boolean\n animated?: boolean\n fullWidth?: boolean\n className?: string\n href?: string\n}\n\nexport function ProgressBanner({\n progress,\n title,\n description,\n completed = false,\n animated = false,\n fullWidth = false,\n className,\n href,\n}: ProgressBannerPropsType) {\n const Root: React.ElementType = href != null ? \"a\" : \"div\"\n return (\n <Root\n {...(href != null ? { href } : null)}\n className={cx(\"cobalt-progressBanner\", className, {\n \"cobalt-progressBanner--completed\": completed,\n \"cobalt-progressBanner--fullWidth\": fullWidth,\n })}\n >\n {progress && !completed && (\n <ProgressCircular\n size={48}\n progress={(progress.done * 100) / progress.total}\n animated={animated}\n >\n <div className=\"cobalt-progressBanner__progress-container\">\n {progress.done}/{progress.total}\n </div>\n </ProgressCircular>\n )}\n\n {completed && (\n <div\n className={cx(\"cobalt-progressBanner__completed-icon-container\", {\n \"cobalt-progressBanner__completed-icon-container--animated\":\n animated,\n })}\n >\n <CheckIcon color=\"success\" size={32} />\n </div>\n )}\n\n <div className=\"cobalt-progressBanner__text-container\">\n <div className=\"cobalt-progressBanner__title\">{title}</div>\n <div className=\"cobalt-progressBanner__description\">{description}</div>\n </div>\n\n {href && (\n <div className=\"c-flex\">\n <ChevronRightIcon />\n </div>\n )}\n </Root>\n )\n}\n"],"names":["_jsxs","_jsx"],"mappings":";;;;;;;AAmBM,SAAU,cAAc,CAAC,EAC7B,QAAQ,EACR,KAAK,EACL,WAAW,EACX,SAAS,GAAG,KAAK,EACjB,QAAQ,GAAG,KAAK,EAChB,SAAS,GAAG,KAAK,EACjB,SAAS,EACT,IAAI,GACoB,EAAA;AACxB,IAAA,MAAM,IAAI,GAAsB,IAAI,IAAI,IAAI,GAAG,GAAG,GAAG,KAAK,CAAA;IAC1D,QACEA,IAAC,CAAA,IAAI,EACC,EAAA,IAAC,IAAI,IAAI,IAAI,GAAG,EAAE,IAAI,EAAE,GAAG,IAAI,CAAC,EACpC,SAAS,EAAE,EAAE,CAAC,uBAAuB,EAAE,SAAS,EAAE;AAChD,YAAA,kCAAkC,EAAE,SAAS;AAC7C,YAAA,kCAAkC,EAAE,SAAS;SAC9C,CAAC,EAAA,QAAA,EAAA,CAED,QAAQ,IAAI,CAAC,SAAS,KACrBC,GAAC,CAAA,gBAAgB,EACf,EAAA,IAAI,EAAE,EAAE,EACR,QAAQ,EAAE,CAAC,QAAQ,CAAC,IAAI,GAAG,GAAG,IAAI,QAAQ,CAAC,KAAK,EAChD,QAAQ,EAAE,QAAQ,EAElB,QAAA,EAAAD,IAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,2CAA2C,EAAA,QAAA,EAAA,CACvD,QAAQ,CAAC,IAAI,EAAA,GAAA,EAAG,QAAQ,CAAC,KAAK,CAAA,EAAA,CAC3B,EACW,CAAA,CACpB,EAEA,SAAS,KACRC,GACE,CAAA,KAAA,EAAA,EAAA,SAAS,EAAE,EAAE,CAAC,iDAAiD,EAAE;AAC/D,oBAAA,2DAA2D,EACzD,QAAQ;iBACX,CAAC,EAAA,QAAA,EAEFA,GAAC,CAAA,SAAS,EAAC,EAAA,KAAK,EAAC,SAAS,EAAC,IAAI,EAAE,EAAE,EAAA,CAAI,GACnC,CACP,EAEDD,IAAK,CAAA,KAAA,EAAA,EAAA,SAAS,EAAC,uCAAuC,aACpDC,GAAK,CAAA,KAAA,EAAA,EAAA,SAAS,EAAC,8BAA8B,EAAE,QAAA,EAAA,KAAK,GAAO,EAC3DA,GAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,oCAAoC,EAAA,QAAA,EAAE,WAAW,EAAO,CAAA,CAAA,EAAA,CACnE,EAEL,IAAI,KACHA,aAAK,SAAS,EAAC,QAAQ,EAAA,QAAA,EACrBA,GAAC,CAAA,gBAAgB,KAAG,EAChB,CAAA,CACP,CACI,EAAA,CAAA,EACR;AACH;;;;"}
|
|
@@ -4,6 +4,7 @@ import React, { useState, useEffect } from 'react';
|
|
|
4
4
|
import ReactDOM from 'react-dom';
|
|
5
5
|
import { getA11yOnClick } from '../../helpers/index.js';
|
|
6
6
|
import useBreakpoint from '../../hooks/useBreakpoint.js';
|
|
7
|
+
import Button from '../Buttons/Button/index.js';
|
|
7
8
|
import '../Icon/index.js';
|
|
8
9
|
import { Fixed } from '../Layout/Surfaces/index.js';
|
|
9
10
|
import Modal from '../Modal/index.js';
|
|
@@ -14,7 +15,7 @@ const SidepanelFooter = ({ children, className }) => {
|
|
|
14
15
|
};
|
|
15
16
|
// Memoized component to not render content when the panel is collapsing
|
|
16
17
|
function _SidepanelContent({ title, close, children }) {
|
|
17
|
-
return (jsxs(Fragment, { children: [title && (jsxs("div", { className: "c-flex c-gap-sm c-items-
|
|
18
|
+
return (jsxs(Fragment, { children: [title && (jsxs("div", { className: "c-flex c-gap-sm c-items-start c-px-sm c-py-md c-border-b c-border-outline", children: [jsx("div", { className: "c-text-title-md c-flex-1", children: title }), close && (jsx(Button, { className: "cobalt-sidepanel__close", icon: jsx(CloseIcon, {}), text: true, ...getA11yOnClick(close) }))] })), children] }));
|
|
18
19
|
}
|
|
19
20
|
function areSidepanelContentEqual(_prevProps, nextProps) {
|
|
20
21
|
return !nextProps.isOpen;
|
|
@@ -24,7 +25,7 @@ SidepanelContent.displayName = "SidepanelContent";
|
|
|
24
25
|
// Only for the API, render nothing
|
|
25
26
|
const SidepanelFooterAPI = (_props) => null;
|
|
26
27
|
const isSidepanelFooterAPIComponent = (component) => React.isValidElement(component) && component.type === SidepanelFooterAPI;
|
|
27
|
-
const _Sidepanel = ({ isOpen, title, close, withDesktopOverlay, width = 420, children, }) => {
|
|
28
|
+
const _Sidepanel = ({ isOpen, title, close, withDesktopOverlay, onPointerDownOutside, width = 420, children, }) => {
|
|
28
29
|
const { isMobile } = useBreakpoint();
|
|
29
30
|
// To display box-shadow when visible. We can't rely on isOpen because it triggers the collapse animation and so the box shadow would not be set during the transition
|
|
30
31
|
const [isPanelVisible, setIsPanelVisible] = useState(false);
|
|
@@ -36,12 +37,14 @@ const _Sidepanel = ({ isOpen, title, close, withDesktopOverlay, width = 420, chi
|
|
|
36
37
|
if (React.isValidElement(sidepanelFooter)) {
|
|
37
38
|
footer = isMobile ? (jsx(Modal.Footer, { ...sidepanelFooter.props })) : (jsx(SidepanelFooter, { ...sidepanelFooter.props }));
|
|
38
39
|
}
|
|
39
|
-
return isMobile ? (jsxs(Modal, { "aria-label": "Sidepanel", isOpen: isOpen, bodySpacing: false, close: close, title: title, children: [children, footer] })) : (ReactDOM.createPortal(jsxs(Fragment, { children: [jsx("div", { className: cx("cobalt-sidepanel", {
|
|
40
|
+
return isMobile ? (jsxs(Modal, { "aria-label": "Sidepanel", isOpen: isOpen, bodySpacing: false, close: close, title: title, fullScreen: true, children: [children, footer] })) : (ReactDOM.createPortal(jsxs(Fragment, { children: [jsx("div", { className: cx("cobalt-sidepanel", {
|
|
40
41
|
"cobalt-sidepanel--show": isOpen,
|
|
41
42
|
"cobalt-sidepanel--visible": isPanelVisible,
|
|
42
43
|
}), onTransitionEnd: () => {
|
|
43
44
|
!isOpen && setIsPanelVisible(false);
|
|
44
|
-
}, children: jsx(Fixed, { width: width, isFullHeight: true, children: jsxs(SidepanelContent, { isOpen: isOpen, title: title, close: close, children: [children, footer] }) }) }), withDesktopOverlay && jsx("div", { className: "cobalt-sidepanel-overlay"
|
|
45
|
+
}, children: jsx(Fixed, { width: width, isFullHeight: true, children: jsxs(SidepanelContent, { isOpen: isOpen, title: title, close: close, children: [children, footer] }) }) }), withDesktopOverlay && (jsx("div", { className: "cobalt-sidepanel-overlay", ...(onPointerDownOutside
|
|
46
|
+
? getA11yOnClick(onPointerDownOutside)
|
|
47
|
+
: {}) }))] }), document.body));
|
|
45
48
|
};
|
|
46
49
|
_Sidepanel.displayName = "Sidepanel";
|
|
47
50
|
const Sidepanel = Object.assign(_Sidepanel, {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":["../../../src/components/Sidepanel/index.tsx"],"sourcesContent":["import cx from \"classnames\"\nimport React, { type ComponentProps, useEffect, useState } from \"react\"\nimport ReactDOM from \"react-dom\"\nimport { getA11yOnClick } from \"../../helpers\"\nimport useBreakpoint from \"../../hooks/useBreakpoint\"\nimport { CloseIcon } from \"../Icon\"\nimport { Fixed } from \"../Layout/Surfaces\"\nimport Modal from \"../Modal\"\n\ntype SidepanelFooterPropsType = React.PropsWithChildren<{\n className?: string\n}>\n\nconst SidepanelFooter = ({ children, className }: SidepanelFooterPropsType) => {\n return (\n <div className={cx(\"c-p-sm c-border-t c-border-outline\", className)}>\n {children}\n </div>\n )\n}\n\ntype SidepanelPropsType = React.PropsWithChildren<{\n isOpen: boolean\n title?: string\n close?: () => void\n width?: ComponentProps<typeof Fixed>[\"width\"]\n withDesktopOverlay?: boolean\n}>\n\n// Memoized component to not render content when the panel is collapsing\nfunction _SidepanelContent({ title, close, children }: SidepanelPropsType) {\n return (\n <>\n {title && (\n <div className=\"c-flex c-gap-sm c-items-
|
|
1
|
+
{"version":3,"file":"index.js","sources":["../../../src/components/Sidepanel/index.tsx"],"sourcesContent":["import cx from \"classnames\"\nimport React, { type ComponentProps, useEffect, useState } from \"react\"\nimport ReactDOM from \"react-dom\"\nimport { getA11yOnClick } from \"../../helpers\"\nimport useBreakpoint from \"../../hooks/useBreakpoint\"\nimport Button from \"../Buttons/Button\"\nimport { CloseIcon } from \"../Icon\"\nimport { Fixed } from \"../Layout/Surfaces\"\nimport Modal from \"../Modal\"\n\ntype SidepanelFooterPropsType = React.PropsWithChildren<{\n className?: string\n}>\n\nconst SidepanelFooter = ({ children, className }: SidepanelFooterPropsType) => {\n return (\n <div className={cx(\"c-p-sm c-border-t c-border-outline\", className)}>\n {children}\n </div>\n )\n}\n\ntype SidepanelPropsType = React.PropsWithChildren<{\n isOpen: boolean\n title?: string\n close?: () => void\n width?: ComponentProps<typeof Fixed>[\"width\"]\n withDesktopOverlay?: boolean\n onPointerDownOutside?: () => void\n}>\n\n// Memoized component to not render content when the panel is collapsing\nfunction _SidepanelContent({ title, close, children }: SidepanelPropsType) {\n return (\n <>\n {title && (\n <div className=\"c-flex c-gap-sm c-items-start c-px-sm c-py-md c-border-b c-border-outline\">\n <div className=\"c-text-title-md c-flex-1\">{title}</div>\n {close && (\n <Button\n className=\"cobalt-sidepanel__close\"\n icon={<CloseIcon />}\n text\n {...getA11yOnClick(close)}\n />\n )}\n </div>\n )}\n {children}\n </>\n )\n}\n\nfunction areSidepanelContentEqual(\n _prevProps: SidepanelPropsType,\n nextProps: SidepanelPropsType,\n) {\n return !nextProps.isOpen\n}\n\nconst SidepanelContent = React.memo(_SidepanelContent, areSidepanelContentEqual)\nSidepanelContent.displayName = \"SidepanelContent\"\n\n// Only for the API, render nothing\nconst SidepanelFooterAPI = (_props: SidepanelFooterPropsType) => null\n\nconst isSidepanelFooterAPIComponent = (\n component: React.ReactNode,\n): component is React.ReactElement<SidepanelFooterPropsType> =>\n React.isValidElement(component) && component.type === SidepanelFooterAPI\n\nconst _Sidepanel = ({\n isOpen,\n title,\n close,\n withDesktopOverlay,\n onPointerDownOutside,\n width = 420,\n children,\n}: SidepanelPropsType) => {\n const { isMobile } = useBreakpoint()\n\n // To display box-shadow when visible. We can't rely on isOpen because it triggers the collapse animation and so the box shadow would not be set during the transition\n const [isPanelVisible, setIsPanelVisible] = useState(false)\n\n useEffect(() => {\n isOpen && setIsPanelVisible(true)\n }, [isOpen])\n\n const sidepanelFooter = React.Children.toArray(children).find((c) =>\n isSidepanelFooterAPIComponent(c),\n )\n\n let footer: React.ReactNode = null\n if (React.isValidElement(sidepanelFooter)) {\n footer = isMobile ? (\n <Modal.Footer {...sidepanelFooter.props}></Modal.Footer>\n ) : (\n <SidepanelFooter {...sidepanelFooter.props} />\n )\n }\n\n return isMobile ? (\n <Modal\n aria-label={\"Sidepanel\"}\n isOpen={isOpen}\n bodySpacing={false}\n close={close}\n title={title}\n fullScreen\n >\n {children}\n {footer}\n </Modal>\n ) : (\n ReactDOM.createPortal(\n <>\n <div\n className={cx(\"cobalt-sidepanel\", {\n \"cobalt-sidepanel--show\": isOpen,\n \"cobalt-sidepanel--visible\": isPanelVisible,\n })}\n onTransitionEnd={() => {\n !isOpen && setIsPanelVisible(false)\n }}\n >\n <Fixed width={width} isFullHeight>\n <SidepanelContent isOpen={isOpen} title={title} close={close}>\n {children}\n {footer}\n </SidepanelContent>\n </Fixed>\n </div>\n {withDesktopOverlay && (\n <div\n className=\"cobalt-sidepanel-overlay\"\n {...(onPointerDownOutside\n ? getA11yOnClick(onPointerDownOutside)\n : {})}\n ></div>\n )}\n </>,\n document.body,\n )\n )\n}\n\n_Sidepanel.displayName = \"Sidepanel\"\n\nexport const Sidepanel = Object.assign(_Sidepanel, {\n Footer: SidepanelFooterAPI,\n})\n"],"names":["_jsx","_jsxs","_Fragment"],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -89,6 +89,18 @@
|
|
|
89
89
|
}
|
|
90
90
|
}
|
|
91
91
|
|
|
92
|
+
&--fullScreen {
|
|
93
|
+
height: 100%;
|
|
94
|
+
|
|
95
|
+
.cobalt-modal__content:not([hidden]) {
|
|
96
|
+
height: 100%;
|
|
97
|
+
max-width: unset;
|
|
98
|
+
max-height: unset;
|
|
99
|
+
|
|
100
|
+
border-radius: 0;
|
|
101
|
+
}
|
|
102
|
+
}
|
|
103
|
+
|
|
92
104
|
&--overflowHidden {
|
|
93
105
|
.cobalt-modal__content:not([hidden]) {
|
|
94
106
|
overflow: hidden;
|
|
@@ -104,13 +116,13 @@
|
|
|
104
116
|
}
|
|
105
117
|
|
|
106
118
|
&-header {
|
|
107
|
-
@apply c-border-b c-border-b-outline c-p-md;
|
|
119
|
+
@apply c-border-b c-border-b-outline c-p-md c-gap-sm;
|
|
108
120
|
display: flex;
|
|
109
121
|
justify-content: space-between;
|
|
110
122
|
align-items: center;
|
|
111
123
|
|
|
112
124
|
&__title {
|
|
113
|
-
@apply c-text-title-md c-text-onSurface c-m-none;
|
|
125
|
+
@apply c-text-title-md c-text-onSurface c-m-none c-flex-1;
|
|
114
126
|
}
|
|
115
127
|
|
|
116
128
|
&__close-button {
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
.cobalt-sidepanel {
|
|
2
|
-
@apply c-bg-surface;
|
|
2
|
+
@apply c-bg-surface c-rounded-tl-xl c-rounded-bl-xl;
|
|
3
3
|
|
|
4
4
|
position: fixed;
|
|
5
5
|
|
|
@@ -16,8 +16,8 @@
|
|
|
16
16
|
transform: translateX(100%);
|
|
17
17
|
|
|
18
18
|
transition-duration: 250ms;
|
|
19
|
-
transition-timing-function:
|
|
20
|
-
transition-property: transform;
|
|
19
|
+
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
|
20
|
+
transition-property: transform, box-shadow;
|
|
21
21
|
|
|
22
22
|
will-change: transform;
|
|
23
23
|
|
|
@@ -58,3 +58,9 @@
|
|
|
58
58
|
.cobalt-sidepanel--show + .cobalt-sidepanel-overlay {
|
|
59
59
|
opacity: 1;
|
|
60
60
|
}
|
|
61
|
+
|
|
62
|
+
.cobalt-sidepanel__close {
|
|
63
|
+
@apply c--mr-xs;
|
|
64
|
+
min-height: 32px;
|
|
65
|
+
min-width: 32px;
|
|
66
|
+
}
|
|
@@ -9,6 +9,7 @@ type ProgressBannerPropsType = {
|
|
|
9
9
|
animated?: boolean;
|
|
10
10
|
fullWidth?: boolean;
|
|
11
11
|
className?: string;
|
|
12
|
+
href?: string;
|
|
12
13
|
};
|
|
13
|
-
export declare function ProgressBanner({ progress, title, description, completed, animated, fullWidth, className, }: ProgressBannerPropsType): import("react/jsx-runtime").JSX.Element;
|
|
14
|
+
export declare function ProgressBanner({ progress, title, description, completed, animated, fullWidth, className, href, }: ProgressBannerPropsType): import("react/jsx-runtime").JSX.Element;
|
|
14
15
|
export {};
|
|
@@ -9,9 +9,10 @@ type SidepanelPropsType = React.PropsWithChildren<{
|
|
|
9
9
|
close?: () => void;
|
|
10
10
|
width?: ComponentProps<typeof Fixed>["width"];
|
|
11
11
|
withDesktopOverlay?: boolean;
|
|
12
|
+
onPointerDownOutside?: () => void;
|
|
12
13
|
}>;
|
|
13
14
|
export declare const Sidepanel: {
|
|
14
|
-
({ isOpen, title, close, withDesktopOverlay, width, children, }: SidepanelPropsType): import("react/jsx-runtime").JSX.Element;
|
|
15
|
+
({ isOpen, title, close, withDesktopOverlay, onPointerDownOutside, width, children, }: SidepanelPropsType): import("react/jsx-runtime").JSX.Element;
|
|
15
16
|
displayName: string;
|
|
16
17
|
} & {
|
|
17
18
|
Footer: (_props: SidepanelFooterPropsType) => null;
|