@jobber/components 8.23.0 → 8.23.1

package/dist/DrawerDescription-es.js

@@ -1,9 +1,9 @@
 import * as React from 'react';
 import { u as useDialogRootContext, j as useDialogPortalContext, k as DialogStore } from './ScrollAreaViewport-es.js';
 import { u as useRenderElement } from './useRenderElement-es.js';
-import { p as popupStateMapping, C as CommonPopupDataAttributes, F as FloatingFocusManager } from './InternalBackdrop-es.js';
+import { p as popupStateMapping, C as CommonPopupDataAttributes, c as createDefaultInitialFocus, F as FOCUSABLE_POPUP_PROPS, a as FloatingFocusManager } from './useScrollLock-es.js';
 import { t as transitionStatusMapping, u as useBaseUiId, f as useOpenChangeComplete, d as createChangeEventDetails, i as imperativeAction } from './useButton-es.js';
-import { C as COMPOSITE_KEYS } from './CSPContext-es.js';
+import { C as COMPOSITE_KEYS } from './scrollEdges-es.js';
 import { jsx } from 'react/jsx-runtime';
 
 const stateAttributesMapping$2 = {
@@ -21,6 +21,7 @@ const DialogBackdrop = /*#__PURE__*/React.forwardRef(function DialogBackdrop(com
   const {
     render,
     className,
+    style,
     forceRender = false,
     ...elementProps
   } = componentProps;
@@ -62,6 +63,7 @@ const DialogDescription = /*#__PURE__*/React.forwardRef(function DialogDescripti
   const {
     render,
     className,
+    style,
     id: idProp,
     ...elementProps
   } = componentProps;
@@ -134,10 +136,11 @@ const stateAttributesMapping$1 = {
  */
 const DialogPopup = /*#__PURE__*/React.forwardRef(function DialogPopup(componentProps, forwardedRef) {
   const {
+    render,
     className,
+    style,
     finalFocus,
     initialFocus,
-    render,
     ...elementProps
   } = componentProps;
   const {
@@ -156,6 +159,8 @@ const DialogPopup = /*#__PURE__*/React.forwardRef(function DialogPopup(component
   const titleElementId = store.useState('titleElementId');
   const transitionStatus = store.useState('transitionStatus');
   const role = store.useState('role');
+  const floatingId = floatingRootContext.useState('floatingId');
+  const popupId = elementProps.id ?? floatingId;
   useDialogPortalContext();
   useOpenChangeComplete({
     open,
@@ -166,18 +171,9 @@ const DialogPopup = /*#__PURE__*/React.forwardRef(function DialogPopup(component
       }
     }
   });
-
-  // Default initial focus logic:
-  // If opened by touch, focus the popup element to prevent the virtual keyboard from opening
-  // (this is required for Android specifically as iOS handles this automatically).
-  function defaultInitialFocus(interactionType) {
-    if (interactionType === 'touch') {
-      return store.context.popupRef.current;
-    }
-    return true;
-  }
-  const resolvedInitialFocus = initialFocus === undefined ? defaultInitialFocus : initialFocus;
+  const resolvedInitialFocus = initialFocus === undefined ? createDefaultInitialFocus(store.context.popupRef) : initialFocus;
   const nestedDialogOpen = nestedOpenDialogCount > 0;
+  const setPopupElement = store.useStateSetter('popupElement');
   const state = {
     open,
     nested,
@@ -187,10 +183,11 @@ const DialogPopup = /*#__PURE__*/React.forwardRef(function DialogPopup(component
   const element = useRenderElement('div', componentProps, {
     state,
     props: [rootPopupProps, {
+      id: popupId,
       'aria-labelledby': titleElementId ?? undefined,
       'aria-describedby': descriptionElementId ?? undefined,
       role,
-      tabIndex: -1,
+      ...FOCUSABLE_POPUP_PROPS,
       hidden: !mounted,
       onKeyDown(event) {
         if (COMPOSITE_KEYS.has(event.key)) {
@@ -201,7 +198,7 @@ const DialogPopup = /*#__PURE__*/React.forwardRef(function DialogPopup(component
         [DialogPopupCssVars.nestedDialogs]: nestedOpenDialogCount
       }
     }, elementProps],
-    ref: [forwardedRef, store.context.popupRef, store.useStateSetter('popupElement')],
+    ref: [forwardedRef, store.context.popupRef, setPopupElement],
     stateAttributesMapping: stateAttributesMapping$1
   });
   return /*#__PURE__*/jsx(FloatingFocusManager, {
@@ -269,8 +266,9 @@ const stateAttributesMapping = {
  */
 const DialogViewport = /*#__PURE__*/React.forwardRef(function DialogViewport(componentProps, forwardedRef) {
   const {
-    className,
     render,
+    className,
+    style,
     children,
     ...elementProps
   } = componentProps;
@@ -283,6 +281,7 @@ const DialogViewport = /*#__PURE__*/React.forwardRef(function DialogViewport(com
   const transitionStatus = store.useState('transitionStatus');
   const nestedOpenDialogCount = store.useState('nestedOpenDialogCount');
   const mounted = store.useState('mounted');
+  const setViewportElement = store.useStateSetter('viewportElement');
   const nestedDialogOpen = nestedOpenDialogCount > 0;
   const state = {
     open,
@@ -294,7 +293,7 @@ const DialogViewport = /*#__PURE__*/React.forwardRef(function DialogViewport(com
   return useRenderElement('div', componentProps, {
     enabled: shouldRender,
     state,
-    ref: [forwardedRef, store.useStateSetter('viewportElement')],
+    ref: [forwardedRef, setViewportElement],
     stateAttributesMapping,
     props: [{
       role: 'presentation',
@@ -323,7 +322,7 @@ class DialogHandle {
 
   /**
    * Opens the dialog and associates it with the trigger with the given id.
-   * The trigger, if provided, must be a Dialog.Trigger component with this handle passed as a prop.
+   * The trigger, if provided, must be a matching Trigger component with this handle passed as a prop.
    *
    * This method should only be called in an event handler or an effect (not during rendering).
    *
@@ -361,7 +360,7 @@ class DialogHandle {
    * Indicates whether the dialog is currently open.
    */
   get isOpen() {
-    return this.store.state.open;
+    return this.store.select('open');
   }
 }
 

package/dist/DrawerTitle-cjs.js

@@ -34,6 +34,7 @@ const DialogClose = /*#__PURE__*/React__namespace.forwardRef(function DialogClos
   const {
     render,
     className,
+    style,
     disabled = false,
     nativeButton = true,
     ...elementProps
@@ -42,11 +43,6 @@ const DialogClose = /*#__PURE__*/React__namespace.forwardRef(function DialogClos
     store
   } = ScrollAreaViewport.useDialogRootContext();
   const open = store.useState('open');
-  function handleClick(event) {
-    if (open) {
-      store.setOpen(false, useButton.createChangeEventDetails(useButton.closePress, event.nativeEvent));
-    }
-  }
   const {
     getButtonProps,
     buttonRef
@@ -57,6 +53,11 @@ const DialogClose = /*#__PURE__*/React__namespace.forwardRef(function DialogClos
   const state = {
     disabled
   };
+  function handleClick(event) {
+    if (open) {
+      store.setOpen(false, useButton.createChangeEventDetails(useButton.closePress, event.nativeEvent));
+    }
+  }
   return useRenderElement.useRenderElement('button', componentProps, {
     state,
     ref: [forwardedRef, buttonRef],
@@ -77,6 +78,7 @@ const DialogTitle = /*#__PURE__*/React__namespace.forwardRef(function DialogTitl
   const {
     render,
     className,
+    style,
     id: idProp,
     ...elementProps
   } = componentProps;

package/dist/DrawerTitle-es.js

@@ -13,6 +13,7 @@ const DialogClose = /*#__PURE__*/React.forwardRef(function DialogClose(component
   const {
     render,
     className,
+    style,
     disabled = false,
     nativeButton = true,
     ...elementProps
@@ -21,11 +22,6 @@ const DialogClose = /*#__PURE__*/React.forwardRef(function DialogClose(component
     store
   } = useDialogRootContext();
   const open = store.useState('open');
-  function handleClick(event) {
-    if (open) {
-      store.setOpen(false, createChangeEventDetails(closePress, event.nativeEvent));
-    }
-  }
   const {
     getButtonProps,
     buttonRef
@@ -36,6 +32,11 @@ const DialogClose = /*#__PURE__*/React.forwardRef(function DialogClose(component
   const state = {
     disabled
   };
+  function handleClick(event) {
+    if (open) {
+      store.setOpen(false, createChangeEventDetails(closePress, event.nativeEvent));
+    }
+  }
   return useRenderElement('button', componentProps, {
     state,
     ref: [forwardedRef, buttonRef],
@@ -56,6 +57,7 @@ const DialogTitle = /*#__PURE__*/React.forwardRef(function DialogTitle(component
   const {
     render,
     className,
+    style,
     id: idProp,
     ...elementProps
   } = componentProps;

package/dist/FilterPicker/components/FilterPickerActivator/index.cjs

@@ -17,7 +17,7 @@ require('../../../useChildComponent-cjs.js');
 require('../../../Tooltip-cjs.js');
 require('../../../floating-ui.react-cjs.js');
 require('../../../floating-ui.utils.dom-cjs.js');
-require('../../../index.esm-cjs.js');
+require('../../../floating-ui.utils-cjs.js');
 require('react/jsx-runtime');
 require('react-dom');
 require('../../../floating-ui.react-dom-cjs.js');

package/dist/FilterPicker/components/FilterPickerActivator/index.mjs

@@ -15,7 +15,7 @@ import '../../../useChildComponent-es.js';
 import '../../../Tooltip-es.js';
 import '../../../floating-ui.react-es.js';
 import '../../../floating-ui.utils.dom-es.js';
-import '../../../index.esm-es.js';
+import '../../../floating-ui.utils-es.js';
 import 'react/jsx-runtime';
 import 'react-dom';
 import '../../../floating-ui.react-dom-es.js';

package/dist/FilterPicker/components/FilterPickerContent/index.cjs

@@ -5,7 +5,7 @@ require('react');
 require('classnames');
 require('../../../floating-ui.react-cjs.js');
 require('../../../floating-ui.utils.dom-cjs.js');
-require('../../../index.esm-cjs.js');
+require('../../../floating-ui.utils-cjs.js');
 require('react/jsx-runtime');
 require('react-dom');
 require('../../../floating-ui.react-dom-cjs.js');

package/dist/FilterPicker/components/FilterPickerContent/index.mjs

@@ -3,7 +3,7 @@ import 'react';
 import 'classnames';
 import '../../../floating-ui.react-es.js';
 import '../../../floating-ui.utils.dom-es.js';
-import '../../../index.esm-es.js';
+import '../../../floating-ui.utils-es.js';
 import 'react/jsx-runtime';
 import 'react-dom';
 import '../../../floating-ui.react-dom-es.js';

package/dist/FilterPicker/components/FilterPickerTrigger/index.cjs

@@ -15,7 +15,7 @@ require('../../../Typography-cjs.js');
 require('../../../Tooltip-cjs.js');
 require('../../../floating-ui.react-cjs.js');
 require('../../../floating-ui.utils.dom-cjs.js');
-require('../../../index.esm-cjs.js');
+require('../../../floating-ui.utils-cjs.js');
 require('react/jsx-runtime');
 require('react-dom');
 require('../../../floating-ui.react-dom-cjs.js');

package/dist/FilterPicker/components/FilterPickerTrigger/index.mjs

@@ -13,7 +13,7 @@ import '../../../Typography-es.js';
 import '../../../Tooltip-es.js';
 import '../../../floating-ui.react-es.js';
 import '../../../floating-ui.utils.dom-es.js';
-import '../../../index.esm-es.js';
+import '../../../floating-ui.utils-es.js';
 import 'react/jsx-runtime';
 import 'react-dom';
 import '../../../floating-ui.react-dom-es.js';

package/dist/FilterPicker/index.cjs

@@ -7,7 +7,7 @@ require('../FilterPickerContent-cjs.js');
 require('classnames');
 require('../floating-ui.react-cjs.js');
 require('../floating-ui.utils.dom-cjs.js');
-require('../index.esm-cjs.js');
+require('../floating-ui.utils-cjs.js');
 require('react/jsx-runtime');
 require('react-dom');
 require('../floating-ui.react-dom-cjs.js');

package/dist/FilterPicker/index.mjs

@@ -5,7 +5,7 @@ import '../FilterPickerContent-es.js';
 import 'classnames';
 import '../floating-ui.react-es.js';
 import '../floating-ui.utils.dom-es.js';
-import '../index.esm-es.js';
+import '../floating-ui.utils-es.js';
 import 'react/jsx-runtime';
 import 'react-dom';
 import '../floating-ui.react-dom-es.js';

package/dist/FormFieldWrapper-cjs.js

@@ -11,7 +11,7 @@ var Text = require('./Text-cjs.js');
 var useFormFieldFocus = require('./useFormFieldFocus-cjs.js');
 var InputValidation = require('./InputValidation-cjs.js');
 
-var formFieldStyles = {"container":"YL-mNv-Bl6g-","wrapper":"_8lhbGTQ-hhg-","disabled":"Tz9LK9ABKMk-","horizontalWrapper":"b5mv1x1H7YE-","textarea":"hGr6YW4AeLM-","safari":"QBCWi9GBgMs-","timeInputLabel":"_0pmqVa2zSE4-","miniLabel":"F1t76G6bDKo-","large":"_9tjyT9QUtP8-","text":"QmMiyoAWp-g-","invalid":"XWDSfe6weSY-","small":"Sw5O4I0lMJg-","inline":"SaORbL7SYWY-","center":"ozy2UoT2vsg-","right":"_3TJdT91YD3c-","maxLength":"W6GrMqLy2qk-","inputWrapper":"-LmjnYRU0r0-","childrenWrapper":"yVXYv6hkuOA-","input":"vtSDcuzNr9Q-","emptyPhoneNumber":"MVhuQuzUBUs-","label":"Dgk00tzlODA-","select":"NwQGiWBWIsc-","externalLabel":"Qb8zQ8n-8vc-","postfix":"yTDzs9h1otI-","affixIcon":"m0YpdssD2dY-","suffix":"_-3mMnjSh6ok-","affixLabel":"-Wzcb0pBh5I-","description":"DHX5ijY3xIw-","toolbar":"AL-2brNI7dk-","spinning":"_8Rzv7CcDW80-"};
+var formFieldStyles = {"container":"YL-mNv-Bl6g-","wrapper":"_8lhbGTQ-hhg-","disabled":"Tz9LK9ABKMk-","horizontalWrapper":"b5mv1x1H7YE-","textarea":"hGr6YW4AeLM-","safari":"QBCWi9GBgMs-","timeInputLabel":"_0pmqVa2zSE4-","small":"Sw5O4I0lMJg-","miniLabel":"F1t76G6bDKo-","large":"_9tjyT9QUtP8-","text":"QmMiyoAWp-g-","invalid":"XWDSfe6weSY-","inline":"SaORbL7SYWY-","center":"ozy2UoT2vsg-","right":"_3TJdT91YD3c-","maxLength":"W6GrMqLy2qk-","inputWrapper":"-LmjnYRU0r0-","childrenWrapper":"yVXYv6hkuOA-","input":"vtSDcuzNr9Q-","emptyPhoneNumber":"MVhuQuzUBUs-","label":"Dgk00tzlODA-","select":"NwQGiWBWIsc-","externalLabel":"Qb8zQ8n-8vc-","postfix":"yTDzs9h1otI-","affixIcon":"m0YpdssD2dY-","suffix":"_-3mMnjSh6ok-","affixLabel":"-Wzcb0pBh5I-","description":"DHX5ijY3xIw-","toolbar":"AL-2brNI7dk-","spinning":"_8Rzv7CcDW80-"};
 
 /**
  * @internal Reach out to UX Foundations if using this component since it is possible it might change
@@ -95,7 +95,7 @@ function useFormFieldWrapperStyles({ size, align, placeholder, value, invalid, e
         [formFieldStyles.invalid]: invalid !== null && invalid !== void 0 ? invalid : error,
         [formFieldStyles.disabled]: disabled,
         [formFieldStyles.maxLength]: maxLength,
-        [formFieldStyles.timeInputLabel]: placeholder && type === "time" && placeholder && value === "",
+        [formFieldStyles.timeInputLabel]: placeholder && type === "time" && value === "",
     });
     const containerClasses = classnames(formFieldStyles.container, {
         [formFieldStyles.inline]: inline,

package/dist/FormFieldWrapper-es.js

@@ -9,7 +9,7 @@ import { T as Text } from './Text-es.js';
 import { u as useFormFieldFocus } from './useFormFieldFocus-es.js';
 import { I as InputValidation } from './InputValidation-es.js';
 
-var formFieldStyles = {"container":"YL-mNv-Bl6g-","wrapper":"_8lhbGTQ-hhg-","disabled":"Tz9LK9ABKMk-","horizontalWrapper":"b5mv1x1H7YE-","textarea":"hGr6YW4AeLM-","safari":"QBCWi9GBgMs-","timeInputLabel":"_0pmqVa2zSE4-","miniLabel":"F1t76G6bDKo-","large":"_9tjyT9QUtP8-","text":"QmMiyoAWp-g-","invalid":"XWDSfe6weSY-","small":"Sw5O4I0lMJg-","inline":"SaORbL7SYWY-","center":"ozy2UoT2vsg-","right":"_3TJdT91YD3c-","maxLength":"W6GrMqLy2qk-","inputWrapper":"-LmjnYRU0r0-","childrenWrapper":"yVXYv6hkuOA-","input":"vtSDcuzNr9Q-","emptyPhoneNumber":"MVhuQuzUBUs-","label":"Dgk00tzlODA-","select":"NwQGiWBWIsc-","externalLabel":"Qb8zQ8n-8vc-","postfix":"yTDzs9h1otI-","affixIcon":"m0YpdssD2dY-","suffix":"_-3mMnjSh6ok-","affixLabel":"-Wzcb0pBh5I-","description":"DHX5ijY3xIw-","toolbar":"AL-2brNI7dk-","spinning":"_8Rzv7CcDW80-"};
+var formFieldStyles = {"container":"YL-mNv-Bl6g-","wrapper":"_8lhbGTQ-hhg-","disabled":"Tz9LK9ABKMk-","horizontalWrapper":"b5mv1x1H7YE-","textarea":"hGr6YW4AeLM-","safari":"QBCWi9GBgMs-","timeInputLabel":"_0pmqVa2zSE4-","small":"Sw5O4I0lMJg-","miniLabel":"F1t76G6bDKo-","large":"_9tjyT9QUtP8-","text":"QmMiyoAWp-g-","invalid":"XWDSfe6weSY-","inline":"SaORbL7SYWY-","center":"ozy2UoT2vsg-","right":"_3TJdT91YD3c-","maxLength":"W6GrMqLy2qk-","inputWrapper":"-LmjnYRU0r0-","childrenWrapper":"yVXYv6hkuOA-","input":"vtSDcuzNr9Q-","emptyPhoneNumber":"MVhuQuzUBUs-","label":"Dgk00tzlODA-","select":"NwQGiWBWIsc-","externalLabel":"Qb8zQ8n-8vc-","postfix":"yTDzs9h1otI-","affixIcon":"m0YpdssD2dY-","suffix":"_-3mMnjSh6ok-","affixLabel":"-Wzcb0pBh5I-","description":"DHX5ijY3xIw-","toolbar":"AL-2brNI7dk-","spinning":"_8Rzv7CcDW80-"};
 
 /**
  * @internal Reach out to UX Foundations if using this component since it is possible it might change
@@ -93,7 +93,7 @@ function useFormFieldWrapperStyles({ size, align, placeholder, value, invalid, e
         [formFieldStyles.invalid]: invalid !== null && invalid !== void 0 ? invalid : error,
         [formFieldStyles.disabled]: disabled,
         [formFieldStyles.maxLength]: maxLength,
-        [formFieldStyles.timeInputLabel]: placeholder && type === "time" && placeholder && value === "",
+        [formFieldStyles.timeInputLabel]: placeholder && type === "time" && value === "",
     });
     const containerClasses = classnames(formFieldStyles.container, {
         [formFieldStyles.inline]: inline,

package/dist/FormatFile/index.cjs

@@ -26,7 +26,7 @@ require('../noop-cjs.js');
 require('../_commonjsHelpers-cjs.js');
 require('../floating-ui.react-cjs.js');
 require('../floating-ui.utils.dom-cjs.js');
-require('../index.esm-cjs.js');
+require('../floating-ui.utils-cjs.js');
 require('react/jsx-runtime');
 require('../floating-ui.react-dom-cjs.js');
 require('../identity-cjs.js');

package/dist/FormatFile/index.mjs

@@ -24,7 +24,7 @@ import '../noop-es.js';
 import '../_commonjsHelpers-es.js';
 import '../floating-ui.react-es.js';
 import '../floating-ui.utils.dom-es.js';
-import '../index.esm-es.js';
+import '../floating-ui.utils-es.js';
 import 'react/jsx-runtime';
 import '../floating-ui.react-dom-es.js';
 import '../identity-es.js';

package/dist/Gallery/index.cjs

@@ -21,7 +21,7 @@ require('../Heading-cjs.js');
 require('../Tooltip-cjs.js');
 require('../floating-ui.react-cjs.js');
 require('../floating-ui.utils.dom-cjs.js');
-require('../index.esm-cjs.js');
+require('../floating-ui.utils-cjs.js');
 require('react/jsx-runtime');
 require('../floating-ui.react-dom-cjs.js');
 require('../AtlantisThemeContext-cjs.js');

package/dist/Gallery/index.mjs

@@ -19,7 +19,7 @@ import '../Heading-es.js';
 import '../Tooltip-es.js';
 import '../floating-ui.react-es.js';
 import '../floating-ui.utils.dom-es.js';
-import '../index.esm-es.js';
+import '../floating-ui.utils-es.js';
 import 'react/jsx-runtime';
 import '../floating-ui.react-dom-es.js';
 import '../AtlantisThemeContext-es.js';

package/dist/InputDate/index.cjs

@@ -7,7 +7,7 @@ require('classnames');
 require('../clsx-cjs.js');
 require('../floating-ui.react-cjs.js');
 require('../floating-ui.utils.dom-cjs.js');
-require('../index.esm-cjs.js');
+require('../floating-ui.utils-cjs.js');
 require('react/jsx-runtime');
 require('react-dom');
 require('../floating-ui.react-dom-cjs.js');

package/dist/InputDate/index.mjs

@@ -5,7 +5,7 @@ import 'classnames';
 import '../clsx-es.js';
 import '../floating-ui.react-es.js';
 import '../floating-ui.utils.dom-es.js';
-import '../index.esm-es.js';
+import '../floating-ui.utils-es.js';
 import 'react/jsx-runtime';
 import 'react-dom';
 import '../floating-ui.react-dom-es.js';