@cloudscape-design/components 3.0.524 → 3.0.525
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 -78
- 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-app-layout-rect.d.ts +8 -0
- package/app-layout/utils/use-app-layout-rect.d.ts.map +1 -0
- package/app-layout/utils/{use-content-width.js → use-app-layout-rect.js} +6 -5
- package/app-layout/utils/use-app-layout-rect.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/button-dropdown/styles.css.js +15 -15
- package/button-dropdown/styles.scoped.css +23 -23
- package/button-dropdown/styles.selectors.js +15 -15
- package/internal/base-component/styles.scoped.css +0 -5
- package/internal/environment.js +1 -1
- package/internal/environment.json +1 -1
- package/internal/generated/theming/index.cjs +0 -31
- package/internal/generated/theming/index.js +0 -31
- package/internal/manifest.json +1 -1
- package/package.json +1 -1
- package/app-layout/utils/use-content-width.d.ts +0 -5
- package/app-layout/utils/use-content-width.d.ts.map +0 -1
- package/app-layout/utils/use-content-width.js.map +0 -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":"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,QAAQ,EAAE,MAAM,CAAC;IACjB,QAAQ,EAAE,MAAM,CAAC;IACjB,IAAI,EAAE,gBAAgB,CAAC;IACvB,YAAY,EAAE,KAAK,CAAC,SAAS,CAAC;CAC/B;AAED,MAAM,WAAW,sBAAsB;IACrC,SAAS,EAAE,MAAM,GAAG,SAAS,CAAC;IAC9B,YAAY,EAAE,MAAM,GAAG,SAAS,CAAC;IACjC,QAAQ,EAAE,OAAO,CAAC;IAClB,OAAO,EAAE,KAAK,CAAC,cAAc,CAAC,MAAM,CAAC,CAAC;IACtC,cAAc,EAAE,MAAM,GAAG,IAAI,CAAC;IAC9B,cAAc,EAAE,CAAC,WAAW,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAC;IACrD,UAAU,EAAE,cAAc,CAAC,YAAY,CAAC,CAAC;IACzC,UAAU,EAAE,gBAAgB,CAAC;CAC9B;AAID,UAAU,wBAAwB;IAChC,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAED,UAAU,cAAc;IACtB,EAAE,EAAE,MAAM,CAAC;IACX,OAAO,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,OAAO,EAAE;QACP,QAAQ,CAAC,EAAE,SAAS,CAAC,IAAI,CAAC;QAC1B,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;KAC3B,CAAC;IACF,UAAU,EAAE,wBAAwB,CAAC;IACrC,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,yBAAyB,CAAC;QAAE,IAAI,EAAE,MAAM,CAAC;QAAC,EAAE,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC;IACnE,KAAK,CAAC,EAAE,OAAO,CAAC;CACjB;AAED,MAAM,WAAW,gBAAgB;IAC/B,KAAK,EAAE,KAAK,CAAC,cAAc,CAAC,CAAC;IAC7B,cAAc,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC/B,QAAQ,CAAC,EAAE,yBAAyB,CAAC,MAAM,GAAG,IAAI,CAAC,CAAC;IACpD,QAAQ,CAAC,EAAE,yBAAyB,CAAC;QAAE,IAAI,EAAE,MAAM,CAAC;QAAC,EAAE,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC;IACnE,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,0BAA0B,CAAC,EAAE,MAAM,CAAC;CACrC"}
|
|
@@ -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;AAuC9C,OAAO,EAAE,cAAc,EAAE,CAAC;AAE1B,QAAA,MAAM,SAAS,2FAiCd,CAAC;AAklBF,eAAe,SAAS,CAAC"}
|
package/app-layout/index.js
CHANGED
|
@@ -11,7 +11,6 @@ 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 useWindowWidth from './utils/use-window-width';
|
|
15
14
|
import useContentHeight from './utils/use-content-height';
|
|
16
15
|
import styles from './styles.css.js';
|
|
17
16
|
import testutilStyles from './test-classes/styles.css.js';
|
|
@@ -24,8 +23,8 @@ import { useVisualRefresh } from '../internal/hooks/use-visual-mode';
|
|
|
24
23
|
import ContentWrapper from './content-wrapper';
|
|
25
24
|
import { Drawer, DrawerTriggersBar } from './drawer';
|
|
26
25
|
import { ResizableDrawer } from './drawer/resizable-drawer';
|
|
27
|
-
import {
|
|
28
|
-
import
|
|
26
|
+
import { SPLIT_PANEL_MIN_WIDTH, SideSplitPanelDrawer, SplitPanelProvider, } from './split-panel';
|
|
27
|
+
import useAppLayoutRect from './utils/use-app-layout-rect';
|
|
29
28
|
import { isDevelopment } from '../internal/is-development';
|
|
30
29
|
import { useStableCallback, warnOnce } from '@cloudscape-design/component-toolkit/internal';
|
|
31
30
|
import RefreshedAppLayout from './visual-refresh';
|
|
@@ -110,7 +109,6 @@ const OldAppLayout = React.forwardRef((_a, ref) => {
|
|
|
110
109
|
const navigationVisible = !navigationHide && navigationOpen;
|
|
111
110
|
const toolsVisible = !toolsHide && toolsOpen;
|
|
112
111
|
const { contentHeightStyle, headerHeight, footerHeight } = useContentHeight(headerSelector, footerSelector, disableBodyScroll);
|
|
113
|
-
const [isSplitpanelForcedPosition, setIsSplitpanelForcedPosition] = useState(false);
|
|
114
112
|
const [notificationsHeight, notificationsRef] = useContainerQuery(rect => rect.contentBoxHeight);
|
|
115
113
|
const anyPanelOpen = navigationVisible || toolsVisible || !!activeDrawer;
|
|
116
114
|
const hasRenderedNotifications = notificationsHeight ? notificationsHeight > 0 : false;
|
|
@@ -134,14 +132,12 @@ const OldAppLayout = React.forwardRef((_a, ref) => {
|
|
|
134
132
|
const closedDrawerWidth = 40;
|
|
135
133
|
const effectiveNavigationWidth = navigationHide ? 0 : navigationOpen ? navigationWidth : closedDrawerWidth;
|
|
136
134
|
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
135
|
if (activeDrawer && activeDrawerSize) {
|
|
143
136
|
return activeDrawerSize;
|
|
144
137
|
}
|
|
138
|
+
if (toolsHide || drawers) {
|
|
139
|
+
return 0;
|
|
140
|
+
}
|
|
145
141
|
if (toolsOpen) {
|
|
146
142
|
return toolsWidth;
|
|
147
143
|
}
|
|
@@ -174,30 +170,6 @@ const OldAppLayout = React.forwardRef((_a, ref) => {
|
|
|
174
170
|
setSplitPanelLastInteraction({ type: splitPanelOpen ? 'close' : 'open' });
|
|
175
171
|
fireNonCancelableEvent(onSplitPanelToggle, { open: !splitPanelOpen });
|
|
176
172
|
}, [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
173
|
const getSplitPanelMaxHeight = useStableCallback(() => {
|
|
202
174
|
if (typeof document === 'undefined') {
|
|
203
175
|
return 0; // render the split panel in its minimum possible size
|
|
@@ -213,65 +185,41 @@ const OldAppLayout = React.forwardRef((_a, ref) => {
|
|
|
213
185
|
: availableHeight - MAIN_PANEL_MIN_HEIGHT;
|
|
214
186
|
}
|
|
215
187
|
});
|
|
216
|
-
const
|
|
217
|
-
const
|
|
218
|
-
const
|
|
219
|
-
|
|
220
|
-
const
|
|
221
|
-
const { left: leftOffset, right: rightOffset } = useAppLayoutOffsets(rootRef.current);
|
|
222
|
-
const contentWidthWithSplitPanel = windowWidth -
|
|
188
|
+
const { left: leftOffset, right: rightOffset, width: documentWidth } = useAppLayoutRect(rootRef.current);
|
|
189
|
+
const rightDrawerBarWidth = drawers ? (drawers.length > 1 ? closedDrawerWidth : 0) : 0;
|
|
190
|
+
const contentPadding = 80;
|
|
191
|
+
// all content except split-panel + drawers/tools area
|
|
192
|
+
const resizableSpaceAvailable = Math.max(0, documentWidth -
|
|
223
193
|
leftOffset -
|
|
224
194
|
rightOffset -
|
|
225
|
-
effectiveToolsWidth -
|
|
226
195
|
effectiveNavigationWidth -
|
|
227
|
-
|
|
228
|
-
|
|
229
|
-
|
|
230
|
-
|
|
231
|
-
|
|
232
|
-
|
|
233
|
-
|
|
234
|
-
|
|
235
|
-
|
|
196
|
+
defaults.minContentWidth -
|
|
197
|
+
contentPadding -
|
|
198
|
+
rightDrawerBarWidth);
|
|
199
|
+
// if there is no space to display split panel in the side, force to bottom
|
|
200
|
+
const isSplitPanelForcedPosition = isMobile || resizableSpaceAvailable - effectiveToolsWidth < SPLIT_PANEL_MIN_WIDTH;
|
|
201
|
+
const finalSplitPanePosition = isSplitPanelForcedPosition ? 'bottom' : splitPanelPosition;
|
|
202
|
+
const splitPaneAvailableOnTheSide = splitPanelDisplayed && finalSplitPanePosition === 'side';
|
|
203
|
+
const sideSplitPanelSize = splitPaneAvailableOnTheSide ? (splitPanelOpen ? splitPanelSize : closedDrawerWidth) : 0;
|
|
204
|
+
const splitPanelMaxWidth = Math.max(0, resizableSpaceAvailable - effectiveToolsWidth);
|
|
205
|
+
const drawerMaxSize = Math.max(0, resizableSpaceAvailable - sideSplitPanelSize);
|
|
236
206
|
const navigationClosedWidth = navigationHide || isMobile ? 0 : closedDrawerWidth;
|
|
237
|
-
const toolsClosedWidth = toolsHide || isMobile || (!hasDrawers && toolsHide) ? 0 : closedDrawerWidth;
|
|
238
207
|
const contentMaxWidthStyle = !isMobile ? { maxWidth: defaults.maxContentWidth } : undefined;
|
|
239
208
|
const [splitPanelReportedSize, setSplitPanelReportedSize] = useState(0);
|
|
240
209
|
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
210
|
const splitPanelContextProps = {
|
|
263
211
|
topOffset: headerHeight + (finalSplitPanePosition === 'bottom' ? stickyNotificationsHeight || 0 : 0),
|
|
264
212
|
bottomOffset: footerHeight,
|
|
265
213
|
leftOffset: leftOffset + (isMobile ? 0 : !navigationHide && navigationOpen ? navigationWidth : navigationClosedWidth),
|
|
266
|
-
rightOffset: rightOffset +
|
|
214
|
+
rightOffset: isMobile ? 0 : rightOffset + effectiveToolsWidth + rightDrawerBarWidth,
|
|
267
215
|
position: finalSplitPanePosition,
|
|
268
216
|
size: splitPanelSize,
|
|
269
|
-
|
|
217
|
+
maxWidth: splitPanelMaxWidth,
|
|
270
218
|
getMaxHeight: getSplitPanelMaxHeight,
|
|
271
219
|
disableContentPaddings,
|
|
272
220
|
contentWidthStyles: contentMaxWidthStyle,
|
|
273
221
|
isOpen: splitPanelOpen,
|
|
274
|
-
isForcedPosition:
|
|
222
|
+
isForcedPosition: isSplitPanelForcedPosition,
|
|
275
223
|
onResize: onSplitPanelSizeSet,
|
|
276
224
|
onToggle: onSplitPanelToggleHandler,
|
|
277
225
|
onPreferencesChange: onSplitPanelPreferencesSet,
|
|
@@ -295,7 +243,7 @@ const OldAppLayout = React.forwardRef((_a, ref) => {
|
|
|
295
243
|
// 2. Tools panel is present and open
|
|
296
244
|
toolsVisible ||
|
|
297
245
|
// 3. Split panel is open in side position
|
|
298
|
-
|
|
246
|
+
(splitPaneAvailableOnTheSide && splitPanelOpen),
|
|
299
247
|
isMobile,
|
|
300
248
|
};
|
|
301
249
|
useImperativeHandle(ref, () => ({
|
|
@@ -370,13 +318,13 @@ const OldAppLayout = React.forwardRef((_a, ref) => {
|
|
|
370
318
|
closeLabel: (_d = activeDrawer === null || activeDrawer === void 0 ? void 0 : activeDrawer.ariaLabels) === null || _d === void 0 ? void 0 : _d.closeButton,
|
|
371
319
|
mainLabel: activeDrawer === null || activeDrawer === void 0 ? void 0 : activeDrawer.ariaLabels.drawerName,
|
|
372
320
|
resizeHandle: (_e = activeDrawer === null || activeDrawer === void 0 ? void 0 : activeDrawer.ariaLabels) === null || _e === void 0 ? void 0 : _e.resizeHandle,
|
|
373
|
-
},
|
|
321
|
+
}, minWidth: minDrawerSize, maxWidth: drawerMaxSize, width: activeDrawerSize, bottomOffset: footerHeight, topOffset: headerHeight, isMobile: isMobile, onToggle: isOpen => {
|
|
374
322
|
if (!isOpen) {
|
|
375
323
|
focusToolsButtons();
|
|
376
324
|
focusDrawersButtons();
|
|
377
325
|
onActiveDrawerChange(null);
|
|
378
326
|
}
|
|
379
|
-
}, isOpen: true, hideOpenButton: true, toggleRefs: drawerRefs, type: "tools", onLoseFocus: loseDrawersFocus, activeDrawer: activeDrawer,
|
|
327
|
+
}, 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
328
|
hasDrawers && drawers.length > 0 && (React.createElement(DrawerTriggersBar, { drawerRefs: drawerRefs, bottomOffset: footerHeight, topOffset: headerHeight, isMobile: isMobile, drawers: drawers, activeDrawerId: activeDrawerId, onDrawerChange: newDrawerId => {
|
|
381
329
|
if (activeDrawerId !== newDrawerId) {
|
|
382
330
|
focusToolsButtons();
|