@servicetitan/anvil2 2.2.0 → 2.4.0

package/dist/{Toolbar-CVOenuCF.js → Toolbar-jfZ-CupZ.js}

@@ -1,17 +1,17 @@
 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-l7pTJdPc.js';
+import { B as Button } from './Button-DrNDkO2f.js';
 import { T as Tooltip } from './Tooltip-Bt62hC5J.js';
 import { g as getKeyboardFocusableElements } from './getKeyboardFocusableElements-QqcABz0D.js';
 import { c as cx } from './index-SvGbrGuT.js';
 import { u as useIntersectionObserver } from './useIntersectionObserver-BEmMDO3P.js';
 import { useTrackingId } from './useTrackingId.js';
-import { B as ButtonToggle } from './ButtonToggle-BOVP_jEN.js';
-import { B as ButtonLink } from './ButtonLink-CRlyK750.js';
+import { B as ButtonToggle } from './ButtonToggle-DrFewgOG.js';
+import { B as ButtonLink } from './ButtonLink-DDtrmbVM.js';
 import { S as SvgArrowDropDown } from './arrow_drop_down-ChAdBDux.js';
 import { L as Listbox } from './Listbox-DMyxIokT.js';
-import { P as Popover } from './Popover-4C5IVk8T.js';
+import { P as Popover } from './Popover-CYWYCj7l.js';
 import { F as Flex } from './Flex-CUtXN-C0.js';
 import { S as SvgMoreHoriz } from './more_horiz-DJgdQiy0.js';
 import { S as SvgMoreVert } from './more_vert-C_lJSyxt.js';
@@ -22,14 +22,14 @@ import { S as SvgKeyboardArrowDown } from './keyboard_arrow_down-C8WQ38p1.js';
 import { S as SvgEvent } from './TimezoneMessage-Cnsl4cHT.js';
 import { D as DateTime } from './luxon-wpz4A-OQ.js';
 import { C as Chip } from './Chip-Bc7jiIJ1.js';
-import { L as ListView } from './ListView-MMmJDM--.js';
-import { S as SearchField, a as SvgSearch } from './SearchField-CoeaOip5.js';
-import { u as useDateFieldSingleConversion, a as useDateFieldSingleState, M as MaskedDateInput, b as DateFieldSingleCalendar, D as DateFieldSingle } from './DateFieldSingle-C4hU55MP.js';
-import { u as useDateFieldRangeConversion, a as useDateFieldRangeState, M as MaskedDateRangeInput, b as DateFieldRangeCalendar, D as DateFieldRange } from './DateFieldRange-DBOiqaML.js';
-import { C as Checkbox } from './Checkbox-DuzAqrE7.js';
-import { R as Radio } from './Radio-D7hNws2b.js';
-import { C as Combobox } from './Combobox-CSGn20KQ.js';
-import { D as Drawer } from './Drawer-Dhq76ot3.js';
+import { L as ListView } from './ListView-CN8zu-cq.js';
+import { S as SearchField, a as SvgSearch, b as SearchField$1 } from './SearchField-CtdtcrVV.js';
+import { u as useDateFieldSingleConversion, a as useDateFieldSingleState, M as MaskedDateInput, b as DateFieldSingleCalendar, D as DateFieldSingle } from './DateFieldSingle-9UHxIxIA.js';
+import { u as useDateFieldRangeConversion, a as useDateFieldRangeState, M as MaskedDateRangeInput, b as DateFieldRangeCalendar, D as DateFieldRange } from './DateFieldRange-CvlOeE4v.js';
+import { C as Checkbox } from './Checkbox-CFgjreAl.js';
+import { R as Radio } from './Radio-BMFwnzyz.js';
+import { C as Combobox } from './Combobox-Drqb3GVU.js';
+import { D as Drawer } from './Drawer-CnMskBQl.js';
 import { d as BreakpointSm, c as BreakpointMd, b as BreakpointLg, a as BreakpointXl, B as BreakpointXxl } from './primitive-C3RFDRA8.js';
 import { u as useMergeRefs } from './useMergeRefs-Dfmtq9cI.js';
 import { u as useLayoutPropsUtil } from './useLayoutPropsUtil-loxbyklF.js';
@@ -89,7 +89,7 @@ const OverflowItemContext = createContext({
 });
 const useOverFlowItemContext = () => useContext(OverflowItemContext);
 
-const ToolbarOverflowContext = createContext({
+const ToolbarContext = createContext({
   overflowItems: [],
   addItem: () => {
     return;
@@ -99,8 +99,10 @@ const ToolbarOverflowContext = createContext({
   },
   toolbarRef: { current: null },
   orderedIds: [],
-  overflow: "wrap"
+  overflow: "wrap",
+  size: "xsmall"
 });
+const useToolbarSize = () => useContext(ToolbarContext).size;
 
 function getToolbarElements(toolbarElement) {
   const toolbarContent = toolbarElement.querySelector(
@@ -213,18 +215,17 @@ const handleMenuKeyboardNavigation = (event) => {
   menuItems[nextIndex]?.focus();
 };
 
-const toolbar = "_toolbar_1em0g_13";
+const toolbar = "_toolbar_15bpr_12";
 const styles$3 = {
 	toolbar: toolbar,
-	"toolbar-outline-spacer": "_toolbar-outline-spacer_1em0g_20",
-	"toolbar-content": "_toolbar-content_1em0g_23",
-	"overflow-wrap": "_overflow-wrap_1em0g_28",
-	"overflow-collapse": "_overflow-collapse_1em0g_31",
-	"toolbar-overflow-content": "_toolbar-overflow-content_1em0g_34",
-	"toolbar-button-item": "_toolbar-button-item_1em0g_42",
-	"toolbar-item": "_toolbar-item_1em0g_48",
-	"toolbar-button-toggle-item": "_toolbar-button-toggle-item_1em0g_67",
-	"toolbar-overflow-trigger": "_toolbar-overflow-trigger_1em0g_73"
+	"toolbar-content": "_toolbar-content_15bpr_19",
+	"overflow-wrap": "_overflow-wrap_15bpr_24",
+	"overflow-collapse": "_overflow-collapse_15bpr_27",
+	"toolbar-overflow-content": "_toolbar-overflow-content_15bpr_30",
+	"toolbar-button-item": "_toolbar-button-item_15bpr_38",
+	"toolbar-item": "_toolbar-item_15bpr_44",
+	"toolbar-button-toggle-item": "_toolbar-button-toggle-item_15bpr_61",
+	"toolbar-overflow-trigger": "_toolbar-overflow-trigger_15bpr_67"
 };
 
 const ToolbarItemWrapper = ({
@@ -235,9 +236,7 @@ const ToolbarItemWrapper = ({
   rootMargin,
   className
 }) => {
-  const { addItem, removeItem, toolbarRef, overflow } = useContext(
-    ToolbarOverflowContext
-  );
+  const { addItem, removeItem, toolbarRef, overflow } = useContext(ToolbarContext);
   const itemId = useId();
   const elementRef = useRef(null);
   const isCollapseMode = overflow === "collapse";
@@ -313,6 +312,7 @@ const ToolbarButton = forwardRef(
   (props, _ref) => {
     const { appearance = "ghost", className, children, ...rest } = props;
     const { isInOverflowMenu = false } = useOverFlowItemContext?.() || {};
+    const size = useToolbarSize();
     const trackingId = useTrackingId({
       name: "ToolbarButton",
       data: {
@@ -328,7 +328,7 @@ const ToolbarButton = forwardRef(
       {
         "data-tracking-id": trackingId,
         appearance,
-        size: "small",
+        size,
         "data-anv": "toolbar-button",
         className: buttonClassNames,
         ...rest,
@@ -340,7 +340,7 @@ const ToolbarButton = forwardRef(
         {
           "data-tracking-id": trackingId,
           appearance,
-          size: "small",
+          size,
           "data-anv": "toolbar-button",
           className: buttonClassNames,
           ...rest
@@ -359,6 +359,7 @@ ToolbarButton.displayName = "ToolbarButton";
 const ToolbarButtonToggle = forwardRef((props, _ref) => {
   const { className, children, isFilter, ...rest } = props;
   const { isInOverflowMenu = false } = useOverFlowItemContext?.() || {};
+  const size = useToolbarSize();
   const trackingId = useTrackingId({
     name: "ToolbarButtonToggle",
     data: {
@@ -378,7 +379,7 @@ const ToolbarButtonToggle = forwardRef((props, _ref) => {
     ButtonToggle,
     {
       "data-tracking-id": trackingId,
-      size: "small",
+      size,
       "data-anv": "toolbar-button-toggle",
       className: buttonToggleClassNames,
       ...rest,
@@ -389,7 +390,7 @@ const ToolbarButtonToggle = forwardRef((props, _ref) => {
       ButtonToggle,
       {
         "data-tracking-id": trackingId,
-        size: "small",
+        size,
         "data-anv": "toolbar-button-toggle",
         className: buttonToggleClassNames,
         ...rest
@@ -407,6 +408,7 @@ ToolbarButtonToggle.displayName = "ToolbarButtonToggle";
 const ToolbarButtonLink = forwardRef((props, _ref) => {
   const { appearance = "ghost", className, children, ...rest } = props;
   const { isInOverflowMenu = false } = useOverFlowItemContext?.() || {};
+  const size = useToolbarSize();
   const trackingId = useTrackingId({
     name: "ToolbarButtonLink",
     data: {
@@ -424,7 +426,7 @@ const ToolbarButtonLink = forwardRef((props, _ref) => {
     {
       "data-tracking-id": trackingId,
       appearance,
-      size: "small",
+      size,
       "data-anv": "toolbar-button-link",
       className: buttonLinkClassNames,
       ...rest,
@@ -436,7 +438,7 @@ const ToolbarButtonLink = forwardRef((props, _ref) => {
       {
         "data-tracking-id": trackingId,
         appearance,
-        size: "small",
+        size,
         "data-anv": "toolbar-button-link",
         className: buttonLinkClassNames,
         ...rest
@@ -508,6 +510,7 @@ const ToolbarSelect = forwardRef(
       }
     };
     const { isInOverflowMenu = false } = useOverFlowItemContext?.() || {};
+    const toolbarSize = useToolbarSize();
     const trackingId = useTrackingId({
       name: "ToolbarSelect",
       data: {
@@ -536,7 +539,7 @@ const ToolbarSelect = forwardRef(
             {
               "data-tracking-id": trackingId,
               appearance,
-              size: "small",
+              size: toolbarSize,
               icon: { after: SvgArrowDropDown },
               className: buttonClassNames,
               id: selectId,
@@ -597,8 +600,9 @@ const ToolbarOverflowMenu = ({
   additionalItems,
   direction
 }) => {
-  const { overflowItems, orderedIds } = useContext(ToolbarOverflowContext);
+  const { overflowItems, orderedIds } = useContext(ToolbarContext);
   const menuTriggerId = useId();
+  const size = useToolbarSize();
   const orderedItems = useMemo(() => {
     const allElements = orderedIds?.map((id) => {
       return overflowItems.find((item) => item.id === id);
@@ -614,13 +618,13 @@ const ToolbarOverflowMenu = ({
     /* @__PURE__ */ jsx(
       Popover.Button,
       {
-        size: "small",
+        size,
         appearance: "ghost",
         id: menuTriggerId,
         className: popoverButtonClassNames,
         "data-anv": "toolbar-overflow-trigger",
         "aria-label": "Additional toolbar options",
-        children: /* @__PURE__ */ jsx(Icon, { svg: overflowIcon, size: "small" })
+        children: /* @__PURE__ */ jsx(Icon, { svg: overflowIcon, size: size === "xsmall" ? "small" : size })
       }
     ),
     /* @__PURE__ */ jsx(Popover.Content, { children: /* @__PURE__ */ jsx(OverflowItemContext.Provider, { value: { isInOverflowMenu: true }, children: /* @__PURE__ */ jsxs(
@@ -680,15 +684,15 @@ const FilterGroupContext = createContext({
 });
 
 const styles$2 = {
-	"filter-button-trigger": "_filter-button-trigger_1gitm_18",
-	"filter-button-content": "_filter-button-content_1gitm_22",
-	"filter-select-content": "_filter-select-content_1gitm_26",
-	"filter-button-buttons": "_filter-button-buttons_1gitm_32",
-	"filter-drawer-trigger": "_filter-drawer-trigger_1gitm_38",
-	"filter-item": "_filter-item_1gitm_53",
-	"filter-select-search": "_filter-select-search_1gitm_61",
-	"filter-button-trigger--selected": "_filter-button-trigger--selected_1gitm_78",
-	"filter-drawer-trigger--chipped": "_filter-drawer-trigger--chipped_1gitm_88"
+	"filter-button-trigger": "_filter-button-trigger_10yfo_17",
+	"filter-button-content": "_filter-button-content_10yfo_20",
+	"filter-select-content": "_filter-select-content_10yfo_24",
+	"filter-button-buttons": "_filter-button-buttons_10yfo_30",
+	"filter-drawer-trigger": "_filter-drawer-trigger_10yfo_36",
+	"filter-item": "_filter-item_10yfo_52",
+	"filter-select-search": "_filter-select-search_10yfo_56",
+	"filter-button-trigger--selected": "_filter-button-trigger--selected_10yfo_69",
+	"filter-drawer-trigger--chipped": "_filter-drawer-trigger--chipped_10yfo_80"
 };
 
 const FilterItemWrapper = ({
@@ -1183,6 +1187,7 @@ const FilterButton = ({
 }) => {
   const [isOpen, setIsOpen] = useState(false);
   const { updateFilter, controlledFiltering } = useContext(FilterGroupContext);
+  const toolbarSize = useToolbarSize();
   const [draftValue, setDraftValue] = useState(
     filter.type === "multiSelect" ? [] : void 0
   );
@@ -1450,7 +1455,7 @@ const FilterButton = ({
               handleKeyDown(e);
             },
             appearance: "ghost",
-            size: "small",
+            size: toolbarSize,
             icon: iconOptions,
             "data-id": filter.id,
             "data-anv": "toolbar-button",
@@ -1495,7 +1500,7 @@ const styles$1 = {
 
 const ToolbarControlGroupElement = forwardRef((props, ref) => {
   const { children, "aria-label": ariaLabel, ...rest } = props;
-  const { overflow } = useContext(ToolbarOverflowContext);
+  const { overflow } = useContext(ToolbarContext);
   return /* @__PURE__ */ jsx(
     Flex,
     {
@@ -1526,6 +1531,7 @@ const FilterDrawer = () => {
     hiddenFilters,
     filterGroupRef
   } = useContext(FilterGroupContext);
+  const toolbarSize = useToolbarSize();
   const containerQuery = useContainerQuery(filterGroupRef);
   const showInlineFilters = containerQuery && containerQuery.name !== "xs" && containerQuery.name !== "sm";
   const [draftFilters, setDraftFilters] = useState(filters);
@@ -1848,6 +1854,7 @@ const FilterDrawer = () => {
         onClick: () => setOpen(true),
         className: triggerClasses,
         checked: open,
+        size: toolbarSize,
         children: [
           "Filters",
           hasHiddenActiveFilters && /* @__PURE__ */ jsx(
@@ -1910,6 +1917,7 @@ const FilterGroupElement = forwardRef(
     const [hiddenFilters, setHiddenFilters] = useState([]);
     const filterGroupRef = useRef(null);
     const containerQuery = useContainerQuery(filterGroupRef);
+    const toolbarSize = useToolbarSize();
     const showInlineFilters = containerQuery && containerQuery.name !== "xs" && containerQuery.name !== "sm";
     useEffect(() => {
       setFilters((prevFilters) => {
@@ -2034,7 +2042,7 @@ const FilterGroupElement = forwardRef(
             Button,
             {
               appearance: "ghost",
-              size: "small",
+              size: toolbarSize,
               className: styles$2["filter-button-trigger"],
               icon: {
                 before: SvgClose
@@ -2052,20 +2060,21 @@ FilterGroupElement.displayName = "FilterGroup";
 const FilterGroup = FilterGroupElement;
 
 const styles = {
-	"toolbar-search-field-container": "_toolbar-search-field-container_9jh3s_2",
-	"toolbar-search-field": "_toolbar-search-field_9jh3s_2"
+	"toolbar-search-field-container": "_toolbar-search-field-container_5vts9_2",
+	"toolbar-search-field": "_toolbar-search-field_5vts9_2"
 };
 
 const ToolbarSearchField = forwardRef(
   (props, ref) => {
     const { className, ...rest } = props;
+    const size = useToolbarSize();
     const searchFieldStyles = cx(styles["toolbar-search-field"], className);
     return /* @__PURE__ */ jsx("div", { className: styles["toolbar-search-field-container"], children: /* @__PURE__ */ jsx(
-      SearchField,
+      SearchField$1,
       {
         ref,
         className: searchFieldStyles,
-        size: "small",
+        size,
         "data-anv": "toolbar-search-field",
         ...rest
       }
@@ -2086,6 +2095,7 @@ const ToolbarElement = forwardRef(
       overflow = "wrap",
       onKeyDown,
       additionalItems,
+      size = "xsmall",
       ...rest
     } = componentProps;
     const [overflowItems, setOverflowItems] = useState([]);
@@ -2130,9 +2140,18 @@ const ToolbarElement = forwardRef(
         removeItem,
         toolbarRef,
         orderedIds,
-        overflow
+        overflow,
+        size
       }),
-      [overflowItems, addItem, removeItem, toolbarRef, orderedIds, overflow]
+      [
+        overflowItems,
+        addItem,
+        removeItem,
+        toolbarRef,
+        orderedIds,
+        overflow,
+        size
+      ]
     );
     const styleCombined = {
       ...style,
@@ -2142,7 +2161,7 @@ const ToolbarElement = forwardRef(
     const toolbarContentClassNames = cx(styles$3["toolbar-content"], {
       [styles$3[`overflow-${overflow}`]]: overflow
     });
-    return /* @__PURE__ */ jsx(ToolbarOverflowContext.Provider, { value, children: /* @__PURE__ */ jsxs(
+    return /* @__PURE__ */ jsx(ToolbarContext.Provider, { value, children: /* @__PURE__ */ jsxs(
       Flex,
       {
         direction: direction === "horizontal" ? "row" : "column",
@@ -2195,7 +2214,6 @@ const Toolbar = Object.assign(ToolbarElement, {
    * - Automatic tooltip for icon-only buttons
    * - Overflow menu support
    * - Accessibility enforcement for aria-labels
-   * - Small size optimized for toolbar layout
    * - Ghost and primary appearance options
    * - Automatic tracking ID generation for analytics
    *
@@ -2217,7 +2235,6 @@ const Toolbar = Object.assign(ToolbarElement, {
    * - Consistent styling with other toolbar items
    * - Overflow menu support
    * - Accessibility enforcement for aria-labels
-   * - Small size optimized for toolbar layout
    * - Ghost and primary appearance options
    * - Automatic tracking ID generation for analytics
    *
@@ -2234,7 +2251,6 @@ const Toolbar = Object.assign(ToolbarElement, {
    * - Consistent styling with other toolbar items
    * - Overflow menu support
    * - Accessibility enforcement for aria-labels
-   * - Small size optimized for toolbar layout
    * - Ghost and primary appearance options
    * - Automatic tracking ID generation for analytics
    *
@@ -2252,7 +2268,6 @@ const Toolbar = Object.assign(ToolbarElement, {
    * - Controlled and uncontrolled usage patterns
    * - Automatic overflow menu integration
    * - Accessibility support with proper ARIA labels
-   * - Small size optimized for toolbar layout
    * - Ghost and primary appearance options
    * - Dropdown arrow icon indicator
    * - Listbox integration for keyboard navigation
@@ -2308,11 +2323,10 @@ const Toolbar = Object.assign(ToolbarElement, {
    */
   ControlGroup: ToolbarControlGroup,
   /**
-   * ToolbarSearchField component renders a small-sized search field for use in toolbars.
+   * ToolbarSearchField component renders a search field for use in toolbars.
    *
    * Features:
    * - Renders a search field styled for toolbar usage
-   * - Always uses small size for compact layout
    * - Supports all SearchField props except size
    * - Integrates with toolbar layouts and accessibility
    *
@@ -2323,4 +2337,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-CVOenuCF.js.map
+//# sourceMappingURL=Toolbar-jfZ-CupZ.js.map