braid-design-system 33.13.1-component-types-20251210033001 → 33.14.0

package/CHANGELOG.md

@@ -1,10 +1,26 @@
 # braid-design-system
 
-## 33.13.1-component-types-20251210033001
+## 33.14.0
+
+### Minor Changes
+
+- **TooltipRenderer:** Add support for `left` and `right` placement, in addition to existing `top` and `bottom`. ([#1942](https://github.com/seek-oss/braid-design-system/pull/1942))
+
+  **EXAMPLE USAGE:**
+
+  ```jsx
+  <TooltipRenderer
+    placement="left"
+    ...props
+  >
+   ...
+  </TooltipRenderer>
+
+  ```
 
 ### Patch Changes
 
-- Improve components type definitions in support of Playroom props (eb479ecb416b9cee2d4e7dd36ecacd4bc88304ca)
+- Improve components type definitions in support of Playroom props ([#1941](https://github.com/seek-oss/braid-design-system/pull/1941))
 
 ## 33.13.0
 

package/dist/index.d.mts

@@ -3421,7 +3421,7 @@ interface LoaderProps {
 }
 declare const Loader: FC<LoaderProps>;
 
-type Placement = 'top' | 'bottom';
+type Placement = 'top' | 'bottom' | 'left' | 'right';
 interface PopoverPlacementData {
     placement: Placement;
     arrow?: {
@@ -3432,7 +3432,7 @@ interface PopoverPlacementData {
 interface PopoverProps {
     id?: string;
     role: NonNullable<AllHTMLAttributes<HTMLElement>['role'] | false>;
-    align?: 'left' | 'right' | 'center';
+    align?: 'start' | 'end' | 'center';
     width?: 'content' | 'full';
     placement?: Placement;
     lockPlacement?: boolean;
@@ -3476,7 +3476,7 @@ interface MenuRendererProps {
     offsetSpace?: ResponsiveSpace;
     size?: MenuSize;
     width?: keyof typeof width | 'content';
-    placement?: PopoverProps['placement'];
+    placement?: Extract<PopoverProps['placement'], 'top' | 'bottom'>;
     onOpen?: () => void;
     onClose?: (closeReason: CloseReason) => void;
     data?: DataAttributeMap;

package/dist/index.d.ts

@@ -3421,7 +3421,7 @@ interface LoaderProps {
 }
 declare const Loader: FC<LoaderProps>;
 
-type Placement = 'top' | 'bottom';
+type Placement = 'top' | 'bottom' | 'left' | 'right';
 interface PopoverPlacementData {
     placement: Placement;
     arrow?: {
@@ -3432,7 +3432,7 @@ interface PopoverPlacementData {
 interface PopoverProps {
     id?: string;
     role: NonNullable<AllHTMLAttributes<HTMLElement>['role'] | false>;
-    align?: 'left' | 'right' | 'center';
+    align?: 'start' | 'end' | 'center';
     width?: 'content' | 'full';
     placement?: Placement;
     lockPlacement?: boolean;
@@ -3476,7 +3476,7 @@ interface MenuRendererProps {
     offsetSpace?: ResponsiveSpace;
     size?: MenuSize;
     width?: keyof typeof width | 'content';
-    placement?: PopoverProps['placement'];
+    placement?: Extract<PopoverProps['placement'], 'top' | 'bottom'>;
     onOpen?: () => void;
     onClose?: (closeReason: CloseReason) => void;
     data?: DataAttributeMap;

package/dist/lib/components/MenuRenderer/MenuRenderer.cjs

@@ -196,7 +196,7 @@ const MenuRenderer = ({
         open,
         onClose: () => dispatch({ type: MENU_CLOSE }),
         triggerRef: triggerProps.ref,
-        align,
+        align: align === "left" ? "start" : "end",
         placement,
         offsetSpace,
         role: false,

package/dist/lib/components/MenuRenderer/MenuRenderer.mjs

@@ -193,7 +193,7 @@ const MenuRenderer = ({
         open,
         onClose: () => dispatch({ type: MENU_CLOSE }),
         triggerRef: triggerProps.ref,
-        align,
+        align: align === "left" ? "start" : "end",
         placement,
         offsetSpace,
         role: false,

package/dist/lib/components/TooltipRenderer/TooltipRenderer.cjs

@@ -39,21 +39,28 @@ const TooltipContent = ({
   const arrowY = arrowPosition?.y;
   const { space, grid } = lib_components_useSpace_useSpace_cjs.useSpace();
   const edgeOffsetInPx = grid * space.xsmall;
-  const arrowWidthOffset = parseFloat(lib_components_TooltipRenderer_TooltipRenderer_css_cjs.constants.arrowSize) * 2;
+  const arrowSizeOffset = parseFloat(lib_components_TooltipRenderer_TooltipRenderer_css_cjs.constants.arrowSize) * 2;
   const [tooltipWidth, setTooltipWidth] = react.useState(0);
+  const [tooltipHeight, setTooltipHeight] = react.useState(0);
   const tooltipContainerRef = react.useRef(null);
   lib_hooks_useIsomorphicLayoutEffect_cjs.useIsomorphicLayoutEffect(() => {
     if (!tooltipContainerRef.current) {
       return;
     }
-    const { width } = tooltipContainerRef.current.getBoundingClientRect();
+    const { width, height } = tooltipContainerRef.current.getBoundingClientRect();
     setTooltipWidth(width);
+    setTooltipHeight(height);
   }, [children]);
   const clampedArrowX = arrowX !== void 0 && tooltipWidth > 0 ? clamp(
     edgeOffsetInPx,
     arrowX,
-    tooltipWidth - edgeOffsetInPx - arrowWidthOffset
+    tooltipWidth - edgeOffsetInPx - arrowSizeOffset
   ) : arrowX;
+  const clampedArrowY = arrowY !== void 0 && tooltipHeight > 0 ? clamp(
+    edgeOffsetInPx,
+    arrowY,
+    tooltipHeight - edgeOffsetInPx - arrowSizeOffset
+  ) : arrowY;
   return /* @__PURE__ */ jsxRuntime.jsx(
     lib_components_Box_Box_cjs.Box,
     {
@@ -75,7 +82,7 @@ const TooltipContent = ({
             className: lib_components_TooltipRenderer_TooltipRenderer_css_cjs.arrow[placement ?? "top"],
             style: dynamic.assignInlineVars({
               [lib_components_TooltipRenderer_TooltipRenderer_css_cjs.arrowX]: clampedArrowX !== void 0 ? `${clampedArrowX}px` : void 0,
-              [lib_components_TooltipRenderer_TooltipRenderer_css_cjs.arrowY]: arrowY !== void 0 ? `${arrowY}px` : void 0
+              [lib_components_TooltipRenderer_TooltipRenderer_css_cjs.arrowY]: clampedArrowY !== void 0 ? `${clampedArrowY}px` : void 0
             })
           }
         )

package/dist/lib/components/TooltipRenderer/TooltipRenderer.css.cjs

@@ -47,6 +47,12 @@ const arrow = css.styleVariants({
   }],
   bottom: [baseArrow, {
     top: offset
+  }],
+  left: [baseArrow, {
+    right: offset
+  }],
+  right: [baseArrow, {
+    left: offset
   }]
 }, "arrow");
 fileScope.endFileScope();

package/dist/lib/components/TooltipRenderer/TooltipRenderer.css.mjs

@@ -46,6 +46,12 @@ const arrow = styleVariants({
   }],
   bottom: [baseArrow, {
     top: offset
+  }],
+  left: [baseArrow, {
+    right: offset
+  }],
+  right: [baseArrow, {
+    left: offset
   }]
 }, "arrow");
 endFileScope();

package/dist/lib/components/TooltipRenderer/TooltipRenderer.mjs

@@ -36,21 +36,28 @@ const TooltipContent = ({
   const arrowY$1 = arrowPosition?.y;
   const { space, grid } = useSpace();
   const edgeOffsetInPx = grid * space.xsmall;
-  const arrowWidthOffset = parseFloat(constants.arrowSize) * 2;
+  const arrowSizeOffset = parseFloat(constants.arrowSize) * 2;
   const [tooltipWidth, setTooltipWidth] = useState(0);
+  const [tooltipHeight, setTooltipHeight] = useState(0);
   const tooltipContainerRef = useRef(null);
   useIsomorphicLayoutEffect(() => {
     if (!tooltipContainerRef.current) {
       return;
     }
-    const { width } = tooltipContainerRef.current.getBoundingClientRect();
+    const { width, height } = tooltipContainerRef.current.getBoundingClientRect();
     setTooltipWidth(width);
+    setTooltipHeight(height);
   }, [children]);
   const clampedArrowX = arrowX$1 !== void 0 && tooltipWidth > 0 ? clamp(
     edgeOffsetInPx,
     arrowX$1,
-    tooltipWidth - edgeOffsetInPx - arrowWidthOffset
+    tooltipWidth - edgeOffsetInPx - arrowSizeOffset
   ) : arrowX$1;
+  const clampedArrowY = arrowY$1 !== void 0 && tooltipHeight > 0 ? clamp(
+    edgeOffsetInPx,
+    arrowY$1,
+    tooltipHeight - edgeOffsetInPx - arrowSizeOffset
+  ) : arrowY$1;
   return /* @__PURE__ */ jsx(
     Box,
     {
@@ -72,7 +79,7 @@ const TooltipContent = ({
             className: arrow[placement ?? "top"],
             style: assignInlineVars({
               [arrowX]: clampedArrowX !== void 0 ? `${clampedArrowX}px` : void 0,
-              [arrowY]: arrowY$1 !== void 0 ? `${arrowY$1}px` : void 0
+              [arrowY]: clampedArrowY !== void 0 ? `${clampedArrowY}px` : void 0
             })
           }
         )

package/dist/lib/components/private/Popover/Popover.cjs

@@ -14,14 +14,24 @@ const _interopDefaultCompat = (e) => e && typeof e === "object" && "default" in
 const dedent__default = /* @__PURE__ */ _interopDefaultCompat(dedent);
 const positionMap = {
   top: {
-    left: "top-start",
+    start: "top-start",
     center: "top",
-    right: "top-end"
+    end: "top-end"
   },
   bottom: {
-    left: "bottom-start",
+    start: "bottom-start",
     center: "bottom",
-    right: "bottom-end"
+    end: "bottom-end"
+  },
+  left: {
+    start: "left-start",
+    center: "left",
+    end: "left-end"
+  },
+  right: {
+    start: "right-start",
+    center: "right",
+    end: "right-end"
   }
 };
 function getFloatingUiPosition(placement, align) {
@@ -33,7 +43,7 @@ const PopoverContent = react.forwardRef(
   ({
     id,
     role,
-    align = "left",
+    align = "start",
     width = "content",
     placement = "bottom",
     lockPlacement = false,
@@ -137,7 +147,7 @@ const PopoverContent = react.forwardRef(
         }
       }, lib_components_private_animationTimeout_cjs.animationTimeout);
     }, [open, enterFocusRef]);
-    const resolvedPlacement = floatingUiEvaluatedPosition?.startsWith("top") ? "top" : "bottom";
+    const resolvedPlacement = floatingUiEvaluatedPosition?.split("-")[0] ?? "bottom";
     react.useEffect(() => {
       if (onPlacementChange) {
         onPlacementChange({

package/dist/lib/components/private/Popover/Popover.mjs

@@ -11,14 +11,24 @@ import { backdrop, delayVisibility, invertPlacement, animation } from "./Popover
 import { normalizeResponsiveValue } from "../../../css/atoms/sprinkles.css.mjs";
 const positionMap = {
   top: {
-    left: "top-start",
+    start: "top-start",
     center: "top",
-    right: "top-end"
+    end: "top-end"
   },
   bottom: {
-    left: "bottom-start",
+    start: "bottom-start",
     center: "bottom",
-    right: "bottom-end"
+    end: "bottom-end"
+  },
+  left: {
+    start: "left-start",
+    center: "left",
+    end: "left-end"
+  },
+  right: {
+    start: "right-start",
+    center: "right",
+    end: "right-end"
   }
 };
 function getFloatingUiPosition(placement, align) {
@@ -30,7 +40,7 @@ const PopoverContent = forwardRef(
   ({
     id,
     role,
-    align = "left",
+    align = "start",
     width = "content",
     placement = "bottom",
     lockPlacement = false,
@@ -134,7 +144,7 @@ const PopoverContent = forwardRef(
         }
       }, animationTimeout);
     }, [open, enterFocusRef]);
-    const resolvedPlacement = floatingUiEvaluatedPosition?.startsWith("top") ? "top" : "bottom";
+    const resolvedPlacement = floatingUiEvaluatedPosition?.split("-")[0] ?? "bottom";
     useEffect(() => {
       if (onPlacementChange) {
         onPlacementChange({

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "braid-design-system",
-  "version": "33.13.1-component-types-20251210033001",
+  "version": "33.14.0",
   "description": "Themeable design system for the SEEK Group",
   "homepage": "https://seek-oss.github.io/braid-design-system/",
   "bugs": {