@cloudscape-design/components 3.0.506 → 3.0.508
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/defaults.d.ts +2 -2
- package/app-layout/defaults.d.ts.map +1 -1
- package/app-layout/defaults.js.map +1 -1
- package/app-layout/drawer/interfaces.d.ts +2 -3
- package/app-layout/drawer/interfaces.d.ts.map +1 -1
- package/app-layout/drawer/interfaces.js.map +1 -1
- package/app-layout/drawer/resizable-drawer.d.ts +1 -1
- package/app-layout/drawer/resizable-drawer.d.ts.map +1 -1
- package/app-layout/drawer/resizable-drawer.js +9 -18
- package/app-layout/drawer/resizable-drawer.js.map +1 -1
- package/app-layout/index.d.ts.map +1 -1
- package/app-layout/index.js +26 -76
- package/app-layout/index.js.map +1 -1
- package/app-layout/split-panel/constants.d.ts +3 -0
- package/app-layout/split-panel/constants.d.ts.map +1 -0
- package/app-layout/split-panel/constants.js +5 -0
- package/app-layout/split-panel/constants.js.map +1 -0
- package/app-layout/split-panel/index.d.ts +1 -0
- package/app-layout/split-panel/index.d.ts.map +1 -1
- package/app-layout/split-panel/index.js +1 -0
- package/app-layout/split-panel/index.js.map +1 -1
- package/app-layout/split-panel/provider.d.ts +2 -2
- package/app-layout/split-panel/provider.d.ts.map +1 -1
- package/app-layout/split-panel/provider.js +18 -16
- package/app-layout/split-panel/provider.js.map +1 -1
- package/app-layout/utils/use-document-width.d.ts +2 -0
- package/app-layout/utils/use-document-width.d.ts.map +1 -0
- package/app-layout/utils/use-document-width.js +11 -0
- package/app-layout/utils/use-document-width.js.map +1 -0
- package/app-layout/visual-refresh/split-panel.js +1 -1
- package/app-layout/visual-refresh/split-panel.js.map +1 -1
- package/container/styles.css.js +30 -30
- package/container/styles.scoped.css +55 -54
- package/container/styles.selectors.js +30 -30
- package/internal/environment.js +1 -1
- package/internal/environment.json +1 -1
- package/internal/manifest.json +1 -1
- package/package.json +1 -1
- package/app-layout/utils/use-window-width.d.ts +0 -2
- package/app-layout/utils/use-window-width.d.ts.map +0 -1
- package/app-layout/utils/use-window-width.js +0 -13
- package/app-layout/utils/use-window-width.js.map +0 -1
package/app-layout/defaults.d.ts
CHANGED
|
@@ -2,8 +2,8 @@ import { AppLayoutProps } from './interfaces';
|
|
|
2
2
|
export interface AppLayoutState {
|
|
3
3
|
navigationOpen?: boolean;
|
|
4
4
|
toolsOpen?: boolean;
|
|
5
|
-
minContentWidth
|
|
5
|
+
minContentWidth: number;
|
|
6
6
|
maxContentWidth?: number | undefined;
|
|
7
7
|
}
|
|
8
|
-
export declare function applyDefaults(contentType: AppLayoutProps.ContentType, stateFromProps:
|
|
8
|
+
export declare function applyDefaults(contentType: AppLayoutProps.ContentType, stateFromProps: Pick<AppLayoutProps, 'minContentWidth' | 'maxContentWidth' | 'navigationOpen' | 'toolsOpen'>, isRefresh: boolean): AppLayoutState;
|
|
9
9
|
//# sourceMappingURL=defaults.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"defaults.d.ts","sourceRoot":"lib/default/","sources":["app-layout/defaults.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;AAqC9C,MAAM,WAAW,cAAc;IAC7B,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,eAAe,
|
|
1
|
+
{"version":3,"file":"defaults.d.ts","sourceRoot":"lib/default/","sources":["app-layout/defaults.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;AAqC9C,MAAM,WAAW,cAAc;IAC7B,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,eAAe,EAAE,MAAM,CAAC;IACxB,eAAe,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;CACtC;AAED,wBAAgB,aAAa,CAC3B,WAAW,EAAE,cAAc,CAAC,WAAW,EACvC,cAAc,EAAE,IAAI,CAAC,cAAc,EAAE,iBAAiB,GAAG,iBAAiB,GAAG,gBAAgB,GAAG,WAAW,CAAC,EAC5G,SAAS,EAAE,OAAO,GACjB,cAAc,CAWhB"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"defaults.js","sourceRoot":"lib/default/","sources":["app-layout/defaults.ts"],"names":[],"mappings":"AAIA,MAAM,uBAAuB,GAAmB;IAC9C,cAAc,EAAE,IAAI;IACpB,eAAe,EAAE,GAAG;IACpB,eAAe,EAAE,SAAS;CAC3B,CAAC;AAEF,MAAM,QAAQ,GAAuD;IACnE,OAAO,oBACF,uBAAuB,CAC3B;IACD,SAAS,oBACJ,uBAAuB,CAC3B;IACD,KAAK,EAAE;QACL,cAAc,EAAE,IAAI;QACpB,eAAe,EAAE,GAAG;QACpB,eAAe,EAAE,SAAS;KAC3B;IACD,IAAI,EAAE;QACJ,cAAc,EAAE,KAAK;QACrB,eAAe,EAAE,GAAG;QACpB,eAAe,EAAE,GAAG;KACrB;IACD,KAAK,EAAE;QACL,cAAc,EAAE,IAAI;QACpB,eAAe,EAAE,GAAG;QACpB,eAAe,EAAE,SAAS;KAC3B;IACD,MAAM,EAAE;QACN,cAAc,EAAE,KAAK;QACrB,eAAe,EAAE,GAAG;QACpB,eAAe,EAAE,IAAI;KACtB;CACF,CAAC;AASF,MAAM,UAAU,aAAa,CAC3B,WAAuC,EACvC,
|
|
1
|
+
{"version":3,"file":"defaults.js","sourceRoot":"lib/default/","sources":["app-layout/defaults.ts"],"names":[],"mappings":"AAIA,MAAM,uBAAuB,GAAmB;IAC9C,cAAc,EAAE,IAAI;IACpB,eAAe,EAAE,GAAG;IACpB,eAAe,EAAE,SAAS;CAC3B,CAAC;AAEF,MAAM,QAAQ,GAAuD;IACnE,OAAO,oBACF,uBAAuB,CAC3B;IACD,SAAS,oBACJ,uBAAuB,CAC3B;IACD,KAAK,EAAE;QACL,cAAc,EAAE,IAAI;QACpB,eAAe,EAAE,GAAG;QACpB,eAAe,EAAE,SAAS;KAC3B;IACD,IAAI,EAAE;QACJ,cAAc,EAAE,KAAK;QACrB,eAAe,EAAE,GAAG;QACpB,eAAe,EAAE,GAAG;KACrB;IACD,KAAK,EAAE;QACL,cAAc,EAAE,IAAI;QACpB,eAAe,EAAE,GAAG;QACpB,eAAe,EAAE,SAAS;KAC3B;IACD,MAAM,EAAE;QACN,cAAc,EAAE,KAAK;QACrB,eAAe,EAAE,GAAG;QACpB,eAAe,EAAE,IAAI;KACtB;CACF,CAAC;AASF,MAAM,UAAU,aAAa,CAC3B,WAAuC,EACvC,cAA4G,EAC5G,SAAkB;;IAElB,MAAM,mBAAmB,GAAG,SAAS;QACnC,CAAC,iCAAM,QAAQ,CAAC,WAAW,CAAC,KAAE,eAAe,EAAE,SAAS,IACxD,CAAC,CAAC,QAAQ,CAAC,WAAW,CAAC,CAAC;IAE1B,OAAO;QACL,eAAe,EAAE,MAAA,cAAc,CAAC,eAAe,mCAAI,mBAAmB,CAAC,eAAe;QACtF,eAAe,EAAE,MAAA,cAAc,CAAC,eAAe,mCAAI,mBAAmB,CAAC,eAAe;QACtF,cAAc,EAAE,MAAA,cAAc,CAAC,cAAc,mCAAI,mBAAmB,CAAC,cAAc;QACnF,SAAS,EAAE,MAAA,cAAc,CAAC,SAAS,mCAAI,mBAAmB,CAAC,SAAS;KACrE,CAAC;AACJ,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport { AppLayoutProps } from './interfaces';\n\nconst defaultContentTypeState: AppLayoutState = {\n navigationOpen: true,\n minContentWidth: 280,\n maxContentWidth: undefined,\n};\n\nconst defaults: Record<AppLayoutProps.ContentType, AppLayoutState> = {\n default: {\n ...defaultContentTypeState,\n },\n dashboard: {\n ...defaultContentTypeState,\n },\n cards: {\n navigationOpen: true,\n minContentWidth: 280,\n maxContentWidth: undefined,\n },\n form: {\n navigationOpen: false,\n minContentWidth: 280,\n maxContentWidth: 800,\n },\n table: {\n navigationOpen: true,\n minContentWidth: 280,\n maxContentWidth: undefined,\n },\n wizard: {\n navigationOpen: false,\n minContentWidth: 280,\n maxContentWidth: 1080,\n },\n};\n\nexport interface AppLayoutState {\n navigationOpen?: boolean;\n toolsOpen?: boolean;\n minContentWidth: number;\n maxContentWidth?: number | undefined;\n}\n\nexport function applyDefaults(\n contentType: AppLayoutProps.ContentType,\n stateFromProps: Pick<AppLayoutProps, 'minContentWidth' | 'maxContentWidth' | 'navigationOpen' | 'toolsOpen'>,\n isRefresh: boolean\n): AppLayoutState {\n const contentTypeDefaults = isRefresh\n ? { ...defaults[contentType], maxContentWidth: undefined }\n : defaults[contentType];\n\n return {\n maxContentWidth: stateFromProps.maxContentWidth ?? contentTypeDefaults.maxContentWidth,\n minContentWidth: stateFromProps.minContentWidth ?? contentTypeDefaults.minContentWidth,\n navigationOpen: stateFromProps.navigationOpen ?? contentTypeDefaults.navigationOpen,\n toolsOpen: stateFromProps.toolsOpen ?? contentTypeDefaults.toolsOpen,\n };\n}\n"]}
|
|
@@ -43,9 +43,8 @@ export interface ResizableDrawerProps extends DesktopDrawerProps {
|
|
|
43
43
|
size: number;
|
|
44
44
|
id: string;
|
|
45
45
|
}) => void;
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
getMaxWidth: () => number;
|
|
46
|
+
minWidth: number;
|
|
47
|
+
maxWidth: number;
|
|
49
48
|
refs: FocusControlRefs;
|
|
50
49
|
toolsContent: React.ReactNode;
|
|
51
50
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"interfaces.d.ts","sourceRoot":"lib/default/","sources":["app-layout/drawer/interfaces.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,aAAa,EAAE,MAAM,YAAY,CAAC;AAC3C,OAAO,EAAE,cAAc,EAAE,MAAM,eAAe,CAAC;AAC/C,OAAO,EAAE,SAAS,EAAE,MAAM,uBAAuB,CAAC;AAClD,OAAO,EAAE,yBAAyB,EAAE,MAAM,uBAAuB,CAAC;AAElE,OAAO,EAAE,gBAAgB,EAAE,MAAM,4BAA4B,CAAC;AAE9D,MAAM,WAAW,kBAAkB;IACjC,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,gBAAgB,EAAE,MAAM,CAAC;IACzB,eAAe,EAAE,MAAM,CAAC;IACxB,cAAc,EAAE,MAAM,CAAC;IACvB,UAAU,EAAE;QACV,MAAM,EAAE,KAAK,CAAC,GAAG,CAAC;YAAE,KAAK,IAAI,IAAI,CAAA;SAAE,CAAC,CAAC;QACrC,KAAK,EAAE,KAAK,CAAC,GAAG,CAAC;YAAE,KAAK,IAAI,IAAI,CAAA;SAAE,CAAC,CAAC;KACrC,CAAC;IACF,KAAK,EAAE,MAAM,CAAC;IACd,SAAS,EAAE,MAAM,GAAG,SAAS,CAAC;IAC9B,YAAY,EAAE,MAAM,GAAG,SAAS,CAAC;IACjC,UAAU,EAAE;QACV,SAAS,EAAE,MAAM,GAAG,SAAS,CAAC;QAC9B,UAAU,EAAE,MAAM,GAAG,SAAS,CAAC;QAC/B,SAAS,EAAE,MAAM,GAAG,SAAS,CAAC;QAC9B,YAAY,CAAC,EAAE,MAAM,CAAC;KACvB,CAAC;IACF,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,IAAI,EAAE,MAAM,OAAO,aAAa,CAAC;IACjC,QAAQ,EAAE,OAAO,CAAC;IAClB,MAAM,EAAE,OAAO,CAAC;IAChB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;IACpC,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,CAAC;IAC5C,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,CAAC;IAChD,YAAY,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAChC;AAED,MAAM,WAAW,oBAAqB,SAAQ,kBAAkB;IAC9D,YAAY,EAAE,cAAc,CAAC,MAAM,GAAG,SAAS,CAAC;IAChD,QAAQ,EAAE,CAAC,YAAY,EAAE;QAAE,IAAI,EAAE,MAAM,CAAC;QAAC,EAAE,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI,CAAC;IAC/D,
|
|
1
|
+
{"version":3,"file":"interfaces.d.ts","sourceRoot":"lib/default/","sources":["app-layout/drawer/interfaces.ts"],"names":[],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"interfaces.js","sourceRoot":"lib/default/","sources":["app-layout/drawer/interfaces.ts"],"names":[],"mappings":";
|
|
1
|
+
{"version":3,"file":"interfaces.js","sourceRoot":"lib/default/","sources":["app-layout/drawer/interfaces.ts"],"names":[],"mappings":";AA4FA,sBAAsB","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React from 'react';\nimport { togglesConfig } from '../toggles';\nimport { AppLayoutProps } from '../interfaces';\nimport { IconProps } from '../../icon/interfaces';\nimport { NonCancelableEventHandler } from '../../internal/events';\n\nimport { FocusControlRefs } from '../utils/use-focus-control';\n\nexport interface DesktopDrawerProps {\n id?: string;\n contentClassName: string;\n toggleClassName: string;\n closeClassName: string;\n toggleRefs: {\n toggle: React.Ref<{ focus(): void }>;\n close: React.Ref<{ focus(): void }>;\n };\n width: number;\n topOffset: number | undefined;\n bottomOffset: number | undefined;\n ariaLabels: {\n mainLabel: string | undefined;\n closeLabel: string | undefined;\n openLabel: string | undefined;\n resizeHandle?: string;\n };\n children: React.ReactNode;\n hideOpenButton?: boolean;\n type: keyof typeof togglesConfig;\n isMobile: boolean;\n isOpen: boolean;\n isHidden?: boolean;\n onToggle: (isOpen: boolean) => void;\n onClick?: (event: React.MouseEvent) => void;\n onLoseFocus?: (event: React.FocusEvent) => void;\n resizeHandle?: React.ReactNode;\n}\n\nexport interface ResizableDrawerProps extends DesktopDrawerProps {\n activeDrawer: AppLayoutProps.Drawer | undefined;\n onResize: (resizeDetail: { size: number; id: string }) => void;\n minWidth: number;\n maxWidth: number;\n refs: FocusControlRefs;\n toolsContent: React.ReactNode;\n}\n\nexport interface DrawerTriggersBarProps {\n topOffset: number | undefined;\n bottomOffset: number | undefined;\n isMobile: boolean;\n drawers: Array<AppLayoutProps.Drawer>;\n activeDrawerId: string | null;\n onDrawerChange: (newDrawerId: string | null) => void;\n ariaLabels: AppLayoutProps['ariaLabels'];\n drawerRefs: FocusControlRefs;\n}\n\n// Beta interfaces\n// TODO: remove after beta consumers migrate to prod API\ninterface BetaDrawerItemAriaLabels {\n content?: string;\n closeButton?: string;\n triggerButton?: string;\n resizeHandle?: string;\n}\n\ninterface BetaDrawerItem {\n id: string;\n content: React.ReactNode;\n trigger: {\n iconName?: IconProps.Name;\n iconSvg?: React.ReactNode;\n };\n ariaLabels: BetaDrawerItemAriaLabels;\n resizable?: boolean;\n defaultSize?: number;\n onResize?: NonCancelableEventHandler<{ size: number; id: string }>;\n badge?: boolean;\n}\n\nexport interface BetaDrawersProps {\n items: Array<BetaDrawerItem>;\n activeDrawerId?: string | null;\n onChange?: NonCancelableEventHandler<string | null>;\n onResize?: NonCancelableEventHandler<{ size: number; id: string }>;\n ariaLabel?: string;\n overflowAriaLabel?: string;\n overflowWithBadgeAriaLabel?: string;\n}\n// Beta interfaces end\n"]}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
2
|
import { ResizableDrawerProps } from './interfaces';
|
|
3
|
-
export declare const ResizableDrawer: ({ onResize,
|
|
3
|
+
export declare const ResizableDrawer: ({ onResize, maxWidth, minWidth, refs, activeDrawer, toolsContent, ...props }: ResizableDrawerProps) => JSX.Element;
|
|
4
4
|
//# sourceMappingURL=resizable-drawer.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"resizable-drawer.d.ts","sourceRoot":"lib/default/","sources":["app-layout/drawer/resizable-drawer.tsx"],"names":[],"mappings":";AAeA,OAAO,EAAE,oBAAoB,EAAE,MAAM,cAAc,CAAC;AAGpD,eAAO,MAAM,eAAe,
|
|
1
|
+
{"version":3,"file":"resizable-drawer.d.ts","sourceRoot":"lib/default/","sources":["app-layout/drawer/resizable-drawer.tsx"],"names":[],"mappings":";AAeA,OAAO,EAAE,oBAAoB,EAAE,MAAM,cAAc,CAAC;AAGpD,eAAO,MAAM,eAAe,iFAQzB,oBAAoB,gBAiEtB,CAAC"}
|
|
@@ -2,7 +2,7 @@ import { __rest } from "tslib";
|
|
|
2
2
|
// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
|
|
3
3
|
// SPDX-License-Identifier: Apache-2.0
|
|
4
4
|
import clsx from 'clsx';
|
|
5
|
-
import React, {
|
|
5
|
+
import React, { useRef } from 'react';
|
|
6
6
|
import { getLimitedValue } from '../../split-panel/utils/size-utils';
|
|
7
7
|
import { usePointerEvents } from '../utils/use-pointer-events';
|
|
8
8
|
import { useKeyboardEvents } from '../utils/use-keyboard-events';
|
|
@@ -14,23 +14,14 @@ import styles from './styles.css.js';
|
|
|
14
14
|
import { TOOLS_DRAWER_ID } from '../utils/use-drawers';
|
|
15
15
|
export const ResizableDrawer = (_a) => {
|
|
16
16
|
var _b, _c, _d, _e;
|
|
17
|
-
var { onResize,
|
|
18
|
-
const { isOpen, children, isMobile } = props;
|
|
19
|
-
const
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
const handle = requestAnimationFrame(() => {
|
|
24
|
-
const maxSize = getMaxWidth();
|
|
25
|
-
setRelativeSize((size / maxSize) * 100);
|
|
26
|
-
});
|
|
27
|
-
return () => cancelAnimationFrame(handle);
|
|
28
|
-
}, [size, getMaxWidth]);
|
|
29
|
-
const setSidePanelWidth = (width) => {
|
|
30
|
-
const maxWidth = getMaxWidth();
|
|
31
|
-
const size = getLimitedValue(minSize, width, maxWidth);
|
|
17
|
+
var { onResize, maxWidth, minWidth, refs, activeDrawer, toolsContent } = _a, props = __rest(_a, ["onResize", "maxWidth", "minWidth", "refs", "activeDrawer", "toolsContent"]);
|
|
18
|
+
const { isOpen, children, width, isMobile } = props;
|
|
19
|
+
const clampedWidth = getLimitedValue(minWidth, width, maxWidth);
|
|
20
|
+
const relativeSize = ((clampedWidth - minWidth) / (maxWidth - minWidth)) * 100;
|
|
21
|
+
const setSidePanelWidth = (newWidth) => {
|
|
22
|
+
const size = getLimitedValue(minWidth, newWidth, maxWidth);
|
|
32
23
|
const id = activeDrawer === null || activeDrawer === void 0 ? void 0 : activeDrawer.id;
|
|
33
|
-
if (isOpen && id && maxWidth >=
|
|
24
|
+
if (isOpen && id && maxWidth >= minWidth) {
|
|
34
25
|
onResize({ size, id });
|
|
35
26
|
}
|
|
36
27
|
};
|
|
@@ -45,7 +36,7 @@ export const ResizableDrawer = (_a) => {
|
|
|
45
36
|
const onKeyDown = useKeyboardEvents(sizeControlProps);
|
|
46
37
|
const resizeHandle = (React.createElement("div", { ref: refs.slider, role: "slider", tabIndex: 0, "aria-label": (_b = activeDrawer === null || activeDrawer === void 0 ? void 0 : activeDrawer.ariaLabels) === null || _b === void 0 ? void 0 : _b.resizeHandle, "aria-valuemax": 100, "aria-valuemin": 0, "aria-valuenow": relativeSize, className: clsx(splitPanelStyles.slider, splitPanelStyles[`slider-side`], testutilStyles['drawers-slider']), onKeyDown: onKeyDown, onPointerDown: onSliderPointerDown },
|
|
47
38
|
React.createElement(ResizeHandler, { className: clsx(splitPanelStyles['slider-icon'], splitPanelStyles[`slider-icon-side`]) })));
|
|
48
|
-
return (React.createElement(Drawer, Object.assign({}, props, { id: activeDrawer === null || activeDrawer === void 0 ? void 0 : activeDrawer.id, ref: drawerRefObject, isHidden: !activeDrawer, resizeHandle: !isMobile &&
|
|
39
|
+
return (React.createElement(Drawer, Object.assign({}, props, { id: activeDrawer === null || activeDrawer === void 0 ? void 0 : activeDrawer.id, width: clampedWidth, ref: drawerRefObject, isHidden: !activeDrawer, resizeHandle: !isMobile &&
|
|
49
40
|
(activeDrawer === null || activeDrawer === void 0 ? void 0 : activeDrawer.resizable) && React.createElement("div", { className: splitPanelStyles['slider-wrapper-side'] }, resizeHandle), ariaLabels: {
|
|
50
41
|
openLabel: (_c = activeDrawer === null || activeDrawer === void 0 ? void 0 : activeDrawer.ariaLabels) === null || _c === void 0 ? void 0 : _c.triggerButton,
|
|
51
42
|
mainLabel: (_d = activeDrawer === null || activeDrawer === void 0 ? void 0 : activeDrawer.ariaLabels) === null || _d === void 0 ? void 0 : _d.drawerName,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"resizable-drawer.js","sourceRoot":"lib/default/","sources":["app-layout/drawer/resizable-drawer.tsx"],"names":[],"mappings":";AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,KAAK,EAAE,EAAE,
|
|
1
|
+
{"version":3,"file":"resizable-drawer.js","sourceRoot":"lib/default/","sources":["app-layout/drawer/resizable-drawer.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport clsx from 'clsx';\nimport React, { useRef } from 'react';\n\nimport { getLimitedValue } from '../../split-panel/utils/size-utils';\nimport { usePointerEvents } from '../utils/use-pointer-events';\nimport { useKeyboardEvents } from '../utils/use-keyboard-events';\nimport { SizeControlProps } from '../utils/interfaces';\nimport { Drawer } from './index';\nimport testutilStyles from '../test-classes/styles.css.js';\n\nimport ResizeHandler from '../../split-panel/icons/resize-handler';\nimport splitPanelStyles from '../../split-panel/styles.css.js';\nimport styles from './styles.css.js';\nimport { ResizableDrawerProps } from './interfaces';\nimport { TOOLS_DRAWER_ID } from '../utils/use-drawers';\n\nexport const ResizableDrawer = ({\n onResize,\n maxWidth,\n minWidth,\n refs,\n activeDrawer,\n toolsContent,\n ...props\n}: ResizableDrawerProps) => {\n const { isOpen, children, width, isMobile } = props;\n\n const clampedWidth = getLimitedValue(minWidth, width, maxWidth);\n const relativeSize = ((clampedWidth - minWidth) / (maxWidth - minWidth)) * 100;\n\n const setSidePanelWidth = (newWidth: number) => {\n const size = getLimitedValue(minWidth, newWidth, maxWidth);\n const id = activeDrawer?.id;\n\n if (isOpen && id && maxWidth >= minWidth) {\n onResize({ size, id });\n }\n };\n\n const drawerRefObject = useRef<HTMLDivElement>(null);\n\n const sizeControlProps: SizeControlProps = {\n position: 'side',\n panelRef: drawerRefObject,\n handleRef: refs.slider,\n onResize: setSidePanelWidth,\n };\n\n const onSliderPointerDown = usePointerEvents(sizeControlProps);\n const onKeyDown = useKeyboardEvents(sizeControlProps);\n\n const resizeHandle = (\n <div\n ref={refs.slider}\n role=\"slider\"\n tabIndex={0}\n aria-label={activeDrawer?.ariaLabels?.resizeHandle}\n aria-valuemax={100}\n aria-valuemin={0}\n aria-valuenow={relativeSize}\n className={clsx(splitPanelStyles.slider, splitPanelStyles[`slider-side`], testutilStyles['drawers-slider'])}\n onKeyDown={onKeyDown}\n onPointerDown={onSliderPointerDown}\n >\n <ResizeHandler className={clsx(splitPanelStyles['slider-icon'], splitPanelStyles[`slider-icon-side`])} />\n </div>\n );\n\n return (\n <Drawer\n {...props}\n id={activeDrawer?.id}\n width={clampedWidth}\n ref={drawerRefObject}\n isHidden={!activeDrawer}\n resizeHandle={\n !isMobile &&\n activeDrawer?.resizable && <div className={splitPanelStyles['slider-wrapper-side']}>{resizeHandle}</div>\n }\n ariaLabels={{\n openLabel: activeDrawer?.ariaLabels?.triggerButton,\n mainLabel: activeDrawer?.ariaLabels?.drawerName,\n closeLabel: activeDrawer?.ariaLabels?.closeButton,\n }}\n >\n {toolsContent && <div className={clsx(activeDrawer?.id !== TOOLS_DRAWER_ID && styles.hide)}>{toolsContent}</div>}\n {activeDrawer?.id !== TOOLS_DRAWER_ID ? children : null}\n </Drawer>\n );\n};\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"lib/default/","sources":["app-layout/index.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAwE,MAAM,OAAO,CAAC;AAM7F,OAAO,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"lib/default/","sources":["app-layout/index.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAwE,MAAM,OAAO,CAAC;AAM7F,OAAO,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;AAwC9C,OAAO,EAAE,cAAc,EAAE,CAAC;AAE1B,QAAA,MAAM,SAAS,2FAiCd,CAAC;AAmlBF,eAAe,SAAS,CAAC"}
|
package/app-layout/index.js
CHANGED
|
@@ -11,7 +11,7 @@ import { applyDefaults } from './defaults';
|
|
|
11
11
|
import { Notifications } from './notifications';
|
|
12
12
|
import { MobileToolbar } from './mobile-toolbar';
|
|
13
13
|
import { useFocusControl } from './utils/use-focus-control';
|
|
14
|
-
import
|
|
14
|
+
import useDocumentWidth from './utils/use-document-width';
|
|
15
15
|
import useContentHeight from './utils/use-content-height';
|
|
16
16
|
import styles from './styles.css.js';
|
|
17
17
|
import testutilStyles from './test-classes/styles.css.js';
|
|
@@ -24,7 +24,7 @@ import { useVisualRefresh } from '../internal/hooks/use-visual-mode';
|
|
|
24
24
|
import ContentWrapper from './content-wrapper';
|
|
25
25
|
import { Drawer, DrawerTriggersBar } from './drawer';
|
|
26
26
|
import { ResizableDrawer } from './drawer/resizable-drawer';
|
|
27
|
-
import {
|
|
27
|
+
import { SPLIT_PANEL_MIN_WIDTH, SideSplitPanelDrawer, SplitPanelProvider, } from './split-panel';
|
|
28
28
|
import useAppLayoutOffsets from './utils/use-content-width';
|
|
29
29
|
import { isDevelopment } from '../internal/is-development';
|
|
30
30
|
import { useStableCallback, warnOnce } from '@cloudscape-design/component-toolkit/internal';
|
|
@@ -110,7 +110,6 @@ const OldAppLayout = React.forwardRef((_a, ref) => {
|
|
|
110
110
|
const navigationVisible = !navigationHide && navigationOpen;
|
|
111
111
|
const toolsVisible = !toolsHide && toolsOpen;
|
|
112
112
|
const { contentHeightStyle, headerHeight, footerHeight } = useContentHeight(headerSelector, footerSelector, disableBodyScroll);
|
|
113
|
-
const [isSplitpanelForcedPosition, setIsSplitpanelForcedPosition] = useState(false);
|
|
114
113
|
const [notificationsHeight, notificationsRef] = useContainerQuery(rect => rect.contentBoxHeight);
|
|
115
114
|
const anyPanelOpen = navigationVisible || toolsVisible || !!activeDrawer;
|
|
116
115
|
const hasRenderedNotifications = notificationsHeight ? notificationsHeight > 0 : false;
|
|
@@ -134,14 +133,12 @@ const OldAppLayout = React.forwardRef((_a, ref) => {
|
|
|
134
133
|
const closedDrawerWidth = 40;
|
|
135
134
|
const effectiveNavigationWidth = navigationHide ? 0 : navigationOpen ? navigationWidth : closedDrawerWidth;
|
|
136
135
|
const getEffectiveToolsWidth = () => {
|
|
137
|
-
if (toolsHide &&
|
|
138
|
-
(!splitPanelDisplayed || (splitPanelPreferences === null || splitPanelPreferences === void 0 ? void 0 : splitPanelPreferences.position) !== 'side') &&
|
|
139
|
-
(!drawers || drawers.length === 0)) {
|
|
140
|
-
return 0;
|
|
141
|
-
}
|
|
142
136
|
if (activeDrawer && activeDrawerSize) {
|
|
143
137
|
return activeDrawerSize;
|
|
144
138
|
}
|
|
139
|
+
if (toolsHide || drawers) {
|
|
140
|
+
return 0;
|
|
141
|
+
}
|
|
145
142
|
if (toolsOpen) {
|
|
146
143
|
return toolsWidth;
|
|
147
144
|
}
|
|
@@ -174,30 +171,6 @@ const OldAppLayout = React.forwardRef((_a, ref) => {
|
|
|
174
171
|
setSplitPanelLastInteraction({ type: splitPanelOpen ? 'close' : 'open' });
|
|
175
172
|
fireNonCancelableEvent(onSplitPanelToggle, { open: !splitPanelOpen });
|
|
176
173
|
}, [setSplitPanelOpen, splitPanelOpen, onSplitPanelToggle, setSplitPanelLastInteraction]);
|
|
177
|
-
const getSplitPanelMaxWidth = useStableCallback(() => {
|
|
178
|
-
if (!mainContentRef.current || !defaults.minContentWidth) {
|
|
179
|
-
return NaN;
|
|
180
|
-
}
|
|
181
|
-
const width = parseInt(getComputedStyle(mainContentRef.current).width);
|
|
182
|
-
// when disableContentPaddings is true there is less available space,
|
|
183
|
-
// so we subtract space-scaled-2x-xxxl * 2 for left and right padding
|
|
184
|
-
const contentPadding = disableContentPaddings ? 80 : 0;
|
|
185
|
-
const spaceAvailable = width - defaults.minContentWidth - contentPadding;
|
|
186
|
-
const spaceTaken = finalSplitPanePosition === 'side' ? splitPanelSize : 0;
|
|
187
|
-
return Math.max(0, spaceTaken + spaceAvailable);
|
|
188
|
-
});
|
|
189
|
-
const getDrawerMaxWidth = useStableCallback(() => {
|
|
190
|
-
if (!mainContentRef.current || !defaults.minContentWidth) {
|
|
191
|
-
return NaN;
|
|
192
|
-
}
|
|
193
|
-
// Either use the computed width of the drawer or the drawerSize as defined.
|
|
194
|
-
const width = parseInt(getComputedStyle(mainContentRef.current).width || `${activeDrawerSize}`);
|
|
195
|
-
// when disableContentPaddings is true there is less available space,
|
|
196
|
-
// so we subtract space-scaled-2x-xxxl * 2 for left and right padding
|
|
197
|
-
const contentPadding = disableContentPaddings ? 80 : 0;
|
|
198
|
-
const spaceAvailable = width - defaults.minContentWidth - contentPadding;
|
|
199
|
-
return Math.max(0, activeDrawerSize + spaceAvailable);
|
|
200
|
-
});
|
|
201
174
|
const getSplitPanelMaxHeight = useStableCallback(() => {
|
|
202
175
|
if (typeof document === 'undefined') {
|
|
203
176
|
return 0; // render the split panel in its minimum possible size
|
|
@@ -213,65 +186,42 @@ const OldAppLayout = React.forwardRef((_a, ref) => {
|
|
|
213
186
|
: availableHeight - MAIN_PANEL_MIN_HEIGHT;
|
|
214
187
|
}
|
|
215
188
|
});
|
|
216
|
-
const
|
|
217
|
-
const splitPaneAvailableOnTheSide = splitPanelDisplayed && finalSplitPanePosition === 'side';
|
|
218
|
-
const splitPanelOpenOnTheSide = splitPaneAvailableOnTheSide && splitPanelOpen;
|
|
219
|
-
const toggleButtonsBarWidth = 0;
|
|
220
|
-
const windowWidth = useWindowWidth();
|
|
189
|
+
const documentWidth = useDocumentWidth();
|
|
221
190
|
const { left: leftOffset, right: rightOffset } = useAppLayoutOffsets(rootRef.current);
|
|
222
|
-
const
|
|
191
|
+
const rightDrawerBarWidth = drawers ? (drawers.length > 1 ? closedDrawerWidth : 0) : 0;
|
|
192
|
+
const contentPadding = 80;
|
|
193
|
+
// all content except split-panel + drawers/tools area
|
|
194
|
+
const resizableSpaceAvailable = Math.max(0, documentWidth -
|
|
223
195
|
leftOffset -
|
|
224
196
|
rightOffset -
|
|
225
|
-
effectiveToolsWidth -
|
|
226
197
|
effectiveNavigationWidth -
|
|
227
|
-
|
|
228
|
-
|
|
229
|
-
|
|
230
|
-
|
|
231
|
-
|
|
232
|
-
|
|
233
|
-
|
|
234
|
-
|
|
235
|
-
|
|
198
|
+
defaults.minContentWidth -
|
|
199
|
+
contentPadding -
|
|
200
|
+
rightDrawerBarWidth);
|
|
201
|
+
// if there is no space to display split panel in the side, force to bottom
|
|
202
|
+
const isSplitPanelForcedPosition = isMobile || resizableSpaceAvailable - effectiveToolsWidth < SPLIT_PANEL_MIN_WIDTH;
|
|
203
|
+
const finalSplitPanePosition = isSplitPanelForcedPosition ? 'bottom' : splitPanelPosition;
|
|
204
|
+
const splitPaneAvailableOnTheSide = splitPanelDisplayed && finalSplitPanePosition === 'side';
|
|
205
|
+
const sideSplitPanelSize = splitPaneAvailableOnTheSide ? (splitPanelOpen ? splitPanelSize : closedDrawerWidth) : 0;
|
|
206
|
+
const splitPanelMaxWidth = Math.max(0, resizableSpaceAvailable - effectiveToolsWidth);
|
|
207
|
+
const drawerMaxSize = Math.max(0, resizableSpaceAvailable - sideSplitPanelSize);
|
|
236
208
|
const navigationClosedWidth = navigationHide || isMobile ? 0 : closedDrawerWidth;
|
|
237
|
-
const toolsClosedWidth = toolsHide || isMobile || (!hasDrawers && toolsHide) ? 0 : closedDrawerWidth;
|
|
238
209
|
const contentMaxWidthStyle = !isMobile ? { maxWidth: defaults.maxContentWidth } : undefined;
|
|
239
210
|
const [splitPanelReportedSize, setSplitPanelReportedSize] = useState(0);
|
|
240
211
|
const [splitPanelReportedHeaderHeight, setSplitPanelReportedHeaderHeight] = useState(0);
|
|
241
|
-
const getSplitPanelRightOffset = () => {
|
|
242
|
-
if (isMobile) {
|
|
243
|
-
return 0;
|
|
244
|
-
}
|
|
245
|
-
if (hasDrawers) {
|
|
246
|
-
if (activeDrawer) {
|
|
247
|
-
if (drawers.length === 1) {
|
|
248
|
-
return activeDrawerSize;
|
|
249
|
-
}
|
|
250
|
-
if (!isResizeInvalid && activeDrawerSize) {
|
|
251
|
-
return activeDrawerSize + closedDrawerWidth;
|
|
252
|
-
}
|
|
253
|
-
return toolsWidth + closedDrawerWidth;
|
|
254
|
-
}
|
|
255
|
-
return drawers.length > 0 ? closedDrawerWidth : 0;
|
|
256
|
-
}
|
|
257
|
-
if (!toolsHide && toolsOpen) {
|
|
258
|
-
return toolsWidth;
|
|
259
|
-
}
|
|
260
|
-
return toolsClosedWidth;
|
|
261
|
-
};
|
|
262
212
|
const splitPanelContextProps = {
|
|
263
213
|
topOffset: headerHeight + (finalSplitPanePosition === 'bottom' ? stickyNotificationsHeight || 0 : 0),
|
|
264
214
|
bottomOffset: footerHeight,
|
|
265
215
|
leftOffset: leftOffset + (isMobile ? 0 : !navigationHide && navigationOpen ? navigationWidth : navigationClosedWidth),
|
|
266
|
-
rightOffset: rightOffset +
|
|
216
|
+
rightOffset: isMobile ? 0 : rightOffset + effectiveToolsWidth + rightDrawerBarWidth,
|
|
267
217
|
position: finalSplitPanePosition,
|
|
268
218
|
size: splitPanelSize,
|
|
269
|
-
|
|
219
|
+
maxWidth: splitPanelMaxWidth,
|
|
270
220
|
getMaxHeight: getSplitPanelMaxHeight,
|
|
271
221
|
disableContentPaddings,
|
|
272
222
|
contentWidthStyles: contentMaxWidthStyle,
|
|
273
223
|
isOpen: splitPanelOpen,
|
|
274
|
-
isForcedPosition:
|
|
224
|
+
isForcedPosition: isSplitPanelForcedPosition,
|
|
275
225
|
onResize: onSplitPanelSizeSet,
|
|
276
226
|
onToggle: onSplitPanelToggleHandler,
|
|
277
227
|
onPreferencesChange: onSplitPanelPreferencesSet,
|
|
@@ -295,7 +245,7 @@ const OldAppLayout = React.forwardRef((_a, ref) => {
|
|
|
295
245
|
// 2. Tools panel is present and open
|
|
296
246
|
toolsVisible ||
|
|
297
247
|
// 3. Split panel is open in side position
|
|
298
|
-
|
|
248
|
+
(splitPaneAvailableOnTheSide && splitPanelOpen),
|
|
299
249
|
isMobile,
|
|
300
250
|
};
|
|
301
251
|
useImperativeHandle(ref, () => ({
|
|
@@ -370,13 +320,13 @@ const OldAppLayout = React.forwardRef((_a, ref) => {
|
|
|
370
320
|
closeLabel: (_d = activeDrawer === null || activeDrawer === void 0 ? void 0 : activeDrawer.ariaLabels) === null || _d === void 0 ? void 0 : _d.closeButton,
|
|
371
321
|
mainLabel: activeDrawer === null || activeDrawer === void 0 ? void 0 : activeDrawer.ariaLabels.drawerName,
|
|
372
322
|
resizeHandle: (_e = activeDrawer === null || activeDrawer === void 0 ? void 0 : activeDrawer.ariaLabels) === null || _e === void 0 ? void 0 : _e.resizeHandle,
|
|
373
|
-
},
|
|
323
|
+
}, minWidth: minDrawerSize, maxWidth: drawerMaxSize, width: activeDrawerSize, bottomOffset: footerHeight, topOffset: headerHeight, isMobile: isMobile, onToggle: isOpen => {
|
|
374
324
|
if (!isOpen) {
|
|
375
325
|
focusToolsButtons();
|
|
376
326
|
focusDrawersButtons();
|
|
377
327
|
onActiveDrawerChange(null);
|
|
378
328
|
}
|
|
379
|
-
}, isOpen: true, hideOpenButton: true, toggleRefs: drawerRefs, type: "tools", onLoseFocus: loseDrawersFocus, activeDrawer: activeDrawer,
|
|
329
|
+
}, isOpen: true, hideOpenButton: true, toggleRefs: drawerRefs, type: "tools", onLoseFocus: loseDrawersFocus, activeDrawer: activeDrawer, onResize: changeDetail => onActiveDrawerResize(changeDetail), refs: drawerRefs, toolsContent: (_f = drawers === null || drawers === void 0 ? void 0 : drawers.find(drawer => drawer.id === TOOLS_DRAWER_ID)) === null || _f === void 0 ? void 0 : _f.content }, activeDrawer === null || activeDrawer === void 0 ? void 0 : activeDrawer.content)) : (!toolsHide && (React.createElement(Drawer, { contentClassName: testutilStyles.tools, toggleClassName: testutilStyles['tools-toggle'], closeClassName: testutilStyles['tools-close'], ariaLabels: togglesConfig.tools.getLabels(ariaLabels), width: toolsWidth, bottomOffset: footerHeight, topOffset: headerHeight, isMobile: isMobile, onToggle: onToolsToggle, isOpen: toolsOpen, toggleRefs: toolsRefs, type: "tools", onLoseFocus: loseToolsFocus }, tools))),
|
|
380
330
|
hasDrawers && drawers.length > 0 && (React.createElement(DrawerTriggersBar, { drawerRefs: drawerRefs, bottomOffset: footerHeight, topOffset: headerHeight, isMobile: isMobile, drawers: drawers, activeDrawerId: activeDrawerId, onDrawerChange: newDrawerId => {
|
|
381
331
|
if (activeDrawerId !== newDrawerId) {
|
|
382
332
|
focusToolsButtons();
|