@spark-web/select 1.0.0 → 1.0.1

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/CHANGELOG.md CHANGED
@@ -1,5 +1,26 @@
1
1
  # @spark-web/select
2
2
 
3
+ ## 1.0.1
4
+
5
+ ### Patch Changes
6
+
7
+ - [#36](https://github.com/brighte-labs/spark-web/pull/36)
8
+ [`8546f8f`](https://github.com/brighte-labs/spark-web/commit/8546f8f05daaa79ea3ff954c6c4928a7a2d0622d)
9
+ Thanks [@lukebennett88](https://github.com/lukebennett88)! - Update Babel
10
+ config
11
+
12
+ - Updated dependencies
13
+ [[`aebff30`](https://github.com/brighte-labs/spark-web/commit/aebff30c86cb0a9db22b545c46159ce0d1c14afb),
14
+ [`8546f8f`](https://github.com/brighte-labs/spark-web/commit/8546f8f05daaa79ea3ff954c6c4928a7a2d0622d)]:
15
+ - @spark-web/theme@2.0.0
16
+ - @spark-web/a11y@1.0.1
17
+ - @spark-web/box@1.0.1
18
+ - @spark-web/field@1.0.1
19
+ - @spark-web/icon@1.0.1
20
+ - @spark-web/text@1.0.1
21
+ - @spark-web/text-input@1.0.1
22
+ - @spark-web/utils@1.0.1
23
+
3
24
  ## 1.0.0
4
25
 
5
26
  ### Major Changes
@@ -15,7 +15,7 @@ export declare type SelectProps = Pick<React.SelectHTMLAttributes<HTMLSelectElem
15
15
  options: OptionsOrGroups;
16
16
  placeholder?: string;
17
17
  };
18
- export declare const Select: React.ForwardRefExoticComponent<Pick<React.SelectHTMLAttributes<HTMLSelectElement>, "value" | "defaultValue" | "onBlur" | "onChange" | "name" | "required"> & {
18
+ export declare const Select: React.ForwardRefExoticComponent<Pick<React.SelectHTMLAttributes<HTMLSelectElement>, "name" | "value" | "defaultValue" | "onBlur" | "onChange" | "required"> & {
19
19
  data?: DataAttributeMap | undefined;
20
20
  options: OptionsOrGroups;
21
21
  placeholder?: string | undefined;
@@ -2,9 +2,8 @@
2
2
 
3
3
  Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
5
- var _defineProperty = require('@babel/runtime/helpers/esm/defineProperty');
6
- var _extends = require('@babel/runtime/helpers/esm/extends');
7
- var _objectWithoutProperties = require('@babel/runtime/helpers/esm/objectWithoutProperties');
5
+ var _objectSpread = require('@babel/runtime/helpers/objectSpread2');
6
+ var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
8
7
  var css = require('@emotion/css');
9
8
  var box = require('@spark-web/box');
10
9
  var field = require('@spark-web/field');
@@ -13,6 +12,7 @@ var textInput = require('@spark-web/text-input');
13
12
  var theme = require('@spark-web/theme');
14
13
  var internal = require('@spark-web/utils/internal');
15
14
  var React = require('react');
15
+ var jsxRuntime = require('react/jsx-runtime');
16
16
 
17
17
  function _interopNamespace(e) {
18
18
  if (e && e.__esModule) return e;
@@ -35,11 +35,6 @@ function _interopNamespace(e) {
35
35
  var React__namespace = /*#__PURE__*/_interopNamespace(React);
36
36
 
37
37
  var _excluded = ["disabled", "invalid"];
38
- var __jsx = React__namespace.createElement;
39
-
40
- function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
41
-
42
- function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
43
38
  var Select = /*#__PURE__*/React__namespace.forwardRef(function (_ref, forwardedRef) {
44
39
  var data = _ref.data,
45
40
  defaultValue = _ref.defaultValue,
@@ -61,61 +56,65 @@ var Select = /*#__PURE__*/React__namespace.forwardRef(function (_ref, forwardedR
61
56
  invalid: invalid
62
57
  });
63
58
  var mapOptions = React__namespace.useCallback(function (opt) {
64
- return __jsx("option", {
65
- key: opt.value,
59
+ return /*#__PURE__*/jsxRuntime.jsx("option", {
66
60
  value: opt.value,
67
- disabled: opt.disabled
68
- }, opt.label);
61
+ disabled: opt.disabled,
62
+ children: opt.label
63
+ }, opt.value);
69
64
  }, []);
70
- return __jsx(box.Box, {
71
- position: "relative"
72
- }, __jsx(box.Box, _extends({}, a11yProps, data ? internal.buildDataAttributes(data) : null, {
73
- as: "select",
74
- defaultValue: (defaultValue !== null && defaultValue !== void 0 ? defaultValue : placeholder) ? '' : undefined,
75
- disabled: disabled,
76
- name: name,
77
- onBlur: onBlur,
78
- onChange: onChange,
79
- ref: forwardedRef,
80
- required: required,
81
- value: value // Styles
82
- ,
83
- background: disabled ? 'inputDisabled' : 'input',
84
- border: invalid ? 'critical' : 'field',
85
- borderRadius: "small",
86
- paddingX: "medium",
87
- height: "medium",
88
- width: "full",
89
- className: css.css(styles)
90
- }), placeholder && __jsx("option", {
91
- value: "",
92
- disabled: true
93
- }, placeholder), optionsOrGroups.map(function (optionOrGroup) {
94
- if ('options' in optionOrGroup) {
95
- return __jsx("optgroup", {
96
- key: optionOrGroup.label,
97
- label: optionOrGroup.label
98
- }, optionOrGroup.options.map(function (option) {
99
- return mapOptions(option);
100
- }));
101
- }
65
+ return /*#__PURE__*/jsxRuntime.jsxs(box.Box, {
66
+ position: "relative",
67
+ children: [/*#__PURE__*/jsxRuntime.jsxs(box.Box, _objectSpread(_objectSpread(_objectSpread({}, a11yProps), data ? internal.buildDataAttributes(data) : null), {}, {
68
+ as: "select",
69
+ defaultValue: (defaultValue !== null && defaultValue !== void 0 ? defaultValue : placeholder) ? '' : undefined,
70
+ disabled: disabled,
71
+ name: name,
72
+ onBlur: onBlur,
73
+ onChange: onChange,
74
+ ref: forwardedRef,
75
+ required: required,
76
+ value: value // Styles
77
+ ,
78
+ background: disabled ? 'inputDisabled' : 'input',
79
+ border: invalid ? 'critical' : 'field',
80
+ borderRadius: "small",
81
+ paddingX: "medium",
82
+ height: "medium",
83
+ width: "full",
84
+ className: css.css(styles),
85
+ children: [placeholder && /*#__PURE__*/jsxRuntime.jsx("option", {
86
+ value: "",
87
+ disabled: true,
88
+ children: placeholder
89
+ }), optionsOrGroups.map(function (optionOrGroup) {
90
+ if ('options' in optionOrGroup) {
91
+ return /*#__PURE__*/jsxRuntime.jsx("optgroup", {
92
+ label: optionOrGroup.label,
93
+ children: optionOrGroup.options.map(function (option) {
94
+ return mapOptions(option);
95
+ })
96
+ }, optionOrGroup.label);
97
+ }
102
98
 
103
- return mapOptions(optionOrGroup);
104
- })), __jsx(box.Box, {
105
- position: "absolute",
106
- top: 0,
107
- bottom: 0,
108
- right: 0,
109
- display: "flex",
110
- alignItems: "center",
111
- padding: "medium",
112
- className: css.css({
113
- pointerEvents: 'none'
114
- })
115
- }, __jsx(icon.ChevronDownIcon, {
116
- size: "xxsmall",
117
- tone: "placeholder"
118
- })));
99
+ return mapOptions(optionOrGroup);
100
+ })]
101
+ })), /*#__PURE__*/jsxRuntime.jsx(box.Box, {
102
+ position: "absolute",
103
+ top: 0,
104
+ bottom: 0,
105
+ right: 0,
106
+ display: "flex",
107
+ alignItems: "center",
108
+ padding: "medium",
109
+ className: css.css({
110
+ pointerEvents: 'none'
111
+ }),
112
+ children: /*#__PURE__*/jsxRuntime.jsx(icon.ChevronDownIcon, {
113
+ size: "xxsmall",
114
+ tone: "placeholder"
115
+ })
116
+ })]
117
+ });
119
118
  });
120
119
  Select.displayName = 'Select';
121
120
 
@@ -2,9 +2,8 @@
2
2
 
3
3
  Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
5
- var _defineProperty = require('@babel/runtime/helpers/esm/defineProperty');
6
- var _extends = require('@babel/runtime/helpers/esm/extends');
7
- var _objectWithoutProperties = require('@babel/runtime/helpers/esm/objectWithoutProperties');
5
+ var _objectSpread = require('@babel/runtime/helpers/objectSpread2');
6
+ var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
8
7
  var css = require('@emotion/css');
9
8
  var box = require('@spark-web/box');
10
9
  var field = require('@spark-web/field');
@@ -13,6 +12,7 @@ var textInput = require('@spark-web/text-input');
13
12
  var theme = require('@spark-web/theme');
14
13
  var internal = require('@spark-web/utils/internal');
15
14
  var React = require('react');
15
+ var jsxRuntime = require('react/jsx-runtime');
16
16
 
17
17
  function _interopNamespace(e) {
18
18
  if (e && e.__esModule) return e;
@@ -35,11 +35,6 @@ function _interopNamespace(e) {
35
35
  var React__namespace = /*#__PURE__*/_interopNamespace(React);
36
36
 
37
37
  var _excluded = ["disabled", "invalid"];
38
- var __jsx = React__namespace.createElement;
39
-
40
- function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
41
-
42
- function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
43
38
  var Select = /*#__PURE__*/React__namespace.forwardRef(function (_ref, forwardedRef) {
44
39
  var data = _ref.data,
45
40
  defaultValue = _ref.defaultValue,
@@ -61,61 +56,65 @@ var Select = /*#__PURE__*/React__namespace.forwardRef(function (_ref, forwardedR
61
56
  invalid: invalid
62
57
  });
63
58
  var mapOptions = React__namespace.useCallback(function (opt) {
64
- return __jsx("option", {
65
- key: opt.value,
59
+ return /*#__PURE__*/jsxRuntime.jsx("option", {
66
60
  value: opt.value,
67
- disabled: opt.disabled
68
- }, opt.label);
61
+ disabled: opt.disabled,
62
+ children: opt.label
63
+ }, opt.value);
69
64
  }, []);
70
- return __jsx(box.Box, {
71
- position: "relative"
72
- }, __jsx(box.Box, _extends({}, a11yProps, data ? internal.buildDataAttributes(data) : null, {
73
- as: "select",
74
- defaultValue: (defaultValue !== null && defaultValue !== void 0 ? defaultValue : placeholder) ? '' : undefined,
75
- disabled: disabled,
76
- name: name,
77
- onBlur: onBlur,
78
- onChange: onChange,
79
- ref: forwardedRef,
80
- required: required,
81
- value: value // Styles
82
- ,
83
- background: disabled ? 'inputDisabled' : 'input',
84
- border: invalid ? 'critical' : 'field',
85
- borderRadius: "small",
86
- paddingX: "medium",
87
- height: "medium",
88
- width: "full",
89
- className: css.css(styles)
90
- }), placeholder && __jsx("option", {
91
- value: "",
92
- disabled: true
93
- }, placeholder), optionsOrGroups.map(function (optionOrGroup) {
94
- if ('options' in optionOrGroup) {
95
- return __jsx("optgroup", {
96
- key: optionOrGroup.label,
97
- label: optionOrGroup.label
98
- }, optionOrGroup.options.map(function (option) {
99
- return mapOptions(option);
100
- }));
101
- }
65
+ return /*#__PURE__*/jsxRuntime.jsxs(box.Box, {
66
+ position: "relative",
67
+ children: [/*#__PURE__*/jsxRuntime.jsxs(box.Box, _objectSpread(_objectSpread(_objectSpread({}, a11yProps), data ? internal.buildDataAttributes(data) : null), {}, {
68
+ as: "select",
69
+ defaultValue: (defaultValue !== null && defaultValue !== void 0 ? defaultValue : placeholder) ? '' : undefined,
70
+ disabled: disabled,
71
+ name: name,
72
+ onBlur: onBlur,
73
+ onChange: onChange,
74
+ ref: forwardedRef,
75
+ required: required,
76
+ value: value // Styles
77
+ ,
78
+ background: disabled ? 'inputDisabled' : 'input',
79
+ border: invalid ? 'critical' : 'field',
80
+ borderRadius: "small",
81
+ paddingX: "medium",
82
+ height: "medium",
83
+ width: "full",
84
+ className: css.css(styles),
85
+ children: [placeholder && /*#__PURE__*/jsxRuntime.jsx("option", {
86
+ value: "",
87
+ disabled: true,
88
+ children: placeholder
89
+ }), optionsOrGroups.map(function (optionOrGroup) {
90
+ if ('options' in optionOrGroup) {
91
+ return /*#__PURE__*/jsxRuntime.jsx("optgroup", {
92
+ label: optionOrGroup.label,
93
+ children: optionOrGroup.options.map(function (option) {
94
+ return mapOptions(option);
95
+ })
96
+ }, optionOrGroup.label);
97
+ }
102
98
 
103
- return mapOptions(optionOrGroup);
104
- })), __jsx(box.Box, {
105
- position: "absolute",
106
- top: 0,
107
- bottom: 0,
108
- right: 0,
109
- display: "flex",
110
- alignItems: "center",
111
- padding: "medium",
112
- className: css.css({
113
- pointerEvents: 'none'
114
- })
115
- }, __jsx(icon.ChevronDownIcon, {
116
- size: "xxsmall",
117
- tone: "placeholder"
118
- })));
99
+ return mapOptions(optionOrGroup);
100
+ })]
101
+ })), /*#__PURE__*/jsxRuntime.jsx(box.Box, {
102
+ position: "absolute",
103
+ top: 0,
104
+ bottom: 0,
105
+ right: 0,
106
+ display: "flex",
107
+ alignItems: "center",
108
+ padding: "medium",
109
+ className: css.css({
110
+ pointerEvents: 'none'
111
+ }),
112
+ children: /*#__PURE__*/jsxRuntime.jsx(icon.ChevronDownIcon, {
113
+ size: "xxsmall",
114
+ tone: "placeholder"
115
+ })
116
+ })]
117
+ });
119
118
  });
120
119
  Select.displayName = 'Select';
121
120
 
@@ -1,5 +1,4 @@
1
- import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
2
- import _extends from '@babel/runtime/helpers/esm/extends';
1
+ import _objectSpread from '@babel/runtime/helpers/esm/objectSpread2';
3
2
  import _objectWithoutProperties from '@babel/runtime/helpers/esm/objectWithoutProperties';
4
3
  import { css } from '@emotion/css';
5
4
  import { Box } from '@spark-web/box';
@@ -9,13 +8,9 @@ import { useInput } from '@spark-web/text-input';
9
8
  import { useTheme } from '@spark-web/theme';
10
9
  import { buildDataAttributes } from '@spark-web/utils/internal';
11
10
  import * as React from 'react';
11
+ import { jsx, jsxs } from 'react/jsx-runtime';
12
12
 
13
13
  var _excluded = ["disabled", "invalid"];
14
- var __jsx = React.createElement;
15
-
16
- function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
17
-
18
- function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
19
14
  var Select = /*#__PURE__*/React.forwardRef(function (_ref, forwardedRef) {
20
15
  var data = _ref.data,
21
16
  defaultValue = _ref.defaultValue,
@@ -37,61 +32,65 @@ var Select = /*#__PURE__*/React.forwardRef(function (_ref, forwardedRef) {
37
32
  invalid: invalid
38
33
  });
39
34
  var mapOptions = React.useCallback(function (opt) {
40
- return __jsx("option", {
41
- key: opt.value,
35
+ return /*#__PURE__*/jsx("option", {
42
36
  value: opt.value,
43
- disabled: opt.disabled
44
- }, opt.label);
37
+ disabled: opt.disabled,
38
+ children: opt.label
39
+ }, opt.value);
45
40
  }, []);
46
- return __jsx(Box, {
47
- position: "relative"
48
- }, __jsx(Box, _extends({}, a11yProps, data ? buildDataAttributes(data) : null, {
49
- as: "select",
50
- defaultValue: (defaultValue !== null && defaultValue !== void 0 ? defaultValue : placeholder) ? '' : undefined,
51
- disabled: disabled,
52
- name: name,
53
- onBlur: onBlur,
54
- onChange: onChange,
55
- ref: forwardedRef,
56
- required: required,
57
- value: value // Styles
58
- ,
59
- background: disabled ? 'inputDisabled' : 'input',
60
- border: invalid ? 'critical' : 'field',
61
- borderRadius: "small",
62
- paddingX: "medium",
63
- height: "medium",
64
- width: "full",
65
- className: css(styles)
66
- }), placeholder && __jsx("option", {
67
- value: "",
68
- disabled: true
69
- }, placeholder), optionsOrGroups.map(function (optionOrGroup) {
70
- if ('options' in optionOrGroup) {
71
- return __jsx("optgroup", {
72
- key: optionOrGroup.label,
73
- label: optionOrGroup.label
74
- }, optionOrGroup.options.map(function (option) {
75
- return mapOptions(option);
76
- }));
77
- }
41
+ return /*#__PURE__*/jsxs(Box, {
42
+ position: "relative",
43
+ children: [/*#__PURE__*/jsxs(Box, _objectSpread(_objectSpread(_objectSpread({}, a11yProps), data ? buildDataAttributes(data) : null), {}, {
44
+ as: "select",
45
+ defaultValue: (defaultValue !== null && defaultValue !== void 0 ? defaultValue : placeholder) ? '' : undefined,
46
+ disabled: disabled,
47
+ name: name,
48
+ onBlur: onBlur,
49
+ onChange: onChange,
50
+ ref: forwardedRef,
51
+ required: required,
52
+ value: value // Styles
53
+ ,
54
+ background: disabled ? 'inputDisabled' : 'input',
55
+ border: invalid ? 'critical' : 'field',
56
+ borderRadius: "small",
57
+ paddingX: "medium",
58
+ height: "medium",
59
+ width: "full",
60
+ className: css(styles),
61
+ children: [placeholder && /*#__PURE__*/jsx("option", {
62
+ value: "",
63
+ disabled: true,
64
+ children: placeholder
65
+ }), optionsOrGroups.map(function (optionOrGroup) {
66
+ if ('options' in optionOrGroup) {
67
+ return /*#__PURE__*/jsx("optgroup", {
68
+ label: optionOrGroup.label,
69
+ children: optionOrGroup.options.map(function (option) {
70
+ return mapOptions(option);
71
+ })
72
+ }, optionOrGroup.label);
73
+ }
78
74
 
79
- return mapOptions(optionOrGroup);
80
- })), __jsx(Box, {
81
- position: "absolute",
82
- top: 0,
83
- bottom: 0,
84
- right: 0,
85
- display: "flex",
86
- alignItems: "center",
87
- padding: "medium",
88
- className: css({
89
- pointerEvents: 'none'
90
- })
91
- }, __jsx(ChevronDownIcon, {
92
- size: "xxsmall",
93
- tone: "placeholder"
94
- })));
75
+ return mapOptions(optionOrGroup);
76
+ })]
77
+ })), /*#__PURE__*/jsx(Box, {
78
+ position: "absolute",
79
+ top: 0,
80
+ bottom: 0,
81
+ right: 0,
82
+ display: "flex",
83
+ alignItems: "center",
84
+ padding: "medium",
85
+ className: css({
86
+ pointerEvents: 'none'
87
+ }),
88
+ children: /*#__PURE__*/jsx(ChevronDownIcon, {
89
+ size: "xxsmall",
90
+ tone: "placeholder"
91
+ })
92
+ })]
93
+ });
95
94
  });
96
95
  Select.displayName = 'Select';
97
96
 
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@spark-web/select",
3
3
  "license": "MIT",
4
- "version": "1.0.0",
4
+ "version": "1.0.1",
5
5
  "main": "dist/spark-web-select.cjs.js",
6
6
  "module": "dist/spark-web-select.esm.js",
7
7
  "devDependencies": {
@@ -10,14 +10,14 @@
10
10
  "dependencies": {
11
11
  "@babel/runtime": "^7.14.6",
12
12
  "@emotion/css": "^11.7.1",
13
- "@spark-web/a11y": "^1.0.0",
14
- "@spark-web/box": "^1.0.0",
15
- "@spark-web/field": "^1.0.0",
16
- "@spark-web/icon": "^1.0.0",
17
- "@spark-web/text": "^1.0.0",
18
- "@spark-web/text-input": "^1.0.0",
19
- "@spark-web/theme": "^1.0.0",
20
- "@spark-web/utils": "^1.0.0",
13
+ "@spark-web/a11y": "^1.0.1",
14
+ "@spark-web/box": "^1.0.1",
15
+ "@spark-web/field": "^1.0.1",
16
+ "@spark-web/icon": "^1.0.1",
17
+ "@spark-web/text": "^1.0.1",
18
+ "@spark-web/text-input": "^1.0.1",
19
+ "@spark-web/theme": "^2.0.0",
20
+ "@spark-web/utils": "^1.0.1",
21
21
  "react": "^17.0.2"
22
22
  },
23
23
  "engines": {