carbon-react 136.0.2 → 136.0.4
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/dialog/dialog.component.js +1 -5
- package/esm/components/dialog/dialog.style.d.ts +1 -3
- package/esm/components/dialog/dialog.style.js +7 -5
- package/esm/components/dialog-full-screen/content.style.d.ts +0 -1
- package/esm/components/dialog-full-screen/content.style.js +57 -56
- package/esm/components/dialog-full-screen/dialog-full-screen.component.js +1 -4
- package/esm/components/form/form.style.js +1 -0
- package/esm/components/hr/hr.component.js +1 -0
- package/esm/components/sidebar/sidebar.component.js +2 -3
- package/esm/components/text-editor/text-editor.style.js +0 -2
- package/lib/components/dialog/dialog.component.js +1 -5
- package/lib/components/dialog/dialog.style.d.ts +1 -3
- package/lib/components/dialog/dialog.style.js +7 -5
- package/lib/components/dialog-full-screen/content.style.d.ts +0 -1
- package/lib/components/dialog-full-screen/content.style.js +57 -56
- package/lib/components/dialog-full-screen/dialog-full-screen.component.js +1 -4
- package/lib/components/form/form.style.js +1 -0
- package/lib/components/hr/hr.component.js +1 -0
- package/lib/components/sidebar/sidebar.component.js +1 -2
- package/lib/components/text-editor/text-editor.style.js +0 -2
- package/package.json +1 -1
- package/esm/hooks/__internal__/useIsStickyFooterForm/index.d.ts +0 -1
- package/esm/hooks/__internal__/useIsStickyFooterForm/index.js +0 -1
- package/esm/hooks/__internal__/useIsStickyFooterForm/useIsStickyFooterForm.d.ts +0 -3
- package/esm/hooks/__internal__/useIsStickyFooterForm/useIsStickyFooterForm.js +0 -6
- package/lib/hooks/__internal__/useIsStickyFooterForm/index.d.ts +0 -1
- package/lib/hooks/__internal__/useIsStickyFooterForm/index.js +0 -13
- package/lib/hooks/__internal__/useIsStickyFooterForm/package.json +0 -6
- package/lib/hooks/__internal__/useIsStickyFooterForm/useIsStickyFooterForm.d.ts +0 -3
- package/lib/hooks/__internal__/useIsStickyFooterForm/useIsStickyFooterForm.js +0 -16
|
@@ -12,7 +12,6 @@ import FocusTrap from "../../__internal__/focus-trap";
|
|
|
12
12
|
import IconButton from "../icon-button";
|
|
13
13
|
import Icon from "../icon";
|
|
14
14
|
import useLocale from "../../hooks/__internal__/useLocale";
|
|
15
|
-
import useIsStickyFooterForm from "../../hooks/__internal__/useIsStickyFooterForm";
|
|
16
15
|
import useModalAria from "../../hooks/__internal__/useModalAria/useModalAria";
|
|
17
16
|
const PADDING_VALUES = [0, 1, 2, 3, 4, 5, 6, 7, 8];
|
|
18
17
|
const Dialog = /*#__PURE__*/forwardRef(({
|
|
@@ -51,7 +50,6 @@ const Dialog = /*#__PURE__*/forwardRef(({
|
|
|
51
50
|
const {
|
|
52
51
|
current: subtitleId
|
|
53
52
|
} = useRef(createGuid());
|
|
54
|
-
const hasStickyFooter = useIsStickyFooterForm(children);
|
|
55
53
|
const isTopModal = useModalAria(containerRef);
|
|
56
54
|
useImperativeHandle(ref, () => ({
|
|
57
55
|
focus() {
|
|
@@ -182,9 +180,7 @@ const Dialog = /*#__PURE__*/forwardRef(({
|
|
|
182
180
|
tabIndex: -1
|
|
183
181
|
}, contentPadding, {
|
|
184
182
|
backgroundColor: greyBackground ? "var(--colorsUtilityMajor025)" : "var(--colorsUtilityYang100)"
|
|
185
|
-
}), dialogTitle(), closeIcon(), /*#__PURE__*/React.createElement(StyledDialogContent,
|
|
186
|
-
hasStickyFooter: hasStickyFooter
|
|
187
|
-
}), /*#__PURE__*/React.createElement(StyledDialogInnerContent, _extends({
|
|
183
|
+
}), dialogTitle(), closeIcon(), /*#__PURE__*/React.createElement(StyledDialogContent, contentPadding, /*#__PURE__*/React.createElement(StyledDialogInnerContent, _extends({
|
|
188
184
|
ref: innerContentRef
|
|
189
185
|
}, contentPadding), children)))));
|
|
190
186
|
});
|
|
@@ -12,8 +12,6 @@ declare type StyledDialogTitleProps = {
|
|
|
12
12
|
hasSubtitle?: boolean;
|
|
13
13
|
};
|
|
14
14
|
declare const StyledDialogTitle: import("styled-components").StyledComponent<"div", any, StyledDialogTitleProps, never>;
|
|
15
|
-
declare const StyledDialogContent: import("styled-components").StyledComponent<"div", any, ContentPaddingInterface
|
|
16
|
-
hasStickyFooter: boolean;
|
|
17
|
-
}, never>;
|
|
15
|
+
declare const StyledDialogContent: import("styled-components").StyledComponent<"div", any, ContentPaddingInterface, never>;
|
|
18
16
|
declare const StyledDialogInnerContent: import("styled-components").StyledComponent<"div", any, ContentPaddingInterface, never>;
|
|
19
17
|
export { StyledDialog, StyledDialogTitle, StyledDialogContent, StyledDialogInnerContent, };
|
|
@@ -117,11 +117,13 @@ const StyledDialogContent = styled.div`
|
|
|
117
117
|
box-sizing: border-box;
|
|
118
118
|
display: flex;
|
|
119
119
|
flex-direction: column;
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
120
|
+
overflow-y: auto;
|
|
121
|
+
|
|
122
|
+
/* Delegate handling overflow to child form if it has a sticky footer */
|
|
123
|
+
&:has(${StyledFormContent}.sticky) {
|
|
124
|
+
overflow-y: inherit;
|
|
125
|
+
}
|
|
126
|
+
|
|
125
127
|
width: 100%;
|
|
126
128
|
flex: 1;
|
|
127
129
|
padding: 0px ${HORIZONTAL_PADDING}px ${CONTENT_BOTTOM_PADDING}px;
|
|
@@ -1,65 +1,13 @@
|
|
|
1
1
|
import styled, { css } from "styled-components";
|
|
2
2
|
import { StyledFormFooter, StyledFormContent } from "../form/form.style";
|
|
3
3
|
const StyledContent = styled.div`
|
|
4
|
-
|
|
5
|
-
hasStickyFooter
|
|
6
|
-
}) => !hasStickyFooter && css`
|
|
7
|
-
overflow-y: auto;
|
|
8
|
-
`}
|
|
4
|
+
overflow-y: auto;
|
|
9
5
|
padding: 0 16px;
|
|
10
6
|
flex: 1;
|
|
11
7
|
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
margin-right: -16px;
|
|
16
|
-
margin-left: -16px;
|
|
17
|
-
|
|
18
|
-
@media screen and (min-width: 600px) {
|
|
19
|
-
padding-right: 24px;
|
|
20
|
-
padding-left: 24px;
|
|
21
|
-
margin-right: -24px;
|
|
22
|
-
margin-left: -24px;
|
|
23
|
-
}
|
|
24
|
-
@media screen and (min-width: 960px) {
|
|
25
|
-
padding-right: 32px;
|
|
26
|
-
padding-left: 32px;
|
|
27
|
-
margin-right: -32px;
|
|
28
|
-
margin-left: -32px;
|
|
29
|
-
}
|
|
30
|
-
@media screen and (min-width: 1260px) {
|
|
31
|
-
padding-right: 40px;
|
|
32
|
-
padding-left: 40px;
|
|
33
|
-
margin-right: -40px;
|
|
34
|
-
margin-left: -40px;
|
|
35
|
-
}
|
|
36
|
-
}
|
|
37
|
-
|
|
38
|
-
${StyledFormFooter}.sticky {
|
|
39
|
-
padding: 16px;
|
|
40
|
-
|
|
41
|
-
margin-right: -16px;
|
|
42
|
-
margin-left: -16px;
|
|
43
|
-
width: calc(100% + 32px);
|
|
44
|
-
|
|
45
|
-
@media screen and (min-width: 600px) {
|
|
46
|
-
padding: 16px 24px;
|
|
47
|
-
margin-right: -24px;
|
|
48
|
-
margin-left: -24px;
|
|
49
|
-
width: calc(100% + 48px);
|
|
50
|
-
}
|
|
51
|
-
@media screen and (min-width: 960px) {
|
|
52
|
-
padding: 16px 32px;
|
|
53
|
-
margin-right: -32px;
|
|
54
|
-
margin-left: -32px;
|
|
55
|
-
width: calc(100% + 64px);
|
|
56
|
-
}
|
|
57
|
-
@media screen and (min-width: 1260px) {
|
|
58
|
-
padding: 16px 40px;
|
|
59
|
-
margin-right: -40px;
|
|
60
|
-
margin-left: -40px;
|
|
61
|
-
width: calc(100% + 80px);
|
|
62
|
-
}
|
|
8
|
+
/* Delegate handling overflow to child form if it has a sticky footer */
|
|
9
|
+
&:has(${StyledFormContent}.sticky) {
|
|
10
|
+
overflow-y: inherit;
|
|
63
11
|
}
|
|
64
12
|
|
|
65
13
|
${({
|
|
@@ -75,6 +23,59 @@ const StyledContent = styled.div`
|
|
|
75
23
|
@media screen and (min-width: 1260px) {
|
|
76
24
|
padding: 0 40px;
|
|
77
25
|
}
|
|
26
|
+
|
|
27
|
+
${StyledFormContent}.sticky {
|
|
28
|
+
padding-right: 16px;
|
|
29
|
+
padding-left: 16px;
|
|
30
|
+
margin-right: -16px;
|
|
31
|
+
margin-left: -16px;
|
|
32
|
+
|
|
33
|
+
@media screen and (min-width: 600px) {
|
|
34
|
+
padding-right: 24px;
|
|
35
|
+
padding-left: 24px;
|
|
36
|
+
margin-right: -24px;
|
|
37
|
+
margin-left: -24px;
|
|
38
|
+
}
|
|
39
|
+
@media screen and (min-width: 960px) {
|
|
40
|
+
padding-right: 32px;
|
|
41
|
+
padding-left: 32px;
|
|
42
|
+
margin-right: -32px;
|
|
43
|
+
margin-left: -32px;
|
|
44
|
+
}
|
|
45
|
+
@media screen and (min-width: 1260px) {
|
|
46
|
+
padding-right: 40px;
|
|
47
|
+
padding-left: 40px;
|
|
48
|
+
margin-right: -40px;
|
|
49
|
+
margin-left: -40px;
|
|
50
|
+
}
|
|
51
|
+
}
|
|
52
|
+
|
|
53
|
+
${StyledFormFooter}.sticky {
|
|
54
|
+
padding: 16px;
|
|
55
|
+
|
|
56
|
+
margin-right: -16px;
|
|
57
|
+
margin-left: -16px;
|
|
58
|
+
width: calc(100% + 32px);
|
|
59
|
+
|
|
60
|
+
@media screen and (min-width: 600px) {
|
|
61
|
+
padding: 16px 24px;
|
|
62
|
+
margin-right: -24px;
|
|
63
|
+
margin-left: -24px;
|
|
64
|
+
width: calc(100% + 48px);
|
|
65
|
+
}
|
|
66
|
+
@media screen and (min-width: 960px) {
|
|
67
|
+
padding: 16px 32px;
|
|
68
|
+
margin-right: -32px;
|
|
69
|
+
margin-left: -32px;
|
|
70
|
+
width: calc(100% + 64px);
|
|
71
|
+
}
|
|
72
|
+
@media screen and (min-width: 1260px) {
|
|
73
|
+
padding: 16px 40px;
|
|
74
|
+
margin-right: -40px;
|
|
75
|
+
margin-left: -40px;
|
|
76
|
+
width: calc(100% + 80px);
|
|
77
|
+
}
|
|
78
|
+
}
|
|
78
79
|
`}
|
|
79
80
|
|
|
80
81
|
${disableContentPadding && css`
|
|
@@ -11,7 +11,6 @@ import FocusTrap from "../../__internal__/focus-trap";
|
|
|
11
11
|
import IconButton from "../icon-button";
|
|
12
12
|
import Icon from "../icon";
|
|
13
13
|
import useLocale from "../../hooks/__internal__/useLocale";
|
|
14
|
-
import useIsStickyFooterForm from "../../hooks/__internal__/useIsStickyFooterForm";
|
|
15
14
|
import useModalAria from "../../hooks/__internal__/useModalAria/useModalAria";
|
|
16
15
|
import tagComponent from "../../__internal__/utils/helpers/tags";
|
|
17
16
|
export const DialogFullScreen = ({
|
|
@@ -49,7 +48,6 @@ export const DialogFullScreen = ({
|
|
|
49
48
|
const {
|
|
50
49
|
current: subtitleId
|
|
51
50
|
} = useRef(createGuid());
|
|
52
|
-
const hasStickyFooter = useIsStickyFooterForm(children);
|
|
53
51
|
const isTopModal = useModalAria(dialogRef);
|
|
54
52
|
const closeIcon = () => {
|
|
55
53
|
if (!showCloseIcon || !onCancel) return null;
|
|
@@ -109,8 +107,7 @@ export const DialogFullScreen = ({
|
|
|
109
107
|
hasHeader: title !== undefined,
|
|
110
108
|
"data-element": "content",
|
|
111
109
|
ref: contentRef,
|
|
112
|
-
disableContentPadding: disableContentPadding
|
|
113
|
-
hasStickyFooter: hasStickyFooter
|
|
110
|
+
disableContentPadding: disableContentPadding
|
|
114
111
|
}, children))));
|
|
115
112
|
};
|
|
116
113
|
export default DialogFullScreen;
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
|
|
2
|
-
import React, { useCallback, useRef } from "react";
|
|
2
|
+
import React, { useCallback, useRef, useMemo } from "react";
|
|
3
3
|
import PropTypes from "prop-types";
|
|
4
4
|
import Modal from "../modal";
|
|
5
5
|
import StyledSidebar from "./sidebar.style";
|
|
@@ -11,7 +11,6 @@ import Box from "../box";
|
|
|
11
11
|
import createGuid from "../../__internal__/utils/helpers/guid";
|
|
12
12
|
import useLocale from "../../hooks/__internal__/useLocale";
|
|
13
13
|
import { filterStyledSystemPaddingProps } from "../../style/utils";
|
|
14
|
-
import useIsStickyFooterForm from "../../hooks/__internal__/useIsStickyFooterForm";
|
|
15
14
|
import useModalAria from "../../hooks/__internal__/useModalAria/useModalAria";
|
|
16
15
|
|
|
17
16
|
// TODO FE-5408 will investigate why React.RefObject<T> produces a failed prop type when current = null
|
|
@@ -44,7 +43,7 @@ const Sidebar = /*#__PURE__*/React.forwardRef(({
|
|
|
44
43
|
const {
|
|
45
44
|
current: headerId
|
|
46
45
|
} = useRef(createGuid());
|
|
47
|
-
const hasStickyFooter =
|
|
46
|
+
const hasStickyFooter = useMemo(() => React.Children.toArray(children).some(child => /*#__PURE__*/React.isValidElement(child) && child.props.stickyFooter), [children]);
|
|
48
47
|
const sidebarRef = useRef(null);
|
|
49
48
|
const setRefs = useCallback(reference => {
|
|
50
49
|
sidebarRef.current = reference;
|
|
@@ -23,7 +23,6 @@ const StyledEditorContainer = styled.div`
|
|
|
23
23
|
div.DraftEditor-root {
|
|
24
24
|
min-height: inherit;
|
|
25
25
|
height: 100%;
|
|
26
|
-
min-width: 290px;
|
|
27
26
|
margin: 4px;
|
|
28
27
|
}
|
|
29
28
|
|
|
@@ -31,7 +30,6 @@ const StyledEditorContainer = styled.div`
|
|
|
31
30
|
div.public-DraftEditor-content {
|
|
32
31
|
min-height: inherit;
|
|
33
32
|
height: 100%;
|
|
34
|
-
min-width: 290px;
|
|
35
33
|
background-color: var(--colorsUtilityYang100);
|
|
36
34
|
line-height: ${lineHeight}px;
|
|
37
35
|
|
|
@@ -17,7 +17,6 @@ var _focusTrap = _interopRequireDefault(require("../../__internal__/focus-trap")
|
|
|
17
17
|
var _iconButton = _interopRequireDefault(require("../icon-button"));
|
|
18
18
|
var _icon = _interopRequireDefault(require("../icon"));
|
|
19
19
|
var _useLocale = _interopRequireDefault(require("../../hooks/__internal__/useLocale"));
|
|
20
|
-
var _useIsStickyFooterForm = _interopRequireDefault(require("../../hooks/__internal__/useIsStickyFooterForm"));
|
|
21
20
|
var _useModalAria = _interopRequireDefault(require("../../hooks/__internal__/useModalAria/useModalAria"));
|
|
22
21
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
23
22
|
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
|
|
@@ -60,7 +59,6 @@ const Dialog = exports.Dialog = /*#__PURE__*/(0, _react.forwardRef)(({
|
|
|
60
59
|
const {
|
|
61
60
|
current: subtitleId
|
|
62
61
|
} = (0, _react.useRef)((0, _guid.default)());
|
|
63
|
-
const hasStickyFooter = (0, _useIsStickyFooterForm.default)(children);
|
|
64
62
|
const isTopModal = (0, _useModalAria.default)(containerRef);
|
|
65
63
|
(0, _react.useImperativeHandle)(ref, () => ({
|
|
66
64
|
focus() {
|
|
@@ -191,9 +189,7 @@ const Dialog = exports.Dialog = /*#__PURE__*/(0, _react.forwardRef)(({
|
|
|
191
189
|
tabIndex: -1
|
|
192
190
|
}, contentPadding, {
|
|
193
191
|
backgroundColor: greyBackground ? "var(--colorsUtilityMajor025)" : "var(--colorsUtilityYang100)"
|
|
194
|
-
}), dialogTitle(), closeIcon(), /*#__PURE__*/_react.default.createElement(_dialog.StyledDialogContent,
|
|
195
|
-
hasStickyFooter: hasStickyFooter
|
|
196
|
-
}), /*#__PURE__*/_react.default.createElement(_dialog.StyledDialogInnerContent, _extends({
|
|
192
|
+
}), dialogTitle(), closeIcon(), /*#__PURE__*/_react.default.createElement(_dialog.StyledDialogContent, contentPadding, /*#__PURE__*/_react.default.createElement(_dialog.StyledDialogInnerContent, _extends({
|
|
197
193
|
ref: innerContentRef
|
|
198
194
|
}, contentPadding), children)))));
|
|
199
195
|
});
|
|
@@ -12,8 +12,6 @@ declare type StyledDialogTitleProps = {
|
|
|
12
12
|
hasSubtitle?: boolean;
|
|
13
13
|
};
|
|
14
14
|
declare const StyledDialogTitle: import("styled-components").StyledComponent<"div", any, StyledDialogTitleProps, never>;
|
|
15
|
-
declare const StyledDialogContent: import("styled-components").StyledComponent<"div", any, ContentPaddingInterface
|
|
16
|
-
hasStickyFooter: boolean;
|
|
17
|
-
}, never>;
|
|
15
|
+
declare const StyledDialogContent: import("styled-components").StyledComponent<"div", any, ContentPaddingInterface, never>;
|
|
18
16
|
declare const StyledDialogInnerContent: import("styled-components").StyledComponent<"div", any, ContentPaddingInterface, never>;
|
|
19
17
|
export { StyledDialog, StyledDialogTitle, StyledDialogContent, StyledDialogInnerContent, };
|
|
@@ -126,11 +126,13 @@ const StyledDialogContent = exports.StyledDialogContent = _styledComponents.defa
|
|
|
126
126
|
box-sizing: border-box;
|
|
127
127
|
display: flex;
|
|
128
128
|
flex-direction: column;
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
129
|
+
overflow-y: auto;
|
|
130
|
+
|
|
131
|
+
/* Delegate handling overflow to child form if it has a sticky footer */
|
|
132
|
+
&:has(${_form.StyledFormContent}.sticky) {
|
|
133
|
+
overflow-y: inherit;
|
|
134
|
+
}
|
|
135
|
+
|
|
134
136
|
width: 100%;
|
|
135
137
|
flex: 1;
|
|
136
138
|
padding: 0px ${_dialog.HORIZONTAL_PADDING}px ${_dialog.CONTENT_BOTTOM_PADDING}px;
|
|
@@ -9,65 +9,13 @@ var _form = require("../form/form.style");
|
|
|
9
9
|
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
|
|
10
10
|
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
|
|
11
11
|
const StyledContent = _styledComponents.default.div`
|
|
12
|
-
|
|
13
|
-
hasStickyFooter
|
|
14
|
-
}) => !hasStickyFooter && (0, _styledComponents.css)`
|
|
15
|
-
overflow-y: auto;
|
|
16
|
-
`}
|
|
12
|
+
overflow-y: auto;
|
|
17
13
|
padding: 0 16px;
|
|
18
14
|
flex: 1;
|
|
19
15
|
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
margin-right: -16px;
|
|
24
|
-
margin-left: -16px;
|
|
25
|
-
|
|
26
|
-
@media screen and (min-width: 600px) {
|
|
27
|
-
padding-right: 24px;
|
|
28
|
-
padding-left: 24px;
|
|
29
|
-
margin-right: -24px;
|
|
30
|
-
margin-left: -24px;
|
|
31
|
-
}
|
|
32
|
-
@media screen and (min-width: 960px) {
|
|
33
|
-
padding-right: 32px;
|
|
34
|
-
padding-left: 32px;
|
|
35
|
-
margin-right: -32px;
|
|
36
|
-
margin-left: -32px;
|
|
37
|
-
}
|
|
38
|
-
@media screen and (min-width: 1260px) {
|
|
39
|
-
padding-right: 40px;
|
|
40
|
-
padding-left: 40px;
|
|
41
|
-
margin-right: -40px;
|
|
42
|
-
margin-left: -40px;
|
|
43
|
-
}
|
|
44
|
-
}
|
|
45
|
-
|
|
46
|
-
${_form.StyledFormFooter}.sticky {
|
|
47
|
-
padding: 16px;
|
|
48
|
-
|
|
49
|
-
margin-right: -16px;
|
|
50
|
-
margin-left: -16px;
|
|
51
|
-
width: calc(100% + 32px);
|
|
52
|
-
|
|
53
|
-
@media screen and (min-width: 600px) {
|
|
54
|
-
padding: 16px 24px;
|
|
55
|
-
margin-right: -24px;
|
|
56
|
-
margin-left: -24px;
|
|
57
|
-
width: calc(100% + 48px);
|
|
58
|
-
}
|
|
59
|
-
@media screen and (min-width: 960px) {
|
|
60
|
-
padding: 16px 32px;
|
|
61
|
-
margin-right: -32px;
|
|
62
|
-
margin-left: -32px;
|
|
63
|
-
width: calc(100% + 64px);
|
|
64
|
-
}
|
|
65
|
-
@media screen and (min-width: 1260px) {
|
|
66
|
-
padding: 16px 40px;
|
|
67
|
-
margin-right: -40px;
|
|
68
|
-
margin-left: -40px;
|
|
69
|
-
width: calc(100% + 80px);
|
|
70
|
-
}
|
|
16
|
+
/* Delegate handling overflow to child form if it has a sticky footer */
|
|
17
|
+
&:has(${_form.StyledFormContent}.sticky) {
|
|
18
|
+
overflow-y: inherit;
|
|
71
19
|
}
|
|
72
20
|
|
|
73
21
|
${({
|
|
@@ -83,6 +31,59 @@ const StyledContent = _styledComponents.default.div`
|
|
|
83
31
|
@media screen and (min-width: 1260px) {
|
|
84
32
|
padding: 0 40px;
|
|
85
33
|
}
|
|
34
|
+
|
|
35
|
+
${_form.StyledFormContent}.sticky {
|
|
36
|
+
padding-right: 16px;
|
|
37
|
+
padding-left: 16px;
|
|
38
|
+
margin-right: -16px;
|
|
39
|
+
margin-left: -16px;
|
|
40
|
+
|
|
41
|
+
@media screen and (min-width: 600px) {
|
|
42
|
+
padding-right: 24px;
|
|
43
|
+
padding-left: 24px;
|
|
44
|
+
margin-right: -24px;
|
|
45
|
+
margin-left: -24px;
|
|
46
|
+
}
|
|
47
|
+
@media screen and (min-width: 960px) {
|
|
48
|
+
padding-right: 32px;
|
|
49
|
+
padding-left: 32px;
|
|
50
|
+
margin-right: -32px;
|
|
51
|
+
margin-left: -32px;
|
|
52
|
+
}
|
|
53
|
+
@media screen and (min-width: 1260px) {
|
|
54
|
+
padding-right: 40px;
|
|
55
|
+
padding-left: 40px;
|
|
56
|
+
margin-right: -40px;
|
|
57
|
+
margin-left: -40px;
|
|
58
|
+
}
|
|
59
|
+
}
|
|
60
|
+
|
|
61
|
+
${_form.StyledFormFooter}.sticky {
|
|
62
|
+
padding: 16px;
|
|
63
|
+
|
|
64
|
+
margin-right: -16px;
|
|
65
|
+
margin-left: -16px;
|
|
66
|
+
width: calc(100% + 32px);
|
|
67
|
+
|
|
68
|
+
@media screen and (min-width: 600px) {
|
|
69
|
+
padding: 16px 24px;
|
|
70
|
+
margin-right: -24px;
|
|
71
|
+
margin-left: -24px;
|
|
72
|
+
width: calc(100% + 48px);
|
|
73
|
+
}
|
|
74
|
+
@media screen and (min-width: 960px) {
|
|
75
|
+
padding: 16px 32px;
|
|
76
|
+
margin-right: -32px;
|
|
77
|
+
margin-left: -32px;
|
|
78
|
+
width: calc(100% + 64px);
|
|
79
|
+
}
|
|
80
|
+
@media screen and (min-width: 1260px) {
|
|
81
|
+
padding: 16px 40px;
|
|
82
|
+
margin-right: -40px;
|
|
83
|
+
margin-left: -40px;
|
|
84
|
+
width: calc(100% + 80px);
|
|
85
|
+
}
|
|
86
|
+
}
|
|
86
87
|
`}
|
|
87
88
|
|
|
88
89
|
${disableContentPadding && (0, _styledComponents.css)`
|
|
@@ -16,7 +16,6 @@ var _focusTrap = _interopRequireDefault(require("../../__internal__/focus-trap")
|
|
|
16
16
|
var _iconButton = _interopRequireDefault(require("../icon-button"));
|
|
17
17
|
var _icon = _interopRequireDefault(require("../icon"));
|
|
18
18
|
var _useLocale = _interopRequireDefault(require("../../hooks/__internal__/useLocale"));
|
|
19
|
-
var _useIsStickyFooterForm = _interopRequireDefault(require("../../hooks/__internal__/useIsStickyFooterForm"));
|
|
20
19
|
var _useModalAria = _interopRequireDefault(require("../../hooks/__internal__/useModalAria/useModalAria"));
|
|
21
20
|
var _tags = _interopRequireDefault(require("../../__internal__/utils/helpers/tags"));
|
|
22
21
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
@@ -58,7 +57,6 @@ const DialogFullScreen = ({
|
|
|
58
57
|
const {
|
|
59
58
|
current: subtitleId
|
|
60
59
|
} = (0, _react.useRef)((0, _guid.default)());
|
|
61
|
-
const hasStickyFooter = (0, _useIsStickyFooterForm.default)(children);
|
|
62
60
|
const isTopModal = (0, _useModalAria.default)(dialogRef);
|
|
63
61
|
const closeIcon = () => {
|
|
64
62
|
if (!showCloseIcon || !onCancel) return null;
|
|
@@ -118,8 +116,7 @@ const DialogFullScreen = ({
|
|
|
118
116
|
hasHeader: title !== undefined,
|
|
119
117
|
"data-element": "content",
|
|
120
118
|
ref: contentRef,
|
|
121
|
-
disableContentPadding: disableContentPadding
|
|
122
|
-
hasStickyFooter: hasStickyFooter
|
|
119
|
+
disableContentPadding: disableContentPadding
|
|
123
120
|
}, children))));
|
|
124
121
|
};
|
|
125
122
|
exports.DialogFullScreen = DialogFullScreen;
|
|
@@ -20,6 +20,7 @@ const StyledFormContent = exports.StyledFormContent = _styledComponents.default.
|
|
|
20
20
|
isInModal
|
|
21
21
|
}) => (0, _styledComponents.css)`
|
|
22
22
|
${stickyFooter && (0, _styledComponents.css)`
|
|
23
|
+
/* Take responsibility for handling overflow away from parent modal */
|
|
23
24
|
overflow-y: ${isInModal ? "auto" : "inherit"};
|
|
24
25
|
flex: 1;
|
|
25
26
|
`}
|
|
@@ -16,7 +16,6 @@ var _box = _interopRequireDefault(require("../box"));
|
|
|
16
16
|
var _guid = _interopRequireDefault(require("../../__internal__/utils/helpers/guid"));
|
|
17
17
|
var _useLocale = _interopRequireDefault(require("../../hooks/__internal__/useLocale"));
|
|
18
18
|
var _utils = require("../../style/utils");
|
|
19
|
-
var _useIsStickyFooterForm = _interopRequireDefault(require("../../hooks/__internal__/useIsStickyFooterForm"));
|
|
20
19
|
var _useModalAria = _interopRequireDefault(require("../../hooks/__internal__/useModalAria/useModalAria"));
|
|
21
20
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
22
21
|
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
|
|
@@ -52,7 +51,7 @@ const Sidebar = exports.Sidebar = /*#__PURE__*/_react.default.forwardRef(({
|
|
|
52
51
|
const {
|
|
53
52
|
current: headerId
|
|
54
53
|
} = (0, _react.useRef)((0, _guid.default)());
|
|
55
|
-
const hasStickyFooter = (0,
|
|
54
|
+
const hasStickyFooter = (0, _react.useMemo)(() => _react.default.Children.toArray(children).some(child => /*#__PURE__*/_react.default.isValidElement(child) && child.props.stickyFooter), [children]);
|
|
56
55
|
const sidebarRef = (0, _react.useRef)(null);
|
|
57
56
|
const setRefs = (0, _react.useCallback)(reference => {
|
|
58
57
|
sidebarRef.current = reference;
|
|
@@ -32,7 +32,6 @@ const StyledEditorContainer = exports.StyledEditorContainer = _styledComponents.
|
|
|
32
32
|
div.DraftEditor-root {
|
|
33
33
|
min-height: inherit;
|
|
34
34
|
height: 100%;
|
|
35
|
-
min-width: 290px;
|
|
36
35
|
margin: 4px;
|
|
37
36
|
}
|
|
38
37
|
|
|
@@ -40,7 +39,6 @@ const StyledEditorContainer = exports.StyledEditorContainer = _styledComponents.
|
|
|
40
39
|
div.public-DraftEditor-content {
|
|
41
40
|
min-height: inherit;
|
|
42
41
|
height: 100%;
|
|
43
|
-
min-width: 290px;
|
|
44
42
|
background-color: var(--colorsUtilityYang100);
|
|
45
43
|
line-height: ${lineHeight}px;
|
|
46
44
|
|
package/package.json
CHANGED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export { default } from "./useIsStickyFooterForm";
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export { default } from "./useIsStickyFooterForm";
|
|
@@ -1,6 +0,0 @@
|
|
|
1
|
-
import React, { useMemo } from "react";
|
|
2
|
-
import Form from "../../../components/form/form.component";
|
|
3
|
-
export default (children => {
|
|
4
|
-
const isStickyFooterForm = useMemo(() => React.Children.toArray(children).some(child => /*#__PURE__*/React.isValidElement(child) && child.type?.displayName === Form.displayName && child.props.stickyFooter), [children]);
|
|
5
|
-
return isStickyFooterForm;
|
|
6
|
-
});
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export { default } from "./useIsStickyFooterForm";
|
|
@@ -1,13 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
|
|
3
|
-
Object.defineProperty(exports, "__esModule", {
|
|
4
|
-
value: true
|
|
5
|
-
});
|
|
6
|
-
Object.defineProperty(exports, "default", {
|
|
7
|
-
enumerable: true,
|
|
8
|
-
get: function () {
|
|
9
|
-
return _useIsStickyFooterForm.default;
|
|
10
|
-
}
|
|
11
|
-
});
|
|
12
|
-
var _useIsStickyFooterForm = _interopRequireDefault(require("./useIsStickyFooterForm"));
|
|
13
|
-
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
@@ -1,16 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
|
|
3
|
-
Object.defineProperty(exports, "__esModule", {
|
|
4
|
-
value: true
|
|
5
|
-
});
|
|
6
|
-
exports.default = void 0;
|
|
7
|
-
var _react = _interopRequireWildcard(require("react"));
|
|
8
|
-
var _form = _interopRequireDefault(require("../../../components/form/form.component"));
|
|
9
|
-
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
10
|
-
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
|
|
11
|
-
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
|
|
12
|
-
var _default = children => {
|
|
13
|
-
const isStickyFooterForm = (0, _react.useMemo)(() => _react.default.Children.toArray(children).some(child => /*#__PURE__*/_react.default.isValidElement(child) && child.type?.displayName === _form.default.displayName && child.props.stickyFooter), [children]);
|
|
14
|
-
return isStickyFooterForm;
|
|
15
|
-
};
|
|
16
|
-
exports.default = _default;
|