@laerdal/life-react-components 2.0.1-dev.2.full → 2.0.1-dev.20

package/dist/Paginator/Paginator.js

@@ -1,8 +1,6 @@
 import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
 import _pt from "prop-types";
-
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
-
 import * as React from 'react';
 import styled from 'styled-components';
 import { NavLink } from 'react-router-dom';
@@ -19,24 +17,21 @@ var Items = styled.ul(_templateObject2 || (_templateObject2 = _taggedTemplateLit
 var Item = styled.li(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  width: 48px;\n  height: 48px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n\n  & > * {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    width: 100%;\n    height: 100%;\n    text-decoration: none;\n\n    ", "\n\n    &:focus,\n    &:focus-within {\n      ", "\n    }\n  }\n  & > a:hover {\n    z-index: ", ";\n    color: ", ";\n    background-color: ", ";\n  }\n  & > a:active {\n    z-index: ", ";\n    color: ", ";\n    background-color: ", ";\n  }\n  & > a.active {\n    z-index: ", ";\n    color: ", ";\n    background-color: ", ";\n    cursor: default;\n    &:hover {\n      color: ", ";\n      background-color: ", ";\n    }\n    &:active {\n      color: ", ";\n      background-color: ", ";\n    }\n  }\n"])), ComponentMStyling(ComponentTextStyle.Regular, COLORS.neutral_600), focusStyles, Z_INDEXES.hover, COLORS.primary_800, COLORS.primary_20, Z_INDEXES.active, COLORS.primary_700, COLORS.primary_100, Z_INDEXES.active, COLORS.neutral_800, COLORS.neutral_20, COLORS.primary_800, COLORS.primary_20, COLORS.primary_700, COLORS.primary_100);
 var Dots = styled(Item)(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  cursor: not-allowed;\n  &:after{\n    ", "\n    content: '...';\n  }\n"])), ComponentMStyling(ComponentTextStyle.Regular, COLORS.neutral_600));
 var ItemContent = styled('div')(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  text-align:center;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  position: relative;\n  width: 100%;\n  height: 100%;\n  \n  &.active:after{\n    content: '';\n    position: absolute;\n    bottom: 4px;\n    width: 32px;\n    border-radius: 4px;\n    height: 4px;\n    background-color: ", "\n  }\n  &.active:hover:after{\n    background-color: ", "\n  }\n  &.active:active:after{\n    background-color: ", "\n  }\n"])), COLORS.primary_500, COLORS.primary_700, COLORS.primary_800);
-
 var Step = function Step(_ref) {
   var _ref$up = _ref.up,
-      up = _ref$up === void 0 ? true : _ref$up,
-      _ref$target = _ref.target,
-      target = _ref$target === void 0 ? '' : _ref$target,
-      _ref$disabled = _ref.disabled,
-      disabled = _ref$disabled === void 0 ? false : _ref$disabled,
-      page = _ref.page,
-      onPageChange = _ref.onPageChange,
-      id = _ref.id;
+    up = _ref$up === void 0 ? true : _ref$up,
+    _ref$target = _ref.target,
+    target = _ref$target === void 0 ? '' : _ref$target,
+    _ref$disabled = _ref.disabled,
+    disabled = _ref$disabled === void 0 ? false : _ref$disabled,
+    page = _ref.page,
+    onPageChange = _ref.onPageChange,
+    id = _ref.id;
   var navigateHook = useNavigate();
-
   var handleButtonClick = function handleButtonClick() {
     navigateHook(target);
     onPageChange && onPageChange(page);
   };
-
   return /*#__PURE__*/_jsx(IconButton, {
     id: id,
     action: function action(event) {
@@ -48,20 +43,18 @@ var Step = function Step(_ref) {
     children: up ? /*#__PURE__*/_jsx(ChevronRight, {}) : /*#__PURE__*/_jsx(ChevronLeft, {})
   });
 };
-
 var Paginator = function Paginator(_ref2) {
   var _ref2$pageCount = _ref2.pageCount,
-      pageCount = _ref2$pageCount === void 0 ? 1 : _ref2$pageCount,
-      _ref2$currentPage = _ref2.currentPage,
-      currentPage = _ref2$currentPage === void 0 ? 1 : _ref2$currentPage,
-      _ref2$baseUrl = _ref2.baseUrl,
-      baseUrl = _ref2$baseUrl === void 0 ? '' : _ref2$baseUrl,
-      _onPageChange = _ref2.onPageChange;
+    pageCount = _ref2$pageCount === void 0 ? 1 : _ref2$pageCount,
+    _ref2$currentPage = _ref2.currentPage,
+    currentPage = _ref2$currentPage === void 0 ? 1 : _ref2$currentPage,
+    _ref2$baseUrl = _ref2.baseUrl,
+    baseUrl = _ref2$baseUrl === void 0 ? '' : _ref2$baseUrl,
+    _onPageChange = _ref2.onPageChange;
   var pages = [];
   var from = 2;
   var to = 4;
   if (pageCount === 0) return null;
-
   if (pageCount > 1) {
     if (currentPage >= 4 && currentPage <= pageCount - 2) {
       from = currentPage - 1;
@@ -70,16 +63,13 @@ var Paginator = function Paginator(_ref2) {
       from = pageCount - 3;
       to = pageCount - 1;
     }
-
     if (to > pageCount) {
       to = pageCount;
     }
-
     for (var i = from; i <= to; i += 1) {
       pages.push(i);
     }
   }
-
   return /*#__PURE__*/_jsx(Container, {
     children: /*#__PURE__*/_jsxs(Items, {
       children: [/*#__PURE__*/_jsx(Step, {
@@ -151,7 +141,6 @@ var Paginator = function Paginator(_ref2) {
     })
   });
 };
-
 Paginator.propTypes = {
   pageCount: _pt.number.isRequired,
   currentPage: _pt.number.isRequired,

package/dist/Paginator/Paginator.js.map

@@ -1 +1 @@
-{"version":3,"file":"Paginator.js","names":["React","styled","NavLink","BREAKPOINTS","COLORS","ComponentTextStyle","focusStyles","ChevronLeft","ChevronRight","ComponentMStyling","Z_INDEXES","useNavigate","IconButton","Container","nav","MEDIUM","Items","ul","Item","li","Regular","neutral_600","hover","primary_800","primary_20","active","primary_700","primary_100","neutral_800","neutral_20","Dots","ItemContent","primary_500","Step","up","target","disabled","page","onPageChange","id","navigateHook","handleButtonClick","event","Paginator","pageCount","currentPage","baseUrl","pages","from","to","i","push","findIndex","item","map"],"sources":["../../src/Paginator/Paginator.tsx"],"sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport {NavLink} from 'react-router-dom';\nimport {BREAKPOINTS, COLORS, ComponentTextStyle, focusStyles} from '../styles';\nimport {ChevronLeft, ChevronRight} from '../icons/systemicons/SystemIcons';\nimport {ComponentMStyling} from '../styles/typography';\nimport {Z_INDEXES} from '../styles/z-indexes';\nimport { useNavigate } from 'react-router';\nimport {IconButton} from '../Button';\n\nconst Container = styled.nav`\n  margin: 20px 0;\n  display: flex;\n  justify-content: center;\n\n  ${BREAKPOINTS.MEDIUM} {\n    width: 75%;\n  }\n`;\n\nconst Items = styled.ul`\n  margin: 0;\n  padding: 0;\n  list-style: none;\n  display: flex;\n`;\n\nconst Item = styled.li`\n  width: 48px;\n  height: 48px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n\n  & > * {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    width: 100%;\n    height: 100%;\n    text-decoration: none;\n\n    ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.neutral_600)}\n\n    &:focus,\n    &:focus-within {\n      ${focusStyles}\n    }\n  }\n  & > a:hover {\n    z-index: ${Z_INDEXES.hover};\n    color: ${COLORS.primary_800};\n    background-color: ${COLORS.primary_20};\n  }\n  & > a:active {\n    z-index: ${Z_INDEXES.active};\n    color: ${COLORS.primary_700};\n    background-color: ${COLORS.primary_100};\n  }\n  & > a.active {\n    z-index: ${Z_INDEXES.active};\n    color: ${COLORS.neutral_800};\n    background-color: ${COLORS.neutral_20};\n    cursor: default;\n    &:hover {\n      color: ${COLORS.primary_800};\n      background-color: ${COLORS.primary_20};\n    }\n    &:active {\n      color: ${COLORS.primary_700};\n      background-color: ${COLORS.primary_100};\n    }\n  }\n`;\n\nconst Dots = styled(Item)`\n  cursor: not-allowed;\n  &:after{\n    ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.neutral_600)}\n    content: '...';\n  }\n`;\n\nconst ItemContent = styled('div')`\n  text-align:center;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  position: relative;\n  width: 100%;\n  height: 100%;\n  \n  &.active:after{\n    content: '';\n    position: absolute;\n    bottom: 4px;\n    width: 32px;\n    border-radius: 4px;\n    height: 4px;\n    background-color: ${COLORS.primary_500}\n  }\n  &.active:hover:after{\n    background-color: ${COLORS.primary_700}\n  }\n  &.active:active:after{\n    background-color: ${COLORS.primary_800}\n  }\n`\n\ntype PaginatorProps = {\n  pageCount: number;\n  currentPage: number;\n  baseUrl: string;\n  onPageChange?: (page: number) => void;\n};\n\nconst Step = ({\n  up = true,\n  target = '',\n  disabled = false,\n  page,\n  onPageChange,\n  id,\n}: {\n  up: boolean;\n  target: string;\n  disabled: boolean;\n  page: number;\n  onPageChange?: (page: number) => void;\n  id?: string;\n}) => {\n  const navigateHook = useNavigate();\n\n  const handleButtonClick = () => {\n    navigateHook(target);\n    onPageChange && onPageChange(page);\n  }\n\n  return (\n    <IconButton id={id}\n                action={event => handleButtonClick()}\n                variant={'secondary'}\n                shape={'circular'}\n                disabled={disabled}>\n      {up ? <ChevronRight/> : <ChevronLeft/>}\n    </IconButton>\n  )\n};\n\nconst Paginator = ({ pageCount = 1, currentPage = 1, baseUrl = '', onPageChange }: PaginatorProps) => {\n  const pages = [];\n  let from = 2;\n  let to = 4;\n  if (pageCount === 0) return null;\n\n  if (pageCount > 1) {\n    if (currentPage >= 4 && currentPage <= pageCount - 2) {\n      from = currentPage - 1;\n      to = currentPage + 1;\n    } else if (pageCount - 2 > 1 && currentPage > pageCount - 2) {\n      from = pageCount - 3;\n      to = pageCount - 1;\n    }\n    if (to > pageCount) {\n      to = pageCount;\n    }\n    for (let i = from; i <= to; i += 1) {\n      pages.push(i);\n    }\n  }\n\n  return (\n    <Container>\n      <Items>\n        <Step up={false}\n              target={`${baseUrl}/${currentPage - 1}`}\n              page={currentPage - 1}\n              disabled={currentPage === 1}\n              onPageChange={() => {\n                if (onPageChange) onPageChange(currentPage - 1);\n              }}\n              id=\"paginator-left\"/>\n        {pages.findIndex(item => item === 1) === -1 && (\n          <Item>\n            <NavLink\n              to={`${baseUrl}/1`}\n              onClick={() => {\n                if (onPageChange) onPageChange(1);\n              }}>\n                <ItemContent className={currentPage === 1 ? 'active' : ''}>\n                 <span>1</span>\n                </ItemContent>\n            </NavLink>\n          </Item>\n        )}\n        {currentPage >= 4 && pageCount > 5 && pageCount && pages.findIndex(item => item === 1) === -1 && (\n          <Dots/>\n        )}\n        {pages.map(page => (\n          <Item key={page}>\n            <NavLink\n              to={`${baseUrl}/${page}`}\n              onClick={() => {\n                if (onPageChange) onPageChange(page);\n              }}>\n                <ItemContent className={currentPage === page ? 'active' : ''}>\n                 <span>{page}</span>\n                </ItemContent>\n            </NavLink>\n          </Item>\n        ))}\n        {pageCount > 5 && currentPage <= pageCount - 3 && (\n          <Dots/>\n        )}\n        {pages.findIndex(item => item === pageCount) === -1 && pageCount !== 1 && (\n          <Item>\n            <NavLink\n              to={`${baseUrl}/${pageCount}`}\n              onClick={() => {\n                if (onPageChange) onPageChange(pageCount);\n              }}>\n                <ItemContent className={currentPage === pageCount ? 'active' : ''}>\n                 <span>{pageCount}</span>\n                </ItemContent>\n            </NavLink>\n          </Item>\n        )}\n        <Step up\n              target={`${baseUrl}/${currentPage + 1}`}\n              page={currentPage + 1}\n              disabled={currentPage === pageCount}\n              onPageChange={() => {\n                if (onPageChange) onPageChange(currentPage + 1);\n              }}\n              id=\"paginator-right\"/>\n      </Items>\n    </Container>\n  );\n};\n\nexport default Paginator;\n"],"mappings":"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"}
+{"version":3,"file":"Paginator.js","names":["React","styled","NavLink","BREAKPOINTS","COLORS","ComponentTextStyle","focusStyles","ChevronLeft","ChevronRight","ComponentMStyling","Z_INDEXES","useNavigate","IconButton","Container","nav","MEDIUM","Items","ul","Item","li","Regular","neutral_600","hover","primary_800","primary_20","active","primary_700","primary_100","neutral_800","neutral_20","Dots","ItemContent","primary_500","Step","up","target","disabled","page","onPageChange","id","navigateHook","handleButtonClick","event","Paginator","pageCount","currentPage","baseUrl","pages","from","to","i","push","findIndex","item","map"],"sources":["../../src/Paginator/Paginator.tsx"],"sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport {NavLink} from 'react-router-dom';\nimport {BREAKPOINTS, COLORS, ComponentTextStyle, focusStyles} from '../styles';\nimport {ChevronLeft, ChevronRight} from '../icons/systemicons/SystemIcons';\nimport {ComponentMStyling} from '../styles/typography';\nimport {Z_INDEXES} from '../styles/z-indexes';\nimport { useNavigate } from 'react-router';\nimport {IconButton} from '../Button';\n\nconst Container = styled.nav`\n  margin: 20px 0;\n  display: flex;\n  justify-content: center;\n\n  ${BREAKPOINTS.MEDIUM} {\n    width: 75%;\n  }\n`;\n\nconst Items = styled.ul`\n  margin: 0;\n  padding: 0;\n  list-style: none;\n  display: flex;\n`;\n\nconst Item = styled.li`\n  width: 48px;\n  height: 48px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n\n  & > * {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    width: 100%;\n    height: 100%;\n    text-decoration: none;\n\n    ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.neutral_600)}\n\n    &:focus,\n    &:focus-within {\n      ${focusStyles}\n    }\n  }\n  & > a:hover {\n    z-index: ${Z_INDEXES.hover};\n    color: ${COLORS.primary_800};\n    background-color: ${COLORS.primary_20};\n  }\n  & > a:active {\n    z-index: ${Z_INDEXES.active};\n    color: ${COLORS.primary_700};\n    background-color: ${COLORS.primary_100};\n  }\n  & > a.active {\n    z-index: ${Z_INDEXES.active};\n    color: ${COLORS.neutral_800};\n    background-color: ${COLORS.neutral_20};\n    cursor: default;\n    &:hover {\n      color: ${COLORS.primary_800};\n      background-color: ${COLORS.primary_20};\n    }\n    &:active {\n      color: ${COLORS.primary_700};\n      background-color: ${COLORS.primary_100};\n    }\n  }\n`;\n\nconst Dots = styled(Item)`\n  cursor: not-allowed;\n  &:after{\n    ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.neutral_600)}\n    content: '...';\n  }\n`;\n\nconst ItemContent = styled('div')`\n  text-align:center;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  position: relative;\n  width: 100%;\n  height: 100%;\n  \n  &.active:after{\n    content: '';\n    position: absolute;\n    bottom: 4px;\n    width: 32px;\n    border-radius: 4px;\n    height: 4px;\n    background-color: ${COLORS.primary_500}\n  }\n  &.active:hover:after{\n    background-color: ${COLORS.primary_700}\n  }\n  &.active:active:after{\n    background-color: ${COLORS.primary_800}\n  }\n`\n\ntype PaginatorProps = {\n  pageCount: number;\n  currentPage: number;\n  baseUrl: string;\n  onPageChange?: (page: number) => void;\n};\n\nconst Step = ({\n  up = true,\n  target = '',\n  disabled = false,\n  page,\n  onPageChange,\n  id,\n}: {\n  up: boolean;\n  target: string;\n  disabled: boolean;\n  page: number;\n  onPageChange?: (page: number) => void;\n  id?: string;\n}) => {\n  const navigateHook = useNavigate();\n\n  const handleButtonClick = () => {\n    navigateHook(target);\n    onPageChange && onPageChange(page);\n  }\n\n  return (\n    <IconButton id={id}\n                action={event => handleButtonClick()}\n                variant={'secondary'}\n                shape={'circular'}\n                disabled={disabled}>\n      {up ? <ChevronRight/> : <ChevronLeft/>}\n    </IconButton>\n  )\n};\n\nconst Paginator = ({ pageCount = 1, currentPage = 1, baseUrl = '', onPageChange }: PaginatorProps) => {\n  const pages = [];\n  let from = 2;\n  let to = 4;\n  if (pageCount === 0) return null;\n\n  if (pageCount > 1) {\n    if (currentPage >= 4 && currentPage <= pageCount - 2) {\n      from = currentPage - 1;\n      to = currentPage + 1;\n    } else if (pageCount - 2 > 1 && currentPage > pageCount - 2) {\n      from = pageCount - 3;\n      to = pageCount - 1;\n    }\n    if (to > pageCount) {\n      to = pageCount;\n    }\n    for (let i = from; i <= to; i += 1) {\n      pages.push(i);\n    }\n  }\n\n  return (\n    <Container>\n      <Items>\n        <Step up={false}\n              target={`${baseUrl}/${currentPage - 1}`}\n              page={currentPage - 1}\n              disabled={currentPage === 1}\n              onPageChange={() => {\n                if (onPageChange) onPageChange(currentPage - 1);\n              }}\n              id=\"paginator-left\"/>\n        {pages.findIndex(item => item === 1) === -1 && (\n          <Item>\n            <NavLink\n              to={`${baseUrl}/1`}\n              onClick={() => {\n                if (onPageChange) onPageChange(1);\n              }}>\n                <ItemContent className={currentPage === 1 ? 'active' : ''}>\n                 <span>1</span>\n                </ItemContent>\n            </NavLink>\n          </Item>\n        )}\n        {currentPage >= 4 && pageCount > 5 && pageCount && pages.findIndex(item => item === 1) === -1 && (\n          <Dots/>\n        )}\n        {pages.map(page => (\n          <Item key={page}>\n            <NavLink\n              to={`${baseUrl}/${page}`}\n              onClick={() => {\n                if (onPageChange) onPageChange(page);\n              }}>\n                <ItemContent className={currentPage === page ? 'active' : ''}>\n                 <span>{page}</span>\n                </ItemContent>\n            </NavLink>\n          </Item>\n        ))}\n        {pageCount > 5 && currentPage <= pageCount - 3 && (\n          <Dots/>\n        )}\n        {pages.findIndex(item => item === pageCount) === -1 && pageCount !== 1 && (\n          <Item>\n            <NavLink\n              to={`${baseUrl}/${pageCount}`}\n              onClick={() => {\n                if (onPageChange) onPageChange(pageCount);\n              }}>\n                <ItemContent className={currentPage === pageCount ? 'active' : ''}>\n                 <span>{pageCount}</span>\n                </ItemContent>\n            </NavLink>\n          </Item>\n        )}\n        <Step up\n              target={`${baseUrl}/${currentPage + 1}`}\n              page={currentPage + 1}\n              disabled={currentPage === pageCount}\n              onPageChange={() => {\n                if (onPageChange) onPageChange(currentPage + 1);\n              }}\n              id=\"paginator-right\"/>\n      </Items>\n    </Container>\n  );\n};\n\nexport default Paginator;\n"],"mappings":"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"}

package/dist/Paginator/index.cjs

@@ -1,7 +1,6 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -11,6 +10,5 @@ Object.defineProperty(exports, "Paginator", {
     return _Paginator.default;
   }
 });
-
 var _Paginator = _interopRequireDefault(require("./Paginator"));
 //# sourceMappingURL=index.cjs.map

package/dist/Paginator/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","names":[],"sources":["../../src/Paginator/index.ts"],"sourcesContent":["import Paginator from './Paginator';\n\nexport { Paginator };\n"],"mappings":";;;;;;;;;;;;;;AAAA"}
+{"version":3,"file":"index.cjs","names":[],"sources":["../../src/Paginator/index.ts"],"sourcesContent":["import Paginator from './Paginator';\n\nexport { Paginator };\n"],"mappings":";;;;;;;;;;;;AAAA"}

package/dist/Paginator/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["Paginator"],"sources":["../../src/Paginator/index.ts"],"sourcesContent":["import Paginator from './Paginator';\n\nexport { Paginator };\n"],"mappings":"AAAA,OAAOA,SAAP,MAAsB,aAAtB;AAEA,SAASA,SAAT"}
+{"version":3,"file":"index.js","names":["Paginator"],"sources":["../../src/Paginator/index.ts"],"sourcesContent":["import Paginator from './Paginator';\n\nexport { Paginator };\n"],"mappings":"AAAA,OAAOA,SAAS,MAAM,aAAa;AAEnC,SAASA,SAAS"}

package/dist/Popover/Popover.cjs

@@ -1,42 +1,25 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 var _typeof = require("@babel/runtime/helpers/typeof");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
-
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
-
 var _propTypes = _interopRequireDefault(require("prop-types"));
-
 var React = _interopRequireWildcard(require("react"));
-
 var _styledComponents = _interopRequireDefault(require("styled-components"));
-
 var _ = require("..");
-
 var _Button = require("../Button");
-
 var _icons = require("../icons");
-
 var _styles = require("../styles");
-
 var _types = require("../types");
-
 var _jsxRuntime = require("react/jsx-runtime");
-
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11;
-
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-
 var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\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"])), function (props) {
   return props.size === _types.Size.Small ? '240px' : props.size === _types.Size.Large ? '480px' : '360px';
 }, function (props) {
@@ -52,45 +35,35 @@ var Container = _styledComponents.default.div(_templateObject || (_templateObjec
 }, function (props) {
   return props.showArrowPointer ? renderArrowStyles(props.position) : '';
 });
-
 var TopContainer = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  height: ", ";\n  display: flex;\n"])), function (props) {
   return props.size === _types.Size.Small ? '56px' : props.size === _types.Size.Large ? '72px' : '64px';
 });
-
 var MiddleContainer = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  margin: 8px;\n  height: ", ";\n  padding: ", ";\n  overflow-y: auto;\n  ", "\n"])), function (props) {
   return props.size === _types.Size.Small ? '104px' : props.size === _types.Size.Large ? '304px' : '208px';
 }, function (props) {
   return props.size === _types.Size.Small ? '0 8px' : props.size === _types.Size.Large ? '0 16px' : '0 12px';
 }, (0, _styles.scrollBarStyling)(_types.Size.Small));
-
 var BottomContainer = _styledComponents.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  height: ", ";  \n  display: flex;\n\n  .bottom-flex {\n    flex: 1;\n  }\n"])), function (props) {
   return props.size === _types.Size.Small ? '64px' : props.size === _types.Size.Large ? '88px' : '72px';
 });
-
 var TextContainer = _styledComponents.default.div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  flex-direction: column;\n  margin: ", ";\n  flex-grow: 1;\n"])), function (props) {
   return renderMargins(props.note, props.size);
 });
-
 var NoteContainer = _styledComponents.default.div(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n  ", "\n"])), function (props) {
   return props.size === _types.Size.Small ? (0, _styles.ComponentXXSStyling)(_.ComponentTextStyle.Regular, _.COLORS.neutral_600) : props.size === _types.Size.Large ? (0, _styles.ComponentSStyling)(_.ComponentTextStyle.Regular, _.COLORS.neutral_600) : (0, _.ComponentXSStyling)(_.ComponentTextStyle.Regular, _.COLORS.neutral_600);
 });
-
 var LabelContainer = _styledComponents.default.div(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n  ", "\n"])), function (props) {
   return props.size === _types.Size.Small ? (0, _styles.ComponentSStyling)(_.ComponentTextStyle.Bold, null) : props.size === _types.Size.Large ? (0, _styles.ComponentLStyling)(_.ComponentTextStyle.Bold, null) : (0, _styles.ComponentMStyling)(_.ComponentTextStyle.Bold, null);
 });
-
 var CloseButtonContainer = _styledComponents.default.div(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2.default)(["\n  margin: ", ";\n"])), function (props) {
   return props.size === _types.Size.Small ? '4px 16px 4px 0' : props.size === _types.Size.Large ? '12px 24px 12px 0' : '8px 20px 8px 0';
 });
-
 var TextButtonContainer = _styledComponents.default.div(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2.default)(["\n  margin: ", ";\n"])), function (props) {
   return props.size === _types.Size.Small ? '8px 0 8px 16px' : props.size === _types.Size.Large ? '16px 0 16px 24px' : '12px 0 12px 20px';
 });
-
 var IconButtonContainer = _styledComponents.default.div(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2.default)(["\n  margin: ", ";\n  display: flex;\n"])), function (props) {
   return props.size === _types.Size.Small ? '8px 16px 8px 0' : props.size === _types.Size.Large ? '16px 24px 16px 0' : '12px 20px 12px 0';
 });
-
 var Wrapper = _styledComponents.default.div(_templateObject11 || (_templateObject11 = (0, _taggedTemplateLiteral2.default)(["\n  position: relative;\n\n  .pointer-space {\n    height: ", ";\n    width: ", ";\n    position: absolute;\n\n    ", ";\n    ", ";\n\n    ", ";\n    ", ";\n  }\n\n  ", "\n"])), function (props) {
   return props.position === _types.Position.Top || props.position === _types.Position.Bottom ? '16px' : '100%';
 }, function (props) {
@@ -106,7 +79,6 @@ var Wrapper = _styledComponents.default.div(_templateObject11 || (_templateObjec
 }, function (props) {
   return props.showOnClick ? "".concat(Container, " {\n        visibility: ").concat(props.showPopover ? 'visible' : 'hidden', ";\n        opacity: ").concat(props.showPopover ? '1' : '0', ";\n    }\n    cursor: pointer;") : "&:hover {\n      ".concat(Container, " {\n        visibility: visible;\n        opacity: 1;\n      }\n    }");
 });
-
 var renderMargins = function renderMargins(isNotePresent, size) {
   if (isNotePresent) {
     return size === _types.Size.Small ? '10px 16px' : size === _types.Size.Large ? '14px 24px' : '12px 20px';
@@ -114,45 +86,37 @@ var renderMargins = function renderMargins(isNotePresent, size) {
     return size === _types.Size.Small ? '18px 16px' : size === _types.Size.Large ? '24px' : '20px';
   }
 };
-
 var renderArrowStyles = function renderArrowStyles(position) {
   if (position === _types.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);";
   }
-
   if (position === _types.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);";
   }
-
   if (position === _types.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);";
   }
-
   if (position === _types.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);";
   }
 };
-
 var Popover = function Popover(_ref) {
   var _bottomSectionProps$t, _bottomSectionProps$i;
-
   var _ref$size = _ref.size,
-      size = _ref$size === void 0 ? _types.Size.Medium : _ref$size,
-      topSectionProps = _ref.topSectionProps,
-      bottomSectionProps = _ref.bottomSectionProps,
-      mainContent = _ref.mainContent,
-      children = _ref.children,
-      position = _ref.position,
-      _ref$showOnClick = _ref.showOnClick,
-      showOnClick = _ref$showOnClick === void 0 ? false : _ref$showOnClick,
-      _ref$showArrowPointer = _ref.showArrowPointer,
-      showArrowPointer = _ref$showArrowPointer === void 0 ? false : _ref$showArrowPointer;
-
+    size = _ref$size === void 0 ? _types.Size.Medium : _ref$size,
+    topSectionProps = _ref.topSectionProps,
+    bottomSectionProps = _ref.bottomSectionProps,
+    mainContent = _ref.mainContent,
+    children = _ref.children,
+    position = _ref.position,
+    _ref$showOnClick = _ref.showOnClick,
+    showOnClick = _ref$showOnClick === void 0 ? false : _ref$showOnClick,
+    _ref$showArrowPointer = _ref.showArrowPointer,
+    showArrowPointer = _ref$showArrowPointer === void 0 ? false : _ref$showArrowPointer;
   var _React$useState = React.useState(false),
-      _React$useState2 = (0, _slicedToArray2.default)(_React$useState, 2),
-      showPopover = _React$useState2[0],
-      setShowPopover = _React$useState2[1];
-
+    _React$useState2 = (0, _slicedToArray2.default)(_React$useState, 2),
+    showPopover = _React$useState2[0],
+    setShowPopover = _React$useState2[1];
   var popoverRef = React.useRef();
   React.useEffect(function () {
     var checkIfClickedOutside = function checkIfClickedOutside(e) {
@@ -160,7 +124,6 @@ var Popover = function Popover(_ref) {
         setShowPopover(false);
       }
     };
-
     document.addEventListener('mousedown', checkIfClickedOutside);
     return function () {
       document.removeEventListener('mousedown', checkIfClickedOutside);
@@ -242,7 +205,6 @@ var Popover = function Popover(_ref) {
     })]
   });
 };
-
 Popover.propTypes = {
   topSectionProps: _propTypes.default.shape({
     text: _propTypes.default.string.isRequired,

package/dist/Popover/Popover.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Popover.cjs","names":["Container","styled","div","props","size","Size","Small","Large","COLORS","white","BOXSHADOWS","BOXSHADOW_CENTERED","Z_INDEXES","popover","position","Position","Bottom","Top","Left","Right","showArrowPointer","renderArrowStyles","TopContainer","MiddleContainer","scrollBarStyling","BottomContainer","TextContainer","renderMargins","note","NoteContainer","ComponentXXSStyling","ComponentTextStyle","Regular","neutral_600","ComponentSStyling","ComponentXSStyling","LabelContainer","Bold","ComponentLStyling","ComponentMStyling","CloseButtonContainer","TextButtonContainer","IconButtonContainer","Wrapper","showOnClick","showPopover","isNotePresent","Popover","Medium","topSectionProps","bottomSectionProps","mainContent","children","React","useState","setShowPopover","popoverRef","useRef","useEffect","checkIfClickedOutside","e","current","contains","target","document","addEventListener","removeEventListener","text","textButton","icon","action","label","iconButtons","map","iconButton"],"sources":["../../src/Popover/Popover.tsx"],"sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport { COLORS, ComponentTextStyle, ComponentXSStyling } from '..';\nimport { Button, IconButton } from '../Button';\nimport { SystemIcons } from '../icons';\nimport { BOXSHADOWS, ComponentLStyling, ComponentMStyling, ComponentSStyling, ComponentXXSStyling, scrollBarStyling, Z_INDEXES } from '../styles';\nimport { Position, Size } from '../types';\n\nconst Container = styled.div<{ size: Size; position: Position; showArrowPointer: boolean }>`\n  //height: ${(props) => (props.size === Size.Small ? '240px' : props.size === Size.Large ? '480px' : '360px')};\n  min-width: ${(props) => (props.size === Size.Small ? '320px' : props.size === Size.Large ? '640px' : '480px')};\n  border-radius: 4px;\n  background: ${COLORS.white};\n  cursor: default;\n  box-shadow: ${BOXSHADOWS.BOXSHADOW_CENTERED};\n\n  position: absolute;  \n  visibility: hidden;\n  opacity: 0;\n  z-index: ${Z_INDEXES.popover};\n\n  ${(props) => (props.position == Position.Bottom ? 'right: 50%; top: calc(100% + 16px); transform: translateX(50%);' : '')}\n  ${(props) => (props.position == Position.Top ? 'right: 50%; bottom: calc(100% + 16px); transform: translateX(50%);' : '')}\n\n  ${(props) => (props.position == Position.Left ? 'bottom: 50%; right: calc(100% + 16px); transform: translateY(50%);' : '')}\n  ${(props) => (props.position == Position.Right ? 'bottom: 50%; left: calc(100% + 16px); transform: translateY(50%);' : '')}\n\n  &::after {\n    ${(props) => (props.showArrowPointer ? renderArrowStyles(props.position) : '')}\n`;\n\nconst TopContainer = styled.div<{ size: Size }>`\n  height: ${(props) => (props.size === Size.Small ? '56px' : props.size === Size.Large ? '72px' : '64px')};\n  display: flex;\n`;\n\nconst MiddleContainer = styled.div<{ size: Size }>`\n  margin: 8px;\n  height: ${(props) => (props.size === Size.Small ? '104px' : props.size === Size.Large ? '304px' : '208px')};\n  padding: ${(props) => (props.size === Size.Small ? '0 8px' : props.size === Size.Large ? '0 16px' : '0 12px')};\n  overflow-y: auto;\n  ${scrollBarStyling(Size.Small)}\n`;\n\nconst BottomContainer = styled.div<{ size: Size }>`\n  height: ${(props) => (props.size === Size.Small ? '64px' : props.size === Size.Large ? '88px' : '72px')};  \n  display: flex;\n\n  .bottom-flex {\n    flex: 1;\n  }\n`;\n\nconst TextContainer = styled.div<{ note: boolean; size: Size }>`\n  display: flex;\n  flex-direction: column;\n  margin: ${(props) => renderMargins(props.note, props.size)};\n  flex-grow: 1;\n`;\n\nconst NoteContainer = styled.div<{ size: Size }>`\n  ${(props) =>\n    props.size === Size.Small\n      ? ComponentXXSStyling(ComponentTextStyle.Regular, COLORS.neutral_600)\n      : props.size === Size.Large\n      ? ComponentSStyling(ComponentTextStyle.Regular, COLORS.neutral_600)\n      : ComponentXSStyling(ComponentTextStyle.Regular, COLORS.neutral_600)}\n`;\n\nconst LabelContainer = styled.div<{ size: Size }>`\n  ${(props) =>\n    props.size === Size.Small\n      ? ComponentSStyling(ComponentTextStyle.Bold, null)\n      : props.size === Size.Large\n      ? ComponentLStyling(ComponentTextStyle.Bold, null)\n      : ComponentMStyling(ComponentTextStyle.Bold, null)}\n`;\n\nconst CloseButtonContainer = styled.div<{ size: Size }>`\n  margin: ${(props) => (props.size === Size.Small ? '4px 16px 4px 0' : props.size === Size.Large ? '12px 24px 12px 0' : '8px 20px 8px 0')};\n`;\n\nconst TextButtonContainer = styled.div<{ size: Size }>`\n  margin: ${(props) => (props.size === Size.Small ? '8px 0 8px 16px' : props.size === Size.Large ? '16px 0 16px 24px' : '12px 0 12px 20px')};\n`;\n\nconst IconButtonContainer = styled.div<{ size: Size }>`\n  margin: ${(props) => (props.size === Size.Small ? '8px 16px 8px 0' : props.size === Size.Large ? '16px 24px 16px 0' : '12px 20px 12px 0')};\n  display: flex;\n`;\n\nconst Wrapper = styled.div<{ position: Position; showOnClick: boolean; showPopover: boolean }>`\n  position: relative;\n\n  .pointer-space {\n    height: ${(props) => (props.position === Position.Top || props.position === Position.Bottom ? '16px' : '100%')};\n    width: ${(props) => (props.position === Position.Left || props.position === Position.Right ? '16px' : '100%')};\n    position: absolute;\n\n    ${(props) => (props.position === Position.Left ? 'right:100%; bottom: 0%' : '')};\n    ${(props) => (props.position === Position.Right ? 'left:100%; bottom: 0%' : '')};\n\n    ${(props) => (props.position === Position.Top ? 'bottom: 100%' : '')};\n    ${(props) => (props.position === Position.Bottom ? 'top: 100%' : '')};\n  }\n\n  ${(props) =>\n    props.showOnClick\n      ? `${Container} {\n        visibility: ${props.showPopover ? 'visible' : 'hidden'};\n        opacity: ${props.showPopover ? '1' : '0'};\n    }\n    cursor: pointer;`\n      : `&:hover {\n      ${Container} {\n        visibility: visible;\n        opacity: 1;\n      }\n    }`}\n`;\n\nconst renderMargins = (isNotePresent: boolean, size: Size): string => {\n  if (isNotePresent) {\n    return size === Size.Small ? '10px 16px' : size === Size.Large ? '14px 24px' : '12px 20px';\n  } else {\n    return size === Size.Small ? '18px 16px' : size === Size.Large ? '24px' : '20px';\n  }\n};\n\nconst renderArrowStyles = (position: Position) => {\n  if (position === Position.Bottom) {\n    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);`;\n  }\n\n  if (position === Position.Top) {\n    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);`;\n  }\n\n  if (position === Position.Left) {\n    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);`;\n  }\n\n  if (position === Position.Right) {\n    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);`;\n  }\n};\n\ntype topSectionProps = {\n  text: string;\n  note?: string;\n};\n\ntype actionButtonProps = {\n  icon: React.ReactNode;\n  action: () => void;\n  label?: string;\n};\n\ntype bottomSectionProps = {\n  iconButtons?: actionButtonProps[];\n  textButton?: actionButtonProps;\n};\n\ntype PopoverProps = {\n  size?: Size.Small | Size.Medium | Size.Large;\n  topSectionProps?: topSectionProps;\n  bottomSectionProps?: bottomSectionProps;\n  mainContent: React.ReactNode;\n  children: React.ReactNode;\n  position: Position.Top | Position.Bottom | Position.Right | Position.Left;\n  showOnClick: boolean;\n  showArrowPointer?: boolean;\n};\n\nconst Popover: React.FunctionComponent<PopoverProps> = ({\n  size = Size.Medium,\n  topSectionProps,\n  bottomSectionProps,\n  mainContent,\n  children,\n  position,\n  showOnClick = false,\n  showArrowPointer = false,\n}) => {\n  const [showPopover, setShowPopover] = React.useState(false);\n  const popoverRef = React.useRef<any>();\n\n  React.useEffect(() => {\n    const checkIfClickedOutside = (e: { target: any }) => {\n      if (showPopover && popoverRef.current && !popoverRef.current.contains(e.target)) {\n        setShowPopover(false);\n      }\n    };\n\n    document.addEventListener('mousedown', checkIfClickedOutside);\n\n    return () => {\n      document.removeEventListener('mousedown', checkIfClickedOutside);\n    };\n  }, [showPopover]);\n\n  return (\n    <Wrapper position={position} showOnClick={showOnClick} showPopover={showPopover}>\n      <Container size={size} position={position} ref={popoverRef} showArrowPointer={showArrowPointer}>\n        {!!topSectionProps && (\n          <TopContainer size={size}>\n            <TextContainer note={!!topSectionProps?.note} size={size}>\n              {topSectionProps?.note && <NoteContainer size={size}>{topSectionProps.note}</NoteContainer>}\n              <LabelContainer size={size}>{topSectionProps?.text}</LabelContainer>\n            </TextContainer>\n\n            {showOnClick && (\n              <CloseButtonContainer size={size} data-testid={'closeBtn'}>\n                <IconButton action={() => setShowPopover(false)} useTransparentBackground iconColor={COLORS.neutral_600} variant=\"secondary\" shape=\"circular\">\n                  <SystemIcons.Close />\n                </IconButton>\n              </CloseButtonContainer>\n            )}\n          </TopContainer>\n        )}\n\n        <MiddleContainer size={size}>{mainContent}</MiddleContainer>\n\n        {!!bottomSectionProps && (\n          <BottomContainer size={size}>\n            {!!bottomSectionProps?.textButton?.icon && (\n              <TextButtonContainer size={size} data-testid={'textBtn'}>\n                <Button size={size} variant=\"secondary\" icon={bottomSectionProps.textButton.icon} onClick={bottomSectionProps.textButton.action}>\n                  {bottomSectionProps.textButton.label}\n                </Button>\n              </TextButtonContainer>\n            )}\n\n            <div className=\"bottom-flex\" />\n\n            <IconButtonContainer size={size} data-testid={'iconBtn'}>\n              {bottomSectionProps?.iconButtons?.map((iconButton) => (\n                <IconButton action={iconButton.action} variant=\"secondary\" shape=\"circular\" useTransparentBackground>\n                  {iconButton.icon}\n                </IconButton>\n              ))}\n            </IconButtonContainer>\n          </BottomContainer>\n        )}\n      </Container>\n\n      <div onClick={() => showOnClick && setShowPopover(!showPopover)}>\n        {children}\n\n        <div className=\"pointer-space\" />\n      </div>\n    </Wrapper>\n  );\n};\n\nexport default Popover;\n"],"mappings":"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"}
+{"version":3,"file":"Popover.cjs","names":["Container","styled","div","props","size","Size","Small","Large","COLORS","white","BOXSHADOWS","BOXSHADOW_CENTERED","Z_INDEXES","popover","position","Position","Bottom","Top","Left","Right","showArrowPointer","renderArrowStyles","TopContainer","MiddleContainer","scrollBarStyling","BottomContainer","TextContainer","renderMargins","note","NoteContainer","ComponentXXSStyling","ComponentTextStyle","Regular","neutral_600","ComponentSStyling","ComponentXSStyling","LabelContainer","Bold","ComponentLStyling","ComponentMStyling","CloseButtonContainer","TextButtonContainer","IconButtonContainer","Wrapper","showOnClick","showPopover","isNotePresent","Popover","Medium","topSectionProps","bottomSectionProps","mainContent","children","React","useState","setShowPopover","popoverRef","useRef","useEffect","checkIfClickedOutside","e","current","contains","target","document","addEventListener","removeEventListener","text","textButton","icon","action","label","iconButtons","map","iconButton"],"sources":["../../src/Popover/Popover.tsx"],"sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport { COLORS, ComponentTextStyle, ComponentXSStyling } from '..';\nimport { Button, IconButton } from '../Button';\nimport { SystemIcons } from '../icons';\nimport { BOXSHADOWS, ComponentLStyling, ComponentMStyling, ComponentSStyling, ComponentXXSStyling, scrollBarStyling, Z_INDEXES } from '../styles';\nimport { Position, Size } from '../types';\n\nconst Container = styled.div<{ size: Size; position: Position; showArrowPointer: boolean }>`\n  //height: ${(props) => (props.size === Size.Small ? '240px' : props.size === Size.Large ? '480px' : '360px')};\n  min-width: ${(props) => (props.size === Size.Small ? '320px' : props.size === Size.Large ? '640px' : '480px')};\n  border-radius: 4px;\n  background: ${COLORS.white};\n  cursor: default;\n  box-shadow: ${BOXSHADOWS.BOXSHADOW_CENTERED};\n\n  position: absolute;  \n  visibility: hidden;\n  opacity: 0;\n  z-index: ${Z_INDEXES.popover};\n\n  ${(props) => (props.position == Position.Bottom ? 'right: 50%; top: calc(100% + 16px); transform: translateX(50%);' : '')}\n  ${(props) => (props.position == Position.Top ? 'right: 50%; bottom: calc(100% + 16px); transform: translateX(50%);' : '')}\n\n  ${(props) => (props.position == Position.Left ? 'bottom: 50%; right: calc(100% + 16px); transform: translateY(50%);' : '')}\n  ${(props) => (props.position == Position.Right ? 'bottom: 50%; left: calc(100% + 16px); transform: translateY(50%);' : '')}\n\n  &::after {\n    ${(props) => (props.showArrowPointer ? renderArrowStyles(props.position) : '')}\n`;\n\nconst TopContainer = styled.div<{ size: Size }>`\n  height: ${(props) => (props.size === Size.Small ? '56px' : props.size === Size.Large ? '72px' : '64px')};\n  display: flex;\n`;\n\nconst MiddleContainer = styled.div<{ size: Size }>`\n  margin: 8px;\n  height: ${(props) => (props.size === Size.Small ? '104px' : props.size === Size.Large ? '304px' : '208px')};\n  padding: ${(props) => (props.size === Size.Small ? '0 8px' : props.size === Size.Large ? '0 16px' : '0 12px')};\n  overflow-y: auto;\n  ${scrollBarStyling(Size.Small)}\n`;\n\nconst BottomContainer = styled.div<{ size: Size }>`\n  height: ${(props) => (props.size === Size.Small ? '64px' : props.size === Size.Large ? '88px' : '72px')};  \n  display: flex;\n\n  .bottom-flex {\n    flex: 1;\n  }\n`;\n\nconst TextContainer = styled.div<{ note: boolean; size: Size }>`\n  display: flex;\n  flex-direction: column;\n  margin: ${(props) => renderMargins(props.note, props.size)};\n  flex-grow: 1;\n`;\n\nconst NoteContainer = styled.div<{ size: Size }>`\n  ${(props) =>\n    props.size === Size.Small\n      ? ComponentXXSStyling(ComponentTextStyle.Regular, COLORS.neutral_600)\n      : props.size === Size.Large\n      ? ComponentSStyling(ComponentTextStyle.Regular, COLORS.neutral_600)\n      : ComponentXSStyling(ComponentTextStyle.Regular, COLORS.neutral_600)}\n`;\n\nconst LabelContainer = styled.div<{ size: Size }>`\n  ${(props) =>\n    props.size === Size.Small\n      ? ComponentSStyling(ComponentTextStyle.Bold, null)\n      : props.size === Size.Large\n      ? ComponentLStyling(ComponentTextStyle.Bold, null)\n      : ComponentMStyling(ComponentTextStyle.Bold, null)}\n`;\n\nconst CloseButtonContainer = styled.div<{ size: Size }>`\n  margin: ${(props) => (props.size === Size.Small ? '4px 16px 4px 0' : props.size === Size.Large ? '12px 24px 12px 0' : '8px 20px 8px 0')};\n`;\n\nconst TextButtonContainer = styled.div<{ size: Size }>`\n  margin: ${(props) => (props.size === Size.Small ? '8px 0 8px 16px' : props.size === Size.Large ? '16px 0 16px 24px' : '12px 0 12px 20px')};\n`;\n\nconst IconButtonContainer = styled.div<{ size: Size }>`\n  margin: ${(props) => (props.size === Size.Small ? '8px 16px 8px 0' : props.size === Size.Large ? '16px 24px 16px 0' : '12px 20px 12px 0')};\n  display: flex;\n`;\n\nconst Wrapper = styled.div<{ position: Position; showOnClick: boolean; showPopover: boolean }>`\n  position: relative;\n\n  .pointer-space {\n    height: ${(props) => (props.position === Position.Top || props.position === Position.Bottom ? '16px' : '100%')};\n    width: ${(props) => (props.position === Position.Left || props.position === Position.Right ? '16px' : '100%')};\n    position: absolute;\n\n    ${(props) => (props.position === Position.Left ? 'right:100%; bottom: 0%' : '')};\n    ${(props) => (props.position === Position.Right ? 'left:100%; bottom: 0%' : '')};\n\n    ${(props) => (props.position === Position.Top ? 'bottom: 100%' : '')};\n    ${(props) => (props.position === Position.Bottom ? 'top: 100%' : '')};\n  }\n\n  ${(props) =>\n    props.showOnClick\n      ? `${Container} {\n        visibility: ${props.showPopover ? 'visible' : 'hidden'};\n        opacity: ${props.showPopover ? '1' : '0'};\n    }\n    cursor: pointer;`\n      : `&:hover {\n      ${Container} {\n        visibility: visible;\n        opacity: 1;\n      }\n    }`}\n`;\n\nconst renderMargins = (isNotePresent: boolean, size: Size): string => {\n  if (isNotePresent) {\n    return size === Size.Small ? '10px 16px' : size === Size.Large ? '14px 24px' : '12px 20px';\n  } else {\n    return size === Size.Small ? '18px 16px' : size === Size.Large ? '24px' : '20px';\n  }\n};\n\nconst renderArrowStyles = (position: Position) => {\n  if (position === Position.Bottom) {\n    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);`;\n  }\n\n  if (position === Position.Top) {\n    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);`;\n  }\n\n  if (position === Position.Left) {\n    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);`;\n  }\n\n  if (position === Position.Right) {\n    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);`;\n  }\n};\n\ntype topSectionProps = {\n  text: string;\n  note?: string;\n};\n\ntype actionButtonProps = {\n  icon: React.ReactNode;\n  action: () => void;\n  label?: string;\n};\n\ntype bottomSectionProps = {\n  iconButtons?: actionButtonProps[];\n  textButton?: actionButtonProps;\n};\n\ntype PopoverProps = {\n  size?: Size.Small | Size.Medium | Size.Large;\n  topSectionProps?: topSectionProps;\n  bottomSectionProps?: bottomSectionProps;\n  mainContent: React.ReactNode;\n  children: React.ReactNode;\n  position: Position.Top | Position.Bottom | Position.Right | Position.Left;\n  showOnClick: boolean;\n  showArrowPointer?: boolean;\n};\n\nconst Popover: React.FunctionComponent<PopoverProps> = ({\n  size = Size.Medium,\n  topSectionProps,\n  bottomSectionProps,\n  mainContent,\n  children,\n  position,\n  showOnClick = false,\n  showArrowPointer = false,\n}) => {\n  const [showPopover, setShowPopover] = React.useState(false);\n  const popoverRef = React.useRef<any>();\n\n  React.useEffect(() => {\n    const checkIfClickedOutside = (e: { target: any }) => {\n      if (showPopover && popoverRef.current && !popoverRef.current.contains(e.target)) {\n        setShowPopover(false);\n      }\n    };\n\n    document.addEventListener('mousedown', checkIfClickedOutside);\n\n    return () => {\n      document.removeEventListener('mousedown', checkIfClickedOutside);\n    };\n  }, [showPopover]);\n\n  return (\n    <Wrapper position={position} showOnClick={showOnClick} showPopover={showPopover}>\n      <Container size={size} position={position} ref={popoverRef} showArrowPointer={showArrowPointer}>\n        {!!topSectionProps && (\n          <TopContainer size={size}>\n            <TextContainer note={!!topSectionProps?.note} size={size}>\n              {topSectionProps?.note && <NoteContainer size={size}>{topSectionProps.note}</NoteContainer>}\n              <LabelContainer size={size}>{topSectionProps?.text}</LabelContainer>\n            </TextContainer>\n\n            {showOnClick && (\n              <CloseButtonContainer size={size} data-testid={'closeBtn'}>\n                <IconButton action={() => setShowPopover(false)} useTransparentBackground iconColor={COLORS.neutral_600} variant=\"secondary\" shape=\"circular\">\n                  <SystemIcons.Close />\n                </IconButton>\n              </CloseButtonContainer>\n            )}\n          </TopContainer>\n        )}\n\n        <MiddleContainer size={size}>{mainContent}</MiddleContainer>\n\n        {!!bottomSectionProps && (\n          <BottomContainer size={size}>\n            {!!bottomSectionProps?.textButton?.icon && (\n              <TextButtonContainer size={size} data-testid={'textBtn'}>\n                <Button size={size} variant=\"secondary\" icon={bottomSectionProps.textButton.icon} onClick={bottomSectionProps.textButton.action}>\n                  {bottomSectionProps.textButton.label}\n                </Button>\n              </TextButtonContainer>\n            )}\n\n            <div className=\"bottom-flex\" />\n\n            <IconButtonContainer size={size} data-testid={'iconBtn'}>\n              {bottomSectionProps?.iconButtons?.map((iconButton) => (\n                <IconButton action={iconButton.action} variant=\"secondary\" shape=\"circular\" useTransparentBackground>\n                  {iconButton.icon}\n                </IconButton>\n              ))}\n            </IconButtonContainer>\n          </BottomContainer>\n        )}\n      </Container>\n\n      <div onClick={() => showOnClick && setShowPopover(!showPopover)}>\n        {children}\n\n        <div className=\"pointer-space\" />\n      </div>\n    </Wrapper>\n  );\n};\n\nexport default Popover;\n"],"mappings":"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"}

package/dist/Popover/Popover.d.ts

@@ -1,19 +1,19 @@
 import * as React from 'react';
 import { Position, Size } from '../types';
-declare type topSectionProps = {
+type topSectionProps = {
     text: string;
     note?: string;
 };
-declare type actionButtonProps = {
+type actionButtonProps = {
     icon: React.ReactNode;
     action: () => void;
     label?: string;
 };
-declare type bottomSectionProps = {
+type bottomSectionProps = {
     iconButtons?: actionButtonProps[];
     textButton?: actionButtonProps;
 };
-declare type PopoverProps = {
+type PopoverProps = {
     size?: Size.Small | Size.Medium | Size.Large;
     topSectionProps?: topSectionProps;
     bottomSectionProps?: bottomSectionProps;

package/dist/Popover/Popover.js

@@ -1,9 +1,7 @@
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 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 from 'styled-components';
 import { COLORS, ComponentTextStyle, ComponentXSStyling } from '..';
@@ -72,7 +70,6 @@ var Wrapper = styled.div(_templateObject11 || (_templateObject11 = _taggedTempla
 }, function (props) {
   return props.showOnClick ? "".concat(Container, " {\n        visibility: ").concat(props.showPopover ? 'visible' : 'hidden', ";\n        opacity: ").concat(props.showPopover ? '1' : '0', ";\n    }\n    cursor: pointer;") : "&:hover {\n      ".concat(Container, " {\n        visibility: visible;\n        opacity: 1;\n      }\n    }");
 });
-
 var renderMargins = function renderMargins(isNotePresent, size) {
   if (isNotePresent) {
     return size === Size.Small ? '10px 16px' : size === Size.Large ? '14px 24px' : '12px 20px';
@@ -80,45 +77,37 @@ var renderMargins = function renderMargins(isNotePresent, size) {
     return size === Size.Small ? '18px 16px' : size === Size.Large ? '24px' : '20px';
   }
 };
-
 var renderArrowStyles = function 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);";
   }
-
   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);";
   }
-
   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);";
   }
-
   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);";
   }
 };
-
 var Popover = function Popover(_ref) {
   var _bottomSectionProps$t, _bottomSectionProps$i;
-
   var _ref$size = _ref.size,
-      size = _ref$size === void 0 ? Size.Medium : _ref$size,
-      topSectionProps = _ref.topSectionProps,
-      bottomSectionProps = _ref.bottomSectionProps,
-      mainContent = _ref.mainContent,
-      children = _ref.children,
-      position = _ref.position,
-      _ref$showOnClick = _ref.showOnClick,
-      showOnClick = _ref$showOnClick === void 0 ? false : _ref$showOnClick,
-      _ref$showArrowPointer = _ref.showArrowPointer,
-      showArrowPointer = _ref$showArrowPointer === void 0 ? false : _ref$showArrowPointer;
-
+    size = _ref$size === void 0 ? Size.Medium : _ref$size,
+    topSectionProps = _ref.topSectionProps,
+    bottomSectionProps = _ref.bottomSectionProps,
+    mainContent = _ref.mainContent,
+    children = _ref.children,
+    position = _ref.position,
+    _ref$showOnClick = _ref.showOnClick,
+    showOnClick = _ref$showOnClick === void 0 ? false : _ref$showOnClick,
+    _ref$showArrowPointer = _ref.showArrowPointer,
+    showArrowPointer = _ref$showArrowPointer === void 0 ? false : _ref$showArrowPointer;
   var _React$useState = React.useState(false),
-      _React$useState2 = _slicedToArray(_React$useState, 2),
-      showPopover = _React$useState2[0],
-      setShowPopover = _React$useState2[1];
-
+    _React$useState2 = _slicedToArray(_React$useState, 2),
+    showPopover = _React$useState2[0],
+    setShowPopover = _React$useState2[1];
   var popoverRef = React.useRef();
   React.useEffect(function () {
     var checkIfClickedOutside = function checkIfClickedOutside(e) {
@@ -126,7 +115,6 @@ var Popover = function Popover(_ref) {
         setShowPopover(false);
       }
     };
-
     document.addEventListener('mousedown', checkIfClickedOutside);
     return function () {
       document.removeEventListener('mousedown', checkIfClickedOutside);
@@ -208,7 +196,6 @@ var Popover = function Popover(_ref) {
     })]
   });
 };
-
 Popover.propTypes = {
   topSectionProps: _pt.shape({
     text: _pt.string.isRequired,