@coorpacademy/components 11.36.10-alpha.2 → 11.36.10-alpha.3
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/es/atom/button-menu/index.d.ts.map +1 -1
- package/es/atom/button-menu/index.js +2 -1
- package/es/atom/button-menu/index.js.map +1 -1
- package/es/atom/input-select/index.d.ts.map +1 -1
- package/es/atom/input-select/index.js +4 -1
- package/es/atom/input-select/index.js.map +1 -1
- package/lib/atom/button-menu/index.d.ts.map +1 -1
- package/lib/atom/button-menu/index.js +2 -1
- package/lib/atom/button-menu/index.js.map +1 -1
- package/lib/atom/input-select/index.d.ts.map +1 -1
- package/lib/atom/input-select/index.js +4 -1
- package/lib/atom/input-select/index.js.map +1 -1
- package/package.json +2 -2
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/atom/button-menu/index.tsx"],"names":[],"mappings":";AAMA,OAAkB,EAAC,eAAe,EAA+B,MAAM,SAAS,CAAC;AAkEjF,QAAA,MAAM,UAAU;YAAW,eAAe;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/atom/button-menu/index.tsx"],"names":[],"mappings":";AAMA,OAAkB,EAAC,eAAe,EAA+B,MAAM,SAAS,CAAC;AAkEjF,QAAA,MAAM,UAAU;YAAW,eAAe;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAuBzC,CAAC;AAIF,eAAe,UAAU,CAAC"}
|
|
@@ -78,8 +78,9 @@ const ButtonMenu = props => {
|
|
|
78
78
|
() => map.convert({
|
|
79
79
|
cap: false
|
|
80
80
|
})(buildButton, buttons), [buttons, buildButton]);
|
|
81
|
+
const shouldBeScrollable = enableScroll && buttons && buttons.length > 6;
|
|
81
82
|
const containerStyle = classnames(style.buttonMenuContainer, {
|
|
82
|
-
[style.scrollable]:
|
|
83
|
+
[style.scrollable]: shouldBeScrollable
|
|
83
84
|
});
|
|
84
85
|
return /*#__PURE__*/React.createElement("div", {
|
|
85
86
|
"data-name": dataName,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","names":["React","useMemo","useCallback","map","classnames","ButtonLink","style","propTypes","buttonPropTypes","DEFAULT_ICON_STYLE","THEMES","buildCustomIconByTheme","icon","theme","iconProps","custom","customProps","faIcon","Button","props","dataName","disabled","label","onClick","_noop","type","buttonLinkType","customStyle","customLabelClassName","rest","styleButton","button","defaultStyle","defaultLeft","dangerous","dangerousLeft","handleOnClick","buttonLinkProps","className","createElement","_extends","process","env","NODE_ENV","ButtonMenu","buttons","enableScroll","buildButton","index","key","buttonList","convert","cap","containerStyle","buttonMenuContainer","scrollable"],"sources":["../../../src/atom/button-menu/index.tsx"],"sourcesContent":["import React, {useMemo, useCallback} from 'react';\nimport map from 'lodash/fp/map';\nimport classnames from 'classnames';\nimport {noop} from 'lodash/fp';\nimport ButtonLink from '../button-link';\nimport style from './style.css';\nimport propTypes, {ButtonMenuProps, ButtonProps, buttonPropTypes} from './types';\nimport {DEFAULT_ICON_STYLE, THEMES} from './utils';\n\nconst buildCustomIconByTheme = (icon: ButtonProps['icon']) => {\n if (!icon) return;\n\n const {theme, ...iconProps} = icon;\n const custom = theme && THEMES[theme];\n if (!custom) return iconProps;\n\n const customProps = custom\n ? {\n ...DEFAULT_ICON_STYLE,\n faIcon: {...DEFAULT_ICON_STYLE.faIcon, ...custom}\n }\n : null;\n\n return {\n ...iconProps,\n ...customProps\n };\n};\n\nconst Button = (props: ButtonProps) => {\n const {\n 'data-name': dataName,\n disabled,\n label,\n onClick = noop,\n type = 'default',\n buttonLinkType,\n icon,\n customStyle = {},\n customLabelClassName,\n ...rest\n } = props;\n const styleButton = classnames(\n style.button,\n type === 'default' && style.defaultStyle,\n type === 'defaultLeft' && style.defaultLeft,\n type === 'dangerous' && style.dangerous,\n type === 'dangerousLeft' && style.dangerousLeft,\n disabled && style.disabled\n );\n const handleOnClick = useCallback(() => onClick(), [onClick]);\n\n const buttonLinkProps = {\n ...rest,\n 'aria-label': label,\n disabled,\n label,\n type: buttonLinkType,\n onClick: handleOnClick,\n 'data-name': dataName,\n className: styleButton,\n customStyle: {...customStyle},\n customLabelClassName\n };\n\n const iconProps = buildCustomIconByTheme(icon);\n\n return <ButtonLink {...buttonLinkProps} icon={iconProps} />;\n};\n\nButton.propTypes = buttonPropTypes;\n\nconst ButtonMenu = (props: ButtonMenuProps) => {\n const {buttons, 'data-name': dataName, enableScroll = false} = props;\n const buildButton = useCallback((button: ButtonProps, index) => {\n return <Button {...button} key={button.label + index} />;\n }, []);\n\n const buttonList = useMemo(\n // @ts-expect-error (to avoid using map as any)\n () => map.convert({cap: false})(buildButton, buttons),\n [buttons, buildButton]\n );\n\n const containerStyle = classnames(style.buttonMenuContainer, {\n [style.scrollable]:
|
|
1
|
+
{"version":3,"file":"index.js","names":["React","useMemo","useCallback","map","classnames","ButtonLink","style","propTypes","buttonPropTypes","DEFAULT_ICON_STYLE","THEMES","buildCustomIconByTheme","icon","theme","iconProps","custom","customProps","faIcon","Button","props","dataName","disabled","label","onClick","_noop","type","buttonLinkType","customStyle","customLabelClassName","rest","styleButton","button","defaultStyle","defaultLeft","dangerous","dangerousLeft","handleOnClick","buttonLinkProps","className","createElement","_extends","process","env","NODE_ENV","ButtonMenu","buttons","enableScroll","buildButton","index","key","buttonList","convert","cap","shouldBeScrollable","length","containerStyle","buttonMenuContainer","scrollable"],"sources":["../../../src/atom/button-menu/index.tsx"],"sourcesContent":["import React, {useMemo, useCallback} from 'react';\nimport map from 'lodash/fp/map';\nimport classnames from 'classnames';\nimport {noop} from 'lodash/fp';\nimport ButtonLink from '../button-link';\nimport style from './style.css';\nimport propTypes, {ButtonMenuProps, ButtonProps, buttonPropTypes} from './types';\nimport {DEFAULT_ICON_STYLE, THEMES} from './utils';\n\nconst buildCustomIconByTheme = (icon: ButtonProps['icon']) => {\n if (!icon) return;\n\n const {theme, ...iconProps} = icon;\n const custom = theme && THEMES[theme];\n if (!custom) return iconProps;\n\n const customProps = custom\n ? {\n ...DEFAULT_ICON_STYLE,\n faIcon: {...DEFAULT_ICON_STYLE.faIcon, ...custom}\n }\n : null;\n\n return {\n ...iconProps,\n ...customProps\n };\n};\n\nconst Button = (props: ButtonProps) => {\n const {\n 'data-name': dataName,\n disabled,\n label,\n onClick = noop,\n type = 'default',\n buttonLinkType,\n icon,\n customStyle = {},\n customLabelClassName,\n ...rest\n } = props;\n const styleButton = classnames(\n style.button,\n type === 'default' && style.defaultStyle,\n type === 'defaultLeft' && style.defaultLeft,\n type === 'dangerous' && style.dangerous,\n type === 'dangerousLeft' && style.dangerousLeft,\n disabled && style.disabled\n );\n const handleOnClick = useCallback(() => onClick(), [onClick]);\n\n const buttonLinkProps = {\n ...rest,\n 'aria-label': label,\n disabled,\n label,\n type: buttonLinkType,\n onClick: handleOnClick,\n 'data-name': dataName,\n className: styleButton,\n customStyle: {...customStyle},\n customLabelClassName\n };\n\n const iconProps = buildCustomIconByTheme(icon);\n\n return <ButtonLink {...buttonLinkProps} icon={iconProps} />;\n};\n\nButton.propTypes = buttonPropTypes;\n\nconst ButtonMenu = (props: ButtonMenuProps) => {\n const {buttons, 'data-name': dataName, enableScroll = false} = props;\n const buildButton = useCallback((button: ButtonProps, index) => {\n return <Button {...button} key={button.label + index} />;\n }, []);\n\n const buttonList = useMemo(\n // @ts-expect-error (to avoid using map as any)\n () => map.convert({cap: false})(buildButton, buttons),\n [buttons, buildButton]\n );\n\n const shouldBeScrollable = enableScroll && buttons && buttons.length > 6;\n\n const containerStyle = classnames(style.buttonMenuContainer, {\n [style.scrollable]: shouldBeScrollable\n });\n\n return (\n <div data-name={dataName} className={containerStyle}>\n {buttonList}\n </div>\n );\n};\n\nButtonMenu.propTypes = propTypes;\n\nexport default ButtonMenu;\n"],"mappings":"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","ignoreList":[]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/atom/input-select/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAsC,MAAM,OAAO,CAAC;AAK3D,OAAO,KAAK,EAAC,gBAAgB,EAAC,MAAM,SAAS,CAAC;AAK9C,QAAA,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,gBAAgB,
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/atom/input-select/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAsC,MAAM,OAAO,CAAC;AAK3D,OAAO,KAAK,EAAC,gBAAgB,EAAC,MAAM,SAAS,CAAC;AAK9C,QAAA,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,gBAAgB,CAqH3C,CAAC;AAIF,eAAe,WAAW,CAAC"}
|
|
@@ -59,6 +59,7 @@ const InputSelect = ({
|
|
|
59
59
|
icon: selectedIcon
|
|
60
60
|
})) : null);
|
|
61
61
|
};
|
|
62
|
+
const shouldBeScrollable = options.length > 6;
|
|
62
63
|
return /*#__PURE__*/React.createElement("div", {
|
|
63
64
|
className: style.container
|
|
64
65
|
}, /*#__PURE__*/React.createElement("div", {
|
|
@@ -94,7 +95,9 @@ const InputSelect = ({
|
|
|
94
95
|
}),
|
|
95
96
|
icon: iconClosed
|
|
96
97
|
}))))), open ? /*#__PURE__*/React.createElement("div", {
|
|
97
|
-
className: classnames(style.menuWrapper,
|
|
98
|
+
className: classnames(style.menuWrapper, {
|
|
99
|
+
[style.showFade]: shouldBeScrollable
|
|
100
|
+
})
|
|
98
101
|
}, /*#__PURE__*/React.createElement("ul", {
|
|
99
102
|
id: `${componentId}-listbox`,
|
|
100
103
|
className: style.menu,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","names":["React","useState","useRef","useCallback","classnames","FontAwesomeIcon","style","propTypes","COMPONENT_ID","InputSelect","options","value","onChange","placeholder","className","ariaLabel","iconClosed","selectedIcon","buttonDataTestId","open","setOpen","wrapperRef","componentId","toLowerCase","replace","handleToggle","o","handleOnOptionClick","optionValue","useEffect","handleClickOutside","event","current","contains","target","document","addEventListener","removeEventListener","selectedOption","find","opt","renderOption","option","handleClick","isSelected","createElement","key","selected","role","onClick","optionIcon","icon","optionLabel","label","checkIcon","container","outerWrapper","ref","wrapper","type","display","undefined","id","content","iconWrapper","rotated","menuWrapper","showFade","menu","map","process","env","NODE_ENV"],"sources":["../../../src/atom/input-select/index.tsx"],"sourcesContent":["import React, {useState, useRef, useCallback} from 'react';\nimport classnames from 'classnames';\nimport {FontAwesomeIcon} from '@fortawesome/react-fontawesome';\nimport {IconName} from '@fortawesome/fontawesome-svg-core';\nimport style from './style.css';\nimport type {InputSelectProps} from './types';\nimport propTypes from './types';\n\nconst COMPONENT_ID = 'input-select';\n\nconst InputSelect: React.FC<InputSelectProps> = ({\n options = [],\n value,\n onChange,\n placeholder,\n className,\n 'aria-label': ariaLabel,\n iconClosed = 'chevron-down',\n selectedIcon = 'circle-check',\n 'button-data-testid': buttonDataTestId = 'select-input'\n}) => {\n const [open, setOpen] = useState(false);\n const wrapperRef = useRef<HTMLDivElement>(null);\n\n const componentId = `${COMPONENT_ID}-${\n placeholder?.toLowerCase().replace(/\\s+/g, '-') || 'default'\n }`;\n\n const handleToggle = useCallback(() => {\n setOpen(o => !o);\n }, []);\n\n const handleOnOptionClick = useCallback(\n (optionValue: string) => {\n onChange(optionValue);\n setOpen(false);\n },\n [onChange]\n );\n\n React.useEffect(() => {\n if (!open) return;\n const handleClickOutside = (event: MouseEvent) => {\n if (!wrapperRef.current?.contains(event.target as Node)) {\n setOpen(false);\n }\n };\n document.addEventListener('mousedown', handleClickOutside);\n return () => document.removeEventListener('mousedown', handleClickOutside);\n }, [open]);\n\n const selectedOption = options.find(opt => opt.value === value);\n\n const renderOption = (option: InputSelectProps['options'][0]) => {\n function handleClick() {\n handleOnOptionClick(option.value);\n }\n\n const isSelected = option.value === value;\n\n return (\n <li\n key={option.value}\n className={classnames(style.option, isSelected && style.selected)}\n role=\"option\"\n aria-selected={isSelected}\n onClick={handleClick}\n data-testid={`option-${option.value}`}\n data-name={option['data-name']}\n >\n <span className={style.optionIcon}>{option.icon}</span>\n <span className={style.optionLabel}>{option.label}</span>\n {isSelected ? (\n <span className={style.checkIcon}>\n <FontAwesomeIcon icon={selectedIcon as IconName} />\n </span>\n ) : null}\n </li>\n );\n };\n\n return (\n <div className={style.container}>\n <div\n className={classnames(style.outerWrapper, {\n [style.open]: open\n })}\n >\n <div\n ref={wrapperRef}\n className={classnames(style.wrapper, className)}\n aria-label={ariaLabel}\n >\n <button\n type=\"button\"\n className={style.display}\n onClick={handleToggle}\n aria-haspopup=\"listbox\"\n aria-expanded={open}\n aria-controls={open ? `${componentId}-listbox` : undefined}\n id={componentId}\n data-testid={buttonDataTestId}\n >\n <div className={style.content}>\n <span className={style.label}>{placeholder}</span>\n {selectedOption ? <span className={style.value}>{selectedOption.label}</span> : null}\n </div>\n <span className={classnames(style.iconWrapper, {[style.open]: open})}>\n <FontAwesomeIcon\n className={classnames(style.icon, {[style.rotated]: open})}\n icon={iconClosed as IconName}\n />\n </span>\n </button>\n </div>\n </div>\n {open ? (\n <div className={classnames(style.menuWrapper, style.showFade)}>\n <ul id={`${componentId}-listbox`} className={style.menu} role=\"listbox\">\n {options.map(renderOption)}\n </ul>\n </div>\n ) : null}\n </div>\n );\n};\n\nInputSelect.propTypes = propTypes;\n\nexport default InputSelect;\n"],"mappings":"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
|
|
1
|
+
{"version":3,"file":"index.js","names":["React","useState","useRef","useCallback","classnames","FontAwesomeIcon","style","propTypes","COMPONENT_ID","InputSelect","options","value","onChange","placeholder","className","ariaLabel","iconClosed","selectedIcon","buttonDataTestId","open","setOpen","wrapperRef","componentId","toLowerCase","replace","handleToggle","o","handleOnOptionClick","optionValue","useEffect","handleClickOutside","event","current","contains","target","document","addEventListener","removeEventListener","selectedOption","find","opt","renderOption","option","handleClick","isSelected","createElement","key","selected","role","onClick","optionIcon","icon","optionLabel","label","checkIcon","shouldBeScrollable","length","container","outerWrapper","ref","wrapper","type","display","undefined","id","content","iconWrapper","rotated","menuWrapper","showFade","menu","map","process","env","NODE_ENV"],"sources":["../../../src/atom/input-select/index.tsx"],"sourcesContent":["import React, {useState, useRef, useCallback} from 'react';\nimport classnames from 'classnames';\nimport {FontAwesomeIcon} from '@fortawesome/react-fontawesome';\nimport {IconName} from '@fortawesome/fontawesome-svg-core';\nimport style from './style.css';\nimport type {InputSelectProps} from './types';\nimport propTypes from './types';\n\nconst COMPONENT_ID = 'input-select';\n\nconst InputSelect: React.FC<InputSelectProps> = ({\n options = [],\n value,\n onChange,\n placeholder,\n className,\n 'aria-label': ariaLabel,\n iconClosed = 'chevron-down',\n selectedIcon = 'circle-check',\n 'button-data-testid': buttonDataTestId = 'select-input'\n}) => {\n const [open, setOpen] = useState(false);\n const wrapperRef = useRef<HTMLDivElement>(null);\n\n const componentId = `${COMPONENT_ID}-${\n placeholder?.toLowerCase().replace(/\\s+/g, '-') || 'default'\n }`;\n\n const handleToggle = useCallback(() => {\n setOpen(o => !o);\n }, []);\n\n const handleOnOptionClick = useCallback(\n (optionValue: string) => {\n onChange(optionValue);\n setOpen(false);\n },\n [onChange]\n );\n\n React.useEffect(() => {\n if (!open) return;\n const handleClickOutside = (event: MouseEvent) => {\n if (!wrapperRef.current?.contains(event.target as Node)) {\n setOpen(false);\n }\n };\n document.addEventListener('mousedown', handleClickOutside);\n return () => document.removeEventListener('mousedown', handleClickOutside);\n }, [open]);\n\n const selectedOption = options.find(opt => opt.value === value);\n\n const renderOption = (option: InputSelectProps['options'][0]) => {\n function handleClick() {\n handleOnOptionClick(option.value);\n }\n\n const isSelected = option.value === value;\n\n return (\n <li\n key={option.value}\n className={classnames(style.option, isSelected && style.selected)}\n role=\"option\"\n aria-selected={isSelected}\n onClick={handleClick}\n data-testid={`option-${option.value}`}\n data-name={option['data-name']}\n >\n <span className={style.optionIcon}>{option.icon}</span>\n <span className={style.optionLabel}>{option.label}</span>\n {isSelected ? (\n <span className={style.checkIcon}>\n <FontAwesomeIcon icon={selectedIcon as IconName} />\n </span>\n ) : null}\n </li>\n );\n };\n\n const shouldBeScrollable = options.length > 6;\n\n return (\n <div className={style.container}>\n <div\n className={classnames(style.outerWrapper, {\n [style.open]: open\n })}\n >\n <div\n ref={wrapperRef}\n className={classnames(style.wrapper, className)}\n aria-label={ariaLabel}\n >\n <button\n type=\"button\"\n className={style.display}\n onClick={handleToggle}\n aria-haspopup=\"listbox\"\n aria-expanded={open}\n aria-controls={open ? `${componentId}-listbox` : undefined}\n id={componentId}\n data-testid={buttonDataTestId}\n >\n <div className={style.content}>\n <span className={style.label}>{placeholder}</span>\n {selectedOption ? <span className={style.value}>{selectedOption.label}</span> : null}\n </div>\n <span className={classnames(style.iconWrapper, {[style.open]: open})}>\n <FontAwesomeIcon\n className={classnames(style.icon, {[style.rotated]: open})}\n icon={iconClosed as IconName}\n />\n </span>\n </button>\n </div>\n </div>\n {open ? (\n <div className={classnames(style.menuWrapper, {[style.showFade]: shouldBeScrollable})}>\n <ul id={`${componentId}-listbox`} className={style.menu} role=\"listbox\">\n {options.map(renderOption)}\n </ul>\n </div>\n ) : null}\n </div>\n );\n};\n\nInputSelect.propTypes = propTypes;\n\nexport default InputSelect;\n"],"mappings":"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","ignoreList":[]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/atom/button-menu/index.tsx"],"names":[],"mappings":";AAMA,OAAkB,EAAC,eAAe,EAA+B,MAAM,SAAS,CAAC;AAkEjF,QAAA,MAAM,UAAU;YAAW,eAAe;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/atom/button-menu/index.tsx"],"names":[],"mappings":";AAMA,OAAkB,EAAC,eAAe,EAA+B,MAAM,SAAS,CAAC;AAkEjF,QAAA,MAAM,UAAU;YAAW,eAAe;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAuBzC,CAAC;AAIF,eAAe,UAAU,CAAC"}
|
|
@@ -85,8 +85,9 @@ const ButtonMenu = props => {
|
|
|
85
85
|
() => _map.default.convert({
|
|
86
86
|
cap: false
|
|
87
87
|
})(buildButton, buttons), [buttons, buildButton]);
|
|
88
|
+
const shouldBeScrollable = enableScroll && buttons && buttons.length > 6;
|
|
88
89
|
const containerStyle = (0, _classnames.default)(_style.default.buttonMenuContainer, {
|
|
89
|
-
[_style.default.scrollable]:
|
|
90
|
+
[_style.default.scrollable]: shouldBeScrollable
|
|
90
91
|
});
|
|
91
92
|
return /*#__PURE__*/_react.default.createElement("div", {
|
|
92
93
|
"data-name": dataName,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","names":["_react","_interopRequireWildcard","require","_map","_interopRequireDefault","_classnames","_buttonLink","_style","_types","_utils","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","_extends","assign","bind","arguments","length","apply","buildCustomIconByTheme","icon","theme","iconProps","custom","THEMES","customProps","DEFAULT_ICON_STYLE","faIcon","Button","props","dataName","disabled","label","onClick","_noop2","type","buttonLinkType","customStyle","customLabelClassName","rest","styleButton","classnames","style","button","defaultStyle","defaultLeft","dangerous","dangerousLeft","handleOnClick","useCallback","buttonLinkProps","className","createElement","propTypes","process","env","NODE_ENV","buttonPropTypes","ButtonMenu","buttons","enableScroll","buildButton","index","key","buttonList","useMemo","map","convert","cap","containerStyle","buttonMenuContainer","scrollable","_default","exports"],"sources":["../../../src/atom/button-menu/index.tsx"],"sourcesContent":["import React, {useMemo, useCallback} from 'react';\nimport map from 'lodash/fp/map';\nimport classnames from 'classnames';\nimport {noop} from 'lodash/fp';\nimport ButtonLink from '../button-link';\nimport style from './style.css';\nimport propTypes, {ButtonMenuProps, ButtonProps, buttonPropTypes} from './types';\nimport {DEFAULT_ICON_STYLE, THEMES} from './utils';\n\nconst buildCustomIconByTheme = (icon: ButtonProps['icon']) => {\n if (!icon) return;\n\n const {theme, ...iconProps} = icon;\n const custom = theme && THEMES[theme];\n if (!custom) return iconProps;\n\n const customProps = custom\n ? {\n ...DEFAULT_ICON_STYLE,\n faIcon: {...DEFAULT_ICON_STYLE.faIcon, ...custom}\n }\n : null;\n\n return {\n ...iconProps,\n ...customProps\n };\n};\n\nconst Button = (props: ButtonProps) => {\n const {\n 'data-name': dataName,\n disabled,\n label,\n onClick = noop,\n type = 'default',\n buttonLinkType,\n icon,\n customStyle = {},\n customLabelClassName,\n ...rest\n } = props;\n const styleButton = classnames(\n style.button,\n type === 'default' && style.defaultStyle,\n type === 'defaultLeft' && style.defaultLeft,\n type === 'dangerous' && style.dangerous,\n type === 'dangerousLeft' && style.dangerousLeft,\n disabled && style.disabled\n );\n const handleOnClick = useCallback(() => onClick(), [onClick]);\n\n const buttonLinkProps = {\n ...rest,\n 'aria-label': label,\n disabled,\n label,\n type: buttonLinkType,\n onClick: handleOnClick,\n 'data-name': dataName,\n className: styleButton,\n customStyle: {...customStyle},\n customLabelClassName\n };\n\n const iconProps = buildCustomIconByTheme(icon);\n\n return <ButtonLink {...buttonLinkProps} icon={iconProps} />;\n};\n\nButton.propTypes = buttonPropTypes;\n\nconst ButtonMenu = (props: ButtonMenuProps) => {\n const {buttons, 'data-name': dataName, enableScroll = false} = props;\n const buildButton = useCallback((button: ButtonProps, index) => {\n return <Button {...button} key={button.label + index} />;\n }, []);\n\n const buttonList = useMemo(\n // @ts-expect-error (to avoid using map as any)\n () => map.convert({cap: false})(buildButton, buttons),\n [buttons, buildButton]\n );\n\n const containerStyle = classnames(style.buttonMenuContainer, {\n [style.scrollable]:
|
|
1
|
+
{"version":3,"file":"index.js","names":["_react","_interopRequireWildcard","require","_map","_interopRequireDefault","_classnames","_buttonLink","_style","_types","_utils","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","_extends","assign","bind","arguments","length","apply","buildCustomIconByTheme","icon","theme","iconProps","custom","THEMES","customProps","DEFAULT_ICON_STYLE","faIcon","Button","props","dataName","disabled","label","onClick","_noop2","type","buttonLinkType","customStyle","customLabelClassName","rest","styleButton","classnames","style","button","defaultStyle","defaultLeft","dangerous","dangerousLeft","handleOnClick","useCallback","buttonLinkProps","className","createElement","propTypes","process","env","NODE_ENV","buttonPropTypes","ButtonMenu","buttons","enableScroll","buildButton","index","key","buttonList","useMemo","map","convert","cap","shouldBeScrollable","containerStyle","buttonMenuContainer","scrollable","_default","exports"],"sources":["../../../src/atom/button-menu/index.tsx"],"sourcesContent":["import React, {useMemo, useCallback} from 'react';\nimport map from 'lodash/fp/map';\nimport classnames from 'classnames';\nimport {noop} from 'lodash/fp';\nimport ButtonLink from '../button-link';\nimport style from './style.css';\nimport propTypes, {ButtonMenuProps, ButtonProps, buttonPropTypes} from './types';\nimport {DEFAULT_ICON_STYLE, THEMES} from './utils';\n\nconst buildCustomIconByTheme = (icon: ButtonProps['icon']) => {\n if (!icon) return;\n\n const {theme, ...iconProps} = icon;\n const custom = theme && THEMES[theme];\n if (!custom) return iconProps;\n\n const customProps = custom\n ? {\n ...DEFAULT_ICON_STYLE,\n faIcon: {...DEFAULT_ICON_STYLE.faIcon, ...custom}\n }\n : null;\n\n return {\n ...iconProps,\n ...customProps\n };\n};\n\nconst Button = (props: ButtonProps) => {\n const {\n 'data-name': dataName,\n disabled,\n label,\n onClick = noop,\n type = 'default',\n buttonLinkType,\n icon,\n customStyle = {},\n customLabelClassName,\n ...rest\n } = props;\n const styleButton = classnames(\n style.button,\n type === 'default' && style.defaultStyle,\n type === 'defaultLeft' && style.defaultLeft,\n type === 'dangerous' && style.dangerous,\n type === 'dangerousLeft' && style.dangerousLeft,\n disabled && style.disabled\n );\n const handleOnClick = useCallback(() => onClick(), [onClick]);\n\n const buttonLinkProps = {\n ...rest,\n 'aria-label': label,\n disabled,\n label,\n type: buttonLinkType,\n onClick: handleOnClick,\n 'data-name': dataName,\n className: styleButton,\n customStyle: {...customStyle},\n customLabelClassName\n };\n\n const iconProps = buildCustomIconByTheme(icon);\n\n return <ButtonLink {...buttonLinkProps} icon={iconProps} />;\n};\n\nButton.propTypes = buttonPropTypes;\n\nconst ButtonMenu = (props: ButtonMenuProps) => {\n const {buttons, 'data-name': dataName, enableScroll = false} = props;\n const buildButton = useCallback((button: ButtonProps, index) => {\n return <Button {...button} key={button.label + index} />;\n }, []);\n\n const buttonList = useMemo(\n // @ts-expect-error (to avoid using map as any)\n () => map.convert({cap: false})(buildButton, buttons),\n [buttons, buildButton]\n );\n\n const shouldBeScrollable = enableScroll && buttons && buttons.length > 6;\n\n const containerStyle = classnames(style.buttonMenuContainer, {\n [style.scrollable]: shouldBeScrollable\n });\n\n return (\n <div data-name={dataName} className={containerStyle}>\n {buttonList}\n </div>\n );\n};\n\nButtonMenu.propTypes = propTypes;\n\nexport default ButtonMenu;\n"],"mappings":";;;;;AAAA,IAAAA,MAAA,GAAAC,uBAAA,CAAAC,OAAA;AACA,IAAAC,IAAA,GAAAC,sBAAA,CAAAF,OAAA;AACA,IAAAG,WAAA,GAAAD,sBAAA,CAAAF,OAAA;AAEA,IAAAI,WAAA,GAAAF,sBAAA,CAAAF,OAAA;AACA,IAAAK,MAAA,GAAAH,sBAAA,CAAAF,OAAA;AACA,IAAAM,MAAA,GAAAP,uBAAA,CAAAC,OAAA;AACA,IAAAO,MAAA,GAAAP,OAAA;AAAmD,SAAAQ,yBAAAC,CAAA,6BAAAC,OAAA,mBAAAC,CAAA,OAAAD,OAAA,IAAAE,CAAA,OAAAF,OAAA,YAAAF,wBAAA,YAAAA,CAAAC,CAAA,WAAAA,CAAA,GAAAG,CAAA,GAAAD,CAAA,KAAAF,CAAA;AAAA,SAAAV,wBAAAU,CAAA,EAAAE,CAAA,SAAAA,CAAA,IAAAF,CAAA,IAAAA,CAAA,CAAAI,UAAA,SAAAJ,CAAA,eAAAA,CAAA,uBAAAA,CAAA,yBAAAA,CAAA,WAAAK,OAAA,EAAAL,CAAA,QAAAG,CAAA,GAAAJ,wBAAA,CAAAG,CAAA,OAAAC,CAAA,IAAAA,CAAA,CAAAG,GAAA,CAAAN,CAAA,UAAAG,CAAA,CAAAI,GAAA,CAAAP,CAAA,OAAAQ,CAAA,KAAAC,SAAA,UAAAC,CAAA,GAAAC,MAAA,CAAAC,cAAA,IAAAD,MAAA,CAAAE,wBAAA,WAAAC,CAAA,IAAAd,CAAA,oBAAAc,CAAA,OAAAC,cAAA,CAAAC,IAAA,CAAAhB,CAAA,EAAAc,CAAA,SAAAG,CAAA,GAAAP,CAAA,GAAAC,MAAA,CAAAE,wBAAA,CAAAb,CAAA,EAAAc,CAAA,UAAAG,CAAA,KAAAA,CAAA,CAAAV,GAAA,IAAAU,CAAA,CAAAC,GAAA,IAAAP,MAAA,CAAAC,cAAA,CAAAJ,CAAA,EAAAM,CAAA,EAAAG,CAAA,IAAAT,CAAA,CAAAM,CAAA,IAAAd,CAAA,CAAAc,CAAA,YAAAN,CAAA,CAAAH,OAAA,GAAAL,CAAA,EAAAG,CAAA,IAAAA,CAAA,CAAAe,GAAA,CAAAlB,CAAA,EAAAQ,CAAA,GAAAA,CAAA;AAAA,SAAAf,uBAAAO,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAI,UAAA,GAAAJ,CAAA,KAAAK,OAAA,EAAAL,CAAA;AAAA,SAAAmB,SAAA,WAAAA,QAAA,GAAAR,MAAA,CAAAS,MAAA,GAAAT,MAAA,CAAAS,MAAA,CAAAC,IAAA,eAAAb,CAAA,aAAAR,CAAA,MAAAA,CAAA,GAAAsB,SAAA,CAAAC,MAAA,EAAAvB,CAAA,UAAAG,CAAA,GAAAmB,SAAA,CAAAtB,CAAA,YAAAE,CAAA,IAAAC,CAAA,OAAAY,cAAA,CAAAC,IAAA,CAAAb,CAAA,EAAAD,CAAA,MAAAM,CAAA,CAAAN,CAAA,IAAAC,CAAA,CAAAD,CAAA,aAAAM,CAAA,KAAAW,QAAA,CAAAK,KAAA,OAAAF,SAAA;AAEnD,MAAMG,sBAAsB,GAAIC,IAAyB,IAAK;EAC5D,IAAI,CAACA,IAAI,EAAE;EAEX,MAAM;IAACC,KAAK;IAAE,GAAGC;EAAS,CAAC,GAAGF,IAAI;EAClC,MAAMG,MAAM,GAAGF,KAAK,IAAIG,aAAM,CAACH,KAAK,CAAC;EACrC,IAAI,CAACE,MAAM,EAAE,OAAOD,SAAS;EAE7B,MAAMG,WAAW,GAAGF,MAAM,GACtB;IACE,GAAGG,yBAAkB;IACrBC,MAAM,EAAE;MAAC,GAAGD,yBAAkB,CAACC,MAAM;MAAE,GAAGJ;IAAM;EAClD,CAAC,GACD,IAAI;EAER,OAAO;IACL,GAAGD,SAAS;IACZ,GAAGG;EACL,CAAC;AACH,CAAC;AAED,MAAMG,MAAM,GAAIC,KAAkB,IAAK;EACrC,MAAM;IACJ,WAAW,EAAEC,QAAQ;IACrBC,QAAQ;IACRC,KAAK;IACLC,OAAO,GAAAC,MAAA,CAAAnC,OAAO;IACdoC,IAAI,GAAG,SAAS;IAChBC,cAAc;IACdhB,IAAI;IACJiB,WAAW,GAAG,CAAC,CAAC;IAChBC,oBAAoB;IACpB,GAAGC;EACL,CAAC,GAAGV,KAAK;EACT,MAAMW,WAAW,GAAG,IAAAC,mBAAU,EAC5BC,cAAK,CAACC,MAAM,EACZR,IAAI,KAAK,SAAS,IAAIO,cAAK,CAACE,YAAY,EACxCT,IAAI,KAAK,aAAa,IAAIO,cAAK,CAACG,WAAW,EAC3CV,IAAI,KAAK,WAAW,IAAIO,cAAK,CAACI,SAAS,EACvCX,IAAI,KAAK,eAAe,IAAIO,cAAK,CAACK,aAAa,EAC/ChB,QAAQ,IAAIW,cAAK,CAACX,QACpB,CAAC;EACD,MAAMiB,aAAa,GAAG,IAAAC,kBAAW,EAAC,MAAMhB,OAAO,CAAC,CAAC,EAAE,CAACA,OAAO,CAAC,CAAC;EAE7D,MAAMiB,eAAe,GAAG;IACtB,GAAGX,IAAI;IACP,YAAY,EAAEP,KAAK;IACnBD,QAAQ;IACRC,KAAK;IACLG,IAAI,EAAEC,cAAc;IACpBH,OAAO,EAAEe,aAAa;IACtB,WAAW,EAAElB,QAAQ;IACrBqB,SAAS,EAAEX,WAAW;IACtBH,WAAW,EAAE;MAAC,GAAGA;IAAW,CAAC;IAC7BC;EACF,CAAC;EAED,MAAMhB,SAAS,GAAGH,sBAAsB,CAACC,IAAI,CAAC;EAE9C,oBAAOrC,MAAA,CAAAgB,OAAA,CAAAqD,aAAA,CAAC/D,WAAA,CAAAU,OAAU,EAAAc,QAAA,KAAKqC,eAAe;IAAE9B,IAAI,EAAEE;EAAU,EAAE,CAAC;AAC7D,CAAC;AAEDM,MAAM,CAACyB,SAAS,GAAAC,OAAA,CAAAC,GAAA,CAAAC,QAAA,oBAAGC,sBAAe;AAElC,MAAMC,UAAU,GAAI7B,KAAsB,IAAK;EAC7C,MAAM;IAAC8B,OAAO;IAAE,WAAW,EAAE7B,QAAQ;IAAE8B,YAAY,GAAG;EAAK,CAAC,GAAG/B,KAAK;EACpE,MAAMgC,WAAW,GAAG,IAAAZ,kBAAW,EAAC,CAACN,MAAmB,EAAEmB,KAAK,KAAK;IAC9D,oBAAO/E,MAAA,CAAAgB,OAAA,CAAAqD,aAAA,CAACxB,MAAM,EAAAf,QAAA,KAAK8B,MAAM;MAAEoB,GAAG,EAAEpB,MAAM,CAACX,KAAK,GAAG8B;IAAM,EAAE,CAAC;EAC1D,CAAC,EAAE,EAAE,CAAC;EAEN,MAAME,UAAU,GAAG,IAAAC,cAAO;EACxB;EACA,MAAMC,YAAG,CAACC,OAAO,CAAC;IAACC,GAAG,EAAE;EAAK,CAAC,CAAC,CAACP,WAAW,EAAEF,OAAO,CAAC,EACrD,CAACA,OAAO,EAAEE,WAAW,CACvB,CAAC;EAED,MAAMQ,kBAAkB,GAAGT,YAAY,IAAID,OAAO,IAAIA,OAAO,CAAC1C,MAAM,GAAG,CAAC;EAExE,MAAMqD,cAAc,GAAG,IAAA7B,mBAAU,EAACC,cAAK,CAAC6B,mBAAmB,EAAE;IAC3D,CAAC7B,cAAK,CAAC8B,UAAU,GAAGH;EACtB,CAAC,CAAC;EAEF,oBACEtF,MAAA,CAAAgB,OAAA,CAAAqD,aAAA;IAAK,aAAWtB,QAAS;IAACqB,SAAS,EAAEmB;EAAe,GACjDN,UACE,CAAC;AAEV,CAAC;AAEDN,UAAU,CAACL,SAAS,GAAAC,OAAA,CAAAC,GAAA,CAAAC,QAAA,oBAAGH,cAAS;AAAC,IAAAoB,QAAA,GAAAC,OAAA,CAAA3E,OAAA,GAElB2D,UAAU","ignoreList":[]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/atom/input-select/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAsC,MAAM,OAAO,CAAC;AAK3D,OAAO,KAAK,EAAC,gBAAgB,EAAC,MAAM,SAAS,CAAC;AAK9C,QAAA,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,gBAAgB,
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/atom/input-select/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAsC,MAAM,OAAO,CAAC;AAK3D,OAAO,KAAK,EAAC,gBAAgB,EAAC,MAAM,SAAS,CAAC;AAK9C,QAAA,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,gBAAgB,CAqH3C,CAAC;AAIF,eAAe,WAAW,CAAC"}
|
|
@@ -66,6 +66,7 @@ const InputSelect = ({
|
|
|
66
66
|
icon: selectedIcon
|
|
67
67
|
})) : null);
|
|
68
68
|
};
|
|
69
|
+
const shouldBeScrollable = options.length > 6;
|
|
69
70
|
return /*#__PURE__*/_react.default.createElement("div", {
|
|
70
71
|
className: _style.default.container
|
|
71
72
|
}, /*#__PURE__*/_react.default.createElement("div", {
|
|
@@ -101,7 +102,9 @@ const InputSelect = ({
|
|
|
101
102
|
}),
|
|
102
103
|
icon: iconClosed
|
|
103
104
|
}))))), open ? /*#__PURE__*/_react.default.createElement("div", {
|
|
104
|
-
className: (0, _classnames.default)(_style.default.menuWrapper,
|
|
105
|
+
className: (0, _classnames.default)(_style.default.menuWrapper, {
|
|
106
|
+
[_style.default.showFade]: shouldBeScrollable
|
|
107
|
+
})
|
|
105
108
|
}, /*#__PURE__*/_react.default.createElement("ul", {
|
|
106
109
|
id: `${componentId}-listbox`,
|
|
107
110
|
className: _style.default.menu,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","names":["_react","_interopRequireWildcard","require","_classnames","_interopRequireDefault","_reactFontawesome","_style","_types","e","__esModule","default","_getRequireWildcardCache","WeakMap","r","t","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","COMPONENT_ID","InputSelect","options","value","onChange","placeholder","className","ariaLabel","iconClosed","selectedIcon","buttonDataTestId","open","setOpen","useState","wrapperRef","useRef","componentId","toLowerCase","replace","handleToggle","useCallback","o","handleOnOptionClick","optionValue","React","useEffect","handleClickOutside","event","current","contains","target","document","addEventListener","removeEventListener","selectedOption","find","opt","renderOption","option","handleClick","isSelected","createElement","key","classnames","style","selected","role","onClick","optionIcon","icon","optionLabel","label","checkIcon","FontAwesomeIcon","container","outerWrapper","ref","wrapper","type","display","undefined","id","content","iconWrapper","rotated","menuWrapper","showFade","menu","map","propTypes","process","env","NODE_ENV","_default","exports"],"sources":["../../../src/atom/input-select/index.tsx"],"sourcesContent":["import React, {useState, useRef, useCallback} from 'react';\nimport classnames from 'classnames';\nimport {FontAwesomeIcon} from '@fortawesome/react-fontawesome';\nimport {IconName} from '@fortawesome/fontawesome-svg-core';\nimport style from './style.css';\nimport type {InputSelectProps} from './types';\nimport propTypes from './types';\n\nconst COMPONENT_ID = 'input-select';\n\nconst InputSelect: React.FC<InputSelectProps> = ({\n options = [],\n value,\n onChange,\n placeholder,\n className,\n 'aria-label': ariaLabel,\n iconClosed = 'chevron-down',\n selectedIcon = 'circle-check',\n 'button-data-testid': buttonDataTestId = 'select-input'\n}) => {\n const [open, setOpen] = useState(false);\n const wrapperRef = useRef<HTMLDivElement>(null);\n\n const componentId = `${COMPONENT_ID}-${\n placeholder?.toLowerCase().replace(/\\s+/g, '-') || 'default'\n }`;\n\n const handleToggle = useCallback(() => {\n setOpen(o => !o);\n }, []);\n\n const handleOnOptionClick = useCallback(\n (optionValue: string) => {\n onChange(optionValue);\n setOpen(false);\n },\n [onChange]\n );\n\n React.useEffect(() => {\n if (!open) return;\n const handleClickOutside = (event: MouseEvent) => {\n if (!wrapperRef.current?.contains(event.target as Node)) {\n setOpen(false);\n }\n };\n document.addEventListener('mousedown', handleClickOutside);\n return () => document.removeEventListener('mousedown', handleClickOutside);\n }, [open]);\n\n const selectedOption = options.find(opt => opt.value === value);\n\n const renderOption = (option: InputSelectProps['options'][0]) => {\n function handleClick() {\n handleOnOptionClick(option.value);\n }\n\n const isSelected = option.value === value;\n\n return (\n <li\n key={option.value}\n className={classnames(style.option, isSelected && style.selected)}\n role=\"option\"\n aria-selected={isSelected}\n onClick={handleClick}\n data-testid={`option-${option.value}`}\n data-name={option['data-name']}\n >\n <span className={style.optionIcon}>{option.icon}</span>\n <span className={style.optionLabel}>{option.label}</span>\n {isSelected ? (\n <span className={style.checkIcon}>\n <FontAwesomeIcon icon={selectedIcon as IconName} />\n </span>\n ) : null}\n </li>\n );\n };\n\n return (\n <div className={style.container}>\n <div\n className={classnames(style.outerWrapper, {\n [style.open]: open\n })}\n >\n <div\n ref={wrapperRef}\n className={classnames(style.wrapper, className)}\n aria-label={ariaLabel}\n >\n <button\n type=\"button\"\n className={style.display}\n onClick={handleToggle}\n aria-haspopup=\"listbox\"\n aria-expanded={open}\n aria-controls={open ? `${componentId}-listbox` : undefined}\n id={componentId}\n data-testid={buttonDataTestId}\n >\n <div className={style.content}>\n <span className={style.label}>{placeholder}</span>\n {selectedOption ? <span className={style.value}>{selectedOption.label}</span> : null}\n </div>\n <span className={classnames(style.iconWrapper, {[style.open]: open})}>\n <FontAwesomeIcon\n className={classnames(style.icon, {[style.rotated]: open})}\n icon={iconClosed as IconName}\n />\n </span>\n </button>\n </div>\n </div>\n {open ? (\n <div className={classnames(style.menuWrapper, style.showFade)}>\n <ul id={`${componentId}-listbox`} className={style.menu} role=\"listbox\">\n {options.map(renderOption)}\n </ul>\n </div>\n ) : null}\n </div>\n );\n};\n\nInputSelect.propTypes = propTypes;\n\nexport default InputSelect;\n"],"mappings":"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","ignoreList":[]}
|
|
1
|
+
{"version":3,"file":"index.js","names":["_react","_interopRequireWildcard","require","_classnames","_interopRequireDefault","_reactFontawesome","_style","_types","e","__esModule","default","_getRequireWildcardCache","WeakMap","r","t","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","COMPONENT_ID","InputSelect","options","value","onChange","placeholder","className","ariaLabel","iconClosed","selectedIcon","buttonDataTestId","open","setOpen","useState","wrapperRef","useRef","componentId","toLowerCase","replace","handleToggle","useCallback","o","handleOnOptionClick","optionValue","React","useEffect","handleClickOutside","event","current","contains","target","document","addEventListener","removeEventListener","selectedOption","find","opt","renderOption","option","handleClick","isSelected","createElement","key","classnames","style","selected","role","onClick","optionIcon","icon","optionLabel","label","checkIcon","FontAwesomeIcon","shouldBeScrollable","length","container","outerWrapper","ref","wrapper","type","display","undefined","id","content","iconWrapper","rotated","menuWrapper","showFade","menu","map","propTypes","process","env","NODE_ENV","_default","exports"],"sources":["../../../src/atom/input-select/index.tsx"],"sourcesContent":["import React, {useState, useRef, useCallback} from 'react';\nimport classnames from 'classnames';\nimport {FontAwesomeIcon} from '@fortawesome/react-fontawesome';\nimport {IconName} from '@fortawesome/fontawesome-svg-core';\nimport style from './style.css';\nimport type {InputSelectProps} from './types';\nimport propTypes from './types';\n\nconst COMPONENT_ID = 'input-select';\n\nconst InputSelect: React.FC<InputSelectProps> = ({\n options = [],\n value,\n onChange,\n placeholder,\n className,\n 'aria-label': ariaLabel,\n iconClosed = 'chevron-down',\n selectedIcon = 'circle-check',\n 'button-data-testid': buttonDataTestId = 'select-input'\n}) => {\n const [open, setOpen] = useState(false);\n const wrapperRef = useRef<HTMLDivElement>(null);\n\n const componentId = `${COMPONENT_ID}-${\n placeholder?.toLowerCase().replace(/\\s+/g, '-') || 'default'\n }`;\n\n const handleToggle = useCallback(() => {\n setOpen(o => !o);\n }, []);\n\n const handleOnOptionClick = useCallback(\n (optionValue: string) => {\n onChange(optionValue);\n setOpen(false);\n },\n [onChange]\n );\n\n React.useEffect(() => {\n if (!open) return;\n const handleClickOutside = (event: MouseEvent) => {\n if (!wrapperRef.current?.contains(event.target as Node)) {\n setOpen(false);\n }\n };\n document.addEventListener('mousedown', handleClickOutside);\n return () => document.removeEventListener('mousedown', handleClickOutside);\n }, [open]);\n\n const selectedOption = options.find(opt => opt.value === value);\n\n const renderOption = (option: InputSelectProps['options'][0]) => {\n function handleClick() {\n handleOnOptionClick(option.value);\n }\n\n const isSelected = option.value === value;\n\n return (\n <li\n key={option.value}\n className={classnames(style.option, isSelected && style.selected)}\n role=\"option\"\n aria-selected={isSelected}\n onClick={handleClick}\n data-testid={`option-${option.value}`}\n data-name={option['data-name']}\n >\n <span className={style.optionIcon}>{option.icon}</span>\n <span className={style.optionLabel}>{option.label}</span>\n {isSelected ? (\n <span className={style.checkIcon}>\n <FontAwesomeIcon icon={selectedIcon as IconName} />\n </span>\n ) : null}\n </li>\n );\n };\n\n const shouldBeScrollable = options.length > 6;\n\n return (\n <div className={style.container}>\n <div\n className={classnames(style.outerWrapper, {\n [style.open]: open\n })}\n >\n <div\n ref={wrapperRef}\n className={classnames(style.wrapper, className)}\n aria-label={ariaLabel}\n >\n <button\n type=\"button\"\n className={style.display}\n onClick={handleToggle}\n aria-haspopup=\"listbox\"\n aria-expanded={open}\n aria-controls={open ? `${componentId}-listbox` : undefined}\n id={componentId}\n data-testid={buttonDataTestId}\n >\n <div className={style.content}>\n <span className={style.label}>{placeholder}</span>\n {selectedOption ? <span className={style.value}>{selectedOption.label}</span> : null}\n </div>\n <span className={classnames(style.iconWrapper, {[style.open]: open})}>\n <FontAwesomeIcon\n className={classnames(style.icon, {[style.rotated]: open})}\n icon={iconClosed as IconName}\n />\n </span>\n </button>\n </div>\n </div>\n {open ? (\n <div className={classnames(style.menuWrapper, {[style.showFade]: shouldBeScrollable})}>\n <ul id={`${componentId}-listbox`} className={style.menu} role=\"listbox\">\n {options.map(renderOption)}\n </ul>\n </div>\n ) : null}\n </div>\n );\n};\n\nInputSelect.propTypes = propTypes;\n\nexport default InputSelect;\n"],"mappings":"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","ignoreList":[]}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@coorpacademy/components",
|
|
3
|
-
"version": "11.36.10-alpha.
|
|
3
|
+
"version": "11.36.10-alpha.3+422923864",
|
|
4
4
|
"description": "",
|
|
5
5
|
"main": "lib/index.js",
|
|
6
6
|
"module": "es/index.js",
|
|
@@ -165,5 +165,5 @@
|
|
|
165
165
|
"last 2 versions",
|
|
166
166
|
"IE 11"
|
|
167
167
|
],
|
|
168
|
-
"gitHead": "
|
|
168
|
+
"gitHead": "422923864ec856220163641ffaac6ddf87c93003"
|
|
169
169
|
}
|