@cloudscape-design/components 3.0.1276 → 3.0.1278

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1,5 +1,5 @@
1
1
  import React from 'react';
2
- import { type ActionCardProps } from './interfaces';
2
+ import { ActionCardProps } from './interfaces';
3
3
  export { ActionCardProps };
4
4
  declare const ActionCard: React.ForwardRefExoticComponent<ActionCardProps & React.RefAttributes<ActionCardProps.Ref>>;
5
5
  export default ActionCard;
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/action-card/index.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,MAAM,OAAO,CAAC;AAK1B,OAAO,EAAE,KAAK,eAAe,EAAE,MAAM,cAAc,CAAC;AAGpD,OAAO,EAAE,eAAe,EAAE,CAAC;AAE3B,QAAA,MAAM,UAAU,6FA2Cf,CAAC;AAGF,eAAe,UAAU,CAAC"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/action-card/index.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,MAAM,OAAO,CAAC;AAK1B,OAAO,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AAG/C,OAAO,EAAE,eAAe,EAAE,CAAC;AAE3B,QAAA,MAAM,UAAU,6FA2Cf,CAAC;AAGF,eAAe,UAAU,CAAC"}
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/action-card/index.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,YAAY,CAAC;AACb,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,gBAAgB,MAAM,sCAAsC,CAAC;AACpE,OAAO,EAAE,gBAAgB,EAAE,MAAM,sCAAsC,CAAC;AACxE,OAAO,EAAE,gBAAgB,EAAE,MAAM,kCAAkC,CAAC;AAEpE,OAAO,kBAAkB,MAAM,YAAY,CAAC;AAI5C,MAAM,UAAU,GAAG,KAAK,CAAC,UAAU,CACjC,CACE,EACE,QAAQ,GAAG,KAAK,EAChB,qBAAqB,GAAG,KAAK,EAC7B,sBAAsB,GAAG,KAAK,EAC9B,qBAAqB,GAAG,KAAK,EAC7B,OAAO,GAAG,SAAS,EACnB,GAAG,KAAK,EACQ,EAClB,GAAmC,EACnC,EAAE;IACF,MAAM,kBAAkB,GAAG,gBAAgB,CAAC,YAAY,EAAE;QACxD,KAAK,EAAE;YACL,QAAQ;YACR,qBAAqB;YACrB,sBAAsB;YACtB,qBAAqB;YACrB,OAAO;SACR;QACD,QAAQ,EAAE;YACR,SAAS,EAAE,OAAO,CAAC,KAAK,CAAC,MAAM,CAAC;YAChC,cAAc,EAAE,OAAO,CAAC,KAAK,CAAC,WAAW,CAAC;YAC1C,UAAU,EAAE,OAAO,CAAC,KAAK,CAAC,QAAQ,CAAC;YACnC,OAAO,EAAE,OAAO,CAAC,KAAK,CAAC,IAAI,CAAC;SAC7B;KACF,CAAC,CAAC;IAEH,MAAM,aAAa,GAAG,gBAAgB,CAAC,KAAK,CAAC,CAAC;IAE9C,OAAO,CACL,oBAAC,kBAAkB,IACjB,GAAG,EAAE,GAAG,EACR,QAAQ,EAAE,QAAQ,EAClB,qBAAqB,EAAE,qBAAqB,EAC5C,sBAAsB,EAAE,sBAAsB,EAC9C,qBAAqB,EAAE,qBAAqB,EAC5C,OAAO,EAAE,OAAO,KACZ,aAAa,KACb,kBAAkB,GACtB,CACH,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,gBAAgB,CAAC,UAAU,EAAE,YAAY,CAAC,CAAC;AAC3C,eAAe,UAAU,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\n'use client';\nimport React from 'react';\n\nimport useBaseComponent from '../internal/hooks/use-base-component';\nimport { applyDisplayName } from '../internal/utils/apply-display-name';\nimport { getExternalProps } from '../internal/utils/external-props';\nimport { type ActionCardProps } from './interfaces';\nimport InternalActionCard from './internal';\n\nexport { ActionCardProps };\n\nconst ActionCard = React.forwardRef(\n (\n {\n disabled = false,\n disableHeaderPaddings = false,\n disableContentPaddings = false,\n iconVerticalAlignment = 'top',\n variant = 'default',\n ...props\n }: ActionCardProps,\n ref: React.Ref<ActionCardProps.Ref>\n ) => {\n const baseComponentProps = useBaseComponent('ActionCard', {\n props: {\n disabled,\n disableHeaderPaddings,\n disableContentPaddings,\n iconVerticalAlignment,\n variant,\n },\n metadata: {\n hasHeader: Boolean(props.header),\n hasDescription: Boolean(props.description),\n hasContent: Boolean(props.children),\n hasIcon: Boolean(props.icon),\n },\n });\n\n const externalProps = getExternalProps(props);\n\n return (\n <InternalActionCard\n ref={ref}\n disabled={disabled}\n disableHeaderPaddings={disableHeaderPaddings}\n disableContentPaddings={disableContentPaddings}\n iconVerticalAlignment={iconVerticalAlignment}\n variant={variant}\n {...externalProps}\n {...baseComponentProps}\n />\n );\n }\n);\n\napplyDisplayName(ActionCard, 'ActionCard');\nexport default ActionCard;\n"]}
1
+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/action-card/index.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,YAAY,CAAC;AACb,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,gBAAgB,MAAM,sCAAsC,CAAC;AACpE,OAAO,EAAE,gBAAgB,EAAE,MAAM,sCAAsC,CAAC;AACxE,OAAO,EAAE,gBAAgB,EAAE,MAAM,kCAAkC,CAAC;AAEpE,OAAO,kBAAkB,MAAM,YAAY,CAAC;AAI5C,MAAM,UAAU,GAAG,KAAK,CAAC,UAAU,CACjC,CACE,EACE,QAAQ,GAAG,KAAK,EAChB,qBAAqB,GAAG,KAAK,EAC7B,sBAAsB,GAAG,KAAK,EAC9B,qBAAqB,GAAG,KAAK,EAC7B,OAAO,GAAG,SAAS,EACnB,GAAG,KAAK,EACQ,EAClB,GAAmC,EACnC,EAAE;IACF,MAAM,kBAAkB,GAAG,gBAAgB,CAAC,YAAY,EAAE;QACxD,KAAK,EAAE;YACL,QAAQ;YACR,qBAAqB;YACrB,sBAAsB;YACtB,qBAAqB;YACrB,OAAO;SACR;QACD,QAAQ,EAAE;YACR,SAAS,EAAE,OAAO,CAAC,KAAK,CAAC,MAAM,CAAC;YAChC,cAAc,EAAE,OAAO,CAAC,KAAK,CAAC,WAAW,CAAC;YAC1C,UAAU,EAAE,OAAO,CAAC,KAAK,CAAC,QAAQ,CAAC;YACnC,OAAO,EAAE,OAAO,CAAC,KAAK,CAAC,IAAI,CAAC;SAC7B;KACF,CAAC,CAAC;IAEH,MAAM,aAAa,GAAG,gBAAgB,CAAC,KAAK,CAAC,CAAC;IAE9C,OAAO,CACL,oBAAC,kBAAkB,IACjB,GAAG,EAAE,GAAG,EACR,QAAQ,EAAE,QAAQ,EAClB,qBAAqB,EAAE,qBAAqB,EAC5C,sBAAsB,EAAE,sBAAsB,EAC9C,qBAAqB,EAAE,qBAAqB,EAC5C,OAAO,EAAE,OAAO,KACZ,aAAa,KACb,kBAAkB,GACtB,CACH,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,gBAAgB,CAAC,UAAU,EAAE,YAAY,CAAC,CAAC;AAC3C,eAAe,UAAU,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\n'use client';\nimport React from 'react';\n\nimport useBaseComponent from '../internal/hooks/use-base-component';\nimport { applyDisplayName } from '../internal/utils/apply-display-name';\nimport { getExternalProps } from '../internal/utils/external-props';\nimport { ActionCardProps } from './interfaces';\nimport InternalActionCard from './internal';\n\nexport { ActionCardProps };\n\nconst ActionCard = React.forwardRef(\n (\n {\n disabled = false,\n disableHeaderPaddings = false,\n disableContentPaddings = false,\n iconVerticalAlignment = 'top',\n variant = 'default',\n ...props\n }: ActionCardProps,\n ref: React.Ref<ActionCardProps.Ref>\n ) => {\n const baseComponentProps = useBaseComponent('ActionCard', {\n props: {\n disabled,\n disableHeaderPaddings,\n disableContentPaddings,\n iconVerticalAlignment,\n variant,\n },\n metadata: {\n hasHeader: Boolean(props.header),\n hasDescription: Boolean(props.description),\n hasContent: Boolean(props.children),\n hasIcon: Boolean(props.icon),\n },\n });\n\n const externalProps = getExternalProps(props);\n\n return (\n <InternalActionCard\n ref={ref}\n disabled={disabled}\n disableHeaderPaddings={disableHeaderPaddings}\n disableContentPaddings={disableContentPaddings}\n iconVerticalAlignment={iconVerticalAlignment}\n variant={variant}\n {...externalProps}\n {...baseComponentProps}\n />\n );\n }\n);\n\napplyDisplayName(ActionCard, 'ActionCard');\nexport default ActionCard;\n"]}
@@ -1,6 +1,6 @@
1
1
  import React from 'react';
2
2
  import { InternalBaseComponentProps } from '../internal/hooks/use-base-component';
3
- import { type ActionCardProps } from './interfaces';
3
+ import { ActionCardProps } from './interfaces';
4
4
  export type InternalActionCardProps = ActionCardProps & InternalBaseComponentProps;
5
5
  declare const InternalActionCard: React.ForwardRefExoticComponent<ActionCardProps & InternalBaseComponentProps & React.RefAttributes<ActionCardProps.Ref>>;
6
6
  export default InternalActionCard;
@@ -1 +1 @@
1
- {"version":3,"file":"internal.d.ts","sourceRoot":"","sources":["../../../src/action-card/internal.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAiB,MAAM,OAAO,CAAC;AAStC,OAAO,EAAE,0BAA0B,EAAE,MAAM,sCAAsC,CAAC;AAElF,OAAO,EAAE,KAAK,eAAe,EAAE,MAAM,cAAc,CAAC;AAKpD,MAAM,MAAM,uBAAuB,GAAG,eAAe,GAAG,0BAA0B,CAAC;AAEnF,QAAA,MAAM,kBAAkB,0HA8LvB,CAAC;AAEF,eAAe,kBAAkB,CAAC"}
1
+ {"version":3,"file":"internal.d.ts","sourceRoot":"","sources":["../../../src/action-card/internal.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAiB,MAAM,OAAO,CAAC;AAStC,OAAO,EAAE,0BAA0B,EAAE,MAAM,sCAAsC,CAAC;AAElF,OAAO,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AAK/C,MAAM,MAAM,uBAAuB,GAAG,eAAe,GAAG,0BAA0B,CAAC;AAEnF,QAAA,MAAM,kBAAkB,0HA8LvB,CAAC;AAEF,eAAe,kBAAkB,CAAC"}
@@ -1 +1 @@
1
- {"version":3,"file":"internal.js","sourceRoot":"","sources":["../../../src/action-card/internal.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React, { useRef } from 'react';\nimport clsx from 'clsx';\n\nimport { useMergeRefs, useUniqueId, warnOnce } from '@cloudscape-design/component-toolkit/internal';\n\nimport { getBaseProps } from '../internal/base-component';\nimport InternalStructuredItem from '../internal/components/structured-item';\nimport { fireCancelableEvent } from '../internal/events';\nimport useForwardFocus from '../internal/hooks/forward-focus';\nimport { InternalBaseComponentProps } from '../internal/hooks/use-base-component';\nimport WithNativeAttributes from '../internal/utils/with-native-attributes';\nimport { type ActionCardProps } from './interfaces';\n\nimport styles from './styles.css.js';\nimport testStyles from './test-classes/styles.css.js';\n\nexport type InternalActionCardProps = ActionCardProps & InternalBaseComponentProps;\n\nconst InternalActionCard = React.forwardRef(\n (\n {\n header,\n description,\n children,\n onClick,\n ariaLabel,\n ariaDescribedby,\n disabled,\n disableHeaderPaddings,\n disableContentPaddings,\n icon,\n iconVerticalAlignment,\n variant,\n nativeButtonAttributes,\n __internalRootRef,\n ...rest\n }: InternalActionCardProps,\n ref: React.Ref<ActionCardProps.Ref>\n ) => {\n const baseProps = getBaseProps(rest);\n const buttonRef = useRef<HTMLButtonElement>(null);\n const rootRef = useRef<HTMLDivElement>(null);\n const headerId = useUniqueId('action-card-header-');\n const standaloneButtonId = useUniqueId('action-card-button-');\n const descriptionId = useUniqueId('action-card-description-');\n const bodyId = useUniqueId('action-card-body-');\n\n useForwardFocus(ref, buttonRef);\n\n if (!header && !ariaLabel) {\n warnOnce(\n 'ActionCard',\n 'An accessible name is required. Provide either a `header` or an `ariaLabel` prop so the action card has a meaningful label for screen reader users.'\n );\n }\n\n const handleButtonClick = (event: React.MouseEvent<HTMLButtonElement>) => {\n if (disabled) {\n return event.preventDefault();\n }\n fireCancelableEvent(onClick, {}, event);\n };\n\n const headerRowEmpty = !header && !description;\n\n const iconWrapper = icon && (\n <div className={clsx(styles.icon, testStyles.icon)} aria-hidden=\"true\">\n {icon}\n </div>\n );\n const iconInHeaderRow = icon && iconVerticalAlignment === 'top' && !!header;\n\n const mergedRootRef = useMergeRefs(rootRef, __internalRootRef);\n\n // Link the description element as the button's accessible description\n // when the button already has a name (via header text or ariaLabel).\n if (!ariaDescribedby && description && (ariaLabel || header)) {\n ariaDescribedby = descriptionId;\n }\n\n const buttonProps = {\n type: 'button' as const,\n className: clsx(\n styles['header-button'],\n testStyles.button,\n disabled && styles.disabled,\n variant && styles[`variant-${variant}`]\n ),\n onClick: handleButtonClick,\n 'aria-describedby': ariaDescribedby,\n 'aria-disabled': disabled || undefined,\n };\n\n const headerSection = !headerRowEmpty ? (\n <div className={clsx(styles.header, disableHeaderPaddings && styles['no-padding'])}>\n <InternalStructuredItem\n content={\n header && (\n <div className={clsx(styles['header-inner'], testStyles.header, disabled && styles.disabled)}>\n <WithNativeAttributes<HTMLButtonElement, React.ButtonHTMLAttributes<HTMLButtonElement>>\n {...buttonProps}\n tag=\"button\"\n componentName=\"ActionCard\"\n nativeAttributes={nativeButtonAttributes}\n ref={buttonRef}\n id={headerId}\n >\n {header}\n </WithNativeAttributes>\n </div>\n )\n }\n secondaryContent={\n description && (\n <div\n id={descriptionId}\n className={clsx(\n styles.description,\n testStyles.description,\n disabled && styles.disabled,\n header && styles['has-header']\n )}\n >\n {description}\n </div>\n )\n }\n disablePaddings={disableHeaderPaddings}\n />\n </div>\n ) : null;\n\n // When there's no header, a standalone overlay button is rendered.\n // If ariaLabel is provided, it's used directly. Otherwise, derive the button's\n // accessible name from the first available content: description or children.\n let standaloneButtonLabelledBy: string | undefined;\n if (!ariaLabel) {\n if (description) {\n standaloneButtonLabelledBy = descriptionId;\n } else if (children) {\n standaloneButtonLabelledBy = bodyId;\n }\n }\n\n const standaloneButton = !header ? (\n <WithNativeAttributes<HTMLButtonElement, React.ButtonHTMLAttributes<HTMLButtonElement>>\n {...buttonProps}\n tag=\"button\"\n componentName=\"ActionCard\"\n nativeAttributes={nativeButtonAttributes}\n ref={buttonRef}\n id={standaloneButtonId}\n className={clsx(\n styles['overlay-button'],\n testStyles.button,\n disabled && styles.disabled,\n variant && styles[`variant-${variant}`]\n )}\n aria-label={ariaLabel || undefined}\n aria-labelledby={standaloneButtonLabelledBy}\n />\n ) : null;\n\n const contentElement = (\n <div className={styles['inner-card']}>\n {iconInHeaderRow ? (\n <div className={styles['header-row']}>\n {headerSection}\n {iconWrapper}\n </div>\n ) : (\n headerSection\n )}\n {children && (\n <div\n className={clsx(styles.body, testStyles.body, disableContentPaddings && styles['no-padding'])}\n id={bodyId}\n >\n {children}\n </div>\n )}\n </div>\n );\n\n return (\n <div\n {...baseProps}\n ref={mergedRootRef}\n role=\"group\"\n aria-labelledby={header ? headerId : standaloneButtonId}\n className={clsx(\n styles.root,\n styles[`variant-${variant}`],\n disabled && styles.disabled,\n disabled && testStyles.disabled,\n !!icon && styles['has-icon'],\n !!icon && styles['icon-align-end'],\n !!icon && styles[`icon-vertical-align-${iconVerticalAlignment}`],\n baseProps.className\n )}\n aria-disabled={disabled || undefined}\n >\n {standaloneButton}\n {contentElement}\n {!iconInHeaderRow && iconWrapper}\n </div>\n );\n }\n);\n\nexport default InternalActionCard;\n"]}
1
+ {"version":3,"file":"internal.js","sourceRoot":"","sources":["../../../src/action-card/internal.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React, { useRef } from 'react';\nimport clsx from 'clsx';\n\nimport { useMergeRefs, useUniqueId, warnOnce } from '@cloudscape-design/component-toolkit/internal';\n\nimport { getBaseProps } from '../internal/base-component';\nimport InternalStructuredItem from '../internal/components/structured-item';\nimport { fireCancelableEvent } from '../internal/events';\nimport useForwardFocus from '../internal/hooks/forward-focus';\nimport { InternalBaseComponentProps } from '../internal/hooks/use-base-component';\nimport WithNativeAttributes from '../internal/utils/with-native-attributes';\nimport { ActionCardProps } from './interfaces';\n\nimport styles from './styles.css.js';\nimport testStyles from './test-classes/styles.css.js';\n\nexport type InternalActionCardProps = ActionCardProps & InternalBaseComponentProps;\n\nconst InternalActionCard = React.forwardRef(\n (\n {\n header,\n description,\n children,\n onClick,\n ariaLabel,\n ariaDescribedby,\n disabled,\n disableHeaderPaddings,\n disableContentPaddings,\n icon,\n iconVerticalAlignment,\n variant,\n nativeButtonAttributes,\n __internalRootRef,\n ...rest\n }: InternalActionCardProps,\n ref: React.Ref<ActionCardProps.Ref>\n ) => {\n const baseProps = getBaseProps(rest);\n const buttonRef = useRef<HTMLButtonElement>(null);\n const rootRef = useRef<HTMLDivElement>(null);\n const headerId = useUniqueId('action-card-header-');\n const standaloneButtonId = useUniqueId('action-card-button-');\n const descriptionId = useUniqueId('action-card-description-');\n const bodyId = useUniqueId('action-card-body-');\n\n useForwardFocus(ref, buttonRef);\n\n if (!header && !ariaLabel) {\n warnOnce(\n 'ActionCard',\n 'An accessible name is required. Provide either a `header` or an `ariaLabel` prop so the action card has a meaningful label for screen reader users.'\n );\n }\n\n const handleButtonClick = (event: React.MouseEvent<HTMLButtonElement>) => {\n if (disabled) {\n return event.preventDefault();\n }\n fireCancelableEvent(onClick, {}, event);\n };\n\n const headerRowEmpty = !header && !description;\n\n const iconWrapper = icon && (\n <div className={clsx(styles.icon, testStyles.icon)} aria-hidden=\"true\">\n {icon}\n </div>\n );\n const iconInHeaderRow = icon && iconVerticalAlignment === 'top' && !!header;\n\n const mergedRootRef = useMergeRefs(rootRef, __internalRootRef);\n\n // Link the description element as the button's accessible description\n // when the button already has a name (via header text or ariaLabel).\n if (!ariaDescribedby && description && (ariaLabel || header)) {\n ariaDescribedby = descriptionId;\n }\n\n const buttonProps = {\n type: 'button' as const,\n className: clsx(\n styles['header-button'],\n testStyles.button,\n disabled && styles.disabled,\n variant && styles[`variant-${variant}`]\n ),\n onClick: handleButtonClick,\n 'aria-describedby': ariaDescribedby,\n 'aria-disabled': disabled || undefined,\n };\n\n const headerSection = !headerRowEmpty ? (\n <div className={clsx(styles.header, disableHeaderPaddings && styles['no-padding'])}>\n <InternalStructuredItem\n content={\n header && (\n <div className={clsx(styles['header-inner'], testStyles.header, disabled && styles.disabled)}>\n <WithNativeAttributes<HTMLButtonElement, React.ButtonHTMLAttributes<HTMLButtonElement>>\n {...buttonProps}\n tag=\"button\"\n componentName=\"ActionCard\"\n nativeAttributes={nativeButtonAttributes}\n ref={buttonRef}\n id={headerId}\n >\n {header}\n </WithNativeAttributes>\n </div>\n )\n }\n secondaryContent={\n description && (\n <div\n id={descriptionId}\n className={clsx(\n styles.description,\n testStyles.description,\n disabled && styles.disabled,\n header && styles['has-header']\n )}\n >\n {description}\n </div>\n )\n }\n disablePaddings={disableHeaderPaddings}\n />\n </div>\n ) : null;\n\n // When there's no header, a standalone overlay button is rendered.\n // If ariaLabel is provided, it's used directly. Otherwise, derive the button's\n // accessible name from the first available content: description or children.\n let standaloneButtonLabelledBy: string | undefined;\n if (!ariaLabel) {\n if (description) {\n standaloneButtonLabelledBy = descriptionId;\n } else if (children) {\n standaloneButtonLabelledBy = bodyId;\n }\n }\n\n const standaloneButton = !header ? (\n <WithNativeAttributes<HTMLButtonElement, React.ButtonHTMLAttributes<HTMLButtonElement>>\n {...buttonProps}\n tag=\"button\"\n componentName=\"ActionCard\"\n nativeAttributes={nativeButtonAttributes}\n ref={buttonRef}\n id={standaloneButtonId}\n className={clsx(\n styles['overlay-button'],\n testStyles.button,\n disabled && styles.disabled,\n variant && styles[`variant-${variant}`]\n )}\n aria-label={ariaLabel || undefined}\n aria-labelledby={standaloneButtonLabelledBy}\n />\n ) : null;\n\n const contentElement = (\n <div className={styles['inner-card']}>\n {iconInHeaderRow ? (\n <div className={styles['header-row']}>\n {headerSection}\n {iconWrapper}\n </div>\n ) : (\n headerSection\n )}\n {children && (\n <div\n className={clsx(styles.body, testStyles.body, disableContentPaddings && styles['no-padding'])}\n id={bodyId}\n >\n {children}\n </div>\n )}\n </div>\n );\n\n return (\n <div\n {...baseProps}\n ref={mergedRootRef}\n role=\"group\"\n aria-labelledby={header ? headerId : standaloneButtonId}\n className={clsx(\n styles.root,\n styles[`variant-${variant}`],\n disabled && styles.disabled,\n disabled && testStyles.disabled,\n !!icon && styles['has-icon'],\n !!icon && styles['icon-align-end'],\n !!icon && styles[`icon-vertical-align-${iconVerticalAlignment}`],\n baseProps.className\n )}\n aria-disabled={disabled || undefined}\n >\n {standaloneButton}\n {contentElement}\n {!iconInHeaderRow && iconWrapper}\n </div>\n );\n }\n);\n\nexport default InternalActionCard;\n"]}
package/cards/index.js CHANGED
@@ -4,7 +4,7 @@
4
4
  import React, { useCallback, useImperativeHandle, useRef } from 'react';
5
5
  import clsx from 'clsx';
6
6
  import { useContainerQuery } from '@cloudscape-design/component-toolkit';
7
- import { useMergeRefs } from '@cloudscape-design/component-toolkit/internal';
7
+ import { useMergeRefs, useUniqueId } from '@cloudscape-design/component-toolkit/internal';
8
8
  import { getAnalyticsMetadataAttribute } from '@cloudscape-design/component-toolkit/internal/analytics-metadata';
9
9
  import { InternalContainerAsSubstep } from '../container/internal';
10
10
  import { useInternalI18n } from '../i18n/context';
@@ -115,9 +115,55 @@ const Cards = React.forwardRef(function ({ items = [], cardDefinition, cardsPerR
115
115
  React.createElement("span", null, renderAriaLive({ totalItemsCount, firstIndex, lastIndex: firstIndex + items.length - 1 })))), status !== null && status !== void 0 ? status : (React.createElement(CardsList, { items: items, cardDefinition: cardDefinition, trackBy: trackBy, selectionType: selectionType, columns: columns, isItemSelected: isItemSelected, getItemSelectionProps: getItemSelectionProps, visibleSections: visibleSections, onFocus: onCardFocus, ariaLabel: ariaLabels === null || ariaLabels === void 0 ? void 0 : ariaLabels.cardsLabel, ariaLabelledby: isLabelledByHeader && headerIdRef.current ? headerIdRef.current : undefined, entireCardClickable: entireCardClickable }))))))));
116
116
  });
117
117
  export default Cards;
118
+ const CardItem = ({ item, index, itemKey, cardDefinition, selectable, canClickEntireCard, selectionProps, isItemSelected, visibleSectionsDefinition, listItemRole, moveFocusDown, moveFocusUp, onFocus, }) => {
119
+ const cardId = useUniqueId('card:');
120
+ const selected = isItemSelected(item);
121
+ const disabled = selectionProps && selectionProps.disabled;
122
+ const selectionAnalyticsMetadata = {
123
+ action: selected ? 'deselect' : 'select',
124
+ detail: {
125
+ label: {
126
+ selector: `.${analyticsSelectors['cards-list']} li:nth-child(${index + 1}) .${analyticsSelectors['card-header']}`,
127
+ root: 'component',
128
+ },
129
+ position: `${index + 1}`,
130
+ item: `${itemKey}`,
131
+ },
132
+ };
133
+ const firstContentSectionIndex = selectionProps
134
+ ? visibleSectionsDefinition.findIndex(({ content }) => !!content)
135
+ : -1;
136
+ const ariaDescribedby = firstContentSectionIndex >= 0 ? `${cardId}-section-${firstContentSectionIndex}` : undefined;
137
+ return (React.createElement("li", { className: clsx(styles.card, {
138
+ [styles['card-selected']]: selectable && selected,
139
+ }), onFocus: onFocus, ...(focusMarkers && focusMarkers.item), role: listItemRole, ...getAnalyticsMetadataAttribute({
140
+ component: {
141
+ innerContext: {
142
+ position: `${index + 1}`,
143
+ item: `${itemKey}`,
144
+ },
145
+ },
146
+ }) },
147
+ React.createElement(InternalItemCard, { fullHeight: true, highlighted: selectable && selected, header: React.createElement("div", { className: styles['card-header'] },
148
+ React.createElement("div", { className: clsx(styles['card-header-inner'], selectable && styles['card-header-inner-selectable'], analyticsSelectors['card-header']) }, cardDefinition.header ? cardDefinition.header(item) : ''),
149
+ selectionProps && (React.createElement("div", { className: styles['selection-control'], ...(!canClickEntireCard && !disabled ? getAnalyticsMetadataAttribute(selectionAnalyticsMetadata) : {}) },
150
+ React.createElement(SelectionControl, { onFocusDown: moveFocusDown, onFocusUp: moveFocusUp, ...selectionProps, ariaDescribedby: ariaDescribedby })))), metadataAttributes: canClickEntireCard && !disabled ? getAnalyticsMetadataAttribute(selectionAnalyticsMetadata) : {}, onClick: canClickEntireCard
151
+ ? event => {
152
+ var _a;
153
+ selectionProps === null || selectionProps === void 0 ? void 0 : selectionProps.onChange();
154
+ // Manually move focus to the native input (checkbox or radio button)
155
+ (_a = event.currentTarget.querySelector('input')) === null || _a === void 0 ? void 0 : _a.focus();
156
+ }
157
+ : undefined }, visibleSectionsDefinition.length > 0 &&
158
+ visibleSectionsDefinition.map(({ width = 100, header, content, id }, sectionIndex) => (React.createElement("div", { key: id || sectionIndex, id: selectionProps && sectionIndex === firstContentSectionIndex
159
+ ? `${cardId}-section-${sectionIndex}`
160
+ : undefined, className: styles.section, style: { width: `${width}%` } },
161
+ header ? React.createElement("div", { className: styles['section-header'] }, header) : '',
162
+ content ? React.createElement("div", { className: styles['section-content'] }, content(item)) : ''))))));
163
+ };
118
164
  const CardsList = ({ items, cardDefinition, trackBy, selectionType, columns, isItemSelected, getItemSelectionProps, visibleSections, onFocus, ariaLabelledby, ariaLabel, entireCardClickable, }) => {
119
165
  const selectable = !!selectionType;
120
- const canClickEntireCard = selectable && entireCardClickable;
166
+ const canClickEntireCard = selectable && !!entireCardClickable;
121
167
  const { moveFocusDown, moveFocusUp } = useSelectionFocusMove(selectionType, items.length);
122
168
  let visibleSectionsDefinition = cardDefinition.sections || [];
123
169
  visibleSectionsDefinition = visibleSections
@@ -132,45 +178,7 @@ const CardsList = ({ items, cardDefinition, trackBy, selectionType, columns, isI
132
178
  return (React.createElement("ol", { className: clsx(styles.list, styles[`list-grid-${columns || 1}`], analyticsSelectors['cards-list']), role: listRole, "aria-labelledby": ariaLabelledby, "aria-label": ariaLabel, ...(focusMarkers && focusMarkers.root) }, items.map((item, index) => {
133
179
  const key = getItemKey(trackBy, item, index);
134
180
  const selectionProps = getItemSelectionProps ? getItemSelectionProps(item) : null;
135
- const selected = isItemSelected(item);
136
- const disabled = selectionProps && selectionProps.disabled;
137
- const selectionAnalyticsMetadata = {
138
- action: selected ? 'deselect' : 'select',
139
- detail: {
140
- label: {
141
- selector: `.${analyticsSelectors['cards-list']} li:nth-child(${index + 1}) .${analyticsSelectors['card-header']}`,
142
- root: 'component',
143
- },
144
- position: `${index + 1}`,
145
- item: `${key}`,
146
- },
147
- };
148
- return (React.createElement("li", { className: clsx(styles.card, {
149
- [styles['card-selected']]: selectable && selected,
150
- }), key: key, onFocus: onFocus, ...(focusMarkers && focusMarkers.item), role: listItemRole, ...getAnalyticsMetadataAttribute({
151
- component: {
152
- innerContext: {
153
- position: `${index + 1}`,
154
- item: `${key}`,
155
- },
156
- },
157
- }) },
158
- React.createElement(InternalItemCard, { fullHeight: true, highlighted: selectable && selected, header: React.createElement("div", { className: styles['card-header'] },
159
- React.createElement("div", { className: clsx(styles['card-header-inner'], selectable && styles['card-header-inner-selectable'], analyticsSelectors['card-header']) }, cardDefinition.header ? cardDefinition.header(item) : ''),
160
- selectionProps && (React.createElement("div", { className: styles['selection-control'], ...(!canClickEntireCard && !disabled
161
- ? getAnalyticsMetadataAttribute(selectionAnalyticsMetadata)
162
- : {}) },
163
- React.createElement(SelectionControl, { onFocusDown: moveFocusDown, onFocusUp: moveFocusUp, ...selectionProps })))), metadataAttributes: canClickEntireCard && !disabled ? getAnalyticsMetadataAttribute(selectionAnalyticsMetadata) : {}, onClick: canClickEntireCard
164
- ? event => {
165
- var _a;
166
- selectionProps === null || selectionProps === void 0 ? void 0 : selectionProps.onChange();
167
- // Manually move focus to the native input (checkbox or radio button)
168
- (_a = event.currentTarget.querySelector('input')) === null || _a === void 0 ? void 0 : _a.focus();
169
- }
170
- : undefined }, visibleSectionsDefinition.length > 0 &&
171
- visibleSectionsDefinition.map(({ width = 100, header, content, id }, index) => (React.createElement("div", { key: id || index, className: styles.section, style: { width: `${width}%` } },
172
- header ? React.createElement("div", { className: styles['section-header'] }, header) : '',
173
- content ? React.createElement("div", { className: styles['section-content'] }, content(item)) : ''))))));
181
+ return (React.createElement(CardItem, { key: key, item: item, index: index, itemKey: key, cardDefinition: cardDefinition, selectable: selectable, canClickEntireCard: canClickEntireCard, selectionProps: selectionProps, isItemSelected: isItemSelected, visibleSectionsDefinition: visibleSectionsDefinition, listItemRole: listItemRole, moveFocusDown: moveFocusDown, moveFocusUp: moveFocusUp, onFocus: onFocus }));
174
182
  })));
175
183
  };
176
184
  applyDisplayName(Cards, 'Cards');
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/cards/index.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\n'use client';\nimport React, { FocusEventHandler, useCallback, useImperativeHandle, useRef } from 'react';\nimport clsx from 'clsx';\n\nimport { useContainerQuery } from '@cloudscape-design/component-toolkit';\nimport { useMergeRefs } from '@cloudscape-design/component-toolkit/internal';\nimport { getAnalyticsMetadataAttribute } from '@cloudscape-design/component-toolkit/internal/analytics-metadata';\n\nimport { InternalContainerAsSubstep } from '../container/internal';\nimport { useInternalI18n } from '../i18n/context';\nimport { AnalyticsFunnelSubStep } from '../internal/analytics/components/analytics-funnel';\nimport { getBaseProps } from '../internal/base-component';\nimport { CollectionLabelContext } from '../internal/context/collection-label-context';\nimport { LinkDefaultVariantContext } from '../internal/context/link-default-variant-context';\nimport useBaseComponent from '../internal/hooks/use-base-component';\nimport { useMobile } from '../internal/hooks/use-mobile';\nimport useMouseDownTarget from '../internal/hooks/use-mouse-down-target';\nimport { useVisualRefresh } from '../internal/hooks/use-visual-mode';\nimport { applyDisplayName } from '../internal/utils/apply-display-name';\nimport InternalItemCard from '../item-card/internal';\nimport InternalLiveRegion from '../live-region/internal';\nimport InternalStatusIndicator from '../status-indicator/internal';\nimport {\n focusMarkers,\n SelectionControl,\n SelectionControlProps,\n useSelection,\n useSelectionFocusMove,\n} from '../table/selection';\nimport stickyScrolling from '../table/sticky-scrolling';\nimport ToolsHeader from '../table/tools-header';\nimport { getItemKey } from '../table/utils';\nimport {\n GeneratedAnalyticsMetadataCardsComponent,\n GeneratedAnalyticsMetadataCardsDeselect,\n GeneratedAnalyticsMetadataCardsSelect,\n} from './analytics-metadata/interfaces';\nimport { getCardsPerRow } from './cards-layout-helper';\nimport { CardsForwardRefType, CardsProps } from './interfaces';\n\nimport analyticsSelectors from './analytics-metadata/styles.css.js';\nimport styles from './styles.css.js';\n\nexport { CardsProps };\n\nconst Cards = React.forwardRef(function <T = any>(\n {\n items = [],\n cardDefinition,\n cardsPerRow = [],\n header,\n filter,\n pagination,\n preferences,\n empty,\n loading,\n loadingText,\n trackBy,\n selectedItems,\n selectionType,\n isItemDisabled,\n onSelectionChange,\n ariaLabels,\n visibleSections,\n stickyHeader,\n stickyHeaderVerticalOffset,\n variant = 'container',\n renderAriaLive,\n firstIndex = 1,\n totalItemsCount,\n entireCardClickable,\n ...rest\n }: CardsProps<T>,\n ref: React.Ref<CardsProps.Ref>\n) {\n const { __internalRootRef } = useBaseComponent('Cards', {\n props: { entireCardClickable, selectionType, stickyHeader, variant },\n metadata: { usesVisibleSections: !!visibleSections },\n });\n const baseProps = getBaseProps(rest);\n const isRefresh = useVisualRefresh();\n const isMobile = useMobile();\n\n const computedVariant = isRefresh ? variant : 'container';\n\n const headerIdRef = useRef<string | undefined>(undefined);\n const setHeaderRef = useCallback((id: string) => {\n headerIdRef.current = id;\n }, []);\n const isLabelledByHeader = !ariaLabels?.cardsLabel && !!header;\n\n const [columns, measureRef] = useContainerQuery<number>(\n ({ contentBoxWidth }) => getCardsPerRow(contentBoxWidth, cardsPerRow),\n [cardsPerRow]\n );\n const refObject = useRef(null);\n const mergedRef = useMergeRefs(measureRef, refObject, __internalRootRef);\n const getMouseDownTarget = useMouseDownTarget();\n\n const i18n = useInternalI18n('cards');\n const { isItemSelected, getItemSelectionProps } = useSelection({\n items,\n trackBy,\n selectedItems,\n selectionType,\n isItemDisabled,\n onSelectionChange,\n ariaLabels: {\n itemSelectionLabel: ariaLabels?.itemSelectionLabel,\n selectionGroupLabel: i18n('ariaLabels.selectionGroupLabel', ariaLabels?.selectionGroupLabel),\n },\n });\n const hasToolsHeader = header || filter || pagination || preferences;\n const hasFooterPagination = isMobile && variant === 'full-page' && !!pagination;\n const headerRef = useRef<HTMLDivElement>(null);\n\n const { scrollToTop, scrollToItem } = stickyScrolling(refObject, headerRef);\n stickyHeader = !isMobile && stickyHeader;\n const onCardFocus: FocusEventHandler<HTMLElement> = event => {\n // When an element inside card receives focus we want to adjust the scroll.\n // However, that behavior is unwanted when the focus is received as result of a click\n // as it causes the click to never reach the target element.\n if (stickyHeader && !event.currentTarget.contains(getMouseDownTarget())) {\n scrollToItem(event.currentTarget);\n }\n };\n useImperativeHandle(\n ref,\n () => ({\n scrollToTop: () => {\n if (stickyHeader) {\n scrollToTop();\n }\n },\n }),\n [stickyHeader, scrollToTop]\n );\n let status;\n if (loading) {\n status = (\n <div className={styles.loading}>\n <InternalStatusIndicator type=\"loading\">\n <InternalLiveRegion tagName=\"span\">{loadingText}</InternalLiveRegion>\n </InternalStatusIndicator>\n </div>\n );\n } else if (empty && !items.length) {\n status = <div className={styles.empty}>{empty}</div>;\n }\n\n const analyticsComponentMetadata: GeneratedAnalyticsMetadataCardsComponent = {\n name: 'awsui.Cards',\n label: `.${analyticsSelectors.container}`,\n properties: {\n selectionType: selectionType || 'none',\n itemsCount: `${items.length}`,\n selectedItemsCount: `${(selectedItems || []).length}`,\n selectedItemsLabels: {\n root: 'self',\n selector: `.${styles['card-selected']} .${analyticsSelectors['card-header']}`,\n },\n variant,\n },\n };\n\n if (trackBy) {\n analyticsComponentMetadata.properties.selectedItems = (selectedItems || []).map(\n (item, index) => `${getItemKey(trackBy, item, index)}`\n );\n }\n\n return (\n <LinkDefaultVariantContext.Provider value={{ defaultVariant: 'primary' }}>\n <AnalyticsFunnelSubStep>\n <div\n {...baseProps}\n className={clsx(baseProps.className, styles.root)}\n ref={mergedRef}\n {...getAnalyticsMetadataAttribute({ component: analyticsComponentMetadata })}\n >\n <InternalContainerAsSubstep\n header={\n hasToolsHeader && (\n <div\n className={clsx(\n styles.header,\n isRefresh && styles['header-refresh'],\n styles[`header-variant-${computedVariant}`]\n )}\n >\n <CollectionLabelContext.Provider value={{ assignId: setHeaderRef }}>\n <ToolsHeader header={header} filter={filter} pagination={pagination} preferences={preferences} />\n </CollectionLabelContext.Provider>\n </div>\n )\n }\n footer={hasFooterPagination && <div className={styles['footer-pagination']}>{pagination}</div>}\n disableContentPaddings={true}\n disableHeaderPaddings={computedVariant === 'full-page'}\n variant={computedVariant === 'container' ? 'cards' : computedVariant}\n __stickyHeader={stickyHeader}\n __stickyOffset={stickyHeaderVerticalOffset}\n __headerRef={headerRef}\n __fullPage={computedVariant === 'full-page'}\n __disableFooterDivider={true}\n className={analyticsSelectors.container}\n >\n <div\n className={clsx(\n hasToolsHeader && styles['has-header'],\n isRefresh && styles.refresh,\n styles[`header-variant-${computedVariant}`]\n )}\n >\n {!!renderAriaLive && !!firstIndex && (\n <InternalLiveRegion hidden={true} tagName=\"span\">\n <span>\n {renderAriaLive({ totalItemsCount, firstIndex, lastIndex: firstIndex + items.length - 1 })}\n </span>\n </InternalLiveRegion>\n )}\n {status ?? (\n <CardsList\n items={items}\n cardDefinition={cardDefinition}\n trackBy={trackBy}\n selectionType={selectionType}\n columns={columns}\n isItemSelected={isItemSelected}\n getItemSelectionProps={getItemSelectionProps}\n visibleSections={visibleSections}\n onFocus={onCardFocus}\n ariaLabel={ariaLabels?.cardsLabel}\n ariaLabelledby={isLabelledByHeader && headerIdRef.current ? headerIdRef.current : undefined}\n entireCardClickable={entireCardClickable}\n />\n )}\n </div>\n </InternalContainerAsSubstep>\n </div>\n </AnalyticsFunnelSubStep>\n </LinkDefaultVariantContext.Provider>\n );\n}) as CardsForwardRefType;\n\nexport default Cards;\n\nconst CardsList = <T,>({\n items,\n cardDefinition,\n trackBy,\n selectionType,\n columns,\n isItemSelected,\n getItemSelectionProps,\n visibleSections,\n onFocus,\n ariaLabelledby,\n ariaLabel,\n entireCardClickable,\n}: Pick<\n CardsProps<T>,\n 'items' | 'cardDefinition' | 'trackBy' | 'selectionType' | 'visibleSections' | 'entireCardClickable'\n> & {\n columns: number | null;\n isItemSelected: (item: T) => boolean;\n getItemSelectionProps?: (item: T) => SelectionControlProps;\n onFocus: FocusEventHandler<HTMLElement>;\n ariaLabel?: string;\n ariaLabelledby?: string;\n ariaDescribedby?: string;\n}) => {\n const selectable = !!selectionType;\n const canClickEntireCard = selectable && entireCardClickable;\n\n const { moveFocusDown, moveFocusUp } = useSelectionFocusMove(selectionType, items.length);\n\n let visibleSectionsDefinition = cardDefinition.sections || [];\n visibleSectionsDefinition = visibleSections\n ? visibleSectionsDefinition.filter(\n (section: CardsProps.SectionDefinition<T>) => section.id && visibleSections.indexOf(section.id) !== -1\n )\n : visibleSectionsDefinition;\n\n let listRole: 'group' | undefined = undefined;\n let listItemRole: 'presentation' | undefined = undefined;\n\n if (selectable) {\n listRole = 'group';\n listItemRole = 'presentation';\n }\n\n return (\n <ol\n className={clsx(styles.list, styles[`list-grid-${columns || 1}`], analyticsSelectors['cards-list'])}\n role={listRole}\n aria-labelledby={ariaLabelledby}\n aria-label={ariaLabel}\n {...(focusMarkers && focusMarkers.root)}\n >\n {items.map((item, index) => {\n const key = getItemKey(trackBy, item, index);\n const selectionProps = getItemSelectionProps ? getItemSelectionProps(item) : null;\n const selected = isItemSelected(item);\n const disabled = selectionProps && selectionProps.disabled;\n const selectionAnalyticsMetadata:\n | GeneratedAnalyticsMetadataCardsSelect\n | GeneratedAnalyticsMetadataCardsDeselect = {\n action: selected ? 'deselect' : 'select',\n detail: {\n label: {\n selector: `.${analyticsSelectors['cards-list']} li:nth-child(${index + 1}) .${analyticsSelectors['card-header']}`,\n root: 'component',\n },\n position: `${index + 1}`,\n item: `${key}`,\n },\n };\n return (\n <li\n className={clsx(styles.card, {\n [styles['card-selected']]: selectable && selected,\n })}\n key={key}\n onFocus={onFocus}\n {...(focusMarkers && focusMarkers.item)}\n role={listItemRole}\n {...getAnalyticsMetadataAttribute({\n component: {\n innerContext: {\n position: `${index + 1}`,\n item: `${key}`,\n },\n },\n })}\n >\n <InternalItemCard\n fullHeight={true}\n highlighted={selectable && selected}\n header={\n <div className={styles['card-header']}>\n <div\n className={clsx(\n styles['card-header-inner'],\n selectable && styles['card-header-inner-selectable'],\n analyticsSelectors['card-header']\n )}\n >\n {cardDefinition.header ? cardDefinition.header(item) : ''}\n </div>\n {selectionProps && (\n <div\n className={styles['selection-control']}\n {...(!canClickEntireCard && !disabled\n ? getAnalyticsMetadataAttribute(selectionAnalyticsMetadata)\n : {})}\n >\n <SelectionControl onFocusDown={moveFocusDown} onFocusUp={moveFocusUp} {...selectionProps} />\n </div>\n )}\n </div>\n }\n metadataAttributes={\n canClickEntireCard && !disabled ? getAnalyticsMetadataAttribute(selectionAnalyticsMetadata) : {}\n }\n onClick={\n canClickEntireCard\n ? event => {\n selectionProps?.onChange();\n // Manually move focus to the native input (checkbox or radio button)\n event.currentTarget.querySelector('input')?.focus();\n }\n : undefined\n }\n >\n {visibleSectionsDefinition.length > 0 &&\n visibleSectionsDefinition.map(({ width = 100, header, content, id }, index) => (\n <div key={id || index} className={styles.section} style={{ width: `${width}%` }}>\n {header ? <div className={styles['section-header']}>{header}</div> : ''}\n {content ? <div className={styles['section-content']}>{content(item)}</div> : ''}\n </div>\n ))}\n </InternalItemCard>\n </li>\n );\n })}\n </ol>\n );\n};\n\napplyDisplayName(Cards, 'Cards');\n"]}
1
+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/cards/index.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\n'use client';\nimport React, { FocusEventHandler, useCallback, useImperativeHandle, useRef } from 'react';\nimport clsx from 'clsx';\n\nimport { useContainerQuery } from '@cloudscape-design/component-toolkit';\nimport { useMergeRefs, useUniqueId } from '@cloudscape-design/component-toolkit/internal';\nimport { getAnalyticsMetadataAttribute } from '@cloudscape-design/component-toolkit/internal/analytics-metadata';\n\nimport { InternalContainerAsSubstep } from '../container/internal';\nimport { useInternalI18n } from '../i18n/context';\nimport { AnalyticsFunnelSubStep } from '../internal/analytics/components/analytics-funnel';\nimport { getBaseProps } from '../internal/base-component';\nimport { CollectionLabelContext } from '../internal/context/collection-label-context';\nimport { LinkDefaultVariantContext } from '../internal/context/link-default-variant-context';\nimport useBaseComponent from '../internal/hooks/use-base-component';\nimport { useMobile } from '../internal/hooks/use-mobile';\nimport useMouseDownTarget from '../internal/hooks/use-mouse-down-target';\nimport { useVisualRefresh } from '../internal/hooks/use-visual-mode';\nimport { applyDisplayName } from '../internal/utils/apply-display-name';\nimport InternalItemCard from '../item-card/internal';\nimport InternalLiveRegion from '../live-region/internal';\nimport InternalStatusIndicator from '../status-indicator/internal';\nimport {\n focusMarkers,\n SelectionControl,\n SelectionControlProps,\n useSelection,\n useSelectionFocusMove,\n} from '../table/selection';\nimport stickyScrolling from '../table/sticky-scrolling';\nimport ToolsHeader from '../table/tools-header';\nimport { getItemKey } from '../table/utils';\nimport {\n GeneratedAnalyticsMetadataCardsComponent,\n GeneratedAnalyticsMetadataCardsDeselect,\n GeneratedAnalyticsMetadataCardsSelect,\n} from './analytics-metadata/interfaces';\nimport { getCardsPerRow } from './cards-layout-helper';\nimport { CardsForwardRefType, CardsProps } from './interfaces';\n\nimport analyticsSelectors from './analytics-metadata/styles.css.js';\nimport styles from './styles.css.js';\n\nexport { CardsProps };\n\nconst Cards = React.forwardRef(function <T = any>(\n {\n items = [],\n cardDefinition,\n cardsPerRow = [],\n header,\n filter,\n pagination,\n preferences,\n empty,\n loading,\n loadingText,\n trackBy,\n selectedItems,\n selectionType,\n isItemDisabled,\n onSelectionChange,\n ariaLabels,\n visibleSections,\n stickyHeader,\n stickyHeaderVerticalOffset,\n variant = 'container',\n renderAriaLive,\n firstIndex = 1,\n totalItemsCount,\n entireCardClickable,\n ...rest\n }: CardsProps<T>,\n ref: React.Ref<CardsProps.Ref>\n) {\n const { __internalRootRef } = useBaseComponent('Cards', {\n props: { entireCardClickable, selectionType, stickyHeader, variant },\n metadata: { usesVisibleSections: !!visibleSections },\n });\n const baseProps = getBaseProps(rest);\n const isRefresh = useVisualRefresh();\n const isMobile = useMobile();\n\n const computedVariant = isRefresh ? variant : 'container';\n\n const headerIdRef = useRef<string | undefined>(undefined);\n const setHeaderRef = useCallback((id: string) => {\n headerIdRef.current = id;\n }, []);\n const isLabelledByHeader = !ariaLabels?.cardsLabel && !!header;\n\n const [columns, measureRef] = useContainerQuery<number>(\n ({ contentBoxWidth }) => getCardsPerRow(contentBoxWidth, cardsPerRow),\n [cardsPerRow]\n );\n const refObject = useRef(null);\n const mergedRef = useMergeRefs(measureRef, refObject, __internalRootRef);\n const getMouseDownTarget = useMouseDownTarget();\n\n const i18n = useInternalI18n('cards');\n const { isItemSelected, getItemSelectionProps } = useSelection({\n items,\n trackBy,\n selectedItems,\n selectionType,\n isItemDisabled,\n onSelectionChange,\n ariaLabels: {\n itemSelectionLabel: ariaLabels?.itemSelectionLabel,\n selectionGroupLabel: i18n('ariaLabels.selectionGroupLabel', ariaLabels?.selectionGroupLabel),\n },\n });\n const hasToolsHeader = header || filter || pagination || preferences;\n const hasFooterPagination = isMobile && variant === 'full-page' && !!pagination;\n const headerRef = useRef<HTMLDivElement>(null);\n\n const { scrollToTop, scrollToItem } = stickyScrolling(refObject, headerRef);\n stickyHeader = !isMobile && stickyHeader;\n const onCardFocus: FocusEventHandler<HTMLElement> = event => {\n // When an element inside card receives focus we want to adjust the scroll.\n // However, that behavior is unwanted when the focus is received as result of a click\n // as it causes the click to never reach the target element.\n if (stickyHeader && !event.currentTarget.contains(getMouseDownTarget())) {\n scrollToItem(event.currentTarget);\n }\n };\n useImperativeHandle(\n ref,\n () => ({\n scrollToTop: () => {\n if (stickyHeader) {\n scrollToTop();\n }\n },\n }),\n [stickyHeader, scrollToTop]\n );\n let status;\n if (loading) {\n status = (\n <div className={styles.loading}>\n <InternalStatusIndicator type=\"loading\">\n <InternalLiveRegion tagName=\"span\">{loadingText}</InternalLiveRegion>\n </InternalStatusIndicator>\n </div>\n );\n } else if (empty && !items.length) {\n status = <div className={styles.empty}>{empty}</div>;\n }\n\n const analyticsComponentMetadata: GeneratedAnalyticsMetadataCardsComponent = {\n name: 'awsui.Cards',\n label: `.${analyticsSelectors.container}`,\n properties: {\n selectionType: selectionType || 'none',\n itemsCount: `${items.length}`,\n selectedItemsCount: `${(selectedItems || []).length}`,\n selectedItemsLabels: {\n root: 'self',\n selector: `.${styles['card-selected']} .${analyticsSelectors['card-header']}`,\n },\n variant,\n },\n };\n\n if (trackBy) {\n analyticsComponentMetadata.properties.selectedItems = (selectedItems || []).map(\n (item, index) => `${getItemKey(trackBy, item, index)}`\n );\n }\n\n return (\n <LinkDefaultVariantContext.Provider value={{ defaultVariant: 'primary' }}>\n <AnalyticsFunnelSubStep>\n <div\n {...baseProps}\n className={clsx(baseProps.className, styles.root)}\n ref={mergedRef}\n {...getAnalyticsMetadataAttribute({ component: analyticsComponentMetadata })}\n >\n <InternalContainerAsSubstep\n header={\n hasToolsHeader && (\n <div\n className={clsx(\n styles.header,\n isRefresh && styles['header-refresh'],\n styles[`header-variant-${computedVariant}`]\n )}\n >\n <CollectionLabelContext.Provider value={{ assignId: setHeaderRef }}>\n <ToolsHeader header={header} filter={filter} pagination={pagination} preferences={preferences} />\n </CollectionLabelContext.Provider>\n </div>\n )\n }\n footer={hasFooterPagination && <div className={styles['footer-pagination']}>{pagination}</div>}\n disableContentPaddings={true}\n disableHeaderPaddings={computedVariant === 'full-page'}\n variant={computedVariant === 'container' ? 'cards' : computedVariant}\n __stickyHeader={stickyHeader}\n __stickyOffset={stickyHeaderVerticalOffset}\n __headerRef={headerRef}\n __fullPage={computedVariant === 'full-page'}\n __disableFooterDivider={true}\n className={analyticsSelectors.container}\n >\n <div\n className={clsx(\n hasToolsHeader && styles['has-header'],\n isRefresh && styles.refresh,\n styles[`header-variant-${computedVariant}`]\n )}\n >\n {!!renderAriaLive && !!firstIndex && (\n <InternalLiveRegion hidden={true} tagName=\"span\">\n <span>\n {renderAriaLive({ totalItemsCount, firstIndex, lastIndex: firstIndex + items.length - 1 })}\n </span>\n </InternalLiveRegion>\n )}\n {status ?? (\n <CardsList\n items={items}\n cardDefinition={cardDefinition}\n trackBy={trackBy}\n selectionType={selectionType}\n columns={columns}\n isItemSelected={isItemSelected}\n getItemSelectionProps={getItemSelectionProps}\n visibleSections={visibleSections}\n onFocus={onCardFocus}\n ariaLabel={ariaLabels?.cardsLabel}\n ariaLabelledby={isLabelledByHeader && headerIdRef.current ? headerIdRef.current : undefined}\n entireCardClickable={entireCardClickable}\n />\n )}\n </div>\n </InternalContainerAsSubstep>\n </div>\n </AnalyticsFunnelSubStep>\n </LinkDefaultVariantContext.Provider>\n );\n}) as CardsForwardRefType;\n\nexport default Cards;\n\ninterface CardsListProps<T>\n extends Pick<\n CardsProps<T>,\n 'items' | 'cardDefinition' | 'trackBy' | 'selectionType' | 'visibleSections' | 'entireCardClickable'\n > {\n columns: number | null;\n isItemSelected: (item: T) => boolean;\n getItemSelectionProps?: (item: T) => SelectionControlProps;\n onFocus: FocusEventHandler<HTMLElement>;\n ariaLabel?: string;\n ariaLabelledby?: string;\n}\n\ninterface CardItemProps<T> {\n item: T;\n index: number;\n itemKey: string;\n cardDefinition: CardsProps.CardDefinition<T>;\n selectable: boolean;\n canClickEntireCard: boolean;\n selectionProps: SelectionControlProps | null;\n isItemSelected: (item: T) => boolean;\n visibleSectionsDefinition: ReadonlyArray<CardsProps.SectionDefinition<T>>;\n listItemRole: 'presentation' | undefined;\n moveFocusDown: React.KeyboardEventHandler | undefined;\n moveFocusUp: React.KeyboardEventHandler | undefined;\n onFocus: FocusEventHandler<HTMLElement>;\n}\n\nconst CardItem = <T,>({\n item,\n index,\n itemKey,\n cardDefinition,\n selectable,\n canClickEntireCard,\n selectionProps,\n isItemSelected,\n visibleSectionsDefinition,\n listItemRole,\n moveFocusDown,\n moveFocusUp,\n onFocus,\n}: CardItemProps<T>) => {\n const cardId = useUniqueId('card:');\n const selected = isItemSelected(item);\n const disabled = selectionProps && selectionProps.disabled;\n\n const selectionAnalyticsMetadata: GeneratedAnalyticsMetadataCardsSelect | GeneratedAnalyticsMetadataCardsDeselect = {\n action: selected ? 'deselect' : 'select',\n detail: {\n label: {\n selector: `.${analyticsSelectors['cards-list']} li:nth-child(${index + 1}) .${analyticsSelectors['card-header']}`,\n root: 'component',\n },\n position: `${index + 1}`,\n item: `${itemKey}`,\n },\n };\n\n const firstContentSectionIndex = selectionProps\n ? visibleSectionsDefinition.findIndex(({ content }) => !!content)\n : -1;\n const ariaDescribedby = firstContentSectionIndex >= 0 ? `${cardId}-section-${firstContentSectionIndex}` : undefined;\n\n return (\n <li\n className={clsx(styles.card, {\n [styles['card-selected']]: selectable && selected,\n })}\n onFocus={onFocus}\n {...(focusMarkers && focusMarkers.item)}\n role={listItemRole}\n {...getAnalyticsMetadataAttribute({\n component: {\n innerContext: {\n position: `${index + 1}`,\n item: `${itemKey}`,\n },\n },\n })}\n >\n <InternalItemCard\n fullHeight={true}\n highlighted={selectable && selected}\n header={\n <div className={styles['card-header']}>\n <div\n className={clsx(\n styles['card-header-inner'],\n selectable && styles['card-header-inner-selectable'],\n analyticsSelectors['card-header']\n )}\n >\n {cardDefinition.header ? cardDefinition.header(item) : ''}\n </div>\n {selectionProps && (\n <div\n className={styles['selection-control']}\n {...(!canClickEntireCard && !disabled ? getAnalyticsMetadataAttribute(selectionAnalyticsMetadata) : {})}\n >\n <SelectionControl\n onFocusDown={moveFocusDown}\n onFocusUp={moveFocusUp}\n {...selectionProps}\n ariaDescribedby={ariaDescribedby}\n />\n </div>\n )}\n </div>\n }\n metadataAttributes={\n canClickEntireCard && !disabled ? getAnalyticsMetadataAttribute(selectionAnalyticsMetadata) : {}\n }\n onClick={\n canClickEntireCard\n ? event => {\n selectionProps?.onChange();\n // Manually move focus to the native input (checkbox or radio button)\n event.currentTarget.querySelector('input')?.focus();\n }\n : undefined\n }\n >\n {visibleSectionsDefinition.length > 0 &&\n visibleSectionsDefinition.map(({ width = 100, header, content, id }, sectionIndex) => (\n <div\n key={id || sectionIndex}\n id={\n selectionProps && sectionIndex === firstContentSectionIndex\n ? `${cardId}-section-${sectionIndex}`\n : undefined\n }\n className={styles.section}\n style={{ width: `${width}%` }}\n >\n {header ? <div className={styles['section-header']}>{header}</div> : ''}\n {content ? <div className={styles['section-content']}>{content(item)}</div> : ''}\n </div>\n ))}\n </InternalItemCard>\n </li>\n );\n};\n\nconst CardsList = <T,>({\n items,\n cardDefinition,\n trackBy,\n selectionType,\n columns,\n isItemSelected,\n getItemSelectionProps,\n visibleSections,\n onFocus,\n ariaLabelledby,\n ariaLabel,\n entireCardClickable,\n}: CardsListProps<T>) => {\n const selectable = !!selectionType;\n const canClickEntireCard = selectable && !!entireCardClickable;\n\n const { moveFocusDown, moveFocusUp } = useSelectionFocusMove(selectionType, items.length);\n\n let visibleSectionsDefinition = cardDefinition.sections || [];\n visibleSectionsDefinition = visibleSections\n ? visibleSectionsDefinition.filter(\n (section: CardsProps.SectionDefinition<T>) => section.id && visibleSections.indexOf(section.id) !== -1\n )\n : visibleSectionsDefinition;\n\n let listRole: 'group' | undefined = undefined;\n let listItemRole: 'presentation' | undefined = undefined;\n\n if (selectable) {\n listRole = 'group';\n listItemRole = 'presentation';\n }\n\n return (\n <ol\n className={clsx(styles.list, styles[`list-grid-${columns || 1}`], analyticsSelectors['cards-list'])}\n role={listRole}\n aria-labelledby={ariaLabelledby}\n aria-label={ariaLabel}\n {...(focusMarkers && focusMarkers.root)}\n >\n {items.map((item, index) => {\n const key = getItemKey(trackBy, item, index);\n const selectionProps = getItemSelectionProps ? getItemSelectionProps(item) : null;\n return (\n <CardItem\n key={key}\n item={item}\n index={index}\n itemKey={key}\n cardDefinition={cardDefinition}\n selectable={selectable}\n canClickEntireCard={canClickEntireCard}\n selectionProps={selectionProps}\n isItemSelected={isItemSelected}\n visibleSectionsDefinition={visibleSectionsDefinition}\n listItemRole={listItemRole}\n moveFocusDown={moveFocusDown}\n moveFocusUp={moveFocusUp}\n onFocus={onFocus}\n />\n );\n })}\n </ol>\n );\n};\n\napplyDisplayName(Cards, 'Cards');\n"]}
@@ -2236,5 +2236,5 @@ body {
2236
2236
  }
2237
2237
  }
2238
2238
  :root {
2239
- --awsui-version-info-9d03c896: true;
2239
+ --awsui-version-info-c140c143: true;
2240
2240
  }
@@ -1,6 +1,6 @@
1
1
  export var PACKAGE_SOURCE = "components";
2
- export var PACKAGE_VERSION = "3.0.0 (9d03c896)";
3
- export var GIT_SHA = "9d03c896";
2
+ export var PACKAGE_VERSION = "3.0.0 (c140c143)";
3
+ export var GIT_SHA = "c140c143";
4
4
  export var THEME = "open-source-visual-refresh";
5
5
  export var SYSTEM = "core";
6
6
  export var ALWAYS_VISUAL_REFRESH = true;
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "PACKAGE_SOURCE": "components",
3
- "PACKAGE_VERSION": "3.0.0 (9d03c896)",
4
- "GIT_SHA": "9d03c896",
3
+ "PACKAGE_VERSION": "3.0.0 (c140c143)",
4
+ "GIT_SHA": "c140c143",
5
5
  "THEME": "open-source-visual-refresh",
6
6
  "SYSTEM": "core",
7
7
  "ALWAYS_VISUAL_REFRESH": true
@@ -1,3 +1,3 @@
1
1
  {
2
- "commit": "9d03c89609f1c2f56311a882db2e1fd648dc4894"
2
+ "commit": "c140c143cb4b3c9719c1f54b67967ad14b0fa4de"
3
3
  }
package/package.json CHANGED
@@ -164,7 +164,7 @@
164
164
  "./internal/base-component/index.js",
165
165
  "./internal/base-component/styles.css.js"
166
166
  ],
167
- "version": "3.0.1276",
167
+ "version": "3.0.1278",
168
168
  "repository": {
169
169
  "type": "git",
170
170
  "url": "https://github.com/cloudscape-design/components.git"
@@ -7,6 +7,7 @@ export interface ItemSelectionProps {
7
7
  onChange: () => void;
8
8
  onShiftToggle?: (value: boolean) => void;
9
9
  ariaLabel?: string;
10
+ ariaDescribedby?: string;
10
11
  selectionGroupLabel?: string;
11
12
  }
12
13
  export interface SelectionProps<T> {
@@ -1 +1 @@
1
- {"version":3,"file":"interfaces.d.ts","sourceRoot":"","sources":["../../../../src/table/selection/interfaces.ts"],"names":[],"mappings":"AAGA,MAAM,WAAW,kBAAkB;IACjC,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,EAAE,OAAO,CAAC;IAClB,aAAa,EAAE,QAAQ,GAAG,OAAO,CAAC;IAClC,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,OAAO,EAAE,OAAO,CAAC;IACjB,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,KAAK,IAAI,CAAC;IACzC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,mBAAmB,CAAC,EAAE,MAAM,CAAC;CAC9B;AAED,MAAM,WAAW,cAAc,CAAC,CAAC;IAC/B,cAAc,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,OAAO,CAAC;IACrC,iBAAiB,CAAC,EAAE,MAAM,kBAAkB,CAAC;IAC7C,qBAAqB,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,kBAAkB,CAAC;IACxD,uBAAuB,CAAC,EAAE,CAAC,IAAI,EAAE,IAAI,GAAG,CAAC,KAAK,kBAAkB,CAAC;CAClE"}
1
+ {"version":3,"file":"interfaces.d.ts","sourceRoot":"","sources":["../../../../src/table/selection/interfaces.ts"],"names":[],"mappings":"AAGA,MAAM,WAAW,kBAAkB;IACjC,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,EAAE,OAAO,CAAC;IAClB,aAAa,EAAE,QAAQ,GAAG,OAAO,CAAC;IAClC,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,OAAO,EAAE,OAAO,CAAC;IACjB,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,KAAK,IAAI,CAAC;IACzC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,mBAAmB,CAAC,EAAE,MAAM,CAAC;CAC9B;AAED,MAAM,WAAW,cAAc,CAAC,CAAC;IAC/B,cAAc,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,OAAO,CAAC;IACrC,iBAAiB,CAAC,EAAE,MAAM,kBAAkB,CAAC;IAC7C,qBAAqB,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,kBAAkB,CAAC;IACxD,uBAAuB,CAAC,EAAE,CAAC,IAAI,EAAE,IAAI,GAAG,CAAC,KAAK,kBAAkB,CAAC;CAClE"}
@@ -1 +1 @@
1
- {"version":3,"file":"interfaces.js","sourceRoot":"","sources":["../../../../src/table/selection/interfaces.ts"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nexport interface ItemSelectionProps {\n name: string;\n disabled: boolean;\n selectionType: 'single' | 'multi';\n indeterminate?: boolean;\n checked: boolean;\n onChange: () => void;\n onShiftToggle?: (value: boolean) => void;\n ariaLabel?: string;\n selectionGroupLabel?: string;\n}\n\nexport interface SelectionProps<T> {\n isItemSelected: (item: T) => boolean;\n getSelectAllProps?: () => ItemSelectionProps;\n getItemSelectionProps?: (item: T) => ItemSelectionProps;\n getLoaderSelectionProps?: (item: null | T) => ItemSelectionProps;\n}\n"]}
1
+ {"version":3,"file":"interfaces.js","sourceRoot":"","sources":["../../../../src/table/selection/interfaces.ts"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nexport interface ItemSelectionProps {\n name: string;\n disabled: boolean;\n selectionType: 'single' | 'multi';\n indeterminate?: boolean;\n checked: boolean;\n onChange: () => void;\n onShiftToggle?: (value: boolean) => void;\n ariaLabel?: string;\n ariaDescribedby?: string;\n selectionGroupLabel?: string;\n}\n\nexport interface SelectionProps<T> {\n isItemSelected: (item: T) => boolean;\n getSelectAllProps?: () => ItemSelectionProps;\n getItemSelectionProps?: (item: T) => ItemSelectionProps;\n getLoaderSelectionProps?: (item: null | T) => ItemSelectionProps;\n}\n"]}
@@ -19,6 +19,7 @@ export declare function SelectionControl({
19
19
  onFocusDown,
20
20
  name,
21
21
  ariaLabel,
22
+ ariaDescribedby,
22
23
  focusedComponent,
23
24
  rowIndex,
24
25
  itemKey,
@@ -1 +1 @@
1
- {"version":3,"file":"selection-control.d.ts","sourceRoot":"","sources":["../../../../src/table/selection/selection-control.tsx"],"names":[],"mappings":"AAEA,OAAc,EAAiB,oBAAoB,EAAc,MAAM,OAAO,CAAC;AAS/E,OAAO,EAAE,kBAAkB,EAAE,MAAM,cAAc,CAAC;AAIlD,MAAM,WAAW,qBAAsB,SAAQ,kBAAkB;IAC/D,aAAa,CAAC,CAAC,YAAY,EAAE,OAAO,GAAG,IAAI,CAAC;IAC5C,SAAS,CAAC,EAAE,oBAAoB,CAAC;IACjC,WAAW,CAAC,EAAE,oBAAoB,CAAC;IACnC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,CAAC,CAAC,CAAC;IACd,gBAAgB,CAAC,EAAE,IAAI,GAAG,MAAM,CAAC;IACjC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,aAAa,CAAC,EAAE,QAAQ,GAAG,KAAK,CAAC;CAClC;AAED,wBAAgB,gBAAgB,CAAC,EAC/B,aAAa,EACb,aAAqB,EACrB,aAAa,EACb,SAAS,EACT,WAAW,EACX,IAAI,EACJ,SAAS,EACT,gBAAgB,EAChB,QAAQ,EACR,OAAO,EACP,aAAwB,EACxB,QAAQ,EACR,GAAG,WAAW,EACf,EAAE,qBAAqB,eAoFvB"}
1
+ {"version":3,"file":"selection-control.d.ts","sourceRoot":"","sources":["../../../../src/table/selection/selection-control.tsx"],"names":[],"mappings":"AAEA,OAAc,EAAiB,oBAAoB,EAAc,MAAM,OAAO,CAAC;AAS/E,OAAO,EAAE,kBAAkB,EAAE,MAAM,cAAc,CAAC;AAIlD,MAAM,WAAW,qBAAsB,SAAQ,kBAAkB;IAC/D,aAAa,CAAC,CAAC,YAAY,EAAE,OAAO,GAAG,IAAI,CAAC;IAC5C,SAAS,CAAC,EAAE,oBAAoB,CAAC;IACjC,WAAW,CAAC,EAAE,oBAAoB,CAAC;IACnC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,CAAC,CAAC,CAAC;IACd,gBAAgB,CAAC,EAAE,IAAI,GAAG,MAAM,CAAC;IACjC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,aAAa,CAAC,EAAE,QAAQ,GAAG,KAAK,CAAC;CAClC;AAED,wBAAgB,gBAAgB,CAAC,EAC/B,aAAa,EACb,aAAqB,EACrB,aAAa,EACb,SAAS,EACT,WAAW,EACX,IAAI,EACJ,SAAS,EACT,eAAe,EACf,gBAAgB,EAChB,QAAQ,EACR,OAAO,EACP,aAAwB,EACxB,QAAQ,EACR,GAAG,WAAW,EACf,EAAE,qBAAqB,eAqGvB"}
@@ -8,7 +8,7 @@ import InternalCheckbox from '../../checkbox/internal';
8
8
  import RadioButton from '../../internal/components/radio-button';
9
9
  import { KeyCode } from '../../internal/keycode';
10
10
  import styles from './styles.css.js';
11
- export function SelectionControl({ selectionType, indeterminate = false, onShiftToggle, onFocusUp, onFocusDown, name, ariaLabel, focusedComponent, rowIndex, itemKey, verticalAlign = 'middle', onChange, ...sharedProps }) {
11
+ export function SelectionControl({ selectionType, indeterminate = false, onShiftToggle, onFocusUp, onFocusDown, name, ariaLabel, ariaDescribedby, focusedComponent, rowIndex, itemKey, verticalAlign = 'middle', onChange, ...sharedProps }) {
12
12
  const controlId = useUniqueId();
13
13
  const isMultiSelection = selectionType === 'multi';
14
14
  const { navigationActive } = useSingleTabStopNavigation(null);
@@ -46,7 +46,14 @@ export function SelectionControl({ selectionType, indeterminate = false, onShift
46
46
  // Clicking on input, does not focus it on Firefox (AWSUI-11345)
47
47
  nativeInput === null || nativeInput === void 0 ? void 0 : nativeInput.focus();
48
48
  };
49
- const selector = isMultiSelection ? (React.createElement(InternalCheckbox, { ...sharedProps, onChange: onChange, showOutline: focusedComponent === 'selection-control', controlId: controlId, "data-focus-id": "selection-control", indeterminate: indeterminate })) : (React.createElement(RadioButton, { ...sharedProps, controlId: controlId, name: name, value: '', onSelect: onChange }));
49
+ const nativeInputAttributes = {};
50
+ if (ariaLabel) {
51
+ nativeInputAttributes['aria-label'] = ariaLabel;
52
+ }
53
+ if (ariaDescribedby) {
54
+ nativeInputAttributes['aria-describedby'] = ariaDescribedby;
55
+ }
56
+ const selector = isMultiSelection ? (React.createElement(InternalCheckbox, { ...sharedProps, onChange: onChange, showOutline: focusedComponent === 'selection-control', controlId: controlId, "data-focus-id": "selection-control", indeterminate: indeterminate, ariaLabel: ariaLabel, ariaDescribedby: ariaDescribedby })) : (React.createElement(RadioButton, { ...sharedProps, controlId: controlId, name: name, value: '', onSelect: onChange, nativeInputAttributes: Object.keys(nativeInputAttributes).length > 0 ? nativeInputAttributes : undefined }));
50
57
  return (React.createElement(React.Fragment, null,
51
58
  React.createElement("label", { onKeyDown: handleKeyDown, onKeyUp: setShiftState, onMouseDown: onMouseDownHandler, onMouseUp: setShiftState, onClick: handleClick, htmlFor: controlId, className: clsx(styles.label, styles.root, verticalAlign === 'top' && styles['label-top']), "aria-label": ariaLabel, title: ariaLabel, ...(rowIndex !== undefined && !sharedProps.disabled
52
59
  ? getAnalyticsMetadataAttribute({
@@ -1 +1 @@
1
- {"version":3,"file":"selection-control.js","sourceRoot":"","sources":["../../../../src/table/selection/selection-control.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAA0D,MAAM,OAAO,CAAC;AAC/E,OAAO,IAAI,MAAM,MAAM,CAAC;AAExB,OAAO,EAAE,0BAA0B,EAAE,WAAW,EAAE,MAAM,+CAA+C,CAAC;AACxG,OAAO,EAAE,6BAA6B,EAAE,MAAM,kEAAkE,CAAC;AAEjH,OAAO,gBAAgB,MAAM,yBAAyB,CAAC;AACvD,OAAO,WAAW,MAAM,wCAAwC,CAAC;AACjE,OAAO,EAAE,OAAO,EAAE,MAAM,wBAAwB,CAAC;AAGjD,OAAO,MAAM,MAAM,iBAAiB,CAAC;AAcrC,MAAM,UAAU,gBAAgB,CAAC,EAC/B,aAAa,EACb,aAAa,GAAG,KAAK,EACrB,aAAa,EACb,SAAS,EACT,WAAW,EACX,IAAI,EACJ,SAAS,EACT,gBAAgB,EAChB,QAAQ,EACR,OAAO,EACP,aAAa,GAAG,QAAQ,EACxB,QAAQ,EACR,GAAG,WAAW,EACQ;IACtB,MAAM,SAAS,GAAG,WAAW,EAAE,CAAC;IAChC,MAAM,gBAAgB,GAAG,aAAa,KAAK,OAAO,CAAC;IACnD,MAAM,EAAE,gBAAgB,EAAE,GAAG,0BAA0B,CAAC,IAAI,CAAC,CAAC;IAE9D,MAAM,aAAa,GAAG,CAAC,KAAiC,EAAE,EAAE;QAC1D,IAAI,gBAAgB,EAAE,CAAC;YACrB,aAAa,aAAb,aAAa,uBAAb,aAAa,CAAG,KAAK,CAAC,QAAQ,CAAC,CAAC;QAClC,CAAC;IACH,CAAC,CAAC;IAEF,MAAM,kBAAkB,GAAG,CAAC,KAAiB,EAAE,EAAE;QAC/C,aAAa,CAAC,KAAK,CAAC,CAAC;QACrB,IAAI,gBAAgB,EAAE,CAAC;YACrB,uBAAuB;YACvB,uFAAuF;YACvF,sDAAsD;YACtD,KAAK,CAAC,cAAc,EAAE,CAAC;QACzB,CAAC;IACH,CAAC,CAAC;IAEF,+FAA+F;IAC/F,MAAM,aAAa,GAAG,CAAC,KAAoB,EAAE,EAAE;QAC7C,aAAa,CAAC,KAAK,CAAC,CAAC;QACrB,IAAI,gBAAgB,IAAI,CAAC,gBAAgB,EAAE,CAAC;YAC1C,IAAI,KAAK,CAAC,OAAO,KAAK,OAAO,CAAC,EAAE,EAAE,CAAC;gBACjC,KAAK,CAAC,cAAc,EAAE,CAAC;gBACvB,SAAS,aAAT,SAAS,uBAAT,SAAS,CAAG,KAAK,CAAC,CAAC;YACrB,CAAC;YACD,IAAI,KAAK,CAAC,OAAO,KAAK,OAAO,CAAC,IAAI,EAAE,CAAC;gBACnC,KAAK,CAAC,cAAc,EAAE,CAAC;gBACvB,WAAW,aAAX,WAAW,uBAAX,WAAW,CAAG,KAAK,CAAC,CAAC;YACvB,CAAC;QACH,CAAC;IACH,CAAC,CAAC;IAEF,MAAM,WAAW,GAAG,CAAC,KAAiB,EAAE,EAAE;QACxC,MAAM,MAAM,GAAG,KAAK,CAAC,aAAa,CAAC;QACnC,MAAM,WAAW,GAAG,CAAC,MAAM,CAAC,OAAO,KAAK,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,aAAa,CAAC,OAAO,CAAC,CAAqB,CAAC;QAC9G,gEAAgE;QAChE,WAAW,aAAX,WAAW,uBAAX,WAAW,CAAE,KAAK,EAAE,CAAC;IACvB,CAAC,CAAC;IAEF,MAAM,QAAQ,GAAG,gBAAgB,CAAC,CAAC,CAAC,CAClC,oBAAC,gBAAgB,OACX,WAAW,EACf,QAAQ,EAAE,QAAQ,EAClB,WAAW,EAAE,gBAAgB,KAAK,mBAAmB,EACrD,SAAS,EAAE,SAAS,mBACN,mBAAmB,EACjC,aAAa,EAAE,aAAa,GAC5B,CACH,CAAC,CAAC,CAAC,CACF,oBAAC,WAAW,OAAK,WAAW,EAAE,SAAS,EAAE,SAAS,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,EAAE,EAAE,QAAQ,EAAE,QAAQ,GAAI,CAClG,CAAC;IAEF,OAAO,CACL;QACE,+BACE,SAAS,EAAE,aAAa,EACxB,OAAO,EAAE,aAAa,EACtB,WAAW,EAAE,kBAAkB,EAC/B,SAAS,EAAE,aAAa,EACxB,OAAO,EAAE,WAAW,EACpB,OAAO,EAAE,SAAS,EAClB,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,KAAK,EAAE,MAAM,CAAC,IAAI,EAAE,aAAa,KAAK,KAAK,IAAI,MAAM,CAAC,WAAW,CAAC,CAAC,gBAC9E,SAAS,EACrB,KAAK,EAAE,SAAS,KACZ,CAAC,QAAQ,KAAK,SAAS,IAAI,CAAC,WAAW,CAAC,QAAQ;gBAClD,CAAC,CAAC,6BAA6B,CAAC;oBAC5B,MAAM,EAAE;wBACN,QAAQ,EAAE,GAAG,QAAQ,GAAG,CAAC,EAAE;wBAC3B,IAAI,EAAE,OAAO,IAAI,EAAE;qBACpB;iBACF,CAAC;gBACJ,CAAC,CAAC,EAAE,CAAC,IAEN,QAAQ,CACH;QACR,8BAAM,SAAS,EAAE,MAAM,CAAC,IAAI,iBAAe,IAAI,aAExC,CACN,CACJ,CAAC;AACJ,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React, { KeyboardEvent, KeyboardEventHandler, MouseEvent } from 'react';\nimport clsx from 'clsx';\n\nimport { useSingleTabStopNavigation, useUniqueId } from '@cloudscape-design/component-toolkit/internal';\nimport { getAnalyticsMetadataAttribute } from '@cloudscape-design/component-toolkit/internal/analytics-metadata';\n\nimport InternalCheckbox from '../../checkbox/internal';\nimport RadioButton from '../../internal/components/radio-button';\nimport { KeyCode } from '../../internal/keycode';\nimport { ItemSelectionProps } from './interfaces';\n\nimport styles from './styles.css.js';\n\nexport interface SelectionControlProps extends ItemSelectionProps {\n onShiftToggle?(shiftPressed: boolean): void;\n onFocusUp?: KeyboardEventHandler;\n onFocusDown?: KeyboardEventHandler;\n ariaLabel?: string;\n tabIndex?: -1;\n focusedComponent?: null | string;\n rowIndex?: number;\n itemKey?: string;\n verticalAlign?: 'middle' | 'top';\n}\n\nexport function SelectionControl({\n selectionType,\n indeterminate = false,\n onShiftToggle,\n onFocusUp,\n onFocusDown,\n name,\n ariaLabel,\n focusedComponent,\n rowIndex,\n itemKey,\n verticalAlign = 'middle',\n onChange,\n ...sharedProps\n}: SelectionControlProps) {\n const controlId = useUniqueId();\n const isMultiSelection = selectionType === 'multi';\n const { navigationActive } = useSingleTabStopNavigation(null);\n\n const setShiftState = (event: KeyboardEvent | MouseEvent) => {\n if (isMultiSelection) {\n onShiftToggle?.(event.shiftKey);\n }\n };\n\n const onMouseDownHandler = (event: MouseEvent) => {\n setShiftState(event);\n if (isMultiSelection) {\n // To overcome an issue\n // If you shift+click or ctrl+click on a label for a checkbox, checkbox is not checked.\n // https://bugzilla.mozilla.org/show_bug.cgi?id=559506\n event.preventDefault();\n }\n };\n\n // native checkboxes do not have focus move via keyboard, we implement it here programmatically\n const handleKeyDown = (event: KeyboardEvent) => {\n setShiftState(event);\n if (isMultiSelection && !navigationActive) {\n if (event.keyCode === KeyCode.up) {\n event.preventDefault();\n onFocusUp?.(event);\n }\n if (event.keyCode === KeyCode.down) {\n event.preventDefault();\n onFocusDown?.(event);\n }\n }\n };\n\n const handleClick = (event: MouseEvent) => {\n const target = event.currentTarget;\n const nativeInput = (target.tagName === 'INPUT' ? target : target.querySelector('input')) as HTMLInputElement;\n // Clicking on input, does not focus it on Firefox (AWSUI-11345)\n nativeInput?.focus();\n };\n\n const selector = isMultiSelection ? (\n <InternalCheckbox\n {...sharedProps}\n onChange={onChange}\n showOutline={focusedComponent === 'selection-control'}\n controlId={controlId}\n data-focus-id=\"selection-control\"\n indeterminate={indeterminate}\n />\n ) : (\n <RadioButton {...sharedProps} controlId={controlId} name={name} value={''} onSelect={onChange} />\n );\n\n return (\n <>\n <label\n onKeyDown={handleKeyDown}\n onKeyUp={setShiftState}\n onMouseDown={onMouseDownHandler}\n onMouseUp={setShiftState}\n onClick={handleClick}\n htmlFor={controlId}\n className={clsx(styles.label, styles.root, verticalAlign === 'top' && styles['label-top'])}\n aria-label={ariaLabel}\n title={ariaLabel}\n {...(rowIndex !== undefined && !sharedProps.disabled\n ? getAnalyticsMetadataAttribute({\n detail: {\n position: `${rowIndex + 1}`,\n item: itemKey || '',\n },\n })\n : {})}\n >\n {selector}\n </label>\n <span className={styles.stud} aria-hidden={true}>\n &nbsp;\n </span>\n </>\n );\n}\n"]}
1
+ {"version":3,"file":"selection-control.js","sourceRoot":"","sources":["../../../../src/table/selection/selection-control.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, { KeyboardEvent, KeyboardEventHandler, MouseEvent } from 'react';\nimport clsx from 'clsx';\n\nimport { useSingleTabStopNavigation, useUniqueId } from '@cloudscape-design/component-toolkit/internal';\nimport { getAnalyticsMetadataAttribute } from '@cloudscape-design/component-toolkit/internal/analytics-metadata';\n\nimport InternalCheckbox from '../../checkbox/internal';\nimport RadioButton from '../../internal/components/radio-button';\nimport { KeyCode } from '../../internal/keycode';\nimport { ItemSelectionProps } from './interfaces';\n\nimport styles from './styles.css.js';\n\nexport interface SelectionControlProps extends ItemSelectionProps {\n onShiftToggle?(shiftPressed: boolean): void;\n onFocusUp?: KeyboardEventHandler;\n onFocusDown?: KeyboardEventHandler;\n ariaLabel?: string;\n tabIndex?: -1;\n focusedComponent?: null | string;\n rowIndex?: number;\n itemKey?: string;\n verticalAlign?: 'middle' | 'top';\n}\n\nexport function SelectionControl({\n selectionType,\n indeterminate = false,\n onShiftToggle,\n onFocusUp,\n onFocusDown,\n name,\n ariaLabel,\n ariaDescribedby,\n focusedComponent,\n rowIndex,\n itemKey,\n verticalAlign = 'middle',\n onChange,\n ...sharedProps\n}: SelectionControlProps) {\n const controlId = useUniqueId();\n const isMultiSelection = selectionType === 'multi';\n const { navigationActive } = useSingleTabStopNavigation(null);\n\n const setShiftState = (event: KeyboardEvent | MouseEvent) => {\n if (isMultiSelection) {\n onShiftToggle?.(event.shiftKey);\n }\n };\n\n const onMouseDownHandler = (event: MouseEvent) => {\n setShiftState(event);\n if (isMultiSelection) {\n // To overcome an issue\n // If you shift+click or ctrl+click on a label for a checkbox, checkbox is not checked.\n // https://bugzilla.mozilla.org/show_bug.cgi?id=559506\n event.preventDefault();\n }\n };\n\n // native checkboxes do not have focus move via keyboard, we implement it here programmatically\n const handleKeyDown = (event: KeyboardEvent) => {\n setShiftState(event);\n if (isMultiSelection && !navigationActive) {\n if (event.keyCode === KeyCode.up) {\n event.preventDefault();\n onFocusUp?.(event);\n }\n if (event.keyCode === KeyCode.down) {\n event.preventDefault();\n onFocusDown?.(event);\n }\n }\n };\n\n const handleClick = (event: MouseEvent) => {\n const target = event.currentTarget;\n const nativeInput = (target.tagName === 'INPUT' ? target : target.querySelector('input')) as HTMLInputElement;\n // Clicking on input, does not focus it on Firefox (AWSUI-11345)\n nativeInput?.focus();\n };\n\n const nativeInputAttributes: Record<string, string> = {};\n if (ariaLabel) {\n nativeInputAttributes['aria-label'] = ariaLabel;\n }\n if (ariaDescribedby) {\n nativeInputAttributes['aria-describedby'] = ariaDescribedby;\n }\n\n const selector = isMultiSelection ? (\n <InternalCheckbox\n {...sharedProps}\n onChange={onChange}\n showOutline={focusedComponent === 'selection-control'}\n controlId={controlId}\n data-focus-id=\"selection-control\"\n indeterminate={indeterminate}\n ariaLabel={ariaLabel}\n ariaDescribedby={ariaDescribedby}\n />\n ) : (\n <RadioButton\n {...sharedProps}\n controlId={controlId}\n name={name}\n value={''}\n onSelect={onChange}\n nativeInputAttributes={Object.keys(nativeInputAttributes).length > 0 ? nativeInputAttributes : undefined}\n />\n );\n\n return (\n <>\n <label\n onKeyDown={handleKeyDown}\n onKeyUp={setShiftState}\n onMouseDown={onMouseDownHandler}\n onMouseUp={setShiftState}\n onClick={handleClick}\n htmlFor={controlId}\n className={clsx(styles.label, styles.root, verticalAlign === 'top' && styles['label-top'])}\n aria-label={ariaLabel}\n title={ariaLabel}\n {...(rowIndex !== undefined && !sharedProps.disabled\n ? getAnalyticsMetadataAttribute({\n detail: {\n position: `${rowIndex + 1}`,\n item: itemKey || '',\n },\n })\n : {})}\n >\n {selector}\n </label>\n <span className={styles.stud} aria-hidden={true}>\n &nbsp;\n </span>\n </>\n );\n}\n"]}