@cloudscape-design/components-themeable 3.0.1138 → 3.0.1139

package/lib/internal/template/internal/components/option/option-parts.js.map

@@ -1 +1 @@
-{"version":3,"file":"option-parts.js","sourceRoot":"","sources":["../../../../../src/internal/components/option/option-parts.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 from 'react';\nimport clsx from 'clsx';\n\nimport { IconProps } from '../../../icon/interfaces';\nimport InternalIcon from '../../../icon/internal';\nimport HighlightMatch from './highlight-match';\n\nimport analyticsSelectors from './analytics-metadata/styles.css.js';\nimport styles from './styles.css.js';\n\ninterface LabelProps {\n  labelContainerRef?: React.RefObject<HTMLSpanElement>;\n  labelRef?: React.RefObject<HTMLSpanElement>;\n  labelId?: string;\n  label?: string;\n  prefix?: string;\n  highlightText?: string;\n  triggerVariant: boolean;\n}\nexport const Label = ({\n  labelContainerRef,\n  labelRef,\n  labelId,\n  label,\n  prefix,\n  highlightText,\n  triggerVariant,\n}: LabelProps) => {\n  return (\n    <span\n      id={labelId}\n      ref={labelContainerRef}\n      className={clsx(styles.label, analyticsSelectors.label, triggerVariant && styles['trigger-variant'])}\n    >\n      {prefix && (\n        <span className={clsx(styles['label-prefix'], triggerVariant && styles['trigger-variant'])}>{prefix} </span>\n      )}\n      <HighlightMatch labelRef={labelRef} str={label} highlightText={highlightText} />\n    </span>\n  );\n};\n\ninterface LabelTagProps {\n  labelTag?: string;\n  highlightText?: string;\n  triggerVariant: boolean;\n}\nexport const LabelTag = ({ labelTag, highlightText, triggerVariant }: LabelTagProps) =>\n  labelTag ? (\n    <span className={clsx(styles['label-tag'], triggerVariant && styles['trigger-variant'])}>\n      <HighlightMatch str={labelTag} highlightText={highlightText} />\n    </span>\n  ) : null;\n\ninterface DescriptionProps {\n  description?: string;\n  highlightedOption: boolean;\n  highlightText?: string;\n  selectedOption: boolean;\n  triggerVariant: boolean;\n}\nexport const Description = ({\n  description,\n  highlightedOption,\n  highlightText,\n  selectedOption,\n  triggerVariant,\n}: DescriptionProps) =>\n  description ? (\n    <span\n      className={clsx(styles.description, {\n        [styles['trigger-variant']]: triggerVariant,\n        [styles.highlighted]: highlightedOption,\n        [styles.selected]: selectedOption,\n      })}\n    >\n      <HighlightMatch str={description} highlightText={highlightText} />\n    </span>\n  ) : null;\n\ninterface TagsProps {\n  tags?: ReadonlyArray<string>;\n  highlightedOption: boolean;\n  highlightText?: string;\n  selectedOption: boolean;\n  triggerVariant: boolean;\n}\nexport const Tags = ({ tags, highlightedOption, highlightText, selectedOption, triggerVariant }: TagsProps) =>\n  tags ? (\n    <span\n      className={clsx(styles.tags, {\n        [styles.highlighted]: highlightedOption,\n        [styles.selected]: selectedOption,\n      })}\n    >\n      {tags.map((tag, idx) => (\n        <span key={idx} className={clsx(styles.tag, triggerVariant && styles['trigger-variant'])}>\n          <HighlightMatch str={tag} highlightText={highlightText} />\n        </span>\n      ))}\n    </span>\n  ) : null;\n\ninterface FilteringTagProps {\n  filteringTags?: ReadonlyArray<string>;\n  highlightedOption: boolean;\n  highlightText?: string;\n  selectedOption: boolean;\n  triggerVariant: boolean;\n}\nexport const FilteringTags = ({\n  filteringTags,\n  highlightedOption,\n  highlightText,\n  selectedOption,\n  triggerVariant,\n}: FilteringTagProps) => {\n  if (!highlightText || !filteringTags) {\n    return null;\n  }\n\n  const searchElement = highlightText.toLowerCase();\n\n  return (\n    <span\n      className={clsx(styles.tags, {\n        [styles.highlighted]: highlightedOption,\n        [styles.selected]: selectedOption,\n      })}\n    >\n      {filteringTags.map((filteringTag, key) => {\n        const match = filteringTag.toLowerCase().indexOf(searchElement) !== -1;\n        if (match) {\n          return (\n            <span className={clsx(styles.tag, triggerVariant && styles['trigger-variant'])} key={key}>\n              <HighlightMatch str={filteringTag} highlightText={highlightText} />\n            </span>\n          );\n        }\n        return null;\n      })}\n    </span>\n  );\n};\n\nexport const OptionIcon = (props: IconProps) => {\n  if (!props.name && !props.url && !props.svg) {\n    return null;\n  }\n\n  return (\n    <span className={styles.icon}>\n      <InternalIcon {...props} />\n    </span>\n  );\n};\n"]}
+{"version":3,"file":"option-parts.js","sourceRoot":"","sources":["../../../../../src/internal/components/option/option-parts.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 from 'react';\nimport clsx from 'clsx';\n\nimport { IconProps } from '../../../icon/interfaces';\nimport InternalIcon from '../../../icon/internal';\nimport HighlightMatch from './highlight-match';\n\nimport analyticsSelectors from './analytics-metadata/styles.css.js';\nimport styles from './styles.css.js';\n\ninterface LabelProps {\n  labelContainerRef?: React.RefObject<HTMLSpanElement>;\n  labelRef?: React.RefObject<HTMLSpanElement>;\n  labelId?: string;\n  label?: string;\n  prefix?: string;\n  highlightText?: string;\n  triggerVariant: boolean;\n}\nexport const Label = ({\n  labelContainerRef,\n  labelRef,\n  labelId,\n  label,\n  prefix,\n  highlightText,\n  triggerVariant,\n}: LabelProps) => {\n  return (\n    <span\n      id={labelId}\n      ref={labelContainerRef}\n      className={clsx(styles.label, analyticsSelectors.label, triggerVariant && styles['trigger-variant'])}\n    >\n      {prefix && (\n        <span className={clsx(styles['label-prefix'], triggerVariant && styles['trigger-variant'])}>{prefix} </span>\n      )}\n      <HighlightMatch labelRef={labelRef} str={label} highlightText={highlightText} />\n    </span>\n  );\n};\n\ninterface LabelTagProps {\n  labelTag?: string;\n  highlightText?: string;\n  triggerVariant: boolean;\n}\nexport const LabelTag = ({ labelTag, highlightText, triggerVariant }: LabelTagProps) =>\n  labelTag ? (\n    <span className={clsx(styles['label-tag'], triggerVariant && styles['trigger-variant'])}>\n      <HighlightMatch str={labelTag} highlightText={highlightText} />\n    </span>\n  ) : null;\n\ninterface DescriptionProps {\n  description?: string;\n  highlightedOption: boolean;\n  highlightText?: string;\n  selectedOption: boolean;\n  triggerVariant: boolean;\n}\nexport const Description = ({\n  description,\n  highlightedOption,\n  highlightText,\n  selectedOption,\n  triggerVariant,\n}: DescriptionProps) =>\n  description ? (\n    <span\n      className={clsx(styles.description, {\n        [styles['trigger-variant']]: triggerVariant,\n        [styles.highlighted]: highlightedOption,\n        [styles.selected]: selectedOption,\n      })}\n    >\n      <HighlightMatch str={description} highlightText={highlightText} />\n    </span>\n  ) : null;\n\ninterface TagsProps {\n  tags?: ReadonlyArray<string>;\n  highlightedOption: boolean;\n  highlightText?: string;\n  selectedOption: boolean;\n  triggerVariant: boolean;\n}\nexport const Tags = ({ tags, highlightedOption, highlightText, selectedOption, triggerVariant }: TagsProps) =>\n  tags ? (\n    <span\n      className={clsx(styles.tags, {\n        [styles.highlighted]: highlightedOption,\n        [styles.selected]: selectedOption,\n      })}\n    >\n      {tags.map((tag, idx) => (\n        <span key={idx} className={clsx(styles.tag, triggerVariant && styles['trigger-variant'])}>\n          <HighlightMatch str={tag} highlightText={highlightText} />\n        </span>\n      ))}\n    </span>\n  ) : null;\n\ninterface FilteringTagProps {\n  filteringTags?: ReadonlyArray<string>;\n  highlightedOption: boolean;\n  highlightText?: string;\n  selectedOption: boolean;\n  triggerVariant: boolean;\n}\nexport const FilteringTags = ({\n  filteringTags,\n  highlightedOption,\n  highlightText,\n  selectedOption,\n  triggerVariant,\n}: FilteringTagProps) => {\n  if (!highlightText || !filteringTags) {\n    return null;\n  }\n\n  const searchElement = highlightText.toLowerCase();\n\n  return (\n    <span\n      className={clsx(styles.tags, {\n        [styles.highlighted]: highlightedOption,\n        [styles.selected]: selectedOption,\n      })}\n    >\n      {filteringTags.map((filteringTag, key) => {\n        const match = filteringTag.toLowerCase().indexOf(searchElement) !== -1;\n        if (match) {\n          return (\n            <span className={clsx(styles.tag, triggerVariant && styles['trigger-variant'])} key={key}>\n              <HighlightMatch str={filteringTag} highlightText={highlightText} />\n            </span>\n          );\n        }\n        return null;\n      })}\n    </span>\n  );\n};\n\nexport const OptionIcon = (props: IconProps) => {\n  if (!props.name && !props.url && !props.svg) {\n    return null;\n  }\n\n  return (\n    <span className={styles.icon}>\n      <InternalIcon {...props} />\n    </span>\n  );\n};\n"]}

package/lib/internal/template/internal/components/option/utils/flatten-options.js

@@ -1,10 +1,9 @@
-import { __rest } from "tslib";
 import { isGroup } from './filter-options';
 export const flattenOptions = (options) => {
     const parentMap = new Map();
     const flatOptions = options.reduce((acc, option) => {
         if (isGroup(option)) {
-            const { options } = option, rest = __rest(option, ["options"]);
+            const { options, ...rest } = option;
             const parentDropdownOption = { type: 'parent', option };
             const allOptionsDisabled = options.every(option => option.disabled);
             if (option.disabled || allOptionsDisabled) {

package/lib/internal/template/internal/components/option/utils/flatten-options.js.map

@@ -1 +1 @@
-{"version":3,"file":"flatten-options.js","sourceRoot":"","sources":["../../../../../../src/internal/components/option/utils/flatten-options.ts"],"names":[],"mappings":";AAGA,OAAO,EAAE,OAAO,EAAE,MAAM,kBAAkB,CAAC;AAE3C,MAAM,CAAC,MAAM,cAAc,GAAG,CAAC,OAAsD,EAAE,EAAE;IACvF,MAAM,SAAS,GAAG,IAAI,GAAG,EAAkC,CAAC;IAE5D,MAAM,WAAW,GAAG,OAAO,CAAC,MAAM,CAAmB,CAAC,GAAG,EAAE,MAAM,EAAE,EAAE;QACnE,IAAI,OAAO,CAAC,MAAM,CAAC,EAAE,CAAC;YACpB,MAAM,EAAE,OAAO,KAAc,MAAM,EAAf,IAAI,UAAK,MAAM,EAA7B,WAAoB,CAAS,CAAC;YACpC,MAAM,oBAAoB,GAAmB,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,EAAE,CAAC;YACxE,MAAM,kBAAkB,GAAG,OAAO,CAAC,KAAK,CAAC,MAAM,CAAC,EAAE,CAAC,MAAM,CAAC,QAAQ,CAAC,CAAC;YACpE,IAAI,MAAM,CAAC,QAAQ,IAAI,kBAAkB,EAAE,CAAC;gBAC1C,oBAAoB,CAAC,QAAQ,GAAG,IAAI,CAAC;YACvC,CAAC;YACD,GAAG,CAAC,IAAI,CAAC,oBAAoB,CAAC,CAAC;YAC/B,OAAO,CAAC,OAAO,CAAC,KAAK,CAAC,EAAE;gBACtB,MAAM,mBAAmB,GAAmB,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,EAAE,KAAK,EAAE,CAAC;gBAC7E,IAAI,IAAI,CAAC,QAAQ,IAAI,KAAK,CAAC,QAAQ,EAAE,CAAC;oBACpC,mBAAmB,CAAC,QAAQ,GAAG,IAAI,CAAC;gBACtC,CAAC;gBACD,GAAG,CAAC,IAAI,CAAC,mBAAmB,CAAC,CAAC;gBAC9B,SAAS,CAAC,GAAG,CAAC,mBAAmB,EAAE,oBAAoB,CAAC,CAAC;YAC3D,CAAC,CAAC,CAAC;QACL,CAAC;aAAM,CAAC;YACN,MAAM,cAAc,GAAmB,EAAE,MAAM,EAAE,CAAC;YAClD,IAAI,MAAM,CAAC,QAAQ,EAAE,CAAC;gBACpB,cAAc,CAAC,QAAQ,GAAG,IAAI,CAAC;YACjC,CAAC;YACD,GAAG,CAAC,IAAI,CAAC,cAAc,CAAC,CAAC;QAC3B,CAAC;QAED,OAAO,GAAG,CAAC;IACb,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,OAAO;QACL,WAAW;QACX,SAAS;KACV,CAAC;AACJ,CAAC,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport { DropdownOption, OptionDefinition, OptionGroup } from '../interfaces';\nimport { isGroup } from './filter-options';\n\nexport const flattenOptions = (options: ReadonlyArray<OptionDefinition | OptionGroup>) => {\n  const parentMap = new Map<DropdownOption, DropdownOption>();\n\n  const flatOptions = options.reduce<DropdownOption[]>((acc, option) => {\n    if (isGroup(option)) {\n      const { options, ...rest } = option;\n      const parentDropdownOption: DropdownOption = { type: 'parent', option };\n      const allOptionsDisabled = options.every(option => option.disabled);\n      if (option.disabled || allOptionsDisabled) {\n        parentDropdownOption.disabled = true;\n      }\n      acc.push(parentDropdownOption);\n      options.forEach(child => {\n        const childDropdownOption: DropdownOption = { type: 'child', option: child };\n        if (rest.disabled || child.disabled) {\n          childDropdownOption.disabled = true;\n        }\n        acc.push(childDropdownOption);\n        parentMap.set(childDropdownOption, parentDropdownOption);\n      });\n    } else {\n      const dropdownOption: DropdownOption = { option };\n      if (option.disabled) {\n        dropdownOption.disabled = true;\n      }\n      acc.push(dropdownOption);\n    }\n\n    return acc;\n  }, []);\n\n  return {\n    flatOptions,\n    parentMap,\n  };\n};\n"]}
+{"version":3,"file":"flatten-options.js","sourceRoot":"","sources":["../../../../../../src/internal/components/option/utils/flatten-options.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,OAAO,EAAE,MAAM,kBAAkB,CAAC;AAE3C,MAAM,CAAC,MAAM,cAAc,GAAG,CAAC,OAAsD,EAAE,EAAE;IACvF,MAAM,SAAS,GAAG,IAAI,GAAG,EAAkC,CAAC;IAE5D,MAAM,WAAW,GAAG,OAAO,CAAC,MAAM,CAAmB,CAAC,GAAG,EAAE,MAAM,EAAE,EAAE;QACnE,IAAI,OAAO,CAAC,MAAM,CAAC,EAAE,CAAC;YACpB,MAAM,EAAE,OAAO,EAAE,GAAG,IAAI,EAAE,GAAG,MAAM,CAAC;YACpC,MAAM,oBAAoB,GAAmB,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,EAAE,CAAC;YACxE,MAAM,kBAAkB,GAAG,OAAO,CAAC,KAAK,CAAC,MAAM,CAAC,EAAE,CAAC,MAAM,CAAC,QAAQ,CAAC,CAAC;YACpE,IAAI,MAAM,CAAC,QAAQ,IAAI,kBAAkB,EAAE,CAAC;gBAC1C,oBAAoB,CAAC,QAAQ,GAAG,IAAI,CAAC;YACvC,CAAC;YACD,GAAG,CAAC,IAAI,CAAC,oBAAoB,CAAC,CAAC;YAC/B,OAAO,CAAC,OAAO,CAAC,KAAK,CAAC,EAAE;gBACtB,MAAM,mBAAmB,GAAmB,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,EAAE,KAAK,EAAE,CAAC;gBAC7E,IAAI,IAAI,CAAC,QAAQ,IAAI,KAAK,CAAC,QAAQ,EAAE,CAAC;oBACpC,mBAAmB,CAAC,QAAQ,GAAG,IAAI,CAAC;gBACtC,CAAC;gBACD,GAAG,CAAC,IAAI,CAAC,mBAAmB,CAAC,CAAC;gBAC9B,SAAS,CAAC,GAAG,CAAC,mBAAmB,EAAE,oBAAoB,CAAC,CAAC;YAC3D,CAAC,CAAC,CAAC;QACL,CAAC;aAAM,CAAC;YACN,MAAM,cAAc,GAAmB,EAAE,MAAM,EAAE,CAAC;YAClD,IAAI,MAAM,CAAC,QAAQ,EAAE,CAAC;gBACpB,cAAc,CAAC,QAAQ,GAAG,IAAI,CAAC;YACjC,CAAC;YACD,GAAG,CAAC,IAAI,CAAC,cAAc,CAAC,CAAC;QAC3B,CAAC;QAED,OAAO,GAAG,CAAC;IACb,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,OAAO;QACL,WAAW;QACX,SAAS;KACV,CAAC;AACJ,CAAC,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport { DropdownOption, OptionDefinition, OptionGroup } from '../interfaces';\nimport { isGroup } from './filter-options';\n\nexport const flattenOptions = (options: ReadonlyArray<OptionDefinition | OptionGroup>) => {\n  const parentMap = new Map<DropdownOption, DropdownOption>();\n\n  const flatOptions = options.reduce<DropdownOption[]>((acc, option) => {\n    if (isGroup(option)) {\n      const { options, ...rest } = option;\n      const parentDropdownOption: DropdownOption = { type: 'parent', option };\n      const allOptionsDisabled = options.every(option => option.disabled);\n      if (option.disabled || allOptionsDisabled) {\n        parentDropdownOption.disabled = true;\n      }\n      acc.push(parentDropdownOption);\n      options.forEach(child => {\n        const childDropdownOption: DropdownOption = { type: 'child', option: child };\n        if (rest.disabled || child.disabled) {\n          childDropdownOption.disabled = true;\n        }\n        acc.push(childDropdownOption);\n        parentMap.set(childDropdownOption, parentDropdownOption);\n      });\n    } else {\n      const dropdownOption: DropdownOption = { option };\n      if (option.disabled) {\n        dropdownOption.disabled = true;\n      }\n      acc.push(dropdownOption);\n    }\n\n    return acc;\n  }, []);\n\n  return {\n    flatOptions,\n    parentMap,\n  };\n};\n"]}

package/lib/internal/template/internal/components/options-list/index.js

@@ -1,4 +1,3 @@
-import { __rest } from "tslib";
 // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 // SPDX-License-Identifier: Apache-2.0
 import React, { useEffect, useRef } from 'react';
@@ -14,8 +13,7 @@ const getItemIndex = (containerRef, event) => {
     const mouseTarget = target === null || target === void 0 ? void 0 : target.dataset.mouseTarget;
     return mouseTarget ? parseInt(mouseTarget) : -1;
 };
-const OptionsList = (_a, ref) => {
-    var { open, statusType, children, nativeAttributes = {}, onKeyDown, onBlur, onFocus, onLoadMore, onMouseUp, onMouseMove, position = 'relative', role = 'listbox', tagOverride: Tag = 'div', decreaseBlockMargin = false, ariaLabel, ariaLabelledby, ariaDescribedby, embedded, stickyItemBlockSize } = _a, restProps = __rest(_a, ["open", "statusType", "children", "nativeAttributes", "onKeyDown", "onBlur", "onFocus", "onLoadMore", "onMouseUp", "onMouseMove", "position", "role", "tagOverride", "decreaseBlockMargin", "ariaLabel", "ariaLabelledby", "ariaDescribedby", "embedded", "stickyItemBlockSize"]);
+const OptionsList = ({ open, statusType, children, nativeAttributes = {}, onKeyDown, onBlur, onFocus, onLoadMore, onMouseUp, onMouseMove, position = 'relative', role = 'listbox', tagOverride: Tag = 'div', decreaseBlockMargin = false, ariaLabel, ariaLabelledby, ariaDescribedby, embedded, stickyItemBlockSize, ...restProps }, ref) => {
     const baseProps = getBaseProps(restProps);
     const menuRef = useRef(null);
     const handleScroll = useStableCallback(() => {
@@ -38,7 +36,7 @@ const OptionsList = (_a, ref) => {
         [styles['options-list-embedded']]: embedded,
     });
     const mergedRef = useMergeRefs(ref, menuRef);
-    return (React.createElement(Tag, Object.assign({}, baseProps, nativeAttributes, { className: className, ref: mergedRef, style: { position, scrollPaddingBlockStart: stickyItemBlockSize !== null && stickyItemBlockSize !== void 0 ? stickyItemBlockSize : undefined }, role: role, onScroll: handleScroll, onKeyDown: event => fireKeyboardEvent(onKeyDown, event), onMouseMove: event => onMouseMove === null || onMouseMove === void 0 ? void 0 : onMouseMove(getItemIndex(menuRef, event)), onMouseUp: event => onMouseUp === null || onMouseUp === void 0 ? void 0 : onMouseUp(getItemIndex(menuRef, event)), onBlur: event => fireNonCancelableEvent(onBlur, { relatedTarget: event.relatedTarget }), onFocus: () => fireNonCancelableEvent(onFocus), tabIndex: embedded ? 0 : -1, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledby, "aria-describedby": ariaDescribedby }), open && children));
+    return (React.createElement(Tag, { ...baseProps, ...nativeAttributes, className: className, ref: mergedRef, style: { position, scrollPaddingBlockStart: stickyItemBlockSize !== null && stickyItemBlockSize !== void 0 ? stickyItemBlockSize : undefined }, role: role, onScroll: handleScroll, onKeyDown: event => fireKeyboardEvent(onKeyDown, event), onMouseMove: event => onMouseMove === null || onMouseMove === void 0 ? void 0 : onMouseMove(getItemIndex(menuRef, event)), onMouseUp: event => onMouseUp === null || onMouseUp === void 0 ? void 0 : onMouseUp(getItemIndex(menuRef, event)), onBlur: event => fireNonCancelableEvent(onBlur, { relatedTarget: event.relatedTarget }), onFocus: () => fireNonCancelableEvent(onFocus), tabIndex: embedded ? 0 : -1, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledby, "aria-describedby": ariaDescribedby }, open && children));
 };
 export default React.forwardRef(OptionsList);
 //# sourceMappingURL=index.js.map

package/lib/internal/template/internal/components/options-list/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/internal/components/options-list/index.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React, { useEffect, useRef } from 'react';\nimport clsx from 'clsx';\n\nimport { findUpUntil } from '@cloudscape-design/component-toolkit/dom';\nimport { useMergeRefs, useStableCallback } from '@cloudscape-design/component-toolkit/internal';\n\nimport { BaseComponentProps, getBaseProps } from '../../base-component';\nimport {\n  BaseKeyDetail,\n  CancelableEventHandler,\n  fireKeyboardEvent,\n  fireNonCancelableEvent,\n  NonCancelableEventHandler,\n} from '../../events';\nimport { DropdownStatusProps } from '../dropdown-status';\n\nimport styles from './styles.css.js';\n\nexport interface OptionsListProps extends BaseComponentProps {\n  open?: boolean;\n  statusType: DropdownStatusProps.StatusType;\n  /**\n   * Options list\n   */\n  children: React.ReactNode;\n  nativeAttributes?: Record<string, any>;\n  /**\n   * Called when more items need to be loaded.\n   */\n  onLoadMore?: NonCancelableEventHandler;\n  onKeyDown?: CancelableEventHandler<BaseKeyDetail>;\n  onBlur?: NonCancelableEventHandler<{ relatedTarget: Node | null }>;\n  onFocus?: NonCancelableEventHandler;\n  onMouseUp?: (itemIndex: number) => void;\n  onMouseMove?: (itemIndex: number) => void;\n  position?: React.CSSProperties['position'];\n  tagOverride?: 'div' | 'ul';\n  role?: 'listbox' | 'list' | 'menu';\n  ariaLabel?: string;\n  ariaLabelledby?: string;\n  ariaDescribedby?: string;\n  decreaseBlockMargin?: boolean;\n  embedded?: boolean;\n  stickyItemBlockSize?: number | null;\n}\n\nconst BOTTOM_TRIGGER_OFFSET = 80;\n\nconst getItemIndex = (containerRef: React.RefObject<HTMLElement>, event: React.MouseEvent) => {\n  const target = findUpUntil(\n    event.target as HTMLElement,\n    element => element === containerRef.current || !!element.dataset.mouseTarget\n  );\n  const mouseTarget = target?.dataset.mouseTarget;\n  return mouseTarget ? parseInt(mouseTarget) : -1;\n};\n\nconst OptionsList = (\n  {\n    open,\n    statusType,\n    children,\n    nativeAttributes = {},\n    onKeyDown,\n    onBlur,\n    onFocus,\n    onLoadMore,\n    onMouseUp,\n    onMouseMove,\n    position = 'relative',\n    role = 'listbox',\n    tagOverride: Tag = 'div',\n    decreaseBlockMargin = false,\n    ariaLabel,\n    ariaLabelledby,\n    ariaDescribedby,\n    embedded,\n    stickyItemBlockSize,\n    ...restProps\n  }: OptionsListProps,\n  ref: React.Ref<HTMLDivElement>\n) => {\n  const baseProps = getBaseProps(restProps);\n  const menuRef = useRef<HTMLElement>(null);\n\n  const handleScroll = useStableCallback(() => {\n    const scrollContainer = menuRef?.current;\n    if (scrollContainer) {\n      const bottomEdgePosition = scrollContainer.scrollTop + scrollContainer.clientHeight;\n      const remainingScrollHeight = scrollContainer.scrollHeight - bottomEdgePosition;\n      if (remainingScrollHeight < BOTTOM_TRIGGER_OFFSET) {\n        fireNonCancelableEvent(onLoadMore);\n      }\n    }\n  });\n\n  useEffect(() => {\n    if (open && statusType === 'pending') {\n      handleScroll();\n    }\n  }, [open, statusType, handleScroll]);\n\n  const className = clsx(styles['options-list'], {\n    [styles['decrease-block-margin']]: decreaseBlockMargin,\n    [styles['options-list-embedded']]: embedded,\n  });\n\n  const mergedRef = useMergeRefs(ref, menuRef);\n\n  return (\n    <Tag\n      {...baseProps}\n      {...nativeAttributes}\n      className={className}\n      ref={mergedRef}\n      style={{ position, scrollPaddingBlockStart: stickyItemBlockSize ?? undefined }}\n      role={role}\n      onScroll={handleScroll}\n      onKeyDown={event => fireKeyboardEvent(onKeyDown, event)}\n      onMouseMove={event => onMouseMove?.(getItemIndex(menuRef, event))}\n      onMouseUp={event => onMouseUp?.(getItemIndex(menuRef, event))}\n      onBlur={event => fireNonCancelableEvent(onBlur, { relatedTarget: event.relatedTarget })}\n      onFocus={() => fireNonCancelableEvent(onFocus)}\n      tabIndex={embedded ? 0 : -1}\n      aria-label={ariaLabel}\n      aria-labelledby={ariaLabelledby}\n      aria-describedby={ariaDescribedby}\n    >\n      {open && children}\n    </Tag>\n  );\n};\n\nexport default React.forwardRef(OptionsList);\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/internal/components/options-list/index.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React, { useEffect, useRef } from 'react';\nimport clsx from 'clsx';\n\nimport { findUpUntil } from '@cloudscape-design/component-toolkit/dom';\nimport { useMergeRefs, useStableCallback } from '@cloudscape-design/component-toolkit/internal';\n\nimport { BaseComponentProps, getBaseProps } from '../../base-component';\nimport {\n  BaseKeyDetail,\n  CancelableEventHandler,\n  fireKeyboardEvent,\n  fireNonCancelableEvent,\n  NonCancelableEventHandler,\n} from '../../events';\nimport { DropdownStatusProps } from '../dropdown-status';\n\nimport styles from './styles.css.js';\n\nexport interface OptionsListProps extends BaseComponentProps {\n  open?: boolean;\n  statusType: DropdownStatusProps.StatusType;\n  /**\n   * Options list\n   */\n  children: React.ReactNode;\n  nativeAttributes?: Record<string, any>;\n  /**\n   * Called when more items need to be loaded.\n   */\n  onLoadMore?: NonCancelableEventHandler;\n  onKeyDown?: CancelableEventHandler<BaseKeyDetail>;\n  onBlur?: NonCancelableEventHandler<{ relatedTarget: Node | null }>;\n  onFocus?: NonCancelableEventHandler;\n  onMouseUp?: (itemIndex: number) => void;\n  onMouseMove?: (itemIndex: number) => void;\n  position?: React.CSSProperties['position'];\n  tagOverride?: 'div' | 'ul';\n  role?: 'listbox' | 'list' | 'menu';\n  ariaLabel?: string;\n  ariaLabelledby?: string;\n  ariaDescribedby?: string;\n  decreaseBlockMargin?: boolean;\n  embedded?: boolean;\n  stickyItemBlockSize?: number | null;\n}\n\nconst BOTTOM_TRIGGER_OFFSET = 80;\n\nconst getItemIndex = (containerRef: React.RefObject<HTMLElement>, event: React.MouseEvent) => {\n  const target = findUpUntil(\n    event.target as HTMLElement,\n    element => element === containerRef.current || !!element.dataset.mouseTarget\n  );\n  const mouseTarget = target?.dataset.mouseTarget;\n  return mouseTarget ? parseInt(mouseTarget) : -1;\n};\n\nconst OptionsList = (\n  {\n    open,\n    statusType,\n    children,\n    nativeAttributes = {},\n    onKeyDown,\n    onBlur,\n    onFocus,\n    onLoadMore,\n    onMouseUp,\n    onMouseMove,\n    position = 'relative',\n    role = 'listbox',\n    tagOverride: Tag = 'div',\n    decreaseBlockMargin = false,\n    ariaLabel,\n    ariaLabelledby,\n    ariaDescribedby,\n    embedded,\n    stickyItemBlockSize,\n    ...restProps\n  }: OptionsListProps,\n  ref: React.Ref<HTMLDivElement>\n) => {\n  const baseProps = getBaseProps(restProps);\n  const menuRef = useRef<HTMLElement>(null);\n\n  const handleScroll = useStableCallback(() => {\n    const scrollContainer = menuRef?.current;\n    if (scrollContainer) {\n      const bottomEdgePosition = scrollContainer.scrollTop + scrollContainer.clientHeight;\n      const remainingScrollHeight = scrollContainer.scrollHeight - bottomEdgePosition;\n      if (remainingScrollHeight < BOTTOM_TRIGGER_OFFSET) {\n        fireNonCancelableEvent(onLoadMore);\n      }\n    }\n  });\n\n  useEffect(() => {\n    if (open && statusType === 'pending') {\n      handleScroll();\n    }\n  }, [open, statusType, handleScroll]);\n\n  const className = clsx(styles['options-list'], {\n    [styles['decrease-block-margin']]: decreaseBlockMargin,\n    [styles['options-list-embedded']]: embedded,\n  });\n\n  const mergedRef = useMergeRefs(ref, menuRef);\n\n  return (\n    <Tag\n      {...baseProps}\n      {...nativeAttributes}\n      className={className}\n      ref={mergedRef}\n      style={{ position, scrollPaddingBlockStart: stickyItemBlockSize ?? undefined }}\n      role={role}\n      onScroll={handleScroll}\n      onKeyDown={event => fireKeyboardEvent(onKeyDown, event)}\n      onMouseMove={event => onMouseMove?.(getItemIndex(menuRef, event))}\n      onMouseUp={event => onMouseUp?.(getItemIndex(menuRef, event))}\n      onBlur={event => fireNonCancelableEvent(onBlur, { relatedTarget: event.relatedTarget })}\n      onFocus={() => fireNonCancelableEvent(onFocus)}\n      tabIndex={embedded ? 0 : -1}\n      aria-label={ariaLabel}\n      aria-labelledby={ariaLabelledby}\n      aria-describedby={ariaDescribedby}\n    >\n      {open && children}\n    </Tag>\n  );\n};\n\nexport default React.forwardRef(OptionsList);\n"]}

package/lib/internal/template/internal/components/screenreader-only/index.js

@@ -18,6 +18,6 @@ import styles from './styles.css.js';
  * ```
  */
 export default function ScreenreaderOnly(props) {
-    return React.createElement("span", Object.assign({}, props, { className: clsx(styles.root, props.className) }));
+    return React.createElement("span", { ...props, className: clsx(styles.root, props.className) });
 }
 //# sourceMappingURL=index.js.map

package/lib/internal/template/internal/components/screenreader-only/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/internal/components/screenreader-only/index.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AAEtC,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,IAAI,MAAM,MAAM,CAAC;AAExB,OAAO,MAAM,MAAM,iBAAiB,CAAC;AAQrC;;;;;;;;;;;;;GAaG;AACH,MAAM,CAAC,OAAO,UAAU,gBAAgB,CAAC,KAA4B;IACnE,OAAO,8CAAU,KAAK,IAAE,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,IAAI,EAAE,KAAK,CAAC,SAAS,CAAC,IAAI,CAAC;AAC5E,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport React from 'react';\nimport clsx from 'clsx';\n\nimport styles from './styles.css.js';\n\ninterface ScreenreaderOnlyProps {\n  id?: string;\n  className?: string;\n  children?: React.ReactNode;\n}\n\n/**\n * Makes content now shown on a screen but still announced by screen-reader users.\n * The component is suitable when the aria-label cannot be used, e.g. to avoid elemnts being announced as \"blank\".\n *\n * To exclude screenreader-only content use `:not(.${screenreaderOnlyStyles.root})` selector, for example:\n *\n * ```\n * import screenreaderOnlyStyles from '~internal/components/screenreader-only/styles.css.js'\n *\n * let visibleContent = wrapper.find(`${styles.label}`).find(`:not(.${screenreaderOnlyStyles.root})`).getElement().textContent\n *\n * let screenreaderContent = wrapper.find(`${styles.label}`).find(`.${screenreaderOnlyStyles.root}`).getElement().textContent\n * ```\n */\nexport default function ScreenreaderOnly(props: ScreenreaderOnlyProps) {\n  return <span {...props} className={clsx(styles.root, props.className)} />;\n}\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/internal/components/screenreader-only/index.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AAEtC,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,IAAI,MAAM,MAAM,CAAC;AAExB,OAAO,MAAM,MAAM,iBAAiB,CAAC;AAQrC;;;;;;;;;;;;;GAaG;AACH,MAAM,CAAC,OAAO,UAAU,gBAAgB,CAAC,KAA4B;IACnE,OAAO,iCAAU,KAAK,EAAE,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,IAAI,EAAE,KAAK,CAAC,SAAS,CAAC,GAAI,CAAC;AAC5E,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport React from 'react';\nimport clsx from 'clsx';\n\nimport styles from './styles.css.js';\n\ninterface ScreenreaderOnlyProps {\n  id?: string;\n  className?: string;\n  children?: React.ReactNode;\n}\n\n/**\n * Makes content now shown on a screen but still announced by screen-reader users.\n * The component is suitable when the aria-label cannot be used, e.g. to avoid elemnts being announced as \"blank\".\n *\n * To exclude screenreader-only content use `:not(.${screenreaderOnlyStyles.root})` selector, for example:\n *\n * ```\n * import screenreaderOnlyStyles from '~internal/components/screenreader-only/styles.css.js'\n *\n * let visibleContent = wrapper.find(`${styles.label}`).find(`:not(.${screenreaderOnlyStyles.root})`).getElement().textContent\n *\n * let screenreaderContent = wrapper.find(`${styles.label}`).find(`.${screenreaderOnlyStyles.root}`).getElement().textContent\n * ```\n */\nexport default function ScreenreaderOnly(props: ScreenreaderOnlyProps) {\n  return <span {...props} className={clsx(styles.root, props.className)} />;\n}\n"]}

package/lib/internal/template/internal/components/selectable-item/analytics-metadata/utils.js

@@ -1,10 +1,8 @@
 // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 // SPDX-License-Identifier: Apache-2.0
-import { __rest } from "tslib";
 import optionAnalyticsSelectors from './../../option/analytics-metadata/styles.css.js';
 import analyticsSelectors from './styles.css.js';
-export const getAnalyticsSelectActionMetadata = (_a) => {
-    var { isChild, value } = _a, restProps = __rest(_a, ["isChild", "value"]);
+export const getAnalyticsSelectActionMetadata = ({ isChild, value, ...restProps }) => {
     const dataAttributes = restProps;
     const analyticsMetadata = {
         action: 'select',

package/lib/internal/template/internal/components/selectable-item/analytics-metadata/utils.js.map

@@ -1 +1 @@
-{"version":3,"file":"utils.js","sourceRoot":"","sources":["../../../../../../src/internal/components/selectable-item/analytics-metadata/utils.ts"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;;AAKtC,OAAO,wBAAwB,MAAM,iDAAiD,CAAC;AACvF,OAAO,kBAAkB,MAAM,iBAAiB,CAAC;AAEjD,MAAM,CAAC,MAAM,gCAAgC,GAAG,CAAC,EAIlB,EAAkD,EAAE;QAJlC,EAC/C,OAAO,EACP,KAAK,OAEwB,EAD1B,SAAS,cAHmC,oBAIhD,CADa;IAEZ,MAAM,cAAc,GAAG,SAA+B,CAAC;IAEvD,MAAM,iBAAiB,GAAmD;QACxE,MAAM,EAAE,QAAQ;QAChB,MAAM,EAAE;YACN,KAAK,EAAE;gBACL,QAAQ,EAAE,CAAC,IAAI,wBAAwB,CAAC,KAAK,EAAE,EAAE,IAAI,kBAAkB,CAAC,gBAAgB,CAAC,EAAE,CAAC;aAC7F;SACF;KACF,CAAC;IAEF,IAAI,QAAQ,GAAG,SAAS,CAAC;IACzB,IACE,CAAC,OAAO,IAAI,cAAc,CAAC,kBAAkB,CAAC,IAAI,cAAc,CAAC,qBAAqB,CAAC,CAAC;QACxF,cAAc,CAAC,kBAAkB,CAAC,EAClC,CAAC;QACD,QAAQ,GAAG,GAAG,cAAc,CAAC,kBAAkB,CAAC,IAAI,cAAc,CAAC,qBAAqB,CAAC,IAAI,cAAc,CAAC,kBAAkB,CAAC,EAAE,CAAC;IACpI,CAAC;SAAM,IAAI,cAAc,CAAC,iBAAiB,CAAC,EAAE,CAAC;QAC7C,QAAQ,GAAG,GAAG,cAAc,CAAC,iBAAiB,CAAC,EAAE,CAAC;IACpD,CAAC;IACD,IAAI,QAAQ,EAAE,CAAC;QACb,iBAAiB,CAAC,MAAM,CAAC,QAAQ,GAAG,QAAQ,CAAC;IAC/C,CAAC;IACD,IAAI,KAAK,EAAE,CAAC;QACV,iBAAiB,CAAC,MAAM,CAAC,KAAK,GAAG,KAAK,CAAC;IACzC,CAAC;IACD,IAAI,OAAO,EAAE,CAAC;QACZ,iBAAiB,CAAC,MAAM,CAAC,UAAU,GAAG;YACpC,IAAI,EAAE,MAAM;YACZ,QAAQ,EAAE,IAAI,kBAAkB,CAAC,MAAM,sBAAsB,cAAc,CAAC,kBAAkB,CAAC,OAAO,kBAAkB,CAAC,gBAAgB,CAAC,EAAE;SAC7I,CAAC;IACJ,CAAC;IACD,OAAO,iBAAiB,CAAC;AAC3B,CAAC,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport { ItemDataAttributes, SelectableItemProps } from '../interfaces';\nimport { GeneratedAnalyticsMetadataSelectableItemSelect } from './interfaces';\n\nimport optionAnalyticsSelectors from './../../option/analytics-metadata/styles.css.js';\nimport analyticsSelectors from './styles.css.js';\n\nexport const getAnalyticsSelectActionMetadata = ({\n  isChild,\n  value,\n  ...restProps\n}: Partial<SelectableItemProps>): GeneratedAnalyticsMetadataSelectableItemSelect => {\n  const dataAttributes = restProps as ItemDataAttributes;\n\n  const analyticsMetadata: GeneratedAnalyticsMetadataSelectableItemSelect = {\n    action: 'select',\n    detail: {\n      label: {\n        selector: [`.${optionAnalyticsSelectors.label}`, `.${analyticsSelectors['option-content']}`],\n      },\n    },\n  };\n\n  let position = undefined;\n  if (\n    (isChild && dataAttributes['data-group-index'] && dataAttributes['data-in-group-index']) ||\n    dataAttributes['data-child-index']\n  ) {\n    position = `${dataAttributes['data-group-index']},${dataAttributes['data-in-group-index'] || dataAttributes['data-child-index']}`;\n  } else if (dataAttributes['data-test-index']) {\n    position = `${dataAttributes['data-test-index']}`;\n  }\n  if (position) {\n    analyticsMetadata.detail.position = position;\n  }\n  if (value) {\n    analyticsMetadata.detail.value = value;\n  }\n  if (isChild) {\n    analyticsMetadata.detail.groupLabel = {\n      root: 'body',\n      selector: `.${analyticsSelectors.parent}[data-group-index=\"${dataAttributes['data-group-index']}\"] .${analyticsSelectors['option-content']}`,\n    };\n  }\n  return analyticsMetadata;\n};\n"]}
+{"version":3,"file":"utils.js","sourceRoot":"","sources":["../../../../../../src/internal/components/selectable-item/analytics-metadata/utils.ts"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AAKtC,OAAO,wBAAwB,MAAM,iDAAiD,CAAC;AACvF,OAAO,kBAAkB,MAAM,iBAAiB,CAAC;AAEjD,MAAM,CAAC,MAAM,gCAAgC,GAAG,CAAC,EAC/C,OAAO,EACP,KAAK,EACL,GAAG,SAAS,EACiB,EAAkD,EAAE;IACjF,MAAM,cAAc,GAAG,SAA+B,CAAC;IAEvD,MAAM,iBAAiB,GAAmD;QACxE,MAAM,EAAE,QAAQ;QAChB,MAAM,EAAE;YACN,KAAK,EAAE;gBACL,QAAQ,EAAE,CAAC,IAAI,wBAAwB,CAAC,KAAK,EAAE,EAAE,IAAI,kBAAkB,CAAC,gBAAgB,CAAC,EAAE,CAAC;aAC7F;SACF;KACF,CAAC;IAEF,IAAI,QAAQ,GAAG,SAAS,CAAC;IACzB,IACE,CAAC,OAAO,IAAI,cAAc,CAAC,kBAAkB,CAAC,IAAI,cAAc,CAAC,qBAAqB,CAAC,CAAC;QACxF,cAAc,CAAC,kBAAkB,CAAC,EAClC,CAAC;QACD,QAAQ,GAAG,GAAG,cAAc,CAAC,kBAAkB,CAAC,IAAI,cAAc,CAAC,qBAAqB,CAAC,IAAI,cAAc,CAAC,kBAAkB,CAAC,EAAE,CAAC;IACpI,CAAC;SAAM,IAAI,cAAc,CAAC,iBAAiB,CAAC,EAAE,CAAC;QAC7C,QAAQ,GAAG,GAAG,cAAc,CAAC,iBAAiB,CAAC,EAAE,CAAC;IACpD,CAAC;IACD,IAAI,QAAQ,EAAE,CAAC;QACb,iBAAiB,CAAC,MAAM,CAAC,QAAQ,GAAG,QAAQ,CAAC;IAC/C,CAAC;IACD,IAAI,KAAK,EAAE,CAAC;QACV,iBAAiB,CAAC,MAAM,CAAC,KAAK,GAAG,KAAK,CAAC;IACzC,CAAC;IACD,IAAI,OAAO,EAAE,CAAC;QACZ,iBAAiB,CAAC,MAAM,CAAC,UAAU,GAAG;YACpC,IAAI,EAAE,MAAM;YACZ,QAAQ,EAAE,IAAI,kBAAkB,CAAC,MAAM,sBAAsB,cAAc,CAAC,kBAAkB,CAAC,OAAO,kBAAkB,CAAC,gBAAgB,CAAC,EAAE;SAC7I,CAAC;IACJ,CAAC;IACD,OAAO,iBAAiB,CAAC;AAC3B,CAAC,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport { ItemDataAttributes, SelectableItemProps } from '../interfaces';\nimport { GeneratedAnalyticsMetadataSelectableItemSelect } from './interfaces';\n\nimport optionAnalyticsSelectors from './../../option/analytics-metadata/styles.css.js';\nimport analyticsSelectors from './styles.css.js';\n\nexport const getAnalyticsSelectActionMetadata = ({\n  isChild,\n  value,\n  ...restProps\n}: Partial<SelectableItemProps>): GeneratedAnalyticsMetadataSelectableItemSelect => {\n  const dataAttributes = restProps as ItemDataAttributes;\n\n  const analyticsMetadata: GeneratedAnalyticsMetadataSelectableItemSelect = {\n    action: 'select',\n    detail: {\n      label: {\n        selector: [`.${optionAnalyticsSelectors.label}`, `.${analyticsSelectors['option-content']}`],\n      },\n    },\n  };\n\n  let position = undefined;\n  if (\n    (isChild && dataAttributes['data-group-index'] && dataAttributes['data-in-group-index']) ||\n    dataAttributes['data-child-index']\n  ) {\n    position = `${dataAttributes['data-group-index']},${dataAttributes['data-in-group-index'] || dataAttributes['data-child-index']}`;\n  } else if (dataAttributes['data-test-index']) {\n    position = `${dataAttributes['data-test-index']}`;\n  }\n  if (position) {\n    analyticsMetadata.detail.position = position;\n  }\n  if (value) {\n    analyticsMetadata.detail.value = value;\n  }\n  if (isChild) {\n    analyticsMetadata.detail.groupLabel = {\n      root: 'body',\n      selector: `.${analyticsSelectors.parent}[data-group-index=\"${dataAttributes['data-group-index']}\"] .${analyticsSelectors['option-content']}`,\n    };\n  }\n  return analyticsMetadata;\n};\n"]}

package/lib/internal/template/internal/components/selectable-item/index.js

@@ -1,4 +1,3 @@
-import { __rest } from "tslib";
 // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 // SPDX-License-Identifier: Apache-2.0
 import React, { useLayoutEffect, useRef } from 'react';
@@ -9,10 +8,9 @@ import { getBaseProps } from '../../base-component';
 import { getAnalyticsSelectActionMetadata } from './analytics-metadata/utils';
 import analyticsSelectors from './analytics-metadata/styles.css.js';
 import styles from './styles.css.js';
-const SelectableItem = (_a, ref) => {
-    var { children: content, ariaSelected, ariaChecked, selected, highlighted, disabled, hasBackground, isParent, isChild, isSelectAll, virtualPosition, padBottom, isNextSelected, isPreviousSelected, useInteractiveGroups, screenReaderContent, ariaPosinset, ariaSetsize, highlightType, value, sticky, afterHeader, withScrollbar } = _a, restProps = __rest(_a, ["children", "ariaSelected", "ariaChecked", "selected", "highlighted", "disabled", "hasBackground", "isParent", "isChild", "isSelectAll", "virtualPosition", "padBottom", "isNextSelected", "isPreviousSelected", "useInteractiveGroups", "screenReaderContent", "ariaPosinset", "ariaSetsize", "highlightType", "value", "sticky", "afterHeader", "withScrollbar"]);
+const SelectableItem = ({ children: content, ariaSelected, ariaChecked, selected, highlighted, disabled, hasBackground, isParent, isChild, isSelectAll, virtualPosition, padBottom, isNextSelected, isPreviousSelected, useInteractiveGroups, screenReaderContent, ariaPosinset, ariaSetsize, highlightType, value, sticky, afterHeader, withScrollbar, ...restProps }, ref) => {
     const isVisualRefresh = useVisualRefresh();
-    const _b = getBaseProps(restProps), { className } = _b, rest = __rest(_b, ["className"]);
+    const { className, ...rest } = getBaseProps(restProps);
     const classNames = clsx(className, styles['selectable-item'], {
         [styles.selected]: selected,
         [styles.highlighted]: highlighted,
@@ -77,9 +75,9 @@ const SelectableItem = (_a, ref) => {
             a11yProperties['aria-describedby'] = restProps.ariaDescribedby;
         }
     }
-    return (React.createElement("div", Object.assign({ className: classNames, style: style }, a11yProperties, rest, (isParent || disabled
-        ? {}
-        : getAnalyticsMetadataAttribute(getAnalyticsSelectActionMetadata(Object.assign({ isChild, value }, restProps))))),
+    return (React.createElement("div", { className: classNames, style: style, ...a11yProperties, ...rest, ...(isParent || disabled
+            ? {}
+            : getAnalyticsMetadataAttribute(getAnalyticsSelectActionMetadata({ isChild, value, ...restProps }))) },
         React.createElement("div", { className: clsx(styles['option-content'], analyticsSelectors['option-content']), ref: contentRef }, content),
         React.createElement("div", { className: styles['measure-strut'], ref: ref }),
         React.createElement("div", { className: styles['screenreader-content'], ref: screenReaderContentRef })));

package/lib/internal/template/internal/components/selectable-item/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/internal/components/selectable-item/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, { useLayoutEffect, useRef } from 'react';\nimport clsx from 'clsx';\n\nimport { getAnalyticsMetadataAttribute } from '@cloudscape-design/component-toolkit/internal/analytics-metadata';\n\nimport { useVisualRefresh } from '../../../internal/hooks/use-visual-mode';\nimport { getBaseProps } from '../../base-component';\nimport { getAnalyticsSelectActionMetadata } from './analytics-metadata/utils';\nimport { SelectableItemProps } from './interfaces';\n\nimport analyticsSelectors from './analytics-metadata/styles.css.js';\nimport styles from './styles.css.js';\n\nexport { SelectableItemProps };\n\nconst SelectableItem = (\n  {\n    children: content,\n    ariaSelected,\n    ariaChecked,\n    selected,\n    highlighted,\n    disabled,\n    hasBackground,\n    isParent,\n    isChild,\n    isSelectAll,\n    virtualPosition,\n    padBottom,\n    isNextSelected,\n    isPreviousSelected,\n    useInteractiveGroups,\n    screenReaderContent,\n    ariaPosinset,\n    ariaSetsize,\n    highlightType,\n    value,\n    sticky,\n    afterHeader,\n    withScrollbar,\n    ...restProps\n  }: SelectableItemProps,\n  ref: React.Ref<HTMLDivElement>\n) => {\n  const isVisualRefresh = useVisualRefresh();\n  const { className, ...rest } = getBaseProps(restProps);\n  const classNames = clsx(className, styles['selectable-item'], {\n    [styles.selected]: selected,\n    [styles.highlighted]: highlighted,\n    [styles['has-background']]: hasBackground,\n    [styles.parent]: isParent,\n    [analyticsSelectors.parent]: isParent,\n    [styles.child]: isChild,\n    [styles['select-all']]: isSelectAll,\n    [styles['is-keyboard']]: highlightType === 'keyboard',\n    [styles.disabled]: disabled,\n    [styles.virtual]: virtualPosition !== undefined && !sticky,\n    [styles['pad-bottom']]: padBottom,\n    [styles['next-item-selected']]: isNextSelected,\n    [styles['previous-item-selected']]: isPreviousSelected,\n    [styles.interactiveGroups]: useInteractiveGroups,\n    [styles.sticky]: sticky,\n    [styles['after-header']]: !!afterHeader,\n    [styles['with-scrollbar']]: withScrollbar,\n    [styles['visual-refresh']]: isVisualRefresh,\n  });\n\n  const contentRef = useRef<HTMLDivElement>(null);\n  const screenReaderContentRef = useRef<HTMLDivElement>(null);\n\n  useLayoutEffect(() => {\n    // the state of aria-hidden and announcement is not set back because NVDA+Firefox would announce\n    // the item which lost highlight\n    // set aria-hidden true when there is announcement content, so that screen reader still announce\n    // meaningful content when navigate with screen reader cursor\n    // imperatively update to avoid announcement made multiple times when content updates\n    if (highlighted && screenReaderContent) {\n      if (contentRef.current) {\n        contentRef.current.setAttribute('aria-hidden', 'true');\n      }\n      if (screenReaderContentRef.current) {\n        screenReaderContentRef.current.textContent = screenReaderContent;\n      }\n    }\n  }, [highlighted, screenReaderContent, contentRef, screenReaderContentRef]);\n\n  const style =\n    virtualPosition !== undefined\n      ? {\n          transform: `translateY(${virtualPosition}px)`,\n        }\n      : undefined;\n\n  const a11yProperties: Record<string, string | number | boolean | undefined> = {};\n\n  if (isParent && ariaChecked === undefined) {\n    a11yProperties.role = 'presentation';\n  } else {\n    a11yProperties.role = 'option';\n    a11yProperties['aria-disabled'] = disabled;\n\n    if (ariaSelected !== undefined) {\n      a11yProperties['aria-selected'] = ariaSelected;\n    }\n\n    // Safari+VO needs aria-checked for multi-selection. Otherwise it only announces selected option even though another option is highlighted.\n    if (ariaChecked !== undefined) {\n      a11yProperties['aria-checked'] = ariaChecked;\n    }\n\n    if (ariaPosinset && ariaSetsize) {\n      a11yProperties['aria-posinset'] = ariaPosinset;\n      a11yProperties['aria-setsize'] = ariaSetsize;\n    }\n\n    if (restProps.ariaDescribedby) {\n      a11yProperties['aria-describedby'] = restProps.ariaDescribedby;\n    }\n  }\n\n  return (\n    <div\n      className={classNames}\n      style={style}\n      {...a11yProperties}\n      {...rest}\n      {...(isParent || disabled\n        ? {}\n        : getAnalyticsMetadataAttribute(getAnalyticsSelectActionMetadata({ isChild, value, ...restProps })))}\n    >\n      <div className={clsx(styles['option-content'], analyticsSelectors['option-content'])} ref={contentRef}>\n        {content}\n      </div>\n      <div className={styles['measure-strut']} ref={ref} />\n      <div className={styles['screenreader-content']} ref={screenReaderContentRef}></div>\n    </div>\n  );\n};\n\nexport default React.forwardRef(SelectableItem);\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/internal/components/selectable-item/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, { useLayoutEffect, useRef } from 'react';\nimport clsx from 'clsx';\n\nimport { getAnalyticsMetadataAttribute } from '@cloudscape-design/component-toolkit/internal/analytics-metadata';\n\nimport { useVisualRefresh } from '../../../internal/hooks/use-visual-mode';\nimport { getBaseProps } from '../../base-component';\nimport { getAnalyticsSelectActionMetadata } from './analytics-metadata/utils';\nimport { SelectableItemProps } from './interfaces';\n\nimport analyticsSelectors from './analytics-metadata/styles.css.js';\nimport styles from './styles.css.js';\n\nexport { SelectableItemProps };\n\nconst SelectableItem = (\n  {\n    children: content,\n    ariaSelected,\n    ariaChecked,\n    selected,\n    highlighted,\n    disabled,\n    hasBackground,\n    isParent,\n    isChild,\n    isSelectAll,\n    virtualPosition,\n    padBottom,\n    isNextSelected,\n    isPreviousSelected,\n    useInteractiveGroups,\n    screenReaderContent,\n    ariaPosinset,\n    ariaSetsize,\n    highlightType,\n    value,\n    sticky,\n    afterHeader,\n    withScrollbar,\n    ...restProps\n  }: SelectableItemProps,\n  ref: React.Ref<HTMLDivElement>\n) => {\n  const isVisualRefresh = useVisualRefresh();\n  const { className, ...rest } = getBaseProps(restProps);\n  const classNames = clsx(className, styles['selectable-item'], {\n    [styles.selected]: selected,\n    [styles.highlighted]: highlighted,\n    [styles['has-background']]: hasBackground,\n    [styles.parent]: isParent,\n    [analyticsSelectors.parent]: isParent,\n    [styles.child]: isChild,\n    [styles['select-all']]: isSelectAll,\n    [styles['is-keyboard']]: highlightType === 'keyboard',\n    [styles.disabled]: disabled,\n    [styles.virtual]: virtualPosition !== undefined && !sticky,\n    [styles['pad-bottom']]: padBottom,\n    [styles['next-item-selected']]: isNextSelected,\n    [styles['previous-item-selected']]: isPreviousSelected,\n    [styles.interactiveGroups]: useInteractiveGroups,\n    [styles.sticky]: sticky,\n    [styles['after-header']]: !!afterHeader,\n    [styles['with-scrollbar']]: withScrollbar,\n    [styles['visual-refresh']]: isVisualRefresh,\n  });\n\n  const contentRef = useRef<HTMLDivElement>(null);\n  const screenReaderContentRef = useRef<HTMLDivElement>(null);\n\n  useLayoutEffect(() => {\n    // the state of aria-hidden and announcement is not set back because NVDA+Firefox would announce\n    // the item which lost highlight\n    // set aria-hidden true when there is announcement content, so that screen reader still announce\n    // meaningful content when navigate with screen reader cursor\n    // imperatively update to avoid announcement made multiple times when content updates\n    if (highlighted && screenReaderContent) {\n      if (contentRef.current) {\n        contentRef.current.setAttribute('aria-hidden', 'true');\n      }\n      if (screenReaderContentRef.current) {\n        screenReaderContentRef.current.textContent = screenReaderContent;\n      }\n    }\n  }, [highlighted, screenReaderContent, contentRef, screenReaderContentRef]);\n\n  const style =\n    virtualPosition !== undefined\n      ? {\n          transform: `translateY(${virtualPosition}px)`,\n        }\n      : undefined;\n\n  const a11yProperties: Record<string, string | number | boolean | undefined> = {};\n\n  if (isParent && ariaChecked === undefined) {\n    a11yProperties.role = 'presentation';\n  } else {\n    a11yProperties.role = 'option';\n    a11yProperties['aria-disabled'] = disabled;\n\n    if (ariaSelected !== undefined) {\n      a11yProperties['aria-selected'] = ariaSelected;\n    }\n\n    // Safari+VO needs aria-checked for multi-selection. Otherwise it only announces selected option even though another option is highlighted.\n    if (ariaChecked !== undefined) {\n      a11yProperties['aria-checked'] = ariaChecked;\n    }\n\n    if (ariaPosinset && ariaSetsize) {\n      a11yProperties['aria-posinset'] = ariaPosinset;\n      a11yProperties['aria-setsize'] = ariaSetsize;\n    }\n\n    if (restProps.ariaDescribedby) {\n      a11yProperties['aria-describedby'] = restProps.ariaDescribedby;\n    }\n  }\n\n  return (\n    <div\n      className={classNames}\n      style={style}\n      {...a11yProperties}\n      {...rest}\n      {...(isParent || disabled\n        ? {}\n        : getAnalyticsMetadataAttribute(getAnalyticsSelectActionMetadata({ isChild, value, ...restProps })))}\n    >\n      <div className={clsx(styles['option-content'], analyticsSelectors['option-content'])} ref={contentRef}>\n        {content}\n      </div>\n      <div className={styles['measure-strut']} ref={ref} />\n      <div className={styles['screenreader-content']} ref={screenReaderContentRef}></div>\n    </div>\n  );\n};\n\nexport default React.forwardRef(SelectableItem);\n"]}

package/lib/internal/template/internal/components/sortable-area/index.js

@@ -20,7 +20,7 @@ export default function SortableArea({ items, itemDefinition, renderItem, onItem
     });
     const activeItem = activeItemId ? items.find(item => itemDefinition.id(item) === activeItemId) : null;
     const isDragging = activeItemId !== null;
-    const announcements = useLiveAnnouncements(Object.assign({ items, itemDefinition, isDragging }, i18nStrings));
+    const announcements = useLiveAnnouncements({ items, itemDefinition, isDragging, ...i18nStrings });
     const portalContainer = usePortalContainer();
     return (React.createElement(DndContext, { sensors: sensors, collisionDetection: collisionDetection, accessibility: {
             announcements,
@@ -81,14 +81,17 @@ function DraggableItem({ item, itemDefinition, dragHandleAriaLabel, showDirectio
     const style = { transform: CSS.Translate.toString(transform) };
     const dragHandleListeners = attributes['aria-disabled']
         ? {}
-        : Object.assign(Object.assign({}, listeners), { onKeyDown: (event) => {
+        : {
+            ...listeners,
+            onKeyDown: (event) => {
                 if (onKeyDown) {
                     onKeyDown(event);
                 }
                 if (listeners === null || listeners === void 0 ? void 0 : listeners.onKeyDown) {
                     listeners.onKeyDown(event);
                 }
-            } });
+            },
+        };
     const className = clsx(isDragging && clsx(styles.placeholder, styles[`placeholder-${getBorderRadiusVariant(itemDefinition)}`]), isSorting && styles.sorting);
     const dragHandleRef = useRef(null);
     return (React.createElement(React.Fragment, null, renderItem({
@@ -100,12 +103,21 @@ function DraggableItem({ item, itemDefinition, dragHandleAriaLabel, showDirectio
         isDropPlaceholder: isDragging,
         isSortingActive: isSorting,
         isDragGhost: false,
-        dragHandleProps: Object.assign(Object.assign({}, dragHandleListeners), { ariaLabel: (_a = joinStrings(dragHandleAriaLabel, itemDefinition.label(item))) !== null && _a !== void 0 ? _a : '', ariaDescribedby: attributes['aria-describedby'], disabled: attributes['aria-disabled'], triggerMode: 'controlled', controlledShowButtons: showDirectionButtons, ref: dragHandleRef, directions: showDirectionButtons
+        dragHandleProps: {
+            ...dragHandleListeners,
+            ariaLabel: (_a = joinStrings(dragHandleAriaLabel, itemDefinition.label(item))) !== null && _a !== void 0 ? _a : '',
+            ariaDescribedby: attributes['aria-describedby'],
+            disabled: attributes['aria-disabled'],
+            triggerMode: 'controlled',
+            controlledShowButtons: showDirectionButtons,
+            ref: dragHandleRef,
+            directions: showDirectionButtons
                 ? {
                     'block-start': 'active',
                     'block-end': 'active',
                 }
-                : undefined, onDirectionClick: direction => {
+                : undefined,
+            onDirectionClick: direction => {
                 var _a;
                 const event = new Event(direction === 'block-start' ? EventName.CustomUp : EventName.CustomDown, {
                     bubbles: true,
@@ -113,7 +125,8 @@ function DraggableItem({ item, itemDefinition, dragHandleAriaLabel, showDirectio
                 });
                 onKeyDown(event);
                 (_a = dragHandleRef.current) === null || _a === void 0 ? void 0 : _a.dispatchEvent(event);
-            } }),
+            },
+        },
     })));
 }
 export function getBorderRadiusVariant(itemDefinition) {

package/lib/internal/template/internal/components/sortable-area/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/internal/components/sortable-area/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\n\nimport React, { useEffect, useRef } from 'react';\nimport { DndContext, DragOverlay } from '@dnd-kit/core';\nimport { arrayMove, SortableContext, useSortable, verticalListSortingStrategy } from '@dnd-kit/sortable';\nimport { CSS } from '@dnd-kit/utilities';\nimport clsx from 'clsx';\n\nimport { Portal } from '@cloudscape-design/component-toolkit/internal';\n\nimport { fireNonCancelableEvent } from '../../events';\nimport { joinStrings } from '../../utils/strings';\nimport { SortableAreaProps } from './interfaces';\nimport { EventName } from './keyboard-sensor/utilities/events';\nimport useDragAndDropReorder from './use-drag-and-drop-reorder';\nimport useLiveAnnouncements from './use-live-announcements';\n\nimport styles from './styles.css.js';\n\nexport { SortableAreaProps };\n\nexport default function SortableArea<Item>({\n  items,\n  itemDefinition,\n  renderItem,\n  onItemsChange,\n  disableReorder,\n  i18nStrings,\n}: SortableAreaProps<Item>) {\n  const { activeItemId, setActiveItemId, collisionDetection, handleKeyDown, sensors, isKeyboard } =\n    useDragAndDropReorder({\n      items,\n      itemDefinition,\n    });\n  const activeItem = activeItemId ? items.find(item => itemDefinition.id(item) === activeItemId) : null;\n  const isDragging = activeItemId !== null;\n  const announcements = useLiveAnnouncements({ items, itemDefinition, isDragging, ...i18nStrings });\n  const portalContainer = usePortalContainer();\n  return (\n    <DndContext\n      sensors={sensors}\n      collisionDetection={collisionDetection}\n      accessibility={{\n        announcements,\n        restoreFocus: false,\n        screenReaderInstructions: i18nStrings?.dragHandleAriaDescription\n          ? { draggable: i18nStrings.dragHandleAriaDescription }\n          : undefined,\n        container: portalContainer ?? undefined,\n      }}\n      onDragStart={({ active }) => setActiveItemId(active.id)}\n      onDragEnd={event => {\n        setActiveItemId(null);\n        const { active, over } = event;\n        if (over && active.id !== over.id) {\n          const movedItem = items.find(item => itemDefinition.id(item) === active.id)!;\n          const oldIndex = items.findIndex(item => itemDefinition.id(item) === active.id);\n          const newIndex = items.findIndex(item => itemDefinition.id(item) === over.id);\n          fireNonCancelableEvent(onItemsChange, { items: arrayMove([...items], oldIndex, newIndex), movedItem });\n        }\n      }}\n      onDragCancel={() => setActiveItemId(null)}\n    >\n      <SortableContext\n        disabled={disableReorder}\n        items={items.map(item => itemDefinition.id(item))}\n        strategy={verticalListSortingStrategy}\n      >\n        {items.map(item => (\n          <DraggableItem\n            key={itemDefinition.id(item)}\n            item={item}\n            itemDefinition={itemDefinition}\n            showDirectionButtons={item === activeItem && isKeyboard.current}\n            renderItem={renderItem}\n            onKeyDown={handleKeyDown}\n            dragHandleAriaLabel={i18nStrings?.dragHandleAriaLabel}\n          />\n        ))}\n      </SortableContext>\n\n      <Portal container={portalContainer}>\n        {/* Make sure that the drag overlay is above the modal  by assigning the z-index as inline style\n            so that it prevails over dnd-kit's inline z-index of 999 */}\n        <DragOverlay\n          className={clsx(styles['drag-overlay'], styles[`drag-overlay-${getBorderRadiusVariant(itemDefinition)}`])}\n          dropAnimation={null}\n          style={{ zIndex: 5000 }}\n          transition={isKeyboard.current ? 'transform 250ms' : ''}\n        >\n          {activeItem &&\n            renderItem({\n              item: activeItem,\n              id: activeItemId!.toString(),\n              style: {},\n              className: styles.active,\n              isDropPlaceholder: true,\n              isSortingActive: false,\n              isDragGhost: true,\n              dragHandleProps: {\n                ariaLabel: joinStrings(i18nStrings?.dragHandleAriaLabel, itemDefinition.label(activeItem)) ?? '',\n                active: true,\n                onKeyDown: handleKeyDown,\n              },\n            })}\n        </DragOverlay>\n      </Portal>\n    </DndContext>\n  );\n}\n\nfunction usePortalContainer() {\n  const portalContainerRef = useRef(typeof document !== 'undefined' ? document.createElement('div') : null);\n  useEffect(() => {\n    const container = portalContainerRef.current;\n    if (container && !container.isConnected) {\n      document.body.appendChild(container);\n    }\n    return () => {\n      if (container && container.isConnected) {\n        document.body.removeChild(container);\n      }\n    };\n  }, []);\n  return portalContainerRef.current;\n}\n\nfunction DraggableItem<Item>({\n  item,\n  itemDefinition,\n  dragHandleAriaLabel,\n  showDirectionButtons,\n  onKeyDown,\n  renderItem,\n}: {\n  item: Item;\n  itemDefinition: SortableAreaProps.ItemDefinition<Item>;\n  dragHandleAriaLabel?: string;\n  showDirectionButtons: boolean;\n  onKeyDown: (event: React.KeyboardEvent) => void;\n  renderItem: (props: SortableAreaProps.RenderItemProps<Item>) => React.ReactNode;\n}) {\n  const id = itemDefinition.id(item);\n  const { isDragging, isSorting, listeners, setNodeRef, transform, attributes } = useSortable({\n    id,\n  });\n  const style = { transform: CSS.Translate.toString(transform) };\n  const dragHandleListeners = attributes['aria-disabled']\n    ? {}\n    : {\n        ...listeners,\n        onKeyDown: (event: React.KeyboardEvent) => {\n          if (onKeyDown) {\n            onKeyDown(event);\n          }\n          if (listeners?.onKeyDown) {\n            listeners.onKeyDown(event);\n          }\n        },\n      };\n  const className = clsx(\n    isDragging && clsx(styles.placeholder, styles[`placeholder-${getBorderRadiusVariant(itemDefinition)}`]),\n    isSorting && styles.sorting\n  );\n  const dragHandleRef = useRef<HTMLElement>(null);\n  return (\n    <>\n      {renderItem({\n        item,\n        id,\n        ref: setNodeRef,\n        style,\n        className,\n        isDropPlaceholder: isDragging,\n        isSortingActive: isSorting,\n        isDragGhost: false,\n        dragHandleProps: {\n          ...dragHandleListeners,\n          ariaLabel: joinStrings(dragHandleAriaLabel, itemDefinition.label(item)) ?? '',\n          ariaDescribedby: attributes['aria-describedby'],\n          disabled: attributes['aria-disabled'],\n          triggerMode: 'controlled',\n          controlledShowButtons: showDirectionButtons,\n          ref: dragHandleRef,\n          directions: showDirectionButtons\n            ? {\n                'block-start': 'active',\n                'block-end': 'active',\n              }\n            : undefined,\n          onDirectionClick: direction => {\n            const event = new Event(direction === 'block-start' ? EventName.CustomUp : EventName.CustomDown, {\n              bubbles: true,\n              cancelable: true,\n            });\n            onKeyDown(event as any);\n            dragHandleRef.current?.dispatchEvent(event);\n          },\n        },\n      })}\n    </>\n  );\n}\n\nexport function getBorderRadiusVariant(\n  itemDefinition: SortableAreaProps.ItemDefinition<any>\n): SortableAreaProps.BorderRadiusVariant {\n  return itemDefinition.borderRadius ?? 'item';\n}\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/internal/components/sortable-area/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\n\nimport React, { useEffect, useRef } from 'react';\nimport { DndContext, DragOverlay } from '@dnd-kit/core';\nimport { arrayMove, SortableContext, useSortable, verticalListSortingStrategy } from '@dnd-kit/sortable';\nimport { CSS } from '@dnd-kit/utilities';\nimport clsx from 'clsx';\n\nimport { Portal } from '@cloudscape-design/component-toolkit/internal';\n\nimport { fireNonCancelableEvent } from '../../events';\nimport { joinStrings } from '../../utils/strings';\nimport { SortableAreaProps } from './interfaces';\nimport { EventName } from './keyboard-sensor/utilities/events';\nimport useDragAndDropReorder from './use-drag-and-drop-reorder';\nimport useLiveAnnouncements from './use-live-announcements';\n\nimport styles from './styles.css.js';\n\nexport { SortableAreaProps };\n\nexport default function SortableArea<Item>({\n  items,\n  itemDefinition,\n  renderItem,\n  onItemsChange,\n  disableReorder,\n  i18nStrings,\n}: SortableAreaProps<Item>) {\n  const { activeItemId, setActiveItemId, collisionDetection, handleKeyDown, sensors, isKeyboard } =\n    useDragAndDropReorder({\n      items,\n      itemDefinition,\n    });\n  const activeItem = activeItemId ? items.find(item => itemDefinition.id(item) === activeItemId) : null;\n  const isDragging = activeItemId !== null;\n  const announcements = useLiveAnnouncements({ items, itemDefinition, isDragging, ...i18nStrings });\n  const portalContainer = usePortalContainer();\n  return (\n    <DndContext\n      sensors={sensors}\n      collisionDetection={collisionDetection}\n      accessibility={{\n        announcements,\n        restoreFocus: false,\n        screenReaderInstructions: i18nStrings?.dragHandleAriaDescription\n          ? { draggable: i18nStrings.dragHandleAriaDescription }\n          : undefined,\n        container: portalContainer ?? undefined,\n      }}\n      onDragStart={({ active }) => setActiveItemId(active.id)}\n      onDragEnd={event => {\n        setActiveItemId(null);\n        const { active, over } = event;\n        if (over && active.id !== over.id) {\n          const movedItem = items.find(item => itemDefinition.id(item) === active.id)!;\n          const oldIndex = items.findIndex(item => itemDefinition.id(item) === active.id);\n          const newIndex = items.findIndex(item => itemDefinition.id(item) === over.id);\n          fireNonCancelableEvent(onItemsChange, { items: arrayMove([...items], oldIndex, newIndex), movedItem });\n        }\n      }}\n      onDragCancel={() => setActiveItemId(null)}\n    >\n      <SortableContext\n        disabled={disableReorder}\n        items={items.map(item => itemDefinition.id(item))}\n        strategy={verticalListSortingStrategy}\n      >\n        {items.map(item => (\n          <DraggableItem\n            key={itemDefinition.id(item)}\n            item={item}\n            itemDefinition={itemDefinition}\n            showDirectionButtons={item === activeItem && isKeyboard.current}\n            renderItem={renderItem}\n            onKeyDown={handleKeyDown}\n            dragHandleAriaLabel={i18nStrings?.dragHandleAriaLabel}\n          />\n        ))}\n      </SortableContext>\n\n      <Portal container={portalContainer}>\n        {/* Make sure that the drag overlay is above the modal  by assigning the z-index as inline style\n            so that it prevails over dnd-kit's inline z-index of 999 */}\n        <DragOverlay\n          className={clsx(styles['drag-overlay'], styles[`drag-overlay-${getBorderRadiusVariant(itemDefinition)}`])}\n          dropAnimation={null}\n          style={{ zIndex: 5000 }}\n          transition={isKeyboard.current ? 'transform 250ms' : ''}\n        >\n          {activeItem &&\n            renderItem({\n              item: activeItem,\n              id: activeItemId!.toString(),\n              style: {},\n              className: styles.active,\n              isDropPlaceholder: true,\n              isSortingActive: false,\n              isDragGhost: true,\n              dragHandleProps: {\n                ariaLabel: joinStrings(i18nStrings?.dragHandleAriaLabel, itemDefinition.label(activeItem)) ?? '',\n                active: true,\n                onKeyDown: handleKeyDown,\n              },\n            })}\n        </DragOverlay>\n      </Portal>\n    </DndContext>\n  );\n}\n\nfunction usePortalContainer() {\n  const portalContainerRef = useRef(typeof document !== 'undefined' ? document.createElement('div') : null);\n  useEffect(() => {\n    const container = portalContainerRef.current;\n    if (container && !container.isConnected) {\n      document.body.appendChild(container);\n    }\n    return () => {\n      if (container && container.isConnected) {\n        document.body.removeChild(container);\n      }\n    };\n  }, []);\n  return portalContainerRef.current;\n}\n\nfunction DraggableItem<Item>({\n  item,\n  itemDefinition,\n  dragHandleAriaLabel,\n  showDirectionButtons,\n  onKeyDown,\n  renderItem,\n}: {\n  item: Item;\n  itemDefinition: SortableAreaProps.ItemDefinition<Item>;\n  dragHandleAriaLabel?: string;\n  showDirectionButtons: boolean;\n  onKeyDown: (event: React.KeyboardEvent) => void;\n  renderItem: (props: SortableAreaProps.RenderItemProps<Item>) => React.ReactNode;\n}) {\n  const id = itemDefinition.id(item);\n  const { isDragging, isSorting, listeners, setNodeRef, transform, attributes } = useSortable({\n    id,\n  });\n  const style = { transform: CSS.Translate.toString(transform) };\n  const dragHandleListeners = attributes['aria-disabled']\n    ? {}\n    : {\n        ...listeners,\n        onKeyDown: (event: React.KeyboardEvent) => {\n          if (onKeyDown) {\n            onKeyDown(event);\n          }\n          if (listeners?.onKeyDown) {\n            listeners.onKeyDown(event);\n          }\n        },\n      };\n  const className = clsx(\n    isDragging && clsx(styles.placeholder, styles[`placeholder-${getBorderRadiusVariant(itemDefinition)}`]),\n    isSorting && styles.sorting\n  );\n  const dragHandleRef = useRef<HTMLElement>(null);\n  return (\n    <>\n      {renderItem({\n        item,\n        id,\n        ref: setNodeRef,\n        style,\n        className,\n        isDropPlaceholder: isDragging,\n        isSortingActive: isSorting,\n        isDragGhost: false,\n        dragHandleProps: {\n          ...dragHandleListeners,\n          ariaLabel: joinStrings(dragHandleAriaLabel, itemDefinition.label(item)) ?? '',\n          ariaDescribedby: attributes['aria-describedby'],\n          disabled: attributes['aria-disabled'],\n          triggerMode: 'controlled',\n          controlledShowButtons: showDirectionButtons,\n          ref: dragHandleRef,\n          directions: showDirectionButtons\n            ? {\n                'block-start': 'active',\n                'block-end': 'active',\n              }\n            : undefined,\n          onDirectionClick: direction => {\n            const event = new Event(direction === 'block-start' ? EventName.CustomUp : EventName.CustomDown, {\n              bubbles: true,\n              cancelable: true,\n            });\n            onKeyDown(event as any);\n            dragHandleRef.current?.dispatchEvent(event);\n          },\n        },\n      })}\n    </>\n  );\n}\n\nexport function getBorderRadiusVariant(\n  itemDefinition: SortableAreaProps.ItemDefinition<any>\n): SortableAreaProps.BorderRadiusVariant {\n  return itemDefinition.borderRadius ?? 'item';\n}\n"]}

package/lib/internal/template/internal/components/token-list/styles.css.js

@@ -1,15 +1,15 @@
 
     import './styles.scoped.css';
     export default {
-  "root": "awsui_root_gfwv3_15kqb_193",
-  "horizontal": "awsui_horizontal_gfwv3_15kqb_196",
-  "vertical": "awsui_vertical_gfwv3_15kqb_202",
-  "list": "awsui_list_gfwv3_15kqb_207",
-  "grid": "awsui_grid_gfwv3_15kqb_226",
-  "list-item": "awsui_list-item_gfwv3_15kqb_238",
-  "toggle-container-inline": "awsui_toggle-container-inline_gfwv3_15kqb_245",
-  "toggle": "awsui_toggle_gfwv3_15kqb_245",
-  "description": "awsui_description_gfwv3_15kqb_337",
-  "separator": "awsui_separator_gfwv3_15kqb_341"
+  "root": "awsui_root_gfwv3_p9rru_193",
+  "horizontal": "awsui_horizontal_gfwv3_p9rru_196",
+  "vertical": "awsui_vertical_gfwv3_p9rru_202",
+  "list": "awsui_list_gfwv3_p9rru_207",
+  "grid": "awsui_grid_gfwv3_p9rru_226",
+  "list-item": "awsui_list-item_gfwv3_p9rru_238",
+  "toggle-container-inline": "awsui_toggle-container-inline_gfwv3_p9rru_245",
+  "toggle": "awsui_toggle_gfwv3_p9rru_245",
+  "description": "awsui_description_gfwv3_p9rru_337",
+  "separator": "awsui_separator_gfwv3_p9rru_341"
 };
   

package/lib/internal/template/internal/components/token-list/styles.scoped.css

@@ -190,21 +190,21 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
  Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
  SPDX-License-Identifier: Apache-2.0
 */
-.awsui_root_gfwv3_15kqb_193:not(#\9) {
+.awsui_root_gfwv3_p9rru_193:not(#\9) {
   gap: var(--space-scaled-xs-sppte9, 8px);
 }
-.awsui_root_gfwv3_15kqb_193.awsui_horizontal_gfwv3_15kqb_196:not(#\9) {
+.awsui_root_gfwv3_p9rru_193.awsui_horizontal_gfwv3_p9rru_196:not(#\9) {
   display: flex;
   gap: var(--space-xs-kw7k3v, 8px);
   flex-direction: row;
   flex-wrap: wrap;
 }
-.awsui_root_gfwv3_15kqb_193.awsui_vertical_gfwv3_15kqb_202:not(#\9) {
+.awsui_root_gfwv3_p9rru_193.awsui_vertical_gfwv3_p9rru_202:not(#\9) {
   display: flex;
   flex-direction: column;
 }
 
-.awsui_list_gfwv3_15kqb_207:not(#\9) {
+.awsui_list_gfwv3_p9rru_207:not(#\9) {
   display: contents;
   list-style: none;
   padding-block: 0;
@@ -212,43 +212,43 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   margin-block: 0;
   margin-inline: 0;
 }
-.awsui_list_gfwv3_15kqb_207.awsui_horizontal_gfwv3_15kqb_196:not(#\9), .awsui_list_gfwv3_15kqb_207.awsui_vertical_gfwv3_15kqb_202:not(#\9) {
+.awsui_list_gfwv3_p9rru_207.awsui_horizontal_gfwv3_p9rru_196:not(#\9), .awsui_list_gfwv3_p9rru_207.awsui_vertical_gfwv3_p9rru_202:not(#\9) {
   display: flex;
   gap: var(--space-xs-kw7k3v, 8px);
 }
-.awsui_list_gfwv3_15kqb_207.awsui_horizontal_gfwv3_15kqb_196:not(#\9) {
+.awsui_list_gfwv3_p9rru_207.awsui_horizontal_gfwv3_p9rru_196:not(#\9) {
   flex-direction: row;
   flex-wrap: wrap;
 }
-.awsui_list_gfwv3_15kqb_207.awsui_vertical_gfwv3_15kqb_202:not(#\9) {
+.awsui_list_gfwv3_p9rru_207.awsui_vertical_gfwv3_p9rru_202:not(#\9) {
   flex-direction: column;
 }
-.awsui_list_gfwv3_15kqb_207.awsui_grid_gfwv3_15kqb_226:not(#\9) {
+.awsui_list_gfwv3_p9rru_207.awsui_grid_gfwv3_p9rru_226:not(#\9) {
   display: grid;
   gap: var(--space-xs-kw7k3v, 8px);
   grid-template-columns: repeat(auto-fill, 230px);
 }
 @media (max-width: 688px) {
-  .awsui_list_gfwv3_15kqb_207.awsui_grid_gfwv3_15kqb_226:not(#\9) {
+  .awsui_list_gfwv3_p9rru_207.awsui_grid_gfwv3_p9rru_226:not(#\9) {
     display: flex;
     flex-direction: column;
   }
 }
 
-.awsui_list-item_gfwv3_15kqb_238:not(#\9) {
+.awsui_list-item_gfwv3_p9rru_238:not(#\9) {
   padding-block: 0;
   padding-inline: 0;
   margin-block: 0;
   margin-inline: 0;
 }
 
-.awsui_toggle-container-inline_gfwv3_15kqb_245:not(#\9) {
+.awsui_toggle-container-inline_gfwv3_p9rru_245:not(#\9) {
   padding-inline-start: var(--space-xs-kw7k3v, 8px);
   display: flex;
   align-items: center;
 }
 
-.awsui_toggle_gfwv3_15kqb_245:not(#\9) {
+.awsui_toggle_gfwv3_p9rru_245:not(#\9) {
   border-collapse: separate;
   border-spacing: 0;
   box-sizing: border-box;
@@ -288,7 +288,7 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   margin-inline-start: -1px;
   text-underline-offset: 0.25em;
   text-decoration-thickness: 1px;
-  color: var(--awsui-style-color-default-9t5olz, var(--color-text-link-default-x6cnv5, #0073bb));
+  color: var(--awsui-style-color-default-d43v8n, var(--color-text-link-default-x6cnv5, #0073bb));
   font-weight: inherit;
   letter-spacing: normal;
   text-decoration-line: none;
@@ -299,34 +299,34 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   transition-duration: var(--motion-duration-refresh-only-medium-h3wrr6, 0ms);
 }
 @media (prefers-reduced-motion: reduce) {
-  .awsui_toggle_gfwv3_15kqb_245:not(#\9) {
+  .awsui_toggle_gfwv3_p9rru_245:not(#\9) {
     animation: none;
     transition: none;
   }
 }
-.awsui-motion-disabled .awsui_toggle_gfwv3_15kqb_245:not(#\9), .awsui-mode-entering .awsui_toggle_gfwv3_15kqb_245:not(#\9) {
+.awsui-motion-disabled .awsui_toggle_gfwv3_p9rru_245:not(#\9), .awsui-mode-entering .awsui_toggle_gfwv3_p9rru_245:not(#\9) {
   animation: none;
   transition: none;
 }
-.awsui_toggle_gfwv3_15kqb_245:not(#\9):hover {
+.awsui_toggle_gfwv3_p9rru_245:not(#\9):hover {
   cursor: pointer;
-  color: var(--awsui-style-color-hover-9t5olz, var(--color-text-link-hover-tk5gkv, #0a4a74));
+  color: var(--awsui-style-color-hover-d43v8n, var(--color-text-link-hover-tk5gkv, #0a4a74));
 }
-.awsui_toggle_gfwv3_15kqb_245:not(#\9):focus {
+.awsui_toggle_gfwv3_p9rru_245:not(#\9):focus {
   outline: none;
 }
-.awsui_toggle_gfwv3_15kqb_245:not(#\9):active {
-  color: var(--awsui-style-color-active-9t5olz, var(--color-text-link-hover-tk5gkv, #0a4a74));
+.awsui_toggle_gfwv3_p9rru_245:not(#\9):active {
+  color: var(--awsui-style-color-active-d43v8n, var(--color-text-link-hover-tk5gkv, #0a4a74));
 }
-.awsui_toggle_gfwv3_15kqb_245:not(#\9):active, .awsui_toggle_gfwv3_15kqb_245:not(#\9):focus, .awsui_toggle_gfwv3_15kqb_245:not(#\9):hover {
+.awsui_toggle_gfwv3_p9rru_245:not(#\9):active, .awsui_toggle_gfwv3_p9rru_245:not(#\9):focus, .awsui_toggle_gfwv3_p9rru_245:not(#\9):hover {
   text-decoration-line: underline;
   text-decoration-color: currentColor;
 }
-.awsui_toggle_gfwv3_15kqb_245:not(#\9):active, .awsui_toggle_gfwv3_15kqb_245:not(#\9):focus, .awsui_toggle_gfwv3_15kqb_245:not(#\9):hover {
+.awsui_toggle_gfwv3_p9rru_245:not(#\9):active, .awsui_toggle_gfwv3_p9rru_245:not(#\9):focus, .awsui_toggle_gfwv3_p9rru_245:not(#\9):hover {
   text-decoration: none;
   text-decoration-color: transparent;
 }
-body[data-awsui-focus-visible=true] .awsui_toggle_gfwv3_15kqb_245:not(#\9):focus {
+body[data-awsui-focus-visible=true] .awsui_toggle_gfwv3_p9rru_245:not(#\9):focus {
   outline: 2px dotted transparent;
   border-block: var(--border-width-button-40y1n5, 1px) solid var(--color-border-item-focused-r5f6xl, #0073bb);
   border-inline: var(--border-width-button-40y1n5, 1px) solid var(--color-border-item-focused-r5f6xl, #0073bb);
@@ -336,11 +336,11 @@ body[data-awsui-focus-visible=true] .awsui_toggle_gfwv3_15kqb_245:not(#\9):focus
   border-end-end-radius: var(--border-radius-control-default-focus-ring-9xsko1, 2px);
   box-shadow: 0 0 0 var(--border-control-focus-ring-shadow-spread-ql2vj7, 1px) var(--color-border-item-focused-r5f6xl, #0073bb);
 }
-.awsui_toggle_gfwv3_15kqb_245 > .awsui_description_gfwv3_15kqb_337:not(#\9) {
+.awsui_toggle_gfwv3_p9rru_245 > .awsui_description_gfwv3_p9rru_337:not(#\9) {
   margin-inline-start: var(--space-xxs-jnczic, 4px);
 }
 
-.awsui_separator_gfwv3_15kqb_341:not(#\9) {
+.awsui_separator_gfwv3_p9rru_341:not(#\9) {
   margin-block: 0;
   margin-inline: var(--space-scaled-m-sw9kcx, 16px);
   inline-size: var(--border-divider-section-width-sznrdy, 1px);

package/lib/internal/template/internal/components/token-list/styles.selectors.js

@@ -2,15 +2,15 @@
     // es-module interop with Babel and Typescript
     Object.defineProperty(exports, "__esModule", { value: true });
     module.exports.default = {
-  "root": "awsui_root_gfwv3_15kqb_193",
-  "horizontal": "awsui_horizontal_gfwv3_15kqb_196",
-  "vertical": "awsui_vertical_gfwv3_15kqb_202",
-  "list": "awsui_list_gfwv3_15kqb_207",
-  "grid": "awsui_grid_gfwv3_15kqb_226",
-  "list-item": "awsui_list-item_gfwv3_15kqb_238",
-  "toggle-container-inline": "awsui_toggle-container-inline_gfwv3_15kqb_245",
-  "toggle": "awsui_toggle_gfwv3_15kqb_245",
-  "description": "awsui_description_gfwv3_15kqb_337",
-  "separator": "awsui_separator_gfwv3_15kqb_341"
+  "root": "awsui_root_gfwv3_p9rru_193",
+  "horizontal": "awsui_horizontal_gfwv3_p9rru_196",
+  "vertical": "awsui_vertical_gfwv3_p9rru_202",
+  "list": "awsui_list_gfwv3_p9rru_207",
+  "grid": "awsui_grid_gfwv3_p9rru_226",
+  "list-item": "awsui_list-item_gfwv3_p9rru_238",
+  "toggle-container-inline": "awsui_toggle-container-inline_gfwv3_p9rru_245",
+  "toggle": "awsui_toggle_gfwv3_p9rru_245",
+  "description": "awsui_description_gfwv3_p9rru_337",
+  "separator": "awsui_separator_gfwv3_p9rru_341"
 };