braid-design-system 33.12.2 → 33.12.4

package/CHANGELOG.md

@@ -1,5 +1,29 @@
 # braid-design-system
 
+## 33.12.4
+
+### Patch Changes
+
+- **Autosuggest, MenuRenderer, OverflowMenu, TooltipRenderer**: Ensure `TooltipRenderer` is correctly positioned on Android devices ([#1926](https://github.com/seek-oss/braid-design-system/pull/1926))
+
+  Additionally, adjust `TooltipRenderer` positioning at screen edges, removing extra edge spacing.
+  This ensures the tooltip arrow is more closely aligned with the trigger when the trigger is near the edge of the screen.
+
+## 33.12.3
+
+### Patch Changes
+
+- **TooltipRenderer:** Ensure Chinese text is not wrapped incorrectly ([#1916](https://github.com/seek-oss/braid-design-system/pull/1916))
+
+  Right aligned tooltip triggers with tooltips containing long unbroken Chinese text are no longer forcibly broken across many lines.
+  This was due to the use of `overflow-wrap: break-word;` used to break long strings of Latin characters—guarding against broken layouts.
+
+  For Chinese, Japanese and Korean (CJK) character sets, to avoid the unwanted line breaks it is recommened to apply the `word-break: keep-all;` CSS property.
+
+  See [MDN reference] for more information.
+
+  [MDN reference]: https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/word-break#keep-all
+
 ## 33.12.2
 
 ### Patch Changes
@@ -2478,9 +2502,8 @@ For more detail on the specific changes in this release, please read on.
   ```jsx
   // playroom.config.js
   module.exports = {
-    frameComponent: require.resolve(
-      'braid-design-system/playroom/FrameComponent',
-    ),
+    frameComponent:
+      require.resolve('braid-design-system/playroom/FrameComponent'),
     components: require.resolve('braid-design-system/playroom/components'),
     snippets: require.resolve('braid-design-system/playroom/snippets'),
     scope: require.resolve('braid-design-system/playroom/scope'),
@@ -2625,9 +2648,8 @@ For more detail on the specific changes in this release, please read on.
   ```jsx
   // playroom.config.js
   module.exports = {
-    frameComponent: require.resolve(
-      'braid-design-system/playroom/FrameComponent.tsx',
-    ),
+    frameComponent:
+      require.resolve('braid-design-system/playroom/FrameComponent.tsx'),
     components: require.resolve('braid-design-system/playroom/components.ts'),
     snippets: require.resolve('braid-design-system/playroom/snippets.ts'),
     scope: require.resolve('braid-design-system/playroom/scope.ts'),

package/dist/index.d.mts

@@ -1,9 +1,9 @@
 import * as react from 'react';
 import react__default, { ForwardRefRenderFunction, AnchorHTMLAttributes, ComponentType, ReactNode, ReactElement, AllHTMLAttributes, ElementType, RefAttributes, Ref, RefObject, KeyboardEvent, MouseEvent, FormEvent, RefCallback } from 'react';
-import { FontMetrics } from '@capsizecss/core';
 import * as clsx from 'clsx';
 import { ClassValue } from 'clsx';
 import { Optional } from 'utility-types';
+import { FontMetrics } from '@capsizecss/core';
 import * as _vanilla_extract_sprinkles from '@vanilla-extract/sprinkles';
 import { ConditionalValue, RequiredConditionalValue } from '@vanilla-extract/sprinkles';
 import { StyleRule } from '@vanilla-extract/css';
@@ -303,23 +303,23 @@ type BraidTheme = ReturnType<typeof makeBraidTheme>;
 interface LinkComponentProps extends AnchorHTMLAttributes<HTMLAnchorElement> {
     href: string;
 }
-declare const makeLinkComponent: (render: ForwardRefRenderFunction<HTMLAnchorElement, LinkComponentProps>) => {
+declare const makeLinkComponent$1: (render: ForwardRefRenderFunction<HTMLAnchorElement, LinkComponentProps>) => {
     readonly __forwardRef__: react.ForwardRefExoticComponent<LinkComponentProps & react.RefAttributes<HTMLAnchorElement>>;
 };
-type LinkComponent$1 = ReturnType<typeof makeLinkComponent> | ComponentType<LinkComponentProps>;
+type LinkComponent$1 = ReturnType<typeof makeLinkComponent$1> | ComponentType<LinkComponentProps>;
 interface BraidProviderProps {
     theme: BraidTheme;
     styleBody?: boolean;
     linkComponent?: LinkComponent$1;
     children: ReactNode;
 }
-declare const BraidProvider: ({ theme, styleBody, linkComponent, children, }: BraidProviderProps) => react.JSX.Element;
+declare const BraidProvider$1: ({ theme, styleBody, linkComponent, children, }: BraidProviderProps) => react.JSX.Element;
 
 interface BraidPortalProps {
     children: ReactNode;
     container?: Element;
 }
-declare const BraidPortal: ({ children, container }: BraidPortalProps) => react.ReactPortal;
+declare const BraidPortal$1: ({ children, container }: BraidPortalProps) => react.ReactPortal;
 
 interface ThemeNameConsumerProps {
     children(name: string): ReactElement;
@@ -3421,6 +3421,13 @@ interface LoaderProps {
 declare const Loader: ({ size, "aria-label": ariaLabel, delayVisibility, data, ...restProps }: LoaderProps) => react.JSX.Element;
 
 type Placement = 'top' | 'bottom';
+interface PopoverPlacementData {
+    placement: Placement;
+    arrow?: {
+        x?: number;
+        y?: number;
+    };
+}
 interface PopoverProps {
     id?: string;
     role: NonNullable<AllHTMLAttributes<HTMLElement>['role'] | false>;
@@ -3433,8 +3440,10 @@ interface PopoverProps {
     modal?: boolean;
     open: boolean;
     onClose?: () => void;
+    onPlacementChange?: (data: PopoverPlacementData) => void;
     triggerRef: RefObject<HTMLElement | null>;
     enterFocusRef?: RefObject<HTMLElement | null>;
+    arrowRef?: RefObject<HTMLElement | null>;
     children: ReactNode;
 }
 
@@ -5209,6 +5218,13 @@ interface PlaceholderProps {
 }
 declare const Placeholder: ({ label, width, height, shape, image, imageSize, }: PlaceholderProps) => react.JSX.Element;
 
+/**
+ * Override Braid exports that we don't want in Playroom
+ */
+declare const BraidPortal: undefined;
+declare const BraidProvider: undefined;
+declare const makeLinkComponent: undefined;
+
 declare function useScope(): {
     setDefaultState: (key: string, value: any) => void;
     getState: (key: string) => any;
@@ -5360,5 +5376,5 @@ declare const _default: {
     code: string;
 }[];
 
-export { Accordion$1 as Accordion, Accordion as Accordion$1, AccordionItem$1 as AccordionItem, AccordionItem as AccordionItem$1, Actions, Alert$1 as Alert, Alert as Alert$1, Autosuggest$1 as Autosuggest, Autosuggest as Autosuggest$1, Badge$1 as Badge, Badge as Badge$1, Bleed$1 as Bleed, Bleed as Bleed$1, PublicBox as Box, Box as Box$1, BoxRenderer, BraidPortal, BraidProvider, BraidTestProvider, Button$1 as Button, Button as Button$1, ButtonIcon$1 as ButtonIcon, ButtonIcon as ButtonIcon$1, ButtonLink$1 as ButtonLink, ButtonLink as ButtonLink$1, Card$1 as Card, Card as Card$1, Checkbox$1 as Checkbox, Checkbox as Checkbox$1, CheckboxStandalone$1 as CheckboxStandalone, CheckboxStandalone as CheckboxStandalone$1, Column, Columns$1 as Columns, Columns as Columns$1, ContentBlock, Dialog$1 as Dialog, Dialog as Dialog$1, Disclosure$1 as Disclosure, Disclosure as Disclosure$1, Divider, Drawer$1 as Drawer, Drawer as Drawer$1, Dropdown$1 as Dropdown, Dropdown as Dropdown$1, FieldLabel$1 as FieldLabel, FieldLabel as FieldLabel$1, FieldMessage$1 as FieldMessage, FieldMessage as FieldMessage$1, Heading$1 as Heading, Heading as Heading$1, Hidden, HiddenVisually, IconAI, IconAdd, IconArrow, IconAttachment, IconBluetooth, IconBold, IconBookmark, IconBulletList, IconCareer, IconCategory, IconCaution, IconChecklist, IconChevron, IconClear, IconCompany, IconCompose, IconCopy, IconCoverLetter, IconCreditCard, IconCritical, IconDate, IconDelete, IconDesktop, IconDisallow, IconDocument, IconDocumentBroken, IconDownload, IconEdit, IconEducation, IconEnlarge, IconExperience, IconFilter, IconFlag, IconGift, IconGlobe, IconGrid, IconHash, IconHeart, IconHelp, IconHistory, IconHome, IconImage, IconInfo, IconInvoice, IconItalic, IconLanguage, IconLicence, IconLink, IconLinkBroken, IconList, IconLocation, IconMail, IconMessage, IconMicrophone, IconMinus, IconMobile, IconMoney, IconNewWindow, IconNote, IconNotification, IconNumberedList, IconOverflow, IconPeople, IconPersonAdd, IconPersonVerified, IconPhone, IconPlatformAndroid, IconPlatformApple, IconPositive, IconPrint, IconProfile, IconPromote, IconQR, IconRecommended, IconRedo, IconRefresh, IconRenderer, IconResume, IconRocket, IconSearch, IconSecurity, IconSend, IconSent, IconSentiment, IconSettings, IconShare, IconSkills, IconSocialFacebook, IconSocialGitHub, IconSocialInstagram, IconSocialLinkedIn, IconSocialMedium, IconSocialTiktok, IconSocialX, IconSocialYouTube, IconSort, IconStar, IconStatistics, IconSubCategory, IconTag, IconThumb, IconTick, IconTime, IconTip, IconTitle, IconUndo, IconUpload, IconVideo, IconVisibility, IconWorkExperience, IconZoomIn, IconZoomOut, Inline$1 as Inline, Inline as Inline$1, Link$1 as Link, Link as Link$1, List$1 as List, List as List$1, Loader, MenuItem$1 as MenuItem, MenuItem as MenuItem$1, MenuItemCheckbox$1 as MenuItemCheckbox, MenuItemCheckbox as MenuItemCheckbox$1, MenuItemDivider, MenuItemLink$1 as MenuItemLink, MenuItemLink as MenuItemLink$1, MenuRenderer, MonthPicker$1 as MonthPicker, MonthPicker as MonthPicker$1, Notice$1 as Notice, Notice as Notice$1, OverflowMenu, Page, PageBlock, Pagination$1 as Pagination, Pagination as Pagination$1, PasswordField$1 as PasswordField, PasswordField as PasswordField$1, Placeholder, RadioGroup$1 as RadioGroup, RadioGroup as RadioGroup$1, RadioItem, Rating$1 as Rating, Rating as Rating$1, Secondary, Spread$1 as Spread, Spread as Spread$1, Stack$1 as Stack, Stack as Stack$1, Step$1 as Step, Stepper, Strong, Tab$1 as Tab, Tab as Tab$1, TabPanel, TabPanels, Table, TableBody, TableCell, TableFooter, TableHeader, TableHeaderCell, TableRow, Tabs$1 as Tabs, Tabs as Tabs$1, TabsProvider, Tag$1 as Tag, Tag as Tag$1, Text, TextDropdown$1 as TextDropdown, TextDropdown as TextDropdown$1, TextField$1 as TextField, TextField as TextField$1, TextLink, TextLinkButton, Textarea$1 as Textarea, Textarea as Textarea$1, ThemeNameConsumer, Tiles$1 as Tiles, Tiles as Tiles$1, ToastProvider, Toggle$1 as Toggle, Toggle as Toggle$1, TooltipRenderer, _default$1 as _default, _default as _default$1, _default$6 as _default$2, _default$2 as _default$3, _default$4, _default$5, _default$3 as _default$6, atoms, breakpoints, colorModeStyle, filterSuggestions, globalHeadingStyle, globalTextStyle, makeLinkComponent, outlineStyle, responsiveStyle, useColor, useResponsiveValue, useScope, useSpace, useThemeName, useToast, vars };
+export { Accordion$1 as Accordion, Accordion as Accordion$1, AccordionItem$1 as AccordionItem, AccordionItem as AccordionItem$1, Actions, Alert$1 as Alert, Alert as Alert$1, Autosuggest$1 as Autosuggest, Autosuggest as Autosuggest$1, Badge$1 as Badge, Badge as Badge$1, Bleed$1 as Bleed, Bleed as Bleed$1, PublicBox as Box, Box as Box$1, BoxRenderer, BraidPortal$1 as BraidPortal, BraidPortal as BraidPortal$1, BraidProvider$1 as BraidProvider, BraidProvider as BraidProvider$1, BraidTestProvider, Button$1 as Button, Button as Button$1, ButtonIcon$1 as ButtonIcon, ButtonIcon as ButtonIcon$1, ButtonLink$1 as ButtonLink, ButtonLink as ButtonLink$1, Card$1 as Card, Card as Card$1, Checkbox$1 as Checkbox, Checkbox as Checkbox$1, CheckboxStandalone$1 as CheckboxStandalone, CheckboxStandalone as CheckboxStandalone$1, Column, Columns$1 as Columns, Columns as Columns$1, ContentBlock, Dialog$1 as Dialog, Dialog as Dialog$1, Disclosure$1 as Disclosure, Disclosure as Disclosure$1, Divider, Drawer$1 as Drawer, Drawer as Drawer$1, Dropdown$1 as Dropdown, Dropdown as Dropdown$1, FieldLabel$1 as FieldLabel, FieldLabel as FieldLabel$1, FieldMessage$1 as FieldMessage, FieldMessage as FieldMessage$1, Heading$1 as Heading, Heading as Heading$1, Hidden, HiddenVisually, IconAI, IconAdd, IconArrow, IconAttachment, IconBluetooth, IconBold, IconBookmark, IconBulletList, IconCareer, IconCategory, IconCaution, IconChecklist, IconChevron, IconClear, IconCompany, IconCompose, IconCopy, IconCoverLetter, IconCreditCard, IconCritical, IconDate, IconDelete, IconDesktop, IconDisallow, IconDocument, IconDocumentBroken, IconDownload, IconEdit, IconEducation, IconEnlarge, IconExperience, IconFilter, IconFlag, IconGift, IconGlobe, IconGrid, IconHash, IconHeart, IconHelp, IconHistory, IconHome, IconImage, IconInfo, IconInvoice, IconItalic, IconLanguage, IconLicence, IconLink, IconLinkBroken, IconList, IconLocation, IconMail, IconMessage, IconMicrophone, IconMinus, IconMobile, IconMoney, IconNewWindow, IconNote, IconNotification, IconNumberedList, IconOverflow, IconPeople, IconPersonAdd, IconPersonVerified, IconPhone, IconPlatformAndroid, IconPlatformApple, IconPositive, IconPrint, IconProfile, IconPromote, IconQR, IconRecommended, IconRedo, IconRefresh, IconRenderer, IconResume, IconRocket, IconSearch, IconSecurity, IconSend, IconSent, IconSentiment, IconSettings, IconShare, IconSkills, IconSocialFacebook, IconSocialGitHub, IconSocialInstagram, IconSocialLinkedIn, IconSocialMedium, IconSocialTiktok, IconSocialX, IconSocialYouTube, IconSort, IconStar, IconStatistics, IconSubCategory, IconTag, IconThumb, IconTick, IconTime, IconTip, IconTitle, IconUndo, IconUpload, IconVideo, IconVisibility, IconWorkExperience, IconZoomIn, IconZoomOut, Inline$1 as Inline, Inline as Inline$1, Link$1 as Link, Link as Link$1, List$1 as List, List as List$1, Loader, MenuItem$1 as MenuItem, MenuItem as MenuItem$1, MenuItemCheckbox$1 as MenuItemCheckbox, MenuItemCheckbox as MenuItemCheckbox$1, MenuItemDivider, MenuItemLink$1 as MenuItemLink, MenuItemLink as MenuItemLink$1, MenuRenderer, MonthPicker$1 as MonthPicker, MonthPicker as MonthPicker$1, Notice$1 as Notice, Notice as Notice$1, OverflowMenu, Page, PageBlock, Pagination$1 as Pagination, Pagination as Pagination$1, PasswordField$1 as PasswordField, PasswordField as PasswordField$1, Placeholder, RadioGroup$1 as RadioGroup, RadioGroup as RadioGroup$1, RadioItem, Rating$1 as Rating, Rating as Rating$1, Secondary, Spread$1 as Spread, Spread as Spread$1, Stack$1 as Stack, Stack as Stack$1, Step$1 as Step, Stepper, Strong, Tab$1 as Tab, Tab as Tab$1, TabPanel, TabPanels, Table, TableBody, TableCell, TableFooter, TableHeader, TableHeaderCell, TableRow, Tabs$1 as Tabs, Tabs as Tabs$1, TabsProvider, Tag$1 as Tag, Tag as Tag$1, Text, TextDropdown$1 as TextDropdown, TextDropdown as TextDropdown$1, TextField$1 as TextField, TextField as TextField$1, TextLink, TextLinkButton, Textarea$1 as Textarea, Textarea as Textarea$1, ThemeNameConsumer, Tiles$1 as Tiles, Tiles as Tiles$1, ToastProvider, Toggle$1 as Toggle, Toggle as Toggle$1, TooltipRenderer, _default$1 as _default, _default as _default$1, _default$6 as _default$2, _default$2 as _default$3, _default$4, _default$5, _default$3 as _default$6, atoms, breakpoints, colorModeStyle, filterSuggestions, globalHeadingStyle, globalTextStyle, makeLinkComponent$1 as makeLinkComponent, makeLinkComponent as makeLinkComponent$1, outlineStyle, responsiveStyle, useColor, useResponsiveValue, useScope, useSpace, useThemeName, useToast, vars };
 export type { Breakpoint, LinkComponent };

package/dist/index.d.ts

@@ -1,9 +1,9 @@
 import * as react from 'react';
 import react__default, { ForwardRefRenderFunction, AnchorHTMLAttributes, ComponentType, ReactNode, ReactElement, AllHTMLAttributes, ElementType, RefAttributes, Ref, RefObject, KeyboardEvent, MouseEvent, FormEvent, RefCallback } from 'react';
-import { FontMetrics } from '@capsizecss/core';
 import * as clsx from 'clsx';
 import { ClassValue } from 'clsx';
 import { Optional } from 'utility-types';
+import { FontMetrics } from '@capsizecss/core';
 import * as _vanilla_extract_sprinkles from '@vanilla-extract/sprinkles';
 import { ConditionalValue, RequiredConditionalValue } from '@vanilla-extract/sprinkles';
 import { StyleRule } from '@vanilla-extract/css';
@@ -303,23 +303,23 @@ type BraidTheme = ReturnType<typeof makeBraidTheme>;
 interface LinkComponentProps extends AnchorHTMLAttributes<HTMLAnchorElement> {
     href: string;
 }
-declare const makeLinkComponent: (render: ForwardRefRenderFunction<HTMLAnchorElement, LinkComponentProps>) => {
+declare const makeLinkComponent$1: (render: ForwardRefRenderFunction<HTMLAnchorElement, LinkComponentProps>) => {
     readonly __forwardRef__: react.ForwardRefExoticComponent<LinkComponentProps & react.RefAttributes<HTMLAnchorElement>>;
 };
-type LinkComponent$1 = ReturnType<typeof makeLinkComponent> | ComponentType<LinkComponentProps>;
+type LinkComponent$1 = ReturnType<typeof makeLinkComponent$1> | ComponentType<LinkComponentProps>;
 interface BraidProviderProps {
     theme: BraidTheme;
     styleBody?: boolean;
     linkComponent?: LinkComponent$1;
     children: ReactNode;
 }
-declare const BraidProvider: ({ theme, styleBody, linkComponent, children, }: BraidProviderProps) => react.JSX.Element;
+declare const BraidProvider$1: ({ theme, styleBody, linkComponent, children, }: BraidProviderProps) => react.JSX.Element;
 
 interface BraidPortalProps {
     children: ReactNode;
     container?: Element;
 }
-declare const BraidPortal: ({ children, container }: BraidPortalProps) => react.ReactPortal;
+declare const BraidPortal$1: ({ children, container }: BraidPortalProps) => react.ReactPortal;
 
 interface ThemeNameConsumerProps {
     children(name: string): ReactElement;
@@ -3421,6 +3421,13 @@ interface LoaderProps {
 declare const Loader: ({ size, "aria-label": ariaLabel, delayVisibility, data, ...restProps }: LoaderProps) => react.JSX.Element;
 
 type Placement = 'top' | 'bottom';
+interface PopoverPlacementData {
+    placement: Placement;
+    arrow?: {
+        x?: number;
+        y?: number;
+    };
+}
 interface PopoverProps {
     id?: string;
     role: NonNullable<AllHTMLAttributes<HTMLElement>['role'] | false>;
@@ -3433,8 +3440,10 @@ interface PopoverProps {
     modal?: boolean;
     open: boolean;
     onClose?: () => void;
+    onPlacementChange?: (data: PopoverPlacementData) => void;
     triggerRef: RefObject<HTMLElement | null>;
     enterFocusRef?: RefObject<HTMLElement | null>;
+    arrowRef?: RefObject<HTMLElement | null>;
     children: ReactNode;
 }
 
@@ -5209,6 +5218,13 @@ interface PlaceholderProps {
 }
 declare const Placeholder: ({ label, width, height, shape, image, imageSize, }: PlaceholderProps) => react.JSX.Element;
 
+/**
+ * Override Braid exports that we don't want in Playroom
+ */
+declare const BraidPortal: undefined;
+declare const BraidProvider: undefined;
+declare const makeLinkComponent: undefined;
+
 declare function useScope(): {
     setDefaultState: (key: string, value: any) => void;
     getState: (key: string) => any;
@@ -5360,5 +5376,5 @@ declare const _default: {
     code: string;
 }[];
 
-export { Accordion$1 as Accordion, Accordion as Accordion$1, AccordionItem$1 as AccordionItem, AccordionItem as AccordionItem$1, Actions, Alert$1 as Alert, Alert as Alert$1, Autosuggest$1 as Autosuggest, Autosuggest as Autosuggest$1, Badge$1 as Badge, Badge as Badge$1, Bleed$1 as Bleed, Bleed as Bleed$1, PublicBox as Box, Box as Box$1, BoxRenderer, BraidPortal, BraidProvider, BraidTestProvider, Button$1 as Button, Button as Button$1, ButtonIcon$1 as ButtonIcon, ButtonIcon as ButtonIcon$1, ButtonLink$1 as ButtonLink, ButtonLink as ButtonLink$1, Card$1 as Card, Card as Card$1, Checkbox$1 as Checkbox, Checkbox as Checkbox$1, CheckboxStandalone$1 as CheckboxStandalone, CheckboxStandalone as CheckboxStandalone$1, Column, Columns$1 as Columns, Columns as Columns$1, ContentBlock, Dialog$1 as Dialog, Dialog as Dialog$1, Disclosure$1 as Disclosure, Disclosure as Disclosure$1, Divider, Drawer$1 as Drawer, Drawer as Drawer$1, Dropdown$1 as Dropdown, Dropdown as Dropdown$1, FieldLabel$1 as FieldLabel, FieldLabel as FieldLabel$1, FieldMessage$1 as FieldMessage, FieldMessage as FieldMessage$1, Heading$1 as Heading, Heading as Heading$1, Hidden, HiddenVisually, IconAI, IconAdd, IconArrow, IconAttachment, IconBluetooth, IconBold, IconBookmark, IconBulletList, IconCareer, IconCategory, IconCaution, IconChecklist, IconChevron, IconClear, IconCompany, IconCompose, IconCopy, IconCoverLetter, IconCreditCard, IconCritical, IconDate, IconDelete, IconDesktop, IconDisallow, IconDocument, IconDocumentBroken, IconDownload, IconEdit, IconEducation, IconEnlarge, IconExperience, IconFilter, IconFlag, IconGift, IconGlobe, IconGrid, IconHash, IconHeart, IconHelp, IconHistory, IconHome, IconImage, IconInfo, IconInvoice, IconItalic, IconLanguage, IconLicence, IconLink, IconLinkBroken, IconList, IconLocation, IconMail, IconMessage, IconMicrophone, IconMinus, IconMobile, IconMoney, IconNewWindow, IconNote, IconNotification, IconNumberedList, IconOverflow, IconPeople, IconPersonAdd, IconPersonVerified, IconPhone, IconPlatformAndroid, IconPlatformApple, IconPositive, IconPrint, IconProfile, IconPromote, IconQR, IconRecommended, IconRedo, IconRefresh, IconRenderer, IconResume, IconRocket, IconSearch, IconSecurity, IconSend, IconSent, IconSentiment, IconSettings, IconShare, IconSkills, IconSocialFacebook, IconSocialGitHub, IconSocialInstagram, IconSocialLinkedIn, IconSocialMedium, IconSocialTiktok, IconSocialX, IconSocialYouTube, IconSort, IconStar, IconStatistics, IconSubCategory, IconTag, IconThumb, IconTick, IconTime, IconTip, IconTitle, IconUndo, IconUpload, IconVideo, IconVisibility, IconWorkExperience, IconZoomIn, IconZoomOut, Inline$1 as Inline, Inline as Inline$1, Link$1 as Link, Link as Link$1, List$1 as List, List as List$1, Loader, MenuItem$1 as MenuItem, MenuItem as MenuItem$1, MenuItemCheckbox$1 as MenuItemCheckbox, MenuItemCheckbox as MenuItemCheckbox$1, MenuItemDivider, MenuItemLink$1 as MenuItemLink, MenuItemLink as MenuItemLink$1, MenuRenderer, MonthPicker$1 as MonthPicker, MonthPicker as MonthPicker$1, Notice$1 as Notice, Notice as Notice$1, OverflowMenu, Page, PageBlock, Pagination$1 as Pagination, Pagination as Pagination$1, PasswordField$1 as PasswordField, PasswordField as PasswordField$1, Placeholder, RadioGroup$1 as RadioGroup, RadioGroup as RadioGroup$1, RadioItem, Rating$1 as Rating, Rating as Rating$1, Secondary, Spread$1 as Spread, Spread as Spread$1, Stack$1 as Stack, Stack as Stack$1, Step$1 as Step, Stepper, Strong, Tab$1 as Tab, Tab as Tab$1, TabPanel, TabPanels, Table, TableBody, TableCell, TableFooter, TableHeader, TableHeaderCell, TableRow, Tabs$1 as Tabs, Tabs as Tabs$1, TabsProvider, Tag$1 as Tag, Tag as Tag$1, Text, TextDropdown$1 as TextDropdown, TextDropdown as TextDropdown$1, TextField$1 as TextField, TextField as TextField$1, TextLink, TextLinkButton, Textarea$1 as Textarea, Textarea as Textarea$1, ThemeNameConsumer, Tiles$1 as Tiles, Tiles as Tiles$1, ToastProvider, Toggle$1 as Toggle, Toggle as Toggle$1, TooltipRenderer, _default$1 as _default, _default as _default$1, _default$6 as _default$2, _default$2 as _default$3, _default$4, _default$5, _default$3 as _default$6, atoms, breakpoints, colorModeStyle, filterSuggestions, globalHeadingStyle, globalTextStyle, makeLinkComponent, outlineStyle, responsiveStyle, useColor, useResponsiveValue, useScope, useSpace, useThemeName, useToast, vars };
+export { Accordion$1 as Accordion, Accordion as Accordion$1, AccordionItem$1 as AccordionItem, AccordionItem as AccordionItem$1, Actions, Alert$1 as Alert, Alert as Alert$1, Autosuggest$1 as Autosuggest, Autosuggest as Autosuggest$1, Badge$1 as Badge, Badge as Badge$1, Bleed$1 as Bleed, Bleed as Bleed$1, PublicBox as Box, Box as Box$1, BoxRenderer, BraidPortal$1 as BraidPortal, BraidPortal as BraidPortal$1, BraidProvider$1 as BraidProvider, BraidProvider as BraidProvider$1, BraidTestProvider, Button$1 as Button, Button as Button$1, ButtonIcon$1 as ButtonIcon, ButtonIcon as ButtonIcon$1, ButtonLink$1 as ButtonLink, ButtonLink as ButtonLink$1, Card$1 as Card, Card as Card$1, Checkbox$1 as Checkbox, Checkbox as Checkbox$1, CheckboxStandalone$1 as CheckboxStandalone, CheckboxStandalone as CheckboxStandalone$1, Column, Columns$1 as Columns, Columns as Columns$1, ContentBlock, Dialog$1 as Dialog, Dialog as Dialog$1, Disclosure$1 as Disclosure, Disclosure as Disclosure$1, Divider, Drawer$1 as Drawer, Drawer as Drawer$1, Dropdown$1 as Dropdown, Dropdown as Dropdown$1, FieldLabel$1 as FieldLabel, FieldLabel as FieldLabel$1, FieldMessage$1 as FieldMessage, FieldMessage as FieldMessage$1, Heading$1 as Heading, Heading as Heading$1, Hidden, HiddenVisually, IconAI, IconAdd, IconArrow, IconAttachment, IconBluetooth, IconBold, IconBookmark, IconBulletList, IconCareer, IconCategory, IconCaution, IconChecklist, IconChevron, IconClear, IconCompany, IconCompose, IconCopy, IconCoverLetter, IconCreditCard, IconCritical, IconDate, IconDelete, IconDesktop, IconDisallow, IconDocument, IconDocumentBroken, IconDownload, IconEdit, IconEducation, IconEnlarge, IconExperience, IconFilter, IconFlag, IconGift, IconGlobe, IconGrid, IconHash, IconHeart, IconHelp, IconHistory, IconHome, IconImage, IconInfo, IconInvoice, IconItalic, IconLanguage, IconLicence, IconLink, IconLinkBroken, IconList, IconLocation, IconMail, IconMessage, IconMicrophone, IconMinus, IconMobile, IconMoney, IconNewWindow, IconNote, IconNotification, IconNumberedList, IconOverflow, IconPeople, IconPersonAdd, IconPersonVerified, IconPhone, IconPlatformAndroid, IconPlatformApple, IconPositive, IconPrint, IconProfile, IconPromote, IconQR, IconRecommended, IconRedo, IconRefresh, IconRenderer, IconResume, IconRocket, IconSearch, IconSecurity, IconSend, IconSent, IconSentiment, IconSettings, IconShare, IconSkills, IconSocialFacebook, IconSocialGitHub, IconSocialInstagram, IconSocialLinkedIn, IconSocialMedium, IconSocialTiktok, IconSocialX, IconSocialYouTube, IconSort, IconStar, IconStatistics, IconSubCategory, IconTag, IconThumb, IconTick, IconTime, IconTip, IconTitle, IconUndo, IconUpload, IconVideo, IconVisibility, IconWorkExperience, IconZoomIn, IconZoomOut, Inline$1 as Inline, Inline as Inline$1, Link$1 as Link, Link as Link$1, List$1 as List, List as List$1, Loader, MenuItem$1 as MenuItem, MenuItem as MenuItem$1, MenuItemCheckbox$1 as MenuItemCheckbox, MenuItemCheckbox as MenuItemCheckbox$1, MenuItemDivider, MenuItemLink$1 as MenuItemLink, MenuItemLink as MenuItemLink$1, MenuRenderer, MonthPicker$1 as MonthPicker, MonthPicker as MonthPicker$1, Notice$1 as Notice, Notice as Notice$1, OverflowMenu, Page, PageBlock, Pagination$1 as Pagination, Pagination as Pagination$1, PasswordField$1 as PasswordField, PasswordField as PasswordField$1, Placeholder, RadioGroup$1 as RadioGroup, RadioGroup as RadioGroup$1, RadioItem, Rating$1 as Rating, Rating as Rating$1, Secondary, Spread$1 as Spread, Spread as Spread$1, Stack$1 as Stack, Stack as Stack$1, Step$1 as Step, Stepper, Strong, Tab$1 as Tab, Tab as Tab$1, TabPanel, TabPanels, Table, TableBody, TableCell, TableFooter, TableHeader, TableHeaderCell, TableRow, Tabs$1 as Tabs, Tabs as Tabs$1, TabsProvider, Tag$1 as Tag, Tag as Tag$1, Text, TextDropdown$1 as TextDropdown, TextDropdown as TextDropdown$1, TextField$1 as TextField, TextField as TextField$1, TextLink, TextLinkButton, Textarea$1 as Textarea, Textarea as Textarea$1, ThemeNameConsumer, Tiles$1 as Tiles, Tiles as Tiles$1, ToastProvider, Toggle$1 as Toggle, Toggle as Toggle$1, TooltipRenderer, _default$1 as _default, _default as _default$1, _default$6 as _default$2, _default$2 as _default$3, _default$4, _default$5, _default$3 as _default$6, atoms, breakpoints, colorModeStyle, filterSuggestions, globalHeadingStyle, globalTextStyle, makeLinkComponent$1 as makeLinkComponent, makeLinkComponent as makeLinkComponent$1, outlineStyle, responsiveStyle, useColor, useResponsiveValue, useScope, useSpace, useThemeName, useToast, vars };
 export type { Breakpoint, LinkComponent };

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

@@ -7,16 +7,15 @@ const lib_hooks_useFallbackId_cjs = require("../../hooks/useFallbackId.cjs");
 const lib_hooks_useIsomorphicLayoutEffect_cjs = require("../../hooks/useIsomorphicLayoutEffect.cjs");
 const lib_components_Box_Box_cjs = require("../Box/Box.cjs");
 const lib_components_private_Popover_Popover_cjs = require("../private/Popover/Popover.cjs");
-const lib_components_private_animationTimeout_cjs = require("../private/animationTimeout.cjs");
 const lib_components_private_defaultTextProps_cjs = require("../private/defaultTextProps.cjs");
 const lib_components_useSpace_useSpace_cjs = require("../useSpace/useSpace.cjs");
 const lib_components_useThemeName_useThemeName_cjs = require("../useThemeName/useThemeName.cjs");
 const lib_components_TooltipRenderer_TooltipRenderer_css_cjs = require("./TooltipRenderer.css.cjs");
 const _interopDefaultCompat = (e) => e && typeof e === "object" && "default" in e ? e : { default: e };
 const isMobile__default = /* @__PURE__ */ _interopDefaultCompat(isMobile);
-const edgeOffset = "xxsmall";
 const offsetSpace = "small";
 const StaticTooltipContext = react.createContext(false);
+const clamp = (min, value, max) => Math.max(min, Math.min(value, max));
 const TooltipTextDefaultsProvider = ({
   children
 }) => {
@@ -31,35 +30,59 @@ const TooltipTextDefaultsProvider = ({
   );
 };
 const TooltipContent = ({
-  inferredPlacement,
-  arrowLeftOffset,
+  placement,
+  arrowPosition,
+  arrowRef,
   children
-}) => /* @__PURE__ */ jsxRuntime.jsx(
-  lib_components_Box_Box_cjs.Box,
-  {
-    textAlign: "left",
-    boxShadow: "large",
-    background: "neutral",
-    borderRadius: "large",
-    padding: "small",
-    marginX: edgeOffset,
-    className: [lib_components_TooltipRenderer_TooltipRenderer_css_cjs.maxWidth, lib_components_TooltipRenderer_TooltipRenderer_css_cjs.translateZ0],
-    children: /* @__PURE__ */ jsxRuntime.jsxs(TooltipTextDefaultsProvider, { children: [
-      /* @__PURE__ */ jsxRuntime.jsx(lib_components_Box_Box_cjs.Box, { className: lib_components_TooltipRenderer_TooltipRenderer_css_cjs.overflowWrap, zIndex: 1, position: "relative", children }),
-      /* @__PURE__ */ jsxRuntime.jsx(
-        lib_components_Box_Box_cjs.Box,
-        {
-          position: "fixed",
-          background: "neutral",
-          className: lib_components_TooltipRenderer_TooltipRenderer_css_cjs.arrow[inferredPlacement],
-          style: dynamic.assignInlineVars({
-            [lib_components_TooltipRenderer_TooltipRenderer_css_cjs.horizontalOffset]: `${arrowLeftOffset}px`
-          })
-        }
-      )
-    ] })
-  }
-);
+}) => {
+  const arrowX = arrowPosition?.x;
+  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 [tooltipWidth, setTooltipWidth] = react.useState(0);
+  const tooltipContainerRef = react.useRef(null);
+  lib_hooks_useIsomorphicLayoutEffect_cjs.useIsomorphicLayoutEffect(() => {
+    if (!tooltipContainerRef.current) {
+      return;
+    }
+    const { width } = tooltipContainerRef.current.getBoundingClientRect();
+    setTooltipWidth(width);
+  }, [children]);
+  const clampedArrowX = arrowX !== void 0 && tooltipWidth > 0 ? clamp(
+    edgeOffsetInPx,
+    arrowX,
+    tooltipWidth - edgeOffsetInPx - arrowWidthOffset
+  ) : arrowX;
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    lib_components_Box_Box_cjs.Box,
+    {
+      ref: tooltipContainerRef,
+      textAlign: "left",
+      boxShadow: "large",
+      background: "neutral",
+      borderRadius: "large",
+      padding: "small",
+      className: [lib_components_TooltipRenderer_TooltipRenderer_css_cjs.maxWidth, lib_components_TooltipRenderer_TooltipRenderer_css_cjs.translateZ0],
+      children: /* @__PURE__ */ jsxRuntime.jsxs(TooltipTextDefaultsProvider, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx(lib_components_Box_Box_cjs.Box, { className: lib_components_TooltipRenderer_TooltipRenderer_css_cjs.overflowWrap, zIndex: 1, position: "relative", children }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          lib_components_Box_Box_cjs.Box,
+          {
+            ref: arrowRef,
+            position: "fixed",
+            background: "neutral",
+            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
+            })
+          }
+        )
+      ] })
+    }
+  );
+};
 const TooltipRenderer = ({
   id,
   tooltip,
@@ -67,16 +90,11 @@ const TooltipRenderer = ({
   children
 }) => {
   const resolvedId = lib_hooks_useFallbackId_cjs.useFallbackId(id);
-  const tooltipRef = react.useRef(null);
   const triggerRef = react.useRef(null);
+  const arrowRef = react.useRef(null);
   const [open, setOpen] = react.useState(false);
-  const [triggerPosition, setTriggerPosition] = react.useState(
-    void 0
-  );
-  const [tooltipPosition, setTooltipPosition] = react.useState(
-    void 0
-  );
-  const { grid, space } = lib_components_useSpace_useSpace_cjs.useSpace();
+  const [resolvedPlacement, setResolvedPlacement] = react.useState(placement);
+  const [arrowPosition, setArrowPosition] = react.useState();
   const isStatic = react.useContext(StaticTooltipContext);
   const isMobileDevice = react.useRef(isMobile__default.default()).current;
   const onScreen = react.useRef(null);
@@ -136,38 +154,6 @@ const TooltipRenderer = ({
       }
     };
   }, [open, isMobileDevice]);
-  const handleTooltipPosition = () => {
-    const setPositions = () => {
-      if (tooltipRef.current) {
-        setTooltipPosition(tooltipRef.current.getBoundingClientRect());
-      }
-      if (triggerRef.current) {
-        setTriggerPosition(triggerRef.current.getBoundingClientRect());
-      }
-    };
-    setTimeout(() => {
-      const frameId = requestAnimationFrame(setPositions);
-      return () => cancelAnimationFrame(frameId);
-    }, lib_components_private_animationTimeout_cjs.animationTimeout / 2);
-  };
-  lib_hooks_useIsomorphicLayoutEffect_cjs.useIsomorphicLayoutEffect(() => {
-    if (!showTooltip) {
-      return;
-    }
-    handleTooltipPosition();
-    window.addEventListener("resize", handleTooltipPosition);
-    return () => {
-      window.removeEventListener("resize", handleTooltipPosition);
-    };
-  }, [showTooltip]);
-  let inferredPlacement = placement;
-  let arrowLeftOffset = 0;
-  if (tooltipPosition && triggerPosition) {
-    inferredPlacement = tooltipPosition.top > triggerPosition.top ? "bottom" : "top";
-    const edgeOffsetInPx = space[edgeOffset] * grid;
-    const tooltipLeftToTriggerLeft = triggerPosition.left - tooltipPosition.left - edgeOffsetInPx;
-    arrowLeftOffset = tooltipLeftToTriggerLeft + triggerPosition.width / 2;
-  }
   return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
     children({
       triggerProps: {
@@ -183,7 +169,6 @@ const TooltipRenderer = ({
       {
         id: resolvedId,
         role: "tooltip",
-        ref: tooltipRef,
         offsetSpace,
         align: "center",
         placement,
@@ -192,12 +177,18 @@ const TooltipRenderer = ({
         modal: false,
         open: showTooltip,
         onClose: !isStatic ? () => setOpen(false) : void 0,
+        onPlacementChange: ({ placement: newPlacement, arrow }) => {
+          setResolvedPlacement(newPlacement);
+          setArrowPosition(arrow);
+        },
         triggerRef,
+        arrowRef,
         children: /* @__PURE__ */ jsxRuntime.jsx(
           TooltipContent,
           {
-            inferredPlacement,
-            arrowLeftOffset,
+            placement: resolvedPlacement,
+            arrowPosition,
+            arrowRef,
             children: tooltip
           }
         )

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

@@ -2,7 +2,6 @@
 const fileScope = require("@vanilla-extract/css/fileScope");
 const css = require("@vanilla-extract/css");
 const cssUtils = require("@vanilla-extract/css-utils");
-const lib_css_atoms_atomicProperties_cjs = require("../../css/atoms/atomicProperties.cjs");
 const lib_themes_vars_css_cjs = require("../../themes/vars.css.cjs");
 fileScope.setFileScope("src/lib/components/TooltipRenderer/TooltipRenderer.css.ts", "braid-design-system");
 const constants = {
@@ -13,18 +12,19 @@ const maxWidth = css.style({
   maxWidth: constants.maxWidth
 }, "maxWidth");
 const overflowWrap = css.style({
-  overflowWrap: "break-word"
+  overflowWrap: "break-word",
+  wordBreak: "keep-all"
 }, "overflowWrap");
 const translateZ0 = css.style({
   transform: "translateZ(0)"
 }, "translateZ0");
 const borderRadius = lib_themes_vars_css_cjs.vars.borderRadius.small;
 const offset = cssUtils.calc(constants.arrowSize).divide(2).negate().toString();
-const horizontalOffset = css.createVar("horizontalOffset");
-const arrowEdgePadding = "medium";
+const arrowX = css.createVar("arrowX");
+const arrowY = css.createVar("arrowY");
 const baseArrow = css.style({
-  left: `clamp(${[lib_css_atoms_atomicProperties_cjs.space[arrowEdgePadding], horizontalOffset, cssUtils.calc("100%").subtract(lib_css_atoms_atomicProperties_cjs.space[arrowEdgePadding])].join(", ")})`,
-  transform: "translateX(-50%)",
+  left: arrowX,
+  top: arrowY,
   visibility: "hidden",
   ":before": {
     visibility: "visible",
@@ -51,7 +51,9 @@ const arrow = css.styleVariants({
 }, "arrow");
 fileScope.endFileScope();
 exports.arrow = arrow;
-exports.horizontalOffset = horizontalOffset;
+exports.arrowX = arrowX;
+exports.arrowY = arrowY;
+exports.constants = constants;
 exports.maxWidth = maxWidth;
 exports.overflowWrap = overflowWrap;
 exports.translateZ0 = translateZ0;

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

@@ -1,7 +1,6 @@
 import { setFileScope, endFileScope } from "@vanilla-extract/css/fileScope";
 import { style, styleVariants, createVar } from "@vanilla-extract/css";
 import { calc } from "@vanilla-extract/css-utils";
-import { space } from "../../css/atoms/atomicProperties.mjs";
 import { vars } from "../../themes/vars.css.mjs";
 setFileScope("src/lib/components/TooltipRenderer/TooltipRenderer.css.ts", "braid-design-system");
 const constants = {
@@ -12,18 +11,19 @@ const maxWidth = style({
   maxWidth: constants.maxWidth
 }, "maxWidth");
 const overflowWrap = style({
-  overflowWrap: "break-word"
+  overflowWrap: "break-word",
+  wordBreak: "keep-all"
 }, "overflowWrap");
 const translateZ0 = style({
   transform: "translateZ(0)"
 }, "translateZ0");
 const borderRadius = vars.borderRadius.small;
 const offset = calc(constants.arrowSize).divide(2).negate().toString();
-const horizontalOffset = createVar("horizontalOffset");
-const arrowEdgePadding = "medium";
+const arrowX = createVar("arrowX");
+const arrowY = createVar("arrowY");
 const baseArrow = style({
-  left: `clamp(${[space[arrowEdgePadding], horizontalOffset, calc("100%").subtract(space[arrowEdgePadding])].join(", ")})`,
-  transform: "translateX(-50%)",
+  left: arrowX,
+  top: arrowY,
   visibility: "hidden",
   ":before": {
     visibility: "visible",
@@ -51,7 +51,9 @@ const arrow = styleVariants({
 endFileScope();
 export {
   arrow,
-  horizontalOffset,
+  arrowX,
+  arrowY,
+  constants,
   maxWidth,
   overflowWrap,
   translateZ0