@cloudscape-design/components 3.0.632 → 3.0.634

package/app-layout/split-panel/styles.css.js

@@ -1,7 +1,7 @@
 
     import './styles.scoped.css';
     export default {
-  "drawer-displayed": "awsui_drawer-displayed_1lh3u_1yevz_103",
-  "drawer-content": "awsui_drawer-content_1lh3u_1yevz_107"
+  "drawer-displayed": "awsui_drawer-displayed_1lh3u_17q8n_103",
+  "drawer-content": "awsui_drawer-content_1lh3u_17q8n_107"
 };
   

package/app-layout/split-panel/styles.scoped.css

@@ -100,10 +100,11 @@ 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_drawer-displayed_1lh3u_1yevz_103:not(#\9) {
+.awsui_drawer-displayed_1lh3u_17q8n_103:not(#\9) {
   min-inline-size: 40px;
 }
 
-.awsui_drawer-content_1lh3u_1yevz_107:not(#\9) {
+.awsui_drawer-content_1lh3u_17q8n_107:not(#\9) {
   position: fixed;
+  z-index: 830;
 }

package/app-layout/split-panel/styles.selectors.js

@@ -2,7 +2,7 @@
     // es-module interop with Babel and Typescript
     Object.defineProperty(exports, "__esModule", { value: true });
     module.exports.default = {
-  "drawer-displayed": "awsui_drawer-displayed_1lh3u_1yevz_103",
-  "drawer-content": "awsui_drawer-content_1lh3u_1yevz_107"
+  "drawer-displayed": "awsui_drawer-displayed_1lh3u_17q8n_103",
+  "drawer-content": "awsui_drawer-content_1lh3u_17q8n_107"
 };
   

package/cards/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/cards/index.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,mBAAmB,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AA+B/D,OAAO,EAAE,UAAU,EAAE,CAAC;AAEtB,QAAA,MAAM,KAAK,qBA6Kc,CAAC;AAE1B,eAAe,KAAK,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/cards/index.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,mBAAmB,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AA+B/D,OAAO,EAAE,UAAU,EAAE,CAAC;AAEtB,QAAA,MAAM,KAAK,qBA4Kc,CAAC;AAE1B,eAAe,KAAK,CAAC"}

package/cards/index.js

@@ -45,7 +45,7 @@ const Cards = React.forwardRef(function (_a, ref) {
     const mergedRef = useMergeRefs(measureRef, refObject, __internalRootRef);
     const getMouseDownTarget = useMouseDownTarget();
     const i18n = useInternalI18n('cards');
-    const { isItemSelected, getItemSelectionProps, updateShiftToggle } = useSelection({
+    const { isItemSelected, getItemSelectionProps } = useSelection({
         items,
         trackBy,
         selectedItems,
@@ -94,10 +94,10 @@ const Cards = React.forwardRef(function (_a, ref) {
                             React.createElement(ToolsHeader, { header: header, filter: filter, pagination: pagination, preferences: preferences })))), footer: hasFooterPagination && React.createElement("div", { className: styles['footer-pagination'] }, pagination), disableContentPaddings: true, disableHeaderPaddings: computedVariant === 'full-page', variant: computedVariant === 'container' ? 'cards' : computedVariant, __stickyHeader: stickyHeader, __stickyOffset: stickyHeaderVerticalOffset, __headerRef: headerRef, __darkHeader: computedVariant === 'full-page', __disableFooterDivider: true },
                     React.createElement("div", { className: clsx(hasToolsHeader && styles['has-header'], isRefresh && styles.refresh, styles[`header-variant-${computedVariant}`], shouldRemoveHighContrastHeader() && styles['remove-high-contrast-header']) },
                         !!renderAriaLive && !!firstIndex && (React.createElement(LiveRegion, null,
-                            React.createElement("span", null, renderAriaLive({ totalItemsCount, firstIndex, lastIndex: firstIndex + items.length - 1 })))), status !== null && status !== void 0 ? status : (React.createElement(CardsList, { items: items, cardDefinition: cardDefinition, trackBy: trackBy, selectionType: selectionType, columns: columns, isItemSelected: isItemSelected, getItemSelectionProps: getItemSelectionProps, visibleSections: visibleSections, updateShiftToggle: updateShiftToggle, onFocus: onCardFocus, ariaLabel: ariaLabels === null || ariaLabels === void 0 ? void 0 : ariaLabels.cardsLabel, ariaLabelledby: isLabelledByHeader && headerIdRef.current ? headerIdRef.current : undefined, entireCardClickable: entireCardClickable }))))))));
+                            React.createElement("span", null, renderAriaLive({ totalItemsCount, firstIndex, lastIndex: firstIndex + items.length - 1 })))), status !== null && status !== void 0 ? status : (React.createElement(CardsList, { items: items, cardDefinition: cardDefinition, trackBy: trackBy, selectionType: selectionType, columns: columns, isItemSelected: isItemSelected, getItemSelectionProps: getItemSelectionProps, visibleSections: visibleSections, onFocus: onCardFocus, ariaLabel: ariaLabels === null || ariaLabels === void 0 ? void 0 : ariaLabels.cardsLabel, ariaLabelledby: isLabelledByHeader && headerIdRef.current ? headerIdRef.current : undefined, entireCardClickable: entireCardClickable }))))))));
 });
 export default Cards;
-const CardsList = ({ items, cardDefinition, trackBy, selectionType, columns, isItemSelected, getItemSelectionProps, visibleSections, updateShiftToggle, onFocus, ariaLabelledby, ariaLabel, entireCardClickable, }) => {
+const CardsList = ({ items, cardDefinition, trackBy, selectionType, columns, isItemSelected, getItemSelectionProps, visibleSections, onFocus, ariaLabelledby, ariaLabel, entireCardClickable, }) => {
     const selectable = !!selectionType;
     const canClickEntireCard = selectable && entireCardClickable;
     const isRefresh = useVisualRefresh();
@@ -119,15 +119,15 @@ const CardsList = ({ items, cardDefinition, trackBy, selectionType, columns, isI
         React.createElement("div", { className: clsx(styles['card-inner'], isRefresh && styles.refresh), onClick: canClickEntireCard
                 ? event => {
                     var _a;
-                    getItemSelectionProps(item).onChange();
+                    getItemSelectionProps === null || getItemSelectionProps === void 0 ? void 0 : getItemSelectionProps(item).onChange();
                     // Manually move focus to the native input (checkbox or radio button)
                     (_a = event.currentTarget.querySelector('input')) === null || _a === void 0 ? void 0 : _a.focus();
                 }
                 : undefined },
             React.createElement("div", { className: styles['card-header'] },
                 React.createElement("div", { className: styles['card-header-inner'] }, cardDefinition.header ? cardDefinition.header(item) : ''),
-                selectable && (React.createElement("div", { className: styles['selection-control'] },
-                    React.createElement(SelectionControl, Object.assign({ onFocusDown: moveFocusDown, onFocusUp: moveFocusUp, onShiftToggle: updateShiftToggle }, getItemSelectionProps(item)))))),
+                getItemSelectionProps && (React.createElement("div", { className: styles['selection-control'] },
+                    React.createElement(SelectionControl, Object.assign({ onFocusDown: moveFocusDown, onFocusUp: moveFocusUp }, getItemSelectionProps(item)))))),
             visibleSectionsDefinition.map(({ width = 100, header, content, id }, index) => (React.createElement("div", { key: id || index, className: styles.section, style: { width: `${width}%` } },
                 header ? React.createElement("div", { className: styles['section-header'] }, header) : '',
                 content ? React.createElement("div", { className: styles['section-content'] }, content(item)) : '')))))))));

package/cards/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/cards/index.tsx"],"names":[],"mappings":";AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,KAAK,EAAE,EAAqB,WAAW,EAAE,mBAAmB,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAE3F,OAAO,MAAM,MAAM,iBAAiB,CAAC;AACrC,OAAO,EAAE,cAAc,EAAE,MAAM,uBAAuB,CAAC;AACvD,OAAO,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAC;AAC1D,OAAO,WAAW,MAAM,uBAAuB,CAAC;AAChD,OAAO,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAC5C,OAAO,EACL,gBAAgB,EAEhB,YAAY,EACZ,qBAAqB,EACrB,YAAY,GACb,MAAM,oBAAoB,CAAC;AAC5B,OAAO,EAAE,0BAA0B,EAAE,MAAM,uBAAuB,CAAC;AACnE,OAAO,uBAAuB,MAAM,8BAA8B,CAAC;AACnE,OAAO,EAAE,gBAAgB,EAAE,MAAM,sCAAsC,CAAC;AACxE,OAAO,eAAe,MAAM,2BAA2B,CAAC;AACxD,OAAO,gBAAgB,MAAM,sCAAsC,CAAC;AACpE,OAAO,EAAE,gBAAgB,EAAE,MAAM,mCAAmC,CAAC;AACrE,OAAO,EAAE,YAAY,EAAE,MAAM,kCAAkC,CAAC;AAChE,OAAO,UAAU,MAAM,oCAAoC,CAAC;AAC5D,OAAO,kBAAkB,MAAM,yCAAyC,CAAC;AACzE,OAAO,EAAE,SAAS,EAAE,MAAM,8BAA8B,CAAC;AACzD,OAAO,EAAE,sBAAsB,EAAE,MAAM,uBAAuB,CAAC;AAC/D,OAAO,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAC;AAClD,OAAO,EAAE,iBAAiB,EAAE,MAAM,sCAAsC,CAAC;AACzE,OAAO,EAAE,sBAAsB,EAAE,MAAM,mDAAmD,CAAC;AAC3F,OAAO,EAAE,sBAAsB,EAAE,MAAM,8CAA8C,CAAC;AACtF,OAAO,EAAE,yBAAyB,EAAE,MAAM,kDAAkD,CAAC;AAC7F,OAAO,EAAE,8BAA8B,EAAE,MAAM,wCAAwC,CAAC;AAIxF,MAAM,KAAK,GAAG,KAAK,CAAC,UAAU,CAAC,UAC7B,EA0BgB,EAChB,GAA8B;QA3B9B,EACE,KAAK,GAAG,EAAE,EACV,cAAc,EACd,WAAW,GAAG,EAAE,EAChB,MAAM,EACN,MAAM,EACN,UAAU,EACV,WAAW,EACX,KAAK,EACL,OAAO,EACP,WAAW,EACX,OAAO,EACP,aAAa,EACb,aAAa,EACb,cAAc,EACd,iBAAiB,EACjB,UAAU,EACV,eAAe,EACf,YAAY,EACZ,0BAA0B,EAC1B,OAAO,GAAG,WAAW,EACrB,cAAc,EACd,UAAU,GAAG,CAAC,EACd,eAAe,EACf,mBAAmB,OAEL,EADX,IAAI,cAzBT,sXA0BC,CADQ;IAIT,MAAM,EAAE,iBAAiB,EAAE,GAAG,gBAAgB,CAAC,OAAO,EAAE;QACtD,KAAK,EAAE,EAAE,mBAAmB,EAAE,aAAa,EAAE,YAAY,EAAE,OAAO,EAAE;KACrE,CAAC,CAAC;IACH,MAAM,SAAS,GAAG,YAAY,CAAC,IAAI,CAAC,CAAC;IACrC,MAAM,SAAS,GAAG,gBAAgB,EAAE,CAAC;IACrC,MAAM,QAAQ,GAAG,SAAS,EAAE,CAAC;IAE7B,MAAM,eAAe,GAAG,SAAS,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,WAAW,CAAC;IAE1D,MAAM,WAAW,GAAG,MAAM,CAAqB,SAAS,CAAC,CAAC;IAC1D,MAAM,YAAY,GAAG,WAAW,CAAC,CAAC,EAAU,EAAE,EAAE;QAC9C,WAAW,CAAC,OAAO,GAAG,EAAE,CAAC;IAC3B,CAAC,EAAE,EAAE,CAAC,CAAC;IACP,MAAM,kBAAkB,GAAG,CAAC,CAAA,UAAU,aAAV,UAAU,uBAAV,UAAU,CAAE,UAAU,CAAA,IAAI,CAAC,CAAC,MAAM,CAAC;IAE/D,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,iBAAiB,CAC7C,CAAC,EAAE,eAAe,EAAE,EAAE,EAAE,CAAC,cAAc,CAAC,eAAe,EAAE,WAAW,CAAC,EACrE,CAAC,WAAW,CAAC,CACd,CAAC;IACF,MAAM,SAAS,GAAG,MAAM,CAAC,IAAI,CAAC,CAAC;IAC/B,MAAM,SAAS,GAAG,YAAY,CAAC,UAAU,EAAE,SAAS,EAAE,iBAAiB,CAAC,CAAC;IACzE,MAAM,kBAAkB,GAAG,kBAAkB,EAAE,CAAC;IAEhD,MAAM,IAAI,GAAG,eAAe,CAAC,OAAO,CAAC,CAAC;IACtC,MAAM,EAAE,cAAc,EAAE,qBAAqB,EAAE,iBAAiB,EAAE,GAAG,YAAY,CAAC;QAChF,KAAK;QACL,OAAO;QACP,aAAa;QACb,aAAa;QACb,cAAc;QACd,iBAAiB;QACjB,UAAU,EAAE;YACV,kBAAkB,EAAE,UAAU,aAAV,UAAU,uBAAV,UAAU,CAAE,kBAAkB;YAClD,mBAAmB,EAAE,IAAI,CAAC,gCAAgC,EAAE,UAAU,aAAV,UAAU,uBAAV,UAAU,CAAE,mBAAmB,CAAC;SAC7F;KACF,CAAC,CAAC;IACH,MAAM,cAAc,GAAG,MAAM,IAAI,MAAM,IAAI,UAAU,IAAI,WAAW,CAAC;IACrE,MAAM,mBAAmB,GAAG,QAAQ,IAAI,OAAO,KAAK,WAAW,IAAI,CAAC,CAAC,UAAU,CAAC;IAChF,MAAM,SAAS,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IAE/C,MAAM,EAAE,WAAW,EAAE,YAAY,EAAE,GAAG,eAAe,CAAC,SAAS,EAAE,SAAS,CAAC,CAAC;IAC5E,YAAY,GAAG,sBAAsB,EAAE,IAAI,CAAC,QAAQ,IAAI,YAAY,CAAC;IACrE,MAAM,WAAW,GAAmC,KAAK,CAAC,EAAE;QAC1D,2EAA2E;QAC3E,qFAAqF;QACrF,4DAA4D;QAC5D,IAAI,YAAY,IAAI,CAAC,KAAK,CAAC,aAAa,CAAC,QAAQ,CAAC,kBAAkB,EAAE,CAAC,EAAE;YACvE,YAAY,CAAC,KAAK,CAAC,aAAa,CAAC,CAAC;SACnC;IACH,CAAC,CAAC;IACF,mBAAmB,CACjB,GAAG,EACH,GAAG,EAAE,CAAC,CAAC;QACL,WAAW,EAAE,GAAG,EAAE;YAChB,IAAI,YAAY,EAAE;gBAChB,WAAW,EAAE,CAAC;aACf;QACH,CAAC;KACF,CAAC,EACF,CAAC,YAAY,EAAE,WAAW,CAAC,CAC5B,CAAC;IACF,IAAI,MAAM,CAAC;IACX,IAAI,OAAO,EAAE;QACX,MAAM,GAAG,CACP,6BAAK,SAAS,EAAE,MAAM,CAAC,OAAO;YAC5B,oBAAC,uBAAuB,IAAC,IAAI,EAAC,SAAS;gBACrC,oBAAC,UAAU,IAAC,OAAO,EAAE,IAAI,IAAG,WAAW,CAAc,CAC7B,CACtB,CACP,CAAC;KACH;SAAM,IAAI,KAAK,IAAI,CAAC,KAAK,CAAC,MAAM,EAAE;QACjC,MAAM,GAAG,6BAAK,SAAS,EAAE,MAAM,CAAC,KAAK,IAAG,KAAK,CAAO,CAAC;KACtD;IAED,OAAO,CACL,oBAAC,yBAAyB,CAAC,QAAQ,IAAC,KAAK,EAAE,EAAE,cAAc,EAAE,SAAS,EAAE;QACtE,oBAAC,sBAAsB;YACrB,6CAAS,SAAS,IAAE,SAAS,EAAE,IAAI,CAAC,SAAS,CAAC,SAAS,EAAE,MAAM,CAAC,IAAI,CAAC,EAAE,GAAG,EAAE,SAAS;gBACnF,oBAAC,0BAA0B,IACzB,MAAM,EACJ,cAAc,IAAI,CAChB,6BACE,SAAS,EAAE,IAAI,CACb,MAAM,CAAC,MAAM,EACb,SAAS,IAAI,MAAM,CAAC,gBAAgB,CAAC,EACrC,MAAM,CAAC,kBAAkB,eAAe,EAAE,CAAC,EAC3C,8BAA8B,EAAE,IAAI,MAAM,CAAC,6BAA6B,CAAC,CAC1E;wBAED,oBAAC,sBAAsB,CAAC,QAAQ,IAAC,KAAK,EAAE,EAAE,QAAQ,EAAE,YAAY,EAAE;4BAChE,oBAAC,WAAW,IAAC,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,UAAU,EAAE,UAAU,EAAE,WAAW,EAAE,WAAW,GAAI,CACjE,CAC9B,CACP,EAEH,MAAM,EAAE,mBAAmB,IAAI,6BAAK,SAAS,EAAE,MAAM,CAAC,mBAAmB,CAAC,IAAG,UAAU,CAAO,EAC9F,sBAAsB,EAAE,IAAI,EAC5B,qBAAqB,EAAE,eAAe,KAAK,WAAW,EACtD,OAAO,EAAE,eAAe,KAAK,WAAW,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,eAAe,EACpE,cAAc,EAAE,YAAY,EAC5B,cAAc,EAAE,0BAA0B,EAC1C,WAAW,EAAE,SAAS,EACtB,YAAY,EAAE,eAAe,KAAK,WAAW,EAC7C,sBAAsB,EAAE,IAAI;oBAE5B,6BACE,SAAS,EAAE,IAAI,CACb,cAAc,IAAI,MAAM,CAAC,YAAY,CAAC,EACtC,SAAS,IAAI,MAAM,CAAC,OAAO,EAC3B,MAAM,CAAC,kBAAkB,eAAe,EAAE,CAAC,EAC3C,8BAA8B,EAAE,IAAI,MAAM,CAAC,6BAA6B,CAAC,CAC1E;wBAEA,CAAC,CAAC,cAAc,IAAI,CAAC,CAAC,UAAU,IAAI,CACnC,oBAAC,UAAU;4BACT,kCACG,cAAc,CAAC,EAAE,eAAe,EAAE,UAAU,EAAE,SAAS,EAAE,UAAU,GAAG,KAAK,CAAC,MAAM,GAAG,CAAC,EAAE,CAAC,CACrF,CACI,CACd,EACA,MAAM,aAAN,MAAM,cAAN,MAAM,GAAI,CACT,oBAAC,SAAS,IACR,KAAK,EAAE,KAAK,EACZ,cAAc,EAAE,cAAc,EAC9B,OAAO,EAAE,OAAO,EAChB,aAAa,EAAE,aAAa,EAC5B,OAAO,EAAE,OAAO,EAChB,cAAc,EAAE,cAAc,EAC9B,qBAAqB,EAAE,qBAAqB,EAC5C,eAAe,EAAE,eAAe,EAChC,iBAAiB,EAAE,iBAAiB,EACpC,OAAO,EAAE,WAAW,EACpB,SAAS,EAAE,UAAU,aAAV,UAAU,uBAAV,UAAU,CAAE,UAAU,EACjC,cAAc,EAAE,kBAAkB,IAAI,WAAW,CAAC,OAAO,CAAC,CAAC,CAAC,WAAW,CAAC,OAAO,CAAC,CAAC,CAAC,SAAS,EAC3F,mBAAmB,EAAE,mBAAmB,GACxC,CACH,CACG,CACqB,CACzB,CACiB,CACU,CACtC,CAAC;AACJ,CAAC,CAAwB,CAAC;AAE1B,eAAe,KAAK,CAAC;AAErB,MAAM,SAAS,GAAG,CAAK,EACrB,KAAK,EACL,cAAc,EACd,OAAO,EACP,aAAa,EACb,OAAO,EACP,cAAc,EACd,qBAAqB,EACrB,eAAe,EACf,iBAAiB,EACjB,OAAO,EACP,cAAc,EACd,SAAS,EACT,mBAAmB,GAapB,EAAE,EAAE;IACH,MAAM,UAAU,GAAG,CAAC,CAAC,aAAa,CAAC;IACnC,MAAM,kBAAkB,GAAG,UAAU,IAAI,mBAAmB,CAAC;IAC7D,MAAM,SAAS,GAAG,gBAAgB,EAAE,CAAC;IAErC,MAAM,EAAE,aAAa,EAAE,WAAW,EAAE,GAAG,qBAAqB,CAAC,aAAa,EAAE,KAAK,CAAC,MAAM,CAAC,CAAC;IAE1F,IAAI,yBAAyB,GAAG,cAAc,CAAC,QAAQ,IAAI,EAAE,CAAC;IAC9D,yBAAyB,GAAG,eAAe;QACzC,CAAC,CAAC,yBAAyB,CAAC,MAAM,CAC9B,CAAC,OAAwC,EAAE,EAAE,CAAC,OAAO,CAAC,EAAE,IAAI,eAAe,CAAC,OAAO,CAAC,OAAO,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CACvG;QACH,CAAC,CAAC,yBAAyB,CAAC;IAE9B,IAAI,QAAQ,GAAwB,SAAS,CAAC;IAC9C,IAAI,YAAY,GAA+B,SAAS,CAAC;IAEzD,IAAI,UAAU,EAAE;QACd,QAAQ,GAAG,OAAO,CAAC;QACnB,YAAY,GAAG,cAAc,CAAC;KAC/B;IAED,OAAO,CACL,0CACE,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,IAAI,EAAE,MAAM,CAAC,aAAa,OAAO,IAAI,CAAC,EAAE,CAAC,CAAC,EACjE,IAAI,EAAE,QAAQ,qBACG,cAAc,gBACnB,SAAS,IACjB,CAAC,YAAY,IAAI,YAAY,CAAC,IAAI,CAAC,GAEtC,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE,CAAC,CAC1B,0CACE,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,IAAI,EAAE;YAC3B,CAAC,MAAM,CAAC,iBAAiB,CAAC,CAAC,EAAE,UAAU;YACvC,CAAC,MAAM,CAAC,eAAe,CAAC,CAAC,EAAE,UAAU,IAAI,cAAc,CAAC,IAAI,CAAC;SAC9D,CAAC,EACF,GAAG,EAAE,UAAU,CAAC,OAAO,EAAE,IAAI,EAAE,KAAK,CAAC,EACrC,OAAO,EAAE,OAAO,IACZ,CAAC,YAAY,IAAI,YAAY,CAAC,IAAI,CAAC,IACvC,IAAI,EAAE,YAAY;QAElB,6BACE,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,YAAY,CAAC,EAAE,SAAS,IAAI,MAAM,CAAC,OAAO,CAAC,EAClE,OAAO,EACL,kBAAkB;gBAChB,CAAC,CAAC,KAAK,CAAC,EAAE;;oBACN,qBAAqB,CAAC,IAAI,CAAC,CAAC,QAAQ,EAAE,CAAC;oBACvC,qEAAqE;oBACrE,MAAA,KAAK,CAAC,aAAa,CAAC,aAAa,CAAC,OAAO,CAAC,0CAAE,KAAK,EAAE,CAAC;gBACtD,CAAC;gBACH,CAAC,CAAC,SAAS;YAGf,6BAAK,SAAS,EAAE,MAAM,CAAC,aAAa,CAAC;gBACnC,6BAAK,SAAS,EAAE,MAAM,CAAC,mBAAmB,CAAC,IACxC,cAAc,CAAC,MAAM,CAAC,CAAC,CAAC,cAAc,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,EAAE,CACrD;gBACL,UAAU,IAAI,CACb,6BAAK,SAAS,EAAE,MAAM,CAAC,mBAAmB,CAAC;oBACzC,oBAAC,gBAAgB,kBACf,WAAW,EAAE,aAAa,EAC1B,SAAS,EAAE,WAAW,EACtB,aAAa,EAAE,iBAAiB,IAC5B,qBAAqB,CAAC,IAAI,CAAC,EAC/B,CACE,CACP,CACG;YACL,yBAAyB,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,GAAG,GAAG,EAAE,MAAM,EAAE,OAAO,EAAE,EAAE,EAAE,EAAE,KAAK,EAAE,EAAE,CAAC,CAC9E,6BAAK,GAAG,EAAE,EAAE,IAAI,KAAK,EAAE,SAAS,EAAE,MAAM,CAAC,OAAO,EAAE,KAAK,EAAE,EAAE,KAAK,EAAE,GAAG,KAAK,GAAG,EAAE;gBAC5E,MAAM,CAAC,CAAC,CAAC,6BAAK,SAAS,EAAE,MAAM,CAAC,gBAAgB,CAAC,IAAG,MAAM,CAAO,CAAC,CAAC,CAAC,EAAE;gBACtE,OAAO,CAAC,CAAC,CAAC,6BAAK,SAAS,EAAE,MAAM,CAAC,iBAAiB,CAAC,IAAG,OAAO,CAAC,IAAI,CAAC,CAAO,CAAC,CAAC,CAAC,EAAE,CAC5E,CACP,CAAC,CACE,CACH,CACN,CAAC,CACC,CACN,CAAC;AACJ,CAAC,CAAC;AAEF,gBAAgB,CAAC,KAAK,EAAE,OAAO,CAAC,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport clsx from 'clsx';\nimport React, { FocusEventHandler, useCallback, useImperativeHandle, useRef } from 'react';\nimport { CardsForwardRefType, CardsProps } from './interfaces';\nimport styles from './styles.css.js';\nimport { getCardsPerRow } from './cards-layout-helper';\nimport { getBaseProps } from '../internal/base-component';\nimport ToolsHeader from '../table/tools-header';\nimport { getItemKey } from '../table/utils';\nimport {\n  SelectionControl,\n  SelectionControlProps,\n  focusMarkers,\n  useSelectionFocusMove,\n  useSelection,\n} from '../table/selection';\nimport { InternalContainerAsSubstep } from '../container/internal';\nimport InternalStatusIndicator from '../status-indicator/internal';\nimport { applyDisplayName } from '../internal/utils/apply-display-name';\nimport stickyScrolling from '../table/sticky-scrolling';\nimport useBaseComponent from '../internal/hooks/use-base-component';\nimport { useVisualRefresh } from '../internal/hooks/use-visual-mode';\nimport { useMergeRefs } from '../internal/hooks/use-merge-refs';\nimport LiveRegion from '../internal/components/live-region';\nimport useMouseDownTarget from '../internal/hooks/use-mouse-down-target';\nimport { useMobile } from '../internal/hooks/use-mobile';\nimport { supportsStickyPosition } from '../internal/utils/dom';\nimport { useInternalI18n } from '../i18n/context';\nimport { useContainerQuery } from '@cloudscape-design/component-toolkit';\nimport { AnalyticsFunnelSubStep } from '../internal/analytics/components/analytics-funnel';\nimport { CollectionLabelContext } from '../internal/context/collection-label-context';\nimport { LinkDefaultVariantContext } from '../internal/context/link-default-variant-context';\nimport { shouldRemoveHighContrastHeader } from '../internal/utils/content-header-utils';\n\nexport { CardsProps };\n\nconst Cards = React.forwardRef(function <T = any>(\n  {\n    items = [],\n    cardDefinition,\n    cardsPerRow = [],\n    header,\n    filter,\n    pagination,\n    preferences,\n    empty,\n    loading,\n    loadingText,\n    trackBy,\n    selectedItems,\n    selectionType,\n    isItemDisabled,\n    onSelectionChange,\n    ariaLabels,\n    visibleSections,\n    stickyHeader,\n    stickyHeaderVerticalOffset,\n    variant = 'container',\n    renderAriaLive,\n    firstIndex = 1,\n    totalItemsCount,\n    entireCardClickable,\n    ...rest\n  }: CardsProps<T>,\n  ref: React.Ref<CardsProps.Ref>\n) {\n  const { __internalRootRef } = useBaseComponent('Cards', {\n    props: { entireCardClickable, selectionType, stickyHeader, variant },\n  });\n  const baseProps = getBaseProps(rest);\n  const isRefresh = useVisualRefresh();\n  const isMobile = useMobile();\n\n  const computedVariant = isRefresh ? variant : 'container';\n\n  const headerIdRef = useRef<string | undefined>(undefined);\n  const setHeaderRef = useCallback((id: string) => {\n    headerIdRef.current = id;\n  }, []);\n  const isLabelledByHeader = !ariaLabels?.cardsLabel && !!header;\n\n  const [columns, measureRef] = useContainerQuery<number>(\n    ({ contentBoxWidth }) => getCardsPerRow(contentBoxWidth, cardsPerRow),\n    [cardsPerRow]\n  );\n  const refObject = useRef(null);\n  const mergedRef = useMergeRefs(measureRef, refObject, __internalRootRef);\n  const getMouseDownTarget = useMouseDownTarget();\n\n  const i18n = useInternalI18n('cards');\n  const { isItemSelected, getItemSelectionProps, updateShiftToggle } = useSelection({\n    items,\n    trackBy,\n    selectedItems,\n    selectionType,\n    isItemDisabled,\n    onSelectionChange,\n    ariaLabels: {\n      itemSelectionLabel: ariaLabels?.itemSelectionLabel,\n      selectionGroupLabel: i18n('ariaLabels.selectionGroupLabel', ariaLabels?.selectionGroupLabel),\n    },\n  });\n  const hasToolsHeader = header || filter || pagination || preferences;\n  const hasFooterPagination = isMobile && variant === 'full-page' && !!pagination;\n  const headerRef = useRef<HTMLDivElement>(null);\n\n  const { scrollToTop, scrollToItem } = stickyScrolling(refObject, headerRef);\n  stickyHeader = supportsStickyPosition() && !isMobile && stickyHeader;\n  const onCardFocus: FocusEventHandler<HTMLElement> = event => {\n    // When an element inside card receives focus we want to adjust the scroll.\n    // However, that behavior is unwanted when the focus is received as result of a click\n    // as it causes the click to never reach the target element.\n    if (stickyHeader && !event.currentTarget.contains(getMouseDownTarget())) {\n      scrollToItem(event.currentTarget);\n    }\n  };\n  useImperativeHandle(\n    ref,\n    () => ({\n      scrollToTop: () => {\n        if (stickyHeader) {\n          scrollToTop();\n        }\n      },\n    }),\n    [stickyHeader, scrollToTop]\n  );\n  let status;\n  if (loading) {\n    status = (\n      <div className={styles.loading}>\n        <InternalStatusIndicator type=\"loading\">\n          <LiveRegion visible={true}>{loadingText}</LiveRegion>\n        </InternalStatusIndicator>\n      </div>\n    );\n  } else if (empty && !items.length) {\n    status = <div className={styles.empty}>{empty}</div>;\n  }\n\n  return (\n    <LinkDefaultVariantContext.Provider value={{ defaultVariant: 'primary' }}>\n      <AnalyticsFunnelSubStep>\n        <div {...baseProps} className={clsx(baseProps.className, styles.root)} ref={mergedRef}>\n          <InternalContainerAsSubstep\n            header={\n              hasToolsHeader && (\n                <div\n                  className={clsx(\n                    styles.header,\n                    isRefresh && styles['header-refresh'],\n                    styles[`header-variant-${computedVariant}`],\n                    shouldRemoveHighContrastHeader() && styles['remove-high-contrast-header']\n                  )}\n                >\n                  <CollectionLabelContext.Provider value={{ assignId: setHeaderRef }}>\n                    <ToolsHeader header={header} filter={filter} pagination={pagination} preferences={preferences} />\n                  </CollectionLabelContext.Provider>\n                </div>\n              )\n            }\n            footer={hasFooterPagination && <div className={styles['footer-pagination']}>{pagination}</div>}\n            disableContentPaddings={true}\n            disableHeaderPaddings={computedVariant === 'full-page'}\n            variant={computedVariant === 'container' ? 'cards' : computedVariant}\n            __stickyHeader={stickyHeader}\n            __stickyOffset={stickyHeaderVerticalOffset}\n            __headerRef={headerRef}\n            __darkHeader={computedVariant === 'full-page'}\n            __disableFooterDivider={true}\n          >\n            <div\n              className={clsx(\n                hasToolsHeader && styles['has-header'],\n                isRefresh && styles.refresh,\n                styles[`header-variant-${computedVariant}`],\n                shouldRemoveHighContrastHeader() && styles['remove-high-contrast-header']\n              )}\n            >\n              {!!renderAriaLive && !!firstIndex && (\n                <LiveRegion>\n                  <span>\n                    {renderAriaLive({ totalItemsCount, firstIndex, lastIndex: firstIndex + items.length - 1 })}\n                  </span>\n                </LiveRegion>\n              )}\n              {status ?? (\n                <CardsList\n                  items={items}\n                  cardDefinition={cardDefinition}\n                  trackBy={trackBy}\n                  selectionType={selectionType}\n                  columns={columns}\n                  isItemSelected={isItemSelected}\n                  getItemSelectionProps={getItemSelectionProps}\n                  visibleSections={visibleSections}\n                  updateShiftToggle={updateShiftToggle}\n                  onFocus={onCardFocus}\n                  ariaLabel={ariaLabels?.cardsLabel}\n                  ariaLabelledby={isLabelledByHeader && headerIdRef.current ? headerIdRef.current : undefined}\n                  entireCardClickable={entireCardClickable}\n                />\n              )}\n            </div>\n          </InternalContainerAsSubstep>\n        </div>\n      </AnalyticsFunnelSubStep>\n    </LinkDefaultVariantContext.Provider>\n  );\n}) as CardsForwardRefType;\n\nexport default Cards;\n\nconst CardsList = <T,>({\n  items,\n  cardDefinition,\n  trackBy,\n  selectionType,\n  columns,\n  isItemSelected,\n  getItemSelectionProps,\n  visibleSections,\n  updateShiftToggle,\n  onFocus,\n  ariaLabelledby,\n  ariaLabel,\n  entireCardClickable,\n}: Pick<\n  CardsProps<T>,\n  'items' | 'cardDefinition' | 'trackBy' | 'selectionType' | 'visibleSections' | 'entireCardClickable'\n> & {\n  columns: number | null;\n  isItemSelected: (item: T) => boolean;\n  getItemSelectionProps: (item: T) => SelectionControlProps;\n  updateShiftToggle: (state: boolean) => void;\n  onFocus: FocusEventHandler<HTMLElement>;\n  ariaLabel?: string;\n  ariaLabelledby?: string;\n  ariaDescribedby?: string;\n}) => {\n  const selectable = !!selectionType;\n  const canClickEntireCard = selectable && entireCardClickable;\n  const isRefresh = useVisualRefresh();\n\n  const { moveFocusDown, moveFocusUp } = useSelectionFocusMove(selectionType, items.length);\n\n  let visibleSectionsDefinition = cardDefinition.sections || [];\n  visibleSectionsDefinition = visibleSections\n    ? visibleSectionsDefinition.filter(\n        (section: CardsProps.SectionDefinition<T>) => section.id && visibleSections.indexOf(section.id) !== -1\n      )\n    : visibleSectionsDefinition;\n\n  let listRole: 'group' | undefined = undefined;\n  let listItemRole: 'presentation' | undefined = undefined;\n\n  if (selectable) {\n    listRole = 'group';\n    listItemRole = 'presentation';\n  }\n\n  return (\n    <ol\n      className={clsx(styles.list, styles[`list-grid-${columns || 1}`])}\n      role={listRole}\n      aria-labelledby={ariaLabelledby}\n      aria-label={ariaLabel}\n      {...(focusMarkers && focusMarkers.root)}\n    >\n      {items.map((item, index) => (\n        <li\n          className={clsx(styles.card, {\n            [styles['card-selectable']]: selectable,\n            [styles['card-selected']]: selectable && isItemSelected(item),\n          })}\n          key={getItemKey(trackBy, item, index)}\n          onFocus={onFocus}\n          {...(focusMarkers && focusMarkers.item)}\n          role={listItemRole}\n        >\n          <div\n            className={clsx(styles['card-inner'], isRefresh && styles.refresh)}\n            onClick={\n              canClickEntireCard\n                ? event => {\n                    getItemSelectionProps(item).onChange();\n                    // Manually move focus to the native input (checkbox or radio button)\n                    event.currentTarget.querySelector('input')?.focus();\n                  }\n                : undefined\n            }\n          >\n            <div className={styles['card-header']}>\n              <div className={styles['card-header-inner']}>\n                {cardDefinition.header ? cardDefinition.header(item) : ''}\n              </div>\n              {selectable && (\n                <div className={styles['selection-control']}>\n                  <SelectionControl\n                    onFocusDown={moveFocusDown}\n                    onFocusUp={moveFocusUp}\n                    onShiftToggle={updateShiftToggle}\n                    {...getItemSelectionProps(item)}\n                  />\n                </div>\n              )}\n            </div>\n            {visibleSectionsDefinition.map(({ width = 100, header, content, id }, index) => (\n              <div key={id || index} className={styles.section} style={{ width: `${width}%` }}>\n                {header ? <div className={styles['section-header']}>{header}</div> : ''}\n                {content ? <div className={styles['section-content']}>{content(item)}</div> : ''}\n              </div>\n            ))}\n          </div>\n        </li>\n      ))}\n    </ol>\n  );\n};\n\napplyDisplayName(Cards, 'Cards');\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/cards/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 clsx from 'clsx';\nimport React, { FocusEventHandler, useCallback, useImperativeHandle, useRef } from 'react';\nimport { CardsForwardRefType, CardsProps } from './interfaces';\nimport styles from './styles.css.js';\nimport { getCardsPerRow } from './cards-layout-helper';\nimport { getBaseProps } from '../internal/base-component';\nimport ToolsHeader from '../table/tools-header';\nimport { getItemKey } from '../table/utils';\nimport {\n  SelectionControl,\n  SelectionControlProps,\n  focusMarkers,\n  useSelectionFocusMove,\n  useSelection,\n} from '../table/selection';\nimport { InternalContainerAsSubstep } from '../container/internal';\nimport InternalStatusIndicator from '../status-indicator/internal';\nimport { applyDisplayName } from '../internal/utils/apply-display-name';\nimport stickyScrolling from '../table/sticky-scrolling';\nimport useBaseComponent from '../internal/hooks/use-base-component';\nimport { useVisualRefresh } from '../internal/hooks/use-visual-mode';\nimport { useMergeRefs } from '../internal/hooks/use-merge-refs';\nimport LiveRegion from '../internal/components/live-region';\nimport useMouseDownTarget from '../internal/hooks/use-mouse-down-target';\nimport { useMobile } from '../internal/hooks/use-mobile';\nimport { supportsStickyPosition } from '../internal/utils/dom';\nimport { useInternalI18n } from '../i18n/context';\nimport { useContainerQuery } from '@cloudscape-design/component-toolkit';\nimport { AnalyticsFunnelSubStep } from '../internal/analytics/components/analytics-funnel';\nimport { CollectionLabelContext } from '../internal/context/collection-label-context';\nimport { LinkDefaultVariantContext } from '../internal/context/link-default-variant-context';\nimport { shouldRemoveHighContrastHeader } from '../internal/utils/content-header-utils';\n\nexport { CardsProps };\n\nconst Cards = React.forwardRef(function <T = any>(\n  {\n    items = [],\n    cardDefinition,\n    cardsPerRow = [],\n    header,\n    filter,\n    pagination,\n    preferences,\n    empty,\n    loading,\n    loadingText,\n    trackBy,\n    selectedItems,\n    selectionType,\n    isItemDisabled,\n    onSelectionChange,\n    ariaLabels,\n    visibleSections,\n    stickyHeader,\n    stickyHeaderVerticalOffset,\n    variant = 'container',\n    renderAriaLive,\n    firstIndex = 1,\n    totalItemsCount,\n    entireCardClickable,\n    ...rest\n  }: CardsProps<T>,\n  ref: React.Ref<CardsProps.Ref>\n) {\n  const { __internalRootRef } = useBaseComponent('Cards', {\n    props: { entireCardClickable, selectionType, stickyHeader, variant },\n  });\n  const baseProps = getBaseProps(rest);\n  const isRefresh = useVisualRefresh();\n  const isMobile = useMobile();\n\n  const computedVariant = isRefresh ? variant : 'container';\n\n  const headerIdRef = useRef<string | undefined>(undefined);\n  const setHeaderRef = useCallback((id: string) => {\n    headerIdRef.current = id;\n  }, []);\n  const isLabelledByHeader = !ariaLabels?.cardsLabel && !!header;\n\n  const [columns, measureRef] = useContainerQuery<number>(\n    ({ contentBoxWidth }) => getCardsPerRow(contentBoxWidth, cardsPerRow),\n    [cardsPerRow]\n  );\n  const refObject = useRef(null);\n  const mergedRef = useMergeRefs(measureRef, refObject, __internalRootRef);\n  const getMouseDownTarget = useMouseDownTarget();\n\n  const i18n = useInternalI18n('cards');\n  const { isItemSelected, getItemSelectionProps } = useSelection({\n    items,\n    trackBy,\n    selectedItems,\n    selectionType,\n    isItemDisabled,\n    onSelectionChange,\n    ariaLabels: {\n      itemSelectionLabel: ariaLabels?.itemSelectionLabel,\n      selectionGroupLabel: i18n('ariaLabels.selectionGroupLabel', ariaLabels?.selectionGroupLabel),\n    },\n  });\n  const hasToolsHeader = header || filter || pagination || preferences;\n  const hasFooterPagination = isMobile && variant === 'full-page' && !!pagination;\n  const headerRef = useRef<HTMLDivElement>(null);\n\n  const { scrollToTop, scrollToItem } = stickyScrolling(refObject, headerRef);\n  stickyHeader = supportsStickyPosition() && !isMobile && stickyHeader;\n  const onCardFocus: FocusEventHandler<HTMLElement> = event => {\n    // When an element inside card receives focus we want to adjust the scroll.\n    // However, that behavior is unwanted when the focus is received as result of a click\n    // as it causes the click to never reach the target element.\n    if (stickyHeader && !event.currentTarget.contains(getMouseDownTarget())) {\n      scrollToItem(event.currentTarget);\n    }\n  };\n  useImperativeHandle(\n    ref,\n    () => ({\n      scrollToTop: () => {\n        if (stickyHeader) {\n          scrollToTop();\n        }\n      },\n    }),\n    [stickyHeader, scrollToTop]\n  );\n  let status;\n  if (loading) {\n    status = (\n      <div className={styles.loading}>\n        <InternalStatusIndicator type=\"loading\">\n          <LiveRegion visible={true}>{loadingText}</LiveRegion>\n        </InternalStatusIndicator>\n      </div>\n    );\n  } else if (empty && !items.length) {\n    status = <div className={styles.empty}>{empty}</div>;\n  }\n\n  return (\n    <LinkDefaultVariantContext.Provider value={{ defaultVariant: 'primary' }}>\n      <AnalyticsFunnelSubStep>\n        <div {...baseProps} className={clsx(baseProps.className, styles.root)} ref={mergedRef}>\n          <InternalContainerAsSubstep\n            header={\n              hasToolsHeader && (\n                <div\n                  className={clsx(\n                    styles.header,\n                    isRefresh && styles['header-refresh'],\n                    styles[`header-variant-${computedVariant}`],\n                    shouldRemoveHighContrastHeader() && styles['remove-high-contrast-header']\n                  )}\n                >\n                  <CollectionLabelContext.Provider value={{ assignId: setHeaderRef }}>\n                    <ToolsHeader header={header} filter={filter} pagination={pagination} preferences={preferences} />\n                  </CollectionLabelContext.Provider>\n                </div>\n              )\n            }\n            footer={hasFooterPagination && <div className={styles['footer-pagination']}>{pagination}</div>}\n            disableContentPaddings={true}\n            disableHeaderPaddings={computedVariant === 'full-page'}\n            variant={computedVariant === 'container' ? 'cards' : computedVariant}\n            __stickyHeader={stickyHeader}\n            __stickyOffset={stickyHeaderVerticalOffset}\n            __headerRef={headerRef}\n            __darkHeader={computedVariant === 'full-page'}\n            __disableFooterDivider={true}\n          >\n            <div\n              className={clsx(\n                hasToolsHeader && styles['has-header'],\n                isRefresh && styles.refresh,\n                styles[`header-variant-${computedVariant}`],\n                shouldRemoveHighContrastHeader() && styles['remove-high-contrast-header']\n              )}\n            >\n              {!!renderAriaLive && !!firstIndex && (\n                <LiveRegion>\n                  <span>\n                    {renderAriaLive({ totalItemsCount, firstIndex, lastIndex: firstIndex + items.length - 1 })}\n                  </span>\n                </LiveRegion>\n              )}\n              {status ?? (\n                <CardsList\n                  items={items}\n                  cardDefinition={cardDefinition}\n                  trackBy={trackBy}\n                  selectionType={selectionType}\n                  columns={columns}\n                  isItemSelected={isItemSelected}\n                  getItemSelectionProps={getItemSelectionProps}\n                  visibleSections={visibleSections}\n                  onFocus={onCardFocus}\n                  ariaLabel={ariaLabels?.cardsLabel}\n                  ariaLabelledby={isLabelledByHeader && headerIdRef.current ? headerIdRef.current : undefined}\n                  entireCardClickable={entireCardClickable}\n                />\n              )}\n            </div>\n          </InternalContainerAsSubstep>\n        </div>\n      </AnalyticsFunnelSubStep>\n    </LinkDefaultVariantContext.Provider>\n  );\n}) as CardsForwardRefType;\n\nexport default Cards;\n\nconst CardsList = <T,>({\n  items,\n  cardDefinition,\n  trackBy,\n  selectionType,\n  columns,\n  isItemSelected,\n  getItemSelectionProps,\n  visibleSections,\n  onFocus,\n  ariaLabelledby,\n  ariaLabel,\n  entireCardClickable,\n}: Pick<\n  CardsProps<T>,\n  'items' | 'cardDefinition' | 'trackBy' | 'selectionType' | 'visibleSections' | 'entireCardClickable'\n> & {\n  columns: number | null;\n  isItemSelected: (item: T) => boolean;\n  getItemSelectionProps?: (item: T) => SelectionControlProps;\n  onFocus: FocusEventHandler<HTMLElement>;\n  ariaLabel?: string;\n  ariaLabelledby?: string;\n  ariaDescribedby?: string;\n}) => {\n  const selectable = !!selectionType;\n  const canClickEntireCard = selectable && entireCardClickable;\n  const isRefresh = useVisualRefresh();\n\n  const { moveFocusDown, moveFocusUp } = useSelectionFocusMove(selectionType, items.length);\n\n  let visibleSectionsDefinition = cardDefinition.sections || [];\n  visibleSectionsDefinition = visibleSections\n    ? visibleSectionsDefinition.filter(\n        (section: CardsProps.SectionDefinition<T>) => section.id && visibleSections.indexOf(section.id) !== -1\n      )\n    : visibleSectionsDefinition;\n\n  let listRole: 'group' | undefined = undefined;\n  let listItemRole: 'presentation' | undefined = undefined;\n\n  if (selectable) {\n    listRole = 'group';\n    listItemRole = 'presentation';\n  }\n\n  return (\n    <ol\n      className={clsx(styles.list, styles[`list-grid-${columns || 1}`])}\n      role={listRole}\n      aria-labelledby={ariaLabelledby}\n      aria-label={ariaLabel}\n      {...(focusMarkers && focusMarkers.root)}\n    >\n      {items.map((item, index) => (\n        <li\n          className={clsx(styles.card, {\n            [styles['card-selectable']]: selectable,\n            [styles['card-selected']]: selectable && isItemSelected(item),\n          })}\n          key={getItemKey(trackBy, item, index)}\n          onFocus={onFocus}\n          {...(focusMarkers && focusMarkers.item)}\n          role={listItemRole}\n        >\n          <div\n            className={clsx(styles['card-inner'], isRefresh && styles.refresh)}\n            onClick={\n              canClickEntireCard\n                ? event => {\n                    getItemSelectionProps?.(item).onChange();\n                    // Manually move focus to the native input (checkbox or radio button)\n                    event.currentTarget.querySelector('input')?.focus();\n                  }\n                : undefined\n            }\n          >\n            <div className={styles['card-header']}>\n              <div className={styles['card-header-inner']}>\n                {cardDefinition.header ? cardDefinition.header(item) : ''}\n              </div>\n              {getItemSelectionProps && (\n                <div className={styles['selection-control']}>\n                  <SelectionControl\n                    onFocusDown={moveFocusDown}\n                    onFocusUp={moveFocusUp}\n                    {...getItemSelectionProps(item)}\n                  />\n                </div>\n              )}\n            </div>\n            {visibleSectionsDefinition.map(({ width = 100, header, content, id }, index) => (\n              <div key={id || index} className={styles.section} style={{ width: `${width}%` }}>\n                {header ? <div className={styles['section-header']}>{header}</div> : ''}\n                {content ? <div className={styles['section-content']}>{content(item)}</div> : ''}\n              </div>\n            ))}\n          </div>\n        </li>\n      ))}\n    </ol>\n  );\n};\n\napplyDisplayName(Cards, 'Cards');\n"]}

package/cards/interfaces.d.ts

@@ -177,8 +177,8 @@ export interface CardsProps<T = any> extends BaseComponentProps {
      * Use this function to announce page changes to screen reader users.
      * The function argument takes the following properties:
      * * `firstIndex` (number) - The provided `firstIndex` property which defaults to 1 when not defined.
-     * * `totalItemsCount` (optional, number) - The provided `totalItemsCount` property.
      * * `lastIndex` (number) - The index of the last visible item of the table.
+     * * `totalItemsCount` (optional, number) - The provided `totalItemsCount` property.
      */
     renderAriaLive?: (data: CardsProps.LiveAnnouncement) => string;
     /**

package/cards/interfaces.js.map

@@ -1 +1 @@
-{"version":3,"file":"interfaces.js","sourceRoot":"","sources":["../../../src/cards/interfaces.tsx"],"names":[],"mappings":"","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React from 'react';\nimport { BaseComponentProps } from '../internal/base-component';\nimport { NonCancelableEventHandler } from '../internal/events';\n\n/*\n * HACK: Cast the component to a named parametrized interface.\n *\n * This lets us use React.forwardRef and still let the component have type\n * parameters, and the naming convention lets the documenter know that this is\n * a forwardRef-wrapped component.\n *\n * We don't need to expose this type to customers because it's just a simple\n * function type.\n */\nexport interface CardsForwardRefType {\n  <T>(props: CardsProps<T> & { ref?: React.Ref<CardsProps.Ref> }): JSX.Element;\n}\n\nexport interface CardsProps<T = any> extends BaseComponentProps {\n  /**\n   * Displayed only when the list of items is empty.\n   */\n  empty?: React.ReactNode;\n\n  /**\n   * Heading element of the table container. Use the [header component](/components/header/).\n   */\n  header?: React.ReactNode;\n\n  /**\n   * Use this slot to add filtering controls to the component.\n   */\n  filter?: React.ReactNode;\n\n  /**\n   * Use this slot to add the [pagination component](/components/pagination/) to the component.\n   */\n  pagination?: React.ReactNode;\n\n  /**\n   * Use this slot to add [collection preferences](/components/collection-preferences/) to the component.\n   */\n  preferences?: React.ReactNode;\n\n  /**\n   * Specifies the items that serve as data source for a card.\n   *\n   * The `cardDefinition` property handles the display of this data.\n   */\n  items: ReadonlyArray<T>;\n\n  /**\n   * Renders the cards in a loading state. We recommend that you also set a `loadingText`.\n   */\n  loading?: boolean;\n\n  /**\n   * Specifies the text to display when in loading state.\n   */\n  loadingText?: string;\n\n  /**\n   *  Defines what to display in each card. It has the following properties:\n   *  * `header` ((item) => ReactNode) - Responsible for displaying the card header. You receive the current item as an argument.\n   *      Use `fontSize=\"inherit\"` on [link](/components/link/) components inside card header.\n   *  * `sections` (array) - Responsible for displaying the card content. Cards can have many sections in their\n   *    body. Each entry in the array is responsible for displaying a section. An entry has the following properties:\n   *    * `id`: (string) - A unique identifier for the section. The property is used as a [keys](https://reactjs.org/docs/lists-and-keys.html#keys)\n   *   source for React rendering, and to match entries in the `visibleSections` property (if it's defined).\n   *    * `header`: (ReactNode) - Responsible for displaying the section header.\n   *    * `content`: ((item) => ReactNode) - Responsible for displaying the section content. You receive the current item as an argument.\n   *    * `width`: (number) - Specifies the width of the card section in percent. Use this to display multiple sections in\n   *    the same row. The default value is 100%.\n   *\n   *  All of the above properties are optional.\n   */\n  cardDefinition: CardsProps.CardDefinition<T>;\n  /**\n   * Determines the number of cards per row for any interval of container width.\n   * It's an array whose entries are objects containing the following:\n   * - `cards` (number) - Specifies the number of cards per row.\n   * - `minWidth` (number) - Specifies the minimum container width (in pixels) for which this configuration object should apply.\n   *\n   * For example, with this configuration:\n   * ```\n   * [{\n   *   cards: 1\n   * }, {\n   *   minWidth: 500,\n   *   cards: 2\n   * }, {\n   *   minWidth: 800,\n   *   cards: 3\n   * }]\n   * ```\n   *\n   * the cards component displays:\n   * * 1 card per row when the container width is below 500px.\n   * * 2 cards per row when the container width is between 500px and 799px.\n   * * 3 cards per row when the container width is 800px or wider.\n   *\n   * The number of cards per row can't be greater than 20.\n   *\n   * Default value:\n   * ```\n   * [{\n   *   cards: 1\n   * }, {\n   *   minWidth: 768,\n   *   cards: 2\n   * }, {\n   *   minWidth: 992,\n   *   cards: 3\n   * }, {\n   *   minWidth: 1200,\n   *   cards: 4\n   * }, {\n   *   minWidth: 1400,\n   *   cards: 5\n   * }, {\n   *   minWidth: 1920,\n   *   cards: 6\n   * }]\n   * ```\n   */\n  cardsPerRow?: ReadonlyArray<CardsProps.CardsLayout>;\n  /**\n   * Specifies the property inside items that uniquely identifies them.\n   * When it's set, it's used to provide [keys for React](https://reactjs.org/docs/lists-and-keys.html#keys)\n   * for performance optimizations.\n   *\n   * It's also used for connecting `items` and `selectedItems` values when they don't reference the same object.\n   */\n  trackBy?: CardsProps.TrackBy<T>;\n  /**\n   * Specifies the selection mode. It can be either `single` or `multi`.\n   */\n  selectionType?: CardsProps.SelectionType;\n  /**\n   * Specifies the list of selected items.\n   */\n  selectedItems?: ReadonlyArray<T>;\n  /**\n   * Determines which items are disabled. If an item is disabled, users can't select it.\n   */\n  isItemDisabled?: CardsProps.IsItemDisabled<T>;\n  /**\n   * Adds labels to the selection components (checkboxes and radio buttons) as follows:\n   * * `itemSelectionLabel` ((SelectionState, Item) => string) - Determines the label for an item.\n   * * `selectionGroupLabel` (string) - Specifies the label for the group selection control.\n   * * `cardsLabel` (string) - Provides alternative text for the cards list.\n   *                            By default the contents of the `header` are used.\n   *\n   * You can use the first arguments of type `SelectionState` to access the current selection\n   * state of the component (for example, the `selectedItems` list). The label function for individual\n   * items also receives the corresponding  `Item` object. You can use the group label to\n   * add a meaningful description to the whole selection.\n   * @i18n\n   */\n  ariaLabels?: CardsProps.AriaLabels<T>;\n  /**\n   * Specifies an array containing the `id` of each visible section. If not set, all sections are displayed.\n   *\n   * Use it in conjunction with the visible content preference of the [collection preferences](/components/collection-preferences/) component.\n   *\n   * The order of `id`s doesn't influence the order of display of sections, which is controlled by the `cardDefinition` property.\n   */\n  visibleSections?: ReadonlyArray<string>;\n  /**\n   * Called when a user interaction causes a change in the list of selected items.\n   * The event `detail` contains the current list of `selectedItems`.\n   */\n  onSelectionChange?: NonCancelableEventHandler<CardsProps.SelectionChangeDetail<T>>;\n  /**\n   * If set to true, the cards header remains visible when the user scrolls down.\n   */\n  stickyHeader?: boolean;\n  /**\n   * Optionally provide a vertical offset (in pixels) for the sticky header, for example if you\n   * need to position the sticky header below other fixed position elements on the page.\n   */\n  stickyHeaderVerticalOffset?: number;\n\n  /**\n   * Use this property to inform screen readers how many cards there are.\n   * It specifies the total number of cards.\n   * If there is an unknown total number of cards, leave this property undefined.\n   */\n  totalItemsCount?: number;\n  /**\n   *  Use this property to inform screen readers which range of cards is currently displayed.\n   *  It specifies the index (1-based) of the first card.\n   */\n  firstIndex?: number;\n  /**\n   * Use this function to announce page changes to screen reader users.\n   * The function argument takes the following properties:\n   * * `firstIndex` (number) - The provided `firstIndex` property which defaults to 1 when not defined.\n   * * `totalItemsCount` (optional, number) - The provided `totalItemsCount` property.\n   * * `lastIndex` (number) - The index of the last visible item of the table.\n   */\n  renderAriaLive?: (data: CardsProps.LiveAnnouncement) => string;\n\n  /**\n   * Specify a cards variant with one of the following:\n   * * `container` - Use this variant to have the cards displayed as a container.\n   * * `full-page` – Use this variant when cards are the entire content of a page. Full page variants\n   *                 implement the high contrast header and content behavior automatically.\n   * @visualrefresh `full-page` variant\n   */\n  variant?: 'container' | 'full-page';\n\n  /**\n   * Activating this property makes the entire card clickable to select it.\n   * Don't use this property if the card has any other interactive elements.\n   */\n  entireCardClickable?: boolean;\n}\n\nexport namespace CardsProps {\n  export interface CardDefinition<T> {\n    header?(item: T): React.ReactNode;\n    sections?: ReadonlyArray<SectionDefinition<T>>;\n  }\n\n  export interface SectionDefinition<T> {\n    id?: string;\n    header?: React.ReactNode;\n    content?(item: T): React.ReactNode;\n    width?: number;\n  }\n\n  export interface CardsLayout {\n    cards: number;\n    minWidth?: number;\n  }\n\n  export type TrackBy<T> = string | ((item: T) => string);\n\n  export type SelectionType = 'single' | 'multi';\n\n  export interface SelectionState<T> {\n    selectedItems: ReadonlyArray<T>;\n  }\n\n  export interface SelectionChangeDetail<T> {\n    selectedItems: T[];\n  }\n\n  export type IsItemDisabled<T> = (item: T) => boolean;\n\n  export interface AriaLabels<T> {\n    itemSelectionLabel: (data: CardsProps.SelectionState<T>, row: T) => string;\n    selectionGroupLabel: string;\n    cardsLabel?: string;\n  }\n\n  export interface LiveAnnouncement {\n    firstIndex: number;\n    lastIndex: number;\n    totalItemsCount?: number;\n  }\n\n  export interface Ref {\n    /**\n     * When the sticky header is enabled, calling this function scrolls cards's\n     * scroll parent up to reveal the first card or row of cards.\n     */\n    scrollToTop(): void;\n  }\n}\n"]}
+{"version":3,"file":"interfaces.js","sourceRoot":"","sources":["../../../src/cards/interfaces.tsx"],"names":[],"mappings":"","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React from 'react';\nimport { BaseComponentProps } from '../internal/base-component';\nimport { NonCancelableEventHandler } from '../internal/events';\n\n/*\n * HACK: Cast the component to a named parametrized interface.\n *\n * This lets us use React.forwardRef and still let the component have type\n * parameters, and the naming convention lets the documenter know that this is\n * a forwardRef-wrapped component.\n *\n * We don't need to expose this type to customers because it's just a simple\n * function type.\n */\nexport interface CardsForwardRefType {\n  <T>(props: CardsProps<T> & { ref?: React.Ref<CardsProps.Ref> }): JSX.Element;\n}\n\nexport interface CardsProps<T = any> extends BaseComponentProps {\n  /**\n   * Displayed only when the list of items is empty.\n   */\n  empty?: React.ReactNode;\n\n  /**\n   * Heading element of the table container. Use the [header component](/components/header/).\n   */\n  header?: React.ReactNode;\n\n  /**\n   * Use this slot to add filtering controls to the component.\n   */\n  filter?: React.ReactNode;\n\n  /**\n   * Use this slot to add the [pagination component](/components/pagination/) to the component.\n   */\n  pagination?: React.ReactNode;\n\n  /**\n   * Use this slot to add [collection preferences](/components/collection-preferences/) to the component.\n   */\n  preferences?: React.ReactNode;\n\n  /**\n   * Specifies the items that serve as data source for a card.\n   *\n   * The `cardDefinition` property handles the display of this data.\n   */\n  items: ReadonlyArray<T>;\n\n  /**\n   * Renders the cards in a loading state. We recommend that you also set a `loadingText`.\n   */\n  loading?: boolean;\n\n  /**\n   * Specifies the text to display when in loading state.\n   */\n  loadingText?: string;\n\n  /**\n   *  Defines what to display in each card. It has the following properties:\n   *  * `header` ((item) => ReactNode) - Responsible for displaying the card header. You receive the current item as an argument.\n   *      Use `fontSize=\"inherit\"` on [link](/components/link/) components inside card header.\n   *  * `sections` (array) - Responsible for displaying the card content. Cards can have many sections in their\n   *    body. Each entry in the array is responsible for displaying a section. An entry has the following properties:\n   *    * `id`: (string) - A unique identifier for the section. The property is used as a [keys](https://reactjs.org/docs/lists-and-keys.html#keys)\n   *   source for React rendering, and to match entries in the `visibleSections` property (if it's defined).\n   *    * `header`: (ReactNode) - Responsible for displaying the section header.\n   *    * `content`: ((item) => ReactNode) - Responsible for displaying the section content. You receive the current item as an argument.\n   *    * `width`: (number) - Specifies the width of the card section in percent. Use this to display multiple sections in\n   *    the same row. The default value is 100%.\n   *\n   *  All of the above properties are optional.\n   */\n  cardDefinition: CardsProps.CardDefinition<T>;\n  /**\n   * Determines the number of cards per row for any interval of container width.\n   * It's an array whose entries are objects containing the following:\n   * - `cards` (number) - Specifies the number of cards per row.\n   * - `minWidth` (number) - Specifies the minimum container width (in pixels) for which this configuration object should apply.\n   *\n   * For example, with this configuration:\n   * ```\n   * [{\n   *   cards: 1\n   * }, {\n   *   minWidth: 500,\n   *   cards: 2\n   * }, {\n   *   minWidth: 800,\n   *   cards: 3\n   * }]\n   * ```\n   *\n   * the cards component displays:\n   * * 1 card per row when the container width is below 500px.\n   * * 2 cards per row when the container width is between 500px and 799px.\n   * * 3 cards per row when the container width is 800px or wider.\n   *\n   * The number of cards per row can't be greater than 20.\n   *\n   * Default value:\n   * ```\n   * [{\n   *   cards: 1\n   * }, {\n   *   minWidth: 768,\n   *   cards: 2\n   * }, {\n   *   minWidth: 992,\n   *   cards: 3\n   * }, {\n   *   minWidth: 1200,\n   *   cards: 4\n   * }, {\n   *   minWidth: 1400,\n   *   cards: 5\n   * }, {\n   *   minWidth: 1920,\n   *   cards: 6\n   * }]\n   * ```\n   */\n  cardsPerRow?: ReadonlyArray<CardsProps.CardsLayout>;\n  /**\n   * Specifies the property inside items that uniquely identifies them.\n   * When it's set, it's used to provide [keys for React](https://reactjs.org/docs/lists-and-keys.html#keys)\n   * for performance optimizations.\n   *\n   * It's also used for connecting `items` and `selectedItems` values when they don't reference the same object.\n   */\n  trackBy?: CardsProps.TrackBy<T>;\n  /**\n   * Specifies the selection mode. It can be either `single` or `multi`.\n   */\n  selectionType?: CardsProps.SelectionType;\n  /**\n   * Specifies the list of selected items.\n   */\n  selectedItems?: ReadonlyArray<T>;\n  /**\n   * Determines which items are disabled. If an item is disabled, users can't select it.\n   */\n  isItemDisabled?: CardsProps.IsItemDisabled<T>;\n  /**\n   * Adds labels to the selection components (checkboxes and radio buttons) as follows:\n   * * `itemSelectionLabel` ((SelectionState, Item) => string) - Determines the label for an item.\n   * * `selectionGroupLabel` (string) - Specifies the label for the group selection control.\n   * * `cardsLabel` (string) - Provides alternative text for the cards list.\n   *                            By default the contents of the `header` are used.\n   *\n   * You can use the first arguments of type `SelectionState` to access the current selection\n   * state of the component (for example, the `selectedItems` list). The label function for individual\n   * items also receives the corresponding  `Item` object. You can use the group label to\n   * add a meaningful description to the whole selection.\n   * @i18n\n   */\n  ariaLabels?: CardsProps.AriaLabels<T>;\n  /**\n   * Specifies an array containing the `id` of each visible section. If not set, all sections are displayed.\n   *\n   * Use it in conjunction with the visible content preference of the [collection preferences](/components/collection-preferences/) component.\n   *\n   * The order of `id`s doesn't influence the order of display of sections, which is controlled by the `cardDefinition` property.\n   */\n  visibleSections?: ReadonlyArray<string>;\n  /**\n   * Called when a user interaction causes a change in the list of selected items.\n   * The event `detail` contains the current list of `selectedItems`.\n   */\n  onSelectionChange?: NonCancelableEventHandler<CardsProps.SelectionChangeDetail<T>>;\n  /**\n   * If set to true, the cards header remains visible when the user scrolls down.\n   */\n  stickyHeader?: boolean;\n  /**\n   * Optionally provide a vertical offset (in pixels) for the sticky header, for example if you\n   * need to position the sticky header below other fixed position elements on the page.\n   */\n  stickyHeaderVerticalOffset?: number;\n\n  /**\n   * Use this property to inform screen readers how many cards there are.\n   * It specifies the total number of cards.\n   * If there is an unknown total number of cards, leave this property undefined.\n   */\n  totalItemsCount?: number;\n  /**\n   *  Use this property to inform screen readers which range of cards is currently displayed.\n   *  It specifies the index (1-based) of the first card.\n   */\n  firstIndex?: number;\n  /**\n   * Use this function to announce page changes to screen reader users.\n   * The function argument takes the following properties:\n   * * `firstIndex` (number) - The provided `firstIndex` property which defaults to 1 when not defined.\n   * * `lastIndex` (number) - The index of the last visible item of the table.\n   * * `totalItemsCount` (optional, number) - The provided `totalItemsCount` property.\n   */\n  renderAriaLive?: (data: CardsProps.LiveAnnouncement) => string;\n\n  /**\n   * Specify a cards variant with one of the following:\n   * * `container` - Use this variant to have the cards displayed as a container.\n   * * `full-page` – Use this variant when cards are the entire content of a page. Full page variants\n   *                 implement the high contrast header and content behavior automatically.\n   * @visualrefresh `full-page` variant\n   */\n  variant?: 'container' | 'full-page';\n\n  /**\n   * Activating this property makes the entire card clickable to select it.\n   * Don't use this property if the card has any other interactive elements.\n   */\n  entireCardClickable?: boolean;\n}\n\nexport namespace CardsProps {\n  export interface CardDefinition<T> {\n    header?(item: T): React.ReactNode;\n    sections?: ReadonlyArray<SectionDefinition<T>>;\n  }\n\n  export interface SectionDefinition<T> {\n    id?: string;\n    header?: React.ReactNode;\n    content?(item: T): React.ReactNode;\n    width?: number;\n  }\n\n  export interface CardsLayout {\n    cards: number;\n    minWidth?: number;\n  }\n\n  export type TrackBy<T> = string | ((item: T) => string);\n\n  export type SelectionType = 'single' | 'multi';\n\n  export interface SelectionState<T> {\n    selectedItems: ReadonlyArray<T>;\n  }\n\n  export interface SelectionChangeDetail<T> {\n    selectedItems: T[];\n  }\n\n  export type IsItemDisabled<T> = (item: T) => boolean;\n\n  export interface AriaLabels<T> {\n    itemSelectionLabel: (data: CardsProps.SelectionState<T>, row: T) => string;\n    selectionGroupLabel: string;\n    cardsLabel?: string;\n  }\n\n  export interface LiveAnnouncement {\n    firstIndex: number;\n    lastIndex: number;\n    totalItemsCount?: number;\n  }\n\n  export interface Ref {\n    /**\n     * When the sticky header is enabled, calling this function scrolls cards's\n     * scroll parent up to reveal the first card or row of cards.\n     */\n    scrollToTop(): void;\n  }\n}\n"]}

package/copy-to-clipboard/index.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
 import { CopyToClipboardProps } from './interfaces';
 export { CopyToClipboardProps };
-export default function CopyToClipboard({ variant, copyButtonAriaLabel, copyButtonText, copySuccessText, copyErrorText, textToCopy, ...restProps }: CopyToClipboardProps): JSX.Element;
+export default function CopyToClipboard({ variant, ...restProps }: CopyToClipboardProps): JSX.Element;
 //# sourceMappingURL=index.d.ts.map

package/copy-to-clipboard/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/copy-to-clipboard/index.tsx"],"names":[],"mappings":";AAIA,OAAO,EAAE,oBAAoB,EAAE,MAAM,cAAc,CAAC;AAUpD,OAAO,EAAE,oBAAoB,EAAE,CAAC;AAEhC,MAAM,CAAC,OAAO,UAAU,eAAe,CAAC,EACtC,OAAkB,EAClB,mBAAmB,EACnB,cAAc,EACd,eAAe,EACf,aAAa,EACb,UAAU,EACV,GAAG,SAAS,EACb,EAAE,oBAAoB,eAuEtB"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/copy-to-clipboard/index.tsx"],"names":[],"mappings":";AAGA,OAAO,EAAE,oBAAoB,EAAE,MAAM,cAAc,CAAC;AAMpD,OAAO,EAAE,oBAAoB,EAAE,CAAC;AAEhC,MAAM,CAAC,OAAO,UAAU,eAAe,CAAC,EAAE,OAAkB,EAAE,GAAG,SAAS,EAAE,EAAE,oBAAoB,eAOjG"}

package/copy-to-clipboard/index.js

@@ -1,53 +1,18 @@
 import { __rest } from "tslib";
 // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 // SPDX-License-Identifier: Apache-2.0
-import React, { useState } from 'react';
-import { getBaseProps } from '../internal/base-component';
+import React from 'react';
 import { applyDisplayName } from '../internal/utils/apply-display-name';
 import useBaseComponent from '../internal/hooks/use-base-component';
-import InternalButton from '../button/internal';
-import InternalPopover from '../popover/internal';
-import InternalStatusIndicator from '../status-indicator/internal';
-import styles from './styles.css.js';
-import testStyles from './test-classes/styles.css.js';
-import clsx from 'clsx';
+import InternalCopyToClipboard from './internal';
+import { getExternalProps } from '../internal/utils/external-props';
 export default function CopyToClipboard(_a) {
-    var { variant = 'button', copyButtonAriaLabel, copyButtonText, copySuccessText, copyErrorText, textToCopy } = _a, restProps = __rest(_a, ["variant", "copyButtonAriaLabel", "copyButtonText", "copySuccessText", "copyErrorText", "textToCopy"]);
-    const { __internalRootRef } = useBaseComponent('CopyToClipboard', {
+    var { variant = 'button' } = _a, restProps = __rest(_a, ["variant"]);
+    const baseProps = useBaseComponent('CopyToClipboard', {
         props: { variant },
     });
-    const baseProps = getBaseProps(restProps);
-    const copyButtonProps = variant === 'button'
-        ? { children: copyButtonText, ariaLabel: copyButtonAriaLabel }
-        : { ariaLabel: copyButtonAriaLabel !== null && copyButtonAriaLabel !== void 0 ? copyButtonAriaLabel : copyButtonText };
-    const [status, setStatus] = useState('pending');
-    const [statusText, setStatusText] = useState('');
-    const onClick = () => {
-        if (navigator.clipboard) {
-            setStatus('pending');
-            setStatusText('');
-            navigator.clipboard
-                .writeText(textToCopy)
-                .then(() => {
-                setStatus('success');
-                setStatusText(copySuccessText);
-            })
-                .catch(() => {
-                setStatus('error');
-                setStatusText(copyErrorText);
-            });
-        }
-    };
-    const triggerVariant = {
-        button: 'normal',
-        icon: 'icon',
-        inline: 'inline-icon',
-    }[variant];
-    const trigger = (React.createElement(InternalPopover, { size: "medium", position: "top", triggerType: "custom", dismissButton: false, renderWithPortal: true, content: React.createElement(InternalStatusIndicator, { type: status }, statusText) },
-        React.createElement(InternalButton, Object.assign({}, copyButtonProps, { iconName: "copy", onClick: onClick, variant: triggerVariant, wrapText: false, formAction: "none" }))));
-    return (React.createElement("span", Object.assign({ ref: __internalRootRef }, baseProps, { className: clsx(baseProps.className, styles.root, testStyles.root) }), variant === 'inline' ? (React.createElement("span", { className: styles['inline-container'] },
-        React.createElement("span", { className: styles['inline-container-trigger'] }, trigger),
-        React.createElement("span", { className: testStyles['text-to-copy'] }, textToCopy))) : (trigger)));
+    const filteredProps = getExternalProps(restProps);
+    return React.createElement(InternalCopyToClipboard, Object.assign({ variant: variant }, baseProps, filteredProps));
 }
 applyDisplayName(CopyToClipboard, 'CopyToClipboard');
 //# sourceMappingURL=index.js.map

package/copy-to-clipboard/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/copy-to-clipboard/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, { useState } from 'react';\nimport { getBaseProps } from '../internal/base-component';\nimport { CopyToClipboardProps } from './interfaces';\nimport { applyDisplayName } from '../internal/utils/apply-display-name';\nimport useBaseComponent from '../internal/hooks/use-base-component';\nimport InternalButton from '../button/internal';\nimport InternalPopover from '../popover/internal';\nimport InternalStatusIndicator from '../status-indicator/internal';\nimport styles from './styles.css.js';\nimport testStyles from './test-classes/styles.css.js';\nimport clsx from 'clsx';\n\nexport { CopyToClipboardProps };\n\nexport default function CopyToClipboard({\n  variant = 'button',\n  copyButtonAriaLabel,\n  copyButtonText,\n  copySuccessText,\n  copyErrorText,\n  textToCopy,\n  ...restProps\n}: CopyToClipboardProps) {\n  const { __internalRootRef } = useBaseComponent('CopyToClipboard', {\n    props: { variant },\n  });\n  const baseProps = getBaseProps(restProps);\n\n  const copyButtonProps =\n    variant === 'button'\n      ? { children: copyButtonText, ariaLabel: copyButtonAriaLabel }\n      : { ariaLabel: copyButtonAriaLabel ?? copyButtonText };\n\n  const [status, setStatus] = useState<'pending' | 'success' | 'error'>('pending');\n  const [statusText, setStatusText] = useState('');\n\n  const onClick = () => {\n    if (navigator.clipboard) {\n      setStatus('pending');\n      setStatusText('');\n      navigator.clipboard\n        .writeText(textToCopy)\n        .then(() => {\n          setStatus('success');\n          setStatusText(copySuccessText);\n        })\n        .catch(() => {\n          setStatus('error');\n          setStatusText(copyErrorText);\n        });\n    }\n  };\n\n  const triggerVariant = (\n    {\n      button: 'normal',\n      icon: 'icon',\n      inline: 'inline-icon',\n    } as const\n  )[variant];\n\n  const trigger = (\n    <InternalPopover\n      size=\"medium\"\n      position=\"top\"\n      triggerType=\"custom\"\n      dismissButton={false}\n      renderWithPortal={true}\n      content={<InternalStatusIndicator type={status}>{statusText}</InternalStatusIndicator>}\n    >\n      <InternalButton\n        {...copyButtonProps}\n        iconName=\"copy\"\n        onClick={onClick}\n        variant={triggerVariant}\n        wrapText={false}\n        formAction=\"none\"\n      />\n    </InternalPopover>\n  );\n\n  return (\n    <span ref={__internalRootRef} {...baseProps} className={clsx(baseProps.className, styles.root, testStyles.root)}>\n      {variant === 'inline' ? (\n        <span className={styles['inline-container']}>\n          <span className={styles['inline-container-trigger']}>{trigger}</span>\n          <span className={testStyles['text-to-copy']}>{textToCopy}</span>\n        </span>\n      ) : (\n        trigger\n      )}\n    </span>\n  );\n}\n\napplyDisplayName(CopyToClipboard, 'CopyToClipboard');\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/copy-to-clipboard/index.tsx"],"names":[],"mappings":";AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,gBAAgB,EAAE,MAAM,sCAAsC,CAAC;AACxE,OAAO,gBAAgB,MAAM,sCAAsC,CAAC;AACpE,OAAO,uBAAuB,MAAM,YAAY,CAAC;AACjD,OAAO,EAAE,gBAAgB,EAAE,MAAM,kCAAkC,CAAC;AAIpE,MAAM,CAAC,OAAO,UAAU,eAAe,CAAC,EAA0D;QAA1D,EAAE,OAAO,GAAG,QAAQ,OAAsC,EAAjC,SAAS,cAAlC,WAAoC,CAAF;IACxE,MAAM,SAAS,GAAG,gBAAgB,CAAC,iBAAiB,EAAE;QACpD,KAAK,EAAE,EAAE,OAAO,EAAE;KACnB,CAAC,CAAC;IACH,MAAM,aAAa,GAAG,gBAAgB,CAAC,SAAS,CAAC,CAAC;IAElD,OAAO,oBAAC,uBAAuB,kBAAC,OAAO,EAAE,OAAO,IAAM,SAAS,EAAM,aAAa,EAAI,CAAC;AACzF,CAAC;AAED,gBAAgB,CAAC,eAAe,EAAE,iBAAiB,CAAC,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React from 'react';\nimport { CopyToClipboardProps } from './interfaces';\nimport { applyDisplayName } from '../internal/utils/apply-display-name';\nimport useBaseComponent from '../internal/hooks/use-base-component';\nimport InternalCopyToClipboard from './internal';\nimport { getExternalProps } from '../internal/utils/external-props';\n\nexport { CopyToClipboardProps };\n\nexport default function CopyToClipboard({ variant = 'button', ...restProps }: CopyToClipboardProps) {\n  const baseProps = useBaseComponent('CopyToClipboard', {\n    props: { variant },\n  });\n  const filteredProps = getExternalProps(restProps);\n\n  return <InternalCopyToClipboard variant={variant} {...baseProps} {...filteredProps} />;\n}\n\napplyDisplayName(CopyToClipboard, 'CopyToClipboard');\n"]}

package/copy-to-clipboard/internal.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+import { CopyToClipboardProps } from './interfaces';
+import { InternalBaseComponentProps } from '../internal/hooks/use-base-component';
+export interface InternalCopyToClipboardProps extends CopyToClipboardProps, InternalBaseComponentProps {
+}
+export default function InternalCopyToClipboard({ variant, copyButtonAriaLabel, copyButtonText, copySuccessText, copyErrorText, textToCopy, __internalRootRef, ...restProps }: InternalCopyToClipboardProps): JSX.Element;
+//# sourceMappingURL=internal.d.ts.map

package/copy-to-clipboard/internal.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"internal.d.ts","sourceRoot":"","sources":["../../../src/copy-to-clipboard/internal.tsx"],"names":[],"mappings":";AAGA,OAAO,EAAE,oBAAoB,EAAE,MAAM,cAAc,CAAC;AASpD,OAAO,EAAE,0BAA0B,EAAE,MAAM,sCAAsC,CAAC;AAElF,MAAM,WAAW,4BAA6B,SAAQ,oBAAoB,EAAE,0BAA0B;CAAG;AAEzG,MAAM,CAAC,OAAO,UAAU,uBAAuB,CAAC,EAC9C,OAAkB,EAClB,mBAAmB,EACnB,cAAc,EACd,eAAe,EACf,aAAa,EACb,UAAU,EACV,iBAAwB,EACxB,GAAG,SAAS,EACb,EAAE,4BAA4B,eAgE9B"}

package/copy-to-clipboard/internal.js

@@ -0,0 +1,44 @@
+import { __rest } from "tslib";
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import React, { useState } from 'react';
+import InternalButton from '../button/internal';
+import InternalPopover from '../popover/internal';
+import InternalStatusIndicator from '../status-indicator/internal';
+import styles from './styles.css.js';
+import testStyles from './test-classes/styles.css.js';
+import clsx from 'clsx';
+import { getBaseProps } from '../internal/base-component';
+export default function InternalCopyToClipboard(_a) {
+    var { variant = 'button', copyButtonAriaLabel, copyButtonText, copySuccessText, copyErrorText, textToCopy, __internalRootRef = null } = _a, restProps = __rest(_a, ["variant", "copyButtonAriaLabel", "copyButtonText", "copySuccessText", "copyErrorText", "textToCopy", "__internalRootRef"]);
+    const [status, setStatus] = useState('pending');
+    const [statusText, setStatusText] = useState('');
+    const baseProps = getBaseProps(restProps);
+    const onClick = () => {
+        if (navigator.clipboard) {
+            setStatus('pending');
+            setStatusText('');
+            navigator.clipboard
+                .writeText(textToCopy)
+                .then(() => {
+                setStatus('success');
+                setStatusText(copySuccessText);
+            })
+                .catch(() => {
+                setStatus('error');
+                setStatusText(copyErrorText);
+            });
+        }
+    };
+    const triggerVariant = {
+        button: 'normal',
+        icon: 'icon',
+        inline: 'inline-icon',
+    }[variant];
+    const trigger = (React.createElement(InternalPopover, { size: "medium", position: "top", triggerType: "custom", dismissButton: false, renderWithPortal: true, content: React.createElement(InternalStatusIndicator, { type: status }, statusText) },
+        React.createElement(InternalButton, { ariaLabel: copyButtonAriaLabel !== null && copyButtonAriaLabel !== void 0 ? copyButtonAriaLabel : copyButtonText, iconName: "copy", onClick: onClick, variant: triggerVariant, wrapText: false, formAction: "none" }, copyButtonText)));
+    return (React.createElement("span", Object.assign({}, baseProps, { ref: __internalRootRef, className: clsx(baseProps.className, styles.root, testStyles.root) }), variant === 'inline' ? (React.createElement("span", { className: styles['inline-container'] },
+        React.createElement("span", { className: styles['inline-container-trigger'] }, trigger),
+        React.createElement("span", { className: testStyles['text-to-copy'] }, textToCopy))) : (trigger)));
+}
+//# sourceMappingURL=internal.js.map

package/copy-to-clipboard/internal.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"internal.js","sourceRoot":"","sources":["../../../src/copy-to-clipboard/internal.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, { useState } from 'react';\nimport { CopyToClipboardProps } from './interfaces';\nimport InternalButton from '../button/internal';\nimport InternalPopover from '../popover/internal';\nimport InternalStatusIndicator from '../status-indicator/internal';\n\nimport styles from './styles.css.js';\nimport testStyles from './test-classes/styles.css.js';\nimport clsx from 'clsx';\nimport { getBaseProps } from '../internal/base-component';\nimport { InternalBaseComponentProps } from '../internal/hooks/use-base-component';\n\nexport interface InternalCopyToClipboardProps extends CopyToClipboardProps, InternalBaseComponentProps {}\n\nexport default function InternalCopyToClipboard({\n  variant = 'button',\n  copyButtonAriaLabel,\n  copyButtonText,\n  copySuccessText,\n  copyErrorText,\n  textToCopy,\n  __internalRootRef = null,\n  ...restProps\n}: InternalCopyToClipboardProps) {\n  const [status, setStatus] = useState<'pending' | 'success' | 'error'>('pending');\n  const [statusText, setStatusText] = useState('');\n\n  const baseProps = getBaseProps(restProps);\n  const onClick = () => {\n    if (navigator.clipboard) {\n      setStatus('pending');\n      setStatusText('');\n      navigator.clipboard\n        .writeText(textToCopy)\n        .then(() => {\n          setStatus('success');\n          setStatusText(copySuccessText);\n        })\n        .catch(() => {\n          setStatus('error');\n          setStatusText(copyErrorText);\n        });\n    }\n  };\n\n  const triggerVariant = (\n    {\n      button: 'normal',\n      icon: 'icon',\n      inline: 'inline-icon',\n    } as const\n  )[variant];\n\n  const trigger = (\n    <InternalPopover\n      size=\"medium\"\n      position=\"top\"\n      triggerType=\"custom\"\n      dismissButton={false}\n      renderWithPortal={true}\n      content={<InternalStatusIndicator type={status}>{statusText}</InternalStatusIndicator>}\n    >\n      <InternalButton\n        ariaLabel={copyButtonAriaLabel ?? copyButtonText}\n        iconName=\"copy\"\n        onClick={onClick}\n        variant={triggerVariant}\n        wrapText={false}\n        formAction=\"none\"\n      >\n        {copyButtonText}\n      </InternalButton>\n    </InternalPopover>\n  );\n\n  return (\n    <span {...baseProps} ref={__internalRootRef} className={clsx(baseProps.className, styles.root, testStyles.root)}>\n      {variant === 'inline' ? (\n        <span className={styles['inline-container']}>\n          <span className={styles['inline-container-trigger']}>{trigger}</span>\n          <span className={testStyles['text-to-copy']}>{textToCopy}</span>\n        </span>\n      ) : (\n        trigger\n      )}\n    </span>\n  );\n}\n"]}

package/internal/direction.d.ts

@@ -1,4 +1,4 @@
-export declare function getIsRtl(element: HTMLElement | SVGElement): boolean;
+export declare function getIsRtl(element: null | HTMLElement | SVGElement): boolean;
 export declare function getOffsetInlineStart(element: HTMLElement): number;
 /**
  * The scrollLeft value will be a negative number if the direction is RTL and

package/internal/direction.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"direction.d.ts","sourceRoot":"","sources":["../../../src/internal/direction.ts"],"names":[],"mappings":"AAGA,wBAAgB,QAAQ,CAAC,OAAO,EAAE,WAAW,GAAG,UAAU,WAEzD;AAED,wBAAgB,oBAAoB,CAAC,OAAO,EAAE,WAAW,UAGxD;AAED;;;;;GAKG;AACH,wBAAgB,oBAAoB,CAAC,OAAO,EAAE,WAAW,UAExD;AAED;;;;GAIG;AACH,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,YAAY,EAAE,KAAK,EAAE,OAAO,UAEpE;AAED;;;;;GAKG;AACH,wBAAgB,4BAA4B,CAAC,OAAO,EAAE,WAAW,GAAG,UAAU;;;;;;;EAoB7E;AAED;;;;GAIG;AACH,wBAAgB,eAAe,CAAC,KAAK,EAAE,UAAU,UAIhD"}
+{"version":3,"file":"direction.d.ts","sourceRoot":"","sources":["../../../src/internal/direction.ts"],"names":[],"mappings":"AAGA,wBAAgB,QAAQ,CAAC,OAAO,EAAE,IAAI,GAAG,WAAW,GAAG,UAAU,GAAG,OAAO,CAK1E;AAED,wBAAgB,oBAAoB,CAAC,OAAO,EAAE,WAAW,UAGxD;AAED;;;;;GAKG;AACH,wBAAgB,oBAAoB,CAAC,OAAO,EAAE,WAAW,UAExD;AAED;;;;GAIG;AACH,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,YAAY,EAAE,KAAK,EAAE,OAAO,UAEpE;AAED;;;;;GAKG;AACH,wBAAgB,4BAA4B,CAAC,OAAO,EAAE,WAAW,GAAG,UAAU;;;;;;;EAoB7E;AAED;;;;GAIG;AACH,wBAAgB,eAAe,CAAC,KAAK,EAAE,UAAU,UAIhD"}

package/internal/direction.js

@@ -1,6 +1,9 @@
 // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 // SPDX-License-Identifier: Apache-2.0
 export function getIsRtl(element) {
+    if (!element) {
+        return false;
+    }
     return getComputedStyle(element).direction === 'rtl';
 }
 export function getOffsetInlineStart(element) {

package/internal/direction.js.map

@@ -1 +1 @@
-{"version":3,"file":"direction.js","sourceRoot":"","sources":["../../../src/internal/direction.ts"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AAEtC,MAAM,UAAU,QAAQ,CAAC,OAAiC;IACxD,OAAO,gBAAgB,CAAC,OAAO,CAAC,CAAC,SAAS,KAAK,KAAK,CAAC;AACvD,CAAC;AAED,MAAM,UAAU,oBAAoB,CAAC,OAAoB;;IACvD,MAAM,iBAAiB,GAAG,MAAA,MAAA,OAAO,CAAC,YAAY,0CAAE,WAAW,mCAAI,CAAC,CAAC;IACjE,OAAO,QAAQ,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,iBAAiB,GAAG,OAAO,CAAC,WAAW,GAAG,OAAO,CAAC,UAAU,CAAC,CAAC,CAAC,OAAO,CAAC,UAAU,CAAC;AAC/G,CAAC;AAED;;;;;GAKG;AACH,MAAM,UAAU,oBAAoB,CAAC,OAAoB;IACvD,OAAO,QAAQ,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,UAAU,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,UAAU,CAAC,CAAC;AACjG,CAAC;AAED;;;;GAIG;AACH,MAAM,UAAU,iBAAiB,CAAC,KAAmB,EAAE,KAAc;IACnE,OAAO,KAAK,CAAC,CAAC,CAAC,QAAQ,CAAC,eAAe,CAAC,WAAW,GAAG,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,KAAK,CAAC,OAAO,CAAC;AACtF,CAAC;AAED;;;;;GAKG;AACH,MAAM,UAAU,4BAA4B,CAAC,OAAiC;IAC5E,MAAM,kBAAkB,GAAG,OAAO,CAAC,qBAAqB,EAAE,CAAC;IAE3D,MAAM,SAAS,GAAG,kBAAkB,CAAC,MAAM,CAAC;IAC5C,MAAM,UAAU,GAAG,kBAAkB,CAAC,KAAK,CAAC;IAC5C,MAAM,eAAe,GAAG,kBAAkB,CAAC,GAAG,CAAC;IAC/C,MAAM,aAAa,GAAG,kBAAkB,CAAC,MAAM,CAAC;IAChD,MAAM,gBAAgB,GAAG,QAAQ,CAAC,OAAO,CAAC;QACxC,CAAC,CAAC,QAAQ,CAAC,eAAe,CAAC,WAAW,GAAG,kBAAkB,CAAC,KAAK;QACjE,CAAC,CAAC,kBAAkB,CAAC,IAAI,CAAC;IAC5B,MAAM,cAAc,GAAG,gBAAgB,GAAG,UAAU,CAAC;IAErD,OAAO;QACL,SAAS;QACT,UAAU;QACV,eAAe;QACf,aAAa;QACb,gBAAgB;QAChB,cAAc;KACf,CAAC;AACJ,CAAC;AAED;;;;GAIG;AACH,MAAM,UAAU,eAAe,CAAC,KAAiB;IAC/C,OAAO,KAAK,CAAC,MAAM,YAAY,WAAW,IAAI,QAAQ,CAAC,KAAK,CAAC,MAAM,CAAC;QAClE,CAAC,CAAC,QAAQ,CAAC,eAAe,CAAC,WAAW,GAAG,KAAK,CAAC,KAAK;QACpD,CAAC,CAAC,KAAK,CAAC,KAAK,CAAC;AAClB,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nexport function getIsRtl(element: HTMLElement | SVGElement) {\n  return getComputedStyle(element).direction === 'rtl';\n}\n\nexport function getOffsetInlineStart(element: HTMLElement) {\n  const offsetParentWidth = element.offsetParent?.clientWidth ?? 0;\n  return getIsRtl(element) ? offsetParentWidth - element.offsetWidth - element.offsetLeft : element.offsetLeft;\n}\n\n/**\n * The scrollLeft value will be a negative number if the direction is RTL and\n * needs to be converted to a positive value for direction independent scroll\n * computations. Additionally, the scrollLeft value can be a decimal value on\n * systems using display scaling requiring the floor and ceiling calls.\n */\nexport function getScrollInlineStart(element: HTMLElement) {\n  return getIsRtl(element) ? Math.floor(element.scrollLeft) * -1 : Math.ceil(element.scrollLeft);\n}\n\n/**\n * The clientX position needs to be converted so it is relative to the right of\n * the document in order for computations to yield the same result in both\n * element directions.\n */\nexport function getLogicalClientX(event: PointerEvent, IsRtl: boolean) {\n  return IsRtl ? document.documentElement.clientWidth - event.clientX : event.clientX;\n}\n\n/**\n * The getBoundingClientRect() function returns values relative to the top left\n * corner of the document regardless of document direction. The left/right position\n * will be transformed to insetInlineStart based on element direction in order to\n * support direction agnostic position computation.\n */\nexport function getLogicalBoundingClientRect(element: HTMLElement | SVGElement) {\n  const boundingClientRect = element.getBoundingClientRect();\n\n  const blockSize = boundingClientRect.height;\n  const inlineSize = boundingClientRect.width;\n  const insetBlockStart = boundingClientRect.top;\n  const insetBlockEnd = boundingClientRect.bottom;\n  const insetInlineStart = getIsRtl(element)\n    ? document.documentElement.clientWidth - boundingClientRect.right\n    : boundingClientRect.left;\n  const insetInlineEnd = insetInlineStart + inlineSize;\n\n  return {\n    blockSize,\n    inlineSize,\n    insetBlockStart,\n    insetBlockEnd,\n    insetInlineStart,\n    insetInlineEnd,\n  };\n}\n\n/**\n * The pageX position needs to be converted so it is relative to the right of\n * the document in order for computations to yield the same result in both\n * element directions.\n */\nexport function getLogicalPageX(event: MouseEvent) {\n  return event.target instanceof HTMLElement && getIsRtl(event.target)\n    ? document.documentElement.clientWidth - event.pageX\n    : event.pageX;\n}\n"]}
+{"version":3,"file":"direction.js","sourceRoot":"","sources":["../../../src/internal/direction.ts"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AAEtC,MAAM,UAAU,QAAQ,CAAC,OAAwC;IAC/D,IAAI,CAAC,OAAO,EAAE;QACZ,OAAO,KAAK,CAAC;KACd;IACD,OAAO,gBAAgB,CAAC,OAAO,CAAC,CAAC,SAAS,KAAK,KAAK,CAAC;AACvD,CAAC;AAED,MAAM,UAAU,oBAAoB,CAAC,OAAoB;;IACvD,MAAM,iBAAiB,GAAG,MAAA,MAAA,OAAO,CAAC,YAAY,0CAAE,WAAW,mCAAI,CAAC,CAAC;IACjE,OAAO,QAAQ,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,iBAAiB,GAAG,OAAO,CAAC,WAAW,GAAG,OAAO,CAAC,UAAU,CAAC,CAAC,CAAC,OAAO,CAAC,UAAU,CAAC;AAC/G,CAAC;AAED;;;;;GAKG;AACH,MAAM,UAAU,oBAAoB,CAAC,OAAoB;IACvD,OAAO,QAAQ,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,UAAU,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,UAAU,CAAC,CAAC;AACjG,CAAC;AAED;;;;GAIG;AACH,MAAM,UAAU,iBAAiB,CAAC,KAAmB,EAAE,KAAc;IACnE,OAAO,KAAK,CAAC,CAAC,CAAC,QAAQ,CAAC,eAAe,CAAC,WAAW,GAAG,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,KAAK,CAAC,OAAO,CAAC;AACtF,CAAC;AAED;;;;;GAKG;AACH,MAAM,UAAU,4BAA4B,CAAC,OAAiC;IAC5E,MAAM,kBAAkB,GAAG,OAAO,CAAC,qBAAqB,EAAE,CAAC;IAE3D,MAAM,SAAS,GAAG,kBAAkB,CAAC,MAAM,CAAC;IAC5C,MAAM,UAAU,GAAG,kBAAkB,CAAC,KAAK,CAAC;IAC5C,MAAM,eAAe,GAAG,kBAAkB,CAAC,GAAG,CAAC;IAC/C,MAAM,aAAa,GAAG,kBAAkB,CAAC,MAAM,CAAC;IAChD,MAAM,gBAAgB,GAAG,QAAQ,CAAC,OAAO,CAAC;QACxC,CAAC,CAAC,QAAQ,CAAC,eAAe,CAAC,WAAW,GAAG,kBAAkB,CAAC,KAAK;QACjE,CAAC,CAAC,kBAAkB,CAAC,IAAI,CAAC;IAC5B,MAAM,cAAc,GAAG,gBAAgB,GAAG,UAAU,CAAC;IAErD,OAAO;QACL,SAAS;QACT,UAAU;QACV,eAAe;QACf,aAAa;QACb,gBAAgB;QAChB,cAAc;KACf,CAAC;AACJ,CAAC;AAED;;;;GAIG;AACH,MAAM,UAAU,eAAe,CAAC,KAAiB;IAC/C,OAAO,KAAK,CAAC,MAAM,YAAY,WAAW,IAAI,QAAQ,CAAC,KAAK,CAAC,MAAM,CAAC;QAClE,CAAC,CAAC,QAAQ,CAAC,eAAe,CAAC,WAAW,GAAG,KAAK,CAAC,KAAK;QACpD,CAAC,CAAC,KAAK,CAAC,KAAK,CAAC;AAClB,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nexport function getIsRtl(element: null | HTMLElement | SVGElement): boolean {\n  if (!element) {\n    return false;\n  }\n  return getComputedStyle(element).direction === 'rtl';\n}\n\nexport function getOffsetInlineStart(element: HTMLElement) {\n  const offsetParentWidth = element.offsetParent?.clientWidth ?? 0;\n  return getIsRtl(element) ? offsetParentWidth - element.offsetWidth - element.offsetLeft : element.offsetLeft;\n}\n\n/**\n * The scrollLeft value will be a negative number if the direction is RTL and\n * needs to be converted to a positive value for direction independent scroll\n * computations. Additionally, the scrollLeft value can be a decimal value on\n * systems using display scaling requiring the floor and ceiling calls.\n */\nexport function getScrollInlineStart(element: HTMLElement) {\n  return getIsRtl(element) ? Math.floor(element.scrollLeft) * -1 : Math.ceil(element.scrollLeft);\n}\n\n/**\n * The clientX position needs to be converted so it is relative to the right of\n * the document in order for computations to yield the same result in both\n * element directions.\n */\nexport function getLogicalClientX(event: PointerEvent, IsRtl: boolean) {\n  return IsRtl ? document.documentElement.clientWidth - event.clientX : event.clientX;\n}\n\n/**\n * The getBoundingClientRect() function returns values relative to the top left\n * corner of the document regardless of document direction. The left/right position\n * will be transformed to insetInlineStart based on element direction in order to\n * support direction agnostic position computation.\n */\nexport function getLogicalBoundingClientRect(element: HTMLElement | SVGElement) {\n  const boundingClientRect = element.getBoundingClientRect();\n\n  const blockSize = boundingClientRect.height;\n  const inlineSize = boundingClientRect.width;\n  const insetBlockStart = boundingClientRect.top;\n  const insetBlockEnd = boundingClientRect.bottom;\n  const insetInlineStart = getIsRtl(element)\n    ? document.documentElement.clientWidth - boundingClientRect.right\n    : boundingClientRect.left;\n  const insetInlineEnd = insetInlineStart + inlineSize;\n\n  return {\n    blockSize,\n    inlineSize,\n    insetBlockStart,\n    insetBlockEnd,\n    insetInlineStart,\n    insetInlineEnd,\n  };\n}\n\n/**\n * The pageX position needs to be converted so it is relative to the right of\n * the document in order for computations to yield the same result in both\n * element directions.\n */\nexport function getLogicalPageX(event: MouseEvent) {\n  return event.target instanceof HTMLElement && getIsRtl(event.target)\n    ? document.documentElement.clientWidth - event.pageX\n    : event.pageX;\n}\n"]}

package/internal/environment.js

@@ -1,4 +1,4 @@
 export var PACKAGE_SOURCE = "components";
-export var PACKAGE_VERSION = "3.0.0 (8f694589)";
+export var PACKAGE_VERSION = "3.0.0 (365869a6)";
 export var THEME = "open-source-visual-refresh";
 export var ALWAYS_VISUAL_REFRESH = true;

package/internal/environment.json

@@ -1,6 +1,6 @@
 {
   "PACKAGE_SOURCE": "components",
-  "PACKAGE_VERSION": "3.0.0 (8f694589)",
+  "PACKAGE_VERSION": "3.0.0 (365869a6)",
   "THEME": "default",
   "ALWAYS_VISUAL_REFRESH": false
 }

package/internal/manifest.json

@@ -1,3 +1,3 @@
 {
-  "commit": "8f694589be7e61c091c04ec8831369259d3b3dfc"
+  "commit": "365869a60717d4833051ca758b6b1d0da22339e4"
 }

package/mixed-line-bar-chart/bar-series.d.ts

@@ -16,6 +16,7 @@ export interface BarSeriesProps<T> {
     dimmed: boolean;
     highlightedGroupIndex: number | null;
     stackedBarValues?: StackedBarValues;
+    isRtl?: boolean;
 }
-export default function BarSeries<T extends ChartDataTypes>({ axis, series, color, xScale, yScale, highlighted, dimmed, highlightedGroupIndex, totalSeriesCount, seriesIndex, plotSize, chartAreaClipPath, stackedBarValues, }: BarSeriesProps<T>): JSX.Element;
+export default function BarSeries<T extends ChartDataTypes>({ axis, series, color, xScale, yScale, highlighted, dimmed, highlightedGroupIndex, totalSeriesCount, seriesIndex, plotSize, chartAreaClipPath, stackedBarValues, isRtl, }: BarSeriesProps<T>): JSX.Element;
 //# sourceMappingURL=bar-series.d.ts.map

package/mixed-line-bar-chart/bar-series.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"bar-series.d.ts","sourceRoot":"","sources":["../../../src/mixed-line-bar-chart/bar-series.tsx"],"names":[],"mappings":";AAMA,OAAO,EAAE,UAAU,EAAE,iBAAiB,EAAE,MAAM,+CAA+C,CAAC;AAC9F,OAAO,EAAE,cAAc,EAAE,sBAAsB,EAAE,MAAM,cAAc,CAAC;AACtE,OAAO,EAAyB,gBAAgB,EAAE,MAAM,SAAS,CAAC;AAKlE,MAAM,WAAW,cAAc,CAAC,CAAC;IAC/B,IAAI,EAAE,GAAG,GAAG,GAAG,CAAC;IAEhB,MAAM,EAAE,sBAAsB,CAAC,aAAa,CAAC,CAAC,CAAC,CAAC;IAEhD,KAAK,EAAE,MAAM,CAAC;IACd,gBAAgB,EAAE,MAAM,CAAC;IACzB,WAAW,EAAE,MAAM,CAAC;IAEpB,MAAM,EAAE,UAAU,CAAC;IACnB,MAAM,EAAE,iBAAiB,CAAC;IAE1B,QAAQ,EAAE,MAAM,CAAC;IACjB,iBAAiB,EAAE,MAAM,CAAC;IAE1B,WAAW,EAAE,OAAO,CAAC;IACrB,MAAM,EAAE,OAAO,CAAC;IAChB,qBAAqB,EAAE,MAAM,GAAG,IAAI,CAAC;IAGrC,gBAAgB,CAAC,EAAE,gBAAgB,CAAC;CACrC;AAED,MAAM,CAAC,OAAO,UAAU,SAAS,CAAC,CAAC,SAAS,cAAc,EAAE,EAC1D,IAAI,EACJ,MAAM,EACN,KAAK,EACL,MAAM,EACN,MAAM,EACN,WAAW,EACX,MAAM,EACN,qBAAqB,EACrB,gBAAgB,EAChB,WAAW,EACX,QAAQ,EACR,iBAAiB,EACjB,gBAAgB,GACjB,EAAE,cAAc,CAAC,CAAC,CAAC,eA+HnB"}
+{"version":3,"file":"bar-series.d.ts","sourceRoot":"","sources":["../../../src/mixed-line-bar-chart/bar-series.tsx"],"names":[],"mappings":";AAMA,OAAO,EAAE,UAAU,EAAE,iBAAiB,EAAE,MAAM,+CAA+C,CAAC;AAC9F,OAAO,EAAE,cAAc,EAAE,sBAAsB,EAAE,MAAM,cAAc,CAAC;AACtE,OAAO,EAAyB,gBAAgB,EAAE,MAAM,SAAS,CAAC;AAKlE,MAAM,WAAW,cAAc,CAAC,CAAC;IAC/B,IAAI,EAAE,GAAG,GAAG,GAAG,CAAC;IAEhB,MAAM,EAAE,sBAAsB,CAAC,aAAa,CAAC,CAAC,CAAC,CAAC;IAEhD,KAAK,EAAE,MAAM,CAAC;IACd,gBAAgB,EAAE,MAAM,CAAC;IACzB,WAAW,EAAE,MAAM,CAAC;IAEpB,MAAM,EAAE,UAAU,CAAC;IACnB,MAAM,EAAE,iBAAiB,CAAC;IAE1B,QAAQ,EAAE,MAAM,CAAC;IACjB,iBAAiB,EAAE,MAAM,CAAC;IAE1B,WAAW,EAAE,OAAO,CAAC;IACrB,MAAM,EAAE,OAAO,CAAC;IAChB,qBAAqB,EAAE,MAAM,GAAG,IAAI,CAAC;IAGrC,gBAAgB,CAAC,EAAE,gBAAgB,CAAC;IAEpC,KAAK,CAAC,EAAE,OAAO,CAAC;CACjB;AAED,MAAM,CAAC,OAAO,UAAU,SAAS,CAAC,CAAC,SAAS,cAAc,EAAE,EAC1D,IAAI,EACJ,MAAM,EACN,KAAK,EACL,MAAM,EACN,MAAM,EACN,WAAW,EACX,MAAM,EACN,qBAAqB,EACrB,gBAAgB,EAChB,WAAW,EACX,QAAQ,EACR,iBAAiB,EACjB,gBAAgB,EAChB,KAAK,GACN,EAAE,cAAc,CAAC,CAAC,CAAC,eAiInB"}

package/mixed-line-bar-chart/bar-series.js

@@ -6,7 +6,7 @@ import { matchesX, getKeyValue } from './utils';
 import styles from './styles.css.js';
 import { useVisualRefresh } from '../internal/hooks/use-visual-mode';
 import { createOneSideRoundedRectPath } from './create-one-side-rounded-rect-path';
-export default function BarSeries({ axis, series, color, xScale, yScale, highlighted, dimmed, highlightedGroupIndex, totalSeriesCount, seriesIndex, plotSize, chartAreaClipPath, stackedBarValues, }) {
+export default function BarSeries({ axis, series, color, xScale, yScale, highlighted, dimmed, highlightedGroupIndex, totalSeriesCount, seriesIndex, plotSize, chartAreaClipPath, stackedBarValues, isRtl, }) {
     const isRefresh = useVisualRefresh();
     const isStacked = !!stackedBarValues;
     const isVertical = axis === 'x';
@@ -81,7 +81,7 @@ export default function BarSeries({ axis, series, color, xScale, yScale, highlig
                 height: height - heightOffset,
             }
             : {
-                x: y - height + heightOffset / 2,
+                x: y - (!isRtl ? height : 0) + heightOffset / 2,
                 y: x + widthOffset / 2,
                 width: height - heightOffset,
                 height: width - widthOffset,
@@ -100,9 +100,12 @@ export default function BarSeries({ axis, series, color, xScale, yScale, highlig
         else if (isVertical) {
             side = isRoundedStart ? 'bottom' : 'top';
         }
-        else {
+        else if (!isRtl) {
             side = isRoundedStart ? 'left' : 'right';
         }
+        else {
+            side = isRoundedStart ? 'right' : 'left';
+        }
         if (side === 'all') {
             return React.createElement("rect", Object.assign({ key: i }, placement, styleProps, { rx: rx }));
         }