@spark-web/field 1.1.0 → 3.0.0

package/dist/declarations/src/context.d.ts

@@ -1,10 +1,14 @@
 /// <reference types="react" />
-export declare type FieldContextType = {
-    'aria-describedby'?: string;
-    id: string;
+export declare type FieldState = {
     disabled: boolean;
     invalid: boolean;
 };
+export declare type InputPropsDerivedFromField = {
+    'aria-describedby'?: string;
+    'aria-invalid': true | undefined;
+    id: string;
+};
+export declare type FieldContextType = [FieldState, InputPropsDerivedFromField];
 export declare const FieldContext: import("react").Context<FieldContextType | null>;
 export declare const FieldContextProvider: import("react").Provider<FieldContextType | null>;
 export declare const FIELD_CONTEXT_ERROR_MESSAGE = "Input components must be inside a `Field`.";

package/dist/declarations/src/index.d.ts

@@ -1,4 +1,4 @@
 export { FieldContextProvider, useFieldContext } from './context';
 export { Field, FieldMessage, useFieldIds } from './Field';
-export type { FieldContextType } from './context';
+export type { FieldContextType, FieldState, InputPropsDerivedFromField, } from './context';
 export type { FieldProps, Tone } from './Field';

package/dist/spark-web-field.cjs.dev.js

@@ -3,8 +3,6 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var react = require('react');
-var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
-var _objectSpread = require('@babel/runtime/helpers/objectSpread2');
 var css = require('@emotion/css');
 var a11y = require('@spark-web/a11y');
 var box = require('@spark-web/box');
@@ -12,7 +10,6 @@ var icon = require('@spark-web/icon');
 var stack = require('@spark-web/stack');
 var text = require('@spark-web/text');
 var theme = require('@spark-web/theme');
-var internal = require('@spark-web/utils/internal');
 var jsxRuntime = require('react/jsx-runtime');
 
 var FieldContext = /*#__PURE__*/react.createContext(null);
@@ -28,8 +25,6 @@ function useFieldContext() {
   return ctx;
 }
 
-var _excluded = ["children"];
-
 /**
  * Using a [context](https://reactjs.org/docs/context.html), the field
  * component connects the label, description, and message to the input element.
@@ -56,12 +51,15 @@ var Field = /*#__PURE__*/react.forwardRef(function (_ref, forwardedRef) {
       messageId = _useFieldIds.messageId; // field context
 
 
-  var fieldContext = {
-    'aria-describedby': a11y.mergeIds(message && messageId, description && descriptionId),
-    id: inputId,
+  var invalid = Boolean(message && tone === 'critical');
+  var fieldContext = [{
     disabled: disabled,
-    invalid: Boolean(message && tone === 'critical')
-  }; // label prep
+    invalid: invalid
+  }, {
+    'aria-describedby': a11y.mergeIds(message && messageId, description && descriptionId),
+    'aria-invalid': invalid || undefined,
+    id: inputId
+  }]; // label prep
 
   var hiddenLabel = /*#__PURE__*/jsxRuntime.jsxs(a11y.VisuallyHidden, {
     as: "label",
@@ -75,35 +73,31 @@ var Field = /*#__PURE__*/react.forwardRef(function (_ref, forwardedRef) {
       as: "label",
       htmlFor: inputId,
       children: /*#__PURE__*/jsxRuntime.jsxs(text.Text, {
-        inline: true,
         tone: disabled ? 'disabled' : 'neutral',
         weight: "semibold",
         children: [label, ' ', secondaryLabel && /*#__PURE__*/jsxRuntime.jsx(text.Text, {
           inline: true,
           tone: disabled ? 'disabled' : 'muted',
+          weight: "regular",
           children: secondaryLabel
         })]
       })
     }),
     'reserve-space': /*#__PURE__*/jsxRuntime.jsxs(react.Fragment, {
       children: [hiddenLabel, /*#__PURE__*/jsxRuntime.jsx(text.Text, {
-        inline: true,
         "aria-hidden": true,
         children: "\xA0"
       })]
     })
   };
+  var LabelWrapper = labelVisibility === 'hidden' ? react.Fragment : FieldLabelWrapper;
   return /*#__PURE__*/jsxRuntime.jsx(FieldContextProvider, {
     value: fieldContext,
-    children: /*#__PURE__*/jsxRuntime.jsxs(stack.Stack, _objectSpread(_objectSpread({
-      gap: labelVisibility === 'hidden' ? undefined : 'small',
-      ref: forwardedRef
-    }, data ? internal.buildDataAttributes(data) : null), {}, {
-      children: [/*#__PURE__*/jsxRuntime.jsxs(box.Box, {
-        display: "flex",
-        alignItems: "center",
-        justifyContent: "spaceBetween",
-        gap: "large",
+    children: /*#__PURE__*/jsxRuntime.jsxs(stack.Stack, {
+      ref: forwardedRef,
+      data: data,
+      gap: "medium",
+      children: [/*#__PURE__*/jsxRuntime.jsxs(LabelWrapper, {
         children: [labelElement[labelVisibility], adornment]
       }), description && /*#__PURE__*/jsxRuntime.jsx(text.Text, {
         tone: "muted",
@@ -115,7 +109,7 @@ var Field = /*#__PURE__*/react.forwardRef(function (_ref, forwardedRef) {
         id: messageId,
         message: message
       })]
-    }))
+    })
   });
 });
 Field.displayName = 'Field'; // Utils
@@ -133,6 +127,17 @@ function useFieldIds(id) {
 } // Styled components
 // ------------------------------
 
+function FieldLabelWrapper(_ref2) {
+  var children = _ref2.children;
+  return /*#__PURE__*/jsxRuntime.jsx(box.Box, {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "spaceBetween",
+    gap: "large",
+    children: children
+  });
+}
+
 var messageToneMap = {
   critical: 'critical',
   neutral: 'muted',
@@ -144,10 +149,10 @@ var messageIconMap = {
   neutral: null,
   positive: icon.CheckCircleIcon
 };
-var FieldMessage = function FieldMessage(_ref2) {
-  var message = _ref2.message,
-      id = _ref2.id,
-      tone = _ref2.tone;
+var FieldMessage = function FieldMessage(_ref3) {
+  var message = _ref3.message,
+      id = _ref3.id,
+      tone = _ref3.tone;
   var textTone = messageToneMap[tone];
   var Icon = messageIconMap[tone];
   return /*#__PURE__*/jsxRuntime.jsxs(box.Box, {
@@ -167,9 +172,8 @@ var FieldMessage = function FieldMessage(_ref2) {
   });
 };
 
-function IndicatorContainer(_ref3) {
-  var children = _ref3.children,
-      props = _objectWithoutProperties(_ref3, _excluded);
+function IndicatorContainer(_ref4) {
+  var children = _ref4.children;
 
   var _useTheme = theme.useTheme(),
       typography = _useTheme.typography,
@@ -186,16 +190,15 @@ function IndicatorContainer(_ref3) {
       height: tablet.capHeight
     }
   });
-  return /*#__PURE__*/jsxRuntime.jsx(box.Box, _objectSpread(_objectSpread({
+  return /*#__PURE__*/jsxRuntime.jsx(box.Box, {
     display: "flex",
     alignItems: "center",
     "aria-hidden": true,
     cursor: "default",
     flexShrink: 0,
-    className: css.css(responsiveStyles)
-  }, props), {}, {
+    className: css.css(responsiveStyles),
     children: children
-  }));
+  });
 }
 
 exports.Field = Field;

package/dist/spark-web-field.cjs.prod.js

@@ -3,8 +3,6 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var react = require('react');
-var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
-var _objectSpread = require('@babel/runtime/helpers/objectSpread2');
 var css = require('@emotion/css');
 var a11y = require('@spark-web/a11y');
 var box = require('@spark-web/box');
@@ -12,7 +10,6 @@ var icon = require('@spark-web/icon');
 var stack = require('@spark-web/stack');
 var text = require('@spark-web/text');
 var theme = require('@spark-web/theme');
-var internal = require('@spark-web/utils/internal');
 var jsxRuntime = require('react/jsx-runtime');
 
 var FieldContext = /*#__PURE__*/react.createContext(null);
@@ -28,8 +25,6 @@ function useFieldContext() {
   return ctx;
 }
 
-var _excluded = ["children"];
-
 /**
  * Using a [context](https://reactjs.org/docs/context.html), the field
  * component connects the label, description, and message to the input element.
@@ -56,12 +51,15 @@ var Field = /*#__PURE__*/react.forwardRef(function (_ref, forwardedRef) {
       messageId = _useFieldIds.messageId; // field context
 
 
-  var fieldContext = {
-    'aria-describedby': a11y.mergeIds(message && messageId, description && descriptionId),
-    id: inputId,
+  var invalid = Boolean(message && tone === 'critical');
+  var fieldContext = [{
     disabled: disabled,
-    invalid: Boolean(message && tone === 'critical')
-  }; // label prep
+    invalid: invalid
+  }, {
+    'aria-describedby': a11y.mergeIds(message && messageId, description && descriptionId),
+    'aria-invalid': invalid || undefined,
+    id: inputId
+  }]; // label prep
 
   var hiddenLabel = /*#__PURE__*/jsxRuntime.jsxs(a11y.VisuallyHidden, {
     as: "label",
@@ -75,35 +73,31 @@ var Field = /*#__PURE__*/react.forwardRef(function (_ref, forwardedRef) {
       as: "label",
       htmlFor: inputId,
       children: /*#__PURE__*/jsxRuntime.jsxs(text.Text, {
-        inline: true,
         tone: disabled ? 'disabled' : 'neutral',
         weight: "semibold",
         children: [label, ' ', secondaryLabel && /*#__PURE__*/jsxRuntime.jsx(text.Text, {
           inline: true,
           tone: disabled ? 'disabled' : 'muted',
+          weight: "regular",
           children: secondaryLabel
         })]
       })
     }),
     'reserve-space': /*#__PURE__*/jsxRuntime.jsxs(react.Fragment, {
       children: [hiddenLabel, /*#__PURE__*/jsxRuntime.jsx(text.Text, {
-        inline: true,
         "aria-hidden": true,
         children: "\xA0"
       })]
     })
   };
+  var LabelWrapper = labelVisibility === 'hidden' ? react.Fragment : FieldLabelWrapper;
   return /*#__PURE__*/jsxRuntime.jsx(FieldContextProvider, {
     value: fieldContext,
-    children: /*#__PURE__*/jsxRuntime.jsxs(stack.Stack, _objectSpread(_objectSpread({
-      gap: labelVisibility === 'hidden' ? undefined : 'small',
-      ref: forwardedRef
-    }, data ? internal.buildDataAttributes(data) : null), {}, {
-      children: [/*#__PURE__*/jsxRuntime.jsxs(box.Box, {
-        display: "flex",
-        alignItems: "center",
-        justifyContent: "spaceBetween",
-        gap: "large",
+    children: /*#__PURE__*/jsxRuntime.jsxs(stack.Stack, {
+      ref: forwardedRef,
+      data: data,
+      gap: "medium",
+      children: [/*#__PURE__*/jsxRuntime.jsxs(LabelWrapper, {
         children: [labelElement[labelVisibility], adornment]
       }), description && /*#__PURE__*/jsxRuntime.jsx(text.Text, {
         tone: "muted",
@@ -115,7 +109,7 @@ var Field = /*#__PURE__*/react.forwardRef(function (_ref, forwardedRef) {
         id: messageId,
         message: message
       })]
-    }))
+    })
   });
 });
 Field.displayName = 'Field'; // Utils
@@ -133,6 +127,17 @@ function useFieldIds(id) {
 } // Styled components
 // ------------------------------
 
+function FieldLabelWrapper(_ref2) {
+  var children = _ref2.children;
+  return /*#__PURE__*/jsxRuntime.jsx(box.Box, {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "spaceBetween",
+    gap: "large",
+    children: children
+  });
+}
+
 var messageToneMap = {
   critical: 'critical',
   neutral: 'muted',
@@ -144,10 +149,10 @@ var messageIconMap = {
   neutral: null,
   positive: icon.CheckCircleIcon
 };
-var FieldMessage = function FieldMessage(_ref2) {
-  var message = _ref2.message,
-      id = _ref2.id,
-      tone = _ref2.tone;
+var FieldMessage = function FieldMessage(_ref3) {
+  var message = _ref3.message,
+      id = _ref3.id,
+      tone = _ref3.tone;
   var textTone = messageToneMap[tone];
   var Icon = messageIconMap[tone];
   return /*#__PURE__*/jsxRuntime.jsxs(box.Box, {
@@ -167,9 +172,8 @@ var FieldMessage = function FieldMessage(_ref2) {
   });
 };
 
-function IndicatorContainer(_ref3) {
-  var children = _ref3.children,
-      props = _objectWithoutProperties(_ref3, _excluded);
+function IndicatorContainer(_ref4) {
+  var children = _ref4.children;
 
   var _useTheme = theme.useTheme(),
       typography = _useTheme.typography,
@@ -186,16 +190,15 @@ function IndicatorContainer(_ref3) {
       height: tablet.capHeight
     }
   });
-  return /*#__PURE__*/jsxRuntime.jsx(box.Box, _objectSpread(_objectSpread({
+  return /*#__PURE__*/jsxRuntime.jsx(box.Box, {
     display: "flex",
     alignItems: "center",
     "aria-hidden": true,
     cursor: "default",
     flexShrink: 0,
-    className: css.css(responsiveStyles)
-  }, props), {}, {
+    className: css.css(responsiveStyles),
     children: children
-  }));
+  });
 }
 
 exports.Field = Field;

package/dist/spark-web-field.esm.js

@@ -1,6 +1,4 @@
 import { createContext, useContext, forwardRef, Fragment } from 'react';
-import _objectWithoutProperties from '@babel/runtime/helpers/esm/objectWithoutProperties';
-import _objectSpread from '@babel/runtime/helpers/esm/objectSpread2';
 import { css } from '@emotion/css';
 import { mergeIds, useId, composeId, VisuallyHidden } from '@spark-web/a11y';
 import { Box } from '@spark-web/box';
@@ -8,7 +6,6 @@ import { ExclamationCircleIcon, CheckCircleIcon } from '@spark-web/icon';
 import { Stack } from '@spark-web/stack';
 import { Text } from '@spark-web/text';
 import { useTheme } from '@spark-web/theme';
-import { buildDataAttributes } from '@spark-web/utils/internal';
 import { jsx, jsxs } from 'react/jsx-runtime';
 
 var FieldContext = /*#__PURE__*/createContext(null);
@@ -24,8 +21,6 @@ function useFieldContext() {
   return ctx;
 }
 
-var _excluded = ["children"];
-
 /**
  * Using a [context](https://reactjs.org/docs/context.html), the field
  * component connects the label, description, and message to the input element.
@@ -52,12 +47,15 @@ var Field = /*#__PURE__*/forwardRef(function (_ref, forwardedRef) {
       messageId = _useFieldIds.messageId; // field context
 
 
-  var fieldContext = {
-    'aria-describedby': mergeIds(message && messageId, description && descriptionId),
-    id: inputId,
+  var invalid = Boolean(message && tone === 'critical');
+  var fieldContext = [{
     disabled: disabled,
-    invalid: Boolean(message && tone === 'critical')
-  }; // label prep
+    invalid: invalid
+  }, {
+    'aria-describedby': mergeIds(message && messageId, description && descriptionId),
+    'aria-invalid': invalid || undefined,
+    id: inputId
+  }]; // label prep
 
   var hiddenLabel = /*#__PURE__*/jsxs(VisuallyHidden, {
     as: "label",
@@ -71,35 +69,31 @@ var Field = /*#__PURE__*/forwardRef(function (_ref, forwardedRef) {
       as: "label",
       htmlFor: inputId,
       children: /*#__PURE__*/jsxs(Text, {
-        inline: true,
         tone: disabled ? 'disabled' : 'neutral',
         weight: "semibold",
         children: [label, ' ', secondaryLabel && /*#__PURE__*/jsx(Text, {
           inline: true,
           tone: disabled ? 'disabled' : 'muted',
+          weight: "regular",
           children: secondaryLabel
         })]
       })
     }),
     'reserve-space': /*#__PURE__*/jsxs(Fragment, {
       children: [hiddenLabel, /*#__PURE__*/jsx(Text, {
-        inline: true,
         "aria-hidden": true,
         children: "\xA0"
       })]
     })
   };
+  var LabelWrapper = labelVisibility === 'hidden' ? Fragment : FieldLabelWrapper;
   return /*#__PURE__*/jsx(FieldContextProvider, {
     value: fieldContext,
-    children: /*#__PURE__*/jsxs(Stack, _objectSpread(_objectSpread({
-      gap: labelVisibility === 'hidden' ? undefined : 'small',
-      ref: forwardedRef
-    }, data ? buildDataAttributes(data) : null), {}, {
-      children: [/*#__PURE__*/jsxs(Box, {
-        display: "flex",
-        alignItems: "center",
-        justifyContent: "spaceBetween",
-        gap: "large",
+    children: /*#__PURE__*/jsxs(Stack, {
+      ref: forwardedRef,
+      data: data,
+      gap: "medium",
+      children: [/*#__PURE__*/jsxs(LabelWrapper, {
         children: [labelElement[labelVisibility], adornment]
       }), description && /*#__PURE__*/jsx(Text, {
         tone: "muted",
@@ -111,7 +105,7 @@ var Field = /*#__PURE__*/forwardRef(function (_ref, forwardedRef) {
         id: messageId,
         message: message
       })]
-    }))
+    })
   });
 });
 Field.displayName = 'Field'; // Utils
@@ -129,6 +123,17 @@ function useFieldIds(id) {
 } // Styled components
 // ------------------------------
 
+function FieldLabelWrapper(_ref2) {
+  var children = _ref2.children;
+  return /*#__PURE__*/jsx(Box, {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "spaceBetween",
+    gap: "large",
+    children: children
+  });
+}
+
 var messageToneMap = {
   critical: 'critical',
   neutral: 'muted',
@@ -140,10 +145,10 @@ var messageIconMap = {
   neutral: null,
   positive: CheckCircleIcon
 };
-var FieldMessage = function FieldMessage(_ref2) {
-  var message = _ref2.message,
-      id = _ref2.id,
-      tone = _ref2.tone;
+var FieldMessage = function FieldMessage(_ref3) {
+  var message = _ref3.message,
+      id = _ref3.id,
+      tone = _ref3.tone;
   var textTone = messageToneMap[tone];
   var Icon = messageIconMap[tone];
   return /*#__PURE__*/jsxs(Box, {
@@ -163,9 +168,8 @@ var FieldMessage = function FieldMessage(_ref2) {
   });
 };
 
-function IndicatorContainer(_ref3) {
-  var children = _ref3.children,
-      props = _objectWithoutProperties(_ref3, _excluded);
+function IndicatorContainer(_ref4) {
+  var children = _ref4.children;
 
   var _useTheme = useTheme(),
       typography = _useTheme.typography,
@@ -182,16 +186,15 @@ function IndicatorContainer(_ref3) {
       height: tablet.capHeight
     }
   });
-  return /*#__PURE__*/jsx(Box, _objectSpread(_objectSpread({
+  return /*#__PURE__*/jsx(Box, {
     display: "flex",
     alignItems: "center",
     "aria-hidden": true,
     cursor: "default",
     flexShrink: 0,
-    className: css(responsiveStyles)
-  }, props), {}, {
+    className: css(responsiveStyles),
     children: children
-  }));
+  });
 }
 
 export { Field, FieldContextProvider, FieldMessage, useFieldContext, useFieldIds };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@spark-web/field",
-  "version": "1.1.0",
+  "version": "3.0.0",
   "license": "MIT",
   "main": "dist/spark-web-field.cjs.js",
   "module": "dist/spark-web-field.esm.js",
@@ -8,15 +8,15 @@
     "dist"
   ],
   "dependencies": {
-    "@babel/runtime": "^7.14.6",
-    "@emotion/css": "^11.7.1",
-    "@spark-web/a11y": "^1.0.4",
-    "@spark-web/box": "^1.0.4",
-    "@spark-web/icon": "^1.1.2",
-    "@spark-web/stack": "^1.0.4",
-    "@spark-web/text": "^1.0.4",
-    "@spark-web/theme": "^3.0.0",
-    "@spark-web/utils": "^1.1.2"
+    "@babel/runtime": "^7.18.0",
+    "@emotion/css": "^11.9.0",
+    "@spark-web/a11y": "^1.0.5",
+    "@spark-web/box": "^1.0.5",
+    "@spark-web/icon": "^1.1.3",
+    "@spark-web/stack": "^1.0.5",
+    "@spark-web/text": "^1.0.5",
+    "@spark-web/theme": "^3.0.1",
+    "@spark-web/utils": "^1.1.4"
   },
   "devDependencies": {
     "@types/react": "^17.0.12",