@cloudscape-design/components 3.0.791 → 3.0.793

package/app-layout/visual-refresh-toolbar/skeleton/styles.css.js

@@ -1,24 +1,24 @@
 
     import './styles.scoped.css';
     export default {
-  "root": "awsui_root_7nfqu_5fcq5_149",
-  "has-adaptive-widths-default": "awsui_has-adaptive-widths-default_7nfqu_5fcq5_198",
-  "has-adaptive-widths-dashboard": "awsui_has-adaptive-widths-dashboard_7nfqu_5fcq5_213",
-  "navigation": "awsui_navigation_7nfqu_5fcq5_228",
-  "tools": "awsui_tools_7nfqu_5fcq5_229",
-  "global-tools": "awsui_global-tools_7nfqu_5fcq5_230",
-  "tools-open": "awsui_tools-open_7nfqu_5fcq5_268",
-  "split-panel-side": "awsui_split-panel-side_7nfqu_5fcq5_281",
-  "split-panel-bottom": "awsui_split-panel-bottom_7nfqu_5fcq5_288",
-  "panel-hidden": "awsui_panel-hidden_7nfqu_5fcq5_301",
-  "toolbar-container": "awsui_toolbar-container_7nfqu_5fcq5_311",
-  "notifications-container": "awsui_notifications-container_7nfqu_5fcq5_317",
-  "notifications-background": "awsui_notifications-background_7nfqu_5fcq5_321",
-  "main-landmark": "awsui_main-landmark_7nfqu_5fcq5_332",
-  "main": "awsui_main_7nfqu_5fcq5_332",
-  "main-disable-paddings": "awsui_main-disable-paddings_7nfqu_5fcq5_341",
-  "content-header": "awsui_content-header_7nfqu_5fcq5_351",
-  "content": "awsui_content_7nfqu_5fcq5_351",
-  "unfocusable-mobile": "awsui_unfocusable-mobile_7nfqu_5fcq5_361"
+  "root": "awsui_root_7nfqu_jdfl5_149",
+  "has-adaptive-widths-default": "awsui_has-adaptive-widths-default_7nfqu_jdfl5_198",
+  "has-adaptive-widths-dashboard": "awsui_has-adaptive-widths-dashboard_7nfqu_jdfl5_213",
+  "navigation": "awsui_navigation_7nfqu_jdfl5_228",
+  "tools": "awsui_tools_7nfqu_jdfl5_229",
+  "global-tools": "awsui_global-tools_7nfqu_jdfl5_230",
+  "tools-open": "awsui_tools-open_7nfqu_jdfl5_268",
+  "split-panel-side": "awsui_split-panel-side_7nfqu_jdfl5_281",
+  "split-panel-bottom": "awsui_split-panel-bottom_7nfqu_jdfl5_288",
+  "panel-hidden": "awsui_panel-hidden_7nfqu_jdfl5_301",
+  "toolbar-container": "awsui_toolbar-container_7nfqu_jdfl5_311",
+  "notifications-container": "awsui_notifications-container_7nfqu_jdfl5_317",
+  "notifications-background": "awsui_notifications-background_7nfqu_jdfl5_321",
+  "main-landmark": "awsui_main-landmark_7nfqu_jdfl5_332",
+  "main": "awsui_main_7nfqu_jdfl5_332",
+  "main-disable-paddings": "awsui_main-disable-paddings_7nfqu_jdfl5_341",
+  "content-header": "awsui_content-header_7nfqu_jdfl5_351",
+  "content": "awsui_content_7nfqu_jdfl5_351",
+  "unfocusable-mobile": "awsui_unfocusable-mobile_7nfqu_jdfl5_361"
 };
   

package/app-layout/visual-refresh-toolbar/skeleton/styles.scoped.css

@@ -146,7 +146,7 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
  Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
  SPDX-License-Identifier: Apache-2.0
 */
-.awsui_root_7nfqu_5fcq5_149:not(#\9) {
+.awsui_root_7nfqu_jdfl5_149:not(#\9) {
   border-collapse: separate;
   border-spacing: 0;
   box-sizing: border-box;
@@ -189,104 +189,104 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   grid-template-rows: min-content min-content 1fr;
 }
 @media (min-width: 689px) {
-  .awsui_root_7nfqu_5fcq5_149:not(#\9) {
+  .awsui_root_7nfqu_jdfl5_149:not(#\9) {
     grid-template-areas: "toolbar    toolbar      toolbar       toolbar   toolbar         toolbar  toolbar" "navigation .         notifications    .         sideSplitPanel  tools    global-tools" "navigation .             main         .         sideSplitPanel  tools    global-tools";
     grid-template-columns: min-content minmax(var(--space-layout-content-horizontal-7l52k3, 24px), 1fr) minmax(0, var(--awsui-max-content-width-g964ok)) minmax(var(--space-layout-content-horizontal-7l52k3, 24px), 1fr) min-content min-content;
     grid-template-rows: min-content min-content 1fr min-content;
   }
 }
 @media (min-width: 689px) and (min-width: 1401px) {
-  .awsui_root_7nfqu_5fcq5_149.awsui_has-adaptive-widths-default_7nfqu_5fcq5_198:not(#\9) {
+  .awsui_root_7nfqu_jdfl5_149.awsui_has-adaptive-widths-default_7nfqu_jdfl5_198:not(#\9) {
     --awsui-max-content-width-g964ok: 1280px;
   }
 }
 @media (min-width: 689px) and (min-width: 1921px) {
-  .awsui_root_7nfqu_5fcq5_149.awsui_has-adaptive-widths-default_7nfqu_5fcq5_198:not(#\9) {
+  .awsui_root_7nfqu_jdfl5_149.awsui_has-adaptive-widths-default_7nfqu_jdfl5_198:not(#\9) {
     --awsui-max-content-width-g964ok: 1440px;
   }
 }
 @media (min-width: 689px) and (min-width: 2541px) {
-  .awsui_root_7nfqu_5fcq5_149.awsui_has-adaptive-widths-default_7nfqu_5fcq5_198:not(#\9) {
+  .awsui_root_7nfqu_jdfl5_149.awsui_has-adaptive-widths-default_7nfqu_jdfl5_198:not(#\9) {
     --awsui-max-content-width-g964ok: 1620px;
   }
 }
 @media (min-width: 689px) and (min-width: 1401px) {
-  .awsui_root_7nfqu_5fcq5_149.awsui_has-adaptive-widths-dashboard_7nfqu_5fcq5_213:not(#\9) {
+  .awsui_root_7nfqu_jdfl5_149.awsui_has-adaptive-widths-dashboard_7nfqu_jdfl5_213:not(#\9) {
     --awsui-max-content-width-g964ok: 1280px;
   }
 }
 @media (min-width: 689px) and (min-width: 1921px) {
-  .awsui_root_7nfqu_5fcq5_149.awsui_has-adaptive-widths-dashboard_7nfqu_5fcq5_213:not(#\9) {
+  .awsui_root_7nfqu_jdfl5_149.awsui_has-adaptive-widths-dashboard_7nfqu_jdfl5_213:not(#\9) {
     --awsui-max-content-width-g964ok: 1620px;
   }
 }
 @media (min-width: 689px) and (min-width: 2541px) {
-  .awsui_root_7nfqu_5fcq5_149.awsui_has-adaptive-widths-dashboard_7nfqu_5fcq5_213:not(#\9) {
+  .awsui_root_7nfqu_jdfl5_149.awsui_has-adaptive-widths-dashboard_7nfqu_jdfl5_213:not(#\9) {
     --awsui-max-content-width-g964ok: 2160px;
   }
 }
 
-.awsui_navigation_7nfqu_5fcq5_228:not(#\9),
-.awsui_tools_7nfqu_5fcq5_229:not(#\9),
-.awsui_global-tools_7nfqu_5fcq5_230:not(#\9) {
+.awsui_navigation_7nfqu_jdfl5_228:not(#\9),
+.awsui_tools_7nfqu_jdfl5_229:not(#\9),
+.awsui_global-tools_7nfqu_jdfl5_230:not(#\9) {
   grid-row: 1/-1;
   grid-column: 1/-1;
   background: var(--color-background-container-content-z79u4u, #ffffff);
   opacity: 1;
 }
 @media (max-width: 688px) {
-  .awsui_navigation_7nfqu_5fcq5_228:not(#\9),
-  .awsui_tools_7nfqu_5fcq5_229:not(#\9),
-  .awsui_global-tools_7nfqu_5fcq5_230:not(#\9) {
+  .awsui_navigation_7nfqu_jdfl5_228:not(#\9),
+  .awsui_tools_7nfqu_jdfl5_229:not(#\9),
+  .awsui_global-tools_7nfqu_jdfl5_230:not(#\9) {
     inline-size: 100%;
   }
 }
 
-.awsui_navigation_7nfqu_5fcq5_228:not(#\9) {
+.awsui_navigation_7nfqu_jdfl5_228:not(#\9) {
   z-index: 830;
 }
 @media (min-width: 689px) {
-  .awsui_navigation_7nfqu_5fcq5_228:not(#\9) {
+  .awsui_navigation_7nfqu_jdfl5_228:not(#\9) {
     grid-area: navigation;
     inline-size: var(--awsui-navigation-width-g964ok);
     border-inline-end: var(--border-divider-section-width-1061zr, 1px) solid var(--color-border-layout-hrw5xj, #b4b4bb);
   }
 }
 @media (max-width: 688px) {
-  .awsui_navigation_7nfqu_5fcq5_228:not(#\9) {
+  .awsui_navigation_7nfqu_jdfl5_228:not(#\9) {
     z-index: 1001;
   }
 }
 
 @media (min-width: 689px) {
-  .awsui_tools_7nfqu_5fcq5_229:not(#\9) {
+  .awsui_tools_7nfqu_jdfl5_229:not(#\9) {
     grid-area: tools;
     /* stylelint-disable plugin/no-unsupported-browser-features */
   }
-  .awsui_tools_7nfqu_5fcq5_229:not(#\9):not(:has(> [data-testid])) {
+  .awsui_tools_7nfqu_jdfl5_229:not(#\9):not(:has(> [data-testid])) {
     inline-size: var(--awsui-tools-width-g964ok);
   }
-  .awsui_tools_7nfqu_5fcq5_229:not(#\9):not(:has(> [data-testid])).awsui_tools-open_7nfqu_5fcq5_268 {
+  .awsui_tools_7nfqu_jdfl5_229:not(#\9):not(:has(> [data-testid])).awsui_tools-open_7nfqu_jdfl5_268 {
     border-inline-start: var(--border-divider-section-width-1061zr, 1px) solid var(--color-border-layout-hrw5xj, #b4b4bb);
   }
 }
 
 @media (min-width: 689px) {
-  .awsui_global-tools_7nfqu_5fcq5_230:not(#\9) {
+  .awsui_global-tools_7nfqu_jdfl5_230:not(#\9) {
     display: flex;
     grid-area: global-tools;
   }
 }
 
 @media (min-width: 689px) {
-  .awsui_split-panel-side_7nfqu_5fcq5_281:not(#\9) {
+  .awsui_split-panel-side_7nfqu_jdfl5_281:not(#\9) {
     grid-area: sideSplitPanel;
     border-inline-start: var(--border-divider-section-width-1061zr, 1px) solid var(--color-border-layout-hrw5xj, #b4b4bb);
     opacity: 1;
   }
 }
 
-.awsui_split-panel-bottom_7nfqu_5fcq5_288:not(#\9) {
+.awsui_split-panel-bottom_7nfqu_jdfl5_288:not(#\9) {
   position: sticky;
   z-index: 840;
   align-self: end;
@@ -294,72 +294,72 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   grid-column: 1/-1;
 }
 @media (min-width: 689px) {
-  .awsui_split-panel-bottom_7nfqu_5fcq5_288:not(#\9) {
-    grid-column: 2/span 4;
+  .awsui_split-panel-bottom_7nfqu_jdfl5_288:not(#\9) {
+    grid-column: 2/5;
   }
 }
 
-.awsui_panel-hidden_7nfqu_5fcq5_301:not(#\9) {
+.awsui_panel-hidden_7nfqu_jdfl5_301:not(#\9) {
   border-block: none;
   border-inline: none;
   opacity: 0;
   z-index: 0;
 }
-.awsui_panel-hidden_7nfqu_5fcq5_301.awsui_navigation_7nfqu_5fcq5_228:not(#\9), .awsui_panel-hidden_7nfqu_5fcq5_301.awsui_tools_7nfqu_5fcq5_229:not(#\9), .awsui_panel-hidden_7nfqu_5fcq5_301.awsui_global-tools_7nfqu_5fcq5_230:not(#\9) {
+.awsui_panel-hidden_7nfqu_jdfl5_301.awsui_navigation_7nfqu_jdfl5_228:not(#\9), .awsui_panel-hidden_7nfqu_jdfl5_301.awsui_tools_7nfqu_jdfl5_229:not(#\9), .awsui_panel-hidden_7nfqu_jdfl5_301.awsui_global-tools_7nfqu_jdfl5_230:not(#\9) {
   inline-size: 0px;
 }
 
-.awsui_toolbar-container_7nfqu_5fcq5_311:not(#\9) {
+.awsui_toolbar-container_7nfqu_jdfl5_311:not(#\9) {
   grid-area: toolbar;
   block-size: 42px;
   border-block-end: var(--border-divider-section-width-1061zr, 1px) solid var(--color-border-layout-hrw5xj, #b4b4bb);
 }
 
-.awsui_notifications-container_7nfqu_5fcq5_317:not(#\9) {
+.awsui_notifications-container_7nfqu_jdfl5_317:not(#\9) {
   grid-area: notifications;
 }
 
-.awsui_notifications-background_7nfqu_5fcq5_321:not(#\9) {
+.awsui_notifications-background_7nfqu_jdfl5_321:not(#\9) {
   background: var(--color-background-layout-main-nqw91u, #ffffff);
   grid-area: notifications;
   grid-column: 1/-1;
 }
 @media (min-width: 689px) {
-  .awsui_notifications-background_7nfqu_5fcq5_321:not(#\9) {
-    grid-column: 2/span 4;
+  .awsui_notifications-background_7nfqu_jdfl5_321:not(#\9) {
+    grid-column: 2/5;
   }
 }
 
-.awsui_main-landmark_7nfqu_5fcq5_332:not(#\9) {
+.awsui_main-landmark_7nfqu_jdfl5_332:not(#\9) {
   display: contents;
 }
 
-.awsui_main_7nfqu_5fcq5_332:not(#\9) {
+.awsui_main_7nfqu_jdfl5_332:not(#\9) {
   grid-area: main;
   margin-block-start: var(--space-scaled-s-aqzyko, 12px);
   margin-block-end: var(--space-layout-content-bottom-noqzmw, 40px);
 }
-.awsui_main-disable-paddings_7nfqu_5fcq5_341:not(#\9) {
+.awsui_main-disable-paddings_7nfqu_jdfl5_341:not(#\9) {
   margin-block: 0;
   grid-column: 1/-1;
 }
 @media (min-width: 689px) {
-  .awsui_main-disable-paddings_7nfqu_5fcq5_341:not(#\9) {
-    grid-column: 2/span 4;
+  .awsui_main-disable-paddings_7nfqu_jdfl5_341:not(#\9) {
+    grid-column: 2/5;
   }
 }
 
-.awsui_content-header_7nfqu_5fcq5_351:not(#\9) {
+.awsui_content-header_7nfqu_jdfl5_351:not(#\9) {
   margin-block-end: var(--space-content-header-padding-bottom-y2enua, 16px);
 }
 
-.awsui_content_7nfqu_5fcq5_351:not(#\9) {
+.awsui_content_7nfqu_jdfl5_351:not(#\9) {
   display: contents;
 }
 
 /* stylelint-disable-next-line selector-combinator-disallowed-list, selector-max-universal */
 @media (max-width: 688px) {
-  .awsui_unfocusable-mobile_7nfqu_5fcq5_361 *:not(#\9) {
+  .awsui_unfocusable-mobile_7nfqu_jdfl5_361 *:not(#\9) {
     visibility: hidden;
   }
 }

package/app-layout/visual-refresh-toolbar/skeleton/styles.selectors.js

@@ -2,24 +2,24 @@
     // es-module interop with Babel and Typescript
     Object.defineProperty(exports, "__esModule", { value: true });
     module.exports.default = {
-  "root": "awsui_root_7nfqu_5fcq5_149",
-  "has-adaptive-widths-default": "awsui_has-adaptive-widths-default_7nfqu_5fcq5_198",
-  "has-adaptive-widths-dashboard": "awsui_has-adaptive-widths-dashboard_7nfqu_5fcq5_213",
-  "navigation": "awsui_navigation_7nfqu_5fcq5_228",
-  "tools": "awsui_tools_7nfqu_5fcq5_229",
-  "global-tools": "awsui_global-tools_7nfqu_5fcq5_230",
-  "tools-open": "awsui_tools-open_7nfqu_5fcq5_268",
-  "split-panel-side": "awsui_split-panel-side_7nfqu_5fcq5_281",
-  "split-panel-bottom": "awsui_split-panel-bottom_7nfqu_5fcq5_288",
-  "panel-hidden": "awsui_panel-hidden_7nfqu_5fcq5_301",
-  "toolbar-container": "awsui_toolbar-container_7nfqu_5fcq5_311",
-  "notifications-container": "awsui_notifications-container_7nfqu_5fcq5_317",
-  "notifications-background": "awsui_notifications-background_7nfqu_5fcq5_321",
-  "main-landmark": "awsui_main-landmark_7nfqu_5fcq5_332",
-  "main": "awsui_main_7nfqu_5fcq5_332",
-  "main-disable-paddings": "awsui_main-disable-paddings_7nfqu_5fcq5_341",
-  "content-header": "awsui_content-header_7nfqu_5fcq5_351",
-  "content": "awsui_content_7nfqu_5fcq5_351",
-  "unfocusable-mobile": "awsui_unfocusable-mobile_7nfqu_5fcq5_361"
+  "root": "awsui_root_7nfqu_jdfl5_149",
+  "has-adaptive-widths-default": "awsui_has-adaptive-widths-default_7nfqu_jdfl5_198",
+  "has-adaptive-widths-dashboard": "awsui_has-adaptive-widths-dashboard_7nfqu_jdfl5_213",
+  "navigation": "awsui_navigation_7nfqu_jdfl5_228",
+  "tools": "awsui_tools_7nfqu_jdfl5_229",
+  "global-tools": "awsui_global-tools_7nfqu_jdfl5_230",
+  "tools-open": "awsui_tools-open_7nfqu_jdfl5_268",
+  "split-panel-side": "awsui_split-panel-side_7nfqu_jdfl5_281",
+  "split-panel-bottom": "awsui_split-panel-bottom_7nfqu_jdfl5_288",
+  "panel-hidden": "awsui_panel-hidden_7nfqu_jdfl5_301",
+  "toolbar-container": "awsui_toolbar-container_7nfqu_jdfl5_311",
+  "notifications-container": "awsui_notifications-container_7nfqu_jdfl5_317",
+  "notifications-background": "awsui_notifications-background_7nfqu_jdfl5_321",
+  "main-landmark": "awsui_main-landmark_7nfqu_jdfl5_332",
+  "main": "awsui_main_7nfqu_jdfl5_332",
+  "main-disable-paddings": "awsui_main-disable-paddings_7nfqu_jdfl5_341",
+  "content-header": "awsui_content-header_7nfqu_jdfl5_351",
+  "content": "awsui_content_7nfqu_jdfl5_351",
+  "unfocusable-mobile": "awsui_unfocusable-mobile_7nfqu_jdfl5_361"
 };
   

package/collection-preferences/content-display/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/collection-preferences/content-display/index.tsx"],"names":[],"mappings":";AAcA,OAAO,EAAE,0BAA0B,EAAE,MAAM,eAAe,CAAC;AAa3D,UAAU,6BAA8B,SAAQ,0BAA0B,CAAC,wBAAwB;IACjG,QAAQ,EAAE,CAAC,KAAK,EAAE,aAAa,CAAC,0BAA0B,CAAC,kBAAkB,CAAC,KAAK,IAAI,CAAC;IACxF,KAAK,CAAC,EAAE,aAAa,CAAC,0BAA0B,CAAC,kBAAkB,CAAC,CAAC;CACtE;AAED,MAAM,CAAC,OAAO,UAAU,wBAAwB,CAAC,EAC/C,KAAK,EACL,WAAW,EACX,OAAO,EACP,KAGG,EACH,QAAQ,EACR,0BAA0B,EAC1B,gCAAgC,EAChC,gCAAgC,EAChC,4BAA4B,EAC5B,yBAAyB,EACzB,mBAAmB,EACnB,qBAA6B,EAC7B,WAAW,GACZ,EAAE,6BAA6B,eAuL/B"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/collection-preferences/content-display/index.tsx"],"names":[],"mappings":";AAcA,OAAO,EAAE,0BAA0B,EAAE,MAAM,eAAe,CAAC;AAa3D,UAAU,6BAA8B,SAAQ,0BAA0B,CAAC,wBAAwB;IACjG,QAAQ,EAAE,CAAC,KAAK,EAAE,aAAa,CAAC,0BAA0B,CAAC,kBAAkB,CAAC,KAAK,IAAI,CAAC;IACxF,KAAK,CAAC,EAAE,aAAa,CAAC,0BAA0B,CAAC,kBAAkB,CAAC,CAAC;CACtE;AAED,MAAM,CAAC,OAAO,UAAU,wBAAwB,CAAC,EAC/C,KAAK,EACL,WAAW,EACX,OAAO,EACP,KAGG,EACH,QAAQ,EACR,0BAA0B,EAC1B,gCAAgC,EAChC,gCAAgC,EAChC,4BAA4B,EAC5B,yBAAyB,EACzB,mBAAmB,EACnB,qBAA6B,EAC7B,WAAW,GACZ,EAAE,6BAA6B,eA2L/B"}

package/collection-preferences/content-display/index.js

@@ -26,12 +26,18 @@ export default function ContentDisplayPreference({ title, description, options,
     const idPrefix = useUniqueId(componentPrefix);
     const i18n = useInternalI18n('collection-preferences');
     const [columnFilteringText, setColumnFilteringText] = useState('');
-    const onToggle = (option) => {
-        onChange(value.map(item => (item.id === option.id ? Object.assign(Object.assign({}, item), { visible: !option.visible }) : item)));
-    };
     const titleId = `${idPrefix}-title`;
     const descriptionId = `${idPrefix}-description`;
-    const sortedAndFilteredOptions = useMemo(() => getFilteredOptions(getSortedOptions({ options, contentDisplay: value }), columnFilteringText), [columnFilteringText, options, value]);
+    const [sortedOptions, sortedAndFilteredOptions] = useMemo(() => {
+        const sorted = getSortedOptions({ options, contentDisplay: value });
+        const filtered = getFilteredOptions(sorted, columnFilteringText);
+        return [sorted, filtered];
+    }, [columnFilteringText, options, value]);
+    const onToggle = (option) => {
+        // We use sortedOptions as base and not value because there might be options that
+        // are not in the value yet, so they're added as non-visible after the known ones.
+        onChange(sortedOptions.map(({ id, visible }) => ({ id, visible: id === option.id ? !option.visible : visible })));
+    };
     const { activeItem, collisionDetection, handleKeyDown, sensors, setActiveItem } = useDragAndDropReorder({
         sortedOptions: sortedAndFilteredOptions,
     });
@@ -42,7 +48,7 @@ export default function ContentDisplayPreference({ title, description, options,
         liveAnnouncementDndItemReordered: i18n('contentDisplayPreference.liveAnnouncementDndItemReordered', liveAnnouncementDndItemReordered, format => (initialPosition, currentPosition, total) => format({ currentPosition, total, isInitialPosition: `${initialPosition === currentPosition}` })),
         liveAnnouncementDndItemCommitted: i18n('contentDisplayPreference.liveAnnouncementDndItemCommitted', liveAnnouncementDndItemCommitted, format => (initialPosition, finalPosition, total) => format({ initialPosition, finalPosition, total, isInitialPosition: `${initialPosition === finalPosition}` })),
         liveAnnouncementDndDiscarded: i18n('contentDisplayPreference.liveAnnouncementDndDiscarded', liveAnnouncementDndDiscarded),
-        sortedOptions: value,
+        sortedOptions: sortedAndFilteredOptions,
     });
     const renderedDragHandleAriaDescription = i18n('contentDisplayPreference.dragHandleAriaDescription', dragHandleAriaDescription);
     return (React.createElement("div", Object.assign({ className: styles[componentPrefix] }, getAnalyticsInnerContextAttribute('contentDisplay')),
@@ -66,9 +72,10 @@ export default function ContentDisplayPreference({ title, description, options,
                 setActiveItem(null);
                 const { active, over } = event;
                 if (over && active.id !== over.id) {
-                    const oldIndex = value.findIndex(({ id }) => id === active.id);
-                    const newIndex = value.findIndex(({ id }) => id === over.id);
-                    onChange(arrayMove([...value], oldIndex, newIndex));
+                    const oldIndex = sortedOptions.findIndex(({ id }) => id === active.id);
+                    const newIndex = sortedOptions.findIndex(({ id }) => id === over.id);
+                    // We need to remember to trim the options down to id and visible to emit changes.
+                    onChange(arrayMove([...sortedOptions], oldIndex, newIndex).map(({ id, visible }) => ({ id, visible })));
                 }
             }, onDragCancel: () => setActiveItem(null) },
             React.createElement("ul", { className: getClassName('option-list'), "aria-describedby": descriptionId, "aria-labelledby": titleId, role: "list" },

package/collection-preferences/content-display/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/collection-preferences/content-display/index.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React, { useMemo, useState } from 'react';\nimport { DndContext, DragOverlay } from '@dnd-kit/core';\nimport { arrayMove, SortableContext, verticalListSortingStrategy } from '@dnd-kit/sortable';\n\nimport InternalBox from '../../box/internal';\nimport InternalButton from '../../button/internal';\nimport { useInternalI18n } from '../../i18n/context';\nimport Portal from '../../internal/components/portal';\nimport { useUniqueId } from '../../internal/hooks/use-unique-id';\nimport InternalSpaceBetween from '../../space-between/internal';\nimport InternalTextFilter from '../../text-filter/internal';\nimport { getAnalyticsInnerContextAttribute } from '../analytics-metadata/utils';\nimport { CollectionPreferencesProps } from '../interfaces';\nimport ContentDisplayOption from './content-display-option';\nimport DraggableOption from './draggable-option';\nimport useDragAndDropReorder from './use-drag-and-drop-reorder';\nimport useLiveAnnouncements from './use-live-announcements';\nimport { getFilteredOptions, getSortedOptions, OptionWithVisibility } from './utils';\n\nimport styles from '../styles.css.js';\n\nconst componentPrefix = 'content-display';\n\nconst getClassName = (suffix: string) => styles[`${componentPrefix}-${suffix}`];\n\ninterface ContentDisplayPreferenceProps extends CollectionPreferencesProps.ContentDisplayPreference {\n  onChange: (value: ReadonlyArray<CollectionPreferencesProps.ContentDisplayItem>) => void;\n  value?: ReadonlyArray<CollectionPreferencesProps.ContentDisplayItem>;\n}\n\nexport default function ContentDisplayPreference({\n  title,\n  description,\n  options,\n  value = options.map(({ id }) => ({\n    id,\n    visible: true,\n  })),\n  onChange,\n  liveAnnouncementDndStarted,\n  liveAnnouncementDndItemReordered,\n  liveAnnouncementDndItemCommitted,\n  liveAnnouncementDndDiscarded,\n  dragHandleAriaDescription,\n  dragHandleAriaLabel,\n  enableColumnFiltering = false,\n  i18nStrings,\n}: ContentDisplayPreferenceProps) {\n  const idPrefix = useUniqueId(componentPrefix);\n  const i18n = useInternalI18n('collection-preferences');\n  const [columnFilteringText, setColumnFilteringText] = useState('');\n\n  const onToggle = (option: OptionWithVisibility) => {\n    onChange(value.map(item => (item.id === option.id ? { ...item, visible: !option.visible } : item)));\n  };\n\n  const titleId = `${idPrefix}-title`;\n  const descriptionId = `${idPrefix}-description`;\n\n  const sortedAndFilteredOptions = useMemo(\n    () => getFilteredOptions(getSortedOptions({ options, contentDisplay: value }), columnFilteringText),\n    [columnFilteringText, options, value]\n  );\n\n  const { activeItem, collisionDetection, handleKeyDown, sensors, setActiveItem } = useDragAndDropReorder({\n    sortedOptions: sortedAndFilteredOptions,\n  });\n\n  const activeOption = activeItem ? sortedAndFilteredOptions.find(({ id }) => id === activeItem) : null;\n\n  const announcements = useLiveAnnouncements({\n    isDragging: activeItem !== null,\n    liveAnnouncementDndStarted: i18n(\n      'contentDisplayPreference.liveAnnouncementDndStarted',\n      liveAnnouncementDndStarted,\n      format => (position, total) => format({ position, total })\n    ),\n    liveAnnouncementDndItemReordered: i18n(\n      'contentDisplayPreference.liveAnnouncementDndItemReordered',\n      liveAnnouncementDndItemReordered,\n      format => (initialPosition, currentPosition, total) =>\n        format({ currentPosition, total, isInitialPosition: `${initialPosition === currentPosition}` })\n    ),\n    liveAnnouncementDndItemCommitted: i18n(\n      'contentDisplayPreference.liveAnnouncementDndItemCommitted',\n      liveAnnouncementDndItemCommitted,\n      format => (initialPosition, finalPosition, total) =>\n        format({ initialPosition, finalPosition, total, isInitialPosition: `${initialPosition === finalPosition}` })\n    ),\n    liveAnnouncementDndDiscarded: i18n(\n      'contentDisplayPreference.liveAnnouncementDndDiscarded',\n      liveAnnouncementDndDiscarded\n    ),\n    sortedOptions: value,\n  });\n\n  const renderedDragHandleAriaDescription = i18n(\n    'contentDisplayPreference.dragHandleAriaDescription',\n    dragHandleAriaDescription\n  );\n\n  return (\n    <div className={styles[componentPrefix]} {...getAnalyticsInnerContextAttribute('contentDisplay')}>\n      <h3 className={getClassName('title')} id={titleId}>\n        {i18n('contentDisplayPreference.title', title)}\n      </h3>\n      <p className={getClassName('description')} id={descriptionId}>\n        {i18n('contentDisplayPreference.description', description)}\n      </p>\n\n      {/* Filter input */}\n      {enableColumnFiltering && (\n        <div className={getClassName('text-filter')}>\n          <InternalTextFilter\n            filteringText={columnFilteringText}\n            filteringPlaceholder={i18n(\n              'contentDisplayPreference.i18nStrings.columnFilteringPlaceholder',\n              i18nStrings?.columnFilteringPlaceholder\n            )}\n            filteringAriaLabel={i18n(\n              'contentDisplayPreference.i18nStrings.columnFilteringAriaLabel',\n              i18nStrings?.columnFilteringAriaLabel\n            )}\n            filteringClearAriaLabel={i18n(\n              'contentDisplayPreference.i18nStrings.columnFilteringClearFilterText',\n              i18nStrings?.columnFilteringClearFilterText\n            )}\n            onChange={({ detail }) => setColumnFilteringText(detail.filteringText)}\n            countText={i18n(\n              'contentDisplayPreference.i18nStrings.columnFilteringCountText',\n              i18nStrings?.columnFilteringCountText\n                ? i18nStrings?.columnFilteringCountText(sortedAndFilteredOptions.length)\n                : undefined,\n              format => format({ count: sortedAndFilteredOptions.length })\n            )}\n          />\n        </div>\n      )}\n\n      {/* No match */}\n      {sortedAndFilteredOptions.length === 0 && (\n        <div className={getClassName('no-match')}>\n          <InternalSpaceBetween size=\"s\" alignItems=\"center\">\n            <InternalBox margin={{ top: 'm' }}>\n              {i18n(\n                'contentDisplayPreference.i18nStrings.columnFilteringNoMatchText',\n                i18nStrings?.columnFilteringNoMatchText\n              )}\n            </InternalBox>\n            <InternalButton onClick={() => setColumnFilteringText('')}>\n              {i18n(\n                'contentDisplayPreference.i18nStrings.columnFilteringClearFilterText',\n                i18nStrings?.columnFilteringClearFilterText\n              )}\n            </InternalButton>\n          </InternalSpaceBetween>\n        </div>\n      )}\n\n      {/* Drag and drop */}\n      <DndContext\n        sensors={sensors}\n        collisionDetection={collisionDetection}\n        accessibility={{\n          announcements,\n          restoreFocus: false,\n          screenReaderInstructions: renderedDragHandleAriaDescription\n            ? { draggable: renderedDragHandleAriaDescription }\n            : undefined,\n        }}\n        onDragStart={({ active }) => setActiveItem(active.id)}\n        onDragEnd={event => {\n          setActiveItem(null);\n          const { active, over } = event;\n\n          if (over && active.id !== over.id) {\n            const oldIndex = value.findIndex(({ id }) => id === active.id);\n            const newIndex = value.findIndex(({ id }) => id === over.id);\n            onChange(arrayMove([...value], oldIndex, newIndex));\n          }\n        }}\n        onDragCancel={() => setActiveItem(null)}\n      >\n        {/* Use explicit list role to work around Safari not announcing lists as such when list-style is set to none.\n            See https://bugs.webkit.org/show_bug.cgi?id=170179 */}\n        <ul\n          className={getClassName('option-list')}\n          aria-describedby={descriptionId}\n          aria-labelledby={titleId}\n          role=\"list\"\n        >\n          <SortableContext\n            disabled={columnFilteringText.trim().length > 0}\n            items={sortedAndFilteredOptions.map(({ id }) => id)}\n            strategy={verticalListSortingStrategy}\n          >\n            {sortedAndFilteredOptions.map(option => {\n              return (\n                <DraggableOption\n                  dragHandleAriaLabel={i18n('contentDisplayPreference.dragHandleAriaLabel', dragHandleAriaLabel)}\n                  key={option.id}\n                  onKeyDown={handleKeyDown}\n                  onToggle={onToggle}\n                  option={option}\n                />\n              );\n            })}\n          </SortableContext>\n        </ul>\n        <Portal>\n          {/* Make sure that the drag overlay is above the modal\n              by assigning the z-index as inline style\n              so that it prevails over dnd-kit's inline z-index of 999  */}\n          {/* className is a documented prop of the DragOverlay component:\n              https://docs.dndkit.com/api-documentation/draggable/drag-overlay#class-name-and-inline-styles */\n          /* eslint-disable-next-line react/forbid-component-props */}\n          <DragOverlay className={styles['drag-overlay']} dropAnimation={null} style={{ zIndex: 5000 }}>\n            {activeOption && (\n              <ContentDisplayOption\n                listeners={{ onKeyDown: handleKeyDown }}\n                dragHandleAriaLabel={i18n('contentDisplayPreference.dragHandleAriaLabel', dragHandleAriaLabel)}\n                onToggle={onToggle}\n                option={activeOption}\n              />\n            )}\n          </DragOverlay>\n        </Portal>\n      </DndContext>\n    </div>\n  );\n}\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/collection-preferences/content-display/index.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACjD,OAAO,EAAE,UAAU,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AACxD,OAAO,EAAE,SAAS,EAAE,eAAe,EAAE,2BAA2B,EAAE,MAAM,mBAAmB,CAAC;AAE5F,OAAO,WAAW,MAAM,oBAAoB,CAAC;AAC7C,OAAO,cAAc,MAAM,uBAAuB,CAAC;AACnD,OAAO,EAAE,eAAe,EAAE,MAAM,oBAAoB,CAAC;AACrD,OAAO,MAAM,MAAM,kCAAkC,CAAC;AACtD,OAAO,EAAE,WAAW,EAAE,MAAM,oCAAoC,CAAC;AACjE,OAAO,oBAAoB,MAAM,8BAA8B,CAAC;AAChE,OAAO,kBAAkB,MAAM,4BAA4B,CAAC;AAC5D,OAAO,EAAE,iCAAiC,EAAE,MAAM,6BAA6B,CAAC;AAEhF,OAAO,oBAAoB,MAAM,0BAA0B,CAAC;AAC5D,OAAO,eAAe,MAAM,oBAAoB,CAAC;AACjD,OAAO,qBAAqB,MAAM,6BAA6B,CAAC;AAChE,OAAO,oBAAoB,MAAM,0BAA0B,CAAC;AAC5D,OAAO,EAAE,kBAAkB,EAAE,gBAAgB,EAAwB,MAAM,SAAS,CAAC;AAErF,OAAO,MAAM,MAAM,kBAAkB,CAAC;AAEtC,MAAM,eAAe,GAAG,iBAAiB,CAAC;AAE1C,MAAM,YAAY,GAAG,CAAC,MAAc,EAAE,EAAE,CAAC,MAAM,CAAC,GAAG,eAAe,IAAI,MAAM,EAAE,CAAC,CAAC;AAOhF,MAAM,CAAC,OAAO,UAAU,wBAAwB,CAAC,EAC/C,KAAK,EACL,WAAW,EACX,OAAO,EACP,KAAK,GAAG,OAAO,CAAC,GAAG,CAAC,CAAC,EAAE,EAAE,EAAE,EAAE,EAAE,CAAC,CAAC;IAC/B,EAAE;IACF,OAAO,EAAE,IAAI;CACd,CAAC,CAAC,EACH,QAAQ,EACR,0BAA0B,EAC1B,gCAAgC,EAChC,gCAAgC,EAChC,4BAA4B,EAC5B,yBAAyB,EACzB,mBAAmB,EACnB,qBAAqB,GAAG,KAAK,EAC7B,WAAW,GACmB;IAC9B,MAAM,QAAQ,GAAG,WAAW,CAAC,eAAe,CAAC,CAAC;IAC9C,MAAM,IAAI,GAAG,eAAe,CAAC,wBAAwB,CAAC,CAAC;IACvD,MAAM,CAAC,mBAAmB,EAAE,sBAAsB,CAAC,GAAG,QAAQ,CAAC,EAAE,CAAC,CAAC;IAEnE,MAAM,OAAO,GAAG,GAAG,QAAQ,QAAQ,CAAC;IACpC,MAAM,aAAa,GAAG,GAAG,QAAQ,cAAc,CAAC;IAEhD,MAAM,CAAC,aAAa,EAAE,wBAAwB,CAAC,GAAG,OAAO,CAAC,GAAG,EAAE;QAC7D,MAAM,MAAM,GAAG,gBAAgB,CAAC,EAAE,OAAO,EAAE,cAAc,EAAE,KAAK,EAAE,CAAC,CAAC;QACpE,MAAM,QAAQ,GAAG,kBAAkB,CAAC,MAAM,EAAE,mBAAmB,CAAC,CAAC;QACjE,OAAO,CAAC,MAAM,EAAE,QAAQ,CAAC,CAAC;IAC5B,CAAC,EAAE,CAAC,mBAAmB,EAAE,OAAO,EAAE,KAAK,CAAC,CAAC,CAAC;IAE1C,MAAM,QAAQ,GAAG,CAAC,MAA4B,EAAE,EAAE;QAChD,iFAAiF;QACjF,kFAAkF;QAClF,QAAQ,CAAC,aAAa,CAAC,GAAG,CAAC,CAAC,EAAE,EAAE,EAAE,OAAO,EAAE,EAAE,EAAE,CAAC,CAAC,EAAE,EAAE,EAAE,OAAO,EAAE,EAAE,KAAK,MAAM,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,CAAC,OAAO,EAAE,CAAC,CAAC,CAAC,CAAC;IACpH,CAAC,CAAC;IAEF,MAAM,EAAE,UAAU,EAAE,kBAAkB,EAAE,aAAa,EAAE,OAAO,EAAE,aAAa,EAAE,GAAG,qBAAqB,CAAC;QACtG,aAAa,EAAE,wBAAwB;KACxC,CAAC,CAAC;IAEH,MAAM,YAAY,GAAG,UAAU,CAAC,CAAC,CAAC,wBAAwB,CAAC,IAAI,CAAC,CAAC,EAAE,EAAE,EAAE,EAAE,EAAE,CAAC,EAAE,KAAK,UAAU,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC;IAEtG,MAAM,aAAa,GAAG,oBAAoB,CAAC;QACzC,UAAU,EAAE,UAAU,KAAK,IAAI;QAC/B,0BAA0B,EAAE,IAAI,CAC9B,qDAAqD,EACrD,0BAA0B,EAC1B,MAAM,CAAC,EAAE,CAAC,CAAC,QAAQ,EAAE,KAAK,EAAE,EAAE,CAAC,MAAM,CAAC,EAAE,QAAQ,EAAE,KAAK,EAAE,CAAC,CAC3D;QACD,gCAAgC,EAAE,IAAI,CACpC,2DAA2D,EAC3D,gCAAgC,EAChC,MAAM,CAAC,EAAE,CAAC,CAAC,eAAe,EAAE,eAAe,EAAE,KAAK,EAAE,EAAE,CACpD,MAAM,CAAC,EAAE,eAAe,EAAE,KAAK,EAAE,iBAAiB,EAAE,GAAG,eAAe,KAAK,eAAe,EAAE,EAAE,CAAC,CAClG;QACD,gCAAgC,EAAE,IAAI,CACpC,2DAA2D,EAC3D,gCAAgC,EAChC,MAAM,CAAC,EAAE,CAAC,CAAC,eAAe,EAAE,aAAa,EAAE,KAAK,EAAE,EAAE,CAClD,MAAM,CAAC,EAAE,eAAe,EAAE,aAAa,EAAE,KAAK,EAAE,iBAAiB,EAAE,GAAG,eAAe,KAAK,aAAa,EAAE,EAAE,CAAC,CAC/G;QACD,4BAA4B,EAAE,IAAI,CAChC,uDAAuD,EACvD,4BAA4B,CAC7B;QACD,aAAa,EAAE,wBAAwB;KACxC,CAAC,CAAC;IAEH,MAAM,iCAAiC,GAAG,IAAI,CAC5C,oDAAoD,EACpD,yBAAyB,CAC1B,CAAC;IAEF,OAAO,CACL,2CAAK,SAAS,EAAE,MAAM,CAAC,eAAe,CAAC,IAAM,iCAAiC,CAAC,gBAAgB,CAAC;QAC9F,4BAAI,SAAS,EAAE,YAAY,CAAC,OAAO,CAAC,EAAE,EAAE,EAAE,OAAO,IAC9C,IAAI,CAAC,gCAAgC,EAAE,KAAK,CAAC,CAC3C;QACL,2BAAG,SAAS,EAAE,YAAY,CAAC,aAAa,CAAC,EAAE,EAAE,EAAE,aAAa,IACzD,IAAI,CAAC,sCAAsC,EAAE,WAAW,CAAC,CACxD;QAGH,qBAAqB,IAAI,CACxB,6BAAK,SAAS,EAAE,YAAY,CAAC,aAAa,CAAC;YACzC,oBAAC,kBAAkB,IACjB,aAAa,EAAE,mBAAmB,EAClC,oBAAoB,EAAE,IAAI,CACxB,iEAAiE,EACjE,WAAW,aAAX,WAAW,uBAAX,WAAW,CAAE,0BAA0B,CACxC,EACD,kBAAkB,EAAE,IAAI,CACtB,+DAA+D,EAC/D,WAAW,aAAX,WAAW,uBAAX,WAAW,CAAE,wBAAwB,CACtC,EACD,uBAAuB,EAAE,IAAI,CAC3B,qEAAqE,EACrE,WAAW,aAAX,WAAW,uBAAX,WAAW,CAAE,8BAA8B,CAC5C,EACD,QAAQ,EAAE,CAAC,EAAE,MAAM,EAAE,EAAE,EAAE,CAAC,sBAAsB,CAAC,MAAM,CAAC,aAAa,CAAC,EACtE,SAAS,EAAE,IAAI,CACb,+DAA+D,EAC/D,CAAA,WAAW,aAAX,WAAW,uBAAX,WAAW,CAAE,wBAAwB;oBACnC,CAAC,CAAC,WAAW,aAAX,WAAW,uBAAX,WAAW,CAAE,wBAAwB,CAAC,wBAAwB,CAAC,MAAM,CAAC;oBACxE,CAAC,CAAC,SAAS,EACb,MAAM,CAAC,EAAE,CAAC,MAAM,CAAC,EAAE,KAAK,EAAE,wBAAwB,CAAC,MAAM,EAAE,CAAC,CAC7D,GACD,CACE,CACP;QAGA,wBAAwB,CAAC,MAAM,KAAK,CAAC,IAAI,CACxC,6BAAK,SAAS,EAAE,YAAY,CAAC,UAAU,CAAC;YACtC,oBAAC,oBAAoB,IAAC,IAAI,EAAC,GAAG,EAAC,UAAU,EAAC,QAAQ;gBAChD,oBAAC,WAAW,IAAC,MAAM,EAAE,EAAE,GAAG,EAAE,GAAG,EAAE,IAC9B,IAAI,CACH,iEAAiE,EACjE,WAAW,aAAX,WAAW,uBAAX,WAAW,CAAE,0BAA0B,CACxC,CACW;gBACd,oBAAC,cAAc,IAAC,OAAO,EAAE,GAAG,EAAE,CAAC,sBAAsB,CAAC,EAAE,CAAC,IACtD,IAAI,CACH,qEAAqE,EACrE,WAAW,aAAX,WAAW,uBAAX,WAAW,CAAE,8BAA8B,CAC5C,CACc,CACI,CACnB,CACP;QAGD,oBAAC,UAAU,IACT,OAAO,EAAE,OAAO,EAChB,kBAAkB,EAAE,kBAAkB,EACtC,aAAa,EAAE;gBACb,aAAa;gBACb,YAAY,EAAE,KAAK;gBACnB,wBAAwB,EAAE,iCAAiC;oBACzD,CAAC,CAAC,EAAE,SAAS,EAAE,iCAAiC,EAAE;oBAClD,CAAC,CAAC,SAAS;aACd,EACD,WAAW,EAAE,CAAC,EAAE,MAAM,EAAE,EAAE,EAAE,CAAC,aAAa,CAAC,MAAM,CAAC,EAAE,CAAC,EACrD,SAAS,EAAE,KAAK,CAAC,EAAE;gBACjB,aAAa,CAAC,IAAI,CAAC,CAAC;gBACpB,MAAM,EAAE,MAAM,EAAE,IAAI,EAAE,GAAG,KAAK,CAAC;gBAE/B,IAAI,IAAI,IAAI,MAAM,CAAC,EAAE,KAAK,IAAI,CAAC,EAAE,EAAE;oBACjC,MAAM,QAAQ,GAAG,aAAa,CAAC,SAAS,CAAC,CAAC,EAAE,EAAE,EAAE,EAAE,EAAE,CAAC,EAAE,KAAK,MAAM,CAAC,EAAE,CAAC,CAAC;oBACvE,MAAM,QAAQ,GAAG,aAAa,CAAC,SAAS,CAAC,CAAC,EAAE,EAAE,EAAE,EAAE,EAAE,CAAC,EAAE,KAAK,IAAI,CAAC,EAAE,CAAC,CAAC;oBACrE,kFAAkF;oBAClF,QAAQ,CAAC,SAAS,CAAC,CAAC,GAAG,aAAa,CAAC,EAAE,QAAQ,EAAE,QAAQ,CAAC,CAAC,GAAG,CAAC,CAAC,EAAE,EAAE,EAAE,OAAO,EAAE,EAAE,EAAE,CAAC,CAAC,EAAE,EAAE,EAAE,OAAO,EAAE,CAAC,CAAC,CAAC,CAAC;iBACzG;YACH,CAAC,EACD,YAAY,EAAE,GAAG,EAAE,CAAC,aAAa,CAAC,IAAI,CAAC;YAIvC,4BACE,SAAS,EAAE,YAAY,CAAC,aAAa,CAAC,sBACpB,aAAa,qBACd,OAAO,EACxB,IAAI,EAAC,MAAM;gBAEX,oBAAC,eAAe,IACd,QAAQ,EAAE,mBAAmB,CAAC,IAAI,EAAE,CAAC,MAAM,GAAG,CAAC,EAC/C,KAAK,EAAE,wBAAwB,CAAC,GAAG,CAAC,CAAC,EAAE,EAAE,EAAE,EAAE,EAAE,CAAC,EAAE,CAAC,EACnD,QAAQ,EAAE,2BAA2B,IAEpC,wBAAwB,CAAC,GAAG,CAAC,MAAM,CAAC,EAAE;oBACrC,OAAO,CACL,oBAAC,eAAe,IACd,mBAAmB,EAAE,IAAI,CAAC,8CAA8C,EAAE,mBAAmB,CAAC,EAC9F,GAAG,EAAE,MAAM,CAAC,EAAE,EACd,SAAS,EAAE,aAAa,EACxB,QAAQ,EAAE,QAAQ,EAClB,MAAM,EAAE,MAAM,GACd,CACH,CAAC;gBACJ,CAAC,CAAC,CACc,CACf;YACL,oBAAC,MAAM;gBAOL,oBAAC,WAAW,IAAC,SAAS,EAAE,MAAM,CAAC,cAAc,CAAC,EAAE,aAAa,EAAE,IAAI,EAAE,KAAK,EAAE,EAAE,MAAM,EAAE,IAAI,EAAE,IACzF,YAAY,IAAI,CACf,oBAAC,oBAAoB,IACnB,SAAS,EAAE,EAAE,SAAS,EAAE,aAAa,EAAE,EACvC,mBAAmB,EAAE,IAAI,CAAC,8CAA8C,EAAE,mBAAmB,CAAC,EAC9F,QAAQ,EAAE,QAAQ,EAClB,MAAM,EAAE,YAAY,GACpB,CACH,CACW,CACP,CACE,CACT,CACP,CAAC;AACJ,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React, { useMemo, useState } from 'react';\nimport { DndContext, DragOverlay } from '@dnd-kit/core';\nimport { arrayMove, SortableContext, verticalListSortingStrategy } from '@dnd-kit/sortable';\n\nimport InternalBox from '../../box/internal';\nimport InternalButton from '../../button/internal';\nimport { useInternalI18n } from '../../i18n/context';\nimport Portal from '../../internal/components/portal';\nimport { useUniqueId } from '../../internal/hooks/use-unique-id';\nimport InternalSpaceBetween from '../../space-between/internal';\nimport InternalTextFilter from '../../text-filter/internal';\nimport { getAnalyticsInnerContextAttribute } from '../analytics-metadata/utils';\nimport { CollectionPreferencesProps } from '../interfaces';\nimport ContentDisplayOption from './content-display-option';\nimport DraggableOption from './draggable-option';\nimport useDragAndDropReorder from './use-drag-and-drop-reorder';\nimport useLiveAnnouncements from './use-live-announcements';\nimport { getFilteredOptions, getSortedOptions, OptionWithVisibility } from './utils';\n\nimport styles from '../styles.css.js';\n\nconst componentPrefix = 'content-display';\n\nconst getClassName = (suffix: string) => styles[`${componentPrefix}-${suffix}`];\n\ninterface ContentDisplayPreferenceProps extends CollectionPreferencesProps.ContentDisplayPreference {\n  onChange: (value: ReadonlyArray<CollectionPreferencesProps.ContentDisplayItem>) => void;\n  value?: ReadonlyArray<CollectionPreferencesProps.ContentDisplayItem>;\n}\n\nexport default function ContentDisplayPreference({\n  title,\n  description,\n  options,\n  value = options.map(({ id }) => ({\n    id,\n    visible: true,\n  })),\n  onChange,\n  liveAnnouncementDndStarted,\n  liveAnnouncementDndItemReordered,\n  liveAnnouncementDndItemCommitted,\n  liveAnnouncementDndDiscarded,\n  dragHandleAriaDescription,\n  dragHandleAriaLabel,\n  enableColumnFiltering = false,\n  i18nStrings,\n}: ContentDisplayPreferenceProps) {\n  const idPrefix = useUniqueId(componentPrefix);\n  const i18n = useInternalI18n('collection-preferences');\n  const [columnFilteringText, setColumnFilteringText] = useState('');\n\n  const titleId = `${idPrefix}-title`;\n  const descriptionId = `${idPrefix}-description`;\n\n  const [sortedOptions, sortedAndFilteredOptions] = useMemo(() => {\n    const sorted = getSortedOptions({ options, contentDisplay: value });\n    const filtered = getFilteredOptions(sorted, columnFilteringText);\n    return [sorted, filtered];\n  }, [columnFilteringText, options, value]);\n\n  const onToggle = (option: OptionWithVisibility) => {\n    // We use sortedOptions as base and not value because there might be options that\n    // are not in the value yet, so they're added as non-visible after the known ones.\n    onChange(sortedOptions.map(({ id, visible }) => ({ id, visible: id === option.id ? !option.visible : visible })));\n  };\n\n  const { activeItem, collisionDetection, handleKeyDown, sensors, setActiveItem } = useDragAndDropReorder({\n    sortedOptions: sortedAndFilteredOptions,\n  });\n\n  const activeOption = activeItem ? sortedAndFilteredOptions.find(({ id }) => id === activeItem) : null;\n\n  const announcements = useLiveAnnouncements({\n    isDragging: activeItem !== null,\n    liveAnnouncementDndStarted: i18n(\n      'contentDisplayPreference.liveAnnouncementDndStarted',\n      liveAnnouncementDndStarted,\n      format => (position, total) => format({ position, total })\n    ),\n    liveAnnouncementDndItemReordered: i18n(\n      'contentDisplayPreference.liveAnnouncementDndItemReordered',\n      liveAnnouncementDndItemReordered,\n      format => (initialPosition, currentPosition, total) =>\n        format({ currentPosition, total, isInitialPosition: `${initialPosition === currentPosition}` })\n    ),\n    liveAnnouncementDndItemCommitted: i18n(\n      'contentDisplayPreference.liveAnnouncementDndItemCommitted',\n      liveAnnouncementDndItemCommitted,\n      format => (initialPosition, finalPosition, total) =>\n        format({ initialPosition, finalPosition, total, isInitialPosition: `${initialPosition === finalPosition}` })\n    ),\n    liveAnnouncementDndDiscarded: i18n(\n      'contentDisplayPreference.liveAnnouncementDndDiscarded',\n      liveAnnouncementDndDiscarded\n    ),\n    sortedOptions: sortedAndFilteredOptions,\n  });\n\n  const renderedDragHandleAriaDescription = i18n(\n    'contentDisplayPreference.dragHandleAriaDescription',\n    dragHandleAriaDescription\n  );\n\n  return (\n    <div className={styles[componentPrefix]} {...getAnalyticsInnerContextAttribute('contentDisplay')}>\n      <h3 className={getClassName('title')} id={titleId}>\n        {i18n('contentDisplayPreference.title', title)}\n      </h3>\n      <p className={getClassName('description')} id={descriptionId}>\n        {i18n('contentDisplayPreference.description', description)}\n      </p>\n\n      {/* Filter input */}\n      {enableColumnFiltering && (\n        <div className={getClassName('text-filter')}>\n          <InternalTextFilter\n            filteringText={columnFilteringText}\n            filteringPlaceholder={i18n(\n              'contentDisplayPreference.i18nStrings.columnFilteringPlaceholder',\n              i18nStrings?.columnFilteringPlaceholder\n            )}\n            filteringAriaLabel={i18n(\n              'contentDisplayPreference.i18nStrings.columnFilteringAriaLabel',\n              i18nStrings?.columnFilteringAriaLabel\n            )}\n            filteringClearAriaLabel={i18n(\n              'contentDisplayPreference.i18nStrings.columnFilteringClearFilterText',\n              i18nStrings?.columnFilteringClearFilterText\n            )}\n            onChange={({ detail }) => setColumnFilteringText(detail.filteringText)}\n            countText={i18n(\n              'contentDisplayPreference.i18nStrings.columnFilteringCountText',\n              i18nStrings?.columnFilteringCountText\n                ? i18nStrings?.columnFilteringCountText(sortedAndFilteredOptions.length)\n                : undefined,\n              format => format({ count: sortedAndFilteredOptions.length })\n            )}\n          />\n        </div>\n      )}\n\n      {/* No match */}\n      {sortedAndFilteredOptions.length === 0 && (\n        <div className={getClassName('no-match')}>\n          <InternalSpaceBetween size=\"s\" alignItems=\"center\">\n            <InternalBox margin={{ top: 'm' }}>\n              {i18n(\n                'contentDisplayPreference.i18nStrings.columnFilteringNoMatchText',\n                i18nStrings?.columnFilteringNoMatchText\n              )}\n            </InternalBox>\n            <InternalButton onClick={() => setColumnFilteringText('')}>\n              {i18n(\n                'contentDisplayPreference.i18nStrings.columnFilteringClearFilterText',\n                i18nStrings?.columnFilteringClearFilterText\n              )}\n            </InternalButton>\n          </InternalSpaceBetween>\n        </div>\n      )}\n\n      {/* Drag and drop */}\n      <DndContext\n        sensors={sensors}\n        collisionDetection={collisionDetection}\n        accessibility={{\n          announcements,\n          restoreFocus: false,\n          screenReaderInstructions: renderedDragHandleAriaDescription\n            ? { draggable: renderedDragHandleAriaDescription }\n            : undefined,\n        }}\n        onDragStart={({ active }) => setActiveItem(active.id)}\n        onDragEnd={event => {\n          setActiveItem(null);\n          const { active, over } = event;\n\n          if (over && active.id !== over.id) {\n            const oldIndex = sortedOptions.findIndex(({ id }) => id === active.id);\n            const newIndex = sortedOptions.findIndex(({ id }) => id === over.id);\n            // We need to remember to trim the options down to id and visible to emit changes.\n            onChange(arrayMove([...sortedOptions], oldIndex, newIndex).map(({ id, visible }) => ({ id, visible })));\n          }\n        }}\n        onDragCancel={() => setActiveItem(null)}\n      >\n        {/* Use explicit list role to work around Safari not announcing lists as such when list-style is set to none.\n            See https://bugs.webkit.org/show_bug.cgi?id=170179 */}\n        <ul\n          className={getClassName('option-list')}\n          aria-describedby={descriptionId}\n          aria-labelledby={titleId}\n          role=\"list\"\n        >\n          <SortableContext\n            disabled={columnFilteringText.trim().length > 0}\n            items={sortedAndFilteredOptions.map(({ id }) => id)}\n            strategy={verticalListSortingStrategy}\n          >\n            {sortedAndFilteredOptions.map(option => {\n              return (\n                <DraggableOption\n                  dragHandleAriaLabel={i18n('contentDisplayPreference.dragHandleAriaLabel', dragHandleAriaLabel)}\n                  key={option.id}\n                  onKeyDown={handleKeyDown}\n                  onToggle={onToggle}\n                  option={option}\n                />\n              );\n            })}\n          </SortableContext>\n        </ul>\n        <Portal>\n          {/* Make sure that the drag overlay is above the modal\n              by assigning the z-index as inline style\n              so that it prevails over dnd-kit's inline z-index of 999  */}\n          {/* className is a documented prop of the DragOverlay component:\n              https://docs.dndkit.com/api-documentation/draggable/drag-overlay#class-name-and-inline-styles */\n          /* eslint-disable-next-line react/forbid-component-props */}\n          <DragOverlay className={styles['drag-overlay']} dropAnimation={null} style={{ zIndex: 5000 }}>\n            {activeOption && (\n              <ContentDisplayOption\n                listeners={{ onKeyDown: handleKeyDown }}\n                dragHandleAriaLabel={i18n('contentDisplayPreference.dragHandleAriaLabel', dragHandleAriaLabel)}\n                onToggle={onToggle}\n                option={activeOption}\n              />\n            )}\n          </DragOverlay>\n        </Portal>\n      </DndContext>\n    </div>\n  );\n}\n"]}

package/collection-preferences/content-display/utils.d.ts

@@ -1,10 +1,10 @@
 import { CollectionPreferencesProps } from '../interfaces';
 export interface OptionWithVisibility extends CollectionPreferencesProps.ContentDisplayOption {
-    visible?: boolean;
+    visible: boolean;
 }
 export declare function getSortedOptions({ options, contentDisplay, }: {
     options: ReadonlyArray<CollectionPreferencesProps.ContentDisplayOption>;
     contentDisplay: ReadonlyArray<CollectionPreferencesProps.ContentDisplayItem>;
 }): ReadonlyArray<OptionWithVisibility>;
-export declare function getFilteredOptions(options: ReadonlyArray<CollectionPreferencesProps.ContentDisplayOption>, filterText: string): readonly CollectionPreferencesProps.ContentDisplayOption[];
+export declare function getFilteredOptions(options: ReadonlyArray<OptionWithVisibility>, filterText: string): readonly OptionWithVisibility[];
 //# sourceMappingURL=utils.d.ts.map

package/collection-preferences/content-display/utils.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../../src/collection-preferences/content-display/utils.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,0BAA0B,EAAE,MAAM,eAAe,CAAC;AAE3D,MAAM,WAAW,oBAAqB,SAAQ,0BAA0B,CAAC,oBAAoB;IAC3F,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAED,wBAAgB,gBAAgB,CAAC,EAC/B,OAAO,EACP,cAAc,GACf,EAAE;IACD,OAAO,EAAE,aAAa,CAAC,0BAA0B,CAAC,oBAAoB,CAAC,CAAC;IACxE,cAAc,EAAE,aAAa,CAAC,0BAA0B,CAAC,kBAAkB,CAAC,CAAC;CAC9E,GAAG,aAAa,CAAC,oBAAoB,CAAC,CAWtC;AAED,wBAAgB,kBAAkB,CAChC,OAAO,EAAE,aAAa,CAAC,0BAA0B,CAAC,oBAAoB,CAAC,EACvE,UAAU,EAAE,MAAM,8DASnB"}
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../../src/collection-preferences/content-display/utils.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,0BAA0B,EAAE,MAAM,eAAe,CAAC;AAE3D,MAAM,WAAW,oBAAqB,SAAQ,0BAA0B,CAAC,oBAAoB;IAC3F,OAAO,EAAE,OAAO,CAAC;CAClB;AAED,wBAAgB,gBAAgB,CAAC,EAC/B,OAAO,EACP,cAAc,GACf,EAAE;IACD,OAAO,EAAE,aAAa,CAAC,0BAA0B,CAAC,oBAAoB,CAAC,CAAC;IACxE,cAAc,EAAE,aAAa,CAAC,0BAA0B,CAAC,kBAAkB,CAAC,CAAC;CAC9E,GAAG,aAAa,CAAC,oBAAoB,CAAC,CActC;AAED,wBAAgB,kBAAkB,CAAC,OAAO,EAAE,aAAa,CAAC,oBAAoB,CAAC,EAAE,UAAU,EAAE,MAAM,mCAQlG"}

package/collection-preferences/content-display/utils.js

@@ -1,8 +1,17 @@
 export function getSortedOptions({ options, contentDisplay, }) {
-    const optionsById = options.reduce((currentValue, option) => (Object.assign(Object.assign({}, currentValue), { [option.id]: option })), {});
-    return contentDisplay
-        .map(({ id, visible }) => (Object.assign(Object.assign({}, optionsById[id]), { visible })))
-        .filter(Boolean);
+    // By using a Map, we are guaranteed to preserve insertion order on future iteration.
+    const optionsById = new Map();
+    // We insert contentDisplay first so we respect the currently selected order
+    for (const { id, visible } of contentDisplay) {
+        // If an option is provided in contentDisplay and not options, we default the label to the id
+        optionsById.set(id, { id, label: id, visible });
+    }
+    // We merge options data, and insert any that were not in contentDisplay as non-visible
+    for (const option of options) {
+        const existing = optionsById.get(option.id);
+        optionsById.set(option.id, Object.assign(Object.assign({}, option), { visible: !!(existing === null || existing === void 0 ? void 0 : existing.visible) }));
+    }
+    return Array.from(optionsById.values());
 }
 export function getFilteredOptions(options, filterText) {
     filterText = filterText.trim().toLowerCase();

package/collection-preferences/content-display/utils.js.map

@@ -1 +1 @@
-{"version":3,"file":"utils.js","sourceRoot":"","sources":["../../../../src/collection-preferences/content-display/utils.ts"],"names":[],"mappings":"AAQA,MAAM,UAAU,gBAAgB,CAAC,EAC/B,OAAO,EACP,cAAc,GAIf;IACC,MAAM,WAAW,GAAoE,OAAO,CAAC,MAAM,CACjG,CAAC,YAAY,EAAE,MAAM,EAAE,EAAE,CAAC,iCAAM,YAAY,KAAE,CAAC,MAAM,CAAC,EAAE,CAAC,EAAE,MAAM,IAAG,EACpE,EAAE,CACH,CAAC;IACF,OAAO,cAAc;SAClB,GAAG,CAAC,CAAC,EAAE,EAAE,EAAE,OAAO,EAAiD,EAAE,EAAE,CAAC,iCACpE,WAAW,CAAC,EAAE,CAAC,KAClB,OAAO,IACP,CAAC;SACF,MAAM,CAAC,OAAO,CAAC,CAAC;AACrB,CAAC;AAED,MAAM,UAAU,kBAAkB,CAChC,OAAuE,EACvE,UAAkB;IAElB,UAAU,GAAG,UAAU,CAAC,IAAI,EAAE,CAAC,WAAW,EAAE,CAAC;IAE7C,IAAI,CAAC,UAAU,EAAE;QACf,OAAO,OAAO,CAAC;KAChB;IAED,OAAO,OAAO,CAAC,MAAM,CAAC,MAAM,CAAC,EAAE,CAAC,MAAM,CAAC,KAAK,CAAC,WAAW,EAAE,CAAC,IAAI,EAAE,CAAC,QAAQ,CAAC,UAAU,CAAC,CAAC,CAAC;AAC1F,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport { CollectionPreferencesProps } from '../interfaces';\n\nexport interface OptionWithVisibility extends CollectionPreferencesProps.ContentDisplayOption {\n  visible?: boolean;\n}\n\nexport function getSortedOptions({\n  options,\n  contentDisplay,\n}: {\n  options: ReadonlyArray<CollectionPreferencesProps.ContentDisplayOption>;\n  contentDisplay: ReadonlyArray<CollectionPreferencesProps.ContentDisplayItem>;\n}): ReadonlyArray<OptionWithVisibility> {\n  const optionsById: Record<string, CollectionPreferencesProps.ContentDisplayOption> = options.reduce(\n    (currentValue, option) => ({ ...currentValue, [option.id]: option }),\n    {}\n  );\n  return contentDisplay\n    .map(({ id, visible }: CollectionPreferencesProps.ContentDisplayItem) => ({\n      ...optionsById[id],\n      visible,\n    }))\n    .filter(Boolean);\n}\n\nexport function getFilteredOptions(\n  options: ReadonlyArray<CollectionPreferencesProps.ContentDisplayOption>,\n  filterText: string\n) {\n  filterText = filterText.trim().toLowerCase();\n\n  if (!filterText) {\n    return options;\n  }\n\n  return options.filter(option => option.label.toLowerCase().trim().includes(filterText));\n}\n"]}
+{"version":3,"file":"utils.js","sourceRoot":"","sources":["../../../../src/collection-preferences/content-display/utils.ts"],"names":[],"mappings":"AAQA,MAAM,UAAU,gBAAgB,CAAC,EAC/B,OAAO,EACP,cAAc,GAIf;IACC,qFAAqF;IACrF,MAAM,WAAW,GAAG,IAAI,GAAG,EAAgC,CAAC;IAC5D,4EAA4E;IAC5E,KAAK,MAAM,EAAE,EAAE,EAAE,OAAO,EAAE,IAAI,cAAc,EAAE;QAC5C,6FAA6F;QAC7F,WAAW,CAAC,GAAG,CAAC,EAAE,EAAE,EAAE,EAAE,EAAE,KAAK,EAAE,EAAE,EAAE,OAAO,EAAE,CAAC,CAAC;KACjD;IACD,uFAAuF;IACvF,KAAK,MAAM,MAAM,IAAI,OAAO,EAAE;QAC5B,MAAM,QAAQ,GAAG,WAAW,CAAC,GAAG,CAAC,MAAM,CAAC,EAAE,CAAC,CAAC;QAC5C,WAAW,CAAC,GAAG,CAAC,MAAM,CAAC,EAAE,kCAAO,MAAM,KAAE,OAAO,EAAE,CAAC,CAAC,CAAA,QAAQ,aAAR,QAAQ,uBAAR,QAAQ,CAAE,OAAO,CAAA,IAAG,CAAC;KACzE;IACD,OAAO,KAAK,CAAC,IAAI,CAAC,WAAW,CAAC,MAAM,EAAE,CAAC,CAAC;AAC1C,CAAC;AAED,MAAM,UAAU,kBAAkB,CAAC,OAA4C,EAAE,UAAkB;IACjG,UAAU,GAAG,UAAU,CAAC,IAAI,EAAE,CAAC,WAAW,EAAE,CAAC;IAE7C,IAAI,CAAC,UAAU,EAAE;QACf,OAAO,OAAO,CAAC;KAChB;IAED,OAAO,OAAO,CAAC,MAAM,CAAC,MAAM,CAAC,EAAE,CAAC,MAAM,CAAC,KAAK,CAAC,WAAW,EAAE,CAAC,IAAI,EAAE,CAAC,QAAQ,CAAC,UAAU,CAAC,CAAC,CAAC;AAC1F,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport { CollectionPreferencesProps } from '../interfaces';\n\nexport interface OptionWithVisibility extends CollectionPreferencesProps.ContentDisplayOption {\n  visible: boolean;\n}\n\nexport function getSortedOptions({\n  options,\n  contentDisplay,\n}: {\n  options: ReadonlyArray<CollectionPreferencesProps.ContentDisplayOption>;\n  contentDisplay: ReadonlyArray<CollectionPreferencesProps.ContentDisplayItem>;\n}): ReadonlyArray<OptionWithVisibility> {\n  // By using a Map, we are guaranteed to preserve insertion order on future iteration.\n  const optionsById = new Map<string, OptionWithVisibility>();\n  // We insert contentDisplay first so we respect the currently selected order\n  for (const { id, visible } of contentDisplay) {\n    // If an option is provided in contentDisplay and not options, we default the label to the id\n    optionsById.set(id, { id, label: id, visible });\n  }\n  // We merge options data, and insert any that were not in contentDisplay as non-visible\n  for (const option of options) {\n    const existing = optionsById.get(option.id);\n    optionsById.set(option.id, { ...option, visible: !!existing?.visible });\n  }\n  return Array.from(optionsById.values());\n}\n\nexport function getFilteredOptions(options: ReadonlyArray<OptionWithVisibility>, filterText: string) {\n  filterText = filterText.trim().toLowerCase();\n\n  if (!filterText) {\n    return options;\n  }\n\n  return options.filter(option => option.label.toLowerCase().trim().includes(filterText));\n}\n"]}

package/form/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/form/index.tsx"],"names":[],"mappings":";AAWA,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAMzC,OAAO,EAAE,SAAS,EAAE,CAAC;AAgDrB,MAAM,CAAC,OAAO,UAAU,IAAI,CAAC,EAAE,OAAqB,EAAE,GAAG,KAAK,EAAE,EAAE,SAAS,eAuC1E"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/form/index.tsx"],"names":[],"mappings":";AAWA,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAMzC,OAAO,EAAE,SAAS,EAAE,CAAC;AAgDrB,MAAM,CAAC,OAAO,UAAU,IAAI,CAAC,EAAE,OAAqB,EAAE,GAAG,KAAK,EAAE,EAAE,SAAS,eAwC1E"}

package/form/index.js

@@ -11,7 +11,7 @@ import useBaseComponent from '../internal/hooks/use-base-component';
 import { applyDisplayName } from '../internal/utils/apply-display-name';
 import InternalForm from './internal';
 import headerStyles from '../header/styles.css.js';
-import formStyles from './styles.css.js';
+import analyticsSelectors from './analytics-metadata/styles.css.js';
 const FormWithAnalytics = (_a) => {
     var { variant = 'full-page', actions, errorText } = _a, props = __rest(_a, ["variant", "actions", "errorText"]);
     const { funnelIdentifier, funnelInteractionId, funnelProps, funnelSubmit, funnelNextOrSubmitAttempt, errorCount, submissionAttempt, funnelErrorContext, } = useFunnel();
@@ -49,8 +49,8 @@ export default function Form(_a) {
         },
     }, analyticsMetadata);
     const inheritedFunnelNameSelector = useFunnelNameSelector();
-    const funnelNameSelector = inheritedFunnelNameSelector || `.${headerStyles['heading-text']}`;
-    return (React.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: "single-page", optionalStepNumbers: [], totalFunnelSteps: 1, funnelNameSelectors: [funnelNameSelector, `.${formStyles.header}`] },
+    const funnelNameSelector = inheritedFunnelNameSelector || `.${analyticsSelectors.header} .${headerStyles['heading-text']}`;
+    return (React.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: "single-page", optionalStepNumbers: [], totalFunnelSteps: 1, funnelNameSelectors: [funnelNameSelector, `.${analyticsSelectors.header}`] },
         React.createElement(AnalyticsFunnelStep, { stepIdentifier: analyticsMetadata === null || analyticsMetadata === void 0 ? void 0 : analyticsMetadata.instanceIdentifier, stepErrorContext: analyticsMetadata === null || analyticsMetadata === void 0 ? void 0 : analyticsMetadata.errorContext, stepNumber: 1 },
             React.createElement(FormWithAnalytics, Object.assign({ variant: variant }, props, baseComponentProps)))));
 }

package/form/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/form/index.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React, { useEffect } from 'react';\n\nimport { FunnelMetrics } from '../internal/analytics';\nimport { AnalyticsFunnel, AnalyticsFunnelStep } from '../internal/analytics/components/analytics-funnel';\nimport { useFunnel, useFunnelNameSelector, useFunnelStep } from '../internal/analytics/hooks/use-funnel';\nimport { BasePropsWithAnalyticsMetadata, getAnalyticsMetadataProps } from '../internal/base-component';\nimport { ButtonContext, ButtonContextProps } from '../internal/context/button-context';\nimport useBaseComponent from '../internal/hooks/use-base-component';\nimport { applyDisplayName } from '../internal/utils/apply-display-name';\nimport { FormProps } from './interfaces';\nimport InternalForm from './internal';\n\nimport headerStyles from '../header/styles.css.js';\nimport formStyles from './styles.css.js';\n\nexport { FormProps };\n\nconst FormWithAnalytics = ({ variant = 'full-page', actions, errorText, ...props }: FormProps) => {\n  const {\n    funnelIdentifier,\n    funnelInteractionId,\n    funnelProps,\n    funnelSubmit,\n    funnelNextOrSubmitAttempt,\n    errorCount,\n    submissionAttempt,\n    funnelErrorContext,\n  } = useFunnel();\n  const { funnelStepProps } = useFunnelStep();\n\n  const handleActionButtonClick: ButtonContextProps['onClick'] = ({ variant }) => {\n    if (variant === 'primary') {\n      funnelNextOrSubmitAttempt();\n      funnelSubmit();\n    }\n  };\n\n  useEffect(() => {\n    if (funnelInteractionId && errorText) {\n      errorCount.current++;\n      FunnelMetrics.funnelError({ funnelInteractionId, funnelIdentifier, funnelErrorContext });\n      return () => {\n        // eslint-disable-next-line react-hooks/exhaustive-deps\n        errorCount.current--;\n      };\n    }\n  }, [funnelInteractionId, funnelIdentifier, errorText, submissionAttempt, errorCount, funnelErrorContext]);\n\n  return (\n    <ButtonContext.Provider value={{ onClick: handleActionButtonClick }}>\n      <InternalForm\n        variant={variant}\n        actions={actions}\n        errorText={errorText}\n        {...props}\n        {...funnelProps}\n        {...funnelStepProps}\n        __injectAnalyticsComponentMetadata={true}\n      />\n    </ButtonContext.Provider>\n  );\n};\n\nexport default function Form({ variant = 'full-page', ...props }: FormProps) {\n  const analyticsMetadata = getAnalyticsMetadataProps(props as BasePropsWithAnalyticsMetadata);\n  const baseComponentProps = useBaseComponent(\n    'Form',\n    {\n      props: {\n        variant,\n        flowType: analyticsMetadata?.flowType,\n      },\n      metadata: {\n        hasResourceType: Boolean(analyticsMetadata?.resourceType),\n        hasInstanceIdentifier: Boolean(analyticsMetadata?.instanceIdentifier),\n      },\n    },\n    analyticsMetadata\n  );\n  const inheritedFunnelNameSelector = useFunnelNameSelector();\n  const funnelNameSelector = inheritedFunnelNameSelector || `.${headerStyles['heading-text']}`;\n\n  return (\n    <AnalyticsFunnel\n      funnelIdentifier={analyticsMetadata?.instanceIdentifier}\n      funnelFlowType={analyticsMetadata?.flowType}\n      funnelErrorContext={analyticsMetadata?.errorContext}\n      funnelResourceType={analyticsMetadata?.resourceType}\n      funnelType=\"single-page\"\n      optionalStepNumbers={[]}\n      totalFunnelSteps={1}\n      funnelNameSelectors={[funnelNameSelector, `.${formStyles.header}`]}\n    >\n      <AnalyticsFunnelStep\n        stepIdentifier={analyticsMetadata?.instanceIdentifier}\n        stepErrorContext={analyticsMetadata?.errorContext}\n        stepNumber={1}\n      >\n        <FormWithAnalytics variant={variant} {...props} {...baseComponentProps} />\n      </AnalyticsFunnelStep>\n    </AnalyticsFunnel>\n  );\n}\n\napplyDisplayName(Form, 'Form');\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/form/index.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React, { useEffect } from 'react';\n\nimport { FunnelMetrics } from '../internal/analytics';\nimport { AnalyticsFunnel, AnalyticsFunnelStep } from '../internal/analytics/components/analytics-funnel';\nimport { useFunnel, useFunnelNameSelector, useFunnelStep } from '../internal/analytics/hooks/use-funnel';\nimport { BasePropsWithAnalyticsMetadata, getAnalyticsMetadataProps } from '../internal/base-component';\nimport { ButtonContext, ButtonContextProps } from '../internal/context/button-context';\nimport useBaseComponent from '../internal/hooks/use-base-component';\nimport { applyDisplayName } from '../internal/utils/apply-display-name';\nimport { FormProps } from './interfaces';\nimport InternalForm from './internal';\n\nimport headerStyles from '../header/styles.css.js';\nimport analyticsSelectors from './analytics-metadata/styles.css.js';\n\nexport { FormProps };\n\nconst FormWithAnalytics = ({ variant = 'full-page', actions, errorText, ...props }: FormProps) => {\n  const {\n    funnelIdentifier,\n    funnelInteractionId,\n    funnelProps,\n    funnelSubmit,\n    funnelNextOrSubmitAttempt,\n    errorCount,\n    submissionAttempt,\n    funnelErrorContext,\n  } = useFunnel();\n  const { funnelStepProps } = useFunnelStep();\n\n  const handleActionButtonClick: ButtonContextProps['onClick'] = ({ variant }) => {\n    if (variant === 'primary') {\n      funnelNextOrSubmitAttempt();\n      funnelSubmit();\n    }\n  };\n\n  useEffect(() => {\n    if (funnelInteractionId && errorText) {\n      errorCount.current++;\n      FunnelMetrics.funnelError({ funnelInteractionId, funnelIdentifier, funnelErrorContext });\n      return () => {\n        // eslint-disable-next-line react-hooks/exhaustive-deps\n        errorCount.current--;\n      };\n    }\n  }, [funnelInteractionId, funnelIdentifier, errorText, submissionAttempt, errorCount, funnelErrorContext]);\n\n  return (\n    <ButtonContext.Provider value={{ onClick: handleActionButtonClick }}>\n      <InternalForm\n        variant={variant}\n        actions={actions}\n        errorText={errorText}\n        {...props}\n        {...funnelProps}\n        {...funnelStepProps}\n        __injectAnalyticsComponentMetadata={true}\n      />\n    </ButtonContext.Provider>\n  );\n};\n\nexport default function Form({ variant = 'full-page', ...props }: FormProps) {\n  const analyticsMetadata = getAnalyticsMetadataProps(props as BasePropsWithAnalyticsMetadata);\n  const baseComponentProps = useBaseComponent(\n    'Form',\n    {\n      props: {\n        variant,\n        flowType: analyticsMetadata?.flowType,\n      },\n      metadata: {\n        hasResourceType: Boolean(analyticsMetadata?.resourceType),\n        hasInstanceIdentifier: Boolean(analyticsMetadata?.instanceIdentifier),\n      },\n    },\n    analyticsMetadata\n  );\n  const inheritedFunnelNameSelector = useFunnelNameSelector();\n  const funnelNameSelector =\n    inheritedFunnelNameSelector || `.${analyticsSelectors.header} .${headerStyles['heading-text']}`;\n\n  return (\n    <AnalyticsFunnel\n      funnelIdentifier={analyticsMetadata?.instanceIdentifier}\n      funnelFlowType={analyticsMetadata?.flowType}\n      funnelErrorContext={analyticsMetadata?.errorContext}\n      funnelResourceType={analyticsMetadata?.resourceType}\n      funnelType=\"single-page\"\n      optionalStepNumbers={[]}\n      totalFunnelSteps={1}\n      funnelNameSelectors={[funnelNameSelector, `.${analyticsSelectors.header}`]}\n    >\n      <AnalyticsFunnelStep\n        stepIdentifier={analyticsMetadata?.instanceIdentifier}\n        stepErrorContext={analyticsMetadata?.errorContext}\n        stepNumber={1}\n      >\n        <FormWithAnalytics variant={variant} {...props} {...baseComponentProps} />\n      </AnalyticsFunnelStep>\n    </AnalyticsFunnel>\n  );\n}\n\napplyDisplayName(Form, 'Form');\n"]}

package/internal/analytics/components/analytics-funnel.d.ts

@@ -3,6 +3,7 @@ import { FunnelStepContextValue, FunnelSubStepContextValue } from '../context/an
 import { AnalyticsMetadata, FunnelStartProps, FunnelStepProps, StepConfiguration } from '../interfaces';
 export declare const FUNNEL_VERSION = "1.4";
 interface AnalyticsFunnelProps {
+    mounted?: boolean;
     children?: React.ReactNode;
     stepConfiguration?: StepConfiguration[];
     funnelNameSelectors?: string[];
@@ -17,6 +18,7 @@ interface AnalyticsFunnelProps {
 export declare const AnalyticsFunnel: (props: AnalyticsFunnelProps) => JSX.Element;
 export declare const CREATION_EDIT_FLOW_DONE_EVENT_NAME = "awsui-creation-edit-flow-done";
 interface AnalyticsFunnelStepProps {
+    mounted?: boolean;
     stepIdentifier?: AnalyticsMetadata['instanceIdentifier'];
     stepErrorContext?: AnalyticsMetadata['errorContext'];
     children?: React.ReactNode | ((props: FunnelStepContextValue) => React.ReactNode);

package/internal/analytics/components/analytics-funnel.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"analytics-funnel.d.ts","sourceRoot":"","sources":["../../../../../src/internal/analytics/components/analytics-funnel.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAkD,MAAM,OAAO,CAAC;AAOvE,OAAO,EAKL,sBAAsB,EAEtB,yBAAyB,EAC1B,MAAM,8BAA8B,CAAC;AAGtC,OAAO,EACL,iBAAiB,EACjB,gBAAgB,EAChB,eAAe,EACf,iBAAiB,EAGlB,MAAM,eAAe,CAAC;AAWvB,eAAO,MAAM,cAAc,QAAQ,CAAC;AAEpC,UAAU,oBAAoB;IAC5B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,iBAAiB,CAAC,EAAE,iBAAiB,EAAE,CAAC;IACxC,mBAAmB,CAAC,EAAE,MAAM,EAAE,CAAC;IAC/B,UAAU,EAAE,gBAAgB,CAAC,YAAY,CAAC,CAAC;IAC3C,mBAAmB,EAAE,gBAAgB,CAAC,qBAAqB,CAAC,CAAC;IAC7D,gBAAgB,EAAE,gBAAgB,CAAC,kBAAkB,CAAC,CAAC;IACvD,gBAAgB,CAAC,EAAE,iBAAiB,CAAC,oBAAoB,CAAC,CAAC;IAC3D,cAAc,CAAC,EAAE,iBAAiB,CAAC,UAAU,CAAC,CAAC;IAC/C,kBAAkB,CAAC,EAAE,iBAAiB,CAAC,cAAc,CAAC,CAAC;IACvD,kBAAkB,CAAC,EAAE,iBAAiB,CAAC,cAAc,CAAC,CAAC;CACxD;AAED,eAAO,MAAM,eAAe,UAAW,oBAAoB,gBAa1D,CAAC;AACF,eAAO,MAAM,kCAAkC,kCAAkC,CAAC;AAgNlF,UAAU,wBAAwB;IAChC,cAAc,CAAC,EAAE,iBAAiB,CAAC,oBAAoB,CAAC,CAAC;IACzD,gBAAgB,CAAC,EAAE,iBAAiB,CAAC,cAAc,CAAC,CAAC;IACrD,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,GAAG,CAAC,CAAC,KAAK,EAAE,sBAAsB,KAAK,KAAK,CAAC,SAAS,CAAC,CAAC;IAClF,gBAAgB,CAAC,EAAE,eAAe,CAAC,kBAAkB,CAAC,CAAC;IACvD,UAAU,EAAE,eAAe,CAAC,YAAY,CAAC,CAAC;CAC3C;AAED,eAAO,MAAM,mBAAmB,UAAW,wBAAwB,gBAMlE,CAAC;AAyLF,UAAU,2BAA2B;IACnC,iBAAiB,CAAC,EAAE,iBAAiB,CAAC,oBAAoB,CAAC,CAAC;IAC5D,mBAAmB,CAAC,EAAE,iBAAiB,CAAC,cAAc,CAAC,CAAC;IACxD,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,GAAG,CAAC,CAAC,KAAK,EAAE,yBAAyB,KAAK,KAAK,CAAC,SAAS,CAAC,CAAC;CACtF;AAED,eAAO,MAAM,sBAAsB,0DAIhC,2BAA2B,gBAmG7B,CAAC"}
+{"version":3,"file":"analytics-funnel.d.ts","sourceRoot":"","sources":["../../../../../src/internal/analytics/components/analytics-funnel.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAkD,MAAM,OAAO,CAAC;AAOvE,OAAO,EAKL,sBAAsB,EAEtB,yBAAyB,EAC1B,MAAM,8BAA8B,CAAC;AAGtC,OAAO,EACL,iBAAiB,EACjB,gBAAgB,EAChB,eAAe,EACf,iBAAiB,EAGlB,MAAM,eAAe,CAAC;AAWvB,eAAO,MAAM,cAAc,QAAQ,CAAC;AAEpC,UAAU,oBAAoB;IAC5B,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,iBAAiB,CAAC,EAAE,iBAAiB,EAAE,CAAC;IACxC,mBAAmB,CAAC,EAAE,MAAM,EAAE,CAAC;IAC/B,UAAU,EAAE,gBAAgB,CAAC,YAAY,CAAC,CAAC;IAC3C,mBAAmB,EAAE,gBAAgB,CAAC,qBAAqB,CAAC,CAAC;IAC7D,gBAAgB,EAAE,gBAAgB,CAAC,kBAAkB,CAAC,CAAC;IACvD,gBAAgB,CAAC,EAAE,iBAAiB,CAAC,oBAAoB,CAAC,CAAC;IAC3D,cAAc,CAAC,EAAE,iBAAiB,CAAC,UAAU,CAAC,CAAC;IAC/C,kBAAkB,CAAC,EAAE,iBAAiB,CAAC,cAAc,CAAC,CAAC;IACvD,kBAAkB,CAAC,EAAE,iBAAiB,CAAC,cAAc,CAAC,CAAC;CACxD;AAED,eAAO,MAAM,eAAe,UAAW,oBAAoB,gBAa1D,CAAC;AAEF,eAAO,MAAM,kCAAkC,kCAAkC,CAAC;AAuNlF,UAAU,wBAAwB;IAChC,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,cAAc,CAAC,EAAE,iBAAiB,CAAC,oBAAoB,CAAC,CAAC;IACzD,gBAAgB,CAAC,EAAE,iBAAiB,CAAC,cAAc,CAAC,CAAC;IACrD,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,GAAG,CAAC,CAAC,KAAK,EAAE,sBAAsB,KAAK,KAAK,CAAC,SAAS,CAAC,CAAC;IAClF,gBAAgB,CAAC,EAAE,eAAe,CAAC,kBAAkB,CAAC,CAAC;IACvD,UAAU,EAAE,eAAe,CAAC,YAAY,CAAC,CAAC;CAC3C;AAED,eAAO,MAAM,mBAAmB,UAAW,wBAAwB,gBAMlE,CAAC;AAoOF,UAAU,2BAA2B;IACnC,iBAAiB,CAAC,EAAE,iBAAiB,CAAC,oBAAoB,CAAC,CAAC;IAC5D,mBAAmB,CAAC,EAAE,iBAAiB,CAAC,cAAc,CAAC,CAAC;IACxD,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,GAAG,CAAC,CAAC,KAAK,EAAE,yBAAyB,KAAK,KAAK,CAAC,SAAS,CAAC,CAAC;CACtF;AAED,eAAO,MAAM,sBAAsB,0DAIhC,2BAA2B,gBAmG7B,CAAC"}