@spark-web/select 1.0.7 → 1.0.8

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.
Files changed (5) hide show
  1. package/dist/declarations/src/Select.d.ts +16 -5
  2. package/dist/spark-web-select.cjs.dev.js +38 -43
  3. package/dist/spark-web-select.cjs.prod.js +38 -43
  4. package/dist/spark-web-select.esm.js +39 -44
  5. package/package.json +9 -10
package/dist/declarations/src/Select.d.ts CHANGED
@@ -1,23 +1,34 @@
1
1
  import type { DataAttributeMap } from '@spark-web/utils/internal';
2
2
  import type { SelectHTMLAttributes } from 'react';
3
- declare type Option = {
3
+ export declare type Option = {
4
+ /** Whether or not the option is disabled. */
4
5
  disabled?: boolean;
6
+ /** Label for the option. */
5
7
  label: string;
8
+ /** Value of the option. */
6
9
  value: string | number;
7
10
  };
8
- declare type Group = {
11
+ export declare type Group = {
12
+ /** List of options for the group. */
9
13
  options: Array<Option>;
14
+ /** Label for the group. */
10
15
  label: string;
11
16
  };
12
17
  export declare type OptionsOrGroups = Array<Option | Group>;
13
- export declare type SelectProps = Pick<SelectHTMLAttributes<HTMLSelectElement>, 'defaultValue' | 'name' | 'onBlur' | 'onChange' | 'required' | 'value'> & {
18
+ export declare type NativeSelectProps = Pick<SelectHTMLAttributes<HTMLSelectElement>, 'defaultValue' | 'name' | 'onBlur' | 'onChange' | 'required' | 'value'>;
19
+ export declare type SelectProps = NativeSelectProps & {
20
+ /** Allows setting of data attributes on the underlying element. */
14
21
  data?: DataAttributeMap;
22
+ /** The values that can be selected by the input. */
15
23
  options: OptionsOrGroups;
24
+ /** Placeholder text for when the input does not have an initial value. */
16
25
  placeholder?: string;
17
26
  };
18
- export declare const Select: import("react").ForwardRefExoticComponent<Pick<SelectHTMLAttributes<HTMLSelectElement>, "value" | "defaultValue" | "onBlur" | "onChange" | "name" | "required"> & {
27
+ export declare const Select: import("react").ForwardRefExoticComponent<NativeSelectProps & {
28
+ /** Allows setting of data attributes on the underlying element. */
19
29
  data?: DataAttributeMap | undefined;
30
+ /** The values that can be selected by the input. */
20
31
  options: OptionsOrGroups;
32
+ /** Placeholder text for when the input does not have an initial value. */
21
33
  placeholder?: string | undefined;
22
34
  } & import("react").RefAttributes<HTMLSelectElement>>;
23
- export {};
package/dist/spark-web-select.cjs.dev.js CHANGED
@@ -31,10 +31,14 @@ var Select = /*#__PURE__*/react.forwardRef(function (_ref, forwardedRef) {
31
31
  invalid = _useFieldContext2$.invalid,
32
32
  a11yProps = _useFieldContext2[1];
33
33
 
34
- var styles = useSelectStyles({
34
+ var _useSelectStyles = useSelectStyles({
35
35
  disabled: disabled,
36
36
  invalid: invalid
37
- });
37
+ }),
38
+ _useSelectStyles2 = _slicedToArray(_useSelectStyles, 2),
39
+ boxProps = _useSelectStyles2[0],
40
+ inputStyles = _useSelectStyles2[1];
41
+
38
42
  var mapOptions = react.useCallback(function (opt) {
39
43
  return /*#__PURE__*/jsxRuntime.jsx("option", {
40
44
  value: opt.value,
@@ -43,23 +47,9 @@ var Select = /*#__PURE__*/react.forwardRef(function (_ref, forwardedRef) {
43
47
  }, opt.value);
44
48
  }, []);
45
49
  return /*#__PURE__*/jsxRuntime.jsxs(textInput.InputContainer, {
46
- children: [/*#__PURE__*/jsxRuntime.jsx(box.Box, {
47
- position: "absolute",
48
- top: 0,
49
- bottom: 0,
50
- right: 0,
51
- display: "flex",
52
- alignItems: "center",
53
- padding: "medium",
54
- className: css.css({
55
- pointerEvents: 'none'
56
- }),
57
- children: /*#__PURE__*/jsxRuntime.jsx(icon.ChevronDownIcon, {
58
- size: "xxsmall",
59
- tone: "placeholder"
60
- })
61
- }), /*#__PURE__*/jsxRuntime.jsxs(box.Box, _objectSpread(_objectSpread({}, a11yProps), {}, {
50
+ children: [/*#__PURE__*/jsxRuntime.jsx(Indicator, {}), /*#__PURE__*/jsxRuntime.jsxs(box.Box, _objectSpread(_objectSpread(_objectSpread({}, boxProps), a11yProps), {}, {
62
51
  as: "select",
52
+ className: css.css(inputStyles),
63
53
  data: data,
64
54
  defaultValue: (defaultValue !== null && defaultValue !== void 0 ? defaultValue : placeholder) ? '' : undefined,
65
55
  disabled: disabled,
@@ -68,15 +58,8 @@ var Select = /*#__PURE__*/react.forwardRef(function (_ref, forwardedRef) {
68
58
  onChange: onChange,
69
59
  ref: forwardedRef,
70
60
  required: required,
71
- value: value // Styles
72
- ,
73
- background: disabled ? 'inputDisabled' : 'input',
74
- border: invalid ? 'critical' : 'field',
75
- borderRadius: "small",
76
- paddingX: "medium",
77
- height: "medium",
61
+ value: value,
78
62
  width: "full",
79
- className: css.css(styles),
80
63
  children: [placeholder && /*#__PURE__*/jsxRuntime.jsx("option", {
81
64
  value: "",
82
65
  disabled: true,
@@ -98,26 +81,38 @@ var Select = /*#__PURE__*/react.forwardRef(function (_ref, forwardedRef) {
98
81
  });
99
82
  Select.displayName = 'Select';
100
83
 
101
- function useSelectStyles(_ref2) {
102
- var disabled = _ref2.disabled,
103
- invalid = _ref2.invalid;
104
- var theme$1 = theme.useTheme();
105
- var inputStyles = textInput.useInput({
106
- disabled: disabled,
107
- invalid: invalid
84
+ var Indicator = function Indicator() {
85
+ return /*#__PURE__*/jsxRuntime.jsx(box.Box, {
86
+ position: "absolute",
87
+ top: 0,
88
+ bottom: 0,
89
+ right: 0,
90
+ display: "flex",
91
+ alignItems: "center",
92
+ padding: "medium",
93
+ className: css.css({
94
+ pointerEvents: 'none'
95
+ }),
96
+ children: /*#__PURE__*/jsxRuntime.jsx(icon.ChevronDownIcon, {
97
+ size: "xxsmall",
98
+ tone: "placeholder"
99
+ })
108
100
  });
109
- return _objectSpread(_objectSpread({}, inputStyles), {}, {
110
- overflow: 'hidden',
111
- // fix for Safari to prevent unwanted scrolling of parent container to occur
112
- textOverflow: 'ellipsis',
101
+ };
102
+
103
+ function useSelectStyles(props) {
104
+ var _useInputStyles = textInput.useInputStyles(props),
105
+ _useInputStyles2 = _slicedToArray(_useInputStyles, 2),
106
+ boxProps = _useInputStyles2[0],
107
+ inputStyles = _useInputStyles2[1];
108
+
109
+ var theme$1 = theme.useTheme();
110
+ return [boxProps, _objectSpread(_objectSpread({}, inputStyles), {}, {
113
111
  // Prevent text going underneath the chevron icon
114
112
  paddingRight: theme$1.sizing.xxsmall + // size of chevron icon
115
- theme$1.spacing.medium * 2,
116
- // paddingX value
117
- ':invalid': {
118
- color: theme$1.color.foreground.muted
119
- }
120
- });
113
+ theme$1.spacing.medium * 2 // paddingX value
114
+
115
+ })];
121
116
  }
122
117
 
123
118
  exports.Select = Select;
package/dist/spark-web-select.cjs.prod.js CHANGED
@@ -31,10 +31,14 @@ var Select = /*#__PURE__*/react.forwardRef(function (_ref, forwardedRef) {
31
31
  invalid = _useFieldContext2$.invalid,
32
32
  a11yProps = _useFieldContext2[1];
33
33
 
34
- var styles = useSelectStyles({
34
+ var _useSelectStyles = useSelectStyles({
35
35
  disabled: disabled,
36
36
  invalid: invalid
37
- });
37
+ }),
38
+ _useSelectStyles2 = _slicedToArray(_useSelectStyles, 2),
39
+ boxProps = _useSelectStyles2[0],
40
+ inputStyles = _useSelectStyles2[1];
41
+
38
42
  var mapOptions = react.useCallback(function (opt) {
39
43
  return /*#__PURE__*/jsxRuntime.jsx("option", {
40
44
  value: opt.value,
@@ -43,23 +47,9 @@ var Select = /*#__PURE__*/react.forwardRef(function (_ref, forwardedRef) {
43
47
  }, opt.value);
44
48
  }, []);
45
49
  return /*#__PURE__*/jsxRuntime.jsxs(textInput.InputContainer, {
46
- children: [/*#__PURE__*/jsxRuntime.jsx(box.Box, {
47
- position: "absolute",
48
- top: 0,
49
- bottom: 0,
50
- right: 0,
51
- display: "flex",
52
- alignItems: "center",
53
- padding: "medium",
54
- className: css.css({
55
- pointerEvents: 'none'
56
- }),
57
- children: /*#__PURE__*/jsxRuntime.jsx(icon.ChevronDownIcon, {
58
- size: "xxsmall",
59
- tone: "placeholder"
60
- })
61
- }), /*#__PURE__*/jsxRuntime.jsxs(box.Box, _objectSpread(_objectSpread({}, a11yProps), {}, {
50
+ children: [/*#__PURE__*/jsxRuntime.jsx(Indicator, {}), /*#__PURE__*/jsxRuntime.jsxs(box.Box, _objectSpread(_objectSpread(_objectSpread({}, boxProps), a11yProps), {}, {
62
51
  as: "select",
52
+ className: css.css(inputStyles),
63
53
  data: data,
64
54
  defaultValue: (defaultValue !== null && defaultValue !== void 0 ? defaultValue : placeholder) ? '' : undefined,
65
55
  disabled: disabled,
@@ -68,15 +58,8 @@ var Select = /*#__PURE__*/react.forwardRef(function (_ref, forwardedRef) {
68
58
  onChange: onChange,
69
59
  ref: forwardedRef,
70
60
  required: required,
71
- value: value // Styles
72
- ,
73
- background: disabled ? 'inputDisabled' : 'input',
74
- border: invalid ? 'critical' : 'field',
75
- borderRadius: "small",
76
- paddingX: "medium",
77
- height: "medium",
61
+ value: value,
78
62
  width: "full",
79
- className: css.css(styles),
80
63
  children: [placeholder && /*#__PURE__*/jsxRuntime.jsx("option", {
81
64
  value: "",
82
65
  disabled: true,
@@ -98,26 +81,38 @@ var Select = /*#__PURE__*/react.forwardRef(function (_ref, forwardedRef) {
98
81
  });
99
82
  Select.displayName = 'Select';
100
83
 
101
- function useSelectStyles(_ref2) {
102
- var disabled = _ref2.disabled,
103
- invalid = _ref2.invalid;
104
- var theme$1 = theme.useTheme();
105
- var inputStyles = textInput.useInput({
106
- disabled: disabled,
107
- invalid: invalid
84
+ var Indicator = function Indicator() {
85
+ return /*#__PURE__*/jsxRuntime.jsx(box.Box, {
86
+ position: "absolute",
87
+ top: 0,
88
+ bottom: 0,
89
+ right: 0,
90
+ display: "flex",
91
+ alignItems: "center",
92
+ padding: "medium",
93
+ className: css.css({
94
+ pointerEvents: 'none'
95
+ }),
96
+ children: /*#__PURE__*/jsxRuntime.jsx(icon.ChevronDownIcon, {
97
+ size: "xxsmall",
98
+ tone: "placeholder"
99
+ })
108
100
  });
109
- return _objectSpread(_objectSpread({}, inputStyles), {}, {
110
- overflow: 'hidden',
111
- // fix for Safari to prevent unwanted scrolling of parent container to occur
112
- textOverflow: 'ellipsis',
101
+ };
102
+
103
+ function useSelectStyles(props) {
104
+ var _useInputStyles = textInput.useInputStyles(props),
105
+ _useInputStyles2 = _slicedToArray(_useInputStyles, 2),
106
+ boxProps = _useInputStyles2[0],
107
+ inputStyles = _useInputStyles2[1];
108
+
109
+ var theme$1 = theme.useTheme();
110
+ return [boxProps, _objectSpread(_objectSpread({}, inputStyles), {}, {
113
111
  // Prevent text going underneath the chevron icon
114
112
  paddingRight: theme$1.sizing.xxsmall + // size of chevron icon
115
- theme$1.spacing.medium * 2,
116
- // paddingX value
117
- ':invalid': {
118
- color: theme$1.color.foreground.muted
119
- }
120
- });
113
+ theme$1.spacing.medium * 2 // paddingX value
114
+
115
+ })];
121
116
  }
122
117
 
123
118
  exports.Select = Select;
package/dist/spark-web-select.esm.js CHANGED
@@ -4,7 +4,7 @@ import { css } from '@emotion/css';
4
4
  import { Box } from '@spark-web/box';
5
5
  import { useFieldContext } from '@spark-web/field';
6
6
  import { ChevronDownIcon } from '@spark-web/icon';
7
- import { InputContainer, useInput } from '@spark-web/text-input';
7
+ import { InputContainer, useInputStyles } from '@spark-web/text-input';
8
8
  import { useTheme } from '@spark-web/theme';
9
9
  import { forwardRef, useCallback } from 'react';
10
10
  import { jsx, jsxs } from 'react/jsx-runtime';
@@ -27,10 +27,14 @@ var Select = /*#__PURE__*/forwardRef(function (_ref, forwardedRef) {
27
27
  invalid = _useFieldContext2$.invalid,
28
28
  a11yProps = _useFieldContext2[1];
29
29
 
30
- var styles = useSelectStyles({
30
+ var _useSelectStyles = useSelectStyles({
31
31
  disabled: disabled,
32
32
  invalid: invalid
33
- });
33
+ }),
34
+ _useSelectStyles2 = _slicedToArray(_useSelectStyles, 2),
35
+ boxProps = _useSelectStyles2[0],
36
+ inputStyles = _useSelectStyles2[1];
37
+
34
38
  var mapOptions = useCallback(function (opt) {
35
39
  return /*#__PURE__*/jsx("option", {
36
40
  value: opt.value,
@@ -39,23 +43,9 @@ var Select = /*#__PURE__*/forwardRef(function (_ref, forwardedRef) {
39
43
  }, opt.value);
40
44
  }, []);
41
45
  return /*#__PURE__*/jsxs(InputContainer, {
42
- children: [/*#__PURE__*/jsx(Box, {
43
- position: "absolute",
44
- top: 0,
45
- bottom: 0,
46
- right: 0,
47
- display: "flex",
48
- alignItems: "center",
49
- padding: "medium",
50
- className: css({
51
- pointerEvents: 'none'
52
- }),
53
- children: /*#__PURE__*/jsx(ChevronDownIcon, {
54
- size: "xxsmall",
55
- tone: "placeholder"
56
- })
57
- }), /*#__PURE__*/jsxs(Box, _objectSpread(_objectSpread({}, a11yProps), {}, {
46
+ children: [/*#__PURE__*/jsx(Indicator, {}), /*#__PURE__*/jsxs(Box, _objectSpread(_objectSpread(_objectSpread({}, boxProps), a11yProps), {}, {
58
47
  as: "select",
48
+ className: css(inputStyles),
59
49
  data: data,
60
50
  defaultValue: (defaultValue !== null && defaultValue !== void 0 ? defaultValue : placeholder) ? '' : undefined,
61
51
  disabled: disabled,
@@ -64,15 +54,8 @@ var Select = /*#__PURE__*/forwardRef(function (_ref, forwardedRef) {
64
54
  onChange: onChange,
65
55
  ref: forwardedRef,
66
56
  required: required,
67
- value: value // Styles
68
- ,
69
- background: disabled ? 'inputDisabled' : 'input',
70
- border: invalid ? 'critical' : 'field',
71
- borderRadius: "small",
72
- paddingX: "medium",
73
- height: "medium",
57
+ value: value,
74
58
  width: "full",
75
- className: css(styles),
76
59
  children: [placeholder && /*#__PURE__*/jsx("option", {
77
60
  value: "",
78
61
  disabled: true,
@@ -94,26 +77,38 @@ var Select = /*#__PURE__*/forwardRef(function (_ref, forwardedRef) {
94
77
  });
95
78
  Select.displayName = 'Select';
96
79
 
97
- function useSelectStyles(_ref2) {
98
- var disabled = _ref2.disabled,
99
- invalid = _ref2.invalid;
100
- var theme = useTheme();
101
- var inputStyles = useInput({
102
- disabled: disabled,
103
- invalid: invalid
80
+ var Indicator = function Indicator() {
81
+ return /*#__PURE__*/jsx(Box, {
82
+ position: "absolute",
83
+ top: 0,
84
+ bottom: 0,
85
+ right: 0,
86
+ display: "flex",
87
+ alignItems: "center",
88
+ padding: "medium",
89
+ className: css({
90
+ pointerEvents: 'none'
91
+ }),
92
+ children: /*#__PURE__*/jsx(ChevronDownIcon, {
93
+ size: "xxsmall",
94
+ tone: "placeholder"
95
+ })
104
96
  });
105
- return _objectSpread(_objectSpread({}, inputStyles), {}, {
106
- overflow: 'hidden',
107
- // fix for Safari to prevent unwanted scrolling of parent container to occur
108
- textOverflow: 'ellipsis',
97
+ };
98
+
99
+ function useSelectStyles(props) {
100
+ var _useInputStyles = useInputStyles(props),
101
+ _useInputStyles2 = _slicedToArray(_useInputStyles, 2),
102
+ boxProps = _useInputStyles2[0],
103
+ inputStyles = _useInputStyles2[1];
104
+
105
+ var theme = useTheme();
106
+ return [boxProps, _objectSpread(_objectSpread({}, inputStyles), {}, {
109
107
  // Prevent text going underneath the chevron icon
110
108
  paddingRight: theme.sizing.xxsmall + // size of chevron icon
111
- theme.spacing.medium * 2,
112
- // paddingX value
113
- ':invalid': {
114
- color: theme.color.foreground.muted
115
- }
116
- });
109
+ theme.spacing.medium * 2 // paddingX value
110
+
111
+ })];
117
112
  }
118
113
 
119
114
  export { Select };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@spark-web/select",
3
- "version": "1.0.7",
3
+ "version": "1.0.8",
4
4
  "license": "MIT",
5
5
  "main": "dist/spark-web-select.cjs.js",
6
6
  "module": "dist/spark-web-select.esm.js",
@@ -8,22 +8,21 @@
8
8
  "dist"
9
9
  ],
10
10
  "dependencies": {
11
- "@babel/runtime": "^7.18.0",
11
+ "@babel/runtime": "^7.18.3",
12
12
  "@emotion/css": "^11.9.0",
13
- "@spark-web/a11y": "^1.0.5",
14
- "@spark-web/box": "^1.0.5",
15
- "@spark-web/field": "^3.0.0",
16
- "@spark-web/icon": "^1.1.3",
17
- "@spark-web/text": "^1.0.5",
18
- "@spark-web/text-input": "^1.2.1",
19
- "@spark-web/theme": "^3.0.1",
20
- "@spark-web/utils": "^1.1.3"
13
+ "@spark-web/box": "^1.0.6",
14
+ "@spark-web/icon": "^1.1.4",
15
+ "@spark-web/text-input": "^2.0.0",
16
+ "@spark-web/theme": "^3.0.2"
21
17
  },
22
18
  "devDependencies": {
19
+ "@spark-web/field": "^3.0.1",
20
+ "@spark-web/utils": "^1.1.5",
23
21
  "@types/react": "^17.0.12",
24
22
  "react": "^17.0.2"
25
23
  },
26
24
  "peerDependencies": {
25
+ "@spark-web/field": "^3.0.1",
27
26
  "react": ">=17.0.2"
28
27
  },
29
28
  "engines": {