@drivy/cobalt 0.47.0 → 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;
|
package/utilities.css
CHANGED
|
@@ -3144,6 +3144,20 @@
|
|
|
3144
3144
|
overscroll-behavior-x: none;
|
|
3145
3145
|
}
|
|
3146
3146
|
|
|
3147
|
+
.c-truncate {
|
|
3148
|
+
overflow: hidden;
|
|
3149
|
+
text-overflow: ellipsis;
|
|
3150
|
+
white-space: nowrap;
|
|
3151
|
+
}
|
|
3152
|
+
|
|
3153
|
+
.c-overflow-ellipsis {
|
|
3154
|
+
text-overflow: ellipsis;
|
|
3155
|
+
}
|
|
3156
|
+
|
|
3157
|
+
.c-overflow-clip {
|
|
3158
|
+
text-overflow: clip;
|
|
3159
|
+
}
|
|
3160
|
+
|
|
3147
3161
|
.c-whitespace-normal {
|
|
3148
3162
|
white-space: normal;
|
|
3149
3163
|
}
|
|
@@ -8106,6 +8120,20 @@
|
|
|
8106
8120
|
overscroll-behavior-x: none;
|
|
8107
8121
|
}
|
|
8108
8122
|
|
|
8123
|
+
.xs\:c-truncate {
|
|
8124
|
+
overflow: hidden;
|
|
8125
|
+
text-overflow: ellipsis;
|
|
8126
|
+
white-space: nowrap;
|
|
8127
|
+
}
|
|
8128
|
+
|
|
8129
|
+
.xs\:c-overflow-ellipsis {
|
|
8130
|
+
text-overflow: ellipsis;
|
|
8131
|
+
}
|
|
8132
|
+
|
|
8133
|
+
.xs\:c-overflow-clip {
|
|
8134
|
+
text-overflow: clip;
|
|
8135
|
+
}
|
|
8136
|
+
|
|
8109
8137
|
.xs\:c-whitespace-normal {
|
|
8110
8138
|
white-space: normal;
|
|
8111
8139
|
}
|
|
@@ -11207,6 +11235,20 @@
|
|
|
11207
11235
|
overscroll-behavior-x: none;
|
|
11208
11236
|
}
|
|
11209
11237
|
|
|
11238
|
+
.sm\:c-truncate {
|
|
11239
|
+
overflow: hidden;
|
|
11240
|
+
text-overflow: ellipsis;
|
|
11241
|
+
white-space: nowrap;
|
|
11242
|
+
}
|
|
11243
|
+
|
|
11244
|
+
.sm\:c-overflow-ellipsis {
|
|
11245
|
+
text-overflow: ellipsis;
|
|
11246
|
+
}
|
|
11247
|
+
|
|
11248
|
+
.sm\:c-overflow-clip {
|
|
11249
|
+
text-overflow: clip;
|
|
11250
|
+
}
|
|
11251
|
+
|
|
11210
11252
|
.sm\:c-whitespace-normal {
|
|
11211
11253
|
white-space: normal;
|
|
11212
11254
|
}
|
|
@@ -14308,6 +14350,20 @@
|
|
|
14308
14350
|
overscroll-behavior-x: none;
|
|
14309
14351
|
}
|
|
14310
14352
|
|
|
14353
|
+
.md\:c-truncate {
|
|
14354
|
+
overflow: hidden;
|
|
14355
|
+
text-overflow: ellipsis;
|
|
14356
|
+
white-space: nowrap;
|
|
14357
|
+
}
|
|
14358
|
+
|
|
14359
|
+
.md\:c-overflow-ellipsis {
|
|
14360
|
+
text-overflow: ellipsis;
|
|
14361
|
+
}
|
|
14362
|
+
|
|
14363
|
+
.md\:c-overflow-clip {
|
|
14364
|
+
text-overflow: clip;
|
|
14365
|
+
}
|
|
14366
|
+
|
|
14311
14367
|
.md\:c-whitespace-normal {
|
|
14312
14368
|
white-space: normal;
|
|
14313
14369
|
}
|
|
@@ -17409,6 +17465,20 @@
|
|
|
17409
17465
|
overscroll-behavior-x: none;
|
|
17410
17466
|
}
|
|
17411
17467
|
|
|
17468
|
+
.lg\:c-truncate {
|
|
17469
|
+
overflow: hidden;
|
|
17470
|
+
text-overflow: ellipsis;
|
|
17471
|
+
white-space: nowrap;
|
|
17472
|
+
}
|
|
17473
|
+
|
|
17474
|
+
.lg\:c-overflow-ellipsis {
|
|
17475
|
+
text-overflow: ellipsis;
|
|
17476
|
+
}
|
|
17477
|
+
|
|
17478
|
+
.lg\:c-overflow-clip {
|
|
17479
|
+
text-overflow: clip;
|
|
17480
|
+
}
|
|
17481
|
+
|
|
17412
17482
|
.lg\:c-whitespace-normal {
|
|
17413
17483
|
white-space: normal;
|
|
17414
17484
|
}
|