@laerdal/life-react-components 6.0.0-dev.26.full → 6.0.0-dev.27.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.
- package/README.md +1 -1
- package/dist/Button/DualFunctionButton.cjs +4 -4
- package/dist/Button/DualFunctionButton.cjs.map +1 -1
- package/dist/Button/DualFunctionButton.d.ts +2 -2
- package/dist/Button/DualFunctionButton.js +4 -4
- package/dist/Button/DualFunctionButton.js.map +1 -1
- package/dist/Button/{Button.cjs → TextButton.cjs} +179 -92
- package/dist/Button/TextButton.cjs.map +1 -0
- package/dist/Button/TextButton.d.ts +70 -0
- package/dist/Button/{Button.js → TextButton.js} +178 -91
- package/dist/Button/TextButton.js.map +1 -0
- package/dist/Button/__tests__/Button.test.tsx +8 -8
- package/dist/Button/__tests__/TextButton.test.tsx +45 -0
- package/dist/Button/index.cjs +11 -11
- package/dist/Button/index.cjs.map +1 -1
- package/dist/Button/index.d.ts +2 -2
- package/dist/Button/index.js +2 -2
- package/dist/Button/index.js.map +1 -1
- package/dist/Card/VerticalCard/{Card.cjs → VerticalCard.cjs} +20 -20
- package/dist/Card/VerticalCard/VerticalCard.cjs.map +1 -0
- package/dist/Card/VerticalCard/VerticalCard.d.ts +25 -0
- package/dist/Card/VerticalCard/{Card.js → VerticalCard.js} +19 -19
- package/dist/Card/VerticalCard/VerticalCard.js.map +1 -0
- package/dist/Card/VerticalCard/{CardBottomSection.cjs → VerticalCardBottomSection.cjs} +21 -21
- package/dist/Card/VerticalCard/VerticalCardBottomSection.cjs.map +1 -0
- package/dist/Card/VerticalCard/VerticalCardBottomSection.d.ts +53 -0
- package/dist/Card/VerticalCard/{CardBottomSection.js → VerticalCardBottomSection.js} +21 -21
- package/dist/Card/VerticalCard/VerticalCardBottomSection.js.map +1 -0
- package/dist/Card/VerticalCard/{CardMiddleSection.cjs → VerticalCardMiddleSection.cjs} +16 -16
- package/dist/Card/VerticalCard/VerticalCardMiddleSection.cjs.map +1 -0
- package/dist/Card/VerticalCard/VerticalCardMiddleSection.d.ts +42 -0
- package/dist/Card/VerticalCard/{CardMiddleSection.js → VerticalCardMiddleSection.js} +15 -15
- package/dist/Card/VerticalCard/VerticalCardMiddleSection.js.map +1 -0
- package/dist/Card/VerticalCard/{CardTopSection.cjs → VerticalCardTopSection.cjs} +15 -15
- package/dist/Card/VerticalCard/VerticalCardTopSection.cjs.map +1 -0
- package/dist/Card/VerticalCard/{CardTopSection.d.ts → VerticalCardTopSection.d.ts} +8 -8
- package/dist/Card/VerticalCard/{CardTopSection.js → VerticalCardTopSection.js} +14 -14
- package/dist/Card/VerticalCard/VerticalCardTopSection.js.map +1 -0
- package/dist/Card/{HorizontalCard → VerticalCard}/__tests__/VerticalCard.test.tsx +15 -15
- package/dist/Card/VerticalCard/index.cjs +25 -25
- package/dist/Card/VerticalCard/index.cjs.map +1 -1
- package/dist/Card/VerticalCard/index.d.ts +7 -7
- package/dist/Card/VerticalCard/index.js +7 -7
- package/dist/Card/VerticalCard/index.js.map +1 -1
- package/dist/Dropdown/DropdownContent.cjs +2 -2
- package/dist/Dropdown/DropdownContent.cjs.map +1 -1
- package/dist/Dropdown/DropdownContent.js +2 -2
- package/dist/Dropdown/DropdownContent.js.map +1 -1
- package/dist/GlobalNavigationBar/desktop/RightSideNav.cjs +2 -2
- package/dist/GlobalNavigationBar/desktop/RightSideNav.cjs.map +1 -1
- package/dist/GlobalNavigationBar/desktop/RightSideNav.js +3 -3
- package/dist/GlobalNavigationBar/desktop/RightSideNav.js.map +1 -1
- package/dist/GlobalNavigationBar/desktop/UserMenu.cjs +1 -1
- package/dist/GlobalNavigationBar/desktop/UserMenu.cjs.map +1 -1
- package/dist/GlobalNavigationBar/desktop/UserMenu.js +2 -2
- package/dist/GlobalNavigationBar/desktop/UserMenu.js.map +1 -1
- package/dist/GlobalNavigationBar/mobile/MobileActionContainer.cjs +1 -1
- package/dist/GlobalNavigationBar/mobile/MobileActionContainer.cjs.map +1 -1
- package/dist/GlobalNavigationBar/mobile/MobileActionContainer.js +2 -2
- package/dist/GlobalNavigationBar/mobile/MobileActionContainer.js.map +1 -1
- package/dist/GlobalNavigationBar/types.cjs.map +1 -1
- package/dist/GlobalNavigationBar/types.d.ts +2 -2
- package/dist/GlobalNavigationBar/types.js.map +1 -1
- package/dist/Modals/ModalContent.cjs +2 -2
- package/dist/Modals/ModalContent.cjs.map +1 -1
- package/dist/Modals/ModalContent.js +3 -3
- package/dist/Modals/ModalContent.js.map +1 -1
- package/dist/Modals/ModalDialog.cjs +2 -2
- package/dist/Modals/ModalDialog.cjs.map +1 -1
- package/dist/Modals/ModalDialog.js +3 -3
- package/dist/Modals/ModalDialog.js.map +1 -1
- package/dist/Modals/ModalTypes.cjs.map +1 -1
- package/dist/Modals/ModalTypes.d.ts +3 -3
- package/dist/Modals/ModalTypes.js.map +1 -1
- package/dist/Popover/Popover.cjs +1 -1
- package/dist/Popover/Popover.cjs.map +1 -1
- package/dist/Popover/Popover.js +2 -2
- package/dist/Popover/Popover.js.map +1 -1
- package/dist/SideMenu/SideMenuFooter.cjs +1 -1
- package/dist/SideMenu/SideMenuFooter.cjs.map +1 -1
- package/dist/SideMenu/SideMenuFooter.js +2 -2
- package/dist/SideMenu/SideMenuFooter.js.map +1 -1
- package/dist/SideMenu/types.cjs.map +1 -1
- package/dist/SideMenu/types.d.ts +2 -2
- package/dist/SideMenu/types.js.map +1 -1
- package/dist/Table/TableBody.cjs +1 -1
- package/dist/Table/TableBody.cjs.map +1 -1
- package/dist/Table/TableBody.js +2 -2
- package/dist/Table/TableBody.js.map +1 -1
- package/dist/Table/TableTypes.cjs.map +1 -1
- package/dist/Table/TableTypes.d.ts +2 -2
- package/dist/Table/TableTypes.js.map +1 -1
- package/dist/Tile/TileCommonItems.cjs +1 -1
- package/dist/Tile/TileCommonItems.cjs.map +1 -1
- package/dist/Tile/TileCommonItems.js +2 -2
- package/dist/Tile/TileCommonItems.js.map +1 -1
- package/dist/Tile/TileTypes.cjs.map +1 -1
- package/dist/Tile/TileTypes.d.ts +2 -2
- package/dist/Tile/TileTypes.js.map +1 -1
- package/dist/Toasters/Toast.cjs +1 -2
- package/dist/Toasters/Toast.cjs.map +1 -1
- package/dist/Toasters/Toast.js +2 -3
- package/dist/Toasters/Toast.js.map +1 -1
- package/package.json +1 -1
- package/dist/Button/Button.cjs.map +0 -1
- package/dist/Button/Button.d.ts +0 -70
- package/dist/Button/Button.js.map +0 -1
- package/dist/Card/VerticalCard/Card.cjs.map +0 -1
- package/dist/Card/VerticalCard/Card.d.ts +0 -25
- package/dist/Card/VerticalCard/Card.js.map +0 -1
- package/dist/Card/VerticalCard/CardBottomSection.cjs.map +0 -1
- package/dist/Card/VerticalCard/CardBottomSection.d.ts +0 -53
- package/dist/Card/VerticalCard/CardBottomSection.js.map +0 -1
- package/dist/Card/VerticalCard/CardMiddleSection.cjs.map +0 -1
- package/dist/Card/VerticalCard/CardMiddleSection.d.ts +0 -42
- package/dist/Card/VerticalCard/CardMiddleSection.js.map +0 -1
- package/dist/Card/VerticalCard/CardTopSection.cjs.map +0 -1
- package/dist/Card/VerticalCard/CardTopSection.js.map +0 -1
- package/dist/Card/__tests__/Card.test.tsx +0 -146
package/README.md
CHANGED
|
@@ -8,7 +8,7 @@
|
|
|
8
8
|
- `cd /path/to/your-app`
|
|
9
9
|
- `yarn add @laerdal/life-react-components` or `npm add @laerdal/life-react-components`
|
|
10
10
|
- Import components in your code:
|
|
11
|
-
- `import {
|
|
11
|
+
- `import { TextButton } from '@laerdal/life-react-components'`
|
|
12
12
|
- or icons:
|
|
13
13
|
- `import { ChevronLeft, ChevronRight } from '@laerdal/life-react-components'`
|
|
14
14
|
|
|
@@ -9,7 +9,7 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
|
|
|
9
9
|
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
|
|
10
10
|
var _propTypes = _interopRequireDefault(require("prop-types"));
|
|
11
11
|
var React = _interopRequireWildcard(require("react"));
|
|
12
|
-
var
|
|
12
|
+
var _TextButton = _interopRequireWildcard(require("./TextButton"));
|
|
13
13
|
var _icons = require("../icons");
|
|
14
14
|
var _CommonStyling = require("../Dropdown/CommonStyling");
|
|
15
15
|
var _nanoid = require("nanoid");
|
|
@@ -32,7 +32,7 @@ const DualButtonsContainer = _styledComponents.default.div`
|
|
|
32
32
|
margin-right: 2px;
|
|
33
33
|
}
|
|
34
34
|
|
|
35
|
-
${
|
|
35
|
+
${_TextButton.TextButtonContentContainer} {
|
|
36
36
|
min-width: unset;
|
|
37
37
|
gap: 0px;
|
|
38
38
|
padding: ${props => props.$size == _types.Size.Large ? '4px 18px' : props.$size == _types.Size.Medium ? '4px 14px' : '4px 10px'};
|
|
@@ -84,7 +84,7 @@ const DualFunctionButton = _ref => {
|
|
|
84
84
|
$readOnly: false,
|
|
85
85
|
$disabled: false,
|
|
86
86
|
margin: "",
|
|
87
|
-
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(
|
|
87
|
+
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_TextButton.default, _objectSpread(_objectSpread({}, renderProps), {}, {
|
|
88
88
|
testId: testId,
|
|
89
89
|
onClick: onClick,
|
|
90
90
|
disabled: disabled,
|
|
@@ -117,7 +117,7 @@ const DualFunctionButton = _ref => {
|
|
|
117
117
|
alignLeft: true,
|
|
118
118
|
ariaRolesType: "menu"
|
|
119
119
|
})]
|
|
120
|
-
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(
|
|
120
|
+
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_TextButton.default, _objectSpread(_objectSpread({
|
|
121
121
|
variant: variant
|
|
122
122
|
}, renderProps), {}, {
|
|
123
123
|
onKeyPress: e => {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DualFunctionButton.cjs","names":["React","_interopRequireWildcard","require","_Button","_icons","_CommonStyling","_nanoid","_types","_DropdownContent","_interopRequireDefault","_styledComponents","_common","_jsxRuntime","_excluded","_excluded2","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","ownKeys","keys","getOwnPropertySymbols","o","filter","enumerable","push","apply","_objectSpread","arguments","length","forEach","_defineProperty2","getOwnPropertyDescriptors","defineProperties","DualButtonsContainer","styled","div","ButtonContentContainer","props","$size","Size","Large","Medium","DualFunctionButton","_ref","children","variant","type","size","width","testId","disabled","id","dropdownMenuValues","setDropdownMenuValues","dropdownCustomizationProps","_objectWithoutProperties2","loading","icon","onClick","renderProps","isOpen","setIsOpen","useState","activeDescendant","setActiveDescendant","focused","setFocused","keyboardNavigated","setKeyboardNavigated","dropdownContainerRef","useRef","selectedValues","setSelectedValues","dropdownContentRef","dropdownButtonRef","useClickOutsideRef","useFocusOutsideRef","dropdownContentId","nanoid","useEffect","jsxs","DropdownContainer","ref","$isButton","$readOnly","$disabled","margin","jsx","flatEdge","containerRef","customizationProps","itemsType","isButton","Small","onActiveDescendantChanged","outline","messageOnNoResults","alignLeft","ariaRolesType","onKeyPress","key","className","role","stopPropagation","SystemIcons","ArrowDropUp","ArrowDropDown","propTypes","_propTypes","arrayOf","string","func","_default","exports"],"sources":["../../src/Button/DualFunctionButton.tsx"],"sourcesContent":["import * as React from 'react';\r\nimport Button, { ButtonContentContainer, ButtonProps } from './Button';\r\nimport { SystemIcons } from '../icons';\r\nimport { DropdownContainer } from '../Dropdown/CommonStyling';\r\nimport { nanoid } from 'nanoid';\r\nimport { Size } from '../types';\r\nimport DropdownContent, { DropdownCustomizationProps } from '../Dropdown/DropdownContent';\r\nimport styled from 'styled-components';\r\nimport { useClickOutsideRef, useFocusOutsideRef } from '../common';\r\n\r\nconst DualButtonsContainer = styled.div<{ $size?: Size }>`\r\n display: flex;\r\n align-items: center;\r\n\r\n button:first-child {\r\n margin-right: 2px;\r\n }\r\n\r\n ${ButtonContentContainer} {\r\n min-width: unset;\r\n gap: 0px;\r\n padding: ${(props) => (props.$size == Size.Large ? '4px 18px' : props.$size == Size.Medium ? '4px 14px' : '4px 10px')};\r\n }\r\n\r\n .extraMargin {\r\n margin-bottom: 4px;\r\n }\r\n`;\r\n\r\nexport interface ButtonOption {\r\n label: string;\r\n}\r\n\r\nexport interface DualButtonProps extends ButtonProps {\r\n /**\r\n * Required. An object containing customization properties for the dropdown.\r\n */\r\n dropdownCustomizationProps: DropdownCustomizationProps;\r\n /**\r\n * Optional. An array of strings representing the values in the dropdown menu.\r\n */\r\n dropdownMenuValues?: string[];\r\n /**\r\n * Optional. A function to be called when the values in the dropdown menu change.\r\n * It should return void, a boolean, or undefined.\r\n */\r\n setDropdownMenuValues?: (values: string[]) => void | boolean | undefined;\r\n}\r\n\r\nconst DualFunctionButton: React.FunctionComponent<DualButtonProps> = ({\r\n children = 'Primary Button',\r\n variant = 'primary',\r\n type = 'button',\r\n size = Size.Medium,\r\n width: width = 'auto',\r\n testId,\r\n disabled,\r\n id,\r\n dropdownMenuValues,\r\n setDropdownMenuValues,\r\n dropdownCustomizationProps,\r\n ...props\r\n}) => {\r\n // Let's filter out properties that we don't need to render.\r\n const { loading, icon, onClick, ...renderProps } = props;\r\n const [isOpen, setIsOpen] = React.useState<boolean>(false);\r\n const [activeDescendant, setActiveDescendant] = React.useState<string>();\r\n const [focused, setFocused] = React.useState<number | null>(null);\r\n const [keyboardNavigated, setKeyboardNavigated] = React.useState<boolean>(false);\r\n const dropdownContainerRef = React.useRef<HTMLDivElement>(null);\r\n const [selectedValues, setSelectedValues] = React.useState<string[]>([]);\r\n\r\n const dropdownContentRef = React.useRef<HTMLDivElement>(null);\r\n const dropdownButtonRef = useClickOutsideRef(\r\n () => setIsOpen(false),\r\n [dropdownContainerRef],\r\n useFocusOutsideRef(() => setIsOpen(false), [dropdownContentRef]),\r\n );\r\n \r\n const dropdownContentId = id ? id + '_dropdownContent' : nanoid();\r\n\r\n React.useEffect(() => {\r\n !isOpen && setKeyboardNavigated(false);\r\n }, [isOpen]);\r\n\r\n return (\r\n <DualButtonsContainer $size={size}>\r\n <DropdownContainer ref={dropdownContainerRef} $isButton={true} $readOnly={false} $disabled={false} margin=\"\">\r\n <Button {...renderProps} testId={testId} onClick={onClick} disabled={disabled} type={type} loading={loading} icon={icon} size={size} width={width} variant={variant} flatEdge=\"right\">\r\n {children}\r\n </Button>\r\n <DropdownContent\r\n containerRef={dropdownContainerRef}\r\n customizationProps={dropdownCustomizationProps}\r\n filter=\"\"\r\n ref={dropdownContentRef}\r\n selectedValues={dropdownCustomizationProps.itemsType == 'normal' ? [] : dropdownMenuValues ?? selectedValues}\r\n setSelectedValues={setDropdownMenuValues ? setDropdownMenuValues : setSelectedValues}\r\n isButton={true}\r\n setIsOpen={setIsOpen}\r\n focused={focused}\r\n width={size == Size.Small ? '280px' : '360px'}\r\n onActiveDescendantChanged={(e) => setActiveDescendant(e)}\r\n setFocused={setFocused}\r\n size={size}\r\n outline={keyboardNavigated}\r\n isOpen={isOpen}\r\n id={dropdownContentId}\r\n messageOnNoResults=\"\"\r\n alignLeft={true}\r\n ariaRolesType=\"menu\"\r\n />\r\n </DropdownContainer>\r\n <Button\r\n variant={variant}\r\n {...renderProps}\r\n onKeyPress={(e: any) => {\r\n if (isOpen) return;\r\n\r\n if (e.key === 'Enter' || e.key === ' ') {\r\n setFocused(0);\r\n setKeyboardNavigated(true);\r\n }\r\n }}\r\n className=\"extraMargin\"\r\n testId={'options_toggleBtn'}\r\n ref={dropdownButtonRef}\r\n aria-activedescendant={activeDescendant}\r\n role=\"button\"\r\n aria-controls={dropdownContentId}\r\n disabled={disabled}\r\n type={type}\r\n size={size}\r\n onClick={(e) => {\r\n e.stopPropagation();\r\n setIsOpen(!isOpen);\r\n }}\r\n icon={ isOpen ? <SystemIcons.ArrowDropUp aria-hidden=\"true\" size=\"16px\" /> \r\n : <SystemIcons.ArrowDropDown aria-hidden=\"true\" size=\"16px\" /> }\r\n flatEdge=\"left\"\r\n />\r\n </DualButtonsContainer>\r\n );\r\n};\r\n\r\nexport default DualFunctionButton;\r\n"],"mappings":"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","ignoreList":[]}
|
|
1
|
+
{"version":3,"file":"DualFunctionButton.cjs","names":["React","_interopRequireWildcard","require","_TextButton","_icons","_CommonStyling","_nanoid","_types","_DropdownContent","_interopRequireDefault","_styledComponents","_common","_jsxRuntime","_excluded","_excluded2","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","ownKeys","keys","getOwnPropertySymbols","o","filter","enumerable","push","apply","_objectSpread","arguments","length","forEach","_defineProperty2","getOwnPropertyDescriptors","defineProperties","DualButtonsContainer","styled","div","TextButtonContentContainer","props","$size","Size","Large","Medium","DualFunctionButton","_ref","children","variant","type","size","width","testId","disabled","id","dropdownMenuValues","setDropdownMenuValues","dropdownCustomizationProps","_objectWithoutProperties2","loading","icon","onClick","renderProps","isOpen","setIsOpen","useState","activeDescendant","setActiveDescendant","focused","setFocused","keyboardNavigated","setKeyboardNavigated","dropdownContainerRef","useRef","selectedValues","setSelectedValues","dropdownContentRef","dropdownButtonRef","useClickOutsideRef","useFocusOutsideRef","dropdownContentId","nanoid","useEffect","jsxs","DropdownContainer","ref","$isButton","$readOnly","$disabled","margin","jsx","flatEdge","containerRef","customizationProps","itemsType","isButton","Small","onActiveDescendantChanged","outline","messageOnNoResults","alignLeft","ariaRolesType","onKeyPress","key","className","role","stopPropagation","SystemIcons","ArrowDropUp","ArrowDropDown","propTypes","_propTypes","arrayOf","string","func","_default","exports"],"sources":["../../src/Button/DualFunctionButton.tsx"],"sourcesContent":["import * as React from 'react';\r\nimport TextButton, { TextButtonContentContainer, TextButtonProps } from './TextButton';\r\nimport { SystemIcons } from '../icons';\r\nimport { DropdownContainer } from '../Dropdown/CommonStyling';\r\nimport { nanoid } from 'nanoid';\r\nimport { Size } from '../types';\r\nimport DropdownContent, { DropdownCustomizationProps } from '../Dropdown/DropdownContent';\r\nimport styled from 'styled-components';\r\nimport { useClickOutsideRef, useFocusOutsideRef } from '../common';\r\n\r\nconst DualButtonsContainer = styled.div<{ $size?: Size }>`\r\n display: flex;\r\n align-items: center;\r\n\r\n button:first-child {\r\n margin-right: 2px;\r\n }\r\n\r\n ${TextButtonContentContainer} {\r\n min-width: unset;\r\n gap: 0px;\r\n padding: ${(props) => (props.$size == Size.Large ? '4px 18px' : props.$size == Size.Medium ? '4px 14px' : '4px 10px')};\r\n }\r\n\r\n .extraMargin {\r\n margin-bottom: 4px;\r\n }\r\n`;\r\n\r\nexport interface ButtonOption {\r\n label: string;\r\n}\r\n\r\nexport interface DualButtonProps extends TextButtonProps {\r\n /**\r\n * Required. An object containing customization properties for the dropdown.\r\n */\r\n dropdownCustomizationProps: DropdownCustomizationProps;\r\n /**\r\n * Optional. An array of strings representing the values in the dropdown menu.\r\n */\r\n dropdownMenuValues?: string[];\r\n /**\r\n * Optional. A function to be called when the values in the dropdown menu change.\r\n * It should return void, a boolean, or undefined.\r\n */\r\n setDropdownMenuValues?: (values: string[]) => void | boolean | undefined;\r\n}\r\n\r\nconst DualFunctionButton: React.FunctionComponent<DualButtonProps> = ({\r\n children = 'Primary Button',\r\n variant = 'primary',\r\n type = 'button',\r\n size = Size.Medium,\r\n width: width = 'auto',\r\n testId,\r\n disabled,\r\n id,\r\n dropdownMenuValues,\r\n setDropdownMenuValues,\r\n dropdownCustomizationProps,\r\n ...props\r\n}) => {\r\n // Let's filter out properties that we don't need to render.\r\n const { loading, icon, onClick, ...renderProps } = props;\r\n const [isOpen, setIsOpen] = React.useState<boolean>(false);\r\n const [activeDescendant, setActiveDescendant] = React.useState<string>();\r\n const [focused, setFocused] = React.useState<number | null>(null);\r\n const [keyboardNavigated, setKeyboardNavigated] = React.useState<boolean>(false);\r\n const dropdownContainerRef = React.useRef<HTMLDivElement>(null);\r\n const [selectedValues, setSelectedValues] = React.useState<string[]>([]);\r\n\r\n const dropdownContentRef = React.useRef<HTMLDivElement>(null);\r\n const dropdownButtonRef = useClickOutsideRef(\r\n () => setIsOpen(false),\r\n [dropdownContainerRef],\r\n useFocusOutsideRef(() => setIsOpen(false), [dropdownContentRef]),\r\n );\r\n \r\n const dropdownContentId = id ? id + '_dropdownContent' : nanoid();\r\n\r\n React.useEffect(() => {\r\n !isOpen && setKeyboardNavigated(false);\r\n }, [isOpen]);\r\n\r\n return (\r\n <DualButtonsContainer $size={size}>\r\n <DropdownContainer ref={dropdownContainerRef} $isButton={true} $readOnly={false} $disabled={false} margin=\"\">\r\n <TextButton {...renderProps} testId={testId} onClick={onClick} disabled={disabled} type={type} loading={loading} icon={icon} size={size} width={width} variant={variant} flatEdge=\"right\">\r\n {children}\r\n </TextButton>\r\n <DropdownContent\r\n containerRef={dropdownContainerRef}\r\n customizationProps={dropdownCustomizationProps}\r\n filter=\"\"\r\n ref={dropdownContentRef}\r\n selectedValues={dropdownCustomizationProps.itemsType == 'normal' ? [] : dropdownMenuValues ?? selectedValues}\r\n setSelectedValues={setDropdownMenuValues ? setDropdownMenuValues : setSelectedValues}\r\n isButton={true}\r\n setIsOpen={setIsOpen}\r\n focused={focused}\r\n width={size == Size.Small ? '280px' : '360px'}\r\n onActiveDescendantChanged={(e) => setActiveDescendant(e)}\r\n setFocused={setFocused}\r\n size={size}\r\n outline={keyboardNavigated}\r\n isOpen={isOpen}\r\n id={dropdownContentId}\r\n messageOnNoResults=\"\"\r\n alignLeft={true}\r\n ariaRolesType=\"menu\"\r\n />\r\n </DropdownContainer>\r\n <TextButton\r\n variant={variant}\r\n {...renderProps}\r\n onKeyPress={(e: any) => {\r\n if (isOpen) return;\r\n\r\n if (e.key === 'Enter' || e.key === ' ') {\r\n setFocused(0);\r\n setKeyboardNavigated(true);\r\n }\r\n }}\r\n className=\"extraMargin\"\r\n testId={'options_toggleBtn'}\r\n ref={dropdownButtonRef}\r\n aria-activedescendant={activeDescendant}\r\n role=\"button\"\r\n aria-controls={dropdownContentId}\r\n disabled={disabled}\r\n type={type}\r\n size={size}\r\n onClick={(e) => {\r\n e.stopPropagation();\r\n setIsOpen(!isOpen);\r\n }}\r\n icon={ isOpen ? <SystemIcons.ArrowDropUp aria-hidden=\"true\" size=\"16px\" /> \r\n : <SystemIcons.ArrowDropDown aria-hidden=\"true\" size=\"16px\" /> }\r\n flatEdge=\"left\"\r\n />\r\n </DualButtonsContainer>\r\n );\r\n};\r\n\r\nexport default DualFunctionButton;\r\n"],"mappings":"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","ignoreList":[]}
|
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
|
-
import {
|
|
2
|
+
import { TextButtonProps } from './TextButton';
|
|
3
3
|
import { DropdownCustomizationProps } from '../Dropdown/DropdownContent';
|
|
4
4
|
export interface ButtonOption {
|
|
5
5
|
label: string;
|
|
6
6
|
}
|
|
7
|
-
export interface DualButtonProps extends
|
|
7
|
+
export interface DualButtonProps extends TextButtonProps {
|
|
8
8
|
/**
|
|
9
9
|
* Required. An object containing customization properties for the dropdown.
|
|
10
10
|
*/
|
|
@@ -6,7 +6,7 @@ const _excluded = ["children", "variant", "type", "size", "width", "testId", "di
|
|
|
6
6
|
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
|
|
7
7
|
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
|
|
8
8
|
import * as React from 'react';
|
|
9
|
-
import
|
|
9
|
+
import TextButton, { TextButtonContentContainer } from './TextButton';
|
|
10
10
|
import { SystemIcons } from '../icons';
|
|
11
11
|
import { DropdownContainer } from '../Dropdown/CommonStyling';
|
|
12
12
|
import { nanoid } from 'nanoid';
|
|
@@ -23,7 +23,7 @@ const DualButtonsContainer = styled.div`
|
|
|
23
23
|
margin-right: 2px;
|
|
24
24
|
}
|
|
25
25
|
|
|
26
|
-
${
|
|
26
|
+
${TextButtonContentContainer} {
|
|
27
27
|
min-width: unset;
|
|
28
28
|
gap: 0px;
|
|
29
29
|
padding: ${props => props.$size == Size.Large ? '4px 18px' : props.$size == Size.Medium ? '4px 14px' : '4px 10px'};
|
|
@@ -75,7 +75,7 @@ const DualFunctionButton = _ref => {
|
|
|
75
75
|
$readOnly: false,
|
|
76
76
|
$disabled: false,
|
|
77
77
|
margin: "",
|
|
78
|
-
children: [/*#__PURE__*/_jsx(
|
|
78
|
+
children: [/*#__PURE__*/_jsx(TextButton, _objectSpread(_objectSpread({}, renderProps), {}, {
|
|
79
79
|
testId: testId,
|
|
80
80
|
onClick: onClick,
|
|
81
81
|
disabled: disabled,
|
|
@@ -108,7 +108,7 @@ const DualFunctionButton = _ref => {
|
|
|
108
108
|
alignLeft: true,
|
|
109
109
|
ariaRolesType: "menu"
|
|
110
110
|
})]
|
|
111
|
-
}), /*#__PURE__*/_jsx(
|
|
111
|
+
}), /*#__PURE__*/_jsx(TextButton, _objectSpread(_objectSpread({
|
|
112
112
|
variant: variant
|
|
113
113
|
}, renderProps), {}, {
|
|
114
114
|
onKeyPress: e => {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DualFunctionButton.js","names":["React","Button","ButtonContentContainer","SystemIcons","DropdownContainer","nanoid","Size","DropdownContent","styled","useClickOutsideRef","useFocusOutsideRef","jsx","_jsx","jsxs","_jsxs","DualButtonsContainer","div","props","$size","Large","Medium","DualFunctionButton","_ref","children","variant","type","size","width","testId","disabled","id","dropdownMenuValues","setDropdownMenuValues","dropdownCustomizationProps","_objectWithoutProperties","_excluded","loading","icon","onClick","renderProps","_excluded2","isOpen","setIsOpen","useState","activeDescendant","setActiveDescendant","focused","setFocused","keyboardNavigated","setKeyboardNavigated","dropdownContainerRef","useRef","selectedValues","setSelectedValues","dropdownContentRef","dropdownButtonRef","dropdownContentId","useEffect","ref","$isButton","$readOnly","$disabled","margin","_objectSpread","flatEdge","containerRef","customizationProps","filter","itemsType","isButton","Small","onActiveDescendantChanged","e","outline","messageOnNoResults","alignLeft","ariaRolesType","onKeyPress","key","className","role","stopPropagation","ArrowDropUp","ArrowDropDown","propTypes","_pt","arrayOf","string","func"],"sources":["../../src/Button/DualFunctionButton.tsx"],"sourcesContent":["import * as React from 'react';\r\nimport Button, { ButtonContentContainer, ButtonProps } from './Button';\r\nimport { SystemIcons } from '../icons';\r\nimport { DropdownContainer } from '../Dropdown/CommonStyling';\r\nimport { nanoid } from 'nanoid';\r\nimport { Size } from '../types';\r\nimport DropdownContent, { DropdownCustomizationProps } from '../Dropdown/DropdownContent';\r\nimport styled from 'styled-components';\r\nimport { useClickOutsideRef, useFocusOutsideRef } from '../common';\r\n\r\nconst DualButtonsContainer = styled.div<{ $size?: Size }>`\r\n display: flex;\r\n align-items: center;\r\n\r\n button:first-child {\r\n margin-right: 2px;\r\n }\r\n\r\n ${ButtonContentContainer} {\r\n min-width: unset;\r\n gap: 0px;\r\n padding: ${(props) => (props.$size == Size.Large ? '4px 18px' : props.$size == Size.Medium ? '4px 14px' : '4px 10px')};\r\n }\r\n\r\n .extraMargin {\r\n margin-bottom: 4px;\r\n }\r\n`;\r\n\r\nexport interface ButtonOption {\r\n label: string;\r\n}\r\n\r\nexport interface DualButtonProps extends ButtonProps {\r\n /**\r\n * Required. An object containing customization properties for the dropdown.\r\n */\r\n dropdownCustomizationProps: DropdownCustomizationProps;\r\n /**\r\n * Optional. An array of strings representing the values in the dropdown menu.\r\n */\r\n dropdownMenuValues?: string[];\r\n /**\r\n * Optional. A function to be called when the values in the dropdown menu change.\r\n * It should return void, a boolean, or undefined.\r\n */\r\n setDropdownMenuValues?: (values: string[]) => void | boolean | undefined;\r\n}\r\n\r\nconst DualFunctionButton: React.FunctionComponent<DualButtonProps> = ({\r\n children = 'Primary Button',\r\n variant = 'primary',\r\n type = 'button',\r\n size = Size.Medium,\r\n width: width = 'auto',\r\n testId,\r\n disabled,\r\n id,\r\n dropdownMenuValues,\r\n setDropdownMenuValues,\r\n dropdownCustomizationProps,\r\n ...props\r\n}) => {\r\n // Let's filter out properties that we don't need to render.\r\n const { loading, icon, onClick, ...renderProps } = props;\r\n const [isOpen, setIsOpen] = React.useState<boolean>(false);\r\n const [activeDescendant, setActiveDescendant] = React.useState<string>();\r\n const [focused, setFocused] = React.useState<number | null>(null);\r\n const [keyboardNavigated, setKeyboardNavigated] = React.useState<boolean>(false);\r\n const dropdownContainerRef = React.useRef<HTMLDivElement>(null);\r\n const [selectedValues, setSelectedValues] = React.useState<string[]>([]);\r\n\r\n const dropdownContentRef = React.useRef<HTMLDivElement>(null);\r\n const dropdownButtonRef = useClickOutsideRef(\r\n () => setIsOpen(false),\r\n [dropdownContainerRef],\r\n useFocusOutsideRef(() => setIsOpen(false), [dropdownContentRef]),\r\n );\r\n \r\n const dropdownContentId = id ? id + '_dropdownContent' : nanoid();\r\n\r\n React.useEffect(() => {\r\n !isOpen && setKeyboardNavigated(false);\r\n }, [isOpen]);\r\n\r\n return (\r\n <DualButtonsContainer $size={size}>\r\n <DropdownContainer ref={dropdownContainerRef} $isButton={true} $readOnly={false} $disabled={false} margin=\"\">\r\n <Button {...renderProps} testId={testId} onClick={onClick} disabled={disabled} type={type} loading={loading} icon={icon} size={size} width={width} variant={variant} flatEdge=\"right\">\r\n {children}\r\n </Button>\r\n <DropdownContent\r\n containerRef={dropdownContainerRef}\r\n customizationProps={dropdownCustomizationProps}\r\n filter=\"\"\r\n ref={dropdownContentRef}\r\n selectedValues={dropdownCustomizationProps.itemsType == 'normal' ? [] : dropdownMenuValues ?? selectedValues}\r\n setSelectedValues={setDropdownMenuValues ? setDropdownMenuValues : setSelectedValues}\r\n isButton={true}\r\n setIsOpen={setIsOpen}\r\n focused={focused}\r\n width={size == Size.Small ? '280px' : '360px'}\r\n onActiveDescendantChanged={(e) => setActiveDescendant(e)}\r\n setFocused={setFocused}\r\n size={size}\r\n outline={keyboardNavigated}\r\n isOpen={isOpen}\r\n id={dropdownContentId}\r\n messageOnNoResults=\"\"\r\n alignLeft={true}\r\n ariaRolesType=\"menu\"\r\n />\r\n </DropdownContainer>\r\n <Button\r\n variant={variant}\r\n {...renderProps}\r\n onKeyPress={(e: any) => {\r\n if (isOpen) return;\r\n\r\n if (e.key === 'Enter' || e.key === ' ') {\r\n setFocused(0);\r\n setKeyboardNavigated(true);\r\n }\r\n }}\r\n className=\"extraMargin\"\r\n testId={'options_toggleBtn'}\r\n ref={dropdownButtonRef}\r\n aria-activedescendant={activeDescendant}\r\n role=\"button\"\r\n aria-controls={dropdownContentId}\r\n disabled={disabled}\r\n type={type}\r\n size={size}\r\n onClick={(e) => {\r\n e.stopPropagation();\r\n setIsOpen(!isOpen);\r\n }}\r\n icon={ isOpen ? <SystemIcons.ArrowDropUp aria-hidden=\"true\" size=\"16px\" /> \r\n : <SystemIcons.ArrowDropDown aria-hidden=\"true\" size=\"16px\" /> }\r\n flatEdge=\"left\"\r\n />\r\n </DualButtonsContainer>\r\n );\r\n};\r\n\r\nexport default DualFunctionButton;\r\n"],"mappings":";;;;;;;AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,OAAOC,MAAM,IAAIC,sBAAsB,QAAqB,UAAU;AACtE,SAASC,WAAW,QAAQ,UAAU;AACtC,SAASC,iBAAiB,QAAQ,2BAA2B;AAC7D,SAASC,MAAM,QAAQ,QAAQ;AAC/B,SAASC,IAAI,QAAQ,UAAU;AAC/B,OAAOC,eAAe,MAAsC,6BAA6B;AACzF,OAAOC,MAAM,MAAM,mBAAmB;AACtC,SAASC,kBAAkB,EAAEC,kBAAkB,QAAQ,WAAW;AAAC,SAAAC,GAAA,IAAAC,IAAA,EAAAC,IAAA,IAAAC,KAAA;AAEnE,MAAMC,oBAAoB,GAAGP,MAAM,CAACQ,GAAqB;AACzD;AACA;AACA;AACA;AACA;AACA;AACA;AACA,IAAId,sBAAsB;AAC1B;AACA;AACA,eAAgBe,KAAK,IAAMA,KAAK,CAACC,KAAK,IAAIZ,IAAI,CAACa,KAAK,GAAG,UAAU,GAAGF,KAAK,CAACC,KAAK,IAAIZ,IAAI,CAACc,MAAM,GAAG,UAAU,GAAG,UAAW;AACzH;AACA;AACA;AACA;AACA;AACA,CAAC;AAsBD,MAAMC,kBAA4D,GAAGC,IAAA,IAa/D;EAAA,IAbgE;MACpEC,QAAQ,GAAG,gBAAgB;MAC3BC,OAAO,GAAG,SAAS;MACnBC,IAAI,GAAG,QAAQ;MACfC,IAAI,GAAGpB,IAAI,CAACc,MAAM;MACXO,KAAK,GAAG,MAAM;MACrBC,MAAM;MACNC,QAAQ;MACRC,EAAE;MACFC,kBAAkB;MAClBC,qBAAqB;MACrBC;IAEF,CAAC,GAAAX,IAAA;IADIL,KAAK,GAAAiB,wBAAA,CAAAZ,IAAA,EAAAa,SAAA;EAER;EACA,MAAM;MAAEC,OAAO;MAAEC,IAAI;MAAEC;IAAwB,CAAC,GAAGrB,KAAK;IAArBsB,WAAW,GAAAL,wBAAA,CAAKjB,KAAK,EAAAuB,UAAA;EACxD,MAAM,CAACC,MAAM,EAAEC,SAAS,CAAC,GAAG1C,KAAK,CAAC2C,QAAQ,CAAU,KAAK,CAAC;EAC1D,MAAM,CAACC,gBAAgB,EAAEC,mBAAmB,CAAC,GAAG7C,KAAK,CAAC2C,QAAQ,CAAS,CAAC;EACxE,MAAM,CAACG,OAAO,EAAEC,UAAU,CAAC,GAAG/C,KAAK,CAAC2C,QAAQ,CAAgB,IAAI,CAAC;EACjE,MAAM,CAACK,iBAAiB,EAAEC,oBAAoB,CAAC,GAAGjD,KAAK,CAAC2C,QAAQ,CAAU,KAAK,CAAC;EAChF,MAAMO,oBAAoB,GAAGlD,KAAK,CAACmD,MAAM,CAAiB,IAAI,CAAC;EAC/D,MAAM,CAACC,cAAc,EAAEC,iBAAiB,CAAC,GAAGrD,KAAK,CAAC2C,QAAQ,CAAW,EAAE,CAAC;EAExE,MAAMW,kBAAkB,GAAGtD,KAAK,CAACmD,MAAM,CAAiB,IAAI,CAAC;EAC7D,MAAMI,iBAAiB,GAAG9C,kBAAkB,CAC1C,MAAMiC,SAAS,CAAC,KAAK,CAAC,EACtB,CAACQ,oBAAoB,CAAC,EACtBxC,kBAAkB,CAAC,MAAMgC,SAAS,CAAC,KAAK,CAAC,EAAE,CAACY,kBAAkB,CAAC,CACjE,CAAC;EAED,MAAME,iBAAiB,GAAG1B,EAAE,GAAGA,EAAE,GAAG,kBAAkB,GAAGzB,MAAM,CAAC,CAAC;EAEjEL,KAAK,CAACyD,SAAS,CAAC,MAAM;IACpB,CAAChB,MAAM,IAAIQ,oBAAoB,CAAC,KAAK,CAAC;EACxC,CAAC,EAAE,CAACR,MAAM,CAAC,CAAC;EAEZ,oBACE3B,KAAA,CAACC,oBAAoB;IAACG,KAAK,EAAEQ,IAAK;IAAAH,QAAA,gBAChCT,KAAA,CAACV,iBAAiB;MAACsD,GAAG,EAAER,oBAAqB;MAACS,SAAS,EAAE,IAAK;MAACC,SAAS,EAAE,KAAM;MAACC,SAAS,EAAE,KAAM;MAACC,MAAM,EAAC,EAAE;MAAAvC,QAAA,gBAC1GX,IAAA,CAACX,MAAM,EAAA8D,aAAA,CAAAA,aAAA,KAAKxB,WAAW;QAAEX,MAAM,EAAEA,MAAO;QAACU,OAAO,EAAEA,OAAQ;QAACT,QAAQ,EAAEA,QAAS;QAACJ,IAAI,EAAEA,IAAK;QAACW,OAAO,EAAEA,OAAQ;QAACC,IAAI,EAAEA,IAAK;QAACX,IAAI,EAAEA,IAAK;QAACC,KAAK,EAAEA,KAAM;QAACH,OAAO,EAAEA,OAAQ;QAACwC,QAAQ,EAAC,OAAO;QAAAzC,QAAA,EAClLA;MAAQ,EACH,CAAC,eACTX,IAAA,CAACL,eAAe;QACd0D,YAAY,EAAEf,oBAAqB;QACnCgB,kBAAkB,EAAEjC,0BAA2B;QAC/CkC,MAAM,EAAC,EAAE;QACTT,GAAG,EAAEJ,kBAAmB;QACxBF,cAAc,EAAEnB,0BAA0B,CAACmC,SAAS,IAAI,QAAQ,GAAG,EAAE,GAAGrC,kBAAkB,IAAIqB,cAAe;QAC7GC,iBAAiB,EAAErB,qBAAqB,GAAGA,qBAAqB,GAAGqB,iBAAkB;QACrFgB,QAAQ,EAAE,IAAK;QACf3B,SAAS,EAAEA,SAAU;QACrBI,OAAO,EAAEA,OAAQ;QACjBnB,KAAK,EAAED,IAAI,IAAIpB,IAAI,CAACgE,KAAK,GAAG,OAAO,GAAG,OAAQ;QAC9CC,yBAAyB,EAAGC,CAAC,IAAK3B,mBAAmB,CAAC2B,CAAC,CAAE;QACzDzB,UAAU,EAAEA,UAAW;QACvBrB,IAAI,EAAEA,IAAK;QACX+C,OAAO,EAAEzB,iBAAkB;QAC3BP,MAAM,EAAEA,MAAO;QACfX,EAAE,EAAE0B,iBAAkB;QACtBkB,kBAAkB,EAAC,EAAE;QACrBC,SAAS,EAAE,IAAK;QAChBC,aAAa,EAAC;MAAM,CACrB,CAAC;IAAA,CACe,CAAC,eACpBhE,IAAA,CAACX,MAAM,EAAA8D,aAAA,CAAAA,aAAA;MACLvC,OAAO,EAAEA;IAAQ,GACbe,WAAW;MACfsC,UAAU,EAAGL,CAAM,IAAK;QACtB,IAAI/B,MAAM,EAAE;QAEZ,IAAI+B,CAAC,CAACM,GAAG,KAAK,OAAO,IAAIN,CAAC,CAACM,GAAG,KAAK,GAAG,EAAE;UACtC/B,UAAU,CAAC,CAAC,CAAC;UACbE,oBAAoB,CAAC,IAAI,CAAC;QAC5B;MACF,CAAE;MACF8B,SAAS,EAAC,aAAa;MACvBnD,MAAM,EAAE,mBAAoB;MAC5B8B,GAAG,EAAEH,iBAAkB;MACvB,yBAAuBX,gBAAiB;MACxCoC,IAAI,EAAC,QAAQ;MACb,iBAAexB,iBAAkB;MACjC3B,QAAQ,EAAEA,QAAS;MACnBJ,IAAI,EAAEA,IAAK;MACXC,IAAI,EAAEA,IAAK;MACXY,OAAO,EAAGkC,CAAC,IAAK;QACdA,CAAC,CAACS,eAAe,CAAC,CAAC;QACnBvC,SAAS,CAAC,CAACD,MAAM,CAAC;MACpB,CAAE;MACFJ,IAAI,EAAGI,MAAM,gBAAG7B,IAAA,CAACT,WAAW,CAAC+E,WAAW;QAAC,eAAY,MAAM;QAACxD,IAAI,EAAC;MAAM,CAAE,CAAC,gBACxEd,IAAA,CAACT,WAAW,CAACgF,aAAa;QAAC,eAAY,MAAM;QAACzD,IAAI,EAAC;MAAM,CAAE,CAAG;MAChEsC,QAAQ,EAAC;IAAM,EAChB,CAAC;EAAA,CACkB,CAAC;AAE3B,CAAC;AAAC3C,kBAAA,CAAA+D,SAAA;EAtGArD,kBAAkB,EAAAsD,GAAA,CAAAC,OAAA,CAAAD,GAAA,CAAAE,MAAA;EAKlBvD,qBAAqB,EAAAqD,GAAA,CAAAG;AAAA;AAmGvB,eAAenE,kBAAkB","ignoreList":[]}
|
|
1
|
+
{"version":3,"file":"DualFunctionButton.js","names":["React","TextButton","TextButtonContentContainer","SystemIcons","DropdownContainer","nanoid","Size","DropdownContent","styled","useClickOutsideRef","useFocusOutsideRef","jsx","_jsx","jsxs","_jsxs","DualButtonsContainer","div","props","$size","Large","Medium","DualFunctionButton","_ref","children","variant","type","size","width","testId","disabled","id","dropdownMenuValues","setDropdownMenuValues","dropdownCustomizationProps","_objectWithoutProperties","_excluded","loading","icon","onClick","renderProps","_excluded2","isOpen","setIsOpen","useState","activeDescendant","setActiveDescendant","focused","setFocused","keyboardNavigated","setKeyboardNavigated","dropdownContainerRef","useRef","selectedValues","setSelectedValues","dropdownContentRef","dropdownButtonRef","dropdownContentId","useEffect","ref","$isButton","$readOnly","$disabled","margin","_objectSpread","flatEdge","containerRef","customizationProps","filter","itemsType","isButton","Small","onActiveDescendantChanged","e","outline","messageOnNoResults","alignLeft","ariaRolesType","onKeyPress","key","className","role","stopPropagation","ArrowDropUp","ArrowDropDown","propTypes","_pt","arrayOf","string","func"],"sources":["../../src/Button/DualFunctionButton.tsx"],"sourcesContent":["import * as React from 'react';\r\nimport TextButton, { TextButtonContentContainer, TextButtonProps } from './TextButton';\r\nimport { SystemIcons } from '../icons';\r\nimport { DropdownContainer } from '../Dropdown/CommonStyling';\r\nimport { nanoid } from 'nanoid';\r\nimport { Size } from '../types';\r\nimport DropdownContent, { DropdownCustomizationProps } from '../Dropdown/DropdownContent';\r\nimport styled from 'styled-components';\r\nimport { useClickOutsideRef, useFocusOutsideRef } from '../common';\r\n\r\nconst DualButtonsContainer = styled.div<{ $size?: Size }>`\r\n display: flex;\r\n align-items: center;\r\n\r\n button:first-child {\r\n margin-right: 2px;\r\n }\r\n\r\n ${TextButtonContentContainer} {\r\n min-width: unset;\r\n gap: 0px;\r\n padding: ${(props) => (props.$size == Size.Large ? '4px 18px' : props.$size == Size.Medium ? '4px 14px' : '4px 10px')};\r\n }\r\n\r\n .extraMargin {\r\n margin-bottom: 4px;\r\n }\r\n`;\r\n\r\nexport interface ButtonOption {\r\n label: string;\r\n}\r\n\r\nexport interface DualButtonProps extends TextButtonProps {\r\n /**\r\n * Required. An object containing customization properties for the dropdown.\r\n */\r\n dropdownCustomizationProps: DropdownCustomizationProps;\r\n /**\r\n * Optional. An array of strings representing the values in the dropdown menu.\r\n */\r\n dropdownMenuValues?: string[];\r\n /**\r\n * Optional. A function to be called when the values in the dropdown menu change.\r\n * It should return void, a boolean, or undefined.\r\n */\r\n setDropdownMenuValues?: (values: string[]) => void | boolean | undefined;\r\n}\r\n\r\nconst DualFunctionButton: React.FunctionComponent<DualButtonProps> = ({\r\n children = 'Primary Button',\r\n variant = 'primary',\r\n type = 'button',\r\n size = Size.Medium,\r\n width: width = 'auto',\r\n testId,\r\n disabled,\r\n id,\r\n dropdownMenuValues,\r\n setDropdownMenuValues,\r\n dropdownCustomizationProps,\r\n ...props\r\n}) => {\r\n // Let's filter out properties that we don't need to render.\r\n const { loading, icon, onClick, ...renderProps } = props;\r\n const [isOpen, setIsOpen] = React.useState<boolean>(false);\r\n const [activeDescendant, setActiveDescendant] = React.useState<string>();\r\n const [focused, setFocused] = React.useState<number | null>(null);\r\n const [keyboardNavigated, setKeyboardNavigated] = React.useState<boolean>(false);\r\n const dropdownContainerRef = React.useRef<HTMLDivElement>(null);\r\n const [selectedValues, setSelectedValues] = React.useState<string[]>([]);\r\n\r\n const dropdownContentRef = React.useRef<HTMLDivElement>(null);\r\n const dropdownButtonRef = useClickOutsideRef(\r\n () => setIsOpen(false),\r\n [dropdownContainerRef],\r\n useFocusOutsideRef(() => setIsOpen(false), [dropdownContentRef]),\r\n );\r\n \r\n const dropdownContentId = id ? id + '_dropdownContent' : nanoid();\r\n\r\n React.useEffect(() => {\r\n !isOpen && setKeyboardNavigated(false);\r\n }, [isOpen]);\r\n\r\n return (\r\n <DualButtonsContainer $size={size}>\r\n <DropdownContainer ref={dropdownContainerRef} $isButton={true} $readOnly={false} $disabled={false} margin=\"\">\r\n <TextButton {...renderProps} testId={testId} onClick={onClick} disabled={disabled} type={type} loading={loading} icon={icon} size={size} width={width} variant={variant} flatEdge=\"right\">\r\n {children}\r\n </TextButton>\r\n <DropdownContent\r\n containerRef={dropdownContainerRef}\r\n customizationProps={dropdownCustomizationProps}\r\n filter=\"\"\r\n ref={dropdownContentRef}\r\n selectedValues={dropdownCustomizationProps.itemsType == 'normal' ? [] : dropdownMenuValues ?? selectedValues}\r\n setSelectedValues={setDropdownMenuValues ? setDropdownMenuValues : setSelectedValues}\r\n isButton={true}\r\n setIsOpen={setIsOpen}\r\n focused={focused}\r\n width={size == Size.Small ? '280px' : '360px'}\r\n onActiveDescendantChanged={(e) => setActiveDescendant(e)}\r\n setFocused={setFocused}\r\n size={size}\r\n outline={keyboardNavigated}\r\n isOpen={isOpen}\r\n id={dropdownContentId}\r\n messageOnNoResults=\"\"\r\n alignLeft={true}\r\n ariaRolesType=\"menu\"\r\n />\r\n </DropdownContainer>\r\n <TextButton\r\n variant={variant}\r\n {...renderProps}\r\n onKeyPress={(e: any) => {\r\n if (isOpen) return;\r\n\r\n if (e.key === 'Enter' || e.key === ' ') {\r\n setFocused(0);\r\n setKeyboardNavigated(true);\r\n }\r\n }}\r\n className=\"extraMargin\"\r\n testId={'options_toggleBtn'}\r\n ref={dropdownButtonRef}\r\n aria-activedescendant={activeDescendant}\r\n role=\"button\"\r\n aria-controls={dropdownContentId}\r\n disabled={disabled}\r\n type={type}\r\n size={size}\r\n onClick={(e) => {\r\n e.stopPropagation();\r\n setIsOpen(!isOpen);\r\n }}\r\n icon={ isOpen ? <SystemIcons.ArrowDropUp aria-hidden=\"true\" size=\"16px\" /> \r\n : <SystemIcons.ArrowDropDown aria-hidden=\"true\" size=\"16px\" /> }\r\n flatEdge=\"left\"\r\n />\r\n </DualButtonsContainer>\r\n );\r\n};\r\n\r\nexport default DualFunctionButton;\r\n"],"mappings":"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","ignoreList":[]}
|