@spark-web/select 6.0.1 → 6.0.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.
Files changed (5) hide show
  1. package/CHANGELOG.md +15 -0
  2. package/dist/spark-web-select.cjs.dev.js +17 -3
  3. package/dist/spark-web-select.cjs.prod.js +17 -3
  4. package/dist/spark-web-select.esm.js +17 -3
  5. package/package.json +4 -4
package/CHANGELOG.md CHANGED
@@ -1,5 +1,20 @@
1
1
  # @spark-web/select
2
2
 
3
+ ## 6.0.2
4
+
5
+ ### Patch Changes
6
+
7
+ - [#789](https://github.com/brighte-labs/spark-web/pull/789)
8
+ [`56d67c3`](https://github.com/brighte-labs/spark-web/commit/56d67c310457b792d663fe4e903111c5f45be90f)
9
+ Thanks [@jacobporci-brighte](https://github.com/jacobporci-brighte)! - Apply
10
+ muted color to placeholder text when no value is selected, matching the
11
+ appearance of text-input placeholders.
12
+ - Updated dependencies
13
+ [[`56d67c3`](https://github.com/brighte-labs/spark-web/commit/56d67c310457b792d663fe4e903111c5f45be90f),
14
+ [`56d67c3`](https://github.com/brighte-labs/spark-web/commit/56d67c310457b792d663fe4e903111c5f45be90f)]:
15
+ - @spark-web/field@5.3.2
16
+ - @spark-web/text-input@6.0.2
17
+
3
18
  ## 6.0.1
4
19
 
5
20
  ### Patch Changes
package/dist/spark-web-select.cjs.dev.js CHANGED
@@ -2,6 +2,7 @@
2
2
 
3
3
  Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
5
+ var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
5
6
  var _objectSpread = require('@babel/runtime/helpers/objectSpread2');
6
7
  var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
7
8
  var react$1 = require('@emotion/react');
@@ -13,6 +14,7 @@ var theme = require('@spark-web/theme');
13
14
  var react = require('react');
14
15
  var jsxRuntime = require('@emotion/react/jsx-runtime');
15
16
 
17
+ var _excluded = ["isPlaceholderActive", "disabled"];
16
18
  var Select = /*#__PURE__*/react.forwardRef(function (_ref, forwardedRef) {
17
19
  var data = _ref.data,
18
20
  defaultValue = _ref.defaultValue,
@@ -29,9 +31,14 @@ var Select = /*#__PURE__*/react.forwardRef(function (_ref, forwardedRef) {
29
31
  disabled = _useFieldContext2$.disabled,
30
32
  invalid = _useFieldContext2$.invalid,
31
33
  a11yProps = _useFieldContext2[1];
34
+ // Only applies when value is controlled and explicitly empty — the component
35
+ // cannot detect when the user selects an option in uncontrolled mode, so we
36
+ // only apply the muted style when value === '' (i.e. the caller controls it).
37
+ var isPlaceholderActive = placeholder !== undefined && value === '';
32
38
  var _useSelectStyles = useSelectStyles({
33
39
  disabled: disabled,
34
- invalid: invalid
40
+ invalid: invalid,
41
+ isPlaceholderActive: isPlaceholderActive
35
42
  }),
36
43
  _useSelectStyles2 = _slicedToArray(_useSelectStyles, 2),
37
44
  boxProps = _useSelectStyles2[0],
@@ -95,7 +102,12 @@ var Indicator = function Indicator() {
95
102
  });
96
103
  };
97
104
  function useSelectStyles(props) {
98
- var _useInputStyles = textInput.useInputStyles(props),
105
+ var isPlaceholderActive = props.isPlaceholderActive,
106
+ disabled = props.disabled,
107
+ inputStylesProps = _objectWithoutProperties(props, _excluded);
108
+ var _useInputStyles = textInput.useInputStyles(_objectSpread({
109
+ disabled: disabled
110
+ }, inputStylesProps)),
99
111
  _useInputStyles2 = _slicedToArray(_useInputStyles, 2),
100
112
  boxProps = _useInputStyles2[0],
101
113
  inputStyles = _useInputStyles2[1];
@@ -104,7 +116,9 @@ function useSelectStyles(props) {
104
116
  // Prevent text going underneath the chevron icon
105
117
  paddingRight: theme$1.sizing.xxsmall +
106
118
  // size of chevron icon
107
- theme$1.spacing.medium * 2 // paddingX value
119
+ theme$1.spacing.medium * 2
120
+ }, isPlaceholderActive && !disabled && {
121
+ color: theme$1.color.foreground.placeholder
108
122
  })];
109
123
  }
110
124
 
package/dist/spark-web-select.cjs.prod.js CHANGED
@@ -2,6 +2,7 @@
2
2
 
3
3
  Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
5
+ var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
5
6
  var _objectSpread = require('@babel/runtime/helpers/objectSpread2');
6
7
  var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
7
8
  var react$1 = require('@emotion/react');
@@ -13,6 +14,7 @@ var theme = require('@spark-web/theme');
13
14
  var react = require('react');
14
15
  var jsxRuntime = require('@emotion/react/jsx-runtime');
15
16
 
17
+ var _excluded = ["isPlaceholderActive", "disabled"];
16
18
  var Select = /*#__PURE__*/react.forwardRef(function (_ref, forwardedRef) {
17
19
  var data = _ref.data,
18
20
  defaultValue = _ref.defaultValue,
@@ -29,9 +31,14 @@ var Select = /*#__PURE__*/react.forwardRef(function (_ref, forwardedRef) {
29
31
  disabled = _useFieldContext2$.disabled,
30
32
  invalid = _useFieldContext2$.invalid,
31
33
  a11yProps = _useFieldContext2[1];
34
+ // Only applies when value is controlled and explicitly empty — the component
35
+ // cannot detect when the user selects an option in uncontrolled mode, so we
36
+ // only apply the muted style when value === '' (i.e. the caller controls it).
37
+ var isPlaceholderActive = placeholder !== undefined && value === '';
32
38
  var _useSelectStyles = useSelectStyles({
33
39
  disabled: disabled,
34
- invalid: invalid
40
+ invalid: invalid,
41
+ isPlaceholderActive: isPlaceholderActive
35
42
  }),
36
43
  _useSelectStyles2 = _slicedToArray(_useSelectStyles, 2),
37
44
  boxProps = _useSelectStyles2[0],
@@ -95,7 +102,12 @@ var Indicator = function Indicator() {
95
102
  });
96
103
  };
97
104
  function useSelectStyles(props) {
98
- var _useInputStyles = textInput.useInputStyles(props),
105
+ var isPlaceholderActive = props.isPlaceholderActive,
106
+ disabled = props.disabled,
107
+ inputStylesProps = _objectWithoutProperties(props, _excluded);
108
+ var _useInputStyles = textInput.useInputStyles(_objectSpread({
109
+ disabled: disabled
110
+ }, inputStylesProps)),
99
111
  _useInputStyles2 = _slicedToArray(_useInputStyles, 2),
100
112
  boxProps = _useInputStyles2[0],
101
113
  inputStyles = _useInputStyles2[1];
@@ -104,7 +116,9 @@ function useSelectStyles(props) {
104
116
  // Prevent text going underneath the chevron icon
105
117
  paddingRight: theme$1.sizing.xxsmall +
106
118
  // size of chevron icon
107
- theme$1.spacing.medium * 2 // paddingX value
119
+ theme$1.spacing.medium * 2
120
+ }, isPlaceholderActive && !disabled && {
121
+ color: theme$1.color.foreground.placeholder
108
122
  })];
109
123
  }
110
124
 
package/dist/spark-web-select.esm.js CHANGED
@@ -1,3 +1,4 @@
1
+ import _objectWithoutProperties from '@babel/runtime/helpers/esm/objectWithoutProperties';
1
2
  import _objectSpread from '@babel/runtime/helpers/esm/objectSpread2';
2
3
  import _slicedToArray from '@babel/runtime/helpers/esm/slicedToArray';
3
4
  import { css } from '@emotion/react';
@@ -9,6 +10,7 @@ import { useTheme } from '@spark-web/theme';
9
10
  import { forwardRef, useCallback } from 'react';
10
11
  import { jsx, jsxs } from '@emotion/react/jsx-runtime';
11
12
 
13
+ var _excluded = ["isPlaceholderActive", "disabled"];
12
14
  var Select = /*#__PURE__*/forwardRef(function (_ref, forwardedRef) {
13
15
  var data = _ref.data,
14
16
  defaultValue = _ref.defaultValue,
@@ -25,9 +27,14 @@ var Select = /*#__PURE__*/forwardRef(function (_ref, forwardedRef) {
25
27
  disabled = _useFieldContext2$.disabled,
26
28
  invalid = _useFieldContext2$.invalid,
27
29
  a11yProps = _useFieldContext2[1];
30
+ // Only applies when value is controlled and explicitly empty — the component
31
+ // cannot detect when the user selects an option in uncontrolled mode, so we
32
+ // only apply the muted style when value === '' (i.e. the caller controls it).
33
+ var isPlaceholderActive = placeholder !== undefined && value === '';
28
34
  var _useSelectStyles = useSelectStyles({
29
35
  disabled: disabled,
30
- invalid: invalid
36
+ invalid: invalid,
37
+ isPlaceholderActive: isPlaceholderActive
31
38
  }),
32
39
  _useSelectStyles2 = _slicedToArray(_useSelectStyles, 2),
33
40
  boxProps = _useSelectStyles2[0],
@@ -91,7 +98,12 @@ var Indicator = function Indicator() {
91
98
  });
92
99
  };
93
100
  function useSelectStyles(props) {
94
- var _useInputStyles = useInputStyles(props),
101
+ var isPlaceholderActive = props.isPlaceholderActive,
102
+ disabled = props.disabled,
103
+ inputStylesProps = _objectWithoutProperties(props, _excluded);
104
+ var _useInputStyles = useInputStyles(_objectSpread({
105
+ disabled: disabled
106
+ }, inputStylesProps)),
95
107
  _useInputStyles2 = _slicedToArray(_useInputStyles, 2),
96
108
  boxProps = _useInputStyles2[0],
97
109
  inputStyles = _useInputStyles2[1];
@@ -100,7 +112,9 @@ function useSelectStyles(props) {
100
112
  // Prevent text going underneath the chevron icon
101
113
  paddingRight: theme.sizing.xxsmall +
102
114
  // size of chevron icon
103
- theme.spacing.medium * 2 // paddingX value
115
+ theme.spacing.medium * 2
116
+ }, isPlaceholderActive && !disabled && {
117
+ color: theme.color.foreground.placeholder
104
118
  })];
105
119
  }
106
120
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@spark-web/select",
3
- "version": "6.0.1",
3
+ "version": "6.0.2",
4
4
  "homepage": "https://github.com/brighte-labs/spark-web#readme",
5
5
  "repository": {
6
6
  "type": "git",
@@ -20,17 +20,17 @@
20
20
  "@emotion/react": "^11.14.0",
21
21
  "@spark-web/box": "^6.0.1",
22
22
  "@spark-web/icon": "^5.1.0",
23
- "@spark-web/text-input": "^6.0.1",
23
+ "@spark-web/text-input": "^6.0.2",
24
24
  "@spark-web/theme": "^5.13.0"
25
25
  },
26
26
  "devDependencies": {
27
- "@spark-web/field": "^5.3.1",
27
+ "@spark-web/field": "^5.3.2",
28
28
  "@spark-web/utils": "^5.1.0",
29
29
  "@types/react": "^19.1.0",
30
30
  "react": "^19.1.0"
31
31
  },
32
32
  "peerDependencies": {
33
- "@spark-web/field": "^5.3.1",
33
+ "@spark-web/field": "^5.3.2",
34
34
  "react": "^17.0.0 || ^18.0.0 || ^19.0.0"
35
35
  },
36
36
  "engines": {