@spark-web/text-input 5.3.0 → 6.0.0-rc.0

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @spark-web/text-input
 
+## 6.0.0-rc.0
+
+### Minor Changes
+
+- update react version and other packages
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @spark-web/field@5.2.0-rc.0
+  - @spark-web/theme@5.12.0-rc.0
+  - @spark-web/utils@5.1.0-rc.0
+  - @spark-web/a11y@5.3.0-rc.0
+  - @spark-web/text@5.3.0-rc.0
+  - @spark-web/box@6.0.0-rc.0
+
 ## 5.3.0
 
 ### Minor Changes

package/dist/declarations/src/text-input.d.ts

@@ -1,11 +1,10 @@
 import type { FieldState } from '@spark-web/field';
-import type { TextOverflowStrategy } from '@spark-web/text';
 import type { DataAttributeMap } from '@spark-web/utils/internal';
 import type { InputHTMLAttributes } from 'react';
 import type { AdornmentsAsChildren } from "./children-to-adornments.js";
 declare type ValidTypes = 'text' | 'password' | 'email' | 'search' | 'number' | 'tel' | 'url';
 declare type ValidModes = 'none' | 'text' | 'tel' | 'url' | 'email' | 'numeric' | 'decimal' | 'search';
-declare type NativeInputProps = Pick<InputHTMLAttributes<HTMLInputElement>, 'name' | 'onBlur' | 'onChange' | 'onFocus' | 'placeholder' | 'value' | 'required' | 'autoComplete'>;
+declare type NativeInputProps = Pick<InputHTMLAttributes<HTMLInputElement>, 'name' | 'onBlur' | 'onChange' | 'onFocus' | 'placeholder' | 'value' | 'required'>;
 export declare type TextInputProps = {
     /** Sets data attributes for the element. */
     data?: DataAttributeMap;
@@ -23,8 +22,6 @@ export declare type TextInputProps = {
      * otherwise it will not be rendered.
      */
     children?: AdornmentsAsChildren;
-    /** Manage how text behaves with regard to overflow. */
-    overflowStrategy?: TextOverflowStrategy;
 } & NativeInputProps;
 /** Organize and emphasize information quickly and effectively in a list of text elements. */
 export declare const TextInput: import("react").ForwardRefExoticComponent<{
@@ -44,42 +41,34 @@ export declare const TextInput: import("react").ForwardRefExoticComponent<{
      * otherwise it will not be rendered.
      */
     children?: AdornmentsAsChildren;
-    /** Manage how text behaves with regard to overflow. */
-    overflowStrategy?: "truncate" | "nowrap" | "breakword" | undefined;
 } & NativeInputProps & import("react").RefAttributes<HTMLInputElement>>;
 export declare type UseInputStylesProps = FieldState & {
     startAdornment?: boolean;
     endAdornment?: boolean;
-    readOnly?: boolean;
-    overflowStrategy?: TextOverflowStrategy;
 };
 /**
  * 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
  **/
-export declare const useInputStyles: ({ disabled, startAdornment, endAdornment, readOnly, overflowStrategy, }: UseInputStylesProps) => readonly [{
+export declare const useInputStyles: ({ disabled, startAdornment, endAdornment, }: UseInputStylesProps) => readonly [{
     readonly flex: 1;
     readonly position: "relative";
     readonly height: "medium";
-    readonly paddingLeft: "none" | "medium";
-    readonly paddingRight: "none" | "medium";
+    readonly paddingLeft: "medium" | "none";
+    readonly paddingRight: "medium" | "none";
     readonly width: "full";
 }, {
     readonly ':enabled': {
         readonly ':focus + [data-focus-indicator]': {
-            boxShadow?: string | undefined;
-            outline?: string | undefined;
-            outlineOffset?: string | undefined;
+            readonly boxShadow: string;
+            readonly outline: string;
+            readonly outlineOffset: string;
+            readonly borderColor: string;
         } | {
-            boxShadow: string;
-            outline: string;
-            outlineOffset: string;
-            borderColor: string;
-        } | {
-            outline: string;
-            outlineOffset: string;
-            borderColor: string;
+            readonly outline: string;
+            readonly outlineOffset: string;
+            readonly borderColor: string;
         };
     };
     readonly ':focus': {
@@ -1046,18 +1035,14 @@ export declare const useInputStyles: ({ disabled, startAdornment, endAdornment,
 } | {
     readonly ':enabled': {
         readonly ':focus + [data-focus-indicator]': {
-            boxShadow?: string | undefined;
-            outline?: string | undefined;
-            outlineOffset?: string | undefined;
-        } | {
-            boxShadow: string;
-            outline: string;
-            outlineOffset: string;
-            borderColor: string;
+            readonly boxShadow: string;
+            readonly outline: string;
+            readonly outlineOffset: string;
+            readonly borderColor: string;
         } | {
-            outline: string;
-            outlineOffset: string;
-            borderColor: string;
+            readonly outline: string;
+            readonly outlineOffset: string;
+            readonly borderColor: string;
         };
     };
     readonly ':focus': {
@@ -2024,18 +2009,14 @@ export declare const useInputStyles: ({ disabled, startAdornment, endAdornment,
 } | {
     readonly ':enabled': {
         readonly ':focus + [data-focus-indicator]': {
-            boxShadow?: string | undefined;
-            outline?: string | undefined;
-            outlineOffset?: string | undefined;
-        } | {
-            boxShadow: string;
-            outline: string;
-            outlineOffset: string;
-            borderColor: string;
+            readonly boxShadow: string;
+            readonly outline: string;
+            readonly outlineOffset: string;
+            readonly borderColor: string;
         } | {
-            outline: string;
-            outlineOffset: string;
-            borderColor: string;
+            readonly outline: string;
+            readonly outlineOffset: string;
+            readonly borderColor: string;
         };
     };
     readonly ':focus': {

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

@@ -114,12 +114,11 @@ var InputContainer = function InputContainer(_ref) {
     _useFieldContext2 = _slicedToArray(_useFieldContext, 1),
     _useFieldContext2$ = _useFieldContext2[0],
     disabled = _useFieldContext2$.disabled,
-    invalid = _useFieldContext2$.invalid,
-    readOnly = _useFieldContext2$.readOnly;
+    invalid = _useFieldContext2$.invalid;
   return jsxRuntime.jsxs(box.Box, _objectSpread(_objectSpread({
     borderRadius: "small",
     position: "relative",
-    background: disabled || readOnly ? 'inputDisabled' : 'input'
+    background: disabled ? 'inputDisabled' : 'input'
   }, boxProps), {}, {
     children: [startAdornment, children, jsxRuntime.jsx(FocusIndicator, {
       invalid: invalid
@@ -128,7 +127,6 @@ var InputContainer = function InputContainer(_ref) {
 };
 var FocusIndicator = function FocusIndicator(_ref2) {
   var invalid = _ref2.invalid;
-  var theme$1 = theme.useTheme();
   return jsxRuntime.jsx(box.Box, {
     "aria-hidden": "true",
     as: "span",
@@ -137,14 +135,14 @@ var FocusIndicator = function FocusIndicator(_ref2) {
     }
     // Styles
     ,
-    border: invalid ? 'critical' : theme$1.components.textInput.borderColor,
-    borderRadius: theme$1.components.textInput.borderRadius,
+    border: invalid ? 'critical' : 'field',
+    borderRadius: "small",
     position: "absolute",
     bottom: 0,
     left: 0,
     right: 0,
     top: 0,
-    shadow: theme$1.components.textInput.boxShadow,
+    shadow: "small",
     css: react$1.css({
       pointerEvents: 'none'
     })
@@ -182,19 +180,17 @@ var childrenToAdornments = function childrenToAdornments(children) {
   };
 };
 
-var _excluded = ["children", "data", "overflowStrategy"];
+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,
-    overflowStrategy = _ref.overflowStrategy,
     consumerProps = _objectWithoutProperties(_ref, _excluded);
   var _useFieldContext = field.useFieldContext(),
     _useFieldContext2 = _slicedToArray(_useFieldContext, 2),
     _useFieldContext2$ = _useFieldContext2[0],
     disabled = _useFieldContext2$.disabled,
     invalid = _useFieldContext2$.invalid,
-    readOnly = _useFieldContext2$.readOnly,
     a11yProps = _useFieldContext2[1];
   var _childrenToAdornments = childrenToAdornments(children),
     startAdornment = _childrenToAdornments.startAdornment,
@@ -203,9 +199,7 @@ var TextInput = /*#__PURE__*/react.forwardRef(function (_ref, forwardedRef) {
       disabled: disabled,
       invalid: invalid,
       startAdornment: Boolean(startAdornment),
-      endAdornment: Boolean(endAdornment),
-      readOnly: readOnly,
-      overflowStrategy: overflowStrategy
+      endAdornment: Boolean(endAdornment)
     }),
     _useInputStyles2 = _slicedToArray(_useInputStyles, 2),
     boxProps = _useInputStyles2[0],
@@ -220,7 +214,6 @@ var TextInput = /*#__PURE__*/react.forwardRef(function (_ref, forwardedRef) {
       css: react$1.css(inputStyles),
       data: data,
       disabled: disabled,
-      readOnly: readOnly,
       ref: forwardedRef
     }))
   });
@@ -232,21 +225,17 @@ TextInput.displayName = 'TextInput';
  * item is a CSS object to be passed to Emotion's `css` function
  **/
 var useInputStyles = function useInputStyles(_ref2) {
-  var _theme$components$tex;
   var disabled = _ref2.disabled,
     startAdornment = _ref2.startAdornment,
-    endAdornment = _ref2.endAdornment,
-    readOnly = _ref2.readOnly,
-    _ref2$overflowStrateg = _ref2.overflowStrategy,
-    overflowStrategy = _ref2$overflowStrateg === void 0 ? 'truncate' : _ref2$overflowStrateg;
+    endAdornment = _ref2.endAdornment;
   var theme$1 = theme.useTheme();
-  var overflowStyles = text.useOverflowStrategy(overflowStrategy);
+  var overflowStyles = text.useOverflowStrategy('truncate');
   var focusRingStyles = a11y.useFocusRing({
     always: true
   });
   var textStyles = text.useText({
     baseline: false,
-    tone: disabled || readOnly ? 'field' : 'neutral',
+    tone: disabled ? 'disabled' : 'neutral',
     size: 'standard',
     weight: 'regular'
   });
@@ -262,7 +251,7 @@ var useInputStyles = function useInputStyles(_ref2) {
     width: 'full'
   }, _objectSpread(_objectSpread(_objectSpread(_objectSpread({}, typographyStyles), responsiveStyles), overflowStyles), {}, {
     ':enabled': {
-      ':focus + [data-focus-indicator]': (_theme$components$tex = theme$1.components.textInput.focused) !== null && _theme$components$tex !== void 0 ? _theme$components$tex : _objectSpread({
+      ':focus + [data-focus-indicator]': _objectSpread({
         borderColor: theme$1.border.color.fieldAccent
       }, focusRingStyles)
     },

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

@@ -114,12 +114,11 @@ var InputContainer = function InputContainer(_ref) {
     _useFieldContext2 = _slicedToArray(_useFieldContext, 1),
     _useFieldContext2$ = _useFieldContext2[0],
     disabled = _useFieldContext2$.disabled,
-    invalid = _useFieldContext2$.invalid,
-    readOnly = _useFieldContext2$.readOnly;
+    invalid = _useFieldContext2$.invalid;
   return jsxRuntime.jsxs(box.Box, _objectSpread(_objectSpread({
     borderRadius: "small",
     position: "relative",
-    background: disabled || readOnly ? 'inputDisabled' : 'input'
+    background: disabled ? 'inputDisabled' : 'input'
   }, boxProps), {}, {
     children: [startAdornment, children, jsxRuntime.jsx(FocusIndicator, {
       invalid: invalid
@@ -128,7 +127,6 @@ var InputContainer = function InputContainer(_ref) {
 };
 var FocusIndicator = function FocusIndicator(_ref2) {
   var invalid = _ref2.invalid;
-  var theme$1 = theme.useTheme();
   return jsxRuntime.jsx(box.Box, {
     "aria-hidden": "true",
     as: "span",
@@ -137,14 +135,14 @@ var FocusIndicator = function FocusIndicator(_ref2) {
     }
     // Styles
     ,
-    border: invalid ? 'critical' : theme$1.components.textInput.borderColor,
-    borderRadius: theme$1.components.textInput.borderRadius,
+    border: invalid ? 'critical' : 'field',
+    borderRadius: "small",
     position: "absolute",
     bottom: 0,
     left: 0,
     right: 0,
     top: 0,
-    shadow: theme$1.components.textInput.boxShadow,
+    shadow: "small",
     css: react$1.css({
       pointerEvents: 'none'
     })
@@ -182,19 +180,17 @@ var childrenToAdornments = function childrenToAdornments(children) {
   };
 };
 
-var _excluded = ["children", "data", "overflowStrategy"];
+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,
-    overflowStrategy = _ref.overflowStrategy,
     consumerProps = _objectWithoutProperties(_ref, _excluded);
   var _useFieldContext = field.useFieldContext(),
     _useFieldContext2 = _slicedToArray(_useFieldContext, 2),
     _useFieldContext2$ = _useFieldContext2[0],
     disabled = _useFieldContext2$.disabled,
     invalid = _useFieldContext2$.invalid,
-    readOnly = _useFieldContext2$.readOnly,
     a11yProps = _useFieldContext2[1];
   var _childrenToAdornments = childrenToAdornments(children),
     startAdornment = _childrenToAdornments.startAdornment,
@@ -203,9 +199,7 @@ var TextInput = /*#__PURE__*/react.forwardRef(function (_ref, forwardedRef) {
       disabled: disabled,
       invalid: invalid,
       startAdornment: Boolean(startAdornment),
-      endAdornment: Boolean(endAdornment),
-      readOnly: readOnly,
-      overflowStrategy: overflowStrategy
+      endAdornment: Boolean(endAdornment)
     }),
     _useInputStyles2 = _slicedToArray(_useInputStyles, 2),
     boxProps = _useInputStyles2[0],
@@ -220,7 +214,6 @@ var TextInput = /*#__PURE__*/react.forwardRef(function (_ref, forwardedRef) {
       css: react$1.css(inputStyles),
       data: data,
       disabled: disabled,
-      readOnly: readOnly,
       ref: forwardedRef
     }))
   });
@@ -232,21 +225,17 @@ TextInput.displayName = 'TextInput';
  * item is a CSS object to be passed to Emotion's `css` function
  **/
 var useInputStyles = function useInputStyles(_ref2) {
-  var _theme$components$tex;
   var disabled = _ref2.disabled,
     startAdornment = _ref2.startAdornment,
-    endAdornment = _ref2.endAdornment,
-    readOnly = _ref2.readOnly,
-    _ref2$overflowStrateg = _ref2.overflowStrategy,
-    overflowStrategy = _ref2$overflowStrateg === void 0 ? 'truncate' : _ref2$overflowStrateg;
+    endAdornment = _ref2.endAdornment;
   var theme$1 = theme.useTheme();
-  var overflowStyles = text.useOverflowStrategy(overflowStrategy);
+  var overflowStyles = text.useOverflowStrategy('truncate');
   var focusRingStyles = a11y.useFocusRing({
     always: true
   });
   var textStyles = text.useText({
     baseline: false,
-    tone: disabled || readOnly ? 'field' : 'neutral',
+    tone: disabled ? 'disabled' : 'neutral',
     size: 'standard',
     weight: 'regular'
   });
@@ -262,7 +251,7 @@ var useInputStyles = function useInputStyles(_ref2) {
     width: 'full'
   }, _objectSpread(_objectSpread(_objectSpread(_objectSpread({}, typographyStyles), responsiveStyles), overflowStyles), {}, {
     ':enabled': {
-      ':focus + [data-focus-indicator]': (_theme$components$tex = theme$1.components.textInput.focused) !== null && _theme$components$tex !== void 0 ? _theme$components$tex : _objectSpread({
+      ':focus + [data-focus-indicator]': _objectSpread({
         borderColor: theme$1.border.color.fieldAccent
       }, focusRingStyles)
     },

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

@@ -110,12 +110,11 @@ var InputContainer = function InputContainer(_ref) {
     _useFieldContext2 = _slicedToArray(_useFieldContext, 1),
     _useFieldContext2$ = _useFieldContext2[0],
     disabled = _useFieldContext2$.disabled,
-    invalid = _useFieldContext2$.invalid,
-    readOnly = _useFieldContext2$.readOnly;
+    invalid = _useFieldContext2$.invalid;
   return jsxs(Box, _objectSpread(_objectSpread({
     borderRadius: "small",
     position: "relative",
-    background: disabled || readOnly ? 'inputDisabled' : 'input'
+    background: disabled ? 'inputDisabled' : 'input'
   }, boxProps), {}, {
     children: [startAdornment, children, jsx(FocusIndicator, {
       invalid: invalid
@@ -124,7 +123,6 @@ var InputContainer = function InputContainer(_ref) {
 };
 var FocusIndicator = function FocusIndicator(_ref2) {
   var invalid = _ref2.invalid;
-  var theme = useTheme();
   return jsx(Box, {
     "aria-hidden": "true",
     as: "span",
@@ -133,14 +131,14 @@ var FocusIndicator = function FocusIndicator(_ref2) {
     }
     // Styles
     ,
-    border: invalid ? 'critical' : theme.components.textInput.borderColor,
-    borderRadius: theme.components.textInput.borderRadius,
+    border: invalid ? 'critical' : 'field',
+    borderRadius: "small",
     position: "absolute",
     bottom: 0,
     left: 0,
     right: 0,
     top: 0,
-    shadow: theme.components.textInput.boxShadow,
+    shadow: "small",
     css: css({
       pointerEvents: 'none'
     })
@@ -178,19 +176,17 @@ var childrenToAdornments = function childrenToAdornments(children) {
   };
 };
 
-var _excluded = ["children", "data", "overflowStrategy"];
+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,
-    overflowStrategy = _ref.overflowStrategy,
     consumerProps = _objectWithoutProperties(_ref, _excluded);
   var _useFieldContext = useFieldContext(),
     _useFieldContext2 = _slicedToArray(_useFieldContext, 2),
     _useFieldContext2$ = _useFieldContext2[0],
     disabled = _useFieldContext2$.disabled,
     invalid = _useFieldContext2$.invalid,
-    readOnly = _useFieldContext2$.readOnly,
     a11yProps = _useFieldContext2[1];
   var _childrenToAdornments = childrenToAdornments(children),
     startAdornment = _childrenToAdornments.startAdornment,
@@ -199,9 +195,7 @@ var TextInput = /*#__PURE__*/forwardRef(function (_ref, forwardedRef) {
       disabled: disabled,
       invalid: invalid,
       startAdornment: Boolean(startAdornment),
-      endAdornment: Boolean(endAdornment),
-      readOnly: readOnly,
-      overflowStrategy: overflowStrategy
+      endAdornment: Boolean(endAdornment)
     }),
     _useInputStyles2 = _slicedToArray(_useInputStyles, 2),
     boxProps = _useInputStyles2[0],
@@ -216,7 +210,6 @@ var TextInput = /*#__PURE__*/forwardRef(function (_ref, forwardedRef) {
       css: css(inputStyles),
       data: data,
       disabled: disabled,
-      readOnly: readOnly,
       ref: forwardedRef
     }))
   });
@@ -228,21 +221,17 @@ TextInput.displayName = 'TextInput';
  * item is a CSS object to be passed to Emotion's `css` function
  **/
 var useInputStyles = function useInputStyles(_ref2) {
-  var _theme$components$tex;
   var disabled = _ref2.disabled,
     startAdornment = _ref2.startAdornment,
-    endAdornment = _ref2.endAdornment,
-    readOnly = _ref2.readOnly,
-    _ref2$overflowStrateg = _ref2.overflowStrategy,
-    overflowStrategy = _ref2$overflowStrateg === void 0 ? 'truncate' : _ref2$overflowStrateg;
+    endAdornment = _ref2.endAdornment;
   var theme = useTheme();
-  var overflowStyles = useOverflowStrategy(overflowStrategy);
+  var overflowStyles = useOverflowStrategy('truncate');
   var focusRingStyles = useFocusRing({
     always: true
   });
   var textStyles = useText({
     baseline: false,
-    tone: disabled || readOnly ? 'field' : 'neutral',
+    tone: disabled ? 'disabled' : 'neutral',
     size: 'standard',
     weight: 'regular'
   });
@@ -258,7 +247,7 @@ var useInputStyles = function useInputStyles(_ref2) {
     width: 'full'
   }, _objectSpread(_objectSpread(_objectSpread(_objectSpread({}, typographyStyles), responsiveStyles), overflowStyles), {}, {
     ':enabled': {
-      ':focus + [data-focus-indicator]': (_theme$components$tex = theme.components.textInput.focused) !== null && _theme$components$tex !== void 0 ? _theme$components$tex : _objectSpread({
+      ':focus + [data-focus-indicator]': _objectSpread({
         borderColor: theme.border.color.fieldAccent
       }, focusRingStyles)
     },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@spark-web/text-input",
-  "version": "5.3.0",
+  "version": "6.0.0-rc.0",
   "homepage": "https://github.com/brighte-labs/spark-web#readme",
   "repository": {
     "type": "git",
@@ -17,21 +17,21 @@
   "dependencies": {
     "@babel/runtime": "^7.25.0",
     "@emotion/react": "^11.14.0",
-    "@spark-web/a11y": "^5.0.0",
-    "@spark-web/box": "^5.2.0",
-    "@spark-web/text": "^5.0.0",
-    "@spark-web/utils": "^5.0.0"
+    "@spark-web/a11y": "^5.3.0-rc.0",
+    "@spark-web/box": "^6.0.0-rc.0",
+    "@spark-web/text": "^5.3.0-rc.0",
+    "@spark-web/utils": "^5.1.0-rc.0"
   },
   "devDependencies": {
-    "@spark-web/field": "^5.1.1",
-    "@spark-web/theme": "^5.10.6",
-    "@types/react": "^18.2.0",
-    "react": "^18.2.0"
+    "@spark-web/field": "^5.2.0-rc.0",
+    "@spark-web/theme": "^5.12.0-rc.0",
+    "@types/react": "^19.1.0",
+    "react": "^19.1.0"
   },
   "peerDependencies": {
-    "@spark-web/field": "^5.1.1",
-    "@spark-web/theme": "^5.10.6",
-    "react": ">=17.0.2"
+    "@spark-web/field": "^5.2.0-rc.0",
+    "@spark-web/theme": "^5.12.0-rc.0",
+    "react": ">=19.1.0"
   },
   "engines": {
     "node": ">=14"