@laerdal/life-react-components 1.0.1-dev.36.full → 1.0.1-dev.41.full

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 (51) hide show
  1. package/dist/esm/Button/Iconbutton.js +8 -6
  2. package/dist/esm/Button/Iconbutton.js.map +1 -1
  3. package/dist/esm/Dropdown/BasicDropdown.js +2 -6
  4. package/dist/esm/Dropdown/BasicDropdown.js.map +1 -1
  5. package/dist/esm/Dropdown/ChipDropdownInput.js +1 -3
  6. package/dist/esm/Dropdown/ChipDropdownInput.js.map +1 -1
  7. package/dist/esm/Dropdown/DropdownButton.js +19 -1
  8. package/dist/esm/Dropdown/DropdownButton.js.map +1 -1
  9. package/dist/esm/Dropdown/DropdownContent.js +4 -4
  10. package/dist/esm/Dropdown/DropdownContent.js.map +1 -1
  11. package/dist/esm/Dropdown/DropdownFilter.js +2 -0
  12. package/dist/esm/Dropdown/DropdownFilter.js.map +1 -1
  13. package/dist/esm/HyperLink/index.js +2 -1
  14. package/dist/esm/HyperLink/index.js.map +1 -1
  15. package/dist/esm/Toasters/Toast.js +6 -14
  16. package/dist/esm/Toasters/Toast.js.map +1 -1
  17. package/dist/js/Button/Iconbutton.d.ts +4 -3
  18. package/dist/js/Button/Iconbutton.js +7 -5
  19. package/dist/js/Button/Iconbutton.js.map +1 -1
  20. package/dist/js/Dropdown/BasicDropdown.js +2 -8
  21. package/dist/js/Dropdown/BasicDropdown.js.map +1 -1
  22. package/dist/js/Dropdown/ChipDropdownInput.js +1 -3
  23. package/dist/js/Dropdown/ChipDropdownInput.js.map +1 -1
  24. package/dist/js/Dropdown/DropdownButton.js +20 -1
  25. package/dist/js/Dropdown/DropdownButton.js.map +1 -1
  26. package/dist/js/Dropdown/DropdownContent.js +4 -4
  27. package/dist/js/Dropdown/DropdownContent.js.map +1 -1
  28. package/dist/js/Dropdown/DropdownFilter.js +2 -0
  29. package/dist/js/Dropdown/DropdownFilter.js.map +1 -1
  30. package/dist/js/HyperLink/index.d.ts +2 -1
  31. package/dist/js/HyperLink/index.js +14 -0
  32. package/dist/js/HyperLink/index.js.map +1 -1
  33. package/dist/js/Toasters/Toast.js +5 -3
  34. package/dist/js/Toasters/Toast.js.map +1 -1
  35. package/dist/umd/Button/Iconbutton.js +8 -6
  36. package/dist/umd/Button/Iconbutton.js.map +1 -1
  37. package/dist/umd/Dropdown/BasicDropdown.js +2 -6
  38. package/dist/umd/Dropdown/BasicDropdown.js.map +1 -1
  39. package/dist/umd/Dropdown/ChipDropdownInput.js +1 -3
  40. package/dist/umd/Dropdown/ChipDropdownInput.js.map +1 -1
  41. package/dist/umd/Dropdown/DropdownButton.js +19 -1
  42. package/dist/umd/Dropdown/DropdownButton.js.map +1 -1
  43. package/dist/umd/Dropdown/DropdownContent.js +4 -4
  44. package/dist/umd/Dropdown/DropdownContent.js.map +1 -1
  45. package/dist/umd/Dropdown/DropdownFilter.js +2 -0
  46. package/dist/umd/Dropdown/DropdownFilter.js.map +1 -1
  47. package/dist/umd/HyperLink/index.js +7 -5
  48. package/dist/umd/HyperLink/index.js.map +1 -1
  49. package/dist/umd/Toasters/Toast.js +9 -18
  50. package/dist/umd/Toasters/Toast.js.map +1 -1
  51. package/package.json +1 -1
@@ -1 +1 @@
1
- {"version":3,"sources":["../../../src/Dropdown/DropdownContent.tsx"],"names":["React","useLayoutEffect","createRef","styled","Button","Size","ButtonDropdownContentStyling","DropdownButton","COLORS","Checkbox","RadioButton","DDContainer","div","white","props","width","isButton","alignLeft","neutral_100","size","Large","Medium","scrollable","maxHeight","ListContainer","itemsType","neutral_600","neutral_500","ItemsContainer","TopItemContainer","neutral_200","ActionButtonContainer","MAX_MENU_HEIGHT","AVG_OPTION_HEIGHT","DropdownContent","id","customizationProps","isOpen","hideOnClickOutside","setIsOpen","filter","focused","setFocused","selectedValues","setSelectedValues","messageOnNoResults","isUp","setIsUp","useState","dropdownContentRef","useRef","Small","itemsListRef","determineDropUp","options","items","node","current","windowHeight","window","innerHeight","menuHeight","Math","min","length","instOffsetWithMenu","getBoundingClientRect","top","setNewFocusedElement","index","newFocusedElement","elRefs","focus","handleKeyDown","e","keyCode","preventDefault","focusedNow","undefined","document","getElementById","handleClickOutside","contains","target","some","x","useEffect","addEventListener","removeEventListener","scrollPosition","handleScroll","scrollTop","getFilteredItems","filtrationString","toUpperCase","value","includes","displayLabel","getCorrectRef","ref","arrLength","setElRefs","Array","fill","map","_","i","haveTopItem","multiSelect","getSuggestions","suggestion","focusThis","console","log","getTopItem","pinTopItem","visibleItems","allSelected","y","showTopItem","suggestions","selected","newValues","onValueUpdate","icon","noteLabel","fontSize","getElements","number","item","disabled","newValue","showDividerAbove","join","action","actionLabel"],"mappings":"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","sourcesContent":["import React, { useLayoutEffect, useMemo, createRef } from 'react';\nimport styled, { css } from 'styled-components';\nimport { CommonInteractionStyling } from '../common';\nimport Button from '../Button/Button';\nimport { Size } from '../types';\nimport { ButtonDropdownContentStyling, DropdownButton } from './CommonStyling';\nimport { BREAKPOINTS, COLORS } from '../styles';\nimport { Checkbox, RadioButton } from '../InputFields';\n\nexport const DDContainer = styled.div<{ isButton: boolean; width?: string; alignLeft?: boolean; size?: Size; scrollable?: boolean; maxHeight?: string }>`\n display: none;\n position: absolute;\n background-color: ${COLORS.white};\n \n width: ${props => props.width ? props.width : '100%'};\n z-index: 1;\n margin: ${props => (props.isButton ? '-4px' : '4px 0px')};\n\n &.show {\n display: flex;\n flex-direction: column;\n justify-content: center;\n }\n\n &.up {\n top: auto;\n bottom: 100%;\n }\n\n ${props => (props.alignLeft ? 'left: 0px;' : '')}\n\n ${props => (props.isButton ? ButtonDropdownContentStyling : '')};\n\n border: 1px solid ${COLORS.neutral_100};\n box-sizing: border-box;\n box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.15);\n padding-top: 4px;\n padding-right: 0px;\n padding-bottom: 4px;\n padding-left: 0px;\n\n min-width: ${props => (props.size == Size.Large ? '320px' : props.size == Size.Medium ? '280px' : '240px')};\n border-radius: ${props => (props.size == Size.Large ? '10px' : props.size == Size.Medium ? '8px' : '6px')};\n\n max-height: ${props => (!props.scrollable ? 'auto' : props.maxHeight ? props.maxHeight : props.size == Size.Large ? '320px' : props.size == Size.Medium ? '280px' : '240px')};\n`;\n\nconst ListContainer = styled.div<{ scrollable?: boolean, size? : Size, itemsType?: string }>`\n ${props => (props.scrollable ? 'overflow-y: scroll;' : '')}\n ${props => (props.itemsType != 'normal' ? 'margin-left: 4px;' : '')}\n\n div {\n padding-top: ${props => props.size == Size.Large ? '8px' : props.size == Size.Medium ? '4px' : '0px' };\n padding-bottom: ${props => props.size == Size.Large ? '8px' : props.size == Size.Medium ? '4px' : '0px' };\n }\n\n /* width */\n ::-webkit-scrollbar {\n width: 4px;\n margin: 0 6px;\n cursor: pointer;\n }\n\n /* Track */\n ::-webkit-scrollbar-track {\n background: ${COLORS.neutral_100};\n border-radius: 8px;\n }\n\n /* Handle */\n ::-webkit-scrollbar-thumb {\n background: ${COLORS.neutral_600};\n border-radius: 8px;\n }\n\n /* Handle on hover */\n ::-webkit-scrollbar-thumb:hover {\n background: ${COLORS.neutral_500};\n }\n`;\n\nconst ItemsContainer = styled.div`\n`;\n\n\nconst TopItemContainer = styled.div`\n border-bottom-style: solid;\n border-bottom-color: ${COLORS.neutral_200};\n border-bottom-width: 1px;\n margin-right: 22px; \n`;\n\nconst ActionButtonContainer = styled.div`\n border-top-style: solid;\n border-top-color: ${COLORS.neutral_200};\n border-top-width: 1px;\n padding: 0px 16px 4px 16px;\n\n button {\n width: 100%;\n }\n`;\n\nconst MAX_MENU_HEIGHT = 240;\nconst AVG_OPTION_HEIGHT = 48;\n\nexport interface DropdownItem {\n value: string;\n displayLabel?: string;\n noteLabel?: string;\n suggestion?: boolean;\n showDividerAbove?: boolean;\n disabled?: boolean;\n icon?: React.ReactNode;\n}\n\nexport interface DropdownCustomizationProps {\n itemsType?: 'radio' | 'checkbox' | 'normal';\n scrollable?: boolean;\n multiSelect?: boolean;\n maxHeight?: string;\n actionLabel?: string;\n action: () => void;\n pinTopItem?: boolean;\n onValueUpdate: (values: string[]) => void;\n items: DropdownItem[];\n}\n\nexport interface DropdownProps {\n isButton: boolean;\n customizationProps: DropdownCustomizationProps;\n alignLeft?: boolean;\n isOpen: boolean;\n setIsOpen: (open: boolean) => void;\n size?: Size;\n id: string;\n filter: string;\n width?: string;\n hideOnClickOutside: boolean;\n selectedValues: string[];\n setSelectedValues: (val: string[]) => void;\n messageOnNoResults: string;\n focused: number | null;\n setFocused: (focused: number | null) => void;\n}\n\nconst DropdownContent: React.FunctionComponent<DropdownProps> = ({\n id,\n customizationProps,\n alignLeft,\n isButton,\n size,\n isOpen,\n hideOnClickOutside,\n width,\n setIsOpen,\n filter,\n focused, \n setFocused,\n selectedValues,\n setSelectedValues,\n messageOnNoResults\n}) => {\n const [isUp, setIsUp] = React.useState<boolean>(false);\n const dropdownContentRef = React.useRef<HTMLDivElement>(null);\n\n if(!customizationProps.itemsType) customizationProps.itemsType = 'normal';\n if(!size) size = Size.Small;\n\n const itemsListRef = React.useRef<HTMLDivElement>(null);\n\n const determineDropUp = () => {\n const options = customizationProps.items;\n const node = dropdownContentRef.current;\n\n if (!node) return;\n\n const windowHeight = window.innerHeight;\n const menuHeight = Math.min(MAX_MENU_HEIGHT, options.length * AVG_OPTION_HEIGHT);\n const instOffsetWithMenu = node.getBoundingClientRect().top + menuHeight;\n setIsUp(instOffsetWithMenu >= windowHeight);\n };\n\n const setNewFocusedElement = (index: number) => {\n const newFocusedElement = elRefs[index];\n if (newFocusedElement) {\n setFocused(index);\n newFocusedElement?.current?.focus();\n }\n };\n \n const handleKeyDown = (e: any) => {\n if (isOpen) {\n if (e.keyCode === 38) {\n e.preventDefault();\n var focusedNow = focused;\n if (focusedNow !== undefined && focusedNow !== null && focusedNow > 0) {\n focusedNow -= 1;\n setNewFocusedElement(focusedNow);\n }\n } else if (e.keyCode === 40) {\n e.preventDefault();\n var focusedNow = focused;\n if (focusedNow !== undefined && focusedNow !== null) {\n focusedNow++;\n } else {\n focusedNow = 0;\n }\n setNewFocusedElement(focusedNow);\n } else if (e.keyCode === 9) {\n e.preventDefault();\n var focusedNow = focused;\n if (focusedNow !== undefined && focusedNow !== null) {\n focusedNow++;\n const newFocusedElement = document.getElementById(`${id}_${focusedNow}`);\n if (!newFocusedElement) {\n setNewFocusedElement(0);\n } else {\n setNewFocusedElement(focusedNow);\n }\n } else {\n setNewFocusedElement(0);\n }\n } else if (e.keyCode === 27) {\n setIsOpen(false);\n setNewFocusedElement(0);\n\n //TODO: add onEscapehandler\n /*\n if (!list.includes(input)) {\n setInput('');\n setPlaceholderSearch(placeholder || '');\n }\n styledFieldRef.current?.focus(); */\n }\n }\n };\n\n const handleClickOutside = (e: any) => {\n if (hideOnClickOutside && dropdownContentRef?.current && !dropdownContentRef.current.contains(e.target) && !elRefs.some(x => x?.current?.contains(e.target))) {\n if (isOpen) {\n setIsOpen(false);\n setFocused(null);\n }\n }\n };\n\n React.useEffect(() => {\n document.addEventListener('keydown', handleKeyDown);\n document.addEventListener('click', handleClickOutside);\n return () => {\n document.removeEventListener('keydown', handleKeyDown);\n document.removeEventListener('click', handleClickOutside);\n };\n });\n\n const scrollPosition = React.useRef<number | undefined>(0); \n const handleScroll = () => {\n scrollPosition.current = itemsListRef.current?.scrollTop;\n }\n useLayoutEffect(() => {\n if (itemsListRef.current) itemsListRef.current.scrollTop = scrollPosition.current ?? 0;\n }, [selectedValues]);\n\n const getFilteredItems = () => {\n const filtrationString = (filter ?? '').toUpperCase();\n return customizationProps.items.\n filter(x => x?.value?.toUpperCase().includes(filtrationString) || x?.displayLabel?.toUpperCase().includes(filtrationString));\n };\n\n const getCorrectRef = (ref: React.RefObject<HTMLElement>): React.RefObject<HTMLElement> => {\n switch(customizationProps.itemsType)\n {\n case 'normal':\n return ref as React.RefObject<HTMLButtonElement> || createRef<HTMLButtonElement>();\n default:\n return ref as React.RefObject<HTMLDivElement> || createRef<HTMLDivElement>();\n }\n }\n\n const arrLength = getFilteredItems().length;\n const [elRefs, setElRefs] = React.useState<React.RefObject<HTMLElement>[]>([]);\n\n React.useEffect(() => {\n setElRefs(elRefs => \n Array(arrLength + 1).fill(null)\n .map((_, i) => getCorrectRef(elRefs[i])));\n }, [isOpen, arrLength, selectedValues]);\n \n React.useEffect(() => {\n determineDropUp();\n }, [isOpen]);\n\n\n const haveTopItem = () => {\n if (customizationProps.itemsType == 'radio' && selectedValues && selectedValues?.length > 0) return true;\n else if (customizationProps.itemsType == 'checkbox' && (customizationProps.multiSelect || selectedValues?.length > 0)) return true;\n else if (customizationProps.itemsType == 'normal' && getSuggestions()?.length > 0) return true;\n return false;\n };\n \n const getSuggestions = () => {\n return getFilteredItems().filter(x => x.suggestion);\n }\n\n React.useLayoutEffect(() => {\n if (isOpen && (focused || focused == 0)) {\n const focusThis = focused == 0 && !haveTopItem() ? 1 : focused;\n if(focusThis != focused)\n setFocused(focusThis);\n const newFocusedElement = elRefs[focusThis];\n console.log(newFocusedElement);\n newFocusedElement?.current?.focus();\n }\n }, [isOpen]);\n\n \n\n const getTopItem = () => {\n if (!customizationProps.pinTopItem) return;\n const visibleItems = getFilteredItems();\n const allSelected = selectedValues?.filter(x => visibleItems.some(y => y.value == x)).length == visibleItems.length;\n let showTopItem = false;\n const suggestions = getSuggestions();\n\n if (customizationProps.itemsType == 'radio' && selectedValues && selectedValues?.length > 0) showTopItem = true;\n else if (customizationProps.itemsType == 'checkbox' && (customizationProps.multiSelect || selectedValues?.length > 0)) showTopItem = true;\n else if (customizationProps.itemsType == 'normal' && suggestions.length > 0) showTopItem = true;\n\n if (!showTopItem) return;\n \n return (\n <TopItemContainer>\n {customizationProps.itemsType == 'radio' && (\n <RadioButton\n ref={elRefs[0] as React.RefObject<HTMLDivElement>}\n iconPointerEventsTransparent={true}\n select={() => {}} size={size} id={`${id}_topitem`} label={selectedValues[0]} selected={true} />\n )}\n {customizationProps.itemsType == 'checkbox' && (\n <Checkbox\n ref={elRefs[0] as React.RefObject<HTMLDivElement>}\n select={(selected: boolean) => {\n if (!customizationProps.multiSelect) return;\n\n const newValues = selected ? visibleItems.map(x => x.value) : [];\n setSelectedValues(newValues);\n customizationProps.onValueUpdate && customizationProps.onValueUpdate(newValues);\n }}\n iconPointerEventsTransparent={true}\n semiSelected={customizationProps.multiSelect && !allSelected && selectedValues?.length > 0}\n size={size}\n id={`${id}_checkbox_selectall`}\n label={customizationProps.multiSelect ? 'Select all' : selectedValues[0]}\n selected={!customizationProps.multiSelect || allSelected}\n />\n )}\n {customizationProps.itemsType == 'normal' && (\n <>\n {suggestions.map(x => \n <DropdownButton ref={elRefs[0] as React.RefObject<HTMLButtonElement>} type=\"button\" id={`${id}_topitem`}\n onClick={(e: any) => {\n customizationProps.onValueUpdate([x.value]);\n setSelectedValues([x.value]);\n setIsOpen(false);\n setFocused(null);\n }}>\n <div className=\"item-content\">\n {x?.icon && <div className=\"item-icon\">{x?.icon}</div>}\n <div className=\"item-label\">\n {x?.displayLabel ?? x?.value}\n {x?.noteLabel && <div style={{fontSize: '12px'}}>{x.noteLabel}</div>}\n </div>\n </div>\n </DropdownButton>)}\n </>\n )}\n </TopItemContainer>\n );\n };\n\n const getElements = () => {\n if (getFilteredItems().length === 0) {\n return (\n <ItemsContainer>\n <DropdownButton disabled>\n <span>{messageOnNoResults}</span>\n </DropdownButton>\n </ItemsContainer>\n );\n }\n let number = 0;\n return (\n <ItemsContainer>\n {getFilteredItems().filter(x => x && (customizationProps.itemsType != 'normal' || !x.suggestion)).map(item => {\n return (\n <>\n {customizationProps.itemsType == 'radio' && (\n <RadioButton\n select={(selected: boolean) => {\n if (!selected) return;\n customizationProps.onValueUpdate && customizationProps.onValueUpdate([item.value]);\n setSelectedValues([item.value]);\n }}\n ref={elRefs[number + 1] as React.RefObject<HTMLDivElement>}\n size={size}\n iconPointerEventsTransparent={true}\n disabled={item?.disabled}\n key={`key_${id}_${number++}`}\n id={`${id}_${number + 1}`}\n label={item.value}\n selected={selectedValues?.includes(item.value)}\n />\n )}\n {customizationProps.itemsType == 'checkbox' && (\n <Checkbox\n select={(selected: boolean) => {\n let newValue: string[] = [];\n if (customizationProps.multiSelect) {\n if (selected) newValue = [...selectedValues, item.value];\n else newValue = selectedValues.filter(x => x != item.value);\n } else newValue = selected ? [item.value] : [];\n\n setSelectedValues(newValue);\n customizationProps.onValueUpdate(newValue);\n }}\n iconPointerEventsTransparent={true}\n disabled={item?.disabled} \n ref={elRefs[number + 1] as React.RefObject<HTMLDivElement>}\n size={size}\n key={`key_${id}_${number++}`}\n id={`${id}_${number + 1}`}\n label={item.value}\n selected={selectedValues?.includes(item.value)}\n />\n )}\n {(customizationProps.itemsType == 'normal' || !customizationProps.itemsType) && (\n <DropdownButton\n type=\"button\"\n size={size}\n disabled={item?.disabled}\n ref={elRefs[number + 1] as React.RefObject<HTMLButtonElement>}\n onClick={(e: any) => {\n customizationProps.onValueUpdate([item.value]);\n setSelectedValues([item.value]);\n setIsOpen(false);\n setFocused(null);\n }}\n className={ (item.showDividerAbove ? 'show-divider-above' : '') + ' ' + (selectedValues?.includes(item.value) ? 'active' : '')}\n key={`key_${id}_${number++}`}\n id={`${id}_${number + 1}`}>\n {item.showDividerAbove && <div className=\"divider\"/>}\n <div className=\"item-content\">\n {item.icon && <div className=\"item-icon\">{item.icon}</div>}\n <div className=\"item-label\">\n {item.displayLabel ?? item.value}\n {item.noteLabel && <div style={{fontSize: '12px'}}>{item.noteLabel}</div>}\n </div>\n </div>\n </DropdownButton>\n )}\n </>\n );\n })}\n </ItemsContainer>\n );\n };\n\n return <DDContainer\n ref={dropdownContentRef}\n size={size}\n width={width}\n isButton={isButton}\n alignLeft={alignLeft}\n scrollable={customizationProps.scrollable}\n maxHeight={customizationProps.maxHeight}\n className={[isOpen && 'show', isUp && 'up'].filter(e => !!e).join(' ')}>\n <ListContainer size={size} itemsType={customizationProps.itemsType} onScroll={handleScroll} ref={itemsListRef} scrollable={customizationProps.scrollable}>\n {customizationProps.pinTopItem && getTopItem()}\n {getElements()}\n </ListContainer>\n {customizationProps.action && customizationProps.actionLabel && (\n <ActionButtonContainer>\n <Button width=\"100%\" variant=\"primary\" size={size} onClick={() => customizationProps.action()}>\n {customizationProps.actionLabel}\n </Button>\n </ActionButtonContainer>\n )}\n </DDContainer>;\n /* ),\n {\n handleClickOutside: () => () => {\n if (isOpen) {\n setIsOpen(false);\n setFocused(null);\n }\n },\n },\n );\n\n return <Wrapped />; */\n};\n\nexport default DropdownContent;\n"],"file":"DropdownContent.js"}
1
+ {"version":3,"sources":["../../../src/Dropdown/DropdownContent.tsx"],"names":["React","useLayoutEffect","createRef","styled","Button","Size","ButtonDropdownContentStyling","DropdownButton","COLORS","Checkbox","RadioButton","DDContainer","div","white","props","width","isButton","alignLeft","neutral_100","size","Large","Medium","scrollable","maxHeight","ListContainer","itemsType","neutral_600","neutral_500","ItemsContainer","TopItemContainer","neutral_200","ActionButtonContainer","MAX_MENU_HEIGHT","AVG_OPTION_HEIGHT","DropdownContent","id","customizationProps","isOpen","hideOnClickOutside","setIsOpen","filter","focused","setFocused","selectedValues","setSelectedValues","messageOnNoResults","isUp","setIsUp","useState","dropdownContentRef","useRef","Small","itemsListRef","determineDropUp","options","items","node","current","windowHeight","window","innerHeight","menuHeight","Math","min","length","instOffsetWithMenu","getBoundingClientRect","top","setNewFocusedElement","index","newFocusedElement","elRefs","focus","handleKeyDown","e","keyCode","preventDefault","focusedNow","undefined","document","getElementById","handleClickOutside","contains","target","some","x","useEffect","addEventListener","removeEventListener","scrollPosition","handleScroll","scrollTop","getFilteredItems","filtrationString","toUpperCase","value","includes","displayLabel","getCorrectRef","ref","arrLength","setElRefs","Array","fill","map","_","i","haveTopItem","multiSelect","getSuggestions","suggestion","focusThis","getTopItem","pinTopItem","visibleItems","allSelected","y","showTopItem","suggestions","selected","newValues","onValueUpdate","icon","noteLabel","fontSize","getElements","number","item","disabled","newValue","showDividerAbove","join","action","actionLabel"],"mappings":"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","sourcesContent":["import React, { useLayoutEffect, useMemo, createRef } from 'react';\nimport styled, { css } from 'styled-components';\nimport { CommonInteractionStyling } from '../common';\nimport Button from '../Button/Button';\nimport { Size } from '../types';\nimport { ButtonDropdownContentStyling, DropdownButton } from './CommonStyling';\nimport { BREAKPOINTS, COLORS } from '../styles';\nimport { Checkbox, RadioButton } from '../InputFields';\n\nexport const DDContainer = styled.div<{ isButton: boolean; width?: string; alignLeft?: boolean; size?: Size; scrollable?: boolean; maxHeight?: string }>`\n display: none;\n position: absolute;\n background-color: ${COLORS.white};\n \n width: ${props => props.width ? props.width : '100%'};\n z-index: 1;\n margin: ${props => (props.isButton ? '-4px' : '4px 0px')};\n\n &.show {\n display: flex;\n flex-direction: column;\n justify-content: center;\n }\n\n &.up {\n top: auto;\n bottom: 100%;\n }\n\n ${props => (props.alignLeft ? 'left: 0px;' : '')}\n\n ${props => (props.isButton ? ButtonDropdownContentStyling : '')};\n\n border: 1px solid ${COLORS.neutral_100};\n box-sizing: border-box;\n box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.15);\n padding-top: 4px;\n padding-right: 0px;\n padding-bottom: 4px;\n padding-left: 0px;\n\n min-width: ${props => (props.size == Size.Large ? '320px' : props.size == Size.Medium ? '280px' : '240px')};\n border-radius: ${props => (props.size == Size.Large ? '10px' : props.size == Size.Medium ? '8px' : '6px')};\n\n max-height: ${props => (!props.scrollable ? 'auto' : props.maxHeight ? props.maxHeight : props.size == Size.Large ? '320px' : props.size == Size.Medium ? '280px' : '240px')};\n`;\n\nconst ListContainer = styled.div<{ scrollable?: boolean, size? : Size, itemsType?: string }>`\n ${props => (props.scrollable ? 'overflow-y: scroll;' : '')}\n ${props => (props.itemsType != 'normal' ? 'margin-left: 4px;' : '')}\n\n div {\n padding-top: ${props => props.size == Size.Large ? '8px' : props.size == Size.Medium ? '4px' : '0px' };\n padding-bottom: ${props => props.size == Size.Large ? '8px' : props.size == Size.Medium ? '4px' : '0px' };\n }\n\n /* width */\n ::-webkit-scrollbar {\n width: 4px;\n margin: 0 6px;\n cursor: pointer;\n }\n\n /* Track */\n ::-webkit-scrollbar-track {\n background: ${COLORS.neutral_100};\n border-radius: 8px;\n }\n\n /* Handle */\n ::-webkit-scrollbar-thumb {\n background: ${COLORS.neutral_600};\n border-radius: 8px;\n }\n\n /* Handle on hover */\n ::-webkit-scrollbar-thumb:hover {\n background: ${COLORS.neutral_500};\n }\n`;\n\nconst ItemsContainer = styled.div`\n`;\n\n\nconst TopItemContainer = styled.div`\n border-bottom-style: solid;\n border-bottom-color: ${COLORS.neutral_200};\n border-bottom-width: 1px;\n margin-right: 22px; \n`;\n\nconst ActionButtonContainer = styled.div`\n border-top-style: solid;\n border-top-color: ${COLORS.neutral_200};\n border-top-width: 1px;\n padding: 0px 16px 4px 16px;\n\n button {\n width: 100%;\n }\n`;\n\nconst MAX_MENU_HEIGHT = 240;\nconst AVG_OPTION_HEIGHT = 48;\n\nexport interface DropdownItem {\n value: string;\n displayLabel?: string;\n noteLabel?: string;\n suggestion?: boolean;\n showDividerAbove?: boolean;\n disabled?: boolean;\n icon?: React.ReactNode;\n}\n\nexport interface DropdownCustomizationProps {\n itemsType?: 'radio' | 'checkbox' | 'normal';\n scrollable?: boolean;\n multiSelect?: boolean;\n maxHeight?: string;\n actionLabel?: string;\n action: () => void;\n pinTopItem?: boolean;\n onValueUpdate: (values: string[]) => void;\n items: DropdownItem[];\n}\n\nexport interface DropdownProps {\n isButton: boolean;\n customizationProps: DropdownCustomizationProps;\n alignLeft?: boolean;\n isOpen: boolean;\n setIsOpen: (open: boolean) => void;\n size?: Size;\n id: string;\n filter: string;\n width?: string;\n hideOnClickOutside: boolean;\n selectedValues: string[];\n setSelectedValues: (val: string[]) => void;\n messageOnNoResults: string;\n focused: number | null;\n setFocused: (focused: number | null) => void;\n}\n\nconst DropdownContent: React.FunctionComponent<DropdownProps> = ({\n id,\n customizationProps,\n alignLeft,\n isButton,\n size,\n isOpen,\n hideOnClickOutside,\n width,\n setIsOpen,\n filter,\n focused, \n setFocused,\n selectedValues,\n setSelectedValues,\n messageOnNoResults\n}) => {\n const [isUp, setIsUp] = React.useState<boolean>(false);\n const dropdownContentRef = React.useRef<HTMLDivElement>(null);\n\n if(!customizationProps.itemsType) customizationProps.itemsType = 'normal';\n if(!size) size = Size.Small;\n\n const itemsListRef = React.useRef<HTMLDivElement>(null);\n\n const determineDropUp = () => {\n const options = customizationProps.items;\n const node = dropdownContentRef.current;\n\n if (!node) return;\n\n const windowHeight = window.innerHeight;\n const menuHeight = Math.min(MAX_MENU_HEIGHT, options.length * AVG_OPTION_HEIGHT);\n const instOffsetWithMenu = node.getBoundingClientRect().top + menuHeight;\n setIsUp(instOffsetWithMenu >= windowHeight);\n };\n\n const setNewFocusedElement = (index: number) => {\n const newFocusedElement = elRefs[index];\n if (newFocusedElement) {\n setFocused(index);\n newFocusedElement?.current?.focus();\n }\n };\n \n const handleKeyDown = (e: any) => {\n if (isOpen) {\n if (e.keyCode === 38) {\n e.preventDefault();\n var focusedNow = focused;\n if (focusedNow !== undefined && focusedNow !== null && focusedNow > 0) {\n focusedNow -= 1;\n setNewFocusedElement(focusedNow);\n }\n } else if (e.keyCode === 40) {\n e.preventDefault();\n var focusedNow = focused;\n if (focusedNow !== undefined && focusedNow !== null) {\n focusedNow++;\n } else {\n focusedNow = 0;\n }\n setNewFocusedElement(focusedNow);\n } else if (e.keyCode === 9) {\n e.preventDefault();\n var focusedNow = focused;\n if (focusedNow !== undefined && focusedNow !== null) {\n focusedNow++;\n const newFocusedElement = document.getElementById(`${id}_${focusedNow}`);\n if (!newFocusedElement) {\n setNewFocusedElement(0);\n } else {\n setNewFocusedElement(focusedNow);\n }\n } else {\n setFocused(null);\n }\n } else if (e.keyCode === 27) {\n setIsOpen(false);\n setFocused(null);\n\n //TODO: add onEscapehandler\n /*\n if (!list.includes(input)) {\n setInput('');\n setPlaceholderSearch(placeholder || '');\n }\n styledFieldRef.current?.focus(); */\n }\n }\n };\n\n const handleClickOutside = (e: any) => {\n if (hideOnClickOutside && dropdownContentRef?.current && !dropdownContentRef.current.contains(e.target) && !elRefs.some(x => x?.current?.contains(e.target))) {\n if (isOpen) {\n setIsOpen(false);\n setFocused(null);\n }\n }\n };\n\n React.useEffect(() => {\n document.addEventListener('keydown', handleKeyDown);\n document.addEventListener('click', handleClickOutside);\n return () => {\n document.removeEventListener('keydown', handleKeyDown);\n document.removeEventListener('click', handleClickOutside);\n };\n });\n\n const scrollPosition = React.useRef<number | undefined>(0); \n const handleScroll = () => {\n scrollPosition.current = itemsListRef.current?.scrollTop;\n }\n useLayoutEffect(() => {\n if (itemsListRef.current) itemsListRef.current.scrollTop = scrollPosition.current ?? 0;\n }, [selectedValues]);\n\n const getFilteredItems = () => {\n const filtrationString = (filter ?? '').toUpperCase();\n return customizationProps.items.\n filter(x => x?.value?.toUpperCase().includes(filtrationString) || x?.displayLabel?.toUpperCase().includes(filtrationString));\n };\n\n const getCorrectRef = (ref: React.RefObject<HTMLElement>): React.RefObject<HTMLElement> => {\n switch(customizationProps.itemsType)\n {\n case 'normal':\n return ref as React.RefObject<HTMLButtonElement> || createRef<HTMLButtonElement>();\n default:\n return ref as React.RefObject<HTMLDivElement> || createRef<HTMLDivElement>();\n }\n }\n\n const arrLength = getFilteredItems().length;\n const [elRefs, setElRefs] = React.useState<React.RefObject<HTMLElement>[]>([]);\n\n React.useEffect(() => {\n setElRefs(elRefs => \n Array(arrLength + 1).fill(null)\n .map((_, i) => getCorrectRef(elRefs[i])));\n }, [isOpen, arrLength, selectedValues]);\n \n React.useEffect(() => {\n determineDropUp();\n }, [isOpen]);\n\n\n const haveTopItem = () => {\n if (customizationProps.itemsType == 'radio' && selectedValues && selectedValues?.length > 0) return true;\n else if (customizationProps.itemsType == 'checkbox' && (customizationProps.multiSelect || selectedValues?.length > 0)) return true;\n else if (customizationProps.itemsType == 'normal' && getSuggestions()?.length > 0) return true;\n return false;\n };\n \n const getSuggestions = () => {\n return getFilteredItems().filter(x => x.suggestion);\n }\n\n React.useLayoutEffect(() => {\n if (isOpen && (focused || focused == 0)) {\n const focusThis = focused == 0 && !haveTopItem() ? 1 : focused;\n if(focusThis != focused)\n setFocused(focusThis);\n const newFocusedElement = elRefs[focusThis];\n newFocusedElement?.current?.focus();\n }\n else\n setFocused(null); //if the dropdown is closed, we don't to keep saved the focused item\n }, [isOpen]);\n\n \n\n const getTopItem = () => {\n if (!customizationProps.pinTopItem) return;\n const visibleItems = getFilteredItems();\n const allSelected = selectedValues?.filter(x => visibleItems.some(y => y.value == x)).length == visibleItems.length;\n let showTopItem = false;\n const suggestions = getSuggestions();\n\n if (customizationProps.itemsType == 'radio' && selectedValues && selectedValues?.length > 0) showTopItem = true;\n else if (customizationProps.itemsType == 'checkbox' && (customizationProps.multiSelect || selectedValues?.length > 0)) showTopItem = true;\n else if (customizationProps.itemsType == 'normal' && suggestions.length > 0) showTopItem = true;\n\n if (!showTopItem) return;\n \n return (\n <TopItemContainer>\n {customizationProps.itemsType == 'radio' && (\n <RadioButton\n ref={elRefs[0] as React.RefObject<HTMLDivElement>}\n iconPointerEventsTransparent={true}\n select={() => {}} size={size} id={`${id}_topitem`} label={selectedValues[0]} selected={true} />\n )}\n {customizationProps.itemsType == 'checkbox' && (\n <Checkbox\n ref={elRefs[0] as React.RefObject<HTMLDivElement>}\n select={(selected: boolean) => {\n if (!customizationProps.multiSelect) return;\n\n const newValues = selected ? visibleItems.map(x => x.value) : [];\n setSelectedValues(newValues);\n customizationProps.onValueUpdate && customizationProps.onValueUpdate(newValues);\n }}\n iconPointerEventsTransparent={true}\n semiSelected={customizationProps.multiSelect && !allSelected && selectedValues?.length > 0}\n size={size}\n id={`${id}_checkbox_selectall`}\n label={customizationProps.multiSelect ? 'Select all' : selectedValues[0]}\n selected={!customizationProps.multiSelect || allSelected}\n />\n )}\n {customizationProps.itemsType == 'normal' && (\n <>\n {suggestions.map(x => \n <DropdownButton ref={elRefs[0] as React.RefObject<HTMLButtonElement>} type=\"button\" id={`${id}_topitem`}\n onClick={(e: any) => {\n customizationProps.onValueUpdate([x.value]);\n setSelectedValues([x.value]);\n setIsOpen(false);\n setFocused(null);\n }}>\n <div className=\"item-content\">\n {x?.icon && <div className=\"item-icon\">{x?.icon}</div>}\n <div className=\"item-label\">\n {x?.displayLabel ?? x?.value}\n {x?.noteLabel && <div style={{fontSize: '12px'}}>{x.noteLabel}</div>}\n </div>\n </div>\n </DropdownButton>)}\n </>\n )}\n </TopItemContainer>\n );\n };\n\n const getElements = () => {\n if (getFilteredItems().length === 0) {\n return (\n <ItemsContainer>\n <DropdownButton disabled>\n <span>{messageOnNoResults}</span>\n </DropdownButton>\n </ItemsContainer>\n );\n }\n let number = 0;\n return (\n <ItemsContainer>\n {getFilteredItems().filter(x => x && (customizationProps.itemsType != 'normal' || !x.suggestion)).map(item => {\n return (\n <>\n {customizationProps.itemsType == 'radio' && (\n <RadioButton\n select={(selected: boolean) => {\n if (!selected) return;\n customizationProps.onValueUpdate && customizationProps.onValueUpdate([item.value]);\n setSelectedValues([item.value]);\n }}\n ref={elRefs[number + 1] as React.RefObject<HTMLDivElement>}\n size={size}\n iconPointerEventsTransparent={true}\n disabled={item?.disabled}\n key={`key_${id}_${number++}`}\n id={`${id}_${number + 1}`}\n label={item.value}\n selected={selectedValues?.includes(item.value)}\n />\n )}\n {customizationProps.itemsType == 'checkbox' && (\n <Checkbox\n select={(selected: boolean) => {\n let newValue: string[] = [];\n if (customizationProps.multiSelect) {\n if (selected) newValue = [...selectedValues, item.value];\n else newValue = selectedValues.filter(x => x != item.value);\n } else newValue = selected ? [item.value] : [];\n\n setSelectedValues(newValue);\n customizationProps.onValueUpdate(newValue);\n }}\n iconPointerEventsTransparent={true}\n disabled={item?.disabled} \n ref={elRefs[number + 1] as React.RefObject<HTMLDivElement>}\n size={size}\n key={`key_${id}_${number++}`}\n id={`${id}_${number + 1}`}\n label={item.value}\n selected={selectedValues?.includes(item.value)}\n />\n )}\n {(customizationProps.itemsType == 'normal' || !customizationProps.itemsType) && (\n <DropdownButton\n type=\"button\"\n size={size}\n disabled={item?.disabled}\n ref={elRefs[number + 1] as React.RefObject<HTMLButtonElement>}\n onClick={(e: any) => {\n customizationProps.onValueUpdate([item.value]);\n setSelectedValues([item.value]);\n setIsOpen(false);\n setFocused(null);\n }}\n className={ (item.showDividerAbove ? 'show-divider-above' : '') + ' ' + (selectedValues?.includes(item.value) ? 'active' : '')}\n key={`key_${id}_${number++}`}\n id={`${id}_${number + 1}`}>\n {item.showDividerAbove && <div className=\"divider\"/>}\n <div className=\"item-content\">\n {item.icon && <div className=\"item-icon\">{item.icon}</div>}\n <div className=\"item-label\">\n {item.displayLabel ?? item.value}\n {item.noteLabel && <div style={{fontSize: '12px'}}>{item.noteLabel}</div>}\n </div>\n </div>\n </DropdownButton>\n )}\n </>\n );\n })}\n </ItemsContainer>\n );\n };\n\n return <DDContainer\n ref={dropdownContentRef}\n size={size}\n width={width}\n isButton={isButton}\n alignLeft={alignLeft}\n scrollable={customizationProps.scrollable}\n maxHeight={customizationProps.maxHeight}\n className={[isOpen && 'show', isUp && 'up'].filter(e => !!e).join(' ')}>\n <ListContainer size={size} itemsType={customizationProps.itemsType} onScroll={handleScroll} ref={itemsListRef} scrollable={customizationProps.scrollable}>\n {customizationProps.pinTopItem && getTopItem()}\n {getElements()}\n </ListContainer>\n {customizationProps.action && customizationProps.actionLabel && (\n <ActionButtonContainer>\n <Button width=\"100%\" variant=\"primary\" size={size} onClick={() => customizationProps.action()}>\n {customizationProps.actionLabel}\n </Button>\n </ActionButtonContainer>\n )}\n </DDContainer>;\n /* ),\n {\n handleClickOutside: () => () => {\n if (isOpen) {\n setIsOpen(false);\n setFocused(null);\n }\n },\n },\n );\n\n return <Wrapped />; */\n};\n\nexport default DropdownContent;\n"],"file":"DropdownContent.js"}
@@ -49,12 +49,14 @@ const DropdownFilter = ({
49
49
  setInput(matches[0]);
50
50
  }
51
51
 
52
+ if (!isOpen) setFocused(0);
52
53
  setIsOpen(!isOpen);
53
54
 
54
55
  if (matches.length === 0) {
55
56
  setInput('');
56
57
  }
57
58
  } else if (e.keyCode === 40) {
59
+ if (!isOpen) setFocused(0);
58
60
  setIsOpen(!isOpen);
59
61
  }
60
62
  }
@@ -1 +1 @@
1
- {"version":3,"sources":["../../../src/Dropdown/DropdownFilter.tsx"],"names":["React","COLORS","ArrowDropDown","ArrowDropUp","Information","TechnicalWarning","LoadingIndicator","StyledField","Dropdown","ButtonDropdownWrapper","InputField","DropdownContent","Size","AutofilledMessage","WarningMessage","DropdownFilter","id","list","placeholder","onSelect","onInputChange","initalValue","required","disableSorting","messageOnNoResults","disabled","locked","isButton","activeValidationMessage","autofilledMessage","size","buttonFontSize","keepInitialValue","icon","margin","isOpen","setIsOpen","useState","isLoading","setIsLoading","input","setInput","placeholderSearch","setPlaceholderSearch","restartFilter","setRestartFilter","selectedValues","setSelectedValues","focused","setFocused","styledFieldRef","useRef","inputRef","handleKeyPress","e","current","contains","target","keyCode","matches","filter","c","toLowerCase","length","useEffect","includes","document","addEventListener","removeEventListener","renderStandardDropdown","concat","stopPropagation","focus","Math","floor","random","value","neutral_600","renderButtonDropdown","Medium","Small","itemsType","multiSelect","action","onValueUpdate","values","val","items","map","x","warning_400"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport { BREAKPOINTS, COLORS } from '../styles';\nimport { ArrowDropDown, ArrowDropUp, Information, TechnicalWarning } from '../icons/systemicons/SystemIcons';\nimport { LoadingIndicator } from '../LoadingIndicator';\nimport { DropdownButton, StyledField, Dropdown, ButtonDropdownWrapper, InputField } from './CommonStyling';\nimport DropdownContent from './DropdownContent';\nimport { Size } from '../types'\nimport { AutofilledMessage, WarningMessage } from '../InputFields/styling';\nimport { ComponentMStyling, ComponentSStyling, ComponentTextStyle } from '../styles/typography';\n\ninterface DropdownFilterProps {\n id: string;\n list: string[];\n placeholder?: string;\n onSelect?: (value: string) => void;\n onInputChange?: (input: string) => void;\n initalValue?: string;\n required?: boolean;\n disableSorting?: boolean;\n messageOnNoResults?: string;\n disabled?: boolean;\n locked?: boolean;\n isButton?: boolean;\n activeValidationMessage?: string;\n autofilledMessage?: string;\n size?: 'small' | 'medium';\n buttonFontSize?: string;\n keepInitialValue?: boolean;\n icon?: React.ReactNode;\n margin?: string;\n}\n\nconst DropdownFilter = ({\n id,\n list,\n placeholder,\n onSelect,\n onInputChange,\n initalValue,\n required,\n disableSorting,\n messageOnNoResults,\n disabled,\n locked,\n isButton,\n activeValidationMessage,\n autofilledMessage,\n size,\n buttonFontSize,\n keepInitialValue,\n icon,\n margin = '4px 0',\n}: DropdownFilterProps) => {\n const [isOpen, setIsOpen] = React.useState<boolean>(false);\n const [isLoading, setIsLoading] = React.useState<Boolean>(false);\n const [input, setInput] = React.useState<string>(initalValue ?? '');\n const [placeholderSearch, setPlaceholderSearch] = React.useState<string>(placeholder || '');\n const [restartFilter, setRestartFilter] = React.useState<boolean>(false);\n const [selectedValues, setSelectedValues] = React.useState<string[]>([]);\n const [focused, setFocused] = React.useState<number | null>(null);\n\n const styledFieldRef = React.useRef<HTMLDivElement>(null);\n const inputRef = React.useRef<HTMLInputElement>(null);\n\n const handleKeyPress = (e: any) => {\n if (styledFieldRef?.current && styledFieldRef.current.contains(e.target)) {\n if (e.keyCode === 13 && !locked) {\n const matches = list?.filter((c) => c.toLowerCase() === input.toLowerCase());\n if (matches.length === 1 && onSelect) {\n onSelect(matches[0]);\n setInput(matches[0]);\n }\n setIsOpen(!isOpen);\n if (matches.length === 0) {\n setInput('');\n }\n } else if (e.keyCode === 40) {\n setIsOpen(!isOpen);\n }\n }\n };\n\n React.useEffect(() => {\n if (initalValue || initalValue === '') {\n setInput(initalValue);\n setRestartFilter(true);\n }\n }, [initalValue]);\n\n React.useEffect(() => {\n if (!isOpen && !list.includes(input)) {\n setInput('');\n setPlaceholderSearch(placeholder || '');\n }\n }, [isOpen]);\n\n React.useEffect(() => {\n document.addEventListener('keypress', handleKeyPress);\n return () => {\n document.removeEventListener('keypress', handleKeyPress);\n };\n });\n\n React.useEffect(() => {\n setIsLoading(false);\n if (selectedValues.length > 0 && !list.includes(input))\n setSelectedValues([]);\n\n if(list.includes(input))\n {\n setSelectedValues([input]);\n onSelect && onSelect(input);\n }\n }, [input]);\n\n\n const renderStandardDropdown = () => {\n return (\n <StyledField\n ref={styledFieldRef}\n className={(isOpen ? 'expanded ' : '').concat(size ? size : '')}\n onClick={(e: any) => {\n e.stopPropagation();\n setIsOpen(!isOpen);\n inputRef.current?.focus();\n }}\n tabIndex={disabled || locked ? -1 : 0}\n disabled={disabled || false}\n locked={locked || false}\n showValidationMessage={!!activeValidationMessage}\n fontSize={buttonFontSize}\n data-testid={`otherdiv_${id}`}>\n <InputField\n ref={inputRef}\n autoComplete={'off-' + Math.floor(Math.random() * 999999999999)}\n type=\"search\"\n placeholder={placeholderSearch}\n value={input}\n className={size ? `${size} value` : 'value'}\n onChange={(e: any) => {\n if (!locked && !disabled) {\n setRestartFilter(false);\n setIsLoading(true);\n setIsOpen(true);\n setInput(e.target.value);\n if (onInputChange) {\n onInputChange(e.target.value || '');\n }\n }\n }}\n onClick={(e: any) => {\n if (!locked && !disabled) {\n e.stopPropagation();\n setIsOpen(!isOpen);\n }\n }}\n onFocus={() => setPlaceholderSearch('')}\n onBlur={() => setPlaceholderSearch(placeholder || '')}\n required={required}\n tabIndex={disabled || locked ? -1 : 0}\n disabled={disabled || false}\n />\n\n {isLoading ? <LoadingIndicator size=\"small\" color={COLORS.neutral_600} /> : null}\n\n <div onClick={() => setIsOpen(!isOpen)} className={'dropdown-arrow'}>\n {isOpen && !locked && !disabled ? <ArrowDropUp size=\"24px\" className={size ? size : ''} /> : <ArrowDropDown size=\"24px\" className={size ? size : ''} />}\n </div>\n </StyledField>\n );\n };\n\n const renderButtonDropdown = () => (\n <ButtonDropdownWrapper\n onClick={(e: any) => {\n e.stopPropagation();\n setIsOpen(!isOpen);\n inputRef.current?.focus();\n }}\n disabled={disabled}\n locked={locked}>\n <StyledField\n ref={styledFieldRef}\n className={(isOpen ? 'expanded ' : '').concat(size ? size : '').concat(isButton ? 'button' : '')}\n tabIndex={disabled || locked ? -1 : 0}\n disabled={disabled || false}\n locked={locked || false}\n showValidationMessage={!!activeValidationMessage}\n fontSize={buttonFontSize}>\n {icon}\n <div className={'value'}>{initalValue && keepInitialValue ? initalValue : input || placeholderSearch}</div>\n {isLoading ? <LoadingIndicator size=\"small\" color={COLORS.neutral_600} /> : null}\n <div onClick={() => setIsOpen(!isOpen)} className={'dropdown-arrow'}>\n {isOpen && !locked && !disabled ? <ArrowDropUp size=\"24px\" className={size ? size : ''} /> : <ArrowDropDown size=\"24px\" className={size ? size : ''} />}\n </div>\n </StyledField>\n </ButtonDropdownWrapper>\n );\n\n return (\n <>\n <Dropdown isButton={isButton || false} disabled={disabled} locked={locked} className={size ? size : ''} margin={margin}>\n {!isButton && renderStandardDropdown()}\n {!!isButton && renderButtonDropdown()}\n {!locked && !disabled && (\n <DropdownContent\n isOpen={isOpen}\n messageOnNoResults={messageOnNoResults ?? ''}\n selectedValues={selectedValues}\n setSelectedValues={setSelectedValues}\n hideOnClickOutside={true}\n size={size == 'medium' ? Size.Medium : Size.Small}\n focused={focused}\n setFocused={setFocused}\n customizationProps={{\n itemsType: 'normal',\n multiSelect: false,\n action: () => {},\n onValueUpdate: (values: string[]) => {\n const val = values[0] ?? '';\n setRestartFilter(true);\n setInput(val);\n },\n items: list.map(x => ({ value: x }))\n }}\n filter={!restartFilter ? input : ''}\n setIsOpen={setIsOpen}\n alignLeft={false}\n isButton={isButton || false}\n id={`${id}_dropdowncontent`} />\n )}\n </Dropdown>\n {activeValidationMessage && (\n <WarningMessage className={size || ''}>\n <TechnicalWarning size=\"20px\" color={COLORS.warning_400} />\n <span>{activeValidationMessage}</span>\n </WarningMessage>\n )}\n {autofilledMessage && (\n <AutofilledMessage className={size || ''}>\n <Information size=\"20px\" color={COLORS.neutral_600} />\n <span>{autofilledMessage}</span>\n </AutofilledMessage>\n )}\n </>\n );\n};\n\nexport default DropdownFilter;\n"],"file":"DropdownFilter.js"}
1
+ {"version":3,"sources":["../../../src/Dropdown/DropdownFilter.tsx"],"names":["React","COLORS","ArrowDropDown","ArrowDropUp","Information","TechnicalWarning","LoadingIndicator","StyledField","Dropdown","ButtonDropdownWrapper","InputField","DropdownContent","Size","AutofilledMessage","WarningMessage","DropdownFilter","id","list","placeholder","onSelect","onInputChange","initalValue","required","disableSorting","messageOnNoResults","disabled","locked","isButton","activeValidationMessage","autofilledMessage","size","buttonFontSize","keepInitialValue","icon","margin","isOpen","setIsOpen","useState","isLoading","setIsLoading","input","setInput","placeholderSearch","setPlaceholderSearch","restartFilter","setRestartFilter","selectedValues","setSelectedValues","focused","setFocused","styledFieldRef","useRef","inputRef","handleKeyPress","e","current","contains","target","keyCode","matches","filter","c","toLowerCase","length","useEffect","includes","document","addEventListener","removeEventListener","renderStandardDropdown","concat","stopPropagation","focus","Math","floor","random","value","neutral_600","renderButtonDropdown","Medium","Small","itemsType","multiSelect","action","onValueUpdate","values","val","items","map","x","warning_400"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport { BREAKPOINTS, COLORS } from '../styles';\nimport { ArrowDropDown, ArrowDropUp, Information, TechnicalWarning } from '../icons/systemicons/SystemIcons';\nimport { LoadingIndicator } from '../LoadingIndicator';\nimport { DropdownButton, StyledField, Dropdown, ButtonDropdownWrapper, InputField } from './CommonStyling';\nimport DropdownContent from './DropdownContent';\nimport { Size } from '../types'\nimport { AutofilledMessage, WarningMessage } from '../InputFields/styling';\nimport { ComponentMStyling, ComponentSStyling, ComponentTextStyle } from '../styles/typography';\n\ninterface DropdownFilterProps {\n id: string;\n list: string[];\n placeholder?: string;\n onSelect?: (value: string) => void;\n onInputChange?: (input: string) => void;\n initalValue?: string;\n required?: boolean;\n disableSorting?: boolean;\n messageOnNoResults?: string;\n disabled?: boolean;\n locked?: boolean;\n isButton?: boolean;\n activeValidationMessage?: string;\n autofilledMessage?: string;\n size?: 'small' | 'medium';\n buttonFontSize?: string;\n keepInitialValue?: boolean;\n icon?: React.ReactNode;\n margin?: string;\n}\n\nconst DropdownFilter = ({\n id,\n list,\n placeholder,\n onSelect,\n onInputChange,\n initalValue,\n required,\n disableSorting,\n messageOnNoResults,\n disabled,\n locked,\n isButton,\n activeValidationMessage,\n autofilledMessage,\n size,\n buttonFontSize,\n keepInitialValue,\n icon,\n margin = '4px 0',\n}: DropdownFilterProps) => {\n const [isOpen, setIsOpen] = React.useState<boolean>(false);\n const [isLoading, setIsLoading] = React.useState<Boolean>(false);\n const [input, setInput] = React.useState<string>(initalValue ?? '');\n const [placeholderSearch, setPlaceholderSearch] = React.useState<string>(placeholder || '');\n const [restartFilter, setRestartFilter] = React.useState<boolean>(false);\n const [selectedValues, setSelectedValues] = React.useState<string[]>([]);\n const [focused, setFocused] = React.useState<number | null>(null);\n\n const styledFieldRef = React.useRef<HTMLDivElement>(null);\n const inputRef = React.useRef<HTMLInputElement>(null);\n\n const handleKeyPress = (e: any) => {\n if (styledFieldRef?.current && styledFieldRef.current.contains(e.target)) {\n if (e.keyCode === 13 && !locked) {\n const matches = list?.filter((c) => c.toLowerCase() === input.toLowerCase());\n if (matches.length === 1 && onSelect) {\n onSelect(matches[0]);\n setInput(matches[0]);\n }\n if(!isOpen)\n setFocused(0);\n setIsOpen(!isOpen);\n if (matches.length === 0) {\n setInput('');\n }\n } else if (e.keyCode === 40) {\n if(!isOpen)\n setFocused(0);\n setIsOpen(!isOpen);\n }\n }\n };\n\n React.useEffect(() => {\n if (initalValue || initalValue === '') {\n setInput(initalValue);\n setRestartFilter(true);\n }\n }, [initalValue]);\n\n React.useEffect(() => {\n if (!isOpen && !list.includes(input)) {\n setInput('');\n setPlaceholderSearch(placeholder || '');\n }\n }, [isOpen]);\n\n React.useEffect(() => {\n document.addEventListener('keypress', handleKeyPress);\n return () => {\n document.removeEventListener('keypress', handleKeyPress);\n };\n });\n\n React.useEffect(() => {\n setIsLoading(false);\n if (selectedValues.length > 0 && !list.includes(input))\n setSelectedValues([]);\n\n if(list.includes(input))\n {\n setSelectedValues([input]);\n onSelect && onSelect(input);\n }\n }, [input]);\n\n\n const renderStandardDropdown = () => {\n return (\n <StyledField\n ref={styledFieldRef}\n className={(isOpen ? 'expanded ' : '').concat(size ? size : '')}\n onClick={(e: any) => {\n e.stopPropagation();\n setIsOpen(!isOpen);\n inputRef.current?.focus();\n }}\n tabIndex={disabled || locked ? -1 : 0}\n disabled={disabled || false}\n locked={locked || false}\n showValidationMessage={!!activeValidationMessage}\n fontSize={buttonFontSize}\n data-testid={`otherdiv_${id}`}>\n <InputField\n ref={inputRef}\n autoComplete={'off-' + Math.floor(Math.random() * 999999999999)}\n type=\"search\"\n placeholder={placeholderSearch}\n value={input}\n className={size ? `${size} value` : 'value'}\n onChange={(e: any) => {\n if (!locked && !disabled) {\n setRestartFilter(false);\n setIsLoading(true);\n setIsOpen(true);\n setInput(e.target.value);\n if (onInputChange) {\n onInputChange(e.target.value || '');\n }\n }\n }}\n onClick={(e: any) => {\n if (!locked && !disabled) {\n e.stopPropagation();\n setIsOpen(!isOpen);\n }\n }}\n onFocus={() => setPlaceholderSearch('')}\n onBlur={() => setPlaceholderSearch(placeholder || '')}\n required={required}\n tabIndex={disabled || locked ? -1 : 0}\n disabled={disabled || false}\n />\n\n {isLoading ? <LoadingIndicator size=\"small\" color={COLORS.neutral_600} /> : null}\n\n <div onClick={() => setIsOpen(!isOpen)} className={'dropdown-arrow'}>\n {isOpen && !locked && !disabled ? <ArrowDropUp size=\"24px\" className={size ? size : ''} /> : <ArrowDropDown size=\"24px\" className={size ? size : ''} />}\n </div>\n </StyledField>\n );\n };\n\n const renderButtonDropdown = () => (\n <ButtonDropdownWrapper\n onClick={(e: any) => {\n e.stopPropagation();\n setIsOpen(!isOpen);\n inputRef.current?.focus();\n }}\n disabled={disabled}\n locked={locked}>\n <StyledField\n ref={styledFieldRef}\n className={(isOpen ? 'expanded ' : '').concat(size ? size : '').concat(isButton ? 'button' : '')}\n tabIndex={disabled || locked ? -1 : 0}\n disabled={disabled || false}\n locked={locked || false}\n showValidationMessage={!!activeValidationMessage}\n fontSize={buttonFontSize}>\n {icon}\n <div className={'value'}>{initalValue && keepInitialValue ? initalValue : input || placeholderSearch}</div>\n {isLoading ? <LoadingIndicator size=\"small\" color={COLORS.neutral_600} /> : null}\n <div onClick={() => setIsOpen(!isOpen)} className={'dropdown-arrow'}>\n {isOpen && !locked && !disabled ? <ArrowDropUp size=\"24px\" className={size ? size : ''} /> : <ArrowDropDown size=\"24px\" className={size ? size : ''} />}\n </div>\n </StyledField>\n </ButtonDropdownWrapper>\n );\n\n return (\n <>\n <Dropdown isButton={isButton || false} disabled={disabled} locked={locked} className={size ? size : ''} margin={margin}>\n {!isButton && renderStandardDropdown()}\n {!!isButton && renderButtonDropdown()}\n {!locked && !disabled && (\n <DropdownContent\n isOpen={isOpen}\n messageOnNoResults={messageOnNoResults ?? ''}\n selectedValues={selectedValues}\n setSelectedValues={setSelectedValues}\n hideOnClickOutside={true}\n size={size == 'medium' ? Size.Medium : Size.Small}\n focused={focused}\n setFocused={setFocused}\n customizationProps={{\n itemsType: 'normal',\n multiSelect: false,\n action: () => {},\n onValueUpdate: (values: string[]) => {\n const val = values[0] ?? '';\n setRestartFilter(true);\n setInput(val);\n },\n items: list.map(x => ({ value: x }))\n }}\n filter={!restartFilter ? input : ''}\n setIsOpen={setIsOpen}\n alignLeft={false}\n isButton={isButton || false}\n id={`${id}_dropdowncontent`} />\n )}\n </Dropdown>\n {activeValidationMessage && (\n <WarningMessage className={size || ''}>\n <TechnicalWarning size=\"20px\" color={COLORS.warning_400} />\n <span>{activeValidationMessage}</span>\n </WarningMessage>\n )}\n {autofilledMessage && (\n <AutofilledMessage className={size || ''}>\n <Information size=\"20px\" color={COLORS.neutral_600} />\n <span>{autofilledMessage}</span>\n </AutofilledMessage>\n )}\n </>\n );\n};\n\nexport default DropdownFilter;\n"],"file":"DropdownFilter.js"}
@@ -1,3 +1,4 @@
1
1
  import HyperLink from './HyperLink';
2
- export { HyperLink };
2
+ import { defaultStyle as HyperLinkDefaultStyling, invertedStyle as HyperLinkInvertedStyling } from './styling';
3
+ export { HyperLink, HyperLinkInvertedStyling, HyperLinkDefaultStyling };
3
4
  //# sourceMappingURL=index.js.map
@@ -1 +1 @@
1
- {"version":3,"sources":["../../../src/HyperLink/index.ts"],"names":["HyperLink"],"mappings":"AAAA,OAAOA,SAAP,MAAsB,aAAtB;AAEA,SAASA,SAAT","sourcesContent":["import HyperLink from './HyperLink';\n\nexport { HyperLink };\n"],"file":"index.js"}
1
+ {"version":3,"sources":["../../../src/HyperLink/index.ts"],"names":["HyperLink","defaultStyle","HyperLinkDefaultStyling","invertedStyle","HyperLinkInvertedStyling"],"mappings":"AAAA,OAAOA,SAAP,MAAsB,aAAtB;AACA,SAAQC,YAAY,IAAIC,uBAAxB,EAAiDC,aAAa,IAAIC,wBAAlE,QAAiG,WAAjG;AAEA,SAASJ,SAAT,EAAoBI,wBAApB,EAA8CF,uBAA9C","sourcesContent":["import HyperLink from './HyperLink';\nimport {defaultStyle as HyperLinkDefaultStyling, invertedStyle as HyperLinkInvertedStyling} from './styling';\n\nexport { HyperLink, HyperLinkInvertedStyling, HyperLinkDefaultStyling };\n"],"file":"index.js"}
@@ -14,6 +14,7 @@ import { Close } from '../icons/systemicons/SystemIcons';
14
14
  import { Size } from '../types';
15
15
  import { Button, IconButton } from '../Button';
16
16
  import { ComponentSStyling, ComponentTextStyle } from '../styles/typography';
17
+ import { HyperLinkDefaultStyling, HyperLinkInvertedStyling } from '../HyperLink';
17
18
  const LoaderAnimationKeyframes = keyframes`
18
19
  0% {
19
20
  background-position: right;
@@ -86,13 +87,13 @@ const Container = styled.div`
86
87
  min-height: 48px;
87
88
  box-sizing: border-box;
88
89
 
90
+ ${ComponentSStyling(ComponentTextStyle.Regular, COLORS.white)}
91
+
89
92
  & a {
90
- color: ${COLORS.white};
91
- font-weight: bold;
93
+ display: inline;
94
+ ${HyperLinkInvertedStyling}
92
95
  }
93
96
 
94
- ${ComponentSStyling(ComponentTextStyle.Regular, COLORS.white)}
95
-
96
97
  &.${ToastColor[ToastColor.BLACK]} {
97
98
  background-color: ${COLORS.neutral_800};
98
99
  }
@@ -102,8 +103,7 @@ const Container = styled.div`
102
103
  color: ${COLORS.black};
103
104
 
104
105
  & a {
105
- color: ${COLORS.black};
106
- font-weight: bold;
106
+ ${HyperLinkDefaultStyling}
107
107
  }
108
108
  }
109
109
 
@@ -163,14 +163,6 @@ const TextContainer = styled.span`
163
163
  width: 240px;
164
164
  display: flex;
165
165
  padding: 16px 0;
166
-
167
- a {
168
- display: contents;
169
- text-decoration: none;
170
- }
171
- a:hover {
172
- text-decoration: underline;
173
- }
174
166
  `;
175
167
  const IconContainer = styled.span`
176
168
  margin-right: -8px;
@@ -1 +1 @@
1
- {"version":3,"sources":["../../../src/Toasters/Toast.tsx"],"names":["React","styled","keyframes","ToastActionType","ToastColor","ToastEntryDirection","ToastPosition","BOXSHADOWS","COLORS","Close","Size","Button","IconButton","ComponentSStyling","ComponentTextStyle","LoaderAnimationKeyframes","Loader","div","props","duration","BLACK","neutral_200","neutral_800","WHITE","neutral_400","white","BLUE","accent1_200","accent1_600","GREEN","correct_200","correct_500","ORANGE","warning_200","warning_500","RED","critical_200","critical_500","Container","BOXSHADOW_L2","animation","bezier","transform","withClose","withLoader","Regular","black","ActionButtons","CloseButton","neutral_600","TextContainer","span","IconContainer","DEFAULT_OPTIONS","color","autoClose","delay","showCloseButton","position","TOPLEFT","enterFrom","TOP","Toast","content","remove","options","testId","removeRef","useRef","current","elementRef","shouldRemove","setShouldRemove","useState","dimensions","setDimensions","width","height","opts","useEffect","id","setTimeout","clearTimeout","undefined","clientHeight","clientWidth","animations","direction","fromY","fromHeight","toY","toHeight","fromX","fromWidth","toX","toWidth","prop","theme","focus","icon","action","map","i","Small","type","SECONDARY","handler","label","event","enter","BOTTOM","LEFT","RIGHT","leave"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport styled, { keyframes } from 'styled-components';\nimport { ToastActionType, ToastColor, ToastEntryDirection, ToastPosition } from '../types';\nimport { BOXSHADOWS, COLORS, TYPOGRAPHY } from '../styles';\nimport { Close } from '../icons/systemicons/SystemIcons';\nimport { Size } from '../types' \nimport { Button, IconButton } from '../Button';\nimport { ComponentSStyling, ComponentTextStyle } from '../styles/typography';\n\nconst LoaderAnimationKeyframes = keyframes`\n 0% {\n background-position: right;\n }\n 100% {\n background-position: left;\n }\n`;\n\nconst Loader = styled.div<{ duration: number }>`\n position: absolute;\n bottom: 0;\n left: 0;\n width: 100%;\n height: 4px;\n border-bottom-left-radius: 8px;\n border-bottom-right-radius: 8px;\n\n animation: ${LoaderAnimationKeyframes} ${(props) => props.duration}ms cubic-bezier(0.18, 0.39, 0.35, 1);\n\n &.${ToastColor[ToastColor.BLACK]} {\n background: linear-gradient(to right, ${COLORS.neutral_200} 50%, ${COLORS.neutral_800} 50%) left;\n background-size: 200% 100%;\n }\n\n &.${ToastColor[ToastColor.WHITE]} {\n background: linear-gradient(to right, ${COLORS.neutral_400} 50%, ${COLORS.white} 50%) left;\n background-size: 200% 100%;\n }\n\n &.${ToastColor[ToastColor.BLUE]} {\n background: linear-gradient(to right, ${COLORS.accent1_200} 50%, ${COLORS.accent1_600} 50%) left;\n background-size: 200% 100%;\n }\n\n &.${ToastColor[ToastColor.GREEN]} {\n background: linear-gradient(to right, ${COLORS.correct_200} 50%, ${COLORS.correct_500} 50%) left;\n background-size: 200% 100%;\n }\n\n &.${ToastColor[ToastColor.ORANGE]} {\n background: linear-gradient(to right, ${COLORS.warning_200} 50%, ${COLORS.warning_500} 50%) left;\n background-size: 200% 100%;\n }\n\n &.${ToastColor[ToastColor.RED]} {\n background: linear-gradient(to right, ${COLORS.critical_200} 50%, ${COLORS.critical_500} 50%) left;\n background-size: 200% 100%;\n }\n`;\n\nconst Container = styled.div<{ animation: { duration: string; bezier: string; transform: string; keyframes: any }; withLoader: boolean; withClose: boolean }>`\n box-shadow: ${BOXSHADOWS.BOXSHADOW_L2};\n border-radius: 4px;\n\n animation: ${(props) => props.animation.keyframes} ${(props) => props.animation.duration} ${(props) => props.animation.bezier};\n transform: ${(props) => props.animation.transform};\n\n transition: all 300ms cubic-bezier(0.64, 0.04, 0.35, 1);\n\n padding: 0 ${(props) => (props.withClose ? '0' : '16px')} ${(props) => (props.withLoader ? '4px' : '0')} 16px;\n\n margin-bottom: 8px;\n display: flex;\n align-items: center;\n gap: 16px;\n justify-content: left;\n\n position: relative;\n\n width: max-content;\n min-height: 48px;\n box-sizing: border-box;\n\n & a {\n color: ${COLORS.white};\n font-weight: bold;\n }\n\n ${ComponentSStyling(ComponentTextStyle.Regular, COLORS.white)}\n\n &.${ToastColor[ToastColor.BLACK]} {\n background-color: ${COLORS.neutral_800};\n }\n\n &.${ToastColor[ToastColor.WHITE]} {\n background-color: ${COLORS.white};\n color: ${COLORS.black};\n\n & a {\n color: ${COLORS.black};\n font-weight: bold;\n }\n }\n\n &.${ToastColor[ToastColor.BLUE]} {\n background-color: ${COLORS.accent1_600};\n }\n\n &.${ToastColor[ToastColor.GREEN]} {\n background-color: ${COLORS.correct_500};\n }\n\n &.${ToastColor[ToastColor.ORANGE]} {\n background-color: ${COLORS.warning_500};\n }\n\n &.${ToastColor[ToastColor.RED]} {\n background-color: ${COLORS.critical_500};\n }\n`;\n\nconst ActionButtons = styled.div`\n display: flex;\n flex-direction: row;\n gap: 8px;\n align-items: center;\n\n & .action {\n height: unset;\n }\n`;\n\nconst CloseButton = styled.div`\n & > button {\n background-color: transparent;\n border: none;\n margin-left: 16px;\n\n & svg {\n padding: 0;\n }\n }\n\n & > button:focus:not(:disabled):not(:active):not(:hover) div svg path {\n fill: ${COLORS.white};\n }\n\n & div svg path {\n fill: ${COLORS.white};\n }\n\n &.${ToastColor[ToastColor.WHITE]} {\n & div svg path {\n fill: ${COLORS.neutral_600};\n }\n }\n`;\n\nconst TextContainer = styled.span`\n font-feature-settings: 'liga' off;\n width: 240px;\n display: flex;\n padding: 16px 0;\n\n a {\n display: contents;\n text-decoration: none;\n }\n a:hover {\n text-decoration: underline;\n }\n`;\n\nconst IconContainer = styled.span`\n margin-right: -8px;\n`;\n\nexport type ToastOptions = {\n color?: ToastColor;\n autoClose?: boolean;\n delay?: number;\n showCloseButton?: boolean;\n action?: {\n label: string;\n handler: () => void;\n type?: ToastActionType;\n }[];\n position: ToastPosition;\n enterFrom?: ToastEntryDirection;\n icon?: React.ReactNode;\n};\n\ntype Props = {\n remove?: any;\n content: any;\n options?: ToastOptions;\n testId?: string;\n};\n\nconst DEFAULT_OPTIONS: ToastOptions = {\n color: ToastColor.BLACK,\n autoClose: true,\n delay: 5000,\n showCloseButton: false,\n position: ToastPosition.TOPLEFT,\n enterFrom: ToastEntryDirection.TOP,\n};\n\nconst Toast = ({ content, remove, options = DEFAULT_OPTIONS, testId }: Props) => {\n const removeRef = React.useRef();\n removeRef.current = remove;\n\n const elementRef = React.useRef<any>(null);\n\n const [shouldRemove, setShouldRemove] = React.useState(false);\n const [dimensions, setDimensions] = React.useState<{ width: number; height: number }>({ width: 0, height: 0 });\n\n const opts = { ...DEFAULT_OPTIONS, ...options };\n\n React.useEffect(() => {\n if (opts?.autoClose) {\n // @ts-ignore\n const id = setTimeout(() => setShouldRemove(true), opts.delay);\n return () => clearTimeout(id);\n }\n return undefined;\n }, []);\n\n React.useEffect(() => {\n if (shouldRemove) {\n // @ts-ignore\n const id = setTimeout(() => removeRef.current(), 200);\n return () => clearTimeout(id);\n }\n }, [shouldRemove]);\n\n React.useEffect(() => {\n setDimensions({ height: elementRef.current?.clientHeight, width: elementRef.current?.clientWidth });\n }, []);\n\n const animation = animations[shouldRemove ? 'leave' : 'enter'];\n const direction = animation[opts.enterFrom ?? ToastEntryDirection.TOP];\n\n const fromY = dimensions.height * direction.fromHeight;\n const toY = dimensions.height * direction.toHeight;\n const fromX = dimensions.width * direction.fromWidth;\n const toX = dimensions.width * direction.toWidth;\n\n let prop = {\n duration: animation.duration,\n bezier: animation.bezier,\n transform: `translateY(${toY}) translateX(${toX})`,\n keyframes: keyframes`\n 0% {\n transform: translateY(${fromY}px) translateX(${fromX}px);\n }\n 100% {\n transform: translateY(${toY}px) translateX(${toX}px);\n }`,\n };\n\n if (!dimensions.height) {\n prop = {\n ...prop,\n ...{\n transform: 'translateY(-1000vh) translateX(-1000vw)',\n keyframes: keyframes``,\n },\n };\n }\n\n const theme = ToastColor[opts.color ?? ToastColor.BLACK];\n\n setTimeout(() => elementRef?.current?.focus());\n\n return (\n <Container data-testid={testId} animation={prop} ref={elementRef} withLoader={!!opts.autoClose} className={theme} withClose={!!opts.showCloseButton} tabIndex={-1}>\n {opts.icon && <IconContainer>{opts.icon}</IconContainer>}\n <TextContainer className={'description'}>{content}</TextContainer>\n {opts.action && (\n <ActionButtons>\n {opts.action.map((action, i) => (\n <Button\n size={Size.Small}\n variant={action.type === ToastActionType.SECONDARY ? 'secondary' : 'primary'}\n colorTheme={opts.color !== ToastColor.WHITE ? 'dark' : 'teal'}\n key={i}\n onClick={() => {\n setShouldRemove(true);\n action.handler();\n }}\n className={'action'}>\n {action.label}\n </Button>\n ))}\n </ActionButtons>\n )}\n {opts.showCloseButton && (\n <CloseButton className={`close-button ${theme}`}>\n <IconButton variant=\"secondary\" shape=\"circular\" useTransparentBackground action={(event) => setShouldRemove(true)}>\n <Close size=\"24px\" color={COLORS.neutral_600} />\n </IconButton>\n </CloseButton>\n )}\n {!!opts.autoClose && <Loader className={`loader ${theme}`} duration={opts.delay ?? 0} />}\n </Container>\n );\n};\n\nexport default Toast;\n\nconst animations = {\n enter: {\n bezier: 'cubic-bezier(0.22, 0.61, 0.35, 1)',\n duration: '300ms',\n [ToastEntryDirection.TOP]: {\n fromHeight: -1,\n toHeight: 0,\n fromWidth: 0,\n toWidth: 0,\n },\n [ToastEntryDirection.BOTTOM]: {\n fromHeight: 1,\n toHeight: 0,\n fromWidth: 0,\n toWidth: 0,\n },\n [ToastEntryDirection.LEFT]: {\n fromHeight: 0,\n toHeight: 0,\n fromWidth: -1,\n toWidth: 0,\n },\n [ToastEntryDirection.RIGHT]: {\n fromHeight: 0,\n toHeight: 0,\n fromWidth: 1,\n toWidth: 0,\n },\n },\n leave: {\n bezier: 'cubic-bezier(0.5, 0.05, 0.67, 0.19)',\n duration: '205ms',\n [ToastEntryDirection.TOP]: {\n fromHeight: 0,\n toHeight: -1,\n fromWidth: 0,\n toWidth: 0,\n },\n [ToastEntryDirection.BOTTOM]: {\n fromHeight: 0,\n toHeight: 1,\n fromWidth: 0,\n toWidth: 0,\n },\n [ToastEntryDirection.LEFT]: {\n fromHeight: 0,\n toHeight: 0,\n fromWidth: 0,\n toWidth: -1,\n },\n [ToastEntryDirection.RIGHT]: {\n fromHeight: 0,\n toHeight: 0,\n fromWidth: 0,\n toWidth: 1,\n },\n },\n};\n"],"file":"Toast.js"}
1
+ {"version":3,"sources":["../../../src/Toasters/Toast.tsx"],"names":["React","styled","keyframes","ToastActionType","ToastColor","ToastEntryDirection","ToastPosition","BOXSHADOWS","COLORS","Close","Size","Button","IconButton","ComponentSStyling","ComponentTextStyle","HyperLinkDefaultStyling","HyperLinkInvertedStyling","LoaderAnimationKeyframes","Loader","div","props","duration","BLACK","neutral_200","neutral_800","WHITE","neutral_400","white","BLUE","accent1_200","accent1_600","GREEN","correct_200","correct_500","ORANGE","warning_200","warning_500","RED","critical_200","critical_500","Container","BOXSHADOW_L2","animation","bezier","transform","withClose","withLoader","Regular","black","ActionButtons","CloseButton","neutral_600","TextContainer","span","IconContainer","DEFAULT_OPTIONS","color","autoClose","delay","showCloseButton","position","TOPLEFT","enterFrom","TOP","Toast","content","remove","options","testId","removeRef","useRef","current","elementRef","shouldRemove","setShouldRemove","useState","dimensions","setDimensions","width","height","opts","useEffect","id","setTimeout","clearTimeout","undefined","clientHeight","clientWidth","animations","direction","fromY","fromHeight","toY","toHeight","fromX","fromWidth","toX","toWidth","prop","theme","focus","icon","action","map","i","Small","type","SECONDARY","handler","label","event","enter","BOTTOM","LEFT","RIGHT","leave"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport styled, { keyframes } from 'styled-components';\nimport { ToastActionType, ToastColor, ToastEntryDirection, ToastPosition } from '../types';\nimport { BOXSHADOWS, COLORS, TYPOGRAPHY } from '../styles';\nimport { Close } from '../icons/systemicons/SystemIcons';\nimport { Size } from '../types' \nimport { Button, IconButton } from '../Button';\nimport { ComponentSStyling, ComponentTextStyle } from '../styles/typography';\nimport {HyperLinkDefaultStyling, HyperLinkInvertedStyling} from '../HyperLink';\n\nconst LoaderAnimationKeyframes = keyframes`\n 0% {\n background-position: right;\n }\n 100% {\n background-position: left;\n }\n`;\n\nconst Loader = styled.div<{ duration: number }>`\n position: absolute;\n bottom: 0;\n left: 0;\n width: 100%;\n height: 4px;\n border-bottom-left-radius: 8px;\n border-bottom-right-radius: 8px;\n\n animation: ${LoaderAnimationKeyframes} ${(props) => props.duration}ms cubic-bezier(0.18, 0.39, 0.35, 1);\n\n &.${ToastColor[ToastColor.BLACK]} {\n background: linear-gradient(to right, ${COLORS.neutral_200} 50%, ${COLORS.neutral_800} 50%) left;\n background-size: 200% 100%;\n }\n\n &.${ToastColor[ToastColor.WHITE]} {\n background: linear-gradient(to right, ${COLORS.neutral_400} 50%, ${COLORS.white} 50%) left;\n background-size: 200% 100%;\n }\n\n &.${ToastColor[ToastColor.BLUE]} {\n background: linear-gradient(to right, ${COLORS.accent1_200} 50%, ${COLORS.accent1_600} 50%) left;\n background-size: 200% 100%;\n }\n\n &.${ToastColor[ToastColor.GREEN]} {\n background: linear-gradient(to right, ${COLORS.correct_200} 50%, ${COLORS.correct_500} 50%) left;\n background-size: 200% 100%;\n }\n\n &.${ToastColor[ToastColor.ORANGE]} {\n background: linear-gradient(to right, ${COLORS.warning_200} 50%, ${COLORS.warning_500} 50%) left;\n background-size: 200% 100%;\n }\n\n &.${ToastColor[ToastColor.RED]} {\n background: linear-gradient(to right, ${COLORS.critical_200} 50%, ${COLORS.critical_500} 50%) left;\n background-size: 200% 100%;\n }\n`;\n\nconst Container = styled.div<{ animation: { duration: string; bezier: string; transform: string; keyframes: any }; withLoader: boolean; withClose: boolean }>`\n box-shadow: ${BOXSHADOWS.BOXSHADOW_L2};\n border-radius: 4px;\n\n animation: ${(props) => props.animation.keyframes} ${(props) => props.animation.duration} ${(props) => props.animation.bezier};\n transform: ${(props) => props.animation.transform};\n\n transition: all 300ms cubic-bezier(0.64, 0.04, 0.35, 1);\n\n padding: 0 ${(props) => (props.withClose ? '0' : '16px')} ${(props) => (props.withLoader ? '4px' : '0')} 16px;\n\n margin-bottom: 8px;\n display: flex;\n align-items: center;\n gap: 16px;\n justify-content: left;\n\n position: relative;\n\n width: max-content;\n min-height: 48px;\n box-sizing: border-box;\n\n ${ComponentSStyling(ComponentTextStyle.Regular, COLORS.white)}\n\n & a {\n display: inline;\n ${HyperLinkInvertedStyling}\n }\n\n &.${ToastColor[ToastColor.BLACK]} {\n background-color: ${COLORS.neutral_800};\n }\n\n &.${ToastColor[ToastColor.WHITE]} {\n background-color: ${COLORS.white};\n color: ${COLORS.black};\n\n & a {\n ${HyperLinkDefaultStyling}\n }\n }\n\n &.${ToastColor[ToastColor.BLUE]} {\n background-color: ${COLORS.accent1_600};\n }\n\n &.${ToastColor[ToastColor.GREEN]} {\n background-color: ${COLORS.correct_500};\n }\n\n &.${ToastColor[ToastColor.ORANGE]} {\n background-color: ${COLORS.warning_500};\n }\n\n &.${ToastColor[ToastColor.RED]} {\n background-color: ${COLORS.critical_500};\n }\n`;\n\nconst ActionButtons = styled.div`\n display: flex;\n flex-direction: row;\n gap: 8px;\n align-items: center;\n\n & .action {\n height: unset;\n }\n`;\n\nconst CloseButton = styled.div`\n & > button {\n background-color: transparent;\n border: none;\n margin-left: 16px;\n\n & svg {\n padding: 0;\n }\n }\n\n & > button:focus:not(:disabled):not(:active):not(:hover) div svg path {\n fill: ${COLORS.white};\n }\n\n & div svg path {\n fill: ${COLORS.white};\n }\n\n &.${ToastColor[ToastColor.WHITE]} {\n & div svg path {\n fill: ${COLORS.neutral_600};\n }\n }\n`;\n\nconst TextContainer = styled.span`\n font-feature-settings: 'liga' off;\n width: 240px;\n display: flex;\n padding: 16px 0;\n`;\n\nconst IconContainer = styled.span`\n margin-right: -8px;\n`;\n\nexport type ToastOptions = {\n color?: ToastColor;\n autoClose?: boolean;\n delay?: number;\n showCloseButton?: boolean;\n action?: {\n label: string;\n handler: () => void;\n type?: ToastActionType;\n }[];\n position: ToastPosition;\n enterFrom?: ToastEntryDirection;\n icon?: React.ReactNode;\n};\n\ntype Props = {\n remove?: any;\n content: any;\n options?: ToastOptions;\n testId?: string;\n};\n\nconst DEFAULT_OPTIONS: ToastOptions = {\n color: ToastColor.BLACK,\n autoClose: true,\n delay: 5000,\n showCloseButton: false,\n position: ToastPosition.TOPLEFT,\n enterFrom: ToastEntryDirection.TOP,\n};\n\nconst Toast = ({ content, remove, options = DEFAULT_OPTIONS, testId }: Props) => {\n const removeRef = React.useRef();\n removeRef.current = remove;\n\n const elementRef = React.useRef<any>(null);\n\n const [shouldRemove, setShouldRemove] = React.useState(false);\n const [dimensions, setDimensions] = React.useState<{ width: number; height: number }>({ width: 0, height: 0 });\n\n const opts = { ...DEFAULT_OPTIONS, ...options };\n\n React.useEffect(() => {\n if (opts?.autoClose) {\n // @ts-ignore\n const id = setTimeout(() => setShouldRemove(true), opts.delay);\n return () => clearTimeout(id);\n }\n return undefined;\n }, []);\n\n React.useEffect(() => {\n if (shouldRemove) {\n // @ts-ignore\n const id = setTimeout(() => removeRef.current(), 200);\n return () => clearTimeout(id);\n }\n }, [shouldRemove]);\n\n React.useEffect(() => {\n setDimensions({ height: elementRef.current?.clientHeight, width: elementRef.current?.clientWidth });\n }, []);\n\n const animation = animations[shouldRemove ? 'leave' : 'enter'];\n const direction = animation[opts.enterFrom ?? ToastEntryDirection.TOP];\n\n const fromY = dimensions.height * direction.fromHeight;\n const toY = dimensions.height * direction.toHeight;\n const fromX = dimensions.width * direction.fromWidth;\n const toX = dimensions.width * direction.toWidth;\n\n let prop = {\n duration: animation.duration,\n bezier: animation.bezier,\n transform: `translateY(${toY}) translateX(${toX})`,\n keyframes: keyframes`\n 0% {\n transform: translateY(${fromY}px) translateX(${fromX}px);\n }\n 100% {\n transform: translateY(${toY}px) translateX(${toX}px);\n }`,\n };\n\n if (!dimensions.height) {\n prop = {\n ...prop,\n ...{\n transform: 'translateY(-1000vh) translateX(-1000vw)',\n keyframes: keyframes``,\n },\n };\n }\n\n const theme = ToastColor[opts.color ?? ToastColor.BLACK];\n\n setTimeout(() => elementRef?.current?.focus());\n\n return (\n <Container data-testid={testId} animation={prop} ref={elementRef} withLoader={!!opts.autoClose} className={theme} withClose={!!opts.showCloseButton} tabIndex={-1}>\n {opts.icon && <IconContainer>{opts.icon}</IconContainer>}\n <TextContainer className={'description'}>{content}</TextContainer>\n {opts.action && (\n <ActionButtons>\n {opts.action.map((action, i) => (\n <Button\n size={Size.Small}\n variant={action.type === ToastActionType.SECONDARY ? 'secondary' : 'primary'}\n colorTheme={opts.color !== ToastColor.WHITE ? 'dark' : 'teal'}\n key={i}\n onClick={() => {\n setShouldRemove(true);\n action.handler();\n }}\n className={'action'}>\n {action.label}\n </Button>\n ))}\n </ActionButtons>\n )}\n {opts.showCloseButton && (\n <CloseButton className={`close-button ${theme}`}>\n <IconButton variant=\"secondary\" shape=\"circular\" useTransparentBackground action={(event) => setShouldRemove(true)}>\n <Close size=\"24px\" color={COLORS.neutral_600} />\n </IconButton>\n </CloseButton>\n )}\n {!!opts.autoClose && <Loader className={`loader ${theme}`} duration={opts.delay ?? 0} />}\n </Container>\n );\n};\n\nexport default Toast;\n\nconst animations = {\n enter: {\n bezier: 'cubic-bezier(0.22, 0.61, 0.35, 1)',\n duration: '300ms',\n [ToastEntryDirection.TOP]: {\n fromHeight: -1,\n toHeight: 0,\n fromWidth: 0,\n toWidth: 0,\n },\n [ToastEntryDirection.BOTTOM]: {\n fromHeight: 1,\n toHeight: 0,\n fromWidth: 0,\n toWidth: 0,\n },\n [ToastEntryDirection.LEFT]: {\n fromHeight: 0,\n toHeight: 0,\n fromWidth: -1,\n toWidth: 0,\n },\n [ToastEntryDirection.RIGHT]: {\n fromHeight: 0,\n toHeight: 0,\n fromWidth: 1,\n toWidth: 0,\n },\n },\n leave: {\n bezier: 'cubic-bezier(0.5, 0.05, 0.67, 0.19)',\n duration: '205ms',\n [ToastEntryDirection.TOP]: {\n fromHeight: 0,\n toHeight: -1,\n fromWidth: 0,\n toWidth: 0,\n },\n [ToastEntryDirection.BOTTOM]: {\n fromHeight: 0,\n toHeight: 1,\n fromWidth: 0,\n toWidth: 0,\n },\n [ToastEntryDirection.LEFT]: {\n fromHeight: 0,\n toHeight: 0,\n fromWidth: 0,\n toWidth: -1,\n },\n [ToastEntryDirection.RIGHT]: {\n fromHeight: 0,\n toHeight: 0,\n fromWidth: 0,\n toWidth: 1,\n },\n },\n};\n"],"file":"Toast.js"}
@@ -1,5 +1,5 @@
1
1
  import * as React from 'react';
2
- declare type Props = {
2
+ interface Props {
3
3
  id?: string;
4
4
  variant?: 'primary' | 'secondary';
5
5
  shape?: 'square' | 'circular';
@@ -16,6 +16,7 @@ declare type Props = {
16
16
  onKeyPress?: React.KeyboardEventHandler<HTMLButtonElement>;
17
17
  tabbedHereBackgroundColor?: string;
18
18
  type?: 'submit' | 'reset' | 'button' | undefined;
19
- };
20
- declare const IconButton: React.FunctionComponent<Props>;
19
+ children?: React.ReactNode;
20
+ }
21
+ declare const IconButton: React.ForwardRefExoticComponent<Props & React.RefAttributes<HTMLButtonElement>>;
21
22
  export default IconButton;
@@ -98,8 +98,8 @@ var StyledSecondaryIconButton = (0, _styledComponents.default)(StyledIconButton)
98
98
  }, _styles.COLORS.neutral_300, _styles.COLORS.neutral_300, function (props) {
99
99
  return props.tabbedHere ? tabbedHereStyle('secondary', props.tabbedHereBackgroundColor) : '';
100
100
  });
101
-
102
- var IconButton = function IconButton(_ref) {
101
+ ;
102
+ var IconButton = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
103
103
  var id = _ref.id,
104
104
  variant = _ref.variant,
105
105
  shape = _ref.shape,
@@ -141,6 +141,7 @@ var IconButton = function IconButton(_ref) {
141
141
  id: id,
142
142
  type: type !== null && type !== void 0 ? type : 'button',
143
143
  "data-testid": id,
144
+ ref: ref,
144
145
  onClick: function onClick(event) {
145
146
  return action(event);
146
147
  },
@@ -178,6 +179,7 @@ var IconButton = function IconButton(_ref) {
178
179
  type: type !== null && type !== void 0 ? type : 'button',
179
180
  "data-testid": id,
180
181
  flatEdge: flatEdge,
182
+ ref: ref,
181
183
  onClick: function onClick(event) {
182
184
  return action(event);
183
185
  },
@@ -208,8 +210,7 @@ var IconButton = function IconButton(_ref) {
208
210
  tabbedHereBackgroundColor: tabbedHereBackgroundColor
209
211
  }, /*#__PURE__*/React.createElement("div", null, children));
210
212
  }
211
- };
212
-
213
+ });
213
214
  IconButton.propTypes = {
214
215
  id: _propTypes.default.string,
215
216
  variant: _propTypes.default.oneOf(['primary', 'secondary']),
@@ -224,7 +225,8 @@ IconButton.propTypes = {
224
225
  tabIndex: _propTypes.default.number,
225
226
  borderRadius: _propTypes.default.number,
226
227
  onKeyPress: _propTypes.default.func,
227
- tabbedHereBackgroundColor: _propTypes.default.string
228
+ tabbedHereBackgroundColor: _propTypes.default.string,
229
+ children: _propTypes.default.node
228
230
  };
229
231
  var _default = IconButton;
230
232
  exports.default = _default;
@@ -1 +1 @@
1
- {"version":3,"sources":["../../../src/Button/Iconbutton.tsx"],"names":["tabbedHereStyle","variant","tabbedHereBackgroundColor","css","COLORS","primary_500","neutral_600","primary_700","white","getBorderRadius","props","borderRadius","getBorderRadiusStyle","radius","flatEdge","StyledIconButton","styled","button","hideOnLowWidth","BREAKPOINTS","MEDIUM","unsetIconSize","StyledPrimaryIconButton","useTransparentBackground","iconColor","primary_800","neutral_200","tabbedHere","StyledSecondaryIconButton","primary_20","primary_100","neutral_300","IconButton","id","shape","action","isInMobileMenu","children","disabled","tabIndex","onKeyPress","type","supressFocusRef","React","useRef","useState","setTabbedHere","isPressingEnter","e","key","preventDefault","stopPropagation","event","current"],"mappings":";;;;;;;;;;;AAAA;;AACA;;AAEA;;;;;;;;;;;;;;;;;;;;;;;;AAeA,IAAMA,eAAe,GAAG,SAAlBA,eAAkB,CAACC,OAAD,EAAkBC,yBAAlB,EAAyD;AAC/E,UAAQD,OAAR;AACE,SAAK,WAAL;AACE,iBAAOE,qBAAP,mTAEwBD,yBAAyB,IAAI,aAFrD,EAG8BE,eAAOC,WAHrC,EAOYD,eAAOE,WAPnB;;AAUF,SAAK,SAAL;AACA;AACE,iBAAOH,qBAAP,wTAEwBD,yBAAyB,IAAIE,eAAOG,WAF5D,EAOYH,eAAOI,KAPnB;AAdJ;AAyBD,CA1BD;;AA4BA,IAAMC,eAAe,GAAG,SAAlBA,eAAkB,CAACC,KAAD;AAAA,SAA4BA,KAAK,CAACC,YAAN,aAAwBD,KAAK,CAACC,YAA9B,UAAiD,KAA7E;AAAA,CAAxB;;AAEA,IAAMC,oBAAoB,GAAG,SAAvBA,oBAAuB,CAACF,KAAD,EAA2B;AACtD,MAAMG,MAAM,GAAGJ,eAAe,CAACC,KAAD,CAA9B;;AACA,UAAOA,KAAK,CAACI,QAAb;AAEI,SAAK,MAAL;AACI,2BAAcD,MAAd,cAAwBA,MAAxB;;AAEJ,SAAK,OAAL;AACI,uBAAUA,MAAV,sBAA4BA,MAA5B;;AAEJ,SAAK,MAAL;AACA;AACI,uBAAUA,MAAV;AAVR;AAYD,CAdD;;AAgBA,IAAME,gBAAgB,GAAGC,0BAAOC,MAAV,wuBAOT,UAACP,KAAD;AAAA,SAAYA,KAAK,CAACQ,cAAN,GAAuB,MAAvB,GAAgC,OAA5C;AAAA,CAPS,EAQlBC,oBAAYC,MARM,EAYH,UAACV,KAAD;AAAA,SAAYA,KAAK,CAACC,YAAN,aAAwBD,KAAK,CAACC,YAA9B,UAAiD,KAA7D;AAAA,CAZG,EAgBDC,oBAhBC,EAqBN,UAACF,KAAD;AAAA,SAAYA,KAAK,CAACW,aAAN,GAAsB,OAAtB,GAAgC,MAA5C;AAAA,CArBM,EAsBP,UAACX,KAAD;AAAA,SAAYA,KAAK,CAACW,aAAN,GAAsB,OAAtB,GAAgC,MAA5C;AAAA,CAtBO,CAAtB;;AA6CA,IAAMC,uBAAuB,GAAG,+BAAOP,gBAAP,CAAH,+nBAEL,UAACL,KAAD;AAAA,SAAYA,KAAK,CAACa,wBAAN,GAAiC,aAAjC,GAAiDnB,eAAOC,WAApE;AAAA,CAFK,EAKf,UAACK,KAAD;AAAA,SAAWA,KAAK,CAACc,SAAN,IAAmBpB,eAAOI,KAArC;AAAA,CALe,EAOb,UAACE,KAAD;AAAA,SAAWA,KAAK,CAACc,SAAN,IAAmBpB,eAAOI,KAArC;AAAA,CAPa,EAaHJ,eAAOG,WAbJ,EAiBfH,eAAOI,KAjBQ,EAsBTJ,eAAOqB,WAtBE,EA0BfrB,eAAOI,KA1BQ,EA+BHJ,eAAOsB,WA/BJ,EAmCbtB,eAAOI,KAnCM,EAqCfJ,eAAOI,KArCQ,EAwCzB,UAACE,KAAD;AAAA,SAAYA,KAAK,CAACiB,UAAN,GAAmB3B,eAAe,CAAC,SAAD,EAAYU,KAAK,CAACR,yBAAlB,CAAlC,GAAiF,EAA7F;AAAA,CAxCyB,CAA7B;AA2CA,IAAM0B,yBAAyB,GAAG,+BAAOb,gBAAP,CAAH,moBAEP,UAACL,KAAD;AAAA,SAAYA,KAAK,CAACa,wBAAN,GAAiC,aAAjC,GAAiDnB,eAAOI,KAApE;AAAA,CAFO,EAKjB,UAACE,KAAD;AAAA,SAAWA,KAAK,CAACc,SAAN,IAAmBpB,eAAOE,WAArC;AAAA,CALiB,EAOf,UAACI,KAAD;AAAA,SAAWA,KAAK,CAACc,SAAN,IAAmBpB,eAAOE,WAArC;AAAA,CAPe,EAaLF,eAAOyB,UAbF,EAiBjBzB,eAAOG,WAjBU,EAsBXH,eAAO0B,WAtBI,EA0BjB1B,eAAOqB,WA1BU,EAgCL,UAACf,KAAD;AAAA,SAAYA,KAAK,CAACa,wBAAN,GAAiC,aAAjC,GAAiDnB,eAAOI,KAApE;AAAA,CAhCK,EAoCfJ,eAAO2B,WApCQ,EAsCjB3B,eAAO2B,WAtCU,EA0C3B,UAACrB,KAAD;AAAA,SAAYA,KAAK,CAACiB,UAAN,GAAmB3B,eAAe,CAAC,WAAD,EAAcU,KAAK,CAACR,yBAApB,CAAlC,GAAmF,EAA/F;AAAA,CA1C2B,CAA/B;;AAgEA,IAAM8B,UAA0C,GAAG,SAA7CA,UAA6C,OAkBlB;AAAA,MAjB/BC,EAiB+B,QAjB/BA,EAiB+B;AAAA,MAhB/BhC,OAgB+B,QAhB/BA,OAgB+B;AAAA,MAf/BiC,KAe+B,QAf/BA,KAe+B;AAAA,MAd/BC,MAc+B,QAd/BA,MAc+B;AAAA,MAb/BjB,cAa+B,QAb/BA,cAa+B;AAAA,MAZ/BkB,cAY+B,QAZ/BA,cAY+B;AAAA,MAX/BC,QAW+B,QAX/BA,QAW+B;AAAA,MAV/Bd,wBAU+B,QAV/BA,wBAU+B;AAAA,MAT/Be,QAS+B,QAT/BA,QAS+B;AAAA,MAR/Bd,SAQ+B,QAR/BA,SAQ+B;AAAA,MAP/BH,aAO+B,QAP/BA,aAO+B;AAAA,MAN/BkB,QAM+B,QAN/BA,QAM+B;AAAA,MAL/BzB,QAK+B,QAL/BA,QAK+B;AAAA,MAJ/BH,YAI+B,QAJ/BA,YAI+B;AAAA,MAH/B6B,UAG+B,QAH/BA,UAG+B;AAAA,MAF/BtC,yBAE+B,QAF/BA,yBAE+B;AAAA,MAD/BuC,IAC+B,QAD/BA,IAC+B;AAC/B,MAAMC,eAAe,GAAGC,KAAK,CAACC,MAAN,CAAkB,IAAlB,CAAxB;;AACA,wBAAoCD,KAAK,CAACE,QAAN,CAAwB,KAAxB,CAApC;AAAA;AAAA,MAAOlB,UAAP;AAAA,MAAmBmB,aAAnB;;AAEA,MAAMC,eAAe,GAAG,SAAlBA,eAAkB,CAACC,CAAD,EAAY;AAClC,QAAIA,CAAC,CAACC,GAAF,KAAU,OAAd,EAAuB;AACrBD,MAAAA,CAAC,CAACE,cAAF;AACAF,MAAAA,CAAC,CAACG,eAAF;AACA,aAAO,IAAP;AACD;;AACD,WAAO,KAAP;AACD,GAPD,CAJ+B,CAa/B;;;AACA,UAAQlD,OAAR;AACE,SAAK,WAAL;AACE,0BACE,oBAAC,yBAAD;AACE,QAAA,EAAE,EAAEgC,EADN;AAEE,QAAA,IAAI,EAAEQ,IAAF,aAAEA,IAAF,cAAEA,IAAF,GAAU,QAFhB;AAGE,uBAAaR,EAHf;AAIE,QAAA,OAAO,EAAE,iBAACmB,KAAD;AAAA,iBAAgDjB,MAAM,CAACiB,KAAD,CAAtD;AAAA,SAJX;AAKE,QAAA,SAAS,EAAE,mBAACJ,CAAD;AAAA,iBAAaD,eAAe,CAACC,CAAD,CAAf,GAAqBb,MAAM,EAA3B,GAAgC,IAA7C;AAAA,SALb;AAME,QAAA,QAAQ,EAAEG,QANZ;AAOE,QAAA,cAAc,EAAEpB,cAAc,IAAI,KAPpC;AAQE,QAAA,YAAY,EAAEkB,cARhB;AASE,QAAA,wBAAwB,EAAEb,wBAT5B;AAUE,QAAA,SAAS,EAAEC,SAVb;AAWE,QAAA,aAAa,EAAEH,aAXjB;AAYE,QAAA,QAAQ,EAAEkB,QAAQ,IAAI,CAZxB;AAaE,QAAA,YAAY,EAAE5B,YAAY,IAAIuB,KAAK,KAAK,UAA1B,GAAuC,EAAvC,GAA4C,CAb5D;AAcE,QAAA,WAAW,EAAE,qBAACc,CAAD,EAAY;AACvB,cAAI,CAACV,QAAD,IAAa,CAACX,UAAlB,EAA8Be,eAAe,CAACW,OAAhB,GAA0B,IAA1B;AAC/B,SAhBH;AAiBE,QAAA,OAAO,EAAE,iBAACL,CAAD,EAAY;AACnB,cAAI,CAACV,QAAL,EAAe;AACb,gBAAI,CAACI,eAAe,CAACW,OAArB,EAA8BP,aAAa,CAAC,IAAD,CAAb,CAA9B,KACKJ,eAAe,CAACW,OAAhB,GAA0B,KAA1B;AACN;AACF,SAtBH;AAuBE,QAAA,MAAM,EAAE;AAAA,iBAAMP,aAAa,CAAC,KAAD,CAAnB;AAAA,SAvBV;AAwBE,QAAA,UAAU,EAAEnB,UAxBd;AAyBE,QAAA,UAAU,EAAEa,UAzBd;AA0BE,QAAA,yBAAyB,EAAEtC;AA1B7B,sBA2BE,iCAAMmC,QAAN,CA3BF,CADF;;AA+BF,SAAK,SAAL;AACA;AACE,0BACE,oBAAC,uBAAD;AACE,QAAA,EAAE,EAAEJ,EADN;AAEE,QAAA,IAAI,EAAEQ,IAAF,aAAEA,IAAF,cAAEA,IAAF,GAAU,QAFhB;AAGE,uBAAaR,EAHf;AAIE,QAAA,QAAQ,EAAEnB,QAJZ;AAKE,QAAA,OAAO,EAAE,iBAACsC,KAAD;AAAA,iBAAgDjB,MAAM,CAACiB,KAAD,CAAtD;AAAA,SALX;AAME,QAAA,SAAS,EAAE,mBAACJ,CAAD;AAAA,iBAAaD,eAAe,CAACC,CAAD,CAAf,GAAqBb,MAAM,EAA3B,GAAgC,IAA7C;AAAA,SANb;AAOE,QAAA,QAAQ,EAAEG,QAPZ;AAQE,QAAA,cAAc,EAAEpB,cAAc,IAAI,KARpC;AASE,QAAA,YAAY,EAAEkB,cAThB;AAUE,QAAA,wBAAwB,EAAEb,wBAV5B;AAWE,QAAA,SAAS,EAAEC,SAXb;AAYE,QAAA,aAAa,EAAEH,aAZjB;AAaE,QAAA,QAAQ,EAAEkB,QAAQ,IAAI,CAbxB;AAcE,QAAA,YAAY,EAAE5B,YAAY,IAAIuB,KAAK,KAAK,UAA1B,GAAuC,EAAvC,GAA4C,CAd5D;AAeE,QAAA,WAAW,EAAE,qBAACc,CAAD,EAAY;AACvB,cAAI,CAACV,QAAD,IAAa,CAACX,UAAlB,EAA8Be,eAAe,CAACW,OAAhB,GAA0B,IAA1B;AAC/B,SAjBH;AAkBE,QAAA,OAAO,EAAE,iBAACL,CAAD,EAAY;AACnB,cAAI,CAACV,QAAL,EAAe;AACb,gBAAI,CAACI,eAAe,CAACW,OAArB,EAA8BP,aAAa,CAAC,IAAD,CAAb,CAA9B,KACKJ,eAAe,CAACW,OAAhB,GAA0B,KAA1B;AACN;AACF,SAvBH;AAwBE,QAAA,MAAM,EAAE;AAAA,iBAAMP,aAAa,CAAC,KAAD,CAAnB;AAAA,SAxBV;AAyBE,QAAA,UAAU,EAAEnB,UAzBd;AA0BE,QAAA,UAAU,EAAEa,UA1Bd;AA2BE,QAAA,yBAAyB,EAAEtC;AA3B7B,sBA4BE,iCAAMmC,QAAN,CA5BF,CADF;AAnCJ;AAoED,CApGD;;;AAlBEJ,EAAAA,E;AACAhC,EAAAA,O,4BAAU,S,EAAY,W;AACtBiC,EAAAA,K,4BAAQ,Q,EAAW,U;AACnBC,EAAAA,M;AACAjB,EAAAA,c;AAEAkB,EAAAA,c;AACAE,EAAAA,Q;AACAf,EAAAA,wB;AACAC,EAAAA,S;AACAH,EAAAA,a;AACAkB,EAAAA,Q;AACA5B,EAAAA,Y;AACA6B,EAAAA,U;AACAtC,EAAAA,yB;;eA0Ga8B,U","sourcesContent":["import * as React from 'react';\nimport styled, { css } from 'styled-components';\n\nimport { BREAKPOINTS, COLORS } from '../styles';\n\ninterface HeaderItemProps {\n hideOnLowWidth: boolean;\n inMobileMenu?: boolean;\n useTransparentBackground?: boolean;\n iconColor?: string;\n unsetIconSize?: boolean;\n borderRadius?: number;\n shape?: string;\n flatEdge?: string;\n tabbedHere?: boolean;\n tabbedHereBackgroundColor?: string;\n}\n\nconst tabbedHereStyle = (variant: string, tabbedHereBackgroundColor?: string) => {\n switch (variant) {\n case 'secondary':\n return css`\n div {\n background-color: ${tabbedHereBackgroundColor || 'transparent'} !important;\n box-shadow: 0px 0px 8px ${COLORS.primary_500}, 0px 4px 12px rgba(46, 127, 161, 0.25);\n }\n div svg path,\n div svg {\n fill: ${COLORS.neutral_600};\n }\n `;\n case 'primary':\n default:\n return css`\n div {\n background-color: ${tabbedHereBackgroundColor || COLORS.primary_700} !important;\n box-shadow: 0px 4px 12px rgba(46, 127, 161, 0.25), 0px 0px 8px #2e7fa1;\n }\n div svg path,\n div svg {\n fill: ${COLORS.white};\n }\n `;\n }\n};\n\nconst getBorderRadius = (props:HeaderItemProps) => (props.borderRadius ? `${props.borderRadius}px` : '4px'); \n\nconst getBorderRadiusStyle = (props:HeaderItemProps) => {\n const radius = getBorderRadius(props);\n switch(props.flatEdge)\n {\n case 'left':\n return `0px ${radius} ${radius} 0px`;\n \n case 'right':\n return `${radius} 0px 0px ${radius}`;\n\n case 'none':\n default:\n return `${radius}`;\n }\n};\n\nconst StyledIconButton = styled.button<HeaderItemProps>`\n border-width: 0;\n cursor: pointer;\n height: 48px;\n width: 48px;\n background: transparent;\n\n display: ${(props) => (props.hideOnLowWidth ? 'none' : 'block')};\n ${BREAKPOINTS.MEDIUM} {\n display: block;\n }\n\n border-radius: ${(props) => (props.borderRadius ? `${props.borderRadius}px` : '4px')};\n div {\n height: 36px;\n width: 36px;\n border-radius: ${getBorderRadiusStyle};\n display: flex;\n justify-content: center;\n align-items: center;\n svg {\n height: ${(props) => (props.unsetIconSize ? 'unset' : '24px')};\n width: ${(props) => (props.unsetIconSize ? 'unset' : '24px')};\n padding: 0;\n }\n }\n &:only-child {\n margin: 0;\n }\n &:disabled {\n cursor: not-allowed;\n }\n &:focus:not(:disabled) {\n outline: none;\n div {\n outline: none;\n }\n }\n &:active:not(:disabled) {\n div {\n box-shadow: none;\n }\n }\n`;\n\nconst StyledPrimaryIconButton = styled(StyledIconButton)`\n div {\n background-color: ${(props) => (props.useTransparentBackground ? 'transparent' : COLORS.primary_500)};\n\n svg {\n fill: ${(props) => props.iconColor || COLORS.white};\n path {\n fill: ${(props) => props.iconColor || COLORS.white};\n }\n }\n }\n &:hover:not(:disabled) {\n div {\n background-color: ${COLORS.primary_700};\n }\n div svg path,\n div svg {\n fill: ${COLORS.white};\n }\n }\n &:active:not(:disabled) {\n div {\n background: ${COLORS.primary_800};\n }\n div svg path,\n div svg {\n fill: ${COLORS.white};\n }\n }\n &:disabled {\n div {\n background-color: ${COLORS.neutral_200};\n }\n svg {\n path {\n fill: ${COLORS.white};\n }\n fill: ${COLORS.white};\n }\n }\n ${(props) => (props.tabbedHere ? tabbedHereStyle('primary', props.tabbedHereBackgroundColor) : '')};\n`;\n\nconst StyledSecondaryIconButton = styled(StyledIconButton)`\n div {\n background-color: ${(props) => (props.useTransparentBackground ? 'transparent' : COLORS.white)};\n\n svg {\n fill: ${(props) => props.iconColor || COLORS.neutral_600};\n path {\n fill: ${(props) => props.iconColor || COLORS.neutral_600};\n }\n }\n }\n &:hover:not(:disabled) {\n div {\n background-color: ${COLORS.primary_20};\n }\n div svg path,\n div svg {\n fill: ${COLORS.primary_700};\n }\n }\n &:active:not(:disabled) {\n div {\n background: ${COLORS.primary_100};\n }\n div svg path,\n div svg {\n fill: ${COLORS.primary_800};\n }\n }\n\n &:disabled {\n div {\n background-color: ${(props) => (props.useTransparentBackground ? 'transparent' : COLORS.white)};\n }\n svg {\n path {\n fill: ${COLORS.neutral_300};\n }\n fill: ${COLORS.neutral_300};\n }\n }\n\n ${(props) => (props.tabbedHere ? tabbedHereStyle('secondary', props.tabbedHereBackgroundColor) : '')};\n`;\n\ntype Props = {\n id?: string;\n variant?: 'primary' | 'secondary';\n shape?: 'square' | 'circular';\n action: (event?: React.MouseEvent<HTMLButtonElement>) => void;\n hideOnLowWidth?: boolean;\n flatEdge?: 'right' | 'left' | 'none' | undefined;\n isInMobileMenu?: boolean;\n disabled?: boolean;\n useTransparentBackground?: boolean;\n iconColor?: string;\n unsetIconSize?: boolean;\n tabIndex?: number;\n borderRadius?: number;\n onKeyPress?: React.KeyboardEventHandler<HTMLButtonElement>;\n tabbedHereBackgroundColor?: string;\n type?: 'submit' | 'reset' | 'button' | undefined;\n};\n\nconst IconButton: React.FunctionComponent<Props> = ({\n id,\n variant,\n shape,\n action,\n hideOnLowWidth,\n isInMobileMenu,\n children,\n useTransparentBackground,\n disabled,\n iconColor,\n unsetIconSize,\n tabIndex,\n flatEdge,\n borderRadius,\n onKeyPress,\n tabbedHereBackgroundColor,\n type,\n}): React.ReactElement<Props> => {\n const supressFocusRef = React.useRef<any>(null);\n const [tabbedHere, setTabbedHere] = React.useState<boolean>(false);\n\n const isPressingEnter = (e: any) => {\n if (e.key === 'Enter') {\n e.preventDefault();\n e.stopPropagation();\n return true;\n }\n return false;\n };\n\n // Let's render button\n switch (variant) {\n case 'secondary':\n return (\n <StyledSecondaryIconButton\n id={id}\n type={type ?? 'button'}\n data-testid={id}\n onClick={(event: React.MouseEvent<HTMLButtonElement>) => action(event)}\n onKeyDown={(e: any) => (isPressingEnter(e) ? action() : null)}\n disabled={disabled}\n hideOnLowWidth={hideOnLowWidth || false}\n inMobileMenu={isInMobileMenu}\n useTransparentBackground={useTransparentBackground}\n iconColor={iconColor}\n unsetIconSize={unsetIconSize}\n tabIndex={tabIndex || 0}\n borderRadius={borderRadius || shape === 'circular' ? 18 : 0}\n onMouseDown={(e: any) => {\n if (!disabled && !tabbedHere) supressFocusRef.current = true;\n }}\n onFocus={(e: any) => {\n if (!disabled) {\n if (!supressFocusRef.current) setTabbedHere(true);\n else supressFocusRef.current = false;\n }\n }}\n onBlur={() => setTabbedHere(false)}\n tabbedHere={tabbedHere}\n onKeyPress={onKeyPress}\n tabbedHereBackgroundColor={tabbedHereBackgroundColor}>\n <div>{children}</div>\n </StyledSecondaryIconButton>\n );\n case 'primary':\n default:\n return (\n <StyledPrimaryIconButton\n id={id}\n type={type ?? 'button'}\n data-testid={id}\n flatEdge={flatEdge}\n onClick={(event: React.MouseEvent<HTMLButtonElement>) => action(event)}\n onKeyDown={(e: any) => (isPressingEnter(e) ? action() : null)}\n disabled={disabled}\n hideOnLowWidth={hideOnLowWidth || false}\n inMobileMenu={isInMobileMenu}\n useTransparentBackground={useTransparentBackground}\n iconColor={iconColor}\n unsetIconSize={unsetIconSize}\n tabIndex={tabIndex || 0}\n borderRadius={borderRadius || shape === 'circular' ? 18 : 0}\n onMouseDown={(e: any) => {\n if (!disabled && !tabbedHere) supressFocusRef.current = true;\n }}\n onFocus={(e: any) => {\n if (!disabled) {\n if (!supressFocusRef.current) setTabbedHere(true);\n else supressFocusRef.current = false;\n }\n }}\n onBlur={() => setTabbedHere(false)}\n tabbedHere={tabbedHere}\n onKeyPress={onKeyPress}\n tabbedHereBackgroundColor={tabbedHereBackgroundColor}>\n <div>{children}</div>\n </StyledPrimaryIconButton>\n );\n }\n};\n\nexport default IconButton;\n"],"file":"Iconbutton.js"}
1
+ {"version":3,"sources":["../../../src/Button/Iconbutton.tsx"],"names":["tabbedHereStyle","variant","tabbedHereBackgroundColor","css","COLORS","primary_500","neutral_600","primary_700","white","getBorderRadius","props","borderRadius","getBorderRadiusStyle","radius","flatEdge","StyledIconButton","styled","button","hideOnLowWidth","BREAKPOINTS","MEDIUM","unsetIconSize","StyledPrimaryIconButton","useTransparentBackground","iconColor","primary_800","neutral_200","tabbedHere","StyledSecondaryIconButton","primary_20","primary_100","neutral_300","IconButton","React","forwardRef","ref","id","shape","action","isInMobileMenu","children","disabled","tabIndex","onKeyPress","type","supressFocusRef","useRef","useState","setTabbedHere","isPressingEnter","e","key","preventDefault","stopPropagation","event","current"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport styled, { css } from 'styled-components';\n\nimport { BREAKPOINTS, COLORS } from '../styles';\n\ninterface HeaderItemProps {\n hideOnLowWidth: boolean;\n inMobileMenu?: boolean;\n useTransparentBackground?: boolean;\n iconColor?: string;\n unsetIconSize?: boolean;\n borderRadius?: number;\n shape?: string;\n flatEdge?: string;\n tabbedHere?: boolean;\n tabbedHereBackgroundColor?: string;\n}\n\nconst tabbedHereStyle = (variant: string, tabbedHereBackgroundColor?: string) => {\n switch (variant) {\n case 'secondary':\n return css`\n div {\n background-color: ${tabbedHereBackgroundColor || 'transparent'} !important;\n box-shadow: 0px 0px 8px ${COLORS.primary_500}, 0px 4px 12px rgba(46, 127, 161, 0.25);\n }\n div svg path,\n div svg {\n fill: ${COLORS.neutral_600};\n }\n `;\n case 'primary':\n default:\n return css`\n div {\n background-color: ${tabbedHereBackgroundColor || COLORS.primary_700} !important;\n box-shadow: 0px 4px 12px rgba(46, 127, 161, 0.25), 0px 0px 8px #2e7fa1;\n }\n div svg path,\n div svg {\n fill: ${COLORS.white};\n }\n `;\n }\n};\n\nconst getBorderRadius = (props:HeaderItemProps) => (props.borderRadius ? `${props.borderRadius}px` : '4px'); \n\nconst getBorderRadiusStyle = (props:HeaderItemProps) => {\n const radius = getBorderRadius(props);\n switch(props.flatEdge)\n {\n case 'left':\n return `0px ${radius} ${radius} 0px`;\n \n case 'right':\n return `${radius} 0px 0px ${radius}`;\n\n case 'none':\n default:\n return `${radius}`;\n }\n};\n\nconst StyledIconButton = styled.button<HeaderItemProps>`\n border-width: 0;\n cursor: pointer;\n height: 48px;\n width: 48px;\n background: transparent;\n\n display: ${(props) => (props.hideOnLowWidth ? 'none' : 'block')};\n ${BREAKPOINTS.MEDIUM} {\n display: block;\n }\n\n border-radius: ${(props) => (props.borderRadius ? `${props.borderRadius}px` : '4px')};\n div {\n height: 36px;\n width: 36px;\n border-radius: ${getBorderRadiusStyle};\n display: flex;\n justify-content: center;\n align-items: center;\n svg {\n height: ${(props) => (props.unsetIconSize ? 'unset' : '24px')};\n width: ${(props) => (props.unsetIconSize ? 'unset' : '24px')};\n padding: 0;\n }\n }\n &:only-child {\n margin: 0;\n }\n &:disabled {\n cursor: not-allowed;\n }\n &:focus:not(:disabled) {\n outline: none;\n div {\n outline: none;\n }\n }\n &:active:not(:disabled) {\n div {\n box-shadow: none;\n }\n }\n`;\n\nconst StyledPrimaryIconButton = styled(StyledIconButton)`\n div {\n background-color: ${(props) => (props.useTransparentBackground ? 'transparent' : COLORS.primary_500)};\n\n svg {\n fill: ${(props) => props.iconColor || COLORS.white};\n path {\n fill: ${(props) => props.iconColor || COLORS.white};\n }\n }\n }\n &:hover:not(:disabled) {\n div {\n background-color: ${COLORS.primary_700};\n }\n div svg path,\n div svg {\n fill: ${COLORS.white};\n }\n }\n &:active:not(:disabled) {\n div {\n background: ${COLORS.primary_800};\n }\n div svg path,\n div svg {\n fill: ${COLORS.white};\n }\n }\n &:disabled {\n div {\n background-color: ${COLORS.neutral_200};\n }\n svg {\n path {\n fill: ${COLORS.white};\n }\n fill: ${COLORS.white};\n }\n }\n ${(props) => (props.tabbedHere ? tabbedHereStyle('primary', props.tabbedHereBackgroundColor) : '')};\n`;\n\nconst StyledSecondaryIconButton = styled(StyledIconButton)`\n div {\n background-color: ${(props) => (props.useTransparentBackground ? 'transparent' : COLORS.white)};\n\n svg {\n fill: ${(props) => props.iconColor || COLORS.neutral_600};\n path {\n fill: ${(props) => props.iconColor || COLORS.neutral_600};\n }\n }\n }\n &:hover:not(:disabled) {\n div {\n background-color: ${COLORS.primary_20};\n }\n div svg path,\n div svg {\n fill: ${COLORS.primary_700};\n }\n }\n &:active:not(:disabled) {\n div {\n background: ${COLORS.primary_100};\n }\n div svg path,\n div svg {\n fill: ${COLORS.primary_800};\n }\n }\n\n &:disabled {\n div {\n background-color: ${(props) => (props.useTransparentBackground ? 'transparent' : COLORS.white)};\n }\n svg {\n path {\n fill: ${COLORS.neutral_300};\n }\n fill: ${COLORS.neutral_300};\n }\n }\n\n ${(props) => (props.tabbedHere ? tabbedHereStyle('secondary', props.tabbedHereBackgroundColor) : '')};\n`;\n\ninterface Props {\n id?: string;\n variant?: 'primary' | 'secondary';\n shape?: 'square' | 'circular';\n action: (event?: React.MouseEvent<HTMLButtonElement>) => void;\n hideOnLowWidth?: boolean;\n flatEdge?: 'right' | 'left' | 'none' | undefined;\n isInMobileMenu?: boolean;\n disabled?: boolean;\n useTransparentBackground?: boolean;\n iconColor?: string;\n unsetIconSize?: boolean;\n tabIndex?: number;\n borderRadius?: number;\n onKeyPress?: React.KeyboardEventHandler<HTMLButtonElement>;\n tabbedHereBackgroundColor?: string;\n type?: 'submit' | 'reset' | 'button' | undefined;\n children?: React.ReactNode;\n};\n\nconst IconButton = React.forwardRef<HTMLButtonElement, Props>(({\n id,\n variant,\n shape,\n action,\n hideOnLowWidth,\n isInMobileMenu,\n children,\n useTransparentBackground,\n disabled,\n iconColor,\n unsetIconSize,\n tabIndex,\n flatEdge,\n borderRadius,\n onKeyPress,\n tabbedHereBackgroundColor,\n type,\n}: Props, ref) => {\n const supressFocusRef = React.useRef<any>(null);\n const [tabbedHere, setTabbedHere] = React.useState<boolean>(false);\n\n const isPressingEnter = (e: any) => {\n if (e.key === 'Enter') {\n e.preventDefault();\n e.stopPropagation();\n return true;\n }\n return false;\n };\n\n // Let's render button\n switch (variant) {\n case 'secondary':\n return (\n <StyledSecondaryIconButton\n id={id}\n type={type ?? 'button'}\n data-testid={id}\n ref={ref}\n onClick={(event: React.MouseEvent<HTMLButtonElement>) => action(event)}\n onKeyDown={(e: any) => (isPressingEnter(e) ? action() : null)}\n disabled={disabled}\n hideOnLowWidth={hideOnLowWidth || false}\n inMobileMenu={isInMobileMenu}\n useTransparentBackground={useTransparentBackground}\n iconColor={iconColor}\n unsetIconSize={unsetIconSize}\n tabIndex={tabIndex || 0}\n borderRadius={borderRadius || shape === 'circular' ? 18 : 0}\n onMouseDown={(e: any) => {\n if (!disabled && !tabbedHere) supressFocusRef.current = true;\n }}\n onFocus={(e: any) => {\n if (!disabled) {\n if (!supressFocusRef.current) setTabbedHere(true);\n else supressFocusRef.current = false;\n }\n }}\n onBlur={() => setTabbedHere(false)}\n tabbedHere={tabbedHere}\n onKeyPress={onKeyPress}\n tabbedHereBackgroundColor={tabbedHereBackgroundColor}>\n <div>{children}</div>\n </StyledSecondaryIconButton>\n );\n case 'primary':\n default:\n return (\n <StyledPrimaryIconButton\n id={id}\n type={type ?? 'button'}\n data-testid={id}\n flatEdge={flatEdge}\n ref={ref}\n onClick={(event: React.MouseEvent<HTMLButtonElement>) => action(event)}\n onKeyDown={(e: any) => (isPressingEnter(e) ? action() : null)}\n disabled={disabled}\n hideOnLowWidth={hideOnLowWidth || false}\n inMobileMenu={isInMobileMenu}\n useTransparentBackground={useTransparentBackground}\n iconColor={iconColor}\n unsetIconSize={unsetIconSize}\n tabIndex={tabIndex || 0}\n borderRadius={borderRadius || shape === 'circular' ? 18 : 0}\n onMouseDown={(e: any) => {\n if (!disabled && !tabbedHere) supressFocusRef.current = true;\n }}\n onFocus={(e: any) => {\n if (!disabled) {\n if (!supressFocusRef.current) setTabbedHere(true);\n else supressFocusRef.current = false;\n }\n }}\n onBlur={() => setTabbedHere(false)}\n tabbedHere={tabbedHere}\n onKeyPress={onKeyPress}\n tabbedHereBackgroundColor={tabbedHereBackgroundColor}>\n <div>{children}</div>\n </StyledPrimaryIconButton>\n );\n }\n});\n\nexport default IconButton;\n"],"file":"Iconbutton.js"}