@cloudscape-design/components-themeable 3.0.1278 → 3.0.1280

package/lib/internal/template/action-card/internal.js

@@ -0,0 +1,74 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import React, { useRef } from 'react';
+import clsx from 'clsx';
+import { useMergeRefs, useUniqueId, warnOnce } from '@cloudscape-design/component-toolkit/internal';
+import { getBaseProps } from '../internal/base-component';
+import InternalStructuredItem from '../internal/components/structured-item';
+import { fireCancelableEvent } from '../internal/events';
+import useForwardFocus from '../internal/hooks/forward-focus';
+import WithNativeAttributes from '../internal/utils/with-native-attributes';
+import styles from './styles.css.js';
+import testStyles from './test-classes/styles.css.js';
+const InternalActionCard = React.forwardRef(({ header, description, children, onClick, ariaLabel, ariaDescribedby, disabled, disableHeaderPaddings, disableContentPaddings, icon, iconVerticalAlignment, variant, nativeButtonAttributes, __internalRootRef, ...rest }, ref) => {
+    const baseProps = getBaseProps(rest);
+    const buttonRef = useRef(null);
+    const rootRef = useRef(null);
+    const headerId = useUniqueId('action-card-header-');
+    const standaloneButtonId = useUniqueId('action-card-button-');
+    const descriptionId = useUniqueId('action-card-description-');
+    const bodyId = useUniqueId('action-card-body-');
+    useForwardFocus(ref, buttonRef);
+    if (!header && !ariaLabel) {
+        warnOnce('ActionCard', '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.');
+    }
+    const handleButtonClick = (event) => {
+        if (disabled) {
+            return event.preventDefault();
+        }
+        fireCancelableEvent(onClick, {}, event);
+    };
+    const headerRowEmpty = !header && !description;
+    const iconWrapper = icon && (React.createElement("div", { className: clsx(styles.icon, testStyles.icon), "aria-hidden": "true" }, icon));
+    const iconInHeaderRow = icon && iconVerticalAlignment === 'top' && !!header;
+    const mergedRootRef = useMergeRefs(rootRef, __internalRootRef);
+    // Link the description element as the button's accessible description
+    // when the button already has a name (via header text or ariaLabel).
+    if (!ariaDescribedby && description && (ariaLabel || header)) {
+        ariaDescribedby = descriptionId;
+    }
+    const buttonProps = {
+        type: 'button',
+        className: clsx(styles['header-button'], testStyles.button, disabled && styles.disabled, variant && styles[`variant-${variant}`]),
+        onClick: handleButtonClick,
+        'aria-describedby': ariaDescribedby,
+        'aria-disabled': disabled || undefined,
+    };
+    const headerSection = !headerRowEmpty ? (React.createElement("div", { className: clsx(styles.header, disableHeaderPaddings && styles['no-padding']) },
+        React.createElement(InternalStructuredItem, { content: header && (React.createElement("div", { className: clsx(styles['header-inner'], testStyles.header, disabled && styles.disabled) },
+                React.createElement(WithNativeAttributes, { ...buttonProps, tag: "button", componentName: "ActionCard", nativeAttributes: nativeButtonAttributes, ref: buttonRef, id: headerId }, header))), secondaryContent: description && (React.createElement("div", { id: descriptionId, className: clsx(styles.description, testStyles.description, disabled && styles.disabled, header && styles['has-header']) }, description)), disablePaddings: disableHeaderPaddings }))) : null;
+    // When there's no header, a standalone overlay button is rendered.
+    // If ariaLabel is provided, it's used directly. Otherwise, derive the button's
+    // accessible name from the first available content: description or children.
+    let standaloneButtonLabelledBy;
+    if (!ariaLabel) {
+        if (description) {
+            standaloneButtonLabelledBy = descriptionId;
+        }
+        else if (children) {
+            standaloneButtonLabelledBy = bodyId;
+        }
+    }
+    const standaloneButton = !header ? (React.createElement(WithNativeAttributes, { ...buttonProps, tag: "button", componentName: "ActionCard", nativeAttributes: nativeButtonAttributes, ref: buttonRef, id: standaloneButtonId, className: clsx(styles['overlay-button'], testStyles.button, disabled && styles.disabled, variant && styles[`variant-${variant}`]), "aria-label": ariaLabel || undefined, "aria-labelledby": standaloneButtonLabelledBy })) : null;
+    const contentElement = (React.createElement("div", { className: styles['inner-card'] },
+        iconInHeaderRow ? (React.createElement("div", { className: styles['header-row'] },
+            headerSection,
+            iconWrapper)) : (headerSection),
+        children && (React.createElement("div", { className: clsx(styles.body, testStyles.body, disableContentPaddings && styles['no-padding']), id: bodyId }, children))));
+    return (React.createElement("div", { ...baseProps, ref: mergedRootRef, role: "group", "aria-labelledby": header ? headerId : standaloneButtonId, className: clsx(styles.root, styles[`variant-${variant}`], disabled && styles.disabled, disabled && testStyles.disabled, !!icon && styles['has-icon'], !!icon && styles['icon-align-end'], !!icon && styles[`icon-vertical-align-${iconVerticalAlignment}`], baseProps.className), "aria-disabled": disabled || undefined },
+        standaloneButton,
+        contentElement,
+        !iconInHeaderRow && iconWrapper));
+});
+export default InternalActionCard;
+//# sourceMappingURL=internal.js.map

package/lib/internal/template/action-card/internal.js.map

@@ -0,0 +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"]}

package/lib/internal/template/action-card/styles.css.js

@@ -0,0 +1,22 @@
+
+    import './styles.scoped.css';
+    export default {
+  "root": "awsui_root_16248_q1yer_161",
+  "icon": "awsui_icon_16248_q1yer_193",
+  "header-inner": "awsui_header-inner_16248_q1yer_209",
+  "disabled": "awsui_disabled_16248_q1yer_218",
+  "header": "awsui_header_16248_q1yer_209",
+  "body": "awsui_body_16248_q1yer_221",
+  "header-row": "awsui_header-row_16248_q1yer_225",
+  "description": "awsui_description_16248_q1yer_238",
+  "has-header": "awsui_has-header_16248_q1yer_244",
+  "header-button": "awsui_header-button_16248_q1yer_258",
+  "overlay-button": "awsui_overlay-button_16248_q1yer_259",
+  "variant-embedded": "awsui_variant-embedded_16248_q1yer_278",
+  "variant-default": "awsui_variant-default_16248_q1yer_290",
+  "inner-card": "awsui_inner-card_16248_q1yer_391",
+  "no-padding": "awsui_no-padding_16248_q1yer_398",
+  "icon-vertical-align-center": "awsui_icon-vertical-align-center_16248_q1yer_409",
+  "icon-align-end": "awsui_icon-align-end_16248_q1yer_543"
+};
+