@spark-web/field 2.0.1 → 3.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/README.md +1 -0
  2. package/dist/spark-web-field.cjs.dev.js +14 -18
  3. package/dist/spark-web-field.cjs.prod.js +14 -18
  4. package/dist/spark-web-field.esm.js +15 -19
  5. package/package.json +9 -9
package/README.md CHANGED
@@ -1,5 +1,6 @@
1
1
  ---
2
2
  title: Field
3
+ isExperimentalPackage: false
3
4
  ---
4
5
 
5
6
  Using context, the field component connects the label, description, and message
package/dist/spark-web-field.cjs.dev.js CHANGED
@@ -3,8 +3,6 @@
3
3
  Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
5
5
  var react = require('react');
6
- var _objectSpread = require('@babel/runtime/helpers/objectSpread2');
7
- var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
8
6
  var css = require('@emotion/css');
9
7
  var a11y = require('@spark-web/a11y');
10
8
  var box = require('@spark-web/box');
@@ -27,8 +25,6 @@ function useFieldContext() {
27
25
  return ctx;
28
26
  }
29
27
 
30
- var _excluded = ["children"];
31
-
32
28
  /**
33
29
  * Using a [context](https://reactjs.org/docs/context.html), the field
34
30
  * component connects the label, description, and message to the input element.
@@ -56,14 +52,16 @@ var Field = /*#__PURE__*/react.forwardRef(function (_ref, forwardedRef) {
56
52
 
57
53
 
58
54
  var invalid = Boolean(message && tone === 'critical');
59
- var fieldContext = [{
60
- disabled: disabled,
61
- invalid: invalid
62
- }, {
63
- 'aria-describedby': a11y.mergeIds(message && messageId, description && descriptionId),
64
- 'aria-invalid': invalid || undefined,
65
- id: inputId
66
- }]; // label prep
55
+ var fieldContext = react.useMemo(function () {
56
+ return [{
57
+ disabled: disabled,
58
+ invalid: invalid
59
+ }, {
60
+ 'aria-describedby': a11y.mergeIds(message && messageId, description && descriptionId),
61
+ 'aria-invalid': invalid || undefined,
62
+ id: inputId
63
+ }];
64
+ }, [description, descriptionId, disabled, inputId, invalid, message, messageId]); // label prep
67
65
 
68
66
  var hiddenLabel = /*#__PURE__*/jsxRuntime.jsxs(a11y.VisuallyHidden, {
69
67
  as: "label",
@@ -177,8 +175,7 @@ var FieldMessage = function FieldMessage(_ref3) {
177
175
  };
178
176
 
179
177
  function IndicatorContainer(_ref4) {
180
- var children = _ref4.children,
181
- props = _objectWithoutProperties(_ref4, _excluded);
178
+ var children = _ref4.children;
182
179
 
183
180
  var _useTheme = theme.useTheme(),
184
181
  typography = _useTheme.typography,
@@ -195,16 +192,15 @@ function IndicatorContainer(_ref4) {
195
192
  height: tablet.capHeight
196
193
  }
197
194
  });
198
- return /*#__PURE__*/jsxRuntime.jsx(box.Box, _objectSpread(_objectSpread({
195
+ return /*#__PURE__*/jsxRuntime.jsx(box.Box, {
199
196
  display: "flex",
200
197
  alignItems: "center",
201
198
  "aria-hidden": true,
202
199
  cursor: "default",
203
200
  flexShrink: 0,
204
- className: css.css(responsiveStyles)
205
- }, props), {}, {
201
+ className: css.css(responsiveStyles),
206
202
  children: children
207
- }));
203
+ });
208
204
  }
209
205
 
210
206
  exports.Field = Field;
package/dist/spark-web-field.cjs.prod.js CHANGED
@@ -3,8 +3,6 @@
3
3
  Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
5
5
  var react = require('react');
6
- var _objectSpread = require('@babel/runtime/helpers/objectSpread2');
7
- var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
8
6
  var css = require('@emotion/css');
9
7
  var a11y = require('@spark-web/a11y');
10
8
  var box = require('@spark-web/box');
@@ -27,8 +25,6 @@ function useFieldContext() {
27
25
  return ctx;
28
26
  }
29
27
 
30
- var _excluded = ["children"];
31
-
32
28
  /**
33
29
  * Using a [context](https://reactjs.org/docs/context.html), the field
34
30
  * component connects the label, description, and message to the input element.
@@ -56,14 +52,16 @@ var Field = /*#__PURE__*/react.forwardRef(function (_ref, forwardedRef) {
56
52
 
57
53
 
58
54
  var invalid = Boolean(message && tone === 'critical');
59
- var fieldContext = [{
60
- disabled: disabled,
61
- invalid: invalid
62
- }, {
63
- 'aria-describedby': a11y.mergeIds(message && messageId, description && descriptionId),
64
- 'aria-invalid': invalid || undefined,
65
- id: inputId
66
- }]; // label prep
55
+ var fieldContext = react.useMemo(function () {
56
+ return [{
57
+ disabled: disabled,
58
+ invalid: invalid
59
+ }, {
60
+ 'aria-describedby': a11y.mergeIds(message && messageId, description && descriptionId),
61
+ 'aria-invalid': invalid || undefined,
62
+ id: inputId
63
+ }];
64
+ }, [description, descriptionId, disabled, inputId, invalid, message, messageId]); // label prep
67
65
 
68
66
  var hiddenLabel = /*#__PURE__*/jsxRuntime.jsxs(a11y.VisuallyHidden, {
69
67
  as: "label",
@@ -177,8 +175,7 @@ var FieldMessage = function FieldMessage(_ref3) {
177
175
  };
178
176
 
179
177
  function IndicatorContainer(_ref4) {
180
- var children = _ref4.children,
181
- props = _objectWithoutProperties(_ref4, _excluded);
178
+ var children = _ref4.children;
182
179
 
183
180
  var _useTheme = theme.useTheme(),
184
181
  typography = _useTheme.typography,
@@ -195,16 +192,15 @@ function IndicatorContainer(_ref4) {
195
192
  height: tablet.capHeight
196
193
  }
197
194
  });
198
- return /*#__PURE__*/jsxRuntime.jsx(box.Box, _objectSpread(_objectSpread({
195
+ return /*#__PURE__*/jsxRuntime.jsx(box.Box, {
199
196
  display: "flex",
200
197
  alignItems: "center",
201
198
  "aria-hidden": true,
202
199
  cursor: "default",
203
200
  flexShrink: 0,
204
- className: css.css(responsiveStyles)
205
- }, props), {}, {
201
+ className: css.css(responsiveStyles),
206
202
  children: children
207
- }));
203
+ });
208
204
  }
209
205
 
210
206
  exports.Field = Field;
package/dist/spark-web-field.esm.js CHANGED
@@ -1,6 +1,4 @@
1
- import { createContext, useContext, forwardRef, Fragment } from 'react';
2
- import _objectSpread from '@babel/runtime/helpers/esm/objectSpread2';
3
- import _objectWithoutProperties from '@babel/runtime/helpers/esm/objectWithoutProperties';
1
+ import { createContext, useContext, forwardRef, useMemo, Fragment } from 'react';
4
2
  import { css } from '@emotion/css';
5
3
  import { mergeIds, useId, composeId, VisuallyHidden } from '@spark-web/a11y';
6
4
  import { Box } from '@spark-web/box';
@@ -23,8 +21,6 @@ function useFieldContext() {
23
21
  return ctx;
24
22
  }
25
23
 
26
- var _excluded = ["children"];
27
-
28
24
  /**
29
25
  * Using a [context](https://reactjs.org/docs/context.html), the field
30
26
  * component connects the label, description, and message to the input element.
@@ -52,14 +48,16 @@ var Field = /*#__PURE__*/forwardRef(function (_ref, forwardedRef) {
52
48
 
53
49
 
54
50
  var invalid = Boolean(message && tone === 'critical');
55
- var fieldContext = [{
56
- disabled: disabled,
57
- invalid: invalid
58
- }, {
59
- 'aria-describedby': mergeIds(message && messageId, description && descriptionId),
60
- 'aria-invalid': invalid || undefined,
61
- id: inputId
62
- }]; // label prep
51
+ var fieldContext = useMemo(function () {
52
+ return [{
53
+ disabled: disabled,
54
+ invalid: invalid
55
+ }, {
56
+ 'aria-describedby': mergeIds(message && messageId, description && descriptionId),
57
+ 'aria-invalid': invalid || undefined,
58
+ id: inputId
59
+ }];
60
+ }, [description, descriptionId, disabled, inputId, invalid, message, messageId]); // label prep
63
61
 
64
62
  var hiddenLabel = /*#__PURE__*/jsxs(VisuallyHidden, {
65
63
  as: "label",
@@ -173,8 +171,7 @@ var FieldMessage = function FieldMessage(_ref3) {
173
171
  };
174
172
 
175
173
  function IndicatorContainer(_ref4) {
176
- var children = _ref4.children,
177
- props = _objectWithoutProperties(_ref4, _excluded);
174
+ var children = _ref4.children;
178
175
 
179
176
  var _useTheme = useTheme(),
180
177
  typography = _useTheme.typography,
@@ -191,16 +188,15 @@ function IndicatorContainer(_ref4) {
191
188
  height: tablet.capHeight
192
189
  }
193
190
  });
194
- return /*#__PURE__*/jsx(Box, _objectSpread(_objectSpread({
191
+ return /*#__PURE__*/jsx(Box, {
195
192
  display: "flex",
196
193
  alignItems: "center",
197
194
  "aria-hidden": true,
198
195
  cursor: "default",
199
196
  flexShrink: 0,
200
- className: css(responsiveStyles)
201
- }, props), {}, {
197
+ className: css(responsiveStyles),
202
198
  children: children
203
- }));
199
+ });
204
200
  }
205
201
 
206
202
  export { Field, FieldContextProvider, FieldMessage, useFieldContext, useFieldIds };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@spark-web/field",
3
- "version": "2.0.1",
3
+ "version": "3.0.2",
4
4
  "license": "MIT",
5
5
  "main": "dist/spark-web-field.cjs.js",
6
6
  "module": "dist/spark-web-field.esm.js",
@@ -8,15 +8,15 @@
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/icon": "^1.1.3",
16
- "@spark-web/stack": "^1.0.5",
17
- "@spark-web/text": "^1.0.5",
18
- "@spark-web/theme": "^3.0.1",
19
- "@spark-web/utils": "^1.1.4"
13
+ "@spark-web/a11y": "^1.1.0",
14
+ "@spark-web/box": "^1.0.6",
15
+ "@spark-web/icon": "^1.1.4",
16
+ "@spark-web/stack": "^1.0.6",
17
+ "@spark-web/text": "^1.0.6",
18
+ "@spark-web/theme": "^3.0.2",
19
+ "@spark-web/utils": "^1.1.5"
20
20
  },
21
21
  "devDependencies": {
22
22
  "@types/react": "^17.0.12",