oolib 3.0.0 → 3.1.0

package/dist/components/Modals/Modal/index.d.ts

@@ -27,6 +27,7 @@ export interface ModalProps {
     fitToContentHeight?: boolean;
     invert?: boolean;
     overflowVisible?: boolean;
+    hideBackdrop?: boolean;
     showActionPanel?: boolean;
     onCloseText?: string;
     onConfirm?: React.MouseEventHandler<HTMLButtonElement> | React.ReactNode;
@@ -51,6 +52,7 @@ export interface ModalProps {
  * @prop {boolean} [fitToContentHeight]: A boolean indicating whether the modal height should be adjusted based on its content. Defaults to false.
  * @prop {boolean} [invert]: A boolean indicating whether to invert the background color of the modal. Defaults to false.
  * @prop {boolean} [overflowVisible]: A boolean indicating whether the modal should render its overflow as visible. Defaults to false.
+ * @prop {boolean} [hideBackdrop]: A boolean indicating whether to make the modal's own backdrop transparent (the click-to-close layer is kept). Use when the caller renders its own backdrop behind the modal. Defaults to false.
  * @prop {boolean} [showActionPanel]: A boolean indicating whether to render the action panel. Defaults to false.
  * @prop {string} [onCloseText]: The text to be displayed in the close button. Defaults to "Close".
  * @prop {React.MouseEventHandler<HTMLButtonElement> | React.ReactNode} [onConfirm]: A callback function or node to be rendered instead of the confirm button.

package/dist/components/Modals/Modal/index.js

@@ -69,6 +69,7 @@ var Divider_1 = require("../../Divider");
  * @prop {boolean} [fitToContentHeight]: A boolean indicating whether the modal height should be adjusted based on its content. Defaults to false.
  * @prop {boolean} [invert]: A boolean indicating whether to invert the background color of the modal. Defaults to false.
  * @prop {boolean} [overflowVisible]: A boolean indicating whether the modal should render its overflow as visible. Defaults to false.
+ * @prop {boolean} [hideBackdrop]: A boolean indicating whether to make the modal's own backdrop transparent (the click-to-close layer is kept). Use when the caller renders its own backdrop behind the modal. Defaults to false.
  * @prop {boolean} [showActionPanel]: A boolean indicating whether to render the action panel. Defaults to false.
  * @prop {string} [onCloseText]: The text to be displayed in the close button. Defaults to "Close".
  * @prop {React.MouseEventHandler<HTMLButtonElement> | React.ReactNode} [onConfirm]: A callback function or node to be rendered instead of the confirm button.
@@ -81,12 +82,12 @@ var Divider_1 = require("../../Divider");
  * @return {ReactElement} The rendered modal component.
  */
 var Modal = function (_a) {
-    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, _m = _a.dynamicHeaderHeight, dynamicHeaderHeight = _m === void 0 ? false : _m;
+    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.hideBackdrop, hideBackdrop = _e === void 0 ? false : _e, _f = _a.showActionPanel, showActionPanel = _f === void 0 ? false : _f, _g = _a.onCloseText, onCloseText = _g === void 0 ? "Close" : _g, onConfirm = _a.onConfirm, _h = _a.showCloseBtn, showCloseBtn = _h === void 0 ? true : _h, _j = _a.onConfirmText, onConfirmText = _j === void 0 ? "Confirm" : _j, _k = _a.showConfirmBtn, showConfirmBtn = _k === void 0 ? true : _k, _l = _a.alignActions, alignActions = _l === void 0 ? "right" : _l, _m = _a.disableHeader, disableHeader = _m === void 0 ? false : _m, _o = _a.dynamicHeaderHeight, dynamicHeaderHeight = _o === void 0 ? false : _o;
     var screenWidth = (0, useScreenWidth_1.useScreenWidth)();
     var handleClose = function () { return onClose(); };
     var initAnimPos = { marginTop: "100dvh", opacity: 0 };
     var endAnimPos = { marginTop: 0, opacity: 1 };
-    var _o = (0, react_1.useState)(endAnimPos), animPos = _o[0], setAnimPos = _o[1];
+    var _p = (0, react_1.useState)(endAnimPos), animPos = _p[0], setAnimPos = _p[1];
     (0, react_1.useEffect)(function () {
         document.body.style.overflow = "hidden";
         return function () { document.body.style.overflow = "unset"; };
@@ -116,7 +117,7 @@ var Modal = function (_a) {
                             : onConfirm,
                         showCloseBtn && react_1.default.createElement(Buttons_1.ButtonGhost, { onClick: onClose }, onCloseText)))))); };
     return ((0, react_dom_1.createPortal)(react_1.default.createElement(styled_1.StyledModalLargeBg, null,
-        react_1.default.createElement(styled_1.StyledModalLargeBgColor, { initial: { opacity: initAnimPos.opacity }, animate: { opacity: animPos.opacity }, transition: {
+        react_1.default.createElement(styled_1.StyledModalLargeBgColor, { "$hideBackdrop": hideBackdrop, initial: { opacity: initAnimPos.opacity }, animate: { opacity: animPos.opacity }, transition: {
                 type: "tween",
                 ease: "easeOut",
             }, onClick: function () { return handleClose(); } }),

package/dist/components/Modals/Modal/styled.d.ts

@@ -14,7 +14,9 @@ interface StyledActionButtonsWrapperProps {
     alignActions: alignActionsType;
 }
 export declare const StyledModalLargeBg: import("styled-components").StyledComponent<import("framer-motion").ForwardRefComponent<HTMLDivElement, import("framer-motion").HTMLMotionProps<"div">>, any, {}, never>;
-export declare const StyledModalLargeBgColor: import("styled-components").StyledComponent<import("framer-motion").ForwardRefComponent<HTMLDivElement, import("framer-motion").HTMLMotionProps<"div">>, any, {}, never>;
+export declare const StyledModalLargeBgColor: import("styled-components").StyledComponent<import("framer-motion").ForwardRefComponent<HTMLDivElement, import("framer-motion").HTMLMotionProps<"div">>, any, {
+    $hideBackdrop?: boolean;
+}, never>;
 export declare const StyledModalLargeContentWrapper: import("styled-components").StyledComponent<"div", any, StyledModalLargeContentWrapperProps, never>;
 export declare const StyledModalLargeHeader: import("styled-components").StyledComponent<"header", any, {
     invert?: boolean;

package/dist/components/Modals/Modal/styled.js

@@ -45,7 +45,10 @@ var framer_motion_1 = require("framer-motion");
 var styled_components_1 = __importStar(require("styled-components"));
 var black_opacity80 = themes_1.colors.black_opacity80, white = themes_1.colors.white;
 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"));
-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);
+exports.StyledModalLargeBgColor = (0, styled_components_1.default)(framer_motion_1.motion.div)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  // $hideBackdrop keeps this layer (so click-outside-to-close still works) but\n  // makes it transparent \u2014 for callers that render their own backdrop behind\n  // the Modal and don't want a second tint stacked on top.\n  background: ", ";\n  position: absolute;\n  left: 0;\n  top: 0;\n  width: 100vw;\n  height: 100dvh;\n"], ["\n  // $hideBackdrop keeps this layer (so click-outside-to-close still works) but\n  // makes it transparent \u2014 for callers that render their own backdrop behind\n  // the Modal and don't want a second tint stacked on top.\n  background: ", ";\n  position: absolute;\n  left: 0;\n  top: 0;\n  width: 100vw;\n  height: 100dvh;\n"])), function (_a) {
+    var $hideBackdrop = _a.$hideBackdrop;
+    return ($hideBackdrop ? "transparent" : black_opacity80);
+});
 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: 16px;\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: 16px;\n    margin: 0 auto;\n  }\n"])), white, function (_a) {
     var takeFullScreenOnScroll = _a.takeFullScreenOnScroll;
     return takeFullScreenOnScroll

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "oolib",
-  "version": "3.0.0",
+  "version": "3.1.0",
   "description": " OKE Component Library",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",