@servicetitan/anvil2 3.10.0 → 3.11.0

package/dist/{MultiSelectFieldSync-HhFKGtQM.js → MultiSelectFieldSync-BwMqc4QP.js}

@@ -1,54 +1,55 @@
 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-CWcUhKFS.js';
+import { a as useToggleSelection, M as MultiSelectOptions, u as useBulkActionRunner, r as resolveBulkActionCheckState, b as resolveBulkActionLabel } from './bulkActionTypes-CdorQGKt.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';
+import { C as Chip } from './Chip-ZXGLaddL.js';
 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 SelectFieldLabel } from './SelectFieldLabel-CgtazsA_.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-YB6gRuuR.js';
-import { O as OptionsDialog, a as OptionsPopover } from './useAdaptiveView-DmhhcX-B.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-BJSyhkTT.js';
+import { O as OptionsDialog, a as OptionsPopover } from './useAdaptiveView-BVvKVT5q.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};
 
@@ -99,6 +100,7 @@ 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) => {
@@ -113,6 +115,9 @@ const MultiSelectFieldInput = ({
     }
   };
   const handleWrapperClick = (e) => {
+    if (disabled) {
+      return;
+    }
     const target = e.target;
     if (target.closest("button") || target.tagName === "INPUT") {
       return;
@@ -128,58 +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),
-                    ...{ [ANV_PART_ATTR]: PARTS.chip },
-                    label: option.label,
-                    onClose: disabled || readOnly || option.disabled ? 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(", "),
-                ...{ [ANV_PART_ATTR]: PARTS.overflowChip }
-              }
-            ) }) : 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
-            ] })
-          ] }),
+                ) }) : 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,
@@ -202,8 +216,8 @@ const MultiSelectFieldInput = ({
                 "aria-label": "toggle menu",
                 appearance: "ghost",
                 size: "small",
-                disabled,
                 ...toggleButtonProps,
+                disabled,
                 ...{ [ANV_PART_ATTR]: PARTS.toggleButton },
                 className: cx(
                   styles["toggle-button"],
@@ -618,7 +632,7 @@ const MultiSelectFieldComboboxMode = ({
               disableToggleButton: false,
               placeholder,
               disableClearButton,
-              toggleButtonProps: getToggleButtonProps(),
+              toggleButtonProps: getToggleButtonProps({ disabled: !!disabled }),
               onClear: handleClear,
               id: `${id}-input`,
               inputProps: getInputProps({
@@ -738,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,
@@ -836,66 +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,
-        ...{ [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, 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 : (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 }
-              }
-            ) }) : 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,
@@ -907,33 +948,11 @@ const MultiSelectFieldTrigger = ({
               ...{ [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"],
-            ...{ [ANV_PART_ATTR]: PARTS.clearButton },
-            onClick: (e) => {
-              e.stopPropagation();
-              onClear?.();
-            }
-          }
-        ) })
-      }
-    )
-  ] });
+          ) })
+        ] })
+      ]
+    }
+  );
 };
 MultiSelectFieldTrigger.displayName = "MultiSelectFieldTrigger";
 
@@ -1010,9 +1029,7 @@ const useSelectModeMultiple = ({
     },
     environment,
     selectedItem: null,
-    onSelectedItemChange: ({
-      selectedItem: si
-    }) => {
+    onSelectedItemChange: ({ selectedItem: si }) => {
       if (si) {
         if (si.type === "select-all") {
           onBulkActivate("selectAll", "");
@@ -1388,7 +1405,7 @@ const MultiSelectFieldSelectMode = ({
   );
 };
 
-const MultiSelectField = forwardRef((propsWithLayout, ref) => {
+const MultiSelectFieldInner = (propsWithLayout, ref) => {
   const { layoutStyles, componentProps } = useLayoutPropsUtil(propsWithLayout);
   const dataAttributes = Object.fromEntries(
     Object.entries(componentProps).filter(([key]) => key.startsWith("data-"))
@@ -1588,8 +1605,11 @@ const MultiSelectField = forwardRef((propsWithLayout, ref) => {
     onSearchChange
   };
   return /* @__PURE__ */ jsx(MultiSelectFieldComboboxMode, { ...comboboxProps });
-});
-MultiSelectField.displayName = "MultiSelectField";
+};
+const MultiSelectField = Object.assign(
+  forwardRef(MultiSelectFieldInner),
+  { displayName: "MultiSelectField" }
+);
 
 const getEnabledSelectionStats = (options, current) => {
   const enabledOptions = options.filter((opt) => !opt.disabled);
@@ -1706,4 +1726,4 @@ const MultiSelectFieldSync = (props) => {
 };
 
 export { MultiSelectField as M, MultiSelectFieldSync as a };
-//# sourceMappingURL=MultiSelectFieldSync-HhFKGtQM.js.map
+//# sourceMappingURL=MultiSelectFieldSync-BwMqc4QP.js.map