@dfds-ui/modal 2.2.0-alpha.eae7bbcd → 2.2.0-alpha.efaebd54
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/cjs/modal/Modal.d.ts +6 -2
- package/cjs/modal/Modal.js +22 -18
- package/cjs/modal/ModalAction.d.ts +2 -2
- package/cjs/modal/ModalAction.js +6 -6
- package/cjs/modal/ModalActionsContainer.d.ts +1 -1
- package/cjs/modal/ModalActionsContainer.js +12 -7
- package/cjs/modal/ModalBody.d.ts +3 -3
- package/cjs/modal/ModalBody.js +2 -4
- package/cjs/modal/ModalCloseButton.d.ts +1 -1
- package/cjs/modal/ModalCloseButton.js +6 -6
- package/cjs/modal/ModalDialog.d.ts +6 -6
- package/cjs/modal/ModalDialog.js +37 -36
- package/cjs/modal/ModalFooter.d.ts +1 -1
- package/cjs/modal/ModalFooter.js +7 -6
- package/cjs/modal/ModalHeader.d.ts +1 -1
- package/cjs/modal/ModalHeader.js +10 -7
- package/cjs/modal/ModalHeadline.d.ts +1 -1
- package/cjs/modal/ModalHeadline.js +6 -5
- package/cjs/modal/ModalPanel.d.ts +4 -4
- package/cjs/modal/ModalPanel.js +29 -22
- package/cjs/modal/ReactModalWrapper.d.ts +1 -1
- package/cjs/modal/ReactModalWrapper.js +5 -5
- package/modal/Modal.d.ts +6 -2
- package/modal/Modal.js +27 -16
- package/modal/ModalAction.d.ts +2 -2
- package/modal/ModalAction.js +10 -5
- package/modal/ModalActionsContainer.d.ts +1 -1
- package/modal/ModalActionsContainer.js +15 -6
- package/modal/ModalBody.d.ts +3 -3
- package/modal/ModalCloseButton.d.ts +1 -1
- package/modal/ModalCloseButton.js +10 -5
- package/modal/ModalDialog.d.ts +6 -6
- package/modal/ModalDialog.js +33 -31
- package/modal/ModalFooter.d.ts +1 -1
- package/modal/ModalFooter.js +13 -6
- package/modal/ModalHeader.d.ts +1 -1
- package/modal/ModalHeader.js +17 -8
- package/modal/ModalHeadline.d.ts +1 -1
- package/modal/ModalHeadline.js +5 -4
- package/modal/ModalPanel.d.ts +4 -4
- package/modal/ModalPanel.js +29 -23
- package/modal/ReactModalWrapper.d.ts +1 -1
- package/modal/ReactModalWrapper.js +10 -5
- package/package.json +9 -9
package/cjs/modal/ModalFooter.js
CHANGED
|
@@ -7,8 +7,8 @@ exports.default = exports.ModalFooter = void 0;
|
|
|
7
7
|
var _react = _interopRequireDefault(require("react"));
|
|
8
8
|
var _react2 = require("@emotion/react");
|
|
9
9
|
var _reactComponents = require("@dfds-ui/react-components");
|
|
10
|
+
var _jsxRuntime = require("@emotion/react/jsx-runtime");
|
|
10
11
|
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
|
|
11
|
-
function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
|
|
12
12
|
const stickyStyles = /*#__PURE__*/(0, _react2.css)(_reactComponents.legacyMedia.lt('md'), "{position:sticky;bottom:0;left:0;right:0;}" + (process.env.NODE_ENV === "production" ? "" : ";label:stickyStyles;"), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy9tb2RhbC9Nb2RhbEZvb3Rlci50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBVXdCIiwiZmlsZSI6Ii4uLy4uLy4uL3NyYy9tb2RhbC9Nb2RhbEZvb3Rlci50c3giLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgUmVhY3QsIHsgUmVhY3ROb2RlIH0gZnJvbSAncmVhY3QnXG5pbXBvcnQgeyBjc3MgfSBmcm9tICdAZW1vdGlvbi9yZWFjdCdcbmltcG9ydCB7IGxlZ2FjeU1lZGlhIGFzIG1lZGlhIH0gZnJvbSAnQGRmZHMtdWkvcmVhY3QtY29tcG9uZW50cydcblxuZXhwb3J0IHR5cGUgTW9kYWxGb290ZXJQcm9wcyA9IHtcbiAgY2xhc3NOYW1lPzogc3RyaW5nXG4gIHN0aWNreT86IGJvb2xlYW5cbiAgY2hpbGRyZW4/OiBSZWFjdE5vZGVcbn1cblxuY29uc3Qgc3RpY2t5U3R5bGVzID0gY3NzYFxuICAke21lZGlhLmx0KCdtZCcpfSB7XG4gICAgcG9zaXRpb246IHN0aWNreTtcbiAgICBib3R0b206IDA7XG4gICAgbGVmdDogMDtcbiAgICByaWdodDogMDtcbiAgfVxuYFxuXG5leHBvcnQgY29uc3QgTW9kYWxGb290ZXIgPSAoeyBjaGlsZHJlbiwgY2xhc3NOYW1lLCBzdGlja3ksIC4uLnJlc3QgfTogTW9kYWxGb290ZXJQcm9wcykgPT4ge1xuICByZXR1cm4gKFxuICAgIDxkaXZcbiAgICAgIGNsYXNzTmFtZT17Y2xhc3NOYW1lfVxuICAgICAgY3NzPXtjc3NgXG4gICAgICAgIGJhY2tncm91bmQtY29sb3I6IGJsdWU7XG4gICAgICAgICR7c3RpY2t5ICYmIHN0aWNreVN0eWxlc307XG4gICAgICBgfVxuICAgICAgey4uLnJlc3R9XG4gICAgPlxuICAgICAge2NoaWxkcmVufVxuICAgIDwvZGl2PlxuICApXG59XG5cbmV4cG9ydCBkZWZhdWx0IE1vZGFsRm9vdGVyXG4iXX0= */");
|
|
13
13
|
const ModalFooter = ({
|
|
14
14
|
children,
|
|
@@ -16,11 +16,12 @@ const ModalFooter = ({
|
|
|
16
16
|
sticky,
|
|
17
17
|
...rest
|
|
18
18
|
}) => {
|
|
19
|
-
return (0,
|
|
19
|
+
return (0, _jsxRuntime.jsx)("div", {
|
|
20
20
|
className: className,
|
|
21
|
-
css: /*#__PURE__*/(0, _react2.css)("background-color:blue;", sticky && stickyStyles, ";" + (process.env.NODE_ENV === "production" ? "" : ";label:ModalFooter;"), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy9tb2RhbC9Nb2RhbEZvb3Rlci50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBdUJjIiwiZmlsZSI6Ii4uLy4uLy4uL3NyYy9tb2RhbC9Nb2RhbEZvb3Rlci50c3giLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgUmVhY3QsIHsgUmVhY3ROb2RlIH0gZnJvbSAncmVhY3QnXG5pbXBvcnQgeyBjc3MgfSBmcm9tICdAZW1vdGlvbi9yZWFjdCdcbmltcG9ydCB7IGxlZ2FjeU1lZGlhIGFzIG1lZGlhIH0gZnJvbSAnQGRmZHMtdWkvcmVhY3QtY29tcG9uZW50cydcblxuZXhwb3J0IHR5cGUgTW9kYWxGb290ZXJQcm9wcyA9IHtcbiAgY2xhc3NOYW1lPzogc3RyaW5nXG4gIHN0aWNreT86IGJvb2xlYW5cbiAgY2hpbGRyZW4/OiBSZWFjdE5vZGVcbn1cblxuY29uc3Qgc3RpY2t5U3R5bGVzID0gY3NzYFxuICAke21lZGlhLmx0KCdtZCcpfSB7XG4gICAgcG9zaXRpb246IHN0aWNreTtcbiAgICBib3R0b206IDA7XG4gICAgbGVmdDogMDtcbiAgICByaWdodDogMDtcbiAgfVxuYFxuXG5leHBvcnQgY29uc3QgTW9kYWxGb290ZXIgPSAoeyBjaGlsZHJlbiwgY2xhc3NOYW1lLCBzdGlja3ksIC4uLnJlc3QgfTogTW9kYWxGb290ZXJQcm9wcykgPT4ge1xuICByZXR1cm4gKFxuICAgIDxkaXZcbiAgICAgIGNsYXNzTmFtZT17Y2xhc3NOYW1lfVxuICAgICAgY3NzPXtjc3NgXG4gICAgICAgIGJhY2tncm91bmQtY29sb3I6IGJsdWU7XG4gICAgICAgICR7c3RpY2t5ICYmIHN0aWNreVN0eWxlc307XG4gICAgICBgfVxuICAgICAgey4uLnJlc3R9XG4gICAgPlxuICAgICAge2NoaWxkcmVufVxuICAgIDwvZGl2PlxuICApXG59XG5cbmV4cG9ydCBkZWZhdWx0IE1vZGFsRm9vdGVyXG4iXX0= */")
|
|
22
|
-
|
|
21
|
+
css: /*#__PURE__*/(0, _react2.css)("background-color:blue;", sticky && stickyStyles, ";" + (process.env.NODE_ENV === "production" ? "" : ";label:ModalFooter;"), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy9tb2RhbC9Nb2RhbEZvb3Rlci50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBdUJjIiwiZmlsZSI6Ii4uLy4uLy4uL3NyYy9tb2RhbC9Nb2RhbEZvb3Rlci50c3giLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgUmVhY3QsIHsgUmVhY3ROb2RlIH0gZnJvbSAncmVhY3QnXG5pbXBvcnQgeyBjc3MgfSBmcm9tICdAZW1vdGlvbi9yZWFjdCdcbmltcG9ydCB7IGxlZ2FjeU1lZGlhIGFzIG1lZGlhIH0gZnJvbSAnQGRmZHMtdWkvcmVhY3QtY29tcG9uZW50cydcblxuZXhwb3J0IHR5cGUgTW9kYWxGb290ZXJQcm9wcyA9IHtcbiAgY2xhc3NOYW1lPzogc3RyaW5nXG4gIHN0aWNreT86IGJvb2xlYW5cbiAgY2hpbGRyZW4/OiBSZWFjdE5vZGVcbn1cblxuY29uc3Qgc3RpY2t5U3R5bGVzID0gY3NzYFxuICAke21lZGlhLmx0KCdtZCcpfSB7XG4gICAgcG9zaXRpb246IHN0aWNreTtcbiAgICBib3R0b206IDA7XG4gICAgbGVmdDogMDtcbiAgICByaWdodDogMDtcbiAgfVxuYFxuXG5leHBvcnQgY29uc3QgTW9kYWxGb290ZXIgPSAoeyBjaGlsZHJlbiwgY2xhc3NOYW1lLCBzdGlja3ksIC4uLnJlc3QgfTogTW9kYWxGb290ZXJQcm9wcykgPT4ge1xuICByZXR1cm4gKFxuICAgIDxkaXZcbiAgICAgIGNsYXNzTmFtZT17Y2xhc3NOYW1lfVxuICAgICAgY3NzPXtjc3NgXG4gICAgICAgIGJhY2tncm91bmQtY29sb3I6IGJsdWU7XG4gICAgICAgICR7c3RpY2t5ICYmIHN0aWNreVN0eWxlc307XG4gICAgICBgfVxuICAgICAgey4uLnJlc3R9XG4gICAgPlxuICAgICAge2NoaWxkcmVufVxuICAgIDwvZGl2PlxuICApXG59XG5cbmV4cG9ydCBkZWZhdWx0IE1vZGFsRm9vdGVyXG4iXX0= */"),
|
|
22
|
+
...rest,
|
|
23
|
+
children: children
|
|
24
|
+
});
|
|
23
25
|
};
|
|
24
26
|
exports.ModalFooter = ModalFooter;
|
|
25
|
-
var _default = ModalFooter;
|
|
26
|
-
exports.default = _default;
|
|
27
|
+
var _default = exports.default = ModalFooter;
|
package/cjs/modal/ModalHeader.js
CHANGED
|
@@ -9,8 +9,8 @@ var _react2 = require("@emotion/react");
|
|
|
9
9
|
var _theme = require("@dfds-ui/theme");
|
|
10
10
|
var _reactComponents = require("@dfds-ui/react-components");
|
|
11
11
|
var _divider = require("@dfds-ui/react-components/divider");
|
|
12
|
+
var _jsxRuntime = require("@emotion/react/jsx-runtime");
|
|
12
13
|
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
|
|
13
|
-
function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
|
|
14
14
|
const stickyStyles = /*#__PURE__*/(0, _react2.css)(_reactComponents.legacyMedia.lt('md'), "{position:sticky;top:0;left:0;right:0;}" + (process.env.NODE_ENV === "production" ? "" : ";label:stickyStyles;"), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy9tb2RhbC9Nb2RhbEhlYWRlci50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBYXdCIiwiZmlsZSI6Ii4uLy4uLy4uL3NyYy9tb2RhbC9Nb2RhbEhlYWRlci50c3giLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgUmVhY3QsIHsgUmVhY3ROb2RlLCBGcmFnbWVudCB9IGZyb20gJ3JlYWN0J1xuaW1wb3J0IHsgY3NzIH0gZnJvbSAnQGVtb3Rpb24vcmVhY3QnXG5pbXBvcnQgeyB0aGVtZSB9IGZyb20gJ0BkZmRzLXVpL3RoZW1lJ1xuaW1wb3J0IHsgbGVnYWN5TWVkaWEgYXMgbWVkaWEgfSBmcm9tICdAZGZkcy11aS9yZWFjdC1jb21wb25lbnRzJ1xuaW1wb3J0IHsgRGl2aWRlciB9IGZyb20gJ0BkZmRzLXVpL3JlYWN0LWNvbXBvbmVudHMvZGl2aWRlcidcblxuZXhwb3J0IHR5cGUgTW9kYWxIZWFkZXJQcm9wcyA9IHtcbiAgY2xhc3NOYW1lPzogc3RyaW5nXG4gIHN0aWNreT86IGJvb2xlYW5cbiAgY2hpbGRyZW4/OiBSZWFjdE5vZGVcbiAgbm9EaXZpZGVyPzogYm9vbGVhblxufVxuXG5jb25zdCBzdGlja3lTdHlsZXMgPSBjc3NgXG4gICR7bWVkaWEubHQoJ21kJyl9IHtcbiAgICBwb3NpdGlvbjogc3RpY2t5O1xuICAgIHRvcDogMDtcbiAgICBsZWZ0OiAwO1xuICAgIHJpZ2h0OiAwO1xuICB9XG5gXG5cbmV4cG9ydCBjb25zdCBNb2RhbEhlYWRlciA9ICh7IGNoaWxkcmVuLCBjbGFzc05hbWUsIHN0aWNreSwgbm9EaXZpZGVyID0gZmFsc2UsIC4uLnJlc3QgfTogTW9kYWxIZWFkZXJQcm9wcykgPT4ge1xuICByZXR1cm4gKFxuICAgIDxGcmFnbWVudD5cbiAgICAgIDxkaXZcbiAgICAgICAgY2xhc3NOYW1lPXtjbGFzc05hbWV9XG4gICAgICAgIGNzcz17Y3NzYFxuICAgICAgICAgIG1pbi1oZWlnaHQ6IDNyZW07XG4gICAgICAgICAgZGlzcGxheTogZmxleDtcbiAgICAgICAgICBhbGlnbi1pdGVtczogY2VudGVyO1xuICAgICAgICAgIGp1c3RpZnktY29udGVudDogc3BhY2UtYmV0d2VlbjtcbiAgICAgICAgICBwYWRkaW5nLWxlZnQ6ICR7dGhlbWUuc3BhY2luZy5zfTtcbiAgICAgICAgICBiYWNrZ3JvdW5kLWNvbG9yOiAke3RoZW1lLmNvbG9ycy5zdXJmYWNlLnByaW1hcnl9O1xuICAgICAgICAgICR7c3RpY2t5ICYmIHN0aWNreVN0eWxlc307XG4gICAgICAgIGB9XG4gICAgICAgIHsuLi5yZXN0fVxuICAgICAgPlxuICAgICAgICB7Y2hpbGRyZW59XG4gICAgICA8L2Rpdj5cbiAgICAgIHshbm9EaXZpZGVyICYmIDxEaXZpZGVyIC8+fVxuICAgIDwvRnJhZ21lbnQ+XG4gIClcbn1cblxuZXhwb3J0IGRlZmF1bHQgTW9kYWxIZWFkZXJcbiJdfQ== */");
|
|
15
15
|
const ModalHeader = ({
|
|
16
16
|
children,
|
|
@@ -19,11 +19,14 @@ const ModalHeader = ({
|
|
|
19
19
|
noDivider = false,
|
|
20
20
|
...rest
|
|
21
21
|
}) => {
|
|
22
|
-
return (0,
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
22
|
+
return (0, _jsxRuntime.jsxs)(_react.Fragment, {
|
|
23
|
+
children: [(0, _jsxRuntime.jsx)("div", {
|
|
24
|
+
className: className,
|
|
25
|
+
css: /*#__PURE__*/(0, _react2.css)("min-height:3rem;display:flex;align-items:center;justify-content:space-between;padding-left:", _theme.theme.spacing.s, ";background-color:", _theme.theme.colors.surface.primary, ";", sticky && stickyStyles, ";" + (process.env.NODE_ENV === "production" ? "" : ";label:ModalHeader;"), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy9tb2RhbC9Nb2RhbEhlYWRlci50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBMkJnQiIsImZpbGUiOiIuLi8uLi8uLi9zcmMvbW9kYWwvTW9kYWxIZWFkZXIudHN4Iiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IFJlYWN0LCB7IFJlYWN0Tm9kZSwgRnJhZ21lbnQgfSBmcm9tICdyZWFjdCdcbmltcG9ydCB7IGNzcyB9IGZyb20gJ0BlbW90aW9uL3JlYWN0J1xuaW1wb3J0IHsgdGhlbWUgfSBmcm9tICdAZGZkcy11aS90aGVtZSdcbmltcG9ydCB7IGxlZ2FjeU1lZGlhIGFzIG1lZGlhIH0gZnJvbSAnQGRmZHMtdWkvcmVhY3QtY29tcG9uZW50cydcbmltcG9ydCB7IERpdmlkZXIgfSBmcm9tICdAZGZkcy11aS9yZWFjdC1jb21wb25lbnRzL2RpdmlkZXInXG5cbmV4cG9ydCB0eXBlIE1vZGFsSGVhZGVyUHJvcHMgPSB7XG4gIGNsYXNzTmFtZT86IHN0cmluZ1xuICBzdGlja3k/OiBib29sZWFuXG4gIGNoaWxkcmVuPzogUmVhY3ROb2RlXG4gIG5vRGl2aWRlcj86IGJvb2xlYW5cbn1cblxuY29uc3Qgc3RpY2t5U3R5bGVzID0gY3NzYFxuICAke21lZGlhLmx0KCdtZCcpfSB7XG4gICAgcG9zaXRpb246IHN0aWNreTtcbiAgICB0b3A6IDA7XG4gICAgbGVmdDogMDtcbiAgICByaWdodDogMDtcbiAgfVxuYFxuXG5leHBvcnQgY29uc3QgTW9kYWxIZWFkZXIgPSAoeyBjaGlsZHJlbiwgY2xhc3NOYW1lLCBzdGlja3ksIG5vRGl2aWRlciA9IGZhbHNlLCAuLi5yZXN0IH06IE1vZGFsSGVhZGVyUHJvcHMpID0+IHtcbiAgcmV0dXJuIChcbiAgICA8RnJhZ21lbnQ+XG4gICAgICA8ZGl2XG4gICAgICAgIGNsYXNzTmFtZT17Y2xhc3NOYW1lfVxuICAgICAgICBjc3M9e2Nzc2BcbiAgICAgICAgICBtaW4taGVpZ2h0OiAzcmVtO1xuICAgICAgICAgIGRpc3BsYXk6IGZsZXg7XG4gICAgICAgICAgYWxpZ24taXRlbXM6IGNlbnRlcjtcbiAgICAgICAgICBqdXN0aWZ5LWNvbnRlbnQ6IHNwYWNlLWJldHdlZW47XG4gICAgICAgICAgcGFkZGluZy1sZWZ0OiAke3RoZW1lLnNwYWNpbmcuc307XG4gICAgICAgICAgYmFja2dyb3VuZC1jb2xvcjogJHt0aGVtZS5jb2xvcnMuc3VyZmFjZS5wcmltYXJ5fTtcbiAgICAgICAgICAke3N0aWNreSAmJiBzdGlja3lTdHlsZXN9O1xuICAgICAgICBgfVxuICAgICAgICB7Li4ucmVzdH1cbiAgICAgID5cbiAgICAgICAge2NoaWxkcmVufVxuICAgICAgPC9kaXY+XG4gICAgICB7IW5vRGl2aWRlciAmJiA8RGl2aWRlciAvPn1cbiAgICA8L0ZyYWdtZW50PlxuICApXG59XG5cbmV4cG9ydCBkZWZhdWx0IE1vZGFsSGVhZGVyXG4iXX0= */"),
|
|
26
|
+
...rest,
|
|
27
|
+
children: children
|
|
28
|
+
}), !noDivider && (0, _jsxRuntime.jsx)(_divider.Divider, {})]
|
|
29
|
+
});
|
|
26
30
|
};
|
|
27
31
|
exports.ModalHeader = ModalHeader;
|
|
28
|
-
var _default = ModalHeader;
|
|
29
|
-
exports.default = _default;
|
|
32
|
+
var _default = exports.default = ModalHeader;
|
|
@@ -8,16 +8,17 @@ var _react = _interopRequireDefault(require("react"));
|
|
|
8
8
|
var _reactComponents = require("@dfds-ui/react-components");
|
|
9
9
|
var _react2 = require("@emotion/react");
|
|
10
10
|
var _theme = require("@dfds-ui/theme");
|
|
11
|
+
var _jsxRuntime = require("@emotion/react/jsx-runtime");
|
|
11
12
|
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
|
|
12
13
|
const ModalHeadline = ({
|
|
13
14
|
className,
|
|
14
15
|
children
|
|
15
16
|
}) => {
|
|
16
|
-
return (0,
|
|
17
|
+
return (0, _jsxRuntime.jsx)(_reactComponents.SmallHeadline, {
|
|
17
18
|
css: /*#__PURE__*/(0, _react2.css)("color:", _theme.theme.colors.primary.dark, ";margin:0.625rem 0;" + (process.env.NODE_ENV === "production" ? "" : ";label:ModalHeadline;"), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy9tb2RhbC9Nb2RhbEhlYWRsaW5lLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFhYyIsImZpbGUiOiIuLi8uLi8uLi9zcmMvbW9kYWwvTW9kYWxIZWFkbGluZS50c3giLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgUmVhY3QsIHsgUmVhY3ROb2RlIH0gZnJvbSAncmVhY3QnXG5pbXBvcnQgeyBTbWFsbEhlYWRsaW5lIH0gZnJvbSAnQGRmZHMtdWkvcmVhY3QtY29tcG9uZW50cydcbmltcG9ydCB7IGNzcyB9IGZyb20gJ0BlbW90aW9uL3JlYWN0J1xuaW1wb3J0IHsgdGhlbWUgfSBmcm9tICdAZGZkcy11aS90aGVtZSdcblxuZXhwb3J0IHR5cGUgTW9kYWxIZWFkbGluZVByb3BzID0ge1xuICBjbGFzc05hbWU/OiBzdHJpbmdcbiAgY2hpbGRyZW4/OiBSZWFjdE5vZGVcbn1cblxuZXhwb3J0IGNvbnN0IE1vZGFsSGVhZGxpbmUgPSAoeyBjbGFzc05hbWUsIGNoaWxkcmVuIH06IE1vZGFsSGVhZGxpbmVQcm9wcykgPT4ge1xuICByZXR1cm4gKFxuICAgIDxTbWFsbEhlYWRsaW5lXG4gICAgICBjc3M9e2Nzc2BcbiAgICAgICAgY29sb3I6ICR7dGhlbWUuY29sb3JzLnByaW1hcnkuZGFya307XG4gICAgICAgIG1hcmdpbjogMC42MjVyZW0gMDtcbiAgICAgIGB9XG4gICAgICBjbGFzc05hbWU9e2NsYXNzTmFtZX1cbiAgICA+XG4gICAgICB7Y2hpbGRyZW59XG4gICAgPC9TbWFsbEhlYWRsaW5lPlxuICApXG59XG5cbmV4cG9ydCBkZWZhdWx0IE1vZGFsSGVhZGxpbmVcbiJdfQ== */"),
|
|
18
|
-
className: className
|
|
19
|
-
|
|
19
|
+
className: className,
|
|
20
|
+
children: children
|
|
21
|
+
});
|
|
20
22
|
};
|
|
21
23
|
exports.ModalHeadline = ModalHeadline;
|
|
22
|
-
var _default = ModalHeadline;
|
|
23
|
-
exports.default = _default;
|
|
24
|
+
var _default = exports.default = ModalHeadline;
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import React, { ReactNode } from 'react';
|
|
2
|
-
export
|
|
2
|
+
export type ModalPanelProps = {
|
|
3
3
|
/**
|
|
4
4
|
* Determines if the modal should be shown or not.
|
|
5
5
|
*/
|
|
@@ -23,7 +23,7 @@ export declare type ModalPanelProps = {
|
|
|
23
23
|
children?: ReactNode;
|
|
24
24
|
};
|
|
25
25
|
export declare const ModalPanel: ({ isOpen, shouldCloseOnEsc, onRequestClose, zIndex, className, children, }: ModalPanelProps) => React.JSX.Element;
|
|
26
|
-
export
|
|
26
|
+
export type ModalPanelHeaderProps = {
|
|
27
27
|
/**
|
|
28
28
|
* className to be assigned to component
|
|
29
29
|
*/
|
|
@@ -31,7 +31,7 @@ export declare type ModalPanelHeaderProps = {
|
|
|
31
31
|
children: ReactNode;
|
|
32
32
|
};
|
|
33
33
|
export declare const ModalPanelHeader: ({ className, children }: ModalPanelHeaderProps) => React.JSX.Element;
|
|
34
|
-
export
|
|
34
|
+
export type ModalPanelContent = {
|
|
35
35
|
/**
|
|
36
36
|
* className to be assigned to component
|
|
37
37
|
*/
|
|
@@ -39,7 +39,7 @@ export declare type ModalPanelContent = {
|
|
|
39
39
|
children: ReactNode;
|
|
40
40
|
};
|
|
41
41
|
export declare const ModalPanelContent: ({ className, children }: ModalPanelContent) => React.JSX.Element;
|
|
42
|
-
export
|
|
42
|
+
export type ModalPanelFooterProps = {
|
|
43
43
|
/**
|
|
44
44
|
* className to be assigned to component
|
|
45
45
|
*/
|
package/cjs/modal/ModalPanel.js
CHANGED
|
@@ -9,6 +9,7 @@ var _react2 = require("@emotion/react");
|
|
|
9
9
|
var _ReactModalWrapper = require("./ReactModalWrapper");
|
|
10
10
|
var _reactComponents = require("@dfds-ui/react-components");
|
|
11
11
|
var _theme = require("@dfds-ui/theme");
|
|
12
|
+
var _jsxRuntime = require("@emotion/react/jsx-runtime");
|
|
12
13
|
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
|
|
13
14
|
function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
|
|
14
15
|
const modalPanelStyles = ({
|
|
@@ -24,20 +25,23 @@ const ModalPanel = ({
|
|
|
24
25
|
className,
|
|
25
26
|
children
|
|
26
27
|
}) => {
|
|
27
|
-
return (0,
|
|
28
|
-
enabled: isOpen
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
28
|
+
return (0, _jsxRuntime.jsx)(_reactComponents.LockBodyScroll, {
|
|
29
|
+
enabled: isOpen,
|
|
30
|
+
children: (0, _jsxRuntime.jsx)(_ReactModalWrapper.ReactModalWrapper, {
|
|
31
|
+
isOpen: isOpen,
|
|
32
|
+
shouldCloseOnEsc: shouldCloseOnEsc,
|
|
33
|
+
onRequestClose: onRequestClose,
|
|
34
|
+
ariaHideApp: false,
|
|
35
|
+
css: modalPanelStyles({
|
|
36
|
+
zIndex
|
|
37
|
+
}),
|
|
38
|
+
children: (0, _jsxRuntime.jsx)("div", {
|
|
39
|
+
css: /*#__PURE__*/(0, _react2.css)("top:0;bottom:0;left:0;right:0;position:fixed;width:100%;display:flex;flex-direction:column;background-color:", _theme.theme.colors.surface.primary, ";z-index:1000;" + (process.env.NODE_ENV === "production" ? "" : ";label:ModalPanel;"), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy9tb2RhbC9Nb2RhbFBhbmVsLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUF5RGtCIiwiZmlsZSI6Ii4uLy4uLy4uL3NyYy9tb2RhbC9Nb2RhbFBhbmVsLnRzeCIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCBSZWFjdCwgeyBSZWFjdE5vZGUgfSBmcm9tICdyZWFjdCdcbmltcG9ydCB7IGNzcyB9IGZyb20gJ0BlbW90aW9uL3JlYWN0J1xuaW1wb3J0IHsgUmVhY3RNb2RhbFdyYXBwZXIgfSBmcm9tICcuL1JlYWN0TW9kYWxXcmFwcGVyJ1xuaW1wb3J0IHsgTG9ja0JvZHlTY3JvbGwgfSBmcm9tICdAZGZkcy11aS9yZWFjdC1jb21wb25lbnRzJ1xuaW1wb3J0IHsgdGhlbWUgfSBmcm9tICdAZGZkcy11aS90aGVtZSdcblxuZXhwb3J0IHR5cGUgTW9kYWxQYW5lbFByb3BzID0ge1xuICAvKipcbiAgICogRGV0ZXJtaW5lcyBpZiB0aGUgbW9kYWwgc2hvdWxkIGJlIHNob3duIG9yIG5vdC5cbiAgICovXG4gIGlzT3BlbjogYm9vbGVhblxuICAvKipcbiAgICogRGV0ZXJtaW5lcyBpZiBwcmVzc2luZyBlc2Mgc2hvdWxkIGNsb3NlIHRoZSBtb2RhbC5cbiAgICovXG4gIHNob3VsZENsb3NlT25Fc2M/OiBib29sZWFuXG4gIC8qKlxuICAgKiBDYWxsYmFjayB3aGVuIHRoZSBtb2RhbCBpcyByZXF1ZXN0ZWQgdG8gYmUgY2xvc2VkLlxuICAgKi9cbiAgb25SZXF1ZXN0Q2xvc2U/OiAoKSA9PiB2b2lkXG4gIC8qKlxuICAgKiB6SW5kZXggZm9yIHRoZSBtb2RhbC5cbiAgICovXG4gIHpJbmRleD86IG51bWJlclxuICAvKipcbiAgICogY2xhc3NOYW1lIHRvIGJlIGFzc2lnbmVkIHRvIGNvbXBvbmVudC5cbiAgICovXG4gIGNsYXNzTmFtZT86IHN0cmluZ1xuICBjaGlsZHJlbj86IFJlYWN0Tm9kZVxufVxuXG5jb25zdCBtb2RhbFBhbmVsU3R5bGVzID0gKHsgekluZGV4IH06IHsgekluZGV4PzogbnVtYmVyIH0pID0+IHtcbiAgcmV0dXJuIGNzc2BcbiAgICAmX19vdmVybGF5IHtcbiAgICAgIHBvc2l0aW9uOiByZWxhdGl2ZTtcbiAgICAgIHotaW5kZXg6ICR7ekluZGV4fTtcbiAgICB9XG4gIGBcbn1cblxuZXhwb3J0IGNvbnN0IE1vZGFsUGFuZWwgPSAoe1xuICBpc09wZW4sXG4gIHNob3VsZENsb3NlT25Fc2MsXG4gIG9uUmVxdWVzdENsb3NlLFxuICB6SW5kZXggPSA5MDAwLFxuICBjbGFzc05hbWUsXG4gIGNoaWxkcmVuLFxufTogTW9kYWxQYW5lbFByb3BzKSA9PiB7XG4gIHJldHVybiAoXG4gICAgPExvY2tCb2R5U2Nyb2xsIGVuYWJsZWQ9e2lzT3Blbn0+XG4gICAgICA8UmVhY3RNb2RhbFdyYXBwZXJcbiAgICAgICAgaXNPcGVuPXtpc09wZW59XG4gICAgICAgIHNob3VsZENsb3NlT25Fc2M9e3Nob3VsZENsb3NlT25Fc2N9XG4gICAgICAgIG9uUmVxdWVzdENsb3NlPXtvblJlcXVlc3RDbG9zZX1cbiAgICAgICAgYXJpYUhpZGVBcHA9e2ZhbHNlfVxuICAgICAgICBjc3M9e21vZGFsUGFuZWxTdHlsZXMoeyB6SW5kZXggfSl9XG4gICAgICA+XG4gICAgICAgIDxkaXZcbiAgICAgICAgICBjc3M9e2Nzc2BcbiAgICAgICAgICAgIHRvcDogMDtcbiAgICAgICAgICAgIGJvdHRvbTogMDtcbiAgICAgICAgICAgIGxlZnQ6IDA7XG4gICAgICAgICAgICByaWdodDogMDtcbiAgICAgICAgICAgIHBvc2l0aW9uOiBmaXhlZDtcbiAgICAgICAgICAgIHdpZHRoOiAxMDAlO1xuICAgICAgICAgICAgZGlzcGxheTogZmxleDtcbiAgICAgICAgICAgIGZsZXgtZGlyZWN0aW9uOiBjb2x1bW47XG4gICAgICAgICAgICBiYWNrZ3JvdW5kLWNvbG9yOiAke3RoZW1lLmNvbG9ycy5zdXJmYWNlLnByaW1hcnl9O1xuICAgICAgICAgICAgei1pbmRleDogMTAwMDtcbiAgICAgICAgICBgfVxuICAgICAgICAgIGNsYXNzTmFtZT17Y2xhc3NOYW1lfVxuICAgICAgICA+XG4gICAgICAgICAge2NoaWxkcmVufVxuICAgICAgICA8L2Rpdj5cbiAgICAgIDwvUmVhY3RNb2RhbFdyYXBwZXI+XG4gICAgPC9Mb2NrQm9keVNjcm9sbD5cbiAgKVxufVxuXG5leHBvcnQgdHlwZSBNb2RhbFBhbmVsSGVhZGVyUHJvcHMgPSB7XG4gIC8qKlxuICAgKiBjbGFzc05hbWUgdG8gYmUgYXNzaWduZWQgdG8gY29tcG9uZW50XG4gICAqL1xuICBjbGFzc05hbWU/OiBzdHJpbmdcbiAgY2hpbGRyZW46IFJlYWN0Tm9kZVxufVxuXG5leHBvcnQgY29uc3QgTW9kYWxQYW5lbEhlYWRlciA9ICh7IGNsYXNzTmFtZSwgY2hpbGRyZW4gfTogTW9kYWxQYW5lbEhlYWRlclByb3BzKSA9PiB7XG4gIHJldHVybiAoXG4gICAgPGhlYWRlclxuICAgICAgY3NzPXtjc3NgXG4gICAgICAgIHBvc2l0aW9uOiByZWxhdGl2ZTtcbiAgICAgIGB9XG4gICAgICBjbGFzc05hbWU9e2NsYXNzTmFtZX1cbiAgICA+XG4gICAgICB7Y2hpbGRyZW59XG4gICAgPC9oZWFkZXI+XG4gIClcbn1cblxuZXhwb3J0IHR5cGUgTW9kYWxQYW5lbENvbnRlbnQgPSB7XG4gIC8qKlxuICAgKiBjbGFzc05hbWUgdG8gYmUgYXNzaWduZWQgdG8gY29tcG9uZW50XG4gICAqL1xuICBjbGFzc05hbWU/OiBzdHJpbmdcbiAgY2hpbGRyZW46IFJlYWN0Tm9kZVxufVxuXG5leHBvcnQgY29uc3QgTW9kYWxQYW5lbENvbnRlbnQgPSAoeyBjbGFzc05hbWUsIGNoaWxkcmVuIH06IE1vZGFsUGFuZWxDb250ZW50KSA9PiB7XG4gIHJldHVybiAoXG4gICAgPHNlY3Rpb25cbiAgICAgIGNzcz17Y3NzYFxuICAgICAgICBkaXNwbGF5OiBibG9jaztcbiAgICAgICAgcG9zaXRpb246IHJlbGF0aXZlO1xuICAgICAgICBmb250LXNpemU6IDE0cHg7XG4gICAgICAgIGxpbmUtaGVpZ2h0OiAxOHB4O1xuICAgICAgICBmb250LXdlaWdodDogNDAwO1xuICAgICAgICBmbGV4OiAxIDEgYXV0bztcbiAgICAgICAgb3ZlcmZsb3c6IGF1dG87XG4gICAgICAgIC13ZWJraXQtb3ZlcmZsb3ctc2Nyb2xsaW5nOiB0b3VjaDtcbiAgICAgIGB9XG4gICAgICBjbGFzc05hbWU9e2NsYXNzTmFtZX1cbiAgICA+XG4gICAgICB7Y2hpbGRyZW59XG4gICAgPC9zZWN0aW9uPlxuICApXG59XG5cbmV4cG9ydCB0eXBlIE1vZGFsUGFuZWxGb290ZXJQcm9wcyA9IHtcbiAgLyoqXG4gICAqIGNsYXNzTmFtZSB0byBiZSBhc3NpZ25lZCB0byBjb21wb25lbnRcbiAgICovXG4gIGNsYXNzTmFtZT86IHN0cmluZ1xuICBjaGlsZHJlbjogUmVhY3ROb2RlXG59XG5cbmV4cG9ydCBjb25zdCBNb2RhbFBhbmVsRm9vdGVyID0gKHsgY2xhc3NOYW1lLCBjaGlsZHJlbiB9OiBNb2RhbFBhbmVsRm9vdGVyUHJvcHMpID0+IHtcbiAgcmV0dXJuIChcbiAgICA8Zm9vdGVyXG4gICAgICBjc3M9e2Nzc2BcbiAgICAgICAgZmxleDogMCAwIGF1dG87XG4gICAgICBgfVxuICAgICAgY2xhc3NOYW1lPXtjbGFzc05hbWV9XG4gICAgPlxuICAgICAge2NoaWxkcmVufVxuICAgIDwvZm9vdGVyPlxuICApXG59XG4iXX0= */"),
|
|
40
|
+
className: className,
|
|
41
|
+
children: children
|
|
42
|
+
})
|
|
36
43
|
})
|
|
37
|
-
}
|
|
38
|
-
css: /*#__PURE__*/(0, _react2.css)("top:0;bottom:0;left:0;right:0;position:fixed;width:100%;display:flex;flex-direction:column;background-color:", _theme.theme.colors.surface.primary, ";z-index:1000;" + (process.env.NODE_ENV === "production" ? "" : ";label:ModalPanel;"), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy9tb2RhbC9Nb2RhbFBhbmVsLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUF5RGtCIiwiZmlsZSI6Ii4uLy4uLy4uL3NyYy9tb2RhbC9Nb2RhbFBhbmVsLnRzeCIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCBSZWFjdCwgeyBSZWFjdE5vZGUgfSBmcm9tICdyZWFjdCdcbmltcG9ydCB7IGNzcyB9IGZyb20gJ0BlbW90aW9uL3JlYWN0J1xuaW1wb3J0IHsgUmVhY3RNb2RhbFdyYXBwZXIgfSBmcm9tICcuL1JlYWN0TW9kYWxXcmFwcGVyJ1xuaW1wb3J0IHsgTG9ja0JvZHlTY3JvbGwgfSBmcm9tICdAZGZkcy11aS9yZWFjdC1jb21wb25lbnRzJ1xuaW1wb3J0IHsgdGhlbWUgfSBmcm9tICdAZGZkcy11aS90aGVtZSdcblxuZXhwb3J0IHR5cGUgTW9kYWxQYW5lbFByb3BzID0ge1xuICAvKipcbiAgICogRGV0ZXJtaW5lcyBpZiB0aGUgbW9kYWwgc2hvdWxkIGJlIHNob3duIG9yIG5vdC5cbiAgICovXG4gIGlzT3BlbjogYm9vbGVhblxuICAvKipcbiAgICogRGV0ZXJtaW5lcyBpZiBwcmVzc2luZyBlc2Mgc2hvdWxkIGNsb3NlIHRoZSBtb2RhbC5cbiAgICovXG4gIHNob3VsZENsb3NlT25Fc2M/OiBib29sZWFuXG4gIC8qKlxuICAgKiBDYWxsYmFjayB3aGVuIHRoZSBtb2RhbCBpcyByZXF1ZXN0ZWQgdG8gYmUgY2xvc2VkLlxuICAgKi9cbiAgb25SZXF1ZXN0Q2xvc2U/OiAoKSA9PiB2b2lkXG4gIC8qKlxuICAgKiB6SW5kZXggZm9yIHRoZSBtb2RhbC5cbiAgICovXG4gIHpJbmRleD86IG51bWJlclxuICAvKipcbiAgICogY2xhc3NOYW1lIHRvIGJlIGFzc2lnbmVkIHRvIGNvbXBvbmVudC5cbiAgICovXG4gIGNsYXNzTmFtZT86IHN0cmluZ1xuICBjaGlsZHJlbj86IFJlYWN0Tm9kZVxufVxuXG5jb25zdCBtb2RhbFBhbmVsU3R5bGVzID0gKHsgekluZGV4IH06IHsgekluZGV4PzogbnVtYmVyIH0pID0+IHtcbiAgcmV0dXJuIGNzc2BcbiAgICAmX19vdmVybGF5IHtcbiAgICAgIHBvc2l0aW9uOiByZWxhdGl2ZTtcbiAgICAgIHotaW5kZXg6ICR7ekluZGV4fTtcbiAgICB9XG4gIGBcbn1cblxuZXhwb3J0IGNvbnN0IE1vZGFsUGFuZWwgPSAoe1xuICBpc09wZW4sXG4gIHNob3VsZENsb3NlT25Fc2MsXG4gIG9uUmVxdWVzdENsb3NlLFxuICB6SW5kZXggPSA5MDAwLFxuICBjbGFzc05hbWUsXG4gIGNoaWxkcmVuLFxufTogTW9kYWxQYW5lbFByb3BzKSA9PiB7XG4gIHJldHVybiAoXG4gICAgPExvY2tCb2R5U2Nyb2xsIGVuYWJsZWQ9e2lzT3Blbn0+XG4gICAgICA8UmVhY3RNb2RhbFdyYXBwZXJcbiAgICAgICAgaXNPcGVuPXtpc09wZW59XG4gICAgICAgIHNob3VsZENsb3NlT25Fc2M9e3Nob3VsZENsb3NlT25Fc2N9XG4gICAgICAgIG9uUmVxdWVzdENsb3NlPXtvblJlcXVlc3RDbG9zZX1cbiAgICAgICAgYXJpYUhpZGVBcHA9e2ZhbHNlfVxuICAgICAgICBjc3M9e21vZGFsUGFuZWxTdHlsZXMoeyB6SW5kZXggfSl9XG4gICAgICA+XG4gICAgICAgIDxkaXZcbiAgICAgICAgICBjc3M9e2Nzc2BcbiAgICAgICAgICAgIHRvcDogMDtcbiAgICAgICAgICAgIGJvdHRvbTogMDtcbiAgICAgICAgICAgIGxlZnQ6IDA7XG4gICAgICAgICAgICByaWdodDogMDtcbiAgICAgICAgICAgIHBvc2l0aW9uOiBmaXhlZDtcbiAgICAgICAgICAgIHdpZHRoOiAxMDAlO1xuICAgICAgICAgICAgZGlzcGxheTogZmxleDtcbiAgICAgICAgICAgIGZsZXgtZGlyZWN0aW9uOiBjb2x1bW47XG4gICAgICAgICAgICBiYWNrZ3JvdW5kLWNvbG9yOiAke3RoZW1lLmNvbG9ycy5zdXJmYWNlLnByaW1hcnl9O1xuICAgICAgICAgICAgei1pbmRleDogMTAwMDtcbiAgICAgICAgICBgfVxuICAgICAgICAgIGNsYXNzTmFtZT17Y2xhc3NOYW1lfVxuICAgICAgICA+XG4gICAgICAgICAge2NoaWxkcmVufVxuICAgICAgICA8L2Rpdj5cbiAgICAgIDwvUmVhY3RNb2RhbFdyYXBwZXI+XG4gICAgPC9Mb2NrQm9keVNjcm9sbD5cbiAgKVxufVxuXG5leHBvcnQgdHlwZSBNb2RhbFBhbmVsSGVhZGVyUHJvcHMgPSB7XG4gIC8qKlxuICAgKiBjbGFzc05hbWUgdG8gYmUgYXNzaWduZWQgdG8gY29tcG9uZW50XG4gICAqL1xuICBjbGFzc05hbWU/OiBzdHJpbmdcbiAgY2hpbGRyZW46IFJlYWN0Tm9kZVxufVxuXG5leHBvcnQgY29uc3QgTW9kYWxQYW5lbEhlYWRlciA9ICh7IGNsYXNzTmFtZSwgY2hpbGRyZW4gfTogTW9kYWxQYW5lbEhlYWRlclByb3BzKSA9PiB7XG4gIHJldHVybiAoXG4gICAgPGhlYWRlclxuICAgICAgY3NzPXtjc3NgXG4gICAgICAgIHBvc2l0aW9uOiByZWxhdGl2ZTtcbiAgICAgIGB9XG4gICAgICBjbGFzc05hbWU9e2NsYXNzTmFtZX1cbiAgICA+XG4gICAgICB7Y2hpbGRyZW59XG4gICAgPC9oZWFkZXI+XG4gIClcbn1cblxuZXhwb3J0IHR5cGUgTW9kYWxQYW5lbENvbnRlbnQgPSB7XG4gIC8qKlxuICAgKiBjbGFzc05hbWUgdG8gYmUgYXNzaWduZWQgdG8gY29tcG9uZW50XG4gICAqL1xuICBjbGFzc05hbWU/OiBzdHJpbmdcbiAgY2hpbGRyZW46IFJlYWN0Tm9kZVxufVxuXG5leHBvcnQgY29uc3QgTW9kYWxQYW5lbENvbnRlbnQgPSAoeyBjbGFzc05hbWUsIGNoaWxkcmVuIH06IE1vZGFsUGFuZWxDb250ZW50KSA9PiB7XG4gIHJldHVybiAoXG4gICAgPHNlY3Rpb25cbiAgICAgIGNzcz17Y3NzYFxuICAgICAgICBkaXNwbGF5OiBibG9jaztcbiAgICAgICAgcG9zaXRpb246IHJlbGF0aXZlO1xuICAgICAgICBmb250LXNpemU6IDE0cHg7XG4gICAgICAgIGxpbmUtaGVpZ2h0OiAxOHB4O1xuICAgICAgICBmb250LXdlaWdodDogNDAwO1xuICAgICAgICBmbGV4OiAxIDEgYXV0bztcbiAgICAgICAgb3ZlcmZsb3c6IGF1dG87XG4gICAgICAgIC13ZWJraXQtb3ZlcmZsb3ctc2Nyb2xsaW5nOiB0b3VjaDtcbiAgICAgIGB9XG4gICAgICBjbGFzc05hbWU9e2NsYXNzTmFtZX1cbiAgICA+XG4gICAgICB7Y2hpbGRyZW59XG4gICAgPC9zZWN0aW9uPlxuICApXG59XG5cbmV4cG9ydCB0eXBlIE1vZGFsUGFuZWxGb290ZXJQcm9wcyA9IHtcbiAgLyoqXG4gICAqIGNsYXNzTmFtZSB0byBiZSBhc3NpZ25lZCB0byBjb21wb25lbnRcbiAgICovXG4gIGNsYXNzTmFtZT86IHN0cmluZ1xuICBjaGlsZHJlbjogUmVhY3ROb2RlXG59XG5cbmV4cG9ydCBjb25zdCBNb2RhbFBhbmVsRm9vdGVyID0gKHsgY2xhc3NOYW1lLCBjaGlsZHJlbiB9OiBNb2RhbFBhbmVsRm9vdGVyUHJvcHMpID0+IHtcbiAgcmV0dXJuIChcbiAgICA8Zm9vdGVyXG4gICAgICBjc3M9e2Nzc2BcbiAgICAgICAgZmxleDogMCAwIGF1dG87XG4gICAgICBgfVxuICAgICAgY2xhc3NOYW1lPXtjbGFzc05hbWV9XG4gICAgPlxuICAgICAge2NoaWxkcmVufVxuICAgIDwvZm9vdGVyPlxuICApXG59XG4iXX0= */"),
|
|
39
|
-
className: className
|
|
40
|
-
}, children)));
|
|
44
|
+
});
|
|
41
45
|
};
|
|
42
46
|
exports.ModalPanel = ModalPanel;
|
|
43
47
|
var _ref3 = process.env.NODE_ENV === "production" ? {
|
|
@@ -52,10 +56,11 @@ const ModalPanelHeader = ({
|
|
|
52
56
|
className,
|
|
53
57
|
children
|
|
54
58
|
}) => {
|
|
55
|
-
return (0,
|
|
59
|
+
return (0, _jsxRuntime.jsx)("header", {
|
|
56
60
|
css: _ref3,
|
|
57
|
-
className: className
|
|
58
|
-
|
|
61
|
+
className: className,
|
|
62
|
+
children: children
|
|
63
|
+
});
|
|
59
64
|
};
|
|
60
65
|
exports.ModalPanelHeader = ModalPanelHeader;
|
|
61
66
|
var _ref2 = process.env.NODE_ENV === "production" ? {
|
|
@@ -70,10 +75,11 @@ const ModalPanelContent = ({
|
|
|
70
75
|
className,
|
|
71
76
|
children
|
|
72
77
|
}) => {
|
|
73
|
-
return (0,
|
|
78
|
+
return (0, _jsxRuntime.jsx)("section", {
|
|
74
79
|
css: _ref2,
|
|
75
|
-
className: className
|
|
76
|
-
|
|
80
|
+
className: className,
|
|
81
|
+
children: children
|
|
82
|
+
});
|
|
77
83
|
};
|
|
78
84
|
exports.ModalPanelContent = ModalPanelContent;
|
|
79
85
|
var _ref = process.env.NODE_ENV === "production" ? {
|
|
@@ -88,9 +94,10 @@ const ModalPanelFooter = ({
|
|
|
88
94
|
className,
|
|
89
95
|
children
|
|
90
96
|
}) => {
|
|
91
|
-
return (0,
|
|
97
|
+
return (0, _jsxRuntime.jsx)("footer", {
|
|
92
98
|
css: _ref,
|
|
93
|
-
className: className
|
|
94
|
-
|
|
99
|
+
className: className,
|
|
100
|
+
children: children
|
|
101
|
+
});
|
|
95
102
|
};
|
|
96
103
|
exports.ModalPanelFooter = ModalPanelFooter;
|
|
@@ -6,16 +6,15 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
6
6
|
exports.ReactModalWrapper = void 0;
|
|
7
7
|
var _react = _interopRequireDefault(require("react"));
|
|
8
8
|
var _reactModal = _interopRequireDefault(require("react-modal"));
|
|
9
|
-
var
|
|
9
|
+
var _jsxRuntime = require("@emotion/react/jsx-runtime");
|
|
10
10
|
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
|
|
11
|
-
function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
|
|
12
11
|
const ReactModalWrapper = ({
|
|
13
12
|
className,
|
|
14
13
|
...rest
|
|
15
14
|
}) => {
|
|
16
15
|
const classArr = className ? className.split(' ') : ['__modal'];
|
|
17
16
|
const append = str => classArr.join(str + ' ') + str;
|
|
18
|
-
return (0,
|
|
17
|
+
return (0, _jsxRuntime.jsx)(_reactModal.default, {
|
|
19
18
|
closeTimeoutMS: 200,
|
|
20
19
|
className: {
|
|
21
20
|
base: append('__content'),
|
|
@@ -27,7 +26,8 @@ const ReactModalWrapper = ({
|
|
|
27
26
|
base: append('__overlay '),
|
|
28
27
|
afterOpen: append('__overlay--after-open'),
|
|
29
28
|
beforeClose: append('__overlay--before-close')
|
|
30
|
-
}
|
|
31
|
-
|
|
29
|
+
},
|
|
30
|
+
...rest
|
|
31
|
+
});
|
|
32
32
|
};
|
|
33
33
|
exports.ReactModalWrapper = ReactModalWrapper;
|
package/modal/Modal.d.ts
CHANGED
|
@@ -1,6 +1,10 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import { ModalSizes, ModalVariation, Backdrop, BackdropVariant } from './ModalDialog';
|
|
3
|
-
export
|
|
3
|
+
export type ModalProps = {
|
|
4
|
+
/**
|
|
5
|
+
* Content to be displayed inside the Modal.
|
|
6
|
+
*/
|
|
7
|
+
children?: React.ReactNode;
|
|
4
8
|
/**
|
|
5
9
|
* If set to `true` the modal is shown
|
|
6
10
|
*/
|
|
@@ -88,6 +92,6 @@ export declare type ModalProps = React.PropsWithChildren<{
|
|
|
88
92
|
* Overlay variant. Either transparent or solid.
|
|
89
93
|
*/
|
|
90
94
|
backdropVariant?: BackdropVariant;
|
|
91
|
-
}
|
|
95
|
+
};
|
|
92
96
|
export declare const Modal: ({ showClose, heading, headerClassName, noContentPadding, onRequestClose, children, closeTabIndex, closeLabel, column, zIndex, sizes, renderWhenClosed, backdrop, backdropVariant, actions, ...rest }: ModalProps) => React.JSX.Element;
|
|
93
97
|
export default Modal;
|
package/modal/Modal.js
CHANGED
|
@@ -1,7 +1,12 @@
|
|
|
1
|
+
function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
|
|
1
2
|
var _excluded = ["showClose", "heading", "headerClassName", "noContentPadding", "onRequestClose", "children", "closeTabIndex", "closeLabel", "column", "zIndex", "sizes", "renderWhenClosed", "backdrop", "backdropVariant", "actions"];
|
|
2
|
-
function
|
|
3
|
-
function
|
|
4
|
-
function
|
|
3
|
+
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
|
|
4
|
+
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
|
|
5
|
+
function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
|
|
6
|
+
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
|
|
7
|
+
function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
|
|
8
|
+
function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
|
|
9
|
+
function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
|
|
5
10
|
import React from 'react';
|
|
6
11
|
import ModalHeader from './ModalHeader';
|
|
7
12
|
import ModalCloseButton from './ModalCloseButton';
|
|
@@ -9,7 +14,7 @@ import ModalDialog, { defaultProps } from './ModalDialog';
|
|
|
9
14
|
import ModalBody from './ModalBody';
|
|
10
15
|
import ModalActionsContainer from './ModalActionsContainer';
|
|
11
16
|
import ModalHeadline from './ModalHeadline';
|
|
12
|
-
import { jsx as
|
|
17
|
+
import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
|
|
13
18
|
export var Modal = function Modal(_ref) {
|
|
14
19
|
var _ref$showClose = _ref.showClose,
|
|
15
20
|
showClose = _ref$showClose === void 0 ? true : _ref$showClose,
|
|
@@ -38,23 +43,29 @@ export var Modal = function Modal(_ref) {
|
|
|
38
43
|
actions = _ref.actions,
|
|
39
44
|
rest = _objectWithoutProperties(_ref, _excluded);
|
|
40
45
|
var showHeader = heading !== undefined || showClose;
|
|
41
|
-
return
|
|
46
|
+
return _jsxs(ModalDialog, _objectSpread(_objectSpread({
|
|
42
47
|
onRequestClose: onRequestClose,
|
|
43
48
|
sizes: sizes,
|
|
44
49
|
renderWhenClosed: renderWhenClosed,
|
|
45
50
|
backdrop: backdrop,
|
|
46
51
|
backdropVariant: backdropVariant
|
|
47
|
-
}, rest),
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
52
|
+
}, rest), {}, {
|
|
53
|
+
children: [showHeader && _jsxs(ModalHeader, {
|
|
54
|
+
className: headerClassName,
|
|
55
|
+
children: [_jsx(ModalHeadline, {
|
|
56
|
+
children: heading
|
|
57
|
+
}), showClose && _jsx(ModalCloseButton, {
|
|
58
|
+
onRequestClose: onRequestClose,
|
|
59
|
+
tabIndex: closeTabIndex,
|
|
60
|
+
closeLabel: closeLabel
|
|
61
|
+
})]
|
|
62
|
+
}), _jsx(ModalBody, {
|
|
63
|
+
hasPadding: !noContentPadding,
|
|
64
|
+
column: column,
|
|
65
|
+
children: children
|
|
66
|
+
}), _jsx(ModalActionsContainer, {
|
|
67
|
+
actions: actions
|
|
68
|
+
})]
|
|
58
69
|
}));
|
|
59
70
|
};
|
|
60
71
|
export default Modal;
|
package/modal/ModalAction.d.ts
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import { ButtonProps } from '@dfds-ui/react-components';
|
|
3
|
-
export
|
|
4
|
-
export
|
|
3
|
+
export type ModalActionVariation = 'primary' | 'secondary';
|
|
4
|
+
export type ModalActionProps = {
|
|
5
5
|
actionVariation?: ModalActionVariation;
|
|
6
6
|
onClick?: () => void;
|
|
7
7
|
/**
|
package/modal/ModalAction.js
CHANGED
|
@@ -1,13 +1,18 @@
|
|
|
1
|
+
function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
|
|
1
2
|
var _excluded = ["actionVariation"];
|
|
2
|
-
function
|
|
3
|
-
function
|
|
4
|
-
function
|
|
3
|
+
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
|
|
4
|
+
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
|
|
5
|
+
function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
|
|
6
|
+
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
|
|
7
|
+
function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
|
|
8
|
+
function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
|
|
9
|
+
function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
|
|
5
10
|
import React from 'react';
|
|
6
11
|
import { css } from '@emotion/react';
|
|
7
12
|
import { theme } from '@dfds-ui/theme';
|
|
8
13
|
import { typography } from '@dfds-ui/typography';
|
|
9
14
|
import { Button } from '@dfds-ui/react-components';
|
|
10
|
-
import { jsx as
|
|
15
|
+
import { jsx as _jsx } from "@emotion/react/jsx-runtime";
|
|
11
16
|
var getVariationStyle = function getVariationStyle(actionVariation) {
|
|
12
17
|
if (actionVariation === 'primary') {
|
|
13
18
|
return /*#__PURE__*/css("color:", theme.colors.text.light.primary, ";background:", theme.colors.secondary.main, ";margin-right:", theme.spacing.s, ";&:hover{color:", theme.colors.text.light.primary, ";}" + (process.env.NODE_ENV === "production" ? "" : ";label:getVariationStyle;"), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uL3NyYy9tb2RhbC9Nb2RhbEFjdGlvbi50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBdUJjIiwiZmlsZSI6Ii4uLy4uL3NyYy9tb2RhbC9Nb2RhbEFjdGlvbi50c3giLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgUmVhY3QgZnJvbSAncmVhY3QnXG5pbXBvcnQgeyBjc3MgfSBmcm9tICdAZW1vdGlvbi9yZWFjdCdcbmltcG9ydCB7IHRoZW1lIH0gZnJvbSAnQGRmZHMtdWkvdGhlbWUnXG5pbXBvcnQgeyB0eXBvZ3JhcGh5IH0gZnJvbSAnQGRmZHMtdWkvdHlwb2dyYXBoeSdcbmltcG9ydCB7IEJ1dHRvbiwgQnV0dG9uUHJvcHMgfSBmcm9tICdAZGZkcy11aS9yZWFjdC1jb21wb25lbnRzJ1xuXG5leHBvcnQgdHlwZSBNb2RhbEFjdGlvblZhcmlhdGlvbiA9ICdwcmltYXJ5JyB8ICdzZWNvbmRhcnknXG5cbmV4cG9ydCB0eXBlIE1vZGFsQWN0aW9uUHJvcHMgPSB7XG4gIGFjdGlvblZhcmlhdGlvbj86IE1vZGFsQWN0aW9uVmFyaWF0aW9uXG4gIG9uQ2xpY2s/OiAoKSA9PiB2b2lkXG4gIC8qKlxuICAgKiBDbGFzcyBuYW1lIHRvIGJlIGFzc2lnbmVkIHRvIHRoZSBidXR0b25cbiAgICovXG4gIGNsYXNzTmFtZT86IHN0cmluZ1xuICAvKipcbiAgICogSFRNTCB0YWcgb3IgY3VzdG9tIGNvbXBvbmVudCBiZWluZyByZW5kZXJlZFxuICAgKi9cbiAgYXM/OiBSZWFjdC5FbGVtZW50VHlwZVxufSAmIE9taXQ8QnV0dG9uUHJvcHMsICd2YXJpYXRpb24nPlxuXG5jb25zdCBnZXRWYXJpYXRpb25TdHlsZSA9IChhY3Rpb25WYXJpYXRpb246IE1vZGFsQWN0aW9uVmFyaWF0aW9uKSA9PiB7XG4gIGlmIChhY3Rpb25WYXJpYXRpb24gPT09ICdwcmltYXJ5Jykge1xuICAgIHJldHVybiBjc3NgXG4gICAgICBjb2xvcjogJHt0aGVtZS5jb2xvcnMudGV4dC5saWdodC5wcmltYXJ5fTtcbiAgICAgIGJhY2tncm91bmQ6ICR7dGhlbWUuY29sb3JzLnNlY29uZGFyeS5tYWlufTtcbiAgICAgIG1hcmdpbi1yaWdodDogJHt0aGVtZS5zcGFjaW5nLnN9O1xuXG4gICAgICAmOmhvdmVyIHtcbiAgICAgICAgY29sb3I6ICR7dGhlbWUuY29sb3JzLnRleHQubGlnaHQucHJpbWFyeX07XG4gICAgICB9XG4gICAgYFxuICB9IGVsc2Uge1xuICAgIHJldHVybiBjc3NgXG4gICAgICBib3JkZXI6IDFweCBzb2xpZCAke3RoZW1lLmNvbG9ycy5zZWNvbmRhcnkubWFpbn07XG4gICAgYFxuICB9XG59XG5cbmV4cG9ydCBjb25zdCBNb2RhbEFjdGlvbjogUmVhY3QuRnVuY3Rpb25Db21wb25lbnQ8TW9kYWxBY3Rpb25Qcm9wcz4gPSAoeyBhY3Rpb25WYXJpYXRpb24gPSAncHJpbWFyeScsIC4uLnJlc3QgfSkgPT4ge1xuICByZXR1cm4gKFxuICAgIDxCdXR0b25cbiAgICAgIHZhcmlhdGlvbj1cInRleHRcIlxuICAgICAgdHlwZT1cImJ1dHRvblwiXG4gICAgICBjc3M9e2Nzc2BcbiAgICAgICAgJHt0eXBvZ3JhcGh5LmFjdGlvbn07XG4gICAgICAgIGZsZXg6IGF1dG87XG4gICAgICAgIGZsZXgtYmFzaXM6IGF1dG87XG4gICAgICAgIGZsZXgtZ3JvdzogMDtcbiAgICAgICAgbWFyZ2luLWxlZnQ6ICR7dGhlbWUuc3BhY2luZy54c307XG4gICAgICAgIHBhZGRpbmc6IDAgJHt0aGVtZS5zcGFjaW5nLnhzfTtcbiAgICAgICAgJHtnZXRWYXJpYXRpb25TdHlsZShhY3Rpb25WYXJpYXRpb24pfVxuICAgICAgYH1cbiAgICAgIHsuLi5yZXN0fVxuICAgIC8+XG4gIClcbn1cblxuZXhwb3J0IGRlZmF1bHQgTW9kYWxBY3Rpb25cbiJdfQ== */");
|
|
@@ -19,7 +24,7 @@ export var ModalAction = function ModalAction(_ref) {
|
|
|
19
24
|
var _ref$actionVariation = _ref.actionVariation,
|
|
20
25
|
actionVariation = _ref$actionVariation === void 0 ? 'primary' : _ref$actionVariation,
|
|
21
26
|
rest = _objectWithoutProperties(_ref, _excluded);
|
|
22
|
-
return
|
|
27
|
+
return _jsx(Button, _objectSpread({
|
|
23
28
|
variation: "text",
|
|
24
29
|
type: "button",
|
|
25
30
|
css: /*#__PURE__*/css(typography.action, ";flex:auto;flex-basis:auto;flex-grow:0;margin-left:", theme.spacing.xs, ";padding:0 ", theme.spacing.xs, ";", getVariationStyle(actionVariation), ";" + (process.env.NODE_ENV === "production" ? "" : ";label:ModalAction;"), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uL3NyYy9tb2RhbC9Nb2RhbEFjdGlvbi50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBNENjIiwiZmlsZSI6Ii4uLy4uL3NyYy9tb2RhbC9Nb2RhbEFjdGlvbi50c3giLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgUmVhY3QgZnJvbSAncmVhY3QnXG5pbXBvcnQgeyBjc3MgfSBmcm9tICdAZW1vdGlvbi9yZWFjdCdcbmltcG9ydCB7IHRoZW1lIH0gZnJvbSAnQGRmZHMtdWkvdGhlbWUnXG5pbXBvcnQgeyB0eXBvZ3JhcGh5IH0gZnJvbSAnQGRmZHMtdWkvdHlwb2dyYXBoeSdcbmltcG9ydCB7IEJ1dHRvbiwgQnV0dG9uUHJvcHMgfSBmcm9tICdAZGZkcy11aS9yZWFjdC1jb21wb25lbnRzJ1xuXG5leHBvcnQgdHlwZSBNb2RhbEFjdGlvblZhcmlhdGlvbiA9ICdwcmltYXJ5JyB8ICdzZWNvbmRhcnknXG5cbmV4cG9ydCB0eXBlIE1vZGFsQWN0aW9uUHJvcHMgPSB7XG4gIGFjdGlvblZhcmlhdGlvbj86IE1vZGFsQWN0aW9uVmFyaWF0aW9uXG4gIG9uQ2xpY2s/OiAoKSA9PiB2b2lkXG4gIC8qKlxuICAgKiBDbGFzcyBuYW1lIHRvIGJlIGFzc2lnbmVkIHRvIHRoZSBidXR0b25cbiAgICovXG4gIGNsYXNzTmFtZT86IHN0cmluZ1xuICAvKipcbiAgICogSFRNTCB0YWcgb3IgY3VzdG9tIGNvbXBvbmVudCBiZWluZyByZW5kZXJlZFxuICAgKi9cbiAgYXM/OiBSZWFjdC5FbGVtZW50VHlwZVxufSAmIE9taXQ8QnV0dG9uUHJvcHMsICd2YXJpYXRpb24nPlxuXG5jb25zdCBnZXRWYXJpYXRpb25TdHlsZSA9IChhY3Rpb25WYXJpYXRpb246IE1vZGFsQWN0aW9uVmFyaWF0aW9uKSA9PiB7XG4gIGlmIChhY3Rpb25WYXJpYXRpb24gPT09ICdwcmltYXJ5Jykge1xuICAgIHJldHVybiBjc3NgXG4gICAgICBjb2xvcjogJHt0aGVtZS5jb2xvcnMudGV4dC5saWdodC5wcmltYXJ5fTtcbiAgICAgIGJhY2tncm91bmQ6ICR7dGhlbWUuY29sb3JzLnNlY29uZGFyeS5tYWlufTtcbiAgICAgIG1hcmdpbi1yaWdodDogJHt0aGVtZS5zcGFjaW5nLnN9O1xuXG4gICAgICAmOmhvdmVyIHtcbiAgICAgICAgY29sb3I6ICR7dGhlbWUuY29sb3JzLnRleHQubGlnaHQucHJpbWFyeX07XG4gICAgICB9XG4gICAgYFxuICB9IGVsc2Uge1xuICAgIHJldHVybiBjc3NgXG4gICAgICBib3JkZXI6IDFweCBzb2xpZCAke3RoZW1lLmNvbG9ycy5zZWNvbmRhcnkubWFpbn07XG4gICAgYFxuICB9XG59XG5cbmV4cG9ydCBjb25zdCBNb2RhbEFjdGlvbjogUmVhY3QuRnVuY3Rpb25Db21wb25lbnQ8TW9kYWxBY3Rpb25Qcm9wcz4gPSAoeyBhY3Rpb25WYXJpYXRpb24gPSAncHJpbWFyeScsIC4uLnJlc3QgfSkgPT4ge1xuICByZXR1cm4gKFxuICAgIDxCdXR0b25cbiAgICAgIHZhcmlhdGlvbj1cInRleHRcIlxuICAgICAgdHlwZT1cImJ1dHRvblwiXG4gICAgICBjc3M9e2Nzc2BcbiAgICAgICAgJHt0eXBvZ3JhcGh5LmFjdGlvbn07XG4gICAgICAgIGZsZXg6IGF1dG87XG4gICAgICAgIGZsZXgtYmFzaXM6IGF1dG87XG4gICAgICAgIGZsZXgtZ3JvdzogMDtcbiAgICAgICAgbWFyZ2luLWxlZnQ6ICR7dGhlbWUuc3BhY2luZy54c307XG4gICAgICAgIHBhZGRpbmc6IDAgJHt0aGVtZS5zcGFjaW5nLnhzfTtcbiAgICAgICAgJHtnZXRWYXJpYXRpb25TdHlsZShhY3Rpb25WYXJpYXRpb24pfVxuICAgICAgYH1cbiAgICAgIHsuLi5yZXN0fVxuICAgIC8+XG4gIClcbn1cblxuZXhwb3J0IGRlZmF1bHQgTW9kYWxBY3Rpb25cbiJdfQ== */")
|
|
@@ -1,19 +1,28 @@
|
|
|
1
1
|
var _excluded = ["actions"];
|
|
2
|
-
function
|
|
3
|
-
function
|
|
4
|
-
function
|
|
2
|
+
function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
|
|
3
|
+
function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
|
|
4
|
+
function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
|
|
5
|
+
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
|
|
6
|
+
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
|
|
7
|
+
function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
|
|
8
|
+
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
|
|
9
|
+
function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
|
|
5
10
|
import React from 'react';
|
|
6
11
|
import { theme } from '@dfds-ui/theme';
|
|
7
12
|
import { css } from '@emotion/react';
|
|
8
|
-
import { jsx as
|
|
13
|
+
import { jsx as _jsx } from "@emotion/react/jsx-runtime";
|
|
9
14
|
var ModalAction = function ModalAction(props) {
|
|
10
|
-
return
|
|
15
|
+
return _jsx("div", _objectSpread({
|
|
11
16
|
css: /*#__PURE__*/css("display:flex;flex-wrap:nowrap;justify-content:flex-end;flex-grow:1;padding-top:", theme.spacing.s, ";padding-bottom:", theme.spacing.s, ";" + (process.env.NODE_ENV === "production" ? "" : ";label:ModalAction;"), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uL3NyYy9tb2RhbC9Nb2RhbEFjdGlvbnNDb250YWluZXIudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQWNjIiwiZmlsZSI6Ii4uLy4uL3NyYy9tb2RhbC9Nb2RhbEFjdGlvbnNDb250YWluZXIudHN4Iiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IFJlYWN0IGZyb20gJ3JlYWN0J1xuaW1wb3J0IHsgdGhlbWUgfSBmcm9tICdAZGZkcy11aS90aGVtZSdcbmltcG9ydCB7IGNzcyB9IGZyb20gJ0BlbW90aW9uL3JlYWN0J1xuXG5leHBvcnQgdHlwZSBNb2RhbEFjdGlvbnNQcm9wcyA9IHtcbiAgLyoqXG4gICAqIEFjdGlvbnMgdG8gYmUgZGlzcGxheWVkIGF0IHRoZSBib3R0b20gb2YgdGhlIG1vZGFsXG4gICAqL1xuICBhY3Rpb25zPzogUmVhY3QuUmVhY3ROb2RlXG59XG5cbmNvbnN0IE1vZGFsQWN0aW9uOiBSZWFjdC5GdW5jdGlvbkNvbXBvbmVudDx7IGNoaWxkcmVuPzogUmVhY3QuUmVhY3ROb2RlOyBjbGFzc05hbWU/OiBzdHJpbmcgfT4gPSAocHJvcHMpID0+IHtcbiAgcmV0dXJuIChcbiAgICA8ZGl2XG4gICAgICBjc3M9e2Nzc2BcbiAgICAgICAgZGlzcGxheTogZmxleDtcbiAgICAgICAgZmxleC13cmFwOiBub3dyYXA7XG4gICAgICAgIGp1c3RpZnktY29udGVudDogZmxleC1lbmQ7XG4gICAgICAgIGZsZXgtZ3JvdzogMTtcbiAgICAgICAgcGFkZGluZy10b3A6ICR7dGhlbWUuc3BhY2luZy5zfTtcbiAgICAgICAgcGFkZGluZy1ib3R0b206ICR7dGhlbWUuc3BhY2luZy5zfTtcbiAgICAgIGB9XG4gICAgICB7Li4ucHJvcHN9XG4gICAgLz5cbiAgKVxufVxuXG5jb25zdCBNb2RhbEFjdGlvbnNDb250YWluZXI6IFJlYWN0LkZ1bmN0aW9uQ29tcG9uZW50PE1vZGFsQWN0aW9uc1Byb3BzPiA9ICh7IGFjdGlvbnMsIC4uLnJlc3QgfSkgPT4ge1xuICByZXR1cm4gPGRpdiB7Li4ucmVzdH0+e2FjdGlvbnMgJiYgPE1vZGFsQWN0aW9uPnthY3Rpb25zfTwvTW9kYWxBY3Rpb24+fTwvZGl2PlxufVxuXG5leHBvcnQgZGVmYXVsdCBNb2RhbEFjdGlvbnNDb250YWluZXJcbiJdfQ== */")
|
|
12
17
|
}, props));
|
|
13
18
|
};
|
|
14
19
|
var ModalActionsContainer = function ModalActionsContainer(_ref) {
|
|
15
20
|
var actions = _ref.actions,
|
|
16
21
|
rest = _objectWithoutProperties(_ref, _excluded);
|
|
17
|
-
return
|
|
22
|
+
return _jsx("div", _objectSpread(_objectSpread({}, rest), {}, {
|
|
23
|
+
children: actions && _jsx(ModalAction, {
|
|
24
|
+
children: actions
|
|
25
|
+
})
|
|
26
|
+
}));
|
|
18
27
|
};
|
|
19
28
|
export default ModalActionsContainer;
|
package/modal/ModalBody.d.ts
CHANGED
|
@@ -1,9 +1,9 @@
|
|
|
1
|
-
export
|
|
1
|
+
export type ModalBodyProps = {
|
|
2
2
|
hasPadding?: boolean;
|
|
3
3
|
column?: boolean;
|
|
4
4
|
};
|
|
5
5
|
export declare const ModalBody: import("@emotion/styled").StyledComponent<{
|
|
6
|
-
theme?: import("@emotion/react").Theme
|
|
7
|
-
as?:
|
|
6
|
+
theme?: import("@emotion/react").Theme;
|
|
7
|
+
as?: React.ElementType;
|
|
8
8
|
} & ModalBodyProps, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
|
|
9
9
|
export default ModalBody;
|
|
@@ -1,13 +1,18 @@
|
|
|
1
|
+
function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
|
|
1
2
|
var _excluded = ["onRequestClose", "className", "icon", "size", "closeLabel"];
|
|
2
|
-
function
|
|
3
|
-
function
|
|
4
|
-
function
|
|
3
|
+
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
|
|
4
|
+
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
|
|
5
|
+
function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
|
|
6
|
+
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
|
|
7
|
+
function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
|
|
8
|
+
function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
|
|
9
|
+
function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
|
|
5
10
|
import React from 'react';
|
|
6
11
|
import { IconButton } from '@dfds-ui/react-components';
|
|
7
12
|
import { Close } from '@dfds-ui/icons/system';
|
|
8
13
|
import { css } from '@emotion/react';
|
|
9
14
|
import { theme } from '@dfds-ui/theme';
|
|
10
|
-
import { jsx as
|
|
15
|
+
import { jsx as _jsx } from "@emotion/react/jsx-runtime";
|
|
11
16
|
export var ModalCloseButton = function ModalCloseButton(_ref) {
|
|
12
17
|
var onRequestClose = _ref.onRequestClose,
|
|
13
18
|
className = _ref.className,
|
|
@@ -18,7 +23,7 @@ export var ModalCloseButton = function ModalCloseButton(_ref) {
|
|
|
18
23
|
_ref$closeLabel = _ref.closeLabel,
|
|
19
24
|
closeLabel = _ref$closeLabel === void 0 ? 'Close' : _ref$closeLabel,
|
|
20
25
|
rest = _objectWithoutProperties(_ref, _excluded);
|
|
21
|
-
return
|
|
26
|
+
return _jsx(IconButton, _objectSpread({
|
|
22
27
|
disableOverlay: true,
|
|
23
28
|
disableTooltip: true,
|
|
24
29
|
hoverColor: theme.colors.secondary.main,
|
package/modal/ModalDialog.d.ts
CHANGED
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import { theme } from '@dfds-ui/theme';
|
|
3
|
-
export
|
|
4
|
-
export
|
|
5
|
-
export
|
|
6
|
-
export
|
|
7
|
-
export
|
|
3
|
+
export type ModalVariation = 'default' | 'fullscreen';
|
|
4
|
+
export type ModalSizes = Record<keyof typeof theme.breakpoints, string>;
|
|
5
|
+
export type Backdrop = keyof typeof backdropsTransparent;
|
|
6
|
+
export type BackdropVariant = 'transparent' | 'solid';
|
|
7
|
+
export type ModalDialogProps = {
|
|
8
8
|
isOpen: boolean;
|
|
9
9
|
onRequestClose?: () => void;
|
|
10
10
|
shouldCloseOnOverlayClick?: boolean;
|
|
@@ -35,7 +35,7 @@ export declare const defaultProps: {
|
|
|
35
35
|
};
|
|
36
36
|
zIndex: number;
|
|
37
37
|
renderWhenClosed: boolean;
|
|
38
|
-
backdrop:
|
|
38
|
+
backdrop: Backdrop;
|
|
39
39
|
backdropVariant: BackdropVariant;
|
|
40
40
|
};
|
|
41
41
|
declare const ModalDialog: ({ isOpen, onRequestClose, shouldCloseOnOverlayClick, shouldCloseOnEsc, variation, zIndex, className, sizes, fixedTopPosition, renderWhenClosed, backdrop, backdropVariant, children, ...rest }: ModalDialogProps) => React.JSX.Element | null;
|