@veeqo/ui 10.0.0-beta.8 → 10.0.0
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/dist/components/Alerts/MiniAlert/MiniAlert.cjs +3 -2
- package/dist/components/Alerts/MiniAlert/MiniAlert.cjs.map +1 -1
- package/dist/components/Alerts/MiniAlert/MiniAlert.js +3 -2
- package/dist/components/Alerts/MiniAlert/MiniAlert.js.map +1 -1
- package/dist/components/SelectDropdown/SelectDropdown.cjs +13 -10
- package/dist/components/SelectDropdown/SelectDropdown.cjs.map +1 -1
- package/dist/components/SelectDropdown/SelectDropdown.js +14 -11
- package/dist/components/SelectDropdown/SelectDropdown.js.map +1 -1
- package/dist/components/SelectDropdown/index.d.ts +1 -27
- package/dist/components/SelectDropdown/types.d.ts +16 -9
- package/dist/components/SelectDropdown/utils.cjs +24 -0
- package/dist/components/SelectDropdown/utils.cjs.map +1 -1
- package/dist/components/SelectDropdown/utils.d.ts +2 -0
- package/dist/components/SelectDropdown/utils.js +23 -1
- package/dist/components/SelectDropdown/utils.js.map +1 -1
- package/package.json +1 -1
- package/dist/components/Alerts/MiniAlert/styled.cjs +0 -13
- package/dist/components/Alerts/MiniAlert/styled.cjs.map +0 -1
- package/dist/components/Alerts/MiniAlert/styled.d.ts +0 -1
- package/dist/components/Alerts/MiniAlert/styled.js +0 -7
- package/dist/components/Alerts/MiniAlert/styled.js.map +0 -1
|
@@ -1,20 +1,21 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
3
|
var React = require('react');
|
|
4
|
+
var FlexRow = require('../../Flex/FlexRow/FlexRow.cjs');
|
|
4
5
|
var constants = require('../constants.cjs');
|
|
5
6
|
var Text = require('../../Text/Text.cjs');
|
|
6
7
|
var constants$1 = require('./constants.cjs');
|
|
7
|
-
var styled = require('./styled.cjs');
|
|
8
8
|
|
|
9
9
|
function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
|
|
10
10
|
|
|
11
11
|
var React__default = /*#__PURE__*/_interopDefaultCompat(React);
|
|
12
12
|
|
|
13
|
+
// Will need to use themeInjector every time this component is used
|
|
13
14
|
const MiniAlert = ({ title, variant = 'default', iconSlot, customTitleColour, customIconColour, }) => {
|
|
14
15
|
const IconSlot = iconSlot || constants.IconMap[variant];
|
|
15
16
|
const iconColour = customIconColour !== null && customIconColour !== undefined ? customIconColour : constants.ColourMap[variant].primary;
|
|
16
17
|
const titleColour = customTitleColour !== null && customTitleColour !== undefined ? customTitleColour : constants$1.TextColourMap[variant];
|
|
17
|
-
return (React__default.default.createElement(
|
|
18
|
+
return (React__default.default.createElement(FlexRow.FlexRow, { gap: "xs" },
|
|
18
19
|
React__default.default.createElement(IconSlot, { "aria-hidden": true, color: iconColour, style: constants$1.IconStyles }),
|
|
19
20
|
React__default.default.createElement(Text.Text, { variant: "bodySmallBold", style: { color: titleColour } }, title)));
|
|
20
21
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"MiniAlert.cjs","sources":["../../../../src/components/Alerts/MiniAlert/MiniAlert.tsx"],"sourcesContent":["import React from 'react';\nimport { ColourMap, IconMap } from '../constants';\nimport { Text } from '../../Text';\nimport { MiniAlertProps } from './types';\nimport { IconStyles, TextColourMap } from './constants';\
|
|
1
|
+
{"version":3,"file":"MiniAlert.cjs","sources":["../../../../src/components/Alerts/MiniAlert/MiniAlert.tsx"],"sourcesContent":["import React from 'react';\nimport { FlexRow } from '../../Flex/FlexRow';\nimport { ColourMap, IconMap } from '../constants';\nimport { Text } from '../../Text';\n\nimport { MiniAlertProps } from './types';\nimport { IconStyles, TextColourMap } from './constants';\n\n// Will need to use themeInjector every time this component is used\nexport const MiniAlert = ({\n title,\n variant = 'default',\n iconSlot,\n customTitleColour,\n customIconColour,\n}: MiniAlertProps) => {\n const IconSlot = iconSlot || IconMap[variant];\n const iconColour = customIconColour ?? ColourMap[variant].primary;\n const titleColour = customTitleColour ?? TextColourMap[variant];\n return (\n <FlexRow gap=\"xs\">\n <IconSlot aria-hidden color={iconColour} style={IconStyles} />\n <Text variant=\"bodySmallBold\" style={{ color: titleColour }}>\n {title}\n </Text>\n </FlexRow>\n );\n};\n"],"names":["IconMap","ColourMap","TextColourMap","React","FlexRow","IconStyles","Text"],"mappings":";;;;;;;;;;;;AAQA;AACa,MAAA,SAAS,GAAG,CAAC,EACxB,KAAK,EACL,OAAO,GAAG,SAAS,EACnB,QAAQ,EACR,iBAAiB,EACjB,gBAAgB,GACD,KAAI;IACnB,MAAM,QAAQ,GAAG,QAAQ,IAAIA,iBAAO,CAAC,OAAO,CAAC;AAC7C,IAAA,MAAM,UAAU,GAAG,gBAAgB,KAAA,IAAA,IAAhB,gBAAgB,KAAhB,SAAA,GAAA,gBAAgB,GAAIC,mBAAS,CAAC,OAAO,CAAC,CAAC,OAAO;AACjE,IAAA,MAAM,WAAW,GAAG,iBAAiB,KAAA,IAAA,IAAjB,iBAAiB,KAAA,SAAA,GAAjB,iBAAiB,GAAIC,yBAAa,CAAC,OAAO,CAAC;AAC/D,IAAA,QACEC,sBAAC,CAAA,aAAA,CAAAC,eAAO,EAAC,EAAA,GAAG,EAAC,IAAI,EAAA;QACfD,sBAAC,CAAA,aAAA,CAAA,QAAQ,yBAAa,KAAK,EAAE,UAAU,EAAE,KAAK,EAAEE,sBAAU,EAAI,CAAA;AAC9D,QAAAF,sBAAA,CAAA,aAAA,CAACG,SAAI,EAAC,EAAA,OAAO,EAAC,eAAe,EAAC,KAAK,EAAE,EAAE,KAAK,EAAE,WAAW,EAAE,EAAA,EACxD,KAAK,CACD,CACC;AAEd;;;;"}
|
|
@@ -1,14 +1,15 @@
|
|
|
1
1
|
import React__default from 'react';
|
|
2
|
+
import { FlexRow } from '../../Flex/FlexRow/FlexRow.js';
|
|
2
3
|
import { ColourMap, IconMap } from '../constants.js';
|
|
3
4
|
import { Text } from '../../Text/Text.js';
|
|
4
5
|
import { IconStyles, TextColourMap } from './constants.js';
|
|
5
|
-
import { MiniAlertContainer } from './styled.js';
|
|
6
6
|
|
|
7
|
+
// Will need to use themeInjector every time this component is used
|
|
7
8
|
const MiniAlert = ({ title, variant = 'default', iconSlot, customTitleColour, customIconColour, }) => {
|
|
8
9
|
const IconSlot = iconSlot || IconMap[variant];
|
|
9
10
|
const iconColour = customIconColour !== null && customIconColour !== undefined ? customIconColour : ColourMap[variant].primary;
|
|
10
11
|
const titleColour = customTitleColour !== null && customTitleColour !== undefined ? customTitleColour : TextColourMap[variant];
|
|
11
|
-
return (React__default.createElement(
|
|
12
|
+
return (React__default.createElement(FlexRow, { gap: "xs" },
|
|
12
13
|
React__default.createElement(IconSlot, { "aria-hidden": true, color: iconColour, style: IconStyles }),
|
|
13
14
|
React__default.createElement(Text, { variant: "bodySmallBold", style: { color: titleColour } }, title)));
|
|
14
15
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"MiniAlert.js","sources":["../../../../src/components/Alerts/MiniAlert/MiniAlert.tsx"],"sourcesContent":["import React from 'react';\nimport { ColourMap, IconMap } from '../constants';\nimport { Text } from '../../Text';\nimport { MiniAlertProps } from './types';\nimport { IconStyles, TextColourMap } from './constants';\
|
|
1
|
+
{"version":3,"file":"MiniAlert.js","sources":["../../../../src/components/Alerts/MiniAlert/MiniAlert.tsx"],"sourcesContent":["import React from 'react';\nimport { FlexRow } from '../../Flex/FlexRow';\nimport { ColourMap, IconMap } from '../constants';\nimport { Text } from '../../Text';\n\nimport { MiniAlertProps } from './types';\nimport { IconStyles, TextColourMap } from './constants';\n\n// Will need to use themeInjector every time this component is used\nexport const MiniAlert = ({\n title,\n variant = 'default',\n iconSlot,\n customTitleColour,\n customIconColour,\n}: MiniAlertProps) => {\n const IconSlot = iconSlot || IconMap[variant];\n const iconColour = customIconColour ?? ColourMap[variant].primary;\n const titleColour = customTitleColour ?? TextColourMap[variant];\n return (\n <FlexRow gap=\"xs\">\n <IconSlot aria-hidden color={iconColour} style={IconStyles} />\n <Text variant=\"bodySmallBold\" style={{ color: titleColour }}>\n {title}\n </Text>\n </FlexRow>\n );\n};\n"],"names":["React"],"mappings":";;;;;;AAQA;AACa,MAAA,SAAS,GAAG,CAAC,EACxB,KAAK,EACL,OAAO,GAAG,SAAS,EACnB,QAAQ,EACR,iBAAiB,EACjB,gBAAgB,GACD,KAAI;IACnB,MAAM,QAAQ,GAAG,QAAQ,IAAI,OAAO,CAAC,OAAO,CAAC;AAC7C,IAAA,MAAM,UAAU,GAAG,gBAAgB,KAAA,IAAA,IAAhB,gBAAgB,KAAhB,SAAA,GAAA,gBAAgB,GAAI,SAAS,CAAC,OAAO,CAAC,CAAC,OAAO;AACjE,IAAA,MAAM,WAAW,GAAG,iBAAiB,KAAA,IAAA,IAAjB,iBAAiB,KAAA,SAAA,GAAjB,iBAAiB,GAAI,aAAa,CAAC,OAAO,CAAC;AAC/D,IAAA,QACEA,cAAC,CAAA,aAAA,CAAA,OAAO,EAAC,EAAA,GAAG,EAAC,IAAI,EAAA;QACfA,cAAC,CAAA,aAAA,CAAA,QAAQ,yBAAa,KAAK,EAAE,UAAU,EAAE,KAAK,EAAE,UAAU,EAAI,CAAA;AAC9D,QAAAA,cAAA,CAAA,aAAA,CAAC,IAAI,EAAC,EAAA,OAAO,EAAC,eAAe,EAAC,KAAK,EAAE,EAAE,KAAK,EAAE,WAAW,EAAE,EAAA,EACxD,KAAK,CACD,CACC;AAEd;;;;"}
|
|
@@ -14,30 +14,33 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
|
|
|
14
14
|
|
|
15
15
|
var React__default = /*#__PURE__*/_interopDefaultCompat(React);
|
|
16
16
|
|
|
17
|
+
/* eslint-disable react/destructuring-assignment */
|
|
17
18
|
const SelectDropdown = ({ id, className, placeholder = 'Select item', multiple = false, compact = false, hasError = false, disabled, options, value, actions, isLoading = false, searchValue, emptyStateSlot, onSearchChange, onChange, 'aria-labelledby': ariaLabelledBy, 'aria-describedby': ariaDescribedBy, ...otherProps }) => {
|
|
18
19
|
const hasSection = options.flatMap((option) => option).some((item) => 'items' in item);
|
|
19
20
|
const classNames = utils.generateClassNames(className);
|
|
20
21
|
const [isSelectOpen, setIsSelectOpen] = React.useState(false);
|
|
21
|
-
const
|
|
22
|
+
const selectedValues = utils.getSelectedValues(options, hasSection, value);
|
|
22
23
|
const selectionMode = multiple ? 'multiple' : 'single';
|
|
23
24
|
const onSelectionChange = React.useCallback((keys) => {
|
|
24
25
|
const selectedKeys = Array.from(keys);
|
|
25
|
-
const newSelectedValues = utils.
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
26
|
+
const newSelectedValues = utils.getSelectedValues(options, hasSection, selectedKeys);
|
|
27
|
+
if (multiple) {
|
|
28
|
+
onChange(newSelectedValues);
|
|
29
|
+
}
|
|
30
|
+
else {
|
|
31
|
+
onChange(newSelectedValues[0]);
|
|
32
|
+
setIsSelectOpen(false);
|
|
33
|
+
}
|
|
34
|
+
}, [options, hasSection, multiple, onChange]);
|
|
32
35
|
return (React__default.default.createElement(styled.StyledDropdown, { id: `select-dropdown-${id}`, className: buildClassnames.buildClassnames([classNames === null || classNames === undefined ? undefined : classNames.popover, className]), shouldShow: isSelectOpen, setShouldShow: setIsSelectOpen, useAnchorWidth: true, disabled: disabled, renderCta: (buttonProps, anchorRef) => (React__default.default.createElement(styled.StyledSelectButton, { ...buttonProps, hasError: hasError, compact: compact, type: "button", ref: anchorRef, className: buildClassnames.buildClassnames([classNames === null || classNames === undefined ? undefined : classNames.button, className]) },
|
|
33
36
|
React__default.default.createElement(SelectedOption.SelectedOption, { placeholder: placeholder, options: selectedValues, selectionMode: selectionMode }))) },
|
|
34
37
|
onSearchChange && (React__default.default.createElement(React__default.default.Fragment, null,
|
|
35
38
|
React__default.default.createElement(styled.StyledSearch, { value: searchValue, onChange: onSearchChange }),
|
|
36
39
|
React__default.default.createElement(styled.Separator, null))),
|
|
37
40
|
React__default.default.createElement(styled.StyledListBox, { className: buildClassnames.buildClassnames([classNames === null || classNames === undefined ? undefined : classNames.optionsContainer, className]), "aria-labelledby": ariaLabelledBy !== null && ariaLabelledBy !== undefined ? ariaLabelledBy : `${id}-label`, "aria-describedby": ariaDescribedBy !== null && ariaDescribedBy !== undefined ? ariaDescribedBy : `${id}-hint`, selectionMode: selectionMode, items: options, onSelectionChange: onSelectionChange, selectedKeys: selectedValues.map((selectedValue) => selectedValue.id), renderEmptyState: () => (React__default.default.createElement(SelectDropdownState.SelectDropdownState, { isLoading: isLoading, emptyStateSlot: emptyStateSlot })), ...otherProps }, (item) => hasSection ? (React__default.default.createElement(ListItemSection.ListItemSection, { ...item })) : (React__default.default.createElement(ListItem.ListItem, { ...item }))), actions === null || actions === undefined ? undefined :
|
|
38
|
-
actions.map(({ label, ...
|
|
41
|
+
actions.map(({ label, ...actionProps }) => (React__default.default.createElement(React__default.default.Fragment, null,
|
|
39
42
|
React__default.default.createElement(styled.Separator, { key: `seperator-${label}` }),
|
|
40
|
-
React__default.default.createElement(styled.CTAButton, { key: label, ...
|
|
43
|
+
React__default.default.createElement(styled.CTAButton, { key: label, ...actionProps }))))));
|
|
41
44
|
};
|
|
42
45
|
|
|
43
46
|
exports.SelectDropdown = SelectDropdown;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SelectDropdown.cjs","sources":["../../../src/components/SelectDropdown/SelectDropdown.tsx"],"sourcesContent":["
|
|
1
|
+
{"version":3,"file":"SelectDropdown.cjs","sources":["../../../src/components/SelectDropdown/SelectDropdown.tsx"],"sourcesContent":["/* eslint-disable react/destructuring-assignment */\nimport React, { useCallback, useState } from 'react';\nimport { Key, Selection } from 'react-aria-components';\n\nimport { buildClassnames } from '../../utils';\nimport { SelectedOption } from './components/SelectedOption';\nimport { generateClassNames, getSelectedValues } from './utils';\nimport {\n CTAButton,\n Separator,\n StyledDropdown,\n StyledSelectButton,\n StyledListBox,\n StyledSearch,\n} from './styled';\nimport { SelectDropdownItem, SelectDropdownProps } from './types';\nimport { ListItemSection, ListItemSectionProps } from './ListItemSection/ListItemSection';\nimport { ListItem } from './ListItem';\nimport { ListItemProps } from './ListItem/types';\nimport { SelectDropdownState } from './components/SelectDropdownState';\n\nexport const SelectDropdown = ({\n id,\n className,\n placeholder = 'Select item',\n multiple = false,\n compact = false,\n hasError = false,\n disabled,\n options,\n value,\n actions,\n isLoading = false,\n searchValue,\n emptyStateSlot,\n onSearchChange,\n onChange,\n 'aria-labelledby': ariaLabelledBy,\n 'aria-describedby': ariaDescribedBy,\n ...otherProps\n}: SelectDropdownProps) => {\n const hasSection = options.flatMap((option) => option).some((item) => 'items' in item);\n const classNames = generateClassNames(className);\n\n const [isSelectOpen, setIsSelectOpen] = useState(false);\n\n const selectedValues = getSelectedValues(options, hasSection, value);\n const selectionMode = multiple ? 'multiple' : 'single';\n\n const onSelectionChange = useCallback(\n (keys: Selection) => {\n const selectedKeys = Array.from(keys);\n const newSelectedValues = getSelectedValues(options, hasSection, selectedKeys);\n\n if (multiple) {\n (onChange as (items: SelectDropdownItem[]) => void)(newSelectedValues);\n } else {\n (onChange as (item: SelectDropdownItem) => void)(newSelectedValues[0]);\n setIsSelectOpen(false);\n }\n },\n [options, hasSection, multiple, onChange],\n );\n\n return (\n <StyledDropdown\n id={`select-dropdown-${id}`}\n className={buildClassnames([classNames?.popover, className])}\n shouldShow={isSelectOpen}\n setShouldShow={setIsSelectOpen}\n useAnchorWidth\n disabled={disabled}\n renderCta={(buttonProps, anchorRef) => (\n <StyledSelectButton\n {...buttonProps}\n hasError={hasError}\n compact={compact}\n type=\"button\"\n ref={anchorRef}\n className={buildClassnames([classNames?.button, className])}\n >\n <SelectedOption\n placeholder={placeholder}\n options={selectedValues}\n selectionMode={selectionMode}\n />\n </StyledSelectButton>\n )}\n >\n {onSearchChange && (\n <>\n <StyledSearch value={searchValue} onChange={onSearchChange} />\n <Separator />\n </>\n )}\n <StyledListBox\n className={buildClassnames([classNames?.optionsContainer, className])}\n aria-labelledby={ariaLabelledBy ?? `${id}-label`}\n aria-describedby={ariaDescribedBy ?? `${id}-hint`}\n selectionMode={selectionMode}\n items={options}\n onSelectionChange={onSelectionChange}\n selectedKeys={selectedValues.map((selectedValue) => selectedValue.id) as Key[]}\n renderEmptyState={() => (\n <SelectDropdownState isLoading={isLoading} emptyStateSlot={emptyStateSlot} />\n )}\n {...otherProps}\n >\n {(item) =>\n hasSection ? (\n <ListItemSection {...(item as ListItemSectionProps)} />\n ) : (\n <ListItem {...(item as ListItemProps)} />\n )\n }\n </StyledListBox>\n {actions?.map(({ label, ...actionProps }) => (\n <>\n <Separator key={`seperator-${label}`} />\n <CTAButton key={label} {...actionProps} />\n </>\n ))}\n </StyledDropdown>\n );\n};\n"],"names":["generateClassNames","useState","getSelectedValues","useCallback","React","StyledDropdown","buildClassnames","StyledSelectButton","SelectedOption","StyledSearch","Separator","StyledListBox","SelectDropdownState","ListItemSection","ListItem","CTAButton"],"mappings":"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"}
|
|
@@ -2,36 +2,39 @@ import React__default, { useState, useCallback } from 'react';
|
|
|
2
2
|
import { buildClassnames } from '../../utils/buildClassnames.js';
|
|
3
3
|
import 'uid/secure';
|
|
4
4
|
import { SelectedOption } from './components/SelectedOption.js';
|
|
5
|
-
import {
|
|
5
|
+
import { getSelectedValues, generateClassNames } from './utils.js';
|
|
6
6
|
import { StyledDropdown, StyledSelectButton, StyledSearch, Separator, StyledListBox, CTAButton } from './styled.js';
|
|
7
7
|
import { ListItemSection } from './ListItemSection/ListItemSection.js';
|
|
8
8
|
import { ListItem } from './ListItem/ListItem.js';
|
|
9
9
|
import { SelectDropdownState } from './components/SelectDropdownState.js';
|
|
10
10
|
|
|
11
|
+
/* eslint-disable react/destructuring-assignment */
|
|
11
12
|
const SelectDropdown = ({ id, className, placeholder = 'Select item', multiple = false, compact = false, hasError = false, disabled, options, value, actions, isLoading = false, searchValue, emptyStateSlot, onSearchChange, onChange, 'aria-labelledby': ariaLabelledBy, 'aria-describedby': ariaDescribedBy, ...otherProps }) => {
|
|
12
13
|
const hasSection = options.flatMap((option) => option).some((item) => 'items' in item);
|
|
13
14
|
const classNames = generateClassNames(className);
|
|
14
15
|
const [isSelectOpen, setIsSelectOpen] = useState(false);
|
|
15
|
-
const
|
|
16
|
+
const selectedValues = getSelectedValues(options, hasSection, value);
|
|
16
17
|
const selectionMode = multiple ? 'multiple' : 'single';
|
|
17
18
|
const onSelectionChange = useCallback((keys) => {
|
|
18
19
|
const selectedKeys = Array.from(keys);
|
|
19
|
-
const newSelectedValues =
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
20
|
+
const newSelectedValues = getSelectedValues(options, hasSection, selectedKeys);
|
|
21
|
+
if (multiple) {
|
|
22
|
+
onChange(newSelectedValues);
|
|
23
|
+
}
|
|
24
|
+
else {
|
|
25
|
+
onChange(newSelectedValues[0]);
|
|
26
|
+
setIsSelectOpen(false);
|
|
27
|
+
}
|
|
28
|
+
}, [options, hasSection, multiple, onChange]);
|
|
26
29
|
return (React__default.createElement(StyledDropdown, { id: `select-dropdown-${id}`, className: buildClassnames([classNames === null || classNames === undefined ? undefined : classNames.popover, className]), shouldShow: isSelectOpen, setShouldShow: setIsSelectOpen, useAnchorWidth: true, disabled: disabled, renderCta: (buttonProps, anchorRef) => (React__default.createElement(StyledSelectButton, { ...buttonProps, hasError: hasError, compact: compact, type: "button", ref: anchorRef, className: buildClassnames([classNames === null || classNames === undefined ? undefined : classNames.button, className]) },
|
|
27
30
|
React__default.createElement(SelectedOption, { placeholder: placeholder, options: selectedValues, selectionMode: selectionMode }))) },
|
|
28
31
|
onSearchChange && (React__default.createElement(React__default.Fragment, null,
|
|
29
32
|
React__default.createElement(StyledSearch, { value: searchValue, onChange: onSearchChange }),
|
|
30
33
|
React__default.createElement(Separator, null))),
|
|
31
34
|
React__default.createElement(StyledListBox, { className: buildClassnames([classNames === null || classNames === undefined ? undefined : classNames.optionsContainer, className]), "aria-labelledby": ariaLabelledBy !== null && ariaLabelledBy !== undefined ? ariaLabelledBy : `${id}-label`, "aria-describedby": ariaDescribedBy !== null && ariaDescribedBy !== undefined ? ariaDescribedBy : `${id}-hint`, selectionMode: selectionMode, items: options, onSelectionChange: onSelectionChange, selectedKeys: selectedValues.map((selectedValue) => selectedValue.id), renderEmptyState: () => (React__default.createElement(SelectDropdownState, { isLoading: isLoading, emptyStateSlot: emptyStateSlot })), ...otherProps }, (item) => hasSection ? (React__default.createElement(ListItemSection, { ...item })) : (React__default.createElement(ListItem, { ...item }))), actions === null || actions === undefined ? undefined :
|
|
32
|
-
actions.map(({ label, ...
|
|
35
|
+
actions.map(({ label, ...actionProps }) => (React__default.createElement(React__default.Fragment, null,
|
|
33
36
|
React__default.createElement(Separator, { key: `seperator-${label}` }),
|
|
34
|
-
React__default.createElement(CTAButton, { key: label, ...
|
|
37
|
+
React__default.createElement(CTAButton, { key: label, ...actionProps }))))));
|
|
35
38
|
};
|
|
36
39
|
|
|
37
40
|
export { SelectDropdown };
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SelectDropdown.js","sources":["../../../src/components/SelectDropdown/SelectDropdown.tsx"],"sourcesContent":["
|
|
1
|
+
{"version":3,"file":"SelectDropdown.js","sources":["../../../src/components/SelectDropdown/SelectDropdown.tsx"],"sourcesContent":["/* eslint-disable react/destructuring-assignment */\nimport React, { useCallback, useState } from 'react';\nimport { Key, Selection } from 'react-aria-components';\n\nimport { buildClassnames } from '../../utils';\nimport { SelectedOption } from './components/SelectedOption';\nimport { generateClassNames, getSelectedValues } from './utils';\nimport {\n CTAButton,\n Separator,\n StyledDropdown,\n StyledSelectButton,\n StyledListBox,\n StyledSearch,\n} from './styled';\nimport { SelectDropdownItem, SelectDropdownProps } from './types';\nimport { ListItemSection, ListItemSectionProps } from './ListItemSection/ListItemSection';\nimport { ListItem } from './ListItem';\nimport { ListItemProps } from './ListItem/types';\nimport { SelectDropdownState } from './components/SelectDropdownState';\n\nexport const SelectDropdown = ({\n id,\n className,\n placeholder = 'Select item',\n multiple = false,\n compact = false,\n hasError = false,\n disabled,\n options,\n value,\n actions,\n isLoading = false,\n searchValue,\n emptyStateSlot,\n onSearchChange,\n onChange,\n 'aria-labelledby': ariaLabelledBy,\n 'aria-describedby': ariaDescribedBy,\n ...otherProps\n}: SelectDropdownProps) => {\n const hasSection = options.flatMap((option) => option).some((item) => 'items' in item);\n const classNames = generateClassNames(className);\n\n const [isSelectOpen, setIsSelectOpen] = useState(false);\n\n const selectedValues = getSelectedValues(options, hasSection, value);\n const selectionMode = multiple ? 'multiple' : 'single';\n\n const onSelectionChange = useCallback(\n (keys: Selection) => {\n const selectedKeys = Array.from(keys);\n const newSelectedValues = getSelectedValues(options, hasSection, selectedKeys);\n\n if (multiple) {\n (onChange as (items: SelectDropdownItem[]) => void)(newSelectedValues);\n } else {\n (onChange as (item: SelectDropdownItem) => void)(newSelectedValues[0]);\n setIsSelectOpen(false);\n }\n },\n [options, hasSection, multiple, onChange],\n );\n\n return (\n <StyledDropdown\n id={`select-dropdown-${id}`}\n className={buildClassnames([classNames?.popover, className])}\n shouldShow={isSelectOpen}\n setShouldShow={setIsSelectOpen}\n useAnchorWidth\n disabled={disabled}\n renderCta={(buttonProps, anchorRef) => (\n <StyledSelectButton\n {...buttonProps}\n hasError={hasError}\n compact={compact}\n type=\"button\"\n ref={anchorRef}\n className={buildClassnames([classNames?.button, className])}\n >\n <SelectedOption\n placeholder={placeholder}\n options={selectedValues}\n selectionMode={selectionMode}\n />\n </StyledSelectButton>\n )}\n >\n {onSearchChange && (\n <>\n <StyledSearch value={searchValue} onChange={onSearchChange} />\n <Separator />\n </>\n )}\n <StyledListBox\n className={buildClassnames([classNames?.optionsContainer, className])}\n aria-labelledby={ariaLabelledBy ?? `${id}-label`}\n aria-describedby={ariaDescribedBy ?? `${id}-hint`}\n selectionMode={selectionMode}\n items={options}\n onSelectionChange={onSelectionChange}\n selectedKeys={selectedValues.map((selectedValue) => selectedValue.id) as Key[]}\n renderEmptyState={() => (\n <SelectDropdownState isLoading={isLoading} emptyStateSlot={emptyStateSlot} />\n )}\n {...otherProps}\n >\n {(item) =>\n hasSection ? (\n <ListItemSection {...(item as ListItemSectionProps)} />\n ) : (\n <ListItem {...(item as ListItemProps)} />\n )\n }\n </StyledListBox>\n {actions?.map(({ label, ...actionProps }) => (\n <>\n <Separator key={`seperator-${label}`} />\n <CTAButton key={label} {...actionProps} />\n </>\n ))}\n </StyledDropdown>\n );\n};\n"],"names":["React"],"mappings":"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"}
|
|
@@ -1,28 +1,2 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
|
-
export declare const SelectDropdown: import("react").FC<
|
|
3
|
-
children?: import("react").ReactNode | ((item: import("./types").SelectDropdownItem) => import("react").ReactNode);
|
|
4
|
-
onScroll?: ((e: import("react").UIEvent<HTMLDivElement, UIEvent>) => void) | undefined;
|
|
5
|
-
disabledKeys?: Iterable<import("react-aria").Key> | undefined;
|
|
6
|
-
dragAndDropHooks?: import("react-aria-components").DragAndDropHooks | undefined;
|
|
7
|
-
} & {
|
|
8
|
-
id?: string | undefined;
|
|
9
|
-
className?: string | undefined;
|
|
10
|
-
multiple?: boolean | undefined;
|
|
11
|
-
compact?: boolean | undefined;
|
|
12
|
-
hasError?: boolean | undefined;
|
|
13
|
-
disabled?: boolean | undefined;
|
|
14
|
-
options: import("./types").SelectDropdownItem[];
|
|
15
|
-
emptyStateSlot?: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | undefined;
|
|
16
|
-
isLoading?: boolean | undefined;
|
|
17
|
-
onChange: (selectedItems: import("./types").SelectDropdownItem[]) => void;
|
|
18
|
-
value?: import("react-aria").Key[] | undefined;
|
|
19
|
-
placeholder?: string | undefined;
|
|
20
|
-
actions?: (Omit<import("../Button/types").ButtonProps, "variant"> & {
|
|
21
|
-
label: string;
|
|
22
|
-
})[] | undefined;
|
|
23
|
-
searchValue?: string | undefined;
|
|
24
|
-
onSearchChange?: ((value: string) => void) | undefined;
|
|
25
|
-
'aria-label'?: string | undefined;
|
|
26
|
-
'aria-labelledby'?: string | undefined;
|
|
27
|
-
'aria-describedby'?: string | undefined;
|
|
28
|
-
} & import("../../hoc/withLabels/withLabels").WithLabelsProps>;
|
|
2
|
+
export declare const SelectDropdown: import("react").FC<import("./types").SelectDropdownProps & import("../../hoc/withLabels/withLabels").WithLabelsProps>;
|
|
@@ -3,18 +3,30 @@ import { ReactElement } from 'react';
|
|
|
3
3
|
import { ButtonProps } from '../Button/types';
|
|
4
4
|
import { ListItemProps } from './ListItem/types';
|
|
5
5
|
import { ListItemSectionProps } from './ListItemSection/ListItemSection';
|
|
6
|
-
|
|
6
|
+
type CTAButtonProps = Omit<ButtonProps, 'variant'> & {
|
|
7
|
+
label: string;
|
|
8
|
+
};
|
|
9
|
+
export type SelectDropdownItem = ListItemProps | ListItemSectionProps;
|
|
10
|
+
type ImportedListBoxProps = Pick<ListBoxProps<SelectDropdownItem>, 'children' | 'dragAndDropHooks' | 'onScroll' | 'disabledKeys'>;
|
|
11
|
+
export type SelectDropdownSingleProps = ImportedListBoxProps & {
|
|
12
|
+
multiple?: false;
|
|
13
|
+
value: Key;
|
|
14
|
+
onChange: (selectedItem: SelectDropdownItem) => void;
|
|
15
|
+
};
|
|
16
|
+
export type SelectDropdownMultipleProps = ImportedListBoxProps & {
|
|
17
|
+
multiple: true;
|
|
18
|
+
value: Key[];
|
|
19
|
+
onChange: (selectedItems: SelectDropdownItem[]) => void;
|
|
20
|
+
};
|
|
21
|
+
export type SelectDropdownProps = (SelectDropdownSingleProps | SelectDropdownMultipleProps) & {
|
|
7
22
|
id?: string;
|
|
8
23
|
className?: string;
|
|
9
|
-
multiple?: boolean;
|
|
10
24
|
compact?: boolean;
|
|
11
25
|
hasError?: boolean;
|
|
12
26
|
disabled?: boolean;
|
|
13
27
|
options: SelectDropdownItem[];
|
|
14
28
|
emptyStateSlot?: ReactElement;
|
|
15
29
|
isLoading?: boolean;
|
|
16
|
-
onChange: (selectedItems: SelectDropdownItem[]) => void;
|
|
17
|
-
value?: Key[];
|
|
18
30
|
placeholder?: string;
|
|
19
31
|
actions?: CTAButtonProps[];
|
|
20
32
|
searchValue?: string;
|
|
@@ -23,11 +35,6 @@ export type SelectDropdownProps = ImportedListBoxProps & {
|
|
|
23
35
|
'aria-labelledby'?: string;
|
|
24
36
|
'aria-describedby'?: string;
|
|
25
37
|
};
|
|
26
|
-
type CTAButtonProps = Omit<ButtonProps, 'variant'> & {
|
|
27
|
-
label: string;
|
|
28
|
-
};
|
|
29
|
-
export type SelectDropdownItem = ListItemProps | ListItemSectionProps;
|
|
30
|
-
type ImportedListBoxProps = Pick<ListBoxProps<SelectDropdownItem>, 'children' | 'dragAndDropHooks' | 'onScroll' | 'disabledKeys'>;
|
|
31
38
|
export type ClassNamesReturnPayload = {
|
|
32
39
|
button?: string;
|
|
33
40
|
optionsContainer?: string;
|
|
@@ -1,5 +1,18 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
+
const getValueFromKey = (items, hasSection, key) => {
|
|
4
|
+
if (!key)
|
|
5
|
+
return undefined;
|
|
6
|
+
if (!hasSection) {
|
|
7
|
+
return items.find((item) => item.id === key) || undefined;
|
|
8
|
+
}
|
|
9
|
+
const selectedSection = items.find((section) => section.id === key);
|
|
10
|
+
if (selectedSection)
|
|
11
|
+
return selectedSection;
|
|
12
|
+
return items
|
|
13
|
+
.flatMap((section) => ('items' in section && Array.isArray(section.items) ? section.items : []))
|
|
14
|
+
.find((item) => item.id === key);
|
|
15
|
+
};
|
|
3
16
|
const getValuesFromKeys = (items, hasSection, keys) => {
|
|
4
17
|
if (!keys)
|
|
5
18
|
return [];
|
|
@@ -14,6 +27,15 @@ const getValuesFromKeys = (items, hasSection, keys) => {
|
|
|
14
27
|
];
|
|
15
28
|
});
|
|
16
29
|
};
|
|
30
|
+
const getSelectedValues = (items, hasSection, value) => {
|
|
31
|
+
if (!value)
|
|
32
|
+
return [];
|
|
33
|
+
if (Array.isArray(value)) {
|
|
34
|
+
return getValuesFromKeys(items, hasSection, value);
|
|
35
|
+
}
|
|
36
|
+
const keyValue = getValueFromKey(items, hasSection, value);
|
|
37
|
+
return keyValue === undefined ? [] : [keyValue];
|
|
38
|
+
};
|
|
17
39
|
const generateClassNames = (prefix) => ({
|
|
18
40
|
button: prefix ? `${prefix}-select-dropdown-button` : undefined,
|
|
19
41
|
optionsContainer: prefix ? `${prefix}-select-dropdown-container` : undefined,
|
|
@@ -21,5 +43,7 @@ const generateClassNames = (prefix) => ({
|
|
|
21
43
|
});
|
|
22
44
|
|
|
23
45
|
exports.generateClassNames = generateClassNames;
|
|
46
|
+
exports.getSelectedValues = getSelectedValues;
|
|
47
|
+
exports.getValueFromKey = getValueFromKey;
|
|
24
48
|
exports.getValuesFromKeys = getValuesFromKeys;
|
|
25
49
|
//# sourceMappingURL=utils.cjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"utils.cjs","sources":["../../../src/components/SelectDropdown/utils.ts"],"sourcesContent":["import { Key } from 'react-aria-components';\nimport { ClassNamesReturnPayload, SelectDropdownItem } from './types';\nimport { ListItemSectionProps } from './ListItemSection/ListItemSection';\nimport { ListItemProps } from './ListItem/types';\n\nexport const getValuesFromKeys = (\n items: SelectDropdownItem[],\n hasSection: boolean,\n keys?: Key[],\n): SelectDropdownItem[] => {\n if (!keys) return [];\n if (!hasSection) {\n return items.filter((item) => keys.includes(item.id as Key));\n }\n\n return (items as ListItemSectionProps[]).flatMap((section) => [\n ...(keys.includes(section.id as Key) ? [section] : []),\n ...(section.items?.filter((item: ListItemProps) => keys.includes(item.id as Key)) || []),\n ]);\n};\n\nexport const generateClassNames = (prefix?: string): ClassNamesReturnPayload => ({\n button: prefix ? `${prefix}-select-dropdown-button` : undefined,\n optionsContainer: prefix ? `${prefix}-select-dropdown-container` : undefined,\n popover: prefix ? `${prefix}-select-dropdown` : undefined,\n});\n"],"names":[],"mappings":";;AAKa,MAAA,iBAAiB,GAAG,CAC/B,KAA2B,EAC3B,UAAmB,EACnB,IAAY,KACY;AACxB,IAAA,IAAI,CAAC,IAAI;AAAE,QAAA,OAAO,EAAE;IACpB,IAAI,CAAC,UAAU,EAAE;AACf,QAAA,OAAO,KAAK,CAAC,MAAM,CAAC,CAAC,IAAI,KAAK,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,EAAS,CAAC,CAAC;AAC7D;AAED,IAAA,OAAQ,KAAgC,CAAC,OAAO,CAAC,CAAC,OAAO,KAAI;;QAAC,OAAA;AAC5D,YAAA,IAAI,IAAI,CAAC,QAAQ,CAAC,OAAO,CAAC,EAAS,CAAC,GAAG,CAAC,OAAO,CAAC,GAAG,EAAE,CAAC;YACtD,IAAI,CAAA,CAAA,EAAA,GAAA,OAAO,CAAC,KAAK,MAAE,IAAA,IAAA,EAAA,KAAA,SAAA,GAAA,SAAA,GAAA,EAAA,CAAA,MAAM,CAAC,CAAC,IAAmB,KAAK,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,EAAS,CAAC,CAAC,KAAI,EAAE,CAAC;SACzF;AAAA,KAAA,CAAC;AACJ;MAEa,kBAAkB,GAAG,CAAC,MAAe,MAA+B;IAC/E,MAAM,EAAE,MAAM,GAAG,CAAG,EAAA,MAAM,CAAyB,uBAAA,CAAA,GAAG,SAAS;IAC/D,gBAAgB,EAAE,MAAM,GAAG,CAAG,EAAA,MAAM,CAA4B,0BAAA,CAAA,GAAG,SAAS;IAC5E,OAAO,EAAE,MAAM,GAAG,CAAG,EAAA,MAAM,CAAkB,gBAAA,CAAA,GAAG,SAAS;AAC1D,CAAA
|
|
1
|
+
{"version":3,"file":"utils.cjs","sources":["../../../src/components/SelectDropdown/utils.ts"],"sourcesContent":["import { Key } from 'react-aria-components';\nimport { ClassNamesReturnPayload, SelectDropdownItem } from './types';\nimport { ListItemSectionProps } from './ListItemSection/ListItemSection';\nimport { ListItemProps } from './ListItem/types';\n\nexport const getValueFromKey = (items: SelectDropdownItem[], hasSection: boolean, key?: Key) => {\n if (!key) return undefined;\n if (!hasSection) {\n return items.find((item) => item.id === key) || undefined;\n }\n\n const selectedSection = items.find((section) => section.id === key);\n if (selectedSection) return selectedSection;\n\n return items\n .flatMap((section) => ('items' in section && Array.isArray(section.items) ? section.items : []))\n .find((item: ListItemProps) => item.id === key);\n};\n\nexport const getValuesFromKeys = (\n items: SelectDropdownItem[],\n hasSection: boolean,\n keys?: Key[],\n): SelectDropdownItem[] => {\n if (!keys) return [];\n if (!hasSection) {\n return items.filter((item) => keys.includes(item.id as Key));\n }\n\n return (items as ListItemSectionProps[]).flatMap((section) => [\n ...(keys.includes(section.id as Key) ? [section] : []),\n ...(section.items?.filter((item: ListItemProps) => keys.includes(item.id as Key)) || []),\n ]);\n};\n\nexport const getSelectedValues = (\n items: SelectDropdownItem[],\n hasSection: boolean,\n value?: Key | Key[],\n): SelectDropdownItem[] => {\n if (!value) return [];\n if (Array.isArray(value)) {\n return getValuesFromKeys(items, hasSection, value);\n }\n const keyValue = getValueFromKey(items, hasSection, value);\n return keyValue === undefined ? [] : [keyValue];\n};\n\nexport const generateClassNames = (prefix?: string): ClassNamesReturnPayload => ({\n button: prefix ? `${prefix}-select-dropdown-button` : undefined,\n optionsContainer: prefix ? `${prefix}-select-dropdown-container` : undefined,\n popover: prefix ? `${prefix}-select-dropdown` : undefined,\n});\n"],"names":[],"mappings":";;AAKa,MAAA,eAAe,GAAG,CAAC,KAA2B,EAAE,UAAmB,EAAE,GAAS,KAAI;AAC7F,IAAA,IAAI,CAAC,GAAG;AAAE,QAAA,OAAO,SAAS;IAC1B,IAAI,CAAC,UAAU,EAAE;AACf,QAAA,OAAO,KAAK,CAAC,IAAI,CAAC,CAAC,IAAI,KAAK,IAAI,CAAC,EAAE,KAAK,GAAG,CAAC,IAAI,SAAS;AAC1D;AAED,IAAA,MAAM,eAAe,GAAG,KAAK,CAAC,IAAI,CAAC,CAAC,OAAO,KAAK,OAAO,CAAC,EAAE,KAAK,GAAG,CAAC;AACnE,IAAA,IAAI,eAAe;AAAE,QAAA,OAAO,eAAe;AAE3C,IAAA,OAAO;AACJ,SAAA,OAAO,CAAC,CAAC,OAAO,MAAM,OAAO,IAAI,OAAO,IAAI,KAAK,CAAC,OAAO,CAAC,OAAO,CAAC,KAAK,CAAC,GAAG,OAAO,CAAC,KAAK,GAAG,EAAE,CAAC;AAC9F,SAAA,IAAI,CAAC,CAAC,IAAmB,KAAK,IAAI,CAAC,EAAE,KAAK,GAAG,CAAC;AACnD;AAEa,MAAA,iBAAiB,GAAG,CAC/B,KAA2B,EAC3B,UAAmB,EACnB,IAAY,KACY;AACxB,IAAA,IAAI,CAAC,IAAI;AAAE,QAAA,OAAO,EAAE;IACpB,IAAI,CAAC,UAAU,EAAE;AACf,QAAA,OAAO,KAAK,CAAC,MAAM,CAAC,CAAC,IAAI,KAAK,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,EAAS,CAAC,CAAC;AAC7D;AAED,IAAA,OAAQ,KAAgC,CAAC,OAAO,CAAC,CAAC,OAAO,KAAI;;QAAC,OAAA;AAC5D,YAAA,IAAI,IAAI,CAAC,QAAQ,CAAC,OAAO,CAAC,EAAS,CAAC,GAAG,CAAC,OAAO,CAAC,GAAG,EAAE,CAAC;YACtD,IAAI,CAAA,CAAA,EAAA,GAAA,OAAO,CAAC,KAAK,MAAE,IAAA,IAAA,EAAA,KAAA,SAAA,GAAA,SAAA,GAAA,EAAA,CAAA,MAAM,CAAC,CAAC,IAAmB,KAAK,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,EAAS,CAAC,CAAC,KAAI,EAAE,CAAC;SACzF;AAAA,KAAA,CAAC;AACJ;AAEa,MAAA,iBAAiB,GAAG,CAC/B,KAA2B,EAC3B,UAAmB,EACnB,KAAmB,KACK;AACxB,IAAA,IAAI,CAAC,KAAK;AAAE,QAAA,OAAO,EAAE;AACrB,IAAA,IAAI,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC,EAAE;QACxB,OAAO,iBAAiB,CAAC,KAAK,EAAE,UAAU,EAAE,KAAK,CAAC;AACnD;IACD,MAAM,QAAQ,GAAG,eAAe,CAAC,KAAK,EAAE,UAAU,EAAE,KAAK,CAAC;AAC1D,IAAA,OAAO,QAAQ,KAAK,SAAS,GAAG,EAAE,GAAG,CAAC,QAAQ,CAAC;AACjD;MAEa,kBAAkB,GAAG,CAAC,MAAe,MAA+B;IAC/E,MAAM,EAAE,MAAM,GAAG,CAAG,EAAA,MAAM,CAAyB,uBAAA,CAAA,GAAG,SAAS;IAC/D,gBAAgB,EAAE,MAAM,GAAG,CAAG,EAAA,MAAM,CAA4B,0BAAA,CAAA,GAAG,SAAS;IAC5E,OAAO,EAAE,MAAM,GAAG,CAAG,EAAA,MAAM,CAAkB,gBAAA,CAAA,GAAG,SAAS;AAC1D,CAAA;;;;;;;"}
|
|
@@ -1,4 +1,6 @@
|
|
|
1
1
|
import { Key } from 'react-aria-components';
|
|
2
2
|
import { ClassNamesReturnPayload, SelectDropdownItem } from './types';
|
|
3
|
+
export declare const getValueFromKey: (items: SelectDropdownItem[], hasSection: boolean, key?: Key) => SelectDropdownItem | undefined;
|
|
3
4
|
export declare const getValuesFromKeys: (items: SelectDropdownItem[], hasSection: boolean, keys?: Key[]) => SelectDropdownItem[];
|
|
5
|
+
export declare const getSelectedValues: (items: SelectDropdownItem[], hasSection: boolean, value?: Key | Key[]) => SelectDropdownItem[];
|
|
4
6
|
export declare const generateClassNames: (prefix?: string) => ClassNamesReturnPayload;
|
|
@@ -1,3 +1,16 @@
|
|
|
1
|
+
const getValueFromKey = (items, hasSection, key) => {
|
|
2
|
+
if (!key)
|
|
3
|
+
return undefined;
|
|
4
|
+
if (!hasSection) {
|
|
5
|
+
return items.find((item) => item.id === key) || undefined;
|
|
6
|
+
}
|
|
7
|
+
const selectedSection = items.find((section) => section.id === key);
|
|
8
|
+
if (selectedSection)
|
|
9
|
+
return selectedSection;
|
|
10
|
+
return items
|
|
11
|
+
.flatMap((section) => ('items' in section && Array.isArray(section.items) ? section.items : []))
|
|
12
|
+
.find((item) => item.id === key);
|
|
13
|
+
};
|
|
1
14
|
const getValuesFromKeys = (items, hasSection, keys) => {
|
|
2
15
|
if (!keys)
|
|
3
16
|
return [];
|
|
@@ -12,11 +25,20 @@ const getValuesFromKeys = (items, hasSection, keys) => {
|
|
|
12
25
|
];
|
|
13
26
|
});
|
|
14
27
|
};
|
|
28
|
+
const getSelectedValues = (items, hasSection, value) => {
|
|
29
|
+
if (!value)
|
|
30
|
+
return [];
|
|
31
|
+
if (Array.isArray(value)) {
|
|
32
|
+
return getValuesFromKeys(items, hasSection, value);
|
|
33
|
+
}
|
|
34
|
+
const keyValue = getValueFromKey(items, hasSection, value);
|
|
35
|
+
return keyValue === undefined ? [] : [keyValue];
|
|
36
|
+
};
|
|
15
37
|
const generateClassNames = (prefix) => ({
|
|
16
38
|
button: prefix ? `${prefix}-select-dropdown-button` : undefined,
|
|
17
39
|
optionsContainer: prefix ? `${prefix}-select-dropdown-container` : undefined,
|
|
18
40
|
popover: prefix ? `${prefix}-select-dropdown` : undefined,
|
|
19
41
|
});
|
|
20
42
|
|
|
21
|
-
export { generateClassNames, getValuesFromKeys };
|
|
43
|
+
export { generateClassNames, getSelectedValues, getValueFromKey, getValuesFromKeys };
|
|
22
44
|
//# sourceMappingURL=utils.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"utils.js","sources":["../../../src/components/SelectDropdown/utils.ts"],"sourcesContent":["import { Key } from 'react-aria-components';\nimport { ClassNamesReturnPayload, SelectDropdownItem } from './types';\nimport { ListItemSectionProps } from './ListItemSection/ListItemSection';\nimport { ListItemProps } from './ListItem/types';\n\nexport const getValuesFromKeys = (\n items: SelectDropdownItem[],\n hasSection: boolean,\n keys?: Key[],\n): SelectDropdownItem[] => {\n if (!keys) return [];\n if (!hasSection) {\n return items.filter((item) => keys.includes(item.id as Key));\n }\n\n return (items as ListItemSectionProps[]).flatMap((section) => [\n ...(keys.includes(section.id as Key) ? [section] : []),\n ...(section.items?.filter((item: ListItemProps) => keys.includes(item.id as Key)) || []),\n ]);\n};\n\nexport const generateClassNames = (prefix?: string): ClassNamesReturnPayload => ({\n button: prefix ? `${prefix}-select-dropdown-button` : undefined,\n optionsContainer: prefix ? `${prefix}-select-dropdown-container` : undefined,\n popover: prefix ? `${prefix}-select-dropdown` : undefined,\n});\n"],"names":[],"mappings":"AAKa,MAAA,iBAAiB,GAAG,CAC/B,KAA2B,EAC3B,UAAmB,EACnB,IAAY,KACY;AACxB,IAAA,IAAI,CAAC,IAAI;AAAE,QAAA,OAAO,EAAE;IACpB,IAAI,CAAC,UAAU,EAAE;AACf,QAAA,OAAO,KAAK,CAAC,MAAM,CAAC,CAAC,IAAI,KAAK,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,EAAS,CAAC,CAAC;AAC7D;AAED,IAAA,OAAQ,KAAgC,CAAC,OAAO,CAAC,CAAC,OAAO,KAAI;;QAAC,OAAA;AAC5D,YAAA,IAAI,IAAI,CAAC,QAAQ,CAAC,OAAO,CAAC,EAAS,CAAC,GAAG,CAAC,OAAO,CAAC,GAAG,EAAE,CAAC;YACtD,IAAI,CAAA,CAAA,EAAA,GAAA,OAAO,CAAC,KAAK,MAAE,IAAA,IAAA,EAAA,KAAA,SAAA,GAAA,SAAA,GAAA,EAAA,CAAA,MAAM,CAAC,CAAC,IAAmB,KAAK,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,EAAS,CAAC,CAAC,KAAI,EAAE,CAAC;SACzF;AAAA,KAAA,CAAC;AACJ;MAEa,kBAAkB,GAAG,CAAC,MAAe,MAA+B;IAC/E,MAAM,EAAE,MAAM,GAAG,CAAG,EAAA,MAAM,CAAyB,uBAAA,CAAA,GAAG,SAAS;IAC/D,gBAAgB,EAAE,MAAM,GAAG,CAAG,EAAA,MAAM,CAA4B,0BAAA,CAAA,GAAG,SAAS;IAC5E,OAAO,EAAE,MAAM,GAAG,CAAG,EAAA,MAAM,CAAkB,gBAAA,CAAA,GAAG,SAAS;AAC1D,CAAA;;;;"}
|
|
1
|
+
{"version":3,"file":"utils.js","sources":["../../../src/components/SelectDropdown/utils.ts"],"sourcesContent":["import { Key } from 'react-aria-components';\nimport { ClassNamesReturnPayload, SelectDropdownItem } from './types';\nimport { ListItemSectionProps } from './ListItemSection/ListItemSection';\nimport { ListItemProps } from './ListItem/types';\n\nexport const getValueFromKey = (items: SelectDropdownItem[], hasSection: boolean, key?: Key) => {\n if (!key) return undefined;\n if (!hasSection) {\n return items.find((item) => item.id === key) || undefined;\n }\n\n const selectedSection = items.find((section) => section.id === key);\n if (selectedSection) return selectedSection;\n\n return items\n .flatMap((section) => ('items' in section && Array.isArray(section.items) ? section.items : []))\n .find((item: ListItemProps) => item.id === key);\n};\n\nexport const getValuesFromKeys = (\n items: SelectDropdownItem[],\n hasSection: boolean,\n keys?: Key[],\n): SelectDropdownItem[] => {\n if (!keys) return [];\n if (!hasSection) {\n return items.filter((item) => keys.includes(item.id as Key));\n }\n\n return (items as ListItemSectionProps[]).flatMap((section) => [\n ...(keys.includes(section.id as Key) ? [section] : []),\n ...(section.items?.filter((item: ListItemProps) => keys.includes(item.id as Key)) || []),\n ]);\n};\n\nexport const getSelectedValues = (\n items: SelectDropdownItem[],\n hasSection: boolean,\n value?: Key | Key[],\n): SelectDropdownItem[] => {\n if (!value) return [];\n if (Array.isArray(value)) {\n return getValuesFromKeys(items, hasSection, value);\n }\n const keyValue = getValueFromKey(items, hasSection, value);\n return keyValue === undefined ? [] : [keyValue];\n};\n\nexport const generateClassNames = (prefix?: string): ClassNamesReturnPayload => ({\n button: prefix ? `${prefix}-select-dropdown-button` : undefined,\n optionsContainer: prefix ? `${prefix}-select-dropdown-container` : undefined,\n popover: prefix ? `${prefix}-select-dropdown` : undefined,\n});\n"],"names":[],"mappings":"AAKa,MAAA,eAAe,GAAG,CAAC,KAA2B,EAAE,UAAmB,EAAE,GAAS,KAAI;AAC7F,IAAA,IAAI,CAAC,GAAG;AAAE,QAAA,OAAO,SAAS;IAC1B,IAAI,CAAC,UAAU,EAAE;AACf,QAAA,OAAO,KAAK,CAAC,IAAI,CAAC,CAAC,IAAI,KAAK,IAAI,CAAC,EAAE,KAAK,GAAG,CAAC,IAAI,SAAS;AAC1D;AAED,IAAA,MAAM,eAAe,GAAG,KAAK,CAAC,IAAI,CAAC,CAAC,OAAO,KAAK,OAAO,CAAC,EAAE,KAAK,GAAG,CAAC;AACnE,IAAA,IAAI,eAAe;AAAE,QAAA,OAAO,eAAe;AAE3C,IAAA,OAAO;AACJ,SAAA,OAAO,CAAC,CAAC,OAAO,MAAM,OAAO,IAAI,OAAO,IAAI,KAAK,CAAC,OAAO,CAAC,OAAO,CAAC,KAAK,CAAC,GAAG,OAAO,CAAC,KAAK,GAAG,EAAE,CAAC;AAC9F,SAAA,IAAI,CAAC,CAAC,IAAmB,KAAK,IAAI,CAAC,EAAE,KAAK,GAAG,CAAC;AACnD;AAEa,MAAA,iBAAiB,GAAG,CAC/B,KAA2B,EAC3B,UAAmB,EACnB,IAAY,KACY;AACxB,IAAA,IAAI,CAAC,IAAI;AAAE,QAAA,OAAO,EAAE;IACpB,IAAI,CAAC,UAAU,EAAE;AACf,QAAA,OAAO,KAAK,CAAC,MAAM,CAAC,CAAC,IAAI,KAAK,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,EAAS,CAAC,CAAC;AAC7D;AAED,IAAA,OAAQ,KAAgC,CAAC,OAAO,CAAC,CAAC,OAAO,KAAI;;QAAC,OAAA;AAC5D,YAAA,IAAI,IAAI,CAAC,QAAQ,CAAC,OAAO,CAAC,EAAS,CAAC,GAAG,CAAC,OAAO,CAAC,GAAG,EAAE,CAAC;YACtD,IAAI,CAAA,CAAA,EAAA,GAAA,OAAO,CAAC,KAAK,MAAE,IAAA,IAAA,EAAA,KAAA,SAAA,GAAA,SAAA,GAAA,EAAA,CAAA,MAAM,CAAC,CAAC,IAAmB,KAAK,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,EAAS,CAAC,CAAC,KAAI,EAAE,CAAC;SACzF;AAAA,KAAA,CAAC;AACJ;AAEa,MAAA,iBAAiB,GAAG,CAC/B,KAA2B,EAC3B,UAAmB,EACnB,KAAmB,KACK;AACxB,IAAA,IAAI,CAAC,KAAK;AAAE,QAAA,OAAO,EAAE;AACrB,IAAA,IAAI,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC,EAAE;QACxB,OAAO,iBAAiB,CAAC,KAAK,EAAE,UAAU,EAAE,KAAK,CAAC;AACnD;IACD,MAAM,QAAQ,GAAG,eAAe,CAAC,KAAK,EAAE,UAAU,EAAE,KAAK,CAAC;AAC1D,IAAA,OAAO,QAAQ,KAAK,SAAS,GAAG,EAAE,GAAG,CAAC,QAAQ,CAAC;AACjD;MAEa,kBAAkB,GAAG,CAAC,MAAe,MAA+B;IAC/E,MAAM,EAAE,MAAM,GAAG,CAAG,EAAA,MAAM,CAAyB,uBAAA,CAAA,GAAG,SAAS;IAC/D,gBAAgB,EAAE,MAAM,GAAG,CAAG,EAAA,MAAM,CAA4B,0BAAA,CAAA,GAAG,SAAS;IAC5E,OAAO,EAAE,MAAM,GAAG,CAAG,EAAA,MAAM,CAAkB,gBAAA,CAAA,GAAG,SAAS;AAC1D,CAAA;;;;"}
|
package/package.json
CHANGED
|
@@ -1,13 +0,0 @@
|
|
|
1
|
-
'use strict';
|
|
2
|
-
|
|
3
|
-
var styled = require('styled-components');
|
|
4
|
-
var index = require('../../../theme/index.cjs');
|
|
5
|
-
|
|
6
|
-
function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
|
|
7
|
-
|
|
8
|
-
var styled__default = /*#__PURE__*/_interopDefaultCompat(styled);
|
|
9
|
-
|
|
10
|
-
const MiniAlertContainer = styled__default.default.div.withConfig({ displayName: "vui--MiniAlertContainer", componentId: "vui--1qc3uqv" }) `display:flex;gap:${index.theme.sizes.xs};`;
|
|
11
|
-
|
|
12
|
-
exports.MiniAlertContainer = MiniAlertContainer;
|
|
13
|
-
//# sourceMappingURL=styled.cjs.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"styled.cjs","sources":["../../../../src/components/Alerts/MiniAlert/styled.ts"],"sourcesContent":["import styled from 'styled-components';\nimport { theme } from 'Theme';\n\nexport const MiniAlertContainer = styled.div`\n display: flex;\n gap: ${theme.sizes.xs};\n`;\n"],"names":["styled","theme"],"mappings":";;;;;;;;;AAGO,MAAM,kBAAkB,GAAGA,uBAAM,CAAC,GAAG,CAEnC,UAAA,CAAA,EAAA,WAAA,EAAA,yBAAA,EAAA,WAAA,EAAA,cAAA,EAAA,CAAA,CAAA,CAAA,iBAAA,EAAAC,WAAK,CAAC,KAAK,CAAC,EAAE;;;;"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export declare const MiniAlertContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
|
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
import styled from 'styled-components';
|
|
2
|
-
import { theme } from '../../../theme/index.js';
|
|
3
|
-
|
|
4
|
-
const MiniAlertContainer = styled.div.withConfig({ displayName: "vui--MiniAlertContainer", componentId: "vui--1qc3uqv" }) `display:flex;gap:${theme.sizes.xs};`;
|
|
5
|
-
|
|
6
|
-
export { MiniAlertContainer };
|
|
7
|
-
//# sourceMappingURL=styled.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"styled.js","sources":["../../../../src/components/Alerts/MiniAlert/styled.ts"],"sourcesContent":["import styled from 'styled-components';\nimport { theme } from 'Theme';\n\nexport const MiniAlertContainer = styled.div`\n display: flex;\n gap: ${theme.sizes.xs};\n`;\n"],"names":[],"mappings":";;;AAGO,MAAM,kBAAkB,GAAG,MAAM,CAAC,GAAG,CAEnC,UAAA,CAAA,EAAA,WAAA,EAAA,yBAAA,EAAA,WAAA,EAAA,cAAA,EAAA,CAAA,CAAA,CAAA,iBAAA,EAAA,KAAK,CAAC,KAAK,CAAC,EAAE;;;;"}
|