@drivy/cobalt 0.47.1 → 0.48.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -26,7 +26,7 @@ SidepanelContent.displayName = "SidepanelContent";
|
|
|
26
26
|
// Only for the API, render nothing
|
|
27
27
|
const SidepanelFooterAPI = (_props) => null;
|
|
28
28
|
const isSidepanelFooterAPIComponent = (component) => React.isValidElement(component) && component.type === SidepanelFooterAPI;
|
|
29
|
-
const _Sidepanel = ({ isOpen, title, close, children }) => {
|
|
29
|
+
const _Sidepanel = ({ isOpen, title, close, withDesktopOverlay, children, }) => {
|
|
30
30
|
const { isMobile } = useBreakpoint();
|
|
31
31
|
// 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
|
|
32
32
|
const [isPanelVisible, setIsPanelVisible] = useState(false);
|
|
@@ -40,15 +40,17 @@ const _Sidepanel = ({ isOpen, title, close, children }) => {
|
|
|
40
40
|
}
|
|
41
41
|
return isMobile ? (React.createElement(Modal, { "aria-label": "Sidepanel", isOpen: isOpen, bodySpacing: false, close: close, title: title },
|
|
42
42
|
children,
|
|
43
|
-
footer)) : (ReactDOM.createPortal(React.createElement(
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
43
|
+
footer)) : (ReactDOM.createPortal(React.createElement(React.Fragment, null,
|
|
44
|
+
React.createElement("div", { className: cx("cobalt-sidepanel", {
|
|
45
|
+
"cobalt-sidepanel--show": isOpen,
|
|
46
|
+
"cobalt-sidepanel--visible": isPanelVisible,
|
|
47
|
+
}), onTransitionEnd: () => {
|
|
48
|
+
!isOpen && setIsPanelVisible(false);
|
|
49
|
+
} },
|
|
50
|
+
React.createElement(SidepanelContent, { isOpen: isOpen, title: title, close: close },
|
|
51
|
+
children,
|
|
52
|
+
footer)),
|
|
53
|
+
withDesktopOverlay && React.createElement("div", { className: "cobalt-sidepanel-overlay" })), document.body));
|
|
52
54
|
};
|
|
53
55
|
_Sidepanel.displayName = "Sidepanel";
|
|
54
56
|
const Sidepanel = Object.assign(_Sidepanel, {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":["../../../src/components/Sidepanel/index.tsx"],"sourcesContent":["import React, { useEffect, useState } from \"react\"\nimport cx from \"classnames\"\nimport Modal from \"../Modal\"\nimport useBreakpoint from \"../../hooks/useBreakpoint\"\nimport { CloseIcon } from \"../Icon\"\nimport ReactDOM from \"react-dom\"\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-base\", className)}>\n {children}\n </div>\n )\n}\n\ntype SidepanelPropsType = React.PropsWithChildren<{\n isOpen: boolean\n title?: string\n close?: () => 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-center c-px-sm c-py-md c-border-b c-border-base\">\n <div className=\"c-text-title-md c-flex-1\">{title}</div>\n {close && (\n <div className=\"c-w-md c-cursor-pointer\" onClick={close}>\n <CloseIcon size={24} />\n </div>\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 = ({
|
|
1
|
+
{"version":3,"file":"index.js","sources":["../../../src/components/Sidepanel/index.tsx"],"sourcesContent":["import React, { useEffect, useState } from \"react\"\nimport cx from \"classnames\"\nimport Modal from \"../Modal\"\nimport useBreakpoint from \"../../hooks/useBreakpoint\"\nimport { CloseIcon } from \"../Icon\"\nimport ReactDOM from \"react-dom\"\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-base\", className)}>\n {children}\n </div>\n )\n}\n\ntype SidepanelPropsType = React.PropsWithChildren<{\n isOpen: boolean\n title?: string\n close?: () => void\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-center c-px-sm c-py-md c-border-b c-border-base\">\n <div className=\"c-text-title-md c-flex-1\">{title}</div>\n {close && (\n <div className=\"c-w-md c-cursor-pointer\" onClick={close}>\n <CloseIcon size={24} />\n </div>\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 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 >\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 <SidepanelContent isOpen={isOpen} title={title} close={close}>\n {children}\n {footer}\n </SidepanelContent>\n </div>\n {withDesktopOverlay && <div className=\"cobalt-sidepanel-overlay\"></div>}\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":[],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -30,3 +30,32 @@
|
|
|
30
30
|
box-shadow: elevation(lg);
|
|
31
31
|
}
|
|
32
32
|
}
|
|
33
|
+
|
|
34
|
+
.cobalt-sidepanel-overlay {
|
|
35
|
+
position: fixed;
|
|
36
|
+
|
|
37
|
+
top: 0;
|
|
38
|
+
left: 0;
|
|
39
|
+
|
|
40
|
+
z-index: zx(sidepanel-below);
|
|
41
|
+
|
|
42
|
+
background-color: fade-out(black, 0.2);
|
|
43
|
+
|
|
44
|
+
opacity: 0;
|
|
45
|
+
|
|
46
|
+
transition-duration: 250ms;
|
|
47
|
+
transition-timing-function: ease-out;
|
|
48
|
+
transition-property: opacity;
|
|
49
|
+
|
|
50
|
+
will-change: opacity;
|
|
51
|
+
}
|
|
52
|
+
|
|
53
|
+
/* stylelint-disable unit-allowed-list */
|
|
54
|
+
.cobalt-sidepanel--visible + .cobalt-sidepanel-overlay {
|
|
55
|
+
width: 100dvw;
|
|
56
|
+
height: 100dvh;
|
|
57
|
+
}
|
|
58
|
+
/* stylelint-enable unit-allowed-list */
|
|
59
|
+
.cobalt-sidepanel--show + .cobalt-sidepanel-overlay {
|
|
60
|
+
opacity: 1;
|
|
61
|
+
}
|
package/styles/core/z-index.scss
CHANGED
|
@@ -6,9 +6,10 @@ type SidepanelPropsType = React.PropsWithChildren<{
|
|
|
6
6
|
isOpen: boolean;
|
|
7
7
|
title?: string;
|
|
8
8
|
close?: () => void;
|
|
9
|
+
withDesktopOverlay?: boolean;
|
|
9
10
|
}>;
|
|
10
11
|
export declare const Sidepanel: {
|
|
11
|
-
({ isOpen, title, close, children }: SidepanelPropsType): React.JSX.Element;
|
|
12
|
+
({ isOpen, title, close, withDesktopOverlay, children, }: SidepanelPropsType): React.JSX.Element;
|
|
12
13
|
displayName: string;
|
|
13
14
|
} & {
|
|
14
15
|
Footer: (_props: SidepanelFooterPropsType) => null;
|