@spark-web/text-input 5.0.0 → 5.1.1

package/CHANGELOG.md

@@ -1,5 +1,33 @@
 # @spark-web/text-input
 
+## 5.1.1
+
+### Patch Changes
+
+- [#621](https://github.com/brighte-labs/spark-web/pull/621)
+  [`bc2f972`](https://github.com/brighte-labs/spark-web/commit/bc2f97209f7207bb993aee971e9407d6fdd83751)
+  Thanks [@mkt-brighte](https://github.com/mkt-brighte)! - Update form field
+  border to meet minimum contrast requirement
+
+- Updated dependencies
+  [[`bc2f972`](https://github.com/brighte-labs/spark-web/commit/bc2f97209f7207bb993aee971e9407d6fdd83751)]:
+  - @spark-web/theme@5.10.5
+
+## 5.1.0
+
+### Minor Changes
+
+- [#600](https://github.com/brighte-labs/spark-web/pull/600)
+  [`8e0bb68`](https://github.com/brighte-labs/spark-web/commit/8e0bb683181ee4f56f9fdcf378e48d9adae9475e)
+  Thanks [@chrischua-brighte](https://github.com/chrischua-brighte)! - add
+  readonly and overflowstrategy
+
+### Patch Changes
+
+- Updated dependencies
+  [[`8e0bb68`](https://github.com/brighte-labs/spark-web/commit/8e0bb683181ee4f56f9fdcf378e48d9adae9475e)]:
+  - @spark-web/field@5.1.0
+
 ## 5.0.0
 
 ### Major Changes

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

@@ -1,4 +1,5 @@
 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";
@@ -22,6 +23,8 @@ 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<{
@@ -41,22 +44,26 @@ export declare const TextInput: import("react").ForwardRefExoticComponent<{
      * otherwise it will not be rendered.
      */
     children?: AdornmentsAsChildren;
+    /** Manage how text behaves with regard to overflow. */
+    overflowStrategy?: "nowrap" | "truncate" | "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, }: UseInputStylesProps) => readonly [{
+export declare const useInputStyles: ({ disabled, startAdornment, endAdornment, readOnly, overflowStrategy, }: 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': {

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

@@ -127,6 +127,7 @@ 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",
@@ -135,7 +136,7 @@ var FocusIndicator = function FocusIndicator(_ref2) {
     }
     // Styles
     ,
-    border: invalid ? 'critical' : 'field',
+    border: invalid ? 'critical' : theme$1.components.textInput.borderColor,
     borderRadius: "small",
     position: "absolute",
     bottom: 0,
@@ -180,17 +181,19 @@ var childrenToAdornments = function childrenToAdornments(children) {
   };
 };
 
-var _excluded = ["children", "data"];
+var _excluded = ["children", "data", "overflowStrategy"];
 /** 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,
@@ -199,7 +202,9 @@ var TextInput = /*#__PURE__*/react.forwardRef(function (_ref, forwardedRef) {
       disabled: disabled,
       invalid: invalid,
       startAdornment: Boolean(startAdornment),
-      endAdornment: Boolean(endAdornment)
+      endAdornment: Boolean(endAdornment),
+      readOnly: readOnly,
+      overflowStrategy: overflowStrategy
     }),
     _useInputStyles2 = _slicedToArray(_useInputStyles, 2),
     boxProps = _useInputStyles2[0],
@@ -214,6 +219,7 @@ var TextInput = /*#__PURE__*/react.forwardRef(function (_ref, forwardedRef) {
       css: react$1.css(inputStyles),
       data: data,
       disabled: disabled,
+      readOnly: readOnly,
       ref: forwardedRef
     }))
   });
@@ -227,15 +233,18 @@ TextInput.displayName = 'TextInput';
 var useInputStyles = function useInputStyles(_ref2) {
   var disabled = _ref2.disabled,
     startAdornment = _ref2.startAdornment,
-    endAdornment = _ref2.endAdornment;
+    endAdornment = _ref2.endAdornment,
+    readOnly = _ref2.readOnly,
+    _ref2$overflowStrateg = _ref2.overflowStrategy,
+    overflowStrategy = _ref2$overflowStrateg === void 0 ? 'truncate' : _ref2$overflowStrateg;
   var theme$1 = theme.useTheme();
-  var overflowStyles = text.useOverflowStrategy('truncate');
+  var overflowStyles = text.useOverflowStrategy(overflowStrategy);
   var focusRingStyles = a11y.useFocusRing({
     always: true
   });
   var textStyles = text.useText({
     baseline: false,
-    tone: disabled ? 'disabled' : 'neutral',
+    tone: disabled || readOnly ? 'disabled' : 'neutral',
     size: 'standard',
     weight: 'regular'
   });

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

@@ -127,6 +127,7 @@ 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",
@@ -135,7 +136,7 @@ var FocusIndicator = function FocusIndicator(_ref2) {
     }
     // Styles
     ,
-    border: invalid ? 'critical' : 'field',
+    border: invalid ? 'critical' : theme$1.components.textInput.borderColor,
     borderRadius: "small",
     position: "absolute",
     bottom: 0,
@@ -180,17 +181,19 @@ var childrenToAdornments = function childrenToAdornments(children) {
   };
 };
 
-var _excluded = ["children", "data"];
+var _excluded = ["children", "data", "overflowStrategy"];
 /** 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,
@@ -199,7 +202,9 @@ var TextInput = /*#__PURE__*/react.forwardRef(function (_ref, forwardedRef) {
       disabled: disabled,
       invalid: invalid,
       startAdornment: Boolean(startAdornment),
-      endAdornment: Boolean(endAdornment)
+      endAdornment: Boolean(endAdornment),
+      readOnly: readOnly,
+      overflowStrategy: overflowStrategy
     }),
     _useInputStyles2 = _slicedToArray(_useInputStyles, 2),
     boxProps = _useInputStyles2[0],
@@ -214,6 +219,7 @@ var TextInput = /*#__PURE__*/react.forwardRef(function (_ref, forwardedRef) {
       css: react$1.css(inputStyles),
       data: data,
       disabled: disabled,
+      readOnly: readOnly,
       ref: forwardedRef
     }))
   });
@@ -227,15 +233,18 @@ TextInput.displayName = 'TextInput';
 var useInputStyles = function useInputStyles(_ref2) {
   var disabled = _ref2.disabled,
     startAdornment = _ref2.startAdornment,
-    endAdornment = _ref2.endAdornment;
+    endAdornment = _ref2.endAdornment,
+    readOnly = _ref2.readOnly,
+    _ref2$overflowStrateg = _ref2.overflowStrategy,
+    overflowStrategy = _ref2$overflowStrateg === void 0 ? 'truncate' : _ref2$overflowStrateg;
   var theme$1 = theme.useTheme();
-  var overflowStyles = text.useOverflowStrategy('truncate');
+  var overflowStyles = text.useOverflowStrategy(overflowStrategy);
   var focusRingStyles = a11y.useFocusRing({
     always: true
   });
   var textStyles = text.useText({
     baseline: false,
-    tone: disabled ? 'disabled' : 'neutral',
+    tone: disabled || readOnly ? 'disabled' : 'neutral',
     size: 'standard',
     weight: 'regular'
   });

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

@@ -123,6 +123,7 @@ 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",
@@ -131,7 +132,7 @@ var FocusIndicator = function FocusIndicator(_ref2) {
     }
     // Styles
     ,
-    border: invalid ? 'critical' : 'field',
+    border: invalid ? 'critical' : theme.components.textInput.borderColor,
     borderRadius: "small",
     position: "absolute",
     bottom: 0,
@@ -176,17 +177,19 @@ var childrenToAdornments = function childrenToAdornments(children) {
   };
 };
 
-var _excluded = ["children", "data"];
+var _excluded = ["children", "data", "overflowStrategy"];
 /** 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,
@@ -195,7 +198,9 @@ var TextInput = /*#__PURE__*/forwardRef(function (_ref, forwardedRef) {
       disabled: disabled,
       invalid: invalid,
       startAdornment: Boolean(startAdornment),
-      endAdornment: Boolean(endAdornment)
+      endAdornment: Boolean(endAdornment),
+      readOnly: readOnly,
+      overflowStrategy: overflowStrategy
     }),
     _useInputStyles2 = _slicedToArray(_useInputStyles, 2),
     boxProps = _useInputStyles2[0],
@@ -210,6 +215,7 @@ var TextInput = /*#__PURE__*/forwardRef(function (_ref, forwardedRef) {
       css: css(inputStyles),
       data: data,
       disabled: disabled,
+      readOnly: readOnly,
       ref: forwardedRef
     }))
   });
@@ -223,15 +229,18 @@ TextInput.displayName = 'TextInput';
 var useInputStyles = function useInputStyles(_ref2) {
   var disabled = _ref2.disabled,
     startAdornment = _ref2.startAdornment,
-    endAdornment = _ref2.endAdornment;
+    endAdornment = _ref2.endAdornment,
+    readOnly = _ref2.readOnly,
+    _ref2$overflowStrateg = _ref2.overflowStrategy,
+    overflowStrategy = _ref2$overflowStrateg === void 0 ? 'truncate' : _ref2$overflowStrateg;
   var theme = useTheme();
-  var overflowStyles = useOverflowStrategy('truncate');
+  var overflowStyles = useOverflowStrategy(overflowStrategy);
   var focusRingStyles = useFocusRing({
     always: true
   });
   var textStyles = useText({
     baseline: false,
-    tone: disabled ? 'disabled' : 'neutral',
+    tone: disabled || readOnly ? 'disabled' : 'neutral',
     size: 'standard',
     weight: 'regular'
   });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@spark-web/text-input",
-  "version": "5.0.0",
+  "version": "5.1.1",
   "homepage": "https://github.com/brighte-labs/spark-web#readme",
   "repository": {
     "type": "git",
@@ -20,16 +20,16 @@
     "@spark-web/a11y": "^5.0.0",
     "@spark-web/box": "^5.0.0",
     "@spark-web/text": "^5.0.0",
-    "@spark-web/theme": "^5.0.0",
+    "@spark-web/theme": "^5.10.5",
     "@spark-web/utils": "^5.0.0"
   },
   "devDependencies": {
-    "@spark-web/field": "^5.0.0",
+    "@spark-web/field": "^5.1.0",
     "@types/react": "^18.2.0",
     "react": "^18.2.0"
   },
   "peerDependencies": {
-    "@spark-web/field": "^5.0.0",
+    "@spark-web/field": "^5.1.0",
     "react": ">=17.0.2"
   },
   "engines": {