@jobber/components 8.23.0 → 8.23.1

package/dist/ConfirmationModal/index.cjs

@@ -19,7 +19,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/ConfirmationModal/index.mjs

@@ -17,7 +17,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/DataDump/index.cjs

@@ -16,7 +16,7 @@ require('@jobber/hooks');
 require('framer-motion');
 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');
@@ -26,16 +26,16 @@ require('../useRenderElement-cjs.js');
 require('../buttonRenderAdapter-cjs.js');
 require('../BottomSheet-cjs.js');
 require('../ScrollAreaViewport-cjs.js');
-require('../InternalBackdrop-cjs.js');
+require('../useScrollLock-cjs.js');
 require('../useButton-cjs.js');
-require('../CSPContext-cjs.js');
+require('../scrollEdges-cjs.js');
 require('../clamp-cjs.js');
 require('../OverlaySeparator-cjs.js');
 require('../Separator-cjs.js');
 require('../DrawerTitle-cjs.js');
 require('../MenuSubmenuTrigger-cjs.js');
 require('../useCompositeListItem-cjs.js');
-require('../ToolbarRootContext-cjs.js');
+require('../isElementDisabled-cjs.js');
 require('../Content-cjs.js');
 require('../Emphasis-cjs.js');
 

package/dist/DataDump/index.mjs

@@ -14,7 +14,7 @@ import '@jobber/hooks';
 import 'framer-motion';
 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';
@@ -24,15 +24,15 @@ import '../useRenderElement-es.js';
 import '../buttonRenderAdapter-es.js';
 import '../BottomSheet-es.js';
 import '../ScrollAreaViewport-es.js';
-import '../InternalBackdrop-es.js';
+import '../useScrollLock-es.js';
 import '../useButton-es.js';
-import '../CSPContext-es.js';
+import '../scrollEdges-es.js';
 import '../clamp-es.js';
 import '../OverlaySeparator-es.js';
 import '../Separator-es.js';
 import '../DrawerTitle-es.js';
 import '../MenuSubmenuTrigger-es.js';
 import '../useCompositeListItem-es.js';
-import '../ToolbarRootContext-es.js';
+import '../isElementDisabled-es.js';
 import '../Content-es.js';
 import '../Emphasis-es.js';

package/dist/DataList/components/DataListActions/index.cjs

@@ -6,7 +6,7 @@ require('../../../Tooltip-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/DataList/components/DataListActions/index.mjs

@@ -4,7 +4,7 @@ import '../../../Tooltip-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/DataList/components/DataListBulkActions/index.cjs

@@ -10,7 +10,7 @@ require('../../../Tooltip-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/DataList/components/DataListBulkActions/index.mjs

@@ -8,7 +8,7 @@ import '../../../Tooltip-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/DataList/components/DataListFilters/components/DataListSort/index.cjs

@@ -10,7 +10,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/DataList/components/DataListFilters/components/DataListSort/index.mjs

@@ -8,7 +8,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/DataList/components/DataListFilters/index.cjs

@@ -11,7 +11,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/DataList/components/DataListFilters/index.mjs

@@ -9,7 +9,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/DataList/components/DataListHeader/index.cjs

@@ -34,7 +34,7 @@ require('../../../DataListActions-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/DataList/components/DataListHeader/index.mjs

@@ -32,7 +32,7 @@ import '../../../DataListActions-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/DataList/components/DataListItem/index.cjs

@@ -14,7 +14,7 @@ require('../../../DataListActions-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/DataList/components/DataListItem/index.mjs

@@ -12,7 +12,7 @@ import '../../../DataListActions-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/DataList/components/DataListItemActions/index.cjs

@@ -10,7 +10,7 @@ require('../../../Tooltip-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/DataList/components/DataListItemActions/index.mjs

@@ -8,7 +8,7 @@ import '../../../Tooltip-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/DataList/components/DataListItemActionsOverflow/index.cjs

@@ -12,7 +12,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/DataList/components/DataListItemActionsOverflow/index.mjs

@@ -10,7 +10,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/DataList/components/DataListItems/index.cjs

@@ -16,7 +16,7 @@ require('../../../DataListActions-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/DataList/components/DataListItems/index.mjs

@@ -14,7 +14,7 @@ import '../../../DataListActions-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/DataList/components/DataListLayout/index.cjs

@@ -17,7 +17,7 @@ require('../../../DataListActions-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/DataList/components/DataListLayout/index.mjs

@@ -15,7 +15,7 @@ import '../../../DataListActions-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/DataList/components/DataListLayoutActions/index.cjs

@@ -17,7 +17,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/DataList/components/DataListLayoutActions/index.mjs

@@ -15,7 +15,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/DataList/index.cjs

@@ -28,7 +28,7 @@ require('../DataListActions-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/DataList/index.mjs

@@ -26,7 +26,7 @@ import '../DataListActions-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/DatePicker/index.cjs

@@ -6,7 +6,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/DatePicker/index.mjs

@@ -4,7 +4,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';

package/dist/Dialog/index.cjs

@@ -13,13 +13,13 @@ require('@jobber/design');
 require('../Typography-cjs.js');
 require('../useRenderElement-cjs.js');
 require('../ScrollAreaViewport-cjs.js');
-require('../InternalBackdrop-cjs.js');
-require('../index.esm-cjs.js');
+require('../useScrollLock-cjs.js');
 require('../floating-ui.utils.dom-cjs.js');
 require('../useButton-cjs.js');
 require('react-dom');
 require('react/jsx-runtime');
-require('../CSPContext-cjs.js');
+require('../floating-ui.utils-cjs.js');
+require('../scrollEdges-cjs.js');
 require('../clamp-cjs.js');
 require('../Heading-cjs.js');
 require('../BottomSheet-cjs.js');

package/dist/Dialog/index.mjs

@@ -11,13 +11,13 @@ import '@jobber/design';
 import '../Typography-es.js';
 import '../useRenderElement-es.js';
 import '../ScrollAreaViewport-es.js';
-import '../InternalBackdrop-es.js';
-import '../index.esm-es.js';
+import '../useScrollLock-es.js';
 import '../floating-ui.utils.dom-es.js';
 import '../useButton-es.js';
 import 'react-dom';
 import 'react/jsx-runtime';
-import '../CSPContext-es.js';
+import '../floating-ui.utils-es.js';
+import '../scrollEdges-es.js';
 import '../clamp-es.js';
 import '../Heading-es.js';
 import '../BottomSheet-es.js';

package/dist/DrawerDescription-cjs.js

@@ -3,9 +3,9 @@
 var React = require('react');
 var ScrollAreaViewport = require('./ScrollAreaViewport-cjs.js');
 var useRenderElement = require('./useRenderElement-cjs.js');
-var InternalBackdrop = require('./InternalBackdrop-cjs.js');
+var useScrollLock = require('./useScrollLock-cjs.js');
 var useButton = require('./useButton-cjs.js');
-var CSPContext = require('./CSPContext-cjs.js');
+var scrollEdges = require('./scrollEdges-cjs.js');
 var jsxRuntime = require('react/jsx-runtime');
 
 function _interopNamespaceDefault(e) {
@@ -28,7 +28,7 @@ function _interopNamespaceDefault(e) {
 var React__namespace = /*#__PURE__*/_interopNamespaceDefault(React);
 
 const stateAttributesMapping$2 = {
-  ...InternalBackdrop.popupStateMapping,
+  ...useScrollLock.popupStateMapping,
   ...useButton.transitionStatusMapping
 };
 
@@ -42,6 +42,7 @@ const DialogBackdrop = /*#__PURE__*/React__namespace.forwardRef(function DialogB
   const {
     render,
     className,
+    style,
     forceRender = false,
     ...elementProps
   } = componentProps;
@@ -83,6 +84,7 @@ const DialogDescription = /*#__PURE__*/React__namespace.forwardRef(function Dial
   const {
     render,
     className,
+    style,
     id: idProp,
     ...elementProps
   } = componentProps;
@@ -113,19 +115,19 @@ let DialogPopupDataAttributes = function (DialogPopupDataAttributes) {
   /**
    * Present when the dialog is open.
    */
-  DialogPopupDataAttributes[DialogPopupDataAttributes["open"] = InternalBackdrop.CommonPopupDataAttributes.open] = "open";
+  DialogPopupDataAttributes[DialogPopupDataAttributes["open"] = useScrollLock.CommonPopupDataAttributes.open] = "open";
   /**
    * Present when the dialog is closed.
    */
-  DialogPopupDataAttributes[DialogPopupDataAttributes["closed"] = InternalBackdrop.CommonPopupDataAttributes.closed] = "closed";
+  DialogPopupDataAttributes[DialogPopupDataAttributes["closed"] = useScrollLock.CommonPopupDataAttributes.closed] = "closed";
   /**
    * Present when the dialog is animating in.
    */
-  DialogPopupDataAttributes[DialogPopupDataAttributes["startingStyle"] = InternalBackdrop.CommonPopupDataAttributes.startingStyle] = "startingStyle";
+  DialogPopupDataAttributes[DialogPopupDataAttributes["startingStyle"] = useScrollLock.CommonPopupDataAttributes.startingStyle] = "startingStyle";
   /**
    * Present when the dialog is animating out.
    */
-  DialogPopupDataAttributes[DialogPopupDataAttributes["endingStyle"] = InternalBackdrop.CommonPopupDataAttributes.endingStyle] = "endingStyle";
+  DialogPopupDataAttributes[DialogPopupDataAttributes["endingStyle"] = useScrollLock.CommonPopupDataAttributes.endingStyle] = "endingStyle";
   /**
    * Present when the dialog is nested within another dialog.
    */
@@ -138,7 +140,7 @@ let DialogPopupDataAttributes = function (DialogPopupDataAttributes) {
 }({});
 
 const stateAttributesMapping$1 = {
-  ...InternalBackdrop.popupStateMapping,
+  ...useScrollLock.popupStateMapping,
   ...useButton.transitionStatusMapping,
   nestedDialogOpen(value) {
     return value ? {
@@ -155,10 +157,11 @@ const stateAttributesMapping$1 = {
  */
 const DialogPopup = /*#__PURE__*/React__namespace.forwardRef(function DialogPopup(componentProps, forwardedRef) {
   const {
+    render,
     className,
+    style,
     finalFocus,
     initialFocus,
-    render,
     ...elementProps
   } = componentProps;
   const {
@@ -177,6 +180,8 @@ const DialogPopup = /*#__PURE__*/React__namespace.forwardRef(function DialogPopu
   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;
   ScrollAreaViewport.useDialogPortalContext();
   useButton.useOpenChangeComplete({
     open,
@@ -187,18 +192,9 @@ const DialogPopup = /*#__PURE__*/React__namespace.forwardRef(function DialogPopu
       }
     }
   });
-
-  // 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 ? useScrollLock.createDefaultInitialFocus(store.context.popupRef) : initialFocus;
   const nestedDialogOpen = nestedOpenDialogCount > 0;
+  const setPopupElement = store.useStateSetter('popupElement');
   const state = {
     open,
     nested,
@@ -208,13 +204,14 @@ const DialogPopup = /*#__PURE__*/React__namespace.forwardRef(function DialogPopu
   const element = useRenderElement.useRenderElement('div', componentProps, {
     state,
     props: [rootPopupProps, {
+      id: popupId,
       'aria-labelledby': titleElementId ?? undefined,
       'aria-describedby': descriptionElementId ?? undefined,
       role,
-      tabIndex: -1,
+      ...useScrollLock.FOCUSABLE_POPUP_PROPS,
       hidden: !mounted,
       onKeyDown(event) {
-        if (CSPContext.COMPOSITE_KEYS.has(event.key)) {
+        if (scrollEdges.COMPOSITE_KEYS.has(event.key)) {
           event.stopPropagation();
         }
       },
@@ -222,10 +219,10 @@ const DialogPopup = /*#__PURE__*/React__namespace.forwardRef(function DialogPopu
         [DialogPopupCssVars.nestedDialogs]: nestedOpenDialogCount
       }
     }, elementProps],
-    ref: [forwardedRef, store.context.popupRef, store.useStateSetter('popupElement')],
+    ref: [forwardedRef, store.context.popupRef, setPopupElement],
     stateAttributesMapping: stateAttributesMapping$1
   });
-  return /*#__PURE__*/jsxRuntime.jsx(InternalBackdrop.FloatingFocusManager, {
+  return /*#__PURE__*/jsxRuntime.jsx(useScrollLock.FloatingFocusManager, {
     context: floatingRootContext,
     openInteractionType: openMethod,
     disabled: !mounted,
@@ -243,19 +240,19 @@ let DialogViewportDataAttributes = function (DialogViewportDataAttributes) {
   /**
    * Present when the dialog is open.
    */
-  DialogViewportDataAttributes[DialogViewportDataAttributes["open"] = InternalBackdrop.CommonPopupDataAttributes.open] = "open";
+  DialogViewportDataAttributes[DialogViewportDataAttributes["open"] = useScrollLock.CommonPopupDataAttributes.open] = "open";
   /**
    * Present when the dialog is closed.
    */
-  DialogViewportDataAttributes[DialogViewportDataAttributes["closed"] = InternalBackdrop.CommonPopupDataAttributes.closed] = "closed";
+  DialogViewportDataAttributes[DialogViewportDataAttributes["closed"] = useScrollLock.CommonPopupDataAttributes.closed] = "closed";
   /**
    * Present when the dialog is animating in.
    */
-  DialogViewportDataAttributes[DialogViewportDataAttributes["startingStyle"] = InternalBackdrop.CommonPopupDataAttributes.startingStyle] = "startingStyle";
+  DialogViewportDataAttributes[DialogViewportDataAttributes["startingStyle"] = useScrollLock.CommonPopupDataAttributes.startingStyle] = "startingStyle";
   /**
    * Present when the dialog is animating out.
    */
-  DialogViewportDataAttributes[DialogViewportDataAttributes["endingStyle"] = InternalBackdrop.CommonPopupDataAttributes.endingStyle] = "endingStyle";
+  DialogViewportDataAttributes[DialogViewportDataAttributes["endingStyle"] = useScrollLock.CommonPopupDataAttributes.endingStyle] = "endingStyle";
   /**
    * Present when the dialog is nested within another dialog.
    */
@@ -268,7 +265,7 @@ let DialogViewportDataAttributes = function (DialogViewportDataAttributes) {
 }({});
 
 const stateAttributesMapping = {
-  ...InternalBackdrop.popupStateMapping,
+  ...useScrollLock.popupStateMapping,
   ...useButton.transitionStatusMapping,
   nested(value) {
     return value ? {
@@ -290,8 +287,9 @@ const stateAttributesMapping = {
  */
 const DialogViewport = /*#__PURE__*/React__namespace.forwardRef(function DialogViewport(componentProps, forwardedRef) {
   const {
-    className,
     render,
+    className,
+    style,
     children,
     ...elementProps
   } = componentProps;
@@ -304,6 +302,7 @@ const DialogViewport = /*#__PURE__*/React__namespace.forwardRef(function DialogV
   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,
@@ -315,7 +314,7 @@ const DialogViewport = /*#__PURE__*/React__namespace.forwardRef(function DialogV
   return useRenderElement.useRenderElement('div', componentProps, {
     enabled: shouldRender,
     state,
-    ref: [forwardedRef, store.useStateSetter('viewportElement')],
+    ref: [forwardedRef, setViewportElement],
     stateAttributesMapping,
     props: [{
       role: 'presentation',
@@ -344,7 +343,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).
    *
@@ -382,7 +381,7 @@ class DialogHandle {
    * Indicates whether the dialog is currently open.
    */
   get isOpen() {
-    return this.store.state.open;
+    return this.store.select('open');
   }
 }