Merge branch 'main' of github.com:cloudscape-design/components into f…

…eat-table-progressive-loading

pages/app-layout/fill-content-area.page.tsx

@@ -8,7 +8,7 @@ import { Navigation, Tools, Breadcrumbs } from './utils/content-blocks';
 import * as toolsContent from './utils/tools-content';
 import labels from './utils/labels';
 import Box from '~components/box';
-import { getIsRtl } from '~components/internal/direction';
+import { getIsRtl } from '@cloudscape-design/component-toolkit/internal';
 
 export default function () {
   return (

pages/popover/container-test.page.tsx

@@ -3,7 +3,7 @@
 import React, { useCallback, useMemo, useRef, useState } from 'react';
 import ScreenshotArea from '../utils/screenshot-area';
 import PopoverContainer from '~components/popover/container';
-import { getIsRtl } from '~components/internal/direction';
+import { getIsRtl } from '@cloudscape-design/component-toolkit/internal';
 import clsx from 'clsx';
 
 // eslint-disable-next-line @typescript-eslint/ban-ts-comment

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

@@ -2,7 +2,7 @@
 // SPDX-License-Identifier: Apache-2.0
 import React from 'react';
 import { render } from '@testing-library/react';
-import { createWidgetizedAppLayout } from '../../../lib/components/app-layout/widget';
+import { createWidgetizedAppLayout } from '../../../lib/components/app-layout/implementation';
 import { AppLayoutProps, AppLayoutPropsWithDefaults } from '../../../lib/components/app-layout/interfaces';
 import { FlagsHolder, awsuiGlobalFlagsSymbol } from '../../../lib/components/internal/utils/global-flags';
 import { useVisualRefresh } from '../../../lib/components/internal/hooks/use-visual-mode';

src/app-layout/internal.tsx

@@ -1,5 +1,5 @@
 // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 // SPDX-License-Identifier: Apache-2.0
-import { createWidgetizedAppLayout } from './widget';
+import { createWidgetizedAppLayout } from './implementation';
 
 export const AppLayoutInternal = createWidgetizedAppLayout();

src/app-layout/utils/use-app-layout-placement.ts

@@ -3,7 +3,7 @@
 import { useCallback, useEffect, useRef, useState } from 'react';
 import { useObservedElement } from './use-observed-element';
 import { useResizeObserver } from '@cloudscape-design/component-toolkit/internal';
-import { getLogicalBoundingClientRect } from '../../internal/direction';
+import { getLogicalBoundingClientRect } from '@cloudscape-design/component-toolkit/internal';
 
 export function useAppLayoutPlacement(headerSelector: string, footerSelector: string) {
   const mainElementRef = useRef<HTMLElement>(null);

src/app-layout/utils/use-pointer-events.ts

@@ -3,7 +3,11 @@
 import { useCallback } from 'react';
 import styles from '../styles.css.js';
 import { SizeControlProps } from './interfaces';
-import { getIsRtl, getLogicalClientX, getLogicalBoundingClientRect } from '../../internal/direction.js';
+import {
+  getIsRtl,
+  getLogicalClientX,
+  getLogicalBoundingClientRect,
+} from '@cloudscape-design/component-toolkit/internal';
 
 export const usePointerEvents = ({
   position,

src/app-layout/visual-refresh/context.tsx

@@ -29,7 +29,7 @@ import useBackgroundOverlap from './use-background-overlap';
 import { useDrawers } from '../utils/use-drawers';
 import { useUniqueId } from '../../internal/hooks/use-unique-id';
 import { SPLIT_PANEL_MIN_WIDTH } from '../split-panel';
-import { getOffsetInlineStart } from '../../internal/direction';
+import { getOffsetInlineStart } from '@cloudscape-design/component-toolkit/internal';
 
 interface AppLayoutInternals extends AppLayoutPropsWithDefaults {
   activeDrawerId: string | null;

src/area-chart/internal.tsx

@@ -22,7 +22,7 @@ import { useMergeRefs } from '../internal/hooks/use-merge-refs';
 import { SomeRequired } from '../internal/types';
 import { nodeBelongs } from '../internal/utils/node-belongs';
 import { ChartWrapper } from '../internal/components/chart-wrapper';
-import { getIsRtl } from '../internal/direction';
+import { getIsRtl } from '@cloudscape-design/component-toolkit/internal';
 
 type InternalAreaChartProps<T extends AreaChartProps.DataTypes> = SomeRequired<
   AreaChartProps<T>,

src/internal/components/cartesian-chart/inline-start-labels.tsx

@@ -11,7 +11,7 @@ import { formatTicks, getSVGTextSize, getVisibleTicks } from './label-utils';
 import { ChartDataTypes } from '../../../mixed-line-bar-chart/interfaces';
 import { useInternalI18n } from '../../../i18n/context';
 import ResponsiveText from '../responsive-text';
-import { getIsRtl } from '../../direction';
+import { getIsRtl } from '@cloudscape-design/component-toolkit/internal';
 
 const OFFSET_PX = 12;
 

src/internal/components/dropdown/dropdown-fit-handler.ts

@@ -1,7 +1,7 @@
 // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 // SPDX-License-Identifier: Apache-2.0
 import { getBreakpointValue } from '../../breakpoints';
-import { getLogicalBoundingClientRect } from '../../direction';
+import { getLogicalBoundingClientRect } from '@cloudscape-design/component-toolkit/internal';
 import { BoundingBox, getOverflowParents, getOverflowParentDimensions } from '../../utils/scrollable-containers';
 import styles from './styles.css.js';
 

src/internal/components/dropdown/index.tsx

@@ -25,7 +25,7 @@ import { useUniqueId } from '../../hooks/use-unique-id/index.js';
 import customCssProps from '../../generated/custom-css-properties';
 import { useResizeObserver } from '@cloudscape-design/component-toolkit/internal';
 import { nodeBelongs } from '../../utils/node-belongs';
-import { getLogicalBoundingClientRect } from '../../direction.js';
+import { getLogicalBoundingClientRect } from '@cloudscape-design/component-toolkit/internal';
 
 interface DropdownContainerProps {
   children?: React.ReactNode;

src/internal/components/responsive-text/__tests__/responsive-text.test.tsx

@@ -4,15 +4,15 @@ import React from 'react';
 import { render } from '@testing-library/react';
 import ResponsiveText from '../../../../../lib/components/internal/components/responsive-text';
 import { getTextWidth } from '../../../../../lib/components/internal/components/responsive-text/responsive-text-utils';
-import { getIsRtl } from '../../../../../lib/components/internal/direction';
+import { getIsRtl } from '@cloudscape-design/component-toolkit/internal';
 
 jest.mock('../../../../../lib/components/internal/components/responsive-text/responsive-text-utils', () => ({
   ...jest.requireActual('../../../../../lib/components/internal/components/responsive-text/responsive-text-utils'),
   getTextWidth: jest.fn().mockReturnValue(0),
 }));
 
-jest.mock('../../../../../lib/components/internal/direction', () => ({
-  ...jest.requireActual('../../../../../lib/components/internal/direction'),
+jest.mock('@cloudscape-design/component-toolkit/internal', () => ({
+  ...jest.requireActual('@cloudscape-design/component-toolkit/internal'),
   getIsRtl: jest.fn().mockReturnValue(false),
 }));
 

src/internal/components/responsive-text/index.tsx

@@ -2,7 +2,7 @@
 // SPDX-License-Identifier: Apache-2.0
 import React, { memo, useEffect, useRef } from 'react';
 import { getTextWidth } from './responsive-text-utils';
-import { getIsRtl } from '../../direction';
+import { getIsRtl } from '@cloudscape-design/component-toolkit/internal';
 
 interface ResponsiveTextProps {
   x: number;

src/internal/utils/handle-key.ts

@@ -1,7 +1,7 @@
 // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 // SPDX-License-Identifier: Apache-2.0
 import { KeyCode } from '../keycode';
-import { getIsRtl } from '../direction';
+import { getIsRtl } from '@cloudscape-design/component-toolkit/internal';
 
 export function isEventLike(event: any): event is EventLike {
   return event.currentTarget instanceof HTMLElement || event.currentTarget instanceof SVGElement;

src/mixed-line-bar-chart/__tests__/mixed-chart.test.tsx

@@ -12,7 +12,7 @@ import { lineSeries3, renderMixedChart } from './common';
 import createComputedTextLengthMock from './computed-text-length-mock';
 import { KeyCode } from '@cloudscape-design/test-utils-core/dist/utils';
 import positions from '../../../lib/components/popover/utils/positions';
-import { getIsRtl } from '../../../lib/components/internal/direction';
+import { getIsRtl } from '@cloudscape-design/component-toolkit/internal';
 
 jest.mock('../../../lib/components/popover/utils/positions', () => {
   return {
@@ -21,8 +21,8 @@ jest.mock('../../../lib/components/popover/utils/positions', () => {
   };
 });
 
-jest.mock('../../../lib/components/internal/direction', () => ({
-  ...jest.requireActual('../../../lib/components/internal/direction'),
+jest.mock('@cloudscape-design/component-toolkit/internal', () => ({
+  ...jest.requireActual('@cloudscape-design/component-toolkit/internal'),
   getIsRtl: jest.fn().mockReturnValue(false),
 }));
 

src/mixed-line-bar-chart/chart-container.tsx

@@ -34,7 +34,7 @@ import { useMergeRefs } from '../internal/hooks/use-merge-refs';
 import { nodeBelongs } from '../internal/utils/node-belongs';
 import { CartesianChartContainer } from '../internal/components/cartesian-chart/chart-container';
 import { useHeightMeasure } from '../internal/hooks/container-queries/use-height-measure';
-import { getIsRtl } from '../internal/direction';
+import { getIsRtl } from '@cloudscape-design/component-toolkit/internal';
 
 const INLINE_START_LABELS_MARGIN = 16;
 const BLOCK_END_LABELS_OFFSET = 12;

src/pie-chart/__tests__/responsive-text.test.tsx

@@ -4,15 +4,15 @@ import React from 'react';
 import { render, waitFor } from '@testing-library/react';
 import ResponsiveText from '../../../lib/components/pie-chart/responsive-text';
 import { renderTextContent } from '../../../lib/components/internal/components/responsive-text/index';
-import { getIsRtl } from '../../../lib/components/internal/direction';
+import { getIsRtl } from '@cloudscape-design/component-toolkit/internal';
 
 jest.mock('../../../lib/components/internal/components/responsive-text/index', () => ({
   ...jest.requireActual('../../../lib/components/internal/components/responsive-text/index'),
   renderTextContent: jest.fn(),
 }));
 
-jest.mock('../../../lib/components/internal/direction', () => ({
-  ...jest.requireActual('../../../lib/components/internal/direction'),
+jest.mock('@cloudscape-design/component-toolkit/internal', () => ({
+  ...jest.requireActual('@cloudscape-design/component-toolkit/internal'),
   getIsRtl: jest.fn().mockReturnValue(false),
 }));
 

src/pie-chart/responsive-text.tsx

@@ -2,7 +2,7 @@
 // SPDX-License-Identifier: Apache-2.0
 import React, { memo, useEffect, useRef } from 'react';
 import { renderTextContent } from '../internal/components/responsive-text';
-import { getIsRtl } from '../internal/direction';
+import { getIsRtl } from '@cloudscape-design/component-toolkit/internal';
 
 interface ResponsiveTextProps {
   x: number;

src/popover/use-popover-position.ts

@@ -11,7 +11,7 @@ import {
   scrollRectangleIntoView,
 } from '../internal/utils/scrollable-containers';
 import { getContainingBlock } from '../internal/utils/dom';
-import { getLogicalBoundingClientRect } from '../internal/direction';
+import { getLogicalBoundingClientRect } from '@cloudscape-design/component-toolkit/internal';
 
 export default function usePopoverPosition({
   popoverRef,

src/split-panel/__tests__/widgetized-panel.test.tsx

@@ -5,7 +5,7 @@ import { render } from '@testing-library/react';
 import { FlagsHolder, awsuiGlobalFlagsSymbol } from '../../../lib/components/internal/utils/global-flags';
 import { useVisualRefresh } from '../../../lib/components/internal/hooks/use-visual-mode';
 import createWrapper from '../../../lib/components/test-utils/dom';
-import { createWidgetizedSplitPanel } from '../../../lib/components/split-panel/widget';
+import { createWidgetizedSplitPanel } from '../../../lib/components/split-panel/implementation';
 import { SplitPanelProps } from '../../../lib/components/split-panel/interfaces';
 import { SplitPanelContextProvider } from '../../../lib/components/internal/context/split-panel-context';
 import { defaultSplitPanelContextProps } from './helpers';

src/split-panel/internal.tsx

@@ -1,5 +1,5 @@
 // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 // SPDX-License-Identifier: Apache-2.0
-import { createWidgetizedSplitPanel } from './widget';
+import { createWidgetizedSplitPanel } from './implementation';
 
 export const SplitPanelInternal = createWidgetizedSplitPanel();

src/table/resizer/index.tsx

@@ -9,7 +9,7 @@ import { useStableCallback } from '@cloudscape-design/component-toolkit/internal
 import { useUniqueId } from '../../internal/hooks/use-unique-id';
 import { getHeaderWidth, getResizerElements } from './resizer-lookup';
 import { useSingleTabStopNavigation } from '../../internal/context/single-tab-stop-navigation-context.js';
-import { getIsRtl, getLogicalBoundingClientRect, getLogicalPageX } from '../../internal/direction.js';
+import { getIsRtl, getLogicalBoundingClientRect, getLogicalPageX } from '@cloudscape-design/component-toolkit/internal';
 import handleKey, { isEventLike } from '../../internal/utils/handle-key';
 
 interface ResizerProps {

src/table/resizer/resizer-lookup.ts

@@ -5,7 +5,7 @@ import { findUpUntil } from '@cloudscape-design/component-toolkit/dom';
 import tableStyles from '../styles.css.js';
 import resizerStyles from './styles.css.js';
 import { getOverflowParents } from '../../internal/utils/scrollable-containers.js';
-import { getLogicalBoundingClientRect } from '../../internal/direction';
+import { getLogicalBoundingClientRect } from '@cloudscape-design/component-toolkit/internal';
 
 export function getResizerElements(resizerElement: null | HTMLElement) {
   if (!resizerElement) {

src/table/sticky-columns/use-sticky-columns.ts

@@ -13,7 +13,7 @@ import {
   StickyColumnsWrapperState,
 } from './interfaces';
 import { isCellStatesEqual, isWrapperStatesEqual, updateCellOffsets } from './utils';
-import { getScrollInlineStart, getLogicalBoundingClientRect } from '../../internal/direction';
+import { getScrollInlineStart, getLogicalBoundingClientRect } from '@cloudscape-design/component-toolkit/internal';
 
 // We allow the table to have a minimum of 148px of available space besides the sum of the widths of the sticky columns
 // This value is an UX recommendation and is approximately 1/3 of our smallest breakpoint (465px)

src/table/sticky-columns/utils.ts

@@ -2,7 +2,7 @@
 // SPDX-License-Identifier: Apache-2.0
 
 import { CellOffsets, StickyColumnsCellState, StickyColumnsProps, StickyColumnsWrapperState } from './interfaces';
-import { getLogicalBoundingClientRect } from '../../internal/direction';
+import { getLogicalBoundingClientRect } from '@cloudscape-design/component-toolkit/internal';
 
 export function isCellStatesEqual(s1: null | StickyColumnsCellState, s2: null | StickyColumnsCellState): boolean {
   if (s1 && s2) {

src/table/sticky-scrollbar/use-sticky-scrollbar.ts

@@ -7,7 +7,7 @@ import { getContainingBlock } from '../../internal/utils/dom';
 import { getOverflowParents } from '../../internal/utils/scrollable-containers';
 import { browserScrollbarSize } from '../../internal/utils/browser-scrollbar-size';
 import globalVars from '../../internal/styles/global-vars';
-import { getLogicalBoundingClientRect } from '../../internal/direction.js';
+import { getLogicalBoundingClientRect } from '@cloudscape-design/component-toolkit/internal';
 
 export const updatePosition = (
   tableEl: HTMLElement | null,

src/table/sticky-scrolling.ts

@@ -1,7 +1,7 @@
 // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 // SPDX-License-Identifier: Apache-2.0
 import { getOverflowParents } from '../internal/utils/scrollable-containers';
-import { getLogicalBoundingClientRect } from '../internal/direction';
+import { getLogicalBoundingClientRect } from '@cloudscape-design/component-toolkit/internal';
 
 /**
  * @param containerRef ref to surrounding container with sticky element

src/table/use-column-widths.tsx

@@ -3,7 +3,7 @@
 import { useResizeObserver, useStableCallback } from '@cloudscape-design/component-toolkit/internal';
 import React, { useEffect, useRef, useState, createContext, useContext } from 'react';
 import { setElementWidths } from './column-widths-utils';
-import { getLogicalBoundingClientRect } from '../internal/direction';
+import { getLogicalBoundingClientRect } from '@cloudscape-design/component-toolkit/internal';
 
 export const DEFAULT_COLUMN_WIDTH = 120;
 

src/tabs/scroll-utils.ts

@@ -1,7 +1,7 @@
 // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 // SPDX-License-Identifier: Apache-2.0
 import smoothScroll from './smooth-scroll';
-import { getIsRtl, getScrollInlineStart } from '../internal/direction';
+import { getIsRtl, getScrollInlineStart } from '@cloudscape-design/component-toolkit/internal';
 
 export const onPaginationClick = (
   headerBarRef: React.RefObject<HTMLUListElement>,