@spark-web/text-input 1.1.0 → 1.2.1

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

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

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

@@ -67,6 +67,7 @@ var InputAdornment = function InputAdornment(_ref) {
       paddingLeft: paddingLeft,
       paddingRight: paddingRight,
       children: /*#__PURE__*/jsxRuntime.jsx(box.Box, {
+        display: "flex",
         alignItems: "center",
         justifyContent: "center",
         style: {
@@ -111,6 +112,51 @@ var FieldAdornment = function FieldAdornment(_ref2) {
   });
 };
 
+var _excluded$1 = ["children", "startAdornment", "endAdornment"];
+var InputContainer = function InputContainer(_ref) {
+  var children = _ref.children,
+      startAdornment = _ref.startAdornment,
+      endAdornment = _ref.endAdornment,
+      boxProps = _objectWithoutProperties(_ref, _excluded$1);
+
+  var _useFieldContext = field.useFieldContext(),
+      _useFieldContext2 = _slicedToArray(_useFieldContext, 1),
+      _useFieldContext2$ = _useFieldContext2[0],
+      disabled = _useFieldContext2$.disabled,
+      invalid = _useFieldContext2$.invalid;
+
+  return /*#__PURE__*/jsxRuntime.jsxs(box.Box, _objectSpread(_objectSpread({
+    position: "relative",
+    background: disabled ? 'inputDisabled' : 'input'
+  }, boxProps), {}, {
+    children: [startAdornment, children, /*#__PURE__*/jsxRuntime.jsx(FocusIndicator, {
+      invalid: invalid
+    }), endAdornment]
+  }));
+};
+
+var FocusIndicator = function FocusIndicator(_ref2) {
+  var invalid = _ref2.invalid;
+  return /*#__PURE__*/jsxRuntime.jsx(box.Box, {
+    "aria-hidden": "true",
+    as: "span",
+    data: {
+      'focus-indicator': 'true'
+    } // Styles
+    ,
+    border: invalid ? 'critical' : 'field',
+    borderRadius: "small",
+    position: "absolute",
+    bottom: 0,
+    left: 0,
+    right: 0,
+    top: 0,
+    className: css.css({
+      pointerEvents: 'none'
+    })
+  });
+};
+
 /**
  * Map children for placement within the `TextInput` flex container. Ensures that
  * placeholders are provided for unused placements.
@@ -143,8 +189,7 @@ var childrenToAdornments = function childrenToAdornments(children) {
   };
 };
 
-var _excluded = ["children", "data"],
-    _excluded2 = ["disabled", "invalid"];
+var _excluded = ["children", "data"];
 
 /** Organize and emphasize information quickly and effectively in a list of text elements. */
 var TextInput = /*#__PURE__*/react.forwardRef(function (_ref, forwardedRef) {
@@ -153,31 +198,27 @@ var TextInput = /*#__PURE__*/react.forwardRef(function (_ref, forwardedRef) {
       consumerProps = _objectWithoutProperties(_ref, _excluded);
 
   var _useFieldContext = field.useFieldContext(),
-      disabled = _useFieldContext.disabled,
-      invalid = _useFieldContext.invalid,
-      a11yProps = _objectWithoutProperties(_useFieldContext, _excluded2);
+      _useFieldContext2 = _slicedToArray(_useFieldContext, 2),
+      _useFieldContext2$ = _useFieldContext2[0],
+      disabled = _useFieldContext2$.disabled,
+      invalid = _useFieldContext2$.invalid,
+      a11yProps = _useFieldContext2[1];
 
   var _childrenToAdornments = childrenToAdornments(children),
       startAdornment = _childrenToAdornments.startAdornment,
       endAdornment = _childrenToAdornments.endAdornment;
 
-  return /*#__PURE__*/jsxRuntime.jsxs(box.Box, {
-    background: disabled ? 'inputDisabled' : 'input',
-    border: invalid ? 'critical' : 'field',
-    borderRadius: "small",
+  return /*#__PURE__*/jsxRuntime.jsx(InputContainer, {
     display: "inline-flex",
     alignItems: "center",
-    flexDirection: "row",
-    height: "medium",
-    marginY: "none",
-    className: css.css(useInput({
-      disabled: disabled,
-      invalid: invalid
-    })),
-    children: [startAdornment, /*#__PURE__*/jsxRuntime.jsx(box.Box, _objectSpread(_objectSpread({
+    startAdornment: startAdornment,
+    endAdornment: endAdornment,
+    children: /*#__PURE__*/jsxRuntime.jsx(box.Box, _objectSpread(_objectSpread(_objectSpread({}, consumerProps), a11yProps), {}, {
       as: "input",
       ref: forwardedRef,
-      disabled: disabled // Styles
+      data: data,
+      disabled: disabled,
+      position: "relative" // Styles
       ,
       flex: 1,
       height: "medium",
@@ -186,18 +227,14 @@ var TextInput = /*#__PURE__*/react.forwardRef(function (_ref, forwardedRef) {
       paddingRight: endAdornment ? 'none' : 'medium',
       className: css.css(useInput({
         disabled: disabled,
-        invalid: invalid,
-        isNested: true
-      })),
-      data: data
-    }, a11yProps), consumerProps)), endAdornment]
+        invalid: invalid
+      }))
+    }))
   });
 });
 TextInput.displayName = 'TextInput';
 var useInput = function useInput(_ref2) {
-  var disabled = _ref2.disabled,
-      _ref2$isNested = _ref2.isNested,
-      isNested = _ref2$isNested === void 0 ? false : _ref2$isNested;
+  var disabled = _ref2.disabled;
   var theme$1 = theme.useTheme();
   var focusRingStyles = a11y.useFocusRing({
     always: true
@@ -213,27 +250,19 @@ var useInput = function useInput(_ref2) {
       typographyStyles = _textStyles[0],
       responsiveStyles = _textStyles[1];
 
-  return _objectSpread(_objectSpread(_objectSpread({}, typographyStyles), responsiveStyles), isNested ? {
+  return _objectSpread(_objectSpread(_objectSpread({}, typographyStyles), responsiveStyles), {}, {
     ':focus': {
-      // This removes the nested input outline visibility since
-      // the wrapper will be outlined, but still visibly focusable
-      // to windows high contrast mode users.
-      // @see https://tailwindcss.com/docs/outline-style#removing-outlines
-      outline: '2px solid transparent',
-      outlineOffset: '2px'
-    }
-  } : {
+      outline: 'none'
+    },
     ':enabled': {
-      '&:focus': _objectSpread(_objectSpread({}, focusRingStyles), {}, {
+      ':focus + [data-focus-indicator]': _objectSpread({
         borderColor: theme$1.border.color.fieldAccent
-      })
-    },
-    ':focus-within': _objectSpread(_objectSpread({}, focusRingStyles), {}, {
-      borderColor: theme$1.border.color.fieldAccent
-    })
+      }, focusRingStyles)
+    }
   });
 };
 
 exports.InputAdornment = InputAdornment;
+exports.InputContainer = InputContainer;
 exports.TextInput = TextInput;
 exports.useInput = useInput;

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

@@ -67,6 +67,7 @@ var InputAdornment = function InputAdornment(_ref) {
       paddingLeft: paddingLeft,
       paddingRight: paddingRight,
       children: /*#__PURE__*/jsxRuntime.jsx(box.Box, {
+        display: "flex",
         alignItems: "center",
         justifyContent: "center",
         style: {
@@ -111,6 +112,51 @@ var FieldAdornment = function FieldAdornment(_ref2) {
   });
 };
 
+var _excluded$1 = ["children", "startAdornment", "endAdornment"];
+var InputContainer = function InputContainer(_ref) {
+  var children = _ref.children,
+      startAdornment = _ref.startAdornment,
+      endAdornment = _ref.endAdornment,
+      boxProps = _objectWithoutProperties(_ref, _excluded$1);
+
+  var _useFieldContext = field.useFieldContext(),
+      _useFieldContext2 = _slicedToArray(_useFieldContext, 1),
+      _useFieldContext2$ = _useFieldContext2[0],
+      disabled = _useFieldContext2$.disabled,
+      invalid = _useFieldContext2$.invalid;
+
+  return /*#__PURE__*/jsxRuntime.jsxs(box.Box, _objectSpread(_objectSpread({
+    position: "relative",
+    background: disabled ? 'inputDisabled' : 'input'
+  }, boxProps), {}, {
+    children: [startAdornment, children, /*#__PURE__*/jsxRuntime.jsx(FocusIndicator, {
+      invalid: invalid
+    }), endAdornment]
+  }));
+};
+
+var FocusIndicator = function FocusIndicator(_ref2) {
+  var invalid = _ref2.invalid;
+  return /*#__PURE__*/jsxRuntime.jsx(box.Box, {
+    "aria-hidden": "true",
+    as: "span",
+    data: {
+      'focus-indicator': 'true'
+    } // Styles
+    ,
+    border: invalid ? 'critical' : 'field',
+    borderRadius: "small",
+    position: "absolute",
+    bottom: 0,
+    left: 0,
+    right: 0,
+    top: 0,
+    className: css.css({
+      pointerEvents: 'none'
+    })
+  });
+};
+
 /**
  * Map children for placement within the `TextInput` flex container. Ensures that
  * placeholders are provided for unused placements.
@@ -143,8 +189,7 @@ var childrenToAdornments = function childrenToAdornments(children) {
   };
 };
 
-var _excluded = ["children", "data"],
-    _excluded2 = ["disabled", "invalid"];
+var _excluded = ["children", "data"];
 
 /** Organize and emphasize information quickly and effectively in a list of text elements. */
 var TextInput = /*#__PURE__*/react.forwardRef(function (_ref, forwardedRef) {
@@ -153,31 +198,27 @@ var TextInput = /*#__PURE__*/react.forwardRef(function (_ref, forwardedRef) {
       consumerProps = _objectWithoutProperties(_ref, _excluded);
 
   var _useFieldContext = field.useFieldContext(),
-      disabled = _useFieldContext.disabled,
-      invalid = _useFieldContext.invalid,
-      a11yProps = _objectWithoutProperties(_useFieldContext, _excluded2);
+      _useFieldContext2 = _slicedToArray(_useFieldContext, 2),
+      _useFieldContext2$ = _useFieldContext2[0],
+      disabled = _useFieldContext2$.disabled,
+      invalid = _useFieldContext2$.invalid,
+      a11yProps = _useFieldContext2[1];
 
   var _childrenToAdornments = childrenToAdornments(children),
       startAdornment = _childrenToAdornments.startAdornment,
       endAdornment = _childrenToAdornments.endAdornment;
 
-  return /*#__PURE__*/jsxRuntime.jsxs(box.Box, {
-    background: disabled ? 'inputDisabled' : 'input',
-    border: invalid ? 'critical' : 'field',
-    borderRadius: "small",
+  return /*#__PURE__*/jsxRuntime.jsx(InputContainer, {
     display: "inline-flex",
     alignItems: "center",
-    flexDirection: "row",
-    height: "medium",
-    marginY: "none",
-    className: css.css(useInput({
-      disabled: disabled,
-      invalid: invalid
-    })),
-    children: [startAdornment, /*#__PURE__*/jsxRuntime.jsx(box.Box, _objectSpread(_objectSpread({
+    startAdornment: startAdornment,
+    endAdornment: endAdornment,
+    children: /*#__PURE__*/jsxRuntime.jsx(box.Box, _objectSpread(_objectSpread(_objectSpread({}, consumerProps), a11yProps), {}, {
       as: "input",
       ref: forwardedRef,
-      disabled: disabled // Styles
+      data: data,
+      disabled: disabled,
+      position: "relative" // Styles
       ,
       flex: 1,
       height: "medium",
@@ -186,18 +227,14 @@ var TextInput = /*#__PURE__*/react.forwardRef(function (_ref, forwardedRef) {
       paddingRight: endAdornment ? 'none' : 'medium',
       className: css.css(useInput({
         disabled: disabled,
-        invalid: invalid,
-        isNested: true
-      })),
-      data: data
-    }, a11yProps), consumerProps)), endAdornment]
+        invalid: invalid
+      }))
+    }))
   });
 });
 TextInput.displayName = 'TextInput';
 var useInput = function useInput(_ref2) {
-  var disabled = _ref2.disabled,
-      _ref2$isNested = _ref2.isNested,
-      isNested = _ref2$isNested === void 0 ? false : _ref2$isNested;
+  var disabled = _ref2.disabled;
   var theme$1 = theme.useTheme();
   var focusRingStyles = a11y.useFocusRing({
     always: true
@@ -213,27 +250,19 @@ var useInput = function useInput(_ref2) {
       typographyStyles = _textStyles[0],
       responsiveStyles = _textStyles[1];
 
-  return _objectSpread(_objectSpread(_objectSpread({}, typographyStyles), responsiveStyles), isNested ? {
+  return _objectSpread(_objectSpread(_objectSpread({}, typographyStyles), responsiveStyles), {}, {
     ':focus': {
-      // This removes the nested input outline visibility since
-      // the wrapper will be outlined, but still visibly focusable
-      // to windows high contrast mode users.
-      // @see https://tailwindcss.com/docs/outline-style#removing-outlines
-      outline: '2px solid transparent',
-      outlineOffset: '2px'
-    }
-  } : {
+      outline: 'none'
+    },
     ':enabled': {
-      '&:focus': _objectSpread(_objectSpread({}, focusRingStyles), {}, {
+      ':focus + [data-focus-indicator]': _objectSpread({
         borderColor: theme$1.border.color.fieldAccent
-      })
-    },
-    ':focus-within': _objectSpread(_objectSpread({}, focusRingStyles), {}, {
-      borderColor: theme$1.border.color.fieldAccent
-    })
+      }, focusRingStyles)
+    }
   });
 };
 
 exports.InputAdornment = InputAdornment;
+exports.InputContainer = InputContainer;
 exports.TextInput = TextInput;
 exports.useInput = useInput;

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

@@ -63,6 +63,7 @@ var InputAdornment = function InputAdornment(_ref) {
       paddingLeft: paddingLeft,
       paddingRight: paddingRight,
       children: /*#__PURE__*/jsx(Box, {
+        display: "flex",
         alignItems: "center",
         justifyContent: "center",
         style: {
@@ -107,6 +108,51 @@ var FieldAdornment = function FieldAdornment(_ref2) {
   });
 };
 
+var _excluded$1 = ["children", "startAdornment", "endAdornment"];
+var InputContainer = function InputContainer(_ref) {
+  var children = _ref.children,
+      startAdornment = _ref.startAdornment,
+      endAdornment = _ref.endAdornment,
+      boxProps = _objectWithoutProperties(_ref, _excluded$1);
+
+  var _useFieldContext = useFieldContext(),
+      _useFieldContext2 = _slicedToArray(_useFieldContext, 1),
+      _useFieldContext2$ = _useFieldContext2[0],
+      disabled = _useFieldContext2$.disabled,
+      invalid = _useFieldContext2$.invalid;
+
+  return /*#__PURE__*/jsxs(Box, _objectSpread(_objectSpread({
+    position: "relative",
+    background: disabled ? 'inputDisabled' : 'input'
+  }, boxProps), {}, {
+    children: [startAdornment, children, /*#__PURE__*/jsx(FocusIndicator, {
+      invalid: invalid
+    }), endAdornment]
+  }));
+};
+
+var FocusIndicator = function FocusIndicator(_ref2) {
+  var invalid = _ref2.invalid;
+  return /*#__PURE__*/jsx(Box, {
+    "aria-hidden": "true",
+    as: "span",
+    data: {
+      'focus-indicator': 'true'
+    } // Styles
+    ,
+    border: invalid ? 'critical' : 'field',
+    borderRadius: "small",
+    position: "absolute",
+    bottom: 0,
+    left: 0,
+    right: 0,
+    top: 0,
+    className: css({
+      pointerEvents: 'none'
+    })
+  });
+};
+
 /**
  * Map children for placement within the `TextInput` flex container. Ensures that
  * placeholders are provided for unused placements.
@@ -139,8 +185,7 @@ var childrenToAdornments = function childrenToAdornments(children) {
   };
 };
 
-var _excluded = ["children", "data"],
-    _excluded2 = ["disabled", "invalid"];
+var _excluded = ["children", "data"];
 
 /** Organize and emphasize information quickly and effectively in a list of text elements. */
 var TextInput = /*#__PURE__*/forwardRef(function (_ref, forwardedRef) {
@@ -149,31 +194,27 @@ var TextInput = /*#__PURE__*/forwardRef(function (_ref, forwardedRef) {
       consumerProps = _objectWithoutProperties(_ref, _excluded);
 
   var _useFieldContext = useFieldContext(),
-      disabled = _useFieldContext.disabled,
-      invalid = _useFieldContext.invalid,
-      a11yProps = _objectWithoutProperties(_useFieldContext, _excluded2);
+      _useFieldContext2 = _slicedToArray(_useFieldContext, 2),
+      _useFieldContext2$ = _useFieldContext2[0],
+      disabled = _useFieldContext2$.disabled,
+      invalid = _useFieldContext2$.invalid,
+      a11yProps = _useFieldContext2[1];
 
   var _childrenToAdornments = childrenToAdornments(children),
       startAdornment = _childrenToAdornments.startAdornment,
       endAdornment = _childrenToAdornments.endAdornment;
 
-  return /*#__PURE__*/jsxs(Box, {
-    background: disabled ? 'inputDisabled' : 'input',
-    border: invalid ? 'critical' : 'field',
-    borderRadius: "small",
+  return /*#__PURE__*/jsx(InputContainer, {
     display: "inline-flex",
     alignItems: "center",
-    flexDirection: "row",
-    height: "medium",
-    marginY: "none",
-    className: css(useInput({
-      disabled: disabled,
-      invalid: invalid
-    })),
-    children: [startAdornment, /*#__PURE__*/jsx(Box, _objectSpread(_objectSpread({
+    startAdornment: startAdornment,
+    endAdornment: endAdornment,
+    children: /*#__PURE__*/jsx(Box, _objectSpread(_objectSpread(_objectSpread({}, consumerProps), a11yProps), {}, {
       as: "input",
       ref: forwardedRef,
-      disabled: disabled // Styles
+      data: data,
+      disabled: disabled,
+      position: "relative" // Styles
       ,
       flex: 1,
       height: "medium",
@@ -182,18 +223,14 @@ var TextInput = /*#__PURE__*/forwardRef(function (_ref, forwardedRef) {
       paddingRight: endAdornment ? 'none' : 'medium',
       className: css(useInput({
         disabled: disabled,
-        invalid: invalid,
-        isNested: true
-      })),
-      data: data
-    }, a11yProps), consumerProps)), endAdornment]
+        invalid: invalid
+      }))
+    }))
   });
 });
 TextInput.displayName = 'TextInput';
 var useInput = function useInput(_ref2) {
-  var disabled = _ref2.disabled,
-      _ref2$isNested = _ref2.isNested,
-      isNested = _ref2$isNested === void 0 ? false : _ref2$isNested;
+  var disabled = _ref2.disabled;
   var theme = useTheme();
   var focusRingStyles = useFocusRing({
     always: true
@@ -209,25 +246,16 @@ var useInput = function useInput(_ref2) {
       typographyStyles = _textStyles[0],
       responsiveStyles = _textStyles[1];
 
-  return _objectSpread(_objectSpread(_objectSpread({}, typographyStyles), responsiveStyles), isNested ? {
+  return _objectSpread(_objectSpread(_objectSpread({}, typographyStyles), responsiveStyles), {}, {
     ':focus': {
-      // This removes the nested input outline visibility since
-      // the wrapper will be outlined, but still visibly focusable
-      // to windows high contrast mode users.
-      // @see https://tailwindcss.com/docs/outline-style#removing-outlines
-      outline: '2px solid transparent',
-      outlineOffset: '2px'
-    }
-  } : {
+      outline: 'none'
+    },
     ':enabled': {
-      '&:focus': _objectSpread(_objectSpread({}, focusRingStyles), {}, {
+      ':focus + [data-focus-indicator]': _objectSpread({
         borderColor: theme.border.color.fieldAccent
-      })
-    },
-    ':focus-within': _objectSpread(_objectSpread({}, focusRingStyles), {}, {
-      borderColor: theme.border.color.fieldAccent
-    })
+      }, focusRingStyles)
+    }
   });
 };
 
-export { InputAdornment, TextInput, useInput };
+export { InputAdornment, InputContainer, TextInput, useInput };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@spark-web/text-input",
-  "version": "1.1.0",
+  "version": "1.2.1",
   "license": "MIT",
   "main": "dist/spark-web-text-input.cjs.js",
   "module": "dist/spark-web-text-input.esm.js",
@@ -8,14 +8,14 @@
     "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/field": "^1.1.0",
-    "@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/field": "^3.0.0",
+    "@spark-web/text": "^1.0.5",
+    "@spark-web/theme": "^3.0.1",
+    "@spark-web/utils": "^1.1.3"
   },
   "devDependencies": {
     "@types/react": "^17.0.12",