@servicetitan/anvil2 3.9.0 → 3.10.1

package/dist/{MenuFooter-BXcNxNnX.js → MenuFooter--lBF8OjJ.js}

@@ -1,5 +1,6 @@
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import { B as Button } from './Button-Dwh_Nd4l.js';
+import { C as COMMON_PART, A as ANV_PART_ATTR } from './anvParts-BGg5dgfl.js';
 
 import './MenuFooter.css';const stack = "_stack_o8ro5_1";
 const leading = "_leading_o8ro5_26";
@@ -30,6 +31,7 @@ const ClearButton = ({
     onClick,
     disabled,
     className: fullWidth ? styles["clear-full"] : void 0,
+    ...{ [ANV_PART_ATTR]: COMMON_PART.clearButton },
     children: label
   }
 );
@@ -50,6 +52,7 @@ const ConfirmationRow = ({
         size: "small",
         onMouseDown: preventBlur,
         onClick: onCancel,
+        ...{ [ANV_PART_ATTR]: COMMON_PART.cancelButton },
         children: cancelLabel
       }
     ),
@@ -61,6 +64,7 @@ const ConfirmationRow = ({
         onMouseDown: preventBlur,
         onClick: onApply,
         disabled: applyDisabled,
+        ...{ [ANV_PART_ATTR]: COMMON_PART.applyButton },
         children: applyLabel
       }
     )
@@ -112,4 +116,4 @@ const MenuFooter = ({
 MenuFooter.displayName = "MenuFooter";
 
 export { MenuFooter as M };
-//# sourceMappingURL=MenuFooter-BXcNxNnX.js.map
+//# sourceMappingURL=MenuFooter--lBF8OjJ.js.map

package/dist/MenuFooter--lBF8OjJ.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MenuFooter--lBF8OjJ.js","sources":["../src/internal/components/MenuFooter/MenuFooter.tsx"],"sourcesContent":["import type { MouseEvent, ReactNode } from \"react\";\nimport Button from \"../../../components/Button\";\nimport styles from \"./MenuFooter.module.scss\";\nimport { ANV_PART_ATTR, COMMON_PART } from \"../../constants/anvParts\";\n\n// Safari does not focus buttons on mousedown the way Chrome / Firefox do.\n// Combined with the popover's focusout listener, that means clicking a footer\n// button can fire focusout with relatedTarget=null and close the popover\n// before the click handler runs. Preventing the default on mousedown keeps the\n// previously focused element focused, sidestepping the focusout entirely.\nconst preventBlur = (e: MouseEvent<HTMLButtonElement>) => {\n  e.preventDefault();\n};\n\nexport type MenuFooterClearConfig = {\n  onClick: () => void;\n  label?: string;\n  disabled?: boolean;\n};\n\nexport type MenuFooterConfirmationConfig = {\n  onApply: () => void;\n  onCancel: () => void;\n  applyLabel?: string;\n  cancelLabel?: string;\n  applyDisabled?: boolean;\n};\n\nexport type MenuFooterProps = {\n  /** Clear-selection button config. Omit to suppress. */\n  clear?: MenuFooterClearConfig;\n  /** Apply/Cancel pair config. Omit when not in confirmation mode. */\n  confirmation?: MenuFooterConfirmationConfig;\n  /**\n   * Pre-rendered add-new affordance (AddNewItemButton or similar). Layout owns\n   * its row vs. inline placement; the caller just provides the node.\n   */\n  addNew?: ReactNode;\n};\n\nconst ClearButton = ({\n  onClick,\n  label = \"Clear\",\n  disabled,\n  fullWidth,\n}: MenuFooterClearConfig & { fullWidth?: boolean }) => (\n  <Button\n    appearance=\"secondary\"\n    size=\"small\"\n    onMouseDown={preventBlur}\n    onClick={onClick}\n    disabled={disabled}\n    className={fullWidth ? styles[\"clear-full\"] : undefined}\n    {...{ [ANV_PART_ATTR]: COMMON_PART.clearButton }}\n  >\n    {label}\n  </Button>\n);\n\n/**\n * Single justified-flex row containing the Apply/Cancel pair, with an optional\n * leading element on the opposite side.\n */\nconst ConfirmationRow = ({\n  applyLabel = \"Apply\",\n  cancelLabel = \"Cancel\",\n  onApply,\n  onCancel,\n  applyDisabled,\n  leading,\n}: MenuFooterConfirmationConfig & { leading?: ReactNode }) => (\n  <div className={styles[\"confirmation-row\"]}>\n    {leading ? <div className={styles[\"leading\"]}>{leading}</div> : null}\n    <div className={styles[\"trailing\"]}>\n      <Button\n        appearance=\"secondary\"\n        size=\"small\"\n        onMouseDown={preventBlur}\n        onClick={onCancel}\n        {...{ [ANV_PART_ATTR]: COMMON_PART.cancelButton }}\n      >\n        {cancelLabel}\n      </Button>\n      <Button\n        appearance=\"primary\"\n        size=\"small\"\n        onMouseDown={preventBlur}\n        onClick={onApply}\n        disabled={applyDisabled}\n        {...{ [ANV_PART_ATTR]: COMMON_PART.applyButton }}\n      >\n        {applyLabel}\n      </Button>\n    </div>\n  </div>\n);\n\n/**\n * MenuFooter composes the footer of a menu popover/dialog from up to three\n * optional pieces: a clear-selection button, an Apply/Cancel pair, and an\n * add-new affordance.\n *\n * Layout rules:\n * - clear + confirmation + addNew → [addNew full-width row] / [clear | apply cancel]\n * - clear + confirmation         → [clear | apply cancel]\n * - clear + addNew               → [addNew] / [clear]   (stacked, both full-width)\n * - clear                        → [clear]               (full-width)\n * - confirmation + addNew        → [addNew | apply cancel]   (addNew on the leading side)\n * - confirmation                 → [apply | cancel]\n * - addNew                       → [addNew]\n * - (none)                       → null\n */\nexport const MenuFooter = ({\n  clear,\n  confirmation,\n  addNew,\n}: MenuFooterProps) => {\n  // Branches with confirmation\n  if (confirmation) {\n    if (clear && addNew) {\n      return (\n        <div className={styles[\"stack\"]}>\n          <div className={styles[\"stack-row\"]}>{addNew}</div>\n          <ConfirmationRow\n            {...confirmation}\n            leading={<ClearButton {...clear} />}\n          />\n        </div>\n      );\n    }\n    if (clear) {\n      return (\n        <ConfirmationRow\n          {...confirmation}\n          leading={<ClearButton {...clear} />}\n        />\n      );\n    }\n    return <ConfirmationRow {...confirmation} leading={addNew} />;\n  }\n\n  // Branches without confirmation\n  if (clear && addNew) {\n    return (\n      <div className={styles[\"stack\"]}>\n        <div className={styles[\"stack-row\"]}>{addNew}</div>\n        <div className={styles[\"stack-row\"]}>\n          <ClearButton {...clear} fullWidth />\n        </div>\n      </div>\n    );\n  }\n  if (clear) {\n    return (\n      <div className={styles[\"stack-row\"]}>\n        <ClearButton {...clear} fullWidth />\n      </div>\n    );\n  }\n  if (addNew) {\n    return <>{addNew}</>;\n  }\n  return null;\n};\n\nMenuFooter.displayName = \"MenuFooter\";\n"],"names":[],"mappings":"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"}

package/dist/MultiSelectField.js

@@ -1,2 +1,2 @@
-export { M as MultiSelectField, a as MultiSelectFieldSync } from './MultiSelectFieldSync-CpfsWecG.js';
+export { M as MultiSelectField, a as MultiSelectFieldSync } from './MultiSelectFieldSync-B_vuR-ii.js';
 //# sourceMappingURL=MultiSelectField.js.map

package/dist/{MultiSelectFieldSync-CpfsWecG.js → MultiSelectFieldSync-B_vuR-ii.js}

@@ -1,7 +1,7 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { useRef, useState, useMemo, useEffect, forwardRef, useId, useCallback } from 'react';
 import { w as warnDeprecatedErrorUsage } from './utils-CM48ODEJ.js';
-import { a as useToggleSelection, M as MultiSelectOptions, u as useBulkActionRunner, r as resolveBulkActionCheckState, b as resolveBulkActionLabel } from './bulkActionTypes-BnZNAru6.js';
+import { a as useToggleSelection, M as MultiSelectOptions, u as useBulkActionRunner, r as resolveBulkActionCheckState, b as resolveBulkActionLabel } from './bulkActionTypes-CWcUhKFS.js';
 import { c as cx } from './index-De1g9FRV.js';
 import { B as Button } from './Button-Dwh_Nd4l.js';
 import { C as Chip } from './Chip-D6Q0J0Xe.js';
@@ -9,48 +9,59 @@ import { F as Flex } from './Flex-CRF7gj0_.js';
 import { m as mergeRefs, u as useMergeRefs } from './useMergeRefs-Dfmtq9cI.js';
 import { S as SvgChevronRight } from './chevron_right-BdpsxX7x.js';
 import { S as SvgClose } from './close-DZj38AEh.js';
-import { u as useChipLayout } from './useChipLayout-BWZfKDgd.js';
+import { u as useChipLayout } from './useChipLayout-BBe6Tzyl.js';
+import { C as COMMON_PART, A as ANV_PART_ATTR } from './anvParts-BGg5dgfl.js';
 import { S as SelectFieldLabel } from './SelectFieldLabel-CjY6zFJA.js';
-import { s as styles$1 } from './SelectTriggerBase.module-Brmw1nYG.js';
+import { s as styles$1 } from './SelectTriggerBase.module-mYOfdBGA.js';
 import { u as useDownshiftEnvironment, a as useCombobox, b as useSelect } from './downshift.esm-xtSnQp44.js';
-import { a as useProcessedOptions, b as buildSelectItems, s as shouldShowAddNewItem, A as AddNewItemButton, u as useSelectOrchestration, d as defaultSyncFilter, t as toSyncFilterFn } from './syncFilterUtils-UVNoFsDr.js';
-import { O as OptionsDialog, a as OptionsPopover } from './useAdaptiveView-C_WvM4-P.js';
+import { a as useProcessedOptions, b as buildSelectItems, s as shouldShowAddNewItem, A as AddNewItemButton, u as useSelectOrchestration, d as defaultSyncFilter, t as toSyncFilterFn } from './syncFilterUtils-YB6gRuuR.js';
+import { O as OptionsDialog, a as OptionsPopover } from './useAdaptiveView-DmhhcX-B.js';
 import { F as FieldMessage } from './FieldMessage-mTGdycSA.js';
 import { u as useDebouncedCallback } from './useDebouncedCallback-DLkapjcP.js';
 import { u as useLayoutPropsUtil } from './useLayoutPropsUtil-DjqeAJZ9.js';
 import { w as warnOnce } from './warnOnce-Y9PRHcU4.js';
 
-import './MultiSelectFieldSync.css';const input = "_input_184hn_26";
-const error = "_error_184hn_54";
-const disabled = "_disabled_184hn_61";
-const highlight = "_highlight_184hn_70";
-const chip = "_chip_184hn_143";
-const prefix = "_prefix_184hn_233";
-const suffix = "_suffix_184hn_234";
-const small = "_small_184hn_309";
-const large = "_large_184hn_315";
+import './MultiSelectFieldSync.css';const input = "_input_14qyc_26";
+const error = "_error_14qyc_55";
+const disabled = "_disabled_14qyc_62";
+const highlight = "_highlight_14qyc_74";
+const chip = "_chip_14qyc_157";
+const prefix = "_prefix_14qyc_247";
+const suffix = "_suffix_14qyc_248";
+const small = "_small_14qyc_323";
+const large = "_large_14qyc_329";
 const styles = {
-	"input-wrapper": "_input-wrapper_184hn_26",
+	"input-wrapper": "_input-wrapper_14qyc_26",
 	input: input,
 	error: error,
 	disabled: disabled,
+	"is-disabled": "_is-disabled_14qyc_68",
 	highlight: highlight,
-	"input-flex": "_input-flex_184hn_74",
-	"rows-wrapper": "_rows-wrapper_184hn_132",
-	"chip-wrapper": "_chip-wrapper_184hn_143",
+	"input-flex": "_input-flex_14qyc_78",
+	"rows-wrapper": "_rows-wrapper_14qyc_136",
+	"chip-wrapper": "_chip-wrapper_14qyc_157",
 	chip: chip,
-	"buttons-wrapper": "_buttons-wrapper_184hn_155",
-	"close-button-wrapper": "_close-button-wrapper_184hn_172",
-	"close-button": "_close-button_184hn_172",
-	"toggle-button-wrapper": "_toggle-button-wrapper_184hn_195",
-	"toggle-button": "_toggle-button_184hn_195",
+	"buttons-wrapper": "_buttons-wrapper_14qyc_169",
+	"close-button-wrapper": "_close-button-wrapper_14qyc_186",
+	"close-button": "_close-button_14qyc_186",
+	"toggle-button-wrapper": "_toggle-button-wrapper_14qyc_209",
+	"toggle-button": "_toggle-button_14qyc_209",
 	prefix: prefix,
 	suffix: suffix,
-	"no-clear-button": "_no-clear-button_184hn_301",
-	"no-toggle-button": "_no-toggle-button_184hn_305",
+	"no-clear-button": "_no-clear-button_14qyc_315",
+	"no-toggle-button": "_no-toggle-button_14qyc_319",
 	small: small,
 	large: large};
 
+const PARTS = {
+  trigger: COMMON_PART.trigger,
+  input: COMMON_PART.input,
+  chip: COMMON_PART.chip,
+  overflowChip: COMMON_PART.overflowChip,
+  clearButton: COMMON_PART.clearButton,
+  toggleButton: COMMON_PART.toggleButton
+};
+
 const MultiSelectFieldInput = ({
   placeholder,
   size,
@@ -89,17 +100,24 @@ const MultiSelectFieldInput = ({
     [styles["no-clear-button"]]: disableClearButton,
     [styles["no-toggle-button"]]: disableToggleButton,
     [styles["disabled"]]: disabled || readOnly,
+    [styles["is-disabled"]]: disabled,
     [styles["highlight"]]: isHighlighted
   });
   const handleInputKeyDown = (e) => {
     if (e.key === "Backspace" && !inputProps?.value && selectedOptions.length > 0 && onRemoveOption && !disabled && !readOnly) {
-      onRemoveOption(selectedOptions[selectedOptions.length - 1]);
+      const lastRemovable = [...selectedOptions].reverse().find((option) => !option.disabled);
+      if (lastRemovable) {
+        onRemoveOption(lastRemovable);
+      }
     }
     if (inputProps?.onKeyDown) {
       inputProps.onKeyDown(e);
     }
   };
   const handleWrapperClick = (e) => {
+    if (disabled) {
+      return;
+    }
     const target = e.target;
     if (target.closest("button") || target.tagName === "INPUT") {
       return;
@@ -115,55 +133,67 @@ const MultiSelectFieldInput = ({
         ref: inputWrapperRef,
         ...htmlInputWrapperProps,
         className: cx(inputWrapperClassNames, htmlInputWrapperProps?.className),
+        "aria-disabled": disabled || void 0,
         onClick: handleWrapperClick,
         children: [
           prefix ? /* @__PURE__ */ jsx("div", { className: styles["prefix"], children: prefix }) : null,
-          /* @__PURE__ */ jsxs("div", { className: styles["rows-wrapper"], ref: rowsRef, children: [
-            selectedOptions.length > 0 && onRemoveOption ? selectedOptions.slice(0, displayCount).map((option, index) => /* @__PURE__ */ jsx(
-              "div",
-              {
-                className: styles["chip-wrapper"],
-                children: /* @__PURE__ */ jsx(
+          /* @__PURE__ */ jsxs(
+            "div",
+            {
+              className: styles["rows-wrapper"],
+              ref: rowsRef,
+              "data-single-row": singleRow || void 0,
+              children: [
+                selectedOptions.length > 0 && onRemoveOption ? selectedOptions.slice(0, displayCount).map((option, index) => /* @__PURE__ */ jsx(
+                  "div",
+                  {
+                    className: styles["chip-wrapper"],
+                    children: /* @__PURE__ */ jsx(
+                      Chip,
+                      {
+                        ...getChipProps?.(option),
+                        ...{ [ANV_PART_ATTR]: PARTS.chip },
+                        label: option.label,
+                        onClose: disabled || readOnly || option.disabled ? void 0 : () => onRemoveOption(option),
+                        className: styles["chip"],
+                        title: option.label
+                      }
+                    )
+                  },
+                  `selected-item-${option.id}-${index}`
+                )) : null,
+                hiddenCount > 0 ? /* @__PURE__ */ jsx("div", { className: styles["chip-wrapper"], children: /* @__PURE__ */ jsx(
                   Chip,
                   {
-                    ...getChipProps?.(option),
-                    label: option.label,
-                    onClose: disabled || readOnly ? void 0 : () => onRemoveOption(option),
+                    label: `+${hiddenCount}`,
                     className: styles["chip"],
-                    title: option.label
+                    title: selectedOptions.slice(displayCount).map((option) => option.label).join(", "),
+                    ...{ [ANV_PART_ATTR]: PARTS.overflowChip }
                   }
-                )
-              },
-              `selected-item-${option.id}-${index}`
-            )) : null,
-            hiddenCount > 0 ? /* @__PURE__ */ jsx("div", { className: styles["chip-wrapper"], children: /* @__PURE__ */ jsx(
-              Chip,
-              {
-                label: `+${hiddenCount}`,
-                className: styles["chip"],
-                title: selectedOptions.slice(displayCount).map((option) => option.label).join(", ")
-              }
-            ) }) : null,
-            /* @__PURE__ */ jsxs(Flex, { className: styles["input-flex"], alignItems: "center", children: [
-              /* @__PURE__ */ jsx(
-                "input",
-                {
-                  id,
-                  type: "text",
-                  placeholder,
-                  disabled,
-                  readOnly,
-                  ...inputProps,
-                  ref: mergedInputRef,
-                  onKeyDown: handleInputKeyDown,
-                  className: cx(styles["input"], inputProps?.className, {
-                    [styles["error"]]: error
-                  })
-                }
-              ),
-              suffix ? /* @__PURE__ */ jsx("div", { className: styles["suffix"], children: suffix }) : null
-            ] })
-          ] }),
+                ) }) : null,
+                /* @__PURE__ */ jsxs(Flex, { className: styles["input-flex"], alignItems: "center", children: [
+                  /* @__PURE__ */ jsx(
+                    "input",
+                    {
+                      id,
+                      type: "text",
+                      placeholder,
+                      disabled,
+                      readOnly,
+                      ...inputProps,
+                      ...{ [ANV_PART_ATTR]: PARTS.input },
+                      ref: mergedInputRef,
+                      onKeyDown: handleInputKeyDown,
+                      className: cx(styles["input"], inputProps?.className, {
+                        [styles["error"]]: error
+                      })
+                    }
+                  ),
+                  suffix ? /* @__PURE__ */ jsx("div", { className: styles["suffix"], children: suffix }) : null
+                ] })
+              ]
+            }
+          ),
           /* @__PURE__ */ jsxs("div", { className: styles["buttons-wrapper"], children: [
             disableClearButton ? null : /* @__PURE__ */ jsx("div", { className: styles["close-button-wrapper"], children: /* @__PURE__ */ jsx(
               Button,
@@ -173,6 +203,7 @@ const MultiSelectFieldInput = ({
                 appearance: "ghost",
                 size: "small",
                 className: styles["close-button"],
+                ...{ [ANV_PART_ATTR]: PARTS.clearButton },
                 onClick: () => {
                   onClear?.();
                 }
@@ -185,8 +216,9 @@ const MultiSelectFieldInput = ({
                 "aria-label": "toggle menu",
                 appearance: "ghost",
                 size: "small",
-                disabled,
                 ...toggleButtonProps,
+                disabled,
+                ...{ [ANV_PART_ATTR]: PARTS.toggleButton },
                 className: cx(
                   styles["toggle-button"],
                   toggleButtonProps?.className
@@ -496,7 +528,8 @@ const MultiSelectFieldComboboxMode = ({
   addItemLabel,
   onAddNewItem,
   handleRemoveOption,
-  handleClear
+  handleClear,
+  dataAttributes
 }) => {
   const listRef = useRef(null);
   const debouncedOptionLoader = useDebouncedCallback((inputValue2) => {
@@ -572,6 +605,8 @@ const MultiSelectFieldComboboxMode = ({
     return /* @__PURE__ */ jsxs(
       "div",
       {
+        ...dataAttributes,
+        "data-anv": "multi-select-field",
         className: className ? `${styles$1["search-field"]} ${className}` : styles$1["search-field"],
         style: { ...layoutStyles, ...style },
         ref: wrapperDivRef,
@@ -597,7 +632,7 @@ const MultiSelectFieldComboboxMode = ({
               disableToggleButton: false,
               placeholder,
               disableClearButton,
-              toggleButtonProps: getToggleButtonProps(),
+              toggleButtonProps: getToggleButtonProps({ disabled: !!disabled }),
               onClear: handleClear,
               id: `${id}-input`,
               inputProps: getInputProps({
@@ -689,6 +724,8 @@ const MultiSelectFieldComboboxMode = ({
   return /* @__PURE__ */ jsxs(
     "div",
     {
+      ...dataAttributes,
+      "data-anv": "multi-select-field",
       className: className ? `${styles$1["search-field"]} ${className}` : styles$1["search-field"],
       style: { ...layoutStyles, ...style },
       children: [
@@ -715,7 +752,7 @@ const MultiSelectFieldComboboxMode = ({
               "aria-describedby": [hasHelperText && helperUid, moreInfo && moreInfoId].filter(Boolean).join(" ") || void 0,
               "aria-invalid": error ? true : void 0
             }),
-            toggleButtonProps: getToggleButtonProps(),
+            toggleButtonProps: getToggleButtonProps({ disabled: !!disabled }),
             disableToggleButton: false,
             placeholder,
             disableClearButton,
@@ -813,63 +850,93 @@ const MultiSelectFieldTrigger = ({
     [styles["large"]]: size === "large",
     [styles["no-clear-button"]]: disableClearButton,
     [styles["disabled"]]: disabled || readOnly,
+    [styles["is-disabled"]]: disabled,
     [styles["highlight"]]: isHighlighted
   });
-  return /* @__PURE__ */ jsxs("div", { style: { position: "relative" }, children: [
-    /* @__PURE__ */ jsxs(
-      "div",
-      {
-        ref: mergedRef,
-        ...restToggleButtonProps,
-        popoverTarget,
-        id,
-        className: cx(inputWrapperClassNames, restToggleButtonProps?.className),
-        children: [
-          prefix ? /* @__PURE__ */ jsx("div", { className: styles["prefix"], children: prefix }) : null,
-          /* @__PURE__ */ jsxs("div", { className: styles["rows-wrapper"], ref: rowsRef, children: [
-            selectedOptions.length > 0 && onRemoveOption ? selectedOptions.slice(0, displayCount).map((option, index) => /* @__PURE__ */ jsx(
-              "div",
-              {
-                className: styles["chip-wrapper"],
-                children: /* @__PURE__ */ jsx(
-                  Chip,
-                  {
-                    ...getChipProps?.(option),
-                    label: option.label,
-                    onClose: disabled || readOnly ? void 0 : (e) => {
-                      e.stopPropagation();
-                      onRemoveOption(option);
-                      triggerRef.current?.focus();
-                    },
-                    className: styles["chip"],
-                    title: option.label
-                  }
-                )
-              },
-              `selected-item-${option.id}-${index}`
-            )) : null,
-            hiddenCount > 0 ? /* @__PURE__ */ jsx("div", { className: styles["chip-wrapper"], children: /* @__PURE__ */ jsx(
-              Chip,
-              {
-                label: `+${hiddenCount}`,
-                className: styles["chip"],
-                title: selectedOptions.slice(displayCount).map((option) => option.label).join(", ")
-              }
-            ) }) : null,
-            selectedOptions.length === 0 ? /* @__PURE__ */ jsxs(Flex, { className: styles["input-flex"], alignItems: "center", children: [
-              /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref: mergedRef,
+      ...restToggleButtonProps,
+      popoverTarget,
+      id,
+      "aria-disabled": disabled || void 0,
+      onClick: disabled ? void 0 : restToggleButtonProps.onClick,
+      onKeyDown: disabled ? void 0 : restToggleButtonProps.onKeyDown,
+      ...{ [ANV_PART_ATTR]: PARTS.trigger },
+      className: cx(inputWrapperClassNames, restToggleButtonProps?.className),
+      children: [
+        prefix ? /* @__PURE__ */ jsx("div", { className: styles["prefix"], children: prefix }) : null,
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: styles["rows-wrapper"],
+            ref: rowsRef,
+            "data-single-row": singleRow || void 0,
+            children: [
+              selectedOptions.length > 0 && onRemoveOption ? selectedOptions.slice(0, displayCount).map((option, index) => /* @__PURE__ */ jsx(
                 "div",
                 {
-                  className: cx(styles["input"], {
-                    [styles["error"]]: error
-                  }),
-                  children: placeholder
+                  className: styles["chip-wrapper"],
+                  children: /* @__PURE__ */ jsx(
+                    Chip,
+                    {
+                      ...getChipProps?.(option),
+                      ...{ [ANV_PART_ATTR]: PARTS.chip },
+                      label: option.label,
+                      onClose: disabled || readOnly || option.disabled ? void 0 : (e) => {
+                        e.stopPropagation();
+                        onRemoveOption(option);
+                        triggerRef.current?.focus();
+                      },
+                      className: styles["chip"],
+                      title: option.label
+                    }
+                  )
+                },
+                `selected-item-${option.id}-${index}`
+              )) : null,
+              hiddenCount > 0 ? /* @__PURE__ */ jsx("div", { className: styles["chip-wrapper"], children: /* @__PURE__ */ jsx(
+                Chip,
+                {
+                  label: `+${hiddenCount}`,
+                  className: styles["chip"],
+                  title: selectedOptions.slice(displayCount).map((option) => option.label).join(", "),
+                  ...{ [ANV_PART_ATTR]: PARTS.overflowChip }
                 }
-              ),
-              suffix ? /* @__PURE__ */ jsx("div", { className: styles["suffix"], children: suffix }) : null
-            ] }) : null
-          ] }),
-          /* @__PURE__ */ jsx("div", { className: styles["buttons-wrapper"], children: /* @__PURE__ */ jsx("div", { className: styles["toggle-button-wrapper"], children: /* @__PURE__ */ jsx(
+              ) }) : null,
+              selectedOptions.length === 0 ? /* @__PURE__ */ jsxs(Flex, { className: styles["input-flex"], alignItems: "center", children: [
+                /* @__PURE__ */ jsx(
+                  "div",
+                  {
+                    className: cx(styles["input"], {
+                      [styles["error"]]: error
+                    }),
+                    children: placeholder
+                  }
+                ),
+                suffix ? /* @__PURE__ */ jsx("div", { className: styles["suffix"], children: suffix }) : null
+              ] }) : null
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxs("div", { className: styles["buttons-wrapper"], children: [
+          disableClearButton ? null : /* @__PURE__ */ jsx("div", { className: styles["close-button-wrapper"], children: /* @__PURE__ */ jsx(
+            Button,
+            {
+              icon: SvgClose,
+              "aria-label": "clear selection",
+              appearance: "ghost",
+              size: "small",
+              className: styles["close-button"],
+              ...{ [ANV_PART_ATTR]: PARTS.clearButton },
+              onClick: (e) => {
+                e.stopPropagation();
+                onClear?.();
+              }
+            }
+          ) }),
+          /* @__PURE__ */ jsx("div", { className: styles["toggle-button-wrapper"], children: /* @__PURE__ */ jsx(
             Button,
             {
               icon: SvgChevronRight,
@@ -878,34 +945,14 @@ const MultiSelectFieldTrigger = ({
               size: "small",
               disabled,
               tabIndex: -1,
+              ...{ [ANV_PART_ATTR]: PARTS.toggleButton },
               className: styles["toggle-button"]
             }
-          ) }) })
-        ]
-      }
-    ),
-    disableClearButton ? null : /* @__PURE__ */ jsx(
-      "div",
-      {
-        className: styles["buttons-wrapper"],
-        style: { insetInlineEnd: "2rem" },
-        children: /* @__PURE__ */ jsx("div", { className: styles["close-button-wrapper"], children: /* @__PURE__ */ jsx(
-          Button,
-          {
-            icon: SvgClose,
-            "aria-label": "clear selection",
-            appearance: "ghost",
-            size: "small",
-            className: styles["close-button"],
-            onClick: (e) => {
-              e.stopPropagation();
-              onClear?.();
-            }
-          }
-        ) })
-      }
-    )
-  ] });
+          ) })
+        ] })
+      ]
+    }
+  );
 };
 MultiSelectFieldTrigger.displayName = "MultiSelectFieldTrigger";
 
@@ -1110,7 +1157,8 @@ const MultiSelectFieldSelectMode = ({
   addItemLabel,
   onAddNewItem,
   handleRemoveOption,
-  handleClear
+  handleClear,
+  dataAttributes
 }) => {
   const listRef = useRef(null);
   const {
@@ -1180,6 +1228,8 @@ const MultiSelectFieldSelectMode = ({
     return /* @__PURE__ */ jsxs(
       "div",
       {
+        ...dataAttributes,
+        "data-anv": "multi-select-field",
         className: className ? `${styles$1["search-field"]} ${className}` : styles$1["search-field"],
         style: { ...layoutStyles, ...style },
         ref: wrapperDivRef,
@@ -1271,6 +1321,8 @@ const MultiSelectFieldSelectMode = ({
   return /* @__PURE__ */ jsxs(
     "div",
     {
+      ...dataAttributes,
+      "data-anv": "multi-select-field",
       className: className ? `${styles$1["search-field"]} ${className}` : styles$1["search-field"],
       style: { ...layoutStyles, ...style },
       children: [
@@ -1357,6 +1409,9 @@ const MultiSelectFieldSelectMode = ({
 
 const MultiSelectField = forwardRef((propsWithLayout, ref) => {
   const { layoutStyles, componentProps } = useLayoutPropsUtil(propsWithLayout);
+  const dataAttributes = Object.fromEntries(
+    Object.entries(componentProps).filter(([key]) => key.startsWith("data-"))
+  );
   const inputWrapperRef = useRef(null);
   const {
     id: idProp,
@@ -1435,6 +1490,10 @@ const MultiSelectField = forwardRef((propsWithLayout, ref) => {
   });
   const handleRemoveOption = useCallback(
     (option) => {
+      const target = selectedOptions.find((opt) => opt.id === option.id);
+      if (target?.disabled) {
+        return;
+      }
       onSelectedOptionsChange(
         selectedOptions.filter((opt) => opt.id !== option.id)
       );
@@ -1442,9 +1501,13 @@ const MultiSelectField = forwardRef((propsWithLayout, ref) => {
     [selectedOptions, onSelectedOptionsChange]
   );
   const handleClear = useCallback(() => {
-    onSelectedOptionsChange([]);
-  }, [onSelectedOptionsChange]);
-  const disableClearButton = selectedOptions.length === 0 || isDisabledOrReadOnly;
+    const lockedOptions = selectedOptions.filter((opt) => opt.disabled);
+    onSelectedOptionsChange(lockedOptions);
+  }, [selectedOptions, onSelectedOptionsChange]);
+  const removableSelectedCount = selectedOptions.filter(
+    (opt) => !opt.disabled
+  ).length;
+  const disableClearButton = removableSelectedCount === 0 || isDisabledOrReadOnly;
   const { pending: bulkPending, runBulk } = useBulkActionRunner({
     setDraft: onSelectedOptionsChange
   });
@@ -1531,7 +1594,8 @@ const MultiSelectField = forwardRef((propsWithLayout, ref) => {
     addItemLabel,
     onAddNewItem,
     handleRemoveOption,
-    handleClear
+    handleClear,
+    dataAttributes
   };
   if (disableSearch) {
     return /* @__PURE__ */ jsx(MultiSelectFieldSelectMode, { ...baseProps });
@@ -1661,4 +1725,4 @@ const MultiSelectFieldSync = (props) => {
 };
 
 export { MultiSelectField as M, MultiSelectFieldSync as a };
-//# sourceMappingURL=MultiSelectFieldSync-CpfsWecG.js.map
+//# sourceMappingURL=MultiSelectFieldSync-B_vuR-ii.js.map