@dreamcommerce/aurora 3.0.0-264 → 3.0.0-265
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/cjs/packages/aurora/src/components/multiselect/components/multiselect_content.js +42 -26
- package/build/cjs/packages/aurora/src/components/multiselect/components/multiselect_content.js.map +1 -1
- package/build/cjs/packages/aurora/src/components/multiselect/components/multiselect_group_label.js +4 -4
- package/build/cjs/packages/aurora/src/components/multiselect/components/multiselect_item.js +11 -7
- package/build/cjs/packages/aurora/src/components/multiselect/components/multiselect_item.js.map +1 -1
- package/build/cjs/packages/aurora/src/components/multiselect/components/multiselect_search.js +24 -0
- package/build/cjs/packages/aurora/src/components/multiselect/components/multiselect_search.js.map +1 -0
- package/build/cjs/packages/aurora/src/components/multiselect/components/multiselect_trigger.js +5 -8
- package/build/cjs/packages/aurora/src/components/multiselect/components/multiselect_trigger.js.map +1 -1
- package/build/cjs/packages/aurora/src/components/multiselect/hooks/use_multiselect_value.js +42 -0
- package/build/cjs/packages/aurora/src/components/multiselect/hooks/use_multiselect_value.js.map +1 -0
- package/build/cjs/packages/aurora/src/components/multiselect/multiselect.js +30 -40
- package/build/cjs/packages/aurora/src/components/multiselect/multiselect.js.map +1 -1
- package/build/cjs/packages/aurora/src/components/multiselect/multiselect_utils.js +48 -0
- package/build/cjs/packages/aurora/src/components/multiselect/multiselect_utils.js.map +1 -0
- package/build/esm/packages/aurora/src/components/multiselect/components/multiselect_content.d.ts +1 -1
- package/build/esm/packages/aurora/src/components/multiselect/components/multiselect_content.js +42 -26
- package/build/esm/packages/aurora/src/components/multiselect/components/multiselect_content.js.map +1 -1
- package/build/esm/packages/aurora/src/components/multiselect/components/multiselect_group_label.d.ts +2 -2
- package/build/esm/packages/aurora/src/components/multiselect/components/multiselect_group_label.js +4 -4
- package/build/esm/packages/aurora/src/components/multiselect/components/multiselect_item.js +11 -7
- package/build/esm/packages/aurora/src/components/multiselect/components/multiselect_item.js.map +1 -1
- package/build/esm/packages/aurora/src/components/multiselect/components/multiselect_search.d.ts +3 -0
- package/build/esm/packages/aurora/src/components/multiselect/components/multiselect_search.js +16 -0
- package/build/esm/packages/aurora/src/components/multiselect/components/multiselect_search.js.map +1 -0
- package/build/esm/packages/aurora/src/components/multiselect/components/multiselect_trigger.js +5 -8
- package/build/esm/packages/aurora/src/components/multiselect/components/multiselect_trigger.js.map +1 -1
- package/build/esm/packages/aurora/src/components/multiselect/hooks/use_multiselect_value.d.ts +5 -0
- package/build/esm/packages/aurora/src/components/multiselect/hooks/use_multiselect_value.js +38 -0
- package/build/esm/packages/aurora/src/components/multiselect/hooks/use_multiselect_value.js.map +1 -0
- package/build/esm/packages/aurora/src/components/multiselect/multiselect.d.ts +2 -2
- package/build/esm/packages/aurora/src/components/multiselect/multiselect.js +32 -42
- package/build/esm/packages/aurora/src/components/multiselect/multiselect.js.map +1 -1
- package/build/esm/packages/aurora/src/components/multiselect/multiselect_types.d.ts +9 -4
- package/build/esm/packages/aurora/src/components/multiselect/multiselect_types.js.map +1 -1
- package/build/esm/packages/aurora/src/components/multiselect/multiselect_utils.d.ts +7 -0
- package/build/esm/packages/aurora/src/components/multiselect/multiselect_utils.js +44 -0
- package/build/esm/packages/aurora/src/components/multiselect/multiselect_utils.js.map +1 -0
- package/build/index.css +1 -1
- package/package.json +1 -1
package/build/esm/packages/aurora/src/components/multiselect/components/multiselect_group_label.js
CHANGED
|
@@ -9,22 +9,22 @@ var _excluded = ["children"];
|
|
|
9
9
|
var MultiSelectGroupLabel = function MultiSelectGroupLabel(_ref) {
|
|
10
10
|
var children = _ref.children,
|
|
11
11
|
props = _objectWithoutProperties(_ref, _excluded);
|
|
12
|
-
return /*#__PURE__*/React.createElement(Box, {
|
|
12
|
+
return /*#__PURE__*/React.createElement(Box, _objectSpread2({
|
|
13
13
|
paddings: {
|
|
14
14
|
pl: '2',
|
|
15
15
|
pt: '2',
|
|
16
16
|
pb: '2',
|
|
17
17
|
pr: '0'
|
|
18
18
|
}
|
|
19
|
-
}, /*#__PURE__*/React.createElement(Stack, {
|
|
19
|
+
}, props), /*#__PURE__*/React.createElement(Stack, {
|
|
20
20
|
align: "center",
|
|
21
21
|
spacing: "2.5"
|
|
22
22
|
}, /*#__PURE__*/React.createElement(Typography, {
|
|
23
|
-
className: "aurora-whitespace-nowrap",
|
|
23
|
+
className: "aurora-whitespace-nowrap first-letter:aurora-uppercase",
|
|
24
24
|
size: "s",
|
|
25
25
|
color: "subtle",
|
|
26
26
|
weight: "bold"
|
|
27
|
-
}, children), /*#__PURE__*/React.createElement(Divider,
|
|
27
|
+
}, children), /*#__PURE__*/React.createElement(Divider, null)));
|
|
28
28
|
};
|
|
29
29
|
MultiSelectGroupLabel.displayName = 'MultiSelectGroupLabel';
|
|
30
30
|
|
|
@@ -3,7 +3,6 @@ import { objectWithoutProperties as _objectWithoutProperties, objectSpread2 as _
|
|
|
3
3
|
import { cn } from '../../../utilities/cn.js';
|
|
4
4
|
import { Item } from '@radix-ui/react-dropdown-menu';
|
|
5
5
|
import { Box } from '../../box/box.js';
|
|
6
|
-
import { Typography } from '../../typography/typography.js';
|
|
7
6
|
import { Checkbox } from '../../checkbox/checkbox.js';
|
|
8
7
|
|
|
9
8
|
var _excluded = ["option", "isSelected", "isDisabled", "isReadonly", "toggleOption", "className"];
|
|
@@ -21,9 +20,13 @@ var MultiSelectItem = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
|
|
|
21
20
|
};
|
|
22
21
|
return /*#__PURE__*/React.createElement(Item, _objectSpread2(_objectSpread2({
|
|
23
22
|
onSelect: handleSelect,
|
|
24
|
-
className: cn('aurora-relative aurora-flex aurora-w-full aurora-select-none aurora-rounded-sm aurora-p-2 aurora-outline-none
|
|
25
|
-
'aurora-bg-hover': isSelected
|
|
23
|
+
className: cn('aurora-relative aurora-flex aurora-w-full aurora-rounded-6 aurora-cursor-default aurora-select-none aurora-items-center aurora-rounded-sm aurora-p-2 aurora-text-s aurora-outline-none aurora-break-words aurora-text-wrap focus:aurora-bg-hover focus:aurora-text-accent-foreground data-[disabled]:aurora-pointer-events-none data-[disabled]:aurora-opacity-50', {
|
|
24
|
+
'aurora-bg-hover aurora-font-semibold': isSelected,
|
|
25
|
+
'aurora-cursor-pointer active:aurora-bg-active': !isDisabled && !isReadonly
|
|
26
26
|
}, className),
|
|
27
|
+
style: {
|
|
28
|
+
wordBreak: 'break-word'
|
|
29
|
+
},
|
|
27
30
|
disabled: isDisabled || isReadonly
|
|
28
31
|
}, props), {}, {
|
|
29
32
|
ref: ref
|
|
@@ -33,10 +36,11 @@ var MultiSelectItem = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
|
|
|
33
36
|
backgroundColor: "transparent"
|
|
34
37
|
}, /*#__PURE__*/React.createElement(Checkbox, {
|
|
35
38
|
checked: isSelected
|
|
36
|
-
}), /*#__PURE__*/React.createElement(
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
39
|
+
}), /*#__PURE__*/React.createElement("div", {
|
|
40
|
+
className: "aurora-flex aurora-flex-col"
|
|
41
|
+
}, /*#__PURE__*/React.createElement("p", null, option.text), !!option.additionalInfo && /*#__PURE__*/React.createElement("p", {
|
|
42
|
+
className: "aurora-text-xs aurora-text-subtle-light"
|
|
43
|
+
}, option.additionalInfo))));
|
|
40
44
|
});
|
|
41
45
|
MultiSelectItem.displayName = 'MultiSelectItem';
|
|
42
46
|
|
package/build/esm/packages/aurora/src/components/multiselect/components/multiselect_item.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
|
|
1
|
+
{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { objectSpread2 as _objectSpread2 } from '../../../../../../_virtual/_rollupPluginBabelHelpers.js';
|
|
3
|
+
import { Input } from '../../input/input.js';
|
|
4
|
+
import { SearchLineIcon } from '../../../assets/icons/search_icon.js';
|
|
5
|
+
|
|
6
|
+
var MultiSelectSearch = function MultiSelectSearch(props) {
|
|
7
|
+
return /*#__PURE__*/React.createElement(Input, _objectSpread2({
|
|
8
|
+
type: "text",
|
|
9
|
+
preElement: /*#__PURE__*/React.createElement(SearchLineIcon, {
|
|
10
|
+
className: "aurora-h-4 aurora-w-4 aurora-text-inverse-subtle-light"
|
|
11
|
+
})
|
|
12
|
+
}, props));
|
|
13
|
+
};
|
|
14
|
+
|
|
15
|
+
export { MultiSelectSearch };
|
|
16
|
+
//# sourceMappingURL=multiselect_search.js.map
|
package/build/esm/packages/aurora/src/components/multiselect/components/multiselect_search.js.map
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
|
package/build/esm/packages/aurora/src/components/multiselect/components/multiselect_trigger.js
CHANGED
|
@@ -3,24 +3,21 @@ import { objectWithoutProperties as _objectWithoutProperties, objectSpread2 as _
|
|
|
3
3
|
import { cn } from '../../../utilities/cn.js';
|
|
4
4
|
import { Trigger } from '@radix-ui/react-dropdown-menu';
|
|
5
5
|
|
|
6
|
-
var _excluded = ["
|
|
6
|
+
var _excluded = ["hasErrors", "className", "children"];
|
|
7
7
|
var MultiSelectTrigger = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
|
|
8
|
-
var
|
|
9
|
-
placeholder = _ref.placeholder,
|
|
10
|
-
hasErrors = _ref.hasErrors,
|
|
8
|
+
var hasErrors = _ref.hasErrors,
|
|
11
9
|
className = _ref.className,
|
|
10
|
+
children = _ref.children,
|
|
12
11
|
props = _objectWithoutProperties(_ref, _excluded);
|
|
13
12
|
return /*#__PURE__*/React.createElement(Trigger, _objectSpread2(_objectSpread2({
|
|
14
13
|
asChild: true
|
|
15
14
|
}, props), {}, {
|
|
16
15
|
ref: ref
|
|
17
16
|
}), /*#__PURE__*/React.createElement("button", {
|
|
18
|
-
className: cn('aurora-flex aurora-h-10 aurora-w-full aurora-items-center aurora-justify-between aurora-rounded-8 aurora-border aurora-border-input aurora-bg-neutral-0 aurora-px-3 aurora-py-2 aurora-text-s hover:aurora-border-strong focus:focus disabled:aurora-cursor-not-allowed disabled:aurora-bg-subtle disabled:aurora-text-subtle-light disabled:aurora-border-subtle [&>span]:aurora-
|
|
17
|
+
className: cn('aurora-flex aurora-h-10 aurora-w-full aurora-items-center aurora-justify-between aurora-rounded-8 aurora-border aurora-border-input aurora-bg-neutral-0 aurora-px-3 aurora-py-2 aurora-text-s hover:aurora-border-strong focus-visible:focus disabled:aurora-cursor-not-allowed disabled:aurora-bg-subtle disabled:aurora-text-subtle-light disabled:aurora-border-subtle [&>span]:aurora-text-ellipsis [&>span]:aurora-whitespace-nowrap [&>span]:aurora-overflow-hidden focus-visible:aurora-border-active -visible:aurora-border-2 data-[state=open]:aurora-border-active data-[state=open]:aurora-border-2', {
|
|
19
18
|
'!aurora-border-danger aurora-border-2': hasErrors
|
|
20
19
|
}, className)
|
|
21
|
-
},
|
|
22
|
-
return option.text;
|
|
23
|
-
}).join(', ') : placeholder !== null && placeholder !== void 0 ? placeholder : ''));
|
|
20
|
+
}, children));
|
|
24
21
|
});
|
|
25
22
|
MultiSelectTrigger.displayName = 'MultiSelectTrigger';
|
|
26
23
|
|
package/build/esm/packages/aurora/src/components/multiselect/components/multiselect_trigger.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;
|
|
1
|
+
{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
|
|
@@ -0,0 +1,38 @@
|
|
|
1
|
+
import { useMemo, useState, useRef, useCallback, useEffect } from 'react';
|
|
2
|
+
import { slicedToArray as _slicedToArray } from '../../../../../../_virtual/_rollupPluginBabelHelpers.js';
|
|
3
|
+
import { MultiSelectUtils } from '../multiselect_utils.js';
|
|
4
|
+
|
|
5
|
+
var useMultiSelectValue = function useMultiSelectValue(_ref) {
|
|
6
|
+
var values = _ref.values,
|
|
7
|
+
options = _ref.options;
|
|
8
|
+
// Przechowanie aktualnie wybranych opcji w razie jakby ktoras aktualna opcja zniknela z listy options
|
|
9
|
+
var _useState = useState(function () {
|
|
10
|
+
return MultiSelectUtils.findValuesInOptions(values, options);
|
|
11
|
+
}),
|
|
12
|
+
_useState2 = _slicedToArray(_useState, 2),
|
|
13
|
+
selectedOptions = _useState2[0],
|
|
14
|
+
_setSelectedOptions = _useState2[1];
|
|
15
|
+
var selectedOptionsRef = useRef(selectedOptions);
|
|
16
|
+
var setSelectedOptions = useCallback(function (options) {
|
|
17
|
+
selectedOptionsRef.current = options;
|
|
18
|
+
_setSelectedOptions(options);
|
|
19
|
+
}, []);
|
|
20
|
+
useEffect(function () {
|
|
21
|
+
if (MultiSelectUtils.areValuesEqual(values, selectedOptionsRef.current.map(function (o) {
|
|
22
|
+
return o.value;
|
|
23
|
+
}))) {
|
|
24
|
+
return;
|
|
25
|
+
}
|
|
26
|
+
var newOptions = MultiSelectUtils.findValuesInOptions(values, options);
|
|
27
|
+
setSelectedOptions(newOptions);
|
|
28
|
+
}, [options, setSelectedOptions, values]);
|
|
29
|
+
return useMemo(function () {
|
|
30
|
+
return {
|
|
31
|
+
selectedOptions: selectedOptions,
|
|
32
|
+
setSelectedOptions: setSelectedOptions
|
|
33
|
+
};
|
|
34
|
+
}, [selectedOptions, setSelectedOptions]);
|
|
35
|
+
};
|
|
36
|
+
|
|
37
|
+
export { useMultiSelectValue };
|
|
38
|
+
//# sourceMappingURL=use_multiselect_value.js.map
|
package/build/esm/packages/aurora/src/components/multiselect/hooks/use_multiselect_value.js.map
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
import { TMultiSelectProps } from './multiselect_types';
|
|
2
1
|
import React, { PropsWithChildren } from 'react';
|
|
2
|
+
import { TMultiSelectProps } from './multiselect_types';
|
|
3
3
|
export declare const MultiSelect: {
|
|
4
|
-
({ id, options, placeholder, disabled, hasSearch, searchPlaceholder, onValueChange, errors, ...props }: PropsWithChildren<TMultiSelectProps>): React.JSX.Element;
|
|
4
|
+
({ id, options, placeholder, disabled, hasSearch, searchPlaceholder, onValueChange, errors, value, searchNotFoundContent, ...props }: PropsWithChildren<TMultiSelectProps>): React.JSX.Element;
|
|
5
5
|
displayName: string;
|
|
6
6
|
};
|
|
@@ -1,10 +1,12 @@
|
|
|
1
|
-
import React
|
|
2
|
-
import { objectWithoutProperties as _objectWithoutProperties,
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { objectWithoutProperties as _objectWithoutProperties, objectSpread2 as _objectSpread2, toConsumableArray as _toConsumableArray } from '../../../../../_virtual/_rollupPluginBabelHelpers.js';
|
|
3
|
+
import { cn } from '../../utilities/cn.js';
|
|
3
4
|
import { Root, Portal } from '@radix-ui/react-dropdown-menu';
|
|
4
5
|
import { MultiSelectContent } from './components/multiselect_content.js';
|
|
5
6
|
import { MultiSelectTrigger } from './components/multiselect_trigger.js';
|
|
7
|
+
import { useMultiSelectValue } from './hooks/use_multiselect_value.js';
|
|
6
8
|
|
|
7
|
-
var _excluded = ["id", "options", "placeholder", "disabled", "hasSearch", "searchPlaceholder", "onValueChange", "errors"];
|
|
9
|
+
var _excluded = ["id", "options", "placeholder", "disabled", "hasSearch", "searchPlaceholder", "onValueChange", "errors", "value", "searchNotFoundContent"];
|
|
8
10
|
var MultiSelect = function MultiSelect(_ref) {
|
|
9
11
|
var id = _ref.id,
|
|
10
12
|
options = _ref.options,
|
|
@@ -14,54 +16,42 @@ var MultiSelect = function MultiSelect(_ref) {
|
|
|
14
16
|
searchPlaceholder = _ref.searchPlaceholder,
|
|
15
17
|
onValueChange = _ref.onValueChange,
|
|
16
18
|
errors = _ref.errors,
|
|
19
|
+
value = _ref.value,
|
|
20
|
+
searchNotFoundContent = _ref.searchNotFoundContent,
|
|
17
21
|
props = _objectWithoutProperties(_ref, _excluded);
|
|
18
|
-
var
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
};
|
|
34
|
-
window.addEventListener('resize', handleResize);
|
|
35
|
-
return function () {
|
|
36
|
-
window.removeEventListener('resize', handleResize);
|
|
37
|
-
};
|
|
38
|
-
}, []);
|
|
39
|
-
useEffect(function () {
|
|
40
|
-
onValueChange === null || onValueChange === void 0 ? void 0 : onValueChange(selectedOptions);
|
|
41
|
-
}, [selectedOptions]);
|
|
42
|
-
var toggleOption = function toggleOption(option) {
|
|
43
|
-
setSelectedOptions(function (prev) {
|
|
44
|
-
return prev.some(function (selected) {
|
|
45
|
-
return selected.value === option.value;
|
|
46
|
-
}) ? prev.filter(function (selected) {
|
|
47
|
-
return selected.value !== option.value;
|
|
48
|
-
}) : [].concat(_toConsumableArray(prev), [option]);
|
|
49
|
-
});
|
|
22
|
+
var _useMultiSelectValue = useMultiSelectValue({
|
|
23
|
+
values: value,
|
|
24
|
+
options: options
|
|
25
|
+
}),
|
|
26
|
+
selectedOptions = _useMultiSelectValue.selectedOptions,
|
|
27
|
+
setSelectedOptions = _useMultiSelectValue.setSelectedOptions;
|
|
28
|
+
var handleChange = function handleChange(option) {
|
|
29
|
+
var newOptions = selectedOptions.some(function (selected) {
|
|
30
|
+
return selected.value === option.value;
|
|
31
|
+
}) ? selectedOptions.filter(function (selected) {
|
|
32
|
+
return selected.value !== option.value;
|
|
33
|
+
}) : [].concat(_toConsumableArray(selectedOptions), [option]);
|
|
34
|
+
setSelectedOptions(newOptions);
|
|
35
|
+
onValueChange === null || onValueChange === void 0 ? void 0 : onValueChange(newOptions.map(function (o) {
|
|
36
|
+
return o.value;
|
|
37
|
+
}));
|
|
50
38
|
};
|
|
39
|
+
var showPlaceholder = selectedOptions.length === 0;
|
|
51
40
|
return /*#__PURE__*/React.createElement(Root, _objectSpread2({}, props), /*#__PURE__*/React.createElement(MultiSelectTrigger, {
|
|
52
41
|
id: id,
|
|
53
|
-
selectedOptions: selectedOptions,
|
|
54
|
-
placeholder: placeholder,
|
|
55
42
|
disabled: disabled,
|
|
56
|
-
ref: triggerRef,
|
|
57
43
|
hasErrors: !!(errors !== null && errors !== void 0 && errors.length)
|
|
58
|
-
}
|
|
44
|
+
}, /*#__PURE__*/React.createElement("span", {
|
|
45
|
+
className: cn('aurora-pointer-events-none aurora-select-none', showPlaceholder && 'aurora-text-subtle')
|
|
46
|
+
}, !showPlaceholder ? selectedOptions.map(function (option) {
|
|
47
|
+
return option.text;
|
|
48
|
+
}).join(', ') : placeholder !== null && placeholder !== void 0 ? placeholder : '')), /*#__PURE__*/React.createElement(Portal, null, /*#__PURE__*/React.createElement(MultiSelectContent, {
|
|
59
49
|
options: options,
|
|
60
50
|
selectedOptions: selectedOptions,
|
|
61
|
-
toggleOption:
|
|
62
|
-
triggerWidth: triggerWidth,
|
|
51
|
+
toggleOption: handleChange,
|
|
63
52
|
hasSearch: hasSearch,
|
|
64
|
-
searchPlaceholder: searchPlaceholder
|
|
53
|
+
searchPlaceholder: searchPlaceholder,
|
|
54
|
+
searchNotFoundContent: searchNotFoundContent
|
|
65
55
|
})));
|
|
66
56
|
};
|
|
67
57
|
MultiSelect.displayName = 'MultiSelect';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;
|
|
1
|
+
{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as DropdownMenu from '@radix-ui/react-dropdown-menu';
|
|
2
|
-
import React from 'react';
|
|
2
|
+
import React, { ReactNode } from 'react';
|
|
3
3
|
export declare type Option = {
|
|
4
4
|
text: string;
|
|
5
5
|
value: string;
|
|
@@ -15,12 +15,12 @@ export interface TMultiSelectProps extends React.ComponentPropsWithoutRef<typeof
|
|
|
15
15
|
disabled?: boolean;
|
|
16
16
|
hasSearch?: boolean;
|
|
17
17
|
searchPlaceholder?: string;
|
|
18
|
+
searchNotFoundContent?: ReactNode;
|
|
18
19
|
errors?: string | string[];
|
|
19
|
-
onValueChange?: (
|
|
20
|
+
onValueChange?: (value: string[]) => void;
|
|
21
|
+
value?: string[];
|
|
20
22
|
}
|
|
21
23
|
export interface TMultiSelectTriggerProps extends React.ComponentPropsWithoutRef<typeof DropdownMenu.Trigger> {
|
|
22
|
-
selectedOptions: Option[];
|
|
23
|
-
placeholder?: string;
|
|
24
24
|
hasErrors?: boolean;
|
|
25
25
|
}
|
|
26
26
|
export interface TMultiSelectContentProps extends React.ComponentPropsWithoutRef<typeof DropdownMenu.Content> {
|
|
@@ -30,6 +30,7 @@ export interface TMultiSelectContentProps extends React.ComponentPropsWithoutRef
|
|
|
30
30
|
triggerWidth?: number;
|
|
31
31
|
hasSearch?: boolean;
|
|
32
32
|
searchPlaceholder?: string;
|
|
33
|
+
searchNotFoundContent?: ReactNode;
|
|
33
34
|
}
|
|
34
35
|
export interface TMultiSelectItemProps extends React.ComponentPropsWithoutRef<typeof DropdownMenu.Item> {
|
|
35
36
|
option: Option;
|
|
@@ -38,3 +39,7 @@ export interface TMultiSelectItemProps extends React.ComponentPropsWithoutRef<ty
|
|
|
38
39
|
isDisabled?: boolean;
|
|
39
40
|
isReadonly?: boolean;
|
|
40
41
|
}
|
|
42
|
+
export interface TUseMultiSelectValueProps {
|
|
43
|
+
values?: string[];
|
|
44
|
+
options: Option[];
|
|
45
|
+
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"multiselect_types.js","sourceRoot":"","sources":["../../../../../../../src/components/multiselect/multiselect_types.ts"],"names":[],"mappings":"AAAA,OAA8B,+BAA+B,CAAC;AAE9D,
|
|
1
|
+
{"version":3,"file":"multiselect_types.js","sourceRoot":"","sources":["../../../../../../../src/components/multiselect/multiselect_types.ts"],"names":[],"mappings":"AAAA,OAA8B,+BAA+B,CAAC;AAE9D,OAAiC,OAAO,CAAC"}
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
import { Option } from "./multiselect_types";
|
|
2
|
+
export declare class MultiSelectUtils {
|
|
3
|
+
static isOptionVisible: (option: Option, search: string) => boolean;
|
|
4
|
+
static isHeaderVisible: (search: string, options: Option[], index: number) => boolean;
|
|
5
|
+
static findValuesInOptions: (values: string[] | undefined, options: Option[]) => Option[];
|
|
6
|
+
static areValuesEqual: (oldValues?: string[], newValues?: string[]) => boolean | undefined;
|
|
7
|
+
}
|
|
@@ -0,0 +1,44 @@
|
|
|
1
|
+
import { createClass as _createClass, classCallCheck as _classCallCheck, defineProperty as _defineProperty } from '../../../../../_virtual/_rollupPluginBabelHelpers.js';
|
|
2
|
+
|
|
3
|
+
var _MultiSelectUtils;
|
|
4
|
+
var MultiSelectUtils = /*#__PURE__*/_createClass(function MultiSelectUtils() {
|
|
5
|
+
_classCallCheck(this, MultiSelectUtils);
|
|
6
|
+
});
|
|
7
|
+
_MultiSelectUtils = MultiSelectUtils;
|
|
8
|
+
_defineProperty(MultiSelectUtils, "isOptionVisible", function (option, search) {
|
|
9
|
+
return option.text.toLocaleLowerCase().includes(search.toLocaleLowerCase());
|
|
10
|
+
});
|
|
11
|
+
_defineProperty(MultiSelectUtils, "isHeaderVisible", function (search, options, index) {
|
|
12
|
+
var visible = false;
|
|
13
|
+
var i = index + 1;
|
|
14
|
+
while (options[i]) {
|
|
15
|
+
var curr = options[i];
|
|
16
|
+
if (curr.isHeader) {
|
|
17
|
+
break;
|
|
18
|
+
}
|
|
19
|
+
if (_MultiSelectUtils.isOptionVisible(curr, search)) {
|
|
20
|
+
visible = true;
|
|
21
|
+
break;
|
|
22
|
+
}
|
|
23
|
+
i++;
|
|
24
|
+
}
|
|
25
|
+
return visible;
|
|
26
|
+
});
|
|
27
|
+
_defineProperty(MultiSelectUtils, "findValuesInOptions", function (values, options) {
|
|
28
|
+
if (!(values !== null && values !== void 0 && values.length)) return [];
|
|
29
|
+
return options.filter(function (opt) {
|
|
30
|
+
return values.includes(opt.value);
|
|
31
|
+
});
|
|
32
|
+
});
|
|
33
|
+
_defineProperty(MultiSelectUtils, "areValuesEqual", function (oldValues, newValues) {
|
|
34
|
+
var oldSet = new Set(oldValues);
|
|
35
|
+
var newSet = new Set(newValues);
|
|
36
|
+
return (oldValues === null || oldValues === void 0 ? void 0 : oldValues.every(function (item) {
|
|
37
|
+
return newSet.has(item);
|
|
38
|
+
})) && (newValues === null || newValues === void 0 ? void 0 : newValues.every(function (item) {
|
|
39
|
+
return oldSet.has(item);
|
|
40
|
+
}));
|
|
41
|
+
});
|
|
42
|
+
|
|
43
|
+
export { MultiSelectUtils };
|
|
44
|
+
//# sourceMappingURL=multiselect_utils.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
|