@spark-web/field 2.0.0 → 3.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.
Files changed (4) hide show
  1. package/dist/spark-web-field.cjs.dev.js +28 -28
  2. package/dist/spark-web-field.cjs.prod.js +28 -28
  3. package/dist/spark-web-field.esm.js +28 -28
  4. package/package.json +9 -9
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 _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
7
- var _objectSpread = require('@babel/runtime/helpers/objectSpread2');
8
6
  var css = require('@emotion/css');
9
7
  var a11y = require('@spark-web/a11y');
10
8
  var box = require('@spark-web/box');
@@ -12,7 +10,6 @@ var icon = require('@spark-web/icon');
12
10
  var stack = require('@spark-web/stack');
13
11
  var text = require('@spark-web/text');
14
12
  var theme = require('@spark-web/theme');
15
- var internal = require('@spark-web/utils/internal');
16
13
  var jsxRuntime = require('react/jsx-runtime');
17
14
 
18
15
  var FieldContext = /*#__PURE__*/react.createContext(null);
@@ -28,8 +25,6 @@ function useFieldContext() {
28
25
  return ctx;
29
26
  }
30
27
 
31
- var _excluded = ["children"];
32
-
33
28
  /**
34
29
  * Using a [context](https://reactjs.org/docs/context.html), the field
35
30
  * component connects the label, description, and message to the input element.
@@ -78,35 +73,31 @@ var Field = /*#__PURE__*/react.forwardRef(function (_ref, forwardedRef) {
78
73
  as: "label",
79
74
  htmlFor: inputId,
80
75
  children: /*#__PURE__*/jsxRuntime.jsxs(text.Text, {
81
- inline: true,
82
76
  tone: disabled ? 'disabled' : 'neutral',
83
77
  weight: "semibold",
84
78
  children: [label, ' ', secondaryLabel && /*#__PURE__*/jsxRuntime.jsx(text.Text, {
85
79
  inline: true,
86
80
  tone: disabled ? 'disabled' : 'muted',
81
+ weight: "regular",
87
82
  children: secondaryLabel
88
83
  })]
89
84
  })
90
85
  }),
91
86
  'reserve-space': /*#__PURE__*/jsxRuntime.jsxs(react.Fragment, {
92
87
  children: [hiddenLabel, /*#__PURE__*/jsxRuntime.jsx(text.Text, {
93
- inline: true,
94
88
  "aria-hidden": true,
95
89
  children: "\xA0"
96
90
  })]
97
91
  })
98
92
  };
93
+ var LabelWrapper = labelVisibility === 'hidden' ? react.Fragment : FieldLabelWrapper;
99
94
  return /*#__PURE__*/jsxRuntime.jsx(FieldContextProvider, {
100
95
  value: fieldContext,
101
- children: /*#__PURE__*/jsxRuntime.jsxs(stack.Stack, _objectSpread(_objectSpread({
102
- gap: labelVisibility === 'hidden' ? undefined : 'small',
103
- ref: forwardedRef
104
- }, data ? internal.buildDataAttributes(data) : null), {}, {
105
- children: [/*#__PURE__*/jsxRuntime.jsxs(box.Box, {
106
- display: "flex",
107
- alignItems: "center",
108
- justifyContent: "spaceBetween",
109
- gap: "large",
96
+ children: /*#__PURE__*/jsxRuntime.jsxs(stack.Stack, {
97
+ ref: forwardedRef,
98
+ data: data,
99
+ gap: "medium",
100
+ children: [/*#__PURE__*/jsxRuntime.jsxs(LabelWrapper, {
110
101
  children: [labelElement[labelVisibility], adornment]
111
102
  }), description && /*#__PURE__*/jsxRuntime.jsx(text.Text, {
112
103
  tone: "muted",
@@ -118,7 +109,7 @@ var Field = /*#__PURE__*/react.forwardRef(function (_ref, forwardedRef) {
118
109
  id: messageId,
119
110
  message: message
120
111
  })]
121
- }))
112
+ })
122
113
  });
123
114
  });
124
115
  Field.displayName = 'Field'; // Utils
@@ -136,6 +127,17 @@ function useFieldIds(id) {
136
127
  } // Styled components
137
128
  // ------------------------------
138
129
 
130
+ function FieldLabelWrapper(_ref2) {
131
+ var children = _ref2.children;
132
+ return /*#__PURE__*/jsxRuntime.jsx(box.Box, {
133
+ display: "flex",
134
+ alignItems: "center",
135
+ justifyContent: "spaceBetween",
136
+ gap: "large",
137
+ children: children
138
+ });
139
+ }
140
+
139
141
  var messageToneMap = {
140
142
  critical: 'critical',
141
143
  neutral: 'muted',
@@ -147,10 +149,10 @@ var messageIconMap = {
147
149
  neutral: null,
148
150
  positive: icon.CheckCircleIcon
149
151
  };
150
- var FieldMessage = function FieldMessage(_ref2) {
151
- var message = _ref2.message,
152
- id = _ref2.id,
153
- tone = _ref2.tone;
152
+ var FieldMessage = function FieldMessage(_ref3) {
153
+ var message = _ref3.message,
154
+ id = _ref3.id,
155
+ tone = _ref3.tone;
154
156
  var textTone = messageToneMap[tone];
155
157
  var Icon = messageIconMap[tone];
156
158
  return /*#__PURE__*/jsxRuntime.jsxs(box.Box, {
@@ -170,9 +172,8 @@ var FieldMessage = function FieldMessage(_ref2) {
170
172
  });
171
173
  };
172
174
 
173
- function IndicatorContainer(_ref3) {
174
- var children = _ref3.children,
175
- props = _objectWithoutProperties(_ref3, _excluded);
175
+ function IndicatorContainer(_ref4) {
176
+ var children = _ref4.children;
176
177
 
177
178
  var _useTheme = theme.useTheme(),
178
179
  typography = _useTheme.typography,
@@ -189,16 +190,15 @@ function IndicatorContainer(_ref3) {
189
190
  height: tablet.capHeight
190
191
  }
191
192
  });
192
- return /*#__PURE__*/jsxRuntime.jsx(box.Box, _objectSpread(_objectSpread({
193
+ return /*#__PURE__*/jsxRuntime.jsx(box.Box, {
193
194
  display: "flex",
194
195
  alignItems: "center",
195
196
  "aria-hidden": true,
196
197
  cursor: "default",
197
198
  flexShrink: 0,
198
- className: css.css(responsiveStyles)
199
- }, props), {}, {
199
+ className: css.css(responsiveStyles),
200
200
  children: children
201
- }));
201
+ });
202
202
  }
203
203
 
204
204
  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 _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
7
- var _objectSpread = require('@babel/runtime/helpers/objectSpread2');
8
6
  var css = require('@emotion/css');
9
7
  var a11y = require('@spark-web/a11y');
10
8
  var box = require('@spark-web/box');
@@ -12,7 +10,6 @@ var icon = require('@spark-web/icon');
12
10
  var stack = require('@spark-web/stack');
13
11
  var text = require('@spark-web/text');
14
12
  var theme = require('@spark-web/theme');
15
- var internal = require('@spark-web/utils/internal');
16
13
  var jsxRuntime = require('react/jsx-runtime');
17
14
 
18
15
  var FieldContext = /*#__PURE__*/react.createContext(null);
@@ -28,8 +25,6 @@ function useFieldContext() {
28
25
  return ctx;
29
26
  }
30
27
 
31
- var _excluded = ["children"];
32
-
33
28
  /**
34
29
  * Using a [context](https://reactjs.org/docs/context.html), the field
35
30
  * component connects the label, description, and message to the input element.
@@ -78,35 +73,31 @@ var Field = /*#__PURE__*/react.forwardRef(function (_ref, forwardedRef) {
78
73
  as: "label",
79
74
  htmlFor: inputId,
80
75
  children: /*#__PURE__*/jsxRuntime.jsxs(text.Text, {
81
- inline: true,
82
76
  tone: disabled ? 'disabled' : 'neutral',
83
77
  weight: "semibold",
84
78
  children: [label, ' ', secondaryLabel && /*#__PURE__*/jsxRuntime.jsx(text.Text, {
85
79
  inline: true,
86
80
  tone: disabled ? 'disabled' : 'muted',
81
+ weight: "regular",
87
82
  children: secondaryLabel
88
83
  })]
89
84
  })
90
85
  }),
91
86
  'reserve-space': /*#__PURE__*/jsxRuntime.jsxs(react.Fragment, {
92
87
  children: [hiddenLabel, /*#__PURE__*/jsxRuntime.jsx(text.Text, {
93
- inline: true,
94
88
  "aria-hidden": true,
95
89
  children: "\xA0"
96
90
  })]
97
91
  })
98
92
  };
93
+ var LabelWrapper = labelVisibility === 'hidden' ? react.Fragment : FieldLabelWrapper;
99
94
  return /*#__PURE__*/jsxRuntime.jsx(FieldContextProvider, {
100
95
  value: fieldContext,
101
- children: /*#__PURE__*/jsxRuntime.jsxs(stack.Stack, _objectSpread(_objectSpread({
102
- gap: labelVisibility === 'hidden' ? undefined : 'small',
103
- ref: forwardedRef
104
- }, data ? internal.buildDataAttributes(data) : null), {}, {
105
- children: [/*#__PURE__*/jsxRuntime.jsxs(box.Box, {
106
- display: "flex",
107
- alignItems: "center",
108
- justifyContent: "spaceBetween",
109
- gap: "large",
96
+ children: /*#__PURE__*/jsxRuntime.jsxs(stack.Stack, {
97
+ ref: forwardedRef,
98
+ data: data,
99
+ gap: "medium",
100
+ children: [/*#__PURE__*/jsxRuntime.jsxs(LabelWrapper, {
110
101
  children: [labelElement[labelVisibility], adornment]
111
102
  }), description && /*#__PURE__*/jsxRuntime.jsx(text.Text, {
112
103
  tone: "muted",
@@ -118,7 +109,7 @@ var Field = /*#__PURE__*/react.forwardRef(function (_ref, forwardedRef) {
118
109
  id: messageId,
119
110
  message: message
120
111
  })]
121
- }))
112
+ })
122
113
  });
123
114
  });
124
115
  Field.displayName = 'Field'; // Utils
@@ -136,6 +127,17 @@ function useFieldIds(id) {
136
127
  } // Styled components
137
128
  // ------------------------------
138
129
 
130
+ function FieldLabelWrapper(_ref2) {
131
+ var children = _ref2.children;
132
+ return /*#__PURE__*/jsxRuntime.jsx(box.Box, {
133
+ display: "flex",
134
+ alignItems: "center",
135
+ justifyContent: "spaceBetween",
136
+ gap: "large",
137
+ children: children
138
+ });
139
+ }
140
+
139
141
  var messageToneMap = {
140
142
  critical: 'critical',
141
143
  neutral: 'muted',
@@ -147,10 +149,10 @@ var messageIconMap = {
147
149
  neutral: null,
148
150
  positive: icon.CheckCircleIcon
149
151
  };
150
- var FieldMessage = function FieldMessage(_ref2) {
151
- var message = _ref2.message,
152
- id = _ref2.id,
153
- tone = _ref2.tone;
152
+ var FieldMessage = function FieldMessage(_ref3) {
153
+ var message = _ref3.message,
154
+ id = _ref3.id,
155
+ tone = _ref3.tone;
154
156
  var textTone = messageToneMap[tone];
155
157
  var Icon = messageIconMap[tone];
156
158
  return /*#__PURE__*/jsxRuntime.jsxs(box.Box, {
@@ -170,9 +172,8 @@ var FieldMessage = function FieldMessage(_ref2) {
170
172
  });
171
173
  };
172
174
 
173
- function IndicatorContainer(_ref3) {
174
- var children = _ref3.children,
175
- props = _objectWithoutProperties(_ref3, _excluded);
175
+ function IndicatorContainer(_ref4) {
176
+ var children = _ref4.children;
176
177
 
177
178
  var _useTheme = theme.useTheme(),
178
179
  typography = _useTheme.typography,
@@ -189,16 +190,15 @@ function IndicatorContainer(_ref3) {
189
190
  height: tablet.capHeight
190
191
  }
191
192
  });
192
- return /*#__PURE__*/jsxRuntime.jsx(box.Box, _objectSpread(_objectSpread({
193
+ return /*#__PURE__*/jsxRuntime.jsx(box.Box, {
193
194
  display: "flex",
194
195
  alignItems: "center",
195
196
  "aria-hidden": true,
196
197
  cursor: "default",
197
198
  flexShrink: 0,
198
- className: css.css(responsiveStyles)
199
- }, props), {}, {
199
+ className: css.css(responsiveStyles),
200
200
  children: children
201
- }));
201
+ });
202
202
  }
203
203
 
204
204
  exports.Field = Field;
package/dist/spark-web-field.esm.js CHANGED
@@ -1,6 +1,4 @@
1
1
  import { createContext, useContext, forwardRef, Fragment } from 'react';
2
- import _objectWithoutProperties from '@babel/runtime/helpers/esm/objectWithoutProperties';
3
- import _objectSpread from '@babel/runtime/helpers/esm/objectSpread2';
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';
@@ -8,7 +6,6 @@ import { ExclamationCircleIcon, CheckCircleIcon } from '@spark-web/icon';
8
6
  import { Stack } from '@spark-web/stack';
9
7
  import { Text } from '@spark-web/text';
10
8
  import { useTheme } from '@spark-web/theme';
11
- import { buildDataAttributes } from '@spark-web/utils/internal';
12
9
  import { jsx, jsxs } from 'react/jsx-runtime';
13
10
 
14
11
  var FieldContext = /*#__PURE__*/createContext(null);
@@ -24,8 +21,6 @@ function useFieldContext() {
24
21
  return ctx;
25
22
  }
26
23
 
27
- var _excluded = ["children"];
28
-
29
24
  /**
30
25
  * Using a [context](https://reactjs.org/docs/context.html), the field
31
26
  * component connects the label, description, and message to the input element.
@@ -74,35 +69,31 @@ var Field = /*#__PURE__*/forwardRef(function (_ref, forwardedRef) {
74
69
  as: "label",
75
70
  htmlFor: inputId,
76
71
  children: /*#__PURE__*/jsxs(Text, {
77
- inline: true,
78
72
  tone: disabled ? 'disabled' : 'neutral',
79
73
  weight: "semibold",
80
74
  children: [label, ' ', secondaryLabel && /*#__PURE__*/jsx(Text, {
81
75
  inline: true,
82
76
  tone: disabled ? 'disabled' : 'muted',
77
+ weight: "regular",
83
78
  children: secondaryLabel
84
79
  })]
85
80
  })
86
81
  }),
87
82
  'reserve-space': /*#__PURE__*/jsxs(Fragment, {
88
83
  children: [hiddenLabel, /*#__PURE__*/jsx(Text, {
89
- inline: true,
90
84
  "aria-hidden": true,
91
85
  children: "\xA0"
92
86
  })]
93
87
  })
94
88
  };
89
+ var LabelWrapper = labelVisibility === 'hidden' ? Fragment : FieldLabelWrapper;
95
90
  return /*#__PURE__*/jsx(FieldContextProvider, {
96
91
  value: fieldContext,
97
- children: /*#__PURE__*/jsxs(Stack, _objectSpread(_objectSpread({
98
- gap: labelVisibility === 'hidden' ? undefined : 'small',
99
- ref: forwardedRef
100
- }, data ? buildDataAttributes(data) : null), {}, {
101
- children: [/*#__PURE__*/jsxs(Box, {
102
- display: "flex",
103
- alignItems: "center",
104
- justifyContent: "spaceBetween",
105
- gap: "large",
92
+ children: /*#__PURE__*/jsxs(Stack, {
93
+ ref: forwardedRef,
94
+ data: data,
95
+ gap: "medium",
96
+ children: [/*#__PURE__*/jsxs(LabelWrapper, {
106
97
  children: [labelElement[labelVisibility], adornment]
107
98
  }), description && /*#__PURE__*/jsx(Text, {
108
99
  tone: "muted",
@@ -114,7 +105,7 @@ var Field = /*#__PURE__*/forwardRef(function (_ref, forwardedRef) {
114
105
  id: messageId,
115
106
  message: message
116
107
  })]
117
- }))
108
+ })
118
109
  });
119
110
  });
120
111
  Field.displayName = 'Field'; // Utils
@@ -132,6 +123,17 @@ function useFieldIds(id) {
132
123
  } // Styled components
133
124
  // ------------------------------
134
125
 
126
+ function FieldLabelWrapper(_ref2) {
127
+ var children = _ref2.children;
128
+ return /*#__PURE__*/jsx(Box, {
129
+ display: "flex",
130
+ alignItems: "center",
131
+ justifyContent: "spaceBetween",
132
+ gap: "large",
133
+ children: children
134
+ });
135
+ }
136
+
135
137
  var messageToneMap = {
136
138
  critical: 'critical',
137
139
  neutral: 'muted',
@@ -143,10 +145,10 @@ var messageIconMap = {
143
145
  neutral: null,
144
146
  positive: CheckCircleIcon
145
147
  };
146
- var FieldMessage = function FieldMessage(_ref2) {
147
- var message = _ref2.message,
148
- id = _ref2.id,
149
- tone = _ref2.tone;
148
+ var FieldMessage = function FieldMessage(_ref3) {
149
+ var message = _ref3.message,
150
+ id = _ref3.id,
151
+ tone = _ref3.tone;
150
152
  var textTone = messageToneMap[tone];
151
153
  var Icon = messageIconMap[tone];
152
154
  return /*#__PURE__*/jsxs(Box, {
@@ -166,9 +168,8 @@ var FieldMessage = function FieldMessage(_ref2) {
166
168
  });
167
169
  };
168
170
 
169
- function IndicatorContainer(_ref3) {
170
- var children = _ref3.children,
171
- props = _objectWithoutProperties(_ref3, _excluded);
171
+ function IndicatorContainer(_ref4) {
172
+ var children = _ref4.children;
172
173
 
173
174
  var _useTheme = useTheme(),
174
175
  typography = _useTheme.typography,
@@ -185,16 +186,15 @@ function IndicatorContainer(_ref3) {
185
186
  height: tablet.capHeight
186
187
  }
187
188
  });
188
- return /*#__PURE__*/jsx(Box, _objectSpread(_objectSpread({
189
+ return /*#__PURE__*/jsx(Box, {
189
190
  display: "flex",
190
191
  alignItems: "center",
191
192
  "aria-hidden": true,
192
193
  cursor: "default",
193
194
  flexShrink: 0,
194
- className: css(responsiveStyles)
195
- }, props), {}, {
195
+ className: css(responsiveStyles),
196
196
  children: children
197
- }));
197
+ });
198
198
  }
199
199
 
200
200
  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.0",
3
+ "version": "3.0.1",
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.3"
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",