@servicetitan/anvil2 1.50.0 → 1.50.1

package/dist/DataTable.css

@@ -138,7 +138,7 @@ table[data-anv=simple-table-base] thead th._table-header-cell_1ffr7_2 {
   }
 }@layer starter, reset, base, state, application;
 @layer reset {
-  ._table-base_wtnhx_2 {
+  ._table-base_11xh7_2 {
     all: unset;
     font-family: var(--font-family-base, "Nunito Sans", sans-serif);
     font-size: 100%;
@@ -151,24 +151,41 @@ table[data-anv=simple-table-base] thead th._table-header-cell_1ffr7_2 {
     box-sizing: border-box;
     display: table;
   }
+  ._data-table-base_11xh7_15 {
+    all: unset;
+    font-family: var(--font-family-base, "Nunito Sans", sans-serif);
+    font-size: 100%;
+    color: var(--foreground-color, #141414);
+    margin: 0;
+    padding: 0;
+    border-style: none;
+    border-width: 0;
+    border-color: transparent;
+    box-sizing: border-box;
+    display: grid;
+  }
 }
 @layer base {
-  ._table-base_wtnhx_2 {
+  ._table-base_11xh7_2 {
     border-collapse: separate;
     border-spacing: 0;
     border-style: hidden;
     border-width: 0;
   }
+  ._data-table-base_11xh7_15 {
+    width: var(--a2-table-width, 100%);
+    grid-template-columns: var(--a2-grid-template-columns);
+  }
 }
 @layer state {}
-table._table-base_wtnhx_2 {
+table._table-base_11xh7_2 {
   background-color: revert-layer;
   max-width: revert-layer;
   border-collapse: revert-layer;
   border-spacing: revert-layer;
 }@layer starter, reset, base, state, application;
 @layer reset {
-  ._table-body_zs2gj_2 {
+  ._table-body_zx1bt_2 {
     all: unset;
     font-family: var(--font-family-base, "Nunito Sans", sans-serif);
     font-size: 100%;
@@ -182,9 +199,15 @@ table._table-base_wtnhx_2 {
     display: revert-layer;
   }
 }
-@layer base {}
+@layer base {
+  div._table-body_zx1bt_2 {
+    display: grid;
+    grid-column: 1/-1;
+    grid-template-columns: subgrid;
+  }
+}
 @layer state {}
-table[data-anv=simple-table-base] ._table-body_zs2gj_2 {
+table[data-anv=simple-table-base] ._table-body_zx1bt_2 {
   background-color: revert-layer;
 }@layer starter, reset, base, state, application;
 @layer reset {
@@ -366,7 +389,7 @@ table[data-anv=simple-table-base] ._table-body_zs2gj_2 {
   }
 }@layer starter, reset, base, state, application;
 @layer reset {
-  ._data-table-body-row_1vs3r_2 {
+  ._data-table-body-row_3jgem_2 {
     all: unset;
     font-family: var(--font-family-base, "Nunito Sans", sans-serif);
     font-size: 100%;
@@ -381,21 +404,27 @@ table[data-anv=simple-table-base] ._table-body_zs2gj_2 {
   }
 }
 @layer base {
-  ._data-table-body-row_1vs3r_2 {
-    display: flex;
+  ._data-table-body-row_3jgem_2 {
+    display: grid;
+    grid-column: 1/-1;
+    grid-template-columns: subgrid;
+  }
+  ._data-table-body-sub-component-row_3jgem_22 {
+    display: block;
+    grid-column: 1/-1;
   }
-  ._data-table-body-row_1vs3r_2 > ._data-table-body-sub-component-container_1vs3r_20 {
+  ._data-table-body-sub-component-container_3jgem_26 {
     --a2-table-body-sub-component-padding: var(--size-6);
     background-color: var(--a2-table-body-background-color);
     width: 100%;
   }
-  ._data-table-body-row_1vs3r_2 > ._data-table-body-sub-component-container_1vs3r_20 ._data-table-body-sub-component-content_1vs3r_25 {
+  ._data-table-body-sub-component-container_3jgem_26 ._data-table-body-sub-component-content_3jgem_31 {
     padding: var(--a2-table-body-sub-component-padding);
     border-block-end: 1px solid var(--a2-table-cell-border-color);
   }
 }
 @layer state {
-  ._data-table-body-cell-group_1vs3r_31:not(:last-of-type):after {
+  ._data-table-body-cell-group_3jgem_37:not(:last-of-type):after {
     content: "";
     position: absolute;
     inset-block: 0;
@@ -406,7 +435,7 @@ table[data-anv=simple-table-base] ._table-body_zs2gj_2 {
   }
 }@layer starter, reset, base, state, application;
 @layer reset {
-  ._table-footer_hq77m_2 {
+  ._table-footer_9bv2z_2 {
     all: unset;
     font-family: var(--font-family-base, "Nunito Sans", sans-serif);
     font-size: 100%;
@@ -421,24 +450,29 @@ table[data-anv=simple-table-base] ._table-body_zs2gj_2 {
   }
 }
 @layer base {
-  ._table-footer_hq77m_2 {
+  ._table-footer_9bv2z_2 {
     --a2-table-footer-bottom-offset: 0;
     position: sticky;
     bottom: var(--a2-table-footer-bottom-offset);
     z-index: 2;
     background-color: var(--a2-table-background-color);
   }
-  ._table-footer_hq77m_2 ._table-footer-row_hq77m_24:last-of-type ._table-footer-cell_hq77m_24:first-child {
+  ._table-footer_9bv2z_2 ._table-footer-row_9bv2z_24:last-of-type ._table-footer-cell_9bv2z_24:first-child {
     border-end-start-radius: var(--a2-table-border-radius);
     box-shadow: calc(-1 * var(--a2-table-footer-spacing)) 0 var(--a2-table-background-color);
   }
-  ._table-footer_hq77m_2 ._table-footer-row_hq77m_24:last-of-type ._table-footer-cell_hq77m_24:last-child {
+  ._table-footer_9bv2z_2 ._table-footer-row_9bv2z_24:last-of-type ._table-footer-cell_9bv2z_24:last-child {
     border-end-end-radius: var(--a2-table-border-radius);
     box-shadow: var(--a2-table-footer-spacing) 0 var(--a2-table-background-color);
   }
+  div._table-footer_9bv2z_2 {
+    display: grid;
+    grid-column: 1/-1;
+    grid-template-columns: subgrid;
+  }
 }@layer starter, reset, base, state, application;
 @layer reset {
-  ._data-table-footer-row_1nmuq_2 {
+  ._data-table-footer-row_13en8_2 {
     all: unset;
     font-family: var(--font-family-base, "Nunito Sans", sans-serif);
     font-size: 100%;
@@ -453,18 +487,19 @@ table[data-anv=simple-table-base] ._table-body_zs2gj_2 {
   }
 }
 @layer base {
-  ._data-table-footer_1nmuq_2 {
+  ._data-table-footer_13en8_2 {
     padding-block-start: var(--a2-table-footer-spacing);
   }
-  ._data-table-footer-row_1nmuq_2 {
-    display: flex;
-    flex-direction: row;
+  ._data-table-footer-row_13en8_2 {
+    display: grid;
+    grid-column: 1/-1;
+    grid-template-columns: subgrid;
     position: relative;
   }
 }
 @layer state {}@layer starter, reset, base, state, application;
 @layer reset {
-  ._table-header_1pe38_2 {
+  ._table-header_y7cb1_2 {
     all: unset;
     font-family: var(--font-family-base, "Nunito Sans", sans-serif);
     font-size: 100%;
@@ -479,12 +514,17 @@ table[data-anv=simple-table-base] ._table-body_zs2gj_2 {
   }
 }
 @layer base {
-  ._table-header_1pe38_2 {
+  ._table-header_y7cb1_2 {
     position: sticky;
     top: 0;
     z-index: 2;
     background-color: var(--a2-table-header-background-color);
   }
+  div._table-header_y7cb1_2 {
+    display: grid;
+    grid-column: 1/-1;
+    grid-template-columns: subgrid;
+  }
 }
 @layer state {}@layer starter, reset, base, state, application;
 @layer reset {
@@ -529,7 +569,7 @@ table[data-anv=simple-table-base] ._table-body_zs2gj_2 {
   }
 }@layer starter, reset, base, state, application;
 @layer reset {
-  ._table-header_blxpc_2 {
+  ._table-header_6qs0u_2 {
     all: unset;
     font-family: var(--font-family-base, "Nunito Sans", sans-serif);
     font-size: 100%;
@@ -544,8 +584,10 @@ table[data-anv=simple-table-base] ._table-body_zs2gj_2 {
   }
 }
 @layer base {
-  ._data-table-header-row_blxpc_17 {
-    display: flex;
+  ._data-table-header-row_6qs0u_17 {
+    display: grid;
+    grid-column: 1/-1;
+    grid-template-columns: subgrid;
   }
 }
 @layer state {}@layer starter, reset, base, state, application;

package/dist/SelectField.js

@@ -1,2 +1,2 @@
-export { S as SelectField, a as SelectFieldSync } from './SelectFieldSync-BOzavAtv.js';
+export { S as SelectField, a as SelectFieldSync } from './SelectFieldSync-D4VdOXoY.js';
 //# sourceMappingURL=SelectField.js.map

package/dist/{SelectFieldSync-BOzavAtv.js → SelectFieldSync-D4VdOXoY.js}

@@ -1,5 +1,5 @@
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
-import { u as useCombobox, m as matchSorter } from './match-sorter.esm-CtBw0MrM.js';
+import { u as useDownshiftEnvironment, a as useCombobox, m as matchSorter } from './match-sorter.esm-NrKOPPde.js';
 import { useState, useRef, useCallback, useEffect, useMemo, forwardRef, useId, useImperativeHandle } from 'react';
 import { S as Spinner } from './Spinner-xEFwsq8_.js';
 import { B as Button } from './Button-92_FKAyV.js';
@@ -172,12 +172,12 @@ function useSelectFieldLoading(config) {
   };
 }
 
-const empty = "_empty_dbxri_5";
-const scroller = "_scroller_dbxri_19";
+const empty = "_empty_4c4yl_6";
+const scroller = "_scroller_4c4yl_20";
 const styles$3 = {
-	"select-field-list": "_select-field-list_dbxri_2",
+	"select-field-list": "_select-field-list_4c4yl_2",
 	empty: empty,
-	"load-more": "_load-more_dbxri_12",
+	"load-more": "_load-more_4c4yl_13",
 	scroller: scroller};
 
 const highlighted = "_highlighted_15431_26";
@@ -489,6 +489,7 @@ const useCombo = ({
   const selectedDownshiftItem = useMemo(() => {
     return selectedOption ? mapOptionToDownshiftItem(selectedOption) : null;
   }, [selectedOption]);
+  const { ref: wrapperDivRef, environment } = useDownshiftEnvironment();
   const {
     isOpen,
     highlightedIndex,
@@ -508,6 +509,7 @@ const useCombo = ({
       }
       return (disabled || item.disabled) ?? false;
     },
+    environment,
     selectedItem: selectedDownshiftItem,
     onSelectedItemChange: ({
       selectedItem: si
@@ -536,6 +538,7 @@ const useCombo = ({
   });
   return {
     inputValue,
+    wrapperDivRef,
     getToggleButtonProps,
     getLabelProps,
     getMenuProps,
@@ -879,6 +882,7 @@ const SelectField = forwardRef(
       getLabelProps,
       getMenuProps,
       getInputProps,
+      wrapperDivRef,
       highlightedIndex,
       getItemProps,
       inputValue,
@@ -927,96 +931,104 @@ const SelectField = forwardRef(
     };
     const disableClearButton = disableClearButtonProp || !selectedOption || isDisabledOrReadOnly;
     if (displayAs === "dialog") {
-      return /* @__PURE__ */ jsxs("div", { className: styles$4["search-field"], style: { ...layoutStyles }, children: [
-        /* @__PURE__ */ jsx(
-          SelectFieldLabel,
-          {
-            label,
-            getLabelProps,
-            required
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          SelectFieldInput,
-          {
-            disabled,
-            readOnly,
-            disableToggleButton: false,
-            placeholder,
-            disableClearButton,
-            toggleButtonProps: getToggleButtonProps(),
-            onClear: () => onSelectedOptionChange(null),
-            id: `${id}-input`,
-            inputProps: getInputProps({
-              "aria-describedby": hasHelperText ? helperUid : void 0,
-              "aria-invalid": error ? true : void 0,
-              onFocus: handleFocus,
-              onBlur: handleBlur
-            }),
-            size,
-            error: !!error,
-            prefix,
-            suffix
-          }
-        ),
-        hasHelperText ? /* @__PURE__ */ jsx(
-          FieldMessage,
-          {
-            id: helperUid,
-            hint,
-            errorMessage,
-            errorAriaLive: isOpen || hasFocus ? errorAriaLiveProp : "off",
-            description
-          }
-        ) : null,
-        /* @__PURE__ */ jsx(
-          FieldDialog,
-          {
-            id: `${id}-dialog`,
-            isOpen,
-            onClose: closeMenu,
-            title: label,
-            field: /* @__PURE__ */ jsx(
+      return /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: styles$4["search-field"],
+          style: { ...layoutStyles },
+          ref: wrapperDivRef,
+          children: [
+            /* @__PURE__ */ jsx(
+              SelectFieldLabel,
+              {
+                label,
+                getLabelProps,
+                required
+              }
+            ),
+            /* @__PURE__ */ jsx(
               SelectFieldInput,
               {
                 disabled,
                 readOnly,
-                inputProps: getInputProps(),
-                disableToggleButton: true,
+                disableToggleButton: false,
                 placeholder,
                 disableClearButton,
+                toggleButtonProps: getToggleButtonProps(),
                 onClear: () => onSelectedOptionChange(null),
-                id: `${id}-dialog-input`,
-                inputWrapperRef,
-                size: "medium",
+                id: `${id}-input`,
+                inputProps: getInputProps({
+                  "aria-describedby": hasHelperText ? helperUid : void 0,
+                  "aria-invalid": error ? true : void 0,
+                  onFocus: handleFocus,
+                  onBlur: handleBlur
+                }),
+                size,
                 error: !!error,
                 prefix,
                 suffix
               }
             ),
-            children: /* @__PURE__ */ jsx(
-              SelectFieldList,
+            hasHelperText ? /* @__PURE__ */ jsx(
+              FieldMessage,
               {
-                isOpen: true,
-                items: downshiftItems,
-                getMenuProps,
-                getItemProps,
-                highlightedIndex,
-                selectedOption,
-                hasMore,
-                onLoadMore: handleLoadMore,
-                loading,
-                loadingMore,
-                disabled: isDisabledOrReadOnly,
-                style: {
-                  paddingInline: 24,
-                  paddingBlockEnd: 24
-                }
+                id: helperUid,
+                hint,
+                errorMessage,
+                errorAriaLive: isOpen || hasFocus ? errorAriaLiveProp : "off",
+                description
+              }
+            ) : null,
+            /* @__PURE__ */ jsx(
+              FieldDialog,
+              {
+                id: `${id}-dialog`,
+                isOpen,
+                onClose: closeMenu,
+                title: label,
+                field: /* @__PURE__ */ jsx(
+                  SelectFieldInput,
+                  {
+                    disabled,
+                    readOnly,
+                    inputProps: getInputProps(),
+                    disableToggleButton: true,
+                    placeholder,
+                    disableClearButton,
+                    onClear: () => onSelectedOptionChange(null),
+                    id: `${id}-dialog-input`,
+                    inputWrapperRef,
+                    size: "medium",
+                    error: !!error,
+                    prefix,
+                    suffix
+                  }
+                ),
+                children: /* @__PURE__ */ jsx(
+                  SelectFieldList,
+                  {
+                    isOpen: true,
+                    items: downshiftItems,
+                    getMenuProps,
+                    getItemProps,
+                    highlightedIndex,
+                    selectedOption,
+                    hasMore,
+                    onLoadMore: handleLoadMore,
+                    loading,
+                    loadingMore,
+                    disabled: isDisabledOrReadOnly,
+                    style: {
+                      paddingInline: 24,
+                      paddingBlockEnd: 24
+                    }
+                  }
+                )
               }
             )
-          }
-        )
-      ] });
+          ]
+        }
+      );
     }
     return /* @__PURE__ */ jsxs("div", { className: styles$4["search-field"], style: { ...layoutStyles }, children: [
       /* @__PURE__ */ jsx(
@@ -1119,4 +1131,4 @@ const SelectFieldSync = (props) => {
 };
 
 export { SelectField as S, SelectFieldSync as a, useAdaptiveView as u };
-//# sourceMappingURL=SelectFieldSync-BOzavAtv.js.map
+//# sourceMappingURL=SelectFieldSync-D4VdOXoY.js.map