Merge branch 'main' into ui-shell-screen-reader

Author: 2nikhiltom

.all-contributorsrc

@@ -1850,6 +1850,7 @@
       ]
     },
     {
+
       "login": "murito",
       "name": "Francisco Alcalá",
       "avatar_url": "https://avatars.githubusercontent.com/u/2628140?v=4",
@@ -1858,6 +1859,15 @@
         "code"
       ]
     },
+    {
+      "login": "dkaushik95",
+      "name": "Dishant Kaushik",
+      "avatar_url": "https://avatars.githubusercontent.com/u/8481567?v=4",
+      "profile": "https://github.com/dkaushik95",
+      "contributions": [
+        "code"
+      ]
+    },
     {
       "login": "Code-Suji",
       "name": "SUJITH C S",
@@ -1875,6 +1885,15 @@
       "contributions": [
         "code"
       ]
+    },
+    {
+      "login": "sojinantony01",
+      "name": "Sojin antony",
+      "avatar_url": "https://avatars.githubusercontent.com/u/29255847?v=4",
+      "profile": "https://github.com/sojinantony01",
+      "contributions": [
+        "code"
+      ]
     }
   ],
   "commitConvention": "none"

.github/workflows/metrics-merge-rate.yml

@@ -46,7 +46,7 @@ jobs:
           echo "- **Merge Rate**: $MERGE_RATE%" >> $GITHUB_STEP_SUMMARY
 
       - name: Send message to Slack
-        uses: slackapi/slack-github-action@485a9d42d3a73031f12ec201c457e2162c45d02d # v2.0.0
+        uses: slackapi/slack-github-action@b0fa283ad8fea605de13dc3f449259339835fc52 # v2.1.0
         with:
           webhook: ${{ secrets.SLACK_WEBHOOK_URL }}
           webhook-type: incoming-webhook

.github/workflows/slack-announcement.yml

@@ -37,7 +37,7 @@ jobs:
     steps:
       - name: Send slack announcement
         id: slack
-        uses: slackapi/slack-github-action@485a9d42d3a73031f12ec201c457e2162c45d02d # v2.0.0
+        uses: slackapi/slack-github-action@b0fa283ad8fea605de13dc3f449259339835fc52 # v2.1.0
         with:
           webhook: ${{ secrets.SLACK_WEBHOOK_URL }}
           webhook-type: incoming-webhook

.github/workflows/slack-build-notifications.yml

@@ -24,7 +24,7 @@ jobs:
     steps:
       - name: Send custom JSON data to Slack
         id: slack-success
-        uses: slackapi/slack-github-action@485a9d42d3a73031f12ec201c457e2162c45d02d # v2.0.0
+        uses: slackapi/slack-github-action@b0fa283ad8fea605de13dc3f449259339835fc52 # v2.1.0
         with:
           webhook: ${{ secrets.SLACK_WEBHOOK_URL }}
           webhook-type: incoming-webhook
@@ -41,7 +41,7 @@ jobs:
     steps:
       - name: Send custom JSON data to Slack
         id: slack-failure
-        uses: slackapi/slack-github-action@485a9d42d3a73031f12ec201c457e2162c45d02d # v2.0.0
+        uses: slackapi/slack-github-action@b0fa283ad8fea605de13dc3f449259339835fc52 # v2.1.0
         with:
           webhook: ${{ secrets.SLACK_WEBHOOK_URL }}
           webhook-type: incoming-webhook

.github/workflows/slack-office-hours-design.yml

@@ -13,7 +13,7 @@ jobs:
     steps:
       - name: Send custom JSON data to Slack workflow
         id: slack
-        uses: slackapi/slack-github-action@485a9d42d3a73031f12ec201c457e2162c45d02d # v2.0.0
+        uses: slackapi/slack-github-action@b0fa283ad8fea605de13dc3f449259339835fc52 # v2.1.0
         with:
           webhook: ${{ secrets.SLACK_WEBHOOK_URL }}
           webhook-type: incoming-webhook

.github/workflows/slack-office-hours-dev.yml

@@ -12,7 +12,7 @@ jobs:
     steps:
       - name: Send custom JSON data to Slack workflow
         id: slack
-        uses: slackapi/slack-github-action@485a9d42d3a73031f12ec201c457e2162c45d02d # v2.0.0
+        uses: slackapi/slack-github-action@b0fa283ad8fea605de13dc3f449259339835fc52 # v2.1.0
         with:
           webhook: ${{ secrets.SLACK_WEBHOOK_URL }}
           webhook-type: incoming-webhook
@@ -104,7 +104,7 @@ jobs:
     steps:
       - name: Send custom JSON data to Slack workflow
         id: slack
-        uses: slackapi/slack-github-action@485a9d42d3a73031f12ec201c457e2162c45d02d # v2.0.0
+        uses: slackapi/slack-github-action@b0fa283ad8fea605de13dc3f449259339835fc52 # v2.1.0
         with:
           webhook: ${{ secrets.SLACK_WEBHOOK_URL }}
           webhook-type: incoming-webhook
@@ -196,7 +196,7 @@ jobs:
     steps:
       - name: Send custom JSON data to Slack workflow
         id: slack
-        uses: slackapi/slack-github-action@485a9d42d3a73031f12ec201c457e2162c45d02d # v2.0.0
+        uses: slackapi/slack-github-action@b0fa283ad8fea605de13dc3f449259339835fc52 # v2.1.0
         with:
           webhook: ${{ secrets.SLACK_WEBHOOK_URL }}
           webhook-type: incoming-webhook

.yarn/cache/nanoid-npm-5.1.5-79b61a9d37-6de2d006b5.zip

@@ -336,9 +336,16 @@ check out our [Contributing Guide](/.github/CONTRIBUTING.md) and our
     <td align="center"><a href="https://github.com/maisonsmd"><img src="https://avatars.githubusercontent.com/u/16435155?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Son H. Mai (Mason)</b></sub></a><br /><a href="https://github.com/carbon-design-system/carbon/commits?author=maisonsmd" title="Code">💻</a></td>
     <td align="center"><a href="https://github.com/warrenmblood"><img src="https://avatars.githubusercontent.com/u/69060697?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Warren Blood</b></sub></a><br /><a href="https://github.com/carbon-design-system/carbon/commits?author=warrenmblood" title="Code">💻</a></td>
     <td align="center"><a href="https://github.com/vcherneny"><img src="https://avatars.githubusercontent.com/u/11604315?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Vlad Cherneny</b></sub></a><br /><a href="https://github.com/carbon-design-system/carbon/commits?author=vcherneny" title="Code">💻</a></td>
+    <td align="center"><a href="https://github.com/dkaushik95"><img src="https://avatars.githubusercontent.com/u/8481567?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Dishant Kaushik</b></sub></a><br /><a href="https://github.com/carbon-design-system/carbon/commits?author=dkaushik95" title="Code">💻</a></td>
+    <td align="center"><a href="https://github.com/jose-biescas"><img src="https://avatars.githubusercontent.com/u/188625806?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Jose Biescas</b></sub></a><br /><a href="https://github.com/carbon-design-system/carbon/commits?author=jose-biescas" title="Code">💻</a></td>
+  </tr>
+  <tr>
     <td align="center"><a href="https://github.com/murito"><img src="https://avatars.githubusercontent.com/u/2628140?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Francisco Alcalá</b></sub></a><br /><a href="https://github.com/carbon-design-system/carbon/commits?author=murito" title="Code">💻</a></td>
     <td align="center"><a href="https://www.linkedin.com/in/sujithcs"><img src="https://avatars.githubusercontent.com/u/43125517?v=4?s=100" width="100px;" alt=""/><br /><sub><b>SUJITH C S</b></sub></a><br /><a href="https://github.com/carbon-design-system/carbon/commits?author=Code-Suji" title="Code">💻</a></td>
+  </tr>
+  <tr>
     <td align="center"><a href="https://github.com/mariyageorge01"><img src="https://avatars.githubusercontent.com/u/166684108?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Mariya George</b></sub></a><br /><a href="https://github.com/carbon-design-system/carbon/commits?author=mariyageorge01" title="Code">💻</a></td>
+    <td align="center"><a href="https://github.com/sojinantony01"><img src="https://avatars.githubusercontent.com/u/29255847?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Sojin antony</b></sub></a><br /><a href="https://github.com/carbon-design-system/carbon/commits?author=sojinantony01" title="Code">💻</a></td>
   </tr>
 </table>
 

README.md

@@ -34,7 +34,6 @@ test.describe('@avt Modal', () => {
     const button = page.getByRole('button', { name: 'Launch modal' });
 
     // Open the modal via keyboard navigation
-    await expect(button).toBeFocused();
     button.press('Enter');
 
     // The first interactive item in the modal should be focused once the modal is open

e2e/components/Modal/Modal-test.avt.e2e.js

@@ -20,7 +20,7 @@ module.exports = {
   ],
   coveragePathIgnorePatterns: ['packages/web-components/*'],
   testPathIgnorePatterns: ['packages/web-components/*'],
-  transformIgnorePatterns: ['<rootDir>/node_modules/(?!lodash-es)'],
+  transformIgnorePatterns: ['<rootDir>/node_modules/(?!lodash-es|nanoid)'],
   moduleNameMapper: {
     // This is a temporary workaround from moving to Jest v28. In this update,
     // certain dependencies are only providing ESM through exports and so we use

jest.config.js

@@ -2943,6 +2943,9 @@ Map {
       "disabled": Object {
         "type": "bool",
       },
+      "dismissTooltipLabel": Object {
+        "type": "string",
+      },
       "id": Object {
         "type": "string",
       },
@@ -7063,6 +7066,9 @@ Map {
       "className": Object {
         "type": "string",
       },
+      "defaultSelected": Object {
+        "type": "bool",
+      },
       "disabled": Object {
         "type": "bool",
       },

packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap

@@ -350,6 +350,66 @@ describe('DatePicker', () => {
     expect(screen.getByLabelText('Date Picker label')).toHaveValue('');
     warn.mockRestore();
   });
+
+  it('end date in range mode should not retain old value after setting to null', async () => {
+    const DatePickerExample = () => {
+      const resetValues = { fromDate: null, toDate: null };
+      const [dateRange, setDateRange] = useState(resetValues);
+      const onChange = ({ fromDate, toDate }) => {
+        setDateRange({ fromDate, toDate });
+      };
+      return (
+        <>
+          <DatePicker
+            datePickerType="range"
+            onChange={(dates) => {
+              const [start, end] = dates;
+              onChange({ fromDate: start, toDate: end });
+            }}
+            value={
+              dateRange ? [dateRange.fromDate, dateRange.toDate] : [null, null]
+            }>
+            <DatePickerInput
+              id="fromDate"
+              placeholder="mm/dd/yyyy"
+              labelText="FromDate"
+            />
+            <DatePickerInput
+              id="toDate"
+              placeholder="mm/dd/yyyy"
+              labelText="ToDate"
+            />
+          </DatePicker>
+          <button type="button" onClick={() => setDateRange(resetValues)}>
+            reset
+          </button>
+        </>
+      );
+    };
+    render(<DatePickerExample />);
+
+    // populate fromDate and toDate values
+    await userEvent.type(
+      screen.getByLabelText('FromDate'),
+      '01/14/2025{enter}'
+    );
+    await userEvent.type(screen.getByLabelText('ToDate'), '02/10/2025{enter}');
+
+    // reset both values
+    await userEvent.click(screen.getByText('reset'));
+
+    // assert that toDate is empty
+    expect(screen.getByLabelText('ToDate')).toHaveValue('');
+
+    // populate fromDate
+    await userEvent.type(
+      screen.getByLabelText('FromDate'),
+      '01/14/2025{enter}'
+    );
+
+    // assert that toDate is still empty
+    expect(screen.getByLabelText('ToDate')).toHaveValue('');
+  });
 });
 
 describe('Simple date picker', () => {

packages/react/src/components/DatePicker/DatePicker-test.js

@@ -205,7 +205,7 @@ export type CalRef = {
 export interface DatePickerProps {
   /**
    * Flatpickr prop passthrough enables direct date input, and when set to false,
-   * we must clear dates manually by resetting the value prop to empty string making it a controlled input.
+   * we must clear dates manually by resetting the value prop to to a falsy value (such as `""`, `null`, or `undefined`) or an array of all falsy values, making it a controlled input.
    */
   allowInput?: boolean;
 
@@ -853,10 +853,18 @@ const DatePicker = React.forwardRef(function DatePicker(
       calendarRef.current.set('inline', inline);
     }
   }, [inline]);
+
   useEffect(() => {
-    //when value prop is set to empty, this clears the flatpicker's calendar instance and text input
-    if (value === '') {
+    // when value prop is manually reset, this clears the flatpickr calendar instance and text input
+    // run if both:
+    // 1. value prop is set to a falsy value (`""`, `undefined`, `null`, etc) OR an array of all falsy values
+    // 2. flatpickr instance contains values in its `selectedDates` property so it hasn't already been cleared
+    if (
+      (!value || (Array.isArray(value) && value.every((date) => !date))) &&
+      calendarRef.current?.selectedDates.length
+    ) {
       calendarRef.current?.clear();
+
       if (startInputField.current) {
         startInputField.current.value = '';
       }
@@ -974,7 +982,7 @@ const DatePicker = React.forwardRef(function DatePicker(
 DatePicker.propTypes = {
   /**
    * Flatpickr prop passthrough enables direct date input, and when set to false,
-   * we must clear dates manually by resetting the value prop to empty string making it a controlled input.
+   * we must clear dates manually by resetting the value prop to a falsy value (such as `""`, `null`, or `undefined`) or an array of all falsy values, making it a controlled input.
    */
   allowInput: PropTypes.bool,