Merge remote-tracking branch 'origin/main' into feat/widgetize-app-layout-skeleton-event-base

# Conflicts:
#	src/app-layout/visual-refresh-toolbar/index.tsx

Author: georgylobko

src/alert/internal.tsx

@@ -3,6 +3,7 @@
 import React, { useRef } from 'react';
 import clsx from 'clsx';
 
+import { useMergeRefs } from '@cloudscape-design/component-toolkit/internal';
 import { getAnalyticsMetadataAttribute } from '@cloudscape-design/component-toolkit/internal/analytics-metadata';
 
 import { InternalButton } from '../button/internal';
@@ -16,7 +17,6 @@ import { LinkDefaultVariantContext } from '../internal/context/link-default-vari
 import { fireNonCancelableEvent } from '../internal/events';
 import useForwardFocus from '../internal/hooks/forward-focus';
 import { InternalBaseComponentProps } from '../internal/hooks/use-base-component';
-import { useMergeRefs } from '../internal/hooks/use-merge-refs';
 import { useVisualRefresh } from '../internal/hooks/use-visual-mode';
 import { awsuiPluginsInternal } from '../internal/plugins/api';
 import { createUseDiscoveredAction, createUseDiscoveredContent } from '../internal/plugins/helpers';

src/app-layout-toolbar/index.tsx

@@ -2,7 +2,7 @@
 // SPDX-License-Identifier: Apache-2.0
 import React from 'react';
 
-import { warnOnce } from '@cloudscape-design/component-toolkit/internal';
+import { useMergeRefs, warnOnce } from '@cloudscape-design/component-toolkit/internal';
 import { getAnalyticsMetadataAttribute } from '@cloudscape-design/component-toolkit/internal/analytics-metadata';
 
 import { applyDefaults } from '../app-layout/defaults';
@@ -15,7 +15,6 @@ import { getBaseProps } from '../internal/base-component';
 import { NonCancelableCustomEvent } from '../internal/events';
 import useBaseComponent from '../internal/hooks/use-base-component';
 import { useControllable } from '../internal/hooks/use-controllable';
-import { useMergeRefs } from '../internal/hooks/use-merge-refs';
 import { useMobile } from '../internal/hooks/use-mobile';
 import { useVisualRefresh } from '../internal/hooks/use-visual-mode';
 import { isDevelopment } from '../internal/is-development';

src/app-layout/__tests__/app-layout-navigation.test.tsx

@@ -42,4 +42,22 @@ describeEachAppLayout({ themes: ['refresh-toolbar'], sizes: ['desktop', 'mobile'
     expect(wrapper.findNavigation()).toBeTruthy();
     expect(wrapper.findNavigationToggle()).toBeFalsy();
   });
+
+  (size === 'desktop' ? test : test.skip)('should call onNavigationToggle on open/close navigation', () => {
+    const mockOnNavigationChange = jest.fn();
+    const { wrapper } = renderComponent(
+      <AppLayout navigation={<>Mock Navigation</>} onNavigationChange={mockOnNavigationChange} content={<>Content</>} />
+    );
+
+    expect(wrapper.findOpenNavigationPanel()).toBeTruthy();
+    wrapper.findNavigationToggle().click();
+    expect(mockOnNavigationChange).toHaveBeenCalledTimes(1);
+    expect(mockOnNavigationChange).toHaveBeenCalledWith(expect.objectContaining({ detail: { open: false } }));
+    expect(wrapper.findOpenNavigationPanel()).toBeFalsy();
+
+    wrapper.findNavigationToggle().click();
+    expect(mockOnNavigationChange).toHaveBeenCalledTimes(2);
+    expect(mockOnNavigationChange).toHaveBeenCalledWith(expect.objectContaining({ detail: { open: true } }));
+    expect(wrapper.findOpenNavigationPanel()).toBeTruthy();
+  });
 });

src/app-layout/index.tsx

@@ -2,14 +2,13 @@
 // SPDX-License-Identifier: Apache-2.0
 import React from 'react';
 
-import { warnOnce } from '@cloudscape-design/component-toolkit/internal';
+import { useMergeRefs, warnOnce } from '@cloudscape-design/component-toolkit/internal';
 
 import { useInternalI18n } from '../i18n/context';
 import { getBaseProps } from '../internal/base-component';
 import { NonCancelableCustomEvent } from '../internal/events';
 import useBaseComponent from '../internal/hooks/use-base-component';
 import { useControllable } from '../internal/hooks/use-controllable';
-import { useMergeRefs } from '../internal/hooks/use-merge-refs';
 import { useMobile } from '../internal/hooks/use-mobile';
 import { useVisualRefresh } from '../internal/hooks/use-visual-mode';
 import { isDevelopment } from '../internal/is-development';

src/app-layout/visual-refresh-toolbar/toolbar/index.tsx

@@ -171,7 +171,7 @@ export function AppLayoutToolbarImplementation({
                 if (setExpandedDrawerId) {
                   setExpandedDrawerId(null);
                 }
-                if (navigationOpen) {
+                if (navigationOpen && expandedDrawerId) {
                   return;
                 }
                 onNavigationToggle?.(!navigationOpen);

src/area-chart/chart-container.tsx

@@ -2,14 +2,15 @@
 // SPDX-License-Identifier: Apache-2.0
 import React, { memo, useEffect, useMemo, useRef, useState } from 'react';
 
+import { useMergeRefs } from '@cloudscape-design/component-toolkit/internal';
+
 import AxisLabel from '../internal/components/cartesian-chart/axis-label';
 import BlockEndLabels, { useBLockEndLabels } from '../internal/components/cartesian-chart/block-end-labels';
 import { CartesianChartContainer } from '../internal/components/cartesian-chart/chart-container';
 import EmphasizedBaseline from '../internal/components/cartesian-chart/emphasized-baseline';
 import InlineStartLabels from '../internal/components/cartesian-chart/inline-start-labels';
 import LabelsMeasure from '../internal/components/cartesian-chart/labels-measure';
 import ChartPlot from '../internal/components/chart-plot';
-import { useMergeRefs } from '../internal/hooks/use-merge-refs';
 import useContainerWidth from '../internal/utils/use-container-width';
 import { useSelector } from './async-store';
 import AreaChartPopover from './elements/chart-popover';

src/area-chart/internal.tsx

@@ -3,14 +3,13 @@
 import React, { useEffect, useRef, useState } from 'react';
 import clsx from 'clsx';
 
-import { warnOnce } from '@cloudscape-design/component-toolkit/internal';
+import { useMergeRefs, warnOnce } from '@cloudscape-design/component-toolkit/internal';
 import { getIsRtl } from '@cloudscape-design/component-toolkit/internal';
 
 import { getBaseProps } from '../internal/base-component';
 import ChartStatusContainer, { getChartStatus } from '../internal/components/chart-status-container';
 import { ChartWrapper } from '../internal/components/chart-wrapper';
 import { InternalBaseComponentProps } from '../internal/hooks/use-base-component';
-import { useMergeRefs } from '../internal/hooks/use-merge-refs';
 import { isDevelopment } from '../internal/is-development';
 import { SomeRequired } from '../internal/types';
 import { nodeBelongs } from '../internal/utils/node-belongs';

src/attribute-editor/internal.tsx

@@ -3,13 +3,14 @@
 import React, { useImperativeHandle, useRef, useState } from 'react';
 import clsx from 'clsx';
 
+import { useMergeRefs } from '@cloudscape-design/component-toolkit/internal';
+
 import { ButtonProps } from '../button/interfaces';
 import { InternalButton } from '../button/internal';
 import { getBaseProps } from '../internal/base-component';
 import { matchBreakpointMapping } from '../internal/breakpoints';
 import { useContainerBreakpoints } from '../internal/hooks/container-queries';
 import { InternalBaseComponentProps } from '../internal/hooks/use-base-component';
-import { useMergeRefs } from '../internal/hooks/use-merge-refs';
 import { usePrevious } from '../internal/hooks/use-previous';
 import { useUniqueId } from '../internal/hooks/use-unique-id';
 import { SomeRequired } from '../internal/types';

src/breadcrumb-group/implementation.tsx

@@ -4,7 +4,7 @@ import React, { useEffect, useRef, useState } from 'react';
 import clsx from 'clsx';
 
 import { useContainerQuery } from '@cloudscape-design/component-toolkit';
-import { getLogicalBoundingClientRect } from '@cloudscape-design/component-toolkit/internal';
+import { getLogicalBoundingClientRect, useMergeRefs } from '@cloudscape-design/component-toolkit/internal';
 import { getAnalyticsMetadataAttribute } from '@cloudscape-design/component-toolkit/internal/analytics-metadata';
 
 import { InternalButton } from '../button/internal';
@@ -14,7 +14,6 @@ import { useInternalI18n } from '../i18n/context';
 import InternalIcon from '../icon/internal';
 import { getBaseProps } from '../internal/base-component';
 import { fireCancelableEvent } from '../internal/events';
-import { useMergeRefs } from '../internal/hooks/use-merge-refs';
 import { checkSafeUrl } from '../internal/utils/check-safe-url';
 import { createWidgetizedComponent } from '../internal/widgets';
 import { AllItemsDropdown } from './all-items-dropdown';

src/button-group/internal.tsx

@@ -3,7 +3,7 @@
 import React, { forwardRef, useEffect, useImperativeHandle, useRef, useState } from 'react';
 import clsx from 'clsx';
 
-import { warnOnce } from '@cloudscape-design/component-toolkit/internal';
+import { useMergeRefs, warnOnce } from '@cloudscape-design/component-toolkit/internal';
 
 import { ButtonProps } from '../button/interfaces';
 import { getBaseProps } from '../internal/base-component';
@@ -13,7 +13,6 @@ import {
   SingleTabStopNavigationProvider,
 } from '../internal/context/single-tab-stop-navigation-context';
 import { hasModifierKeys } from '../internal/events';
-import { useMergeRefs } from '../internal/hooks/use-merge-refs';
 import { KeyCode } from '../internal/keycode';
 import { circleIndex } from '../internal/utils/circle-index';
 import handleKey from '../internal/utils/handle-key';