@cloudscape-design/components 3.0.822 → 3.0.823
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/app-layout/drawer/index.d.ts.map +1 -1
- package/app-layout/drawer/index.js +3 -1
- package/app-layout/drawer/index.js.map +1 -1
- package/app-layout/drawer/styles.css.js +14 -13
- package/app-layout/drawer/styles.scoped.css +26 -21
- package/app-layout/drawer/styles.selectors.js +14 -13
- package/app-layout/visual-refresh/navigation.js +1 -1
- package/app-layout/visual-refresh/navigation.js.map +1 -1
- package/app-layout/visual-refresh/styles.css.js +86 -85
- package/app-layout/visual-refresh/styles.scoped.css +168 -162
- package/app-layout/visual-refresh/styles.selectors.js +86 -85
- package/app-layout/visual-refresh-toolbar/compute-layout.d.ts +4 -1
- package/app-layout/visual-refresh-toolbar/compute-layout.d.ts.map +1 -1
- package/app-layout/visual-refresh-toolbar/compute-layout.js +4 -2
- package/app-layout/visual-refresh-toolbar/compute-layout.js.map +1 -1
- package/app-layout/visual-refresh-toolbar/drawer/global-drawer.d.ts.map +1 -1
- package/app-layout/visual-refresh-toolbar/drawer/global-drawer.js +5 -5
- package/app-layout/visual-refresh-toolbar/drawer/global-drawer.js.map +1 -1
- package/app-layout/visual-refresh-toolbar/drawer/local-drawer.d.ts.map +1 -1
- package/app-layout/visual-refresh-toolbar/drawer/local-drawer.js +5 -5
- package/app-layout/visual-refresh-toolbar/drawer/local-drawer.js.map +1 -1
- package/app-layout/visual-refresh-toolbar/drawer/styles.css.js +10 -10
- package/app-layout/visual-refresh-toolbar/drawer/styles.scoped.css +12 -14
- package/app-layout/visual-refresh-toolbar/drawer/styles.selectors.js +10 -10
- package/app-layout/visual-refresh-toolbar/navigation/index.js +5 -5
- package/app-layout/visual-refresh-toolbar/navigation/index.js.map +1 -1
- package/app-layout/visual-refresh-toolbar/navigation/styles.css.js +5 -4
- package/app-layout/visual-refresh-toolbar/navigation/styles.scoped.css +10 -5
- package/app-layout/visual-refresh-toolbar/navigation/styles.selectors.js +5 -4
- package/app-layout/visual-refresh-toolbar/split-panel/index.d.ts.map +1 -1
- package/app-layout/visual-refresh-toolbar/split-panel/index.js +4 -4
- package/app-layout/visual-refresh-toolbar/split-panel/index.js.map +1 -1
- package/internal/environment.js +1 -1
- package/internal/environment.json +1 -1
- package/internal/manifest.json +1 -1
- package/package.json +1 -1
|
@@ -5,14 +5,14 @@ import clsx from 'clsx';
|
|
|
5
5
|
import { findUpUntil } from '@cloudscape-design/component-toolkit/dom';
|
|
6
6
|
import { InternalButton } from '../../../button/internal';
|
|
7
7
|
import { createWidgetizedComponent } from '../../../internal/widgets';
|
|
8
|
-
import {
|
|
8
|
+
import { getDrawerStyles } from '../compute-layout';
|
|
9
9
|
import sharedStyles from '../../resize/styles.css.js';
|
|
10
10
|
import testutilStyles from '../../test-classes/styles.css.js';
|
|
11
11
|
import styles from './styles.css.js';
|
|
12
12
|
export function AppLayoutNavigationImplementation({ appLayoutInternals }) {
|
|
13
13
|
var _a, _b;
|
|
14
14
|
const { ariaLabels, onNavigationToggle, isMobile, navigationOpen, navigation, navigationFocusControl, placement, verticalOffsets, } = appLayoutInternals;
|
|
15
|
-
const
|
|
15
|
+
const { drawerTopOffset, drawerHeight } = getDrawerStyles(verticalOffsets, isMobile, placement);
|
|
16
16
|
// Close the Navigation drawer on mobile when a user clicks a link inside.
|
|
17
17
|
const onNavigationClick = (event) => {
|
|
18
18
|
const hasLink = findUpUntil(event.target, node => node.tagName === 'A' && !!node.href);
|
|
@@ -24,10 +24,10 @@ export function AppLayoutNavigationImplementation({ appLayoutInternals }) {
|
|
|
24
24
|
[styles['is-navigation-open']]: navigationOpen,
|
|
25
25
|
[testutilStyles['drawer-closed']]: !navigationOpen,
|
|
26
26
|
}, testutilStyles.navigation, sharedStyles['with-motion-horizontal']), "aria-hidden": !navigationOpen, onClick: onNavigationClick, style: {
|
|
27
|
-
blockSize:
|
|
28
|
-
insetBlockStart:
|
|
27
|
+
blockSize: drawerHeight,
|
|
28
|
+
insetBlockStart: drawerTopOffset,
|
|
29
29
|
} },
|
|
30
|
-
React.createElement("div", { className: clsx(styles['animated-content']) },
|
|
30
|
+
React.createElement("div", { className: clsx(styles['content-container'], styles['animated-content']) },
|
|
31
31
|
React.createElement("div", { className: clsx(styles['hide-navigation']) },
|
|
32
32
|
React.createElement(InternalButton, { ariaLabel: (_b = ariaLabels === null || ariaLabels === void 0 ? void 0 : ariaLabels.navigationClose) !== null && _b !== void 0 ? _b : undefined, iconName: isMobile ? 'close' : 'angle-left', onClick: () => onNavigationToggle(false), variant: "icon", formAction: "none", className: testutilStyles['navigation-close'], ref: navigationFocusControl.refs.close })),
|
|
33
33
|
navigation)));
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/app-layout/visual-refresh-toolbar/navigation/index.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,IAAI,MAAM,MAAM,CAAC;AAExB,OAAO,EAAE,WAAW,EAAE,MAAM,0CAA0C,CAAC;AAEvE,OAAO,EAAE,cAAc,EAAE,MAAM,0BAA0B,CAAC;AAC1D,OAAO,EAAE,yBAAyB,EAAE,MAAM,2BAA2B,CAAC;AACtE,OAAO,EAAE,
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/app-layout/visual-refresh-toolbar/navigation/index.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,IAAI,MAAM,MAAM,CAAC;AAExB,OAAO,EAAE,WAAW,EAAE,MAAM,0CAA0C,CAAC;AAEvE,OAAO,EAAE,cAAc,EAAE,MAAM,0BAA0B,CAAC;AAC1D,OAAO,EAAE,yBAAyB,EAAE,MAAM,2BAA2B,CAAC;AACtE,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AAGpD,OAAO,YAAY,MAAM,4BAA4B,CAAC;AACtD,OAAO,cAAc,MAAM,kCAAkC,CAAC;AAC9D,OAAO,MAAM,MAAM,iBAAiB,CAAC;AAMrC,MAAM,UAAU,iCAAiC,CAAC,EAAE,kBAAkB,EAA0C;;IAC9G,MAAM,EACJ,UAAU,EACV,kBAAkB,EAClB,QAAQ,EACR,cAAc,EACd,UAAU,EACV,sBAAsB,EACtB,SAAS,EACT,eAAe,GAChB,GAAG,kBAAkB,CAAC;IAEvB,MAAM,EAAE,eAAe,EAAE,YAAY,EAAE,GAAG,eAAe,CAAC,eAAe,EAAE,QAAQ,EAAE,SAAS,CAAC,CAAC;IAEhG,0EAA0E;IAC1E,MAAM,iBAAiB,GAAG,CAAC,KAAuB,EAAE,EAAE;QACpD,MAAM,OAAO,GAAG,WAAW,CACzB,KAAK,CAAC,MAAqB,EAC3B,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,OAAO,KAAK,GAAG,IAAI,CAAC,CAAE,IAA0B,CAAC,IAAI,CACnE,CAAC;QACF,IAAI,OAAO,IAAI,QAAQ,EAAE;YACvB,kBAAkB,CAAC,KAAK,CAAC,CAAC;SAC3B;IACH,CAAC,CAAC;IAEF,OAAO,CACL,2CACc,MAAA,UAAU,aAAV,UAAU,uBAAV,UAAU,CAAE,UAAU,mCAAI,SAAS,EAC/C,SAAS,EAAE,IAAI,CACb,MAAM,CAAC,UAAU,EACjB;YACE,CAAC,MAAM,CAAC,oBAAoB,CAAC,CAAC,EAAE,cAAc;YAC9C,CAAC,cAAc,CAAC,eAAe,CAAC,CAAC,EAAE,CAAC,cAAc;SACnD,EACD,cAAc,CAAC,UAAU,EACzB,YAAY,CAAC,wBAAwB,CAAC,CACvC,iBACY,CAAC,cAAc,EAC5B,OAAO,EAAE,iBAAiB,EAC1B,KAAK,EAAE;YACL,SAAS,EAAE,YAAY;YACvB,eAAe,EAAE,eAAe;SACjC;QAED,6BAAK,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,mBAAmB,CAAC,EAAE,MAAM,CAAC,kBAAkB,CAAC,CAAC;YAC3E,6BAAK,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,iBAAiB,CAAC,CAAC;gBAC7C,oBAAC,cAAc,IACb,SAAS,EAAE,MAAA,UAAU,aAAV,UAAU,uBAAV,UAAU,CAAE,eAAe,mCAAI,SAAS,EACnD,QAAQ,EAAE,QAAQ,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,YAAY,EAC3C,OAAO,EAAE,GAAG,EAAE,CAAC,kBAAkB,CAAC,KAAK,CAAC,EACxC,OAAO,EAAC,MAAM,EACd,UAAU,EAAC,MAAM,EACjB,SAAS,EAAE,cAAc,CAAC,kBAAkB,CAAC,EAC7C,GAAG,EAAE,sBAAsB,CAAC,IAAI,CAAC,KAAK,GACtC,CACE;YACL,UAAU,CACP,CACF,CACP,CAAC;AACJ,CAAC;AAED,MAAM,CAAC,MAAM,mCAAmC,GAAG,yBAAyB,CAAC,iCAAiC,CAAC,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React from 'react';\nimport clsx from 'clsx';\n\nimport { findUpUntil } from '@cloudscape-design/component-toolkit/dom';\n\nimport { InternalButton } from '../../../button/internal';\nimport { createWidgetizedComponent } from '../../../internal/widgets';\nimport { getDrawerStyles } from '../compute-layout';\nimport { AppLayoutInternals } from '../interfaces';\n\nimport sharedStyles from '../../resize/styles.css.js';\nimport testutilStyles from '../../test-classes/styles.css.js';\nimport styles from './styles.css.js';\n\ninterface AppLayoutNavigationImplementationProps {\n appLayoutInternals: AppLayoutInternals;\n}\n\nexport function AppLayoutNavigationImplementation({ appLayoutInternals }: AppLayoutNavigationImplementationProps) {\n const {\n ariaLabels,\n onNavigationToggle,\n isMobile,\n navigationOpen,\n navigation,\n navigationFocusControl,\n placement,\n verticalOffsets,\n } = appLayoutInternals;\n\n const { drawerTopOffset, drawerHeight } = getDrawerStyles(verticalOffsets, isMobile, placement);\n\n // Close the Navigation drawer on mobile when a user clicks a link inside.\n const onNavigationClick = (event: React.MouseEvent) => {\n const hasLink = findUpUntil(\n event.target as HTMLElement,\n node => node.tagName === 'A' && !!(node as HTMLAnchorElement).href\n );\n if (hasLink && isMobile) {\n onNavigationToggle(false);\n }\n };\n\n return (\n <nav\n aria-label={ariaLabels?.navigation ?? undefined}\n className={clsx(\n styles.navigation,\n {\n [styles['is-navigation-open']]: navigationOpen,\n [testutilStyles['drawer-closed']]: !navigationOpen,\n },\n testutilStyles.navigation,\n sharedStyles['with-motion-horizontal']\n )}\n aria-hidden={!navigationOpen}\n onClick={onNavigationClick}\n style={{\n blockSize: drawerHeight,\n insetBlockStart: drawerTopOffset,\n }}\n >\n <div className={clsx(styles['content-container'], styles['animated-content'])}>\n <div className={clsx(styles['hide-navigation'])}>\n <InternalButton\n ariaLabel={ariaLabels?.navigationClose ?? undefined}\n iconName={isMobile ? 'close' : 'angle-left'}\n onClick={() => onNavigationToggle(false)}\n variant=\"icon\"\n formAction=\"none\"\n className={testutilStyles['navigation-close']}\n ref={navigationFocusControl.refs.close}\n />\n </div>\n {navigation}\n </div>\n </nav>\n );\n}\n\nexport const createWidgetizedAppLayoutNavigation = createWidgetizedComponent(AppLayoutNavigationImplementation);\n"]}
|
|
@@ -1,9 +1,10 @@
|
|
|
1
1
|
|
|
2
2
|
import './styles.scoped.css';
|
|
3
3
|
export default {
|
|
4
|
-
"navigation": "
|
|
5
|
-
"is-navigation-open": "awsui_is-navigation-
|
|
6
|
-
"
|
|
7
|
-
"
|
|
4
|
+
"navigation": "awsui_navigation_2p2ab_qizqd_149",
|
|
5
|
+
"is-navigation-open": "awsui_is-navigation-open_2p2ab_qizqd_169",
|
|
6
|
+
"content-container": "awsui_content-container_2p2ab_qizqd_173",
|
|
7
|
+
"animated-content": "awsui_animated-content_2p2ab_qizqd_176",
|
|
8
|
+
"hide-navigation": "awsui_hide-navigation_2p2ab_qizqd_186"
|
|
8
9
|
};
|
|
9
10
|
|
|
@@ -146,7 +146,7 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
|
|
|
146
146
|
Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
|
|
147
147
|
SPDX-License-Identifier: Apache-2.0
|
|
148
148
|
*/
|
|
149
|
-
.
|
|
149
|
+
.awsui_navigation_2p2ab_qizqd_149:not(#\9) {
|
|
150
150
|
position: sticky;
|
|
151
151
|
z-index: 830;
|
|
152
152
|
background-color: var(--color-background-container-content-z79u4u, #ffffff);
|
|
@@ -158,27 +158,32 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
|
|
|
158
158
|
overscroll-behavior-y: contain;
|
|
159
159
|
word-wrap: break-word;
|
|
160
160
|
pointer-events: auto;
|
|
161
|
+
display: flex;
|
|
162
|
+
flex-direction: column;
|
|
161
163
|
/*
|
|
162
164
|
A non-semantic node is added with a fixed width equal to the final Navigation
|
|
163
165
|
width. This will create the visual appearance of horizontal movement and
|
|
164
166
|
prevent unwanted text wrapping.
|
|
165
167
|
*/
|
|
166
168
|
}
|
|
167
|
-
.
|
|
169
|
+
.awsui_navigation_2p2ab_qizqd_149:not(#\9):not(.awsui_is-navigation-open_2p2ab_qizqd_169) {
|
|
168
170
|
inline-size: 0px;
|
|
169
171
|
display: none;
|
|
170
172
|
}
|
|
171
|
-
.
|
|
173
|
+
.awsui_navigation_2p2ab_qizqd_149 > .awsui_content-container_2p2ab_qizqd_173:not(#\9) {
|
|
174
|
+
flex-grow: 1;
|
|
175
|
+
}
|
|
176
|
+
.awsui_navigation_2p2ab_qizqd_149 > .awsui_animated-content_2p2ab_qizqd_176:not(#\9) {
|
|
172
177
|
inline-size: var(--awsui-navigation-width-g964ok);
|
|
173
178
|
}
|
|
174
179
|
@media (max-width: 688px) {
|
|
175
|
-
.
|
|
180
|
+
.awsui_navigation_2p2ab_qizqd_149:not(#\9) {
|
|
176
181
|
--awsui-navigation-width-g964ok: 100vw;
|
|
177
182
|
z-index: 1001;
|
|
178
183
|
}
|
|
179
184
|
}
|
|
180
185
|
|
|
181
|
-
.awsui_hide-
|
|
186
|
+
.awsui_hide-navigation_2p2ab_qizqd_186:not(#\9) {
|
|
182
187
|
position: absolute;
|
|
183
188
|
inset-inline-end: var(--space-m-udix3p, 16px);
|
|
184
189
|
inset-block-start: 14px;
|
|
@@ -2,9 +2,10 @@
|
|
|
2
2
|
// es-module interop with Babel and Typescript
|
|
3
3
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
4
4
|
module.exports.default = {
|
|
5
|
-
"navigation": "
|
|
6
|
-
"is-navigation-open": "awsui_is-navigation-
|
|
7
|
-
"
|
|
8
|
-
"
|
|
5
|
+
"navigation": "awsui_navigation_2p2ab_qizqd_149",
|
|
6
|
+
"is-navigation-open": "awsui_is-navigation-open_2p2ab_qizqd_169",
|
|
7
|
+
"content-container": "awsui_content-container_2p2ab_qizqd_173",
|
|
8
|
+
"animated-content": "awsui_animated-content_2p2ab_qizqd_176",
|
|
9
|
+
"hide-navigation": "awsui_hide-navigation_2p2ab_qizqd_186"
|
|
9
10
|
};
|
|
10
11
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/app-layout/visual-refresh-toolbar/split-panel/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,EAAsB,uBAAuB,EAAE,MAAM,mBAAmB,CAAC;
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/app-layout/visual-refresh-toolbar/split-panel/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,EAAsB,uBAAuB,EAAE,MAAM,mBAAmB,CAAC;AAEhF,OAAO,EAAE,kBAAkB,EAAE,MAAM,eAAe,CAAC;AAInD,UAAU,gDAAgD;IACxD,kBAAkB,EAAE,kBAAkB,CAAC;IACvC,mBAAmB,EAAE,uBAAuB,CAAC;IAC7C,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAED,wBAAgB,2CAA2C,CAAC,EAC1D,QAAQ,EACR,kBAAkB,EAClB,mBAAmB,GACpB,EAAE,gDAAgD,eAkBlD;AAED,MAAM,WAAW,kDAAkD;IACjE,kBAAkB,EAAE,kBAAkB,CAAC;IACvC,mBAAmB,EAAE,uBAAuB,CAAC;IAC7C,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAED,wBAAgB,6CAA6C,CAAC,EAC5D,QAAQ,EACR,mBAAmB,GACpB,EAAE,kDAAkD,eAEpD;AAED,eAAO,MAAM,6CAA6C,iIAEzD,CAAC;AAEF,eAAO,MAAM,+CAA+C,qIAE3D,CAAC"}
|
|
@@ -3,14 +3,14 @@
|
|
|
3
3
|
import React from 'react';
|
|
4
4
|
import { createWidgetizedComponent } from '../../../internal/widgets';
|
|
5
5
|
import { SplitPanelProvider } from '../../split-panel';
|
|
6
|
+
import { getDrawerStyles } from '../compute-layout';
|
|
6
7
|
import styles from './styles.css.js';
|
|
7
8
|
export function AppLayoutSplitPanelDrawerSideImplementation({ children, appLayoutInternals, splitPanelInternals, }) {
|
|
8
|
-
|
|
9
|
-
const {
|
|
10
|
-
const drawerTopOffset = (_a = verticalOffsets.drawers) !== null && _a !== void 0 ? _a : placement.insetBlockStart;
|
|
9
|
+
const { splitPanelControlId, placement, verticalOffsets, isMobile } = appLayoutInternals;
|
|
10
|
+
const { drawerTopOffset, drawerHeight } = getDrawerStyles(verticalOffsets, isMobile, placement);
|
|
11
11
|
return (React.createElement(SplitPanelProvider, Object.assign({}, splitPanelInternals),
|
|
12
12
|
React.createElement("section", { id: splitPanelControlId, className: styles['split-panel-side'], style: {
|
|
13
|
-
blockSize:
|
|
13
|
+
blockSize: drawerHeight,
|
|
14
14
|
insetBlockStart: drawerTopOffset,
|
|
15
15
|
} }, children)));
|
|
16
16
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/app-layout/visual-refresh-toolbar/split-panel/index.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,yBAAyB,EAAE,MAAM,2BAA2B,CAAC;AACtE,OAAO,EAAE,kBAAkB,EAA2B,MAAM,mBAAmB,CAAC;
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/app-layout/visual-refresh-toolbar/split-panel/index.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,yBAAyB,EAAE,MAAM,2BAA2B,CAAC;AACtE,OAAO,EAAE,kBAAkB,EAA2B,MAAM,mBAAmB,CAAC;AAChF,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AAGpD,OAAO,MAAM,MAAM,iBAAiB,CAAC;AAQrC,MAAM,UAAU,2CAA2C,CAAC,EAC1D,QAAQ,EACR,kBAAkB,EAClB,mBAAmB,GAC8B;IACjD,MAAM,EAAE,mBAAmB,EAAE,SAAS,EAAE,eAAe,EAAE,QAAQ,EAAE,GAAG,kBAAkB,CAAC;IACzF,MAAM,EAAE,eAAe,EAAE,YAAY,EAAE,GAAG,eAAe,CAAC,eAAe,EAAE,QAAQ,EAAE,SAAS,CAAC,CAAC;IAEhG,OAAO,CACL,oBAAC,kBAAkB,oBAAK,mBAAmB;QACzC,iCACE,EAAE,EAAE,mBAAmB,EACvB,SAAS,EAAE,MAAM,CAAC,kBAAkB,CAAC,EACrC,KAAK,EAAE;gBACL,SAAS,EAAE,YAAY;gBACvB,eAAe,EAAE,eAAe;aACjC,IAEA,QAAQ,CACD,CACS,CACtB,CAAC;AACJ,CAAC;AAQD,MAAM,UAAU,6CAA6C,CAAC,EAC5D,QAAQ,EACR,mBAAmB,GACgC;IACnD,OAAO,oBAAC,kBAAkB,oBAAK,mBAAmB,GAAG,QAAQ,CAAsB,CAAC;AACtF,CAAC;AAED,MAAM,CAAC,MAAM,6CAA6C,GAAG,yBAAyB,CACpF,2CAA2C,CAC5C,CAAC;AAEF,MAAM,CAAC,MAAM,+CAA+C,GAAG,yBAAyB,CACtF,6CAA6C,CAC9C,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React from 'react';\n\nimport { createWidgetizedComponent } from '../../../internal/widgets';\nimport { SplitPanelProvider, SplitPanelProviderProps } from '../../split-panel';\nimport { getDrawerStyles } from '../compute-layout';\nimport { AppLayoutInternals } from '../interfaces';\n\nimport styles from './styles.css.js';\n\ninterface AppLayoutSplitPanelDrawerSideImplementationProps {\n appLayoutInternals: AppLayoutInternals;\n splitPanelInternals: SplitPanelProviderProps;\n children: React.ReactNode;\n}\n\nexport function AppLayoutSplitPanelDrawerSideImplementation({\n children,\n appLayoutInternals,\n splitPanelInternals,\n}: AppLayoutSplitPanelDrawerSideImplementationProps) {\n const { splitPanelControlId, placement, verticalOffsets, isMobile } = appLayoutInternals;\n const { drawerTopOffset, drawerHeight } = getDrawerStyles(verticalOffsets, isMobile, placement);\n\n return (\n <SplitPanelProvider {...splitPanelInternals}>\n <section\n id={splitPanelControlId}\n className={styles['split-panel-side']}\n style={{\n blockSize: drawerHeight,\n insetBlockStart: drawerTopOffset,\n }}\n >\n {children}\n </section>\n </SplitPanelProvider>\n );\n}\n\nexport interface AppLayoutSplitPanelDrawerBottomImplementationProps {\n appLayoutInternals: AppLayoutInternals;\n splitPanelInternals: SplitPanelProviderProps;\n children: React.ReactNode;\n}\n\nexport function AppLayoutSplitPanelDrawerBottomImplementation({\n children,\n splitPanelInternals,\n}: AppLayoutSplitPanelDrawerBottomImplementationProps) {\n return <SplitPanelProvider {...splitPanelInternals}>{children}</SplitPanelProvider>;\n}\n\nexport const createWidgetizedAppLayoutSplitPanelDrawerSide = createWidgetizedComponent(\n AppLayoutSplitPanelDrawerSideImplementation\n);\n\nexport const createWidgetizedAppLayoutSplitPanelDrawerBottom = createWidgetizedComponent(\n AppLayoutSplitPanelDrawerBottomImplementation\n);\n"]}
|
package/internal/environment.js
CHANGED
package/internal/manifest.json
CHANGED
package/package.json
CHANGED