@infonomic/uikit 6.7.5 → 6.7.6

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 (11) hide show
  1. package/dist/components/inputs/help-text.d.ts +2 -1
  2. package/dist/components/inputs/help-text.d.ts.map +1 -1
  3. package/dist/components/inputs/help-text.js +2 -1
  4. package/dist/components/inputs/input.d.ts.map +1 -1
  5. package/dist/components/inputs/input.js +3 -2
  6. package/dist/components/inputs/text-area.d.ts.map +1 -1
  7. package/dist/components/inputs/text-area.js +3 -2
  8. package/package.json +1 -1
  9. package/src/components/inputs/help-text.tsx +3 -2
  10. package/src/components/inputs/input.tsx +5 -3
  11. package/src/components/inputs/text-area.tsx +5 -3
package/dist/components/inputs/help-text.d.ts CHANGED
@@ -1,9 +1,10 @@
1
1
  import type React from 'react';
2
2
  interface HelpTextProps {
3
+ id?: string;
3
4
  className?: string;
4
5
  size?: 'sm' | 'md' | 'lg';
5
6
  text: string;
6
7
  }
7
- export declare function HelpText({ className, size, text }: HelpTextProps): React.JSX.Element;
8
+ export declare function HelpText({ id, className, size, text }: HelpTextProps): React.JSX.Element;
8
9
  export {};
9
10
  //# sourceMappingURL=help-text.d.ts.map
package/dist/components/inputs/help-text.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"help-text.d.ts","sourceRoot":"","sources":["../../../src/components/inputs/help-text.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAM9B,UAAU,aAAa;IACrB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAA;IACzB,IAAI,EAAE,MAAM,CAAA;CACb;AAED,wBAAgB,QAAQ,CAAC,EAAE,SAAS,EAAE,IAAI,EAAE,IAAI,EAAE,EAAE,aAAa,GAAG,KAAK,CAAC,GAAG,CAAC,OAAO,CAMpF"}
1
+ {"version":3,"file":"help-text.d.ts","sourceRoot":"","sources":["../../../src/components/inputs/help-text.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAM9B,UAAU,aAAa;IACrB,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAA;IACzB,IAAI,EAAE,MAAM,CAAA;CACb;AAED,wBAAgB,QAAQ,CAAC,EAAE,EAAE,EAAE,SAAS,EAAE,IAAI,EAAE,IAAI,EAAE,EAAE,aAAa,GAAG,KAAK,CAAC,GAAG,CAAC,OAAO,CAMxF"}
package/dist/components/inputs/help-text.js CHANGED
@@ -1,8 +1,9 @@
1
1
  import { jsx } from "react/jsx-runtime";
2
2
  import classnames from "classnames";
3
3
  import help_text_module from "./help-text.module.js";
4
- function HelpText({ className, size, text }) {
4
+ function HelpText({ id, className, size, text }) {
5
5
  return /*#__PURE__*/ jsx("p", {
6
+ id: id,
6
7
  className: classnames('infonomic-help-text', help_text_module.text, size && help_text_module[size], className),
7
8
  children: text
8
9
  });
package/dist/components/inputs/input.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"input.d.ts","sourceRoot":"","sources":["../../../src/components/inputs/input.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAQ9B,OAAO,KAAK,EAAE,MAAM,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,mBAAmB,CAAA;AAC9D,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAA;AAEhE,MAAM,WAAW,UAAW,SAAQ,KAAK,CAAC,mBAAmB,CAAC,gBAAgB,CAAC;IAC7E,EAAE,EAAE,MAAM,CAAA;IACV,IAAI,EAAE,MAAM,CAAA;IACZ,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,SAAS,CAAC,EAAE,IAAI,CAAA;IAChB,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,cAAc,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC,mBAAmB,CAAC,CAAA;IACxD,YAAY,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC,mBAAmB,CAAC,CAAA;IACtD,KAAK,CAAC,EAAE,OAAO,CAAA;IACf,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,qBAAqB,CAAC,EAAE,MAAM,CAAA;IAC9B,GAAG,CAAC,EAAE,KAAK,CAAC,WAAW,CAAC,gBAAgB,GAAG,IAAI,CAAC,GAAG,KAAK,CAAC,SAAS,CAAC,gBAAgB,GAAG,IAAI,CAAC,CAAA;CAC5F;AAED,eAAO,MAAM,KAAK,GAAI,EAAE,SAAS,KAAK,CAAC,WAAW,GAAG,OAAO,EAAE,sMAoB3D,UAAU,sBAgEZ,CAAA"}
1
+ {"version":3,"file":"input.d.ts","sourceRoot":"","sources":["../../../src/components/inputs/input.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAQ9B,OAAO,KAAK,EAAE,MAAM,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,mBAAmB,CAAA;AAC9D,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAA;AAEhE,MAAM,WAAW,UAAW,SAAQ,KAAK,CAAC,mBAAmB,CAAC,gBAAgB,CAAC;IAC7E,EAAE,EAAE,MAAM,CAAA;IACV,IAAI,EAAE,MAAM,CAAA;IACZ,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,SAAS,CAAC,EAAE,IAAI,CAAA;IAChB,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,cAAc,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC,mBAAmB,CAAC,CAAA;IACxD,YAAY,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC,mBAAmB,CAAC,CAAA;IACtD,KAAK,CAAC,EAAE,OAAO,CAAA;IACf,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,qBAAqB,CAAC,EAAE,MAAM,CAAA;IAC9B,GAAG,CAAC,EAAE,KAAK,CAAC,WAAW,CAAC,gBAAgB,GAAG,IAAI,CAAC,GAAG,KAAK,CAAC,SAAS,CAAC,gBAAgB,GAAG,IAAI,CAAC,CAAA;CAC5F;AAED,eAAO,MAAM,KAAK,GAAI,EAAE,SAAS,KAAK,CAAC,WAAW,GAAG,OAAO,EAAE,sMAoB3D,UAAU,sBAkEZ,CAAA"}
package/dist/components/inputs/input.js CHANGED
@@ -29,11 +29,11 @@ const Input = ({ ref, id, name, type = 'text', variant = 'outlined', inputSize =
29
29
  required: required,
30
30
  autoComplete: autoComplete,
31
31
  placeholder: placeHolder,
32
- "aria-labelledby": `label-for-${id}`,
32
+ "aria-labelledby": null != label ? `label-for-${id}` : void 0,
33
33
  "aria-invalid": error,
34
34
  "aria-required": required,
35
35
  "aria-errormessage": errorText,
36
- "aria-describedby": error ? `error-for-${id}` : void 0,
36
+ "aria-describedby": error ? `error-for-${id}` : helpText.length > 0 ? `help-for-${id}` : void 0,
37
37
  className: classnames('infonomic-input', `infonomic-input-${variant}`, `infonomic-input-${inputSize}`, `infonomic-input-${intent}`, input_module.input, input_module[variant], input_module[inputSize], input_module[intent], {
38
38
  [input_module["start-adornment-padding"]]: null != startAdornment
39
39
  }, {
@@ -54,6 +54,7 @@ const Input = ({ ref, id, name, type = 'text', variant = 'outlined', inputSize =
54
54
  size: inputSize,
55
55
  text: errorText ?? helpText
56
56
  }) : helpText?.length > 0 && /*#__PURE__*/ jsx(HelpText, {
57
+ id: `help-for-${id}`,
57
58
  size: inputSize,
58
59
  text: helpText
59
60
  })
package/dist/components/inputs/text-area.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"text-area.d.ts","sourceRoot":"","sources":["../../../src/components/inputs/text-area.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,KAAK,MAAM,OAAO,CAAA;AASnC,OAAO,KAAK,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,mBAAmB,CAAA;AAExD,MAAM,WAAW,aAAc,SAAQ,KAAK,CAAC,sBAAsB,CAAC,mBAAmB,CAAC;IACtF,EAAE,EAAE,MAAM,CAAA;IACV,IAAI,EAAE,MAAM,CAAA;IACZ,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,IAAI,EAAE,MAAM,CAAA;IACZ,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,KAAK,CAAC,EAAE,OAAO,CAAA;IACf,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,GAAG,CAAC,EAAE,KAAK,CAAC,WAAW,CAAC,mBAAmB,GAAG,IAAI,CAAC,GAAG,KAAK,CAAC,SAAS,CAAC,mBAAmB,GAAG,IAAI,CAAC,CAAA;CAClG;AAED,eAAO,MAAM,QAAQ,GAAqB,sIAgBvC,aAAa,KAAG,KAAK,CAAC,GAAG,CAAC,OAsC5B,CAAA"}
1
+ {"version":3,"file":"text-area.d.ts","sourceRoot":"","sources":["../../../src/components/inputs/text-area.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,KAAK,MAAM,OAAO,CAAA;AASnC,OAAO,KAAK,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,mBAAmB,CAAA;AAExD,MAAM,WAAW,aAAc,SAAQ,KAAK,CAAC,sBAAsB,CAAC,mBAAmB,CAAC;IACtF,EAAE,EAAE,MAAM,CAAA;IACV,IAAI,EAAE,MAAM,CAAA;IACZ,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,IAAI,EAAE,MAAM,CAAA;IACZ,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,KAAK,CAAC,EAAE,OAAO,CAAA;IACf,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,GAAG,CAAC,EAAE,KAAK,CAAC,WAAW,CAAC,mBAAmB,GAAG,IAAI,CAAC,GAAG,KAAK,CAAC,SAAS,CAAC,mBAAmB,GAAG,IAAI,CAAC,CAAA;CAClG;AAED,eAAO,MAAM,QAAQ,GAAqB,sIAgBvC,aAAa,KAAG,KAAK,CAAC,GAAG,CAAC,OAwC5B,CAAA"}
package/dist/components/inputs/text-area.js CHANGED
@@ -23,11 +23,11 @@ const text_area_TextArea = function({ ref, id, name, label, rows = 4, required =
23
23
  rows: rows,
24
24
  autoComplete: autoComplete,
25
25
  placeholder: placeHolder,
26
- "aria-labelledby": `label-for-${id}`,
26
+ "aria-labelledby": null != label ? `label-for-${id}` : void 0,
27
27
  "aria-invalid": error,
28
28
  "aria-required": required,
29
29
  "aria-errormessage": errorText,
30
- "aria-describedby": error ? `error-for-${id}` : void 0,
30
+ "aria-describedby": error ? `error-for-${id}` : helpText.length > 0 ? `help-for-${id}` : void 0,
31
31
  className: classnames('infonomic-text-area', `infonomic-text-area-${variant}`, `infonomic-text-area-${intent}`, input_module.input, input_module[variant], input_module[intent], text_area_module["text-area"], text_area_module[variant], {
32
32
  [input_module.error]: error
33
33
  }, className),
@@ -37,6 +37,7 @@ const text_area_TextArea = function({ ref, id, name, label, rows = 4, required =
37
37
  id: `error-for-${id}`,
38
38
  text: errorText ?? helpText
39
39
  }) : helpText?.length > 0 && /*#__PURE__*/ jsx(HelpText, {
40
+ id: `help-for-${id}`,
40
41
  text: helpText
41
42
  })
42
43
  ]
package/package.json CHANGED
@@ -2,7 +2,7 @@
2
2
  "name": "@infonomic/uikit",
3
3
  "private": false,
4
4
  "license": "MIT",
5
- "version": "6.7.5",
5
+ "version": "6.7.6",
6
6
  "type": "module",
7
7
  "description": "Infonomic UI kit is a collection of reusable UI components and utilities for React and Astro.",
8
8
  "keywords": [
package/src/components/inputs/help-text.tsx CHANGED
@@ -5,14 +5,15 @@ import cx from 'classnames'
5
5
  import styles from './help-text.module.css'
6
6
 
7
7
  interface HelpTextProps {
8
+ id?: string
8
9
  className?: string
9
10
  size?: 'sm' | 'md' | 'lg'
10
11
  text: string
11
12
  }
12
13
 
13
- export function HelpText({ className, size, text }: HelpTextProps): React.JSX.Element {
14
+ export function HelpText({ id, className, size, text }: HelpTextProps): React.JSX.Element {
14
15
  return (
15
- <p className={cx('infonomic-help-text', styles.text, size && styles[size], className)}>
16
+ <p id={id} className={cx('infonomic-help-text', styles.text, size && styles[size], className)}>
16
17
  {text}
17
18
  </p>
18
19
  )
package/src/components/inputs/input.tsx CHANGED
@@ -76,11 +76,13 @@ export const Input = <_C extends React.ElementType = 'input'>({
76
76
  required={required}
77
77
  autoComplete={autoComplete}
78
78
  placeholder={placeHolder}
79
- aria-labelledby={`label-for-${id}`}
79
+ aria-labelledby={label != null ? `label-for-${id}` : undefined}
80
80
  aria-invalid={error}
81
81
  aria-required={required}
82
82
  aria-errormessage={errorText}
83
- aria-describedby={error ? `error-for-${id}` : undefined}
83
+ aria-describedby={
84
+ error ? `error-for-${id}` : helpText.length > 0 ? `help-for-${id}` : undefined
85
+ }
84
86
  className={cx(
85
87
  'infonomic-input',
86
88
  `infonomic-input-${variant}`,
@@ -112,7 +114,7 @@ export const Input = <_C extends React.ElementType = 'input'>({
112
114
  {error ? (
113
115
  <ErrorText id={`error-for-${id}`} size={inputSize} text={errorText ?? helpText} />
114
116
  ) : (
115
- helpText?.length > 0 && <HelpText size={inputSize} text={helpText} />
117
+ helpText?.length > 0 && <HelpText id={`help-for-${id}`} size={inputSize} text={helpText} />
116
118
  )}
117
119
  </div>
118
120
  )
package/src/components/inputs/text-area.tsx CHANGED
@@ -54,11 +54,13 @@ export const TextArea = function TextArea({
54
54
  rows={rows}
55
55
  autoComplete={autoComplete}
56
56
  placeholder={placeHolder}
57
- aria-labelledby={`label-for-${id}`}
57
+ aria-labelledby={label != null ? `label-for-${id}` : undefined}
58
58
  aria-invalid={error}
59
59
  aria-required={required}
60
60
  aria-errormessage={errorText}
61
- aria-describedby={error ? `error-for-${id}` : undefined}
61
+ aria-describedby={
62
+ error ? `error-for-${id}` : helpText.length > 0 ? `help-for-${id}` : undefined
63
+ }
62
64
  className={cx(
63
65
  'infonomic-text-area',
64
66
  `infonomic-text-area-${variant}`,
@@ -76,7 +78,7 @@ export const TextArea = function TextArea({
76
78
  {error ? (
77
79
  <ErrorText id={`error-for-${id}`} text={errorText ?? helpText} />
78
80
  ) : (
79
- helpText?.length > 0 && <HelpText text={helpText} />
81
+ helpText?.length > 0 && <HelpText id={`help-for-${id}`} text={helpText} />
80
82
  )}
81
83
  </div>
82
84
  )