carbon-react 147.4.1 → 147.4.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/components/date/__internal__/date-picker/date-picker.component.js +19 -15
- package/esm/components/dialog-full-screen/content.style.js +0 -1
- package/esm/components/dialog-full-screen/dialog-full-screen.component.js +1 -1
- package/esm/components/dialog-full-screen/dialog-full-screen.style.js +0 -1
- package/esm/components/pages/page/page.component.d.ts +1 -1
- package/esm/components/pages/page/page.component.js +2 -2
- package/lib/components/date/__internal__/date-picker/date-picker.component.js +19 -15
- package/lib/components/dialog-full-screen/content.style.js +0 -1
- package/lib/components/dialog-full-screen/dialog-full-screen.component.js +1 -1
- package/lib/components/dialog-full-screen/dialog-full-screen.style.js +0 -1
- package/lib/components/pages/page/page.component.d.ts +1 -1
- package/lib/components/pages/page/page.component.js +2 -2
- package/package.json +1 -1
|
@@ -85,23 +85,27 @@ export const DatePicker = ({
|
|
|
85
85
|
}
|
|
86
86
|
};
|
|
87
87
|
const handleOnDayKeyDown = (_day, _modifiers, ev) => {
|
|
88
|
-
//
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
setOpen(false);
|
|
93
|
-
onPickerClose?.();
|
|
94
|
-
const input = inputElement.current?.querySelector("input");
|
|
95
|
-
|
|
88
|
+
// timeout added to prevent this handler from interfering with the useFocusPortalContent hook, when the date-range
|
|
89
|
+
// is used inside of a popover-container and it is the last focusable element of the popover-container
|
|
90
|
+
setTimeout(() => {
|
|
91
|
+
// we need to manually handle this as the picker may be in a Portal
|
|
96
92
|
/* istanbul ignore else */
|
|
97
|
-
if (
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
const
|
|
102
|
-
|
|
93
|
+
if (Events.isTabKey(ev) && !Events.isShiftKey(ev)) {
|
|
94
|
+
ev.preventDefault();
|
|
95
|
+
setOpen(false);
|
|
96
|
+
onPickerClose?.();
|
|
97
|
+
const input = inputElement.current?.querySelector("input");
|
|
98
|
+
|
|
99
|
+
/* istanbul ignore else */
|
|
100
|
+
if (input) {
|
|
101
|
+
const elements = Array.from(document.querySelectorAll(defaultFocusableSelectors) || /* istanbul ignore next */[]);
|
|
102
|
+
const elementsInPicker = Array.from(ref.current?.querySelectorAll("button, [tabindex]") || /* istanbul ignore next */[]);
|
|
103
|
+
const filteredElements = elements.filter(el => Number(el.tabIndex) !== -1 && !elementsInPicker.includes(el));
|
|
104
|
+
const nextIndex = filteredElements.indexOf(input) + 1;
|
|
105
|
+
filteredElements[nextIndex]?.focus();
|
|
106
|
+
}
|
|
103
107
|
}
|
|
104
|
-
}
|
|
108
|
+
}, 0);
|
|
105
109
|
};
|
|
106
110
|
useEffect(() => {
|
|
107
111
|
if (selectedDays) {
|
|
@@ -105,7 +105,7 @@ export const DialogFullScreen = ({
|
|
|
105
105
|
"data-element": "dialog-full-screen",
|
|
106
106
|
pagesStyling: pagesStyling,
|
|
107
107
|
role: role
|
|
108
|
-
}), dialogTitle(), closeIcon(), /*#__PURE__*/React.createElement(StyledContent, {
|
|
108
|
+
}), title || headerChildren ? dialogTitle() : null, closeIcon(), /*#__PURE__*/React.createElement(StyledContent, {
|
|
109
109
|
hasHeader: title !== undefined,
|
|
110
110
|
"data-element": "content",
|
|
111
111
|
"data-role": "dialog-full-screen-content",
|
|
@@ -2,7 +2,7 @@ import React from "react";
|
|
|
2
2
|
import { PaddingProps } from "styled-system";
|
|
3
3
|
export interface PageProps extends PaddingProps {
|
|
4
4
|
/** The title for the page, normally a Heading component. */
|
|
5
|
-
title
|
|
5
|
+
title?: React.ReactNode;
|
|
6
6
|
/** This component supports children. */
|
|
7
7
|
children: React.ReactNode;
|
|
8
8
|
/** The ARIA role to be applied to the component */
|
|
@@ -31,9 +31,9 @@ const Page = ({
|
|
|
31
31
|
}, rest), /*#__PURE__*/React.createElement(StyledPage, _extends({}, tagComponent("page", rest), {
|
|
32
32
|
ref: styledPageNodeRef,
|
|
33
33
|
role: role
|
|
34
|
-
}), /*#__PURE__*/React.createElement(FullScreenHeading, {
|
|
34
|
+
}), title ? /*#__PURE__*/React.createElement(FullScreenHeading, {
|
|
35
35
|
hasContent: true
|
|
36
|
-
}, title), /*#__PURE__*/React.createElement(StyledPageContent, _extends({
|
|
36
|
+
}, title) : null, /*#__PURE__*/React.createElement(StyledPageContent, _extends({
|
|
37
37
|
"data-element": "carbon-page-content",
|
|
38
38
|
"data-role": "page-content",
|
|
39
39
|
p: "34px 40px"
|
|
@@ -94,23 +94,27 @@ const DatePicker = ({
|
|
|
94
94
|
}
|
|
95
95
|
};
|
|
96
96
|
const handleOnDayKeyDown = (_day, _modifiers, ev) => {
|
|
97
|
-
//
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
setOpen(false);
|
|
102
|
-
onPickerClose?.();
|
|
103
|
-
const input = inputElement.current?.querySelector("input");
|
|
104
|
-
|
|
97
|
+
// timeout added to prevent this handler from interfering with the useFocusPortalContent hook, when the date-range
|
|
98
|
+
// is used inside of a popover-container and it is the last focusable element of the popover-container
|
|
99
|
+
setTimeout(() => {
|
|
100
|
+
// we need to manually handle this as the picker may be in a Portal
|
|
105
101
|
/* istanbul ignore else */
|
|
106
|
-
if (
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
const
|
|
111
|
-
|
|
102
|
+
if (_events.default.isTabKey(ev) && !_events.default.isShiftKey(ev)) {
|
|
103
|
+
ev.preventDefault();
|
|
104
|
+
setOpen(false);
|
|
105
|
+
onPickerClose?.();
|
|
106
|
+
const input = inputElement.current?.querySelector("input");
|
|
107
|
+
|
|
108
|
+
/* istanbul ignore else */
|
|
109
|
+
if (input) {
|
|
110
|
+
const elements = Array.from(document.querySelectorAll(_focusTrapUtils.defaultFocusableSelectors) || /* istanbul ignore next */[]);
|
|
111
|
+
const elementsInPicker = Array.from(ref.current?.querySelectorAll("button, [tabindex]") || /* istanbul ignore next */[]);
|
|
112
|
+
const filteredElements = elements.filter(el => Number(el.tabIndex) !== -1 && !elementsInPicker.includes(el));
|
|
113
|
+
const nextIndex = filteredElements.indexOf(input) + 1;
|
|
114
|
+
filteredElements[nextIndex]?.focus();
|
|
115
|
+
}
|
|
112
116
|
}
|
|
113
|
-
}
|
|
117
|
+
}, 0);
|
|
114
118
|
};
|
|
115
119
|
(0, _react.useEffect)(() => {
|
|
116
120
|
if (selectedDays) {
|
|
@@ -114,7 +114,7 @@ const DialogFullScreen = ({
|
|
|
114
114
|
"data-element": "dialog-full-screen",
|
|
115
115
|
pagesStyling: pagesStyling,
|
|
116
116
|
role: role
|
|
117
|
-
}), dialogTitle(), closeIcon(), /*#__PURE__*/_react.default.createElement(_content.default, {
|
|
117
|
+
}), title || headerChildren ? dialogTitle() : null, closeIcon(), /*#__PURE__*/_react.default.createElement(_content.default, {
|
|
118
118
|
hasHeader: title !== undefined,
|
|
119
119
|
"data-element": "content",
|
|
120
120
|
"data-role": "dialog-full-screen-content",
|
|
@@ -2,7 +2,7 @@ import React from "react";
|
|
|
2
2
|
import { PaddingProps } from "styled-system";
|
|
3
3
|
export interface PageProps extends PaddingProps {
|
|
4
4
|
/** The title for the page, normally a Heading component. */
|
|
5
|
-
title
|
|
5
|
+
title?: React.ReactNode;
|
|
6
6
|
/** This component supports children. */
|
|
7
7
|
children: React.ReactNode;
|
|
8
8
|
/** The ARIA role to be applied to the component */
|
|
@@ -40,9 +40,9 @@ const Page = ({
|
|
|
40
40
|
}, rest), /*#__PURE__*/_react.default.createElement(_page.StyledPage, _extends({}, (0, _tags.default)("page", rest), {
|
|
41
41
|
ref: styledPageNodeRef,
|
|
42
42
|
role: role
|
|
43
|
-
}), /*#__PURE__*/_react.default.createElement(_fullScreenHeading.default, {
|
|
43
|
+
}), title ? /*#__PURE__*/_react.default.createElement(_fullScreenHeading.default, {
|
|
44
44
|
hasContent: true
|
|
45
|
-
}, title), /*#__PURE__*/_react.default.createElement(_page.StyledPageContent, _extends({
|
|
45
|
+
}, title) : null, /*#__PURE__*/_react.default.createElement(_page.StyledPageContent, _extends({
|
|
46
46
|
"data-element": "carbon-page-content",
|
|
47
47
|
"data-role": "page-content",
|
|
48
48
|
p: "34px 40px"
|