@flodesk/grain 6.5.8 → 6.5.9
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/es/components/autocomplete.js +16 -17
- package/es/components/select.js +18 -46
- package/package.json +1 -1
|
@@ -17,6 +17,7 @@ import "core-js/modules/es.array.filter.js";
|
|
|
17
17
|
import "core-js/modules/es.object.to-string.js";
|
|
18
18
|
import "core-js/modules/es.array.includes.js";
|
|
19
19
|
import "core-js/modules/es.string.includes.js";
|
|
20
|
+
import "core-js/modules/es.array.find.js";
|
|
20
21
|
import "core-js/modules/es.array.map.js";
|
|
21
22
|
import "core-js/modules/es.symbol.js";
|
|
22
23
|
import "core-js/modules/es.symbol.description.js";
|
|
@@ -28,7 +29,7 @@ import "core-js/modules/es.array.slice.js";
|
|
|
28
29
|
import "core-js/modules/es.array.from.js";
|
|
29
30
|
import "core-js/modules/es.regexp.exec.js";
|
|
30
31
|
import PropTypes from 'prop-types';
|
|
31
|
-
import React, { forwardRef, Fragment, useState } from 'react';
|
|
32
|
+
import React, { forwardRef, Fragment, useMemo, useState } from 'react';
|
|
32
33
|
import { Icon, Box, Text } from '.';
|
|
33
34
|
import { IconChevronDown } from '../icons';
|
|
34
35
|
import { Combobox } from '@headlessui/react';
|
|
@@ -81,7 +82,7 @@ var getShowGroupTitle = function getShowGroupTitle(index, option, filteredOption
|
|
|
81
82
|
|
|
82
83
|
export var Autocomplete = function Autocomplete(_ref2) {
|
|
83
84
|
var options = _ref2.options,
|
|
84
|
-
|
|
85
|
+
value = _ref2.value,
|
|
85
86
|
onChange = _ref2.onChange,
|
|
86
87
|
_ref2$menuPlacement = _ref2.menuPlacement,
|
|
87
88
|
menuPlacement = _ref2$menuPlacement === void 0 ? 'bottomStart' : _ref2$menuPlacement,
|
|
@@ -92,25 +93,24 @@ export var Autocomplete = function Autocomplete(_ref2) {
|
|
|
92
93
|
label = _ref2.label,
|
|
93
94
|
hint = _ref2.hint;
|
|
94
95
|
|
|
95
|
-
var _useState = useState(
|
|
96
|
+
var _useState = useState(''),
|
|
96
97
|
_useState2 = _slicedToArray(_useState, 2),
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
var _useState3 = useState(''),
|
|
101
|
-
_useState4 = _slicedToArray(_useState3, 2),
|
|
102
|
-
query = _useState4[0],
|
|
103
|
-
setQuery = _useState4[1];
|
|
98
|
+
query = _useState2[0],
|
|
99
|
+
setQuery = _useState2[1];
|
|
104
100
|
|
|
105
101
|
var handleChange = function handleChange(option) {
|
|
106
|
-
|
|
107
|
-
onChange && onChange(option);
|
|
102
|
+
onChange(option);
|
|
108
103
|
setQuery('');
|
|
109
104
|
};
|
|
110
105
|
|
|
111
106
|
var filteredOptions = getFilteredOptions(query, options);
|
|
112
107
|
var noResults = !Boolean(filteredOptions.length);
|
|
113
108
|
var fieldMarginTop = label || hint ? 'formControlAndLabelGap' : undefined;
|
|
109
|
+
var selectedOption = useMemo(function () {
|
|
110
|
+
return options.find(function (option) {
|
|
111
|
+
return option.value === value;
|
|
112
|
+
});
|
|
113
|
+
}, [options, value]);
|
|
114
114
|
return ___EmotionJSX("div", null, ___EmotionJSX(Combobox, {
|
|
115
115
|
value: selectedOption,
|
|
116
116
|
onChange: handleChange
|
|
@@ -148,10 +148,9 @@ export var Autocomplete = function Autocomplete(_ref2) {
|
|
|
148
148
|
as: Fragment,
|
|
149
149
|
disabled: option.isDisabled
|
|
150
150
|
}, function (_ref3) {
|
|
151
|
-
var active = _ref3.active
|
|
152
|
-
selected = _ref3.selected;
|
|
151
|
+
var active = _ref3.active;
|
|
153
152
|
return ___EmotionJSX(MenuItem, {
|
|
154
|
-
isSelected:
|
|
153
|
+
isSelected: option.value === value,
|
|
155
154
|
isActive: !option.isDisabled && active,
|
|
156
155
|
isDisabled: option.isDisabled
|
|
157
156
|
}, option.content);
|
|
@@ -160,8 +159,8 @@ export var Autocomplete = function Autocomplete(_ref2) {
|
|
|
160
159
|
};
|
|
161
160
|
Autocomplete.propTypes = {
|
|
162
161
|
options: PropTypes.array,
|
|
163
|
-
|
|
164
|
-
onChange: PropTypes.func,
|
|
162
|
+
value: PropTypes.string,
|
|
163
|
+
onChange: PropTypes.func.isRequired,
|
|
165
164
|
menuPlacement: types.menuPlacement,
|
|
166
165
|
menuWidth: types.dimension,
|
|
167
166
|
menuZIndex: types.zIndex,
|
package/es/components/select.js
CHANGED
|
@@ -1,31 +1,11 @@
|
|
|
1
1
|
import "core-js/modules/es.object.keys.js";
|
|
2
2
|
import "core-js/modules/es.array.index-of.js";
|
|
3
3
|
import "core-js/modules/es.symbol.js";
|
|
4
|
-
import "core-js/modules/es.symbol.description.js";
|
|
5
|
-
import "core-js/modules/es.object.to-string.js";
|
|
6
|
-
import "core-js/modules/es.symbol.iterator.js";
|
|
7
|
-
import "core-js/modules/es.array.iterator.js";
|
|
8
|
-
import "core-js/modules/es.string.iterator.js";
|
|
9
|
-
import "core-js/modules/web.dom-collections.iterator.js";
|
|
10
|
-
import "core-js/modules/es.array.slice.js";
|
|
11
|
-
import "core-js/modules/es.array.from.js";
|
|
12
|
-
import "core-js/modules/es.regexp.exec.js";
|
|
13
4
|
import _styled from "@emotion/styled/base";
|
|
14
5
|
var _excluded = ["children", "triggerVariant"];
|
|
15
|
-
|
|
16
|
-
function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
|
|
17
|
-
|
|
18
|
-
function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
|
|
19
|
-
|
|
20
|
-
function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
|
|
21
|
-
|
|
22
|
-
function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
|
|
23
|
-
|
|
24
|
-
function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
|
|
25
|
-
|
|
26
|
-
function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
|
|
27
|
-
|
|
28
6
|
import "core-js/modules/es.object.assign.js";
|
|
7
|
+
import "core-js/modules/es.array.find.js";
|
|
8
|
+
import "core-js/modules/es.object.to-string.js";
|
|
29
9
|
import "core-js/modules/es.array.map.js";
|
|
30
10
|
|
|
31
11
|
function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
|
|
@@ -35,13 +15,13 @@ function _objectWithoutProperties(source, excluded) { if (source == null) return
|
|
|
35
15
|
function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
|
|
36
16
|
|
|
37
17
|
import PropTypes from 'prop-types';
|
|
38
|
-
import React, {
|
|
39
|
-
import {
|
|
18
|
+
import React, { forwardRef, Fragment, useMemo } from 'react';
|
|
19
|
+
import { Box, Icon, Text, TextButton } from '.';
|
|
40
20
|
import { IconChevronDown } from '../icons';
|
|
41
21
|
import { Listbox } from '@headlessui/react';
|
|
42
22
|
import { getColor, getRadius } from '../utilities';
|
|
43
23
|
import { types } from '../types';
|
|
44
|
-
import {
|
|
24
|
+
import { componentVars, FieldHint, FieldLabel, fieldVars, MenuCard, MenuItem, MenuTransition, styles } from '../foundational';
|
|
45
25
|
import { jsx as ___EmotionJSX } from "@emotion/react";
|
|
46
26
|
|
|
47
27
|
var TriggerButton = /*#__PURE__*/_styled("button", process.env.NODE_ENV === "production" ? {
|
|
@@ -49,7 +29,7 @@ var TriggerButton = /*#__PURE__*/_styled("button", process.env.NODE_ENV === "pro
|
|
|
49
29
|
} : {
|
|
50
30
|
target: "e17qd7kh0",
|
|
51
31
|
label: "TriggerButton"
|
|
52
|
-
})(styles.buttonReset, ";", styles.transitions, ";color:inherit;display:flex;align-items:center;gap:8px;border:none;background:", getColor('fade1'), ";padding:0 ", fieldVars.xPadding, ";min-height:", componentVars.textBoxHeight, ";border-radius:", getRadius('s'), ";width:100%;text-align:left;&:hover{background:", getColor('fade2'), ";}" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,
|
|
32
|
+
})(styles.buttonReset, ";", styles.transitions, ";color:inherit;display:flex;align-items:center;gap:8px;border:none;background:", getColor('fade1'), ";padding:0 ", fieldVars.xPadding, ";min-height:", componentVars.textBoxHeight, ";border-radius:", getRadius('s'), ";width:100%;text-align:left;&:hover{background:", getColor('fade2'), ";}" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uL3NyYy9jb21wb25lbnRzL3NlbGVjdC5qc3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBbUJtQyIsImZpbGUiOiIuLi8uLi9zcmMvY29tcG9uZW50cy9zZWxlY3QuanN4Iiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IFByb3BUeXBlcyBmcm9tICdwcm9wLXR5cGVzJztcbmltcG9ydCBSZWFjdCwgeyBmb3J3YXJkUmVmLCBGcmFnbWVudCwgdXNlTWVtbyB9IGZyb20gJ3JlYWN0JztcbmltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJztcbmltcG9ydCB7IEJveCwgSWNvbiwgVGV4dCwgVGV4dEJ1dHRvbiB9IGZyb20gJy4nO1xuaW1wb3J0IHsgSWNvbkNoZXZyb25Eb3duIH0gZnJvbSAnLi4vaWNvbnMnO1xuaW1wb3J0IHsgTGlzdGJveCB9IGZyb20gJ0BoZWFkbGVzc3VpL3JlYWN0JztcbmltcG9ydCB7IGdldENvbG9yLCBnZXRSYWRpdXMgfSBmcm9tICcuLi91dGlsaXRpZXMnO1xuaW1wb3J0IHsgdHlwZXMgfSBmcm9tICcuLi90eXBlcyc7XG5pbXBvcnQge1xuICBjb21wb25lbnRWYXJzLFxuICBGaWVsZEhpbnQsXG4gIEZpZWxkTGFiZWwsXG4gIGZpZWxkVmFycyxcbiAgTWVudUNhcmQsXG4gIE1lbnVJdGVtLFxuICBNZW51VHJhbnNpdGlvbixcbiAgc3R5bGVzLFxufSBmcm9tICcuLi9mb3VuZGF0aW9uYWwnO1xuXG5jb25zdCBUcmlnZ2VyQnV0dG9uID0gc3R5bGVkLmJ1dHRvbmBcbiAgJHtzdHlsZXMuYnV0dG9uUmVzZXR9O1xuICAke3N0eWxlcy50cmFuc2l0aW9uc307XG5cbiAgY29sb3I6IGluaGVyaXQ7XG4gIGRpc3BsYXk6IGZsZXg7XG4gIGFsaWduLWl0ZW1zOiBjZW50ZXI7XG4gIGdhcDogOHB4O1xuICBib3JkZXI6IG5vbmU7XG4gIGJhY2tncm91bmQ6ICR7Z2V0Q29sb3IoJ2ZhZGUxJyl9O1xuICBwYWRkaW5nOiAwICR7ZmllbGRWYXJzLnhQYWRkaW5nfTtcbiAgbWluLWhlaWdodDogJHtjb21wb25lbnRWYXJzLnRleHRCb3hIZWlnaHR9O1xuICBib3JkZXItcmFkaXVzOiAke2dldFJhZGl1cygncycpfTtcbiAgd2lkdGg6IDEwMCU7XG4gIHRleHQtYWxpZ246IGxlZnQ7XG5cbiAgJjpob3ZlciB7XG4gICAgYmFja2dyb3VuZDogJHtnZXRDb2xvcignZmFkZTInKX07XG4gIH1cbmA7XG5cbmNvbnN0IFRyaWdnZXIgPSBmb3J3YXJkUmVmKCh7IGNoaWxkcmVuLCB0cmlnZ2VyVmFyaWFudCwgLi4ucHJvcHMgfSwgcmVmKSA9PiAoXG4gIDw+XG4gICAge3RyaWdnZXJWYXJpYW50ID09PSAnYm94JyAmJiAoXG4gICAgICA8VHJpZ2dlckJ1dHRvbiByZWY9e3JlZn0gdHlwZT1cImJ1dHRvblwiIHsuLi5wcm9wc30+XG4gICAgICAgIDxUZXh0IGhhc0VsbGlwc2lzPntjaGlsZHJlbn08L1RleHQ+XG4gICAgICAgIDxCb3ggbWFyZ2luTGVmdD1cImF1dG9cIj5cbiAgICAgICAgICA8SWNvbiBpY29uPXs8SWNvbkNoZXZyb25Eb3duIC8+fSAvPlxuICAgICAgICA8L0JveD5cbiAgICAgIDwvVHJpZ2dlckJ1dHRvbj5cbiAgICApfVxuICAgIHt0cmlnZ2VyVmFyaWFudCA9PT0gJ3RleHQnICYmIChcbiAgICAgIDxUZXh0QnV0dG9uIHJlZj17cmVmfSBpY29uPXs8SWNvbkNoZXZyb25Eb3duIC8+fSBpY29uUG9zaXRpb249XCJyaWdodFwiIHsuLi5wcm9wc30+XG4gICAgICAgIHtjaGlsZHJlbn1cbiAgICAgIDwvVGV4dEJ1dHRvbj5cbiAgICApfVxuICA8Lz5cbikpO1xuXG5jb25zdCBTZWxlY3RSb290ID0gKHsgLi4ucHJvcHMgfSkgPT4gPEJveCB7Li4ucHJvcHN9IG1pbldpZHRoPVwiMHB4XCIgLz47XG5cbmV4cG9ydCBjb25zdCBTZWxlY3QgPSAoe1xuICBvcHRpb25zLFxuICB2YWx1ZSxcbiAgb25DaGFuZ2UsXG4gIG1lbnVQbGFjZW1lbnQgPSAnYm90dG9tU3RhcnQnLFxuICBtZW51V2lkdGggPSAnMTAwJScsXG4gIHRyaWdnZXI6IGN1c3RvbVRyaWdnZXIsXG4gIHRyaWdnZXJWYXJpYW50ID0gJ2JveCcsXG4gIGxhYmVsLFxuICBoaW50LFxuICBtZW51WkluZGV4LFxufSkgPT4ge1xuICBjb25zdCBmaWVsZE1hcmdpblRvcCA9IGxhYmVsIHx8IGhpbnQgPyAnZm9ybUNvbnRyb2xBbmRMYWJlbEdhcCcgOiB1bmRlZmluZWQ7XG4gIGNvbnN0IHNlbGVjdGVkT3B0aW9uID0gdXNlTWVtbyhcbiAgICAoKSA9PiBvcHRpb25zLmZpbmQob3B0aW9uID0+IG9wdGlvbi52YWx1ZSA9PT0gdmFsdWUpLFxuICAgIFtvcHRpb25zLCB2YWx1ZV0sXG4gICk7XG5cbiAgcmV0dXJuIChcbiAgICA8TGlzdGJveCBhcz17U2VsZWN0Um9vdH0gdmFsdWU9e3ZhbHVlfSBvbkNoYW5nZT17b25DaGFuZ2V9PlxuICAgICAge2xhYmVsICYmIDxMaXN0Ym94LkxhYmVsIGFzPXtGaWVsZExhYmVsfT57bGFiZWx9PC9MaXN0Ym94LkxhYmVsPn1cbiAgICAgIHtoaW50ICYmIDxGaWVsZEhpbnQ+e2hpbnR9PC9GaWVsZEhpbnQ+fVxuXG4gICAgICA8Qm94IHBvc2l0aW9uPVwicmVsYXRpdmVcIiBtYXJnaW5Ub3A9e2ZpZWxkTWFyZ2luVG9wfT5cbiAgICAgICAgPExpc3Rib3guQnV0dG9uIGFzPXtGcmFnbWVudH0+XG4gICAgICAgICAge2N1c3RvbVRyaWdnZXIgPyAoXG4gICAgICAgICAgICBjdXN0b21UcmlnZ2VyKHNlbGVjdGVkT3B0aW9uKVxuICAgICAgICAgICkgOiAoXG4gICAgICAgICAgICA8VHJpZ2dlciB0cmlnZ2VyVmFyaWFudD17dHJpZ2dlclZhcmlhbnR9PntzZWxlY3RlZE9wdGlvbi5jb250ZW50fTwvVHJpZ2dlcj5cbiAgICAgICAgICApfVxuICAgICAgICA8L0xpc3Rib3guQnV0dG9uPlxuXG4gICAgICAgIDxNZW51VHJhbnNpdGlvbj5cbiAgICAgICAgICA8TGlzdGJveC5PcHRpb25zXG4gICAgICAgICAgICBwbGFjZW1lbnQ9e21lbnVQbGFjZW1lbnR9XG4gICAgICAgICAgICB3aWR0aD17bWVudVdpZHRofVxuICAgICAgICAgICAgYXM9e01lbnVDYXJkfVxuICAgICAgICAgICAgekluZGV4PXttZW51WkluZGV4fVxuICAgICAgICAgID5cbiAgICAgICAgICAgIHtvcHRpb25zLm1hcCgob3B0aW9uLCBpbmRleCkgPT4gKFxuICAgICAgICAgICAgICA8TGlzdGJveC5PcHRpb24ga2V5PXtpbmRleH0gdmFsdWU9e29wdGlvbn0gYXM9e0ZyYWdtZW50fSBkaXNhYmxlZD17b3B0aW9uLmlzRGlzYWJsZWR9PlxuICAgICAgICAgICAgICAgIHsoeyBhY3RpdmUgfSkgPT4ge1xuICAgICAgICAgICAgICAgICAgcmV0dXJuIChcbiAgICAgICAgICAgICAgICAgICAgPE1lbnVJdGVtXG4gICAgICAgICAgICAgICAgICAgICAgaXNTZWxlY3RlZD17b3B0aW9uLnZhbHVlID09PSB2YWx1ZX1cbiAgICAgICAgICAgICAgICAgICAgICBpc0FjdGl2ZT17YWN0aXZlfVxuICAgICAgICAgICAgICAgICAgICAgIGlzRGlzYWJsZWQ9e29wdGlvbi5pc0Rpc2FibGVkfVxuICAgICAgICAgICAgICAgICAgICA+XG4gICAgICAgICAgICAgICAgICAgICAge29wdGlvbi5jb250ZW50fVxuICAgICAgICAgICAgICAgICAgICA8L01lbnVJdGVtPlxuICAgICAgICAgICAgICAgICAgKTtcbiAgICAgICAgICAgICAgICB9fVxuICAgICAgICAgICAgICA8L0xpc3Rib3guT3B0aW9uPlxuICAgICAgICAgICAgKSl9XG4gICAgICAgICAgPC9MaXN0Ym94Lk9wdGlvbnM+XG4gICAgICAgIDwvTWVudVRyYW5zaXRpb24+XG4gICAgICA8L0JveD5cbiAgICA8L0xpc3Rib3g+XG4gICk7XG59O1xuXG5TZWxlY3QucHJvcFR5cGVzID0ge1xuICBvcHRpb25zOiBQcm9wVHlwZXMuYXJyYXksXG4gIHZhbHVlOiBQcm9wVHlwZXMuc3RyaW5nLmlzUmVxdWlyZWQsXG4gIG9uQ2hhbmdlOiBQcm9wVHlwZXMuZnVuYy5pc1JlcXVpcmVkLFxuICBtZW51UGxhY2VtZW50OiB0eXBlcy5tZW51UGxhY2VtZW50LFxuICBtZW51V2lkdGg6IHR5cGVzLmRpbWVuc2lvbixcbiAgbWVudVpJbmRleDogdHlwZXMuekluZGV4LFxuICB0cmlnZ2VyOiBQcm9wVHlwZXMuZnVuYyxcbiAgdHJpZ2dlclZhcmlhbnQ6IFByb3BUeXBlcy5vbmVPZihbJ2JveCcsICd0ZXh0J10pLFxuICBsYWJlbDogdHlwZXMubGFiZWwsXG4gIGhpbnQ6IHR5cGVzLmhpbnQsXG59O1xuIl19 */"));
|
|
53
33
|
|
|
54
34
|
var Trigger = /*#__PURE__*/forwardRef(function (_ref, ref) {
|
|
55
35
|
var children = _ref.children,
|
|
@@ -81,7 +61,7 @@ var SelectRoot = function SelectRoot(_ref2) {
|
|
|
81
61
|
|
|
82
62
|
export var Select = function Select(_ref3) {
|
|
83
63
|
var options = _ref3.options,
|
|
84
|
-
|
|
64
|
+
value = _ref3.value,
|
|
85
65
|
onChange = _ref3.onChange,
|
|
86
66
|
_ref3$menuPlacement = _ref3.menuPlacement,
|
|
87
67
|
menuPlacement = _ref3$menuPlacement === void 0 ? 'bottomStart' : _ref3$menuPlacement,
|
|
@@ -93,23 +73,16 @@ export var Select = function Select(_ref3) {
|
|
|
93
73
|
label = _ref3.label,
|
|
94
74
|
hint = _ref3.hint,
|
|
95
75
|
menuZIndex = _ref3.menuZIndex;
|
|
96
|
-
|
|
97
|
-
var _useState = useState(defaultOption || {}),
|
|
98
|
-
_useState2 = _slicedToArray(_useState, 2),
|
|
99
|
-
selectedOption = _useState2[0],
|
|
100
|
-
setSelectedOption = _useState2[1];
|
|
101
|
-
|
|
102
76
|
var fieldMarginTop = label || hint ? 'formControlAndLabelGap' : undefined;
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
};
|
|
108
|
-
|
|
77
|
+
var selectedOption = useMemo(function () {
|
|
78
|
+
return options.find(function (option) {
|
|
79
|
+
return option.value === value;
|
|
80
|
+
});
|
|
81
|
+
}, [options, value]);
|
|
109
82
|
return ___EmotionJSX(Listbox, {
|
|
110
83
|
as: SelectRoot,
|
|
111
|
-
value:
|
|
112
|
-
onChange:
|
|
84
|
+
value: value,
|
|
85
|
+
onChange: onChange
|
|
113
86
|
}, label && ___EmotionJSX(Listbox.Label, {
|
|
114
87
|
as: FieldLabel
|
|
115
88
|
}, label), hint && ___EmotionJSX(FieldHint, null, hint), ___EmotionJSX(Box, {
|
|
@@ -131,10 +104,9 @@ export var Select = function Select(_ref3) {
|
|
|
131
104
|
as: Fragment,
|
|
132
105
|
disabled: option.isDisabled
|
|
133
106
|
}, function (_ref4) {
|
|
134
|
-
var active = _ref4.active
|
|
135
|
-
selected = _ref4.selected;
|
|
107
|
+
var active = _ref4.active;
|
|
136
108
|
return ___EmotionJSX(MenuItem, {
|
|
137
|
-
isSelected:
|
|
109
|
+
isSelected: option.value === value,
|
|
138
110
|
isActive: active,
|
|
139
111
|
isDisabled: option.isDisabled
|
|
140
112
|
}, option.content);
|
|
@@ -143,8 +115,8 @@ export var Select = function Select(_ref3) {
|
|
|
143
115
|
};
|
|
144
116
|
Select.propTypes = {
|
|
145
117
|
options: PropTypes.array,
|
|
146
|
-
|
|
147
|
-
onChange: PropTypes.func,
|
|
118
|
+
value: PropTypes.string.isRequired,
|
|
119
|
+
onChange: PropTypes.func.isRequired,
|
|
148
120
|
menuPlacement: types.menuPlacement,
|
|
149
121
|
menuWidth: types.dimension,
|
|
150
122
|
menuZIndex: types.zIndex,
|