@spark-web/field 5.2.0-rc.0 → 5.3.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (8) hide show
  1. package/CHANGELOG.md +47 -10
  2. package/dist/declarations/src/context.d.ts +4 -4
  3. package/dist/declarations/src/field.d.ts +6 -4
  4. package/dist/spark-web-field.cjs.d.ts +1 -1
  5. package/dist/spark-web-field.cjs.dev.js +15 -8
  6. package/dist/spark-web-field.cjs.prod.js +15 -8
  7. package/dist/spark-web-field.esm.js +15 -8
  8. package/package.json +9 -9
package/CHANGELOG.md CHANGED
@@ -1,21 +1,58 @@
1
1
  # @spark-web/field
2
2
 
3
- ## 5.2.0-rc.0
3
+ ## 5.3.0
4
4
 
5
5
  ### Minor Changes
6
6
 
7
- - update react version and other packages
7
+ - [#667](https://github.com/brighte-labs/spark-web/pull/667)
8
+ [`80d9c15`](https://github.com/brighte-labs/spark-web/commit/80d9c156a40bbcd2b1a91a2d0403b3c8e9b47b4e)
9
+ Thanks [@Leo704099](https://github.com/Leo704099)! - Support react 17 to 19
8
10
 
9
11
  ### Patch Changes
10
12
 
11
- - Updated dependencies []:
12
- - @spark-web/stack@5.1.0-rc.0
13
- - @spark-web/theme@5.12.0-rc.0
14
- - @spark-web/utils@5.1.0-rc.0
15
- - @spark-web/a11y@5.3.0-rc.0
16
- - @spark-web/icon@5.1.0-rc.0
17
- - @spark-web/text@5.3.0-rc.0
18
- - @spark-web/box@6.0.0-rc.0
13
+ - Updated dependencies
14
+ [[`80d9c15`](https://github.com/brighte-labs/spark-web/commit/80d9c156a40bbcd2b1a91a2d0403b3c8e9b47b4e)]:
15
+ - @spark-web/stack@5.1.0
16
+ - @spark-web/theme@5.13.0
17
+ - @spark-web/utils@5.1.0
18
+ - @spark-web/a11y@5.3.0
19
+ - @spark-web/icon@5.1.0
20
+ - @spark-web/text@5.3.0
21
+ - @spark-web/box@6.0.0
22
+
23
+ ## 5.2.0
24
+
25
+ ### Minor Changes
26
+
27
+ - [#741](https://github.com/brighte-labs/spark-web/pull/741)
28
+ [`3a5ee14`](https://github.com/brighte-labs/spark-web/pull/741/changes/3a5ee146fef8fb3a3e46f6873099438bcffd59d2)
29
+ Thanks [@raivenlopez](https://github.com/raivenlopez)! - Allow both component
30
+ and text in Field description
31
+
32
+ ## 5.1.3
33
+
34
+ ### Patch Changes
35
+
36
+ - [#698](https://github.com/brighte-labs/spark-web/pull/698)
37
+ [`814b373`](https://github.com/brighte-labs/spark-web/commit/814b373cbe9fcf0757738c78eef6b516624df62c)
38
+ Thanks [@michtntbrighte](https://github.com/michtntbrighte)! - Bump version
39
+
40
+ - Updated dependencies
41
+ [[`814b373`](https://github.com/brighte-labs/spark-web/commit/814b373cbe9fcf0757738c78eef6b516624df62c)]:
42
+ - @spark-web/box@5.2.2
43
+ - @spark-web/stack@5.0.2
44
+ - @spark-web/text@5.2.3
45
+ - @spark-web/theme@5.12.1
46
+
47
+ ## 5.1.2
48
+
49
+ ### Patch Changes
50
+
51
+ - Updated dependencies
52
+ [[`1995db7`](https://github.com/brighte-labs/spark-web/commit/1995db7f4342803732c7648ab3ca6d32442cc347)]:
53
+ - @spark-web/theme@5.12.0
54
+ - @spark-web/stack@5.0.1
55
+ - @spark-web/text@5.2.2
19
56
 
20
57
  ## 5.1.1
21
58
 
package/dist/declarations/src/context.d.ts CHANGED
@@ -1,14 +1,14 @@
1
- /// <reference types="react" />
2
- export declare type FieldState = {
1
+ export type FieldState = {
3
2
  disabled: boolean;
4
3
  invalid: boolean;
4
+ readOnly?: boolean;
5
5
  };
6
- export declare type InputPropsDerivedFromField = {
6
+ export type InputPropsDerivedFromField = {
7
7
  'aria-describedby'?: string;
8
8
  'aria-invalid': true | undefined;
9
9
  id: string;
10
10
  };
11
- export declare type FieldContextType = [FieldState, InputPropsDerivedFromField];
11
+ export type FieldContextType = [FieldState, InputPropsDerivedFromField];
12
12
  export declare const FieldContext: import("react").Context<FieldContextType | null>;
13
13
  export declare const FieldContextProvider: import("react").Provider<FieldContextType | null>;
14
14
  export declare const FIELD_CONTEXT_ERROR_MESSAGE = "Input components must be inside a `Field`.";
package/dist/declarations/src/field.d.ts CHANGED
@@ -1,7 +1,7 @@
1
1
  import type { DataAttributeMap } from '@spark-web/utils/internal';
2
2
  import type { ReactElement, ReactNode } from 'react';
3
- export declare type Tone = keyof typeof messageToneMap;
4
- export declare type FieldProps = {
3
+ export type Tone = keyof typeof messageToneMap;
4
+ export type FieldProps = {
5
5
  /** Sets a unique identifier for the component. */
6
6
  id?: string;
7
7
  /** Sets data attributes on the component. */
@@ -16,7 +16,7 @@ export declare type FieldProps = {
16
16
  */
17
17
  disabled?: boolean;
18
18
  /** Provide additional information that will aid user input. */
19
- description?: string;
19
+ description?: string | ReactNode;
20
20
  /** Concisely label the field. */
21
21
  label: string;
22
22
  /**
@@ -30,6 +30,8 @@ export declare type FieldProps = {
30
30
  secondaryLabel?: string;
31
31
  /** Provide a tone to influence elements of the field, and its input. */
32
32
  tone?: Tone;
33
+ /** Sets input to readonly, which is focusable. */
34
+ readOnly?: boolean;
33
35
  };
34
36
  /**
35
37
  * Using a [context](https://reactjs.org/docs/context.html), the field
@@ -46,6 +48,6 @@ declare const messageToneMap: {
46
48
  readonly neutral: "muted";
47
49
  readonly positive: "positive";
48
50
  };
49
- declare type FieldMessageProps = Required<Pick<FieldProps, 'message' | 'id' | 'tone'>>;
51
+ type FieldMessageProps = Required<Pick<FieldProps, 'message' | 'id' | 'tone'>>;
50
52
  export declare const FieldMessage: ({ message, id, tone }: FieldMessageProps) => import("@emotion/react/jsx-runtime").JSX.Element;
51
53
  export {};
package/dist/spark-web-field.cjs.d.ts CHANGED
@@ -1,2 +1,2 @@
1
- export * from "./declarations/src/index";
1
+ export * from "./declarations/src/index.js";
2
2
  //# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic3Bhcmstd2ViLWZpZWxkLmNqcy5kLnRzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi9kZWNsYXJhdGlvbnMvc3JjL2luZGV4LmQudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEifQ==
package/dist/spark-web-field.cjs.dev.js CHANGED
@@ -41,7 +41,9 @@ var Field = /*#__PURE__*/react.forwardRef(function (_ref, forwardedRef) {
41
41
  message = _ref.message,
42
42
  secondaryLabel = _ref.secondaryLabel,
43
43
  _ref$tone = _ref.tone,
44
- tone = _ref$tone === void 0 ? 'neutral' : _ref$tone;
44
+ tone = _ref$tone === void 0 ? 'neutral' : _ref$tone,
45
+ _ref$readOnly = _ref.readOnly,
46
+ readOnly = _ref$readOnly === void 0 ? false : _ref$readOnly;
45
47
  var _useFieldIds = useFieldIds(idProp),
46
48
  descriptionId = _useFieldIds.descriptionId,
47
49
  inputId = _useFieldIds.inputId,
@@ -52,13 +54,14 @@ var Field = /*#__PURE__*/react.forwardRef(function (_ref, forwardedRef) {
52
54
  var fieldContext = react.useMemo(function () {
53
55
  return [{
54
56
  disabled: disabled,
55
- invalid: invalid
57
+ invalid: invalid,
58
+ readOnly: readOnly
56
59
  }, {
57
- 'aria-describedby': a11y.mergeIds(message && messageId, description && descriptionId),
60
+ 'aria-describedby': a11y.mergeIds(message && messageId, description ? descriptionId : undefined),
58
61
  'aria-invalid': invalid || undefined,
59
62
  id: inputId
60
63
  }];
61
- }, [description, descriptionId, disabled, inputId, invalid, message, messageId]);
64
+ }, [description, descriptionId, disabled, inputId, invalid, message, messageId, readOnly]);
62
65
 
63
66
  // label prep
64
67
  var hiddenLabel = jsxRuntime.jsxs(a11y.VisuallyHidden, {
@@ -72,11 +75,11 @@ var Field = /*#__PURE__*/react.forwardRef(function (_ref, forwardedRef) {
72
75
  as: "label",
73
76
  htmlFor: inputId,
74
77
  children: jsxRuntime.jsxs(text.Text, {
75
- tone: disabled ? 'disabled' : 'neutral',
78
+ tone: disabled || readOnly ? 'field' : 'neutral',
76
79
  weight: "semibold",
77
80
  children: [label, ' ', secondaryLabel && jsxRuntime.jsx(text.Text, {
78
81
  inline: true,
79
- tone: disabled ? 'disabled' : 'muted',
82
+ tone: disabled || readOnly ? 'field' : 'muted',
80
83
  weight: "regular",
81
84
  children: secondaryLabel
82
85
  })]
@@ -98,12 +101,16 @@ var Field = /*#__PURE__*/react.forwardRef(function (_ref, forwardedRef) {
98
101
  gap: "medium",
99
102
  children: [jsxRuntime.jsxs(LabelWrapper, {
100
103
  children: [labelElement[labelVisibility], adornment]
101
- }), description && jsxRuntime.jsx(text.Text, {
104
+ }), description && (typeof description === 'string' ? jsxRuntime.jsx(text.Text, {
102
105
  tone: "muted",
103
106
  size: "small",
104
107
  id: descriptionId,
105
108
  children: description
106
- }), children, message && jsxRuntime.jsx(FieldMessage, {
109
+ }) : jsxRuntime.jsx(box.Box, {
110
+ as: "label",
111
+ htmlFor: descriptionId,
112
+ children: description
113
+ })), children, message && jsxRuntime.jsx(FieldMessage, {
107
114
  tone: tone,
108
115
  id: messageId,
109
116
  message: message
package/dist/spark-web-field.cjs.prod.js CHANGED
@@ -41,7 +41,9 @@ var Field = /*#__PURE__*/react.forwardRef(function (_ref, forwardedRef) {
41
41
  message = _ref.message,
42
42
  secondaryLabel = _ref.secondaryLabel,
43
43
  _ref$tone = _ref.tone,
44
- tone = _ref$tone === void 0 ? 'neutral' : _ref$tone;
44
+ tone = _ref$tone === void 0 ? 'neutral' : _ref$tone,
45
+ _ref$readOnly = _ref.readOnly,
46
+ readOnly = _ref$readOnly === void 0 ? false : _ref$readOnly;
45
47
  var _useFieldIds = useFieldIds(idProp),
46
48
  descriptionId = _useFieldIds.descriptionId,
47
49
  inputId = _useFieldIds.inputId,
@@ -52,13 +54,14 @@ var Field = /*#__PURE__*/react.forwardRef(function (_ref, forwardedRef) {
52
54
  var fieldContext = react.useMemo(function () {
53
55
  return [{
54
56
  disabled: disabled,
55
- invalid: invalid
57
+ invalid: invalid,
58
+ readOnly: readOnly
56
59
  }, {
57
- 'aria-describedby': a11y.mergeIds(message && messageId, description && descriptionId),
60
+ 'aria-describedby': a11y.mergeIds(message && messageId, description ? descriptionId : undefined),
58
61
  'aria-invalid': invalid || undefined,
59
62
  id: inputId
60
63
  }];
61
- }, [description, descriptionId, disabled, inputId, invalid, message, messageId]);
64
+ }, [description, descriptionId, disabled, inputId, invalid, message, messageId, readOnly]);
62
65
 
63
66
  // label prep
64
67
  var hiddenLabel = jsxRuntime.jsxs(a11y.VisuallyHidden, {
@@ -72,11 +75,11 @@ var Field = /*#__PURE__*/react.forwardRef(function (_ref, forwardedRef) {
72
75
  as: "label",
73
76
  htmlFor: inputId,
74
77
  children: jsxRuntime.jsxs(text.Text, {
75
- tone: disabled ? 'disabled' : 'neutral',
78
+ tone: disabled || readOnly ? 'field' : 'neutral',
76
79
  weight: "semibold",
77
80
  children: [label, ' ', secondaryLabel && jsxRuntime.jsx(text.Text, {
78
81
  inline: true,
79
- tone: disabled ? 'disabled' : 'muted',
82
+ tone: disabled || readOnly ? 'field' : 'muted',
80
83
  weight: "regular",
81
84
  children: secondaryLabel
82
85
  })]
@@ -98,12 +101,16 @@ var Field = /*#__PURE__*/react.forwardRef(function (_ref, forwardedRef) {
98
101
  gap: "medium",
99
102
  children: [jsxRuntime.jsxs(LabelWrapper, {
100
103
  children: [labelElement[labelVisibility], adornment]
101
- }), description && jsxRuntime.jsx(text.Text, {
104
+ }), description && (typeof description === 'string' ? jsxRuntime.jsx(text.Text, {
102
105
  tone: "muted",
103
106
  size: "small",
104
107
  id: descriptionId,
105
108
  children: description
106
- }), children, message && jsxRuntime.jsx(FieldMessage, {
109
+ }) : jsxRuntime.jsx(box.Box, {
110
+ as: "label",
111
+ htmlFor: descriptionId,
112
+ children: description
113
+ })), children, message && jsxRuntime.jsx(FieldMessage, {
107
114
  tone: tone,
108
115
  id: messageId,
109
116
  message: message
package/dist/spark-web-field.esm.js CHANGED
@@ -37,7 +37,9 @@ var Field = /*#__PURE__*/forwardRef(function (_ref, forwardedRef) {
37
37
  message = _ref.message,
38
38
  secondaryLabel = _ref.secondaryLabel,
39
39
  _ref$tone = _ref.tone,
40
- tone = _ref$tone === void 0 ? 'neutral' : _ref$tone;
40
+ tone = _ref$tone === void 0 ? 'neutral' : _ref$tone,
41
+ _ref$readOnly = _ref.readOnly,
42
+ readOnly = _ref$readOnly === void 0 ? false : _ref$readOnly;
41
43
  var _useFieldIds = useFieldIds(idProp),
42
44
  descriptionId = _useFieldIds.descriptionId,
43
45
  inputId = _useFieldIds.inputId,
@@ -48,13 +50,14 @@ var Field = /*#__PURE__*/forwardRef(function (_ref, forwardedRef) {
48
50
  var fieldContext = useMemo(function () {
49
51
  return [{
50
52
  disabled: disabled,
51
- invalid: invalid
53
+ invalid: invalid,
54
+ readOnly: readOnly
52
55
  }, {
53
- 'aria-describedby': mergeIds(message && messageId, description && descriptionId),
56
+ 'aria-describedby': mergeIds(message && messageId, description ? descriptionId : undefined),
54
57
  'aria-invalid': invalid || undefined,
55
58
  id: inputId
56
59
  }];
57
- }, [description, descriptionId, disabled, inputId, invalid, message, messageId]);
60
+ }, [description, descriptionId, disabled, inputId, invalid, message, messageId, readOnly]);
58
61
 
59
62
  // label prep
60
63
  var hiddenLabel = jsxs(VisuallyHidden, {
@@ -68,11 +71,11 @@ var Field = /*#__PURE__*/forwardRef(function (_ref, forwardedRef) {
68
71
  as: "label",
69
72
  htmlFor: inputId,
70
73
  children: jsxs(Text, {
71
- tone: disabled ? 'disabled' : 'neutral',
74
+ tone: disabled || readOnly ? 'field' : 'neutral',
72
75
  weight: "semibold",
73
76
  children: [label, ' ', secondaryLabel && jsx(Text, {
74
77
  inline: true,
75
- tone: disabled ? 'disabled' : 'muted',
78
+ tone: disabled || readOnly ? 'field' : 'muted',
76
79
  weight: "regular",
77
80
  children: secondaryLabel
78
81
  })]
@@ -94,12 +97,16 @@ var Field = /*#__PURE__*/forwardRef(function (_ref, forwardedRef) {
94
97
  gap: "medium",
95
98
  children: [jsxs(LabelWrapper, {
96
99
  children: [labelElement[labelVisibility], adornment]
97
- }), description && jsx(Text, {
100
+ }), description && (typeof description === 'string' ? jsx(Text, {
98
101
  tone: "muted",
99
102
  size: "small",
100
103
  id: descriptionId,
101
104
  children: description
102
- }), children, message && jsx(FieldMessage, {
105
+ }) : jsx(Box, {
106
+ as: "label",
107
+ htmlFor: descriptionId,
108
+ children: description
109
+ })), children, message && jsx(FieldMessage, {
103
110
  tone: tone,
104
111
  id: messageId,
105
112
  message: message
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@spark-web/field",
3
- "version": "5.2.0-rc.0",
3
+ "version": "5.3.0",
4
4
  "homepage": "https://github.com/brighte-labs/spark-web#readme",
5
5
  "repository": {
6
6
  "type": "git",
@@ -17,20 +17,20 @@
17
17
  "dependencies": {
18
18
  "@babel/runtime": "^7.25.0",
19
19
  "@emotion/react": "^11.14.0",
20
- "@spark-web/a11y": "^5.3.0-rc.0",
21
- "@spark-web/box": "^6.0.0-rc.0",
22
- "@spark-web/icon": "^5.1.0-rc.0",
23
- "@spark-web/stack": "^5.1.0-rc.0",
24
- "@spark-web/text": "^5.3.0-rc.0",
25
- "@spark-web/theme": "^5.12.0-rc.0",
26
- "@spark-web/utils": "^5.1.0-rc.0"
20
+ "@spark-web/a11y": "^5.3.0",
21
+ "@spark-web/box": "^6.0.0",
22
+ "@spark-web/icon": "^5.1.0",
23
+ "@spark-web/stack": "^5.1.0",
24
+ "@spark-web/text": "^5.3.0",
25
+ "@spark-web/theme": "^5.13.0",
26
+ "@spark-web/utils": "^5.1.0"
27
27
  },
28
28
  "devDependencies": {
29
29
  "@types/react": "^19.1.0",
30
30
  "react": "^19.1.0"
31
31
  },
32
32
  "peerDependencies": {
33
- "react": ">=19.1.0"
33
+ "react": "^17.0.0 || ^18.0.0 || ^19.0.0"
34
34
  },
35
35
  "engines": {
36
36
  "node": ">=14"