@jobber/components 6.111.3 → 6.111.5

package/dist/Button-cjs.js

@@ -59,7 +59,7 @@ function ButtonIcon(_a) {
     var { size: sizeProp } = _a, props = tslib_es6.__rest(_a, ["size"]);
     const { size: contextSize } = useButtonContext();
     const size = sizeProp || contextSize;
-    return React.createElement(Icon.Icon, Object.assign({}, props, { size: size, "aria-hidden": "true" }));
+    return React.createElement(Icon.Icon, Object.assign({}, props, { size: size }));
 }
 function ButtonLabel(_a) {
     var { element = "span", fontWeight = "semiBold", fontFamily = "base", size: sizeProp } = _a, props = tslib_es6.__rest(_a, ["element", "fontWeight", "fontFamily", "size"]);

package/dist/Button-es.js

@@ -57,7 +57,7 @@ function ButtonIcon(_a) {
     var { size: sizeProp } = _a, props = __rest(_a, ["size"]);
     const { size: contextSize } = useButtonContext();
     const size = sizeProp || contextSize;
-    return React__default.createElement(Icon, Object.assign({}, props, { size: size, "aria-hidden": "true" }));
+    return React__default.createElement(Icon, Object.assign({}, props, { size: size }));
 }
 function ButtonLabel(_a) {
     var { element = "span", fontWeight = "semiBold", fontFamily = "base", size: sizeProp } = _a, props = __rest(_a, ["element", "fontWeight", "fontFamily", "size"]);

package/dist/Icon/Icon.d.ts

@@ -1,4 +1,4 @@
-import type { AriaAttributes, CSSProperties } from "react";
+import type { CSSProperties } from "react";
 import React from "react";
 import type { IconColorNames, IconNames, IconSizes } from "@jobber/design";
 export type { IconColorNames, IconNames } from "@jobber/design";
@@ -24,11 +24,6 @@ export interface IconProps {
      * Used to locate this view in end-to-end tests
      */
     readonly testID?: string;
-    /**
-     * Indicates whether the element is exposed to an accessibility API.
-     * @see {@link https://www.w3.org/TR/wai-aria-1.2/#aria-hidden}
-     */
-    readonly "aria-hidden"?: AriaAttributes["aria-hidden"];
     /**
      * **Use at your own risk:** Custom classnames for specific elements. This should only be used as a
      * **last resort**. Using this may result in unexpected side effects.
@@ -48,4 +43,4 @@ export interface IconProps {
         path?: CSSProperties;
     };
 }
-export declare function Icon({ name, color, customColor, size, testID, UNSAFE_className, UNSAFE_style, "aria-hidden": ariaHidden, }: IconProps): React.JSX.Element;
+export declare function Icon({ name, color, customColor, size, testID, UNSAFE_className, UNSAFE_style, }: IconProps): React.JSX.Element;

package/dist/Icon-cjs.js

@@ -3,7 +3,7 @@
 var React = require('react');
 var design = require('@jobber/design');
 
-function Icon({ name, color, customColor, size = "base", testID, UNSAFE_className, UNSAFE_style, "aria-hidden": ariaHidden, }) {
+function Icon({ name, color, customColor, size = "base", testID, UNSAFE_className, UNSAFE_style, }) {
     let icon;
     const { svgStyle, pathStyle, paths, viewBox } = design.getIcon({
         name,
@@ -17,7 +17,7 @@ function Icon({ name, color, customColor, size = "base", testID, UNSAFE_classNam
     else {
         icon = paths.map((path) => (React.createElement("path", { key: path, style: Object.assign(Object.assign({}, pathStyle), UNSAFE_style === null || UNSAFE_style === void 0 ? void 0 : UNSAFE_style.path), className: UNSAFE_className === null || UNSAFE_className === void 0 ? void 0 : UNSAFE_className.path, d: path, fill: customColor })));
     }
-    return (React.createElement("svg", { "aria-hidden": ariaHidden, xmlns: "http://www.w3.org/2000/svg", viewBox: viewBox, style: Object.assign(Object.assign({}, svgStyle), UNSAFE_style === null || UNSAFE_style === void 0 ? void 0 : UNSAFE_style.svg), className: UNSAFE_className === null || UNSAFE_className === void 0 ? void 0 : UNSAFE_className.svg, "data-testid": testID || name }, icon));
+    return (React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: viewBox, style: Object.assign(Object.assign({}, svgStyle), UNSAFE_style === null || UNSAFE_style === void 0 ? void 0 : UNSAFE_style.svg), className: UNSAFE_className === null || UNSAFE_className === void 0 ? void 0 : UNSAFE_className.svg, "data-testid": testID || name }, icon));
 }
 function getIconColor(name, color) {
     if (name === "truck") {

package/dist/Icon-es.js

@@ -1,7 +1,7 @@
 import React__default from 'react';
 import { getIcon } from '@jobber/design';
 
-function Icon({ name, color, customColor, size = "base", testID, UNSAFE_className, UNSAFE_style, "aria-hidden": ariaHidden, }) {
+function Icon({ name, color, customColor, size = "base", testID, UNSAFE_className, UNSAFE_style, }) {
     let icon;
     const { svgStyle, pathStyle, paths, viewBox } = getIcon({
         name,
@@ -15,7 +15,7 @@ function Icon({ name, color, customColor, size = "base", testID, UNSAFE_classNam
     else {
         icon = paths.map((path) => (React__default.createElement("path", { key: path, style: Object.assign(Object.assign({}, pathStyle), UNSAFE_style === null || UNSAFE_style === void 0 ? void 0 : UNSAFE_style.path), className: UNSAFE_className === null || UNSAFE_className === void 0 ? void 0 : UNSAFE_className.path, d: path, fill: customColor })));
     }
-    return (React__default.createElement("svg", { "aria-hidden": ariaHidden, xmlns: "http://www.w3.org/2000/svg", viewBox: viewBox, style: Object.assign(Object.assign({}, svgStyle), UNSAFE_style === null || UNSAFE_style === void 0 ? void 0 : UNSAFE_style.svg), className: UNSAFE_className === null || UNSAFE_className === void 0 ? void 0 : UNSAFE_className.svg, "data-testid": testID || name }, icon));
+    return (React__default.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: viewBox, style: Object.assign(Object.assign({}, svgStyle), UNSAFE_style === null || UNSAFE_style === void 0 ? void 0 : UNSAFE_style.svg), className: UNSAFE_className === null || UNSAFE_className === void 0 ? void 0 : UNSAFE_className.svg, "data-testid": testID || name }, icon));
 }
 function getIconColor(name, color) {
     if (name === "truck") {

package/dist/LightBox/LightBox.d.ts

@@ -41,5 +41,16 @@ interface LightBoxProps {
      */
     readonly boxSizing?: CSSProperties["boxSizing"];
 }
+export declare const slideVariants: {
+    enter: (directionRef: React.RefObject<number>) => {
+        x: string;
+    };
+    center: {
+        x: number;
+    };
+    exit: (directionRef: React.RefObject<number>) => {
+        x: string;
+    };
+};
 export declare function LightBox({ boxSizing, open, images, imageIndex, onRequestClose, }: LightBoxProps): React.JSX.Element;
 export {};

package/dist/LightBox-cjs.js

@@ -17,20 +17,16 @@ const swipeConfidenceThreshold = 10000;
 const swipePower = (offset, velocity) => {
     return Math.abs(offset) * velocity;
 };
-const variants = {
-    enter: (direction) => {
-        return {
-            x: direction > 0 ? "150%" : "-150%",
-        };
-    },
+const slideVariants = {
+    enter: (directionRef) => ({
+        x: directionRef.current > 0 ? "150%" : "-150%",
+    }),
     center: {
         x: 0,
     },
-    exit: (direction) => {
-        return {
-            x: direction < 0 ? "150%" : "-150%",
-        };
-    },
+    exit: (directionRef) => ({
+        x: directionRef.current < 0 ? "150%" : "-150%",
+    }),
 };
 const imageTransition = {
     x: { duration: 0.65, ease: [0.42, 0, 0, 1.03] },
@@ -42,7 +38,7 @@ const BUTTON_DEBOUNCE_DELAY = 250;
 const MOVEMENT_DEBOUNCE_DELAY = 1000;
 function LightBox({ boxSizing = "content-box", open, images, imageIndex = 0, onRequestClose, }) {
     const [currentImageIndex, setCurrentImageIndex] = React.useState(imageIndex);
-    const [direction, setDirection] = React.useState(0);
+    const directionRef = React.useRef(0);
     const [mouseIsStationary, setMouseIsStationary] = React.useState(true);
     const lightboxRef = jobberHooks.useFocusTrap(open);
     const selectedThumbnailRef = React.useRef(null);
@@ -94,7 +90,7 @@ function LightBox({ boxSizing = "content-box", open, images, imageIndex = 0, onR
                     React.createElement(ButtonDismiss.ButtonDismiss, { ariaLabel: "Close", onClick: handleRequestClose })))),
         React.createElement("div", { className: styles.imageArea },
             React.createElement(framerMotion.AnimatePresence, { initial: false },
-                React.createElement(framerMotion.motion.img, { key: currentImageIndex, variants: variants, src: images[currentImageIndex].url, custom: direction, className: styles.image, initial: "enter", alt: images[currentImageIndex].alt ||
+                React.createElement(framerMotion.motion.img, { key: currentImageIndex, variants: slideVariants, src: images[currentImageIndex].url, custom: directionRef, className: styles.image, initial: "enter", alt: images[currentImageIndex].alt ||
                         images[currentImageIndex].title ||
                         "", animate: "center", exit: "exit", transition: imageTransition, drag: "x", dragConstraints: { left: 0, right: 0 }, dragElastic: 1, onDragEnd: handleOnDragEnd }))),
         images.length > 1 && (React.createElement(React.Fragment, null,
@@ -116,11 +112,11 @@ function LightBox({ boxSizing = "content-box", open, images, imageIndex = 0, onR
         ? ReactDOM.createPortal(template, document.body)
         : template;
     function handleMovePrevious() {
-        setDirection(-1);
+        directionRef.current = -1;
         setCurrentImageIndex((currentImageIndex + images.length - 1) % images.length);
     }
     function handleMoveNext() {
-        setDirection(1);
+        directionRef.current = 1;
         setCurrentImageIndex((currentImageIndex + 1) % images.length);
     }
     function handleRequestClose() {
@@ -137,10 +133,10 @@ function LightBox({ boxSizing = "content-box", open, images, imageIndex = 0, onR
     }
     function handleThumbnailClick(index) {
         if (index < currentImageIndex) {
-            setDirection(-1);
+            directionRef.current = -1;
         }
         else {
-            setDirection(1);
+            directionRef.current = 1;
         }
         setCurrentImageIndex(index);
     }

package/dist/LightBox-es.js

@@ -15,20 +15,16 @@ const swipeConfidenceThreshold = 10000;
 const swipePower = (offset, velocity) => {
     return Math.abs(offset) * velocity;
 };
-const variants = {
-    enter: (direction) => {
-        return {
-            x: direction > 0 ? "150%" : "-150%",
-        };
-    },
+const slideVariants = {
+    enter: (directionRef) => ({
+        x: directionRef.current > 0 ? "150%" : "-150%",
+    }),
     center: {
         x: 0,
     },
-    exit: (direction) => {
-        return {
-            x: direction < 0 ? "150%" : "-150%",
-        };
-    },
+    exit: (directionRef) => ({
+        x: directionRef.current < 0 ? "150%" : "-150%",
+    }),
 };
 const imageTransition = {
     x: { duration: 0.65, ease: [0.42, 0, 0, 1.03] },
@@ -40,7 +36,7 @@ const BUTTON_DEBOUNCE_DELAY = 250;
 const MOVEMENT_DEBOUNCE_DELAY = 1000;
 function LightBox({ boxSizing = "content-box", open, images, imageIndex = 0, onRequestClose, }) {
     const [currentImageIndex, setCurrentImageIndex] = useState(imageIndex);
-    const [direction, setDirection] = useState(0);
+    const directionRef = useRef(0);
     const [mouseIsStationary, setMouseIsStationary] = useState(true);
     const lightboxRef = useFocusTrap(open);
     const selectedThumbnailRef = useRef(null);
@@ -92,7 +88,7 @@ function LightBox({ boxSizing = "content-box", open, images, imageIndex = 0, onR
                     React__default.createElement(ButtonDismiss, { ariaLabel: "Close", onClick: handleRequestClose })))),
         React__default.createElement("div", { className: styles.imageArea },
             React__default.createElement(AnimatePresence, { initial: false },
-                React__default.createElement(motion.img, { key: currentImageIndex, variants: variants, src: images[currentImageIndex].url, custom: direction, className: styles.image, initial: "enter", alt: images[currentImageIndex].alt ||
+                React__default.createElement(motion.img, { key: currentImageIndex, variants: slideVariants, src: images[currentImageIndex].url, custom: directionRef, className: styles.image, initial: "enter", alt: images[currentImageIndex].alt ||
                         images[currentImageIndex].title ||
                         "", animate: "center", exit: "exit", transition: imageTransition, drag: "x", dragConstraints: { left: 0, right: 0 }, dragElastic: 1, onDragEnd: handleOnDragEnd }))),
         images.length > 1 && (React__default.createElement(React__default.Fragment, null,
@@ -114,11 +110,11 @@ function LightBox({ boxSizing = "content-box", open, images, imageIndex = 0, onR
         ? ReactDOM__default.createPortal(template, document.body)
         : template;
     function handleMovePrevious() {
-        setDirection(-1);
+        directionRef.current = -1;
         setCurrentImageIndex((currentImageIndex + images.length - 1) % images.length);
     }
     function handleMoveNext() {
-        setDirection(1);
+        directionRef.current = 1;
         setCurrentImageIndex((currentImageIndex + 1) % images.length);
     }
     function handleRequestClose() {
@@ -135,10 +131,10 @@ function LightBox({ boxSizing = "content-box", open, images, imageIndex = 0, onR
     }
     function handleThumbnailClick(index) {
         if (index < currentImageIndex) {
-            setDirection(-1);
+            directionRef.current = -1;
         }
         else {
-            setDirection(1);
+            directionRef.current = 1;
         }
         setCurrentImageIndex(index);
     }

package/dist/Tooltip-cjs.js

@@ -72,7 +72,6 @@ function Tooltip({ message, children, preferredPlacement = "top", setTabIndex =
             ? `${(_d = floatingStyles.arrow) === null || _d === void 0 ? void 0 : _d.y}px`
             : "",
     };
-    const tooltipId = React.useId();
     return (React.createElement(React.Fragment, null,
         React.createElement("span", { className: styles.shadowActivator, ref: shadowRef }),
         children,
@@ -82,7 +81,7 @@ function Tooltip({ message, children, preferredPlacement = "top", setTabIndex =
                     duration: 0.15,
                     delay: 0.3,
                 } },
-                React.createElement("p", { className: styles.tooltipMessage, id: tooltipId }, message),
+                React.createElement("p", { className: styles.tooltipMessage }, message),
                 React.createElement("div", { ref: setArrowRef, style: arrowStyles, className: styles.arrow })))))));
     function initializeListeners() {
         const showTooltip = () => {
@@ -95,14 +94,11 @@ function Tooltip({ message, children, preferredPlacement = "top", setTabIndex =
             var _a;
             if ((_a = shadowRef === null || shadowRef === void 0 ? void 0 : shadowRef.current) === null || _a === void 0 ? void 0 : _a.nextElementSibling) {
                 const activator = shadowRef.current.nextElementSibling;
-                // Manually inject "aria-labelledby" and "tabindex" to let the screen
+                // Manually inject "aria-description" and "tabindex" to let the screen
                 // readers read the tooltip message.
                 // This is to avoid having to add those attribute as a prop on every
                 // component we have.
-                // WARNING: This is an anti pattern that should be removed in the future.
-                // for now, we will leverage the fact that aria-labelledby overrides aria-label, avoiding
-                // double announcements of the same element assuming it uses "aria-label" as its mechanism.
-                activator.setAttribute("aria-labelledby", tooltipId);
+                activator.setAttribute("aria-description", message);
                 if (setTabIndex) {
                     activator.setAttribute("tabindex", "0"); // enable focus
                 }

package/dist/Tooltip-es.js

@@ -1,4 +1,4 @@
-import React__default, { useRef, useState, useId } from 'react';
+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';
@@ -70,7 +70,6 @@ function Tooltip({ message, children, preferredPlacement = "top", setTabIndex =
             ? `${(_d = floatingStyles.arrow) === null || _d === void 0 ? void 0 : _d.y}px`
             : "",
     };
-    const tooltipId = useId();
     return (React__default.createElement(React__default.Fragment, null,
         React__default.createElement("span", { className: styles.shadowActivator, ref: shadowRef }),
         children,
@@ -80,7 +79,7 @@ function Tooltip({ message, children, preferredPlacement = "top", setTabIndex =
                     duration: 0.15,
                     delay: 0.3,
                 } },
-                React__default.createElement("p", { className: styles.tooltipMessage, id: tooltipId }, message),
+                React__default.createElement("p", { className: styles.tooltipMessage }, message),
                 React__default.createElement("div", { ref: setArrowRef, style: arrowStyles, className: styles.arrow })))))));
     function initializeListeners() {
         const showTooltip = () => {
@@ -93,14 +92,11 @@ function Tooltip({ message, children, preferredPlacement = "top", setTabIndex =
             var _a;
             if ((_a = shadowRef === null || shadowRef === void 0 ? void 0 : shadowRef.current) === null || _a === void 0 ? void 0 : _a.nextElementSibling) {
                 const activator = shadowRef.current.nextElementSibling;
-                // Manually inject "aria-labelledby" and "tabindex" to let the screen
+                // Manually inject "aria-description" and "tabindex" to let the screen
                 // readers read the tooltip message.
                 // This is to avoid having to add those attribute as a prop on every
                 // component we have.
-                // WARNING: This is an anti pattern that should be removed in the future.
-                // for now, we will leverage the fact that aria-labelledby overrides aria-label, avoiding
-                // double announcements of the same element assuming it uses "aria-label" as its mechanism.
-                activator.setAttribute("aria-labelledby", tooltipId);
+                activator.setAttribute("aria-description", message);
                 if (setTabIndex) {
                     activator.setAttribute("tabindex", "0"); // enable focus
                 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jobber/components",
-  "version": "6.111.3",
+  "version": "6.111.5",
   "license": "MIT",
   "type": "module",
   "main": "dist/index.cjs",
@@ -538,5 +538,5 @@
     "> 1%",
     "IE 10"
   ],
-  "gitHead": "f84b3ba0749a6d33ce4367a68d357db3727562e5"
+  "gitHead": "74ad056f656ebfec2d55cc1f52703abbd8aaaecc"
 }