@spark-web/text-input 5.0.0-rc.31 → 5.1.0

package/CHANGELOG.md

@@ -1,5 +1,65 @@
 # @spark-web/text-input
 
+## 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
+
+- This release of spark-web standardises the version across all packages to be
+  **`v5`**, primarily signifying the switch from `@emotion/css` to
+  `@emotion/react` as one of the key dependencies of the entire library, in
+  order to support server-side rendering / SSR.
+
+  This release also introduces support for theming, to allow for more co-branded
+  experiences across our web applications. It also supports component-level
+  theming for `<Button />`, `<ButtonLink />`, and `<Checkbox />`, which provides
+  the capability to override the global theme available inside an application.
+
+  To use this in an application, you can wrap the affected areas with a
+  `ThemeProvider`:
+
+  ```
+  <ThemeProvider theme="pantheon">
+    <Input type="text" />
+    <Button type="submit" />
+  </ThemeProvider>
+  ```
+
+  Part of the theming capabilities includes a new theme for `spark-web` called
+  "pantheon", which should map with our co-branding efforts in the Pantheon
+  project. It currently includes a small set of colors and its corresponding
+  font family.
+
+### Patch Changes
+
+- [#532](https://github.com/brighte-labs/spark-web/pull/532)
+  [`631573c`](https://github.com/brighte-labs/spark-web/commit/631573cb72981d99b9afa4ad559123f44e47b2a9)
+  Thanks [@ralcoriza-brighte](https://github.com/ralcoriza-brighte)! - Fix
+  type-related issues
+
+- Updated dependencies
+  [[`631573c`](https://github.com/brighte-labs/spark-web/commit/631573cb72981d99b9afa4ad559123f44e47b2a9)]:
+  - @spark-web/field@5.0.0
+  - @spark-web/theme@5.0.0
+  - @spark-web/utils@5.0.0
+  - @spark-web/a11y@5.0.0
+  - @spark-web/text@5.0.0
+  - @spark-web/box@5.0.0
+
 ## 5.0.0-rc.31
 
 ### Patch 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,17 +44,21 @@ 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, }: UseInputStylesProps) => readonly [{
+export declare const useInputStyles: ({ disabled, startAdornment, endAdornment, readOnly, overflowStrategy, }: UseInputStylesProps) => readonly [{
     readonly flex: 1;
     readonly position: "relative";
     readonly height: "medium";

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

@@ -180,17 +180,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 +201,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 +218,7 @@ var TextInput = /*#__PURE__*/react.forwardRef(function (_ref, forwardedRef) {
       css: react$1.css(inputStyles),
       data: data,
       disabled: disabled,
+      readOnly: readOnly,
       ref: forwardedRef
     }))
   });
@@ -227,15 +232,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

@@ -180,17 +180,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 +201,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 +218,7 @@ var TextInput = /*#__PURE__*/react.forwardRef(function (_ref, forwardedRef) {
       css: react$1.css(inputStyles),
       data: data,
       disabled: disabled,
+      readOnly: readOnly,
       ref: forwardedRef
     }))
   });
@@ -227,15 +232,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

@@ -176,17 +176,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 +197,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 +214,7 @@ var TextInput = /*#__PURE__*/forwardRef(function (_ref, forwardedRef) {
       css: css(inputStyles),
       data: data,
       disabled: disabled,
+      readOnly: readOnly,
       ref: forwardedRef
     }))
   });
@@ -223,15 +228,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-rc.31",
+  "version": "5.1.0",
   "homepage": "https://github.com/brighte-labs/spark-web#readme",
   "repository": {
     "type": "git",
@@ -17,19 +17,19 @@
   "dependencies": {
     "@babel/runtime": "^7.25.0",
     "@emotion/react": "^11.14.0",
-    "@spark-web/a11y": "^5.0.0-rc.31",
-    "@spark-web/box": "^5.0.0-rc.31",
-    "@spark-web/text": "^5.0.0-rc.31",
-    "@spark-web/theme": "^5.0.0-rc.31",
-    "@spark-web/utils": "^5.0.0-rc.31"
+    "@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/utils": "^5.0.0"
   },
   "devDependencies": {
-    "@spark-web/field": "^5.0.0-rc.31",
+    "@spark-web/field": "^5.1.0",
     "@types/react": "^18.2.0",
     "react": "^18.2.0"
   },
   "peerDependencies": {
-    "@spark-web/field": "^5.0.0-rc.31",
+    "@spark-web/field": "^5.1.0",
     "react": ">=17.0.2"
   },
   "engines": {