@cloudscape-design/components 3.0.790 → 3.0.792

package/modal/index.js

@@ -2,14 +2,34 @@ import { __rest } from "tslib";
 // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 // SPDX-License-Identifier: Apache-2.0
 import React from 'react';
+import { AnalyticsFunnel, AnalyticsFunnelStep, AnalyticsFunnelSubStep, } from '../internal/analytics/components/analytics-funnel';
+import { useFunnel } from '../internal/analytics/hooks/use-funnel';
+import { getAnalyticsMetadataProps } from '../internal/base-component';
 import useBaseComponent from '../internal/hooks/use-base-component';
 import { applyDisplayName } from '../internal/utils/apply-display-name';
-import InternalModal from './internal';
+import InternalModal, { InternalModalAsFunnel } from './internal';
+import styles from './styles.css.js';
+function ModalWithAnalyticsFunnel(_a) {
+    var { analyticsMetadata, baseComponentProps, size = 'medium' } = _a, props = __rest(_a, ["analyticsMetadata", "baseComponentProps", "size"]);
+    return (React.createElement(AnalyticsFunnel, { mounted: props.visible, funnelIdentifier: analyticsMetadata === null || analyticsMetadata === void 0 ? void 0 : analyticsMetadata.instanceIdentifier, funnelFlowType: analyticsMetadata === null || analyticsMetadata === void 0 ? void 0 : analyticsMetadata.flowType, funnelErrorContext: analyticsMetadata === null || analyticsMetadata === void 0 ? void 0 : analyticsMetadata.errorContext, funnelResourceType: analyticsMetadata === null || analyticsMetadata === void 0 ? void 0 : analyticsMetadata.resourceType, funnelType: "modal", optionalStepNumbers: [], totalFunnelSteps: 1, funnelNameSelectors: [`.${styles['header--text']}`] },
+        React.createElement(AnalyticsFunnelStep, { mounted: props.visible, stepIdentifier: analyticsMetadata === null || analyticsMetadata === void 0 ? void 0 : analyticsMetadata.instanceIdentifier, stepErrorContext: analyticsMetadata === null || analyticsMetadata === void 0 ? void 0 : analyticsMetadata.errorContext, stepNumber: 1 },
+            React.createElement(AnalyticsFunnelSubStep, { subStepIdentifier: analyticsMetadata === null || analyticsMetadata === void 0 ? void 0 : analyticsMetadata.instanceIdentifier, subStepErrorContext: analyticsMetadata === null || analyticsMetadata === void 0 ? void 0 : analyticsMetadata.errorContext },
+                React.createElement(InternalModalAsFunnel, Object.assign({ size: size }, props, baseComponentProps, { __injectAnalyticsComponentMetadata: true }))))));
+}
 export default function Modal(_a) {
     var { size = 'medium' } = _a, props = __rest(_a, ["size"]);
+    const { isInFunnel } = useFunnel();
+    const analyticsMetadata = getAnalyticsMetadataProps(props);
     const baseComponentProps = useBaseComponent('Modal', {
         props: { size, disableContentPaddings: props.disableContentPaddings },
-    });
+        metadata: {
+            hasResourceType: Boolean(analyticsMetadata === null || analyticsMetadata === void 0 ? void 0 : analyticsMetadata.resourceType),
+            hasInstanceIdentifier: Boolean(analyticsMetadata === null || analyticsMetadata === void 0 ? void 0 : analyticsMetadata.instanceIdentifier),
+        },
+    }, analyticsMetadata);
+    if (!isInFunnel) {
+        return (React.createElement(ModalWithAnalyticsFunnel, Object.assign({ analyticsMetadata: analyticsMetadata, baseComponentProps: baseComponentProps, size: size }, props)));
+    }
     return React.createElement(InternalModal, Object.assign({ size: size }, props, baseComponentProps, { __injectAnalyticsComponentMetadata: true }));
 }
 applyDisplayName(Modal, 'Modal');

package/modal/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/modal/index.tsx"],"names":[],"mappings":";AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,gBAAgB,MAAM,sCAAsC,CAAC;AACpE,OAAO,EAAE,gBAAgB,EAAE,MAAM,sCAAsC,CAAC;AAExE,OAAO,aAAa,MAAM,YAAY,CAAC;AAIvC,MAAM,CAAC,OAAO,UAAU,KAAK,CAAC,EAAyC;QAAzC,EAAE,IAAI,GAAG,QAAQ,OAAwB,EAAnB,KAAK,cAA3B,QAA6B,CAAF;IACvD,MAAM,kBAAkB,GAAG,gBAAgB,CAAC,OAAO,EAAE;QACnD,KAAK,EAAE,EAAE,IAAI,EAAE,sBAAsB,EAAE,KAAK,CAAC,sBAAsB,EAAE;KACtE,CAAC,CAAC;IACH,OAAO,oBAAC,aAAa,kBAAC,IAAI,EAAE,IAAI,IAAM,KAAK,EAAM,kBAAkB,IAAE,kCAAkC,EAAE,IAAI,IAAI,CAAC;AACpH,CAAC;AAED,gBAAgB,CAAC,KAAK,EAAE,OAAO,CAAC,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React from 'react';\n\nimport useBaseComponent from '../internal/hooks/use-base-component';\nimport { applyDisplayName } from '../internal/utils/apply-display-name';\nimport { ModalProps } from './interfaces';\nimport InternalModal from './internal';\n\nexport { ModalProps };\n\nexport default function Modal({ size = 'medium', ...props }: ModalProps) {\n  const baseComponentProps = useBaseComponent('Modal', {\n    props: { size, disableContentPaddings: props.disableContentPaddings },\n  });\n  return <InternalModal size={size} {...props} {...baseComponentProps} __injectAnalyticsComponentMetadata={true} />;\n}\n\napplyDisplayName(Modal, 'Modal');\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/modal/index.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React from 'react';\n\nimport {\n  AnalyticsFunnel,\n  AnalyticsFunnelStep,\n  AnalyticsFunnelSubStep,\n} from '../internal/analytics/components/analytics-funnel';\nimport { useFunnel } from '../internal/analytics/hooks/use-funnel';\nimport { BasePropsWithAnalyticsMetadata, getAnalyticsMetadataProps } from '../internal/base-component';\nimport useBaseComponent from '../internal/hooks/use-base-component';\nimport { applyDisplayName } from '../internal/utils/apply-display-name';\nimport { ModalProps } from './interfaces';\nimport InternalModal, { InternalModalAsFunnel } from './internal';\n\nimport styles from './styles.css.js';\n\nexport { ModalProps };\n\nfunction ModalWithAnalyticsFunnel({\n  analyticsMetadata,\n  baseComponentProps,\n  size = 'medium',\n  ...props\n}: ModalProps & { analyticsMetadata: any; baseComponentProps: ReturnType<typeof useBaseComponent> }) {\n  return (\n    <AnalyticsFunnel\n      mounted={props.visible}\n      funnelIdentifier={analyticsMetadata?.instanceIdentifier}\n      funnelFlowType={analyticsMetadata?.flowType}\n      funnelErrorContext={analyticsMetadata?.errorContext}\n      funnelResourceType={analyticsMetadata?.resourceType}\n      funnelType=\"modal\"\n      optionalStepNumbers={[]}\n      totalFunnelSteps={1}\n      funnelNameSelectors={[`.${styles['header--text']}`]}\n    >\n      <AnalyticsFunnelStep\n        mounted={props.visible}\n        stepIdentifier={analyticsMetadata?.instanceIdentifier}\n        stepErrorContext={analyticsMetadata?.errorContext}\n        stepNumber={1}\n      >\n        <AnalyticsFunnelSubStep\n          subStepIdentifier={analyticsMetadata?.instanceIdentifier}\n          subStepErrorContext={analyticsMetadata?.errorContext}\n        >\n          <InternalModalAsFunnel\n            size={size}\n            {...props}\n            {...baseComponentProps}\n            __injectAnalyticsComponentMetadata={true}\n          />\n        </AnalyticsFunnelSubStep>\n      </AnalyticsFunnelStep>\n    </AnalyticsFunnel>\n  );\n}\n\nexport default function Modal({ size = 'medium', ...props }: ModalProps) {\n  const { isInFunnel } = useFunnel();\n  const analyticsMetadata = getAnalyticsMetadataProps(props as BasePropsWithAnalyticsMetadata);\n  const baseComponentProps = useBaseComponent(\n    'Modal',\n    {\n      props: { size, disableContentPaddings: props.disableContentPaddings },\n      metadata: {\n        hasResourceType: Boolean(analyticsMetadata?.resourceType),\n        hasInstanceIdentifier: Boolean(analyticsMetadata?.instanceIdentifier),\n      },\n    },\n    analyticsMetadata\n  );\n\n  if (!isInFunnel) {\n    return (\n      <ModalWithAnalyticsFunnel\n        analyticsMetadata={analyticsMetadata}\n        baseComponentProps={baseComponentProps}\n        size={size}\n        {...props}\n      />\n    );\n  }\n\n  return <InternalModal size={size} {...props} {...baseComponentProps} __injectAnalyticsComponentMetadata={true} />;\n}\n\napplyDisplayName(Modal, 'Modal');\n"]}

package/modal/interfaces.d.ts

@@ -1,4 +1,5 @@
 import React from 'react';
+import { FlowType } from '../internal/analytics/interfaces';
 import { BaseComponentProps } from '../internal/base-component';
 import { NonCancelableEventHandler } from '../internal/events';
 export interface BaseModalProps {
@@ -60,11 +61,24 @@ export interface ModalProps extends BaseComponentProps, BaseModalProps {
      * render to an element under `document.body`.
      */
     modalRoot?: HTMLElement;
+    /**
+     * Specifies additional analytics-related metadata.
+     * * `instanceIdentifier` - A unique string that identifies this component instance in your application.
+     * * `flowType` - Identifies the type of flow represented by the component.
+     * * `resourceType` - Identifies the type of resource represented by the flow. **Note:** This API is currently experimental.
+     * @analytics
+     */
+    analyticsMetadata?: ModalProps.AnalyticsMetadata;
 }
 export declare namespace ModalProps {
     type Size = 'small' | 'medium' | 'large' | 'max';
     interface DismissDetail {
         reason: string;
     }
+    interface AnalyticsMetadata {
+        instanceIdentifier?: string;
+        flowType?: FlowType;
+        resourceType?: string;
+    }
 }
 //# sourceMappingURL=interfaces.d.ts.map

package/modal/interfaces.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"interfaces.d.ts","sourceRoot":"","sources":["../../../src/modal/interfaces.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAChE,OAAO,EAAE,yBAAyB,EAAE,MAAM,oBAAoB,CAAC;AAE/D,MAAM,WAAW,cAAc;IAC7B;;;OAGG;IACH,YAAY,CAAC,EAAE,MAAM,OAAO,CAAC,WAAW,CAAC,CAAC;IAE1C;;;;OAIG;IACH,eAAe,CAAC,EAAE,CAAC,WAAW,EAAE,WAAW,KAAK,IAAI,CAAC;CACtD;AAED,MAAM,WAAW,UAAW,SAAQ,kBAAkB,EAAE,cAAc;IACpE;;;;OAIG;IACH,IAAI,CAAC,EAAE,UAAU,CAAC,IAAI,CAAC;IACvB;;;OAGG;IACH,OAAO,EAAE,OAAO,CAAC;IACjB;;;OAGG;IACH,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB;;OAEG;IACH,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB;;OAEG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B;;OAEG;IACH,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB;;OAEG;IACH,sBAAsB,CAAC,EAAE,OAAO,CAAC;IACjC;;;;;OAKG;IACH,SAAS,CAAC,EAAE,yBAAyB,CAAC,UAAU,CAAC,aAAa,CAAC,CAAC;IAChE;;;;OAIG;IACH,SAAS,CAAC,EAAE,WAAW,CAAC;CACzB;AAED,yBAAiB,UAAU,CAAC;IAC1B,KAAY,IAAI,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,GAAG,KAAK,CAAC;IAExD,UAAiB,aAAa;QAC5B,MAAM,EAAE,MAAM,CAAC;KAChB;CACF"}
+{"version":3,"file":"interfaces.d.ts","sourceRoot":"","sources":["../../../src/modal/interfaces.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,QAAQ,EAAE,MAAM,kCAAkC,CAAC;AAC5D,OAAO,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAChE,OAAO,EAAE,yBAAyB,EAAE,MAAM,oBAAoB,CAAC;AAE/D,MAAM,WAAW,cAAc;IAC7B;;;OAGG;IACH,YAAY,CAAC,EAAE,MAAM,OAAO,CAAC,WAAW,CAAC,CAAC;IAE1C;;;;OAIG;IACH,eAAe,CAAC,EAAE,CAAC,WAAW,EAAE,WAAW,KAAK,IAAI,CAAC;CACtD;AAED,MAAM,WAAW,UAAW,SAAQ,kBAAkB,EAAE,cAAc;IACpE;;;;OAIG;IACH,IAAI,CAAC,EAAE,UAAU,CAAC,IAAI,CAAC;IACvB;;;OAGG;IACH,OAAO,EAAE,OAAO,CAAC;IACjB;;;OAGG;IACH,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB;;OAEG;IACH,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB;;OAEG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B;;OAEG;IACH,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB;;OAEG;IACH,sBAAsB,CAAC,EAAE,OAAO,CAAC;IACjC;;;;;OAKG;IACH,SAAS,CAAC,EAAE,yBAAyB,CAAC,UAAU,CAAC,aAAa,CAAC,CAAC;IAChE;;;;OAIG;IACH,SAAS,CAAC,EAAE,WAAW,CAAC;IAExB;;;;;;OAMG;IACH,iBAAiB,CAAC,EAAE,UAAU,CAAC,iBAAiB,CAAC;CAClD;AAED,yBAAiB,UAAU,CAAC;IAC1B,KAAY,IAAI,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,GAAG,KAAK,CAAC;IAExD,UAAiB,aAAa;QAC5B,MAAM,EAAE,MAAM,CAAC;KAChB;IAED,UAAiB,iBAAiB;QAChC,kBAAkB,CAAC,EAAE,MAAM,CAAC;QAC5B,QAAQ,CAAC,EAAE,QAAQ,CAAC;QACpB,YAAY,CAAC,EAAE,MAAM,CAAC;KACvB;CACF"}

package/modal/interfaces.js.map

@@ -1 +1 @@
-{"version":3,"file":"interfaces.js","sourceRoot":"","sources":["../../../src/modal/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 { NonCancelableEventHandler } from '../internal/events';\n\nexport interface BaseModalProps {\n  /**\n   * Use this property to specify a different dynamic modal root for the dialog.\n   * The function will be called when a user clicks on the trigger button.\n   */\n  getModalRoot?: () => Promise<HTMLElement>;\n\n  /**\n   * Use this property when `getModalRoot` is used to clean up the modal root\n   * element after a user closes the dialog. The function receives the return value\n   * of the most recent getModalRoot call as an argument.\n   */\n  removeModalRoot?: (rootElement: HTMLElement) => void;\n}\n\nexport interface ModalProps extends BaseComponentProps, BaseModalProps {\n  /**\n   * Sets the width of the modal. `max` uses variable width up to the\n   * largest size allowed by the design guidelines. Other sizes\n   * (`small`/`medium`/`large`) have fixed widths.\n   */\n  size?: ModalProps.Size;\n  /**\n   * Determines whether the modal is displayed on the screen. Modals are hidden by default.\n   * Set this property to `true` to show them.\n   */\n  visible: boolean;\n  /**\n   * Adds an `aria-label` to the close button, for accessibility.\n   * @i18n\n   */\n  closeAriaLabel?: string;\n  /**\n   * Specifies a title for the modal. Although this can be empty, we suggest that you always provide a title.\n   */\n  header?: React.ReactNode;\n  /**\n   * Body of the modal.\n   */\n  children?: React.ReactNode;\n  /**\n   * Specifies a footer for the modal. If empty, the footer isn't displayed.\n   */\n  footer?: React.ReactNode;\n  /**\n   * Determines whether the modal content has padding. If `true`, removes the default padding from the content area.\n   */\n  disableContentPaddings?: boolean;\n  /**\n   * Called when a user closes the modal by using the close icon button,\n   * clicking outside of the modal, or pressing ESC.\n   * The event detail contains the `reason`, which can be any of the following:\n   * `['closeButton', 'overlay', 'keyboard']`.\n   */\n  onDismiss?: NonCancelableEventHandler<ModalProps.DismissDetail>;\n  /**\n   * Specifies the HTML element where the modal is rendered.\n   * If neither `modalRoot` or `getModalRoot` properties are provided, the modal will\n   * render to an element under `document.body`.\n   */\n  modalRoot?: HTMLElement;\n}\n\nexport namespace ModalProps {\n  export type Size = 'small' | 'medium' | 'large' | 'max';\n\n  export interface DismissDetail {\n    reason: string;\n  }\n}\n"]}
+{"version":3,"file":"interfaces.js","sourceRoot":"","sources":["../../../src/modal/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 { FlowType } from '../internal/analytics/interfaces';\nimport { BaseComponentProps } from '../internal/base-component';\nimport { NonCancelableEventHandler } from '../internal/events';\n\nexport interface BaseModalProps {\n  /**\n   * Use this property to specify a different dynamic modal root for the dialog.\n   * The function will be called when a user clicks on the trigger button.\n   */\n  getModalRoot?: () => Promise<HTMLElement>;\n\n  /**\n   * Use this property when `getModalRoot` is used to clean up the modal root\n   * element after a user closes the dialog. The function receives the return value\n   * of the most recent getModalRoot call as an argument.\n   */\n  removeModalRoot?: (rootElement: HTMLElement) => void;\n}\n\nexport interface ModalProps extends BaseComponentProps, BaseModalProps {\n  /**\n   * Sets the width of the modal. `max` uses variable width up to the\n   * largest size allowed by the design guidelines. Other sizes\n   * (`small`/`medium`/`large`) have fixed widths.\n   */\n  size?: ModalProps.Size;\n  /**\n   * Determines whether the modal is displayed on the screen. Modals are hidden by default.\n   * Set this property to `true` to show them.\n   */\n  visible: boolean;\n  /**\n   * Adds an `aria-label` to the close button, for accessibility.\n   * @i18n\n   */\n  closeAriaLabel?: string;\n  /**\n   * Specifies a title for the modal. Although this can be empty, we suggest that you always provide a title.\n   */\n  header?: React.ReactNode;\n  /**\n   * Body of the modal.\n   */\n  children?: React.ReactNode;\n  /**\n   * Specifies a footer for the modal. If empty, the footer isn't displayed.\n   */\n  footer?: React.ReactNode;\n  /**\n   * Determines whether the modal content has padding. If `true`, removes the default padding from the content area.\n   */\n  disableContentPaddings?: boolean;\n  /**\n   * Called when a user closes the modal by using the close icon button,\n   * clicking outside of the modal, or pressing ESC.\n   * The event detail contains the `reason`, which can be any of the following:\n   * `['closeButton', 'overlay', 'keyboard']`.\n   */\n  onDismiss?: NonCancelableEventHandler<ModalProps.DismissDetail>;\n  /**\n   * Specifies the HTML element where the modal is rendered.\n   * If neither `modalRoot` or `getModalRoot` properties are provided, the modal will\n   * render to an element under `document.body`.\n   */\n  modalRoot?: HTMLElement;\n\n  /**\n   * Specifies additional analytics-related metadata.\n   * * `instanceIdentifier` - A unique string that identifies this component instance in your application.\n   * * `flowType` - Identifies the type of flow represented by the component.\n   * * `resourceType` - Identifies the type of resource represented by the flow. **Note:** This API is currently experimental.\n   * @analytics\n   */\n  analyticsMetadata?: ModalProps.AnalyticsMetadata;\n}\n\nexport namespace ModalProps {\n  export type Size = 'small' | 'medium' | 'large' | 'max';\n\n  export interface DismissDetail {\n    reason: string;\n  }\n\n  export interface AnalyticsMetadata {\n    instanceIdentifier?: string;\n    flowType?: FlowType;\n    resourceType?: string;\n  }\n}\n"]}

package/modal/internal.d.ts

@@ -1,9 +1,18 @@
 /// <reference types="react" />
+import { FunnelStepContextValue, FunnelSubStepContextValue } from '../internal/analytics/context/analytics-context';
+import { FunnelProps } from '../internal/analytics/hooks/use-funnel';
+import { ButtonContextProps } from '../internal/context/button-context';
 import { InternalBaseComponentProps } from '../internal/hooks/use-base-component';
 import { SomeRequired } from '../internal/types';
 import { ModalProps } from './interfaces';
+export declare function InternalModalAsFunnel(props: InternalModalProps): JSX.Element;
 type InternalModalProps = SomeRequired<ModalProps, 'size'> & InternalBaseComponentProps & {
+    __funnelProps?: FunnelProps;
+    __funnelStepProps?: FunnelStepContextValue['funnelStepProps'];
+    __subStepRef?: FunnelSubStepContextValue['subStepRef'];
+    __subStepFunnelProps?: FunnelSubStepContextValue['funnelSubStepProps'];
     __injectAnalyticsComponentMetadata?: boolean;
+    onButtonClick?: ButtonContextProps['onClick'];
     referrerId?: string;
 };
 export default function InternalModal({ modalRoot, getModalRoot, removeModalRoot, ...rest }: InternalModalProps): JSX.Element;

package/modal/internal.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"internal.d.ts","sourceRoot":"","sources":["../../../src/modal/internal.tsx"],"names":[],"mappings":";AAoBA,OAAO,EAAE,0BAA0B,EAAE,MAAM,sCAAsC,CAAC;AAMlF,OAAO,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAMjD,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAK1C,KAAK,kBAAkB,GAAG,YAAY,CAAC,UAAU,EAAE,MAAM,CAAC,GACxD,0BAA0B,GAAG;IAAE,kCAAkC,CAAC,EAAE,OAAO,CAAC;IAAC,UAAU,CAAC,EAAE,MAAM,CAAA;CAAE,CAAC;AAErG,MAAM,CAAC,OAAO,UAAU,aAAa,CAAC,EAAE,SAAS,EAAE,YAAY,EAAE,eAAe,EAAE,GAAG,IAAI,EAAE,EAAE,kBAAkB,eAM9G"}
+{"version":3,"file":"internal.d.ts","sourceRoot":"","sources":["../../../src/modal/internal.tsx"],"names":[],"mappings":";AAWA,OAAO,EAEL,sBAAsB,EACtB,yBAAyB,EAC1B,MAAM,iDAAiD,CAAC;AACzD,OAAO,EAAE,WAAW,EAA8C,MAAM,wCAAwC,CAAC;AAIjH,OAAO,EAAiB,kBAAkB,EAAE,MAAM,oCAAoC,CAAC;AAKvF,OAAO,EAAE,0BAA0B,EAAE,MAAM,sCAAsC,CAAC;AAMlF,OAAO,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAMjD,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAK1C,wBAAgB,qBAAqB,CAAC,KAAK,EAAE,kBAAkB,eAqB9D;AAED,KAAK,kBAAkB,GAAG,YAAY,CAAC,UAAU,EAAE,MAAM,CAAC,GACxD,0BAA0B,GAAG;IAC3B,aAAa,CAAC,EAAE,WAAW,CAAC;IAC5B,iBAAiB,CAAC,EAAE,sBAAsB,CAAC,iBAAiB,CAAC,CAAC;IAC9D,YAAY,CAAC,EAAE,yBAAyB,CAAC,YAAY,CAAC,CAAC;IACvD,oBAAoB,CAAC,EAAE,yBAAyB,CAAC,oBAAoB,CAAC,CAAC;IACvE,kCAAkC,CAAC,EAAE,OAAO,CAAC;IAC7C,aAAa,CAAC,EAAE,kBAAkB,CAAC,SAAS,CAAC,CAAC;IAC9C,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB,CAAC;AAEJ,MAAM,CAAC,OAAO,UAAU,aAAa,CAAC,EAAE,SAAS,EAAE,YAAY,EAAE,eAAe,EAAE,GAAG,IAAI,EAAE,EAAE,kBAAkB,eAM9G"}

package/modal/internal.js

@@ -8,11 +8,12 @@ import { getAnalyticsMetadataAttribute } from '@cloudscape-design/component-tool
 import { InternalButton } from '../button/internal';
 import InternalHeader from '../header/internal';
 import { useInternalI18n } from '../i18n/context';
-import { FunnelNameSelectorContext } from '../internal/analytics/context/analytics-context';
-import { useFunnelSubStep } from '../internal/analytics/hooks/use-funnel';
+import { FunnelNameSelectorContext, } from '../internal/analytics/context/analytics-context';
+import { useFunnel, useFunnelStep, useFunnelSubStep } from '../internal/analytics/hooks/use-funnel';
 import { getBaseProps } from '../internal/base-component';
 import FocusLock from '../internal/components/focus-lock';
 import Portal from '../internal/components/portal';
+import { ButtonContext } from '../internal/context/button-context';
 import { ModalContext } from '../internal/context/modal-context';
 import ResetContextsForModal from '../internal/context/reset-contexts-for-modal';
 import { fireNonCancelableEvent } from '../internal/events';
@@ -25,6 +26,18 @@ import { KeyCode } from '../internal/keycode';
 import { disableBodyScrolling, enableBodyScrolling } from './body-scroll';
 import analyticsSelectors from './analytics-metadata/styles.css.js';
 import styles from './styles.css.js';
+export function InternalModalAsFunnel(props) {
+    const { funnelProps, funnelSubmit, funnelNextOrSubmitAttempt } = useFunnel();
+    const { funnelStepProps } = useFunnelStep();
+    const { subStepRef, funnelSubStepProps } = useFunnelSubStep();
+    const onButtonClick = ({ variant }) => {
+        if (variant === 'primary') {
+            funnelNextOrSubmitAttempt();
+            funnelSubmit();
+        }
+    };
+    return (React.createElement(InternalModal, Object.assign({ __funnelProps: funnelProps, __funnelStepProps: funnelStepProps, __subStepRef: subStepRef, __subStepFunnelProps: funnelSubStepProps, onButtonClick: onButtonClick }, props)));
+}
 export default function InternalModal(_a) {
     var { modalRoot, getModalRoot, removeModalRoot } = _a, rest = __rest(_a, ["modalRoot", "getModalRoot", "removeModalRoot"]);
     return (React.createElement(Portal, { container: modalRoot, getContainer: getModalRoot, removeContainer: removeModalRoot },
@@ -34,7 +47,7 @@ export default function InternalModal(_a) {
 // useContainerQuery needs its targeted element to exist on the first render in order to work properly.
 function PortaledModal(_a) {
     var _b;
-    var { size, visible, header, children, footer, disableContentPaddings, onDismiss, __internalRootRef = null, __injectAnalyticsComponentMetadata, referrerId } = _a, rest = __rest(_a, ["size", "visible", "header", "children", "footer", "disableContentPaddings", "onDismiss", "__internalRootRef", "__injectAnalyticsComponentMetadata", "referrerId"]);
+    var { size, visible, header, children, footer, disableContentPaddings, onButtonClick = () => { }, onDismiss, __internalRootRef = null, __injectAnalyticsComponentMetadata, __funnelProps, __funnelStepProps, __subStepRef, __subStepFunnelProps, referrerId } = _a, rest = __rest(_a, ["size", "visible", "header", "children", "footer", "disableContentPaddings", "onButtonClick", "onDismiss", "__internalRootRef", "__injectAnalyticsComponentMetadata", "__funnelProps", "__funnelStepProps", "__subStepRef", "__subStepFunnelProps", "referrerId"]);
     const instanceUniqueId = useUniqueId();
     const headerId = `${rest.id || instanceUniqueId}-header`;
     const lastMouseDownElementRef = useRef(null);
@@ -100,7 +113,7 @@ function PortaledModal(_a) {
     return (React.createElement(FunnelNameSelectorContext.Provider, { value: `.${styles['header--text']}` },
         React.createElement(ResetContextsForModal, null,
             React.createElement(ModalContext.Provider, { value: { isInModal: true } },
-                React.createElement("div", Object.assign({}, baseProps, { className: clsx(styles.root, { [styles.hidden]: !visible }, baseProps.className, isRefresh && styles.refresh), role: "dialog", "aria-modal": true, "aria-labelledby": headerId, onMouseDown: onOverlayMouseDown, onClick: onOverlayClick, ref: mergedRef, style: footerHeight ? { scrollPaddingBottom: footerHeight } : undefined, "data-awsui-referrer-id": ((_b = subStepRef.current) === null || _b === void 0 ? void 0 : _b.id) || referrerId }),
+                React.createElement("div", Object.assign({}, baseProps, __funnelProps, __funnelStepProps, { className: clsx(styles.root, { [styles.hidden]: !visible }, baseProps.className, isRefresh && styles.refresh), role: "dialog", "aria-modal": true, "aria-labelledby": headerId, onMouseDown: onOverlayMouseDown, onClick: onOverlayClick, ref: mergedRef, style: footerHeight ? { scrollPaddingBottom: footerHeight } : undefined, "data-awsui-referrer-id": ((_b = subStepRef.current) === null || _b === void 0 ? void 0 : _b.id) || referrerId }),
                     React.createElement(FocusLock, { disabled: !visible, autoFocus: true, restoreFocus: true, className: styles['focus-lock'] },
                         React.createElement("div", Object.assign({ className: clsx(styles.dialog, styles[size], styles[`breakpoint-${breakpoint}`], isRefresh && styles.refresh), onKeyDown: escKeyHandler }, metadataAttribute),
                             React.createElement("div", { className: styles.container },
@@ -110,9 +123,10 @@ function PortaledModal(_a) {
                                         })),
                                             React.createElement(InternalButton, { ariaLabel: closeAriaLabel, className: styles['dismiss-control'], variant: "modal-dismiss", iconName: "close", formAction: "none", onClick: onCloseButtonClick })) },
                                         React.createElement("span", { id: headerId, className: styles['header--text'] }, header))),
-                                React.createElement("div", { className: clsx(styles.content, { [styles['no-paddings']]: disableContentPaddings }) },
+                                React.createElement("div", Object.assign({ ref: __subStepRef }, __subStepFunnelProps, { className: clsx(styles.content, { [styles['no-paddings']]: disableContentPaddings }) }),
                                     children,
                                     React.createElement("div", { ref: stickySentinelRef })),
-                                footer && (React.createElement("div", { ref: footerRef, className: clsx(styles.footer, footerStuck && styles['footer--stuck']) }, footer))))))))));
+                                footer && (React.createElement(ButtonContext.Provider, { value: { onClick: onButtonClick } },
+                                    React.createElement("div", { ref: footerRef, className: clsx(styles.footer, footerStuck && styles['footer--stuck']) }, footer)))))))))));
 }
 //# sourceMappingURL=internal.js.map

package/modal/internal.js.map

@@ -1 +1 @@
-{"version":3,"file":"internal.js","sourceRoot":"","sources":["../../../src/modal/internal.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React, { useEffect, useRef } from 'react';\nimport clsx from 'clsx';\n\nimport { useContainerQuery } from '@cloudscape-design/component-toolkit';\nimport { getAnalyticsMetadataAttribute } from '@cloudscape-design/component-toolkit/internal/analytics-metadata';\n\nimport { InternalButton } from '../button/internal';\nimport InternalHeader from '../header/internal';\nimport { useInternalI18n } from '../i18n/context';\nimport { FunnelNameSelectorContext } from '../internal/analytics/context/analytics-context';\nimport { useFunnelSubStep } from '../internal/analytics/hooks/use-funnel';\nimport { getBaseProps } from '../internal/base-component';\nimport FocusLock from '../internal/components/focus-lock';\nimport Portal from '../internal/components/portal';\nimport { ModalContext } from '../internal/context/modal-context';\nimport ResetContextsForModal from '../internal/context/reset-contexts-for-modal';\nimport { fireNonCancelableEvent } from '../internal/events';\nimport { useContainerBreakpoints } from '../internal/hooks/container-queries';\nimport { InternalBaseComponentProps } from '../internal/hooks/use-base-component';\nimport { useIntersectionObserver } from '../internal/hooks/use-intersection-observer';\nimport { useMergeRefs } from '../internal/hooks/use-merge-refs';\nimport { useUniqueId } from '../internal/hooks/use-unique-id';\nimport { useVisualRefresh } from '../internal/hooks/use-visual-mode';\nimport { KeyCode } from '../internal/keycode';\nimport { SomeRequired } from '../internal/types';\nimport {\n  GeneratedAnalyticsMetadataModalComponent,\n  GeneratedAnalyticsMetadataModalDismiss,\n} from './analytics-metadata/interfaces';\nimport { disableBodyScrolling, enableBodyScrolling } from './body-scroll';\nimport { ModalProps } from './interfaces';\n\nimport analyticsSelectors from './analytics-metadata/styles.css.js';\nimport styles from './styles.css.js';\n\ntype InternalModalProps = SomeRequired<ModalProps, 'size'> &\n  InternalBaseComponentProps & { __injectAnalyticsComponentMetadata?: boolean; referrerId?: string };\n\nexport default function InternalModal({ modalRoot, getModalRoot, removeModalRoot, ...rest }: InternalModalProps) {\n  return (\n    <Portal container={modalRoot} getContainer={getModalRoot} removeContainer={removeModalRoot}>\n      <PortaledModal {...rest} />\n    </Portal>\n  );\n}\n\ntype PortaledModalProps = Omit<InternalModalProps, 'modalRoot' | 'getModalRoot' | 'removeModalRoot'>;\n\n// Separate component to prevent the Portal from getting in the way of refs, as it needs extra cycles to render the inner components.\n// useContainerQuery needs its targeted element to exist on the first render in order to work properly.\nfunction PortaledModal({\n  size,\n  visible,\n  header,\n  children,\n  footer,\n  disableContentPaddings,\n  onDismiss,\n  __internalRootRef = null,\n  __injectAnalyticsComponentMetadata,\n  referrerId,\n  ...rest\n}: PortaledModalProps) {\n  const instanceUniqueId = useUniqueId();\n  const headerId = `${rest.id || instanceUniqueId}-header`;\n  const lastMouseDownElementRef = useRef<HTMLElement | null>(null);\n  const [breakpoint, breakpointsRef] = useContainerBreakpoints(['xs']);\n\n  const i18n = useInternalI18n('modal');\n  const closeAriaLabel = i18n('closeAriaLabel', rest.closeAriaLabel);\n\n  const refObject = useRef<HTMLDivElement>(null);\n  const mergedRef = useMergeRefs(breakpointsRef, refObject, __internalRootRef);\n\n  const isRefresh = useVisualRefresh();\n\n  const baseProps = getBaseProps(rest);\n\n  const analyticsComponentMetadata: GeneratedAnalyticsMetadataModalComponent = {\n    name: 'awsui.Modal',\n    label: `.${analyticsSelectors.header} h2`,\n  };\n\n  const metadataAttribute = __injectAnalyticsComponentMetadata\n    ? getAnalyticsMetadataAttribute({ component: analyticsComponentMetadata })\n    : {};\n\n  // enable body scroll and restore focus if unmounting while visible\n  useEffect(() => {\n    return () => {\n      enableBodyScrolling();\n    };\n  }, []);\n\n  // enable / disable body scroll\n  useEffect(() => {\n    if (visible) {\n      disableBodyScrolling();\n    } else {\n      enableBodyScrolling();\n    }\n  }, [visible]);\n\n  // Because we hide the element with styles (and not actually detach it from DOM), we need to scroll to top\n  useEffect(() => {\n    if (visible && refObject.current) {\n      refObject.current.scrollTop = 0;\n    }\n  }, [visible]);\n\n  const dismiss = (reason: string) => fireNonCancelableEvent(onDismiss, { reason });\n\n  const onOverlayMouseDown = (event: React.MouseEvent) => {\n    lastMouseDownElementRef.current = event.target as HTMLElement;\n  };\n  const onOverlayClick = (event: React.MouseEvent) => {\n    const overlay = refObject.current;\n    const lastClicked = lastMouseDownElementRef.current;\n\n    if (event.target === overlay && lastClicked === overlay) {\n      dismiss('overlay');\n    }\n  };\n  const onCloseButtonClick = () => dismiss('closeButton');\n  const escKeyHandler = (event: React.KeyboardEvent) => {\n    if (event.keyCode === KeyCode.escape) {\n      dismiss('keyboard');\n    }\n  };\n\n  // We use an empty div element at the end of the content slot as a sentinel\n  // to detect when the user has scrolled to the bottom.\n  const { ref: stickySentinelRef, isIntersecting: footerStuck } = useIntersectionObserver();\n\n  // Add extra scroll padding to account for the height of the sticky footer,\n  // to prevent it from covering focused elements.\n  const [footerHeight, footerRef] = useContainerQuery(rect => rect.borderBoxHeight);\n  const { subStepRef } = useFunnelSubStep();\n\n  return (\n    <FunnelNameSelectorContext.Provider value={`.${styles['header--text']}`}>\n      <ResetContextsForModal>\n        <ModalContext.Provider value={{ isInModal: true }}>\n          <div\n            {...baseProps}\n            className={clsx(\n              styles.root,\n              { [styles.hidden]: !visible },\n              baseProps.className,\n              isRefresh && styles.refresh\n            )}\n            role=\"dialog\"\n            aria-modal={true}\n            aria-labelledby={headerId}\n            onMouseDown={onOverlayMouseDown}\n            onClick={onOverlayClick}\n            ref={mergedRef}\n            style={footerHeight ? { scrollPaddingBottom: footerHeight } : undefined}\n            data-awsui-referrer-id={subStepRef.current?.id || referrerId}\n          >\n            <FocusLock disabled={!visible} autoFocus={true} restoreFocus={true} className={styles['focus-lock']}>\n              <div\n                className={clsx(\n                  styles.dialog,\n                  styles[size],\n                  styles[`breakpoint-${breakpoint}`],\n                  isRefresh && styles.refresh\n                )}\n                onKeyDown={escKeyHandler}\n                {...metadataAttribute}\n              >\n                <div className={styles.container}>\n                  <div className={clsx(styles.header, analyticsSelectors.header)}>\n                    <InternalHeader\n                      variant=\"h2\"\n                      __disableActionsWrapping={true}\n                      actions={\n                        <div\n                          {...getAnalyticsMetadataAttribute({\n                            action: 'dismiss',\n                          } as Partial<GeneratedAnalyticsMetadataModalDismiss>)}\n                        >\n                          <InternalButton\n                            ariaLabel={closeAriaLabel}\n                            className={styles['dismiss-control']}\n                            variant=\"modal-dismiss\"\n                            iconName=\"close\"\n                            formAction=\"none\"\n                            onClick={onCloseButtonClick}\n                          />\n                        </div>\n                      }\n                    >\n                      <span id={headerId} className={styles['header--text']}>\n                        {header}\n                      </span>\n                    </InternalHeader>\n                  </div>\n                  <div className={clsx(styles.content, { [styles['no-paddings']]: disableContentPaddings })}>\n                    {children}\n                    <div ref={stickySentinelRef} />\n                  </div>\n                  {footer && (\n                    <div ref={footerRef} className={clsx(styles.footer, footerStuck && styles['footer--stuck'])}>\n                      {footer}\n                    </div>\n                  )}\n                </div>\n              </div>\n            </FocusLock>\n          </div>\n        </ModalContext.Provider>\n      </ResetContextsForModal>\n    </FunnelNameSelectorContext.Provider>\n  );\n}\n"]}
+{"version":3,"file":"internal.js","sourceRoot":"","sources":["../../../src/modal/internal.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React, { useEffect, useRef } from 'react';\nimport clsx from 'clsx';\n\nimport { useContainerQuery } from '@cloudscape-design/component-toolkit';\nimport { getAnalyticsMetadataAttribute } from '@cloudscape-design/component-toolkit/internal/analytics-metadata';\n\nimport { InternalButton } from '../button/internal';\nimport InternalHeader from '../header/internal';\nimport { useInternalI18n } from '../i18n/context';\nimport {\n  FunnelNameSelectorContext,\n  FunnelStepContextValue,\n  FunnelSubStepContextValue,\n} from '../internal/analytics/context/analytics-context';\nimport { FunnelProps, useFunnel, useFunnelStep, useFunnelSubStep } from '../internal/analytics/hooks/use-funnel';\nimport { getBaseProps } from '../internal/base-component';\nimport FocusLock from '../internal/components/focus-lock';\nimport Portal from '../internal/components/portal';\nimport { ButtonContext, ButtonContextProps } from '../internal/context/button-context';\nimport { ModalContext } from '../internal/context/modal-context';\nimport ResetContextsForModal from '../internal/context/reset-contexts-for-modal';\nimport { fireNonCancelableEvent } from '../internal/events';\nimport { useContainerBreakpoints } from '../internal/hooks/container-queries';\nimport { InternalBaseComponentProps } from '../internal/hooks/use-base-component';\nimport { useIntersectionObserver } from '../internal/hooks/use-intersection-observer';\nimport { useMergeRefs } from '../internal/hooks/use-merge-refs';\nimport { useUniqueId } from '../internal/hooks/use-unique-id';\nimport { useVisualRefresh } from '../internal/hooks/use-visual-mode';\nimport { KeyCode } from '../internal/keycode';\nimport { SomeRequired } from '../internal/types';\nimport {\n  GeneratedAnalyticsMetadataModalComponent,\n  GeneratedAnalyticsMetadataModalDismiss,\n} from './analytics-metadata/interfaces';\nimport { disableBodyScrolling, enableBodyScrolling } from './body-scroll';\nimport { ModalProps } from './interfaces';\n\nimport analyticsSelectors from './analytics-metadata/styles.css.js';\nimport styles from './styles.css.js';\n\nexport function InternalModalAsFunnel(props: InternalModalProps) {\n  const { funnelProps, funnelSubmit, funnelNextOrSubmitAttempt } = useFunnel();\n  const { funnelStepProps } = useFunnelStep();\n  const { subStepRef, funnelSubStepProps } = useFunnelSubStep();\n  const onButtonClick: ButtonContextProps['onClick'] = ({ variant }) => {\n    if (variant === 'primary') {\n      funnelNextOrSubmitAttempt();\n      funnelSubmit();\n    }\n  };\n\n  return (\n    <InternalModal\n      __funnelProps={funnelProps}\n      __funnelStepProps={funnelStepProps}\n      __subStepRef={subStepRef}\n      __subStepFunnelProps={funnelSubStepProps}\n      onButtonClick={onButtonClick}\n      {...props}\n    />\n  );\n}\n\ntype InternalModalProps = SomeRequired<ModalProps, 'size'> &\n  InternalBaseComponentProps & {\n    __funnelProps?: FunnelProps;\n    __funnelStepProps?: FunnelStepContextValue['funnelStepProps'];\n    __subStepRef?: FunnelSubStepContextValue['subStepRef'];\n    __subStepFunnelProps?: FunnelSubStepContextValue['funnelSubStepProps'];\n    __injectAnalyticsComponentMetadata?: boolean;\n    onButtonClick?: ButtonContextProps['onClick'];\n    referrerId?: string;\n  };\n\nexport default function InternalModal({ modalRoot, getModalRoot, removeModalRoot, ...rest }: InternalModalProps) {\n  return (\n    <Portal container={modalRoot} getContainer={getModalRoot} removeContainer={removeModalRoot}>\n      <PortaledModal {...rest} />\n    </Portal>\n  );\n}\n\ntype PortaledModalProps = Omit<InternalModalProps, 'modalRoot' | 'getModalRoot' | 'removeModalRoot'>;\n\n// Separate component to prevent the Portal from getting in the way of refs, as it needs extra cycles to render the inner components.\n// useContainerQuery needs its targeted element to exist on the first render in order to work properly.\nfunction PortaledModal({\n  size,\n  visible,\n  header,\n  children,\n  footer,\n  disableContentPaddings,\n  onButtonClick = () => {},\n  onDismiss,\n  __internalRootRef = null,\n  __injectAnalyticsComponentMetadata,\n  __funnelProps,\n  __funnelStepProps,\n  __subStepRef,\n  __subStepFunnelProps,\n  referrerId,\n  ...rest\n}: PortaledModalProps) {\n  const instanceUniqueId = useUniqueId();\n  const headerId = `${rest.id || instanceUniqueId}-header`;\n  const lastMouseDownElementRef = useRef<HTMLElement | null>(null);\n  const [breakpoint, breakpointsRef] = useContainerBreakpoints(['xs']);\n\n  const i18n = useInternalI18n('modal');\n  const closeAriaLabel = i18n('closeAriaLabel', rest.closeAriaLabel);\n\n  const refObject = useRef<HTMLDivElement>(null);\n  const mergedRef = useMergeRefs(breakpointsRef, refObject, __internalRootRef);\n\n  const isRefresh = useVisualRefresh();\n\n  const baseProps = getBaseProps(rest);\n\n  const analyticsComponentMetadata: GeneratedAnalyticsMetadataModalComponent = {\n    name: 'awsui.Modal',\n    label: `.${analyticsSelectors.header} h2`,\n  };\n\n  const metadataAttribute = __injectAnalyticsComponentMetadata\n    ? getAnalyticsMetadataAttribute({ component: analyticsComponentMetadata })\n    : {};\n\n  // enable body scroll and restore focus if unmounting while visible\n  useEffect(() => {\n    return () => {\n      enableBodyScrolling();\n    };\n  }, []);\n\n  // enable / disable body scroll\n  useEffect(() => {\n    if (visible) {\n      disableBodyScrolling();\n    } else {\n      enableBodyScrolling();\n    }\n  }, [visible]);\n\n  // Because we hide the element with styles (and not actually detach it from DOM), we need to scroll to top\n  useEffect(() => {\n    if (visible && refObject.current) {\n      refObject.current.scrollTop = 0;\n    }\n  }, [visible]);\n\n  const dismiss = (reason: string) => fireNonCancelableEvent(onDismiss, { reason });\n\n  const onOverlayMouseDown = (event: React.MouseEvent) => {\n    lastMouseDownElementRef.current = event.target as HTMLElement;\n  };\n  const onOverlayClick = (event: React.MouseEvent) => {\n    const overlay = refObject.current;\n    const lastClicked = lastMouseDownElementRef.current;\n\n    if (event.target === overlay && lastClicked === overlay) {\n      dismiss('overlay');\n    }\n  };\n  const onCloseButtonClick = () => dismiss('closeButton');\n  const escKeyHandler = (event: React.KeyboardEvent) => {\n    if (event.keyCode === KeyCode.escape) {\n      dismiss('keyboard');\n    }\n  };\n\n  // We use an empty div element at the end of the content slot as a sentinel\n  // to detect when the user has scrolled to the bottom.\n  const { ref: stickySentinelRef, isIntersecting: footerStuck } = useIntersectionObserver();\n\n  // Add extra scroll padding to account for the height of the sticky footer,\n  // to prevent it from covering focused elements.\n  const [footerHeight, footerRef] = useContainerQuery(rect => rect.borderBoxHeight);\n  const { subStepRef } = useFunnelSubStep();\n\n  return (\n    <FunnelNameSelectorContext.Provider value={`.${styles['header--text']}`}>\n      <ResetContextsForModal>\n        <ModalContext.Provider value={{ isInModal: true }}>\n          <div\n            {...baseProps}\n            {...__funnelProps}\n            {...__funnelStepProps}\n            className={clsx(\n              styles.root,\n              { [styles.hidden]: !visible },\n              baseProps.className,\n              isRefresh && styles.refresh\n            )}\n            role=\"dialog\"\n            aria-modal={true}\n            aria-labelledby={headerId}\n            onMouseDown={onOverlayMouseDown}\n            onClick={onOverlayClick}\n            ref={mergedRef}\n            style={footerHeight ? { scrollPaddingBottom: footerHeight } : undefined}\n            data-awsui-referrer-id={subStepRef.current?.id || referrerId}\n          >\n            <FocusLock disabled={!visible} autoFocus={true} restoreFocus={true} className={styles['focus-lock']}>\n              <div\n                className={clsx(\n                  styles.dialog,\n                  styles[size],\n                  styles[`breakpoint-${breakpoint}`],\n                  isRefresh && styles.refresh\n                )}\n                onKeyDown={escKeyHandler}\n                {...metadataAttribute}\n              >\n                <div className={styles.container}>\n                  <div className={clsx(styles.header, analyticsSelectors.header)}>\n                    <InternalHeader\n                      variant=\"h2\"\n                      __disableActionsWrapping={true}\n                      actions={\n                        <div\n                          {...getAnalyticsMetadataAttribute({\n                            action: 'dismiss',\n                          } as Partial<GeneratedAnalyticsMetadataModalDismiss>)}\n                        >\n                          <InternalButton\n                            ariaLabel={closeAriaLabel}\n                            className={styles['dismiss-control']}\n                            variant=\"modal-dismiss\"\n                            iconName=\"close\"\n                            formAction=\"none\"\n                            onClick={onCloseButtonClick}\n                          />\n                        </div>\n                      }\n                    >\n                      <span id={headerId} className={styles['header--text']}>\n                        {header}\n                      </span>\n                    </InternalHeader>\n                  </div>\n                  <div\n                    ref={__subStepRef}\n                    {...__subStepFunnelProps}\n                    className={clsx(styles.content, { [styles['no-paddings']]: disableContentPaddings })}\n                  >\n                    {children}\n                    <div ref={stickySentinelRef} />\n                  </div>\n                  {footer && (\n                    <ButtonContext.Provider value={{ onClick: onButtonClick }}>\n                      <div ref={footerRef} className={clsx(styles.footer, footerStuck && styles['footer--stuck'])}>\n                        {footer}\n                      </div>\n                    </ButtonContext.Provider>\n                  )}\n                </div>\n              </div>\n            </FocusLock>\n          </div>\n        </ModalContext.Provider>\n      </ResetContextsForModal>\n    </FunnelNameSelectorContext.Provider>\n  );\n}\n"]}

package/package.json

@@ -127,7 +127,7 @@
     "./internal/base-component/index.js",
     "./internal/base-component/styles.css.js"
   ],
-  "version": "3.0.790",
+  "version": "3.0.792",
   "repository": {
     "type": "git",
     "url": "https://github.com/cloudscape-design/components.git"

package/property-filter/styles.css.js

@@ -1,40 +1,40 @@
 
     import './styles.scoped.css';
     export default {
-  "root": "awsui_root_1wzqe_ewjqa_141",
-  "search-field": "awsui_search-field_1wzqe_ewjqa_176",
-  "input-wrapper": "awsui_input-wrapper_1wzqe_ewjqa_181",
-  "add-token": "awsui_add-token_1wzqe_ewjqa_188",
-  "tokens": "awsui_tokens_1wzqe_ewjqa_195",
-  "token-operator": "awsui_token-operator_1wzqe_ewjqa_200",
-  "property-editor": "awsui_property-editor_1wzqe_ewjqa_204",
-  "property-editor-header": "awsui_property-editor-header_1wzqe_ewjqa_207",
-  "property-editor-form": "awsui_property-editor-form_1wzqe_ewjqa_220",
-  "property-editor-cancel": "awsui_property-editor-cancel_1wzqe_ewjqa_225",
-  "property-editor-actions": "awsui_property-editor-actions_1wzqe_ewjqa_228",
-  "token-editor": "awsui_token-editor_1wzqe_ewjqa_236",
-  "token-editor-form": "awsui_token-editor-form_1wzqe_ewjqa_243",
-  "token-editor-field-property": "awsui_token-editor-field-property_1wzqe_ewjqa_246",
-  "token-editor-field-operator": "awsui_token-editor-field-operator_1wzqe_ewjqa_249",
-  "token-editor-field-value": "awsui_token-editor-field-value_1wzqe_ewjqa_252",
-  "token-editor-cancel": "awsui_token-editor-cancel_1wzqe_ewjqa_255",
-  "token-editor-submit": "awsui_token-editor-submit_1wzqe_ewjqa_258",
-  "token-editor-actions": "awsui_token-editor-actions_1wzqe_ewjqa_261",
-  "token-editor-grid": "awsui_token-editor-grid_1wzqe_ewjqa_270",
-  "token-editor-grid-group": "awsui_token-editor-grid-group_1wzqe_ewjqa_307",
-  "token-editor-narrow": "awsui_token-editor-narrow_1wzqe_ewjqa_310",
-  "token-editor-supports-groups": "awsui_token-editor-supports-groups_1wzqe_ewjqa_319",
-  "token-editor-grid-header": "awsui_token-editor-grid-header_1wzqe_ewjqa_323",
-  "token-editor-grid-cell": "awsui_token-editor-grid-cell_1wzqe_ewjqa_329",
-  "token-editor-add-token": "awsui_token-editor-add-token_1wzqe_ewjqa_338",
-  "custom-content-wrapper": "awsui_custom-content-wrapper_1wzqe_ewjqa_342",
-  "custom-control": "awsui_custom-control_1wzqe_ewjqa_346",
-  "input": "awsui_input_1wzqe_ewjqa_181",
-  "results": "awsui_results_1wzqe_ewjqa_354",
-  "token-trigger": "awsui_token-trigger_1wzqe_ewjqa_359",
-  "remove-all": "awsui_remove-all_1wzqe_ewjqa_364",
-  "join-operation": "awsui_join-operation_1wzqe_ewjqa_365",
-  "custom-filter-actions": "awsui_custom-filter-actions_1wzqe_ewjqa_366",
-  "constraint": "awsui_constraint_1wzqe_ewjqa_370"
+  "root": "awsui_root_1wzqe_fubyj_141",
+  "search-field": "awsui_search-field_1wzqe_fubyj_176",
+  "input-wrapper": "awsui_input-wrapper_1wzqe_fubyj_183",
+  "add-token": "awsui_add-token_1wzqe_fubyj_190",
+  "tokens": "awsui_tokens_1wzqe_fubyj_197",
+  "token-operator": "awsui_token-operator_1wzqe_fubyj_202",
+  "property-editor": "awsui_property-editor_1wzqe_fubyj_206",
+  "property-editor-header": "awsui_property-editor-header_1wzqe_fubyj_209",
+  "property-editor-form": "awsui_property-editor-form_1wzqe_fubyj_222",
+  "property-editor-cancel": "awsui_property-editor-cancel_1wzqe_fubyj_227",
+  "property-editor-actions": "awsui_property-editor-actions_1wzqe_fubyj_230",
+  "token-editor": "awsui_token-editor_1wzqe_fubyj_238",
+  "token-editor-form": "awsui_token-editor-form_1wzqe_fubyj_245",
+  "token-editor-field-property": "awsui_token-editor-field-property_1wzqe_fubyj_248",
+  "token-editor-field-operator": "awsui_token-editor-field-operator_1wzqe_fubyj_251",
+  "token-editor-field-value": "awsui_token-editor-field-value_1wzqe_fubyj_254",
+  "token-editor-cancel": "awsui_token-editor-cancel_1wzqe_fubyj_257",
+  "token-editor-submit": "awsui_token-editor-submit_1wzqe_fubyj_260",
+  "token-editor-actions": "awsui_token-editor-actions_1wzqe_fubyj_263",
+  "token-editor-grid": "awsui_token-editor-grid_1wzqe_fubyj_272",
+  "token-editor-grid-group": "awsui_token-editor-grid-group_1wzqe_fubyj_309",
+  "token-editor-narrow": "awsui_token-editor-narrow_1wzqe_fubyj_312",
+  "token-editor-supports-groups": "awsui_token-editor-supports-groups_1wzqe_fubyj_321",
+  "token-editor-grid-header": "awsui_token-editor-grid-header_1wzqe_fubyj_325",
+  "token-editor-grid-cell": "awsui_token-editor-grid-cell_1wzqe_fubyj_331",
+  "token-editor-add-token": "awsui_token-editor-add-token_1wzqe_fubyj_340",
+  "custom-content-wrapper": "awsui_custom-content-wrapper_1wzqe_fubyj_344",
+  "custom-control": "awsui_custom-control_1wzqe_fubyj_348",
+  "input": "awsui_input_1wzqe_fubyj_183",
+  "results": "awsui_results_1wzqe_fubyj_356",
+  "token-trigger": "awsui_token-trigger_1wzqe_fubyj_361",
+  "remove-all": "awsui_remove-all_1wzqe_fubyj_366",
+  "join-operation": "awsui_join-operation_1wzqe_fubyj_367",
+  "custom-filter-actions": "awsui_custom-filter-actions_1wzqe_fubyj_368",
+  "constraint": "awsui_constraint_1wzqe_fubyj_372"
 };
   

package/property-filter/styles.scoped.css

@@ -138,7 +138,7 @@
 */
 /* Style used for links in slots/components that are text heavy, to help links stand out among
 surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F73#description */
-.awsui_root_1wzqe_ewjqa_141:not(#\9) {
+.awsui_root_1wzqe_fubyj_141:not(#\9) {
   border-collapse: separate;
   border-spacing: 0;
   box-sizing: border-box;
@@ -174,38 +174,40 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   -moz-osx-font-smoothing: auto;
 }
 
-.awsui_search-field_1wzqe_ewjqa_176:not(#\9) {
+.awsui_search-field_1wzqe_fubyj_176:not(#\9) {
   display: flex;
   align-items: flex-end;
+  flex-wrap: wrap;
+  gap: var(--space-xs-zb16t3, 8px) var(--space-s-34lx8l, 12px);
 }
 
-.awsui_input-wrapper_1wzqe_ewjqa_181:not(#\9) {
+.awsui_input-wrapper_1wzqe_fubyj_183:not(#\9) {
   flex-grow: 1;
   display: flex;
   align-items: flex-end;
   max-inline-size: calc(688px - 2 * var(--space-l-t419sm, 20px));
 }
 
-.awsui_add-token_1wzqe_ewjqa_188:not(#\9) {
+.awsui_add-token_1wzqe_fubyj_190:not(#\9) {
   border-inline-start: 1px solid var(--color-border-divider-default-cx07f2, #c6c6cd);
   box-sizing: border-box;
   margin-inline-start: var(--space-m-udix3p, 16px);
   padding-inline-start: var(--space-m-udix3p, 16px);
 }
 
-.awsui_tokens_1wzqe_ewjqa_195:not(#\9) {
+.awsui_tokens_1wzqe_fubyj_197:not(#\9) {
   margin-block: var(--space-xs-zb16t3, 8px);
   margin-inline: 0;
 }
 
-.awsui_token-operator_1wzqe_ewjqa_200:not(#\9) {
+.awsui_token-operator_1wzqe_fubyj_202:not(#\9) {
   font-weight: bold;
 }
 
-.awsui_property-editor_1wzqe_ewjqa_204:not(#\9) {
+.awsui_property-editor_1wzqe_fubyj_206:not(#\9) {
   overflow-y: auto;
 }
-.awsui_property-editor-header_1wzqe_ewjqa_207:not(#\9) {
+.awsui_property-editor-header_1wzqe_fubyj_209:not(#\9) {
   font-size: var(--font-size-body-m-x4okxb, 14px);
   line-height: var(--line-height-body-m-30ar75, 20px);
   color: var(--color-text-body-default-7v1jfn, #0f141a);
@@ -218,15 +220,15 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   padding-block-end: var(--space-xxs-p8yyaw, 4px);
   padding-inline: var(--space-s-34lx8l, 12px);
 }
-.awsui_property-editor-form_1wzqe_ewjqa_220:not(#\9) {
+.awsui_property-editor-form_1wzqe_fubyj_222:not(#\9) {
   padding-block-start: var(--space-xxs-p8yyaw, 4px);
   padding-block-end: var(--space-s-34lx8l, 12px);
   padding-inline: var(--space-s-34lx8l, 12px);
 }
-.awsui_property-editor-cancel_1wzqe_ewjqa_225:not(#\9) {
+.awsui_property-editor-cancel_1wzqe_fubyj_227:not(#\9) {
   margin-inline-end: var(--space-xs-zb16t3, 8px);
 }
-.awsui_property-editor-actions_1wzqe_ewjqa_228:not(#\9) {
+.awsui_property-editor-actions_1wzqe_fubyj_230:not(#\9) {
   display: flex;
   justify-content: flex-end;
   border-block-start: var(--border-divider-list-width-27y3k5, 1px) solid var(--color-border-dropdown-item-default-xiw1xo, #c6c6cd);
@@ -234,32 +236,32 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   padding-block: var(--space-s-34lx8l, 12px);
 }
 
-.awsui_token-editor_1wzqe_ewjqa_236:not(#\9) {
+.awsui_token-editor_1wzqe_fubyj_238:not(#\9) {
   display: flex;
   flex-direction: column;
   gap: var(--space-s-34lx8l, 12px);
   margin-block: var(--space-xxs-p8yyaw, 4px);
   margin-inline: var(--space-xxs-p8yyaw, 4px);
 }
-.awsui_token-editor-form_1wzqe_ewjqa_243:not(#\9) {
+.awsui_token-editor-form_1wzqe_fubyj_245:not(#\9) {
   /* used in test-utils */
 }
-.awsui_token-editor-field-property_1wzqe_ewjqa_246:not(#\9) {
+.awsui_token-editor-field-property_1wzqe_fubyj_248:not(#\9) {
   flex-grow: 2;
 }
-.awsui_token-editor-field-operator_1wzqe_ewjqa_249:not(#\9) {
+.awsui_token-editor-field-operator_1wzqe_fubyj_251:not(#\9) {
   flex-grow: 1;
 }
-.awsui_token-editor-field-value_1wzqe_ewjqa_252:not(#\9) {
+.awsui_token-editor-field-value_1wzqe_fubyj_254:not(#\9) {
   flex-grow: 2;
 }
-.awsui_token-editor-cancel_1wzqe_ewjqa_255:not(#\9) {
+.awsui_token-editor-cancel_1wzqe_fubyj_257:not(#\9) {
   margin-inline-end: var(--space-xs-zb16t3, 8px);
 }
-.awsui_token-editor-submit_1wzqe_ewjqa_258:not(#\9) {
+.awsui_token-editor-submit_1wzqe_fubyj_260:not(#\9) {
   /* used in test-utils */
 }
-.awsui_token-editor-actions_1wzqe_ewjqa_261:not(#\9) {
+.awsui_token-editor-actions_1wzqe_fubyj_263:not(#\9) {
   display: flex;
   justify-content: flex-end;
   padding-block-start: var(--space-s-34lx8l, 12px);
@@ -268,7 +270,7 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   margin-inline: calc(-1 * var(--space-m-udix3p, 16px) + -1 * var(--space-xxs-p8yyaw, 4px));
   margin-block-start: var(--space-s-34lx8l, 12px);
 }
-.awsui_token-editor-grid_1wzqe_ewjqa_270:not(#\9) {
+.awsui_token-editor-grid_1wzqe_fubyj_272:not(#\9) {
   border-collapse: separate;
   border-spacing: 0;
   box-sizing: border-box;
@@ -306,70 +308,70 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   gap: var(--space-s-34lx8l, 12px);
   grid-template-columns: minmax(min-content, 2fr) minmax(min-content, 120px) minmax(min-content, 3fr) min-content;
 }
-.awsui_token-editor-grid-group_1wzqe_ewjqa_307:not(#\9) {
+.awsui_token-editor-grid-group_1wzqe_fubyj_309:not(#\9) {
   display: contents;
 }
-.awsui_token-editor-grid_1wzqe_ewjqa_270.awsui_token-editor-narrow_1wzqe_ewjqa_310:not(#\9) {
+.awsui_token-editor-grid_1wzqe_fubyj_272.awsui_token-editor-narrow_1wzqe_fubyj_312:not(#\9) {
   grid-template-columns: minmax(100px, 1fr);
   gap: var(--space-m-udix3p, 16px);
 }
-.awsui_token-editor-grid_1wzqe_ewjqa_270.awsui_token-editor-narrow_1wzqe_ewjqa_310 > .awsui_token-editor-grid-group_1wzqe_ewjqa_307:not(#\9) {
+.awsui_token-editor-grid_1wzqe_fubyj_272.awsui_token-editor-narrow_1wzqe_fubyj_312 > .awsui_token-editor-grid-group_1wzqe_fubyj_309:not(#\9) {
   display: flex;
   flex-direction: column;
   gap: var(--space-s-34lx8l, 12px);
 }
-.awsui_token-editor-grid_1wzqe_ewjqa_270.awsui_token-editor-narrow_1wzqe_ewjqa_310 > .awsui_token-editor-grid-group_1wzqe_ewjqa_307.awsui_token-editor-supports-groups_1wzqe_ewjqa_319:not(#\9) {
+.awsui_token-editor-grid_1wzqe_fubyj_272.awsui_token-editor-narrow_1wzqe_fubyj_312 > .awsui_token-editor-grid-group_1wzqe_fubyj_309.awsui_token-editor-supports-groups_1wzqe_fubyj_321:not(#\9) {
   padding-block-end: var(--space-m-udix3p, 16px);
   border-block-end: var(--border-divider-section-width-1061zr, 1px) solid var(--color-border-divider-default-cx07f2, #c6c6cd);
 }
-.awsui_token-editor-grid-header_1wzqe_ewjqa_323:not(#\9) {
+.awsui_token-editor-grid-header_1wzqe_fubyj_325:not(#\9) {
   color: var(--color-text-column-header-18yqaj, #424650);
   font-weight: var(--font-weight-heading-s-cwn6wc, 700);
   padding-block: var(--space-scaled-xxs-7597g1, 4px);
   text-align: start;
 }
-.awsui_token-editor-grid-cell_1wzqe_ewjqa_329:not(#\9):not(.awsui_token-editor-narrow_1wzqe_ewjqa_310) {
+.awsui_token-editor-grid-cell_1wzqe_fubyj_331:not(#\9):not(.awsui_token-editor-narrow_1wzqe_fubyj_312) {
   display: flex;
   align-items: flex-end;
   justify-content: flex-end;
 }
-.awsui_token-editor-grid-cell_1wzqe_ewjqa_329.awsui_token-editor-narrow_1wzqe_ewjqa_310:not(#\9):nth-child(4) {
+.awsui_token-editor-grid-cell_1wzqe_fubyj_331.awsui_token-editor-narrow_1wzqe_fubyj_312:not(#\9):nth-child(4) {
   display: flex;
   justify-content: flex-end;
 }
-.awsui_token-editor-add-token_1wzqe_ewjqa_338:not(#\9) {
+.awsui_token-editor-add-token_1wzqe_fubyj_340:not(#\9) {
   margin-block-start: var(--space-s-34lx8l, 12px);
 }
 
-.awsui_custom-content-wrapper_1wzqe_ewjqa_342:not(#\9) {
+.awsui_custom-content-wrapper_1wzqe_fubyj_344:not(#\9) {
   display: contents;
 }
 
-.awsui_custom-control_1wzqe_ewjqa_346:not(#\9) {
-  margin-inline-end: var(--space-s-34lx8l, 12px);
+.awsui_custom-control_1wzqe_fubyj_348:not(#\9) {
+  /* used in test-utils */
 }
 
-.awsui_input_1wzqe_ewjqa_181:not(#\9) {
+.awsui_input_1wzqe_fubyj_183:not(#\9) {
   flex: 1;
 }
 
-.awsui_results_1wzqe_ewjqa_354:not(#\9) {
+.awsui_results_1wzqe_fubyj_356:not(#\9) {
   padding-block: calc(var(--space-scaled-xxs-7597g1, 4px) + var(--border-field-width-09w7vk, 2px));
   padding-inline: 0;
 }
 
-.awsui_token-trigger_1wzqe_ewjqa_359:not(#\9) {
+.awsui_token-trigger_1wzqe_fubyj_361:not(#\9) {
   min-inline-size: 0;
   word-break: break-word;
 }
 
-.awsui_remove-all_1wzqe_ewjqa_364:not(#\9),
-.awsui_join-operation_1wzqe_ewjqa_365:not(#\9),
-.awsui_custom-filter-actions_1wzqe_ewjqa_366:not(#\9) {
+.awsui_remove-all_1wzqe_fubyj_366:not(#\9),
+.awsui_join-operation_1wzqe_fubyj_367:not(#\9),
+.awsui_custom-filter-actions_1wzqe_fubyj_368:not(#\9) {
   /* used in test-utils */
 }
 
-.awsui_constraint_1wzqe_ewjqa_370:not(#\9) {
+.awsui_constraint_1wzqe_fubyj_372:not(#\9) {
   padding-block-start: var(--space-xxs-p8yyaw, 4px);
   color: var(--color-text-form-secondary-54emib, #656871);
   font-size: var(--font-size-body-s-asqx2i, 12px);