braid-design-system 33.9.0 → 33.9.1

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/BraidTestProvider/BraidTestProvider.cjs +9 -7
  3. package/dist/lib/components/BraidTestProvider/BraidTestProvider.mjs +9 -7
  4. package/dist/lib/components/TooltipRenderer/TooltipRenderer.cjs +34 -21
  5. package/dist/lib/components/TooltipRenderer/TooltipRenderer.mjs +34 -21
  6. package/package.json +2 -3
package/CHANGELOG.md CHANGED
@@ -1,5 +1,15 @@
1
1
  # braid-design-system
2
2
 
3
+ ## 33.9.1
4
+
5
+ ### Patch Changes
6
+
7
+ - **ButtonIcon, TooltipRenderer:** Remove unnecessary intermediary element around the tooltip trigger. ([#1814](https://github.com/seek-oss/braid-design-system/pull/1814))
8
+
9
+ - **BraidTestProvider:** Use stubs instead of mocks to fill missing APIs in jsdom ([#1809](https://github.com/seek-oss/braid-design-system/pull/1809))
10
+
11
+ This change allows the BraidTestProvider to be framework agnostic for tests and discourages testing the stubbed browser APIs directly.
12
+
3
13
  ## 33.9.0
4
14
 
5
15
  ### Minor Changes
package/dist/lib/components/BraidTestProvider/BraidTestProvider.cjs CHANGED
@@ -5,14 +5,16 @@ const lib_themes_index_cjs = require("../../themes/index.cjs");
5
5
  const lib_components_BraidProvider_BraidProvider_cjs = require("../BraidProvider/BraidProvider.cjs");
6
6
  const lib_components_BraidProvider_BreakpointContext_cjs = require("../BraidProvider/BreakpointContext.cjs");
7
7
  const lib_components_BraidTestProvider_BraidTestProviderContext_cjs = require("./BraidTestProviderContext.cjs");
8
+ const noop = () => {
9
+ };
8
10
  if (typeof navigator !== "undefined" && ((_a = navigator == null ? void 0 : navigator.userAgent) == null ? void 0 : _a.includes("jsdom"))) {
9
11
  window.HTMLElement.prototype.scrollIntoView = window.HTMLElement.prototype.scrollIntoView || (() => {
10
12
  });
11
13
  class MockResizeObserver {
12
14
  constructor() {
13
- this.observe = jest.fn();
14
- this.unobserve = jest.fn();
15
- this.disconnect = jest.fn();
15
+ this.observe = noop;
16
+ this.unobserve = noop;
17
+ this.disconnect = noop;
16
18
  }
17
19
  }
18
20
  window.ResizeObserver = MockResizeObserver;
@@ -21,10 +23,10 @@ if (typeof navigator !== "undefined" && ((_a = navigator == null ? void 0 : navi
21
23
  this.root = null;
22
24
  this.rootMargin = "";
23
25
  this.thresholds = [];
24
- this.observe = jest.fn();
25
- this.unobserve = jest.fn();
26
- this.disconnect = jest.fn();
27
- this.takeRecords = jest.fn();
26
+ this.observe = noop;
27
+ this.unobserve = noop;
28
+ this.disconnect = noop;
29
+ this.takeRecords = noop;
28
30
  }
29
31
  }
30
32
  window.IntersectionObserver = MockIntersectionObserver;
package/dist/lib/components/BraidTestProvider/BraidTestProvider.mjs CHANGED
@@ -4,14 +4,16 @@ import { themes } from "../../themes/index.mjs";
4
4
  import { BraidProvider } from "../BraidProvider/BraidProvider.mjs";
5
5
  import { breakpointContext } from "../BraidProvider/BreakpointContext.mjs";
6
6
  import { BraidTestProviderContext } from "./BraidTestProviderContext.mjs";
7
+ const noop = () => {
8
+ };
7
9
  if (typeof navigator !== "undefined" && ((_a = navigator == null ? void 0 : navigator.userAgent) == null ? void 0 : _a.includes("jsdom"))) {
8
10
  window.HTMLElement.prototype.scrollIntoView = window.HTMLElement.prototype.scrollIntoView || (() => {
9
11
  });
10
12
  class MockResizeObserver {
11
13
  constructor() {
12
- this.observe = jest.fn();
13
- this.unobserve = jest.fn();
14
- this.disconnect = jest.fn();
14
+ this.observe = noop;
15
+ this.unobserve = noop;
16
+ this.disconnect = noop;
15
17
  }
16
18
  }
17
19
  window.ResizeObserver = MockResizeObserver;
@@ -20,10 +22,10 @@ if (typeof navigator !== "undefined" && ((_a = navigator == null ? void 0 : navi
20
22
  this.root = null;
21
23
  this.rootMargin = "";
22
24
  this.thresholds = [];
23
- this.observe = jest.fn();
24
- this.unobserve = jest.fn();
25
- this.disconnect = jest.fn();
26
- this.takeRecords = jest.fn();
25
+ this.observe = noop;
26
+ this.unobserve = noop;
27
+ this.disconnect = noop;
28
+ this.takeRecords = noop;
27
29
  }
28
30
  }
29
31
  window.IntersectionObserver = MockIntersectionObserver;
package/dist/lib/components/TooltipRenderer/TooltipRenderer.cjs CHANGED
@@ -108,6 +108,33 @@ const TooltipRenderer = ({
108
108
  );
109
109
  };
110
110
  }, []);
111
+ react.useEffect(() => {
112
+ const toggleTooltip = () => setOpen(!open);
113
+ const openTooltip = () => setOpen(true);
114
+ const closeTooltip = () => setOpen(false);
115
+ if (triggerRef.current) {
116
+ triggerRef.current.addEventListener("blur", closeTooltip);
117
+ if (isMobileDevice) {
118
+ triggerRef.current.addEventListener("click", toggleTooltip);
119
+ } else {
120
+ triggerRef.current.addEventListener("focus", openTooltip);
121
+ triggerRef.current.addEventListener("mouseenter", openTooltip);
122
+ triggerRef.current.addEventListener("mouseleave", closeTooltip);
123
+ }
124
+ }
125
+ return () => {
126
+ if (triggerRef.current) {
127
+ triggerRef.current.removeEventListener("blur", closeTooltip);
128
+ if (isMobileDevice) {
129
+ triggerRef.current.removeEventListener("click", toggleTooltip);
130
+ } else {
131
+ triggerRef.current.removeEventListener("focus", openTooltip);
132
+ triggerRef.current.removeEventListener("mouseenter", openTooltip);
133
+ triggerRef.current.removeEventListener("mouseleave", closeTooltip);
134
+ }
135
+ }
136
+ };
137
+ }, [open, isMobileDevice]);
111
138
  lib_hooks_useIsomorphicLayoutEffect_cjs.useIsomorphicLayoutEffect(() => {
112
139
  const setPositions = () => {
113
140
  var _a, _b;
@@ -129,29 +156,15 @@ const TooltipRenderer = ({
129
156
  arrowLeftOffset = tooltipLeftToTriggerLeft + triggerPosition.width / 2;
130
157
  }
131
158
  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
132
- /* @__PURE__ */ jsxRuntime.jsx(
133
- lib_components_Box_Box_cjs.Box,
134
- {
135
- tabIndex: -1,
136
- onBlur: () => setOpen(false),
137
- ...isMobileDevice ? {
138
- onClick: () => setOpen(!open)
139
- } : {
140
- onMouseEnter: () => setOpen(true),
141
- onFocus: () => setOpen(true),
142
- onMouseLeave: () => setOpen(false)
159
+ children({
160
+ triggerProps: {
161
+ tabIndex: 0,
162
+ ref: (el) => {
163
+ triggerRef.current = el;
143
164
  },
144
- children: children({
145
- triggerProps: {
146
- tabIndex: 0,
147
- ref: (el) => {
148
- triggerRef.current = el;
149
- },
150
- "aria-describedby": resolvedId
151
- }
152
- })
165
+ "aria-describedby": resolvedId
153
166
  }
154
- ),
167
+ }),
155
168
  /* @__PURE__ */ jsxRuntime.jsx(
156
169
  lib_components_private_Popover_Popover_cjs.Popover,
157
170
  {
package/dist/lib/components/TooltipRenderer/TooltipRenderer.mjs CHANGED
@@ -105,6 +105,33 @@ const TooltipRenderer = ({
105
105
  );
106
106
  };
107
107
  }, []);
108
+ useEffect(() => {
109
+ const toggleTooltip = () => setOpen(!open);
110
+ const openTooltip = () => setOpen(true);
111
+ const closeTooltip = () => setOpen(false);
112
+ if (triggerRef.current) {
113
+ triggerRef.current.addEventListener("blur", closeTooltip);
114
+ if (isMobileDevice) {
115
+ triggerRef.current.addEventListener("click", toggleTooltip);
116
+ } else {
117
+ triggerRef.current.addEventListener("focus", openTooltip);
118
+ triggerRef.current.addEventListener("mouseenter", openTooltip);
119
+ triggerRef.current.addEventListener("mouseleave", closeTooltip);
120
+ }
121
+ }
122
+ return () => {
123
+ if (triggerRef.current) {
124
+ triggerRef.current.removeEventListener("blur", closeTooltip);
125
+ if (isMobileDevice) {
126
+ triggerRef.current.removeEventListener("click", toggleTooltip);
127
+ } else {
128
+ triggerRef.current.removeEventListener("focus", openTooltip);
129
+ triggerRef.current.removeEventListener("mouseenter", openTooltip);
130
+ triggerRef.current.removeEventListener("mouseleave", closeTooltip);
131
+ }
132
+ }
133
+ };
134
+ }, [open, isMobileDevice]);
108
135
  useIsomorphicLayoutEffect(() => {
109
136
  const setPositions = () => {
110
137
  var _a, _b;
@@ -126,29 +153,15 @@ const TooltipRenderer = ({
126
153
  arrowLeftOffset = tooltipLeftToTriggerLeft + triggerPosition.width / 2;
127
154
  }
128
155
  return /* @__PURE__ */ jsxs(Fragment, { children: [
129
- /* @__PURE__ */ jsx(
130
- Box,
131
- {
132
- tabIndex: -1,
133
- onBlur: () => setOpen(false),
134
- ...isMobileDevice ? {
135
- onClick: () => setOpen(!open)
136
- } : {
137
- onMouseEnter: () => setOpen(true),
138
- onFocus: () => setOpen(true),
139
- onMouseLeave: () => setOpen(false)
156
+ children({
157
+ triggerProps: {
158
+ tabIndex: 0,
159
+ ref: (el) => {
160
+ triggerRef.current = el;
140
161
  },
141
- children: children({
142
- triggerProps: {
143
- tabIndex: 0,
144
- ref: (el) => {
145
- triggerRef.current = el;
146
- },
147
- "aria-describedby": resolvedId
148
- }
149
- })
162
+ "aria-describedby": resolvedId
150
163
  }
151
- ),
164
+ }),
152
165
  /* @__PURE__ */ jsx(
153
166
  Popover,
154
167
  {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "braid-design-system",
3
- "version": "33.9.0",
3
+ "version": "33.9.1",
4
4
  "description": "Themeable design system for the SEEK Group",
5
5
  "homepage": "https://seek-oss.github.io/braid-design-system/",
6
6
  "bugs": {
@@ -198,7 +198,6 @@
198
198
  "@testing-library/user-event": "^14.4.3",
199
199
  "@types/autosuggest-highlight": "^3.1.1",
200
200
  "@types/babel__core": "^7.20.1",
201
- "@types/jest": "^29.5.14",
202
201
  "@types/lodash.curry": "^4.1.9",
203
202
  "@types/lodash.merge": "^4.6.9",
204
203
  "@types/node": "^18.19.68",
@@ -216,7 +215,7 @@
216
215
  "chromatic": "^12.2.0",
217
216
  "fast-glob": "^3.3.2",
218
217
  "fs-extra": "^10.1.0",
219
- "html-validate": "^7.1.1",
218
+ "html-validate": "^9.7.0",
220
219
  "playroom": "0.44.0",
221
220
  "prettier": "^3.4.1",
222
221
  "react": "^18.3.1",