@cloudscape-design/components 3.0.263 → 3.0.265

package/collection-preferences/styles.selectors.js

@@ -2,41 +2,41 @@
     // es-module interop with Babel and Typescript
     Object.defineProperty(exports, "__esModule", { value: true });
     module.exports.default = {
-  "visible-content": "awsui_visible-content_tc96w_e00a9_185",
-  "visible-content-toggle": "awsui_visible-content-toggle_tc96w_e00a9_186",
-  "visible-content-groups": "awsui_visible-content-groups_tc96w_e00a9_187",
-  "visible-content-group": "awsui_visible-content-group_tc96w_e00a9_187",
-  "visible-content-title": "awsui_visible-content-title_tc96w_e00a9_192",
-  "visible-content-group-label": "awsui_visible-content-group-label_tc96w_e00a9_201",
-  "visible-content-option": "awsui_visible-content-option_tc96w_e00a9_207",
-  "visible-content-option-label": "awsui_visible-content-option-label_tc96w_e00a9_218",
-  "sortable-item-toggle": "awsui_sortable-item-toggle_tc96w_e00a9_409",
-  "sortable-item": "awsui_sortable-item_tc96w_e00a9_409",
-  "sortable-item-placeholder": "awsui_sortable-item-placeholder_tc96w_e00a9_417",
-  "sortable-item-content": "awsui_sortable-item-content_tc96w_e00a9_427",
-  "draggable": "awsui_draggable_tc96w_e00a9_437",
-  "active": "awsui_active_tc96w_e00a9_446",
-  "sorting": "awsui_sorting_tc96w_e00a9_452",
-  "sortable-item-label": "awsui_sortable-item-label_tc96w_e00a9_495",
-  "content-display": "awsui_content-display_tc96w_e00a9_500",
-  "content-display-groups": "awsui_content-display-groups_tc96w_e00a9_501",
-  "content-display-group": "awsui_content-display-group_tc96w_e00a9_501",
-  "content-display-option": "awsui_content-display-option_tc96w_e00a9_503",
-  "content-display-title": "awsui_content-display-title_tc96w_e00a9_507",
-  "content-display-description": "awsui_content-display-description_tc96w_e00a9_515",
-  "content-display-option-list": "awsui_content-display-option-list_tc96w_e00a9_523",
-  "root": "awsui_root_tc96w_e00a9_529",
-  "modal-root": "awsui_modal-root_tc96w_e00a9_530",
-  "trigger-button": "awsui_trigger-button_tc96w_e00a9_531",
-  "cancel-button": "awsui_cancel-button_tc96w_e00a9_532",
-  "confirm-button": "awsui_confirm-button_tc96w_e00a9_533",
-  "custom": "awsui_custom_tc96w_e00a9_534",
-  "second-column-small": "awsui_second-column-small_tc96w_e00a9_538",
-  "wrap-lines": "awsui_wrap-lines_tc96w_e00a9_542",
-  "striped-rows": "awsui_striped-rows_tc96w_e00a9_543",
-  "content-density": "awsui_content-density_tc96w_e00a9_544",
-  "page-size": "awsui_page-size_tc96w_e00a9_545",
-  "page-size-form-field": "awsui_page-size-form-field_tc96w_e00a9_546",
-  "page-size-radio-group": "awsui_page-size-radio-group_tc96w_e00a9_547"
+  "visible-content": "awsui_visible-content_tc96w_1m6re_185",
+  "visible-content-toggle": "awsui_visible-content-toggle_tc96w_1m6re_186",
+  "visible-content-groups": "awsui_visible-content-groups_tc96w_1m6re_187",
+  "visible-content-group": "awsui_visible-content-group_tc96w_1m6re_187",
+  "visible-content-title": "awsui_visible-content-title_tc96w_1m6re_192",
+  "visible-content-group-label": "awsui_visible-content-group-label_tc96w_1m6re_201",
+  "visible-content-option": "awsui_visible-content-option_tc96w_1m6re_207",
+  "visible-content-option-label": "awsui_visible-content-option-label_tc96w_1m6re_218",
+  "sortable-item-toggle": "awsui_sortable-item-toggle_tc96w_1m6re_409",
+  "sortable-item": "awsui_sortable-item_tc96w_1m6re_409",
+  "sortable-item-placeholder": "awsui_sortable-item-placeholder_tc96w_1m6re_417",
+  "sortable-item-content": "awsui_sortable-item-content_tc96w_1m6re_427",
+  "draggable": "awsui_draggable_tc96w_1m6re_437",
+  "active": "awsui_active_tc96w_1m6re_446",
+  "sorting": "awsui_sorting_tc96w_1m6re_452",
+  "sortable-item-label": "awsui_sortable-item-label_tc96w_1m6re_495",
+  "content-display": "awsui_content-display_tc96w_1m6re_500",
+  "content-display-groups": "awsui_content-display-groups_tc96w_1m6re_501",
+  "content-display-group": "awsui_content-display-group_tc96w_1m6re_501",
+  "content-display-option": "awsui_content-display-option_tc96w_1m6re_503",
+  "content-display-title": "awsui_content-display-title_tc96w_1m6re_507",
+  "content-display-description": "awsui_content-display-description_tc96w_1m6re_515",
+  "content-display-option-list": "awsui_content-display-option-list_tc96w_1m6re_523",
+  "root": "awsui_root_tc96w_1m6re_529",
+  "modal-root": "awsui_modal-root_tc96w_1m6re_530",
+  "trigger-button": "awsui_trigger-button_tc96w_1m6re_531",
+  "cancel-button": "awsui_cancel-button_tc96w_1m6re_532",
+  "confirm-button": "awsui_confirm-button_tc96w_1m6re_533",
+  "custom": "awsui_custom_tc96w_1m6re_534",
+  "second-column-small": "awsui_second-column-small_tc96w_1m6re_538",
+  "wrap-lines": "awsui_wrap-lines_tc96w_1m6re_542",
+  "striped-rows": "awsui_striped-rows_tc96w_1m6re_543",
+  "content-density": "awsui_content-density_tc96w_1m6re_544",
+  "page-size": "awsui_page-size_tc96w_1m6re_545",
+  "page-size-form-field": "awsui_page-size-form-field_tc96w_1m6re_546",
+  "page-size-radio-group": "awsui_page-size-radio-group_tc96w_1m6re_547"
 };
   

package/expandable-section/expandable-section-header.js

@@ -28,7 +28,7 @@ const ExpandableContainerHeader = ({ id, className, onClick, ariaLabel, ariaCont
         };
     return (React.createElement("div", { id: id, className: className, onClick: onClick },
         React.createElement(Wrapper, null,
-            React.createElement("span", { className: styles['header-container-button'], role: "button", tabIndex: 0, onKeyUp: onKeyUp, onKeyDown: onKeyDown, "aria-label": ariaLabel, "aria-labelledby": ariaLabel || !isContainer ? undefined : screenreaderContentId, "aria-controls": ariaControls, "aria-expanded": expanded },
+            React.createElement("span", { className: isContainer ? styles['header-container-button'] : styles['header-button'], role: "button", tabIndex: 0, onKeyUp: onKeyUp, onKeyDown: onKeyDown, "aria-label": ariaLabel, "aria-labelledby": ariaLabel || !isContainer ? undefined : screenreaderContentId, "aria-controls": ariaControls, "aria-expanded": expanded },
                 React.createElement("span", { className: clsx(styles['icon-container'], styles[`icon-container-${variant}`]) }, icon),
                 React.createElement("span", null, children))),
         isContainer && (React.createElement(ScreenreaderOnly, { id: screenreaderContentId },

package/expandable-section/expandable-section-header.js.map

@@ -1 +1 @@
-{"version":3,"file":"expandable-section-header.js","sourceRoot":"lib/default/","sources":["expandable-section/expandable-section-header.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 { ExpandableSectionProps } from './interfaces';\nimport React, { KeyboardEventHandler, MouseEventHandler, ReactNode } from 'react';\nimport InternalIcon from '../icon/internal';\nimport clsx from 'clsx';\nimport styles from './styles.css.js';\nimport InternalHeader from '../header/internal';\nimport ScreenreaderOnly from '../internal/components/screenreader-only';\nimport { useUniqueId } from '../internal/hooks/use-unique-id';\nimport { isDevelopment } from '../internal/is-development';\nimport { warnOnce } from '../internal/logging';\n\ninterface ExpandableDefaultHeaderProps {\n  id: string;\n  className?: string;\n  children?: ReactNode;\n  expanded: boolean;\n  ariaControls: string;\n  ariaLabel?: string;\n  onKeyUp: KeyboardEventHandler;\n  onKeyDown: KeyboardEventHandler;\n  onClick: MouseEventHandler;\n  icon: JSX.Element;\n  variant: ExpandableSectionProps.Variant;\n}\n\ninterface ExpandableNavigationHeaderProps extends Omit<ExpandableDefaultHeaderProps, 'onKeyUp' | 'onKeyDown'> {\n  ariaLabelledBy?: string;\n}\n\ninterface ExpandableContainerHeaderProps extends ExpandableDefaultHeaderProps {\n  headerDescription?: ReactNode;\n  headerCounter?: string;\n  headingTagOverride?: ExpandableSectionProps.HeadingTag;\n}\n\ninterface ExpandableSectionHeaderProps extends Omit<ExpandableDefaultHeaderProps, 'children' | 'icon'> {\n  variant: ExpandableSectionProps.Variant;\n  header?: ReactNode;\n  headerText?: ReactNode;\n  headerDescription?: ReactNode;\n  headerCounter?: string;\n  headingTagOverride?: ExpandableSectionProps.HeadingTag;\n  ariaLabelledBy?: string;\n}\n\nconst ExpandableDefaultHeader = ({\n  id,\n  className,\n  onClick,\n  ariaLabel,\n  ariaControls,\n  expanded,\n  children,\n  icon,\n  onKeyUp,\n  onKeyDown,\n  variant,\n}: ExpandableDefaultHeaderProps) => {\n  return (\n    <div\n      id={id}\n      role=\"button\"\n      className={className}\n      tabIndex={0}\n      onKeyUp={onKeyUp}\n      onKeyDown={onKeyDown}\n      onClick={onClick}\n      aria-label={ariaLabel}\n      aria-controls={ariaControls}\n      aria-expanded={expanded}\n    >\n      <div className={clsx(styles['icon-container'], styles[`icon-container-${variant}`])}>{icon}</div>\n      {children}\n    </div>\n  );\n};\n\nconst ExpandableNavigationHeader = ({\n  id,\n  className,\n  onClick,\n  ariaLabelledBy,\n  ariaLabel,\n  ariaControls,\n  expanded,\n  children,\n  icon,\n}: ExpandableNavigationHeaderProps) => {\n  return (\n    <div id={id} className={className} onClick={onClick}>\n      <button\n        className={styles['icon-container']}\n        aria-labelledby={ariaLabelledBy}\n        aria-label={ariaLabel}\n        aria-controls={ariaControls}\n        aria-expanded={expanded}\n        type=\"button\"\n      >\n        {icon}\n      </button>\n      {children}\n    </div>\n  );\n};\n\nconst ExpandableContainerHeader = ({\n  id,\n  className,\n  onClick,\n  ariaLabel,\n  ariaControls,\n  expanded,\n  children,\n  icon,\n  headerDescription,\n  headerCounter,\n  variant,\n  headingTagOverride,\n  onKeyUp,\n  onKeyDown,\n}: ExpandableContainerHeaderProps) => {\n  const screenreaderContentId = useUniqueId('expandable-section-header-content-');\n  const isContainer = variant === 'container';\n\n  const Wrapper = isContainer\n    ? ({ children }: { children: ReactNode }) => (\n        <InternalHeader\n          variant=\"h2\"\n          description={headerDescription}\n          counter={headerCounter}\n          headingTagOverride={headingTagOverride}\n        >\n          {children}\n        </InternalHeader>\n      )\n    : ({ children }: { children: ReactNode }) => {\n        const Tag = headingTagOverride || 'div';\n        return <Tag className={styles['header-wrapper']}>{children}</Tag>;\n      };\n\n  return (\n    <div id={id} className={className} onClick={onClick}>\n      <Wrapper>\n        <span\n          className={styles['header-container-button']}\n          role=\"button\"\n          tabIndex={0}\n          onKeyUp={onKeyUp}\n          onKeyDown={onKeyDown}\n          aria-label={ariaLabel}\n          // Do not use aria-labelledby={id} but ScreenreaderOnly because safari+VO does not read headerText in this case.\n          aria-labelledby={ariaLabel || !isContainer ? undefined : screenreaderContentId}\n          aria-controls={ariaControls}\n          aria-expanded={expanded}\n        >\n          <span className={clsx(styles['icon-container'], styles[`icon-container-${variant}`])}>{icon}</span>\n          <span>{children}</span>\n        </span>\n      </Wrapper>\n      {isContainer && (\n        <ScreenreaderOnly id={screenreaderContentId}>\n          {children} {headerCounter} {headerDescription}\n        </ScreenreaderOnly>\n      )}\n    </div>\n  );\n};\n\nexport const ExpandableSectionHeader = ({\n  id,\n  className,\n  variant,\n  header,\n  headerText,\n  headerDescription,\n  headerCounter,\n  headingTagOverride,\n  expanded,\n  ariaControls,\n  ariaLabel,\n  ariaLabelledBy,\n  onKeyUp,\n  onKeyDown,\n  onClick,\n}: ExpandableSectionHeaderProps) => {\n  const icon = (\n    <InternalIcon\n      size={variant === 'container' ? 'medium' : 'normal'}\n      className={clsx(styles.icon, expanded && styles.expanded)}\n      name=\"caret-down-filled\"\n    />\n  );\n  const defaultHeaderProps = {\n    id: id,\n    icon: icon,\n    expanded: expanded,\n    ariaControls: ariaControls,\n    ariaLabel: ariaLabel,\n    onClick: onClick,\n    variant,\n  };\n\n  const triggerClassName = clsx(styles.trigger, styles[`trigger-${variant}`], expanded && styles['trigger-expanded']);\n  if (variant === 'navigation') {\n    return (\n      <ExpandableNavigationHeader\n        className={clsx(className, triggerClassName)}\n        ariaLabelledBy={ariaLabelledBy}\n        {...defaultHeaderProps}\n      >\n        {headerText ?? header}\n      </ExpandableNavigationHeader>\n    );\n  }\n\n  if (headerText) {\n    return (\n      <ExpandableContainerHeader\n        className={clsx(className, triggerClassName, expanded && styles.expanded)}\n        headerDescription={headerDescription}\n        headerCounter={headerCounter}\n        headingTagOverride={headingTagOverride}\n        onKeyUp={onKeyUp}\n        onKeyDown={onKeyDown}\n        {...defaultHeaderProps}\n      >\n        {headerText}\n      </ExpandableContainerHeader>\n    );\n  }\n\n  if (variant === 'container' && header && isDevelopment) {\n    warnOnce(\n      'ExpandableSection',\n      'Use `headerText` instead of `header` to provide the button within the heading for a11y.'\n    );\n  }\n\n  return (\n    <ExpandableDefaultHeader\n      className={clsx(className, triggerClassName, styles.focusable, expanded && styles.expanded)}\n      onKeyUp={onKeyUp}\n      onKeyDown={onKeyDown}\n      {...defaultHeaderProps}\n    >\n      {headerText ?? header}\n    </ExpandableDefaultHeader>\n  );\n};\n"]}
+{"version":3,"file":"expandable-section-header.js","sourceRoot":"lib/default/","sources":["expandable-section/expandable-section-header.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 { ExpandableSectionProps } from './interfaces';\nimport React, { KeyboardEventHandler, MouseEventHandler, ReactNode } from 'react';\nimport InternalIcon from '../icon/internal';\nimport clsx from 'clsx';\nimport styles from './styles.css.js';\nimport InternalHeader from '../header/internal';\nimport ScreenreaderOnly from '../internal/components/screenreader-only';\nimport { useUniqueId } from '../internal/hooks/use-unique-id';\nimport { isDevelopment } from '../internal/is-development';\nimport { warnOnce } from '../internal/logging';\n\ninterface ExpandableDefaultHeaderProps {\n  id: string;\n  className?: string;\n  children?: ReactNode;\n  expanded: boolean;\n  ariaControls: string;\n  ariaLabel?: string;\n  onKeyUp: KeyboardEventHandler;\n  onKeyDown: KeyboardEventHandler;\n  onClick: MouseEventHandler;\n  icon: JSX.Element;\n  variant: ExpandableSectionProps.Variant;\n}\n\ninterface ExpandableNavigationHeaderProps extends Omit<ExpandableDefaultHeaderProps, 'onKeyUp' | 'onKeyDown'> {\n  ariaLabelledBy?: string;\n}\n\ninterface ExpandableContainerHeaderProps extends ExpandableDefaultHeaderProps {\n  headerDescription?: ReactNode;\n  headerCounter?: string;\n  headingTagOverride?: ExpandableSectionProps.HeadingTag;\n}\n\ninterface ExpandableSectionHeaderProps extends Omit<ExpandableDefaultHeaderProps, 'children' | 'icon'> {\n  variant: ExpandableSectionProps.Variant;\n  header?: ReactNode;\n  headerText?: ReactNode;\n  headerDescription?: ReactNode;\n  headerCounter?: string;\n  headingTagOverride?: ExpandableSectionProps.HeadingTag;\n  ariaLabelledBy?: string;\n}\n\nconst ExpandableDefaultHeader = ({\n  id,\n  className,\n  onClick,\n  ariaLabel,\n  ariaControls,\n  expanded,\n  children,\n  icon,\n  onKeyUp,\n  onKeyDown,\n  variant,\n}: ExpandableDefaultHeaderProps) => {\n  return (\n    <div\n      id={id}\n      role=\"button\"\n      className={className}\n      tabIndex={0}\n      onKeyUp={onKeyUp}\n      onKeyDown={onKeyDown}\n      onClick={onClick}\n      aria-label={ariaLabel}\n      aria-controls={ariaControls}\n      aria-expanded={expanded}\n    >\n      <div className={clsx(styles['icon-container'], styles[`icon-container-${variant}`])}>{icon}</div>\n      {children}\n    </div>\n  );\n};\n\nconst ExpandableNavigationHeader = ({\n  id,\n  className,\n  onClick,\n  ariaLabelledBy,\n  ariaLabel,\n  ariaControls,\n  expanded,\n  children,\n  icon,\n}: ExpandableNavigationHeaderProps) => {\n  return (\n    <div id={id} className={className} onClick={onClick}>\n      <button\n        className={styles['icon-container']}\n        aria-labelledby={ariaLabelledBy}\n        aria-label={ariaLabel}\n        aria-controls={ariaControls}\n        aria-expanded={expanded}\n        type=\"button\"\n      >\n        {icon}\n      </button>\n      {children}\n    </div>\n  );\n};\n\nconst ExpandableContainerHeader = ({\n  id,\n  className,\n  onClick,\n  ariaLabel,\n  ariaControls,\n  expanded,\n  children,\n  icon,\n  headerDescription,\n  headerCounter,\n  variant,\n  headingTagOverride,\n  onKeyUp,\n  onKeyDown,\n}: ExpandableContainerHeaderProps) => {\n  const screenreaderContentId = useUniqueId('expandable-section-header-content-');\n  const isContainer = variant === 'container';\n\n  const Wrapper = isContainer\n    ? ({ children }: { children: ReactNode }) => (\n        <InternalHeader\n          variant=\"h2\"\n          description={headerDescription}\n          counter={headerCounter}\n          headingTagOverride={headingTagOverride}\n        >\n          {children}\n        </InternalHeader>\n      )\n    : ({ children }: { children: ReactNode }) => {\n        const Tag = headingTagOverride || 'div';\n        return <Tag className={styles['header-wrapper']}>{children}</Tag>;\n      };\n\n  return (\n    <div id={id} className={className} onClick={onClick}>\n      <Wrapper>\n        <span\n          className={isContainer ? styles['header-container-button'] : styles['header-button']}\n          role=\"button\"\n          tabIndex={0}\n          onKeyUp={onKeyUp}\n          onKeyDown={onKeyDown}\n          aria-label={ariaLabel}\n          // Do not use aria-labelledby={id} but ScreenreaderOnly because safari+VO does not read headerText in this case.\n          aria-labelledby={ariaLabel || !isContainer ? undefined : screenreaderContentId}\n          aria-controls={ariaControls}\n          aria-expanded={expanded}\n        >\n          <span className={clsx(styles['icon-container'], styles[`icon-container-${variant}`])}>{icon}</span>\n          <span>{children}</span>\n        </span>\n      </Wrapper>\n      {isContainer && (\n        <ScreenreaderOnly id={screenreaderContentId}>\n          {children} {headerCounter} {headerDescription}\n        </ScreenreaderOnly>\n      )}\n    </div>\n  );\n};\n\nexport const ExpandableSectionHeader = ({\n  id,\n  className,\n  variant,\n  header,\n  headerText,\n  headerDescription,\n  headerCounter,\n  headingTagOverride,\n  expanded,\n  ariaControls,\n  ariaLabel,\n  ariaLabelledBy,\n  onKeyUp,\n  onKeyDown,\n  onClick,\n}: ExpandableSectionHeaderProps) => {\n  const icon = (\n    <InternalIcon\n      size={variant === 'container' ? 'medium' : 'normal'}\n      className={clsx(styles.icon, expanded && styles.expanded)}\n      name=\"caret-down-filled\"\n    />\n  );\n  const defaultHeaderProps = {\n    id: id,\n    icon: icon,\n    expanded: expanded,\n    ariaControls: ariaControls,\n    ariaLabel: ariaLabel,\n    onClick: onClick,\n    variant,\n  };\n\n  const triggerClassName = clsx(styles.trigger, styles[`trigger-${variant}`], expanded && styles['trigger-expanded']);\n  if (variant === 'navigation') {\n    return (\n      <ExpandableNavigationHeader\n        className={clsx(className, triggerClassName)}\n        ariaLabelledBy={ariaLabelledBy}\n        {...defaultHeaderProps}\n      >\n        {headerText ?? header}\n      </ExpandableNavigationHeader>\n    );\n  }\n\n  if (headerText) {\n    return (\n      <ExpandableContainerHeader\n        className={clsx(className, triggerClassName, expanded && styles.expanded)}\n        headerDescription={headerDescription}\n        headerCounter={headerCounter}\n        headingTagOverride={headingTagOverride}\n        onKeyUp={onKeyUp}\n        onKeyDown={onKeyDown}\n        {...defaultHeaderProps}\n      >\n        {headerText}\n      </ExpandableContainerHeader>\n    );\n  }\n\n  if (variant === 'container' && header && isDevelopment) {\n    warnOnce(\n      'ExpandableSection',\n      'Use `headerText` instead of `header` to provide the button within the heading for a11y.'\n    );\n  }\n\n  return (\n    <ExpandableDefaultHeader\n      className={clsx(className, triggerClassName, styles.focusable, expanded && styles.expanded)}\n      onKeyUp={onKeyUp}\n      onKeyDown={onKeyDown}\n      {...defaultHeaderProps}\n    >\n      {headerText ?? header}\n    </ExpandableDefaultHeader>\n  );\n};\n"]}

package/expandable-section/styles.css.js

@@ -1,28 +1,29 @@
 
     import './styles.scoped.css';
     export default {
-  "content-enter": "awsui_content-enter_gwq0h_lduum_97",
-  "awsui-motion-fade-in": "awsui_awsui-motion-fade-in_gwq0h_lduum_1",
-  "trigger-expanded": "awsui_trigger-expanded_gwq0h_lduum_119",
-  "icon": "awsui_icon_gwq0h_lduum_133",
-  "root": "awsui_root_gwq0h_lduum_151",
-  "expanded": "awsui_expanded_gwq0h_lduum_171",
-  "icon-container": "awsui_icon-container_gwq0h_lduum_175",
-  "icon-container-container": "awsui_icon-container-container_gwq0h_lduum_180",
-  "trigger": "awsui_trigger_gwq0h_lduum_119",
-  "trigger-default": "awsui_trigger-default_gwq0h_lduum_193",
-  "trigger-footer": "awsui_trigger-footer_gwq0h_lduum_196",
-  "trigger-navigation": "awsui_trigger-navigation_gwq0h_lduum_202",
-  "trigger-container": "awsui_trigger-container_gwq0h_lduum_216",
-  "header": "awsui_header_gwq0h_lduum_226",
-  "header-wrapper": "awsui_header-wrapper_gwq0h_lduum_229",
-  "header-container": "awsui_header-container_gwq0h_lduum_236",
-  "header-container-button": "awsui_header-container-button_gwq0h_lduum_251",
-  "header-navigation": "awsui_header-navigation_gwq0h_lduum_259",
-  "content": "awsui_content_gwq0h_lduum_97",
-  "content-default": "awsui_content-default_gwq0h_lduum_295",
-  "content-footer": "awsui_content-footer_gwq0h_lduum_298",
-  "content-expanded": "awsui_content-expanded_gwq0h_lduum_301",
-  "focusable": "awsui_focusable_gwq0h_lduum_305"
+  "content-enter": "awsui_content-enter_gwq0h_15y3s_97",
+  "awsui-motion-fade-in": "awsui_awsui-motion-fade-in_gwq0h_15y3s_1",
+  "trigger-expanded": "awsui_trigger-expanded_gwq0h_15y3s_119",
+  "icon": "awsui_icon_gwq0h_15y3s_133",
+  "root": "awsui_root_gwq0h_15y3s_151",
+  "expanded": "awsui_expanded_gwq0h_15y3s_171",
+  "icon-container": "awsui_icon-container_gwq0h_15y3s_175",
+  "icon-container-container": "awsui_icon-container-container_gwq0h_15y3s_180",
+  "trigger": "awsui_trigger_gwq0h_15y3s_119",
+  "trigger-default": "awsui_trigger-default_gwq0h_15y3s_193",
+  "trigger-footer": "awsui_trigger-footer_gwq0h_15y3s_196",
+  "trigger-navigation": "awsui_trigger-navigation_gwq0h_15y3s_202",
+  "trigger-container": "awsui_trigger-container_gwq0h_15y3s_216",
+  "header": "awsui_header_gwq0h_15y3s_226",
+  "header-wrapper": "awsui_header-wrapper_gwq0h_15y3s_229",
+  "header-button": "awsui_header-button_gwq0h_15y3s_236",
+  "header-container": "awsui_header-container_gwq0h_15y3s_258",
+  "header-container-button": "awsui_header-container-button_gwq0h_15y3s_273",
+  "header-navigation": "awsui_header-navigation_gwq0h_15y3s_281",
+  "content": "awsui_content_gwq0h_15y3s_97",
+  "content-default": "awsui_content-default_gwq0h_15y3s_317",
+  "content-footer": "awsui_content-footer_gwq0h_15y3s_320",
+  "content-expanded": "awsui_content-expanded_gwq0h_15y3s_323",
+  "focusable": "awsui_focusable_gwq0h_15y3s_327"
 };
   

package/expandable-section/styles.scoped.css

@@ -94,10 +94,10 @@ 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_content-enter_gwq0h_lduum_97:not(#\9) {
-  animation: awsui_awsui-motion-fade-in_gwq0h_lduum_1 var(--motion-duration-show-paced-7wspqf, 180ms) var(--motion-easing-show-paced-wj4ybn, ease-out);
+.awsui_content-enter_gwq0h_15y3s_97:not(#\9) {
+  animation: awsui_awsui-motion-fade-in_gwq0h_15y3s_1 var(--motion-duration-show-paced-7wspqf, 180ms) var(--motion-easing-show-paced-wj4ybn, ease-out);
 }
-@keyframes awsui_awsui-motion-fade-in_gwq0h_lduum_1 {
+@keyframes awsui_awsui-motion-fade-in_gwq0h_15y3s_1 {
   from {
     opacity: 0.2;
   }
@@ -106,40 +106,40 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   }
 }
 @media (prefers-reduced-motion: reduce) {
-  .awsui_content-enter_gwq0h_lduum_97:not(#\9) {
+  .awsui_content-enter_gwq0h_15y3s_97:not(#\9) {
     animation: none;
     transition: none;
   }
 }
-.awsui-motion-disabled .awsui_content-enter_gwq0h_lduum_97:not(#\9), .awsui-mode-entering .awsui_content-enter_gwq0h_lduum_97:not(#\9) {
+.awsui-motion-disabled .awsui_content-enter_gwq0h_15y3s_97:not(#\9), .awsui-mode-entering .awsui_content-enter_gwq0h_15y3s_97:not(#\9) {
   animation: none;
   transition: none;
 }
 
-.awsui_trigger-expanded_gwq0h_lduum_119:not(#\9) {
+.awsui_trigger-expanded_gwq0h_15y3s_119:not(#\9) {
   transition: border-bottom-color var(--motion-duration-show-paced-7wspqf, 180ms) var(--motion-easing-show-paced-wj4ybn, ease-out);
 }
 @media (prefers-reduced-motion: reduce) {
-  .awsui_trigger-expanded_gwq0h_lduum_119:not(#\9) {
+  .awsui_trigger-expanded_gwq0h_15y3s_119:not(#\9) {
     animation: none;
     transition: none;
   }
 }
-.awsui-motion-disabled .awsui_trigger-expanded_gwq0h_lduum_119:not(#\9), .awsui-mode-entering .awsui_trigger-expanded_gwq0h_lduum_119:not(#\9) {
+.awsui-motion-disabled .awsui_trigger-expanded_gwq0h_15y3s_119:not(#\9), .awsui-mode-entering .awsui_trigger-expanded_gwq0h_15y3s_119:not(#\9) {
   animation: none;
   transition: none;
 }
 
-.awsui_icon_gwq0h_lduum_133:not(#\9) {
+.awsui_icon_gwq0h_15y3s_133:not(#\9) {
   transition: transform var(--motion-duration-rotate-90-ux18sr, 135ms) var(--motion-easing-rotate-90-eoew89, cubic-bezier(0.165, 0.84, 0.44, 1));
 }
 @media (prefers-reduced-motion: reduce) {
-  .awsui_icon_gwq0h_lduum_133:not(#\9) {
+  .awsui_icon_gwq0h_15y3s_133:not(#\9) {
     animation: none;
     transition: none;
   }
 }
-.awsui-motion-disabled .awsui_icon_gwq0h_lduum_133:not(#\9), .awsui-mode-entering .awsui_icon_gwq0h_lduum_133:not(#\9) {
+.awsui-motion-disabled .awsui_icon_gwq0h_15y3s_133:not(#\9), .awsui-mode-entering .awsui_icon_gwq0h_15y3s_133:not(#\9) {
   animation: none;
   transition: none;
 }
@@ -148,7 +148,7 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
  Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
  SPDX-License-Identifier: Apache-2.0
 */
-.awsui_root_gwq0h_lduum_151:not(#\9) {
+.awsui_root_gwq0h_15y3s_151:not(#\9) {
   /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
   border-collapse: separate;
   border-spacing: 0;
@@ -191,23 +191,23 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   display: block;
 }
 
-.awsui_icon_gwq0h_lduum_133:not(#\9) {
+.awsui_icon_gwq0h_15y3s_133:not(#\9) {
   transform: rotate(-90deg);
 }
-.awsui_icon_gwq0h_lduum_133.awsui_expanded_gwq0h_lduum_171:not(#\9) {
+.awsui_icon_gwq0h_15y3s_133.awsui_expanded_gwq0h_15y3s_171:not(#\9) {
   transform: rotate(0deg);
 }
 
-.awsui_icon-container_gwq0h_lduum_175:not(#\9) {
+.awsui_icon-container_gwq0h_15y3s_175:not(#\9) {
   position: relative;
   margin-left: calc((var(--font-body-m-line-height-i7xxvv, 22px) - var(--size-icon-normal-j1z5fn, 16px)) / -2);
   margin-right: calc(var(--space-xxs-ynfts5, 4px) + var(--border-divider-list-width-hacikr, 1px));
 }
-.awsui_icon-container-container_gwq0h_lduum_180:not(#\9) {
+.awsui_icon-container-container_gwq0h_15y3s_180:not(#\9) {
   margin-right: var(--space-xs-rsr2qu, 8px);
 }
 
-.awsui_trigger_gwq0h_lduum_119:not(#\9) {
+.awsui_trigger_gwq0h_15y3s_119:not(#\9) {
   cursor: pointer;
   box-sizing: border-box;
   display: flex;
@@ -216,19 +216,19 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   line-height: var(--font-body-m-line-height-i7xxvv, 22px);
   text-align: left;
 }
-.awsui_trigger-default_gwq0h_lduum_193:not(#\9) {
+.awsui_trigger-default_gwq0h_15y3s_193:not(#\9) {
   padding: var(--space-scaled-xxs-95dhkm, 4px) var(--space-xxs-ynfts5, 4px);
 }
-.awsui_trigger-footer_gwq0h_lduum_196:not(#\9) {
+.awsui_trigger-footer_gwq0h_15y3s_196:not(#\9) {
   padding: var(--space-scaled-xxs-95dhkm, 4px) 0;
 }
-.awsui_trigger-default_gwq0h_lduum_193:not(#\9), .awsui_trigger-footer_gwq0h_lduum_196:not(#\9) {
+.awsui_trigger-default_gwq0h_15y3s_193:not(#\9), .awsui_trigger-footer_gwq0h_15y3s_196:not(#\9) {
   border: var(--border-divider-section-width-4wm2it, 2px) solid transparent;
 }
-.awsui_trigger-navigation_gwq0h_lduum_202:not(#\9) {
+.awsui_trigger-navigation_gwq0h_15y3s_202:not(#\9) {
   border-left: var(--border-divider-section-width-4wm2it, 2px) solid transparent;
 }
-.awsui_trigger-default_gwq0h_lduum_193:not(#\9), .awsui_trigger-navigation_gwq0h_lduum_202:not(#\9), .awsui_trigger-footer_gwq0h_lduum_196:not(#\9) {
+.awsui_trigger-default_gwq0h_15y3s_193:not(#\9), .awsui_trigger-navigation_gwq0h_15y3s_202:not(#\9), .awsui_trigger-footer_gwq0h_15y3s_196:not(#\9) {
   color: var(--color-text-expandable-section-default-k03p1p, #000716);
   font-weight: var(--font-heading-s-weight-k8ys41, 800);
   -webkit-font-smoothing: var(--font-smoothing-webkit-vu3hx4, antialiased);
@@ -236,36 +236,58 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   font-size: var(--font-expandable-heading-size-m2wptt, 16px);
   letter-spacing: var(--font-heading-s-letter-spacing-4d69jc, -0.005em);
 }
-.awsui_trigger-default_gwq0h_lduum_193:not(#\9):hover, .awsui_trigger-navigation_gwq0h_lduum_202:not(#\9):hover, .awsui_trigger-footer_gwq0h_lduum_196:not(#\9):hover {
+.awsui_trigger-default_gwq0h_15y3s_193:not(#\9):hover, .awsui_trigger-navigation_gwq0h_15y3s_202:not(#\9):hover, .awsui_trigger-footer_gwq0h_15y3s_196:not(#\9):hover {
   color: var(--color-text-expandable-section-hover-73g3du, #0972d3);
 }
-.awsui_trigger-container_gwq0h_lduum_216:not(#\9) {
+.awsui_trigger-container_gwq0h_15y3s_216:not(#\9) {
   padding: var(--space-container-header-vertical-zsjhel, 12px) var(--space-container-horizontal-tlw03i, 20px);
 }
-body[data-awsui-focus-visible=true] .awsui_trigger-container_gwq0h_lduum_216:not(#\9):focus {
+body[data-awsui-focus-visible=true] .awsui_trigger-container_gwq0h_15y3s_216:not(#\9):focus {
   padding: calc(var(--space-scaled-s-cu1hzn, 12px) - var(--border-divider-section-width-4wm2it, 2px)) calc(var(--space-l-4vl6xu, 20px) - var(--border-divider-section-width-4wm2it, 2px));
 }
-.awsui_trigger-default_gwq0h_lduum_193.awsui_trigger-expanded_gwq0h_lduum_119:not(#\9) {
+.awsui_trigger-default_gwq0h_15y3s_193.awsui_trigger-expanded_gwq0h_15y3s_119:not(#\9) {
   border-bottom-color: var(--color-border-divider-default-7s2wjw, #e9ebed);
 }
 
-.awsui_header_gwq0h_lduum_226:not(#\9) {
+.awsui_header_gwq0h_15y3s_226:not(#\9) {
   display: flex;
 }
-.awsui_header-wrapper_gwq0h_lduum_229:not(#\9) {
+.awsui_header-wrapper_gwq0h_15y3s_229:not(#\9) {
   font-weight: inherit;
   font-size: inherit;
   letter-spacing: inherit;
   margin: 0;
   padding: 0;
 }
-.awsui_header-container_gwq0h_lduum_236:not(#\9) {
+.awsui_header-button_gwq0h_15y3s_236:not(#\9) {
+  box-sizing: border-box;
+  display: flex;
+}
+body[data-awsui-focus-visible=true] .awsui_header-button_gwq0h_15y3s_236:not(#\9):focus {
+  position: relative;
+}
+body[data-awsui-focus-visible=true] .awsui_header-button_gwq0h_15y3s_236:not(#\9):focus {
+  outline: 2px dotted transparent;
+  outline-offset: calc(0px - 1px);
+}
+body[data-awsui-focus-visible=true] .awsui_header-button_gwq0h_15y3s_236:not(#\9):focus::before {
+  content: " ";
+  display: block;
+  position: absolute;
+  left: calc(-1 * 0px);
+  top: calc(-1 * 0px);
+  width: calc(100% + 2 * 0px);
+  height: calc(100% + 2 * 0px);
+  border-radius: var(--border-radius-control-default-focus-ring-7661kz, 4px);
+  box-shadow: 0 0 0 2px var(--color-border-item-focused-ap3b6s, #0972d3);
+}
+.awsui_header-container_gwq0h_15y3s_258:not(#\9) {
   width: 100%;
 }
-.awsui_header-container_gwq0h_lduum_236 > .awsui_icon-container_gwq0h_lduum_175:not(#\9) {
+.awsui_header-container_gwq0h_15y3s_258 > .awsui_icon-container_gwq0h_15y3s_175:not(#\9) {
   margin-top: var(--space-expandable-section-icon-offset-top-q2xewd, 4px);
 }
-.awsui_header-container_gwq0h_lduum_236[data-awsui-focus-visible=true]:not(#\9):focus-within {
+body[data-awsui-focus-visible=true] .awsui_header-container_gwq0h_15y3s_258:not(#\9):focus-within {
   outline: none;
   text-decoration: none;
   padding: calc(var(--space-scaled-s-cu1hzn, 12px) - var(--border-divider-section-width-4wm2it, 2px)) calc(var(--space-l-4vl6xu, 20px) - var(--border-divider-section-width-4wm2it, 2px));
@@ -274,15 +296,15 @@ body[data-awsui-focus-visible=true] .awsui_trigger-container_gwq0h_lduum_216:not
   border-radius: var(--border-radius-control-default-focus-ring-7661kz, 4px);
   box-shadow: 0 0 0 var(--border-control-focus-ring-shadow-spread-srzyiu, 0px) var(--color-border-item-focused-ap3b6s, #0972d3);
 }
-.awsui_header-container-button_gwq0h_lduum_251:not(#\9) {
+.awsui_header-container-button_gwq0h_15y3s_273:not(#\9) {
   box-sizing: border-box;
   display: flex;
 }
-.awsui_header-container-button_gwq0h_lduum_251:not(#\9):focus {
+body[data-awsui-focus-visible=true] .awsui_header-container-button_gwq0h_15y3s_273:not(#\9):focus {
   outline: none;
   text-decoration: none;
 }
-.awsui_header-navigation_gwq0h_lduum_259 > .awsui_icon-container_gwq0h_lduum_175:not(#\9) {
+.awsui_header-navigation_gwq0h_15y3s_281 > .awsui_icon-container_gwq0h_15y3s_175:not(#\9) {
   display: inline-flex;
   cursor: pointer;
   color: var(--color-text-expandable-section-navigation-icon-default-lb9rm0, #414d5c);
@@ -293,17 +315,17 @@ body[data-awsui-focus-visible=true] .awsui_trigger-container_gwq0h_lduum_216:not
   text-decoration: none;
   flex-direction: column;
 }
-.awsui_header-navigation_gwq0h_lduum_259 > .awsui_icon-container_gwq0h_lduum_175:not(#\9):hover {
+.awsui_header-navigation_gwq0h_15y3s_281 > .awsui_icon-container_gwq0h_15y3s_175:not(#\9):hover {
   color: var(--color-text-expandable-section-hover-73g3du, #0972d3);
 }
-body[data-awsui-focus-visible=true] .awsui_header-navigation_gwq0h_lduum_259 > .awsui_icon-container_gwq0h_lduum_175:not(#\9):focus {
+body[data-awsui-focus-visible=true] .awsui_header-navigation_gwq0h_15y3s_281 > .awsui_icon-container_gwq0h_15y3s_175:not(#\9):focus {
   position: relative;
 }
-body[data-awsui-focus-visible=true] .awsui_header-navigation_gwq0h_lduum_259 > .awsui_icon-container_gwq0h_lduum_175:not(#\9):focus {
+body[data-awsui-focus-visible=true] .awsui_header-navigation_gwq0h_15y3s_281 > .awsui_icon-container_gwq0h_15y3s_175:not(#\9):focus {
   outline: 2px dotted transparent;
   outline-offset: calc(2px - 1px);
 }
-body[data-awsui-focus-visible=true] .awsui_header-navigation_gwq0h_lduum_259 > .awsui_icon-container_gwq0h_lduum_175:not(#\9):focus::before {
+body[data-awsui-focus-visible=true] .awsui_header-navigation_gwq0h_15y3s_281 > .awsui_icon-container_gwq0h_15y3s_175:not(#\9):focus::before {
   content: " ";
   display: block;
   position: absolute;
@@ -315,24 +337,24 @@ body[data-awsui-focus-visible=true] .awsui_header-navigation_gwq0h_lduum_259 > .
   box-shadow: 0 0 0 2px var(--color-border-item-focused-ap3b6s, #0972d3);
 }
 
-.awsui_content_gwq0h_lduum_97:not(#\9) {
+.awsui_content_gwq0h_15y3s_97:not(#\9) {
   display: none;
 }
-.awsui_content-default_gwq0h_lduum_295:not(#\9) {
+.awsui_content-default_gwq0h_15y3s_317:not(#\9) {
   padding: var(--space-scaled-xs-6859qs, 8px) 0;
 }
-.awsui_content-footer_gwq0h_lduum_298:not(#\9) {
+.awsui_content-footer_gwq0h_15y3s_320:not(#\9) {
   padding: var(--space-xs-rsr2qu, 8px) 0;
 }
-.awsui_content-expanded_gwq0h_lduum_301:not(#\9) {
+.awsui_content-expanded_gwq0h_15y3s_323:not(#\9) {
   display: block;
 }
 
-.awsui_focusable_gwq0h_lduum_305:not(#\9):focus {
+.awsui_focusable_gwq0h_15y3s_327:not(#\9):focus {
   outline: none;
   text-decoration: none;
 }
-body[data-awsui-focus-visible=true] .awsui_focusable_gwq0h_lduum_305:not(#\9):focus {
+body[data-awsui-focus-visible=true] .awsui_focusable_gwq0h_15y3s_327:not(#\9):focus {
   outline: 2px dotted transparent;
   border: var(--border-field-width-idlekx, 2px) solid var(--color-border-item-focused-ap3b6s, #0972d3);
   border-radius: var(--border-radius-control-default-focus-ring-7661kz, 4px);

package/expandable-section/styles.selectors.js

@@ -2,28 +2,29 @@
     // es-module interop with Babel and Typescript
     Object.defineProperty(exports, "__esModule", { value: true });
     module.exports.default = {
-  "content-enter": "awsui_content-enter_gwq0h_lduum_97",
-  "awsui-motion-fade-in": "awsui_awsui-motion-fade-in_gwq0h_lduum_1",
-  "trigger-expanded": "awsui_trigger-expanded_gwq0h_lduum_119",
-  "icon": "awsui_icon_gwq0h_lduum_133",
-  "root": "awsui_root_gwq0h_lduum_151",
-  "expanded": "awsui_expanded_gwq0h_lduum_171",
-  "icon-container": "awsui_icon-container_gwq0h_lduum_175",
-  "icon-container-container": "awsui_icon-container-container_gwq0h_lduum_180",
-  "trigger": "awsui_trigger_gwq0h_lduum_119",
-  "trigger-default": "awsui_trigger-default_gwq0h_lduum_193",
-  "trigger-footer": "awsui_trigger-footer_gwq0h_lduum_196",
-  "trigger-navigation": "awsui_trigger-navigation_gwq0h_lduum_202",
-  "trigger-container": "awsui_trigger-container_gwq0h_lduum_216",
-  "header": "awsui_header_gwq0h_lduum_226",
-  "header-wrapper": "awsui_header-wrapper_gwq0h_lduum_229",
-  "header-container": "awsui_header-container_gwq0h_lduum_236",
-  "header-container-button": "awsui_header-container-button_gwq0h_lduum_251",
-  "header-navigation": "awsui_header-navigation_gwq0h_lduum_259",
-  "content": "awsui_content_gwq0h_lduum_97",
-  "content-default": "awsui_content-default_gwq0h_lduum_295",
-  "content-footer": "awsui_content-footer_gwq0h_lduum_298",
-  "content-expanded": "awsui_content-expanded_gwq0h_lduum_301",
-  "focusable": "awsui_focusable_gwq0h_lduum_305"
+  "content-enter": "awsui_content-enter_gwq0h_15y3s_97",
+  "awsui-motion-fade-in": "awsui_awsui-motion-fade-in_gwq0h_15y3s_1",
+  "trigger-expanded": "awsui_trigger-expanded_gwq0h_15y3s_119",
+  "icon": "awsui_icon_gwq0h_15y3s_133",
+  "root": "awsui_root_gwq0h_15y3s_151",
+  "expanded": "awsui_expanded_gwq0h_15y3s_171",
+  "icon-container": "awsui_icon-container_gwq0h_15y3s_175",
+  "icon-container-container": "awsui_icon-container-container_gwq0h_15y3s_180",
+  "trigger": "awsui_trigger_gwq0h_15y3s_119",
+  "trigger-default": "awsui_trigger-default_gwq0h_15y3s_193",
+  "trigger-footer": "awsui_trigger-footer_gwq0h_15y3s_196",
+  "trigger-navigation": "awsui_trigger-navigation_gwq0h_15y3s_202",
+  "trigger-container": "awsui_trigger-container_gwq0h_15y3s_216",
+  "header": "awsui_header_gwq0h_15y3s_226",
+  "header-wrapper": "awsui_header-wrapper_gwq0h_15y3s_229",
+  "header-button": "awsui_header-button_gwq0h_15y3s_236",
+  "header-container": "awsui_header-container_gwq0h_15y3s_258",
+  "header-container-button": "awsui_header-container-button_gwq0h_15y3s_273",
+  "header-navigation": "awsui_header-navigation_gwq0h_15y3s_281",
+  "content": "awsui_content_gwq0h_15y3s_97",
+  "content-default": "awsui_content-default_gwq0h_15y3s_317",
+  "content-footer": "awsui_content-footer_gwq0h_15y3s_320",
+  "content-expanded": "awsui_content-expanded_gwq0h_15y3s_323",
+  "focusable": "awsui_focusable_gwq0h_15y3s_327"
 };
   

package/file-upload/file-input/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"lib/default/","sources":["file-upload/file-input/index.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAiE,MAAM,OAAO,CAAC;AAMtF,OAAO,EAAE,+BAA+B,EAAE,MAAM,2CAA2C,CAAC;AAG5F,OAAO,EAAE,eAAe,EAAE,MAAM,eAAe,CAAC;AAGhD,UAAU,cAAe,SAAQ,+BAA+B;IAC9D,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,QAAQ,EAAE,OAAO,CAAC;IAClB,KAAK,EAAE,SAAS,IAAI,EAAE,CAAC;IACvB,QAAQ,EAAE,CAAC,KAAK,EAAE,IAAI,EAAE,KAAK,IAAI,CAAC;IAClC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;;AAED,wBAA2C"}
+{"version":3,"file":"index.d.ts","sourceRoot":"lib/default/","sources":["file-upload/file-input/index.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAiE,MAAM,OAAO,CAAC;AAMtF,OAAO,EAAE,+BAA+B,EAAE,MAAM,2CAA2C,CAAC;AAG5F,OAAO,EAAE,eAAe,EAAE,MAAM,eAAe,CAAC;AAIhD,UAAU,cAAe,SAAQ,+BAA+B;IAC9D,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,QAAQ,EAAE,OAAO,CAAC;IAClB,KAAK,EAAE,SAAS,IAAI,EAAE,CAAC;IACvB,QAAQ,EAAE,CAAC,KAAK,EAAE,IAAI,EAAE,KAAK,IAAI,CAAC;IAClC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;;AAED,wBAA2C"}

package/file-upload/file-input/index.js

@@ -9,6 +9,7 @@ import { useUniqueId } from '../../internal/hooks/use-unique-id';
 import { joinStrings } from '../../internal/utils/strings';
 import ScreenreaderOnly from '../../internal/components/screenreader-only';
 import useForwardFocus from '../../internal/hooks/forward-focus';
+import clsx from 'clsx';
 export default React.forwardRef(FileInput);
 function FileInput(_a, ref) {
     var _b;
@@ -49,7 +50,7 @@ function FileInput(_a, ref) {
     }, [value]);
     return (React.createElement("div", { className: styles['file-input-container'] },
         React.createElement("input", Object.assign({ id: controlId, ref: uploadInputRef, type: "file", hidden: false, multiple: multiple, accept: accept, onChange: onUploadInputChange, onFocus: onUploadInputFocus, onBlur: onUploadInputBlur, className: styles['upload-input'] }, nativeAttributes)),
-        React.createElement(InternalButton, { iconName: "upload", formAction: "none", onClick: onUploadButtonClick, className: styles['upload-button'], __nativeAttributes: { tabIndex: -1, 'aria-hidden': true }, __forcedFocusState: isFocused ? 'focused' : undefined }, children),
+        React.createElement(InternalButton, { iconName: "upload", formAction: "none", onClick: onUploadButtonClick, className: clsx(styles['upload-button'], isFocused && styles['force-focus-outline']), __nativeAttributes: { tabIndex: -1, 'aria-hidden': true } }, children),
         React.createElement(ScreenreaderOnly, { id: uploadButtonLabelId }, children)));
 }
 //# sourceMappingURL=index.js.map

package/file-upload/file-input/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"lib/default/","sources":["file-upload/file-input/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, { ChangeEvent, ForwardedRef, useEffect, useRef, useState } from 'react';\n\nimport InternalButton from '../../button/internal';\nimport styles from './styles.css.js';\nimport { useFormFieldContext } from '../../contexts/form-field';\nimport { useUniqueId } from '../../internal/hooks/use-unique-id';\nimport { FormFieldValidationControlProps } from '../../internal/context/form-field-context';\nimport { joinStrings } from '../../internal/utils/strings';\nimport ScreenreaderOnly from '../../internal/components/screenreader-only';\nimport { FileUploadProps } from '../interfaces';\nimport useForwardFocus from '../../internal/hooks/forward-focus';\n\ninterface FileInputProps extends FormFieldValidationControlProps {\n  accept?: string;\n  ariaRequired?: boolean;\n  multiple: boolean;\n  value: readonly File[];\n  onChange: (files: File[]) => void;\n  children: React.ReactNode;\n}\n\nexport default React.forwardRef(FileInput);\n\nfunction FileInput(\n  { accept, ariaRequired, multiple, value, onChange, children, ...restProps }: FileInputProps,\n  ref: ForwardedRef<FileUploadProps.Ref>\n) {\n  const uploadInputRef = useRef<HTMLInputElement>(null);\n  const uploadButtonLabelId = useUniqueId('upload-button-label');\n  const formFieldContext = useFormFieldContext(restProps);\n  const selfControlId = useUniqueId('upload-input');\n  const controlId = formFieldContext.controlId ?? selfControlId;\n\n  useForwardFocus(ref, uploadInputRef);\n\n  const [isFocused, setIsFocused] = useState(false);\n\n  const onUploadButtonClick = () => uploadInputRef.current?.click();\n\n  const onUploadInputFocus = () => setIsFocused(true);\n\n  const onUploadInputBlur = () => setIsFocused(false);\n\n  const onUploadInputChange = ({ target }: ChangeEvent<HTMLInputElement>) => {\n    onChange(target.files ? Array.from(target.files) : []);\n  };\n\n  const nativeAttributes: Record<string, any> = {\n    'aria-labelledby': joinStrings(formFieldContext.ariaLabelledby, uploadButtonLabelId),\n    'aria-describedby': formFieldContext.ariaDescribedby,\n  };\n  if (formFieldContext.invalid) {\n    nativeAttributes['aria-invalid'] = true;\n  }\n  if (ariaRequired) {\n    nativeAttributes['aria-required'] = true;\n  }\n\n  // Synchronizing component's value with the native file input state.\n  useEffect(() => {\n    // The DataTransfer is not available in jsdom.\n    if (window.DataTransfer) {\n      const dataTransfer = new DataTransfer();\n      for (const file of value) {\n        dataTransfer.items.add(file);\n      }\n      uploadInputRef.current!.files = dataTransfer.files;\n    }\n  }, [value]);\n\n  return (\n    <div className={styles['file-input-container']}>\n      {/* This is the actual interactive and accessible file-upload element. */}\n      {/* It is visually hidden to achieve the desired UX design. */}\n      <input\n        id={controlId}\n        ref={uploadInputRef}\n        type=\"file\"\n        hidden={false}\n        multiple={multiple}\n        accept={accept}\n        onChange={onUploadInputChange}\n        onFocus={onUploadInputFocus}\n        onBlur={onUploadInputBlur}\n        className={styles['upload-input']}\n        {...nativeAttributes}\n      />\n\n      {/* The button is decorative. It dispatches clicks to the file input and is ARIA-hidden. */}\n      {/* When the input is focused the focus outline is forced on the button. */}\n      <InternalButton\n        iconName=\"upload\"\n        formAction=\"none\"\n        onClick={onUploadButtonClick}\n        className={styles['upload-button']}\n        __nativeAttributes={{ tabIndex: -1, 'aria-hidden': true }}\n        __forcedFocusState={isFocused ? 'focused' : undefined}\n      >\n        {children}\n      </InternalButton>\n\n      {/* The file input needs to be labelled with provided content. Can't use the button because it is ARIA-hidden. */}\n      <ScreenreaderOnly id={uploadButtonLabelId}>{children}</ScreenreaderOnly>\n    </div>\n  );\n}\n"]}
+{"version":3,"file":"index.js","sourceRoot":"lib/default/","sources":["file-upload/file-input/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, { ChangeEvent, ForwardedRef, useEffect, useRef, useState } from 'react';\n\nimport InternalButton from '../../button/internal';\nimport styles from './styles.css.js';\nimport { useFormFieldContext } from '../../contexts/form-field';\nimport { useUniqueId } from '../../internal/hooks/use-unique-id';\nimport { FormFieldValidationControlProps } from '../../internal/context/form-field-context';\nimport { joinStrings } from '../../internal/utils/strings';\nimport ScreenreaderOnly from '../../internal/components/screenreader-only';\nimport { FileUploadProps } from '../interfaces';\nimport useForwardFocus from '../../internal/hooks/forward-focus';\nimport clsx from 'clsx';\n\ninterface FileInputProps extends FormFieldValidationControlProps {\n  accept?: string;\n  ariaRequired?: boolean;\n  multiple: boolean;\n  value: readonly File[];\n  onChange: (files: File[]) => void;\n  children: React.ReactNode;\n}\n\nexport default React.forwardRef(FileInput);\n\nfunction FileInput(\n  { accept, ariaRequired, multiple, value, onChange, children, ...restProps }: FileInputProps,\n  ref: ForwardedRef<FileUploadProps.Ref>\n) {\n  const uploadInputRef = useRef<HTMLInputElement>(null);\n  const uploadButtonLabelId = useUniqueId('upload-button-label');\n  const formFieldContext = useFormFieldContext(restProps);\n  const selfControlId = useUniqueId('upload-input');\n  const controlId = formFieldContext.controlId ?? selfControlId;\n\n  useForwardFocus(ref, uploadInputRef);\n\n  const [isFocused, setIsFocused] = useState(false);\n\n  const onUploadButtonClick = () => uploadInputRef.current?.click();\n\n  const onUploadInputFocus = () => setIsFocused(true);\n\n  const onUploadInputBlur = () => setIsFocused(false);\n\n  const onUploadInputChange = ({ target }: ChangeEvent<HTMLInputElement>) => {\n    onChange(target.files ? Array.from(target.files) : []);\n  };\n\n  const nativeAttributes: Record<string, any> = {\n    'aria-labelledby': joinStrings(formFieldContext.ariaLabelledby, uploadButtonLabelId),\n    'aria-describedby': formFieldContext.ariaDescribedby,\n  };\n  if (formFieldContext.invalid) {\n    nativeAttributes['aria-invalid'] = true;\n  }\n  if (ariaRequired) {\n    nativeAttributes['aria-required'] = true;\n  }\n\n  // Synchronizing component's value with the native file input state.\n  useEffect(() => {\n    // The DataTransfer is not available in jsdom.\n    if (window.DataTransfer) {\n      const dataTransfer = new DataTransfer();\n      for (const file of value) {\n        dataTransfer.items.add(file);\n      }\n      uploadInputRef.current!.files = dataTransfer.files;\n    }\n  }, [value]);\n\n  return (\n    <div className={styles['file-input-container']}>\n      {/* This is the actual interactive and accessible file-upload element. */}\n      {/* It is visually hidden to achieve the desired UX design. */}\n      <input\n        id={controlId}\n        ref={uploadInputRef}\n        type=\"file\"\n        hidden={false}\n        multiple={multiple}\n        accept={accept}\n        onChange={onUploadInputChange}\n        onFocus={onUploadInputFocus}\n        onBlur={onUploadInputBlur}\n        className={styles['upload-input']}\n        {...nativeAttributes}\n      />\n\n      {/* The button is decorative. It dispatches clicks to the file input and is ARIA-hidden. */}\n      {/* When the input is focused the focus outline is forced on the button. */}\n      <InternalButton\n        iconName=\"upload\"\n        formAction=\"none\"\n        onClick={onUploadButtonClick}\n        className={clsx(styles['upload-button'], isFocused && styles['force-focus-outline'])}\n        __nativeAttributes={{ tabIndex: -1, 'aria-hidden': true }}\n      >\n        {children}\n      </InternalButton>\n\n      {/* The file input needs to be labelled with provided content. Can't use the button because it is ARIA-hidden. */}\n      <ScreenreaderOnly id={uploadButtonLabelId}>{children}</ScreenreaderOnly>\n    </div>\n  );\n}\n"]}

package/file-upload/file-input/styles.css.js

@@ -1,8 +1,9 @@
 
     import './styles.scoped.css';
     export default {
-  "upload-button": "awsui_upload-button_4xu1k_1753t_9",
-  "upload-input": "awsui_upload-input_4xu1k_1753t_10",
-  "file-input-container": "awsui_file-input-container_4xu1k_1753t_14"
+  "upload-button": "awsui_upload-button_4xu1k_2ymx3_93",
+  "upload-input": "awsui_upload-input_4xu1k_2ymx3_94",
+  "file-input-container": "awsui_file-input-container_4xu1k_2ymx3_98",
+  "force-focus-outline": "awsui_force-focus-outline_4xu1k_2ymx3_107"
 };