@jobber/components 9.0.0 → 9.2.0

package/dist/Modal/index.cjs

@@ -6,6 +6,7 @@ var classnames = require('classnames');
 var framerMotion = require('framer-motion');
 var jobberHooks = require('@jobber/hooks');
 var nestedEscape = require('../nestedEscape-cjs.js');
+var useAtlantisI18n = require('../useAtlantisI18n-cjs.js');
 var Heading = require('../Heading-cjs.js');
 var Button = require('../Button-cjs.js');
 var ButtonDismiss = require('../ButtonDismiss-cjs.js');
@@ -13,6 +14,7 @@ var noop = require('../noop-cjs.js');
 var floatingUi_react = require('../floating-ui.react-cjs.js');
 var identity = require('../identity-cjs.js');
 var AtlantisPortalContent = require('../AtlantisPortalContent-cjs.js');
+require('../AtlantisContext-cjs.js');
 require('../Typography-cjs.js');
 require('../tslib.es6-cjs.js');
 require('react-router-dom');
@@ -38,6 +40,13 @@ var sizes = {"small":"BSZvIAUzFEU-","large":"-ydIALYVvGg-","fullScreen":"_9wD-Ta
 
 const MODAL_HEADER_ID = "ATL-Modal-Header";
 
+const modalMessages = useAtlantisI18n.defineMessages({
+    closeModal: {
+        en: "Close modal",
+        es: "Cerrar modal",
+    },
+});
+
 function ModalLegacy({ open = false, title, size, dismissible = true, children, primaryAction, secondaryAction, tertiaryAction, onRequestClose, ariaLabel, }) {
     const modalClassName = classnames(styles$1.modal, size && sizes[size]);
     const containerClassName = classnames(styles$1.container, size === "fullScreen" && styles$1.containerFullScreen);
@@ -67,10 +76,11 @@ function ModalLegacy({ open = false, title, size, dismissible = true, children,
         : template;
 }
 function Header({ title, dismissible, onRequestClose }) {
+    const { t } = useAtlantisI18n.useAtlantisI18n(modalMessages);
     return (React.createElement("div", { className: styles$1.header, "data-testid": "modal-header" },
         React.createElement(Heading.Heading, { level: 2, id: MODAL_HEADER_ID }, title),
         dismissible && (React.createElement("div", { className: styles$1.closeButton },
-            React.createElement(ButtonDismiss.ButtonDismiss, { onClick: onRequestClose, ariaLabel: "Close modal" })))));
+            React.createElement(ButtonDismiss.ButtonDismiss, { onClick: onRequestClose, ariaLabel: t("closeModal") })))));
 }
 function Actions({ primary, secondary, tertiary }) {
     const shouldShow = primary != undefined || secondary != undefined || tertiary != undefined;
@@ -197,13 +207,14 @@ function useModalStyles(size) {
 function ModalHeader({ title, children }) {
     const { header, dismissButton } = useModalStyles();
     const { dismissible, onRequestClose, modalLabelledBy } = useModalContext();
+    const { t } = useAtlantisI18n.useAtlantisI18n(modalMessages);
     if (children) {
         return React.createElement(React.Fragment, null, children);
     }
     return (React.createElement("div", { className: header, "data-testid": MODAL_HEADER_ID },
         React.createElement(Heading.Heading, { level: 2, id: modalLabelledBy }, title),
         dismissible && (React.createElement("div", { className: dismissButton },
-            React.createElement(ButtonDismiss.ButtonDismiss, { onClick: onRequestClose, ariaLabel: "Close modal" })))));
+            React.createElement(ButtonDismiss.ButtonDismiss, { onClick: onRequestClose, ariaLabel: t("closeModal") })))));
 }
 function ModalActions({ primary, secondary, tertiary, }) {
     const { actionBar, rightAction, leftAction } = useModalStyles();

package/dist/Modal/index.mjs

@@ -4,6 +4,7 @@ import classnames from 'classnames';
 import { AnimatePresence, motion } from 'framer-motion';
 import { useRefocusOnActivator, useFocusTrap } from '@jobber/hooks';
 import { a as addModalEscapeContainment } from '../nestedEscape-es.js';
+import { d as defineMessages, u as useAtlantisI18n } from '../useAtlantisI18n-es.js';
 import { H as Heading } from '../Heading-es.js';
 import { B as Button } from '../Button-es.js';
 import { B as ButtonDismiss } from '../ButtonDismiss-es.js';
@@ -11,6 +12,7 @@ import { n as noop } from '../noop-es.js';
 import { b as useFloatingNodeId, u as useFloating, c as useDismiss, h as useRole, d as useInteractions, a as useFloatingParentNodeId, e as FloatingTree, f as FloatingNode, F as FloatingPortal, i as FloatingFocusManager, j as FloatingOverlay } from '../floating-ui.react-es.js';
 import { b as identity } from '../identity-es.js';
 import { A as AtlantisPortalContent } from '../AtlantisPortalContent-es.js';
+import '../AtlantisContext-es.js';
 import '../Typography-es.js';
 import '../tslib.es6-es.js';
 import 'react-router-dom';
@@ -36,6 +38,13 @@ var sizes = {"small":"BSZvIAUzFEU-","large":"-ydIALYVvGg-","fullScreen":"_9wD-Ta
 
 const MODAL_HEADER_ID = "ATL-Modal-Header";
 
+const modalMessages = defineMessages({
+    closeModal: {
+        en: "Close modal",
+        es: "Cerrar modal",
+    },
+});
+
 function ModalLegacy({ open = false, title, size, dismissible = true, children, primaryAction, secondaryAction, tertiaryAction, onRequestClose, ariaLabel, }) {
     const modalClassName = classnames(styles$1.modal, size && sizes[size]);
     const containerClassName = classnames(styles$1.container, size === "fullScreen" && styles$1.containerFullScreen);
@@ -65,10 +74,11 @@ function ModalLegacy({ open = false, title, size, dismissible = true, children,
         : template;
 }
 function Header({ title, dismissible, onRequestClose }) {
+    const { t } = useAtlantisI18n(modalMessages);
     return (React__default.createElement("div", { className: styles$1.header, "data-testid": "modal-header" },
         React__default.createElement(Heading, { level: 2, id: MODAL_HEADER_ID }, title),
         dismissible && (React__default.createElement("div", { className: styles$1.closeButton },
-            React__default.createElement(ButtonDismiss, { onClick: onRequestClose, ariaLabel: "Close modal" })))));
+            React__default.createElement(ButtonDismiss, { onClick: onRequestClose, ariaLabel: t("closeModal") })))));
 }
 function Actions({ primary, secondary, tertiary }) {
     const shouldShow = primary != undefined || secondary != undefined || tertiary != undefined;
@@ -195,13 +205,14 @@ function useModalStyles(size) {
 function ModalHeader({ title, children }) {
     const { header, dismissButton } = useModalStyles();
     const { dismissible, onRequestClose, modalLabelledBy } = useModalContext();
+    const { t } = useAtlantisI18n(modalMessages);
     if (children) {
         return React__default.createElement(React__default.Fragment, null, children);
     }
     return (React__default.createElement("div", { className: header, "data-testid": MODAL_HEADER_ID },
         React__default.createElement(Heading, { level: 2, id: modalLabelledBy }, title),
         dismissible && (React__default.createElement("div", { className: dismissButton },
-            React__default.createElement(ButtonDismiss, { onClick: onRequestClose, ariaLabel: "Close modal" })))));
+            React__default.createElement(ButtonDismiss, { onClick: onRequestClose, ariaLabel: t("closeModal") })))));
 }
 function ModalActions({ primary, secondary, tertiary, }) {
     const { actionBar, rightAction, leftAction } = useModalStyles();

package/dist/Page/index.cjs

@@ -24,6 +24,8 @@ require('../floating-ui.utils.dom-cjs.js');
 require('../floating-ui.utils-cjs.js');
 require('react-dom');
 require('../floating-ui.react-dom-cjs.js');
+require('../useAtlantisI18n-cjs.js');
+require('../AtlantisContext-cjs.js');
 require('../useFormFieldFocus-cjs.js');
 require('../maxHeight-cjs.js');
 require('../useRenderElement-cjs.js');

package/dist/Page/index.mjs

@@ -22,6 +22,8 @@ import '../floating-ui.utils.dom-es.js';
 import '../floating-ui.utils-es.js';
 import 'react-dom';
 import '../floating-ui.react-dom-es.js';
+import '../useAtlantisI18n-es.js';
+import '../AtlantisContext-es.js';
 import '../useFormFieldFocus-es.js';
 import '../maxHeight-es.js';
 import '../useRenderElement-es.js';

package/dist/Popover/Popover.messages.d.ts

@@ -0,0 +1,6 @@
+export declare const popoverMessages: {
+    closeDialog: {
+        en: string;
+        es: string;
+    };
+};

package/dist/Popover/index.cjs

@@ -23,6 +23,8 @@ require('../_baseFor-cjs.js');
 require('../keysIn-cjs.js');
 require('../_isIterateeCall-cjs.js');
 require('../_setToString-cjs.js');
+require('../useAtlantisI18n-cjs.js');
+require('../AtlantisContext-cjs.js');
 require('../ButtonDismiss-cjs.js');
 require('../Button-cjs.js');
 require('react-router-dom');

package/dist/Popover/index.mjs

@@ -21,6 +21,8 @@ import '../_baseFor-es.js';
 import '../keysIn-es.js';
 import '../_isIterateeCall-es.js';
 import '../_setToString-es.js';
+import '../useAtlantisI18n-es.js';
+import '../AtlantisContext-es.js';
 import '../ButtonDismiss-es.js';
 import '../Button-es.js';
 import 'react-router-dom';

package/dist/Popover-cjs.js

@@ -7,6 +7,7 @@ var floatingUi_react = require('./floating-ui.react-cjs.js');
 var jobberHooks = require('@jobber/hooks');
 var floatingUi_reactDom = require('./floating-ui.react-dom-cjs.js');
 var AtlantisPortalContent = require('./AtlantisPortalContent-cjs.js');
+var useAtlantisI18n = require('./useAtlantisI18n-cjs.js');
 var ButtonDismiss = require('./ButtonDismiss-cjs.js');
 
 const POPOVER_OFFSET = 10;
@@ -113,6 +114,13 @@ function PopoverWrapper({ children, setFloatingElement, UNSAFE_className, UNSAFE
     return React.createElement(floatingUi_react.FloatingPortal, null, content);
 }
 
+const popoverMessages = useAtlantisI18n.defineMessages({
+    closeDialog: {
+        en: "Close dialog",
+        es: "Cerrar diálogo",
+    },
+});
+
 function Popover({ onRequestClose, children, attachTo, open, preferredPlacement = "auto", UNSAFE_className, UNSAFE_style, }) {
     return (React.createElement(Popover.Provider, { attachTo: attachTo, open: open, preferredPlacement: preferredPlacement, UNSAFE_className: UNSAFE_className, UNSAFE_style: UNSAFE_style },
         React.createElement(Popover.DismissButton, { UNSAFE_className: UNSAFE_className, UNSAFE_style: UNSAFE_style, onClick: onRequestClose }),
@@ -153,7 +161,8 @@ Popover.DismissButton = function PopoverDismissButton(props) {
     const { UNSAFE_className, UNSAFE_style, children } = props, dismissButtonProps = tslib_es6.__rest(props, ["UNSAFE_className", "UNSAFE_style", "children"]);
     const popoverStyles = usePopoverStyles();
     const classes = classnames(popoverStyles.dismissButton, UNSAFE_className === null || UNSAFE_className === void 0 ? void 0 : UNSAFE_className.dismissButtonContainer);
-    return (React.createElement("div", { className: classes, style: (_a = UNSAFE_style === null || UNSAFE_style === void 0 ? void 0 : UNSAFE_style.dismissButtonContainer) !== null && _a !== void 0 ? _a : {}, "data-testid": "ATL-Popover-Dismiss-Button-Container" }, children !== null && children !== void 0 ? children : (React.createElement(ButtonDismiss.ButtonDismiss, Object.assign({ ariaLabel: "Close dialog" }, dismissButtonProps)))));
+    const { t } = useAtlantisI18n.useAtlantisI18n(popoverMessages);
+    return (React.createElement("div", { className: classes, style: (_a = UNSAFE_style === null || UNSAFE_style === void 0 ? void 0 : UNSAFE_style.dismissButtonContainer) !== null && _a !== void 0 ? _a : {}, "data-testid": "ATL-Popover-Dismiss-Button-Container" }, children !== null && children !== void 0 ? children : (React.createElement(ButtonDismiss.ButtonDismiss, Object.assign({ ariaLabel: t("closeDialog") }, dismissButtonProps)))));
 };
 
 exports.Popover = Popover;

package/dist/Popover-es.js

@@ -5,6 +5,7 @@ import { u as useFloating, F as FloatingPortal } from './floating-ui.react-es.js
 import { useRefocusOnActivator } from '@jobber/hooks';
 import { a as arrow, b as autoUpdate, o as offset, s as shift, l as limitShift, c as autoPlacement, f as flip } from './floating-ui.react-dom-es.js';
 import { A as AtlantisPortalContent } from './AtlantisPortalContent-es.js';
+import { d as defineMessages, u as useAtlantisI18n } from './useAtlantisI18n-es.js';
 import { B as ButtonDismiss } from './ButtonDismiss-es.js';
 
 const POPOVER_OFFSET = 10;
@@ -111,6 +112,13 @@ function PopoverWrapper({ children, setFloatingElement, UNSAFE_className, UNSAFE
     return React__default.createElement(FloatingPortal, null, content);
 }
 
+const popoverMessages = defineMessages({
+    closeDialog: {
+        en: "Close dialog",
+        es: "Cerrar diálogo",
+    },
+});
+
 function Popover({ onRequestClose, children, attachTo, open, preferredPlacement = "auto", UNSAFE_className, UNSAFE_style, }) {
     return (React__default.createElement(Popover.Provider, { attachTo: attachTo, open: open, preferredPlacement: preferredPlacement, UNSAFE_className: UNSAFE_className, UNSAFE_style: UNSAFE_style },
         React__default.createElement(Popover.DismissButton, { UNSAFE_className: UNSAFE_className, UNSAFE_style: UNSAFE_style, onClick: onRequestClose }),
@@ -151,7 +159,8 @@ Popover.DismissButton = function PopoverDismissButton(props) {
     const { UNSAFE_className, UNSAFE_style, children } = props, dismissButtonProps = __rest(props, ["UNSAFE_className", "UNSAFE_style", "children"]);
     const popoverStyles = usePopoverStyles();
     const classes = classnames(popoverStyles.dismissButton, UNSAFE_className === null || UNSAFE_className === void 0 ? void 0 : UNSAFE_className.dismissButtonContainer);
-    return (React__default.createElement("div", { className: classes, style: (_a = UNSAFE_style === null || UNSAFE_style === void 0 ? void 0 : UNSAFE_style.dismissButtonContainer) !== null && _a !== void 0 ? _a : {}, "data-testid": "ATL-Popover-Dismiss-Button-Container" }, children !== null && children !== void 0 ? children : (React__default.createElement(ButtonDismiss, Object.assign({ ariaLabel: "Close dialog" }, dismissButtonProps)))));
+    const { t } = useAtlantisI18n(popoverMessages);
+    return (React__default.createElement("div", { className: classes, style: (_a = UNSAFE_style === null || UNSAFE_style === void 0 ? void 0 : UNSAFE_style.dismissButtonContainer) !== null && _a !== void 0 ? _a : {}, "data-testid": "ATL-Popover-Dismiss-Button-Container" }, children !== null && children !== void 0 ? children : (React__default.createElement(ButtonDismiss, Object.assign({ ariaLabel: t("closeDialog") }, dismissButtonProps)))));
 };
 
 export { Popover as P, usePopoverStyles as a, usePopoverContext as u };

package/dist/common.messages-cjs.js

@@ -0,0 +1,20 @@
+'use strict';
+
+var useAtlantisI18n = require('./useAtlantisI18n-cjs.js');
+
+const commonMessages = useAtlantisI18n.defineMessages({
+    Loading: {
+        en: "Loading",
+        es: "Cargando",
+    },
+    Confirm: {
+        en: "Confirm",
+        es: "Confirmar",
+    },
+    Cancel: {
+        en: "Cancel",
+        es: "Cancelar",
+    },
+});
+
+exports.commonMessages = commonMessages;

package/dist/common.messages-es.js

@@ -0,0 +1,18 @@
+import { d as defineMessages } from './useAtlantisI18n-es.js';
+
+const commonMessages = defineMessages({
+    Loading: {
+        en: "Loading",
+        es: "Cargando",
+    },
+    Confirm: {
+        en: "Confirm",
+        es: "Confirmar",
+    },
+    Cancel: {
+        en: "Cancel",
+        es: "Cancelar",
+    },
+});
+
+export { commonMessages as c };

package/dist/docs/ConfirmationModal/ConfirmationModal.md

@@ -111,9 +111,9 @@ language should be direct and honest about the impact without being alarming.
 
 | Prop | Type | Required | Default | Description |
 |------|------|----------|---------|-------------|
-| `cancelLabel` | `string` | No | `Cancel` | Label for the cancel button. |
+| `cancelLabel` | `string` | No | — | Label for the cancel button. |
 | `children` | `ReactNode` | No | — | Child component. Not displayed if **message** prop is passed. |
-| `confirmLabel` | `string` | No | `Confirm` | Label for the confirm button. |
+| `confirmLabel` | `string` | No | — | Label for the confirm button. |
 | `message` | `string` | No | — | Text or rich text content for the body of the modal. Not displayed if **children** prop is passed. |
 | `onCancel` | `() => void` | No | — | Callback for when the cancel button is pressed. |
 | `onConfirm` | `() => void` | No | — | Callback for when the confirm button is pressed. |

package/dist/docs/LightBox/LightBox.md

@@ -230,7 +230,7 @@ window.HTMLElement.prototype.scrollIntoView = scrollIntoViewMock;
 
 | Prop | Type | Required | Default | Description |
 |------|------|----------|---------|-------------|
-| `ariaLabel` | `string` | No | `Open image in new tab` | Accessible label for the action, also used as the tooltip message. |
+| `ariaLabel` | `string` | No | `"Open image in new tab"` | Accessible label for the action, also used as the tooltip message. |
 
 #### LightBox.Overlay
 

package/dist/index.cjs

@@ -107,11 +107,11 @@ require('react/jsx-runtime');
 require('react-dom');
 require('./floating-ui.react-dom-cjs.js');
 require('./maxHeight-cjs.js');
+require('./useAtlantisI18n-cjs.js');
 require('./mergeRefs-cjs.js');
 require('./filterDataAttributes-cjs.js');
 require('color');
 require('./tslib.es6-cjs.js');
-require('./useAtlantisI18n-cjs.js');
 require('react-router-dom');
 require('./getMappedAtlantisSpaceToken-cjs.js');
 require('./useChildComponent-cjs.js');
@@ -135,6 +135,7 @@ require('./FilterPickerAction-cjs.js');
 require('./FilterPickerTrigger-cjs.js');
 require('./noop-cjs.js');
 require('./FilterPickerActivator-cjs.js');
+require('./common.messages-cjs.js');
 require('./index-cjs.js');
 require('./DataList.module-cjs.js');
 require('./DataListTotalCount-cjs.js');

package/dist/index.mjs

@@ -105,11 +105,11 @@ import 'react/jsx-runtime';
 import 'react-dom';
 import './floating-ui.react-dom-es.js';
 import './maxHeight-es.js';
+import './useAtlantisI18n-es.js';
 import './mergeRefs-es.js';
 import './filterDataAttributes-es.js';
 import 'color';
 import './tslib.es6-es.js';
-import './useAtlantisI18n-es.js';
 import 'react-router-dom';
 import './getMappedAtlantisSpaceToken-es.js';
 import './useChildComponent-es.js';
@@ -133,6 +133,7 @@ import './FilterPickerAction-es.js';
 import './FilterPickerTrigger-es.js';
 import './noop-es.js';
 import './FilterPickerActivator-es.js';
+import './common.messages-es.js';
 import './index-es.js';
 import './DataList.module-es.js';
 import './DataListTotalCount-es.js';

package/dist/sharedHelpers/i18n/index.cjs

@@ -1,24 +1,12 @@
 'use strict';
 
+var common_messages = require('../../common.messages-cjs.js');
 var useAtlantisI18n = require('../../useAtlantisI18n-cjs.js');
 require('react');
 require('../../AtlantisContext-cjs.js');
 
-const commonMessages = useAtlantisI18n.defineMessages({
-    Loading: {
-        en: "Loading",
-        es: "Cargando",
-    },
-    Confirm: {
-        en: "Confirm",
-        es: "Confirmar",
-    },
-    Cancel: {
-        en: "Cancel",
-        es: "Cancelar",
-    },
-});
 
+
+exports.commonMessages = common_messages.commonMessages;
 exports.defineMessages = useAtlantisI18n.defineMessages;
 exports.useAtlantisI18n = useAtlantisI18n.useAtlantisI18n;
-exports.commonMessages = commonMessages;

package/dist/sharedHelpers/i18n/index.mjs

@@ -1,21 +1,4 @@
-import { d as defineMessages } from '../../useAtlantisI18n-es.js';
-export { u as useAtlantisI18n } from '../../useAtlantisI18n-es.js';
+export { c as commonMessages } from '../../common.messages-es.js';
+export { d as defineMessages, u as useAtlantisI18n } from '../../useAtlantisI18n-es.js';
 import 'react';
 import '../../AtlantisContext-es.js';
-
-const commonMessages = defineMessages({
-    Loading: {
-        en: "Loading",
-        es: "Cargando",
-    },
-    Confirm: {
-        en: "Confirm",
-        es: "Confirmar",
-    },
-    Cancel: {
-        en: "Cancel",
-        es: "Cancelar",
-    },
-});
-
-export { commonMessages, defineMessages };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jobber/components",
-  "version": "9.0.0",
+  "version": "9.2.0",
   "license": "MIT",
   "type": "module",
   "main": "dist/index.cjs",
@@ -545,5 +545,5 @@
     "> 1%",
     "IE 10"
   ],
-  "gitHead": "71ed27026cd539889c5ce6c627bd74a8d283112e"
+  "gitHead": "93071542338ffaca3cd81bf6701a1ac8319e5341"
 }