@laerdal/life-react-components 5.1.0 → 6.0.0-dev.1

package/dist/Popover/Popover.d.ts

@@ -1,95 +1,95 @@
-import * as React from 'react';
-import { Position, Size } from '../types';
-export declare const PopoverContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
-    $size: Size;
-    $position: Position;
-    $showArrowPointer: boolean;
-}>> & string;
-export declare const PopoverTopSectionContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
-    $size: Size;
-}>> & string;
-export declare const PopoverMiddleSectionContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
-    $size: Size;
-}>> & string;
-export declare const PopoverBottomSectionContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
-    $size: Size;
-}>> & string;
-export declare const PopoverWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
-    $position: Position;
-    $showOnClick: boolean;
-    $showPopover: boolean;
-}>> & string;
-export interface PopoverTopSectionProps {
-    /**
-     * Required. The main text to be displayed in the top section of the popover.
-     */
-    text: string;
-    /**
-     * Optional. A note to be displayed below the main text in the top section of the popover.
-     */
-    note?: string;
-}
-export interface PopoverActionButtonProps {
-    /**
-     * Required. The icon to be displayed on the button.
-     */
-    icon: React.ReactNode;
-    /**
-     * Required. The handler function to be called when the button is clicked.
-     */
-    action: () => void;
-    /**
-     * Optional. The label for the button. If provided, the button will display this text.
-     */
-    label?: string;
-}
-export interface PopoverBottomSectionProps {
-    /**
-     * Optional. An array of PopoverActionButtonProps objects.
-     * Each object represents an icon button to be displayed in the bottom section of the popover.
-     */
-    iconButtons?: PopoverActionButtonProps[];
-    /**
-     * Optional. A PopoverActionButtonProps object representing a text button to be displayed in the bottom section of the popover.
-     */
-    textButton?: PopoverActionButtonProps;
-}
-export interface PopoverProps {
-    /**
-     * Optional. The size of the popover. It can be 'Small', 'Medium', or 'Large'.
-     * Defaults to 'Medium' if not specified.
-     */
-    size?: Size.Small | Size.Medium | Size.Large;
-    /**
-     * Optional. Properties for the top section of the popover.
-     */
-    topSectionProps?: PopoverTopSectionProps;
-    /**
-     * Optional. Properties for the bottom section of the popover.
-     */
-    bottomSectionProps?: PopoverBottomSectionProps;
-    /**
-     * Required. The main content to be displayed in the popover.
-     */
-    mainContent: React.ReactNode;
-    /**
-     * Required. The children to be rendered inside the popover.
-     */
-    children: React.ReactNode;
-    /**
-     * Required. The position of the popover relative to the target element.
-     * It can be 'Top', 'Bottom', 'Right', or 'Left'.
-     */
-    position: Position.Top | Position.Bottom | Position.Right | Position.Left;
-    /**
-     * Required. A boolean indicating whether the popover should be shown when the target element is clicked. Defaults to 'false', meaning that popover will be shown on mouse hover.
-     */
-    showOnClick: boolean;
-    /**
-     * Optional. A boolean indicating whether an arrow pointer should be shown on the popover.
-     * Defaults to 'false' if not specified.
-     */
-    showArrowPointer?: boolean;
-}
-declare const Popover: React.FunctionComponent<PopoverProps>;
-export default Popover;
+import * as React from 'react';
+import { Position, Size } from '../types';
+export declare const PopoverContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
+    $size: Size;
+    $position: Position;
+    $showArrowPointer: boolean;
+}>> & string;
+export declare const PopoverTopSectionContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
+    $size: Size;
+}>> & string;
+export declare const PopoverMiddleSectionContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
+    $size: Size;
+}>> & string;
+export declare const PopoverBottomSectionContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
+    $size: Size;
+}>> & string;
+export declare const PopoverWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
+    $position: Position;
+    $showOnClick: boolean;
+    $showPopover: boolean;
+}>> & string;
+export interface PopoverTopSectionProps {
+    /**
+     * Required. The main text to be displayed in the top section of the popover.
+     */
+    text: string;
+    /**
+     * Optional. A note to be displayed below the main text in the top section of the popover.
+     */
+    note?: string;
+}
+export interface PopoverActionButtonProps {
+    /**
+     * Required. The icon to be displayed on the button.
+     */
+    icon: React.ReactNode;
+    /**
+     * Required. The handler function to be called when the button is clicked.
+     */
+    action: () => void;
+    /**
+     * Optional. The label for the button. If provided, the button will display this text.
+     */
+    label?: string;
+}
+export interface PopoverBottomSectionProps {
+    /**
+     * Optional. An array of PopoverActionButtonProps objects.
+     * Each object represents an icon button to be displayed in the bottom section of the popover.
+     */
+    iconButtons?: PopoverActionButtonProps[];
+    /**
+     * Optional. A PopoverActionButtonProps object representing a text button to be displayed in the bottom section of the popover.
+     */
+    textButton?: PopoverActionButtonProps;
+}
+export interface PopoverProps {
+    /**
+     * Optional. The size of the popover. It can be 'Small', 'Medium', or 'Large'.
+     * Defaults to 'Medium' if not specified.
+     */
+    size?: Size.Small | Size.Medium | Size.Large;
+    /**
+     * Optional. Properties for the top section of the popover.
+     */
+    topSectionProps?: PopoverTopSectionProps;
+    /**
+     * Optional. Properties for the bottom section of the popover.
+     */
+    bottomSectionProps?: PopoverBottomSectionProps;
+    /**
+     * Required. The main content to be displayed in the popover.
+     */
+    mainContent: React.ReactNode;
+    /**
+     * Required. The children to be rendered inside the popover.
+     */
+    children: React.ReactNode;
+    /**
+     * Required. The position of the popover relative to the target element.
+     * It can be 'Top', 'Bottom', 'Right', or 'Left'.
+     */
+    position: Position.Top | Position.Bottom | Position.Right | Position.Left;
+    /**
+     * Required. A boolean indicating whether the popover should be shown when the target element is clicked. Defaults to 'false', meaning that popover will be shown on mouse hover.
+     */
+    showOnClick: boolean;
+    /**
+     * Optional. A boolean indicating whether an arrow pointer should be shown on the popover.
+     * Defaults to 'false' if not specified.
+     */
+    showArrowPointer?: boolean;
+}
+declare const Popover: React.FunctionComponent<PopoverProps>;
+export default Popover;

package/dist/Popover/Popover.js

@@ -1,6 +1,4 @@
-import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
 import _pt from "prop-types";
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11;
 import * as React from 'react';
 import styled, { useTheme } from 'styled-components';
 import { COLORS, ComponentTextStyle, ComponentXSStyling } from '..';
@@ -9,17 +7,95 @@ import { SystemIcons } from '../icons';
 import { BOXSHADOWS, ComponentLStyling, ComponentMStyling, ComponentSStyling, ComponentXXSStyling, scrollBarStyling, Z_INDEXES } from '../styles';
 import { Position, Size } from '../types';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-export const PopoverContainer = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  //height: ", ";\n  min-width: ", ";\n  border-radius: 4px;\n  background: ", ";\n  cursor: default;\n  box-shadow: ", ";\n\n  position: absolute;  \n  visibility: hidden;\n  opacity: 0;\n  z-index: ", ";\n\n  ", "\n  ", "\n\n  ", "\n  ", "\n\n  &::after {\n    ", "\n"])), props => props.$size === Size.Small ? '240px' : props.$size === Size.Large ? '480px' : '360px', props => props.$size === Size.Small ? '320px' : props.$size === Size.Large ? '640px' : '480px', props => COLORS.getColor('white', props.theme), BOXSHADOWS.BOXSHADOW_CENTERED, Z_INDEXES.popover, props => props.$position == Position.Bottom ? 'right: 50%; top: calc(100% + 16px); transform: translateX(50%);' : '', props => props.$position == Position.Top ? 'right: 50%; bottom: calc(100% + 16px); transform: translateX(50%);' : '', props => props.$position == Position.Left ? 'bottom: 50%; right: calc(100% + 16px); transform: translateY(50%);' : '', props => props.$position == Position.Right ? 'bottom: 50%; left: calc(100% + 16px); transform: translateY(50%);' : '', props => props.$showArrowPointer ? renderArrowStyles(props.$position) : '');
-export const PopoverTopSectionContainer = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  height: ", ";\n  display: flex;\n"])), props => props.$size === Size.Small ? '56px' : props.$size === Size.Large ? '72px' : '64px');
-export const PopoverMiddleSectionContainer = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  margin: 8px;\n  height: ", ";\n  padding: ", ";\n  overflow-y: auto;\n  ", "\n"])), props => props.$size === Size.Small ? '104px' : props.$size === Size.Large ? '304px' : '208px', props => props.$size === Size.Small ? '0 8px' : props.$size === Size.Large ? '0 16px' : '0 12px', scrollBarStyling(Size.Small));
-export const PopoverBottomSectionContainer = styled.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  height: ", ";  \n  display: flex;\n\n  .bottom-flex {\n    flex: 1;\n  }\n"])), props => props.$size === Size.Small ? '64px' : props.$size === Size.Large ? '88px' : '72px');
-const TextContainer = styled.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  margin: ", ";\n  flex-grow: 1;\n"])), props => renderMargins(props.$note, props.$size));
-const NoteContainer = styled.div(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  ", "\n"])), props => props.$size === Size.Small ? ComponentXXSStyling(ComponentTextStyle.Regular, COLORS.getColor('neutral_600', props.theme)) : props.$size === Size.Large ? ComponentSStyling(ComponentTextStyle.Regular, COLORS.getColor('neutral_600', props.theme)) : ComponentXSStyling(ComponentTextStyle.Regular, COLORS.getColor('neutral_600', props.theme)));
-const LabelContainer = styled.div(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n  ", "\n"])), props => props.$size === Size.Small ? ComponentSStyling(ComponentTextStyle.Bold, null) : props.$size === Size.Large ? ComponentLStyling(ComponentTextStyle.Bold, null) : ComponentMStyling(ComponentTextStyle.Bold, null));
-const CloseButtonContainer = styled.div(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n  margin: ", ";\n"])), props => props.$size === Size.Small ? '4px 16px 4px 0' : props.$size === Size.Large ? '12px 24px 12px 0' : '8px 20px 8px 0');
-const TextButtonContainer = styled.div(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n  margin: ", ";\n"])), props => props.$size === Size.Small ? '8px 0 8px 16px' : props.$size === Size.Large ? '16px 0 16px 24px' : '12px 0 12px 20px');
-const IconButtonContainer = styled.div(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n  margin: ", ";\n  display: flex;\n"])), props => props.$size === Size.Small ? '8px 16px 8px 0' : props.$size === Size.Large ? '16px 24px 16px 0' : '12px 20px 12px 0');
-export const PopoverWrapper = styled.div(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n  position: relative;\n\n  .pointer-space {\n    height: ", ";\n    width: ", ";\n    position: absolute;\n\n    ", ";\n    ", ";\n\n    ", ";\n    ", ";\n  }\n\n  ", "\n"])), props => props.$position === Position.Top || props.$position === Position.Bottom ? '16px' : '100%', props => props.$position === Position.Left || props.$position === Position.Right ? '16px' : '100%', props => props.$position === Position.Left ? 'right:100%; bottom: 0%' : '', props => props.$position === Position.Right ? 'left:100%; bottom: 0%' : '', props => props.$position === Position.Top ? 'bottom: 100%' : '', props => props.$position === Position.Bottom ? 'top: 100%' : '', props => props.$showOnClick ? "".concat(PopoverContainer, " {\n        visibility: ").concat(props.$showPopover ? 'visible' : 'hidden', ";\n        opacity: ").concat(props.$showPopover ? '1' : '0', ";\n    }\n    cursor: pointer;") : "&:hover {\n      ".concat(PopoverContainer, " {\n        visibility: visible;\n        opacity: 1;\n      }\n    }"));
+export const PopoverContainer = styled.div`
+  //height: ${props => props.$size === Size.Small ? '240px' : props.$size === Size.Large ? '480px' : '360px'};
+  min-width: ${props => props.$size === Size.Small ? '320px' : props.$size === Size.Large ? '640px' : '480px'};
+  border-radius: 4px;
+  background: ${props => COLORS.getColor('white', props.theme)};
+  cursor: default;
+  box-shadow: ${BOXSHADOWS.BOXSHADOW_CENTERED};
+
+  position: absolute;  
+  visibility: hidden;
+  opacity: 0;
+  z-index: ${Z_INDEXES.popover};
+
+  ${props => props.$position == Position.Bottom ? 'right: 50%; top: calc(100% + 16px); transform: translateX(50%);' : ''}
+  ${props => props.$position == Position.Top ? 'right: 50%; bottom: calc(100% + 16px); transform: translateX(50%);' : ''}
+
+  ${props => props.$position == Position.Left ? 'bottom: 50%; right: calc(100% + 16px); transform: translateY(50%);' : ''}
+  ${props => props.$position == Position.Right ? 'bottom: 50%; left: calc(100% + 16px); transform: translateY(50%);' : ''}
+
+  &::after {
+    ${props => props.$showArrowPointer ? renderArrowStyles(props.$position) : ''}
+`;
+export const PopoverTopSectionContainer = styled.div`
+  height: ${props => props.$size === Size.Small ? '56px' : props.$size === Size.Large ? '72px' : '64px'};
+  display: flex;
+`;
+export const PopoverMiddleSectionContainer = styled.div`
+  margin: 8px;
+  height: ${props => props.$size === Size.Small ? '104px' : props.$size === Size.Large ? '304px' : '208px'};
+  padding: ${props => props.$size === Size.Small ? '0 8px' : props.$size === Size.Large ? '0 16px' : '0 12px'};
+  overflow-y: auto;
+  ${scrollBarStyling(Size.Small)}
+`;
+export const PopoverBottomSectionContainer = styled.div`
+  height: ${props => props.$size === Size.Small ? '64px' : props.$size === Size.Large ? '88px' : '72px'};  
+  display: flex;
+
+  .bottom-flex {
+    flex: 1;
+  }
+`;
+const TextContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  margin: ${props => renderMargins(props.$note, props.$size)};
+  flex-grow: 1;
+`;
+const NoteContainer = styled.div`
+  ${props => props.$size === Size.Small ? ComponentXXSStyling(ComponentTextStyle.Regular, COLORS.getColor('neutral_600', props.theme)) : props.$size === Size.Large ? ComponentSStyling(ComponentTextStyle.Regular, COLORS.getColor('neutral_600', props.theme)) : ComponentXSStyling(ComponentTextStyle.Regular, COLORS.getColor('neutral_600', props.theme))}
+`;
+const LabelContainer = styled.div`
+  ${props => props.$size === Size.Small ? ComponentSStyling(ComponentTextStyle.Bold, null) : props.$size === Size.Large ? ComponentLStyling(ComponentTextStyle.Bold, null) : ComponentMStyling(ComponentTextStyle.Bold, null)}
+`;
+const CloseButtonContainer = styled.div`
+  margin: ${props => props.$size === Size.Small ? '4px 16px 4px 0' : props.$size === Size.Large ? '12px 24px 12px 0' : '8px 20px 8px 0'};
+`;
+const TextButtonContainer = styled.div`
+  margin: ${props => props.$size === Size.Small ? '8px 0 8px 16px' : props.$size === Size.Large ? '16px 0 16px 24px' : '12px 0 12px 20px'};
+`;
+const IconButtonContainer = styled.div`
+  margin: ${props => props.$size === Size.Small ? '8px 16px 8px 0' : props.$size === Size.Large ? '16px 24px 16px 0' : '12px 20px 12px 0'};
+  display: flex;
+`;
+export const PopoverWrapper = styled.div`
+  position: relative;
+
+  .pointer-space {
+    height: ${props => props.$position === Position.Top || props.$position === Position.Bottom ? '16px' : '100%'};
+    width: ${props => props.$position === Position.Left || props.$position === Position.Right ? '16px' : '100%'};
+    position: absolute;
+
+    ${props => props.$position === Position.Left ? 'right:100%; bottom: 0%' : ''};
+    ${props => props.$position === Position.Right ? 'left:100%; bottom: 0%' : ''};
+
+    ${props => props.$position === Position.Top ? 'bottom: 100%' : ''};
+    ${props => props.$position === Position.Bottom ? 'top: 100%' : ''};
+  }
+
+  ${props => props.$showOnClick ? `${PopoverContainer} {
+        visibility: ${props.$showPopover ? 'visible' : 'hidden'};
+        opacity: ${props.$showPopover ? '1' : '0'};
+    }
+    cursor: pointer;` : `&:hover {
+      ${PopoverContainer} {
+        visibility: visible;
+        opacity: 1;
+      }
+    }`}
+`;
 const renderMargins = (isNotePresent, size) => {
   if (isNotePresent) {
     return size === Size.Small ? '10px 16px' : size === Size.Large ? '14px 24px' : '12px 20px';
@@ -29,16 +105,52 @@ const renderMargins = (isNotePresent, size) => {
 };
 const renderArrowStyles = position => {
   if (position === Position.Bottom) {
-    return "height: 0px;\n            width: 0px;\n            border-top: 16px solid transparent;\n            border-right: 12px solid transparent;\n            border-bottom: 16px solid rgb(255,255,255);\n            border-left: 12px solid transparent;\n            content: \"\";\n            position: absolute;\n            right: calc(50% - 12px);\n            bottom: calc(100% - 1px);";
+    return `height: 0px;
+            width: 0px;
+            border-top: 16px solid transparent;
+            border-right: 12px solid transparent;
+            border-bottom: 16px solid rgb(255,255,255);
+            border-left: 12px solid transparent;
+            content: "";
+            position: absolute;
+            right: calc(50% - 12px);
+            bottom: calc(100% - 1px);`;
   }
   if (position === Position.Top) {
-    return "height: 0px;\n            width: 0px;\n            border-top: 16px solid rgb(255,255,255);\n            border-right: 12px solid transparent;\n            border-bottom: 16px solid transparent;\n            border-left: 12px solid transparent;\n            content: \"\";\n            position: absolute;\n            right: calc(50% - 12px);\n            top: calc(100% - 1px);";
+    return `height: 0px;
+            width: 0px;
+            border-top: 16px solid rgb(255,255,255);
+            border-right: 12px solid transparent;
+            border-bottom: 16px solid transparent;
+            border-left: 12px solid transparent;
+            content: "";
+            position: absolute;
+            right: calc(50% - 12px);
+            top: calc(100% - 1px);`;
   }
   if (position === Position.Left) {
-    return "height: 0px;\n            width: 0px;\n            border-top: 12px solid transparent;\n            border-right: 16px solid transparent;\n            border-bottom: 12px solid transparent;\n            border-left: 16px solid rgb(255,255,255);\n            content: \"\";\n            position: absolute;\n            left: calc(100% - 1px);\n            bottom: calc(50% - 12px);";
+    return `height: 0px;
+            width: 0px;
+            border-top: 12px solid transparent;
+            border-right: 16px solid transparent;
+            border-bottom: 12px solid transparent;
+            border-left: 16px solid rgb(255,255,255);
+            content: "";
+            position: absolute;
+            left: calc(100% - 1px);
+            bottom: calc(50% - 12px);`;
   }
   if (position === Position.Right) {
-    return "height: 0px;\n            width: 0px;\n            border-top: 12px solid transparent;\n            border-right: 16px solid rgb(255,255,255);\n            border-bottom: 12px solid transparent;\n            border-left: 16px solid transparent;\n            content: \"\";\n            position: absolute;\n            right: calc(100% - 1px);\n            bottom: calc(50% - 12px);";
+    return `height: 0px;
+            width: 0px;
+            border-top: 12px solid transparent;
+            border-right: 16px solid rgb(255,255,255);
+            border-bottom: 12px solid transparent;
+            border-left: 16px solid transparent;
+            content: "";
+            position: absolute;
+            right: calc(100% - 1px);
+            bottom: calc(50% - 12px);`;
   }
 };
 ;
@@ -46,7 +158,6 @@ const renderArrowStyles = position => {
 ;
 ;
 const Popover = _ref => {
-  var _bottomSectionProps$t, _bottomSectionProps$i;
   let {
     size = Size.Medium,
     topSectionProps,
@@ -59,7 +170,7 @@ const Popover = _ref => {
   } = _ref;
   const [showPopover, setShowPopover] = React.useState(false);
   const theme = useTheme();
-  const popoverRef = React.useRef();
+  const popoverRef = React.useRef(null);
   React.useEffect(() => {
     const checkIfClickedOutside = e => {
       if (showPopover && popoverRef.current && !popoverRef.current.contains(e.target)) {
@@ -83,14 +194,14 @@ const Popover = _ref => {
       children: [!!topSectionProps && /*#__PURE__*/_jsxs(PopoverTopSectionContainer, {
         $size: size,
         children: [/*#__PURE__*/_jsxs(TextContainer, {
-          $note: !!(topSectionProps !== null && topSectionProps !== void 0 && topSectionProps.note),
+          $note: !!topSectionProps?.note,
           $size: size,
-          children: [(topSectionProps === null || topSectionProps === void 0 ? void 0 : topSectionProps.note) && /*#__PURE__*/_jsx(NoteContainer, {
+          children: [topSectionProps?.note && /*#__PURE__*/_jsx(NoteContainer, {
             $size: size,
             children: topSectionProps.note
           }), /*#__PURE__*/_jsx(LabelContainer, {
             $size: size,
-            children: topSectionProps === null || topSectionProps === void 0 ? void 0 : topSectionProps.text
+            children: topSectionProps?.text
           })]
         }), showOnClick && /*#__PURE__*/_jsx(CloseButtonContainer, {
           $size: size,
@@ -109,7 +220,7 @@ const Popover = _ref => {
         children: mainContent
       }), !!bottomSectionProps && /*#__PURE__*/_jsxs(PopoverBottomSectionContainer, {
         $size: size,
-        children: [!!(bottomSectionProps !== null && bottomSectionProps !== void 0 && (_bottomSectionProps$t = bottomSectionProps.textButton) !== null && _bottomSectionProps$t !== void 0 && _bottomSectionProps$t.icon) && /*#__PURE__*/_jsx(TextButtonContainer, {
+        children: [!!bottomSectionProps?.textButton?.icon && /*#__PURE__*/_jsx(TextButtonContainer, {
           $size: size,
           "data-testid": 'textBtn',
           children: /*#__PURE__*/_jsx(Button, {
@@ -124,7 +235,7 @@ const Popover = _ref => {
         }), /*#__PURE__*/_jsx(IconButtonContainer, {
           $size: size,
           "data-testid": 'iconBtn',
-          children: bottomSectionProps === null || bottomSectionProps === void 0 || (_bottomSectionProps$i = bottomSectionProps.iconButtons) === null || _bottomSectionProps$i === void 0 ? void 0 : _bottomSectionProps$i.map(iconButton => /*#__PURE__*/_jsx(IconButton, {
+          children: bottomSectionProps?.iconButtons?.map(iconButton => /*#__PURE__*/_jsx(IconButton, {
             action: iconButton.action,
             variant: "secondary",
             shape: "circular",

package/dist/Popover/Popover.js.map

@@ -1 +1 @@
-{"version":3,"file":"Popover.js","names":["React","styled","useTheme","COLORS","ComponentTextStyle","ComponentXSStyling","Button","IconButton","SystemIcons","BOXSHADOWS","ComponentLStyling","ComponentMStyling","ComponentSStyling","ComponentXXSStyling","scrollBarStyling","Z_INDEXES","Position","Size","jsx","_jsx","jsxs","_jsxs","PopoverContainer","div","_templateObject","_taggedTemplateLiteral","props","$size","Small","Large","getColor","theme","BOXSHADOW_CENTERED","popover","$position","Bottom","Top","Left","Right","$showArrowPointer","renderArrowStyles","PopoverTopSectionContainer","_templateObject2","PopoverMiddleSectionContainer","_templateObject3","PopoverBottomSectionContainer","_templateObject4","TextContainer","_templateObject5","renderMargins","$note","NoteContainer","_templateObject6","Regular","LabelContainer","_templateObject7","Bold","CloseButtonContainer","_templateObject8","TextButtonContainer","_templateObject9","IconButtonContainer","_templateObject10","PopoverWrapper","_templateObject11","$showOnClick","concat","$showPopover","isNotePresent","size","position","Popover","_ref","_bottomSectionProps$t","_bottomSectionProps$i","Medium","topSectionProps","bottomSectionProps","mainContent","children","showOnClick","showArrowPointer","showPopover","setShowPopover","useState","popoverRef","useRef","useEffect","checkIfClickedOutside","e","current","contains","target","document","addEventListener","removeEventListener","ref","note","text","action","useTransparentBackground","iconColor","variant","shape","Close","textButton","icon","onClick","label","className","iconButtons","map","iconButton","propTypes","_pt","string","isRequired","arrayOf","node","func","bool"],"sources":["../../src/Popover/Popover.tsx"],"sourcesContent":["import * as React from 'react';\r\nimport styled, { useTheme } from 'styled-components';\r\nimport { COLORS, ComponentTextStyle, ComponentXSStyling } from '..';\r\nimport { Button, IconButton } from '../Button';\r\nimport { SystemIcons } from '../icons';\r\nimport { BOXSHADOWS, ComponentLStyling, ComponentMStyling, ComponentSStyling, ComponentXXSStyling, scrollBarStyling, Z_INDEXES } from '../styles';\r\nimport { Position, Size } from '../types';\r\n\r\nexport const PopoverContainer = styled.div<{ $size: Size; $position: Position; $showArrowPointer: boolean }>`\r\n  //height: ${(props) => (props.$size === Size.Small ? '240px' : props.$size === Size.Large ? '480px' : '360px')};\r\n  min-width: ${(props) => (props.$size === Size.Small ? '320px' : props.$size === Size.Large ? '640px' : '480px')};\r\n  border-radius: 4px;\r\n  background: ${props => COLORS.getColor('white', props.theme)};\r\n  cursor: default;\r\n  box-shadow: ${BOXSHADOWS.BOXSHADOW_CENTERED};\r\n\r\n  position: absolute;  \r\n  visibility: hidden;\r\n  opacity: 0;\r\n  z-index: ${Z_INDEXES.popover};\r\n\r\n  ${(props) => (props.$position == Position.Bottom ? 'right: 50%; top: calc(100% + 16px); transform: translateX(50%);' : '')}\r\n  ${(props) => (props.$position == Position.Top ? 'right: 50%; bottom: calc(100% + 16px); transform: translateX(50%);' : '')}\r\n\r\n  ${(props) => (props.$position == Position.Left ? 'bottom: 50%; right: calc(100% + 16px); transform: translateY(50%);' : '')}\r\n  ${(props) => (props.$position == Position.Right ? 'bottom: 50%; left: calc(100% + 16px); transform: translateY(50%);' : '')}\r\n\r\n  &::after {\r\n    ${(props) => (props.$showArrowPointer ? renderArrowStyles(props.$position) : '')}\r\n`;\r\n\r\nexport const PopoverTopSectionContainer = styled.div<{ $size: Size }>`\r\n  height: ${(props) => (props.$size === Size.Small ? '56px' : props.$size === Size.Large ? '72px' : '64px')};\r\n  display: flex;\r\n`;\r\n\r\nexport const PopoverMiddleSectionContainer = styled.div<{ $size: Size }>`\r\n  margin: 8px;\r\n  height: ${(props) => (props.$size === Size.Small ? '104px' : props.$size === Size.Large ? '304px' : '208px')};\r\n  padding: ${(props) => (props.$size === Size.Small ? '0 8px' : props.$size === Size.Large ? '0 16px' : '0 12px')};\r\n  overflow-y: auto;\r\n  ${scrollBarStyling(Size.Small)}\r\n`;\r\n\r\nexport const PopoverBottomSectionContainer = styled.div<{ $size: Size }>`\r\n  height: ${(props) => (props.$size === Size.Small ? '64px' : props.$size === Size.Large ? '88px' : '72px')};  \r\n  display: flex;\r\n\r\n  .bottom-flex {\r\n    flex: 1;\r\n  }\r\n`;\r\n\r\nconst TextContainer = styled.div<{ $note: boolean; $size: Size }>`\r\n  display: flex;\r\n  flex-direction: column;\r\n  margin: ${(props) => renderMargins(props.$note, props.$size)};\r\n  flex-grow: 1;\r\n`;\r\n\r\nconst NoteContainer = styled.div<{ $size: Size }>`\r\n  ${(props) =>\r\n    props.$size === Size.Small\r\n      ? ComponentXXSStyling(ComponentTextStyle.Regular, COLORS.getColor('neutral_600', props.theme))\r\n      : props.$size === Size.Large\r\n      ? ComponentSStyling(ComponentTextStyle.Regular, COLORS.getColor('neutral_600', props.theme))\r\n      : ComponentXSStyling(ComponentTextStyle.Regular, COLORS.getColor('neutral_600', props.theme))}\r\n`;\r\n\r\nconst LabelContainer = styled.div<{ $size: Size }>`\r\n  ${(props) =>\r\n    props.$size === Size.Small\r\n      ? ComponentSStyling(ComponentTextStyle.Bold, null)\r\n      : props.$size === Size.Large\r\n      ? ComponentLStyling(ComponentTextStyle.Bold, null)\r\n      : ComponentMStyling(ComponentTextStyle.Bold, null)}\r\n`;\r\n\r\nconst CloseButtonContainer = styled.div<{ $size: Size }>`\r\n  margin: ${(props) => (props.$size === Size.Small ? '4px 16px 4px 0' : props.$size === Size.Large ? '12px 24px 12px 0' : '8px 20px 8px 0')};\r\n`;\r\n\r\nconst TextButtonContainer = styled.div<{ $size: Size }>`\r\n  margin: ${(props) => (props.$size === Size.Small ? '8px 0 8px 16px' : props.$size === Size.Large ? '16px 0 16px 24px' : '12px 0 12px 20px')};\r\n`;\r\n\r\nconst IconButtonContainer = styled.div<{ $size: Size }>`\r\n  margin: ${(props) => (props.$size === Size.Small ? '8px 16px 8px 0' : props.$size === Size.Large ? '16px 24px 16px 0' : '12px 20px 12px 0')};\r\n  display: flex;\r\n`;\r\n\r\nexport const PopoverWrapper = styled.div<{ $position: Position; $showOnClick: boolean; $showPopover: boolean }>`\r\n  position: relative;\r\n\r\n  .pointer-space {\r\n    height: ${(props) => (props.$position === Position.Top || props.$position === Position.Bottom ? '16px' : '100%')};\r\n    width: ${(props) => (props.$position === Position.Left || props.$position === Position.Right ? '16px' : '100%')};\r\n    position: absolute;\r\n\r\n    ${(props) => (props.$position === Position.Left ? 'right:100%; bottom: 0%' : '')};\r\n    ${(props) => (props.$position === Position.Right ? 'left:100%; bottom: 0%' : '')};\r\n\r\n    ${(props) => (props.$position === Position.Top ? 'bottom: 100%' : '')};\r\n    ${(props) => (props.$position === Position.Bottom ? 'top: 100%' : '')};\r\n  }\r\n\r\n  ${(props) =>\r\n    props.$showOnClick\r\n      ? `${PopoverContainer} {\r\n        visibility: ${props.$showPopover ? 'visible' : 'hidden'};\r\n        opacity: ${props.$showPopover ? '1' : '0'};\r\n    }\r\n    cursor: pointer;`\r\n      : `&:hover {\r\n      ${PopoverContainer} {\r\n        visibility: visible;\r\n        opacity: 1;\r\n      }\r\n    }`}\r\n`;\r\n\r\nconst renderMargins = (isNotePresent: boolean, size: Size): string => {\r\n  if (isNotePresent) {\r\n    return size === Size.Small ? '10px 16px' : size === Size.Large ? '14px 24px' : '12px 20px';\r\n  } else {\r\n    return size === Size.Small ? '18px 16px' : size === Size.Large ? '24px' : '20px';\r\n  }\r\n};\r\n\r\nconst renderArrowStyles = (position: Position) => {\r\n  if (position === Position.Bottom) {\r\n    return `height: 0px;\r\n            width: 0px;\r\n            border-top: 16px solid transparent;\r\n            border-right: 12px solid transparent;\r\n            border-bottom: 16px solid rgb(255,255,255);\r\n            border-left: 12px solid transparent;\r\n            content: \"\";\r\n            position: absolute;\r\n            right: calc(50% - 12px);\r\n            bottom: calc(100% - 1px);`;\r\n  }\r\n\r\n  if (position === Position.Top) {\r\n    return `height: 0px;\r\n            width: 0px;\r\n            border-top: 16px solid rgb(255,255,255);\r\n            border-right: 12px solid transparent;\r\n            border-bottom: 16px solid transparent;\r\n            border-left: 12px solid transparent;\r\n            content: \"\";\r\n            position: absolute;\r\n            right: calc(50% - 12px);\r\n            top: calc(100% - 1px);`;\r\n  }\r\n\r\n  if (position === Position.Left) {\r\n    return `height: 0px;\r\n            width: 0px;\r\n            border-top: 12px solid transparent;\r\n            border-right: 16px solid transparent;\r\n            border-bottom: 12px solid transparent;\r\n            border-left: 16px solid rgb(255,255,255);\r\n            content: \"\";\r\n            position: absolute;\r\n            left: calc(100% - 1px);\r\n            bottom: calc(50% - 12px);`;\r\n  }\r\n\r\n  if (position === Position.Right) {\r\n    return `height: 0px;\r\n            width: 0px;\r\n            border-top: 12px solid transparent;\r\n            border-right: 16px solid rgb(255,255,255);\r\n            border-bottom: 12px solid transparent;\r\n            border-left: 16px solid transparent;\r\n            content: \"\";\r\n            position: absolute;\r\n            right: calc(100% - 1px);\r\n            bottom: calc(50% - 12px);`;\r\n  }\r\n};\r\n\r\nexport interface PopoverTopSectionProps {\r\n  /**\r\n   * Required. The main text to be displayed in the top section of the popover.\r\n   */\r\n  text: string;\r\n\r\n  /**\r\n   * Optional. A note to be displayed below the main text in the top section of the popover.\r\n   */\r\n  note?: string;\r\n};\r\n\r\nexport interface PopoverActionButtonProps {\r\n  /**\r\n   * Required. The icon to be displayed on the button.\r\n   */\r\n  icon: React.ReactNode;\r\n\r\n  /**\r\n   * Required. The handler function to be called when the button is clicked.\r\n   */\r\n  action: () => void;\r\n\r\n  /**\r\n   * Optional. The label for the button. If provided, the button will display this text.\r\n   */\r\n  label?: string;\r\n};\r\n\r\nexport interface PopoverBottomSectionProps {\r\n  /**\r\n   * Optional. An array of PopoverActionButtonProps objects.\r\n   * Each object represents an icon button to be displayed in the bottom section of the popover.\r\n   */\r\n  iconButtons?: PopoverActionButtonProps[];\r\n\r\n  /**\r\n   * Optional. A PopoverActionButtonProps object representing a text button to be displayed in the bottom section of the popover.\r\n   */\r\n  textButton?: PopoverActionButtonProps;\r\n};\r\n\r\nexport interface PopoverProps {\r\n  /**\r\n   * Optional. The size of the popover. It can be 'Small', 'Medium', or 'Large'.\r\n   * Defaults to 'Medium' if not specified.\r\n   */\r\n  size?: Size.Small | Size.Medium | Size.Large;\r\n\r\n  /**\r\n   * Optional. Properties for the top section of the popover.\r\n   */\r\n  topSectionProps?: PopoverTopSectionProps;\r\n\r\n  /**\r\n   * Optional. Properties for the bottom section of the popover.\r\n   */\r\n  bottomSectionProps?: PopoverBottomSectionProps;\r\n\r\n  /**\r\n   * Required. The main content to be displayed in the popover.\r\n   */\r\n  mainContent: React.ReactNode;\r\n\r\n  /**\r\n   * Required. The children to be rendered inside the popover.\r\n   */\r\n  children: React.ReactNode;\r\n\r\n  /**\r\n   * Required. The position of the popover relative to the target element.\r\n   * It can be 'Top', 'Bottom', 'Right', or 'Left'.\r\n   */\r\n  position: Position.Top | Position.Bottom | Position.Right | Position.Left;\r\n\r\n  /**\r\n   * Required. A boolean indicating whether the popover should be shown when the target element is clicked. Defaults to 'false', meaning that popover will be shown on mouse hover.\r\n   */\r\n  showOnClick: boolean;\r\n\r\n  /**\r\n   * Optional. A boolean indicating whether an arrow pointer should be shown on the popover.\r\n   * Defaults to 'false' if not specified.\r\n   */\r\n  showArrowPointer?: boolean;\r\n};\r\n\r\nconst Popover: React.FunctionComponent<PopoverProps> = ({\r\n  size = Size.Medium,\r\n  topSectionProps,\r\n  bottomSectionProps,\r\n  mainContent,\r\n  children,\r\n  position,\r\n  showOnClick = false,\r\n  showArrowPointer = false,\r\n}) => {\r\n  const [showPopover, setShowPopover] = React.useState(false);\r\n  const theme = useTheme();\r\n  const popoverRef = React.useRef<any>();\r\n\r\n  React.useEffect(() => {\r\n    const checkIfClickedOutside = (e: { target: any }) => {\r\n      if (showPopover && popoverRef.current && !popoverRef.current.contains(e.target)) {\r\n        setShowPopover(false);\r\n      }\r\n    };\r\n\r\n    document.addEventListener('mousedown', checkIfClickedOutside);\r\n\r\n    return () => {\r\n      document.removeEventListener('mousedown', checkIfClickedOutside);\r\n    };\r\n  }, [showPopover]);\r\n\r\n  return (\r\n    <PopoverWrapper $position={position} $showOnClick={showOnClick} $showPopover={showPopover}>\r\n      <PopoverContainer $size={size} $position={position} ref={popoverRef} $showArrowPointer={showArrowPointer}>\r\n        {!!topSectionProps && (\r\n          <PopoverTopSectionContainer $size={size}>\r\n            <TextContainer $note={!!topSectionProps?.note} $size={size}>\r\n              {topSectionProps?.note && <NoteContainer $size={size}>{topSectionProps.note}</NoteContainer>}\r\n              <LabelContainer $size={size}>{topSectionProps?.text}</LabelContainer>\r\n            </TextContainer>\r\n\r\n            {showOnClick && (\r\n              <CloseButtonContainer $size={size} data-testid={'closeBtn'}>\r\n                <IconButton action={() => setShowPopover(false)} useTransparentBackground iconColor={COLORS.getColor('neutral_600', theme)} variant=\"secondary\" shape=\"circular\">\r\n                  <SystemIcons.Close />\r\n                </IconButton>\r\n              </CloseButtonContainer>\r\n            )}\r\n          </PopoverTopSectionContainer>\r\n        )}\r\n\r\n        <PopoverMiddleSectionContainer $size={size}>{mainContent}</PopoverMiddleSectionContainer>\r\n\r\n        {!!bottomSectionProps && (\r\n          <PopoverBottomSectionContainer $size={size}>\r\n            {!!bottomSectionProps?.textButton?.icon && (\r\n              <TextButtonContainer $size={size} data-testid={'textBtn'}>\r\n                <Button size={size} variant=\"secondary\" icon={bottomSectionProps.textButton.icon} onClick={bottomSectionProps.textButton.action}>\r\n                  {bottomSectionProps.textButton.label}\r\n                </Button>\r\n              </TextButtonContainer>\r\n            )}\r\n\r\n            <div className=\"bottom-flex\" />\r\n\r\n            <IconButtonContainer $size={size} data-testid={'iconBtn'}>\r\n              {bottomSectionProps?.iconButtons?.map((iconButton) => (\r\n                <IconButton action={iconButton.action} variant=\"secondary\" shape=\"circular\" useTransparentBackground>\r\n                  {iconButton.icon}\r\n                </IconButton>\r\n              ))}\r\n            </IconButtonContainer>\r\n          </PopoverBottomSectionContainer>\r\n        )}\r\n      </PopoverContainer>\r\n\r\n      <div onClick={() => showOnClick && setShowPopover(!showPopover)}>\r\n        {children}\r\n\r\n        <div className=\"pointer-space\" />\r\n      </div>\r\n    </PopoverWrapper>\r\n  );\r\n};\r\n\r\nexport default Popover;\r\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"Popover.js","names":["React","styled","useTheme","COLORS","ComponentTextStyle","ComponentXSStyling","Button","IconButton","SystemIcons","BOXSHADOWS","ComponentLStyling","ComponentMStyling","ComponentSStyling","ComponentXXSStyling","scrollBarStyling","Z_INDEXES","Position","Size","jsx","_jsx","jsxs","_jsxs","PopoverContainer","div","props","$size","Small","Large","getColor","theme","BOXSHADOW_CENTERED","popover","$position","Bottom","Top","Left","Right","$showArrowPointer","renderArrowStyles","PopoverTopSectionContainer","PopoverMiddleSectionContainer","PopoverBottomSectionContainer","TextContainer","renderMargins","$note","NoteContainer","Regular","LabelContainer","Bold","CloseButtonContainer","TextButtonContainer","IconButtonContainer","PopoverWrapper","$showOnClick","$showPopover","isNotePresent","size","position","Popover","_ref","Medium","topSectionProps","bottomSectionProps","mainContent","children","showOnClick","showArrowPointer","showPopover","setShowPopover","useState","popoverRef","useRef","useEffect","checkIfClickedOutside","e","current","contains","target","document","addEventListener","removeEventListener","ref","note","text","action","useTransparentBackground","iconColor","variant","shape","Close","textButton","icon","onClick","label","className","iconButtons","map","iconButton","propTypes","_pt","string","isRequired","arrayOf","node","func","bool"],"sources":["../../src/Popover/Popover.tsx"],"sourcesContent":["import * as React from 'react';\r\nimport styled, { useTheme } from 'styled-components';\r\nimport { COLORS, ComponentTextStyle, ComponentXSStyling } from '..';\r\nimport { Button, IconButton } from '../Button';\r\nimport { SystemIcons } from '../icons';\r\nimport { BOXSHADOWS, ComponentLStyling, ComponentMStyling, ComponentSStyling, ComponentXXSStyling, scrollBarStyling, Z_INDEXES } from '../styles';\r\nimport { Position, Size } from '../types';\r\n\r\nexport const PopoverContainer = styled.div<{ $size: Size; $position: Position; $showArrowPointer: boolean }>`\r\n  //height: ${(props) => (props.$size === Size.Small ? '240px' : props.$size === Size.Large ? '480px' : '360px')};\r\n  min-width: ${(props) => (props.$size === Size.Small ? '320px' : props.$size === Size.Large ? '640px' : '480px')};\r\n  border-radius: 4px;\r\n  background: ${props => COLORS.getColor('white', props.theme)};\r\n  cursor: default;\r\n  box-shadow: ${BOXSHADOWS.BOXSHADOW_CENTERED};\r\n\r\n  position: absolute;  \r\n  visibility: hidden;\r\n  opacity: 0;\r\n  z-index: ${Z_INDEXES.popover};\r\n\r\n  ${(props) => (props.$position == Position.Bottom ? 'right: 50%; top: calc(100% + 16px); transform: translateX(50%);' : '')}\r\n  ${(props) => (props.$position == Position.Top ? 'right: 50%; bottom: calc(100% + 16px); transform: translateX(50%);' : '')}\r\n\r\n  ${(props) => (props.$position == Position.Left ? 'bottom: 50%; right: calc(100% + 16px); transform: translateY(50%);' : '')}\r\n  ${(props) => (props.$position == Position.Right ? 'bottom: 50%; left: calc(100% + 16px); transform: translateY(50%);' : '')}\r\n\r\n  &::after {\r\n    ${(props) => (props.$showArrowPointer ? renderArrowStyles(props.$position) : '')}\r\n`;\r\n\r\nexport const PopoverTopSectionContainer = styled.div<{ $size: Size }>`\r\n  height: ${(props) => (props.$size === Size.Small ? '56px' : props.$size === Size.Large ? '72px' : '64px')};\r\n  display: flex;\r\n`;\r\n\r\nexport const PopoverMiddleSectionContainer = styled.div<{ $size: Size }>`\r\n  margin: 8px;\r\n  height: ${(props) => (props.$size === Size.Small ? '104px' : props.$size === Size.Large ? '304px' : '208px')};\r\n  padding: ${(props) => (props.$size === Size.Small ? '0 8px' : props.$size === Size.Large ? '0 16px' : '0 12px')};\r\n  overflow-y: auto;\r\n  ${scrollBarStyling(Size.Small)}\r\n`;\r\n\r\nexport const PopoverBottomSectionContainer = styled.div<{ $size: Size }>`\r\n  height: ${(props) => (props.$size === Size.Small ? '64px' : props.$size === Size.Large ? '88px' : '72px')};  \r\n  display: flex;\r\n\r\n  .bottom-flex {\r\n    flex: 1;\r\n  }\r\n`;\r\n\r\nconst TextContainer = styled.div<{ $note: boolean; $size: Size }>`\r\n  display: flex;\r\n  flex-direction: column;\r\n  margin: ${(props) => renderMargins(props.$note, props.$size)};\r\n  flex-grow: 1;\r\n`;\r\n\r\nconst NoteContainer = styled.div<{ $size: Size }>`\r\n  ${(props) =>\r\n    props.$size === Size.Small\r\n      ? ComponentXXSStyling(ComponentTextStyle.Regular, COLORS.getColor('neutral_600', props.theme))\r\n      : props.$size === Size.Large\r\n      ? ComponentSStyling(ComponentTextStyle.Regular, COLORS.getColor('neutral_600', props.theme))\r\n      : ComponentXSStyling(ComponentTextStyle.Regular, COLORS.getColor('neutral_600', props.theme))}\r\n`;\r\n\r\nconst LabelContainer = styled.div<{ $size: Size }>`\r\n  ${(props) =>\r\n    props.$size === Size.Small\r\n      ? ComponentSStyling(ComponentTextStyle.Bold, null)\r\n      : props.$size === Size.Large\r\n      ? ComponentLStyling(ComponentTextStyle.Bold, null)\r\n      : ComponentMStyling(ComponentTextStyle.Bold, null)}\r\n`;\r\n\r\nconst CloseButtonContainer = styled.div<{ $size: Size }>`\r\n  margin: ${(props) => (props.$size === Size.Small ? '4px 16px 4px 0' : props.$size === Size.Large ? '12px 24px 12px 0' : '8px 20px 8px 0')};\r\n`;\r\n\r\nconst TextButtonContainer = styled.div<{ $size: Size }>`\r\n  margin: ${(props) => (props.$size === Size.Small ? '8px 0 8px 16px' : props.$size === Size.Large ? '16px 0 16px 24px' : '12px 0 12px 20px')};\r\n`;\r\n\r\nconst IconButtonContainer = styled.div<{ $size: Size }>`\r\n  margin: ${(props) => (props.$size === Size.Small ? '8px 16px 8px 0' : props.$size === Size.Large ? '16px 24px 16px 0' : '12px 20px 12px 0')};\r\n  display: flex;\r\n`;\r\n\r\nexport const PopoverWrapper = styled.div<{ $position: Position; $showOnClick: boolean; $showPopover: boolean }>`\r\n  position: relative;\r\n\r\n  .pointer-space {\r\n    height: ${(props) => (props.$position === Position.Top || props.$position === Position.Bottom ? '16px' : '100%')};\r\n    width: ${(props) => (props.$position === Position.Left || props.$position === Position.Right ? '16px' : '100%')};\r\n    position: absolute;\r\n\r\n    ${(props) => (props.$position === Position.Left ? 'right:100%; bottom: 0%' : '')};\r\n    ${(props) => (props.$position === Position.Right ? 'left:100%; bottom: 0%' : '')};\r\n\r\n    ${(props) => (props.$position === Position.Top ? 'bottom: 100%' : '')};\r\n    ${(props) => (props.$position === Position.Bottom ? 'top: 100%' : '')};\r\n  }\r\n\r\n  ${(props) =>\r\n    props.$showOnClick\r\n      ? `${PopoverContainer} {\r\n        visibility: ${props.$showPopover ? 'visible' : 'hidden'};\r\n        opacity: ${props.$showPopover ? '1' : '0'};\r\n    }\r\n    cursor: pointer;`\r\n      : `&:hover {\r\n      ${PopoverContainer} {\r\n        visibility: visible;\r\n        opacity: 1;\r\n      }\r\n    }`}\r\n`;\r\n\r\nconst renderMargins = (isNotePresent: boolean, size: Size): string => {\r\n  if (isNotePresent) {\r\n    return size === Size.Small ? '10px 16px' : size === Size.Large ? '14px 24px' : '12px 20px';\r\n  } else {\r\n    return size === Size.Small ? '18px 16px' : size === Size.Large ? '24px' : '20px';\r\n  }\r\n};\r\n\r\nconst renderArrowStyles = (position: Position) => {\r\n  if (position === Position.Bottom) {\r\n    return `height: 0px;\r\n            width: 0px;\r\n            border-top: 16px solid transparent;\r\n            border-right: 12px solid transparent;\r\n            border-bottom: 16px solid rgb(255,255,255);\r\n            border-left: 12px solid transparent;\r\n            content: \"\";\r\n            position: absolute;\r\n            right: calc(50% - 12px);\r\n            bottom: calc(100% - 1px);`;\r\n  }\r\n\r\n  if (position === Position.Top) {\r\n    return `height: 0px;\r\n            width: 0px;\r\n            border-top: 16px solid rgb(255,255,255);\r\n            border-right: 12px solid transparent;\r\n            border-bottom: 16px solid transparent;\r\n            border-left: 12px solid transparent;\r\n            content: \"\";\r\n            position: absolute;\r\n            right: calc(50% - 12px);\r\n            top: calc(100% - 1px);`;\r\n  }\r\n\r\n  if (position === Position.Left) {\r\n    return `height: 0px;\r\n            width: 0px;\r\n            border-top: 12px solid transparent;\r\n            border-right: 16px solid transparent;\r\n            border-bottom: 12px solid transparent;\r\n            border-left: 16px solid rgb(255,255,255);\r\n            content: \"\";\r\n            position: absolute;\r\n            left: calc(100% - 1px);\r\n            bottom: calc(50% - 12px);`;\r\n  }\r\n\r\n  if (position === Position.Right) {\r\n    return `height: 0px;\r\n            width: 0px;\r\n            border-top: 12px solid transparent;\r\n            border-right: 16px solid rgb(255,255,255);\r\n            border-bottom: 12px solid transparent;\r\n            border-left: 16px solid transparent;\r\n            content: \"\";\r\n            position: absolute;\r\n            right: calc(100% - 1px);\r\n            bottom: calc(50% - 12px);`;\r\n  }\r\n};\r\n\r\nexport interface PopoverTopSectionProps {\r\n  /**\r\n   * Required. The main text to be displayed in the top section of the popover.\r\n   */\r\n  text: string;\r\n\r\n  /**\r\n   * Optional. A note to be displayed below the main text in the top section of the popover.\r\n   */\r\n  note?: string;\r\n};\r\n\r\nexport interface PopoverActionButtonProps {\r\n  /**\r\n   * Required. The icon to be displayed on the button.\r\n   */\r\n  icon: React.ReactNode;\r\n\r\n  /**\r\n   * Required. The handler function to be called when the button is clicked.\r\n   */\r\n  action: () => void;\r\n\r\n  /**\r\n   * Optional. The label for the button. If provided, the button will display this text.\r\n   */\r\n  label?: string;\r\n};\r\n\r\nexport interface PopoverBottomSectionProps {\r\n  /**\r\n   * Optional. An array of PopoverActionButtonProps objects.\r\n   * Each object represents an icon button to be displayed in the bottom section of the popover.\r\n   */\r\n  iconButtons?: PopoverActionButtonProps[];\r\n\r\n  /**\r\n   * Optional. A PopoverActionButtonProps object representing a text button to be displayed in the bottom section of the popover.\r\n   */\r\n  textButton?: PopoverActionButtonProps;\r\n};\r\n\r\nexport interface PopoverProps {\r\n  /**\r\n   * Optional. The size of the popover. It can be 'Small', 'Medium', or 'Large'.\r\n   * Defaults to 'Medium' if not specified.\r\n   */\r\n  size?: Size.Small | Size.Medium | Size.Large;\r\n\r\n  /**\r\n   * Optional. Properties for the top section of the popover.\r\n   */\r\n  topSectionProps?: PopoverTopSectionProps;\r\n\r\n  /**\r\n   * Optional. Properties for the bottom section of the popover.\r\n   */\r\n  bottomSectionProps?: PopoverBottomSectionProps;\r\n\r\n  /**\r\n   * Required. The main content to be displayed in the popover.\r\n   */\r\n  mainContent: React.ReactNode;\r\n\r\n  /**\r\n   * Required. The children to be rendered inside the popover.\r\n   */\r\n  children: React.ReactNode;\r\n\r\n  /**\r\n   * Required. The position of the popover relative to the target element.\r\n   * It can be 'Top', 'Bottom', 'Right', or 'Left'.\r\n   */\r\n  position: Position.Top | Position.Bottom | Position.Right | Position.Left;\r\n\r\n  /**\r\n   * Required. A boolean indicating whether the popover should be shown when the target element is clicked. Defaults to 'false', meaning that popover will be shown on mouse hover.\r\n   */\r\n  showOnClick: boolean;\r\n\r\n  /**\r\n   * Optional. A boolean indicating whether an arrow pointer should be shown on the popover.\r\n   * Defaults to 'false' if not specified.\r\n   */\r\n  showArrowPointer?: boolean;\r\n};\r\n\r\nconst Popover: React.FunctionComponent<PopoverProps> = ({\r\n  size = Size.Medium,\r\n  topSectionProps,\r\n  bottomSectionProps,\r\n  mainContent,\r\n  children,\r\n  position,\r\n  showOnClick = false,\r\n  showArrowPointer = false,\r\n}) => {\r\n  const [showPopover, setShowPopover] = React.useState(false);\r\n  const theme = useTheme();\r\n  const popoverRef = React.useRef<any>(null);\r\n\r\n  React.useEffect(() => {\r\n    const checkIfClickedOutside = (e: { target: any }) => {\r\n      if (showPopover && popoverRef.current && !popoverRef.current.contains(e.target)) {\r\n        setShowPopover(false);\r\n      }\r\n    };\r\n\r\n    document.addEventListener('mousedown', checkIfClickedOutside);\r\n\r\n    return () => {\r\n      document.removeEventListener('mousedown', checkIfClickedOutside);\r\n    };\r\n  }, [showPopover]);\r\n\r\n  return (\r\n    <PopoverWrapper $position={position} $showOnClick={showOnClick} $showPopover={showPopover}>\r\n      <PopoverContainer $size={size} $position={position} ref={popoverRef} $showArrowPointer={showArrowPointer}>\r\n        {!!topSectionProps && (\r\n          <PopoverTopSectionContainer $size={size}>\r\n            <TextContainer $note={!!topSectionProps?.note} $size={size}>\r\n              {topSectionProps?.note && <NoteContainer $size={size}>{topSectionProps.note}</NoteContainer>}\r\n              <LabelContainer $size={size}>{topSectionProps?.text}</LabelContainer>\r\n            </TextContainer>\r\n\r\n            {showOnClick && (\r\n              <CloseButtonContainer $size={size} data-testid={'closeBtn'}>\r\n                <IconButton action={() => setShowPopover(false)} useTransparentBackground iconColor={COLORS.getColor('neutral_600', theme)} variant=\"secondary\" shape=\"circular\">\r\n                  <SystemIcons.Close />\r\n                </IconButton>\r\n              </CloseButtonContainer>\r\n            )}\r\n          </PopoverTopSectionContainer>\r\n        )}\r\n\r\n        <PopoverMiddleSectionContainer $size={size}>{mainContent}</PopoverMiddleSectionContainer>\r\n\r\n        {!!bottomSectionProps && (\r\n          <PopoverBottomSectionContainer $size={size}>\r\n            {!!bottomSectionProps?.textButton?.icon && (\r\n              <TextButtonContainer $size={size} data-testid={'textBtn'}>\r\n                <Button size={size} variant=\"secondary\" icon={bottomSectionProps.textButton.icon} onClick={bottomSectionProps.textButton.action}>\r\n                  {bottomSectionProps.textButton.label}\r\n                </Button>\r\n              </TextButtonContainer>\r\n            )}\r\n\r\n            <div className=\"bottom-flex\" />\r\n\r\n            <IconButtonContainer $size={size} data-testid={'iconBtn'}>\r\n              {bottomSectionProps?.iconButtons?.map((iconButton) => (\r\n                <IconButton action={iconButton.action} variant=\"secondary\" shape=\"circular\" useTransparentBackground>\r\n                  {iconButton.icon}\r\n                </IconButton>\r\n              ))}\r\n            </IconButtonContainer>\r\n          </PopoverBottomSectionContainer>\r\n        )}\r\n      </PopoverContainer>\r\n\r\n      <div onClick={() => showOnClick && setShowPopover(!showPopover)}>\r\n        {children}\r\n\r\n        <div className=\"pointer-space\" />\r\n      </div>\r\n    </PopoverWrapper>\r\n  );\r\n};\r\n\r\nexport default Popover;\r\n"],"mappings":"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","ignoreList":[]}

package/dist/Popover/index.d.ts

@@ -1 +1 @@
-export { default as Popover } from './Popover';
+export { default as Popover } from './Popover';