@spark-web/text-input 2.0.3 → 3.0.0

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

@@ -29,7 +29,6 @@ var placementToPadding = {
     paddingRight: 'medium'
   }
 };
-
 /**
  * Places an element at the "start" or "end" of the input, only one adornment
  * may be provided for each placement. By default, the adornment element will be
@@ -45,23 +44,19 @@ var placementToPadding = {
  */
 var InputAdornment = function InputAdornment(_ref) {
   var children = _ref.children,
-      fieldLabel = _ref.fieldLabel,
-      placement = _ref.placement,
-      raw = _ref.raw;
-
-  var _useTheme = theme.useTheme(),
-      sizing = _useTheme.sizing;
-
+    fieldLabel = _ref.fieldLabel,
+    placement = _ref.placement,
+    raw = _ref.raw;
+  var theme$1 = theme.useTheme();
   var adornmentContext = react.useMemo(function () {
     return {
       placement: placement
     };
   }, [placement]);
   var _placementToPadding$p = placementToPadding[placement],
-      paddingLeft = _placementToPadding$p.paddingLeft,
-      paddingRight = _placementToPadding$p.paddingRight;
+    paddingLeft = _placementToPadding$p.paddingLeft,
+    paddingRight = _placementToPadding$p.paddingRight;
   var content = children;
-
   if (!raw) {
     content = /*#__PURE__*/jsxRuntime.jsx(box.Box, {
       paddingLeft: paddingLeft,
@@ -71,35 +66,32 @@ var InputAdornment = function InputAdornment(_ref) {
         alignItems: "center",
         justifyContent: "center",
         style: {
-          minWidth: sizing.xxsmall
+          minWidth: theme$1.sizing.xxsmall
         },
         children: children
       })
     });
   }
-
   var wrappedContent = /*#__PURE__*/jsxRuntime.jsx(InputAdornmentContext.Provider, {
     value: adornmentContext,
     children: content
   });
-
   if (fieldLabel) {
     return /*#__PURE__*/jsxRuntime.jsx(FieldAdornment, {
       fieldLabel: fieldLabel,
       children: wrappedContent
     });
   }
-
   return wrappedContent;
 };
+
 /**
  * Wrap the element with a field provider to override the parent field label.
  * Only split-out from `InputAdornment` to avoid the conditional hook rule.
  */
-
 var FieldAdornment = function FieldAdornment(_ref2) {
   var children = _ref2.children,
-      fieldLabel = _ref2.fieldLabel;
+    fieldLabel = _ref2.fieldLabel;
   var parentFieldContext = field.useFieldContext();
   var fieldContext = react.useMemo(function () {
     return _objectSpread(_objectSpread({}, parentFieldContext), {}, {
@@ -115,17 +107,16 @@ 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);
-
+    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;
-
+    _useFieldContext2 = _slicedToArray(_useFieldContext, 1),
+    _useFieldContext2$ = _useFieldContext2[0],
+    disabled = _useFieldContext2$.disabled,
+    invalid = _useFieldContext2$.invalid;
   return /*#__PURE__*/jsxRuntime.jsxs(box.Box, _objectSpread(_objectSpread({
+    borderRadius: "small",
     position: "relative",
     background: disabled ? 'inputDisabled' : 'input'
   }, boxProps), {}, {
@@ -134,7 +125,6 @@ var InputContainer = function InputContainer(_ref) {
     }), endAdornment]
   }));
 };
-
 var FocusIndicator = function FocusIndicator(_ref2) {
   var invalid = _ref2.invalid;
   return /*#__PURE__*/jsxRuntime.jsx(box.Box, {
@@ -142,7 +132,8 @@ var FocusIndicator = function FocusIndicator(_ref2) {
     as: "span",
     data: {
       'focus-indicator': 'true'
-    } // Styles
+    }
+    // Styles
     ,
     border: invalid ? 'critical' : 'field',
     borderRadius: "small",
@@ -151,6 +142,7 @@ var FocusIndicator = function FocusIndicator(_ref2) {
     left: 0,
     right: 0,
     top: 0,
+    shadow: "small",
     className: css.css({
       pointerEvents: 'none'
     })
@@ -164,20 +156,17 @@ var FocusIndicator = function FocusIndicator(_ref2) {
 var childrenToAdornments = function childrenToAdornments(children) {
   var startAdornment = null;
   var endAdornment = null;
-
   if (!children) {
     return {
       startAdornment: startAdornment,
       endAdornment: endAdornment
     };
   }
-
   react.Children.forEach(children, function (child) {
     if ( /*#__PURE__*/react.isValidElement(child)) {
       if (child.props.placement === 'end') {
         endAdornment = child;
       }
-
       if (child.props.placement === 'start') {
         startAdornment = child;
       }
@@ -190,34 +179,29 @@ var childrenToAdornments = function childrenToAdornments(children) {
 };
 
 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) {
   var children = _ref.children,
-      data = _ref.data,
-      consumerProps = _objectWithoutProperties(_ref, _excluded);
-
+    data = _ref.data,
+    consumerProps = _objectWithoutProperties(_ref, _excluded);
   var _useFieldContext = field.useFieldContext(),
-      _useFieldContext2 = _slicedToArray(_useFieldContext, 2),
-      _useFieldContext2$ = _useFieldContext2[0],
-      disabled = _useFieldContext2$.disabled,
-      invalid = _useFieldContext2$.invalid,
-      a11yProps = _useFieldContext2[1];
-
+    _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;
-
+    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];
-
+      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",
@@ -233,7 +217,6 @@ var TextInput = /*#__PURE__*/react.forwardRef(function (_ref, forwardedRef) {
   });
 });
 TextInput.displayName = 'TextInput';
-
 /**
  * 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
@@ -241,8 +224,8 @@ TextInput.displayName = 'TextInput';
  **/
 var useInputStyles = function useInputStyles(_ref2) {
   var disabled = _ref2.disabled,
-      startAdornment = _ref2.startAdornment,
-      endAdornment = _ref2.endAdornment;
+    startAdornment = _ref2.startAdornment,
+    endAdornment = _ref2.endAdornment;
   var theme$1 = theme.useTheme();
   var overflowStyles = text.useOverflowStrategy('truncate');
   var focusRingStyles = a11y.useFocusRing({
@@ -254,18 +237,15 @@ var useInputStyles = function useInputStyles(_ref2) {
     size: 'standard',
     weight: 'regular'
   });
-
   var _textStyles = _slicedToArray(textStyles, 2),
-      typographyStyles = _textStyles[0],
-      responsiveStyles = _textStyles[1];
-
+    typographyStyles = _textStyles[0],
+    responsiveStyles = _textStyles[1];
   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': {

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

@@ -25,7 +25,6 @@ var placementToPadding = {
     paddingRight: 'medium'
   }
 };
-
 /**
  * Places an element at the "start" or "end" of the input, only one adornment
  * may be provided for each placement. By default, the adornment element will be
@@ -41,23 +40,19 @@ var placementToPadding = {
  */
 var InputAdornment = function InputAdornment(_ref) {
   var children = _ref.children,
-      fieldLabel = _ref.fieldLabel,
-      placement = _ref.placement,
-      raw = _ref.raw;
-
-  var _useTheme = useTheme(),
-      sizing = _useTheme.sizing;
-
+    fieldLabel = _ref.fieldLabel,
+    placement = _ref.placement,
+    raw = _ref.raw;
+  var theme = useTheme();
   var adornmentContext = useMemo(function () {
     return {
       placement: placement
     };
   }, [placement]);
   var _placementToPadding$p = placementToPadding[placement],
-      paddingLeft = _placementToPadding$p.paddingLeft,
-      paddingRight = _placementToPadding$p.paddingRight;
+    paddingLeft = _placementToPadding$p.paddingLeft,
+    paddingRight = _placementToPadding$p.paddingRight;
   var content = children;
-
   if (!raw) {
     content = /*#__PURE__*/jsx(Box, {
       paddingLeft: paddingLeft,
@@ -67,35 +62,32 @@ var InputAdornment = function InputAdornment(_ref) {
         alignItems: "center",
         justifyContent: "center",
         style: {
-          minWidth: sizing.xxsmall
+          minWidth: theme.sizing.xxsmall
         },
         children: children
       })
     });
   }
-
   var wrappedContent = /*#__PURE__*/jsx(InputAdornmentContext.Provider, {
     value: adornmentContext,
     children: content
   });
-
   if (fieldLabel) {
     return /*#__PURE__*/jsx(FieldAdornment, {
       fieldLabel: fieldLabel,
       children: wrappedContent
     });
   }
-
   return wrappedContent;
 };
+
 /**
  * Wrap the element with a field provider to override the parent field label.
  * Only split-out from `InputAdornment` to avoid the conditional hook rule.
  */
-
 var FieldAdornment = function FieldAdornment(_ref2) {
   var children = _ref2.children,
-      fieldLabel = _ref2.fieldLabel;
+    fieldLabel = _ref2.fieldLabel;
   var parentFieldContext = useFieldContext();
   var fieldContext = useMemo(function () {
     return _objectSpread(_objectSpread({}, parentFieldContext), {}, {
@@ -111,17 +103,16 @@ 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);
-
+    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;
-
+    _useFieldContext2 = _slicedToArray(_useFieldContext, 1),
+    _useFieldContext2$ = _useFieldContext2[0],
+    disabled = _useFieldContext2$.disabled,
+    invalid = _useFieldContext2$.invalid;
   return /*#__PURE__*/jsxs(Box, _objectSpread(_objectSpread({
+    borderRadius: "small",
     position: "relative",
     background: disabled ? 'inputDisabled' : 'input'
   }, boxProps), {}, {
@@ -130,7 +121,6 @@ var InputContainer = function InputContainer(_ref) {
     }), endAdornment]
   }));
 };
-
 var FocusIndicator = function FocusIndicator(_ref2) {
   var invalid = _ref2.invalid;
   return /*#__PURE__*/jsx(Box, {
@@ -138,7 +128,8 @@ var FocusIndicator = function FocusIndicator(_ref2) {
     as: "span",
     data: {
       'focus-indicator': 'true'
-    } // Styles
+    }
+    // Styles
     ,
     border: invalid ? 'critical' : 'field',
     borderRadius: "small",
@@ -147,6 +138,7 @@ var FocusIndicator = function FocusIndicator(_ref2) {
     left: 0,
     right: 0,
     top: 0,
+    shadow: "small",
     className: css({
       pointerEvents: 'none'
     })
@@ -160,20 +152,17 @@ var FocusIndicator = function FocusIndicator(_ref2) {
 var childrenToAdornments = function childrenToAdornments(children) {
   var startAdornment = null;
   var endAdornment = null;
-
   if (!children) {
     return {
       startAdornment: startAdornment,
       endAdornment: endAdornment
     };
   }
-
   Children.forEach(children, function (child) {
     if ( /*#__PURE__*/isValidElement(child)) {
       if (child.props.placement === 'end') {
         endAdornment = child;
       }
-
       if (child.props.placement === 'start') {
         startAdornment = child;
       }
@@ -186,34 +175,29 @@ var childrenToAdornments = function childrenToAdornments(children) {
 };
 
 var _excluded = ["children", "data"];
-
 /** Organize and emphasize information quickly and effectively in a list of text elements. */
 var TextInput = /*#__PURE__*/forwardRef(function (_ref, forwardedRef) {
   var children = _ref.children,
-      data = _ref.data,
-      consumerProps = _objectWithoutProperties(_ref, _excluded);
-
+    data = _ref.data,
+    consumerProps = _objectWithoutProperties(_ref, _excluded);
   var _useFieldContext = useFieldContext(),
-      _useFieldContext2 = _slicedToArray(_useFieldContext, 2),
-      _useFieldContext2$ = _useFieldContext2[0],
-      disabled = _useFieldContext2$.disabled,
-      invalid = _useFieldContext2$.invalid,
-      a11yProps = _useFieldContext2[1];
-
+    _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;
-
+    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];
-
+      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",
@@ -229,7 +213,6 @@ var TextInput = /*#__PURE__*/forwardRef(function (_ref, forwardedRef) {
   });
 });
 TextInput.displayName = 'TextInput';
-
 /**
  * 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
@@ -237,8 +220,8 @@ TextInput.displayName = 'TextInput';
  **/
 var useInputStyles = function useInputStyles(_ref2) {
   var disabled = _ref2.disabled,
-      startAdornment = _ref2.startAdornment,
-      endAdornment = _ref2.endAdornment;
+    startAdornment = _ref2.startAdornment,
+    endAdornment = _ref2.endAdornment;
   var theme = useTheme();
   var overflowStyles = useOverflowStrategy('truncate');
   var focusRingStyles = useFocusRing({
@@ -250,18 +233,15 @@ var useInputStyles = function useInputStyles(_ref2) {
     size: 'standard',
     weight: 'regular'
   });
-
   var _textStyles = _slicedToArray(textStyles, 2),
-      typographyStyles = _textStyles[0],
-      responsiveStyles = _textStyles[1];
-
+    typographyStyles = _textStyles[0],
+    responsiveStyles = _textStyles[1];
   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': {

package/package.json

@@ -1,28 +1,35 @@
 {
   "name": "@spark-web/text-input",
-  "version": "2.0.3",
-  "license": "MIT",
+  "version": "3.0.0",
+  "homepage": "https://github.com/brighte-labs/spark-web#readme",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/brighte-labs/spark-web.git",
+    "directory": "packages/text-input"
+  },
   "main": "dist/spark-web-text-input.cjs.js",
   "module": "dist/spark-web-text-input.esm.js",
   "files": [
-    "dist"
+    "CHANGELOG.md",
+    "dist",
+    "README.md"
   ],
   "dependencies": {
-    "@babel/runtime": "^7.18.9",
+    "@babel/runtime": "^7.19.0",
     "@emotion/css": "^11.9.0",
-    "@spark-web/a11y": "^1.3.1",
-    "@spark-web/box": "^1.0.9",
-    "@spark-web/text": "^1.1.1",
-    "@spark-web/theme": "^3.0.6",
-    "@spark-web/utils": "^1.2.2"
+    "@spark-web/a11y": "^1.4.0",
+    "@spark-web/box": "^1.2.0",
+    "@spark-web/text": "^1.2.0",
+    "@spark-web/theme": "^3.2.0",
+    "@spark-web/utils": "^1.3.0"
   },
   "devDependencies": {
-    "@spark-web/field": "^3.0.5",
-    "@types/react": "^17.0.12",
-    "react": "^17.0.2"
+    "@spark-web/field": "^3.1.0",
+    "@types/react": "^18.2.0",
+    "react": "^18.2.0"
   },
   "peerDependencies": {
-    "@spark-web/field": "^3.0.5",
+    "@spark-web/field": "^3.1.0",
     "react": ">=17.0.2"
   },
   "engines": {