Merge branch 'main' into icons-new-AI-functions

.github/workflows/add-to-project.yml

@@ -11,8 +11,10 @@ env:
   DESIGN_SYSTEM_PROJECT_URL: https://github.com/orgs/carbon-design-system/projects/39
   PROPOSALS_PROJECT_URL: https://github.com/orgs/carbon-design-system/projects/51
   TYPESCRIPT_PROJECT_URL: https://github.com/orgs/carbon-design-system/projects/53
+  AI4UX_PROJECT_URL: https://github.com/orgs/carbon-design-system/projects/82
   LABEL_ENHANCEMENT: 'type: enhancement 💡'
   LABEL_TYPESCRIPT: 'area: typescript'
+  LABEL_AI4UX: 'area: AI4UX'
 
 jobs:
   add-to-proposals-project:
@@ -35,6 +37,16 @@ jobs:
           project-url: ${{ env.TYPESCRIPT_PROJECT_URL }}
           github-token: ${{ secrets.ADD_TO_PROJECT_PAT }}
 
+  add-to-ai4ux-project:
+    name: Add issue with AI4UX label to the AI4UX project
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/add-to-project@9bfe908f2eaa7ba10340b31e314148fcfe6a2458 # v1.0.1
+        with:
+          labeled: ${{ env.LABEL_AI4UX }}
+          project-url: ${{ env.AI4UX_PROJECT_URL }}
+          github-token: ${{ secrets.ADD_TO_PROJECT_PAT }}
+
   add-to-design-system-project:
     name: Add issue to the Design System project
     runs-on: ubuntu-latest

.github/workflows/codeql-analysis.yml

@@ -24,9 +24,9 @@ jobs:
 
       # Initializes the CodeQL tools for scanning.
       - name: Initialize CodeQL
-        uses: github/codeql-action/init@530d4feaa9c62aaab2d250371e2061eb7a172363 # v3.25.9
+        uses: github/codeql-action/init@23acc5c183826b7a8a97bce3cecc52db901f8251 # v3.25.10
         with:
           languages: javascript
 
       - name: Perform CodeQL Analysis
-        uses: github/codeql-action/analyze@530d4feaa9c62aaab2d250371e2061eb7a172363 # v3.25.9
+        uses: github/codeql-action/analyze@23acc5c183826b7a8a97bce3cecc52db901f8251 # v3.25.10

packages/icons/examples/preview/yarn.lock

@@ -229,11 +229,11 @@ __metadata:
   linkType: hard
 
 "braces@npm:~3.0.2":
-  version: 3.0.2
-  resolution: "braces@npm:3.0.2"
+  version: 3.0.3
+  resolution: "braces@npm:3.0.3"
   dependencies:
-    fill-range: "npm:^7.0.1"
-  checksum: 8/e2a8e769a863f3d4ee887b5fe21f63193a891c68b612ddb4b68d82d1b5f3ff9073af066c343e9867a393fe4c2555dcb33e89b937195feb9c1613d259edfcd459
+    fill-range: "npm:^7.1.1"
+  checksum: 10/fad11a0d4697a27162840b02b1fad249c1683cbc510cd5bf1a471f2f8085c046d41094308c577a50a03a579dd99d5a6b3724c4b5e8b14df2c4443844cfcda2c6
   languageName: node
   linkType: hard
 
@@ -467,12 +467,12 @@ __metadata:
   languageName: node
   linkType: hard
 
-"fill-range@npm:^7.0.1":
-  version: 7.0.1
-  resolution: "fill-range@npm:7.0.1"
+"fill-range@npm:^7.1.1":
+  version: 7.1.1
+  resolution: "fill-range@npm:7.1.1"
   dependencies:
     to-regex-range: "npm:^5.0.1"
-  checksum: 8/cc283f4e65b504259e64fd969bcf4def4eb08d85565e906b7d36516e87819db52029a76b6363d0f02d0d532f0033c9603b9e2d943d56ee3b0d4f7ad3328ff917
+  checksum: 10/a7095cb39e5bc32fada2aa7c7249d3f6b01bd1ce461a61b0adabacccabd9198500c6fb1f68a7c851a657e273fce2233ba869638897f3d7ed2e87a2d89b4436ea
   languageName: node
   linkType: hard
 

packages/react/examples/react-router-vite/yarn.lock

@@ -1227,11 +1227,11 @@ __metadata:
   linkType: hard
 
 "braces@npm:~3.0.2":
-  version: 3.0.2
-  resolution: "braces@npm:3.0.2"
+  version: 3.0.3
+  resolution: "braces@npm:3.0.3"
   dependencies:
-    fill-range: "npm:^7.0.1"
-  checksum: 10/966b1fb48d193b9d155f810e5efd1790962f2c4e0829f8440b8ad236ba009222c501f70185ef732fef17a4c490bb33a03b90dab0631feafbdf447da91e8165b1
+    fill-range: "npm:^7.1.1"
+  checksum: 10/fad11a0d4697a27162840b02b1fad249c1683cbc510cd5bf1a471f2f8085c046d41094308c577a50a03a579dd99d5a6b3724c4b5e8b14df2c4443844cfcda2c6
   languageName: node
   linkType: hard
 
@@ -1986,12 +1986,12 @@ __metadata:
   languageName: node
   linkType: hard
 
-"fill-range@npm:^7.0.1":
-  version: 7.0.1
-  resolution: "fill-range@npm:7.0.1"
+"fill-range@npm:^7.1.1":
+  version: 7.1.1
+  resolution: "fill-range@npm:7.1.1"
   dependencies:
     to-regex-range: "npm:^5.0.1"
-  checksum: 10/e260f7592fd196b4421504d3597cc76f4a1ca7a9488260d533b611fc3cefd61e9a9be1417cb82d3b01ad9f9c0ff2dbf258e1026d2445e26b0cf5148ff4250429
+  checksum: 10/a7095cb39e5bc32fada2aa7c7249d3f6b01bd1ce461a61b0adabacccabd9198500c6fb1f68a7c851a657e273fce2233ba869638897f3d7ed2e87a2d89b4436ea
   languageName: node
   linkType: hard
 

packages/react/src/components/MultiSelect/__tests__/MultiSelect-test.js

@@ -324,34 +324,6 @@ describe('MultiSelect', () => {
       ).toBeInstanceOf(HTMLElement);
     });
 
-    it('should trigger onChange with selected items', async () => {
-      let selectedItems = [];
-      const testFunction = jest.fn((e) => (selectedItems = e?.selectedItems));
-      const items = generateItems(4, generateGenericItem);
-      const label = 'test-label';
-      const { container } = render(
-        <MultiSelect
-          id="custom-id"
-          onChange={testFunction}
-          selectedItems={selectedItems}
-          label={label}
-          items={items}
-        />
-      );
-
-      // eslint-disable-next-line testing-library/prefer-screen-queries
-      const labelNode = getByText(container, label);
-      await userEvent.click(labelNode);
-
-      const [item] = items;
-      // eslint-disable-next-line testing-library/prefer-screen-queries
-      const itemNode = getByText(container, item.label);
-
-      await userEvent.click(itemNode);
-      // Assert that the onChange callback returned the selected items and assigned it to selectedItems
-      expect(testFunction.mock.results[0].value).toEqual(selectedItems);
-    });
-
     it('should place the given id on the ___ node when passed in as a prop', () => {
       const items = generateItems(4, generateGenericItem);
       const label = 'test-label';
@@ -481,31 +453,6 @@ describe('MultiSelect', () => {
 
       expect(testFunction).toHaveBeenCalledTimes(1);
     });
-
-    it('should call onChange when the selection changes outside of the component', () => {
-      const handleChange = jest.fn();
-      const items = generateItems(4, generateGenericItem);
-      const props = {
-        id: 'custom-id',
-        onChange: handleChange,
-        selectedItems: [],
-        label: 'test-label',
-        items,
-      };
-      const { rerender } = render(<MultiSelect {...props} />);
-
-      expect(handleChange).not.toHaveBeenCalled();
-
-      act(() => {
-        rerender(<MultiSelect {...props} selectedItems={[items[0]]} />);
-      });
-
-      expect(handleChange).toHaveBeenCalledTimes(1);
-      expect(handleChange.mock.lastCall[0]).toMatchObject({
-        selectedItems: [items[0]],
-      });
-    });
-
     it('should support an invalid state with invalidText that describes the field', () => {
       const items = generateItems(4, generateGenericItem);
       const label = 'test-label';

packages/react/src/components/NumberInput/NumberInput.tsx

@@ -409,6 +409,7 @@ const NumberInput = React.forwardRef<HTMLInputElement, NumberInputProps>(
               data-invalid={normalizedProps.invalid ? true : undefined}
               aria-invalid={normalizedProps.invalid}
               aria-describedby={ariaDescribedBy}
+              aria-readonly={readOnly}
               disabled={normalizedProps.disabled}
               ref={ref}
               id={id}

packages/react/src/components/Pagination/Pagination.tsx

@@ -405,6 +405,7 @@ const Pagination = React.forwardRef(function Pagination(
             kind="ghost"
             className={backButtonClasses}
             label={backwardText}
+            aria-label={backwardText}
             onClick={decrementPage}
             ref={backBtnRef}>
             <CaretLeft />
@@ -415,6 +416,7 @@ const Pagination = React.forwardRef(function Pagination(
             kind="ghost"
             className={forwardButtonClasses}
             label={forwardText}
+            aria-label={forwardText}
             onClick={incrementPage}
             ref={forwardBtnRef}>
             <CaretRight />

packages/react/src/components/PaginationNav/PaginationNav.tsx

@@ -445,6 +445,7 @@ const PaginationNav = React.forwardRef<HTMLElement, PaginationNavProps>(
         <ul className={`${prefix}--pagination-nav__list`}>
           <DirectionButton
             direction="backward"
+            aria-label={t('carbon.pagination-nav.previous')}
             label={t('carbon.pagination-nav.previous')}
             disabled={backwardButtonDisabled}
             onClick={jumpToPrevious}
@@ -516,6 +517,7 @@ const PaginationNav = React.forwardRef<HTMLElement, PaginationNavProps>(
 
           <DirectionButton
             direction="forward"
+            aria-label={t('carbon.pagination-nav.next')}
             label={t('carbon.pagination-nav.next')}
             disabled={forwardButtonDisabled}
             onClick={jumpToNext}

packages/react/src/internal/Selection.js

@@ -36,24 +36,7 @@ export function useSelection({
   const [uncontrolledItems, setUncontrolledItems] =
     useState(initialSelectedItems);
   const isControlled = !!controlledItems;
-  const [selectedItems, setSelectedItems] = useState(
-    isControlled ? controlledItems : uncontrolledItems
-  );
-
-  useEffect(() => {
-    setSelectedItems(isControlled ? controlledItems : uncontrolledItems);
-  }, [isControlled, controlledItems, uncontrolledItems]);
-
-  useEffect(() => {
-    callOnChangeHandler({
-      isControlled,
-      isMounted: isMounted.current,
-      onChangeHandlerControlled: savedOnChange.current,
-      onChangeHandlerUncontrolled: setUncontrolledItems,
-      selectedItems: selectedItems,
-    });
-  }, [isControlled, isMounted, selectedItems]);
-
+  const selectedItems = isControlled ? controlledItems : uncontrolledItems;
   const onItemChange = useCallback(
     (item) => {
       if (disabled) {
@@ -65,15 +48,28 @@ export function useSelection({
           selectedIndex = index;
         }
       });
+      let newSelectedItems;
       if (selectedIndex === undefined) {
-        setSelectedItems((selectedItems) => selectedItems.concat(item));
+        newSelectedItems = selectedItems.concat(item);
+        callOnChangeHandler({
+          isControlled,
+          isMounted: isMounted.current,
+          onChangeHandlerControlled: savedOnChange.current,
+          onChangeHandlerUncontrolled: setUncontrolledItems,
+          selectedItems: newSelectedItems,
+        });
         return;
       }
-      setSelectedItems((selectedItems) =>
-        removeAtIndex(selectedItems, selectedIndex)
-      );
+      newSelectedItems = removeAtIndex(selectedItems, selectedIndex);
+      callOnChangeHandler({
+        isControlled,
+        isMounted: isMounted.current,
+        onChangeHandlerControlled: savedOnChange.current,
+        onChangeHandlerUncontrolled: setUncontrolledItems,
+        selectedItems: newSelectedItems,
+      });
     },
-    [disabled, selectedItems]
+    [disabled, isControlled, selectedItems]
   );
 
   const clearSelection = useCallback(() => {

packages/themes/examples/sass-modules/yarn.lock

@@ -229,11 +229,11 @@ __metadata:
   linkType: hard
 
 "braces@npm:~3.0.2":
-  version: 3.0.2
-  resolution: "braces@npm:3.0.2"
+  version: 3.0.3
+  resolution: "braces@npm:3.0.3"
   dependencies:
-    fill-range: "npm:^7.0.1"
-  checksum: 7/f3493181c3e91a1333d3c9afc9b3263a3f62f4ced0b033c372efc1373b48a7699557f4e04026b232a8556e043ca5360a9d3008c33852350138d4b0ea57558b8d
+    fill-range: "npm:^7.1.1"
+  checksum: 10/fad11a0d4697a27162840b02b1fad249c1683cbc510cd5bf1a471f2f8085c046d41094308c577a50a03a579dd99d5a6b3724c4b5e8b14df2c4443844cfcda2c6
   languageName: node
   linkType: hard
 
@@ -405,12 +405,12 @@ __metadata:
   languageName: node
   linkType: hard
 
-"fill-range@npm:^7.0.1":
-  version: 7.0.1
-  resolution: "fill-range@npm:7.0.1"
+"fill-range@npm:^7.1.1":
+  version: 7.1.1
+  resolution: "fill-range@npm:7.1.1"
   dependencies:
     to-regex-range: "npm:^5.0.1"
-  checksum: 7/efca43d59b487ad4bc0b2b1cb9e51617c75a7b0159db51fa190c75c3d634ea5fad1ff4750d7c14346add4cd065e3c46e8f99af333edf2b4ec2a424f87e491a85
+  checksum: 10/a7095cb39e5bc32fada2aa7c7249d3f6b01bd1ce461a61b0adabacccabd9198500c6fb1f68a7c851a657e273fce2233ba869638897f3d7ed2e87a2d89b4436ea
   languageName: node
   linkType: hard