@cloudscape-design/components 3.0.1156 → 3.0.1157

package/autosuggest/index.js

@@ -1,18 +1,35 @@
 // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 // SPDX-License-Identifier: Apache-2.0
+'use client';
 import React from 'react';
-
-import CoreComponent from './internal-do-not-use-core';
+import { getAnalyticsMetadataAttribute } from '@cloudscape-design/component-toolkit/internal/analytics-metadata';
+import useBaseComponent from '../internal/hooks/use-base-component';
 import { applyDisplayName } from '../internal/utils/apply-display-name';
-import { validateProps } from '@cloudscape-design/component-toolkit/internal';
-
-
-
-const Autosuggest = React.forwardRef((props, ref) => {
-    validateProps('Autosuggest', props, ["nativeInputAttributes","style"], {}, 'console');
-    return React.createElement(CoreComponent, {ref,...props});
+import { getExternalProps } from '../internal/utils/external-props';
+import InternalAutosuggest from './internal';
+const Autosuggest = React.forwardRef(({ filteringType = 'auto', statusType = 'finished', disableBrowserAutocorrect = false, hideEnteredTextOption = false, ...props }, ref) => {
+    const baseComponentProps = useBaseComponent('Autosuggest', {
+        props: {
+            autoFocus: props.autoFocus,
+            disableBrowserAutocorrect,
+            expandToViewport: props.expandToViewport,
+            filteringType,
+            readOnly: props.readOnly,
+            virtualScroll: props.virtualScroll,
+            hideEnteredTextOption,
+        },
+    });
+    const componentAnalyticsMetadata = {
+        name: 'awsui.Autosuggest',
+        label: 'input',
+        properties: {
+            disabled: `${!!props.disabled}`,
+            value: props.value || '',
+        },
+    };
+    const externalProps = getExternalProps(props);
+    return (React.createElement(InternalAutosuggest, { filteringType: filteringType, statusType: statusType, disableBrowserAutocorrect: disableBrowserAutocorrect, hideEnteredTextOption: hideEnteredTextOption, ...externalProps, ...baseComponentProps, ref: ref, ...getAnalyticsMetadataAttribute({ component: componentAnalyticsMetadata }) }));
 });
-
-
 applyDisplayName(Autosuggest, 'Autosuggest');
 export default Autosuggest;
+//# sourceMappingURL=index.js.map

package/autosuggest/interfaces.d.ts

@@ -95,7 +95,7 @@ export interface AutosuggestProps extends BaseComponentProps, BaseInputProps, In
    * Overrides the element that is announced to screen readers
    * when the highlighted option changes. By default, this announces
    * the option's name and properties, and its selected state if
-   * the `selectedLabel` property is defined.
+   * the `selectedAriaLabel` property is defined.
    * The highlighted option is provided, and its group (if groups
    * are used and it differs from the group of the previously highlighted option).
    *
@@ -106,6 +106,7 @@ export interface AutosuggestProps extends BaseComponentProps, BaseInputProps, In
   /**
    * @awsuiSystem core
    */
+  style?: AutosuggestProps.Style;
 }
 export declare namespace AutosuggestProps {
   type ChangeDetail = InputProps.ChangeDetail;

package/autosuggest/interfaces.js.map

@@ -1 +1 @@
-{"version":3,"file":"interfaces.js","sourceRoot":"","sources":["../../../src/autosuggest/interfaces.ts"],"names":[],"mappings":"","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React from 'react';\n\nimport { BaseInputProps, InputAutoCorrect, InputClearLabel, InputKeyEvents, InputProps } from '../input/interfaces';\nimport { BaseComponentProps } from '../internal/base-component';\nimport {\n  BaseDropdownHostProps,\n  OptionsFilteringType,\n  OptionsLoadItemsDetail,\n} from '../internal/components/dropdown/interfaces';\nimport { DropdownStatusProps } from '../internal/components/dropdown-status';\nimport { OptionDefinition, OptionGroup } from '../internal/components/option/interfaces';\nimport { FormFieldValidationControlProps } from '../internal/context/form-field-context';\nimport { NonCancelableEventHandler } from '../internal/events';\n\nexport interface AutosuggestProps\n  extends BaseComponentProps,\n    BaseInputProps,\n    InputAutoCorrect,\n    BaseDropdownHostProps,\n    InputKeyEvents,\n    InputClearLabel,\n    FormFieldValidationControlProps,\n    DropdownStatusProps {\n  /**\n   * Specifies an array of options that are displayed to the user as a dropdown list.\n   * The options can be grouped using `OptionGroup` objects.\n   *\n   * #### Option\n   * - `value` (string) - The returned value of the option when selected.\n   * - `label` (string) - (Optional) Option text displayed to the user.\n   * - `lang` (string) - (Optional) The language of the option, provided as a BCP 47 language tag.\n   * - `description` (string) - (Optional) Further information about the option that appears below the label.\n   * - `disabled` (boolean) - (Optional) Determines whether the option is disabled.\n   * - `labelTag` (string) - (Optional) A label tag that provides additional guidance, shown next to the label.\n   * - `tags` [string[]] - (Optional) A list of tags giving further guidance about the option.\n   * - `filteringTags` [string[]] - (Optional) A list of additional tags used for automatic filtering.\n   * - `iconName` (string) - (Optional) Specifies the name of an [icon](/components/icon/) to display in the option.\n   * - `iconAriaLabel` (string) - (Optional) Specifies alternate text for the icon. We recommend that you provide this for accessibility.\n   * - `iconAlt` (string) - (Optional) **Deprecated**, replaced by \\`iconAriaLabel\\`. Specifies alternate text for a custom icon, for use with `iconUrl`.\n   * - `iconUrl` (string) - (Optional) URL of a custom icon.\n   * - `iconSvg` (ReactNode) - (Optional) Custom SVG icon. Equivalent to the `svg` slot of the [icon component](/components/icon/).\n   *\n   * #### OptionGroup\n   * - `label` (string) - Option group text displayed to the user.\n   * - `disabled` (boolean) - (Optional) Determines whether the option group is disabled.\n   * - `options` (Option[]) - (Optional) The options under this group.\n   *\n   * Note: Only one level of option nesting is supported.\n   *\n   * If you want to use the built-in filtering capabilities of this component, provide\n   * a list of all valid options here and they will be automatically filtered based on the user's filtering input.\n   *\n   * Alternatively, you can listen to the `onChange` or `onLoadItems` event and set new options\n   * on your own.\n   **/\n  options?: AutosuggestProps.Options;\n  /**\n   * Determines how filtering is applied to the list of `options`:\n   *\n   * * `auto` - The component will automatically filter options based on user input.\n   * * `manual` - You will set up `onChange` or `onLoadItems` event listeners and filter options on your side or request\n   * them from server.\n   *\n   * By default the component will filter the provided `options` based on the value of the filtering input field.\n   * Only options that have a `value`, `label`, `description` or `labelTag` that contains the input value as a substring\n   * are displayed in the list of options.\n   *\n   * If you set this property to `manual`, this default filtering mechanism is disabled and all provided `options` are\n   * displayed in the dropdown list. In that case make sure that you use the `onChange` or `onLoadItems` events in order\n   * to set the `options` property to the options that are relevant for the user, given the filtering input value.\n   *\n   * Note: Manual filtering doesn't disable match highlighting.\n   **/\n  filteringType?: OptionsFilteringType;\n\n  /**\n   * Specifies a function that generates the custom value indicator (for example, `Use \"${value}\"`).\n   * @i18n\n   */\n  enteredTextLabel?: AutosuggestProps.EnteredTextLabel;\n\n  /**\n   * Defines whether entered text option is shown as the first option in the dropdown when value is non-empty.\n   */\n  hideEnteredTextOption?: boolean;\n\n  /**\n   * Specifies the text to display with the number of matches at the bottom of the dropdown menu while filtering.\n   *\n   * Note that the `matchesCount` includes the `enteredTextLabel` (\"Use ${value}\") item, so in most cases you\n   * should subtract 1 from `matchesCount`. If using manual filtering, you should provide your own value for `totalCount`.\n   */\n  filteringResultsText?: (matchesCount: number, totalCount: number) => string;\n\n  /**\n   * Specifies the text that's displayed when there aren't any suggestions to display.\n   * This is displayed when `statusType` is set to `finished` or it's not set at all.\n   */\n  empty?: React.ReactNode;\n\n  /**\n   * Called whenever a user selects an option in the dropdown. Don't use this event as the only way to handle user input.\n   * Instead, use `onSelect` in combination with the `onChange` handler only as an optional convenience for the user.\n   */\n  onSelect?: NonCancelableEventHandler<AutosuggestProps.SelectDetail>;\n\n  /**\n   * Specifies the localized string that describes an option as being selected.\n   * This is required to provide a good screen reader experience. For more information, see the\n   * [accessibility guidelines](/components/autosuggest/?tabId=usage#accessibility-guidelines).\n   * @i18n\n   */\n  selectedAriaLabel?: string;\n  /**\n   * Overrides the element that is announced to screen readers\n   * when the highlighted option changes. By default, this announces\n   * the option's name and properties, and its selected state if\n   * the `selectedLabel` property is defined.\n   * The highlighted option is provided, and its group (if groups\n   * are used and it differs from the group of the previously highlighted option).\n   *\n   * For more information, see the\n   * [accessibility guidelines](/components/autosuggest/?tabId=usage#accessibility-guidelines).\n   */\n  renderHighlightedAriaLive?: AutosuggestProps.ContainingOptionAndGroupString;\n\n  /**\n   * @awsuiSystem core\n   */\n  style?: AutosuggestProps.Style;\n}\n\nexport namespace AutosuggestProps {\n  export type ChangeDetail = InputProps.ChangeDetail;\n  export type KeyDetail = InputProps.KeyDetail;\n  export type FilteringType = OptionsFilteringType;\n  export type Option = OptionDefinition;\n  export type Options = ReadonlyArray<Option | OptionGroup>;\n  export type EnteredTextLabel = (value: string) => string;\n  export interface OptionGroup extends Option {\n    label?: string;\n    options: ReadonlyArray<Option>;\n  }\n  export type LoadItemsDetail = OptionsLoadItemsDetail;\n  export type StatusType = DropdownStatusProps.StatusType;\n  export interface SelectDetail {\n    value: string;\n    selectedOption?: Option;\n  }\n\n  export interface ContainingOptionAndGroupString {\n    (option: Option, group?: OptionGroup): string;\n  }\n\n  export interface Ref {\n    /**\n     * Sets input focus onto the UI control.\n     */\n    focus(): void;\n\n    /**\n     * Selects all text in the input control.\n     */\n    select(): void;\n  }\n\n  export interface Style {\n    root?: {\n      backgroundColor?: {\n        default?: string;\n        disabled?: string;\n        focus?: string;\n        hover?: string;\n        readonly?: string;\n      };\n      borderColor?: {\n        default?: string;\n        disabled?: string;\n        focus?: string;\n        hover?: string;\n        readonly?: string;\n      };\n      borderRadius?: string;\n      borderWidth?: string;\n      boxShadow?: {\n        default?: string;\n        disabled?: string;\n        focus?: string;\n        hover?: string;\n        readonly?: string;\n      };\n      color?: {\n        default?: string;\n        disabled?: string;\n        focus?: string;\n        hover?: string;\n        readonly?: string;\n      };\n      fontSize?: string;\n      fontWeight?: string;\n      paddingBlock?: string;\n      paddingInline?: string;\n    };\n    placeholder?: {\n      color?: string;\n      fontSize?: string;\n      fontStyle?: string;\n      fontWeight?: string;\n    };\n  }\n}\n\n// TODO: use DropdownOption type same as in select and multiselect\nexport type AutosuggestItem = (AutosuggestProps.Option | AutosuggestProps.OptionGroup) & {\n  type?: 'parent' | 'child' | 'use-entered';\n  option: OptionDefinition | OptionGroup;\n};\n"]}
+{"version":3,"file":"interfaces.js","sourceRoot":"","sources":["../../../src/autosuggest/interfaces.ts"],"names":[],"mappings":"","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React from 'react';\n\nimport { BaseInputProps, InputAutoCorrect, InputClearLabel, InputKeyEvents, InputProps } from '../input/interfaces';\nimport { BaseComponentProps } from '../internal/base-component';\nimport {\n  BaseDropdownHostProps,\n  OptionsFilteringType,\n  OptionsLoadItemsDetail,\n} from '../internal/components/dropdown/interfaces';\nimport { DropdownStatusProps } from '../internal/components/dropdown-status';\nimport { OptionDefinition, OptionGroup } from '../internal/components/option/interfaces';\nimport { FormFieldValidationControlProps } from '../internal/context/form-field-context';\nimport { NonCancelableEventHandler } from '../internal/events';\n\nexport interface AutosuggestProps\n  extends BaseComponentProps,\n    BaseInputProps,\n    InputAutoCorrect,\n    BaseDropdownHostProps,\n    InputKeyEvents,\n    InputClearLabel,\n    FormFieldValidationControlProps,\n    DropdownStatusProps {\n  /**\n   * Specifies an array of options that are displayed to the user as a dropdown list.\n   * The options can be grouped using `OptionGroup` objects.\n   *\n   * #### Option\n   * - `value` (string) - The returned value of the option when selected.\n   * - `label` (string) - (Optional) Option text displayed to the user.\n   * - `lang` (string) - (Optional) The language of the option, provided as a BCP 47 language tag.\n   * - `description` (string) - (Optional) Further information about the option that appears below the label.\n   * - `disabled` (boolean) - (Optional) Determines whether the option is disabled.\n   * - `labelTag` (string) - (Optional) A label tag that provides additional guidance, shown next to the label.\n   * - `tags` [string[]] - (Optional) A list of tags giving further guidance about the option.\n   * - `filteringTags` [string[]] - (Optional) A list of additional tags used for automatic filtering.\n   * - `iconName` (string) - (Optional) Specifies the name of an [icon](/components/icon/) to display in the option.\n   * - `iconAriaLabel` (string) - (Optional) Specifies alternate text for the icon. We recommend that you provide this for accessibility.\n   * - `iconAlt` (string) - (Optional) **Deprecated**, replaced by \\`iconAriaLabel\\`. Specifies alternate text for a custom icon, for use with `iconUrl`.\n   * - `iconUrl` (string) - (Optional) URL of a custom icon.\n   * - `iconSvg` (ReactNode) - (Optional) Custom SVG icon. Equivalent to the `svg` slot of the [icon component](/components/icon/).\n   *\n   * #### OptionGroup\n   * - `label` (string) - Option group text displayed to the user.\n   * - `disabled` (boolean) - (Optional) Determines whether the option group is disabled.\n   * - `options` (Option[]) - (Optional) The options under this group.\n   *\n   * Note: Only one level of option nesting is supported.\n   *\n   * If you want to use the built-in filtering capabilities of this component, provide\n   * a list of all valid options here and they will be automatically filtered based on the user's filtering input.\n   *\n   * Alternatively, you can listen to the `onChange` or `onLoadItems` event and set new options\n   * on your own.\n   **/\n  options?: AutosuggestProps.Options;\n  /**\n   * Determines how filtering is applied to the list of `options`:\n   *\n   * * `auto` - The component will automatically filter options based on user input.\n   * * `manual` - You will set up `onChange` or `onLoadItems` event listeners and filter options on your side or request\n   * them from server.\n   *\n   * By default the component will filter the provided `options` based on the value of the filtering input field.\n   * Only options that have a `value`, `label`, `description` or `labelTag` that contains the input value as a substring\n   * are displayed in the list of options.\n   *\n   * If you set this property to `manual`, this default filtering mechanism is disabled and all provided `options` are\n   * displayed in the dropdown list. In that case make sure that you use the `onChange` or `onLoadItems` events in order\n   * to set the `options` property to the options that are relevant for the user, given the filtering input value.\n   *\n   * Note: Manual filtering doesn't disable match highlighting.\n   **/\n  filteringType?: OptionsFilteringType;\n\n  /**\n   * Specifies a function that generates the custom value indicator (for example, `Use \"${value}\"`).\n   * @i18n\n   */\n  enteredTextLabel?: AutosuggestProps.EnteredTextLabel;\n\n  /**\n   * Defines whether entered text option is shown as the first option in the dropdown when value is non-empty.\n   */\n  hideEnteredTextOption?: boolean;\n\n  /**\n   * Specifies the text to display with the number of matches at the bottom of the dropdown menu while filtering.\n   *\n   * Note that the `matchesCount` includes the `enteredTextLabel` (\"Use ${value}\") item, so in most cases you\n   * should subtract 1 from `matchesCount`. If using manual filtering, you should provide your own value for `totalCount`.\n   */\n  filteringResultsText?: (matchesCount: number, totalCount: number) => string;\n\n  /**\n   * Specifies the text that's displayed when there aren't any suggestions to display.\n   * This is displayed when `statusType` is set to `finished` or it's not set at all.\n   */\n  empty?: React.ReactNode;\n\n  /**\n   * Called whenever a user selects an option in the dropdown. Don't use this event as the only way to handle user input.\n   * Instead, use `onSelect` in combination with the `onChange` handler only as an optional convenience for the user.\n   */\n  onSelect?: NonCancelableEventHandler<AutosuggestProps.SelectDetail>;\n\n  /**\n   * Specifies the localized string that describes an option as being selected.\n   * This is required to provide a good screen reader experience. For more information, see the\n   * [accessibility guidelines](/components/autosuggest/?tabId=usage#accessibility-guidelines).\n   * @i18n\n   */\n  selectedAriaLabel?: string;\n  /**\n   * Overrides the element that is announced to screen readers\n   * when the highlighted option changes. By default, this announces\n   * the option's name and properties, and its selected state if\n   * the `selectedAriaLabel` property is defined.\n   * The highlighted option is provided, and its group (if groups\n   * are used and it differs from the group of the previously highlighted option).\n   *\n   * For more information, see the\n   * [accessibility guidelines](/components/autosuggest/?tabId=usage#accessibility-guidelines).\n   */\n  renderHighlightedAriaLive?: AutosuggestProps.ContainingOptionAndGroupString;\n\n  /**\n   * @awsuiSystem core\n   */\n  style?: AutosuggestProps.Style;\n}\n\nexport namespace AutosuggestProps {\n  export type ChangeDetail = InputProps.ChangeDetail;\n  export type KeyDetail = InputProps.KeyDetail;\n  export type FilteringType = OptionsFilteringType;\n  export type Option = OptionDefinition;\n  export type Options = ReadonlyArray<Option | OptionGroup>;\n  export type EnteredTextLabel = (value: string) => string;\n  export interface OptionGroup extends Option {\n    label?: string;\n    options: ReadonlyArray<Option>;\n  }\n  export type LoadItemsDetail = OptionsLoadItemsDetail;\n  export type StatusType = DropdownStatusProps.StatusType;\n  export interface SelectDetail {\n    value: string;\n    selectedOption?: Option;\n  }\n\n  export interface ContainingOptionAndGroupString {\n    (option: Option, group?: OptionGroup): string;\n  }\n\n  export interface Ref {\n    /**\n     * Sets input focus onto the UI control.\n     */\n    focus(): void;\n\n    /**\n     * Selects all text in the input control.\n     */\n    select(): void;\n  }\n\n  export interface Style {\n    root?: {\n      backgroundColor?: {\n        default?: string;\n        disabled?: string;\n        focus?: string;\n        hover?: string;\n        readonly?: string;\n      };\n      borderColor?: {\n        default?: string;\n        disabled?: string;\n        focus?: string;\n        hover?: string;\n        readonly?: string;\n      };\n      borderRadius?: string;\n      borderWidth?: string;\n      boxShadow?: {\n        default?: string;\n        disabled?: string;\n        focus?: string;\n        hover?: string;\n        readonly?: string;\n      };\n      color?: {\n        default?: string;\n        disabled?: string;\n        focus?: string;\n        hover?: string;\n        readonly?: string;\n      };\n      fontSize?: string;\n      fontWeight?: string;\n      paddingBlock?: string;\n      paddingInline?: string;\n    };\n    placeholder?: {\n      color?: string;\n      fontSize?: string;\n      fontStyle?: string;\n      fontWeight?: string;\n    };\n  }\n}\n\n// TODO: use DropdownOption type same as in select and multiselect\nexport type AutosuggestItem = (AutosuggestProps.Option | AutosuggestProps.OptionGroup) & {\n  type?: 'parent' | 'child' | 'use-entered';\n  option: OptionDefinition | OptionGroup;\n};\n"]}

package/badge/index.d.ts

@@ -3,5 +3,7 @@ export { BadgeProps };
 export default function Badge({
   color,
   children,
+  style,
+  nativeAttributes,
   ...rest
 }: BadgeProps): JSX.Element;

package/badge/index.js

@@ -1,18 +1,19 @@
 // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 // SPDX-License-Identifier: Apache-2.0
+'use client';
 import React from 'react';
-
-import CoreComponent from './internal-do-not-use-core';
+import clsx from 'clsx';
+import { getBaseProps } from '../internal/base-component';
+import useBaseComponent from '../internal/hooks/use-base-component';
 import { applyDisplayName } from '../internal/utils/apply-display-name';
-import { validateProps } from '@cloudscape-design/component-toolkit/internal';
-
-
-
-const Badge = (props) => {
-    validateProps('Badge', props, ["nativeAttributes","style"], {}, 'console');
-    return React.createElement(CoreComponent, props);
-};
-
-
+import WithNativeAttributes from '../internal/utils/with-native-attributes';
+import { getBadgeStyles } from './style';
+import styles from './styles.css.js';
+export default function Badge({ color = 'grey', children, style, nativeAttributes, ...rest }) {
+    const { __internalRootRef } = useBaseComponent('Badge', { props: { color } });
+    const baseProps = getBaseProps(rest);
+    const className = clsx(baseProps.className, styles.badge, styles[`badge-color-${color}`]);
+    return (React.createElement(WithNativeAttributes, { ...baseProps, tag: "span", componentName: "Badge", nativeAttributes: nativeAttributes, className: className, ref: __internalRootRef, style: getBadgeStyles(style) }, children));
+}
 applyDisplayName(Badge, 'Badge');
-export default Badge;
+//# sourceMappingURL=index.js.map

package/badge/interfaces.d.ts

@@ -3,7 +3,7 @@ import { BaseComponentProps } from '../internal/base-component';
 /**
  * @awsuiSystem core
  */
-
+import { NativeAttributes } from '../internal/utils/with-native-attributes';
 export interface BadgeProps extends BaseComponentProps {
   /**
    * Specifies the badge color.
@@ -16,7 +16,7 @@ export interface BadgeProps extends BaseComponentProps {
   /**
    * @awsuiSystem core
    */
-
+  style?: BadgeProps.Style;
   /**
    * Attributes to add to the native element.
    * Some attributes will be automatically combined with internal attribute values:
@@ -27,6 +27,7 @@ export interface BadgeProps extends BaseComponentProps {
    *
    * @awsuiSystem core
    */
+  nativeAttributes?: NativeAttributes<React.HTMLAttributes<HTMLElement>>;
 }
 export declare namespace BadgeProps {
   interface Style {

package/box/index.js

@@ -1,18 +1,23 @@
 // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 // SPDX-License-Identifier: Apache-2.0
+'use client';
 import React from 'react';
-
-import CoreComponent from './internal-do-not-use-core';
+import useBaseComponent from '../internal/hooks/use-base-component';
 import { applyDisplayName } from '../internal/utils/apply-display-name';
-import { validateProps } from '@cloudscape-design/component-toolkit/internal';
-
-
-
-const Box = (props) => {
-    validateProps('Box', props, ["nativeAttributes"], {}, 'console');
-    return React.createElement(CoreComponent, props);
-};
-
-
+import InternalBox from './internal';
+export default function Box({ variant = 'div', margin = {}, padding = {}, ...props }) {
+    const baseComponentProps = useBaseComponent('Box', {
+        props: {
+            color: props.color,
+            display: props.display,
+            float: props.float,
+            fontSize: props.fontSize,
+            fontWeight: props.fontWeight,
+            textAlign: props.textAlign,
+            variant,
+        },
+    });
+    return React.createElement(InternalBox, { variant: variant, margin: margin, padding: padding, ...props, ...baseComponentProps });
+}
 applyDisplayName(Box, 'Box');
-export default Box;
+//# sourceMappingURL=index.js.map

package/box/interfaces.d.ts

@@ -2,7 +2,7 @@ import { BaseComponentProps } from '../internal/base-component';
 /**
  * @awsuiSystem core
  */
-
+import { NativeAttributes } from '../internal/utils/with-native-attributes';
 export interface BoxProps extends BaseComponentProps {
   /**
    * Defines the style of element to display.
@@ -129,6 +129,7 @@ export interface BoxProps extends BaseComponentProps {
    *
    * @awsuiSystem core
    */
+  nativeAttributes?: NativeAttributes<React.HTMLAttributes<HTMLElement>>;
 }
 export declare namespace BoxProps {
   type Variant = 'div' | 'span' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'p' | 'strong' | 'small' | 'code' | 'pre' | 'samp' | 'awsui-key-label' | 'awsui-gen-ai-label' | 'awsui-value-large' | 'awsui-inline-code';

package/button/index.js

@@ -1,18 +1,19 @@
 // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 // SPDX-License-Identifier: Apache-2.0
+'use client';
 import React from 'react';
-
-import CoreComponent from './internal-do-not-use-core';
+import { getBaseProps } from '../internal/base-component';
+import useBaseComponent from '../internal/hooks/use-base-component';
 import { applyDisplayName } from '../internal/utils/apply-display-name';
-import { validateProps } from '@cloudscape-design/component-toolkit/internal';
-
-
-
-const Button = React.forwardRef((props, ref) => {
-    validateProps('Button', props, ["nativeAnchorAttributes","nativeButtonAttributes","style"], {}, 'console');
-    return React.createElement(CoreComponent, {ref,...props});
+import { InternalButton } from './internal';
+const Button = React.forwardRef(({ children, iconName, iconAlign = 'left', iconUrl, iconSvg, iconAlt, variant = 'normal', loading = false, loadingText, disabled = false, disabledReason, wrapText = true, href, target, rel, external = false, download, formAction = 'submit', ariaLabel, ariaDescribedby, onClick, onFollow, ariaExpanded, ariaControls, fullWidth, form, i18nStrings, style, nativeButtonAttributes, nativeAnchorAttributes, ...props }, ref) => {
+    const baseComponentProps = useBaseComponent('Button', {
+        props: { formAction, fullWidth, iconAlign, iconName, rel, target, external, variant, wrapText },
+        metadata: { hasDisabledReason: Boolean(disabledReason) },
+    });
+    const baseProps = getBaseProps(props);
+    return (React.createElement(InternalButton, { ...baseProps, ...baseComponentProps, ref: ref, iconName: iconName, iconAlign: iconAlign, iconUrl: iconUrl, iconSvg: iconSvg, iconAlt: iconAlt, variant: variant, loading: loading, loadingText: loadingText, disabled: disabled, disabledReason: disabledReason, wrapText: wrapText, href: href, target: target, rel: rel, external: external, download: download, formAction: formAction, ariaLabel: ariaLabel, ariaDescribedby: ariaDescribedby, onClick: onClick, onFollow: onFollow, ariaExpanded: ariaExpanded, ariaControls: ariaControls, fullWidth: fullWidth, form: form, i18nStrings: i18nStrings, style: style, nativeButtonAttributes: nativeButtonAttributes, nativeAnchorAttributes: nativeAnchorAttributes, __injectAnalyticsComponentMetadata: true }, children));
 });
-
-
 applyDisplayName(Button, 'Button');
 export default Button;
+//# sourceMappingURL=index.js.map

package/button/interfaces.d.ts

@@ -5,7 +5,7 @@ import { BaseNavigationDetail, CancelableEventHandler, ClickDetail as _ClickDeta
 /**
  * @awsuiSystem core
  */
-
+import { NativeAttributes } from '../internal/utils/with-native-attributes';
 export interface BaseButtonProps {
   /**
    * Renders the button as disabled and prevents clicks.
@@ -103,7 +103,7 @@ export interface BaseButtonProps {
    *
    * @awsuiSystem core
    */
-
+  nativeButtonAttributes?: NativeAttributes<React.ButtonHTMLAttributes<HTMLButtonElement>>;
   /**
    * Attributes to add to the native `a` element (when `href` is provided).
    * Some attributes will be automatically combined with internal attribute values:
@@ -114,6 +114,7 @@ export interface BaseButtonProps {
    *
    * @awsuiSystem core
    */
+  nativeAnchorAttributes?: NativeAttributes<React.AnchorHTMLAttributes<HTMLAnchorElement>>;
 }
 export interface ButtonProps extends BaseComponentProps, BaseButtonProps {
   /**
@@ -183,6 +184,7 @@ export interface ButtonProps extends BaseComponentProps, BaseButtonProps {
   /**
    * @awsuiSystem core
    */
+  style?: ButtonProps.Style;
 }
 export declare namespace ButtonProps {
   type Variant = 'normal' | 'primary' | 'link' | 'icon' | 'inline-icon' | 'inline-link';

package/button-dropdown/index.js

@@ -1,18 +1,34 @@
 // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 // SPDX-License-Identifier: Apache-2.0
+'use client';
 import React from 'react';
-
-import CoreComponent from './internal-do-not-use-core';
+import { getAnalyticsMetadataAttribute } from '@cloudscape-design/component-toolkit/internal/analytics-metadata';
+import { getBaseProps } from '../internal/base-component';
+import useBaseComponent from '../internal/hooks/use-base-component';
 import { applyDisplayName } from '../internal/utils/apply-display-name';
-import { validateProps } from '@cloudscape-design/component-toolkit/internal';
-
-
-
-const ButtonDropdown = React.forwardRef((props, ref) => {
-    validateProps('ButtonDropdown', props, ["nativeMainActionAttributes","nativeTriggerAttributes"], {}, 'console');
-    return React.createElement(CoreComponent, {ref,...props});
+import InternalButtonDropdown from './internal';
+import { hasCheckboxItems, hasDisabledReasonItems } from './utils/utils';
+import analyticsSelectors from './analytics-metadata/styles.css.js';
+const ButtonDropdown = React.forwardRef(({ items, variant = 'normal', loading = false, loadingText, disabled = false, disabledReason, expandableGroups = false, expandToViewport = false, ariaLabel, children, onItemClick, onItemFollow, mainAction, fullWidth, nativeMainActionAttributes, nativeTriggerAttributes, ...props }, ref) => {
+    const baseComponentProps = useBaseComponent('ButtonDropdown', {
+        props: { expandToViewport, expandableGroups, variant },
+        metadata: {
+            mainAction: !!mainAction,
+            checkboxItems: hasCheckboxItems(items),
+            hasDisabledReason: Boolean(disabledReason),
+            hasDisabledReasons: hasDisabledReasonItems(items),
+        },
+    });
+    const baseProps = getBaseProps(props);
+    const analyticsComponentMetadata = {
+        name: 'awsui.ButtonDropdown',
+        label: `.${analyticsSelectors['trigger-label']}`,
+        properties: { variant, disabled: `${disabled}` },
+    };
+    return (React.createElement(InternalButtonDropdown, { ...baseProps, ...baseComponentProps, ref: ref, items: items, variant: variant, loading: loading, loadingText: loadingText, disabled: disabled, disabledReason: disabledReason, expandableGroups: expandableGroups, expandToViewport: expandToViewport, ariaLabel: ariaLabel, onItemClick: onItemClick, onItemFollow: onItemFollow, mainAction: mainAction, fullWidth: fullWidth, nativeMainActionAttributes: nativeMainActionAttributes, nativeTriggerAttributes: nativeTriggerAttributes, ...getAnalyticsMetadataAttribute({
+            component: analyticsComponentMetadata,
+        }) }, children));
 });
-
-
 applyDisplayName(ButtonDropdown, 'ButtonDropdown');
 export default ButtonDropdown;
+//# sourceMappingURL=index.js.map

package/button-dropdown/interfaces.d.ts

@@ -9,7 +9,7 @@ import { InternalBaseComponentProps } from '../internal/hooks/use-base-component
 /**
  * @awsuiSystem core
  */
-
+import { NativeAttributes } from '../internal/utils/with-native-attributes';
 export interface ButtonDropdownProps extends BaseComponentProps, ExpandToViewport {
   /**
    * Array of objects with a number of supported types.
@@ -132,7 +132,7 @@ export interface ButtonDropdownProps extends BaseComponentProps, ExpandToViewpor
    *
    * @awsuiSystem core
    */
-
+  nativeTriggerAttributes?: NativeAttributes<React.ButtonHTMLAttributes<HTMLButtonElement>>;
   /**
    * Attributes to add to the native element of the `mainAction`.
    *
@@ -146,6 +146,10 @@ export interface ButtonDropdownProps extends BaseComponentProps, ExpandToViewpor
    *
    * @awsuiSystem core
    */
+  nativeMainActionAttributes?: {
+    button?: NativeAttributes<React.ButtonHTMLAttributes<HTMLButtonElement>>;
+    anchor?: NativeAttributes<React.AnchorHTMLAttributes<HTMLAnchorElement>>;
+  };
 }
 export declare namespace ButtonDropdownProps {
   type Variant = 'normal' | 'primary' | 'icon' | 'inline-icon';

package/button-group/index.js

@@ -1,18 +1,49 @@
 // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 // SPDX-License-Identifier: Apache-2.0
+'use client';
 import React from 'react';
-
-import CoreComponent from './internal-do-not-use-core';
+import { getAnalyticsMetadataAttribute } from '@cloudscape-design/component-toolkit/internal/analytics-metadata';
+import { getBaseProps } from '../internal/base-component';
+import useBaseComponent from '../internal/hooks/use-base-component';
 import { applyDisplayName } from '../internal/utils/apply-display-name';
-import { validateProps } from '@cloudscape-design/component-toolkit/internal';
-
-
-
-const ButtonGroup = React.forwardRef((props, ref) => {
-    validateProps('ButtonGroup', props, ["style"], {}, 'console');
-    return React.createElement(CoreComponent, {ref,...props});
+import { getExternalProps } from '../internal/utils/external-props';
+import InternalButtonGroup from './internal';
+const ButtonGroup = React.forwardRef(({ variant, dropdownExpandToViewport = false, style, ...rest }, ref) => {
+    const baseProps = getBaseProps(rest);
+    const itemCounts = getItemCounts(rest.items);
+    const baseComponentProps = useBaseComponent('ButtonGroup', {
+        props: {
+            variant,
+            dropdownExpandToViewport,
+        },
+        metadata: {
+            iconButtonsCount: itemCounts['icon-button'],
+            iconToggleButtonsCount: itemCounts['icon-toggle-button'],
+            iconFileInputsCount: itemCounts['icon-file-input'],
+            menuDropdownsCount: itemCounts['menu-dropdown'],
+            groupsCount: itemCounts.group,
+        },
+    });
+    const externalProps = getExternalProps(rest);
+    const componentMetadata = {
+        name: 'awsui.ButtonGroup',
+        label: { root: 'self' },
+    };
+    return (React.createElement(InternalButtonGroup, { ...baseProps, ...baseComponentProps, ...externalProps, ref: ref, variant: variant, dropdownExpandToViewport: dropdownExpandToViewport, style: style, ...getAnalyticsMetadataAttribute({ component: componentMetadata }) }));
 });
-
-
+function getItemCounts(allItems = []) {
+    const counters = { 'icon-button': 0, 'icon-toggle-button': 0, 'icon-file-input': 0, 'menu-dropdown': 0, group: 0 };
+    function count(items) {
+        for (const item of items) {
+            counters[item.type] += 1;
+            if (item.type === 'group') {
+                count(item.items);
+            }
+        }
+    }
+    count(allItems);
+    return counters;
+}
 applyDisplayName(ButtonGroup, 'ButtonGroup');
 export default ButtonGroup;
+//# sourceMappingURL=index.js.map

package/button-group/interfaces.d.ts

@@ -98,6 +98,7 @@ export interface ButtonGroupProps extends BaseComponentProps {
   /**
    * @awsuiSystem core
    */
+  style?: ButtonGroupProps.Style;
 }
 export interface InternalIconButton extends ButtonGroupProps.IconButton {
   analyticsAction?: string;
@@ -105,6 +106,15 @@ export interface InternalIconButton extends ButtonGroupProps.IconButton {
 export interface InternalIconToggleButton extends ButtonGroupProps.IconToggleButton {
   analyticsAction?: string;
 }
+export interface IconButtonRuntime extends Omit<ButtonGroupProps.IconButton, 'iconSvg' | 'popoverFeedback'> {
+  iconSvg?: string;
+}
+export interface IconToggleButtonRuntime extends Omit<ButtonGroupProps.IconToggleButton, 'iconSvg' | 'pressedIconSvg' | 'popoverFeedback' | 'pressedPopoverFeedback'> {
+  iconSvg?: string;
+  pressedIconSvg?: string;
+}
+export type ItemOrGroupRuntime = ItemRuntime | ButtonGroupProps.Group;
+export type ItemRuntime = IconButtonRuntime | IconToggleButtonRuntime | ButtonGroupProps.IconFileInput | ButtonGroupProps.MenuDropdown;
 export type InternalItemOrGroup = InternalItem | ButtonGroupProps.Group;
 export type InternalItem = InternalIconButton | InternalIconToggleButton | ButtonGroupProps.IconFileInput | ButtonGroupProps.MenuDropdown;
 export interface InternalButtonGroupProps extends SomeRequired<ButtonGroupProps, 'dropdownExpandToViewport'>, InternalBaseComponentProps {

package/button-group/interfaces.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"interfaces.d.ts","sourceRoot":"","sources":["../../../src/button-group/interfaces.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"interfaces.d.ts","sourceRoot":"","sources":["../../../src/button-group/interfaces.ts"],"names":[],"mappings":"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"}

package/button-group/interfaces.js.map

@@ -1 +1 @@
-{"version":3,"file":"interfaces.js","sourceRoot":"","sources":["../../../src/button-group/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\nimport { ButtonDropdownProps } from '../button-dropdown/interfaces';\nimport { IconProps } from '../icon/interfaces';\nimport { BaseComponentProps } from '../internal/base-component';\nimport { NonCancelableEventHandler } from '../internal/events';\nimport { InternalBaseComponentProps } from '../internal/hooks/use-base-component';\nimport { SomeRequired } from '../internal/types';\n\nexport interface ButtonGroupProps extends BaseComponentProps {\n  /**\n   * Adds `aria-label` to the button group toolbar element.\n   * Use this to provide a unique accessible name for each button group on the page.\n   */\n  ariaLabel?: string;\n  /**\n   * Determines the general styling of the button dropdown.\n   * * `icon` for icon buttons.\n   */\n  variant: ButtonGroupProps.Variant;\n  /**\n   * Use this property to determine dropdown placement strategy for all menu dropdown items.\n   *\n   * By default, the dropdown height is constrained to fit inside the height of its next scrollable container element.\n   * Enabling this property will allow the dropdown to extend beyond that container by using fixed positioning and\n   * [React Portals](https://reactjs.org/docs/portals.html).\n   *\n   * Set this property if the dropdown would otherwise be constrained by a scrollable container,\n   * for example inside table and split view layouts.\n   *\n   * We recommend you use discretion, and don't enable this property unless necessary\n   * because fixed positioning results in a slight, visible lag when scrolling complex pages.\n   */\n  dropdownExpandToViewport?: boolean;\n  /**\n   * Array of objects with a number of supported types.\n   *\n   * ### icon-button\n   *\n   * * `id` (string) - The unique identifier of the button, used as detail in `onItemClick` handler and to focus the button using `ref.focus(id)`.\n   * * `text` (string) - The name shown as a tooltip for this button.\n   * * `disabled` (optional, boolean) - The disabled state indication for this button.\n   * * `disabledReason` (optional, boolean) - Provides a reason why the button is disabled (only when `disabled` is `true`). If provided, the button becomes focusable.\n   * * `loading` (optional, boolean) - The loading state indication for this button.\n   * * `loadingText` (optional, string) - The loading text announced to screen readers.\n   * * `iconName` (optional, string) - Specifies the name of the icon, used with the [icon component](/components/icon/).\n   * * `iconAlt` (optional, string) - Specifies alternate text for the icon when using `iconUrl`.\n   * * `iconUrl` (optional, string) - Specifies the URL of a custom icon.\n   * * `iconSvg` (optional, ReactNode) - Custom SVG icon. Equivalent to the `svg` slot of the [icon component](/components/icon/).\n   * * `popoverFeedback` (optional, ReactNode) - Text that appears when the user clicks the button. Use to provide feedback to the user.\n   *\n   * ### icon-toggle-button\n   *\n   * * `id` (string) - The unique identifier of the button, used as detail in `onItemClick` handler and to focus the button using `ref.focus(id)`.\n   * * `pressed` (boolean) - The toggle button pressed state.\n   * * `text` (string) - The name shown as a tooltip for this button.\n   * * `disabled` (optional, boolean) - The disabled state indication for this button.\n   * * `disabledReason` (optional, boolean) - Provides a reason why the button is disabled (only when `disabled` is `true`). If provided, the button becomes focusable.\n   * * `loading` (optional, boolean) - The loading state indication for this button.\n   * * `loadingText` (optional, string) - The loading text announced to screen readers.\n   * * `iconName` (optional, string) - Specifies the name of the icon, used with the [icon component](/components/icon/).\n   * * `iconUrl` (optional, string) - Specifies the URL of a custom icon.\n   * * `iconSvg` (optional, ReactNode) - Custom SVG icon. Equivalent to the `svg` slot of the [icon component](/components/icon/).\n   * * `pressedIconName` (optional, string) - Specifies the name of the icon in pressed state, used with the [icon component](/components/icon/).\n   * * `pressedIconUrl` (optional, string) - Specifies the URL of a custom icon in pressed state.\n   * * `pressedIconSvg` (optional, ReactNode) - Custom SVG icon in pressed state. Equivalent to the `svg` slot of the [icon component](/components/icon/).\n   * * `popoverFeedback` (optional, ReactNode) - Text that appears when the user clicks the button. Use to provide feedback to the user.\n   * * `pressedPopoverFeedback` (optional, ReactNode) - Text that appears when the user clicks the button in pressed state. Defaults to `popoverFeedback`.\n   *\n   * * ### file-input\n   *\n   * * `id` (string) - The unique identifier of the button, used as detail in `onFilesChange`.\n   * * `text` (string) - The name of the menu button shown as a tooltip.\n   * * `accept` (optional, string) - Specifies the native file input `accept` attribute to describe the allow-list of file types.\n   * * `multiple` (optional, string) - Specifies the native file input `multiple` attribute to allow users entering more than one file.\n   *\n   * ### menu-dropdown\n   *\n   * * `id` (string) - The unique identifier of the button, used as detail in `onItemClick`.\n   * * `text` (string) - The name of the menu button shown as a tooltip.\n   * * `disabled` (optional, boolean) - The disabled state indication for the menu button.\n   * * `disabledReason` (optional, boolean) - Provides a reason why the button is disabled (only when `disabled` is `true`). If provided, the button becomes focusable.\n   * * `loading` (optional, boolean) - The loading state indication for the menu button.\n   * * `loadingText` (optional, string) - The loading text announced to screen readers.\n   * * `items` (ButtonDropdownProps.ItemOrGroup[]) - The array of dropdown items that belong to this menu.\n   *\n   * ### group\n   *\n   * * `text` (string) - The name of the group rendered as ARIA label for this group.\n   * * `items` ((ButtonGroupProps.IconButton | ButtonGroupProps.MenuDropdown)[]) - The array of items that belong to this group.\n   */\n  items: ReadonlyArray<ButtonGroupProps.ItemOrGroup>;\n  /**\n   * Called when the user clicks on an item, and the item is not disabled. The event detail object contains the id of the clicked item.\n   */\n  onItemClick?: NonCancelableEventHandler<ButtonGroupProps.ItemClickDetails>;\n  /**\n   * Called when the user uploads files. The event detail object contains the id and files from the file input item.\n   */\n  onFilesChange?: NonCancelableEventHandler<ButtonGroupProps.FilesChangeDetails>;\n  /**\n   * @awsuiSystem core\n   */\n  style?: ButtonGroupProps.Style;\n}\n\nexport interface InternalIconButton extends ButtonGroupProps.IconButton {\n  analyticsAction?: string;\n}\nexport interface InternalIconToggleButton extends ButtonGroupProps.IconToggleButton {\n  analyticsAction?: string;\n}\n\nexport type InternalItemOrGroup = InternalItem | ButtonGroupProps.Group;\nexport type InternalItem =\n  | InternalIconButton\n  | InternalIconToggleButton\n  | ButtonGroupProps.IconFileInput\n  | ButtonGroupProps.MenuDropdown;\n\nexport interface InternalButtonGroupProps\n  extends SomeRequired<ButtonGroupProps, 'dropdownExpandToViewport'>,\n    InternalBaseComponentProps {\n  style?: ButtonGroupProps.Style;\n  items: ReadonlyArray<InternalItemOrGroup>;\n}\n\nexport namespace ButtonGroupProps {\n  export type Variant = 'icon';\n\n  export type ItemOrGroup = Item | Group;\n  export type Item = IconButton | IconToggleButton | IconFileInput | MenuDropdown;\n\n  export interface IconButton {\n    type: 'icon-button';\n    id: string;\n    text: string;\n    disabled?: boolean;\n    disabledReason?: string;\n    loading?: boolean;\n    loadingText?: string;\n    iconName?: IconProps.Name;\n    iconAlt?: string;\n    iconUrl?: string;\n    iconSvg?: React.ReactNode;\n    popoverFeedback?: React.ReactNode;\n  }\n\n  export interface IconToggleButton {\n    type: 'icon-toggle-button';\n    id: string;\n    text: string;\n    pressed: boolean;\n    disabled?: boolean;\n    disabledReason?: string;\n    loading?: boolean;\n    loadingText?: string;\n    iconName?: IconProps.Name;\n    iconUrl?: string;\n    iconSvg?: React.ReactNode;\n    pressedIconName?: IconProps.Name;\n    pressedIconUrl?: string;\n    pressedIconSvg?: React.ReactNode;\n    popoverFeedback?: React.ReactNode;\n    pressedPopoverFeedback?: React.ReactNode;\n  }\n\n  export interface IconFileInput {\n    type: 'icon-file-input';\n    id: string;\n    text: string;\n    accept?: string;\n    multiple?: boolean;\n  }\n\n  export interface MenuDropdown {\n    type: 'menu-dropdown';\n    id: string;\n    text: string;\n    disabled?: boolean;\n    disabledReason?: string;\n    loading?: boolean;\n    loadingText?: string;\n    items: ReadonlyArray<ButtonDropdownProps.ItemOrGroup>;\n  }\n\n  export interface Group {\n    type: 'group';\n    text: string;\n    items: ReadonlyArray<ButtonGroupProps.Item>;\n  }\n\n  export interface ItemClickDetails {\n    id: string;\n    pressed?: boolean;\n    checked?: boolean;\n  }\n\n  export interface FilesChangeDetails {\n    id: string;\n    files: File[];\n  }\n\n  export interface Ref {\n    /**\n     * Focuses button group item by id.\n     */\n    focus(itemId: string): void;\n  }\n  export interface Style {\n    root?: {\n      background?: string;\n      borderColor?: string;\n      borderRadius?: string;\n      borderWidth?: string;\n      paddingBlock?: string;\n      paddingInline?: string;\n      boxShadow?: string;\n      focusRing?: {\n        borderColor?: string;\n        borderRadius?: string;\n        borderWidth?: string;\n      };\n    };\n    item?: {\n      color?: {\n        active?: string;\n        default?: string;\n        disabled?: string;\n        hover?: string;\n      };\n      boxShadow?: {\n        active?: string;\n        default?: string;\n        disabled?: string;\n        hover?: string;\n      };\n      focusRing?: {\n        borderColor?: string;\n        borderRadius?: string;\n        borderWidth?: string;\n      };\n    };\n  }\n}\n"]}
+{"version":3,"file":"interfaces.js","sourceRoot":"","sources":["../../../src/button-group/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\nimport { ButtonDropdownProps } from '../button-dropdown/interfaces';\nimport { IconProps } from '../icon/interfaces';\nimport { BaseComponentProps } from '../internal/base-component';\nimport { NonCancelableEventHandler } from '../internal/events';\nimport { InternalBaseComponentProps } from '../internal/hooks/use-base-component';\nimport { SomeRequired } from '../internal/types';\n\nexport interface ButtonGroupProps extends BaseComponentProps {\n  /**\n   * Adds `aria-label` to the button group toolbar element.\n   * Use this to provide a unique accessible name for each button group on the page.\n   */\n  ariaLabel?: string;\n  /**\n   * Determines the general styling of the button dropdown.\n   * * `icon` for icon buttons.\n   */\n  variant: ButtonGroupProps.Variant;\n  /**\n   * Use this property to determine dropdown placement strategy for all menu dropdown items.\n   *\n   * By default, the dropdown height is constrained to fit inside the height of its next scrollable container element.\n   * Enabling this property will allow the dropdown to extend beyond that container by using fixed positioning and\n   * [React Portals](https://reactjs.org/docs/portals.html).\n   *\n   * Set this property if the dropdown would otherwise be constrained by a scrollable container,\n   * for example inside table and split view layouts.\n   *\n   * We recommend you use discretion, and don't enable this property unless necessary\n   * because fixed positioning results in a slight, visible lag when scrolling complex pages.\n   */\n  dropdownExpandToViewport?: boolean;\n  /**\n   * Array of objects with a number of supported types.\n   *\n   * ### icon-button\n   *\n   * * `id` (string) - The unique identifier of the button, used as detail in `onItemClick` handler and to focus the button using `ref.focus(id)`.\n   * * `text` (string) - The name shown as a tooltip for this button.\n   * * `disabled` (optional, boolean) - The disabled state indication for this button.\n   * * `disabledReason` (optional, boolean) - Provides a reason why the button is disabled (only when `disabled` is `true`). If provided, the button becomes focusable.\n   * * `loading` (optional, boolean) - The loading state indication for this button.\n   * * `loadingText` (optional, string) - The loading text announced to screen readers.\n   * * `iconName` (optional, string) - Specifies the name of the icon, used with the [icon component](/components/icon/).\n   * * `iconAlt` (optional, string) - Specifies alternate text for the icon when using `iconUrl`.\n   * * `iconUrl` (optional, string) - Specifies the URL of a custom icon.\n   * * `iconSvg` (optional, ReactNode) - Custom SVG icon. Equivalent to the `svg` slot of the [icon component](/components/icon/).\n   * * `popoverFeedback` (optional, ReactNode) - Text that appears when the user clicks the button. Use to provide feedback to the user.\n   *\n   * ### icon-toggle-button\n   *\n   * * `id` (string) - The unique identifier of the button, used as detail in `onItemClick` handler and to focus the button using `ref.focus(id)`.\n   * * `pressed` (boolean) - The toggle button pressed state.\n   * * `text` (string) - The name shown as a tooltip for this button.\n   * * `disabled` (optional, boolean) - The disabled state indication for this button.\n   * * `disabledReason` (optional, boolean) - Provides a reason why the button is disabled (only when `disabled` is `true`). If provided, the button becomes focusable.\n   * * `loading` (optional, boolean) - The loading state indication for this button.\n   * * `loadingText` (optional, string) - The loading text announced to screen readers.\n   * * `iconName` (optional, string) - Specifies the name of the icon, used with the [icon component](/components/icon/).\n   * * `iconUrl` (optional, string) - Specifies the URL of a custom icon.\n   * * `iconSvg` (optional, ReactNode) - Custom SVG icon. Equivalent to the `svg` slot of the [icon component](/components/icon/).\n   * * `pressedIconName` (optional, string) - Specifies the name of the icon in pressed state, used with the [icon component](/components/icon/).\n   * * `pressedIconUrl` (optional, string) - Specifies the URL of a custom icon in pressed state.\n   * * `pressedIconSvg` (optional, ReactNode) - Custom SVG icon in pressed state. Equivalent to the `svg` slot of the [icon component](/components/icon/).\n   * * `popoverFeedback` (optional, ReactNode) - Text that appears when the user clicks the button. Use to provide feedback to the user.\n   * * `pressedPopoverFeedback` (optional, ReactNode) - Text that appears when the user clicks the button in pressed state. Defaults to `popoverFeedback`.\n   *\n   * * ### file-input\n   *\n   * * `id` (string) - The unique identifier of the button, used as detail in `onFilesChange`.\n   * * `text` (string) - The name of the menu button shown as a tooltip.\n   * * `accept` (optional, string) - Specifies the native file input `accept` attribute to describe the allow-list of file types.\n   * * `multiple` (optional, string) - Specifies the native file input `multiple` attribute to allow users entering more than one file.\n   *\n   * ### menu-dropdown\n   *\n   * * `id` (string) - The unique identifier of the button, used as detail in `onItemClick`.\n   * * `text` (string) - The name of the menu button shown as a tooltip.\n   * * `disabled` (optional, boolean) - The disabled state indication for the menu button.\n   * * `disabledReason` (optional, boolean) - Provides a reason why the button is disabled (only when `disabled` is `true`). If provided, the button becomes focusable.\n   * * `loading` (optional, boolean) - The loading state indication for the menu button.\n   * * `loadingText` (optional, string) - The loading text announced to screen readers.\n   * * `items` (ButtonDropdownProps.ItemOrGroup[]) - The array of dropdown items that belong to this menu.\n   *\n   * ### group\n   *\n   * * `text` (string) - The name of the group rendered as ARIA label for this group.\n   * * `items` ((ButtonGroupProps.IconButton | ButtonGroupProps.MenuDropdown)[]) - The array of items that belong to this group.\n   */\n  items: ReadonlyArray<ButtonGroupProps.ItemOrGroup>;\n  /**\n   * Called when the user clicks on an item, and the item is not disabled. The event detail object contains the id of the clicked item.\n   */\n  onItemClick?: NonCancelableEventHandler<ButtonGroupProps.ItemClickDetails>;\n  /**\n   * Called when the user uploads files. The event detail object contains the id and files from the file input item.\n   */\n  onFilesChange?: NonCancelableEventHandler<ButtonGroupProps.FilesChangeDetails>;\n  /**\n   * @awsuiSystem core\n   */\n  style?: ButtonGroupProps.Style;\n}\n\nexport interface InternalIconButton extends ButtonGroupProps.IconButton {\n  analyticsAction?: string;\n}\nexport interface InternalIconToggleButton extends ButtonGroupProps.IconToggleButton {\n  analyticsAction?: string;\n}\n\nexport interface IconButtonRuntime extends Omit<ButtonGroupProps.IconButton, 'iconSvg' | 'popoverFeedback'> {\n  iconSvg?: string;\n}\nexport interface IconToggleButtonRuntime\n  extends Omit<\n    ButtonGroupProps.IconToggleButton,\n    'iconSvg' | 'pressedIconSvg' | 'popoverFeedback' | 'pressedPopoverFeedback'\n  > {\n  iconSvg?: string;\n  pressedIconSvg?: string;\n}\nexport type ItemOrGroupRuntime = ItemRuntime | ButtonGroupProps.Group;\nexport type ItemRuntime =\n  | IconButtonRuntime\n  | IconToggleButtonRuntime\n  | ButtonGroupProps.IconFileInput\n  | ButtonGroupProps.MenuDropdown;\n\nexport type InternalItemOrGroup = InternalItem | ButtonGroupProps.Group;\nexport type InternalItem =\n  | InternalIconButton\n  | InternalIconToggleButton\n  | ButtonGroupProps.IconFileInput\n  | ButtonGroupProps.MenuDropdown;\n\nexport interface InternalButtonGroupProps\n  extends SomeRequired<ButtonGroupProps, 'dropdownExpandToViewport'>,\n    InternalBaseComponentProps {\n  style?: ButtonGroupProps.Style;\n  items: ReadonlyArray<InternalItemOrGroup>;\n}\n\nexport namespace ButtonGroupProps {\n  export type Variant = 'icon';\n\n  export type ItemOrGroup = Item | Group;\n  export type Item = IconButton | IconToggleButton | IconFileInput | MenuDropdown;\n\n  export interface IconButton {\n    type: 'icon-button';\n    id: string;\n    text: string;\n    disabled?: boolean;\n    disabledReason?: string;\n    loading?: boolean;\n    loadingText?: string;\n    iconName?: IconProps.Name;\n    iconAlt?: string;\n    iconUrl?: string;\n    iconSvg?: React.ReactNode;\n    popoverFeedback?: React.ReactNode;\n  }\n\n  export interface IconToggleButton {\n    type: 'icon-toggle-button';\n    id: string;\n    text: string;\n    pressed: boolean;\n    disabled?: boolean;\n    disabledReason?: string;\n    loading?: boolean;\n    loadingText?: string;\n    iconName?: IconProps.Name;\n    iconUrl?: string;\n    iconSvg?: React.ReactNode;\n    pressedIconName?: IconProps.Name;\n    pressedIconUrl?: string;\n    pressedIconSvg?: React.ReactNode;\n    popoverFeedback?: React.ReactNode;\n    pressedPopoverFeedback?: React.ReactNode;\n  }\n\n  export interface IconFileInput {\n    type: 'icon-file-input';\n    id: string;\n    text: string;\n    accept?: string;\n    multiple?: boolean;\n  }\n\n  export interface MenuDropdown {\n    type: 'menu-dropdown';\n    id: string;\n    text: string;\n    disabled?: boolean;\n    disabledReason?: string;\n    loading?: boolean;\n    loadingText?: string;\n    items: ReadonlyArray<ButtonDropdownProps.ItemOrGroup>;\n  }\n\n  export interface Group {\n    type: 'group';\n    text: string;\n    items: ReadonlyArray<ButtonGroupProps.Item>;\n  }\n\n  export interface ItemClickDetails {\n    id: string;\n    pressed?: boolean;\n    checked?: boolean;\n  }\n\n  export interface FilesChangeDetails {\n    id: string;\n    files: File[];\n  }\n\n  export interface Ref {\n    /**\n     * Focuses button group item by id.\n     */\n    focus(itemId: string): void;\n  }\n  export interface Style {\n    root?: {\n      background?: string;\n      borderColor?: string;\n      borderRadius?: string;\n      borderWidth?: string;\n      paddingBlock?: string;\n      paddingInline?: string;\n      boxShadow?: string;\n      focusRing?: {\n        borderColor?: string;\n        borderRadius?: string;\n        borderWidth?: string;\n      };\n    };\n    item?: {\n      color?: {\n        active?: string;\n        default?: string;\n        disabled?: string;\n        hover?: string;\n      };\n      boxShadow?: {\n        active?: string;\n        default?: string;\n        disabled?: string;\n        hover?: string;\n      };\n      focusRing?: {\n        borderColor?: string;\n        borderRadius?: string;\n        borderWidth?: string;\n      };\n    };\n  }\n}\n"]}

package/checkbox/index.js

@@ -1,18 +1,16 @@
 // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 // SPDX-License-Identifier: Apache-2.0
+'use client';
 import React from 'react';
-
-import CoreComponent from './internal-do-not-use-core';
+import useBaseComponent from '../internal/hooks/use-base-component';
 import { applyDisplayName } from '../internal/utils/apply-display-name';
-import { validateProps } from '@cloudscape-design/component-toolkit/internal';
-
-
-
-const Checkbox = React.forwardRef((props, ref) => {
-    validateProps('Checkbox', props, ["nativeInputAttributes","style"], {}, 'console');
-    return React.createElement(CoreComponent, {ref,...props});
+import InternalCheckbox from './internal';
+const Checkbox = React.forwardRef(({ ...props }, ref) => {
+    const baseComponentProps = useBaseComponent('Checkbox', {
+        props: { readOnly: props.readOnly },
+    });
+    return React.createElement(InternalCheckbox, { ...props, ...baseComponentProps, ref: ref, __injectAnalyticsComponentMetadata: true });
 });
-
-
 applyDisplayName(Checkbox, 'Checkbox');
 export default Checkbox;
+//# sourceMappingURL=index.js.map

package/checkbox/interfaces.d.ts

@@ -3,7 +3,7 @@ import { NonCancelableEventHandler } from '../internal/events';
 /**
  * @awsuiSystem core
  */
-
+import { NativeAttributes } from '../internal/utils/with-native-attributes';
 import { BaseCheckboxProps } from './base-checkbox';
 export interface CheckboxProps extends BaseCheckboxProps {
   /**
@@ -28,7 +28,7 @@ export interface CheckboxProps extends BaseCheckboxProps {
   /**
    * @awsuiSystem core
    */
-
+  style?: CheckboxProps.Style;
   /**
    * Attributes to add to the native `input` element.
    * Some attributes will be automatically combined with internal attribute values:
@@ -39,6 +39,7 @@ export interface CheckboxProps extends BaseCheckboxProps {
    *
    * @awsuiSystem core
    */
+  nativeInputAttributes?: NativeAttributes<React.InputHTMLAttributes<HTMLInputElement>>;
 }
 export declare namespace CheckboxProps {
   interface Ref {