@jobber/components 9.5.2 → 9.5.3

package/dist/DrawerDescription-es.js

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { u as useDialogRootContext, h as useDialogPortalContext, i as DialogStore } from './ScrollAreaViewport-es.js';
+import { u as useDialogRootContext, l as useDialogPortalContext, m as DialogStore } from './ScrollAreaViewport-es.js';
 import { u as useRenderElement } from './useRenderElement-es.js';
 import { p as popupStateMapping, t as transitionStatusMapping, u as useBaseUiId, C as CommonPopupDataAttributes, f as useOpenChangeComplete, h as createDefaultInitialFocus, F as FOCUSABLE_POPUP_PROPS, i as FloatingFocusManager, d as createChangeEventDetails, j as imperativeAction } from './useScrollLock-es.js';
 import { C as COMPOSITE_KEYS } from './scrollEdges-es.js';

package/dist/Menu-cjs.js

@@ -90,7 +90,7 @@ function MenuLegacy({ activator, items, UNSAFE_className, UNSAFE_style, }) {
         [styles$2.fullWidth]: fullWidth,
     });
     jobberHooks.useRefocusOnActivator(visible);
-    const isLargeScreen = width >= SMALL_SCREEN_BREAKPOINT;
+    const isLargeScreen = width !== undefined && width >= SMALL_SCREEN_BREAKPOINT;
     const middleware = React.useMemo(() => {
         if (isLargeScreen) {
             return [
@@ -905,8 +905,7 @@ function useMenuShell() {
     return isMobile ? MenuBottomSheet : MenuDropdown;
 }
 function MenuComposableRoot(props) {
-    const { width } = jobberHooks.useWindowDimensions();
-    const isMobile = width !== undefined && width <= SMALL_SCREEN_BREAKPOINT;
+    const isMobile = jobberHooks.useIsSmallScreen();
     const RootComponent = isMobile ? MenuBottomSheet : MenuDropdown;
     return (React.createElement(MenuContext.Provider, { value: { isMobile } },
         React.createElement(RootComponent, { onOpenChange: props.onOpenChange, open: props.open, defaultOpen: props.defaultOpen }, props.children)));

package/dist/Menu-es.js

@@ -1,5 +1,5 @@
 import React__default, { useState, useRef, useId, useMemo } from 'react';
-import { useWindowDimensions, useRefocusOnActivator } from '@jobber/hooks';
+import { useWindowDimensions, useRefocusOnActivator, useIsSmallScreen } from '@jobber/hooks';
 import classnames from 'classnames';
 import { AnimatePresence, motion } from 'framer-motion';
 import { u as useFloating, c as useDismiss, g as useListNavigation, d as useInteractions, F as FloatingPortal } from './floating-ui.react-es.js';
@@ -88,7 +88,7 @@ function MenuLegacy({ activator, items, UNSAFE_className, UNSAFE_style, }) {
         [styles$2.fullWidth]: fullWidth,
     });
     useRefocusOnActivator(visible);
-    const isLargeScreen = width >= SMALL_SCREEN_BREAKPOINT;
+    const isLargeScreen = width !== undefined && width >= SMALL_SCREEN_BREAKPOINT;
     const middleware = useMemo(() => {
         if (isLargeScreen) {
             return [
@@ -903,8 +903,7 @@ function useMenuShell() {
     return isMobile ? MenuBottomSheet : MenuDropdown;
 }
 function MenuComposableRoot(props) {
-    const { width } = useWindowDimensions();
-    const isMobile = width !== undefined && width <= SMALL_SCREEN_BREAKPOINT;
+    const isMobile = useIsSmallScreen();
     const RootComponent = isMobile ? MenuBottomSheet : MenuDropdown;
     return (React__default.createElement(MenuContext.Provider, { value: { isMobile } },
         React__default.createElement(RootComponent, { onOpenChange: props.onOpenChange, open: props.open, defaultOpen: props.defaultOpen }, props.children)));

package/dist/ScrollAreaViewport-es.js

@@ -4303,4 +4303,4 @@ function mergeHiddenState(prevState, nextState) {
   return nextState;
 }
 
-export { getElementAtPoint as A, findScrollableTouchTarget as B, useScrollAreaRootContext as C, DrawerTrigger as D, getOffset as E, ScrollAreaRootCssVars as F, scrollAreaStateAttributesMapping as G, useScrollAreaViewportContext as H, ScrollAreaRoot as S, DrawerRoot as a, DrawerPortal as b, DrawerBackdrop as c, DrawerViewport as d, DrawerPopup as e, ScrollAreaViewport as f, DrawerContent as g, useDialogPortalContext as h, DialogStore as i, DialogRoot as j, DialogTrigger as k, DialogPortal as l, DialogViewport as m, createInitialPopupStoreState as n, useDrawerProviderContext as o, popupStoreSelectors as p, DrawerBackdropCssVars as q, DrawerPopupCssVars as r, DrawerProviderContext as s, useDrawerRootContext as t, useDialogRootContext as u, useSwipeDismiss as v, getDisplacement as w, DrawerPopupDataAttributes as x, getElementTransform as y, DrawerVirtualKeyboardContext as z };
+export { getElementAtPoint as A, findScrollableTouchTarget as B, useScrollAreaRootContext as C, DrawerTrigger as D, getOffset as E, ScrollAreaRootCssVars as F, scrollAreaStateAttributesMapping as G, useScrollAreaViewportContext as H, ScrollAreaRoot as S, DrawerRoot as a, DrawerPortal as b, DrawerBackdrop as c, DrawerViewport as d, DrawerPopup as e, ScrollAreaViewport as f, DrawerContent as g, DialogRoot as h, DialogTrigger as i, DialogPortal as j, DialogViewport as k, useDialogPortalContext as l, DialogStore as m, createInitialPopupStoreState as n, useDrawerProviderContext as o, popupStoreSelectors as p, DrawerBackdropCssVars as q, DrawerPopupCssVars as r, DrawerProviderContext as s, useDrawerRootContext as t, useDialogRootContext as u, useSwipeDismiss as v, getDisplacement as w, DrawerPopupDataAttributes as x, getElementTransform as y, DrawerVirtualKeyboardContext as z };

package/dist/Select-cjs.js

@@ -140,7 +140,6 @@ function SelectDropdownRoot({ value, onValueChange, onBlur, onFocus, disabled, r
                     React.createElement(SelectPrimitive.SelectPrimitive.List, null, children))))));
 }
 
-const SMALL_SCREEN_BREAKPOINT = jobberHooks.BREAKPOINT_SIZES.sm;
 const SelectShellContext = React.createContext(null);
 function useSelectShell() {
     const shell = React.useContext(SelectShellContext);
@@ -180,8 +179,7 @@ function Select({ label, description, error, invalid, value, onValueChange, onBl
     const isInvalid = hasError || Boolean(invalid);
     const showDescription = !inline && Boolean(description) && !hasError;
     const showError = !inline && hasError;
-    const { width } = jobberHooks.useWindowDimensions();
-    const isBottomSheet = width !== undefined && width <= SMALL_SCREEN_BREAKPOINT;
+    const isBottomSheet = jobberHooks.useIsSmallScreen();
     const shell = isBottomSheet ? selectBottomSheetShell : selectDropdownShell;
     const ShellRoot = isBottomSheet ? SelectBottomSheetRoot : SelectDropdownRoot;
     return (React.createElement(FieldDescription.FieldRoot, { className: classnames(styles.field, inline && styles.inline, size && styles[size], label && styles.hasLabel), disabled: disabled, invalid: isInvalid || undefined, name: name },

package/dist/Select-es.js

@@ -1,5 +1,5 @@
 import React__default, { useState, useRef, useId, useImperativeHandle } from 'react';
-import { BREAKPOINT_SIZES, useWindowDimensions } from '@jobber/hooks';
+import { useIsSmallScreen } from '@jobber/hooks';
 import classnames from 'classnames';
 import { S as SelectPrimitive } from './SelectPrimitive-es.js';
 import { a as BottomSheet } from './BottomSheet-es.js';
@@ -138,7 +138,6 @@ function SelectDropdownRoot({ value, onValueChange, onBlur, onFocus, disabled, r
                     React__default.createElement(SelectPrimitive.List, null, children))))));
 }
 
-const SMALL_SCREEN_BREAKPOINT = BREAKPOINT_SIZES.sm;
 const SelectShellContext = React__default.createContext(null);
 function useSelectShell() {
     const shell = React__default.useContext(SelectShellContext);
@@ -178,8 +177,7 @@ function Select({ label, description, error, invalid, value, onValueChange, onBl
     const isInvalid = hasError || Boolean(invalid);
     const showDescription = !inline && Boolean(description) && !hasError;
     const showError = !inline && hasError;
-    const { width } = useWindowDimensions();
-    const isBottomSheet = width !== undefined && width <= SMALL_SCREEN_BREAKPOINT;
+    const isBottomSheet = useIsSmallScreen();
     const shell = isBottomSheet ? selectBottomSheetShell : selectDropdownShell;
     const ShellRoot = isBottomSheet ? SelectBottomSheetRoot : SelectDropdownRoot;
     return (React__default.createElement(FieldRoot, { className: classnames(styles.field, inline && styles.inline, size && styles[size], label && styles.hasLabel), disabled: disabled, invalid: isInvalid || undefined, name: name },

package/dist/dialogReturnFocus-cjs.js

@@ -17,11 +17,6 @@ var DrawerTitle = require('./DrawerTitle-cjs.js');
 var DrawerDescription = require('./DrawerDescription-cjs.js');
 var nestedEscape = require('./nestedEscape-cjs.js');
 
-// Copied from Menu's constant so the two surfaces agree on what "mobile" means.
-// (The proposal calls for copying shared Menu values into the component first
-// and deciding later whether to promote them to a shared location.)
-const SMALL_SCREEN_BREAKPOINT = 490;
-
 var styles = {"small":"uYYyCR3l6E8-","base":"X1jGz-sLWf4-","large":"_4zFf2PkFhaA-","fullScreen":"nJoCr8oWJ7w-","header":"XFKiCQ8QbQU-","close":"FDOhnO0TT08-","scrollRegion":"_8DjYA23vHXA-","scrollViewport":"Bwr9IUYpLfM-","body":"zp9kx9uue2I-","fullBleed":"EhtwBTy1ai4-","footer":"DRIJhI1knKw-","sheetSurface":"vmcZRwOcNMo-","popup":"mFX7qDCd17I-","backdrop":"NE-BIsVE-hE-","viewport":"hp70o-3Cf-w-","spinning":"Zf-Z8DJcC-Y-"};
 
 var actionsStyles = {"actions":"hKVNddbxkmo-","leftActions":"nslrozOH-v4-","buttonGroup":"BrXAnQBttWE-","align-left":"_9Vgd-3YJxlI-","align-right":"_8HC9NqvmJdo-","align-fullWidth":"ZZ3XuxGv6ow-","spinning":"PWf7wHPhd2A-"};
@@ -323,8 +318,7 @@ function Dialog(_a) {
         }
         onOpenChange === null || onOpenChange === void 0 ? void 0 : onOpenChange(nextOpen, eventDetails);
     }
-    const { width } = jobberHooks.useWindowDimensions();
-    const isMobile = width !== undefined && width <= SMALL_SCREEN_BREAKPOINT;
+    const isMobile = jobberHooks.useIsSmallScreen();
     // The shell is the root component; its parts are reached via `useDialogShell`
     // in each part below (the Menu pattern).
     const RootComponent = isMobile ? DialogBottomSheet : DialogModal;

package/dist/dialogReturnFocus-es.js

@@ -1,10 +1,10 @@
 import { _ as __rest } from './tslib.es6-es.js';
 import React__default, { isValidElement } from 'react';
-import { useWindowDimensions } from '@jobber/hooks';
+import { useIsSmallScreen } from '@jobber/hooks';
 import classnames from 'classnames';
 import { n as normalizeBaseUiButtonProps, i as isAtlantisButtonRenderTarget, s as stripNativeTypeFromButtonRenderTarget, r as renderAtlantisButtonTarget } from './buttonRenderAdapter-es.js';
 import { B as Button } from './Button-es.js';
-import { S as ScrollAreaRoot, f as ScrollAreaViewport, g as DrawerContent, j as DialogRoot, k as DialogTrigger$1, l as DialogPortal, m as DialogViewport } from './ScrollAreaViewport-es.js';
+import { S as ScrollAreaRoot, f as ScrollAreaViewport, g as DrawerContent, h as DialogRoot, i as DialogTrigger$1, j as DialogPortal, k as DialogViewport } from './ScrollAreaViewport-es.js';
 import { m as mergeProps } from './useRenderElement-es.js';
 import './OverlaySeparator-es.js';
 import { a as BottomSheet, B as BottomSheetScrollAreaContext } from './BottomSheet-es.js';
@@ -15,11 +15,6 @@ import { D as DrawerTitle, a as DrawerClose, b as DialogTitle$1, c as DialogClos
 import { D as DrawerDescription, a as DialogBackdrop, b as DialogPopup, c as DialogDescription, d as createDialogHandle } from './DrawerDescription-es.js';
 import { i as isEscapeHandledByModal } from './nestedEscape-es.js';
 
-// Copied from Menu's constant so the two surfaces agree on what "mobile" means.
-// (The proposal calls for copying shared Menu values into the component first
-// and deciding later whether to promote them to a shared location.)
-const SMALL_SCREEN_BREAKPOINT = 490;
-
 var styles = {"small":"uYYyCR3l6E8-","base":"X1jGz-sLWf4-","large":"_4zFf2PkFhaA-","fullScreen":"nJoCr8oWJ7w-","header":"XFKiCQ8QbQU-","close":"FDOhnO0TT08-","scrollRegion":"_8DjYA23vHXA-","scrollViewport":"Bwr9IUYpLfM-","body":"zp9kx9uue2I-","fullBleed":"EhtwBTy1ai4-","footer":"DRIJhI1knKw-","sheetSurface":"vmcZRwOcNMo-","popup":"mFX7qDCd17I-","backdrop":"NE-BIsVE-hE-","viewport":"hp70o-3Cf-w-","spinning":"Zf-Z8DJcC-Y-"};
 
 var actionsStyles = {"actions":"hKVNddbxkmo-","leftActions":"nslrozOH-v4-","buttonGroup":"BrXAnQBttWE-","align-left":"_9Vgd-3YJxlI-","align-right":"_8HC9NqvmJdo-","align-fullWidth":"ZZ3XuxGv6ow-","spinning":"PWf7wHPhd2A-"};
@@ -321,8 +316,7 @@ function Dialog(_a) {
         }
         onOpenChange === null || onOpenChange === void 0 ? void 0 : onOpenChange(nextOpen, eventDetails);
     }
-    const { width } = useWindowDimensions();
-    const isMobile = width !== undefined && width <= SMALL_SCREEN_BREAKPOINT;
+    const isMobile = useIsSmallScreen();
     // The shell is the root component; its parts are reached via `useDialogShell`
     // in each part below (the Menu pattern).
     const RootComponent = isMobile ? DialogBottomSheet : DialogModal;

package/dist/unstyledPrimitives/index.mjs

@@ -6,7 +6,7 @@ import { bn as pointer, a as useIsoLayoutEffect, b as useStableCallback, C as Co
 import { S as Separator } from '../Separator-es.js';
 import { a as DialogBackdrop, c as DialogDescription, e as DialogHandle, b as DialogPopup, d as createDialogHandle, D as DrawerDescription } from '../DrawerDescription-es.js';
 import { c as DialogClose, b as DialogTitle, a as DrawerClose, D as DrawerTitle } from '../DrawerTitle-es.js';
-import { l as DialogPortal, j as DialogRoot, k as DialogTrigger, m as DialogViewport, o as useDrawerProviderContext, q as DrawerBackdropCssVars, r as DrawerPopupCssVars, s as DrawerProviderContext, u as useDialogRootContext, t as useDrawerRootContext, v as useSwipeDismiss, w as getDisplacement, x as DrawerPopupDataAttributes, y as getElementTransform, z as DrawerVirtualKeyboardContext, A as getElementAtPoint, B as findScrollableTouchTarget, c as DrawerBackdrop, g as DrawerContent, e as DrawerPopup, b as DrawerPortal, a as DrawerRoot, D as DrawerTrigger, d as DrawerViewport, C as useScrollAreaRootContext, E as getOffset, F as ScrollAreaRootCssVars, G as scrollAreaStateAttributesMapping, H as useScrollAreaViewportContext, S as ScrollAreaRoot, f as ScrollAreaViewport } from '../ScrollAreaViewport-es.js';
+import { j as DialogPortal, h as DialogRoot, i as DialogTrigger, k as DialogViewport, o as useDrawerProviderContext, q as DrawerBackdropCssVars, r as DrawerPopupCssVars, s as DrawerProviderContext, u as useDialogRootContext, t as useDrawerRootContext, v as useSwipeDismiss, w as getDisplacement, x as DrawerPopupDataAttributes, y as getElementTransform, z as DrawerVirtualKeyboardContext, A as getElementAtPoint, B as findScrollableTouchTarget, c as DrawerBackdrop, g as DrawerContent, e as DrawerPopup, b as DrawerPortal, a as DrawerRoot, D as DrawerTrigger, d as DrawerViewport, C as useScrollAreaRootContext, E as getOffset, F as ScrollAreaRootCssVars, G as scrollAreaStateAttributesMapping, H as useScrollAreaViewportContext, S as ScrollAreaRoot, f as ScrollAreaViewport } from '../ScrollAreaViewport-es.js';
 import { u as useRenderElement, f as formatErrorMessage, N as NOOP, E as EMPTY_OBJECT } from '../useRenderElement-es.js';
 import { K as getWindow, h as getComputedStyle, i as isHTMLElement, e as getParentNode, G as round } from '../floating-ui.utils-es.js';
 import { c as clamp, g as getMaxScrollOffset, n as normalizeScrollOffset, S as SCROLL_EDGE_TOLERANCE_PX } from '../scrollEdges-es.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jobber/components",
-  "version": "9.5.2",
+  "version": "9.5.3",
   "license": "MIT",
   "type": "module",
   "main": "dist/index.cjs",
@@ -491,7 +491,7 @@
     "@apollo/client": "^3.7.10",
     "@csstools/postcss-global-data": "^1.0.3",
     "@jobber/design": "0.111.0",
-    "@jobber/hooks": "2.21.0",
+    "@jobber/hooks": "2.21.1",
     "@rollup/plugin-alias": "^5.1.0",
     "@rollup/plugin-commonjs": "^25.0.7",
     "@rollup/plugin-node-resolve": "15.2.3",
@@ -544,5 +544,5 @@
     "> 1%",
     "IE 10"
   ],
-  "gitHead": "27628e1a709dd4ef497aaa1eb66b51dfd234bb46"
+  "gitHead": "2557e3892ae9903c706aebba90ff44bbb349618c"
 }

package/dist/Dialog/constants.d.ts

@@ -1 +0,0 @@
-export declare const SMALL_SCREEN_BREAKPOINT = 490;