oolib 2.149.3 → 2.149.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.
Files changed (4) hide show
  1. package/dist/components/Modals/Modal/index.js +4 -4
  2. package/dist/components/Modals/Modal/styled.js +3 -3
  3. package/dist/components/Modals/ModalConfirm/index.js +1 -1
  4. package/package.json +1 -1
package/dist/components/Modals/Modal/index.js CHANGED
@@ -73,7 +73,7 @@ var Modal = function (_a) {
73
73
  var title = _a.title, onClose = _a.onClose, children = _a.children, linkTo = _a.linkTo, _b = _a.desktopWidth, desktopWidth = _b === void 0 ? "80%" : _b, _c = _a.headerStyle, headerStyle = _c === void 0 ? "style1" : _c, subtitle = _a.subtitle, _d = _a.fitToContentHeight, fitToContentHeight = _d === void 0 ? false : _d, invert = _a.invert, overflowVisible = _a.overflowVisible, _e = _a.showActionPanel, showActionPanel = _e === void 0 ? false : _e, _f = _a.onCloseText, onCloseText = _f === void 0 ? "Close" : _f, onConfirm = _a.onConfirm, _g = _a.showCloseBtn, showCloseBtn = _g === void 0 ? true : _g, _h = _a.onConfirmText, onConfirmText = _h === void 0 ? "Confirm" : _h, _j = _a.showConfirmBtn, showConfirmBtn = _j === void 0 ? true : _j, _k = _a.alignActions, alignActions = _k === void 0 ? "right" : _k, _l = _a.disableHeader, disableHeader = _l === void 0 ? false : _l;
74
74
  var screenWidth = (0, useScreenWidth_1.useScreenWidth)();
75
75
  var handleClose = function () { return onClose(); };
76
- var initAnimPos = { marginTop: "100vh", opacity: 0 };
76
+ var initAnimPos = { marginTop: "100dvh", opacity: 0 };
77
77
  var endAnimPos = { marginTop: 0, opacity: 1 };
78
78
  var _m = (0, react_1.useState)(endAnimPos), animPos = _m[0], setAnimPos = _m[1];
79
79
  (0, react_1.useEffect)(function () {
@@ -91,9 +91,9 @@ var Modal = function (_a) {
91
91
  var takeFullScreenOnScroll = ["style1"].indexOf(headerStyle) !== -1
92
92
  ? true
93
93
  : ["style2"].indexOf(headerStyle) !== -1 && false;
94
- var genModalContents = function () { return (react_1.default.createElement(styled_1.StyledModalLargeContentWrapper, { className: "StyledModalLargeContentWrapper", desktopWidth: desktopWidth, takeFullScreenOnScroll: takeFullScreenOnScroll, style: !fitToContentHeight ? { minHeight: 'calc(100vh - 4rem)' } : {} },
94
+ var genModalContents = function () { return (react_1.default.createElement(styled_1.StyledModalLargeContentWrapper, { className: "StyledModalLargeContentWrapper", desktopWidth: desktopWidth, takeFullScreenOnScroll: takeFullScreenOnScroll, style: !fitToContentHeight ? { minHeight: 'calc(100dvh - 4rem)' } : {} },
95
95
  !disableHeader && genHeader(),
96
- react_1.default.createElement(styled_1.StyledModalBodyWrapper, { style: !fitToContentHeight ? { minHeight: 'calc(100vh - 8rem)' } : {}, overflowVisible: overflowVisible, takeFullScreenOnScroll: takeFullScreenOnScroll },
96
+ react_1.default.createElement(styled_1.StyledModalBodyWrapper, { style: !fitToContentHeight ? { minHeight: 'calc(100dvh - 8rem)' } : {}, overflowVisible: overflowVisible, takeFullScreenOnScroll: takeFullScreenOnScroll },
97
97
  react_1.default.createElement(styled_1.StyledModalLargeBody, { takeFullScreenOnScroll: takeFullScreenOnScroll }, children),
98
98
  showActionPanel &&
99
99
  react_1.default.createElement("div", { style: { position: 'sticky', bottom: headerStyle === 'style1' ? 0 : '2.2rem' } },
@@ -111,7 +111,7 @@ var Modal = function (_a) {
111
111
  }, onClick: function () { return handleClose(); } }),
112
112
  screenWidth < (0, mixins_1.getBreakPoint)("sm") ? (react_1.default.createElement(framer_motion_1.motion.div, { style: __assign({ position: "relative" }, (fitToContentHeight
113
113
  ? {
114
- minHeight: '100vh',
114
+ minHeight: '100dvh',
115
115
  display: 'flex',
116
116
  alignItems: 'flex-end'
117
117
  }
package/dist/components/Modals/Modal/styled.js CHANGED
@@ -34,11 +34,11 @@ var framer_motion_1 = require("framer-motion");
34
34
  var styled_components_1 = __importStar(require("styled-components"));
35
35
  var black_opacity80 = themes_1.colors.black_opacity80, white = themes_1.colors.white, greyColor5 = themes_1.colors.greyColor5, greyColor15 = themes_1.colors.greyColor15;
36
36
  exports.StyledModalLargeBg = (0, styled_components_1.default)(framer_motion_1.motion.div)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n width: 100vw;\n height: 100%;\n position: fixed;\n left: 0;\n bottom: 0;\n z-index: 999999999;\n overflow-y: auto;\n overflow-x: hidden;\n ", " {\n display: flex;\n justify-content: center;\n align-items: center;\n }\n"], ["\n width: 100vw;\n height: 100%;\n position: fixed;\n left: 0;\n bottom: 0;\n z-index: 999999999;\n overflow-y: auto;\n overflow-x: hidden;\n ", " {\n display: flex;\n justify-content: center;\n align-items: center;\n }\n"])), (0, mixins_1.mediaQuery)("sm"));
37
- exports.StyledModalLargeBgColor = (0, styled_components_1.default)(framer_motion_1.motion.div)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n background: ", ";\n position: absolute;\n left: 0;\n top: 0;\n width: 100vw;\n height: 100vh;\n"], ["\n background: ", ";\n position: absolute;\n left: 0;\n top: 0;\n width: 100vw;\n height: 100vh;\n"])), black_opacity80);
38
- exports.StyledModalLargeContentWrapper = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n width: 100%;\n margin-top: 4rem;\n background-color: ", ";\n /* Add padding to account for the safe area */\n padding-bottom: env(safe-area-inset-bottom);\n /* Fallback for browsers that don't support env() */\n padding-bottom: constant(safe-area-inset-bottom);\n ", "\n ", " {\n margin-top: 0;\n border: 2px solid ", ";\n width: ", ";\n /* min-height: 50vh; */\n max-height: 90vh;\n position: relative;\n display: flex;\n flex-direction: column;\n border-radius: 0.2rem;\n margin: 0 auto;\n }\n"], ["\n width: 100%;\n margin-top: 4rem;\n background-color: ", ";\n /* Add padding to account for the safe area */\n padding-bottom: env(safe-area-inset-bottom);\n /* Fallback for browsers that don't support env() */\n padding-bottom: constant(safe-area-inset-bottom);\n ", "\n ", " {\n margin-top: 0;\n border: 2px solid ", ";\n width: ", ";\n /* min-height: 50vh; */\n max-height: 90vh;\n position: relative;\n display: flex;\n flex-direction: column;\n border-radius: 0.2rem;\n margin: 0 auto;\n }\n"])), white, function (_a) {
37
+ exports.StyledModalLargeBgColor = (0, styled_components_1.default)(framer_motion_1.motion.div)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n background: ", ";\n position: absolute;\n left: 0;\n top: 0;\n width: 100vw;\n height: 100dvh;\n"], ["\n background: ", ";\n position: absolute;\n left: 0;\n top: 0;\n width: 100vw;\n height: 100dvh;\n"])), black_opacity80);
38
+ exports.StyledModalLargeContentWrapper = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n width: 100%;\n margin-top: 4rem;\n background-color: ", ";\n ", "\n ", " {\n margin-top: 0;\n border: 2px solid ", ";\n width: ", ";\n /* min-height: 50dvh; */\n max-height: 90dvh;\n position: relative;\n display: flex;\n flex-direction: column;\n border-radius: 0.2rem;\n margin: 0 auto;\n }\n"], ["\n width: 100%;\n margin-top: 4rem;\n background-color: ", ";\n ", "\n ", " {\n margin-top: 0;\n border: 2px solid ", ";\n width: ", ";\n /* min-height: 50dvh; */\n max-height: 90dvh;\n position: relative;\n display: flex;\n flex-direction: column;\n border-radius: 0.2rem;\n margin: 0 auto;\n }\n"])), white, function (_a) {
39
39
  var takeFullScreenOnScroll = _a.takeFullScreenOnScroll;
40
40
  return takeFullScreenOnScroll
41
- ? (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n /* min-height: calc(100vh - 4rem); */\n "], ["\n /* min-height: calc(100vh - 4rem); */\n "]))) : (0, styled_components_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n height: calc(100vh - 4rem);\n display: flex;\n flex-direction: column;\n "], ["\n height: calc(100vh - 4rem);\n display: flex;\n flex-direction: column;\n "])));
41
+ ? (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n /* min-height: calc(100dvh - 4rem); */\n "], ["\n /* min-height: calc(100dvh - 4rem); */\n "]))) : (0, styled_components_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n height: calc(100dvh - 4rem);\n display: flex;\n flex-direction: column;\n "], ["\n height: calc(100dvh - 4rem);\n display: flex;\n flex-direction: column;\n "])));
42
42
  }, (0, mixins_1.mediaQuery)("sm"), white, function (_a) {
43
43
  var desktopWidth = _a.desktopWidth;
44
44
  return desktopWidth;
package/dist/components/Modals/ModalConfirm/index.js CHANGED
@@ -50,7 +50,7 @@ var styled_1 = require("./styled");
50
50
  var ModalConfirm = function (_a) {
51
51
  var title = _a.title, subTitle = _a.subTitle, children = _a.children, onClose = _a.onClose, _b = _a.onCloseText, onCloseText = _b === void 0 ? "Cancel" : _b, _c = _a.showConfirmBtn, showConfirmBtn = _c === void 0 ? true : _c, _d = _a.showCloseBtn, showCloseBtn = _d === void 0 ? true : _d, onConfirm = _a.onConfirm, _e = _a.onConfirmText, onConfirmText = _e === void 0 ? "Delete" : _e, _f = _a.alignActions, alignActions = _f === void 0 ? "left" : _f;
52
52
  var screenWidth = (0, useScreenWidth_1.useScreenWidth)();
53
- var initAnimPos = { marginTop: "100vh", opacity: 0, translateY: "100%" };
53
+ var initAnimPos = { marginTop: "100dvh", opacity: 0, translateY: "100%" };
54
54
  var endAnimPos = { marginTop: 0, opacity: 1, translateY: 0 };
55
55
  var _g = (0, react_1.useState)(endAnimPos), animPos = _g[0], setAnimPos = _g[1];
56
56
  (0, react_1.useEffect)(function () {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "oolib",
3
- "version": "2.149.3",
3
+ "version": "2.149.4",
4
4
  "description": " OKE Component Library",
5
5
  "main": "dist/index.js",
6
6
  "types": "dist/index.d.ts",