@spark-web/text-input 1.2.0 → 2.0.1

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

@@ -1,6 +1,6 @@
 export { InputAdornment } from './InputAdornment';
 export { InputContainer } from './InputContainer';
-export { TextInput, useInput } from './TextInput';
+export { TextInput, useInputStyles } from './TextInput';
 export type { AdornmentChild } from './childrenToAdornments';
 export type { InputContainerProps } from './InputContainer';
-export type { TextInputProps, UseInputProps } from './TextInput';
+export type { TextInputProps, UseInputStylesProps } from './TextInput';

package/dist/spark-web-text-input.cjs.dev.js

@@ -208,34 +208,43 @@ var TextInput = /*#__PURE__*/react.forwardRef(function (_ref, forwardedRef) {
       startAdornment = _childrenToAdornments.startAdornment,
       endAdornment = _childrenToAdornments.endAdornment;
 
+  var _useInputStyles = useInputStyles({
+    disabled: disabled,
+    invalid: invalid,
+    startAdornment: Boolean(startAdornment),
+    endAdornment: Boolean(endAdornment)
+  }),
+      _useInputStyles2 = _slicedToArray(_useInputStyles, 2),
+      boxProps = _useInputStyles2[0],
+      inputStyles = _useInputStyles2[1];
+
   return /*#__PURE__*/jsxRuntime.jsx(InputContainer, {
     display: "inline-flex",
     alignItems: "center",
     startAdornment: startAdornment,
     endAdornment: endAdornment,
-    children: /*#__PURE__*/jsxRuntime.jsx(box.Box, _objectSpread(_objectSpread(_objectSpread({}, consumerProps), a11yProps), {}, {
+    children: /*#__PURE__*/jsxRuntime.jsx(box.Box, _objectSpread(_objectSpread(_objectSpread(_objectSpread({}, boxProps), consumerProps), a11yProps), {}, {
       as: "input",
-      ref: forwardedRef,
+      className: css.css(inputStyles),
       data: data,
       disabled: disabled,
-      position: "relative" // Styles
-      ,
-      flex: 1,
-      height: "medium",
-      paddingX: "medium",
-      paddingLeft: startAdornment ? 'none' : 'medium',
-      paddingRight: endAdornment ? 'none' : 'medium',
-      className: css.css(useInput({
-        disabled: disabled,
-        invalid: invalid
-      }))
+      ref: forwardedRef
     }))
   });
 });
 TextInput.displayName = 'TextInput';
-var useInput = function useInput(_ref2) {
-  var disabled = _ref2.disabled;
+
+/**
+ * Returns a tuple where the first item is an object of props to spread onto the
+ * underlying Box component that our inputs are created with, and the second
+ * item is a CSS object to be passed to Emotion's `css` function
+ **/
+var useInputStyles = function useInputStyles(_ref2) {
+  var disabled = _ref2.disabled,
+      startAdornment = _ref2.startAdornment,
+      endAdornment = _ref2.endAdornment;
   var theme$1 = theme.useTheme();
+  var overflowStyles = text.useOverflowStrategy('truncate');
   var focusRingStyles = a11y.useFocusRing({
     always: true
   });
@@ -250,19 +259,30 @@ var useInput = function useInput(_ref2) {
       typographyStyles = _textStyles[0],
       responsiveStyles = _textStyles[1];
 
-  return _objectSpread(_objectSpread(_objectSpread({}, typographyStyles), responsiveStyles), {}, {
-    ':focus': {
-      outline: 'none'
-    },
+  return [{
+    flex: 1,
+    position: 'relative',
+    height: 'medium',
+    paddingLeft: startAdornment ? 'none' : 'medium',
+    paddingRight: endAdornment ? 'none' : 'medium',
+    shadow: 'small',
+    width: 'full'
+  }, _objectSpread(_objectSpread(_objectSpread(_objectSpread({}, typographyStyles), responsiveStyles), overflowStyles), {}, {
     ':enabled': {
       ':focus + [data-focus-indicator]': _objectSpread({
         borderColor: theme$1.border.color.fieldAccent
       }, focusRingStyles)
+    },
+    ':focus': {
+      outline: 'none'
+    },
+    '&[aria-invalid=true]': {
+      color: theme$1.color.foreground.muted
     }
-  });
+  })];
 };
 
 exports.InputAdornment = InputAdornment;
 exports.InputContainer = InputContainer;
 exports.TextInput = TextInput;
-exports.useInput = useInput;
+exports.useInputStyles = useInputStyles;

package/dist/spark-web-text-input.cjs.prod.js

@@ -208,34 +208,43 @@ var TextInput = /*#__PURE__*/react.forwardRef(function (_ref, forwardedRef) {
       startAdornment = _childrenToAdornments.startAdornment,
       endAdornment = _childrenToAdornments.endAdornment;
 
+  var _useInputStyles = useInputStyles({
+    disabled: disabled,
+    invalid: invalid,
+    startAdornment: Boolean(startAdornment),
+    endAdornment: Boolean(endAdornment)
+  }),
+      _useInputStyles2 = _slicedToArray(_useInputStyles, 2),
+      boxProps = _useInputStyles2[0],
+      inputStyles = _useInputStyles2[1];
+
   return /*#__PURE__*/jsxRuntime.jsx(InputContainer, {
     display: "inline-flex",
     alignItems: "center",
     startAdornment: startAdornment,
     endAdornment: endAdornment,
-    children: /*#__PURE__*/jsxRuntime.jsx(box.Box, _objectSpread(_objectSpread(_objectSpread({}, consumerProps), a11yProps), {}, {
+    children: /*#__PURE__*/jsxRuntime.jsx(box.Box, _objectSpread(_objectSpread(_objectSpread(_objectSpread({}, boxProps), consumerProps), a11yProps), {}, {
       as: "input",
-      ref: forwardedRef,
+      className: css.css(inputStyles),
       data: data,
       disabled: disabled,
-      position: "relative" // Styles
-      ,
-      flex: 1,
-      height: "medium",
-      paddingX: "medium",
-      paddingLeft: startAdornment ? 'none' : 'medium',
-      paddingRight: endAdornment ? 'none' : 'medium',
-      className: css.css(useInput({
-        disabled: disabled,
-        invalid: invalid
-      }))
+      ref: forwardedRef
     }))
   });
 });
 TextInput.displayName = 'TextInput';
-var useInput = function useInput(_ref2) {
-  var disabled = _ref2.disabled;
+
+/**
+ * Returns a tuple where the first item is an object of props to spread onto the
+ * underlying Box component that our inputs are created with, and the second
+ * item is a CSS object to be passed to Emotion's `css` function
+ **/
+var useInputStyles = function useInputStyles(_ref2) {
+  var disabled = _ref2.disabled,
+      startAdornment = _ref2.startAdornment,
+      endAdornment = _ref2.endAdornment;
   var theme$1 = theme.useTheme();
+  var overflowStyles = text.useOverflowStrategy('truncate');
   var focusRingStyles = a11y.useFocusRing({
     always: true
   });
@@ -250,19 +259,30 @@ var useInput = function useInput(_ref2) {
       typographyStyles = _textStyles[0],
       responsiveStyles = _textStyles[1];
 
-  return _objectSpread(_objectSpread(_objectSpread({}, typographyStyles), responsiveStyles), {}, {
-    ':focus': {
-      outline: 'none'
-    },
+  return [{
+    flex: 1,
+    position: 'relative',
+    height: 'medium',
+    paddingLeft: startAdornment ? 'none' : 'medium',
+    paddingRight: endAdornment ? 'none' : 'medium',
+    shadow: 'small',
+    width: 'full'
+  }, _objectSpread(_objectSpread(_objectSpread(_objectSpread({}, typographyStyles), responsiveStyles), overflowStyles), {}, {
     ':enabled': {
       ':focus + [data-focus-indicator]': _objectSpread({
         borderColor: theme$1.border.color.fieldAccent
       }, focusRingStyles)
+    },
+    ':focus': {
+      outline: 'none'
+    },
+    '&[aria-invalid=true]': {
+      color: theme$1.color.foreground.muted
     }
-  });
+  })];
 };
 
 exports.InputAdornment = InputAdornment;
 exports.InputContainer = InputContainer;
 exports.TextInput = TextInput;
-exports.useInput = useInput;
+exports.useInputStyles = useInputStyles;

package/dist/spark-web-text-input.esm.js

@@ -8,7 +8,7 @@ import _slicedToArray from '@babel/runtime/helpers/esm/slicedToArray';
 import _objectWithoutProperties from '@babel/runtime/helpers/esm/objectWithoutProperties';
 import { css } from '@emotion/css';
 import { useFocusRing } from '@spark-web/a11y';
-import { useText } from '@spark-web/text';
+import { useOverflowStrategy, useText } from '@spark-web/text';
 
 /**
  * Components like the `SelectInput` may subscribe to the adornment context and
@@ -204,34 +204,43 @@ var TextInput = /*#__PURE__*/forwardRef(function (_ref, forwardedRef) {
       startAdornment = _childrenToAdornments.startAdornment,
       endAdornment = _childrenToAdornments.endAdornment;
 
+  var _useInputStyles = useInputStyles({
+    disabled: disabled,
+    invalid: invalid,
+    startAdornment: Boolean(startAdornment),
+    endAdornment: Boolean(endAdornment)
+  }),
+      _useInputStyles2 = _slicedToArray(_useInputStyles, 2),
+      boxProps = _useInputStyles2[0],
+      inputStyles = _useInputStyles2[1];
+
   return /*#__PURE__*/jsx(InputContainer, {
     display: "inline-flex",
     alignItems: "center",
     startAdornment: startAdornment,
     endAdornment: endAdornment,
-    children: /*#__PURE__*/jsx(Box, _objectSpread(_objectSpread(_objectSpread({}, consumerProps), a11yProps), {}, {
+    children: /*#__PURE__*/jsx(Box, _objectSpread(_objectSpread(_objectSpread(_objectSpread({}, boxProps), consumerProps), a11yProps), {}, {
       as: "input",
-      ref: forwardedRef,
+      className: css(inputStyles),
       data: data,
       disabled: disabled,
-      position: "relative" // Styles
-      ,
-      flex: 1,
-      height: "medium",
-      paddingX: "medium",
-      paddingLeft: startAdornment ? 'none' : 'medium',
-      paddingRight: endAdornment ? 'none' : 'medium',
-      className: css(useInput({
-        disabled: disabled,
-        invalid: invalid
-      }))
+      ref: forwardedRef
     }))
   });
 });
 TextInput.displayName = 'TextInput';
-var useInput = function useInput(_ref2) {
-  var disabled = _ref2.disabled;
+
+/**
+ * Returns a tuple where the first item is an object of props to spread onto the
+ * underlying Box component that our inputs are created with, and the second
+ * item is a CSS object to be passed to Emotion's `css` function
+ **/
+var useInputStyles = function useInputStyles(_ref2) {
+  var disabled = _ref2.disabled,
+      startAdornment = _ref2.startAdornment,
+      endAdornment = _ref2.endAdornment;
   var theme = useTheme();
+  var overflowStyles = useOverflowStrategy('truncate');
   var focusRingStyles = useFocusRing({
     always: true
   });
@@ -246,16 +255,27 @@ var useInput = function useInput(_ref2) {
       typographyStyles = _textStyles[0],
       responsiveStyles = _textStyles[1];
 
-  return _objectSpread(_objectSpread(_objectSpread({}, typographyStyles), responsiveStyles), {}, {
-    ':focus': {
-      outline: 'none'
-    },
+  return [{
+    flex: 1,
+    position: 'relative',
+    height: 'medium',
+    paddingLeft: startAdornment ? 'none' : 'medium',
+    paddingRight: endAdornment ? 'none' : 'medium',
+    shadow: 'small',
+    width: 'full'
+  }, _objectSpread(_objectSpread(_objectSpread(_objectSpread({}, typographyStyles), responsiveStyles), overflowStyles), {}, {
     ':enabled': {
       ':focus + [data-focus-indicator]': _objectSpread({
         borderColor: theme.border.color.fieldAccent
       }, focusRingStyles)
+    },
+    ':focus': {
+      outline: 'none'
+    },
+    '&[aria-invalid=true]': {
+      color: theme.color.foreground.muted
     }
-  });
+  })];
 };
 
-export { InputAdornment, InputContainer, TextInput, useInput };
+export { InputAdornment, InputContainer, TextInput, useInputStyles };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@spark-web/text-input",
-  "version": "1.2.0",
+  "version": "2.0.1",
   "license": "MIT",
   "main": "dist/spark-web-text-input.cjs.js",
   "module": "dist/spark-web-text-input.esm.js",
@@ -8,20 +8,21 @@
     "dist"
   ],
   "dependencies": {
-    "@babel/runtime": "^7.18.0",
+    "@babel/runtime": "^7.18.9",
     "@emotion/css": "^11.9.0",
-    "@spark-web/a11y": "^1.0.5",
-    "@spark-web/box": "^1.0.5",
-    "@spark-web/field": "^2.0.0",
-    "@spark-web/text": "^1.0.5",
-    "@spark-web/theme": "^3.0.1",
-    "@spark-web/utils": "^1.1.3"
+    "@spark-web/a11y": "^1.2.0",
+    "@spark-web/box": "^1.0.7",
+    "@spark-web/text": "^1.0.7",
+    "@spark-web/theme": "^3.0.3",
+    "@spark-web/utils": "^1.2.0"
   },
   "devDependencies": {
+    "@spark-web/field": "^3.0.3",
     "@types/react": "^17.0.12",
     "react": "^17.0.2"
   },
   "peerDependencies": {
+    "@spark-web/field": "^3.0.3",
     "react": ">=17.0.2"
   },
   "engines": {