@cloudscape-design/components 3.0.1156 → 3.0.1157

package/link/interfaces.d.ts

@@ -4,7 +4,7 @@ import { BaseNavigationDetail, CancelableEventHandler, ClickDetail as _ClickDeta
 /**
  * @awsuiSystem core
  */
-
+import { NativeAttributes } from '../internal/utils/with-native-attributes';
 export interface LinkProps extends BaseComponentProps {
   /**
    * Determines the visual style of the link as follows:
@@ -93,7 +93,7 @@ export interface LinkProps extends BaseComponentProps {
   /**
    * @awsuiSystem core
    */
-
+  style?: LinkProps.Style;
   /**
    * Attributes to add to the native element.
    * Some attributes will be automatically combined with internal attribute values:
@@ -104,6 +104,7 @@ export interface LinkProps extends BaseComponentProps {
    *
    * @awsuiSystem core
    */
+  nativeAttributes?: NativeAttributes<React.AnchorHTMLAttributes<HTMLAnchorElement>>;
 }
 export declare namespace LinkProps {
   type Variant = 'primary' | 'secondary' | 'info' | 'awsui-value-large';

package/navigable-group/index.js

@@ -1,6 +1,21 @@
 // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 // SPDX-License-Identifier: Apache-2.0
-
-export default function NavigableGroup(props) {
-    throw new Error('The component NavigableGroup is not supported in this package');
-}
+'use client';
+import React from 'react';
+import { getBaseProps } from '../internal/base-component';
+import useBaseComponent from '../internal/hooks/use-base-component';
+import { applyDisplayName } from '../internal/utils/apply-display-name';
+import { getExternalProps } from '../internal/utils/external-props';
+import InternalNavigableGroup from './internal';
+const NavigableGroup = React.forwardRef(({ ...rest }, ref) => {
+    const baseProps = getBaseProps(rest);
+    const baseComponentProps = useBaseComponent('NavigableGroup');
+    const externalProps = getExternalProps(rest);
+    return React.createElement(InternalNavigableGroup, { ...baseProps, ...baseComponentProps, ...externalProps, ref: ref });
+});
+applyDisplayName(NavigableGroup, 'NavigableGroup');
+/**
+ * @awsuiSystem core
+ */
+export default NavigableGroup;
+//# sourceMappingURL=index.js.map

package/package.json

@@ -72,6 +72,7 @@
     "./help-panel": "./help-panel/index.js",
     "./hotspot": "./hotspot/index.js",
     "./icon": "./icon/index.js",
+    "./icon-provider": "./icon-provider/index.js",
     "./input": "./input/index.js",
     "./key-value-pairs": "./key-value-pairs/index.js",
     "./line-chart": "./line-chart/index.js",
@@ -81,12 +82,14 @@
     "./mixed-line-bar-chart": "./mixed-line-bar-chart/index.js",
     "./modal": "./modal/index.js",
     "./multiselect": "./multiselect/index.js",
+    "./navigable-group": "./navigable-group/index.js",
     "./pagination": "./pagination/index.js",
     "./pie-chart": "./pie-chart/index.js",
     "./popover": "./popover/index.js",
     "./progress-bar": "./progress-bar/index.js",
     "./prompt-input": "./prompt-input/index.js",
     "./property-filter": "./property-filter/index.js",
+    "./radio-button": "./radio-button/index.js",
     "./radio-group": "./radio-group/index.js",
     "./s3-resource-selector": "./s3-resource-selector/index.js",
     "./segmented-control": "./segmented-control/index.js",
@@ -153,7 +156,7 @@
     "./internal/base-component/index.js",
     "./internal/base-component/styles.css.js"
   ],
-  "version": "3.0.1156",
+  "version": "3.0.1157",
   "repository": {
     "type": "git",
     "url": "https://github.com/cloudscape-design/components.git"

package/progress-bar/index.d.ts

@@ -13,5 +13,6 @@ export default function ProgressBar({
   additionalInfo,
   resultText,
   onResultButtonClick,
+  style,
   ...rest
 }: ProgressBarProps): JSX.Element;

package/progress-bar/index.js

@@ -1,18 +1,56 @@
 // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 // SPDX-License-Identifier: Apache-2.0
-import React from 'react';
-
-import CoreComponent from './internal-do-not-use-core';
+'use client';
+import React, { useEffect, useMemo, useState } from 'react';
+import clsx from 'clsx';
+import { useUniqueId, warnOnce } from '@cloudscape-design/component-toolkit/internal';
+import { getBaseProps } from '../internal/base-component';
+import { fireNonCancelableEvent } from '../internal/events';
+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 ProgressBar = (props) => {
-    validateProps('ProgressBar', props, ["style"], {}, 'console');
-    return React.createElement(CoreComponent, props);
-};
-
-
+import { joinStrings } from '../internal/utils/strings';
+import { throttle } from '../internal/utils/throttle';
+import InternalLiveRegion from '../live-region/internal';
+import { Progress, ResultState, SmallText } from './internal';
+import styles from './styles.css.js';
+const ASSERTION_FREQUENCY = 5000; // interval in ms between progress announcements
+export default function ProgressBar({ value = 0, status = 'in-progress', variant = 'standalone', resultButtonText, label, ariaLabel, ariaLabelledby, ariaDescribedby, description, additionalInfo, resultText, onResultButtonClick, style, ...rest }) {
+    const { __internalRootRef } = useBaseComponent('ProgressBar', {
+        props: { variant },
+    });
+    const baseProps = getBaseProps(rest);
+    const generatedName = useUniqueId('awsui-progress-bar-');
+    const labelId = `${generatedName}-label`;
+    const isInFlash = variant === 'flash';
+    const isInProgressState = status === 'in-progress';
+    const descriptionId = useUniqueId('progressbar-description-');
+    const additionalInfoId = useUniqueId('progressbar-additional-info-');
+    const [announcedValue, setAnnouncedValue] = useState('');
+    const throttledAssertion = useMemo(() => {
+        return throttle((value) => {
+            setAnnouncedValue(`${value}%`);
+        }, ASSERTION_FREQUENCY);
+    }, []);
+    useEffect(() => {
+        throttledAssertion(value);
+    }, [throttledAssertion, value]);
+    if (isInFlash && resultButtonText) {
+        warnOnce('ProgressBar', 'The `resultButtonText` is ignored if you set `variant="flash"`, and the result button is not displayed. Use the `buttonText` property and the `onButtonClick` event listener of the flashbar item in which the progress bar component is embedded.');
+    }
+    return (React.createElement("div", { ...baseProps, className: clsx(baseProps.className, styles.root, variant && styles[variant]), ref: __internalRootRef },
+        React.createElement("div", { className: isInFlash ? styles['flash-container'] : undefined },
+            React.createElement("div", { className: clsx(styles['word-wrap'], styles[`label-${variant}`]), id: labelId }, label),
+            description && (React.createElement(SmallText, { color: isInFlash ? 'inherit' : undefined, id: descriptionId }, description)),
+            React.createElement("div", null, isInProgressState ? (React.createElement(React.Fragment, null,
+                React.createElement(Progress, { value: value, ariaLabel: ariaLabel, ariaLabelledby: joinStrings(labelId, ariaLabelledby), ariaDescribedby: joinStrings(description ? descriptionId : undefined, additionalInfo ? additionalInfoId : undefined, ariaDescribedby), isInFlash: isInFlash, style: style }),
+                React.createElement(InternalLiveRegion, { hidden: true, tagName: "span", delay: 0 },
+                    label,
+                    label ? ': ' : null,
+                    announcedValue))) : (React.createElement(InternalLiveRegion, { hidden: false, tagName: "span", delay: 0 },
+                React.createElement(ResultState, { resultText: resultText, isInFlash: isInFlash, resultButtonText: resultButtonText, status: status, onClick: () => {
+                        fireNonCancelableEvent(onResultButtonClick);
+                    } }))))),
+        additionalInfo && (React.createElement(SmallText, { className: styles['additional-info'], color: isInFlash ? 'inherit' : undefined, id: additionalInfoId }, additionalInfo))));
+}
 applyDisplayName(ProgressBar, 'ProgressBar');
-export default ProgressBar;
+//# sourceMappingURL=index.js.map

package/progress-bar/interfaces.d.ts

@@ -71,6 +71,7 @@ export interface ProgressBarProps extends BaseComponentProps {
   /**
    * @awsuiSystem core
    */
+  style?: ProgressBarProps.Style;
 }
 export declare namespace ProgressBarProps {
   type Status = 'in-progress' | 'success' | 'error';

package/prompt-input/index.js

@@ -1,18 +1,26 @@
 // 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 PromptInput = React.forwardRef((props, ref) => {
-    validateProps('PromptInput', props, ["nativeTextareaAttributes","style","customPrimaryAction"], {}, 'console');
-    return React.createElement(CoreComponent, {ref,...props});
+import InternalPromptInput from './internal';
+const PromptInput = React.forwardRef(({ autoComplete, autoFocus, disableBrowserAutocorrect, disableActionButton, spellcheck, readOnly, actionButtonIconName, minRows = 1, maxRows = 3, ...props }, ref) => {
+    const baseComponentProps = useBaseComponent('PromptInput', {
+        props: {
+            readOnly,
+            autoComplete,
+            autoFocus,
+            disableBrowserAutocorrect,
+            disableActionButton,
+            spellcheck,
+            actionButtonIconName,
+            minRows,
+            maxRows,
+        },
+    });
+    return (React.createElement(InternalPromptInput, { readOnly: readOnly, autoComplete: autoComplete, autoFocus: autoFocus, disableBrowserAutocorrect: disableBrowserAutocorrect, disableActionButton: disableActionButton, spellcheck: spellcheck, actionButtonIconName: actionButtonIconName, minRows: minRows, maxRows: maxRows, ...props, ...baseComponentProps, ref: ref }));
 });
-
-
 applyDisplayName(PromptInput, 'PromptInput');
 export default PromptInput;
+//# sourceMappingURL=index.js.map

package/prompt-input/interfaces.d.ts

@@ -6,7 +6,7 @@ import { BaseKeyDetail, NonCancelableEventHandler } from '../internal/events';
 /**
  * @awsuiSystem core
  */
-
+import { NativeAttributes } from '../internal/utils/with-native-attributes';
 export interface PromptInputProps extends Omit<BaseInputProps, 'nativeInputAttributes'>, InputKeyEvents, InputAutoCorrect, InputAutoComplete, InputSpellcheck, BaseComponentProps, FormFieldValidationControlProps {
   /**
    * Called whenever a user clicks the action button or presses the "Enter" key.
@@ -75,7 +75,7 @@ export interface PromptInputProps extends Omit<BaseInputProps, 'nativeInputAttri
    *
    * @awsuiSystem core
    */
-
+  customPrimaryAction?: React.ReactNode;
   /**
    * Use this slot to add secondary actions to the prompt input.
    */
@@ -102,10 +102,11 @@ export interface PromptInputProps extends Omit<BaseInputProps, 'nativeInputAttri
    *
    * @awsuiSystem core
    */
-
+  nativeTextareaAttributes?: NativeAttributes<React.TextareaHTMLAttributes<HTMLTextAreaElement>>;
   /**
    * @awsuiSystem core
    */
+  style?: PromptInputProps.Style;
 }
 export declare namespace PromptInputProps {
   type KeyDetail = BaseKeyDetail;

package/radio-button/index.js

@@ -1,6 +1,21 @@
 // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 // SPDX-License-Identifier: Apache-2.0
-
-export default function RadioButton(props) {
-    throw new Error('The component RadioButton is not supported in this package');
-}
+'use client';
+import React from 'react';
+import clsx from 'clsx';
+import InternalRadioButton from '../internal/components/radio-button';
+import useBaseComponent from '../internal/hooks/use-base-component';
+import { applyDisplayName } from '../internal/utils/apply-display-name';
+import styles from './styles.css.js';
+const RadioButton = React.forwardRef((props, ref) => {
+    const baseComponentProps = useBaseComponent('RadioButton', {
+        props: { readOnly: Boolean(props.readOnly), disabled: Boolean(props.disabled) },
+    });
+    return (React.createElement(InternalRadioButton, { ...props, ...baseComponentProps, className: clsx(props.className, styles['radio-button']), ref: ref }));
+});
+applyDisplayName(RadioButton, 'RadioButton');
+/**
+ * @awsuiSystem core
+ */
+export default RadioButton;
+//# sourceMappingURL=index.js.map

package/radio-group/index.js

@@ -1,18 +1,27 @@
 // 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 RadioGroup = React.forwardRef((props, ref) => {
-    validateProps('RadioGroup', props, ["style"], {}, 'console');
-    return React.createElement(CoreComponent, {ref,...props});
+import InternalRadioGroup from './internal';
+import analyticsSelectors from './analytics-metadata/styles.css.js';
+const RadioGroup = React.forwardRef(({ direction = 'vertical', ...rest }, ref) => {
+    const baseComponentProps = useBaseComponent('RadioGroup', {
+        props: { readOnly: rest.readOnly, direction: direction !== null && direction !== void 0 ? direction : 'vertical' },
+    });
+    return (React.createElement(InternalRadioGroup, { ref: ref, direction: direction, ...rest, ...baseComponentProps, ...getAnalyticsMetadataAttribute({
+            component: {
+                name: 'awsui.RadioGroup',
+                label: { root: 'self' },
+                properties: {
+                    value: `${rest.value}`,
+                    valueLabel: `.${analyticsSelectors.selected}`,
+                },
+            },
+        }) }));
 });
-
-
 applyDisplayName(RadioGroup, 'RadioGroup');
 export default RadioGroup;
+//# sourceMappingURL=index.js.map

package/radio-group/interfaces.d.ts

@@ -54,7 +54,7 @@ export interface RadioGroupProps extends BaseComponentProps, FormFieldControlPro
   /**
    * @awsuiSystem core
    */
-
+  style?: RadioGroupProps.Style;
   /**
    * Defines the direction in which the radio buttons are laid out.
    */

package/segmented-control/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 useBaseComponent from '../internal/hooks/use-base-component';
 import { applyDisplayName } from '../internal/utils/apply-display-name';
-import { validateProps } from '@cloudscape-design/component-toolkit/internal';
-
-
-
-const SegmentedControl = (props) => {
-    validateProps('SegmentedControl', props, ["style"], {}, 'console');
-    return React.createElement(CoreComponent, props);
-};
-
-
+import InternalSegmentedControl from './internal';
+export default function SegmentedControl(props) {
+    var _a;
+    const baseComponentProps = useBaseComponent('SegmentedControl', {
+        props: {},
+        metadata: {
+            hasDisabledReasons: ((_a = props.options) !== null && _a !== void 0 ? _a : []).some(option => Boolean(option.disabledReason)),
+        },
+    });
+    return React.createElement(InternalSegmentedControl, { ...props, ...baseComponentProps });
+}
 applyDisplayName(SegmentedControl, 'SegmentedControl');
-export default SegmentedControl;
+//# sourceMappingURL=index.js.map

package/segmented-control/interfaces.d.ts

@@ -39,6 +39,7 @@ export interface SegmentedControlProps extends BaseComponentProps {
   /**
    * @awsuiSystem core
    */
+  style?: SegmentedControlProps.Style;
 }
 export declare namespace SegmentedControlProps {
   interface Option {

package/select/interfaces.d.ts

@@ -112,7 +112,7 @@ export interface BaseSelectProps extends BaseDropdownHostProps, BaseComponentPro
    * 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).
    *

package/select/interfaces.js.map

@@ -1 +1 @@
-{"version":3,"file":"interfaces.js","sourceRoot":"","sources":["../../../src/select/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 { 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/interfaces';\nimport { OptionDefinition, OptionGroup as OptionGroupDefinition } from '../internal/components/option/interfaces';\nimport { FormFieldValidationControlProps } from '../internal/context/form-field-context';\nimport { NonCancelableEventHandler } from '../internal/events';\n\nexport interface BaseSelectProps\n  extends BaseDropdownHostProps,\n    BaseComponentProps,\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   *\n   * #### OptionGroup\n   * - `value` (string) - Used to locate option group in test utils.\n   * - `options` (Option[]) - (Optional) The options under this group.\n   *\n   * #### Shared Option and OptionGroup properties\n   * - `label` (string) - (Optional) Option or group text displayed to the user.\n   * - `lang` (string) - (Optional) The language of the option or group, provided as a BCP 47 language tag.\n   * - `description` (string) - (Optional) Further information about the option or group that appears below the label.\n   * - `disabled` (boolean) - (Optional) Determines whether the option or group is disabled.\n   * - `disabledReason` (string) - (Optional) Displays tooltip near the item when disabled. Use to provide additional context.\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 or group.\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 or group.\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   * 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?: SelectProps.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   * Determines whether the whole select component is disabled.\n   */\n  disabled?: boolean;\n  /**\n   * Specifies the placeholder to display in the filtering input if filtering is enabled.\n   */\n  filteringPlaceholder?: string;\n\n  /**\n   * Specifies the text to display with the number of matches at the bottom of the dropdown menu while filtering.\n   */\n  filteringResultsText?: (matchesCount: number, totalCount: number) => string;\n  /**\n   * Adds an `aria-label` on the built-in filtering input if filtering is enabled.\n   */\n  filteringAriaLabel?: string;\n  /**\n   * Adds an `aria-label` to the clear button inside the search input.\n   * @i18n\n   */\n  filteringClearAriaLabel?: string;\n  /**\n   * @deprecated Has no effect.\n   */\n  name?: string;\n  /**\n   * Specifies the hint text that's displayed in the field when no option has been selected.\n   */\n  placeholder?: string;\n  /**\n   * Specifies the ID for the trigger component. It uses an automatically generated ID by default.\n   */\n  controlId?: string;\n  /**\n   * Adds `aria-required` to the native input element.\n   */\n  ariaRequired?: boolean;\n  /**\n   * Adds `aria-label` to the select element.\n   * Use this if you don't have a visible label for this control.\n   */\n  ariaLabel?: string;\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/select/?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/select/?tabId=usage#accessibility-guidelines).\n   */\n  renderHighlightedAriaLive?: SelectProps.ContainingOptionAndGroupString;\n  /**\n   * Displayed for `filteringType=\"auto\"` when there are no matches for the filtering.\n   */\n  noMatch?: React.ReactNode;\n  /**\n   * Called when input focus is removed from the UI control.\n   */\n  onBlur?: NonCancelableEventHandler;\n  /**\n   * Called when input focus is set onto the UI control.\n   */\n  onFocus?: NonCancelableEventHandler;\n\n  /**\n   * Specifies if the control is read-only, which prevents the\n   * user from both modifying the value and opening the dropdown. A read-only control is still focusable.\n   */\n  readOnly?: boolean;\n}\n\nexport interface SelectProps extends BaseSelectProps {\n  /**\n   * Adds a small label inline with the input for saving vertical space in the UI.\n   * For use with collection select filters only.\n   */\n  inlineLabelText?: string;\n  /**\n   * Adds `aria-labelledby` to the component. If you're using this component within a form field,\n   * don't set this property because the form field component automatically sets it.\n   *\n   * Use this property if the component isn't using `inlineLabelText` and isn't surrounded by a form field, or you want to override the value\n   * automatically set by the form field (for example, if you have two components within a single form field).\n   *\n   * To use it correctly, define an ID for the element you want to use as label and set the property to that ID.\n   */\n  ariaLabelledby?: string;\n  /**\n   * Defines the variant of the trigger. You can use a simple label or the entire option (`label | option`)\n   */\n  triggerVariant?: SelectProps.TriggerVariant;\n  /**\n   * Specifies the currently selected option.\n   * If you want to clear the selection, use `null`.\n   */\n  selectedOption: SelectProps.Option | null;\n  /**\n   * Called when the user selects an option.\n   * The event `detail` contains the current `selectedOption`.\n   */\n  onChange?: NonCancelableEventHandler<SelectProps.ChangeDetail>;\n\n  /**\n   * Automatically focuses the trigger when component is mounted.\n   */\n  autoFocus?: boolean;\n}\n\nexport namespace SelectProps {\n  export type FilteringType = OptionsFilteringType;\n  export type TriggerVariant = 'label' | 'option';\n\n  export type Option = OptionDefinition;\n  export type OptionGroup = OptionGroupDefinition;\n  export type Options = ReadonlyArray<Option | OptionGroup>;\n\n  export type LoadItemsDetail = OptionsLoadItemsDetail;\n\n  export interface ChangeDetail {\n    selectedOption: Option;\n  }\n\n  export interface ContainingOptionAndGroupString {\n    (option: Option, group?: OptionGroup): string;\n  }\n\n  export interface Ref {\n    /**\n     * Sets focus on the element without opening the dropdown or showing a visual focus indicator.\n     */\n    focus(): void;\n  }\n}\n"]}
+{"version":3,"file":"interfaces.js","sourceRoot":"","sources":["../../../src/select/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 { 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/interfaces';\nimport { OptionDefinition, OptionGroup as OptionGroupDefinition } from '../internal/components/option/interfaces';\nimport { FormFieldValidationControlProps } from '../internal/context/form-field-context';\nimport { NonCancelableEventHandler } from '../internal/events';\n\nexport interface BaseSelectProps\n  extends BaseDropdownHostProps,\n    BaseComponentProps,\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   *\n   * #### OptionGroup\n   * - `value` (string) - Used to locate option group in test utils.\n   * - `options` (Option[]) - (Optional) The options under this group.\n   *\n   * #### Shared Option and OptionGroup properties\n   * - `label` (string) - (Optional) Option or group text displayed to the user.\n   * - `lang` (string) - (Optional) The language of the option or group, provided as a BCP 47 language tag.\n   * - `description` (string) - (Optional) Further information about the option or group that appears below the label.\n   * - `disabled` (boolean) - (Optional) Determines whether the option or group is disabled.\n   * - `disabledReason` (string) - (Optional) Displays tooltip near the item when disabled. Use to provide additional context.\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 or group.\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 or group.\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   * 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?: SelectProps.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   * Determines whether the whole select component is disabled.\n   */\n  disabled?: boolean;\n  /**\n   * Specifies the placeholder to display in the filtering input if filtering is enabled.\n   */\n  filteringPlaceholder?: string;\n\n  /**\n   * Specifies the text to display with the number of matches at the bottom of the dropdown menu while filtering.\n   */\n  filteringResultsText?: (matchesCount: number, totalCount: number) => string;\n  /**\n   * Adds an `aria-label` on the built-in filtering input if filtering is enabled.\n   */\n  filteringAriaLabel?: string;\n  /**\n   * Adds an `aria-label` to the clear button inside the search input.\n   * @i18n\n   */\n  filteringClearAriaLabel?: string;\n  /**\n   * @deprecated Has no effect.\n   */\n  name?: string;\n  /**\n   * Specifies the hint text that's displayed in the field when no option has been selected.\n   */\n  placeholder?: string;\n  /**\n   * Specifies the ID for the trigger component. It uses an automatically generated ID by default.\n   */\n  controlId?: string;\n  /**\n   * Adds `aria-required` to the native input element.\n   */\n  ariaRequired?: boolean;\n  /**\n   * Adds `aria-label` to the select element.\n   * Use this if you don't have a visible label for this control.\n   */\n  ariaLabel?: string;\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/select/?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/select/?tabId=usage#accessibility-guidelines).\n   */\n  renderHighlightedAriaLive?: SelectProps.ContainingOptionAndGroupString;\n  /**\n   * Displayed for `filteringType=\"auto\"` when there are no matches for the filtering.\n   */\n  noMatch?: React.ReactNode;\n  /**\n   * Called when input focus is removed from the UI control.\n   */\n  onBlur?: NonCancelableEventHandler;\n  /**\n   * Called when input focus is set onto the UI control.\n   */\n  onFocus?: NonCancelableEventHandler;\n\n  /**\n   * Specifies if the control is read-only, which prevents the\n   * user from both modifying the value and opening the dropdown. A read-only control is still focusable.\n   */\n  readOnly?: boolean;\n}\n\nexport interface SelectProps extends BaseSelectProps {\n  /**\n   * Adds a small label inline with the input for saving vertical space in the UI.\n   * For use with collection select filters only.\n   */\n  inlineLabelText?: string;\n  /**\n   * Adds `aria-labelledby` to the component. If you're using this component within a form field,\n   * don't set this property because the form field component automatically sets it.\n   *\n   * Use this property if the component isn't using `inlineLabelText` and isn't surrounded by a form field, or you want to override the value\n   * automatically set by the form field (for example, if you have two components within a single form field).\n   *\n   * To use it correctly, define an ID for the element you want to use as label and set the property to that ID.\n   */\n  ariaLabelledby?: string;\n  /**\n   * Defines the variant of the trigger. You can use a simple label or the entire option (`label | option`)\n   */\n  triggerVariant?: SelectProps.TriggerVariant;\n  /**\n   * Specifies the currently selected option.\n   * If you want to clear the selection, use `null`.\n   */\n  selectedOption: SelectProps.Option | null;\n  /**\n   * Called when the user selects an option.\n   * The event `detail` contains the current `selectedOption`.\n   */\n  onChange?: NonCancelableEventHandler<SelectProps.ChangeDetail>;\n\n  /**\n   * Automatically focuses the trigger when component is mounted.\n   */\n  autoFocus?: boolean;\n}\n\nexport namespace SelectProps {\n  export type FilteringType = OptionsFilteringType;\n  export type TriggerVariant = 'label' | 'option';\n\n  export type Option = OptionDefinition;\n  export type OptionGroup = OptionGroupDefinition;\n  export type Options = ReadonlyArray<Option | OptionGroup>;\n\n  export type LoadItemsDetail = OptionsLoadItemsDetail;\n\n  export interface ChangeDetail {\n    selectedOption: Option;\n  }\n\n  export interface ContainingOptionAndGroupString {\n    (option: Option, group?: OptionGroup): string;\n  }\n\n  export interface Ref {\n    /**\n     * Sets focus on the element without opening the dropdown or showing a visual focus indicator.\n     */\n    focus(): void;\n  }\n}\n"]}

package/space-between/index.js

@@ -1,18 +1,15 @@
 // 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 SpaceBetween = (props) => {
-    validateProps('SpaceBetween', props, ["nativeAttributes"], {}, 'console');
-    return React.createElement(CoreComponent, props);
-};
-
-
+import InternalSpaceBetween from './internal';
+export default function SpaceBetween({ direction = 'vertical', ...props }) {
+    const baseComponentProps = useBaseComponent('SpaceBetween', {
+        props: { alignItems: props.alignItems, direction, size: props.size },
+    });
+    return React.createElement(InternalSpaceBetween, { direction: direction, ...props, ...baseComponentProps });
+}
 applyDisplayName(SpaceBetween, 'SpaceBetween');
-export default SpaceBetween;
+//# sourceMappingURL=index.js.map

package/space-between/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 SpaceBetweenProps extends BaseComponentProps {
   /**
    * Defines the direction in which the content is laid out.
@@ -30,6 +30,7 @@ export interface SpaceBetweenProps extends BaseComponentProps {
    *
    * @awsuiSystem core
    */
+  nativeAttributes?: NativeAttributes<React.HTMLAttributes<HTMLDivElement>>;
 }
 export declare namespace SpaceBetweenProps {
   type Direction = 'vertical' | 'horizontal';

package/spinner/index.js

@@ -1,18 +1,15 @@
 // 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 Spinner = (props) => {
-    validateProps('Spinner', props, ["nativeAttributes"], {}, 'console');
-    return React.createElement(CoreComponent, props);
-};
-
-
+import InternalSpinner from './internal';
+export default function Spinner({ size = 'normal', variant = 'normal', ...props }) {
+    const baseComponentProps = useBaseComponent('Spinner', {
+        props: { size, variant },
+    });
+    return React.createElement(InternalSpinner, { size: size, variant: variant, ...props, ...baseComponentProps });
+}
 applyDisplayName(Spinner, 'Spinner');
-export default Spinner;
+//# sourceMappingURL=index.js.map

package/spinner/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 SpinnerProps extends BaseComponentProps {
   /**
    * Specifies the size of the spinner.
@@ -22,6 +22,7 @@ export interface SpinnerProps extends BaseComponentProps {
    *
    * @awsuiSystem core
    */
+  nativeAttributes?: NativeAttributes<React.HTMLAttributes<HTMLElement>>;
 }
 export declare namespace SpinnerProps {
   type Size = 'normal' | 'big' | 'large';

package/status-indicator/index.js

@@ -1,18 +1,15 @@
 // 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 StatusIndicator = (props) => {
-    validateProps('StatusIndicator', props, ["nativeAttributes"], {}, 'console');
-    return React.createElement(CoreComponent, props);
-};
-
-
+import InternalStatusIndicator from './internal';
+export default function StatusIndicator({ type = 'success', wrapText = true, ...props }) {
+    const baseComponentProps = useBaseComponent('StatusIndicator', {
+        props: { colorOverride: props.colorOverride, type, wrapText },
+    });
+    return React.createElement(InternalStatusIndicator, { type: type, wrapText: wrapText, ...props, ...baseComponentProps });
+}
 applyDisplayName(StatusIndicator, 'StatusIndicator');
-export default StatusIndicator;
+//# sourceMappingURL=index.js.map

package/status-indicator/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 StatusIndicatorProps extends BaseComponentProps {
   /**
    * Specifies the status type.
@@ -36,6 +36,7 @@ export interface StatusIndicatorProps extends BaseComponentProps {
    *
    * @awsuiSystem core
    */
+  nativeAttributes?: NativeAttributes<React.HTMLAttributes<HTMLElement>>;
 }
 export declare namespace StatusIndicatorProps {
   type Type = 'error' | 'warning' | 'success' | 'info' | 'stopped' | 'pending' | 'in-progress' | 'loading' | 'not-started';

package/steps/index.js

@@ -1,18 +1,18 @@
 // 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 Steps = (props) => {
-    validateProps('Steps', props, ["orientation","renderStep"], {}, 'console');
-    return React.createElement(CoreComponent, props);
+import { getExternalProps } from '../internal/utils/external-props';
+import InternalSteps from './internal';
+const Steps = ({ steps, ...props }) => {
+    const baseProps = getBaseProps(props);
+    const baseComponentProps = useBaseComponent('Steps');
+    const externalProps = getExternalProps(props);
+    return React.createElement(InternalSteps, { ...baseProps, ...baseComponentProps, ...externalProps, steps: steps });
 };
-
-
 applyDisplayName(Steps, 'Steps');
 export default Steps;
+//# sourceMappingURL=index.js.map

package/steps/interfaces.d.ts

@@ -17,7 +17,7 @@ export interface StepsProps extends BaseComponentProps {
    *
    * @awsuiSystem core
    */
-
+  orientation?: StepsProps.Orientation;
   /**
    * Render a step. This overrides the default icon, header, and details provided by the component.
    * The function is called for each step and should return an object with the following keys:
@@ -27,7 +27,11 @@ export interface StepsProps extends BaseComponentProps {
    *
    * @awsuiSystem core
    */
-
+  renderStep?: (step: StepsProps.Step) => {
+    header: React.ReactNode;
+    details?: React.ReactNode;
+    icon?: React.ReactNode;
+  };
   /**
    * Provides an `aria-label` to the progress steps container.
    * Don't use `ariaLabel` and `ariaLabelledby` at the same time.

package/table/header-cell/index.d.ts

@@ -31,7 +31,7 @@ export interface TableHeaderCellProps<ItemType> {
   isExpandable?: boolean;
   hasDynamicContent?: boolean;
   variant: TableProps.Variant;
-  tableVariant?: string;
+  tableVariant?: TableProps.Variant;
 }
 export declare function TableHeaderCell<ItemType>({
   tabIndex,