@longline/aqua-ui 1.0.100 → 1.0.102

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (4) hide show
  1. package/inputs/DateInput/Body.js +1 -1
  2. package/inputs/Dropdown/Body.js +1 -1
  3. package/package.json +1 -1
  4. package/services/Dialog/Dialog.js +5 -4
package/inputs/DateInput/Body.js CHANGED
@@ -56,6 +56,6 @@ var BodyBase = React.forwardRef(function (props, ref) {
56
56
  React.createElement(Navbar, { date: date, onPrevYear: handlePrevYear, onNextYear: handleNextYear, onPrevMonth: handlePrevMonth, onNextMonth: handleNextMonth, onMonth: handleMonth, onYear: handleYear }),
57
57
  React.createElement(Calendar, { date: date, selectedDate: props.value, nofuture: props.nofuture, onClick: handleDayClick })));
58
58
  });
59
- var Body = styled(BodyBase)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n z-index: 9999;\n box-sizing: border-box;\n overflow-y: hidden;\n outline: none;\n width: 330px;\n\n background-color: ", ";\n border-radius: ", "px;\n color: ", ";\n\n transition: opacity ", "ms ease-in-out,\n max-height 0ms linear ", "ms;\n max-height: 0;\n opacity: 0;\n ", "\n"], ["\n z-index: 9999;\n box-sizing: border-box;\n overflow-y: hidden;\n outline: none;\n width: 330px;\n\n background-color: ", ";\n border-radius: ", "px;\n color: ", ";\n\n transition: opacity ", "ms ease-in-out,\n max-height 0ms linear ", "ms;\n max-height: 0;\n opacity: 0;\n ", "\n"])), function (p) { return p.theme.colors.neutral[100]; }, function (p) { return p.theme.radius.normal; }, function (p) { return p.theme.colors.primary[3]; }, function (p) { return p.theme.animation.duration * 0; }, function (p) { return p.theme.animation.duration * 0; }, function (p) { return p.open && css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n transition: opacity ", "ms ease-in,\n max-height 0ms linear;\n max-height: 1000px;\n opacity: 1;\n "], ["\n transition: opacity ", "ms ease-in,\n max-height 0ms linear;\n max-height: 1000px;\n opacity: 1;\n "])), function (p) { return p.theme.animation.duration; }); });
59
+ var Body = styled(BodyBase)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n z-index: 9999 !important;\n box-sizing: border-box;\n overflow-y: hidden;\n outline: none;\n width: 330px;\n\n background-color: ", ";\n border-radius: ", "px;\n color: ", ";\n\n transition: opacity ", "ms ease-in-out,\n max-height 0ms linear ", "ms;\n max-height: 0;\n opacity: 0;\n ", "\n"], ["\n z-index: 9999 !important;\n box-sizing: border-box;\n overflow-y: hidden;\n outline: none;\n width: 330px;\n\n background-color: ", ";\n border-radius: ", "px;\n color: ", ";\n\n transition: opacity ", "ms ease-in-out,\n max-height 0ms linear ", "ms;\n max-height: 0;\n opacity: 0;\n ", "\n"])), function (p) { return p.theme.colors.neutral[100]; }, function (p) { return p.theme.radius.normal; }, function (p) { return p.theme.colors.primary[3]; }, function (p) { return p.theme.animation.duration * 0; }, function (p) { return p.theme.animation.duration * 0; }, function (p) { return p.open && css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n transition: opacity ", "ms ease-in,\n max-height 0ms linear;\n max-height: 1000px;\n opacity: 1;\n "], ["\n transition: opacity ", "ms ease-in,\n max-height 0ms linear;\n max-height: 1000px;\n opacity: 1;\n "])), function (p) { return p.theme.animation.duration; }); });
60
60
  export { Body };
61
61
  var templateObject_1, templateObject_2;
package/inputs/Dropdown/Body.js CHANGED
@@ -20,6 +20,6 @@ var BodyBase = React.forwardRef(function (props, ref) {
20
20
  return (React.createElement("div", __assign({ style: props.styles.popper }, props.attributes.popper, { className: "".concat(props.className), tabIndex: -1, ref: ref }),
21
21
  React.createElement(List, { tall: props.tall, maxItems: props.maxItems, contract: true, onSearch: props.onSearch }, props.children)));
22
22
  });
23
- var Body = styled(BodyBase)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n z-index: 9999;\n outline: none;\n box-sizing: border-box;\n visibility: ", ";\n font: ", ";\n\n // Width:\n ", "\n \n transition: opacity ", "ms ease-in-out,\n max-height 0ms linear ", "ms;\n max-height: 0;\n opacity: 0;\n ", "\n"], ["\n z-index: 9999;\n outline: none;\n box-sizing: border-box;\n visibility: ", ";\n font: ", ";\n\n // Width:\n ", "\n \n transition: opacity ", "ms ease-in-out,\n max-height 0ms linear ", "ms;\n max-height: 0;\n opacity: 0;\n ", "\n"])), function (p) { return p.open ? 'visible' : 'hidden'; }, function (p) { return p.theme.font.bodyMedium; }, function (p) { return p.minBodyWidth && css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n min-width: ", "px;\n "], ["\n min-width: ", "px;\n "])), p.minBodyWidth); }, function (p) { return p.theme.animation.duration * 0; }, function (p) { return p.theme.animation.duration * 0; }, function (p) { return p.open && css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n transition: opacity ", "ms ease-in,\n max-height 0ms linear;\n max-height: 1000px;\n opacity: 1;\n "], ["\n transition: opacity ", "ms ease-in,\n max-height 0ms linear;\n max-height: 1000px;\n opacity: 1;\n "])), function (p) { return p.theme.animation.duration; }); });
23
+ var Body = styled(BodyBase)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n z-index: 9999 !important;\n outline: none;\n box-sizing: border-box;\n visibility: ", ";\n font: ", ";\n\n // Width:\n ", "\n \n transition: opacity ", "ms ease-in-out,\n max-height 0ms linear ", "ms;\n max-height: 0;\n opacity: 0;\n ", "\n"], ["\n z-index: 9999 !important;\n outline: none;\n box-sizing: border-box;\n visibility: ", ";\n font: ", ";\n\n // Width:\n ", "\n \n transition: opacity ", "ms ease-in-out,\n max-height 0ms linear ", "ms;\n max-height: 0;\n opacity: 0;\n ", "\n"])), function (p) { return p.open ? 'visible' : 'hidden'; }, function (p) { return p.theme.font.bodyMedium; }, function (p) { return p.minBodyWidth && css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n min-width: ", "px;\n "], ["\n min-width: ", "px;\n "])), p.minBodyWidth); }, function (p) { return p.theme.animation.duration * 0; }, function (p) { return p.theme.animation.duration * 0; }, function (p) { return p.open && css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n transition: opacity ", "ms ease-in,\n max-height 0ms linear;\n max-height: 1000px;\n opacity: 1;\n "], ["\n transition: opacity ", "ms ease-in,\n max-height 0ms linear;\n max-height: 1000px;\n opacity: 1;\n "])), function (p) { return p.theme.animation.duration; }); });
24
24
  export { Body };
25
25
  var templateObject_1, templateObject_2, templateObject_3;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@longline/aqua-ui",
3
- "version": "1.0.100",
3
+ "version": "1.0.102",
4
4
  "description": "AquaUI",
5
5
  "author": "Alexander van Oostenrijk / Longline Environment",
6
6
  "license": "Commercial",
package/services/Dialog/Dialog.js CHANGED
@@ -22,6 +22,7 @@ var __rest = (this && this.__rest) || function (s, e) {
22
22
  };
23
23
  import * as React from 'react';
24
24
  import { CSSTransition } from 'react-transition-group';
25
+ import { createPortal } from 'react-dom';
25
26
  // Other controls
26
27
  import { DialogBackground } from './DialogBackground';
27
28
  import { DialogWindow } from './DialogWindow';
@@ -65,10 +66,10 @@ var DialogBase = function (props) {
65
66
  // and
66
67
  // https://veerasundar.com/blog/2018/12/how-to-animate-page-transition-in-react-using-styled-components/
67
68
  return (React.createElement(React.Fragment, null,
68
- React.createElement(CSSTransition, { in: props.open, timeout: 300, unmountOnExit: true, classNames: "fade" },
69
- React.createElement(DialogBackground, null)),
70
- React.createElement(CSSTransition, { in: props.open, timeout: 300, unmountOnExit: true, classNames: "fade" },
71
- React.createElement(DialogWindow, { inverted: props.inverted, width: props.width, ref: windowRef }, props.children))));
69
+ createPortal(React.createElement(CSSTransition, { in: props.open, timeout: 300, unmountOnExit: true, classNames: "fade" },
70
+ React.createElement(DialogBackground, null)), document.body),
71
+ createPortal(React.createElement(CSSTransition, { in: props.open, timeout: 300, unmountOnExit: true, classNames: "fade" },
72
+ React.createElement(DialogWindow, { inverted: props.inverted, width: props.width, ref: windowRef }, props.children)), document.body)));
72
73
  };
73
74
  var Dialog = function (_a) {
74
75
  var _b = _a.open, open = _b === void 0 ? false : _b, _c = _a.canClose, canClose = _c === void 0 ? true : _c, _d = _a.width, width = _d === void 0 ? 600 : _d, _e = _a.inverted, inverted = _e === void 0 ? false : _e, props = __rest(_a, ["open", "canClose", "width", "inverted"]);