@laerdal/life-react-components 3.2.3-dev.8 → 3.3.0
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.
- package/dist/Dropdown/BasicDropdown.cjs +6 -4
- package/dist/Dropdown/BasicDropdown.cjs.map +1 -1
- package/dist/Dropdown/BasicDropdown.d.ts +1 -0
- package/dist/Dropdown/BasicDropdown.js +6 -4
- package/dist/Dropdown/BasicDropdown.js.map +1 -1
- package/dist/Dropdown/CommonStyling.cjs +1 -1
- package/dist/Dropdown/CommonStyling.cjs.map +1 -1
- package/dist/Dropdown/CommonStyling.js +1 -1
- package/dist/Dropdown/CommonStyling.js.map +1 -1
- package/dist/Dropdown/DropdownFilter.cjs +4 -2
- package/dist/Dropdown/DropdownFilter.cjs.map +1 -1
- package/dist/Dropdown/DropdownFilter.d.ts +1 -0
- package/dist/Dropdown/DropdownFilter.js +4 -2
- package/dist/Dropdown/DropdownFilter.js.map +1 -1
- package/dist/GlobalNavigationBar/desktop/MainMenu.cjs +0 -2
- package/dist/GlobalNavigationBar/desktop/MainMenu.cjs.map +1 -1
- package/dist/GlobalNavigationBar/desktop/MainMenu.js +0 -2
- package/dist/GlobalNavigationBar/desktop/MainMenu.js.map +1 -1
- package/dist/InputFields/DatepickerField.cjs +5 -3
- package/dist/InputFields/DatepickerField.cjs.map +1 -1
- package/dist/InputFields/DatepickerField.d.ts +2 -0
- package/dist/InputFields/DatepickerField.js +5 -3
- package/dist/InputFields/DatepickerField.js.map +1 -1
- package/dist/InputFields/NumberField.cjs +7 -5
- package/dist/InputFields/NumberField.cjs.map +1 -1
- package/dist/InputFields/NumberField.d.ts +2 -0
- package/dist/InputFields/NumberField.js +7 -5
- package/dist/InputFields/NumberField.js.map +1 -1
- package/dist/InputFields/RichTextField.cjs +1 -1
- package/dist/InputFields/RichTextField.cjs.map +1 -1
- package/dist/InputFields/RichTextField.js +1 -1
- package/dist/InputFields/RichTextField.js.map +1 -1
- package/dist/InputFields/TextField.cjs +4 -2
- package/dist/InputFields/TextField.cjs.map +1 -1
- package/dist/InputFields/TextField.d.ts +2 -0
- package/dist/InputFields/TextField.js +4 -2
- package/dist/InputFields/TextField.js.map +1 -1
- package/dist/InputFields/styling.cjs +1 -1
- package/dist/InputFields/styling.cjs.map +1 -1
- package/dist/InputFields/styling.js +1 -1
- package/dist/InputFields/styling.js.map +1 -1
- package/dist/Table/TableBody.cjs +18 -6
- package/dist/Table/TableBody.cjs.map +1 -1
- package/dist/Table/TableBody.js +21 -9
- package/dist/Table/TableBody.js.map +1 -1
- package/dist/Table/TableStyles.cjs +20 -12
- package/dist/Table/TableStyles.cjs.map +1 -1
- package/dist/Table/TableStyles.d.ts +7 -1
- package/dist/Table/TableStyles.js +17 -11
- package/dist/Table/TableStyles.js.map +1 -1
- package/dist/Table/TableTypes.cjs.map +1 -1
- package/dist/Table/TableTypes.d.ts +1 -0
- package/dist/Table/TableTypes.js.map +1 -1
- package/dist/Tooltips/TooltipOverflow.cjs +2 -7
- package/dist/Tooltips/TooltipOverflow.cjs.map +1 -1
- package/dist/Tooltips/TooltipOverflow.js +2 -7
- package/dist/Tooltips/TooltipOverflow.js.map +1 -1
- package/dist/Tooltips/TooltipStyles.cjs +5 -5
- package/dist/Tooltips/TooltipStyles.cjs.map +1 -1
- package/dist/Tooltips/TooltipStyles.d.ts +2 -1
- package/dist/Tooltips/TooltipStyles.js +5 -5
- package/dist/Tooltips/TooltipStyles.js.map +1 -1
- package/dist/Tooltips/TooltipWrapper.cjs +2 -1
- package/dist/Tooltips/TooltipWrapper.cjs.map +1 -1
- package/dist/Tooltips/TooltipWrapper.js +2 -1
- package/dist/Tooltips/TooltipWrapper.js.map +1 -1
- package/dist/icons/index.cjs +1 -1
- package/dist/icons/index.cjs.map +1 -1
- package/dist/icons/index.js +1 -1
- package/dist/icons/index.js.map +1 -1
- package/package.json +1 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TooltipStyles.cjs","names":["distanceToEdge","size","Size","XSmall","Small","Tooltip","styled","div","props","Medium","ComponentSStyling","ComponentTextStyle","Regular","COLORS","white","ComponentXSStyling","ComponentMStyling","align","BOXSHADOWS","BOXSHADOW_L2","width","height","maxWidth","primary_800","Z_INDEXES","tooltip","position","withArrow","defaultProps","TooltipTrigger","delay","css","TooltipContainer","focusStyles"],"sources":["../../src/Tooltips/TooltipStyles.tsx"],"sourcesContent":["import styled, { css } from 'styled-components';\nimport { Size } from '../types';\nimport {BOXSHADOWS, COLORS, ComponentTextStyle, focusStyles} from '../styles';\nimport { ComponentMStyling, ComponentSStyling, ComponentXSStyling } from '../styles/typography';\nimport {Z_INDEXES} from '../styles/z-indexes';\n\nconst distanceToEdge = (size: Size | undefined) => {\n return size == Size.XSmall ? '8px' :
|
|
1
|
+
{"version":3,"file":"TooltipStyles.cjs","names":["distanceToEdge","size","Size","XSmall","Small","Tooltip","styled","div","props","Medium","ComponentSStyling","ComponentTextStyle","Regular","COLORS","white","ComponentXSStyling","ComponentMStyling","align","BOXSHADOWS","BOXSHADOW_L2","width","height","maxWidth","primary_800","Z_INDEXES","tooltip","position","withArrow","defaultProps","TooltipTrigger","triggerType","delay","css","TooltipContainer","focusStyles"],"sources":["../../src/Tooltips/TooltipStyles.tsx"],"sourcesContent":["import styled, { css } from 'styled-components';\nimport { Size } from '../types';\nimport { BOXSHADOWS, COLORS, ComponentTextStyle, focusStyles } from '../styles';\nimport { ComponentMStyling, ComponentSStyling, ComponentXSStyling } from '../styles/typography';\nimport { Z_INDEXES } from '../styles/z-indexes';\n\nconst distanceToEdge = (size: Size | undefined) => {\n return size == Size.XSmall ? '8px' : !size || size == Size.Small ? '12px' : '16px';\n};\n\nexport const Tooltip = styled.div<{\n withArrow?: boolean;\n size?: Size;\n height?: string;\n maxWidth?: string;\n align?: 'start' | 'end' | 'center' | undefined;\n position?: 'top' | 'right' | 'bottom' | 'left' | undefined;\n width?: string;\n}>`\n pointer-events: none;\n ${(props) => (props.size == Size.Small || props.size != Size.Medium ? ComponentSStyling(ComponentTextStyle.Regular, COLORS.white) : '')}\n ${(props) => (props.size == Size.XSmall ? ComponentXSStyling(ComponentTextStyle.Regular, COLORS.white) : '')}\n ${(props) => (props.size == Size.Medium ? ComponentMStyling(ComponentTextStyle.Regular, COLORS.white) : '')}\n ${(props) => (props.align == 'center' ? 'text-align: center;' : '')}\n box-shadow: ${BOXSHADOWS.BOXSHADOW_L2};\n box-sizing: border-box;\n\n padding: ${(props) => (props.size == Size.XSmall ? '4px 8px' : props.size == Size.Medium ? '8px 12px' : '6px 10px')};\n border-radius: 2px;\n ${(props) => (props.width ? `width: ${props.width};` : 'width: max-content;')}\n height: ${(props) => props.height};\n max-width: ${(props) => props.maxWidth ?? '34em'};\n background: ${COLORS.primary_800};\n position: absolute;\n opacity: 0;\n z-index: ${Z_INDEXES.tooltip};\n ${(props) => (props.position == 'top' ? 'bottom: 110%;' : props.position == 'bottom' ? 'top: 110%;' : '')}\n\n ${(props) => (props.position == 'left' ? 'bottom: 50%; transform: translateX(-110%) translateY(50%);' : '')}\n ${(props) => (props.position == 'right' ? 'bottom: 50%;left: 110%; transform: translateY(50%);' : '')}\n \n ${(props) =>\n props.position == 'left' || props.position == 'right'\n ? ''\n : props.align == 'start'\n ? 'left: 0%;'\n : props.align == 'end'\n ? 'right: 0%;'\n : 'left: 50%; transform: translateX(-50%);'}\n\n\n&::after {\n ${(props) => (!props.withArrow ? 'display: none;' : '')}\n content: \"\";\n position: absolute;\n ${(props) => (props.position == 'top' ? 'top: 100%;' : props.position == 'bottom' ? 'bottom: 100%;' : '')}\n\n ${(props) => (props.position == 'right' ? 'right: 100%; bottom: 50%; transform: translateY(50%);' : '')}\n ${(props) => (props.position == 'left' ? 'left: 100%; bottom: 50%; transform: translateY(50%);' : '')}\n\n ${(props) =>\n props.position == 'left' || props.position == 'right'\n ? ''\n : props.align == 'start'\n ? `left: ${distanceToEdge(props.size)};`\n : props.align == 'end'\n ? `right: ${distanceToEdge(props.size)};`\n : 'left: 50%;'}\n\n ${(props) => (props.position == 'left' ? '' : 'margin-left: -5px;')}\n margin: -0.5px;\n border-width: 4px;\n border-style: solid;\n border-color: ${(props) => (props.position == 'top' ? COLORS.primary_800 : 'transparent')} ${(props) => (props.position == 'right' ? COLORS.primary_800 : 'transparent')}\n ${(props) => (props.position == 'bottom' ? COLORS.primary_800 : 'transparent')} ${(props) => (props.position == 'left' ? COLORS.primary_800 : 'transparent')};\n }\n\n & > span {\n word-wrap: break-word;\n color: white;\n }\n`;\n\nTooltip.defaultProps = {\n withArrow: false,\n size: Size.Small,\n height: 'auto',\n align: 'center',\n position: 'bottom',\n};\n\nexport const TooltipTrigger = (triggerType: 'hover' | 'click', delay?: string) => css`\n ${triggerType == 'hover'\n ? `&:hover ${Tooltip}, &:focus-within ${Tooltip}, &:focus ${Tooltip} {\n opacity: 1;\n transition: 0.5s;\n transition-delay: ${delay ?? '0.7s'};\n }`\n : `& ${Tooltip} {\n transition: 0.5s;\n transition-delay: ${delay ?? '0s'};\n }\n \n &.show ${Tooltip} {\n opacity: 1;\n }\n \n &.hide ${Tooltip} {\n opacity: 0;\n }`}\n`;\n\nexport const TooltipContainer = styled.div<{ triggerType: 'hover' | 'click', delay?: string }>`\n display: inline-block;\n position: relative;\n\n ${(props) => TooltipTrigger(props.triggerType, props.delay)}\n\n &:focus {\n ${focusStyles}\n }\n`;\n"],"mappings":"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"}
|
|
@@ -8,7 +8,8 @@ export declare const Tooltip: import("styled-components").StyledComponent<"div",
|
|
|
8
8
|
position?: 'top' | 'right' | 'bottom' | 'left' | undefined;
|
|
9
9
|
width?: string | undefined;
|
|
10
10
|
}, never>;
|
|
11
|
-
export declare const TooltipTrigger: (delay?: string) => import("styled-components").FlattenSimpleInterpolation;
|
|
11
|
+
export declare const TooltipTrigger: (triggerType: 'hover' | 'click', delay?: string) => import("styled-components").FlattenSimpleInterpolation;
|
|
12
12
|
export declare const TooltipContainer: import("styled-components").StyledComponent<"div", any, {
|
|
13
|
+
triggerType: 'hover' | 'click';
|
|
13
14
|
delay?: string | undefined;
|
|
14
15
|
}, never>;
|
|
@@ -8,7 +8,7 @@ import { Z_INDEXES } from '../styles/z-indexes';
|
|
|
8
8
|
var distanceToEdge = function distanceToEdge(size) {
|
|
9
9
|
return size == Size.XSmall ? '8px' : !size || size == Size.Small ? '12px' : '16px';
|
|
10
10
|
};
|
|
11
|
-
export var Tooltip = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n
|
|
11
|
+
export var Tooltip = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n pointer-events: none;\n ", "\n ", "\n ", "\n ", "\n box-shadow: ", ";\n box-sizing: border-box;\n\n padding: ", ";\n border-radius: 2px;\n ", "\n height: ", ";\n max-width: ", ";\n background: ", ";\n position: absolute;\n opacity: 0;\n z-index: ", ";\n ", "\n\n ", "\n ", "\n \n ", "\n\n\n&::after {\n ", "\n content: \"\";\n position: absolute;\n ", "\n\n ", "\n ", "\n\n ", "\n\n ", "\n margin: -0.5px;\n border-width: 4px;\n border-style: solid;\n border-color: ", " ", "\n ", " ", ";\n }\n\n & > span {\n word-wrap: break-word;\n color: white;\n }\n"])), function (props) {
|
|
12
12
|
return props.size == Size.Small || props.size != Size.Medium ? ComponentSStyling(ComponentTextStyle.Regular, COLORS.white) : '';
|
|
13
13
|
}, function (props) {
|
|
14
14
|
return props.size == Size.XSmall ? ComponentXSStyling(ComponentTextStyle.Regular, COLORS.white) : '';
|
|
@@ -61,10 +61,10 @@ Tooltip.defaultProps = {
|
|
|
61
61
|
align: 'center',
|
|
62
62
|
position: 'bottom'
|
|
63
63
|
};
|
|
64
|
-
export var TooltipTrigger = function TooltipTrigger(delay) {
|
|
65
|
-
return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n
|
|
64
|
+
export var TooltipTrigger = function TooltipTrigger(triggerType, delay) {
|
|
65
|
+
return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n ", "\n"])), triggerType == 'hover' ? "&:hover ".concat(Tooltip, ", &:focus-within ").concat(Tooltip, ", &:focus ").concat(Tooltip, " {\n opacity: 1;\n transition: 0.5s;\n transition-delay: ").concat(delay !== null && delay !== void 0 ? delay : '0.7s', ";\n }") : "& ".concat(Tooltip, " {\n transition: 0.5s;\n transition-delay: ").concat(delay !== null && delay !== void 0 ? delay : '0s', ";\n }\n \n &.show ").concat(Tooltip, " {\n opacity: 1;\n }\n \n &.hide ").concat(Tooltip, " {\n opacity: 0;\n }"));
|
|
66
66
|
};
|
|
67
|
-
export var TooltipContainer = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n display: inline-block;\n position: relative;\n\n ", "\n
|
|
68
|
-
return TooltipTrigger(props.delay);
|
|
67
|
+
export var TooltipContainer = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n display: inline-block;\n position: relative;\n\n ", "\n\n &:focus {\n ", "\n }\n"])), function (props) {
|
|
68
|
+
return TooltipTrigger(props.triggerType, props.delay);
|
|
69
69
|
}, focusStyles);
|
|
70
70
|
//# sourceMappingURL=TooltipStyles.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TooltipStyles.js","names":["styled","css","Size","BOXSHADOWS","COLORS","ComponentTextStyle","focusStyles","ComponentMStyling","ComponentSStyling","ComponentXSStyling","Z_INDEXES","distanceToEdge","size","XSmall","Small","Tooltip","div","props","Medium","Regular","white","align","BOXSHADOW_L2","width","height","maxWidth","primary_800","tooltip","position","withArrow","defaultProps","TooltipTrigger","delay","TooltipContainer"],"sources":["../../src/Tooltips/TooltipStyles.tsx"],"sourcesContent":["import styled, { css } from 'styled-components';\nimport { Size } from '../types';\nimport {BOXSHADOWS, COLORS, ComponentTextStyle, focusStyles} from '../styles';\nimport { ComponentMStyling, ComponentSStyling, ComponentXSStyling } from '../styles/typography';\nimport {Z_INDEXES} from '../styles/z-indexes';\n\nconst distanceToEdge = (size: Size | undefined) => {\n return size == Size.XSmall ? '8px' :
|
|
1
|
+
{"version":3,"file":"TooltipStyles.js","names":["styled","css","Size","BOXSHADOWS","COLORS","ComponentTextStyle","focusStyles","ComponentMStyling","ComponentSStyling","ComponentXSStyling","Z_INDEXES","distanceToEdge","size","XSmall","Small","Tooltip","div","props","Medium","Regular","white","align","BOXSHADOW_L2","width","height","maxWidth","primary_800","tooltip","position","withArrow","defaultProps","TooltipTrigger","triggerType","delay","TooltipContainer"],"sources":["../../src/Tooltips/TooltipStyles.tsx"],"sourcesContent":["import styled, { css } from 'styled-components';\nimport { Size } from '../types';\nimport { BOXSHADOWS, COLORS, ComponentTextStyle, focusStyles } from '../styles';\nimport { ComponentMStyling, ComponentSStyling, ComponentXSStyling } from '../styles/typography';\nimport { Z_INDEXES } from '../styles/z-indexes';\n\nconst distanceToEdge = (size: Size | undefined) => {\n return size == Size.XSmall ? '8px' : !size || size == Size.Small ? '12px' : '16px';\n};\n\nexport const Tooltip = styled.div<{\n withArrow?: boolean;\n size?: Size;\n height?: string;\n maxWidth?: string;\n align?: 'start' | 'end' | 'center' | undefined;\n position?: 'top' | 'right' | 'bottom' | 'left' | undefined;\n width?: string;\n}>`\n pointer-events: none;\n ${(props) => (props.size == Size.Small || props.size != Size.Medium ? ComponentSStyling(ComponentTextStyle.Regular, COLORS.white) : '')}\n ${(props) => (props.size == Size.XSmall ? ComponentXSStyling(ComponentTextStyle.Regular, COLORS.white) : '')}\n ${(props) => (props.size == Size.Medium ? ComponentMStyling(ComponentTextStyle.Regular, COLORS.white) : '')}\n ${(props) => (props.align == 'center' ? 'text-align: center;' : '')}\n box-shadow: ${BOXSHADOWS.BOXSHADOW_L2};\n box-sizing: border-box;\n\n padding: ${(props) => (props.size == Size.XSmall ? '4px 8px' : props.size == Size.Medium ? '8px 12px' : '6px 10px')};\n border-radius: 2px;\n ${(props) => (props.width ? `width: ${props.width};` : 'width: max-content;')}\n height: ${(props) => props.height};\n max-width: ${(props) => props.maxWidth ?? '34em'};\n background: ${COLORS.primary_800};\n position: absolute;\n opacity: 0;\n z-index: ${Z_INDEXES.tooltip};\n ${(props) => (props.position == 'top' ? 'bottom: 110%;' : props.position == 'bottom' ? 'top: 110%;' : '')}\n\n ${(props) => (props.position == 'left' ? 'bottom: 50%; transform: translateX(-110%) translateY(50%);' : '')}\n ${(props) => (props.position == 'right' ? 'bottom: 50%;left: 110%; transform: translateY(50%);' : '')}\n \n ${(props) =>\n props.position == 'left' || props.position == 'right'\n ? ''\n : props.align == 'start'\n ? 'left: 0%;'\n : props.align == 'end'\n ? 'right: 0%;'\n : 'left: 50%; transform: translateX(-50%);'}\n\n\n&::after {\n ${(props) => (!props.withArrow ? 'display: none;' : '')}\n content: \"\";\n position: absolute;\n ${(props) => (props.position == 'top' ? 'top: 100%;' : props.position == 'bottom' ? 'bottom: 100%;' : '')}\n\n ${(props) => (props.position == 'right' ? 'right: 100%; bottom: 50%; transform: translateY(50%);' : '')}\n ${(props) => (props.position == 'left' ? 'left: 100%; bottom: 50%; transform: translateY(50%);' : '')}\n\n ${(props) =>\n props.position == 'left' || props.position == 'right'\n ? ''\n : props.align == 'start'\n ? `left: ${distanceToEdge(props.size)};`\n : props.align == 'end'\n ? `right: ${distanceToEdge(props.size)};`\n : 'left: 50%;'}\n\n ${(props) => (props.position == 'left' ? '' : 'margin-left: -5px;')}\n margin: -0.5px;\n border-width: 4px;\n border-style: solid;\n border-color: ${(props) => (props.position == 'top' ? COLORS.primary_800 : 'transparent')} ${(props) => (props.position == 'right' ? COLORS.primary_800 : 'transparent')}\n ${(props) => (props.position == 'bottom' ? COLORS.primary_800 : 'transparent')} ${(props) => (props.position == 'left' ? COLORS.primary_800 : 'transparent')};\n }\n\n & > span {\n word-wrap: break-word;\n color: white;\n }\n`;\n\nTooltip.defaultProps = {\n withArrow: false,\n size: Size.Small,\n height: 'auto',\n align: 'center',\n position: 'bottom',\n};\n\nexport const TooltipTrigger = (triggerType: 'hover' | 'click', delay?: string) => css`\n ${triggerType == 'hover'\n ? `&:hover ${Tooltip}, &:focus-within ${Tooltip}, &:focus ${Tooltip} {\n opacity: 1;\n transition: 0.5s;\n transition-delay: ${delay ?? '0.7s'};\n }`\n : `& ${Tooltip} {\n transition: 0.5s;\n transition-delay: ${delay ?? '0s'};\n }\n \n &.show ${Tooltip} {\n opacity: 1;\n }\n \n &.hide ${Tooltip} {\n opacity: 0;\n }`}\n`;\n\nexport const TooltipContainer = styled.div<{ triggerType: 'hover' | 'click', delay?: string }>`\n display: inline-block;\n position: relative;\n\n ${(props) => TooltipTrigger(props.triggerType, props.delay)}\n\n &:focus {\n ${focusStyles}\n }\n`;\n"],"mappings":"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"}
|
|
@@ -78,11 +78,12 @@ var TooltipWrapper = function TooltipWrapper(_ref) {
|
|
|
78
78
|
};
|
|
79
79
|
}
|
|
80
80
|
}, [trigger]);
|
|
81
|
-
var cls = "".concat(trigger
|
|
81
|
+
var cls = "".concat(trigger === 'click' ? showTooltip ? 'show' : 'hide' : '');
|
|
82
82
|
return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_TooltipStyles.TooltipContainer, {
|
|
83
83
|
ref: ref,
|
|
84
84
|
delay: delay,
|
|
85
85
|
tabIndex: tabIndex,
|
|
86
|
+
triggerType: trigger,
|
|
86
87
|
className: cls,
|
|
87
88
|
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_TooltipStyles.Tooltip, _objectSpread(_objectSpread({
|
|
88
89
|
align: align,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TooltipWrapper.cjs","names":["TooltipWrapper","label","children","withArrow","tabIndex","size","Size","Small","height","delay","undefined","align","position","trigger","hideAfter","props","React","useState","showTooltip","setShowTooltip","timeoutRef","useRef","ref","useClickOutsideRef","handleClick","e","current","contains","target","clearTimeout","setTimeout","handleButtonDown","key","useEffect","document","addEventListener","removeEventListener","cls"],"sources":["../../src/Tooltips/TooltipWrapper.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport {TooltipProps} from './TooltipTypes';\n\nimport {TooltipContainer, Tooltip} from './TooltipStyles';\nimport {useClickOutsideRef} from '../common';\nimport {useEffect, useRef} from \"react\";\nimport {Size} from \"../types\";\n\nconst TooltipWrapper = ({\n label, children,\n withArrow,\n tabIndex,\n size = Size.Small,\n height = 'auto',\n delay = undefined,\n align = 'center',\n position = 'bottom',\n trigger = 'hover',\n hideAfter = 5000,\n ...props\n }: TooltipProps) => {\n\n const [showTooltip, setShowTooltip] = React.useState(false);\n const timeoutRef = useRef<any>();\n\n const ref = useClickOutsideRef(() => setShowTooltip(false));\n\n const handleClick = (e?: MouseEvent) => {\n if (ref?.current?.contains(e?.target as Node)) {\n setShowTooltip(true)\n timeoutRef.current && clearTimeout(timeoutRef.current);\n timeoutRef.current = setTimeout(() => setShowTooltip(false), hideAfter);\n }\n }\n const handleButtonDown = (e?: KeyboardEvent) => {\n if (e?.key === 'Enter' || e?.key === ' ') {\n setShowTooltip(true);\n timeoutRef.current && clearTimeout(timeoutRef.current);\n timeoutRef.current = setTimeout(() => setShowTooltip(false), hideAfter);\n }\n }\n\n useEffect(() => {\n if (trigger == 'click') {\n document.addEventListener('mousedown', handleClick);\n ref?.current?.addEventListener('keydown', handleButtonDown);\n\n return () => {\n document.removeEventListener('mousedown', handleClick);\n ref?.current?.removeEventListener('keydown', handleButtonDown);\n };\n }\n }, [trigger])\n\n const cls = `${trigger
|
|
1
|
+
{"version":3,"file":"TooltipWrapper.cjs","names":["TooltipWrapper","label","children","withArrow","tabIndex","size","Size","Small","height","delay","undefined","align","position","trigger","hideAfter","props","React","useState","showTooltip","setShowTooltip","timeoutRef","useRef","ref","useClickOutsideRef","handleClick","e","current","contains","target","clearTimeout","setTimeout","handleButtonDown","key","useEffect","document","addEventListener","removeEventListener","cls"],"sources":["../../src/Tooltips/TooltipWrapper.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport {TooltipProps} from './TooltipTypes';\n\nimport {TooltipContainer, Tooltip} from './TooltipStyles';\nimport {useClickOutsideRef} from '../common';\nimport {useEffect, useRef} from \"react\";\nimport {Size} from \"../types\";\n\nconst TooltipWrapper = ({\n label, children,\n withArrow,\n tabIndex,\n size = Size.Small,\n height = 'auto',\n delay = undefined,\n align = 'center',\n position = 'bottom',\n trigger = 'hover',\n hideAfter = 5000,\n ...props\n }: TooltipProps) => {\n\n const [showTooltip, setShowTooltip] = React.useState(false);\n const timeoutRef = useRef<any>();\n\n const ref = useClickOutsideRef(() => setShowTooltip(false));\n\n const handleClick = (e?: MouseEvent) => {\n if (ref?.current?.contains(e?.target as Node)) {\n setShowTooltip(true)\n timeoutRef.current && clearTimeout(timeoutRef.current);\n timeoutRef.current = setTimeout(() => setShowTooltip(false), hideAfter);\n }\n }\n const handleButtonDown = (e?: KeyboardEvent) => {\n if (e?.key === 'Enter' || e?.key === ' ') {\n setShowTooltip(true);\n timeoutRef.current && clearTimeout(timeoutRef.current);\n timeoutRef.current = setTimeout(() => setShowTooltip(false), hideAfter);\n }\n }\n\n useEffect(() => {\n if (trigger == 'click') {\n document.addEventListener('mousedown', handleClick);\n ref?.current?.addEventListener('keydown', handleButtonDown);\n\n return () => {\n document.removeEventListener('mousedown', handleClick);\n ref?.current?.removeEventListener('keydown', handleButtonDown);\n };\n }\n }, [trigger])\n\n const cls = `${trigger === 'click' ? showTooltip ? 'show' : 'hide' : ''}`;\n return <TooltipContainer ref={ref}\n delay={delay}\n tabIndex={tabIndex}\n triggerType={trigger}\n className={cls}>\n <Tooltip align={align}\n height={height}\n role=\"tooltip\"\n size={size}\n withArrow={withArrow}\n position={position}\n {...props}>\n {label}\n </Tooltip>\n {children}\n </TooltipContainer>;\n};\n\nexport default TooltipWrapper;\n"],"mappings":"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"}
|
|
@@ -70,11 +70,12 @@ var TooltipWrapper = function TooltipWrapper(_ref) {
|
|
|
70
70
|
};
|
|
71
71
|
}
|
|
72
72
|
}, [trigger]);
|
|
73
|
-
var cls = "".concat(trigger
|
|
73
|
+
var cls = "".concat(trigger === 'click' ? showTooltip ? 'show' : 'hide' : '');
|
|
74
74
|
return /*#__PURE__*/_jsxs(TooltipContainer, {
|
|
75
75
|
ref: ref,
|
|
76
76
|
delay: delay,
|
|
77
77
|
tabIndex: tabIndex,
|
|
78
|
+
triggerType: trigger,
|
|
78
79
|
className: cls,
|
|
79
80
|
children: [/*#__PURE__*/_jsx(Tooltip, _objectSpread(_objectSpread({
|
|
80
81
|
align: align,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TooltipWrapper.js","names":["React","TooltipContainer","Tooltip","useClickOutsideRef","useEffect","useRef","Size","TooltipWrapper","label","children","withArrow","tabIndex","size","Small","height","delay","undefined","align","position","trigger","hideAfter","props","useState","showTooltip","setShowTooltip","timeoutRef","ref","handleClick","e","current","contains","target","clearTimeout","setTimeout","handleButtonDown","key","document","addEventListener","removeEventListener","cls"],"sources":["../../src/Tooltips/TooltipWrapper.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport {TooltipProps} from './TooltipTypes';\n\nimport {TooltipContainer, Tooltip} from './TooltipStyles';\nimport {useClickOutsideRef} from '../common';\nimport {useEffect, useRef} from \"react\";\nimport {Size} from \"../types\";\n\nconst TooltipWrapper = ({\n label, children,\n withArrow,\n tabIndex,\n size = Size.Small,\n height = 'auto',\n delay = undefined,\n align = 'center',\n position = 'bottom',\n trigger = 'hover',\n hideAfter = 5000,\n ...props\n }: TooltipProps) => {\n\n const [showTooltip, setShowTooltip] = React.useState(false);\n const timeoutRef = useRef<any>();\n\n const ref = useClickOutsideRef(() => setShowTooltip(false));\n\n const handleClick = (e?: MouseEvent) => {\n if (ref?.current?.contains(e?.target as Node)) {\n setShowTooltip(true)\n timeoutRef.current && clearTimeout(timeoutRef.current);\n timeoutRef.current = setTimeout(() => setShowTooltip(false), hideAfter);\n }\n }\n const handleButtonDown = (e?: KeyboardEvent) => {\n if (e?.key === 'Enter' || e?.key === ' ') {\n setShowTooltip(true);\n timeoutRef.current && clearTimeout(timeoutRef.current);\n timeoutRef.current = setTimeout(() => setShowTooltip(false), hideAfter);\n }\n }\n\n useEffect(() => {\n if (trigger == 'click') {\n document.addEventListener('mousedown', handleClick);\n ref?.current?.addEventListener('keydown', handleButtonDown);\n\n return () => {\n document.removeEventListener('mousedown', handleClick);\n ref?.current?.removeEventListener('keydown', handleButtonDown);\n };\n }\n }, [trigger])\n\n const cls = `${trigger
|
|
1
|
+
{"version":3,"file":"TooltipWrapper.js","names":["React","TooltipContainer","Tooltip","useClickOutsideRef","useEffect","useRef","Size","TooltipWrapper","label","children","withArrow","tabIndex","size","Small","height","delay","undefined","align","position","trigger","hideAfter","props","useState","showTooltip","setShowTooltip","timeoutRef","ref","handleClick","e","current","contains","target","clearTimeout","setTimeout","handleButtonDown","key","document","addEventListener","removeEventListener","cls"],"sources":["../../src/Tooltips/TooltipWrapper.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport {TooltipProps} from './TooltipTypes';\n\nimport {TooltipContainer, Tooltip} from './TooltipStyles';\nimport {useClickOutsideRef} from '../common';\nimport {useEffect, useRef} from \"react\";\nimport {Size} from \"../types\";\n\nconst TooltipWrapper = ({\n label, children,\n withArrow,\n tabIndex,\n size = Size.Small,\n height = 'auto',\n delay = undefined,\n align = 'center',\n position = 'bottom',\n trigger = 'hover',\n hideAfter = 5000,\n ...props\n }: TooltipProps) => {\n\n const [showTooltip, setShowTooltip] = React.useState(false);\n const timeoutRef = useRef<any>();\n\n const ref = useClickOutsideRef(() => setShowTooltip(false));\n\n const handleClick = (e?: MouseEvent) => {\n if (ref?.current?.contains(e?.target as Node)) {\n setShowTooltip(true)\n timeoutRef.current && clearTimeout(timeoutRef.current);\n timeoutRef.current = setTimeout(() => setShowTooltip(false), hideAfter);\n }\n }\n const handleButtonDown = (e?: KeyboardEvent) => {\n if (e?.key === 'Enter' || e?.key === ' ') {\n setShowTooltip(true);\n timeoutRef.current && clearTimeout(timeoutRef.current);\n timeoutRef.current = setTimeout(() => setShowTooltip(false), hideAfter);\n }\n }\n\n useEffect(() => {\n if (trigger == 'click') {\n document.addEventListener('mousedown', handleClick);\n ref?.current?.addEventListener('keydown', handleButtonDown);\n\n return () => {\n document.removeEventListener('mousedown', handleClick);\n ref?.current?.removeEventListener('keydown', handleButtonDown);\n };\n }\n }, [trigger])\n\n const cls = `${trigger === 'click' ? showTooltip ? 'show' : 'hide' : ''}`;\n return <TooltipContainer ref={ref}\n delay={delay}\n tabIndex={tabIndex}\n triggerType={trigger}\n className={cls}>\n <Tooltip align={align}\n height={height}\n role=\"tooltip\"\n size={size}\n withArrow={withArrow}\n position={position}\n {...props}>\n {label}\n </Tooltip>\n {children}\n </TooltipContainer>;\n};\n\nexport default TooltipWrapper;\n"],"mappings":"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"}
|
package/dist/icons/index.cjs
CHANGED
|
@@ -34,7 +34,7 @@ var getSize = function getSize(size) {
|
|
|
34
34
|
}
|
|
35
35
|
};
|
|
36
36
|
exports.getSize = getSize;
|
|
37
|
-
var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n position: relative;\n ", "\n"])), (0, _TooltipStyles.TooltipTrigger)());
|
|
37
|
+
var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n position: relative;\n ", "\n"])), (0, _TooltipStyles.TooltipTrigger)('hover'));
|
|
38
38
|
var renderIcon = function renderIcon(children, tooltip, tooltipId) {
|
|
39
39
|
return tooltip ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(Container, {
|
|
40
40
|
children: [children, /*#__PURE__*/(0, _jsxRuntime.jsx)(_TooltipStyles.Tooltip, {
|
package/dist/icons/index.cjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.cjs","names":["getSize","size","indexOf","Container","styled","div","TooltipTrigger","renderIcon","children","tooltip","tooltipId","gTagsRegex","RegExp","fillColorRegex","formatSvgString","text","color","replace","replaceAll","SystemIcon","ContentIcon"],"sources":["../../src/icons/index.tsx"],"sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport { Tooltip, TooltipTrigger } from '../Tooltips/TooltipStyles';\n\nexport type BaseProps = {\n children?: any;\n tooltip?: string;\n tooltipId?: string;\n}\n\nexport interface IconProps extends Omit<React.AriaAttributes, 'className' | 'color' | 'size' | 'label'> {\n label?: string;\n className?: string;\n color?: string;\n size?: string;\n viewBox?: string;\n};\n\n/**\n * Retrieves the size of the icon.\n * @param size - Original size which was passed to the icon.\n * @returns Numeric value indicating the size of the icon.\n */\nexport const getSize = (size: string) => {\n if (typeof size === 'string' && size.indexOf('px') === -1) {\n return `${size}px`;\n } else {\n return size;\n }\n};\n\nconst Container = styled.div`\n position: relative;\n ${TooltipTrigger()}\n`;\n\nconst renderIcon = (children: React.ReactNode, tooltip?: string, tooltipId?: string) => {\n return tooltip ? (\n <Container>\n {children}\n <Tooltip id={tooltipId}>{tooltip}</Tooltip>\n </Container>\n ) : (\n <>\n {children}\n </>\n );\n}\n\nconst gTagsRegex = new RegExp(/<g [A-Za-z\\W\\D]*>/,'g'); // matches <g id = \".....\">\nconst fillColorRegex = new RegExp(/fill=\"#[A-F0-9]*\"/,'g'); // matches fill=\"#1F1F1F\"\n\nexport const formatSvgString = (text: string, color: string): string => {\n return text.replace(gTagsRegex, '')\n .replaceAll('</g>','')\n .replace(fillColorRegex, `fill=\"${color}\"`);\n}\n\nexport const SystemIcon: React.FunctionComponent<BaseProps> = ({ children, tooltip = '', tooltipId = '' }) => {\n return renderIcon(children, tooltip, tooltipId);\n};\n\nexport const ContentIcon: React.FunctionComponent<BaseProps> = ({ children, tooltip = '', tooltipId = '' }) => {\n return renderIcon(children, tooltip, tooltipId);\n};\n\nexport * as ContentIcons from './contenticons';\nexport * as SystemIcons from './systemicons';\n"],"mappings":";;;;;;;;;;AAAA;AACA;AACA;AAAoE;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAcnE;;AAED;AACA;AACA;AACA;AACA;AACO,IAAMA,OAAO,GAAG,SAAVA,OAAO,CAAIC,IAAY,EAAK;EACvC,IAAI,OAAOA,IAAI,KAAK,QAAQ,IAAIA,IAAI,CAACC,OAAO,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,EAAE;IACzD,iBAAUD,IAAI;EAChB,CAAC,MAAM;IACL,OAAOA,IAAI;EACb;AACF,CAAC;AAAC;AAEF,IAAME,SAAS,GAAGC,yBAAM,CAACC,GAAG,qHAExB,IAAAC,6BAAc,
|
|
1
|
+
{"version":3,"file":"index.cjs","names":["getSize","size","indexOf","Container","styled","div","TooltipTrigger","renderIcon","children","tooltip","tooltipId","gTagsRegex","RegExp","fillColorRegex","formatSvgString","text","color","replace","replaceAll","SystemIcon","ContentIcon"],"sources":["../../src/icons/index.tsx"],"sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport { Tooltip, TooltipTrigger } from '../Tooltips/TooltipStyles';\n\nexport type BaseProps = {\n children?: any;\n tooltip?: string;\n tooltipId?: string;\n}\n\nexport interface IconProps extends Omit<React.AriaAttributes, 'className' | 'color' | 'size' | 'label'> {\n label?: string;\n className?: string;\n color?: string;\n size?: string;\n viewBox?: string;\n};\n\n/**\n * Retrieves the size of the icon.\n * @param size - Original size which was passed to the icon.\n * @returns Numeric value indicating the size of the icon.\n */\nexport const getSize = (size: string) => {\n if (typeof size === 'string' && size.indexOf('px') === -1) {\n return `${size}px`;\n } else {\n return size;\n }\n};\n\nconst Container = styled.div`\n position: relative;\n ${TooltipTrigger('hover')}\n`;\n\nconst renderIcon = (children: React.ReactNode, tooltip?: string, tooltipId?: string) => {\n return tooltip ? (\n <Container>\n {children}\n <Tooltip id={tooltipId}>{tooltip}</Tooltip>\n </Container>\n ) : (\n <>\n {children}\n </>\n );\n}\n\nconst gTagsRegex = new RegExp(/<g [A-Za-z\\W\\D]*>/,'g'); // matches <g id = \".....\">\nconst fillColorRegex = new RegExp(/fill=\"#[A-F0-9]*\"/,'g'); // matches fill=\"#1F1F1F\"\n\nexport const formatSvgString = (text: string, color: string): string => {\n return text.replace(gTagsRegex, '')\n .replaceAll('</g>','')\n .replace(fillColorRegex, `fill=\"${color}\"`);\n}\n\nexport const SystemIcon: React.FunctionComponent<BaseProps> = ({ children, tooltip = '', tooltipId = '' }) => {\n return renderIcon(children, tooltip, tooltipId);\n};\n\nexport const ContentIcon: React.FunctionComponent<BaseProps> = ({ children, tooltip = '', tooltipId = '' }) => {\n return renderIcon(children, tooltip, tooltipId);\n};\n\nexport * as ContentIcons from './contenticons';\nexport * as SystemIcons from './systemicons';\n"],"mappings":";;;;;;;;;;AAAA;AACA;AACA;AAAoE;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAcnE;;AAED;AACA;AACA;AACA;AACA;AACO,IAAMA,OAAO,GAAG,SAAVA,OAAO,CAAIC,IAAY,EAAK;EACvC,IAAI,OAAOA,IAAI,KAAK,QAAQ,IAAIA,IAAI,CAACC,OAAO,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,EAAE;IACzD,iBAAUD,IAAI;EAChB,CAAC,MAAM;IACL,OAAOA,IAAI;EACb;AACF,CAAC;AAAC;AAEF,IAAME,SAAS,GAAGC,yBAAM,CAACC,GAAG,qHAExB,IAAAC,6BAAc,EAAC,OAAO,CAAC,CAC1B;AAED,IAAMC,UAAU,GAAG,SAAbA,UAAU,CAAIC,QAAyB,EAAEC,OAAgB,EAAEC,SAAkB,EAAK;EACtF,OAAOD,OAAO,gBACZ,sBAAC,SAAS;IAAA,WACPD,QAAQ,eACT,qBAAC,sBAAO;MAAC,EAAE,EAAEE,SAAU;MAAA,UAAED;IAAO,EAAW;EAAA,EACjC,gBAEZ;IAAA,UACGD;EAAQ,EAEZ;AACH,CAAC;AAED,IAAMG,UAAU,GAAG,IAAIC,MAAM,CAAC,mBAAmB,EAAC,GAAG,CAAC,CAAC,CAAC;AACxD,IAAMC,cAAc,GAAG,IAAID,MAAM,CAAC,mBAAmB,EAAC,GAAG,CAAC,CAAC,CAAC;;AAErD,IAAME,eAAe,GAAG,SAAlBA,eAAe,CAAIC,IAAY,EAAEC,KAAa,EAAa;EACtE,OAAOD,IAAI,CAACE,OAAO,CAACN,UAAU,EAAE,EAAE,CAAC,CACvBO,UAAU,CAAC,MAAM,EAAC,EAAE,CAAC,CACrBD,OAAO,CAACJ,cAAc,mBAAWG,KAAK,QAAI;AACxD,CAAC;AAAA;AAEM,IAAMG,UAA8C,GAAG,SAAjDA,UAA8C,OAAmD;EAAA,IAA7CX,QAAQ,QAARA,QAAQ;IAAA,oBAAEC,OAAO;IAAPA,OAAO,6BAAG,EAAE;IAAA,sBAAEC,SAAS;IAATA,SAAS,+BAAG,EAAE;EACrG,OAAOH,UAAU,CAACC,QAAQ,EAAEC,OAAO,EAAEC,SAAS,CAAC;AACjD,CAAC;AAAC;AAAA;EAvDAF,QAAQ;EACRC,OAAO;EACPC,SAAS;AAAA;AAuDJ,IAAMU,WAA+C,GAAG,SAAlDA,WAA+C,QAAmD;EAAA,IAA7CZ,QAAQ,SAARA,QAAQ;IAAA,sBAAEC,OAAO;IAAPA,OAAO,8BAAG,EAAE;IAAA,wBAAEC,SAAS;IAATA,SAAS,gCAAG,EAAE;EACtG,OAAOH,UAAU,CAACC,QAAQ,EAAEC,OAAO,EAAEC,SAAS,CAAC;AACjD,CAAC;AAAC;AAAA;EA3DAF,QAAQ;EACRC,OAAO;EACPC,SAAS;AAAA"}
|
package/dist/icons/index.js
CHANGED
|
@@ -21,7 +21,7 @@ export var getSize = function getSize(size) {
|
|
|
21
21
|
return size;
|
|
22
22
|
}
|
|
23
23
|
};
|
|
24
|
-
var Container = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n position: relative;\n ", "\n"])), TooltipTrigger());
|
|
24
|
+
var Container = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n position: relative;\n ", "\n"])), TooltipTrigger('hover'));
|
|
25
25
|
var renderIcon = function renderIcon(children, tooltip, tooltipId) {
|
|
26
26
|
return tooltip ? /*#__PURE__*/_jsxs(Container, {
|
|
27
27
|
children: [children, /*#__PURE__*/_jsx(Tooltip, {
|
package/dist/icons/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","names":["React","styled","Tooltip","TooltipTrigger","getSize","size","indexOf","Container","div","renderIcon","children","tooltip","tooltipId","gTagsRegex","RegExp","fillColorRegex","formatSvgString","text","color","replace","replaceAll","SystemIcon","ContentIcon","ContentIcons","SystemIcons"],"sources":["../../src/icons/index.tsx"],"sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport { Tooltip, TooltipTrigger } from '../Tooltips/TooltipStyles';\n\nexport type BaseProps = {\n children?: any;\n tooltip?: string;\n tooltipId?: string;\n}\n\nexport interface IconProps extends Omit<React.AriaAttributes, 'className' | 'color' | 'size' | 'label'> {\n label?: string;\n className?: string;\n color?: string;\n size?: string;\n viewBox?: string;\n};\n\n/**\n * Retrieves the size of the icon.\n * @param size - Original size which was passed to the icon.\n * @returns Numeric value indicating the size of the icon.\n */\nexport const getSize = (size: string) => {\n if (typeof size === 'string' && size.indexOf('px') === -1) {\n return `${size}px`;\n } else {\n return size;\n }\n};\n\nconst Container = styled.div`\n position: relative;\n ${TooltipTrigger()}\n`;\n\nconst renderIcon = (children: React.ReactNode, tooltip?: string, tooltipId?: string) => {\n return tooltip ? (\n <Container>\n {children}\n <Tooltip id={tooltipId}>{tooltip}</Tooltip>\n </Container>\n ) : (\n <>\n {children}\n </>\n );\n}\n\nconst gTagsRegex = new RegExp(/<g [A-Za-z\\W\\D]*>/,'g'); // matches <g id = \".....\">\nconst fillColorRegex = new RegExp(/fill=\"#[A-F0-9]*\"/,'g'); // matches fill=\"#1F1F1F\"\n\nexport const formatSvgString = (text: string, color: string): string => {\n return text.replace(gTagsRegex, '')\n .replaceAll('</g>','')\n .replace(fillColorRegex, `fill=\"${color}\"`);\n}\n\nexport const SystemIcon: React.FunctionComponent<BaseProps> = ({ children, tooltip = '', tooltipId = '' }) => {\n return renderIcon(children, tooltip, tooltipId);\n};\n\nexport const ContentIcon: React.FunctionComponent<BaseProps> = ({ children, tooltip = '', tooltipId = '' }) => {\n return renderIcon(children, tooltip, tooltipId);\n};\n\nexport * as ContentIcons from './contenticons';\nexport * as SystemIcons from './systemicons';\n"],"mappings":";;;AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,OAAOC,MAAM,MAAM,mBAAmB;AACtC,SAASC,OAAO,EAAEC,cAAc,QAAQ,2BAA2B;AAAC;AAAA;AAAA;AAcnE;;AAED;AACA;AACA;AACA;AACA;AACA,OAAO,IAAMC,OAAO,GAAG,SAAVA,OAAO,CAAIC,IAAY,EAAK;EACvC,IAAI,OAAOA,IAAI,KAAK,QAAQ,IAAIA,IAAI,CAACC,OAAO,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,EAAE;IACzD,iBAAUD,IAAI;EAChB,CAAC,MAAM;IACL,OAAOA,IAAI;EACb;AACF,CAAC;AAED,IAAME,SAAS,GAAGN,MAAM,CAACO,GAAG,uGAExBL,cAAc,
|
|
1
|
+
{"version":3,"file":"index.js","names":["React","styled","Tooltip","TooltipTrigger","getSize","size","indexOf","Container","div","renderIcon","children","tooltip","tooltipId","gTagsRegex","RegExp","fillColorRegex","formatSvgString","text","color","replace","replaceAll","SystemIcon","ContentIcon","ContentIcons","SystemIcons"],"sources":["../../src/icons/index.tsx"],"sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport { Tooltip, TooltipTrigger } from '../Tooltips/TooltipStyles';\n\nexport type BaseProps = {\n children?: any;\n tooltip?: string;\n tooltipId?: string;\n}\n\nexport interface IconProps extends Omit<React.AriaAttributes, 'className' | 'color' | 'size' | 'label'> {\n label?: string;\n className?: string;\n color?: string;\n size?: string;\n viewBox?: string;\n};\n\n/**\n * Retrieves the size of the icon.\n * @param size - Original size which was passed to the icon.\n * @returns Numeric value indicating the size of the icon.\n */\nexport const getSize = (size: string) => {\n if (typeof size === 'string' && size.indexOf('px') === -1) {\n return `${size}px`;\n } else {\n return size;\n }\n};\n\nconst Container = styled.div`\n position: relative;\n ${TooltipTrigger('hover')}\n`;\n\nconst renderIcon = (children: React.ReactNode, tooltip?: string, tooltipId?: string) => {\n return tooltip ? (\n <Container>\n {children}\n <Tooltip id={tooltipId}>{tooltip}</Tooltip>\n </Container>\n ) : (\n <>\n {children}\n </>\n );\n}\n\nconst gTagsRegex = new RegExp(/<g [A-Za-z\\W\\D]*>/,'g'); // matches <g id = \".....\">\nconst fillColorRegex = new RegExp(/fill=\"#[A-F0-9]*\"/,'g'); // matches fill=\"#1F1F1F\"\n\nexport const formatSvgString = (text: string, color: string): string => {\n return text.replace(gTagsRegex, '')\n .replaceAll('</g>','')\n .replace(fillColorRegex, `fill=\"${color}\"`);\n}\n\nexport const SystemIcon: React.FunctionComponent<BaseProps> = ({ children, tooltip = '', tooltipId = '' }) => {\n return renderIcon(children, tooltip, tooltipId);\n};\n\nexport const ContentIcon: React.FunctionComponent<BaseProps> = ({ children, tooltip = '', tooltipId = '' }) => {\n return renderIcon(children, tooltip, tooltipId);\n};\n\nexport * as ContentIcons from './contenticons';\nexport * as SystemIcons from './systemicons';\n"],"mappings":";;;AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,OAAOC,MAAM,MAAM,mBAAmB;AACtC,SAASC,OAAO,EAAEC,cAAc,QAAQ,2BAA2B;AAAC;AAAA;AAAA;AAcnE;;AAED;AACA;AACA;AACA;AACA;AACA,OAAO,IAAMC,OAAO,GAAG,SAAVA,OAAO,CAAIC,IAAY,EAAK;EACvC,IAAI,OAAOA,IAAI,KAAK,QAAQ,IAAIA,IAAI,CAACC,OAAO,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,EAAE;IACzD,iBAAUD,IAAI;EAChB,CAAC,MAAM;IACL,OAAOA,IAAI;EACb;AACF,CAAC;AAED,IAAME,SAAS,GAAGN,MAAM,CAACO,GAAG,uGAExBL,cAAc,CAAC,OAAO,CAAC,CAC1B;AAED,IAAMM,UAAU,GAAG,SAAbA,UAAU,CAAIC,QAAyB,EAAEC,OAAgB,EAAEC,SAAkB,EAAK;EACtF,OAAOD,OAAO,gBACZ,MAAC,SAAS;IAAA,WACPD,QAAQ,eACT,KAAC,OAAO;MAAC,EAAE,EAAEE,SAAU;MAAA,UAAED;IAAO,EAAW;EAAA,EACjC,gBAEZ;IAAA,UACGD;EAAQ,EAEZ;AACH,CAAC;AAED,IAAMG,UAAU,GAAG,IAAIC,MAAM,CAAC,mBAAmB,EAAC,GAAG,CAAC,CAAC,CAAC;AACxD,IAAMC,cAAc,GAAG,IAAID,MAAM,CAAC,mBAAmB,EAAC,GAAG,CAAC,CAAC,CAAC;;AAE5D,OAAO,IAAME,eAAe,GAAG,SAAlBA,eAAe,CAAIC,IAAY,EAAEC,KAAa,EAAa;EACtE,OAAOD,IAAI,CAACE,OAAO,CAACN,UAAU,EAAE,EAAE,CAAC,CACvBO,UAAU,CAAC,MAAM,EAAC,EAAE,CAAC,CACrBD,OAAO,CAACJ,cAAc,mBAAWG,KAAK,QAAI;AACxD,CAAC;AAED,OAAO,IAAMG,UAA8C,GAAG,SAAjDA,UAA8C,OAAmD;EAAA,IAA7CX,QAAQ,QAARA,QAAQ;IAAA,oBAAEC,OAAO;IAAPA,OAAO,6BAAG,EAAE;IAAA,sBAAEC,SAAS;IAATA,SAAS,+BAAG,EAAE;EACrG,OAAOH,UAAU,CAACC,QAAQ,EAAEC,OAAO,EAAEC,SAAS,CAAC;AACjD,CAAC;AAAC;EAvDAF,QAAQ;EACRC,OAAO;EACPC,SAAS;AAAA;AAuDX,OAAO,IAAMU,WAA+C,GAAG,SAAlDA,WAA+C,QAAmD;EAAA,IAA7CZ,QAAQ,SAARA,QAAQ;IAAA,sBAAEC,OAAO;IAAPA,OAAO,8BAAG,EAAE;IAAA,wBAAEC,SAAS;IAATA,SAAS,gCAAG,EAAE;EACtG,OAAOH,UAAU,CAACC,QAAQ,EAAEC,OAAO,EAAEC,SAAS,CAAC;AACjD,CAAC;AAAC;EA3DAF,QAAQ;EACRC,OAAO;EACPC,SAAS;AAAA;AAAA,+BA2DoB,gBAAgB;AAAA,0BAAnCW,YAAY;AAAA,8BACK,eAAe;AAAA,yBAAhCC,WAAW"}
|