@spark-web/field 2.0.0 → 2.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 +27 -21
  2. package/dist/spark-web-field.cjs.prod.js +27 -21
  3. package/dist/spark-web-field.esm.js +27 -21
  4. package/package.json +2 -2
package/dist/spark-web-field.cjs.dev.js CHANGED
@@ -3,8 +3,8 @@
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
6
  var _objectSpread = require('@babel/runtime/helpers/objectSpread2');
7
+ var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
8
8
  var css = require('@emotion/css');
9
9
  var a11y = require('@spark-web/a11y');
10
10
  var box = require('@spark-web/box');
@@ -12,7 +12,6 @@ var icon = require('@spark-web/icon');
12
12
  var stack = require('@spark-web/stack');
13
13
  var text = require('@spark-web/text');
14
14
  var theme = require('@spark-web/theme');
15
- var internal = require('@spark-web/utils/internal');
16
15
  var jsxRuntime = require('react/jsx-runtime');
17
16
 
18
17
  var FieldContext = /*#__PURE__*/react.createContext(null);
@@ -78,35 +77,31 @@ var Field = /*#__PURE__*/react.forwardRef(function (_ref, forwardedRef) {
78
77
  as: "label",
79
78
  htmlFor: inputId,
80
79
  children: /*#__PURE__*/jsxRuntime.jsxs(text.Text, {
81
- inline: true,
82
80
  tone: disabled ? 'disabled' : 'neutral',
83
81
  weight: "semibold",
84
82
  children: [label, ' ', secondaryLabel && /*#__PURE__*/jsxRuntime.jsx(text.Text, {
85
83
  inline: true,
86
84
  tone: disabled ? 'disabled' : 'muted',
85
+ weight: "regular",
87
86
  children: secondaryLabel
88
87
  })]
89
88
  })
90
89
  }),
91
90
  'reserve-space': /*#__PURE__*/jsxRuntime.jsxs(react.Fragment, {
92
91
  children: [hiddenLabel, /*#__PURE__*/jsxRuntime.jsx(text.Text, {
93
- inline: true,
94
92
  "aria-hidden": true,
95
93
  children: "\xA0"
96
94
  })]
97
95
  })
98
96
  };
97
+ var LabelWrapper = labelVisibility === 'hidden' ? react.Fragment : FieldLabelWrapper;
99
98
  return /*#__PURE__*/jsxRuntime.jsx(FieldContextProvider, {
100
99
  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",
100
+ children: /*#__PURE__*/jsxRuntime.jsxs(stack.Stack, {
101
+ ref: forwardedRef,
102
+ data: data,
103
+ gap: "medium",
104
+ children: [/*#__PURE__*/jsxRuntime.jsxs(LabelWrapper, {
110
105
  children: [labelElement[labelVisibility], adornment]
111
106
  }), description && /*#__PURE__*/jsxRuntime.jsx(text.Text, {
112
107
  tone: "muted",
@@ -118,7 +113,7 @@ var Field = /*#__PURE__*/react.forwardRef(function (_ref, forwardedRef) {
118
113
  id: messageId,
119
114
  message: message
120
115
  })]
121
- }))
116
+ })
122
117
  });
123
118
  });
124
119
  Field.displayName = 'Field'; // Utils
@@ -136,6 +131,17 @@ function useFieldIds(id) {
136
131
  } // Styled components
137
132
  // ------------------------------
138
133
 
134
+ function FieldLabelWrapper(_ref2) {
135
+ var children = _ref2.children;
136
+ return /*#__PURE__*/jsxRuntime.jsx(box.Box, {
137
+ display: "flex",
138
+ alignItems: "center",
139
+ justifyContent: "spaceBetween",
140
+ gap: "large",
141
+ children: children
142
+ });
143
+ }
144
+
139
145
  var messageToneMap = {
140
146
  critical: 'critical',
141
147
  neutral: 'muted',
@@ -147,10 +153,10 @@ var messageIconMap = {
147
153
  neutral: null,
148
154
  positive: icon.CheckCircleIcon
149
155
  };
150
- var FieldMessage = function FieldMessage(_ref2) {
151
- var message = _ref2.message,
152
- id = _ref2.id,
153
- tone = _ref2.tone;
156
+ var FieldMessage = function FieldMessage(_ref3) {
157
+ var message = _ref3.message,
158
+ id = _ref3.id,
159
+ tone = _ref3.tone;
154
160
  var textTone = messageToneMap[tone];
155
161
  var Icon = messageIconMap[tone];
156
162
  return /*#__PURE__*/jsxRuntime.jsxs(box.Box, {
@@ -170,9 +176,9 @@ var FieldMessage = function FieldMessage(_ref2) {
170
176
  });
171
177
  };
172
178
 
173
- function IndicatorContainer(_ref3) {
174
- var children = _ref3.children,
175
- props = _objectWithoutProperties(_ref3, _excluded);
179
+ function IndicatorContainer(_ref4) {
180
+ var children = _ref4.children,
181
+ props = _objectWithoutProperties(_ref4, _excluded);
176
182
 
177
183
  var _useTheme = theme.useTheme(),
178
184
  typography = _useTheme.typography,
package/dist/spark-web-field.cjs.prod.js CHANGED
@@ -3,8 +3,8 @@
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
6
  var _objectSpread = require('@babel/runtime/helpers/objectSpread2');
7
+ var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
8
8
  var css = require('@emotion/css');
9
9
  var a11y = require('@spark-web/a11y');
10
10
  var box = require('@spark-web/box');
@@ -12,7 +12,6 @@ var icon = require('@spark-web/icon');
12
12
  var stack = require('@spark-web/stack');
13
13
  var text = require('@spark-web/text');
14
14
  var theme = require('@spark-web/theme');
15
- var internal = require('@spark-web/utils/internal');
16
15
  var jsxRuntime = require('react/jsx-runtime');
17
16
 
18
17
  var FieldContext = /*#__PURE__*/react.createContext(null);
@@ -78,35 +77,31 @@ var Field = /*#__PURE__*/react.forwardRef(function (_ref, forwardedRef) {
78
77
  as: "label",
79
78
  htmlFor: inputId,
80
79
  children: /*#__PURE__*/jsxRuntime.jsxs(text.Text, {
81
- inline: true,
82
80
  tone: disabled ? 'disabled' : 'neutral',
83
81
  weight: "semibold",
84
82
  children: [label, ' ', secondaryLabel && /*#__PURE__*/jsxRuntime.jsx(text.Text, {
85
83
  inline: true,
86
84
  tone: disabled ? 'disabled' : 'muted',
85
+ weight: "regular",
87
86
  children: secondaryLabel
88
87
  })]
89
88
  })
90
89
  }),
91
90
  'reserve-space': /*#__PURE__*/jsxRuntime.jsxs(react.Fragment, {
92
91
  children: [hiddenLabel, /*#__PURE__*/jsxRuntime.jsx(text.Text, {
93
- inline: true,
94
92
  "aria-hidden": true,
95
93
  children: "\xA0"
96
94
  })]
97
95
  })
98
96
  };
97
+ var LabelWrapper = labelVisibility === 'hidden' ? react.Fragment : FieldLabelWrapper;
99
98
  return /*#__PURE__*/jsxRuntime.jsx(FieldContextProvider, {
100
99
  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",
100
+ children: /*#__PURE__*/jsxRuntime.jsxs(stack.Stack, {
101
+ ref: forwardedRef,
102
+ data: data,
103
+ gap: "medium",
104
+ children: [/*#__PURE__*/jsxRuntime.jsxs(LabelWrapper, {
110
105
  children: [labelElement[labelVisibility], adornment]
111
106
  }), description && /*#__PURE__*/jsxRuntime.jsx(text.Text, {
112
107
  tone: "muted",
@@ -118,7 +113,7 @@ var Field = /*#__PURE__*/react.forwardRef(function (_ref, forwardedRef) {
118
113
  id: messageId,
119
114
  message: message
120
115
  })]
121
- }))
116
+ })
122
117
  });
123
118
  });
124
119
  Field.displayName = 'Field'; // Utils
@@ -136,6 +131,17 @@ function useFieldIds(id) {
136
131
  } // Styled components
137
132
  // ------------------------------
138
133
 
134
+ function FieldLabelWrapper(_ref2) {
135
+ var children = _ref2.children;
136
+ return /*#__PURE__*/jsxRuntime.jsx(box.Box, {
137
+ display: "flex",
138
+ alignItems: "center",
139
+ justifyContent: "spaceBetween",
140
+ gap: "large",
141
+ children: children
142
+ });
143
+ }
144
+
139
145
  var messageToneMap = {
140
146
  critical: 'critical',
141
147
  neutral: 'muted',
@@ -147,10 +153,10 @@ var messageIconMap = {
147
153
  neutral: null,
148
154
  positive: icon.CheckCircleIcon
149
155
  };
150
- var FieldMessage = function FieldMessage(_ref2) {
151
- var message = _ref2.message,
152
- id = _ref2.id,
153
- tone = _ref2.tone;
156
+ var FieldMessage = function FieldMessage(_ref3) {
157
+ var message = _ref3.message,
158
+ id = _ref3.id,
159
+ tone = _ref3.tone;
154
160
  var textTone = messageToneMap[tone];
155
161
  var Icon = messageIconMap[tone];
156
162
  return /*#__PURE__*/jsxRuntime.jsxs(box.Box, {
@@ -170,9 +176,9 @@ var FieldMessage = function FieldMessage(_ref2) {
170
176
  });
171
177
  };
172
178
 
173
- function IndicatorContainer(_ref3) {
174
- var children = _ref3.children,
175
- props = _objectWithoutProperties(_ref3, _excluded);
179
+ function IndicatorContainer(_ref4) {
180
+ var children = _ref4.children,
181
+ props = _objectWithoutProperties(_ref4, _excluded);
176
182
 
177
183
  var _useTheme = theme.useTheme(),
178
184
  typography = _useTheme.typography,
package/dist/spark-web-field.esm.js CHANGED
@@ -1,6 +1,6 @@
1
1
  import { createContext, useContext, forwardRef, Fragment } from 'react';
2
- import _objectWithoutProperties from '@babel/runtime/helpers/esm/objectWithoutProperties';
3
2
  import _objectSpread from '@babel/runtime/helpers/esm/objectSpread2';
3
+ import _objectWithoutProperties from '@babel/runtime/helpers/esm/objectWithoutProperties';
4
4
  import { css } from '@emotion/css';
5
5
  import { mergeIds, useId, composeId, VisuallyHidden } from '@spark-web/a11y';
6
6
  import { Box } from '@spark-web/box';
@@ -8,7 +8,6 @@ import { ExclamationCircleIcon, CheckCircleIcon } from '@spark-web/icon';
8
8
  import { Stack } from '@spark-web/stack';
9
9
  import { Text } from '@spark-web/text';
10
10
  import { useTheme } from '@spark-web/theme';
11
- import { buildDataAttributes } from '@spark-web/utils/internal';
12
11
  import { jsx, jsxs } from 'react/jsx-runtime';
13
12
 
14
13
  var FieldContext = /*#__PURE__*/createContext(null);
@@ -74,35 +73,31 @@ var Field = /*#__PURE__*/forwardRef(function (_ref, forwardedRef) {
74
73
  as: "label",
75
74
  htmlFor: inputId,
76
75
  children: /*#__PURE__*/jsxs(Text, {
77
- inline: true,
78
76
  tone: disabled ? 'disabled' : 'neutral',
79
77
  weight: "semibold",
80
78
  children: [label, ' ', secondaryLabel && /*#__PURE__*/jsx(Text, {
81
79
  inline: true,
82
80
  tone: disabled ? 'disabled' : 'muted',
81
+ weight: "regular",
83
82
  children: secondaryLabel
84
83
  })]
85
84
  })
86
85
  }),
87
86
  'reserve-space': /*#__PURE__*/jsxs(Fragment, {
88
87
  children: [hiddenLabel, /*#__PURE__*/jsx(Text, {
89
- inline: true,
90
88
  "aria-hidden": true,
91
89
  children: "\xA0"
92
90
  })]
93
91
  })
94
92
  };
93
+ var LabelWrapper = labelVisibility === 'hidden' ? Fragment : FieldLabelWrapper;
95
94
  return /*#__PURE__*/jsx(FieldContextProvider, {
96
95
  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",
96
+ children: /*#__PURE__*/jsxs(Stack, {
97
+ ref: forwardedRef,
98
+ data: data,
99
+ gap: "medium",
100
+ children: [/*#__PURE__*/jsxs(LabelWrapper, {
106
101
  children: [labelElement[labelVisibility], adornment]
107
102
  }), description && /*#__PURE__*/jsx(Text, {
108
103
  tone: "muted",
@@ -114,7 +109,7 @@ var Field = /*#__PURE__*/forwardRef(function (_ref, forwardedRef) {
114
109
  id: messageId,
115
110
  message: message
116
111
  })]
117
- }))
112
+ })
118
113
  });
119
114
  });
120
115
  Field.displayName = 'Field'; // Utils
@@ -132,6 +127,17 @@ function useFieldIds(id) {
132
127
  } // Styled components
133
128
  // ------------------------------
134
129
 
130
+ function FieldLabelWrapper(_ref2) {
131
+ var children = _ref2.children;
132
+ return /*#__PURE__*/jsx(Box, {
133
+ display: "flex",
134
+ alignItems: "center",
135
+ justifyContent: "spaceBetween",
136
+ gap: "large",
137
+ children: children
138
+ });
139
+ }
140
+
135
141
  var messageToneMap = {
136
142
  critical: 'critical',
137
143
  neutral: 'muted',
@@ -143,10 +149,10 @@ var messageIconMap = {
143
149
  neutral: null,
144
150
  positive: CheckCircleIcon
145
151
  };
146
- var FieldMessage = function FieldMessage(_ref2) {
147
- var message = _ref2.message,
148
- id = _ref2.id,
149
- tone = _ref2.tone;
152
+ var FieldMessage = function FieldMessage(_ref3) {
153
+ var message = _ref3.message,
154
+ id = _ref3.id,
155
+ tone = _ref3.tone;
150
156
  var textTone = messageToneMap[tone];
151
157
  var Icon = messageIconMap[tone];
152
158
  return /*#__PURE__*/jsxs(Box, {
@@ -166,9 +172,9 @@ var FieldMessage = function FieldMessage(_ref2) {
166
172
  });
167
173
  };
168
174
 
169
- function IndicatorContainer(_ref3) {
170
- var children = _ref3.children,
171
- props = _objectWithoutProperties(_ref3, _excluded);
175
+ function IndicatorContainer(_ref4) {
176
+ var children = _ref4.children,
177
+ props = _objectWithoutProperties(_ref4, _excluded);
172
178
 
173
179
  var _useTheme = useTheme(),
174
180
  typography = _useTheme.typography,
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@spark-web/field",
3
- "version": "2.0.0",
3
+ "version": "2.0.1",
4
4
  "license": "MIT",
5
5
  "main": "dist/spark-web-field.cjs.js",
6
6
  "module": "dist/spark-web-field.esm.js",
@@ -16,7 +16,7 @@
16
16
  "@spark-web/stack": "^1.0.5",
17
17
  "@spark-web/text": "^1.0.5",
18
18
  "@spark-web/theme": "^3.0.1",
19
- "@spark-web/utils": "^1.1.3"
19
+ "@spark-web/utils": "^1.1.4"
20
20
  },
21
21
  "devDependencies": {
22
22
  "@types/react": "^17.0.12",