@ntbjs/react-components 2.0.2-rc.10 → 2.0.2-rc.12
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/build/data/Badge/Badge.js +6 -6
- package/build/data/Badge/Badge.js.map +1 -1
- package/build/data/Badge/Badge.styled.js +11 -10
- package/build/data/Badge/Badge.styled.js.map +1 -1
- package/build/inputs/MultiSelect/MultiSelect.js +206 -187
- package/build/inputs/MultiSelect/MultiSelect.js.map +1 -1
- package/build/inputs/MultiSelect/MultiSelect.styled.js +38 -187
- package/build/inputs/MultiSelect/MultiSelect.styled.js.map +1 -1
- package/build/widgets/AssetGallery/AssetGalleryBase/AssetGalleryCompactCard/AssetGalleryCompactCard.js +8 -8
- package/build/widgets/AssetGallery/AssetGalleryBase/AssetGalleryCompactCard/AssetGalleryCompactCard.js.map +1 -1
- package/build/widgets/AssetGallery/AssetGalleryBase/AssetGalleryCompactCard/AssetGalleryCompactCard.styled.js +2 -2
- package/build/widgets/AssetGallery/AssetGalleryBase/AssetGalleryCompactCard/AssetGalleryCompactCard.styled.js.map +1 -1
- package/package.json +1 -1
|
@@ -37,17 +37,17 @@ const Badge = React__default.forwardRef(function Badge({
|
|
|
37
37
|
$backgroundColors: backgroundColors,
|
|
38
38
|
$colors: colors,
|
|
39
39
|
$elevated: elevated,
|
|
40
|
-
|
|
41
|
-
|
|
40
|
+
fontSize: fontSize,
|
|
41
|
+
fontWeight: fontWeight,
|
|
42
42
|
$lineHeight: lineHeight,
|
|
43
43
|
$active: active,
|
|
44
44
|
$error: error,
|
|
45
45
|
$warning: warning,
|
|
46
|
-
$
|
|
46
|
+
$elevatedverticalPadding: verticalPadding,
|
|
47
47
|
$horizontalPadding: horizontalPadding,
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
48
|
+
height: height,
|
|
49
|
+
minHeight: minHeight,
|
|
50
|
+
width: width,
|
|
51
51
|
$minWidth: minWidth
|
|
52
52
|
}, badgeIcon && React__default.createElement(BadgeIcon, {
|
|
53
53
|
$useGutter: !!badgeContent
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Badge.js","sources":["../../../src/components/data/Badge/Badge.js"],"sourcesContent":["import PropTypes from 'prop-types';\nimport React from 'react';\nimport * as S from './Badge.styled';\n\n/**\n * Badges show a bubble containing a `number` or a `string`. It may be used by itself or with children passed as props\n * (to display a badge on top of an icon, for example, pass the icon as the child).\n *\n * If the badge content is passed as a `float`, it will be rounded up to the nearest `integer`,\n * and if the number is higher than 1 000 or 1 000 000 it will be abbreviated to for example \"1.4K\" or \"1.4M\" respectively.\n * If you need to display a `float` instead of a rounded `integer`, pass it as a `string` instead (e.g. \"1,4\").\n *\n * ### Import\n *\n * ``` js\n * import { Badge } from '@ntbjs/react-components/data'\n * // or\n * import Badge from '@ntbjs/react-components/data/Badge'\n * ```\n * ## Props\n * ```\n * Pass `badgeIcon={<svg></svg>}` to display an icon.\n * Pass a number or string to the badgeContent to display it alongside the icon.\n * Pass `align={\"left\"}`or `align={\"center\"}` to align content.\n * Pass `elevated={true}` to display the badge on top of the children\n * Pass `active={true}` to reflect the active status of the badge\n * Pass `error={true}` to reflect the error status of the badge\n * Pass `warning={true}` to reflect the warning status of the badge\n * Pass `fontSize={15}` to set the font size of the badge in pixel\n * Pass `fontWeight={500}` to set the font weight of the badge\n * Pass `lineHeight={12}` to set the line height of the badge in pixel\n * Pass `colors={[#ffffff, #000000]}` to set the font color of the badge\n * Pass `backgroundColors={[#ffffff, #000000]}` to set the background color of the badge\n * Pass `verticalPadding={15}` to set the bottom and top padding of the badge in pixel\n * Pass `horizontalPadding={20}` to set the left and right padding of the badge in pixel\n * Pass `height={24}` to set the height of the badge in pixel\n * Pass `minHeight={24}` to set the minimum height of the badge in pixel\n * Pass `width={50}` to set the width of the badge in pixel\n * Pass `minWidth={32}` to set the minimum width of the badge in pixel\n * ```\n */\nconst Badge = React.forwardRef(function Badge(\n {\n badgeContent,\n badgeIcon,\n children,\n elevated,\n fontSize,\n fontWeight,\n lineHeight,\n active,\n error,\n warning,\n backgroundColors,\n colors,\n verticalPadding,\n horizontalPadding,\n height,\n minHeight,\n width,\n minWidth,\n ...props\n },\n forwardedRef\n) {\n if (typeof badgeContent === 'number') {\n badgeContent = Intl.NumberFormat('en', { notation: 'compact' }).format(badgeContent);\n }\n\n return (\n <S.Badge ref={forwardedRef} $elevated={elevated} $hasChildren={Boolean(children)} {...props}>\n {children && <S.BadgeChildrenContainer>{children}</S.BadgeChildrenContainer>}\n {(badgeIcon || badgeContent) && (\n <S.BadgeLabel\n $backgroundColors={backgroundColors}\n $colors={colors}\n $elevated={elevated}\n
|
|
1
|
+
{"version":3,"file":"Badge.js","sources":["../../../src/components/data/Badge/Badge.js"],"sourcesContent":["import PropTypes from 'prop-types';\nimport React from 'react';\nimport * as S from './Badge.styled';\n\n/**\n * Badges show a bubble containing a `number` or a `string`. It may be used by itself or with children passed as props\n * (to display a badge on top of an icon, for example, pass the icon as the child).\n *\n * If the badge content is passed as a `float`, it will be rounded up to the nearest `integer`,\n * and if the number is higher than 1 000 or 1 000 000 it will be abbreviated to for example \"1.4K\" or \"1.4M\" respectively.\n * If you need to display a `float` instead of a rounded `integer`, pass it as a `string` instead (e.g. \"1,4\").\n *\n * ### Import\n *\n * ``` js\n * import { Badge } from '@ntbjs/react-components/data'\n * // or\n * import Badge from '@ntbjs/react-components/data/Badge'\n * ```\n * ## Props\n * ```\n * Pass `badgeIcon={<svg></svg>}` to display an icon.\n * Pass a number or string to the badgeContent to display it alongside the icon.\n * Pass `align={\"left\"}`or `align={\"center\"}` to align content.\n * Pass `elevated={true}` to display the badge on top of the children\n * Pass `active={true}` to reflect the active status of the badge\n * Pass `error={true}` to reflect the error status of the badge\n * Pass `warning={true}` to reflect the warning status of the badge\n * Pass `fontSize={15}` to set the font size of the badge in pixel\n * Pass `fontWeight={500}` to set the font weight of the badge\n * Pass `lineHeight={12}` to set the line height of the badge in pixel\n * Pass `colors={[#ffffff, #000000]}` to set the font color of the badge\n * Pass `backgroundColors={[#ffffff, #000000]}` to set the background color of the badge\n * Pass `verticalPadding={15}` to set the bottom and top padding of the badge in pixel\n * Pass `horizontalPadding={20}` to set the left and right padding of the badge in pixel\n * Pass `height={24}` to set the height of the badge in pixel\n * Pass `minHeight={24}` to set the minimum height of the badge in pixel\n * Pass `width={50}` to set the width of the badge in pixel\n * Pass `minWidth={32}` to set the minimum width of the badge in pixel\n * ```\n */\nconst Badge = React.forwardRef(function Badge(\n {\n badgeContent,\n badgeIcon,\n children,\n elevated,\n fontSize,\n fontWeight,\n lineHeight,\n active,\n error,\n warning,\n backgroundColors,\n colors,\n verticalPadding,\n horizontalPadding,\n height,\n minHeight,\n width,\n minWidth,\n ...props\n },\n forwardedRef\n) {\n if (typeof badgeContent === 'number') {\n badgeContent = Intl.NumberFormat('en', { notation: 'compact' }).format(badgeContent);\n }\n\n return (\n <S.Badge ref={forwardedRef} $elevated={elevated} $hasChildren={Boolean(children)} {...props}>\n {children && <S.BadgeChildrenContainer>{children}</S.BadgeChildrenContainer>}\n {(badgeIcon || badgeContent) && (\n <S.BadgeLabel\n $backgroundColors={backgroundColors}\n $colors={colors}\n $elevated={elevated}\n fontSize={fontSize}\n fontWeight={fontWeight}\n $lineHeight={lineHeight}\n $active={active}\n $error={error}\n $warning={warning}\n $elevatedverticalPadding={verticalPadding}\n $horizontalPadding={horizontalPadding}\n height={height}\n minHeight={minHeight}\n width={width}\n $minWidth={minWidth}\n >\n {badgeIcon && <S.BadgeIcon $useGutter={!!badgeContent}>{badgeIcon}</S.BadgeIcon>}\n {badgeContent}\n </S.BadgeLabel>\n )}\n </S.Badge>\n );\n});\n\nBadge.propTypes = {\n /**\n * An Icon to show in the badge alongside with a text\n */\n badgeIcon: PropTypes.node,\n\n /**\n * Content to be showed in the badge – e.g. number of results.\n */\n badgeContent: PropTypes.oneOfType([\n PropTypes.string,\n PropTypes.number,\n PropTypes.func,\n PropTypes.element\n ]),\n\n /**\n * The element(s) for which the badge will be displayed – e.g. an icon or a text.\n */\n children: PropTypes.oneOfType([PropTypes.node, PropTypes.string]),\n\n /**\n * Whether the badge should be displayed in an elevated position on top of the child element(s) or not.\n */\n elevated: PropTypes.bool,\n\n /**\n * Whether the element is active or not (e.g. the currently selected menu item). This changes the color of the badge.\n */\n active: PropTypes.bool,\n\n /**\n * There is an error present – 'error be prioritized over warnings if both are set to `true`.\n */\n error: PropTypes.bool,\n\n /**\n * There is a warning present.\n */\n warning: PropTypes.bool,\n /**\n * Font size for the badge\n */\n fontSize: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),\n /**\n * Font weight for the badge\n */\n fontWeight: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),\n /**\n * Line weight for the badge\n */\n lineHeight: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),\n /**\n * Colors of the font in the manner of [darkThemeColor, lightThemeColor]\n */\n colors: PropTypes.arrayOf(PropTypes.string),\n /**\n * Background colors for the badge in the manner of [darkThemeColor, lightThemeColor]\n */\n backgroundColors: PropTypes.arrayOf(PropTypes.string),\n /**\n * Top and bottom padding for the badge\n */\n verticalPadding: PropTypes.number,\n /**\n * Left and right padding for the badge\n */\n horizontalPadding: PropTypes.number,\n /**\n * Height of the badge\n */\n height: PropTypes.number,\n /**\n * Minimum height of the badge\n */\n minHeight: PropTypes.number,\n /**\n * Width of the badge\n */\n width: PropTypes.number,\n /**\n * Minimum width of the badge\n */\n minWidth: PropTypes.number\n};\n\nBadge.defaultProps = {\n elevated: false,\n active: false,\n error: false,\n warning: false,\n badgeIcon: null,\n fontWeight: 'normal',\n lineHeight: 'normal'\n};\n\nexport default Badge;\n"],"names":["Badge","React","forwardRef","badgeContent","badgeIcon","children","elevated","fontSize","fontWeight","lineHeight","active","error","warning","backgroundColors","colors","verticalPadding","horizontalPadding","height","minHeight","width","minWidth","props","forwardedRef","Intl","NumberFormat","notation","format","createElement","S","_extends","ref","$elevated","$hasChildren","Boolean","$backgroundColors","$colors","$lineHeight","$active","$error","$warning","$elevatedverticalPadding","$horizontalPadding","$minWidth","$useGutter","propTypes","process","env","NODE_ENV","PropTypes","node","oneOfType","string","number","func","element","bool","arrayOf","defaultProps"],"mappings":"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"}
|
|
@@ -33,35 +33,36 @@ const BadgeLabel = styled.span.withConfig({
|
|
|
33
33
|
box-sizing: border-box;
|
|
34
34
|
|
|
35
35
|
font-size: ${props => {
|
|
36
|
-
if (props
|
|
37
|
-
return `${props
|
|
36
|
+
if (props.fontSize) {
|
|
37
|
+
return `${props.fontSize}px`;
|
|
38
38
|
} else {
|
|
39
|
-
return props
|
|
39
|
+
return props.elevated ? '0.625rem' : '0.750rem';
|
|
40
40
|
}
|
|
41
41
|
}};
|
|
42
|
-
font-weight: ${props => props
|
|
42
|
+
font-weight: ${props => props.fontWeight ? props.fontWeight : 'normal'};
|
|
43
43
|
line-height: ${props => props.$lineHeight ? `${props.$lineHeight}px` : 'normal'};
|
|
44
|
-
height: ${props => props
|
|
44
|
+
height: ${props => props.height ? `${props.height}px` : 'fit-content'};
|
|
45
45
|
letter-spacing: 0.32px;
|
|
46
46
|
margin-left: ${props => props.$elevated ? '15px' : 'auto'};
|
|
47
47
|
position: ${props => props.$elevated ? 'absolute' : 'initial'};
|
|
48
48
|
right: 0;
|
|
49
49
|
transform: ${props => props.$elevated ? 'translate(33%, -8px)' : 'initial'};
|
|
50
50
|
|
|
51
|
-
${props => props
|
|
52
|
-
width: ${props
|
|
51
|
+
${props => props.width ? css`
|
|
52
|
+
width: ${props.width}px;
|
|
53
53
|
` : null}
|
|
54
54
|
|
|
55
55
|
${props => props.$minWidth ? css`
|
|
56
56
|
min-width: ${props.$minWidth}px;
|
|
57
57
|
` : null}
|
|
58
58
|
|
|
59
|
-
${props => props
|
|
60
|
-
min-height: ${props
|
|
59
|
+
${props => props.minHeight ? css`
|
|
60
|
+
min-height: ${props.minHeight}px;
|
|
61
61
|
` : null}
|
|
62
|
+
|
|
62
63
|
|
|
63
64
|
${props => {
|
|
64
|
-
const verticalPadding = props
|
|
65
|
+
const verticalPadding = props.verticalPadding ? `${props.verticalPadding}px` : props.$elevated ? '4px' : '6px';
|
|
65
66
|
const horizontalPadding = props.$horizontalPadding ? `${props.$horizontalPadding}px` : props.$elevated ? '7px' : '10px';
|
|
66
67
|
return css`
|
|
67
68
|
padding: ${verticalPadding} ${horizontalPadding};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Badge.styled.js","sources":["../../../src/components/data/Badge/Badge.styled.js"],"sourcesContent":["import styled, { css } from 'styled-components';\nimport { applyDefaultTheme } from '../../../utils/defaultTheme';\n\nconst shouldForwardProp = prop => {\n return prop !== 'theme' && !prop.startsWith('$');\n};\n\nexport const Badge = styled.span\n .withConfig({\n shouldForwardProp\n })\n .attrs(applyDefaultTheme)`\n align-content: center;\n display: ${props => (props.$elevated || !props.$hasChildren ? 'inline-flex' : 'flex')};\n font-family: ${props => props.theme.primaryFontFamily};\n font-size: 1rem;\n font-weight: 500;\n min-height: 24px;\n position: relative;\n width: ${props => (props.$elevated ? 'fit-content' : 'initial')};\n`;\n\nexport const BadgeChildrenContainer = styled.span\n .withConfig({\n shouldForwardProp\n })\n .attrs(applyDefaultTheme)`\n align-self: center;\n height: fit-content;\n margin-right: 8px;\n`;\n\nexport const BadgeLabel = styled.span\n .withConfig({\n shouldForwardProp\n })\n .attrs(applyDefaultTheme)`\n border-radius: ${props => (props.$elevated ? '12px' : '14px')};\n display: flex;\n align-items: center;\n justify-content: center;\n box-sizing: border-box;\n\n font-size: ${props => {\n if (props.$fontSize) {\n return `${props.$fontSize}px`;\n } else {\n return props.$elevated ? '0.625rem' : '0.750rem';\n }\n }};\n font-weight: ${props => (props.$fontWeight ? props.$fontWeight : 'normal')};\n line-height: ${props => (props.$lineHeight ? `${props.$lineHeight}px` : 'normal')};\n height: ${props => (props.$height ? `${props.$height}px` : 'fit-content')};\n letter-spacing: 0.32px;\n margin-left: ${props => (props.$elevated ? '15px' : 'auto')};\n position: ${props => (props.$elevated ? 'absolute' : 'initial')};\n right: 0;\n transform: ${props => (props.$elevated ? 'translate(33%, -8px)' : 'initial')};\n\n ${props =>\n props.$width\n ? css`\n width: ${props.$width}px;\n `\n : null}\n\n ${props =>\n props.$minWidth\n ? css`\n min-width: ${props.$minWidth}px;\n `\n : null}\n\n ${props =>\n props.$minHeight\n ? css`\n min-height: ${props.$minHeight}px;\n `\n : null}\n\n ${props => {\n const verticalPadding = props.$verticalPadding\n ? `${props.$verticalPadding}px`\n : props.$elevated\n ? '4px'\n : '6px';\n const horizontalPadding = props.$horizontalPadding\n ? `${props.$horizontalPadding}px`\n : props.$elevated\n ? '7px'\n : '10px';\n return css`\n padding: ${verticalPadding} ${horizontalPadding};\n `;\n }}\n\n ${props =>\n props.theme.themeProp(\n 'background',\n () => {\n const active = props.$active;\n const error = props.$error;\n const warning = props.$warning;\n\n const defaultBgColor = props?.backgroundColors?.[0] ?? props.theme.getColor('gray-600');\n\n switch (true) {\n case !error && !warning && !active:\n return defaultBgColor;\n\n case !error && !warning && active:\n return props.theme.getColor('gray-700');\n\n case error && active:\n return props.theme.getColor('red-500');\n\n case error:\n return props.theme.getColor('red-200');\n\n case warning && active:\n return props.theme.getColor('signal-yellow-500');\n\n case warning:\n return props.theme.getColor('signal-yellow-400');\n\n default:\n return props.theme.getColor('gray-600');\n }\n },\n () => {\n const active = props.$active;\n const error = props.$error;\n const warning = props.$warning;\n\n const defaultBgColor = props?.$backgroundColors?.[1] ?? props.theme.getColor('gray-200');\n\n switch (true) {\n case !error && !warning && !active:\n return defaultBgColor;\n\n case !error && !warning && active:\n return props.theme.getColor('white');\n\n case error && active:\n return props.theme.getColor('red-500');\n\n case error:\n return props.theme.getColor('red-200');\n\n case warning && active:\n return props.theme.getColor('signal-yellow-500');\n\n case warning:\n return props.theme.getColor('signal-yellow-400');\n\n default:\n return props.theme.getColor('gray-200');\n }\n }\n )}\n\n ${props =>\n props.theme.themeProp(\n 'color',\n () => {\n const defaultColor = props?.$colors?.[0] ?? props.theme.getColor('white');\n if ((props.$warning && !props.$error) || (props.error && !props.$active)) {\n return props.theme.getColor('gray-900');\n } else {\n return defaultColor;\n }\n },\n () => {\n const defaultColor = props?.$colors?.[1] ?? props.theme.getColor('gray-900');\n if (props.$error && props.$active) {\n return props.theme.getColor('white');\n } else {\n return defaultColor;\n }\n }\n )}\n`;\n\nexport const BadgeIcon = styled.span\n .withConfig({\n shouldForwardProp\n })\n .attrs(applyDefaultTheme)`\n display: flex;\n align-items: center;\n margin-right: ${props => (props.$useGutter ? '4px' : 0)};\n svg {\n height: 12px;\n }\n`;\n"],"names":["shouldForwardProp","prop","startsWith","Badge","styled","span","withConfig","attrs","applyDefaultTheme","props","$elevated","$hasChildren","theme","primaryFontFamily","BadgeChildrenContainer","BadgeLabel","$fontSize","$fontWeight","$lineHeight","$height","$width","css","$minWidth","$minHeight","verticalPadding","$verticalPadding","horizontalPadding","$horizontalPadding","themeProp","active","$active","error","$error","warning","$warning","defaultBgColor","backgroundColors","getColor","$backgroundColors","defaultColor","$colors","BadgeIcon","$useGutter"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"Badge.styled.js","sources":["../../../src/components/data/Badge/Badge.styled.js"],"sourcesContent":["import styled, { css } from 'styled-components';\nimport { applyDefaultTheme } from '../../../utils/defaultTheme';\n\nconst shouldForwardProp = prop => {\n return prop !== 'theme' && !prop.startsWith('$');\n};\n\nexport const Badge = styled.span\n .withConfig({\n shouldForwardProp\n })\n .attrs(applyDefaultTheme)`\n align-content: center;\n display: ${props => (props.$elevated || !props.$hasChildren ? 'inline-flex' : 'flex')};\n font-family: ${props => props.theme.primaryFontFamily};\n font-size: 1rem;\n font-weight: 500;\n min-height: 24px;\n position: relative;\n width: ${props => (props.$elevated ? 'fit-content' : 'initial')};\n`;\n\nexport const BadgeChildrenContainer = styled.span\n .withConfig({\n shouldForwardProp\n })\n .attrs(applyDefaultTheme)`\n align-self: center;\n height: fit-content;\n margin-right: 8px;\n`;\n\nexport const BadgeLabel = styled.span\n .withConfig({\n shouldForwardProp\n })\n .attrs(applyDefaultTheme)`\n border-radius: ${props => (props.$elevated ? '12px' : '14px')};\n display: flex;\n align-items: center;\n justify-content: center;\n box-sizing: border-box;\n\n font-size: ${props => {\n if (props.fontSize) {\n return `${props.fontSize}px`;\n } else {\n return props.elevated ? '0.625rem' : '0.750rem';\n }\n }};\n font-weight: ${props => (props.fontWeight ? props.fontWeight : 'normal')};\n line-height: ${props => (props.$lineHeight ? `${props.$lineHeight}px` : 'normal')};\n height: ${props => (props.height ? `${props.height}px` : 'fit-content')};\n letter-spacing: 0.32px;\n margin-left: ${props => (props.$elevated ? '15px' : 'auto')};\n position: ${props => (props.$elevated ? 'absolute' : 'initial')};\n right: 0;\n transform: ${props => (props.$elevated ? 'translate(33%, -8px)' : 'initial')};\n\n ${props =>\n props.width\n ? css`\n width: ${props.width}px;\n `\n : null}\n\n ${props =>\n props.$minWidth\n ? css`\n min-width: ${props.$minWidth}px;\n `\n : null}\n\n ${props =>\n props.minHeight\n ? css`\n min-height: ${props.minHeight}px;\n `\n : null}\n \n\n ${props => {\n const verticalPadding = props.verticalPadding\n ? `${props.verticalPadding}px`\n : props.$elevated\n ? '4px'\n : '6px';\n const horizontalPadding = props.$horizontalPadding\n ? `${props.$horizontalPadding}px`\n : props.$elevated\n ? '7px'\n : '10px';\n return css`\n padding: ${verticalPadding} ${horizontalPadding};\n `;\n }}\n\n ${props =>\n props.theme.themeProp(\n 'background',\n () => {\n const active = props.$active;\n const error = props.$error;\n const warning = props.$warning;\n\n const defaultBgColor = props?.backgroundColors?.[0] ?? props.theme.getColor('gray-600');\n\n switch (true) {\n case !error && !warning && !active:\n return defaultBgColor;\n\n case !error && !warning && active:\n return props.theme.getColor('gray-700');\n\n case error && active:\n return props.theme.getColor('red-500');\n\n case error:\n return props.theme.getColor('red-200');\n\n case warning && active:\n return props.theme.getColor('signal-yellow-500');\n\n case warning:\n return props.theme.getColor('signal-yellow-400');\n\n default:\n return props.theme.getColor('gray-600');\n }\n },\n () => {\n const active = props.$active;\n const error = props.$error;\n const warning = props.$warning;\n\n const defaultBgColor = props?.$backgroundColors?.[1] ?? props.theme.getColor('gray-200');\n\n switch (true) {\n case !error && !warning && !active:\n return defaultBgColor;\n\n case !error && !warning && active:\n return props.theme.getColor('white');\n\n case error && active:\n return props.theme.getColor('red-500');\n\n case error:\n return props.theme.getColor('red-200');\n\n case warning && active:\n return props.theme.getColor('signal-yellow-500');\n\n case warning:\n return props.theme.getColor('signal-yellow-400');\n\n default:\n return props.theme.getColor('gray-200');\n }\n }\n )}\n\n ${props =>\n props.theme.themeProp(\n 'color',\n () => {\n const defaultColor = props?.$colors?.[0] ?? props.theme.getColor('white');\n if ((props.$warning && !props.$error) || (props.error && !props.$active)) {\n return props.theme.getColor('gray-900');\n } else {\n return defaultColor;\n }\n },\n () => {\n const defaultColor = props?.$colors?.[1] ?? props.theme.getColor('gray-900');\n if (props.$error && props.$active) {\n return props.theme.getColor('white');\n } else {\n return defaultColor;\n }\n }\n )}\n`;\n\nexport const BadgeIcon = styled.span\n .withConfig({\n shouldForwardProp\n })\n .attrs(applyDefaultTheme)`\n display: flex;\n align-items: center;\n margin-right: ${props => (props.$useGutter ? '4px' : 0)};\n svg {\n height: 12px;\n }\n`;\n"],"names":["shouldForwardProp","prop","startsWith","Badge","styled","span","withConfig","attrs","applyDefaultTheme","props","$elevated","$hasChildren","theme","primaryFontFamily","BadgeChildrenContainer","BadgeLabel","fontSize","elevated","fontWeight","$lineHeight","height","width","css","$minWidth","minHeight","verticalPadding","horizontalPadding","$horizontalPadding","themeProp","active","$active","error","$error","warning","$warning","defaultBgColor","backgroundColors","getColor","$backgroundColors","defaultColor","$colors","BadgeIcon","$useGutter"],"mappings":"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"}
|
|
@@ -1,221 +1,241 @@
|
|
|
1
|
-
import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
|
|
2
1
|
import React__default, { useState, useEffect, useMemo } from 'react';
|
|
2
|
+
import { useTheme } from 'styled-components';
|
|
3
3
|
import PropTypes from 'prop-types';
|
|
4
4
|
import { nanoid } from 'nanoid';
|
|
5
5
|
import { components } from 'react-select';
|
|
6
|
-
import {
|
|
7
|
-
import { ReactComponent as SvgClose } from '../../icons/close.svg.js';
|
|
6
|
+
import { AsyncCreatableMultiSelect, AsyncMultiSelect, CreatableMultiSelect, MultiSelect as MultiSelect$1, MultiSelectWrapper, Label, InnerWrapper, ShowMoreWrapper, ShowMoreOverlay, ShowMoreText, ErrorMessage, DropdownOptionDeleteIcon, MultiValueWrapper } from './MultiSelect.styled.js';
|
|
8
7
|
|
|
9
|
-
const
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
onMultiValueClick,
|
|
32
|
-
showMore,
|
|
33
|
-
showMoreText = 'Show more',
|
|
34
|
-
displayTotalOnShowMore = true,
|
|
35
|
-
noOptionsMessageFunc,
|
|
36
|
-
...props
|
|
37
|
-
}, forwardedRef) {
|
|
8
|
+
const showMoreHeight = 114;
|
|
9
|
+
const MultiSelect = React__default.forwardRef((props, forwardedRef) => {
|
|
10
|
+
const theme = useTheme();
|
|
11
|
+
const {
|
|
12
|
+
label,
|
|
13
|
+
selectedOptions = [],
|
|
14
|
+
availableOptions,
|
|
15
|
+
loadOptions,
|
|
16
|
+
onUpdateCallback,
|
|
17
|
+
editText,
|
|
18
|
+
creatable,
|
|
19
|
+
readOnly,
|
|
20
|
+
disabled,
|
|
21
|
+
error,
|
|
22
|
+
warning,
|
|
23
|
+
onMultiValueClick,
|
|
24
|
+
showMore,
|
|
25
|
+
showMoreText = 'Show more',
|
|
26
|
+
displayTotalOnShowMore = true,
|
|
27
|
+
hidden,
|
|
28
|
+
...rest
|
|
29
|
+
} = props;
|
|
38
30
|
const [uniqueId] = useState(nanoid());
|
|
39
31
|
const [selected, setSelected] = useState(selectedOptions);
|
|
40
|
-
const [focused, setFocused] = useState(false);
|
|
41
|
-
const [displayShowMore, setDisplayShowMore] = useState(error || warning ? false : showMore);
|
|
42
32
|
const [cacheUnique, setCacheUnique] = useState(0);
|
|
43
|
-
const [
|
|
44
|
-
const [
|
|
45
|
-
const
|
|
46
|
-
useEffect(() =>
|
|
47
|
-
setSelected(selectedOptions);
|
|
48
|
-
}, [selectedOptions]);
|
|
33
|
+
const [displayShowMore, setDisplayShowMore] = useState(showMore && !error && !warning);
|
|
34
|
+
const [focused, setFocused] = useState(false);
|
|
35
|
+
const [isDarkMode, setIsDarkMode] = useState(() => document.body.classList.contains('dark-theme'));
|
|
36
|
+
useEffect(() => setSelected(selectedOptions), [selectedOptions]);
|
|
49
37
|
useEffect(() => {
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
38
|
+
const observer = new MutationObserver(() => {
|
|
39
|
+
setIsDarkMode(document.body.classList.contains('dark-theme'));
|
|
40
|
+
});
|
|
41
|
+
observer.observe(document.body, {
|
|
42
|
+
attributes: true,
|
|
43
|
+
attributeFilter: ['class']
|
|
44
|
+
});
|
|
45
|
+
return () => observer.disconnect();
|
|
46
|
+
}, []);
|
|
47
|
+
const selectStyles = useMemo(() => {
|
|
48
|
+
const color = key => theme?.getColor?.(key) || '#888';
|
|
49
|
+
const getThemeColor = (darkKey, lightKey) => {
|
|
50
|
+
const prefersDark = !document.body.classList.contains('light-theme') && !document.body.classList.contains('dark-theme') && window.matchMedia('(prefers-color-scheme: dark)').matches;
|
|
51
|
+
return isDarkMode || prefersDark ? color(darkKey) : color(lightKey);
|
|
52
|
+
};
|
|
53
|
+
const errorColor = color('red-500');
|
|
54
|
+
const warningColor = color('orange-500');
|
|
55
|
+
const menuBg = getThemeColor('gray-600', 'white');
|
|
56
|
+
const textColor = getThemeColor('gray-100', 'gray-900');
|
|
57
|
+
const placeholderColor = getThemeColor('gray-400', 'gray-500');
|
|
58
|
+
const multiValueBg = getThemeColor('gray-600', 'gray-800');
|
|
59
|
+
console.log('Theme in selectStyles:', {
|
|
60
|
+
menuBg,
|
|
61
|
+
textColor,
|
|
62
|
+
placeholderColor,
|
|
63
|
+
multiValueBg,
|
|
64
|
+
isDarkMode
|
|
65
|
+
});
|
|
66
|
+
return {
|
|
67
|
+
control: base => ({
|
|
68
|
+
...base,
|
|
69
|
+
alignItems: 'center',
|
|
70
|
+
background: 'transparent',
|
|
71
|
+
border: error ? `1px solid ${errorColor}` : warning ? `1px solid ${warningColor}` : 'none',
|
|
72
|
+
borderRadius: '3px',
|
|
73
|
+
boxShadow: 'none',
|
|
74
|
+
minHeight: '38px',
|
|
75
|
+
cursor: disabled || readOnly ? 'default' : 'pointer',
|
|
76
|
+
'&:hover': {
|
|
77
|
+
border: error ? `1px solid ${errorColor}` : warning ? `1px solid ${warningColor}` : 'none'
|
|
62
78
|
}
|
|
63
|
-
}
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
79
|
+
}),
|
|
80
|
+
valueContainer: base => ({
|
|
81
|
+
...base,
|
|
82
|
+
alignItems: 'center',
|
|
83
|
+
gap: '8px',
|
|
84
|
+
padding: '0 8px',
|
|
85
|
+
maxHeight: displayShowMore ? error || warning ? '100%' : `${showMoreHeight + 16}px` : '100%',
|
|
86
|
+
overflow: 'hidden'
|
|
87
|
+
}),
|
|
88
|
+
multiValue: base => ({
|
|
89
|
+
...base,
|
|
90
|
+
backgroundColor: multiValueBg,
|
|
91
|
+
borderRadius: '3px',
|
|
92
|
+
margin: '0',
|
|
93
|
+
display: 'flex',
|
|
94
|
+
alignItems: 'stretch',
|
|
95
|
+
minHeight: '26px',
|
|
96
|
+
overflow: 'hidden'
|
|
97
|
+
}),
|
|
98
|
+
multiValueLabel: base => ({
|
|
99
|
+
...base,
|
|
100
|
+
color: color('white'),
|
|
101
|
+
fontSize: '12px',
|
|
102
|
+
padding: disabled || readOnly ? '0 8px' : '0 3px 0 8px',
|
|
103
|
+
display: 'flex',
|
|
104
|
+
alignItems: 'center'
|
|
105
|
+
}),
|
|
106
|
+
multiValueRemove: base => ({
|
|
107
|
+
...base,
|
|
108
|
+
color: 'white',
|
|
109
|
+
padding: '0 8px 0 5px',
|
|
110
|
+
display: disabled || readOnly ? 'none' : 'flex',
|
|
111
|
+
alignItems: 'center',
|
|
112
|
+
alignSelf: 'stretch',
|
|
113
|
+
borderRadius: '0',
|
|
114
|
+
cursor: 'pointer',
|
|
115
|
+
'&:hover': {
|
|
116
|
+
backgroundColor: errorColor,
|
|
117
|
+
color: 'white'
|
|
118
|
+
}
|
|
119
|
+
}),
|
|
120
|
+
menu: base => ({
|
|
121
|
+
...base,
|
|
122
|
+
backgroundColor: menuBg,
|
|
123
|
+
boxShadow: '0 4px 12px rgba(0,0,0,0.5)',
|
|
124
|
+
zIndex: 999,
|
|
125
|
+
marginTop: '4px',
|
|
126
|
+
border: `1px solid ${getThemeColor('gray-500', 'gray-300')}`
|
|
127
|
+
}),
|
|
128
|
+
menuList: base => ({
|
|
129
|
+
...base,
|
|
130
|
+
backgroundColor: 'transparent',
|
|
131
|
+
padding: 0
|
|
132
|
+
}),
|
|
133
|
+
option: (base, state) => ({
|
|
134
|
+
...base,
|
|
135
|
+
backgroundColor: state.isFocused ? getThemeColor('gray-500', 'gray-100') : 'transparent',
|
|
136
|
+
color: textColor,
|
|
137
|
+
cursor: 'pointer',
|
|
138
|
+
fontSize: '14px',
|
|
139
|
+
padding: '8px 12px',
|
|
140
|
+
':active': {
|
|
141
|
+
backgroundColor: getThemeColor('gray-400', 'gray-200')
|
|
142
|
+
}
|
|
143
|
+
}),
|
|
144
|
+
input: (base, state) => ({
|
|
145
|
+
...base,
|
|
146
|
+
display: 'inline-grid',
|
|
147
|
+
whiteSpace: 'nowrap',
|
|
148
|
+
color: textColor,
|
|
149
|
+
margin: 0,
|
|
150
|
+
padding: 0,
|
|
151
|
+
':before': !focused && editText && !state.value ? {
|
|
152
|
+
content: `"${editText}"`,
|
|
153
|
+
color: placeholderColor,
|
|
154
|
+
marginRight: '8px',
|
|
155
|
+
lineHeight: '26px',
|
|
156
|
+
gridArea: '1 / 1'
|
|
157
|
+
} : {}
|
|
158
|
+
}),
|
|
159
|
+
noOptionsMessage: base => ({
|
|
160
|
+
...base,
|
|
161
|
+
color: textColor,
|
|
162
|
+
backgroundColor: 'transparent'
|
|
163
|
+
}),
|
|
164
|
+
loadingMessage: base => ({
|
|
165
|
+
...base,
|
|
166
|
+
color: textColor,
|
|
167
|
+
backgroundColor: 'transparent'
|
|
168
|
+
}),
|
|
169
|
+
placeholder: () => ({
|
|
170
|
+
display: 'none'
|
|
171
|
+
}),
|
|
172
|
+
indicatorsContainer: () => ({
|
|
173
|
+
display: 'none'
|
|
174
|
+
})
|
|
68
175
|
};
|
|
69
|
-
}, [readOnly,
|
|
70
|
-
const getNoOptionsMessage = inputValue => {
|
|
71
|
-
if (typeof noOptionsMessageFunc === 'function') {
|
|
72
|
-
return noOptionsMessageFunc(inputValue);
|
|
73
|
-
}
|
|
74
|
-
return inputValue ? `No matches for "${inputValue}"` : 'No available options';
|
|
75
|
-
};
|
|
176
|
+
}, [theme, error, warning, displayShowMore, disabled, readOnly, editText, focused, isDarkMode]);
|
|
76
177
|
const innerComponents = {
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
178
|
+
Option: optProps => React__default.createElement(components.Option, optProps, React__default.createElement("div", {
|
|
179
|
+
style: {
|
|
180
|
+
display: 'flex',
|
|
181
|
+
justifyContent: 'space-between',
|
|
182
|
+
width: '100%',
|
|
183
|
+
alignItems: 'center'
|
|
184
|
+
}
|
|
185
|
+
}, React__default.createElement("span", null, optProps.label), optProps.isSelected && React__default.createElement(DropdownOptionDeleteIcon, null))),
|
|
186
|
+
MultiValue: mvProps => React__default.createElement(MultiValueWrapper, {
|
|
187
|
+
onMouseDown: e => {
|
|
188
|
+
if (onMultiValueClick && !readOnly && !disabled && !e.target.closest('.multi-select__multi-value__remove')) {
|
|
189
|
+
e.stopPropagation();
|
|
190
|
+
onMultiValueClick(mvProps.data);
|
|
89
191
|
}
|
|
90
|
-
}
|
|
91
|
-
|
|
92
|
-
$isDisabled: disabled,
|
|
93
|
-
$isReadOnly: readOnly
|
|
94
|
-
}, props)));
|
|
95
|
-
},
|
|
96
|
-
MultiValueRemove: props => {
|
|
97
|
-
if (readOnly || disabled) return null;
|
|
98
|
-
return React__default.createElement(components.MultiValueRemove, props, React__default.createElement(SvgClose, null));
|
|
99
|
-
},
|
|
100
|
-
Input: inputProps => React__default.createElement(InputWrapper, {
|
|
101
|
-
$focused: focused,
|
|
102
|
-
$editText: !readOnly && !disabled ? editText : '',
|
|
103
|
-
$isDisabled: readOnly || disabled,
|
|
104
|
-
$isMenuOpen: isMenuOpen
|
|
105
|
-
}, React__default.createElement(components.Input, inputProps)),
|
|
106
|
-
Menu: menuProps => React__default.createElement(DropdownMenu, menuProps),
|
|
107
|
-
Option: optProps => optProps.isSelected ? React__default.createElement(SelectedOption, optProps, React__default.createElement("span", null, optProps.label), React__default.createElement(DropdownOptionDeleteIcon, null)) : React__default.createElement(Option, optProps)
|
|
192
|
+
}
|
|
193
|
+
}, React__default.createElement(components.MultiValue, mvProps))
|
|
108
194
|
};
|
|
109
|
-
const
|
|
110
|
-
|
|
111
|
-
...base,
|
|
112
|
-
alignItems: 'flex-start',
|
|
113
|
-
background: 'transparent',
|
|
114
|
-
border: 'none',
|
|
115
|
-
boxShadow: 'none',
|
|
116
|
-
minHeight: 'unset'
|
|
117
|
-
}),
|
|
118
|
-
valueContainer: base => ({
|
|
119
|
-
...base,
|
|
120
|
-
padding: 0,
|
|
121
|
-
gap: '8px',
|
|
122
|
-
maxHeight: displayShowMore && !(error || warning) ? '130px' : '100%'
|
|
123
|
-
}),
|
|
124
|
-
menu: base => ({
|
|
125
|
-
...base,
|
|
126
|
-
backgroundColor: 'transparent',
|
|
127
|
-
boxShadow: 'none'
|
|
128
|
-
}),
|
|
129
|
-
menuList: base => ({
|
|
130
|
-
...base,
|
|
131
|
-
backgroundColor: 'transparent'
|
|
132
|
-
}),
|
|
133
|
-
option: base => ({
|
|
134
|
-
...base,
|
|
135
|
-
backgroundColor: 'transparent',
|
|
136
|
-
color: 'inherit'
|
|
137
|
-
}),
|
|
138
|
-
multiValue: base => ({
|
|
139
|
-
...base,
|
|
140
|
-
margin: 0,
|
|
141
|
-
border: 'none',
|
|
142
|
-
background: 'none'
|
|
143
|
-
}),
|
|
144
|
-
multiValueLabel: base => ({
|
|
145
|
-
...base,
|
|
146
|
-
padding: 0
|
|
147
|
-
}),
|
|
148
|
-
multiValueRemove: base => ({
|
|
149
|
-
...base,
|
|
150
|
-
padding: 0,
|
|
151
|
-
cursor: 'pointer'
|
|
152
|
-
})
|
|
153
|
-
}), [error, warning, displayShowMore]);
|
|
154
|
-
const sharedProps = {
|
|
155
|
-
...props,
|
|
195
|
+
const sharedSelectProps = {
|
|
196
|
+
...rest,
|
|
156
197
|
ref: forwardedRef,
|
|
198
|
+
id: uniqueId,
|
|
157
199
|
classNamePrefix: 'multi-select',
|
|
200
|
+
styles: selectStyles,
|
|
201
|
+
components: innerComponents,
|
|
158
202
|
value: selected,
|
|
159
203
|
options: loadOptions ? undefined : availableOptions,
|
|
160
204
|
loadOptions,
|
|
161
|
-
loadingMessage: loadingMessageFunc,
|
|
162
|
-
theme: reactSelectTheme,
|
|
163
|
-
styles: selectStyles,
|
|
164
|
-
components: innerComponents,
|
|
165
205
|
isMulti: true,
|
|
166
|
-
|
|
167
|
-
placeholder: null,
|
|
168
|
-
isDisabled: disabled,
|
|
169
|
-
readOnly: readOnly,
|
|
206
|
+
isDisabled: disabled || readOnly,
|
|
170
207
|
closeMenuOnSelect: false,
|
|
171
208
|
hideSelectedOptions: false,
|
|
172
|
-
openMenuOnClick:
|
|
173
|
-
openMenuOnFocus: false,
|
|
174
|
-
blurInputOnSelect: false,
|
|
175
|
-
menuIsOpen: controlledMenuIsOpen,
|
|
176
|
-
cacheUniqs: loadOptions ? [cacheUnique] : undefined,
|
|
177
|
-
onMenuOpen: () => {
|
|
178
|
-
setIsMenuOpen(true);
|
|
179
|
-
setControlledMenuIsOpen(true);
|
|
180
|
-
},
|
|
181
|
-
onMenuClose: () => {
|
|
182
|
-
setIsMenuOpen(false);
|
|
183
|
-
setControlledMenuIsOpen(false);
|
|
184
|
-
},
|
|
209
|
+
openMenuOnClick: true,
|
|
185
210
|
onFocus: () => setFocused(true),
|
|
186
211
|
onBlur: () => setFocused(false),
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
}) => getNoOptionsMessage(inputValue),
|
|
190
|
-
onChange: (selectedOptions, actionMeta) => {
|
|
191
|
-
if (props.onChange) {
|
|
192
|
-
props.onChange(selectedOptions, actionMeta);
|
|
193
|
-
}
|
|
212
|
+
onChange: (newValue, actionMeta) => {
|
|
213
|
+
setSelected(newValue);
|
|
194
214
|
if (onUpdateCallback) {
|
|
195
|
-
const
|
|
196
|
-
onUpdateCallback(actionMeta.action,
|
|
215
|
+
const item = actionMeta.option || actionMeta.removedValue;
|
|
216
|
+
onUpdateCallback(actionMeta.action, item);
|
|
197
217
|
}
|
|
198
|
-
setSelected(selectedOptions);
|
|
199
218
|
if (actionMeta.action === 'create-option' && loadOptions) {
|
|
200
|
-
setCacheUnique(
|
|
219
|
+
setCacheUnique(c => c + 1);
|
|
201
220
|
}
|
|
202
|
-
}
|
|
221
|
+
},
|
|
222
|
+
cacheUniqs: loadOptions ? [cacheUnique] : undefined
|
|
203
223
|
};
|
|
224
|
+
const SelectComponent = useMemo(() => {
|
|
225
|
+
if (loadOptions) return creatable ? AsyncCreatableMultiSelect : AsyncMultiSelect;
|
|
226
|
+
return creatable ? CreatableMultiSelect : MultiSelect$1;
|
|
227
|
+
}, [loadOptions, creatable]);
|
|
204
228
|
if (hidden) return null;
|
|
205
|
-
return React__default.createElement(MultiSelectWrapper, {
|
|
206
|
-
ref: wrapperRef
|
|
207
|
-
}, label && React__default.createElement(Label, {
|
|
229
|
+
return React__default.createElement(MultiSelectWrapper, null, label && React__default.createElement(Label, {
|
|
208
230
|
htmlFor: uniqueId
|
|
209
|
-
}, label), React__default.createElement(InnerWrapper, {
|
|
210
|
-
$error: error,
|
|
211
|
-
$warning: warning
|
|
212
|
-
}, loadOptions ? creatable ? React__default.createElement(AsyncCreatableMultiSelect, sharedProps) : React__default.createElement(AsyncMultiSelect, sharedProps) : creatable ? React__default.createElement(CreatableMultiSelect, sharedProps) : React__default.createElement(MultiSelect$1, sharedProps)), displayShowMore && !(error || warning) && React__default.createElement(ShowMoreWrapper, {
|
|
231
|
+
}, label), React__default.createElement(InnerWrapper, null, React__default.createElement(SelectComponent, sharedSelectProps)), displayShowMore && React__default.createElement(ShowMoreWrapper, {
|
|
213
232
|
onClick: () => setDisplayShowMore(false)
|
|
214
|
-
}, React__default.createElement(ShowMoreOverlay, null), React__default.createElement(ShowMoreText, null, showMoreText, " ", displayTotalOnShowMore && `(${selected.length})`)), (
|
|
215
|
-
$error: error,
|
|
216
|
-
$warning: warning
|
|
217
|
-
}, error
|
|
233
|
+
}, React__default.createElement(ShowMoreOverlay, null), React__default.createElement(ShowMoreText, null, showMoreText, " ", displayTotalOnShowMore && `(${selected.length})`)), (error || warning) && React__default.createElement(ErrorMessage, {
|
|
234
|
+
$error: !!error,
|
|
235
|
+
$warning: !!warning
|
|
236
|
+
}, error || warning));
|
|
218
237
|
});
|
|
238
|
+
MultiSelect.displayName = 'MultiSelect';
|
|
219
239
|
MultiSelect.propTypes = process.env.NODE_ENV !== "production" ? {
|
|
220
240
|
label: PropTypes.string,
|
|
221
241
|
availableOptions: PropTypes.arrayOf(PropTypes.object),
|
|
@@ -235,8 +255,7 @@ MultiSelect.propTypes = process.env.NODE_ENV !== "production" ? {
|
|
|
235
255
|
hidden: PropTypes.bool,
|
|
236
256
|
disabled: PropTypes.bool,
|
|
237
257
|
error: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]),
|
|
238
|
-
warning: PropTypes.oneOfType([PropTypes.bool, PropTypes.string])
|
|
239
|
-
onChange: PropTypes.func
|
|
258
|
+
warning: PropTypes.oneOfType([PropTypes.bool, PropTypes.string])
|
|
240
259
|
} : {};
|
|
241
260
|
MultiSelect.defaultProps = {
|
|
242
261
|
noOptionsMessageFunc: inputValue => {
|