diff --git a/react/package.json b/react/package.json index d9eec91688..6c5429c1c8 100644 --- a/react/package.json +++ b/react/package.json @@ -69,8 +69,7 @@ "format": "pnpm dlx prettier --check 'src/**/*.{js,jsx,ts,tsx}'", "format-fix": "pnpm dlx prettier --write './src/**/*.{js,jsx,ts,tsx}'", "storybook": "storybook dev -p 6006", - "build-storybook": "storybook build", - "postinstall": "patch-package" + "build-storybook": "storybook build" }, "eslintConfig": { "extends": [ @@ -135,5 +134,10 @@ "typescript": "^5.4.5", "react-refresh": "0.11.0" }, - "proxy": "http://localhost:3081" + "proxy": "http://localhost:3081", + "pnpm": { + "patchedDependencies": { + "@cloudscape-design/board-components@3.0.60": "patches/@cloudscape-design__board-components@3.0.60.patch" + } + } } diff --git a/react/patches/@cloudscape-design+board-components+3.0.60.patch b/react/patches/@cloudscape-design__board-components@3.0.60.patch similarity index 74% rename from react/patches/@cloudscape-design+board-components+3.0.60.patch rename to react/patches/@cloudscape-design__board-components@3.0.60.patch index dfef9de8d3..7fcfea5d48 100644 --- a/react/patches/@cloudscape-design+board-components+3.0.60.patch +++ b/react/patches/@cloudscape-design__board-components@3.0.60.patch @@ -1,7 +1,75 @@ -diff --git a/node_modules/@cloudscape-design/board-components/board-item/interfaces.d.ts b/node_modules/@cloudscape-design/board-components/board-item/interfaces.d.ts -index 7451c23..2f0221c 100644 ---- a/node_modules/@cloudscape-design/board-components/board-item/interfaces.d.ts -+++ b/node_modules/@cloudscape-design/board-components/board-item/interfaces.d.ts +diff --git a/board/interfaces.d.ts b/board/interfaces.d.ts +index 8833051d82fdfa2caea90018f88d607d2f598e74..4c47c4d044a4c12d9de6ba675711220f8a5cf5a4 100644 +--- a/board/interfaces.d.ts ++++ b/board/interfaces.d.ts +@@ -65,6 +65,7 @@ export interface BoardProps { + * When items are loading the slot can be used to render the loading indicator. + */ + empty: ReactNode; ++ className?: String; + } + export declare namespace BoardProps { + type Item = BoardItemDefinition; +diff --git a/board/internal.js b/board/internal.js +index 39c479f6f060dc1f447acfdd542d5c3d6a8e4442..6e4e4a981941f5d35d2c08792654a7893bfde834 100644 +--- a/board/internal.js ++++ b/board/internal.js +@@ -22,7 +22,7 @@ import { selectTransitionRows, useTransition } from "./transition"; + import { announcementToString } from "./utils/announcements"; + import { createTransforms } from "./utils/create-transforms"; + import { createItemsChangeEvent } from "./utils/events"; +-export function InternalBoard({ items, renderItem, onItemsChange, empty, i18nStrings, __internalRootRef, ...rest }) { ++export function InternalBoard({ className, items, renderItem, onItemsChange, empty, i18nStrings, __internalRootRef, ...rest }) { + var _a, _b; + const containerAccessRef = useRef(null); + const [currentColumns, containerQueryRef] = useContainerColumns(); +@@ -161,7 +161,7 @@ export function InternalBoard({ items, renderItem, onItemsChange, empty, i18nStr + const announcement = transitionAnnouncement + ? announcementToString(transitionAnnouncement, items, i18nStrings, itemsLayout.columns) + : ""; +- return (_jsxs("div", { ref: __internalRootRef, ...getDataAttributes(rest), children: [_jsx(ScreenReaderGridNavigation, { items: items, itemsLayout: itemsLayout, ariaLabel: i18nStrings.navigationAriaLabel, ariaDescription: i18nStrings.navigationAriaDescription, itemAriaLabel: i18nStrings.navigationItemAriaLabel, onActivateItem: focusItem }), _jsx("div", { ref: containerRef, className: clsx(styles.root, { [styles.empty]: rows === 0 }), children: rows > 0 ? (_jsx(Grid, { columns: itemsLayout.columns, layout: [...placeholdersLayout.items, ...itemsLayout.items], children: (gridContext) => { ++ return (_jsxs("div", { ref: __internalRootRef, ...getDataAttributes(rest), children: [_jsx(ScreenReaderGridNavigation, { items: items, itemsLayout: itemsLayout, ariaLabel: i18nStrings.navigationAriaLabel, ariaDescription: i18nStrings.navigationAriaDescription, itemAriaLabel: i18nStrings.navigationItemAriaLabel, onActivateItem: focusItem }), _jsx("div", { ref: containerRef, className: clsx(styles.root + (className?` ${className}`:'') , { [styles.empty]: rows === 0 }), children: rows > 0 ? (_jsx(Grid, { columns: itemsLayout.columns, layout: [...placeholdersLayout.items, ...itemsLayout.items], children: (gridContext) => { + var _a; + const layoutShift = (_a = transition === null || transition === void 0 ? void 0 : transition.layoutShift) !== null && _a !== void 0 ? _a : removeTransition === null || removeTransition === void 0 ? void 0 : removeTransition.layoutShift; + const transforms = layoutShift ? createTransforms(itemsLayout, layoutShift.moves, gridContext) : {}; +diff --git a/board/styles.css.js b/board/styles.css.js +index 0cad188b9aa6c0c6ccdb3ccf7da69d21810332bb..6acfdb26bd1fd269d0d6f421282eca6f9fd639bd 100644 +--- a/board/styles.css.js ++++ b/board/styles.css.js +@@ -1,9 +1,9 @@ + + import './styles.scoped.css'; + export default { +- "placeholder": "awsui_placeholder_1h7dk_inx8o_1", +- "placeholder--active": "awsui_placeholder--active_1h7dk_inx8o_5", +- "placeholder--hover": "awsui_placeholder--hover_1h7dk_inx8o_8", ++ "placeholder": "awsui_placeholder_1h7dk_inx8o_1 bai_board_placeholder", ++ "placeholder--active": "awsui_placeholder--active_1h7dk_inx8o_5 bai_board_placeholder--active", ++ "placeholder--hover": "awsui_placeholder--hover_1h7dk_inx8o_8 bai_board_placeholder--hover", + "root": "awsui_root_1h7dk_inx8o_12", + "empty": "awsui_empty_1h7dk_inx8o_16" + }; +diff --git a/board/styles.selectors.js b/board/styles.selectors.js +index be32160b170a3e025133ca909f7fc2ed0b4c9a5a..eea1a961905bd63a1b81bae6b774a84ee34a4ac9 100644 +--- a/board/styles.selectors.js ++++ b/board/styles.selectors.js +@@ -2,9 +2,9 @@ + // es-module interop with Babel and Typescript + Object.defineProperty(exports, "__esModule", { value: true }); + module.exports.default = { +- "placeholder": "awsui_placeholder_1h7dk_inx8o_1", +- "placeholder--active": "awsui_placeholder--active_1h7dk_inx8o_5", +- "placeholder--hover": "awsui_placeholder--hover_1h7dk_inx8o_8", ++ "placeholder": "awsui_placeholder_1h7dk_inx8o_1 bai_board_placeholder", ++ "placeholder--active": "awsui_placeholder--active_1h7dk_inx8o_5 bai_board_placeholder--active", ++ "placeholder--hover": "awsui_placeholder--hover_1h7dk_inx8o_8 bai_board_placeholder--hover", + "root": "awsui_root_1h7dk_inx8o_12", + "empty": "awsui_empty_1h7dk_inx8o_16" + }; +diff --git a/board-item/interfaces.d.ts b/board-item/interfaces.d.ts +index 7451c23943846d46ee2e44f0a4cd42e817c5e279..2f0221c21a6e88e509ca1fa04e9f801562616f4d 100644 +--- a/board-item/interfaces.d.ts ++++ b/board-item/interfaces.d.ts @@ -31,6 +31,7 @@ export interface BoardItemProps { * * `resizeHandleAriaDescription` (string, optional) - the ARIA description for the resize handle. */ @@ -10,10 +78,10 @@ index 7451c23..2f0221c 100644 } export declare namespace BoardItemProps { interface I18nStrings { -diff --git a/node_modules/@cloudscape-design/board-components/board-item/internal.js b/node_modules/@cloudscape-design/board-components/board-item/internal.js -index 9ce96ef..cd0a89e 100644 ---- a/node_modules/@cloudscape-design/board-components/board-item/internal.js -+++ b/node_modules/@cloudscape-design/board-components/board-item/internal.js +diff --git a/board-item/internal.js b/board-item/internal.js +index 9ce96efb6b78053be6c29b4ab98115e465c02372..cd0a89e0e5f5b092ba03ff191c720d29527ea8ce 100644 +--- a/board-item/internal.js ++++ b/board-item/internal.js @@ -11,12 +11,12 @@ import ResizeHandle from "../internal/resize-handle"; import ScreenreaderOnly from "../internal/screenreader-only"; import WidgetContainerHeader from "./header"; @@ -30,10 +98,10 @@ index 9ce96ef..cd0a89e 100644 } //# sourceMappingURL=internal.js.map \ No newline at end of file -diff --git a/node_modules/@cloudscape-design/board-components/board-item/styles.css.js b/node_modules/@cloudscape-design/board-components/board-item/styles.css.js -index 1dcaf7c..f1d982c 100644 ---- a/node_modules/@cloudscape-design/board-components/board-item/styles.css.js -+++ b/node_modules/@cloudscape-design/board-components/board-item/styles.css.js +diff --git a/board-item/styles.css.js b/board-item/styles.css.js +index 1dcaf7ccab588a3e3a1a9bfdab40d1b3e7d4a69f..f1d982c4f3451cb351c817e4e62b8bc3028caeea 100644 +--- a/board-item/styles.css.js ++++ b/board-item/styles.css.js @@ -2,15 +2,15 @@ import './styles.scoped.css'; export default { @@ -55,10 +123,10 @@ index 1dcaf7c..f1d982c 100644 }; \ No newline at end of file -diff --git a/node_modules/@cloudscape-design/board-components/board-item/styles.selectors.js b/node_modules/@cloudscape-design/board-components/board-item/styles.selectors.js -index 2acfd3b..beebd8d 100644 ---- a/node_modules/@cloudscape-design/board-components/board-item/styles.selectors.js -+++ b/node_modules/@cloudscape-design/board-components/board-item/styles.selectors.js +diff --git a/board-item/styles.selectors.js b/board-item/styles.selectors.js +index 2acfd3b34f880ec39462ec5d44f7f780e041fbec..beebd8d83a48e0326fb8d68e67e2549f1ffcd2b3 100644 +--- a/board-item/styles.selectors.js ++++ b/board-item/styles.selectors.js @@ -3,15 +3,15 @@ Object.defineProperty(exports, "__esModule", { value: true }); module.exports.default = { @@ -80,78 +148,10 @@ index 2acfd3b..beebd8d 100644 }; \ No newline at end of file -diff --git a/node_modules/@cloudscape-design/board-components/board/interfaces.d.ts b/node_modules/@cloudscape-design/board-components/board/interfaces.d.ts -index 8833051..4c47c4d 100644 ---- a/node_modules/@cloudscape-design/board-components/board/interfaces.d.ts -+++ b/node_modules/@cloudscape-design/board-components/board/interfaces.d.ts -@@ -65,6 +65,7 @@ export interface BoardProps { - * When items are loading the slot can be used to render the loading indicator. - */ - empty: ReactNode; -+ className?: String; - } - export declare namespace BoardProps { - type Item = BoardItemDefinition; -diff --git a/node_modules/@cloudscape-design/board-components/board/internal.js b/node_modules/@cloudscape-design/board-components/board/internal.js -index 39c479f..6e4e4a9 100644 ---- a/node_modules/@cloudscape-design/board-components/board/internal.js -+++ b/node_modules/@cloudscape-design/board-components/board/internal.js -@@ -22,7 +22,7 @@ import { selectTransitionRows, useTransition } from "./transition"; - import { announcementToString } from "./utils/announcements"; - import { createTransforms } from "./utils/create-transforms"; - import { createItemsChangeEvent } from "./utils/events"; --export function InternalBoard({ items, renderItem, onItemsChange, empty, i18nStrings, __internalRootRef, ...rest }) { -+export function InternalBoard({ className, items, renderItem, onItemsChange, empty, i18nStrings, __internalRootRef, ...rest }) { - var _a, _b; - const containerAccessRef = useRef(null); - const [currentColumns, containerQueryRef] = useContainerColumns(); -@@ -161,7 +161,7 @@ export function InternalBoard({ items, renderItem, onItemsChange, empty, i18nStr - const announcement = transitionAnnouncement - ? announcementToString(transitionAnnouncement, items, i18nStrings, itemsLayout.columns) - : ""; -- return (_jsxs("div", { ref: __internalRootRef, ...getDataAttributes(rest), children: [_jsx(ScreenReaderGridNavigation, { items: items, itemsLayout: itemsLayout, ariaLabel: i18nStrings.navigationAriaLabel, ariaDescription: i18nStrings.navigationAriaDescription, itemAriaLabel: i18nStrings.navigationItemAriaLabel, onActivateItem: focusItem }), _jsx("div", { ref: containerRef, className: clsx(styles.root, { [styles.empty]: rows === 0 }), children: rows > 0 ? (_jsx(Grid, { columns: itemsLayout.columns, layout: [...placeholdersLayout.items, ...itemsLayout.items], children: (gridContext) => { -+ return (_jsxs("div", { ref: __internalRootRef, ...getDataAttributes(rest), children: [_jsx(ScreenReaderGridNavigation, { items: items, itemsLayout: itemsLayout, ariaLabel: i18nStrings.navigationAriaLabel, ariaDescription: i18nStrings.navigationAriaDescription, itemAriaLabel: i18nStrings.navigationItemAriaLabel, onActivateItem: focusItem }), _jsx("div", { ref: containerRef, className: clsx(styles.root + (className?` ${className}`:'') , { [styles.empty]: rows === 0 }), children: rows > 0 ? (_jsx(Grid, { columns: itemsLayout.columns, layout: [...placeholdersLayout.items, ...itemsLayout.items], children: (gridContext) => { - var _a; - const layoutShift = (_a = transition === null || transition === void 0 ? void 0 : transition.layoutShift) !== null && _a !== void 0 ? _a : removeTransition === null || removeTransition === void 0 ? void 0 : removeTransition.layoutShift; - const transforms = layoutShift ? createTransforms(itemsLayout, layoutShift.moves, gridContext) : {}; -diff --git a/node_modules/@cloudscape-design/board-components/board/styles.css.js b/node_modules/@cloudscape-design/board-components/board/styles.css.js -index 0cad188..6acfdb2 100644 ---- a/node_modules/@cloudscape-design/board-components/board/styles.css.js -+++ b/node_modules/@cloudscape-design/board-components/board/styles.css.js -@@ -1,9 +1,9 @@ - - import './styles.scoped.css'; - export default { -- "placeholder": "awsui_placeholder_1h7dk_inx8o_1", -- "placeholder--active": "awsui_placeholder--active_1h7dk_inx8o_5", -- "placeholder--hover": "awsui_placeholder--hover_1h7dk_inx8o_8", -+ "placeholder": "awsui_placeholder_1h7dk_inx8o_1 bai_board_placeholder", -+ "placeholder--active": "awsui_placeholder--active_1h7dk_inx8o_5 bai_board_placeholder--active", -+ "placeholder--hover": "awsui_placeholder--hover_1h7dk_inx8o_8 bai_board_placeholder--hover", - "root": "awsui_root_1h7dk_inx8o_12", - "empty": "awsui_empty_1h7dk_inx8o_16" - }; -diff --git a/node_modules/@cloudscape-design/board-components/board/styles.selectors.js b/node_modules/@cloudscape-design/board-components/board/styles.selectors.js -index be32160..eea1a96 100644 ---- a/node_modules/@cloudscape-design/board-components/board/styles.selectors.js -+++ b/node_modules/@cloudscape-design/board-components/board/styles.selectors.js -@@ -2,9 +2,9 @@ - // es-module interop with Babel and Typescript - Object.defineProperty(exports, "__esModule", { value: true }); - module.exports.default = { -- "placeholder": "awsui_placeholder_1h7dk_inx8o_1", -- "placeholder--active": "awsui_placeholder--active_1h7dk_inx8o_5", -- "placeholder--hover": "awsui_placeholder--hover_1h7dk_inx8o_8", -+ "placeholder": "awsui_placeholder_1h7dk_inx8o_1 bai_board_placeholder", -+ "placeholder--active": "awsui_placeholder--active_1h7dk_inx8o_5 bai_board_placeholder--active", -+ "placeholder--hover": "awsui_placeholder--hover_1h7dk_inx8o_8 bai_board_placeholder--hover", - "root": "awsui_root_1h7dk_inx8o_12", - "empty": "awsui_empty_1h7dk_inx8o_16" - }; -diff --git a/node_modules/@cloudscape-design/board-components/internal/grid/styles.css.js b/node_modules/@cloudscape-design/board-components/internal/grid/styles.css.js -index ec202e1..0c0ed57 100644 ---- a/node_modules/@cloudscape-design/board-components/internal/grid/styles.css.js -+++ b/node_modules/@cloudscape-design/board-components/internal/grid/styles.css.js +diff --git a/internal/grid/styles.css.js b/internal/grid/styles.css.js +index ec202e1a6c757f5513ffa0a2566a1691b8ed18df..0c0ed570ea9c72e7e484c0371825c9710896085c 100644 +--- a/internal/grid/styles.css.js ++++ b/internal/grid/styles.css.js @@ -7,6 +7,5 @@ "columns-2": "awsui_columns-2_1hw7z_1ywbc_17", "columns-4": "awsui_columns-4_1hw7z_1ywbc_21", @@ -161,10 +161,10 @@ index ec202e1..0c0ed57 100644 }; - \ No newline at end of file -diff --git a/node_modules/@cloudscape-design/board-components/internal/grid/styles.selectors.js b/node_modules/@cloudscape-design/board-components/internal/grid/styles.selectors.js -index e9bd94a..cf7bcb1 100644 ---- a/node_modules/@cloudscape-design/board-components/internal/grid/styles.selectors.js -+++ b/node_modules/@cloudscape-design/board-components/internal/grid/styles.selectors.js +diff --git a/internal/grid/styles.selectors.js b/internal/grid/styles.selectors.js +index e9bd94ad593d417dc9de17ef419997f48d01a710..cf7bcb13e9a9cae86ad2cefc4f14b066ed5e01ab 100644 +--- a/internal/grid/styles.selectors.js ++++ b/internal/grid/styles.selectors.js @@ -8,6 +8,6 @@ "columns-2": "awsui_columns-2_1hw7z_1ywbc_17", "columns-4": "awsui_columns-4_1hw7z_1ywbc_21", @@ -173,4 +173,3 @@ index e9bd94a..cf7bcb1 100644 + "grid__item": "awsui_grid__item_1hw7z_1ywbc_29 bai_grid_item" }; -\ No newline at end of file diff --git a/react/pnpm-lock.yaml b/react/pnpm-lock.yaml index 4483bdb2cd..900a3696b7 100644 --- a/react/pnpm-lock.yaml +++ b/react/pnpm-lock.yaml @@ -4,6 +4,11 @@ settings: autoInstallPeers: true excludeLinksFromLockfile: false +patchedDependencies: + '@cloudscape-design/board-components@3.0.60': + hash: rsmnk3j6im54fq6gec5lp7suky + path: patches/@cloudscape-design__board-components@3.0.60.patch + importers: .: @@ -22,7 +27,7 @@ importers: version: 5.4.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1) '@cloudscape-design/board-components': specifier: 3.0.60 - version: 3.0.60(@cloudscape-design/components@3.0.677(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(@cloudscape-design/design-tokens@3.0.40)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) + version: 3.0.60(patch_hash=rsmnk3j6im54fq6gec5lp7suky)(@cloudscape-design/components@3.0.677(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(@cloudscape-design/design-tokens@3.0.40)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) '@codemirror/language': specifier: ^6.10.2 version: 6.10.2 @@ -9810,7 +9815,7 @@ snapshots: '@bcoe/v8-coverage@0.2.3': {} - '@cloudscape-design/board-components@3.0.60(@cloudscape-design/components@3.0.677(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(@cloudscape-design/design-tokens@3.0.40)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)': + '@cloudscape-design/board-components@3.0.60(patch_hash=rsmnk3j6im54fq6gec5lp7suky)(@cloudscape-design/components@3.0.677(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(@cloudscape-design/design-tokens@3.0.40)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)': dependencies: '@cloudscape-design/component-toolkit': 1.0.0-beta.64 '@cloudscape-design/components': 3.0.677(react-dom@18.3.1(react@18.3.1))(react@18.3.1)