braid-design-system 32.12.0 → 32.12.2

package/dist/ToastContext.chunk.cjs

@@ -49,8 +49,7 @@ const useThemeName = () => sideEffects_lib_components_BraidProvider_BraidProvide
 const useSpace = () => sideEffects_lib_components_BraidProvider_BraidProvider_cjs.useBraidTheme().space;
 function resolveResponsiveObject(breakpointName, value) {
   let resolvedValue = null;
-  for (let i = 0; i < styles_lib_css_breakpoints_cjs.breakpointNames.length; i++) {
-    const currentBreakpointName = styles_lib_css_breakpoints_cjs.breakpointNames[i];
+  for (const currentBreakpointName of styles_lib_css_breakpoints_cjs.breakpointNames) {
     const valueForBreakpoint = value[currentBreakpointName];
     if (valueForBreakpoint !== void 0) {
       resolvedValue = valueForBreakpoint;
@@ -1292,6 +1291,12 @@ const buttonVariants = [
   "soft",
   "transparent"
 ];
+const buttonTones = [
+  "formAccent",
+  "brandAccent",
+  "critical",
+  "neutral"
+];
 const variants = {
   solid: {
     formAccent: {
@@ -1762,6 +1767,17 @@ const TooltipContent = ({
   }
 );
 const validPlacements = ["top", "bottom"];
+const normaliseRect = (domRect) => ({
+  top: Math.round((domRect == null ? void 0 : domRect.top) || 0),
+  left: Math.round((domRect == null ? void 0 : domRect.left) || 0),
+  height: Math.round((domRect == null ? void 0 : domRect.height) || 0),
+  width: Math.round((domRect == null ? void 0 : domRect.width) || 0)
+});
+const defaultRect = normaliseRect();
+const doesBoundingBoxNeedUpdating = (element, previousRect) => {
+  const currentRect = normaliseRect(element == null ? void 0 : element.getBoundingClientRect());
+  return JSON.stringify(currentRect) !== JSON.stringify(previousRect);
+};
 const TooltipRenderer = ({
   id,
   tooltip,
@@ -1778,6 +1794,8 @@ const TooltipRenderer = ({
   const [controlledVisible, setControlledVisible] = React.useState(false);
   const [opacity, setOpacity] = React.useState(0);
   const { grid, space } = useSpace();
+  const triggerBoundingBoxRef = React.useRef(defaultRect);
+  const tooltipBoundingRectRef = React.useRef(defaultRect);
   const {
     visible,
     getTooltipProps,
@@ -1785,13 +1803,22 @@ const TooltipRenderer = ({
     tooltipRef,
     setTriggerRef,
     triggerRef,
-    getArrowProps
+    getArrowProps,
+    update
   } = reactPopperTooltip.usePopperTooltip(
     {
       placement,
       trigger: [isMobile__default.default() ? "click" : "hover", "focus"],
       visible: isStatic || controlledVisible,
-      onVisibleChange: setControlledVisible
+      onVisibleChange: (newState) => {
+        triggerBoundingBoxRef.current = normaliseRect(
+          triggerRef == null ? void 0 : triggerRef.getBoundingClientRect()
+        );
+        tooltipBoundingRectRef.current = normaliseRect(
+          tooltipRef == null ? void 0 : tooltipRef.getBoundingClientRect()
+        );
+        setControlledVisible(newState);
+      }
     },
     {
       modifiers: [
@@ -1824,6 +1851,17 @@ const TooltipRenderer = ({
       ]
     }
   );
+  React.useLayoutEffect(() => {
+    if (controlledVisible && update && (doesBoundingBoxNeedUpdating(triggerRef, triggerBoundingBoxRef.current) || doesBoundingBoxNeedUpdating(tooltipRef, tooltipBoundingRectRef.current))) {
+      triggerBoundingBoxRef.current = normaliseRect(
+        triggerRef == null ? void 0 : triggerRef.getBoundingClientRect()
+      );
+      tooltipBoundingRectRef.current = normaliseRect(
+        tooltipRef == null ? void 0 : tooltipRef.getBoundingClientRect()
+      );
+      update();
+    }
+  });
   React.useEffect(() => {
     if (visible) {
       const handleKeyDown = ({ key }) => {
@@ -1912,6 +1950,7 @@ const TooltipRenderer = ({
   ] });
 };
 const buttonIconVariants = ["soft", "transparent"];
+const buttonIconTones = ["neutral", "secondary"];
 const padding = "xsmall";
 const PrivateButtonIcon = React.forwardRef(
   ({
@@ -2606,7 +2645,9 @@ exports.ToastProvider = ToastProvider;
 exports.TooltipRenderer = TooltipRenderer;
 exports.Typography = Typography;
 exports.buildDataAttributes = buildDataAttributes;
+exports.buttonIconTones = buttonIconTones;
 exports.buttonIconVariants = buttonIconVariants;
+exports.buttonTones = buttonTones;
 exports.buttonVariants = buttonVariants;
 exports.flattenChildren = flattenChildren;
 exports.iconContainerSize = iconContainerSize;

package/dist/ToastContext.chunk.mjs

@@ -1,4 +1,4 @@
-import React, { createContext, useContext, forwardRef, createElement, useEffect, Children, isValidElement, cloneElement, useMemo, useState, useRef, useCallback, useLayoutEffect, Fragment as Fragment$1, useReducer } from "react";
+import React, { createContext, useContext, forwardRef, createElement, useEffect, Children, isValidElement, cloneElement, useMemo, useState, useRef, useLayoutEffect, useCallback, Fragment as Fragment$1, useReducer } from "react";
 import { useBraidTheme, VanillaThemeContainer, breakpointContext, useLinkComponent } from "./side-effects/lib/components/BraidProvider/BraidProvider.mjs";
 import { breakpointNames } from "./styles/lib/css/breakpoints.mjs";
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
@@ -42,8 +42,7 @@ const useThemeName = () => useBraidTheme().name;
 const useSpace = () => useBraidTheme().space;
 function resolveResponsiveObject(breakpointName, value) {
   let resolvedValue = null;
-  for (let i = 0; i < breakpointNames.length; i++) {
-    const currentBreakpointName = breakpointNames[i];
+  for (const currentBreakpointName of breakpointNames) {
     const valueForBreakpoint = value[currentBreakpointName];
     if (valueForBreakpoint !== void 0) {
       resolvedValue = valueForBreakpoint;
@@ -1285,6 +1284,12 @@ const buttonVariants = [
   "soft",
   "transparent"
 ];
+const buttonTones = [
+  "formAccent",
+  "brandAccent",
+  "critical",
+  "neutral"
+];
 const variants = {
   solid: {
     formAccent: {
@@ -1755,6 +1760,17 @@ const TooltipContent = ({
   }
 );
 const validPlacements = ["top", "bottom"];
+const normaliseRect = (domRect) => ({
+  top: Math.round((domRect == null ? void 0 : domRect.top) || 0),
+  left: Math.round((domRect == null ? void 0 : domRect.left) || 0),
+  height: Math.round((domRect == null ? void 0 : domRect.height) || 0),
+  width: Math.round((domRect == null ? void 0 : domRect.width) || 0)
+});
+const defaultRect = normaliseRect();
+const doesBoundingBoxNeedUpdating = (element, previousRect) => {
+  const currentRect = normaliseRect(element == null ? void 0 : element.getBoundingClientRect());
+  return JSON.stringify(currentRect) !== JSON.stringify(previousRect);
+};
 const TooltipRenderer = ({
   id,
   tooltip,
@@ -1771,6 +1787,8 @@ const TooltipRenderer = ({
   const [controlledVisible, setControlledVisible] = useState(false);
   const [opacity, setOpacity] = useState(0);
   const { grid, space } = useSpace();
+  const triggerBoundingBoxRef = useRef(defaultRect);
+  const tooltipBoundingRectRef = useRef(defaultRect);
   const {
     visible,
     getTooltipProps,
@@ -1778,13 +1796,22 @@ const TooltipRenderer = ({
     tooltipRef,
     setTriggerRef,
     triggerRef,
-    getArrowProps
+    getArrowProps,
+    update
   } = usePopperTooltip(
     {
       placement,
       trigger: [isMobile() ? "click" : "hover", "focus"],
       visible: isStatic || controlledVisible,
-      onVisibleChange: setControlledVisible
+      onVisibleChange: (newState) => {
+        triggerBoundingBoxRef.current = normaliseRect(
+          triggerRef == null ? void 0 : triggerRef.getBoundingClientRect()
+        );
+        tooltipBoundingRectRef.current = normaliseRect(
+          tooltipRef == null ? void 0 : tooltipRef.getBoundingClientRect()
+        );
+        setControlledVisible(newState);
+      }
     },
     {
       modifiers: [
@@ -1817,6 +1844,17 @@ const TooltipRenderer = ({
       ]
     }
   );
+  useLayoutEffect(() => {
+    if (controlledVisible && update && (doesBoundingBoxNeedUpdating(triggerRef, triggerBoundingBoxRef.current) || doesBoundingBoxNeedUpdating(tooltipRef, tooltipBoundingRectRef.current))) {
+      triggerBoundingBoxRef.current = normaliseRect(
+        triggerRef == null ? void 0 : triggerRef.getBoundingClientRect()
+      );
+      tooltipBoundingRectRef.current = normaliseRect(
+        tooltipRef == null ? void 0 : tooltipRef.getBoundingClientRect()
+      );
+      update();
+    }
+  });
   useEffect(() => {
     if (visible) {
       const handleKeyDown = ({ key }) => {
@@ -1905,6 +1943,7 @@ const TooltipRenderer = ({
   ] });
 };
 const buttonIconVariants = ["soft", "transparent"];
+const buttonIconTones = ["neutral", "secondary"];
 const padding = "xsmall";
 const PrivateButtonIcon = forwardRef(
   ({
@@ -2600,7 +2639,9 @@ export {
   TooltipRenderer,
   Typography,
   buildDataAttributes,
+  buttonIconTones,
   buttonIconVariants,
+  buttonTones,
   buttonVariants,
   flattenChildren,
   iconContainerSize,

package/dist/index.chunk.cjs

@@ -5091,7 +5091,7 @@ const Loader = ({
           styles_lib_components_Loader_Loader_css_cjs.currentColor,
           styles_lib_css_typography_css_cjs.tone.neutral
         ].join(" "),
-        viewBox: "0 0 300 134",
+        viewBox: "0 0 302 134",
         "aria-hidden": true,
         children: [
           /* @__PURE__ */ jsxRuntime.jsx("circle", { className: styles_lib_components_Loader_Loader_css_cjs.circle, cy: "67", cx: "40", r: "40" }),

package/dist/index.chunk.mjs

@@ -5083,7 +5083,7 @@ const Loader = ({
           currentColor$1,
           tone.neutral
         ].join(" "),
-        viewBox: "0 0 300 134",
+        viewBox: "0 0 302 134",
         "aria-hidden": true,
         children: [
           /* @__PURE__ */ jsx("circle", { className: circle, cy: "67", cx: "40", r: "40" }),

package/dist/playroom/components.cjs

@@ -161,13 +161,15 @@ const Box = React.forwardRef((props, ref) => {
 });
 Box.displayName = "Box";
 const Button = React.forwardRef(
-  ({ variant, ...restProps }, ref) => {
+  ({ variant, tone, ...restProps }, ref) => {
     const isValidVariant = variant && ToastContext.buttonVariants.indexOf(variant) > -1;
+    const isValidTone = tone && ToastContext.buttonTones.indexOf(tone) > -1;
     return /* @__PURE__ */ jsxRuntime.jsx(
       ToastContext.Button,
       {
         ref,
         variant: isValidVariant ? variant : void 0,
+        tone: isValidTone ? tone : void 0,
         ...restProps
       }
     );
@@ -175,15 +177,17 @@ const Button = React.forwardRef(
 );
 Button.displayName = "Button";
 const ButtonIcon = React.forwardRef(
-  ({ variant, id, ...restProps }, ref) => {
+  ({ variant, id, tone, ...restProps }, ref) => {
     const fallbackId = useFallbackId();
     const isValidVariant = variant && ToastContext.buttonIconVariants.indexOf(variant) > -1;
+    const isValidTone = tone && ToastContext.buttonIconTones.indexOf(tone) > -1;
     return /* @__PURE__ */ jsxRuntime.jsx(
       ToastContext.ButtonIcon,
       {
         ref,
         id: id ?? fallbackId,
         variant: isValidVariant ? variant : void 0,
+        tone: isValidTone ? tone : void 0,
         ...restProps
       }
     );
@@ -266,8 +270,9 @@ const cleanSpaceValue = (space) => {
   const validResponsiveObject = typeof space === "object" && Object.keys(space).some(
     (bp) => styles_lib_css_breakpoints_cjs.breakpointNames.includes(bp) && validSpaceValues.includes(space[bp])
   );
+  const validArray = Array.isArray(space) && space.some((s) => validSpaceValues.includes(s));
   const validSpace = typeof space === "string" && validSpaceValues.includes(space);
-  return validSpace || validResponsiveObject ? space : void 0;
+  return validSpace || validResponsiveObject || validArray ? space : void 0;
 };
 const Columns = ({
   space,

package/dist/playroom/components.mjs

@@ -11,7 +11,7 @@ import { Actions, BoxRenderer, HiddenVisually, IconAdd, IconArrow, IconBookmark,
 import { useFallbackState } from "../playroomState.chunk.mjs";
 import { useRef, forwardRef, useState, useEffect } from "react";
 import { v4 } from "uuid";
-import { Bleed as Bleed$1, validBleedComponents, Box as Box$1, Button as Button$1, buttonVariants, ButtonIcon as ButtonIcon$1, buttonIconVariants, Columns as Columns$1, validColumnsComponents, Inline as Inline$1, validInlineComponents, IconClear, Stack as Stack$1, validStackComponents, TooltipRenderer as TooltipRenderer$1, useBackgroundLightness, PublicBox, Text } from "../ToastContext.chunk.mjs";
+import { Bleed as Bleed$1, validBleedComponents, Box as Box$1, Button as Button$1, buttonVariants, buttonTones, ButtonIcon as ButtonIcon$1, buttonIconVariants, buttonIconTones, Columns as Columns$1, validColumnsComponents, Inline as Inline$1, validInlineComponents, IconClear, Stack as Stack$1, validStackComponents, TooltipRenderer as TooltipRenderer$1, useBackgroundLightness, PublicBox, Text } from "../ToastContext.chunk.mjs";
 import { BraidPortal, Column, ContentBlock, Divider, Hidden, IconCritical, IconPositive, IconRenderer, TextLink, TextLinkButton, ToastProvider, useResponsiveValue, useSpace, useThemeName, useToast } from "../ToastContext.chunk.mjs";
 import { atoms } from "../styles/lib/css/atoms/atoms.mjs";
 import { breakpointNames } from "../styles/lib/css/breakpoints.mjs";
@@ -159,13 +159,15 @@ const Box = forwardRef((props, ref) => {
 });
 Box.displayName = "Box";
 const Button = forwardRef(
-  ({ variant, ...restProps }, ref) => {
+  ({ variant, tone, ...restProps }, ref) => {
     const isValidVariant = variant && buttonVariants.indexOf(variant) > -1;
+    const isValidTone = tone && buttonTones.indexOf(tone) > -1;
     return /* @__PURE__ */ jsx(
       Button$1,
       {
         ref,
         variant: isValidVariant ? variant : void 0,
+        tone: isValidTone ? tone : void 0,
         ...restProps
       }
     );
@@ -173,15 +175,17 @@ const Button = forwardRef(
 );
 Button.displayName = "Button";
 const ButtonIcon = forwardRef(
-  ({ variant, id, ...restProps }, ref) => {
+  ({ variant, id, tone, ...restProps }, ref) => {
     const fallbackId = useFallbackId();
     const isValidVariant = variant && buttonIconVariants.indexOf(variant) > -1;
+    const isValidTone = tone && buttonIconTones.indexOf(tone) > -1;
     return /* @__PURE__ */ jsx(
       ButtonIcon$1,
       {
         ref,
         id: id ?? fallbackId,
         variant: isValidVariant ? variant : void 0,
+        tone: isValidTone ? tone : void 0,
         ...restProps
       }
     );
@@ -264,8 +268,9 @@ const cleanSpaceValue = (space2) => {
   const validResponsiveObject = typeof space2 === "object" && Object.keys(space2).some(
     (bp) => breakpointNames.includes(bp) && validSpaceValues.includes(space2[bp])
   );
+  const validArray = Array.isArray(space2) && space2.some((s) => validSpaceValues.includes(s));
   const validSpace = typeof space2 === "string" && validSpaceValues.includes(space2);
-  return validSpace || validResponsiveObject ? space2 : void 0;
+  return validSpace || validResponsiveObject || validArray ? space2 : void 0;
 };
 const Columns = ({
   space: space2,