@servicetitan/anvil2 3.0.6 → 3.0.8

package/dist/MultiSelectFieldSync.css

@@ -1,21 +1,21 @@
-.anvil2 {/* BASE */._combobox_1lzs3_2 {
+.anvil2 {/* BASE */._combobox_1mlsg_2 {
   min-width: 8rem;
   position: relative;
-}._search-field_1lzs3_7 {
+}._search-field_1mlsg_7 {
   flex-direction: column;
   font-size: var(--a2-typography-paragraph-size-default, var(--a2-font-size-400, 1rem));
   gap: var(--a2-size-2, 0.5rem);
-}._search-field_1lzs3_7._select_1lzs3_13 {
+}._search-field_1mlsg_7._select_1mlsg_13 {
   cursor: pointer;
-}._popover-content_1lzs3_17 ._search-field_1lzs3_7 {
+}._popover-content_1mlsg_17 ._search-field_1mlsg_7 {
   border-block-end: var(--a2-size-quarter, 0.0625rem) solid var(--a2-border-color-default, light-dark(var(--a2-color-neutral-400, #8b8b8b), var(--a2-color-neutral-600, #545454)));
   margin-block-end: var(--a2-size-4, 1rem);
   padding-block-end: var(--a2-size-6, 1.5rem);
   padding-block-start: var(--a2-size-2, 0.5rem);
   padding-inline-end: var(--a2-size-2, 0.5rem);
   padding-inline-start: var(--a2-size-2, 0.5rem);
-}._input-wrapper_1lzs3_26 {
-  --a2-local-multi-select-field-input-height: calc(
+}._input-wrapper_1mlsg_26 {
+  --a2-mod-multi-select-field-input-height: calc(
     var(--a2-size-10, 2.5rem) - (var(--a2-border-width-default, var(--a2-size-quarter, 0.0625rem)) * 2)
   );
   --a2-mod-multi-select-field-input-padding-inline-end: 4.5rem;
@@ -38,30 +38,30 @@
   padding-inline-end: var(--a2-mod-multi-select-field-input-padding-inline-end);
   padding-inline-start: var(--a2-size-3, 0.75rem);
   position: relative;
-}._input-wrapper_1lzs3_26:focus:not([disabled]), ._input-wrapper_1lzs3_26:focus-visible, ._input-wrapper_1lzs3_26:has(._input_1lzs3_26:focus-visible) {
+}._input-wrapper_1mlsg_26:focus:not([disabled]), ._input-wrapper_1mlsg_26:focus-visible, ._input-wrapper_1mlsg_26:has(._input_1mlsg_26:focus-visible) {
   outline-width: var(--a2-size-half, 0.125rem);
-}._input-wrapper_1lzs3_26:has(._input_1lzs3_26._error_1lzs3_54) {
+}._input-wrapper_1mlsg_26:has(._input_1mlsg_26._error_1mlsg_54) {
   border-color: var(--a2-border-color-danger, light-dark(var(--a2-color-red-600, #d62100), var(--a2-color-red-200, #ffac9e)));
-}._input-wrapper_1lzs3_26:focus:has(._input_1lzs3_26._error_1lzs3_54):not([disabled]), ._input-wrapper_1lzs3_26:focus-visible:has(._input_1lzs3_26._error_1lzs3_54), ._input-wrapper_1lzs3_26:has(._input_1lzs3_26._error_1lzs3_54:focus-visible) {
+}._input-wrapper_1mlsg_26:focus:has(._input_1mlsg_26._error_1mlsg_54):not([disabled]), ._input-wrapper_1mlsg_26:focus-visible:has(._input_1mlsg_26._error_1mlsg_54), ._input-wrapper_1mlsg_26:has(._input_1mlsg_26._error_1mlsg_54:focus-visible) {
   outline-color: var(--a2-focus-ring-color-danger, var(--a2-status-color-danger, light-dark(var(--a2-color-red-600, #d62100), var(--a2-color-red-400, #ff5b3d))));
   outline-width: var(--a2-size-half, 0.125rem);
-}._input-wrapper_1lzs3_26._disabled_1lzs3_61, ._input-wrapper_1lzs3_26[disabled], ._input-wrapper_1lzs3_26:has(._input_1lzs3_26:disabled) {
+}._input-wrapper_1mlsg_26._disabled_1mlsg_61, ._input-wrapper_1mlsg_26[disabled], ._input-wrapper_1mlsg_26:has(._input_1mlsg_26:disabled) {
   opacity: 0.4;
-}._input-wrapper_1lzs3_26._disabled_1lzs3_61 *, ._input-wrapper_1lzs3_26[disabled] *, ._input-wrapper_1lzs3_26:has(._input_1lzs3_26:disabled) * {
+}._input-wrapper_1mlsg_26._disabled_1mlsg_61 *, ._input-wrapper_1mlsg_26[disabled] *, ._input-wrapper_1mlsg_26:has(._input_1mlsg_26:disabled) * {
   cursor: not-allowed;
-}._input-wrapper_1lzs3_26:has(input._input_1lzs3_26:-moz-read-only) {
+}._input-wrapper_1mlsg_26:has(input._input_1mlsg_26:-moz-read-only) {
   background-color: var(--a2-background-color-strong, light-dark(var(--a2-color-neutral-20, #f9f9f9), var(--a2-color-neutral-800, #292929)));
-}._input-wrapper_1lzs3_26[disabled], ._input-wrapper_1lzs3_26[readonly], ._input-wrapper_1lzs3_26._disabled_1lzs3_61, ._input-wrapper_1lzs3_26:has(input._input_1lzs3_26:read-only) {
+}._input-wrapper_1mlsg_26[disabled], ._input-wrapper_1mlsg_26[readonly], ._input-wrapper_1mlsg_26._disabled_1mlsg_61, ._input-wrapper_1mlsg_26:has(input._input_1mlsg_26:read-only) {
   background-color: var(--a2-background-color-strong, light-dark(var(--a2-color-neutral-20, #f9f9f9), var(--a2-color-neutral-800, #292929)));
-}._input-flex_1lzs3_71 {
+}._input-flex_1mlsg_71 {
   flex: 1 1 100px;
   min-width: 100px;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
   width: 0;
-}._input_1lzs3_26,
-._input_1lzs3_26[type] {
+}._input_1mlsg_26,
+._input_1mlsg_26[type] {
   font-family: var(--a2-font-family-base, "Nunito Sans", sans-serif);
   font-size: 100%;
   color: inherit;
@@ -77,32 +77,35 @@
   box-shadow: none;
   display: flex;
   flex: 1 0 100px;
-  height: var(--a2-local-multi-select-field-input-height);
+  height: var(--a2-mod-multi-select-field-input-height);
   min-width: 100px;
   padding-block: var(--a2-size-2, 0.5rem);
   padding-inline: 0;
   transition: outline var(--a2-duration-default, 200ms) var(--a2-transition-ease-out, cubic-bezier(0, 0, 0.4, 1));
   width: 100px;
-}._input_1lzs3_26::-moz-placeholder, ._input_1lzs3_26[type]::-moz-placeholder {
+}._input_1mlsg_26:focus,
+._input_1mlsg_26[type]:focus {
+  box-shadow: none;
+}._input_1mlsg_26::-moz-placeholder, ._input_1mlsg_26[type]::-moz-placeholder {
   color: var(--a2-foreground-color-subdued, light-dark(var(--a2-color-neutral-500, #707070), var(--a2-color-neutral-200, #c4c4c4)));
-}._input_1lzs3_26::placeholder,
-._input_1lzs3_26[type]::placeholder {
+}._input_1mlsg_26::placeholder,
+._input_1mlsg_26[type]::placeholder {
   color: var(--a2-foreground-color-subdued, light-dark(var(--a2-color-neutral-500, #707070), var(--a2-color-neutral-200, #c4c4c4)));
-}._input_1lzs3_26:focus-visible,
-._input_1lzs3_26[type]:focus-visible {
+}._input_1mlsg_26:focus-visible,
+._input_1mlsg_26[type]:focus-visible {
   box-shadow: none;
   outline: none;
 }@media (prefers-reduced-motion: reduce) {
-  ._input_1lzs3_26,
-  ._input_1lzs3_26[type] {
+  ._input_1mlsg_26,
+  ._input_1mlsg_26[type] {
     transition-duration: 0.01ms !important;
     transition-property: outline;
   }
-}input._input_1lzs3_26:-moz-read-only {
+}input._input_1mlsg_26:-moz-read-only {
   background-color: var(--a2-background-color-strong, light-dark(var(--a2-color-neutral-20, #f9f9f9), var(--a2-color-neutral-800, #292929)));
-}input._input_1lzs3_26:read-only {
+}input._input_1mlsg_26:read-only {
   background-color: var(--a2-background-color-strong, light-dark(var(--a2-color-neutral-20, #f9f9f9), var(--a2-color-neutral-800, #292929)));
-}._rows-wrapper_1lzs3_125 {
+}._rows-wrapper_1mlsg_129 {
   align-items: stretch;
   display: flex;
   flex-direction: row;
@@ -111,15 +114,15 @@
   gap: 0 var(--a2-size-2, 0.5rem);
   max-width: 100%;
   width: 100%;
-}._chip-wrapper_1lzs3_136 {
+}._chip-wrapper_1mlsg_140 {
   align-items: center;
   display: flex;
-  height: var(--a2-local-multi-select-field-input-height);
+  height: var(--a2-mod-multi-select-field-input-height);
   justify-content: center;
   max-width: 100%;
-}._chip_1lzs3_136 {
-  --a2-chip-max-width: 100%;
-}._buttons-wrapper_1lzs3_148 {
+}._chip_1mlsg_140 {
+  --a2-mod-chip-max-width: 100%;
+}._buttons-wrapper_1mlsg_152 {
   font-family: var(--a2-font-family-base, "Nunito Sans", sans-serif);
   font-size: 100%;
   color: inherit;
@@ -130,11 +133,11 @@
   border-color: transparent;
   box-sizing: border-box;
   display: flex;
-  height: var(--a2-local-multi-select-field-input-height);
+  height: var(--a2-mod-multi-select-field-input-height);
   inset-block-start: 0;
   inset-inline-end: 0;
   position: absolute;
-}._close-button-wrapper_1lzs3_165 {
+}._close-button-wrapper_1mlsg_169 {
   font-family: var(--a2-font-family-base, "Nunito Sans", sans-serif);
   font-size: 100%;
   color: inherit;
@@ -148,11 +151,11 @@
   align-items: center;
   cursor: pointer;
   display: flex;
-}._close-button_1lzs3_165 {
+}._close-button_1mlsg_169 {
   --a2-mod-button-background-color: transparent;
-}._close-button_1lzs3_165[data-interactive=hover]::before, ._close-button_1lzs3_165:hover::before, ._close-button_1lzs3_165:disabled:not(._loading-infinite_1lzs3_184, ._loading-progress_1lzs3_184), ._close-button_1lzs3_165._disabled_1lzs3_61:not(._loading-infinite_1lzs3_184, ._loading-progress_1lzs3_184), ._close-button_1lzs3_165[aria-disabled=true]:not(._loading-infinite_1lzs3_184, ._loading-progress_1lzs3_184) {
+}._close-button_1mlsg_169[data-interactive=hover]::before, ._close-button_1mlsg_169:hover::before, ._close-button_1mlsg_169:disabled:not(._loading-infinite_1mlsg_188, ._loading-progress_1mlsg_188), ._close-button_1mlsg_169._disabled_1mlsg_61:not(._loading-infinite_1mlsg_188, ._loading-progress_1mlsg_188), ._close-button_1mlsg_169[aria-disabled=true]:not(._loading-infinite_1mlsg_188, ._loading-progress_1mlsg_188) {
   --a2-mod-button-background-color: transparent;
-}._toggle-button-wrapper_1lzs3_188 {
+}._toggle-button-wrapper_1mlsg_192 {
   font-family: var(--a2-font-family-base, "Nunito Sans", sans-serif);
   font-size: 100%;
   color: inherit;
@@ -166,23 +169,23 @@
   align-items: center;
   cursor: pointer;
   display: flex;
-}._toggle-button_1lzs3_188 {
+}._toggle-button_1mlsg_192 {
   --a2-mod-button-background-color: transparent;
-  --a2-mod-button-font-color: var(--a2-foreground-color-default, light-dark(var(--a2-color-neutral-950, #040404), var(--a2-color-neutral-0, #ffffff)));
+  --a2-mod-button-foreground-color: var(--a2-foreground-color-default, light-dark(var(--a2-color-neutral-950, #040404), var(--a2-color-neutral-0, #ffffff)));
   transform: rotate(90deg);
   transition: transform var(--a2-duration-default, 200ms) var(--a2-transition-ease-out, cubic-bezier(0, 0, 0.4, 1));
-}._toggle-button_1lzs3_188[aria-expanded=true] {
+}._toggle-button_1mlsg_192[aria-expanded=true] {
   transform: rotate(270deg);
-}._toggle-button_1lzs3_188[data-interactive=hover]::before, ._toggle-button_1lzs3_188:hover::before, ._toggle-button_1lzs3_188:disabled:not(._loading-infinite_1lzs3_184, ._loading-progress_1lzs3_184), ._toggle-button_1lzs3_188._disabled_1lzs3_61:not(._loading-infinite_1lzs3_184, ._loading-progress_1lzs3_184), ._toggle-button_1lzs3_188[aria-disabled=true]:not(._loading-infinite_1lzs3_184, ._loading-progress_1lzs3_184) {
+}._toggle-button_1mlsg_192[data-interactive=hover]::before, ._toggle-button_1mlsg_192:hover::before, ._toggle-button_1mlsg_192:disabled:not(._loading-infinite_1mlsg_188, ._loading-progress_1mlsg_188), ._toggle-button_1mlsg_192._disabled_1mlsg_61:not(._loading-infinite_1mlsg_188, ._loading-progress_1mlsg_188), ._toggle-button_1mlsg_192[aria-disabled=true]:not(._loading-infinite_1mlsg_188, ._loading-progress_1mlsg_188) {
   --a2-mod-button-background-color: transparent;
 }@media (prefers-reduced-motion: reduce) {
-  ._toggle-button_1lzs3_188 {
+  ._toggle-button_1mlsg_192 {
     transition-duration: 0.01ms !important;
   }
-}[aria-expanded=true] ._toggle-button-wrapper_1lzs3_188 ._toggle-button_1lzs3_188 {
+}[aria-expanded=true] ._toggle-button-wrapper_1mlsg_192 ._toggle-button_1mlsg_192 {
   transform: rotate(270deg);
-}._prefix_1lzs3_226,
-._suffix_1lzs3_227 {
+}._prefix_1mlsg_230,
+._suffix_1mlsg_231 {
   font-family: var(--a2-font-family-base, "Nunito Sans", sans-serif);
   font-size: 100%;
   color: var(--a2-foreground-color-default, light-dark(var(--a2-color-neutral-950, #040404), var(--a2-color-neutral-0, #ffffff)));
@@ -198,27 +201,27 @@
   font-weight: var(--a2-font-weight-semibold, 600);
   justify-content: center;
   min-width: var(--a2-size-8, 2rem);
-}._prefix_1lzs3_226 {
+}._prefix_1mlsg_230 {
   padding-inline-end: var(--a2-size-2, 0.5rem);
-}._suffix_1lzs3_227 {
+}._suffix_1mlsg_231 {
   padding-inline-end: var(--a2-size-2, 0.5rem);
   padding-inline-start: var(--a2-size-2, 0.5rem);
-}._popover-content_1lzs3_17 {
+}._popover-content_1mlsg_17 {
   display: flex;
   flex-direction: column;
   overflow: hidden;
-}._listview_1lzs3_260 {
+}._listview_1mlsg_264 {
   padding-block: var(--a2-size-2, 0.5rem);
   padding-inline: var(--a2-size-2, 0.5rem);
-}._loading-spinner_1lzs3_265 {
+}._loading-spinner_1mlsg_269 {
   height: var(--a2-size-6, 1.5rem);
   width: var(--a2-size-6, 1.5rem);
-}._empty_1lzs3_270 {
+}._empty_1mlsg_274 {
   padding-block-end: var(--a2-size-4, 1rem);
   padding-block-start: var(--a2-size-3, 0.75rem);
   padding-inline-end: var(--a2-size-6, 1.5rem);
   padding-inline-start: var(--a2-size-6, 1.5rem);
-}._item_1lzs3_277 {
+}._item_1mlsg_281 {
   --a2-mod-multi-select-field-item-background-color: transparent;
   --a2-mod-multi-select-field-item-color: var(--a2-foreground-color-default, light-dark(var(--a2-color-neutral-950, #040404), var(--a2-color-neutral-0, #ffffff)));
   background-color: var(--a2-mod-multi-select-field-item-background-color);
@@ -232,37 +235,37 @@
   padding-block: var(--a2-size-2, 0.5rem);
   padding-inline: var(--a2-size-4, 1rem);
   position: relative;
-}/* MODIFIERS */._no-clear-button_1lzs3_294 {
+}/* MODIFIERS */._no-clear-button_1mlsg_298 {
   --a2-mod-multi-select-field-input-padding-inline-end: var(--a2-size-8, 2rem);
-}._no-toggle-button_1lzs3_298 {
+}._no-toggle-button_1mlsg_302 {
   --a2-mod-multi-select-field-input-padding-inline-end: var(--a2-size-8, 2rem);
-}._small_1lzs3_302 {
-  --a2-local-multi-select-field-input-height: calc(
+}._small_1mlsg_306 {
+  --a2-mod-multi-select-field-input-height: calc(
     var(--a2-size-8, 2rem) - (var(--a2-border-width-default, var(--a2-size-quarter, 0.0625rem)) * 2)
   );
-}._large_1lzs3_308 {
-  --a2-local-multi-select-field-input-height: calc(
+}._large_1mlsg_312 {
+  --a2-mod-multi-select-field-input-height: calc(
     var(--a2-size-12, 3rem) - (var(--a2-border-width-default, var(--a2-size-quarter, 0.0625rem)) * 2)
   );
-}._listview-option_1lzs3_314:not([aria-disabled=true]) {
+}._listview-option_1mlsg_318:not([aria-disabled=true]) {
   cursor: pointer;
-}._listview-option_1lzs3_314[aria-selected=true]:not([aria-disabled=true]) {
+}._listview-option_1mlsg_318[aria-selected=true]:not([aria-disabled=true]) {
   --a2-mod-multi-select-field-item-background-color: var(--a2-background-color-transparent-default-hover, light-dark(color-mix(in srgb, var(--a2-color-neutral-400, #8b8b8b) 8%, transparent), color-mix(in srgb, var(--a2-color-neutral-0, #ffffff) 8%, transparent)));
-}._item_1lzs3_277[data-interactive=hover]:not([aria-disabled=true]),
-._item_1lzs3_277:hover:not([aria-disabled=true]),
-._item_1lzs3_277[aria-selected=true]:not([aria-disabled=true]) {
+}._item_1mlsg_281[data-interactive=hover]:not([aria-disabled=true]),
+._item_1mlsg_281:hover:not([aria-disabled=true]),
+._item_1mlsg_281[aria-selected=true]:not([aria-disabled=true]) {
   --a2-mod-multi-select-field-item-background-color: var(--a2-background-color-transparent-default-hover, light-dark(color-mix(in srgb, var(--a2-color-neutral-400, #8b8b8b) 8%, transparent), color-mix(in srgb, var(--a2-color-neutral-0, #ffffff) 8%, transparent)));
-}._item_1lzs3_277[aria-disabled=true] {
+}._item_1mlsg_281[aria-disabled=true] {
   cursor: not-allowed;
   opacity: 0.6;
-}._item_1lzs3_277[data-checked=true] {
+}._item_1mlsg_281[data-checked=true] {
   --a2-mod-multi-select-field-item-background-color: var(--a2-background-color-primary-subdued, light-dark(var(--a2-color-blue-50, #e6f1ff), color-mix(in srgb, var(--a2-color-blue-300, #70b1ff) 20%, transparent)));
   --a2-mod-multi-select-field-item-color: var(--a2-foreground-color-primary, light-dark(var(--a2-color-blue-600, #0265dc), var(--a2-color-blue-300, #70b1ff)));
-}._item_1lzs3_277[data-checked=true]:hover:not([aria-disabled=true]),
-._item_1lzs3_277[data-checked=true][aria-selected=true]:not([aria-disabled=true]),
-._item_1lzs3_277[data-checked=true][data-interactive=hover]:not([aria-disabled=true]) {
+}._item_1mlsg_281[data-checked=true]:hover:not([aria-disabled=true]),
+._item_1mlsg_281[data-checked=true][aria-selected=true]:not([aria-disabled=true]),
+._item_1mlsg_281[data-checked=true][data-interactive=hover]:not([aria-disabled=true]) {
   --a2-mod-multi-select-field-item-background-color: var(--a2-background-color-primary-subdued-hover, light-dark(var(--a2-color-blue-100, #cce3ff), color-mix(in srgb, var(--a2-color-blue-300, #70b1ff) 30%, transparent)));
-}._item_1lzs3_277[data-checked=true]:active:not([aria-disabled=true]) {
+}._item_1mlsg_281[data-checked=true]:active:not([aria-disabled=true]) {
   --a2-mod-multi-select-field-item-background-color: var(--a2-background-color-primary-subdued-active, light-dark(var(--a2-color-blue-200, #9ecaff), color-mix(in srgb, var(--a2-color-blue-300, #70b1ff) 40%, transparent)));
 }
 }

package/dist/MultiSelectMenu.js

@@ -1,2 +1,2 @@
-export { M as MultiSelectMenu, a as MultiSelectMenuSync } from './MultiSelectMenuSync-BNPp_2Bm.js';
+export { M as MultiSelectMenu, a as MultiSelectMenuSync } from './MultiSelectMenuSync-Drz8SEk9.js';
 //# sourceMappingURL=MultiSelectMenu.js.map

package/dist/{MultiSelectMenuSync-BNPp_2Bm.js → MultiSelectMenuSync-Drz8SEk9.js}

@@ -1,10 +1,13 @@
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import { forwardRef, useRef, useId, useMemo, useState, useCallback, useEffect } from 'react';
-import { u as useToggleSelection, M as MultiSelectOptions } from './useToggleSelection-B5PnTuT2.js';
-import { a as useSelectOrchestration, b as useProcessedOptions, c as buildSelectItems, d as useDebouncedCallback, e as OptionsDialog, f as OptionsPopover, A as AddNewItemButton, g as defaultSyncFilter, t as toSyncFilterFn } from './syncFilterUtils-COxBIkt6.js';
-import { u as useMenuInteraction } from './useMenuInteraction-C4RU5Fdq.js';
+import { forwardRef, useRef, useId, useMemo, useEffect, useState, useCallback } from 'react';
+import { u as useBulkActionRunner, a as useToggleSelection, M as MultiSelectOptions } from './useToggleSelection-Bn7h-gGD.js';
+import { O as OptionsDialog, a as OptionsPopover } from './useAdaptiveView-CeYKH0Me.js';
+import { u as useSelectOrchestration, a as useProcessedOptions, b as buildSelectItems, c as useDebouncedCallback, A as AddNewItemButton, d as defaultSyncFilter, t as toSyncFilterFn } from './syncFilterUtils-DZqeVWTS.js';
+import { M as MenuFooter } from './MenuFooter-CrsZdXvN.js';
+import { u as useMenuInteraction } from './useMenuInteraction-NEJXUD4I.js';
+import { r as resolveConfirmation, u as useConfirmationDraft, a as arrayIdsEqual } from './confirmationTypes-CG7xl50f.js';
+import { S as SearchField } from './SearchField-BMHJCVFu.js';
 import { w as warnOnce } from './warnOnce-Y9PRHcU4.js';
-import { S as SearchField } from './SearchField-3tUPU8hH.js';
 
 const MultiSelectMenu = forwardRef((props, ref) => {
   const triggerRef = useRef(null);
@@ -33,8 +36,11 @@ const MultiSelectMenu = forwardRef((props, ref) => {
     onImplicitClose,
     onExplicitClose,
     addItemLabel,
-    onAddNewItem
+    onAddNewItem,
+    confirmation: confirmationProp,
+    clear
   } = props;
+  const confirmation = resolveConfirmation(confirmationProp);
   const groupToString = "groupToString" in props ? props.groupToString : void 0;
   const groupSorter = "groupSorter" in props ? props.groupSorter : void 0;
   const autoId = useId();
@@ -66,8 +72,9 @@ const MultiSelectMenu = forwardRef((props, ref) => {
   });
   const selectAll = useMemo(
     () => selectAllProp ? {
-      label: selectAllProp.label ?? "Select All",
+      label: selectAllProp.label,
       onClick: selectAllProp.onClick,
+      compute: selectAllProp.compute,
       checkState: selectAllProp.checkState === true ? "checked" : selectAllProp.checkState === false ? "unchecked" : selectAllProp.checkState ?? "indeterminate"
     } : void 0,
     [selectAllProp]
@@ -78,11 +85,20 @@ const MultiSelectMenu = forwardRef((props, ref) => {
       return {
         label: config.label,
         onClick: config.onClick,
+        compute: config.compute,
         checkState: config.checkState === true ? "checked" : config.checkState === false ? "unchecked" : config.checkState ?? "indeterminate"
       };
     } : void 0,
     [selectFilteredProp]
   );
+  useEffect(() => {
+    if (!confirmation.enabled) return;
+    if (selectAllProp && !selectAllProp.compute) {
+      warnOnce(
+        "MultiSelectMenu: `selectAll.onClick` bypasses confirmation. Use `selectAll.compute` to integrate the bulk action with the draft."
+      );
+    }
+  }, [confirmation.enabled, selectAllProp]);
   const [inputValue, setInputValue] = useState("");
   const searchValue = disableSearch ? "" : inputValue;
   const { pinnedSections, ungroupedItems, groupSections } = useProcessedOptions(
@@ -94,12 +110,49 @@ const MultiSelectMenu = forwardRef((props, ref) => {
       groupSorter
     }
   );
+  const [isOpen, setIsOpen] = useState(false);
+  const {
+    displayValue: draftSelectedOptions,
+    setDraft,
+    apply,
+    cancel
+  } = useConfirmationDraft({
+    value: selectedOptions,
+    onCommit: onSelectedOptionsChange,
+    isOpen,
+    enabled: confirmation.enabled,
+    isEqual: arrayIdsEqual
+  });
+  const {
+    pending: bulkPending,
+    runBulk,
+    setDraftAndBump,
+    reset: resetBulk
+  } = useBulkActionRunner({ setDraft });
   const { handleItemClick } = useToggleSelection({
     options,
     pinnedSections,
-    selectedOptions,
-    onSelectedOptionsChange
+    selectedOptions: draftSelectedOptions,
+    // Route per-option toggles through setDraftAndBump so that any in-flight
+    // bulk-action promise's resolution is discarded if it arrives after this
+    // click.
+    onSelectedOptionsChange: setDraftAndBump
   });
+  const runBulkAction = useCallback(
+    (config, kind) => {
+      if (config.compute) {
+        runBulk(config.compute, draftSelectedOptions);
+      } else if (config.onClick) {
+        if (confirmation.enabled && kind === "selectFiltered") {
+          warnOnce(
+            "MultiSelectMenu: `selectFiltered.onClick` bypasses confirmation. Use `selectFiltered.compute` to integrate the bulk action with the draft."
+          );
+        }
+        config.onClick();
+      }
+    },
+    [runBulk, draftSelectedOptions, confirmation.enabled]
+  );
   const bulkActionItems = useMemo(() => {
     const items2 = [];
     if (selectAll && !searchValue) {
@@ -107,7 +160,7 @@ const MultiSelectMenu = forwardRef((props, ref) => {
         id: "select-all",
         type: "select-all",
         original: { id: "select-all", label: selectAll.label ?? "Select All" },
-        checkState: selectAll.checkState
+        checkState: bulkPending ? "loading" : selectAll.checkState
       });
     }
     if (selectFiltered && searchValue && !loading) {
@@ -119,11 +172,11 @@ const MultiSelectMenu = forwardRef((props, ref) => {
           id: "select-filtered",
           label: config.label ?? "Select Filtered"
         },
-        checkState: config.checkState
+        checkState: bulkPending ? "loading" : config.checkState
       });
     }
     return items2;
-  }, [selectAll, selectFiltered, searchValue, loading]);
+  }, [selectAll, selectFiltered, searchValue, loading, bulkPending]);
   const { items, sectionsMeta } = useMemo(
     () => buildSelectItems({
       prefixItems: bulkActionItems,
@@ -134,24 +187,23 @@ const MultiSelectMenu = forwardRef((props, ref) => {
     [bulkActionItems, pinnedSections, groupSections, ungroupedItems]
   );
   const selectedItemIds = useMemo(
-    () => new Set(selectedOptions.map((o) => o.id)),
-    [selectedOptions]
+    () => new Set(draftSelectedOptions.map((o) => o.id)),
+    [draftSelectedOptions]
   );
   const handleItemActivate = useCallback(
     (item) => {
       if (item.type === "select-all") {
-        selectAll?.onClick();
+        if (selectAll) runBulkAction(selectAll, "selectAll");
       } else if (item.type === "select-filtered" && selectFiltered) {
-        const config = selectFiltered(searchValue);
-        config.onClick();
+        runBulkAction(selectFiltered(searchValue), "selectFiltered");
       } else if (item.type === "option" || item.type === "pinned-option" || item.type === "grouped-option") {
         handleItemClick(item.original);
       }
     },
-    [selectAll, selectFiltered, searchValue, handleItemClick]
+    [selectAll, selectFiltered, searchValue, handleItemClick, runBulkAction]
   );
+  const pendingApplyRef = useRef(false);
   const {
-    isOpen,
     closeMenu,
     highlightedIndex,
     getTriggerProps,
@@ -167,11 +219,25 @@ const MultiSelectMenu = forwardRef((props, ref) => {
     selectedItemIds,
     displayAs,
     closeOnActivate: false,
+    // While a bulk-action promise is pending, disable all rows.
+    disabled: bulkPending,
     id,
     triggerRef,
     label,
-    onImplicitClose,
-    onExplicitClose
+    isOpen,
+    setIsOpen,
+    onImplicitClose: () => {
+      if (confirmation.enabled && !pendingApplyRef.current) cancel();
+      pendingApplyRef.current = false;
+      resetBulk();
+      onImplicitClose?.();
+    },
+    onExplicitClose: () => {
+      if (confirmation.enabled && !pendingApplyRef.current) cancel();
+      pendingApplyRef.current = false;
+      resetBulk();
+      onExplicitClose?.();
+    }
   });
   const debouncedOptionLoader = useDebouncedCallback((value) => {
     loadOptions(value, { initial: true });
@@ -262,6 +328,14 @@ const MultiSelectMenu = forwardRef((props, ref) => {
     debouncedOptionLoader("");
     onSearchChange?.("");
   }, [debouncedOptionLoader, onSearchChange]);
+  const handleApply = useCallback(() => {
+    apply();
+    pendingApplyRef.current = true;
+    closeMenu();
+  }, [apply, closeMenu]);
+  const handleCancel = useCallback(() => {
+    closeMenu();
+  }, [closeMenu]);
   const searchInput = !disableSearch ? /* @__PURE__ */ jsx(
     SearchField,
     {
@@ -282,9 +356,35 @@ const MultiSelectMenu = forwardRef((props, ref) => {
       searchText: inputValue,
       addItemLabel,
       onAddNewItem,
-      onCloseMenu: () => closeMenu({ restoreFocus: false })
+      onCloseMenu: () => {
+        pendingApplyRef.current = true;
+        closeMenu({ restoreFocus: false });
+      }
     }
   ) : null;
+  const confirmationConfig = confirmation.enabled ? {
+    applyLabel: confirmation.applyLabel,
+    cancelLabel: confirmation.cancelLabel,
+    onApply: handleApply,
+    onCancel: handleCancel
+  } : void 0;
+  const wrappedClear = clear ? {
+    ...clear,
+    onClick: () => {
+      clear.onClick();
+      if (confirmation.enabled) pendingApplyRef.current = true;
+      closeMenu();
+    }
+  } : void 0;
+  const hasFooter = !!wrappedClear || !!confirmationConfig || !!addNewItemButton;
+  const footer = hasFooter ? /* @__PURE__ */ jsx(
+    MenuFooter,
+    {
+      clear: wrappedClear,
+      confirmation: confirmationConfig,
+      addNew: addNewItemButton
+    }
+  ) : void 0;
   if (displayAs === "dialog") {
     return /* @__PURE__ */ jsxs(Fragment, { children: [
       trigger(triggerProps),
@@ -296,7 +396,7 @@ const MultiSelectMenu = forwardRef((props, ref) => {
           onClose: closeMenu,
           title: label,
           field: searchInput ?? void 0,
-          footer: addNewItemButton ?? void 0,
+          footer: footer ?? void 0,
           initialFocusResolver: !disableSearch ? (elements) => elements.find((el) => el.tagName === "INPUT") || elements[0] : void 0,
           children: /* @__PURE__ */ jsx(
             MultiSelectOptions,
@@ -314,7 +414,7 @@ const MultiSelectMenu = forwardRef((props, ref) => {
               },
               getItemProps,
               highlightedIndex,
-              selectedOptions,
+              selectedOptions: draftSelectedOptions,
               hasMore,
               onLoadMore: handleLoadMore,
               loading,
@@ -336,7 +436,7 @@ const MultiSelectMenu = forwardRef((props, ref) => {
         open: isOpen && displayAs === "popover",
         onClose: handleClickOutside,
         width: popoverWidth ?? 320,
-        footer: addNewItemButton ?? void 0,
+        footer: footer ?? void 0,
         children: [
           searchInput,
           /* @__PURE__ */ jsx(
@@ -355,7 +455,7 @@ const MultiSelectMenu = forwardRef((props, ref) => {
               },
               getItemProps,
               highlightedIndex,
-              selectedOptions,
+              selectedOptions: draftSelectedOptions,
               hasMore,
               onLoadMore: handleLoadMore,
               loading,
@@ -391,19 +491,21 @@ const MultiSelectMenuSync = (props) => {
     const labelProp = typeof selectAllProp === "object" ? selectAllProp.label : void 0;
     const label = typeof labelProp === "function" ? labelProp(allSelected) : labelProp;
     const checkState = allSelected ? "checked" : selectedCount > 0 ? "indeterminate" : "unchecked";
-    const handleClick = () => {
-      if (allSelected) {
-        onSelectedOptionsChange([]);
-      } else {
-        onSelectedOptionsChange(enabledOptions);
+    const compute = (current) => {
+      const currentIds = new Set(current.map((v) => v.id));
+      const allEnabledSelected = enabledOptions.length > 0 && enabledOptions.every((o) => currentIds.has(o.id));
+      if (allEnabledSelected) {
+        return current.filter((v) => !enabledIds.has(v.id));
       }
+      const additions = enabledOptions.filter((o) => !currentIds.has(o.id));
+      return [...current, ...additions];
     };
     return {
       label,
-      onClick: handleClick,
+      compute,
       checkState
     };
-  }, [selectAllProp, options, value, onSelectedOptionsChange]);
+  }, [selectAllProp, options, value]);
   const selectFilteredConfig = useMemo(() => {
     if (!selectFilteredProp) return void 0;
     return (searchValue) => {
@@ -411,6 +513,9 @@ const MultiSelectMenuSync = (props) => {
       const enabledFilteredOptions = filteredOptions.filter(
         (opt) => !opt.disabled
       );
+      const enabledFilteredIds = new Set(
+        enabledFilteredOptions.map((o) => o.id)
+      );
       const selectedIds = new Set(value.map((v) => v.id));
       const allFilteredSelected = enabledFilteredOptions.length > 0 && enabledFilteredOptions.every((opt) => selectedIds.has(opt.id));
       const someFilteredSelected = enabledFilteredOptions.some(
@@ -418,25 +523,24 @@ const MultiSelectMenuSync = (props) => {
       );
       const label = typeof selectFilteredProp === "function" ? selectFilteredProp(searchValue).label : void 0;
       const checkState = allFilteredSelected ? "checked" : someFilteredSelected ? "indeterminate" : "unchecked";
-      const handleClick = () => {
-        if (allFilteredSelected) {
-          const filteredIds = new Set(enabledFilteredOptions.map((o) => o.id));
-          onSelectedOptionsChange(value.filter((v) => !filteredIds.has(v.id)));
-        } else {
-          const currentIds = new Set(value.map((v) => v.id));
-          const newSelections = enabledFilteredOptions.filter(
-            (opt) => !currentIds.has(opt.id)
-          );
-          onSelectedOptionsChange([...value, ...newSelections]);
+      const compute = (current) => {
+        const currentIds = new Set(current.map((v) => v.id));
+        const allEnabledFilteredSelected = enabledFilteredOptions.length > 0 && enabledFilteredOptions.every((o) => currentIds.has(o.id));
+        if (allEnabledFilteredSelected) {
+          return current.filter((v) => !enabledFilteredIds.has(v.id));
         }
+        const additions = enabledFilteredOptions.filter(
+          (o) => !currentIds.has(o.id)
+        );
+        return [...current, ...additions];
       };
       return {
         label,
-        onClick: handleClick,
+        compute,
         checkState
       };
     };
-  }, [selectFilteredProp, options, value, onSelectedOptionsChange, filter]);
+  }, [selectFilteredProp, options, value, filter]);
   const fieldRef = useRef(null);
   const prevOptionsRef = useRef(options);
   useEffect(() => {
@@ -462,4 +566,4 @@ const MultiSelectMenuSync = (props) => {
 };
 
 export { MultiSelectMenu as M, MultiSelectMenuSync as a };
-//# sourceMappingURL=MultiSelectMenuSync-BNPp_2Bm.js.map
+//# sourceMappingURL=MultiSelectMenuSync-Drz8SEk9.js.map