carbon-react 118.3.1 → 118.3.3
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.
- package/esm/__internal__/focus-trap/focus-trap.component.d.ts +2 -0
- package/esm/__internal__/focus-trap/focus-trap.component.js +2 -2
- package/esm/components/link/link.style.js +1 -1
- package/esm/components/menu/__internal__/submenu/submenu.style.js +1 -1
- package/esm/style/global-style.js +5 -0
- package/lib/__internal__/focus-trap/focus-trap.component.d.ts +2 -0
- package/lib/__internal__/focus-trap/focus-trap.component.js +4 -1
- package/lib/components/link/link.style.js +1 -1
- package/lib/components/menu/__internal__/submenu/submenu.style.js +1 -1
- package/lib/style/global-style.js +6 -0
- package/package.json +1 -1
|
@@ -4,8 +4,8 @@ import { defaultFocusableSelectors, setElementFocus, onTabGuardFocus, trapFuncti
|
|
|
4
4
|
import { ModalContext } from "../../components/modal/modal.component";
|
|
5
5
|
import usePrevious from "../../hooks/__internal__/usePrevious";
|
|
6
6
|
import TopModalContext from "../../components/carbon-provider/top-modal-context";
|
|
7
|
-
const TAB_GUARD_TOP = "tab-guard-top";
|
|
8
|
-
const TAB_GUARD_BOTTOM = "tab-guard-bottom"; // TODO investigate why React.RefObject<T> produces a failed prop type when current = null
|
|
7
|
+
export const TAB_GUARD_TOP = "tab-guard-top";
|
|
8
|
+
export const TAB_GUARD_BOTTOM = "tab-guard-bottom"; // TODO investigate why React.RefObject<T> produces a failed prop type when current = null
|
|
9
9
|
|
|
10
10
|
const FocusTrap = ({
|
|
11
11
|
children,
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import { createGlobalStyle } from "styled-components";
|
|
2
|
+
import { TAB_GUARD_TOP, TAB_GUARD_BOTTOM } from "../__internal__/focus-trap/focus-trap.component";
|
|
2
3
|
const GlobalStyle = createGlobalStyle`
|
|
3
4
|
body {
|
|
4
5
|
color: rgba(0, 0, 0, 0.9);
|
|
@@ -20,5 +21,9 @@ const GlobalStyle = createGlobalStyle`
|
|
|
20
21
|
h4, .h4 { font-size: 18px; font-weight: 700; margin-bottom: 22px; }
|
|
21
22
|
h5, .h5 { font-size: 16px; font-weight: 700; margin-bottom: 20px; }
|
|
22
23
|
h6, .h6 { font-size: 14px; font-weight: 700; margin-bottom: 18px; }
|
|
24
|
+
|
|
25
|
+
[data-element=${TAB_GUARD_TOP}], [data-element=${TAB_GUARD_BOTTOM}] {
|
|
26
|
+
position: fixed;
|
|
27
|
+
}
|
|
23
28
|
`;
|
|
24
29
|
export default GlobalStyle;
|
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
Object.defineProperty(exports, "__esModule", {
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
|
-
exports.default = void 0;
|
|
6
|
+
exports.default = exports.TAB_GUARD_BOTTOM = exports.TAB_GUARD_TOP = void 0;
|
|
7
7
|
|
|
8
8
|
var _react = _interopRequireWildcard(require("react"));
|
|
9
9
|
|
|
@@ -24,8 +24,11 @@ function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return
|
|
|
24
24
|
function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
|
|
25
25
|
|
|
26
26
|
const TAB_GUARD_TOP = "tab-guard-top";
|
|
27
|
+
exports.TAB_GUARD_TOP = TAB_GUARD_TOP;
|
|
27
28
|
const TAB_GUARD_BOTTOM = "tab-guard-bottom"; // TODO investigate why React.RefObject<T> produces a failed prop type when current = null
|
|
28
29
|
|
|
30
|
+
exports.TAB_GUARD_BOTTOM = TAB_GUARD_BOTTOM;
|
|
31
|
+
|
|
29
32
|
const FocusTrap = ({
|
|
30
33
|
children,
|
|
31
34
|
autoFocus = true,
|
|
@@ -144,7 +144,7 @@ const StyledLink = _styledComponents.default.span`
|
|
|
144
144
|
text-decoration: underline;
|
|
145
145
|
${isMenuItem && "display: inline-block;"}
|
|
146
146
|
|
|
147
|
-
${_icon.default} {
|
|
147
|
+
> ${_icon.default} {
|
|
148
148
|
display: inline-block;
|
|
149
149
|
position: relative;
|
|
150
150
|
vertical-align: middle;
|
|
@@ -7,6 +7,8 @@ exports.default = void 0;
|
|
|
7
7
|
|
|
8
8
|
var _styledComponents = require("styled-components");
|
|
9
9
|
|
|
10
|
+
var _focusTrap = require("../__internal__/focus-trap/focus-trap.component");
|
|
11
|
+
|
|
10
12
|
const GlobalStyle = (0, _styledComponents.createGlobalStyle)`
|
|
11
13
|
body {
|
|
12
14
|
color: rgba(0, 0, 0, 0.9);
|
|
@@ -28,6 +30,10 @@ const GlobalStyle = (0, _styledComponents.createGlobalStyle)`
|
|
|
28
30
|
h4, .h4 { font-size: 18px; font-weight: 700; margin-bottom: 22px; }
|
|
29
31
|
h5, .h5 { font-size: 16px; font-weight: 700; margin-bottom: 20px; }
|
|
30
32
|
h6, .h6 { font-size: 14px; font-weight: 700; margin-bottom: 18px; }
|
|
33
|
+
|
|
34
|
+
[data-element=${_focusTrap.TAB_GUARD_TOP}], [data-element=${_focusTrap.TAB_GUARD_BOTTOM}] {
|
|
35
|
+
position: fixed;
|
|
36
|
+
}
|
|
31
37
|
`;
|
|
32
38
|
var _default = GlobalStyle;
|
|
33
39
|
exports.default = _default;
|