@flodesk/grain 5.8.1 → 5.8.2
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/box.js +149 -82
- package/es/components/select.js +54 -30
- package/package.json +1 -1
package/es/components/box.js
CHANGED
|
@@ -4,7 +4,8 @@ import "core-js/modules/es.object.define-properties.js";
|
|
|
4
4
|
import "core-js/modules/es.object.keys.js";
|
|
5
5
|
import "core-js/modules/es.array.index-of.js";
|
|
6
6
|
import "core-js/modules/es.symbol.js";
|
|
7
|
-
var _excluded = ["
|
|
7
|
+
var _excluded = ["borderSide", "borderWidth", "borderColor", "padding", "paddingTop", "paddingBottom", "paddingLeft", "paddingRight", "margin", "marginTop", "marginBottom", "marginLeft", "marginRight", "top", "bottom", "left", "right", "width", "minWidth", "maxWidth", "height", "minHeight", "maxHeight", "color", "backgroundColor", "position", "radius", "shadow", "overflow", "aspectRatio", "zIndex"],
|
|
8
|
+
_excluded2 = ["children", "color", "backgroundColor", "borderColor", "borderWidth", "borderSide", "width", "minWidth", "maxWidth", "height", "minHeight", "maxHeight", "radius", "padding", "paddingTop", "paddingBottom", "paddingLeft", "paddingRight", "paddingX", "paddingY", "margin", "marginTop", "marginBottom", "marginLeft", "marginRight", "marginX", "marginY", "position", "top", "bottom", "left", "right", "shadow", "overflow", "aspectRatio", "zIndex"];
|
|
8
9
|
|
|
9
10
|
var _templateObject;
|
|
10
11
|
|
|
@@ -21,105 +22,171 @@ import React from 'react';
|
|
|
21
22
|
import styled from '@emotion/styled';
|
|
22
23
|
import { types } from '../types';
|
|
23
24
|
import PropTypes from 'prop-types';
|
|
24
|
-
var Wrapper = styled
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
}, function (p) {
|
|
29
|
-
return getResponsiveSpace('padding-top', p.paddingTop);
|
|
30
|
-
}, function (p) {
|
|
31
|
-
return getResponsiveSpace('padding-bottom', p.paddingBottom);
|
|
32
|
-
}, function (p) {
|
|
33
|
-
return getResponsiveSpace('padding-left', p.paddingLeft);
|
|
34
|
-
}, function (p) {
|
|
35
|
-
return getResponsiveSpace('padding-right', p.paddingRight);
|
|
36
|
-
}, function (p) {
|
|
37
|
-
return getResponsiveSpace('margin', p.margin);
|
|
38
|
-
}, function (p) {
|
|
39
|
-
return getResponsiveSpace('margin-top', p.marginTop);
|
|
40
|
-
}, function (p) {
|
|
41
|
-
return getResponsiveSpace('margin-bottom', p.marginBottom);
|
|
42
|
-
}, function (p) {
|
|
43
|
-
return getResponsiveSpace('margin-left', p.marginLeft);
|
|
44
|
-
}, function (p) {
|
|
45
|
-
return getResponsiveSpace('margin-right', p.marginRight);
|
|
46
|
-
}, function (p) {
|
|
47
|
-
return getResponsiveSpace('top', p.top);
|
|
48
|
-
}, function (p) {
|
|
49
|
-
return getResponsiveSpace('bottom', p.bottom);
|
|
50
|
-
}, function (p) {
|
|
51
|
-
return getResponsiveSpace('left', p.left);
|
|
52
|
-
}, function (p) {
|
|
53
|
-
return getResponsiveSpace('right', p.right);
|
|
54
|
-
}, function (p) {
|
|
55
|
-
return getResponsiveDimension('width', p.width);
|
|
56
|
-
}, function (p) {
|
|
57
|
-
return getResponsiveDimension('min-width', p.minWidth);
|
|
58
|
-
}, function (p) {
|
|
59
|
-
return getResponsiveDimension('max-width', p.maxWidth);
|
|
60
|
-
}, function (p) {
|
|
61
|
-
return getResponsiveDimension('height', p.height);
|
|
62
|
-
}, function (p) {
|
|
63
|
-
return getResponsiveDimension('min-height', p.minHeight);
|
|
64
|
-
}, function (p) {
|
|
65
|
-
return getResponsiveDimension('max-height', p.maxHeight);
|
|
66
|
-
}, function (p) {
|
|
67
|
-
return getColor(p.color);
|
|
68
|
-
}, function (p) {
|
|
69
|
-
return getColor(p.backgroundColor);
|
|
70
|
-
}, function (p) {
|
|
71
|
-
return p.position;
|
|
72
|
-
}, function (p) {
|
|
73
|
-
return getRadius(p.radius);
|
|
74
|
-
}, function (p) {
|
|
75
|
-
return getShadow(p.shadow);
|
|
76
|
-
}, function (p) {
|
|
77
|
-
return p.overflow;
|
|
78
|
-
}, function (p) {
|
|
79
|
-
return p.aspectRatio;
|
|
80
|
-
}, function (p) {
|
|
81
|
-
return p.zIndex && "z-index: ".concat(p.zIndex);
|
|
82
|
-
});
|
|
83
|
-
export var Box = function Box(_ref) {
|
|
84
|
-
var children = _ref.children,
|
|
85
|
-
color = _ref.color,
|
|
86
|
-
backgroundColor = _ref.backgroundColor,
|
|
87
|
-
_ref$borderColor = _ref.borderColor,
|
|
88
|
-
borderColor = _ref$borderColor === void 0 ? 'border' : _ref$borderColor,
|
|
89
|
-
_ref$borderWidth = _ref.borderWidth,
|
|
90
|
-
borderWidth = _ref$borderWidth === void 0 ? '1px' : _ref$borderWidth,
|
|
91
|
-
borderSide = _ref.borderSide,
|
|
92
|
-
width = _ref.width,
|
|
93
|
-
minWidth = _ref.minWidth,
|
|
94
|
-
maxWidth = _ref.maxWidth,
|
|
95
|
-
height = _ref.height,
|
|
96
|
-
minHeight = _ref.minHeight,
|
|
97
|
-
maxHeight = _ref.maxHeight,
|
|
98
|
-
radius = _ref.radius,
|
|
25
|
+
var Wrapper = styled(function (_ref) {
|
|
26
|
+
var borderSide = _ref.borderSide,
|
|
27
|
+
borderWidth = _ref.borderWidth,
|
|
28
|
+
borderColor = _ref.borderColor,
|
|
99
29
|
padding = _ref.padding,
|
|
100
30
|
paddingTop = _ref.paddingTop,
|
|
101
31
|
paddingBottom = _ref.paddingBottom,
|
|
102
32
|
paddingLeft = _ref.paddingLeft,
|
|
103
33
|
paddingRight = _ref.paddingRight,
|
|
104
|
-
paddingX = _ref.paddingX,
|
|
105
|
-
paddingY = _ref.paddingY,
|
|
106
34
|
margin = _ref.margin,
|
|
107
35
|
marginTop = _ref.marginTop,
|
|
108
36
|
marginBottom = _ref.marginBottom,
|
|
109
37
|
marginLeft = _ref.marginLeft,
|
|
110
38
|
marginRight = _ref.marginRight,
|
|
111
|
-
marginX = _ref.marginX,
|
|
112
|
-
marginY = _ref.marginY,
|
|
113
|
-
position = _ref.position,
|
|
114
39
|
top = _ref.top,
|
|
115
40
|
bottom = _ref.bottom,
|
|
116
41
|
left = _ref.left,
|
|
117
42
|
right = _ref.right,
|
|
43
|
+
width = _ref.width,
|
|
44
|
+
minWidth = _ref.minWidth,
|
|
45
|
+
maxWidth = _ref.maxWidth,
|
|
46
|
+
height = _ref.height,
|
|
47
|
+
minHeight = _ref.minHeight,
|
|
48
|
+
maxHeight = _ref.maxHeight,
|
|
49
|
+
color = _ref.color,
|
|
50
|
+
backgroundColor = _ref.backgroundColor,
|
|
51
|
+
position = _ref.position,
|
|
52
|
+
radius = _ref.radius,
|
|
118
53
|
shadow = _ref.shadow,
|
|
119
54
|
overflow = _ref.overflow,
|
|
120
55
|
aspectRatio = _ref.aspectRatio,
|
|
121
56
|
zIndex = _ref.zIndex,
|
|
122
|
-
|
|
57
|
+
rest = _objectWithoutProperties(_ref, _excluded);
|
|
58
|
+
|
|
59
|
+
return /*#__PURE__*/React.createElement("div", rest);
|
|
60
|
+
})(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n ", ";\n\n ", ";\n ", ";\n ", ";\n ", ";\n ", ";\n\n ", ";\n ", ";\n ", ";\n ", ";\n ", ";\n\n ", ";\n ", ";\n ", ";\n ", ";\n\n ", ";\n ", ";\n ", ";\n ", ";\n ", ";\n ", ";\n\n color: ", ";\n background-color: ", ";\n\n position: ", ";\n border-radius: ", ";\n box-shadow: ", ";\n overflow: ", ";\n aspect-ratio: ", ";\n ", ";\n"])), function (_ref2) {
|
|
61
|
+
var borderSide = _ref2.borderSide,
|
|
62
|
+
borderWidth = _ref2.borderWidth,
|
|
63
|
+
borderColor = _ref2.borderColor;
|
|
64
|
+
return getBorder(borderSide, borderWidth, borderColor);
|
|
65
|
+
}, function (_ref3) {
|
|
66
|
+
var padding = _ref3.padding;
|
|
67
|
+
return getResponsiveSpace('padding', padding);
|
|
68
|
+
}, function (_ref4) {
|
|
69
|
+
var paddingTop = _ref4.paddingTop;
|
|
70
|
+
return getResponsiveSpace('padding-top', paddingTop);
|
|
71
|
+
}, function (_ref5) {
|
|
72
|
+
var paddingBottom = _ref5.paddingBottom;
|
|
73
|
+
return getResponsiveSpace('padding-bottom', paddingBottom);
|
|
74
|
+
}, function (_ref6) {
|
|
75
|
+
var paddingLeft = _ref6.paddingLeft;
|
|
76
|
+
return getResponsiveSpace('padding-left', paddingLeft);
|
|
77
|
+
}, function (_ref7) {
|
|
78
|
+
var paddingRight = _ref7.paddingRight;
|
|
79
|
+
return getResponsiveSpace('padding-right', paddingRight);
|
|
80
|
+
}, function (_ref8) {
|
|
81
|
+
var margin = _ref8.margin;
|
|
82
|
+
return getResponsiveSpace('margin', margin);
|
|
83
|
+
}, function (_ref9) {
|
|
84
|
+
var marginTop = _ref9.marginTop;
|
|
85
|
+
return getResponsiveSpace('margin-top', marginTop);
|
|
86
|
+
}, function (_ref10) {
|
|
87
|
+
var marginBottom = _ref10.marginBottom;
|
|
88
|
+
return getResponsiveSpace('margin-bottom', marginBottom);
|
|
89
|
+
}, function (_ref11) {
|
|
90
|
+
var marginLeft = _ref11.marginLeft;
|
|
91
|
+
return getResponsiveSpace('margin-left', marginLeft);
|
|
92
|
+
}, function (_ref12) {
|
|
93
|
+
var marginRight = _ref12.marginRight;
|
|
94
|
+
return getResponsiveSpace('margin-right', marginRight);
|
|
95
|
+
}, function (_ref13) {
|
|
96
|
+
var top = _ref13.top;
|
|
97
|
+
return getResponsiveSpace('top', top);
|
|
98
|
+
}, function (_ref14) {
|
|
99
|
+
var bottom = _ref14.bottom;
|
|
100
|
+
return getResponsiveSpace('bottom', bottom);
|
|
101
|
+
}, function (_ref15) {
|
|
102
|
+
var left = _ref15.left;
|
|
103
|
+
return getResponsiveSpace('left', left);
|
|
104
|
+
}, function (_ref16) {
|
|
105
|
+
var right = _ref16.right;
|
|
106
|
+
return getResponsiveSpace('right', right);
|
|
107
|
+
}, function (_ref17) {
|
|
108
|
+
var width = _ref17.width;
|
|
109
|
+
return getResponsiveDimension('width', width);
|
|
110
|
+
}, function (_ref18) {
|
|
111
|
+
var minWidth = _ref18.minWidth;
|
|
112
|
+
return getResponsiveDimension('min-width', minWidth);
|
|
113
|
+
}, function (_ref19) {
|
|
114
|
+
var maxWidth = _ref19.maxWidth;
|
|
115
|
+
return getResponsiveDimension('max-width', maxWidth);
|
|
116
|
+
}, function (_ref20) {
|
|
117
|
+
var height = _ref20.height;
|
|
118
|
+
return getResponsiveDimension('height', height);
|
|
119
|
+
}, function (_ref21) {
|
|
120
|
+
var minHeight = _ref21.minHeight;
|
|
121
|
+
return getResponsiveDimension('min-height', minHeight);
|
|
122
|
+
}, function (_ref22) {
|
|
123
|
+
var maxHeight = _ref22.maxHeight;
|
|
124
|
+
return getResponsiveDimension('max-height', maxHeight);
|
|
125
|
+
}, function (_ref23) {
|
|
126
|
+
var color = _ref23.color;
|
|
127
|
+
return getColor(color);
|
|
128
|
+
}, function (_ref24) {
|
|
129
|
+
var backgroundColor = _ref24.backgroundColor;
|
|
130
|
+
return getColor(backgroundColor);
|
|
131
|
+
}, function (_ref25) {
|
|
132
|
+
var position = _ref25.position;
|
|
133
|
+
return position;
|
|
134
|
+
}, function (_ref26) {
|
|
135
|
+
var radius = _ref26.radius;
|
|
136
|
+
return getRadius(radius);
|
|
137
|
+
}, function (_ref27) {
|
|
138
|
+
var shadow = _ref27.shadow;
|
|
139
|
+
return getShadow(shadow);
|
|
140
|
+
}, function (_ref28) {
|
|
141
|
+
var overflow = _ref28.overflow;
|
|
142
|
+
return overflow;
|
|
143
|
+
}, function (_ref29) {
|
|
144
|
+
var aspectRatio = _ref29.aspectRatio;
|
|
145
|
+
return aspectRatio;
|
|
146
|
+
}, function (_ref30) {
|
|
147
|
+
var zIndex = _ref30.zIndex;
|
|
148
|
+
return zIndex && "z-index: ".concat(zIndex);
|
|
149
|
+
});
|
|
150
|
+
export var Box = function Box(_ref31) {
|
|
151
|
+
var children = _ref31.children,
|
|
152
|
+
color = _ref31.color,
|
|
153
|
+
backgroundColor = _ref31.backgroundColor,
|
|
154
|
+
_ref31$borderColor = _ref31.borderColor,
|
|
155
|
+
borderColor = _ref31$borderColor === void 0 ? 'border' : _ref31$borderColor,
|
|
156
|
+
_ref31$borderWidth = _ref31.borderWidth,
|
|
157
|
+
borderWidth = _ref31$borderWidth === void 0 ? '1px' : _ref31$borderWidth,
|
|
158
|
+
borderSide = _ref31.borderSide,
|
|
159
|
+
width = _ref31.width,
|
|
160
|
+
minWidth = _ref31.minWidth,
|
|
161
|
+
maxWidth = _ref31.maxWidth,
|
|
162
|
+
height = _ref31.height,
|
|
163
|
+
minHeight = _ref31.minHeight,
|
|
164
|
+
maxHeight = _ref31.maxHeight,
|
|
165
|
+
radius = _ref31.radius,
|
|
166
|
+
padding = _ref31.padding,
|
|
167
|
+
paddingTop = _ref31.paddingTop,
|
|
168
|
+
paddingBottom = _ref31.paddingBottom,
|
|
169
|
+
paddingLeft = _ref31.paddingLeft,
|
|
170
|
+
paddingRight = _ref31.paddingRight,
|
|
171
|
+
paddingX = _ref31.paddingX,
|
|
172
|
+
paddingY = _ref31.paddingY,
|
|
173
|
+
margin = _ref31.margin,
|
|
174
|
+
marginTop = _ref31.marginTop,
|
|
175
|
+
marginBottom = _ref31.marginBottom,
|
|
176
|
+
marginLeft = _ref31.marginLeft,
|
|
177
|
+
marginRight = _ref31.marginRight,
|
|
178
|
+
marginX = _ref31.marginX,
|
|
179
|
+
marginY = _ref31.marginY,
|
|
180
|
+
position = _ref31.position,
|
|
181
|
+
top = _ref31.top,
|
|
182
|
+
bottom = _ref31.bottom,
|
|
183
|
+
left = _ref31.left,
|
|
184
|
+
right = _ref31.right,
|
|
185
|
+
shadow = _ref31.shadow,
|
|
186
|
+
overflow = _ref31.overflow,
|
|
187
|
+
aspectRatio = _ref31.aspectRatio,
|
|
188
|
+
zIndex = _ref31.zIndex,
|
|
189
|
+
props = _objectWithoutProperties(_ref31, _excluded2);
|
|
123
190
|
|
|
124
191
|
return /*#__PURE__*/React.createElement(Wrapper, Object.assign({
|
|
125
192
|
backgroundColor: backgroundColor,
|
package/es/components/select.js
CHANGED
|
@@ -12,8 +12,9 @@ import "core-js/modules/es.string.iterator.js";
|
|
|
12
12
|
import "core-js/modules/web.dom-collections.iterator.js";
|
|
13
13
|
import "core-js/modules/es.array.from.js";
|
|
14
14
|
import "core-js/modules/es.regexp.exec.js";
|
|
15
|
-
var _excluded = ["
|
|
16
|
-
_excluded2 = ["children",
|
|
15
|
+
var _excluded = ["menuWidth", "menuAlign"],
|
|
16
|
+
_excluded2 = ["children"],
|
|
17
|
+
_excluded3 = ["children", "isSelected", "isActive"];
|
|
17
18
|
|
|
18
19
|
var _templateObject, _templateObject2, _templateObject3;
|
|
19
20
|
|
|
@@ -44,28 +45,43 @@ import styled from '@emotion/styled';
|
|
|
44
45
|
import { Icon, Box, Text } from '.';
|
|
45
46
|
import { IconCheck, IconChevronDown } from '../icons';
|
|
46
47
|
import { Listbox } from '@headlessui/react';
|
|
47
|
-
import { getColor, getRadius, getShadow } from '../utilities';
|
|
48
|
-
|
|
49
|
-
var
|
|
48
|
+
import { getColor, getDimension, getRadius, getShadow } from '../utilities';
|
|
49
|
+
import { types } from '../types';
|
|
50
|
+
var Options = styled(function (_ref) {
|
|
51
|
+
var menuWidth = _ref.menuWidth,
|
|
52
|
+
menuAlign = _ref.menuAlign,
|
|
53
|
+
rest = _objectWithoutProperties(_ref, _excluded);
|
|
54
|
+
|
|
55
|
+
return /*#__PURE__*/React.createElement(Listbox.Options, rest);
|
|
56
|
+
})(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n padding: 8px;\n margin: 0;\n position: absolute;\n background: white;\n box-shadow: ", ";\n border-radius: ", ";\n max-height: 468px;\n overflow: auto;\n width: ", ";\n ", "\n\n &:focus {\n outline: none;\n }\n"])), getShadow('m'), getRadius('s'), function (_ref2) {
|
|
57
|
+
var menuWidth = _ref2.menuWidth;
|
|
58
|
+
return getDimension(menuWidth);
|
|
59
|
+
}, function (_ref3) {
|
|
60
|
+
var menuAlign = _ref3.menuAlign;
|
|
61
|
+
return "".concat(menuAlign, ": 0;");
|
|
62
|
+
});
|
|
63
|
+
var SelectButtonWrapper = styled(Listbox.Button)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n display: flex;\n align-items: center;\n gap: 8px;\n appearance: none;\n border: none;\n background: ", ";\n padding: 0 var(--grn-fieldXPadding);\n min-height: var(--grn-textBoxHeight-m);\n border-radius: ", ";\n font: inherit;\n color: inherit;\n cursor: pointer;\n width: 100%;\n text-align: left;\n"])), getColor('fade1'), getRadius('s'));
|
|
50
64
|
|
|
51
|
-
var SelectButton = function SelectButton(
|
|
52
|
-
var children =
|
|
53
|
-
props = _objectWithoutProperties(
|
|
65
|
+
var SelectButton = function SelectButton(_ref4) {
|
|
66
|
+
var children = _ref4.children,
|
|
67
|
+
props = _objectWithoutProperties(_ref4, _excluded2);
|
|
54
68
|
|
|
55
69
|
return /*#__PURE__*/React.createElement(SelectButtonWrapper, props, /*#__PURE__*/React.createElement(Text, {
|
|
56
70
|
hasEllipsis: true,
|
|
57
71
|
weight: "medium"
|
|
58
|
-
}, children), /*#__PURE__*/React.createElement(
|
|
72
|
+
}, children), /*#__PURE__*/React.createElement(Box, {
|
|
73
|
+
marginLeft: "auto"
|
|
74
|
+
}, /*#__PURE__*/React.createElement(Icon, {
|
|
59
75
|
icon: /*#__PURE__*/React.createElement(IconChevronDown, null)
|
|
60
|
-
}));
|
|
76
|
+
})));
|
|
61
77
|
};
|
|
62
78
|
|
|
63
79
|
var MenuItemWrapper = styled.li(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n display: grid;\n grid-auto-flow: column;\n gap: 8px;\n align-items: center;\n list-style: none;\n padding: 0 1rem;\n min-height: var(--grn-textBoxHeight-m);\n cursor: pointer;\n border-radius: ", ";\n"])), getRadius('s'));
|
|
64
|
-
var MenuItem = /*#__PURE__*/React.forwardRef(function (
|
|
65
|
-
var children =
|
|
66
|
-
isSelected =
|
|
67
|
-
isActive =
|
|
68
|
-
props = _objectWithoutProperties(
|
|
80
|
+
var MenuItem = /*#__PURE__*/React.forwardRef(function (_ref5, ref) {
|
|
81
|
+
var children = _ref5.children,
|
|
82
|
+
isSelected = _ref5.isSelected,
|
|
83
|
+
isActive = _ref5.isActive,
|
|
84
|
+
props = _objectWithoutProperties(_ref5, _excluded3);
|
|
69
85
|
|
|
70
86
|
return /*#__PURE__*/React.createElement(MenuItemWrapper, Object.assign({
|
|
71
87
|
ref: ref,
|
|
@@ -82,20 +98,23 @@ var MenuItem = /*#__PURE__*/React.forwardRef(function (_ref2, ref) {
|
|
|
82
98
|
})));
|
|
83
99
|
});
|
|
84
100
|
|
|
85
|
-
var
|
|
86
|
-
var props = Object.assign({},
|
|
101
|
+
var SelectRoot = function SelectRoot(_ref6) {
|
|
102
|
+
var props = Object.assign({}, _ref6);
|
|
87
103
|
return /*#__PURE__*/React.createElement(Box, Object.assign({}, props, {
|
|
88
|
-
width: "fit-content",
|
|
89
104
|
position: "relative"
|
|
90
105
|
}));
|
|
91
106
|
};
|
|
92
107
|
|
|
93
|
-
export var Select = function Select(
|
|
94
|
-
var options =
|
|
95
|
-
defaultOption =
|
|
96
|
-
onChange =
|
|
108
|
+
export var Select = function Select(_ref7) {
|
|
109
|
+
var options = _ref7.options,
|
|
110
|
+
defaultOption = _ref7.defaultOption,
|
|
111
|
+
onChange = _ref7.onChange,
|
|
112
|
+
_ref7$menuAlign = _ref7.menuAlign,
|
|
113
|
+
menuAlign = _ref7$menuAlign === void 0 ? 'left' : _ref7$menuAlign,
|
|
114
|
+
_ref7$menuWidth = _ref7.menuWidth,
|
|
115
|
+
menuWidth = _ref7$menuWidth === void 0 ? '240px' : _ref7$menuWidth;
|
|
97
116
|
|
|
98
|
-
var _useState = useState(defaultOption ||
|
|
117
|
+
var _useState = useState(defaultOption || {}),
|
|
99
118
|
_useState2 = _slicedToArray(_useState, 2),
|
|
100
119
|
selectedOption = _useState2[0],
|
|
101
120
|
setSelectedOption = _useState2[1];
|
|
@@ -106,17 +125,20 @@ export var Select = function Select(_ref4) {
|
|
|
106
125
|
};
|
|
107
126
|
|
|
108
127
|
return /*#__PURE__*/React.createElement(Listbox, {
|
|
109
|
-
as:
|
|
128
|
+
as: SelectRoot,
|
|
110
129
|
value: selectedOption,
|
|
111
130
|
onChange: handleChange
|
|
112
|
-
}, /*#__PURE__*/React.createElement(SelectButton, null, selectedOption.content), /*#__PURE__*/React.createElement(Options,
|
|
131
|
+
}, /*#__PURE__*/React.createElement(SelectButton, null, selectedOption.content), /*#__PURE__*/React.createElement(Options, {
|
|
132
|
+
menuAlign: menuAlign,
|
|
133
|
+
menuWidth: menuWidth
|
|
134
|
+
}, options.map(function (option) {
|
|
113
135
|
return /*#__PURE__*/React.createElement(Listbox.Option, {
|
|
114
|
-
key:
|
|
136
|
+
key: option.id,
|
|
115
137
|
value: option,
|
|
116
138
|
as: React.Fragment
|
|
117
|
-
}, function (
|
|
118
|
-
var active =
|
|
119
|
-
selected =
|
|
139
|
+
}, function (_ref8) {
|
|
140
|
+
var active = _ref8.active,
|
|
141
|
+
selected = _ref8.selected;
|
|
120
142
|
return /*#__PURE__*/React.createElement(MenuItem, {
|
|
121
143
|
isSelected: selected,
|
|
122
144
|
isActive: active
|
|
@@ -127,5 +149,7 @@ export var Select = function Select(_ref4) {
|
|
|
127
149
|
Select.propTypes = {
|
|
128
150
|
options: PropTypes.array,
|
|
129
151
|
defaultOption: PropTypes.object,
|
|
130
|
-
onChange: PropTypes.func
|
|
152
|
+
onChange: PropTypes.func,
|
|
153
|
+
menuAlign: PropTypes.oneOf(['left', 'right']),
|
|
154
|
+
menuWidth: types.dimension
|
|
131
155
|
};
|