@jobber/components 9.15.5 → 9.16.1

package/dist/Chip/index.cjs

@@ -18,7 +18,6 @@ require('../Tooltip-cjs.js');
 require('../floating-ui.react-cjs.js');
 require('react/jsx-runtime');
 require('react-dom');
-require('framer-motion');
 
 
 

package/dist/Chip/index.mjs

@@ -16,4 +16,3 @@ import '../Tooltip-es.js';
 import '../floating-ui.react-es.js';
 import 'react/jsx-runtime';
 import 'react-dom';
-import 'framer-motion';

package/dist/Chips/InternalChipDismissible/index.cjs

@@ -38,7 +38,6 @@ require('../../Avatar-cjs.js');
 require('color');
 require('../../useChildComponent-cjs.js');
 require('../../Tooltip-cjs.js');
-require('framer-motion');
 
 
 

package/dist/Chips/InternalChipDismissible/index.mjs

@@ -36,4 +36,3 @@ import '../../Avatar-es.js';
 import 'color';
 import '../../useChildComponent-es.js';
 import '../../Tooltip-es.js';
-import 'framer-motion';

package/dist/Chips/index.cjs

@@ -39,7 +39,6 @@ require('../Avatar-cjs.js');
 require('color');
 require('../useChildComponent-cjs.js');
 require('../Tooltip-cjs.js');
-require('framer-motion');
 
 /**
  * @deprecated Use Autocomplete with the "multiple" prop instead of ChipDismissible.

package/dist/Chips/index.mjs

@@ -37,7 +37,6 @@ import '../Avatar-es.js';
 import 'color';
 import '../useChildComponent-es.js';
 import '../Tooltip-es.js';
-import 'framer-motion';
 
 /**
  * @deprecated Use Autocomplete with the "multiple" prop instead of ChipDismissible.

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

@@ -7,7 +7,6 @@ require('classnames');
 require('../../../floating-ui.react-cjs.js');
 require('react/jsx-runtime');
 require('react-dom');
-require('framer-motion');
 require('@jobber/hooks');
 require('../../../Button-cjs.js');
 require('../../../tslib.es6-cjs.js');
@@ -32,6 +31,7 @@ require('../../../Heading-cjs.js');
 require('../../../DataListLayoutContext-cjs2.js');
 require('../../../DataListItemActionsOverflow-cjs.js');
 require('../../../DataListActionsMenu-cjs.js');
+require('framer-motion');
 
 
 

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

@@ -5,7 +5,6 @@ import 'classnames';
 import '../../../floating-ui.react-es.js';
 import 'react/jsx-runtime';
 import 'react-dom';
-import 'framer-motion';
 import '@jobber/hooks';
 import '../../../Button-es.js';
 import '../../../tslib.es6-es.js';
@@ -30,3 +29,4 @@ import '../../../Heading-es.js';
 import '../../../DataListLayoutContext-es2.js';
 import '../../../DataListItemActionsOverflow-es.js';
 import '../../../DataListActionsMenu-es.js';
+import 'framer-motion';

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

@@ -11,7 +11,6 @@ require('classnames');
 require('../../../floating-ui.react-cjs.js');
 require('react/jsx-runtime');
 require('react-dom');
-require('framer-motion');
 require('@jobber/hooks');
 require('../../../Button-cjs.js');
 require('../../../tslib.es6-cjs.js');
@@ -33,6 +32,7 @@ require('../../../Heading-cjs.js');
 require('../../../DataListLayoutContext-cjs2.js');
 require('../../../DataListItemActionsOverflow-cjs.js');
 require('../../../DataListActionsMenu-cjs.js');
+require('framer-motion');
 require('../../../useResponsiveSizing-cjs.js');
 
 

package/dist/DataList/components/DataListBulkActions/index.mjs

@@ -9,7 +9,6 @@ import 'classnames';
 import '../../../floating-ui.react-es.js';
 import 'react/jsx-runtime';
 import 'react-dom';
-import 'framer-motion';
 import '@jobber/hooks';
 import '../../../Button-es.js';
 import '../../../tslib.es6-es.js';
@@ -31,4 +30,5 @@ import '../../../Heading-es.js';
 import '../../../DataListLayoutContext-es2.js';
 import '../../../DataListItemActionsOverflow-es.js';
 import '../../../DataListActionsMenu-es.js';
+import 'framer-motion';
 import '../../../useResponsiveSizing-es.js';

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

@@ -13,9 +13,9 @@ require('../../../Tooltip-cjs.js');
 require('../../../floating-ui.react-cjs.js');
 require('react/jsx-runtime');
 require('react-dom');
-require('framer-motion');
 require('@jobber/hooks');
 require('../../../DataListActionsMenu-cjs.js');
+require('framer-motion');
 require('../../../DataList.const-cjs.js');
 
 

package/dist/DataList/components/DataListItemActionsOverflow/index.mjs

@@ -11,7 +11,7 @@ import '../../../Tooltip-es.js';
 import '../../../floating-ui.react-es.js';
 import 'react/jsx-runtime';
 import 'react-dom';
-import 'framer-motion';
 import '@jobber/hooks';
 import '../../../DataListActionsMenu-es.js';
+import 'framer-motion';
 import '../../../DataList.const-es.js';

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

@@ -18,9 +18,9 @@ require('../../../Tooltip-cjs.js');
 require('../../../floating-ui.react-cjs.js');
 require('react/jsx-runtime');
 require('react-dom');
-require('framer-motion');
 require('@jobber/hooks');
 require('../../../DataListActionsMenu-cjs.js');
+require('framer-motion');
 require('../../../DataList.const-cjs.js');
 require('../../../Glimmer-cjs.js');
 require('../../../Content-cjs.js');

package/dist/DataList/components/DataListLayoutActions/index.mjs

@@ -16,9 +16,9 @@ import '../../../Tooltip-es.js';
 import '../../../floating-ui.react-es.js';
 import 'react/jsx-runtime';
 import 'react-dom';
-import 'framer-motion';
 import '@jobber/hooks';
 import '../../../DataListActionsMenu-es.js';
+import 'framer-motion';
 import '../../../DataList.const-es.js';
 import '../../../Glimmer-es.js';
 import '../../../Content-es.js';

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

@@ -20,7 +20,6 @@ require('../../../Tooltip-cjs.js');
 require('../../../floating-ui.react-cjs.js');
 require('react/jsx-runtime');
 require('react-dom');
-require('framer-motion');
 require('../../../FilterPickerProvider-cjs.js');
 require('../../../constants-cjs.js');
 

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

@@ -18,6 +18,5 @@ import '../../../Tooltip-es.js';
 import '../../../floating-ui.react-es.js';
 import 'react/jsx-runtime';
 import 'react-dom';
-import 'framer-motion';
 import '../../../FilterPickerProvider-es.js';
 import '../../../constants-es.js';

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

@@ -18,7 +18,6 @@ require('../../../Tooltip-cjs.js');
 require('../../../floating-ui.react-cjs.js');
 require('react/jsx-runtime');
 require('react-dom');
-require('framer-motion');
 require('../../../FilterPickerProvider-cjs.js');
 require('../../../FilterPicker.messages-cjs.js');
 

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

@@ -16,6 +16,5 @@ import '../../../Tooltip-es.js';
 import '../../../floating-ui.react-es.js';
 import 'react/jsx-runtime';
 import 'react-dom';
-import 'framer-motion';
 import '../../../FilterPickerProvider-es.js';
 import '../../../FilterPicker.messages-es.js';

package/dist/SideDrawer/SideDrawer.d.ts

@@ -27,6 +27,11 @@ interface SideDrawerProps extends PropsWithChildren {
      * @default false
      */
     readonly inline?: boolean;
+    /**
+     * Element where the SideDrawer portal should be rendered.
+     * @default document.body
+     */
+    readonly container?: HTMLElement | null;
     /**
      * **Use at your own risk:** Custom class names for specific elements. This should only be used as a
      * **last resort**. Using this may result in unexpected side effects.
@@ -44,7 +49,7 @@ interface SideDrawerProps extends PropsWithChildren {
         container?: CSSProperties;
     };
 }
-export declare function SideDrawer({ children, onRequestClose, open, variation, scrollDirection, inline, UNSAFE_className, UNSAFE_style, }: SideDrawerProps): React.JSX.Element | null;
+export declare function SideDrawer({ children, onRequestClose, open, variation, scrollDirection, inline, container, UNSAFE_className, UNSAFE_style, }: SideDrawerProps): React.JSX.Element | null;
 export declare namespace SideDrawer {
     var Title: typeof SideDrawerTitle;
     var Toolbar: typeof SideDrawerToolbar;

package/dist/SideDrawer-cjs.js

@@ -115,14 +115,15 @@ const useSideDrawerState = (open) => {
         noFooterShadow,
     };
 };
-function SideDrawer({ children, onRequestClose, open, variation = "base", scrollDirection, inline = false, UNSAFE_className, UNSAFE_style, }) {
+function SideDrawer({ children, onRequestClose, open, variation = "base", scrollDirection, inline = false, container, UNSAFE_className, UNSAFE_style, }) {
     var _a;
     const { ref, setRef, components, setComponents, slots, sideDrawerRef, headerShadowRef, noHeaderShadow, footerShadowRef, noFooterShadow, } = useSideDrawerState(open);
     const { t } = useAtlantisI18n.useAtlantisI18n(sideDrawerMessages);
     jobberHooks.useRefocusOnActivator(open);
-    const container = ((_a = globalThis.document) === null || _a === void 0 ? void 0 : _a.body) || null;
+    const body = ((_a = globalThis.document) === null || _a === void 0 ? void 0 : _a.body) || null;
+    const portalContainer = container || body;
     const isMounted = jobberHooks.useIsMounted();
-    if (!isMounted.current && !container)
+    if (!isMounted.current && !portalContainer)
         return null;
     const SideDrawerRender = (React.createElement(SideDrawerContext.Provider, { value: {
             actionPortal: ref === null || ref === void 0 ? void 0 : ref.querySelector(slots.actions.selector),
@@ -167,7 +168,7 @@ function SideDrawer({ children, onRequestClose, open, variation = "base", scroll
     if (inline) {
         return SideDrawerRender;
     }
-    return ReactDOM.createPortal(SideDrawerRender, container);
+    return ReactDOM.createPortal(SideDrawerRender, portalContainer);
     function handleKeyDown(event) {
         if (event.key === "Escape") {
             event.stopPropagation();

package/dist/SideDrawer-es.js

@@ -113,14 +113,15 @@ const useSideDrawerState = (open) => {
         noFooterShadow,
     };
 };
-function SideDrawer({ children, onRequestClose, open, variation = "base", scrollDirection, inline = false, UNSAFE_className, UNSAFE_style, }) {
+function SideDrawer({ children, onRequestClose, open, variation = "base", scrollDirection, inline = false, container, UNSAFE_className, UNSAFE_style, }) {
     var _a;
     const { ref, setRef, components, setComponents, slots, sideDrawerRef, headerShadowRef, noHeaderShadow, footerShadowRef, noFooterShadow, } = useSideDrawerState(open);
     const { t } = useAtlantisI18n(sideDrawerMessages);
     useRefocusOnActivator(open);
-    const container = ((_a = globalThis.document) === null || _a === void 0 ? void 0 : _a.body) || null;
+    const body = ((_a = globalThis.document) === null || _a === void 0 ? void 0 : _a.body) || null;
+    const portalContainer = container || body;
     const isMounted = useIsMounted();
-    if (!isMounted.current && !container)
+    if (!isMounted.current && !portalContainer)
         return null;
     const SideDrawerRender = (React__default.createElement(SideDrawerContext.Provider, { value: {
             actionPortal: ref === null || ref === void 0 ? void 0 : ref.querySelector(slots.actions.selector),
@@ -165,7 +166,7 @@ function SideDrawer({ children, onRequestClose, open, variation = "base", scroll
     if (inline) {
         return SideDrawerRender;
     }
-    return createPortal(SideDrawerRender, container);
+    return createPortal(SideDrawerRender, portalContainer);
     function handleKeyDown(event) {
         if (event.key === "Escape") {
             event.stopPropagation();

package/dist/Tooltip/index.cjs

@@ -6,7 +6,6 @@ require('classnames');
 require('../floating-ui.react-cjs.js');
 require('react/jsx-runtime');
 require('react-dom');
-require('framer-motion');
 require('@jobber/hooks');
 
 

package/dist/Tooltip/index.mjs

@@ -4,5 +4,4 @@ import 'classnames';
 import '../floating-ui.react-es.js';
 import 'react/jsx-runtime';
 import 'react-dom';
-import 'framer-motion';
 import '@jobber/hooks';

package/dist/Tooltip-cjs.js

@@ -3,10 +3,9 @@
 var React = require('react');
 var classnames = require('classnames');
 var floatingUi_react = require('./floating-ui.react-cjs.js');
-var framerMotion = require('framer-motion');
 var jobberHooks = require('@jobber/hooks');
 
-var styles = {"shadowActivator":"sZQ1M6tj8-c-","tooltipWrapper":"_0o-yEgfXmSQ-","tooltip":"Q1YfFqI71cw-","arrow":"ZP3ev-wT-OI-","top":"jlEmO6f6uHg-","bottom":"z9JQ-DR-QYc-","left":"zWATWgq3bS4-","right":"-tDm6lNCCic-","tooltipMessage":"djrmr4mADlA-","hidden":"p92TIli5Sgw-","spinning":"bobYmlUMnuY-"};
+var styles = {"shadowActivator":"sZQ1M6tj8-c-","tooltipWrapper":"_0o-yEgfXmSQ-","tooltip":"Q1YfFqI71cw-","tooltipFadeIn":"lVdPVB1BJ3s-","arrow":"ZP3ev-wT-OI-","top":"jlEmO6f6uHg-","bottom":"z9JQ-DR-QYc-","left":"zWATWgq3bS4-","right":"-tDm6lNCCic-","tooltipMessage":"djrmr4mADlA-","hidden":"p92TIli5Sgw-","spinning":"bobYmlUMnuY-"};
 
 const TOOLTIP_SHIFT_PADDING = 8;
 const TOOLTIP_ARROW_PADDING = 6;
@@ -51,10 +50,6 @@ function useTooltipPositioning({ preferredPlacement, }) {
     };
 }
 
-const variation = {
-    startOrStop: { opacity: 0 },
-    done: { opacity: 1 },
-};
 function Tooltip({ message, children, preferredPlacement = "top", setTabIndex = true, }) {
     var _a, _b, _c, _d;
     const [show, setShow] = React.useState(false);
@@ -76,11 +71,7 @@ function Tooltip({ message, children, preferredPlacement = "top", setTabIndex =
         React.createElement("span", { className: styles.shadowActivator, ref: shadowRef }),
         children,
         React.createElement(TooltipPortal, null, show && Boolean(message) && (React.createElement("div", { className: toolTipClassNames, style: floatingStyles.float, ref: setTooltipRef, role: "tooltip", hidden: isHidden, "data-placement": placement },
-            React.createElement(framerMotion.motion.div, { className: styles.tooltip, variants: variation, initial: "startOrStop", animate: "done", exit: "startOrStop", transition: {
-                    ease: "easeOut",
-                    duration: 0.15,
-                    delay: 0.3,
-                } },
+            React.createElement("div", { className: styles.tooltip },
                 React.createElement("p", { className: styles.tooltipMessage }, message),
                 React.createElement("div", { ref: setArrowRef, style: arrowStyles, className: styles.arrow })))))));
     function initializeListeners() {

package/dist/Tooltip-es.js

@@ -1,10 +1,9 @@
 import React__default, { useRef, useState } from 'react';
 import classnames from 'classnames';
 import { u as useFloating, s as shift, f as flip, a as arrow, h as hide, b as autoUpdate, l as limitShift, F as FloatingPortal } from './floating-ui.react-es.js';
-import { motion } from 'framer-motion';
 import { useSafeLayoutEffect, useIsMounted } from '@jobber/hooks';
 
-var styles = {"shadowActivator":"sZQ1M6tj8-c-","tooltipWrapper":"_0o-yEgfXmSQ-","tooltip":"Q1YfFqI71cw-","arrow":"ZP3ev-wT-OI-","top":"jlEmO6f6uHg-","bottom":"z9JQ-DR-QYc-","left":"zWATWgq3bS4-","right":"-tDm6lNCCic-","tooltipMessage":"djrmr4mADlA-","hidden":"p92TIli5Sgw-","spinning":"bobYmlUMnuY-"};
+var styles = {"shadowActivator":"sZQ1M6tj8-c-","tooltipWrapper":"_0o-yEgfXmSQ-","tooltip":"Q1YfFqI71cw-","tooltipFadeIn":"lVdPVB1BJ3s-","arrow":"ZP3ev-wT-OI-","top":"jlEmO6f6uHg-","bottom":"z9JQ-DR-QYc-","left":"zWATWgq3bS4-","right":"-tDm6lNCCic-","tooltipMessage":"djrmr4mADlA-","hidden":"p92TIli5Sgw-","spinning":"bobYmlUMnuY-"};
 
 const TOOLTIP_SHIFT_PADDING = 8;
 const TOOLTIP_ARROW_PADDING = 6;
@@ -49,10 +48,6 @@ function useTooltipPositioning({ preferredPlacement, }) {
     };
 }
 
-const variation = {
-    startOrStop: { opacity: 0 },
-    done: { opacity: 1 },
-};
 function Tooltip({ message, children, preferredPlacement = "top", setTabIndex = true, }) {
     var _a, _b, _c, _d;
     const [show, setShow] = useState(false);
@@ -74,11 +69,7 @@ function Tooltip({ message, children, preferredPlacement = "top", setTabIndex =
         React__default.createElement("span", { className: styles.shadowActivator, ref: shadowRef }),
         children,
         React__default.createElement(TooltipPortal, null, show && Boolean(message) && (React__default.createElement("div", { className: toolTipClassNames, style: floatingStyles.float, ref: setTooltipRef, role: "tooltip", hidden: isHidden, "data-placement": placement },
-            React__default.createElement(motion.div, { className: styles.tooltip, variants: variation, initial: "startOrStop", animate: "done", exit: "startOrStop", transition: {
-                    ease: "easeOut",
-                    duration: 0.15,
-                    delay: 0.3,
-                } },
+            React__default.createElement("div", { className: styles.tooltip },
                 React__default.createElement("p", { className: styles.tooltipMessage }, message),
                 React__default.createElement("div", { ref: setArrowRef, style: arrowStyles, className: styles.arrow })))))));
     function initializeListeners() {

package/dist/docs/InputFile/InputFile.md

@@ -221,6 +221,17 @@ For complete control over the layout, you can provide custom children:
 </InputFile>
 ```
 
+InputFile renders its built-in validation messages directly below the field, and
+that placement is not configurable. If InputFile is part of a larger composed
+input layout, consumers who need the validation message to align with that
+layout should manage that rule themselves and render
+[InputValidation](../InputValidation/InputValidation.md) from the surrounding UI.
+
+In practice, that usually means validating in `getUploadParams` or at the form
+level, and avoiding `maxFilesValidation`, `allowedTypes`, or `validator` for the
+same rule, since those use InputFile's built-in validation flow and will still
+render the default message below the field.
+
 ### Available subcomponents
 
 1. `InputFile.Button`: Upload button

package/dist/docs/SideDrawer/SideDrawer.md

@@ -166,6 +166,7 @@ SideSheet content.
 |------|------|----------|---------|-------------|
 | `onRequestClose` | `() => void` | Yes | — | Callback function to close the drawer. |
 | `open` | `boolean` | Yes | — | Whether or not the drawer is open. |
+| `container` | `HTMLElement` | No | `document.body` | Element where the SideDrawer portal should be rendered. |
 | `inline` | `boolean` | No | `false` | Changes whether the SideDrawer is positioned to the side of the viewport or inline with the content. |
 | `scrollDirection` | `"normal" | "reverse"` | No | — | Change the scrolling direction of the drawer. Useful for chat-like interfaces. |
 | `UNSAFE_className` | `{ container?: string; }` | No | — | **Use at your own risk:** Custom class names for specific elements. This should only be used as a **last resort**. Us... |

package/dist/styles.css

@@ -7267,6 +7267,8 @@ a._7BLGtYNuJOU-.zgRx3ehZ2z8-:hover {
   border-radius: 8px;
   border-radius: var(--radius-base);
   background-color: var(--tooltip--surface);
+  -webkit-animation: lVdPVB1BJ3s- 0.15s ease-out 0.3s both;
+          animation: lVdPVB1BJ3s- 0.15s ease-out 0.3s both;
 }
 
 .Q1YfFqI71cw- .ZP3ev-wT-OI-,
@@ -7356,6 +7358,26 @@ a._7BLGtYNuJOU-.zgRx3ehZ2z8-:hover {
   display: none;
 }
 
+@-webkit-keyframes lVdPVB1BJ3s- {
+  from {
+    opacity: 0;
+  }
+
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes lVdPVB1BJ3s- {
+  from {
+    opacity: 0;
+  }
+
+  to {
+    opacity: 1;
+  }
+}
+
 @-webkit-keyframes bobYmlUMnuY- {
   from {
     -webkit-transform: rotate(0deg);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jobber/components",
-  "version": "9.15.5",
+  "version": "9.16.1",
   "license": "MIT",
   "type": "module",
   "main": "dist/index.cjs",
@@ -548,5 +548,5 @@
     "> 1%",
     "IE 10"
   ],
-  "gitHead": "a9ac41dfb966649048fcaf7cce2db45f2569fc29"
+  "gitHead": "a307f2e7c79aa2126e687918ef072701b4152357"
 }