@laerdal/life-react-components 1.9.8-dev.11.full → 1.9.8-dev.13

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (10) hide show
  1. package/dist/Accordion/ContentAccordion.cjs +5 -5
  2. package/dist/Accordion/ContentAccordion.cjs.map +1 -1
  3. package/dist/Accordion/ContentAccordion.js +6 -6
  4. package/dist/Accordion/ContentAccordion.js.map +1 -1
  5. package/dist/Popover/Popover.cjs +38 -24
  6. package/dist/Popover/Popover.cjs.map +1 -1
  7. package/dist/Popover/Popover.d.ts +1 -0
  8. package/dist/Popover/Popover.js +38 -24
  9. package/dist/Popover/Popover.js.map +1 -1
  10. package/package.json +1 -1
package/dist/Accordion/ContentAccordion.cjs CHANGED
@@ -43,7 +43,7 @@ var ContentAccordionItemHeaderIcon = _styledComponents.default.div(_templateObje
43
43
 
44
44
  exports.ContentAccordionItemHeaderIcon = ContentAccordionItemHeaderIcon;
45
45
 
46
- var ContentAccordionItemHeaderText = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n"])));
46
+ var ContentAccordionItemHeaderText = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)([""])));
47
47
 
48
48
  exports.ContentAccordionItemHeaderText = ContentAccordionItemHeaderText;
49
49
 
@@ -51,15 +51,15 @@ var ContentAccordionItemContent = _styledComponents.default.div(_templateObject4
51
51
 
52
52
  exports.ContentAccordionItemContent = ContentAccordionItemContent;
53
53
 
54
- var ContentAccordionItemContentHeader = _styledComponents.default.div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n"])));
54
+ var ContentAccordionItemContentHeader = _styledComponents.default.div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)([""])));
55
55
 
56
56
  exports.ContentAccordionItemContentHeader = ContentAccordionItemContentHeader;
57
57
 
58
- var ContentAccordionItemContentBody = _styledComponents.default.div(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n"])));
58
+ var ContentAccordionItemContentBody = _styledComponents.default.div(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)([""])));
59
59
 
60
60
  exports.ContentAccordionItemContentBody = ContentAccordionItemContentBody;
61
61
 
62
- var ContentAccordionItemContentFooter = _styledComponents.default.div(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n"])));
62
+ var ContentAccordionItemContentFooter = _styledComponents.default.div(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)([""])));
63
63
 
64
64
  exports.ContentAccordionItemContentFooter = ContentAccordionItemContentFooter;
65
65
 
@@ -67,7 +67,7 @@ var ContentAccordionItem = _styledComponents.default.div(_templateObject8 || (_t
67
67
 
68
68
  exports.ContentAccordionItem = ContentAccordionItem;
69
69
 
70
- var ContentAccordionWrapper = _styledComponents.default.div(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2.default)(["\n width: 100%;\n position: relative;\n\n ", ":last-child {\n border-bottom: 1px solid ", ";\n }\n\n &.small {\n min-width: 320px;\n max-width: 528px;\n\n ", " {\n gap: 8px;\n padding: 0 8px;\n ", "\n }\n\n ", " {\n padding: 0 8px 16px 40px;\n gap: 8px;\n\n ", " {\n ", "\n }\n\n ", " {\n ", "\n }\n }\n }\n\n &.medium {\n min-width: 344px;\n max-width: 584px;\n\n ", " {\n gap: 12px;\n padding: 0 12px;\n ", "\n }\n\n ", " {\n padding: 8px 12px 24px 48px;\n gap: 12px;\n\n ", " {\n ", "\n }\n\n ", " {\n ", "\n }\n\n }\n }\n\n &.large {\n min-width: 384px;\n max-width: 656px;\n\n ", " {\n gap: 16px;\n padding: 0 16px;\n ", "\n }\n\n ", " {\n padding: 16px 16px 32px 56px;\n gap: 16px;\n\n ", " {\n ", "\n }\n\n ", " {\n ", "\n }\n }\n }\n"])), ContentAccordionItem, _styles.COLORS.neutral_100, ContentAccordionItemHeader, (0, _typography.ComponentSStyling)(_typography.ComponentTextStyle.Regular, null), ContentAccordionItemContent, ContentAccordionItemContentHeader, (0, _typography.ComponentSStyling)(_typography.ComponentTextStyle.Bold, null), ContentAccordionItemContentBody, (0, _typography.ComponentSStyling)(_typography.ComponentTextStyle.Regular, null), ContentAccordionItemHeader, (0, _typography.ComponentMStyling)(_typography.ComponentTextStyle.Regular, null), ContentAccordionItemContent, ContentAccordionItemContentHeader, (0, _typography.ComponentMStyling)(_typography.ComponentTextStyle.Bold, null), ContentAccordionItemContentBody, (0, _typography.ComponentMStyling)(_typography.ComponentTextStyle.Regular, null), ContentAccordionItemHeader, (0, _typography.ComponentLStyling)(_typography.ComponentTextStyle.Regular, null), ContentAccordionItemContent, ContentAccordionItemContentHeader, (0, _typography.ComponentLStyling)(_typography.ComponentTextStyle.Bold, null), ContentAccordionItemContentBody, (0, _typography.ComponentLStyling)(_typography.ComponentTextStyle.Regular, null));
70
+ var ContentAccordionWrapper = _styledComponents.default.div(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2.default)(["\n width: 100%;\n position: relative;\n\n ", ":last-child {\n border-bottom: 1px solid ", ";\n }\n\n &.small {\n min-width: 320px;\n max-width: 528px;\n\n ", " {\n gap: 8px;\n padding: 0 8px;\n ", "\n }\n\n ", " {\n padding: 0 8px 16px 40px;\n gap: 8px;\n\n ", " {\n ", "\n }\n\n ", " {\n ", "\n }\n }\n }\n\n &.medium {\n min-width: 344px;\n max-width: 584px;\n\n ", " {\n gap: 12px;\n padding: 0 12px;\n ", "\n }\n\n ", " {\n padding: 8px 12px 24px 48px;\n gap: 12px;\n\n ", " {\n ", "\n }\n\n ", " {\n ", "\n }\n }\n }\n\n &.large {\n min-width: 384px;\n max-width: 656px;\n\n ", " {\n gap: 16px;\n padding: 0 16px;\n ", "\n }\n\n ", " {\n padding: 16px 16px 32px 56px;\n gap: 16px;\n\n ", " {\n ", "\n }\n\n ", " {\n ", "\n }\n }\n }\n"])), ContentAccordionItem, _styles.COLORS.neutral_100, ContentAccordionItemHeader, (0, _typography.ComponentSStyling)(_typography.ComponentTextStyle.Regular, null), ContentAccordionItemContent, ContentAccordionItemContentHeader, (0, _typography.ParagraphSStyling)(_typography.ParagraphTextStyle.Bold, _styles.COLORS.black), ContentAccordionItemContentBody, (0, _typography.ParagraphSStyling)(_typography.ParagraphTextStyle.Regular, _styles.COLORS.black), ContentAccordionItemHeader, (0, _typography.ComponentMStyling)(_typography.ComponentTextStyle.Regular, null), ContentAccordionItemContent, ContentAccordionItemContentHeader, (0, _typography.ParagraphMStyling)(_typography.ParagraphTextStyle.Bold, _styles.COLORS.black), ContentAccordionItemContentBody, (0, _typography.ParagraphMStyling)(_typography.ParagraphTextStyle.Regular, _styles.COLORS.black), ContentAccordionItemHeader, (0, _typography.ComponentLStyling)(_typography.ComponentTextStyle.Regular, null), ContentAccordionItemContent, ContentAccordionItemContentHeader, (0, _typography.ParagraphLStyling)(_typography.ParagraphTextStyle.Bold, _styles.COLORS.black), ContentAccordionItemContentBody, (0, _typography.ParagraphLStyling)(_typography.ParagraphTextStyle.Regular, _styles.COLORS.black));
71
71
 
72
72
  exports.ContentAccordionWrapper = ContentAccordionWrapper;
73
73
 
package/dist/Accordion/ContentAccordion.cjs.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["../../src/Accordion/ContentAccordion.tsx"],"names":["ContentAccordionItemHeader","styled","div","COLORS","neutral_600","primary_700","primary_20","Z_INDEXES","hover","focusStyles","primary_800","primary_100","active","ContentAccordionItemHeaderIcon","ContentAccordionItemHeaderText","ContentAccordionItemContent","ContentAccordionItemContentHeader","ContentAccordionItemContentBody","ContentAccordionItemContentFooter","ContentAccordionItem","neutral_100","neutral_300","ContentAccordionWrapper","ComponentTextStyle","Regular","Bold","ContentAccordion","props","React","useState","opened","setOpened","useEffect","multi","items","filter","item","map","key","find","onItemClick","disabled","includes","renderItem","isActive","concat","undefined","defaultOnMouseDownHandler","event","title","header","body","footer","size","Size","Medium"],"mappings":"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","sourcesContent":["import React from 'react'\nimport styled from 'styled-components';\nimport {Size} from '../types';\nimport {SystemIcons} from '../icons';\nimport {ComponentLStyling, ComponentMStyling, ComponentSStyling, ComponentTextStyle} from '../styles/typography';\nimport {COLORS, focusStyles} from '../styles';\nimport {Z_INDEXES} from '../styles/z-indexes';\nimport {defaultOnMouseDownHandler} from '../common';\n\n\nexport const ContentAccordionItemHeader = styled.div`\n display: flex;\n align-items: center;\n box-sizing: border-box;\n min-height: 48px;\n color: ${COLORS.neutral_600};\n cursor: pointer;\n\n &:hover {\n color: ${COLORS.primary_700};\n background-color: ${COLORS.primary_20};\n z-index: ${Z_INDEXES.hover};\n }\n\n &:focus {\n ${focusStyles}\n }\n\n &:active {\n color: ${COLORS.primary_800};\n background-color: ${COLORS.primary_100};\n z-index: ${Z_INDEXES.active};\n }\n`;\n\nexport const ContentAccordionItemHeaderIcon = styled.div`\n width: 24px;\n height: 24px;\n\n svg {\n width: 24px;\n height: 24px;\n }\n`;\n\nexport const ContentAccordionItemHeaderText = styled.div`\n`;\n\nexport const ContentAccordionItemContent = styled.div`\n display: none;\n flex-direction: column;\n`;\n\nexport const ContentAccordionItemContentHeader = styled.div`\n`;\n\nexport const ContentAccordionItemContentBody = styled.div`\n`;\n\nexport const ContentAccordionItemContentFooter = styled.div`\n`;\n\nexport const ContentAccordionItem = styled.div`\n display: flex;\n flex-direction: column;\n border-top: 1px solid ${COLORS.neutral_100};\n\n &.active {\n ${ContentAccordionItemContent} {\n display: flex;\n }\n }\n\n &.disabled {\n ${ContentAccordionItemHeader} {\n color: ${COLORS.neutral_300};\n cursor: not-allowed;\n pointer-events: none;\n }\n }\n`;\n\nexport const ContentAccordionWrapper = styled.div`\n width: 100%;\n position: relative;\n\n ${ContentAccordionItem}:last-child {\n border-bottom: 1px solid ${COLORS.neutral_100};\n }\n\n &.small {\n min-width: 320px;\n max-width: 528px;\n\n ${ContentAccordionItemHeader} {\n gap: 8px;\n padding: 0 8px;\n ${ComponentSStyling(ComponentTextStyle.Regular, null)}\n }\n\n ${ContentAccordionItemContent} {\n padding: 0 8px 16px 40px;\n gap: 8px;\n\n ${ContentAccordionItemContentHeader} {\n ${ComponentSStyling(ComponentTextStyle.Bold, null)}\n }\n\n ${ContentAccordionItemContentBody} {\n ${ComponentSStyling(ComponentTextStyle.Regular, null)}\n }\n }\n }\n\n &.medium {\n min-width: 344px;\n max-width: 584px;\n\n ${ContentAccordionItemHeader} {\n gap: 12px;\n padding: 0 12px;\n ${ComponentMStyling(ComponentTextStyle.Regular, null)}\n }\n\n ${ContentAccordionItemContent} {\n padding: 8px 12px 24px 48px;\n gap: 12px;\n\n ${ContentAccordionItemContentHeader} {\n ${ComponentMStyling(ComponentTextStyle.Bold, null)}\n }\n\n ${ContentAccordionItemContentBody} {\n ${ComponentMStyling(ComponentTextStyle.Regular, null)}\n }\n\n }\n }\n\n &.large {\n min-width: 384px;\n max-width: 656px;\n\n ${ContentAccordionItemHeader} {\n gap: 16px;\n padding: 0 16px;\n ${ComponentLStyling(ComponentTextStyle.Regular, null)}\n }\n\n ${ContentAccordionItemContent} {\n padding: 16px 16px 32px 56px;\n gap: 16px;\n\n ${ContentAccordionItemContentHeader} {\n ${ComponentLStyling(ComponentTextStyle.Bold, null)}\n }\n\n ${ContentAccordionItemContentBody} {\n ${ComponentLStyling(ComponentTextStyle.Regular, null)}\n }\n }\n }\n`;\n\nexport interface ContentAccordionItem {\n key: string;\n title: string;\n header?: string;\n body: any;\n footer?: any;\n disabled?: boolean;\n active?: boolean;\n}\n\nexport interface ContentAccordionProps {\n items: ContentAccordionItem[];\n multi?: boolean;\n size?: Size.Small | Size.Medium | Size.Large;\n}\n\nexport const ContentAccordion: React.FunctionComponent<ContentAccordionProps> = (props) => {\n\n const [opened, setOpened] = React.useState<string[]>([]);\n\n React.useEffect(() => {\n if (props.multi) {\n setOpened(props.items.filter(item => item.active).map(item => item.key));\n } else {\n let active = props.items.find(item => !!item.active)?.key;\n if (active) {\n setOpened([active]);\n }\n }\n }, [props.items, props.multi]);\n\n const onItemClick = (item: ContentAccordionItem) => {\n if (item.disabled) return;\n if (opened.includes(item.key)) {\n setOpened(opened.filter(key => key !== item.key));\n } else {\n if (props.multi) {\n setOpened([...opened, item.key]);\n } else {\n setOpened([item.key]);\n }\n }\n }\n\n const renderItem = (item: ContentAccordionItem) => {\n const isActive = opened.includes(item.key);\n\n return (\n <ContentAccordionItem key={item.key}\n id={`item_${item.key}`}\n className={''.concat(isActive ? ' active' : '').concat(item.disabled ? ' disabled' : '')}>\n <ContentAccordionItemHeader tabIndex={!item.disabled ? 0 : undefined}\n onMouseDown={defaultOnMouseDownHandler}\n onClick={() => !item.disabled && onItemClick(item)}\n onKeyPress={event => event.key === 'Enter' && onItemClick(item)}>\n <ContentAccordionItemHeaderIcon>\n {\n props.multi\n ? isActive\n ? <SystemIcons.Minus/>\n : <SystemIcons.Plus/>\n : isActive\n ? <SystemIcons.ChevronDown/>\n : <SystemIcons.ChevronRight/>\n }\n </ContentAccordionItemHeaderIcon>\n <ContentAccordionItemHeaderText>\n {item.title}\n </ContentAccordionItemHeaderText>\n </ContentAccordionItemHeader>\n <ContentAccordionItemContent>\n {\n item.header &&\n <ContentAccordionItemContentHeader>\n {item.header}\n </ContentAccordionItemContentHeader>\n }\n <ContentAccordionItemContentBody>\n {item.body}\n </ContentAccordionItemContentBody>\n {\n item.footer &&\n <ContentAccordionItemContentFooter>\n {item.footer}\n </ContentAccordionItemContentFooter>\n }\n </ContentAccordionItemContent>\n </ContentAccordionItem>\n );\n }\n\n return (\n <ContentAccordionWrapper className={''.concat(` ${props.size ?? Size.Medium}`)}>\n {props.items.map(item => renderItem(item))}\n </ContentAccordionWrapper>\n );\n};\n\nexport default ContentAccordion;\n"],"file":"ContentAccordion.cjs"}
1
+ {"version":3,"sources":["../../src/Accordion/ContentAccordion.tsx"],"names":["ContentAccordionItemHeader","styled","div","COLORS","neutral_600","primary_700","primary_20","Z_INDEXES","hover","focusStyles","primary_800","primary_100","active","ContentAccordionItemHeaderIcon","ContentAccordionItemHeaderText","ContentAccordionItemContent","ContentAccordionItemContentHeader","ContentAccordionItemContentBody","ContentAccordionItemContentFooter","ContentAccordionItem","neutral_100","neutral_300","ContentAccordionWrapper","ComponentTextStyle","Regular","ParagraphTextStyle","Bold","black","ContentAccordion","props","React","useState","opened","setOpened","useEffect","multi","items","filter","item","map","key","find","onItemClick","disabled","includes","renderItem","isActive","concat","undefined","defaultOnMouseDownHandler","event","title","header","body","footer","size","Size","Medium"],"mappings":"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","sourcesContent":["import React from 'react';\nimport styled from 'styled-components';\nimport { Size } from '../types';\nimport { SystemIcons } from '../icons';\nimport {\n ComponentLStyling,\n ComponentMStyling,\n ComponentSStyling,\n ComponentTextStyle,\n ParagraphLStyling,\n ParagraphMStyling,\n ParagraphSStyling,\n ParagraphTextStyle,\n} from '../styles/typography';\nimport { COLORS, focusStyles } from '../styles';\nimport { Z_INDEXES } from '../styles/z-indexes';\nimport { defaultOnMouseDownHandler } from '../common';\n\nexport const ContentAccordionItemHeader = styled.div`\n display: flex;\n align-items: center;\n box-sizing: border-box;\n min-height: 48px;\n color: ${COLORS.neutral_600};\n cursor: pointer;\n\n &:hover {\n color: ${COLORS.primary_700};\n background-color: ${COLORS.primary_20};\n z-index: ${Z_INDEXES.hover};\n }\n\n &:focus {\n ${focusStyles}\n }\n\n &:active {\n color: ${COLORS.primary_800};\n background-color: ${COLORS.primary_100};\n z-index: ${Z_INDEXES.active};\n }\n`;\n\nexport const ContentAccordionItemHeaderIcon = styled.div`\n width: 24px;\n height: 24px;\n\n svg {\n width: 24px;\n height: 24px;\n }\n`;\n\nexport const ContentAccordionItemHeaderText = styled.div``;\n\nexport const ContentAccordionItemContent = styled.div`\n display: none;\n flex-direction: column;\n`;\n\nexport const ContentAccordionItemContentHeader = styled.div``;\n\nexport const ContentAccordionItemContentBody = styled.div``;\n\nexport const ContentAccordionItemContentFooter = styled.div``;\n\nexport const ContentAccordionItem = styled.div`\n display: flex;\n flex-direction: column;\n border-top: 1px solid ${COLORS.neutral_100};\n\n &.active {\n ${ContentAccordionItemContent} {\n display: flex;\n }\n }\n\n &.disabled {\n ${ContentAccordionItemHeader} {\n color: ${COLORS.neutral_300};\n cursor: not-allowed;\n pointer-events: none;\n }\n }\n`;\n\nexport const ContentAccordionWrapper = styled.div`\n width: 100%;\n position: relative;\n\n ${ContentAccordionItem}:last-child {\n border-bottom: 1px solid ${COLORS.neutral_100};\n }\n\n &.small {\n min-width: 320px;\n max-width: 528px;\n\n ${ContentAccordionItemHeader} {\n gap: 8px;\n padding: 0 8px;\n ${ComponentSStyling(ComponentTextStyle.Regular, null)}\n }\n\n ${ContentAccordionItemContent} {\n padding: 0 8px 16px 40px;\n gap: 8px;\n\n ${ContentAccordionItemContentHeader} {\n ${ParagraphSStyling(ParagraphTextStyle.Bold, COLORS.black)}\n }\n\n ${ContentAccordionItemContentBody} {\n ${ParagraphSStyling(ParagraphTextStyle.Regular, COLORS.black)}\n }\n }\n }\n\n &.medium {\n min-width: 344px;\n max-width: 584px;\n\n ${ContentAccordionItemHeader} {\n gap: 12px;\n padding: 0 12px;\n ${ComponentMStyling(ComponentTextStyle.Regular, null)}\n }\n\n ${ContentAccordionItemContent} {\n padding: 8px 12px 24px 48px;\n gap: 12px;\n\n ${ContentAccordionItemContentHeader} {\n ${ParagraphMStyling(ParagraphTextStyle.Bold, COLORS.black)}\n }\n\n ${ContentAccordionItemContentBody} {\n ${ParagraphMStyling(ParagraphTextStyle.Regular, COLORS.black)}\n }\n }\n }\n\n &.large {\n min-width: 384px;\n max-width: 656px;\n\n ${ContentAccordionItemHeader} {\n gap: 16px;\n padding: 0 16px;\n ${ComponentLStyling(ComponentTextStyle.Regular, null)}\n }\n\n ${ContentAccordionItemContent} {\n padding: 16px 16px 32px 56px;\n gap: 16px;\n\n ${ContentAccordionItemContentHeader} {\n ${ParagraphLStyling(ParagraphTextStyle.Bold, COLORS.black)}\n }\n\n ${ContentAccordionItemContentBody} {\n ${ParagraphLStyling(ParagraphTextStyle.Regular, COLORS.black)}\n }\n }\n }\n`;\n\nexport interface ContentAccordionItem {\n key: string;\n title: string;\n header?: string;\n body: any;\n footer?: any;\n disabled?: boolean;\n active?: boolean;\n}\n\nexport interface ContentAccordionProps {\n items: ContentAccordionItem[];\n multi?: boolean;\n size?: Size.Small | Size.Medium | Size.Large;\n}\n\nexport const ContentAccordion: React.FunctionComponent<ContentAccordionProps> = (props) => {\n const [opened, setOpened] = React.useState<string[]>([]);\n\n React.useEffect(() => {\n if (props.multi) {\n setOpened(props.items.filter((item) => item.active).map((item) => item.key));\n } else {\n let active = props.items.find((item) => !!item.active)?.key;\n if (active) {\n setOpened([active]);\n }\n }\n }, [props.items, props.multi]);\n\n const onItemClick = (item: ContentAccordionItem) => {\n if (item.disabled) return;\n if (opened.includes(item.key)) {\n setOpened(opened.filter((key) => key !== item.key));\n } else {\n if (props.multi) {\n setOpened([...opened, item.key]);\n } else {\n setOpened([item.key]);\n }\n }\n };\n\n const renderItem = (item: ContentAccordionItem) => {\n const isActive = opened.includes(item.key);\n\n return (\n <ContentAccordionItem key={item.key} id={`item_${item.key}`} className={''.concat(isActive ? ' active' : '').concat(item.disabled ? ' disabled' : '')}>\n <ContentAccordionItemHeader\n tabIndex={!item.disabled ? 0 : undefined}\n onMouseDown={defaultOnMouseDownHandler}\n onClick={() => !item.disabled && onItemClick(item)}\n onKeyPress={(event) => event.key === 'Enter' && onItemClick(item)}>\n <ContentAccordionItemHeaderIcon>\n {props.multi ? isActive ? <SystemIcons.Minus /> : <SystemIcons.Plus /> : isActive ? <SystemIcons.ChevronDown /> : <SystemIcons.ChevronRight />}\n </ContentAccordionItemHeaderIcon>\n <ContentAccordionItemHeaderText>{item.title}</ContentAccordionItemHeaderText>\n </ContentAccordionItemHeader>\n <ContentAccordionItemContent>\n {item.header && <ContentAccordionItemContentHeader>{item.header}</ContentAccordionItemContentHeader>}\n <ContentAccordionItemContentBody>{item.body}</ContentAccordionItemContentBody>\n {item.footer && <ContentAccordionItemContentFooter>{item.footer}</ContentAccordionItemContentFooter>}\n </ContentAccordionItemContent>\n </ContentAccordionItem>\n );\n };\n\n return <ContentAccordionWrapper className={''.concat(` ${props.size ?? Size.Medium}`)}>{props.items.map((item) => renderItem(item))}</ContentAccordionWrapper>;\n};\n\nexport default ContentAccordion;\n"],"file":"ContentAccordion.cjs"}
package/dist/Accordion/ContentAccordion.js CHANGED
@@ -9,7 +9,7 @@ import React from 'react';
9
9
  import styled from 'styled-components';
10
10
  import { Size } from '../types';
11
11
  import { SystemIcons } from '../icons';
12
- import { ComponentLStyling, ComponentMStyling, ComponentSStyling, ComponentTextStyle } from '../styles/typography';
12
+ import { ComponentLStyling, ComponentMStyling, ComponentSStyling, ComponentTextStyle, ParagraphLStyling, ParagraphMStyling, ParagraphSStyling, ParagraphTextStyle } from '../styles/typography';
13
13
  import { COLORS, focusStyles } from '../styles';
14
14
  import { Z_INDEXES } from '../styles/z-indexes';
15
15
  import { defaultOnMouseDownHandler } from '../common';
@@ -17,13 +17,13 @@ import { jsx as _jsx } from "react/jsx-runtime";
17
17
  import { jsxs as _jsxs } from "react/jsx-runtime";
18
18
  export var ContentAccordionItemHeader = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n display: flex;\n align-items: center;\n box-sizing: border-box;\n min-height: 48px;\n color: ", ";\n cursor: pointer;\n\n &:hover {\n color: ", ";\n background-color: ", ";\n z-index: ", ";\n }\n\n &:focus {\n ", "\n }\n\n &:active {\n color: ", ";\n background-color: ", ";\n z-index: ", ";\n }\n"])), COLORS.neutral_600, COLORS.primary_700, COLORS.primary_20, Z_INDEXES.hover, focusStyles, COLORS.primary_800, COLORS.primary_100, Z_INDEXES.active);
19
19
  export var ContentAccordionItemHeaderIcon = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n width: 24px;\n height: 24px;\n\n svg {\n width: 24px;\n height: 24px;\n }\n"])));
20
- export var ContentAccordionItemHeaderText = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n"])));
20
+ export var ContentAccordionItemHeaderText = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral([""])));
21
21
  export var ContentAccordionItemContent = styled.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n display: none;\n flex-direction: column;\n"])));
22
- export var ContentAccordionItemContentHeader = styled.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n"])));
23
- export var ContentAccordionItemContentBody = styled.div(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n"])));
24
- export var ContentAccordionItemContentFooter = styled.div(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n"])));
22
+ export var ContentAccordionItemContentHeader = styled.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral([""])));
23
+ export var ContentAccordionItemContentBody = styled.div(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral([""])));
24
+ export var ContentAccordionItemContentFooter = styled.div(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral([""])));
25
25
  export var ContentAccordionItem = styled.div(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n display: flex;\n flex-direction: column;\n border-top: 1px solid ", ";\n\n &.active {\n ", " {\n display: flex;\n }\n }\n\n &.disabled {\n ", " {\n color: ", ";\n cursor: not-allowed;\n pointer-events: none;\n }\n }\n"])), COLORS.neutral_100, ContentAccordionItemContent, ContentAccordionItemHeader, COLORS.neutral_300);
26
- export var ContentAccordionWrapper = styled.div(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n width: 100%;\n position: relative;\n\n ", ":last-child {\n border-bottom: 1px solid ", ";\n }\n\n &.small {\n min-width: 320px;\n max-width: 528px;\n\n ", " {\n gap: 8px;\n padding: 0 8px;\n ", "\n }\n\n ", " {\n padding: 0 8px 16px 40px;\n gap: 8px;\n\n ", " {\n ", "\n }\n\n ", " {\n ", "\n }\n }\n }\n\n &.medium {\n min-width: 344px;\n max-width: 584px;\n\n ", " {\n gap: 12px;\n padding: 0 12px;\n ", "\n }\n\n ", " {\n padding: 8px 12px 24px 48px;\n gap: 12px;\n\n ", " {\n ", "\n }\n\n ", " {\n ", "\n }\n\n }\n }\n\n &.large {\n min-width: 384px;\n max-width: 656px;\n\n ", " {\n gap: 16px;\n padding: 0 16px;\n ", "\n }\n\n ", " {\n padding: 16px 16px 32px 56px;\n gap: 16px;\n\n ", " {\n ", "\n }\n\n ", " {\n ", "\n }\n }\n }\n"])), ContentAccordionItem, COLORS.neutral_100, ContentAccordionItemHeader, ComponentSStyling(ComponentTextStyle.Regular, null), ContentAccordionItemContent, ContentAccordionItemContentHeader, ComponentSStyling(ComponentTextStyle.Bold, null), ContentAccordionItemContentBody, ComponentSStyling(ComponentTextStyle.Regular, null), ContentAccordionItemHeader, ComponentMStyling(ComponentTextStyle.Regular, null), ContentAccordionItemContent, ContentAccordionItemContentHeader, ComponentMStyling(ComponentTextStyle.Bold, null), ContentAccordionItemContentBody, ComponentMStyling(ComponentTextStyle.Regular, null), ContentAccordionItemHeader, ComponentLStyling(ComponentTextStyle.Regular, null), ContentAccordionItemContent, ContentAccordionItemContentHeader, ComponentLStyling(ComponentTextStyle.Bold, null), ContentAccordionItemContentBody, ComponentLStyling(ComponentTextStyle.Regular, null));
26
+ export var ContentAccordionWrapper = styled.div(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n width: 100%;\n position: relative;\n\n ", ":last-child {\n border-bottom: 1px solid ", ";\n }\n\n &.small {\n min-width: 320px;\n max-width: 528px;\n\n ", " {\n gap: 8px;\n padding: 0 8px;\n ", "\n }\n\n ", " {\n padding: 0 8px 16px 40px;\n gap: 8px;\n\n ", " {\n ", "\n }\n\n ", " {\n ", "\n }\n }\n }\n\n &.medium {\n min-width: 344px;\n max-width: 584px;\n\n ", " {\n gap: 12px;\n padding: 0 12px;\n ", "\n }\n\n ", " {\n padding: 8px 12px 24px 48px;\n gap: 12px;\n\n ", " {\n ", "\n }\n\n ", " {\n ", "\n }\n }\n }\n\n &.large {\n min-width: 384px;\n max-width: 656px;\n\n ", " {\n gap: 16px;\n padding: 0 16px;\n ", "\n }\n\n ", " {\n padding: 16px 16px 32px 56px;\n gap: 16px;\n\n ", " {\n ", "\n }\n\n ", " {\n ", "\n }\n }\n }\n"])), ContentAccordionItem, COLORS.neutral_100, ContentAccordionItemHeader, ComponentSStyling(ComponentTextStyle.Regular, null), ContentAccordionItemContent, ContentAccordionItemContentHeader, ParagraphSStyling(ParagraphTextStyle.Bold, COLORS.black), ContentAccordionItemContentBody, ParagraphSStyling(ParagraphTextStyle.Regular, COLORS.black), ContentAccordionItemHeader, ComponentMStyling(ComponentTextStyle.Regular, null), ContentAccordionItemContent, ContentAccordionItemContentHeader, ParagraphMStyling(ParagraphTextStyle.Bold, COLORS.black), ContentAccordionItemContentBody, ParagraphMStyling(ParagraphTextStyle.Regular, COLORS.black), ContentAccordionItemHeader, ComponentLStyling(ComponentTextStyle.Regular, null), ContentAccordionItemContent, ContentAccordionItemContentHeader, ParagraphLStyling(ParagraphTextStyle.Bold, COLORS.black), ContentAccordionItemContentBody, ParagraphLStyling(ParagraphTextStyle.Regular, COLORS.black));
27
27
  export var ContentAccordion = function ContentAccordion(props) {
28
28
  var _props$size;
29
29
 
package/dist/Accordion/ContentAccordion.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["../../src/Accordion/ContentAccordion.tsx"],"names":["React","styled","Size","SystemIcons","ComponentLStyling","ComponentMStyling","ComponentSStyling","ComponentTextStyle","COLORS","focusStyles","Z_INDEXES","defaultOnMouseDownHandler","ContentAccordionItemHeader","div","neutral_600","primary_700","primary_20","hover","primary_800","primary_100","active","ContentAccordionItemHeaderIcon","ContentAccordionItemHeaderText","ContentAccordionItemContent","ContentAccordionItemContentHeader","ContentAccordionItemContentBody","ContentAccordionItemContentFooter","ContentAccordionItem","neutral_100","neutral_300","ContentAccordionWrapper","Regular","Bold","ContentAccordion","props","useState","opened","setOpened","useEffect","multi","items","filter","item","map","key","find","onItemClick","disabled","includes","renderItem","isActive","concat","undefined","event","title","header","body","footer","size","Medium"],"mappings":";;;;;;;AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,OAAOC,MAAP,MAAmB,mBAAnB;AACA,SAAQC,IAAR,QAAmB,UAAnB;AACA,SAAQC,WAAR,QAA0B,UAA1B;AACA,SAAQC,iBAAR,EAA2BC,iBAA3B,EAA8CC,iBAA9C,EAAiEC,kBAAjE,QAA0F,sBAA1F;AACA,SAAQC,MAAR,EAAgBC,WAAhB,QAAkC,WAAlC;AACA,SAAQC,SAAR,QAAwB,qBAAxB;AACA,SAAQC,yBAAR,QAAwC,WAAxC;;;AAGA,OAAO,IAAMC,0BAA0B,GAAGX,MAAM,CAACY,GAAV,mZAK5BL,MAAM,CAACM,WALqB,EAS1BN,MAAM,CAACO,WATmB,EAUfP,MAAM,CAACQ,UAVQ,EAWxBN,SAAS,CAACO,KAXc,EAejCR,WAfiC,EAmB1BD,MAAM,CAACU,WAnBmB,EAoBfV,MAAM,CAACW,WApBQ,EAqBxBT,SAAS,CAACU,MArBc,CAAhC;AAyBP,OAAO,IAAMC,8BAA8B,GAAGpB,MAAM,CAACY,GAAV,+JAApC;AAUP,OAAO,IAAMS,8BAA8B,GAAGrB,MAAM,CAACY,GAAV,yEAApC;AAGP,OAAO,IAAMU,2BAA2B,GAAGtB,MAAM,CAACY,GAAV,sHAAjC;AAKP,OAAO,IAAMW,iCAAiC,GAAGvB,MAAM,CAACY,GAAV,yEAAvC;AAGP,OAAO,IAAMY,+BAA+B,GAAGxB,MAAM,CAACY,GAAV,yEAArC;AAGP,OAAO,IAAMa,iCAAiC,GAAGzB,MAAM,CAACY,GAAV,yEAAvC;AAGP,OAAO,IAAMc,oBAAoB,GAAG1B,MAAM,CAACY,GAAV,2UAGPL,MAAM,CAACoB,WAHA,EAM3BL,2BAN2B,EAY3BX,0BAZ2B,EAalBJ,MAAM,CAACqB,WAbW,CAA1B;AAoBP,OAAO,IAAMC,uBAAuB,GAAG7B,MAAM,CAACY,GAAV,iiCAIhCc,oBAJgC,EAKLnB,MAAM,CAACoB,WALF,EAY9BhB,0BAZ8B,EAe5BN,iBAAiB,CAACC,kBAAkB,CAACwB,OAApB,EAA6B,IAA7B,CAfW,EAkB9BR,2BAlB8B,EAsB5BC,iCAtB4B,EAuB1BlB,iBAAiB,CAACC,kBAAkB,CAACyB,IAApB,EAA0B,IAA1B,CAvBS,EA0B5BP,+BA1B4B,EA2B1BnB,iBAAiB,CAACC,kBAAkB,CAACwB,OAApB,EAA6B,IAA7B,CA3BS,EAoC9BnB,0BApC8B,EAuC5BP,iBAAiB,CAACE,kBAAkB,CAACwB,OAApB,EAA6B,IAA7B,CAvCW,EA0C9BR,2BA1C8B,EA8C5BC,iCA9C4B,EA+C1BnB,iBAAiB,CAACE,kBAAkB,CAACyB,IAApB,EAA0B,IAA1B,CA/CS,EAkD5BP,+BAlD4B,EAmD1BpB,iBAAiB,CAACE,kBAAkB,CAACwB,OAApB,EAA6B,IAA7B,CAnDS,EA6D9BnB,0BA7D8B,EAgE5BR,iBAAiB,CAACG,kBAAkB,CAACwB,OAApB,EAA6B,IAA7B,CAhEW,EAmE9BR,2BAnE8B,EAuE5BC,iCAvE4B,EAwE1BpB,iBAAiB,CAACG,kBAAkB,CAACyB,IAApB,EAA0B,IAA1B,CAxES,EA2E5BP,+BA3E4B,EA4E1BrB,iBAAiB,CAACG,kBAAkB,CAACwB,OAApB,EAA6B,IAA7B,CA5ES,CAA7B;AAkGP,OAAO,IAAME,gBAAgE,GAAG,SAAnEA,gBAAmE,CAACC,KAAD,EAAW;AAAA;;AAEzF,wBAA4BlC,KAAK,CAACmC,QAAN,CAAyB,EAAzB,CAA5B;AAAA;AAAA,MAAOC,MAAP;AAAA,MAAeC,SAAf;;AAEArC,EAAAA,KAAK,CAACsC,SAAN,CAAgB,YAAM;AACpB,QAAIJ,KAAK,CAACK,KAAV,EAAiB;AACfF,MAAAA,SAAS,CAACH,KAAK,CAACM,KAAN,CAAYC,MAAZ,CAAmB,UAAAC,IAAI;AAAA,eAAIA,IAAI,CAACtB,MAAT;AAAA,OAAvB,EAAwCuB,GAAxC,CAA4C,UAAAD,IAAI;AAAA,eAAIA,IAAI,CAACE,GAAT;AAAA,OAAhD,CAAD,CAAT;AACD,KAFD,MAEO;AAAA;;AACL,UAAIxB,MAAM,wBAAGc,KAAK,CAACM,KAAN,CAAYK,IAAZ,CAAiB,UAAAH,IAAI;AAAA,eAAI,CAAC,CAACA,IAAI,CAACtB,MAAX;AAAA,OAArB,CAAH,sDAAG,kBAAyCwB,GAAtD;;AACA,UAAIxB,MAAJ,EAAY;AACViB,QAAAA,SAAS,CAAC,CAACjB,MAAD,CAAD,CAAT;AACD;AACF;AACF,GATD,EASG,CAACc,KAAK,CAACM,KAAP,EAAcN,KAAK,CAACK,KAApB,CATH;;AAWA,MAAMO,WAAW,GAAG,SAAdA,WAAc,CAACJ,IAAD,EAAgC;AAClD,QAAIA,IAAI,CAACK,QAAT,EAAmB;;AACnB,QAAIX,MAAM,CAACY,QAAP,CAAgBN,IAAI,CAACE,GAArB,CAAJ,EAA+B;AAC7BP,MAAAA,SAAS,CAACD,MAAM,CAACK,MAAP,CAAc,UAAAG,GAAG;AAAA,eAAIA,GAAG,KAAKF,IAAI,CAACE,GAAjB;AAAA,OAAjB,CAAD,CAAT;AACD,KAFD,MAEO;AACL,UAAIV,KAAK,CAACK,KAAV,EAAiB;AACfF,QAAAA,SAAS,8BAAKD,MAAL,IAAaM,IAAI,CAACE,GAAlB,GAAT;AACD,OAFD,MAEO;AACLP,QAAAA,SAAS,CAAC,CAACK,IAAI,CAACE,GAAN,CAAD,CAAT;AACD;AACF;AACF,GAXD;;AAaA,MAAMK,UAAU,GAAG,SAAbA,UAAa,CAACP,IAAD,EAAgC;AACjD,QAAMQ,QAAQ,GAAGd,MAAM,CAACY,QAAP,CAAgBN,IAAI,CAACE,GAArB,CAAjB;AAEA,wBACE,MAAC,oBAAD;AACsB,MAAA,EAAE,iBAAUF,IAAI,CAACE,GAAf,CADxB;AAEsB,MAAA,SAAS,EAAE,GAAGO,MAAH,CAAUD,QAAQ,GAAG,SAAH,GAAe,EAAjC,EAAqCC,MAArC,CAA4CT,IAAI,CAACK,QAAL,GAAgB,WAAhB,GAA8B,EAA1E,CAFjC;AAAA,8BAGE,MAAC,0BAAD;AAA4B,QAAA,QAAQ,EAAE,CAACL,IAAI,CAACK,QAAN,GAAiB,CAAjB,GAAqBK,SAA3D;AAC4B,QAAA,WAAW,EAAEzC,yBADzC;AAE4B,QAAA,OAAO,EAAE;AAAA,iBAAM,CAAC+B,IAAI,CAACK,QAAN,IAAkBD,WAAW,CAACJ,IAAD,CAAnC;AAAA,SAFrC;AAG4B,QAAA,UAAU,EAAE,oBAAAW,KAAK;AAAA,iBAAIA,KAAK,CAACT,GAAN,KAAc,OAAd,IAAyBE,WAAW,CAACJ,IAAD,CAAxC;AAAA,SAH7C;AAAA,gCAIE,KAAC,8BAAD;AAAA,oBAEIR,KAAK,CAACK,KAAN,GACIW,QAAQ,gBACN,KAAC,WAAD,CAAa,KAAb,KADM,gBAEN,KAAC,WAAD,CAAa,IAAb,KAHN,GAIIA,QAAQ,gBACN,KAAC,WAAD,CAAa,WAAb,KADM,gBAEN,KAAC,WAAD,CAAa,YAAb;AARV,UAJF,eAeE,KAAC,8BAAD;AAAA,oBACGR,IAAI,CAACY;AADR,UAfF;AAAA,QAHF,eAsBE,MAAC,2BAAD;AAAA,mBAEIZ,IAAI,CAACa,MAAL,iBACA,KAAC,iCAAD;AAAA,oBACGb,IAAI,CAACa;AADR,UAHJ,eAOE,KAAC,+BAAD;AAAA,oBACGb,IAAI,CAACc;AADR,UAPF,EAWId,IAAI,CAACe,MAAL,iBACA,KAAC,iCAAD;AAAA,oBACGf,IAAI,CAACe;AADR,UAZJ;AAAA,QAtBF;AAAA,OAA2Bf,IAAI,CAACE,GAAhC,CADF;AA0CD,GA7CD;;AA+CA,sBACE,KAAC,uBAAD;AAAyB,IAAA,SAAS,EAAE,GAAGO,MAAH,2BAAcjB,KAAK,CAACwB,IAApB,qDAA4BxD,IAAI,CAACyD,MAAjC,EAApC;AAAA,cACGzB,KAAK,CAACM,KAAN,CAAYG,GAAZ,CAAgB,UAAAD,IAAI;AAAA,aAAIO,UAAU,CAACP,IAAD,CAAd;AAAA,KAApB;AADH,IADF;AAKD,CAhFM;;AALLF,EAAAA,K;AAVAI,IAAAA,G;AACAU,IAAAA,K;AACAC,IAAAA,M;AACAC,IAAAA,I;AACAC,IAAAA,M;AACAV,IAAAA,Q;AACA3B,IAAAA,M;;AAKAmB,EAAAA,K;;AAsFF,eAAeN,gBAAf","sourcesContent":["import React from 'react'\nimport styled from 'styled-components';\nimport {Size} from '../types';\nimport {SystemIcons} from '../icons';\nimport {ComponentLStyling, ComponentMStyling, ComponentSStyling, ComponentTextStyle} from '../styles/typography';\nimport {COLORS, focusStyles} from '../styles';\nimport {Z_INDEXES} from '../styles/z-indexes';\nimport {defaultOnMouseDownHandler} from '../common';\n\n\nexport const ContentAccordionItemHeader = styled.div`\n display: flex;\n align-items: center;\n box-sizing: border-box;\n min-height: 48px;\n color: ${COLORS.neutral_600};\n cursor: pointer;\n\n &:hover {\n color: ${COLORS.primary_700};\n background-color: ${COLORS.primary_20};\n z-index: ${Z_INDEXES.hover};\n }\n\n &:focus {\n ${focusStyles}\n }\n\n &:active {\n color: ${COLORS.primary_800};\n background-color: ${COLORS.primary_100};\n z-index: ${Z_INDEXES.active};\n }\n`;\n\nexport const ContentAccordionItemHeaderIcon = styled.div`\n width: 24px;\n height: 24px;\n\n svg {\n width: 24px;\n height: 24px;\n }\n`;\n\nexport const ContentAccordionItemHeaderText = styled.div`\n`;\n\nexport const ContentAccordionItemContent = styled.div`\n display: none;\n flex-direction: column;\n`;\n\nexport const ContentAccordionItemContentHeader = styled.div`\n`;\n\nexport const ContentAccordionItemContentBody = styled.div`\n`;\n\nexport const ContentAccordionItemContentFooter = styled.div`\n`;\n\nexport const ContentAccordionItem = styled.div`\n display: flex;\n flex-direction: column;\n border-top: 1px solid ${COLORS.neutral_100};\n\n &.active {\n ${ContentAccordionItemContent} {\n display: flex;\n }\n }\n\n &.disabled {\n ${ContentAccordionItemHeader} {\n color: ${COLORS.neutral_300};\n cursor: not-allowed;\n pointer-events: none;\n }\n }\n`;\n\nexport const ContentAccordionWrapper = styled.div`\n width: 100%;\n position: relative;\n\n ${ContentAccordionItem}:last-child {\n border-bottom: 1px solid ${COLORS.neutral_100};\n }\n\n &.small {\n min-width: 320px;\n max-width: 528px;\n\n ${ContentAccordionItemHeader} {\n gap: 8px;\n padding: 0 8px;\n ${ComponentSStyling(ComponentTextStyle.Regular, null)}\n }\n\n ${ContentAccordionItemContent} {\n padding: 0 8px 16px 40px;\n gap: 8px;\n\n ${ContentAccordionItemContentHeader} {\n ${ComponentSStyling(ComponentTextStyle.Bold, null)}\n }\n\n ${ContentAccordionItemContentBody} {\n ${ComponentSStyling(ComponentTextStyle.Regular, null)}\n }\n }\n }\n\n &.medium {\n min-width: 344px;\n max-width: 584px;\n\n ${ContentAccordionItemHeader} {\n gap: 12px;\n padding: 0 12px;\n ${ComponentMStyling(ComponentTextStyle.Regular, null)}\n }\n\n ${ContentAccordionItemContent} {\n padding: 8px 12px 24px 48px;\n gap: 12px;\n\n ${ContentAccordionItemContentHeader} {\n ${ComponentMStyling(ComponentTextStyle.Bold, null)}\n }\n\n ${ContentAccordionItemContentBody} {\n ${ComponentMStyling(ComponentTextStyle.Regular, null)}\n }\n\n }\n }\n\n &.large {\n min-width: 384px;\n max-width: 656px;\n\n ${ContentAccordionItemHeader} {\n gap: 16px;\n padding: 0 16px;\n ${ComponentLStyling(ComponentTextStyle.Regular, null)}\n }\n\n ${ContentAccordionItemContent} {\n padding: 16px 16px 32px 56px;\n gap: 16px;\n\n ${ContentAccordionItemContentHeader} {\n ${ComponentLStyling(ComponentTextStyle.Bold, null)}\n }\n\n ${ContentAccordionItemContentBody} {\n ${ComponentLStyling(ComponentTextStyle.Regular, null)}\n }\n }\n }\n`;\n\nexport interface ContentAccordionItem {\n key: string;\n title: string;\n header?: string;\n body: any;\n footer?: any;\n disabled?: boolean;\n active?: boolean;\n}\n\nexport interface ContentAccordionProps {\n items: ContentAccordionItem[];\n multi?: boolean;\n size?: Size.Small | Size.Medium | Size.Large;\n}\n\nexport const ContentAccordion: React.FunctionComponent<ContentAccordionProps> = (props) => {\n\n const [opened, setOpened] = React.useState<string[]>([]);\n\n React.useEffect(() => {\n if (props.multi) {\n setOpened(props.items.filter(item => item.active).map(item => item.key));\n } else {\n let active = props.items.find(item => !!item.active)?.key;\n if (active) {\n setOpened([active]);\n }\n }\n }, [props.items, props.multi]);\n\n const onItemClick = (item: ContentAccordionItem) => {\n if (item.disabled) return;\n if (opened.includes(item.key)) {\n setOpened(opened.filter(key => key !== item.key));\n } else {\n if (props.multi) {\n setOpened([...opened, item.key]);\n } else {\n setOpened([item.key]);\n }\n }\n }\n\n const renderItem = (item: ContentAccordionItem) => {\n const isActive = opened.includes(item.key);\n\n return (\n <ContentAccordionItem key={item.key}\n id={`item_${item.key}`}\n className={''.concat(isActive ? ' active' : '').concat(item.disabled ? ' disabled' : '')}>\n <ContentAccordionItemHeader tabIndex={!item.disabled ? 0 : undefined}\n onMouseDown={defaultOnMouseDownHandler}\n onClick={() => !item.disabled && onItemClick(item)}\n onKeyPress={event => event.key === 'Enter' && onItemClick(item)}>\n <ContentAccordionItemHeaderIcon>\n {\n props.multi\n ? isActive\n ? <SystemIcons.Minus/>\n : <SystemIcons.Plus/>\n : isActive\n ? <SystemIcons.ChevronDown/>\n : <SystemIcons.ChevronRight/>\n }\n </ContentAccordionItemHeaderIcon>\n <ContentAccordionItemHeaderText>\n {item.title}\n </ContentAccordionItemHeaderText>\n </ContentAccordionItemHeader>\n <ContentAccordionItemContent>\n {\n item.header &&\n <ContentAccordionItemContentHeader>\n {item.header}\n </ContentAccordionItemContentHeader>\n }\n <ContentAccordionItemContentBody>\n {item.body}\n </ContentAccordionItemContentBody>\n {\n item.footer &&\n <ContentAccordionItemContentFooter>\n {item.footer}\n </ContentAccordionItemContentFooter>\n }\n </ContentAccordionItemContent>\n </ContentAccordionItem>\n );\n }\n\n return (\n <ContentAccordionWrapper className={''.concat(` ${props.size ?? Size.Medium}`)}>\n {props.items.map(item => renderItem(item))}\n </ContentAccordionWrapper>\n );\n};\n\nexport default ContentAccordion;\n"],"file":"ContentAccordion.js"}
1
+ {"version":3,"sources":["../../src/Accordion/ContentAccordion.tsx"],"names":["React","styled","Size","SystemIcons","ComponentLStyling","ComponentMStyling","ComponentSStyling","ComponentTextStyle","ParagraphLStyling","ParagraphMStyling","ParagraphSStyling","ParagraphTextStyle","COLORS","focusStyles","Z_INDEXES","defaultOnMouseDownHandler","ContentAccordionItemHeader","div","neutral_600","primary_700","primary_20","hover","primary_800","primary_100","active","ContentAccordionItemHeaderIcon","ContentAccordionItemHeaderText","ContentAccordionItemContent","ContentAccordionItemContentHeader","ContentAccordionItemContentBody","ContentAccordionItemContentFooter","ContentAccordionItem","neutral_100","neutral_300","ContentAccordionWrapper","Regular","Bold","black","ContentAccordion","props","useState","opened","setOpened","useEffect","multi","items","filter","item","map","key","find","onItemClick","disabled","includes","renderItem","isActive","concat","undefined","event","title","header","body","footer","size","Medium"],"mappings":"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","sourcesContent":["import React from 'react';\nimport styled from 'styled-components';\nimport { Size } from '../types';\nimport { SystemIcons } from '../icons';\nimport {\n ComponentLStyling,\n ComponentMStyling,\n ComponentSStyling,\n ComponentTextStyle,\n ParagraphLStyling,\n ParagraphMStyling,\n ParagraphSStyling,\n ParagraphTextStyle,\n} from '../styles/typography';\nimport { COLORS, focusStyles } from '../styles';\nimport { Z_INDEXES } from '../styles/z-indexes';\nimport { defaultOnMouseDownHandler } from '../common';\n\nexport const ContentAccordionItemHeader = styled.div`\n display: flex;\n align-items: center;\n box-sizing: border-box;\n min-height: 48px;\n color: ${COLORS.neutral_600};\n cursor: pointer;\n\n &:hover {\n color: ${COLORS.primary_700};\n background-color: ${COLORS.primary_20};\n z-index: ${Z_INDEXES.hover};\n }\n\n &:focus {\n ${focusStyles}\n }\n\n &:active {\n color: ${COLORS.primary_800};\n background-color: ${COLORS.primary_100};\n z-index: ${Z_INDEXES.active};\n }\n`;\n\nexport const ContentAccordionItemHeaderIcon = styled.div`\n width: 24px;\n height: 24px;\n\n svg {\n width: 24px;\n height: 24px;\n }\n`;\n\nexport const ContentAccordionItemHeaderText = styled.div``;\n\nexport const ContentAccordionItemContent = styled.div`\n display: none;\n flex-direction: column;\n`;\n\nexport const ContentAccordionItemContentHeader = styled.div``;\n\nexport const ContentAccordionItemContentBody = styled.div``;\n\nexport const ContentAccordionItemContentFooter = styled.div``;\n\nexport const ContentAccordionItem = styled.div`\n display: flex;\n flex-direction: column;\n border-top: 1px solid ${COLORS.neutral_100};\n\n &.active {\n ${ContentAccordionItemContent} {\n display: flex;\n }\n }\n\n &.disabled {\n ${ContentAccordionItemHeader} {\n color: ${COLORS.neutral_300};\n cursor: not-allowed;\n pointer-events: none;\n }\n }\n`;\n\nexport const ContentAccordionWrapper = styled.div`\n width: 100%;\n position: relative;\n\n ${ContentAccordionItem}:last-child {\n border-bottom: 1px solid ${COLORS.neutral_100};\n }\n\n &.small {\n min-width: 320px;\n max-width: 528px;\n\n ${ContentAccordionItemHeader} {\n gap: 8px;\n padding: 0 8px;\n ${ComponentSStyling(ComponentTextStyle.Regular, null)}\n }\n\n ${ContentAccordionItemContent} {\n padding: 0 8px 16px 40px;\n gap: 8px;\n\n ${ContentAccordionItemContentHeader} {\n ${ParagraphSStyling(ParagraphTextStyle.Bold, COLORS.black)}\n }\n\n ${ContentAccordionItemContentBody} {\n ${ParagraphSStyling(ParagraphTextStyle.Regular, COLORS.black)}\n }\n }\n }\n\n &.medium {\n min-width: 344px;\n max-width: 584px;\n\n ${ContentAccordionItemHeader} {\n gap: 12px;\n padding: 0 12px;\n ${ComponentMStyling(ComponentTextStyle.Regular, null)}\n }\n\n ${ContentAccordionItemContent} {\n padding: 8px 12px 24px 48px;\n gap: 12px;\n\n ${ContentAccordionItemContentHeader} {\n ${ParagraphMStyling(ParagraphTextStyle.Bold, COLORS.black)}\n }\n\n ${ContentAccordionItemContentBody} {\n ${ParagraphMStyling(ParagraphTextStyle.Regular, COLORS.black)}\n }\n }\n }\n\n &.large {\n min-width: 384px;\n max-width: 656px;\n\n ${ContentAccordionItemHeader} {\n gap: 16px;\n padding: 0 16px;\n ${ComponentLStyling(ComponentTextStyle.Regular, null)}\n }\n\n ${ContentAccordionItemContent} {\n padding: 16px 16px 32px 56px;\n gap: 16px;\n\n ${ContentAccordionItemContentHeader} {\n ${ParagraphLStyling(ParagraphTextStyle.Bold, COLORS.black)}\n }\n\n ${ContentAccordionItemContentBody} {\n ${ParagraphLStyling(ParagraphTextStyle.Regular, COLORS.black)}\n }\n }\n }\n`;\n\nexport interface ContentAccordionItem {\n key: string;\n title: string;\n header?: string;\n body: any;\n footer?: any;\n disabled?: boolean;\n active?: boolean;\n}\n\nexport interface ContentAccordionProps {\n items: ContentAccordionItem[];\n multi?: boolean;\n size?: Size.Small | Size.Medium | Size.Large;\n}\n\nexport const ContentAccordion: React.FunctionComponent<ContentAccordionProps> = (props) => {\n const [opened, setOpened] = React.useState<string[]>([]);\n\n React.useEffect(() => {\n if (props.multi) {\n setOpened(props.items.filter((item) => item.active).map((item) => item.key));\n } else {\n let active = props.items.find((item) => !!item.active)?.key;\n if (active) {\n setOpened([active]);\n }\n }\n }, [props.items, props.multi]);\n\n const onItemClick = (item: ContentAccordionItem) => {\n if (item.disabled) return;\n if (opened.includes(item.key)) {\n setOpened(opened.filter((key) => key !== item.key));\n } else {\n if (props.multi) {\n setOpened([...opened, item.key]);\n } else {\n setOpened([item.key]);\n }\n }\n };\n\n const renderItem = (item: ContentAccordionItem) => {\n const isActive = opened.includes(item.key);\n\n return (\n <ContentAccordionItem key={item.key} id={`item_${item.key}`} className={''.concat(isActive ? ' active' : '').concat(item.disabled ? ' disabled' : '')}>\n <ContentAccordionItemHeader\n tabIndex={!item.disabled ? 0 : undefined}\n onMouseDown={defaultOnMouseDownHandler}\n onClick={() => !item.disabled && onItemClick(item)}\n onKeyPress={(event) => event.key === 'Enter' && onItemClick(item)}>\n <ContentAccordionItemHeaderIcon>\n {props.multi ? isActive ? <SystemIcons.Minus /> : <SystemIcons.Plus /> : isActive ? <SystemIcons.ChevronDown /> : <SystemIcons.ChevronRight />}\n </ContentAccordionItemHeaderIcon>\n <ContentAccordionItemHeaderText>{item.title}</ContentAccordionItemHeaderText>\n </ContentAccordionItemHeader>\n <ContentAccordionItemContent>\n {item.header && <ContentAccordionItemContentHeader>{item.header}</ContentAccordionItemContentHeader>}\n <ContentAccordionItemContentBody>{item.body}</ContentAccordionItemContentBody>\n {item.footer && <ContentAccordionItemContentFooter>{item.footer}</ContentAccordionItemContentFooter>}\n </ContentAccordionItemContent>\n </ContentAccordionItem>\n );\n };\n\n return <ContentAccordionWrapper className={''.concat(` ${props.size ?? Size.Medium}`)}>{props.items.map((item) => renderItem(item))}</ContentAccordionWrapper>;\n};\n\nexport default ContentAccordion;\n"],"file":"ContentAccordion.js"}
package/dist/Popover/Popover.cjs CHANGED
@@ -37,47 +37,39 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
37
37
 
38
38
  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; }
39
39
 
40
- var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n height: ", ";\n 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 height: 16px;\n width: 16px;\n content: \"\";\n position: absolute;\n background: ", ";\n\n ", "\n ", "\n\n ", "\n ", "\n"])), function (props) {
40
+ 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) {
41
41
  return props.size === _types.Size.Small ? '240px' : props.size === _types.Size.Large ? '480px' : '360px';
42
42
  }, function (props) {
43
- return props.size === _types.Size.Small ? '344px' : props.size === _types.Size.Large ? '624px' : '464px';
43
+ return props.size === _types.Size.Small ? '320px' : props.size === _types.Size.Large ? '640px' : '480px';
44
44
  }, _.COLORS.white, _styles.BOXSHADOWS.BOXSHADOW_CENTERED, _styles.Z_INDEXES.popover, function (props) {
45
- return props.position == _types.Position.Bottom ? 'right: 50%; top: calc(100% + 8px); transform: translateX(50%);' : '';
46
- }, function (props) {
47
- return props.position == _types.Position.Top ? 'right: 50%; bottom: calc(100% + 8px); transform: translateX(50%);' : '';
45
+ return props.position == _types.Position.Bottom ? 'right: 50%; top: calc(100% + 16px); transform: translateX(50%);' : '';
48
46
  }, function (props) {
49
- return props.position == _types.Position.Left ? 'bottom: 50%; right: calc(100% + 8px); transform: translateY(50%);' : '';
47
+ return props.position == _types.Position.Top ? 'right: 50%; bottom: calc(100% + 16px); transform: translateX(50%);' : '';
50
48
  }, function (props) {
51
- return props.position == _types.Position.Right ? 'bottom: 50%; left: calc(100% + 8px); transform: translateY(50%);' : '';
52
- }, _.COLORS.white, function (props) {
53
- return props.position == _types.Position.Bottom ? 'right: 50%; bottom: 100%; transform: translateY(50%) rotate(45deg);' : '';
49
+ return props.position == _types.Position.Left ? 'bottom: 50%; right: calc(100% + 16px); transform: translateY(50%);' : '';
54
50
  }, function (props) {
55
- return props.position == _types.Position.Top ? 'right: 50%; top: 100%; transform: translateY(-50%) rotate(45deg);' : '';
51
+ return props.position == _types.Position.Right ? 'bottom: 50%; left: calc(100% + 16px); transform: translateY(50%);' : '';
56
52
  }, function (props) {
57
- return props.position == _types.Position.Left ? 'bottom: 50%; left: 100%; transform: translateX(-50%) rotate(45deg);' : '';
58
- }, function (props) {
59
- return props.position == _types.Position.Right ? 'bottom: 50%; right: 100%; transform: translateX(50%) rotate(45deg);' : '';
53
+ return props.showArrowPointer ? renderArrowStyles(props.position) : '';
60
54
  });
61
55
 
62
- var TopContainer = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n height: ", ";\n width: ", ";\n display: flex;\n"])), function (props) {
56
+ var TopContainer = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n height: ", ";\n max-width: ", ";\n display: flex;\n"])), function (props) {
63
57
  return props.size === _types.Size.Small ? '56px' : props.size === _types.Size.Large ? '72px' : '64px';
64
58
  }, function (props) {
65
59
  return props.size === _types.Size.Small ? '344px' : props.size === _types.Size.Large ? '624px' : '464px';
66
60
  });
67
61
 
68
- var MainContentWrapper = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n padding: ", ";\n"])), function (props) {
69
- return props.size === _types.Size.Small ? '8px 0 8px 16px' : props.size === _types.Size.Large ? '8px 0 8px 24px' : '8px 0 8px 20px';
70
- });
62
+ var MainContentWrapper = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n margin: 8px;\n"])));
71
63
 
72
- var MiddleContainer = _styledComponents.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n height: ", ";\n width: ", ";\n padding-right: ", ";\n overflow-y: auto;\n ", "\n"])), function (props) {
64
+ var MiddleContainer = _styledComponents.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n height: ", ";\n max-width: ", ";\n padding: ", ";\n overflow-y: auto;\n ", "\n"])), function (props) {
73
65
  return props.size === _types.Size.Small ? '104px' : props.size === _types.Size.Large ? '304px' : '208px';
74
66
  }, function (props) {
75
67
  return props.size === _types.Size.Small ? '312px' : props.size === _types.Size.Large ? '576px' : '424px';
76
68
  }, function (props) {
77
- return props.size === _types.Size.Small ? '6px' : props.size === _types.Size.Large ? '14px' : '10px';
69
+ return props.size === _types.Size.Small ? '0 8px' : props.size === _types.Size.Large ? '0 16px' : '0 12px';
78
70
  }, (0, _styles.scrollBarStyling)(_types.Size.Small));
79
71
 
80
- var BottomContainer = _styledComponents.default.div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n height: ", ";\n width: ", ";\n display: flex;\n\n .bottom-flex {\n flex: 1;\n }\n"])), function (props) {
72
+ var BottomContainer = _styledComponents.default.div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n height: ", ";\n max-width: ", ";\n display: flex;\n\n .bottom-flex {\n flex: 1;\n }\n"])), function (props) {
81
73
  return props.size === _types.Size.Small ? '64px' : props.size === _types.Size.Large ? '88px' : '72px';
82
74
  }, function (props) {
83
75
  return props.size === _types.Size.Small ? '344px' : props.size === _types.Size.Large ? '624px' : '464px';
@@ -108,9 +100,9 @@ var IconButtonContainer = _styledComponents.default.div(_templateObject11 || (_t
108
100
  });
109
101
 
110
102
  var Wrapper = _styledComponents.default.div(_templateObject12 || (_templateObject12 = (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) {
111
- return props.position === _types.Position.Top || props.position === _types.Position.Bottom ? '8px' : '100%';
103
+ return props.position === _types.Position.Top || props.position === _types.Position.Bottom ? '16px' : '100%';
112
104
  }, function (props) {
113
- return props.position === _types.Position.Left || props.position === _types.Position.Right ? '8px' : '100%';
105
+ return props.position === _types.Position.Left || props.position === _types.Position.Right ? '16px' : '100%';
114
106
  }, function (props) {
115
107
  return props.position === _types.Position.Left ? 'right:100%; bottom: 0%' : '';
116
108
  }, function (props) {
@@ -131,6 +123,24 @@ var renderMargins = function renderMargins(isNotePresent, size) {
131
123
  }
132
124
  };
133
125
 
126
+ var renderArrowStyles = function renderArrowStyles(position) {
127
+ if (position === _types.Position.Bottom) {
128
+ 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);";
129
+ }
130
+
131
+ if (position === _types.Position.Top) {
132
+ 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);";
133
+ }
134
+
135
+ if (position === _types.Position.Left) {
136
+ 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);";
137
+ }
138
+
139
+ if (position === _types.Position.Right) {
140
+ 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);";
141
+ }
142
+ };
143
+
134
144
  var Popover = function Popover(_ref) {
135
145
  var _bottomSectionProps$t, _bottomSectionProps$i;
136
146
 
@@ -142,7 +152,9 @@ var Popover = function Popover(_ref) {
142
152
  children = _ref.children,
143
153
  position = _ref.position,
144
154
  _ref$showOnClick = _ref.showOnClick,
145
- showOnClick = _ref$showOnClick === void 0 ? false : _ref$showOnClick;
155
+ showOnClick = _ref$showOnClick === void 0 ? false : _ref$showOnClick,
156
+ _ref$showArrowPointer = _ref.showArrowPointer,
157
+ showArrowPointer = _ref$showArrowPointer === void 0 ? false : _ref$showArrowPointer;
146
158
 
147
159
  var _React$useState = React.useState(false),
148
160
  _React$useState2 = (0, _slicedToArray2.default)(_React$useState, 2),
@@ -170,6 +182,7 @@ var Popover = function Popover(_ref) {
170
182
  size: size,
171
183
  position: position,
172
184
  ref: popoverRef,
185
+ showArrowPointer: showArrowPointer,
173
186
  children: [!!topSectionProps && /*#__PURE__*/(0, _jsxRuntime.jsxs)(TopContainer, {
174
187
  size: size,
175
188
  children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(TextContainer, {
@@ -260,7 +273,8 @@ Popover.propTypes = {
260
273
  }),
261
274
  mainContent: _propTypes.default.node.isRequired,
262
275
  children: _propTypes.default.node.isRequired,
263
- showOnClick: _propTypes.default.bool.isRequired
276
+ showOnClick: _propTypes.default.bool.isRequired,
277
+ showArrowPointer: _propTypes.default.bool
264
278
  };
265
279
  var _default = Popover;
266
280
  exports.default = _default;
package/dist/Popover/Popover.cjs.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["../../src/Popover/Popover.tsx"],"names":["Container","styled","div","props","size","Size","Small","Large","COLORS","white","BOXSHADOWS","BOXSHADOW_CENTERED","Z_INDEXES","popover","position","Position","Bottom","Top","Left","Right","TopContainer","MainContentWrapper","MiddleContainer","BottomContainer","TextContainer","renderMargins","note","NoteContainer","ComponentTextStyle","Regular","neutral_600","LabelContainer","Bold","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"],"mappings":"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","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}>`\n height: ${props=>props.size===Size.Small ? '240px' : (props.size===Size.Large ? '480px' : '360px')};\n width: ${props=>props.size===Size.Small ? '344px' : (props.size===Size.Large ? '624px' : '464px')};\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% + 8px); transform: translateX(50%);' : '')}\n ${props => (props.position == Position.Top ? 'right: 50%; bottom: calc(100% + 8px); transform: translateX(50%);' : '')}\n\n ${props => (props.position == Position.Left ? 'bottom: 50%; right: calc(100% + 8px); transform: translateY(50%);' : '')}\n ${props => (props.position == Position.Right ? 'bottom: 50%; left: calc(100% + 8px); transform: translateY(50%);' : '')}\n\n &::after {\n height: 16px;\n width: 16px;\n content: \"\";\n position: absolute;\n background: ${COLORS.white};\n\n ${props => (props.position == Position.Bottom ? 'right: 50%; bottom: 100%; transform: translateY(50%) rotate(45deg);' : '')}\n ${props => (props.position == Position.Top ? 'right: 50%; top: 100%; transform: translateY(-50%) rotate(45deg);' : '')}\n\n ${props => (props.position == Position.Left ? 'bottom: 50%; left: 100%; transform: translateX(-50%) rotate(45deg);' : '')}\n ${props => (props.position == Position.Right ? 'bottom: 50%; right: 100%; transform: translateX(50%) rotate(45deg);' : '')}\n`;\n\nconst TopContainer = styled.div<{size: Size}>`\n height: ${props=>props.size===Size.Small ? '56px' : (props.size===Size.Large ? '72px' : '64px')};\n width: ${props=>props.size===Size.Small ? '344px' : (props.size===Size.Large ? '624px' : '464px')};\n display: flex;\n`;\n\nconst MainContentWrapper = styled.div<{size: Size}>`\n padding: ${props=>props.size===Size.Small ? '8px 0 8px 16px' : (props.size===Size.Large ? '8px 0 8px 24px' : '8px 0 8px 20px')};\n`;\n\nconst MiddleContainer = styled.div<{size: Size}>`\n height: ${props=>props.size===Size.Small ? '104px' : (props.size===Size.Large ? '304px' : '208px')};\n width: ${props=>props.size===Size.Small ? '312px' : (props.size===Size.Large ? '576px' : '424px')};\n padding-right: ${props=>props.size===Size.Small ? '6px' : (props.size===Size.Large ? '14px' : '10px')};\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 width: ${props=>props.size===Size.Small ? '344px' : (props.size===Size.Large ? '624px' : '464px')};\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=>props.size===Size.Small ? ComponentXXSStyling(ComponentTextStyle.Regular, COLORS.neutral_600) : (props.size===Size.Large ? ComponentSStyling(ComponentTextStyle.Regular, COLORS.neutral_600) : ComponentXSStyling(ComponentTextStyle.Regular, COLORS.neutral_600))}\n`;\n\nconst LabelContainer = styled.div<{size: Size}>`\n ${props=>props.size===Size.Small ? ComponentSStyling(ComponentTextStyle.Bold, null) : (props.size===Size.Large ? ComponentLStyling(ComponentTextStyle.Bold, null) : 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 ? '8px' : '100%'};\n width: ${props=>props.position===Position.Left || props.position===Position.Right ? '8px' : '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=>props.showOnClick ? \n `${Container} {\n visibility: ${props.showPopover ? 'visible' : 'hidden'};\n opacity: ${props.showPopover ? '1' : '0'};\n }\n cursor: pointer;` \n : \n `&:hover {\n ${Container} {\n visibility: visible;\n opacity: 1;\n }\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 }\n else{\n return (size===Size.Small ? '18px 16px' : (size===Size.Large ? '24px' : '20px'));\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}\n\nconst Popover: React.FunctionComponent<PopoverProps> = \n({\n size=Size.Medium,\n topSectionProps,\n bottomSectionProps,\n mainContent,\n children,\n position,\n showOnClick=false\n}) => {\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}>\n {!!topSectionProps && \n <TopContainer size={size}>\n <TextContainer note={!!topSectionProps?.note} size={size}>\n {topSectionProps?.note && \n <NoteContainer size={size}>\n {topSectionProps.note}\n </NoteContainer>\n }\n <LabelContainer size={size}>\n {topSectionProps?.text}\n </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 <MainContentWrapper size={size}>\n <MiddleContainer size={size}>\n {mainContent}\n </MiddleContainer>\n </MainContentWrapper>\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 \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\n </Wrapper>\n );\n};\n\nexport default Popover;"],"file":"Popover.cjs"}
1
+ {"version":3,"sources":["../../src/Popover/Popover.tsx"],"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","MainContentWrapper","MiddleContainer","BottomContainer","TextContainer","renderMargins","note","NoteContainer","ComponentTextStyle","Regular","neutral_600","LabelContainer","Bold","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"],"mappings":"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","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 max-width: ${props=>props.size===Size.Small ? '344px' : (props.size===Size.Large ? '624px' : '464px')};\n display: flex;\n`;\n\nconst MainContentWrapper = styled.div<{size: Size}>`\n margin: 8px;\n`;\n\nconst MiddleContainer = styled.div<{size: Size}>`\n height: ${props=>props.size===Size.Small ? '104px' : (props.size===Size.Large ? '304px' : '208px')};\n max-width: ${props=>props.size===Size.Small ? '312px' : (props.size===Size.Large ? '576px' : '424px')};\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 max-width: ${props=>props.size===Size.Small ? '344px' : (props.size===Size.Large ? '624px' : '464px')};\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=>props.size===Size.Small ? ComponentXXSStyling(ComponentTextStyle.Regular, COLORS.neutral_600) : (props.size===Size.Large ? ComponentSStyling(ComponentTextStyle.Regular, COLORS.neutral_600) : ComponentXSStyling(ComponentTextStyle.Regular, COLORS.neutral_600))}\n`;\n\nconst LabelContainer = styled.div<{size: Size}>`\n ${props=>props.size===Size.Small ? ComponentSStyling(ComponentTextStyle.Bold, null) : (props.size===Size.Large ? ComponentLStyling(ComponentTextStyle.Bold, null) : 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=>props.showOnClick ? \n `${Container} {\n visibility: ${props.showPopover ? 'visible' : 'hidden'};\n opacity: ${props.showPopover ? '1' : '0'};\n }\n cursor: pointer;` \n : \n `&:hover {\n ${Container} {\n visibility: visible;\n opacity: 1;\n }\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 }\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({\n size=Size.Medium,\n topSectionProps,\n bottomSectionProps,\n mainContent,\n children,\n position,\n showOnClick=false,\n showArrowPointer=false\n}) => {\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 && \n <NoteContainer size={size}>\n {topSectionProps.note}\n </NoteContainer>\n }\n <LabelContainer size={size}>\n {topSectionProps?.text}\n </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 <MainContentWrapper size={size}>\n <MiddleContainer size={size}>\n {mainContent}\n </MiddleContainer>\n </MainContentWrapper>\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 \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\n </Wrapper>\n );\n};\n\nexport default Popover;"],"file":"Popover.cjs"}
package/dist/Popover/Popover.d.ts CHANGED
@@ -21,6 +21,7 @@ declare type PopoverProps = {
21
21
  children: React.ReactNode;
22
22
  position: Position.Top | Position.Bottom | Position.Right | Position.Left;
23
23
  showOnClick: boolean;
24
+ showArrowPointer?: boolean;
24
25
  };
25
26
  declare const Popover: React.FunctionComponent<PopoverProps>;
26
27
  export default Popover;
package/dist/Popover/Popover.js CHANGED
@@ -13,43 +13,35 @@ import { BOXSHADOWS, ComponentLStyling, ComponentMStyling, ComponentSStyling, Co
13
13
  import { Position, Size } from '../types';
14
14
  import { jsx as _jsx } from "react/jsx-runtime";
15
15
  import { jsxs as _jsxs } from "react/jsx-runtime";
16
- var Container = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n height: ", ";\n 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 height: 16px;\n width: 16px;\n content: \"\";\n position: absolute;\n background: ", ";\n\n ", "\n ", "\n\n ", "\n ", "\n"])), function (props) {
16
+ var Container = 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"])), function (props) {
17
17
  return props.size === Size.Small ? '240px' : props.size === Size.Large ? '480px' : '360px';
18
18
  }, function (props) {
19
- return props.size === Size.Small ? '344px' : props.size === Size.Large ? '624px' : '464px';
19
+ return props.size === Size.Small ? '320px' : props.size === Size.Large ? '640px' : '480px';
20
20
  }, COLORS.white, BOXSHADOWS.BOXSHADOW_CENTERED, Z_INDEXES.popover, function (props) {
21
- return props.position == Position.Bottom ? 'right: 50%; top: calc(100% + 8px); transform: translateX(50%);' : '';
22
- }, function (props) {
23
- return props.position == Position.Top ? 'right: 50%; bottom: calc(100% + 8px); transform: translateX(50%);' : '';
21
+ return props.position == Position.Bottom ? 'right: 50%; top: calc(100% + 16px); transform: translateX(50%);' : '';
24
22
  }, function (props) {
25
- return props.position == Position.Left ? 'bottom: 50%; right: calc(100% + 8px); transform: translateY(50%);' : '';
23
+ return props.position == Position.Top ? 'right: 50%; bottom: calc(100% + 16px); transform: translateX(50%);' : '';
26
24
  }, function (props) {
27
- return props.position == Position.Right ? 'bottom: 50%; left: calc(100% + 8px); transform: translateY(50%);' : '';
28
- }, COLORS.white, function (props) {
29
- return props.position == Position.Bottom ? 'right: 50%; bottom: 100%; transform: translateY(50%) rotate(45deg);' : '';
25
+ return props.position == Position.Left ? 'bottom: 50%; right: calc(100% + 16px); transform: translateY(50%);' : '';
30
26
  }, function (props) {
31
- return props.position == Position.Top ? 'right: 50%; top: 100%; transform: translateY(-50%) rotate(45deg);' : '';
27
+ return props.position == Position.Right ? 'bottom: 50%; left: calc(100% + 16px); transform: translateY(50%);' : '';
32
28
  }, function (props) {
33
- return props.position == Position.Left ? 'bottom: 50%; left: 100%; transform: translateX(-50%) rotate(45deg);' : '';
34
- }, function (props) {
35
- return props.position == Position.Right ? 'bottom: 50%; right: 100%; transform: translateX(50%) rotate(45deg);' : '';
29
+ return props.showArrowPointer ? renderArrowStyles(props.position) : '';
36
30
  });
37
- var TopContainer = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n height: ", ";\n width: ", ";\n display: flex;\n"])), function (props) {
31
+ var TopContainer = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n height: ", ";\n max-width: ", ";\n display: flex;\n"])), function (props) {
38
32
  return props.size === Size.Small ? '56px' : props.size === Size.Large ? '72px' : '64px';
39
33
  }, function (props) {
40
34
  return props.size === Size.Small ? '344px' : props.size === Size.Large ? '624px' : '464px';
41
35
  });
42
- var MainContentWrapper = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n padding: ", ";\n"])), function (props) {
43
- return props.size === Size.Small ? '8px 0 8px 16px' : props.size === Size.Large ? '8px 0 8px 24px' : '8px 0 8px 20px';
44
- });
45
- var MiddleContainer = styled.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n height: ", ";\n width: ", ";\n padding-right: ", ";\n overflow-y: auto;\n ", "\n"])), function (props) {
36
+ var MainContentWrapper = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n margin: 8px;\n"])));
37
+ var MiddleContainer = styled.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n height: ", ";\n max-width: ", ";\n padding: ", ";\n overflow-y: auto;\n ", "\n"])), function (props) {
46
38
  return props.size === Size.Small ? '104px' : props.size === Size.Large ? '304px' : '208px';
47
39
  }, function (props) {
48
40
  return props.size === Size.Small ? '312px' : props.size === Size.Large ? '576px' : '424px';
49
41
  }, function (props) {
50
- return props.size === Size.Small ? '6px' : props.size === Size.Large ? '14px' : '10px';
42
+ return props.size === Size.Small ? '0 8px' : props.size === Size.Large ? '0 16px' : '0 12px';
51
43
  }, scrollBarStyling(Size.Small));
52
- var BottomContainer = styled.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n height: ", ";\n width: ", ";\n display: flex;\n\n .bottom-flex {\n flex: 1;\n }\n"])), function (props) {
44
+ var BottomContainer = styled.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n height: ", ";\n max-width: ", ";\n display: flex;\n\n .bottom-flex {\n flex: 1;\n }\n"])), function (props) {
53
45
  return props.size === Size.Small ? '64px' : props.size === Size.Large ? '88px' : '72px';
54
46
  }, function (props) {
55
47
  return props.size === Size.Small ? '344px' : props.size === Size.Large ? '624px' : '464px';
@@ -73,9 +65,9 @@ var IconButtonContainer = styled.div(_templateObject11 || (_templateObject11 = _
73
65
  return props.size === Size.Small ? '8px 16px 8px 0' : props.size === Size.Large ? '16px 24px 16px 0' : '12px 20px 12px 0';
74
66
  });
75
67
  var Wrapper = styled.div(_templateObject12 || (_templateObject12 = _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"])), function (props) {
76
- return props.position === Position.Top || props.position === Position.Bottom ? '8px' : '100%';
68
+ return props.position === Position.Top || props.position === Position.Bottom ? '16px' : '100%';
77
69
  }, function (props) {
78
- return props.position === Position.Left || props.position === Position.Right ? '8px' : '100%';
70
+ return props.position === Position.Left || props.position === Position.Right ? '16px' : '100%';
79
71
  }, function (props) {
80
72
  return props.position === Position.Left ? 'right:100%; bottom: 0%' : '';
81
73
  }, function (props) {
@@ -96,6 +88,24 @@ var renderMargins = function renderMargins(isNotePresent, size) {
96
88
  }
97
89
  };
98
90
 
91
+ var renderArrowStyles = function renderArrowStyles(position) {
92
+ if (position === Position.Bottom) {
93
+ 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);";
94
+ }
95
+
96
+ if (position === Position.Top) {
97
+ 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);";
98
+ }
99
+
100
+ if (position === Position.Left) {
101
+ 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);";
102
+ }
103
+
104
+ if (position === Position.Right) {
105
+ 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);";
106
+ }
107
+ };
108
+
99
109
  var Popover = function Popover(_ref) {
100
110
  var _bottomSectionProps$t, _bottomSectionProps$i;
101
111
 
@@ -107,7 +117,9 @@ var Popover = function Popover(_ref) {
107
117
  children = _ref.children,
108
118
  position = _ref.position,
109
119
  _ref$showOnClick = _ref.showOnClick,
110
- showOnClick = _ref$showOnClick === void 0 ? false : _ref$showOnClick;
120
+ showOnClick = _ref$showOnClick === void 0 ? false : _ref$showOnClick,
121
+ _ref$showArrowPointer = _ref.showArrowPointer,
122
+ showArrowPointer = _ref$showArrowPointer === void 0 ? false : _ref$showArrowPointer;
111
123
 
112
124
  var _React$useState = React.useState(false),
113
125
  _React$useState2 = _slicedToArray(_React$useState, 2),
@@ -135,6 +147,7 @@ var Popover = function Popover(_ref) {
135
147
  size: size,
136
148
  position: position,
137
149
  ref: popoverRef,
150
+ showArrowPointer: showArrowPointer,
138
151
  children: [!!topSectionProps && /*#__PURE__*/_jsxs(TopContainer, {
139
152
  size: size,
140
153
  children: [/*#__PURE__*/_jsxs(TextContainer, {
@@ -225,7 +238,8 @@ Popover.propTypes = {
225
238
  }),
226
239
  mainContent: _pt.node.isRequired,
227
240
  children: _pt.node.isRequired,
228
- showOnClick: _pt.bool.isRequired
241
+ showOnClick: _pt.bool.isRequired,
242
+ showArrowPointer: _pt.bool
229
243
  };
230
244
  export default Popover;
231
245
  //# sourceMappingURL=Popover.js.map
package/dist/Popover/Popover.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["../../src/Popover/Popover.tsx"],"names":["React","styled","COLORS","ComponentTextStyle","ComponentXSStyling","Button","IconButton","SystemIcons","BOXSHADOWS","ComponentLStyling","ComponentMStyling","ComponentSStyling","ComponentXXSStyling","scrollBarStyling","Z_INDEXES","Position","Size","Container","div","props","size","Small","Large","white","BOXSHADOW_CENTERED","popover","position","Bottom","Top","Left","Right","TopContainer","MainContentWrapper","MiddleContainer","BottomContainer","TextContainer","renderMargins","note","NoteContainer","Regular","neutral_600","LabelContainer","Bold","CloseButtonContainer","TextButtonContainer","IconButtonContainer","Wrapper","showOnClick","showPopover","isNotePresent","Popover","Medium","topSectionProps","bottomSectionProps","mainContent","children","useState","setShowPopover","popoverRef","useRef","useEffect","checkIfClickedOutside","e","current","contains","target","document","addEventListener","removeEventListener","text","textButton","icon","action","label","iconButtons","map","iconButton"],"mappings":"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","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}>`\n height: ${props=>props.size===Size.Small ? '240px' : (props.size===Size.Large ? '480px' : '360px')};\n width: ${props=>props.size===Size.Small ? '344px' : (props.size===Size.Large ? '624px' : '464px')};\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% + 8px); transform: translateX(50%);' : '')}\n ${props => (props.position == Position.Top ? 'right: 50%; bottom: calc(100% + 8px); transform: translateX(50%);' : '')}\n\n ${props => (props.position == Position.Left ? 'bottom: 50%; right: calc(100% + 8px); transform: translateY(50%);' : '')}\n ${props => (props.position == Position.Right ? 'bottom: 50%; left: calc(100% + 8px); transform: translateY(50%);' : '')}\n\n &::after {\n height: 16px;\n width: 16px;\n content: \"\";\n position: absolute;\n background: ${COLORS.white};\n\n ${props => (props.position == Position.Bottom ? 'right: 50%; bottom: 100%; transform: translateY(50%) rotate(45deg);' : '')}\n ${props => (props.position == Position.Top ? 'right: 50%; top: 100%; transform: translateY(-50%) rotate(45deg);' : '')}\n\n ${props => (props.position == Position.Left ? 'bottom: 50%; left: 100%; transform: translateX(-50%) rotate(45deg);' : '')}\n ${props => (props.position == Position.Right ? 'bottom: 50%; right: 100%; transform: translateX(50%) rotate(45deg);' : '')}\n`;\n\nconst TopContainer = styled.div<{size: Size}>`\n height: ${props=>props.size===Size.Small ? '56px' : (props.size===Size.Large ? '72px' : '64px')};\n width: ${props=>props.size===Size.Small ? '344px' : (props.size===Size.Large ? '624px' : '464px')};\n display: flex;\n`;\n\nconst MainContentWrapper = styled.div<{size: Size}>`\n padding: ${props=>props.size===Size.Small ? '8px 0 8px 16px' : (props.size===Size.Large ? '8px 0 8px 24px' : '8px 0 8px 20px')};\n`;\n\nconst MiddleContainer = styled.div<{size: Size}>`\n height: ${props=>props.size===Size.Small ? '104px' : (props.size===Size.Large ? '304px' : '208px')};\n width: ${props=>props.size===Size.Small ? '312px' : (props.size===Size.Large ? '576px' : '424px')};\n padding-right: ${props=>props.size===Size.Small ? '6px' : (props.size===Size.Large ? '14px' : '10px')};\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 width: ${props=>props.size===Size.Small ? '344px' : (props.size===Size.Large ? '624px' : '464px')};\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=>props.size===Size.Small ? ComponentXXSStyling(ComponentTextStyle.Regular, COLORS.neutral_600) : (props.size===Size.Large ? ComponentSStyling(ComponentTextStyle.Regular, COLORS.neutral_600) : ComponentXSStyling(ComponentTextStyle.Regular, COLORS.neutral_600))}\n`;\n\nconst LabelContainer = styled.div<{size: Size}>`\n ${props=>props.size===Size.Small ? ComponentSStyling(ComponentTextStyle.Bold, null) : (props.size===Size.Large ? ComponentLStyling(ComponentTextStyle.Bold, null) : 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 ? '8px' : '100%'};\n width: ${props=>props.position===Position.Left || props.position===Position.Right ? '8px' : '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=>props.showOnClick ? \n `${Container} {\n visibility: ${props.showPopover ? 'visible' : 'hidden'};\n opacity: ${props.showPopover ? '1' : '0'};\n }\n cursor: pointer;` \n : \n `&:hover {\n ${Container} {\n visibility: visible;\n opacity: 1;\n }\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 }\n else{\n return (size===Size.Small ? '18px 16px' : (size===Size.Large ? '24px' : '20px'));\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}\n\nconst Popover: React.FunctionComponent<PopoverProps> = \n({\n size=Size.Medium,\n topSectionProps,\n bottomSectionProps,\n mainContent,\n children,\n position,\n showOnClick=false\n}) => {\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}>\n {!!topSectionProps && \n <TopContainer size={size}>\n <TextContainer note={!!topSectionProps?.note} size={size}>\n {topSectionProps?.note && \n <NoteContainer size={size}>\n {topSectionProps.note}\n </NoteContainer>\n }\n <LabelContainer size={size}>\n {topSectionProps?.text}\n </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 <MainContentWrapper size={size}>\n <MiddleContainer size={size}>\n {mainContent}\n </MiddleContainer>\n </MainContentWrapper>\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 \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\n </Wrapper>\n );\n};\n\nexport default Popover;"],"file":"Popover.js"}
1
+ {"version":3,"sources":["../../src/Popover/Popover.tsx"],"names":["React","styled","COLORS","ComponentTextStyle","ComponentXSStyling","Button","IconButton","SystemIcons","BOXSHADOWS","ComponentLStyling","ComponentMStyling","ComponentSStyling","ComponentXXSStyling","scrollBarStyling","Z_INDEXES","Position","Size","Container","div","props","size","Small","Large","white","BOXSHADOW_CENTERED","popover","position","Bottom","Top","Left","Right","showArrowPointer","renderArrowStyles","TopContainer","MainContentWrapper","MiddleContainer","BottomContainer","TextContainer","renderMargins","note","NoteContainer","Regular","neutral_600","LabelContainer","Bold","CloseButtonContainer","TextButtonContainer","IconButtonContainer","Wrapper","showOnClick","showPopover","isNotePresent","Popover","Medium","topSectionProps","bottomSectionProps","mainContent","children","useState","setShowPopover","popoverRef","useRef","useEffect","checkIfClickedOutside","e","current","contains","target","document","addEventListener","removeEventListener","text","textButton","icon","action","label","iconButtons","map","iconButton"],"mappings":"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","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 max-width: ${props=>props.size===Size.Small ? '344px' : (props.size===Size.Large ? '624px' : '464px')};\n display: flex;\n`;\n\nconst MainContentWrapper = styled.div<{size: Size}>`\n margin: 8px;\n`;\n\nconst MiddleContainer = styled.div<{size: Size}>`\n height: ${props=>props.size===Size.Small ? '104px' : (props.size===Size.Large ? '304px' : '208px')};\n max-width: ${props=>props.size===Size.Small ? '312px' : (props.size===Size.Large ? '576px' : '424px')};\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 max-width: ${props=>props.size===Size.Small ? '344px' : (props.size===Size.Large ? '624px' : '464px')};\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=>props.size===Size.Small ? ComponentXXSStyling(ComponentTextStyle.Regular, COLORS.neutral_600) : (props.size===Size.Large ? ComponentSStyling(ComponentTextStyle.Regular, COLORS.neutral_600) : ComponentXSStyling(ComponentTextStyle.Regular, COLORS.neutral_600))}\n`;\n\nconst LabelContainer = styled.div<{size: Size}>`\n ${props=>props.size===Size.Small ? ComponentSStyling(ComponentTextStyle.Bold, null) : (props.size===Size.Large ? ComponentLStyling(ComponentTextStyle.Bold, null) : 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=>props.showOnClick ? \n `${Container} {\n visibility: ${props.showPopover ? 'visible' : 'hidden'};\n opacity: ${props.showPopover ? '1' : '0'};\n }\n cursor: pointer;` \n : \n `&:hover {\n ${Container} {\n visibility: visible;\n opacity: 1;\n }\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 }\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({\n size=Size.Medium,\n topSectionProps,\n bottomSectionProps,\n mainContent,\n children,\n position,\n showOnClick=false,\n showArrowPointer=false\n}) => {\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 && \n <NoteContainer size={size}>\n {topSectionProps.note}\n </NoteContainer>\n }\n <LabelContainer size={size}>\n {topSectionProps?.text}\n </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 <MainContentWrapper size={size}>\n <MiddleContainer size={size}>\n {mainContent}\n </MiddleContainer>\n </MainContentWrapper>\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 \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\n </Wrapper>\n );\n};\n\nexport default Popover;"],"file":"Popover.js"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@laerdal/life-react-components",
3
- "version": "1.9.8-dev.11.full",
3
+ "version": "1.9.8-dev.13",
4
4
  "private": false,
5
5
  "author": "Thomas Kalve <thomas.kalve@laerdal.com>",
6
6
  "contributors": [