oolib 2.154.0 → 2.155.1

package/dist/components/ActionMenu/index.js

@@ -112,11 +112,18 @@ var ActionMenu = function (_a) {
             }))));
     };
     return (react_1.default.createElement(styled_1.StyledActionMenu, { ref: actionMenuRef },
-        typeof CustomSelectComp === 'function' ? (react_1.default.createElement(CustomSelectComp, { active: showActions, onClick: function () {
+        react_1.default.createElement("div", { style: { zIndex: 1002, position: "relative" } }, typeof CustomSelectComp === 'function' ? (react_1.default.createElement("div", { onClick: function (e) {
+                e.preventDefault();
+                e.stopPropagation();
+            }, onMouseDown: function (e) {
+                e.preventDefault();
+                e.stopPropagation();
+            } },
+            react_1.default.createElement(CustomSelectComp, { active: showActions, onClick: function () {
+                    setShowActions(!showActions);
+                } }))) : (react_1.default.createElement(ButtonComp, __assign({}, buttonSize, { icon: icon, iconSize: iconSize, invert: invert, stopPropagation: true, preventDefault: true, onClick: function (e) {
                 setShowActions(!showActions);
-            } })) : (react_1.default.createElement(ButtonComp, __assign({}, buttonSize, { icon: icon, iconSize: iconSize, invert: invert, stopPropagation: true, preventDefault: true, onClick: function (e) {
-                setShowActions(!showActions);
-            }, active: showActions }))),
+            }, active: showActions })))),
         popOutOfOverflowHiddenParent && (react_1.default.createElement(styled_1.StyledActionMenuTracker, { storybookPreview: storybookPreview, align: align, ref: trackerRef })),
         popOutOfOverflowHiddenParent
             ? (0, react_dom_1.createPortal)(genLighbox(), document.getElementById("actionmenu-lightbox-root"))

package/dist/components/cards/CardContent/index.d.ts

@@ -0,0 +1,11 @@
+export function CardContent({ id, data, config, to, onClick, openInNewTab, actions, highlight }: {
+    id: any;
+    data: any;
+    config: any;
+    to: any;
+    onClick: any;
+    openInNewTab: any;
+    actions: any;
+    highlight: any;
+}): React.JSX.Element;
+import React from "react";

package/dist/components/cards/CardContent/index.js

@@ -1,144 +1,76 @@
-// import React from "react";
-// import { useTheme } from "styled-components";
-// import { injectHttps } from "../../../utils/injectHttps";
-// import { getPrimaryColorText, useLocale } from "../../../utilsOolib";
-// import { ActionMenu } from "../../ActionMenu";
-// import { LABEL } from "../../Typo";
-// import VideoInput from "../../VideoInput";
-// import MetaBlock from "../../MetaBlock";
-// import { LineClampWrapper } from "../comps/LineClampWrapper";
-// import { StyledTitle, StyledTitleSpan } from "../styled";
-// import { decideLinkCompAndTarget } from "../utils/decideLinkCompAndTarget";
-// import { dontRenderIfBothOnClickAndTo } from "../utils/dontRenderIfBothOnClickAndTo";
-// import { parseCardConfig } from "../utils/parseCardConfig";
-// import {imageDataExists, videoDataExists} from '../utils/mediaDataExists'
-// import {
-//   StyledCardWrapper,
-//   StyledContainer1,
-//   StyledCrown,
-//   StyledCrownWrapper,
-//   StyledEmbedSection,
-//   StyledUpperSection,
-// } from "./styled";
-// import {CardPlaceholder} from '../comps/CardPlaceholder'
-// import { ImageInput } from "../../ImageInput";
-// import { icons } from "../../../icons"
-// import { TagDisplay, TagLink } from "../../Tags";
-// const { CrownSimple } = icons;
-// export const CardContent = ({
-//   id,
-//   data,
-//   config,
-//   to,
-//   onClick,
-//   openInNewTab,
-//   actions,
-//   highlight
-// }) => {
-//   const theme = useTheme();
-//   const localize = useLocale();
-//   const { parseSpecialSyntax } = theme || {};
-//   const showEmbedSection = !!(config?.image || config?.video);
-//   const { cardLabel, title, video, image, metaBlock, tagDisplay } =
-//     parseCardConfig({
-//       config,
-//       data,
-//       parseSpecialSyntax
-//     });
-//     let dontRenderRes = dontRenderIfBothOnClickAndTo({onClick, to});
-//     if(dontRenderRes) return dontRenderRes
-//   const {LinkComp, target, externalUrl } = decideLinkCompAndTarget({to, openInNewTab})
-//   return (
-//     <LinkComp
-//       target={target}
-//       href={injectHttps(to)}
-//       to={to}
-//     >
-//       <StyledCardWrapper 
-//         id={id} 
-//         highlight={highlight}
-//         onClick={onClick ? e => onClick(e,data) : undefined} 
-//         /** imp to pass data cuz its used by some on okf eg. LinkOrEmbedModal*/
-//         >
-//           {highlight && <StyledCrownWrapper>
-//             <StyledCrown>
-//               <CrownSimple size={24}/>
-//             </StyledCrown>
-//           </StyledCrownWrapper>}
-//         <StyledUpperSection highlight={highlight}>
-//           <StyledContainer1>
-//             {cardLabel ? (
-//               <div
-//                 title={cardLabel}
-//                 style={{
-//                   display: "flex",
-//                   gap: "2rem",
-//                   justifyContent: "space-between",
-//                 }}
-//               >
-//                 <LABEL
-//                   style={{
-//                     textOverflow: "ellipsis",
-//                     overflow: "hidden",
-//                     whiteSpace: "nowrap",
-//                   }}
-//                   color={getPrimaryColorText(theme?.colors)}
-//                 >
-//                   {cardLabel}
-//                 </LABEL>
-//                 <div style={{ marginTop: "-1rem", marginRight: "-1rem" }}>
-//                   {actions && <ActionMenu actions={actions} />}
-//                 </div>
-//               </div>
-//             ) : null}
-//             {title ? (
-//               <div style={{ display: "flex", alignItems: "end", gap: ".5rem" }}>
-//                 {" "}
-//                 <LineClampWrapper noOfLines_M={6} title={title}>
-//                   <StyledTitle capitalize className="StyledTitle">
-//                       <StyledTitleSpan className="StyledTitleSpan">
-//                         {localize(title)}
-//                       </StyledTitleSpan>
-//                   </StyledTitle>
-//                 </LineClampWrapper>
-//               </div>
-//             ) : null}
-//           </StyledContainer1>
-//           {/* {((Array.isArray(tagDisplay?.data) && tagDisplay?.data?.length > 0) || typeof tagDisplay ===  "string") && <TagDisplay display={Array.isArray(tagDisplay?.data) ? tagDisplay?.data[0]?.display : tagDisplay} to={tagDisplay?.collectionId ? `/published-page/${tagDisplay?.collectionId}?id=${tagDisplay?.data[0]?._id}` : "#"} color="green"/>} */}
-//           {tagDisplay && <TagDisplay display={tagDisplay} color="green"/>} 
-//           {metaBlock?.length > 0 ? (
-//             <MetaBlock data={data} config={metaBlock} /> //show only two meta for cardContent
-//           ) : null}
-//         </StyledUpperSection>
-//         {showEmbedSection && (
-//           <StyledEmbedSection>
-//             {!imageDataExists(image) && !videoDataExists(video) &&
-//               <CardPlaceholder/>
-//             }
-//             {imageDataExists(image) && (
-//               <div style={{ width: "100%" }}>
-//                 {
-//                   <ImageInput
-//                     value={image}
-//                     aspectRatio={"5/3"}
-//                     readOnly={true}
-//                     defaultImageSpread={"cover"} //meaning if a spread is not defined in image data, it will fallback to this.
-//                     enableCaptions={false}
-//                     disableImageBorder={true}
-//                   />
-//                 }
-//               </div>
-//             )}
-//             {videoDataExists(video) && !imageDataExists(image) ? (
-//               <div style={{ width: "100%", position: 'relative' }}>
-//                 <VideoInput value={video} readOnly={true} light={true} />
-//                 {/**below div ensures the video is not clickable */}
-//                 <div style={{position: 'absolute', top: 0, left: 0, width: '100%', height: '100%'}}/>
-//               </div>
-//             ) : null}
-//           </StyledEmbedSection>
-//         )}
-//       </StyledCardWrapper>
-//     </LinkComp>
-//   );
-// };
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CardContent = void 0;
+var react_1 = __importDefault(require("react"));
+var styled_components_1 = require("styled-components");
+var injectHttps_1 = require("../../../utils/injectHttps");
+var utilsOolib_1 = require("../../../utilsOolib");
+var ActionMenu_1 = require("../../ActionMenu");
+var Typo_1 = require("../../Typo");
+var VideoInput_1 = __importDefault(require("../../VideoInput"));
+var MetaBlock_1 = __importDefault(require("../../MetaBlock"));
+var LineClampWrapper_1 = require("../comps/LineClampWrapper");
+var styled_1 = require("../styled");
+var decideLinkCompAndTarget_1 = require("../utils/decideLinkCompAndTarget");
+var dontRenderIfBothOnClickAndTo_1 = require("../utils/dontRenderIfBothOnClickAndTo");
+var parseCardConfig_1 = require("../utils/parseCardConfig");
+var mediaDataExists_1 = require("../utils/mediaDataExists");
+var styled_2 = require("./styled");
+var CardPlaceholder_1 = require("../comps/CardPlaceholder");
+var ImageInput_1 = require("../../ImageInput");
+var icons_1 = require("../../../icons");
+var Tags_1 = require("../../Tags");
+var CrownSimple = icons_1.icons.CrownSimple;
+var CardContent = function (_a) {
+    var id = _a.id, data = _a.data, config = _a.config, to = _a.to, onClick = _a.onClick, openInNewTab = _a.openInNewTab, actions = _a.actions, highlight = _a.highlight;
+    var theme = (0, styled_components_1.useTheme)();
+    var localize = (0, utilsOolib_1.useLocale)();
+    var parseSpecialSyntax = (theme || {}).parseSpecialSyntax;
+    var showEmbedSection = !!((config === null || config === void 0 ? void 0 : config.image) || (config === null || config === void 0 ? void 0 : config.video));
+    var _b = (0, parseCardConfig_1.parseCardConfig)({
+        config: config,
+        data: data,
+        parseSpecialSyntax: parseSpecialSyntax
+    }), cardLabel = _b.cardLabel, title = _b.title, video = _b.video, image = _b.image, metaBlock = _b.metaBlock, tagDisplay = _b.tagDisplay;
+    var dontRenderRes = (0, dontRenderIfBothOnClickAndTo_1.dontRenderIfBothOnClickAndTo)({ onClick: onClick, to: to });
+    if (dontRenderRes)
+        return dontRenderRes;
+    var _c = (0, decideLinkCompAndTarget_1.decideLinkCompAndTarget)({ to: to, openInNewTab: openInNewTab }), LinkComp = _c.LinkComp, target = _c.target, externalUrl = _c.externalUrl;
+    return (react_1.default.createElement(LinkComp, { target: target, href: (0, injectHttps_1.injectHttps)(to), to: to },
+        react_1.default.createElement(styled_2.StyledCardWrapper, { id: id, highlight: highlight, onClick: onClick ? function (e) { return onClick(e, data); } : undefined },
+            highlight && react_1.default.createElement(styled_2.StyledCrownWrapper, null,
+                react_1.default.createElement(styled_2.StyledCrown, null,
+                    react_1.default.createElement(CrownSimple, { size: 24 }))),
+            react_1.default.createElement(styled_2.StyledUpperSection, { highlight: highlight },
+                react_1.default.createElement(styled_2.StyledContainer1, null,
+                    cardLabel ? (react_1.default.createElement("div", { title: cardLabel, style: {
+                            display: "flex",
+                            gap: "2rem",
+                            justifyContent: "space-between",
+                        } },
+                        react_1.default.createElement(Typo_1.LABEL, { style: {
+                                textOverflow: "ellipsis",
+                                overflow: "hidden",
+                                whiteSpace: "nowrap",
+                            }, color: (0, utilsOolib_1.getPrimaryColorText)(theme === null || theme === void 0 ? void 0 : theme.colors) }, cardLabel),
+                        react_1.default.createElement("div", { style: { marginTop: "-1rem", marginRight: "-1rem" } }, actions && react_1.default.createElement(ActionMenu_1.ActionMenu, { actions: actions })))) : null,
+                    title ? (react_1.default.createElement("div", { style: { display: "flex", alignItems: "end", gap: ".5rem" } },
+                        " ",
+                        react_1.default.createElement(LineClampWrapper_1.LineClampWrapper, { noOfLines_M: 6, title: title },
+                            react_1.default.createElement(styled_1.StyledTitle, { capitalize: true, className: "StyledTitle" },
+                                react_1.default.createElement(styled_1.StyledTitleSpan, { className: "StyledTitleSpan" }, localize(title)))))) : null),
+                tagDisplay && react_1.default.createElement(Tags_1.TagDisplay, { display: tagDisplay, color: "green" }),
+                (metaBlock === null || metaBlock === void 0 ? void 0 : metaBlock.length) > 0 ? (react_1.default.createElement(MetaBlock_1.default, { data: data, config: metaBlock }) //show only two meta for cardContent
+                ) : null),
+            showEmbedSection && (react_1.default.createElement(styled_2.StyledEmbedSection, null,
+                !(0, mediaDataExists_1.imageDataExists)(image) && !(0, mediaDataExists_1.videoDataExists)(video) &&
+                    react_1.default.createElement(CardPlaceholder_1.CardPlaceholder, null),
+                (0, mediaDataExists_1.imageDataExists)(image) && (react_1.default.createElement("div", { style: { width: "100%" } }, react_1.default.createElement(ImageInput_1.ImageInput, { value: image, aspectRatio: "5/3", readOnly: true, defaultImageSpread: "cover", enableCaptions: false, disableImageBorder: true }))),
+                (0, mediaDataExists_1.videoDataExists)(video) && !(0, mediaDataExists_1.imageDataExists)(image) ? (react_1.default.createElement("div", { style: { width: "100%", position: 'relative' } },
+                    react_1.default.createElement(VideoInput_1.default, { value: video, readOnly: true, light: true }),
+                    react_1.default.createElement("div", { style: { position: 'absolute', top: 0, left: 0, width: '100%', height: '100%' } }))) : null)))));
+};
+exports.CardContent = CardContent;

package/dist/components/cards/CardContent/styled.d.ts

@@ -0,0 +1,7 @@
+export const StyledContainer1: import("styled-components").StyledComponent<"div", any, {}, never>;
+export const StyledMetaBlock: import("styled-components").StyledComponent<"div", any, {}, never>;
+export const StyledEmbedSection: import("styled-components").StyledComponent<"div", any, {}, never>;
+export const StyledCardWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
+export const StyledUpperSection: import("styled-components").StyledComponent<"div", any, {}, never>;
+export const StyledCrownWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
+export const StyledCrown: import("styled-components").StyledComponent<"div", any, {}, never>;

package/dist/components/cards/CardContent/styled.js

@@ -1,60 +1,53 @@
-// import styled, { css } from "styled-components";
-// import { colors } from "../../../themes/colors";
-// import { transition } from "../../../themes/mixins/transitions";
-// import { CSSTitleAnimationOnHover } from "../styled";
-// const { greyColor5, white, invertGreen } = colors;
-// const flexColumn = css`
-//   display: flex;
-//   flex-direction: column;
-// `;
-// export const StyledContainer1 = styled.div`
-//   ${flexColumn}
-//   gap: 1rem;
-// `;
-// export const StyledMetaBlock = styled.div`
-//   display: flex;
-//   gap: 0.5em;
-// `;
-// export const StyledEmbedSection = styled.div`
-//   height: 100px;
-//   display: flex;
-//   align-items: center;
-//   overflow: hidden;
-//   width: 100%;
-// `;
-// export const StyledCardWrapper = styled.div`
-//   height: 100%;
-//   border: 2px solid ${greyColor5};
-//   background-color: ${({ highlight }) => highlight ? colors.lightGreen : greyColor5 }; 
-//   display: flex;
-//   flex-direction: column;
-//   justify-content: space-between;
-//   ${transition("background-color")}
-//   cursor: pointer;
-//   &:hover {
-//     background-color: ${white};
-//     ${CSSTitleAnimationOnHover};
-//      #CardPlaceholder {
-//       opacity: 1;
-//     }
-//   }
-// `;
-// export const StyledUpperSection = styled.div`
-//   /* height: 100%; */
-//   flex-grow: 1;
-//   justify-content: space-between;
-//   padding: 2rem;
-//   ${flexColumn}
-//   gap: ${({ highlight }) => highlight ? '2rem' : '3rem'};
-//   padding-top: ${({ highlight }) => highlight ? "1rem" : "2rem"};
-// `;
-// export const StyledCrownWrapper = styled.div`
-//   width: 100%;
-//   display: flex; 
-//   justify-content: flex-end
-// `;
-// export const StyledCrown = styled.div`
-//   width: max-content;
-//   background-color: ${invertGreen};
-//   padding: 1rem;
-// `
+"use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.StyledCrown = exports.StyledCrownWrapper = exports.StyledUpperSection = exports.StyledCardWrapper = exports.StyledEmbedSection = exports.StyledMetaBlock = exports.StyledContainer1 = void 0;
+var styled_components_1 = __importStar(require("styled-components"));
+var colors_1 = require("../../../themes/colors");
+var transitions_1 = require("../../../themes/mixins/transitions");
+var styled_1 = require("../styled");
+var greyColor5 = colors_1.colors.greyColor5, white = colors_1.colors.white, invertGreen = colors_1.colors.invertGreen;
+var flexColumn = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n"], ["\n  display: flex;\n  flex-direction: column;\n"])));
+exports.StyledContainer1 = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  ", "\n  gap: 1rem;\n"], ["\n  ", "\n  gap: 1rem;\n"])), flexColumn);
+exports.StyledMetaBlock = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  display: flex;\n  gap: 0.5em;\n"], ["\n  display: flex;\n  gap: 0.5em;\n"])));
+exports.StyledEmbedSection = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  height: 100px;\n  display: flex;\n  align-items: center;\n  overflow: hidden;\n  width: 100%;\n"], ["\n  height: 100px;\n  display: flex;\n  align-items: center;\n  overflow: hidden;\n  width: 100%;\n"])));
+exports.StyledCardWrapper = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  height: 100%;\n  border: 2px solid ", ";\n  background-color: ", "; \n  display: flex;\n  flex-direction: column;\n  justify-content: space-between;\n\n  ", "\n\n  cursor: pointer;\n\n  &:hover {\n    background-color: ", ";\n    ", ";\n     #CardPlaceholder {\n      opacity: 1;\n    }\n  }\n"], ["\n  height: 100%;\n  border: 2px solid ", ";\n  background-color: ", "; \n  display: flex;\n  flex-direction: column;\n  justify-content: space-between;\n\n  ", "\n\n  cursor: pointer;\n\n  &:hover {\n    background-color: ", ";\n    ", ";\n     #CardPlaceholder {\n      opacity: 1;\n    }\n  }\n"])), greyColor5, function (_a) {
+    var highlight = _a.highlight;
+    return highlight ? colors_1.colors.lightGreen : greyColor5;
+}, (0, transitions_1.transition)("background-color"), white, styled_1.CSSTitleAnimationOnHover);
+exports.StyledUpperSection = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  /* height: 100%; */\n  flex-grow: 1;\n  justify-content: space-between;\n  padding: 2rem;\n  ", "\n  gap: ", ";\n  padding-top: ", ";\n"], ["\n  /* height: 100%; */\n  flex-grow: 1;\n  justify-content: space-between;\n  padding: 2rem;\n  ", "\n  gap: ", ";\n  padding-top: ", ";\n"])), flexColumn, function (_a) {
+    var highlight = _a.highlight;
+    return highlight ? '2rem' : '3rem';
+}, function (_a) {
+    var highlight = _a.highlight;
+    return highlight ? "1rem" : "2rem";
+});
+exports.StyledCrownWrapper = styled_components_1.default.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  width: 100%;\n  display: flex; \n  justify-content: flex-end\n"], ["\n  width: 100%;\n  display: flex; \n  justify-content: flex-end\n"])));
+exports.StyledCrown = styled_components_1.default.div(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  width: max-content;\n  background-color: ", ";\n  padding: 1rem;\n"], ["\n  width: max-content;\n  background-color: ", ";\n  padding: 1rem;\n"])), invertGreen);
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8;

package/dist/components/cards/ListContent/index.d.ts

@@ -0,0 +1,12 @@
+export function ListContent({ id, data, config, to, onClick, openInNewTab, actions, statusTag, variant, }: {
+    id: any;
+    data: any;
+    config: any;
+    to: any;
+    onClick: any;
+    openInNewTab: any;
+    actions: any;
+    statusTag: any;
+    variant?: string;
+}): React.JSX.Element;
+import React from "react";