@servicetitan/anvil2 1.50.1 → 1.50.2

package/dist/{Toolbar-Vw9V1RHr.js → Toolbar-K9UFfyvX.js}

@@ -2,7 +2,7 @@ import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import * as React from 'react';
 import { useState, useEffect, useContext, createContext, useId, useRef, useCallback, forwardRef, useMemo } from 'react';
 import { B as Button } from './Button-92_FKAyV.js';
-import { T as Tooltip } from './Tooltip-CBy7srE2.js';
+import { T as Tooltip } from './Tooltip-CkfkiQPz.js';
 import { g as getKeyboardFocusableElements } from './getKeyboardFocusableElements-QqcABz0D.js';
 import { c as cx } from './index-tZvMCc77.js';
 import { u as useIntersectionObserver } from './useIntersectionObserver-BEmMDO3P.js';
@@ -11,24 +11,25 @@ import { B as ButtonToggle } from './ButtonToggle--sKvhBoA.js';
 import { B as ButtonLink } from './ButtonLink-C0zR7Wnb.js';
 import { S as SvgArrowDropDown } from './arrow_drop_down-ChAdBDux.js';
 import { L as Listbox } from './Listbox-C-n4IVVj.js';
-import { P as Popover } from './Popover-CCXrzBul.js';
+import { P as Popover } from './Popover-D9SmGQTh.js';
 import { F as Flex } from './Flex-CjPHUTeq.js';
 import { S as SvgMoreHoriz } from './more_horiz-DJgdQiy0.js';
 import { S as SvgMoreVert } from './more_vert-C_lJSyxt.js';
 import { I as Icon } from './Icon-BSuTVNaa.js';
 import { S as SvgClose } from './close-DZj38AEh.js';
+import { t as tabbable } from './DrawerContext-rJvgnn3O.js';
 import { S as SvgKeyboardArrowDown } from './keyboard_arrow_down-C8WQ38p1.js';
 import { S as SvgEvent } from './event-BEJFimi3.js';
-import { D as DateTime } from './Calendar-CAYitkfM.js';
+import { D as DateTime } from './Calendar-BeFARXwq.js';
 import { C as Chip } from './Chip-UqdorCE2.js';
-import { L as ListView } from './ListView-D8mfK8Lu.js';
+import { L as ListView } from './ListView-C5OBwbHe.js';
 import { S as SearchField, a as SvgSearch } from './SearchField-CJAo8dE0.js';
-import { u as useDateFieldSingleConversion, a as useDateFieldSingleState, M as MaskedDateInput, b as DateFieldSingleCalendar, D as DateFieldSingle } from './DateFieldSingle-DAtR8ImE.js';
-import { u as useDateFieldRangeConversion, a as useDateFieldRangeState, M as MaskedDateRangeInput, b as DateFieldRangeCalendar, D as DateFieldRange } from './DateFieldRange-ZAic_9mt.js';
-import { C as Checkbox } from './Checkbox-zAKOGEBl.js';
-import { R as Radio } from './Radio-jj0-1dOg.js';
-import { C as Combobox } from './Combobox-DGAa9vgU.js';
-import { D as Drawer } from './Drawer-GXeoK-r9.js';
+import { u as useDateFieldSingleConversion, a as useDateFieldSingleState, M as MaskedDateInput, b as DateFieldSingleCalendar, D as DateFieldSingle } from './DateFieldSingle-CQ6X-bVX.js';
+import { u as useDateFieldRangeConversion, a as useDateFieldRangeState, M as MaskedDateRangeInput, b as DateFieldRangeCalendar, D as DateFieldRange } from './DateFieldRange-DWAgi_T9.js';
+import { C as Checkbox } from './Checkbox-Chck2V5C.js';
+import { R as Radio } from './Radio-Cds2laHA.js';
+import { C as Combobox } from './Combobox-BTTWNSW1.js';
+import { D as Drawer } from './Drawer-CWogbC68.js';
 import { d as BreakpointSm, c as BreakpointMd, b as BreakpointLg, a as BreakpointXl, B as BreakpointXxl } from './primitive-BByug0kD.js';
 import { u as useMergeRefs } from './useMergeRefs-Dfmtq9cI.js';
 import { u as useLayoutPropsUtil } from './useLayoutPropsUtil-BlIWftBb.js';
@@ -739,8 +740,9 @@ const getActiveFilters = (filters) => {
       case "multiSelect":
         return filter.selectedItems && filter.selectedItems.length > 0;
       case "date":
-      case "dateRange":
         return filter.value !== null && filter.value !== void 0;
+      case "dateRange":
+        return filter.value !== null && filter.value !== void 0 && filter.value.startDate !== null && filter.value.endDate !== null;
       default:
         return false;
     }
@@ -912,11 +914,19 @@ const cloneFiltersWithItemRefs = (filters) => {
           ...filter,
           value: filter.value
         };
-      case "custom":
-        return {
-          ...filter,
-          value: filter.value ? { ...filter.value } : void 0
-        };
+      case "custom": {
+        const { value } = filter;
+        if (value === void 0) {
+          return { ...filter, value: void 0 };
+        }
+        if (Array.isArray(value)) {
+          return { ...filter, value: [...value] };
+        }
+        if (typeof value === "object" && value !== null) {
+          return { ...filter, value: { ...value } };
+        }
+        return { ...filter, value };
+      }
       default:
         return { ...filter };
     }
@@ -954,6 +964,7 @@ const FilterSelect = ({
   onDraftChange
 }) => {
   const isMultiSelect = filter.type === "multiSelect";
+  const listRef = useRef(null);
   const handleSearch = useCallback(
     (e) => {
       filter.onSearch?.(e.target.value);
@@ -963,8 +974,20 @@ const FilterSelect = ({
   const handleSearchClear = useCallback(() => {
     filter.onSearchClear?.();
   }, [filter]);
+  const handleSearchKeyDown = useCallback(
+    (e) => {
+      if (e.key === "ArrowDown" && listRef.current) {
+        e.preventDefault();
+        const focusableElements = tabbable(listRef.current);
+        if (focusableElements.length > 0) {
+          focusableElements[0].focus();
+        }
+      }
+    },
+    []
+  );
   const singleSelectList = useMemo(
-    () => /* @__PURE__ */ jsx(
+    () => /* @__PURE__ */ jsx("div", { ref: listRef, children: /* @__PURE__ */ jsx(
       Listbox,
       {
         items: filter.items,
@@ -974,14 +997,22 @@ const FilterSelect = ({
         },
         disableAutoSelectOnFocus: true,
         style: { paddingInline: "1rem", paddingBlockStart: "1rem" },
-        children: ({ items }) => items.map((item) => /* @__PURE__ */ jsx(Listbox.Option, { item, disabled: item.disabled, children: item.label }, item.id))
+        children: ({ items }) => items.map((item) => /* @__PURE__ */ jsx(
+          Listbox.Option,
+          {
+            item,
+            disabled: item.disabled,
+            children: item.label
+          },
+          item.id
+        ))
       },
       filter.id
-    ),
+    ) }),
     [filter.id, filter.items, draftValue, onDraftChange]
   );
   const multiSelectList = useMemo(
-    () => /* @__PURE__ */ jsx(
+    () => /* @__PURE__ */ jsx("div", { ref: listRef, children: /* @__PURE__ */ jsx(
       ListView,
       {
         items: filter.items,
@@ -994,7 +1025,7 @@ const FilterSelect = ({
         children: ({ items }) => items.map((item) => /* @__PURE__ */ jsx(ListView.Option, { item, children: item.label }, item.id))
       },
       filter.id
-    ),
+    ) }),
     [filter.id, filter.items, draftValue, onDraftChange]
   );
   return /* @__PURE__ */ jsxs(Fragment, { children: [
@@ -1005,6 +1036,7 @@ const FilterSelect = ({
         className: styles$2["filter-select-search"],
         onChange: handleSearch,
         onClear: handleSearchClear,
+        onKeyDown: handleSearchKeyDown,
         "data-anv": "filter-select-search"
       }
     ),
@@ -1076,7 +1108,7 @@ const FilterDateRange = ({
       onChange: (change) => {
         const hasCompleteRange = change.startDate && change.endDate;
         const isClearingRange = change.isInputEmpty;
-        if (change.isInputValid && (hasCompleteRange || isClearingRange)) {
+        if (change.isInputValid && hasCompleteRange || isClearingRange) {
           onChange({ ...change, isDateRangeValid: true });
         }
       }
@@ -1116,6 +1148,8 @@ const FilterButton = ({
     filter.type === "multiSelect" ? [] : void 0
   );
   const draftValueRef = useRef(draftValue);
+  const triggerRef = useRef(null);
+  const contentRef = useRef(null);
   useEffect(() => {
     draftValueRef.current = draftValue;
   }, [draftValue]);
@@ -1155,6 +1189,9 @@ const FilterButton = ({
         if (!controlledFiltering && filter.type !== "multiSelect") {
           updateFilter(filter.id, value, true);
           setIsOpen(false);
+          requestAnimationFrame(() => {
+            triggerRef.current?.focus();
+          });
         }
       }
     },
@@ -1166,15 +1203,24 @@ const FilterButton = ({
       updateFilter(filter.id, draftValue, true);
     }
     setIsOpen(false);
+    requestAnimationFrame(() => {
+      triggerRef.current?.focus();
+    });
   }, [draftValue, getCurrentFilterValue, filter.id, updateFilter]);
   const handleCancel = useCallback(() => {
     if (!controlledFiltering) {
       setIsOpen(false);
+      requestAnimationFrame(() => {
+        triggerRef.current?.focus();
+      });
       return;
     }
     const originalValue = getCurrentFilterValue();
     setDraftValue(originalValue);
     setIsOpen(false);
+    requestAnimationFrame(() => {
+      triggerRef.current?.focus();
+    });
   }, [controlledFiltering, getCurrentFilterValue]);
   const getButtonLabel = useMemo(() => {
     switch (filter.type) {
@@ -1211,7 +1257,7 @@ const FilterButton = ({
         }
         return filter.label;
       case "dateRange":
-        if (filter.value) {
+        if (filter.value?.startDate && filter.value?.endDate) {
           const start = DateTime.fromISO(filter.value.startDate, {
             zone: "local"
           });
@@ -1306,9 +1352,37 @@ const FilterButton = ({
     if (e.key === "Escape") {
       handleOutsidePress();
     }
+    if (e.key === "Tab" && contentRef.current) {
+      const focusableElements = tabbable(contentRef.current);
+      if (focusableElements.length === 0) return;
+      const firstElement = focusableElements[0];
+      const lastElement = focusableElements[focusableElements.length - 1];
+      const activeElement = document.activeElement;
+      if (e.shiftKey && activeElement === firstElement) {
+        e.preventDefault();
+        lastElement.focus();
+      } else if (!e.shiftKey && activeElement === lastElement) {
+        e.preventDefault();
+        firstElement.focus();
+      }
+    }
+  };
+  const handleTriggerKeyDown = (e) => {
+    if (e.key === "ArrowDown") {
+      if (isOpen && contentRef.current) {
+        e.preventDefault();
+        requestAnimationFrame(() => {
+          if (!contentRef.current) return;
+          const focusableElements = tabbable(contentRef.current);
+          if (focusableElements.length > 0) {
+            focusableElements[0].focus();
+          }
+        });
+      }
+    }
   };
   const triggerClasses = cx(styles$2["filter-button-trigger"], {
-    [styles$2["filter-button-trigger--selected"]]: filter.type === "custom" && filter.value || filter.type === "singleSelect" && filter.selectedItem || filter.type === "multiSelect" && filter.selectedItems && filter.selectedItems.length > 0 || filter.type === "date" && filter.value || filter.type === "dateRange" && filter.value
+    [styles$2["filter-button-trigger--selected"]]: filter.type === "custom" && filter.value || filter.type === "singleSelect" && filter.selectedItem || filter.type === "multiSelect" && filter.selectedItems && filter.selectedItems.length > 0 || filter.type === "date" && filter.value || filter.type === "dateRange" && filter.value?.startDate && filter.value?.endDate
   });
   const contentClasses = cx(styles$2["filter-button-content"], className);
   const iconOptions = filter.type === "date" || filter.type === "dateRange" ? { before: SvgEvent } : { after: SvgKeyboardArrowDown };
@@ -1323,7 +1397,11 @@ const FilterButton = ({
         /* @__PURE__ */ jsx(
           Popover.Button,
           {
-            onKeyDown: handleKeyDown,
+            ref: triggerRef,
+            onKeyDown: (e) => {
+              handleTriggerKeyDown(e);
+              handleKeyDown(e);
+            },
             appearance: "ghost",
             size: "small",
             icon: iconOptions,
@@ -1336,21 +1414,29 @@ const FilterButton = ({
             children: getButtonLabel
           }
         ),
-        /* @__PURE__ */ jsxs(Popover.Content, { onKeyDown: handleKeyDown, className: contentClasses, children: [
-          getContent,
-          controlledFiltering && /* @__PURE__ */ jsxs(
-            Flex,
-            {
-              gap: 2,
-              justifyContent: "flex-end",
-              className: styles$2["filter-button-buttons"],
-              children: [
-                /* @__PURE__ */ jsx(Popover.Close, { size: "small", onClick: handleCancel, children: "Cancel" }),
-                /* @__PURE__ */ jsx(Button, { appearance: "primary", size: "small", onClick: handleSubmit, children: "Apply" })
-              ]
-            }
-          )
-        ] })
+        /* @__PURE__ */ jsxs(
+          Popover.Content,
+          {
+            ref: contentRef,
+            onKeyDown: handleKeyDown,
+            className: contentClasses,
+            children: [
+              getContent,
+              controlledFiltering && /* @__PURE__ */ jsxs(
+                Flex,
+                {
+                  gap: 2,
+                  justifyContent: "flex-end",
+                  className: styles$2["filter-button-buttons"],
+                  children: [
+                    /* @__PURE__ */ jsx(Popover.Close, { size: "small", onClick: handleCancel, children: "Cancel" }),
+                    /* @__PURE__ */ jsx(Button, { appearance: "primary", size: "small", onClick: handleSubmit, children: "Apply" })
+                  ]
+                }
+              )
+            ]
+          }
+        )
       ]
     }
   ) });
@@ -2190,4 +2276,4 @@ const Toolbar = Object.assign(ToolbarElement, {
 });
 
 export { Toolbar as T, ToolbarButton as a, ToolbarButtonToggle as b, ToolbarButtonLink as c, ToolbarSelect as d, ToolbarControlGroup as e, ToolbarSearchField as f, ToolbarElement as g };
-//# sourceMappingURL=Toolbar-Vw9V1RHr.js.map
+//# sourceMappingURL=Toolbar-K9UFfyvX.js.map