@cloudscape-design/components 3.0.1342 → 3.0.1344

package/internal/environment.json

@@ -1,7 +1,7 @@
 {
   "PACKAGE_SOURCE": "components",
-  "PACKAGE_VERSION": "3.0.0 (6db99848)",
-  "GIT_SHA": "6db99848",
+  "PACKAGE_VERSION": "3.0.0 (21c5e82c)",
+  "GIT_SHA": "21c5e82c",
   "THEME": "open-source-visual-refresh",
   "SYSTEM": "core",
   "ALWAYS_VISUAL_REFRESH": true,

package/internal/generated/styles/tokens.d.ts

@@ -437,6 +437,7 @@ export const colorBackgroundInputDisabled: string;
 export const colorBackgroundItemSelected: string;
 export const colorBackgroundSideNavigationItemActive: string;
 export const colorBackgroundSideNavigationItemActiveCollapsed: string;
+export const colorBackgroundSideNavigationItemIconHover: string;
 export const colorBackgroundLayoutMain: string;
 export const colorBackgroundLayoutAiDrawer: string;
 export const colorBackgroundDrawer: string;

package/internal/generated/styles/tokens.js

@@ -437,6 +437,7 @@ export var colorBackgroundInputDisabled = "var(--color-background-input-disabled
 export var colorBackgroundItemSelected = "var(--color-background-item-selected-9gppru, #f0fbff)";
 export var colorBackgroundSideNavigationItemActive = "var(--color-background-side-navigation-item-active-adfprg, transparent)";
 export var colorBackgroundSideNavigationItemActiveCollapsed = "var(--color-background-side-navigation-item-active-collapsed-ceubmy, #006ce0)";
+export var colorBackgroundSideNavigationItemIconHover = "var(--color-background-side-navigation-item-icon-hover-ul9ia1, #f0fbff)";
 export var colorBackgroundLayoutMain = "var(--color-background-layout-main-5ilwcb, #ffffff)";
 export var colorBackgroundLayoutAiDrawer = "var(--color-background-layout-ai-drawer-b4mvv3, #161d26)";
 export var colorBackgroundDrawer = "var(--color-background-drawer-5hs0eh, #ffffff)";
@@ -729,7 +730,7 @@ export var colorIconActionCardDefault = "var(--color-icon-action-card-default-an
 export var colorIconActionCardHover = "var(--color-icon-action-card-hover-qxq4pp, #002b66)";
 export var colorIconActionCardActive = "var(--color-icon-action-card-active-rhp94s, #002b66)";
 export var colorIconActionCardDisabled = "var(--color-icon-action-card-disabled-wm3kyf, #b4b4bb)";
-export var colorBackgroundSkeleton = "var(--color-background-skeleton-sjxg4n, #ebebf0)";
+export var colorBackgroundSkeleton = "var(--color-background-skeleton-h3lxqh, #8c8c94)";
 export var colorBackgroundSkeletonWave = "var(--color-background-skeleton-wave-1dy97d, #f6f6f9)";
 export var colorBackgroundBadgeGreen = "var(--color-background-badge-green-1bcjh0, #00802f)";
 export var colorBackgroundBadgeBlue = "var(--color-background-badge-blue-6346bd, #006ce0)";

package/internal/generated/theming/index.cjs

@@ -1795,6 +1795,10 @@ module.exports.preset = {
         "light": "{colorBackgroundControlChecked}",
         "dark": "{colorBackgroundControlChecked}"
       },
+      "colorBackgroundSideNavigationItemIconHover": {
+        "light": "{colorPrimary50}",
+        "dark": "{colorNeutral700}"
+      },
       "colorBackgroundLayoutMain": {
         "light": "{colorWhite}",
         "dark": "{colorNeutral850}"
@@ -2964,8 +2968,8 @@ module.exports.preset = {
         "dark": "{colorNeutral600}"
       },
       "colorBackgroundSkeleton": {
-        "light": "{colorNeutral250}",
-        "dark": "{colorNeutral750}"
+        "light": "{colorNeutral500}",
+        "dark": "{colorNeutral600}"
       },
       "colorBackgroundSkeletonWave": {
         "light": "{colorNeutral150}",
@@ -4799,6 +4803,10 @@ module.exports.preset = {
             "light": "{colorBackgroundControlChecked}",
             "dark": "{colorBackgroundControlChecked}"
           },
+          "colorBackgroundSideNavigationItemIconHover": {
+            "light": "{colorNeutral700}",
+            "dark": "{colorNeutral700}"
+          },
           "colorBackgroundLayoutMain": {
             "light": "{colorNeutral850}",
             "dark": "{colorNeutral850}"
@@ -5968,8 +5976,8 @@ module.exports.preset = {
             "dark": "{colorNeutral600}"
           },
           "colorBackgroundSkeleton": {
-            "light": "{colorNeutral750}",
-            "dark": "{colorNeutral750}"
+            "light": "{colorNeutral600}",
+            "dark": "{colorNeutral600}"
           },
           "colorBackgroundSkeletonWave": {
             "light": "{colorNeutral700}",
@@ -6615,6 +6623,10 @@ module.exports.preset = {
             "light": "{colorBackgroundControlChecked}",
             "dark": "{colorBackgroundControlChecked}"
           },
+          "colorBackgroundSideNavigationItemIconHover": {
+            "light": "{colorNeutral700}",
+            "dark": "{colorNeutral700}"
+          },
           "colorBackgroundLayoutMain": {
             "light": "{colorNeutral950}",
             "dark": "{colorNeutral950}"
@@ -7784,8 +7796,8 @@ module.exports.preset = {
             "dark": "{colorNeutral600}"
           },
           "colorBackgroundSkeleton": {
-            "light": "{colorNeutral750}",
-            "dark": "{colorNeutral750}"
+            "light": "{colorNeutral600}",
+            "dark": "{colorNeutral600}"
           },
           "colorBackgroundSkeletonWave": {
             "light": "{colorNeutral700}",
@@ -8359,6 +8371,10 @@ module.exports.preset = {
             "light": "{colorBackgroundControlChecked}",
             "dark": "{colorBackgroundControlChecked}"
           },
+          "colorBackgroundSideNavigationItemIconHover": {
+            "light": "{colorPrimary50}",
+            "dark": "{colorNeutral700}"
+          },
           "colorBackgroundLayoutMain": {
             "light": "{colorWhite}",
             "dark": "{colorNeutral850}"
@@ -9528,8 +9544,8 @@ module.exports.preset = {
             "dark": "{colorNeutral600}"
           },
           "colorBackgroundSkeleton": {
-            "light": "{colorNeutral250}",
-            "dark": "{colorNeutral750}"
+            "light": "{colorNeutral500}",
+            "dark": "{colorNeutral600}"
           },
           "colorBackgroundSkeletonWave": {
             "light": "{colorNeutral150}",
@@ -9949,6 +9965,10 @@ module.exports.preset = {
             "light": "{colorBackgroundControlChecked}",
             "dark": "{colorBackgroundControlChecked}"
           },
+          "colorBackgroundSideNavigationItemIconHover": {
+            "light": "{colorPrimary50}",
+            "dark": "{colorNeutral700}"
+          },
           "colorBackgroundLayoutMain": {
             "light": "{colorWhite}",
             "dark": "{colorNeutral850}"
@@ -11118,8 +11138,8 @@ module.exports.preset = {
             "dark": "{colorNeutral600}"
           },
           "colorBackgroundSkeleton": {
-            "light": "{colorNeutral250}",
-            "dark": "{colorNeutral750}"
+            "light": "{colorNeutral500}",
+            "dark": "{colorNeutral600}"
           },
           "colorBackgroundSkeletonWave": {
             "light": "{colorNeutral150}",
@@ -11539,6 +11559,10 @@ module.exports.preset = {
             "light": "{colorBackgroundControlChecked}",
             "dark": "{colorBackgroundControlChecked}"
           },
+          "colorBackgroundSideNavigationItemIconHover": {
+            "light": "{colorPrimary50}",
+            "dark": "{colorNeutral700}"
+          },
           "colorBackgroundLayoutMain": {
             "light": "{colorWhite}",
             "dark": "{colorNeutral850}"
@@ -12708,8 +12732,8 @@ module.exports.preset = {
             "dark": "{colorNeutral600}"
           },
           "colorBackgroundSkeleton": {
-            "light": "{colorNeutral250}",
-            "dark": "{colorNeutral750}"
+            "light": "{colorNeutral500}",
+            "dark": "{colorNeutral600}"
           },
           "colorBackgroundSkeletonWave": {
             "light": "{colorNeutral150}",
@@ -13131,6 +13155,10 @@ module.exports.preset = {
             "light": "{colorBackgroundControlChecked}",
             "dark": "{colorBackgroundControlChecked}"
           },
+          "colorBackgroundSideNavigationItemIconHover": {
+            "light": "{colorNeutral700}",
+            "dark": "{colorNeutral700}"
+          },
           "colorBackgroundLayoutMain": {
             "light": "{colorNeutral850}",
             "dark": "{colorNeutral850}"
@@ -14300,8 +14328,8 @@ module.exports.preset = {
             "dark": "{colorNeutral600}"
           },
           "colorBackgroundSkeleton": {
-            "light": "{colorNeutral750}",
-            "dark": "{colorNeutral750}"
+            "light": "{colorNeutral600}",
+            "dark": "{colorNeutral600}"
           },
           "colorBackgroundSkeletonWave": {
             "light": "{colorNeutral700}",
@@ -14932,6 +14960,7 @@ module.exports.preset = {
       "colorBackgroundItemSelected": "color",
       "colorBackgroundSideNavigationItemActive": "color",
       "colorBackgroundSideNavigationItemActiveCollapsed": "color",
+      "colorBackgroundSideNavigationItemIconHover": "color",
       "colorBackgroundLayoutMain": "color",
       "colorBackgroundLayoutAiDrawer": "color",
       "colorBackgroundDrawer": "color",
@@ -17215,6 +17244,7 @@ module.exports.preset = {
     "colorBackgroundItemSelected": "color-background-item-selected",
     "colorBackgroundSideNavigationItemActive": "color-background-side-navigation-item-active",
     "colorBackgroundSideNavigationItemActiveCollapsed": "color-background-side-navigation-item-active-collapsed",
+    "colorBackgroundSideNavigationItemIconHover": "color-background-side-navigation-item-icon-hover",
     "colorBackgroundLayoutMain": "color-background-layout-main",
     "colorBackgroundLayoutAiDrawer": "color-background-layout-ai-drawer",
     "colorBackgroundDrawer": "color-background-drawer",
@@ -18337,6 +18367,7 @@ module.exports.preset = {
     "colorBackgroundItemSelected": "--color-background-item-selected-9gppru",
     "colorBackgroundSideNavigationItemActive": "--color-background-side-navigation-item-active-adfprg",
     "colorBackgroundSideNavigationItemActiveCollapsed": "--color-background-side-navigation-item-active-collapsed-ceubmy",
+    "colorBackgroundSideNavigationItemIconHover": "--color-background-side-navigation-item-icon-hover-ul9ia1",
     "colorBackgroundLayoutMain": "--color-background-layout-main-5ilwcb",
     "colorBackgroundLayoutAiDrawer": "--color-background-layout-ai-drawer-b4mvv3",
     "colorBackgroundDrawer": "--color-background-drawer-5hs0eh",
@@ -18629,7 +18660,7 @@ module.exports.preset = {
     "colorIconActionCardHover": "--color-icon-action-card-hover-qxq4pp",
     "colorIconActionCardActive": "--color-icon-action-card-active-rhp94s",
     "colorIconActionCardDisabled": "--color-icon-action-card-disabled-wm3kyf",
-    "colorBackgroundSkeleton": "--color-background-skeleton-sjxg4n",
+    "colorBackgroundSkeleton": "--color-background-skeleton-h3lxqh",
     "colorBackgroundSkeletonWave": "--color-background-skeleton-wave-1dy97d",
     "colorBackgroundBadgeGreen": "--color-background-badge-green-1bcjh0",
     "colorBackgroundBadgeBlue": "--color-background-badge-blue-6346bd",

package/internal/generated/theming/index.js

@@ -1795,6 +1795,10 @@ export var preset = {
         "light": "{colorBackgroundControlChecked}",
         "dark": "{colorBackgroundControlChecked}"
       },
+      "colorBackgroundSideNavigationItemIconHover": {
+        "light": "{colorPrimary50}",
+        "dark": "{colorNeutral700}"
+      },
       "colorBackgroundLayoutMain": {
         "light": "{colorWhite}",
         "dark": "{colorNeutral850}"
@@ -2964,8 +2968,8 @@ export var preset = {
         "dark": "{colorNeutral600}"
       },
       "colorBackgroundSkeleton": {
-        "light": "{colorNeutral250}",
-        "dark": "{colorNeutral750}"
+        "light": "{colorNeutral500}",
+        "dark": "{colorNeutral600}"
       },
       "colorBackgroundSkeletonWave": {
         "light": "{colorNeutral150}",
@@ -4799,6 +4803,10 @@ export var preset = {
             "light": "{colorBackgroundControlChecked}",
             "dark": "{colorBackgroundControlChecked}"
           },
+          "colorBackgroundSideNavigationItemIconHover": {
+            "light": "{colorNeutral700}",
+            "dark": "{colorNeutral700}"
+          },
           "colorBackgroundLayoutMain": {
             "light": "{colorNeutral850}",
             "dark": "{colorNeutral850}"
@@ -5968,8 +5976,8 @@ export var preset = {
             "dark": "{colorNeutral600}"
           },
           "colorBackgroundSkeleton": {
-            "light": "{colorNeutral750}",
-            "dark": "{colorNeutral750}"
+            "light": "{colorNeutral600}",
+            "dark": "{colorNeutral600}"
           },
           "colorBackgroundSkeletonWave": {
             "light": "{colorNeutral700}",
@@ -6615,6 +6623,10 @@ export var preset = {
             "light": "{colorBackgroundControlChecked}",
             "dark": "{colorBackgroundControlChecked}"
           },
+          "colorBackgroundSideNavigationItemIconHover": {
+            "light": "{colorNeutral700}",
+            "dark": "{colorNeutral700}"
+          },
           "colorBackgroundLayoutMain": {
             "light": "{colorNeutral950}",
             "dark": "{colorNeutral950}"
@@ -7784,8 +7796,8 @@ export var preset = {
             "dark": "{colorNeutral600}"
           },
           "colorBackgroundSkeleton": {
-            "light": "{colorNeutral750}",
-            "dark": "{colorNeutral750}"
+            "light": "{colorNeutral600}",
+            "dark": "{colorNeutral600}"
           },
           "colorBackgroundSkeletonWave": {
             "light": "{colorNeutral700}",
@@ -8359,6 +8371,10 @@ export var preset = {
             "light": "{colorBackgroundControlChecked}",
             "dark": "{colorBackgroundControlChecked}"
           },
+          "colorBackgroundSideNavigationItemIconHover": {
+            "light": "{colorPrimary50}",
+            "dark": "{colorNeutral700}"
+          },
           "colorBackgroundLayoutMain": {
             "light": "{colorWhite}",
             "dark": "{colorNeutral850}"
@@ -9528,8 +9544,8 @@ export var preset = {
             "dark": "{colorNeutral600}"
           },
           "colorBackgroundSkeleton": {
-            "light": "{colorNeutral250}",
-            "dark": "{colorNeutral750}"
+            "light": "{colorNeutral500}",
+            "dark": "{colorNeutral600}"
           },
           "colorBackgroundSkeletonWave": {
             "light": "{colorNeutral150}",
@@ -9949,6 +9965,10 @@ export var preset = {
             "light": "{colorBackgroundControlChecked}",
             "dark": "{colorBackgroundControlChecked}"
           },
+          "colorBackgroundSideNavigationItemIconHover": {
+            "light": "{colorPrimary50}",
+            "dark": "{colorNeutral700}"
+          },
           "colorBackgroundLayoutMain": {
             "light": "{colorWhite}",
             "dark": "{colorNeutral850}"
@@ -11118,8 +11138,8 @@ export var preset = {
             "dark": "{colorNeutral600}"
           },
           "colorBackgroundSkeleton": {
-            "light": "{colorNeutral250}",
-            "dark": "{colorNeutral750}"
+            "light": "{colorNeutral500}",
+            "dark": "{colorNeutral600}"
           },
           "colorBackgroundSkeletonWave": {
             "light": "{colorNeutral150}",
@@ -11539,6 +11559,10 @@ export var preset = {
             "light": "{colorBackgroundControlChecked}",
             "dark": "{colorBackgroundControlChecked}"
           },
+          "colorBackgroundSideNavigationItemIconHover": {
+            "light": "{colorPrimary50}",
+            "dark": "{colorNeutral700}"
+          },
           "colorBackgroundLayoutMain": {
             "light": "{colorWhite}",
             "dark": "{colorNeutral850}"
@@ -12708,8 +12732,8 @@ export var preset = {
             "dark": "{colorNeutral600}"
           },
           "colorBackgroundSkeleton": {
-            "light": "{colorNeutral250}",
-            "dark": "{colorNeutral750}"
+            "light": "{colorNeutral500}",
+            "dark": "{colorNeutral600}"
           },
           "colorBackgroundSkeletonWave": {
             "light": "{colorNeutral150}",
@@ -13131,6 +13155,10 @@ export var preset = {
             "light": "{colorBackgroundControlChecked}",
             "dark": "{colorBackgroundControlChecked}"
           },
+          "colorBackgroundSideNavigationItemIconHover": {
+            "light": "{colorNeutral700}",
+            "dark": "{colorNeutral700}"
+          },
           "colorBackgroundLayoutMain": {
             "light": "{colorNeutral850}",
             "dark": "{colorNeutral850}"
@@ -14300,8 +14328,8 @@ export var preset = {
             "dark": "{colorNeutral600}"
           },
           "colorBackgroundSkeleton": {
-            "light": "{colorNeutral750}",
-            "dark": "{colorNeutral750}"
+            "light": "{colorNeutral600}",
+            "dark": "{colorNeutral600}"
           },
           "colorBackgroundSkeletonWave": {
             "light": "{colorNeutral700}",
@@ -14932,6 +14960,7 @@ export var preset = {
       "colorBackgroundItemSelected": "color",
       "colorBackgroundSideNavigationItemActive": "color",
       "colorBackgroundSideNavigationItemActiveCollapsed": "color",
+      "colorBackgroundSideNavigationItemIconHover": "color",
       "colorBackgroundLayoutMain": "color",
       "colorBackgroundLayoutAiDrawer": "color",
       "colorBackgroundDrawer": "color",
@@ -17215,6 +17244,7 @@ export var preset = {
     "colorBackgroundItemSelected": "color-background-item-selected",
     "colorBackgroundSideNavigationItemActive": "color-background-side-navigation-item-active",
     "colorBackgroundSideNavigationItemActiveCollapsed": "color-background-side-navigation-item-active-collapsed",
+    "colorBackgroundSideNavigationItemIconHover": "color-background-side-navigation-item-icon-hover",
     "colorBackgroundLayoutMain": "color-background-layout-main",
     "colorBackgroundLayoutAiDrawer": "color-background-layout-ai-drawer",
     "colorBackgroundDrawer": "color-background-drawer",
@@ -18337,6 +18367,7 @@ export var preset = {
     "colorBackgroundItemSelected": "--color-background-item-selected-9gppru",
     "colorBackgroundSideNavigationItemActive": "--color-background-side-navigation-item-active-adfprg",
     "colorBackgroundSideNavigationItemActiveCollapsed": "--color-background-side-navigation-item-active-collapsed-ceubmy",
+    "colorBackgroundSideNavigationItemIconHover": "--color-background-side-navigation-item-icon-hover-ul9ia1",
     "colorBackgroundLayoutMain": "--color-background-layout-main-5ilwcb",
     "colorBackgroundLayoutAiDrawer": "--color-background-layout-ai-drawer-b4mvv3",
     "colorBackgroundDrawer": "--color-background-drawer-5hs0eh",
@@ -18629,7 +18660,7 @@ export var preset = {
     "colorIconActionCardHover": "--color-icon-action-card-hover-qxq4pp",
     "colorIconActionCardActive": "--color-icon-action-card-active-rhp94s",
     "colorIconActionCardDisabled": "--color-icon-action-card-disabled-wm3kyf",
-    "colorBackgroundSkeleton": "--color-background-skeleton-sjxg4n",
+    "colorBackgroundSkeleton": "--color-background-skeleton-h3lxqh",
     "colorBackgroundSkeletonWave": "--color-background-skeleton-wave-1dy97d",
     "colorBackgroundBadgeGreen": "--color-background-badge-green-1bcjh0",
     "colorBackgroundBadgeBlue": "--color-background-badge-blue-6346bd",

package/internal/manifest.json

@@ -1,3 +1,3 @@
 {
-  "commit": "6db99848695ad631858cad7dea69c46d347003ea"
+  "commit": "21c5e82cac052ddeb69a09b6dc20090543f19fff"
 }

package/manifest.json

@@ -1,5 +1,5 @@
 {
-  "artifactId": "8961009388",
+  "artifactId": "9071858249",
   "repoName": "components",
-  "commitSha": "6db99848695ad631858cad7dea69c46d347003ea"
+  "commitSha": "21c5e82cac052ddeb69a09b6dc20090543f19fff"
 }

package/multiselect/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/multiselect/index.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,MAAM,OAAO,CAAC;AAO1B,OAAO,EAAE,gBAAgB,EAAE,MAAM,cAAc,CAAC;AAKhD,OAAO,EAAE,gBAAgB,EAAE,CAAC;AAE5B,QAAA,MAAM,WAAW,+FAkEhB,CAAC;AAGF,eAAe,WAAW,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/multiselect/index.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,MAAM,OAAO,CAAC;AAO1B,OAAO,EAAE,gBAAgB,EAAE,MAAM,cAAc,CAAC;AAKhD,OAAO,EAAE,gBAAgB,EAAE,CAAC;AAE5B,QAAA,MAAM,WAAW,+FAsEhB,CAAC;AAGF,eAAe,WAAW,CAAC"}

package/multiselect/index.js

@@ -20,10 +20,14 @@ const Multiselect = React.forwardRef(({ options = [], filteringType = 'none', st
             virtualScroll: restProps.virtualScroll,
             readOnly: restProps.readOnly,
             enableSelectAll: restProps.enableSelectAll,
+            dropdownRole: restProps.dropdownRole,
         },
         metadata: {
             hasInlineLabel: Boolean(restProps.inlineLabelText),
             hasDisabledReasons: options.some(option => Boolean(option.disabledReason)),
+            hasDropdownHeader: Boolean(restProps.renderDropdownHeader),
+            hasDropdownFooter: Boolean(restProps.renderDropdownFooter),
+            hasDropdownAriaDescribedby: Boolean(restProps.dropdownAriaDescribedby),
         },
     });
     const componentAnalyticsMetadata = {

package/multiselect/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/multiselect/index.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,YAAY,CAAC;AACb,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,6BAA6B,EAAE,MAAM,kEAAkE,CAAC;AAEjH,OAAO,gBAAgB,MAAM,sCAAsC,CAAC;AACpE,OAAO,EAAE,gBAAgB,EAAE,MAAM,sCAAsC,CAAC;AAGxE,OAAO,mBAAmB,MAAM,YAAY,CAAC;AAE7C,OAAO,+BAA+B,MAAM,wEAAwE,CAAC;AAIrH,MAAM,WAAW,GAAG,KAAK,CAAC,UAAU,CAClC,CACE,EACE,OAAO,GAAG,EAAE,EACZ,aAAa,GAAG,MAAM,EACtB,UAAU,GAAG,UAAU,EACvB,eAAe,GAAG,EAAE,EACpB,QAAQ,GAAG,IAAI,EACf,UAAU,GAAG,KAAK,EAClB,YAAY,EACZ,GAAG,SAAS,EACK,EACnB,GAAoC,EACpC,EAAE;IACF,MAAM,kBAAkB,GAAG,gBAAgB,CAAC,aAAa,EAAE;QACzD,KAAK,EAAE;YACL,YAAY,EAAE,SAAS,CAAC,YAAY;YACpC,SAAS,EAAE,SAAS,CAAC,SAAS;YAC9B,gBAAgB,EAAE,SAAS,CAAC,gBAAgB;YAC5C,aAAa;YACb,UAAU;YACV,QAAQ;YACR,UAAU,EAAE,SAAS,CAAC,UAAU;YAChC,aAAa,EAAE,SAAS,CAAC,aAAa;YACtC,QAAQ,EAAE,SAAS,CAAC,QAAQ;YAC5B,eAAe,EAAE,SAAS,CAAC,eAAe;SAC3C;QACD,QAAQ,EAAE;YACR,cAAc,EAAE,OAAO,CAAC,SAAS,CAAC,eAAe,CAAC;YAClD,kBAAkB,EAAE,OAAO,CAAC,IAAI,CAAC,MAAM,CAAC,EAAE,CAAC,OAAO,CAAC,MAAM,CAAC,cAAc,CAAC,CAAC;SAC3E;KACF,CAAC,CAAC;IAEH,MAAM,0BAA0B,GAAmD;QACjF,IAAI,EAAE,mBAAmB;QACzB,KAAK,EAAE,IAAI,+BAA+B,CAAC,gBAAgB,CAAC,EAAE;QAC9D,UAAU,EAAE;YACV,QAAQ,EAAE,GAAG,CAAC,CAAC,SAAS,CAAC,QAAQ,EAAE;YACnC,oBAAoB,EAAE,GAAG,eAAe,CAAC,MAAM,EAAE;YACjD,qBAAqB,EAAE,eAAe;iBACnC,MAAM,CAAC,MAAM,CAAC,EAAE,CAAC,MAAM,CAAC,KAAK,KAAK,SAAS,CAAC;iBAC5C,GAAG,CAAC,MAAM,CAAC,EAAE,CAAC,GAAG,MAAM,CAAC,KAAK,EAAE,CAAC;YACnC,eAAe,EAAE,eAAe;iBAC7B,MAAM,CAAC,MAAM,CAAC,EAAE,CAAC,MAAM,CAAC,KAAK,KAAK,SAAS,CAAC;gBAC7C,uFAAuF;gBACvF,2BAA2B;iBAC1B,GAAG,CAAC,MAAM,CAAC,EAAE,WAAC,OAAA,GAAG,MAAA,MAAM,CAAC,KAAK,mCAAI,MAAM,CAAC,KAAK,EAAE,CAAA,EAAA,CAAC;SACpD;KACF,CAAC;IAEF,OAAO,CACL,oBAAC,mBAAmB,IAClB,YAAY,EAAE,YAAY,EAC1B,OAAO,EAAE,OAAO,EAChB,aAAa,EAAE,aAAa,EAC5B,UAAU,EAAE,UAAU,EACtB,eAAe,EAAE,eAAe,EAChC,QAAQ,EAAE,QAAQ,EAClB,UAAU,EAAE,UAAU,KAClB,SAAS,KACT,kBAAkB,EACtB,GAAG,EAAE,GAAG,KACJ,6BAA6B,CAAC,EAAE,SAAS,EAAE,0BAA0B,EAAE,CAAC,GAC5E,CACH,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,gBAAgB,CAAC,WAAW,EAAE,aAAa,CAAC,CAAC;AAC7C,eAAe,WAAW,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\n'use client';\nimport React from 'react';\n\nimport { getAnalyticsMetadataAttribute } from '@cloudscape-design/component-toolkit/internal/analytics-metadata';\n\nimport useBaseComponent from '../internal/hooks/use-base-component';\nimport { applyDisplayName } from '../internal/utils/apply-display-name';\nimport { GeneratedAnalyticsMetadataMultiselectComponent } from './analytics-metadata/interfaces';\nimport { MultiselectProps } from './interfaces';\nimport InternalMultiselect from './internal';\n\nimport buttonTriggerAnalyticsSelectors from '../internal/components/button-trigger/analytics-metadata/styles.css.js';\n\nexport { MultiselectProps };\n\nconst Multiselect = React.forwardRef(\n  (\n    {\n      options = [],\n      filteringType = 'none',\n      statusType = 'finished',\n      selectedOptions = [],\n      keepOpen = true,\n      hideTokens = false,\n      renderOption,\n      ...restProps\n    }: MultiselectProps,\n    ref: React.Ref<MultiselectProps.Ref>\n  ) => {\n    const baseComponentProps = useBaseComponent('Multiselect', {\n      props: {\n        inlineTokens: restProps.inlineTokens,\n        autoFocus: restProps.autoFocus,\n        expandToViewport: restProps.expandToViewport,\n        filteringType,\n        hideTokens,\n        keepOpen,\n        tokenLimit: restProps.tokenLimit,\n        virtualScroll: restProps.virtualScroll,\n        readOnly: restProps.readOnly,\n        enableSelectAll: restProps.enableSelectAll,\n      },\n      metadata: {\n        hasInlineLabel: Boolean(restProps.inlineLabelText),\n        hasDisabledReasons: options.some(option => Boolean(option.disabledReason)),\n      },\n    });\n\n    const componentAnalyticsMetadata: GeneratedAnalyticsMetadataMultiselectComponent = {\n      name: 'awsui.Multiselect',\n      label: `.${buttonTriggerAnalyticsSelectors['button-trigger']}`,\n      properties: {\n        disabled: `${!!restProps.disabled}`,\n        selectedOptionsCount: `${selectedOptions.length}`,\n        selectedOptionsValues: selectedOptions\n          .filter(option => option.value !== undefined)\n          .map(option => `${option.value}`),\n        selectedOptions: selectedOptions\n          .filter(option => option.value !== undefined)\n          // fallback on value when label's undefined because in the dropdown if there's no label\n          // the value will be shown.\n          .map(option => `${option.label ?? option.value}`),\n      },\n    };\n\n    return (\n      <InternalMultiselect\n        renderOption={renderOption}\n        options={options}\n        filteringType={filteringType}\n        statusType={statusType}\n        selectedOptions={selectedOptions}\n        keepOpen={keepOpen}\n        hideTokens={hideTokens}\n        {...restProps}\n        {...baseComponentProps}\n        ref={ref}\n        {...getAnalyticsMetadataAttribute({ component: componentAnalyticsMetadata })}\n      />\n    );\n  }\n);\n\napplyDisplayName(Multiselect, 'Multiselect');\nexport default Multiselect;\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/multiselect/index.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\n'use client';\nimport React from 'react';\n\nimport { getAnalyticsMetadataAttribute } from '@cloudscape-design/component-toolkit/internal/analytics-metadata';\n\nimport useBaseComponent from '../internal/hooks/use-base-component';\nimport { applyDisplayName } from '../internal/utils/apply-display-name';\nimport { GeneratedAnalyticsMetadataMultiselectComponent } from './analytics-metadata/interfaces';\nimport { MultiselectProps } from './interfaces';\nimport InternalMultiselect from './internal';\n\nimport buttonTriggerAnalyticsSelectors from '../internal/components/button-trigger/analytics-metadata/styles.css.js';\n\nexport { MultiselectProps };\n\nconst Multiselect = React.forwardRef(\n  (\n    {\n      options = [],\n      filteringType = 'none',\n      statusType = 'finished',\n      selectedOptions = [],\n      keepOpen = true,\n      hideTokens = false,\n      renderOption,\n      ...restProps\n    }: MultiselectProps,\n    ref: React.Ref<MultiselectProps.Ref>\n  ) => {\n    const baseComponentProps = useBaseComponent('Multiselect', {\n      props: {\n        inlineTokens: restProps.inlineTokens,\n        autoFocus: restProps.autoFocus,\n        expandToViewport: restProps.expandToViewport,\n        filteringType,\n        hideTokens,\n        keepOpen,\n        tokenLimit: restProps.tokenLimit,\n        virtualScroll: restProps.virtualScroll,\n        readOnly: restProps.readOnly,\n        enableSelectAll: restProps.enableSelectAll,\n        dropdownRole: restProps.dropdownRole,\n      },\n      metadata: {\n        hasInlineLabel: Boolean(restProps.inlineLabelText),\n        hasDisabledReasons: options.some(option => Boolean(option.disabledReason)),\n        hasDropdownHeader: Boolean(restProps.renderDropdownHeader),\n        hasDropdownFooter: Boolean(restProps.renderDropdownFooter),\n        hasDropdownAriaDescribedby: Boolean(restProps.dropdownAriaDescribedby),\n      },\n    });\n\n    const componentAnalyticsMetadata: GeneratedAnalyticsMetadataMultiselectComponent = {\n      name: 'awsui.Multiselect',\n      label: `.${buttonTriggerAnalyticsSelectors['button-trigger']}`,\n      properties: {\n        disabled: `${!!restProps.disabled}`,\n        selectedOptionsCount: `${selectedOptions.length}`,\n        selectedOptionsValues: selectedOptions\n          .filter(option => option.value !== undefined)\n          .map(option => `${option.value}`),\n        selectedOptions: selectedOptions\n          .filter(option => option.value !== undefined)\n          // fallback on value when label's undefined because in the dropdown if there's no label\n          // the value will be shown.\n          .map(option => `${option.label ?? option.value}`),\n      },\n    };\n\n    return (\n      <InternalMultiselect\n        renderOption={renderOption}\n        options={options}\n        filteringType={filteringType}\n        statusType={statusType}\n        selectedOptions={selectedOptions}\n        keepOpen={keepOpen}\n        hideTokens={hideTokens}\n        {...restProps}\n        {...baseComponentProps}\n        ref={ref}\n        {...getAnalyticsMetadataAttribute({ component: componentAnalyticsMetadata })}\n      />\n    );\n  }\n);\n\napplyDisplayName(Multiselect, 'Multiselect');\nexport default Multiselect;\n"]}

package/multiselect/interfaces.d.ts

@@ -1,6 +1,6 @@
 import { ReactNode } from 'react';
 import { OptionsLoadItemsDetail } from '../dropdown/interfaces';
-import { BaseSelectProps } from '../select/interfaces';
+import { BaseSelectProps, SelectProps } from '../select/interfaces';
 import { NonCancelableEventHandler } from '../types/events';
 import { OptionDefinition, OptionGroup as OptionGroupDefinition } from '../types/option';
 export interface MultiselectProps extends BaseSelectProps {
@@ -78,6 +78,13 @@ export declare namespace MultiselectProps {
   type Option = OptionDefinition;
   type OptionGroup = OptionGroupDefinition;
   type Options = ReadonlyArray<Option | OptionGroup>;
+  /**
+   * The argument passed to the dropdown render functions (`renderDropdownHeader`
+   * and `renderDropdownFooter`).
+   */
+  type DropdownContentProps = SelectProps.DropdownContentProps;
+  type DropdownRole = SelectProps.DropdownRole;
+  type DropdownContentRenderer = SelectProps.DropdownContentRenderer;
   interface LoadItemsDetail extends OptionsLoadItemsDetail {}
   interface MultiselectOptionItem {
     type: 'item';

package/multiselect/interfaces.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"interfaces.d.ts","sourceRoot":"","sources":["../../../src/multiselect/interfaces.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"interfaces.d.ts","sourceRoot":"","sources":["../../../src/multiselect/interfaces.ts"],"names":[],"mappings":"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"}

package/multiselect/interfaces.js.map

@@ -1 +1 @@
-{"version":3,"file":"interfaces.js","sourceRoot":"","sources":["../../../src/multiselect/interfaces.ts"],"names":[],"mappings":"","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport { ReactNode } from 'react';\n\nimport { OptionsLoadItemsDetail } from '../dropdown/interfaces';\nimport { BaseSelectProps } from '../select/interfaces';\nimport { NonCancelableEventHandler } from '../types/events';\nimport { OptionDefinition, OptionGroup as OptionGroupDefinition } from '../types/option';\n\nexport interface MultiselectProps extends BaseSelectProps {\n  /**\n   * Specifies the currently selected options.\n   * Provide an empty array to clear the selection.\n   */\n  selectedOptions: ReadonlyArray<MultiselectProps.Option>;\n\n  /**\n   * Specifies an inline label that appears next to the multiselect trigger.\n   */\n  inlineLabelText?: string;\n  /**\n   * Determines whether the dropdown list stays open after the user selects an item.\n   */\n  keepOpen?: boolean;\n  /**\n   * Specifies the maximum number of displayed tokens. If the property isn't set, all of the tokens are displayed.\n   */\n  tokenLimit?: number;\n  /**\n   * Hides the tokens displayed underneath the component.\n   * Only use this if the selected options are displayed elsewhere on the page.\n   */\n  hideTokens?: boolean;\n  /**\n   * Shows tokens inside the trigger instead of below it.\n   */\n  inlineTokens?: boolean;\n  /**\n   * Specifies an `aria-label` for the token deselection button.\n   * @i18n\n   */\n  deselectAriaLabel?: MultiselectProps.DeselectAriaLabelFunction;\n  /**\n   * An object containing all the localized strings required by the component.\n   *\n   * * `selectAllText` (string) - Specifies the text to be displayed next to the checkbox that selects or deselects all options.\n   * * `tokenLimitShowFewer` (string) - Specifies the text to be displayed in the \"Show fewer\" button for the token group control.\n   * * `tokenLimitShowMore` (string) - Specifies the text to be displayed in the \"Show more\" button for the token group control. This string should not contain the number of hidden tokens\n   * because this will be added by the component automatically.\n   * @i18n\n   */\n  i18nStrings?: MultiselectProps.I18nStrings;\n  onLoadItems?: NonCancelableEventHandler<MultiselectProps.LoadItemsDetail>;\n  /**\n   * Called when the user selects or deselects an option.\n   * The event `detail` contains the current `selectedOptions`.\n   */\n  onChange?: NonCancelableEventHandler<MultiselectProps.MultiselectChangeDetail>;\n\n  /**\n   * Automatically focuses the trigger when component is mounted.\n   */\n  autoFocus?: boolean;\n\n  /**\n   * Adds an aria-label to the \"Show fewer\" button for the token group control.\n   * Use to assign unique labels when there are multiple token groups with the same `tokenLimitShowFewer` label on one page.\n   */\n  tokenLimitShowFewerAriaLabel?: string;\n  /**\n   * Adds an aria-label to the \"Show more\" button for the token group control.\n   * Use to assign unique labels when there are multiple token groups with the same `tokenLimitShowMore` label on one page.\n   */\n  tokenLimitShowMoreAriaLabel?: string;\n  /**\n   * Enables users to select and deselect all options with a special extra checkbox which is displayed at the start of the dropdown.\n   */\n  enableSelectAll?: boolean;\n  /**\n   * Specifies a render function to render custom options in the dropdown menu.\n   */\n  renderOption?: MultiselectProps.MultiselectOptionItemRenderer;\n}\n\nexport namespace MultiselectProps {\n  export type Option = OptionDefinition;\n  export type OptionGroup = OptionGroupDefinition;\n  export type Options = ReadonlyArray<Option | OptionGroup>;\n  /* eslint-disable-next-line @typescript-eslint/no-empty-object-type --\n   * Required to create a distinct named type for the documenter.\n   **/\n  export interface LoadItemsDetail extends OptionsLoadItemsDetail {}\n  export interface MultiselectOptionItem {\n    type: 'item';\n    index: number;\n    option: Option;\n    disabled: boolean;\n    highlighted: boolean;\n    selected: boolean;\n    parent: MultiselectOptionGroupItem | null;\n  }\n  export interface MultiselectOptionGroupItem {\n    type: 'group';\n    index: number;\n    option: OptionGroup;\n    indeterminate: boolean;\n    disabled: boolean;\n    highlighted: boolean;\n    selected: boolean;\n  }\n  export interface MultiselectSelectAllItem {\n    type: 'select-all';\n    option: Option;\n    indeterminate: boolean;\n    highlighted: boolean;\n    selected: boolean;\n  }\n  export type MultiselectItem = MultiselectOptionItem | MultiselectOptionGroupItem | MultiselectSelectAllItem;\n  export type MultiselectOptionItemRenderer = (props: {\n    item: MultiselectItem;\n    filterText?: string;\n  }) => ReactNode | null;\n\n  export type DeselectAriaLabelFunction = (option: Option) => string;\n  export type TriggerVariant = 'placeholder' | 'tokens';\n\n  export interface I18nStrings {\n    selectAllText?: string;\n    tokenLimitShowFewer?: string;\n    tokenLimitShowMore?: string;\n  }\n\n  export interface MultiselectChangeDetail {\n    selectedOptions: ReadonlyArray<Option>;\n  }\n\n  export interface Ref {\n    /**\n     * Sets focus on the element without opening the dropdown or showing a visual focus indicator.\n     */\n    focus(): void;\n  }\n}\n"]}
+{"version":3,"file":"interfaces.js","sourceRoot":"","sources":["../../../src/multiselect/interfaces.ts"],"names":[],"mappings":"","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport { ReactNode } from 'react';\n\nimport { OptionsLoadItemsDetail } from '../dropdown/interfaces';\nimport { BaseSelectProps, SelectProps } from '../select/interfaces';\nimport { NonCancelableEventHandler } from '../types/events';\nimport { OptionDefinition, OptionGroup as OptionGroupDefinition } from '../types/option';\n\nexport interface MultiselectProps extends BaseSelectProps {\n  /**\n   * Specifies the currently selected options.\n   * Provide an empty array to clear the selection.\n   */\n  selectedOptions: ReadonlyArray<MultiselectProps.Option>;\n\n  /**\n   * Specifies an inline label that appears next to the multiselect trigger.\n   */\n  inlineLabelText?: string;\n  /**\n   * Determines whether the dropdown list stays open after the user selects an item.\n   */\n  keepOpen?: boolean;\n  /**\n   * Specifies the maximum number of displayed tokens. If the property isn't set, all of the tokens are displayed.\n   */\n  tokenLimit?: number;\n  /**\n   * Hides the tokens displayed underneath the component.\n   * Only use this if the selected options are displayed elsewhere on the page.\n   */\n  hideTokens?: boolean;\n  /**\n   * Shows tokens inside the trigger instead of below it.\n   */\n  inlineTokens?: boolean;\n  /**\n   * Specifies an `aria-label` for the token deselection button.\n   * @i18n\n   */\n  deselectAriaLabel?: MultiselectProps.DeselectAriaLabelFunction;\n  /**\n   * An object containing all the localized strings required by the component.\n   *\n   * * `selectAllText` (string) - Specifies the text to be displayed next to the checkbox that selects or deselects all options.\n   * * `tokenLimitShowFewer` (string) - Specifies the text to be displayed in the \"Show fewer\" button for the token group control.\n   * * `tokenLimitShowMore` (string) - Specifies the text to be displayed in the \"Show more\" button for the token group control. This string should not contain the number of hidden tokens\n   * because this will be added by the component automatically.\n   * @i18n\n   */\n  i18nStrings?: MultiselectProps.I18nStrings;\n  onLoadItems?: NonCancelableEventHandler<MultiselectProps.LoadItemsDetail>;\n  /**\n   * Called when the user selects or deselects an option.\n   * The event `detail` contains the current `selectedOptions`.\n   */\n  onChange?: NonCancelableEventHandler<MultiselectProps.MultiselectChangeDetail>;\n\n  /**\n   * Automatically focuses the trigger when component is mounted.\n   */\n  autoFocus?: boolean;\n\n  /**\n   * Adds an aria-label to the \"Show fewer\" button for the token group control.\n   * Use to assign unique labels when there are multiple token groups with the same `tokenLimitShowFewer` label on one page.\n   */\n  tokenLimitShowFewerAriaLabel?: string;\n  /**\n   * Adds an aria-label to the \"Show more\" button for the token group control.\n   * Use to assign unique labels when there are multiple token groups with the same `tokenLimitShowMore` label on one page.\n   */\n  tokenLimitShowMoreAriaLabel?: string;\n  /**\n   * Enables users to select and deselect all options with a special extra checkbox which is displayed at the start of the dropdown.\n   */\n  enableSelectAll?: boolean;\n  /**\n   * Specifies a render function to render custom options in the dropdown menu.\n   */\n  renderOption?: MultiselectProps.MultiselectOptionItemRenderer;\n}\n\nexport namespace MultiselectProps {\n  export type Option = OptionDefinition;\n  export type OptionGroup = OptionGroupDefinition;\n  export type Options = ReadonlyArray<Option | OptionGroup>;\n\n  /**\n   * The argument passed to the dropdown render functions (`renderDropdownHeader`\n   * and `renderDropdownFooter`).\n   */\n  export type DropdownContentProps = SelectProps.DropdownContentProps;\n  export type DropdownRole = SelectProps.DropdownRole;\n  export type DropdownContentRenderer = SelectProps.DropdownContentRenderer;\n  /* eslint-disable-next-line @typescript-eslint/no-empty-object-type --\n   * Required to create a distinct named type for the documenter.\n   **/\n  export interface LoadItemsDetail extends OptionsLoadItemsDetail {}\n  export interface MultiselectOptionItem {\n    type: 'item';\n    index: number;\n    option: Option;\n    disabled: boolean;\n    highlighted: boolean;\n    selected: boolean;\n    parent: MultiselectOptionGroupItem | null;\n  }\n  export interface MultiselectOptionGroupItem {\n    type: 'group';\n    index: number;\n    option: OptionGroup;\n    indeterminate: boolean;\n    disabled: boolean;\n    highlighted: boolean;\n    selected: boolean;\n  }\n  export interface MultiselectSelectAllItem {\n    type: 'select-all';\n    option: Option;\n    indeterminate: boolean;\n    highlighted: boolean;\n    selected: boolean;\n  }\n  export type MultiselectItem = MultiselectOptionItem | MultiselectOptionGroupItem | MultiselectSelectAllItem;\n  export type MultiselectOptionItemRenderer = (props: {\n    item: MultiselectItem;\n    filterText?: string;\n  }) => ReactNode | null;\n\n  export type DeselectAriaLabelFunction = (option: Option) => string;\n  export type TriggerVariant = 'placeholder' | 'tokens';\n\n  export interface I18nStrings {\n    selectAllText?: string;\n    tokenLimitShowFewer?: string;\n    tokenLimitShowMore?: string;\n  }\n\n  export interface MultiselectChangeDetail {\n    selectedOptions: ReadonlyArray<Option>;\n  }\n\n  export interface Ref {\n    /**\n     * Sets focus on the element without opening the dropdown or showing a visual focus indicator.\n     */\n    focus(): void;\n  }\n}\n"]}

package/multiselect/internal.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"internal.d.ts","sourceRoot":"","sources":["../../../src/multiselect/internal.tsx"],"names":[],"mappings":"AAEA,OAAO,KAA2B,MAAM,OAAO,CAAC;AAYhD,OAAO,EAAE,0BAA0B,EAAE,MAAM,+CAA+C,CAAC;AAU3F,OAAO,EAAE,gBAAgB,EAAE,MAAM,cAAc,CAAC;AAahD,QAAA,MAAM,mBAAmB;;;;;;;2EAoMxB,CAAC;AAEF,eAAe,mBAAmB,CAAC"}
+{"version":3,"file":"internal.d.ts","sourceRoot":"","sources":["../../../src/multiselect/internal.tsx"],"names":[],"mappings":"AAEA,OAAO,KAA2B,MAAM,OAAO,CAAC;AAYhD,OAAO,EAAE,0BAA0B,EAAE,MAAM,+CAA+C,CAAC;AAW3F,OAAO,EAAE,gBAAgB,EAAE,MAAM,cAAc,CAAC;AAahD,QAAA,MAAM,mBAAmB;;;;;;;2EA6NxB,CAAC;AAEF,eAAe,mBAAmB,CAAC"}

package/multiselect/internal.js

@@ -16,10 +16,11 @@ import Filter from '../select/parts/filter';
 import PlainList from '../select/parts/plain-list';
 import Trigger from '../select/parts/trigger';
 import VirtualList from '../select/parts/virtual-list';
+import { composeDropdownContent } from '../select/utils/dropdown-customization';
 import InternalTokenGroup from '../token-group/internal';
 import { useMultiselect } from './use-multiselect';
 import styles from './styles.css.js';
-const InternalMultiselect = React.forwardRef(({ options, filteringType, filteringPlaceholder, filteringAriaLabel, filteringClearAriaLabel, ariaRequired, placeholder, disabled, readOnly, ariaLabel, inlineLabelText, selectedOptions, deselectAriaLabel, tokenLimit, i18nStrings, virtualScroll, inlineTokens = false, hideTokens, expandToViewport, tokenLimitShowFewerAriaLabel, tokenLimitShowMoreAriaLabel, __internalRootRef, autoFocus, enableSelectAll, renderOption, ...restProps }, externalRef) => {
+const InternalMultiselect = React.forwardRef(({ options, filteringType, filteringPlaceholder, filteringAriaLabel, filteringClearAriaLabel, ariaRequired, placeholder, disabled, readOnly, ariaLabel, inlineLabelText, selectedOptions, deselectAriaLabel, tokenLimit, i18nStrings, virtualScroll, inlineTokens = false, hideTokens, expandToViewport, tokenLimitShowFewerAriaLabel, tokenLimitShowMoreAriaLabel, __internalRootRef, autoFocus, enableSelectAll, renderOption, renderDropdownHeader, renderDropdownFooter, dropdownRole, dropdownAriaDescribedby, ...restProps }, externalRef) => {
     var _a;
     const baseProps = getBaseProps(restProps);
     const formFieldContext = useFormFieldContext(restProps);
@@ -43,8 +44,16 @@ const InternalMultiselect = React.forwardRef(({ options, filteringType, filterin
         externalRef,
         enableSelectAll,
         i18nStrings,
+        dropdownRole,
+        dropdownAriaDescribedby,
         ...restProps,
     });
+    const dropdownContentProps = {
+        filterText: filteringValue,
+        closeDropdown: multiselectProps.closeDropdown,
+    };
+    const customDropdownHeader = renderDropdownHeader === null || renderDropdownHeader === void 0 ? void 0 : renderDropdownHeader(dropdownContentProps);
+    const customDropdownFooter = renderDropdownFooter === null || renderDropdownFooter === void 0 ? void 0 : renderDropdownFooter(dropdownContentProps);
     const filter = (React.createElement(Filter, { clearAriaLabel: filteringClearAriaLabel, filteringType: filteringType, placeholder: filteringPlaceholder, ariaLabel: filteringAriaLabel, ariaRequired: ariaRequired, value: filteringValue, ...multiselectProps.getFilterProps() }));
     const triggerRef = useRef(null);
     const [triggerWidth, setTriggerWidth] = useState(null);
@@ -72,10 +81,21 @@ const InternalMultiselect = React.forwardRef(({ options, filteringType, filterin
     const dropdownStatus = multiselectProps.dropdownStatus;
     const dropdownProps = multiselectProps.getDropdownProps();
     const hasFilteredOptions = multiselectProps.filteredOptions.length > 0;
+    const statusFooter = dropdownStatus.isSticky ? (React.createElement(DropdownFooter, { content: multiselectProps.isOpen ? dropdownStatus.content : null, id: footerId })) : null;
+    const { header: dropdownHeader, footer: dropdownFooter } = composeDropdownContent({
+        filter,
+        customDropdownHeader,
+        customDropdownFooter,
+        statusFooter,
+        dropdownHeaderClass: styles['dropdown-header'],
+        dropdownFooterClass: styles['dropdown-footer'],
+    });
     const hasOptions = useRef(options.length > 0);
     hasOptions.current = hasOptions.current || options.length > 0;
     return (React.createElement("div", { ...baseProps, ref: __internalRootRef, className: clsx(styles.root, baseProps.className), ...multiselectProps.getWrapperProps() },
-        React.createElement(Dropdown, { ...dropdownProps, ariaLabelledby: dropdownProps.ariaRole ? joinStrings(ariaLabelId, controlId) : undefined, ariaDescribedby: dropdownProps.ariaRole ? (dropdownStatus.content ? footerId : undefined) : undefined, open: multiselectProps.isOpen, minWidth: getDropdownMinWidth({ expandToViewport, triggerWidth }), maxWidth: getBreakpointValue('xxs'), trigger: trigger, header: filter, footer: dropdownStatus.isSticky ? (React.createElement(DropdownFooter, { content: multiselectProps.isOpen ? dropdownStatus.content : null, id: footerId })) : null, expandToViewport: expandToViewport, 
+        React.createElement(Dropdown, { ...dropdownProps, ariaLabelledby: dropdownProps.ariaRole ? joinStrings(ariaLabelId, controlId) : undefined, ariaDescribedby: dropdownProps.ariaRole
+                ? joinStrings(dropdownStatus.content ? footerId : undefined, dropdownAriaDescribedby)
+                : undefined, open: multiselectProps.isOpen, minWidth: getDropdownMinWidth({ expandToViewport, triggerWidth }), maxWidth: getBreakpointValue('xxs'), trigger: trigger, header: dropdownHeader, footer: dropdownFooter, expandToViewport: expandToViewport, 
             // Forces dropdown position recalculation when new options are loaded
             contentKey: hasOptions.current.toString(), content: React.createElement(ListComponent, { renderOption: renderOption, listBottom: !dropdownStatus.isSticky ? (React.createElement(DropdownFooter, { content: multiselectProps.isOpen ? dropdownStatus.content : null, id: footerId })) : null, menuProps: { ...multiselectProps.getMenuProps(), ariaRequired }, getOptionProps: multiselectProps.getOptionProps, filteredOptions: multiselectProps.filteredOptions, filteringValue: filteringValue, ref: multiselectProps.scrollToIndex, hasDropdownStatus: dropdownStatus.content !== null, checkboxes: true, useInteractiveGroups: true, screenReaderContent: multiselectProps.announcement, highlightType: multiselectProps.highlightType, firstOptionSticky: hasFilteredOptions && enableSelectAll, isMultiSelect: true }) }),
         showTokens && (React.createElement(InternalTokenGroup, { ...multiselectProps.getTokenProps(), className: styles.tokens, alignment: "horizontal", limit: tokenLimit, items: tokens, i18nStrings: tokenGroupI18nStrings, limitShowMoreAriaLabel: tokenLimitShowMoreAriaLabel, limitShowFewerAriaLabel: tokenLimitShowFewerAriaLabel, disableOuterPadding: true, readOnly: readOnly, isItemReadOnly: item => item._readOnly })),