@laerdal/life-react-components 2.2.1-dev.13 → 2.2.1-dev.14
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.
|
@@ -104,6 +104,7 @@ var DropdownButton = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
|
|
|
104
104
|
variant: "secondary",
|
|
105
105
|
shape: "circular",
|
|
106
106
|
role: "button",
|
|
107
|
+
tooltip: rest.tooltip,
|
|
107
108
|
id: id,
|
|
108
109
|
"data-testId": dataTestId,
|
|
109
110
|
"aria-controls": "".concat(id, "_dropdowncontent"),
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DropdownButton.cjs","names":["Wrapper","styled","div","DropdownButton","React","forwardRef","ref","items","icon","disabled","onClick","itemsType","action","actionLabel","actionVariant","actionIcon","actionLoading","size","width","alignLeft","multiSelect","scrollable","pinTopItem","maxHeight","className","value","id","dataTestId","rest","useState","dropdownOpen","setDropdownOpen","activeDescendant","setActiveDescendant","selectedValues","setSelectedValues","focused","setFocused","keyboardNavigated","setKeyboardNavigated","dropdownRef","useRef","containerRef","useFocusOutsideRef","useClickOutsideRef","useEffect","handleValueSelect","values","renderButton","type","event","detail","label","keepLabel","length","filter","a","includes","map","displayLabel","join","cls","defaultOnMouseDownHandler","e","key","preventDefault","stopPropagation","onValueUpdate"],"sources":["../../src/Dropdown/DropdownButton.tsx"],"sourcesContent":["/**\n * Import React libraries.\n */\nimport * as React from 'react';\n\n/**\n * Import custom components.\n */\nimport {IconButton} from '../Button';\nimport DropdownContent from './DropdownContent';\nimport styled from 'styled-components';\n\n/**\n * Import custom types.\n */\nimport {DropdownButtonProps} from './DropdownButtonTypes';\nimport {defaultOnMouseDownHandler, useClickOutsideRef, useFocusOutsideRef} from '../common';\nimport {\n TextButtonDropdownArrow,\n TextButtonDropdownContent,\n TextButtonDropdownIcon,\n TextButtonDropdownText,\n TextButtonDropdownWrapper\n} from './CommonStyling';\nimport {ArrowDropDown, ArrowDropUp} from '../icons/systemicons/SystemIcons';\n\nconst Wrapper = styled.div`\n display: inline-block;\n`;\n\nconst DropdownButton = React.forwardRef( ({\n items,\n icon,\n disabled,\n onClick,\n itemsType = 'normal',\n action,\n actionLabel = '',\n actionVariant,\n actionIcon,\n actionLoading,\n size,\n width,\n alignLeft,\n multiSelect = false,\n scrollable = false,\n pinTopItem = false,\n maxHeight,\n className,\n value,\n id,\n dataTestId,\n ...rest\n }: DropdownButtonProps, ref: React.Ref<HTMLButtonElement>) => {\n // Globally used variables within the view.\n const [dropdownOpen, setDropdownOpen] = React.useState<boolean>(false);\n const [activeDescendant, setActiveDescendant] = React.useState<string>();\n const [selectedValues, setSelectedValues] = React.useState<string[]>([]);\n const [focused, setFocused] = React.useState<number | null>(null);\n const [keyboardNavigated, setKeyboardNavigated] = React.useState<boolean>(false);\n const dropdownRef = React.useRef<HTMLDivElement>(null);\n\n const containerRef = useFocusOutsideRef(() => setDropdownOpen(false), [dropdownRef]);\n useClickOutsideRef(() => setDropdownOpen(false), [], containerRef);\n\n React.useEffect(() => {\n !dropdownOpen && setKeyboardNavigated(false)\n }, [dropdownOpen]);\n\n React.useEffect(() => {\n disabled && setDropdownOpen(false)\n }, [disabled]);\n\n React.useEffect(() => {\n setSelectedValues(value || []);\n }, [value]);\n\n const handleValueSelect = (values: string[]) => {\n // Do all required actions\n onClick(values);\n };\n\n /**\n * Renders Icon Button dropdown menu.\n * @returns HTML View for the Icon button dropdown menu.\n */\n const renderButton = () => {\n switch (rest.type) {\n case 'icon':\n return (\n <IconButton ref={ref}\n variant=\"secondary\"\n shape=\"circular\"\n role=\"button\"\n id={id}\n data-testId={dataTestId}\n aria-controls={`${id}_dropdowncontent`}\n aria-activedescendant={activeDescendant}\n \n action={(event: any) => {\n setDropdownOpen(!dropdownOpen);\n if (event?.detail !== 1) {\n setKeyboardNavigated(true);\n }\n }}\n disabled={disabled}>\n {icon}\n </IconButton>\n );\n case 'text':\n const label = rest.keepLabel || !selectedValues?.length\n ? rest.label\n : items.filter(a => selectedValues.includes(a.value)).map(a => a.displayLabel ?? a.value).join(', ');\n const cls = `${disabled && 'disabled'} ${dropdownOpen && 'expanded'} ${className}`;\n return <TextButtonDropdownWrapper tabIndex={!disabled ? 0 : -1}\n className={cls}\n role=\"button\"\n id={id}\n data-testId={dataTestId}\n aria-controls={`${id}_dropdowncontent`}\n aria-activedescendant={activeDescendant}\n onMouseDown={defaultOnMouseDownHandler}\n onKeyDown={e => {\n if (e.key === 'Enter' || e.key === ' ') {\n e.preventDefault();\n e.stopPropagation();\n setDropdownOpen(!dropdownOpen);\n setKeyboardNavigated(true);\n }\n }}\n onClick={() => !disabled && setDropdownOpen(!dropdownOpen)}>\n <TextButtonDropdownContent>\n {icon && <TextButtonDropdownIcon>{icon}</TextButtonDropdownIcon>}\n <TextButtonDropdownText>{label}</TextButtonDropdownText>\n <TextButtonDropdownArrow>\n {\n dropdownOpen\n ? <ArrowDropUp size=\"24px\"/>\n : <ArrowDropDown size=\"24px\"/>\n }\n </TextButtonDropdownArrow>\n </TextButtonDropdownContent>\n </TextButtonDropdownWrapper>\n }\n };\n\n return (\n <Wrapper className={className} ref={containerRef}> \n {renderButton()}\n <DropdownContent\n ref={dropdownRef}\n ariaRolesType=\"menu\"\n containerRef={containerRef}\n customizationProps={{\n itemsType: itemsType,\n action: action ?? (() => {\n }),\n actionLabel: actionLabel,\n actionVariant: actionVariant,\n onValueUpdate: handleValueSelect,\n multiSelect: multiSelect,\n actionIcon: actionIcon,\n actionLoading: actionLoading,\n scrollable: scrollable,\n pinTopItem: pinTopItem,\n maxHeight: maxHeight,\n items: items\n }}\n onActiveDescendantChanged={(e) => setActiveDescendant(e)}\n focused={focused}\n setFocused={setFocused}\n size={size}\n width={width}\n alignLeft={alignLeft}\n isOpen={dropdownOpen}\n setIsOpen={setDropdownOpen}\n outline={keyboardNavigated}\n filter=\"\"\n selectedValues={rest.type === 'icon' && itemsType === 'normal' ? [] : selectedValues}\n setSelectedValues={setSelectedValues}\n messageOnNoResults=\"No results\"\n isButton={true}\n id={`${id}_dropdowncontent`}\n />\n </Wrapper>\n );\n});\n\nexport default DropdownButton;\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"DropdownButton.cjs","names":["Wrapper","styled","div","DropdownButton","React","forwardRef","ref","items","icon","disabled","onClick","itemsType","action","actionLabel","actionVariant","actionIcon","actionLoading","size","width","alignLeft","multiSelect","scrollable","pinTopItem","maxHeight","className","value","id","dataTestId","rest","useState","dropdownOpen","setDropdownOpen","activeDescendant","setActiveDescendant","selectedValues","setSelectedValues","focused","setFocused","keyboardNavigated","setKeyboardNavigated","dropdownRef","useRef","containerRef","useFocusOutsideRef","useClickOutsideRef","useEffect","handleValueSelect","values","renderButton","type","tooltip","event","detail","label","keepLabel","length","filter","a","includes","map","displayLabel","join","cls","defaultOnMouseDownHandler","e","key","preventDefault","stopPropagation","onValueUpdate"],"sources":["../../src/Dropdown/DropdownButton.tsx"],"sourcesContent":["/**\n * Import React libraries.\n */\nimport * as React from 'react';\n\n/**\n * Import custom components.\n */\nimport {IconButton} from '../Button';\nimport DropdownContent from './DropdownContent';\nimport styled from 'styled-components';\n\n/**\n * Import custom types.\n */\nimport {DropdownButtonProps} from './DropdownButtonTypes';\nimport {defaultOnMouseDownHandler, useClickOutsideRef, useFocusOutsideRef} from '../common';\nimport {\n TextButtonDropdownArrow,\n TextButtonDropdownContent,\n TextButtonDropdownIcon,\n TextButtonDropdownText,\n TextButtonDropdownWrapper\n} from './CommonStyling';\nimport {ArrowDropDown, ArrowDropUp} from '../icons/systemicons/SystemIcons';\n\nconst Wrapper = styled.div`\n display: inline-block;\n`;\n\nconst DropdownButton = React.forwardRef( ({\n items,\n icon,\n disabled,\n onClick,\n itemsType = 'normal',\n action,\n actionLabel = '',\n actionVariant,\n actionIcon,\n actionLoading,\n size,\n width,\n alignLeft,\n multiSelect = false,\n scrollable = false,\n pinTopItem = false,\n maxHeight,\n className,\n value,\n id,\n dataTestId,\n ...rest\n }: DropdownButtonProps, ref: React.Ref<HTMLButtonElement>) => {\n // Globally used variables within the view.\n const [dropdownOpen, setDropdownOpen] = React.useState<boolean>(false);\n const [activeDescendant, setActiveDescendant] = React.useState<string>();\n const [selectedValues, setSelectedValues] = React.useState<string[]>([]);\n const [focused, setFocused] = React.useState<number | null>(null);\n const [keyboardNavigated, setKeyboardNavigated] = React.useState<boolean>(false);\n const dropdownRef = React.useRef<HTMLDivElement>(null);\n\n const containerRef = useFocusOutsideRef(() => setDropdownOpen(false), [dropdownRef]);\n useClickOutsideRef(() => setDropdownOpen(false), [], containerRef);\n\n React.useEffect(() => {\n !dropdownOpen && setKeyboardNavigated(false)\n }, [dropdownOpen]);\n\n React.useEffect(() => {\n disabled && setDropdownOpen(false)\n }, [disabled]);\n\n React.useEffect(() => {\n setSelectedValues(value || []);\n }, [value]);\n\n const handleValueSelect = (values: string[]) => {\n // Do all required actions\n onClick(values);\n };\n\n /**\n * Renders Icon Button dropdown menu.\n * @returns HTML View for the Icon button dropdown menu.\n */\n const renderButton = () => {\n switch (rest.type) {\n case 'icon':\n return (\n <IconButton ref={ref}\n variant=\"secondary\"\n shape=\"circular\"\n role=\"button\"\n tooltip={rest.tooltip}\n id={id}\n data-testId={dataTestId}\n aria-controls={`${id}_dropdowncontent`}\n aria-activedescendant={activeDescendant}\n \n action={(event: any) => {\n setDropdownOpen(!dropdownOpen);\n if (event?.detail !== 1) {\n setKeyboardNavigated(true);\n }\n }}\n disabled={disabled}>\n {icon}\n </IconButton>\n );\n case 'text':\n const label = rest.keepLabel || !selectedValues?.length\n ? rest.label\n : items.filter(a => selectedValues.includes(a.value)).map(a => a.displayLabel ?? a.value).join(', ');\n const cls = `${disabled && 'disabled'} ${dropdownOpen && 'expanded'} ${className}`;\n return <TextButtonDropdownWrapper tabIndex={!disabled ? 0 : -1}\n className={cls}\n role=\"button\"\n id={id}\n data-testId={dataTestId}\n aria-controls={`${id}_dropdowncontent`}\n aria-activedescendant={activeDescendant}\n onMouseDown={defaultOnMouseDownHandler}\n onKeyDown={e => {\n if (e.key === 'Enter' || e.key === ' ') {\n e.preventDefault();\n e.stopPropagation();\n setDropdownOpen(!dropdownOpen);\n setKeyboardNavigated(true);\n }\n }}\n onClick={() => !disabled && setDropdownOpen(!dropdownOpen)}>\n <TextButtonDropdownContent>\n {icon && <TextButtonDropdownIcon>{icon}</TextButtonDropdownIcon>}\n <TextButtonDropdownText>{label}</TextButtonDropdownText>\n <TextButtonDropdownArrow>\n {\n dropdownOpen\n ? <ArrowDropUp size=\"24px\"/>\n : <ArrowDropDown size=\"24px\"/>\n }\n </TextButtonDropdownArrow>\n </TextButtonDropdownContent>\n </TextButtonDropdownWrapper>\n }\n };\n\n return (\n <Wrapper className={className} ref={containerRef}> \n {renderButton()}\n <DropdownContent\n ref={dropdownRef}\n ariaRolesType=\"menu\"\n containerRef={containerRef}\n customizationProps={{\n itemsType: itemsType,\n action: action ?? (() => {\n }),\n actionLabel: actionLabel,\n actionVariant: actionVariant,\n onValueUpdate: handleValueSelect,\n multiSelect: multiSelect,\n actionIcon: actionIcon,\n actionLoading: actionLoading,\n scrollable: scrollable,\n pinTopItem: pinTopItem,\n maxHeight: maxHeight,\n items: items\n }}\n onActiveDescendantChanged={(e) => setActiveDescendant(e)}\n focused={focused}\n setFocused={setFocused}\n size={size}\n width={width}\n alignLeft={alignLeft}\n isOpen={dropdownOpen}\n setIsOpen={setDropdownOpen}\n outline={keyboardNavigated}\n filter=\"\"\n selectedValues={rest.type === 'icon' && itemsType === 'normal' ? [] : selectedValues}\n setSelectedValues={setSelectedValues}\n messageOnNoResults=\"No results\"\n isButton={true}\n id={`${id}_dropdowncontent`}\n />\n </Wrapper>\n );\n});\n\nexport default DropdownButton;\n"],"mappings":"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"}
|
|
@@ -107,6 +107,7 @@ var DropdownButton = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
|
|
|
107
107
|
variant: "secondary",
|
|
108
108
|
shape: "circular",
|
|
109
109
|
role: "button",
|
|
110
|
+
tooltip: rest.tooltip,
|
|
110
111
|
id: id,
|
|
111
112
|
"data-testId": dataTestId,
|
|
112
113
|
"aria-controls": "".concat(id, "_dropdowncontent"),
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DropdownButton.js","names":["React","IconButton","DropdownContent","styled","defaultOnMouseDownHandler","useClickOutsideRef","useFocusOutsideRef","TextButtonDropdownArrow","TextButtonDropdownContent","TextButtonDropdownIcon","TextButtonDropdownText","TextButtonDropdownWrapper","ArrowDropDown","ArrowDropUp","Wrapper","div","DropdownButton","forwardRef","ref","items","icon","disabled","onClick","itemsType","action","actionLabel","actionVariant","actionIcon","actionLoading","size","width","alignLeft","multiSelect","scrollable","pinTopItem","maxHeight","className","value","id","dataTestId","rest","useState","dropdownOpen","setDropdownOpen","activeDescendant","setActiveDescendant","selectedValues","setSelectedValues","focused","setFocused","keyboardNavigated","setKeyboardNavigated","dropdownRef","useRef","containerRef","useEffect","handleValueSelect","values","renderButton","type","event","detail","label","keepLabel","length","filter","a","includes","map","displayLabel","join","cls","e","key","preventDefault","stopPropagation","onValueUpdate"],"sources":["../../src/Dropdown/DropdownButton.tsx"],"sourcesContent":["/**\n * Import React libraries.\n */\nimport * as React from 'react';\n\n/**\n * Import custom components.\n */\nimport {IconButton} from '../Button';\nimport DropdownContent from './DropdownContent';\nimport styled from 'styled-components';\n\n/**\n * Import custom types.\n */\nimport {DropdownButtonProps} from './DropdownButtonTypes';\nimport {defaultOnMouseDownHandler, useClickOutsideRef, useFocusOutsideRef} from '../common';\nimport {\n TextButtonDropdownArrow,\n TextButtonDropdownContent,\n TextButtonDropdownIcon,\n TextButtonDropdownText,\n TextButtonDropdownWrapper\n} from './CommonStyling';\nimport {ArrowDropDown, ArrowDropUp} from '../icons/systemicons/SystemIcons';\n\nconst Wrapper = styled.div`\n display: inline-block;\n`;\n\nconst DropdownButton = React.forwardRef( ({\n items,\n icon,\n disabled,\n onClick,\n itemsType = 'normal',\n action,\n actionLabel = '',\n actionVariant,\n actionIcon,\n actionLoading,\n size,\n width,\n alignLeft,\n multiSelect = false,\n scrollable = false,\n pinTopItem = false,\n maxHeight,\n className,\n value,\n id,\n dataTestId,\n ...rest\n }: DropdownButtonProps, ref: React.Ref<HTMLButtonElement>) => {\n // Globally used variables within the view.\n const [dropdownOpen, setDropdownOpen] = React.useState<boolean>(false);\n const [activeDescendant, setActiveDescendant] = React.useState<string>();\n const [selectedValues, setSelectedValues] = React.useState<string[]>([]);\n const [focused, setFocused] = React.useState<number | null>(null);\n const [keyboardNavigated, setKeyboardNavigated] = React.useState<boolean>(false);\n const dropdownRef = React.useRef<HTMLDivElement>(null);\n\n const containerRef = useFocusOutsideRef(() => setDropdownOpen(false), [dropdownRef]);\n useClickOutsideRef(() => setDropdownOpen(false), [], containerRef);\n\n React.useEffect(() => {\n !dropdownOpen && setKeyboardNavigated(false)\n }, [dropdownOpen]);\n\n React.useEffect(() => {\n disabled && setDropdownOpen(false)\n }, [disabled]);\n\n React.useEffect(() => {\n setSelectedValues(value || []);\n }, [value]);\n\n const handleValueSelect = (values: string[]) => {\n // Do all required actions\n onClick(values);\n };\n\n /**\n * Renders Icon Button dropdown menu.\n * @returns HTML View for the Icon button dropdown menu.\n */\n const renderButton = () => {\n switch (rest.type) {\n case 'icon':\n return (\n <IconButton ref={ref}\n variant=\"secondary\"\n shape=\"circular\"\n role=\"button\"\n id={id}\n data-testId={dataTestId}\n aria-controls={`${id}_dropdowncontent`}\n aria-activedescendant={activeDescendant}\n \n action={(event: any) => {\n setDropdownOpen(!dropdownOpen);\n if (event?.detail !== 1) {\n setKeyboardNavigated(true);\n }\n }}\n disabled={disabled}>\n {icon}\n </IconButton>\n );\n case 'text':\n const label = rest.keepLabel || !selectedValues?.length\n ? rest.label\n : items.filter(a => selectedValues.includes(a.value)).map(a => a.displayLabel ?? a.value).join(', ');\n const cls = `${disabled && 'disabled'} ${dropdownOpen && 'expanded'} ${className}`;\n return <TextButtonDropdownWrapper tabIndex={!disabled ? 0 : -1}\n className={cls}\n role=\"button\"\n id={id}\n data-testId={dataTestId}\n aria-controls={`${id}_dropdowncontent`}\n aria-activedescendant={activeDescendant}\n onMouseDown={defaultOnMouseDownHandler}\n onKeyDown={e => {\n if (e.key === 'Enter' || e.key === ' ') {\n e.preventDefault();\n e.stopPropagation();\n setDropdownOpen(!dropdownOpen);\n setKeyboardNavigated(true);\n }\n }}\n onClick={() => !disabled && setDropdownOpen(!dropdownOpen)}>\n <TextButtonDropdownContent>\n {icon && <TextButtonDropdownIcon>{icon}</TextButtonDropdownIcon>}\n <TextButtonDropdownText>{label}</TextButtonDropdownText>\n <TextButtonDropdownArrow>\n {\n dropdownOpen\n ? <ArrowDropUp size=\"24px\"/>\n : <ArrowDropDown size=\"24px\"/>\n }\n </TextButtonDropdownArrow>\n </TextButtonDropdownContent>\n </TextButtonDropdownWrapper>\n }\n };\n\n return (\n <Wrapper className={className} ref={containerRef}> \n {renderButton()}\n <DropdownContent\n ref={dropdownRef}\n ariaRolesType=\"menu\"\n containerRef={containerRef}\n customizationProps={{\n itemsType: itemsType,\n action: action ?? (() => {\n }),\n actionLabel: actionLabel,\n actionVariant: actionVariant,\n onValueUpdate: handleValueSelect,\n multiSelect: multiSelect,\n actionIcon: actionIcon,\n actionLoading: actionLoading,\n scrollable: scrollable,\n pinTopItem: pinTopItem,\n maxHeight: maxHeight,\n items: items\n }}\n onActiveDescendantChanged={(e) => setActiveDescendant(e)}\n focused={focused}\n setFocused={setFocused}\n size={size}\n width={width}\n alignLeft={alignLeft}\n isOpen={dropdownOpen}\n setIsOpen={setDropdownOpen}\n outline={keyboardNavigated}\n filter=\"\"\n selectedValues={rest.type === 'icon' && itemsType === 'normal' ? [] : selectedValues}\n setSelectedValues={setSelectedValues}\n messageOnNoResults=\"No results\"\n isButton={true}\n id={`${id}_dropdowncontent`}\n />\n </Wrapper>\n );\n});\n\nexport default DropdownButton;\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"DropdownButton.js","names":["React","IconButton","DropdownContent","styled","defaultOnMouseDownHandler","useClickOutsideRef","useFocusOutsideRef","TextButtonDropdownArrow","TextButtonDropdownContent","TextButtonDropdownIcon","TextButtonDropdownText","TextButtonDropdownWrapper","ArrowDropDown","ArrowDropUp","Wrapper","div","DropdownButton","forwardRef","ref","items","icon","disabled","onClick","itemsType","action","actionLabel","actionVariant","actionIcon","actionLoading","size","width","alignLeft","multiSelect","scrollable","pinTopItem","maxHeight","className","value","id","dataTestId","rest","useState","dropdownOpen","setDropdownOpen","activeDescendant","setActiveDescendant","selectedValues","setSelectedValues","focused","setFocused","keyboardNavigated","setKeyboardNavigated","dropdownRef","useRef","containerRef","useEffect","handleValueSelect","values","renderButton","type","tooltip","event","detail","label","keepLabel","length","filter","a","includes","map","displayLabel","join","cls","e","key","preventDefault","stopPropagation","onValueUpdate"],"sources":["../../src/Dropdown/DropdownButton.tsx"],"sourcesContent":["/**\n * Import React libraries.\n */\nimport * as React from 'react';\n\n/**\n * Import custom components.\n */\nimport {IconButton} from '../Button';\nimport DropdownContent from './DropdownContent';\nimport styled from 'styled-components';\n\n/**\n * Import custom types.\n */\nimport {DropdownButtonProps} from './DropdownButtonTypes';\nimport {defaultOnMouseDownHandler, useClickOutsideRef, useFocusOutsideRef} from '../common';\nimport {\n TextButtonDropdownArrow,\n TextButtonDropdownContent,\n TextButtonDropdownIcon,\n TextButtonDropdownText,\n TextButtonDropdownWrapper\n} from './CommonStyling';\nimport {ArrowDropDown, ArrowDropUp} from '../icons/systemicons/SystemIcons';\n\nconst Wrapper = styled.div`\n display: inline-block;\n`;\n\nconst DropdownButton = React.forwardRef( ({\n items,\n icon,\n disabled,\n onClick,\n itemsType = 'normal',\n action,\n actionLabel = '',\n actionVariant,\n actionIcon,\n actionLoading,\n size,\n width,\n alignLeft,\n multiSelect = false,\n scrollable = false,\n pinTopItem = false,\n maxHeight,\n className,\n value,\n id,\n dataTestId,\n ...rest\n }: DropdownButtonProps, ref: React.Ref<HTMLButtonElement>) => {\n // Globally used variables within the view.\n const [dropdownOpen, setDropdownOpen] = React.useState<boolean>(false);\n const [activeDescendant, setActiveDescendant] = React.useState<string>();\n const [selectedValues, setSelectedValues] = React.useState<string[]>([]);\n const [focused, setFocused] = React.useState<number | null>(null);\n const [keyboardNavigated, setKeyboardNavigated] = React.useState<boolean>(false);\n const dropdownRef = React.useRef<HTMLDivElement>(null);\n\n const containerRef = useFocusOutsideRef(() => setDropdownOpen(false), [dropdownRef]);\n useClickOutsideRef(() => setDropdownOpen(false), [], containerRef);\n\n React.useEffect(() => {\n !dropdownOpen && setKeyboardNavigated(false)\n }, [dropdownOpen]);\n\n React.useEffect(() => {\n disabled && setDropdownOpen(false)\n }, [disabled]);\n\n React.useEffect(() => {\n setSelectedValues(value || []);\n }, [value]);\n\n const handleValueSelect = (values: string[]) => {\n // Do all required actions\n onClick(values);\n };\n\n /**\n * Renders Icon Button dropdown menu.\n * @returns HTML View for the Icon button dropdown menu.\n */\n const renderButton = () => {\n switch (rest.type) {\n case 'icon':\n return (\n <IconButton ref={ref}\n variant=\"secondary\"\n shape=\"circular\"\n role=\"button\"\n tooltip={rest.tooltip}\n id={id}\n data-testId={dataTestId}\n aria-controls={`${id}_dropdowncontent`}\n aria-activedescendant={activeDescendant}\n \n action={(event: any) => {\n setDropdownOpen(!dropdownOpen);\n if (event?.detail !== 1) {\n setKeyboardNavigated(true);\n }\n }}\n disabled={disabled}>\n {icon}\n </IconButton>\n );\n case 'text':\n const label = rest.keepLabel || !selectedValues?.length\n ? rest.label\n : items.filter(a => selectedValues.includes(a.value)).map(a => a.displayLabel ?? a.value).join(', ');\n const cls = `${disabled && 'disabled'} ${dropdownOpen && 'expanded'} ${className}`;\n return <TextButtonDropdownWrapper tabIndex={!disabled ? 0 : -1}\n className={cls}\n role=\"button\"\n id={id}\n data-testId={dataTestId}\n aria-controls={`${id}_dropdowncontent`}\n aria-activedescendant={activeDescendant}\n onMouseDown={defaultOnMouseDownHandler}\n onKeyDown={e => {\n if (e.key === 'Enter' || e.key === ' ') {\n e.preventDefault();\n e.stopPropagation();\n setDropdownOpen(!dropdownOpen);\n setKeyboardNavigated(true);\n }\n }}\n onClick={() => !disabled && setDropdownOpen(!dropdownOpen)}>\n <TextButtonDropdownContent>\n {icon && <TextButtonDropdownIcon>{icon}</TextButtonDropdownIcon>}\n <TextButtonDropdownText>{label}</TextButtonDropdownText>\n <TextButtonDropdownArrow>\n {\n dropdownOpen\n ? <ArrowDropUp size=\"24px\"/>\n : <ArrowDropDown size=\"24px\"/>\n }\n </TextButtonDropdownArrow>\n </TextButtonDropdownContent>\n </TextButtonDropdownWrapper>\n }\n };\n\n return (\n <Wrapper className={className} ref={containerRef}> \n {renderButton()}\n <DropdownContent\n ref={dropdownRef}\n ariaRolesType=\"menu\"\n containerRef={containerRef}\n customizationProps={{\n itemsType: itemsType,\n action: action ?? (() => {\n }),\n actionLabel: actionLabel,\n actionVariant: actionVariant,\n onValueUpdate: handleValueSelect,\n multiSelect: multiSelect,\n actionIcon: actionIcon,\n actionLoading: actionLoading,\n scrollable: scrollable,\n pinTopItem: pinTopItem,\n maxHeight: maxHeight,\n items: items\n }}\n onActiveDescendantChanged={(e) => setActiveDescendant(e)}\n focused={focused}\n setFocused={setFocused}\n size={size}\n width={width}\n alignLeft={alignLeft}\n isOpen={dropdownOpen}\n setIsOpen={setDropdownOpen}\n outline={keyboardNavigated}\n filter=\"\"\n selectedValues={rest.type === 'icon' && itemsType === 'normal' ? [] : selectedValues}\n setSelectedValues={setSelectedValues}\n messageOnNoResults=\"No results\"\n isButton={true}\n id={`${id}_dropdowncontent`}\n />\n </Wrapper>\n );\n});\n\nexport default DropdownButton;\n"],"mappings":"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"}
|