@jobber/components 9.2.0 → 9.4.0

package/dist/ProgressBar/index.mjs

@@ -1,3 +1,5 @@
 export { P as ProgressBar } from '../ProgressBar-es.js';
 import 'react';
 import 'classnames';
+import '../useAtlantisI18n-es.js';
+import '../AtlantisContext-es.js';

package/dist/ProgressBar-cjs.js

@@ -2,14 +2,26 @@
 
 var React = require('react');
 var classnames = require('classnames');
+var useAtlantisI18n = require('./useAtlantisI18n-cjs.js');
 
 var styles = {"ProgressBar":"p9AgTzIbTwY-","SteppedProgressBar":"w8NAw4ZMB6g-","wrapper":"d4oS-DGtcKA-","spinning":"f58JiDXlkHA-"};
 
 var sizes = {"smaller":"dylWWgubHwM-","small":"z92YJQrscvI-","base":"DKfNM1to61A-","spinning":"GHfs7cB4nQQ-"};
 
+const progressBarMessages = useAtlantisI18n.defineMessages({
+    steppedProgress: {
+        en: "progress, {current} out of {total}",
+        es: "progreso, {current} de {total}",
+    },
+});
+
 function ProgressBarStepped({ currentStep, totalSteps, percentage, size = "base", UNSAFE_className, UNSAFE_style, }) {
+    const { t } = useAtlantisI18n.useAtlantisI18n(progressBarMessages);
     const steppedProgressBarClassName = classnames(styles.ProgressBar, styles.SteppedProgressBar, sizes[size]);
-    const ariaLabel = `progress, ${currentStep} out of ${totalSteps}`;
+    const ariaLabel = t("steppedProgress", {
+        current: currentStep,
+        total: totalSteps,
+    });
     return (React.createElement("div", { role: "progressbar", className: classnames(styles.wrapper, UNSAFE_className), "data-testid": "progressbar-wrapper", style: UNSAFE_style, "aria-valuenow": percentage, "aria-valuetext": ariaLabel }, Array.from({ length: totalSteps }).map((_, index) => {
         const step = index + 1;
         const value = step <= currentStep ? 100 : 0;

package/dist/ProgressBar-es.js

@@ -1,13 +1,25 @@
 import React__default from 'react';
 import classnames from 'classnames';
+import { d as defineMessages, u as useAtlantisI18n } from './useAtlantisI18n-es.js';
 
 var styles = {"ProgressBar":"p9AgTzIbTwY-","SteppedProgressBar":"w8NAw4ZMB6g-","wrapper":"d4oS-DGtcKA-","spinning":"f58JiDXlkHA-"};
 
 var sizes = {"smaller":"dylWWgubHwM-","small":"z92YJQrscvI-","base":"DKfNM1to61A-","spinning":"GHfs7cB4nQQ-"};
 
+const progressBarMessages = defineMessages({
+    steppedProgress: {
+        en: "progress, {current} out of {total}",
+        es: "progreso, {current} de {total}",
+    },
+});
+
 function ProgressBarStepped({ currentStep, totalSteps, percentage, size = "base", UNSAFE_className, UNSAFE_style, }) {
+    const { t } = useAtlantisI18n(progressBarMessages);
     const steppedProgressBarClassName = classnames(styles.ProgressBar, styles.SteppedProgressBar, sizes[size]);
-    const ariaLabel = `progress, ${currentStep} out of ${totalSteps}`;
+    const ariaLabel = t("steppedProgress", {
+        current: currentStep,
+        total: totalSteps,
+    });
     return (React__default.createElement("div", { role: "progressbar", className: classnames(styles.wrapper, UNSAFE_className), "data-testid": "progressbar-wrapper", style: UNSAFE_style, "aria-valuenow": percentage, "aria-valuetext": ariaLabel }, Array.from({ length: totalSteps }).map((_, index) => {
         const step = index + 1;
         const value = step <= currentStep ? 100 : 0;

package/dist/Spinner/index.cjs

@@ -3,6 +3,9 @@
 var Spinner = require('../Spinner-cjs.js');
 require('react');
 require('classnames');
+require('../common.messages-cjs.js');
+require('../useAtlantisI18n-cjs.js');
+require('../AtlantisContext-cjs.js');
 
 
 

package/dist/Spinner/index.mjs

@@ -1,3 +1,6 @@
 export { S as Spinner } from '../Spinner-es.js';
 import 'react';
 import 'classnames';
+import '../common.messages-es.js';
+import '../useAtlantisI18n-es.js';
+import '../AtlantisContext-es.js';

package/dist/Spinner-cjs.js

@@ -2,6 +2,8 @@
 
 var React = require('react');
 var classnames = require('classnames');
+var common_messages = require('./common.messages-cjs.js');
+var useAtlantisI18n = require('./useAtlantisI18n-cjs.js');
 
 var styles = {"spinner":"_6hfmGZoXNyg-","animationSpin":"aT3CETCJ4hQ-","small":"bMfynkzmlL4-","inline":"NA68eWblbLo-","spinning":"aCBq1WrkI4M-"};
 
@@ -9,11 +11,12 @@ var styles = {"spinner":"_6hfmGZoXNyg-","animationSpin":"aT3CETCJ4hQ-","small":"
  * @deprecated Use `ActivityIndicator` instead.
  */
 function Spinner({ size = "base", inline }) {
+    const { t } = useAtlantisI18n.useAtlantisI18n(common_messages.commonMessages);
     const spinnerStyles = classnames(styles.spinner, {
         [styles.small]: size === "small",
         [styles.inline]: inline,
     });
-    return (React.createElement("div", { className: spinnerStyles, role: "alert", "aria-busy": true, "aria-label": "loading" }));
+    return (React.createElement("div", { className: spinnerStyles, role: "alert", "aria-busy": true, "aria-label": t("Loading") }));
 }
 
 exports.Spinner = Spinner;

package/dist/Spinner-es.js

@@ -1,5 +1,7 @@
 import React__default from 'react';
 import classnames from 'classnames';
+import { c as commonMessages } from './common.messages-es.js';
+import { u as useAtlantisI18n } from './useAtlantisI18n-es.js';
 
 var styles = {"spinner":"_6hfmGZoXNyg-","animationSpin":"aT3CETCJ4hQ-","small":"bMfynkzmlL4-","inline":"NA68eWblbLo-","spinning":"aCBq1WrkI4M-"};
 
@@ -7,11 +9,12 @@ var styles = {"spinner":"_6hfmGZoXNyg-","animationSpin":"aT3CETCJ4hQ-","small":"
  * @deprecated Use `ActivityIndicator` instead.
  */
 function Spinner({ size = "base", inline }) {
+    const { t } = useAtlantisI18n(commonMessages);
     const spinnerStyles = classnames(styles.spinner, {
         [styles.small]: size === "small",
         [styles.inline]: inline,
     });
-    return (React__default.createElement("div", { className: spinnerStyles, role: "alert", "aria-busy": true, "aria-label": "loading" }));
+    return (React__default.createElement("div", { className: spinnerStyles, role: "alert", "aria-busy": true, "aria-label": t("Loading") }));
 }
 
 export { Spinner as S };

package/dist/Toast/Toast.messages.d.ts

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

package/dist/Toast/index.cjs

@@ -1,13 +1,15 @@
 'use strict';
 
 var showToast = require('../showToast-cjs.js');
+require('../tslib.es6-cjs.js');
 require('react');
 require('react-dom/client');
 require('framer-motion');
+require('../useAtlantisI18n-cjs.js');
+require('../AtlantisContext-cjs.js');
 require('../Icon-cjs.js');
 require('@jobber/design');
 require('../Button-cjs.js');
-require('../tslib.es6-cjs.js');
 require('react-router-dom');
 require('classnames');
 require('../Typography-cjs.js');

package/dist/Toast/index.mjs

@@ -1,11 +1,13 @@
 export { T as Toast, s as showToast } from '../showToast-es.js';
+import '../tslib.es6-es.js';
 import 'react';
 import 'react-dom/client';
 import 'framer-motion';
+import '../useAtlantisI18n-es.js';
+import '../AtlantisContext-es.js';
 import '../Icon-es.js';
 import '@jobber/design';
 import '../Button-es.js';
-import '../tslib.es6-es.js';
 import 'react-router-dom';
 import 'classnames';
 import '../Typography-es.js';

package/dist/Toast/showToast.d.ts

@@ -1,2 +1,13 @@
 import type { ToastProps } from "./Toast";
-export declare function showToast(props: ToastProps): void;
+interface ShowToastOptions {
+    /**
+     * The locale to use for translated strings inside the toast (e.g. the
+     * dismiss button aria-label). Defaults to `"en"`.
+     *
+     * Pass the same locale you provide to `AtlantisContext.Provider` in your
+     * app so that toast strings stay consistent with the rest of the UI.
+     */
+    readonly locale?: string;
+}
+export declare function showToast(props: ToastProps, options?: ShowToastOptions): void;
+export {};

package/dist/docs/ActivityIndicator/ActivityIndicator.md

@@ -110,7 +110,7 @@ component from React Native.
 
 | Prop | Type | Required | Default | Description |
 |------|------|----------|---------|-------------|
-| `ariaLabel` | `string` | No | `Loading` | Accessible label exposed via `aria-label` on the root element. Override to localize or to describe the specific activ... |
+| `ariaLabel` | `string` | No | `"Loading"` | Accessible label exposed via `aria-label` on the root element. Override to localize or to describe the specific activ... |
 | `className` | `string` | No | — | Custom class name merged onto the root element alongside the component's own classes. |
 | `size` | `"base" | "small"` | No | `base` | Visual size. `base` renders at 32px, `small` renders at 16px. |
 | `style` | `CSSProperties` | No | — | Custom inline styles applied to the root element. |

package/dist/docs/DataDump/DataDump.md

@@ -17,4 +17,4 @@ users.
 |------|------|----------|---------|-------------|
 | `data` | `unknown` | Yes | — | Data to display. |
 | `defaultOpen` | `boolean` | No | `false` | Should the `DataDump` default to open? |
-| `label` | `string` | No | `Raw Data` | Label for the DataDump |
+| `label` | `string` | No | `"Raw Data"` | Label for the DataDump |

package/dist/docs/Page/Page.md

@@ -337,7 +337,7 @@ composable actions, this is the simplest way to use Page:
 
 | Prop | Type | Required | Default | Description |
 |------|------|----------|---------|-------------|
-| `triggerLabel` | `string` | No | `More Actions` |  |
+| `triggerLabel` | `string` | No | — |  |
 
 #### Page.PrimaryButton
 

package/dist/index.cjs

@@ -91,6 +91,8 @@ var Tooltip = require('./Tooltip-cjs.js');
 var Typography = require('./Typography-cjs.js');
 var design = require('@jobber/design');
 require('classnames');
+require('./common.messages-cjs.js');
+require('./useAtlantisI18n-cjs.js');
 require('./_commonjsHelpers-cjs.js');
 require('./identity-cjs.js');
 require('./isTypedArray-cjs.js');
@@ -107,7 +109,6 @@ 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');
@@ -135,7 +136,6 @@ 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

@@ -89,6 +89,8 @@ export { T as Tooltip } from './Tooltip-es.js';
 export { T as Typography } from './Typography-es.js';
 export { iconNames, isIconName } from '@jobber/design';
 import 'classnames';
+import './common.messages-es.js';
+import './useAtlantisI18n-es.js';
 import './_commonjsHelpers-es.js';
 import './identity-es.js';
 import './isTypedArray-es.js';
@@ -105,7 +107,6 @@ 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';
@@ -133,7 +134,6 @@ 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/primitives/InputNumberExperimental/index.cjs

@@ -5,6 +5,9 @@ require('../../tslib.es6-cjs.js');
 require('react');
 require('classnames');
 require('../../ActivityIndicator-cjs.js');
+require('../../common.messages-cjs.js');
+require('../../useAtlantisI18n-cjs.js');
+require('../../AtlantisContext-cjs.js');
 require('../../Button-cjs.js');
 require('react-router-dom');
 require('../../Icon-cjs.js');

package/dist/primitives/InputNumberExperimental/index.mjs

@@ -3,6 +3,9 @@ import '../../tslib.es6-es.js';
 import 'react';
 import 'classnames';
 import '../../ActivityIndicator-es.js';
+import '../../common.messages-es.js';
+import '../../useAtlantisI18n-es.js';
+import '../../AtlantisContext-es.js';
 import '../../Button-es.js';
 import 'react-router-dom';
 import '../../Icon-es.js';

package/dist/primitives/index.cjs

@@ -35,6 +35,9 @@ require('../resolveAriaLabelledBy-cjs.js');
 require('../stringifyLocale-cjs.js');
 require('../useLabel-cjs.js');
 require('../ActivityIndicator-cjs.js');
+require('../common.messages-cjs.js');
+require('../useAtlantisI18n-cjs.js');
+require('../AtlantisContext-cjs.js');
 require('../FieldDescription-cjs.js');
 require('../NumberFieldInput-cjs.js');
 require('../SelectGroupLabel-cjs.js');

package/dist/primitives/index.mjs

@@ -33,6 +33,9 @@ import '../resolveAriaLabelledBy-es.js';
 import '../stringifyLocale-es.js';
 import '../useLabel-es.js';
 import '../ActivityIndicator-es.js';
+import '../common.messages-es.js';
+import '../useAtlantisI18n-es.js';
+import '../AtlantisContext-es.js';
 import '../FieldDescription-es.js';
 import '../NumberFieldInput-es.js';
 import '../SelectGroupLabel-es.js';

package/dist/sharedHelpers/i18n/renderWithLocale.d.ts

@@ -0,0 +1,11 @@
+import React from "react";
+import type { RenderResult } from "@testing-library/react";
+/**
+ * Test utility that renders a component wrapped in `AtlantisContext.Provider`
+ * with the given locale. Use this in i18n tests instead of manually wrapping
+ * in the provider.
+ *
+ * @example
+ * renderWithLocale(<MyComponent />, "es");
+ */
+export declare function renderWithLocale(ui: React.ReactElement, locale: string): RenderResult;

package/dist/showToast-cjs.js

@@ -1,17 +1,28 @@
 'use strict';
 
+var tslib_es6 = require('./tslib.es6-cjs.js');
 var React = require('react');
 var client = require('react-dom/client');
 var framerMotion = require('framer-motion');
+var useAtlantisI18n = require('./useAtlantisI18n-cjs.js');
 var Icon = require('./Icon-cjs.js');
 var Button = require('./Button-cjs.js');
 require('classnames');
 var Typography = require('./Typography-cjs.js');
+var AtlantisContext = require('./AtlantisContext-cjs.js');
 
 var styles = {"wrapper":"_0Tvq24WjeX8-","container":"GznHKPkdb1s-","toast":"W8zgWZqmIlk-","slice":"ol3srk7PviM-","button":"ibhpdUt9YLo-","spinning":"_5Wy5Wra20Vk-"};
 
+const toastMessages = useAtlantisI18n.defineMessages({
+    hideNotification: {
+        en: "Hide Notification",
+        es: "Ocultar notificación",
+    },
+});
+
 function Toast({ message, variation = "success", action, actionLabel, }) {
     const [visible, setVisible] = React.useState(true);
+    const { t } = useAtlantisI18n.useAtlantisI18n(toastMessages);
     const icon = getIcon();
     let timer;
     React.useEffect(() => startTimer(), []);
@@ -26,7 +37,7 @@ function Toast({ message, variation = "success", action, actionLabel, }) {
             React.createElement(Typography.Typography, { element: "span", size: "large" }, message),
             action && (React.createElement(Button.Button, { label: `${actionLabel}`, onClick: action, type: "tertiary" })),
             React.createElement("div", { className: styles.button },
-                React.createElement(Button.Button, { icon: "cross", ariaLabel: "Hide Notification", onClick: handleToastClose, type: "tertiary", variation: "subtle" })))))));
+                React.createElement(Button.Button, { icon: "cross", ariaLabel: t("hideNotification"), onClick: handleToastClose, type: "tertiary", variation: "subtle" })))))));
     function startTimer() {
         timer = setTimeout(() => handleToastClose(), getTimeout());
     }
@@ -62,7 +73,8 @@ function Toast({ message, variation = "success", action, actionLabel, }) {
 
 const targetId = "atlantis-toast-element";
 let root;
-function showToast(props) {
+function showToast(props, options = {}) {
+    const { locale = "en" } = options;
     // Ensure target and body is still there when rendering the toast. This is due
     // to an issue with ReactDOM createRoot assuming document is always there and
     // Jest taking the document down.
@@ -79,14 +91,16 @@ function showToast(props) {
         root = client.createRoot(target);
     }
     if (root && target && globalThis.document.body.contains(target)) {
-        root.render(React.createElement(ToasterOven, Object.assign({}, props)));
+        root.render(React.createElement(ToasterOven, Object.assign({ locale: locale }, props)));
     }
 }
 const ToastContainer = React.forwardRef(ToastInternal);
-function ToasterOven(props) {
+function ToasterOven(_a) {
+    var { locale } = _a, toastProps = tslib_es6.__rest(_a, ["locale"]);
     const toastRef = React.useRef(null);
-    React.useEffect(() => { var _a; return (_a = toastRef.current) === null || _a === void 0 ? void 0 : _a.add(props); });
-    return React.createElement(ToastContainer, { ref: toastRef });
+    React.useEffect(() => { var _a; return (_a = toastRef.current) === null || _a === void 0 ? void 0 : _a.add(toastProps); });
+    return (React.createElement(AtlantisContext.AtlantisContext.Provider, { value: Object.assign(Object.assign({}, AtlantisContext.atlantisContextDefaultValues), { locale }) },
+        React.createElement(ToastContainer, { ref: toastRef })));
 }
 function ToastInternal(_, ref) {
     const [toastKey, setToastKey] = React.useState(0);

package/dist/showToast-es.js

@@ -1,15 +1,26 @@
+import { _ as __rest } from './tslib.es6-es.js';
 import React__default, { useState, useEffect, forwardRef, useImperativeHandle, useRef } from 'react';
 import { createRoot } from 'react-dom/client';
 import { AnimatePresence, motion } from 'framer-motion';
+import { d as defineMessages, u as useAtlantisI18n } from './useAtlantisI18n-es.js';
 import { I as Icon } from './Icon-es.js';
 import { B as Button } from './Button-es.js';
 import 'classnames';
 import { T as Typography } from './Typography-es.js';
+import { A as AtlantisContext, a as atlantisContextDefaultValues } from './AtlantisContext-es.js';
 
 var styles = {"wrapper":"_0Tvq24WjeX8-","container":"GznHKPkdb1s-","toast":"W8zgWZqmIlk-","slice":"ol3srk7PviM-","button":"ibhpdUt9YLo-","spinning":"_5Wy5Wra20Vk-"};
 
+const toastMessages = defineMessages({
+    hideNotification: {
+        en: "Hide Notification",
+        es: "Ocultar notificación",
+    },
+});
+
 function Toast({ message, variation = "success", action, actionLabel, }) {
     const [visible, setVisible] = useState(true);
+    const { t } = useAtlantisI18n(toastMessages);
     const icon = getIcon();
     let timer;
     useEffect(() => startTimer(), []);
@@ -24,7 +35,7 @@ function Toast({ message, variation = "success", action, actionLabel, }) {
             React__default.createElement(Typography, { element: "span", size: "large" }, message),
             action && (React__default.createElement(Button, { label: `${actionLabel}`, onClick: action, type: "tertiary" })),
             React__default.createElement("div", { className: styles.button },
-                React__default.createElement(Button, { icon: "cross", ariaLabel: "Hide Notification", onClick: handleToastClose, type: "tertiary", variation: "subtle" })))))));
+                React__default.createElement(Button, { icon: "cross", ariaLabel: t("hideNotification"), onClick: handleToastClose, type: "tertiary", variation: "subtle" })))))));
     function startTimer() {
         timer = setTimeout(() => handleToastClose(), getTimeout());
     }
@@ -60,7 +71,8 @@ function Toast({ message, variation = "success", action, actionLabel, }) {
 
 const targetId = "atlantis-toast-element";
 let root;
-function showToast(props) {
+function showToast(props, options = {}) {
+    const { locale = "en" } = options;
     // Ensure target and body is still there when rendering the toast. This is due
     // to an issue with ReactDOM createRoot assuming document is always there and
     // Jest taking the document down.
@@ -77,14 +89,16 @@ function showToast(props) {
         root = createRoot(target);
     }
     if (root && target && globalThis.document.body.contains(target)) {
-        root.render(React__default.createElement(ToasterOven, Object.assign({}, props)));
+        root.render(React__default.createElement(ToasterOven, Object.assign({ locale: locale }, props)));
     }
 }
 const ToastContainer = forwardRef(ToastInternal);
-function ToasterOven(props) {
+function ToasterOven(_a) {
+    var { locale } = _a, toastProps = __rest(_a, ["locale"]);
     const toastRef = useRef(null);
-    useEffect(() => { var _a; return (_a = toastRef.current) === null || _a === void 0 ? void 0 : _a.add(props); });
-    return React__default.createElement(ToastContainer, { ref: toastRef });
+    useEffect(() => { var _a; return (_a = toastRef.current) === null || _a === void 0 ? void 0 : _a.add(toastProps); });
+    return (React__default.createElement(AtlantisContext.Provider, { value: Object.assign(Object.assign({}, atlantisContextDefaultValues), { locale }) },
+        React__default.createElement(ToastContainer, { ref: toastRef })));
 }
 function ToastInternal(_, ref) {
     const [toastKey, setToastKey] = useState(0);

package/package.json

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