@jobber/components 8.14.0 → 8.15.0

package/dist/{ComboboxLoadMore-es.js → FilterPickerLoadMore-es.js}

@@ -1,14 +1,14 @@
 import React__default, { useEffect } from 'react';
 import { useInView } from '@jobber/hooks';
 
-var styles = {"trigger":"jPB--ZCYNNI-","spinning":"aW61BrnGmcw-"};
+var styles = {"trigger":"_8SCmS4wfKOQ-","spinning":"coGWl7tznJU-"};
 
-function ComboboxLoadMore({ onLoadMore }) {
+function FilterPickerLoadMore({ onLoadMore, }) {
     const [inViewRef, isInView] = useInView();
     useEffect(() => {
         isInView && onLoadMore();
     }, [isInView]);
-    return (React__default.createElement("div", { "data-testid": "ATL-Combobox-Loadmore-Trigger", ref: inViewRef, className: styles.trigger }));
+    return (React__default.createElement("div", { "data-testid": "ATL-FilterPicker-Loadmore-Trigger", ref: inViewRef, className: styles.trigger }));
 }
 
-export { ComboboxLoadMore as C };
+export { FilterPickerLoadMore as F };

package/dist/{ComboboxOption-cjs.js → FilterPickerOption-cjs.js}

@@ -5,13 +5,13 @@ var React = require('react');
 var classnames = require('classnames');
 var Icon = require('./Icon-cjs.js');
 var Flex = require('./Flex-cjs.js');
-var ComboboxProvider = require('./ComboboxProvider-cjs.js');
+var FilterPickerProvider = require('./FilterPickerProvider-cjs.js');
 
-var styles = {"option":"HowvTX8-pw4-","spinning":"iwgbuC2MqzI-"};
+var styles = {"option":"tjXkqP6ZdSk-","spinning":"yDp0Y9ojp0Y-"};
 
-function ComboboxOption(props) {
+function FilterPickerOption(props) {
     const { customRender, onClick } = props, contentProps = tslib_es6.__rest(props, ["customRender", "onClick"]);
-    const { selected, selectionHandler } = React.useContext(ComboboxProvider.ComboboxContext);
+    const { selected, selectionHandler } = React.useContext(FilterPickerProvider.FilterPickerContext);
     const isSelected = selected.some(selection => selection.id.toString() === props.id.toString());
     const handleClick = () => {
         const { id, label } = props;
@@ -28,4 +28,4 @@ function InternalDefaultContent(props) {
         React.createElement("div", null, props.isSelected && (React.createElement(Icon.Icon, { name: "checkmark", color: "interactiveSubtle" })))));
 }
 
-exports.ComboboxOption = ComboboxOption;
+exports.FilterPickerOption = FilterPickerOption;

package/dist/{ComboboxOption-es.js → FilterPickerOption-es.js}

@@ -3,13 +3,13 @@ import React__default, { useContext } from 'react';
 import classnames from 'classnames';
 import { I as Icon } from './Icon-es.js';
 import { F as Flex } from './Flex-es.js';
-import { a as ComboboxContext } from './ComboboxProvider-es.js';
+import { a as FilterPickerContext } from './FilterPickerProvider-es.js';
 
-var styles = {"option":"HowvTX8-pw4-","spinning":"iwgbuC2MqzI-"};
+var styles = {"option":"tjXkqP6ZdSk-","spinning":"yDp0Y9ojp0Y-"};
 
-function ComboboxOption(props) {
+function FilterPickerOption(props) {
     const { customRender, onClick } = props, contentProps = __rest(props, ["customRender", "onClick"]);
-    const { selected, selectionHandler } = useContext(ComboboxContext);
+    const { selected, selectionHandler } = useContext(FilterPickerContext);
     const isSelected = selected.some(selection => selection.id.toString() === props.id.toString());
     const handleClick = () => {
         const { id, label } = props;
@@ -26,4 +26,4 @@ function InternalDefaultContent(props) {
         React__default.createElement("div", null, props.isSelected && (React__default.createElement(Icon, { name: "checkmark", color: "interactiveSubtle" })))));
 }
 
-export { ComboboxOption as C };
+export { FilterPickerOption as F };

package/dist/FilterPickerProvider-cjs.js

@@ -0,0 +1,13 @@
+'use strict';
+
+var tslib_es6 = require('./tslib.es6-cjs.js');
+var React = require('react');
+
+const FilterPickerContext = React.createContext({});
+function FilterPickerContextProvider(_a) {
+    var { children } = _a, props = tslib_es6.__rest(_a, ["children"]);
+    return (React.createElement(FilterPickerContext.Provider, { value: props }, children));
+}
+
+exports.FilterPickerContext = FilterPickerContext;
+exports.FilterPickerContextProvider = FilterPickerContextProvider;

package/dist/FilterPickerProvider-es.js

@@ -0,0 +1,10 @@
+import { _ as __rest } from './tslib.es6-es.js';
+import React__default from 'react';
+
+const FilterPickerContext = React__default.createContext({});
+function FilterPickerContextProvider(_a) {
+    var { children } = _a, props = __rest(_a, ["children"]);
+    return (React__default.createElement(FilterPickerContext.Provider, { value: props }, children));
+}
+
+export { FilterPickerContextProvider as F, FilterPickerContext as a };

package/dist/{ComboboxTrigger-cjs.js → FilterPickerTrigger-cjs.js}

@@ -4,14 +4,14 @@ var React = require('react');
 var Chip = require('./Chip-cjs.js');
 require('./tslib.es6-cjs.js');
 var Icon = require('./Icon-cjs.js');
-var ComboboxProvider = require('./ComboboxProvider-cjs.js');
+var FilterPickerProvider = require('./FilterPickerProvider-cjs.js');
 
-function ComboboxTrigger({ label = "Select", selected, activatorRef, }) {
-    const { handleOpen } = React.useContext(ComboboxProvider.ComboboxContext);
+function FilterPickerTrigger({ label = "Select", selected, activatorRef, }) {
+    const { handleOpen } = React.useContext(FilterPickerProvider.FilterPickerContext);
     const hasSelection = selected.length;
     const selectedLabel = selected.map(option => option.label).join(", ");
     return (React.createElement(Chip.Chip, { variation: hasSelection ? "base" : "subtle", label: hasSelection ? selectedLabel : "", ariaLabel: label, heading: label, onClick: handleOpen, role: "combobox", ref: activatorRef }, !hasSelection && (React.createElement(Chip.Chip.Suffix, null,
         React.createElement(Icon.Icon, { name: "add", size: "small" })))));
 }
 
-exports.ComboboxTrigger = ComboboxTrigger;
+exports.FilterPickerTrigger = FilterPickerTrigger;

package/dist/{ComboboxTrigger-es.js → FilterPickerTrigger-es.js}

@@ -2,14 +2,14 @@ import React__default from 'react';
 import { C as Chip } from './Chip-es.js';
 import './tslib.es6-es.js';
 import { I as Icon } from './Icon-es.js';
-import { a as ComboboxContext } from './ComboboxProvider-es.js';
+import { a as FilterPickerContext } from './FilterPickerProvider-es.js';
 
-function ComboboxTrigger({ label = "Select", selected, activatorRef, }) {
-    const { handleOpen } = React__default.useContext(ComboboxContext);
+function FilterPickerTrigger({ label = "Select", selected, activatorRef, }) {
+    const { handleOpen } = React__default.useContext(FilterPickerContext);
     const hasSelection = selected.length;
     const selectedLabel = selected.map(option => option.label).join(", ");
     return (React__default.createElement(Chip, { variation: hasSelection ? "base" : "subtle", label: hasSelection ? selectedLabel : "", ariaLabel: label, heading: label, onClick: handleOpen, role: "combobox", ref: activatorRef }, !hasSelection && (React__default.createElement(Chip.Suffix, null,
         React__default.createElement(Icon, { name: "add", size: "small" })))));
 }
 
-export { ComboboxTrigger as C };
+export { FilterPickerTrigger as F };

package/dist/InputNumberExperimental-cjs.js

@@ -9,7 +9,6 @@ var useValueChanged = require('./useValueChanged-cjs.js');
 var NumberFieldInput = require('./NumberFieldInput-cjs.js');
 var useRenderElement = require('./useRenderElement-cjs.js');
 var jsxRuntime = require('react/jsx-runtime');
-var useBaseUiId = require('./useBaseUiId-cjs.js');
 
 function _interopNamespaceDefault(e) {
   var n = Object.create(null);
@@ -45,7 +44,7 @@ function useFieldsetRootContext(optional = false) {
 }
 
 const LabelableProvider = function LabelableProvider(props) {
-  const defaultId = useBaseUiId.useBaseUiId();
+  const defaultId = useValueChanged.useBaseUiId();
   const initialControlId = props.controlId === undefined ? defaultId : props.controlId;
   const [controlId, setControlIdState] = React__namespace.useState(initialControlId);
   const [labelId, setLabelId] = React__namespace.useState(props.labelId);
@@ -486,7 +485,7 @@ const FieldError = /*#__PURE__*/React__namespace.forwardRef(function FieldError(
     match,
     ...elementProps
   } = componentProps;
-  const id = useBaseUiId.useBaseUiId(idProp);
+  const id = useValueChanged.useBaseUiId(idProp);
   const {
     validityData,
     state: fieldState,
@@ -582,7 +581,7 @@ const FieldDescription = /*#__PURE__*/React__namespace.forwardRef(function Field
     className,
     ...elementProps
   } = componentProps;
-  const id = useBaseUiId.useBaseUiId(idProp);
+  const id = useValueChanged.useBaseUiId(idProp);
   const fieldRootContext = NumberFieldInput.useFieldRootContext(false);
   const {
     setMessageIds

package/dist/InputNumberExperimental-es.js

@@ -4,11 +4,10 @@ import classnames from 'classnames';
 import { A as ActivityIndicator } from './ActivityIndicator-es.js';
 import { B as Button } from './Button-es.js';
 import { I as Icon } from './Icon-es.js';
-import { a as useStableCallback, c as useTimeout, t as transitionStatusMapping, d as useTransitionStatus, u as useIsoLayoutEffect, e as useOpenChangeComplete } from './useValueChanged-es.js';
+import { u as useBaseUiId, a as useStableCallback, b as useTimeout, t as transitionStatusMapping, c as useTransitionStatus, d as useIsoLayoutEffect, e as useOpenChangeComplete } from './useValueChanged-es.js';
 import { u as useLabelableContext, L as LabelableContext, a as useFormContext, D as DEFAULT_VALIDITY_STATE, g as getCombinedFieldValidityData, f as fieldValidityMapping, F as FieldRootContext, b as useFieldRootContext, N as NumberFieldRoot, c as NumberFieldGroup, d as NumberFieldInput, e as NumberFieldIncrement, h as NumberFieldDecrement } from './NumberFieldInput-es.js';
-import { f as formatErrorMessage, b as useRefWithInit, m as mergeProps, E as EMPTY_OBJECT, u as useRenderElement } from './useRenderElement-es.js';
+import { f as formatErrorMessage, a as useRefWithInit, m as mergeProps, E as EMPTY_OBJECT, u as useRenderElement } from './useRenderElement-es.js';
 import { jsx } from 'react/jsx-runtime';
-import { u as useBaseUiId } from './useBaseUiId-es.js';
 
 const FieldsetRootContext = /*#__PURE__*/React.createContext({
   legendId: undefined,

package/dist/Menu/index.cjs

@@ -21,12 +21,11 @@ require('../useFormFieldFocus-cjs.js');
 require('../maxHeight-cjs.js');
 require('../useRenderElement-cjs.js');
 require('../BottomSheet-cjs.js');
-require('../DrawerRoot-cjs.js');
+require('../ScrollAreaViewport-cjs.js');
 require('../useValueChanged-cjs.js');
 require('../OverlaySeparator-cjs.js');
 require('../Separator-cjs.js');
 require('../MenuSubmenuTrigger-cjs.js');
-require('../useBaseUiId-cjs.js');
 
 
 

package/dist/Menu/index.mjs

@@ -19,9 +19,8 @@ import '../useFormFieldFocus-es.js';
 import '../maxHeight-es.js';
 import '../useRenderElement-es.js';
 import '../BottomSheet-es.js';
-import '../DrawerRoot-es.js';
+import '../ScrollAreaViewport-es.js';
 import '../useValueChanged-es.js';
 import '../OverlaySeparator-es.js';
 import '../Separator-es.js';
 import '../MenuSubmenuTrigger-es.js';
-import '../useBaseUiId-es.js';

package/dist/Menu-cjs.js

@@ -12,9 +12,9 @@ var useFormFieldFocus = require('./useFormFieldFocus-cjs.js');
 var maxHeight = require('./maxHeight-cjs.js');
 var floatingUi_reactDom = require('./floating-ui.react-dom-cjs.js');
 var useRenderElement = require('./useRenderElement-cjs.js');
-var tslib_es6 = require('./tslib.es6-cjs.js');
 var BottomSheet = require('./BottomSheet-cjs.js');
 var OverlaySeparator = require('./OverlaySeparator-cjs.js');
+var ScrollAreaViewport = require('./ScrollAreaViewport-cjs.js');
 var MenuSubmenuTrigger$1 = require('./MenuSubmenuTrigger-cjs.js');
 
 var styles$2 = {"wrapper":"h-nk89U2n6Q-","floatingContainer":"krpkWzoaVcc-","menu":"_7sU7mp1w0jM-","legacySection":"_4x-vvEmn4gM-","separator":"i0QNcs4S-wk-","triggerWrapper":"_7CsejipGrzM-","ariaMenu":"bO7lGVQC42c-","ariaItem":"u6fDgbWmPck-","ariaSection":"-TSNrZBKZJI-","ariaSectionHeader":"zs7dS2pKjEw-","sectionHeader":"MZJgunQcmdQ-","legacyAction":"_-1GOlrzd098-","action":"NYXV5w4pd0c-","destructive":"baYK2zQ6-GA-","overlay":"A7T14ALVEKg-","fullWidth":"Lgbn9IRPI5Y-","screenReaderOnly":"o-ps580KdWI-","spinning":"f1oTdSTeUOM-"};
@@ -212,51 +212,6 @@ function mergeUnsafeProps(props) {
     });
 }
 
-function assignRef(ref, instance) {
-    if (!ref) {
-        return;
-    }
-    if (typeof ref === "function") {
-        ref(instance);
-        return;
-    }
-    ref.current = instance;
-}
-function mergeRefs(...refs) {
-    return (instance) => {
-        refs.forEach(ref => {
-            assignRef(ref, instance);
-        });
-    };
-}
-function getElementRef(element) {
-    return element.ref;
-}
-function normalizeBaseUiButtonProps(props) {
-    const rest = tslib_es6.__rest(props, ["type"]);
-    return rest;
-}
-function isAtlantisButtonRenderTarget(element) {
-    return React.isValidElement(element) && element.type === Button.Button;
-}
-function renderAtlantisButtonTarget(element) {
-    return function renderButtonTarget(props) {
-        const mergedProps = useRenderElement.mergeProps(normalizeBaseUiButtonProps(props), element.props);
-        return (React.createElement(Button.Button, Object.assign({}, mergedProps, { ref: mergeRefs(props.ref, getElementRef(element)), key: element.key })));
-    };
-}
-function stripNativeTypeFromButtonRenderTarget(element) {
-    const nativeType = element.props.type;
-    if (nativeType !== "button" &&
-        nativeType !== "submit" &&
-        nativeType !== "reset") {
-        return element;
-    }
-    return React.cloneElement(element, {
-        type: undefined,
-    });
-}
-
 // New composable menu pieces prefer standard DOM props, but we still accept the
 // old UNSAFE_* names during the migration window. Base UI's merge semantics let
 // either API path continue to work while standard props still win on conflicts.
@@ -282,23 +237,23 @@ function resolveMenuTriggerRender({ children, render, }) {
     if (render) {
         if (typeof render === "function") {
             return (props) => {
-                const renderedElement = render(normalizeBaseUiButtonProps(props));
-                return isAtlantisButtonRenderTarget(renderedElement)
-                    ? stripNativeTypeFromButtonRenderTarget(renderedElement)
+                const renderedElement = render(BottomSheet.normalizeBaseUiButtonProps(props));
+                return BottomSheet.isAtlantisButtonRenderTarget(renderedElement)
+                    ? BottomSheet.stripNativeTypeFromButtonRenderTarget(renderedElement)
                     : renderedElement;
             };
         }
-        return isAtlantisButtonRenderTarget(render)
-            ? renderAtlantisButtonTarget(render)
+        return BottomSheet.isAtlantisButtonRenderTarget(render)
+            ? BottomSheet.renderAtlantisButtonTarget(render)
             : render;
     }
-    if (isAtlantisButtonRenderTarget(children)) {
-        return renderAtlantisButtonTarget(children);
+    if (BottomSheet.isAtlantisButtonRenderTarget(children)) {
+        return BottomSheet.renderAtlantisButtonTarget(children);
     }
     if (React.isValidElement(children)) {
         return children;
     }
-    return renderAtlantisButtonTarget(React.createElement(Button.Button, { type: "secondary" },
+    return BottomSheet.renderAtlantisButtonTarget(React.createElement(Button.Button, { type: "secondary" },
         React.createElement(Button.Button.Label, null, children)));
 }
 const MenuItemContext = React.createContext(null);
@@ -529,7 +484,7 @@ const BottomSheetTrigger = React.forwardRef(function BottomSheetTrigger({ ariaLa
         UNSAFE_className,
         UNSAFE_style,
     });
-    return (React.createElement(MenuSubmenuTrigger$1.DrawerTrigger, { "aria-label": ariaLabel, className: classnames(styles.triggerWrapper, resolvedBaseProps.className), style: resolvedBaseProps.style, render: resolveMenuTriggerRender({ children, render }), ref: ref }));
+    return (React.createElement(ScrollAreaViewport.DrawerTrigger, { "aria-label": ariaLabel, className: classnames(styles.triggerWrapper, resolvedBaseProps.className), style: resolvedBaseProps.style, render: resolveMenuTriggerRender({ children, render }), ref: ref }));
 });
 function BottomSheetContent({ children, style, className, UNSAFE_style, UNSAFE_className, }) {
     const { focusModalityRef, submenuOpen } = useBottomSheetContext();
@@ -675,7 +630,7 @@ const BottomSheetSubmenuTrigger = React.forwardRef(function BottomSheetSubmenuTr
     // header can read it the moment it mounts. Prefer the explicit textValue
     // used for type-to-select, and fall back to the rendered text content.
     titleRef.current = textValue !== null && textValue !== void 0 ? textValue : getTextContent(children).trim();
-    return (React.createElement(MenuSubmenuTrigger$1.DrawerTrigger, Object.assign({ ref: ref, role: "menuitem", "aria-haspopup": "menu", "data-highlighted": isHighlighted ? "" : undefined, className: classnames(styles.action, styles.composableItem, {
+    return (React.createElement(ScrollAreaViewport.DrawerTrigger, Object.assign({ ref: ref, role: "menuitem", "aria-haspopup": "menu", "data-highlighted": isHighlighted ? "" : undefined, className: classnames(styles.action, styles.composableItem, {
             [styles.composableItemNoLeadingSlot]: !hasLeadingContent,
         }, resolvedBaseProps.className), style: resolvedBaseProps.style, nativeButton: true }, interactionProps, { render: React.createElement("button", { type: "button" }) }),
         children,

package/dist/Menu-es.js

@@ -2,7 +2,7 @@ import React__default, { useState, useRef, useId, useMemo } from 'react';
 import { useWindowDimensions, useRefocusOnActivator } from '@jobber/hooks';
 import classnames from 'classnames';
 import { AnimatePresence, motion } from 'framer-motion';
-import { u as useFloating, c as useDismiss, k as useListNavigation, d as useInteractions, F as FloatingPortal } from './floating-ui.react-es.js';
+import { u as useFloating, c as useDismiss, g as useListNavigation, d as useInteractions, F as FloatingPortal } from './floating-ui.react-es.js';
 import { B as Button } from './Button-es.js';
 import { T as Typography } from './Typography-es.js';
 import { I as Icon } from './Icon-es.js';
@@ -10,10 +10,10 @@ import { f as formFieldFocusAttribute } from './useFormFieldFocus-es.js';
 import { c as calculateMaxHeight } from './maxHeight-es.js';
 import { o as offset, f as flip, d as size, b as autoUpdate } from './floating-ui.react-dom-es.js';
 import { m as mergeProps } from './useRenderElement-es.js';
-import { _ as __rest } from './tslib.es6-es.js';
-import { B as BottomSheet } from './BottomSheet-es.js';
+import { n as normalizeBaseUiButtonProps, i as isAtlantisButtonRenderTarget, s as stripNativeTypeFromButtonRenderTarget, r as renderAtlantisButtonTarget, B as BottomSheet } from './BottomSheet-es.js';
 import { O as OverlaySeparator } from './OverlaySeparator-es.js';
-import { D as DrawerTrigger, a as DrawerTitle, b as DrawerClose, M as MenuTrigger$1, c as MenuLinkItem, d as MenuItem$1, e as MenuRadioItem$1, f as MenuRadioItemIndicator, g as MenuSubmenuTrigger$1, h as MenuRoot, i as MenuPortal$1, j as MenuPositioner, k as MenuPopup, l as MenuRadioGroup$1, m as MenuGroup$1, n as MenuSubmenuRoot, o as MenuGroupLabel$1 } from './MenuSubmenuTrigger-es.js';
+import { D as DrawerTrigger } from './ScrollAreaViewport-es.js';
+import { D as DrawerTitle, a as DrawerClose, M as MenuTrigger$1, b as MenuLinkItem, c as MenuItem$1, d as MenuRadioItem$1, e as MenuRadioItemIndicator, f as MenuSubmenuTrigger$1, g as MenuRoot, h as MenuPortal$1, i as MenuPositioner, j as MenuPopup, k as MenuRadioGroup$1, l as MenuGroup$1, m as MenuSubmenuRoot, n as MenuGroupLabel$1 } from './MenuSubmenuTrigger-es.js';
 
 var styles$2 = {"wrapper":"h-nk89U2n6Q-","floatingContainer":"krpkWzoaVcc-","menu":"_7sU7mp1w0jM-","legacySection":"_4x-vvEmn4gM-","separator":"i0QNcs4S-wk-","triggerWrapper":"_7CsejipGrzM-","ariaMenu":"bO7lGVQC42c-","ariaItem":"u6fDgbWmPck-","ariaSection":"-TSNrZBKZJI-","ariaSectionHeader":"zs7dS2pKjEw-","sectionHeader":"MZJgunQcmdQ-","legacyAction":"_-1GOlrzd098-","action":"NYXV5w4pd0c-","destructive":"baYK2zQ6-GA-","overlay":"A7T14ALVEKg-","fullWidth":"Lgbn9IRPI5Y-","screenReaderOnly":"o-ps580KdWI-","spinning":"f1oTdSTeUOM-"};
 
@@ -210,51 +210,6 @@ function mergeUnsafeProps(props) {
     });
 }
 
-function assignRef(ref, instance) {
-    if (!ref) {
-        return;
-    }
-    if (typeof ref === "function") {
-        ref(instance);
-        return;
-    }
-    ref.current = instance;
-}
-function mergeRefs(...refs) {
-    return (instance) => {
-        refs.forEach(ref => {
-            assignRef(ref, instance);
-        });
-    };
-}
-function getElementRef(element) {
-    return element.ref;
-}
-function normalizeBaseUiButtonProps(props) {
-    const rest = __rest(props, ["type"]);
-    return rest;
-}
-function isAtlantisButtonRenderTarget(element) {
-    return React__default.isValidElement(element) && element.type === Button;
-}
-function renderAtlantisButtonTarget(element) {
-    return function renderButtonTarget(props) {
-        const mergedProps = mergeProps(normalizeBaseUiButtonProps(props), element.props);
-        return (React__default.createElement(Button, Object.assign({}, mergedProps, { ref: mergeRefs(props.ref, getElementRef(element)), key: element.key })));
-    };
-}
-function stripNativeTypeFromButtonRenderTarget(element) {
-    const nativeType = element.props.type;
-    if (nativeType !== "button" &&
-        nativeType !== "submit" &&
-        nativeType !== "reset") {
-        return element;
-    }
-    return React__default.cloneElement(element, {
-        type: undefined,
-    });
-}
-
 // New composable menu pieces prefer standard DOM props, but we still accept the
 // old UNSAFE_* names during the migration window. Base UI's merge semantics let
 // either API path continue to work while standard props still win on conflicts.