braid-design-system 33.12.1 → 33.12.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (6) hide show
  1. package/CHANGELOG.md +10 -0
  2. package/dist/lib/components/private/Modal/Modal.cjs +0 -2
  3. package/dist/lib/components/private/Modal/Modal.mjs +0 -2
  4. package/dist/lib/components/private/Popover/Popover.cjs +12 -4
  5. package/dist/lib/components/private/Popover/Popover.mjs +12 -4
  6. package/package.json +3 -3
package/CHANGELOG.md CHANGED
@@ -1,5 +1,15 @@
1
1
  # braid-design-system
2
2
 
3
+ ## 33.12.2
4
+
5
+ ### Patch Changes
6
+
7
+ - **Autosuggest, MenuRenderer, TooltipRenderer:** Improve placement logic ([#1904](https://github.com/seek-oss/braid-design-system/pull/1904))
8
+
9
+ In `MenuRenderer`, if there is not enough space for the menu above or below the trigger, the menu will be positioned based on the `placement` prop.
10
+
11
+ - **Dialog, Drawer:** Ensure page elements are not interactive during close animation ([#1906](https://github.com/seek-oss/braid-design-system/pull/1906))
12
+
3
13
  ## 33.12.1
4
14
 
5
15
  ### Patch Changes
package/dist/lib/components/private/Modal/Modal.cjs CHANGED
@@ -42,7 +42,6 @@ const reducer = (prevState, action) => {
42
42
  case OPEN_MODAL: {
43
43
  switch (prevState) {
44
44
  case INITIAL:
45
- case CLOSING:
46
45
  case CLOSED: {
47
46
  return OPENING;
48
47
  }
@@ -165,7 +164,6 @@ const Modal = ({
165
164
  inset: 0,
166
165
  zIndex: "modalBackdrop",
167
166
  opacity: state !== OPEN ? 0 : void 0,
168
- pointerEvents: state === CLOSING ? "none" : void 0,
169
167
  className: [lib_components_private_Modal_Modal_css_cjs.backdrop, lib_components_private_Modal_Modal_css_cjs.transition[position]]
170
168
  }
171
169
  ),
package/dist/lib/components/private/Modal/Modal.mjs CHANGED
@@ -39,7 +39,6 @@ const reducer = (prevState, action) => {
39
39
  case OPEN_MODAL: {
40
40
  switch (prevState) {
41
41
  case INITIAL:
42
- case CLOSING:
43
42
  case CLOSED: {
44
43
  return OPENING;
45
44
  }
@@ -162,7 +161,6 @@ const Modal = ({
162
161
  inset: 0,
163
162
  zIndex: "modalBackdrop",
164
163
  opacity: state !== OPEN ? 0 : void 0,
165
- pointerEvents: state === CLOSING ? "none" : void 0,
166
164
  className: [backdrop, transition[position]]
167
165
  }
168
166
  ),
package/dist/lib/components/private/Popover/Popover.cjs CHANGED
@@ -119,12 +119,20 @@ const PopoverContent = react.forwardRef(
119
119
  if (!popoverBoundingRect) {
120
120
  return;
121
121
  }
122
- const { top, bottom } = popoverBoundingRect;
123
- const distanceFromBottom = window.innerHeight - bottom;
124
- if (placement === "top" && top < transitionThresholdInPx) {
122
+ const triggerBoundingRect = triggerRef.current?.getBoundingClientRect();
123
+ if (!triggerBoundingRect) {
124
+ return;
125
+ }
126
+ const { height: popoverHeight } = popoverBoundingRect;
127
+ const heightRequired = popoverHeight + transitionThresholdInPx;
128
+ const fitsAbove = triggerBoundingRect.top >= heightRequired;
129
+ const fitsBelow = window.innerHeight - triggerBoundingRect.bottom >= heightRequired;
130
+ if (!fitsAbove && fitsBelow) {
125
131
  setActualPlacement("bottom");
126
- } else if (placement === "bottom" && distanceFromBottom < transitionThresholdInPx) {
132
+ } else if (!fitsBelow && fitsAbove) {
127
133
  setActualPlacement("top");
134
+ } else {
135
+ setActualPlacement(placement);
128
136
  }
129
137
  };
130
138
  const handleHorizontalShift = () => {
package/dist/lib/components/private/Popover/Popover.mjs CHANGED
@@ -116,12 +116,20 @@ const PopoverContent = forwardRef(
116
116
  if (!popoverBoundingRect) {
117
117
  return;
118
118
  }
119
- const { top, bottom } = popoverBoundingRect;
120
- const distanceFromBottom = window.innerHeight - bottom;
121
- if (placement === "top" && top < transitionThresholdInPx) {
119
+ const triggerBoundingRect = triggerRef.current?.getBoundingClientRect();
120
+ if (!triggerBoundingRect) {
121
+ return;
122
+ }
123
+ const { height: popoverHeight } = popoverBoundingRect;
124
+ const heightRequired = popoverHeight + transitionThresholdInPx;
125
+ const fitsAbove = triggerBoundingRect.top >= heightRequired;
126
+ const fitsBelow = window.innerHeight - triggerBoundingRect.bottom >= heightRequired;
127
+ if (!fitsAbove && fitsBelow) {
122
128
  setActualPlacement("bottom");
123
- } else if (placement === "bottom" && distanceFromBottom < transitionThresholdInPx) {
129
+ } else if (!fitsBelow && fitsAbove) {
124
130
  setActualPlacement("top");
131
+ } else {
132
+ setActualPlacement(placement);
125
133
  }
126
134
  };
127
135
  const handleHorizontalShift = () => {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "braid-design-system",
3
- "version": "33.12.1",
3
+ "version": "33.12.2",
4
4
  "description": "Themeable design system for the SEEK Group",
5
5
  "homepage": "https://seek-oss.github.io/braid-design-system/",
6
6
  "bugs": {
@@ -211,13 +211,13 @@
211
211
  "fast-glob": "^3.3.2",
212
212
  "fs-extra": "^10.1.0",
213
213
  "html-validate": "^9.7.1",
214
- "playroom": "0.44.3",
214
+ "playroom": "0.44.4",
215
215
  "prettier": "^3.4.1",
216
216
  "react": "^19.1.0",
217
217
  "react-dom": "^19.1.0",
218
218
  "react-router": "^7.6.3",
219
219
  "sanitize-html": "^2.12.1",
220
- "sku": "14.13.0",
220
+ "sku": "15.3.0",
221
221
  "storybook": "9.0.15",
222
222
  "svgo": "^2.8.0",
223
223
  "title-case": "^3.0.3",