@ndla/ui 56.0.115-alpha.0 → 56.0.117-alpha.0

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 (4) hide show
  1. package/es/FactBox/FactBox.js +22 -3
  2. package/lib/FactBox/FactBox.js +22 -3
  3. package/package.json +3 -3
  4. package/src/FactBox/FactBox.tsx +27 -3
package/es/FactBox/FactBox.js CHANGED
@@ -36,8 +36,16 @@ const StyledAside = styled("aside", {
36
36
  }
37
37
  },
38
38
  "& > div": {
39
- minHeight: "surface.3xsmall",
40
- overflow: "hidden"
39
+ minHeight: "surface.3xsmall"
40
+ }
41
+ },
42
+ variants: {
43
+ overflowHidden: {
44
+ true: {
45
+ "& > div": {
46
+ overflow: "hidden"
47
+ }
48
+ }
41
49
  }
42
50
  }
43
51
  });
@@ -45,7 +53,6 @@ const StyledContent = styled("div", {
45
53
  base: {
46
54
  position: "relative",
47
55
  width: "100%",
48
- overflow: "hidden",
49
56
  // Reset the top margin of the very first child.
50
57
  "& :first-child": {
51
58
  marginBlockStart: "0"
@@ -114,6 +121,7 @@ const FactBox = /*#__PURE__*/forwardRef((_ref, ref) => {
114
121
  t
115
122
  } = useTranslation();
116
123
  const [state, setState] = useState(defaultOpen ? "open" : "closed");
124
+ const [overflowHidden, setOverflowHidden] = useState(false);
117
125
  const contentId = useId();
118
126
  // Inert has existed since early 2023. It allows us to disable tabindex inside the content if it is closed, allowing us to be accessible for users with newish browsers. React 18 removes this because it doesn't recognize the attribute. This is a workaround for that.
119
127
  // When running in React 18, we need to use an empty string instead of true.
@@ -138,6 +146,17 @@ const FactBox = /*#__PURE__*/forwardRef((_ref, ref) => {
138
146
  "data-embed-type": "factbox",
139
147
  ...rest,
140
148
  ref: ref,
149
+ overflowHidden: overflowHidden,
150
+ onTransitionStart: e => {
151
+ if (e.target === e.currentTarget && state === "closed") {
152
+ setOverflowHidden(true);
153
+ }
154
+ },
155
+ onTransitionEnd: e => {
156
+ if (e.target === e.currentTarget && state === "open") {
157
+ setOverflowHidden(false);
158
+ }
159
+ },
141
160
  children: [/*#__PURE__*/_jsx(StyledIconButton, {
142
161
  "data-state": state,
143
162
  onClick: onClick,
package/lib/FactBox/FactBox.js CHANGED
@@ -44,8 +44,16 @@ const StyledAside = (0, _jsx2.styled)("aside", {
44
44
  }
45
45
  },
46
46
  "& > div": {
47
- minHeight: "surface.3xsmall",
48
- overflow: "hidden"
47
+ minHeight: "surface.3xsmall"
48
+ }
49
+ },
50
+ variants: {
51
+ overflowHidden: {
52
+ true: {
53
+ "& > div": {
54
+ overflow: "hidden"
55
+ }
56
+ }
49
57
  }
50
58
  }
51
59
  });
@@ -53,7 +61,6 @@ const StyledContent = (0, _jsx2.styled)("div", {
53
61
  base: {
54
62
  position: "relative",
55
63
  width: "100%",
56
- overflow: "hidden",
57
64
  // Reset the top margin of the very first child.
58
65
  "& :first-child": {
59
66
  marginBlockStart: "0"
@@ -122,6 +129,7 @@ const FactBox = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
122
129
  t
123
130
  } = (0, _reactI18next.useTranslation)();
124
131
  const [state, setState] = (0, _react.useState)(defaultOpen ? "open" : "closed");
132
+ const [overflowHidden, setOverflowHidden] = (0, _react.useState)(false);
125
133
  const contentId = (0, _react.useId)();
126
134
  // Inert has existed since early 2023. It allows us to disable tabindex inside the content if it is closed, allowing us to be accessible for users with newish browsers. React 18 removes this because it doesn't recognize the attribute. This is a workaround for that.
127
135
  // When running in React 18, we need to use an empty string instead of true.
@@ -146,6 +154,17 @@ const FactBox = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
146
154
  "data-embed-type": "factbox",
147
155
  ...rest,
148
156
  ref: ref,
157
+ overflowHidden: overflowHidden,
158
+ onTransitionStart: e => {
159
+ if (e.target === e.currentTarget && state === "closed") {
160
+ setOverflowHidden(true);
161
+ }
162
+ },
163
+ onTransitionEnd: e => {
164
+ if (e.target === e.currentTarget && state === "open") {
165
+ setOverflowHidden(false);
166
+ }
167
+ },
149
168
  children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(StyledIconButton, {
150
169
  "data-state": state,
151
170
  onClick: onClick,
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@ndla/ui",
3
- "version": "56.0.115-alpha.0",
3
+ "version": "56.0.117-alpha.0",
4
4
  "description": "UI component library for NDLA",
5
5
  "license": "GPL-3.0",
6
6
  "main": "lib/index.js",
@@ -51,11 +51,11 @@
51
51
  "devDependencies": {
52
52
  "@ndla/preset-panda": "^0.0.52",
53
53
  "@ndla/types-backend": "^1.0.39",
54
- "@ndla/types-embed": "^5.0.12-alpha.0",
54
+ "@ndla/types-embed": "^5.0.13-alpha.0",
55
55
  "@pandacss/dev": "^0.53.3"
56
56
  },
57
57
  "publishConfig": {
58
58
  "access": "public"
59
59
  },
60
- "gitHead": "c1e642fcd7cb08f705ed3be0e870f8c09ca7a7f6"
60
+ "gitHead": "ea8791f44ff1565342345578dc4dd189dac0e6a9"
61
61
  }
package/src/FactBox/FactBox.tsx CHANGED
@@ -53,7 +53,15 @@ const StyledAside = styled("aside", {
53
53
  },
54
54
  "& > div": {
55
55
  minHeight: "surface.3xsmall",
56
- overflow: "hidden",
56
+ },
57
+ },
58
+ variants: {
59
+ overflowHidden: {
60
+ true: {
61
+ "& > div": {
62
+ overflow: "hidden",
63
+ },
64
+ },
57
65
  },
58
66
  },
59
67
  });
@@ -62,7 +70,6 @@ const StyledContent = styled("div", {
62
70
  base: {
63
71
  position: "relative",
64
72
  width: "100%",
65
- overflow: "hidden",
66
73
  // Reset the top margin of the very first child.
67
74
  "& :first-child": {
68
75
  marginBlockStart: "0",
@@ -124,6 +131,7 @@ const FactBox = forwardRef<HTMLElement, Props>(
124
131
  ({ children, open, onOpenChange, defaultOpen = false, ...rest }, ref) => {
125
132
  const { t } = useTranslation();
126
133
  const [state, setState] = useState<"open" | "closed">(defaultOpen ? "open" : "closed");
134
+ const [overflowHidden, setOverflowHidden] = useState(false);
127
135
  const contentId = useId();
128
136
  // Inert has existed since early 2023. It allows us to disable tabindex inside the content if it is closed, allowing us to be accessible for users with newish browsers. React 18 removes this because it doesn't recognize the attribute. This is a workaround for that.
129
137
  // When running in React 18, we need to use an empty string instead of true.
@@ -145,7 +153,23 @@ const FactBox = forwardRef<HTMLElement, Props>(
145
153
  }, [state, onOpenChange]);
146
154
 
147
155
  return (
148
- <StyledAside data-state={state} data-embed-type="factbox" {...rest} ref={ref}>
156
+ <StyledAside
157
+ data-state={state}
158
+ data-embed-type="factbox"
159
+ {...rest}
160
+ ref={ref}
161
+ overflowHidden={overflowHidden}
162
+ onTransitionStart={(e) => {
163
+ if (e.target === e.currentTarget && state === "closed") {
164
+ setOverflowHidden(true);
165
+ }
166
+ }}
167
+ onTransitionEnd={(e) => {
168
+ if (e.target === e.currentTarget && state === "open") {
169
+ setOverflowHidden(false);
170
+ }
171
+ }}
172
+ >
149
173
  <StyledIconButton
150
174
  data-state={state}
151
175
  onClick={onClick}