Merge branch 'main' into 16994-inconsistent-focus-for-nested-menu-items

Author: kennylam

.github/renovate.json5

@@ -11,10 +11,12 @@
 
     // https://docs.renovatebot.com/presets-npm/#npmunpublishsafe
     'npm:unpublishSafe',
-
-    // https://docs.renovatebot.com/presets-schedule/#scheduledaily
-    'schedule:every weekday',
   ],
+  "schedule": [
+    "after 10pm every weekday",
+    "before 5am every weekday",
+    "every weekend"
+  ]
   vulnerabilityAlerts: {
     enabled: true,
   },

.github/workflows/ci.yml

@@ -19,7 +19,7 @@ jobs:
     steps:
       - uses: actions/checkout@692973e3d937129bcbf40652eb9f2f61becf3332 # v4.1.7
       - name: Use Node.js 20.x
-        uses: actions/setup-node@60edb5dd545a775178f52524783378180af0d1f8 #v4.0.2
+        uses: actions/setup-node@1e60f620b9541d16bece96c5465dc8ee9832be0b #v4.0.3
         with:
           node-version: '20.x'
       - name: Run yarn dedupe
@@ -30,7 +30,7 @@ jobs:
     steps:
       - uses: actions/checkout@692973e3d937129bcbf40652eb9f2f61becf3332 # v4.1.7
       - name: Use Node.js 20.x
-        uses: actions/setup-node@60edb5dd545a775178f52524783378180af0d1f8 #v4.0.2
+        uses: actions/setup-node@1e60f620b9541d16bece96c5465dc8ee9832be0b #v4.0.3
         with:
           node-version: '20.x'
       - name: Install dependencies
@@ -43,7 +43,7 @@ jobs:
     steps:
       - uses: actions/checkout@692973e3d937129bcbf40652eb9f2f61becf3332 # v4.1.7
       - name: Use Node.js 20.x
-        uses: actions/setup-node@60edb5dd545a775178f52524783378180af0d1f8 #v4.0.2
+        uses: actions/setup-node@1e60f620b9541d16bece96c5465dc8ee9832be0b #v4.0.3
         with:
           node-version: '20.x'
       - name: Install dependencies
@@ -58,7 +58,7 @@ jobs:
     steps:
       - uses: actions/checkout@692973e3d937129bcbf40652eb9f2f61becf3332 # v4.1.7
       - name: Use Node.js 20.x
-        uses: actions/setup-node@60edb5dd545a775178f52524783378180af0d1f8 #v4.0.2
+        uses: actions/setup-node@1e60f620b9541d16bece96c5465dc8ee9832be0b #v4.0.3
         with:
           node-version: '20.x'
       - uses: actions/cache@0c45773b623bea8c8e75f6c82b208c3cf94ea4f9 #v4.0.2
@@ -85,7 +85,7 @@ jobs:
     steps:
       - uses: actions/checkout@692973e3d937129bcbf40652eb9f2f61becf3332 # v4.1.7
       - name: Use Node.js 20.x
-        uses: actions/setup-node@60edb5dd545a775178f52524783378180af0d1f8 #v4.0.2
+        uses: actions/setup-node@1e60f620b9541d16bece96c5465dc8ee9832be0b #v4.0.3
         with:
           node-version: '20.x'
       - uses: actions/cache@0c45773b623bea8c8e75f6c82b208c3cf94ea4f9 #v4.0.2
@@ -125,7 +125,7 @@ jobs:
     steps:
       - uses: actions/checkout@692973e3d937129bcbf40652eb9f2f61becf3332 # v4.1.7
       - name: Use Node.js 20.x
-        uses: actions/setup-node@60edb5dd545a775178f52524783378180af0d1f8 #v4.0.2
+        uses: actions/setup-node@1e60f620b9541d16bece96c5465dc8ee9832be0b #v4.0.3
         with:
           node-version: '20.x'
       - uses: actions/cache@0c45773b623bea8c8e75f6c82b208c3cf94ea4f9 #v4.0.2
@@ -188,7 +188,7 @@ jobs:
     steps:
       - uses: actions/checkout@692973e3d937129bcbf40652eb9f2f61becf3332 # v4.1.7
       - name: Use Node.js 20.x
-        uses: actions/setup-node@60edb5dd545a775178f52524783378180af0d1f8 #v4.0.2
+        uses: actions/setup-node@1e60f620b9541d16bece96c5465dc8ee9832be0b #v4.0.3
         with:
           node-version: '20.x'
       - uses: actions/cache@0c45773b623bea8c8e75f6c82b208c3cf94ea4f9 #v4.0.2

.github/workflows/deploy-packages.yml

@@ -21,7 +21,7 @@ jobs:
           repository: carbon-design-system/design-language-website
           ref: master
       - name: Use Node.js 20.x
-        uses: actions/setup-node@60edb5dd545a775178f52524783378180af0d1f8 #v4.0.2
+        uses: actions/setup-node@1e60f620b9541d16bece96c5465dc8ee9832be0b #v4.0.3
         with:
           node-version: '20.x'
           registry-url: 'https://registry.npmjs.org'
@@ -63,7 +63,7 @@ jobs:
           repository: carbon-design-system/gatsby-theme-carbon
           ref: main
       - name: Use Node.js 20.x
-        uses: actions/setup-node@60edb5dd545a775178f52524783378180af0d1f8 #v4.0.2
+        uses: actions/setup-node@1e60f620b9541d16bece96c5465dc8ee9832be0b #v4.0.3
         with:
           node-version: '20.x'
           registry-url: 'https://registry.npmjs.org'

.github/workflows/deploy-react-storybook.yml

@@ -30,7 +30,7 @@ jobs:
     steps:
       - uses: actions/checkout@692973e3d937129bcbf40652eb9f2f61becf3332 # 4.1.7
       - name: Use Node.js 20.x
-        uses: actions/setup-node@60edb5dd545a775178f52524783378180af0d1f8 #v4.0.2
+        uses: actions/setup-node@1e60f620b9541d16bece96c5465dc8ee9832be0b #v4.0.3
         with:
           node-version: '20.x'
       - name: Install dependencies

.github/workflows/nightly-release.yml

@@ -15,7 +15,7 @@ jobs:
     steps:
       - uses: actions/checkout@692973e3d937129bcbf40652eb9f2f61becf3332 # v4.1.7
       - name: Use Node.js 20.x
-        uses: actions/setup-node@60edb5dd545a775178f52524783378180af0d1f8 #v4.0.2
+        uses: actions/setup-node@1e60f620b9541d16bece96c5465dc8ee9832be0b #v4.0.3
         with:
           node-version: '20.x'
       - name: Install dependencies

.github/workflows/release.yml

@@ -21,7 +21,7 @@ jobs:
       - uses: actions/checkout@692973e3d937129bcbf40652eb9f2f61becf3332 # v4.1.7
 
       - name: Use Node.js 20.x
-        uses: actions/setup-node@60edb5dd545a775178f52524783378180af0d1f8 #v4.0.2
+        uses: actions/setup-node@1e60f620b9541d16bece96c5465dc8ee9832be0b #v4.0.3
         with:
           node-version: '20.x'
           registry-url: 'https://registry.npmjs.org'

.github/workflows/sync-generated-files.yml

@@ -9,7 +9,7 @@ jobs:
     steps:
       - uses: actions/checkout@692973e3d937129bcbf40652eb9f2f61becf3332 # v4.1.7
       - name: Use Node.js 20.x
-        uses: actions/setup-node@60edb5dd545a775178f52524783378180af0d1f8 #v4.0.2
+        uses: actions/setup-node@1e60f620b9541d16bece96c5465dc8ee9832be0b #v4.0.3
         with:
           node-version: '20.x'
       - name: Install dependencies

.github/workflows/v10-ci.yml

@@ -16,7 +16,7 @@ jobs:
       - uses: actions/checkout@692973e3d937129bcbf40652eb9f2f61becf3332 # v4.1.7
 
       - name: Use Node.js 20.x
-        uses: actions/setup-node@60edb5dd545a775178f52524783378180af0d1f8 #v4.0.2
+        uses: actions/setup-node@1e60f620b9541d16bece96c5465dc8ee9832be0b #v4.0.3
         with:
           node-version: '20.x'
       - name: Run yarn dedupe
@@ -29,7 +29,7 @@ jobs:
         with:
           ref: v10
       - name: Use Node.js 20.x
-        uses: actions/setup-node@60edb5dd545a775178f52524783378180af0d1f8 #v4.0.2
+        uses: actions/setup-node@1e60f620b9541d16bece96c5465dc8ee9832be0b #v4.0.3
         with:
           node-version: '20.x'
       - name: Install dependencies
@@ -44,7 +44,7 @@ jobs:
         with:
           ref: v10
       - name: Use Node.js 20.x
-        uses: actions/setup-node@60edb5dd545a775178f52524783378180af0d1f8 #v4.0.2
+        uses: actions/setup-node@1e60f620b9541d16bece96c5465dc8ee9832be0b #v4.0.3
         with:
           node-version: '20.x'
       - name: Install dependencies
@@ -61,7 +61,7 @@ jobs:
         with:
           ref: v10
       - name: Use Node.js 20.x
-        uses: actions/setup-node@60edb5dd545a775178f52524783378180af0d1f8 #v4.0.2
+        uses: actions/setup-node@1e60f620b9541d16bece96c5465dc8ee9832be0b #v4.0.3
         with:
           node-version: '20.x'
       - uses: actions/cache@0c45773b623bea8c8e75f6c82b208c3cf94ea4f9 #v4.0.2
@@ -89,7 +89,7 @@ jobs:
         with:
           ref: v10
       - name: Use Node.js 20.x
-        uses: actions/setup-node@60edb5dd545a775178f52524783378180af0d1f8 #v4.0.2
+        uses: actions/setup-node@1e60f620b9541d16bece96c5465dc8ee9832be0b #v4.0.3
         with:
           node-version: '20.x'
       - uses: actions/cache@0c45773b623bea8c8e75f6c82b208c3cf94ea4f9 #v4.0.2

.github/workflows/v10-deploy-react-storybook.yml

@@ -19,7 +19,7 @@ jobs:
       - uses: actions/checkout@692973e3d937129bcbf40652eb9f2f61becf3332 # v4.1.7
 
       - name: Use Node.js 20.x
-        uses: actions/setup-node@60edb5dd545a775178f52524783378180af0d1f8 #v4.0.2
+        uses: actions/setup-node@1e60f620b9541d16bece96c5465dc8ee9832be0b #v4.0.3
         with:
           node-version: '20.x'
       - name: Install dependencies

.github/workflows/v10-release.yml

@@ -19,7 +19,7 @@ jobs:
       - uses: actions/checkout@692973e3d937129bcbf40652eb9f2f61becf3332 # v4.1.7
 
       - name: Use Node.js 20.x
-        uses: actions/setup-node@60edb5dd545a775178f52524783378180af0d1f8 #v4.0.2
+        uses: actions/setup-node@1e60f620b9541d16bece96c5465dc8ee9832be0b #v4.0.3
         with:
           node-version: '20.x'
           registry-url: 'https://registry.npmjs.org'

.github/workflows/version.yml

@@ -32,7 +32,7 @@ jobs:
         with:
           fetch-depth: '0'
       - name: Use Node.js 20.x
-        uses: actions/setup-node@60edb5dd545a775178f52524783378180af0d1f8 #v4.0.2
+        uses: actions/setup-node@1e60f620b9541d16bece96c5465dc8ee9832be0b #v4.0.3
         with:
           node-version: '20.x'
           registry-url: 'https://registry.npmjs.org'

.yarn/cache/@ibm-plex-mono-npm-0.0.3-alpha.0-2becc6711b-fbdfb70762.zip

@@ -297,11 +297,8 @@ check out our [Contributing Guide](/.github/CONTRIBUTING.md) and our
     <td align="center"><a href="https://github.com/nandininarayanofficial"><img src="https://avatars.githubusercontent.com/u/165769075?v=4?s=100" width="100px;" alt=""/><br /><sub><b>nandininarayanofficial</b></sub></a><br /><a href="https://github.com/carbon-design-system/carbon/commits?author=nandininarayanofficial" title="Code">💻</a></td>
     <td align="center"><a href="https://github.com/digiacomo-a"><img src="https://avatars.githubusercontent.com/u/117646602?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Andrea DG</b></sub></a><br /><a href="https://github.com/carbon-design-system/carbon/commits?author=digiacomo-a" title="Code">💻</a></td>
     <td align="center"><a href="https://github.com/lluisrojass"><img src="https://avatars.githubusercontent.com/u/15043356?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Luis</b></sub></a><br /><a href="https://github.com/carbon-design-system/carbon/commits?author=lluisrojass" title="Code">💻</a></td>
-
     <td align="center"><a href="https://github.com/lharrison13"><img src="https://avatars.githubusercontent.com/u/172074450?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Luke Harrison</b></sub></a><br /><a href="https://github.com/carbon-design-system/carbon/commits?author=lharrison13" title="Code">💻</a></td>
-
     <td align="center"><a href="https://github.com/tekno0ryder"><img src="https://avatars.githubusercontent.com/u/8721803?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Ahmed Alsinan</b></sub></a><br /><a href="https://github.com/carbon-design-system/carbon/commits?author=tekno0ryder" title="Code">💻</a></td>
-
   </tr>
 </table>
 

.yarn/cache/@ibm-plex-npm-6.0.0-next.6-9aee23c93c-1a81475964.zip

@@ -10,7 +10,7 @@
 const path = require('path');
 
 module.exports = {
-  ruleArchive: 'latest',
+  ruleArchive: '17June2024',
   policies: ['Custom_Ruleset'],
   failLevels: ['violation'],
   reportLevels: [

.yarn/cache/@ibm-plex-sans-arabic-npm-0.0.3-alpha.0-5a162c0760-c390dd9788.zip

@@ -2136,3 +2136,11 @@ were importing `@carbon/type/scss/styles` in v10 you would now only import
 |                      | display-02              | fluid-display-02   | Updated   |
 |                      | display-03              | fluid-display-03   | Updated   |
 |                      | display-04              | fluid-display-04   | Updated   |
+
+When applying a fluid token with the `type-style()` mixin, you'll need to pass a
+second parameter to indicate it's a fluid token:
+
+```diff
+- @include type.type-style('expressive-heading-04');
++ @include type.type-style('fluid-heading-04', true);
+```

.yarn/cache/@ibm-plex-sans-devanagari-npm-0.0.3-alpha.0-7f13ef378d-ef3cd96710.zip

@@ -1278,6 +1278,16 @@ Map {
       "disabled": Object {
         "type": "bool",
       },
+      "downshiftActions": Object {
+        "args": Array [
+          Object {
+            "current": Object {
+              "type": "any",
+            },
+          },
+        ],
+        "type": "exact",
+      },
       "downshiftProps": Object {
         "type": "object",
       },
@@ -7717,6 +7727,9 @@ Map {
       "onKeyDown": Object {
         "type": "func",
       },
+      "rel": Object {
+        "type": "string",
+      },
       "tabIndex": Object {
         "type": "number",
       },

.yarn/cache/@ibm-plex-sans-hebrew-npm-0.0.3-alpha.0-e21223915a-e67ed6e081.zip

@@ -49,18 +49,64 @@ next element.
 <Combobox disabled />
 ```
 
-## Combobox `downshiftProps`
+## Combobox uses Downshift
 
 Our `Combobox` component utilizes [Downshift](https://www.downshift-js.com/)
 under the hood to help provide complex yet accessible custom dropdown
-components. We provide access to the built in Downshift features with this prop.
+components.
 
-Use with caution: anything you define here overrides the components' internal
-handling of that prop. Downshift internals are subject to change, and in some
-cases they can not be shimmed to shield you from potentially breaking changes.
+### `downshiftProps`
 
-For more information, checkout the Downshift prop
-[documentation](https://www.downshift-js.com/downshift#props-used-in-examples)
+`downshiftProps` is made available as a passthrough to the underlying downshift
+`useCombobox` hook.
+
+**Use with caution:** anything you define here overrides the components'
+internal handling of that prop. Downshift internals are subject to change, and
+in some cases they can not be shimmed to shield you from potentially breaking
+changes.
+
+For more information, checkout the Downshift `useCombobox` props
+[documentation](https://github.com/downshift-js/downshift/tree/v9.0.7/src/hooks/useCombobox#basic-props)
+
+### Combobox `downshiftActions`
+
+The downshift action methods are made available through the `downshiftActions`
+prop. While not recommended, this prop allows you to modify downshift's internal
+state without having to fully control the component.
+
+**Use with caution:** calling these actions modifies the internal state of
+downshift. It may conflict with or override the state management used within
+Combobox. Downshift APIs and internals are subject to change, and in some cases
+they can not be shimmed by Carbon to shield you from potentially breaking
+changes.
+
+#### `downshiftActions` Usage
+
+Provide a ref that will be mutated to contain an object of downshift action
+functions. These can be called to change the internal state of the downshift
+useCombobox hook.
+
+```
+const downshiftActions = useRef();
+
+return (
+  <ComboBox
+    ...
+    downshiftActions={downshiftActions}
+    downshiftProps={{
+      onStateChange: (changes) => {
+        if (changes.selectedItem === null) {
+          downshiftActions?.current?.openMenu?.();
+          return;
+        }
+      },
+    }}
+  />
+);
+```
+
+For more information, checkout the Downshift `useCombobox` action functions
+[documentation](https://github.com/downshift-js/downshift/tree/v9.0.7/src/hooks/useCombobox#actions)
 
 ## Placeholders and Labeling
 

.yarn/cache/@ibm-plex-sans-npm-0.0.3-alpha.0-eadb18db06-5b0b0521db.zip

@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import React from 'react';
+import React, { useRef } from 'react';
 
 import { WithLayer } from '../../../.storybook/templates/WithLayer';
 
@@ -65,6 +65,42 @@ export default {
   },
 };
 
+export const DownshiftActionsTest = () => {
+  const downshiftActions = useRef();
+
+  return (
+    <div style={{ width: 300 }}>
+      <ComboBox
+        onChange={() => {}}
+        id="carbon-combobox"
+        items={items}
+        itemToString={(item) => (item ? item.text : '')}
+        titleText="ComboBox title"
+        helperText="Combobox helper text"
+        downshiftActions={downshiftActions}
+        downshiftProps={{
+          onStateChange: (changes) => {
+            console.log('onStateChange changes', changes);
+
+            if (changes.selectedItem === null) {
+              downshiftActions?.current?.openMenu?.();
+              return;
+            }
+            if (changes?.isOpen && changes?.inputValue === 'Option 1') {
+              downshiftActions?.current?.setInputValue?.('');
+              return;
+            }
+            if (!changes?.isOpen && changes?.inputValue !== 'Option 1') {
+              downshiftActions?.current?.setInputValue?.('Option 1');
+              return;
+            }
+          },
+        }}
+      />
+    </div>
+  );
+};
+
 export const Default = () => (
   <div style={{ width: 300 }}>
     <ComboBox