@dxc-technology/halstack-react 0.0.0-b063530 → 0.0.0-b0ec7b9
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/dropdown/Dropdown.js +9 -28
- package/package.json +2 -2
- package/resultset-table/ResultsetTable.js +5 -2
- package/resultset-table/types.d.ts +1 -1
- package/select/Listbox.d.ts +3 -3
- package/select/Listbox.js +16 -20
- package/select/Option.d.ts +3 -3
- package/select/Option.js +13 -9
- package/select/Select.js +69 -188
- package/select/Select.stories.tsx +2 -2
- package/select/selectUtils.d.ts +41 -0
- package/select/selectUtils.js +129 -0
- package/text-input/TextInput.js +19 -38
- package/utils/useWidth.d.ts +2 -0
- package/utils/useWidth.js +30 -0
package/dropdown/Dropdown.js
CHANGED
|
@@ -17,29 +17,10 @@ var _useTheme = _interopRequireDefault(require("../useTheme"));
|
|
|
17
17
|
var Popover = _interopRequireWildcard(require("@radix-ui/react-popover"));
|
|
18
18
|
var _DropdownMenu = _interopRequireDefault(require("./DropdownMenu"));
|
|
19
19
|
var _Icon = _interopRequireDefault(require("../icon/Icon"));
|
|
20
|
+
var _useWidth = _interopRequireDefault(require("../utils/useWidth"));
|
|
20
21
|
var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6;
|
|
21
22
|
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
|
|
22
23
|
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof3(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
|
|
23
|
-
var useWidth = function useWidth(target) {
|
|
24
|
-
var _useState = (0, _react.useState)(0),
|
|
25
|
-
_useState2 = (0, _slicedToArray2["default"])(_useState, 2),
|
|
26
|
-
width = _useState2[0],
|
|
27
|
-
setWidth = _useState2[1];
|
|
28
|
-
(0, _react.useEffect)(function () {
|
|
29
|
-
if (target != null) {
|
|
30
|
-
setWidth(target.getBoundingClientRect().width);
|
|
31
|
-
var triggerObserver = new ResizeObserver(function (entries) {
|
|
32
|
-
var rect = entries[0].target.getBoundingClientRect();
|
|
33
|
-
setWidth(rect === null || rect === void 0 ? void 0 : rect.width);
|
|
34
|
-
});
|
|
35
|
-
triggerObserver.observe(target);
|
|
36
|
-
return function () {
|
|
37
|
-
triggerObserver.unobserve(target);
|
|
38
|
-
};
|
|
39
|
-
}
|
|
40
|
-
}, [target]);
|
|
41
|
-
return width;
|
|
42
|
-
};
|
|
43
24
|
var DxcDropdown = function DxcDropdown(_ref) {
|
|
44
25
|
var options = _ref.options,
|
|
45
26
|
_ref$optionsIconPosit = _ref.optionsIconPosition,
|
|
@@ -64,18 +45,18 @@ var DxcDropdown = function DxcDropdown(_ref) {
|
|
|
64
45
|
var id = (0, _react.useId)();
|
|
65
46
|
var triggerId = "trigger-".concat(id);
|
|
66
47
|
var menuId = "menu-".concat(id);
|
|
67
|
-
var
|
|
48
|
+
var _useState = (0, _react.useState)(false),
|
|
49
|
+
_useState2 = (0, _slicedToArray2["default"])(_useState, 2),
|
|
50
|
+
isOpen = _useState2[0],
|
|
51
|
+
changeIsOpen = _useState2[1];
|
|
52
|
+
var _useState3 = (0, _react.useState)(0),
|
|
68
53
|
_useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
var _useState5 = (0, _react.useState)(0),
|
|
72
|
-
_useState6 = (0, _slicedToArray2["default"])(_useState5, 2),
|
|
73
|
-
visualFocusIndex = _useState6[0],
|
|
74
|
-
setVisualFocusIndex = _useState6[1];
|
|
54
|
+
visualFocusIndex = _useState4[0],
|
|
55
|
+
setVisualFocusIndex = _useState4[1];
|
|
75
56
|
var colorsTheme = (0, _useTheme["default"])();
|
|
76
57
|
var triggerRef = (0, _react.useRef)(null);
|
|
77
58
|
var menuRef = (0, _react.useRef)(null);
|
|
78
|
-
var width =
|
|
59
|
+
var width = (0, _useWidth["default"])(triggerRef.current);
|
|
79
60
|
var handleOnOpenMenu = function handleOnOpenMenu() {
|
|
80
61
|
changeIsOpen(true);
|
|
81
62
|
};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@dxc-technology/halstack-react",
|
|
3
|
-
"version": "0.0.0-
|
|
3
|
+
"version": "0.0.0-b0ec7b9",
|
|
4
4
|
"description": "DXC Halstack React components library",
|
|
5
5
|
"repository": "dxc-technology/halstack-react",
|
|
6
6
|
"homepage": "https://developer.dxc.com/halstack",
|
|
@@ -38,7 +38,7 @@
|
|
|
38
38
|
},
|
|
39
39
|
"devDependencies": {
|
|
40
40
|
"@babel/cli": "^7.16.8",
|
|
41
|
-
"@babel/core": "^7.24.
|
|
41
|
+
"@babel/core": "^7.24.7",
|
|
42
42
|
"@babel/plugin-proposal-nullish-coalescing-operator": "^7.13.8",
|
|
43
43
|
"@babel/plugin-proposal-optional-chaining": "^7.13.8",
|
|
44
44
|
"@babel/plugin-transform-runtime": "^7.16.8",
|
|
@@ -24,14 +24,17 @@ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e;
|
|
|
24
24
|
var normalizeSortValue = function normalizeSortValue(sortValue) {
|
|
25
25
|
return typeof sortValue === "string" ? sortValue.toUpperCase() : sortValue;
|
|
26
26
|
};
|
|
27
|
+
var isDateType = function isDateType(value) {
|
|
28
|
+
return value instanceof Date;
|
|
29
|
+
};
|
|
27
30
|
var sortArray = function sortArray(index, order, resultset) {
|
|
28
31
|
return resultset.slice().sort(function (element1, element2) {
|
|
29
32
|
var sortValueA = normalizeSortValue(element1.cells[index].sortValue || element1[index].displayValue);
|
|
30
33
|
var sortValueB = normalizeSortValue(element2.cells[index].sortValue || element2[index].displayValue);
|
|
31
34
|
var comparison = 0;
|
|
32
|
-
if ((0, _typeof2["default"])(sortValueA) === "object") {
|
|
35
|
+
if ((0, _typeof2["default"])(sortValueA) === "object" && !isDateType(sortValueA)) {
|
|
33
36
|
comparison = -1;
|
|
34
|
-
} else if ((0, _typeof2["default"])(sortValueB) === "object") {
|
|
37
|
+
} else if ((0, _typeof2["default"])(sortValueB) === "object" && !isDateType(sortValueB)) {
|
|
35
38
|
comparison = 1;
|
|
36
39
|
} else if (sortValueA > sortValueB) {
|
|
37
40
|
comparison = 1;
|
|
@@ -25,7 +25,7 @@ type Cell = {
|
|
|
25
25
|
* Value to be used when sorting the table by that
|
|
26
26
|
* column. If not indicated displayValue will be used for sorting.
|
|
27
27
|
*/
|
|
28
|
-
sortValue?: string;
|
|
28
|
+
sortValue?: string | number | Date;
|
|
29
29
|
};
|
|
30
30
|
export type Row = Cell[];
|
|
31
31
|
type CommonProps = {
|
package/select/Listbox.d.ts
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
|
|
1
|
+
/// <reference types="react" />
|
|
2
2
|
import { ListboxProps } from "./types";
|
|
3
|
-
declare const
|
|
4
|
-
export default
|
|
3
|
+
declare const Listbox: ({ id, currentValue, options, visualFocusIndex, lastOptionIndex, multiple, optional, optionalItem, searchable, handleOptionOnClick, styles, }: ListboxProps) => JSX.Element;
|
|
4
|
+
export default Listbox;
|
package/select/Listbox.js
CHANGED
|
@@ -12,15 +12,10 @@ var _styledComponents = _interopRequireDefault(require("styled-components"));
|
|
|
12
12
|
var _useTranslatedLabels = _interopRequireDefault(require("../useTranslatedLabels"));
|
|
13
13
|
var _Option = _interopRequireDefault(require("./Option"));
|
|
14
14
|
var _Icon = _interopRequireDefault(require("../icon/Icon"));
|
|
15
|
-
var
|
|
15
|
+
var _selectUtils = require("./selectUtils");
|
|
16
|
+
var _templateObject, _templateObject2, _templateObject3, _templateObject4;
|
|
16
17
|
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
|
|
17
18
|
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
|
|
18
|
-
var groupsHaveOptions = function groupsHaveOptions(options) {
|
|
19
|
-
return options !== null && options !== void 0 && options[0].options ? options.some(function (groupOption) {
|
|
20
|
-
var _groupOption$options;
|
|
21
|
-
return ((_groupOption$options = groupOption.options) === null || _groupOption$options === void 0 ? void 0 : _groupOption$options.length) > 0;
|
|
22
|
-
}) : true;
|
|
23
|
-
};
|
|
24
19
|
var Listbox = function Listbox(_ref) {
|
|
25
20
|
var id = _ref.id,
|
|
26
21
|
currentValue = _ref.currentValue,
|
|
@@ -35,24 +30,26 @@ var Listbox = function Listbox(_ref) {
|
|
|
35
30
|
styles = _ref.styles;
|
|
36
31
|
var translatedLabels = (0, _useTranslatedLabels["default"])();
|
|
37
32
|
var listboxRef = (0, _react.useRef)(null);
|
|
38
|
-
var listboxId = "select-".concat((0, _react.useId)());
|
|
39
33
|
var globalIndex = optional && !multiple ? 0 : -1;
|
|
40
34
|
var mapOptionFunc = function mapOptionFunc(option, mapIndex) {
|
|
41
|
-
var groupId = "".concat(
|
|
35
|
+
var groupId = "".concat(id, "-group-").concat(mapIndex);
|
|
42
36
|
if (option.options) {
|
|
43
37
|
return option.options.length > 0 && /*#__PURE__*/_react["default"].createElement("li", {
|
|
44
38
|
key: groupId
|
|
45
|
-
}, /*#__PURE__*/_react["default"].createElement(
|
|
39
|
+
}, /*#__PURE__*/_react["default"].createElement("ul", {
|
|
46
40
|
role: "listbox",
|
|
47
|
-
"aria-labelledby": groupId
|
|
41
|
+
"aria-labelledby": groupId,
|
|
42
|
+
style: {
|
|
43
|
+
padding: 0
|
|
44
|
+
}
|
|
48
45
|
}, /*#__PURE__*/_react["default"].createElement(GroupLabel, {
|
|
49
46
|
role: "presentation",
|
|
50
47
|
id: groupId
|
|
51
48
|
}, option.label), option.options.map(function (singleOption) {
|
|
52
49
|
globalIndex++;
|
|
53
50
|
return /*#__PURE__*/_react["default"].createElement(_Option["default"], {
|
|
54
|
-
key: "".concat(
|
|
55
|
-
id: "".concat(
|
|
51
|
+
key: "".concat(id, "-option-").concat(singleOption.value),
|
|
52
|
+
id: "".concat(id, "-option-").concat(globalIndex),
|
|
56
53
|
option: singleOption,
|
|
57
54
|
onClick: handleOptionOnClick,
|
|
58
55
|
multiple: multiple,
|
|
@@ -65,8 +62,8 @@ var Listbox = function Listbox(_ref) {
|
|
|
65
62
|
} else {
|
|
66
63
|
globalIndex++;
|
|
67
64
|
return /*#__PURE__*/_react["default"].createElement(_Option["default"], {
|
|
68
|
-
key: "".concat(
|
|
69
|
-
id: "".concat(
|
|
65
|
+
key: "".concat(id, "-option-").concat(option.value),
|
|
66
|
+
id: "".concat(id, "-option-").concat(globalIndex),
|
|
70
67
|
option: option,
|
|
71
68
|
onClick: handleOptionOnClick,
|
|
72
69
|
multiple: multiple,
|
|
@@ -111,7 +108,7 @@ var Listbox = function Listbox(_ref) {
|
|
|
111
108
|
style: styles,
|
|
112
109
|
role: hasOptionGroups ? "list" : "listbox",
|
|
113
110
|
"aria-label": "List of options"
|
|
114
|
-
}, searchable && (options.length === 0 || !groupsHaveOptions(options)) ? /*#__PURE__*/_react["default"].createElement(OptionsSystemMessage, null, /*#__PURE__*/_react["default"].createElement(NoMatchesFoundIcon, null, /*#__PURE__*/_react["default"].createElement(_Icon["default"], {
|
|
111
|
+
}, searchable && (options.length === 0 || !(0, _selectUtils.groupsHaveOptions)(options)) ? /*#__PURE__*/_react["default"].createElement(OptionsSystemMessage, null, /*#__PURE__*/_react["default"].createElement(NoMatchesFoundIcon, null, /*#__PURE__*/_react["default"].createElement(_Icon["default"], {
|
|
115
112
|
icon: "search_off"
|
|
116
113
|
})), translatedLabels.select.noMatchesErrorMessage) : optional && !multiple && /*#__PURE__*/_react["default"].createElement(_Option["default"], {
|
|
117
114
|
key: "".concat(id, "-option-").concat(optionalItem.value),
|
|
@@ -125,7 +122,7 @@ var Listbox = function Listbox(_ref) {
|
|
|
125
122
|
isSelected: multiple ? currentValue.includes(optionalItem.value) : currentValue === optionalItem.value
|
|
126
123
|
}), options.map(mapOptionFunc));
|
|
127
124
|
};
|
|
128
|
-
var ListboxContainer = _styledComponents["default"].ul(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n box-sizing: border-box;\n max-height: 304px;\n overflow-y: auto;\n margin: 0;\n padding: 0.25rem 0;\n background-color: ", ";\n border: 1px solid ", ";\n border-radius: 0.25rem;\n box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);\n
|
|
125
|
+
var ListboxContainer = _styledComponents["default"].ul(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n box-sizing: border-box;\n max-height: 304px;\n overflow-y: auto;\n margin: 0;\n padding: 0.25rem 0;\n background-color: ", ";\n border: 1px solid ", ";\n border-radius: 0.25rem;\n box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);\n color: ", ";\n font-family: ", ";\n font-size: ", ";\n font-style: ", ";\n font-weight: ", ";\n line-height: 24px;\n cursor: default;\n"])), function (props) {
|
|
129
126
|
return props.theme.listDialogBackgroundColor;
|
|
130
127
|
}, function (props) {
|
|
131
128
|
return props.theme.listDialogBorderColor;
|
|
@@ -144,8 +141,7 @@ var OptionsSystemMessage = _styledComponents["default"].span(_templateObject2 ||
|
|
|
144
141
|
return props.theme.systemMessageFontColor;
|
|
145
142
|
});
|
|
146
143
|
var NoMatchesFoundIcon = _styledComponents["default"].span(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["\n display: flex;\n flex-wrap: wrap;\n align-content: center;\n height: 16px;\n width: 16px;\n padding: 4px;\n margin-right: 0.25rem;\n font-size: 16px;\n"])));
|
|
147
|
-
var
|
|
148
|
-
var GroupLabel = _styledComponents["default"].li(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2["default"])(["\n padding: 4px 16px;\n font-weight: ", ";\n line-height: 1.715em;\n"])), function (props) {
|
|
144
|
+
var GroupLabel = _styledComponents["default"].li(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["\n padding: 4px 16px;\n font-weight: ", ";\n line-height: 1.715em;\n"])), function (props) {
|
|
149
145
|
return props.theme.listGroupLabelFontWeight;
|
|
150
146
|
});
|
|
151
|
-
var _default = exports["default"] =
|
|
147
|
+
var _default = exports["default"] = Listbox;
|
package/select/Option.d.ts
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
|
|
1
|
+
/// <reference types="react" />
|
|
2
2
|
import { OptionProps } from "../select/types";
|
|
3
|
-
declare const
|
|
4
|
-
export default
|
|
3
|
+
declare const Option: ({ id, option, onClick, multiple, visualFocused, isGroupedOption, isLastOption, isSelected, }: OptionProps) => JSX.Element;
|
|
4
|
+
export default Option;
|
package/select/Option.js
CHANGED
|
@@ -34,18 +34,22 @@ var Option = function Option(_ref) {
|
|
|
34
34
|
visualFocused: visualFocused,
|
|
35
35
|
selected: isSelected,
|
|
36
36
|
role: "option",
|
|
37
|
-
"aria-selected": !multiple ? isSelected : undefined
|
|
38
|
-
tabIndex: 0
|
|
37
|
+
"aria-selected": !multiple ? isSelected : undefined
|
|
39
38
|
}, /*#__PURE__*/_react["default"].createElement(StyledOption, {
|
|
40
39
|
visualFocused: visualFocused,
|
|
41
40
|
selected: isSelected,
|
|
42
41
|
last: isLastOption,
|
|
43
42
|
grouped: isGroupedOption,
|
|
44
43
|
multiple: multiple
|
|
45
|
-
}, multiple && /*#__PURE__*/_react["default"].createElement(
|
|
44
|
+
}, multiple && /*#__PURE__*/_react["default"].createElement("div", {
|
|
45
|
+
style: {
|
|
46
|
+
display: "flex",
|
|
47
|
+
pointerEvents: "none"
|
|
48
|
+
}
|
|
49
|
+
}, /*#__PURE__*/_react["default"].createElement(_Checkbox["default"], {
|
|
46
50
|
checked: isSelected,
|
|
47
51
|
tabIndex: -1
|
|
48
|
-
}), option.icon && /*#__PURE__*/_react["default"].createElement(OptionIcon, {
|
|
52
|
+
})), option.icon && /*#__PURE__*/_react["default"].createElement(OptionIcon, {
|
|
49
53
|
grouped: isGroupedOption,
|
|
50
54
|
multiple: multiple
|
|
51
55
|
}, typeof option.icon === "string" ? /*#__PURE__*/_react["default"].createElement(_Icon["default"], {
|
|
@@ -60,7 +64,7 @@ var Option = function Option(_ref) {
|
|
|
60
64
|
icon: "done"
|
|
61
65
|
})))));
|
|
62
66
|
};
|
|
63
|
-
var OptionItem = _styledComponents["default"].li(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n padding: 0 0.5rem;\n box-shadow: inset 0 0 0 2px transparent;\n ", "\n ", ";\n
|
|
67
|
+
var OptionItem = _styledComponents["default"].li(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n padding: 0 0.5rem;\n box-shadow: inset 0 0 0 2px transparent;\n ", "\n ", ";\n cursor: pointer;\n\n &:hover {\n ", ";\n }\n &:active {\n ", ";\n }\n"])), function (props) {
|
|
64
68
|
return props.visualFocused && "box-shadow: inset 0 0 0 2px ".concat(props.theme.focusListOptionBorderColor, ";");
|
|
65
69
|
}, function (props) {
|
|
66
70
|
return props.selected && "background-color: ".concat(props.theme.selectedListOptionBackgroundColor);
|
|
@@ -69,21 +73,21 @@ var OptionItem = _styledComponents["default"].li(_templateObject || (_templateOb
|
|
|
69
73
|
}, function (props) {
|
|
70
74
|
return props.selected ? "background-color: ".concat(props.theme.selectedActiveListOptionBackgroundColor, ";") : "background-color: ".concat(props.theme.unselectedActiveListOptionBackgroundColor, ";");
|
|
71
75
|
});
|
|
72
|
-
var StyledOption = _styledComponents["default"].span(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["\n display: flex;\n
|
|
76
|
+
var StyledOption = _styledComponents["default"].span(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["\n box-sizing: border-box;\n display: flex;\n align-items: center;\n height: 32px;\n padding: 4px 8px 4px 0;\n ", "\n ", ";\n"])), function (props) {
|
|
73
77
|
return props.grouped && props.multiple && "padding-left: 16px;";
|
|
74
78
|
}, function (props) {
|
|
75
79
|
return props.last || props.visualFocused || props.selected ? "border-bottom: 1px solid transparent" : "border-bottom: 1px solid ".concat(props.theme.listOptionDividerColor);
|
|
76
80
|
});
|
|
77
|
-
var OptionIcon = _styledComponents["default"].span(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["\n
|
|
81
|
+
var OptionIcon = _styledComponents["default"].span(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["\n margin-left: ", ";\n display: grid;\n place-items: center;\n color: ", ";\n font-size: 24px;\n svg {\n height: 24px;\n width: 24px;\n }\n"])), function (props) {
|
|
78
82
|
return props.grouped && !props.multiple ? "16px" : "8px";
|
|
79
83
|
}, function (props) {
|
|
80
84
|
return props.theme.listOptionIconColor;
|
|
81
85
|
});
|
|
82
|
-
var OptionContent = _styledComponents["default"].span(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["\n display: flex;\n justify-content: space-between;\n gap: 0.25rem;\n width: 100%;\n overflow: hidden;\n
|
|
86
|
+
var OptionContent = _styledComponents["default"].span(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["\n margin-left: ", ";\n display: flex;\n justify-content: space-between;\n gap: 0.25rem;\n width: 100%;\n overflow: hidden;\n"])), function (props) {
|
|
83
87
|
return props.grouped && !props.multiple && !props.hasIcon ? "16px" : "8px";
|
|
84
88
|
});
|
|
85
89
|
var OptionLabel = _styledComponents["default"].span(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2["default"])(["\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n"])));
|
|
86
90
|
var OptionSelectedIndicator = _styledComponents["default"].span(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2["default"])(["\n display: flex;\n align-items: center;\n color: ", ";\n font-size: 16px;\n"])), function (props) {
|
|
87
91
|
return props.theme.selectedListOptionIconColor;
|
|
88
92
|
});
|
|
89
|
-
var _default = exports["default"] =
|
|
93
|
+
var _default = exports["default"] = Option;
|
package/select/Select.js
CHANGED
|
@@ -19,117 +19,11 @@ var _utils = require("../common/utils");
|
|
|
19
19
|
var _Listbox = _interopRequireDefault(require("./Listbox"));
|
|
20
20
|
var Popover = _interopRequireWildcard(require("@radix-ui/react-popover"));
|
|
21
21
|
var _Icon = _interopRequireDefault(require("../icon/Icon"));
|
|
22
|
-
var
|
|
22
|
+
var _useWidth = _interopRequireDefault(require("../utils/useWidth"));
|
|
23
|
+
var _selectUtils = require("./selectUtils");
|
|
24
|
+
var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16;
|
|
23
25
|
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
|
|
24
26
|
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof3(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
|
|
25
|
-
var isOptionGroup = function isOptionGroup(option) {
|
|
26
|
-
return "options" in option && option.options != null;
|
|
27
|
-
};
|
|
28
|
-
var isArrayOfOptionGroups = function isArrayOfOptionGroups(options) {
|
|
29
|
-
return isOptionGroup(options[0]);
|
|
30
|
-
};
|
|
31
|
-
var groupsHaveOptions = function groupsHaveOptions(filteredOptions) {
|
|
32
|
-
return isArrayOfOptionGroups(filteredOptions) ? filteredOptions.some(function (groupOption) {
|
|
33
|
-
var _groupOption$options;
|
|
34
|
-
return ((_groupOption$options = groupOption.options) === null || _groupOption$options === void 0 ? void 0 : _groupOption$options.length) > 0;
|
|
35
|
-
}) : true;
|
|
36
|
-
};
|
|
37
|
-
var canOpenOptions = function canOpenOptions(options, disabled) {
|
|
38
|
-
return !disabled && (options === null || options === void 0 ? void 0 : options.length) > 0 && groupsHaveOptions(options);
|
|
39
|
-
};
|
|
40
|
-
var filterOptionsBySearchValue = function filterOptionsBySearchValue(options, searchValue) {
|
|
41
|
-
if ((options === null || options === void 0 ? void 0 : options.length) > 0) {
|
|
42
|
-
if (isArrayOfOptionGroups(options)) return options.map(function (optionGroup) {
|
|
43
|
-
var group = {
|
|
44
|
-
label: optionGroup.label,
|
|
45
|
-
options: optionGroup.options.filter(function (option) {
|
|
46
|
-
return option.label.toUpperCase().includes(searchValue.toUpperCase());
|
|
47
|
-
})
|
|
48
|
-
};
|
|
49
|
-
return group;
|
|
50
|
-
});else return options.filter(function (option) {
|
|
51
|
-
return option.label.toUpperCase().includes(searchValue.toUpperCase());
|
|
52
|
-
});
|
|
53
|
-
}
|
|
54
|
-
};
|
|
55
|
-
var getLastOptionIndex = function getLastOptionIndex(options, filteredOptions, searchable, optional, multiple) {
|
|
56
|
-
var last = 0;
|
|
57
|
-
var reducer = function reducer(acc, current) {
|
|
58
|
-
var _current$options;
|
|
59
|
-
return acc + ((_current$options = current.options) === null || _current$options === void 0 ? void 0 : _current$options.length);
|
|
60
|
-
};
|
|
61
|
-
if (searchable && (filteredOptions === null || filteredOptions === void 0 ? void 0 : filteredOptions.length) > 0) isArrayOfOptionGroups(filteredOptions) ? last = filteredOptions.reduce(reducer, 0) - 1 : last = filteredOptions.length - 1;else if ((options === null || options === void 0 ? void 0 : options.length) > 0) isArrayOfOptionGroups(options) ? last = options.reduce(reducer, 0) - 1 : last = options.length - 1;
|
|
62
|
-
return optional && !multiple ? last + 1 : last;
|
|
63
|
-
};
|
|
64
|
-
var getSelectedOption = function getSelectedOption(value, options, multiple, optional, optionalItem) {
|
|
65
|
-
var selectedOption = multiple ? [] : {};
|
|
66
|
-
var singleSelectionIndex;
|
|
67
|
-
if (multiple) {
|
|
68
|
-
if ((options === null || options === void 0 ? void 0 : options.length) > 0) {
|
|
69
|
-
options.forEach(function (option) {
|
|
70
|
-
if (isOptionGroup(option)) option.options.forEach(function (singleOption) {
|
|
71
|
-
if (value.includes(singleOption.value) && Array.isArray(selectedOption)) selectedOption.push(singleOption);
|
|
72
|
-
});else if (value.includes(option.value) && Array.isArray(selectedOption)) selectedOption.push(option);
|
|
73
|
-
});
|
|
74
|
-
}
|
|
75
|
-
} else {
|
|
76
|
-
if (optional && value === "") {
|
|
77
|
-
selectedOption = optionalItem;
|
|
78
|
-
singleSelectionIndex = 0;
|
|
79
|
-
} else if ((options === null || options === void 0 ? void 0 : options.length) > 0) {
|
|
80
|
-
var group_index = 0;
|
|
81
|
-
options.some(function (option, index) {
|
|
82
|
-
if (isOptionGroup(option)) {
|
|
83
|
-
option.options.some(function (singleOption) {
|
|
84
|
-
if (singleOption.value === value) {
|
|
85
|
-
selectedOption = singleOption;
|
|
86
|
-
singleSelectionIndex = optional ? group_index + 1 : group_index;
|
|
87
|
-
return true;
|
|
88
|
-
}
|
|
89
|
-
group_index++;
|
|
90
|
-
});
|
|
91
|
-
} else if (option.value === value) {
|
|
92
|
-
selectedOption = option;
|
|
93
|
-
singleSelectionIndex = optional ? index + 1 : index;
|
|
94
|
-
return true;
|
|
95
|
-
}
|
|
96
|
-
});
|
|
97
|
-
}
|
|
98
|
-
}
|
|
99
|
-
return {
|
|
100
|
-
selectedOption: selectedOption,
|
|
101
|
-
singleSelectionIndex: singleSelectionIndex
|
|
102
|
-
};
|
|
103
|
-
};
|
|
104
|
-
var getSelectedOptionLabel = function getSelectedOptionLabel(placeholder, selectedOption) {
|
|
105
|
-
var _selectedOption$label;
|
|
106
|
-
if (Array.isArray(selectedOption)) return selectedOption.length === 0 ? placeholder : selectedOption.map(function (option) {
|
|
107
|
-
return option.label;
|
|
108
|
-
}).join(", ");else return (_selectedOption$label = selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.label) !== null && _selectedOption$label !== void 0 ? _selectedOption$label : placeholder;
|
|
109
|
-
};
|
|
110
|
-
var notOptionalCheck = function notOptionalCheck(value, multiple, optional) {
|
|
111
|
-
return !optional && (multiple ? value.length === 0 : value === "");
|
|
112
|
-
};
|
|
113
|
-
var useWidth = function useWidth(target) {
|
|
114
|
-
var _useState = (0, _react.useState)(0),
|
|
115
|
-
_useState2 = (0, _slicedToArray2["default"])(_useState, 2),
|
|
116
|
-
width = _useState2[0],
|
|
117
|
-
setWidth = _useState2[1];
|
|
118
|
-
(0, _react.useEffect)(function () {
|
|
119
|
-
if (target != null) {
|
|
120
|
-
setWidth(target.getBoundingClientRect().width);
|
|
121
|
-
var triggerObserver = new ResizeObserver(function (entries) {
|
|
122
|
-
var rect = entries[0].target.getBoundingClientRect();
|
|
123
|
-
setWidth(rect === null || rect === void 0 ? void 0 : rect.width);
|
|
124
|
-
});
|
|
125
|
-
triggerObserver.observe(target);
|
|
126
|
-
return function () {
|
|
127
|
-
triggerObserver.unobserve(target);
|
|
128
|
-
};
|
|
129
|
-
}
|
|
130
|
-
}, [target]);
|
|
131
|
-
return width;
|
|
132
|
-
};
|
|
133
27
|
var DxcSelect = /*#__PURE__*/_react["default"].forwardRef(function (_ref, ref) {
|
|
134
28
|
var _ref4;
|
|
135
29
|
var label = _ref.label,
|
|
@@ -143,12 +37,12 @@ var DxcSelect = /*#__PURE__*/_react["default"].forwardRef(function (_ref, ref) {
|
|
|
143
37
|
placeholder = _ref$placeholder === void 0 ? "" : _ref$placeholder,
|
|
144
38
|
_ref$disabled = _ref.disabled,
|
|
145
39
|
disabled = _ref$disabled === void 0 ? false : _ref$disabled,
|
|
40
|
+
_ref$multiple = _ref.multiple,
|
|
41
|
+
multiple = _ref$multiple === void 0 ? false : _ref$multiple,
|
|
146
42
|
_ref$optional = _ref.optional,
|
|
147
43
|
optional = _ref$optional === void 0 ? false : _ref$optional,
|
|
148
44
|
_ref$searchable = _ref.searchable,
|
|
149
45
|
searchable = _ref$searchable === void 0 ? false : _ref$searchable,
|
|
150
|
-
_ref$multiple = _ref.multiple,
|
|
151
|
-
multiple = _ref$multiple === void 0 ? false : _ref$multiple,
|
|
152
46
|
onChange = _ref.onChange,
|
|
153
47
|
onBlur = _ref.onBlur,
|
|
154
48
|
error = _ref.error,
|
|
@@ -159,29 +53,28 @@ var DxcSelect = /*#__PURE__*/_react["default"].forwardRef(function (_ref, ref) {
|
|
|
159
53
|
tabIndex = _ref$tabIndex === void 0 ? 0 : _ref$tabIndex;
|
|
160
54
|
var selectId = "select-".concat((0, _react.useId)());
|
|
161
55
|
var selectLabelId = "label-".concat(selectId);
|
|
162
|
-
var searchableInputId = "searchable-input-".concat(selectId);
|
|
163
56
|
var errorId = "error-".concat(selectId);
|
|
164
|
-
var
|
|
165
|
-
var
|
|
57
|
+
var listboxId = "".concat(selectId, "-listbox");
|
|
58
|
+
var _useState = (0, _react.useState)(defaultValue !== null && defaultValue !== void 0 ? defaultValue : multiple ? [] : ""),
|
|
59
|
+
_useState2 = (0, _slicedToArray2["default"])(_useState, 2),
|
|
60
|
+
innerValue = _useState2[0],
|
|
61
|
+
setInnerValue = _useState2[1];
|
|
62
|
+
var _useState3 = (0, _react.useState)(""),
|
|
166
63
|
_useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
var _useState5 = (0, _react.useState)(
|
|
64
|
+
searchValue = _useState4[0],
|
|
65
|
+
setSearchValue = _useState4[1];
|
|
66
|
+
var _useState5 = (0, _react.useState)(-1),
|
|
170
67
|
_useState6 = (0, _slicedToArray2["default"])(_useState5, 2),
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
var _useState7 = (0, _react.useState)(
|
|
68
|
+
visualFocusIndex = _useState6[0],
|
|
69
|
+
changeVisualFocusIndex = _useState6[1];
|
|
70
|
+
var _useState7 = (0, _react.useState)(false),
|
|
174
71
|
_useState8 = (0, _slicedToArray2["default"])(_useState7, 2),
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
var _useState9 = (0, _react.useState)(false),
|
|
178
|
-
_useState10 = (0, _slicedToArray2["default"])(_useState9, 2),
|
|
179
|
-
isOpen = _useState10[0],
|
|
180
|
-
changeIsOpen = _useState10[1];
|
|
72
|
+
isOpen = _useState8[0],
|
|
73
|
+
changeIsOpen = _useState8[1];
|
|
181
74
|
var selectRef = (0, _react.useRef)(null);
|
|
182
75
|
var selectSearchInputRef = (0, _react.useRef)(null);
|
|
183
76
|
var selectedOptionLabelRef = (0, _react.useRef)(null);
|
|
184
|
-
var width =
|
|
77
|
+
var width = (0, _useWidth["default"])(selectRef.current);
|
|
185
78
|
var colorsTheme = (0, _useTheme["default"])();
|
|
186
79
|
var translatedLabels = (0, _useTranslatedLabels["default"])();
|
|
187
80
|
var optionalItem = {
|
|
@@ -189,20 +82,20 @@ var DxcSelect = /*#__PURE__*/_react["default"].forwardRef(function (_ref, ref) {
|
|
|
189
82
|
value: ""
|
|
190
83
|
};
|
|
191
84
|
var filteredOptions = (0, _react.useMemo)(function () {
|
|
192
|
-
return filterOptionsBySearchValue(options, searchValue);
|
|
85
|
+
return (0, _selectUtils.filterOptionsBySearchValue)(options, searchValue);
|
|
193
86
|
}, [options, searchValue]);
|
|
194
87
|
var lastOptionIndex = (0, _react.useMemo)(function () {
|
|
195
|
-
return getLastOptionIndex(options, filteredOptions, searchable, optional, multiple);
|
|
88
|
+
return (0, _selectUtils.getLastOptionIndex)(options, filteredOptions, searchable, optional, multiple);
|
|
196
89
|
}, [options, filteredOptions, searchable, optional, multiple]);
|
|
197
90
|
var _useMemo = (0, _react.useMemo)(function () {
|
|
198
|
-
return getSelectedOption(value !== null && value !== void 0 ? value : innerValue, options, multiple, optional, optionalItem);
|
|
91
|
+
return (0, _selectUtils.getSelectedOption)(value !== null && value !== void 0 ? value : innerValue, options, multiple, optional, optionalItem);
|
|
199
92
|
}, [value, innerValue, options, multiple, optional, optionalItem]),
|
|
200
93
|
selectedOption = _useMemo.selectedOption,
|
|
201
94
|
singleSelectionIndex = _useMemo.singleSelectionIndex;
|
|
202
|
-
var
|
|
203
|
-
if (!isOpen && canOpenOptions(options, disabled)) changeIsOpen(true);
|
|
95
|
+
var openListbox = function openListbox() {
|
|
96
|
+
if (!isOpen && (0, _selectUtils.canOpenOptions)(options, disabled)) changeIsOpen(true);
|
|
204
97
|
};
|
|
205
|
-
var
|
|
98
|
+
var closeListbox = function closeListbox() {
|
|
206
99
|
if (isOpen) {
|
|
207
100
|
changeIsOpen(false);
|
|
208
101
|
changeVisualFocusIndex(-1);
|
|
@@ -217,7 +110,7 @@ var DxcSelect = /*#__PURE__*/_react["default"].forwardRef(function (_ref, ref) {
|
|
|
217
110
|
});else newValue = [].concat((0, _toConsumableArray2["default"])((_ref3 = value && Array.isArray(value) && value) !== null && _ref3 !== void 0 ? _ref3 : innerValue && Array.isArray(innerValue) && innerValue), [newOption.value]);
|
|
218
111
|
} else newValue = newOption.value;
|
|
219
112
|
value !== null && value !== void 0 ? value : setInnerValue(newValue);
|
|
220
|
-
notOptionalCheck(newValue, multiple, optional) ? onChange === null || onChange === void 0 ? void 0 : onChange({
|
|
113
|
+
(0, _selectUtils.notOptionalCheck)(newValue, multiple, optional) ? onChange === null || onChange === void 0 ? void 0 : onChange({
|
|
221
114
|
value: newValue,
|
|
222
115
|
error: translatedLabels.formFields.requiredValueErrorMessage
|
|
223
116
|
}) : onChange === null || onChange === void 0 ? void 0 : onChange({
|
|
@@ -227,20 +120,19 @@ var DxcSelect = /*#__PURE__*/_react["default"].forwardRef(function (_ref, ref) {
|
|
|
227
120
|
var handleSelectOnClick = function handleSelectOnClick() {
|
|
228
121
|
searchable && selectSearchInputRef.current.focus();
|
|
229
122
|
if (isOpen) {
|
|
230
|
-
|
|
123
|
+
closeListbox();
|
|
231
124
|
setSearchValue("");
|
|
232
|
-
} else
|
|
125
|
+
} else openListbox();
|
|
233
126
|
};
|
|
234
127
|
var handleSelectOnFocus = function handleSelectOnFocus(event) {
|
|
235
128
|
if (!event.currentTarget.contains(event.relatedTarget)) searchable && selectSearchInputRef.current.focus();
|
|
236
129
|
};
|
|
237
130
|
var handleSelectOnBlur = function handleSelectOnBlur(event) {
|
|
238
|
-
// focus leaves container (outside, not to a child)
|
|
239
131
|
if (!event.currentTarget.contains(event.relatedTarget)) {
|
|
240
|
-
|
|
132
|
+
closeListbox();
|
|
241
133
|
setSearchValue("");
|
|
242
134
|
var currentValue = value !== null && value !== void 0 ? value : innerValue;
|
|
243
|
-
notOptionalCheck(currentValue, multiple, optional) ? onBlur === null || onBlur === void 0 ? void 0 : onBlur({
|
|
135
|
+
(0, _selectUtils.notOptionalCheck)(currentValue, multiple, optional) ? onBlur === null || onBlur === void 0 ? void 0 : onBlur({
|
|
244
136
|
value: currentValue,
|
|
245
137
|
error: translatedLabels.formFields.requiredValueErrorMessage
|
|
246
138
|
}) : onBlur === null || onBlur === void 0 ? void 0 : onBlur({
|
|
@@ -256,7 +148,7 @@ var DxcSelect = /*#__PURE__*/_react["default"].forwardRef(function (_ref, ref) {
|
|
|
256
148
|
singleSelectionIndex !== undefined && (!isOpen || visualFocusIndex === -1 && singleSelectionIndex > -1 && singleSelectionIndex <= lastOptionIndex) ? changeVisualFocusIndex(singleSelectionIndex) : changeVisualFocusIndex(function (visualFocusIndex) {
|
|
257
149
|
if (visualFocusIndex < lastOptionIndex) return visualFocusIndex + 1;else if (visualFocusIndex === lastOptionIndex) return 0;
|
|
258
150
|
});
|
|
259
|
-
|
|
151
|
+
openListbox();
|
|
260
152
|
break;
|
|
261
153
|
case "Up":
|
|
262
154
|
case "ArrowUp":
|
|
@@ -264,13 +156,13 @@ var DxcSelect = /*#__PURE__*/_react["default"].forwardRef(function (_ref, ref) {
|
|
|
264
156
|
singleSelectionIndex !== undefined && (!isOpen || visualFocusIndex === -1 && singleSelectionIndex > -1 && singleSelectionIndex <= lastOptionIndex) ? changeVisualFocusIndex(singleSelectionIndex) : changeVisualFocusIndex(function (visualFocusIndex) {
|
|
265
157
|
return visualFocusIndex === 0 || visualFocusIndex === -1 ? lastOptionIndex : visualFocusIndex - 1;
|
|
266
158
|
});
|
|
267
|
-
|
|
159
|
+
openListbox();
|
|
268
160
|
break;
|
|
269
161
|
case "Esc":
|
|
270
162
|
case "Escape":
|
|
271
163
|
event.preventDefault();
|
|
272
164
|
isOpen && event.stopPropagation();
|
|
273
|
-
|
|
165
|
+
closeListbox();
|
|
274
166
|
setSearchValue("");
|
|
275
167
|
break;
|
|
276
168
|
case "Enter":
|
|
@@ -278,7 +170,7 @@ var DxcSelect = /*#__PURE__*/_react["default"].forwardRef(function (_ref, ref) {
|
|
|
278
170
|
var accLength = optional && !multiple ? 1 : 0;
|
|
279
171
|
if (searchable) {
|
|
280
172
|
if (filteredOptions.length > 0) {
|
|
281
|
-
if (optional && !multiple && visualFocusIndex === 0 && groupsHaveOptions(filteredOptions)) handleSelectChangeValue(optionalItem);else isArrayOfOptionGroups(filteredOptions) ? groupsHaveOptions(filteredOptions) && filteredOptions.some(function (groupOption) {
|
|
173
|
+
if (optional && !multiple && visualFocusIndex === 0 && (0, _selectUtils.groupsHaveOptions)(filteredOptions)) handleSelectChangeValue(optionalItem);else (0, _selectUtils.isArrayOfOptionGroups)(filteredOptions) ? (0, _selectUtils.groupsHaveOptions)(filteredOptions) && filteredOptions.some(function (groupOption) {
|
|
282
174
|
var groupLength = accLength + groupOption.options.length;
|
|
283
175
|
groupLength > visualFocusIndex && handleSelectChangeValue(groupOption.options[visualFocusIndex - accLength]);
|
|
284
176
|
accLength = groupLength;
|
|
@@ -286,14 +178,14 @@ var DxcSelect = /*#__PURE__*/_react["default"].forwardRef(function (_ref, ref) {
|
|
|
286
178
|
}) : handleSelectChangeValue(filteredOptions[visualFocusIndex - accLength]);
|
|
287
179
|
}
|
|
288
180
|
} else {
|
|
289
|
-
if (optional && !multiple && visualFocusIndex === 0) handleSelectChangeValue(optionalItem);else isArrayOfOptionGroups(options) ? options.some(function (groupOption) {
|
|
181
|
+
if (optional && !multiple && visualFocusIndex === 0) handleSelectChangeValue(optionalItem);else (0, _selectUtils.isArrayOfOptionGroups)(options) ? options.some(function (groupOption) {
|
|
290
182
|
var groupLength = accLength + groupOption.options.length;
|
|
291
183
|
groupLength > visualFocusIndex && handleSelectChangeValue(groupOption.options[visualFocusIndex - accLength]);
|
|
292
184
|
accLength = groupLength;
|
|
293
185
|
return groupLength > visualFocusIndex;
|
|
294
186
|
}) : handleSelectChangeValue(options[visualFocusIndex - accLength]);
|
|
295
187
|
}
|
|
296
|
-
!multiple &&
|
|
188
|
+
!multiple && closeListbox();
|
|
297
189
|
setSearchValue("");
|
|
298
190
|
}
|
|
299
191
|
break;
|
|
@@ -302,7 +194,7 @@ var DxcSelect = /*#__PURE__*/_react["default"].forwardRef(function (_ref, ref) {
|
|
|
302
194
|
var handleSearchIOnChange = function handleSearchIOnChange(event) {
|
|
303
195
|
setSearchValue(event.target.value);
|
|
304
196
|
changeVisualFocusIndex(-1);
|
|
305
|
-
|
|
197
|
+
openListbox();
|
|
306
198
|
};
|
|
307
199
|
var handleClearOptionsActionOnClick = function handleClearOptionsActionOnClick(event) {
|
|
308
200
|
event.stopPropagation();
|
|
@@ -320,12 +212,12 @@ var DxcSelect = /*#__PURE__*/_react["default"].forwardRef(function (_ref, ref) {
|
|
|
320
212
|
};
|
|
321
213
|
var handleOptionOnClick = (0, _react.useCallback)(function (option) {
|
|
322
214
|
handleSelectChangeValue(option);
|
|
323
|
-
!multiple &&
|
|
215
|
+
!multiple && closeListbox();
|
|
324
216
|
setSearchValue("");
|
|
325
|
-
}, [handleSelectChangeValue,
|
|
326
|
-
(0, _react.
|
|
217
|
+
}, [handleSelectChangeValue, closeListbox, multiple]);
|
|
218
|
+
(0, _react.useLayoutEffect)(function () {
|
|
327
219
|
if ((selectedOptionLabelRef === null || selectedOptionLabelRef === void 0 ? void 0 : selectedOptionLabelRef.current) != null) {
|
|
328
|
-
if ((selectedOptionLabelRef === null || selectedOptionLabelRef === void 0 ? void 0 : selectedOptionLabelRef.current.scrollWidth) > (selectedOptionLabelRef === null || selectedOptionLabelRef === void 0 ? void 0 : selectedOptionLabelRef.current.clientWidth)) selectedOptionLabelRef.current.title = getSelectedOptionLabel(placeholder, selectedOption);else selectedOptionLabelRef.current.title = "";
|
|
220
|
+
if ((selectedOptionLabelRef === null || selectedOptionLabelRef === void 0 ? void 0 : selectedOptionLabelRef.current.scrollWidth) > (selectedOptionLabelRef === null || selectedOptionLabelRef === void 0 ? void 0 : selectedOptionLabelRef.current.clientWidth)) selectedOptionLabelRef.current.title = (0, _selectUtils.getSelectedOptionLabel)(placeholder, selectedOption);else selectedOptionLabelRef.current.title = "";
|
|
329
221
|
}
|
|
330
222
|
}, [placeholder, selectedOption]);
|
|
331
223
|
return /*#__PURE__*/_react["default"].createElement(_styledComponents.ThemeProvider, {
|
|
@@ -340,8 +232,7 @@ var DxcSelect = /*#__PURE__*/_react["default"].forwardRef(function (_ref, ref) {
|
|
|
340
232
|
onClick: function onClick() {
|
|
341
233
|
selectRef.current.focus();
|
|
342
234
|
},
|
|
343
|
-
helperText: helperText
|
|
344
|
-
htmlFor: searchable ? searchableInputId : undefined
|
|
235
|
+
helperText: helperText
|
|
345
236
|
}, label, " ", optional && /*#__PURE__*/_react["default"].createElement(OptionalLabel, null, translatedLabels.formFields.optionalLabel)), helperText && /*#__PURE__*/_react["default"].createElement(HelperText, {
|
|
346
237
|
disabled: disabled
|
|
347
238
|
}, helperText), /*#__PURE__*/_react["default"].createElement(Popover.Root, {
|
|
@@ -360,7 +251,7 @@ var DxcSelect = /*#__PURE__*/_react["default"].forwardRef(function (_ref, ref) {
|
|
|
360
251
|
ref: selectRef,
|
|
361
252
|
tabIndex: disabled ? -1 : tabIndex,
|
|
362
253
|
role: "combobox",
|
|
363
|
-
"aria-controls":
|
|
254
|
+
"aria-controls": listboxId,
|
|
364
255
|
"aria-disabled": disabled,
|
|
365
256
|
"aria-expanded": isOpen,
|
|
366
257
|
"aria-haspopup": "listbox",
|
|
@@ -382,28 +273,31 @@ var DxcSelect = /*#__PURE__*/_react["default"].forwardRef(function (_ref, ref) {
|
|
|
382
273
|
title: translatedLabels.select.actionClearSelectionTitle,
|
|
383
274
|
"aria-label": translatedLabels.select.actionClearSelectionTitle
|
|
384
275
|
}, /*#__PURE__*/_react["default"].createElement(_Icon["default"], {
|
|
385
|
-
icon: "
|
|
386
|
-
}))), /*#__PURE__*/_react["default"].createElement(SearchableValueContainer, null, /*#__PURE__*/_react["default"].createElement(
|
|
276
|
+
icon: "close"
|
|
277
|
+
}))), /*#__PURE__*/_react["default"].createElement(SearchableValueContainer, null, /*#__PURE__*/_react["default"].createElement("input", {
|
|
278
|
+
style: {
|
|
279
|
+
display: "none"
|
|
280
|
+
},
|
|
387
281
|
name: name,
|
|
388
282
|
disabled: disabled,
|
|
389
283
|
value: multiple ? ((_ref4 = value && Array.isArray(value) && value) !== null && _ref4 !== void 0 ? _ref4 : innerValue && Array.isArray(innerValue) && innerValue).join(",") : value !== null && value !== void 0 ? value : innerValue,
|
|
390
284
|
readOnly: true,
|
|
391
285
|
"aria-hidden": "true"
|
|
392
286
|
}), searchable && /*#__PURE__*/_react["default"].createElement(SearchInput, {
|
|
393
|
-
id: searchableInputId,
|
|
394
287
|
value: searchValue,
|
|
395
288
|
disabled: disabled,
|
|
396
289
|
onChange: handleSearchIOnChange,
|
|
397
290
|
ref: selectSearchInputRef,
|
|
398
291
|
autoComplete: "nope",
|
|
399
292
|
autoCorrect: "nope",
|
|
400
|
-
size: 1
|
|
293
|
+
size: 1,
|
|
294
|
+
"aria-labelledby": label ? selectLabelId : undefined
|
|
401
295
|
}), (!searchable || searchValue === "") && /*#__PURE__*/_react["default"].createElement(SelectedOption, {
|
|
402
296
|
disabled: disabled,
|
|
403
297
|
atBackground: (multiple ? (value !== null && value !== void 0 ? value : innerValue).length === 0 : !(value !== null && value !== void 0 ? value : innerValue)) || searchable && isOpen
|
|
404
298
|
}, /*#__PURE__*/_react["default"].createElement(SelectedOptionLabel, {
|
|
405
299
|
ref: selectedOptionLabelRef
|
|
406
|
-
}, getSelectedOptionLabel(placeholder, selectedOption)))), !disabled && error && /*#__PURE__*/_react["default"].createElement(ErrorIcon, null, /*#__PURE__*/_react["default"].createElement(_Icon["default"], {
|
|
300
|
+
}, (0, _selectUtils.getSelectedOptionLabel)(placeholder, selectedOption)))), !disabled && error && /*#__PURE__*/_react["default"].createElement(ErrorIcon, null, /*#__PURE__*/_react["default"].createElement(_Icon["default"], {
|
|
407
301
|
icon: "filled_error"
|
|
408
302
|
})), searchable && searchValue.length > 0 && /*#__PURE__*/_react["default"].createElement(ClearSearchAction, {
|
|
409
303
|
onMouseDown: function onMouseDown(event) {
|
|
@@ -434,7 +328,7 @@ var DxcSelect = /*#__PURE__*/_react["default"].forwardRef(function (_ref, ref) {
|
|
|
434
328
|
event.preventDefault();
|
|
435
329
|
}
|
|
436
330
|
}, /*#__PURE__*/_react["default"].createElement(_Listbox["default"], {
|
|
437
|
-
id:
|
|
331
|
+
id: listboxId,
|
|
438
332
|
currentValue: value !== null && value !== void 0 ? value : innerValue,
|
|
439
333
|
options: searchable ? filteredOptions : options,
|
|
440
334
|
visualFocusIndex: visualFocusIndex,
|
|
@@ -462,7 +356,7 @@ var sizes = {
|
|
|
462
356
|
var calculateWidth = function calculateWidth(margin, size) {
|
|
463
357
|
return size === "fillParent" ? "calc(".concat(sizes[size], " - ").concat((0, _utils.getMargin)(margin, "left"), " - ").concat((0, _utils.getMargin)(margin, "right"), ")") : sizes[size];
|
|
464
358
|
};
|
|
465
|
-
var SelectContainer = _styledComponents["default"].div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n display: flex;\n flex-direction: column;\n
|
|
359
|
+
var SelectContainer = _styledComponents["default"].div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n box-sizing: border-box;\n display: flex;\n flex-direction: column;\n width: ", ";\n ", ";\n margin: ", ";\n margin-top: ", ";\n margin-right: ", ";\n margin-bottom: ", ";\n margin-left: ", ";\n font-family: ", ";\n"])), function (props) {
|
|
466
360
|
return calculateWidth(props.margin, props.size);
|
|
467
361
|
}, function (props) {
|
|
468
362
|
return props.size !== "fillParent" && "min-width:" + calculateWidth(props.margin, props.size);
|
|
@@ -476,11 +370,11 @@ var SelectContainer = _styledComponents["default"].div(_templateObject || (_temp
|
|
|
476
370
|
return props.margin && (0, _typeof2["default"])(props.margin) === "object" && props.margin.bottom ? _variables.spaces[props.margin.bottom] : "";
|
|
477
371
|
}, function (props) {
|
|
478
372
|
return props.margin && (0, _typeof2["default"])(props.margin) === "object" && props.margin.left ? _variables.spaces[props.margin.left] : "";
|
|
479
|
-
});
|
|
480
|
-
var Label = _styledComponents["default"].label(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["\n color: ", ";\n font-family: ", ";\n font-size: ", ";\n font-style: ", ";\n font-weight: ", ";\n line-height: ", ";\n cursor: default;\n ", "\n"])), function (props) {
|
|
481
|
-
return props.disabled ? props.theme.disabledColor : props.theme.labelFontColor;
|
|
482
373
|
}, function (props) {
|
|
483
374
|
return props.theme.fontFamily;
|
|
375
|
+
});
|
|
376
|
+
var Label = _styledComponents["default"].label(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["\n color: ", ";\n font-size: ", ";\n font-style: ", ";\n font-weight: ", ";\n line-height: ", ";\n cursor: default;\n ", "\n"])), function (props) {
|
|
377
|
+
return props.disabled ? props.theme.disabledColor : props.theme.labelFontColor;
|
|
484
378
|
}, function (props) {
|
|
485
379
|
return props.theme.labelFontSize;
|
|
486
380
|
}, function (props) {
|
|
@@ -495,10 +389,8 @@ var Label = _styledComponents["default"].label(_templateObject2 || (_templateObj
|
|
|
495
389
|
var OptionalLabel = _styledComponents["default"].span(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["\n font-weight: ", ";\n"])), function (props) {
|
|
496
390
|
return props.theme.optionalLabelFontWeight;
|
|
497
391
|
});
|
|
498
|
-
var HelperText = _styledComponents["default"].span(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["\n color: ", ";\n font-
|
|
392
|
+
var HelperText = _styledComponents["default"].span(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["\n color: ", ";\n font-size: ", ";\n font-style: ", ";\n font-weight: ", ";\n line-height: ", ";\n margin-bottom: 0.25rem;\n"])), function (props) {
|
|
499
393
|
return props.disabled ? props.theme.disabledColor : props.theme.helperTextFontColor;
|
|
500
|
-
}, function (props) {
|
|
501
|
-
return props.theme.fontFamily;
|
|
502
394
|
}, function (props) {
|
|
503
395
|
return props.theme.helperTextFontSize;
|
|
504
396
|
}, function (props) {
|
|
@@ -519,17 +411,15 @@ var Select = _styledComponents["default"].div(_templateObject5 || (_templateObje
|
|
|
519
411
|
}, function (props) {
|
|
520
412
|
return !props.disabled && "\n &:hover {\n border-color: ".concat(props.error ? "transparent" : props.theme.hoverInputBorderColor, ";\n ").concat(props.error && "box-shadow: 0 0 0 2px ".concat(props.theme.hoverInputErrorBorderColor, ";"), "\n }\n &:focus-within {\n border-color: transparent;\n box-shadow: 0 0 0 2px ").concat(props.theme.focusInputBorderColor, ";\n }\n ");
|
|
521
413
|
});
|
|
522
|
-
var SelectionIndicator = _styledComponents["default"].
|
|
414
|
+
var SelectionIndicator = _styledComponents["default"].div(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2["default"])(["\n box-sizing: border-box;\n display: grid;\n grid-template-columns: 1fr 1fr;\n min-width: 48px;\n min-height: 24px;\n border-radius: 2px;\n border: 1px solid ", ";\n"])), function (props) {
|
|
523
415
|
return props.theme.selectionIndicatorBorderColor;
|
|
524
416
|
});
|
|
525
|
-
var SelectionNumber = _styledComponents["default"].span(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2["default"])(["\n display:
|
|
526
|
-
return !props.disabled && "background-color: ".concat(props.theme.selectionIndicatorBackgroundColor);
|
|
527
|
-
}, function (props) {
|
|
417
|
+
var SelectionNumber = _styledComponents["default"].span(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2["default"])(["\n display: grid;\n place-items: center;\n border-right: 1px solid ", ";\n user-select: none;\n ", ";\n color: ", ";\n font-size: ", ";\n font-style: ", ";\n font-weight: ", ";\n ", "\n"])), function (props) {
|
|
528
418
|
return props.theme.selectionIndicatorBorderColor;
|
|
529
419
|
}, function (props) {
|
|
530
|
-
return props.disabled
|
|
420
|
+
return !props.disabled && "background-color: ".concat(props.theme.selectionIndicatorBackgroundColor);
|
|
531
421
|
}, function (props) {
|
|
532
|
-
return props.theme.
|
|
422
|
+
return props.disabled ? props.theme.disabledColor : props.theme.selectionIndicatorFontColor;
|
|
533
423
|
}, function (props) {
|
|
534
424
|
return props.theme.selectionIndicatorFontSize;
|
|
535
425
|
}, function (props) {
|
|
@@ -539,7 +429,7 @@ var SelectionNumber = _styledComponents["default"].span(_templateObject7 || (_te
|
|
|
539
429
|
}, function (props) {
|
|
540
430
|
return props.disabled ? "cursor: not-allowed;" : "cursor: default;";
|
|
541
431
|
});
|
|
542
|
-
var ClearOptionsAction = _styledComponents["default"].button(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2["default"])(["\n display:
|
|
432
|
+
var ClearOptionsAction = _styledComponents["default"].button(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2["default"])(["\n display: grid;\n place-items: center;\n border: none;\n padding: 0;\n ", "\n background-color: ", ";\n color: ", ";\n font-size: 16px;\n\n :focus-visible {\n outline: none;\n }\n ", "\n"])), function (props) {
|
|
543
433
|
return props.disabled ? "cursor: not-allowed;" : "cursor: pointer;";
|
|
544
434
|
}, function (props) {
|
|
545
435
|
return props.disabled ? "transparent" : props.theme.enabledSelectionIndicatorActionBackgroundColor;
|
|
@@ -549,10 +439,8 @@ var ClearOptionsAction = _styledComponents["default"].button(_templateObject8 ||
|
|
|
549
439
|
return !props.disabled && "\n &:hover {\n background-color: ".concat(props.theme.hoverSelectionIndicatorActionBackgroundColor, ";\n color: ").concat(props.theme.hoverSelectionIndicatorActionIconColor, ";\n }\n &:active {\n background-color: ").concat(props.theme.activeSelectionIndicatorActionBackgroundColor, ";\n color: ").concat(props.theme.activeSelectionIndicatorActionIconColor, ";\n }\n ");
|
|
550
440
|
});
|
|
551
441
|
var SearchableValueContainer = _styledComponents["default"].div(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2["default"])(["\n display: grid;\n width: 100%;\n"])));
|
|
552
|
-
var SelectedOption = _styledComponents["default"].span(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2["default"])(["\n grid-area: 1 / 1 / 1 / 1;\n display: inline-flex;\n align-items: center;\n height: calc(2.5rem - 2px);\n padding: 0 0.5rem;\n user-select: none;\n overflow: hidden;\n\n color: ", ";\n
|
|
442
|
+
var SelectedOption = _styledComponents["default"].span(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2["default"])(["\n grid-area: 1 / 1 / 1 / 1;\n display: inline-flex;\n align-items: center;\n height: calc(2.5rem - 2px);\n padding: 0 0.5rem;\n user-select: none;\n overflow: hidden;\n\n color: ", ";\n font-size: ", ";\n font-style: ", ";\n font-weight: ", ";\n"])), function (props) {
|
|
553
443
|
if (props.disabled) return props.theme.disabledColor;else if (props.atBackground) return props.theme.placeholderFontColor;else return props.theme.valueFontColor;
|
|
554
|
-
}, function (props) {
|
|
555
|
-
return props.theme.fontFamily;
|
|
556
444
|
}, function (props) {
|
|
557
445
|
return props.theme.valueFontSize;
|
|
558
446
|
}, function (props) {
|
|
@@ -561,11 +449,8 @@ var SelectedOption = _styledComponents["default"].span(_templateObject10 || (_te
|
|
|
561
449
|
return props.theme.valueFontWeight;
|
|
562
450
|
});
|
|
563
451
|
var SelectedOptionLabel = _styledComponents["default"].span(_templateObject11 || (_templateObject11 = (0, _taggedTemplateLiteral2["default"])(["\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n"])));
|
|
564
|
-
var
|
|
565
|
-
var SearchInput = _styledComponents["default"].input(_templateObject13 || (_templateObject13 = (0, _taggedTemplateLiteral2["default"])(["\n grid-area: 1 / 1 / 1 / 1;\n height: calc(2.5rem - 2px);\n background: none;\n border: none;\n outline: none;\n padding: 0 0.5rem;\n color: ", ";\n font-family: ", ";\n font-size: ", ";\n font-style: ", ";\n font-weight: ", ";\n line-height: 1.5em;\n"])), function (props) {
|
|
452
|
+
var SearchInput = _styledComponents["default"].input(_templateObject12 || (_templateObject12 = (0, _taggedTemplateLiteral2["default"])(["\n grid-area: 1 / 1 / 1 / 1;\n height: calc(2.5rem - 2px);\n background: none;\n border: none;\n outline: none;\n padding: 0 0.5rem;\n color: ", ";\n font-size: ", ";\n font-style: ", ";\n font-weight: ", ";\n line-height: 1.5em;\n"])), function (props) {
|
|
566
453
|
return props.disabled ? props.theme.disabledColor : props.theme.valueFontColor;
|
|
567
|
-
}, function (props) {
|
|
568
|
-
return props.theme.fontFamily;
|
|
569
454
|
}, function (props) {
|
|
570
455
|
return props.theme.valueFontSize;
|
|
571
456
|
}, function (props) {
|
|
@@ -573,20 +458,16 @@ var SearchInput = _styledComponents["default"].input(_templateObject13 || (_temp
|
|
|
573
458
|
}, function (props) {
|
|
574
459
|
return props.theme.valueFontWeight;
|
|
575
460
|
});
|
|
576
|
-
var ErrorIcon = _styledComponents["default"].span(
|
|
461
|
+
var ErrorIcon = _styledComponents["default"].span(_templateObject13 || (_templateObject13 = (0, _taggedTemplateLiteral2["default"])(["\n display: flex;\n flex-wrap: wrap;\n align-content: center;\n padding: 3px;\n height: 18px;\n width: 18px;\n margin-left: 0.25rem;\n color: ", ";\n font-size: 1.25rem;\n"])), function (props) {
|
|
577
462
|
return props.theme.errorIconColor;
|
|
578
463
|
});
|
|
579
|
-
var Error = _styledComponents["default"].span(
|
|
464
|
+
var Error = _styledComponents["default"].span(_templateObject14 || (_templateObject14 = (0, _taggedTemplateLiteral2["default"])(["\n min-height: 1.5em;\n color: ", ";\n font-size: 0.75rem;\n line-height: 1.5em;\n margin-top: 0.25rem;\n"])), function (props) {
|
|
580
465
|
return props.theme.errorMessageColor;
|
|
581
|
-
}, function (props) {
|
|
582
|
-
return props.theme.fontFamily;
|
|
583
466
|
});
|
|
584
|
-
var CollapseIndicator = _styledComponents["default"].span(
|
|
467
|
+
var CollapseIndicator = _styledComponents["default"].span(_templateObject15 || (_templateObject15 = (0, _taggedTemplateLiteral2["default"])(["\n display: grid;\n place-items: center;\n padding: 4px;\n font-size: 16px;\n margin-left: 0.25rem;\n color: ", ";\n"])), function (props) {
|
|
585
468
|
return props.disabled ? props.theme.disabledColor : props.theme.collapseIndicatorColor;
|
|
586
469
|
});
|
|
587
|
-
var ClearSearchAction = _styledComponents["default"].button(
|
|
588
|
-
return props.theme.fontFamily;
|
|
589
|
-
}, function (props) {
|
|
470
|
+
var ClearSearchAction = _styledComponents["default"].button(_templateObject16 || (_templateObject16 = (0, _taggedTemplateLiteral2["default"])(["\n display: grid;\n place-items: center;\n min-height: 24px;\n min-width: 24px;\n margin-left: 0.25rem;\n border: none;\n border-radius: 2px;\n padding: 0;\n background-color: ", ";\n color: ", ";\n font-size: 1rem;\n cursor: pointer;\n\n &:hover {\n background-color: ", ";\n color: ", ";\n }\n &:active {\n background-color: ", ";\n color: ", ";\n }\n"])), function (props) {
|
|
590
471
|
return props.theme.actionBackgroundColor;
|
|
591
472
|
}, function (props) {
|
|
592
473
|
return props.theme.actionIconColor;
|
|
@@ -545,7 +545,7 @@ const SelectListbox = () => {
|
|
|
545
545
|
<Title title="Grouped icons (Material Symbols)" theme="light" level={4} />
|
|
546
546
|
<Listbox
|
|
547
547
|
id="x14"
|
|
548
|
-
currentValue={
|
|
548
|
+
currentValue={"4"}
|
|
549
549
|
options={icon_options_grouped_material}
|
|
550
550
|
visualFocusIndex={-1}
|
|
551
551
|
lastOptionIndex={3}
|
|
@@ -561,7 +561,7 @@ const SelectListbox = () => {
|
|
|
561
561
|
<Title title="Grouped icons (Material)" theme="light" level={4} />
|
|
562
562
|
<Listbox
|
|
563
563
|
id="x15"
|
|
564
|
-
currentValue={["
|
|
564
|
+
currentValue={["car", "motorcycle", "train"]}
|
|
565
565
|
options={options_material}
|
|
566
566
|
visualFocusIndex={-1}
|
|
567
567
|
lastOptionIndex={6}
|
|
@@ -0,0 +1,41 @@
|
|
|
1
|
+
import { Option, OptionGroup } from "./types";
|
|
2
|
+
/**
|
|
3
|
+
* Check if the value is not optional and is empty.
|
|
4
|
+
*/
|
|
5
|
+
declare const notOptionalCheck: (value: string | string[], multiple: boolean, optional: boolean) => boolean;
|
|
6
|
+
/**
|
|
7
|
+
* Checks if the option is a group.
|
|
8
|
+
*/
|
|
9
|
+
declare const isOptionGroup: (option: Option | OptionGroup) => option is OptionGroup;
|
|
10
|
+
/**
|
|
11
|
+
* Checks if the options are an array of groups.
|
|
12
|
+
*/
|
|
13
|
+
declare const isArrayOfOptionGroups: (options: Option[] | OptionGroup[]) => options is OptionGroup[];
|
|
14
|
+
/**
|
|
15
|
+
* Checks if the groups have options.
|
|
16
|
+
*/
|
|
17
|
+
declare const groupsHaveOptions: (options: Option[] | OptionGroup[]) => boolean;
|
|
18
|
+
/**
|
|
19
|
+
* Checks if the listbox can be opened.
|
|
20
|
+
*/
|
|
21
|
+
declare const canOpenListbox: (options: Option[] | OptionGroup[], disabled: boolean) => boolean;
|
|
22
|
+
/**
|
|
23
|
+
* Filters the options by the search value.
|
|
24
|
+
*/
|
|
25
|
+
declare const filterOptionsBySearchValue: (options: Option[] | OptionGroup[], searchValue: string) => Option[] | OptionGroup[];
|
|
26
|
+
/**
|
|
27
|
+
* Returns the index of the last option, depending on several conditions.
|
|
28
|
+
*/
|
|
29
|
+
declare const getLastOptionIndex: (options: Option[] | OptionGroup[], filteredOptions: Option[] | OptionGroup[], searchable: boolean, optional: boolean, multiple: boolean) => number;
|
|
30
|
+
/**
|
|
31
|
+
* Return the current selection.
|
|
32
|
+
*/
|
|
33
|
+
declare const getSelectedOption: (value: string | string[], options: Option[] | OptionGroup[], multiple: boolean, optional: boolean, optionalItem: Option) => {
|
|
34
|
+
selectedOption: Option | Option[];
|
|
35
|
+
singleSelectionIndex: number;
|
|
36
|
+
};
|
|
37
|
+
/**
|
|
38
|
+
* Return the label or labels of the selected option(s) for the internal input.
|
|
39
|
+
*/
|
|
40
|
+
declare const getSelectedOptionLabel: (placeholder: string, selectedOption: Option | Option[]) => string;
|
|
41
|
+
export { isOptionGroup, isArrayOfOptionGroups, notOptionalCheck, groupsHaveOptions, canOpenListbox as canOpenOptions, filterOptionsBySearchValue, getLastOptionIndex, getSelectedOption, getSelectedOptionLabel, };
|
|
@@ -0,0 +1,129 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.notOptionalCheck = exports.isOptionGroup = exports.isArrayOfOptionGroups = exports.groupsHaveOptions = exports.getSelectedOptionLabel = exports.getSelectedOption = exports.getLastOptionIndex = exports.filterOptionsBySearchValue = exports.canOpenOptions = void 0;
|
|
7
|
+
/**
|
|
8
|
+
* Check if the value is not optional and is empty.
|
|
9
|
+
*/
|
|
10
|
+
var notOptionalCheck = exports.notOptionalCheck = function notOptionalCheck(value, multiple, optional) {
|
|
11
|
+
return !optional && (multiple ? value.length === 0 : value === "");
|
|
12
|
+
};
|
|
13
|
+
|
|
14
|
+
/**
|
|
15
|
+
* Checks if the option is a group.
|
|
16
|
+
*/
|
|
17
|
+
var isOptionGroup = exports.isOptionGroup = function isOptionGroup(option) {
|
|
18
|
+
return "options" in option && option.options != null;
|
|
19
|
+
};
|
|
20
|
+
|
|
21
|
+
/**
|
|
22
|
+
* Checks if the options are an array of groups.
|
|
23
|
+
*/
|
|
24
|
+
var isArrayOfOptionGroups = exports.isArrayOfOptionGroups = function isArrayOfOptionGroups(options) {
|
|
25
|
+
return isOptionGroup(options[0]);
|
|
26
|
+
};
|
|
27
|
+
|
|
28
|
+
/**
|
|
29
|
+
* Checks if the groups have options.
|
|
30
|
+
*/
|
|
31
|
+
var groupsHaveOptions = exports.groupsHaveOptions = function groupsHaveOptions(options) {
|
|
32
|
+
return isArrayOfOptionGroups(options) ? options.some(function (groupOption) {
|
|
33
|
+
var _groupOption$options;
|
|
34
|
+
return ((_groupOption$options = groupOption.options) === null || _groupOption$options === void 0 ? void 0 : _groupOption$options.length) > 0;
|
|
35
|
+
}) : true;
|
|
36
|
+
};
|
|
37
|
+
|
|
38
|
+
/**
|
|
39
|
+
* Checks if the listbox can be opened.
|
|
40
|
+
*/
|
|
41
|
+
var canOpenListbox = exports.canOpenOptions = function canOpenListbox(options, disabled) {
|
|
42
|
+
return !disabled && (options === null || options === void 0 ? void 0 : options.length) > 0 && groupsHaveOptions(options);
|
|
43
|
+
};
|
|
44
|
+
|
|
45
|
+
/**
|
|
46
|
+
* Filters the options by the search value.
|
|
47
|
+
*/
|
|
48
|
+
var filterOptionsBySearchValue = exports.filterOptionsBySearchValue = function filterOptionsBySearchValue(options, searchValue) {
|
|
49
|
+
if ((options === null || options === void 0 ? void 0 : options.length) > 0) {
|
|
50
|
+
if (isArrayOfOptionGroups(options)) return options.map(function (optionGroup) {
|
|
51
|
+
var group = {
|
|
52
|
+
label: optionGroup.label,
|
|
53
|
+
options: optionGroup.options.filter(function (option) {
|
|
54
|
+
return option.label.toUpperCase().includes(searchValue.toUpperCase());
|
|
55
|
+
})
|
|
56
|
+
};
|
|
57
|
+
return group;
|
|
58
|
+
});else return options.filter(function (option) {
|
|
59
|
+
return option.label.toUpperCase().includes(searchValue.toUpperCase());
|
|
60
|
+
});
|
|
61
|
+
}
|
|
62
|
+
};
|
|
63
|
+
|
|
64
|
+
/**
|
|
65
|
+
* Returns the index of the last option, depending on several conditions.
|
|
66
|
+
*/
|
|
67
|
+
var getLastOptionIndex = exports.getLastOptionIndex = function getLastOptionIndex(options, filteredOptions, searchable, optional, multiple) {
|
|
68
|
+
var last = 0;
|
|
69
|
+
var reducer = function reducer(acc, current) {
|
|
70
|
+
var _current$options;
|
|
71
|
+
return acc + ((_current$options = current.options) === null || _current$options === void 0 ? void 0 : _current$options.length);
|
|
72
|
+
};
|
|
73
|
+
if (searchable && (filteredOptions === null || filteredOptions === void 0 ? void 0 : filteredOptions.length) > 0) isArrayOfOptionGroups(filteredOptions) ? last = filteredOptions.reduce(reducer, 0) - 1 : last = filteredOptions.length - 1;else if ((options === null || options === void 0 ? void 0 : options.length) > 0) isArrayOfOptionGroups(options) ? last = options.reduce(reducer, 0) - 1 : last = options.length - 1;
|
|
74
|
+
return optional && !multiple ? last + 1 : last;
|
|
75
|
+
};
|
|
76
|
+
|
|
77
|
+
/**
|
|
78
|
+
* Return the current selection.
|
|
79
|
+
*/
|
|
80
|
+
var getSelectedOption = exports.getSelectedOption = function getSelectedOption(value, options, multiple, optional, optionalItem) {
|
|
81
|
+
var selectedOption = multiple ? [] : {};
|
|
82
|
+
var singleSelectionIndex;
|
|
83
|
+
if (multiple) {
|
|
84
|
+
if ((options === null || options === void 0 ? void 0 : options.length) > 0) {
|
|
85
|
+
options.forEach(function (option) {
|
|
86
|
+
if (isOptionGroup(option)) option.options.forEach(function (singleOption) {
|
|
87
|
+
if (value.includes(singleOption.value) && Array.isArray(selectedOption)) selectedOption.push(singleOption);
|
|
88
|
+
});else if (value.includes(option.value) && Array.isArray(selectedOption)) selectedOption.push(option);
|
|
89
|
+
});
|
|
90
|
+
}
|
|
91
|
+
} else {
|
|
92
|
+
if (optional && value === "") {
|
|
93
|
+
selectedOption = optionalItem;
|
|
94
|
+
singleSelectionIndex = 0;
|
|
95
|
+
} else if ((options === null || options === void 0 ? void 0 : options.length) > 0) {
|
|
96
|
+
var group_index = 0;
|
|
97
|
+
options.some(function (option, index) {
|
|
98
|
+
if (isOptionGroup(option)) {
|
|
99
|
+
option.options.some(function (singleOption) {
|
|
100
|
+
if (singleOption.value === value) {
|
|
101
|
+
selectedOption = singleOption;
|
|
102
|
+
singleSelectionIndex = optional ? group_index + 1 : group_index;
|
|
103
|
+
return true;
|
|
104
|
+
}
|
|
105
|
+
group_index++;
|
|
106
|
+
});
|
|
107
|
+
} else if (option.value === value) {
|
|
108
|
+
selectedOption = option;
|
|
109
|
+
singleSelectionIndex = optional ? index + 1 : index;
|
|
110
|
+
return true;
|
|
111
|
+
}
|
|
112
|
+
});
|
|
113
|
+
}
|
|
114
|
+
}
|
|
115
|
+
return {
|
|
116
|
+
selectedOption: selectedOption,
|
|
117
|
+
singleSelectionIndex: singleSelectionIndex
|
|
118
|
+
};
|
|
119
|
+
};
|
|
120
|
+
|
|
121
|
+
/**
|
|
122
|
+
* Return the label or labels of the selected option(s) for the internal input.
|
|
123
|
+
*/
|
|
124
|
+
var getSelectedOptionLabel = exports.getSelectedOptionLabel = function getSelectedOptionLabel(placeholder, selectedOption) {
|
|
125
|
+
var _selectedOption$label;
|
|
126
|
+
return Array.isArray(selectedOption) ? selectedOption.length === 0 ? placeholder : selectedOption.map(function (option) {
|
|
127
|
+
return option.label;
|
|
128
|
+
}).join(", ") : (_selectedOption$label = selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.label) !== null && _selectedOption$label !== void 0 ? _selectedOption$label : placeholder;
|
|
129
|
+
};
|
package/text-input/TextInput.js
CHANGED
|
@@ -21,6 +21,7 @@ var _ActionIcon = _interopRequireDefault(require("../action-icon/ActionIcon"));
|
|
|
21
21
|
var _Flex = _interopRequireDefault(require("../flex/Flex"));
|
|
22
22
|
var _NumberInputContext = require("../number-input/NumberInputContext");
|
|
23
23
|
var _Icon = _interopRequireDefault(require("../icon/Icon"));
|
|
24
|
+
var _useWidth = _interopRequireDefault(require("../utils/useWidth"));
|
|
24
25
|
var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10;
|
|
25
26
|
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
|
|
26
27
|
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof3(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
|
|
@@ -74,26 +75,6 @@ var isNumberIncorrect = function isNumberIncorrect(value, minNumber, maxNumber)
|
|
|
74
75
|
var patternMismatch = function patternMismatch(pattern, value) {
|
|
75
76
|
return pattern != null && !new RegExp(pattern).test(value);
|
|
76
77
|
};
|
|
77
|
-
var useWidth = function useWidth(target) {
|
|
78
|
-
var _useState = (0, _react.useState)(0),
|
|
79
|
-
_useState2 = (0, _slicedToArray2["default"])(_useState, 2),
|
|
80
|
-
width = _useState2[0],
|
|
81
|
-
setWidth = _useState2[1];
|
|
82
|
-
(0, _react.useEffect)(function () {
|
|
83
|
-
if (target != null) {
|
|
84
|
-
setWidth(target.getBoundingClientRect().width);
|
|
85
|
-
var triggerObserver = new ResizeObserver(function (entries) {
|
|
86
|
-
var rect = entries[0].target.getBoundingClientRect();
|
|
87
|
-
setWidth(rect === null || rect === void 0 ? void 0 : rect.width);
|
|
88
|
-
});
|
|
89
|
-
triggerObserver.observe(target);
|
|
90
|
-
return function () {
|
|
91
|
-
triggerObserver.unobserve(target);
|
|
92
|
-
};
|
|
93
|
-
}
|
|
94
|
-
}, [target]);
|
|
95
|
-
return width;
|
|
96
|
-
};
|
|
97
78
|
var DxcTextInput = /*#__PURE__*/_react["default"].forwardRef(function (_ref2, ref) {
|
|
98
79
|
var label = _ref2.label,
|
|
99
80
|
_ref2$name = _ref2.name,
|
|
@@ -134,34 +115,34 @@ var DxcTextInput = /*#__PURE__*/_react["default"].forwardRef(function (_ref2, re
|
|
|
134
115
|
var inputId = "input-".concat((0, _react.useId)());
|
|
135
116
|
var autosuggestId = "suggestions-".concat(inputId);
|
|
136
117
|
var errorId = "error-".concat(inputId);
|
|
137
|
-
var
|
|
118
|
+
var _useState = (0, _react.useState)(defaultValue),
|
|
119
|
+
_useState2 = (0, _slicedToArray2["default"])(_useState, 2),
|
|
120
|
+
innerValue = _useState2[0],
|
|
121
|
+
setInnerValue = _useState2[1];
|
|
122
|
+
var _useState3 = (0, _react.useState)(false),
|
|
138
123
|
_useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
|
|
139
|
-
|
|
140
|
-
|
|
124
|
+
isOpen = _useState4[0],
|
|
125
|
+
changeIsOpen = _useState4[1];
|
|
141
126
|
var _useState5 = (0, _react.useState)(false),
|
|
142
127
|
_useState6 = (0, _slicedToArray2["default"])(_useState5, 2),
|
|
143
|
-
|
|
144
|
-
|
|
128
|
+
isSearching = _useState6[0],
|
|
129
|
+
changeIsSearching = _useState6[1];
|
|
145
130
|
var _useState7 = (0, _react.useState)(false),
|
|
146
131
|
_useState8 = (0, _slicedToArray2["default"])(_useState7, 2),
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
var _useState9 = (0, _react.useState)(
|
|
132
|
+
isAutosuggestError = _useState8[0],
|
|
133
|
+
changeIsAutosuggestError = _useState8[1];
|
|
134
|
+
var _useState9 = (0, _react.useState)([]),
|
|
150
135
|
_useState10 = (0, _slicedToArray2["default"])(_useState9, 2),
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
var _useState11 = (0, _react.useState)(
|
|
136
|
+
filteredSuggestions = _useState10[0],
|
|
137
|
+
changeFilteredSuggestions = _useState10[1];
|
|
138
|
+
var _useState11 = (0, _react.useState)(-1),
|
|
154
139
|
_useState12 = (0, _slicedToArray2["default"])(_useState11, 2),
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
var _useState13 = (0, _react.useState)(-1),
|
|
158
|
-
_useState14 = (0, _slicedToArray2["default"])(_useState13, 2),
|
|
159
|
-
visualFocusIndex = _useState14[0],
|
|
160
|
-
changeVisualFocusIndex = _useState14[1];
|
|
140
|
+
visualFocusIndex = _useState12[0],
|
|
141
|
+
changeVisualFocusIndex = _useState12[1];
|
|
161
142
|
var inputRef = (0, _react.useRef)(null);
|
|
162
143
|
var inputContainerRef = (0, _react.useRef)(null);
|
|
163
144
|
var actionRef = (0, _react.useRef)(null);
|
|
164
|
-
var width =
|
|
145
|
+
var width = (0, _useWidth["default"])(inputContainerRef.current);
|
|
165
146
|
var colorsTheme = (0, _useTheme["default"])();
|
|
166
147
|
var translatedLabels = (0, _useTranslatedLabels["default"])();
|
|
167
148
|
var numberInputContext = (0, _react.useContext)(_NumberInputContext.NumberInputContext);
|
|
@@ -0,0 +1,30 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
4
|
+
Object.defineProperty(exports, "__esModule", {
|
|
5
|
+
value: true
|
|
6
|
+
});
|
|
7
|
+
exports["default"] = void 0;
|
|
8
|
+
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
|
|
9
|
+
var _react = require("react");
|
|
10
|
+
var useWidth = function useWidth(target) {
|
|
11
|
+
var _useState = (0, _react.useState)(0),
|
|
12
|
+
_useState2 = (0, _slicedToArray2["default"])(_useState, 2),
|
|
13
|
+
width = _useState2[0],
|
|
14
|
+
setWidth = _useState2[1];
|
|
15
|
+
(0, _react.useLayoutEffect)(function () {
|
|
16
|
+
if (target != null) {
|
|
17
|
+
setWidth(target.getBoundingClientRect().width);
|
|
18
|
+
var triggerObserver = new ResizeObserver(function (entries) {
|
|
19
|
+
var rect = entries[0].target.getBoundingClientRect();
|
|
20
|
+
setWidth(rect === null || rect === void 0 ? void 0 : rect.width);
|
|
21
|
+
});
|
|
22
|
+
triggerObserver.observe(target);
|
|
23
|
+
return function () {
|
|
24
|
+
triggerObserver.unobserve(target);
|
|
25
|
+
};
|
|
26
|
+
}
|
|
27
|
+
}, [target]);
|
|
28
|
+
return width;
|
|
29
|
+
};
|
|
30
|
+
var _default = exports["default"] = useWidth;
|