Merge branch 'master' into Mil4n0r/fix_toast_keyboard_interaction

Author: Jialecl

apps/website/next.config.js

@@ -28,6 +28,5 @@ module.exports = {
     "@cloudscape-design/components",
     "@cloudscape-design/component-toolkit",
     "@cloudscape-design/theming-runtime",
-    "@dxc-technology/halstack-react",
   ],
 };

apps/website/screens/components/text-input/code/TextInputCodePage.tsx

@@ -9,6 +9,7 @@ import action from "./examples/action";
 import functionSuggestions from "./examples/functionSuggestions";
 import errorHandling from "./examples/errorHandling";
 import Code, { TableCode, ExtendedTableCode } from "@/common/Code";
+import StatusBadge from "@/common/StatusBadge";
 
 const actionTypeString = `{
   icon?: string | (React.ReactNode 
@@ -32,13 +33,32 @@ const sections = [
         </thead>
         <tbody>
           <tr>
-            <td>action</td>
             <td>
-              <ExtendedTableCode>{actionTypeString}</ExtendedTableCode>
+              <DxcFlex direction="column" gap="var(--spacing-gap-xs)" alignItems="baseline">
+                <StatusBadge status="new" />
+                alignment
+              </DxcFlex>
+            </td>
+            <td>
+              <TableCode>'left' | 'right'</TableCode>
+            </td>
+            <td>
+              Sets <Code>text-align</Code> CSS property inside the input. See{" "}
+              <DxcLink newWindow href="https://developer.mozilla.org/en-US/docs/Web/CSS/text-align">
+                MDN
+              </DxcLink>{" "}
+              for further information.
             </td>
             <td>
-              Action to be displayed on the right side of the input.
+              <TableCode>'left'</TableCode>
+            </td>
+          </tr>
+          <tr>
+            <td>action</td>
+            <td>
+              <ExtendedTableCode>{actionTypeString}</ExtendedTableCode>
             </td>
+            <td>Action to be displayed on the right side of the input.</td>
             <td>-</td>
           </tr>
           <tr>

apps/website/screens/components/text-input/overview/TextInputOverviewPage.tsx

@@ -254,6 +254,11 @@ const sections = [
               <strong>Support various states consistently:</strong> reflect focus, disabled, error, and read-only states
               with distinct, accessible visual cues.
             </DxcBulletedList.Item>
+            <DxcBulletedList.Item>
+              <strong>Apply appropiate alignment:</strong> It is recommended to use left alignment in general, except
+              when there is a specific need for right alignment, such as in currency inputs or numeric fields, generally
+              using a suffix.
+            </DxcBulletedList.Item>
           </DxcBulletedList>
         ),
       },

package-lock.json

@@ -13,7 +13,14 @@ module.exports = {
     "@babel/plugin-proposal-optional-chaining",
     "@babel/plugin-proposal-nullish-coalescing-operator",
     "@babel/plugin-transform-runtime",
-    ["@emotion", { sourceMap: true, autoLabel: "dev-only", labelFormat: "[local]" }],
+    [
+      "@emotion",
+      {
+        sourceMap: true,
+        autoLabel: "dev-only",
+        labelFormat: "[local]",
+      },
+    ],
   ],
-  ignore: ["**/*.stories.jsx", "**/*.stories.tsx", "**/*.d.ts"],
+  ignore: ["**/*.stories.*", "**/*.d.ts"],
 };

packages/lib/babel.config.js

@@ -9,10 +9,8 @@
   "module": "./dist/index.mjs",
   "types": "./dist/index.d.ts",
   "exports": {
-    ".": {
-      "import": "./dist/index.mjs",
-      "require": "./dist/index.js"
-    }
+    "types": "./src/index.ts",
+    "default": "./dist/index.js"
   },
   "files": [
     "dist"
@@ -31,20 +29,22 @@
     "test:watch": "jest --env=jsdom --config=./jest.config.js --watch"
   },
   "peerDependencies": {
+    "@emotion/react": "^11.14.0",
+    "@emotion/styled": "^11.14.0",
     "react": "^18.3.1",
     "react-data-grid": "7.0.0-beta.44",
-    "react-dom": "^18.3.1",
-    "@emotion/react": "^11.14.0",
-    "@emotion/styled": "^11.14.0"
+    "react-dom": "^18.3.1"
   },
   "dependencies": {
+    "@babel/runtime": "^7.28.2",
     "@radix-ui/react-popover": "^1.1.0",
     "@radix-ui/react-tooltip": "^1.1.0",
     "color": "^4.2.3",
     "dayjs": "^1.11.11",
     "slugify": "^1.6.6"
   },
   "devDependencies": {
+    "@babel/core": "^7.28.0",
     "@babel/plugin-proposal-nullish-coalescing-operator": "^7.13.8",
     "@babel/plugin-proposal-optional-chaining": "^7.13.8",
     "@babel/plugin-transform-runtime": "^7.16.8",
@@ -54,7 +54,7 @@
     "@chromatic-com/storybook": "^1.5.0",
     "@dxc-technology/eslint-config": "*",
     "@dxc-technology/typescript-config": "*",
-    "@emotion/babel-plugin": "^11.9.2",
+    "@emotion/babel-plugin": "^11.13.5",
     "@emotion/react": "^11.14.0",
     "@emotion/styled": "^11.14.0",
     "@storybook/addon-a11y": "^8.1.10",
@@ -78,6 +78,7 @@
     "@vitejs/plugin-react": "4.6.0",
     "axe-playwright": "^2.1.0",
     "chromatic": "^11.5.4",
+    "esbuild-plugin-babel": "^0.2.3",
     "eslint": "^8.57.0",
     "eslint-plugin-storybook": "^0.8.0",
     "identity-obj-proxy": "^3.0.0",