@servicetitan/anvil2 3.2.0 → 3.3.0

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @servicetitan/anvil2
 
+## 3.3.0
+
+### Minor Changes
+
+- [#2428](https://github.com/servicetitan/hammer/pull/2428) [`9eb595b`](https://github.com/servicetitan/hammer/commit/9eb595be23bd648c339b58a331f3b60d4a0d7f15) Thanks [@w-a-t-s-o-n](https://github.com/w-a-t-s-o-n)! - [Combobox] Deprecate in favor of SelectField and MultiSelectField
+
+- [#2423](https://github.com/servicetitan/hammer/pull/2423) [`e536233`](https://github.com/servicetitan/hammer/commit/e53623374fc9300964e1c758d48a7bf4d1d5f5fa) Thanks [@w-a-t-s-o-n](https://github.com/w-a-t-s-o-n)! - [AnvilProvider] Add `cssUtils` prop to automatically load CSS utility stylesheets
+
+- [#2428](https://github.com/servicetitan/hammer/pull/2428) [`9eb595b`](https://github.com/servicetitan/hammer/commit/9eb595be23bd648c339b58a331f3b60d4a0d7f15) Thanks [@w-a-t-s-o-n](https://github.com/w-a-t-s-o-n)! - [MultiSelectField, MultiSelectMenu, SelectField, SelectMenu] Promote select components from beta to the stable package export; retain deprecated beta re-exports until Anvil2 4.0
+
+### Patch Changes
+
+- [#2435](https://github.com/servicetitan/hammer/pull/2435) [`e975960`](https://github.com/servicetitan/hammer/commit/e975960082858a46e7a49d01c4bb9628cb39ddb7) Thanks [@cursor](https://github.com/apps/cursor)! - [Combobox] Hide dropdown caret when `disablePopover` is `true`
+
+- [#2419](https://github.com/servicetitan/hammer/pull/2419) [`daaa703`](https://github.com/servicetitan/hammer/commit/daaa703508f434218151b09ec3e09c99e7f7ba2d) Thanks [@cursor](https://github.com/apps/cursor)! - **BETA** [DataTable] Fix header, footer, and pagination z-index leaking outside the table container
+
 ## 3.2.0
 
 ### Minor Changes

package/dist/{AnvilProvider-Cw_zTBqJ.js → AnvilProvider-CwAHiQ_0.js}

@@ -14,12 +14,34 @@ import './AnvilProvider.css';const AnvilProviderContext = createContext(
 const TooltipLegacyGroupContext = createContext(null);
 
 let bodyScopeRefcount = 0;
+const loadCssUtils = (cssUtils) => {
+  if (cssUtils === true) {
+    return Promise.resolve({             });
+  } else if (typeof cssUtils === "object") {
+    const imports = [];
+    if (cssUtils.spacing) {
+      imports.push(Promise.resolve({               }));
+    }
+    if (cssUtils.color) {
+      imports.push(Promise.resolve({             }));
+    }
+    if (cssUtils.border) {
+      imports.push(Promise.resolve({              }));
+    }
+    if (cssUtils.font) {
+      imports.push(Promise.resolve({            }));
+    }
+    return Promise.all(imports);
+  }
+  return Promise.resolve();
+};
 const AnvilProvider = (props) => {
   const { layoutStyles, componentProps } = useLayoutPropsUtil(props);
   const {
     themeData,
     localizationData,
     trackingIdData,
+    cssUtils,
     children,
     className,
     style,
@@ -31,6 +53,12 @@ const AnvilProvider = (props) => {
     translations = {}
   } = localizationData ?? {};
   const { scope = "ST", optOut } = trackingIdData ?? {};
+  useEffect(() => {
+    if (cssUtils) {
+      loadCssUtils(cssUtils).catch(() => {
+      });
+    }
+  }, [cssUtils]);
   const classNameCombined = cx(
     className,
     "anvil2",
@@ -84,4 +112,4 @@ const AnvilProvider = (props) => {
 };
 
 export { AnvilProvider as A, AnvilProviderContext as a };
-//# sourceMappingURL=AnvilProvider-Cw_zTBqJ.js.map
+//# sourceMappingURL=AnvilProvider-CwAHiQ_0.js.map

package/dist/AnvilProvider-CwAHiQ_0.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AnvilProvider-CwAHiQ_0.js","sources":["../src/providers/AnvilProvider/AnvilProviderContext.tsx","../src/providers/AnvilProvider/AnvilProvider.tsx"],"sourcesContent":["import { ThemeProviderProps } from \"../ThemeProvider\";\nimport {\n  ComponentPropsWithoutRef,\n  Dispatch,\n  ReactNode,\n  SetStateAction,\n  createContext,\n  useContext,\n} from \"react\";\nimport { LayoutUtilProps } from \"../../types\";\nimport { ITranslations } from \"../LocalizationProvider/LocalizationProvider\";\nimport { type BreakpointReturnProps } from \"../../hooks/useBreakpoint\";\n\nexport type CssUtilsOptions =\n  | boolean\n  | {\n      spacing?: boolean;\n      color?: boolean;\n      border?: boolean;\n      font?: boolean;\n    };\n\nexport type AnvilProviderProps = ComponentPropsWithoutRef<\"div\"> &\n  LayoutUtilProps & {\n    children?: ReactNode;\n\n    themeData?: {\n      theme?: ThemeProviderProps[\"theme\"];\n      mode?: ThemeProviderProps[\"mode\"];\n    };\n\n    localizationData?: {\n      locale?: ITranslations[\"locale\"];\n      dir?: ITranslations[\"dir\"];\n      translations?: ITranslations[\"translations\"];\n    };\n\n    cssUtils?: CssUtilsOptions;\n  } & {\n    trackingIdData?: {\n      scope?: string;\n      optOut?: boolean;\n    };\n  };\n\nexport type AnvilProviderContextProps = {\n  breakpoint?: BreakpointReturnProps;\n};\n\nexport const AnvilProviderContext = createContext<AnvilProviderContextProps>(\n  {},\n);\n\nexport const TooltipLegacyGroupContext = createContext<{\n  disableDelayGroup: Dispatch<SetStateAction<boolean>>;\n} | null>(null);\n\nexport const useTooltipLegacyGroup = () => {\n  const context = useContext(TooltipLegacyGroupContext);\n\n  if (context == null) {\n    throw new Error(\n      \"Tooltip components must be wrapped in <AnvilProvider /> or <TooltipGroupContext.Provider />\",\n    );\n  }\n\n  return context;\n};\n","import \"@servicetitan/anvil-fonts/dist/css/anvil-fonts.css\";\nimport { ThemeProvider } from \"../ThemeProvider\";\nimport themeStyles from \"../ThemeProvider/ThemeProvider.module.scss\";\nimport { useEffect, useMemo, useState } from \"react\";\nimport cx from \"classnames\";\nimport { useLayoutPropsUtil } from \"../../internal/hooks\";\nimport { useBreakpoint } from \"../../hooks/useBreakpoint\";\nimport { useTranslations } from \"../LocalizationProvider/useTranslations\";\nimport { LocalizationContext } from \"../LocalizationProvider\";\nimport TrackingProvider from \"../TrackingProvider\";\nimport {\n  AnvilProviderContext,\n  AnvilProviderProps,\n  TooltipLegacyGroupContext,\n  CssUtilsOptions,\n} from \"./AnvilProviderContext\";\n\n// Refcount of mounted AnvilProviders. Coordinates the body class so the last\n// unmount removes it, but a remount (e.g. story switch, hot reload) keeps it.\nlet bodyScopeRefcount = 0;\n\nconst loadCssUtils = (cssUtils: CssUtilsOptions): Promise<unknown> => {\n  if (cssUtils === true) {\n    return import(\"../../../public/assets/css-utils/a2-utils.css\");\n  } else if (typeof cssUtils === \"object\") {\n    const imports: Promise<unknown>[] = [];\n    if (cssUtils.spacing) {\n      imports.push(import(\"../../../public/assets/css-utils/a2-spacing.css\"));\n    }\n    if (cssUtils.color) {\n      imports.push(import(\"../../../public/assets/css-utils/a2-color.css\"));\n    }\n    if (cssUtils.border) {\n      imports.push(import(\"../../../public/assets/css-utils/a2-border.css\"));\n    }\n    if (cssUtils.font) {\n      imports.push(import(\"../../../public/assets/css-utils/a2-font.css\"));\n    }\n    return Promise.all(imports);\n  }\n  return Promise.resolve();\n};\n\nexport const AnvilProvider = (props: AnvilProviderProps) => {\n  const { layoutStyles, componentProps } = useLayoutPropsUtil(props);\n\n  const {\n    themeData,\n    localizationData,\n    trackingIdData,\n    cssUtils,\n    children,\n    className,\n    style,\n    ...rest\n  } = componentProps;\n\n  const {\n    locale = \"en\",\n    dir = \"ltr\",\n    translations = {},\n  } = localizationData ?? {};\n\n  const { scope = \"ST\", optOut } = trackingIdData ?? {};\n\n  // Load CSS utilities if requested\n  useEffect(() => {\n    if (cssUtils) {\n      loadCssUtils(cssUtils).catch(() => {\n        // Stylesheet load failures are non-fatal; silently ignore so the app\n        // continues to function without utility classes.\n      });\n    }\n  }, [cssUtils]);\n\n  const classNameCombined = cx(\n    className,\n    \"anvil2\",\n    [themeStyles[\"theme-core\"]],\n    {\n      [themeStyles[\"mode-dark\"]]: themeData?.mode === \"dark\",\n      [themeStyles[\"mode-light\"]]: themeData?.mode === \"light\",\n    },\n  );\n  const styleCombined = {\n    ...style,\n    ...layoutStyles,\n  };\n\n  const breakpoint = useBreakpoint();\n\n  // Anvil1 takeover components (Modal/Dialog/Drawer) `createPortal` their\n  // children into `document.body`, escaping AnvilProvider's `.anvil2` scope and\n  // leaving descendant Anvil2 components without matching selectors. Mirroring\n  // the class onto body lets those selectors match for portaled content while\n  // leaving theme variables and typography resets on the local element.\n  useEffect(() => {\n    bodyScopeRefcount += 1;\n    document.body.classList.add(\"anvil2\");\n    return () => {\n      bodyScopeRefcount = Math.max(0, bodyScopeRefcount - 1);\n      if (bodyScopeRefcount === 0) {\n        document.body.classList.remove(\"anvil2\");\n      }\n    };\n  }, []);\n\n  const [disableDelayGroup, setDisableDelayGroup] = useState(false);\n\n  const { translations: t } = useTranslations(translations);\n\n  const localizationContextValue = useMemo(() => ({ locale, t }), [locale, t]);\n  const tooltipLegacyGroupContextValue = useMemo(\n    () => ({ disableDelayGroup: setDisableDelayGroup }),\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    [disableDelayGroup],\n  );\n\n  return (\n    <AnvilProviderContext.Provider value={{ breakpoint }}>\n      <ThemeProvider\n        className={classNameCombined}\n        style={styleCombined}\n        theme={themeData?.theme}\n        mode={themeData?.mode}\n        dir={dir}\n        {...rest}\n      >\n        <TooltipLegacyGroupContext.Provider\n          value={tooltipLegacyGroupContextValue}\n        >\n          <LocalizationContext.Provider value={localizationContextValue}>\n            <TrackingProvider scope={scope} optOut={optOut}>\n              {children}\n            </TrackingProvider>\n          </LocalizationContext.Provider>\n        </TooltipLegacyGroupContext.Provider>\n      </ThemeProvider>\n    </AnvilProviderContext.Provider>\n  );\n};\n"],"names":[],"mappings":"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"}

package/dist/AnvilProvider.js

@@ -1,2 +1,2 @@
-export { A as AnvilProvider, a as AnvilProviderContext, A as default } from './AnvilProvider-Cw_zTBqJ.js';
+export { A as AnvilProvider, a as AnvilProviderContext, A as default } from './AnvilProvider-CwAHiQ_0.js';
 //# sourceMappingURL=AnvilProvider.js.map

package/dist/Combobox.js

@@ -1,2 +1,2 @@
-export { C as Combobox, a as ComboboxElement, c as ComboboxList, b as ComboboxSelect, C as default, u as useInfiniteCombobox } from './useInfiniteCombobox-D6FRVziM.js';
+export { C as Combobox, a as ComboboxElement, c as ComboboxList, b as ComboboxSelect, C as default, u as useInfiniteCombobox } from './useInfiniteCombobox-D77w-hHb.js';
 //# sourceMappingURL=Combobox.js.map

package/dist/{DataTable-D_ZP3kZw.js → DataTable-CnRkAUpI.js}

@@ -8987,12 +8987,13 @@ const DataTableCursorPagination = ({
   );
 };
 
-const expanded = "_expanded_1pd1e_27";
+const expanded = "_expanded_1elu6_34";
 const styles = {
-	"container-with-pagination": "_container-with-pagination_1pd1e_4",
-	"footer-with-pagination": "_footer-with-pagination_1pd1e_8",
-	"empty-state-container": "_empty-state-container_1pd1e_12",
-	"expand-button": "_expand-button_1pd1e_17",
+	"data-table-container": "_data-table-container_1elu6_4",
+	"container-with-pagination": "_container-with-pagination_1elu6_11",
+	"footer-with-pagination": "_footer-with-pagination_1elu6_15",
+	"empty-state-container": "_empty-state-container_1elu6_19",
+	"expand-button": "_expand-button_1elu6_24",
 	expanded: expanded
 };
 
@@ -9905,7 +9906,7 @@ function DataTableInner(props, ref) {
   const columnCount = useMemo(() => {
     return headers.filter((header) => header.subHeaders?.length === 0).length;
   }, [headers]);
-  const containerClassName = cx(className, {
+  const containerClassName = cx(styles["data-table-container"], className, {
     [styles["container-with-pagination"]]: pagination && !isTrulyEmpty
   });
   return /* @__PURE__ */ jsx(
@@ -10054,4 +10055,4 @@ function DataTableInner(props, ref) {
 const DataTable = forwardRef(DataTableInner);
 
 export { COLUMN_TYPE_DEFAULTS as C, DataTable as D, chipsFormatter as a, booleanFormatter as b, createColumnHelper$1 as c, currencyFormatter as d, dateFormatter as e, dateTimeFormatter as f, getColumnTypeDefaults as g, htmlFormatter as h, dateFormatPresets as i, timeFormatter as j, markdownFormatter as m, numberFormatter as n, percentFormatter as p, resolveColumnTypeConfig as r, timeFormatPresets as t, yearlessDateFormatter as y };
-//# sourceMappingURL=DataTable-D_ZP3kZw.js.map
+//# sourceMappingURL=DataTable-CnRkAUpI.js.map