Merge branch 'main' into dev-v3-philosr-refactor-4

Author: Who-is-PS

build-tools/utils/custom-css-properties.js

@@ -51,6 +51,9 @@ const customCssPropertiesList = [
   // Dropdown Custom Properties
   'dropdownDefaultMaxWidth',
   'dropdownDefaultMinWidth',
+  // Modal Custom Properties
+  'modalCustomWidth',
+  'modalCustomHeight',
   // Spinner Custom Properties
   'spinnerRotatorFrom',
   'spinnerRotatorTo',

package-lock.json

@@ -86,10 +86,10 @@
     "babel-jest": "^29.7.0",
     "change-case": "^4.1.2",
     "commenting": "^1.1.0",
-    "copy-webpack-plugin": "^9.0.1",
+    "copy-webpack-plugin": "^14.0.0",
     "cross-env": "^7.0.3",
     "css-loader": "^6.5.1",
-    "css-minimizer-webpack-plugin": "^3.1.1",
+    "css-minimizer-webpack-plugin": "^8.0.0",
     "d3-scale": "^4.0.2",
     "eslint": "^9.20.1",
     "eslint-config-prettier": "^10.1.5",
@@ -127,7 +127,7 @@
     "react-virtual": "^2.8.2",
     "react18": "npm:react@^18.3.1",
     "rimraf": "^6.1.0",
-    "rollup": "^3.29.5",
+    "rollup": "^3.30.0",
     "rollup-plugin-license": "^3.0.1",
     "sass": "^1.89.2",
     "sass-loader": "^12.3.0",
@@ -139,7 +139,7 @@
     "stylelint-prettier": "^5.0.0",
     "stylelint-scss": "^6.3.1",
     "stylelint-use-logical": "^2.1.2",
-    "svgo": "^2.8.0",
+    "svgo": "^2.8.2",
     "ts-jest": "^29.2.5",
     "ts-loader": "^9.2.6",
     "types-react-dom18": "npm:@types/react-dom@^18.3.7",

package.json

@@ -15,11 +15,13 @@ import {
 } from '~components';
 import { AppLayoutProps } from '~components/app-layout';
 import awsuiPlugins from '~components/internal/plugins';
+import { registerLeftDrawer, updateDrawer } from '~components/internal/plugins/widget';
 
 import './utils/external-widget';
 import AppContext, { AppContextType } from '../app/app-context';
 import { Breadcrumbs, Containers, CustomDrawerContent } from './utils/content-blocks';
 import { drawerLabels } from './utils/drawers';
+import { leftDrawerPayload } from './utils/external-global-left-panel-widget';
 import { registerRuntimeBottomDrawer } from './utils/external-widget';
 import appLayoutLabels from './utils/labels';
 import { splitPaneli18nStrings } from './utils/strings';
@@ -32,6 +34,8 @@ type DemoContext = React.Context<
   }>
 >;
 
+registerLeftDrawer(leftDrawerPayload);
+
 export default function WithDrawers() {
   const [activeDrawerId, setActiveDrawerId] = useState<string | null>(null);
   const [helpPathSlug, setHelpPathSlug] = useState<string>('default');
@@ -130,6 +134,13 @@ export default function WithDrawers() {
                   <Button onClick={() => registerRuntimeBottomDrawer()} data-testid="button-register-bottom-drawer">
                     Register a bottom drawer
                   </Button>
+                  <Button
+                    onClick={() => {
+                      updateDrawer({ type: 'openDrawer', payload: { id: 'ai-panel' } });
+                    }}
+                  >
+                    Open left drawer
+                  </Button>
                 </SpaceBetween>
               </SpaceBetween>
             }

pages/app-layout/runtime-drawers.page.tsx

@@ -4,6 +4,7 @@ import React, { useState } from 'react';
 
 import { Box, Button, PanelLayout } from '~components';
 import { registerLeftDrawer, updateDrawer } from '~components/internal/plugins/widget';
+import { DrawerPayload } from '~components/internal/plugins/widget/interfaces';
 import { mount, unmount } from '~mount';
 
 import styles from '../styles.scss';
@@ -98,7 +99,7 @@ const AIDrawer = () => {
   );
 };
 
-registerLeftDrawer({
+export const leftDrawerPayload: DrawerPayload = {
   id: 'ai-panel',
   resizable: true,
   isExpandable: true,
@@ -114,23 +115,6 @@ registerLeftDrawer({
     exitExpandedModeButton: 'Console',
   },
 
-  trigger: {
-    customIcon: `
-      <svg width="94" height="24" viewBox="0 0 94 24" fill="none" focusable="false" aria-hidden="true">
-        <rect width="94" height="24" rx="4" fill="url(#paint0_linear_145_32649)"/>
-        <defs>
-          <linearGradient id="paint0_linear_145_32649" x1="135.919" y1="21" x2="108.351" y2="74.1863" gradientUnits="userSpaceOnUse">
-            <stop stop-color="#B8E7FF"/>
-            <stop offset="0.255" stop-color="#0099FF"/>
-            <stop offset="0.514134" stop-color="#5C7FFF"/>
-            <stop offset="0.732534" stop-color="#8575FF"/>
-            <stop offset="1" stop-color="#962EFF"/>
-          </linearGradient>
-        </defs>
-      </svg>
-    `,
-  },
-
   exitExpandedModeTrigger: {
     customIcon: `
       <svg width="94" height="24" viewBox="0 0 94 24" fill="none" focusable="false" aria-hidden="true">
@@ -198,4 +182,25 @@ registerLeftDrawer({
   onToggleFocusMode: ({ detail }) => {
     console.log('onToggleFocusMode: ', detail);
   },
-});
+};
+
+const leftDrawerTrigger = {
+  trigger: {
+    customIcon: `
+      <svg width="94" height="24" viewBox="0 0 94 24" fill="none" focusable="false" aria-hidden="true">
+        <rect width="94" height="24" rx="4" fill="url(#paint0_linear_145_32649)"/>
+        <defs>
+          <linearGradient id="paint0_linear_145_32649" x1="135.919" y1="21" x2="108.351" y2="74.1863" gradientUnits="userSpaceOnUse">
+            <stop stop-color="#B8E7FF"/>
+            <stop offset="0.255" stop-color="#0099FF"/>
+            <stop offset="0.514134" stop-color="#5C7FFF"/>
+            <stop offset="0.732534" stop-color="#8575FF"/>
+            <stop offset="1" stop-color="#962EFF"/>
+          </linearGradient>
+        </defs>
+      </svg>
+    `,
+  },
+};
+
+registerLeftDrawer({ ...leftDrawerPayload, ...leftDrawerTrigger });