From 5e42c2a502bf55261d0d92aa332e243664a2ae2a Mon Sep 17 00:00:00 2001 From: Mark Ross Date: Mon, 27 Jan 2025 17:52:15 +0000 Subject: [PATCH] initial sliders --- new/node_modules/.package-lock.json | 5 + .../deps/@cloudscape-design_components.js | 1951 +++++++-------- .../deps/@cloudscape-design_components.js.map | 8 +- .../@cloudscape-design_components_alert.js | 32 +- ...ape-design_components_anchor-navigation.js | 12 +- .../deps/@cloudscape-design_components_box.js | 12 +- .../@cloudscape-design_components_button.js | 22 +- ...@cloudscape-design_components_container.js | 26 +- .../@cloudscape-design_components_header.js | 20 +- ...scape-design_components_key-value-pairs.js | 28 +- .../@cloudscape-design_components_select.js | 37 +- .../@cloudscape-design_components_slider.js | 21 + ...loudscape-design_components_slider.js.map} | 0 ...udscape-design_components_space-between.js | 14 +- .../@cloudscape-design_components_tabs.js | 32 +- .../deps/@cloudscape-design_global-styles.js | 2 +- new/node_modules/.vite/deps/_metadata.json | 222 +- new/node_modules/.vite/deps/axios.js | 2 +- .../.vite/deps/bootstrap-slider.js | 1673 +++++++++++++ .../.vite/deps/bootstrap-slider.js.map | 7 + .../{chunk-WFC4E5H7.js => chunk-4XK7Q4FD.js} | 4 +- ...-WFC4E5H7.js.map => chunk-4XK7Q4FD.js.map} | 0 .../{chunk-GXZPW7QV.js => chunk-6J4MIBBZ.js} | 6 +- ...-GXZPW7QV.js.map => chunk-6J4MIBBZ.js.map} | 0 .../{chunk-3WZWB2IQ.js => chunk-75OE6Y4K.js} | 18 +- ...-3WZWB2IQ.js.map => chunk-75OE6Y4K.js.map} | 0 .../{chunk-65ELT63B.js => chunk-7CSPPX7P.js} | 40 +- ...-65ELT63B.js.map => chunk-7CSPPX7P.js.map} | 0 .../{chunk-CDYXOKP3.js => chunk-7FDAOWXY.js} | 4 +- ...-CDYXOKP3.js.map => chunk-7FDAOWXY.js.map} | 0 .../{chunk-IU5VMN4E.js => chunk-AFMUY7D5.js} | 4 +- ...-IU5VMN4E.js.map => chunk-AFMUY7D5.js.map} | 0 .../{chunk-UVXVMYWK.js => chunk-AROLV7NB.js} | 20 +- ...-UVXVMYWK.js.map => chunk-AROLV7NB.js.map} | 0 .../{chunk-LQLS3LLF.js => chunk-C3FHTRF6.js} | 12 +- ...-LQLS3LLF.js.map => chunk-C3FHTRF6.js.map} | 0 .../{chunk-FSHUBGVQ.js => chunk-C46SC6FN.js} | 68 +- ...-FSHUBGVQ.js.map => chunk-C46SC6FN.js.map} | 0 .../{chunk-USK37E6T.js => chunk-CIRQIDXF.js} | 6 +- ...-USK37E6T.js.map => chunk-CIRQIDXF.js.map} | 0 .../{chunk-PSZT54K7.js => chunk-CQ36ZYSY.js} | 6 +- ...-PSZT54K7.js.map => chunk-CQ36ZYSY.js.map} | 0 .../{chunk-7ESJ2XKA.js => chunk-DQ3SLYQ2.js} | 6 +- ...-7ESJ2XKA.js.map => chunk-DQ3SLYQ2.js.map} | 0 .../{chunk-SEW4S7MK.js => chunk-EHBY6SWO.js} | 530 ++--- .../.vite/deps/chunk-EHBY6SWO.js.map | 7 + .../{chunk-PJEEZAML.js => chunk-EJTTOCY5.js} | 6 +- ...-PJEEZAML.js.map => chunk-EJTTOCY5.js.map} | 0 .../{chunk-UPFRQ56G.js => chunk-F6G4VLJC.js} | 12 +- ...-UPFRQ56G.js.map => chunk-F6G4VLJC.js.map} | 0 .../{chunk-IGVBCKNN.js => chunk-HHBZMJIC.js} | 10 +- ...-IGVBCKNN.js.map => chunk-HHBZMJIC.js.map} | 0 .../{chunk-X4DPBRGF.js => chunk-IDWIQRNZ.js} | 8 +- ...-X4DPBRGF.js.map => chunk-IDWIQRNZ.js.map} | 0 .../{chunk-MUSP2E23.js => chunk-KHLC7UTB.js} | 10 +- ...-MUSP2E23.js.map => chunk-KHLC7UTB.js.map} | 0 .../{chunk-45LYNKSL.js => chunk-MPEXPGRD.js} | 8 +- ...-45LYNKSL.js.map => chunk-MPEXPGRD.js.map} | 0 .../{chunk-PHPTHGGV.js => chunk-N3HGE3RW.js} | 4 +- ...-PHPTHGGV.js.map => chunk-N3HGE3RW.js.map} | 0 .../{chunk-GQRGKV2B.js => chunk-NVQIR4OB.js} | 8 +- ...-GQRGKV2B.js.map => chunk-NVQIR4OB.js.map} | 0 .../{chunk-WXFAMC53.js => chunk-O5AKT4QV.js} | 6 +- ...-WXFAMC53.js.map => chunk-O5AKT4QV.js.map} | 0 .../{chunk-G3PMV62Z.js => chunk-PR4QN5HX.js} | 11 +- .../.vite/deps/chunk-PR4QN5HX.js.map | 7 + new/node_modules/.vite/deps/chunk-PY5FWCXD.js | 378 +++ .../.vite/deps/chunk-PY5FWCXD.js.map | 7 + .../.vite/deps/chunk-SEW4S7MK.js.map | 7 - .../{chunk-QIOWJZ2Q.js => chunk-SZ25KUZ7.js} | 34 +- ...-QIOWJZ2Q.js.map => chunk-SZ25KUZ7.js.map} | 0 .../{chunk-6NQVCTSK.js => chunk-UO6HTX3B.js} | 56 +- ...-6NQVCTSK.js.map => chunk-UO6HTX3B.js.map} | 6 +- .../{chunk-RVRDYNF2.js => chunk-UZ2PG3BG.js} | 10 +- ...-RVRDYNF2.js.map => chunk-UZ2PG3BG.js.map} | 0 .../{chunk-BMSBHPJV.js => chunk-VEBN3CBM.js} | 6 +- ...-BMSBHPJV.js.map => chunk-VEBN3CBM.js.map} | 0 .../{chunk-QZT7XSX6.js => chunk-WHHSIS4S.js} | 10 +- ...-QZT7XSX6.js.map => chunk-WHHSIS4S.js.map} | 0 .../{chunk-7B56EETE.js => chunk-WVPHDKFQ.js} | 32 +- ...-7B56EETE.js.map => chunk-WVPHDKFQ.js.map} | 0 .../{chunk-D53GIL3U.js => chunk-XBYOEGII.js} | 6 +- ...-D53GIL3U.js.map => chunk-XBYOEGII.js.map} | 0 new/node_modules/.vite/deps/chunk-Y4O4AWGD.js | 90 + .../.vite/deps/chunk-Y4O4AWGD.js.map | 7 + .../{chunk-DRWLMN53.js => chunk-YHPANKLD.js} | 4 +- ...-DRWLMN53.js.map => chunk-YHPANKLD.js.map} | 0 .../{chunk-YZ4NP6NA.js => chunk-YXM25UM4.js} | 18 +- ...-YZ4NP6NA.js.map => chunk-YXM25UM4.js.map} | 0 new/node_modules/.vite/deps/react-dom.js | 6 +- .../.vite/deps/react-dom_client.js | 6 +- .../.vite/deps/react-joystick-component.js | 4 +- .../.vite/deps/react-router-dom.js | 8 +- new/node_modules/.vite/deps/react-router.js | 6 +- new/node_modules/.vite/deps/react.js | 4 +- .../.vite/deps/react_jsx-dev-runtime.js | 4 +- .../.vite/deps/react_jsx-runtime.js | 4 +- .../bootstrap-slider/.github/CONTRIBUTING.md | 6 + .../.github/ISSUE_TEMPLATE.md | 9 + .../.github/PULL_REQUEST_TEMPLATE.md | 10 + new/node_modules/bootstrap-slider/.nvmrc | 1 + .../bootstrap-slider/.sass-lint.yml | 43 + new/node_modules/bootstrap-slider/.travis.yml | 6 + .../bootstrap-slider/CHANGELOG.md | 344 +++ .../bootstrap-slider/Gruntfile.js | 322 +++ new/node_modules/bootstrap-slider/LICENSE.md | 24 + new/node_modules/bootstrap-slider/README.md | 312 +++ new/node_modules/bootstrap-slider/bower.json | 25 + .../bootstrap-slider/composer.json | 30 + .../css/highlightjs-github-theme.css | 1 + .../dependencies/js/highlight.min.js | 3 + .../dependencies/js/jquery.min.js | 5 + .../dependencies/js/modernizr.js | 1406 +++++++++++ .../bootstrap-slider/dist/bootstrap-slider.js | 2061 ++++++++++++++++ .../dist/bootstrap-slider.min.js | 5 + .../dist/css/bootstrap-slider.css | 418 ++++ .../dist/css/bootstrap-slider.min.css | 43 + .../bootstrap-slider/package.json | 115 + .../bootstrap-slider/scripts/build-preview.sh | 16 + .../bootstrap-slider/scripts/release.sh | 53 + .../scripts/update-gh-pages.sh | 36 + .../src/js/bootstrap-slider.js | 2116 +++++++++++++++++ .../bootstrap-slider/src/sass/_mixins.scss | 25 + .../bootstrap-slider/src/sass/_rules.scss | 275 +++ .../bootstrap-slider/src/sass/_variables.scss | 28 + .../src/sass/bootstrap-slider.scss | 42 + .../test/phantom_bind_polyfill.js | 41 + .../test/specs/AccessibilitySpec.js | 67 + .../test/specs/AriaValueTextFormatterSpec.js | 114 + .../test/specs/AutoRegisterDataProvideSpec.js | 21 + .../test/specs/ConflictingOptionsSpec.js | 73 + .../test/specs/DestroyMethodTests.js | 416 ++++ .../test/specs/DraggingHandlesSpec.js | 293 +++ .../test/specs/ElementDataAttributesSpec.js | 211 ++ .../bootstrap-slider/test/specs/EventsSpec.js | 493 ++++ .../test/specs/FocusOptionSpec.js | 67 + .../test/specs/KeyboardSupportSpec.js | 768 ++++++ .../test/specs/LockToTicksSpec.js | 699 ++++++ .../test/specs/LogarithmicScaleSpec.js | 92 + .../test/specs/LowAndHighTrackSpec.js | 224 ++ .../test/specs/NamespaceSpec.js | 74 + .../test/specs/OrientationSpec.js | 75 + .../test/specs/PublicMethodsSpec.js | 660 +++++ .../test/specs/RangeHighlightsSpec.js | 224 ++ .../test/specs/RefreshMethodSpec.js | 122 + .../bootstrap-slider/test/specs/ResizeSpec.js | 70 + .../test/specs/RtlOptionsSpec.js | 81 + .../test/specs/ScrollableBodySpec.js | 150 ++ .../test/specs/ScrollableContainerSpec.js | 85 + .../test/specs/StepReachMaxValueSpec.js | 61 + .../test/specs/TickClickingBehaviorSpec.js | 108 + .../test/specs/TickLabelSpec.js | 253 ++ .../test/specs/TickMarksSpec.js | 247 ++ .../test/specs/TooltipMouseOverOptionSpec.js | 457 ++++ .../test/specs/TooltipPositionOptionSpec.js | 194 ++ .../test/specs/TooltipSplitOptionSpec.js | 71 + .../test/specs/TouchCapableSpec.js | 571 +++++ .../test/specs/offMethodSpec.js | 33 + .../bootstrap-slider/tpl/SpecRunner.tpl | 147 ++ .../bootstrap-slider/tpl/index.tpl | 1551 ++++++++++++ new/src/pages/recalibrate-steering.tsx | 39 +- 161 files changed, 20356 insertions(+), 1936 deletions(-) create mode 100644 new/node_modules/.vite/deps/@cloudscape-design_components_slider.js rename new/node_modules/.vite/deps/{chunk-G3PMV62Z.js.map => @cloudscape-design_components_slider.js.map} (100%) create mode 100644 new/node_modules/.vite/deps/bootstrap-slider.js create mode 100644 new/node_modules/.vite/deps/bootstrap-slider.js.map rename new/node_modules/.vite/deps/{chunk-WFC4E5H7.js => chunk-4XK7Q4FD.js} (86%) rename new/node_modules/.vite/deps/{chunk-WFC4E5H7.js.map => chunk-4XK7Q4FD.js.map} (100%) rename new/node_modules/.vite/deps/{chunk-GXZPW7QV.js => chunk-6J4MIBBZ.js} (99%) rename new/node_modules/.vite/deps/{chunk-GXZPW7QV.js.map => chunk-6J4MIBBZ.js.map} (100%) rename new/node_modules/.vite/deps/{chunk-3WZWB2IQ.js => chunk-75OE6Y4K.js} (96%) rename new/node_modules/.vite/deps/{chunk-3WZWB2IQ.js.map => chunk-75OE6Y4K.js.map} (100%) rename new/node_modules/.vite/deps/{chunk-65ELT63B.js => chunk-7CSPPX7P.js} (98%) rename new/node_modules/.vite/deps/{chunk-65ELT63B.js.map => chunk-7CSPPX7P.js.map} (100%) rename new/node_modules/.vite/deps/{chunk-CDYXOKP3.js => chunk-7FDAOWXY.js} (91%) rename new/node_modules/.vite/deps/{chunk-CDYXOKP3.js.map => chunk-7FDAOWXY.js.map} (100%) rename new/node_modules/.vite/deps/{chunk-IU5VMN4E.js => chunk-AFMUY7D5.js} (97%) rename new/node_modules/.vite/deps/{chunk-IU5VMN4E.js.map => chunk-AFMUY7D5.js.map} (100%) rename new/node_modules/.vite/deps/{chunk-UVXVMYWK.js => chunk-AROLV7NB.js} (96%) rename new/node_modules/.vite/deps/{chunk-UVXVMYWK.js.map => chunk-AROLV7NB.js.map} (100%) rename new/node_modules/.vite/deps/{chunk-LQLS3LLF.js => chunk-C3FHTRF6.js} (98%) rename new/node_modules/.vite/deps/{chunk-LQLS3LLF.js.map => chunk-C3FHTRF6.js.map} (100%) rename new/node_modules/.vite/deps/{chunk-FSHUBGVQ.js => chunk-C46SC6FN.js} (99%) rename new/node_modules/.vite/deps/{chunk-FSHUBGVQ.js.map => chunk-C46SC6FN.js.map} (100%) rename new/node_modules/.vite/deps/{chunk-USK37E6T.js => chunk-CIRQIDXF.js} (85%) rename new/node_modules/.vite/deps/{chunk-USK37E6T.js.map => chunk-CIRQIDXF.js.map} (100%) rename new/node_modules/.vite/deps/{chunk-PSZT54K7.js => chunk-CQ36ZYSY.js} (85%) rename new/node_modules/.vite/deps/{chunk-PSZT54K7.js.map => chunk-CQ36ZYSY.js.map} (100%) rename new/node_modules/.vite/deps/{chunk-7ESJ2XKA.js => chunk-DQ3SLYQ2.js} (89%) rename new/node_modules/.vite/deps/{chunk-7ESJ2XKA.js.map => chunk-DQ3SLYQ2.js.map} (100%) rename new/node_modules/.vite/deps/{chunk-SEW4S7MK.js => chunk-EHBY6SWO.js} (90%) create mode 100644 new/node_modules/.vite/deps/chunk-EHBY6SWO.js.map rename new/node_modules/.vite/deps/{chunk-PJEEZAML.js => chunk-EJTTOCY5.js} (99%) rename new/node_modules/.vite/deps/{chunk-PJEEZAML.js.map => chunk-EJTTOCY5.js.map} (100%) rename new/node_modules/.vite/deps/{chunk-UPFRQ56G.js => chunk-F6G4VLJC.js} (94%) rename new/node_modules/.vite/deps/{chunk-UPFRQ56G.js.map => chunk-F6G4VLJC.js.map} (100%) rename new/node_modules/.vite/deps/{chunk-IGVBCKNN.js => chunk-HHBZMJIC.js} (97%) rename new/node_modules/.vite/deps/{chunk-IGVBCKNN.js.map => chunk-HHBZMJIC.js.map} (100%) rename new/node_modules/.vite/deps/{chunk-X4DPBRGF.js => chunk-IDWIQRNZ.js} (89%) rename new/node_modules/.vite/deps/{chunk-X4DPBRGF.js.map => chunk-IDWIQRNZ.js.map} (100%) rename new/node_modules/.vite/deps/{chunk-MUSP2E23.js => chunk-KHLC7UTB.js} (91%) rename new/node_modules/.vite/deps/{chunk-MUSP2E23.js.map => chunk-KHLC7UTB.js.map} (100%) rename new/node_modules/.vite/deps/{chunk-45LYNKSL.js => chunk-MPEXPGRD.js} (98%) rename new/node_modules/.vite/deps/{chunk-45LYNKSL.js.map => chunk-MPEXPGRD.js.map} (100%) rename new/node_modules/.vite/deps/{chunk-PHPTHGGV.js => chunk-N3HGE3RW.js} (98%) rename new/node_modules/.vite/deps/{chunk-PHPTHGGV.js.map => chunk-N3HGE3RW.js.map} (100%) rename new/node_modules/.vite/deps/{chunk-GQRGKV2B.js => chunk-NVQIR4OB.js} (85%) rename new/node_modules/.vite/deps/{chunk-GQRGKV2B.js.map => chunk-NVQIR4OB.js.map} (100%) rename new/node_modules/.vite/deps/{chunk-WXFAMC53.js => chunk-O5AKT4QV.js} (78%) rename new/node_modules/.vite/deps/{chunk-WXFAMC53.js.map => chunk-O5AKT4QV.js.map} (100%) rename new/node_modules/.vite/deps/{chunk-G3PMV62Z.js => chunk-PR4QN5HX.js} (75%) create mode 100644 new/node_modules/.vite/deps/chunk-PR4QN5HX.js.map create mode 100644 new/node_modules/.vite/deps/chunk-PY5FWCXD.js create mode 100644 new/node_modules/.vite/deps/chunk-PY5FWCXD.js.map delete mode 100644 new/node_modules/.vite/deps/chunk-SEW4S7MK.js.map rename new/node_modules/.vite/deps/{chunk-QIOWJZ2Q.js => chunk-SZ25KUZ7.js} (97%) rename new/node_modules/.vite/deps/{chunk-QIOWJZ2Q.js.map => chunk-SZ25KUZ7.js.map} (100%) rename new/node_modules/.vite/deps/{chunk-6NQVCTSK.js => chunk-UO6HTX3B.js} (99%) rename new/node_modules/.vite/deps/{chunk-6NQVCTSK.js.map => chunk-UO6HTX3B.js.map} (94%) rename new/node_modules/.vite/deps/{chunk-RVRDYNF2.js => chunk-UZ2PG3BG.js} (83%) rename new/node_modules/.vite/deps/{chunk-RVRDYNF2.js.map => chunk-UZ2PG3BG.js.map} (100%) rename new/node_modules/.vite/deps/{chunk-BMSBHPJV.js => chunk-VEBN3CBM.js} (73%) rename new/node_modules/.vite/deps/{chunk-BMSBHPJV.js.map => chunk-VEBN3CBM.js.map} (100%) rename new/node_modules/.vite/deps/{chunk-QZT7XSX6.js => chunk-WHHSIS4S.js} (98%) rename new/node_modules/.vite/deps/{chunk-QZT7XSX6.js.map => chunk-WHHSIS4S.js.map} (100%) rename new/node_modules/.vite/deps/{chunk-7B56EETE.js => chunk-WVPHDKFQ.js} (99%) rename new/node_modules/.vite/deps/{chunk-7B56EETE.js.map => chunk-WVPHDKFQ.js.map} (100%) rename new/node_modules/.vite/deps/{chunk-D53GIL3U.js => chunk-XBYOEGII.js} (98%) rename new/node_modules/.vite/deps/{chunk-D53GIL3U.js.map => chunk-XBYOEGII.js.map} (100%) create mode 100644 new/node_modules/.vite/deps/chunk-Y4O4AWGD.js create mode 100644 new/node_modules/.vite/deps/chunk-Y4O4AWGD.js.map rename new/node_modules/.vite/deps/{chunk-DRWLMN53.js => chunk-YHPANKLD.js} (99%) rename new/node_modules/.vite/deps/{chunk-DRWLMN53.js.map => chunk-YHPANKLD.js.map} (100%) rename new/node_modules/.vite/deps/{chunk-YZ4NP6NA.js => chunk-YXM25UM4.js} (98%) rename new/node_modules/.vite/deps/{chunk-YZ4NP6NA.js.map => chunk-YXM25UM4.js.map} (100%) create mode 100644 new/node_modules/bootstrap-slider/.github/CONTRIBUTING.md create mode 100644 new/node_modules/bootstrap-slider/.github/ISSUE_TEMPLATE.md create mode 100644 new/node_modules/bootstrap-slider/.github/PULL_REQUEST_TEMPLATE.md create mode 100644 new/node_modules/bootstrap-slider/.nvmrc create mode 100644 new/node_modules/bootstrap-slider/.sass-lint.yml create mode 100644 new/node_modules/bootstrap-slider/.travis.yml create mode 100644 new/node_modules/bootstrap-slider/CHANGELOG.md create mode 100644 new/node_modules/bootstrap-slider/Gruntfile.js create mode 100644 new/node_modules/bootstrap-slider/LICENSE.md create mode 100644 new/node_modules/bootstrap-slider/README.md create mode 100644 new/node_modules/bootstrap-slider/bower.json create mode 100644 new/node_modules/bootstrap-slider/composer.json create mode 100644 new/node_modules/bootstrap-slider/dependencies/css/highlightjs-github-theme.css create mode 100644 new/node_modules/bootstrap-slider/dependencies/js/highlight.min.js create mode 100644 new/node_modules/bootstrap-slider/dependencies/js/jquery.min.js create mode 100644 new/node_modules/bootstrap-slider/dependencies/js/modernizr.js create mode 100644 new/node_modules/bootstrap-slider/dist/bootstrap-slider.js create mode 100644 new/node_modules/bootstrap-slider/dist/bootstrap-slider.min.js create mode 100644 new/node_modules/bootstrap-slider/dist/css/bootstrap-slider.css create mode 100644 new/node_modules/bootstrap-slider/dist/css/bootstrap-slider.min.css create mode 100644 new/node_modules/bootstrap-slider/package.json create mode 100755 new/node_modules/bootstrap-slider/scripts/build-preview.sh create mode 100755 new/node_modules/bootstrap-slider/scripts/release.sh create mode 100755 new/node_modules/bootstrap-slider/scripts/update-gh-pages.sh create mode 100644 new/node_modules/bootstrap-slider/src/js/bootstrap-slider.js create mode 100644 new/node_modules/bootstrap-slider/src/sass/_mixins.scss create mode 100644 new/node_modules/bootstrap-slider/src/sass/_rules.scss create mode 100644 new/node_modules/bootstrap-slider/src/sass/_variables.scss create mode 100644 new/node_modules/bootstrap-slider/src/sass/bootstrap-slider.scss create mode 100644 new/node_modules/bootstrap-slider/test/phantom_bind_polyfill.js create mode 100644 new/node_modules/bootstrap-slider/test/specs/AccessibilitySpec.js create mode 100644 new/node_modules/bootstrap-slider/test/specs/AriaValueTextFormatterSpec.js create mode 100644 new/node_modules/bootstrap-slider/test/specs/AutoRegisterDataProvideSpec.js create mode 100644 new/node_modules/bootstrap-slider/test/specs/ConflictingOptionsSpec.js create mode 100644 new/node_modules/bootstrap-slider/test/specs/DestroyMethodTests.js create mode 100644 new/node_modules/bootstrap-slider/test/specs/DraggingHandlesSpec.js create mode 100644 new/node_modules/bootstrap-slider/test/specs/ElementDataAttributesSpec.js create mode 100644 new/node_modules/bootstrap-slider/test/specs/EventsSpec.js create mode 100644 new/node_modules/bootstrap-slider/test/specs/FocusOptionSpec.js create mode 100644 new/node_modules/bootstrap-slider/test/specs/KeyboardSupportSpec.js create mode 100644 new/node_modules/bootstrap-slider/test/specs/LockToTicksSpec.js create mode 100644 new/node_modules/bootstrap-slider/test/specs/LogarithmicScaleSpec.js create mode 100644 new/node_modules/bootstrap-slider/test/specs/LowAndHighTrackSpec.js create mode 100644 new/node_modules/bootstrap-slider/test/specs/NamespaceSpec.js create mode 100644 new/node_modules/bootstrap-slider/test/specs/OrientationSpec.js create mode 100644 new/node_modules/bootstrap-slider/test/specs/PublicMethodsSpec.js create mode 100644 new/node_modules/bootstrap-slider/test/specs/RangeHighlightsSpec.js create mode 100644 new/node_modules/bootstrap-slider/test/specs/RefreshMethodSpec.js create mode 100644 new/node_modules/bootstrap-slider/test/specs/ResizeSpec.js create mode 100644 new/node_modules/bootstrap-slider/test/specs/RtlOptionsSpec.js create mode 100644 new/node_modules/bootstrap-slider/test/specs/ScrollableBodySpec.js create mode 100644 new/node_modules/bootstrap-slider/test/specs/ScrollableContainerSpec.js create mode 100644 new/node_modules/bootstrap-slider/test/specs/StepReachMaxValueSpec.js create mode 100644 new/node_modules/bootstrap-slider/test/specs/TickClickingBehaviorSpec.js create mode 100644 new/node_modules/bootstrap-slider/test/specs/TickLabelSpec.js create mode 100644 new/node_modules/bootstrap-slider/test/specs/TickMarksSpec.js create mode 100644 new/node_modules/bootstrap-slider/test/specs/TooltipMouseOverOptionSpec.js create mode 100644 new/node_modules/bootstrap-slider/test/specs/TooltipPositionOptionSpec.js create mode 100644 new/node_modules/bootstrap-slider/test/specs/TooltipSplitOptionSpec.js create mode 100644 new/node_modules/bootstrap-slider/test/specs/TouchCapableSpec.js create mode 100644 new/node_modules/bootstrap-slider/test/specs/offMethodSpec.js create mode 100644 new/node_modules/bootstrap-slider/tpl/SpecRunner.tpl create mode 100644 new/node_modules/bootstrap-slider/tpl/index.tpl diff --git a/new/node_modules/.package-lock.json b/new/node_modules/.package-lock.json index 07bc9042..f8536166 100644 --- a/new/node_modules/.package-lock.json +++ b/new/node_modules/.package-lock.json @@ -1273,6 +1273,11 @@ "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz", "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==" }, + "node_modules/bootstrap-slider": { + "version": "11.0.2", + "resolved": "https://registry.npmjs.org/bootstrap-slider/-/bootstrap-slider-11.0.2.tgz", + "integrity": "sha512-CdwS+Z6X79OkLes9RfDgPB9UIY/+81wTkm6ktdSB6hdyiRbjJLFQIjZdnEr55tDyXZfgC7U6yeSXkNN9ZdGqjA==" + }, "node_modules/brace-expansion": { "version": "2.0.1", "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.1.tgz", diff --git a/new/node_modules/.vite/deps/@cloudscape-design_components.js b/new/node_modules/.vite/deps/@cloudscape-design_components.js index bd69d8b9..049b191b 100644 --- a/new/node_modules/.vite/deps/@cloudscape-design_components.js +++ b/new/node_modules/.vite/deps/@cloudscape-design_components.js @@ -1,33 +1,37 @@ import { - ColumnLayout, - KeyValuePairs, - internal_default as internal_default7 -} from "./chunk-QIOWJZ2Q.js"; + Box +} from "./chunk-UZ2PG3BG.js"; import { - AnchorNavigation -} from "./chunk-IGVBCKNN.js"; + button_default +} from "./chunk-KHLC7UTB.js"; import { AnalyticsFunnel, AnalyticsFunnelStep, AnalyticsFunnelSubStep, Container -} from "./chunk-YZ4NP6NA.js"; +} from "./chunk-YXM25UM4.js"; import { CollectionLabelContext, Description, Header, InternalHeader, styles_css_default as styles_css_default3 -} from "./chunk-3WZWB2IQ.js"; +} from "./chunk-75OE6Y4K.js"; +import { + ColumnLayout, + KeyValuePairs, + internal_default as internal_default7 +} from "./chunk-SZ25KUZ7.js"; +import { + InternalBox +} from "./chunk-MPEXPGRD.js"; import { - FormFieldContext, StatusIndicator, button_trigger_default, checkControlled, checkOptionValueField, checkbox_icon_default, convertAutoComplete, - custom_css_properties_default, dropdown_default, dropdown_footer_default, filter_default, @@ -52,7 +56,6 @@ import { useAnnouncement, useDropdownContext, useDropdownStatus, - useFormFieldContext, useHighlightedOption, useLoadItems, useNativeSearch, @@ -62,30 +65,30 @@ import { useSelect, useVirtual, virtual_list_default -} from "./chunk-SEW4S7MK.js"; +} from "./chunk-EHBY6SWO.js"; import { getExternalProps, useDebounceCallback -} from "./chunk-7ESJ2XKA.js"; +} from "./chunk-DQ3SLYQ2.js"; import { InfoLinkLabelContext -} from "./chunk-BMSBHPJV.js"; +} from "./chunk-VEBN3CBM.js"; import { SpaceBetween, internal_default as internal_default5 -} from "./chunk-UPFRQ56G.js"; -import "./chunk-D53GIL3U.js"; +} from "./chunk-F6G4VLJC.js"; +import "./chunk-XBYOEGII.js"; import { Tabs, circleIndex, handleKey, isEventLike, useControllable -} from "./chunk-65ELT63B.js"; +} from "./chunk-7CSPPX7P.js"; import { InternalContainer, InternalContainerAsSubstep -} from "./chunk-UVXVMYWK.js"; +} from "./chunk-AROLV7NB.js"; import { StickyHeaderContext, borderPanelTopWidth, @@ -146,10 +149,18 @@ import { spaceXs, spaceXxs, spaceXxxs -} from "./chunk-LQLS3LLF.js"; +} from "./chunk-C3FHTRF6.js"; +import { + Slider +} from "./chunk-PY5FWCXD.js"; +import { + FormFieldContext, + custom_css_properties_default, + useFormFieldContext +} from "./chunk-Y4O4AWGD.js"; import { useMobile -} from "./chunk-CDYXOKP3.js"; +} from "./chunk-7FDAOWXY.js"; import { ActionsWrapper, alert_default, @@ -159,34 +170,22 @@ import { internal_default as internal_default4, metrics, sortByPriority -} from "./chunk-7B56EETE.js"; +} from "./chunk-WVPHDKFQ.js"; import { useContainerBreakpoints -} from "./chunk-WFC4E5H7.js"; +} from "./chunk-4XK7Q4FD.js"; import { VisualContext, getVisualContextClassname -} from "./chunk-X4DPBRGF.js"; +} from "./chunk-IDWIQRNZ.js"; +import "./chunk-QBOFGJFI.js"; import { LinkDefaultVariantContext, defaultValue as defaultValue2 -} from "./chunk-WXFAMC53.js"; -import "./chunk-QBOFGJFI.js"; +} from "./chunk-O5AKT4QV.js"; import { useContainerQuery -} from "./chunk-GQRGKV2B.js"; -import { - matchBreakpointMapping -} from "./chunk-JO267CDI.js"; -import { - Box -} from "./chunk-RVRDYNF2.js"; -import { - InternalBox -} from "./chunk-45LYNKSL.js"; -import { - button_default -} from "./chunk-MUSP2E23.js"; +} from "./chunk-NVQIR4OB.js"; import { ButtonContext, CSSTransition_default, @@ -223,18 +222,7 @@ import { useLocale, usePerformanceMarks, useSingleTabStopNavigation -} from "./chunk-FSHUBGVQ.js"; -import { - isDevelopment as isDevelopment2 -} from "./chunk-TIE5RIC4.js"; -import { - checkSafeUrl, - fireCancelableEvent, - fireKeyboardEvent, - fireNonCancelableEvent, - hasModifierKeys, - isPlainLeftClick -} from "./chunk-IU5VMN4E.js"; +} from "./chunk-C46SC6FN.js"; import { ComponentMetrics, FunnelMetrics, @@ -249,7 +237,7 @@ import { useFunnelNameSelector, useFunnelStep, useFunnelSubStep -} from "./chunk-QZT7XSX6.js"; +} from "./chunk-WHHSIS4S.js"; import { DATA_ATTR_ANALYTICS_FLASHBAR, DATA_ATTR_FIELD_ERROR, @@ -267,14 +255,31 @@ import { getSubStepAllSelector, getTextFromSelector, scrollElementIntoView -} from "./chunk-PHPTHGGV.js"; +} from "./chunk-N3HGE3RW.js"; +import { + isDevelopment as isDevelopment2 +} from "./chunk-TIE5RIC4.js"; +import { + matchBreakpointMapping +} from "./chunk-JO267CDI.js"; import { useRandomId, useUniqueId -} from "./chunk-USK37E6T.js"; +} from "./chunk-CIRQIDXF.js"; import { useMergeRefs -} from "./chunk-PSZT54K7.js"; +} from "./chunk-CQ36ZYSY.js"; +import { + AnchorNavigation +} from "./chunk-HHBZMJIC.js"; +import { + checkSafeUrl, + fireCancelableEvent, + fireKeyboardEvent, + fireNonCancelableEvent, + hasModifierKeys, + isPlainLeftClick +} from "./chunk-AFMUY7D5.js"; import { PACKAGE_VERSION, ResizeObserver, @@ -306,16 +311,16 @@ import { useTelemetry, useVisualRefresh, warnOnce -} from "./chunk-6NQVCTSK.js"; +} from "./chunk-UO6HTX3B.js"; import { require_react_dom -} from "./chunk-PJEEZAML.js"; +} from "./chunk-EJTTOCY5.js"; import { require_react -} from "./chunk-DRWLMN53.js"; +} from "./chunk-YHPANKLD.js"; import { __toESM -} from "./chunk-G3PMV62Z.js"; +} from "./chunk-PR4QN5HX.js"; // node_modules/@cloudscape-design/components/annotation-context/index.js var import_react7 = __toESM(require_react()); @@ -39177,371 +39182,29 @@ function SideNavigation(_a) { } applyDisplayName(SideNavigation, "SideNavigation"); -// node_modules/@cloudscape-design/components/slider/index.js -var import_react348 = __toESM(require_react()); - -// node_modules/@cloudscape-design/components/slider/internal.js -var import_react347 = __toESM(require_react()); - -// node_modules/@cloudscape-design/components/slider/slider-labels.js -var import_react345 = __toESM(require_react()); - -// node_modules/@cloudscape-design/components/slider/styles.css.js -import "/home/a171157/personal-repos/deep-racer/community-contributions/deepracer-custom-console/new/node_modules/@cloudscape-design/components/slider/styles.scoped.css"; -var styles_css_default128 = { - "root": "awsui_root_pcgz5_3bv9o_153", - "slider": "awsui_slider_pcgz5_3bv9o_190", - "slider-track": "awsui_slider-track_pcgz5_3bv9o_194", - "slider-range": "awsui_slider-range_pcgz5_3bv9o_194", - "disabled": "awsui_disabled_pcgz5_3bv9o_209", - "readonly": "awsui_readonly_pcgz5_3bv9o_213", - "error": "awsui_error_pcgz5_3bv9o_222", - "warning": "awsui_warning_pcgz5_3bv9o_225", - "active": "awsui_active_pcgz5_3bv9o_228", - "error-active": "awsui_error-active_pcgz5_3bv9o_231", - "warning-active": "awsui_warning-active_pcgz5_3bv9o_234", - "labels": "awsui_labels_pcgz5_3bv9o_245", - "labels-noref": "awsui_labels-noref_pcgz5_3bv9o_251", - "labels-reference": "awsui_labels-reference_pcgz5_3bv9o_254", - "labels-min": "awsui_labels-min_pcgz5_3bv9o_261", - "labels-max": "awsui_labels-max_pcgz5_3bv9o_267", - "labels-aria-description": "awsui_labels-aria-description_pcgz5_3bv9o_275", - "ticks": "awsui_ticks_pcgz5_3bv9o_293", - "ticks-wrapper": "awsui_ticks-wrapper_pcgz5_3bv9o_299", - "tick": "awsui_tick_pcgz5_3bv9o_293", - "middle": "awsui_middle_pcgz5_3bv9o_314", - "filled": "awsui_filled_pcgz5_3bv9o_317", - "tooltip-thumb": "awsui_tooltip-thumb_pcgz5_3bv9o_345", - "thumb": "awsui_thumb_pcgz5_3bv9o_358", - "min": "awsui_min_pcgz5_3bv9o_394", - "max": "awsui_max_pcgz5_3bv9o_397" -}; - -// node_modules/@cloudscape-design/components/slider/slider-labels.js -function SliderLabels({ min: min3, max: max3, referenceValues, valueFormatter, labelsId, ariaDescription }) { - const isMobile = useMobile(); - const MAX_LABEL_COUNT = isMobile ? 4 : 10; - const minDistance = (max3 - min3) / MAX_LABEL_COUNT; - const getVisibleReferenceValues = () => { - if (!referenceValues || referenceValues.length === 0) { - return []; - } - const values = []; - let lastValue = min3; - for (let i2 = 0; i2 <= referenceValues.length; i2++) { - if (referenceValues[i2] > min3 && referenceValues[i2] < max3 && Math.abs(referenceValues[i2] - lastValue) >= minDistance && Math.abs(max3 - referenceValues[i2]) >= minDistance && Number.isInteger(referenceValues[i2])) { - values.push(referenceValues[i2]); - lastValue = referenceValues[i2]; - } - } - return values; - }; - function getLabelPosition(index) { - const colSpan = Math.floor(minDistance / 2); - const positionStart = index - colSpan; - const positionEnd = index + colSpan; - const hasSmallRange = max3 - min3 <= MAX_LABEL_COUNT; - if (hasSmallRange) { - return { - min: 1, - max: (max3 - min3) * 2 - 1, - posStart: (index - min3) * 2, - posEnd: (index - min3) * 2 - }; - } - const roundedHalfCol = Math.round(colSpan / 2); - return { - min: colSpan * 2 + roundedHalfCol, - max: (max3 - min3 - colSpan) * 2 - roundedHalfCol + 1, - // add one to center the label - posStart: (positionStart - min3) * 2 + 1 + roundedHalfCol, - posEnd: (positionEnd - min3) * 2 - roundedHalfCol - }; - } - return import_react345.default.createElement( - import_react345.default.Fragment, - null, - import_react345.default.createElement( - "div", - { role: "list", "aria-hidden": !valueFormatter && !referenceValues ? "true" : void 0, className: clsx_m_default(styles_css_default128.labels, { - [styles_css_default128["labels-noref"]]: getVisibleReferenceValues().length === 0 - }), style: { - [custom_css_properties_default.sliderLabelCount]: getVisibleReferenceValues().length === 0 ? 2 : (max3 - min3) * 2 - }, id: !ariaDescription ? labelsId : void 0 }, - import_react345.default.createElement("span", { role: "listitem", className: clsx_m_default(styles_css_default128.label, styles_css_default128["labels-min"]), style: { - [custom_css_properties_default.sliderMinEnd]: getLabelPosition(0).min - } }, valueFormatter ? valueFormatter(min3) : min3), - getVisibleReferenceValues().map((step) => { - return import_react345.default.createElement("span", { role: "listitem", key: step, style: { - [custom_css_properties_default.sliderReferenceColumn]: getLabelPosition(step).posStart, - [custom_css_properties_default.sliderNextReferenceColumn]: getLabelPosition(step).posEnd - }, className: clsx_m_default(styles_css_default128.label, styles_css_default128["labels-reference"]) }, valueFormatter ? valueFormatter(step) : step); - }), - import_react345.default.createElement("span", { role: "listitem", className: clsx_m_default(styles_css_default128.label, styles_css_default128["labels-max"]), style: { - [custom_css_properties_default.sliderMaxStart]: !referenceValues ? 2 : getLabelPosition(0).max - } }, valueFormatter ? valueFormatter(max3) : max3) - ), - ariaDescription && import_react345.default.createElement("div", { className: styles_css_default128["labels-aria-description"], id: labelsId }, ariaDescription) - ); -} - -// node_modules/@cloudscape-design/components/slider/tick-marks.js -var import_react346 = __toESM(require_react()); - -// node_modules/@cloudscape-design/components/slider/utils.js -function getPercent(value, range3) { - return (value - range3[0]) / (range3[1] - range3[0]) * 100; -} -function countDecimals(value) { - var _a; - if (Math.floor(value) === value) { - return 0; - } - const str = Math.abs(value).toString(); - if (str.indexOf("-") !== -1) { - return parseInt(str.split("-")[1], 10) || 0; - } - return ((_a = str.split(".")[1]) === null || _a === void 0 ? void 0 : _a.length) || 0; -} -var getStepArray = (step, [min3, max3]) => { - const steps = [min3]; - const multiplier = Math.pow(10, countDecimals(step)); - let currentStep = min3; - while (currentStep < max3) { - currentStep = (multiplier * currentStep + multiplier * step) / multiplier; - if (currentStep <= max3) { - steps.push(currentStep); - } - } - return steps; -}; -var findLowerAndHigherValues = (array, value) => { - let sortedArray = [...array]; - sortedArray = sortedArray.sort((a4, b2) => a4 - b2); - const index = sortedArray.indexOf(value) || 0; - const lower = sortedArray[index - 1] || void 0; - const higher = sortedArray[index + 1] || void 0; - return { lower, higher }; -}; -var valuesAreValid = (referenceValues) => { - const valuesWithDecimals = referenceValues === null || referenceValues === void 0 ? void 0 : referenceValues.filter((value) => !Number.isInteger(value)); - return valuesWithDecimals.length === 0; -}; -var THUMB_SIZE = 16; -var THUMB_READONLY_SIZE = 12; - -// node_modules/@cloudscape-design/components/slider/tick-marks.js -function TickMark(props) { - const { hideFillLine, value, isActive, invalid, warning, disabled, type, min: min3, max: max3, step, readOnly } = props; - const showWarning = warning && !invalid; - const getType = () => { - if (type === "min") { - return min3; - } - if (type === "max") { - return max3; - } - return step; - }; - return import_react346.default.createElement("div", { className: clsx_m_default(styles_css_default128.tick, { - [styles_css_default128.filled]: !hideFillLine && value > getType(), - [styles_css_default128.active]: !hideFillLine && isActive && value > getType(), - [styles_css_default128.error]: invalid && !hideFillLine && value > getType(), - [styles_css_default128.warning]: showWarning && !hideFillLine && value > getType(), - [styles_css_default128["error-active"]]: invalid && isActive && !hideFillLine && value > getType(), - [styles_css_default128["warning-active"]]: showWarning && isActive && !hideFillLine && value > getType(), - [styles_css_default128.disabled]: disabled, - [styles_css_default128.readonly]: readOnly, - [styles_css_default128.middle]: type === "step" - }) }); -} -function SliderTickMarks(props) { - const { min: min3, max: max3, step } = props; - return import_react346.default.createElement( - "div", - { className: styles_css_default128["ticks-wrapper"] }, - import_react346.default.createElement(TickMark, Object.assign({}, props, { type: "min" })), - import_react346.default.createElement("div", { className: styles_css_default128.ticks, style: { - [custom_css_properties_default.sliderTickCount]: Math.round((max3 - min3) / step) - } }, getStepArray(step, [min3, max3]).map((step2, index) => import_react346.default.createElement(TickMark, Object.assign({}, props, { type: "step", step: step2, key: `step-${index}` })))), - import_react346.default.createElement(TickMark, Object.assign({}, props, { type: "max" })) - ); -} - -// node_modules/@cloudscape-design/components/slider/internal.js -function InternalSlider(_a) { - var { value, min: min3, max: max3, onChange, step, disabled, readOnly, ariaLabel, ariaDescription, referenceValues, tickMarks, hideFillLine, valueFormatter, i18nStrings, __internalRootRef = null } = _a, rest = __rest(_a, ["value", "min", "max", "onChange", "step", "disabled", "readOnly", "ariaLabel", "ariaDescription", "referenceValues", "tickMarks", "hideFillLine", "valueFormatter", "i18nStrings", "__internalRootRef"]); - const baseProps = getBaseProps(rest); - const i18n = useInternalI18n("slider"); - const handleRef = (0, import_react347.useRef)(null); - const [showTooltip, setShowTooltip] = (0, import_react347.useState)(false); - const [isActive, setIsActive] = (0, import_react347.useState)(false); - const labelsId = useUniqueId("labels"); - const { ariaLabelledby, ariaDescribedby, controlId, invalid, warning } = useFormFieldContext(rest); - const showWarning = warning && !invalid; - if (referenceValues && valuesAreValid(referenceValues) === false) { - warnOnce("Slider", "All reference values must be integers. Non-integer values will not be displayed."); - } - if (min3 >= max3) { - warnOnce("Slider", "The min value cannot be greater than the max value."); - } - if (step && step > max3 - min3) { - warnOnce("Slider", "The step value cannot be greater than the difference between the min and max."); - } - if (step && value !== void 0 && (value - min3) % step !== 0) { - warnOnce("Slider", "Slider value must be a multiple of the step. The value will round to the nearest step value."); - } - const getValue = () => { - const stepIsValid = step && step < max3 - min3 && step > min3; - if (value === void 0) { - return max3 < min3 ? min3 : min3 + (max3 - min3) / 2; - } - if (!step) { - return value; - } - if (step && stepIsValid && (value - min3) % step !== 0) { - const closest = getStepArray(step, [min3, max3]).reduce(function(prev, curr) { - return Math.abs(curr - value) < Math.abs(prev - value) ? curr : prev; - }); - return closest; - } - return value; - }; - const sliderValue = getValue(); - const percent = getPercent(Math.max(Math.min(sliderValue, max3), min3), [min3, max3]); - const getAriaValueText = () => { - if (valueFormatter && valueFormatter(sliderValue)) { - return valueFormatter(sliderValue); - } - if (valueFormatter && !valueFormatter(sliderValue)) { - const middleValues = referenceValues ? referenceValues : []; - const valueArray = [min3, ...middleValues, sliderValue, max3]; - const prevAndNext = findLowerAndHigherValues(valueArray, sliderValue); - const previousValue = prevAndNext.lower ? valueFormatter(prevAndNext.lower) : valueFormatter(min3); - const nextValue = prevAndNext.higher ? valueFormatter(prevAndNext.higher) : valueFormatter(max3); - const value2 = sliderValue; - return i18n("i18nStrings.valueTextRange", i18nStrings === null || i18nStrings === void 0 ? void 0 : i18nStrings.valueTextRange(previousValue, value2, nextValue), (format3) => format3({ value: value2, previousValue, nextValue })); - } - return void 0; - }; - const thumbSize = readOnly ? THUMB_READONLY_SIZE : THUMB_SIZE; - return import_react347.default.createElement( - "div", - Object.assign({}, baseProps, { ref: __internalRootRef, className: clsx_m_default(baseProps.className, styles_css_default128.root) }), - showTooltip && import_react347.default.createElement(Tooltip, { value: valueFormatter ? valueFormatter(sliderValue) : sliderValue, trackRef: handleRef }), - import_react347.default.createElement("div", { ref: handleRef, className: clsx_m_default(styles_css_default128["tooltip-thumb"], { - [styles_css_default128.readonly]: readOnly - }), style: { - [custom_css_properties_default.sliderTooltipPosition]: `calc(${percent}% - ${thumbSize}px)` - } }), - import_react347.default.createElement( - "div", - { className: styles_css_default128.slider }, - import_react347.default.createElement("div", { className: clsx_m_default(styles_css_default128["slider-track"], { - [styles_css_default128.disabled]: disabled, - [styles_css_default128.readonly]: readOnly - }) }), - !hideFillLine && import_react347.default.createElement("div", { className: clsx_m_default(styles_css_default128["slider-range"], { - [styles_css_default128.error]: invalid, - [styles_css_default128.warning]: showWarning, - [styles_css_default128.active]: isActive, - [styles_css_default128["error-active"]]: invalid && isActive, - [styles_css_default128["warning-active"]]: showWarning && isActive, - [styles_css_default128.disabled]: disabled, - [styles_css_default128.readonly]: readOnly - }), style: { [custom_css_properties_default.sliderRangeInlineSize]: `${percent}%` } }) - ), - !!step && tickMarks && import_react347.default.createElement(SliderTickMarks, { hideFillLine, disabled, readOnly, invalid, warning, isActive, step, min: min3, max: max3, value: sliderValue }), - import_react347.default.createElement("input", { - // we need to add this because input[type=range] isn't natively focusable in Safari. - tabIndex: 0, - "aria-label": ariaLabel, - "aria-labelledby": ariaLabel && !rest.ariaLabelledby ? void 0 : ariaLabelledby, - "aria-describedby": valueFormatter ? ariaDescribedby ? `${labelsId} ${ariaDescribedby}` : labelsId : ariaDescribedby, - "aria-valuetext": getAriaValueText(), - "aria-invalid": invalid ? "true" : void 0, - "aria-disabled": readOnly && !disabled ? "true" : void 0, - id: controlId, - type: "range", - min: min3, - max: max3, - disabled, - onFocus: () => { - setShowTooltip(true); - setIsActive(true); - }, - onBlur: () => { - setShowTooltip(false); - setIsActive(false); - }, - onMouseEnter: () => { - setShowTooltip(true); - }, - onMouseLeave: () => { - setShowTooltip(false); - }, - onTouchStart: () => { - setShowTooltip(true); - setIsActive(true); - }, - onTouchEnd: () => { - setShowTooltip(false); - setIsActive(false); - }, - step, - value: sliderValue, - onChange: (event) => { - if (readOnly) { - return; - } - onChange && fireNonCancelableEvent(onChange, { value: Number(event.target.value) }); - }, - className: clsx_m_default(styles_css_default128.thumb, { - [styles_css_default128.error]: invalid, - [styles_css_default128.warning]: showWarning, - [styles_css_default128.disabled]: disabled, - [styles_css_default128.readonly]: readOnly, - [styles_css_default128.min]: sliderValue <= min3 || max3 < min3, - [styles_css_default128.max]: sliderValue >= max3 && min3 < max3 - }) - }), - import_react347.default.createElement(SliderLabels, { min: min3, max: max3, referenceValues, valueFormatter, labelsId, ariaDescription }) - ); -} - -// node_modules/@cloudscape-design/components/slider/index.js -function Slider(_a) { - var { tickMarks, hideFillLine } = _a, props = __rest(_a, ["tickMarks", "hideFillLine"]); - const baseComponentProps = useBaseComponent("Slider", { - props: { tickMarks, hideFillLine, readOnly: props.readOnly } - }); - return import_react348.default.createElement(InternalSlider, Object.assign({ tickMarks, hideFillLine }, props, baseComponentProps)); -} -applyDisplayName(Slider, "Slider"); - // node_modules/@cloudscape-design/components/spinner/index.js -var import_react349 = __toESM(require_react()); +var import_react345 = __toESM(require_react()); function Spinner(_a) { var { size = "normal", variant = "normal" } = _a, props = __rest(_a, ["size", "variant"]); const baseComponentProps = useBaseComponent("Spinner", { props: { size, variant } }); - return import_react349.default.createElement(InternalSpinner, Object.assign({ size, variant }, props, baseComponentProps)); + return import_react345.default.createElement(InternalSpinner, Object.assign({ size, variant }, props, baseComponentProps)); } applyDisplayName(Spinner, "Spinner"); // node_modules/@cloudscape-design/components/split-panel/index.js -var import_react360 = __toESM(require_react()); +var import_react356 = __toESM(require_react()); // node_modules/@cloudscape-design/components/split-panel/implementation.js -var import_react359 = __toESM(require_react()); +var import_react355 = __toESM(require_react()); // node_modules/@cloudscape-design/components/split-panel/bottom.js -var import_react350 = __toESM(require_react()); +var import_react346 = __toESM(require_react()); // node_modules/@cloudscape-design/components/split-panel/styles.css.js import "/home/a171157/personal-repos/deep-racer/community-contributions/deepracer-custom-console/new/node_modules/@cloudscape-design/components/split-panel/styles.scoped.css"; -var styles_css_default129 = { +var styles_css_default128 = { "drawer": "awsui_drawer_1r9lg_1iqzp_153", "drawer-closed": "awsui_drawer-closed_1r9lg_1iqzp_190", "refresh": "awsui_refresh_1r9lg_1iqzp_190", @@ -39576,67 +39239,67 @@ function SplitPanelContentBottom({ baseProps, isOpen, splitPanelRef, cappedSize, const isToolbar = useAppLayoutToolbarEnabled(); const { bottomOffset, leftOffset, rightOffset, disableContentPaddings, contentWrapperPaddings, reportHeaderHeight, headerHeight: headerBlockSize, animationDisabled } = useSplitPanelContext(); const isMobile = useMobile(); - const headerRef = (0, import_react350.useRef)(null); + const headerRef = (0, import_react346.useRef)(null); useResizeObserver(headerRef, (entry) => { const { borderBoxHeight } = entry; reportHeaderHeight(borderBoxHeight); }); - (0, import_react350.useEffect)(() => { + (0, import_react346.useEffect)(() => { return () => reportHeaderHeight(0); }, []); const centeredMaxWidthClasses = clsx_m_default({ - [styles_css_default129["pane-bottom-center-align"]]: isRefresh, - [styles_css_default129["pane-bottom-content-nav-padding"]]: contentWrapperPaddings === null || contentWrapperPaddings === void 0 ? void 0 : contentWrapperPaddings.closedNav, - [styles_css_default129["pane-bottom-content-tools-padding"]]: contentWrapperPaddings === null || contentWrapperPaddings === void 0 ? void 0 : contentWrapperPaddings.closedTools + [styles_css_default128["pane-bottom-center-align"]]: isRefresh, + [styles_css_default128["pane-bottom-content-nav-padding"]]: contentWrapperPaddings === null || contentWrapperPaddings === void 0 ? void 0 : contentWrapperPaddings.closedNav, + [styles_css_default128["pane-bottom-content-tools-padding"]]: contentWrapperPaddings === null || contentWrapperPaddings === void 0 ? void 0 : contentWrapperPaddings.closedTools }); - return import_react350.default.createElement( + return import_react346.default.createElement( "div", - Object.assign({}, baseProps, { className: clsx_m_default(baseProps.className, styles_css_default129.drawer, styles_css_default129["position-bottom"], styles_css_default24.root, { + Object.assign({}, baseProps, { className: clsx_m_default(baseProps.className, styles_css_default128.drawer, styles_css_default128["position-bottom"], styles_css_default24.root, { [styles_css_default18["with-motion-vertical"]]: !animationDisabled, [styles_css_default24["open-position-bottom"]]: isOpen, - [styles_css_default129["drawer-closed"]]: !isOpen, - [styles_css_default129["drawer-mobile"]]: isMobile, - [styles_css_default129["drawer-disable-content-paddings"]]: disableContentPaddings, - [styles_css_default129.refresh]: isRefresh, - [styles_css_default129["with-toolbar"]]: isToolbar + [styles_css_default128["drawer-closed"]]: !isOpen, + [styles_css_default128["drawer-mobile"]]: isMobile, + [styles_css_default128["drawer-disable-content-paddings"]]: disableContentPaddings, + [styles_css_default128.refresh]: isRefresh, + [styles_css_default128["with-toolbar"]]: isToolbar }), onClick: () => !isOpen && onToggle(), style: { insetBlockEnd: bottomOffset, insetInlineStart: leftOffset, insetInlineEnd: rightOffset, blockSize: isOpen ? cappedSize : isToolbar && headerBlockSize !== void 0 ? `calc(${headerBlockSize}px + ${borderPanelTopWidth})` : void 0 }, ref: splitPanelRef }), - isOpen && import_react350.default.createElement("div", { className: styles_css_default129["slider-wrapper-bottom"] }, resizeHandle), - import_react350.default.createElement( + isOpen && import_react346.default.createElement("div", { className: styles_css_default128["slider-wrapper-bottom"] }, resizeHandle), + import_react346.default.createElement( "div", - { className: styles_css_default129["drawer-content-bottom"], "aria-labelledby": panelHeaderId, role: "region" }, - import_react350.default.createElement("div", { className: clsx_m_default(styles_css_default129["pane-header-wrapper-bottom"], centeredMaxWidthClasses), ref: headerRef }, header), - import_react350.default.createElement( + { className: styles_css_default128["drawer-content-bottom"], "aria-labelledby": panelHeaderId, role: "region" }, + import_react346.default.createElement("div", { className: clsx_m_default(styles_css_default128["pane-header-wrapper-bottom"], centeredMaxWidthClasses), ref: headerRef }, header), + import_react346.default.createElement( "div", - { className: clsx_m_default(styles_css_default129["content-bottom"], centeredMaxWidthClasses), "aria-hidden": !isOpen }, - import_react350.default.createElement("div", { className: clsx_m_default({ [styles_css_default129["content-bottom-max-width"]]: isRefresh }), style: appLayoutMaxWidth }, children) + { className: clsx_m_default(styles_css_default128["content-bottom"], centeredMaxWidthClasses), "aria-hidden": !isOpen }, + import_react346.default.createElement("div", { className: clsx_m_default({ [styles_css_default128["content-bottom-max-width"]]: isRefresh }), style: appLayoutMaxWidth }, children) ) ) ); } // node_modules/@cloudscape-design/components/split-panel/preferences-modal.js -var import_react357 = __toESM(require_react()); +var import_react353 = __toESM(require_react()); // node_modules/@cloudscape-design/components/tiles/internal.js -var import_react352 = __toESM(require_react()); +var import_react348 = __toESM(require_react()); // node_modules/@cloudscape-design/components/tiles/tile.js -var import_react351 = __toESM(require_react()); +var import_react347 = __toESM(require_react()); // node_modules/@cloudscape-design/components/tiles/analytics-metadata/styles.css.js import "/home/a171157/personal-repos/deep-racer/community-contributions/deepracer-custom-console/new/node_modules/@cloudscape-design/components/tiles/analytics-metadata/styles.scoped.css"; -var styles_css_default130 = { +var styles_css_default129 = { "radio-button": "awsui_radio-button_feeqa_1rmzd_5" }; // node_modules/@cloudscape-design/components/tiles/styles.css.js import "/home/a171157/personal-repos/deep-racer/community-contributions/deepracer-custom-console/new/node_modules/@cloudscape-design/components/tiles/styles.scoped.css"; -var styles_css_default131 = { +var styles_css_default130 = { "column-layout": "awsui_column-layout_vj6p7_140zw_189", "grid": "awsui_grid_vj6p7_140zw_221", "grid-no-gutters": "awsui_grid-no-gutters_vj6p7_140zw_227", @@ -39670,14 +39333,14 @@ var styles_css_default131 = { }; // node_modules/@cloudscape-design/components/tiles/tile.js -var Tile = import_react351.default.forwardRef((_a, forwardedRef) => { +var Tile = import_react347.default.forwardRef((_a, forwardedRef) => { var { item, selected, name, breakpoint, onChange, readOnly } = _a, rest = __rest(_a, ["item", "selected", "name", "breakpoint", "onChange", "readOnly"]); - const internalRef = (0, import_react351.useRef)(null); + const internalRef = (0, import_react347.useRef)(null); const isVisualRefresh = useVisualRefresh(); const mergedRef = useMergeRefs(internalRef, forwardedRef); - return import_react351.default.createElement( + return import_react347.default.createElement( "div", - Object.assign({ className: clsx_m_default(styles_css_default131["tile-container"], { [styles_css_default131["has-metadata"]]: item.description || item.image }, { [styles_css_default131.selected]: selected }, { [styles_css_default131.disabled]: !!item.disabled }, { [styles_css_default131.readonly]: readOnly }, { [styles_css_default131.refresh]: isVisualRefresh }, styles_css_default131[`breakpoint-${breakpoint}`]), "data-value": item.value, onClick: () => { + Object.assign({ className: clsx_m_default(styles_css_default130["tile-container"], { [styles_css_default130["has-metadata"]]: item.description || item.image }, { [styles_css_default130.selected]: selected }, { [styles_css_default130.disabled]: !!item.disabled }, { [styles_css_default130.readonly]: readOnly }, { [styles_css_default130.refresh]: isVisualRefresh }, styles_css_default130[`breakpoint-${breakpoint}`]), "data-value": item.value, onClick: () => { var _a2; if (item.disabled || readOnly) { return; @@ -39687,18 +39350,18 @@ var Tile = import_react351.default.forwardRef((_a, forwardedRef) => { fireNonCancelableEvent(onChange, { value: item.value }); } } }, copyAnalyticsMetadataAttribute(rest)), - import_react351.default.createElement( + import_react347.default.createElement( "div", - { className: clsx_m_default(styles_css_default131.control, { [styles_css_default131["no-image"]]: !item.image }) }, - import_react351.default.createElement(radio_button_default, { checked: selected, ref: mergedRef, name, value: item.value, label: item.label, description: item.description, disabled: item.disabled, controlId: item.controlId, readOnly, className: styles_css_default130["radio-button"] }) + { className: clsx_m_default(styles_css_default130.control, { [styles_css_default130["no-image"]]: !item.image }) }, + import_react347.default.createElement(radio_button_default, { checked: selected, ref: mergedRef, name, value: item.value, label: item.label, description: item.description, disabled: item.disabled, controlId: item.controlId, readOnly, className: styles_css_default129["radio-button"] }) ), - item.image && import_react351.default.createElement("div", { className: clsx_m_default(styles_css_default131.image, { [styles_css_default131.disabled]: !!item.disabled }) }, item.image) + item.image && import_react347.default.createElement("div", { className: clsx_m_default(styles_css_default130.image, { [styles_css_default130.disabled]: !!item.disabled }) }, item.image) ); }); // node_modules/@cloudscape-design/components/tiles/internal.js var COLUMN_TRIGGERS = ["default", "xxs", "xs"]; -var InternalTiles = import_react352.default.forwardRef((_a, ref) => { +var InternalTiles = import_react348.default.forwardRef((_a, ref) => { var { name, value, items, ariaLabel, ariaRequired, ariaControls, columns, onChange, readOnly, __internalRootRef = null } = _a, rest = __rest(_a, ["name", "value", "items", "ariaLabel", "ariaRequired", "ariaControls", "columns", "onChange", "readOnly", "__internalRootRef"]); const baseProps = getBaseProps(rest); const { ariaDescribedby, ariaLabelledby } = useFormFieldContext(rest); @@ -39707,15 +39370,15 @@ var InternalTiles = import_react352.default.forwardRef((_a, ref) => { const [breakpoint, breakpointRef] = useContainerBreakpoints(COLUMN_TRIGGERS); const mergedRef = useMergeRefs(breakpointRef, __internalRootRef); const columnCount = getColumnCount(items, columns); - return import_react352.default.createElement( + return import_react348.default.createElement( "div", - Object.assign({ role: "radiogroup", "aria-label": ariaLabel, "aria-labelledby": ariaLabelledby, "aria-describedby": ariaDescribedby, "aria-required": ariaRequired, "aria-controls": ariaControls, "aria-readonly": readOnly ? "true" : void 0 }, baseProps, { className: clsx_m_default(baseProps.className, styles_css_default131.root), ref: mergedRef }), - import_react352.default.createElement("div", { className: clsx_m_default(styles_css_default131.columns, styles_css_default131[`column-${columnCount}`]) }, items && items.map((item, index) => import_react352.default.createElement(Tile, Object.assign({ ref: index === tileRefIndex ? tileRef : void 0, key: item.value, item, selected: item.value === value, name: name || generatedName, breakpoint, onChange, readOnly }, !item.disabled && !readOnly ? getAnalyticsMetadataAttribute({ + Object.assign({ role: "radiogroup", "aria-label": ariaLabel, "aria-labelledby": ariaLabelledby, "aria-describedby": ariaDescribedby, "aria-required": ariaRequired, "aria-controls": ariaControls, "aria-readonly": readOnly ? "true" : void 0 }, baseProps, { className: clsx_m_default(baseProps.className, styles_css_default130.root), ref: mergedRef }), + import_react348.default.createElement("div", { className: clsx_m_default(styles_css_default130.columns, styles_css_default130[`column-${columnCount}`]) }, items && items.map((item, index) => import_react348.default.createElement(Tile, Object.assign({ ref: index === tileRefIndex ? tileRef : void 0, key: item.value, item, selected: item.value === value, name: name || generatedName, breakpoint, onChange, readOnly }, !item.disabled && !readOnly ? getAnalyticsMetadataAttribute({ action: "select", detail: { position: `${index + 1}`, value: item.value, - label: `.${styles_css_default130["radio-button"]}` + label: `.${styles_css_default129["radio-button"]}` } }) : {})))) ); @@ -39737,11 +39400,11 @@ function getColumnCount(items, columns) { var internal_default28 = InternalTiles; // node_modules/@cloudscape-design/components/split-panel/icons/bottom-icon.js -var import_react353 = __toESM(require_react()); +var import_react349 = __toESM(require_react()); // node_modules/@cloudscape-design/components/split-panel/icons/styles.css.js import "/home/a171157/personal-repos/deep-racer/community-contributions/deepracer-custom-console/new/node_modules/@cloudscape-design/components/split-panel/icons/styles.scoped.css"; -var styles_css_default132 = { +var styles_css_default131 = { "preference-icon--svg": "awsui_preference-icon--svg_d4xxm_5yzgx_145", "preference-icon--layout-border": "awsui_preference-icon--layout-border_d4xxm_5yzgx_151", "preference-icon--layout-background": "awsui_preference-icon--layout-background_d4xxm_5yzgx_155", @@ -39767,69 +39430,69 @@ var styles_css_default132 = { }; // node_modules/@cloudscape-design/components/split-panel/icons/bottom-icon.js -var bottomPositionIcon = import_react353.default.createElement( +var bottomPositionIcon = import_react349.default.createElement( "svg", - { className: styles_css_default132["preference-icon--svg"], focusable: false, viewBox: "0 0 240 134", version: "1.1", xmlns: "http://www.w3.org/2000/svg", xmlnsXlink: "http://www.w3.org/1999/xlink", "aria-hidden": "true" }, - import_react353.default.createElement( + { className: styles_css_default131["preference-icon--svg"], focusable: false, viewBox: "0 0 240 134", version: "1.1", xmlns: "http://www.w3.org/2000/svg", xmlnsXlink: "http://www.w3.org/1999/xlink", "aria-hidden": "true" }, + import_react349.default.createElement( "g", { stroke: "none", strokeWidth: "1", fill: "none", fillRule: "evenodd" }, - import_react353.default.createElement( + import_react349.default.createElement( "g", null, - import_react353.default.createElement( + import_react349.default.createElement( "g", null, - import_react353.default.createElement("rect", { className: styles_css_default132["preference-icon--layout-border"], strokeWidth: "2", x: "1", y: "1", width: "238", height: "125", rx: "2" }), - import_react353.default.createElement("rect", { className: styles_css_default132["preference-icon--layout-background"], x: "12", y: "0", width: "217", height: "126" }), - import_react353.default.createElement("path", { className: styles_css_default132["preference-icon--layout-header"], d: "M2,0 L238,0 C239.104569,-1.58997828e-14 240,0.8954305 240,2 L240,10 L240,10 L0,10 L0,2 C-1.3527075e-16,0.8954305 0.8954305,2.02906125e-16 2,0 Z" }) + import_react349.default.createElement("rect", { className: styles_css_default131["preference-icon--layout-border"], strokeWidth: "2", x: "1", y: "1", width: "238", height: "125", rx: "2" }), + import_react349.default.createElement("rect", { className: styles_css_default131["preference-icon--layout-background"], x: "12", y: "0", width: "217", height: "126" }), + import_react349.default.createElement("path", { className: styles_css_default131["preference-icon--layout-header"], d: "M2,0 L238,0 C239.104569,-1.58997828e-14 240,0.8954305 240,2 L240,10 L240,10 L0,10 L0,2 C-1.3527075e-16,0.8954305 0.8954305,2.02906125e-16 2,0 Z" }) ), - import_react353.default.createElement( + import_react349.default.createElement( "g", { transform: "translate(28.000000, 22.000000)" }, - import_react353.default.createElement("rect", { className: styles_css_default132["preference-icon--border"], strokeWidth: "2", x: "1", y: "1", width: "182", height: "110", rx: "2" }), - import_react353.default.createElement("rect", { className: styles_css_default132["preference-icon--primary-button"], x: "152", y: "6", width: "26", height: "10" }), - import_react353.default.createElement("rect", { className: styles_css_default132["preference-icon--disabled-element"], x: "122", y: "6", width: "26", height: "10" }), - import_react353.default.createElement("rect", { className: styles_css_default132["preference-icon--disabled-element"], x: "92", y: "6", width: "26", height: "10" }), - import_react353.default.createElement("rect", { className: styles_css_default132["preference-icon--disabled-element"], x: "122", y: "29", width: "55", height: "3" }), - import_react353.default.createElement("rect", { className: styles_css_default132["preference-icon--disabled-element"], x: "92", y: "29", width: "26", height: "3" }), - import_react353.default.createElement("polygon", { className: styles_css_default132["preference-icon--focus-text"], points: "19 29 49 29 49 32 19 32" }), - import_react353.default.createElement("polygon", { className: styles_css_default132["preference-icon--focus-text"], points: "10 10 40 10 40 13 10 13" }), - import_react353.default.createElement("polygon", { className: styles_css_default132["preference-icon--disabled-element"], points: "10 29 13 29 13 32 10 32" }), - import_react353.default.createElement("line", { className: styles_css_default132["preference-icon--separator"], x1: "3", y1: "22.7619048", x2: "181", y2: "22.7619048", strokeWidth: "2", strokeLinecap: "square" }), - import_react353.default.createElement( + import_react349.default.createElement("rect", { className: styles_css_default131["preference-icon--border"], strokeWidth: "2", x: "1", y: "1", width: "182", height: "110", rx: "2" }), + import_react349.default.createElement("rect", { className: styles_css_default131["preference-icon--primary-button"], x: "152", y: "6", width: "26", height: "10" }), + import_react349.default.createElement("rect", { className: styles_css_default131["preference-icon--disabled-element"], x: "122", y: "6", width: "26", height: "10" }), + import_react349.default.createElement("rect", { className: styles_css_default131["preference-icon--disabled-element"], x: "92", y: "6", width: "26", height: "10" }), + import_react349.default.createElement("rect", { className: styles_css_default131["preference-icon--disabled-element"], x: "122", y: "29", width: "55", height: "3" }), + import_react349.default.createElement("rect", { className: styles_css_default131["preference-icon--disabled-element"], x: "92", y: "29", width: "26", height: "3" }), + import_react349.default.createElement("polygon", { className: styles_css_default131["preference-icon--focus-text"], points: "19 29 49 29 49 32 19 32" }), + import_react349.default.createElement("polygon", { className: styles_css_default131["preference-icon--focus-text"], points: "10 10 40 10 40 13 10 13" }), + import_react349.default.createElement("polygon", { className: styles_css_default131["preference-icon--disabled-element"], points: "10 29 13 29 13 32 10 32" }), + import_react349.default.createElement("line", { className: styles_css_default131["preference-icon--separator"], x1: "3", y1: "22.7619048", x2: "181", y2: "22.7619048", strokeWidth: "2", strokeLinecap: "square" }), + import_react349.default.createElement( "g", { transform: "translate(3.000000, 37.285714)" }, - import_react353.default.createElement("rect", { className: styles_css_default132["preference-icon--disabled-element"], x: "119", y: "6", width: "55", height: "3" }), - import_react353.default.createElement("rect", { className: styles_css_default132["preference-icon--disabled-element"], x: "89", y: "6", width: "26", height: "3" }), - import_react353.default.createElement("polygon", { className: styles_css_default132["preference-icon--focus-text"], points: "16 6 46 6 46 9 16 9" }), - import_react353.default.createElement("polygon", { className: styles_css_default132["preference-icon--disabled-element"], points: "7 6 10 6 10 9 7 9" }), - import_react353.default.createElement("line", { className: styles_css_default132["preference-icon--separator"], x1: "0", y1: "0.666666667", x2: "178", y2: "0.666666667", strokeLinecap: "square" }) + import_react349.default.createElement("rect", { className: styles_css_default131["preference-icon--disabled-element"], x: "119", y: "6", width: "55", height: "3" }), + import_react349.default.createElement("rect", { className: styles_css_default131["preference-icon--disabled-element"], x: "89", y: "6", width: "26", height: "3" }), + import_react349.default.createElement("polygon", { className: styles_css_default131["preference-icon--focus-text"], points: "16 6 46 6 46 9 16 9" }), + import_react349.default.createElement("polygon", { className: styles_css_default131["preference-icon--disabled-element"], points: "7 6 10 6 10 9 7 9" }), + import_react349.default.createElement("line", { className: styles_css_default131["preference-icon--separator"], x1: "0", y1: "0.666666667", x2: "178", y2: "0.666666667", strokeLinecap: "square" }) ) ), - import_react353.default.createElement( + import_react349.default.createElement( "g", { transform: "translate(12.000000, 74.000000)" }, - import_react353.default.createElement( + import_react349.default.createElement( "g", null, - import_react353.default.createElement("rect", { className: styles_css_default132["preference-icon--border"], strokeWidth: "2", x: "1", y: "1", width: "215", height: "58", rx: "2" }), - import_react353.default.createElement("rect", { className: styles_css_default132["preference-icon--secondary"], x: "177", y: "8", width: "30.6630435", height: "10" }), - import_react353.default.createElement("polygon", { className: styles_css_default132["preference-icon--focus-text"], points: "10 12 45.3804348 12 45.3804348 15 10 15" }) + import_react349.default.createElement("rect", { className: styles_css_default131["preference-icon--border"], strokeWidth: "2", x: "1", y: "1", width: "215", height: "58", rx: "2" }), + import_react349.default.createElement("rect", { className: styles_css_default131["preference-icon--secondary"], x: "177", y: "8", width: "30.6630435", height: "10" }), + import_react349.default.createElement("polygon", { className: styles_css_default131["preference-icon--focus-text"], points: "10 12 45.3804348 12 45.3804348 15 10 15" }) ), - import_react353.default.createElement( + import_react349.default.createElement( "g", - { className: styles_css_default132["preference-icon--secondary"], transform: "translate(9.000000, 40.000000)" }, - import_react353.default.createElement("polygon", { points: "-3.55271368e-15 0 39 0 39 3 -3.55271368e-15 3" }), - import_react353.default.createElement("polygon", { points: "53 0 92 0 92 3 53 3" }), - import_react353.default.createElement("polygon", { points: "107 0 146 0 146 3 107 3" }), - import_react353.default.createElement("polygon", { points: "160 0 199 0 199 3 160 3" }), - import_react353.default.createElement("polygon", { points: "-3.55271368e-15 9 39 9 39 12 -3.55271368e-15 12" }), - import_react353.default.createElement("polygon", { points: "53 9 92 9 92 12 53 12" }), - import_react353.default.createElement("polygon", { points: "107 9 146 9 146 12 107 12" }), - import_react353.default.createElement("polygon", { points: "160 9 199 9 199 12 160 12" }) + { className: styles_css_default131["preference-icon--secondary"], transform: "translate(9.000000, 40.000000)" }, + import_react349.default.createElement("polygon", { points: "-3.55271368e-15 0 39 0 39 3 -3.55271368e-15 3" }), + import_react349.default.createElement("polygon", { points: "53 0 92 0 92 3 53 3" }), + import_react349.default.createElement("polygon", { points: "107 0 146 0 146 3 107 3" }), + import_react349.default.createElement("polygon", { points: "160 0 199 0 199 3 160 3" }), + import_react349.default.createElement("polygon", { points: "-3.55271368e-15 9 39 9 39 12 -3.55271368e-15 12" }), + import_react349.default.createElement("polygon", { points: "53 9 92 9 92 12 53 12" }), + import_react349.default.createElement("polygon", { points: "107 9 146 9 146 12 107 12" }), + import_react349.default.createElement("polygon", { points: "160 9 199 9 199 12 160 12" }) ), - import_react353.default.createElement("polygon", { className: styles_css_default132["preference-icon--focus-text"], points: "10 23 32 23 32 26 10 26" }), - import_react353.default.createElement("polygon", { className: styles_css_default132["preference-icon--secondary"], points: "40 23 62 23 62 26 40 26" }) + import_react349.default.createElement("polygon", { className: styles_css_default131["preference-icon--focus-text"], points: "10 23 32 23 32 26 10 26" }), + import_react349.default.createElement("polygon", { className: styles_css_default131["preference-icon--secondary"], points: "40 23 62 23 62 26 40 26" }) ) ) ) @@ -39837,83 +39500,83 @@ var bottomPositionIcon = import_react353.default.createElement( var bottom_icon_default = bottomPositionIcon; // node_modules/@cloudscape-design/components/split-panel/icons/bottom-icon-refresh.js -var import_react355 = __toESM(require_react()); +var import_react351 = __toESM(require_react()); // node_modules/@cloudscape-design/components/split-panel/icons/side-position-refresh.js -var import_react354 = __toESM(require_react()); -var getClassName3 = (suffix) => styles_css_default132[`preference-icon-refresh--${suffix}`]; +var import_react350 = __toESM(require_react()); +var getClassName3 = (suffix) => styles_css_default131[`preference-icon-refresh--${suffix}`]; var TableRow = ({ offset, separator = true, isHeader }) => { const offsetTop = 0.4482; const offsetBottom = 3.4482; - return import_react354.default.createElement( + return import_react350.default.createElement( "g", { transform: `translate(0, ${offset})`, className: getClassName3(isHeader ? "column-header" : "disabled") }, - import_react354.default.createElement("path", { d: `M19 ${offsetTop}2H22V${offsetBottom}H19V${offsetTop}Z` }), - import_react354.default.createElement("path", { d: `M27 ${offsetTop}H51V${offsetBottom}H27V${offsetTop}Z`, className: !isHeader ? getClassName3("secondary") : void 0 }), - import_react354.default.createElement("path", { d: `M90 ${offsetTop}H110V${offsetBottom}H90V${offsetTop}Z` }), - import_react354.default.createElement("path", { d: `M113 ${offsetTop}H157V${offsetBottom}H113V${offsetTop}Z` }), - separator && import_react354.default.createElement("path", { d: "M14 8H159.387", className: getClassName3("separator"), strokeLinecap: "square" }) + import_react350.default.createElement("path", { d: `M19 ${offsetTop}2H22V${offsetBottom}H19V${offsetTop}Z` }), + import_react350.default.createElement("path", { d: `M27 ${offsetTop}H51V${offsetBottom}H27V${offsetTop}Z`, className: !isHeader ? getClassName3("secondary") : void 0 }), + import_react350.default.createElement("path", { d: `M90 ${offsetTop}H110V${offsetBottom}H90V${offsetTop}Z` }), + import_react350.default.createElement("path", { d: `M113 ${offsetTop}H157V${offsetBottom}H113V${offsetTop}Z` }), + separator && import_react350.default.createElement("path", { d: "M14 8H159.387", className: getClassName3("separator"), strokeLinecap: "square" }) ); }; var SidePanelRow = ({ offset }) => { - return import_react354.default.createElement( + return import_react350.default.createElement( "g", { transform: `translate(0, ${offset})`, className: getClassName3("secondary") }, - import_react354.default.createElement("path", { d: "M177 0H190V3H177V0Z" }), - import_react354.default.createElement("path", { d: "M195 0H208V3H195V0Z" }) + import_react350.default.createElement("path", { d: "M177 0H190V3H177V0Z" }), + import_react350.default.createElement("path", { d: "M195 0H208V3H195V0Z" }) ); }; -var bottomPositionIcon2 = import_react354.default.createElement( +var bottomPositionIcon2 = import_react350.default.createElement( "svg", { className: getClassName3("svg"), focusable: false, viewBox: "0 0 230 128", version: "1.1", xmlns: "http://www.w3.org/2000/svg", xmlnsXlink: "http://www.w3.org/1999/xlink", "aria-hidden": "true" }, - import_react354.default.createElement("path", { d: "M2 1H214C214.552 1 215 1.44772 215 2V126C215 126.552 214.552 127 214 127H2.00001C1.44772 127 1 126.552 1 126V2C1 1.44772 1.44772 1 2 1Z", className: getClassName3("window"), strokeWidth: "2" }), - import_react354.default.createElement( + import_react350.default.createElement("path", { d: "M2 1H214C214.552 1 215 1.44772 215 2V126C215 126.552 214.552 127 214 127H2.00001C1.44772 127 1 126.552 1 126V2C1 1.44772 1.44772 1 2 1Z", className: getClassName3("window"), strokeWidth: "2" }), + import_react350.default.createElement( "g", { className: "awsui-context-top-navigation" }, - import_react354.default.createElement("rect", { x: "2", y: "2", width: "212", height: "6", className: getClassName3("layout-top") }) + import_react350.default.createElement("rect", { x: "2", y: "2", width: "212", height: "6", className: getClassName3("layout-top") }) ), - import_react354.default.createElement( + import_react350.default.createElement( "g", null, - import_react354.default.createElement("path", { d: "M2 8H214V23H2V8Z", className: getClassName3("layout-main") }), - import_react354.default.createElement( + import_react350.default.createElement("path", { d: "M2 8H214V23H2V8Z", className: getClassName3("layout-main") }), + import_react350.default.createElement( "g", { className: getClassName3("default") }, - import_react354.default.createElement("path", { d: "M9 15.5C9 16.8807 7.88071 18 6.5 18C5.11929 18 4 16.8807 4 15.5C4 14.1193 5.11929 13 6.5 13C7.88071 13 9 14.1193 9 15.5Z", className: getClassName3("disabled") }), - import_react354.default.createElement("path", { d: "M16 14H46.1484V17H16V14Z" }), - import_react354.default.createElement("path", { d: "M92 15.5C92 13.567 93.567 12 95.5 12H108.86C110.793 12 112.36 13.567 112.36 15.5C112.36 17.433 110.793 19 108.86 19H95.5C93.567 19 92 17.433 92 15.5Z" }), - import_react354.default.createElement("path", { d: "M116 15.5C116 13.567 117.567 12 119.5 12H132.86C134.793 12 136.36 13.567 136.36 15.5C136.36 17.433 134.793 19 132.86 19H119.5C117.567 19 116 17.433 116 15.5Z" }), - import_react354.default.createElement("path", { d: "M139 15.5C139 13.567 140.567 12 142.5 12H155.86C157.793 12 159.36 13.567 159.36 15.5C159.36 17.433 157.793 19 155.86 19H142.5C140.567 19 139 17.433 139 15.5Z", className: getClassName3("primary") }) + import_react350.default.createElement("path", { d: "M9 15.5C9 16.8807 7.88071 18 6.5 18C5.11929 18 4 16.8807 4 15.5C4 14.1193 5.11929 13 6.5 13C7.88071 13 9 14.1193 9 15.5Z", className: getClassName3("disabled") }), + import_react350.default.createElement("path", { d: "M16 14H46.1484V17H16V14Z" }), + import_react350.default.createElement("path", { d: "M92 15.5C92 13.567 93.567 12 95.5 12H108.86C110.793 12 112.36 13.567 112.36 15.5C112.36 17.433 110.793 19 108.86 19H95.5C93.567 19 92 17.433 92 15.5Z" }), + import_react350.default.createElement("path", { d: "M116 15.5C116 13.567 117.567 12 119.5 12H132.86C134.793 12 136.36 13.567 136.36 15.5C136.36 17.433 134.793 19 132.86 19H119.5C117.567 19 116 17.433 116 15.5Z" }), + import_react350.default.createElement("path", { d: "M139 15.5C139 13.567 140.567 12 142.5 12H155.86C157.793 12 159.36 13.567 159.36 15.5C159.36 17.433 157.793 19 155.86 19H142.5C140.567 19 139 17.433 139 15.5Z", className: getClassName3("primary") }) ) ), - import_react354.default.createElement(TableRow, { offset: 27, isHeader: true }), - import_react354.default.createElement(TableRow, { offset: 39 }), - import_react354.default.createElement(TableRow, { offset: 51 }), - import_react354.default.createElement(TableRow, { offset: 63 }), - import_react354.default.createElement(TableRow, { offset: 75 }), - import_react354.default.createElement(TableRow, { offset: 87 }), - import_react354.default.createElement(TableRow, { offset: 99 }), - import_react354.default.createElement(TableRow, { offset: 111, separator: false }), - import_react354.default.createElement("rect", { x: "166", y: "13", width: "62", height: "108", rx: "5", className: getClassName3("window"), strokeWidth: "2" }), - import_react354.default.createElement("rect", { x: "169", y: "62", width: "3", height: "8", rx: "1.5", className: getClassName3("input-default") }), - import_react354.default.createElement("path", { d: "M216 14V120", className: getClassName3("separator") }), - import_react354.default.createElement( + import_react350.default.createElement(TableRow, { offset: 27, isHeader: true }), + import_react350.default.createElement(TableRow, { offset: 39 }), + import_react350.default.createElement(TableRow, { offset: 51 }), + import_react350.default.createElement(TableRow, { offset: 63 }), + import_react350.default.createElement(TableRow, { offset: 75 }), + import_react350.default.createElement(TableRow, { offset: 87 }), + import_react350.default.createElement(TableRow, { offset: 99 }), + import_react350.default.createElement(TableRow, { offset: 111, separator: false }), + import_react350.default.createElement("rect", { x: "166", y: "13", width: "62", height: "108", rx: "5", className: getClassName3("window"), strokeWidth: "2" }), + import_react350.default.createElement("rect", { x: "169", y: "62", width: "3", height: "8", rx: "1.5", className: getClassName3("input-default") }), + import_react350.default.createElement("path", { d: "M216 14V120", className: getClassName3("separator") }), + import_react350.default.createElement( "g", { className: getClassName3("disabled") }, - import_react354.default.createElement("path", { d: "M224 19.5C224 20.8807 222.881 22 221.5 22C220.119 22 219 20.8807 219 19.5C219 18.1193 220.119 17 221.5 17C222.881 17 224 18.1193 224 19.5Z" }), - import_react354.default.createElement("path", { d: "M224 27.5C224 28.8807 222.881 30 221.5 30C220.119 30 219 28.8807 219 27.5C219 26.1193 220.119 25 221.5 25C222.881 25 224 26.1193 224 27.5Z" }) + import_react350.default.createElement("path", { d: "M224 19.5C224 20.8807 222.881 22 221.5 22C220.119 22 219 20.8807 219 19.5C219 18.1193 220.119 17 221.5 17C222.881 17 224 18.1193 224 19.5Z" }), + import_react350.default.createElement("path", { d: "M224 27.5C224 28.8807 222.881 30 221.5 30C220.119 30 219 28.8807 219 27.5C219 26.1193 220.119 25 221.5 25C222.881 25 224 26.1193 224 27.5Z" }) ), - import_react354.default.createElement("path", { d: "M177 23H191V28H177V23Z", className: getClassName3("heading") }), - import_react354.default.createElement( + import_react350.default.createElement("path", { d: "M177 23H191V28H177V23Z", className: getClassName3("heading") }), + import_react350.default.createElement( "g", { className: getClassName3("secondary") }, - import_react354.default.createElement("path", { d: "M207 23H212V28H207V23Z" }), - import_react354.default.createElement("path", { d: "M199 23H204V28H199V23Z" }) + import_react350.default.createElement("path", { d: "M207 23H212V28H207V23Z" }), + import_react350.default.createElement("path", { d: "M199 23H204V28H199V23Z" }) ), - import_react354.default.createElement(SidePanelRow, { offset: 36 }), - import_react354.default.createElement(SidePanelRow, { offset: 48 }), - import_react354.default.createElement(SidePanelRow, { offset: 60 }), - import_react354.default.createElement(SidePanelRow, { offset: 72 }) + import_react350.default.createElement(SidePanelRow, { offset: 36 }), + import_react350.default.createElement(SidePanelRow, { offset: 48 }), + import_react350.default.createElement(SidePanelRow, { offset: 60 }), + import_react350.default.createElement(SidePanelRow, { offset: 72 }) ); var side_position_refresh_default = bottomPositionIcon2; @@ -39921,176 +39584,176 @@ var side_position_refresh_default = bottomPositionIcon2; var TableRow2 = ({ offset, isHeader }) => { const offsetTop = 0.4482; const offsetBottom = 3.4482; - return import_react355.default.createElement( + return import_react351.default.createElement( "g", { transform: `translate(0, ${offset})`, className: getClassName3(isHeader ? "column-header" : "disabled") }, - import_react355.default.createElement("path", { d: `M31 ${offsetTop}H34V${offsetBottom}H31V${offsetTop}Z` }), - import_react355.default.createElement("path", { d: `M39 ${offsetTop}H63V${offsetBottom}H39V${offsetTop}Z`, className: !isHeader ? getClassName3("secondary") : void 0 }), - import_react355.default.createElement("path", { d: `M135 ${offsetTop}H155V${offsetBottom}H135V${offsetTop}Z` }), - import_react355.default.createElement("path", { d: `M158 ${offsetTop}H202V${offsetBottom}H158V${offsetTop}Z` }), - import_react355.default.createElement("path", { d: "M26 8H204.388", className: getClassName3("separator"), strokeLinecap: "square" }) + import_react351.default.createElement("path", { d: `M31 ${offsetTop}H34V${offsetBottom}H31V${offsetTop}Z` }), + import_react351.default.createElement("path", { d: `M39 ${offsetTop}H63V${offsetBottom}H39V${offsetTop}Z`, className: !isHeader ? getClassName3("secondary") : void 0 }), + import_react351.default.createElement("path", { d: `M135 ${offsetTop}H155V${offsetBottom}H135V${offsetTop}Z` }), + import_react351.default.createElement("path", { d: `M158 ${offsetTop}H202V${offsetBottom}H158V${offsetTop}Z` }), + import_react351.default.createElement("path", { d: "M26 8H204.388", className: getClassName3("separator"), strokeLinecap: "square" }) ); }; var SidePanelRow2 = ({ offset }) => { - return import_react355.default.createElement( + return import_react351.default.createElement( "g", { transform: `translate(0, ${offset})`, className: getClassName3("secondary") }, - import_react355.default.createElement("path", { d: "M27 0H59V3H27V0Z" }), - import_react355.default.createElement("path", { d: "M75 0H107V3H75V0Z" }), - import_react355.default.createElement("path", { d: "M123 0H155V3H123V0Z" }), - import_react355.default.createElement("path", { d: "M171 0H203V3H171V0Z" }) + import_react351.default.createElement("path", { d: "M27 0H59V3H27V0Z" }), + import_react351.default.createElement("path", { d: "M75 0H107V3H75V0Z" }), + import_react351.default.createElement("path", { d: "M123 0H155V3H123V0Z" }), + import_react351.default.createElement("path", { d: "M171 0H203V3H171V0Z" }) ); }; -var bottomPositionIcon3 = import_react355.default.createElement( +var bottomPositionIcon3 = import_react351.default.createElement( "svg", { className: getClassName3("svg"), focusable: false, viewBox: "0 0 230 128", version: "1.1", xmlns: "http://www.w3.org/2000/svg", xmlnsXlink: "http://www.w3.org/1999/xlink", "aria-hidden": "true" }, - import_react355.default.createElement("path", { d: "M2 1H228C228.552 1 229 1.44772 229 2V117C229 117.552 228.552 118 228 118H2C1.44772 118 1 117.552 1 117V2C1 1.44772 1.44772 1 2 1Z", className: getClassName3("window"), strokeWidth: "2" }), - import_react355.default.createElement( + import_react351.default.createElement("path", { d: "M2 1H228C228.552 1 229 1.44772 229 2V117C229 117.552 228.552 118 228 118H2C1.44772 118 1 117.552 1 117V2C1 1.44772 1.44772 1 2 1Z", className: getClassName3("window"), strokeWidth: "2" }), + import_react351.default.createElement( "g", { className: "awsui-context-top-navigation" }, - import_react355.default.createElement("rect", { x: "2", y: "2", width: "226", height: "6", className: getClassName3("layout-top") }) + import_react351.default.createElement("rect", { x: "2", y: "2", width: "226", height: "6", className: getClassName3("layout-top") }) ), - import_react355.default.createElement( + import_react351.default.createElement( "g", null, - import_react355.default.createElement("path", { d: "M2 8H228V23H2V8Z", className: getClassName3("layout-main") }), - import_react355.default.createElement( + import_react351.default.createElement("path", { d: "M2 8H228V23H2V8Z", className: getClassName3("layout-main") }), + import_react351.default.createElement( "g", { className: getClassName3("default") }, - import_react355.default.createElement("path", { d: "M9 15.5C9 16.8807 7.88071 18 6.5 18C5.11929 18 4 16.8807 4 15.5C4 14.1193 5.11929 13 6.5 13C7.88071 13 9 14.1193 9 15.5Z", className: getClassName3("disabled") }), - import_react355.default.createElement("path", { d: "M26 14H56.1484V17H26V14Z" }), - import_react355.default.createElement("path", { d: "M139 15.5C139 13.567 140.567 12 142.5 12H155.86C157.793 12 159.36 13.567 159.36 15.5C159.36 17.433 157.793 19 155.86 19H142.5C140.567 19 139 17.433 139 15.5Z" }), - import_react355.default.createElement("path", { d: "M163 15.5C163 13.567 164.567 12 166.5 12H179.86C181.793 12 183.36 13.567 183.36 15.5C183.36 17.433 181.793 19 179.86 19H166.5C164.567 19 163 17.433 163 15.5Z" }), - import_react355.default.createElement("path", { d: "M186 15.5C186 13.567 187.567 12 189.5 12H202.86C204.793 12 206.36 13.567 206.36 15.5C206.36 17.433 204.793 19 202.86 19H189.5C187.567 19 186 17.433 186 15.5Z", className: getClassName3("primary") }), - import_react355.default.createElement("circle", { cx: "223.5", cy: "15.5", r: "2.5", className: getClassName3("disabled") }) + import_react351.default.createElement("path", { d: "M9 15.5C9 16.8807 7.88071 18 6.5 18C5.11929 18 4 16.8807 4 15.5C4 14.1193 5.11929 13 6.5 13C7.88071 13 9 14.1193 9 15.5Z", className: getClassName3("disabled") }), + import_react351.default.createElement("path", { d: "M26 14H56.1484V17H26V14Z" }), + import_react351.default.createElement("path", { d: "M139 15.5C139 13.567 140.567 12 142.5 12H155.86C157.793 12 159.36 13.567 159.36 15.5C159.36 17.433 157.793 19 155.86 19H142.5C140.567 19 139 17.433 139 15.5Z" }), + import_react351.default.createElement("path", { d: "M163 15.5C163 13.567 164.567 12 166.5 12H179.86C181.793 12 183.36 13.567 183.36 15.5C183.36 17.433 181.793 19 179.86 19H166.5C164.567 19 163 17.433 163 15.5Z" }), + import_react351.default.createElement("path", { d: "M186 15.5C186 13.567 187.567 12 189.5 12H202.86C204.793 12 206.36 13.567 206.36 15.5C206.36 17.433 204.793 19 202.86 19H189.5C187.567 19 186 17.433 186 15.5Z", className: getClassName3("primary") }), + import_react351.default.createElement("circle", { cx: "223.5", cy: "15.5", r: "2.5", className: getClassName3("disabled") }) ) ), - import_react355.default.createElement(TableRow2, { offset: 27, isHeader: true }), - import_react355.default.createElement(TableRow2, { offset: 39 }), - import_react355.default.createElement(TableRow2, { offset: 51 }), - import_react355.default.createElement(TableRow2, { offset: 63 }), - import_react355.default.createElement("rect", { x: "8", y: "75", width: "214", height: "52", rx: "5", className: getClassName3("window"), strokeWidth: "2" }), - import_react355.default.createElement("rect", { x: "111", y: "79", width: "8", height: "3", rx: "1.5", className: getClassName3("input-default") }), - import_react355.default.createElement("path", { d: "M27 87H57V92H27V87Z", className: getClassName3("heading") }), - import_react355.default.createElement( + import_react351.default.createElement(TableRow2, { offset: 27, isHeader: true }), + import_react351.default.createElement(TableRow2, { offset: 39 }), + import_react351.default.createElement(TableRow2, { offset: 51 }), + import_react351.default.createElement(TableRow2, { offset: 63 }), + import_react351.default.createElement("rect", { x: "8", y: "75", width: "214", height: "52", rx: "5", className: getClassName3("window"), strokeWidth: "2" }), + import_react351.default.createElement("rect", { x: "111", y: "79", width: "8", height: "3", rx: "1.5", className: getClassName3("input-default") }), + import_react351.default.createElement("path", { d: "M27 87H57V92H27V87Z", className: getClassName3("heading") }), + import_react351.default.createElement( "g", { className: getClassName3("secondary") }, - import_react355.default.createElement("path", { d: "M198 87H203V92H198V87Z" }), - import_react355.default.createElement("path", { d: "M190 87H195V92H190V87Z" }) + import_react351.default.createElement("path", { d: "M198 87H203V92H198V87Z" }), + import_react351.default.createElement("path", { d: "M190 87H195V92H190V87Z" }) ), - import_react355.default.createElement(SidePanelRow2, { offset: 99 }), - import_react355.default.createElement(SidePanelRow2, { offset: 106 }), - import_react355.default.createElement(SidePanelRow2, { offset: 113 }) + import_react351.default.createElement(SidePanelRow2, { offset: 99 }), + import_react351.default.createElement(SidePanelRow2, { offset: 106 }), + import_react351.default.createElement(SidePanelRow2, { offset: 113 }) ); var bottom_icon_refresh_default = bottomPositionIcon3; // node_modules/@cloudscape-design/components/split-panel/icons/side-position.js -var import_react356 = __toESM(require_react()); -var sidePositionIcon = import_react356.default.createElement( +var import_react352 = __toESM(require_react()); +var sidePositionIcon = import_react352.default.createElement( "svg", - { className: styles_css_default132["preference-icon--svg"], focusable: false, viewBox: "0 0 239 134", version: "1.1", xmlns: "http://www.w3.org/2000/svg", xmlnsXlink: "http://www.w3.org/1999/xlink", "aria-hidden": "true" }, - import_react356.default.createElement( + { className: styles_css_default131["preference-icon--svg"], focusable: false, viewBox: "0 0 239 134", version: "1.1", xmlns: "http://www.w3.org/2000/svg", xmlnsXlink: "http://www.w3.org/1999/xlink", "aria-hidden": "true" }, + import_react352.default.createElement( "g", { stroke: "none", strokeWidth: "1", fill: "none", fillRule: "evenodd" }, - import_react356.default.createElement( + import_react352.default.createElement( "g", null, - import_react356.default.createElement("rect", { className: styles_css_default132["preference-icon--layout-border"], strokeWidth: "2", x: "1", y: "1", width: "223", height: "125", rx: "2" }), - import_react356.default.createElement("rect", { className: styles_css_default132["preference-icon--layout-background"], x: "11.25", y: "0", width: "203.4375", height: "125" }), - import_react356.default.createElement("path", { className: styles_css_default132["preference-icon--layout-header"], d: "M2,0 L223,0 C224.104569,-2.02906125e-16 225,0.8954305 225,2 L225,10 L225,10 L0,10 L0,2 C-1.3527075e-16,0.8954305 0.8954305,2.02906125e-16 2,0 Z" }) + import_react352.default.createElement("rect", { className: styles_css_default131["preference-icon--layout-border"], strokeWidth: "2", x: "1", y: "1", width: "223", height: "125", rx: "2" }), + import_react352.default.createElement("rect", { className: styles_css_default131["preference-icon--layout-background"], x: "11.25", y: "0", width: "203.4375", height: "125" }), + import_react352.default.createElement("path", { className: styles_css_default131["preference-icon--layout-header"], d: "M2,0 L223,0 C224.104569,-2.02906125e-16 225,0.8954305 225,2 L225,10 L225,10 L0,10 L0,2 C-1.3527075e-16,0.8954305 0.8954305,2.02906125e-16 2,0 Z" }) ), - import_react356.default.createElement( + import_react352.default.createElement( "g", { transform: "translate(20.000000, 22.000000)" }, - import_react356.default.createElement("rect", { className: styles_css_default132["preference-icon--border"], strokeWidth: "2", x: "1", y: "1", width: "182", height: "110", rx: "2" }), - import_react356.default.createElement("rect", { className: styles_css_default132["preference-icon--primary-button"], x: "152", y: "6", width: "26", height: "10" }), - import_react356.default.createElement("rect", { className: styles_css_default132["preference-icon--disabled-element"], x: "122", y: "6", width: "26", height: "10" }), - import_react356.default.createElement("rect", { className: styles_css_default132["preference-icon--disabled-element"], x: "92", y: "6", width: "26", height: "10" }), - import_react356.default.createElement("rect", { className: styles_css_default132["preference-icon--disabled-element"], x: "122", y: "29", width: "55", height: "3" }), - import_react356.default.createElement("rect", { className: styles_css_default132["preference-icon--disabled-element"], x: "92", y: "29", width: "26", height: "3" }), - import_react356.default.createElement("polygon", { className: styles_css_default132["preference-icon--focus-text"], points: "19 29 49 29 49 32 19 32" }), - import_react356.default.createElement("polygon", { className: styles_css_default132["preference-icon--focus-text"], points: "10 10 40 10 40 13 10 13" }), - import_react356.default.createElement("polygon", { className: styles_css_default132["preference-icon--disabled-element"], points: "10 29 13 29 13 32 10 32" }), - import_react356.default.createElement("line", { className: styles_css_default132["preference-icon--separator"], x1: "3", y1: "22.7619048", x2: "181", y2: "22.7619048", strokeWidth: "2", strokeLinecap: "square" }), - import_react356.default.createElement( + import_react352.default.createElement("rect", { className: styles_css_default131["preference-icon--border"], strokeWidth: "2", x: "1", y: "1", width: "182", height: "110", rx: "2" }), + import_react352.default.createElement("rect", { className: styles_css_default131["preference-icon--primary-button"], x: "152", y: "6", width: "26", height: "10" }), + import_react352.default.createElement("rect", { className: styles_css_default131["preference-icon--disabled-element"], x: "122", y: "6", width: "26", height: "10" }), + import_react352.default.createElement("rect", { className: styles_css_default131["preference-icon--disabled-element"], x: "92", y: "6", width: "26", height: "10" }), + import_react352.default.createElement("rect", { className: styles_css_default131["preference-icon--disabled-element"], x: "122", y: "29", width: "55", height: "3" }), + import_react352.default.createElement("rect", { className: styles_css_default131["preference-icon--disabled-element"], x: "92", y: "29", width: "26", height: "3" }), + import_react352.default.createElement("polygon", { className: styles_css_default131["preference-icon--focus-text"], points: "19 29 49 29 49 32 19 32" }), + import_react352.default.createElement("polygon", { className: styles_css_default131["preference-icon--focus-text"], points: "10 10 40 10 40 13 10 13" }), + import_react352.default.createElement("polygon", { className: styles_css_default131["preference-icon--disabled-element"], points: "10 29 13 29 13 32 10 32" }), + import_react352.default.createElement("line", { className: styles_css_default131["preference-icon--separator"], x1: "3", y1: "22.7619048", x2: "181", y2: "22.7619048", strokeWidth: "2", strokeLinecap: "square" }), + import_react352.default.createElement( "g", { transform: "translate(3.000000, 37.285714)" }, - import_react356.default.createElement("rect", { className: styles_css_default132["preference-icon--disabled-element"], x: "119", y: "6", width: "55", height: "3" }), - import_react356.default.createElement("rect", { className: styles_css_default132["preference-icon--disabled-element"], x: "89", y: "6", width: "26", height: "3" }), - import_react356.default.createElement("polygon", { className: styles_css_default132["preference-icon--focus-text"], points: "16 6 46 6 46 9 16 9" }), - import_react356.default.createElement("polygon", { className: styles_css_default132["preference-icon--disabled-element"], points: "7 6 10 6 10 9 7 9" }), - import_react356.default.createElement("line", { className: styles_css_default132["preference-icon--separator"], x1: "0", y1: "0.666666667", x2: "178", y2: "0.666666667", strokeLinecap: "square" }) + import_react352.default.createElement("rect", { className: styles_css_default131["preference-icon--disabled-element"], x: "119", y: "6", width: "55", height: "3" }), + import_react352.default.createElement("rect", { className: styles_css_default131["preference-icon--disabled-element"], x: "89", y: "6", width: "26", height: "3" }), + import_react352.default.createElement("polygon", { className: styles_css_default131["preference-icon--focus-text"], points: "16 6 46 6 46 9 16 9" }), + import_react352.default.createElement("polygon", { className: styles_css_default131["preference-icon--disabled-element"], points: "7 6 10 6 10 9 7 9" }), + import_react352.default.createElement("line", { className: styles_css_default131["preference-icon--separator"], x1: "0", y1: "0.666666667", x2: "178", y2: "0.666666667", strokeLinecap: "square" }) ), - import_react356.default.createElement( + import_react352.default.createElement( "g", { transform: "translate(3.000000, 51.714286)" }, - import_react356.default.createElement("rect", { className: styles_css_default132["preference-icon--disabled-element"], x: "119", y: "6", width: "55", height: "3" }), - import_react356.default.createElement("rect", { className: styles_css_default132["preference-icon--disabled-element"], x: "89", y: "6", width: "26", height: "3" }), - import_react356.default.createElement("polygon", { className: styles_css_default132["preference-icon--focus-text"], points: "16 6 46 6 46 9 16 9" }), - import_react356.default.createElement("polygon", { className: styles_css_default132["preference-icon--disabled-element"], points: "7 6 10 6 10 9 7 9" }), - import_react356.default.createElement("line", { className: styles_css_default132["preference-icon--separator"], x1: "0", y1: "0.666666667", x2: "178", y2: "0.666666667", strokeLinecap: "square" }) + import_react352.default.createElement("rect", { className: styles_css_default131["preference-icon--disabled-element"], x: "119", y: "6", width: "55", height: "3" }), + import_react352.default.createElement("rect", { className: styles_css_default131["preference-icon--disabled-element"], x: "89", y: "6", width: "26", height: "3" }), + import_react352.default.createElement("polygon", { className: styles_css_default131["preference-icon--focus-text"], points: "16 6 46 6 46 9 16 9" }), + import_react352.default.createElement("polygon", { className: styles_css_default131["preference-icon--disabled-element"], points: "7 6 10 6 10 9 7 9" }), + import_react352.default.createElement("line", { className: styles_css_default131["preference-icon--separator"], x1: "0", y1: "0.666666667", x2: "178", y2: "0.666666667", strokeLinecap: "square" }) ), - import_react356.default.createElement( + import_react352.default.createElement( "g", { transform: "translate(3.000000, 80.571429)" }, - import_react356.default.createElement("rect", { className: styles_css_default132["preference-icon--disabled-element"], x: "119", y: "6", width: "55", height: "3" }), - import_react356.default.createElement("rect", { className: styles_css_default132["preference-icon--disabled-element"], x: "89", y: "6", width: "26", height: "3" }), - import_react356.default.createElement("polygon", { className: styles_css_default132["preference-icon--focus-text"], points: "16 6 46 6 46 9 16 9" }), - import_react356.default.createElement("polygon", { className: styles_css_default132["preference-icon--disabled-element"], points: "7 6 10 6 10 9 7 9" }), - import_react356.default.createElement("line", { className: styles_css_default132["preference-icon--separator"], x1: "0", y1: "0.666666667", x2: "178", y2: "0.666666667", strokeLinecap: "square" }) + import_react352.default.createElement("rect", { className: styles_css_default131["preference-icon--disabled-element"], x: "119", y: "6", width: "55", height: "3" }), + import_react352.default.createElement("rect", { className: styles_css_default131["preference-icon--disabled-element"], x: "89", y: "6", width: "26", height: "3" }), + import_react352.default.createElement("polygon", { className: styles_css_default131["preference-icon--focus-text"], points: "16 6 46 6 46 9 16 9" }), + import_react352.default.createElement("polygon", { className: styles_css_default131["preference-icon--disabled-element"], points: "7 6 10 6 10 9 7 9" }), + import_react352.default.createElement("line", { className: styles_css_default131["preference-icon--separator"], x1: "0", y1: "0.666666667", x2: "178", y2: "0.666666667", strokeLinecap: "square" }) ), - import_react356.default.createElement( + import_react352.default.createElement( "g", { transform: "translate(3.000000, 66.142857)" }, - import_react356.default.createElement("rect", { className: styles_css_default132["preference-icon--disabled-element"], x: "119", y: "6", width: "55", height: "3" }), - import_react356.default.createElement("rect", { className: styles_css_default132["preference-icon--disabled-element"], x: "89", y: "6", width: "26", height: "3" }), - import_react356.default.createElement("polygon", { className: styles_css_default132["preference-icon--focus-text"], points: "16 6 46 6 46 9 16 9" }), - import_react356.default.createElement("polygon", { className: styles_css_default132["preference-icon--disabled-element"], points: "7 6 10 6 10 9 7 9" }), - import_react356.default.createElement("line", { className: styles_css_default132["preference-icon--separator"], x1: "0", y1: "0.666666667", x2: "178", y2: "0.666666667", strokeLinecap: "square" }) + import_react352.default.createElement("rect", { className: styles_css_default131["preference-icon--disabled-element"], x: "119", y: "6", width: "55", height: "3" }), + import_react352.default.createElement("rect", { className: styles_css_default131["preference-icon--disabled-element"], x: "89", y: "6", width: "26", height: "3" }), + import_react352.default.createElement("polygon", { className: styles_css_default131["preference-icon--focus-text"], points: "16 6 46 6 46 9 16 9" }), + import_react352.default.createElement("polygon", { className: styles_css_default131["preference-icon--disabled-element"], points: "7 6 10 6 10 9 7 9" }), + import_react352.default.createElement("line", { className: styles_css_default131["preference-icon--separator"], x1: "0", y1: "0.666666667", x2: "178", y2: "0.666666667", strokeLinecap: "square" }) ), - import_react356.default.createElement( + import_react352.default.createElement( "g", { transform: "translate(3.000000, 95.000000)" }, - import_react356.default.createElement("rect", { className: styles_css_default132["preference-icon--disabled-element"], x: "119", y: "6", width: "55", height: "3" }), - import_react356.default.createElement("rect", { className: styles_css_default132["preference-icon--disabled-element"], x: "89", y: "6", width: "26", height: "3" }), - import_react356.default.createElement("polygon", { className: styles_css_default132["preference-icon--focus-text"], points: "16 6 46 6 46 9 16 9" }), - import_react356.default.createElement("polygon", { className: styles_css_default132["preference-icon--disabled-element"], points: "7 6 10 6 10 9 7 9" }), - import_react356.default.createElement("line", { className: styles_css_default132["preference-icon--separator"], x1: "0", y1: "0.666666667", x2: "178", y2: "0.666666667", strokeLinecap: "square" }) + import_react352.default.createElement("rect", { className: styles_css_default131["preference-icon--disabled-element"], x: "119", y: "6", width: "55", height: "3" }), + import_react352.default.createElement("rect", { className: styles_css_default131["preference-icon--disabled-element"], x: "89", y: "6", width: "26", height: "3" }), + import_react352.default.createElement("polygon", { className: styles_css_default131["preference-icon--focus-text"], points: "16 6 46 6 46 9 16 9" }), + import_react352.default.createElement("polygon", { className: styles_css_default131["preference-icon--disabled-element"], points: "7 6 10 6 10 9 7 9" }), + import_react352.default.createElement("line", { className: styles_css_default131["preference-icon--separator"], x1: "0", y1: "0.666666667", x2: "178", y2: "0.666666667", strokeLinecap: "square" }) ) ), - import_react356.default.createElement( + import_react352.default.createElement( "g", { transform: "translate(182.000000, 28.000000)" }, - import_react356.default.createElement( + import_react352.default.createElement( "g", null, - import_react356.default.createElement("rect", { className: styles_css_default132["preference-icon--border"], strokeWidth: "2", x: "1", y: "1", width: "55", height: "97", rx: "2" }), - import_react356.default.createElement("rect", { className: styles_css_default132["preference-icon--secondary"], x: "39.5474354", y: "5.86666667", width: "14", height: "6.41666667" }), - import_react356.default.createElement("polygon", { className: styles_css_default132["preference-icon--focus-text"], points: "3.62672811 7.88333333 24.6267281 7.88333333 24.6267281 10.6333333 3.62672811 10.6333333" }) + import_react352.default.createElement("rect", { className: styles_css_default131["preference-icon--border"], strokeWidth: "2", x: "1", y: "1", width: "55", height: "97", rx: "2" }), + import_react352.default.createElement("rect", { className: styles_css_default131["preference-icon--secondary"], x: "39.5474354", y: "5.86666667", width: "14", height: "6.41666667" }), + import_react352.default.createElement("polygon", { className: styles_css_default131["preference-icon--focus-text"], points: "3.62672811 7.88333333 24.6267281 7.88333333 24.6267281 10.6333333 3.62672811 10.6333333" }) ), - import_react356.default.createElement( + import_react352.default.createElement( "g", - { transform: "translate(4.000000, 22.000000)", className: styles_css_default132["preference-icon--secondary"] }, - import_react356.default.createElement("polygon", { points: "0 0 23 0 23 2 0 2" }), - import_react356.default.createElement("polygon", { points: "26 0 49 0 49 2 26 2" }) + { transform: "translate(4.000000, 22.000000)", className: styles_css_default131["preference-icon--secondary"] }, + import_react352.default.createElement("polygon", { points: "0 0 23 0 23 2 0 2" }), + import_react352.default.createElement("polygon", { points: "26 0 49 0 49 2 26 2" }) ), - import_react356.default.createElement( + import_react352.default.createElement( "g", - { transform: "translate(4.000000, 32.000000)", className: styles_css_default132["preference-icon--secondary"] }, - import_react356.default.createElement("polygon", { points: "0 0 23 0 23 2 0 2" }), - import_react356.default.createElement("polygon", { points: "26 0 49 0 49 2 26 2" }) + { transform: "translate(4.000000, 32.000000)", className: styles_css_default131["preference-icon--secondary"] }, + import_react352.default.createElement("polygon", { points: "0 0 23 0 23 2 0 2" }), + import_react352.default.createElement("polygon", { points: "26 0 49 0 49 2 26 2" }) ), - import_react356.default.createElement( + import_react352.default.createElement( "g", - { transform: "translate(4.000000, 43.000000)", className: styles_css_default132["preference-icon--secondary"] }, - import_react356.default.createElement("polygon", { points: "0 0 23 0 23 2 0 2" }), - import_react356.default.createElement("polygon", { points: "26 0 49 0 49 2 26 2" }) + { transform: "translate(4.000000, 43.000000)", className: styles_css_default131["preference-icon--secondary"] }, + import_react352.default.createElement("polygon", { points: "0 0 23 0 23 2 0 2" }), + import_react352.default.createElement("polygon", { points: "26 0 49 0 49 2 26 2" }) ), - import_react356.default.createElement( + import_react352.default.createElement( "g", - { transform: "translate(4.000000, 51.000000)", className: styles_css_default132["preference-icon--secondary"] }, - import_react356.default.createElement("polygon", { points: "0 0 23 0 23 2 0 2" }), - import_react356.default.createElement("polygon", { points: "26 0 49 0 49 2 26 2" }) + { transform: "translate(4.000000, 51.000000)", className: styles_css_default131["preference-icon--secondary"] }, + import_react352.default.createElement("polygon", { points: "0 0 23 0 23 2 0 2" }), + import_react352.default.createElement("polygon", { points: "26 0 49 0 49 2 26 2" }) ) ) ) @@ -40099,7 +39762,7 @@ var side_position_default = sidePositionIcon; // node_modules/@cloudscape-design/components/split-panel/preferences-modal.js var preferences_modal_default2 = (props) => { - const [position, setPosition] = (0, import_react357.useState)(props.preferences.position); + const [position, setPosition] = (0, import_react353.useState)(props.preferences.position); const onCancel = () => { setPosition(props.preferences.position); props.onDismiss(); @@ -40107,22 +39770,22 @@ var preferences_modal_default2 = (props) => { const onConfirm = () => { props.onConfirm({ position }); }; - return import_react357.default.createElement( + return import_react353.default.createElement( InternalModal, - { size: "medium", visible: props.visible, onDismiss: props.onDismiss, header: props.i18nStrings.header, closeAriaLabel: props.i18nStrings.cancel, footer: import_react357.default.createElement( + { size: "medium", visible: props.visible, onDismiss: props.onDismiss, header: props.i18nStrings.header, closeAriaLabel: props.i18nStrings.cancel, footer: import_react353.default.createElement( InternalBox, { float: "right" }, - import_react357.default.createElement( + import_react353.default.createElement( internal_default5, { direction: "horizontal", size: "xs" }, - import_react357.default.createElement(InternalButton, { onClick: onCancel, formAction: "none", variant: "link" }, props.i18nStrings.cancel), - import_react357.default.createElement(InternalButton, { onClick: onConfirm, variant: "primary" }, props.i18nStrings.confirm) + import_react353.default.createElement(InternalButton, { onClick: onCancel, formAction: "none", variant: "link" }, props.i18nStrings.cancel), + import_react353.default.createElement(InternalButton, { onClick: onConfirm, variant: "primary" }, props.i18nStrings.confirm) ) ), __internalRootRef: props.__internalRootRef }, - import_react357.default.createElement( + import_react353.default.createElement( InternalFormField, { label: props.i18nStrings.positionLabel, description: props.i18nStrings.positionDescription }, - import_react357.default.createElement(internal_default28, { onChange: (e3) => setPosition(e3.detail.value), value: position, columns: 2, items: [ + import_react353.default.createElement(internal_default28, { onChange: (e3) => setPosition(e3.detail.value), value: position, columns: 2, items: [ { label: props.i18nStrings.positionBottom, image: props.isRefresh ? bottom_icon_refresh_default : bottom_icon_default, @@ -40140,28 +39803,28 @@ var preferences_modal_default2 = (props) => { }; // node_modules/@cloudscape-design/components/split-panel/side.js -var import_react358 = __toESM(require_react()); +var import_react354 = __toESM(require_react()); function SplitPanelContentSide({ style, baseProps, splitPanelRef, toggleRef, header, children, resizeHandle, isOpen, cappedSize, openButtonAriaLabel, panelHeaderId, onToggle }) { const { topOffset, bottomOffset, animationDisabled } = useSplitPanelContext(); const isRefresh = useVisualRefresh(); const isToolbar = useAppLayoutToolbarEnabled(); - return import_react358.default.createElement( + return import_react354.default.createElement( "div", - Object.assign({}, baseProps, { className: clsx_m_default(baseProps.className, styles_css_default129.drawer, styles_css_default129["position-side"], styles_css_default24.root, { + Object.assign({}, baseProps, { className: clsx_m_default(baseProps.className, styles_css_default128.drawer, styles_css_default128["position-side"], styles_css_default24.root, { [styles_css_default18["with-motion-horizontal"]]: !animationDisabled, [styles_css_default24["open-position-side"]]: isOpen, - [styles_css_default129["drawer-closed"]]: !isOpen, - [styles_css_default129["with-toolbar"]]: isToolbar, - [styles_css_default129.refresh]: isRefresh + [styles_css_default128["drawer-closed"]]: !isOpen, + [styles_css_default128["with-toolbar"]]: isToolbar, + [styles_css_default128.refresh]: isRefresh }), style: Object.assign({ width: isOpen ? cappedSize : isRefresh ? "0px" : void 0, maxWidth: isRefresh ? "100%" : void 0 }, style), ref: splitPanelRef }), - import_react358.default.createElement( + import_react354.default.createElement( "div", - { className: styles_css_default129["drawer-content-side"], style: { + { className: styles_css_default128["drawer-content-side"], style: { top: topOffset, bottom: bottomOffset }, onClick: () => !isOpen && onToggle(), "aria-labelledby": panelHeaderId, role: "region" }, - isOpen ? import_react358.default.createElement("div", { className: clsx_m_default(styles_css_default129["slider-wrapper-side"], isToolbar && styles_css_default129["with-toolbar"]) }, resizeHandle) : import_react358.default.createElement(internal_default3, { - className: clsx_m_default(styles_css_default24["open-button"], styles_css_default129["open-button-side"]), + isOpen ? import_react354.default.createElement("div", { className: clsx_m_default(styles_css_default128["slider-wrapper-side"], isToolbar && styles_css_default128["with-toolbar"]) }, resizeHandle) : import_react354.default.createElement(internal_default3, { + className: clsx_m_default(styles_css_default24["open-button"], styles_css_default128["open-button-side"]), iconName: "angle-left", variant: "icon", formAction: "none", @@ -40170,11 +39833,11 @@ function SplitPanelContentSide({ style, baseProps, splitPanelRef, toggleRef, hea //toggleRef should only be assigned when there is no other trigger-buttons ref: isRefresh || isToolbar ? null : toggleRef }), - import_react358.default.createElement( + import_react354.default.createElement( "div", - { className: clsx_m_default(styles_css_default129["content-side"], isToolbar && styles_css_default129["with-toolbar"]), "aria-hidden": !isOpen, style: { width: isToolbar ? cappedSize : "0px" } }, - import_react358.default.createElement("div", { className: styles_css_default129["pane-header-wrapper-side"] }, header), - import_react358.default.createElement("div", { className: styles_css_default129["pane-content-wrapper-side"] }, children) + { className: clsx_m_default(styles_css_default128["content-side"], isToolbar && styles_css_default128["with-toolbar"]), "aria-hidden": !isOpen, style: { width: isToolbar ? cappedSize : "0px" } }, + import_react354.default.createElement("div", { className: styles_css_default128["pane-header-wrapper-side"] }, header), + import_react354.default.createElement("div", { className: styles_css_default128["pane-content-wrapper-side"] }, children) ) ) ); @@ -40187,16 +39850,16 @@ function SplitPanelImplementation(_a) { const isToolbar = useAppLayoutToolbarEnabled(); const { position, topOffset, bottomOffset, rightOffset, contentWidthStyles, isOpen, isForcedPosition, onPreferencesChange, onResize, onToggle, size, relativeSize, setSplitPanelToggle, refs } = useSplitPanelContext(); const baseProps = getBaseProps(restProps); - const [isPreferencesOpen, setPreferencesOpen] = (0, import_react359.useState)(false); + const [isPreferencesOpen, setPreferencesOpen] = (0, import_react355.useState)(false); const appLayoutMaxWidth = isRefresh && position === "bottom" ? contentWidthStyles : void 0; const openButtonAriaLabel = i18nStrings.openButtonAriaLabel; - (0, import_react359.useEffect)(() => { + (0, import_react355.useEffect)(() => { setSplitPanelToggle({ displayed: closeBehavior === "collapse", ariaLabel: openButtonAriaLabel }); return () => { setSplitPanelToggle({ displayed: false, ariaLabel: void 0 }); }; }, [setSplitPanelToggle, openButtonAriaLabel, closeBehavior]); - const splitPanelRefObject = (0, import_react359.useRef)(null); + const splitPanelRefObject = (0, import_react355.useRef)(null); const sizeControlProps = { position, panelRef: splitPanelRefObject, @@ -40210,23 +39873,23 @@ function SplitPanelImplementation(_a) { [global_vars_default.stickyVerticalBottomOffset]: bottomOffset }; const panelHeaderId = useUniqueId("split-panel-header"); - const wrappedHeader = import_react359.default.createElement( + const wrappedHeader = import_react355.default.createElement( "div", - { className: clsx_m_default(styles_css_default129.header, isToolbar && styles_css_default129["with-toolbar"]), style: appLayoutMaxWidth }, - import_react359.default.createElement("h2", { className: clsx_m_default(styles_css_default129["header-text"], styles_css_default24["header-text"]), id: panelHeaderId }, header), - import_react359.default.createElement( + { className: clsx_m_default(styles_css_default128.header, isToolbar && styles_css_default128["with-toolbar"]), style: appLayoutMaxWidth }, + import_react355.default.createElement("h2", { className: clsx_m_default(styles_css_default128["header-text"], styles_css_default24["header-text"]), id: panelHeaderId }, header), + import_react355.default.createElement( "div", - { className: styles_css_default129["header-actions"] }, - !hidePreferencesButton && isOpen && import_react359.default.createElement( - import_react359.default.Fragment, + { className: styles_css_default128["header-actions"] }, + !hidePreferencesButton && isOpen && import_react355.default.createElement( + import_react355.default.Fragment, null, - import_react359.default.createElement(InternalButton, { className: styles_css_default24["preferences-button"], iconName: "settings", variant: "icon", onClick: () => setPreferencesOpen(true), formAction: "none", ariaLabel: i18nStrings.preferencesTitle, ref: refs.preferences }), - import_react359.default.createElement("span", { className: styles_css_default129.divider }) + import_react355.default.createElement(InternalButton, { className: styles_css_default24["preferences-button"], iconName: "settings", variant: "icon", onClick: () => setPreferencesOpen(true), formAction: "none", ariaLabel: i18nStrings.preferencesTitle, ref: refs.preferences }), + import_react355.default.createElement("span", { className: styles_css_default128.divider }) ), - isOpen ? import_react359.default.createElement(InternalButton, { className: styles_css_default24["close-button"], iconName: isRefresh && closeBehavior === "collapse" ? position === "side" ? "angle-right" : "angle-down" : "close", variant: "icon", onClick: onToggle, formAction: "none", ariaLabel: i18nStrings.closeButtonAriaLabel, ariaExpanded: isOpen }) : position === "side" ? null : import_react359.default.createElement(InternalButton, { className: styles_css_default24["open-button"], iconName: "angle-up", variant: "icon", formAction: "none", ariaLabel: i18nStrings.openButtonAriaLabel, ref: refs.toggle, ariaExpanded: isOpen }) + isOpen ? import_react355.default.createElement(InternalButton, { className: styles_css_default24["close-button"], iconName: isRefresh && closeBehavior === "collapse" ? position === "side" ? "angle-right" : "angle-down" : "close", variant: "icon", onClick: onToggle, formAction: "none", ariaLabel: i18nStrings.closeButtonAriaLabel, ariaExpanded: isOpen }) : position === "side" ? null : import_react355.default.createElement(InternalButton, { className: styles_css_default24["open-button"], iconName: "angle-up", variant: "icon", formAction: "none", ariaLabel: i18nStrings.openButtonAriaLabel, ref: refs.toggle, ariaExpanded: isOpen }) ) ); - const resizeHandle = import_react359.default.createElement(panel_resize_handle_default, { + const resizeHandle = import_react355.default.createElement(panel_resize_handle_default, { ref: refs.slider, className: styles_css_default24.slider, ariaLabel: i18nStrings.resizeHandleAriaLabel, @@ -40238,7 +39901,7 @@ function SplitPanelImplementation(_a) { onKeyDown: onKeyDown2, onPointerDown: onSliderPointerDown }); - (0, import_react359.useLayoutEffect)(() => { + (0, import_react355.useLayoutEffect)(() => { const root = splitPanelRefObject.current; if (root) { const property = "transform"; @@ -40251,17 +39914,17 @@ function SplitPanelImplementation(_a) { }, [rightOffset, __internalRootRef]); const mergedRef = useMergeRefs(splitPanelRefObject, __internalRootRef); if (closeBehavior === "hide" && !isOpen) { - return import_react359.default.createElement(import_react359.default.Fragment, null); + return import_react355.default.createElement(import_react355.default.Fragment, null); } if (isRefresh && !isToolbar && !isOpen && position === "side") { - return import_react359.default.createElement(import_react359.default.Fragment, null); + return import_react355.default.createElement(import_react355.default.Fragment, null); } - return import_react359.default.createElement( - import_react359.default.Fragment, + return import_react355.default.createElement( + import_react355.default.Fragment, null, - position === "side" && import_react359.default.createElement(SplitPanelContentSide, { style: contentStyle, resizeHandle, baseProps, isOpen, splitPanelRef: mergedRef, cappedSize: size, onToggle, openButtonAriaLabel, toggleRef: refs.toggle, header: wrappedHeader, panelHeaderId }, children), - position === "bottom" && import_react359.default.createElement(SplitPanelContentBottom, { style: contentStyle, resizeHandle, baseProps, isOpen, splitPanelRef: mergedRef, cappedSize: size, onToggle, header: wrappedHeader, panelHeaderId, appLayoutMaxWidth }, children), - isPreferencesOpen && import_react359.default.createElement(preferences_modal_default2, { visible: true, preferences: { position }, disabledSidePosition: position === "bottom" && isForcedPosition, isRefresh, i18nStrings: { + position === "side" && import_react355.default.createElement(SplitPanelContentSide, { style: contentStyle, resizeHandle, baseProps, isOpen, splitPanelRef: mergedRef, cappedSize: size, onToggle, openButtonAriaLabel, toggleRef: refs.toggle, header: wrappedHeader, panelHeaderId }, children), + position === "bottom" && import_react355.default.createElement(SplitPanelContentBottom, { style: contentStyle, resizeHandle, baseProps, isOpen, splitPanelRef: mergedRef, cappedSize: size, onToggle, header: wrappedHeader, panelHeaderId, appLayoutMaxWidth }, children), + isPreferencesOpen && import_react355.default.createElement(preferences_modal_default2, { visible: true, preferences: { position }, disabledSidePosition: position === "bottom" && isForcedPosition, isRefresh, i18nStrings: { header: i18nStrings.preferencesTitle, confirm: i18nStrings.preferencesConfirm, cancel: i18nStrings.preferencesCancel, @@ -40289,30 +39952,30 @@ function SplitPanel2(_a) { props: { closeBehavior, hidePreferencesButton } }); const i18n = useInternalI18n("split-panel"); - return import_react360.default.createElement(SplitPanelInternal, Object.assign({}, restProps, { __internalRootRef, hidePreferencesButton, closeBehavior, i18nStrings: Object.assign(Object.assign({}, i18nStrings), { closeButtonAriaLabel: i18n("i18nStrings.closeButtonAriaLabel", i18nStrings === null || i18nStrings === void 0 ? void 0 : i18nStrings.closeButtonAriaLabel), openButtonAriaLabel: i18n("i18nStrings.openButtonAriaLabel", i18nStrings === null || i18nStrings === void 0 ? void 0 : i18nStrings.openButtonAriaLabel), resizeHandleAriaLabel: i18n("i18nStrings.resizeHandleAriaLabel", i18nStrings === null || i18nStrings === void 0 ? void 0 : i18nStrings.resizeHandleAriaLabel), preferencesTitle: i18n("i18nStrings.preferencesTitle", i18nStrings === null || i18nStrings === void 0 ? void 0 : i18nStrings.preferencesTitle), preferencesConfirm: i18n("i18nStrings.preferencesConfirm", i18nStrings === null || i18nStrings === void 0 ? void 0 : i18nStrings.preferencesConfirm), preferencesCancel: i18n("i18nStrings.preferencesCancel", i18nStrings === null || i18nStrings === void 0 ? void 0 : i18nStrings.preferencesCancel), preferencesPositionLabel: i18n("i18nStrings.preferencesPositionLabel", i18nStrings === null || i18nStrings === void 0 ? void 0 : i18nStrings.preferencesPositionLabel), preferencesPositionDescription: i18n("i18nStrings.preferencesPositionDescription", i18nStrings === null || i18nStrings === void 0 ? void 0 : i18nStrings.preferencesPositionDescription), preferencesPositionBottom: i18n("i18nStrings.preferencesPositionBottom", i18nStrings === null || i18nStrings === void 0 ? void 0 : i18nStrings.preferencesPositionBottom), preferencesPositionSide: i18n("i18nStrings.preferencesPositionSide", i18nStrings === null || i18nStrings === void 0 ? void 0 : i18nStrings.preferencesPositionSide) }) })); + return import_react356.default.createElement(SplitPanelInternal, Object.assign({}, restProps, { __internalRootRef, hidePreferencesButton, closeBehavior, i18nStrings: Object.assign(Object.assign({}, i18nStrings), { closeButtonAriaLabel: i18n("i18nStrings.closeButtonAriaLabel", i18nStrings === null || i18nStrings === void 0 ? void 0 : i18nStrings.closeButtonAriaLabel), openButtonAriaLabel: i18n("i18nStrings.openButtonAriaLabel", i18nStrings === null || i18nStrings === void 0 ? void 0 : i18nStrings.openButtonAriaLabel), resizeHandleAriaLabel: i18n("i18nStrings.resizeHandleAriaLabel", i18nStrings === null || i18nStrings === void 0 ? void 0 : i18nStrings.resizeHandleAriaLabel), preferencesTitle: i18n("i18nStrings.preferencesTitle", i18nStrings === null || i18nStrings === void 0 ? void 0 : i18nStrings.preferencesTitle), preferencesConfirm: i18n("i18nStrings.preferencesConfirm", i18nStrings === null || i18nStrings === void 0 ? void 0 : i18nStrings.preferencesConfirm), preferencesCancel: i18n("i18nStrings.preferencesCancel", i18nStrings === null || i18nStrings === void 0 ? void 0 : i18nStrings.preferencesCancel), preferencesPositionLabel: i18n("i18nStrings.preferencesPositionLabel", i18nStrings === null || i18nStrings === void 0 ? void 0 : i18nStrings.preferencesPositionLabel), preferencesPositionDescription: i18n("i18nStrings.preferencesPositionDescription", i18nStrings === null || i18nStrings === void 0 ? void 0 : i18nStrings.preferencesPositionDescription), preferencesPositionBottom: i18n("i18nStrings.preferencesPositionBottom", i18nStrings === null || i18nStrings === void 0 ? void 0 : i18nStrings.preferencesPositionBottom), preferencesPositionSide: i18n("i18nStrings.preferencesPositionSide", i18nStrings === null || i18nStrings === void 0 ? void 0 : i18nStrings.preferencesPositionSide) }) })); } applyDisplayName(SplitPanel2, "SplitPanel"); // node_modules/@cloudscape-design/components/status-indicator/index.js -var import_react361 = __toESM(require_react()); +var import_react357 = __toESM(require_react()); function StatusIndicator2(_a) { var { type = "success", wrapText = true } = _a, props = __rest(_a, ["type", "wrapText"]); const baseComponentProps = useBaseComponent("StatusIndicator", { props: { colorOverride: props.colorOverride, type, wrapText } }); - return import_react361.default.createElement(StatusIndicator, Object.assign({ type, wrapText }, props, baseComponentProps)); + return import_react357.default.createElement(StatusIndicator, Object.assign({ type, wrapText }, props, baseComponentProps)); } applyDisplayName(StatusIndicator2, "StatusIndicator"); // node_modules/@cloudscape-design/components/steps/index.js -var import_react363 = __toESM(require_react()); +var import_react359 = __toESM(require_react()); // node_modules/@cloudscape-design/components/steps/internal.js -var import_react362 = __toESM(require_react()); +var import_react358 = __toESM(require_react()); // node_modules/@cloudscape-design/components/steps/styles.css.js import "/home/a171157/personal-repos/deep-racer/community-contributions/deepracer-custom-console/new/node_modules/@cloudscape-design/components/steps/styles.scoped.css"; -var styles_css_default133 = { +var styles_css_default132 = { "root": "awsui_root_gxp9y_1cboa_181", "list": "awsui_list_gxp9y_1cboa_212", "container": "awsui_container_gxp9y_1cboa_217", @@ -40323,24 +39986,24 @@ var styles_css_default133 = { // node_modules/@cloudscape-design/components/steps/internal.js var InternalStep = ({ status, statusIconAriaLabel, header, details }) => { - return import_react362.default.createElement( + return import_react358.default.createElement( "li", - { className: styles_css_default133.container }, - import_react362.default.createElement( + { className: styles_css_default132.container }, + import_react358.default.createElement( "div", - { className: styles_css_default133.header }, - import_react362.default.createElement(StatusIndicator, { type: status, iconAriaLabel: statusIconAriaLabel }, header) + { className: styles_css_default132.header }, + import_react358.default.createElement(StatusIndicator, { type: status, iconAriaLabel: statusIconAriaLabel }, header) ), - import_react362.default.createElement("hr", { className: styles_css_default133.connector, role: "none" }), - details && import_react362.default.createElement("div", { className: styles_css_default133.details }, details) + import_react358.default.createElement("hr", { className: styles_css_default132.connector, role: "none" }), + details && import_react358.default.createElement("div", { className: styles_css_default132.details }, details) ); }; var InternalSteps = (_a) => { var { steps, ariaLabel, ariaLabelledby, ariaDescribedby, __internalRootRef } = _a, props = __rest(_a, ["steps", "ariaLabel", "ariaLabelledby", "ariaDescribedby", "__internalRootRef"]); - return import_react362.default.createElement( + return import_react358.default.createElement( "div", - Object.assign({}, props, { className: clsx_m_default(styles_css_default133.root, props.className), ref: __internalRootRef }), - import_react362.default.createElement("ol", { className: styles_css_default133.list, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledby, "aria-describedby": ariaDescribedby }, steps.map((step, index) => import_react362.default.createElement(InternalStep, { key: index, status: step.status, statusIconAriaLabel: step.statusIconAriaLabel, header: step.header, details: step.details }))) + Object.assign({}, props, { className: clsx_m_default(styles_css_default132.root, props.className), ref: __internalRootRef }), + import_react358.default.createElement("ol", { className: styles_css_default132.list, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledby, "aria-describedby": ariaDescribedby }, steps.map((step, index) => import_react358.default.createElement(InternalStep, { key: index, status: step.status, statusIconAriaLabel: step.statusIconAriaLabel, header: step.header, details: step.details }))) ); }; var internal_default29 = InternalSteps; @@ -40351,14 +40014,14 @@ var Steps = (_a) => { const baseProps = getBaseProps(props); const baseComponentProps = useBaseComponent("Steps"); const externalProps = getExternalProps(props); - return import_react363.default.createElement(internal_default29, Object.assign({}, baseProps, baseComponentProps, externalProps, { steps })); + return import_react359.default.createElement(internal_default29, Object.assign({}, baseProps, baseComponentProps, externalProps, { steps })); }; applyDisplayName(Steps, "Steps"); var steps_default = Steps; // node_modules/@cloudscape-design/components/table/index.js -var import_react364 = __toESM(require_react()); -var Table = import_react364.default.forwardRef((_a, ref) => { +var import_react360 = __toESM(require_react()); +var Table = import_react360.default.forwardRef((_a, ref) => { var _b, _c, _d; var { items = [], selectedItems = [], variant = "container", contentDensity = "comfortable", firstIndex = 1 } = _a, props = __rest(_a, ["items", "selectedItems", "variant", "contentDensity", "firstIndex"]); const analyticsMetadata = getAnalyticsMetadataProps(props); @@ -40424,19 +40087,19 @@ var Table = import_react364.default.forwardRef((_a, ref) => { tableHasStickyColumns: hasStickyColumns }; if (variant === "borderless" || variant === "embedded") { - return import_react364.default.createElement( + return import_react360.default.createElement( CollectionPreferencesMetadata.Provider, { value: collectionPreferencesMetadata }, - import_react364.default.createElement(internal_default27, Object.assign({}, tableProps)) + import_react360.default.createElement(internal_default27, Object.assign({}, tableProps)) ); } - return import_react364.default.createElement( + return import_react360.default.createElement( CollectionPreferencesMetadata.Provider, { value: collectionPreferencesMetadata }, - import_react364.default.createElement( + import_react360.default.createElement( AnalyticsFunnelSubStep, null, - import_react364.default.createElement(InternalTableAsSubstep, Object.assign({}, tableProps)) + import_react360.default.createElement(InternalTableAsSubstep, Object.assign({}, tableProps)) ) ); }); @@ -40444,29 +40107,29 @@ applyDisplayName(Table, "Table"); var table_default = Table; // node_modules/@cloudscape-design/components/tag-editor/index.js -var import_react367 = __toESM(require_react()); +var import_react363 = __toESM(require_react()); // node_modules/@cloudscape-design/components/tag-editor/internal.js -var import_react365 = __toESM(require_react()); +var import_react361 = __toESM(require_react()); // node_modules/@cloudscape-design/components/tag-editor/styles.css.js import "/home/a171157/personal-repos/deep-racer/community-contributions/deepracer-custom-console/new/node_modules/@cloudscape-design/components/tag-editor/styles.scoped.css"; -var styles_css_default134 = { +var styles_css_default133 = { "root": "awsui_root_brdst_19vdi_145", "loading": "awsui_loading_brdst_19vdi_149", "undo-button": "awsui_undo-button_brdst_19vdi_153" }; // node_modules/@cloudscape-design/components/tag-editor/internal.js -var TagControl = import_react365.default.forwardRef(({ row, value, readOnly, defaultOptions: defaultOptions3, placeholder, errorText, loadingText, suggestionText, tooManySuggestionText, limit, filteringKey, enteredTextLabel, clearAriaLabel, onChange, onBlur, onRequest, initialOptionsRef }, ref) => { - const [options, setOptions] = (0, import_react365.useState)(defaultOptions3); - const [statusType, setStatusType] = (0, import_react365.useState)(); - const requestCancelFnRef = (0, import_react365.useRef)({ +var TagControl = import_react361.default.forwardRef(({ row, value, readOnly, defaultOptions: defaultOptions3, placeholder, errorText, loadingText, suggestionText, tooManySuggestionText, limit, filteringKey, enteredTextLabel, clearAriaLabel, onChange, onBlur, onRequest, initialOptionsRef }, ref) => { + const [options, setOptions] = (0, import_react361.useState)(defaultOptions3); + const [statusType, setStatusType] = (0, import_react361.useState)(); + const requestCancelFnRef = (0, import_react361.useRef)({ cancel: () => { }, isCancelled: () => false }); - const latestFilteringQuery = (0, import_react365.useRef)({ key: void 0, value: void 0 }); + const latestFilteringQuery = (0, import_react361.useRef)({ key: void 0, value: void 0 }); const isSameQuery = (key2, value2) => latestFilteringQuery.current.key === key2 && latestFilteringQuery.current.value === value2; const onLoadItems = (filteringText) => { if (!onRequest || isSameQuery(filteringKey, filteringText) || requestCancelFnRef.current.isCancelled()) { @@ -40495,14 +40158,14 @@ var TagControl = import_react365.default.forwardRef(({ row, value, readOnly, def }); requestCancelFnRef.current = { cancel, isCancelled }; }; - return import_react365.default.createElement(internal_default13, { ref, value, readOnly, statusType, options: options.length < limit ? options : [], empty: options.length < limit ? suggestionText : tooManySuggestionText, placeholder, errorText, loadingText, enteredTextLabel, clearAriaLabel, onChange: ({ detail }) => onChange(detail.value, row), onBlur: () => onBlur === null || onBlur === void 0 ? void 0 : onBlur(row), onFocus: () => { + return import_react361.default.createElement(internal_default13, { ref, value, readOnly, statusType, options: options.length < limit ? options : [], empty: options.length < limit ? suggestionText : tooManySuggestionText, placeholder, errorText, loadingText, enteredTextLabel, clearAriaLabel, onChange: ({ detail }) => onChange(detail.value, row), onBlur: () => onBlur === null || onBlur === void 0 ? void 0 : onBlur(row), onFocus: () => { onLoadItems(""); }, onLoadItems: ({ detail }) => { onLoadItems(detail.filteringText); } }); }); -var UndoButton = import_react365.default.forwardRef(({ children, onClick }, ref) => { - return import_react365.default.createElement("a", { ref, role: "button", tabIndex: 0, className: styles_css_default134["undo-button"], onClick, onKeyDown: (event) => { +var UndoButton = import_react361.default.forwardRef(({ children, onClick }, ref) => { + return import_react361.default.createElement("a", { ref, role: "button", tabIndex: 0, className: styles_css_default133["undo-button"], onClick, onKeyDown: (event) => { if (event.keyCode === KeyCode.space || event.keyCode === KeyCode.enter) { event.preventDefault(); } @@ -40517,7 +40180,7 @@ var UndoButton = import_react365.default.forwardRef(({ children, onClick }, ref) }); // node_modules/@cloudscape-design/components/tag-editor/utils.js -var import_react366 = __toESM(require_react()); +var import_react362 = __toESM(require_react()); function findIndex3(array, condition) { for (let i2 = 0; i2 < array.length; i2++) { if (condition(array[i2])) { @@ -40541,9 +40204,9 @@ function makeMemoizedArray(prev, next, isEqual2) { return prev; } function useMemoizedArray(array, isEqual2) { - const ref = (0, import_react366.useRef)(array); + const ref = (0, import_react362.useRef)(array); const updated = makeMemoizedArray(ref.current, array, isEqual2); - (0, import_react366.useEffect)(() => { + (0, import_react362.useEffect)(() => { ref.current = updated; }, [updated]); return updated; @@ -40612,7 +40275,7 @@ var invalidCharCheck = (value, validCharRegex = DEFAULT_CHAR_REGEX) => { // node_modules/@cloudscape-design/components/tag-editor/index.js var isItemRemovable = ({ tag }) => !tag.markedForRemoval; -var TagEditor = import_react367.default.forwardRef((_a, ref) => { +var TagEditor = import_react363.default.forwardRef((_a, ref) => { var _b, _c, _d, _e, _f, _g; var { tags = [], i18nStrings, loading = false, tagLimit = 50, allowedCharacterPattern, keysRequest, valuesRequest, onChange } = _a, restProps = __rest(_a, ["tags", "i18nStrings", "loading", "tagLimit", "allowedCharacterPattern", "keysRequest", "valuesRequest", "onChange"]); const baseComponentProps = useBaseComponent("TagEditor", { @@ -40620,14 +40283,14 @@ var TagEditor = import_react367.default.forwardRef((_a, ref) => { }); const i18n = useInternalI18n("tag-editor"); const remainingTags = tagLimit - tags.filter((tag) => !tag.markedForRemoval).length; - const attributeEditorRef = (0, import_react367.useRef)(null); - const keyInputRefs = (0, import_react367.useRef)([]); - const valueInputRefs = (0, import_react367.useRef)([]); - const undoButtonRefs = (0, import_react367.useRef)([]); - const initialKeyOptionsRef = (0, import_react367.useRef)([]); - const keyDirtyStateRef = (0, import_react367.useRef)([]); - const focusEventRef = (0, import_react367.useRef)(); - (0, import_react367.useLayoutEffect)(() => { + const attributeEditorRef = (0, import_react363.useRef)(null); + const keyInputRefs = (0, import_react363.useRef)([]); + const valueInputRefs = (0, import_react363.useRef)([]); + const undoButtonRefs = (0, import_react363.useRef)([]); + const initialKeyOptionsRef = (0, import_react363.useRef)([]); + const keyDirtyStateRef = (0, import_react363.useRef)([]); + const focusEventRef = (0, import_react363.useRef)(); + (0, import_react363.useLayoutEffect)(() => { var _a2; (_a2 = focusEventRef.current) === null || _a2 === void 0 ? void 0 : _a2.apply(void 0); focusEventRef.current = void 0; @@ -40637,7 +40300,7 @@ var TagEditor = import_react367.default.forwardRef((_a, ref) => { var _a2, _b2, _c2, _d2; return prev.tag === next.tag && ((_a2 = prev.error) === null || _a2 === void 0 ? void 0 : _a2.key) === ((_b2 = next.error) === null || _b2 === void 0 ? void 0 : _b2.key) && ((_c2 = prev.error) === null || _c2 === void 0 ? void 0 : _c2.value) === ((_d2 = next.error) === null || _d2 === void 0 ? void 0 : _d2.value); }); - (0, import_react367.useImperativeHandle)(ref, () => ({ + (0, import_react363.useImperativeHandle)(ref, () => ({ focus() { var _a2, _b2; const errorIndex = findIndex3(internalTags, ({ error }) => (error === null || error === void 0 ? void 0 : error.key) || (error === null || error === void 0 ? void 0 : error.value)); @@ -40647,7 +40310,7 @@ var TagEditor = import_react367.default.forwardRef((_a, ref) => { } } }), [internalTags]); - const validateAndFire = (0, import_react367.useCallback)((newTags) => { + const validateAndFire = (0, import_react363.useCallback)((newTags) => { fireNonCancelableEvent(onChange, { tags: newTags, valid: !validate2(newTags, keyDirtyStateRef.current, i18n, i18nStrings, allowedCharacterPattern ? new RegExp(allowedCharacterPattern) : void 0).some((error) => error) @@ -40712,72 +40375,72 @@ var TagEditor = import_react367.default.forwardRef((_a, ref) => { (_a2 = attributeEditorRef.current) === null || _a2 === void 0 ? void 0 : _a2.focusRemoveButton(row); }; }); - const definition = (0, import_react367.useMemo)(() => [ + const definition = (0, import_react363.useMemo)(() => [ { label: i18n("i18nStrings.keyHeader", i18nStrings === null || i18nStrings === void 0 ? void 0 : i18nStrings.keyHeader), - control: ({ tag }, row) => import_react367.default.createElement(TagControl, { row, value: tag.key, readOnly: tag.existing, limit: 200, defaultOptions: [], placeholder: i18n("i18nStrings.keyPlaceholder", i18nStrings === null || i18nStrings === void 0 ? void 0 : i18nStrings.keyPlaceholder), errorText: i18n("i18nStrings.keysSuggestionError", i18nStrings === null || i18nStrings === void 0 ? void 0 : i18nStrings.keysSuggestionError), loadingText: i18n("i18nStrings.keysSuggestionLoading", i18nStrings === null || i18nStrings === void 0 ? void 0 : i18nStrings.keysSuggestionLoading), suggestionText: i18n("i18nStrings.keySuggestion", i18nStrings === null || i18nStrings === void 0 ? void 0 : i18nStrings.keySuggestion), tooManySuggestionText: i18n("i18nStrings.tooManyKeysSuggestion", i18nStrings === null || i18nStrings === void 0 ? void 0 : i18nStrings.tooManyKeysSuggestion), enteredTextLabel: i18nStrings === null || i18nStrings === void 0 ? void 0 : i18nStrings.enteredKeyLabel, clearAriaLabel: i18nStrings === null || i18nStrings === void 0 ? void 0 : i18nStrings.clearAriaLabel, onRequest: keysRequest, onChange: onKeyChange, onBlur: onKeyBlur, initialOptionsRef: initialKeyOptionsRef, ref: (ref2) => { + control: ({ tag }, row) => import_react363.default.createElement(TagControl, { row, value: tag.key, readOnly: tag.existing, limit: 200, defaultOptions: [], placeholder: i18n("i18nStrings.keyPlaceholder", i18nStrings === null || i18nStrings === void 0 ? void 0 : i18nStrings.keyPlaceholder), errorText: i18n("i18nStrings.keysSuggestionError", i18nStrings === null || i18nStrings === void 0 ? void 0 : i18nStrings.keysSuggestionError), loadingText: i18n("i18nStrings.keysSuggestionLoading", i18nStrings === null || i18nStrings === void 0 ? void 0 : i18nStrings.keysSuggestionLoading), suggestionText: i18n("i18nStrings.keySuggestion", i18nStrings === null || i18nStrings === void 0 ? void 0 : i18nStrings.keySuggestion), tooManySuggestionText: i18n("i18nStrings.tooManyKeysSuggestion", i18nStrings === null || i18nStrings === void 0 ? void 0 : i18nStrings.tooManyKeysSuggestion), enteredTextLabel: i18nStrings === null || i18nStrings === void 0 ? void 0 : i18nStrings.enteredKeyLabel, clearAriaLabel: i18nStrings === null || i18nStrings === void 0 ? void 0 : i18nStrings.clearAriaLabel, onRequest: keysRequest, onChange: onKeyChange, onBlur: onKeyBlur, initialOptionsRef: initialKeyOptionsRef, ref: (ref2) => { keyInputRefs.current[row] = ref2; } }), errorText: ({ error }) => error === null || error === void 0 ? void 0 : error.key }, { - label: import_react367.default.createElement( + label: import_react363.default.createElement( "span", null, i18n("i18nStrings.valueHeader", i18nStrings === null || i18nStrings === void 0 ? void 0 : i18nStrings.valueHeader), " -", " ", - import_react367.default.createElement("i", null, i18n("i18nStrings.optional", i18nStrings === null || i18nStrings === void 0 ? void 0 : i18nStrings.optional)) + import_react363.default.createElement("i", null, i18n("i18nStrings.optional", i18nStrings === null || i18nStrings === void 0 ? void 0 : i18nStrings.optional)) ), control: ({ tag }, row) => { var _a2; - return tag.markedForRemoval ? import_react367.default.createElement( + return tag.markedForRemoval ? import_react363.default.createElement( "div", { role: "alert" }, - import_react367.default.createElement( + import_react363.default.createElement( InternalBox, { margin: { top: "xxs" } }, i18n("i18nStrings.undoPrompt", i18nStrings === null || i18nStrings === void 0 ? void 0 : i18nStrings.undoPrompt), " ", - import_react367.default.createElement(UndoButton, { onClick: () => onUndoRemoval(row), ref: (elem) => { + import_react363.default.createElement(UndoButton, { onClick: () => onUndoRemoval(row), ref: (elem) => { undoButtonRefs.current[row] = elem; } }, i18n("i18nStrings.undoButton", i18nStrings === null || i18nStrings === void 0 ? void 0 : i18nStrings.undoButton)) ) - ) : import_react367.default.createElement(TagControl, { row, value: tag.value, readOnly: false, limit: 200, defaultOptions: (_a2 = tag.valueSuggestionOptions) !== null && _a2 !== void 0 ? _a2 : [], placeholder: i18n("i18nStrings.valuePlaceholder", i18nStrings === null || i18nStrings === void 0 ? void 0 : i18nStrings.valuePlaceholder), errorText: i18n("i18nStrings.valuesSuggestionError", i18nStrings === null || i18nStrings === void 0 ? void 0 : i18nStrings.valuesSuggestionError), loadingText: i18n("i18nStrings.valuesSuggestionLoading", i18nStrings === null || i18nStrings === void 0 ? void 0 : i18nStrings.valuesSuggestionLoading), suggestionText: i18n("i18nStrings.valueSuggestion", i18nStrings === null || i18nStrings === void 0 ? void 0 : i18nStrings.valueSuggestion), tooManySuggestionText: i18n("i18nStrings.tooManyValuesSuggestion", i18nStrings === null || i18nStrings === void 0 ? void 0 : i18nStrings.tooManyValuesSuggestion), enteredTextLabel: i18nStrings === null || i18nStrings === void 0 ? void 0 : i18nStrings.enteredValueLabel, clearAriaLabel: i18nStrings === null || i18nStrings === void 0 ? void 0 : i18nStrings.clearAriaLabel, filteringKey: tag.key, onRequest: valuesRequest && ((value) => valuesRequest(tag.key, value)), onChange: onValueChange, ref: (ref2) => { + ) : import_react363.default.createElement(TagControl, { row, value: tag.value, readOnly: false, limit: 200, defaultOptions: (_a2 = tag.valueSuggestionOptions) !== null && _a2 !== void 0 ? _a2 : [], placeholder: i18n("i18nStrings.valuePlaceholder", i18nStrings === null || i18nStrings === void 0 ? void 0 : i18nStrings.valuePlaceholder), errorText: i18n("i18nStrings.valuesSuggestionError", i18nStrings === null || i18nStrings === void 0 ? void 0 : i18nStrings.valuesSuggestionError), loadingText: i18n("i18nStrings.valuesSuggestionLoading", i18nStrings === null || i18nStrings === void 0 ? void 0 : i18nStrings.valuesSuggestionLoading), suggestionText: i18n("i18nStrings.valueSuggestion", i18nStrings === null || i18nStrings === void 0 ? void 0 : i18nStrings.valueSuggestion), tooManySuggestionText: i18n("i18nStrings.tooManyValuesSuggestion", i18nStrings === null || i18nStrings === void 0 ? void 0 : i18nStrings.tooManyValuesSuggestion), enteredTextLabel: i18nStrings === null || i18nStrings === void 0 ? void 0 : i18nStrings.enteredValueLabel, clearAriaLabel: i18nStrings === null || i18nStrings === void 0 ? void 0 : i18nStrings.clearAriaLabel, filteringKey: tag.key, onRequest: valuesRequest && ((value) => valuesRequest(tag.key, value)), onChange: onValueChange, ref: (ref2) => { valueInputRefs.current[row] = ref2; } }); }, errorText: ({ error }) => error === null || error === void 0 ? void 0 : error.value } ], [i18n, i18nStrings, keysRequest, onKeyChange, onKeyBlur, valuesRequest, onValueChange, onUndoRemoval]); - const forwardedI18nStrings = (0, import_react367.useMemo)(() => ({ + const forwardedI18nStrings = (0, import_react363.useMemo)(() => ({ errorIconAriaLabel: i18nStrings === null || i18nStrings === void 0 ? void 0 : i18nStrings.errorIconAriaLabel, itemRemovedAriaLive: i18nStrings === null || i18nStrings === void 0 ? void 0 : i18nStrings.itemRemovedAriaLive, removeButtonAriaLabel: i18n("i18nStrings.removeButtonAriaLabel", (i18nStrings === null || i18nStrings === void 0 ? void 0 : i18nStrings.removeButtonAriaLabel) && (({ tag }) => i18nStrings.removeButtonAriaLabel(tag)), (format3) => ({ tag }) => format3({ tag__key: tag.key })) }), [i18nStrings, i18n]); if (loading) { - return import_react367.default.createElement( + return import_react363.default.createElement( "div", - { className: styles_css_default134.root, ref: baseComponentProps.__internalRootRef }, - import_react367.default.createElement( + { className: styles_css_default133.root, ref: baseComponentProps.__internalRootRef }, + import_react363.default.createElement( StatusIndicator, - { className: styles_css_default134.loading, type: "loading" }, - import_react367.default.createElement(internal_default2, { tagName: "span" }, i18n("i18nStrings.loading", i18nStrings === null || i18nStrings === void 0 ? void 0 : i18nStrings.loading)) + { className: styles_css_default133.loading, type: "loading" }, + import_react363.default.createElement(internal_default2, { tagName: "span" }, i18n("i18nStrings.loading", i18nStrings === null || i18nStrings === void 0 ? void 0 : i18nStrings.loading)) ) ); } const baseProps = getBaseProps(restProps); - return import_react367.default.createElement(internal_default12, Object.assign({}, baseProps, baseComponentProps, { ref: attributeEditorRef, className: clsx_m_default(styles_css_default134.root, baseProps.className), items: internalTags, isItemRemovable, onAddButtonClick, onRemoveButtonClick, addButtonText: (_b = i18n("i18nStrings.addButton", i18nStrings === null || i18nStrings === void 0 ? void 0 : i18nStrings.addButton)) !== null && _b !== void 0 ? _b : "", removeButtonText: i18nStrings === null || i18nStrings === void 0 ? void 0 : i18nStrings.removeButton, disableAddButton: remainingTags <= 0, empty: i18n("i18nStrings.emptyTags", i18nStrings === null || i18nStrings === void 0 ? void 0 : i18nStrings.emptyTags), additionalInfo: remainingTags < 0 ? import_react367.default.createElement(FormFieldError, { errorIconAriaLabel: i18nStrings === null || i18nStrings === void 0 ? void 0 : i18nStrings.errorIconAriaLabel }, (_d = i18n("i18nStrings.tagLimitExceeded", (_c = i18nStrings === null || i18nStrings === void 0 ? void 0 : i18nStrings.tagLimitExceeded) === null || _c === void 0 ? void 0 : _c.call(i18nStrings, tagLimit), (format3) => format3({ tagLimit }))) !== null && _d !== void 0 ? _d : "") : remainingTags === 0 ? (_f = i18n("i18nStrings.tagLimitReached", (_e = i18nStrings === null || i18nStrings === void 0 ? void 0 : i18nStrings.tagLimitReached) === null || _e === void 0 ? void 0 : _e.call(i18nStrings, tagLimit), (format3) => format3({ tagLimit }))) !== null && _f !== void 0 ? _f : "" : i18n("i18nStrings.tagLimit", (_g = i18nStrings === null || i18nStrings === void 0 ? void 0 : i18nStrings.tagLimit) === null || _g === void 0 ? void 0 : _g.call(i18nStrings, remainingTags, tagLimit), (format3) => format3({ tagLimitAvailable: `${remainingTags === tagLimit}`, availableTags: remainingTags, tagLimit })), definition, i18nStrings: forwardedI18nStrings })); + return import_react363.default.createElement(internal_default12, Object.assign({}, baseProps, baseComponentProps, { ref: attributeEditorRef, className: clsx_m_default(styles_css_default133.root, baseProps.className), items: internalTags, isItemRemovable, onAddButtonClick, onRemoveButtonClick, addButtonText: (_b = i18n("i18nStrings.addButton", i18nStrings === null || i18nStrings === void 0 ? void 0 : i18nStrings.addButton)) !== null && _b !== void 0 ? _b : "", removeButtonText: i18nStrings === null || i18nStrings === void 0 ? void 0 : i18nStrings.removeButton, disableAddButton: remainingTags <= 0, empty: i18n("i18nStrings.emptyTags", i18nStrings === null || i18nStrings === void 0 ? void 0 : i18nStrings.emptyTags), additionalInfo: remainingTags < 0 ? import_react363.default.createElement(FormFieldError, { errorIconAriaLabel: i18nStrings === null || i18nStrings === void 0 ? void 0 : i18nStrings.errorIconAriaLabel }, (_d = i18n("i18nStrings.tagLimitExceeded", (_c = i18nStrings === null || i18nStrings === void 0 ? void 0 : i18nStrings.tagLimitExceeded) === null || _c === void 0 ? void 0 : _c.call(i18nStrings, tagLimit), (format3) => format3({ tagLimit }))) !== null && _d !== void 0 ? _d : "") : remainingTags === 0 ? (_f = i18n("i18nStrings.tagLimitReached", (_e = i18nStrings === null || i18nStrings === void 0 ? void 0 : i18nStrings.tagLimitReached) === null || _e === void 0 ? void 0 : _e.call(i18nStrings, tagLimit), (format3) => format3({ tagLimit }))) !== null && _f !== void 0 ? _f : "" : i18n("i18nStrings.tagLimit", (_g = i18nStrings === null || i18nStrings === void 0 ? void 0 : i18nStrings.tagLimit) === null || _g === void 0 ? void 0 : _g.call(i18nStrings, remainingTags, tagLimit), (format3) => format3({ tagLimitAvailable: `${remainingTags === tagLimit}`, availableTags: remainingTags, tagLimit })), definition, i18nStrings: forwardedI18nStrings })); }); applyDisplayName(TagEditor, "TagEditor"); var tag_editor_default = TagEditor; // node_modules/@cloudscape-design/components/text-content/index.js -var import_react368 = __toESM(require_react()); +var import_react364 = __toESM(require_react()); // node_modules/@cloudscape-design/components/text-content/styles.css.js import "/home/a171157/personal-repos/deep-racer/community-contributions/deepracer-custom-console/new/node_modules/@cloudscape-design/components/text-content/styles.scoped.css"; -var styles_css_default135 = { +var styles_css_default134 = { "text-content": "awsui_text-content_6absk_aifgb_146" }; @@ -40786,14 +40449,14 @@ function TextContent(_a) { var { children } = _a, props = __rest(_a, ["children"]); const { __internalRootRef } = useBaseComponent("TextContent"); const baseProps = getBaseProps(props); - const className2 = clsx_m_default(baseProps.className, styles_css_default135["text-content"]); - return import_react368.default.createElement("div", Object.assign({}, baseProps, { className: className2, ref: __internalRootRef }), children); + const className2 = clsx_m_default(baseProps.className, styles_css_default134["text-content"]); + return import_react364.default.createElement("div", Object.assign({}, baseProps, { className: className2, ref: __internalRootRef }), children); } applyDisplayName(TextContent, "TextContent"); // node_modules/@cloudscape-design/components/text-filter/index.js -var import_react369 = __toESM(require_react()); -var TextFilter = import_react369.default.forwardRef((props, ref) => { +var import_react365 = __toESM(require_react()); +var TextFilter = import_react365.default.forwardRef((props, ref) => { const baseComponentProps = useBaseComponent("TextFilter", { props: { disabled: props.disabled, disableBrowserAutocorrect: props.disableBrowserAutocorrect } }); @@ -40804,17 +40467,17 @@ var TextFilter = import_react369.default.forwardRef((props, ref) => { disabled: `${!!props.disabled}` } }; - return import_react369.default.createElement(internal_default17, Object.assign({}, props, baseComponentProps, { ref }, getAnalyticsMetadataAttribute({ component: componentAnalyticsMetadata }))); + return import_react365.default.createElement(internal_default17, Object.assign({}, props, baseComponentProps, { ref }, getAnalyticsMetadataAttribute({ component: componentAnalyticsMetadata }))); }); applyDisplayName(TextFilter, "TextFilter"); var text_filter_default = TextFilter; // node_modules/@cloudscape-design/components/textarea/index.js -var import_react370 = __toESM(require_react()); +var import_react366 = __toESM(require_react()); // node_modules/@cloudscape-design/components/textarea/styles.css.js import "/home/a171157/personal-repos/deep-racer/community-contributions/deepracer-custom-console/new/node_modules/@cloudscape-design/components/textarea/styles.scoped.css"; -var styles_css_default136 = { +var styles_css_default135 = { "root": "awsui_root_qk1j1_cj4a9_145", "textarea": "awsui_textarea_qk1j1_cj4a9_149", "textarea-readonly": "awsui_textarea-readonly_qk1j1_cj4a9_199", @@ -40823,14 +40486,14 @@ var styles_css_default136 = { }; // node_modules/@cloudscape-design/components/textarea/index.js -var Textarea = import_react370.default.forwardRef((_a, ref) => { +var Textarea = import_react366.default.forwardRef((_a, ref) => { var { value, autoComplete = true, disabled, readOnly, disableBrowserAutocorrect, disableBrowserSpellcheck, spellcheck, onKeyDown: onKeyDown2, onKeyUp, onChange, onBlur, onFocus, ariaRequired, name, rows, placeholder, autoFocus, ariaLabel } = _a, rest = __rest(_a, ["value", "autoComplete", "disabled", "readOnly", "disableBrowserAutocorrect", "disableBrowserSpellcheck", "spellcheck", "onKeyDown", "onKeyUp", "onChange", "onBlur", "onFocus", "ariaRequired", "name", "rows", "placeholder", "autoFocus", "ariaLabel"]); const { __internalRootRef } = useBaseComponent("Textarea", { props: { autoComplete, autoFocus, disableBrowserAutocorrect, disableBrowserSpellcheck, readOnly, spellcheck } }); const { ariaLabelledby, ariaDescribedby, controlId, invalid, warning } = useFormFieldContext(rest); const baseProps = getBaseProps(rest); - const textareaRef = (0, import_react370.useRef)(null); + const textareaRef = (0, import_react366.useRef)(null); useForwardFocus(ref, textareaRef); const attributes = { "aria-label": ariaLabel, @@ -40841,10 +40504,10 @@ var Textarea = import_react370.default.forwardRef((_a, ref) => { name, placeholder, autoFocus, - className: clsx_m_default(styles_css_default136.textarea, { - [styles_css_default136["textarea-readonly"]]: readOnly, - [styles_css_default136["textarea-invalid"]]: invalid, - [styles_css_default136["textarea-warning"]]: warning && !invalid + className: clsx_m_default(styles_css_default135.textarea, { + [styles_css_default135["textarea-readonly"]]: readOnly, + [styles_css_default135["textarea-invalid"]]: invalid, + [styles_css_default135["textarea-warning"]]: warning && !invalid }), autoComplete: convertAutoComplete(autoComplete), spellCheck: spellcheck, @@ -40866,18 +40529,18 @@ var Textarea = import_react370.default.forwardRef((_a, ref) => { if (disableBrowserSpellcheck) { attributes.spellCheck = "false"; } - return import_react370.default.createElement( + return import_react366.default.createElement( "span", - Object.assign({}, baseProps, { className: clsx_m_default(styles_css_default136.root, baseProps.className), ref: __internalRootRef }), - import_react370.default.createElement("textarea", Object.assign({ ref: textareaRef, id: controlId }, attributes)) + Object.assign({}, baseProps, { className: clsx_m_default(styles_css_default135.root, baseProps.className), ref: __internalRootRef }), + import_react366.default.createElement("textarea", Object.assign({ ref: textareaRef, id: controlId }, attributes)) ); }); applyDisplayName(Textarea, "Textarea"); var textarea_default = Textarea; // node_modules/@cloudscape-design/components/tiles/index.js -var import_react371 = __toESM(require_react()); -var Tiles = import_react371.default.forwardRef((props, ref) => { +var import_react367 = __toESM(require_react()); +var Tiles = import_react367.default.forwardRef((props, ref) => { const baseComponentProps = useBaseComponent("Tiles", { props: { columns: props.columns, readOnly: props.readOnly } }); @@ -40885,7 +40548,7 @@ var Tiles = import_react371.default.forwardRef((props, ref) => { name: "awsui.Tiles", label: { root: "self" } }; - return import_react371.default.createElement(internal_default28, Object.assign({ ref }, props, baseComponentProps, getAnalyticsMetadataAttribute({ + return import_react367.default.createElement(internal_default28, Object.assign({ ref }, props, baseComponentProps, getAnalyticsMetadataAttribute({ component: componentAnalyticsMetadata }))); }); @@ -40893,8 +40556,8 @@ applyDisplayName(Tiles, "Tiles"); var tiles_default = Tiles; // node_modules/@cloudscape-design/components/time-input/index.js -var import_react372 = __toESM(require_react()); -var TimeInput = import_react372.default.forwardRef((_a, ref) => { +var import_react368 = __toESM(require_react()); +var TimeInput = import_react368.default.forwardRef((_a, ref) => { var { format: format3 = "hh:mm:ss", use24Hour = true, autoComplete = true } = _a, props = __rest(_a, ["format", "use24Hour", "autoComplete"]); const baseComponentProps = useBaseComponent("TimeInput", { props: { @@ -40905,23 +40568,23 @@ var TimeInput = import_react372.default.forwardRef((_a, ref) => { use24Hour } }); - return import_react372.default.createElement(internal_default22, Object.assign({ format: format3, use24Hour, autoComplete }, props, baseComponentProps, { ref })); + return import_react368.default.createElement(internal_default22, Object.assign({ format: format3, use24Hour, autoComplete }, props, baseComponentProps, { ref })); }); applyDisplayName(TimeInput, "TimeInput"); var time_input_default = TimeInput; // node_modules/@cloudscape-design/components/toggle/index.js -var import_react373 = __toESM(require_react()); -var Toggle = import_react373.default.forwardRef((props, ref) => { +var import_react369 = __toESM(require_react()); +var Toggle = import_react369.default.forwardRef((props, ref) => { const baseComponentProps = useBaseComponent("Toggle", { props: { readOnly: props.readOnly } }); - return import_react373.default.createElement(internal_default18, Object.assign({}, props, baseComponentProps, { ref, __injectAnalyticsComponentMetadata: true })); + return import_react369.default.createElement(internal_default18, Object.assign({}, props, baseComponentProps, { ref, __injectAnalyticsComponentMetadata: true })); }); applyDisplayName(Toggle, "Toggle"); var toggle_default = Toggle; // node_modules/@cloudscape-design/components/toggle-button/index.js -var import_react374 = __toESM(require_react()); -var ToggleButton2 = import_react374.default.forwardRef((_a, ref) => { +var import_react370 = __toESM(require_react()); +var ToggleButton2 = import_react370.default.forwardRef((_a, ref) => { var { children, iconName, pressedIconName, iconUrl, pressedIconUrl, iconSvg, pressedIconSvg, variant = "normal", loading = false, loadingText, disabled = false, disabledReason, wrapText = true, ariaLabel, ariaDescribedby, ariaControls, pressed = false, onChange } = _a, props = __rest(_a, ["children", "iconName", "pressedIconName", "iconUrl", "pressedIconUrl", "iconSvg", "pressedIconSvg", "variant", "loading", "loadingText", "disabled", "disabledReason", "wrapText", "ariaLabel", "ariaDescribedby", "ariaControls", "pressed", "onChange"]); const baseComponentProps = useBaseComponent("ToggleButton", { props: { iconName, pressedIconName, pressed, variant, wrapText }, @@ -40930,13 +40593,13 @@ var ToggleButton2 = import_react374.default.forwardRef((_a, ref) => { } }); const baseProps = getBaseProps(props); - return import_react374.default.createElement(InternalToggleButton, Object.assign({}, baseProps, baseComponentProps, { ref, iconName, iconUrl, iconSvg, variant, loading, loadingText, disabled, disabledReason, wrapText, ariaLabel, ariaDescribedby, ariaControls, pressedIconName, pressedIconUrl, pressedIconSvg, pressed, onChange }), children); + return import_react370.default.createElement(InternalToggleButton, Object.assign({}, baseProps, baseComponentProps, { ref, iconName, iconUrl, iconSvg, variant, loading, loadingText, disabled, disabledReason, wrapText, ariaLabel, ariaDescribedby, ariaControls, pressedIconName, pressedIconUrl, pressedIconSvg, pressed, onChange }), children); }); applyDisplayName(ToggleButton2, "ToggleButton"); var toggle_button_default = ToggleButton2; // node_modules/@cloudscape-design/components/token-group/index.js -var import_react375 = __toESM(require_react()); +var import_react371 = __toESM(require_react()); function TokenGroup2(_a) { var { items = [], alignment = "horizontal" } = _a, props = __rest(_a, ["items", "alignment"]); const baseComponentProps = useBaseComponent("TokenGroup", { @@ -40949,22 +40612,22 @@ function TokenGroup2(_a) { itemsCount: `${items.length}` } }; - return import_react375.default.createElement(InternalTokenGroup, Object.assign({ items, alignment }, props, baseComponentProps, getAnalyticsMetadataAttribute({ component: componentAnalyticsMetadata }))); + return import_react371.default.createElement(InternalTokenGroup, Object.assign({ items, alignment }, props, baseComponentProps, getAnalyticsMetadataAttribute({ component: componentAnalyticsMetadata }))); } applyDisplayName(TokenGroup2, "TokenGroup"); // node_modules/@cloudscape-design/components/top-navigation/index.js -var import_react386 = __toESM(require_react()); +var import_react382 = __toESM(require_react()); // node_modules/@cloudscape-design/components/top-navigation/internal.js -var import_react385 = __toESM(require_react()); +var import_react381 = __toESM(require_react()); // node_modules/@cloudscape-design/components/internal/components/menu-dropdown/index.js -var import_react376 = __toESM(require_react()); +var import_react372 = __toESM(require_react()); // node_modules/@cloudscape-design/components/internal/components/menu-dropdown/styles.css.js import "/home/a171157/personal-repos/deep-racer/community-contributions/deepracer-custom-console/new/node_modules/@cloudscape-design/components/internal/components/menu-dropdown/styles.scoped.css"; -var styles_css_default137 = { +var styles_css_default136 = { "button": "awsui_button_m5h9f_1hxt9_145", "expanded": "awsui_expanded_m5h9f_1hxt9_197", "offset-right-none": "awsui_offset-right-none_m5h9f_1hxt9_208", @@ -40975,72 +40638,72 @@ var styles_css_default137 = { }; // node_modules/@cloudscape-design/components/internal/components/menu-dropdown/index.js -var ButtonTrigger = import_react376.default.forwardRef(({ testUtilsClass, iconName, iconUrl, iconAlt, iconSvg, badge, ariaLabel, offsetRight, disabled, expanded, children, onClick }, ref) => { +var ButtonTrigger = import_react372.default.forwardRef(({ testUtilsClass, iconName, iconUrl, iconAlt, iconSvg, badge, ariaLabel, offsetRight, disabled, expanded, children, onClick }, ref) => { const hasIcon = iconName || iconUrl || iconSvg; - return import_react376.default.createElement( + return import_react372.default.createElement( "button", - { ref, type: "button", className: clsx_m_default(styles_css_default137.button, styles_css_default137[`offset-right-${offsetRight}`], testUtilsClass, { - [styles_css_default137.expanded]: expanded + { ref, type: "button", className: clsx_m_default(styles_css_default136.button, styles_css_default136[`offset-right-${offsetRight}`], testUtilsClass, { + [styles_css_default136.expanded]: expanded }), "aria-label": ariaLabel, "aria-expanded": !!expanded, "aria-haspopup": true, disabled, onClick: (event) => { event.preventDefault(); onClick && onClick(); } }, - hasIcon && import_react376.default.createElement(internal_default, { className: styles_css_default137.icon, name: iconName, url: iconUrl, alt: iconAlt, svg: iconSvg, badge }), - children && import_react376.default.createElement("span", { className: styles_css_default137.text }, children), - children && import_react376.default.createElement(internal_default, { name: "caret-down-filled", className: spinWhenOpen(styles_css_default15, "rotate", !!expanded) }) + hasIcon && import_react372.default.createElement(internal_default, { className: styles_css_default136.icon, name: iconName, url: iconUrl, alt: iconAlt, svg: iconSvg, badge }), + children && import_react372.default.createElement("span", { className: styles_css_default136.text }, children), + children && import_react372.default.createElement(internal_default, { name: "caret-down-filled", className: spinWhenOpen(styles_css_default15, "rotate", !!expanded) }) ); }); var MenuDropdown = (_a) => { var { iconName, iconUrl, iconAlt, iconSvg, badge, offsetRight, children } = _a, props = __rest(_a, ["iconName", "iconUrl", "iconAlt", "iconSvg", "badge", "offsetRight", "children"]); const baseProps = getBaseProps(props); const dropdownTrigger = ({ triggerRef, ariaLabel, isOpen, testUtilsClass, disabled, onClick }) => { - return import_react376.default.createElement(ButtonTrigger, { testUtilsClass, ref: triggerRef, disabled, expanded: isOpen, iconName, iconUrl, iconAlt, iconSvg, badge, ariaLabel, offsetRight, onClick }, children); + return import_react372.default.createElement(ButtonTrigger, { testUtilsClass, ref: triggerRef, disabled, expanded: isOpen, iconName, iconUrl, iconAlt, iconSvg, badge, ariaLabel, offsetRight, onClick }, children); }; - return import_react376.default.createElement(internal_default10, Object.assign({}, baseProps, props, { variant: "navigation", customTriggerBuilder: dropdownTrigger, preferCenter: true })); + return import_react372.default.createElement(internal_default10, Object.assign({}, baseProps, props, { variant: "navigation", customTriggerBuilder: dropdownTrigger, preferCenter: true })); }; applyDisplayName(MenuDropdown, "MenuDropdown"); var menu_dropdown_default = MenuDropdown; // node_modules/@cloudscape-design/components/top-navigation/parts/overflow-menu/index.js -var import_react382 = __toESM(require_react()); +var import_react378 = __toESM(require_react()); // node_modules/@cloudscape-design/components/top-navigation/parts/overflow-menu/router.js -var import_react377 = __toESM(require_react()); +var import_react373 = __toESM(require_react()); var defaultCtx = { state: { view: "utilities", data: null }, setState: () => { } }; -var ViewContext = (0, import_react377.createContext)(defaultCtx); +var ViewContext = (0, import_react373.createContext)(defaultCtx); var useNavigate = () => { - const { setState } = (0, import_react377.useContext)(ViewContext); + const { setState } = (0, import_react373.useContext)(ViewContext); const navigate = (view, data) => { setState({ view, data }); }; return navigate; }; var Route = ({ view, element }) => { - const { state } = (0, import_react377.useContext)(ViewContext); + const { state } = (0, import_react373.useContext)(ViewContext); if (view === state.view) { if (typeof element === "function") { return element(state.data); } - return import_react377.default.createElement(import_react377.default.Fragment, null, element); + return import_react373.default.createElement(import_react373.default.Fragment, null, element); } return null; }; var Router = ({ children }) => { - const [state, setState] = (0, import_react377.useState)({ view: "utilities", data: null }); - return import_react377.default.createElement(ViewContext.Provider, { value: { state, setState } }, children); + const [state, setState] = (0, import_react373.useState)({ view: "utilities", data: null }); + return import_react373.default.createElement(ViewContext.Provider, { value: { state, setState } }, children); }; var router_default = Router; // node_modules/@cloudscape-design/components/top-navigation/parts/overflow-menu/views/submenu.js -var import_react380 = __toESM(require_react()); +var import_react376 = __toESM(require_react()); // node_modules/@cloudscape-design/components/top-navigation/parts/overflow-menu/header.js -var import_react378 = __toESM(require_react()); +var import_react374 = __toESM(require_react()); // node_modules/@cloudscape-design/components/top-navigation/styles.css.js import "/home/a171157/personal-repos/deep-racer/community-contributions/deepracer-custom-console/new/node_modules/@cloudscape-design/components/top-navigation/styles.scoped.css"; -var styles_css_default138 = { +var styles_css_default137 = { "top-navigation": "awsui_top-navigation_k5dlb_1c946_145", "padding-box": "awsui_padding-box_k5dlb_1c946_177", "medium": "awsui_medium_k5dlb_1c946_187", @@ -41092,32 +40755,32 @@ var styles_css_default138 = { // node_modules/@cloudscape-design/components/top-navigation/parts/overflow-menu/header.js var Header4 = ({ children, secondaryText, backIconAriaLabel, dismissIconAriaLabel, onBack, onClose }) => { - return import_react378.default.createElement( + return import_react374.default.createElement( "div", - { className: styles_css_default138["overflow-menu-header"] }, - onBack && import_react378.default.createElement( + { className: styles_css_default137["overflow-menu-header"] }, + onBack && import_react374.default.createElement( internal_default3, { // Used for test-utils, which require the selectable element to have a classname. // eslint-disable-next-line react/forbid-component-props - className: styles_css_default138["overflow-menu-back-button"], + className: styles_css_default137["overflow-menu-back-button"], ariaLabel: backIconAriaLabel, iconName: "angle-left", variant: "icon", onClick: () => onBack() } ), - import_react378.default.createElement( + import_react374.default.createElement( "h2", - { className: styles_css_default138["overflow-menu-header-text"] }, - import_react378.default.createElement("div", { className: styles_css_default138["overflow-menu-header-text--title"] }, children), - secondaryText && import_react378.default.createElement("div", { className: styles_css_default138["overflow-menu-header-text--secondary"] }, secondaryText) + { className: styles_css_default137["overflow-menu-header-text"] }, + import_react374.default.createElement("div", { className: styles_css_default137["overflow-menu-header-text--title"] }, children), + secondaryText && import_react374.default.createElement("div", { className: styles_css_default137["overflow-menu-header-text--secondary"] }, secondaryText) ), - import_react378.default.createElement( + import_react374.default.createElement( internal_default3, { // eslint-disable-next-line react/forbid-component-props - className: styles_css_default138["overflow-menu-dismiss-button"], + className: styles_css_default137["overflow-menu-dismiss-button"], ariaLabel: dismissIconAriaLabel, iconName: "close", variant: "icon", @@ -41129,37 +40792,37 @@ var Header4 = ({ children, secondaryText, backIconAriaLabel, dismissIconAriaLabe var header_default2 = Header4; // node_modules/@cloudscape-design/components/top-navigation/parts/overflow-menu/menu-item.js -var import_react379 = __toESM(require_react()); +var import_react375 = __toESM(require_react()); var ListItem = ({ children, startIcon, endIcon }) => { - return import_react379.default.createElement( - import_react379.default.Fragment, + return import_react375.default.createElement( + import_react375.default.Fragment, null, - startIcon && import_react379.default.createElement("span", { className: styles_css_default138["overflow-menu-list-item-icon"] }, startIcon), - import_react379.default.createElement("span", { className: styles_css_default138["overflow-menu-list-item-text"] }, children), + startIcon && import_react375.default.createElement("span", { className: styles_css_default137["overflow-menu-list-item-icon"] }, startIcon), + import_react375.default.createElement("span", { className: styles_css_default137["overflow-menu-list-item-text"] }, children), endIcon && endIcon ); }; -var LinkItem = (0, import_react379.forwardRef)(({ children, external, href, target, rel, startIcon, endIcon, onClick, context, testId }, ref) => { +var LinkItem = (0, import_react375.forwardRef)(({ children, external, href, target, rel, startIcon, endIcon, onClick, context, testId }, ref) => { const anchorTarget = target !== null && target !== void 0 ? target : external ? "_blank" : void 0; const anchorRel = rel !== null && rel !== void 0 ? rel : anchorTarget === "_blank" ? "noopener noreferrer" : void 0; const role = !href ? "button" : void 0; - return import_react379.default.createElement( + return import_react375.default.createElement( "a", - Object.assign({ ref, onClick, className: clsx_m_default(styles_css_default138["overflow-menu-control"], styles_css_default138["overflow-menu-control-link"], context && styles_css_default138[`overflow-menu-control-${context}`]), role, tabIndex: 0, href, target: anchorTarget, rel: anchorRel }, testId ? { "data-testid": testId } : {}), - import_react379.default.createElement(ListItem, { startIcon, endIcon }, children) + Object.assign({ ref, onClick, className: clsx_m_default(styles_css_default137["overflow-menu-control"], styles_css_default137["overflow-menu-control-link"], context && styles_css_default137[`overflow-menu-control-${context}`]), role, tabIndex: 0, href, target: anchorTarget, rel: anchorRel }, testId ? { "data-testid": testId } : {}), + import_react375.default.createElement(ListItem, { startIcon, endIcon }, children) ); }); -var ButtonItem = (0, import_react379.forwardRef)(({ children, startIcon, endIcon, onClick, testId }, ref) => { - return import_react379.default.createElement( +var ButtonItem = (0, import_react375.forwardRef)(({ children, startIcon, endIcon, onClick, testId }, ref) => { + return import_react375.default.createElement( "button", - Object.assign({ ref, className: styles_css_default138["overflow-menu-control"], onClick }, typeof testId === "string" ? { "data-testid": testId } : {}), - import_react379.default.createElement(ListItem, { startIcon, endIcon }, children) + Object.assign({ ref, className: styles_css_default137["overflow-menu-control"], onClick }, typeof testId === "string" ? { "data-testid": testId } : {}), + import_react375.default.createElement(ListItem, { startIcon, endIcon }, children) ); }); -var NavigationItem = (0, import_react379.forwardRef)((_a, ref) => { +var NavigationItem = (0, import_react375.forwardRef)((_a, ref) => { var { startIcon, children, index, testId } = _a, definition = __rest(_a, ["startIcon", "children", "index", "testId"]); const navigate = useNavigate(); - return import_react379.default.createElement(ButtonItem, { ref, startIcon, endIcon: import_react379.default.createElement(internal_default, { name: "angle-right" }), testId, onClick: () => navigate("dropdown-menu", { + return import_react375.default.createElement(ButtonItem, { ref, startIcon, endIcon: import_react375.default.createElement(internal_default, { name: "angle-right" }), testId, onClick: () => navigate("dropdown-menu", { definition, headerText: definition.text || definition.title, headerSecondaryText: definition.description, @@ -41168,34 +40831,34 @@ var NavigationItem = (0, import_react379.forwardRef)((_a, ref) => { }); var ExpandableItem = (_a) => { var { children, onItemClick } = _a, definition = __rest(_a, ["children", "onItemClick"]); - const [expanded, setExpanded] = (0, import_react379.useState)(false); + const [expanded, setExpanded] = (0, import_react375.useState)(false); const headerId = useUniqueId("overflow-menu-item"); - return import_react379.default.createElement( - import_react379.default.Fragment, + return import_react375.default.createElement( + import_react375.default.Fragment, null, - import_react379.default.createElement( + import_react375.default.createElement( "button", - { className: clsx_m_default(styles_css_default138["overflow-menu-control"], styles_css_default138["overflow-menu-control-expandable-menu-trigger"]), onClick: () => setExpanded((value) => !value), "aria-expanded": expanded }, - import_react379.default.createElement( + { className: clsx_m_default(styles_css_default137["overflow-menu-control"], styles_css_default137["overflow-menu-control-expandable-menu-trigger"]), onClick: () => setExpanded((value) => !value), "aria-expanded": expanded }, + import_react375.default.createElement( ListItem, - { endIcon: import_react379.default.createElement( + { endIcon: import_react375.default.createElement( "span", - { className: spinWhenOpen(styles_css_default138, "icon", expanded) }, - import_react379.default.createElement(internal_default, { name: "caret-down-filled" }) + { className: spinWhenOpen(styles_css_default137, "icon", expanded) }, + import_react375.default.createElement(internal_default, { name: "caret-down-filled" }) ) }, - import_react379.default.createElement("span", { id: headerId }, children) + import_react375.default.createElement("span", { id: headerId }, children) ) ), - expanded && import_react379.default.createElement("ul", { className: clsx_m_default(styles_css_default138["overflow-menu-list"], styles_css_default138["overflow-menu-list-submenu"]), "aria-labelledby": headerId }, definition.items.map((item, index) => { + expanded && import_react375.default.createElement("ul", { className: clsx_m_default(styles_css_default137["overflow-menu-list"], styles_css_default137["overflow-menu-list-submenu"]), "aria-labelledby": headerId }, definition.items.map((item, index) => { const isGroup5 = typeof item.items !== "undefined"; - return import_react379.default.createElement("li", { key: index, className: clsx_m_default(styles_css_default138[`overflow-menu-list-item`], styles_css_default138[`overflow-menu-list-item-dropdown-menu`]) }, dropdownComponentFactory(item, isGroup5, onItemClick)); + return import_react375.default.createElement("li", { key: index, className: clsx_m_default(styles_css_default137[`overflow-menu-list-item`], styles_css_default137[`overflow-menu-list-item-dropdown-menu`]) }, dropdownComponentFactory(item, isGroup5, onItemClick)); })) ); }; function utilityComponentFactory(utility, index, ref) { const label = utility.text || utility.title; const hasIcon = !!utility.iconName || !!utility.iconUrl || !!utility.iconAlt || !!utility.iconSvg; - const startIcon = hasIcon && import_react379.default.createElement(internal_default, { name: utility.iconName, url: utility.iconUrl, alt: utility.iconAlt, svg: utility.iconSvg }); + const startIcon = hasIcon && import_react375.default.createElement(internal_default, { name: utility.iconName, url: utility.iconUrl, alt: utility.iconAlt, svg: utility.iconSvg }); switch (utility.type) { case "button": { const handleClick = (event) => { @@ -41206,28 +40869,28 @@ function utilityComponentFactory(utility, index, ref) { fireCancelableEvent(utility.onClick, {}, event); (_a = utility.onClose) === null || _a === void 0 ? void 0 : _a.call(utility); }; - const content = import_react379.default.createElement( - import_react379.default.Fragment, + const content = import_react375.default.createElement( + import_react375.default.Fragment, null, label, - utility.external && import_react379.default.createElement( - import_react379.default.Fragment, + utility.external && import_react375.default.createElement( + import_react375.default.Fragment, null, " ", - import_react379.default.createElement( + import_react375.default.createElement( "span", { "aria-label": utility.externalIconAriaLabel, role: utility.externalIconAriaLabel ? "img" : void 0 }, - import_react379.default.createElement(internal_default, { name: "external", size: "normal" }) + import_react375.default.createElement(internal_default, { name: "external", size: "normal" }) ) ) ); if (!utility.href) { - return import_react379.default.createElement(ButtonItem, { ref, startIcon, onClick: handleClick, testId: `__${index}` }, content); + return import_react375.default.createElement(ButtonItem, { ref, startIcon, onClick: handleClick, testId: `__${index}` }, content); } - return import_react379.default.createElement(LinkItem, { ref, startIcon, href: utility.href, external: utility.external, target: utility.target, rel: utility.rel, testId: `__${index}`, onClick: handleClick }, content); + return import_react375.default.createElement(LinkItem, { ref, startIcon, href: utility.href, external: utility.external, target: utility.target, rel: utility.rel, testId: `__${index}`, onClick: handleClick }, content); } case "menu-dropdown": { - return import_react379.default.createElement(NavigationItem, Object.assign({ ref, startIcon, index }, utility, { testId: `__${index}` }), label); + return import_react375.default.createElement(NavigationItem, Object.assign({ ref, startIcon, index }, utility, { testId: `__${index}` }), label); } } } @@ -41235,48 +40898,48 @@ function dropdownComponentFactory(item, expandable, onItemClick) { const label = item.text; const hasIcon = !!item.iconName || !!item.iconUrl || !!item.iconAlt || !!item.iconSvg; const isLink = isLinkItem(item); - const startIcon = hasIcon && import_react379.default.createElement(internal_default, { name: item.iconName, url: item.iconUrl, alt: item.iconAlt, svg: item.iconSvg }); + const startIcon = hasIcon && import_react375.default.createElement(internal_default, { name: item.iconName, url: item.iconUrl, alt: item.iconAlt, svg: item.iconSvg }); if (expandable) { - return import_react379.default.createElement(ExpandableItem, Object.assign({}, item, { onItemClick }), label); + return import_react375.default.createElement(ExpandableItem, Object.assign({}, item, { onItemClick }), label); } - return import_react379.default.createElement( + return import_react375.default.createElement( LinkItem, { startIcon, href: isLink ? item.href : void 0, external: isLink ? item.external : void 0, context: "dropdown-menu", testId: item.id, onClick: (event) => onItemClick(event, item) }, label, - isLink && item.external && import_react379.default.createElement( - import_react379.default.Fragment, + isLink && item.external && import_react375.default.createElement( + import_react375.default.Fragment, null, " ", - import_react379.default.createElement( + import_react375.default.createElement( "span", { "aria-label": item.externalIconAriaLabel, role: item.externalIconAriaLabel ? "img" : void 0 }, - import_react379.default.createElement(internal_default, { name: "external", size: "normal" }) + import_react375.default.createElement(internal_default, { name: "external", size: "normal" }) ) ) ); } -var UtilityMenuItem = (0, import_react379.forwardRef)((_a, ref) => { +var UtilityMenuItem = (0, import_react375.forwardRef)((_a, ref) => { var { index } = _a, props = __rest(_a, ["index"]); - return import_react379.default.createElement("li", { className: clsx_m_default(styles_css_default138[`overflow-menu-list-item`], styles_css_default138[`overflow-menu-list-item-utility`]) }, utilityComponentFactory(props, index, ref)); + return import_react375.default.createElement("li", { className: clsx_m_default(styles_css_default137[`overflow-menu-list-item`], styles_css_default137[`overflow-menu-list-item-utility`]) }, utilityComponentFactory(props, index, ref)); }); var SubmenuItem = (props) => { const expandable = typeof props.items !== "undefined"; - return import_react379.default.createElement("li", { className: clsx_m_default(styles_css_default138[`overflow-menu-list-item`], styles_css_default138[`overflow-menu-list-item-submenu`], expandable && styles_css_default138[`overflow-menu-list-item-expandable`]) }, dropdownComponentFactory(props, expandable, props.onClick)); + return import_react375.default.createElement("li", { className: clsx_m_default(styles_css_default137[`overflow-menu-list-item`], styles_css_default137[`overflow-menu-list-item-submenu`], expandable && styles_css_default137[`overflow-menu-list-item-expandable`]) }, dropdownComponentFactory(props, expandable, props.onClick)); }; // node_modules/@cloudscape-design/components/top-navigation/parts/overflow-menu/views/submenu.js var SubmenuView = ({ onClose, utilityIndex, headerText, headerSecondaryText, dismissIconAriaLabel, backIconAriaLabel, definition }) => { const navigate = useNavigate(); const headerId = useUniqueId("overflow-menu-header"); - return import_react380.default.createElement( + return import_react376.default.createElement( focus_lock_default, { autoFocus: true }, - import_react380.default.createElement( + import_react376.default.createElement( header_default2, { secondaryText: headerSecondaryText, dismissIconAriaLabel, backIconAriaLabel, onClose, onBack: () => navigate("utilities", { utilityIndex }) }, - import_react380.default.createElement("span", { id: headerId }, headerText) + import_react376.default.createElement("span", { id: headerId }, headerText) ), - import_react380.default.createElement("ul", { className: clsx_m_default(styles_css_default138["overflow-menu-list"], styles_css_default138["overflow-menu-list-submenu"]), "aria-labelledby": headerId }, definition.items.map((item, index) => import_react380.default.createElement(SubmenuItem, Object.assign({ key: index }, item, { onClick: (event, item2) => { + import_react376.default.createElement("ul", { className: clsx_m_default(styles_css_default137["overflow-menu-list"], styles_css_default137["overflow-menu-list-submenu"]), "aria-labelledby": headerId }, definition.items.map((item, index) => import_react376.default.createElement(SubmenuItem, Object.assign({ key: index }, item, { onClick: (event, item2) => { if (item2.href && isPlainLeftClick(event)) { fireCancelableEvent(definition.onItemFollow, { id: item2.id, href: item2.href, external: item2.external }, event); } @@ -41288,25 +40951,25 @@ var SubmenuView = ({ onClose, utilityIndex, headerText, headerSecondaryText, dis var submenu_default = SubmenuView; // node_modules/@cloudscape-design/components/top-navigation/parts/overflow-menu/views/utilities.js -var import_react381 = __toESM(require_react()); +var import_react377 = __toESM(require_react()); var UtilitiesView = ({ headerText, dismissIconAriaLabel, onClose, items = [], focusIndex }) => { const headerId = useUniqueId("overflow-menu-header"); - const ref = (0, import_react381.useRef)(null); - (0, import_react381.useEffect)(() => { + const ref = (0, import_react377.useRef)(null); + (0, import_react377.useEffect)(() => { var _a; if (typeof focusIndex === "number") { (_a = ref.current) === null || _a === void 0 ? void 0 : _a.focus(); } }, [focusIndex]); - return import_react381.default.createElement( + return import_react377.default.createElement( focus_lock_default, { autoFocus: true }, - import_react381.default.createElement( + import_react377.default.createElement( header_default2, { dismissIconAriaLabel, onClose }, - import_react381.default.createElement("span", { id: headerId }, headerText) + import_react377.default.createElement("span", { id: headerId }, headerText) ), - import_react381.default.createElement("ul", { className: styles_css_default138["overflow-menu-list"], "aria-labelledby": headerId }, items.map((utility, index) => import_react381.default.createElement(UtilityMenuItem, Object.assign({ key: index, index, ref: index === focusIndex ? ref : void 0, onClose }, utility)))) + import_react377.default.createElement("ul", { className: styles_css_default137["overflow-menu-list"], "aria-labelledby": headerId }, items.map((utility, index) => import_react377.default.createElement(UtilityMenuItem, Object.assign({ key: index, index, ref: index === focusIndex ? ref : void 0, onClose }, utility)))) ); }; var utilities_default = UtilitiesView; @@ -41316,25 +40979,25 @@ var OverflowMenu2 = ({ headerText, dismissIconAriaLabel, backIconAriaLabel, item const i18n = useInternalI18n("top-navigation"); const renderedDismissIconAriaLabel = i18n("i18nStrings.overflowMenuDismissIconAriaLabel", dismissIconAriaLabel); const renderedBackIconAriaLabel = i18n("i18nStrings.overflowMenuBackIconAriaLabel", backIconAriaLabel); - return import_react382.default.createElement( + return import_react378.default.createElement( "div", - { className: styles_css_default138["overflow-menu"], onKeyUp: (event) => { + { className: styles_css_default137["overflow-menu"], onKeyUp: (event) => { if (event.key === "Escape") { onClose === null || onClose === void 0 ? void 0 : onClose(); } } }, - import_react382.default.createElement( + import_react378.default.createElement( router_default, null, - import_react382.default.createElement(Route, { view: "utilities", element: (data) => import_react382.default.createElement(utilities_default, { headerText: i18n("i18nStrings.overflowMenuTitleText", headerText), items, focusIndex: data === null || data === void 0 ? void 0 : data.utilityIndex, dismissIconAriaLabel: renderedDismissIconAriaLabel, backIconAriaLabel: renderedBackIconAriaLabel, onClose }) }), - import_react382.default.createElement(Route, { view: "dropdown-menu", element: (data) => import_react382.default.createElement(submenu_default, { headerText: data === null || data === void 0 ? void 0 : data.headerText, headerSecondaryText: data === null || data === void 0 ? void 0 : data.headerSecondaryText, dismissIconAriaLabel: renderedDismissIconAriaLabel, backIconAriaLabel: renderedBackIconAriaLabel, definition: data === null || data === void 0 ? void 0 : data.definition, utilityIndex: data === null || data === void 0 ? void 0 : data.utilityIndex, onClose }) }) + import_react378.default.createElement(Route, { view: "utilities", element: (data) => import_react378.default.createElement(utilities_default, { headerText: i18n("i18nStrings.overflowMenuTitleText", headerText), items, focusIndex: data === null || data === void 0 ? void 0 : data.utilityIndex, dismissIconAriaLabel: renderedDismissIconAriaLabel, backIconAriaLabel: renderedBackIconAriaLabel, onClose }) }), + import_react378.default.createElement(Route, { view: "dropdown-menu", element: (data) => import_react378.default.createElement(submenu_default, { headerText: data === null || data === void 0 ? void 0 : data.headerText, headerSecondaryText: data === null || data === void 0 ? void 0 : data.headerSecondaryText, dismissIconAriaLabel: renderedDismissIconAriaLabel, backIconAriaLabel: renderedBackIconAriaLabel, definition: data === null || data === void 0 ? void 0 : data.definition, utilityIndex: data === null || data === void 0 ? void 0 : data.utilityIndex, onClose }) }) ) ); }; var overflow_menu_default = OverflowMenu2; // node_modules/@cloudscape-design/components/top-navigation/parts/utility.js -var import_react383 = __toESM(require_react()); +var import_react379 = __toESM(require_react()); function Utility({ hideText, definition, offsetRight }) { var _a; const hasIcon = !!definition.iconName || !!definition.iconUrl || !!definition.iconAlt || !!definition.iconSvg; @@ -41344,37 +41007,37 @@ function Utility({ hideText, definition, offsetRight }) { ariaLabel = definition.ariaLabel ? definition.ariaLabel : joinStrings(definition.text, definition.externalIconAriaLabel); checkSafeUrl("TopNavigation", definition.href); if (definition.variant === "primary-button") { - return import_react383.default.createElement( + return import_react379.default.createElement( "span", - { className: styles_css_default138[`offset-right-${offsetRight}`] }, - import_react383.default.createElement(InternalButton, { variant: "primary", href: definition.href, target: definition.external ? "_blank" : void 0, onClick: definition.onClick, onFollow: definition.onFollow, ariaLabel, iconName: definition.iconName, iconUrl: definition.iconUrl, iconAlt: definition.iconAlt, iconSvg: definition.iconSvg }, shouldHideText ? null : import_react383.default.createElement( - import_react383.default.Fragment, + { className: styles_css_default137[`offset-right-${offsetRight}`] }, + import_react379.default.createElement(InternalButton, { variant: "primary", href: definition.href, target: definition.external ? "_blank" : void 0, onClick: definition.onClick, onFollow: definition.onFollow, ariaLabel, iconName: definition.iconName, iconUrl: definition.iconUrl, iconAlt: definition.iconAlt, iconSvg: definition.iconSvg }, shouldHideText ? null : import_react379.default.createElement( + import_react379.default.Fragment, null, definition.text, - definition.external && import_react383.default.createElement( - import_react383.default.Fragment, + definition.external && import_react379.default.createElement( + import_react379.default.Fragment, null, " ", - import_react383.default.createElement( + import_react379.default.createElement( "span", - { className: clsx_m_default(styles_css_default138["utility-button-external-icon"], styles_css_default138[`offset-right-${offsetRight}`]), "aria-label": definition.externalIconAriaLabel, role: definition.externalIconAriaLabel ? "img" : void 0 }, - import_react383.default.createElement(internal_default, { name: "external" }) + { className: clsx_m_default(styles_css_default137["utility-button-external-icon"], styles_css_default137[`offset-right-${offsetRight}`]), "aria-label": definition.externalIconAriaLabel, role: definition.externalIconAriaLabel ? "img" : void 0 }, + import_react379.default.createElement(internal_default, { name: "external" }) ) ) )) ); } else { - return import_react383.default.createElement( + return import_react379.default.createElement( "span", - { className: styles_css_default138[`offset-right-${offsetRight}`] }, - import_react383.default.createElement( + { className: styles_css_default137[`offset-right-${offsetRight}`] }, + import_react379.default.createElement( internal_default6, { variant: "top-navigation", href: definition.href, target: definition.target, rel: definition.rel, external: definition.external, onFollow: (evt) => { fireCancelableEvent(definition.onFollow, { href: definition.href, target: definition.target, external: definition.external }, evt); fireCancelableEvent(definition.onClick, { href: definition.href, target: definition.target, external: definition.external }, evt); }, ariaLabel }, - hasIcon && import_react383.default.createElement(internal_default, { name: definition.iconName, url: definition.iconUrl, alt: definition.iconAlt, svg: definition.iconSvg, badge: definition.badge }), - !shouldHideText && definition.text && import_react383.default.createElement("span", { className: hasIcon ? styles_css_default138["utility-link-icon"] : void 0 }, definition.text) + hasIcon && import_react379.default.createElement(internal_default, { name: definition.iconName, url: definition.iconUrl, alt: definition.iconAlt, svg: definition.iconSvg, badge: definition.badge }), + !shouldHideText && definition.text && import_react379.default.createElement("span", { className: hasIcon ? styles_css_default137["utility-link-icon"] : void 0 }, definition.text) ) ); } @@ -41383,7 +41046,7 @@ function Utility({ hideText, definition, offsetRight }) { const shouldShowTitle = shouldHideText || !definition.text; const items = excludeCheckboxes(definition.items); checkSafeUrlRecursively(definition.items); - return import_react383.default.createElement(menu_dropdown_default, Object.assign({}, definition, { items, title: shouldShowTitle ? title : "", ariaLabel, offsetRight }), !shouldHideText && definition.text); + return import_react379.default.createElement(menu_dropdown_default, Object.assign({}, definition, { items, title: shouldShowTitle ? title : "", ariaLabel, offsetRight }), !shouldHideText && definition.text); } return null; } @@ -41410,25 +41073,25 @@ function excludeCheckboxes(items) { } // node_modules/@cloudscape-design/components/top-navigation/use-top-navigation.js -var import_react384 = __toESM(require_react()); +var import_react380 = __toESM(require_react()); var RESPONSIVENESS_BUFFER = 20; function useTopNavigation({ identity: identity2, search, utilities }) { - const mainRef = (0, import_react384.useRef)(null); - const virtualRef = (0, import_react384.useRef)(null); + const mainRef = (0, import_react380.useRef)(null); + const virtualRef = (0, import_react380.useRef)(null); const [breakpoint, breakpointRef] = useContainerBreakpoints(["xxs", "s"]); const hasSearch = !!search; const hasTitleWithLogo = identity2 && !!identity2.logo && !!identity2.title; - const responsiveStates = (0, import_react384.useMemo)(() => { + const responsiveStates = (0, import_react380.useMemo)(() => { return generateResponsiveStateKeys(utilities, hasSearch, hasTitleWithLogo); }, [utilities, hasSearch, hasTitleWithLogo]); - const [responsiveState, setResponsiveState] = (0, import_react384.useState)(); - const recalculateFit = (0, import_react384.useCallback)(() => { + const [responsiveState, setResponsiveState] = (0, import_react380.useState)(); + const recalculateFit = (0, import_react380.useCallback)(() => { var _a, _b, _c, _d; if (!(mainRef === null || mainRef === void 0 ? void 0 : mainRef.current) || !virtualRef.current) { setResponsiveState(responsiveStates[0]); return; } - const availableWidth = getContentBoxWidth(mainRef.current.querySelector(`.${styles_css_default138["padding-box"]}`)); + const availableWidth = getContentBoxWidth(mainRef.current.querySelector(`.${styles_css_default137["padding-box"]}`)); if (availableWidth === 0) { setResponsiveState(responsiveStates[0]); return; @@ -41437,11 +41100,11 @@ function useTopNavigation({ identity: identity2, search, utilities }) { hasSearch, availableWidth, // Get widths from the hidden top navigation - fullIdentityWidth: virtualRef.current.querySelector(`.${styles_css_default138.identity}`).getBoundingClientRect().width, - titleWidth: (_b = (_a = virtualRef.current.querySelector(`.${styles_css_default138.title}`)) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect().width) !== null && _b !== void 0 ? _b : 0, - searchSlotWidth: (_d = (_c = virtualRef.current.querySelector(`.${styles_css_default138.search}`)) === null || _c === void 0 ? void 0 : _c.getBoundingClientRect().width) !== null && _d !== void 0 ? _d : 0, + fullIdentityWidth: virtualRef.current.querySelector(`.${styles_css_default137.identity}`).getBoundingClientRect().width, + titleWidth: (_b = (_a = virtualRef.current.querySelector(`.${styles_css_default137.title}`)) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect().width) !== null && _b !== void 0 ? _b : 0, + searchSlotWidth: (_d = (_c = virtualRef.current.querySelector(`.${styles_css_default137.search}`)) === null || _c === void 0 ? void 0 : _c.getBoundingClientRect().width) !== null && _d !== void 0 ? _d : 0, searchUtilityWidth: virtualRef.current.querySelector('[data-utility-special="search"]').getBoundingClientRect().width, - utilitiesLeftPadding: parseFloat(getComputedStyle(virtualRef.current.querySelector(`.${styles_css_default138.utilities}`)).paddingLeft || "0px"), + utilitiesLeftPadding: parseFloat(getComputedStyle(virtualRef.current.querySelector(`.${styles_css_default137.utilities}`)).paddingLeft || "0px"), utilityWithLabelWidths: Array.prototype.slice.call(virtualRef.current.querySelectorAll(`[data-utility-hide="false"]`)).map((element) => element.getBoundingClientRect().width), utilityWithoutLabelWidths: Array.prototype.slice.call(virtualRef.current.querySelectorAll(`[data-utility-hide="true"]`)).map((element) => element.getBoundingClientRect().width), menuTriggerUtilityWidth: virtualRef.current.querySelector('[data-utility-special="menu-trigger"]').getBoundingClientRect().width @@ -41451,21 +41114,21 @@ function useTopNavigation({ identity: identity2, search, utilities }) { const [, containerQueryRef] = useContainerQuery(() => { recalculateFit(); }, [recalculateFit]); - const onVirtualMount = (0, import_react384.useCallback)((element) => { + const onVirtualMount = (0, import_react380.useCallback)((element) => { virtualRef.current = element; recalculateFit(); }, [recalculateFit]); - const [isSearchMinimized, setSearchMinimized] = (0, import_react384.useState)(true); + const [isSearchMinimized, setSearchMinimized] = (0, import_react380.useState)(true); const isSearchExpanded = !isSearchMinimized && hasSearch && (responsiveState === null || responsiveState === void 0 ? void 0 : responsiveState.hideSearch); - (0, import_react384.useEffect)(() => { + (0, import_react380.useEffect)(() => { if (!(responsiveState === null || responsiveState === void 0 ? void 0 : responsiveState.hideSearch)) { setSearchMinimized(true); } }, [responsiveState]); - (0, import_react384.useEffect)(() => { + (0, import_react380.useEffect)(() => { var _a, _b; if (isSearchExpanded) { - (_b = (_a = mainRef === null || mainRef === void 0 ? void 0 : mainRef.current) === null || _a === void 0 ? void 0 : _a.querySelector(`.${styles_css_default138.search} input`)) === null || _b === void 0 ? void 0 : _b.focus(); + (_b = (_a = mainRef === null || mainRef === void 0 ? void 0 : mainRef.current) === null || _a === void 0 ? void 0 : _a.querySelector(`.${styles_css_default137.search} input`)) === null || _b === void 0 ? void 0 : _b.focus(); } }, [isSearchExpanded, mainRef]); const mergedMainRef = useMergeRefs(mainRef, containerQueryRef, breakpointRef); @@ -41535,8 +41198,8 @@ function InternalTopNavigation(_a) { checkSafeUrl("TopNavigation", identity2.href); const baseProps = getBaseProps(restProps); const { mainRef, virtualRef, breakpoint, responsiveState, isSearchExpanded, onSearchUtilityClick } = useTopNavigation({ identity: identity2, search, utilities }); - const [overflowMenuOpen, setOverflowMenuOpen] = (0, import_react385.useState)(false); - const overflowMenuTriggerRef = (0, import_react385.useRef)(null); + const [overflowMenuOpen, setOverflowMenuOpen] = (0, import_react381.useState)(false); + const overflowMenuTriggerRef = (0, import_react381.useRef)(null); const isNarrowViewport = breakpoint === "default"; const isMediumViewport = breakpoint === "xxs"; const isLargeViewport = breakpoint === "s"; @@ -41555,7 +41218,7 @@ function InternalTopNavigation(_a) { setOverflowMenuOpen((overflowMenuOpen2) => !overflowMenuOpen2); }; const menuTriggerVisible = !isSearchExpanded && responsiveState.hideUtilities; - (0, import_react385.useEffect)(() => { + (0, import_react381.useEffect)(() => { setOverflowMenuOpen(false); }, [menuTriggerVisible]); useEffectOnUpdate(() => { @@ -41573,50 +41236,50 @@ function InternalTopNavigation(_a) { const showSearchUtility = isVirtual || search && responsiveState.hideSearch; const showUtilities = isVirtual || !isSearchExpanded; const showMenuTrigger = isVirtual || menuTriggerVisible; - return import_react385.default.createElement( + return import_react381.default.createElement( Wrapper, { ref: isVirtual ? virtualRef : mainRef, "aria-hidden": isVirtual ? true : void 0, // Wrapper is an alias for "div" or "header". // eslint-disable-next-line react/forbid-component-props - className: clsx_m_default(styles_css_default138["top-navigation"], { - [styles_css_default138.virtual]: isVirtual, - [styles_css_default138.hidden]: isVirtual, - [styles_css_default138.narrow]: isNarrowViewport, - [styles_css_default138.medium]: isMediumViewport + className: clsx_m_default(styles_css_default137["top-navigation"], { + [styles_css_default137.virtual]: isVirtual, + [styles_css_default137.hidden]: isVirtual, + [styles_css_default137.narrow]: isNarrowViewport, + [styles_css_default137.medium]: isMediumViewport }) }, - import_react385.default.createElement( + import_react381.default.createElement( "div", - { className: styles_css_default138["padding-box"] }, - showIdentity && import_react385.default.createElement( + { className: styles_css_default137["padding-box"] }, + showIdentity && import_react381.default.createElement( "div", - { className: clsx_m_default(styles_css_default138.identity, !identity2.logo && styles_css_default138["no-logo"]) }, - import_react385.default.createElement( + { className: clsx_m_default(styles_css_default137.identity, !identity2.logo && styles_css_default137["no-logo"]) }, + import_react381.default.createElement( "a", - { className: styles_css_default138["identity-link"], href: identity2.href, onClick: onIdentityClick }, - identity2.logo && import_react385.default.createElement("img", { role: "img", src: (_a2 = identity2.logo) === null || _a2 === void 0 ? void 0 : _a2.src, alt: (_b = identity2.logo) === null || _b === void 0 ? void 0 : _b.alt, className: clsx_m_default(styles_css_default138.logo, { - [styles_css_default138.narrow]: isNarrowViewport + { className: styles_css_default137["identity-link"], href: identity2.href, onClick: onIdentityClick }, + identity2.logo && import_react381.default.createElement("img", { role: "img", src: (_a2 = identity2.logo) === null || _a2 === void 0 ? void 0 : _a2.src, alt: (_b = identity2.logo) === null || _b === void 0 ? void 0 : _b.alt, className: clsx_m_default(styles_css_default137.logo, { + [styles_css_default137.narrow]: isNarrowViewport }) }), - showTitle && import_react385.default.createElement("span", { className: styles_css_default138.title }, identity2.title) + showTitle && import_react381.default.createElement("span", { className: styles_css_default137.title }, identity2.title) ) ), - showSearchSlot && import_react385.default.createElement( + showSearchSlot && import_react381.default.createElement( "div", - { className: styles_css_default138.inputs }, - import_react385.default.createElement("div", { className: clsx_m_default(styles_css_default138.search, !isVirtual && isSearchExpanded && styles_css_default138["search-expanded"]) }, search) + { className: styles_css_default137.inputs }, + import_react381.default.createElement("div", { className: clsx_m_default(styles_css_default137.search, !isVirtual && isSearchExpanded && styles_css_default137["search-expanded"]) }, search) ), - import_react385.default.createElement( + import_react381.default.createElement( "div", - { className: styles_css_default138.utilities }, - showSearchUtility && import_react385.default.createElement( + { className: styles_css_default137.utilities }, + showSearchUtility && import_react381.default.createElement( "div", - { className: clsx_m_default(styles_css_default138["utility-wrapper"], styles_css_default138["utility-type-button"], styles_css_default138["utility-type-button-link"], { - [styles_css_default138.narrow]: isNarrowViewport, - [styles_css_default138.medium]: isMediumViewport + { className: clsx_m_default(styles_css_default137["utility-wrapper"], styles_css_default137["utility-type-button"], styles_css_default137["utility-type-button-link"], { + [styles_css_default137.narrow]: isNarrowViewport, + [styles_css_default137.medium]: isMediumViewport }), "data-utility-special": "search" }, - import_react385.default.createElement(Utility, { hideText: true, definition: { + import_react381.default.createElement(Utility, { hideText: true, definition: { type: "button", iconName: isSearchExpanded ? "close" : "search", ariaLabel: isSearchExpanded ? i18n("i18nStrings.searchDismissIconAriaLabel", i18nStrings === null || i18nStrings === void 0 ? void 0 : i18nStrings.searchDismissIconAriaLabel) : i18n("i18nStrings.searchIconAriaLabel", i18nStrings === null || i18nStrings === void 0 ? void 0 : i18nStrings.searchIconAriaLabel), @@ -41628,13 +41291,13 @@ function InternalTopNavigation(_a) { const hideText = !!responsiveState.hideUtilityText; const isLast = (isVirtual || !showMenuTrigger) && i2 === utilities.length - 1; const offsetRight = isLast && isLargeViewport ? "xxl" : isLast ? "l" : void 0; - return import_react385.default.createElement( + return import_react381.default.createElement( "div", - { key: i2, className: clsx_m_default(styles_css_default138["utility-wrapper"], styles_css_default138[`utility-type-${utility.type}`], utility.type === "button" && styles_css_default138[`utility-type-button-${(_a3 = utility.variant) !== null && _a3 !== void 0 ? _a3 : "link"}`], { - [styles_css_default138.narrow]: isNarrowViewport, - [styles_css_default138.medium]: isMediumViewport + { key: i2, className: clsx_m_default(styles_css_default137["utility-wrapper"], styles_css_default137[`utility-type-${utility.type}`], utility.type === "button" && styles_css_default137[`utility-type-button-${(_a3 = utility.variant) !== null && _a3 !== void 0 ? _a3 : "link"}`], { + [styles_css_default137.narrow]: isNarrowViewport, + [styles_css_default137.medium]: isMediumViewport }), "data-utility-index": i2, "data-utility-hide": `${hideText}` }, - import_react385.default.createElement(Utility, { hideText, definition: utility, offsetRight }) + import_react381.default.createElement(Utility, { hideText, definition: utility, offsetRight }) ); }), isVirtual && utilities.map((utility, i2) => { @@ -41642,39 +41305,39 @@ function InternalTopNavigation(_a) { const hideText = !responsiveState.hideUtilityText; const isLast = !showMenuTrigger && i2 === utilities.length - 1; const offsetRight = isLast && isLargeViewport ? "xxl" : isLast ? "l" : void 0; - return import_react385.default.createElement( + return import_react381.default.createElement( "div", - { key: i2, className: clsx_m_default(styles_css_default138["utility-wrapper"], styles_css_default138[`utility-type-${utility.type}`], utility.type === "button" && styles_css_default138[`utility-type-button-${(_a3 = utility.variant) !== null && _a3 !== void 0 ? _a3 : "link"}`], { - [styles_css_default138.narrow]: isNarrowViewport, - [styles_css_default138.medium]: isMediumViewport + { key: i2, className: clsx_m_default(styles_css_default137["utility-wrapper"], styles_css_default137[`utility-type-${utility.type}`], utility.type === "button" && styles_css_default137[`utility-type-button-${(_a3 = utility.variant) !== null && _a3 !== void 0 ? _a3 : "link"}`], { + [styles_css_default137.narrow]: isNarrowViewport, + [styles_css_default137.medium]: isMediumViewport }), "data-utility-index": i2, "data-utility-hide": `${hideText}` }, - import_react385.default.createElement(Utility, { hideText, definition: utility, offsetRight }) + import_react381.default.createElement(Utility, { hideText, definition: utility, offsetRight }) ); }), - showMenuTrigger && import_react385.default.createElement( + showMenuTrigger && import_react381.default.createElement( "div", - { className: clsx_m_default(styles_css_default138["utility-wrapper"], styles_css_default138["utility-type-menu-dropdown"], { - [styles_css_default138.narrow]: isNarrowViewport, - [styles_css_default138.medium]: isMediumViewport + { className: clsx_m_default(styles_css_default137["utility-wrapper"], styles_css_default137["utility-type-menu-dropdown"], { + [styles_css_default137.narrow]: isNarrowViewport, + [styles_css_default137.medium]: isMediumViewport }), "data-utility-special": "menu-trigger" }, - import_react385.default.createElement(ButtonTrigger, { expanded: overflowMenuOpen, onClick: toggleOverflowMenu, offsetRight: "l", ref: !isVirtual ? overflowMenuTriggerRef : void 0 }, i18n("i18nStrings.overflowMenuTriggerText", i18nStrings === null || i18nStrings === void 0 ? void 0 : i18nStrings.overflowMenuTriggerText)) + import_react381.default.createElement(ButtonTrigger, { expanded: overflowMenuOpen, onClick: toggleOverflowMenu, offsetRight: "l", ref: !isVirtual ? overflowMenuTriggerRef : void 0 }, i18n("i18nStrings.overflowMenuTriggerText", i18nStrings === null || i18nStrings === void 0 ? void 0 : i18nStrings.overflowMenuTriggerText)) ) ) ) ); }; - return import_react385.default.createElement( + return import_react381.default.createElement( "div", Object.assign({}, baseProps, { ref: __internalRootRef }), - import_react385.default.createElement( + import_react381.default.createElement( VisualContext, { contextName: "top-navigation" }, content(true), content(false), - menuTriggerVisible && overflowMenuOpen && import_react385.default.createElement( + menuTriggerVisible && overflowMenuOpen && import_react381.default.createElement( "div", - { className: styles_css_default138["overflow-menu-drawer"] }, - import_react385.default.createElement(overflow_menu_default, { headerText: i18nStrings === null || i18nStrings === void 0 ? void 0 : i18nStrings.overflowMenuTitleText, dismissIconAriaLabel: i18nStrings === null || i18nStrings === void 0 ? void 0 : i18nStrings.overflowMenuDismissIconAriaLabel, backIconAriaLabel: i18nStrings === null || i18nStrings === void 0 ? void 0 : i18nStrings.overflowMenuBackIconAriaLabel, items: utilities.filter((utility, i2) => (!responsiveState.hideUtilities || responsiveState.hideUtilities.indexOf(i2) !== -1) && !utility.disableUtilityCollapse), onClose: toggleOverflowMenu }) + { className: styles_css_default137["overflow-menu-drawer"] }, + import_react381.default.createElement(overflow_menu_default, { headerText: i18nStrings === null || i18nStrings === void 0 ? void 0 : i18nStrings.overflowMenuTitleText, dismissIconAriaLabel: i18nStrings === null || i18nStrings === void 0 ? void 0 : i18nStrings.overflowMenuDismissIconAriaLabel, backIconAriaLabel: i18nStrings === null || i18nStrings === void 0 ? void 0 : i18nStrings.overflowMenuBackIconAriaLabel, items: utilities.filter((utility, i2) => (!responsiveState.hideUtilities || responsiveState.hideUtilities.indexOf(i2) !== -1) && !utility.disableUtilityCollapse), onClose: toggleOverflowMenu }) ) ) ); @@ -41684,22 +41347,22 @@ function InternalTopNavigation(_a) { function TopNavigation(_a) { var { utilities = [] } = _a, restProps = __rest(_a, ["utilities"]); const baseComponentProps = useBaseComponent("TopNavigation"); - return import_react386.default.createElement(InternalTopNavigation, Object.assign({}, baseComponentProps, { utilities }, restProps)); + return import_react382.default.createElement(InternalTopNavigation, Object.assign({}, baseComponentProps, { utilities }, restProps)); } applyDisplayName(TopNavigation, "TopNavigation"); // node_modules/@cloudscape-design/components/tutorial-panel/index.js -var import_react392 = __toESM(require_react()); +var import_react388 = __toESM(require_react()); // node_modules/@cloudscape-design/components/tutorial-panel/components/tutorial-detail-view/index.js -var import_react390 = __toESM(require_react()); +var import_react386 = __toESM(require_react()); // node_modules/@cloudscape-design/components/tutorial-panel/components/tutorial-detail-view/congratulation-screen.js -var import_react387 = __toESM(require_react()); +var import_react383 = __toESM(require_react()); // node_modules/@cloudscape-design/components/tutorial-panel/components/tutorial-detail-view/styles.css.js import "/home/a171157/personal-repos/deep-racer/community-contributions/deepracer-custom-console/new/node_modules/@cloudscape-design/components/tutorial-panel/components/tutorial-detail-view/styles.scoped.css"; -var styles_css_default139 = { +var styles_css_default138 = { "tutorial-list": "awsui_tutorial-list_1u70p_1vweo_181", "tutorial-title": "awsui_tutorial-title_1u70p_1vweo_217", "task": "awsui_task_1u70p_1vweo_224", @@ -41724,37 +41387,37 @@ var styles_css_default139 = { // node_modules/@cloudscape-design/components/tutorial-panel/components/tutorial-detail-view/congratulation-screen.js function CongratulationScreen({ children, onFeedbackClick, i18nStrings }) { - return import_react387.default.createElement( + return import_react383.default.createElement( internal_default5, { size: "xxl" }, - import_react387.default.createElement( + import_react383.default.createElement( internal_default5, { size: "xl" }, - import_react387.default.createElement( + import_react383.default.createElement( "div", - { className: styles_css_default139["congratulation-message"] }, - import_react387.default.createElement(StatusIndicator, { __size: "inherit", type: "success", className: styles_css_default139["congratulation-message--status"] }), - import_react387.default.createElement("div", { className: styles_css_default139["completion-screen-title"] }, i18nStrings.completionScreenTitle) + { className: styles_css_default138["congratulation-message"] }, + import_react383.default.createElement(StatusIndicator, { __size: "inherit", type: "success", className: styles_css_default138["congratulation-message--status"] }), + import_react383.default.createElement("div", { className: styles_css_default138["completion-screen-title"] }, i18nStrings.completionScreenTitle) ), - import_react387.default.createElement( + import_react383.default.createElement( InternalBox, { color: "text-body-secondary" }, - import_react387.default.createElement("div", { className: clsx_m_default({ - [styles_css_default139["completion-screen-description"]]: true, - [styles_css_default139["plaintext-congratulation-description"]]: typeof children === "string" + import_react383.default.createElement("div", { className: clsx_m_default({ + [styles_css_default138["completion-screen-description"]]: true, + [styles_css_default138["plaintext-congratulation-description"]]: typeof children === "string" }) }, children) ) ), - import_react387.default.createElement("div", { className: styles_css_default139.divider }), - onFeedbackClick && import_react387.default.createElement(internal_default6, { onFollow: onFeedbackClick, className: styles_css_default139["feedback-link"], variant: "primary" }, i18nStrings.feedbackLinkText) + import_react383.default.createElement("div", { className: styles_css_default138.divider }), + onFeedbackClick && import_react383.default.createElement(internal_default6, { onFollow: onFeedbackClick, className: styles_css_default138["feedback-link"], variant: "primary" }, i18nStrings.feedbackLinkText) ); } // node_modules/@cloudscape-design/components/tutorial-panel/components/tutorial-detail-view/task-list.js -var import_react389 = __toESM(require_react()); +var import_react385 = __toESM(require_react()); // node_modules/@cloudscape-design/components/tutorial-panel/components/tutorial-detail-view/task.js -var import_react388 = __toESM(require_react()); +var import_react384 = __toESM(require_react()); function getStatusIndicatorType(taskIndex, currentTaskIndex) { if (taskIndex < currentTaskIndex) { return "success"; @@ -41766,31 +41429,31 @@ function getStatusIndicatorType(taskIndex, currentTaskIndex) { } function Task({ task, taskIndex, currentTaskIndex, expanded, onToggleExpand, i18nStrings }) { const statusIndicatorType = getStatusIndicatorType(taskIndex, currentTaskIndex); - const onExpandChange = (0, import_react388.useCallback)(() => { + const onExpandChange = (0, import_react384.useCallback)(() => { onToggleExpand(taskIndex); }, [onToggleExpand, taskIndex]); - return import_react388.default.createElement( + return import_react384.default.createElement( "li", - { className: styles_css_default139.task }, - import_react388.default.createElement( + { className: styles_css_default138.task }, + import_react384.default.createElement( internal_default5, { size: "xxs" }, - import_react388.default.createElement( + import_react384.default.createElement( "div", - { className: styles_css_default139["task-title"] }, - import_react388.default.createElement(StatusIndicator, { __size: "inherit", type: statusIndicatorType, iconAriaLabel: i18nStrings.labelsTaskStatus[statusIndicatorType], className: styles_css_default139["task-title--status"] }), - import_react388.default.createElement(InternalBox, { variant: "h3", padding: { left: "xxxs", vertical: "n" }, fontSize: "heading-s", color: taskIndex < currentTaskIndex ? "text-status-success" : "text-status-inactive" }, i18nStrings.taskTitle(taskIndex, task.title)) + { className: styles_css_default138["task-title"] }, + import_react384.default.createElement(StatusIndicator, { __size: "inherit", type: statusIndicatorType, iconAriaLabel: i18nStrings.labelsTaskStatus[statusIndicatorType], className: styles_css_default138["task-title--status"] }), + import_react384.default.createElement(InternalBox, { variant: "h3", padding: { left: "xxxs", vertical: "n" }, fontSize: "heading-s", color: taskIndex < currentTaskIndex ? "text-status-success" : "text-status-inactive" }, i18nStrings.taskTitle(taskIndex, task.title)) ), - import_react388.default.createElement( + import_react384.default.createElement( "div", - { className: styles_css_default139["expandable-section-wrapper"] }, - import_react388.default.createElement( + { className: styles_css_default138["expandable-section-wrapper"] }, + import_react384.default.createElement( InternalExpandableSection, - { header: import_react388.default.createElement("span", { className: styles_css_default139["expandable-section-header"] }, i18nStrings.labelTotalSteps(task.steps.length)), expanded, onChange: onExpandChange, headerAriaLabel: joinStrings(i18nStrings.taskTitle(taskIndex, task.title), i18nStrings.labelTotalSteps(task.steps.length)) }, - import_react388.default.createElement("ol", { className: styles_css_default139["step-list"] }, task.steps.map((step, stepIndex) => import_react388.default.createElement( + { header: import_react384.default.createElement("span", { className: styles_css_default138["expandable-section-header"] }, i18nStrings.labelTotalSteps(task.steps.length)), expanded, onChange: onExpandChange, headerAriaLabel: joinStrings(i18nStrings.taskTitle(taskIndex, task.title), i18nStrings.labelTotalSteps(task.steps.length)) }, + import_react384.default.createElement("ol", { className: styles_css_default138["step-list"] }, task.steps.map((step, stepIndex) => import_react384.default.createElement( "li", - { key: stepIndex, className: styles_css_default139.step }, - import_react388.default.createElement(InternalBox, { color: "text-body-secondary", fontSize: "body-m", padding: { left: "l" }, className: styles_css_default139["step-title"] }, i18nStrings.stepTitle(stepIndex, step.title)) + { key: stepIndex, className: styles_css_default138.step }, + import_react384.default.createElement(InternalBox, { color: "text-body-secondary", fontSize: "body-m", padding: { left: "l" }, className: styles_css_default138["step-title"] }, i18nStrings.stepTitle(stepIndex, step.title)) ))) ) ) @@ -41801,24 +41464,24 @@ function Task({ task, taskIndex, currentTaskIndex, expanded, onToggleExpand, i18 // node_modules/@cloudscape-design/components/tutorial-panel/components/tutorial-detail-view/task-list.js function TaskList({ tasks, onExitTutorial, currentGlobalStepIndex, i18nStrings }) { const currentTaskIndex = getStepInfo(tasks, currentGlobalStepIndex !== null && currentGlobalStepIndex !== void 0 ? currentGlobalStepIndex : 0).taskIndex; - const [expandedTasks, setExpandedTasks] = (0, import_react389.useState)({ [currentTaskIndex]: true }); - const onToggleExpand = (0, import_react389.useCallback)((stepIndex) => { + const [expandedTasks, setExpandedTasks] = (0, import_react385.useState)({ [currentTaskIndex]: true }); + const onToggleExpand = (0, import_react385.useCallback)((stepIndex) => { setExpandedTasks((prevTasks) => Object.assign(Object.assign({}, prevTasks), { [stepIndex]: !prevTasks[stepIndex] })); }, []); - (0, import_react389.useEffect)(() => { + (0, import_react385.useEffect)(() => { setExpandedTasks({ [currentTaskIndex]: true }); }, [currentTaskIndex]); - return import_react389.default.createElement( + return import_react385.default.createElement( internal_default5, { size: "xxl" }, - import_react389.default.createElement("ol", { className: styles_css_default139["tutorial-list"] }, tasks.map((task, index) => { + import_react385.default.createElement("ol", { className: styles_css_default138["tutorial-list"] }, tasks.map((task, index) => { var _a; - return import_react389.default.createElement(Task, { task, key: index, taskIndex: index, currentTaskIndex, expanded: (_a = expandedTasks[index]) !== null && _a !== void 0 ? _a : false, onToggleExpand, i18nStrings }); + return import_react385.default.createElement(Task, { task, key: index, taskIndex: index, currentTaskIndex, expanded: (_a = expandedTasks[index]) !== null && _a !== void 0 ? _a : false, onToggleExpand, i18nStrings }); })), - import_react389.default.createElement( + import_react385.default.createElement( InternalBox, { margin: { top: "xxxs" } }, - import_react389.default.createElement(InternalButton, { onClick: onExitTutorial, formAction: "none", className: styles_css_default139["dismiss-button"] }, i18nStrings.dismissTutorialButtonText) + import_react385.default.createElement(InternalButton, { onClick: onExitTutorial, formAction: "none", className: styles_css_default138["dismiss-button"] }, i18nStrings.dismissTutorialButtonText) ) ); } @@ -41826,38 +41489,38 @@ function TaskList({ tasks, onExitTutorial, currentGlobalStepIndex, i18nStrings } // node_modules/@cloudscape-design/components/tutorial-panel/components/tutorial-detail-view/index.js function TutorialDetailView({ tutorial, onExitTutorial: onExitTutorialHandler, currentStepIndex = 0, onFeedbackClick: onFeedbackClickHandler, i18nStrings }) { const isRefresh = useVisualRefresh(); - const onExitTutorial = (0, import_react390.useCallback)(() => { + const onExitTutorial = (0, import_react386.useCallback)(() => { fireNonCancelableEvent(onExitTutorialHandler, { tutorial }); }, [onExitTutorialHandler, tutorial]); - const onFeedbackClick = (0, import_react390.useMemo)(() => onFeedbackClickHandler && (() => fireNonCancelableEvent(onFeedbackClickHandler, { tutorial })), [onFeedbackClickHandler, tutorial]); - return import_react390.default.createElement( - import_react390.default.Fragment, + const onFeedbackClick = (0, import_react386.useMemo)(() => onFeedbackClickHandler && (() => fireNonCancelableEvent(onFeedbackClickHandler, { tutorial })), [onFeedbackClickHandler, tutorial]); + return import_react386.default.createElement( + import_react386.default.Fragment, null, - import_react390.default.createElement( + import_react386.default.createElement( internal_default5, { size: "xl" }, - import_react390.default.createElement( + import_react386.default.createElement( "div", - { className: styles_css_default139["tutorial-title"] }, - import_react390.default.createElement(InternalButton, { variant: "icon", onClick: onExitTutorial, ariaLabel: i18nStrings.labelExitTutorial, formAction: "none", iconName: "arrow-left" }), - import_react390.default.createElement(InternalBox, { variant: "h2", fontSize: isRefresh ? "heading-m" : "heading-l", padding: { top: "xxs" }, margin: { left: "s" } }, tutorial.title) + { className: styles_css_default138["tutorial-title"] }, + import_react386.default.createElement(InternalButton, { variant: "icon", onClick: onExitTutorial, ariaLabel: i18nStrings.labelExitTutorial, formAction: "none", iconName: "arrow-left" }), + import_react386.default.createElement(InternalBox, { variant: "h2", fontSize: isRefresh ? "heading-m" : "heading-l", padding: { top: "xxs" }, margin: { left: "s" } }, tutorial.title) ), - import_react390.default.createElement( + import_react386.default.createElement( "div", null, - import_react390.default.createElement("div", { role: "status" }, tutorial.completed && import_react390.default.createElement(CongratulationScreen, { onFeedbackClick, i18nStrings }, tutorial.completedScreenDescription)), - !tutorial.completed && import_react390.default.createElement(TaskList, { tasks: tutorial.tasks, onExitTutorial, currentGlobalStepIndex: currentStepIndex, i18nStrings }) + import_react386.default.createElement("div", { role: "status" }, tutorial.completed && import_react386.default.createElement(CongratulationScreen, { onFeedbackClick, i18nStrings }, tutorial.completedScreenDescription)), + !tutorial.completed && import_react386.default.createElement(TaskList, { tasks: tutorial.tasks, onExitTutorial, currentGlobalStepIndex: currentStepIndex, i18nStrings }) ) ) ); } // node_modules/@cloudscape-design/components/tutorial-panel/components/tutorial-list/index.js -var import_react391 = __toESM(require_react()); +var import_react387 = __toESM(require_react()); // node_modules/@cloudscape-design/components/tutorial-panel/components/tutorial-list/styles.css.js import "/home/a171157/personal-repos/deep-racer/community-contributions/deepracer-custom-console/new/node_modules/@cloudscape-design/components/tutorial-panel/components/tutorial-list/styles.scoped.css"; -var styles_css_default140 = { +var styles_css_default139 = { "content-enter": "awsui_content-enter_ig8mp_5zp7k_193", "awsui-motion-fade-in": "awsui_awsui-motion-fade-in_ig8mp_5zp7k_1", "tutorial-list": "awsui_tutorial-list_ig8mp_5zp7k_215", @@ -41882,32 +41545,32 @@ var styles_css_default140 = { function TutorialList({ i18nStrings, tutorials, loading = false, onStartTutorial, downloadUrl }) { checkSafeUrl("TutorialPanel", downloadUrl); const isRefresh = useVisualRefresh(); - return import_react391.default.createElement( - import_react391.default.Fragment, + return import_react387.default.createElement( + import_react387.default.Fragment, null, - import_react391.default.createElement( + import_react387.default.createElement( internal_default5, { size: "s" }, - import_react391.default.createElement( + import_react387.default.createElement( internal_default5, { size: "m" }, - import_react391.default.createElement(InternalBox, { variant: "h2", fontSize: isRefresh ? "heading-m" : "heading-l", padding: { bottom: "n" } }, i18nStrings.tutorialListTitle), - import_react391.default.createElement(InternalBox, { variant: "p", color: "text-body-secondary", padding: "n" }, i18nStrings.tutorialListDescription) + import_react387.default.createElement(InternalBox, { variant: "h2", fontSize: isRefresh ? "heading-m" : "heading-l", padding: { bottom: "n" } }, i18nStrings.tutorialListTitle), + import_react387.default.createElement(InternalBox, { variant: "p", color: "text-body-secondary", padding: "n" }, i18nStrings.tutorialListDescription) ), - import_react391.default.createElement( + import_react387.default.createElement( internal_default5, { size: "l" }, - downloadUrl && import_react391.default.createElement( + downloadUrl && import_react387.default.createElement( "a", - { href: downloadUrl, target: "_blank", rel: "noopener noreferrer", className: styles_css_default140["download-link"], "aria-label": i18nStrings.labelTutorialListDownloadLink }, - import_react391.default.createElement(internal_default, { name: "download" }), - import_react391.default.createElement(InternalBox, { padding: { left: "xs" }, color: "inherit", fontWeight: "bold", display: "inline" }, i18nStrings.tutorialListDownloadLinkText) + { href: downloadUrl, target: "_blank", rel: "noopener noreferrer", className: styles_css_default139["download-link"], "aria-label": i18nStrings.labelTutorialListDownloadLink }, + import_react387.default.createElement(internal_default, { name: "download" }), + import_react387.default.createElement(InternalBox, { padding: { left: "xs" }, color: "inherit", fontWeight: "bold", display: "inline" }, i18nStrings.tutorialListDownloadLinkText) ), - loading ? import_react391.default.createElement( + loading ? import_react387.default.createElement( StatusIndicator, { type: "loading" }, - import_react391.default.createElement(internal_default2, { tagName: "span" }, i18nStrings.loadingText) - ) : import_react391.default.createElement("ul", { className: styles_css_default140["tutorial-list"], role: "list" }, tutorials.map((tutorial, index) => import_react391.default.createElement(Tutorial, { tutorial, key: index, onStartTutorial, i18nStrings }))) + import_react387.default.createElement(internal_default2, { tagName: "span" }, i18nStrings.loadingText) + ) : import_react387.default.createElement("ul", { className: styles_css_default139["tutorial-list"], role: "list" }, tutorials.map((tutorial, index) => import_react387.default.createElement(Tutorial, { tutorial, key: index, onStartTutorial, i18nStrings }))) ) ) ); @@ -41919,65 +41582,65 @@ function Tutorial({ tutorial, onStartTutorial: onStartTutorialEventHandler, i18n const triggerControldId = useUniqueId(); const headerId = useUniqueId(); const isRefresh = useVisualRefresh(); - const onStartTutorial = (0, import_react391.useCallback)(() => { + const onStartTutorial = (0, import_react387.useCallback)(() => { fireNonCancelableEvent(onStartTutorialEventHandler, { tutorial }); }, [onStartTutorialEventHandler, tutorial]); - const [expanded, setExpanded] = (0, import_react391.useState)(!tutorial.prerequisitesNeeded && !tutorial.completed); - const onClick = (0, import_react391.useCallback)(() => { + const [expanded, setExpanded] = (0, import_react387.useState)(!tutorial.prerequisitesNeeded && !tutorial.completed); + const onClick = (0, import_react387.useCallback)(() => { setExpanded((expanded2) => !expanded2); }, []); - return import_react391.default.createElement( + return import_react387.default.createElement( "li", - { className: styles_css_default140["tutorial-box"], role: "listitem" }, - import_react391.default.createElement( + { className: styles_css_default139["tutorial-box"], role: "listitem" }, + import_react387.default.createElement( internal_default5, { size: "xs" }, - import_react391.default.createElement( + import_react387.default.createElement( "div", - { className: styles_css_default140["tutorial-box-title"] }, - import_react391.default.createElement(InternalBox, { variant: "h3", fontSize: isRefresh ? "heading-s" : "heading-m", id: headerId, margin: { right: "xs" }, padding: "n", className: styles_css_default140.title }, tutorial.title), - import_react391.default.createElement( + { className: styles_css_default139["tutorial-box-title"] }, + import_react387.default.createElement(InternalBox, { variant: "h3", fontSize: isRefresh ? "heading-s" : "heading-m", id: headerId, margin: { right: "xs" }, padding: "n", className: styles_css_default139.title }, tutorial.title), + import_react387.default.createElement( "div", - { className: styles_css_default140["button-wrapper"] }, - import_react391.default.createElement(InternalButton, { id: triggerControldId, variant: "icon", ariaExpanded: expanded, __nativeAttributes: { + { className: styles_css_default139["button-wrapper"] }, + import_react387.default.createElement(InternalButton, { id: triggerControldId, variant: "icon", ariaExpanded: expanded, __nativeAttributes: { "aria-controls": controlId, "aria-labelledby": headerId - }, formAction: "none", onClick, className: expanded ? styles_css_default140["collapse-button"] : styles_css_default140["expand-button"], iconName: expanded ? "angle-up" : "angle-down" }) + }, formAction: "none", onClick, className: expanded ? styles_css_default139["collapse-button"] : styles_css_default139["expand-button"], iconName: expanded ? "angle-up" : "angle-down" }) ) ), - tutorial.completed ? import_react391.default.createElement(StatusIndicator, { __size: "inherit", type: "success", className: styles_css_default140.completed, wrapText: true }, i18nStrings.tutorialCompletedText) : null + tutorial.completed ? import_react387.default.createElement(StatusIndicator, { __size: "inherit", type: "success", className: styles_css_default139.completed, wrapText: true }, i18nStrings.tutorialCompletedText) : null ), - import_react391.default.createElement( + import_react387.default.createElement( "div", { "aria-live": "polite" }, - import_react391.default.createElement( + import_react387.default.createElement( CSSTransition_default, - { in: expanded, timeout: 30, classNames: { enter: styles_css_default140["content-enter"] } }, - import_react391.default.createElement( + { in: expanded, timeout: 30, classNames: { enter: styles_css_default139["content-enter"] } }, + import_react387.default.createElement( "div", - { className: clsx_m_default(styles_css_default140["expandable-section"], expanded && styles_css_default140.expanded), id: controlId }, - import_react391.default.createElement( + { className: clsx_m_default(styles_css_default139["expandable-section"], expanded && styles_css_default139.expanded), id: controlId }, + import_react387.default.createElement( internal_default5, { size: "l" }, - import_react391.default.createElement( + import_react387.default.createElement( internal_default5, { size: "m" }, - tutorial.prerequisitesNeeded && tutorial.prerequisitesAlert && import_react391.default.createElement(internal_default4, { type: "info", className: styles_css_default140["prerequisites-alert"] }, tutorial.prerequisitesAlert), - import_react391.default.createElement( + tutorial.prerequisitesNeeded && tutorial.prerequisitesAlert && import_react387.default.createElement(internal_default4, { type: "info", className: styles_css_default139["prerequisites-alert"] }, tutorial.prerequisitesAlert), + import_react387.default.createElement( internal_default5, { size: "s" }, - import_react391.default.createElement( + import_react387.default.createElement( InternalBox, { color: "text-body-secondary" }, - import_react391.default.createElement("div", { className: clsx_m_default(styles_css_default140["tutorial-description"], typeof tutorial.description === "string" && styles_css_default140["tutorial-description-plaintext"]) }, tutorial.description) + import_react387.default.createElement("div", { className: clsx_m_default(styles_css_default139["tutorial-description"], typeof tutorial.description === "string" && styles_css_default139["tutorial-description-plaintext"]) }, tutorial.description) ), - tutorial.learnMoreUrl && import_react391.default.createElement(internal_default6, { href: tutorial.learnMoreUrl, className: styles_css_default140["learn-more-link"], externalIconAriaLabel: i18nStrings.labelLearnMoreExternalIcon, ariaLabel: i18nStrings.labelLearnMoreLink, external: true, variant: "primary" }, i18nStrings.learnMoreLinkText) + tutorial.learnMoreUrl && import_react387.default.createElement(internal_default6, { href: tutorial.learnMoreUrl, className: styles_css_default139["learn-more-link"], externalIconAriaLabel: i18nStrings.labelLearnMoreExternalIcon, ariaLabel: i18nStrings.labelLearnMoreLink, external: true, variant: "primary" }, i18nStrings.learnMoreLinkText) ) ), - import_react391.default.createElement( + import_react387.default.createElement( InternalBox, { margin: { bottom: "xxs" } }, - import_react391.default.createElement(InternalButton, { onClick: onStartTutorial, disabled: (_a = tutorial.prerequisitesNeeded) !== null && _a !== void 0 ? _a : false, formAction: "none", className: styles_css_default140.start }, tutorial.completed ? i18nStrings.restartTutorialButtonText : i18nStrings.startTutorialButtonText) + import_react387.default.createElement(InternalButton, { onClick: onStartTutorial, disabled: (_a = tutorial.prerequisitesNeeded) !== null && _a !== void 0 ? _a : false, formAction: "none", className: styles_css_default139.start }, tutorial.completed ? i18nStrings.restartTutorialButtonText : i18nStrings.startTutorialButtonText) ) ) ) @@ -41988,7 +41651,7 @@ function Tutorial({ tutorial, onStartTutorial: onStartTutorialEventHandler, i18n // node_modules/@cloudscape-design/components/tutorial-panel/styles.css.js import "/home/a171157/personal-repos/deep-racer/community-contributions/deepracer-custom-console/new/node_modules/@cloudscape-design/components/tutorial-panel/styles.scoped.css"; -var styles_css_default141 = { +var styles_css_default140 = { "tutorial-panel": "awsui_tutorial-panel_1oin5_10lkc_181" }; @@ -41997,23 +41660,23 @@ function TutorialPanel(_a) { var { i18nStrings, loading, tutorials, onFeedbackClick, downloadUrl } = _a, restProps = __rest(_a, ["i18nStrings", "loading", "tutorials", "onFeedbackClick", "downloadUrl"]); const { __internalRootRef } = useBaseComponent("TutorialPanel"); const baseProps = getBaseProps(restProps); - const context = (0, import_react392.useContext)(hotspotContext); - return import_react392.default.createElement( - import_react392.default.Fragment, + const context = (0, import_react388.useContext)(hotspotContext); + return import_react388.default.createElement( + import_react388.default.Fragment, null, - import_react392.default.createElement("div", Object.assign({}, baseProps, { className: clsx_m_default(baseProps.className, styles_css_default141["tutorial-panel"]), ref: __internalRootRef }), context.currentTutorial ? import_react392.default.createElement(TutorialDetailView, { i18nStrings, tutorial: context.currentTutorial, onExitTutorial: context.onExitTutorial, currentStepIndex: context.currentStepIndex, onFeedbackClick }) : import_react392.default.createElement(TutorialList, { i18nStrings, tutorials, loading, onStartTutorial: context.onStartTutorial, downloadUrl })) + import_react388.default.createElement("div", Object.assign({}, baseProps, { className: clsx_m_default(baseProps.className, styles_css_default140["tutorial-panel"]), ref: __internalRootRef }), context.currentTutorial ? import_react388.default.createElement(TutorialDetailView, { i18nStrings, tutorial: context.currentTutorial, onExitTutorial: context.onExitTutorial, currentStepIndex: context.currentStepIndex, onFeedbackClick }) : import_react388.default.createElement(TutorialList, { i18nStrings, tutorials, loading, onStartTutorial: context.onStartTutorial, downloadUrl })) ); } applyDisplayName(TutorialPanel, "TutorialPanel"); // node_modules/@cloudscape-design/components/wizard/index.js -var import_react400 = __toESM(require_react()); +var import_react396 = __toESM(require_react()); // node_modules/@cloudscape-design/components/wizard/analytics.js -var import_react393 = __toESM(require_react()); +var import_react389 = __toESM(require_react()); function useFunnelChangeEvent(funnelInteractionId, funnelIdentifier, steps) { - const listenForStepChanges = (0, import_react393.useRef)(false); - (0, import_react393.useEffect)(() => { + const listenForStepChanges = (0, import_react389.useRef)(false); + (0, import_react389.useEffect)(() => { const handle = setTimeout(() => listenForStepChanges.current = true, 0); return () => { clearTimeout(handle); @@ -42021,7 +41684,7 @@ function useFunnelChangeEvent(funnelInteractionId, funnelIdentifier, steps) { }; }, [funnelInteractionId]); const stepTitles = steps.map((step) => step.title).join(); - (0, import_react393.useEffect)(() => { + (0, import_react389.useEffect)(() => { if (!funnelInteractionId || !listenForStepChanges.current) { return; } @@ -42046,13 +41709,13 @@ function getStepConfiguration(steps) { } // node_modules/@cloudscape-design/components/wizard/internal.js -var import_react399 = __toESM(require_react()); +var import_react395 = __toESM(require_react()); // node_modules/@cloudscape-design/components/wizard/wizard-form.js -var import_react397 = __toESM(require_react()); +var import_react393 = __toESM(require_react()); // node_modules/@cloudscape-design/components/wizard/wizard-actions.js -var import_react395 = __toESM(require_react()); +var import_react391 = __toESM(require_react()); // node_modules/@cloudscape-design/components/wizard/analytics-metadata/utils.js var getNavigationActionDetail = (targetStepIndex, reason, addAction = false, label) => { @@ -42067,8 +41730,8 @@ var getNavigationActionDetail = (targetStepIndex, reason, addAction = false, lab }; // node_modules/@cloudscape-design/components/wizard/unmount.js -var import_react394 = __toESM(require_react()); -var Unmount = class extends import_react394.default.Component { +var import_react390 = __toESM(require_react()); +var Unmount = class extends import_react390.default.Component { componentWillUnmount() { this.props.onUnmount(); } @@ -42079,7 +41742,7 @@ var Unmount = class extends import_react394.default.Component { // node_modules/@cloudscape-design/components/wizard/styles.css.js import "/home/a171157/personal-repos/deep-racer/community-contributions/deepracer-custom-console/new/node_modules/@cloudscape-design/components/wizard/styles.scoped.css"; -var styles_css_default142 = { +var styles_css_default141 = { "root": "awsui_root_1xupv_1ommy_145", "wizard": "awsui_wizard_1xupv_1ommy_177", "refresh": "awsui_refresh_1xupv_1ommy_177", @@ -42114,62 +41777,62 @@ var styles_css_default142 = { // node_modules/@cloudscape-design/components/wizard/wizard-actions.js function WizardActions({ cancelButtonText, onCancelClick, isPrimaryLoading, primaryButtonText, primaryButtonLoadingText, onPrimaryClick, showPrevious, previousButtonText, onPreviousClick, showSkipTo, skipToButtonText, onSkipToClick, isLastStep, activeStepIndex, skipToStepIndex }) { - const containerRef = (0, import_react395.useRef)(null); - const primaryButtonRef = (0, import_react395.useRef)(null); + const containerRef = (0, import_react391.useRef)(null); + const primaryButtonRef = (0, import_react391.useRef)(null); const onPreviousUnmount = () => { var _a, _b; - if (((_a = containerRef.current) === null || _a === void 0 ? void 0 : _a.querySelector(`.${styles_css_default142["previous-button"]}`)) === document.activeElement) { + if (((_a = containerRef.current) === null || _a === void 0 ? void 0 : _a.querySelector(`.${styles_css_default141["previous-button"]}`)) === document.activeElement) { (_b = primaryButtonRef.current) === null || _b === void 0 ? void 0 : _b.focus(); } }; const onSkipUnmount = () => { var _a, _b; - if (((_a = containerRef.current) === null || _a === void 0 ? void 0 : _a.querySelector(`.${styles_css_default142["skip-to-button"]}`)) === document.activeElement) { + if (((_a = containerRef.current) === null || _a === void 0 ? void 0 : _a.querySelector(`.${styles_css_default141["skip-to-button"]}`)) === document.activeElement) { (_b = primaryButtonRef.current) === null || _b === void 0 ? void 0 : _b.focus(); } }; - return import_react395.default.createElement( + return import_react391.default.createElement( "div", { ref: containerRef }, - import_react395.default.createElement( + import_react391.default.createElement( internal_default5, - { direction: "horizontal", size: "xs", className: styles_css_default142["action-buttons"] }, - import_react395.default.createElement(InternalButton, { className: styles_css_default142["cancel-button"], variant: "link", formAction: "none", onClick: onCancelClick, analyticsAction: "cancel" }, cancelButtonText), - showSkipTo && skipToButtonText && import_react395.default.createElement( + { direction: "horizontal", size: "xs", className: styles_css_default141["action-buttons"] }, + import_react391.default.createElement(InternalButton, { className: styles_css_default141["cancel-button"], variant: "link", formAction: "none", onClick: onCancelClick, analyticsAction: "cancel" }, cancelButtonText), + showSkipTo && skipToButtonText && import_react391.default.createElement( Unmount, { onUnmount: onSkipUnmount }, - import_react395.default.createElement( + import_react391.default.createElement( "span", Object.assign({}, getNavigationActionDetail(skipToStepIndex, "skip")), - import_react395.default.createElement(InternalButton, { className: styles_css_default142["skip-to-button"], onClick: onSkipToClick, formAction: "none", disabled: isPrimaryLoading, analyticsAction: "navigate" }, skipToButtonText) + import_react391.default.createElement(InternalButton, { className: styles_css_default141["skip-to-button"], onClick: onSkipToClick, formAction: "none", disabled: isPrimaryLoading, analyticsAction: "navigate" }, skipToButtonText) ) ), - showPrevious && import_react395.default.createElement( + showPrevious && import_react391.default.createElement( Unmount, { onUnmount: onPreviousUnmount }, - import_react395.default.createElement( + import_react391.default.createElement( "span", Object.assign({}, getNavigationActionDetail(activeStepIndex - 1, "previous")), - import_react395.default.createElement(InternalButton, { className: styles_css_default142["previous-button"], onClick: onPreviousClick, formAction: "none", disabled: isPrimaryLoading, analyticsAction: "navigate" }, previousButtonText) + import_react391.default.createElement(InternalButton, { className: styles_css_default141["previous-button"], onClick: onPreviousClick, formAction: "none", disabled: isPrimaryLoading, analyticsAction: "navigate" }, previousButtonText) ) ), - import_react395.default.createElement( + import_react391.default.createElement( "span", Object.assign({}, isLastStep ? {} : getNavigationActionDetail(activeStepIndex + 1, "next")), - import_react395.default.createElement(InternalButton, { ref: primaryButtonRef, className: styles_css_default142["primary-button"], variant: "primary", formAction: "none", onClick: onPrimaryClick, loading: isPrimaryLoading, loadingText: primaryButtonLoadingText, analyticsAction: isLastStep ? "submit" : "navigate" }, primaryButtonText) + import_react391.default.createElement(InternalButton, { ref: primaryButtonRef, className: styles_css_default141["primary-button"], variant: "primary", formAction: "none", onClick: onPrimaryClick, loading: isPrimaryLoading, loadingText: primaryButtonLoadingText, analyticsAction: isLastStep ? "submit" : "navigate" }, primaryButtonText) ) ) ); } // node_modules/@cloudscape-design/components/wizard/wizard-form-header.js -var import_react396 = __toESM(require_react()); +var import_react392 = __toESM(require_react()); function WizardFormHeader({ children }) { const isVisualRefresh = useVisualRefresh(); - return import_react396.default.createElement( + return import_react392.default.createElement( "div", - { className: clsx_m_default(styles_css_default142["form-header"], isVisualRefresh && styles_css_default142["form-header-refresh"]) }, - import_react396.default.createElement("div", { className: styles_css_default142["form-header-content"] }, children) + { className: clsx_m_default(styles_css_default141["form-header"], isVisualRefresh && styles_css_default141["form-header-refresh"]) }, + import_react392.default.createElement("div", { className: styles_css_default141["form-header-content"] }, children) ); } @@ -42178,17 +41841,17 @@ var STEP_NAME_SELECTOR = `[${DATA_ATTR_FUNNEL_KEY}=${FUNNEL_KEY_STEP_NAME}]`; function WizardFormWithAnalytics(props) { const analyticsMetadata = getAnalyticsMetadataProps(props.steps[props.activeStepIndex]); const __internalRootRef = useComponentMetadata("WizardForm", PACKAGE_VERSION, Object.assign({}, analyticsMetadata)); - const stepHeaderRef = (0, import_react397.useRef)(null); + const stepHeaderRef = (0, import_react393.useRef)(null); useEffectOnUpdate(() => { var _a; if (stepHeaderRef && stepHeaderRef.current) { (_a = stepHeaderRef.current) === null || _a === void 0 ? void 0 : _a.focus(); } }, [props.activeStepIndex]); - return import_react397.default.createElement( + return import_react393.default.createElement( AnalyticsFunnelStep, { stepIdentifier: analyticsMetadata === null || analyticsMetadata === void 0 ? void 0 : analyticsMetadata.instanceIdentifier, stepErrorContext: analyticsMetadata === null || analyticsMetadata === void 0 ? void 0 : analyticsMetadata.errorContext, stepNameSelector: STEP_NAME_SELECTOR, stepNumber: props.activeStepIndex + 1 }, - import_react397.default.createElement(WizardForm, Object.assign({ stepHeaderRef, __internalRootRef }, props)) + import_react393.default.createElement(WizardForm, Object.assign({ stepHeaderRef, __internalRootRef }, props)) ); } function WizardForm({ __internalRootRef, stepHeaderRef, steps, activeStepIndex, showCollapsedSteps, i18nStrings, submitButtonText, isPrimaryLoading, allowSkipTo, secondaryActions, onCancelClick, onPreviousClick, onPrimaryClick, onSkipToClick }) { @@ -42200,7 +41863,7 @@ function WizardForm({ __internalRootRef, stepHeaderRef, steps, activeStepIndex, const { funnelStepProps, stepErrorContext } = useFunnelStep(); const showSkipTo = allowSkipTo && skipToTargetIndex !== -1; const skipToButtonText = skipToTargetIndex !== -1 && i18nStrings.skipToButtonLabel ? i18nStrings.skipToButtonLabel(steps[skipToTargetIndex], skipToTargetIndex + 1) : void 0; - (0, import_react397.useEffect)(() => { + (0, import_react393.useEffect)(() => { if (funnelInteractionId && errorText && isLastStep) { FunnelMetrics.funnelError({ funnelInteractionId, @@ -42209,25 +41872,25 @@ function WizardForm({ __internalRootRef, stepHeaderRef, steps, activeStepIndex, }); } }, [funnelInteractionId, funnelIdentifier, isLastStep, errorText, stepErrorContext]); - return import_react397.default.createElement( - import_react397.default.Fragment, + return import_react393.default.createElement( + import_react393.default.Fragment, null, - import_react397.default.createElement( + import_react393.default.createElement( WizardFormHeader, null, - import_react397.default.createElement("div", { className: clsx_m_default(styles_css_default142["collapsed-steps"], !showCollapsedSteps && styles_css_default142["collapsed-steps-hidden"]) }, (_a = i18nStrings.collapsedStepsLabel) === null || _a === void 0 ? void 0 : _a.call(i18nStrings, activeStepIndex + 1, steps.length)), - import_react397.default.createElement( + import_react393.default.createElement("div", { className: clsx_m_default(styles_css_default141["collapsed-steps"], !showCollapsedSteps && styles_css_default141["collapsed-steps-hidden"]) }, (_a = i18nStrings.collapsedStepsLabel) === null || _a === void 0 ? void 0 : _a.call(i18nStrings, activeStepIndex + 1, steps.length)), + import_react393.default.createElement( InternalHeader, - { className: styles_css_default142["form-header-component"], variant: "h1", description, info }, - import_react397.default.createElement( + { className: styles_css_default141["form-header-component"], variant: "h1", description, info }, + import_react393.default.createElement( "span", - { className: styles_css_default142["form-header-component-wrapper"], tabIndex: -1, ref: stepHeaderRef }, - import_react397.default.createElement("span", Object.assign({}, { [DATA_ATTR_FUNNEL_KEY]: FUNNEL_KEY_STEP_NAME }), title), - isOptional && import_react397.default.createElement("i", null, ` - ${i18nStrings.optional}`) + { className: styles_css_default141["form-header-component-wrapper"], tabIndex: -1, ref: stepHeaderRef }, + import_react393.default.createElement("span", Object.assign({}, { [DATA_ATTR_FUNNEL_KEY]: FUNNEL_KEY_STEP_NAME }), title), + isOptional && import_react393.default.createElement("i", null, ` - ${i18nStrings.optional}`) ) ) ), - import_react397.default.createElement(InternalForm, Object.assign({ __internalRootRef, className: styles_css_default142["form-component"], actions: import_react397.default.createElement(WizardActions, { cancelButtonText: i18nStrings.cancelButton, primaryButtonText: isLastStep ? submitButtonText !== null && submitButtonText !== void 0 ? submitButtonText : i18nStrings.submitButton : i18nStrings.nextButton, primaryButtonLoadingText: isLastStep ? i18nStrings.submitButtonLoadingAnnouncement : i18nStrings.nextButtonLoadingAnnouncement, previousButtonText: i18nStrings.previousButton, onCancelClick, onPreviousClick, onPrimaryClick, onSkipToClick: () => onSkipToClick(skipToTargetIndex), showPrevious: activeStepIndex !== 0, isPrimaryLoading, showSkipTo, skipToButtonText, isLastStep, activeStepIndex, skipToStepIndex: skipToTargetIndex }), secondaryActions, errorText, errorIconAriaLabel: i18nStrings.errorIconAriaLabel }, funnelStepProps), content) + import_react393.default.createElement(InternalForm, Object.assign({ __internalRootRef, className: styles_css_default141["form-component"], actions: import_react393.default.createElement(WizardActions, { cancelButtonText: i18nStrings.cancelButton, primaryButtonText: isLastStep ? submitButtonText !== null && submitButtonText !== void 0 ? submitButtonText : i18nStrings.submitButton : i18nStrings.nextButton, primaryButtonLoadingText: isLastStep ? i18nStrings.submitButtonLoadingAnnouncement : i18nStrings.nextButtonLoadingAnnouncement, previousButtonText: i18nStrings.previousButton, onCancelClick, onPreviousClick, onPrimaryClick, onSkipToClick: () => onSkipToClick(skipToTargetIndex), showPrevious: activeStepIndex !== 0, isPrimaryLoading, showSkipTo, skipToButtonText, isLastStep, activeStepIndex, skipToStepIndex: skipToTargetIndex }), secondaryActions, errorText, errorIconAriaLabel: i18nStrings.errorIconAriaLabel }, funnelStepProps), content) ); } function findSkipToTargetIndex(steps, activeStepIndex) { @@ -42239,11 +41902,11 @@ function findSkipToTargetIndex(steps, activeStepIndex) { } // node_modules/@cloudscape-design/components/wizard/wizard-navigation.js -var import_react398 = __toESM(require_react()); +var import_react394 = __toESM(require_react()); // node_modules/@cloudscape-design/components/wizard/analytics-metadata/styles.css.js import "/home/a171157/personal-repos/deep-racer/community-contributions/deepracer-custom-console/new/node_modules/@cloudscape-design/components/wizard/analytics-metadata/styles.scoped.css"; -var styles_css_default143 = { +var styles_css_default142 = { "step-title": "awsui_step-title_zr0a1_2uwax_5" }; @@ -42257,10 +41920,10 @@ var Statuses; })(Statuses || (Statuses = {})); function Navigation2({ activeStepIndex, farthestStepIndex, allowSkipTo, hidden, i18nStrings, isLoadingNextStep, onStepClick, onSkipToClick, steps }) { const isVisualRefresh = useVisualRefresh(); - return import_react398.default.createElement( + return import_react394.default.createElement( "nav", - { className: clsx_m_default(styles_css_default142.navigation, hidden && styles_css_default142.hidden, isVisualRefresh && styles_css_default142.refresh), "aria-label": i18nStrings.navigationAriaLabel }, - import_react398.default.createElement("ul", { className: clsx_m_default(isVisualRefresh && styles_css_default142.refresh) }, steps.map((step, index) => isVisualRefresh ? import_react398.default.createElement(NavigationStepVisualRefresh, { i18nStrings, index, key: index, onStepClick, onSkipToClick, status: getStatus(index), step }) : import_react398.default.createElement(NavigationStepClassic, { i18nStrings, index, key: index, onStepClick, onSkipToClick, status: getStatus(index), step }))) + { className: clsx_m_default(styles_css_default141.navigation, hidden && styles_css_default141.hidden, isVisualRefresh && styles_css_default141.refresh), "aria-label": i18nStrings.navigationAriaLabel }, + import_react394.default.createElement("ul", { className: clsx_m_default(isVisualRefresh && styles_css_default141.refresh) }, steps.map((step, index) => isVisualRefresh ? import_react394.default.createElement(NavigationStepVisualRefresh, { i18nStrings, index, key: index, onStepClick, onSkipToClick, status: getStatus(index), step }) : import_react394.default.createElement(NavigationStepClassic, { i18nStrings, index, key: index, onStepClick, onSkipToClick, status: getStatus(index), step }))) ); function getStatus(index) { if (activeStepIndex === index) { @@ -42303,21 +41966,21 @@ function NavigationStepVisualRefresh({ i18nStrings, index, onStepClick, onSkipTo visited: "enabled", next: "enabled" }[status]; - const linkClassName = clsx_m_default(styles_css_default142["navigation-link"], { - [styles_css_default142["navigation-link-active"]]: status === Statuses.Active, - [styles_css_default142["navigation-link-disabled"]]: status === Statuses.Unvisited + const linkClassName = clsx_m_default(styles_css_default141["navigation-link"], { + [styles_css_default141["navigation-link-active"]]: status === Statuses.Active, + [styles_css_default141["navigation-link-disabled"]]: status === Statuses.Unvisited }); - return import_react398.default.createElement( + return import_react394.default.createElement( "li", - { className: clsx_m_default(styles_css_default142[`${state}`], styles_css_default142["navigation-link-item"]) }, - import_react398.default.createElement("hr", null), - import_react398.default.createElement( + { className: clsx_m_default(styles_css_default141[`${state}`], styles_css_default141["navigation-link-item"]) }, + import_react394.default.createElement("hr", null), + import_react394.default.createElement( "span", - { className: clsx_m_default(styles_css_default142.number, styles_css_default142["navigation-link-label"]) }, + { className: clsx_m_default(styles_css_default141.number, styles_css_default141["navigation-link-label"]) }, i18nStrings.stepNumberLabel && i18nStrings.stepNumberLabel(index + 1), - step.isOptional && import_react398.default.createElement("i", null, ` - ${i18nStrings.optional}`) + step.isOptional && import_react394.default.createElement("i", null, ` - ${i18nStrings.optional}`) ), - import_react398.default.createElement( + import_react394.default.createElement( "a", Object.assign({ className: linkClassName, "aria-current": status === Statuses.Active ? "step" : void 0, "aria-disabled": status === Statuses.Unvisited ? "true" : void 0, onClick: (event) => { event.preventDefault(); @@ -42333,27 +41996,27 @@ function NavigationStepVisualRefresh({ i18nStrings, index, onStepClick, onSkipTo if (event.key === " ") { handleStepInteraction(); } - }, role: "button", tabIndex: status === Statuses.Visited || status === Statuses.Next ? 0 : void 0 }, status === Statuses.Unvisited ? {} : getNavigationActionDetail(index, "step", true, `.${styles_css_default143["step-title"]}`)), - import_react398.default.createElement("div", { className: styles_css_default142.circle }), - import_react398.default.createElement("span", { className: clsx_m_default(styles_css_default142.title, styles_css_default143["step-title"]) }, step.title) + }, role: "button", tabIndex: status === Statuses.Visited || status === Statuses.Next ? 0 : void 0 }, status === Statuses.Unvisited ? {} : getNavigationActionDetail(index, "step", true, `.${styles_css_default142["step-title"]}`)), + import_react394.default.createElement("div", { className: styles_css_default141.circle }), + import_react394.default.createElement("span", { className: clsx_m_default(styles_css_default141.title, styles_css_default142["step-title"]) }, step.title) ) ); } function NavigationStepClassic({ i18nStrings, index, onStepClick, onSkipToClick, status, step }) { - const spanClassName = clsx_m_default(styles_css_default142["navigation-link"], status === Statuses.Active ? styles_css_default142["navigation-link-active"] : styles_css_default142["navigation-link-disabled"]); - return import_react398.default.createElement( + const spanClassName = clsx_m_default(styles_css_default141["navigation-link"], status === Statuses.Active ? styles_css_default141["navigation-link-active"] : styles_css_default141["navigation-link-disabled"]); + return import_react394.default.createElement( "li", - Object.assign({ className: styles_css_default142["navigation-link-item"] }, status === Statuses.Unvisited ? {} : getNavigationActionDetail(index, "step", true, `.${styles_css_default143["step-title"]}`)), - import_react398.default.createElement( + Object.assign({ className: styles_css_default141["navigation-link-item"] }, status === Statuses.Unvisited ? {} : getNavigationActionDetail(index, "step", true, `.${styles_css_default142["step-title"]}`)), + import_react394.default.createElement( InternalBox, - { variant: "small", className: styles_css_default142["navigation-link-label"], display: "block", margin: { bottom: "xxs" } }, + { variant: "small", className: styles_css_default141["navigation-link-label"], display: "block", margin: { bottom: "xxs" } }, i18nStrings.stepNumberLabel && i18nStrings.stepNumberLabel(index + 1), - step.isOptional && import_react398.default.createElement("i", null, ` - ${i18nStrings.optional}`) + step.isOptional && import_react394.default.createElement("i", null, ` - ${i18nStrings.optional}`) ), - import_react398.default.createElement("div", null, status === Statuses.Visited || status === Statuses.Next ? import_react398.default.createElement(internal_default6, { className: clsx_m_default(styles_css_default142["navigation-link"], styles_css_default143["step-title"]), onFollow: (evt) => { + import_react394.default.createElement("div", null, status === Statuses.Visited || status === Statuses.Next ? import_react394.default.createElement(internal_default6, { className: clsx_m_default(styles_css_default141["navigation-link"], styles_css_default142["step-title"]), onFollow: (evt) => { evt.preventDefault(); status === Statuses.Visited ? onStepClick(index) : onSkipToClick(index); - }, variant: "primary" }, step.title) : import_react398.default.createElement("span", { className: clsx_m_default(spanClassName, styles_css_default143["step-title"]), "aria-current": status === Statuses.Active ? "step" : void 0, "aria-disabled": status === Statuses.Active ? void 0 : "true" }, step.title)) + }, variant: "primary" }, step.title) : import_react394.default.createElement("span", { className: clsx_m_default(spanClassName, styles_css_default142["step-title"]), "aria-current": status === Statuses.Active ? "step" : void 0, "aria-disabled": status === Statuses.Active ? void 0 : "true" }, step.title)) ); } @@ -42372,7 +42035,7 @@ function InternalWizard(_a) { }); const { funnelIdentifier, funnelInteractionId, funnelSubmit, funnelCancel, funnelProps, funnelNextOrSubmitAttempt } = useFunnel(); const actualActiveStepIndex = activeStepIndex ? Math.min(activeStepIndex, steps.length - 1) : 0; - const farthestStepIndex = (0, import_react399.useRef)(actualActiveStepIndex); + const farthestStepIndex = (0, import_react395.useRef)(actualActiveStepIndex); farthestStepIndex.current = Math.max(farthestStepIndex.current, actualActiveStepIndex); const isVisualRefresh = useVisualRefresh(); const isLastStep = actualActiveStepIndex >= steps.length - 1; @@ -42426,17 +42089,17 @@ function InternalWizard(_a) { }, properties: Object.assign({ stepsCount: `${(steps || []).length}`, activeStepIndex: `${activeStepIndex}`, activeStepLabel: `[${DATA_ATTR_FUNNEL_KEY}="${FUNNEL_KEY_STEP_NAME}"]` }, rest.analyticsMetadata || {}) }; - return import_react399.default.createElement( + return import_react395.default.createElement( "div", - Object.assign({}, baseProps, funnelProps, { ref, className: clsx_m_default(styles_css_default142.root, baseProps.className) }, __injectAnalyticsComponentMetadata ? getAnalyticsMetadataAttribute({ component: componentAnalyticsMetadata }) : {}), - import_react399.default.createElement( + Object.assign({}, baseProps, funnelProps, { ref, className: clsx_m_default(styles_css_default141.root, baseProps.className) }, __injectAnalyticsComponentMetadata ? getAnalyticsMetadataAttribute({ component: componentAnalyticsMetadata }) : {}), + import_react395.default.createElement( "div", - { className: clsx_m_default(styles_css_default142.wizard, isVisualRefresh && styles_css_default142.refresh, smallContainer && styles_css_default142["small-container"]) }, - import_react399.default.createElement(Navigation2, { activeStepIndex: actualActiveStepIndex, farthestStepIndex: farthestStepIndex.current, allowSkipTo, hidden: smallContainer, i18nStrings, isLoadingNextStep, onStepClick, onSkipToClick, steps }), - import_react399.default.createElement( + { className: clsx_m_default(styles_css_default141.wizard, isVisualRefresh && styles_css_default141.refresh, smallContainer && styles_css_default141["small-container"]) }, + import_react395.default.createElement(Navigation2, { activeStepIndex: actualActiveStepIndex, farthestStepIndex: farthestStepIndex.current, allowSkipTo, hidden: smallContainer, i18nStrings, isLoadingNextStep, onStepClick, onSkipToClick, steps }), + import_react395.default.createElement( "div", - { className: clsx_m_default(styles_css_default142.form, isVisualRefresh && styles_css_default142.refresh, smallContainer && styles_css_default142["small-container"]) }, - import_react399.default.createElement(WizardFormWithAnalytics, { steps, showCollapsedSteps: smallContainer, i18nStrings, submitButtonText, activeStepIndex: actualActiveStepIndex, isPrimaryLoading: isLoadingNextStep, allowSkipTo, secondaryActions, onCancelClick, onPreviousClick, onSkipToClick, onPrimaryClick }) + { className: clsx_m_default(styles_css_default141.form, isVisualRefresh && styles_css_default141.refresh, smallContainer && styles_css_default141["small-container"]) }, + import_react395.default.createElement(WizardFormWithAnalytics, { steps, showCollapsedSteps: smallContainer, i18nStrings, submitButtonText, activeStepIndex: actualActiveStepIndex, isPrimaryLoading: isLoadingNextStep, allowSkipTo, secondaryActions, onCancelClick, onPreviousClick, onSkipToClick, onPrimaryClick }) ) ) ); @@ -42458,14 +42121,14 @@ function Wizard(_a) { }, analyticsMetadata); const { wizardCount } = useFunnel(); const externalProps = getExternalProps(props); - (0, import_react400.useEffect)(() => { + (0, import_react396.useEffect)(() => { wizardCount.current++; return () => void wizardCount.current--; }, [wizardCount]); - return import_react400.default.createElement( + return import_react396.default.createElement( AnalyticsFunnel, { funnelIdentifier: analyticsMetadata === null || analyticsMetadata === void 0 ? void 0 : analyticsMetadata.instanceIdentifier, funnelFlowType: analyticsMetadata === null || analyticsMetadata === void 0 ? void 0 : analyticsMetadata.flowType, funnelErrorContext: analyticsMetadata === null || analyticsMetadata === void 0 ? void 0 : analyticsMetadata.errorContext, funnelResourceType: analyticsMetadata === null || analyticsMetadata === void 0 ? void 0 : analyticsMetadata.resourceType, funnelType: "multi-page", optionalStepNumbers: props.steps.map((step, index) => step.isOptional ? index + 1 : -1).filter((step) => step !== -1), totalFunnelSteps: props.steps.length, stepConfiguration: getStepConfiguration(props.steps) }, - import_react400.default.createElement(InternalWizard, Object.assign({ isLoadingNextStep, allowSkipTo }, externalProps, baseComponentProps, { __injectAnalyticsComponentMetadata: true })) + import_react396.default.createElement(InternalWizard, Object.assign({ isLoadingNextStep, allowSkipTo }, externalProps, baseComponentProps, { __injectAnalyticsComponentMetadata: true })) ); } applyDisplayName(Wizard, "Wizard"); diff --git a/new/node_modules/.vite/deps/@cloudscape-design_components.js.map b/new/node_modules/.vite/deps/@cloudscape-design_components.js.map index 4fba73bf..b548015e 100644 --- a/new/node_modules/.vite/deps/@cloudscape-design_components.js.map +++ b/new/node_modules/.vite/deps/@cloudscape-design_components.js.map @@ -1,7 +1,7 @@ { "version": 3, - "sources": ["../../src/annotation-context/index.tsx", "../../src/annotation-context/annotation/closed-annotation.tsx", "../../src/annotation-context/annotation/annotation-trigger.tsx", "../../src/annotation-context/annotation/annotation-icon.tsx", "../../@cloudscape-design/components/annotation-context/annotation/styles.css.js", "../../src/annotation-context/annotation/open-annotation.tsx", "../../src/annotation-context/annotation/annotation-popover.tsx", "../../src/annotation-context/context.ts", "../../src/annotation-context/utils.ts", "../../src/app-layout/index.tsx", "../../src/app-layout/defaults.ts", "../../src/app-layout/internal.tsx", "../../src/app-layout/classic.tsx", "../../src/split-panel/utils/size-utils.ts", "../../src/app-layout/content-wrapper/index.tsx", "../../@cloudscape-design/components/app-layout/content-wrapper/styles.css.js", "../../src/app-layout/drawer/index.tsx", "../../src/app-layout/toggles/index.tsx", "../../@cloudscape-design/components/app-layout/test-classes/styles.css.js", "../../@cloudscape-design/components/app-layout/toggles/styles.css.js", "../../src/app-layout/utils/use-drawers.ts", "../../src/app-layout/runtime-drawer/index.tsx", "../../src/app-layout/utils/visibility-context.tsx", "../../@cloudscape-design/components/app-layout/runtime-drawer/styles.css.js", "../../src/app-layout/drawer/drawers-helpers.ts", "../../src/app-layout/drawer/overflow-menu.tsx", "../../src/button-dropdown/internal.tsx", "../../src/internal/styles/motion/utils.ts", "../../src/button-dropdown/items-list.tsx", "../../src/button-dropdown/category-elements/category-element.tsx", "../../@cloudscape-design/components/button-dropdown/category-elements/styles.css.js", "../../src/button-dropdown/category-elements/expandable-category-element.tsx", "../../src/button-dropdown/tooltip.tsx", "../../src/button-dropdown/utils/menu-item.ts", "../../src/button-dropdown/category-elements/mobile-expandable-category-element.tsx", "../../src/button-dropdown/mobile-expandable-group/mobile-expandable-group.tsx", "../../@cloudscape-design/components/button-dropdown/mobile-expandable-group/styles.css.js", "../../src/button-dropdown/item-element/index.tsx", "../../src/button-dropdown/utils/create-items-tree.ts", "../../src/button-dropdown/utils/utils.ts", "../../@cloudscape-design/components/button-dropdown/analytics-metadata/styles.css.js", "../../@cloudscape-design/components/button-dropdown/item-element/styles.css.js", "../../src/button-dropdown/utils/use-highlighted-menu.ts", "../../src/button-dropdown/utils/move-highlight.ts", "../../src/button-dropdown/utils/use-button-dropdown.ts", "../../@cloudscape-design/components/button-dropdown/styles.css.js", "../../@cloudscape-design/components/app-layout/drawer/styles.css.js", "../../src/app-layout/drawer/resizable-drawer.tsx", "../../src/internal/components/panel-resize-handle/index.tsx", "../../src/internal/components/panel-resize-handle/icon.tsx", "../../@cloudscape-design/components/internal/components/panel-resize-handle/styles.css.js", "../../src/app-layout/utils/use-keyboard-events.ts", "../../src/app-layout/utils/use-pointer-events.ts", "../../@cloudscape-design/components/app-layout/resize/styles.css.js", "../../src/app-layout/mobile-toolbar/index.tsx", "../../@cloudscape-design/components/app-layout/styles.css.js", "../../@cloudscape-design/components/app-layout/mobile-toolbar/styles.css.js", "../../src/app-layout/notifications/index.tsx", "../../@cloudscape-design/components/app-layout/notifications/styles.css.js", "../../src/app-layout/split-panel/constants.ts", "../../src/app-layout/split-panel/drawer.tsx", "../../src/internal/context/split-panel-context.ts", "../../@cloudscape-design/components/app-layout/split-panel/styles.css.js", "../../src/app-layout/split-panel/provider.tsx", "../../src/internal/utils/calculate-once.ts", "../../src/internal/utils/browser-scrollbar-size.ts", "../../src/app-layout/split-panel/split-panel-forced-position.ts", "../../src/app-layout/utils/sticky-offsets.ts", "../../src/app-layout/utils/use-focus-control.ts", "../../src/app-layout/utils/use-split-panel-focus-control.ts", "../../src/app-layout/utils/feature-flags.ts", "../../src/app-layout/visual-refresh/index.tsx", "../../src/app-layout/visual-refresh/background.tsx", "../../src/internal/utils/content-header-utils.ts", "../../src/app-layout/visual-refresh/context.tsx", "../../src/internal/context/dynamic-overlap-context.ts", "../../src/app-layout/utils/use-resize.tsx", "../../src/app-layout/visual-refresh/split-panel.tsx", "../../@cloudscape-design/components/app-layout/visual-refresh/styles.css.js", "../../src/app-layout/visual-refresh/use-background-overlap.tsx", "../../src/app-layout/visual-refresh/breadcrumbs.tsx", "../../src/app-layout/visual-refresh/drawers.tsx", "../../src/app-layout/visual-refresh/trigger-button.tsx", "../../@cloudscape-design/components/split-panel/test-classes/styles.css.js", "../../src/app-layout/visual-refresh/header.tsx", "../../src/app-layout/visual-refresh/layout.tsx", "../../src/app-layout/visual-refresh/main.tsx", "../../src/app-layout/visual-refresh/mobile-toolbar.tsx", "../../src/app-layout/visual-refresh/navigation.tsx", "../../src/app-layout/visual-refresh/notifications.tsx", "../../src/app-layout/visual-refresh/tools.tsx", "../../src/app-layout/visual-refresh-toolbar/index.tsx", "../../src/internal/components/screenreader-only/index.tsx", "../../@cloudscape-design/components/internal/components/screenreader-only/styles.css.js", "../../src/internal/hooks/use-intersection-observer/index.ts", "../../src/internal/plugins/helpers/use-global-breadcrumbs.ts", "../../src/app-layout/visual-refresh-toolbar/contexts.ts", "../../src/app-layout/visual-refresh-toolbar/compute-layout.ts", "../../src/app-layout/visual-refresh-toolbar/drawer/local-drawer.tsx", "../../src/internal/widgets/index.tsx", "../../src/app-layout/visual-refresh-toolbar/drawer/use-resize.ts", "../../@cloudscape-design/components/app-layout/visual-refresh-toolbar/drawer/styles.css.js", "../../src/app-layout/visual-refresh-toolbar/drawer/global-drawers.tsx", "../../src/app-layout/visual-refresh-toolbar/drawer/global-drawer.tsx", "../../src/app-layout/visual-refresh-toolbar/navigation/index.tsx", "../../src/app-layout/visual-refresh-toolbar/skeleton/slot-wrappers.tsx", "../../@cloudscape-design/components/app-layout/visual-refresh-toolbar/skeleton/styles.css.js", "../../@cloudscape-design/components/app-layout/visual-refresh-toolbar/navigation/styles.css.js", "../../src/app-layout/visual-refresh-toolbar/notifications/index.tsx", "../../src/app-layout/visual-refresh-toolbar/skeleton/slot-skeletons.tsx", "../../src/app-layout/visual-refresh-toolbar/skeleton/breadcrumbs/index.tsx", "../../src/breadcrumb-group/implementation.tsx", "../../src/breadcrumb-group/all-items-dropdown.tsx", "../../@cloudscape-design/components/breadcrumb-group/styles.css.js", "../../src/breadcrumb-group/item/item.tsx", "../../src/internal/components/tooltip/registry.ts", "../../src/breadcrumb-group/utils.ts", "../../src/breadcrumb-group/item/funnel.tsx", "../../@cloudscape-design/components/breadcrumb-group/analytics-metadata/styles.css.js", "../../@cloudscape-design/components/breadcrumb-group/item/styles.css.js", "../../src/breadcrumb-group/skeleton.tsx", "../../@cloudscape-design/components/app-layout/visual-refresh-toolbar/skeleton/breadcrumbs/styles.css.js", "../../@cloudscape-design/components/app-layout/visual-refresh-toolbar/notifications/styles.css.js", "../../src/app-layout/visual-refresh-toolbar/split-panel/index.tsx", "../../@cloudscape-design/components/app-layout/visual-refresh-toolbar/split-panel/styles.css.js", "../../src/app-layout/visual-refresh-toolbar/toolbar/index.tsx", "../../src/app-layout/visual-refresh-toolbar/toolbar/drawer-triggers.tsx", "../../src/app-layout/visual-refresh-toolbar/toolbar/trigger-button/index.tsx", "../../@cloudscape-design/components/app-layout/visual-refresh-toolbar/toolbar/trigger-button/styles.css.js", "../../@cloudscape-design/components/app-layout/visual-refresh-toolbar/toolbar/styles.css.js", "../../src/app-layout/visual-refresh-toolbar/internal.tsx", "../../src/app-layout/visual-refresh-toolbar/multi-layout.ts", "../../src/app-layout/visual-refresh-toolbar/skeleton/index.tsx", "../../src/app-layout/utils/use-app-layout-placement.ts", "../../src/app-layout/utils/use-observed-element.ts", "../../src/area-chart/index.tsx", "../../src/area-chart/internal.tsx", "../../src/internal/components/chart-status-container/index.tsx", "../../@cloudscape-design/components/internal/components/chart-status-container/styles.css.js", "../../src/internal/components/chart-wrapper/index.tsx", "../../@cloudscape-design/components/internal/components/chart-wrapper/styles.css.js", "../../src/area-chart/chart-container.tsx", "../../src/internal/components/cartesian-chart/axis-label.tsx", "../../@cloudscape-design/components/internal/components/cartesian-chart/styles.css.js", "../../src/internal/components/cartesian-chart/block-end-labels.tsx", "../../src/internal/components/cartesian-chart/constants.ts", "../../src/internal/components/cartesian-chart/label-utils.ts", "../../src/internal/components/cartesian-chart/chart-container.tsx", "../../src/internal/components/cartesian-chart/emphasized-baseline.tsx", "../../src/internal/components/cartesian-chart/inline-start-labels.tsx", "../../src/internal/components/responsive-text/index.tsx", "../../src/internal/components/responsive-text/responsive-text-utils.ts", "../../src/internal/components/cartesian-chart/labels-measure.tsx", "../../src/internal/components/chart-plot/index.tsx", "../../src/internal/components/chart-plot/application-controller.tsx", "../../@cloudscape-design/components/internal/components/chart-plot/styles.css.js", "../../src/internal/components/chart-plot/focus-outline.tsx", "../../src/internal/utils/use-container-width.ts", "../../src/area-chart/async-store/index.ts", "../../src/area-chart/elements/chart-popover.tsx", "../../src/internal/components/chart-popover/index.tsx", "../../@cloudscape-design/components/internal/components/chart-popover/styles.css.js", "../../src/internal/components/chart-popover-footer/index.tsx", "../../@cloudscape-design/components/internal/components/chart-popover-footer/styles.css.js", "../../src/internal/components/chart-series-details/index.tsx", "../../src/expandable-section/internal.tsx", "../../src/expandable-section/expandable-section-container.tsx", "../../@cloudscape-design/components/expandable-section/analytics-metadata/styles.css.js", "../../src/expandable-section/expandable-section-header.tsx", "../../src/expandable-section/utils.ts", "../../@cloudscape-design/components/expandable-section/styles.css.js", "../../src/internal/components/chart-series-marker/index.tsx", "../../@cloudscape-design/components/internal/components/chart-series-marker/styles.css.js", "../../@cloudscape-design/components/internal/components/chart-series-details/styles.css.js", "../../src/internal/components/chart-series-details/series-details-text.ts", "../../@cloudscape-design/components/area-chart/styles.css.js", "../../src/area-chart/elements/data-series.tsx", "../../src/area-chart/elements/area-series.tsx", "../../d3-path/src/path.js", "../../d3-shape/src/constant.js", "../../d3-shape/src/math.js", "../../d3-shape/src/arc.js", "../../d3-shape/src/curve/linear.js", "../../d3-shape/src/point.js", "../../d3-shape/src/line.js", "../../d3-shape/src/area.js", "../../d3-shape/src/descending.js", "../../d3-shape/src/identity.js", "../../d3-shape/src/pie.js", "../../d3-shape/src/curve/radial.js", "../../d3-shape/src/array.js", "../../d3-shape/src/symbol/diamond.js", "../../d3-shape/src/symbol/star.js", "../../d3-shape/src/symbol/triangle.js", "../../d3-shape/src/symbol/wye.js", "../../d3-shape/src/noop.js", "../../d3-shape/src/curve/basis.js", "../../d3-shape/src/curve/basisClosed.js", "../../d3-shape/src/curve/basisOpen.js", "../../d3-shape/src/curve/bundle.js", "../../d3-shape/src/curve/cardinal.js", "../../d3-shape/src/curve/cardinalClosed.js", "../../d3-shape/src/curve/cardinalOpen.js", "../../d3-shape/src/curve/catmullRom.js", "../../d3-shape/src/curve/catmullRomClosed.js", "../../d3-shape/src/curve/catmullRomOpen.js", "../../d3-shape/src/curve/linearClosed.js", "../../d3-shape/src/curve/monotone.js", "../../d3-shape/src/curve/natural.js", "../../d3-shape/src/curve/step.js", "../../src/area-chart/elements/threshold-series.tsx", "../../src/area-chart/elements/highlighted-point.tsx", "../../src/internal/components/cartesian-chart/highlighted-point.tsx", "../../src/area-chart/elements/use-highlight-details.ts", "../../src/area-chart/elements/vertical-marker.tsx", "../../src/internal/components/cartesian-chart/vertical-marker.tsx", "../../src/area-chart/elements/area-chart-filter.tsx", "../../src/internal/components/chart-filter/index.tsx", "../../src/form-field/internal.tsx", "../../src/form-field/util.ts", "../../@cloudscape-design/components/form-field/analytics-metadata/styles.css.js", "../../@cloudscape-design/components/form-field/styles.css.js", "../../src/multiselect/internal.tsx", "../../src/token-group/internal.tsx", "../../src/internal/components/token-list/index.tsx", "../../src/internal/components/token-list/token-limit-toggle.tsx", "../../@cloudscape-design/components/internal/components/token-list/styles.css.js", "../../src/internal/hooks/use-list-focus-controller.tsx", "../../src/token-group/token.tsx", "../../src/token-group/dismiss-button.tsx", "../../@cloudscape-design/components/token-group/styles.css.js", "../../src/multiselect/use-multiselect.tsx", "../../@cloudscape-design/components/multiselect/styles.css.js", "../../@cloudscape-design/components/internal/components/chart-filter/styles.css.js", "../../src/area-chart/elements/area-chart-legend.tsx", "../../src/internal/components/chart-legend/index.tsx", "../../@cloudscape-design/components/internal/components/chart-legend/styles.css.js", "../../src/area-chart/model/use-chart-model.ts", "../../src/internal/hooks/container-queries/use-height-measure.ts", "../../src/internal/utils/throttle.ts", "../../@cloudscape-design/components/internal/vendor/d3-scale.js", "../../src/internal/components/cartesian-chart/scales.ts", "../../@babel/runtime/helpers/esm/typeof.js", "../../date-fns/esm/_lib/toInteger/index.js", "../../date-fns/esm/_lib/requiredArgs/index.js", "../../date-fns/esm/toDate/index.js", "../../date-fns/esm/addDays/index.js", "../../date-fns/esm/addMonths/index.js", "../../date-fns/esm/add/index.js", "../../date-fns/esm/addMilliseconds/index.js", "../../date-fns/esm/_lib/defaultOptions/index.js", "../../date-fns/esm/_lib/getTimezoneOffsetInMilliseconds/index.js", "../../date-fns/esm/startOfDay/index.js", "../../date-fns/esm/differenceInCalendarDays/index.js", "../../date-fns/esm/addMinutes/index.js", "../../date-fns/esm/addWeeks/index.js", "../../date-fns/esm/addYears/index.js", "../../date-fns/esm/max/index.js", "../../date-fns/esm/min/index.js", "../../date-fns/esm/compareAsc/index.js", "../../date-fns/esm/constants/index.js", "../../date-fns/esm/isSameDay/index.js", "../../date-fns/esm/isDate/index.js", "../../date-fns/esm/isValid/index.js", "../../date-fns/esm/differenceInCalendarYears/index.js", "../../date-fns/esm/differenceInDays/index.js", "../../date-fns/esm/endOfDay/index.js", "../../date-fns/esm/endOfMonth/index.js", "../../date-fns/esm/isLastDayOfMonth/index.js", "../../date-fns/esm/differenceInYears/index.js", "../../date-fns/esm/startOfMonth/index.js", "../../date-fns/esm/startOfYear/index.js", "../../date-fns/esm/subMilliseconds/index.js", "../../date-fns/esm/_lib/getUTCDayOfYear/index.js", "../../date-fns/esm/_lib/startOfUTCISOWeek/index.js", "../../date-fns/esm/_lib/getUTCISOWeekYear/index.js", "../../date-fns/esm/_lib/startOfUTCISOWeekYear/index.js", "../../date-fns/esm/_lib/getUTCISOWeek/index.js", "../../date-fns/esm/_lib/startOfUTCWeek/index.js", "../../date-fns/esm/_lib/getUTCWeekYear/index.js", "../../date-fns/esm/_lib/startOfUTCWeekYear/index.js", "../../date-fns/esm/_lib/getUTCWeek/index.js", "../../date-fns/esm/_lib/addLeadingZeros/index.js", "../../date-fns/esm/_lib/format/lightFormatters/index.js", "../../date-fns/esm/_lib/format/formatters/index.js", "../../date-fns/esm/_lib/format/longFormatters/index.js", "../../date-fns/esm/_lib/protectedTokens/index.js", "../../date-fns/esm/locale/en-US/_lib/formatDistance/index.js", "../../date-fns/esm/locale/_lib/buildFormatLongFn/index.js", "../../date-fns/esm/locale/en-US/_lib/formatLong/index.js", "../../date-fns/esm/locale/en-US/_lib/formatRelative/index.js", "../../date-fns/esm/locale/_lib/buildLocalizeFn/index.js", "../../date-fns/esm/locale/en-US/_lib/localize/index.js", "../../date-fns/esm/locale/_lib/buildMatchFn/index.js", "../../date-fns/esm/locale/_lib/buildMatchPatternFn/index.js", "../../date-fns/esm/locale/en-US/_lib/match/index.js", "../../date-fns/esm/locale/en-US/index.js", "../../date-fns/esm/_lib/defaultLocale/index.js", "../../date-fns/esm/format/index.js", "../../date-fns/esm/formatDistanceStrict/index.js", "../../date-fns/esm/getDaysInMonth/index.js", "../../date-fns/esm/getOverlappingDaysInIntervals/index.js", "../../date-fns/esm/isAfter/index.js", "../../date-fns/esm/isBefore/index.js", "../../@babel/runtime/helpers/esm/inherits.js", "../../@babel/runtime/helpers/esm/getPrototypeOf.js", "../../@babel/runtime/helpers/esm/isNativeReflectConstruct.js", "../../@babel/runtime/helpers/esm/possibleConstructorReturn.js", "../../@babel/runtime/helpers/esm/createSuper.js", "../../@babel/runtime/helpers/esm/classCallCheck.js", "../../@babel/runtime/helpers/esm/toPrimitive.js", "../../@babel/runtime/helpers/esm/toPropertyKey.js", "../../@babel/runtime/helpers/esm/createClass.js", "../../@babel/runtime/helpers/esm/defineProperty.js", "../../date-fns/esm/parse/_lib/Setter.js", "../../date-fns/esm/parse/_lib/Parser.js", "../../date-fns/esm/parse/_lib/parsers/EraParser.js", "../../date-fns/esm/parse/_lib/constants.js", "../../date-fns/esm/parse/_lib/utils.js", "../../date-fns/esm/parse/_lib/parsers/YearParser.js", "../../date-fns/esm/parse/_lib/parsers/LocalWeekYearParser.js", "../../date-fns/esm/parse/_lib/parsers/ISOWeekYearParser.js", "../../date-fns/esm/parse/_lib/parsers/ExtendedYearParser.js", "../../date-fns/esm/parse/_lib/parsers/QuarterParser.js", "../../date-fns/esm/parse/_lib/parsers/StandAloneQuarterParser.js", "../../date-fns/esm/parse/_lib/parsers/MonthParser.js", "../../date-fns/esm/parse/_lib/parsers/StandAloneMonthParser.js", "../../date-fns/esm/_lib/setUTCWeek/index.js", "../../date-fns/esm/parse/_lib/parsers/LocalWeekParser.js", "../../date-fns/esm/_lib/setUTCISOWeek/index.js", "../../date-fns/esm/parse/_lib/parsers/ISOWeekParser.js", "../../date-fns/esm/parse/_lib/parsers/DateParser.js", "../../date-fns/esm/parse/_lib/parsers/DayOfYearParser.js", "../../date-fns/esm/_lib/setUTCDay/index.js", "../../date-fns/esm/parse/_lib/parsers/DayParser.js", "../../date-fns/esm/parse/_lib/parsers/LocalDayParser.js", "../../date-fns/esm/parse/_lib/parsers/StandAloneLocalDayParser.js", "../../date-fns/esm/_lib/setUTCISODay/index.js", "../../date-fns/esm/parse/_lib/parsers/ISODayParser.js", "../../date-fns/esm/parse/_lib/parsers/AMPMParser.js", "../../date-fns/esm/parse/_lib/parsers/AMPMMidnightParser.js", "../../date-fns/esm/parse/_lib/parsers/DayPeriodParser.js", "../../date-fns/esm/parse/_lib/parsers/Hour1to12Parser.js", "../../date-fns/esm/parse/_lib/parsers/Hour0to23Parser.js", "../../date-fns/esm/parse/_lib/parsers/Hour0To11Parser.js", "../../date-fns/esm/parse/_lib/parsers/Hour1To24Parser.js", "../../date-fns/esm/parse/_lib/parsers/MinuteParser.js", "../../date-fns/esm/parse/_lib/parsers/SecondParser.js", "../../date-fns/esm/parse/_lib/parsers/FractionOfSecondParser.js", "../../date-fns/esm/parse/_lib/parsers/ISOTimezoneWithZParser.js", "../../date-fns/esm/parse/_lib/parsers/ISOTimezoneParser.js", "../../date-fns/esm/parse/_lib/parsers/TimestampSecondsParser.js", "../../date-fns/esm/parse/_lib/parsers/TimestampMillisecondsParser.js", "../../date-fns/esm/parse/_lib/parsers/index.js", "../../date-fns/esm/isSameMonth/index.js", "../../date-fns/esm/isSameYear/index.js", "../../date-fns/esm/isToday/index.js", "../../date-fns/esm/parseISO/index.js", "../../src/internal/components/cartesian-chart/ticks.ts", "../../src/area-chart/model/utils.ts", "../../src/area-chart/model/compute-chart-props.ts", "../../src/internal/styles/colors.ts", "../../src/internal/utils/create-category-color-scale.ts", "../../src/area-chart/model/create-series-decorator.ts", "../../src/area-chart/model/interactions-store.ts", "../../src/area-chart/model/use-filter-props.ts", "../../src/area-chart/model/use-highlight-props.ts", "../../src/attribute-editor/index.tsx", "../../src/attribute-editor/internal.tsx", "../../src/attribute-editor/additional-info.tsx", "../../@cloudscape-design/components/attribute-editor/styles.css.js", "../../src/attribute-editor/grid-defaults.ts", "../../src/attribute-editor/row.tsx", "../../src/attribute-editor/utils.ts", "../../src/autosuggest/index.tsx", "../../src/autosuggest/internal.tsx", "../../src/internal/components/autosuggest-input/index.tsx", "../../@cloudscape-design/components/internal/components/autosuggest-input/styles.css.js", "../../src/autosuggest/load-more-controller.ts", "../../src/autosuggest/options-controller.ts", "../../src/autosuggest/utils/utils.ts", "../../src/autosuggest/options-list.tsx", "../../src/autosuggest/plain-list.tsx", "../../src/autosuggest/autosuggest-option.tsx", "../../@cloudscape-design/components/autosuggest/styles.css.js", "../../src/autosuggest/virtual-list.tsx", "../../src/badge/index.tsx", "../../@cloudscape-design/components/badge/styles.css.js", "../../src/bar-chart/index.tsx", "../../src/mixed-line-bar-chart/internal.tsx", "../../src/mixed-line-bar-chart/chart-container.tsx", "../../src/internal/components/cartesian-chart/vertical-grid-lines.tsx", "../../src/mixed-line-bar-chart/bar-groups.tsx", "../../@cloudscape-design/components/mixed-line-bar-chart/styles.css.js", "../../src/mixed-line-bar-chart/chart-popover.tsx", "../../src/mixed-line-bar-chart/data-series.tsx", "../../src/mixed-line-bar-chart/bar-series.tsx", "../../src/mixed-line-bar-chart/create-one-side-rounded-rect-path.ts", "../../src/mixed-line-bar-chart/utils.ts", "../../src/mixed-line-bar-chart/line-series.tsx", "../../src/mixed-line-bar-chart/domain.ts", "../../src/mixed-line-bar-chart/format-highlighted.ts", "../../src/mixed-line-bar-chart/hooks/use-mouse-hover.ts", "../../src/mixed-line-bar-chart/hooks/use-navigation.ts", "../../src/mixed-line-bar-chart/hooks/use-popover.ts", "../../src/mixed-line-bar-chart/make-scaled-bar-groups.ts", "../../src/mixed-line-bar-chart/make-scaled-series.ts", "../../src/mixed-line-bar-chart/chart-legend.tsx", "../../@cloudscape-design/components/bar-chart/styles.css.js", "../../src/breadcrumb-group/index.tsx", "../../src/breadcrumb-group/internal.tsx", "../../src/button-dropdown/index.tsx", "../../src/button-group/index.tsx", "../../src/button-group/internal.tsx", "../../src/button-group/item-element.tsx", "../../src/button-group/file-input-item.tsx", "../../src/file-input/internal.tsx", "../../@cloudscape-design/components/file-input/styles.css.js", "../../@cloudscape-design/components/button-group/test-classes/styles.css.js", "../../src/button-group/icon-button-item.tsx", "../../src/button-group/icon-toggle-button-item.tsx", "../../src/toggle-button/internal.tsx", "../../src/toggle-button/util.ts", "../../@cloudscape-design/components/toggle-button/styles.css.js", "../../src/button-group/menu-dropdown-item.tsx", "../../@cloudscape-design/components/button-group/styles.css.js", "../../src/calendar/index.tsx", "../../src/calendar/internal.tsx", "../../src/internal/hooks/use-date-cache/index.ts", "../../src/internal/utils/date-time/display-format.ts", "../../src/internal/utils/date-time/format-time-offset.ts", "../../src/internal/utils/date-time/format-date-iso.ts", "../../src/internal/utils/date-time/format-date-localized.ts", "../../src/internal/utils/date-time/is-iso-only.ts", "../../src/internal/utils/date-time/format-date-time-with-offset.ts", "../../src/internal/utils/date-time/format-date.ts", "../../src/internal/utils/date-time/format-time.ts", "../../src/internal/utils/date-time/format-date-time.ts", "../../src/internal/utils/date-time/join-date-time.ts", "../../src/internal/utils/date-time/parse-date.ts", "../../src/internal/utils/date-time/parse-timezone-offset.ts", "../../src/internal/utils/date-time/shift-timezone-offset.ts", "../../src/internal/utils/locale/merge-locales.ts", "../../src/internal/utils/locale/normalize-locale.ts", "../../weekstart/src/api.js", "../../weekstart/src/langRegionMap.js", "../../weekstart/src/regionDayMap.js", "../../weekstart/src/main.js", "../../src/internal/utils/locale/normalize-start-of-week.ts", "../../src/calendar/grid/index.tsx", "../../@cloudscape-design/components/calendar/styles.css.js", "../../src/calendar/grid/calendar-grid-header.tsx", "../../src/calendar/utils/intl.ts", "../../src/calendar/utils/navigation-day.ts", "../../src/calendar/utils/navigation-month.ts", "../../src/calendar/grid/use-calendar-grid-keyboard-navigation.ts", "../../src/calendar/grid/use-calendar-grid-rows.ts", "../../mnth/web/add-days.ts", "../../mnth/web/set-date.ts", "../../mnth/web/index.ts", "../../src/calendar/header/index.tsx", "../../src/calendar/header/header-button.tsx", "../../src/calendar/use-calendar-labels.ts", "../../src/cards/index.tsx", "../../src/internal/hooks/use-mouse-down-target.ts", "../../src/table/selection/selection-control.tsx", "../../src/checkbox/internal.tsx", "../../src/internal/components/abstract-switch/index.tsx", "../../@cloudscape-design/components/internal/components/abstract-switch/analytics-metadata/styles.css.js", "../../@cloudscape-design/components/internal/components/abstract-switch/styles.css.js", "../../@cloudscape-design/components/checkbox/styles.css.js", "../../src/radio-group/radio-button.tsx", "../../@cloudscape-design/components/radio-group/styles.css.js", "../../@cloudscape-design/components/table/selection/styles.css.js", "../../src/table/utils.ts", "../../src/table/selection/utils.ts", "../../src/table/selection/use-selection-focus-move.ts", "../../src/table/selection/use-selection.ts", "../../src/table/sticky-scrolling.ts", "../../src/table/tools-header.tsx", "../../@cloudscape-design/components/table/styles.css.js", "../../src/cards/cards-layout-helper.ts", "../../@cloudscape-design/components/cards/styles.css.js", "../../src/checkbox/index.tsx", "../../src/code-editor/index.tsx", "../../src/code-editor/error-screen.tsx", "../../@cloudscape-design/components/code-editor/styles.css.js", "../../src/code-editor/listeners.ts", "../../src/code-editor/loading-screen.tsx", "../../src/code-editor/pane.tsx", "../../src/code-editor/resizable-box/index.tsx", "../../@cloudscape-design/components/code-editor/resizable-box/styles.css.js", "../../src/code-editor/ace-modes.ts", "../../src/code-editor/ace-themes.ts", "../../src/code-editor/util.ts", "../../src/code-editor/preferences-modal.tsx", "../../src/modal/internal.tsx", "../../src/internal/context/reset-contexts-for-modal.tsx", "../../@cloudscape-design/components/modal/styles.css.js", "../../src/modal/body-scroll.ts", "../../@cloudscape-design/components/modal/analytics-metadata/styles.css.js", "../../src/code-editor/setup-editor.ts", "../../src/code-editor/status-bar.tsx", "../../src/code-editor/tab-button.tsx", "../../src/code-editor/use-editor.tsx", "../../src/collection-preferences/index.tsx", "../../src/internal/context/collection-preferences-metadata-context.ts", "../../@cloudscape-design/components/collection-preferences/analytics-metadata/styles.css.js", "../../src/collection-preferences/analytics-metadata/utils.ts", "../../src/collection-preferences/content-display/index.tsx", "../../src/internal/components/sortable-area/index.tsx", "../../@dnd-kit/utilities/src/hooks/useCombinedRefs.ts", "../../@dnd-kit/utilities/src/execution-context/canUseDOM.ts", "../../@dnd-kit/utilities/src/type-guards/isWindow.ts", "../../@dnd-kit/utilities/src/type-guards/isNode.ts", "../../@dnd-kit/utilities/src/execution-context/getWindow.ts", "../../@dnd-kit/utilities/src/type-guards/isDocument.ts", "../../@dnd-kit/utilities/src/type-guards/isHTMLElement.ts", "../../@dnd-kit/utilities/src/type-guards/isSVGElement.ts", "../../@dnd-kit/utilities/src/execution-context/getOwnerDocument.ts", "../../@dnd-kit/utilities/src/hooks/useIsomorphicLayoutEffect.ts", "../../@dnd-kit/utilities/src/hooks/useEvent.ts", "../../@dnd-kit/utilities/src/hooks/useInterval.ts", "../../@dnd-kit/utilities/src/hooks/useLatestValue.ts", "../../@dnd-kit/utilities/src/hooks/useLazyMemo.ts", "../../@dnd-kit/utilities/src/hooks/useNodeRef.ts", "../../@dnd-kit/utilities/src/hooks/usePrevious.ts", "../../@dnd-kit/utilities/src/hooks/useUniqueId.ts", "../../@dnd-kit/utilities/src/adjustment.ts", "../../@dnd-kit/utilities/src/event/hasViewportRelativeCoordinates.ts", "../../@dnd-kit/utilities/src/event/isKeyboardEvent.ts", "../../@dnd-kit/utilities/src/event/isTouchEvent.ts", "../../@dnd-kit/utilities/src/coordinates/getEventCoordinates.ts", "../../@dnd-kit/utilities/src/css.ts", "../../@dnd-kit/utilities/src/focus/findFirstFocusableNode.ts", "../../@dnd-kit/accessibility/src/components/HiddenText/HiddenText.tsx", "../../@dnd-kit/accessibility/src/components/LiveRegion/LiveRegion.tsx", "../../@dnd-kit/accessibility/src/hooks/useAnnouncement.ts", "../../@dnd-kit/core/src/components/DndMonitor/context.ts", "../../@dnd-kit/core/src/components/DndMonitor/useDndMonitor.ts", "../../@dnd-kit/core/src/components/DndMonitor/useDndMonitorProvider.tsx", "../../@dnd-kit/core/src/components/Accessibility/defaults.ts", "../../@dnd-kit/core/src/components/Accessibility/Accessibility.tsx", "../../@dnd-kit/core/src/store/actions.ts", "../../@dnd-kit/core/src/utilities/other/noop.ts", "../../@dnd-kit/core/src/sensors/useSensor.ts", "../../@dnd-kit/core/src/sensors/useSensors.ts", "../../@dnd-kit/core/src/utilities/coordinates/constants.ts", "../../@dnd-kit/core/src/utilities/coordinates/distanceBetweenPoints.ts", "../../@dnd-kit/core/src/utilities/coordinates/getRelativeTransformOrigin.ts", "../../@dnd-kit/core/src/utilities/algorithms/helpers.ts", "../../@dnd-kit/core/src/utilities/algorithms/closestCenter.ts", "../../@dnd-kit/core/src/utilities/algorithms/closestCorners.ts", "../../@dnd-kit/core/src/utilities/algorithms/rectIntersection.ts", "../../@dnd-kit/core/src/utilities/algorithms/pointerWithin.ts", "../../@dnd-kit/core/src/utilities/rect/adjustScale.ts", "../../@dnd-kit/core/src/utilities/rect/getRectDelta.ts", "../../@dnd-kit/core/src/utilities/rect/rectAdjustment.ts", "../../@dnd-kit/core/src/utilities/transform/parseTransform.ts", "../../@dnd-kit/core/src/utilities/transform/inverseTransform.ts", "../../@dnd-kit/core/src/utilities/rect/getRect.ts", "../../@dnd-kit/core/src/utilities/rect/getWindowClientRect.ts", "../../@dnd-kit/core/src/utilities/scroll/isFixed.ts", "../../@dnd-kit/core/src/utilities/scroll/isScrollable.ts", "../../@dnd-kit/core/src/utilities/scroll/getScrollableAncestors.ts", "../../@dnd-kit/core/src/utilities/scroll/getScrollableElement.ts", "../../@dnd-kit/core/src/utilities/scroll/getScrollCoordinates.ts", "../../@dnd-kit/core/src/types/direction.ts", "../../@dnd-kit/core/src/utilities/scroll/documentScrollingElement.ts", "../../@dnd-kit/core/src/utilities/scroll/getScrollPosition.ts", "../../@dnd-kit/core/src/utilities/scroll/getScrollDirectionAndSpeed.ts", "../../@dnd-kit/core/src/utilities/scroll/getScrollElementRect.ts", "../../@dnd-kit/core/src/utilities/scroll/getScrollOffsets.ts", "../../@dnd-kit/core/src/utilities/scroll/scrollIntoViewIfNeeded.ts", "../../@dnd-kit/core/src/utilities/rect/Rect.ts", "../../@dnd-kit/core/src/sensors/utilities/Listeners.ts", "../../@dnd-kit/core/src/sensors/utilities/getEventListenerTarget.ts", "../../@dnd-kit/core/src/sensors/utilities/hasExceededDistance.ts", "../../@dnd-kit/core/src/sensors/events.ts", "../../@dnd-kit/core/src/sensors/keyboard/types.ts", "../../@dnd-kit/core/src/sensors/keyboard/defaults.ts", "../../@dnd-kit/core/src/sensors/keyboard/KeyboardSensor.ts", "../../@dnd-kit/core/src/sensors/pointer/AbstractPointerSensor.ts", "../../@dnd-kit/core/src/sensors/pointer/PointerSensor.ts", "../../@dnd-kit/core/src/sensors/mouse/MouseSensor.ts", "../../@dnd-kit/core/src/sensors/touch/TouchSensor.ts", "../../@dnd-kit/core/src/hooks/utilities/useAutoScroller.ts", "../../@dnd-kit/core/src/hooks/utilities/useCachedNode.ts", "../../@dnd-kit/core/src/hooks/utilities/useCombineActivators.ts", "../../@dnd-kit/core/src/hooks/utilities/useDroppableMeasuring.ts", "../../@dnd-kit/core/src/hooks/utilities/useInitialValue.ts", "../../@dnd-kit/core/src/hooks/utilities/useInitialRect.ts", "../../@dnd-kit/core/src/hooks/utilities/useMutationObserver.ts", "../../@dnd-kit/core/src/hooks/utilities/useResizeObserver.ts", "../../@dnd-kit/core/src/hooks/utilities/useRect.ts", "../../@dnd-kit/core/src/hooks/utilities/useRectDelta.ts", "../../@dnd-kit/core/src/hooks/utilities/useScrollableAncestors.ts", "../../@dnd-kit/core/src/hooks/utilities/useScrollOffsets.ts", "../../@dnd-kit/core/src/hooks/utilities/useScrollOffsetsDelta.ts", "../../@dnd-kit/core/src/hooks/utilities/useSensorSetup.ts", "../../@dnd-kit/core/src/hooks/utilities/useSyntheticListeners.ts", "../../@dnd-kit/core/src/hooks/utilities/useWindowRect.ts", "../../@dnd-kit/core/src/hooks/utilities/useRects.ts", "../../@dnd-kit/core/src/utilities/nodes/getMeasurableNode.ts", "../../@dnd-kit/core/src/hooks/utilities/useDragOverlayMeasuring.ts", "../../@dnd-kit/core/src/components/DndContext/defaults.ts", "../../@dnd-kit/core/src/store/constructors.ts", "../../@dnd-kit/core/src/store/context.ts", "../../@dnd-kit/core/src/store/reducer.ts", "../../@dnd-kit/core/src/components/Accessibility/components/RestoreFocus.tsx", "../../@dnd-kit/core/src/modifiers/applyModifiers.ts", "../../@dnd-kit/core/src/components/DndContext/hooks/useMeasuringConfiguration.ts", "../../@dnd-kit/core/src/components/DndContext/hooks/useLayoutShiftScrollCompensation.ts", "../../@dnd-kit/core/src/components/DndContext/DndContext.tsx", "../../@dnd-kit/core/src/hooks/useDraggable.ts", "../../@dnd-kit/core/src/hooks/useDndContext.ts", "../../@dnd-kit/core/src/hooks/useDroppable.ts", "../../@dnd-kit/core/src/components/DragOverlay/components/AnimationManager/AnimationManager.tsx", "../../@dnd-kit/core/src/components/DragOverlay/components/NullifiedContextProvider/NullifiedContextProvider.tsx", "../../@dnd-kit/core/src/components/DragOverlay/components/PositionedOverlay/PositionedOverlay.tsx", "../../@dnd-kit/core/src/components/DragOverlay/hooks/useDropAnimation.ts", "../../@dnd-kit/core/src/components/DragOverlay/hooks/useKey.ts", "../../@dnd-kit/core/src/components/DragOverlay/DragOverlay.tsx", "../../@dnd-kit/sortable/src/utilities/arrayMove.ts", "../../@dnd-kit/sortable/src/utilities/arraySwap.ts", "../../@dnd-kit/sortable/src/utilities/getSortedRects.ts", "../../@dnd-kit/sortable/src/utilities/isValidIndex.ts", "../../@dnd-kit/sortable/src/utilities/itemsEqual.ts", "../../@dnd-kit/sortable/src/utilities/normalizeDisabled.ts", "../../@dnd-kit/sortable/src/strategies/horizontalListSorting.ts", "../../@dnd-kit/sortable/src/strategies/rectSorting.ts", "../../@dnd-kit/sortable/src/strategies/rectSwapping.ts", "../../@dnd-kit/sortable/src/strategies/verticalListSorting.ts", "../../@dnd-kit/sortable/src/components/SortableContext.tsx", "../../@dnd-kit/sortable/src/hooks/defaults.ts", "../../@dnd-kit/sortable/src/hooks/utilities/useDerivedTransform.ts", "../../@dnd-kit/sortable/src/hooks/useSortable.ts", "../../@dnd-kit/sortable/src/types/type-guard.ts", "../../@dnd-kit/sortable/src/sensors/keyboard/sortableKeyboardCoordinates.ts", "../../src/internal/components/sortable-area/use-drag-and-drop-reorder.ts", "../../src/internal/components/sortable-area/keyboard-sensor/defaults.ts", "../../src/internal/components/sortable-area/keyboard-sensor/utilities/events.ts", "../../src/internal/components/sortable-area/keyboard-sensor/utilities/listeners.ts", "../../src/internal/components/sortable-area/keyboard-sensor/utilities/scroll.ts", "../../src/internal/components/sortable-area/keyboard-sensor/index.ts", "../../src/internal/components/sortable-area/use-live-announcements.ts", "../../@cloudscape-design/components/internal/components/sortable-area/styles.css.js", "../../src/text-filter/internal.tsx", "../../src/internal/context/table-component-context.ts", "../../src/text-filter/search-results.tsx", "../../@cloudscape-design/components/text-filter/styles.css.js", "../../src/text-filter/use-debounce-search-result-callback.ts", "../../src/collection-preferences/content-display/content-display-option.tsx", "../../src/internal/components/drag-handle/index.tsx", "../../src/internal/components/drag-handle/resize-icon.tsx", "../../@cloudscape-design/components/internal/components/drag-handle/styles.css.js", "../../src/toggle/internal.tsx", "../../@cloudscape-design/components/toggle/styles.css.js", "../../@cloudscape-design/components/collection-preferences/styles.css.js", "../../src/collection-preferences/content-display/utils.ts", "../../src/collection-preferences/utils.tsx", "../../src/radio-group/internal.tsx", "../../src/internal/hooks/forward-focus/radio-group.ts", "../../src/collection-preferences/visible-content.tsx", "../../src/column-layout/index.tsx", "../../src/content-layout/index.tsx", "../../src/content-layout/internal.tsx", "../../src/internal/hooks/use-dynamic-overlap/index.ts", "../../@cloudscape-design/components/content-layout/styles.css.js", "../../@cloudscape-design/components/content-layout/test-classes/styles.css.js", "../../src/copy-to-clipboard/index.tsx", "../../src/copy-to-clipboard/internal.tsx", "../../src/popover/internal.tsx", "../../@cloudscape-design/components/copy-to-clipboard/styles.css.js", "../../@cloudscape-design/components/copy-to-clipboard/test-classes/styles.css.js", "../../src/date-input/index.tsx", "../../src/date-input/internal.tsx", "../../src/internal/components/masked-input/index.tsx", "../../src/internal/components/masked-input/keyboard-handler.ts", "../../src/internal/components/masked-input/utils/keys.ts", "../../src/internal/components/masked-input/use-mask.ts", "../../src/internal/components/masked-input/utils/strings.ts", "../../src/internal/components/masked-input/utils/mask-format.ts", "../../@cloudscape-design/components/date-input/styles.css.js", "../../src/date-picker/index.tsx", "../../src/internal/hooks/use-focus-tracker.ts", "../../src/internal/focus-tracker.ts", "../../src/date-picker/utils.ts", "../../@cloudscape-design/components/date-picker/styles.css.js", "../../src/date-range-picker/index.tsx", "../../src/date-range-picker/dropdown.tsx", "../../src/date-range-picker/calendar/index.tsx", "../../src/date-range-picker/calendar/grids/index.tsx", "../../src/internal/utils/has-value.ts", "../../src/date-range-picker/calendar/utils.ts", "../../src/date-range-picker/calendar/grids/monthly-grid.tsx", "../../src/date-range-picker/calendar/grids/grid-cell.tsx", "../../@cloudscape-design/components/date-range-picker/calendar/grids/styles.css.js", "../../@cloudscape-design/components/date-range-picker/styles.css.js", "../../src/date-range-picker/calendar/header/index.tsx", "../../src/date-range-picker/calendar/header/header-button.tsx", "../../src/date-range-picker/calendar/range-inputs.tsx", "../../src/time-input/internal.tsx", "../../@cloudscape-design/components/time-input/styles.css.js", "../../src/date-range-picker/mode-switcher.tsx", "../../src/segmented-control/internal.tsx", "../../src/segmented-control/internal-segmented-control.tsx", "../../src/segmented-control/segment.tsx", "../../@cloudscape-design/components/segmented-control/styles.css.js", "../../src/date-range-picker/relative-range/index.tsx", "../../@cloudscape-design/components/date-range-picker/relative-range/styles.css.js", "../../src/date-range-picker/time-offset.ts", "../../src/date-range-picker/utils.tsx", "../../src/drawer/index.tsx", "../../src/drawer/implementation.tsx", "../../@cloudscape-design/components/drawer/styles.css.js", "../../src/drawer/internal.tsx", "../../src/expandable-section/index.tsx", "../../src/file-dropzone/index.tsx", "../../src/file-dropzone/internal.tsx", "../../@cloudscape-design/components/file-dropzone/styles.css.js", "../../src/file-dropzone/use-files-dragging.ts", "../../src/file-input/index.tsx", "../../src/file-token-group/index.tsx", "../../src/file-token-group/internal.tsx", "../../src/file-token-group/file-token.tsx", "../../src/file-token-group/default-formatters.ts", "../../src/file-token-group/thumbnail.tsx", "../../@cloudscape-design/components/file-token-group/styles.css.js", "../../@cloudscape-design/components/file-token-group/test-classes/styles.css.js", "../../src/file-upload/index.tsx", "../../src/file-upload/internal.tsx", "../../@cloudscape-design/components/file-upload/styles.css.js", "../../src/flashbar/index.tsx", "../../src/flashbar/collapsible-flashbar.tsx", "../../src/internal/animate.ts", "../../@cloudscape-design/components/flashbar/analytics-metadata/styles.css.js", "../../src/flashbar/analytics-metadata/utils.ts", "../../src/flashbar/common.tsx", "../../src/flashbar/flash.tsx", "../../src/flashbar/utils.ts", "../../src/flashbar/internal/analytics.ts", "../../@cloudscape-design/components/flashbar/styles.css.js", "../../src/flashbar/non-collapsible-flashbar.tsx", "../../src/flashbar/constant.ts", "../../src/form/index.tsx", "../../src/form/internal.tsx", "../../@cloudscape-design/components/form/analytics-metadata/styles.css.js", "../../@cloudscape-design/components/form/styles.css.js", "../../src/form-field/index.tsx", "../../src/grid/index.tsx", "../../src/help-panel/index.tsx", "../../src/help-panel/implementation.tsx", "../../@cloudscape-design/components/help-panel/styles.css.js", "../../src/help-panel/internal.tsx", "../../src/hotspot/index.tsx", "../../@cloudscape-design/components/hotspot/styles.css.js", "../../src/icon/index.tsx", "../../src/input/index.tsx", "../../src/line-chart/index.tsx", "../../@cloudscape-design/components/line-chart/styles.css.js", "../../src/link/index.tsx", "../../src/live-region/index.tsx", "../../src/mixed-line-bar-chart/index.tsx", "../../src/modal/index.tsx", "../../src/multiselect/index.tsx", "../../src/pagination/index.tsx", "../../src/pagination/internal.tsx", "../../src/pagination/utils.ts", "../../@cloudscape-design/components/pagination/styles.css.js", "../../src/pie-chart/index.tsx", "../../src/pie-chart/pie-chart.tsx", "../../src/pie-chart/labels.tsx", "../../src/pie-chart/responsive-text.tsx", "../../@cloudscape-design/components/pie-chart/styles.css.js", "../../src/pie-chart/utils.ts", "../../src/pie-chart/segments.tsx", "../../src/popover/index.tsx", "../../src/progress-bar/index.tsx", "../../src/progress-bar/internal.tsx", "../../@cloudscape-design/components/progress-bar/styles.css.js", "../../src/prompt-input/index.tsx", "../../src/prompt-input/internal.tsx", "../../@cloudscape-design/components/prompt-input/styles.css.js", "../../@cloudscape-design/components/prompt-input/test-classes/styles.css.js", "../../src/property-filter/index.tsx", "../../src/property-filter/internal.tsx", "../../src/property-filter/utils.ts", "../../src/property-filter/i18n-utils.ts", "../../src/property-filter/controller.ts", "../../src/property-filter/property-editor.tsx", "../../src/multiselect/embedded.tsx", "../../src/property-filter/filter-options.ts", "../../src/property-filter/use-load-items.ts", "../../@cloudscape-design/components/property-filter/styles.css.js", "../../@cloudscape-design/components/property-filter/test-classes/styles.css.js", "../../src/property-filter/property-filter-autosuggest.tsx", "../../src/property-filter/token.tsx", "../../src/property-filter/filtering-token/index.tsx", "../../@cloudscape-design/components/property-filter/filtering-token/styles.css.js", "../../src/property-filter/token-editor.tsx", "../../src/property-filter/token-editor-inputs.tsx", "../../@cloudscape-design/components/property-filter/analytics-metadata/styles.css.js", "../../src/radio-group/index.tsx", "../../src/s3-resource-selector/index.tsx", "../../src/s3-resource-selector/s3-in-context/index.tsx", "../../src/s3-resource-selector/s3-in-context/search-input.tsx", "../../src/s3-resource-selector/s3-in-context/use-versions-fetch.ts", "../../src/internal/utils/promises.ts", "../../src/s3-resource-selector/s3-in-context/validation.ts", "../../@cloudscape-design/components/s3-resource-selector/s3-in-context/styles.css.js", "../../src/s3-resource-selector/s3-modal/index.tsx", "../../src/s3-resource-selector/utils.ts", "../../src/s3-resource-selector/s3-modal/buckets-table.tsx", "../../src/s3-resource-selector/s3-modal/basic-table.tsx", "../../@cloudscape-design/collection-hooks/mjs/use-collection.js", "../../@cloudscape-design/collection-hooks/mjs/operations/filter.js", "../../@cloudscape-design/collection-hooks/mjs/date-utils/parse-iso-date.js", "../../@cloudscape-design/collection-hooks/mjs/date-utils/compare-dates.js", "../../@cloudscape-design/collection-hooks/mjs/logging.js", "../../@cloudscape-design/collection-hooks/mjs/operations/property-filter.js", "../../@cloudscape-design/collection-hooks/mjs/operations/sort.js", "../../@cloudscape-design/collection-hooks/mjs/operations/pagination.js", "../../@cloudscape-design/collection-hooks/mjs/operations/items-tree.js", "../../@cloudscape-design/collection-hooks/mjs/operations/compose-filters.js", "../../@cloudscape-design/collection-hooks/mjs/operations/index.js", "../../@cloudscape-design/collection-hooks/mjs/utils.js", "../../@cloudscape-design/collection-hooks/mjs/use-collection-state.js", "../../src/table/internal.tsx", "../../src/internal/hooks/use-scroll-sync/index.ts", "../../src/internal/hooks/use-table-interaction-metrics/index.ts", "../../src/table/body-cell/index.tsx", "../../src/table/body-cell/disabled-inline-editor.tsx", "../../src/table/body-cell/click-away.tsx", "../../src/table/body-cell/td-element.tsx", "../../src/table/expandable-rows/expand-toggle-button.tsx", "../../@cloudscape-design/components/table/expandable-rows/styles.css.js", "../../src/table/sticky-columns/use-sticky-columns.ts", "../../src/table/sticky-columns/utils.ts", "../../src/table/table-role/table-role-helper.ts", "../../src/table/table-role/grid-navigation.tsx", "../../src/table/table-role/utils.ts", "../../@cloudscape-design/components/table/body-cell/styles.css.js", "../../src/table/body-cell/inline-editor.tsx", "../../src/table/column-widths-utils.ts", "../../src/table/expandable-rows/expandable-rows-utils.ts", "../../src/table/no-data-cell.tsx", "../../src/table/progressive-loading/items-loader.tsx", "../../@cloudscape-design/components/table/progressive-loading/styles.css.js", "../../src/table/progressive-loading/loader-cell.tsx", "../../src/table/progressive-loading/progressive-loading-utils.ts", "../../src/table/resizer/index.tsx", "../../src/table/use-column-widths.tsx", "../../@cloudscape-design/components/table/resizer/styles.css.js", "../../src/table/resizer/resizer-lookup.ts", "../../src/table/selection/selection-cell.tsx", "../../src/table/header-cell/th-element.tsx", "../../@cloudscape-design/components/table/header-cell/styles.css.js", "../../src/table/sticky-header.tsx", "../../src/table/thead.tsx", "../../src/table/header-cell/index.tsx", "../../src/table/header-cell/utils.ts", "../../@cloudscape-design/components/table/analytics-metadata/styles.css.js", "../../src/table/use-sticky-header.ts", "../../src/table/sticky-scrollbar/sticky-scrollbar.tsx", "../../src/table/sticky-scrollbar/use-sticky-scrollbar.ts", "../../@cloudscape-design/components/table/sticky-scrollbar/styles.css.js", "../../src/table/use-cell-editing.ts", "../../src/table/use-row-events.ts", "../../src/table/use-table-focus-navigation.ts", "../../src/s3-resource-selector/s3-modal/empty-state.tsx", "../../@cloudscape-design/components/s3-resource-selector/s3-modal/styles.css.js", "../../src/s3-resource-selector/s3-modal/column-formats.ts", "../../src/s3-resource-selector/s3-modal/table-utils.ts", "../../src/s3-resource-selector/s3-modal/objects-table.tsx", "../../src/s3-resource-selector/s3-modal/versions-table.tsx", "../../@cloudscape-design/components/s3-resource-selector/test-classes/styles.css.js", "../../@cloudscape-design/components/s3-resource-selector/styles.css.js", "../../src/segmented-control/index.tsx", "../../src/side-navigation/index.tsx", "../../src/side-navigation/implementation.tsx", "../../src/side-navigation/parts.tsx", "../../src/side-navigation/util.tsx", "../../@cloudscape-design/components/side-navigation/analytics-metadata/styles.css.js", "../../@cloudscape-design/components/side-navigation/styles.css.js", "../../src/side-navigation/internal.tsx", "../../src/slider/index.tsx", "../../src/slider/internal.tsx", "../../src/slider/slider-labels.tsx", "../../@cloudscape-design/components/slider/styles.css.js", "../../src/slider/tick-marks.tsx", "../../src/slider/utils.ts", "../../src/spinner/index.tsx", "../../src/split-panel/index.tsx", "../../src/split-panel/implementation.tsx", "../../src/split-panel/bottom.tsx", "../../@cloudscape-design/components/split-panel/styles.css.js", "../../src/split-panel/preferences-modal.tsx", "../../src/tiles/internal.tsx", "../../src/tiles/tile.tsx", "../../@cloudscape-design/components/tiles/analytics-metadata/styles.css.js", "../../@cloudscape-design/components/tiles/styles.css.js", "../../src/split-panel/icons/bottom-icon.tsx", "../../@cloudscape-design/components/split-panel/icons/styles.css.js", "../../src/split-panel/icons/bottom-icon-refresh.tsx", "../../src/split-panel/icons/side-position-refresh.tsx", "../../src/split-panel/icons/side-position.tsx", "../../src/split-panel/side.tsx", "../../src/split-panel/internal.tsx", "../../src/status-indicator/index.tsx", "../../src/steps/index.tsx", "../../src/steps/internal.tsx", "../../@cloudscape-design/components/steps/styles.css.js", "../../src/table/index.tsx", "../../src/tag-editor/index.tsx", "../../src/tag-editor/internal.tsx", "../../@cloudscape-design/components/tag-editor/styles.css.js", "../../src/tag-editor/utils.ts", "../../src/tag-editor/validation.ts", "../../src/text-content/index.tsx", "../../@cloudscape-design/components/text-content/styles.css.js", "../../src/text-filter/index.tsx", "../../src/textarea/index.tsx", "../../@cloudscape-design/components/textarea/styles.css.js", "../../src/tiles/index.tsx", "../../src/time-input/index.tsx", "../../src/toggle/index.tsx", "../../src/toggle-button/index.tsx", "../../src/token-group/index.tsx", "../../src/top-navigation/index.tsx", "../../src/top-navigation/internal.tsx", "../../src/internal/components/menu-dropdown/index.tsx", "../../@cloudscape-design/components/internal/components/menu-dropdown/styles.css.js", "../../src/top-navigation/parts/overflow-menu/index.tsx", "../../src/top-navigation/parts/overflow-menu/router.tsx", "../../src/top-navigation/parts/overflow-menu/views/submenu.tsx", "../../src/top-navigation/parts/overflow-menu/header.tsx", "../../@cloudscape-design/components/top-navigation/styles.css.js", "../../src/top-navigation/parts/overflow-menu/menu-item.tsx", "../../src/top-navigation/parts/overflow-menu/views/utilities.tsx", "../../src/top-navigation/parts/utility.tsx", "../../src/top-navigation/use-top-navigation.ts", "../../src/tutorial-panel/index.tsx", "../../src/tutorial-panel/components/tutorial-detail-view/index.tsx", "../../src/tutorial-panel/components/tutorial-detail-view/congratulation-screen.tsx", "../../@cloudscape-design/components/tutorial-panel/components/tutorial-detail-view/styles.css.js", "../../src/tutorial-panel/components/tutorial-detail-view/task-list.tsx", "../../src/tutorial-panel/components/tutorial-detail-view/task.tsx", "../../src/tutorial-panel/components/tutorial-list/index.tsx", "../../@cloudscape-design/components/tutorial-panel/components/tutorial-list/styles.css.js", "../../@cloudscape-design/components/tutorial-panel/styles.css.js", "../../src/wizard/index.tsx", "../../src/wizard/analytics.ts", "../../src/wizard/internal.tsx", "../../src/wizard/wizard-form.tsx", "../../src/wizard/wizard-actions.tsx", "../../src/wizard/analytics-metadata/utils.ts", "../../src/wizard/unmount.ts", "../../@cloudscape-design/components/wizard/styles.css.js", "../../src/wizard/wizard-form-header.tsx", "../../src/wizard/wizard-navigation.tsx", "../../@cloudscape-design/components/wizard/analytics-metadata/styles.css.js"], - "sourcesContent": ["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';\n\nimport { HotspotProps } from '../hotspot/interfaces';\nimport { fireNonCancelableEvent } from '../internal/events';\nimport { useTelemetry } from '../internal/hooks/use-telemetry';\nimport { applyDisplayName } from '../internal/utils/apply-display-name';\nimport { ClosedAnnotation } from './annotation/closed-annotation';\nimport { OpenAnnotation } from './annotation/open-annotation';\nimport { HotspotContext, hotspotContext } from './context';\nimport { AnnotationContextProps } from './interfaces';\nimport { getStepInfo } from './utils';\n\nexport { AnnotationContextProps };\n\n// constant empty array to keep hook dependency stable\nconst emptyTasks: ReadonlyArray = [];\n\nexport default function AnnotationContext({\n currentTutorial,\n children,\n onStepChange,\n onFinish: onFinishHandler,\n onStartTutorial,\n onExitTutorial,\n i18nStrings,\n}: AnnotationContextProps): JSX.Element {\n useTelemetry('AnnotationContext');\n\n const [open, setOpen] = useState(true);\n\n const [currentStepIndex, setCurrentStepIndex] = useState(0);\n useEffect(() => {\n // When a tutorial is started, we reset the progress to the first step.\n setCurrentStepIndex(0);\n setOpen(true);\n }, [currentTutorial, setOpen]);\n\n const [availableHotspots, setAvailableHotspots] = useState>({});\n // availableHotspots is mirrored in this ref to prevent endless loops\n // in between registerHotspot and unregisterHotspot callbacks.\n const availableHotspotsRef = useRef>(availableHotspots);\n\n const annotations = currentTutorial ? currentTutorial.tasks : emptyTasks;\n const { task, step, localIndex, taskIndex } = getStepInfo(annotations, currentStepIndex);\n const currentId = step?.hotspotId;\n const totalStepCount = annotations.map(a => a.steps.length).reduce((a, b) => a + b, 0);\n\n const id2index = useMemo(() => {\n const mapping: Record = {};\n\n let counter = 0;\n for (const annotation of annotations) {\n for (const step of annotation.steps) {\n if (mapping[step.hotspotId] === undefined) {\n mapping[step.hotspotId] = counter;\n }\n counter++;\n }\n }\n\n return mapping;\n }, [annotations]);\n\n const openNextStep = useCallback(() => {\n const newStepIndex = Math.min(currentStepIndex + 1, totalStepCount);\n setCurrentStepIndex(newStepIndex);\n fireNonCancelableEvent(onStepChange, { step: newStepIndex, reason: 'next' });\n }, [currentStepIndex, onStepChange, totalStepCount]);\n\n const openPreviousStep = useCallback(() => {\n const newStepIndex = Math.max(currentStepIndex - 1, 0);\n setCurrentStepIndex(newStepIndex);\n fireNonCancelableEvent(onStepChange, { step: newStepIndex, reason: 'previous' });\n }, [onStepChange, currentStepIndex]);\n\n const onFinish = useCallback(() => fireNonCancelableEvent(onFinishHandler), [onFinishHandler]);\n\n /**\n * If the currently open hotspot disappears from the page (e.g. because of a react-router navigation),\n * this Effect detects the nearest available hotspot and changes to it. This allows us to e.g. automatically\n * advance to the first step on the new page (or the last step on the previous page, in case the user\n * navigates back).\n */\n const isCurrentHotspotAvailable = currentId ? availableHotspots[currentId] : null;\n useEffect(() => {\n if (!currentId || availableHotspotsRef.current[currentId]) {\n return;\n }\n\n const findNearestHotspot = () => {\n let nearestHotspot: string | undefined = undefined;\n let nearestDistance = Infinity;\n for (const hotspotId of Object.keys(availableHotspotsRef.current)) {\n const distanceFromCurrentHotspot = Math.abs(id2index[hotspotId] - currentStepIndex);\n if (distanceFromCurrentHotspot < nearestDistance) {\n nearestDistance = distanceFromCurrentHotspot;\n nearestHotspot = hotspotId;\n }\n }\n return nearestHotspot;\n };\n\n const nearestHotspot = findNearestHotspot();\n if (nearestHotspot) {\n const newStepIndex = id2index[nearestHotspot];\n setCurrentStepIndex(newStepIndex);\n setOpen(true);\n fireNonCancelableEvent(onStepChange, { step: newStepIndex, reason: 'auto-fallback' });\n }\n }, [annotations, isCurrentHotspotAvailable, currentId, currentStepIndex, id2index, onStepChange, availableHotspots]);\n\n const onDismiss = useCallback(() => {\n setOpen(false);\n }, [setOpen]);\n\n const onOpen = useCallback(\n (stepIndex: number) => {\n setCurrentStepIndex(stepIndex);\n fireNonCancelableEvent(onStepChange, { step: stepIndex, reason: 'open' });\n setOpen(true);\n },\n [onStepChange, setOpen]\n );\n\n const idOfPreviousHotspot = getStepInfo(annotations, currentStepIndex - 1).step?.hotspotId;\n const idOfNextHotspot = getStepInfo(annotations, currentStepIndex + 1).step?.hotspotId;\n const previousHotspotIsAvailable =\n (idOfPreviousHotspot !== undefined && availableHotspots[idOfPreviousHotspot]) ?? false;\n const nextHotspotIsAvailable = (idOfNextHotspot !== undefined && availableHotspots[idOfNextHotspot]) ?? false;\n\n const getContentForId = useCallback(\n (id: string, direction: HotspotProps['direction']) => {\n if (currentTutorial?.completed) {\n return null;\n }\n\n const globalStepIndex = id2index[id];\n if (globalStepIndex === undefined) {\n // This hotspot is not used in the current tutorial.\n return null;\n }\n\n if (!task || !step || !open || id !== currentId) {\n const { task: currentTask, localIndex: currentStepIndex } = getStepInfo(annotations, globalStepIndex);\n return (\n \n );\n }\n\n return (\n \n );\n },\n [\n id2index,\n currentTutorial,\n task,\n step,\n open,\n currentId,\n currentStepIndex,\n i18nStrings,\n taskIndex,\n localIndex,\n totalStepCount,\n nextHotspotIsAvailable,\n openNextStep,\n onFinish,\n previousHotspotIsAvailable,\n openPreviousStep,\n onDismiss,\n onOpen,\n annotations,\n ]\n );\n\n const registerHotspot = useCallback(\n (id: string) => {\n if (!id2index || id2index[id] === undefined) {\n // This hotspot is not used in the current tutorial.\n return;\n }\n\n /*\n To ensure that all hotspots are immediately known to all triggered useEffects, we\n need to update the availableHotspotsRef BEFORE the setAvailableHotspots calls, since\n they will be batched and delayed until after the useEffects are run.\n */\n availableHotspotsRef.current = { ...availableHotspotsRef.current, [id]: true } as const;\n\n setAvailableHotspots(availableHotspots => {\n if (availableHotspots[id]) {\n return availableHotspots;\n }\n\n return { ...availableHotspots, [id]: true } as const;\n });\n },\n // We need to react on id2index changes for registering new hotspots when the map changes.\n // eslint-disable-next-line react-hooks/exhaustive-deps\n [id2index]\n );\n\n const unregisterHotspot = useCallback((id: string) => {\n if (!availableHotspotsRef.current[id]) {\n // Prevents unnecessary re-renders.\n return;\n }\n\n /*\n To ensure that all hotspots are immediately known to all triggered useEffects, we\n need to update the availableHotspotsRef BEFORE the setAvailableHotspots calls, since\n they will be batched and delayed until after the useEffects are run.\n */\n availableHotspotsRef.current = removeKey(id, availableHotspotsRef.current);\n\n setAvailableHotspots(availableHotspots => {\n if (!availableHotspots[id]) {\n return availableHotspots;\n }\n\n return removeKey(id, availableHotspots);\n });\n }, []);\n\n const context: HotspotContext = {\n getContentForId,\n registerHotspot,\n unregisterHotspot,\n onStartTutorial,\n onExitTutorial,\n currentStepIndex,\n currentTutorial,\n };\n\n return {children};\n}\n\napplyDisplayName(AnnotationContext, 'AnnotationContext');\n\nfunction removeKey>(key: keyof T, object: T) {\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n const { [key]: _, ...remainingObject } = object;\n return remainingObject;\n}\n", "// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React, { useCallback, useEffect, useState } from 'react';\n\nimport { AnnotationContextProps } from '../interfaces';\nimport AnnotationTrigger from './annotation-trigger';\n\ninterface AnnotationProps {\n globalStepIndex: number;\n\n onOpen: (stepId: number) => void;\n\n i18nStrings: AnnotationContextProps['i18nStrings'];\n\n focusOnRender: boolean;\n totalLocalSteps: number;\n taskLocalStepIndex: number;\n}\n\nexport function ClosedAnnotation({\n globalStepIndex,\n onOpen,\n i18nStrings,\n focusOnRender,\n totalLocalSteps,\n taskLocalStepIndex,\n}: AnnotationProps) {\n const [hotspotRef, setHotspotRef] = useState(null);\n const onClick = useCallback(() => {\n onOpen(globalStepIndex);\n }, [globalStepIndex, onOpen]);\n\n useEffect(() => {\n if (focusOnRender && hotspotRef) {\n hotspotRef.focus();\n }\n }, [focusOnRender, hotspotRef]);\n\n return (\n \n );\n}\n", "// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React, { useCallback } from 'react';\n\nimport { AnnotationContextProps } from '../interfaces';\nimport { AnnotationIcon } from './annotation-icon';\n\nimport styles from './styles.css.js';\n\ninterface AnnotationTriggerProps {\n open: boolean;\n\n onClick: () => void;\n\n i18nStrings: AnnotationContextProps['i18nStrings'];\n taskLocalStepIndex: number;\n totalLocalSteps: number;\n}\n\nexport default React.forwardRef(function AnnotationTrigger(\n { open, onClick: onClickHandler, i18nStrings, taskLocalStepIndex, totalLocalSteps }: AnnotationTriggerProps,\n ref\n) {\n const onClick = useCallback(\n (event: React.MouseEvent) => {\n event.preventDefault();\n onClickHandler();\n },\n [onClickHandler]\n );\n\n return (\n \n \n \n );\n});\n", "// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React from 'react';\n\nimport styles from './styles.css.js';\n\ninterface AnnotationIconProps {\n open?: boolean;\n}\n\nexport const AnnotationIcon = ({ open }: AnnotationIconProps) => {\n if (open) {\n return (\n \n \n \n \n \n \n );\n } else {\n return (\n \n \n \n \n \n \n \n \n \n );\n }\n};\n", "\n import './styles.scoped.css';\n export default {\n \"arrow\": \"awsui_arrow_1hpp3_n3v7s_193\",\n \"arrow-outer\": \"awsui_arrow-outer_1hpp3_n3v7s_197\",\n \"arrow-inner\": \"awsui_arrow-inner_1hpp3_n3v7s_197\",\n \"arrow-position-right-top\": \"awsui_arrow-position-right-top_1hpp3_n3v7s_239\",\n \"arrow-position-right-bottom\": \"awsui_arrow-position-right-bottom_1hpp3_n3v7s_239\",\n \"arrow-position-left-top\": \"awsui_arrow-position-left-top_1hpp3_n3v7s_242\",\n \"arrow-position-left-bottom\": \"awsui_arrow-position-left-bottom_1hpp3_n3v7s_242\",\n \"arrow-position-top-center\": \"awsui_arrow-position-top-center_1hpp3_n3v7s_245\",\n \"arrow-position-top-responsive\": \"awsui_arrow-position-top-responsive_1hpp3_n3v7s_245\",\n \"arrow-position-bottom-center\": \"awsui_arrow-position-bottom-center_1hpp3_n3v7s_248\",\n \"arrow-position-bottom-responsive\": \"awsui_arrow-position-bottom-responsive_1hpp3_n3v7s_248\",\n \"annotation\": \"awsui_annotation_1hpp3_n3v7s_252\",\n \"next-button\": \"awsui_next-button_1hpp3_n3v7s_253\",\n \"previous-button\": \"awsui_previous-button_1hpp3_n3v7s_254\",\n \"finish-button\": \"awsui_finish-button_1hpp3_n3v7s_255\",\n \"header\": \"awsui_header_1hpp3_n3v7s_256\",\n \"step-counter-content\": \"awsui_step-counter-content_1hpp3_n3v7s_257\",\n \"content\": \"awsui_content_1hpp3_n3v7s_258\",\n \"description\": \"awsui_description_1hpp3_n3v7s_262\",\n \"actionBar\": \"awsui_actionBar_1hpp3_n3v7s_267\",\n \"stepCounter\": \"awsui_stepCounter_1hpp3_n3v7s_274\",\n \"divider\": \"awsui_divider_1hpp3_n3v7s_278\",\n \"hotspot\": \"awsui_hotspot_1hpp3_n3v7s_282\",\n \"icon\": \"awsui_icon_1hpp3_n3v7s_346\"\n};\n ", "// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React, { useRef } from 'react';\n\nimport { HotspotProps } from '../../hotspot/interfaces';\nimport { AnnotationContextProps } from '../interfaces';\nimport { AnnotationPopover } from './annotation-popover';\nimport AnnotationTrigger from './annotation-trigger';\n\ninterface AnnotationProps {\n title: string;\n content: React.ReactNode;\n alert?: React.ReactNode;\n\n direction: HotspotProps['direction'];\n\n nextButtonEnabled: boolean;\n onNextButtonClick: () => void;\n\n onFinish: () => void;\n\n previousButtonEnabled: boolean;\n onPreviousButtonClick: () => void;\n\n showPreviousButton: boolean;\n showFinishButton: boolean;\n\n taskLocalStepIndex: number;\n\n totalLocalSteps: number;\n\n onDismiss: () => void;\n\n i18nStrings: AnnotationContextProps['i18nStrings'];\n}\n\nexport function OpenAnnotation({\n title,\n content,\n alert,\n\n direction,\n\n showPreviousButton,\n showFinishButton,\n taskLocalStepIndex,\n\n totalLocalSteps,\n\n onDismiss,\n\n nextButtonEnabled,\n onNextButtonClick,\n\n onFinish,\n\n previousButtonEnabled,\n onPreviousButtonClick,\n i18nStrings,\n}: AnnotationProps) {\n const trackRef = useRef(null);\n\n return (\n <>\n \n\n \n \n );\n}\n", "// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React, { useEffect } from 'react';\nimport clsx from 'clsx';\n\nimport InternalAlert from '../../alert/internal';\nimport InternalBox from '../../box/internal';\nimport { InternalButton } from '../../button/internal';\nimport { HotspotProps } from '../../hotspot/interfaces';\nimport { useUniqueId } from '../../internal/hooks/use-unique-id/index.js';\nimport { scrollElementIntoView } from '../../internal/utils/scrollable-containers';\nimport { joinStrings } from '../../internal/utils/strings/join-strings.js';\nimport PopoverBody from '../../popover/body';\nimport PopoverContainer from '../../popover/container';\nimport { InternalPosition } from '../../popover/interfaces';\nimport InternalSpaceBetween from '../../space-between/internal';\nimport { AnnotationContextProps } from '../interfaces';\n\nimport styles from './styles.css.js';\n\ninterface AnnotationPopoverProps {\n title: string;\n content: React.ReactNode;\n alert: React.ReactNode;\n\n direction: HotspotProps['direction'];\n\n nextButtonEnabled: boolean;\n onNextButtonClick: () => void;\n\n onFinish: () => void;\n\n showPreviousButton: boolean;\n previousButtonEnabled: boolean;\n onPreviousButtonClick: () => void;\n\n taskLocalStepIndex: number;\n\n totalLocalSteps: number;\n\n showFinishButton: boolean;\n\n onDismiss: () => void;\n\n trackRef: React.RefObject;\n\n i18nStrings: AnnotationContextProps['i18nStrings'];\n}\n\nconst arrow = (position: InternalPosition | null) => (\n
\n
\n
\n
\n);\n\nexport function AnnotationPopover({\n title,\n content,\n alert,\n\n direction = 'top',\n\n taskLocalStepIndex,\n\n totalLocalSteps,\n\n showPreviousButton,\n showFinishButton,\n\n onDismiss,\n\n nextButtonEnabled,\n onNextButtonClick,\n\n onFinish,\n\n trackRef,\n\n previousButtonEnabled,\n onPreviousButtonClick,\n i18nStrings,\n}: AnnotationPopoverProps) {\n useEffect(() => {\n scrollElementIntoView(trackRef.current ?? undefined);\n }, [trackRef]);\n\n const popoverHeaderId = useUniqueId('poppver-header-');\n const stepCounterId = useUniqueId('step-counter-');\n\n return (\n \n \n {title}\n \n }\n onDismiss={onDismiss}\n className={styles.annotation}\n variant=\"annotation\"\n overflowVisible=\"content\"\n // create new dialog to have the native dialog behavior of the screen readers\n key={taskLocalStepIndex}\n ariaLabelledby={joinStrings(popoverHeaderId, stepCounterId)}\n >\n \n
\n {content}\n
\n\n {alert && {alert}}\n\n \n
\n\n
\n
\n \n {i18nStrings.stepCounterText(taskLocalStepIndex ?? 0, totalLocalSteps ?? 0)}\n \n
\n \n {showPreviousButton && (\n \n {i18nStrings.previousButtonText}\n \n )}\n\n {showFinishButton ? (\n \n {i18nStrings.finishButtonText}\n \n ) : (\n \n {i18nStrings.nextButtonText}\n \n )}\n \n
\n \n \n \n \n );\n}\n", "// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React from 'react';\n\nimport { HotspotProps } from '../hotspot/interfaces';\nimport { AnnotationContextProps } from './interfaces';\n\nexport interface HotspotContext {\n getContentForId(id: string, direction: HotspotProps['direction']): JSX.Element | null;\n registerHotspot(id: string): void;\n unregisterHotspot(id: string): void;\n currentStepIndex: number;\n currentTutorial: AnnotationContextProps.Tutorial | null;\n onStartTutorial: AnnotationContextProps['onStartTutorial'];\n onExitTutorial: AnnotationContextProps['onExitTutorial'];\n}\n\nconst defaultContext: HotspotContext = {\n getContentForId: () => null,\n registerHotspot() {},\n unregisterHotspot() {},\n currentStepIndex: 0,\n currentTutorial: null,\n onStartTutorial() {},\n onExitTutorial() {},\n};\n\nexport const hotspotContext = React.createContext(defaultContext);\n", "// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport { AnnotationContextProps } from './interfaces';\n\nexport function getStepInfo(annotations: readonly AnnotationContextProps.Task[], index: number) {\n if (index >= 0) {\n let taskIndex = 0;\n for (const task of annotations) {\n if (task.steps.length <= index) {\n index -= task.steps.length;\n taskIndex++;\n continue;\n }\n return { task, step: task.steps[index], localIndex: index, taskIndex };\n }\n }\n return { task: undefined, step: undefined, localIndex: 0, taskIndex: 0 };\n}\n", "// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React from 'react';\n\nimport { warnOnce } from '@cloudscape-design/component-toolkit/internal';\n\nimport { useInternalI18n } from '../i18n/context';\nimport { getBaseProps } from '../internal/base-component';\nimport { NonCancelableCustomEvent } from '../internal/events';\nimport useBaseComponent from '../internal/hooks/use-base-component';\nimport { useControllable } from '../internal/hooks/use-controllable';\nimport { useMergeRefs } from '../internal/hooks/use-merge-refs';\nimport { useMobile } from '../internal/hooks/use-mobile';\nimport { useVisualRefresh } from '../internal/hooks/use-visual-mode';\nimport { isDevelopment } from '../internal/is-development';\nimport { applyDisplayName } from '../internal/utils/apply-display-name';\nimport { applyDefaults } from './defaults';\nimport { AppLayoutProps } from './interfaces';\nimport { AppLayoutInternal } from './internal';\nimport { useAppLayoutPlacement } from './utils/use-app-layout-placement';\n\nexport { AppLayoutProps };\n\nconst AppLayout = React.forwardRef(\n (\n {\n contentType = 'default',\n headerSelector = '#b #h',\n footerSelector = '#b #f',\n navigationWidth = 280,\n toolsWidth = 290,\n maxContentWidth,\n minContentWidth,\n navigationOpen: controlledNavigationOpen,\n onNavigationChange: controlledOnNavigationChange,\n analyticsMetadata,\n ...rest\n }: AppLayoutProps,\n ref: React.Ref\n ) => {\n if (isDevelopment) {\n if (rest.toolsOpen && rest.toolsHide) {\n warnOnce(\n 'AppLayout',\n `You have enabled both the \\`toolsOpen\\` prop and the \\`toolsHide\\` prop. This is not supported. Set \\`toolsOpen\\` to \\`false\\` when you set \\`toolsHide\\` to \\`true\\`.`\n );\n }\n }\n const { __internalRootRef } = useBaseComponent(\n 'AppLayout',\n {\n props: {\n contentType,\n disableContentPaddings: rest.disableContentPaddings,\n disableBodyScroll: rest.disableBodyScroll,\n navigationWidth,\n navigationHide: rest.navigationHide,\n toolsHide: rest.toolsHide,\n toolsWidth,\n maxContentWidth,\n minContentWidth,\n stickyNotifications: rest.stickyNotifications,\n disableContentHeaderOverlap: rest.disableContentHeaderOverlap,\n },\n metadata: {\n drawersCount: rest.drawers?.length ?? null,\n hasContentHeader: !!rest.contentHeader,\n },\n },\n analyticsMetadata\n );\n const isRefresh = useVisualRefresh();\n const isMobile = useMobile();\n\n const i18n = useInternalI18n('app-layout');\n const ariaLabels = {\n navigation: i18n('ariaLabels.navigation', rest.ariaLabels?.navigation),\n navigationClose: i18n('ariaLabels.navigationClose', rest.ariaLabels?.navigationClose),\n navigationToggle: i18n('ariaLabels.navigationToggle', rest.ariaLabels?.navigationToggle),\n notifications: i18n('ariaLabels.notifications', rest.ariaLabels?.notifications),\n tools: i18n('ariaLabels.tools', rest.ariaLabels?.tools),\n toolsClose: i18n('ariaLabels.toolsClose', rest.ariaLabels?.toolsClose),\n toolsToggle: i18n('ariaLabels.toolsToggle', rest.ariaLabels?.toolsToggle),\n drawers: i18n('ariaLabels.drawers', rest.ariaLabels?.drawers),\n drawersOverflow: i18n('ariaLabels.drawersOverflow', rest.ariaLabels?.drawersOverflow),\n drawersOverflowWithBadge: i18n('ariaLabels.drawersOverflowWithBadge', rest.ariaLabels?.drawersOverflowWithBadge),\n };\n const { navigationOpen: defaultNavigationOpen, ...restDefaults } = applyDefaults(\n contentType,\n { maxContentWidth, minContentWidth },\n isRefresh\n );\n\n const [navigationOpen = false, setNavigationOpen] = useControllable(\n controlledNavigationOpen,\n controlledOnNavigationChange,\n isMobile ? false : defaultNavigationOpen,\n { componentName: 'AppLayout', controlledProp: 'navigationOpen', changeHandler: 'onNavigationChange' }\n );\n const onNavigationChange = (event: NonCancelableCustomEvent) => {\n setNavigationOpen(event.detail.open);\n controlledOnNavigationChange?.(event);\n };\n\n const [rootRef, placement] = useAppLayoutPlacement(headerSelector, footerSelector);\n\n // This re-builds the props including the default values\n const props = {\n contentType,\n navigationWidth,\n toolsWidth,\n navigationOpen,\n onNavigationChange,\n ...restDefaults,\n ...rest,\n ariaLabels,\n placement,\n };\n\n const baseProps = getBaseProps(rest);\n\n return (\n
\n \n
\n );\n }\n);\n\napplyDisplayName(AppLayout, 'AppLayout');\nexport default AppLayout;\n", "// 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 = {\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\ninterface AppLayoutState {\n navigationOpen?: boolean;\n minContentWidth: number;\n maxContentWidth?: number | undefined;\n}\n\nexport function applyDefaults(\n contentType: AppLayoutProps.ContentType,\n stateFromProps: Pick,\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 };\n}\n", "// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React from 'react';\n\nimport { useVisualRefresh } from '../internal/hooks/use-visual-mode';\nimport ClassicAppLayout from './classic';\nimport { AppLayoutProps, AppLayoutPropsWithDefaults } from './interfaces';\nimport { useAppLayoutToolbarEnabled } from './utils/feature-flags';\nimport RefreshedAppLayout from './visual-refresh';\nimport ToolbarAppLayout from './visual-refresh-toolbar';\n\nexport const AppLayoutInternal = React.forwardRef((props, ref) => {\n const isRefresh = useVisualRefresh();\n const isToolbar = useAppLayoutToolbarEnabled();\n if (isRefresh) {\n if (isToolbar) {\n return ;\n } else {\n return ;\n }\n }\n return ;\n});\n", "// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React, { useCallback, useEffect, useImperativeHandle, useRef, useState } from 'react';\nimport clsx from 'clsx';\n\nimport { useContainerQuery } from '@cloudscape-design/component-toolkit';\nimport { findUpUntil } from '@cloudscape-design/component-toolkit/dom';\nimport { useStableCallback } from '@cloudscape-design/component-toolkit/internal';\n\nimport { SplitPanelSideToggleProps } from '../internal/context/split-panel-context';\nimport { fireNonCancelableEvent } from '../internal/events';\nimport { useControllable } from '../internal/hooks/use-controllable';\nimport { useMobile } from '../internal/hooks/use-mobile';\nimport {\n CONSTRAINED_MAIN_PANEL_MIN_HEIGHT,\n CONSTRAINED_PAGE_HEIGHT,\n getSplitPanelDefaultSize,\n MAIN_PANEL_MIN_HEIGHT,\n} from '../split-panel/utils/size-utils';\nimport ContentWrapper, { ContentWrapperProps } from './content-wrapper';\nimport { Drawer, DrawerTriggersBar } from './drawer';\nimport { ResizableDrawer } from './drawer/resizable-drawer';\nimport { AppLayoutProps, AppLayoutPropsWithDefaults } from './interfaces';\nimport { MobileToolbar } from './mobile-toolbar';\nimport { Notifications } from './notifications';\nimport { SideSplitPanelDrawer, SplitPanelProvider, SplitPanelProviderProps } from './split-panel';\nimport { shouldSplitPanelBeForcedToBottom } from './split-panel/split-panel-forced-position';\nimport { togglesConfig } from './toggles';\nimport { getStickyOffsetVars } from './utils/sticky-offsets';\nimport { TOOLS_DRAWER_ID, useDrawers } from './utils/use-drawers';\nimport { useFocusControl } from './utils/use-focus-control';\nimport { useSplitPanelFocusControl } from './utils/use-split-panel-focus-control';\n\nimport styles from './styles.css.js';\nimport testutilStyles from './test-classes/styles.css.js';\n\nconst ClassicAppLayout = React.forwardRef(\n (\n {\n navigation,\n navigationWidth,\n navigationHide,\n navigationOpen,\n tools,\n toolsWidth,\n toolsHide,\n toolsOpen: controlledToolsOpen,\n breadcrumbs,\n notifications,\n stickyNotifications,\n contentHeader,\n disableContentHeaderOverlap,\n content,\n contentType,\n disableContentPaddings,\n disableBodyScroll,\n maxContentWidth,\n minContentWidth,\n placement,\n ariaLabels,\n splitPanel,\n splitPanelSize: controlledSplitPanelSize,\n splitPanelOpen: controlledSplitPanelOpen,\n splitPanelPreferences: controlledSplitPanelPreferences,\n onSplitPanelPreferencesChange,\n onSplitPanelResize,\n onSplitPanelToggle,\n onNavigationChange,\n onToolsChange,\n drawers: controlledDrawers,\n onDrawerChange,\n activeDrawerId: controlledActiveDrawerId,\n ...rest\n }: AppLayoutPropsWithDefaults,\n ref: React.Ref\n ) => {\n // Private API for embedded view mode\n const __embeddedViewMode = Boolean((rest as any).__embeddedViewMode);\n\n const rootRef = useRef(null);\n const isMobile = useMobile();\n\n const [toolsOpen = false, setToolsOpen] = useControllable(controlledToolsOpen, onToolsChange, false, {\n componentName: 'AppLayout',\n controlledProp: 'toolsOpen',\n changeHandler: 'onToolsChange',\n });\n const onToolsToggle = (open: boolean) => {\n setToolsOpen(open);\n if (hasDrawers) {\n focusDrawersButtons();\n } else {\n focusToolsButtons();\n }\n fireNonCancelableEvent(onToolsChange, { open });\n };\n\n const {\n drawers,\n activeDrawer,\n minDrawerSize,\n activeDrawerSize,\n activeDrawerId,\n ariaLabelsWithDrawers,\n onActiveDrawerChange,\n onActiveDrawerResize,\n } = useDrawers(\n {\n drawers: controlledDrawers,\n onDrawerChange,\n activeDrawerId: controlledActiveDrawerId,\n ...rest,\n },\n ariaLabels,\n {\n disableDrawersMerge: true,\n ariaLabels,\n tools,\n toolsOpen,\n toolsHide,\n toolsWidth,\n onToolsToggle,\n }\n );\n ariaLabels = ariaLabelsWithDrawers;\n const hasDrawers = !!drawers;\n\n const { refs: navigationRefs, setFocus: focusNavButtons } = useFocusControl(navigationOpen);\n const {\n refs: toolsRefs,\n setFocus: focusToolsButtons,\n loseFocus: loseToolsFocus,\n } = useFocusControl(toolsOpen || activeDrawer !== undefined, true);\n const {\n refs: drawerRefs,\n setFocus: focusDrawersButtons,\n loseFocus: loseDrawersFocus,\n } = useFocusControl(!!activeDrawerId, true, activeDrawerId);\n\n const onNavigationToggle = useStableCallback((open: boolean) => {\n focusNavButtons();\n fireNonCancelableEvent(onNavigationChange, { open });\n });\n\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) {\n onNavigationToggle(false);\n }\n };\n\n useEffect(() => {\n // Close navigation drawer on mobile so that the main content is visible\n if (isMobile) {\n onNavigationToggle(false);\n }\n }, [isMobile, onNavigationToggle]);\n\n const navigationVisible = !navigationHide && navigationOpen;\n const toolsVisible = !toolsHide && toolsOpen;\n\n const [headerFooterHeight, setHeaderFooterHeight] = useState(0);\n // Delay applying changes in header/footer height, as applying them immediately can cause\n // ResizeOberver warnings due to the algorithm thinking that the change might have side-effects\n // further up the tree, therefore blocking notifications to prevent loops\n useEffect(() => {\n const id = requestAnimationFrame(() =>\n setHeaderFooterHeight(placement.insetBlockStart + placement.insetBlockEnd)\n );\n return () => cancelAnimationFrame(id);\n }, [placement.insetBlockStart, placement.insetBlockEnd]);\n const contentHeightStyle = {\n [disableBodyScroll ? 'blockSize' : 'minBlockSize']: `calc(100vh - ${headerFooterHeight}px)`,\n };\n\n const [notificationsHeight, notificationsRef] = useContainerQuery(rect => rect.contentBoxHeight);\n const anyPanelOpen = navigationVisible || toolsVisible || !!activeDrawer;\n const hasRenderedNotifications = notificationsHeight ? notificationsHeight > 0 : false;\n const stickyNotificationsHeight = stickyNotifications ? notificationsHeight ?? 0 : 0;\n\n const [splitPanelPreferences, setSplitPanelPreferences] = useControllable(\n controlledSplitPanelPreferences,\n onSplitPanelPreferencesChange,\n undefined,\n {\n componentName: 'AppLayout',\n controlledProp: 'splitPanelPreferences',\n changeHandler: 'onSplitPanelPreferencesChange',\n }\n );\n const [splitPanelOpen = false, setSplitPanelOpen] = useControllable(\n controlledSplitPanelOpen,\n onSplitPanelToggle,\n false,\n {\n componentName: 'AppLayout',\n controlledProp: 'splitPanelOpen',\n changeHandler: 'onSplitPanelToggle',\n }\n );\n\n const splitPanelPosition = splitPanelPreferences?.position || 'bottom';\n const [splitPanelReportedToggle, setSplitPanelReportedToggle] = useState({\n displayed: false,\n ariaLabel: undefined,\n });\n const splitPanelDisplayed = !!(splitPanel && (splitPanelReportedToggle.displayed || splitPanelOpen));\n\n const closedDrawerWidth = 40;\n const effectiveNavigationWidth = navigationHide ? 0 : navigationOpen ? navigationWidth : closedDrawerWidth;\n\n const defaultSplitPanelSize = getSplitPanelDefaultSize(splitPanelPosition);\n const [splitPanelSize = defaultSplitPanelSize, setSplitPanelSize] = useControllable(\n controlledSplitPanelSize,\n onSplitPanelResize,\n defaultSplitPanelSize,\n {\n componentName: 'AppLayout',\n controlledProp: 'splitPanelSize',\n changeHandler: 'onSplitPanelResize',\n }\n );\n\n const mainContentRef = useRef(null);\n const legacyScrollRootRef = useRef(null);\n\n const { refs: splitPanelRefs, setLastInteraction: setSplitPanelLastInteraction } = useSplitPanelFocusControl([\n splitPanelPreferences,\n splitPanelOpen,\n ]);\n\n const onSplitPanelPreferencesSet = useCallback(\n (detail: { position: 'side' | 'bottom' }) => {\n setSplitPanelPreferences(detail);\n setSplitPanelLastInteraction({ type: 'position' });\n fireNonCancelableEvent(onSplitPanelPreferencesChange, detail);\n },\n [setSplitPanelPreferences, onSplitPanelPreferencesChange, setSplitPanelLastInteraction]\n );\n const onSplitPanelSizeSet = useCallback(\n (newSize: number) => {\n setSplitPanelSize(newSize);\n fireNonCancelableEvent(onSplitPanelResize, { size: newSize });\n },\n [setSplitPanelSize, onSplitPanelResize]\n );\n\n const onSplitPanelToggleHandler = useCallback(() => {\n setSplitPanelOpen(!splitPanelOpen);\n setSplitPanelLastInteraction({ type: splitPanelOpen ? 'close' : 'open' });\n fireNonCancelableEvent(onSplitPanelToggle, { open: !splitPanelOpen });\n }, [setSplitPanelOpen, splitPanelOpen, onSplitPanelToggle, setSplitPanelLastInteraction]);\n\n const getSplitPanelMaxHeight = useStableCallback(() => {\n if (typeof document === 'undefined') {\n return 0; // render the split panel in its minimum possible size\n } else if (disableBodyScroll && legacyScrollRootRef.current) {\n const availableHeight = legacyScrollRootRef.current.clientHeight;\n return availableHeight < CONSTRAINED_PAGE_HEIGHT ? availableHeight : availableHeight - MAIN_PANEL_MIN_HEIGHT;\n } else {\n const availableHeight =\n document.documentElement.clientHeight - placement.insetBlockStart - placement.insetBlockEnd;\n return availableHeight < CONSTRAINED_PAGE_HEIGHT\n ? availableHeight - CONSTRAINED_MAIN_PANEL_MIN_HEIGHT\n : availableHeight - MAIN_PANEL_MIN_HEIGHT;\n }\n });\n\n const rightDrawerBarWidth = drawers ? (drawers.length > 1 ? closedDrawerWidth : 0) : 0;\n const contentPadding = 80;\n // all content except split-panel + drawers/tools area\n const resizableSpaceAvailable = Math.max(\n 0,\n placement.inlineSize - effectiveNavigationWidth - minContentWidth - contentPadding - rightDrawerBarWidth\n );\n\n const getEffectiveToolsWidth = () => {\n if (activeDrawerSize && activeDrawer) {\n return Math.min(resizableSpaceAvailable, activeDrawerSize);\n }\n\n if (toolsHide || drawers) {\n return 0;\n }\n\n if (toolsOpen) {\n return toolsWidth;\n }\n\n return closedDrawerWidth;\n };\n\n const effectiveToolsWidth = getEffectiveToolsWidth();\n const availableWidthForSplitPanel = resizableSpaceAvailable - effectiveToolsWidth;\n const isSplitPanelForcedPosition = shouldSplitPanelBeForcedToBottom({\n isMobile,\n availableWidthForSplitPanel,\n });\n const finalSplitPanePosition = isSplitPanelForcedPosition ? 'bottom' : splitPanelPosition;\n\n const splitPaneAvailableOnTheSide = splitPanelDisplayed && finalSplitPanePosition === 'side';\n\n const sideSplitPanelSize = splitPaneAvailableOnTheSide ? (splitPanelOpen ? splitPanelSize : closedDrawerWidth) : 0;\n const sideSplitPanelMaxWidth = Math.max(0, resizableSpaceAvailable - effectiveToolsWidth);\n const drawerMaxSize = Math.max(0, resizableSpaceAvailable - sideSplitPanelSize);\n\n const navigationClosedWidth = navigationHide || isMobile ? 0 : closedDrawerWidth;\n\n const contentMaxWidthStyle = !isMobile ? { maxWidth: maxContentWidth } : undefined;\n\n const [splitPanelReportedSize, setSplitPanelReportedSize] = useState(0);\n const [splitPanelReportedHeaderHeight, setSplitPanelReportedHeaderHeight] = useState(0);\n\n const splitPanelContextProps: SplitPanelProviderProps = {\n topOffset: placement.insetBlockStart + (finalSplitPanePosition === 'bottom' ? stickyNotificationsHeight : 0),\n bottomOffset: placement.insetBlockEnd,\n leftOffset:\n placement.insetInlineStart +\n (isMobile ? 0 : !navigationHide && navigationOpen ? navigationWidth : navigationClosedWidth),\n rightOffset: isMobile ? 0 : placement.insetInlineEnd + effectiveToolsWidth + rightDrawerBarWidth,\n position: finalSplitPanePosition,\n size: splitPanelSize,\n maxWidth: sideSplitPanelMaxWidth,\n getMaxHeight: getSplitPanelMaxHeight,\n disableContentPaddings,\n contentWidthStyles: contentMaxWidthStyle,\n isOpen: splitPanelOpen,\n isForcedPosition: isSplitPanelForcedPosition,\n onResize: onSplitPanelSizeSet,\n onToggle: onSplitPanelToggleHandler,\n onPreferencesChange: onSplitPanelPreferencesSet,\n setSplitPanelToggle: setSplitPanelReportedToggle,\n reportSize: setSplitPanelReportedSize,\n reportHeaderHeight: setSplitPanelReportedHeaderHeight,\n refs: splitPanelRefs,\n };\n const splitPanelWrapped = splitPanel && (\n \n {finalSplitPanePosition === 'side' ? (\n {splitPanel}\n ) : (\n splitPanel\n )}\n \n );\n\n const contentWrapperProps: ContentWrapperProps = {\n contentType,\n navigationPadding: navigationHide || !!navigationOpen,\n contentWidthStyles: !isMobile ? { minWidth: minContentWidth, maxWidth: maxContentWidth } : undefined,\n toolsPadding:\n // tools padding is displayed in one of the three cases\n // 1. Nothing on the that screen edge (no tools panel and no split panel)\n toolsHide ||\n (hasDrawers && !activeDrawer && (!splitPanelDisplayed || finalSplitPanePosition !== 'side')) ||\n // 2. Tools panel is present and open\n toolsVisible ||\n // 3. Split panel is open in side position\n (splitPaneAvailableOnTheSide && splitPanelOpen),\n isMobile,\n };\n\n useImperativeHandle(ref, () => ({\n openTools: () => onToolsToggle(true),\n closeNavigationIfNecessary: () => {\n if (isMobile) {\n onNavigationToggle(false);\n }\n },\n focusToolsClose: () => {\n if (hasDrawers) {\n focusDrawersButtons(true);\n } else {\n focusToolsButtons(true);\n }\n },\n focusActiveDrawer: () => focusDrawersButtons(true),\n focusSplitPanel: () => splitPanelRefs.slider.current?.focus(),\n }));\n\n const splitPanelBottomOffset =\n (!splitPanelDisplayed || finalSplitPanePosition !== 'bottom'\n ? undefined\n : splitPanelOpen\n ? splitPanelReportedSize\n : splitPanelReportedHeaderHeight) ?? undefined;\n\n const [mobileBarHeight, mobileBarRef] = useContainerQuery(rect => rect.contentBoxHeight);\n\n return (\n \n {isMobile && !__embeddedViewMode && (!toolsHide || !navigationHide || breadcrumbs) && (\n onNavigationToggle(true)}\n onToolsOpen={() => onToolsToggle(true)}\n unfocusable={anyPanelOpen}\n mobileBarRef={mobileBarRef}\n drawers={drawers}\n activeDrawerId={activeDrawerId}\n onDrawerChange={newDrawerId => {\n onActiveDrawerChange(newDrawerId, { initiatedByUserAction: true });\n if (newDrawerId !== activeDrawerId) {\n focusToolsButtons();\n focusDrawersButtons();\n }\n }}\n >\n {breadcrumbs}\n \n )}\n
\n {!navigationHide && (\n \n {navigation}\n \n )}\n \n \n {notifications && (\n \n {notifications}\n \n )}\n {((!isMobile && breadcrumbs) || contentHeader) && (\n \n {!isMobile && breadcrumbs && (\n
{breadcrumbs}
\n )}\n {contentHeader && (\n \n {contentHeader}\n
\n )}\n \n )}\n \n {content}\n \n
\n {finalSplitPanePosition === 'bottom' && splitPanelWrapped}\n \n\n {finalSplitPanePosition === 'side' && splitPanelWrapped}\n\n {hasDrawers ? (\n {\n if (!isOpen) {\n focusToolsButtons();\n focusDrawersButtons();\n onActiveDrawerChange(null, { initiatedByUserAction: true });\n }\n }}\n isOpen={true}\n hideOpenButton={true}\n toggleRefs={drawerRefs}\n type=\"tools\"\n onLoseFocus={loseDrawersFocus}\n activeDrawer={activeDrawer}\n onResize={changeDetail => onActiveDrawerResize(changeDetail)}\n refs={drawerRefs}\n toolsContent={drawers?.find(drawer => drawer.id === TOOLS_DRAWER_ID)?.content}\n >\n {activeDrawer?.content}\n \n ) : (\n !toolsHide && (\n \n {tools}\n \n )\n )}\n {hasDrawers && drawers.length > 0 && (\n {\n if (activeDrawerId !== newDrawerId) {\n focusToolsButtons();\n focusDrawersButtons();\n }\n onActiveDrawerChange(newDrawerId, { initiatedByUserAction: true });\n }}\n ariaLabels={ariaLabels}\n />\n )}\n
\n
\n );\n }\n);\n\nexport default ClassicAppLayout;\n", "// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\n\n/**\n * The page height where the page is considered constrained.\n */\nexport const CONSTRAINED_PAGE_HEIGHT = 400;\n\n/**\n * Based on approximate height of breadcrumb, table header, and the first table row\n */\nexport const MAIN_PANEL_MIN_HEIGHT = 250;\n\n/**\n * Based on approximate height of app bar on comfortable mode on mobile.\n */\nexport const CONSTRAINED_MAIN_PANEL_MIN_HEIGHT = 40;\n\n/**\n * Estimate a default split panel size for the first render based on the document size.\n */\nexport function getSplitPanelDefaultSize(position: 'side' | 'bottom') {\n if (typeof document === 'undefined') {\n return 0; // render the split panel in its minimum possible size\n }\n return position === 'side' ? document.documentElement.clientWidth / 3 : document.documentElement.clientHeight / 2;\n}\n\nexport function getLimitedValue(min: number, value: number, max: number) {\n if (min > max) {\n return min;\n }\n if (value < min) {\n return min;\n }\n if (value > max) {\n return max;\n }\n return value;\n}\n", "// 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 { AppLayoutProps } from '../interfaces';\n\nimport styles from './styles.css.js';\n\nexport interface ContentWrapperProps {\n className?: string;\n style?: React.CSSProperties;\n contentType: AppLayoutProps.ContentType;\n children?: React.ReactNode;\n isMobile: boolean;\n navigationPadding: boolean;\n toolsPadding: boolean;\n disablePaddings?: boolean;\n contentWidthStyles?: React.CSSProperties;\n}\n\nconst ContentWrapper = React.forwardRef(\n (\n {\n className,\n style,\n contentType,\n children,\n toolsPadding,\n disablePaddings,\n navigationPadding,\n isMobile,\n contentWidthStyles,\n }: ContentWrapperProps,\n ref: React.Ref\n ) => {\n if (disablePaddings) {\n return (\n
\n {children}\n
\n );\n }\n return (\n \n
\n {children}\n
\n \n );\n }\n);\n\nexport default ContentWrapper;\n", "\n import './styles.scoped.css';\n export default {\n \"content-wrapper\": \"awsui_content-wrapper_zycdx_1yo8g_153\",\n \"content-wrapper-mobile\": \"awsui_content-wrapper-mobile_zycdx_1yo8g_157\",\n \"content-type-dashboard\": \"awsui_content-type-dashboard_zycdx_1yo8g_162\"\n};\n ", "// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React, { useRef } from 'react';\nimport clsx from 'clsx';\n\nimport { useContainerQuery } from '@cloudscape-design/component-toolkit';\nimport { useDensityMode } from '@cloudscape-design/component-toolkit/internal';\n\nimport { getVisualContextClassname } from '../../internal/components/visual-context';\nimport { AppLayoutProps } from '../interfaces';\nimport { CloseButton, ToggleButton, togglesConfig } from '../toggles';\nimport { TOOLS_DRAWER_ID } from '../utils/use-drawers';\nimport { splitItems } from './drawers-helpers';\nimport { DesktopDrawerProps, DrawerTriggersBarProps } from './interfaces';\nimport OverflowMenu from './overflow-menu';\n\nimport testutilStyles from '../test-classes/styles.css.js';\nimport styles from './styles.css.js';\n\n// We are using two landmarks per drawer, i.e. two NAVs and two ASIDEs, because of several\n// known bugs in NVDA that cause focus changes within a container to sometimes not be\n// announced. As a result, we use one region for the open button and one region for the\n// actual drawer content, always hiding the other one when it's not visible.\n// An alternative solution to follow a more classic implementation here to only have one\n// button that triggers the opening/closing of the drawer also did not work due to another\n// series of bugs in NVDA (together with Firefox) which prevent the changed expanded state\n// from being announced.\n// Even with this workaround in place, the announcement of the close button when opening a\n// panel in NVDA is not working correctly. The suspected root cause is one of the bugs below\n// as well.\n// Relevant tickets:\n// * https://github.com/nvaccess/nvda/issues/6606\n// * https://github.com/nvaccess/nvda/issues/5825\n// * https://github.com/nvaccess/nvda/issues/5247\n// * https://github.com/nvaccess/nvda/pull/8869 (reverted PR that was going to fix it)\nexport const Drawer = React.forwardRef(\n (\n {\n id,\n contentClassName,\n toggleClassName,\n closeClassName,\n width,\n type,\n toggleRefs,\n topOffset,\n bottomOffset,\n ariaLabels,\n children,\n hideOpenButton,\n isOpen,\n isHidden,\n isMobile,\n onToggle,\n onClick,\n onLoseFocus,\n resizeHandle,\n }: DesktopDrawerProps,\n ref: React.Ref\n ) => {\n const openButtonWrapperRef = useRef(null);\n const { TagName, iconName } = togglesConfig[type];\n const { mainLabel, closeLabel, openLabel } = ariaLabels;\n const drawerContentWidthOpen = isMobile ? undefined : width;\n const drawerContentWidth = isOpen ? drawerContentWidthOpen : undefined;\n\n const regularOpenButton = (\n \n onToggle(true)}\n ariaExpanded={isOpen ? undefined : false}\n />\n \n );\n\n return (\n {\n if (!e.relatedTarget || !e.currentTarget.contains(e.relatedTarget)) {\n onLoseFocus(e);\n }\n }\n : undefined\n }\n onClick={event => {\n if (onClick) {\n onClick(event);\n }\n if (!isOpen) {\n // to prevent calling onToggle from the drawer when it's called from the toggle button\n if (\n openButtonWrapperRef.current === event.target ||\n !openButtonWrapperRef.current?.contains(event.target as Node)\n ) {\n onToggle(true);\n }\n }\n }}\n >\n \n {!isMobile && !hideOpenButton && regularOpenButton}\n \n {!isMobile && isOpen &&
{resizeHandle}
}\n {\n onToggle(false);\n }}\n />\n {children}\n \n \n \n );\n }\n);\n\ninterface DrawerTriggerProps {\n testUtilsClassName?: string;\n ariaLabel: string | undefined;\n ariaExpanded: boolean;\n ariaControls?: string;\n badge: boolean | undefined;\n itemId?: string;\n isActive: boolean;\n trigger: AppLayoutProps.Drawer['trigger'];\n onClick: (() => void) | undefined;\n}\n\nconst DrawerTrigger = React.forwardRef(\n (\n {\n testUtilsClassName,\n ariaLabel,\n ariaExpanded,\n ariaControls,\n badge,\n itemId,\n isActive,\n trigger,\n onClick,\n }: DrawerTriggerProps,\n ref: React.Ref<{ focus: () => void }>\n ) => (\n \n \n \n )\n);\n\nexport const DrawerTriggersBar = ({\n isMobile,\n topOffset,\n bottomOffset,\n activeDrawerId,\n ariaLabels,\n drawers,\n drawerRefs,\n onDrawerChange,\n}: DrawerTriggersBarProps) => {\n const containerRef = React.useRef(null);\n const previousActiveDrawerId = useRef(activeDrawerId);\n const [containerHeight, triggersContainerRef] = useContainerQuery(rect => rect.contentBoxHeight);\n const isCompactMode = useDensityMode(containerRef) === 'compact';\n\n if (activeDrawerId) {\n previousActiveDrawerId.current = activeDrawerId;\n }\n\n const getIndexOfOverflowItem = () => {\n if (containerHeight) {\n const ITEM_HEIGHT = isCompactMode ? 34 : 38;\n const overflowSpot = containerHeight / 1.5;\n\n const index = Math.floor(overflowSpot / ITEM_HEIGHT);\n\n return index;\n }\n return 0;\n };\n\n const { visibleItems, overflowItems } = splitItems(drawers, getIndexOfOverflowItem(), activeDrawerId);\n const overflowMenuHasBadge = !!overflowItems.find(item => item.badge);\n\n return (\n \n onDrawerChange(drawers[0].id !== activeDrawerId ? drawers[0].id : null)\n : undefined\n }\n >\n {!isMobile && (\n \n )}\n \n \n );\n};\n", "// 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 { ButtonProps } from '../../button/interfaces';\nimport { InternalButton } from '../../button/internal';\nimport InternalIcon from '../../icon/internal';\nimport { AppLayoutProps } from '../interfaces';\nimport { AppLayoutButtonProps } from './interfaces';\n\nimport testutilStyles from '../test-classes/styles.css.js';\nimport styles from './styles.css.js';\n\nexport const togglesConfig = {\n navigation: {\n TagName: 'nav',\n iconName: 'menu',\n getLabels: (labels: AppLayoutProps.Labels = {}) => ({\n mainLabel: labels.navigation,\n openLabel: labels.navigationToggle,\n closeLabel: labels.navigationClose,\n }),\n },\n tools: {\n TagName: 'aside',\n iconName: 'status-info',\n getLabels: (labels: AppLayoutProps.Labels = {}) => ({\n mainLabel: labels.tools,\n openLabel: labels.toolsToggle,\n closeLabel: labels.toolsClose,\n }),\n },\n} as const;\n\nexport const ToggleButton = React.forwardRef(\n (\n {\n className,\n ariaLabel,\n ariaExpanded,\n ariaControls,\n iconName,\n iconSvg,\n disabled,\n testId,\n onClick,\n badge,\n }: AppLayoutButtonProps,\n ref: React.Ref<{ focus(): void }>\n ) => {\n return (\n }\n className={clsx(className, styles['toggle-button'], {\n [testutilStyles['drawers-trigger-with-badge']]: badge,\n })}\n aria-label={ariaLabel}\n type=\"button\"\n onClick={onClick}\n disabled={disabled}\n aria-expanded={ariaExpanded}\n aria-haspopup={ariaExpanded ? undefined : true}\n aria-controls={ariaControls}\n data-testid={testId}\n >\n \n \n );\n }\n);\n\ninterface CloseButtonProps {\n className?: string;\n ariaLabel: string | undefined;\n onClick: () => void;\n}\n\nexport const CloseButton = React.forwardRef(\n ({ className, ariaLabel, onClick }: CloseButtonProps, ref: React.Ref) => {\n return (\n \n \n \n );\n }\n);\n", "\n import './styles.scoped.css';\n export default {\n \"root\": \"awsui_root_1fj9k_z5zo8_5\",\n \"navigation\": \"awsui_navigation_1fj9k_z5zo8_6\",\n \"navigation-toggle\": \"awsui_navigation-toggle_1fj9k_z5zo8_7\",\n \"navigation-close\": \"awsui_navigation-close_1fj9k_z5zo8_8\",\n \"content\": \"awsui_content_1fj9k_z5zo8_9\",\n \"notifications\": \"awsui_notifications_1fj9k_z5zo8_10\",\n \"breadcrumbs\": \"awsui_breadcrumbs_1fj9k_z5zo8_11\",\n \"tools\": \"awsui_tools_1fj9k_z5zo8_12\",\n \"tools-close\": \"awsui_tools-close_1fj9k_z5zo8_13\",\n \"tools-toggle\": \"awsui_tools-toggle_1fj9k_z5zo8_14\",\n \"drawer-closed\": \"awsui_drawer-closed_1fj9k_z5zo8_15\",\n \"mobile-bar\": \"awsui_mobile-bar_1fj9k_z5zo8_16\",\n \"disable-body-scroll-root\": \"awsui_disable-body-scroll-root_1fj9k_z5zo8_17\",\n \"drawers-trigger\": \"awsui_drawers-trigger_1fj9k_z5zo8_18\",\n \"drawers-trigger-global\": \"awsui_drawers-trigger-global_1fj9k_z5zo8_19\",\n \"drawers-trigger-with-badge\": \"awsui_drawers-trigger-with-badge_1fj9k_z5zo8_20\",\n \"active-drawer\": \"awsui_active-drawer_1fj9k_z5zo8_21\",\n \"active-drawer-close-button\": \"awsui_active-drawer-close-button_1fj9k_z5zo8_22\",\n \"overflow-menu\": \"awsui_overflow-menu_1fj9k_z5zo8_23\",\n \"drawers-slider\": \"awsui_drawers-slider_1fj9k_z5zo8_24\",\n \"toolbar\": \"awsui_toolbar_1fj9k_z5zo8_25\",\n \"trigger-wrapper-tooltip-visible\": \"awsui_trigger-wrapper-tooltip-visible_1fj9k_z5zo8_26\",\n \"trigger-tooltip\": \"awsui_trigger-tooltip_1fj9k_z5zo8_27\"\n};\n ", "\n import './styles.scoped.css';\n export default {\n \"toggle-button\": \"awsui_toggle-button_16w0h_8566m_185\",\n \"close-button\": \"awsui_close-button_16w0h_8566m_220\"\n};\n ", "// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React, { useEffect, useRef, useState } from 'react';\n\nimport { useStableCallback } from '@cloudscape-design/component-toolkit/internal';\n\nimport { fireNonCancelableEvent } from '../../internal/events';\nimport { useControllable } from '../../internal/hooks/use-controllable';\nimport { awsuiPluginsInternal } from '../../internal/plugins/api';\nimport { DrawersToggledListener } from '../../internal/plugins/controllers/drawers';\nimport { sortByPriority } from '../../internal/plugins/helpers/utils';\nimport { AppLayoutProps } from '../interfaces';\nimport { convertRuntimeDrawers, DrawersLayout } from '../runtime-drawer';\nimport { togglesConfig } from '../toggles';\n\nexport const TOOLS_DRAWER_ID = 'awsui-internal-tools';\n\ninterface ToolsProps {\n toolsHide: boolean | undefined;\n toolsOpen: boolean | undefined;\n toolsWidth: number;\n tools: React.ReactNode | undefined;\n onToolsToggle: (newOpen: boolean) => void;\n ariaLabels: AppLayoutProps.Labels | undefined;\n disableDrawersMerge?: boolean;\n}\n\nexport interface OnChangeParams {\n initiatedByUserAction: boolean;\n}\n\nfunction getToolsDrawerItem(props: ToolsProps): AppLayoutProps.Drawer | null {\n if (props.toolsHide) {\n return null;\n }\n const { iconName, getLabels } = togglesConfig.tools;\n const { mainLabel, closeLabel, openLabel } = getLabels(props.ariaLabels);\n return {\n id: TOOLS_DRAWER_ID,\n content: props.tools,\n resizable: false,\n ariaLabels: {\n triggerButton: openLabel,\n closeButton: closeLabel,\n drawerName: mainLabel ?? '',\n },\n trigger: {\n iconName: iconName,\n },\n };\n}\n\nconst DRAWERS_LIMIT = 2;\n\nconst DEFAULT_ON_CHANGE_PARAMS = { initiatedByUserAction: true };\n\nfunction useRuntimeDrawers(\n disableRuntimeDrawers: boolean | undefined,\n activeDrawerId: string | null,\n onActiveDrawerChange: (newDrawerId: string | null, { initiatedByUserAction }: OnChangeParams) => void,\n activeGlobalDrawersIds: Array,\n onActiveGlobalDrawersChange: (newDrawerId: string, { initiatedByUserAction }: OnChangeParams) => void\n) {\n const [runtimeDrawers, setRuntimeDrawers] = useState({\n localBefore: [],\n localAfter: [],\n global: [],\n });\n const onLocalDrawerChangeStable = useStableCallback(onActiveDrawerChange);\n const onGlobalDrawersChangeStable = useStableCallback(onActiveGlobalDrawersChange);\n\n const localDrawerWasOpenRef = useRef(false);\n localDrawerWasOpenRef.current = localDrawerWasOpenRef.current || !!activeDrawerId;\n const activeGlobalDrawersIdsRef = useRef>([]);\n activeGlobalDrawersIdsRef.current = activeGlobalDrawersIds;\n\n useEffect(() => {\n if (disableRuntimeDrawers) {\n return;\n }\n const unsubscribe = awsuiPluginsInternal.appLayout.onDrawersRegistered(drawers => {\n const localDrawers = drawers.filter(drawer => drawer.type !== 'global');\n const globalDrawers = drawers.filter(drawer => drawer.type === 'global');\n setRuntimeDrawers(convertRuntimeDrawers(localDrawers, globalDrawers));\n if (!localDrawerWasOpenRef.current) {\n const defaultActiveLocalDrawer = sortByPriority(localDrawers).find(drawer => drawer.defaultActive);\n if (defaultActiveLocalDrawer) {\n onLocalDrawerChangeStable(defaultActiveLocalDrawer.id, { initiatedByUserAction: false });\n }\n }\n\n const drawersNotActiveByDefault = globalDrawers.filter(drawer => !drawer.defaultActive);\n const hasDrawersOpenByUserAction = drawersNotActiveByDefault.find(drawer =>\n activeGlobalDrawersIdsRef.current.includes(drawer.id)\n );\n if (hasDrawersOpenByUserAction || activeGlobalDrawersIdsRef.current.length === DRAWERS_LIMIT) {\n return;\n }\n\n const defaultActiveGlobalDrawers = sortByPriority(globalDrawers).filter(\n drawer => !activeGlobalDrawersIdsRef.current.includes(drawer.id) && drawer.defaultActive\n );\n defaultActiveGlobalDrawers.forEach(drawer => {\n onGlobalDrawersChangeStable(drawer.id, { initiatedByUserAction: false });\n });\n });\n return () => {\n unsubscribe();\n setRuntimeDrawers({ localBefore: [], localAfter: [], global: [] });\n };\n }, [disableRuntimeDrawers, onGlobalDrawersChangeStable, onLocalDrawerChangeStable]);\n\n return runtimeDrawers;\n}\n\nfunction useDrawerRuntimeOpenClose(\n disableRuntimeDrawers: boolean | undefined,\n localDrawers: AppLayoutProps.Drawer[] | null,\n globalDrawers: AppLayoutProps.Drawer[],\n activeDrawerId: string | null,\n onActiveDrawerChange: (newDrawerId: string | null, { initiatedByUserAction }: OnChangeParams) => void,\n activeGlobalDrawersIds: Array,\n onActiveGlobalDrawersChange: (newDrawerId: string, { initiatedByUserAction }: OnChangeParams) => void\n) {\n const onDrawerOpened: DrawersToggledListener = useStableCallback((drawerId, params = DEFAULT_ON_CHANGE_PARAMS) => {\n const localDrawer = localDrawers?.find(drawer => drawer.id === drawerId);\n const globalDrawer = globalDrawers.find(drawer => drawer.id === drawerId);\n if (localDrawer && activeDrawerId !== drawerId) {\n onActiveDrawerChange(drawerId, params);\n }\n if (globalDrawer && !activeGlobalDrawersIds.includes(drawerId)) {\n onActiveGlobalDrawersChange(drawerId, params);\n }\n });\n\n const onDrawerClosed: DrawersToggledListener = useStableCallback((drawerId, params = DEFAULT_ON_CHANGE_PARAMS) => {\n const localDrawer = localDrawers?.find(drawer => drawer.id === drawerId);\n const globalDrawer = globalDrawers.find(drawer => drawer.id === drawerId);\n if (localDrawer && activeDrawerId === drawerId) {\n onActiveDrawerChange(null, params);\n }\n if (globalDrawer && activeGlobalDrawersIds.includes(drawerId)) {\n onActiveGlobalDrawersChange(drawerId, params);\n }\n });\n\n useEffect(() => {\n if (disableRuntimeDrawers) {\n return;\n }\n return awsuiPluginsInternal.appLayout.onDrawerOpened(onDrawerOpened);\n }, [disableRuntimeDrawers, onDrawerOpened]);\n\n useEffect(() => {\n if (disableRuntimeDrawers) {\n return;\n }\n return awsuiPluginsInternal.appLayout.onDrawerClosed(onDrawerClosed);\n }, [disableRuntimeDrawers, onDrawerClosed]);\n}\n\nfunction applyToolsDrawer(toolsProps: ToolsProps, runtimeDrawers: DrawersLayout) {\n const drawers = [...runtimeDrawers.localBefore, ...runtimeDrawers.localAfter];\n if (drawers.length === 0 && toolsProps.disableDrawersMerge) {\n return null;\n }\n const toolsItem = getToolsDrawerItem(toolsProps);\n if (toolsItem) {\n drawers.unshift(toolsItem);\n }\n\n return drawers;\n}\n\nexport const MIN_DRAWER_SIZE = 290;\n\ntype UseDrawersProps = Pick & {\n __disableRuntimeDrawers?: boolean;\n onGlobalDrawerFocus?: (drawerId: string, open: boolean) => void;\n onAddNewActiveDrawer?: (drawerId: string) => void;\n};\n\nexport function useDrawers(\n {\n drawers,\n activeDrawerId: controlledActiveDrawerId,\n onDrawerChange,\n onGlobalDrawerFocus,\n onAddNewActiveDrawer,\n __disableRuntimeDrawers: disableRuntimeDrawers,\n }: UseDrawersProps,\n ariaLabels: AppLayoutProps['ariaLabels'],\n toolsProps: ToolsProps\n) {\n const [activeDrawerId = null, setActiveDrawerId] = useControllable(controlledActiveDrawerId, onDrawerChange, null, {\n componentName: 'AppLayout',\n controlledProp: 'activeDrawerId',\n changeHandler: 'onChange',\n });\n const [activeGlobalDrawersIds, setActiveGlobalDrawersIds] = useState>([]);\n const [drawerSizes, setDrawerSizes] = useState>({});\n // FIFO queue that keeps track of open drawers, where the first element is the most recently opened drawer\n const drawersOpenQueue = useRef>([]);\n\n function onActiveDrawerResize({ id, size }: { id: string; size: number }) {\n setDrawerSizes(oldSizes => ({ ...oldSizes, [id]: size }));\n fireNonCancelableEvent(activeDrawer?.onResize, { id, size });\n const activeGlobalDrawer = runtimeGlobalDrawers.find(drawer => drawer.id === id);\n fireNonCancelableEvent(activeGlobalDrawer?.onResize, { id, size });\n }\n\n function onActiveDrawerChange(\n newDrawerId: string | null,\n { initiatedByUserAction }: OnChangeParams = DEFAULT_ON_CHANGE_PARAMS\n ) {\n setActiveDrawerId(newDrawerId);\n if (newDrawerId) {\n onAddNewActiveDrawer?.(newDrawerId);\n }\n if (hasOwnDrawers) {\n fireNonCancelableEvent(onDrawerChange, { activeDrawerId: newDrawerId });\n } else if (!toolsProps.toolsHide) {\n toolsProps.onToolsToggle(newDrawerId === TOOLS_DRAWER_ID);\n }\n\n if (newDrawerId) {\n drawersOpenQueue.current = [newDrawerId, ...drawersOpenQueue.current];\n const newDrawer = [...runtimeDrawers.localBefore, ...runtimeDrawers.localAfter]?.find(\n drawer => drawer.id === newDrawerId\n );\n fireNonCancelableEvent(newDrawer?.onToggle, { isOpen: true, initiatedByUserAction });\n }\n\n if (activeDrawerId) {\n drawersOpenQueue.current = drawersOpenQueue.current.filter(id => id !== activeDrawerId);\n const activeDrawer = [...runtimeDrawers.localBefore, ...runtimeDrawers.localAfter]?.find(\n drawer => drawer.id === activeDrawerId\n );\n fireNonCancelableEvent(activeDrawer?.onToggle, { isOpen: false, initiatedByUserAction });\n }\n }\n\n function onActiveGlobalDrawersChange(\n drawerId: string,\n { initiatedByUserAction }: Partial = DEFAULT_ON_CHANGE_PARAMS\n ) {\n const drawer = runtimeGlobalDrawers.find(drawer => drawer.id === drawerId);\n if (activeGlobalDrawersIds.includes(drawerId)) {\n setActiveGlobalDrawersIds(currentState => currentState.filter(id => id !== drawerId));\n onGlobalDrawerFocus?.(drawerId, false);\n drawersOpenQueue.current = drawersOpenQueue.current.filter(id => id !== drawerId);\n fireNonCancelableEvent(drawer?.onToggle, { isOpen: false, initiatedByUserAction });\n } else if (drawerId) {\n onAddNewActiveDrawer?.(drawerId);\n setActiveGlobalDrawersIds(currentState => [drawerId, ...currentState].slice(0, DRAWERS_LIMIT!));\n onGlobalDrawerFocus?.(drawerId, true);\n drawersOpenQueue.current = [drawerId, ...drawersOpenQueue.current];\n fireNonCancelableEvent(drawer?.onToggle, { isOpen: true, initiatedByUserAction });\n }\n }\n\n const hasOwnDrawers = !!drawers;\n // support toolsOpen in runtime-drawers-only mode\n let activeDrawerIdResolved =\n toolsProps?.toolsOpen && !hasOwnDrawers\n ? TOOLS_DRAWER_ID\n : activeDrawerId !== TOOLS_DRAWER_ID\n ? activeDrawerId\n : null;\n const runtimeDrawers = useRuntimeDrawers(\n disableRuntimeDrawers,\n activeDrawerIdResolved,\n onActiveDrawerChange,\n activeGlobalDrawersIds,\n onActiveGlobalDrawersChange\n );\n const { localBefore, localAfter, global: runtimeGlobalDrawers } = runtimeDrawers;\n const combinedLocalDrawers = drawers\n ? [...localBefore, ...drawers, ...localAfter]\n : applyToolsDrawer(toolsProps, runtimeDrawers);\n const activeDrawer = combinedLocalDrawers?.find(drawer => drawer.id === activeDrawerIdResolved);\n // ensure that id is only defined when the drawer exists\n activeDrawerIdResolved = activeDrawer?.id ?? null;\n const activeGlobalDrawers = runtimeGlobalDrawers.filter(drawer => activeGlobalDrawersIds.includes(drawer.id));\n\n useDrawerRuntimeOpenClose(\n disableRuntimeDrawers,\n combinedLocalDrawers,\n runtimeGlobalDrawers,\n activeDrawerId,\n onActiveDrawerChange,\n activeGlobalDrawersIds,\n onActiveGlobalDrawersChange\n );\n\n const activeDrawerSize = activeDrawerIdResolved\n ? drawerSizes[activeDrawerIdResolved] ?? activeDrawer?.defaultSize ?? toolsProps.toolsWidth\n : toolsProps.toolsWidth;\n const activeGlobalDrawersSizes: Record = activeGlobalDrawersIds.reduce(\n (acc, currentGlobalDrawerId) => {\n const currentGlobalDrawer = runtimeGlobalDrawers.find(drawer => drawer.id === currentGlobalDrawerId);\n return {\n ...acc,\n [currentGlobalDrawerId]:\n drawerSizes[currentGlobalDrawerId] ?? currentGlobalDrawer?.defaultSize ?? MIN_DRAWER_SIZE,\n };\n },\n {}\n );\n const minGlobalDrawersSizes: Record = runtimeGlobalDrawers.reduce((acc, globalDrawer) => {\n return {\n ...acc,\n [globalDrawer.id]: Math.min(globalDrawer.defaultSize ?? MIN_DRAWER_SIZE, MIN_DRAWER_SIZE),\n };\n }, {});\n const minDrawerSize = Math.min(\n toolsProps?.toolsOpen ? toolsProps.toolsWidth : activeDrawer?.defaultSize ?? MIN_DRAWER_SIZE,\n MIN_DRAWER_SIZE\n );\n\n return {\n ariaLabelsWithDrawers: ariaLabels,\n drawers: combinedLocalDrawers || undefined,\n activeDrawer,\n activeDrawerId: activeDrawerIdResolved,\n globalDrawers: runtimeGlobalDrawers,\n activeGlobalDrawers: activeGlobalDrawers,\n activeGlobalDrawersIds,\n activeGlobalDrawersSizes,\n activeDrawerSize,\n minDrawerSize,\n minGlobalDrawersSizes,\n drawerSizes,\n drawersOpenQueue: drawersOpenQueue.current,\n onActiveDrawerChange,\n onActiveDrawerResize,\n onActiveGlobalDrawersChange,\n };\n}\n", "// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React, { useContext, useEffect, useRef } from 'react';\n\nimport { fireNonCancelableEvent, NonCancelableEventHandler } from '../../internal/events';\nimport {\n DrawerConfig as RuntimeDrawerConfig,\n DrawerStateChangeParams,\n} from '../../internal/plugins/controllers/drawers';\nimport { sortByPriority } from '../../internal/plugins/helpers/utils';\nimport { AppLayoutProps } from '../interfaces';\nimport { ActiveDrawersContext } from '../utils/visibility-context';\n\nimport styles from './styles.css.js';\n\nexport interface RuntimeDrawer extends AppLayoutProps.Drawer {\n onToggle?: NonCancelableEventHandler;\n}\n\nexport interface DrawersLayout {\n global: Array;\n localBefore: Array;\n localAfter: Array;\n}\n\ntype VisibilityCallback = (isVisible: boolean) => void;\n\ninterface RuntimeContentWrapperProps {\n id?: string;\n mountContent: RuntimeDrawerConfig['mountContent'];\n unmountContent: RuntimeDrawerConfig['unmountContent'];\n}\n\nfunction RuntimeDrawerWrapper({ mountContent, unmountContent, id }: RuntimeContentWrapperProps) {\n const ref = useRef(null);\n const visibilityChangeCallback = useRef(null);\n const activeDrawersIds = useContext(ActiveDrawersContext);\n const isVisible = !!id && activeDrawersIds.includes(id);\n\n useEffect(() => {\n const container = ref.current!;\n mountContent(container, {\n onVisibilityChange: cb => {\n visibilityChangeCallback.current = cb;\n },\n });\n return () => {\n unmountContent(container);\n visibilityChangeCallback.current = null;\n };\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, []);\n\n useEffect(() => {\n visibilityChangeCallback.current?.(isVisible);\n }, [isVisible]);\n\n return
;\n}\n\nconst mapRuntimeConfigToDrawer = (\n runtimeConfig: RuntimeDrawerConfig\n): AppLayoutProps.Drawer & {\n orderPriority?: number;\n onToggle?: NonCancelableEventHandler;\n} => {\n const { mountContent, unmountContent, trigger, ...runtimeDrawer } = runtimeConfig;\n\n return {\n ...runtimeDrawer,\n ariaLabels: { drawerName: runtimeDrawer.ariaLabels.content ?? '', ...runtimeDrawer.ariaLabels },\n trigger: trigger\n ? {\n iconSvg: (\n // eslint-disable-next-line react/no-danger\n \n ),\n }\n : undefined,\n content: (\n \n ),\n onResize: event => {\n fireNonCancelableEvent(runtimeDrawer.onResize, { size: event.detail.size, id: runtimeDrawer.id });\n },\n };\n};\n\nexport function convertRuntimeDrawers(\n localDrawers: Array,\n globalDrawers: Array\n): DrawersLayout {\n const converted = localDrawers.map(mapRuntimeConfigToDrawer);\n const sorted = sortByPriority(converted);\n return {\n global: sortByPriority(globalDrawers.map(mapRuntimeConfigToDrawer)),\n localBefore: sorted.filter(item => (item.orderPriority ?? 0) > 0),\n localAfter: sorted.filter(item => (item.orderPriority ?? 0) <= 0),\n };\n}\n", "// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport { createContext } from 'react';\n\nexport const ActiveDrawersContext = createContext>([]);\n", "\n import './styles.scoped.css';\n export default {\n \"runtime-content-wrapper\": \"awsui_runtime-content-wrapper_14m8x_1m9bu_5\"\n};\n ", "// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nexport function splitItems(\n maybeItems: ReadonlyArray | undefined,\n splitIndex: number,\n activeId: string | null\n) {\n const items = maybeItems ?? [];\n const visibleItems = items.slice(0, splitIndex);\n const overflowItems = items.slice(splitIndex);\n\n if (overflowItems.length === 1) {\n return { visibleItems: items, overflowItems: [] };\n }\n\n if (activeId && overflowItems.length > 0 && visibleItems.length > 0) {\n const activeInOverflow = overflowItems.find(item => item.id === activeId);\n if (activeInOverflow) {\n overflowItems.splice(overflowItems.indexOf(activeInOverflow), 1);\n overflowItems.unshift(visibleItems.pop()!);\n visibleItems.push(activeInOverflow);\n }\n }\n return { visibleItems, overflowItems };\n}\n", "// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React from 'react';\n\nimport {\n ButtonDropdownProps,\n InternalButtonDropdownProps,\n InternalItemOrGroup,\n} from '../../button-dropdown/interfaces';\nimport InternalButtonDropdown from '../../button-dropdown/internal';\nimport { CancelableEventHandler } from '../../internal/events';\nimport { AppLayoutProps } from '../interfaces';\n\nimport testutilStyles from '../test-classes/styles.css.js';\n\ntype Drawer = AppLayoutProps.Drawer & { active?: boolean };\n\ninterface OverflowMenuProps {\n items: Array;\n onItemClick: CancelableEventHandler;\n customTriggerBuilder?: InternalButtonDropdownProps['customTriggerBuilder'];\n ariaLabel?: string;\n globalDrawersStartIndex?: number;\n}\n\nconst mapDrawerToItem = (drawer: Drawer) => ({\n id: drawer.id,\n text: drawer.ariaLabels.drawerName,\n iconName: drawer.trigger!.iconName,\n iconSvg: drawer.trigger!.iconSvg,\n badge: drawer.badge,\n itemType: 'checkbox' as ButtonDropdownProps.ItemType,\n checked: drawer.active,\n});\n\nexport default function OverflowMenu({\n items: drawers,\n onItemClick,\n customTriggerBuilder,\n ariaLabel,\n globalDrawersStartIndex,\n}: OverflowMenuProps) {\n const itemsFlatList = drawers.map(mapDrawerToItem);\n let items: ReadonlyArray;\n if (globalDrawersStartIndex !== undefined && globalDrawersStartIndex > 0) {\n items = [\n { items: itemsFlatList.slice(0, globalDrawersStartIndex) },\n { items: itemsFlatList.slice(globalDrawersStartIndex) },\n ];\n } else {\n items = itemsFlatList;\n }\n\n return (\n \n );\n}\n", "// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React, { useEffect, useImperativeHandle, useRef } from 'react';\nimport clsx from 'clsx';\n\nimport { warnOnce } from '@cloudscape-design/component-toolkit/internal';\nimport { getAnalyticsMetadataAttribute } from '@cloudscape-design/component-toolkit/internal/analytics-metadata';\n\nimport InternalBox from '../box/internal';\nimport { ButtonProps } from '../button/interfaces';\nimport { InternalButton, InternalButtonProps } from '../button/internal';\nimport { useFunnel } from '../internal/analytics/hooks/use-funnel.js';\nimport { getBaseProps } from '../internal/base-component';\nimport Dropdown from '../internal/components/dropdown';\nimport OptionsList from '../internal/components/options-list';\nimport { useMobile } from '../internal/hooks/use-mobile';\nimport { useUniqueId } from '../internal/hooks/use-unique-id';\nimport { useVisualRefresh } from '../internal/hooks/use-visual-mode/index.js';\nimport { isDevelopment } from '../internal/is-development';\nimport { spinWhenOpen } from '../internal/styles/motion/utils';\nimport { checkSafeUrl } from '../internal/utils/check-safe-url';\nimport { GeneratedAnalyticsMetadataButtonDropdownExpand } from './analytics-metadata/interfaces.js';\nimport { ButtonDropdownProps, InternalButtonDropdownProps } from './interfaces';\nimport ItemsList from './items-list';\nimport { useButtonDropdown } from './utils/use-button-dropdown';\nimport { isLinkItem } from './utils/utils.js';\n\nimport analyticsSelectors from './analytics-metadata/styles.css.js';\nimport styles from './styles.css.js';\n\nconst InternalButtonDropdown = React.forwardRef(\n (\n {\n items,\n variant = 'normal',\n loading = false,\n loadingText,\n disabled = false,\n disabledReason,\n expandableGroups = false,\n children,\n onItemClick,\n onItemFollow,\n customTriggerBuilder,\n expandToViewport,\n ariaLabel,\n title,\n description,\n preferCenter,\n mainAction,\n showMainActionOnly,\n __internalRootRef,\n analyticsMetadataTransformer,\n linkStyle,\n fullWidth,\n ...props\n }: InternalButtonDropdownProps,\n ref: React.Ref\n ) => {\n const isInRestrictedView = useMobile();\n const dropdownId = useUniqueId('dropdown');\n for (const item of items) {\n if (isLinkItem(item)) {\n checkSafeUrl('ButtonDropdown', item.href);\n }\n }\n if (mainAction) {\n checkSafeUrl('ButtonDropdown', mainAction.href);\n }\n\n if (isDevelopment) {\n if (mainAction && variant !== 'primary' && variant !== 'normal') {\n warnOnce('ButtonDropdown', 'Main action is only supported for \"primary\" and \"normal\" component variant.');\n }\n }\n const isMainAction = mainAction && (variant === 'primary' || variant === 'normal');\n const isVisualRefresh = useVisualRefresh();\n\n const {\n isOpen,\n targetItem,\n isHighlighted,\n isKeyboardHighlight,\n isExpanded,\n highlightItem,\n onKeyDown,\n onKeyUp,\n onItemActivate,\n onGroupToggle,\n toggleDropdown,\n closeDropdown,\n setIsUsingMouse,\n } = useButtonDropdown({\n items,\n onItemClick,\n onItemFollow,\n // Scroll is unnecessary when moving focus back to the dropdown trigger.\n onReturnFocus: () => triggerRef.current?.focus({ preventScroll: true }),\n expandToViewport,\n hasExpandableGroups: expandableGroups,\n isInRestrictedView,\n });\n\n const handleMouseEvent = () => {\n setIsUsingMouse(true);\n };\n\n const baseProps = getBaseProps(props);\n\n const mainActionRef = useRef(null);\n const triggerRef = useRef(null);\n\n useImperativeHandle(\n ref,\n () => ({\n focus(...args) {\n (isMainAction ? mainActionRef : triggerRef).current?.focus(...args);\n },\n focusDropdownTrigger(...args) {\n triggerRef.current?.focus(...args);\n },\n }),\n [mainActionRef, triggerRef, isMainAction]\n );\n\n const clickHandler = () => {\n if (!loading && !disabled) {\n // Prevent moving highlight on mobiles to avoid disabled state reason popup if defined.\n toggleDropdown({ moveHighlightOnOpen: !isInRestrictedView });\n }\n };\n\n const canBeOpened = !loading && !disabled;\n\n const canBeFullWidth = !!fullWidth && (variant === 'primary' || variant === 'normal');\n\n const triggerVariant = variant === 'navigation' ? undefined : variant === 'inline-icon' ? 'inline-icon' : variant;\n const iconProps: Partial =\n variant === 'icon' || variant === 'inline-icon'\n ? {\n iconName: 'ellipsis',\n }\n : {\n iconName: 'caret-down-filled',\n iconAlign: 'right',\n __iconClass: spinWhenOpen(styles, 'rotate', canBeOpened && isOpen),\n };\n\n const baseTriggerProps: InternalButtonProps = {\n className: clsx(\n styles['trigger-button'],\n styles['test-utils-button-trigger'],\n analyticsSelectors['trigger-label']\n ),\n ...iconProps,\n variant: triggerVariant,\n loading,\n loadingText,\n disabled,\n disabledReason,\n onClick: (event: Event) => {\n event.preventDefault();\n clickHandler();\n },\n ariaLabel,\n ariaExpanded: canBeOpened && isOpen,\n formAction: 'none',\n __nativeAttributes: {\n 'aria-haspopup': true,\n },\n };\n\n const triggerId = useUniqueId('awsui-button-dropdown__trigger');\n\n const triggerHasBadge = () => {\n const flatItems = items.flatMap(item => {\n if ('items' in item) {\n return item.items;\n }\n return item;\n });\n\n return (\n variant === 'icon' &&\n !!flatItems?.find(item => {\n if ('badge' in item) {\n return item.badge;\n }\n })\n );\n };\n\n let trigger: React.ReactNode = null;\n\n const analyticsMetadata: GeneratedAnalyticsMetadataButtonDropdownExpand | Record = disabled\n ? {}\n : {\n action: 'expand',\n detail: {\n expanded: `${!isOpen}`,\n label: `.${analyticsSelectors['trigger-label']}`,\n },\n };\n\n if (customTriggerBuilder) {\n trigger = (\n
\n {customTriggerBuilder({\n testUtilsClass: styles['test-utils-button-trigger'],\n ariaExpanded: canBeOpened && isOpen,\n onClick: clickHandler,\n triggerRef,\n ariaLabel,\n disabled,\n disabledReason,\n isOpen,\n })}\n
\n );\n } else if (isMainAction) {\n const { text, iconName, iconAlt, iconSvg, iconUrl, external, externalIconAriaLabel, ...mainActionProps } =\n mainAction;\n const mainActionIconProps = external\n ? ({ iconName: 'external', iconAlign: 'right' } as const)\n : ({ iconName, iconAlt, iconSvg, iconUrl } as const);\n const mainActionAriaLabel = externalIconAriaLabel\n ? `${mainAction.ariaLabel ?? mainAction.text} ${mainAction.externalIconAriaLabel}`\n : mainAction.ariaLabel;\n const hasNoText = !text;\n const mainActionButton = (\n \n {text}\n \n );\n trigger = (\n
\n e.stopPropagation()}\n onKeyUp={e => e.stopPropagation()}\n {...getAnalyticsMetadataAttribute({\n action: 'click',\n detail: {\n label: `.${analyticsSelectors['main-action-label']}`,\n },\n })}\n >\n {mainActionButton}\n
\n {!showMainActionOnly && (\n \n \n {children}\n \n \n )}\n \n );\n } else {\n trigger = (\n
\n \n {children}\n \n
\n );\n }\n\n const hasHeader = title || description;\n const headerId = useUniqueId('awsui-button-dropdown__header');\n\n const shouldLabelWithTrigger = !ariaLabel && !mainAction && variant !== 'icon' && variant !== 'inline-icon';\n\n const { loadingButtonCount } = useFunnel();\n useEffect(() => {\n if (loading) {\n loadingButtonCount.current++;\n return () => {\n // eslint-disable-next-line react-hooks/exhaustive-deps\n loadingButtonCount.current--;\n };\n }\n }, [loading, loadingButtonCount]);\n\n return (\n \n toggleDropdown()}\n trigger={trigger}\n dropdownId={dropdownId}\n >\n {hasHeader && (\n
\n {title && (\n
\n \n {title}\n \n
\n )}\n {description && (\n \n {description}\n \n )}\n
\n )}\n \n \n \n \n \n );\n }\n);\n\nexport default InternalButtonDropdown;\n", "// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport clsx from 'clsx';\n\nexport const spinWhenOpen = (styles: Record, className: string, open: boolean) =>\n clsx(styles[className], open && styles[`${className}-open`]);\n", "// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React from 'react';\n\nimport { useMobile } from '../internal/hooks/use-mobile';\nimport CategoryElement from './category-elements/category-element';\nimport ExpandableCategoryElement from './category-elements/expandable-category-element';\nimport MobileExpandableCategoryElement from './category-elements/mobile-expandable-category-element';\nimport { ItemListProps } from './interfaces';\nimport ItemElement from './item-element';\nimport { isItemGroup } from './utils/utils';\n\nexport default function ItemsList({\n items,\n onItemActivate,\n onGroupToggle,\n targetItem,\n isHighlighted,\n isKeyboardHighlight,\n isExpanded,\n lastInDropdown,\n highlightItem,\n categoryDisabled = false,\n hasExpandableGroups = false,\n hasCategoryHeader = false,\n expandToViewport = false,\n variant = 'normal',\n analyticsMetadataTransformer,\n position,\n linkStyle,\n}: ItemListProps) {\n const isMobile = useMobile();\n\n const elements = items.map((item, index) => {\n if (!isItemGroup(item)) {\n const showDivider = (index === items.length - 1 && !lastInDropdown) || isItemGroup(items[index + 1]);\n\n return (\n \n );\n }\n if (hasExpandableGroups) {\n return item.text ? (\n isMobile ? (\n \n ) : (\n \n )\n ) : null;\n }\n return (\n \n );\n });\n\n return <>{elements};\n}\n", "// 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 { CategoryProps } from '../interfaces';\nimport ItemsList from '../items-list';\n\nimport styles from './styles.css.js';\n\nconst CategoryElement = ({\n item,\n onItemActivate,\n onGroupToggle,\n targetItem,\n isHighlighted,\n isKeyboardHighlight,\n isExpanded,\n lastInDropdown,\n highlightItem,\n disabled,\n variant,\n position,\n}: CategoryProps) => {\n // Hide the category title element from screen readers because it will be\n // provided as an ARIA label.\n return (\n \n {item.text && (\n

\n {item.text}\n

\n )}\n
    \n {item.items && (\n \n )}\n
\n \n );\n};\n\nexport default CategoryElement;\n", "\n import './styles.scoped.css';\n export default {\n \"header\": \"awsui_header_16mm3_1azb2_145\",\n \"disabled\": \"awsui_disabled_16mm3_1azb2_160\",\n \"expandable-header\": \"awsui_expandable-header_16mm3_1azb2_164\",\n \"rolled-down\": \"awsui_rolled-down_16mm3_1azb2_175\",\n \"highlighted\": \"awsui_highlighted_16mm3_1azb2_178\",\n \"is-focused\": \"awsui_is-focused_16mm3_1azb2_196\",\n \"category\": \"awsui_category_16mm3_1azb2_201\",\n \"expandable\": \"awsui_expandable_16mm3_1azb2_164\",\n \"variant-navigation\": \"awsui_variant-navigation_16mm3_1azb2_216\",\n \"expand-icon\": \"awsui_expand-icon_16mm3_1azb2_223\",\n \"expand-icon-up\": \"awsui_expand-icon-up_16mm3_1azb2_240\",\n \"expand-icon-right\": \"awsui_expand-icon-right_16mm3_1azb2_243\",\n \"items-list-container\": \"awsui_items-list-container_16mm3_1azb2_251\",\n \"in-dropdown\": \"awsui_in-dropdown_16mm3_1azb2_260\"\n};\n ", "// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React, { useEffect, useRef } from 'react';\nimport clsx from 'clsx';\n\nimport { getAnalyticsMetadataAttribute } from '@cloudscape-design/component-toolkit/internal/analytics-metadata';\n\nimport InternalIcon from '../../icon/internal';\nimport Dropdown from '../../internal/components/dropdown';\nimport useHiddenDescription from '../../internal/hooks/use-hidden-description';\nimport { GeneratedAnalyticsMetadataButtonDropdownExpand } from '../analytics-metadata/interfaces.js';\nimport { CategoryProps } from '../interfaces';\nimport ItemsList from '../items-list';\nimport Tooltip from '../tooltip.js';\nimport { getMenuItemProps } from '../utils/menu-item';\n\nimport styles from './styles.css.js';\n\nconst ExpandableCategoryElement = ({\n item,\n onItemActivate,\n onGroupToggle,\n targetItem,\n isHighlighted,\n isKeyboardHighlight,\n isExpanded,\n lastInDropdown,\n highlightItem,\n disabled,\n expandToViewport,\n variant,\n position,\n}: CategoryProps) => {\n const highlighted = isHighlighted(item);\n const expanded = isExpanded(item);\n const isKeyboardHighlighted = isKeyboardHighlight(item);\n const triggerRef = React.useRef(null);\n const ref = useRef(null);\n\n useEffect(() => {\n if (triggerRef.current && highlighted && !expanded) {\n triggerRef.current.focus();\n }\n }, [expanded, highlighted]);\n\n const onClick: React.MouseEventHandler = event => {\n if (!disabled) {\n event.preventDefault();\n onGroupToggle(item, event);\n triggerRef.current?.focus();\n }\n };\n\n const onHover = () => {\n highlightItem(item);\n };\n\n const isDisabledWithReason = !!item.disabledReason && item.disabled;\n const { targetProps, descriptionEl } = useHiddenDescription(item.disabledReason);\n const trigger = item.text && (\n \n {item.text}\n \n \n \n \n );\n\n let content: React.ReactNode;\n // If the category element is disabled, we do not render a dropdown.\n // Screenreaders are confused by additional sections\n if (isDisabledWithReason) {\n content = (\n \n {trigger}\n {descriptionEl}\n \n );\n } else if (disabled) {\n content = trigger;\n } else {\n content = (\n \n {item.items && expanded && (\n \n \n \n )}\n \n );\n }\n\n return (\n \n {content}\n \n );\n};\n\nexport default ExpandableCategoryElement;\n", "// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React, { KeyboardEventHandler, useRef, useState } from 'react';\n\nimport { useReducedMotion } from '@cloudscape-design/component-toolkit/internal';\n\nimport Portal from '../internal/components/portal';\nimport { usePortalModeClasses } from '../internal/hooks/use-portal-mode-classes';\nimport Arrow from '../popover/arrow';\nimport PopoverBody from '../popover/body';\nimport PopoverContainer from '../popover/container';\n\ninterface TooltipProps {\n children?: React.ReactNode;\n content?: React.ReactNode;\n position?: 'top' | 'right' | 'bottom' | 'left';\n className?: string;\n}\n\nconst DEFAULT_OPEN_TIMEOUT_IN_MS = 120;\n\nexport default function Tooltip({ children, content, position = 'right', className }: TooltipProps) {\n const ref = useRef(null);\n const isReducedMotion = useReducedMotion(ref);\n const { open, triggerProps } = useTooltipOpen(isReducedMotion ? 0 : DEFAULT_OPEN_TIMEOUT_IN_MS);\n const portalClasses = usePortalModeClasses(ref);\n\n return (\n \n {children}\n {open && (\n \n \n }\n renderWithPortal={true}\n zIndex={7000}\n >\n {}}\n overflowVisible=\"both\"\n >\n \n {content}\n \n \n \n \n \n )}\n \n );\n}\n\nfunction useTooltipOpen(timeout: number) {\n const handle = useRef();\n const [isOpen, setIsOpen] = useState(false);\n\n const close = () => {\n clearTimeout(handle.current);\n setIsOpen(false);\n };\n const open = () => setIsOpen(true);\n const openDelayed = () => {\n handle.current = setTimeout(open, timeout);\n };\n const onKeyDown: KeyboardEventHandler = e => {\n if (isOpen && isEscape(e.key)) {\n e.preventDefault();\n e.stopPropagation();\n close();\n }\n };\n\n const onFocus = openDelayed;\n const onBlur = close;\n\n return {\n open: isOpen,\n triggerProps: {\n onBlur,\n onFocus,\n onKeyDown,\n },\n };\n}\n\nconst isEscape = (key: string) => key === 'Escape' || key === 'Esc';\n", "// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React from 'react';\n\ninterface GetMenuItemPropsParams {\n disabled: boolean;\n parent?: boolean;\n expanded?: boolean;\n}\n/**\n * @returns attributes for a menuitem widget given parameters\n */\nexport const getMenuItemProps: (params: GetMenuItemPropsParams) => React.HTMLProps = ({\n disabled,\n parent,\n expanded,\n}: GetMenuItemPropsParams) => ({\n role: 'menuitem',\n 'aria-disabled': disabled ? 'true' : undefined,\n 'aria-haspopup': parent ? 'true' : undefined,\n 'aria-expanded': expanded ? 'true' : parent ? 'false' : undefined,\n});\n\ninterface GetMenuItemCheckboxPropsParams extends GetMenuItemPropsParams {\n checked: boolean;\n}\n\nexport const getMenuItemCheckboxProps: (params: GetMenuItemCheckboxPropsParams) => React.HTMLProps = ({\n disabled,\n checked,\n}: GetMenuItemCheckboxPropsParams) => ({\n role: 'menuitemcheckbox',\n 'aria-disabled': disabled ? 'true' : undefined,\n 'aria-checked': checked ? 'true' : 'false',\n});\n", "// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React, { useEffect } from 'react';\nimport clsx from 'clsx';\n\nimport { getAnalyticsMetadataAttribute } from '@cloudscape-design/component-toolkit/internal/analytics-metadata';\n\nimport InternalIcon from '../../icon/internal';\nimport useHiddenDescription from '../../internal/hooks/use-hidden-description';\nimport { GeneratedAnalyticsMetadataButtonDropdownExpand } from '../analytics-metadata/interfaces.js';\nimport { CategoryProps } from '../interfaces';\nimport ItemsList from '../items-list';\nimport MobileExpandableGroup from '../mobile-expandable-group/mobile-expandable-group';\nimport Tooltip from '../tooltip.js';\nimport { getMenuItemProps } from '../utils/menu-item.js';\n\nimport styles from './styles.css.js';\n\nconst MobileExpandableCategoryElement = ({\n item,\n onItemActivate,\n onGroupToggle,\n targetItem,\n isHighlighted,\n isKeyboardHighlight,\n isExpanded,\n lastInDropdown,\n highlightItem,\n disabled,\n variant,\n position,\n}: CategoryProps) => {\n const highlighted = isHighlighted(item);\n const expanded = isExpanded(item);\n const isKeyboardHighlighted = isKeyboardHighlight(item);\n const triggerRef = React.useRef(null);\n\n useEffect(() => {\n if (triggerRef.current && highlighted && !expanded) {\n triggerRef.current.focus();\n }\n }, [expanded, highlighted]);\n\n const onClick = (e: React.MouseEvent) => {\n if (!disabled) {\n e.preventDefault();\n onGroupToggle(item, e);\n }\n };\n\n const onHover = () => {\n highlightItem(item);\n };\n\n const isDisabledWithReason = !!item.disabledReason && item.disabled;\n const { targetProps, descriptionEl } = useHiddenDescription(item.disabledReason);\n const trigger = item.text && (\n \n {item.text}\n \n \n \n \n );\n\n let content: React.ReactNode;\n\n if (isDisabledWithReason) {\n content = (\n <>\n {descriptionEl}\n {trigger}\n \n );\n } else if (disabled) {\n content = trigger;\n } else {\n content = (\n \n {item.items && expanded && (\n
    \n \n
\n )}\n \n );\n }\n\n return (\n \n {content}\n \n );\n};\n\nexport default MobileExpandableCategoryElement;\n", "// 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 styles from './styles.css.js';\n\ninterface MobileExpandableGroupProps {\n /**\n * Trigger element.\n */\n trigger: React.ReactNode;\n /**\n * mobile expandable groups content elements.\n */\n children?: React.ReactNode;\n /**\n * Open state of the mobile expandable groups.\n */\n open?: boolean;\n}\n\nconst MobileExpandableGroup = ({ children, trigger, open }: MobileExpandableGroupProps) => {\n return (\n
\n
{trigger}
\n
\n {children}\n
\n
\n );\n};\n\nexport default MobileExpandableGroup;\n", "\n import './styles.scoped.css';\n export default {\n \"root\": \"awsui_root_14cnr_13zum_145\",\n \"trigger\": \"awsui_trigger_14cnr_13zum_179\",\n \"dropdown\": \"awsui_dropdown_14cnr_13zum_182\",\n \"nowrap\": \"awsui_nowrap_14cnr_13zum_193\",\n \"open\": \"awsui_open_14cnr_13zum_196\"\n};\n ", "// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React, { useEffect, useRef } from 'react';\nimport clsx from 'clsx';\n\nimport {\n GeneratedAnalyticsMetadataFragment,\n getAnalyticsMetadataAttribute,\n} from '@cloudscape-design/component-toolkit/internal/analytics-metadata';\n\nimport InternalIcon, { InternalIconProps } from '../../icon/internal';\nimport { useDropdownContext } from '../../internal/components/dropdown/context';\nimport useHiddenDescription from '../../internal/hooks/use-hidden-description';\nimport { GeneratedAnalyticsMetadataButtonDropdownClick } from '../analytics-metadata/interfaces';\nimport { InternalCheckboxItem, InternalItem, ItemProps, LinkItem } from '../interfaces';\nimport Tooltip from '../tooltip';\nimport { getMenuItemCheckboxProps, getMenuItemProps } from '../utils/menu-item';\nimport { isCheckboxItem, isLinkItem } from '../utils/utils';\nimport { getItemTarget } from '../utils/utils';\n\nimport analyticsLabels from '../analytics-metadata/styles.css.js';\nimport styles from './styles.css.js';\n\nconst ItemElement = ({\n position = '1',\n item,\n disabled,\n onItemActivate,\n highlighted,\n highlightItem,\n showDivider,\n hasCategoryHeader,\n isKeyboardHighlighted = false,\n analyticsMetadataTransformer = (metadata: GeneratedAnalyticsMetadataFragment) => metadata,\n variant = 'normal',\n linkStyle,\n}: ItemProps) => {\n const isLink = isLinkItem(item);\n const isCheckbox = isCheckboxItem(item);\n const onClick = (event: React.MouseEvent) => {\n // Stop propagation to parent node and handle event exclusively in here. This ensures\n // that no group will interfere with the default behavior of links\n event.stopPropagation();\n if (!isLink) {\n event.preventDefault();\n }\n if (!disabled) {\n onItemActivate(item, event);\n }\n };\n\n const onHover = () => {\n highlightItem(item);\n };\n\n return (\n \n \n \n );\n};\n\ninterface MenuItemProps {\n item: InternalItem | InternalCheckboxItem;\n disabled: boolean;\n highlighted: boolean;\n linkStyle?: boolean;\n}\n\nfunction MenuItem({ item, disabled, highlighted, linkStyle }: MenuItemProps) {\n const menuItemRef = useRef<(HTMLSpanElement & HTMLAnchorElement) | null>(null);\n const isCheckbox = isCheckboxItem(item);\n const isCurrentBreadcrumb = !isCheckbox && item.isCurrentBreadcrumb;\n\n useEffect(() => {\n if (highlighted && menuItemRef.current) {\n menuItemRef.current.focus();\n }\n }, [highlighted]);\n\n const isDisabledWithReason = disabled && item.disabledReason;\n const { targetProps, descriptionEl } = useHiddenDescription(item.disabledReason);\n const menuItemProps: React.HTMLAttributes = {\n 'aria-label': item.ariaLabel,\n className: clsx(\n styles['menu-item'],\n analyticsLabels['menu-item'],\n linkStyle && styles['link-style'],\n isCurrentBreadcrumb && styles['current-breadcrumb']\n ),\n 'aria-current': isCurrentBreadcrumb,\n lang: item.lang,\n ref: menuItemRef,\n // We are using the roving tabindex technique to manage the focus state of the dropdown.\n // The current element will always have tabindex=0 which means that it can be tabbed to,\n // while all other items have tabindex=-1 so we can focus them when necessary.\n tabIndex: highlighted ? 0 : -1,\n ...(isCheckbox ? getMenuItemCheckboxProps({ disabled, checked: item.checked }) : getMenuItemProps({ disabled })),\n ...(isDisabledWithReason ? targetProps : {}),\n };\n\n const menuItem = isLinkItem(item) ? (\n \n \n \n ) : (\n \n \n \n );\n\n const { position } = useDropdownContext();\n const tooltipPosition = position === 'bottom-left' || position === 'top-left' ? 'left' : 'right';\n return isDisabledWithReason ? (\n \n {menuItem}\n {descriptionEl}\n \n ) : (\n menuItem\n );\n}\n\nconst MenuItemContent = ({ item, disabled }: { item: InternalItem | InternalCheckboxItem; disabled: boolean }) => {\n const hasIcon = !!(item.iconName || item.iconUrl || item.iconSvg);\n const hasExternal = isLinkItem(item) && item.external;\n const isCheckbox = isCheckboxItem(item);\n return (\n <>\n {isCheckbox && }\n {hasIcon && (\n \n )}\n {item.text}\n {hasExternal && }\n \n );\n};\n\nconst MenuItemIcon = (props: InternalIconProps) => (\n \n \n \n);\n\n// Toggle has aria-hidden set because it's just used as a graphical element,\n// a11y attributes for the checkmark are communicated through the role and aria-checked state\n// of the menu element item.\nconst MenuItemCheckmark = ({ disabled, checked }: { disabled: boolean; checked: boolean }) => {\n const checkmark = ;\n return (\n \n {checkmark}\n \n );\n};\n\nconst ExternalIcon = ({ disabled, ariaLabel }: { disabled: boolean; ariaLabel?: string }) => {\n const icon = ;\n return (\n \n {icon}\n \n );\n};\n\nexport default ItemElement;\n", "// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport { ButtonDropdownProps } from '../interfaces';\nimport { isItemGroup } from './utils';\n\n// The function turns a tree of items into a structure optimized for lookup of\n// items and corresponding indices as well as iteration on indices in the given order.\n\n// As trees are multidimensional, the index is represented as an array\nexport type TreeIndex = number[];\n\ninterface ItemsTreeApi {\n // Returns an item for the given tree index or null if not found\n getItem: (index: TreeIndex) => ButtonDropdownProps.ItemOrGroup | null;\n // Returns the tree index of the given item. The item must be present\n // in the tree (referential comparison), or an error will be thrown\n getItemIndex: (item: ButtonDropdownProps.ItemOrGroup) => TreeIndex;\n // Returns the index of next or previous sequential node or null if out of bounds\n getSequentialIndex: (index: TreeIndex, direction: -1 | 1) => TreeIndex | null;\n // Returns parent tree index of a given item or null if no parent is present\n getParentIndex: (item: ButtonDropdownProps.ItemOrGroup) => TreeIndex | null;\n}\n\nexport default function createItemsTree(items: ButtonDropdownProps.Items): ItemsTreeApi {\n const itemToIndex = new Map();\n const indexToItem = new Map();\n const flatIndices: string[] = [];\n\n traverseItems(items, (item, index) => {\n const indexKey = stringifyIndex(index);\n itemToIndex.set(item, indexKey);\n indexToItem.set(indexKey, item);\n flatIndices.push(indexKey);\n });\n\n return {\n getItem: (index: TreeIndex): ButtonDropdownProps.ItemOrGroup | null => {\n const indexKey = stringifyIndex(index);\n\n return indexToItem.get(indexKey) || null;\n },\n getItemIndex: (item: ButtonDropdownProps.ItemOrGroup): TreeIndex => {\n const indexKey = itemToIndex.get(item);\n\n if (!indexKey) {\n throw new Error('Invariant violation: item is not found.');\n }\n\n return parseIndex(indexKey);\n },\n getSequentialIndex: (index: TreeIndex, direction: -1 | 1): TreeIndex | null => {\n const indexKey = stringifyIndex(index);\n const position = flatIndices.indexOf(indexKey);\n\n const nextIndexKey = flatIndices[position + direction];\n\n if (!nextIndexKey) {\n return null;\n }\n\n return parseIndex(nextIndexKey);\n },\n getParentIndex: (item: ButtonDropdownProps.ItemOrGroup): TreeIndex | null => {\n const indexKey = itemToIndex.get(item);\n\n if (!indexKey) {\n throw new Error('Invariant violation: item is not found.');\n }\n\n const index = parseIndex(indexKey);\n\n // No parent\n if (index.length === 1) {\n return null;\n }\n\n return index.slice(0, index.length - 1);\n },\n };\n}\n\nexport function traverseItems(\n items: ButtonDropdownProps.Items,\n act: (item: ButtonDropdownProps.ItemOrGroup, index: TreeIndex) => void,\n parentIndex: TreeIndex = []\n) {\n items.forEach((item, index) => {\n const itemIndex = [...parentIndex, index];\n act(item, itemIndex);\n\n if (isItemGroup(item)) {\n traverseItems(item.items, act, itemIndex);\n }\n });\n}\n\nfunction stringifyIndex(index: TreeIndex): string {\n return index.join('-');\n}\n\nfunction parseIndex(index: string): TreeIndex {\n return index.split('-').map(it => parseInt(it));\n}\n", "// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport { ButtonDropdownProps, LinkItem } from '../interfaces';\nimport { traverseItems } from './create-items-tree';\n\nexport const isItemGroup = (item: ButtonDropdownProps.ItemOrGroup): item is ButtonDropdownProps.ItemGroup =>\n item && (item as ButtonDropdownProps.ItemGroup).items !== undefined;\n\nexport const isLinkItem = (item: LinkItem | ButtonDropdownProps.ItemOrGroup): item is LinkItem =>\n item && (item as LinkItem).href !== undefined;\n\nexport const isCheckboxItem = (item: ButtonDropdownProps.ItemOrGroup): item is ButtonDropdownProps.CheckboxItem =>\n item && (item as ButtonDropdownProps.CheckboxItem).itemType === 'checkbox';\n\nexport const getItemTarget = (item: ButtonDropdownProps.Item) => (item.external ? '_blank' : undefined);\n\nexport function indexIncludes(source: number[], target: number[]) {\n for (let index = 0; index < source.length; index++) {\n if (source[index] !== target[index]) {\n return false;\n }\n }\n\n return true;\n}\n\nexport function indexEquals(left: number[], right: number[]) {\n if (left.length !== right.length) {\n return false;\n }\n\n for (let index = 0; index < left.length; index++) {\n if (left[index] !== right[index]) {\n return false;\n }\n }\n\n return true;\n}\n\nexport function hasCheckboxItems(items: ButtonDropdownProps.Items) {\n let hasCheckboxItems = false;\n traverseItems(items, item => {\n if (item.itemType === 'checkbox') {\n hasCheckboxItems = true;\n }\n });\n return hasCheckboxItems;\n}\n\nexport function hasDisabledReasonItems(items: ButtonDropdownProps.Items) {\n let hasDisabledReasons = false;\n traverseItems(items, item => {\n if (item.disabledReason) {\n hasDisabledReasons = true;\n }\n });\n return hasDisabledReasons;\n}\n", "\n import './styles.scoped.css';\n export default {\n \"trigger-label\": \"awsui_trigger-label_q2oen_w271r_5\",\n \"menu-item\": \"awsui_menu-item_q2oen_w271r_6\",\n \"main-action-label\": \"awsui_main-action-label_q2oen_w271r_7\"\n};\n ", "\n import './styles.scoped.css';\n export default {\n \"item-element\": \"awsui_item-element_93a1u_1tevh_145\",\n \"disabled\": \"awsui_disabled_93a1u_1tevh_157\",\n \"show-divider\": \"awsui_show-divider_93a1u_1tevh_164\",\n \"highlighted\": \"awsui_highlighted_93a1u_1tevh_167\",\n \"is-focused\": \"awsui_is-focused_93a1u_1tevh_182\",\n \"menu-item\": \"awsui_menu-item_93a1u_1tevh_187\",\n \"link-style\": \"awsui_link-style_93a1u_1tevh_199\",\n \"current-breadcrumb\": \"awsui_current-breadcrumb_93a1u_1tevh_235\",\n \"has-category-header\": \"awsui_has-category-header_93a1u_1tevh_246\",\n \"item-tooltip-wrapper\": \"awsui_item-tooltip-wrapper_93a1u_1tevh_246\",\n \"has-checkmark\": \"awsui_has-checkmark_93a1u_1tevh_246\",\n \"icon\": \"awsui_icon_93a1u_1tevh_250\",\n \"checkmark\": \"awsui_checkmark_93a1u_1tevh_254\",\n \"external-icon\": \"awsui_external-icon_93a1u_1tevh_261\"\n};\n ", "// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport { useCallback, useMemo, useState } from 'react';\n\nimport { ButtonDropdownProps, HighlightProps } from '../interfaces';\nimport createItemsTree, { TreeIndex } from './create-items-tree';\nimport moveHighlightOneStep from './move-highlight';\nimport { indexEquals, indexIncludes } from './utils';\n\ninterface UseHighlightedMenuOptions {\n items: ButtonDropdownProps.Items;\n hasExpandableGroups: boolean;\n isInRestrictedView?: boolean;\n}\n\ninterface UseHighlightedMenuApi extends HighlightProps {\n moveHighlight: (direction: -1 | 1) => void;\n expandGroup: (group?: ButtonDropdownProps.ItemGroup) => void;\n collapseGroup: () => void;\n reset: () => void;\n setIsUsingMouse: (isUsingMouse: boolean) => void;\n}\n\nexport default function useHighlightedMenu({\n items,\n hasExpandableGroups,\n isInRestrictedView = false,\n}: UseHighlightedMenuOptions): UseHighlightedMenuApi {\n const [targetIndex, setTargetIndex] = useState([]);\n const [expandedIndex, setExpandedIndex] = useState([]);\n const [isUsingMouse, setIsUsingMouse] = useState(true);\n\n const { getItem, getItemIndex, getSequentialIndex, getParentIndex } = useMemo(() => createItemsTree(items), [items]);\n\n const targetItem = useMemo(() => getItem(targetIndex), [targetIndex, getItem]);\n\n const isHighlighted = useCallback(\n (item: ButtonDropdownProps.ItemOrGroup) => {\n const index = getItemIndex(item);\n return indexIncludes(index, targetIndex);\n },\n [targetIndex, getItemIndex]\n );\n\n // check if keyboard focus is on the element\n const isKeyboardHighlight = useCallback(\n (item: ButtonDropdownProps.ItemOrGroup) => {\n const index = getItemIndex(item);\n return !isUsingMouse && indexEquals(index, targetIndex);\n },\n [targetIndex, getItemIndex, isUsingMouse]\n );\n\n const isExpanded = useCallback(\n (group: ButtonDropdownProps.ItemGroup) => {\n const index = getItemIndex(group);\n\n return indexIncludes(index, expandedIndex);\n },\n [expandedIndex, getItemIndex]\n );\n\n const moveHighlight = useCallback(\n (direction: -1 | 1) => {\n const getNext = (index: TreeIndex) => {\n const nextIndex = getSequentialIndex(index, direction);\n const item = getItem(nextIndex || [-1]);\n\n if (!nextIndex || !item) {\n return null;\n }\n\n const parentIndex = getParentIndex(item);\n const parentItem = parentIndex && getItem(parentIndex);\n\n return { index: nextIndex, item, parent: parentItem || undefined };\n };\n\n const nextIndex = moveHighlightOneStep({\n startIndex: targetIndex,\n expandedIndex,\n getNext,\n hasExpandableGroups,\n isInRestrictedView,\n });\n\n if (nextIndex) {\n setTargetIndex(nextIndex);\n }\n },\n [targetIndex, expandedIndex, getItem, getSequentialIndex, getParentIndex, hasExpandableGroups, isInRestrictedView]\n );\n\n const highlightItem = useCallback(\n (item: ButtonDropdownProps.ItemOrGroup) => {\n setTargetIndex(getItemIndex(item));\n },\n [getItemIndex]\n );\n\n const expandGroup = useCallback(\n (group?: ButtonDropdownProps.ItemGroup) => {\n const groupIndex = group ? getItemIndex(group) : targetIndex;\n const firstChildIndex = [...groupIndex, 0];\n\n // move to the first child item unless in restricted mode\n setTargetIndex(isInRestrictedView ? groupIndex : firstChildIndex);\n setExpandedIndex(groupIndex);\n },\n [targetIndex, getItemIndex, isInRestrictedView]\n );\n\n const collapseGroup = useCallback(() => {\n if (expandedIndex.length > 0) {\n setTargetIndex(expandedIndex);\n setExpandedIndex(expandedIndex.slice(0, -1));\n }\n }, [expandedIndex]);\n\n const reset = useCallback(() => {\n setTargetIndex([]);\n setExpandedIndex([]);\n }, []);\n\n return {\n targetItem,\n isHighlighted,\n isKeyboardHighlight,\n isExpanded,\n moveHighlight,\n highlightItem,\n expandGroup,\n collapseGroup,\n reset,\n setIsUsingMouse,\n };\n}\n", "// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport { ButtonDropdownProps } from '../interfaces';\nimport { TreeIndex } from './create-items-tree';\nimport { indexEquals, isItemGroup } from './utils';\n\n// While every menu item except the edge ones have successors and predecessors,\n// there are rules determining what items are eligible for highlighting for the\n// given set of conditions. The function implements all these rules.\n\ninterface MoveHighlightProps {\n startIndex: TreeIndex;\n expandedIndex: TreeIndex;\n getNext: (index: TreeIndex) => {\n index: TreeIndex;\n item: ButtonDropdownProps.ItemOrGroup;\n parent?: ButtonDropdownProps.ItemOrGroup;\n } | null;\n hasExpandableGroups: boolean;\n isInRestrictedView: boolean;\n}\n\nexport default function moveHighlight({\n startIndex,\n expandedIndex,\n getNext,\n hasExpandableGroups,\n isInRestrictedView,\n}: MoveHighlightProps): TreeIndex | null {\n const tryMove = (currentIndex: TreeIndex): TreeIndex | null => {\n const next = getNext(currentIndex);\n\n if (!next) {\n return null;\n }\n\n // Prevents stepping into disabled expandable groups. However,\n // it's possible to navigate nested groups.\n if (next.parent?.disabled && hasExpandableGroups) {\n return tryMove(next.index);\n }\n\n // it is not allowed to highlight groups when non-expandable\n if (isItemGroup(next.item) && !hasExpandableGroups) {\n return tryMove(next.index);\n }\n\n // can only move within same parent unless is in restricted view\n if (hasExpandableGroups && !isInRestrictedView && !isSameParent(startIndex, next.index)) {\n return tryMove(next.index);\n }\n\n // in restricted view can only navigate to children if group is expanded\n if (\n hasExpandableGroups &&\n isInRestrictedView &&\n !isSameLevel(next.index, expandedIndex) &&\n !isIncluded(expandedIndex, next.index)\n ) {\n return tryMove(next.index);\n }\n\n return next.index;\n };\n\n return tryMove(startIndex);\n}\n\nfunction isSameParent(left: TreeIndex, right: TreeIndex) {\n return indexEquals(left.slice(0, -1), right.slice(0, -1));\n}\n\nfunction isSameLevel(left: TreeIndex, right: TreeIndex) {\n return left.length === right.length;\n}\n\nfunction isIncluded(parent: TreeIndex, child: TreeIndex) {\n return indexEquals(parent, child.slice(0, -1));\n}\n", "// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React from 'react';\n\nimport { useOpenState } from '../../internal/components/options-list/utils/use-open-state';\nimport { CancelableEventHandler, fireCancelableEvent, isPlainLeftClick } from '../../internal/events';\nimport { KeyCode } from '../../internal/keycode';\nimport { ButtonDropdownProps, ButtonDropdownSettings, GroupToggle, HighlightProps, ItemActivate } from '../interfaces';\nimport useHighlightedMenu from './use-highlighted-menu';\nimport { getItemTarget, isCheckboxItem, isItemGroup, isLinkItem } from './utils';\n\ninterface UseButtonDropdownOptions extends ButtonDropdownSettings {\n items: ButtonDropdownProps.Items;\n onItemClick?: CancelableEventHandler;\n onItemFollow?: CancelableEventHandler;\n onReturnFocus: () => void;\n expandToViewport?: boolean;\n}\n\ninterface UseButtonDropdownApi extends HighlightProps {\n isOpen: boolean;\n onKeyDown: (event: React.KeyboardEvent) => void;\n onKeyUp: (event: React.KeyboardEvent) => void;\n onItemActivate: ItemActivate;\n onGroupToggle: GroupToggle;\n toggleDropdown: (options?: { moveHighlightOnOpen?: boolean }) => void;\n closeDropdown: () => void;\n setIsUsingMouse: (isUsingMouse: boolean) => void;\n}\n\nexport function useButtonDropdown({\n items,\n onItemClick,\n onItemFollow,\n onReturnFocus,\n hasExpandableGroups,\n isInRestrictedView = false,\n expandToViewport = false,\n}: UseButtonDropdownOptions): UseButtonDropdownApi {\n const {\n targetItem,\n isHighlighted,\n isKeyboardHighlight,\n isExpanded,\n highlightItem,\n moveHighlight,\n expandGroup,\n collapseGroup,\n reset,\n setIsUsingMouse,\n } = useHighlightedMenu({\n items,\n hasExpandableGroups,\n isInRestrictedView,\n });\n\n const { isOpen, closeDropdown, ...openStateProps } = useOpenState({ onClose: reset });\n const toggleDropdown = (options: { moveHighlightOnOpen?: boolean } = {}) => {\n const moveHighlightOnOpen = options.moveHighlightOnOpen ?? true;\n if (!isOpen && moveHighlightOnOpen) {\n moveHighlight(1);\n }\n openStateProps.toggleDropdown();\n };\n\n const onGroupToggle: GroupToggle = item => (!isExpanded(item) ? expandGroup(item) : collapseGroup());\n\n const onItemActivate: ItemActivate = (item, event) => {\n const isCheckbox = isCheckboxItem(item);\n const isLink = isLinkItem(item);\n const details = {\n id: item.id || 'undefined',\n href: isLink ? item.href : undefined,\n external: isLink ? item.external : undefined,\n target: isLink ? getItemTarget(item) : undefined,\n checked: isCheckbox ? !item.checked : undefined,\n };\n onReturnFocus();\n if (onItemFollow && isLink && isPlainLeftClick(event)) {\n fireCancelableEvent(onItemFollow, details, event);\n }\n if (onItemClick) {\n fireCancelableEvent(onItemClick, details, event);\n }\n closeDropdown();\n };\n\n const doVerticalNavigation = (direction: -1 | 1) => {\n if (isOpen) {\n moveHighlight(direction);\n }\n };\n\n const openAndSelectFirst = (event: React.KeyboardEvent) => {\n toggleDropdown();\n event.preventDefault();\n };\n\n const actOnParentDropdown = (event: React.KeyboardEvent) => {\n // if there is no highlighted item we act on the trigger by opening or closing dropdown\n if (!targetItem) {\n if (isOpen && !isInRestrictedView) {\n toggleDropdown();\n } else {\n openAndSelectFirst(event);\n }\n } else {\n if (isItemGroup(targetItem)) {\n onGroupToggle(targetItem, event);\n } else {\n onItemActivate(targetItem, event);\n }\n }\n };\n\n const activate = (event: React.KeyboardEvent, isEnter?: boolean) => {\n setIsUsingMouse(false);\n\n // if item is a link we rely on default behavior of an anchor, no need to prevent\n if (targetItem && isLinkItem(targetItem) && isEnter) {\n return;\n }\n\n event.preventDefault();\n actOnParentDropdown(event);\n };\n\n const onKeyDown = (event: React.KeyboardEvent) => {\n setIsUsingMouse(false);\n switch (event.keyCode) {\n case KeyCode.down: {\n doVerticalNavigation(1);\n event.preventDefault();\n break;\n }\n case KeyCode.up: {\n doVerticalNavigation(-1);\n event.preventDefault();\n break;\n }\n case KeyCode.space: {\n // Prevent scrolling the list of items and highlighting the trigger\n event.preventDefault();\n break;\n }\n case KeyCode.enter: {\n if (!targetItem?.disabled) {\n activate(event, true);\n }\n break;\n }\n case KeyCode.left:\n case KeyCode.right: {\n if (targetItem && !targetItem.disabled && isItemGroup(targetItem) && !isExpanded(targetItem)) {\n expandGroup();\n } else if (hasExpandableGroups) {\n collapseGroup();\n }\n\n event.preventDefault();\n break;\n }\n case KeyCode.escape: {\n onReturnFocus();\n closeDropdown();\n event.preventDefault();\n if (isOpen) {\n event.stopPropagation();\n }\n break;\n }\n case KeyCode.tab: {\n // When expanded to viewport the focus can't move naturally to the next element.\n // Returning the focus to the trigger instead.\n if (expandToViewport) {\n onReturnFocus();\n }\n closeDropdown();\n break;\n }\n }\n };\n const onKeyUp = (event: React.KeyboardEvent) => {\n // We need to handle activating items with Space separately because there is a bug\n // in Firefox where changing the focus during a Space keydown event it will trigger\n // unexpected click events on the new element: https://bugzilla.mozilla.org/show_bug.cgi?id=1220143\n if (event.keyCode === KeyCode.space && !targetItem?.disabled) {\n activate(event);\n }\n };\n\n return {\n isOpen,\n targetItem,\n isHighlighted,\n isKeyboardHighlight,\n isExpanded,\n highlightItem,\n onKeyDown,\n onKeyUp,\n onItemActivate,\n onGroupToggle,\n toggleDropdown,\n closeDropdown,\n setIsUsingMouse,\n };\n}\n", "\n import './styles.scoped.css';\n export default {\n \"button-dropdown\": \"awsui_button-dropdown_sne0l_ulg38_145\",\n \"full-width\": \"awsui_full-width_sne0l_ulg38_148\",\n \"items-list-container\": \"awsui_items-list-container_sne0l_ulg38_153\",\n \"awsui-motion-fade-in-0\": \"awsui_awsui-motion-fade-in-0_sne0l_ulg38_1\",\n \"rotate\": \"awsui_rotate_sne0l_ulg38_172\",\n \"rotate-open\": \"awsui_rotate-open_sne0l_ulg38_186\",\n \"header\": \"awsui_header_sne0l_ulg38_190\",\n \"title\": \"awsui_title_sne0l_ulg38_201\",\n \"description\": \"awsui_description_sne0l_ulg38_202\",\n \"trigger-button\": \"awsui_trigger-button_sne0l_ulg38_206\",\n \"loading\": \"awsui_loading_sne0l_ulg38_210\",\n \"split-trigger-wrapper\": \"awsui_split-trigger-wrapper_sne0l_ulg38_214\",\n \"trigger-item\": \"awsui_trigger-item_sne0l_ulg38_217\",\n \"has-no-text\": \"awsui_has-no-text_sne0l_ulg38_226\",\n \"visual-refresh\": \"awsui_visual-refresh_sne0l_ulg38_229\",\n \"variant-normal\": \"awsui_variant-normal_sne0l_ulg38_240\",\n \"split-trigger\": \"awsui_split-trigger_sne0l_ulg38_214\",\n \"dropdown-trigger\": \"awsui_dropdown-trigger_sne0l_ulg38_251\",\n \"main-action-full-width\": \"awsui_main-action-full-width_sne0l_ulg38_255\",\n \"main-action-trigger-full-width\": \"awsui_main-action-trigger-full-width_sne0l_ulg38_259\",\n \"test-utils-button-trigger\": \"awsui_test-utils-button-trigger_sne0l_ulg38_263\"\n};\n ", "\n import './styles.scoped.css';\n export default {\n \"toggle\": \"awsui_toggle_1uo6m_1un92_193\",\n \"drawer-triggers\": \"awsui_drawer-triggers_1uo6m_1un92_199\",\n \"drawer\": \"awsui_drawer_1uo6m_1un92_199\",\n \"drawer-mobile\": \"awsui_drawer-mobile_1uo6m_1un92_209\",\n \"drawer-closed\": \"awsui_drawer-closed_1uo6m_1un92_212\",\n \"drawer-content\": \"awsui_drawer-content_1uo6m_1un92_219\",\n \"drawer-content-clickable\": \"awsui_drawer-content-clickable_1uo6m_1un92_233\",\n \"drawer-resize-content\": \"awsui_drawer-resize-content_1uo6m_1un92_243\",\n \"drawer-content-wrapper\": \"awsui_drawer-content-wrapper_1uo6m_1un92_248\",\n \"drawer-triggers-wrapper\": \"awsui_drawer-triggers-wrapper_1uo6m_1un92_252\",\n \"drawer-trigger\": \"awsui_drawer-trigger_1uo6m_1un92_199\",\n \"drawer-trigger-active\": \"awsui_drawer-trigger-active_1uo6m_1un92_271\",\n \"resize-handle-wrapper\": \"awsui_resize-handle-wrapper_1uo6m_1un92_279\",\n \"hide\": \"awsui_hide_1uo6m_1un92_289\"\n};\n ", "// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React, { useRef } from 'react';\nimport clsx from 'clsx';\n\nimport PanelResizeHandle from '../../internal/components/panel-resize-handle';\nimport { getLimitedValue } from '../../split-panel/utils/size-utils';\nimport { SizeControlProps } from '../utils/interfaces';\nimport { TOOLS_DRAWER_ID } from '../utils/use-drawers';\nimport { useKeyboardEvents } from '../utils/use-keyboard-events';\nimport { usePointerEvents } from '../utils/use-pointer-events';\nimport { Drawer } from './index';\nimport { ResizableDrawerProps } from './interfaces';\n\nimport testutilStyles from '../test-classes/styles.css.js';\nimport styles from './styles.css.js';\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(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 return (\n \n )\n }\n ariaLabels={{\n openLabel: activeDrawer?.ariaLabels?.triggerButton,\n mainLabel: activeDrawer?.ariaLabels?.drawerName,\n closeLabel: activeDrawer?.ariaLabels?.closeButton,\n }}\n >\n {toolsContent &&
{toolsContent}
}\n {activeDrawer?.id !== TOOLS_DRAWER_ID ? children : null}\n \n );\n};\n", "// 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 ResizeHandleIcon from './icon';\n\nimport styles from './styles.css.js';\n\ninterface ResizeHandleProps {\n className?: string;\n ariaLabel: string | undefined;\n position: 'side' | 'bottom';\n ariaValuenow: number;\n onKeyDown: (event: React.KeyboardEvent) => void;\n onPointerDown: (event: React.PointerEvent) => void;\n}\n\nexport default React.forwardRef(function PanelResizeHandle(\n { className, ariaLabel, ariaValuenow, position, onKeyDown, onPointerDown },\n ref\n) {\n return (\n \n \n \n );\n});\n", "// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React from 'react';\n\nexport default function ResizeHandleIcon({ className }: { className?: string }) {\n return (\n \n \n \n \n );\n}\n", "\n import './styles.scoped.css';\n export default {\n \"slider\": \"awsui_slider_cqzlk_1vl2o_145\",\n \"slider-side\": \"awsui_slider-side_cqzlk_1vl2o_180\",\n \"slider-icon\": \"awsui_slider-icon_cqzlk_1vl2o_187\",\n \"slider-icon-bottom\": \"awsui_slider-icon-bottom_cqzlk_1vl2o_193\",\n \"slider-icon-side\": \"awsui_slider-icon-side_cqzlk_1vl2o_197\"\n};\n ", "// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React from 'react';\n\nimport handleKey from '../../internal/utils/handle-key';\nimport { SizeControlProps } from './interfaces';\n\nconst KEYBOARD_SINGLE_STEP_SIZE = 10;\nconst KEYBOARD_MULTIPLE_STEPS_SIZE = 60;\n\nconst getCurrentSize = (panelRef?: React.RefObject) => {\n if (!panelRef || !panelRef.current) {\n return {\n panelHeight: 0,\n panelWidth: 0,\n };\n }\n\n return {\n panelHeight: panelRef.current.clientHeight,\n panelWidth: panelRef.current.clientWidth,\n };\n};\n\nexport const useKeyboardEvents = ({ position, onResize, panelRef }: SizeControlProps) => {\n return (event: React.KeyboardEvent) => {\n let currentSize: number;\n let maxSize: number;\n\n const { panelHeight, panelWidth } = getCurrentSize(panelRef);\n\n if (position === 'side') {\n currentSize = panelWidth;\n // don't need the exact max size as it's constrained in the set size function\n maxSize = window.innerWidth;\n } else {\n currentSize = panelHeight;\n // don't need the exact max size as it's constrained in the set size function\n maxSize = window.innerHeight;\n }\n\n let isEventHandled = true;\n\n const singleStepUp = () => onResize(currentSize + KEYBOARD_SINGLE_STEP_SIZE);\n const singleStepDown = () => onResize(currentSize - KEYBOARD_SINGLE_STEP_SIZE);\n const multipleStepUp = () => onResize(currentSize + KEYBOARD_MULTIPLE_STEPS_SIZE);\n const multipleStepDown = () => onResize(currentSize - KEYBOARD_MULTIPLE_STEPS_SIZE);\n\n handleKey(event, {\n onBlockStart: () => {\n position === 'bottom' ? singleStepUp() : singleStepDown();\n },\n onBlockEnd: () => {\n position === 'bottom' ? singleStepDown() : singleStepUp();\n },\n onInlineEnd: () => {\n position === 'bottom' ? singleStepUp() : singleStepDown();\n },\n onInlineStart: () => {\n position === 'bottom' ? singleStepDown() : singleStepUp();\n },\n onPageDown: () => multipleStepDown(),\n onPageUp: () => multipleStepUp(),\n onHome: () => onResize(maxSize),\n onEnd: () => onResize(0),\n onDefault: () => (isEventHandled = false),\n });\n\n if (isEventHandled) {\n event.preventDefault();\n event.stopPropagation();\n }\n };\n};\n", "// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport { useCallback } from 'react';\n\nimport {\n getIsRtl,\n getLogicalBoundingClientRect,\n getLogicalClientX,\n} from '@cloudscape-design/component-toolkit/internal';\n\nimport { SizeControlProps } from './interfaces';\n\nimport styles from '../resize/styles.css.js';\n\nexport const usePointerEvents = ({ position, panelRef, handleRef, onResize }: SizeControlProps) => {\n const onDocumentPointerMove = useCallback(\n (event: PointerEvent) => {\n if (!panelRef || !panelRef.current || !handleRef || !handleRef.current) {\n return;\n }\n\n if (position === 'side') {\n const mouseClientX = getLogicalClientX(event, getIsRtl(panelRef.current)) || 0;\n\n // The handle offset aligns the cursor with the middle of the resize handle.\n const handleOffset = getLogicalBoundingClientRect(handleRef.current).inlineSize / 2;\n const width = getLogicalBoundingClientRect(panelRef.current).insetInlineEnd - mouseClientX + handleOffset;\n\n onResize(width);\n } else {\n const mouseClientY = event.clientY || 0;\n\n // The handle offset aligns the cursor with the middle of the resize handle.\n const handleOffset = getLogicalBoundingClientRect(handleRef.current).blockSize / 2;\n const height = getLogicalBoundingClientRect(panelRef.current).insetBlockEnd - mouseClientY + handleOffset;\n\n onResize(height);\n }\n },\n [position, panelRef, handleRef, onResize]\n );\n\n const onDocumentPointerUp = useCallback(() => {\n const panelElement = panelRef?.current;\n /* istanbul ignore if */\n if (!panelElement) {\n return;\n }\n const currentDocument = panelElement.ownerDocument;\n\n currentDocument.body.classList.remove(styles['resize-active']);\n currentDocument.body.classList.remove(styles[`resize-${position}`]);\n currentDocument.removeEventListener('pointerup', onDocumentPointerUp);\n currentDocument.removeEventListener('pointermove', onDocumentPointerMove);\n }, [panelRef, onDocumentPointerMove, position]);\n\n const onSliderPointerDown = useCallback(() => {\n const panelElement = panelRef?.current;\n /* istanbul ignore if */\n if (!panelElement) {\n return;\n }\n const currentDocument = panelElement.ownerDocument;\n currentDocument.body.classList.add(styles['resize-active']);\n currentDocument.body.classList.add(styles[`resize-${position}`]);\n currentDocument.addEventListener('pointerup', onDocumentPointerUp);\n currentDocument.addEventListener('pointermove', onDocumentPointerMove);\n }, [panelRef, onDocumentPointerMove, onDocumentPointerUp, position]);\n\n return onSliderPointerDown;\n};\n", "\n import './styles.scoped.css';\n export default {\n \"with-motion-vertical\": \"awsui_with-motion-vertical_b18tp_18zmr_146\",\n \"with-motion-horizontal\": \"awsui_with-motion-horizontal_b18tp_18zmr_165\",\n \"resize-active\": \"awsui_resize-active_b18tp_18zmr_184\",\n \"resize-side\": \"awsui_resize-side_b18tp_18zmr_195\",\n \"resize-bottom\": \"awsui_resize-bottom_b18tp_18zmr_198\"\n};\n ", "// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React, { useEffect } from 'react';\nimport clsx from 'clsx';\n\nimport { ButtonProps } from '../../button/interfaces';\nimport { splitItems } from '../drawer/drawers-helpers';\nimport OverflowMenu from '../drawer/overflow-menu';\nimport { AppLayoutProps } from '../interfaces';\nimport { ToggleButton, togglesConfig } from '../toggles';\nimport { TOOLS_DRAWER_ID } from '../utils/use-drawers';\n\nimport sharedStyles from '../styles.css.js';\nimport testutilStyles from '../test-classes/styles.css.js';\nimport styles from './styles.css.js';\n\ninterface MobileToggleProps {\n className?: string;\n ariaLabels?: AppLayoutProps.Labels;\n type: keyof typeof togglesConfig;\n disabled?: boolean;\n onClick: () => void;\n}\nconst MobileToggle = React.forwardRef(\n ({ className, ariaLabels, type, disabled, onClick }: MobileToggleProps, ref: React.Ref) => {\n const { TagName, iconName, getLabels } = togglesConfig[type];\n const { mainLabel, openLabel } = getLabels(ariaLabels);\n\n return (\n e.target === e.currentTarget && onClick()}\n >\n \n \n );\n }\n);\ninterface MobileToolbarProps {\n anyPanelOpen: boolean;\n unfocusable: boolean | undefined;\n toggleRefs: {\n navigation: React.Ref;\n tools: React.Ref;\n };\n navigationHide: boolean | undefined;\n toolsHide: boolean | undefined;\n topOffset?: number;\n ariaLabels: AppLayoutProps.Labels | undefined;\n mobileBarRef: React.Ref;\n children: React.ReactNode;\n onNavigationOpen: () => void;\n onToolsOpen: () => void;\n drawers: Array | undefined;\n activeDrawerId: string | null;\n onDrawerChange: (newDrawerId: string | null) => void;\n}\n\nexport function MobileToolbar({\n ariaLabels,\n toggleRefs,\n topOffset,\n navigationHide,\n toolsHide,\n anyPanelOpen,\n unfocusable,\n drawers,\n activeDrawerId,\n children,\n onNavigationOpen,\n onToolsOpen,\n onDrawerChange,\n mobileBarRef,\n}: MobileToolbarProps) {\n useEffect(() => {\n if (anyPanelOpen) {\n document.body.classList.add(styles['block-body-scroll']);\n return () => {\n document.body.classList.remove(styles['block-body-scroll']);\n };\n } else {\n document.body.classList.remove(styles['block-body-scroll']);\n }\n }, [anyPanelOpen]);\n\n const { overflowItems, visibleItems } = splitItems(drawers, 2, activeDrawerId);\n const overflowMenuHasBadge = !!overflowItems.find(item => item.badge);\n\n return (\n \n {!navigationHide && (\n \n )}\n
\n {children &&
{children}
}\n
\n {!toolsHide && !drawers && (\n \n )}\n {drawers && (\n \n )}\n \n );\n}\n", "\n import './styles.scoped.css';\n export default {\n \"root\": \"awsui_root_lm6vo_ht58m_153\",\n \"root-no-scroll\": \"awsui_root-no-scroll_lm6vo_ht58m_160\",\n \"layout\": \"awsui_layout_lm6vo_ht58m_165\",\n \"layout-no-scroll\": \"awsui_layout-no-scroll_lm6vo_ht58m_171\",\n \"layout-main\": \"awsui_layout-main_lm6vo_ht58m_175\",\n \"layout-main-scrollable\": \"awsui_layout-main-scrollable_lm6vo_ht58m_181\",\n \"unfocusable\": \"awsui_unfocusable_lm6vo_ht58m_186\",\n \"breadcrumbs-desktop\": \"awsui_breadcrumbs-desktop_lm6vo_ht58m_190\",\n \"content-header-wrapper\": \"awsui_content-header-wrapper_lm6vo_ht58m_195\",\n \"content-wrapper\": \"awsui_content-wrapper_lm6vo_ht58m_199\",\n \"content-overlapped\": \"awsui_content-overlapped_lm6vo_ht58m_203\",\n \"content-extra-top-padding\": \"awsui_content-extra-top-padding_lm6vo_ht58m_207\"\n};\n ", "\n import './styles.scoped.css';\n export default {\n \"block-body-scroll\": \"awsui_block-body-scroll_19d8l_1e6a2_153\",\n \"mobile-bar\": \"awsui_mobile-bar_19d8l_1e6a2_157\",\n \"mobile-bar-breadcrumbs\": \"awsui_mobile-bar-breadcrumbs_19d8l_1e6a2_170\",\n \"mobile-toggle\": \"awsui_mobile-toggle_19d8l_1e6a2_177\",\n \"mobile-toggle-type-navigation\": \"awsui_mobile-toggle-type-navigation_19d8l_1e6a2_186\",\n \"mobile-toggle-type-tools\": \"awsui_mobile-toggle-type-tools_19d8l_1e6a2_189\",\n \"mobile-toggle-type-drawer\": \"awsui_mobile-toggle-type-drawer_19d8l_1e6a2_189\",\n \"drawers-container\": \"awsui_drawers-container_19d8l_1e6a2_196\"\n};\n ", "// 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 { AppLayoutProps } from '../interfaces';\n\nimport styles from './styles.css.js';\n\ninterface NotificationsProps {\n testUtilsClassName: string;\n children?: React.ReactNode;\n labels: AppLayoutProps.Labels | undefined;\n topOffset: number | undefined;\n disableContentPaddings?: boolean;\n}\ninterface NotificationWrapperProps extends NotificationsProps {\n sticky: boolean | undefined;\n}\n\nexport const Notifications = React.forwardRef(\n ({ sticky, disableContentPaddings, ...props }: NotificationWrapperProps, ref: React.Ref) => {\n return sticky ? (\n
\n \n {props.children}\n
\n \n ) : (\n \n {props.children}\n \n );\n }\n);\n", "\n import './styles.scoped.css';\n export default {\n \"notifications\": \"awsui_notifications_1hmm4_ujmgu_9\",\n \"notifications-sticky\": \"awsui_notifications-sticky_1hmm4_ujmgu_10\",\n \"no-content-paddings\": \"awsui_no-content-paddings_1hmm4_ujmgu_25\"\n};\n ", "// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nexport const SPLIT_PANEL_MIN_HEIGHT = 160;\nexport const SPLIT_PANEL_MIN_WIDTH = 280;\n", "// 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 { useSplitPanelContext } from '../../internal/context/split-panel-context';\n\nimport styles from './styles.css.js';\n\ninterface SideSplitPanelDrawer {\n displayed: boolean;\n children: React.ReactNode;\n}\n\nexport function SideSplitPanelDrawer({ displayed, children }: SideSplitPanelDrawer) {\n const { isOpen, size, topOffset, bottomOffset } = useSplitPanelContext();\n const width = isOpen && children ? size : undefined;\n return (\n \n
\n {children}\n
\n \n );\n}\n", "// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React, { createContext, useContext } from 'react';\n\nimport { SplitPanelFocusControlRefs } from '../../app-layout/utils/use-split-panel-focus-control';\n\nexport interface SplitPanelSideToggleProps {\n displayed: boolean;\n ariaLabel: string | undefined;\n}\n\nexport interface SplitPanelContextBaseProps {\n topOffset: number;\n bottomOffset: number;\n leftOffset: number;\n rightOffset: number;\n position: 'side' | 'bottom';\n size: number;\n disableContentPaddings?: boolean;\n contentWidthStyles?: React.CSSProperties;\n contentWrapperPaddings?: {\n closedNav: boolean;\n closedTools: boolean;\n };\n isOpen?: boolean;\n isForcedPosition: boolean;\n onResize: (newSize: number) => void;\n onToggle: () => void;\n onPreferencesChange: (detail: { position: 'side' | 'bottom' }) => void;\n reportHeaderHeight: (pixels: number) => void;\n headerHeight?: number;\n setSplitPanelToggle: (config: SplitPanelSideToggleProps) => void;\n refs: SplitPanelFocusControlRefs;\n}\n\nexport interface SplitPanelContextProps extends SplitPanelContextBaseProps {\n relativeSize: number;\n animationDisabled?: boolean;\n}\n\nconst SplitPanelContext = createContext(null);\n\nexport const SplitPanelContextProvider = SplitPanelContext.Provider;\n\nexport function useSplitPanelContext() {\n const ctx = useContext(SplitPanelContext);\n if (!ctx) {\n throw new Error('Split panel can only be used inside app layout');\n }\n return ctx;\n}\n", "\n import './styles.scoped.css';\n export default {\n \"drawer-displayed\": \"awsui_drawer-displayed_1lh3u_16xqy_149\",\n \"drawer-content\": \"awsui_drawer-content_1lh3u_16xqy_153\"\n};\n ", "// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React, { useEffect, useState } from 'react';\n\nimport { SplitPanelContextBaseProps, SplitPanelContextProvider } from '../../internal/context/split-panel-context';\nimport { getLimitedValue } from '../../split-panel/utils/size-utils';\nimport { SPLIT_PANEL_MIN_HEIGHT, SPLIT_PANEL_MIN_WIDTH } from './constants';\n\nexport interface SplitPanelProviderProps extends SplitPanelContextBaseProps {\n maxWidth: number;\n reportSize: (size: number) => void;\n getMaxHeight: () => number;\n children?: React.ReactNode;\n animationDisabled?: boolean;\n}\n\nexport function SplitPanelProvider({\n children,\n size,\n getMaxHeight,\n maxWidth,\n reportSize,\n onResize,\n ...rest\n}: SplitPanelProviderProps) {\n const { position, isOpen } = rest;\n const [maxHeight, setMaxHeight] = useState(size);\n const minSize = position === 'bottom' ? SPLIT_PANEL_MIN_HEIGHT : SPLIT_PANEL_MIN_WIDTH;\n const maxSize = position === 'bottom' ? maxHeight : maxWidth;\n const cappedSize = getLimitedValue(minSize, size, maxSize);\n const relativeSize = ((size - minSize) / (maxSize - minSize)) * 100;\n\n const onResizeWithValidation = (newSize: number) => {\n const maxSize = position === 'side' ? maxWidth : getMaxHeight();\n const isResizeValid = position === 'side' ? maxSize >= SPLIT_PANEL_MIN_WIDTH : maxSize >= SPLIT_PANEL_MIN_HEIGHT;\n if (isOpen && isResizeValid) {\n onResize(getLimitedValue(minSize, newSize, maxSize));\n }\n };\n\n useEffect(() => {\n if (position !== 'bottom') {\n return;\n }\n // effects are called inside out in the components tree\n // wait one frame to allow app-layout to complete its calculations\n const handle = requestAnimationFrame(() => setMaxHeight(getMaxHeight()));\n return () => cancelAnimationFrame(handle);\n }, [size, minSize, position, getMaxHeight]);\n\n useEffect(() => {\n reportSize(cappedSize);\n }, [reportSize, cappedSize]);\n\n useEffect(() => {\n if (position !== 'bottom') {\n return;\n }\n const handler = () => setMaxHeight(getMaxHeight());\n window.addEventListener('resize', handler);\n return () => window.removeEventListener('resize', handler);\n }, [position, getMaxHeight]);\n\n return (\n \n {children}\n \n );\n}\n", "// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nexport function calculateOnce(callback: () => T) {\n let result: T | undefined = undefined;\n return () => {\n if (result === undefined) {\n result = callback();\n }\n return result;\n };\n}\n", "/*\n * ** Detect scrollbar width (blog post); version N/A -- https://davidwalsh.name/detect-scrollbar-width\n *\n * MIT License\n *\n * Copyright (c) 2007-2021 David Walsh\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy of\n * this software and associated documentation files (the \"Software\"), to deal in\n * the Software without restriction, including without limitation the rights to\n * use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of\n * the Software, and to permit persons to whom the Software is furnished to do so,\n * subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in all\n * copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS\n * FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR\n * COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER\n * IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN\n * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.\n */\n/* eslint-disable header/header */\nimport { calculateOnce } from './calculate-once';\n\nexport const browserScrollbarSize = calculateOnce(() => {\n if (typeof document === 'undefined') {\n return { width: 0, height: 0 };\n }\n const scrollDiv = document.createElement('div');\n scrollDiv.style.overflow = 'scroll';\n scrollDiv.style.height = '100px';\n scrollDiv.style.width = '100px';\n scrollDiv.style.position = 'absolute';\n scrollDiv.style.top = '-9999px';\n scrollDiv.style.left = '-9999px';\n document.body.appendChild(scrollDiv);\n\n const width = scrollDiv.offsetWidth - scrollDiv.clientWidth;\n const height = scrollDiv.offsetHeight - scrollDiv.clientHeight;\n document.body.removeChild(scrollDiv);\n return { width, height };\n});\n", "// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport { browserScrollbarSize } from '../../internal/utils/browser-scrollbar-size';\nimport { SPLIT_PANEL_MIN_WIDTH } from './constants';\n\n/**\n * Even if the Split Panel is set to be displayed on the side, it will be forced to the bottom\n * if the available space is less than 280px.\n *\n * We also have to account for the fact that after the split panel changes its position\n * from bottom to side or vice versa, there is a chance that the content a scrollbar appears or disappears from the page,\n * which changes the available space again. This could potentially lead to an infinite loop.\n * To prevent that, we give the split panel some \"resistance\" to change from bottom to side\n * (but not from side to bottom), requiring in this case some extra space on top of the \"nominal\" 280px.\n */\n\nfunction checkBasedOnPreviousPosition() {\n let isForced = false; // Remember position for the next render\n return (availableWidthForSplitPanel: number) => {\n const minWidth = isForced ? SPLIT_PANEL_MIN_WIDTH + browserScrollbarSize().width : SPLIT_PANEL_MIN_WIDTH;\n isForced = availableWidthForSplitPanel < minWidth;\n return isForced;\n };\n}\n\nconst checkForcedPosition = checkBasedOnPreviousPosition();\n\nexport function shouldSplitPanelBeForcedToBottom({\n isMobile,\n availableWidthForSplitPanel,\n}: {\n isMobile: boolean;\n availableWidthForSplitPanel: number;\n}) {\n if (isMobile) {\n return true;\n }\n\n return checkForcedPosition(availableWidthForSplitPanel);\n}\n", "// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport globalVars from '../../internal/styles/global-vars';\n\nexport function getStickyOffsetVars(\n headerHeight: number,\n footerHeight: number,\n stickyNotificationsHeight: string,\n mobileToolbarHeight: string,\n disableBodyScroll: boolean,\n isMobile: boolean\n) {\n return {\n [globalVars.stickyVerticalTopOffset]: `calc(${!disableBodyScroll ? headerHeight : 0}px + ${\n isMobile ? mobileToolbarHeight : stickyNotificationsHeight\n })`,\n [globalVars.stickyVerticalBottomOffset]: `${!disableBodyScroll ? footerHeight : 0}px`,\n };\n}\n", "// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport { createRef, RefObject, useCallback, useEffect, useRef } from 'react';\n\nexport interface Focusable {\n focus(): void;\n}\n\nexport interface FocusControlRefs {\n toggle: RefObject;\n close: RefObject;\n slider: RefObject;\n}\n\nexport interface FocusControlState {\n refs: FocusControlRefs;\n setFocus: (force?: boolean) => void;\n loseFocus: () => void;\n}\n\nexport interface FocusControlMultipleStates {\n refs: Record;\n setFocus: (params?: { force?: boolean; drawerId?: string; open?: boolean }) => void;\n loseFocus: () => void;\n}\n\nexport function useMultipleFocusControl(\n restoreFocus: boolean,\n activeDrawersIds: Array\n): FocusControlMultipleStates {\n const refs = useRef>({});\n\n activeDrawersIds.forEach(drawerId => {\n if (!refs.current[drawerId]) {\n refs.current[drawerId] = {\n toggle: createRef(),\n close: createRef(),\n slider: createRef(),\n };\n }\n });\n\n const doFocus = useCallback(\n (drawerId: string, open = true) => {\n if (!shouldFocus.current) {\n return;\n }\n const ref = refs.current[drawerId];\n if (open) {\n previousFocusedElement.current =\n document.activeElement !== document.body ? (document.activeElement as HTMLElement) : undefined;\n if (ref?.slider?.current) {\n ref.slider.current?.focus();\n } else {\n ref?.close?.current?.focus();\n }\n } else {\n if (restoreFocus && previousFocusedElement.current && document.contains(previousFocusedElement.current)) {\n previousFocusedElement.current.focus();\n previousFocusedElement.current = undefined;\n } else {\n ref?.toggle?.current?.focus();\n }\n }\n shouldFocus.current = false;\n },\n [refs, restoreFocus]\n );\n\n const setFocus = (params?: { force?: boolean; drawerId?: string; open?: boolean }) => {\n const { force = false, drawerId = null, open = true } = params || {};\n shouldFocus.current = true;\n if (force && (!drawerId || activeDrawersIds.includes(drawerId))) {\n doFocus(drawerId!, open);\n }\n };\n\n const loseFocus = useCallback(() => {\n previousFocusedElement.current = undefined;\n }, []);\n\n const previousFocusedElement = useRef();\n const shouldFocus = useRef(false);\n\n useEffect(() => {\n doFocus(activeDrawersIds[0]);\n }, [activeDrawersIds, doFocus]);\n\n return {\n refs: refs.current,\n setFocus,\n loseFocus,\n };\n}\n\nexport function useFocusControl(\n isOpen: boolean,\n restoreFocus = false,\n activeDrawerId?: string | null\n): FocusControlState {\n const refs = {\n toggle: useRef(null),\n close: useRef(null),\n slider: useRef(null),\n };\n const previousFocusedElement = useRef();\n const shouldFocus = useRef(false);\n\n const doFocus = () => {\n if (!shouldFocus.current) {\n return;\n }\n if (isOpen) {\n previousFocusedElement.current =\n document.activeElement !== document.body ? (document.activeElement as HTMLElement) : undefined;\n if (refs.slider.current) {\n refs.slider.current?.focus();\n } else {\n refs.close.current?.focus();\n }\n } else {\n if (restoreFocus && previousFocusedElement.current && document.contains(previousFocusedElement.current)) {\n previousFocusedElement.current.focus();\n previousFocusedElement.current = undefined;\n } else {\n refs.toggle.current?.focus();\n }\n }\n shouldFocus.current = false;\n };\n\n const setFocus = (force?: boolean) => {\n shouldFocus.current = true;\n if (force && isOpen) {\n doFocus();\n }\n };\n\n // eslint-disable-next-line react-hooks/exhaustive-deps\n useEffect(doFocus, [isOpen, activeDrawerId]);\n\n const loseFocus = useCallback(() => {\n previousFocusedElement.current = undefined;\n }, []);\n\n return {\n refs,\n setFocus,\n loseFocus,\n };\n}\n", "// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport { DependencyList, RefObject, useEffect, useRef } from 'react';\n\nimport { Focusable } from './use-focus-control';\n\ntype SplitPanelLastInteraction = { type: 'open' } | { type: 'close' } | { type: 'position' };\n\nexport interface SplitPanelFocusControlRefs {\n toggle: RefObject;\n slider: RefObject;\n preferences: RefObject;\n}\nexport interface SplitPanelFocusControlState {\n refs: SplitPanelFocusControlRefs;\n setLastInteraction: (interaction: SplitPanelLastInteraction) => void;\n}\n\nexport function useSplitPanelFocusControl(dependencies: DependencyList): SplitPanelFocusControlState {\n const refs = {\n toggle: useRef(null),\n slider: useRef(null),\n preferences: useRef(null),\n };\n const lastInteraction = useRef(null);\n\n useEffect(() => {\n switch (lastInteraction.current?.type) {\n case 'open':\n refs.slider.current?.focus();\n break;\n case 'close':\n refs.toggle.current?.focus();\n break;\n case 'position':\n refs.preferences.current?.focus();\n break;\n }\n lastInteraction.current = null;\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, dependencies);\n\n return {\n refs,\n setLastInteraction: (interaction: SplitPanelLastInteraction) => (lastInteraction.current = interaction),\n };\n}\n", "// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport { getGlobalFlag } from '@cloudscape-design/component-toolkit/internal';\n\nimport { useVisualRefresh } from '../../internal/hooks/use-visual-mode';\n\nexport const useAppLayoutToolbarEnabled = () => {\n const isRefresh = useVisualRefresh();\n return isRefresh && (getGlobalFlag('appLayoutWidget') || getGlobalFlag('appLayoutToolbar'));\n};\n", "// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React from 'react';\n\nimport { AppLayoutProps, AppLayoutPropsWithDefaults } from '../interfaces';\nimport Background from './background';\nimport Breadcrumbs from './breadcrumbs';\nimport { AppLayoutInternalsProvider } from './context';\nimport Drawers from './drawers';\nimport Header from './header';\nimport Layout from './layout';\nimport Main from './main';\nimport MobileToolbar from './mobile-toolbar';\nimport Navigation from './navigation';\nimport Notifications from './notifications';\nimport SplitPanel from './split-panel';\nimport Tools from './tools';\n\nconst AppLayoutWithRef = React.forwardRef(function AppLayout(\n props: AppLayoutPropsWithDefaults,\n ref: React.Ref\n) {\n return (\n \n \n \n \n\n \n\n \n\n \n\n \n\n
\n\n
\n\n \n\n \n \n \n\n \n \n \n \n );\n});\n\nexport default AppLayoutWithRef;\n", "// 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 { highContrastHeaderClassName } from '../../internal/utils/content-header-utils';\nimport { useAppLayoutInternals } from './context';\n\nimport styles from './styles.css.js';\n\nexport default function Background() {\n const { breadcrumbs, hasBackgroundOverlap, hasNotificationsContent, isMobile, headerVariant } =\n useAppLayoutInternals();\n\n if (!hasNotificationsContent && (!breadcrumbs || isMobile) && !hasBackgroundOverlap) {\n return null;\n }\n\n return (\n
\n
\n
\n );\n}\n", "// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nexport const highContrastHeaderClassName = 'awsui-context-content-header';\n", "// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React, {\n createContext,\n useCallback,\n useContext,\n useEffect,\n useImperativeHandle,\n useLayoutEffect,\n useRef,\n useState,\n} from 'react';\n\nimport { useStableCallback } from '@cloudscape-design/component-toolkit/internal';\nimport { getOffsetInlineStart } from '@cloudscape-design/component-toolkit/internal';\n\nimport { DynamicOverlapContext } from '../../internal/context/dynamic-overlap-context';\nimport { SplitPanelSideToggleProps } from '../../internal/context/split-panel-context';\nimport { fireNonCancelableEvent } from '../../internal/events';\nimport { useControllable } from '../../internal/hooks/use-controllable';\nimport { useMobile } from '../../internal/hooks/use-mobile';\nimport { useUniqueId } from '../../internal/hooks/use-unique-id';\nimport { getSplitPanelDefaultSize } from '../../split-panel/utils/size-utils';\nimport { AppLayoutProps, AppLayoutPropsWithDefaults } from '../interfaces';\nimport { SPLIT_PANEL_MIN_WIDTH } from '../split-panel';\nimport { shouldSplitPanelBeForcedToBottom } from '../split-panel/split-panel-forced-position';\nimport { useDrawers } from '../utils/use-drawers';\nimport { FocusControlRefs, useFocusControl } from '../utils/use-focus-control';\nimport useResize from '../utils/use-resize';\nimport { SplitPanelFocusControlRefs, useSplitPanelFocusControl } from '../utils/use-split-panel-focus-control';\nimport { getSplitPanelPosition } from './split-panel';\nimport useBackgroundOverlap from './use-background-overlap';\n\nimport styles from './styles.css.js';\n\nexport interface AppLayoutInternals extends AppLayoutPropsWithDefaults {\n activeDrawerId: string | null;\n drawers: Array | undefined;\n drawersAriaLabel: string | undefined;\n drawersOverflowAriaLabel: string | undefined;\n drawersOverflowWithBadgeAriaLabel: string | undefined;\n drawersRefs: FocusControlRefs;\n drawerSize: number;\n drawersMinWidth: number;\n drawersMaxWidth: number;\n drawerRef: React.Ref;\n resizeHandle: React.ReactElement;\n drawersTriggerCount: number;\n handleDrawersClick: (activeDrawerId: string | null, skipFocusControl?: boolean) => void;\n handleSplitPanelClick: () => void;\n handleNavigationClick: (isOpen: boolean) => void;\n handleSplitPanelPreferencesChange: (detail: AppLayoutProps.SplitPanelPreferences) => void;\n handleSplitPanelResize: (newSize: number) => void;\n handleToolsClick: (value: boolean, skipFocusControl?: boolean) => void;\n hasBackgroundOverlap: boolean;\n hasDrawerViewportOverlay: boolean;\n hasNotificationsContent: boolean;\n hasOpenDrawer?: boolean;\n isBackgroundOverlapDisabled: boolean;\n isMobile: boolean;\n isSplitPanelForcedPosition: boolean;\n isSplitPanelOpen?: boolean;\n isToolsOpen: boolean;\n layoutElement: React.Ref;\n layoutWidth: number;\n loseToolsFocus: () => void;\n loseDrawersFocus: () => void;\n mainElement: React.Ref;\n mainOffsetLeft: number;\n navigationRefs: FocusControlRefs;\n notificationsHeight: number;\n setNotificationsHeight: (height: number) => void;\n offsetBottom: number;\n setSplitPanelReportedSize: (value: number) => void;\n setSplitPanelReportedHeaderHeight: (value: number) => void;\n headerHeight: number;\n footerHeight: number;\n splitPanelControlId: string;\n splitPanelMaxWidth: number;\n splitPanelPosition: AppLayoutProps.SplitPanelPosition;\n splitPanelReportedSize: number;\n splitPanelReportedHeaderHeight: number;\n splitPanelToggle: SplitPanelSideToggleProps;\n setSplitPanelToggle: (toggle: SplitPanelSideToggleProps) => void;\n splitPanelDisplayed: boolean;\n splitPanelRefs: SplitPanelFocusControlRefs;\n toolsControlId: string;\n toolsRefs: FocusControlRefs;\n __embeddedViewMode?: boolean;\n}\n\n/**\n * The default values are destructured in the context instantiation to\n * prevent downstream Typescript errors. This could likely be replaced\n * by a context interface definition that extends the AppLayout interface.\n */\nconst AppLayoutInternalsContext = createContext(null);\n\ninterface AppLayoutProviderInternalsProps extends AppLayoutPropsWithDefaults {\n children: React.ReactNode;\n}\n\nexport function useAppLayoutInternals() {\n const ctx = useContext(AppLayoutInternalsContext);\n if (!ctx) {\n throw new Error('Invariant violation: this context is only available inside app layout');\n }\n return ctx;\n}\n\nexport const AppLayoutInternalsProvider = React.forwardRef(\n (props: AppLayoutProviderInternalsProps, forwardRef: React.Ref) => {\n const {\n toolsHide,\n toolsOpen: controlledToolsOpen,\n navigationHide,\n navigationOpen,\n contentType,\n placement,\n children,\n splitPanel,\n } = props;\n const isMobile = useMobile();\n\n // Private API for embedded view mode\n const __embeddedViewMode = Boolean((props as any).__embeddedViewMode);\n\n /**\n * Set the default values for minimum and maximum content width.\n */\n const geckoMaxCssLength = ((1 << 30) - 1) / 60;\n const halfGeckoMaxCssLength = geckoMaxCssLength / 2;\n // CSS lengths in Gecko are limited to at most (1<<30)-1 app units (Gecko uses 60 as app unit).\n // Limit the maxContentWidth to the half of the upper boundary (≈4230^2) to be on the safe side.\n const maxContentWidth =\n props.maxContentWidth && props.maxContentWidth > halfGeckoMaxCssLength\n ? halfGeckoMaxCssLength\n : props.maxContentWidth ?? 0;\n const minContentWidth = props.minContentWidth ?? 280;\n\n const { refs: navigationRefs, setFocus: focusNavButtons } = useFocusControl(navigationOpen);\n\n const handleNavigationClick = useStableCallback(function handleNavigationChange(isOpen: boolean) {\n focusNavButtons();\n fireNonCancelableEvent(props.onNavigationChange, { open: isOpen });\n });\n\n useEffect(() => {\n // Close navigation drawer on mobile so that the main content is visible\n if (isMobile) {\n handleNavigationClick(false);\n }\n }, [isMobile, handleNavigationClick]);\n\n const toolsWidth = props.toolsWidth;\n const [isToolsOpen = false, setIsToolsOpen] = useControllable(controlledToolsOpen, props.onToolsChange, false, {\n componentName: 'AppLayout',\n controlledProp: 'toolsOpen',\n changeHandler: 'onToolsChange',\n });\n\n const {\n refs: toolsRefs,\n setFocus: focusToolsButtons,\n loseFocus: loseToolsFocus,\n } = useFocusControl(isToolsOpen, true);\n\n const handleToolsClick = useCallback(\n function handleToolsChange(isOpen: boolean, skipFocusControl?: boolean) {\n setIsToolsOpen(isOpen);\n !skipFocusControl && focusToolsButtons();\n fireNonCancelableEvent(props.onToolsChange, { open: isOpen });\n },\n [props.onToolsChange, setIsToolsOpen, focusToolsButtons]\n );\n\n /**\n * Set the default values for the minimum and maximum Split Panel width when it is\n * in the side position. The useLayoutEffect will compute the available space in the\n * DOM for the Split Panel given the current state. The minimum and maximum\n * widths will potentially trigger a side effect that will put the Split Panel into\n * a forced position on the bottom.\n */\n const [splitPanelMaxWidth, setSplitPanelMaxWidth] = useState(SPLIT_PANEL_MIN_WIDTH);\n\n /**\n * The useControllable hook will set the default value and manage either\n * the controlled or uncontrolled state of the Split Panel. By default\n * the Split Panel should always be closed on page load.\n *\n * The callback that will be passed to the SplitPanel component\n * to handle the click events that will change the state of the SplitPanel\n * to open or closed given the current state. It will set the isSplitPanelOpen\n * controlled state and fire the onSplitPanelToggle event.\n */\n const [isSplitPanelOpen, setIsSplitPanelOpen] = useControllable(\n props.splitPanelOpen,\n props.onSplitPanelToggle,\n false,\n { componentName: 'AppLayout', controlledProp: 'splitPanelOpen', changeHandler: 'onSplitPanelToggle' }\n );\n\n /**\n * The useControllable hook will manage the controlled or uncontrolled\n * state of the splitPanelPreferences. By default the splitPanelPreferences\n * is undefined. When set the object shape should have a single key to indicate\n * either bottom or side position.\n *\n * The callback that will handle changes to the splitPanelPreferences\n * object that will determine if the SplitPanel is rendered either on the\n * bottom of the viewport or within the Tools container.\n */\n const [splitPanelPreferences, setSplitPanelPreferences] = useControllable(\n props.splitPanelPreferences,\n props.onSplitPanelPreferencesChange,\n undefined,\n {\n componentName: 'AppLayout',\n controlledProp: 'splitPanelPreferences',\n changeHandler: 'onSplitPanelPreferencesChange',\n }\n );\n\n const { refs: splitPanelRefs, setLastInteraction: setSplitPanelLastInteraction } = useSplitPanelFocusControl([\n splitPanelPreferences,\n isSplitPanelOpen,\n ]);\n\n const handleSplitPanelClick = useCallback(\n function handleSplitPanelChange() {\n setIsSplitPanelOpen(!isSplitPanelOpen);\n setSplitPanelLastInteraction({ type: isSplitPanelOpen ? 'close' : 'open' });\n fireNonCancelableEvent(props.onSplitPanelToggle, { open: !isSplitPanelOpen });\n },\n [props.onSplitPanelToggle, isSplitPanelOpen, setIsSplitPanelOpen, setSplitPanelLastInteraction]\n );\n\n const isSplitPanelForcedPosition = shouldSplitPanelBeForcedToBottom({\n isMobile,\n availableWidthForSplitPanel: splitPanelMaxWidth,\n });\n const splitPanelPosition = getSplitPanelPosition(isSplitPanelForcedPosition, splitPanelPreferences);\n\n /**\n * The useControllable hook will set the default size of the SplitPanel based\n * on the default position set in the splitPanelPreferences. The logic for the\n * default size is contained in the SplitPanel component. The splitPanelControlledSize\n * will be bound to the size property in the SplitPanel context for rendering.\n *\n * The callback that will be passed to the SplitPanel component\n * to handle the resize events that will change the size of the SplitPanel.\n * It will set the splitPanelControlledSize controlled state and fire the\n * onSplitPanelResize event.\n */\n const [splitPanelReportedSize, setSplitPanelReportedSize] = useState(0);\n const [splitPanelReportedHeaderHeight, setSplitPanelReportedHeaderHeight] = useState(0);\n const [splitPanelToggle, setSplitPanelToggle] = useState({\n displayed: false,\n ariaLabel: undefined,\n });\n const splitPanelDisplayed = !!(splitPanelToggle.displayed || isSplitPanelOpen) && !!splitPanel;\n const splitPanelControlId = useUniqueId('split-panel-');\n const toolsControlId = useUniqueId('tools-');\n\n const [splitPanelSize, setSplitPanelSize] = useControllable(\n props.splitPanelSize,\n props.onSplitPanelResize,\n getSplitPanelDefaultSize(splitPanelPosition),\n { componentName: 'AppLayout', controlledProp: 'splitPanelSize', changeHandler: 'onSplitPanelResize' }\n );\n\n const handleSplitPanelResize = useCallback(\n (size: number) => {\n setSplitPanelSize(size);\n fireNonCancelableEvent(props.onSplitPanelResize, { size });\n },\n [props.onSplitPanelResize, setSplitPanelSize]\n );\n\n const handleSplitPanelPreferencesChange = useCallback(\n function handleSplitPanelChange(detail: AppLayoutProps.SplitPanelPreferences) {\n setSplitPanelPreferences(detail);\n setSplitPanelLastInteraction({ type: 'position' });\n fireNonCancelableEvent(props.onSplitPanelPreferencesChange, detail);\n },\n [props.onSplitPanelPreferencesChange, setSplitPanelPreferences, setSplitPanelLastInteraction]\n );\n\n const {\n drawers,\n activeDrawer,\n activeDrawerId,\n minDrawerSize: drawersMinWidth,\n onActiveDrawerChange,\n onActiveDrawerResize,\n activeDrawerSize,\n ...drawersProps\n } = useDrawers(props, props.ariaLabels, {\n disableDrawersMerge: true,\n ariaLabels: props.ariaLabels,\n toolsHide,\n toolsOpen: isToolsOpen,\n tools: props.tools,\n toolsWidth,\n onToolsToggle: handleToolsClick,\n });\n\n const [drawersMaxWidth, setDrawersMaxWidth] = useState(toolsWidth);\n const hasDrawers = !!drawers && drawers.length > 0;\n\n const {\n refs: drawersRefs,\n setFocus: focusDrawersButtons,\n loseFocus: loseDrawersFocus,\n } = useFocusControl(!!activeDrawerId, true, activeDrawerId);\n\n const drawerRef = useRef(null);\n const { resizeHandle, drawerSize } = useResize(drawerRef, {\n onActiveDrawerResize,\n activeDrawerSize,\n activeDrawer,\n drawersRefs,\n isToolsOpen,\n drawersMaxWidth,\n drawersMinWidth,\n });\n\n const handleDrawersClick = (id: string | null, skipFocusControl?: boolean) => {\n const newActiveDrawerId = id !== activeDrawerId ? id : null;\n\n onActiveDrawerChange(newActiveDrawerId, { initiatedByUserAction: true });\n\n !skipFocusControl && focusDrawersButtons();\n };\n\n let drawersTriggerCount = drawers ? drawers.length : !toolsHide ? 1 : 0;\n if (splitPanelDisplayed && splitPanelPosition === 'side') {\n drawersTriggerCount++;\n }\n const hasOpenDrawer =\n !!activeDrawerId ||\n (!toolsHide && isToolsOpen) ||\n (splitPanelDisplayed && splitPanelPosition === 'side' && isSplitPanelOpen);\n const hasDrawerViewportOverlay =\n isMobile && (!!activeDrawerId || (!navigationHide && navigationOpen) || (!toolsHide && isToolsOpen));\n\n const layoutElement = useRef(null);\n const mainElement = useRef(null);\n const [mainOffsetLeft, setMainOffsetLeft] = useState(0);\n\n const { hasBackgroundOverlap, updateBackgroundOverlapHeight } = useBackgroundOverlap({\n contentHeader: props.contentHeader,\n disableContentHeaderOverlap: props.disableContentHeaderOverlap,\n layoutElement,\n });\n\n useLayoutEffect(\n function handleMainOffsetLeft() {\n const offsetInlineStart = mainElement?.current ? getOffsetInlineStart(mainElement?.current) : 0;\n setMainOffsetLeft(offsetInlineStart);\n },\n [placement.inlineSize, navigationOpen, isToolsOpen, splitPanelReportedSize]\n );\n\n /**\n * On mobile viewports the navigation and tools drawers are adjusted to a fixed position\n * that consumes 100% of the viewport height and width. The body content could potentially\n * be scrollable underneath the drawer. In order to prevent this a CSS class needs to be\n * added to the document body that sets overflow to hidden.\n */\n useEffect(\n function handleBodyScroll() {\n if (isMobile && (navigationOpen || isToolsOpen || !!activeDrawer)) {\n document.body.classList.add(styles['block-body-scroll']);\n } else {\n document.body.classList.remove(styles['block-body-scroll']);\n }\n\n // Ensure the CSS class is removed from the body on side effect cleanup\n return function cleanup() {\n document.body.classList.remove(styles['block-body-scroll']);\n };\n },\n [isMobile, navigationOpen, isToolsOpen, activeDrawer]\n );\n\n const [notificationsHeight, setNotificationsHeight] = useState(0);\n const hasNotificationsContent = notificationsHeight > 0;\n /**\n * Determine the offsetBottom value based on the presence of a footer element and\n * the SplitPanel component. Ignore the SplitPanel if it is not in the bottom\n * position. Use the size property if it is open and the header height if it is closed.\n */\n let offsetBottom = placement.insetBlockEnd;\n\n if (splitPanelDisplayed && splitPanelPosition === 'bottom') {\n if (isSplitPanelOpen) {\n offsetBottom += splitPanelReportedSize;\n } else {\n offsetBottom += splitPanelReportedHeaderHeight;\n }\n }\n\n /**\n * Warning! This is a hack! In order to accurately calculate if there is adequate\n * horizontal space for the Split Panel to be in the side position we need two values\n * that are not available in JavaScript.\n *\n * The first is the the content gap on the right which is stored in a design token\n * and applied in the Layout CSS:\n *\n * $contentGapRight: #{awsui.$space-layout-content-horizontal};\n *\n * The second is the width of the element that has the circular buttons for the\n * Tools and Split Panel. This could be suppressed given the state of the Tools\n * drawer returning a zero value. It would, however, be rendered if the Split Panel\n * were to move into the side position. This is calculated in the Tools CSS and\n * the Trigger button CSS with design tokens:\n *\n * padding: awsui.$space-scaled-s awsui.$space-layout-toggle-padding;\n * width: awsui.$space-layout-toggle-diameter;\n *\n * These values will be defined below as static integers that are rough approximations\n * of their computed width when rendered in the DOM, but doubled to ensure adequate\n * spacing for the Split Panel to be in side position.\n */\n useLayoutEffect(\n function handleSplitPanelMaxWidth() {\n const contentGapRight = 50; // Approximately 24px when rendered but doubled for safety\n const toolsFormOffsetWidth = 120; // Approximately 60px when rendered but doubled for safety\n const getPanelOffsetWidth = () => {\n if (drawers) {\n return activeDrawerId ? drawerSize : 0;\n }\n return isToolsOpen ? toolsWidth : 0;\n };\n\n setSplitPanelMaxWidth(\n placement.inlineSize -\n mainOffsetLeft -\n minContentWidth -\n contentGapRight -\n toolsFormOffsetWidth -\n getPanelOffsetWidth()\n );\n\n setDrawersMaxWidth(\n placement.inlineSize - mainOffsetLeft - minContentWidth - contentGapRight - toolsFormOffsetWidth\n );\n },\n [\n activeDrawerId,\n drawerSize,\n drawers,\n navigationOpen,\n isToolsOpen,\n placement.inlineSize,\n mainOffsetLeft,\n minContentWidth,\n toolsWidth,\n ]\n );\n\n /**\n * The useImperativeHandle hook in conjunction with the forwardRef function\n * in the AppLayout component definition expose the following callable\n * functions to component consumers when they put a ref as a property on\n * their component implementation.\n */\n useImperativeHandle(\n forwardRef,\n function createImperativeHandle() {\n return {\n closeNavigationIfNecessary: function () {\n isMobile && handleNavigationClick(false);\n },\n openTools: function () {\n handleToolsClick(true, hasDrawers);\n if (hasDrawers) {\n focusDrawersButtons(true);\n }\n },\n focusToolsClose: () => {\n if (hasDrawers) {\n focusDrawersButtons(true);\n } else {\n focusToolsButtons(true);\n }\n },\n focusActiveDrawer: () => focusDrawersButtons(true),\n focusSplitPanel: () => splitPanelRefs.slider.current?.focus(),\n };\n },\n [\n isMobile,\n handleNavigationClick,\n handleToolsClick,\n focusToolsButtons,\n focusDrawersButtons,\n splitPanelRefs.slider,\n hasDrawers,\n ]\n );\n\n return (\n \n \n {children}\n \n \n );\n }\n);\n", "// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport { createContext } from 'react';\n\nexport const DynamicOverlapContext = createContext<(overlapHeight: number) => void>(() => {});\n", "// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React, { useEffect, useState } from 'react';\n\nimport PanelResizeHandle from '../../internal/components/panel-resize-handle';\nimport { getLimitedValue } from '../../split-panel/utils/size-utils';\nimport { AppLayoutProps } from '../interfaces';\nimport { SizeControlProps } from './interfaces';\nimport { FocusControlRefs } from './use-focus-control';\nimport { useKeyboardEvents } from './use-keyboard-events';\nimport { usePointerEvents } from './use-pointer-events';\n\nimport testutilStyles from '../test-classes/styles.css.js';\n\ninterface DrawerResizeProps {\n activeDrawer: AppLayoutProps.Drawer | undefined;\n activeDrawerSize: number;\n onActiveDrawerResize: (detail: { id: string; size: number }) => void;\n drawersRefs: FocusControlRefs;\n isToolsOpen: boolean;\n drawersMaxWidth: number;\n drawersMinWidth: number;\n}\n\nfunction useResize(\n drawerRefObject: React.RefObject,\n {\n activeDrawer,\n activeDrawerSize,\n onActiveDrawerResize,\n drawersRefs,\n isToolsOpen,\n drawersMinWidth,\n drawersMaxWidth,\n }: DrawerResizeProps\n) {\n const [relativeSize, setRelativeSize] = useState(0);\n\n const drawerSize = !activeDrawer && !isToolsOpen ? 0 : activeDrawerSize;\n\n useEffect(() => {\n // effects are called inside out in the components tree\n // wait one frame to allow app-layout to complete its calculations\n const handle = requestAnimationFrame(() => {\n const maxSize = drawersMaxWidth;\n setRelativeSize(((drawerSize - drawersMinWidth) / (maxSize - drawersMinWidth)) * 100);\n });\n return () => cancelAnimationFrame(handle);\n }, [drawerSize, drawersMaxWidth, drawersMinWidth]);\n\n const setSidePanelWidth = (width: number) => {\n const maxWidth = drawersMaxWidth;\n const size = getLimitedValue(drawersMinWidth, width, maxWidth);\n const id = activeDrawer?.id;\n\n if (id && maxWidth >= drawersMinWidth) {\n onActiveDrawerResize({ size, id });\n }\n };\n\n const sizeControlProps: SizeControlProps = {\n position: 'side',\n panelRef: drawerRefObject,\n handleRef: drawersRefs.slider,\n onResize: setSidePanelWidth,\n };\n\n const onSliderPointerDown = usePointerEvents(sizeControlProps);\n const onKeyDown = useKeyboardEvents(sizeControlProps);\n\n const resizeHandle = (\n \n );\n\n return { resizeHandle, drawerSize };\n}\n\nexport default useResize;\n", "// 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 { Transition } from '../../internal/components/transition';\nimport customCssProps from '../../internal/generated/custom-css-properties';\nimport { AppLayoutProps } from '../interfaces';\nimport { SPLIT_PANEL_MIN_WIDTH, SplitPanelProvider, SplitPanelProviderProps } from '../split-panel';\nimport { useAppLayoutInternals } from './context';\n\nimport styles from './styles.css.js';\n\n/**\n * If there is no Split Panel in the AppLayout context then the SplitPanel\n * will pass through the AppLayout children without the context.\n */\nfunction SplitPanel({ children }: React.PropsWithChildren) {\n const {\n footerHeight,\n handleSplitPanelClick,\n handleSplitPanelPreferencesChange,\n handleSplitPanelResize,\n headerHeight,\n isSplitPanelForcedPosition,\n isSplitPanelOpen,\n setSplitPanelReportedSize,\n setSplitPanelReportedHeaderHeight,\n setSplitPanelToggle,\n splitPanelPosition,\n splitPanelRefs,\n splitPanelSize,\n } = useAppLayoutInternals();\n\n const props: SplitPanelProviderProps = {\n bottomOffset: 0,\n getMaxHeight: () => {\n const availableHeight = document.documentElement.clientHeight - headerHeight - footerHeight;\n // If the page is likely zoomed in at 200%, allow the split panel to fill the content area.\n return availableHeight < 400 ? availableHeight - 40 : availableHeight - 250;\n },\n maxWidth: typeof document !== 'undefined' ? document.documentElement.clientWidth : Number.POSITIVE_INFINITY,\n isForcedPosition: isSplitPanelForcedPosition,\n isOpen: isSplitPanelOpen,\n leftOffset: 0,\n onPreferencesChange: handleSplitPanelPreferencesChange,\n onResize: handleSplitPanelResize,\n onToggle: handleSplitPanelClick,\n position: splitPanelPosition,\n reportSize: setSplitPanelReportedSize,\n reportHeaderHeight: setSplitPanelReportedHeaderHeight,\n rightOffset: 0,\n size: splitPanelSize || 0,\n topOffset: 0,\n setSplitPanelToggle,\n refs: splitPanelRefs,\n };\n\n return {children};\n}\n\n/**\n * This is the render function for the SplitPanel when it is in bottom position.\n * The Split Panel container will be another row entry in the grid definition in\n * the Layout component. The start and finish columns will be variable based\n * on the presence and state of the Navigation and Tools components.\n */\nfunction SplitPanelBottom() {\n const {\n disableBodyScroll,\n hasOpenDrawer,\n navigationOpen,\n isSplitPanelOpen,\n splitPanel,\n splitPanelPosition,\n splitPanelReportedSize,\n splitPanelReportedHeaderHeight,\n } = useAppLayoutInternals();\n\n if (!splitPanel) {\n return null;\n }\n\n return (\n \n {(state, transitionEventsRef) => (\n \n {splitPanelPosition === 'bottom' && splitPanel}\n \n )}\n \n );\n}\n\n/**\n * This is the render function for the SplitPanel when it is side position.\n * The Split Panel will not be within the grid defined in the Layout component\n * but instead a direct child of the Tools component. The width constraints\n * for this position are computed in the Tools component.\n */\n\n/**\n * This component has no opening animations because it causes lots of rerenders that makes the component lag. *\n */\n\nfunction SplitPanelSide() {\n const {\n isSplitPanelOpen,\n splitPanel,\n splitPanelPosition,\n splitPanelMaxWidth,\n splitPanelControlId,\n isToolsOpen,\n activeDrawerId,\n } = useAppLayoutInternals();\n\n if (!splitPanel) {\n return null;\n }\n\n return (\n \n {splitPanelPosition === 'side' && splitPanel}\n \n );\n}\n\n/**\n * This logic will determine what the Split Panel position should be. It reconciles the possibility\n * of being in forced position with the current selected position in the settings.\n */\nexport function getSplitPanelPosition(\n isSplitPanelForcedPosition: boolean,\n splitPanelPreferences: AppLayoutProps.SplitPanelPreferences | undefined\n) {\n let splitPanelPosition: AppLayoutProps.SplitPanelPosition = 'bottom';\n\n if (!isSplitPanelForcedPosition && splitPanelPreferences?.position === 'side') {\n splitPanelPosition = 'side';\n }\n\n return splitPanelPosition;\n}\nSplitPanel.Bottom = SplitPanelBottom;\nSplitPanel.Side = SplitPanelSide;\n\nexport default SplitPanel;\n", "\n import './styles.scoped.css';\n export default {\n \"background\": \"awsui_background_hyvsj_lgv7x_149\",\n \"scrolling-background\": \"awsui_scrolling-background_hyvsj_lgv7x_152\",\n \"breadcrumbs\": \"awsui_breadcrumbs_hyvsj_lgv7x_163\",\n \"drawers-container\": \"awsui_drawers-container_hyvsj_lgv7x_176\",\n \"has-open-drawer\": \"awsui_has-open-drawer_hyvsj_lgv7x_187\",\n \"disable-body-scroll\": \"awsui_disable-body-scroll_hyvsj_lgv7x_208\",\n \"drawers-desktop-triggers-container\": \"awsui_drawers-desktop-triggers-container_hyvsj_lgv7x_213\",\n \"has-multiple-triggers\": \"awsui_has-multiple-triggers_hyvsj_lgv7x_251\",\n \"drawers-mobile-triggers-container\": \"awsui_drawers-mobile-triggers-container_hyvsj_lgv7x_261\",\n \"drawers-trigger-content\": \"awsui_drawers-trigger-content_hyvsj_lgv7x_266\",\n \"drawers-trigger-overflow\": \"awsui_drawers-trigger-overflow_hyvsj_lgv7x_280\",\n \"drawers-trigger\": \"awsui_drawers-trigger_hyvsj_lgv7x_266\",\n \"drawer\": \"awsui_drawer_hyvsj_lgv7x_176\",\n \"drawer-content-container\": \"awsui_drawer-content-container_hyvsj_lgv7x_311\",\n \"drawer-close-button\": \"awsui_drawer-close-button_hyvsj_lgv7x_320\",\n \"drawer-content\": \"awsui_drawer-content_hyvsj_lgv7x_311\",\n \"drawer-content-hidden\": \"awsui_drawer-content-hidden_hyvsj_lgv7x_329\",\n \"drawer-slider\": \"awsui_drawer-slider_hyvsj_lgv7x_332\",\n \"is-drawer-open\": \"awsui_is-drawer-open_hyvsj_lgv7x_339\",\n \"content\": \"awsui_content_hyvsj_lgv7x_365\",\n \"layout\": \"awsui_layout_hyvsj_lgv7x_390\",\n \"has-max-content-width\": \"awsui_has-max-content-width_hyvsj_lgv7x_462\",\n \"content-type-dashboard\": \"awsui_content-type-dashboard_hyvsj_lgv7x_477\",\n \"content-type-table\": \"awsui_content-type-table_hyvsj_lgv7x_491\",\n \"content-type-cards\": \"awsui_content-type-cards_hyvsj_lgv7x_491\",\n \"is-overlap-disabled\": \"awsui_is-overlap-disabled_hyvsj_lgv7x_497\",\n \"is-hide-mobile-toolbar\": \"awsui_is-hide-mobile-toolbar_hyvsj_lgv7x_500\",\n \"has-content-gap-left\": \"awsui_has-content-gap-left_hyvsj_lgv7x_514\",\n \"has-content-gap-right\": \"awsui_has-content-gap-right_hyvsj_lgv7x_517\",\n \"has-breadcrumbs\": \"awsui_has-breadcrumbs_hyvsj_lgv7x_527\",\n \"content-first-child-header\": \"awsui_content-first-child-header_hyvsj_lgv7x_530\",\n \"content-first-child-notifications\": \"awsui_content-first-child-notifications_hyvsj_lgv7x_530\",\n \"has-header\": \"awsui_has-header_hyvsj_lgv7x_530\",\n \"content-first-child-main\": \"awsui_content-first-child-main_hyvsj_lgv7x_545\",\n \"disable-content-paddings\": \"awsui_disable-content-paddings_hyvsj_lgv7x_545\",\n \"has-left-toggles-gutter\": \"awsui_has-left-toggles-gutter_hyvsj_lgv7x_565\",\n \"has-right-toggles-gutter\": \"awsui_has-right-toggles-gutter_hyvsj_lgv7x_568\",\n \"has-split-panel\": \"awsui_has-split-panel_hyvsj_lgv7x_588\",\n \"split-panel-position-bottom\": \"awsui_split-panel-position-bottom_hyvsj_lgv7x_588\",\n \"block-body-scroll\": \"awsui_block-body-scroll_hyvsj_lgv7x_596\",\n \"unfocusable\": \"awsui_unfocusable_hyvsj_lgv7x_601\",\n \"container\": \"awsui_container_hyvsj_lgv7x_611\",\n \"is-navigation-open\": \"awsui_is-navigation-open_hyvsj_lgv7x_637\",\n \"is-tools-open\": \"awsui_is-tools-open_hyvsj_lgv7x_640\",\n \"is-split-panel-open\": \"awsui_is-split-panel-open_hyvsj_lgv7x_640\",\n \"split-panel-position-side\": \"awsui_split-panel-position-side_hyvsj_lgv7x_640\",\n \"has-active-drawer\": \"awsui_has-active-drawer_hyvsj_lgv7x_640\",\n \"mobile-toolbar\": \"awsui_mobile-toolbar_hyvsj_lgv7x_653\",\n \"remove-high-contrast-header\": \"awsui_remove-high-contrast-header_hyvsj_lgv7x_670\",\n \"mobile-toolbar-nav\": \"awsui_mobile-toolbar-nav_hyvsj_lgv7x_674\",\n \"mobile-toolbar-breadcrumbs\": \"awsui_mobile-toolbar-breadcrumbs_hyvsj_lgv7x_678\",\n \"mobile-toolbar-tools\": \"awsui_mobile-toolbar-tools_hyvsj_lgv7x_682\",\n \"navigation-container\": \"awsui_navigation-container_hyvsj_lgv7x_691\",\n \"show-navigation\": \"awsui_show-navigation_hyvsj_lgv7x_729\",\n \"animating\": \"awsui_animating_hyvsj_lgv7x_752\",\n \"showButtons\": \"awsui_showButtons_hyvsj_lgv7x_1\",\n \"navigation\": \"awsui_navigation_hyvsj_lgv7x_691\",\n \"openNavigation\": \"awsui_openNavigation_hyvsj_lgv7x_1\",\n \"animated-content\": \"awsui_animated-content_hyvsj_lgv7x_816\",\n \"content-container\": \"awsui_content-container_hyvsj_lgv7x_819\",\n \"hide-navigation\": \"awsui_hide-navigation_hyvsj_lgv7x_828\",\n \"notifications\": \"awsui_notifications_hyvsj_lgv7x_838\",\n \"has-notification-content\": \"awsui_has-notification-content_hyvsj_lgv7x_843\",\n \"sticky-notifications\": \"awsui_sticky-notifications_hyvsj_lgv7x_847\",\n \"high-contrast\": \"awsui_high-contrast_hyvsj_lgv7x_852\",\n \"split-panel-bottom\": \"awsui_split-panel-bottom_hyvsj_lgv7x_870\",\n \"position-bottom\": \"awsui_position-bottom_hyvsj_lgv7x_917\",\n \"openSplitPanelBottom\": \"awsui_openSplitPanelBottom_hyvsj_lgv7x_1\",\n \"split-panel-side\": \"awsui_split-panel-side_hyvsj_lgv7x_946\",\n \"position-side\": \"awsui_position-side_hyvsj_lgv7x_959\",\n \"tools-container\": \"awsui_tools-container_hyvsj_lgv7x_981\",\n \"tools\": \"awsui_tools_hyvsj_lgv7x_981\",\n \"openTools\": \"awsui_openTools_hyvsj_lgv7x_1\",\n \"has-tools-form-persistence\": \"awsui_has-tools-form-persistence_hyvsj_lgv7x_1070\",\n \"hide-tools\": \"awsui_hide-tools_hyvsj_lgv7x_1080\",\n \"show-tools\": \"awsui_show-tools_hyvsj_lgv7x_1092\",\n \"has-tools-form\": \"awsui_has-tools-form_hyvsj_lgv7x_1070\",\n \"trigger-button-styles\": \"awsui_trigger-button-styles_hyvsj_lgv7x_1172\",\n \"trigger-badge-wrapper\": \"awsui_trigger-badge-wrapper_hyvsj_lgv7x_1188\",\n \"trigger\": \"awsui_trigger_hyvsj_lgv7x_1172\",\n \"selected\": \"awsui_selected_hyvsj_lgv7x_1240\",\n \"badge\": \"awsui_badge_hyvsj_lgv7x_1260\",\n \"trigger-wrapper\": \"awsui_trigger-wrapper_hyvsj_lgv7x_1264\",\n \"trigger-wrapper-tooltip-visible\": \"awsui_trigger-wrapper-tooltip-visible_hyvsj_lgv7x_1275\",\n \"dot\": \"awsui_dot_hyvsj_lgv7x_1279\",\n \"trigger-tooltip\": \"awsui_trigger-tooltip_hyvsj_lgv7x_1292\"\n};\n ", "// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React, { useCallback, useState } from 'react';\n\nimport customCssProps from '../../internal/generated/custom-css-properties';\n\nexport default function useBackgroundOverlap({\n contentHeader,\n disableContentHeaderOverlap,\n layoutElement,\n}: {\n contentHeader: React.ReactNode;\n disableContentHeaderOverlap?: boolean;\n layoutElement: React.Ref;\n}) {\n const hasContentHeader = !!contentHeader;\n\n const [hasBackgroundOverlap, setHasBackgroundOverlap] = useState(hasContentHeader);\n\n const updateBackgroundOverlapHeight = useCallback(\n (height: number) => {\n const hasOverlap = hasContentHeader || height > 0;\n setHasBackgroundOverlap(hasOverlap);\n\n /**\n * React 18 will trigger a paint before the state is correctly updated\n * (see https://github.com/facebook/react/issues/24331).\n * To work around this, we bypass React state updates and imperatively update the custom property on the DOM.\n * An alternative would be to use `queueMicrotask` and `flushSync` in the ResizeObserver callback,\n * but that would have some performance impact as it would delay the render.\n */\n // Layout component uses RefObject, we don't expect a RefCallback\n const element = typeof layoutElement !== 'function' && layoutElement?.current;\n if (!element) {\n return;\n }\n if (disableContentHeaderOverlap || !hasOverlap || height <= 0) {\n element.style.removeProperty(customCssProps.overlapHeight);\n } else {\n element.style.setProperty(customCssProps.overlapHeight, `${height}px`);\n }\n },\n [hasContentHeader, layoutElement, disableContentHeaderOverlap]\n );\n\n return {\n hasBackgroundOverlap,\n updateBackgroundOverlapHeight,\n };\n}\n", "// 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 { highContrastHeaderClassName } from '../../internal/utils/content-header-utils';\nimport { useAppLayoutInternals } from './context';\n\nimport testutilStyles from '../test-classes/styles.css.js';\nimport styles from './styles.css.js';\n\nexport default function Breadcrumbs() {\n const { breadcrumbs, isMobile, headerVariant } = useAppLayoutInternals();\n\n if (isMobile || !breadcrumbs) {\n return null;\n }\n\n return (\n \n {breadcrumbs}\n
\n );\n}\n", "// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React, { useRef } from 'react';\nimport clsx from 'clsx';\n\nimport { useContainerQuery } from '@cloudscape-design/component-toolkit';\n\nimport { InternalButton } from '../../button/internal';\nimport customCssProps from '../../internal/generated/custom-css-properties';\nimport { getLimitedValue } from '../../split-panel/utils/size-utils';\nimport { splitItems } from '../drawer/drawers-helpers';\nimport OverflowMenu from '../drawer/overflow-menu';\nimport { TOOLS_DRAWER_ID } from '../utils/use-drawers';\nimport { useAppLayoutInternals } from './context';\nimport SplitPanel from './split-panel';\nimport TriggerButton from './trigger-button';\n\nimport splitPanelTestUtilStyles from '../../split-panel/test-classes/styles.css.js';\nimport testutilStyles from '../test-classes/styles.css.js';\nimport styles from './styles.css.js';\n\n/**\n * The VISIBLE_MOBILE_TOOLBAR_TRIGGERS_LIMIT is used to reduce the number\n * of triggers that are initially visible on the mobile toolbar, the rest\n * are then placed into an overflow menu\n *\n * Note if one of the triggers is for a split-panel, it would not count that\n */\nconst VISIBLE_MOBILE_TOOLBAR_TRIGGERS_LIMIT = 2;\n\n/**\n * The Drawers root component is mounted in the AppLayout index file. It will only\n * render if the drawers are defined, and it will take over the mounting of and\n * rendering of the Tools and SplitPanel (side position) if they exist. If drawers\n * do not exist then the Tools and SplitPanel will be handled by the Tools component.\n */\nexport default function Drawers() {\n const {\n disableBodyScroll,\n drawers,\n drawersTriggerCount,\n hasDrawerViewportOverlay,\n hasOpenDrawer,\n navigationOpen,\n navigationHide,\n isMobile,\n } = useAppLayoutInternals();\n\n const isUnfocusable = hasDrawerViewportOverlay && navigationOpen && !navigationHide;\n\n if (!drawers || drawersTriggerCount === 0) {\n return null;\n }\n\n return (\n \n \n \n {!isMobile && }\n \n );\n}\n\nfunction ActiveDrawer() {\n const {\n activeDrawerId,\n ariaLabels,\n drawers,\n drawersRefs,\n handleDrawersClick,\n handleToolsClick,\n hasDrawerViewportOverlay,\n isMobile,\n navigationOpen,\n navigationHide,\n loseDrawersFocus,\n resizeHandle,\n drawerSize,\n drawersMinWidth,\n drawersMaxWidth,\n drawerRef,\n } = useAppLayoutInternals();\n\n const activeDrawer = drawers?.find(item => item.id === activeDrawerId) ?? null;\n\n const computedAriaLabels = {\n closeButton: activeDrawerId ? activeDrawer?.ariaLabels?.closeButton : ariaLabels?.toolsClose,\n content: activeDrawerId ? activeDrawer?.ariaLabels?.drawerName : ariaLabels?.tools,\n };\n\n const isHidden = !activeDrawerId;\n const isUnfocusable = isHidden || (hasDrawerViewportOverlay && navigationOpen && !navigationHide);\n const isToolsDrawer = activeDrawerId === TOOLS_DRAWER_ID;\n const toolsContent = drawers?.find(drawer => drawer.id === TOOLS_DRAWER_ID)?.content;\n\n const size = getLimitedValue(drawersMinWidth, drawerSize, drawersMaxWidth);\n\n return (\n {\n if (!e.relatedTarget || !e.currentTarget.contains(e.relatedTarget)) {\n loseDrawersFocus();\n }\n }}\n >\n {!isMobile && activeDrawer?.resizable &&
{resizeHandle}
}\n
\n
\n {\n handleDrawersClick(activeDrawerId);\n handleToolsClick(false);\n }}\n ref={drawersRefs.close}\n variant=\"icon\"\n />\n
\n {toolsContent && (\n \n {toolsContent}\n
\n )}\n {activeDrawerId !== TOOLS_DRAWER_ID && (\n
{activeDrawerId && activeDrawer?.content}
\n )}\n \n \n );\n}\n\n/**\n * The DesktopTriggers will render the trigger buttons for Tools, Drawers, and the\n * SplitPanel in non mobile viewports. Changes to the activeDrawerId need to be\n * tracked by the previousActiveDrawerId property in order to appropriately apply\n * the ref required to manage focus control.\n */\nfunction DesktopTriggers() {\n const {\n activeDrawerId,\n drawers,\n drawersAriaLabel,\n drawersOverflowAriaLabel,\n drawersOverflowWithBadgeAriaLabel,\n drawersRefs,\n drawersTriggerCount,\n handleDrawersClick,\n handleSplitPanelClick,\n hasOpenDrawer,\n isSplitPanelOpen,\n splitPanel,\n splitPanelControlId,\n splitPanelDisplayed,\n splitPanelPosition,\n splitPanelRefs,\n splitPanelToggle,\n splitPanelReportedHeaderHeight,\n splitPanelReportedSize,\n headerVariant,\n } = useAppLayoutInternals();\n\n const hasMultipleTriggers = drawersTriggerCount > 1;\n const hasSplitPanel = splitPanel && splitPanelDisplayed && splitPanelPosition === 'side';\n\n const previousActiveDrawerId = useRef(activeDrawerId);\n const [containerHeight, triggersContainerRef] = useContainerQuery(rect => rect.contentBoxHeight);\n\n if (activeDrawerId) {\n previousActiveDrawerId.current = activeDrawerId;\n }\n\n const splitPanelHeight =\n isSplitPanelOpen && splitPanelPosition === 'bottom' ? splitPanelReportedSize : splitPanelReportedHeaderHeight;\n\n const getIndexOfOverflowItem = () => {\n if (containerHeight) {\n const ITEM_HEIGHT = 48;\n const overflowSpot =\n activeDrawerId && isSplitPanelOpen\n ? (containerHeight - splitPanelReportedHeaderHeight) / 1.5\n : (containerHeight - splitPanelHeight) / 1.5;\n\n const index = Math.floor(overflowSpot / ITEM_HEIGHT);\n\n let splitPanelItem = 0;\n if (hasSplitPanel && splitPanelToggle.displayed) {\n splitPanelItem = 1;\n }\n return index - splitPanelItem;\n }\n\n return 0;\n };\n\n const { visibleItems, overflowItems } = splitItems(drawers ?? undefined, getIndexOfOverflowItem(), activeDrawerId);\n const overflowMenuHasBadge = !!overflowItems.find(item => item.badge);\n\n return (\n \n \n {visibleItems.map(item => {\n const isForPreviousActiveDrawer = previousActiveDrawerId?.current === item.id;\n return (\n handleDrawersClick(item.id)}\n ref={isForPreviousActiveDrawer ? drawersRefs.toggle : undefined}\n badge={item.badge}\n testId={`awsui-app-layout-trigger-${item.id}`}\n highContrastHeader={headerVariant === 'high-contrast'}\n selected={item.id === activeDrawerId}\n />\n );\n })}\n\n {overflowItems.length > 0 && (\n (\n \n )}\n onItemClick={({ detail }) => {\n handleDrawersClick(detail.id);\n }}\n />\n )}\n {hasSplitPanel && splitPanelToggle.displayed && (\n handleSplitPanelClick()}\n selected={hasSplitPanel && isSplitPanelOpen}\n ref={splitPanelRefs.toggle}\n highContrastHeader={headerVariant === 'high-contrast'}\n />\n )}\n \n \n );\n}\n\n/**\n * The MobileTriggers will be mounted inside of the AppBar component and\n * only rendered when Drawers are defined in mobile viewports. The same logic\n * will in the AppBar component will suppress the rendering of the legacy\n * trigger button for the Tools drawer.\n */\nexport function MobileTriggers() {\n const {\n activeDrawerId,\n drawers,\n drawersAriaLabel,\n drawersOverflowAriaLabel,\n drawersOverflowWithBadgeAriaLabel,\n drawersRefs,\n handleDrawersClick,\n hasDrawerViewportOverlay,\n headerVariant,\n } = useAppLayoutInternals();\n\n const previousActiveDrawerId = useRef(activeDrawerId);\n\n if (!drawers) {\n return null;\n }\n\n if (activeDrawerId) {\n previousActiveDrawerId.current = activeDrawerId;\n }\n\n const { visibleItems, overflowItems } = splitItems(drawers, VISIBLE_MOBILE_TOOLBAR_TRIGGERS_LIMIT, activeDrawerId);\n const overflowMenuHasBadge = !!overflowItems.find(item => item.badge);\n\n return (\n \n
\n {visibleItems.map(item => {\n const isForPreviousActiveDrawer = previousActiveDrawerId?.current === item.id;\n return (\n handleDrawersClick(item.id)}\n testId={`awsui-app-layout-trigger-${item.id}`}\n highContrastHeader={headerVariant === 'high-contrast'}\n selected={item.id === activeDrawerId}\n />\n );\n })}\n {overflowItems.length > 0 && (\n handleDrawersClick(detail.id)}\n />\n )}\n
\n \n );\n}\n", "// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React, { Ref } from 'react';\nimport clsx from 'clsx';\n\nimport { ButtonProps } from '../../button/interfaces';\nimport { InternalButton } from '../../button/internal';\nimport { IconProps } from '../../icon/interfaces';\nimport Icon from '../../icon/internal';\nimport { useAppLayoutInternals } from './context';\n\nimport styles from './styles.css.js';\n\nexport interface TriggerButtonProps {\n ariaLabel?: string;\n className?: string;\n iconName?: IconProps.Name;\n iconSvg?: React.ReactNode;\n ariaExpanded: boolean | undefined;\n ariaControls?: string;\n disabled?: boolean;\n /**\n * Ovewrwrites any internal testIds when provided\n */\n testId?: string;\n /**\n * If button is selected. Used only for desktop and applies a selected class for desktop. Mobile does not need the class as the trigger buttons are hidden by the open drawer\n */\n selected?: boolean;\n onClick: () => void;\n badge?: boolean;\n highContrastHeader?: boolean;\n}\n\nfunction TriggerButton(\n {\n ariaLabel,\n className,\n iconName,\n iconSvg,\n ariaExpanded,\n ariaControls,\n onClick,\n testId,\n disabled = false,\n badge,\n selected = false,\n highContrastHeader,\n }: TriggerButtonProps,\n ref: React.Ref\n) {\n const { isMobile } = useAppLayoutInternals();\n\n return (\n
\n {isMobile ? (\n \n ) : (\n <>\n }\n type=\"button\"\n data-testid={testId}\n >\n \n {(iconName || iconSvg) && }\n \n \n {badge &&
}\n \n )}\n
\n );\n}\n\nexport default React.forwardRef(TriggerButton);\n", "\n import './styles.scoped.css';\n export default {\n \"root\": \"awsui_root_rjqu5_zu8o5_5\",\n \"header-text\": \"awsui_header-text_rjqu5_zu8o5_6\",\n \"open-button\": \"awsui_open-button_rjqu5_zu8o5_7\",\n \"close-button\": \"awsui_close-button_rjqu5_zu8o5_8\",\n \"preferences-button\": \"awsui_preferences-button_rjqu5_zu8o5_9\",\n \"slider\": \"awsui_slider_rjqu5_zu8o5_10\",\n \"open-position-bottom\": \"awsui_open-position-bottom_rjqu5_zu8o5_11\",\n \"open-position-side\": \"awsui_open-position-side_rjqu5_zu8o5_12\"\n};\n ", "// 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 { highContrastHeaderClassName } from '../../internal/utils/content-header-utils';\nimport { useAppLayoutInternals } from './context';\n\nimport styles from './styles.css.js';\n\nexport default function Header() {\n const { breadcrumbs, contentHeader, hasDrawerViewportOverlay, hasNotificationsContent, headerVariant } =\n useAppLayoutInternals();\n\n if (!contentHeader) {\n return null;\n }\n\n return (\n \n {contentHeader}\n
\n );\n}\n", "// 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 customCssProps from '../../internal/generated/custom-css-properties';\nimport { useAppLayoutInternals } from './context';\n\nimport testutilStyles from '../test-classes/styles.css.js';\nimport styles from './styles.css.js';\n\ninterface LayoutProps {\n children: React.ReactNode;\n}\n\n/**\n * The layoutElement ref will be used by the resize observers to calculate the offset from\n * the top and bottom of the viewport based on the header and footer elements. This is to\n * ensure the Layout component minimum height will fill 100% of the viewport less those\n * cumulative heights.\n */\nexport default function Layout({ children }: LayoutProps) {\n const {\n breadcrumbs,\n contentHeader,\n contentType,\n disableBodyScroll,\n disableContentPaddings,\n drawersTriggerCount,\n footerHeight,\n hasNotificationsContent,\n hasOpenDrawer,\n headerHeight,\n isBackgroundOverlapDisabled,\n isMobile,\n navigationOpen,\n layoutElement,\n layoutWidth,\n mainOffsetLeft,\n maxContentWidth,\n minContentWidth,\n navigationHide,\n notificationsHeight,\n __embeddedViewMode,\n splitPanelPosition,\n splitPanelDisplayed,\n } = useAppLayoutInternals();\n\n // Determine the first content child so the gap will vertically align with the trigger buttons\n const contentFirstChild = getContentFirstChild(breadcrumbs, contentHeader, hasNotificationsContent, isMobile);\n\n // Content gaps on the left and right are used with the minmax function in the CSS grid column definition\n const hasContentGapLeft = navigationOpen || navigationHide;\n const hasContentGapRight = drawersTriggerCount === 0 || hasOpenDrawer;\n\n return (\n 0,\n [styles['has-split-panel']]: splitPanelDisplayed,\n [styles['is-overlap-disabled']]: isBackgroundOverlapDisabled,\n [styles['is-hide-mobile-toolbar']]: __embeddedViewMode,\n [styles['has-left-toggles-gutter']]: !(isMobile || navigationHide || navigationOpen),\n [styles['has-right-toggles-gutter']]: !isMobile && !hasContentGapRight,\n },\n testutilStyles.root\n )}\n ref={layoutElement}\n style={{\n [customCssProps.headerHeight]: `${headerHeight}px`,\n [customCssProps.footerHeight]: `${footerHeight}px`,\n [customCssProps.layoutWidth]: `${layoutWidth}px`,\n [customCssProps.mainOffsetLeft]: `${mainOffsetLeft}px`,\n ...(maxContentWidth && { [customCssProps.maxContentWidth]: `${maxContentWidth}px` }),\n ...(minContentWidth && { [customCssProps.minContentWidth]: `${minContentWidth}px` }),\n [customCssProps.notificationsHeight]: `${notificationsHeight}px`,\n }}\n >\n {children}\n \n );\n}\n\n/*\nThe Notifications, Breadcrumbs, Header, and Main are all rendered in the center\ncolumn of the grid layout. Any of these could be the first child to render in the\ncontent area if the previous siblings do not exist. The grid gap before the first\nchild will be different to ensure vertical alignment with the trigger buttons.\n*/\nfunction getContentFirstChild(\n breadcrumbs: React.ReactNode,\n contentHeader: React.ReactNode,\n hasNotificationsContent: boolean,\n isMobile: boolean\n) {\n let contentFirstChild = 'main';\n\n if (hasNotificationsContent) {\n contentFirstChild = 'notifications';\n } else if (breadcrumbs && !isMobile) {\n contentFirstChild = 'breadcrumbs';\n } else if (contentHeader) {\n contentFirstChild = 'header';\n }\n\n return contentFirstChild;\n}\n", "// 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 customCssProps from '../../internal/generated/custom-css-properties';\nimport * as tokens from '../../internal/generated/styles/tokens';\nimport { getStickyOffsetVars } from '../utils/sticky-offsets';\nimport { useAppLayoutInternals } from './context';\n\nimport testutilStyles from '../test-classes/styles.css.js';\nimport styles from './styles.css.js';\n\nexport default function Main() {\n const {\n content,\n disableBodyScroll,\n disableContentPaddings,\n footerHeight,\n hasDrawerViewportOverlay,\n navigationOpen,\n placement,\n isMobile,\n isSplitPanelOpen,\n isToolsOpen,\n mainElement,\n notificationsHeight,\n stickyNotifications,\n offsetBottom,\n splitPanelDisplayed,\n splitPanelPosition,\n activeDrawerId,\n } = useAppLayoutInternals();\n\n const splitPanelHeight = offsetBottom - footerHeight;\n\n return (\n 0 ? `${tokens.spaceXs} + ${notificationsHeight}px` : '0px',\n `var(${customCssProps.mobileBarHeight})`,\n !!disableBodyScroll,\n isMobile\n ),\n }}\n >\n {content}\n \n );\n}\n", "// 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 { InternalButton } from '../../button/internal';\nimport { highContrastHeaderClassName } from '../../internal/utils/content-header-utils';\nimport { useAppLayoutInternals } from './context';\nimport { MobileTriggers as DrawersMobileTriggers } from './drawers';\n\nimport testutilStyles from '../test-classes/styles.css.js';\nimport styles from './styles.css.js';\n\nexport default function MobileToolbar() {\n const {\n ariaLabels,\n breadcrumbs,\n drawers,\n handleNavigationClick,\n handleToolsClick,\n hasDrawerViewportOverlay,\n isMobile,\n navigationOpen,\n __embeddedViewMode,\n isToolsOpen,\n navigationHide,\n navigationRefs,\n toolsHide,\n toolsRefs,\n headerVariant,\n } = useAppLayoutInternals();\n\n if (\n !isMobile ||\n __embeddedViewMode ||\n (navigationHide && !breadcrumbs && toolsHide && (!drawers || drawers.length === 0))\n ) {\n return null;\n }\n\n return (\n \n {!navigationHide && (\n \n handleNavigationClick(true)}\n variant=\"icon\"\n className={testutilStyles['navigation-toggle']}\n ref={navigationRefs.toggle}\n disabled={hasDrawerViewportOverlay}\n __nativeAttributes={{ 'aria-haspopup': navigationOpen ? undefined : true }}\n />\n \n )}\n\n {breadcrumbs && (\n
{breadcrumbs}
\n )}\n\n {drawers ? (\n \n ) : (\n !toolsHide && (\n \n handleToolsClick(true)}\n variant=\"icon\"\n ref={toolsRefs.toggle}\n __nativeAttributes={{ 'aria-haspopup': true }}\n />\n \n )\n )}\n \n );\n}\n", "// 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 { Transition } from '../../internal/components/transition';\nimport customCssProps from '../../internal/generated/custom-css-properties';\nimport { useAppLayoutInternals } from './context';\nimport TriggerButton from './trigger-button';\n\nimport testutilStyles from '../test-classes/styles.css.js';\nimport styles from './styles.css.js';\n\n/**\n * The Navigation component consists of the following elements:\n * the container, or root element, that sits as a direct child to the Layout grid definition;\n * the show navigation form that contains the trigger for the drawer in large viewports;\n * the navigation, or drawer, that contains the hide navigation form and the children\n * passed through the API;\n */\nexport default function Navigation() {\n const {\n ariaLabels,\n disableBodyScroll,\n handleNavigationClick,\n hasDrawerViewportOverlay,\n isMobile,\n navigationOpen,\n isToolsOpen,\n navigation,\n navigationHide,\n navigationRefs,\n navigationWidth,\n toolsHide,\n headerVariant,\n } = useAppLayoutInternals();\n\n if (navigationHide) {\n return null;\n }\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 handleNavigationClick(false);\n }\n };\n\n const isUnfocusable = hasDrawerViewportOverlay && (!navigationOpen || (isToolsOpen && !toolsHide));\n\n return (\n \n {(state, transitionEventsRef) => (\n \n {!isMobile && (\n \n handleNavigationClick(true)}\n ref={navigationRefs.toggle}\n highContrastHeader={headerVariant === 'high-contrast'}\n />\n \n )}\n\n {\n onNavigationClick && onNavigationClick(event);\n }}\n >\n
\n
\n handleNavigationClick(false)}\n variant=\"icon\"\n formAction=\"none\"\n className={testutilStyles['navigation-close']}\n ref={navigationRefs.close}\n />\n
\n {navigation}\n
\n \n \n )}\n \n );\n}\n", "// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React, { useEffect, useRef } from 'react';\nimport clsx from 'clsx';\n\nimport { useResizeObserver } from '@cloudscape-design/component-toolkit/internal';\n\nimport { highContrastHeaderClassName } from '../../internal/utils/content-header-utils';\nimport { useAppLayoutInternals } from './context';\n\nimport testutilStyles from '../test-classes/styles.css.js';\nimport styles from './styles.css.js';\n\nexport default function Notifications() {\n const { notifications } = useAppLayoutInternals();\n if (!notifications) {\n return null;\n }\n return ;\n}\n\nfunction NotificationsImplementation() {\n const {\n ariaLabels,\n hasDrawerViewportOverlay,\n notifications,\n setNotificationsHeight,\n stickyNotifications,\n headerVariant,\n hasNotificationsContent,\n } = useAppLayoutInternals();\n const ref = useRef(null);\n\n useResizeObserver(ref, entry => setNotificationsHeight(entry.contentBoxHeight));\n useEffect(() => {\n return () => {\n setNotificationsHeight(0);\n };\n // unmount effect only\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, []);\n\n /**\n * The notificationsElement ref is assigned to an inner div to prevent internal bottom margin\n * from affecting the calculated height, which is used for sticky elements below.\n */\n return (\n \n
{notifications}
\n \n );\n}\n", "// 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 { InternalButton } from '../../button/internal';\nimport { Transition } from '../../internal/components/transition';\nimport customCssProps from '../../internal/generated/custom-css-properties';\nimport { useAppLayoutInternals } from './context';\nimport TriggerButton from './trigger-button';\n\nimport splitPanelTestUtilStyles from '../../split-panel/test-classes/styles.css.js';\nimport testutilStyles from '../test-classes/styles.css.js';\nimport styles from './styles.css.js';\n\ninterface ToolsProps {\n children: React.ReactNode;\n}\n\n/**\n * The Tools component consists of the following elements:\n * the container, or root element, that sits as a direct child to the Layout grid definition;\n * the split panel, which exists only if there is a split panel in side position;\n * the tools, or drawer, that contains the hide tools form and the children passed through the API;\n * the show tools form that contains the triggers for both the drawer and the\n * split panel in large viewports;\n */\nexport default function Tools({ children }: ToolsProps) {\n const {\n ariaLabels,\n disableBodyScroll,\n drawers,\n handleSplitPanelClick,\n handleToolsClick,\n hasDrawerViewportOverlay,\n isMobile,\n isSplitPanelOpen,\n isToolsOpen,\n loseToolsFocus,\n splitPanel,\n splitPanelControlId,\n splitPanelDisplayed,\n splitPanelPosition,\n splitPanelRefs,\n splitPanelToggle,\n tools,\n toolsControlId,\n toolsHide,\n toolsRefs,\n toolsWidth,\n headerVariant,\n } = useAppLayoutInternals();\n\n const hasSplitPanel = !!splitPanel && splitPanelPosition === 'side';\n const hasToolsForm = getToolsFormStatus(\n hasSplitPanel && splitPanelDisplayed,\n isMobile,\n isSplitPanelOpen,\n isToolsOpen,\n toolsHide\n );\n const hasToolsFormPersistence = getToolsFormPersistence(hasSplitPanel, isSplitPanelOpen, isToolsOpen, toolsHide);\n const isUnfocusable = hasDrawerViewportOverlay && !isToolsOpen;\n\n /**\n * If the drawers property is defined the SplitPanel will be mounted and rendered\n * by the Drawers component.\n */\n if ((toolsHide && !hasSplitPanel) || drawers) {\n return null;\n }\n\n return (\n \n {(state, transitionEventsRef) => (\n {\n if (!e.relatedTarget || !e.currentTarget.contains(e.relatedTarget)) {\n loseToolsFocus();\n }\n }}\n >\n {children}\n\n {!toolsHide && (\n \n
\n
\n handleToolsClick(false)}\n variant=\"icon\"\n formAction=\"none\"\n className={testutilStyles['tools-close']}\n ref={toolsRefs.close}\n />\n
\n\n {tools}\n
\n \n )}\n\n {!isMobile && (\n \n {!toolsHide && (\n handleToolsClick(!isToolsOpen)}\n selected={hasSplitPanel && isToolsOpen}\n className={testutilStyles['tools-toggle']}\n ref={toolsRefs.toggle}\n highContrastHeader={headerVariant === 'high-contrast'}\n />\n )}\n\n {hasSplitPanel && splitPanelToggle.displayed && (\n handleSplitPanelClick()}\n selected={hasSplitPanel && isSplitPanelOpen}\n className={splitPanelTestUtilStyles['open-button']}\n ref={splitPanelRefs.toggle}\n highContrastHeader={headerVariant === 'high-contrast'}\n />\n )}\n \n )}\n \n )}\n \n );\n}\n\n/**\n * By default the Tools form is styled as display: none; This behavior should\n * be unchanged in mobile viewports where the Tools form is always suppressed.\n * In large viewports, however the Tools form and its corresponding buttons\n * should be present in the UI under the below circumstances.\n */\nfunction getToolsFormStatus(\n hasSplitPanel: boolean,\n isMobile: boolean,\n isSplitPanelOpen?: boolean,\n isToolsOpen?: boolean,\n toolsHide?: boolean\n) {\n let hasToolsForm = false;\n\n if (!isMobile) {\n // Both the Split Panel and Tools button are needed\n if (hasSplitPanel && !toolsHide) {\n hasToolsForm = true;\n }\n\n // The Split Panel button is needed\n if (hasSplitPanel && !isSplitPanelOpen && toolsHide) {\n hasToolsForm = true;\n }\n\n // The Tools button is needed\n if (!hasSplitPanel && !toolsHide && !isToolsOpen) {\n hasToolsForm = true;\n }\n }\n\n return hasToolsForm;\n}\n\n/**\n * Under two scenarios the Tools form that contains the triggers\n * for the Tools content and the Split Panel may be persistent\n * in the UI (as opposed to disappearing when one of the drawers\n * is open). This will also add a white background as opposed to the\n * default transparent background. The buttons will present and in a\n * selected / not selected state.\n */\nfunction getToolsFormPersistence(\n hasSplitPanel: boolean,\n isSplitPanelOpen?: boolean,\n isToolsOpen?: boolean,\n toolsHide?: boolean\n) {\n let hasToolsFormPersistence = false;\n\n // Both Tools and Split Panel exist and one or both is open\n if (hasSplitPanel && !toolsHide && (isSplitPanelOpen || isToolsOpen)) {\n hasToolsFormPersistence = true;\n }\n\n return hasToolsFormPersistence;\n}\n", "// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React, { useEffect, useImperativeHandle, useLayoutEffect, useRef, useState } from 'react';\n\nimport { useStableCallback } from '@cloudscape-design/component-toolkit/internal';\n\nimport ScreenreaderOnly from '../../internal/components/screenreader-only';\nimport { SplitPanelSideToggleProps } from '../../internal/context/split-panel-context';\nimport { fireNonCancelableEvent } from '../../internal/events';\nimport { useControllable } from '../../internal/hooks/use-controllable';\nimport { useIntersectionObserver } from '../../internal/hooks/use-intersection-observer';\nimport { useMergeRefs } from '../../internal/hooks/use-merge-refs';\nimport { useMobile } from '../../internal/hooks/use-mobile';\nimport { useUniqueId } from '../../internal/hooks/use-unique-id';\nimport { useGetGlobalBreadcrumbs } from '../../internal/plugins/helpers/use-global-breadcrumbs';\nimport globalVars from '../../internal/styles/global-vars';\nimport { getSplitPanelDefaultSize } from '../../split-panel/utils/size-utils';\nimport { AppLayoutProps, AppLayoutPropsWithDefaults } from '../interfaces';\nimport { SplitPanelProviderProps } from '../split-panel';\nimport { MIN_DRAWER_SIZE, OnChangeParams, useDrawers } from '../utils/use-drawers';\nimport { useFocusControl, useMultipleFocusControl } from '../utils/use-focus-control';\nimport { useSplitPanelFocusControl } from '../utils/use-split-panel-focus-control';\nimport { ActiveDrawersContext } from '../utils/visibility-context';\nimport { computeHorizontalLayout, computeVerticalLayout, CONTENT_PADDING } from './compute-layout';\nimport { AppLayoutVisibilityContext } from './contexts';\nimport { AppLayoutInternals } from './interfaces';\nimport {\n AppLayoutDrawer,\n AppLayoutGlobalDrawers,\n AppLayoutNavigation,\n AppLayoutNotifications,\n AppLayoutSplitPanelBottom,\n AppLayoutSplitPanelSide,\n AppLayoutToolbar,\n} from './internal';\nimport { useMultiAppLayout } from './multi-layout';\nimport { SkeletonLayout } from './skeleton';\n\nconst AppLayoutVisualRefreshToolbar = React.forwardRef(\n (\n {\n ariaLabels,\n contentHeader,\n content,\n navigationOpen,\n navigationWidth,\n navigation,\n navigationHide,\n onNavigationChange,\n tools,\n toolsOpen: controlledToolsOpen,\n onToolsChange,\n toolsHide,\n toolsWidth,\n contentType,\n headerVariant,\n breadcrumbs,\n notifications,\n stickyNotifications,\n splitPanelPreferences: controlledSplitPanelPreferences,\n splitPanelOpen: controlledSplitPanelOpen,\n splitPanel,\n splitPanelSize: controlledSplitPanelSize,\n onSplitPanelToggle,\n onSplitPanelResize,\n onSplitPanelPreferencesChange,\n disableContentPaddings,\n minContentWidth,\n maxContentWidth,\n placement,\n ...rest\n },\n forwardRef\n ) => {\n const isMobile = useMobile();\n const { __embeddedViewMode: embeddedViewMode, __forceDeduplicationType: forceDeduplicationType } = rest as any;\n const splitPanelControlId = useUniqueId('split-panel');\n const [toolbarState, setToolbarState] = useState<'show' | 'hide'>('show');\n const [toolbarHeight, setToolbarHeight] = useState(0);\n const [notificationsHeight, setNotificationsHeight] = useState(0);\n const [navigationAnimationDisabled, setNavigationAnimationDisabled] = useState(true);\n const [splitPanelAnimationDisabled, setSplitPanelAnimationDisabled] = useState(true);\n const [isNested, setIsNested] = useState(false);\n const rootRef = useRef(null);\n\n const [toolsOpen = false, setToolsOpen] = useControllable(controlledToolsOpen, onToolsChange, false, {\n componentName: 'AppLayout',\n controlledProp: 'toolsOpen',\n changeHandler: 'onToolsChange',\n });\n const onToolsToggle = (open: boolean) => {\n setToolsOpen(open);\n drawersFocusControl.setFocus();\n fireNonCancelableEvent(onToolsChange, { open });\n };\n\n const onGlobalDrawerFocus = (drawerId: string, open: boolean) => {\n globalDrawersFocusControl.setFocus({ force: true, drawerId, open });\n };\n\n const onAddNewActiveDrawer = (drawerId: string) => {\n // If a local drawer is already open, and we attempt to open a new one,\n // it will replace the existing one instead of opening an additional drawer,\n // since only one local drawer is supported. Therefore, layout calculations are not necessary.\n if (activeDrawer && drawers?.find(drawer => drawer.id === drawerId)) {\n return;\n }\n // get the size of drawerId. it could be either local or global drawer\n const combinedDrawers = [...(drawers || []), ...globalDrawers];\n const newDrawer = combinedDrawers.find(drawer => drawer.id === drawerId);\n if (!newDrawer) {\n return;\n }\n const newDrawerSize = Math.min(\n newDrawer.defaultSize ?? drawerSizes[drawerId] ?? MIN_DRAWER_SIZE,\n MIN_DRAWER_SIZE\n );\n // check if the active drawers could be resized to fit the new drawers\n // to do this, we need to take all active drawers, sum up their min sizes, truncate it from resizableSpaceAvailable\n // and compare a given number with the new drawer id min size\n\n // the total size of all global drawers resized to their min size\n const availableSpaceForNewDrawer = resizableSpaceAvailable - totalActiveDrawersMinSize;\n if (availableSpaceForNewDrawer >= newDrawerSize) {\n return;\n }\n\n // now we made sure we cannot accommodate the new drawer with existing ones\n closeFirstDrawer();\n };\n\n const {\n drawers,\n activeDrawer,\n minDrawerSize,\n minGlobalDrawersSizes,\n activeDrawerSize,\n ariaLabelsWithDrawers,\n globalDrawers,\n activeGlobalDrawers,\n activeGlobalDrawersIds,\n activeGlobalDrawersSizes,\n drawerSizes,\n drawersOpenQueue,\n onActiveDrawerChange,\n onActiveDrawerResize,\n onActiveGlobalDrawersChange,\n } = useDrawers({ ...rest, onGlobalDrawerFocus, onAddNewActiveDrawer }, ariaLabels, {\n ariaLabels,\n toolsHide,\n toolsOpen,\n tools,\n toolsWidth,\n onToolsToggle,\n });\n\n const onActiveDrawerChangeHandler = (\n drawerId: string | null,\n params: OnChangeParams = { initiatedByUserAction: true }\n ) => {\n onActiveDrawerChange(drawerId, params);\n drawersFocusControl.setFocus();\n };\n\n const [splitPanelOpen = false, setSplitPanelOpen] = useControllable(\n controlledSplitPanelOpen,\n onSplitPanelToggle,\n false,\n {\n componentName: 'AppLayout',\n controlledProp: 'splitPanelOpen',\n changeHandler: 'onSplitPanelToggle',\n }\n );\n\n const onSplitPanelToggleHandler = () => {\n setSplitPanelAnimationDisabled(false);\n setSplitPanelOpen(!splitPanelOpen);\n splitPanelFocusControl.setLastInteraction({ type: splitPanelOpen ? 'close' : 'open' });\n fireNonCancelableEvent(onSplitPanelToggle, { open: !splitPanelOpen });\n };\n\n const [splitPanelPreferences, setSplitPanelPreferences] = useControllable(\n controlledSplitPanelPreferences,\n onSplitPanelPreferencesChange,\n undefined,\n {\n componentName: 'AppLayout',\n controlledProp: 'splitPanelPreferences',\n changeHandler: 'onSplitPanelPreferencesChange',\n }\n );\n\n const onSplitPanelPreferencesChangeHandler = (detail: AppLayoutProps.SplitPanelPreferences) => {\n setSplitPanelPreferences(detail);\n splitPanelFocusControl.setLastInteraction({ type: 'position' });\n fireNonCancelableEvent(onSplitPanelPreferencesChange, detail);\n };\n\n const [splitPanelSize = 0, setSplitPanelSize] = useControllable(\n controlledSplitPanelSize,\n onSplitPanelResize,\n getSplitPanelDefaultSize(splitPanelPreferences?.position ?? 'bottom'),\n { componentName: 'AppLayout', controlledProp: 'splitPanelSize', changeHandler: 'onSplitPanelResize' }\n );\n\n const [splitPanelReportedSize, setSplitPanelReportedSize] = useState(0);\n const [splitPanelHeaderBlockSize, setSplitPanelHeaderBlockSize] = useState(0);\n\n const onSplitPanelResizeHandler = (size: number) => {\n setSplitPanelSize(size);\n fireNonCancelableEvent(onSplitPanelResize, { size });\n };\n\n const [splitPanelToggleConfig, setSplitPanelToggleConfig] = useState({\n ariaLabel: undefined,\n displayed: false,\n });\n\n const globalDrawersFocusControl = useMultipleFocusControl(true, activeGlobalDrawersIds);\n const drawersFocusControl = useFocusControl(!!activeDrawer?.id, true, activeDrawer?.id);\n const navigationFocusControl = useFocusControl(navigationOpen);\n const splitPanelFocusControl = useSplitPanelFocusControl([splitPanelPreferences, splitPanelOpen]);\n\n const onNavigationToggle = useStableCallback((open: boolean) => {\n setNavigationAnimationDisabled(false);\n navigationFocusControl.setFocus();\n fireNonCancelableEvent(onNavigationChange, { open });\n });\n\n useImperativeHandle(forwardRef, () => ({\n closeNavigationIfNecessary: () => isMobile && onNavigationToggle(false),\n openTools: () => onToolsToggle(true),\n focusToolsClose: () => drawersFocusControl.setFocus(true),\n focusActiveDrawer: () => drawersFocusControl.setFocus(true),\n focusSplitPanel: () => splitPanelFocusControl.refs.slider.current?.focus(),\n }));\n\n const resolvedStickyNotifications = !!stickyNotifications && !isMobile;\n //navigation must be null if hidden so toolbar knows to hide the toggle button\n const resolvedNavigation = navigationHide ? null : navigation || <>;\n //navigation must not be open if navigationHide is true\n const resolvedNavigationOpen = !!resolvedNavigation && navigationOpen;\n const {\n maxDrawerSize,\n maxSplitPanelSize,\n splitPanelForcedPosition,\n splitPanelPosition,\n maxGlobalDrawersSizes,\n resizableSpaceAvailable,\n } = computeHorizontalLayout({\n activeDrawerSize: activeDrawer ? activeDrawerSize : 0,\n splitPanelSize,\n minContentWidth,\n navigationOpen: resolvedNavigationOpen,\n navigationWidth,\n placement,\n splitPanelOpen,\n splitPanelPosition: splitPanelPreferences?.position,\n isMobile,\n activeGlobalDrawersSizes,\n });\n\n const { ref: intersectionObserverRef, isIntersecting } = useIntersectionObserver({ initialState: true });\n const { registered, toolbarProps } = useMultiAppLayout(\n {\n forceDeduplicationType,\n ariaLabels: ariaLabelsWithDrawers,\n navigation: resolvedNavigation,\n navigationOpen: resolvedNavigationOpen,\n onNavigationToggle,\n navigationFocusRef: navigationFocusControl.refs.toggle,\n breadcrumbs,\n activeDrawerId: activeDrawer?.id ?? null,\n // only pass it down if there are non-empty drawers or tools\n drawers: drawers?.length || !toolsHide ? drawers : undefined,\n globalDrawersFocusControl,\n globalDrawers: globalDrawers?.length ? globalDrawers : undefined,\n activeGlobalDrawersIds,\n onActiveGlobalDrawersChange,\n onActiveDrawerChange: onActiveDrawerChangeHandler,\n drawersFocusRef: drawersFocusControl.refs.toggle,\n splitPanel,\n splitPanelToggleProps: {\n ...splitPanelToggleConfig,\n active: splitPanelOpen,\n controlId: splitPanelControlId,\n position: splitPanelPosition,\n },\n splitPanelFocusRef: splitPanelFocusControl.refs.toggle,\n onSplitPanelToggle: onSplitPanelToggleHandler,\n },\n isIntersecting\n );\n\n const hasToolbar = !embeddedViewMode && !!toolbarProps;\n const discoveredBreadcrumbs = useGetGlobalBreadcrumbs(hasToolbar && !breadcrumbs);\n\n const verticalOffsets = computeVerticalLayout({\n topOffset: placement.insetBlockStart,\n hasVisibleToolbar: hasToolbar && toolbarState !== 'hide',\n notificationsHeight: notificationsHeight ?? 0,\n toolbarHeight: toolbarHeight ?? 0,\n stickyNotifications: resolvedStickyNotifications,\n });\n\n const appLayoutInternals: AppLayoutInternals = {\n ariaLabels: ariaLabelsWithDrawers,\n headerVariant,\n isMobile,\n breadcrumbs,\n discoveredBreadcrumbs,\n stickyNotifications: resolvedStickyNotifications,\n navigationOpen: resolvedNavigationOpen,\n navigation: resolvedNavigation,\n navigationFocusControl,\n activeDrawer,\n activeDrawerSize,\n minDrawerSize,\n maxDrawerSize,\n minGlobalDrawersSizes,\n maxGlobalDrawersSizes,\n drawers: drawers!,\n globalDrawers,\n activeGlobalDrawers,\n activeGlobalDrawersIds,\n activeGlobalDrawersSizes,\n onActiveGlobalDrawersChange,\n drawersFocusControl,\n globalDrawersFocusControl,\n splitPanelPosition,\n splitPanelToggleConfig,\n splitPanelOpen,\n splitPanelControlId,\n splitPanelFocusControl,\n placement,\n toolbarState,\n setToolbarState,\n verticalOffsets,\n drawersOpenQueue,\n setToolbarHeight,\n setNotificationsHeight,\n onSplitPanelToggle: onSplitPanelToggleHandler,\n onNavigationToggle,\n onActiveDrawerChange: onActiveDrawerChangeHandler,\n onActiveDrawerResize,\n splitPanelAnimationDisabled,\n };\n\n const splitPanelInternals: SplitPanelProviderProps = {\n bottomOffset: 0,\n getMaxHeight: () => {\n const availableHeight =\n document.documentElement.clientHeight - placement.insetBlockStart - placement.insetBlockEnd;\n // If the page is likely zoomed in at 200%, allow the split panel to fill the content area.\n return availableHeight < 400 ? availableHeight - 40 : availableHeight - 250;\n },\n maxWidth: maxSplitPanelSize,\n isForcedPosition: splitPanelForcedPosition,\n isOpen: splitPanelOpen,\n leftOffset: 0,\n onPreferencesChange: onSplitPanelPreferencesChangeHandler,\n onResize: onSplitPanelResizeHandler,\n onToggle: onSplitPanelToggleHandler,\n position: splitPanelPosition,\n reportSize: size => setSplitPanelReportedSize(size),\n reportHeaderHeight: size => setSplitPanelHeaderBlockSize(size),\n headerHeight: splitPanelHeaderBlockSize,\n rightOffset: 0,\n size: splitPanelSize,\n topOffset: 0,\n setSplitPanelToggle: setSplitPanelToggleConfig,\n refs: splitPanelFocusControl.refs,\n };\n\n const closeFirstDrawer = useStableCallback(() => {\n const drawerToClose = drawersOpenQueue[drawersOpenQueue.length - 1];\n if (activeDrawer && activeDrawer?.id === drawerToClose) {\n onActiveDrawerChange(null, { initiatedByUserAction: true });\n } else if (activeGlobalDrawersIds.includes(drawerToClose)) {\n onActiveGlobalDrawersChange(drawerToClose, { initiatedByUserAction: true });\n }\n });\n\n useEffect(() => {\n // Close navigation drawer on mobile so that the main content is visible\n if (isMobile) {\n onNavigationToggle(false);\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [isMobile]);\n\n const getTotalActiveDrawersMinSize = () => {\n const combinedDrawers = [...(drawers || []), ...globalDrawers];\n let result = activeGlobalDrawersIds\n .map(activeDrawerId =>\n Math.min(\n combinedDrawers.find(drawer => drawer.id === activeDrawerId)?.defaultSize ?? MIN_DRAWER_SIZE,\n MIN_DRAWER_SIZE\n )\n )\n .reduce((acc, curr) => acc + curr, 0);\n if (activeDrawer) {\n result += Math.min(activeDrawer?.defaultSize ?? MIN_DRAWER_SIZE, MIN_DRAWER_SIZE);\n }\n\n return result;\n };\n\n const totalActiveDrawersMinSize = getTotalActiveDrawersMinSize();\n\n useEffect(() => {\n if (isMobile) {\n return;\n }\n\n const activeNavigationWidth = !navigationHide && navigationOpen ? navigationWidth : 0;\n const scrollWidth = activeNavigationWidth + CONTENT_PADDING + totalActiveDrawersMinSize;\n const hasHorizontalScroll = scrollWidth > placement.inlineSize;\n if (hasHorizontalScroll) {\n if (!navigationHide && navigationOpen) {\n onNavigationToggle(false);\n return;\n }\n\n closeFirstDrawer();\n }\n }, [\n totalActiveDrawersMinSize,\n closeFirstDrawer,\n isMobile,\n navigationHide,\n navigationOpen,\n navigationWidth,\n onNavigationToggle,\n placement.inlineSize,\n ]);\n\n /**\n * Returns true if the AppLayout is nested\n * Does not apply to iframe\n */\n const getIsNestedInAppLayout = (element: HTMLElement | null): boolean => {\n let currentElement: Element | null = element?.parentElement ?? null;\n\n // this traverse is needed only for JSDOM\n // in real browsers the globalVar will be propagated to all descendants and this loops exits after initial iteration\n while (currentElement) {\n if (getComputedStyle(currentElement).getPropertyValue(globalVars.stickyVerticalTopOffset)) {\n return true;\n }\n currentElement = currentElement.parentElement;\n }\n\n return false;\n };\n\n useLayoutEffect(() => {\n if (!hasToolbar) {\n setIsNested(getIsNestedInAppLayout(rootRef.current));\n }\n }, [hasToolbar]);\n\n return (\n \n {/* Rendering a hidden copy of breadcrumbs to trigger their deduplication */}\n {!hasToolbar && breadcrumbs ? {breadcrumbs} : null}\n \n }\n notifications={\n notifications && (\n {notifications}\n )\n }\n headerVariant={headerVariant}\n contentHeader={contentHeader}\n // delay rendering the content until registration of this instance is complete\n content={registered ? content : null}\n navigation={resolvedNavigation && }\n navigationOpen={resolvedNavigationOpen}\n navigationWidth={navigationWidth}\n navigationAnimationDisabled={navigationAnimationDisabled}\n tools={drawers && drawers.length > 0 && }\n globalTools={\n \n \n \n }\n globalToolsOpen={!!activeGlobalDrawersIds.length}\n toolsOpen={!!activeDrawer}\n toolsWidth={activeDrawerSize}\n sideSplitPanel={\n splitPanelPosition === 'side' && (\n \n {splitPanel}\n \n )\n }\n bottomSplitPanel={\n splitPanelPosition === 'bottom' && (\n \n {splitPanel}\n \n )\n }\n splitPanelOpen={splitPanelOpen}\n placement={placement}\n contentType={contentType}\n maxContentWidth={maxContentWidth}\n disableContentPaddings={disableContentPaddings}\n />\n \n );\n }\n);\n\nexport default AppLayoutVisualRefreshToolbar;\n", "// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport React from 'react';\nimport clsx from 'clsx';\n\nimport styles from './styles.css.js';\n\ninterface ScreenreaderOnlyProps {\n id?: string;\n className?: string;\n children?: React.ReactNode;\n}\n\n/**\n * Makes content now shown on a screen but still announced by screen-reader users.\n * The component is suitable when the aria-label cannot be used, e.g. to avoid elemnts being announced as \"blank\".\n *\n * To exclude screenreader-only content use `:not(.${screenreaderOnlyStyles.root})` selector, for example:\n *\n * ```\n * import screenreaderOnlyStyles from '~internal/components/screenreader-only/styles.css.js'\n *\n * let visibleContent = wrapper.find(`${styles.label}`).find(`:not(.${screenreaderOnlyStyles.root})`).getElement().textContent\n *\n * let screenreaderContent = wrapper.find(`${styles.label}`).find(`.${screenreaderOnlyStyles.root}`).getElement().textContent\n * ```\n */\nexport default function ScreenreaderOnly(props: ScreenreaderOnlyProps) {\n return ;\n}\n", "\n import './styles.scoped.css';\n export default {\n \"root\": \"awsui_root_xttbq_1rjuy_145\"\n};\n ", "// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport { RefCallback, useCallback, useRef, useState } from 'react';\n\ninterface UseIntersectionObserverConfig {\n initialState?: boolean;\n}\n\n/**\n * A hook that uses an Intersection Observer on the target element ref\n * and detects if the element is intersecting with its parent.\n */\nexport function useIntersectionObserver({\n initialState = false,\n}: UseIntersectionObserverConfig = {}) {\n const observerRef = useRef(null);\n const [isIntersecting, setIsIntersecting] = useState(initialState);\n\n const ref = useCallback>(targetElement => {\n if (typeof IntersectionObserver === 'undefined') {\n // Do nothing in environments like JSDOM\n return;\n }\n\n if (observerRef.current) {\n // Dismiss previous observer because the target changed\n observerRef.current.disconnect();\n }\n\n // Create a new observer with the target element\n if (targetElement) {\n observerRef.current = new IntersectionObserver(([entry]) => setIsIntersecting(entry.isIntersecting));\n observerRef.current.observe(targetElement);\n }\n }, []);\n\n return { ref, isIntersecting };\n}\n", "// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport { useContext, useEffect, useLayoutEffect, useRef, useState } from 'react';\n\nimport { useAppLayoutToolbarEnabled } from '../../../app-layout/utils/feature-flags';\nimport {\n AppLayoutVisibilityContext,\n BreadcrumbsSlotContext,\n} from '../../../app-layout/visual-refresh-toolbar/contexts';\nimport { BreadcrumbGroupProps } from '../../../breadcrumb-group/interfaces';\nimport { awsuiPluginsInternal } from '../api';\nimport { BreadcrumbsGlobalRegistration } from '../controllers/breadcrumbs';\n\nfunction useSetGlobalBreadcrumbsImplementation({\n __disableGlobalization,\n ...props\n}: BreadcrumbGroupProps & { __disableGlobalization?: boolean }) {\n const { isInToolbar } = useContext(BreadcrumbsSlotContext) ?? {};\n const isLayoutVisible = useContext(AppLayoutVisibilityContext) ?? true;\n const registrationRef = useRef | null>();\n const [registered, setRegistered] = useState(false);\n\n useEffect(() => {\n if (isInToolbar || __disableGlobalization || !isLayoutVisible) {\n return;\n }\n const registration = awsuiPluginsInternal.breadcrumbs.registerBreadcrumbs(props, isRegistered =>\n setRegistered(isRegistered ?? true)\n );\n registrationRef.current = registration;\n\n return () => {\n registration.cleanup();\n };\n // subsequent prop changes are handled by another effect\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [isInToolbar, __disableGlobalization, isLayoutVisible]);\n\n useLayoutEffect(() => {\n registrationRef.current?.update(props);\n });\n\n return registered;\n}\n\nexport function useSetGlobalBreadcrumbs(props: BreadcrumbGroupProps) {\n // avoid additional side effects when this feature is not active\n if (!useAppLayoutToolbarEnabled()) {\n return false;\n }\n // getGlobalFlag() value does not change without full page reload\n // eslint-disable-next-line react-hooks/rules-of-hooks\n return useSetGlobalBreadcrumbsImplementation(props);\n}\n\nexport function useGetGlobalBreadcrumbs(enabled: boolean) {\n const [discoveredBreadcrumbs, setDiscoveredBreadcrumbs] = useState | null>(null);\n\n useEffect(() => {\n if (!enabled) {\n return;\n }\n return awsuiPluginsInternal.breadcrumbs.registerAppLayout(breadcrumbs => {\n setDiscoveredBreadcrumbs(breadcrumbs);\n });\n }, [enabled]);\n\n return discoveredBreadcrumbs;\n}\n", "// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React from 'react';\n\nimport { awsuiPluginsInternal } from '../../internal/plugins/api';\n\ninterface BreadcrumbsSlotContextType {\n isInToolbar: boolean;\n}\n\nexport const BreadcrumbsSlotContext =\n awsuiPluginsInternal.sharedReactContexts.createContext(React, 'BreadcrumbsSlotContext');\n\nexport const AppLayoutVisibilityContext = awsuiPluginsInternal.sharedReactContexts.createContext(\n React,\n 'AppLayoutVisibilityContext'\n);\n", "// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport { AppLayoutPropsWithDefaults } from '../interfaces';\nimport { shouldSplitPanelBeForcedToBottom } from '../split-panel/split-panel-forced-position';\n\ninterface HorizontalLayoutInput {\n navigationOpen: boolean;\n navigationWidth: number;\n placement: AppLayoutPropsWithDefaults['placement'];\n minContentWidth: number;\n activeDrawerSize: number;\n splitPanelOpen: boolean;\n splitPanelPosition: 'side' | 'bottom' | undefined;\n splitPanelSize: number;\n isMobile: boolean;\n activeGlobalDrawersSizes: Record;\n}\n\nexport const CONTENT_PADDING = 2 * 24; // space-xl\n\nexport function computeHorizontalLayout({\n navigationOpen,\n navigationWidth,\n placement,\n minContentWidth,\n activeDrawerSize,\n splitPanelOpen,\n splitPanelPosition,\n splitPanelSize,\n isMobile,\n activeGlobalDrawersSizes,\n}: HorizontalLayoutInput) {\n const activeNavigationWidth = navigationOpen ? navigationWidth : 0;\n\n let resizableSpaceAvailable = Math.max(\n 0,\n placement.inlineSize - minContentWidth - CONTENT_PADDING - activeNavigationWidth\n );\n const totalActiveGlobalDrawersSize = Object.values(activeGlobalDrawersSizes).reduce((acc, size) => acc + size, 0);\n\n const availableWidthForSplitPanel = resizableSpaceAvailable - activeDrawerSize;\n const splitPanelForcedPosition = shouldSplitPanelBeForcedToBottom({\n isMobile,\n availableWidthForSplitPanel,\n });\n const resolvedSplitPanelPosition = splitPanelForcedPosition ? 'bottom' : splitPanelPosition ?? 'bottom';\n const sideSplitPanelSize = resolvedSplitPanelPosition === 'side' && splitPanelOpen ? splitPanelSize ?? 0 : 0;\n const maxSplitPanelSize = Math.max(resizableSpaceAvailable - totalActiveGlobalDrawersSize - activeDrawerSize, 0);\n resizableSpaceAvailable -= sideSplitPanelSize;\n const maxDrawerSize = resizableSpaceAvailable - totalActiveGlobalDrawersSize;\n const maxGlobalDrawersSizes: Record = Object.keys(activeGlobalDrawersSizes).reduce(\n (acc, drawerId) => {\n return {\n ...acc,\n [drawerId]:\n resizableSpaceAvailable -\n activeDrawerSize -\n totalActiveGlobalDrawersSize +\n activeGlobalDrawersSizes[drawerId],\n };\n },\n {}\n );\n\n return {\n splitPanelPosition: resolvedSplitPanelPosition,\n splitPanelForcedPosition,\n sideSplitPanelSize,\n maxSplitPanelSize,\n maxDrawerSize,\n maxGlobalDrawersSizes,\n totalActiveGlobalDrawersSize,\n resizableSpaceAvailable,\n };\n}\n\ninterface VerticalLayoutInput {\n topOffset: number;\n hasVisibleToolbar: boolean;\n toolbarHeight: number;\n stickyNotifications: boolean;\n notificationsHeight: number;\n}\n\nexport interface VerticalLayoutOutput {\n toolbar: number;\n notifications: number;\n header: number;\n drawers: number;\n}\n\nexport function computeVerticalLayout({\n topOffset,\n hasVisibleToolbar,\n toolbarHeight,\n stickyNotifications,\n notificationsHeight,\n}: VerticalLayoutInput): VerticalLayoutOutput {\n const toolbar = topOffset;\n let notifications = topOffset;\n let drawers = topOffset;\n\n if (hasVisibleToolbar) {\n notifications += toolbarHeight;\n drawers += toolbarHeight;\n }\n let header = notifications;\n if (stickyNotifications) {\n header += notificationsHeight;\n }\n\n return { toolbar, notifications, header, drawers };\n}\n\nexport function getDrawerStyles(\n verticalOffsets: VerticalLayoutOutput,\n isMobile: boolean,\n placement: AppLayoutPropsWithDefaults['placement']\n): {\n drawerTopOffset: number;\n drawerHeight: string;\n} {\n const drawerTopOffset = isMobile ? verticalOffsets.toolbar : verticalOffsets.drawers ?? placement.insetBlockStart;\n const drawerHeight = `calc(100vh - ${drawerTopOffset}px - ${placement.insetBlockEnd}px)`;\n return { drawerTopOffset, drawerHeight };\n}\n", "// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React, { useRef } from 'react';\nimport { Transition } from 'react-transition-group';\nimport clsx from 'clsx';\n\nimport { InternalButton } from '../../../button/internal';\nimport PanelResizeHandle from '../../../internal/components/panel-resize-handle';\nimport customCssProps from '../../../internal/generated/custom-css-properties';\nimport { createWidgetizedComponent } from '../../../internal/widgets';\nimport { getLimitedValue } from '../../../split-panel/utils/size-utils';\nimport { TOOLS_DRAWER_ID } from '../../utils/use-drawers';\nimport { getDrawerStyles } from '../compute-layout';\nimport { AppLayoutInternals } from '../interfaces';\nimport { useResize } from './use-resize';\n\nimport sharedStyles from '../../resize/styles.css.js';\nimport testutilStyles from '../../test-classes/styles.css.js';\nimport styles from './styles.css.js';\n\ninterface AppLayoutDrawerImplementationProps {\n appLayoutInternals: AppLayoutInternals;\n}\n\nexport function AppLayoutDrawerImplementation({ appLayoutInternals }: AppLayoutDrawerImplementationProps) {\n const {\n activeDrawer,\n minDrawerSize,\n activeDrawerSize,\n maxDrawerSize,\n ariaLabels,\n drawers,\n drawersFocusControl,\n isMobile,\n placement,\n verticalOffsets,\n drawersOpenQueue,\n onActiveDrawerChange,\n onActiveDrawerResize,\n } = appLayoutInternals;\n const drawerRef = useRef(null);\n const activeDrawerId = activeDrawer?.id;\n\n const computedAriaLabels = {\n closeButton: activeDrawer ? activeDrawer.ariaLabels?.closeButton : ariaLabels?.toolsClose,\n content: activeDrawer ? activeDrawer.ariaLabels?.drawerName : ariaLabels?.tools,\n };\n\n const { drawerTopOffset, drawerHeight } = getDrawerStyles(verticalOffsets, isMobile, placement);\n const toolsOnlyMode = drawers.length === 1 && drawers[0].id === TOOLS_DRAWER_ID;\n const isToolsDrawer = activeDrawer?.id === TOOLS_DRAWER_ID || toolsOnlyMode;\n const toolsContent = drawers?.find(drawer => drawer.id === TOOLS_DRAWER_ID)?.content;\n const resizeProps = useResize({\n currentWidth: activeDrawerSize,\n minWidth: minDrawerSize,\n maxWidth: maxDrawerSize,\n panelRef: drawerRef,\n handleRef: drawersFocusControl.refs.slider,\n onResize: size => onActiveDrawerResize({ id: activeDrawerId!, size }),\n });\n // temporary handle a situation when app-layout is old, but this component come as a widget\n const isLegacyDrawer = drawersOpenQueue === undefined;\n const size = getLimitedValue(minDrawerSize, activeDrawerSize, maxDrawerSize);\n const lastOpenedDrawerId = drawersOpenQueue?.length ? drawersOpenQueue[0] : activeDrawerId;\n const animationDisabled = activeDrawer?.defaultActive && !drawersOpenQueue.includes(activeDrawer.id);\n\n return (\n \n {state => (\n {\n if (!e.relatedTarget || !e.currentTarget.contains(e.relatedTarget)) {\n drawersFocusControl.loseFocus();\n }\n }}\n style={{\n blockSize: drawerHeight,\n insetBlockStart: drawerTopOffset,\n ...(!isMobile &&\n !isLegacyDrawer && {\n [customCssProps.drawerSize]: `${['entering', 'entered'].includes(state) ? size : 0}px`,\n }),\n }}\n data-testid={activeDrawerId && `awsui-app-layout-drawer-${activeDrawerId}`}\n >\n {!isMobile && activeDrawer?.resizable && (\n
\n \n
\n )}\n
\n
\n onActiveDrawerChange(null, { initiatedByUserAction: true })}\n ref={drawersFocusControl.refs.close}\n variant=\"icon\"\n />\n
\n \n {toolsContent}\n
\n {activeDrawerId !== TOOLS_DRAWER_ID && (\n
\n {activeDrawer?.content}\n
\n )}\n \n \n )}\n \n );\n}\n\nexport const createWidgetizedAppLayoutDrawer = createWidgetizedComponent(AppLayoutDrawerImplementation);\n", "// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React from 'react';\n\nimport { getGlobalFlag } from '@cloudscape-design/component-toolkit/internal';\n\nimport { useVisualRefresh } from '../hooks/use-visual-mode';\n\n// Built-in React.FunctionComponent has always present `children` property which is not desired\nexport type FunctionComponent = (props: Props) => JSX.Element;\ntype PropsType> =\n Component extends FunctionComponent ? Props : never;\n\nexport function createWidgetizedComponent>(\n Implementation: Component,\n Skeleton?: React.ForwardRefExoticComponent & React.RefAttributes>\n) {\n return (Loader?: Component): Component => {\n return (props => {\n const isRefresh = useVisualRefresh();\n if (isRefresh && getGlobalFlag('appLayoutWidget') && Loader) {\n return ;\n }\n\n return ;\n }) as Component;\n };\n}\n", "// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React from 'react';\n\nimport { getLimitedValue } from '../../../split-panel/utils/size-utils';\nimport { SizeControlProps } from '../../utils/interfaces';\nimport { useKeyboardEvents } from '../../utils/use-keyboard-events';\nimport { usePointerEvents } from '../../utils/use-pointer-events';\n\ninterface ResizeProps {\n currentWidth: number;\n minWidth: number;\n maxWidth: number;\n panelRef: React.RefObject;\n handleRef: React.RefObject;\n onResize: (newWidth: number) => void;\n}\n\nexport function useResize({ currentWidth, minWidth, maxWidth, panelRef, handleRef, onResize }: ResizeProps) {\n const onResizeHandler = (newWidth: number) => {\n const size = getLimitedValue(minWidth, newWidth, maxWidth);\n\n if (maxWidth >= minWidth) {\n onResize(size);\n }\n };\n\n const sizeControlProps: SizeControlProps = {\n position: 'side',\n panelRef,\n handleRef,\n onResize: onResizeHandler,\n };\n\n const clampedWidth = getLimitedValue(minWidth, currentWidth, maxWidth);\n const relativeSize = ((clampedWidth - minWidth) / (maxWidth - minWidth)) * 100;\n\n const onPointerDown = usePointerEvents(sizeControlProps);\n const onKeyDown = useKeyboardEvents(sizeControlProps);\n\n return { onKeyDown, onPointerDown, relativeSize };\n}\n", "\n import './styles.scoped.css';\n export default {\n \"drawer\": \"awsui_drawer_12i0j_6o9m9_189\",\n \"legacy\": \"awsui_legacy_12i0j_6o9m9_204\",\n \"last-opened\": \"awsui_last-opened_12i0j_6o9m9_212\",\n \"drawer-global\": \"awsui_drawer-global_12i0j_6o9m9_217\",\n \"drawer-hidden\": \"awsui_drawer-hidden_12i0j_6o9m9_221\",\n \"drawer-content-container\": \"awsui_drawer-content-container_12i0j_6o9m9_224\",\n \"drawer-close-button\": \"awsui_drawer-close-button_12i0j_6o9m9_232\",\n \"drawer-content\": \"awsui_drawer-content_12i0j_6o9m9_224\",\n \"drawer-content-hidden\": \"awsui_drawer-content-hidden_12i0j_6o9m9_242\",\n \"drawer-slider\": \"awsui_drawer-slider_12i0j_6o9m9_245\"\n};\n ", "// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React, { useRef } from 'react';\n\nimport { createWidgetizedComponent } from '../../../internal/widgets';\nimport { AppLayoutInternals } from '../interfaces';\nimport AppLayoutGlobalDrawer from './global-drawer';\n\ninterface AppLayoutGlobalDrawersImplementationProps {\n appLayoutInternals: AppLayoutInternals;\n}\n\nexport function AppLayoutGlobalDrawersImplementation({\n appLayoutInternals,\n}: AppLayoutGlobalDrawersImplementationProps) {\n const { globalDrawers, activeGlobalDrawersIds } = appLayoutInternals;\n const openDrawersHistory = useRef>(new Set());\n\n if (!globalDrawers.length) {\n return <>;\n }\n\n return (\n <>\n {globalDrawers\n .filter(\n drawer =>\n activeGlobalDrawersIds.includes(drawer.id) ||\n (drawer.preserveInactiveContent && openDrawersHistory.current.has(drawer.id))\n )\n .map(drawer => {\n openDrawersHistory.current.add(drawer.id);\n return (\n \n );\n })}\n \n );\n}\n\nexport const createWidgetizedAppLayoutGlobalDrawers = createWidgetizedComponent(AppLayoutGlobalDrawersImplementation);\n", "// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React, { useRef } from 'react';\nimport { Transition } from 'react-transition-group';\nimport clsx from 'clsx';\n\nimport { InternalButton } from '../../../button/internal';\nimport PanelResizeHandle from '../../../internal/components/panel-resize-handle';\nimport customCssProps from '../../../internal/generated/custom-css-properties';\nimport { getLimitedValue } from '../../../split-panel/utils/size-utils';\nimport { getDrawerStyles } from '../compute-layout';\nimport { AppLayoutInternals, InternalDrawer } from '../interfaces';\nimport { useResize } from './use-resize';\n\nimport sharedStyles from '../../resize/styles.css.js';\nimport testutilStyles from '../../test-classes/styles.css.js';\nimport styles from './styles.css.js';\n\ninterface AppLayoutGlobalDrawerImplementationProps {\n appLayoutInternals: AppLayoutInternals;\n show: boolean;\n activeGlobalDrawer: InternalDrawer | undefined;\n}\n\nfunction AppLayoutGlobalDrawerImplementation({\n appLayoutInternals,\n show,\n activeGlobalDrawer,\n}: AppLayoutGlobalDrawerImplementationProps) {\n const {\n ariaLabels,\n globalDrawersFocusControl,\n isMobile,\n placement,\n onActiveGlobalDrawersChange,\n onActiveDrawerResize,\n minGlobalDrawersSizes,\n maxGlobalDrawersSizes,\n activeGlobalDrawersSizes,\n verticalOffsets,\n drawersOpenQueue,\n } = appLayoutInternals;\n const drawerRef = useRef(null);\n const activeDrawerId = activeGlobalDrawer?.id ?? '';\n\n const computedAriaLabels = {\n closeButton: activeGlobalDrawer ? activeGlobalDrawer.ariaLabels?.closeButton : ariaLabels?.toolsClose,\n content: activeGlobalDrawer ? activeGlobalDrawer.ariaLabels?.drawerName : ariaLabels?.tools,\n };\n\n const { drawerTopOffset, drawerHeight } = getDrawerStyles(verticalOffsets, isMobile, placement);\n const activeDrawerSize = (activeDrawerId ? activeGlobalDrawersSizes[activeDrawerId] : 0) ?? 0;\n const minDrawerSize = (activeDrawerId ? minGlobalDrawersSizes[activeDrawerId] : 0) ?? 0;\n const maxDrawerSize = (activeDrawerId ? maxGlobalDrawersSizes[activeDrawerId] : 0) ?? 0;\n const refs = globalDrawersFocusControl.refs[activeDrawerId];\n const resizeProps = useResize({\n currentWidth: activeDrawerSize,\n minWidth: minDrawerSize,\n maxWidth: maxDrawerSize,\n panelRef: drawerRef,\n handleRef: refs?.slider,\n onResize: size => onActiveDrawerResize({ id: activeDrawerId!, size }),\n });\n const size = getLimitedValue(minDrawerSize, activeDrawerSize, maxDrawerSize);\n const lastOpenedDrawerId = drawersOpenQueue.length ? drawersOpenQueue[0] : null;\n const hasTriggerButton = !!activeGlobalDrawer?.trigger;\n const animationDisabled = activeGlobalDrawer?.defaultActive && !drawersOpenQueue.includes(activeGlobalDrawer.id);\n\n return (\n \n {state => {\n return (\n {\n // Drawers with trigger buttons follow this restore focus logic:\n // If a previously focused element exists, restore focus on it; otherwise, focus on the associated trigger button.\n // This function resets the previously focused element.\n // If the drawer has no trigger button and loses focus on the previously focused element, it defaults to document.body,\n // which ideally should never happen.\n if (!hasTriggerButton) {\n return;\n }\n\n if (!e.relatedTarget || !e.currentTarget.contains(e.relatedTarget)) {\n globalDrawersFocusControl.loseFocus();\n }\n }}\n style={{\n blockSize: drawerHeight,\n insetBlockStart: drawerTopOffset,\n ...(!isMobile && {\n [customCssProps.drawerSize]: `${['entering', 'entered'].includes(state) ? size : 0}px`,\n }),\n }}\n data-testid={`awsui-app-layout-drawer-${activeDrawerId}`}\n >\n {!isMobile && activeGlobalDrawer?.resizable && (\n
\n \n
\n )}\n \n
\n onActiveGlobalDrawersChange(activeDrawerId, { initiatedByUserAction: true })}\n ref={refs?.close}\n variant=\"icon\"\n />\n
\n
\n {activeGlobalDrawer?.content}\n
\n \n \n );\n }}\n \n );\n}\n\nexport default AppLayoutGlobalDrawerImplementation;\n", "// 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';\nimport { NotificationsSlot } from '../skeleton/slot-wrappers';\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 \n \n
\n onNavigationToggle(false)}\n variant=\"icon\"\n formAction=\"none\"\n className={testutilStyles['navigation-close']}\n ref={navigationFocusControl.refs.close}\n />\n
\n {navigation}\n \n \n );\n}\n\nexport const createWidgetizedAppLayoutNavigation = createWidgetizedComponent(\n AppLayoutNavigationImplementation,\n NotificationsSlot\n);\n", "// 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 styles from './styles.css.js';\n\ninterface ToolbarSlotProps {\n className?: string;\n style?: React.CSSProperties;\n children?: React.ReactNode;\n}\n\nexport const ToolbarSlot = React.forwardRef(({ className, style, children }, ref) => (\n
} className={clsx(styles['toolbar-container'], className)} style={style}>\n {children}\n
\n));\n\ninterface NotificationsSlotProps {\n className?: string;\n style?: React.CSSProperties;\n children?: React.ReactNode;\n}\n\nexport const NotificationsSlot = React.forwardRef(\n ({ className, style, children }, ref) => (\n
} className={clsx(styles['notifications-container'], className)} style={style}>\n {children}\n
\n )\n);\n", "\n import './styles.scoped.css';\n export default {\n \"root\": \"awsui_root_7nfqu_1686l_153\",\n \"has-adaptive-widths-default\": \"awsui_has-adaptive-widths-default_7nfqu_1686l_197\",\n \"has-adaptive-widths-dashboard\": \"awsui_has-adaptive-widths-dashboard_7nfqu_1686l_202\",\n \"navigation\": \"awsui_navigation_7nfqu_1686l_217\",\n \"tools\": \"awsui_tools_7nfqu_1686l_218\",\n \"global-tools\": \"awsui_global-tools_7nfqu_1686l_219\",\n \"tools-open\": \"awsui_tools-open_7nfqu_1686l_257\",\n \"split-panel-side\": \"awsui_split-panel-side_7nfqu_1686l_270\",\n \"split-panel-bottom\": \"awsui_split-panel-bottom_7nfqu_1686l_277\",\n \"panel-hidden\": \"awsui_panel-hidden_7nfqu_1686l_290\",\n \"toolbar-container\": \"awsui_toolbar-container_7nfqu_1686l_300\",\n \"notifications-container\": \"awsui_notifications-container_7nfqu_1686l_306\",\n \"notifications-background\": \"awsui_notifications-background_7nfqu_1686l_310\",\n \"main-landmark\": \"awsui_main-landmark_7nfqu_1686l_321\",\n \"main\": \"awsui_main_7nfqu_1686l_321\",\n \"main-disable-paddings\": \"awsui_main-disable-paddings_7nfqu_1686l_330\",\n \"content-header\": \"awsui_content-header_7nfqu_1686l_340\",\n \"content\": \"awsui_content_7nfqu_1686l_340\",\n \"unfocusable-mobile\": \"awsui_unfocusable-mobile_7nfqu_1686l_350\"\n};\n ", "\n import './styles.scoped.css';\n export default {\n \"navigation-container\": \"awsui_navigation-container_2p2ab_1l7b5_153\",\n \"is-navigation-open\": \"awsui_is-navigation-open_2p2ab_1l7b5_164\",\n \"navigation\": \"awsui_navigation_2p2ab_1l7b5_153\",\n \"hide-navigation\": \"awsui_hide-navigation_2p2ab_1l7b5_184\"\n};\n ", "// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React, { useEffect, useRef } from 'react';\nimport clsx from 'clsx';\n\nimport { useContainerQuery } from '@cloudscape-design/component-toolkit';\nimport { useResizeObserver } from '@cloudscape-design/component-toolkit/internal';\n\nimport { highContrastHeaderClassName } from '../../../internal/utils/content-header-utils';\nimport { createWidgetizedComponent } from '../../../internal/widgets';\nimport { AppLayoutInternals } from '../interfaces';\nimport { NotificationsSkeleton } from '../skeleton/slot-skeletons';\nimport { NotificationsSlot } from '../skeleton/slot-wrappers';\n\nimport testutilStyles from '../../test-classes/styles.css.js';\nimport styles from './styles.css.js';\n\nexport interface AppLayoutNotificationsImplementationProps {\n appLayoutInternals: AppLayoutInternals;\n children: React.ReactNode;\n}\n\nexport function AppLayoutNotificationsImplementation({\n appLayoutInternals,\n children,\n}: AppLayoutNotificationsImplementationProps) {\n const { ariaLabels, stickyNotifications, setNotificationsHeight, verticalOffsets } = appLayoutInternals;\n const [hasNotificationsContent, contentRef] = useContainerQuery(rect => rect.borderBoxHeight > 0);\n const rootRef = useRef(null);\n useResizeObserver(rootRef, entry => setNotificationsHeight(entry.borderBoxHeight));\n useEffect(() => {\n return () => {\n setNotificationsHeight(0);\n };\n // unmount effect only\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, []);\n return (\n \n \n {children}\n \n \n );\n}\n\nexport const createWidgetizedAppLayoutNotifications = createWidgetizedComponent(\n AppLayoutNotificationsImplementation,\n NotificationsSkeleton\n);\n", "// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React from 'react';\n\nimport { AppLayoutNotificationsImplementationProps } from '../notifications';\nimport { AppLayoutToolbarImplementationProps } from '../toolbar';\nimport { BreadcrumbsSlot } from './breadcrumbs';\nimport { NotificationsSlot, ToolbarSlot } from './slot-wrappers';\n\nexport const ToolbarSkeleton = React.forwardRef(\n ({ appLayoutInternals }: AppLayoutToolbarImplementationProps, ref) => (\n \n \n \n )\n);\n\nexport const NotificationsSkeleton = React.forwardRef(\n (props: AppLayoutNotificationsImplementationProps, ref) => \n);\n", "// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React from 'react';\n\nimport { BreadcrumbGroupImplementation } from '../../../../breadcrumb-group/implementation';\nimport { BreadcrumbGroupProps } from '../../../../breadcrumb-group/interfaces';\nimport { BreadcrumbsSlotContext } from '../../contexts';\n\nimport styles from './styles.css.js';\n\ninterface BreadcrumbsSlotProps {\n ownBreadcrumbs: React.ReactNode;\n discoveredBreadcrumbs: BreadcrumbGroupProps | null;\n}\n\nexport function BreadcrumbsSlot({ ownBreadcrumbs, discoveredBreadcrumbs }: BreadcrumbsSlotProps) {\n return (\n \n
{ownBreadcrumbs}
\n {discoveredBreadcrumbs && (\n
\n \n
\n )}\n \n );\n}\n", "// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React, { useEffect, useRef, useState } from 'react';\nimport clsx from 'clsx';\n\nimport { useContainerQuery } from '@cloudscape-design/component-toolkit';\nimport { getLogicalBoundingClientRect } from '@cloudscape-design/component-toolkit/internal';\nimport { getAnalyticsMetadataAttribute } from '@cloudscape-design/component-toolkit/internal/analytics-metadata';\n\nimport { InternalButton } from '../button/internal';\nimport { CustomTriggerProps, LinkItem } from '../button-dropdown/interfaces';\nimport InternalButtonDropdown from '../button-dropdown/internal';\nimport { useInternalI18n } from '../i18n/context';\nimport InternalIcon from '../icon/internal';\nimport { getBaseProps } from '../internal/base-component';\nimport { fireCancelableEvent } from '../internal/events';\nimport { useMergeRefs } from '../internal/hooks/use-merge-refs';\nimport { checkSafeUrl } from '../internal/utils/check-safe-url';\nimport { createWidgetizedComponent } from '../internal/widgets';\nimport { AllItemsDropdown } from './all-items-dropdown';\nimport {\n GeneratedAnalyticsMetadataBreadcrumbGroupClick,\n GeneratedAnalyticsMetadataBreadcrumbGroupComponent,\n} from './analytics-metadata/interfaces';\nimport { BreadcrumbGroupProps, EllipsisDropdownProps, InternalBreadcrumbGroupProps } from './interfaces';\nimport { BreadcrumbItem } from './item/item';\nimport { BreadcrumbGroupSkeleton } from './skeleton';\nimport { getEventDetail, getItemsDisplayProperties } from './utils';\n\nimport analyticsSelectors from './analytics-metadata/styles.css.js';\nimport styles from './styles.css.js';\n\n/**\n * Provided for backwards compatibility\n */\nconst DEFAULT_EXPAND_ARIA_LABEL = 'Show path';\n\nconst getEllipsisDropdownTrigger = ({ ariaLabel, triggerRef, testUtilsClass, isOpen, onClick }: CustomTriggerProps) => {\n return (\n {\n event.preventDefault();\n onClick();\n }}\n ariaExpanded={isOpen}\n aria-haspopup={true}\n ariaLabel={ariaLabel}\n variant=\"breadcrumb-group\"\n formAction=\"none\"\n >\n ...\n \n );\n};\n\nconst EllipsisDropdown = ({\n ariaLabel,\n dropdownItems,\n onDropdownItemClick,\n onDropdownItemFollow,\n visible,\n}: EllipsisDropdownProps) => {\n const i18n = useInternalI18n('breadcrumb-group');\n\n return (\n
  • \n {\n if (metadata.detail?.id) {\n delete metadata.detail.id;\n }\n if (metadata.detail?.position) {\n metadata.detail.position = `${parseInt(metadata.detail.position as string, 10) + 1}`;\n }\n return metadata;\n }}\n />\n \n \n \n
    • \n );\n};\n\ninterface ItemsRefsType {\n ghost: Record;\n real: Record;\n}\n\ninterface ItemsWidthsType {\n ghost: Array;\n real: Array;\n}\n\nconst areArrayEqual = (first: Array, second: Array) => {\n if (first.length !== second.length) {\n return false;\n }\n return first.every((item, index) => item === second[index]);\n};\n\nexport function BreadcrumbGroupImplementation({\n items = [],\n ariaLabel,\n expandAriaLabel,\n onClick,\n onFollow,\n __internalRootRef,\n __injectAnalyticsComponentMetadata,\n ...props\n}: InternalBreadcrumbGroupProps) {\n for (const item of items) {\n checkSafeUrl('BreadcrumbGroup', item.href);\n }\n const baseProps = getBaseProps(props);\n const [navWidth, navRef] = useContainerQuery(rect => rect.borderBoxWidth);\n const mergedRef = useMergeRefs(navRef, __internalRootRef);\n\n const itemsRefs = useRef({ ghost: {}, real: {} });\n const setBreadcrumb = (type: keyof ItemsRefsType, index: string, node: null | HTMLLIElement) => {\n if (node) {\n itemsRefs.current[type][index] = node;\n } else {\n delete itemsRefs.current[type][index];\n }\n };\n\n const [itemsWidths, setItemsWidths] = useState({ ghost: [], real: [] });\n\n useEffect(() => {\n if (itemsRefs.current) {\n const newItemsWidths: ItemsWidthsType = { ghost: [], real: [] };\n for (const node of Object.values(itemsRefs.current.ghost)) {\n const width = getLogicalBoundingClientRect(node).inlineSize;\n newItemsWidths.ghost.push(width);\n }\n for (const node of Object.values(itemsRefs.current.real)) {\n const width = getLogicalBoundingClientRect(node).inlineSize;\n newItemsWidths.real.push(width);\n }\n setItemsWidths(oldWidths => {\n if (\n !areArrayEqual(newItemsWidths.ghost, oldWidths.ghost) ||\n !areArrayEqual(newItemsWidths.real, oldWidths.real)\n ) {\n return newItemsWidths;\n } else {\n return oldWidths;\n }\n });\n }\n }, [items, navWidth]);\n\n const { collapsed } = getItemsDisplayProperties(itemsWidths.ghost, navWidth);\n\n let breadcrumbItems = items.map((item, index) => {\n const isLast = index === items.length - 1;\n const isDisplayed = index === 0 || index > collapsed;\n\n const clickAnalyticsMetadata: GeneratedAnalyticsMetadataBreadcrumbGroupClick = {\n action: 'click',\n detail: {\n position: `${index + 1}`,\n label: `.${analyticsSelectors['breadcrumb-item']}`,\n href: item.href || '',\n },\n };\n return (\n setBreadcrumb('real', `${index}`, node)}\n >\n 0}\n />\n \n );\n });\n\n const hiddenBreadcrumbItems = items.map((item, index) => (\n
  • setBreadcrumb('ghost', `${index}`, node)}>\n \n
    • \n ));\n\n const getEventItem = (e: CustomEvent<{ id: string }>) => {\n const { id } = e.detail;\n return items[parseInt(id)];\n };\n\n // Add ellipsis\n if (breadcrumbItems.length >= 2) {\n const dropdownItems: Array = items\n .slice(1, 1 + collapsed)\n .map((item: BreadcrumbGroupProps.Item, index: number) => ({\n id: (index + 1).toString(), // the first item doesn't get inside dropdown\n text: item.text,\n href: item.href || '#',\n }));\n\n breadcrumbItems = [\n breadcrumbItems[0],\n 0}\n ariaLabel={expandAriaLabel}\n dropdownItems={dropdownItems}\n onDropdownItemClick={e => fireCancelableEvent(onClick, getEventDetail(getEventItem(e)), e)}\n onDropdownItemFollow={e => fireCancelableEvent(onFollow, getEventDetail(getEventItem(e)), e)}\n />,\n ...breadcrumbItems.slice(1),\n ];\n }\n\n const componentAnalyticsMetadata: GeneratedAnalyticsMetadataBreadcrumbGroupComponent = {\n name: 'awsui.BreadcrumbGroup',\n label: { root: 'self' },\n };\n\n return (\n \n {collapsed > 0 && collapsed === items.length - 1 ? (\n \n e.detail.id !== (items.length - 1).toString() &&\n fireCancelableEvent(onClick, getEventDetail(getEventItem(e)), e)\n }\n onItemFollow={e =>\n e.detail.id !== (items.length - 1).toString() &&\n fireCancelableEvent(onFollow, getEventDetail(getEventItem(e)), e)\n }\n />\n ) : (\n
      {breadcrumbItems}
    \n )}\n
      \n {hiddenBreadcrumbItems}\n
    \n \n );\n}\n\nexport const createWidgetizedBreadcrumbGroup = createWidgetizedComponent(\n BreadcrumbGroupImplementation,\n BreadcrumbGroupSkeleton\n);\n", "// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React, { Ref } from 'react';\nimport clsx from 'clsx';\n\nimport { CustomTriggerProps } from '../button-dropdown/interfaces';\nimport InternalButtonDropdown from '../button-dropdown/internal';\nimport InternalIcon from '../icon/internal';\nimport { DATA_ATTR_FUNNEL_KEY, DATA_ATTR_RESOURCE_TYPE, FUNNEL_KEY_FUNNEL_NAME } from '../internal/analytics/selectors';\nimport { CancelableEventHandler } from '../internal/events';\nimport { spinWhenOpen } from '../internal/styles/motion/utils';\nimport { BreadcrumbGroupProps } from './interfaces';\n\nimport styles from './styles.css.js';\n\ninterface FullCollapsedDropdownProps {\n items: ReadonlyArray;\n onItemClick: CancelableEventHandler<{ id: string }>;\n onItemFollow: CancelableEventHandler<{ id: string }>;\n}\n\nconst metadataTypeAttribute = {\n [DATA_ATTR_RESOURCE_TYPE]: 'true',\n};\n\nexport const AllItemsDropdown = ({ items, onItemClick, onItemFollow }: FullCollapsedDropdownProps) => (\n <>\n {\n const isCurrentBreadcrumb = index === items.length - 1;\n return {\n id: index.toString(),\n text: item.text,\n href: isCurrentBreadcrumb ? undefined : item.href,\n isCurrentBreadcrumb,\n };\n })}\n customTriggerBuilder={getDropdownTrigger(items[items.length - 1]?.text)}\n linkStyle={true}\n fullWidth={true}\n onItemClick={onItemClick}\n onItemFollow={onItemFollow}\n analyticsMetadataTransformer={metadata => {\n if (metadata.detail?.id) {\n delete metadata.detail.id;\n }\n if (metadata.detail?.position) {\n metadata.detail.position = `${parseInt(metadata.detail.position as string, 10) + 1}`;\n }\n return metadata;\n }}\n />\n {/* Second breadcrumb item is tagged as \"resource type\" */}\n {items.length > 1 && (\n \n {items[1].text}\n \n )}\n \n);\nconst getDropdownTrigger =\n (currentPage: string) =>\n ({ ariaLabel, triggerRef, testUtilsClass, isOpen, onClick }: CustomTriggerProps) => {\n const metadataAttributes = {\n [DATA_ATTR_FUNNEL_KEY]: FUNNEL_KEY_FUNNEL_NAME,\n };\n return (\n }\n {...metadataAttributes}\n className={clsx(styles['collapsed-button'], testUtilsClass)}\n onClick={event => {\n event.preventDefault();\n onClick();\n }}\n aria-expanded={isOpen}\n aria-haspopup={true}\n aria-label={ariaLabel}\n formAction=\"none\"\n >\n \n {currentPage}\n \n );\n };\n", "\n import './styles.scoped.css';\n export default {\n \"breadcrumb-group\": \"awsui_breadcrumb-group_d19fg_1p3cd_145\",\n \"breadcrumb-group-list\": \"awsui_breadcrumb-group-list_d19fg_1p3cd_180\",\n \"ghost\": \"awsui_ghost_d19fg_1p3cd_191\",\n \"item\": \"awsui_item_d19fg_1p3cd_196\",\n \"ghost-item\": \"awsui_ghost-item_d19fg_1p3cd_197\",\n \"ellipsis\": \"awsui_ellipsis_d19fg_1p3cd_198\",\n \"hide\": \"awsui_hide_d19fg_1p3cd_209\",\n \"visible\": \"awsui_visible_d19fg_1p3cd_215\",\n \"icon\": \"awsui_icon_d19fg_1p3cd_219\",\n \"breadcrumbs-skeleton\": \"awsui_breadcrumbs-skeleton_d19fg_1p3cd_225\",\n \"collapsed-button\": \"awsui_collapsed-button_d19fg_1p3cd_229\",\n \"button-icon\": \"awsui_button-icon_d19fg_1p3cd_311\",\n \"button-icon-open\": \"awsui_button-icon-open_d19fg_1p3cd_325\",\n \"hidden\": \"awsui_hidden_d19fg_1p3cd_329\"\n};\n ", "// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React, { useEffect, useRef, useState } from 'react';\nimport clsx from 'clsx';\n\nimport InternalIcon from '../../icon/internal';\nimport Tooltip from '../../internal/components/tooltip';\nimport { registerTooltip } from '../../internal/components/tooltip/registry';\nimport { fireCancelableEvent, isPlainLeftClick } from '../../internal/events';\nimport { BreadcrumbGroupProps, BreadcrumbItemProps } from '../interfaces';\nimport { getEventDetail } from '../utils';\nimport { FunnelBreadcrumbItem } from './funnel';\n\nimport styles from './styles.css.js';\n\ninterface BreadcrumbItemWithPopoverProps {\n item: T;\n isLast: boolean;\n anchorAttributes: React.AnchorHTMLAttributes;\n children: React.ReactNode;\n}\n\nconst BreadcrumbItemWithPopover = ({\n item,\n isLast,\n anchorAttributes,\n children,\n}: BreadcrumbItemWithPopoverProps) => {\n const [showPopover, setShowPopover] = useState(false);\n const textRef = useRef(null);\n const popoverContent = ;\n\n useEffect(() => {\n if (showPopover) {\n return registerTooltip(() => {\n setShowPopover(false);\n });\n }\n }, [showPopover]);\n\n return (\n <>\n {\n setShowPopover(true);\n }}\n onBlur={() => setShowPopover(false)}\n onMouseEnter={() => {\n setShowPopover(true);\n }}\n onMouseLeave={() => setShowPopover(false)}\n anchorAttributes={anchorAttributes}\n {...(isLast ? { tabIndex: 0 } : {})}\n >\n {children}\n \n {showPopover && popoverContent}\n \n );\n};\n\ntype ItemProps = React.HTMLAttributes & {\n anchorAttributes: React.AnchorHTMLAttributes;\n isLast: boolean;\n};\nconst Item = React.forwardRef(\n ({ anchorAttributes, children, isLast, ...itemAttributes }, ref) =>\n isLast ? (\n \n {children}\n \n ) : (\n } className={styles.anchor} {...itemAttributes} {...anchorAttributes}>\n {children}\n \n )\n);\n\nexport function BreadcrumbItem({\n item,\n itemIndex,\n totalCount,\n onClick,\n onFollow,\n isGhost = false,\n isTruncated = false,\n}: BreadcrumbItemProps) {\n const isLast = itemIndex === totalCount - 1;\n const preventDefault = (event: React.MouseEvent) => event.preventDefault();\n const onClickHandler = (event: React.MouseEvent) => {\n if (isPlainLeftClick(event)) {\n fireCancelableEvent(onFollow, getEventDetail(item), event);\n }\n fireCancelableEvent(onClick, getEventDetail(item), event);\n };\n\n const anchorAttributes: React.AnchorHTMLAttributes = {\n href: item.href || '#',\n onClick: isLast ? preventDefault : onClickHandler,\n };\n if (isGhost) {\n anchorAttributes.tabIndex = -1;\n }\n\n const breadcrumbItem = (\n \n );\n\n return (\n
    \n {isTruncated && !isGhost ? (\n \n {breadcrumbItem}\n \n ) : (\n \n {breadcrumbItem}\n \n )}\n {!isLast ? (\n \n \n \n ) : null}\n
    \n );\n}\n", "// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\n\ntype OnClose = () => void;\n\nlet callbacks: Array = [];\nlet listenerRegistered = false;\n\nconst onKeyDown = (event: KeyboardEvent) => {\n if (event.key === 'Escape') {\n callbacks.forEach(callback => callback());\n }\n};\n\nexport const registerTooltip = (onClose: OnClose) => {\n callbacks.forEach(callback => callback());\n callbacks.push(onClose);\n if (!listenerRegistered) {\n listenerRegistered = true;\n document.addEventListener('keydown', onKeyDown);\n }\n return () => {\n deregisterTooltip(onClose);\n };\n};\n\nconst deregisterTooltip = (onClose: OnClose) => {\n callbacks = callbacks.filter(callback => callback !== onClose);\n if (listenerRegistered && callbacks.length === 0) {\n listenerRegistered = false;\n document.removeEventListener('keydown', onKeyDown);\n }\n};\n", "// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport { BreadcrumbGroupProps } from './interfaces';\n\nexport const getEventDetail = (item: T) => ({\n item,\n text: item.text,\n href: item.href,\n});\n\nconst MIN_BREADCRUMB_WIDTH = 70;\nconst ELLIPSIS_WIDTH = 50;\n\nexport const getItemsDisplayProperties = (itemsWidths: Array, navWidth: number | null) => {\n const widthsWithFinalCollapsed = [...itemsWidths];\n widthsWithFinalCollapsed[itemsWidths.length - 1] = Math.min(\n itemsWidths[itemsWidths.length - 1],\n MIN_BREADCRUMB_WIDTH\n );\n\n return {\n collapsed: computeNumberOfCollapsedItems(widthsWithFinalCollapsed, navWidth),\n };\n};\n\nconst computeNumberOfCollapsedItems = (itemWidths: Array, navWidth: number | null): number => {\n if (typeof navWidth !== 'number') {\n return 0;\n }\n let usedWidth = itemWidths.reduce((acc, width) => acc + width, 0);\n let collapsedItems = 0;\n while (collapsedItems < itemWidths.length - 1) {\n if (usedWidth <= navWidth) {\n break;\n }\n collapsedItems += 1;\n usedWidth = usedWidth - itemWidths[collapsedItems];\n if (collapsedItems === 1) {\n usedWidth += ELLIPSIS_WIDTH;\n }\n }\n return collapsedItems;\n};\n", "// 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 {\n DATA_ATTR_FUNNEL_KEY,\n DATA_ATTR_RESOURCE_TYPE,\n FUNNEL_KEY_FUNNEL_NAME,\n} from '../../internal/analytics/selectors';\n\nimport analyticsSelectors from '../analytics-metadata/styles.css.js';\n\ninterface FunnelBreadcrumbItemProps {\n className?: string;\n text: string;\n itemIndex: number;\n totalCount: number;\n disableAnalytics?: boolean;\n}\n\nexport const FunnelBreadcrumbItem = React.forwardRef(\n ({ className, text, itemIndex, totalCount, disableAnalytics }, ref) => {\n const funnelAttributes: Record = {};\n if (!disableAnalytics) {\n if (itemIndex === totalCount - 1) {\n funnelAttributes[DATA_ATTR_FUNNEL_KEY] = FUNNEL_KEY_FUNNEL_NAME;\n }\n if (itemIndex === 1) {\n funnelAttributes[DATA_ATTR_RESOURCE_TYPE] = 'true';\n }\n }\n\n return (\n \n {text}\n     \n );\n }\n);\n", "\n import './styles.scoped.css';\n export default {\n \"breadcrumb-item\": \"awsui_breadcrumb-item_1c68o_b6unx_5\"\n};\n ", "\n import './styles.scoped.css';\n export default {\n \"link\": \"awsui_link_1kosq_x3lvk_145\",\n \"breadcrumb\": \"awsui_breadcrumb_1kosq_x3lvk_149\",\n \"ghost-breadcrumb\": \"awsui_ghost-breadcrumb_1kosq_x3lvk_150\",\n \"icon\": \"awsui_icon_1kosq_x3lvk_153\",\n \"anchor\": \"awsui_anchor_1kosq_x3lvk_159\",\n \"text\": \"awsui_text_1kosq_x3lvk_206\",\n \"last\": \"awsui_last_1kosq_x3lvk_225\"\n};\n ", "// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React from 'react';\n\nimport { InternalBreadcrumbGroupProps } from './interfaces';\nimport { FunnelBreadcrumbItem } from './item/funnel';\n\nimport styles from './styles.css.js';\n\nexport const BreadcrumbGroupSkeleton = React.forwardRef(({ items }, ref) => (\n
    } className={styles['breadcrumbs-skeleton']}>\n {items.map((item, index) => (\n \n ))}\n
    \n));\n", "\n import './styles.scoped.css';\n export default {\n \"breadcrumbs-own\": \"awsui_breadcrumbs-own_ete58_yonx9_5\",\n \"breadcrumbs-discovered\": \"awsui_breadcrumbs-discovered_ete58_yonx9_5\"\n};\n ", "\n import './styles.scoped.css';\n export default {\n \"sticky-notifications\": \"awsui_sticky-notifications_154bi_4ef3v_9\",\n \"sticky-notifications-with-background\": \"awsui_sticky-notifications-with-background_154bi_4ef3v_13\",\n \"has-notifications-content\": \"awsui_has-notifications-content_154bi_4ef3v_17\"\n};\n ", "// 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, splitPanelAnimationDisabled } = appLayoutInternals;\n const { drawerTopOffset, drawerHeight } = getDrawerStyles(verticalOffsets, isMobile, placement);\n\n return (\n \n \n {children}\n \n \n );\n}\n\ninterface AppLayoutSplitPanelDrawerBottomImplementationProps {\n appLayoutInternals: AppLayoutInternals;\n splitPanelInternals: SplitPanelProviderProps;\n children: React.ReactNode;\n}\n\nexport function AppLayoutSplitPanelDrawerBottomImplementation({\n children,\n splitPanelInternals,\n appLayoutInternals,\n}: AppLayoutSplitPanelDrawerBottomImplementationProps) {\n const { splitPanelControlId, splitPanelAnimationDisabled } = appLayoutInternals;\n return (\n \n
    {children}
    \n     \n );\n}\n\nexport const createWidgetizedAppLayoutSplitPanelDrawerSide = createWidgetizedComponent(\n AppLayoutSplitPanelDrawerSideImplementation\n);\n\nexport const createWidgetizedAppLayoutSplitPanelDrawerBottom = createWidgetizedComponent(\n AppLayoutSplitPanelDrawerBottomImplementation\n);\n", "\n import './styles.scoped.css';\n export default {\n \"split-panel-side\": \"awsui_split-panel-side_j4v3w_1dcwh_145\"\n};\n ", "// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React, { useEffect, useRef } from 'react';\nimport clsx from 'clsx';\n\nimport { useResizeObserver } from '@cloudscape-design/component-toolkit/internal';\n\nimport { createWidgetizedComponent } from '../../../internal/widgets';\nimport { AppLayoutProps } from '../../interfaces';\nimport { OnChangeParams } from '../../utils/use-drawers';\nimport { Focusable, FocusControlMultipleStates } from '../../utils/use-focus-control';\nimport { AppLayoutInternals } from '../interfaces';\nimport { BreadcrumbsSlot } from '../skeleton/breadcrumbs';\nimport { ToolbarSkeleton } from '../skeleton/slot-skeletons';\nimport { ToolbarSlot } from '../skeleton/slot-wrappers';\nimport { DrawerTriggers, SplitPanelToggleProps } from './drawer-triggers';\nimport TriggerButton from './trigger-button';\n\nimport testutilStyles from '../../test-classes/styles.css.js';\nimport styles from './styles.css.js';\n\nexport { SplitPanelToggleProps };\n\nexport interface ToolbarProps {\n ariaLabels?: AppLayoutProps.Labels;\n // navigation\n hasNavigation?: boolean;\n navigationOpen?: boolean;\n onNavigationToggle?: (open: boolean) => void;\n navigationFocusRef?: React.Ref;\n\n // breadcrumbs\n hasBreadcrumbsPortal?: boolean;\n\n // split panel\n hasSplitPanel?: boolean;\n splitPanelToggleProps?: SplitPanelToggleProps;\n splitPanelFocusRef?: React.Ref;\n onSplitPanelToggle?: () => void;\n\n // drawers\n activeDrawerId?: string | null;\n drawers?: ReadonlyArray;\n drawersFocusRef?: React.Ref;\n globalDrawersFocusControl?: FocusControlMultipleStates;\n onActiveDrawerChange?: (drawerId: string | null, params: OnChangeParams) => void;\n globalDrawers?: ReadonlyArray | undefined;\n activeGlobalDrawersIds?: ReadonlyArray;\n onActiveGlobalDrawersChange?: ((drawerId: string, params: OnChangeParams) => void) | undefined;\n}\n\nexport interface AppLayoutToolbarImplementationProps {\n appLayoutInternals: AppLayoutInternals;\n toolbarProps: ToolbarProps;\n}\n\n// support compatibility with changes before this commit: cf0f2b0755af1a28ac7c3c9476418a7ea807d0fd\nfunction convertLegacyProps(toolbarProps: ToolbarProps, legacyProps: AppLayoutInternals): ToolbarProps {\n return {\n ariaLabels: toolbarProps.ariaLabels ?? legacyProps.ariaLabels,\n activeDrawerId: toolbarProps.activeDrawerId ?? legacyProps.activeDrawer?.id,\n drawers: toolbarProps.drawers ?? legacyProps.drawers,\n drawersFocusRef: toolbarProps.drawersFocusRef ?? legacyProps.drawersFocusControl?.refs.toggle,\n globalDrawersFocusControl: toolbarProps.globalDrawersFocusControl,\n onActiveDrawerChange: toolbarProps.onActiveDrawerChange ?? legacyProps.onActiveDrawerChange,\n globalDrawers: toolbarProps.globalDrawers ?? legacyProps.globalDrawers,\n activeGlobalDrawersIds: toolbarProps.activeGlobalDrawersIds ?? legacyProps.activeGlobalDrawersIds,\n onActiveGlobalDrawersChange: toolbarProps.onActiveGlobalDrawersChange ?? legacyProps.onActiveGlobalDrawersChange,\n hasNavigation: toolbarProps.hasNavigation ?? !!legacyProps.navigation,\n navigationOpen: toolbarProps.navigationOpen ?? legacyProps.navigationOpen,\n navigationFocusRef: toolbarProps.navigationFocusRef ?? legacyProps.navigationFocusControl?.refs.toggle,\n onNavigationToggle: toolbarProps.onNavigationToggle ?? legacyProps.onNavigationToggle,\n hasSplitPanel: toolbarProps.hasSplitPanel ?? true,\n splitPanelFocusRef: legacyProps.splitPanelFocusControl?.refs.toggle,\n splitPanelToggleProps: toolbarProps.splitPanelToggleProps ?? {\n ...legacyProps.splitPanelToggleConfig,\n active: legacyProps.splitPanelOpen,\n controlId: legacyProps.splitPanelControlId,\n position: legacyProps.splitPanelPosition,\n },\n onSplitPanelToggle: toolbarProps.onSplitPanelToggle ?? legacyProps.onSplitPanelToggle,\n };\n}\n\nexport function AppLayoutToolbarImplementation({\n appLayoutInternals,\n // the value could be undefined if this component is loaded as a widget by a different app layout version\n // not testable in a single-version setup\n toolbarProps = {},\n}: AppLayoutToolbarImplementationProps) {\n const {\n breadcrumbs,\n discoveredBreadcrumbs,\n verticalOffsets,\n isMobile,\n toolbarState,\n setToolbarState,\n setToolbarHeight,\n } = appLayoutInternals;\n const {\n ariaLabels,\n activeDrawerId,\n drawers,\n drawersFocusRef,\n onActiveDrawerChange,\n globalDrawersFocusControl,\n globalDrawers,\n activeGlobalDrawersIds,\n onActiveGlobalDrawersChange,\n hasNavigation,\n navigationOpen,\n navigationFocusRef,\n onNavigationToggle,\n hasSplitPanel,\n splitPanelFocusRef,\n splitPanelToggleProps,\n onSplitPanelToggle,\n } = convertLegacyProps(toolbarProps, appLayoutInternals);\n // TODO: expose configuration property\n const pinnedToolbar = true;\n const ref = useRef(null);\n useResizeObserver(ref, entry => setToolbarHeight(entry.borderBoxHeight));\n useEffect(() => {\n return () => {\n setToolbarHeight(0);\n };\n // unmount effect only\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, []);\n\n useEffect(() => {\n let lastScrollY = window.scrollY;\n\n /* istanbul ignore next not testable in JSDOM */\n const updateScrollDirection = () => {\n if (pinnedToolbar) {\n setToolbarState('show');\n return;\n }\n const scrollY = window.scrollY;\n // 80 is an arbitrary number to have a pause before the toolbar scrolls out of view at the top of the page\n const direction = scrollY > lastScrollY && scrollY > 80 ? 'hide' : 'show';\n // 2 as a buffer to avoid mistaking minor accidental mouse moves as scroll\n if (direction !== toolbarState && (scrollY - lastScrollY > 2 || scrollY - lastScrollY < -2)) {\n setToolbarState(direction);\n }\n lastScrollY = scrollY > 0 ? scrollY : 0;\n };\n\n window.addEventListener('scroll', updateScrollDirection);\n return () => {\n window.removeEventListener('scroll', updateScrollDirection);\n };\n }, [pinnedToolbar, setToolbarState, toolbarState]);\n\n const anyPanelOpenInMobile = !!isMobile && (!!activeDrawerId || (!!navigationOpen && !!hasNavigation));\n useEffect(() => {\n if (anyPanelOpenInMobile) {\n document.body.classList.add(styles['block-body-scroll']);\n } else {\n document.body.classList.remove(styles['block-body-scroll']);\n }\n return () => {\n document.body.classList.remove(styles['block-body-scroll']);\n };\n }, [anyPanelOpenInMobile]);\n\n const toolbarHidden = toolbarState === 'hide' && !pinnedToolbar;\n const navLandmarkAttributes = navigationOpen\n ? { role: 'presentation' }\n : { role: 'navigation', 'aria-label': ariaLabels?.navigation };\n\n return (\n \n
    \n {hasNavigation && (\n \n )}\n {(breadcrumbs || discoveredBreadcrumbs) && (\n
    \n \n
    \n )}\n {(drawers?.length || globalDrawers?.length || (hasSplitPanel && splitPanelToggleProps?.displayed)) && (\n
    \n !!item.trigger) ?? []}\n drawersFocusRef={drawersFocusRef}\n onActiveDrawerChange={onActiveDrawerChange}\n splitPanelToggleProps={splitPanelToggleProps?.displayed ? splitPanelToggleProps : undefined}\n splitPanelFocusRef={splitPanelFocusRef}\n onSplitPanelToggle={onSplitPanelToggle}\n disabled={anyPanelOpenInMobile}\n globalDrawersFocusControl={globalDrawersFocusControl}\n globalDrawers={globalDrawers?.filter(item => !!item.trigger) ?? []}\n activeGlobalDrawersIds={activeGlobalDrawersIds ?? []}\n onActiveGlobalDrawersChange={onActiveGlobalDrawersChange}\n />\n
    \n )}\n
    \n \n );\n}\n\nexport const createWidgetizedAppLayoutToolbar = createWidgetizedComponent(\n AppLayoutToolbarImplementation,\n ToolbarSkeleton\n);\n", "// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React, { useRef } from 'react';\nimport clsx from 'clsx';\n\nimport { useContainerQuery } from '@cloudscape-design/component-toolkit';\n\nimport { useMobile } from '../../../internal/hooks/use-mobile';\nimport { splitItems } from '../../drawer/drawers-helpers';\nimport OverflowMenu from '../../drawer/overflow-menu';\nimport { AppLayoutProps, AppLayoutPropsWithDefaults } from '../../interfaces';\nimport { OnChangeParams, TOOLS_DRAWER_ID } from '../../utils/use-drawers';\nimport { Focusable, FocusControlMultipleStates } from '../../utils/use-focus-control';\nimport TriggerButton from './trigger-button';\n\nimport splitPanelTestUtilStyles from '../../../split-panel/test-classes/styles.css.js';\nimport testutilStyles from '../../test-classes/styles.css.js';\nimport styles from './styles.css.js';\n\nexport interface SplitPanelToggleProps {\n displayed: boolean;\n ariaLabel: string | undefined;\n controlId: string | undefined;\n active: boolean;\n position: AppLayoutProps.SplitPanelPosition;\n}\n\ninterface DrawerTriggersProps {\n ariaLabels: AppLayoutPropsWithDefaults['ariaLabels'];\n\n activeDrawerId: string | null;\n drawersFocusRef: React.Ref | undefined;\n drawers: ReadonlyArray;\n onActiveDrawerChange: ((drawerId: string | null, params: OnChangeParams) => void) | undefined;\n\n activeGlobalDrawersIds: ReadonlyArray;\n globalDrawersFocusControl?: FocusControlMultipleStates;\n globalDrawers: ReadonlyArray;\n onActiveGlobalDrawersChange?: (newDrawerId: string, params: OnChangeParams) => void;\n\n splitPanelOpen?: boolean;\n splitPanelPosition?: AppLayoutProps.SplitPanelPreferences['position'];\n splitPanelToggleProps: SplitPanelToggleProps | undefined;\n splitPanelFocusRef: React.Ref | undefined;\n onSplitPanelToggle: (() => void) | undefined;\n disabled: boolean;\n}\n\nexport function DrawerTriggers({\n ariaLabels,\n activeDrawerId,\n drawers,\n drawersFocusRef,\n onActiveDrawerChange,\n splitPanelOpen,\n splitPanelPosition = 'bottom',\n splitPanelFocusRef,\n splitPanelToggleProps,\n onSplitPanelToggle,\n disabled,\n activeGlobalDrawersIds,\n globalDrawers,\n globalDrawersFocusControl,\n onActiveGlobalDrawersChange,\n}: DrawerTriggersProps) {\n const isMobile = useMobile();\n const hasMultipleTriggers = drawers.length > 1;\n const previousActiveLocalDrawerId = useRef(activeDrawerId);\n const previousActiveGlobalDrawersIds = useRef(activeGlobalDrawersIds);\n const [containerWidth, triggersContainerRef] = useContainerQuery(rect => rect.contentBoxWidth);\n if (!drawers.length && !globalDrawers.length && !splitPanelToggleProps) {\n return null;\n }\n\n if (activeDrawerId) {\n previousActiveLocalDrawerId.current = activeDrawerId;\n }\n\n if (activeGlobalDrawersIds.length) {\n previousActiveGlobalDrawersIds.current = activeGlobalDrawersIds;\n }\n\n const getIndexOfOverflowItem = () => {\n if (isMobile) {\n return 2;\n }\n if (containerWidth) {\n const ITEM_WIDTH = 50; // Roughly 34px + padding = 42px but added extra for safety\n const overflowSpot = containerWidth;\n\n const index = Math.floor(overflowSpot / ITEM_WIDTH);\n\n let splitPanelItem = 0;\n if (splitPanelToggleProps) {\n splitPanelItem = 1;\n }\n return index - splitPanelItem;\n }\n return 0;\n };\n\n const indexOfOverflowItem = getIndexOfOverflowItem();\n\n const { visibleItems, overflowItems } = splitItems(\n [...drawers, ...globalDrawers],\n indexOfOverflowItem,\n activeDrawerId ?? null\n );\n const overflowMenuHasBadge = !!overflowItems.find(item => item.badge);\n const toolsOnlyMode = drawers.length === 1 && drawers[0].id === TOOLS_DRAWER_ID;\n const globalDrawersStartIndex = drawers.length;\n const hasOpenDrawer = !!activeDrawerId || (splitPanelPosition === 'side' && splitPanelOpen);\n const splitPanelResolvedPosition = splitPanelToggleProps?.position;\n\n return (\n \n
    \n {splitPanelToggleProps && (\n <>\n onSplitPanelToggle?.()}\n selected={splitPanelToggleProps.active}\n ref={splitPanelResolvedPosition === 'side' ? splitPanelFocusRef : undefined}\n hasTooltip={true}\n isMobile={isMobile}\n isForSplitPanel={true}\n disabled={disabled}\n />\n {hasMultipleTriggers ?
    : null}\n \n )}\n {visibleItems.slice(0, globalDrawersStartIndex).map(item => {\n const isForPreviousActiveDrawer = previousActiveLocalDrawerId?.current === item.id;\n return (\n \n onActiveDrawerChange?.(activeDrawerId !== item.id ? item.id : null, { initiatedByUserAction: true })\n }\n ref={item.id === previousActiveLocalDrawerId.current ? drawersFocusRef : undefined}\n selected={item.id === activeDrawerId}\n badge={item.badge}\n testId={`awsui-app-layout-trigger-${item.id}`}\n hasTooltip={true}\n hasOpenDrawer={hasOpenDrawer}\n tooltipText={item.ariaLabels?.drawerName}\n isForPreviousActiveDrawer={isForPreviousActiveDrawer}\n isMobile={isMobile}\n disabled={disabled}\n />\n );\n })}\n {globalDrawersStartIndex > 0 && visibleItems.length > globalDrawersStartIndex && (\n
    \n )}\n {visibleItems.slice(globalDrawersStartIndex).map(item => {\n const isForPreviousActiveDrawer = previousActiveGlobalDrawersIds?.current.includes(item.id);\n return (\n {\n onActiveGlobalDrawersChange && onActiveGlobalDrawersChange(item.id, { initiatedByUserAction: true });\n }}\n ref={globalDrawersFocusControl?.refs[item.id]?.toggle}\n selected={activeGlobalDrawersIds.includes(item.id)}\n badge={item.badge}\n testId={`awsui-app-layout-trigger-${item.id}`}\n hasTooltip={true}\n hasOpenDrawer={hasOpenDrawer}\n tooltipText={item.ariaLabels?.drawerName}\n isForPreviousActiveDrawer={isForPreviousActiveDrawer}\n isMobile={isMobile}\n disabled={disabled}\n />\n );\n })}\n {overflowItems.length > 0 && (\n ({\n ...item,\n active: activeGlobalDrawersIds.includes(item.id),\n }))}\n ariaLabel={overflowMenuHasBadge ? ariaLabels?.drawersOverflowWithBadge : ariaLabels?.drawersOverflow}\n customTriggerBuilder={({ onClick, triggerRef, ariaLabel, ariaExpanded, testUtilsClass }) => {\n return (\n \n );\n }}\n onItemClick={event => {\n const id = event.detail.id;\n if (globalDrawers.find(drawer => drawer.id === id)) {\n onActiveGlobalDrawersChange?.(id, { initiatedByUserAction: true });\n } else {\n onActiveDrawerChange?.(event.detail.id, { initiatedByUserAction: true });\n }\n }}\n globalDrawersStartIndex={globalDrawersStartIndex - indexOfOverflowItem}\n />\n )}\n
    \n \n );\n}\n", "// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React, { Ref, useCallback, useEffect, useMemo, useRef, useState } from 'react';\nimport clsx from 'clsx';\n\nimport { ButtonProps } from '../../../../button/interfaces';\nimport { IconProps } from '../../../../icon/interfaces';\nimport Icon from '../../../../icon/internal';\nimport Tooltip from '../../../../internal/components/tooltip';\nimport { registerTooltip } from '../../../../internal/components/tooltip/registry';\n\nimport testutilStyles from '../../../test-classes/styles.css.js';\nimport styles from './styles.css.js';\n\nexport interface TriggerButtonProps {\n ariaLabel?: string;\n className?: string;\n iconName?: IconProps.Name;\n iconSvg?: React.ReactNode;\n ariaExpanded: boolean | undefined;\n ariaControls?: string;\n disabled?: boolean;\n /**\n * Ovewrwrites any internal testIds when provided\n */\n testId?: string;\n /**\n * If button is selected. Used only for desktop and applies a selected class\n */\n selected?: boolean;\n onClick: React.MouseEventHandler;\n\n badge?: boolean;\n /**\n * If the button is expected to have a tooltip. When false it will not set the event listeners\n *\n * defaults to false\n */\n hasTooltip?: boolean;\n /**\n * This text allows for a customized tooltip.\n *\n * When falsy, the tooltip will parse the tooltip form the aria-lable\n */\n tooltipText?: string;\n hasOpenDrawer?: boolean;\n /**\n * If the AppLayout is in mobile mode\n * Used to determine if and where to render tooltips\n */\n isMobile?: boolean;\n /**\n * set to true if the trigger button was used to open the last active drawer\n * this is also used to hide the tooltip should the focus be set programmatically\n * on focus from a drawer close using this\n */\n isForPreviousActiveDrawer?: boolean;\n /**\n * if the trigger button is for the split panel\n */\n isForSplitPanel?: boolean;\n tabIndex?: number | undefined;\n}\n\nfunction TriggerButton(\n {\n ariaLabel,\n className,\n iconName,\n iconSvg,\n ariaExpanded,\n ariaControls,\n onClick,\n testId,\n disabled = false,\n badge,\n selected = false,\n hasTooltip = false,\n tooltipText,\n hasOpenDrawer = false,\n isMobile = false,\n isForPreviousActiveDrawer = false,\n isForSplitPanel = false,\n }: TriggerButtonProps,\n ref: React.Ref\n) {\n const containerRef = useRef(null);\n const tooltipValue = tooltipText ? tooltipText : ariaLabel ? ariaLabel : '';\n const [showTooltip, setShowTooltip] = useState(false);\n const [suppressTooltip, setSupressTooltip] = useState(false);\n\n const handleTriggerClick = (event: React.MouseEvent) => {\n event.stopPropagation(); // Stop the event from propagating to the badge icon\n setShowTooltip(false);\n setSupressTooltip(true);\n onClick(event);\n };\n\n const handleBlur = (keepSupressed = false) => {\n setSupressTooltip(keepSupressed);\n setShowTooltip(false);\n };\n\n const handlePointerEnter = () => {\n setSupressTooltip(false);\n setShowTooltip(true);\n };\n\n /**\n * Takes the drawer being closed and the data-shift-focus value from a close button on that drawer that persists\n * on the event relatedTarget to determine not to show the tooltip\n * @param event\n */\n const handleOnFocus = useCallback(\n (event: FocusEvent) => {\n let shouldShowTooltip = false;\n const eventWithRelatedTarget = event as any;\n const relatedTarget = eventWithRelatedTarget?.relatedTarget;\n const isFromAnotherTrigger = relatedTarget?.dataset?.shiftFocus === 'awsui-layout-drawer-trigger';\n if (\n (isForSplitPanel && !!relatedTarget) || // relatedTarget is null when split panel is closed\n (!isForSplitPanel &&\n (isFromAnotherTrigger || // for key navigation from another trigger button\n !isForPreviousActiveDrawer)) // for when the drawer was not opened recently\n ) {\n shouldShowTooltip = true;\n }\n setSupressTooltip(!shouldShowTooltip);\n setShowTooltip(true);\n },\n [\n // To assert reference equality check\n isForPreviousActiveDrawer,\n isForSplitPanel,\n ]\n );\n\n const tooltipVisible = useMemo(() => {\n return (\n hasTooltip &&\n showTooltip &&\n !suppressTooltip &&\n !!containerRef?.current &&\n tooltipValue &&\n !(isMobile && hasOpenDrawer)\n );\n }, [hasTooltip, showTooltip, containerRef, tooltipValue, isMobile, hasOpenDrawer, suppressTooltip]);\n\n useEffect(() => {\n if (hasTooltip && tooltipValue) {\n const close = () => {\n setShowTooltip(false);\n setSupressTooltip(false);\n };\n\n const shouldCloseTooltip = (event: PointerEvent) => {\n if (event.target && containerRef && (containerRef.current as any)?.contains(event.target as HTMLElement)) {\n return false;\n }\n return true;\n };\n\n const handlePointerDownEvent = (event: PointerEvent) => {\n if (shouldCloseTooltip(event)) {\n close();\n }\n };\n\n const handleKeyDownEvent = (event: KeyboardEvent) => {\n if (event.key === 'Escape') {\n close();\n }\n };\n\n const wrapperDiv = containerRef.current;\n if (wrapperDiv) {\n const controller = new AbortController();\n wrapperDiv.addEventListener('pointerdown', handlePointerDownEvent, { signal: controller.signal });\n wrapperDiv.addEventListener('keydown', handleKeyDownEvent, { signal: controller.signal });\n\n return () => {\n controller.abort();\n };\n }\n }\n }, [containerRef, hasTooltip, tooltipValue]);\n\n useEffect(() => {\n if (tooltipVisible) {\n return registerTooltip(() => {\n setShowTooltip(false);\n setSupressTooltip(false);\n });\n }\n }, [tooltipVisible]);\n\n return (\n handlePointerEnter(),\n onPointerLeave: () => handleBlur(true),\n onFocus: e => handleOnFocus(e as any),\n onBlur: () => handleBlur(true),\n })}\n className={styles['trigger-wrapper']}\n >\n }\n type=\"button\"\n data-testid={testId}\n data-shift-focus=\"awsui-layout-drawer-trigger\"\n >\n \n {(iconName || iconSvg) && }\n \n \n {badge &&
    }\n {tooltipVisible && (\n \n )}\n
    \n );\n}\n\nexport default React.forwardRef(TriggerButton);\n", "\n import './styles.scoped.css';\n export default {\n \"trigger-button-styles\": \"awsui_trigger-button-styles_lpshu_1kyee_145\",\n \"trigger-badge-wrapper\": \"awsui_trigger-badge-wrapper_lpshu_1kyee_168\",\n \"trigger\": \"awsui_trigger_lpshu_1kyee_145\",\n \"selected\": \"awsui_selected_lpshu_1kyee_212\",\n \"badge\": \"awsui_badge_lpshu_1kyee_232\",\n \"trigger-wrapper\": \"awsui_trigger-wrapper_lpshu_1kyee_236\",\n \"dot\": \"awsui_dot_lpshu_1kyee_244\"\n};\n ", "\n import './styles.scoped.css';\n export default {\n \"universal-toolbar\": \"awsui_universal-toolbar_1kzri_1vl4l_153\",\n \"disable-body-scroll\": \"awsui_disable-body-scroll_1kzri_1vl4l_174\",\n \"toolbar-hidden\": \"awsui_toolbar-hidden_1kzri_1vl4l_177\",\n \"toolbar-container\": \"awsui_toolbar-container_1kzri_1vl4l_180\",\n \"universal-toolbar-nav\": \"awsui_universal-toolbar-nav_1kzri_1vl4l_189\",\n \"universal-toolbar-breadcrumbs\": \"awsui_universal-toolbar-breadcrumbs_1kzri_1vl4l_193\",\n \"universal-toolbar-drawers\": \"awsui_universal-toolbar-drawers_1kzri_1vl4l_198\",\n \"drawers-desktop-triggers-container\": \"awsui_drawers-desktop-triggers-container_1kzri_1vl4l_206\",\n \"drawers-mobile-triggers-container\": \"awsui_drawers-mobile-triggers-container_1kzri_1vl4l_207\",\n \"drawers-trigger-content\": \"awsui_drawers-trigger-content_1kzri_1vl4l_250\",\n \"group-divider\": \"awsui_group-divider_1kzri_1vl4l_260\",\n \"drawers-trigger\": \"awsui_drawers-trigger_1kzri_1vl4l_250\",\n \"block-body-scroll\": \"awsui_block-body-scroll_1kzri_1vl4l_273\"\n};\n ", "// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport { createWidgetizedAppLayoutDrawer, createWidgetizedAppLayoutGlobalDrawers } from './drawer';\nimport { createWidgetizedAppLayoutNavigation } from './navigation';\nimport { createWidgetizedAppLayoutNotifications } from './notifications';\nimport {\n createWidgetizedAppLayoutSplitPanelDrawerBottom,\n createWidgetizedAppLayoutSplitPanelDrawerSide,\n} from './split-panel';\nimport { createWidgetizedAppLayoutToolbar } from './toolbar';\n\nexport const AppLayoutNavigation = createWidgetizedAppLayoutNavigation();\nexport const AppLayoutDrawer = createWidgetizedAppLayoutDrawer();\nexport const AppLayoutGlobalDrawers = createWidgetizedAppLayoutGlobalDrawers();\nexport const AppLayoutNotifications = createWidgetizedAppLayoutNotifications();\nexport const AppLayoutToolbar = createWidgetizedAppLayoutToolbar();\nexport const AppLayoutSplitPanelBottom = createWidgetizedAppLayoutSplitPanelDrawerBottom();\nexport const AppLayoutSplitPanelSide = createWidgetizedAppLayoutSplitPanelDrawerSide();\n", "// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React, { useLayoutEffect, useState } from 'react';\n\nimport { warnOnce } from '@cloudscape-design/component-toolkit/internal';\n\nimport { awsuiPluginsInternal } from '../../internal/plugins/api';\nimport { RegistrationState } from '../../internal/plugins/controllers/app-layout-widget';\nimport { AppLayoutProps } from '../interfaces';\nimport { OnChangeParams } from '../utils/use-drawers';\nimport { Focusable, FocusControlMultipleStates } from '../utils/use-focus-control';\nimport { SplitPanelToggleProps, ToolbarProps } from './toolbar';\n\nexport interface SharedProps {\n forceDeduplicationType?: 'primary' | 'secondary' | 'suspended' | 'off';\n ariaLabels: AppLayoutProps.Labels | undefined;\n navigation: React.ReactNode;\n navigationOpen: boolean;\n onNavigationToggle: (open: boolean) => void;\n navigationFocusRef: React.Ref | undefined;\n breadcrumbs: React.ReactNode;\n activeDrawerId: string | null;\n drawers: ReadonlyArray | undefined;\n onActiveDrawerChange: ((drawerId: string | null, params: OnChangeParams) => void) | undefined;\n drawersFocusRef: React.Ref | undefined;\n globalDrawersFocusControl?: FocusControlMultipleStates | undefined;\n globalDrawers?: ReadonlyArray | undefined;\n activeGlobalDrawersIds?: Array | undefined;\n onActiveGlobalDrawersChange?: ((newDrawerId: string, params: OnChangeParams) => void) | undefined;\n splitPanel: React.ReactNode;\n splitPanelToggleProps: SplitPanelToggleProps;\n splitPanelFocusRef: React.Ref | undefined;\n onSplitPanelToggle: () => void;\n}\n\nfunction checkAlreadyExists(value: boolean, propName: string) {\n if (value) {\n warnOnce(\n 'AppLayout',\n `Another app layout instance on this page already defines ${propName} property. This instance will be ignored.`\n );\n return true;\n }\n return false;\n}\n\nexport function mergeProps(\n ownProps: SharedProps,\n additionalProps: ReadonlyArray>\n): ToolbarProps | null {\n const toolbar: ToolbarProps = {};\n for (const props of [ownProps, ...additionalProps]) {\n toolbar.ariaLabels = Object.assign(toolbar.ariaLabels ?? {}, props.ariaLabels);\n if (props.drawers && !checkAlreadyExists(!!toolbar.drawers, 'tools or drawers')) {\n toolbar.drawers = props.drawers;\n toolbar.activeDrawerId = props.activeDrawerId;\n toolbar.drawersFocusRef = props.drawersFocusRef;\n toolbar.onActiveDrawerChange = props.onActiveDrawerChange;\n }\n if (props.globalDrawers && !checkAlreadyExists(!!toolbar.globalDrawers, 'globalDrawers')) {\n toolbar.globalDrawersFocusControl = props.globalDrawersFocusControl;\n toolbar.globalDrawers = props.globalDrawers;\n toolbar.activeGlobalDrawersIds = props.activeGlobalDrawersIds;\n toolbar.onActiveGlobalDrawersChange = props.onActiveGlobalDrawersChange;\n }\n if (props.navigation && !checkAlreadyExists(!!toolbar.hasNavigation, 'navigation')) {\n // there is never a case where navigation will exist and a toggle will not so toolbar\n // can use the hasNavigation here to conditionally render the navigationToggle button\n toolbar.hasNavigation = true;\n toolbar.navigationOpen = props.navigationOpen;\n toolbar.navigationFocusRef = props.navigationFocusRef;\n toolbar.onNavigationToggle = props.onNavigationToggle;\n }\n if (props.splitPanel && !checkAlreadyExists(!!toolbar.hasSplitPanel, 'splitPanel')) {\n toolbar.hasSplitPanel = true;\n toolbar.splitPanelFocusRef = props.splitPanelFocusRef;\n toolbar.splitPanelToggleProps = props.splitPanelToggleProps;\n toolbar.onSplitPanelToggle = props.onSplitPanelToggle;\n }\n if (props.breadcrumbs && !checkAlreadyExists(!!toolbar.hasBreadcrumbsPortal, 'hasBreadcrumbsPortal')) {\n toolbar.hasBreadcrumbsPortal = true;\n }\n }\n // do not render toolbar if no fields are defined, except ariaLabels, which are always there\n return Object.keys(toolbar).filter(key => key !== 'ariaLabels').length > 0 ? toolbar : null;\n}\n\nexport function useMultiAppLayout(props: SharedProps, isEnabled: boolean) {\n const [registration, setRegistration] = useState | null>(null);\n const { forceDeduplicationType } = props;\n\n useLayoutEffect(() => {\n if (!isEnabled || forceDeduplicationType === 'suspended') {\n return;\n }\n if (forceDeduplicationType === 'off') {\n setRegistration({ type: 'primary', discoveredProps: [] });\n return;\n }\n return awsuiPluginsInternal.appLayoutWidget.register(forceDeduplicationType, props =>\n setRegistration(props as RegistrationState)\n );\n }, [forceDeduplicationType, isEnabled]);\n\n useLayoutEffect(() => {\n if (registration?.type === 'secondary') {\n registration.update(props);\n }\n });\n\n return {\n registered: !!registration?.type,\n toolbarProps: registration?.type === 'primary' ? mergeProps(props, registration.discoveredProps) : null,\n };\n}\n", "// 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 customCssProps from '../../../internal/generated/custom-css-properties';\nimport { useMobile } from '../../../internal/hooks/use-mobile';\nimport { highContrastHeaderClassName } from '../../../internal/utils/content-header-utils';\nimport { AppLayoutPropsWithDefaults } 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\nconst contentTypeCustomWidths: Array = ['dashboard', 'cards', 'table'];\n\ninterface SkeletonLayoutProps\n extends Pick<\n AppLayoutPropsWithDefaults,\n | 'notifications'\n | 'headerVariant'\n | 'contentHeader'\n | 'content'\n | 'contentType'\n | 'maxContentWidth'\n | 'disableContentPaddings'\n | 'navigation'\n | 'navigationOpen'\n | 'navigationWidth'\n | 'tools'\n | 'toolsOpen'\n | 'toolsWidth'\n | 'placement'\n > {\n style?: React.CSSProperties;\n toolbar?: React.ReactNode;\n splitPanelOpen?: boolean;\n sideSplitPanel?: React.ReactNode;\n bottomSplitPanel?: React.ReactNode;\n globalTools?: React.ReactNode;\n globalToolsOpen?: boolean;\n navigationAnimationDisabled?: boolean;\n isNested?: boolean;\n}\n\nexport const SkeletonLayout = React.forwardRef(\n (\n {\n style,\n notifications,\n headerVariant,\n contentHeader,\n content,\n navigation,\n navigationOpen,\n navigationWidth,\n tools,\n globalTools,\n toolsOpen,\n toolsWidth,\n toolbar,\n sideSplitPanel,\n bottomSplitPanel,\n splitPanelOpen,\n placement,\n contentType,\n maxContentWidth,\n disableContentPaddings,\n globalToolsOpen,\n navigationAnimationDisabled,\n isNested,\n },\n ref\n ) => {\n const isMobile = useMobile();\n const isMaxWidth = maxContentWidth === Number.MAX_VALUE || maxContentWidth === Number.MAX_SAFE_INTEGER;\n const anyPanelOpen = navigationOpen || toolsOpen;\n return (\n \n {toolbar}\n {navigation && (\n \n {navigation}\n \n )}\n
    \n {notifications && (\n \n )}\n {notifications}\n \n {contentHeader &&
    {contentHeader}
    }\n
    {content}
    \n \n {bottomSplitPanel && (\n
    \n {bottomSplitPanel}\n
    \n )}\n
    \n {sideSplitPanel && (\n
    \n {sideSplitPanel}\n
    \n )}\n \n {tools}\n \n
    {globalTools}
    \n \n );\n }\n);\n", "// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport { useCallback, useEffect, useRef, useState } from 'react';\n\nimport { useResizeObserver } from '@cloudscape-design/component-toolkit/internal';\nimport { getLogicalBoundingClientRect } from '@cloudscape-design/component-toolkit/internal';\n\nimport { useObservedElement } from './use-observed-element';\n\nexport function useAppLayoutPlacement(headerSelector: string, footerSelector: string) {\n const mainElementRef = useRef(null);\n const headerHeight = useObservedElement(mainElementRef, headerSelector);\n const footerHeight = useObservedElement(mainElementRef, footerSelector);\n const [offsets, setOffsets] = useState({\n insetInlineStart: 0,\n insetInlineEnd: 0,\n inlineSize: Number.POSITIVE_INFINITY,\n });\n\n const updatePosition = useCallback(() => {\n if (!mainElementRef.current) {\n return;\n }\n const { insetInlineStart, insetInlineEnd, inlineSize } = getLogicalBoundingClientRect(mainElementRef.current);\n\n // skip reading sizes in JSDOM\n if (inlineSize === 0) {\n return;\n }\n\n setOffsets({ insetInlineStart, insetInlineEnd: inlineSize - insetInlineEnd, inlineSize });\n }, []);\n\n useEffect(() => {\n window.addEventListener('resize', updatePosition);\n return () => window.removeEventListener('resize', updatePosition);\n }, [updatePosition]);\n\n useResizeObserver(mainElementRef, updatePosition);\n\n return [mainElementRef, { ...offsets, insetBlockStart: headerHeight, insetBlockEnd: footerHeight }] as const;\n}\n", "// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React, { useCallback, useState } from 'react';\n\nimport { useResizeObserver } from '@cloudscape-design/component-toolkit/internal';\n\nexport function useObservedElement(rootElementRef: React.RefObject, selector: string) {\n const getElement = useCallback(() => {\n const document = rootElementRef.current?.ownerDocument ?? window.document;\n return document.querySelector(selector);\n }, [rootElementRef, selector]);\n\n const [height, setHeight] = useState(0);\n\n useResizeObserver(getElement, entry => setHeight(entry.borderBoxHeight));\n\n return height;\n}\n", "// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React from 'react';\n\nimport useBaseComponent from '../internal/hooks/use-base-component';\nimport { applyDisplayName } from '../internal/utils/apply-display-name';\nimport { AreaChartProps } from './interfaces';\nimport InternalAreaChart from './internal';\n\nexport { AreaChartProps };\n\nfunction AreaChart({\n height = 500,\n xScaleType = 'linear',\n yScaleType = 'linear',\n statusType = 'finished',\n detailPopoverSize = 'medium',\n i18nStrings = {},\n ...props\n}: AreaChartProps) {\n const baseComponentProps = useBaseComponent('AreaChart', {\n props: {\n detailPopoverSize,\n hideLegend: props.hideLegend,\n hideFilter: props.hideFilter,\n fitHeight: props.fitHeight,\n xScaleType,\n yScaleType,\n },\n });\n return (\n \n );\n}\n\napplyDisplayName(AreaChart, 'AreaChart');\n\nexport default AreaChart;\n", "// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React, { useEffect, useRef, useState } from 'react';\nimport clsx from 'clsx';\n\nimport { warnOnce } from '@cloudscape-design/component-toolkit/internal';\nimport { getIsRtl } from '@cloudscape-design/component-toolkit/internal';\n\nimport { getBaseProps } from '../internal/base-component';\nimport ChartStatusContainer, { getChartStatus } from '../internal/components/chart-status-container';\nimport { ChartWrapper } from '../internal/components/chart-wrapper';\nimport { InternalBaseComponentProps } from '../internal/hooks/use-base-component';\nimport { useMergeRefs } from '../internal/hooks/use-merge-refs';\nimport { isDevelopment } from '../internal/is-development';\nimport { SomeRequired } from '../internal/types';\nimport { nodeBelongs } from '../internal/utils/node-belongs';\nimport ChartContainer from './chart-container';\nimport AreaChartFilter from './elements/area-chart-filter';\nimport AreaChartLegend from './elements/area-chart-legend';\nimport { AreaChartProps } from './interfaces';\nimport useChartModel from './model/use-chart-model';\nimport useFilterProps from './model/use-filter-props';\nimport useHighlightProps from './model/use-highlight-props';\nimport { isSeriesValid } from './model/utils';\n\nimport styles from './styles.css.js';\n\ntype InternalAreaChartProps = SomeRequired<\n AreaChartProps,\n 'height' | 'xScaleType' | 'yScaleType' | 'statusType' | 'detailPopoverSize' | 'i18nStrings'\n> &\n InternalBaseComponentProps;\n\nexport default function InternalAreaChart({\n fitHeight,\n height,\n xScaleType,\n yScaleType,\n xDomain,\n yDomain,\n xTickFormatter,\n yTickFormatter,\n detailTotalFormatter,\n highlightedSeries: controlledHighlightedSeries,\n visibleSeries: controlledVisibleSeries,\n series: externalSeries,\n onFilterChange: controlledOnVisibleChange,\n onHighlightChange: controlledOnHighlightChange,\n i18nStrings,\n ariaLabel,\n ariaLabelledby,\n ariaDescription,\n xTitle,\n yTitle,\n hideFilter,\n additionalFilters,\n hideLegend,\n legendTitle,\n statusType,\n detailPopoverSize,\n detailPopoverFooter,\n empty,\n noMatch,\n errorText,\n loadingText,\n recoveryText,\n onRecoveryClick,\n __internalRootRef = null,\n ...props\n}: InternalAreaChartProps) {\n const baseProps = getBaseProps(props);\n const containerRef = useRef(null);\n const popoverRef = useRef(null);\n\n if (isDevelopment) {\n // eslint-disable-next-line react-hooks/rules-of-hooks\n useEffect(() => {\n if (!isSeriesValid(externalSeries)) {\n warnOnce(\n 'AreaChart',\n \"The `series` property violates the component's constraints: all `area` \" +\n 'series must have `data` arrays of the same length and with the same x-values.'\n );\n }\n }, [externalSeries]);\n }\n\n const [width, setWidth] = useState(0);\n const [visibleSeries, setVisibleSeries] = useFilterProps(\n externalSeries,\n controlledVisibleSeries,\n controlledOnVisibleChange\n );\n const [highlightedSeries, setHighlightedSeries] = useHighlightProps(\n externalSeries,\n controlledHighlightedSeries,\n controlledOnHighlightChange\n );\n const isRtl = containerRef.current ? getIsRtl(containerRef.current) : false;\n const model = useChartModel({\n isRtl,\n fitHeight,\n externalSeries,\n visibleSeries,\n setVisibleSeries,\n highlightedSeries,\n setHighlightedSeries,\n xDomain,\n yDomain,\n xScaleType,\n yScaleType,\n height,\n width,\n popoverRef,\n statusType,\n });\n\n const { isEmpty, isNoMatch, showChart } = getChartStatus({\n externalData: externalSeries,\n visibleData: visibleSeries,\n statusType,\n });\n const showFilters = statusType === 'finished' && (!isEmpty || isNoMatch) && (additionalFilters || !hideFilter);\n const showLegend = !hideLegend && !isEmpty && statusType === 'finished';\n const reserveLegendSpace = !showChart && !hideLegend;\n const reserveFilterSpace = !showChart && !isNoMatch && (!hideFilter || additionalFilters);\n\n useEffect(() => {\n const onKeyDown = model.handlers.onDocumentKeyDown;\n document.addEventListener('keydown', onKeyDown);\n return () => document.removeEventListener('keydown', onKeyDown);\n }, [model.handlers.onDocumentKeyDown]);\n\n const onBlur = (event: React.FocusEvent) => {\n if (event.relatedTarget && !nodeBelongs(containerRef.current, event.relatedTarget)) {\n model.handlers.onContainerBlur();\n }\n };\n\n const mergedRef = useMergeRefs(containerRef, __internalRootRef);\n\n return (\n \n ) : null\n }\n additionalFilters={showFilters ? additionalFilters : null}\n reserveFilterSpace={!!reserveFilterSpace}\n reserveLegendSpace={!!reserveLegendSpace}\n chartStatus={\n \n }\n chart={\n showChart ? (\n \n ) : null\n }\n legend={\n showLegend ? (\n \n ) : null\n }\n onBlur={onBlur}\n />\n );\n}\n", "// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React, { useMemo } from 'react';\n\nimport { useInternalI18n } from '../../../i18n/context';\nimport InternalLink from '../../../link/internal';\nimport InternalLiveRegion from '../../../live-region/internal';\nimport InternalStatusIndicator from '../../../status-indicator/internal';\nimport { BaseComponentProps } from '../../base-component';\nimport { fireNonCancelableEvent, NonCancelableEventHandler } from '../../events';\n\nimport styles from './styles.css.js';\n\ninterface ChartStatusContainerProps extends BaseComponentProps {\n statusType: 'loading' | 'finished' | 'error';\n\n empty?: React.ReactNode;\n noMatch?: React.ReactNode;\n\n loadingText?: string;\n errorText?: string;\n recoveryText?: string;\n\n onRecoveryClick?: NonCancelableEventHandler;\n\n // From `getChartStatus`\n isEmpty?: boolean;\n isNoMatch?: boolean;\n showChart?: boolean;\n}\n\nexport function getChartStatus({\n externalData,\n visibleData,\n statusType,\n}: {\n externalData: ReadonlyArray;\n visibleData: ReadonlyArray;\n statusType: 'loading' | 'finished' | 'error';\n}) {\n const isEmpty = !visibleData || visibleData.length === 0;\n const isNoMatch = isEmpty && visibleData.length !== externalData.length;\n const showChart = statusType === 'finished' && !isEmpty;\n return { isEmpty, isNoMatch, showChart };\n}\n\nexport default function ChartStatusContainer({\n statusType,\n errorText,\n loadingText,\n recoveryText,\n noMatch,\n empty,\n onRecoveryClick,\n isNoMatch,\n isEmpty,\n showChart,\n}: ChartStatusContainerProps) {\n const i18n = useInternalI18n('[charts]');\n\n const statusContainer = useMemo(() => {\n const handleRecoveryClick = (event: CustomEvent) => {\n event.preventDefault();\n fireNonCancelableEvent(onRecoveryClick);\n };\n if (statusType === 'error') {\n const renderedRecoveryText = i18n('recoveryText', recoveryText);\n return (\n \n {i18n('errorText', errorText)}{' '}\n {!!renderedRecoveryText && !!onRecoveryClick && (\n \n {renderedRecoveryText}\n \n )}\n \n );\n }\n\n if (statusType === 'loading') {\n return {i18n('loadingText', loadingText)};\n }\n\n if (isNoMatch) {\n return
    {noMatch}
    ;\n }\n\n if (isEmpty) {\n return
    {empty}
    ;\n }\n }, [i18n, statusType, onRecoveryClick, isEmpty, isNoMatch, recoveryText, loadingText, errorText, empty, noMatch]);\n\n return (\n
    \n {!showChart && statusContainer}\n
    \n );\n}\n", "\n import './styles.scoped.css';\n export default {\n \"root\": \"awsui_root_11n0s_1hwhs_9\",\n \"empty\": \"awsui_empty_11n0s_1hwhs_13\"\n};\n ", "// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport React, { forwardRef } from 'react';\nimport clsx from 'clsx';\n\nimport InternalBox from '../../../box/internal.js';\nimport InternalSpaceBetween from '../../../space-between/internal.js';\nimport { BaseComponentProps, getBaseProps } from '../../base-component/index.js';\n\nimport styles from './styles.css.js';\n\ninterface ChartWrapperProps extends BaseComponentProps {\n fitHeight: boolean;\n defaultFilter: React.ReactNode;\n additionalFilters: React.ReactNode;\n reserveFilterSpace: boolean;\n reserveLegendSpace: boolean;\n chartStatus: React.ReactNode;\n chart: React.ReactNode;\n legend: React.ReactNode;\n onBlur?(event: React.FocusEvent): void;\n contentClassName?: string;\n contentMinHeight?: number;\n}\n\nexport const ChartWrapper = forwardRef(\n (\n {\n defaultFilter,\n additionalFilters,\n reserveFilterSpace,\n reserveLegendSpace,\n chartStatus,\n chart,\n legend,\n onBlur,\n contentClassName,\n contentMinHeight,\n fitHeight,\n ...props\n }: ChartWrapperProps,\n ref: React.Ref\n ) => {\n const baseProps = getBaseProps(props);\n\n const filtersNode = (defaultFilter || additionalFilters) && (\n \n \n {defaultFilter}\n {additionalFilters}\n \n \n );\n\n const legendNode = legend && {legend};\n\n if (fitHeight) {\n return (\n \n
    \n {filtersNode}\n\n \n {chartStatus}\n {chart}\n
    \n\n {legendNode}\n \n \n );\n }\n\n return (\n
    \n {filtersNode}\n\n \n {chartStatus}\n {chart}\n
    \n\n {legendNode}\n \n );\n }\n);\n", "\n import './styles.scoped.css';\n export default {\n \"wrapper\": \"awsui_wrapper_z5mul_19j2m_181\",\n \"wrapper--fit-height\": \"awsui_wrapper--fit-height_z5mul_19j2m_214\",\n \"inner-wrapper--fit-height\": \"awsui_inner-wrapper--fit-height_z5mul_19j2m_219\",\n \"has-default-filter\": \"awsui_has-default-filter_z5mul_19j2m_225\",\n \"content\": \"awsui_content_z5mul_19j2m_229\",\n \"content--reserve-filter\": \"awsui_content--reserve-filter_z5mul_19j2m_236\",\n \"content--reserve-legend\": \"awsui_content--reserve-legend_z5mul_19j2m_240\",\n \"content--fit-height\": \"awsui_content--fit-height_z5mul_19j2m_244\",\n \"filter-container\": \"awsui_filter-container_z5mul_19j2m_248\"\n};\n ", "// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React, { memo, useEffect, useMemo, useRef, useState } from 'react';\n\nimport AxisLabel from '../internal/components/cartesian-chart/axis-label';\nimport BlockEndLabels, { useBLockEndLabels } from '../internal/components/cartesian-chart/block-end-labels';\nimport { CartesianChartContainer } from '../internal/components/cartesian-chart/chart-container';\nimport EmphasizedBaseline from '../internal/components/cartesian-chart/emphasized-baseline';\nimport InlineStartLabels from '../internal/components/cartesian-chart/inline-start-labels';\nimport LabelsMeasure from '../internal/components/cartesian-chart/labels-measure';\nimport ChartPlot from '../internal/components/chart-plot';\nimport { useMergeRefs } from '../internal/hooks/use-merge-refs';\nimport useContainerWidth from '../internal/utils/use-container-width';\nimport { useSelector } from './async-store';\nimport AreaChartPopover from './elements/chart-popover';\nimport AreaDataSeries from './elements/data-series';\nimport AreaHighlightedPoint from './elements/highlighted-point';\nimport useHighlightDetails from './elements/use-highlight-details';\nimport AreaVerticalMarker from './elements/vertical-marker';\nimport { AreaChartProps } from './interfaces';\nimport { ChartModel } from './model';\n\nconst DEFAULT_CHART_WIDTH = 500;\nconst INLINE_START_LABELS_MARGIN = 16;\nconst BLOCK_END_LABELS_OFFSET = 12;\n\ntype TickFormatter = undefined | ((value: AreaChartProps.DataTypes) => string);\n\ninterface ChartContainerProps\n extends Pick<\n AreaChartProps,\n | 'xTitle'\n | 'yTitle'\n | 'xTickFormatter'\n | 'yTickFormatter'\n | 'detailTotalFormatter'\n | 'detailPopoverSize'\n | 'detailPopoverFooter'\n | 'ariaLabel'\n | 'ariaLabelledby'\n | 'ariaDescription'\n | 'i18nStrings'\n > {\n model: ChartModel;\n autoWidth: (value: number) => void;\n fitHeight?: boolean;\n hasFilters: boolean;\n minHeight: number;\n isRTL?: boolean;\n}\n\nexport default memo(ChartContainer) as typeof ChartContainer;\n\nfunction ChartContainer({\n model,\n autoWidth,\n xTitle,\n yTitle,\n detailPopoverSize,\n detailPopoverFooter,\n ariaLabel,\n ariaLabelledby,\n ariaDescription,\n i18nStrings: {\n xTickFormatter: deprecatedXTickFormatter,\n yTickFormatter: deprecatedYTickFormatter,\n detailTotalFormatter: deprecatedDetailTotalFormatter,\n detailTotalLabel,\n chartAriaRoleDescription,\n xAxisAriaRoleDescription,\n yAxisAriaRoleDescription,\n detailPopoverDismissAriaLabel,\n } = {},\n fitHeight,\n hasFilters,\n minHeight,\n xTickFormatter = deprecatedXTickFormatter,\n yTickFormatter = deprecatedYTickFormatter,\n detailTotalFormatter = deprecatedDetailTotalFormatter,\n isRTL,\n}: ChartContainerProps) {\n const [inlineStartLabelsWidth, setInlineStartLabelsWidth] = useState(0);\n const [containerWidth, containerWidthRef] = useContainerWidth(DEFAULT_CHART_WIDTH);\n const maxInlineStartLabelsWidth = Math.round(containerWidth / 2);\n\n const blockEndLabelsProps = useBLockEndLabels({\n ticks: model.computed.xTicks,\n scale: model.computed.xScale,\n tickFormatter: xTickFormatter as TickFormatter,\n });\n\n // Calculate the width of the plot area and tell it to the parent.\n const plotWidth = Math.max(0, containerWidth - inlineStartLabelsWidth - INLINE_START_LABELS_MARGIN);\n useEffect(() => {\n autoWidth(plotWidth);\n }, [autoWidth, plotWidth]);\n\n const highlightDetails = useHighlightDetails({\n model,\n xTickFormatter,\n yTickFormatter,\n detailTotalFormatter,\n detailTotalLabel,\n });\n\n const highlightedPointRef = useRef(null);\n\n const mergedRef = useMergeRefs(containerWidthRef, model.refs.container);\n\n const isPointHighlighted = model.interactions.get().highlightedPoint !== null;\n\n const highlightedX = useSelector(model.interactions, state => state.highlightedX);\n\n const detailPopoverFooterContent = useMemo(\n () => (detailPopoverFooter && highlightedX ? detailPopoverFooter(highlightedX[0].x) : null),\n [detailPopoverFooter, highlightedX]\n );\n\n return (\n }\n leftAxisLabelMeasure={\n \n }\n bottomAxisLabel={}\n chartPlot={\n \n \n\n \n\n \n\n \n\n \n\n \n\n \n \n }\n popover={\n \n }\n />\n );\n}\n", "// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React, { memo } from 'react';\nimport clsx from 'clsx';\n\nimport InternalBox from '../../../box/internal';\n\nimport styles from './styles.css.js';\n\ninterface AxisLabelProps {\n title?: string;\n axis: 'x' | 'y';\n position: 'left' | 'bottom';\n}\n\nexport default memo(AxisLabel) as typeof AxisLabel;\n\nfunction AxisLabel({ title, axis, position }: AxisLabelProps) {\n if (!title) {\n return null;\n }\n\n return (\n \n {title}\n \n );\n}\n", "\n import './styles.scoped.css';\n export default {\n \"axis\": \"awsui_axis_f0fot_l44um_9\",\n \"vertical-marker\": \"awsui_vertical-marker_f0fot_l44um_10\",\n \"axis--emphasized\": \"awsui_axis--emphasized_f0fot_l44um_15\",\n \"axis-label\": \"awsui_axis-label_f0fot_l44um_19\",\n \"axis-label--x\": \"awsui_axis-label--x_f0fot_l44um_24\",\n \"axis-label--y\": \"awsui_axis-label--y_f0fot_l44um_25\",\n \"grid\": \"awsui_grid_f0fot_l44um_29\",\n \"ticks__line\": \"awsui_ticks__line_f0fot_l44um_34\",\n \"ticks__text\": \"awsui_ticks__text_f0fot_l44um_39\",\n \"ticks--y\": \"awsui_ticks--y_f0fot_l44um_44\",\n \"ticks--x\": \"awsui_ticks--x_f0fot_l44um_45\",\n \"ticks--bottom\": \"awsui_ticks--bottom_f0fot_l44um_49\",\n \"labels-inline-start\": \"awsui_labels-inline-start_f0fot_l44um_54\",\n \"ticks\": \"awsui_ticks_f0fot_l44um_34\",\n \"labels-inline-start__label\": \"awsui_labels-inline-start__label_f0fot_l44um_69\",\n \"labels-inline-start--hidden\": \"awsui_labels-inline-start--hidden_f0fot_l44um_73\",\n \"labels-block-end\": \"awsui_labels-block-end_f0fot_l44um_81\",\n \"vertical-marker-circle\": \"awsui_vertical-marker-circle_f0fot_l44um_92\",\n \"vertical-marker-circle-active\": \"awsui_vertical-marker-circle-active_f0fot_l44um_98\",\n \"focus-outline\": \"awsui_focus-outline_f0fot_l44um_103\",\n \"chart-container\": \"awsui_chart-container_f0fot_l44um_111\",\n \"fit-height\": \"awsui_fit-height_f0fot_l44um_116\",\n \"chart-container-outer\": \"awsui_chart-container-outer_f0fot_l44um_121\",\n \"has-filters\": \"awsui_has-filters_f0fot_l44um_127\",\n \"chart-container-inner\": \"awsui_chart-container-inner_f0fot_l44um_131\",\n \"chart-container-plot-wrapper\": \"awsui_chart-container-plot-wrapper_f0fot_l44um_138\",\n \"chart-container-plot\": \"awsui_chart-container-plot_f0fot_l44um_138\",\n \"chart-container-bottom-labels\": \"awsui_chart-container-bottom-labels_f0fot_l44um_150\"\n};\n ", "// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React, { memo, useRef } from 'react';\nimport clsx from 'clsx';\n\nimport { useInternalI18n } from '../../../i18n/context';\nimport { TICK_LENGTH, TICK_LINE_HEIGHT, TICK_MARGIN } from './constants';\nimport { ChartDataTypes } from './interfaces';\nimport { FormattedTick, formatTicks, getVisibleTicks } from './label-utils';\nimport { ChartScale, NumericChartScale } from './scales';\n\nimport styles from './styles.css.js';\n\ninterface BlockEndLabelsProps {\n axis?: 'x' | 'y';\n width: number;\n height: number;\n scale: ChartScale | NumericChartScale;\n title?: string;\n ariaRoleDescription?: string;\n offsetLeft?: number;\n offsetRight?: number;\n virtualTextRef: React.Ref;\n formattedTicks: readonly FormattedTick[];\n isRTL?: boolean;\n}\n\nexport function useBLockEndLabels({\n ticks,\n scale,\n tickFormatter,\n}: {\n scale: ChartScale | NumericChartScale;\n ticks: readonly ChartDataTypes[];\n tickFormatter?: (value: ChartDataTypes) => string;\n}) {\n const virtualTextRef = useRef(null);\n\n const cacheRef = useRef<{ [label: string]: number }>({});\n const getLabelSpace = (label: string) => {\n if (cacheRef.current[label] !== undefined && cacheRef.current[label] !== 0) {\n return cacheRef.current[label];\n }\n if (virtualTextRef.current && virtualTextRef.current.getComputedTextLength) {\n virtualTextRef.current.textContent = label;\n cacheRef.current[label] = virtualTextRef.current.getComputedTextLength();\n return cacheRef.current[label];\n }\n return 0;\n };\n\n const formattedTicks = formatTicks({ ticks, scale, getLabelSpace, tickFormatter });\n\n if (virtualTextRef.current) {\n virtualTextRef.current.textContent = '';\n }\n\n let height = TICK_LENGTH + TICK_MARGIN;\n for (const { lines } of formattedTicks) {\n height = Math.max(height, TICK_LENGTH + TICK_MARGIN + lines.length * TICK_LINE_HEIGHT);\n }\n\n return { virtualTextRef, formattedTicks, height };\n}\n\nexport default memo(BlockEndLabels) as typeof BlockEndLabels;\n\n// Renders the visible tick labels on the bottom axis, as well as their grid lines.\nfunction BlockEndLabels({\n axis = 'x',\n width,\n height,\n scale,\n title,\n ariaRoleDescription,\n offsetLeft = 0,\n offsetRight = 0,\n virtualTextRef,\n formattedTicks,\n isRTL = false,\n}: BlockEndLabelsProps) {\n const i18n = useInternalI18n('[charts]');\n\n const xOffset = scale.isCategorical() && axis === 'x' ? Math.max(0, scale.d3Scale.bandwidth() - 1) / 2 : 0;\n\n const offsetInlineStart = isRTL ? offsetRight : offsetLeft;\n const offsetInlineEnd = isRTL ? offsetLeft : offsetRight;\n\n const from = 0 - offsetInlineStart - xOffset;\n const until = width + offsetInlineEnd - xOffset;\n const balanceLabels = axis === 'x' && scale.scaleType !== 'log';\n const visibleTicks = getVisibleTicks(formattedTicks, from, until, balanceLabels);\n\n return (\n \n {visibleTicks.map(\n ({ position, lines }, index) =>\n isFinite(position) && (\n \n \n {lines.map((line, lineIndex) => (\n \n {line}\n \n ))}\n \n )\n )}\n\n \n \n );\n}\n", "// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nexport const TICK_LENGTH = 8;\nexport const TICK_MARGIN = 4;\nexport const TICK_LINE_HEIGHT = 16;\nexport const X_TICK_COUNT_RATIO = 100;\nexport const Y_TICK_COUNT_RATIO = 50;\n", "// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport { ChartDataTypes } from './interfaces';\nimport { ChartScale, NumericChartScale } from './scales';\n\nconst SPACE_BETWEEN = 4;\n\nexport interface FormattedTick {\n position: number;\n space: number;\n lines: string[];\n}\n\nexport function formatTicks({\n ticks,\n scale,\n getLabelSpace,\n tickFormatter,\n}: {\n ticks: readonly ChartDataTypes[];\n scale: ChartScale | NumericChartScale;\n getLabelSpace: (label: string) => number;\n tickFormatter?: (value: any) => string;\n}): FormattedTick[] {\n return ticks.map(tick => {\n const position = scale.d3Scale(tick as any) ?? NaN;\n const label = tickFormatter ? tickFormatter(tick as any) : tick.toString();\n const lines = (label + '').split('\\n');\n return { position, lines, space: Math.max(...lines.map(getLabelSpace)) };\n });\n}\n\nexport function getVisibleTicks(ticks: readonly FormattedTick[], from: number, until: number, balanceTicks = false) {\n ticks = getTicksInRange(ticks, from, until);\n return balanceTicks ? getReducedTicks(ticks) : removeIntersections(ticks);\n}\n\nfunction getTicksInRange(ticks: readonly FormattedTick[], from: number, until: number) {\n return ticks.filter(tick => from <= tick.position - tick.space / 2 && tick.position + tick.space / 2 <= until);\n}\n\nfunction getReducedTicks(ticks: readonly FormattedTick[]): readonly FormattedTick[] {\n const reduceLabelRatio = findReduceLabelRatio(ticks);\n\n const reducedTicks = [];\n for (let index = 0; index < ticks.length; index += reduceLabelRatio) {\n reducedTicks.push(ticks[index]);\n }\n return reducedTicks;\n}\n\n// Returns a ratio such that all elements can be displayed with no intersections.\nfunction findReduceLabelRatio(ticks: readonly FormattedTick[], ratio = 1): number {\n if (ratio >= ticks.length) {\n return ratio;\n }\n for (let i = ratio; i < ticks.length; i += ratio) {\n if (hasIntersection(ticks[i - ratio], ticks[i])) {\n return findReduceLabelRatio(ticks, ratio + 1);\n }\n }\n return ratio;\n}\n\nfunction removeIntersections(ticks: readonly FormattedTick[]) {\n const visibleTicks = [];\n let prevTick = null;\n for (const tick of ticks) {\n if (!prevTick || !hasIntersection(prevTick, tick)) {\n visibleTicks.push(tick);\n prevTick = tick;\n }\n }\n return visibleTicks;\n}\n\nfunction hasIntersection(a: FormattedTick, b: FormattedTick) {\n const [left, right] = a.position < b.position ? [a, b] : [b, a];\n const leftEdge = left.position + left.space / 2 + SPACE_BETWEEN;\n const rightEdge = right.position - right.space / 2;\n return leftEdge > rightEdge;\n}\n\n// Ignoring as unsupported in JSDom.\n/* istanbul ignore next */\nexport function getSVGTextSize(element: null | SVGTextElement): undefined | { width: number; height: number } {\n if (element && element.getBBox) {\n return element.getBBox();\n }\n return undefined;\n}\n", "// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport React, { forwardRef } from 'react';\nimport clsx from 'clsx';\n\nimport styles from './styles.css.js';\n\ninterface CartesianChartContainerProps {\n minHeight: number;\n fitHeight: boolean;\n hasFilters: boolean;\n leftAxisLabel: React.ReactNode;\n leftAxisLabelMeasure: React.ReactNode;\n bottomAxisLabel: React.ReactNode;\n chartPlot: React.ReactNode;\n popover: React.ReactNode;\n}\n\nconst CONTENT_MIN_HEIGHT_BOUNDARY = 40;\n\nexport const CartesianChartContainer = forwardRef(\n (\n {\n minHeight,\n fitHeight,\n leftAxisLabel,\n leftAxisLabelMeasure,\n bottomAxisLabel,\n chartPlot,\n popover,\n hasFilters,\n }: CartesianChartContainerProps,\n ref: React.Ref\n ) => {\n if (fitHeight) {\n return (\n
    \n {leftAxisLabel}\n\n \n {leftAxisLabelMeasure}\n\n
    \n \n
    {chartPlot}
    \n
    \n\n
    \n {bottomAxisLabel}\n
    \n
    \n\n {popover}\n \n \n );\n }\n\n return (\n
    \n {leftAxisLabel}\n\n
    \n {leftAxisLabelMeasure}\n\n
    \n {chartPlot}\n {bottomAxisLabel}\n
    \n\n {popover}\n
    \n
    \n );\n }\n);\n", "// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React, { memo } from 'react';\nimport clsx from 'clsx';\n\nimport { TICK_LENGTH, TICK_MARGIN } from './constants';\nimport { NumericChartScale } from './scales';\n\nimport styles from './styles.css.js';\n\ninterface EmphasizedBaselineProps {\n axis?: 'x' | 'y';\n width: number;\n height: number;\n scale: NumericChartScale;\n}\n\nexport default memo(EmphasizedBaseline) as typeof EmphasizedBaseline;\n\nfunction EmphasizedBaseline({ axis = 'x', width, height, scale }: EmphasizedBaselineProps) {\n // Y position of the zero baseline, if it exists\n const baselineY = scale.d3Scale(0) ?? NaN;\n const showYBaseline = axis === 'x' && isFinite(baselineY) && baselineY <= height;\n\n if (showYBaseline) {\n return (\n \n );\n }\n\n if (axis === 'y') {\n return (\n \n );\n }\n\n return null;\n}\n", "// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React, { memo, useRef } from 'react';\nimport clsx from 'clsx';\n\nimport { getIsRtl } from '@cloudscape-design/component-toolkit/internal';\n\nimport { useInternalI18n } from '../../../i18n/context';\nimport { ChartDataTypes } from '../../../mixed-line-bar-chart/interfaces';\nimport ResponsiveText from '../responsive-text';\nimport { TICK_LENGTH, TICK_LINE_HEIGHT, TICK_MARGIN } from './constants';\nimport { formatTicks, getSVGTextSize, getVisibleTicks } from './label-utils';\nimport { ChartScale, NumericChartScale } from './scales';\n\nimport styles from './styles.css.js';\n\nconst OFFSET_PX = 12;\n\ninterface InlineStartLabelsProps {\n axis?: 'x' | 'y';\n plotWidth: number;\n plotHeight: number;\n maxLabelsWidth?: number;\n scale: ChartScale | NumericChartScale;\n ticks: readonly ChartDataTypes[];\n tickFormatter?: (value: number) => string;\n title?: string;\n ariaRoleDescription?: string;\n}\n\nexport default memo(InlineStartLabels) as typeof InlineStartLabels;\n\n// Renders the visible tick labels on the value axis, as well as their grid lines.\nfunction InlineStartLabels({\n axis = 'y',\n plotWidth,\n plotHeight,\n maxLabelsWidth = Number.POSITIVE_INFINITY,\n scale,\n ticks,\n tickFormatter,\n title,\n ariaRoleDescription,\n}: InlineStartLabelsProps) {\n const i18n = useInternalI18n('[charts]');\n const virtualTextRef = useRef(null);\n\n const yOffset = axis === 'x' && scale.isCategorical() ? Math.max(0, scale.d3Scale.bandwidth() - 1) / 2 : 0;\n\n const labelToBoxCache = useRef<{ [label: string]: undefined | { width: number; height: number } }>({});\n const getLabelSpace = (label: string) => {\n if (labelToBoxCache.current[label] !== undefined) {\n return labelToBoxCache.current[label]?.height ?? 0;\n }\n if (virtualTextRef.current) {\n virtualTextRef.current.textContent = label;\n }\n labelToBoxCache.current[label] = getSVGTextSize(virtualTextRef.current);\n return labelToBoxCache.current[label]?.height ?? 0;\n };\n\n const formattedTicks = formatTicks({ ticks, scale, getLabelSpace, tickFormatter });\n\n if (virtualTextRef.current) {\n virtualTextRef.current.textContent = '';\n }\n\n const from = 0 - OFFSET_PX - yOffset;\n const until = plotHeight + OFFSET_PX - yOffset;\n const visibleTicks = getVisibleTicks(formattedTicks, from, until);\n\n const isRtl = virtualTextRef.current ? getIsRtl(virtualTextRef.current) : false;\n\n return (\n \n {visibleTicks.map(\n ({ position, lines }, index) =>\n isFinite(position) && (\n \n {axis === 'y' && (\n \n )}\n\n {lines.map((line, lineIndex) => {\n const x = -(TICK_LENGTH + TICK_MARGIN);\n const lineTextProps = {\n x: !isRtl ? x : plotWidth - x,\n y: (lineIndex - (lines.length - 1) * 0.5) * TICK_LINE_HEIGHT,\n className: styles.ticks__text,\n children: line,\n };\n return (labelToBoxCache.current[lines[0]]?.width ?? 0) > maxLabelsWidth ? (\n \n ) : (\n \n );\n })}\n \n )\n )}\n\n \n \n );\n}\n", "// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React, { memo, useEffect, useRef } from 'react';\n\nimport { getIsRtl } from '@cloudscape-design/component-toolkit/internal';\n\nimport { getTextWidth } from './responsive-text-utils';\n\ninterface ResponsiveTextProps {\n x: number;\n y: number;\n className?: string;\n children: string;\n maxWidth: number;\n}\n\nexport default memo(ResponsiveText);\n\nfunction ResponsiveText({ x, y, className, children, maxWidth }: ResponsiveTextProps) {\n const textRef = useRef(null);\n\n // Determine the visible width of the text and if necessary truncate it until it fits.\n useEffect(() => {\n const isRtl = getIsRtl(textRef.current!);\n renderTextContent(textRef.current!, children, maxWidth, isRtl);\n }, [maxWidth, children]);\n\n return (\n \n {children}\n \n );\n}\n\nexport function renderTextContent(textNode: SVGTextElement, text: string, maxWidth: number, isRtl: boolean) {\n let visibleLength = text.length;\n while (visibleLength >= 0) {\n textNode.textContent = truncateText(text, visibleLength, isRtl);\n\n if (getTextWidth(textNode) <= maxWidth) {\n return;\n } else {\n visibleLength--;\n }\n }\n}\n\nfunction truncateText(text: string, maxLength: number, isRtl: boolean) {\n if (text.length === maxLength) {\n return text;\n }\n if (isRtl) {\n return text.slice(text.length - maxLength) + '…';\n }\n return text.slice(0, maxLength) + '…';\n}\n", "// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\n\n// Ignoring as unsupported in JSDom.\n/* istanbul ignore next */\nexport function getTextWidth(textNode: SVGTextElement) {\n if (textNode.getComputedTextLength) {\n return textNode.getComputedTextLength();\n }\n return -1;\n}\n", "// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React, { Fragment, memo, useEffect } from 'react';\nimport clsx from 'clsx';\n\nimport { useContainerQuery } from '@cloudscape-design/component-toolkit';\n\nimport { ChartDataTypes } from '../../../mixed-line-bar-chart/interfaces';\nimport { ChartScale, NumericChartScale } from './scales';\n\nimport styles from './styles.css.js';\n\ninterface LabelsMeasureProps {\n scale: ChartScale | NumericChartScale;\n ticks: readonly ChartDataTypes[];\n tickFormatter?: (value: ChartDataTypes) => string;\n autoWidth: (value: number) => void;\n maxLabelsWidth?: number;\n}\n\nexport default memo(LabelsMeasure) as typeof LabelsMeasure;\n\n// Places the invisible left-hand side labels to calculate their maximum width.\nfunction LabelsMeasure({ scale, ticks, tickFormatter, autoWidth, maxLabelsWidth }: LabelsMeasureProps) {\n const [width, ref] = useContainerQuery(rect => rect.contentBoxWidth);\n\n // Tell elements's width to the parent.\n useEffect(() => {\n autoWidth(width || 0);\n }, [autoWidth, width]);\n\n const labelMapper = (value: ChartDataTypes) => {\n const scaledValue = scale.d3Scale(value as any);\n if (scaledValue === undefined || !isFinite(scaledValue)) {\n return null;\n }\n\n const formattedValue = tickFormatter ? tickFormatter(value as any) : value.toString();\n const lines = (formattedValue + '').split('\\n');\n\n return (\n \n {lines.map((line, lineIndex) => (\n
    \n {line}\n
    \n ))}\n     \n );\n };\n\n return (\n \n {ticks.map(labelMapper)}\n \n );\n}\n", "// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React, { forwardRef, useImperativeHandle, useRef, useState } from 'react';\nimport clsx from 'clsx';\n\nimport { useInternalI18n } from '../../../i18n/context';\nimport InternalLiveRegion from '../../../live-region/internal';\nimport { useUniqueId } from '../../hooks/use-unique-id';\nimport { KeyCode } from '../../keycode';\nimport { Offset } from '../interfaces';\nimport ApplicationController, { ApplicationRef } from './application-controller';\nimport FocusOutline from './focus-outline';\n\nimport styles from './styles.css.js';\n\nconst DEFAULT_PLOT_FOCUS_OFFSET = 3;\nconst DEFAULT_ELEMENT_FOCUS_OFFSET = 3;\n\nexport interface ChartPlotRef {\n svg: SVGSVGElement;\n focusPlot(): void;\n focusApplication(): void;\n}\n\ninterface ChartPlotProps {\n width: number | string;\n height: number | string;\n transform?: string;\n offsetTop?: number;\n offsetBottom?: number;\n offsetLeft?: number;\n offsetRight?: number;\n focusOffset?: number;\n ariaLabel?: string;\n ariaLabelledby?: string;\n ariaDescription?: string;\n ariaDescribedby?: string;\n ariaRoleDescription?: string;\n activeElementKey?: null | string | number | boolean;\n activeElementRef?: React.RefObject;\n activeElementFocusOffset?: Offset;\n ariaLiveRegion?: string;\n isClickable?: boolean;\n isPrecise?: boolean;\n onClick?: (event: React.MouseEvent) => void;\n onMouseMove?: (event: React.MouseEvent) => void;\n onMouseOut?: (event: React.MouseEvent) => void;\n onApplicationFocus?: (event: React.FocusEvent, trigger: 'mouse' | 'keyboard') => void;\n onApplicationBlur?: (event: React.FocusEvent) => void;\n onKeyDown?: (event: React.KeyboardEvent) => void;\n children: React.ReactNode;\n}\n\n/**\n An extension for the SVG to be used for charts. It includes a controller element to\n handle the focus and keyboard interactions in a way that is supported by screen readers.\n\n The application mimics the aria-activedescendant behavior which is unsupported by Safari. The\n activeElementRef is the pointer to the secondary-focus element and activeElementKey denotes when\n the focus transition was made.\n\n Alternatively, ariaLiveRegion can be used to make announcements.\n*/\nexport default forwardRef(ChartPlot);\n\nfunction ChartPlot(\n {\n width,\n height,\n transform,\n offsetTop,\n offsetBottom,\n offsetLeft,\n offsetRight,\n ariaLabel,\n ariaLabelledby,\n ariaRoleDescription,\n ariaDescription,\n ariaDescribedby,\n activeElementKey,\n activeElementRef,\n ariaLiveRegion,\n isClickable,\n isPrecise,\n children,\n onClick,\n onKeyDown,\n focusOffset = DEFAULT_PLOT_FOCUS_OFFSET,\n activeElementFocusOffset = DEFAULT_ELEMENT_FOCUS_OFFSET,\n onMouseMove,\n onMouseOut,\n onApplicationBlur,\n onApplicationFocus,\n }: ChartPlotProps,\n ref: React.Ref\n) {\n const i18n = useInternalI18n('[charts]');\n const svgRef = useRef(null);\n const applicationRef = useRef(null);\n const plotClickedRef = useRef(false);\n const [isPlotFocused, setPlotFocused] = useState(false);\n const [isApplicationFocused, setApplicationFocused] = useState(false);\n\n const internalDescriptionId = useUniqueId('awsui-chart-plot__description');\n const ariaDescriptionId = [ariaDescription && internalDescriptionId, ariaDescribedby].filter(Boolean).join(' ');\n\n useImperativeHandle(ref, () => ({\n svg: svgRef.current!,\n focusPlot: () => svgRef.current!.focus(),\n focusApplication: () => applicationRef.current!.focus(),\n }));\n\n const onPlotMouseDown = () => {\n // Record the click was made for the application focus handler.\n plotClickedRef.current = true;\n };\n const onPlotFocus = (event: React.FocusEvent) => {\n // If focused via click or an element was highlighted,\n // focus the internal application, which will manage and show focus accordingly on its internal elements.\n if (plotClickedRef.current || !!activeElementKey) {\n applicationRef.current!.focus();\n } else if (event.target === svgRef.current) {\n // Otherwise, focus the entire plot if it was focused with the keyboard.\n setPlotFocused(true);\n }\n };\n const onPlotClick = (event: React.MouseEvent) => {\n onClick && onClick(event);\n };\n const onPlotBlur = (event: React.FocusEvent) => {\n if (event.target === svgRef.current) {\n setPlotFocused(false);\n }\n };\n // Once one of the expected keys is pressed the focus is delegated to the application controller.\n const onPlotKeyDown = (event: React.KeyboardEvent) => {\n if (isPlotFocused) {\n // Delegate the focus to the application if one of the expected keys was pressed.\n const codes = [KeyCode.space, KeyCode.enter, KeyCode.up, KeyCode.left, KeyCode.right, KeyCode.down];\n if (codes.indexOf(event.keyCode) !== -1) {\n applicationRef.current!.focus();\n }\n }\n };\n\n const onPlotApplicationFocus = (event: React.FocusEvent) => {\n onApplicationFocus && onApplicationFocus(event, plotClickedRef.current ? 'mouse' : 'keyboard');\n // \"Release\" the click reference to not affect the next call of this handler.\n plotClickedRef.current = false;\n setApplicationFocused(true);\n };\n const onPlotApplicationBlur = (event: React.FocusEvent) => {\n onApplicationBlur && onApplicationBlur(event);\n setApplicationFocused(false);\n };\n const onApplicationKeyDown = onKeyDown;\n\n const plotFocusable = !isApplicationFocused;\n const plotTabIndex = plotFocusable ? 0 : -1;\n const plotAria = !isApplicationFocused\n ? {\n 'aria-label': ariaLabel,\n 'aria-labelledby': ariaLabelledby,\n 'aria-describedby': ariaDescriptionId,\n 'aria-roledescription': i18n('i18nStrings.chartAriaRoleDescription', ariaRoleDescription),\n }\n : {};\n\n return (\n <>\n \n \n\n \n \n\n {/* Only show description when plot is focusable to avoid repetition in Safari and Firefox */}\n {ariaDescription && plotFocusable && (\n \n {ariaDescription}\n \n )}\n\n {children}\n\n \n \n \n\n \n \n );\n}\n", "// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React, { forwardRef, useCallback, useEffect, useImperativeHandle, useRef, useState } from 'react';\n\nimport styles from './styles.css.js';\n\nexport interface ApplicationRef {\n focus(): void;\n}\n\ninterface ApplicationControllerProps {\n activeElementKey: null | string | number | boolean;\n activeElementRef?: React.RefObject;\n onFocus?: (event: React.FocusEvent) => void;\n onBlur?: (event: React.FocusEvent) => void;\n onKeyDown?: (event: React.KeyboardEvent) => void;\n}\n\nexport default forwardRef(ApplicationController);\n\nfunction ApplicationController(\n { activeElementKey, activeElementRef, onFocus, onBlur, onKeyDown }: ApplicationControllerProps,\n ref: React.Ref\n) {\n const containerRef = useRef(null);\n const applicationRef = useRef(null);\n const focusTransitionRef = useRef(false);\n const [isFocused, setFocused] = useState(false);\n\n // Calls provided onFocus handler when the application obtains focus, ignoring internal focus juggling.\n const onApplicationFocus = useCallback(\n (event: React.FocusEvent) => {\n if (focusTransitionRef.current === false) {\n setFocused(true);\n onFocus && onFocus(event);\n } else {\n focusTransitionRef.current = false;\n }\n },\n [onFocus]\n );\n // Calls provided onBlur handler when the application loses focus, ignoring internal focus juggling.\n const onApplicationBlur = useCallback(\n (event: React.FocusEvent) => {\n if (focusTransitionRef.current === false) {\n setFocused(false);\n onBlur && onBlur(event);\n // The application controller can only be focused programmatically.\n muteApplication(applicationRef.current!);\n }\n },\n [onBlur]\n );\n const onApplicationKeyDown = onKeyDown;\n\n useImperativeHandle(\n ref,\n () => ({\n focus: () => focusApplication(applicationRef.current!, activeElementRef?.current || null),\n }),\n [activeElementRef]\n );\n\n // Re-attaches and re-focuses the application for screen readers to treat it as an update.\n useEffect(() => {\n // Skip if not focused or if the transition is already happening.\n if (!isFocused || focusTransitionRef.current === true) {\n return;\n }\n focusTransitionRef.current = true;\n containerRef.current!.removeChild(applicationRef.current!);\n containerRef.current!.appendChild(applicationRef.current!);\n focusApplication(applicationRef.current!, activeElementRef?.current || null);\n }, [isFocused, activeElementKey, activeElementRef]);\n\n return (\n \n \n \n );\n}\n\n// Focuses application but before copies aria-attributes from the target.\nfunction focusApplication(app: SVGGElement, target: null | SVGGElement) {\n // Remove prev attributes.\n for (const attributeName of app.getAttributeNames()) {\n if (attributeName === 'role' || attributeName.slice(0, 4) === 'aria') {\n app.removeAttribute(attributeName);\n }\n }\n\n // Copy new attributes.\n if (target) {\n for (const attributeName of target.getAttributeNames()) {\n if (attributeName === 'role' || attributeName.slice(0, 4) === 'aria') {\n const attributeValue = target.getAttribute(attributeName);\n attributeValue && app.setAttribute(attributeName, attributeValue);\n }\n }\n }\n\n // Make app focusable.\n app.tabIndex = 0;\n app.setAttribute('focusable', 'true');\n app.setAttribute('aria-hidden', 'false');\n\n // Focus app.\n app.focus({ preventScroll: true });\n}\n\n// The application is to be only focused programmatically.\nfunction muteApplication(app: SVGGElement) {\n // Remove prev attributes.\n for (const attributeName of app.getAttributeNames()) {\n if (attributeName === 'role' || attributeName.slice(0, 4) === 'aria') {\n app.removeAttribute(attributeName);\n }\n }\n\n // Make app non-focusable.\n app.tabIndex = -1;\n app.setAttribute('focusable', 'false');\n app.setAttribute('aria-hidden', 'true');\n}\n", "\n import './styles.scoped.css';\n export default {\n \"root\": \"awsui_root_1fcus_1hizy_145\",\n \"clickable\": \"awsui_clickable_1fcus_1hizy_154\",\n \"precise\": \"awsui_precise_1fcus_1hizy_158\",\n \"focus-outline\": \"awsui_focus-outline_1fcus_1hizy_162\",\n \"application\": \"awsui_application_1fcus_1hizy_171\"\n};\n ", "// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React, { useEffect, useRef, useState } from 'react';\n\nimport { isModifierKey } from '@cloudscape-design/component-toolkit/internal';\n\nimport { Offset } from '../interfaces';\n\nimport styles from './styles.css.js';\n\ninterface FocusOutlineProps {\n elementKey?: null | string | number | boolean;\n elementRef?: React.RefObject;\n offset?: Offset;\n}\n\nfunction useFocusVisibleState() {\n const [focusVisible, setFocusVisible] = useState(false);\n useEffect(() => {\n function handleMousedown() {\n return setFocusVisible(false);\n }\n\n function handleKeydown(event: KeyboardEvent) {\n // we do not want to highlight focused element\n // when special keys are pressed\n if (!isModifierKey(event)) {\n setFocusVisible(true);\n }\n }\n\n const controller = new AbortController();\n document.addEventListener('mousedown', handleMousedown, { signal: controller.signal });\n document.addEventListener('keydown', handleKeydown, { signal: controller.signal });\n return () => {\n controller.abort();\n };\n });\n\n return focusVisible;\n}\n\nexport default function FocusOutline({ elementKey, elementRef, offset = 0 }: FocusOutlineProps) {\n const ref = useRef(null);\n const focusVisible = useFocusVisibleState();\n\n useEffect(() => {\n if (!ref.current) {\n return;\n }\n\n if (focusVisible && elementKey && elementRef && elementRef.current && elementRef.current.getBBox) {\n const element = elementRef.current.getBBox();\n showOutline(ref.current, element, offset);\n } else {\n hideOutline(ref.current);\n }\n }, [focusVisible, elementKey, elementRef, offset]);\n\n return ;\n}\n\nfunction showOutline(\n el: SVGRectElement,\n position: { x: number; y: number; width: number; height: number },\n offset: Offset\n) {\n const offsetX = typeof offset === 'number' ? offset : offset.x;\n const offsetY = typeof offset === 'number' ? offset : offset.y;\n el.setAttribute('x', (position.x - offsetX).toString());\n el.setAttribute('y', (position.y - offsetY).toString());\n el.setAttribute('width', (position.width + 2 * offsetX).toString());\n el.setAttribute('height', (position.height + 2 * offsetY).toString());\n el.style.visibility = 'visible';\n}\n\nfunction hideOutline(el: SVGRectElement) {\n el.style.visibility = 'hidden';\n el.removeAttribute('x');\n el.removeAttribute('y');\n el.removeAttribute('width');\n el.removeAttribute('height');\n}\n", "// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React from 'react';\n\nimport { useContainerQuery } from '@cloudscape-design/component-toolkit';\n\nexport default function useContainerWidth(\n defaultValue = 0,\n threshold = 1\n): [width: number, ref: React.Ref] {\n const [width, ref] = useContainerQuery((rect, prev) => {\n if (prev === null) {\n return rect.contentBoxWidth;\n }\n return Math.abs(prev - rect.contentBoxWidth) >= threshold ? rect.contentBoxWidth : prev;\n });\n\n return [width ?? defaultValue, ref];\n}\n", "// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport { useLayoutEffect, useState } from 'react';\nimport { unstable_batchedUpdates } from 'react-dom';\n\nimport { usePrevious } from '../../internal/hooks/use-previous';\n\ntype Selector = (state: S) => R;\ntype Listener = (state: S, prevState: S) => void;\n\nexport interface ReadonlyAsyncStore {\n get(): S;\n subscribe(selector: Selector, listener: Listener): () => void;\n unsubscribe(listener: Listener): void;\n}\n\nexport default class AsyncStore implements ReadonlyAsyncStore {\n _state: S;\n _listeners: [Selector, Listener][] = [];\n\n constructor(state: S) {\n this._state = state;\n }\n\n get(): S {\n return this._state;\n }\n\n set(cb: (state: S) => S): void {\n const prevState = this._state;\n const newState = cb(prevState);\n\n this._state = newState;\n\n unstable_batchedUpdates(() => {\n for (const [selector, listener] of this._listeners) {\n if (selector(prevState) !== selector(newState)) {\n listener(newState, prevState);\n }\n }\n });\n }\n\n subscribe(selector: Selector, listener: Listener): () => void {\n this._listeners.push([selector, listener]);\n\n return () => this.unsubscribe(listener);\n }\n\n unsubscribe(listener: Listener): void {\n for (let index = 0; index < this._listeners.length; index++) {\n const [, storedListener] = this._listeners[index];\n\n if (storedListener === listener) {\n this._listeners.splice(index, 1);\n break;\n }\n }\n }\n}\n\nexport function useReaction(store: ReadonlyAsyncStore, selector: Selector, effect: Listener): void {\n useLayoutEffect(\n () => {\n const unsubscribe = store.subscribe(selector, (newState, prevState) =>\n effect(selector(newState), selector(prevState))\n );\n return unsubscribe;\n },\n // ignoring selector and effect as they are expected to stay constant\n // eslint-disable-next-line react-hooks/exhaustive-deps\n [store]\n );\n}\n\nexport function useSelector(store: ReadonlyAsyncStore, selector: Selector): R {\n const [state, setState] = useState(selector(store.get()));\n\n useReaction(store, selector, newState => {\n setState(newState);\n });\n\n // When store changes we need the state to be updated synchronously to avoid inconsistencies.\n const prevStore = usePrevious(store);\n if (prevStore !== null && prevStore !== store) {\n return selector(store.get());\n }\n\n return state;\n}\n", "// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React from 'react';\n\nimport ChartPopover from '../../internal/components/chart-popover';\nimport ChartPopoverFooter from '../../internal/components/chart-popover-footer';\nimport ChartSeriesDetails from '../../internal/components/chart-series-details';\nimport { AreaChartProps } from '../interfaces';\nimport { ChartModel } from '../model';\nimport { HighlightDetails } from './use-highlight-details';\n\nimport styles from '../styles.css.js';\n\nexport default function AreaChartPopover({\n model,\n highlightDetails,\n dismissAriaLabel,\n footer,\n size,\n onBlur,\n}: {\n model: ChartModel;\n highlightDetails: null | HighlightDetails;\n dismissAriaLabel?: string;\n footer?: React.ReactNode;\n size?: 'small' | 'medium' | 'large';\n onBlur?: (event: React.FocusEvent) => void;\n}) {\n if (!highlightDetails) {\n return null;\n }\n\n const popoverProps = {\n title: highlightDetails.formattedX,\n trackRef: model.refs.verticalMarker,\n trackKey: highlightDetails.highlightIndex,\n dismissButton: highlightDetails.isPopoverPinned,\n onDismiss: model.handlers.onPopoverDismiss,\n onMouseLeave: model.handlers.onPopoverLeave,\n ref: model.refs.popoverRef,\n };\n\n return (\n \n \n
    \n \n {footer && {footer}}\n \n );\n}\n", "// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React, { useEffect, useRef } from 'react';\nimport clsx from 'clsx';\n\nimport { nodeContains } from '@cloudscape-design/component-toolkit/dom';\n\nimport PopoverBody from '../../../popover/body';\nimport PopoverContainer from '../../../popover/container';\nimport { PopoverProps } from '../../../popover/interfaces';\nimport { getBaseProps } from '../../base-component';\nimport { useMergeRefs } from '../../hooks/use-merge-refs';\nimport { nodeBelongs } from '../../utils/node-belongs';\n\nimport popoverStyles from '../../../popover/styles.css.js';\nimport styles from './styles.css.js';\n\ninterface ChartPopoverProps extends PopoverProps {\n /** Title of the popover */\n title?: React.ReactNode;\n\n /** References the element the container is positioned against. */\n trackRef: React.RefObject;\n /**\n Used to update the container position in case track or track position changes:\n \n const trackRef = useRef(null)\n return (<>\n \n \n )\n */\n trackKey?: string | number;\n\n /** Optional container element that prevents any clicks in there from dismissing the popover */\n container: Element | null;\n\n /** Event that is fired when the popover is dismissed */\n onDismiss: (outsideClick?: boolean) => void;\n\n /** Fired when the pointer enters the hoverable area around the popover */\n onMouseEnter?: (event: React.MouseEvent) => void;\n\n /** Fired when the pointer leaves the hoverable area around the popover */\n onMouseLeave?: (event: React.MouseEvent) => void;\n\n onBlur?: (event: React.FocusEvent) => void;\n\n /** Popover content */\n children?: React.ReactNode;\n}\n\nexport default React.forwardRef(ChartPopover);\n\nfunction ChartPopover(\n {\n position = 'right',\n size = 'medium',\n fixedWidth = false,\n dismissButton = false,\n dismissAriaLabel,\n\n children,\n\n title,\n trackRef,\n trackKey,\n onDismiss,\n container,\n\n onMouseEnter,\n onMouseLeave,\n onBlur,\n\n ...restProps\n }: ChartPopoverProps,\n ref: React.Ref\n) {\n const baseProps = getBaseProps(restProps);\n const popoverObjectRef = useRef(null);\n\n const popoverRef = useMergeRefs(popoverObjectRef, ref);\n\n useEffect(() => {\n const onDocumentClick = (event: MouseEvent) => {\n if (\n event.target &&\n !nodeBelongs(popoverObjectRef.current, event.target as Element) && // click not in popover\n !nodeContains(container, event.target as Element) // click not in segment\n ) {\n onDismiss(true);\n }\n };\n\n document.addEventListener('mousedown', onDocumentClick, { capture: true });\n return () => {\n document.removeEventListener('mousedown', onDocumentClick, { capture: true });\n };\n }, [container, onDismiss]);\n\n // In chart popovers, dismiss button is present when they are pinned, so both values are equivalent.\n const isPinned = dismissButton;\n\n return (\n \n (\n
    \n
    \n
    \n
    \n )}\n keepPosition={true}\n allowVerticalOverflow={true}\n allowScrollToFit={isPinned}\n >\n
    \n \n {children}\n \n
    \n \n
    \n );\n}\n", "\n import './styles.scoped.css';\n export default {\n \"root\": \"awsui_root_1t44z_16bx1_145\",\n \"hover-area\": \"awsui_hover-area_1t44z_16bx1_178\",\n \"popover-body\": \"awsui_popover-body_1t44z_16bx1_186\"\n};\n ", "// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React from 'react';\n\nimport styles from './styles.css.js';\n\nexport default function ChartPopoverFooter({ children }: { children: React.ReactNode }) {\n return
    {children}
    ;\n}\n", "\n import './styles.scoped.css';\n export default {\n \"root\": \"awsui_root_1t8ew_1brmj_9\"\n};\n ", "// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React, { forwardRef, memo, ReactNode, useEffect, useRef } from 'react';\nimport clsx from 'clsx';\n\nimport InternalExpandableSection from '../../../expandable-section/internal';\nimport { BaseComponentProps, getBaseProps } from '../../base-component';\nimport { useMergeRefs } from '../../hooks/use-merge-refs';\nimport ChartSeriesMarker, { ChartSeriesMarkerType } from '../chart-series-marker';\nimport getSeriesDetailsText from './series-details-text';\n\nimport styles from './styles.css.js';\n\ninterface ChartDetailPair {\n key: ReactNode;\n value: ReactNode;\n}\n\ninterface ListItemProps {\n itemKey: ReactNode;\n value: ReactNode;\n subItems?: ReadonlyArray;\n markerType?: ChartSeriesMarkerType;\n color?: string;\n}\n\nexport interface ChartSeriesDetailItem extends ChartDetailPair {\n markerType?: ChartSeriesMarkerType;\n color?: string;\n isDimmed?: boolean;\n subItems?: ReadonlyArray;\n expandableId?: string;\n}\nexport type ExpandedSeries = Set;\n\ninterface ChartSeriesDetailsProps extends BaseComponentProps {\n details: ReadonlyArray;\n expandedSeries?: ExpandedSeries;\n setPopoverText?: (s: string) => void;\n setExpandedState?: (seriesTitle: string, state: boolean) => void;\n compactList?: boolean;\n}\n\nexport default memo(forwardRef(ChartSeriesDetails));\n\nfunction ChartSeriesDetails(\n { details, expandedSeries, setPopoverText, setExpandedState, compactList, ...restProps }: ChartSeriesDetailsProps,\n ref: React.Ref\n) {\n const baseProps = getBaseProps(restProps);\n const className = clsx(baseProps.className, styles.root);\n const detailsRef = useRef(null);\n const mergedRef = useMergeRefs(ref, detailsRef);\n\n // Once the component has rendered, pass its content in plain text\n // so that it can be used by screen readers.\n useEffect(() => {\n if (setPopoverText) {\n if (detailsRef.current) {\n setPopoverText(getSeriesDetailsText(detailsRef.current));\n }\n return () => {\n setPopoverText('');\n };\n }\n }, [details, setPopoverText]);\n\n const isExpanded = (seriesTitle: string) => !!expandedSeries && expandedSeries.has(seriesTitle);\n\n return (\n
    \n
      \n {details.map(({ key, value, markerType, color, isDimmed, subItems, expandableId }, index) => (\n \n {subItems?.length && !!expandableId ? (\n setExpandedState && setExpandedState(expandableId, state)}\n />\n ) : (\n \n )}\n \n ))}\n
    \n
    \n );\n}\n\nfunction SubItems({\n items,\n expandable,\n expanded,\n}: {\n items: ReadonlyArray;\n expandable?: boolean;\n expanded?: boolean;\n}) {\n return (\n
      \n {items.map(({ key, value }, index) => (\n \n {key}\n {value}\n \n ))}\n
    \n );\n}\n\nfunction ExpandableSeries({\n itemKey,\n value,\n subItems,\n markerType,\n color,\n expanded,\n setExpandedState,\n}: ListItemProps &\n Required> & {\n expanded: boolean;\n setExpandedState: (state: boolean) => void;\n }) {\n return (\n
    \n {markerType && color && }\n
    \n {value}}\n expanded={expanded}\n onChange={({ detail }) => setExpandedState(detail.expanded)}\n >\n \n \n
    \n
    \n );\n}\n\nfunction NonExpandableSeries({ itemKey, value, subItems, markerType, color }: ListItemProps) {\n return (\n <>\n
    \n
    \n {markerType && color && }\n {itemKey}\n
    \n {value}\n
    \n {subItems && }\n \n );\n}\n", "// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React, { KeyboardEvent, useCallback, useRef } from 'react';\nimport { CSSTransition } from 'react-transition-group';\nimport clsx from 'clsx';\n\nimport { getBaseProps } from '../internal/base-component';\nimport { fireNonCancelableEvent } from '../internal/events';\nimport { InternalBaseComponentProps } from '../internal/hooks/use-base-component';\nimport { useControllable } from '../internal/hooks/use-controllable';\nimport { useUniqueId } from '../internal/hooks/use-unique-id';\nimport { KeyCode } from '../internal/keycode';\nimport { ExpandableSectionContainer } from './expandable-section-container';\nimport { ExpandableSectionHeader } from './expandable-section-header';\nimport { ExpandableSectionProps, InternalVariant } from './interfaces';\nimport { variantSupportsDescription } from './utils';\n\nimport analyticsSelectors from './analytics-metadata/styles.css.js';\nimport styles from './styles.css.js';\n\ntype InternalExpandableSectionProps = Omit &\n InternalBaseComponentProps & {\n variant?: InternalVariant;\n __injectAnalyticsComponentMetadata?: boolean;\n };\n\nexport default function InternalExpandableSection({\n expanded: controlledExpanded,\n defaultExpanded,\n onChange,\n variant = 'default',\n children,\n header,\n headerText,\n headerCounter,\n headerDescription,\n headerInfo,\n headerActions,\n headingTagOverride,\n disableContentPaddings,\n headerAriaLabel,\n __internalRootRef,\n __injectAnalyticsComponentMetadata,\n ...props\n}: InternalExpandableSectionProps) {\n const ref = useRef(null);\n const controlId = useUniqueId();\n const triggerControlId = `${controlId}-trigger`;\n const descriptionId = `${controlId}-description`;\n\n const baseProps = getBaseProps(props);\n const [expanded, setExpanded] = useControllable(controlledExpanded, onChange, defaultExpanded, {\n componentName: 'ExpandableSection',\n controlledProp: 'expanded',\n changeHandler: 'onChange',\n });\n\n const onExpandChange = useCallback(\n (expanded: boolean) => {\n setExpanded(expanded);\n fireNonCancelableEvent(onChange, { expanded });\n },\n [onChange, setExpanded]\n );\n\n const onClick = useCallback(() => {\n onExpandChange(!expanded);\n }, [onExpandChange, expanded]);\n\n const onKeyUp = useCallback(\n (event: KeyboardEvent) => {\n const interactionKeys = [KeyCode.enter, KeyCode.space];\n\n if (interactionKeys.indexOf(event.keyCode) !== -1) {\n onExpandChange(!expanded);\n }\n },\n [onExpandChange, expanded]\n );\n\n const onKeyDown = useCallback((event: KeyboardEvent) => {\n if (event.keyCode === KeyCode.space) {\n // Prevent the page from scrolling when toggling the component with the space bar.\n event.preventDefault();\n }\n }, []);\n\n const triggerProps = {\n ariaControls: controlId,\n ariaLabel: headerAriaLabel,\n ariaLabelledBy: headerAriaLabel ? undefined : triggerControlId,\n onKeyUp,\n onKeyDown,\n onClick,\n };\n\n // Map stacked variant to container to avoid code duplication\n const baseVariant: InternalVariant = variant === 'stacked' ? 'container' : variant;\n\n return (\n \n }\n __internalRootRef={__internalRootRef}\n >\n \n \n {children}\n
    \n \n \n );\n}\n", "// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React from 'react';\n\nimport {\n getAnalyticsLabelAttribute,\n getAnalyticsMetadataAttribute,\n} from '@cloudscape-design/component-toolkit/internal/analytics-metadata';\n\nimport { InternalContainerAsSubstep } from '../container/internal';\nimport { AnalyticsFunnelSubStep } from '../internal/analytics/components/analytics-funnel';\nimport { BasePropsWithAnalyticsMetadata, getAnalyticsMetadataProps } from '../internal/base-component';\nimport { InternalBaseComponentProps } from '../internal/hooks/use-base-component';\nimport { GeneratedAnalyticsMetadataExpandableSectionComponent } from './analytics-metadata/interfaces';\nimport { InternalVariant } from './interfaces';\n\nimport analyticsSelectors from './analytics-metadata/styles.css.js';\n\ninterface ExpandableSectionContainerProps extends InternalBaseComponentProps {\n className?: string;\n header: React.ReactNode;\n children?: React.ReactNode;\n variant: InternalVariant;\n expanded: boolean | undefined;\n disableContentPaddings: boolean | undefined;\n __injectAnalyticsComponentMetadata?: boolean;\n}\n\nexport const ExpandableSectionContainer = ({\n className,\n children,\n header,\n variant,\n expanded,\n disableContentPaddings,\n __internalRootRef,\n __injectAnalyticsComponentMetadata,\n ...rest\n}: ExpandableSectionContainerProps) => {\n const analyticsMetadata = getAnalyticsMetadataProps(rest as BasePropsWithAnalyticsMetadata);\n const analyticsComponentMetadata: GeneratedAnalyticsMetadataExpandableSectionComponent = {\n name: 'awsui.ExpandableSection',\n label: { root: 'self' },\n properties: { variant, expanded: `${!!expanded}` },\n };\n\n const metadataAttribute = __injectAnalyticsComponentMetadata\n ? getAnalyticsMetadataAttribute({ component: analyticsComponentMetadata })\n : {};\n\n if (variant === 'container' || variant === 'stacked') {\n return (\n \n \n {children}\n \n \n );\n }\n\n return (\n \n {header}\n {children}\n
    \n );\n};\n", "\n import './styles.scoped.css';\n export default {\n \"header-label\": \"awsui_header-label_4mvj3_1h74t_5\",\n \"root\": \"awsui_root_4mvj3_1h74t_6\"\n};\n ", "// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React, { KeyboardEventHandler, MouseEventHandler, ReactNode } from 'react';\nimport clsx from 'clsx';\n\nimport { warnOnce } from '@cloudscape-design/component-toolkit/internal';\nimport { getAnalyticsMetadataAttribute } from '@cloudscape-design/component-toolkit/internal/analytics-metadata';\n\nimport InternalHeader, { Description as HeaderDescription } from '../header/internal';\nimport InternalIcon from '../icon/internal';\nimport { isDevelopment } from '../internal/is-development';\nimport { GeneratedAnalyticsMetadataExpandableSectionExpand } from './analytics-metadata/interfaces';\nimport { ExpandableSectionProps, InternalVariant } from './interfaces';\nimport {\n variantRequiresActionsDivider,\n variantSupportsActions,\n variantSupportsDescription,\n variantSupportsInfoLink,\n} from './utils';\n\nimport analyticsSelectors from './analytics-metadata/styles.css.js';\nimport styles from './styles.css.js';\n\nconst componentName = 'ExpandableSection';\n\ninterface ExpandableDefaultHeaderProps {\n id: string;\n descriptionId?: string;\n className?: string;\n children?: ReactNode;\n expanded: boolean;\n ariaControls: string;\n ariaLabel?: string;\n onKeyUp: KeyboardEventHandler;\n onKeyDown: KeyboardEventHandler;\n onClick: MouseEventHandler;\n icon: JSX.Element;\n variant: InternalVariant;\n}\n\ninterface ExpandableNavigationHeaderProps extends Omit {\n ariaLabelledBy?: string;\n}\n\ninterface ExpandableHeaderTextWrapperProps extends ExpandableDefaultHeaderProps {\n headerDescription?: ReactNode;\n headerCounter?: string;\n headerInfo?: ReactNode;\n headerActions?: ReactNode;\n headingTagOverride?: ExpandableSectionProps.HeadingTag;\n}\n\ninterface ExpandableSectionHeaderProps extends Omit {\n header?: ReactNode;\n headerText?: ReactNode;\n headerDescription?: ReactNode;\n headerCounter?: string;\n headerInfo?: ReactNode;\n headerActions?: ReactNode;\n headingTagOverride?: ExpandableSectionProps.HeadingTag;\n ariaLabelledBy?: string;\n}\n\nconst getExpandActionAnalyticsMetadataAttribute = (expanded: boolean) => {\n const metadata: GeneratedAnalyticsMetadataExpandableSectionExpand = {\n action: 'expand',\n detail: {\n label: { rootSelector: `.${analyticsSelectors.root}` },\n expanded: `${!expanded}`,\n },\n };\n return getAnalyticsMetadataAttribute(metadata);\n};\nconst ExpandableDeprecatedHeader = ({\n id,\n className,\n onClick,\n ariaLabel,\n ariaControls,\n expanded,\n children,\n icon,\n onKeyUp,\n onKeyDown,\n variant,\n}: ExpandableDefaultHeaderProps) => {\n return (\n \n
    {icon}
    \n {children}\n \n );\n};\n\nconst ExpandableNavigationHeader = ({\n id,\n className,\n onClick,\n ariaLabelledBy,\n ariaLabel,\n ariaControls,\n expanded,\n children,\n icon,\n}: ExpandableNavigationHeaderProps) => {\n return (\n
    \n \n {icon}\n \n {children}\n
    \n );\n};\n\nconst ExpandableHeaderTextWrapper = ({\n id,\n descriptionId,\n className,\n onClick,\n ariaLabel,\n ariaControls,\n expanded,\n children,\n icon,\n headerDescription,\n headerCounter,\n headerInfo,\n headerActions,\n variant,\n headingTagOverride,\n onKeyUp,\n onKeyDown,\n}: ExpandableHeaderTextWrapperProps) => {\n const isContainer = variant === 'container';\n const HeadingTag = headingTagOverride || 'div';\n const supportsInteractiveElements = variantSupportsActions(variant);\n const restrictClickableArea = supportsInteractiveElements && (headerInfo || headerActions);\n const actions = supportsInteractiveElements && headerActions;\n const description = variantSupportsDescription(variant) && headerDescription && (\n \n {headerDescription}\n \n );\n const listeners = { onClick, onKeyDown, onKeyUp };\n\n // If interactive elements are present, constrain the clickable area to only the icon and the header text\n // to prevent nesting interactive elements.\n const headerButtonListeners = restrictClickableArea ? listeners : undefined;\n // For the default and footer variants with description,\n // include also the immediate wrapper around it to include the entire row for backwards compatibility,\n // but exclude the description.\n const headingTagListeners = !headerButtonListeners && !isContainer && description ? listeners : undefined;\n // For all other cases, make the entire header clickable for backwards compatibility.\n const wrapperListeners = !headerButtonListeners && !headingTagListeners ? listeners : undefined;\n const headerButton = (\n \n {icon}\n \n {children}\n \n \n );\n\n return (\n \n {isContainer ? (\n \n {headerButton}\n \n ) : (\n <>\n
    \n \n {headerButton}\n \n {actions}\n
    \n {description && {description}}\n \n )}\n \n );\n};\n\nexport const ExpandableSectionHeader = ({\n id,\n descriptionId,\n className,\n variant,\n header,\n headerText,\n headerDescription,\n headerCounter,\n headerInfo,\n headerActions,\n headingTagOverride,\n expanded,\n ariaControls,\n ariaLabel,\n ariaLabelledBy,\n onKeyUp,\n onKeyDown,\n onClick,\n}: ExpandableSectionHeaderProps) => {\n const alwaysShowDivider = variantRequiresActionsDivider(variant) && headerActions;\n const icon = (\n \n );\n const defaultHeaderProps = {\n id: id,\n icon: icon,\n expanded: expanded,\n ariaControls: ariaControls,\n ariaLabel: ariaLabel,\n onClick: onClick,\n variant,\n };\n\n if ((headerCounter || headerInfo) && !variantSupportsInfoLink(variant) && isDevelopment) {\n warnOnce(\n componentName,\n 'The `headerCounter` and `headerInfo` props are only supported for the \"container\" variant.'\n );\n }\n\n if (headerActions && !variantSupportsActions(variant) && isDevelopment) {\n warnOnce(componentName, `The \\`headerActions\\` prop is only supported for the \"container\" and \"default\" variants.`);\n }\n\n if (headerDescription && !variantSupportsDescription(variant) && isDevelopment) {\n warnOnce(componentName, `The \\`headerDescription\\` prop is not supported for the ${variant} variant.`);\n }\n\n const wrapperClassName = clsx(\n styles.wrapper,\n styles[`wrapper-${variant}`],\n (expanded || alwaysShowDivider) && styles['wrapper-expanded']\n );\n if (variant === 'navigation') {\n return (\n \n {headerText ?? header}\n \n );\n }\n\n if (headerText || variant === 'inline') {\n if (!headerText && header && variant === 'inline') {\n warnOnce(componentName, 'Only `headerText` instead of `header` is supported for `inline` variant.');\n }\n return (\n \n {headerText}\n \n );\n }\n\n if (variant === 'container' && header && isDevelopment) {\n warnOnce(componentName, 'Use `headerText` instead of `header` to provide the button within the heading for a11y.');\n }\n\n return (\n \n {header}\n \n );\n};\n", "// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport { InternalVariant } from './interfaces';\n\nconst variantIsOneOf = (variant: InternalVariant, oneOf: InternalVariant[]) => oneOf.includes(variant);\n\nexport function variantSupportsDescription(variant: InternalVariant) {\n return variantIsOneOf(variant, ['container', 'default', 'footer', 'inline']);\n}\n\nexport function variantSupportsActions(variant: InternalVariant) {\n return variantIsOneOf(variant, ['container', 'compact', 'default', 'inline']);\n}\n\nexport function variantSupportsInfoLink(variant: InternalVariant) {\n return variantIsOneOf(variant, ['container', 'compact']);\n}\n\nexport function variantRequiresActionsDivider(variant: InternalVariant) {\n return variantIsOneOf(variant, ['default', 'inline']);\n}\n", "\n import './styles.scoped.css';\n export default {\n \"content-enter\": \"awsui_content-enter_gwq0h_yfiql_161\",\n \"awsui-motion-fade-in\": \"awsui_awsui-motion-fade-in_gwq0h_yfiql_1\",\n \"trigger-expanded\": \"awsui_trigger-expanded_gwq0h_yfiql_183\",\n \"icon\": \"awsui_icon_gwq0h_yfiql_197\",\n \"root\": \"awsui_root_gwq0h_yfiql_211\",\n \"expand-button\": \"awsui_expand-button_gwq0h_yfiql_246\",\n \"expanded\": \"awsui_expanded_gwq0h_yfiql_254\",\n \"icon-container\": \"awsui_icon-container_gwq0h_yfiql_264\",\n \"icon-container-container\": \"awsui_icon-container-container_gwq0h_yfiql_268\",\n \"wrapper\": \"awsui_wrapper_gwq0h_yfiql_272\",\n \"wrapper-default\": \"awsui_wrapper-default_gwq0h_yfiql_280\",\n \"wrapper-inline\": \"awsui_wrapper-inline_gwq0h_yfiql_280\",\n \"wrapper-footer\": \"awsui_wrapper-footer_gwq0h_yfiql_280\",\n \"wrapper-navigation\": \"awsui_wrapper-navigation_gwq0h_yfiql_284\",\n \"wrapper-container\": \"awsui_wrapper-container_gwq0h_yfiql_287\",\n \"wrapper-compact\": \"awsui_wrapper-compact_gwq0h_yfiql_291\",\n \"header-deprecated\": \"awsui_header-deprecated_gwq0h_yfiql_304\",\n \"wrapper-expanded\": \"awsui_wrapper-expanded_gwq0h_yfiql_310\",\n \"header\": \"awsui_header_gwq0h_yfiql_304\",\n \"header-wrapper\": \"awsui_header-wrapper_gwq0h_yfiql_347\",\n \"header-actions-wrapper\": \"awsui_header-actions-wrapper_gwq0h_yfiql_359\",\n \"header-button\": \"awsui_header-button_gwq0h_yfiql_365\",\n \"header-container-button\": \"awsui_header-container-button_gwq0h_yfiql_365\",\n \"header-container\": \"awsui_header-container_gwq0h_yfiql_365\",\n \"header-navigation\": \"awsui_header-navigation_gwq0h_yfiql_400\",\n \"header-text\": \"awsui_header-text_gwq0h_yfiql_437\",\n \"content\": \"awsui_content_gwq0h_yfiql_161\",\n \"content-default\": \"awsui_content-default_gwq0h_yfiql_450\",\n \"content-inline\": \"awsui_content-inline_gwq0h_yfiql_450\",\n \"content-footer\": \"awsui_content-footer_gwq0h_yfiql_454\",\n \"content-expanded\": \"awsui_content-expanded_gwq0h_yfiql_458\",\n \"content-compact\": \"awsui_content-compact_gwq0h_yfiql_461\",\n \"focusable\": \"awsui_focusable_gwq0h_yfiql_465\",\n \"click-target\": \"awsui_click-target_gwq0h_yfiql_480\"\n};\n ", "// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React, { memo } from 'react';\nimport clsx from 'clsx';\n\nimport { BaseComponentProps } from '../../base-component';\n\nimport styles from './styles.css.js';\n\nexport type ChartSeriesMarkerType = 'line' | 'rectangle' | 'dashed' | 'hollow-rectangle';\n\ninterface ChartSeriesMarkerProps extends BaseComponentProps {\n type: ChartSeriesMarkerType;\n color: string;\n}\n\nexport default memo(ChartSeriesMarker);\n\nfunction ChartSeriesMarker({ type = 'line', color }: ChartSeriesMarkerProps) {\n return (\n \n );\n}\n", "\n import './styles.scoped.css';\n export default {\n \"marker\": \"awsui_marker_1isd1_1kkp9_145\",\n \"marker--line\": \"awsui_marker--line_1isd1_1kkp9_185\",\n \"marker--rectangle\": \"awsui_marker--rectangle_1isd1_1kkp9_189\",\n \"marker--hollow-rectangle\": \"awsui_marker--hollow-rectangle_1isd1_1kkp9_196\",\n \"marker--dashed\": \"awsui_marker--dashed_1isd1_1kkp9_212\"\n};\n ", "\n import './styles.scoped.css';\n export default {\n \"dimmed\": \"awsui_dimmed_10ipo_1gd9t_153\",\n \"marker\": \"awsui_marker_10ipo_1gd9t_205\",\n \"marker--line\": \"awsui_marker--line_10ipo_1gd9t_245\",\n \"marker--rectangle\": \"awsui_marker--rectangle_10ipo_1gd9t_249\",\n \"marker--hollow-rectangle\": \"awsui_marker--hollow-rectangle_10ipo_1gd9t_256\",\n \"marker--dashed\": \"awsui_marker--dashed_10ipo_1gd9t_272\",\n \"root\": \"awsui_root_10ipo_1gd9t_291\",\n \"value\": \"awsui_value_10ipo_1gd9t_323\",\n \"expandable\": \"awsui_expandable_10ipo_1gd9t_327\",\n \"list-item\": \"awsui_list-item_10ipo_1gd9t_331\",\n \"inner-list-item\": \"awsui_inner-list-item_10ipo_1gd9t_332\",\n \"key-value-pair\": \"awsui_key-value-pair_10ipo_1gd9t_337\",\n \"expandable-section\": \"awsui_expandable-section_10ipo_1gd9t_338\",\n \"key\": \"awsui_key_10ipo_1gd9t_337\",\n \"sub-items\": \"awsui_sub-items_10ipo_1gd9t_351\",\n \"list\": \"awsui_list_10ipo_1gd9t_331\",\n \"compact\": \"awsui_compact_10ipo_1gd9t_377\",\n \"with-sub-items\": \"awsui_with-sub-items_10ipo_1gd9t_382\",\n \"full-width\": \"awsui_full-width_10ipo_1gd9t_387\",\n \"announced\": \"awsui_announced_10ipo_1gd9t_391\"\n};\n ", "// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport expandabeleSectionHeaderStyles from '../../../expandable-section/styles.css.js';\nimport styles from './styles.css.js';\n\nexport default function getSeriesDetailsText(element: HTMLElement) {\n const elementsWithText = Array.from(\n element.querySelectorAll(`.${styles.announced},.${expandabeleSectionHeaderStyles.header}`)\n );\n return elementsWithText\n .map(element => {\n if (element instanceof HTMLElement) {\n return element.innerText\n ?.split('\\n')\n .map(s => s.trim())\n .join(' ')\n .trim();\n }\n })\n .filter(Boolean)\n .join(', ');\n}\n", "\n import './styles.scoped.css';\n export default {\n \"series\": \"awsui_series_y1yrh_ypeom_189\",\n \"root\": \"awsui_root_y1yrh_ypeom_203\",\n \"series--highlighted\": \"awsui_series--highlighted_y1yrh_ypeom_215\",\n \"series--dimmed\": \"awsui_series--dimmed_y1yrh_ypeom_219\",\n \"series--threshold\": \"awsui_series--threshold_y1yrh_ypeom_223\",\n \"popover-divider\": \"awsui_popover-divider_y1yrh_ypeom_228\"\n};\n ", "// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React, { memo } from 'react';\nimport clsx from 'clsx';\n\nimport { useUniqueId } from '../../internal/hooks/use-unique-id';\nimport { useSelector } from '../async-store';\nimport { AreaChartProps } from '../interfaces';\nimport { ChartModel } from '../model';\nimport AreaSeries from './area-series';\nimport ThresholdSeries from './threshold-series';\n\nimport styles from '../styles.css.js';\n\nexport default memo(DataSeries) as typeof DataSeries;\n\nfunction DataSeries({ model }: { model: ChartModel }) {\n const chartAreaClipPath = useUniqueId('awsui-area-chart__chart-area-');\n\n const highlightedX = useSelector(model.interactions, state => state.highlightedX);\n const highlightedSeries = useSelector(model.interactions, state => state.highlightedSeries);\n const useHighlightDimmed = !highlightedX;\n\n // Iterating series in the reversed order so that SVG paths overlap correctly.\n const seriesData: [AreaChartProps.Series, ChartModel.PlotPoint[]][] = [];\n for (let seriesIndex = model.series.length - 1; seriesIndex >= 0; seriesIndex--) {\n if (model.computed.plot.sx[seriesIndex]) {\n seriesData.push([model.series[seriesIndex], model.computed.plot.sx[seriesIndex] || []]);\n }\n }\n\n return (\n <>\n \n \n \n \n \n \n {seriesData.map(([series, data]) => {\n const isHighlighted = series === highlightedSeries;\n const isDimmed = !!highlightedSeries && !isHighlighted;\n\n return (\n \n {series.type === 'area' ? (\n \n ) : (\n \n )}\n \n );\n })}\n \n \n );\n}\n", "// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React, { memo } from 'react';\nimport { area, line } from 'd3-shape';\n\nimport { ChartModel } from '../model';\n\ninterface AreaSeriesProps {\n data: readonly ChartModel.PlotPoint[];\n color: string;\n chartAreaClipPath: string;\n}\n\nexport default memo(AreaSeries) as typeof AreaSeries;\n\nfunction AreaSeries({ data, color, chartAreaClipPath }: AreaSeriesProps) {\n const areaGenerator = area>()\n .x((p: ChartModel.PlotPoint) => p.scaled.x)\n .y0((p: ChartModel.PlotPoint) => p.scaled.y0)\n .y1((p: ChartModel.PlotPoint) => p.scaled.y1);\n const areaPath = areaGenerator(data as ChartModel.PlotPoint[]) || '';\n\n const lineGenerator = line>()\n .x((p: ChartModel.PlotPoint) => p.scaled.x)\n .y((p: ChartModel.PlotPoint) => p.scaled.y1);\n const linePath = lineGenerator(data as ChartModel.PlotPoint[]) || '';\n\n return (\n <>\n \n \n \n );\n}\n", "var pi = Math.PI,\n tau = 2 * pi,\n epsilon = 1e-6,\n tauEpsilon = tau - epsilon;\n\nfunction Path() {\n this._x0 = this._y0 = // start of current subpath\n this._x1 = this._y1 = null; // end of current subpath\n this._ = \"\";\n}\n\nfunction path() {\n return new Path;\n}\n\nPath.prototype = path.prototype = {\n constructor: Path,\n moveTo: function(x, y) {\n this._ += \"M\" + (this._x0 = this._x1 = +x) + \",\" + (this._y0 = this._y1 = +y);\n },\n closePath: function() {\n if (this._x1 !== null) {\n this._x1 = this._x0, this._y1 = this._y0;\n this._ += \"Z\";\n }\n },\n lineTo: function(x, y) {\n this._ += \"L\" + (this._x1 = +x) + \",\" + (this._y1 = +y);\n },\n quadraticCurveTo: function(x1, y1, x, y) {\n this._ += \"Q\" + (+x1) + \",\" + (+y1) + \",\" + (this._x1 = +x) + \",\" + (this._y1 = +y);\n },\n bezierCurveTo: function(x1, y1, x2, y2, x, y) {\n this._ += \"C\" + (+x1) + \",\" + (+y1) + \",\" + (+x2) + \",\" + (+y2) + \",\" + (this._x1 = +x) + \",\" + (this._y1 = +y);\n },\n arcTo: function(x1, y1, x2, y2, r) {\n x1 = +x1, y1 = +y1, x2 = +x2, y2 = +y2, r = +r;\n var x0 = this._x1,\n y0 = this._y1,\n x21 = x2 - x1,\n y21 = y2 - y1,\n x01 = x0 - x1,\n y01 = y0 - y1,\n l01_2 = x01 * x01 + y01 * y01;\n\n // Is the radius negative? Error.\n if (r < 0) throw new Error(\"negative radius: \" + r);\n\n // Is this path empty? Move to (x1,y1).\n if (this._x1 === null) {\n this._ += \"M\" + (this._x1 = x1) + \",\" + (this._y1 = y1);\n }\n\n // Or, is (x1,y1) coincident with (x0,y0)? Do nothing.\n else if (!(l01_2 > epsilon));\n\n // Or, are (x0,y0), (x1,y1) and (x2,y2) collinear?\n // Equivalently, is (x1,y1) coincident with (x2,y2)?\n // Or, is the radius zero? Line to (x1,y1).\n else if (!(Math.abs(y01 * x21 - y21 * x01) > epsilon) || !r) {\n this._ += \"L\" + (this._x1 = x1) + \",\" + (this._y1 = y1);\n }\n\n // Otherwise, draw an arc!\n else {\n var x20 = x2 - x0,\n y20 = y2 - y0,\n l21_2 = x21 * x21 + y21 * y21,\n l20_2 = x20 * x20 + y20 * y20,\n l21 = Math.sqrt(l21_2),\n l01 = Math.sqrt(l01_2),\n l = r * Math.tan((pi - Math.acos((l21_2 + l01_2 - l20_2) / (2 * l21 * l01))) / 2),\n t01 = l / l01,\n t21 = l / l21;\n\n // If the start tangent is not coincident with (x0,y0), line to.\n if (Math.abs(t01 - 1) > epsilon) {\n this._ += \"L\" + (x1 + t01 * x01) + \",\" + (y1 + t01 * y01);\n }\n\n this._ += \"A\" + r + \",\" + r + \",0,0,\" + (+(y01 * x20 > x01 * y20)) + \",\" + (this._x1 = x1 + t21 * x21) + \",\" + (this._y1 = y1 + t21 * y21);\n }\n },\n arc: function(x, y, r, a0, a1, ccw) {\n x = +x, y = +y, r = +r, ccw = !!ccw;\n var dx = r * Math.cos(a0),\n dy = r * Math.sin(a0),\n x0 = x + dx,\n y0 = y + dy,\n cw = 1 ^ ccw,\n da = ccw ? a0 - a1 : a1 - a0;\n\n // Is the radius negative? Error.\n if (r < 0) throw new Error(\"negative radius: \" + r);\n\n // Is this path empty? Move to (x0,y0).\n if (this._x1 === null) {\n this._ += \"M\" + x0 + \",\" + y0;\n }\n\n // Or, is (x0,y0) not coincident with the previous point? Line to (x0,y0).\n else if (Math.abs(this._x1 - x0) > epsilon || Math.abs(this._y1 - y0) > epsilon) {\n this._ += \"L\" + x0 + \",\" + y0;\n }\n\n // Is this arc empty? We’re done.\n if (!r) return;\n\n // Does the angle go the wrong way? Flip the direction.\n if (da < 0) da = da % tau + tau;\n\n // Is this a complete circle? Draw two arcs to complete the circle.\n if (da > tauEpsilon) {\n this._ += \"A\" + r + \",\" + r + \",0,1,\" + cw + \",\" + (x - dx) + \",\" + (y - dy) + \"A\" + r + \",\" + r + \",0,1,\" + cw + \",\" + (this._x1 = x0) + \",\" + (this._y1 = y0);\n }\n\n // Is this arc non-empty? Draw an arc!\n else if (da > epsilon) {\n this._ += \"A\" + r + \",\" + r + \",0,\" + (+(da >= pi)) + \",\" + cw + \",\" + (this._x1 = x + r * Math.cos(a1)) + \",\" + (this._y1 = y + r * Math.sin(a1));\n }\n },\n rect: function(x, y, w, h) {\n this._ += \"M\" + (this._x0 = this._x1 = +x) + \",\" + (this._y0 = this._y1 = +y) + \"h\" + (+w) + \"v\" + (+h) + \"h\" + (-w) + \"Z\";\n },\n toString: function() {\n return this._;\n }\n};\n\nexport default path;\n", "export default function(x) {\n return function constant() {\n return x;\n };\n}\n", "export var abs = Math.abs;\nexport var atan2 = Math.atan2;\nexport var cos = Math.cos;\nexport var max = Math.max;\nexport var min = Math.min;\nexport var sin = Math.sin;\nexport var sqrt = Math.sqrt;\n\nexport var epsilon = 1e-12;\nexport var pi = Math.PI;\nexport var halfPi = pi / 2;\nexport var tau = 2 * pi;\n\nexport function acos(x) {\n return x > 1 ? 0 : x < -1 ? pi : Math.acos(x);\n}\n\nexport function asin(x) {\n return x >= 1 ? halfPi : x <= -1 ? -halfPi : Math.asin(x);\n}\n", "import {path} from \"d3-path\";\nimport constant from \"./constant.js\";\nimport {abs, acos, asin, atan2, cos, epsilon, halfPi, max, min, pi, sin, sqrt, tau} from \"./math.js\";\n\nfunction arcInnerRadius(d) {\n return d.innerRadius;\n}\n\nfunction arcOuterRadius(d) {\n return d.outerRadius;\n}\n\nfunction arcStartAngle(d) {\n return d.startAngle;\n}\n\nfunction arcEndAngle(d) {\n return d.endAngle;\n}\n\nfunction arcPadAngle(d) {\n return d && d.padAngle; // Note: optional!\n}\n\nfunction intersect(x0, y0, x1, y1, x2, y2, x3, y3) {\n var x10 = x1 - x0, y10 = y1 - y0,\n x32 = x3 - x2, y32 = y3 - y2,\n t = y32 * x10 - x32 * y10;\n if (t * t < epsilon) return;\n t = (x32 * (y0 - y2) - y32 * (x0 - x2)) / t;\n return [x0 + t * x10, y0 + t * y10];\n}\n\n// Compute perpendicular offset line of length rc.\n// http://mathworld.wolfram.com/Circle-LineIntersection.html\nfunction cornerTangents(x0, y0, x1, y1, r1, rc, cw) {\n var x01 = x0 - x1,\n y01 = y0 - y1,\n lo = (cw ? rc : -rc) / sqrt(x01 * x01 + y01 * y01),\n ox = lo * y01,\n oy = -lo * x01,\n x11 = x0 + ox,\n y11 = y0 + oy,\n x10 = x1 + ox,\n y10 = y1 + oy,\n x00 = (x11 + x10) / 2,\n y00 = (y11 + y10) / 2,\n dx = x10 - x11,\n dy = y10 - y11,\n d2 = dx * dx + dy * dy,\n r = r1 - rc,\n D = x11 * y10 - x10 * y11,\n d = (dy < 0 ? -1 : 1) * sqrt(max(0, r * r * d2 - D * D)),\n cx0 = (D * dy - dx * d) / d2,\n cy0 = (-D * dx - dy * d) / d2,\n cx1 = (D * dy + dx * d) / d2,\n cy1 = (-D * dx + dy * d) / d2,\n dx0 = cx0 - x00,\n dy0 = cy0 - y00,\n dx1 = cx1 - x00,\n dy1 = cy1 - y00;\n\n // Pick the closer of the two intersection points.\n // TODO Is there a faster way to determine which intersection to use?\n if (dx0 * dx0 + dy0 * dy0 > dx1 * dx1 + dy1 * dy1) cx0 = cx1, cy0 = cy1;\n\n return {\n cx: cx0,\n cy: cy0,\n x01: -ox,\n y01: -oy,\n x11: cx0 * (r1 / r - 1),\n y11: cy0 * (r1 / r - 1)\n };\n}\n\nexport default function() {\n var innerRadius = arcInnerRadius,\n outerRadius = arcOuterRadius,\n cornerRadius = constant(0),\n padRadius = null,\n startAngle = arcStartAngle,\n endAngle = arcEndAngle,\n padAngle = arcPadAngle,\n context = null;\n\n function arc() {\n var buffer,\n r,\n r0 = +innerRadius.apply(this, arguments),\n r1 = +outerRadius.apply(this, arguments),\n a0 = startAngle.apply(this, arguments) - halfPi,\n a1 = endAngle.apply(this, arguments) - halfPi,\n da = abs(a1 - a0),\n cw = a1 > a0;\n\n if (!context) context = buffer = path();\n\n // Ensure that the outer radius is always larger than the inner radius.\n if (r1 < r0) r = r1, r1 = r0, r0 = r;\n\n // Is it a point?\n if (!(r1 > epsilon)) context.moveTo(0, 0);\n\n // Or is it a circle or annulus?\n else if (da > tau - epsilon) {\n context.moveTo(r1 * cos(a0), r1 * sin(a0));\n context.arc(0, 0, r1, a0, a1, !cw);\n if (r0 > epsilon) {\n context.moveTo(r0 * cos(a1), r0 * sin(a1));\n context.arc(0, 0, r0, a1, a0, cw);\n }\n }\n\n // Or is it a circular or annular sector?\n else {\n var a01 = a0,\n a11 = a1,\n a00 = a0,\n a10 = a1,\n da0 = da,\n da1 = da,\n ap = padAngle.apply(this, arguments) / 2,\n rp = (ap > epsilon) && (padRadius ? +padRadius.apply(this, arguments) : sqrt(r0 * r0 + r1 * r1)),\n rc = min(abs(r1 - r0) / 2, +cornerRadius.apply(this, arguments)),\n rc0 = rc,\n rc1 = rc,\n t0,\n t1;\n\n // Apply padding? Note that since r1 ≥ r0, da1 ≥ da0.\n if (rp > epsilon) {\n var p0 = asin(rp / r0 * sin(ap)),\n p1 = asin(rp / r1 * sin(ap));\n if ((da0 -= p0 * 2) > epsilon) p0 *= (cw ? 1 : -1), a00 += p0, a10 -= p0;\n else da0 = 0, a00 = a10 = (a0 + a1) / 2;\n if ((da1 -= p1 * 2) > epsilon) p1 *= (cw ? 1 : -1), a01 += p1, a11 -= p1;\n else da1 = 0, a01 = a11 = (a0 + a1) / 2;\n }\n\n var x01 = r1 * cos(a01),\n y01 = r1 * sin(a01),\n x10 = r0 * cos(a10),\n y10 = r0 * sin(a10);\n\n // Apply rounded corners?\n if (rc > epsilon) {\n var x11 = r1 * cos(a11),\n y11 = r1 * sin(a11),\n x00 = r0 * cos(a00),\n y00 = r0 * sin(a00),\n oc;\n\n // Restrict the corner radius according to the sector angle.\n if (da < pi && (oc = intersect(x01, y01, x00, y00, x11, y11, x10, y10))) {\n var ax = x01 - oc[0],\n ay = y01 - oc[1],\n bx = x11 - oc[0],\n by = y11 - oc[1],\n kc = 1 / sin(acos((ax * bx + ay * by) / (sqrt(ax * ax + ay * ay) * sqrt(bx * bx + by * by))) / 2),\n lc = sqrt(oc[0] * oc[0] + oc[1] * oc[1]);\n rc0 = min(rc, (r0 - lc) / (kc - 1));\n rc1 = min(rc, (r1 - lc) / (kc + 1));\n }\n }\n\n // Is the sector collapsed to a line?\n if (!(da1 > epsilon)) context.moveTo(x01, y01);\n\n // Does the sector’s outer ring have rounded corners?\n else if (rc1 > epsilon) {\n t0 = cornerTangents(x00, y00, x01, y01, r1, rc1, cw);\n t1 = cornerTangents(x11, y11, x10, y10, r1, rc1, cw);\n\n context.moveTo(t0.cx + t0.x01, t0.cy + t0.y01);\n\n // Have the corners merged?\n if (rc1 < rc) context.arc(t0.cx, t0.cy, rc1, atan2(t0.y01, t0.x01), atan2(t1.y01, t1.x01), !cw);\n\n // Otherwise, draw the two corners and the ring.\n else {\n context.arc(t0.cx, t0.cy, rc1, atan2(t0.y01, t0.x01), atan2(t0.y11, t0.x11), !cw);\n context.arc(0, 0, r1, atan2(t0.cy + t0.y11, t0.cx + t0.x11), atan2(t1.cy + t1.y11, t1.cx + t1.x11), !cw);\n context.arc(t1.cx, t1.cy, rc1, atan2(t1.y11, t1.x11), atan2(t1.y01, t1.x01), !cw);\n }\n }\n\n // Or is the outer ring just a circular arc?\n else context.moveTo(x01, y01), context.arc(0, 0, r1, a01, a11, !cw);\n\n // Is there no inner ring, and it’s a circular sector?\n // Or perhaps it’s an annular sector collapsed due to padding?\n if (!(r0 > epsilon) || !(da0 > epsilon)) context.lineTo(x10, y10);\n\n // Does the sector’s inner ring (or point) have rounded corners?\n else if (rc0 > epsilon) {\n t0 = cornerTangents(x10, y10, x11, y11, r0, -rc0, cw);\n t1 = cornerTangents(x01, y01, x00, y00, r0, -rc0, cw);\n\n context.lineTo(t0.cx + t0.x01, t0.cy + t0.y01);\n\n // Have the corners merged?\n if (rc0 < rc) context.arc(t0.cx, t0.cy, rc0, atan2(t0.y01, t0.x01), atan2(t1.y01, t1.x01), !cw);\n\n // Otherwise, draw the two corners and the ring.\n else {\n context.arc(t0.cx, t0.cy, rc0, atan2(t0.y01, t0.x01), atan2(t0.y11, t0.x11), !cw);\n context.arc(0, 0, r0, atan2(t0.cy + t0.y11, t0.cx + t0.x11), atan2(t1.cy + t1.y11, t1.cx + t1.x11), cw);\n context.arc(t1.cx, t1.cy, rc0, atan2(t1.y11, t1.x11), atan2(t1.y01, t1.x01), !cw);\n }\n }\n\n // Or is the inner ring just a circular arc?\n else context.arc(0, 0, r0, a10, a00, cw);\n }\n\n context.closePath();\n\n if (buffer) return context = null, buffer + \"\" || null;\n }\n\n arc.centroid = function() {\n var r = (+innerRadius.apply(this, arguments) + +outerRadius.apply(this, arguments)) / 2,\n a = (+startAngle.apply(this, arguments) + +endAngle.apply(this, arguments)) / 2 - pi / 2;\n return [cos(a) * r, sin(a) * r];\n };\n\n arc.innerRadius = function(_) {\n return arguments.length ? (innerRadius = typeof _ === \"function\" ? _ : constant(+_), arc) : innerRadius;\n };\n\n arc.outerRadius = function(_) {\n return arguments.length ? (outerRadius = typeof _ === \"function\" ? _ : constant(+_), arc) : outerRadius;\n };\n\n arc.cornerRadius = function(_) {\n return arguments.length ? (cornerRadius = typeof _ === \"function\" ? _ : constant(+_), arc) : cornerRadius;\n };\n\n arc.padRadius = function(_) {\n return arguments.length ? (padRadius = _ == null ? null : typeof _ === \"function\" ? _ : constant(+_), arc) : padRadius;\n };\n\n arc.startAngle = function(_) {\n return arguments.length ? (startAngle = typeof _ === \"function\" ? _ : constant(+_), arc) : startAngle;\n };\n\n arc.endAngle = function(_) {\n return arguments.length ? (endAngle = typeof _ === \"function\" ? _ : constant(+_), arc) : endAngle;\n };\n\n arc.padAngle = function(_) {\n return arguments.length ? (padAngle = typeof _ === \"function\" ? _ : constant(+_), arc) : padAngle;\n };\n\n arc.context = function(_) {\n return arguments.length ? ((context = _ == null ? null : _), arc) : context;\n };\n\n return arc;\n}\n", "function Linear(context) {\n this._context = context;\n}\n\nLinear.prototype = {\n areaStart: function() {\n this._line = 0;\n },\n areaEnd: function() {\n this._line = NaN;\n },\n lineStart: function() {\n this._point = 0;\n },\n lineEnd: function() {\n if (this._line || (this._line !== 0 && this._point === 1)) this._context.closePath();\n this._line = 1 - this._line;\n },\n point: function(x, y) {\n x = +x, y = +y;\n switch (this._point) {\n case 0: this._point = 1; this._line ? this._context.lineTo(x, y) : this._context.moveTo(x, y); break;\n case 1: this._point = 2; // proceed\n default: this._context.lineTo(x, y); break;\n }\n }\n};\n\nexport default function(context) {\n return new Linear(context);\n}\n", "export function x(p) {\n return p[0];\n}\n\nexport function y(p) {\n return p[1];\n}\n", "import {path} from \"d3-path\";\nimport constant from \"./constant.js\";\nimport curveLinear from \"./curve/linear.js\";\nimport {x as pointX, y as pointY} from \"./point.js\";\n\nexport default function() {\n var x = pointX,\n y = pointY,\n defined = constant(true),\n context = null,\n curve = curveLinear,\n output = null;\n\n function line(data) {\n var i,\n n = data.length,\n d,\n defined0 = false,\n buffer;\n\n if (context == null) output = curve(buffer = path());\n\n for (i = 0; i <= n; ++i) {\n if (!(i < n && defined(d = data[i], i, data)) === defined0) {\n if (defined0 = !defined0) output.lineStart();\n else output.lineEnd();\n }\n if (defined0) output.point(+x(d, i, data), +y(d, i, data));\n }\n\n if (buffer) return output = null, buffer + \"\" || null;\n }\n\n line.x = function(_) {\n return arguments.length ? (x = typeof _ === \"function\" ? _ : constant(+_), line) : x;\n };\n\n line.y = function(_) {\n return arguments.length ? (y = typeof _ === \"function\" ? _ : constant(+_), line) : y;\n };\n\n line.defined = function(_) {\n return arguments.length ? (defined = typeof _ === \"function\" ? _ : constant(!!_), line) : defined;\n };\n\n line.curve = function(_) {\n return arguments.length ? (curve = _, context != null && (output = curve(context)), line) : curve;\n };\n\n line.context = function(_) {\n return arguments.length ? (_ == null ? context = output = null : output = curve(context = _), line) : context;\n };\n\n return line;\n}\n", "import {path} from \"d3-path\";\nimport constant from \"./constant.js\";\nimport curveLinear from \"./curve/linear.js\";\nimport line from \"./line.js\";\nimport {x as pointX, y as pointY} from \"./point.js\";\n\nexport default function() {\n var x0 = pointX,\n x1 = null,\n y0 = constant(0),\n y1 = pointY,\n defined = constant(true),\n context = null,\n curve = curveLinear,\n output = null;\n\n function area(data) {\n var i,\n j,\n k,\n n = data.length,\n d,\n defined0 = false,\n buffer,\n x0z = new Array(n),\n y0z = new Array(n);\n\n if (context == null) output = curve(buffer = path());\n\n for (i = 0; i <= n; ++i) {\n if (!(i < n && defined(d = data[i], i, data)) === defined0) {\n if (defined0 = !defined0) {\n j = i;\n output.areaStart();\n output.lineStart();\n } else {\n output.lineEnd();\n output.lineStart();\n for (k = i - 1; k >= j; --k) {\n output.point(x0z[k], y0z[k]);\n }\n output.lineEnd();\n output.areaEnd();\n }\n }\n if (defined0) {\n x0z[i] = +x0(d, i, data), y0z[i] = +y0(d, i, data);\n output.point(x1 ? +x1(d, i, data) : x0z[i], y1 ? +y1(d, i, data) : y0z[i]);\n }\n }\n\n if (buffer) return output = null, buffer + \"\" || null;\n }\n\n function arealine() {\n return line().defined(defined).curve(curve).context(context);\n }\n\n area.x = function(_) {\n return arguments.length ? (x0 = typeof _ === \"function\" ? _ : constant(+_), x1 = null, area) : x0;\n };\n\n area.x0 = function(_) {\n return arguments.length ? (x0 = typeof _ === \"function\" ? _ : constant(+_), area) : x0;\n };\n\n area.x1 = function(_) {\n return arguments.length ? (x1 = _ == null ? null : typeof _ === \"function\" ? _ : constant(+_), area) : x1;\n };\n\n area.y = function(_) {\n return arguments.length ? (y0 = typeof _ === \"function\" ? _ : constant(+_), y1 = null, area) : y0;\n };\n\n area.y0 = function(_) {\n return arguments.length ? (y0 = typeof _ === \"function\" ? _ : constant(+_), area) : y0;\n };\n\n area.y1 = function(_) {\n return arguments.length ? (y1 = _ == null ? null : typeof _ === \"function\" ? _ : constant(+_), area) : y1;\n };\n\n area.lineX0 =\n area.lineY0 = function() {\n return arealine().x(x0).y(y0);\n };\n\n area.lineY1 = function() {\n return arealine().x(x0).y(y1);\n };\n\n area.lineX1 = function() {\n return arealine().x(x1).y(y0);\n };\n\n area.defined = function(_) {\n return arguments.length ? (defined = typeof _ === \"function\" ? _ : constant(!!_), area) : defined;\n };\n\n area.curve = function(_) {\n return arguments.length ? (curve = _, context != null && (output = curve(context)), area) : curve;\n };\n\n area.context = function(_) {\n return arguments.length ? (_ == null ? context = output = null : output = curve(context = _), area) : context;\n };\n\n return area;\n}\n", "export default function(a, b) {\n return b < a ? -1 : b > a ? 1 : b >= a ? 0 : NaN;\n}\n", "export default function(d) {\n return d;\n}\n", "import constant from \"./constant.js\";\nimport descending from \"./descending.js\";\nimport identity from \"./identity.js\";\nimport {tau} from \"./math.js\";\n\nexport default function() {\n var value = identity,\n sortValues = descending,\n sort = null,\n startAngle = constant(0),\n endAngle = constant(tau),\n padAngle = constant(0);\n\n function pie(data) {\n var i,\n n = data.length,\n j,\n k,\n sum = 0,\n index = new Array(n),\n arcs = new Array(n),\n a0 = +startAngle.apply(this, arguments),\n da = Math.min(tau, Math.max(-tau, endAngle.apply(this, arguments) - a0)),\n a1,\n p = Math.min(Math.abs(da) / n, padAngle.apply(this, arguments)),\n pa = p * (da < 0 ? -1 : 1),\n v;\n\n for (i = 0; i < n; ++i) {\n if ((v = arcs[index[i] = i] = +value(data[i], i, data)) > 0) {\n sum += v;\n }\n }\n\n // Optionally sort the arcs by previously-computed values or by data.\n if (sortValues != null) index.sort(function(i, j) { return sortValues(arcs[i], arcs[j]); });\n else if (sort != null) index.sort(function(i, j) { return sort(data[i], data[j]); });\n\n // Compute the arcs! They are stored in the original data's order.\n for (i = 0, k = sum ? (da - n * pa) / sum : 0; i < n; ++i, a0 = a1) {\n j = index[i], v = arcs[j], a1 = a0 + (v > 0 ? v * k : 0) + pa, arcs[j] = {\n data: data[j],\n index: i,\n value: v,\n startAngle: a0,\n endAngle: a1,\n padAngle: p\n };\n }\n\n return arcs;\n }\n\n pie.value = function(_) {\n return arguments.length ? (value = typeof _ === \"function\" ? _ : constant(+_), pie) : value;\n };\n\n pie.sortValues = function(_) {\n return arguments.length ? (sortValues = _, sort = null, pie) : sortValues;\n };\n\n pie.sort = function(_) {\n return arguments.length ? (sort = _, sortValues = null, pie) : sort;\n };\n\n pie.startAngle = function(_) {\n return arguments.length ? (startAngle = typeof _ === \"function\" ? _ : constant(+_), pie) : startAngle;\n };\n\n pie.endAngle = function(_) {\n return arguments.length ? (endAngle = typeof _ === \"function\" ? _ : constant(+_), pie) : endAngle;\n };\n\n pie.padAngle = function(_) {\n return arguments.length ? (padAngle = typeof _ === \"function\" ? _ : constant(+_), pie) : padAngle;\n };\n\n return pie;\n}\n", "import curveLinear from \"./linear.js\";\n\nexport var curveRadialLinear = curveRadial(curveLinear);\n\nfunction Radial(curve) {\n this._curve = curve;\n}\n\nRadial.prototype = {\n areaStart: function() {\n this._curve.areaStart();\n },\n areaEnd: function() {\n this._curve.areaEnd();\n },\n lineStart: function() {\n this._curve.lineStart();\n },\n lineEnd: function() {\n this._curve.lineEnd();\n },\n point: function(a, r) {\n this._curve.point(r * Math.sin(a), r * -Math.cos(a));\n }\n};\n\nexport default function curveRadial(curve) {\n\n function radial(context) {\n return new Radial(curve(context));\n }\n\n radial._curve = curve;\n\n return radial;\n}\n", "export var slice = Array.prototype.slice;\n", "var tan30 = Math.sqrt(1 / 3),\n tan30_2 = tan30 * 2;\n\nexport default {\n draw: function(context, size) {\n var y = Math.sqrt(size / tan30_2),\n x = y * tan30;\n context.moveTo(0, -y);\n context.lineTo(x, 0);\n context.lineTo(0, y);\n context.lineTo(-x, 0);\n context.closePath();\n }\n};\n", "import {pi, tau} from \"../math.js\";\n\nvar ka = 0.89081309152928522810,\n kr = Math.sin(pi / 10) / Math.sin(7 * pi / 10),\n kx = Math.sin(tau / 10) * kr,\n ky = -Math.cos(tau / 10) * kr;\n\nexport default {\n draw: function(context, size) {\n var r = Math.sqrt(size * ka),\n x = kx * r,\n y = ky * r;\n context.moveTo(0, -r);\n context.lineTo(x, y);\n for (var i = 1; i < 5; ++i) {\n var a = tau * i / 5,\n c = Math.cos(a),\n s = Math.sin(a);\n context.lineTo(s * r, -c * r);\n context.lineTo(c * x - s * y, s * x + c * y);\n }\n context.closePath();\n }\n};\n", "var sqrt3 = Math.sqrt(3);\n\nexport default {\n draw: function(context, size) {\n var y = -Math.sqrt(size / (sqrt3 * 3));\n context.moveTo(0, y * 2);\n context.lineTo(-sqrt3 * y, -y);\n context.lineTo(sqrt3 * y, -y);\n context.closePath();\n }\n};\n", "var c = -0.5,\n s = Math.sqrt(3) / 2,\n k = 1 / Math.sqrt(12),\n a = (k / 2 + 1) * 3;\n\nexport default {\n draw: function(context, size) {\n var r = Math.sqrt(size / a),\n x0 = r / 2,\n y0 = r * k,\n x1 = x0,\n y1 = r * k + r,\n x2 = -x1,\n y2 = y1;\n context.moveTo(x0, y0);\n context.lineTo(x1, y1);\n context.lineTo(x2, y2);\n context.lineTo(c * x0 - s * y0, s * x0 + c * y0);\n context.lineTo(c * x1 - s * y1, s * x1 + c * y1);\n context.lineTo(c * x2 - s * y2, s * x2 + c * y2);\n context.lineTo(c * x0 + s * y0, c * y0 - s * x0);\n context.lineTo(c * x1 + s * y1, c * y1 - s * x1);\n context.lineTo(c * x2 + s * y2, c * y2 - s * x2);\n context.closePath();\n }\n};\n", "export default function() {}\n", "export function point(that, x, y) {\n that._context.bezierCurveTo(\n (2 * that._x0 + that._x1) / 3,\n (2 * that._y0 + that._y1) / 3,\n (that._x0 + 2 * that._x1) / 3,\n (that._y0 + 2 * that._y1) / 3,\n (that._x0 + 4 * that._x1 + x) / 6,\n (that._y0 + 4 * that._y1 + y) / 6\n );\n}\n\nexport function Basis(context) {\n this._context = context;\n}\n\nBasis.prototype = {\n areaStart: function() {\n this._line = 0;\n },\n areaEnd: function() {\n this._line = NaN;\n },\n lineStart: function() {\n this._x0 = this._x1 =\n this._y0 = this._y1 = NaN;\n this._point = 0;\n },\n lineEnd: function() {\n switch (this._point) {\n case 3: point(this, this._x1, this._y1); // proceed\n case 2: this._context.lineTo(this._x1, this._y1); break;\n }\n if (this._line || (this._line !== 0 && this._point === 1)) this._context.closePath();\n this._line = 1 - this._line;\n },\n point: function(x, y) {\n x = +x, y = +y;\n switch (this._point) {\n case 0: this._point = 1; this._line ? this._context.lineTo(x, y) : this._context.moveTo(x, y); break;\n case 1: this._point = 2; break;\n case 2: this._point = 3; this._context.lineTo((5 * this._x0 + this._x1) / 6, (5 * this._y0 + this._y1) / 6); // proceed\n default: point(this, x, y); break;\n }\n this._x0 = this._x1, this._x1 = x;\n this._y0 = this._y1, this._y1 = y;\n }\n};\n\nexport default function(context) {\n return new Basis(context);\n}\n", "import noop from \"../noop.js\";\nimport {point} from \"./basis.js\";\n\nfunction BasisClosed(context) {\n this._context = context;\n}\n\nBasisClosed.prototype = {\n areaStart: noop,\n areaEnd: noop,\n lineStart: function() {\n this._x0 = this._x1 = this._x2 = this._x3 = this._x4 =\n this._y0 = this._y1 = this._y2 = this._y3 = this._y4 = NaN;\n this._point = 0;\n },\n lineEnd: function() {\n switch (this._point) {\n case 1: {\n this._context.moveTo(this._x2, this._y2);\n this._context.closePath();\n break;\n }\n case 2: {\n this._context.moveTo((this._x2 + 2 * this._x3) / 3, (this._y2 + 2 * this._y3) / 3);\n this._context.lineTo((this._x3 + 2 * this._x2) / 3, (this._y3 + 2 * this._y2) / 3);\n this._context.closePath();\n break;\n }\n case 3: {\n this.point(this._x2, this._y2);\n this.point(this._x3, this._y3);\n this.point(this._x4, this._y4);\n break;\n }\n }\n },\n point: function(x, y) {\n x = +x, y = +y;\n switch (this._point) {\n case 0: this._point = 1; this._x2 = x, this._y2 = y; break;\n case 1: this._point = 2; this._x3 = x, this._y3 = y; break;\n case 2: this._point = 3; this._x4 = x, this._y4 = y; this._context.moveTo((this._x0 + 4 * this._x1 + x) / 6, (this._y0 + 4 * this._y1 + y) / 6); break;\n default: point(this, x, y); break;\n }\n this._x0 = this._x1, this._x1 = x;\n this._y0 = this._y1, this._y1 = y;\n }\n};\n\nexport default function(context) {\n return new BasisClosed(context);\n}\n", "import {point} from \"./basis.js\";\n\nfunction BasisOpen(context) {\n this._context = context;\n}\n\nBasisOpen.prototype = {\n areaStart: function() {\n this._line = 0;\n },\n areaEnd: function() {\n this._line = NaN;\n },\n lineStart: function() {\n this._x0 = this._x1 =\n this._y0 = this._y1 = NaN;\n this._point = 0;\n },\n lineEnd: function() {\n if (this._line || (this._line !== 0 && this._point === 3)) this._context.closePath();\n this._line = 1 - this._line;\n },\n point: function(x, y) {\n x = +x, y = +y;\n switch (this._point) {\n case 0: this._point = 1; break;\n case 1: this._point = 2; break;\n case 2: this._point = 3; var x0 = (this._x0 + 4 * this._x1 + x) / 6, y0 = (this._y0 + 4 * this._y1 + y) / 6; this._line ? this._context.lineTo(x0, y0) : this._context.moveTo(x0, y0); break;\n case 3: this._point = 4; // proceed\n default: point(this, x, y); break;\n }\n this._x0 = this._x1, this._x1 = x;\n this._y0 = this._y1, this._y1 = y;\n }\n};\n\nexport default function(context) {\n return new BasisOpen(context);\n}\n", "import {Basis} from \"./basis.js\";\n\nfunction Bundle(context, beta) {\n this._basis = new Basis(context);\n this._beta = beta;\n}\n\nBundle.prototype = {\n lineStart: function() {\n this._x = [];\n this._y = [];\n this._basis.lineStart();\n },\n lineEnd: function() {\n var x = this._x,\n y = this._y,\n j = x.length - 1;\n\n if (j > 0) {\n var x0 = x[0],\n y0 = y[0],\n dx = x[j] - x0,\n dy = y[j] - y0,\n i = -1,\n t;\n\n while (++i <= j) {\n t = i / j;\n this._basis.point(\n this._beta * x[i] + (1 - this._beta) * (x0 + t * dx),\n this._beta * y[i] + (1 - this._beta) * (y0 + t * dy)\n );\n }\n }\n\n this._x = this._y = null;\n this._basis.lineEnd();\n },\n point: function(x, y) {\n this._x.push(+x);\n this._y.push(+y);\n }\n};\n\nexport default (function custom(beta) {\n\n function bundle(context) {\n return beta === 1 ? new Basis(context) : new Bundle(context, beta);\n }\n\n bundle.beta = function(beta) {\n return custom(+beta);\n };\n\n return bundle;\n})(0.85);\n", "export function point(that, x, y) {\n that._context.bezierCurveTo(\n that._x1 + that._k * (that._x2 - that._x0),\n that._y1 + that._k * (that._y2 - that._y0),\n that._x2 + that._k * (that._x1 - x),\n that._y2 + that._k * (that._y1 - y),\n that._x2,\n that._y2\n );\n}\n\nexport function Cardinal(context, tension) {\n this._context = context;\n this._k = (1 - tension) / 6;\n}\n\nCardinal.prototype = {\n areaStart: function() {\n this._line = 0;\n },\n areaEnd: function() {\n this._line = NaN;\n },\n lineStart: function() {\n this._x0 = this._x1 = this._x2 =\n this._y0 = this._y1 = this._y2 = NaN;\n this._point = 0;\n },\n lineEnd: function() {\n switch (this._point) {\n case 2: this._context.lineTo(this._x2, this._y2); break;\n case 3: point(this, this._x1, this._y1); break;\n }\n if (this._line || (this._line !== 0 && this._point === 1)) this._context.closePath();\n this._line = 1 - this._line;\n },\n point: function(x, y) {\n x = +x, y = +y;\n switch (this._point) {\n case 0: this._point = 1; this._line ? this._context.lineTo(x, y) : this._context.moveTo(x, y); break;\n case 1: this._point = 2; this._x1 = x, this._y1 = y; break;\n case 2: this._point = 3; // proceed\n default: point(this, x, y); break;\n }\n this._x0 = this._x1, this._x1 = this._x2, this._x2 = x;\n this._y0 = this._y1, this._y1 = this._y2, this._y2 = y;\n }\n};\n\nexport default (function custom(tension) {\n\n function cardinal(context) {\n return new Cardinal(context, tension);\n }\n\n cardinal.tension = function(tension) {\n return custom(+tension);\n };\n\n return cardinal;\n})(0);\n", "import noop from \"../noop.js\";\nimport {point} from \"./cardinal.js\";\n\nexport function CardinalClosed(context, tension) {\n this._context = context;\n this._k = (1 - tension) / 6;\n}\n\nCardinalClosed.prototype = {\n areaStart: noop,\n areaEnd: noop,\n lineStart: function() {\n this._x0 = this._x1 = this._x2 = this._x3 = this._x4 = this._x5 =\n this._y0 = this._y1 = this._y2 = this._y3 = this._y4 = this._y5 = NaN;\n this._point = 0;\n },\n lineEnd: function() {\n switch (this._point) {\n case 1: {\n this._context.moveTo(this._x3, this._y3);\n this._context.closePath();\n break;\n }\n case 2: {\n this._context.lineTo(this._x3, this._y3);\n this._context.closePath();\n break;\n }\n case 3: {\n this.point(this._x3, this._y3);\n this.point(this._x4, this._y4);\n this.point(this._x5, this._y5);\n break;\n }\n }\n },\n point: function(x, y) {\n x = +x, y = +y;\n switch (this._point) {\n case 0: this._point = 1; this._x3 = x, this._y3 = y; break;\n case 1: this._point = 2; this._context.moveTo(this._x4 = x, this._y4 = y); break;\n case 2: this._point = 3; this._x5 = x, this._y5 = y; break;\n default: point(this, x, y); break;\n }\n this._x0 = this._x1, this._x1 = this._x2, this._x2 = x;\n this._y0 = this._y1, this._y1 = this._y2, this._y2 = y;\n }\n};\n\nexport default (function custom(tension) {\n\n function cardinal(context) {\n return new CardinalClosed(context, tension);\n }\n\n cardinal.tension = function(tension) {\n return custom(+tension);\n };\n\n return cardinal;\n})(0);\n", "import {point} from \"./cardinal.js\";\n\nexport function CardinalOpen(context, tension) {\n this._context = context;\n this._k = (1 - tension) / 6;\n}\n\nCardinalOpen.prototype = {\n areaStart: function() {\n this._line = 0;\n },\n areaEnd: function() {\n this._line = NaN;\n },\n lineStart: function() {\n this._x0 = this._x1 = this._x2 =\n this._y0 = this._y1 = this._y2 = NaN;\n this._point = 0;\n },\n lineEnd: function() {\n if (this._line || (this._line !== 0 && this._point === 3)) this._context.closePath();\n this._line = 1 - this._line;\n },\n point: function(x, y) {\n x = +x, y = +y;\n switch (this._point) {\n case 0: this._point = 1; break;\n case 1: this._point = 2; break;\n case 2: this._point = 3; this._line ? this._context.lineTo(this._x2, this._y2) : this._context.moveTo(this._x2, this._y2); break;\n case 3: this._point = 4; // proceed\n default: point(this, x, y); break;\n }\n this._x0 = this._x1, this._x1 = this._x2, this._x2 = x;\n this._y0 = this._y1, this._y1 = this._y2, this._y2 = y;\n }\n};\n\nexport default (function custom(tension) {\n\n function cardinal(context) {\n return new CardinalOpen(context, tension);\n }\n\n cardinal.tension = function(tension) {\n return custom(+tension);\n };\n\n return cardinal;\n})(0);\n", "import {epsilon} from \"../math.js\";\nimport {Cardinal} from \"./cardinal.js\";\n\nexport function point(that, x, y) {\n var x1 = that._x1,\n y1 = that._y1,\n x2 = that._x2,\n y2 = that._y2;\n\n if (that._l01_a > epsilon) {\n var a = 2 * that._l01_2a + 3 * that._l01_a * that._l12_a + that._l12_2a,\n n = 3 * that._l01_a * (that._l01_a + that._l12_a);\n x1 = (x1 * a - that._x0 * that._l12_2a + that._x2 * that._l01_2a) / n;\n y1 = (y1 * a - that._y0 * that._l12_2a + that._y2 * that._l01_2a) / n;\n }\n\n if (that._l23_a > epsilon) {\n var b = 2 * that._l23_2a + 3 * that._l23_a * that._l12_a + that._l12_2a,\n m = 3 * that._l23_a * (that._l23_a + that._l12_a);\n x2 = (x2 * b + that._x1 * that._l23_2a - x * that._l12_2a) / m;\n y2 = (y2 * b + that._y1 * that._l23_2a - y * that._l12_2a) / m;\n }\n\n that._context.bezierCurveTo(x1, y1, x2, y2, that._x2, that._y2);\n}\n\nfunction CatmullRom(context, alpha) {\n this._context = context;\n this._alpha = alpha;\n}\n\nCatmullRom.prototype = {\n areaStart: function() {\n this._line = 0;\n },\n areaEnd: function() {\n this._line = NaN;\n },\n lineStart: function() {\n this._x0 = this._x1 = this._x2 =\n this._y0 = this._y1 = this._y2 = NaN;\n this._l01_a = this._l12_a = this._l23_a =\n this._l01_2a = this._l12_2a = this._l23_2a =\n this._point = 0;\n },\n lineEnd: function() {\n switch (this._point) {\n case 2: this._context.lineTo(this._x2, this._y2); break;\n case 3: this.point(this._x2, this._y2); break;\n }\n if (this._line || (this._line !== 0 && this._point === 1)) this._context.closePath();\n this._line = 1 - this._line;\n },\n point: function(x, y) {\n x = +x, y = +y;\n\n if (this._point) {\n var x23 = this._x2 - x,\n y23 = this._y2 - y;\n this._l23_a = Math.sqrt(this._l23_2a = Math.pow(x23 * x23 + y23 * y23, this._alpha));\n }\n\n switch (this._point) {\n case 0: this._point = 1; this._line ? this._context.lineTo(x, y) : this._context.moveTo(x, y); break;\n case 1: this._point = 2; break;\n case 2: this._point = 3; // proceed\n default: point(this, x, y); break;\n }\n\n this._l01_a = this._l12_a, this._l12_a = this._l23_a;\n this._l01_2a = this._l12_2a, this._l12_2a = this._l23_2a;\n this._x0 = this._x1, this._x1 = this._x2, this._x2 = x;\n this._y0 = this._y1, this._y1 = this._y2, this._y2 = y;\n }\n};\n\nexport default (function custom(alpha) {\n\n function catmullRom(context) {\n return alpha ? new CatmullRom(context, alpha) : new Cardinal(context, 0);\n }\n\n catmullRom.alpha = function(alpha) {\n return custom(+alpha);\n };\n\n return catmullRom;\n})(0.5);\n", "import {CardinalClosed} from \"./cardinalClosed.js\";\nimport noop from \"../noop.js\";\nimport {point} from \"./catmullRom.js\";\n\nfunction CatmullRomClosed(context, alpha) {\n this._context = context;\n this._alpha = alpha;\n}\n\nCatmullRomClosed.prototype = {\n areaStart: noop,\n areaEnd: noop,\n lineStart: function() {\n this._x0 = this._x1 = this._x2 = this._x3 = this._x4 = this._x5 =\n this._y0 = this._y1 = this._y2 = this._y3 = this._y4 = this._y5 = NaN;\n this._l01_a = this._l12_a = this._l23_a =\n this._l01_2a = this._l12_2a = this._l23_2a =\n this._point = 0;\n },\n lineEnd: function() {\n switch (this._point) {\n case 1: {\n this._context.moveTo(this._x3, this._y3);\n this._context.closePath();\n break;\n }\n case 2: {\n this._context.lineTo(this._x3, this._y3);\n this._context.closePath();\n break;\n }\n case 3: {\n this.point(this._x3, this._y3);\n this.point(this._x4, this._y4);\n this.point(this._x5, this._y5);\n break;\n }\n }\n },\n point: function(x, y) {\n x = +x, y = +y;\n\n if (this._point) {\n var x23 = this._x2 - x,\n y23 = this._y2 - y;\n this._l23_a = Math.sqrt(this._l23_2a = Math.pow(x23 * x23 + y23 * y23, this._alpha));\n }\n\n switch (this._point) {\n case 0: this._point = 1; this._x3 = x, this._y3 = y; break;\n case 1: this._point = 2; this._context.moveTo(this._x4 = x, this._y4 = y); break;\n case 2: this._point = 3; this._x5 = x, this._y5 = y; break;\n default: point(this, x, y); break;\n }\n\n this._l01_a = this._l12_a, this._l12_a = this._l23_a;\n this._l01_2a = this._l12_2a, this._l12_2a = this._l23_2a;\n this._x0 = this._x1, this._x1 = this._x2, this._x2 = x;\n this._y0 = this._y1, this._y1 = this._y2, this._y2 = y;\n }\n};\n\nexport default (function custom(alpha) {\n\n function catmullRom(context) {\n return alpha ? new CatmullRomClosed(context, alpha) : new CardinalClosed(context, 0);\n }\n\n catmullRom.alpha = function(alpha) {\n return custom(+alpha);\n };\n\n return catmullRom;\n})(0.5);\n", "import {CardinalOpen} from \"./cardinalOpen.js\";\nimport {point} from \"./catmullRom.js\";\n\nfunction CatmullRomOpen(context, alpha) {\n this._context = context;\n this._alpha = alpha;\n}\n\nCatmullRomOpen.prototype = {\n areaStart: function() {\n this._line = 0;\n },\n areaEnd: function() {\n this._line = NaN;\n },\n lineStart: function() {\n this._x0 = this._x1 = this._x2 =\n this._y0 = this._y1 = this._y2 = NaN;\n this._l01_a = this._l12_a = this._l23_a =\n this._l01_2a = this._l12_2a = this._l23_2a =\n this._point = 0;\n },\n lineEnd: function() {\n if (this._line || (this._line !== 0 && this._point === 3)) this._context.closePath();\n this._line = 1 - this._line;\n },\n point: function(x, y) {\n x = +x, y = +y;\n\n if (this._point) {\n var x23 = this._x2 - x,\n y23 = this._y2 - y;\n this._l23_a = Math.sqrt(this._l23_2a = Math.pow(x23 * x23 + y23 * y23, this._alpha));\n }\n\n switch (this._point) {\n case 0: this._point = 1; break;\n case 1: this._point = 2; break;\n case 2: this._point = 3; this._line ? this._context.lineTo(this._x2, this._y2) : this._context.moveTo(this._x2, this._y2); break;\n case 3: this._point = 4; // proceed\n default: point(this, x, y); break;\n }\n\n this._l01_a = this._l12_a, this._l12_a = this._l23_a;\n this._l01_2a = this._l12_2a, this._l12_2a = this._l23_2a;\n this._x0 = this._x1, this._x1 = this._x2, this._x2 = x;\n this._y0 = this._y1, this._y1 = this._y2, this._y2 = y;\n }\n};\n\nexport default (function custom(alpha) {\n\n function catmullRom(context) {\n return alpha ? new CatmullRomOpen(context, alpha) : new CardinalOpen(context, 0);\n }\n\n catmullRom.alpha = function(alpha) {\n return custom(+alpha);\n };\n\n return catmullRom;\n})(0.5);\n", "import noop from \"../noop.js\";\n\nfunction LinearClosed(context) {\n this._context = context;\n}\n\nLinearClosed.prototype = {\n areaStart: noop,\n areaEnd: noop,\n lineStart: function() {\n this._point = 0;\n },\n lineEnd: function() {\n if (this._point) this._context.closePath();\n },\n point: function(x, y) {\n x = +x, y = +y;\n if (this._point) this._context.lineTo(x, y);\n else this._point = 1, this._context.moveTo(x, y);\n }\n};\n\nexport default function(context) {\n return new LinearClosed(context);\n}\n", "function sign(x) {\n return x < 0 ? -1 : 1;\n}\n\n// Calculate the slopes of the tangents (Hermite-type interpolation) based on\n// the following paper: Steffen, M. 1990. A Simple Method for Monotonic\n// Interpolation in One Dimension. Astronomy and Astrophysics, Vol. 239, NO.\n// NOV(II), P. 443, 1990.\nfunction slope3(that, x2, y2) {\n var h0 = that._x1 - that._x0,\n h1 = x2 - that._x1,\n s0 = (that._y1 - that._y0) / (h0 || h1 < 0 && -0),\n s1 = (y2 - that._y1) / (h1 || h0 < 0 && -0),\n p = (s0 * h1 + s1 * h0) / (h0 + h1);\n return (sign(s0) + sign(s1)) * Math.min(Math.abs(s0), Math.abs(s1), 0.5 * Math.abs(p)) || 0;\n}\n\n// Calculate a one-sided slope.\nfunction slope2(that, t) {\n var h = that._x1 - that._x0;\n return h ? (3 * (that._y1 - that._y0) / h - t) / 2 : t;\n}\n\n// According to https://en.wikipedia.org/wiki/Cubic_Hermite_spline#Representations\n// \"you can express cubic Hermite interpolation in terms of cubic Bézier curves\n// with respect to the four values p0, p0 + m0 / 3, p1 - m1 / 3, p1\".\nfunction point(that, t0, t1) {\n var x0 = that._x0,\n y0 = that._y0,\n x1 = that._x1,\n y1 = that._y1,\n dx = (x1 - x0) / 3;\n that._context.bezierCurveTo(x0 + dx, y0 + dx * t0, x1 - dx, y1 - dx * t1, x1, y1);\n}\n\nfunction MonotoneX(context) {\n this._context = context;\n}\n\nMonotoneX.prototype = {\n areaStart: function() {\n this._line = 0;\n },\n areaEnd: function() {\n this._line = NaN;\n },\n lineStart: function() {\n this._x0 = this._x1 =\n this._y0 = this._y1 =\n this._t0 = NaN;\n this._point = 0;\n },\n lineEnd: function() {\n switch (this._point) {\n case 2: this._context.lineTo(this._x1, this._y1); break;\n case 3: point(this, this._t0, slope2(this, this._t0)); break;\n }\n if (this._line || (this._line !== 0 && this._point === 1)) this._context.closePath();\n this._line = 1 - this._line;\n },\n point: function(x, y) {\n var t1 = NaN;\n\n x = +x, y = +y;\n if (x === this._x1 && y === this._y1) return; // Ignore coincident points.\n switch (this._point) {\n case 0: this._point = 1; this._line ? this._context.lineTo(x, y) : this._context.moveTo(x, y); break;\n case 1: this._point = 2; break;\n case 2: this._point = 3; point(this, slope2(this, t1 = slope3(this, x, y)), t1); break;\n default: point(this, this._t0, t1 = slope3(this, x, y)); break;\n }\n\n this._x0 = this._x1, this._x1 = x;\n this._y0 = this._y1, this._y1 = y;\n this._t0 = t1;\n }\n}\n\nfunction MonotoneY(context) {\n this._context = new ReflectContext(context);\n}\n\n(MonotoneY.prototype = Object.create(MonotoneX.prototype)).point = function(x, y) {\n MonotoneX.prototype.point.call(this, y, x);\n};\n\nfunction ReflectContext(context) {\n this._context = context;\n}\n\nReflectContext.prototype = {\n moveTo: function(x, y) { this._context.moveTo(y, x); },\n closePath: function() { this._context.closePath(); },\n lineTo: function(x, y) { this._context.lineTo(y, x); },\n bezierCurveTo: function(x1, y1, x2, y2, x, y) { this._context.bezierCurveTo(y1, x1, y2, x2, y, x); }\n};\n\nexport function monotoneX(context) {\n return new MonotoneX(context);\n}\n\nexport function monotoneY(context) {\n return new MonotoneY(context);\n}\n", "function Natural(context) {\n this._context = context;\n}\n\nNatural.prototype = {\n areaStart: function() {\n this._line = 0;\n },\n areaEnd: function() {\n this._line = NaN;\n },\n lineStart: function() {\n this._x = [];\n this._y = [];\n },\n lineEnd: function() {\n var x = this._x,\n y = this._y,\n n = x.length;\n\n if (n) {\n this._line ? this._context.lineTo(x[0], y[0]) : this._context.moveTo(x[0], y[0]);\n if (n === 2) {\n this._context.lineTo(x[1], y[1]);\n } else {\n var px = controlPoints(x),\n py = controlPoints(y);\n for (var i0 = 0, i1 = 1; i1 < n; ++i0, ++i1) {\n this._context.bezierCurveTo(px[0][i0], py[0][i0], px[1][i0], py[1][i0], x[i1], y[i1]);\n }\n }\n }\n\n if (this._line || (this._line !== 0 && n === 1)) this._context.closePath();\n this._line = 1 - this._line;\n this._x = this._y = null;\n },\n point: function(x, y) {\n this._x.push(+x);\n this._y.push(+y);\n }\n};\n\n// See https://www.particleincell.com/2012/bezier-splines/ for derivation.\nfunction controlPoints(x) {\n var i,\n n = x.length - 1,\n m,\n a = new Array(n),\n b = new Array(n),\n r = new Array(n);\n a[0] = 0, b[0] = 2, r[0] = x[0] + 2 * x[1];\n for (i = 1; i < n - 1; ++i) a[i] = 1, b[i] = 4, r[i] = 4 * x[i] + 2 * x[i + 1];\n a[n - 1] = 2, b[n - 1] = 7, r[n - 1] = 8 * x[n - 1] + x[n];\n for (i = 1; i < n; ++i) m = a[i] / b[i - 1], b[i] -= m, r[i] -= m * r[i - 1];\n a[n - 1] = r[n - 1] / b[n - 1];\n for (i = n - 2; i >= 0; --i) a[i] = (r[i] - a[i + 1]) / b[i];\n b[n - 1] = (x[n] + a[n - 1]) / 2;\n for (i = 0; i < n - 1; ++i) b[i] = 2 * x[i + 1] - a[i + 1];\n return [a, b];\n}\n\nexport default function(context) {\n return new Natural(context);\n}\n", "function Step(context, t) {\n this._context = context;\n this._t = t;\n}\n\nStep.prototype = {\n areaStart: function() {\n this._line = 0;\n },\n areaEnd: function() {\n this._line = NaN;\n },\n lineStart: function() {\n this._x = this._y = NaN;\n this._point = 0;\n },\n lineEnd: function() {\n if (0 < this._t && this._t < 1 && this._point === 2) this._context.lineTo(this._x, this._y);\n if (this._line || (this._line !== 0 && this._point === 1)) this._context.closePath();\n if (this._line >= 0) this._t = 1 - this._t, this._line = 1 - this._line;\n },\n point: function(x, y) {\n x = +x, y = +y;\n switch (this._point) {\n case 0: this._point = 1; this._line ? this._context.lineTo(x, y) : this._context.moveTo(x, y); break;\n case 1: this._point = 2; // proceed\n default: {\n if (this._t <= 0) {\n this._context.lineTo(this._x, y);\n this._context.lineTo(x, y);\n } else {\n var x1 = this._x * (1 - this._t) + x * this._t;\n this._context.lineTo(x1, this._y);\n this._context.lineTo(x1, y);\n }\n break;\n }\n }\n this._x = x, this._y = y;\n }\n};\n\nexport default function(context) {\n return new Step(context, 0.5);\n}\n\nexport function stepBefore(context) {\n return new Step(context, 0);\n}\n\nexport function stepAfter(context) {\n return new Step(context, 1);\n}\n", "// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React, { memo } from 'react';\n\nimport { ChartScale } from '../../internal/components/cartesian-chart/scales';\nimport { ChartModel } from '../model';\n\ninterface ThresholdSeriesProps {\n data: readonly ChartModel.PlotPoint[];\n xScale: ChartScale;\n color: string;\n chartAreaClipPath: string;\n}\n\nexport default memo(ThresholdSeries) as typeof ThresholdSeries;\n\nfunction ThresholdSeries({ data, xScale, color, chartAreaClipPath }: ThresholdSeriesProps) {\n const range = xScale.d3Scale.range();\n const y = data[0].scaled.y0;\n const path = { x1: range[0], x2: range[1], y1: y, y2: y };\n\n return ;\n}\n", "// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React, { forwardRef, memo } from 'react';\n\nimport HighlightedPoint from '../../internal/components/cartesian-chart/highlighted-point';\nimport { useSelector } from '../async-store';\nimport { ChartModel } from '../model';\n\nexport default memo(forwardRef(AreaHighlightedPoint));\n\nfunction AreaHighlightedPoint(\n {\n model,\n ariaLabel,\n }: {\n model: ChartModel;\n ariaLabel?: string;\n },\n ref: React.Ref\n) {\n const highlightedPoint = useSelector(model.interactions, state => state.highlightedPoint);\n const isPopoverPinned = useSelector(model.interactions, state => state.isPopoverPinned);\n\n const point = highlightedPoint\n ? {\n key: `${highlightedPoint.index.x}:${highlightedPoint.index.s}`,\n x: highlightedPoint.scaled.x,\n y: highlightedPoint.scaled.y1,\n color: model.getInternalSeries(model.series[highlightedPoint.index.s]).color,\n }\n : null;\n\n return (\n \n );\n}\n", "// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React, { forwardRef, memo } from 'react';\n\nimport styles from './styles.css.js';\n\ninterface SeriesPoint {\n key: string;\n x: number;\n y: number;\n color: string;\n}\n\ninterface HighlightedPointProps {\n point: null | SeriesPoint;\n role?: 'group' | 'button';\n ariaLabel?: string;\n ariaHasPopup?: boolean;\n ariaExpanded?: boolean;\n}\n\nexport default memo(forwardRef(HighlightedPoint));\n\nfunction HighlightedPoint(\n { point, role = 'group', ariaLabel, ariaHasPopup, ariaExpanded }: HighlightedPointProps,\n ref: React.Ref\n) {\n if (!point) {\n return null;\n }\n\n return (\n \n \n \n );\n}\n", "// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport { useInternalI18n } from '../../i18n/context';\nimport { CartesianChartProps } from '../../internal/components/cartesian-chart/interfaces';\nimport { ChartSeriesDetailItem } from '../../internal/components/chart-series-details';\nimport { useSelector } from '../async-store';\nimport { AreaChartProps } from '../interfaces';\nimport { ChartModel } from '../model';\n\nexport interface HighlightDetails {\n isPopoverPinned: boolean;\n highlightIndex: number;\n formattedX: string;\n seriesTitle: string;\n formattedY: number | string;\n seriesDetails: readonly ChartSeriesDetailItem[];\n totalDetails: readonly ChartSeriesDetailItem[];\n pointDetails: null | ChartSeriesDetailItem;\n activeLabel: string;\n}\n\nexport default function useHighlightDetails({\n model,\n xTickFormatter,\n yTickFormatter,\n detailTotalFormatter,\n detailTotalLabel,\n}: {\n model: ChartModel;\n xTickFormatter?: CartesianChartProps.TickFormatter;\n yTickFormatter?: CartesianChartProps.TickFormatter;\n detailTotalFormatter?: CartesianChartProps.TickFormatter;\n detailTotalLabel?: string;\n}): null | HighlightDetails {\n const i18n = useInternalI18n('area-chart');\n const hX = useSelector(model.interactions, state => state.highlightedX);\n const hPoint = useSelector(model.interactions, state => state.highlightedPoint);\n const isPopoverPinned = useSelector(model.interactions, state => state.isPopoverPinned);\n\n if (!hX) {\n return null;\n }\n\n const [firstPoint] = hX;\n const highlightIndex = firstPoint.index.x;\n const seriesPoints = [...model.computed.plot.xs[highlightIndex]];\n const detailsTotal = seriesPoints.reduce((total, point) => total + point.value, 0);\n const formattedX = xTickFormatter ? xTickFormatter(firstPoint.x) : firstPoint.x.toString();\n const seriesTitle = hPoint ? getInternalSeries(hPoint).title : '';\n const formattedY = hPoint ? getInternalSeries(hPoint).formatValue(hPoint.value, hPoint.x) : '';\n const seriesDetails = seriesPoints.map(point => {\n const { title, formatValue, color, markerType } = getInternalSeries(point);\n const isDimmed = Boolean(hPoint) && point !== hPoint;\n return { key: title, value: formatValue(point.value, point.x), color, markerType, isDimmed };\n });\n const totalDetails = [\n {\n key: i18n('i18nStrings.detailTotalLabel', detailTotalLabel) || '',\n value: detailTotalFormatter\n ? detailTotalFormatter(detailsTotal)\n : yTickFormatter\n ? yTickFormatter(detailsTotal)\n : detailsTotal,\n },\n ];\n const pointDetails = hPoint ? seriesDetails[hPoint.index.s] : null;\n const activeLabel = `${seriesTitle} ${formattedX} ${formattedY}, ${totalDetails[0].key} ${totalDetails[0].value}`;\n\n return {\n isPopoverPinned,\n highlightIndex,\n formattedX,\n seriesTitle,\n formattedY,\n activeLabel,\n seriesDetails,\n totalDetails,\n pointDetails,\n };\n\n function getInternalSeries(point: ChartModel.PlotPoint) {\n return model.getInternalSeries(model.series[point.index.s]);\n }\n}\n", "// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React, { memo } from 'react';\n\nimport VerticalMarker from '../../internal/components/cartesian-chart/vertical-marker';\nimport { useSelector } from '../async-store';\nimport { AreaChartProps } from '../interfaces';\nimport { ChartModel } from '../model';\n\nexport default memo(AreaVerticalMarker) as typeof AreaVerticalMarker;\n\nfunction AreaVerticalMarker({ model }: { model: ChartModel }) {\n const highlightedX = useSelector(model.interactions, state => state.highlightedX);\n\n const verticalMarker = (highlightedX || []).map(point => ({\n key: `${point.index.x}:${point.index.s}`,\n x: point.scaled.x,\n y: point.scaled.y1,\n color: model.getInternalSeries(model.series[point.index.s]).color,\n }));\n\n return ;\n}\n", "// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React, { forwardRef, memo } from 'react';\n\nimport styles from './styles.css.js';\n\ninterface SeriesPoint {\n key: string;\n x: number;\n y: number;\n color: string;\n}\n\ninterface VerticalMarkerProps {\n height: number;\n showPoints?: boolean;\n showLine?: boolean;\n points: null | readonly SeriesPoint[];\n}\n\nexport default memo(forwardRef(VerticalMarker));\n\nfunction VerticalMarker(\n { height, showPoints = true, showLine = true, points }: VerticalMarkerProps,\n ref: React.Ref\n) {\n const [firstPoint] = points || [];\n\n return (\n \n \n\n {showPoints &&\n points &&\n points.map(point => (\n \n ))}\n \n );\n}\n", "// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React, { memo } from 'react';\n\nimport ChartFilter from '../../internal/components/chart-filter';\nimport { AreaChartProps } from '../interfaces';\nimport { ChartModel } from '../model';\n\nexport default memo(AreaChartFilter) as typeof AreaChartFilter;\n\nfunction AreaChartFilter({\n model,\n filterLabel,\n filterPlaceholder,\n filterSelectedAriaLabel,\n}: {\n model: ChartModel;\n filterLabel?: string;\n filterPlaceholder?: string;\n filterSelectedAriaLabel?: string;\n}) {\n const filterItems = model.allSeries.map(s => {\n const { title, color, markerType } = model.getInternalSeries(s);\n return { label: title, color, type: markerType, datum: s };\n });\n\n return (\n \n );\n}\n", "// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React, { memo, useCallback } from 'react';\nimport clsx from 'clsx';\n\nimport InternalFormField from '../../../form-field/internal';\nimport { useInternalI18n } from '../../../i18n/context';\nimport { MultiselectProps } from '../../../multiselect/interfaces';\nimport InternalMultiselect from '../../../multiselect/internal';\nimport { BaseComponentProps, getBaseProps } from '../../base-component';\nimport { NonCancelableEventHandler } from '../../events';\nimport SeriesMarker, { ChartSeriesMarkerType } from '../chart-series-marker';\n\nimport styles from './styles.css.js';\n\ninterface I18nStrings {\n filterLabel?: string;\n filterPlaceholder?: string;\n filterSelectedAriaLabel?: string;\n}\n\ninterface ChartFilterItem {\n label: string;\n color: string;\n type: ChartSeriesMarkerType;\n datum: T;\n}\n\nexport interface ChartFilterProps extends BaseComponentProps {\n series: ReadonlyArray>;\n selectedSeries?: ReadonlyArray;\n onChange: (selectedSeries: ReadonlyArray) => void;\n i18nStrings?: I18nStrings;\n}\n\nexport default memo(ChartFilter) as typeof ChartFilter;\n\nfunction ChartFilter({ series, i18nStrings, selectedSeries, onChange, ...restProps }: ChartFilterProps) {\n const baseProps = getBaseProps(restProps);\n const className = clsx(baseProps.className, styles.root);\n const i18n = useInternalI18n('[charts]');\n\n const defaultOptions = series.map((d, i) => ({\n label: d.label,\n value: '' + i,\n datum: d.datum,\n __customIcon: (\n \n \n \n ),\n }));\n\n const selectedOptions = defaultOptions.filter(option => selectedSeries?.indexOf(option.datum) !== -1);\n\n const updateSelection = useCallback>(\n ({ detail: { selectedOptions } }) => {\n const selectedSeries = defaultOptions\n .filter(option => selectedOptions.indexOf(option) !== -1)\n .map(option => option.datum);\n onChange(selectedSeries);\n },\n [onChange, defaultOptions]\n );\n\n return (\n \n \n \n );\n}\n", "// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React, { useEffect, useRef } from 'react';\nimport clsx from 'clsx';\n\nimport { warnOnce } from '@cloudscape-design/component-toolkit/internal';\nimport { copyAnalyticsMetadataAttribute } from '@cloudscape-design/component-toolkit/internal/analytics-metadata';\n\nimport InternalGrid from '../grid/internal';\nimport { useInternalI18n } from '../i18n/context';\nimport InternalIcon from '../icon/internal';\nimport { FunnelMetrics } from '../internal/analytics';\nimport { useFunnel, useFunnelStep, useFunnelSubStep } from '../internal/analytics/hooks/use-funnel';\nimport {\n DATA_ATTR_FIELD_ERROR,\n DATA_ATTR_FIELD_LABEL,\n getFieldSlotSeletor,\n getSubStepAllSelector,\n getTextFromSelector,\n} from '../internal/analytics/selectors';\nimport { getBaseProps } from '../internal/base-component';\nimport { FormFieldContext, useFormFieldContext } from '../internal/context/form-field-context';\nimport { InfoLinkLabelContext } from '../internal/context/info-link-label-context';\nimport { useUniqueId } from '../internal/hooks/use-unique-id';\nimport { useVisualRefresh } from '../internal/hooks/use-visual-mode';\nimport { joinStrings } from '../internal/utils/strings';\nimport InternalLiveRegion from '../live-region/internal';\nimport { InternalFormFieldProps } from './interfaces';\nimport { getAriaDescribedBy, getGridDefinition, getSlotIds } from './util';\n\nimport analyticsSelectors from './analytics-metadata/styles.css.js';\nimport styles from './styles.css.js';\n\ninterface FormFieldErrorProps {\n id?: string;\n children?: React.ReactNode;\n errorIconAriaLabel?: string;\n}\n\ninterface FormFieldWarningProps {\n id?: string;\n children?: React.ReactNode;\n warningIconAriaLabel?: string;\n}\n\nexport function FormFieldError({ id, children, errorIconAriaLabel }: FormFieldErrorProps) {\n const i18n = useInternalI18n('form-field');\n const contentRef = useRef(null);\n const i18nErrorIconAriaLabel = i18n('i18nStrings.errorIconAriaLabel', errorIconAriaLabel);\n\n return (\n <>\n
    \n
    \n
    \n \n
    \n
    \n \n {children}\n \n
    \n\n \n \n );\n}\n\nexport function FormFieldWarning({ id, children, warningIconAriaLabel }: FormFieldWarningProps) {\n const i18n = useInternalI18n('form-field');\n const contentRef = useRef(null);\n const i18nWarningIconAriaLabel = i18n('i18nStrings.warningIconAriaLabel', warningIconAriaLabel);\n\n return (\n <>\n
    \n
    \n
    \n \n
    \n
    \n \n {children}\n \n
    \n\n \n \n );\n}\n\nexport function ConstraintText({\n id,\n hasValidationText,\n children,\n}: {\n id?: string;\n hasValidationText: boolean;\n children: React.ReactNode;\n}) {\n return (\n
    \n {children}\n
    \n );\n}\n\nexport default function InternalFormField({\n controlId,\n stretch = false,\n label,\n info,\n i18nStrings,\n children,\n secondaryControl,\n description,\n constraintText,\n errorText,\n warningText,\n __hideLabel,\n __internalRootRef = null,\n __disableGutters = false,\n __analyticsMetadata = undefined,\n __style = {},\n ...rest\n}: InternalFormFieldProps) {\n const baseProps = getBaseProps(rest);\n const isRefresh = useVisualRefresh();\n\n const instanceUniqueId = useUniqueId('formField');\n const generatedControlId = controlId || instanceUniqueId;\n const formFieldId = controlId || generatedControlId;\n\n const { funnelIdentifier, funnelInteractionId, submissionAttempt, funnelState, errorCount } = useFunnel();\n const { stepIdentifier, stepNumber, stepNameSelector } = useFunnelStep();\n const { subStepErrorContext, subStepIdentifier, subStepSelector, subStepNameSelector } = useFunnelSubStep();\n\n const showWarning = warningText && !errorText;\n\n if (warningText && errorText) {\n warnOnce('FileUpload', 'Both `errorText` and `warningText` exist. `warningText` will not be shown.');\n }\n\n const slotIds = getSlotIds(\n formFieldId,\n label,\n description,\n constraintText,\n errorText,\n showWarning ? warningText : undefined\n );\n\n const ariaDescribedBy = getAriaDescribedBy(slotIds);\n\n const gridDefinition = getGridDefinition(stretch, !!secondaryControl, isRefresh);\n\n const {\n ariaLabelledby: parentAriaLabelledby,\n ariaDescribedby: parentAriaDescribedby,\n invalid: parentInvalid,\n warning: parentWarning,\n } = useFormFieldContext({});\n\n const contextValuesWithoutControlId = {\n ariaLabelledby: joinStrings(parentAriaLabelledby, slotIds.label) || undefined,\n ariaDescribedby: joinStrings(parentAriaDescribedby, ariaDescribedBy) || undefined,\n invalid: !!errorText || !!parentInvalid,\n warning: (!!warningText && !errorText) || (!!parentWarning && !parentInvalid),\n };\n\n const analyticsAttributes = {\n [DATA_ATTR_FIELD_LABEL]: slotIds.label ? getFieldSlotSeletor(slotIds.label) : undefined,\n [DATA_ATTR_FIELD_ERROR]: slotIds.error ? getFieldSlotSeletor(slotIds.error) : undefined,\n };\n\n useEffect(() => {\n if (funnelInteractionId && errorText && funnelState.current !== 'complete') {\n const stepName = getTextFromSelector(stepNameSelector);\n const subStepName = getTextFromSelector(subStepNameSelector);\n\n errorCount.current++;\n\n // We don't want to report an error if it is hidden, e.g. inside an Expandable Section.\n const errorIsVisible = (__internalRootRef?.current?.getBoundingClientRect()?.width ?? 0) > 0;\n\n if (errorIsVisible) {\n FunnelMetrics.funnelSubStepError({\n funnelInteractionId,\n funnelIdentifier,\n subStepSelector,\n subStepName,\n subStepNameSelector,\n subStepIdentifier,\n stepNumber,\n stepName,\n stepNameSelector,\n stepIdentifier,\n subStepErrorContext,\n fieldErrorSelector: `${getFieldSlotSeletor(slotIds.error)} .${styles.error__message}`,\n fieldLabelSelector: getFieldSlotSeletor(slotIds.label),\n subStepAllSelector: getSubStepAllSelector(),\n fieldIdentifier: __analyticsMetadata?.instanceIdentifier,\n fieldErrorContext: __analyticsMetadata?.errorContext,\n });\n }\n\n return () => {\n // eslint-disable-next-line react-hooks/exhaustive-deps\n errorCount.current--;\n };\n }\n\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [funnelInteractionId, errorText, submissionAttempt, errorCount]);\n\n return (\n \n
    \n {label && (\n \n {label}\n \n )}\n \n {!__hideLabel && info && {info}}\n \n
    \n\n {description && (\n
    \n {description}\n
    \n )}\n\n
    \n \n \n {children &&
    {children}
    }\n \n\n {secondaryControl && (\n \n
    {secondaryControl}
    \n     \n )}\n     \n
    \n\n {(constraintText || errorText || warningText) && (\n
    \n {errorText && (\n \n {errorText}\n \n )}\n {showWarning && (\n \n {warningText}\n \n )}\n {constraintText && (\n \n {constraintText}\n \n )}\n
    \n )}\n \n );\n}\n", "// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport { GridProps } from '../grid/interfaces';\n\ninterface FormFieldIds {\n label?: string;\n description?: string;\n constraint?: string;\n error?: string;\n warning?: string;\n}\n\nfunction makeSlotId(prop: React.ReactNode, formFieldId: string, propName: string): string | undefined {\n if (!prop) {\n return undefined;\n }\n\n return `${formFieldId}-${propName}`;\n}\n\nexport function getSlotIds(\n formFieldId: string,\n label?: React.ReactNode,\n description?: React.ReactNode,\n constraintText?: React.ReactNode,\n errorText?: React.ReactNode,\n warningText?: React.ReactNode\n) {\n const ids: FormFieldIds = {\n label: makeSlotId(label, formFieldId, 'label'),\n description: makeSlotId(description, formFieldId, 'description'),\n constraint: makeSlotId(constraintText, formFieldId, 'constraint'),\n error: makeSlotId(errorText, formFieldId, 'error'),\n warning: makeSlotId(warningText, formFieldId, 'warning'),\n };\n\n return ids;\n}\n\nexport function getAriaDescribedBy({ error, warning, description, constraint }: FormFieldIds) {\n const describedByAttributes = [error, warning, description, constraint].filter(e => !!e);\n const describedBy = describedByAttributes.length ? describedByAttributes.join(' ') : undefined;\n return describedBy;\n}\n\nexport function getGridDefinition(stretch: boolean, secondaryControlPresent: boolean, isRefresh: boolean) {\n let columns: Array<{ colspan: GridProps.BreakpointMapping | number }>;\n\n if (stretch) {\n columns = [{ colspan: 12 }, { colspan: 12 }];\n } else if (isRefresh) {\n columns = [{ colspan: { default: 12, xs: 8 } }, { colspan: { default: 12, xs: 4 } }];\n } else {\n columns = [{ colspan: { default: 12, xs: 9 } }, { colspan: { default: 12, xs: 3 } }];\n }\n\n if (!secondaryControlPresent) {\n return [columns[0]];\n }\n\n return columns;\n}\n", "\n import './styles.scoped.css';\n export default {\n \"label\": \"awsui_label_aqu00_ocied_5\"\n};\n ", "\n import './styles.scoped.css';\n export default {\n \"error-icon-shake-wrapper\": \"awsui_error-icon-shake-wrapper_14mhv_11w8y_153\",\n \"warning-icon-shake-wrapper\": \"awsui_warning-icon-shake-wrapper_14mhv_11w8y_154\",\n \"awsui-motion-shake-horizontally\": \"awsui_awsui-motion-shake-horizontally_14mhv_11w8y_1\",\n \"error-icon-scale-wrapper\": \"awsui_error-icon-scale-wrapper_14mhv_11w8y_184\",\n \"warning-icon-scale-wrapper\": \"awsui_warning-icon-scale-wrapper_14mhv_11w8y_185\",\n \"awsui-motion-scale-popup\": \"awsui_awsui-motion-scale-popup_14mhv_11w8y_1\",\n \"warning\": \"awsui_warning_14mhv_11w8y_154\",\n \"error\": \"awsui_error_14mhv_11w8y_153\",\n \"awsui-motion-fade-in-0\": \"awsui_awsui-motion-fade-in-0_14mhv_11w8y_1\",\n \"root\": \"awsui_root_14mhv_11w8y_236\",\n \"label\": \"awsui_label_14mhv_11w8y_269\",\n \"info\": \"awsui_info_14mhv_11w8y_285\",\n \"description\": \"awsui_description_14mhv_11w8y_291\",\n \"constraint\": \"awsui_constraint_14mhv_11w8y_292\",\n \"hints\": \"awsui_hints_14mhv_11w8y_299\",\n \"constraint-has-validation-text\": \"awsui_constraint-has-validation-text_14mhv_11w8y_300\",\n \"secondary-control\": \"awsui_secondary-control_14mhv_11w8y_304\",\n \"controls\": \"awsui_controls_14mhv_11w8y_308\",\n \"label-hidden\": \"awsui_label-hidden_14mhv_11w8y_308\",\n \"label-wrapper\": \"awsui_label-wrapper_14mhv_11w8y_311\",\n \"control\": \"awsui_control_14mhv_11w8y_308\",\n \"error__message\": \"awsui_error__message_14mhv_11w8y_338\",\n \"warning__message\": \"awsui_warning__message_14mhv_11w8y_339\",\n \"visually-hidden\": \"awsui_visually-hidden_14mhv_11w8y_343\"\n};\n ", "// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React, { useState } from 'react';\nimport clsx from 'clsx';\n\nimport { useInternalI18n } from '../i18n/context';\nimport { getBaseProps } from '../internal/base-component';\nimport Dropdown from '../internal/components/dropdown';\nimport DropdownFooter from '../internal/components/dropdown-footer/index.js';\nimport ScreenreaderOnly from '../internal/components/screenreader-only';\nimport { useFormFieldContext } from '../internal/context/form-field-context';\nimport { InternalBaseComponentProps } from '../internal/hooks/use-base-component/index.js';\nimport { useUniqueId } from '../internal/hooks/use-unique-id';\nimport { SomeRequired } from '../internal/types';\nimport { joinStrings } from '../internal/utils/strings';\nimport Filter from '../select/parts/filter';\nimport PlainList from '../select/parts/plain-list';\nimport Trigger from '../select/parts/trigger';\nimport VirtualList from '../select/parts/virtual-list';\nimport { TokenGroupProps } from '../token-group/interfaces';\nimport InternalTokenGroup from '../token-group/internal';\nimport { MultiselectProps } from './interfaces';\nimport { useMultiselect } from './use-multiselect';\n\nimport styles from './styles.css.js';\n\ntype InternalMultiselectProps = SomeRequired<\n MultiselectProps,\n 'options' | 'selectedOptions' | 'filteringType' | 'statusType' | 'keepOpen' | 'hideTokens'\n> &\n InternalBaseComponentProps;\n\nconst InternalMultiselect = React.forwardRef(\n (\n {\n options,\n filteringType,\n filteringPlaceholder,\n filteringAriaLabel,\n filteringClearAriaLabel,\n ariaRequired,\n placeholder,\n disabled,\n readOnly,\n ariaLabel,\n selectedOptions,\n deselectAriaLabel,\n tokenLimit,\n i18nStrings,\n virtualScroll,\n inlineTokens = false,\n hideTokens,\n expandToViewport,\n tokenLimitShowFewerAriaLabel,\n tokenLimitShowMoreAriaLabel,\n __internalRootRef = null,\n autoFocus,\n ...restProps\n }: InternalMultiselectProps,\n externalRef: React.Ref\n ) => {\n const baseProps = getBaseProps(restProps);\n const formFieldContext = useFormFieldContext(restProps);\n const i18n = useInternalI18n('multiselect');\n\n const selfControlId = useUniqueId('trigger');\n const controlId = formFieldContext.controlId ?? selfControlId;\n const ariaLabelId = useUniqueId('multiselect-ariaLabel-');\n const footerId = useUniqueId('multiselect-footer-');\n\n const [filteringValue, setFilteringValue] = useState('');\n const multiselectProps = useMultiselect({\n options,\n selectedOptions,\n filteringType,\n disabled,\n deselectAriaLabel,\n controlId,\n ariaLabelId,\n footerId,\n filteringValue,\n setFilteringValue,\n externalRef,\n ...restProps,\n });\n\n const filter = (\n \n );\n\n const trigger = (\n \n );\n\n const tokens: TokenGroupProps['items'] = selectedOptions.map(option => ({\n label: option.label,\n disabled: disabled || option.disabled,\n labelTag: option.labelTag,\n description: option.description,\n iconAlt: option.iconAlt,\n iconName: option.iconName,\n iconUrl: option.iconUrl,\n iconSvg: option.iconSvg,\n tags: option.tags,\n dismissLabel: i18n('deselectAriaLabel', deselectAriaLabel?.(option), format =>\n format({ option__label: option.label ?? '' })\n ),\n }));\n\n const ListComponent = virtualScroll ? VirtualList : PlainList;\n\n const showTokens = !hideTokens && !inlineTokens && tokens.length > 0;\n\n const tokenGroupI18nStrings: TokenGroupProps.I18nStrings = {\n limitShowFewer: i18nStrings?.tokenLimitShowFewer,\n limitShowMore: i18nStrings?.tokenLimitShowMore,\n };\n\n const dropdownStatus = multiselectProps.dropdownStatus;\n const dropdownProps = multiselectProps.getDropdownProps();\n\n return (\n \n \n ) : null\n }\n expandToViewport={expandToViewport}\n stretchBeyondTriggerWidth={true}\n >\n \n ) : null\n }\n menuProps={multiselectProps.getMenuProps()}\n getOptionProps={multiselectProps.getOptionProps}\n filteredOptions={multiselectProps.filteredOptions}\n filteringValue={filteringValue}\n ref={multiselectProps.scrollToIndex}\n hasDropdownStatus={dropdownStatus.content !== null}\n checkboxes={true}\n useInteractiveGroups={true}\n screenReaderContent={multiselectProps.announcement}\n highlightType={multiselectProps.highlightType}\n />\n \n\n {showTokens && (\n \n )}\n\n {ariaLabel}\n \n );\n }\n);\n\nexport default InternalMultiselect;\n", "// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React, { useState } from 'react';\nimport clsx from 'clsx';\n\nimport { getAnalyticsMetadataAttribute } from '@cloudscape-design/component-toolkit/internal/analytics-metadata';\n\nimport { getBaseProps } from '../internal/base-component';\nimport Option from '../internal/components/option';\nimport TokenList from '../internal/components/token-list';\nimport { fireNonCancelableEvent } from '../internal/events';\nimport checkControlled from '../internal/hooks/check-controlled';\nimport { InternalBaseComponentProps } from '../internal/hooks/use-base-component';\nimport { useListFocusController } from '../internal/hooks/use-list-focus-controller';\nimport { useMergeRefs } from '../internal/hooks/use-merge-refs';\nimport { SomeRequired } from '../internal/types';\nimport { TokenGroupProps } from './interfaces';\nimport { Token } from './token';\n\nimport tokenListStyles from '../internal/components/token-list/styles.css.js';\nimport styles from './styles.css.js';\n\ntype InternalTokenGroupProps = SomeRequired & InternalBaseComponentProps;\n\nexport default function InternalTokenGroup({\n alignment,\n items,\n onDismiss,\n limit,\n i18nStrings,\n disableOuterPadding,\n limitShowFewerAriaLabel,\n limitShowMoreAriaLabel,\n readOnly,\n __internalRootRef,\n ...props\n}: InternalTokenGroupProps) {\n checkControlled('TokenGroup', 'items', items, 'onDismiss', onDismiss);\n\n const [nextFocusIndex, setNextFocusIndex] = useState(null);\n const tokenListRef = useListFocusController({\n nextFocusIndex,\n onFocusMoved: target => {\n target.focus();\n setNextFocusIndex(null);\n },\n listItemSelector: `.${tokenListStyles['list-item']}`,\n showMoreSelector: `.${tokenListStyles.toggle}`,\n });\n\n const baseProps = getBaseProps(props);\n const hasItems = items.length > 0;\n const mergedRef = useMergeRefs(__internalRootRef, tokenListRef);\n return (\n \n (\n {\n fireNonCancelableEvent(onDismiss, { itemIndex });\n setNextFocusIndex(itemIndex);\n }}\n disabled={item.disabled}\n readOnly={readOnly}\n {...(item.disabled || readOnly\n ? {}\n : getAnalyticsMetadataAttribute({ detail: { position: `${itemIndex + 1}` } }))}\n >\n     \n )}\n \n );\n}\n\nexport default ({\n pieData,\n dimensions,\n highlightedSegment,\n segmentDescription,\n visibleDataSum,\n hideTitles,\n hideDescriptions,\n containerRef,\n}: LabelsProps) => {\n const containerBoundaries = useElementBoundaries(containerRef);\n const shouldOptimizeLabels =\n containerBoundaries.right - containerBoundaries.left - (dimensions.outerRadius + dimensions.innerLabelPadding) * 2 <\n 300;\n const markers = useMemo(() => {\n const { outerRadius: radius, innerLabelPadding } = dimensions;\n\n // More arc factories for the label positioning\n const arcMarkerStart = arc>()\n .innerRadius(radius - 1)\n .outerRadius(radius - 1);\n\n const arcMarkerBreak = arc>()\n .innerRadius(radius + innerLabelPadding)\n .outerRadius(radius + innerLabelPadding);\n\n return pieData.map((datum, i) => {\n const labelDatum = pieData[i];\n const smartAngle = computeSmartAngle(labelDatum.startAngle, labelDatum.endAngle, shouldOptimizeLabels);\n\n // Make the marker line longer if the segment is closer to the top or bottom of the chart\n const lineExtension = 0.5 * Math.cos(2 * smartAngle) + 0.5;\n arcMarkerBreak.outerRadius(radius + 20 * lineExtension);\n arcMarkerBreak.innerRadius(radius + 20 * lineExtension);\n const [startX, startY] = arcMarkerStart.centroid({ ...datum, startAngle: smartAngle, endAngle: smartAngle });\n const [breakX, breakY] = arcMarkerBreak.centroid({ ...datum, startAngle: smartAngle, endAngle: smartAngle });\n\n const rightSide = smartAngle < Math.PI;\n const endX = shouldOptimizeLabels ? breakX + 20 * (rightSide ? 1 : -1) : (radius + 20) * (rightSide ? 1 : -1);\n const textX = endX + 5 * (rightSide ? 1 : -1);\n\n return {\n startX,\n startY,\n breakX,\n breakY,\n endX,\n endY: breakY,\n textX,\n textY: breakY,\n rightSide,\n datum,\n };\n });\n }, [pieData, dimensions, shouldOptimizeLabels]);\n\n const rootRef = useRef(null);\n\n useLayoutEffect(() => {\n if (!rootRef.current) {\n return;\n }\n\n // Relax labels that are overlapping\n const labelNodes = rootRef.current.querySelectorAll(`.${styles['label-text']}`);\n balanceLabelNodes(labelNodes, markers, false, dimensions.outerRadius + dimensions.innerLabelPadding);\n balanceLabelNodes(labelNodes, markers, true, dimensions.outerRadius + dimensions.innerLabelPadding);\n }, [markers, pieData, dimensions]);\n\n return (\n \n {markers.map(({ startX, startY, breakX, breakY, endX, endY, textX, textY, rightSide, datum }) => {\n const segment = datum.data.datum;\n const description = segmentDescription?.(segment, visibleDataSum);\n if ((hideTitles && !description) || (hideDescriptions && !segment.title)) {\n return null;\n }\n return (\n \n \n \n \n \n );\n })}\n \n );\n};\n\nfunction useElementBoundaries(ref: React.RefObject): { left: number; right: number } {\n const [state, setState] = useState({ left: 0, right: 0 });\n useResizeObserver(ref, entry => {\n const elementRect = entry.target.getBoundingClientRect();\n setState({ left: elementRect.left, right: elementRect.right });\n });\n return state;\n}\n", "// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React, { memo, useEffect, useRef } from 'react';\n\nimport { getIsRtl } from '@cloudscape-design/component-toolkit/internal';\n\nimport { renderTextContent } from '../internal/components/responsive-text';\n\ninterface ResponsiveTextProps {\n x: number;\n y: number;\n rightSide?: boolean;\n className?: string;\n children: string;\n containerBoundaries: null | { left: number; right: number };\n}\n\nexport default memo(ResponsiveText);\n\nfunction ResponsiveText({ x, y, rightSide, className, children, containerBoundaries }: ResponsiveTextProps) {\n const actualRef = useRef(null);\n const virtualRef = useRef(null);\n\n const isRtl = actualRef.current ? getIsRtl(actualRef.current) : false;\n rightSide = !isRtl ? rightSide : !rightSide;\n\n // Determine the visible width of the text and if necessary truncate it until it fits.\n useEffect(() => {\n // The debouncing is necessary for visual smoothness.\n const timeoutId = setTimeout(() => {\n const isRtl = getIsRtl(virtualRef.current!);\n const groupRect = virtualRef.current!.getBoundingClientRect();\n const visibleWidth = containerBoundaries ? getVisibleWidth(groupRect, containerBoundaries) : 0;\n renderTextContent(actualRef.current!, children, visibleWidth, isRtl);\n }, 25);\n return () => clearTimeout(timeoutId);\n });\n\n return (\n <>\n {/* Invisible sample text used for measurement */}\n \n {children}\n \n\n {/* Text node to render truncated text into */}\n \n {children}\n \n \n );\n}\n\nfunction getVisibleWidth(element: { left: number; right: number }, container: { left: number; right: number }): number {\n if (element.left < container.left) {\n return element.right - container.left;\n } else if (element.right > container.right) {\n return container.right - element.left;\n } else {\n return container.right - container.left;\n }\n}\n", "\n import './styles.scoped.css';\n export default {\n \"segment__path\": \"awsui_segment__path_1edmh_1b6e4_161\",\n \"segment\": \"awsui_segment_1edmh_1b6e4_161\",\n \"segment__hover\": \"awsui_segment__hover_1edmh_1b6e4_188\",\n \"label\": \"awsui_label_1edmh_1b6e4_202\",\n \"root\": \"awsui_root_1edmh_1b6e4_216\",\n \"content\": \"awsui_content_1edmh_1b6e4_220\",\n \"content--small\": \"awsui_content--small_1edmh_1b6e4_220\",\n \"content--fit-height\": \"awsui_content--fit-height_1edmh_1b6e4_223\",\n \"content--without-labels\": \"awsui_content--without-labels_1edmh_1b6e4_226\",\n \"content--medium\": \"awsui_content--medium_1edmh_1b6e4_232\",\n \"content--large\": \"awsui_content--large_1edmh_1b6e4_244\",\n \"status-container\": \"awsui_status-container_1edmh_1b6e4_261\",\n \"chart-container\": \"awsui_chart-container_1edmh_1b6e4_265\",\n \"chart-container--fit-height\": \"awsui_chart-container--fit-height_1edmh_1b6e4_269\",\n \"chart-container-chart-plot\": \"awsui_chart-container-chart-plot_1edmh_1b6e4_274\",\n \"chart-container-chart-plot--fit-height\": \"awsui_chart-container-chart-plot--fit-height_1edmh_1b6e4_277\",\n \"inner-content\": \"awsui_inner-content_1edmh_1b6e4_283\",\n \"segment__highlight\": \"awsui_segment__highlight_1edmh_1b6e4_294\",\n \"segment--dimmed\": \"awsui_segment--dimmed_1edmh_1b6e4_309\",\n \"segment--highlighted\": \"awsui_segment--highlighted_1edmh_1b6e4_312\",\n \"label--dimmed\": \"awsui_label--dimmed_1edmh_1b6e4_329\",\n \"label--align-right\": \"awsui_label--align-right_1edmh_1b6e4_332\",\n \"label-text\": \"awsui_label-text_1edmh_1b6e4_340\",\n \"label__description\": \"awsui_label__description_1edmh_1b6e4_348\",\n \"label-line\": \"awsui_label-line_1edmh_1b6e4_355\",\n \"label--highlighted\": \"awsui_label--highlighted_1edmh_1b6e4_359\",\n \"popover-header\": \"awsui_popover-header_1edmh_1b6e4_363\"\n};\n ", "// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport { ComponentFormatFunction } from '../i18n/context';\nimport { PieChartProps } from './interfaces';\n\nimport styles from './styles.css.js';\n\nexport interface Dimension {\n innerRadius: number;\n outerRadius: number;\n padding: number;\n paddingLabels: number;\n innerLabelPadding: number;\n cornerRadius?: number;\n}\n\nconst minRadius = 30;\nconst paddingLabels = 44; // = 2 * (size-lineHeight-body-100)\nconst defaultPadding = 12; // = space-s\nconst smallPadding = 8; // = space-xs\nexport const minLabelLineAngularPadding = Math.PI / 20;\n\nexport const dimensionsBySize: Record, Dimension> = {\n small: {\n innerRadius: 33,\n outerRadius: 50,\n innerLabelPadding: smallPadding,\n padding: smallPadding,\n paddingLabels,\n },\n medium: {\n innerRadius: 66,\n outerRadius: 100,\n innerLabelPadding: defaultPadding,\n padding: defaultPadding,\n paddingLabels,\n },\n large: {\n innerRadius: 93,\n outerRadius: 140,\n innerLabelPadding: defaultPadding,\n padding: defaultPadding,\n paddingLabels,\n },\n};\n\nexport const refreshDimensionsBySize: Record, Dimension> = {\n small: {\n ...dimensionsBySize.small,\n innerRadius: 38,\n cornerRadius: 3,\n },\n medium: {\n ...dimensionsBySize.medium,\n innerRadius: 75,\n cornerRadius: 4,\n },\n large: {\n ...dimensionsBySize.large,\n innerRadius: 105,\n cornerRadius: 5,\n },\n};\n\n/**\n * When `size` is a string (\"small\", \"medium\" or \"large\") the predefined pie chart element dimensions for classic and visual refresh are used.\n * When `size` is a number the outer and inner radii are computed and the rest of the dimensions are taken from the closest predefined size.\n */\nexport function getDimensionsBySize({\n size,\n hasLabels,\n visualRefresh,\n}: {\n size: NonNullable | number;\n hasLabels: boolean;\n visualRefresh?: boolean;\n}): Dimension & { size: NonNullable } {\n if (typeof size === 'string') {\n const dimensions = visualRefresh ? refreshDimensionsBySize[size] : dimensionsBySize[size];\n return { ...dimensions, size };\n }\n const sizeSpec = visualRefresh ? refreshDimensionsBySize : dimensionsBySize;\n const getPixelSize = (d: Dimension) => d.outerRadius * 2 + d.padding * 2 + (hasLabels ? d.paddingLabels : 0) * 2;\n\n let matchedSize: NonNullable = 'small';\n if (size > getPixelSize(sizeSpec.medium)) {\n matchedSize = 'medium';\n }\n if (size > getPixelSize(sizeSpec.large)) {\n matchedSize = 'large';\n }\n\n const padding = sizeSpec[matchedSize].padding;\n const paddingLabels = hasLabels ? sizeSpec[matchedSize].paddingLabels : 0;\n const radiiRatio = sizeSpec[matchedSize].outerRadius / sizeSpec[matchedSize].innerRadius;\n const outerRadius = Math.max(minRadius, (size - 2 * paddingLabels - 2 * padding) / 2);\n const innerRadius = outerRadius / radiiRatio;\n\n return { ...sizeSpec[matchedSize], outerRadius, innerRadius, size: matchedSize };\n}\n\nexport const defaultDetails =\n (i18n: ComponentFormatFunction<'pie-chart'>, i18nStrings: PieChartProps.I18nStrings) =>\n (datum: PieChartProps.Datum, dataSum: number) => [\n { key: i18n('i18nStrings.detailsValue', i18nStrings.detailsValue) || '', value: datum.value },\n {\n key: i18n('i18nStrings.detailsPercentage', i18nStrings.detailsPercentage) || '',\n value: `${((datum.value * 100) / dataSum).toFixed(0)}%`,\n },\n ];\n\n/**\n * Adjusts the position of the given label nodes to avoid visual overlapping.\n * @param nodes List of label nodes of the entire chart (both left and right side)\n * @param markers Markers array that was calculated in , but we just need the `endY` values\n * @param leftSide Boolean flag whether we are processing the left or right side of the chart labels\n */\nexport const balanceLabelNodes = (\n nodes: NodeListOf,\n markers: Array<{ endY: number; endX: number }>,\n leftSide: boolean,\n radius: number\n) => {\n const MARGIN = 10;\n\n let previousBBox: { x: number; y: number; height: number } | null = null;\n\n // When traversing the right side of labels, we start at the beginning of the array and go forwards.\n // For the left side, we need to traverse backwards from the end, so that overlapping nodes are pushed down in the right order.\n let i = leftSide ? nodes.length - 1 : 0;\n\n while ((leftSide && i >= 0) || (!leftSide && i < nodes.length)) {\n const node = nodes[i];\n\n const x = parseFloat(node.getAttribute('data-x') || '0');\n const y = parseFloat(node.getAttribute('data-y') || '0');\n const box = {\n x,\n y,\n height: node.getBoundingClientRect().height,\n };\n\n const marker = markers[i];\n\n if (leftSide) {\n i--;\n } else {\n i++;\n }\n\n if (!previousBBox) {\n previousBBox = box;\n node.setAttribute('transform', '');\n continue;\n }\n\n if ((!leftSide && box.x < 0) || (leftSide && box.x >= 0)) {\n // We have reached a label that is on the other side of the chart, so we're done.\n break;\n }\n\n node.setAttribute('transform', '');\n\n // Calculate how much the current node is overlapping with the previous one.\n const yOffset = previousBBox.y + previousBBox.height + MARGIN - box.y;\n\n if (yOffset > 0) {\n const xOffset = computeXOffset(box, yOffset, radius) * (leftSide ? -1 : 1);\n // Move the label down.\n node.setAttribute('transform', `translate(${xOffset} ${yOffset})`);\n\n // Adjust the attached line accordingly.\n const lineNode = node.parentNode?.querySelector(`.${styles['label-line']}`);\n if (lineNode) {\n const { endY, endX } = marker;\n lineNode.setAttribute('y2', '' + (endY + yOffset));\n lineNode.setAttribute('x2', '' + (endX + xOffset));\n }\n\n // Update the position accordingly to inform the next label\n box.y += yOffset;\n box.x += xOffset;\n }\n\n previousBBox = box;\n }\n};\n\nconst squareDistance = (edge: [number, number]): number => Math.pow(edge[0], 2) + Math.pow(edge[1], 2);\n\nconst computeXOffset = (box: { x: number; y: number; height: number }, yOffset: number, radius: number): number => {\n const upperEdge: [number, number] = [box.x, box.y + yOffset];\n const lowerEdge: [number, number] = [box.x, box.y + box.height + yOffset];\n const closestEdge = squareDistance(upperEdge) < squareDistance(lowerEdge) ? upperEdge : lowerEdge;\n\n if (squareDistance(closestEdge) < Math.pow(radius, 2)) {\n return Math.sqrt(Math.pow(radius, 2) - Math.pow(closestEdge[1], 2)) - Math.abs(closestEdge[0]);\n }\n return 0;\n};\n\nexport const computeSmartAngle = (startAngle: number, endAngle: number, optimize = false): number => {\n if (!optimize || endAngle - startAngle < 2 * minLabelLineAngularPadding) {\n return (endAngle + startAngle) / 2;\n }\n const paddedStartAngle = startAngle + minLabelLineAngularPadding;\n const paddedEndAngle = endAngle - minLabelLineAngularPadding;\n if (paddedStartAngle < 0 && paddedEndAngle > 0) {\n return 0;\n }\n if (paddedStartAngle < Math.PI && paddedEndAngle > Math.PI) {\n return Math.PI;\n }\n\n const endAngleMinDistance = Math.min(\n paddedEndAngle,\n Math.abs(Math.PI - paddedEndAngle),\n 2 * Math.PI - paddedEndAngle\n );\n const startAngleMinDistance = Math.min(\n paddedStartAngle,\n Math.abs(Math.PI - paddedStartAngle),\n 2 * Math.PI - paddedStartAngle\n );\n if (endAngleMinDistance < startAngleMinDistance) {\n return paddedEndAngle;\n }\n return paddedStartAngle;\n};\n", "// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React, { useMemo } from 'react';\nimport clsx from 'clsx';\nimport { arc, PieArcDatum } from 'd3-shape';\n\nimport { useInternalI18n } from '../i18n/context';\nimport { PieChartProps } from './interfaces';\nimport { InternalChartDatum } from './pie-chart';\nimport { Dimension } from './utils';\n\nimport styles from './styles.css.js';\n\ninterface SegmentsProps {\n pieData: Array>>;\n highlightedSegment: T | null;\n dimensions: Dimension;\n variant: PieChartProps['variant'];\n focusedSegmentRef: React.RefObject;\n popoverTrackRef: React.RefObject;\n segmentAriaRoleDescription?: string;\n onMouseDown: (datum: InternalChartDatum) => void;\n onMouseOver: (datum: InternalChartDatum) => void;\n onTouchStart: () => void;\n}\n\nexport default function Segments({\n pieData,\n highlightedSegment,\n dimensions,\n variant,\n focusedSegmentRef,\n popoverTrackRef,\n segmentAriaRoleDescription,\n onMouseDown,\n onMouseOver,\n onTouchStart,\n}: SegmentsProps) {\n const i18n = useInternalI18n('pie-chart');\n\n const { arcFactory, highlightedArcFactory } = useMemo(() => {\n const radius = dimensions.outerRadius;\n const innerRadius = variant === 'pie' ? 0 : dimensions.innerRadius;\n const cornerRadius = dimensions.cornerRadius || 0;\n\n const arcFactory = arc>>()\n .innerRadius(innerRadius)\n .outerRadius(radius)\n .cornerRadius(cornerRadius);\n\n const highlightedArcFactory = arc>>()\n .innerRadius(radius + 4)\n .outerRadius(radius + 6);\n\n return {\n arcFactory,\n highlightedArcFactory,\n };\n }, [dimensions, variant]);\n\n const centroid = useMemo(() => {\n for (const datum of pieData) {\n if (datum.data.datum === highlightedSegment) {\n const [centroidLeft, centroidTop] = arcFactory.centroid(datum);\n return { cx: centroidLeft, cy: centroidTop };\n }\n }\n return null;\n }, [highlightedSegment, pieData, arcFactory]);\n\n return (\n \n {pieData.map(datum => {\n const isHighlighted = highlightedSegment === datum.data.datum;\n const isDimmed = highlightedSegment !== null && !isHighlighted;\n const arcPath = arcFactory(datum) || undefined;\n const highlightedPath = highlightedArcFactory(datum) || undefined;\n return (\n onTouchStart()}\n onMouseDown={e => {\n onMouseDown(datum.data);\n e.preventDefault();\n }}\n onMouseOver={() => onMouseOver(datum.data)}\n className={clsx(styles.segment, {\n [styles['segment--highlighted']]: isHighlighted,\n [styles['segment--dimmed']]: isDimmed,\n })}\n ref={isHighlighted ? focusedSegmentRef : undefined}\n aria-label={`${datum.data.datum.title} (${datum.data.datum.value})`}\n role=\"button\"\n aria-roledescription={i18n('i18nStrings.segmentAriaRoleDescription', segmentAriaRoleDescription)}\n >\n \n \n \n );\n })}\n\n \n \n );\n}\n", "// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React, { useRef } from 'react';\n\nimport { warnOnce } from '@cloudscape-design/component-toolkit/internal';\n\nimport useForwardFocus from '../internal/hooks/forward-focus';\nimport useBaseComponent from '../internal/hooks/use-base-component';\nimport { isDevelopment } from '../internal/is-development';\nimport { applyDisplayName } from '../internal/utils/apply-display-name';\nimport { getExternalProps } from '../internal/utils/external-props';\nimport { PopoverProps } from './interfaces';\nimport InternalPopover, { InternalPopoverRef } from './internal';\n\nexport { PopoverProps };\n\nconst Popover = React.forwardRef(\n (\n {\n position = 'right',\n size = 'medium',\n fixedWidth = false,\n triggerType = 'text',\n dismissButton = true,\n renderWithPortal = false,\n wrapTriggerText = true,\n header,\n ...rest\n }: PopoverProps,\n ref: React.Ref\n ) => {\n if (isDevelopment) {\n if (dismissButton && !header) {\n warnOnce('Popover', `You should provide a \\`header\\` when \\`dismissButton\\` is true.`);\n }\n }\n\n const baseComponentProps = useBaseComponent('Popover', {\n props: { dismissButton, fixedWidth, position, renderWithPortal, size, triggerType },\n });\n const externalProps = getExternalProps(rest);\n\n const internalRef = useRef(null);\n useForwardFocus(ref, internalRef);\n\n return (\n \n );\n }\n);\n\napplyDisplayName(Popover, 'Popover');\nexport default Popover;\n", "// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React, { useEffect, useMemo, useState } from 'react';\nimport clsx from 'clsx';\n\nimport { warnOnce } from '@cloudscape-design/component-toolkit/internal';\n\nimport { getBaseProps } from '../internal/base-component';\nimport { fireNonCancelableEvent } from '../internal/events';\nimport useBaseComponent from '../internal/hooks/use-base-component';\nimport { useUniqueId } from '../internal/hooks/use-unique-id';\nimport { applyDisplayName } from '../internal/utils/apply-display-name';\nimport { joinStrings } from '../internal/utils/strings';\nimport { throttle } from '../internal/utils/throttle';\nimport InternalLiveRegion from '../live-region/internal';\nimport { ProgressBarProps } from './interfaces';\nimport { Progress, ResultState, SmallText } from './internal';\n\nimport styles from './styles.css.js';\n\nconst ASSERTION_FREQUENCY = 5000; // interval in ms between progress announcements\n\nexport { ProgressBarProps };\n\nexport default function ProgressBar({\n value = 0,\n status = 'in-progress',\n variant = 'standalone',\n resultButtonText,\n label,\n ariaLabel,\n ariaLabelledby,\n ariaDescribedby,\n description,\n additionalInfo,\n resultText,\n onResultButtonClick,\n ...rest\n}: ProgressBarProps) {\n const { __internalRootRef } = useBaseComponent('ProgressBar', {\n props: { variant },\n });\n const baseProps = getBaseProps(rest);\n const generatedName = useUniqueId('awsui-progress-bar-');\n\n const labelId = `${generatedName}-label`;\n const isInFlash = variant === 'flash';\n const isInProgressState = status === 'in-progress';\n\n const descriptionId = useUniqueId('progressbar-description-');\n const additionalInfoId = useUniqueId('progressbar-additional-info-');\n\n const [announcedValue, setAnnouncedValue] = useState('');\n const throttledAssertion = useMemo(() => {\n return throttle((value: ProgressBarProps['value']) => {\n setAnnouncedValue(`${value}%`);\n }, ASSERTION_FREQUENCY);\n }, []);\n\n useEffect(() => {\n throttledAssertion(value);\n }, [throttledAssertion, value]);\n\n if (isInFlash && resultButtonText) {\n warnOnce(\n 'ProgressBar',\n 'The `resultButtonText` is ignored if you set `variant=\"flash\"`, and the result button is not displayed. Use the `buttonText` property and the `onButtonClick` event listener of the flashbar item in which the progress bar component is embedded.'\n );\n }\n\n return (\n \n
    \n
    \n {label}\n
    \n {description && (\n \n {description}\n \n )}\n
    \n {isInProgressState ? (\n <>\n \n \n \n ) : (\n {\n fireNonCancelableEvent(onResultButtonClick);\n }}\n />\n )}\n
    \n
    \n {additionalInfo && (\n \n {additionalInfo}\n \n )}\n \n );\n}\n\napplyDisplayName(ProgressBar, 'ProgressBar');\n", "// 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 { BoxProps } from '../box/interfaces';\nimport InternalBox from '../box/internal';\nimport { ButtonProps } from '../button/interfaces';\nimport { InternalButton } from '../button/internal';\nimport InternalStatusIndicator from '../status-indicator/internal';\nimport { ProgressBarProps } from './interfaces';\n\nimport styles from './styles.css.js';\n\nconst MAX_VALUE = 100;\n\nconst clamp = (value: number, lowerLimit: number, upperLimit: number) => {\n return Math.max(Math.min(value, upperLimit), lowerLimit);\n};\n\ninterface ProgressProps {\n value: number;\n isInFlash: boolean;\n ariaLabel?: string;\n ariaLabelledby?: string;\n ariaDescribedby?: string;\n}\nexport const Progress = ({ value, isInFlash, ariaLabel, ariaLabelledby, ariaDescribedby }: ProgressProps) => {\n const roundedValue = Math.round(value);\n const progressValue = clamp(roundedValue, 0, MAX_VALUE);\n\n return (\n
    \n = MAX_VALUE && styles.complete,\n isInFlash && styles['progress-in-flash']\n )}\n max={MAX_VALUE}\n value={progressValue}\n aria-label={ariaLabel}\n // Ensures aria-label takes precedence over aria-labelledby\n aria-labelledby={!ariaLabel ? ariaLabelledby : undefined}\n aria-describedby={ariaDescribedby}\n />\n \n \n {`${progressValue}%`}\n \n \n
    \n );\n};\n\ninterface SmallTextProps {\n color?: BoxProps.Color;\n id?: string;\n children: React.ReactNode;\n className?: string;\n}\n\nexport const SmallText = ({ color, children, className, id }: SmallTextProps) => {\n return (\n \n {children}\n \n );\n};\n\nconst ResultButton = ({ onClick, children }: ButtonProps) => {\n return (\n
    \n \n {children}\n \n
    \n );\n};\n\ninterface ResultStateProps {\n isInFlash: boolean;\n resultText: React.ReactNode;\n resultButtonText?: string;\n status: ProgressBarProps.Status;\n onClick: () => void;\n}\n\nexport const ResultState = ({ isInFlash, resultText, resultButtonText, status, onClick }: ResultStateProps) => {\n const hasResultButton = !!resultButtonText;\n\n if (isInFlash) {\n return (\n
    \n {resultText}\n
    \n );\n }\n\n return (\n
    \n \n \n {resultText}\n \n \n {hasResultButton && {resultButtonText}}\n
    \n );\n};\n", "\n import './styles.scoped.css';\n export default {\n \"progress\": \"awsui_progress_11huc_1iefd_361\",\n \"result-state\": \"awsui_result-state_11huc_1iefd_375\",\n \"awsui-motion-fade-in\": \"awsui_awsui-motion-fade-in_11huc_1iefd_1\",\n \"root\": \"awsui_root_11huc_1iefd_397\",\n \"with-result-button\": \"awsui_with-result-button_11huc_1iefd_429\",\n \"result-text\": \"awsui_result-text_11huc_1iefd_433\",\n \"result-container-error\": \"awsui_result-container-error_11huc_1iefd_437\",\n \"result-container-success\": \"awsui_result-container-success_11huc_1iefd_437\",\n \"result-button\": \"awsui_result-button_11huc_1iefd_441\",\n \"word-wrap\": \"awsui_word-wrap_11huc_1iefd_447\",\n \"label-flash\": \"awsui_label-flash_11huc_1iefd_452\",\n \"label-key-value\": \"awsui_label-key-value_11huc_1iefd_456\",\n \"flash\": \"awsui_flash_11huc_1iefd_464\",\n \"progress-container\": \"awsui_progress-container_11huc_1iefd_468\",\n \"percentage-container\": \"awsui_percentage-container_11huc_1iefd_475\",\n \"percentage\": \"awsui_percentage_11huc_1iefd_475\",\n \"complete\": \"awsui_complete_11huc_1iefd_521\",\n \"progress-in-flash\": \"awsui_progress-in-flash_11huc_1iefd_534\",\n \"additional-info\": \"awsui_additional-info_11huc_1iefd_547\"\n};\n ", "// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React from 'react';\n\nimport useBaseComponent from '../internal/hooks/use-base-component';\nimport { applyDisplayName } from '../internal/utils/apply-display-name';\nimport { PromptInputProps } from './interfaces';\nimport InternalPromptInput from './internal';\n\nexport { PromptInputProps };\n\nconst PromptInput = React.forwardRef(\n (\n {\n autoComplete,\n autoFocus,\n disableBrowserAutocorrect,\n disableActionButton,\n spellcheck,\n readOnly,\n actionButtonIconName,\n minRows,\n maxRows,\n ...props\n }: PromptInputProps,\n ref: React.Ref\n ) => {\n const baseComponentProps = useBaseComponent('PromptInput', {\n props: {\n readOnly,\n autoComplete,\n autoFocus,\n disableBrowserAutocorrect,\n disableActionButton,\n spellcheck,\n actionButtonIconName,\n minRows,\n maxRows,\n },\n });\n return (\n \n );\n }\n);\napplyDisplayName(PromptInput, 'PromptInput');\nexport default PromptInput;\n", "// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React, { Ref, useCallback, useEffect, useImperativeHandle, useRef } from 'react';\nimport clsx from 'clsx';\n\nimport { useDensityMode } from '@cloudscape-design/component-toolkit/internal';\n\nimport InternalButton from '../button/internal';\nimport { convertAutoComplete } from '../input/utils';\nimport { getBaseProps } from '../internal/base-component';\nimport { useFormFieldContext } from '../internal/context/form-field-context';\nimport { fireKeyboardEvent, fireNonCancelableEvent } from '../internal/events';\nimport * as tokens from '../internal/generated/styles/tokens';\nimport { InternalBaseComponentProps } from '../internal/hooks/use-base-component';\nimport { useVisualRefresh } from '../internal/hooks/use-visual-mode';\nimport { PromptInputProps } from './interfaces';\n\nimport styles from './styles.css.js';\nimport testutilStyles from './test-classes/styles.css.js';\n\ninterface InternalPromptInputProps extends PromptInputProps, InternalBaseComponentProps {}\n\nconst InternalPromptInput = React.forwardRef(\n (\n {\n value,\n actionButtonAriaLabel,\n actionButtonIconName,\n actionButtonIconUrl,\n actionButtonIconSvg,\n actionButtonIconAlt,\n ariaLabel,\n autoComplete,\n autoFocus,\n disableActionButton,\n disableBrowserAutocorrect,\n disabled,\n maxRows = 3,\n minRows,\n name,\n onAction,\n onBlur,\n onChange,\n onFocus,\n onKeyDown,\n onKeyUp,\n placeholder,\n readOnly,\n spellcheck,\n secondaryActions,\n secondaryContent,\n disableSecondaryActionsPaddings,\n disableSecondaryContentPaddings,\n __internalRootRef = null,\n ...rest\n }: InternalPromptInputProps,\n ref: Ref\n ) => {\n const { ariaLabelledby, ariaDescribedby, controlId, invalid, warning } = useFormFieldContext(rest);\n\n const baseProps = getBaseProps(rest);\n\n const textareaRef = useRef(null);\n\n const isRefresh = useVisualRefresh();\n const isCompactMode = useDensityMode(textareaRef) === 'compact';\n\n const PADDING = isRefresh ? tokens.spaceXxs : tokens.spaceXxxs;\n const LINE_HEIGHT = tokens.lineHeightBodyM;\n\n useImperativeHandle(\n ref,\n () => ({\n focus(...args: Parameters) {\n textareaRef.current?.focus(...args);\n },\n select() {\n textareaRef.current?.select();\n },\n }),\n [textareaRef]\n );\n\n const handleKeyDown = (event: React.KeyboardEvent) => {\n fireKeyboardEvent(onKeyDown, event);\n\n if (event.key === 'Enter' && !event.shiftKey) {\n if ('form' in event.target && event.target.form !== null && !event.isDefaultPrevented()) {\n (event.target.form as HTMLFormElement).requestSubmit();\n }\n\n event.preventDefault();\n fireNonCancelableEvent(onAction, { value });\n }\n };\n\n const handleChange = (event: React.ChangeEvent) => {\n fireNonCancelableEvent(onChange, { value: event.target.value });\n adjustTextareaHeight();\n };\n\n const hasActionButton = actionButtonIconName || actionButtonIconSvg || actionButtonIconUrl;\n\n const adjustTextareaHeight = useCallback(() => {\n if (textareaRef.current) {\n textareaRef.current.style.height = 'auto';\n const maxRowsHeight = `calc(${maxRows <= 0 ? 3 : maxRows} * (${LINE_HEIGHT} + ${PADDING} / 2) + ${PADDING})`;\n const scrollHeight = `calc(${textareaRef.current.scrollHeight}px)`;\n const minTextareaHeight = `calc(${LINE_HEIGHT} + ${tokens.spaceScaledXxs} * 2)`; // the min height of Textarea with 1 row\n textareaRef.current.style.height = `min(max(${scrollHeight}, ${minTextareaHeight}), ${maxRowsHeight})`;\n }\n }, [maxRows, LINE_HEIGHT, PADDING]);\n\n useEffect(() => {\n const handleResize = () => {\n adjustTextareaHeight();\n };\n\n window.addEventListener('resize', handleResize);\n\n return () => {\n window.removeEventListener('resize', handleResize);\n };\n }, [adjustTextareaHeight]);\n\n useEffect(() => {\n adjustTextareaHeight();\n }, [value, adjustTextareaHeight, maxRows, isCompactMode]);\n\n const attributes: React.TextareaHTMLAttributes = {\n 'aria-label': ariaLabel,\n 'aria-labelledby': ariaLabelledby,\n 'aria-describedby': ariaDescribedby,\n 'aria-invalid': invalid ? 'true' : undefined,\n name,\n placeholder,\n autoFocus,\n className: clsx(styles.textarea, testutilStyles.textarea, {\n [styles.invalid]: invalid,\n [styles.warning]: warning,\n }),\n autoComplete: convertAutoComplete(autoComplete),\n spellCheck: spellcheck,\n disabled,\n readOnly: readOnly ? true : undefined,\n rows: minRows || 1,\n onKeyDown: handleKeyDown,\n onKeyUp: onKeyUp && (event => fireKeyboardEvent(onKeyUp, event)),\n // We set a default value on the component in order to force it into the controlled mode.\n value: value || '',\n onChange: handleChange,\n onBlur: onBlur && (() => fireNonCancelableEvent(onBlur)),\n onFocus: onFocus && (() => fireNonCancelableEvent(onFocus)),\n };\n\n if (disableBrowserAutocorrect) {\n attributes.autoCorrect = 'off';\n attributes.autoCapitalize = 'off';\n }\n\n const action = (\n
    \n fireNonCancelableEvent(onAction, { value })}\n variant=\"icon\"\n />\n
    \n );\n\n return (\n \n {secondaryContent && (\n \n {secondaryContent}\n \n )}\n
    \n ",k.noCloneChecked=!!b.cloneNode(!0).lastChild.defaultValue}();var U="undefined";k.focusinBubbles="onfocusin"in a;var V=/^key/,W=/^(?:mouse|pointer|contextmenu)|click/,X=/^(?:focusinfocus|focusoutblur)$/,Y=/^([^.]*)(?:\.(.+)|)$/;function Z(){return!0}function $(){return!1}function _(){try{return l.activeElement}catch(a){}}n.event={global:{},add:function(a,b,c,d,e){var f,g,h,i,j,k,l,m,o,p,q,r=L.get(a);if(r){c.handler&&(f=c,c=f.handler,e=f.selector),c.guid||(c.guid=n.guid++),(i=r.events)||(i=r.events={}),(g=r.handle)||(g=r.handle=function(b){return typeof n!==U&&n.event.triggered!==b.type?n.event.dispatch.apply(a,arguments):void 0}),b=(b||"").match(E)||[""],j=b.length;while(j--)h=Y.exec(b[j])||[],o=q=h[1],p=(h[2]||"").split(".").sort(),o&&(l=n.event.special[o]||{},o=(e?l.delegateType:l.bindType)||o,l=n.event.special[o]||{},k=n.extend({type:o,origType:q,data:d,handler:c,guid:c.guid,selector:e,needsContext:e&&n.expr.match.needsContext.test(e),namespace:p.join(".")},f),(m=i[o])||(m=i[o]=[],m.delegateCount=0,l.setup&&l.setup.call(a,d,p,g)!==!1||a.addEventListener&&a.addEventListener(o,g,!1)),l.add&&(l.add.call(a,k),k.handler.guid||(k.handler.guid=c.guid)),e?m.splice(m.delegateCount++,0,k):m.push(k),n.event.global[o]=!0)}},remove:function(a,b,c,d,e){var f,g,h,i,j,k,l,m,o,p,q,r=L.hasData(a)&&L.get(a);if(r&&(i=r.events)){b=(b||"").match(E)||[""],j=b.length;while(j--)if(h=Y.exec(b[j])||[],o=q=h[1],p=(h[2]||"").split(".").sort(),o){l=n.event.special[o]||{},o=(d?l.delegateType:l.bindType)||o,m=i[o]||[],h=h[2]&&new RegExp("(^|\\.)"+p.join("\\.(?:.*\\.|)")+"(\\.|$)"),g=f=m.length;while(f--)k=m[f],!e&&q!==k.origType||c&&c.guid!==k.guid||h&&!h.test(k.namespace)||d&&d!==k.selector&&("**"!==d||!k.selector)||(m.splice(f,1),k.selector&&m.delegateCount--,l.remove&&l.remove.call(a,k));g&&!m.length&&(l.teardown&&l.teardown.call(a,p,r.handle)!==!1||n.removeEvent(a,o,r.handle),delete i[o])}else for(o in i)n.event.remove(a,o+b[j],c,d,!0);n.isEmptyObject(i)&&(delete r.handle,L.remove(a,"events"))}},trigger:function(b,c,d,e){var f,g,h,i,k,m,o,p=[d||l],q=j.call(b,"type")?b.type:b,r=j.call(b,"namespace")?b.namespace.split("."):[];if(g=h=d=d||l,3!==d.nodeType&&8!==d.nodeType&&!X.test(q+n.event.triggered)&&(q.indexOf(".")>=0&&(r=q.split("."),q=r.shift(),r.sort()),k=q.indexOf(":")<0&&"on"+q,b=b[n.expando]?b:new n.Event(q,"object"==typeof b&&b),b.isTrigger=e?2:3,b.namespace=r.join("."),b.namespace_re=b.namespace?new RegExp("(^|\\.)"+r.join("\\.(?:.*\\.|)")+"(\\.|$)"):null,b.result=void 0,b.target||(b.target=d),c=null==c?[b]:n.makeArray(c,[b]),o=n.event.special[q]||{},e||!o.trigger||o.trigger.apply(d,c)!==!1)){if(!e&&!o.noBubble&&!n.isWindow(d)){for(i=o.delegateType||q,X.test(i+q)||(g=g.parentNode);g;g=g.parentNode)p.push(g),h=g;h===(d.ownerDocument||l)&&p.push(h.defaultView||h.parentWindow||a)}f=0;while((g=p[f++])&&!b.isPropagationStopped())b.type=f>1?i:o.bindType||q,m=(L.get(g,"events")||{})[b.type]&&L.get(g,"handle"),m&&m.apply(g,c),m=k&&g[k],m&&m.apply&&n.acceptData(g)&&(b.result=m.apply(g,c),b.result===!1&&b.preventDefault());return b.type=q,e||b.isDefaultPrevented()||o._default&&o._default.apply(p.pop(),c)!==!1||!n.acceptData(d)||k&&n.isFunction(d[q])&&!n.isWindow(d)&&(h=d[k],h&&(d[k]=null),n.event.triggered=q,d[q](),n.event.triggered=void 0,h&&(d[k]=h)),b.result}},dispatch:function(a){a=n.event.fix(a);var b,c,e,f,g,h=[],i=d.call(arguments),j=(L.get(this,"events")||{})[a.type]||[],k=n.event.special[a.type]||{};if(i[0]=a,a.delegateTarget=this,!k.preDispatch||k.preDispatch.call(this,a)!==!1){h=n.event.handlers.call(this,a,j),b=0;while((f=h[b++])&&!a.isPropagationStopped()){a.currentTarget=f.elem,c=0;while((g=f.handlers[c++])&&!a.isImmediatePropagationStopped())(!a.namespace_re||a.namespace_re.test(g.namespace))&&(a.handleObj=g,a.data=g.data,e=((n.event.special[g.origType]||{}).handle||g.handler).apply(f.elem,i),void 0!==e&&(a.result=e)===!1&&(a.preventDefault(),a.stopPropagation()))}return k.postDispatch&&k.postDispatch.call(this,a),a.result}},handlers:function(a,b){var c,d,e,f,g=[],h=b.delegateCount,i=a.target;if(h&&i.nodeType&&(!a.button||"click"!==a.type))for(;i!==this;i=i.parentNode||this)if(i.disabled!==!0||"click"!==a.type){for(d=[],c=0;h>c;c++)f=b[c],e=f.selector+" ",void 0===d[e]&&(d[e]=f.needsContext?n(e,this).index(i)>=0:n.find(e,this,null,[i]).length),d[e]&&d.push(f);d.length&&g.push({elem:i,handlers:d})}return h]*)\/>/gi,bb=/<([\w:]+)/,cb=/<|&#?\w+;/,db=/<(?:script|style|link)/i,eb=/checked\s*(?:[^=]|=\s*.checked.)/i,fb=/^$|\/(?:java|ecma)script/i,gb=/^true\/(.*)/,hb=/^\s*\s*$/g,ib={option:[1,""],thead:[1,"","
    "],col:[2,"","
    "],tr:[2,"","
    "],td:[3,"","
    "],_default:[0,"",""]};ib.optgroup=ib.option,ib.tbody=ib.tfoot=ib.colgroup=ib.caption=ib.thead,ib.th=ib.td;function jb(a,b){return n.nodeName(a,"table")&&n.nodeName(11!==b.nodeType?b:b.firstChild,"tr")?a.getElementsByTagName("tbody")[0]||a.appendChild(a.ownerDocument.createElement("tbody")):a}function kb(a){return a.type=(null!==a.getAttribute("type"))+"/"+a.type,a}function lb(a){var b=gb.exec(a.type);return b?a.type=b[1]:a.removeAttribute("type"),a}function mb(a,b){for(var c=0,d=a.length;d>c;c++)L.set(a[c],"globalEval",!b||L.get(b[c],"globalEval"))}function nb(a,b){var c,d,e,f,g,h,i,j;if(1===b.nodeType){if(L.hasData(a)&&(f=L.access(a),g=L.set(b,f),j=f.events)){delete g.handle,g.events={};for(e in j)for(c=0,d=j[e].length;d>c;c++)n.event.add(b,e,j[e][c])}M.hasData(a)&&(h=M.access(a),i=n.extend({},h),M.set(b,i))}}function ob(a,b){var c=a.getElementsByTagName?a.getElementsByTagName(b||"*"):a.querySelectorAll?a.querySelectorAll(b||"*"):[];return void 0===b||b&&n.nodeName(a,b)?n.merge([a],c):c}function pb(a,b){var c=b.nodeName.toLowerCase();"input"===c&&T.test(a.type)?b.checked=a.checked:("input"===c||"textarea"===c)&&(b.defaultValue=a.defaultValue)}n.extend({clone:function(a,b,c){var d,e,f,g,h=a.cloneNode(!0),i=n.contains(a.ownerDocument,a);if(!(k.noCloneChecked||1!==a.nodeType&&11!==a.nodeType||n.isXMLDoc(a)))for(g=ob(h),f=ob(a),d=0,e=f.length;e>d;d++)pb(f[d],g[d]);if(b)if(c)for(f=f||ob(a),g=g||ob(h),d=0,e=f.length;e>d;d++)nb(f[d],g[d]);else nb(a,h);return g=ob(h,"script"),g.length>0&&mb(g,!i&&ob(a,"script")),h},buildFragment:function(a,b,c,d){for(var e,f,g,h,i,j,k=b.createDocumentFragment(),l=[],m=0,o=a.length;o>m;m++)if(e=a[m],e||0===e)if("object"===n.type(e))n.merge(l,e.nodeType?[e]:e);else if(cb.test(e)){f=f||k.appendChild(b.createElement("div")),g=(bb.exec(e)||["",""])[1].toLowerCase(),h=ib[g]||ib._default,f.innerHTML=h[1]+e.replace(ab,"<$1>")+h[2],j=h[0];while(j--)f=f.lastChild;n.merge(l,f.childNodes),f=k.firstChild,f.textContent=""}else l.push(b.createTextNode(e));k.textContent="",m=0;while(e=l[m++])if((!d||-1===n.inArray(e,d))&&(i=n.contains(e.ownerDocument,e),f=ob(k.appendChild(e),"script"),i&&mb(f),c)){j=0;while(e=f[j++])fb.test(e.type||"")&&c.push(e)}return k},cleanData:function(a){for(var b,c,d,e,f=n.event.special,g=0;void 0!==(c=a[g]);g++){if(n.acceptData(c)&&(e=c[L.expando],e&&(b=L.cache[e]))){if(b.events)for(d in b.events)f[d]?n.event.remove(c,d):n.removeEvent(c,d,b.handle);L.cache[e]&&delete L.cache[e]}delete M.cache[c[M.expando]]}}}),n.fn.extend({text:function(a){return J(this,function(a){return void 0===a?n.text(this):this.empty().each(function(){(1===this.nodeType||11===this.nodeType||9===this.nodeType)&&(this.textContent=a)})},null,a,arguments.length)},append:function(){return this.domManip(arguments,function(a){if(1===this.nodeType||11===this.nodeType||9===this.nodeType){var b=jb(this,a);b.appendChild(a)}})},prepend:function(){return this.domManip(arguments,function(a){if(1===this.nodeType||11===this.nodeType||9===this.nodeType){var b=jb(this,a);b.insertBefore(a,b.firstChild)}})},before:function(){return this.domManip(arguments,function(a){this.parentNode&&this.parentNode.insertBefore(a,this)})},after:function(){return this.domManip(arguments,function(a){this.parentNode&&this.parentNode.insertBefore(a,this.nextSibling)})},remove:function(a,b){for(var c,d=a?n.filter(a,this):this,e=0;null!=(c=d[e]);e++)b||1!==c.nodeType||n.cleanData(ob(c)),c.parentNode&&(b&&n.contains(c.ownerDocument,c)&&mb(ob(c,"script")),c.parentNode.removeChild(c));return this},empty:function(){for(var a,b=0;null!=(a=this[b]);b++)1===a.nodeType&&(n.cleanData(ob(a,!1)),a.textContent="");return this},clone:function(a,b){return a=null==a?!1:a,b=null==b?a:b,this.map(function(){return n.clone(this,a,b)})},html:function(a){return J(this,function(a){var b=this[0]||{},c=0,d=this.length;if(void 0===a&&1===b.nodeType)return b.innerHTML;if("string"==typeof a&&!db.test(a)&&!ib[(bb.exec(a)||["",""])[1].toLowerCase()]){a=a.replace(ab,"<$1>");try{for(;d>c;c++)b=this[c]||{},1===b.nodeType&&(n.cleanData(ob(b,!1)),b.innerHTML=a);b=0}catch(e){}}b&&this.empty().append(a)},null,a,arguments.length)},replaceWith:function(){var a=arguments[0];return this.domManip(arguments,function(b){a=this.parentNode,n.cleanData(ob(this)),a&&a.replaceChild(b,this)}),a&&(a.length||a.nodeType)?this:this.remove()},detach:function(a){return this.remove(a,!0)},domManip:function(a,b){a=e.apply([],a);var c,d,f,g,h,i,j=0,l=this.length,m=this,o=l-1,p=a[0],q=n.isFunction(p);if(q||l>1&&"string"==typeof p&&!k.checkClone&&eb.test(p))return this.each(function(c){var d=m.eq(c);q&&(a[0]=p.call(this,c,d.html())),d.domManip(a,b)});if(l&&(c=n.buildFragment(a,this[0].ownerDocument,!1,this),d=c.firstChild,1===c.childNodes.length&&(c=d),d)){for(f=n.map(ob(c,"script"),kb),g=f.length;l>j;j++)h=c,j!==o&&(h=n.clone(h,!0,!0),g&&n.merge(f,ob(h,"script"))),b.call(this[j],h,j);if(g)for(i=f[f.length-1].ownerDocument,n.map(f,lb),j=0;g>j;j++)h=f[j],fb.test(h.type||"")&&!L.access(h,"globalEval")&&n.contains(i,h)&&(h.src?n._evalUrl&&n._evalUrl(h.src):n.globalEval(h.textContent.replace(hb,"")))}return this}}),n.each({appendTo:"append",prependTo:"prepend",insertBefore:"before",insertAfter:"after",replaceAll:"replaceWith"},function(a,b){n.fn[a]=function(a){for(var c,d=[],e=n(a),g=e.length-1,h=0;g>=h;h++)c=h===g?this:this.clone(!0),n(e[h])[b](c),f.apply(d,c.get());return this.pushStack(d)}});var qb,rb={};function sb(b,c){var d,e=n(c.createElement(b)).appendTo(c.body),f=a.getDefaultComputedStyle&&(d=a.getDefaultComputedStyle(e[0]))?d.display:n.css(e[0],"display");return e.detach(),f}function tb(a){var b=l,c=rb[a];return c||(c=sb(a,b),"none"!==c&&c||(qb=(qb||n("