@canonical/react-ds-core-form 0.9.0-experimental.10 → 0.9.0-experimental.11

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 (90) hide show
  1. package/dist/esm/ui/Field/Field.js +3 -5
  2. package/dist/esm/ui/Field/Field.js.map +1 -1
  3. package/dist/esm/ui/Field/common/Error/Error.js +12 -0
  4. package/dist/esm/ui/Field/common/Error/Error.js.map +1 -0
  5. package/dist/esm/ui/Field/common/Error/index.js +4 -0
  6. package/dist/esm/ui/Field/common/Error/index.js.map +1 -0
  7. package/dist/esm/ui/Field/common/Error/styles.css +7 -0
  8. package/dist/esm/ui/Field/common/Error/types.js +2 -0
  9. package/dist/esm/ui/Field/common/Error/types.js.map +1 -0
  10. package/dist/esm/ui/Field/common/Label/Label.js +7 -3
  11. package/dist/esm/ui/Field/common/Label/Label.js.map +1 -1
  12. package/dist/esm/ui/Field/common/Wrapper/Wrapper.js +13 -4
  13. package/dist/esm/ui/Field/common/Wrapper/Wrapper.js.map +1 -1
  14. package/dist/esm/ui/Field/common/Wrapper/hooks/index.js +2 -0
  15. package/dist/esm/ui/Field/common/Wrapper/hooks/index.js.map +1 -0
  16. package/dist/esm/ui/Field/common/Wrapper/hooks/useFieldWrapper.js +41 -0
  17. package/dist/esm/ui/Field/common/Wrapper/hooks/useFieldWrapper.js.map +1 -0
  18. package/dist/esm/ui/Field/common/Wrapper/messages.js +4 -0
  19. package/dist/esm/ui/Field/common/Wrapper/messages.js.map +1 -0
  20. package/dist/esm/ui/Field/common/Wrapper/styles.css +1 -1
  21. package/dist/esm/ui/Field/common/Wrapper/withWrapper.js +24 -1
  22. package/dist/esm/ui/Field/common/Wrapper/withWrapper.js.map +1 -1
  23. package/dist/esm/ui/Field/common/index.js +1 -0
  24. package/dist/esm/ui/Field/common/index.js.map +1 -1
  25. package/dist/esm/ui/Field/constants.js +2 -0
  26. package/dist/esm/ui/Field/constants.js.map +1 -0
  27. package/dist/esm/ui/Field/hooks/index.js +3 -0
  28. package/dist/esm/ui/Field/hooks/index.js.map +1 -0
  29. package/dist/esm/ui/Field/hooks/useFieldAriaProperties.js +31 -0
  30. package/dist/esm/ui/Field/hooks/useFieldAriaProperties.js.map +1 -0
  31. package/dist/esm/ui/Field/hooks/useFieldError.js +28 -0
  32. package/dist/esm/ui/Field/hooks/useFieldError.js.map +1 -0
  33. package/dist/esm/ui/Field/inputs/Checkbox/Checkbox.js +4 -2
  34. package/dist/esm/ui/Field/inputs/Checkbox/Checkbox.js.map +1 -1
  35. package/dist/esm/ui/Field/inputs/Checkbox/styles.css +1 -1
  36. package/dist/esm/ui/Field/inputs/Text/Text.js +3 -2
  37. package/dist/esm/ui/Field/inputs/Text/Text.js.map +1 -1
  38. package/dist/esm/ui/Field/inputs/Text/styles.css +1 -1
  39. package/dist/esm/ui/Field/inputs/Textarea/Textarea.js +3 -2
  40. package/dist/esm/ui/Field/inputs/Textarea/Textarea.js.map +1 -1
  41. package/dist/esm/ui/Field/inputs/Textarea/styles.css +1 -1
  42. package/dist/esm/ui/Field/types.js +1 -18
  43. package/dist/esm/ui/Field/types.js.map +1 -1
  44. package/dist/types/ui/Field/Field.d.ts +1 -5
  45. package/dist/types/ui/Field/Field.d.ts.map +1 -1
  46. package/dist/types/ui/Field/common/Error/Error.d.ts +10 -0
  47. package/dist/types/ui/Field/common/Error/Error.d.ts.map +1 -0
  48. package/dist/types/ui/Field/common/Error/index.d.ts +3 -0
  49. package/dist/types/ui/Field/common/Error/index.d.ts.map +1 -0
  50. package/dist/types/ui/Field/common/Error/types.d.ts +8 -0
  51. package/dist/types/ui/Field/common/Error/types.d.ts.map +1 -0
  52. package/dist/types/ui/Field/common/Label/Label.d.ts +1 -1
  53. package/dist/types/ui/Field/common/Label/Label.d.ts.map +1 -1
  54. package/dist/types/ui/Field/common/Label/types.d.ts +9 -0
  55. package/dist/types/ui/Field/common/Label/types.d.ts.map +1 -1
  56. package/dist/types/ui/Field/common/Wrapper/Wrapper.d.ts +1 -1
  57. package/dist/types/ui/Field/common/Wrapper/Wrapper.d.ts.map +1 -1
  58. package/dist/types/ui/Field/common/Wrapper/hooks/index.d.ts +2 -0
  59. package/dist/types/ui/Field/common/Wrapper/hooks/index.d.ts.map +1 -0
  60. package/dist/types/ui/Field/common/Wrapper/hooks/useFieldWrapper.d.ts +497 -0
  61. package/dist/types/ui/Field/common/Wrapper/hooks/useFieldWrapper.d.ts.map +1 -0
  62. package/dist/types/ui/Field/common/Wrapper/messages.d.ts +5 -0
  63. package/dist/types/ui/Field/common/Wrapper/messages.d.ts.map +1 -0
  64. package/dist/types/ui/Field/common/Wrapper/types.d.ts +13 -2
  65. package/dist/types/ui/Field/common/Wrapper/types.d.ts.map +1 -1
  66. package/dist/types/ui/Field/common/Wrapper/withWrapper.d.ts +7 -1
  67. package/dist/types/ui/Field/common/Wrapper/withWrapper.d.ts.map +1 -1
  68. package/dist/types/ui/Field/common/index.d.ts +1 -0
  69. package/dist/types/ui/Field/common/index.d.ts.map +1 -1
  70. package/dist/types/ui/Field/constants.d.ts +2 -0
  71. package/dist/types/ui/Field/constants.d.ts.map +1 -0
  72. package/dist/types/ui/Field/hooks/index.d.ts +3 -0
  73. package/dist/types/ui/Field/hooks/index.d.ts.map +1 -0
  74. package/dist/types/ui/Field/hooks/useFieldAriaProperties.d.ts +26 -0
  75. package/dist/types/ui/Field/hooks/useFieldAriaProperties.d.ts.map +1 -0
  76. package/dist/types/ui/Field/hooks/useFieldError.d.ts +4 -0
  77. package/dist/types/ui/Field/hooks/useFieldError.d.ts.map +1 -0
  78. package/dist/types/ui/Field/inputs/Checkbox/Checkbox.d.ts +2 -7
  79. package/dist/types/ui/Field/inputs/Checkbox/Checkbox.d.ts.map +1 -1
  80. package/dist/types/ui/Field/inputs/Text/Text.d.ts +2 -7
  81. package/dist/types/ui/Field/inputs/Text/Text.d.ts.map +1 -1
  82. package/dist/types/ui/Field/inputs/Textarea/Textarea.d.ts +2 -7
  83. package/dist/types/ui/Field/inputs/Textarea/Textarea.d.ts.map +1 -1
  84. package/dist/types/ui/Field/inputs/index.d.ts +1 -0
  85. package/dist/types/ui/Field/inputs/index.d.ts.map +1 -1
  86. package/dist/types/ui/Field/inputs/types.d.ts +4 -0
  87. package/dist/types/ui/Field/inputs/types.d.ts.map +1 -1
  88. package/dist/types/ui/Field/types.d.ts +25 -14
  89. package/dist/types/ui/Field/types.d.ts.map +1 -1
  90. package/package.json +3 -3
@@ -1,17 +1,16 @@
1
1
  import { jsx as _jsx } from "react/jsx-runtime";
2
2
  import { Checkbox, Text, Textarea } from "./inputs/index.js";
3
- import { InputType } from "./types.js";
4
3
  /**
5
4
  * description of the Field component
6
5
  * @returns {React.ReactElement} - Rendered Field
7
6
  */
8
7
  const Field = ({ inputType, CustomComponent, ...props }) => {
9
8
  switch (inputType) {
10
- case InputType.Textarea:
9
+ case "textarea":
11
10
  return _jsx(Textarea, { ...props });
12
- case InputType.Checkbox:
11
+ case "checkbox":
13
12
  return _jsx(Checkbox, { ...props });
14
- case InputType.Custom:
13
+ case "custom":
15
14
  // @ts-ignore // TODO Add special type for both or none
16
15
  return _jsx(CustomComponent, { ...props });
17
16
  default:
@@ -19,5 +18,4 @@ const Field = ({ inputType, CustomComponent, ...props }) => {
19
18
  }
20
19
  };
21
20
  export default Field;
22
- Field.types = InputType;
23
21
  //# sourceMappingURL=Field.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"Field.js","sourceRoot":"","sources":["../../../../src/ui/Field/Field.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,QAAQ,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC7D,OAAO,EAAE,SAAS,EAAE,MAAM,YAAY,CAAC;AAGvC;;;GAGG;AACH,MAAM,KAAK,GAAG,CAAC,EACb,SAAS,EACT,eAAe,EACf,GAAG,KAAK,EACG,EAAsB,EAAE;IACnC,QAAQ,SAAS,EAAE,CAAC;QAClB,KAAK,SAAS,CAAC,QAAQ;YACrB,OAAO,KAAC,QAAQ,OAAK,KAAK,GAAI,CAAC;QACjC,KAAK,SAAS,CAAC,QAAQ;YACrB,OAAO,KAAC,QAAQ,OAAK,KAAK,GAAI,CAAC;QACjC,KAAK,SAAS,CAAC,MAAM;YACnB,uDAAuD;YACvD,OAAO,KAAC,eAAe,OAAK,KAAK,GAAI,CAAC;QACxC;YACE,OAAO,KAAC,IAAI,IAAC,SAAS,EAAE,SAAS,KAAM,KAAK,GAAI,CAAC;IACrD,CAAC;AACH,CAAC,CAAC;AAEF,eAAe,KAAK,CAAC;AACrB,KAAK,CAAC,KAAK,GAAG,SAAS,CAAC"}
1
+ {"version":3,"file":"Field.js","sourceRoot":"","sources":["../../../../src/ui/Field/Field.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,QAAQ,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAI7D;;;GAGG;AACH,MAAM,KAAK,GAAG,CAAC,EACb,SAAS,EACT,eAAe,EACf,GAAG,KAAK,EACG,EAAsB,EAAE;IACnC,QAAQ,SAAS,EAAE,CAAC;QAClB,KAAK,UAAU;YACb,OAAO,KAAC,QAAQ,OAAK,KAAK,GAAI,CAAC;QACjC,KAAK,UAAU;YACb,OAAO,KAAC,QAAQ,OAAK,KAAK,GAAI,CAAC;QACjC,KAAK,QAAQ;YACX,uDAAuD;YACvD,OAAO,KAAC,eAAe,OAAK,KAAK,GAAI,CAAC;QACxC;YACE,OAAO,KAAC,IAAI,IAAC,SAAS,EAAE,SAAS,KAAM,KAAK,GAAI,CAAC;IACrD,CAAC;AACH,CAAC,CAAC;AAEF,eAAe,KAAK,CAAC"}
@@ -0,0 +1,12 @@
1
+ import { jsx as _jsx } from "react/jsx-runtime";
2
+ import "./styles.css";
3
+ const componentCssClassName = "ds error";
4
+ /**
5
+ * description of the Error component
6
+ * @returns {React.ReactElement} - Rendered Error
7
+ */
8
+ const FieldError = ({ id, children, className, style, }) => {
9
+ return (_jsx("div", { id: id, style: style, className: [componentCssClassName, className].filter(Boolean).join(" "), role: "alert", children: children }));
10
+ };
11
+ export default FieldError;
12
+ //# sourceMappingURL=Error.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"Error.js","sourceRoot":"","sources":["../../../../../../src/ui/Field/common/Error/Error.tsx"],"names":[],"mappings":";AAGA,OAAO,cAAc,CAAC;AAEtB,MAAM,qBAAqB,GAAG,UAAU,CAAC;AAEzC;;;GAGG;AACH,MAAM,UAAU,GAAG,CAAC,EAClB,EAAE,EACF,QAAQ,EACR,SAAS,EACT,KAAK,GACM,EAAsB,EAAE;IACnC,OAAO,CACL,cACE,EAAE,EAAE,EAAE,EACN,KAAK,EAAE,KAAK,EACZ,SAAS,EAAE,CAAC,qBAAqB,EAAE,SAAS,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,EACvE,IAAI,EAAC,OAAO,YAEX,QAAQ,GACL,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,UAAU,CAAC"}
@@ -0,0 +1,4 @@
1
+ /* @canonical/generator-ds 0.9.0-experimental.9 */
2
+ export { default as Error } from "./Error.js";
3
+ export * from "./types.js";
4
+ //# sourceMappingURL=index.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../src/ui/Field/common/Error/index.ts"],"names":[],"mappings":"AAAA,kDAAkD;AAClD,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,YAAY,CAAC;AAC9C,cAAc,YAAY,CAAC"}
@@ -0,0 +1,7 @@
1
+ /* @canonical/generator-ds 0.9.0-experimental.9 */
2
+
3
+ /*
4
+ .ds.error {
5
+
6
+ }
7
+ */
@@ -0,0 +1,2 @@
1
+ export {};
2
+ //# sourceMappingURL=types.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"types.js","sourceRoot":"","sources":["../../../../../../src/ui/Field/common/Error/types.ts"],"names":[],"mappings":""}
@@ -1,12 +1,16 @@
1
- import { jsx as _jsx } from "react/jsx-runtime";
1
+ import { jsxs as _jsxs } from "react/jsx-runtime";
2
2
  import "./styles.css";
3
3
  const componentCssClassName = "ds label";
4
+ /** Placeholder for internationalized messages */
5
+ const defaultMessages = {
6
+ optional: () => "optional",
7
+ };
4
8
  /**
5
9
  * description of the Label component
6
10
  * @returns {React.ReactElement} - Rendered Label
7
11
  */
8
- const Label = ({ id, children, className, style, }) => {
9
- return (_jsx("div", { id: id, style: style, className: [componentCssClassName, className].filter(Boolean).join(" "), children: children }));
12
+ const Label = ({ id, children, className, style, name, isOptional, messages = defaultMessages, namePrefix = "form-", tag: Element = "label", }) => {
13
+ return (_jsxs(Element, { id: id, style: style, htmlFor: Element === "label" ? `${namePrefix}${name}` : undefined, className: [componentCssClassName, className].filter(Boolean).join(" "), children: [children || name, isOptional && _jsxs("span", { children: [" (", messages.optional(), ")"] })] }));
10
14
  };
11
15
  export default Label;
12
16
  //# sourceMappingURL=Label.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"Label.js","sourceRoot":"","sources":["../../../../../../src/ui/Field/common/Label/Label.tsx"],"names":[],"mappings":";AAGA,OAAO,cAAc,CAAC;AAEtB,MAAM,qBAAqB,GAAG,UAAU,CAAC;AAEzC;;;GAGG;AACH,MAAM,KAAK,GAAG,CAAC,EACb,EAAE,EACF,QAAQ,EACR,SAAS,EACT,KAAK,GACM,EAAsB,EAAE;IACnC,OAAO,CACL,cACE,EAAE,EAAE,EAAE,EACN,KAAK,EAAE,KAAK,EACZ,SAAS,EAAE,CAAC,qBAAqB,EAAE,SAAS,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,YAEtE,QAAQ,GACL,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,KAAK,CAAC"}
1
+ {"version":3,"file":"Label.js","sourceRoot":"","sources":["../../../../../../src/ui/Field/common/Label/Label.tsx"],"names":[],"mappings":";AAGA,OAAO,cAAc,CAAC;AAEtB,MAAM,qBAAqB,GAAG,UAAU,CAAC;AAEzC,iDAAiD;AACjD,MAAM,eAAe,GAAG;IACtB,QAAQ,EAAE,GAAG,EAAE,CAAC,UAAU;CAC3B,CAAC;AAEF;;;GAGG;AACH,MAAM,KAAK,GAAG,CAAC,EACb,EAAE,EACF,QAAQ,EACR,SAAS,EACT,KAAK,EACL,IAAI,EACJ,UAAU,EACV,QAAQ,GAAG,eAAe,EAC1B,UAAU,GAAG,OAAO,EACpB,GAAG,EAAE,OAAO,GAAG,OAAO,GACX,EAAsB,EAAE;IACnC,OAAO,CACL,MAAC,OAAO,IACN,EAAE,EAAE,EAAE,EACN,KAAK,EAAE,KAAK,EACZ,OAAO,EAAE,OAAO,KAAK,OAAO,CAAC,CAAC,CAAC,GAAG,UAAU,GAAG,IAAI,EAAE,CAAC,CAAC,CAAC,SAAS,EACjE,SAAS,EAAE,CAAC,qBAAqB,EAAE,SAAS,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,aAEtE,QAAQ,IAAI,IAAI,EAChB,UAAU,IAAI,iCAAS,QAAQ,CAAC,QAAQ,EAAE,SAAS,IAC5C,CACX,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,KAAK,CAAC"}
@@ -1,12 +1,21 @@
1
- import { jsx as _jsx } from "react/jsx-runtime";
1
+ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
2
  import "./styles.css";
3
- const componentCssClassName = "ds wrapper";
3
+ import { Description, Error as FieldError, Label } from "../index.js";
4
+ import { useFieldWrapper } from "./hooks/index.js";
5
+ const componentCssClassName = "ds form-wrapper";
4
6
  /**
5
7
  * description of the Wrapper component
6
8
  * @returns {React.ReactElement} - Rendered Wrapper
7
9
  */
8
- const Wrapper = ({ id, children, className, style, }) => {
9
- return (_jsx("div", { id: id, style: style, className: [componentCssClassName, className].filter(Boolean).join(" "), children: children }));
10
+ const Wrapper = ({ id, children, className, style, name, Component, description, label, isOptional, registerProps: userRegisterProps, nestedRegisterProps, unregisterOnUnmount, mockLabel = false, ...otherProps }) => {
11
+ const { fieldError, isError, ariaProps, registerProps } = useFieldWrapper(name, {
12
+ label,
13
+ isOptional,
14
+ userRegisterProps,
15
+ nestedRegisterProps,
16
+ unregisterOnUnmount,
17
+ });
18
+ return (_jsxs("div", { id: id, style: style, className: [componentCssClassName, className].filter(Boolean).join(" "), children: [_jsx(Description, { ...ariaProps.description, children: description }), _jsx(Label, { name: name, isOptional: isOptional, tag: mockLabel ? "legend" : undefined, ...ariaProps.label, children: label }), _jsx(Component, { name: name, registerProps: registerProps, ...ariaProps.input, ...otherProps }), isError && (_jsx(FieldError, { ...ariaProps.error, children: fieldError?.message?.toString() })), children] }));
10
19
  };
11
20
  export default Wrapper;
12
21
  //# sourceMappingURL=Wrapper.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"Wrapper.js","sourceRoot":"","sources":["../../../../../../src/ui/Field/common/Wrapper/Wrapper.tsx"],"names":[],"mappings":";AAGA,OAAO,cAAc,CAAC;AAEtB,MAAM,qBAAqB,GAAG,YAAY,CAAC;AAE3C;;;GAGG;AACH,MAAM,OAAO,GAAG,CAAC,EACf,EAAE,EACF,QAAQ,EACR,SAAS,EACT,KAAK,GACQ,EAAsB,EAAE;IACrC,OAAO,CACL,cACE,EAAE,EAAE,EAAE,EACN,KAAK,EAAE,KAAK,EACZ,SAAS,EAAE,CAAC,qBAAqB,EAAE,SAAS,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,YAEtE,QAAQ,GACL,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,OAAO,CAAC"}
1
+ {"version":3,"file":"Wrapper.js","sourceRoot":"","sources":["../../../../../../src/ui/Field/common/Wrapper/Wrapper.tsx"],"names":[],"mappings":";AAGA,OAAO,cAAc,CAAC;AACtB,OAAO,EAAE,WAAW,EAAE,KAAK,IAAI,UAAU,EAAE,KAAK,EAAE,MAAM,aAAa,CAAC;AACtE,OAAO,EAAE,eAAe,EAAE,MAAM,kBAAkB,CAAC;AAEnD,MAAM,qBAAqB,GAAG,iBAAiB,CAAC;AAEhD;;;GAGG;AACH,MAAM,OAAO,GAAG,CAAC,EACf,EAAE,EACF,QAAQ,EACR,SAAS,EACT,KAAK,EAEL,IAAI,EACJ,SAAS,EACT,WAAW,EACX,KAAK,EACL,UAAU,EACV,aAAa,EAAE,iBAAiB,EAChC,mBAAmB,EACnB,mBAAmB,EAEnB,SAAS,GAAG,KAAK,EACjB,GAAG,UAAU,EACA,EAAsB,EAAE;IACrC,MAAM,EAAE,UAAU,EAAE,OAAO,EAAE,SAAS,EAAE,aAAa,EAAE,GAAG,eAAe,CACvE,IAAI,EACJ;QACE,KAAK;QACL,UAAU;QACV,iBAAiB;QACjB,mBAAmB;QACnB,mBAAmB;KACpB,CACF,CAAC;IAEF,OAAO,CACL,eACE,EAAE,EAAE,EAAE,EACN,KAAK,EAAE,KAAK,EACZ,SAAS,EAAE,CAAC,qBAAqB,EAAE,SAAS,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,aAEvE,KAAC,WAAW,OAAK,SAAS,CAAC,WAAW,YAAG,WAAW,GAAe,EACnE,KAAC,KAAK,IACJ,IAAI,EAAE,IAAI,EACV,UAAU,EAAE,UAAU,EACtB,GAAG,EAAE,SAAS,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,SAAS,KACjC,SAAS,CAAC,KAAK,YAElB,KAAK,GACA,EACR,KAAC,SAAS,IACR,IAAI,EAAE,IAAI,EACV,aAAa,EAAE,aAAa,KACxB,SAAS,CAAC,KAAK,KACf,UAAU,GACd,EACD,OAAO,IAAI,CACV,KAAC,UAAU,OAAK,SAAS,CAAC,KAAK,YAC5B,UAAU,EAAE,OAAO,EAAE,QAAQ,EAAE,GACrB,CACd,EACA,QAAQ,IACL,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,OAAO,CAAC"}
@@ -0,0 +1,2 @@
1
+ export { default as useFieldWrapper } from "./useFieldWrapper.js";
2
+ //# sourceMappingURL=index.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../../src/ui/Field/common/Wrapper/hooks/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,MAAM,sBAAsB,CAAC"}
@@ -0,0 +1,41 @@
1
+ import { useEffect, useMemo } from "react";
2
+ import { useFormContext } from "react-hook-form";
3
+ import { useFieldAriaProperties, useFieldError } from "../../../hooks/index.js";
4
+ import messages from "../messages.js";
5
+ /**
6
+ * Hook to provide field wrapper utilities
7
+ * @param name - The name of the field
8
+ * @param options - Additional options
9
+ */
10
+ const useFieldWrapper = (name, options = {}) => {
11
+ const { label, isOptional = false, userRegisterProps = {}, nestedRegisterProps = {}, unregisterOnUnmount = true, } = options;
12
+ const fieldError = useFieldError(name);
13
+ const isError = !!fieldError;
14
+ const ariaProps = useFieldAriaProperties(name, isError);
15
+ // biome-ignore lint/correctness/useExhaustiveDependencies: Comparing the `name` suffices
16
+ const registerProps = useMemo(() => {
17
+ const props = {};
18
+ // We take advantage of the declaration of optionality to map to the required prop
19
+ if (!isOptional) {
20
+ props.required = {
21
+ value: true,
22
+ message: messages.required(label || name),
23
+ };
24
+ }
25
+ return {
26
+ ...nestedRegisterProps,
27
+ ...props,
28
+ ...userRegisterProps,
29
+ };
30
+ }, [name]);
31
+ const { unregister } = useFormContext();
32
+ useEffect(() => () => (unregisterOnUnmount ? unregister(name) : undefined), [unregisterOnUnmount, name, unregister]);
33
+ return {
34
+ fieldError,
35
+ isError,
36
+ ariaProps,
37
+ registerProps,
38
+ };
39
+ };
40
+ export default useFieldWrapper;
41
+ //# sourceMappingURL=useFieldWrapper.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"useFieldWrapper.js","sourceRoot":"","sources":["../../../../../../../src/ui/Field/common/Wrapper/hooks/useFieldWrapper.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AAC3C,OAAO,EAAwB,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAEvE,OAAO,EAAE,sBAAsB,EAAE,aAAa,EAAE,MAAM,yBAAyB,CAAC;AAChF,OAAO,QAAQ,MAAM,gBAAgB,CAAC;AAUtC;;;;GAIG;AACH,MAAM,eAAe,GAAG,CACtB,IAAY,EACZ,UAAkC,EAAE,EACpC,EAAE;IACF,MAAM,EACJ,KAAK,EACL,UAAU,GAAG,KAAK,EAClB,iBAAiB,GAAG,EAAE,EACtB,mBAAmB,GAAG,EAAE,EACxB,mBAAmB,GAAG,IAAI,GAC3B,GAAG,OAAO,CAAC;IAEZ,MAAM,UAAU,GAAG,aAAa,CAAC,IAAI,CAAC,CAAC;IAEvC,MAAM,OAAO,GAAG,CAAC,CAAC,UAAU,CAAC;IAE7B,MAAM,SAAS,GAAG,sBAAsB,CAAC,IAAI,EAAE,OAAO,CAAC,CAAC;IAExD,yFAAyF;IACzF,MAAM,aAAa,GAAG,OAAO,CAAC,GAAG,EAAE;QACjC,MAAM,KAAK,GAAoB,EAAE,CAAC;QAClC,kFAAkF;QAClF,IAAI,CAAC,UAAU,EAAE,CAAC;YAChB,KAAK,CAAC,QAAQ,GAAG;gBACf,KAAK,EAAE,IAAI;gBACX,OAAO,EAAE,QAAQ,CAAC,QAAQ,CAAC,KAAK,IAAI,IAAI,CAAC;aAC1C,CAAC;QACJ,CAAC;QACD,OAAO;YACL,GAAG,mBAAmB;YACtB,GAAG,KAAK;YACR,GAAG,iBAAiB;SACrB,CAAC;IACJ,CAAC,EAAE,CAAC,IAAI,CAAC,CAAC,CAAC;IAEX,MAAM,EAAE,UAAU,EAAE,GAAG,cAAc,EAAE,CAAC;IAExC,SAAS,CACP,GAAG,EAAE,CAAC,GAAG,EAAE,CAAC,CAAC,mBAAmB,CAAC,CAAC,CAAC,UAAU,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC,EAChE,CAAC,mBAAmB,EAAE,IAAI,EAAE,UAAU,CAAC,CACxC,CAAC;IAEF,OAAO;QACL,UAAU;QACV,OAAO;QACP,SAAS;QACT,aAAa;KACd,CAAC;AACJ,CAAC,CAAC;AACF,eAAe,eAAe,CAAC"}
@@ -0,0 +1,4 @@
1
+ export default {
2
+ required: (name) => `${name} is required`,
3
+ };
4
+ //# sourceMappingURL=messages.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"messages.js","sourceRoot":"","sources":["../../../../../../src/ui/Field/common/Wrapper/messages.ts"],"names":[],"mappings":"AAAA,eAAe;IACb,QAAQ,EAAE,CAAC,IAAY,EAAE,EAAE,CAAC,GAAG,IAAI,cAAc;CAClD,CAAC"}
@@ -1,7 +1,7 @@
1
1
  /* @canonical/generator-ds 0.9.0-experimental.4 */
2
2
 
3
3
  /*
4
- .ds.wrapper {
4
+ .ds.form-wrapper {
5
5
 
6
6
  }
7
7
  */
@@ -1,2 +1,25 @@
1
- export {};
1
+ import * as React from "react";
2
+ import { useMemo } from "react";
3
+ import DefaultWrapper from "./Wrapper.js";
4
+ // import MockWrapper from './WrapperContent.js'
5
+ // import type { WrapperProps } from './types.js'
6
+ // import withConditionalDisplay from './withConditionalDisplay.js'
7
+ const withWrapper = (Component, options, Wrapper = DefaultWrapper) => {
8
+ const MemoizedComponent = React.memo(Component);
9
+ function WrappedComponent({ middleware = [], WrapperComponent = Wrapper, ...props }) {
10
+ // We apply the middleware to the component in reverse orderso
11
+ // so that the first middleware in the array is the first to be applied to the component
12
+ const ExtendedComponent = useMemo(() => middleware
13
+ .reverse()
14
+ .reduce((AccumulatedComponent, hoc) => hoc(AccumulatedComponent), MemoizedComponent), [middleware]);
15
+ return React.createElement(WrapperComponent, {
16
+ Component: ExtendedComponent,
17
+ ...props,
18
+ ...options,
19
+ });
20
+ }
21
+ // return withConditionalDisplay(WrappedComponent)
22
+ return WrappedComponent;
23
+ };
24
+ export default withWrapper;
2
25
  //# sourceMappingURL=withWrapper.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"withWrapper.js","sourceRoot":"","sources":["../../../../../../src/ui/Field/common/Wrapper/withWrapper.ts"],"names":[],"mappings":""}
1
+ {"version":3,"file":"withWrapper.js","sourceRoot":"","sources":["../../../../../../src/ui/Field/common/Wrapper/withWrapper.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AAGhC,OAAO,cAAc,MAAM,cAAc,CAAC;AAE1C,gDAAgD;AAChD,iDAAiD;AACjD,mEAAmE;AAEnE,MAAM,WAAW,GAAG,CAClB,SAA0C,EAC1C,OAAsB,EACtB,UAAiC,cAAc,EAC/C,EAAE;IACF,MAAM,iBAAiB,GAAG,KAAK,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;IAEhD,SAAS,gBAAgB,CAAC,EACxB,UAAU,GAAG,EAAE,EACf,gBAAgB,GAAG,OAAO,EAC1B,GAAG,KAAK,EACO;QACf,8DAA8D;QAC9D,wFAAwF;QACxF,MAAM,iBAAiB,GAAG,OAAO,CAC/B,GAAG,EAAE,CACH,UAAU;aACP,OAAO,EAAE;aACT,MAAM,CACL,CAAC,oBAAoB,EAAE,GAAG,EAAE,EAAE,CAAC,GAAG,CAAC,oBAAoB,CAAC,EACxD,iBAAiB,CAClB,EACL,CAAC,UAAU,CAAC,CACb,CAAC;QAEF,OAAO,KAAK,CAAC,aAAa,CAAC,gBAAgB,EAAE;YAC3C,SAAS,EAAE,iBAAiB;YAC5B,GAAG,KAAK;YACR,GAAG,OAAO;SACX,CAAC,CAAC;IACL,CAAC;IACD,kDAAkD;IAClD,OAAO,gBAAgB,CAAC;AAC1B,CAAC,CAAC;AAEF,eAAe,WAAW,CAAC"}
@@ -1,4 +1,5 @@
1
1
  export * from "./Label/index.js";
2
2
  export * from "./Description/index.js";
3
3
  export * from "./Wrapper/index.js";
4
+ export * from "./Error/index.js";
4
5
  //# sourceMappingURL=index.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/ui/Field/common/index.ts"],"names":[],"mappings":"AAAA,cAAc,kBAAkB,CAAC;AAEjC,cAAc,wBAAwB,CAAC;AAEvC,cAAc,oBAAoB,CAAC"}
1
+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/ui/Field/common/index.ts"],"names":[],"mappings":"AAAA,cAAc,kBAAkB,CAAC;AAEjC,cAAc,wBAAwB,CAAC;AAEvC,cAAc,oBAAoB,CAAC;AAEnC,cAAc,kBAAkB,CAAC"}
@@ -0,0 +1,2 @@
1
+ export const ID_PREFIX = "form-";
2
+ //# sourceMappingURL=constants.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"constants.js","sourceRoot":"","sources":["../../../../src/ui/Field/constants.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,SAAS,GAAG,OAAO,CAAC"}
@@ -0,0 +1,3 @@
1
+ export { default as useFieldError } from "./useFieldError.js";
2
+ export { default as useFieldAriaProperties } from "./useFieldAriaProperties.js";
3
+ //# sourceMappingURL=index.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/ui/Field/hooks/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,oBAAoB,CAAC;AAC9D,OAAO,EAAE,OAAO,IAAI,sBAAsB,EAAE,MAAM,6BAA6B,CAAC"}
@@ -0,0 +1,31 @@
1
+ import { useId, useMemo } from "react";
2
+ /**
3
+ * Generates common ARIA properties for form field elements including input, label, description, and error state.
4
+ * @param {string} name - The name of the field.
5
+ * @param {boolean} isError - Indicates if the field is in an error state.
6
+ * @returns An object containing ARIA attributes for input, label, description, and error state.
7
+ */
8
+ const useFieldAriaProps = (name, isError) => useMemo(() => {
9
+ const uniqueId = useId();
10
+ const baseId = `${uniqueId}-${name}`;
11
+ const labelId = `${baseId}-label`;
12
+ const descriptionId = `${baseId}-description`;
13
+ const errorId = `${baseId}-error`;
14
+ return {
15
+ input: {
16
+ id: baseId,
17
+ "aria-labelledby": labelId,
18
+ "aria-describedby": `${descriptionId}${isError}` ? ` ${labelId}` : "",
19
+ "aria-errormessage": errorId,
20
+ "aria-invalid": isError,
21
+ },
22
+ label: { id: labelId },
23
+ description: { id: descriptionId },
24
+ error: {
25
+ id: errorId,
26
+ // role: "alert",
27
+ },
28
+ };
29
+ }, [name, isError]);
30
+ export default useFieldAriaProps;
31
+ //# sourceMappingURL=useFieldAriaProperties.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"useFieldAriaProperties.js","sourceRoot":"","sources":["../../../../../src/ui/Field/hooks/useFieldAriaProperties.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AAEvC;;;;;GAKG;AACH,MAAM,iBAAiB,GAAG,CAAC,IAAY,EAAE,OAAgB,EAAE,EAAE,CAC3D,OAAO,CAAC,GAAG,EAAE;IACX,MAAM,QAAQ,GAAG,KAAK,EAAE,CAAC;IACzB,MAAM,MAAM,GAAG,GAAG,QAAQ,IAAI,IAAI,EAAE,CAAC;IACrC,MAAM,OAAO,GAAG,GAAG,MAAM,QAAQ,CAAC;IAClC,MAAM,aAAa,GAAG,GAAG,MAAM,cAAc,CAAC;IAC9C,MAAM,OAAO,GAAG,GAAG,MAAM,QAAQ,CAAC;IAElC,OAAO;QACL,KAAK,EAAE;YACL,EAAE,EAAE,MAAM;YACV,iBAAiB,EAAE,OAAO;YAC1B,kBAAkB,EAAE,GAAG,aAAa,GAAG,OAAO,EAAE,CAAC,CAAC,CAAC,IAAI,OAAO,EAAE,CAAC,CAAC,CAAC,EAAE;YACrE,mBAAmB,EAAE,OAAO;YAC5B,cAAc,EAAE,OAAO;SACxB;QACD,KAAK,EAAE,EAAE,EAAE,EAAE,OAAO,EAAE;QACtB,WAAW,EAAE,EAAE,EAAE,EAAE,aAAa,EAAE;QAClC,KAAK,EAAE;YACL,EAAE,EAAE,OAAO;YACX,iBAAiB;SAClB;KACF,CAAC;AACJ,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,CAAC,CAAC,CAAC;AAEtB,eAAe,iBAAiB,CAAC"}
@@ -0,0 +1,28 @@
1
+ import { useMemo } from "react";
2
+ import { useFormState, } from "react-hook-form";
3
+ function useFieldError(name) {
4
+ const { errors } = useFormState({ name });
5
+ const fieldTree = name.split(".");
6
+ // biome-ignore lint/correctness/useExhaustiveDependencies: using a proxy
7
+ const fieldError = useMemo(() =>
8
+ // @ts-ignore TODO
9
+ fieldTree.reduce((acc, key) => {
10
+ if (acc) {
11
+ return acc[key];
12
+ }
13
+ return undefined;
14
+ }, errors), [
15
+ name, //proxy for errors
16
+ // Below, those dependencies are lazily referenced, hence the need to explicitly evaluate them
17
+ // We assume that three levels of nesting is enough for most use cases
18
+ // @ts-ignore TODO
19
+ errors[fieldTree[0]],
20
+ // @ts-ignore TODO
21
+ errors[fieldTree[0]]?.[fieldTree[1]],
22
+ // @ts-ignore TODO
23
+ errors[fieldTree[0]]?.[fieldTree[1]]?.[fieldTree[2]],
24
+ ]);
25
+ return fieldError;
26
+ }
27
+ export default useFieldError;
28
+ //# sourceMappingURL=useFieldError.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"useFieldError.js","sourceRoot":"","sources":["../../../../../src/ui/Field/hooks/useFieldError.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AAChC,OAAO,EAML,YAAY,GACb,MAAM,iBAAiB,CAAC;AAEzB,SAAS,aAAa,CACpB,IAAY;IAIZ,MAAM,EAAE,MAAM,EAAE,GAAG,YAAY,CAAC,EAAE,IAAI,EAAE,CAAkC,CAAC;IAE3E,MAAM,SAAS,GAAG,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC;IAElC,yEAAyE;IACzE,MAAM,UAAU,GAAG,OAAO,CACxB,GAA2B,EAAE;IAC3B,kBAAkB;IAClB,SAAS,CAAC,MAAM,CAAY,CAAC,GAA8B,EAAE,GAAG,EAAE,EAAE;QAClE,IAAI,GAAG,EAAE,CAAC;YACR,OAAO,GAAG,CAAC,GAAG,CAAC,CAAC;QAClB,CAAC;QACD,OAAO,SAAS,CAAC;IACnB,CAAC,EAAE,MAAM,CAAC,EACZ;QACE,IAAI,EAAE,kBAAkB;QACxB,8FAA8F;QAC9F,sEAAsE;QACtE,kBAAkB;QAClB,MAAM,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC;QACpB,kBAAkB;QAClB,MAAM,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC;QACpC,kBAAkB;QAClB,MAAM,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC;KACrD,CACF,CAAC;IACF,OAAO,UAAU,CAAC;AACpB,CAAC;AAED,eAAe,aAAa,CAAC"}
@@ -1,7 +1,8 @@
1
1
  import { jsx as _jsx } from "react/jsx-runtime";
2
2
  import { useFormContext } from "react-hook-form";
3
3
  import "./styles.css";
4
- const componentCssClassName = "ds checkbox";
4
+ import withWrapper from "../../common/Wrapper/withWrapper.js";
5
+ const componentCssClassName = "ds form-checkbox";
5
6
  /**
6
7
  * description of the Checkbox component
7
8
  * @returns {React.ReactElement} - Rendered Checkbox
@@ -10,5 +11,6 @@ const Checkbox = ({ id, className, style, name, registerProps, }) => {
10
11
  const { register } = useFormContext();
11
12
  return (_jsx("input", { id: id, style: style, type: "checkbox", className: [componentCssClassName, className].filter(Boolean).join(" "), ...register(name, registerProps) }));
12
13
  };
13
- export default Checkbox;
14
+ // export default Checkbox;
15
+ export default withWrapper(Checkbox);
14
16
  //# sourceMappingURL=Checkbox.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"Checkbox.js","sourceRoot":"","sources":["../../../../../../src/ui/Field/inputs/Checkbox/Checkbox.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAEjD,OAAO,cAAc,CAAC;AAEtB,MAAM,qBAAqB,GAAG,aAAa,CAAC;AAE5C;;;GAGG;AACH,MAAM,QAAQ,GAAG,CAAC,EAChB,EAAE,EACF,SAAS,EACT,KAAK,EACL,IAAI,EACJ,aAAa,GACC,EAAsB,EAAE;IACtC,MAAM,EAAE,QAAQ,EAAE,GAAG,cAAc,EAAE,CAAC;IACtC,OAAO,CACL,gBACE,EAAE,EAAE,EAAE,EACN,KAAK,EAAE,KAAK,EACZ,IAAI,EAAC,UAAU,EACf,SAAS,EAAE,CAAC,qBAAqB,EAAE,SAAS,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,KACnE,QAAQ,CAAC,IAAI,EAAE,aAAa,CAAC,GACjC,CACH,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,QAAQ,CAAC"}
1
+ {"version":3,"file":"Checkbox.js","sourceRoot":"","sources":["../../../../../../src/ui/Field/inputs/Checkbox/Checkbox.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAEjD,OAAO,cAAc,CAAC;AACtB,OAAO,WAAW,MAAM,qCAAqC,CAAC;AAE9D,MAAM,qBAAqB,GAAG,kBAAkB,CAAC;AAEjD;;;GAGG;AACH,MAAM,QAAQ,GAAG,CAAC,EAChB,EAAE,EACF,SAAS,EACT,KAAK,EACL,IAAI,EACJ,aAAa,GACC,EAAsB,EAAE;IACtC,MAAM,EAAE,QAAQ,EAAE,GAAG,cAAc,EAAE,CAAC;IACtC,OAAO,CACL,gBACE,EAAE,EAAE,EAAE,EACN,KAAK,EAAE,KAAK,EACZ,IAAI,EAAC,UAAU,EACf,SAAS,EAAE,CAAC,qBAAqB,EAAE,SAAS,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,KACnE,QAAQ,CAAC,IAAI,EAAE,aAAa,CAAC,GACjC,CACH,CAAC;AACJ,CAAC,CAAC;AAEF,2BAA2B;AAC3B,eAAe,WAAW,CAAC,QAAQ,CAAC,CAAC"}
@@ -1,7 +1,7 @@
1
1
  /* @canonical/generator-ds 0.9.0-experimental.4 */
2
2
 
3
3
  /*
4
- .ds.checkbox {
4
+ .ds.form-checkbox {
5
5
 
6
6
  }
7
7
  */
@@ -1,7 +1,8 @@
1
1
  import { jsx as _jsx } from "react/jsx-runtime";
2
2
  import { useFormContext } from "react-hook-form";
3
+ import withWrapper from "../../common/Wrapper/withWrapper.js";
3
4
  import "./styles.css";
4
- const componentCssClassName = "ds text";
5
+ const componentCssClassName = "ds form-text";
5
6
  /**
6
7
  * description of the Text component
7
8
  * @returns {React.ReactElement} - Rendered Text
@@ -10,5 +11,5 @@ const Text = ({ id, className, style, inputType = "text", name, registerProps, }
10
11
  const { register } = useFormContext();
11
12
  return (_jsx("input", { id: id, style: style, className: [componentCssClassName, className].filter(Boolean).join(" "), type: inputType, ...register(name, registerProps) }));
12
13
  };
13
- export default Text;
14
+ export default withWrapper(Text);
14
15
  //# sourceMappingURL=Text.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"Text.js","sourceRoot":"","sources":["../../../../../../src/ui/Field/inputs/Text/Text.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAEjD,OAAO,cAAc,CAAC;AAEtB,MAAM,qBAAqB,GAAG,SAAS,CAAC;AAExC;;;GAGG;AACH,MAAM,IAAI,GAAG,CAAC,EACZ,EAAE,EACF,SAAS,EACT,KAAK,EACL,SAAS,GAAG,MAAM,EAClB,IAAI,EACJ,aAAa,GACH,EAAsB,EAAE;IAClC,MAAM,EAAE,QAAQ,EAAE,GAAG,cAAc,EAAE,CAAC;IACtC,OAAO,CACL,gBACE,EAAE,EAAE,EAAE,EACN,KAAK,EAAE,KAAK,EACZ,SAAS,EAAE,CAAC,qBAAqB,EAAE,SAAS,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,EACvE,IAAI,EAAE,SAAS,KACX,QAAQ,CAAC,IAAI,EAAE,aAAa,CAAC,GACjC,CACH,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,IAAI,CAAC"}
1
+ {"version":3,"file":"Text.js","sourceRoot":"","sources":["../../../../../../src/ui/Field/inputs/Text/Text.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AACjD,OAAO,WAAW,MAAM,qCAAqC,CAAC;AAE9D,OAAO,cAAc,CAAC;AAEtB,MAAM,qBAAqB,GAAG,cAAc,CAAC;AAE7C;;;GAGG;AACH,MAAM,IAAI,GAAG,CAAC,EACZ,EAAE,EACF,SAAS,EACT,KAAK,EACL,SAAS,GAAG,MAAM,EAClB,IAAI,EACJ,aAAa,GACH,EAAsB,EAAE;IAClC,MAAM,EAAE,QAAQ,EAAE,GAAG,cAAc,EAAE,CAAC;IACtC,OAAO,CACL,gBACE,EAAE,EAAE,EAAE,EACN,KAAK,EAAE,KAAK,EACZ,SAAS,EAAE,CAAC,qBAAqB,EAAE,SAAS,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,EACvE,IAAI,EAAE,SAAS,KACX,QAAQ,CAAC,IAAI,EAAE,aAAa,CAAC,GACjC,CACH,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,WAAW,CAAC,IAAI,CAAC,CAAC"}
@@ -1,7 +1,7 @@
1
1
  /* @canonical/generator-ds 0.9.0-experimental.4 */
2
2
 
3
3
  /*
4
- .ds.text {
4
+ .ds.form-text {
5
5
 
6
6
  }
7
7
  */
@@ -1,7 +1,8 @@
1
1
  import { jsx as _jsx } from "react/jsx-runtime";
2
2
  import { useFormContext } from "react-hook-form";
3
3
  import "./styles.css";
4
- const componentCssClassName = "ds textarea";
4
+ import withWrapper from "../../common/Wrapper/withWrapper.js";
5
+ const componentCssClassName = "ds form-textarea";
5
6
  /**
6
7
  * description of the Textarea component
7
8
  * @returns {React.ReactElement} - Rendered Textarea
@@ -10,5 +11,5 @@ const Textarea = ({ id, className, style, name, registerProps, }) => {
10
11
  const { register } = useFormContext();
11
12
  return (_jsx("textarea", { id: id, style: style, className: [componentCssClassName, className].filter(Boolean).join(" "), ...register(name, registerProps) }));
12
13
  };
13
- export default Textarea;
14
+ export default withWrapper(Textarea);
14
15
  //# sourceMappingURL=Textarea.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"Textarea.js","sourceRoot":"","sources":["../../../../../../src/ui/Field/inputs/Textarea/Textarea.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAEjD,OAAO,cAAc,CAAC;AAEtB,MAAM,qBAAqB,GAAG,aAAa,CAAC;AAE5C;;;GAGG;AACH,MAAM,QAAQ,GAAG,CAAC,EAChB,EAAE,EACF,SAAS,EACT,KAAK,EACL,IAAI,EACJ,aAAa,GACC,EAAsB,EAAE;IACtC,MAAM,EAAE,QAAQ,EAAE,GAAG,cAAc,EAAE,CAAC;IACtC,OAAO,CACL,mBACE,EAAE,EAAE,EAAE,EACN,KAAK,EAAE,KAAK,EACZ,SAAS,EAAE,CAAC,qBAAqB,EAAE,SAAS,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,KACnE,QAAQ,CAAC,IAAI,EAAE,aAAa,CAAC,GACjC,CACH,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,QAAQ,CAAC"}
1
+ {"version":3,"file":"Textarea.js","sourceRoot":"","sources":["../../../../../../src/ui/Field/inputs/Textarea/Textarea.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAEjD,OAAO,cAAc,CAAC;AACtB,OAAO,WAAW,MAAM,qCAAqC,CAAC;AAE9D,MAAM,qBAAqB,GAAG,kBAAkB,CAAC;AAEjD;;;GAGG;AACH,MAAM,QAAQ,GAAG,CAAC,EAChB,EAAE,EACF,SAAS,EACT,KAAK,EACL,IAAI,EACJ,aAAa,GACC,EAAsB,EAAE;IACtC,MAAM,EAAE,QAAQ,EAAE,GAAG,cAAc,EAAE,CAAC;IACtC,OAAO,CACL,mBACE,EAAE,EAAE,EAAE,EACN,KAAK,EAAE,KAAK,EACZ,SAAS,EAAE,CAAC,qBAAqB,EAAE,SAAS,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,KACnE,QAAQ,CAAC,IAAI,EAAE,aAAa,CAAC,GACjC,CACH,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,WAAW,CAAC,QAAQ,CAAC,CAAC"}
@@ -1,7 +1,7 @@
1
1
  /* @canonical/generator-ds 0.9.0-experimental.4 */
2
2
 
3
3
  /*
4
- .ds.textarea {
4
+ .ds.form-textarea {
5
5
 
6
6
  }
7
7
  */
@@ -1,19 +1,2 @@
1
- export var InputType;
2
- (function (InputType) {
3
- InputType["Text"] = "text";
4
- InputType["Password"] = "password";
5
- InputType["Email"] = "email";
6
- InputType["Number"] = "number";
7
- InputType["Tel"] = "tel";
8
- InputType["Url"] = "url";
9
- InputType["Textarea"] = "textarea";
10
- InputType["Custom"] = "custom";
11
- InputType["Checkbox"] = "checkbox";
12
- // Date = "date",
13
- // Time = "time",
14
- // DatetimeLocal = "datetime-local",
15
- // Month = "month",
16
- // Week = "week",
17
- // Color = "color",
18
- })(InputType || (InputType = {}));
1
+ export {};
19
2
  //# sourceMappingURL=types.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"types.js","sourceRoot":"","sources":["../../../../src/ui/Field/types.ts"],"names":[],"mappings":"AAQA,MAAM,CAAN,IAAY,SAgBX;AAhBD,WAAY,SAAS;IACnB,0BAAa,CAAA;IACb,kCAAqB,CAAA;IACrB,4BAAe,CAAA;IACf,8BAAiB,CAAA;IACjB,wBAAW,CAAA;IACX,wBAAW,CAAA;IACX,kCAAqB,CAAA;IACrB,8BAAiB,CAAA;IACjB,kCAAqB,CAAA;IACrB,iBAAiB;IACjB,iBAAiB;IACjB,oCAAoC;IACpC,mBAAmB;IACnB,iBAAiB;IACjB,mBAAmB;AACrB,CAAC,EAhBW,SAAS,KAAT,SAAS,QAgBpB"}
1
+ {"version":3,"file":"types.js","sourceRoot":"","sources":["../../../../src/ui/Field/types.ts"],"names":[],"mappings":""}
@@ -1,13 +1,9 @@
1
1
  import type React from "react";
2
- import { InputType } from "./types.js";
3
2
  import type { FieldProps } from "./types.js";
4
3
  /**
5
4
  * description of the Field component
6
5
  * @returns {React.ReactElement} - Rendered Field
7
6
  */
8
- declare const Field: {
9
- ({ inputType, CustomComponent, ...props }: FieldProps): React.ReactElement;
10
- types: typeof InputType;
11
- };
7
+ declare const Field: ({ inputType, CustomComponent, ...props }: FieldProps) => React.ReactElement;
12
8
  export default Field;
13
9
  //# sourceMappingURL=Field.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"Field.d.ts","sourceRoot":"","sources":["../../../../src/ui/Field/Field.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAE,SAAS,EAAE,MAAM,YAAY,CAAC;AACvC,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,YAAY,CAAC;AAE7C;;;GAGG;AACH,QAAA,MAAM,KAAK;+CAIR,UAAU,GAAG,KAAK,CAAC,YAAY;;CAYjC,CAAC;AAEF,eAAe,KAAK,CAAC"}
1
+ {"version":3,"file":"Field.d.ts","sourceRoot":"","sources":["../../../../src/ui/Field/Field.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,YAAY,CAAC;AAE7C;;;GAGG;AACH,QAAA,MAAM,KAAK,6CAIR,UAAU,KAAG,KAAK,CAAC,YAYrB,CAAC;AAEF,eAAe,KAAK,CAAC"}
@@ -0,0 +1,10 @@
1
+ import type React from "react";
2
+ import type { ErrorProps } from "./types.js";
3
+ import "./styles.css";
4
+ /**
5
+ * description of the Error component
6
+ * @returns {React.ReactElement} - Rendered Error
7
+ */
8
+ declare const FieldError: ({ id, children, className, style, }: ErrorProps) => React.ReactElement;
9
+ export default FieldError;
10
+ //# sourceMappingURL=Error.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"Error.d.ts","sourceRoot":"","sources":["../../../../../../src/ui/Field/common/Error/Error.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,YAAY,CAAC;AAC7C,OAAO,cAAc,CAAC;AAItB;;;GAGG;AACH,QAAA,MAAM,UAAU,wCAKb,UAAU,KAAG,KAAK,CAAC,YAWrB,CAAC;AAEF,eAAe,UAAU,CAAC"}
@@ -0,0 +1,3 @@
1
+ export { default as Error } from "./Error.js";
2
+ export * from "./types.js";
3
+ //# sourceMappingURL=index.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/ui/Field/common/Error/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,YAAY,CAAC;AAC9C,cAAc,YAAY,CAAC"}
@@ -0,0 +1,8 @@
1
+ import type React from "react";
2
+ export interface ErrorProps {
3
+ id?: string;
4
+ className?: string;
5
+ children?: React.ReactNode;
6
+ style?: React.CSSProperties;
7
+ }
8
+ //# sourceMappingURL=types.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../../../src/ui/Field/common/Error/types.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,MAAM,WAAW,UAAU;IAEzB,EAAE,CAAC,EAAE,MAAM,CAAC;IAEZ,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAE3B,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CAC7B"}
@@ -5,6 +5,6 @@ import "./styles.css";
5
5
  * description of the Label component
6
6
  * @returns {React.ReactElement} - Rendered Label
7
7
  */
8
- declare const Label: ({ id, children, className, style, }: LabelProps) => React.ReactElement;
8
+ declare const Label: ({ id, children, className, style, name, isOptional, messages, namePrefix, tag: Element, }: LabelProps) => React.ReactElement;
9
9
  export default Label;
10
10
  //# sourceMappingURL=Label.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"Label.d.ts","sourceRoot":"","sources":["../../../../../../src/ui/Field/common/Label/Label.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,YAAY,CAAC;AAC7C,OAAO,cAAc,CAAC;AAItB;;;GAGG;AACH,QAAA,MAAM,KAAK,wCAKR,UAAU,KAAG,KAAK,CAAC,YAUrB,CAAC;AAEF,eAAe,KAAK,CAAC"}
1
+ {"version":3,"file":"Label.d.ts","sourceRoot":"","sources":["../../../../../../src/ui/Field/common/Label/Label.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,YAAY,CAAC;AAC7C,OAAO,cAAc,CAAC;AAStB;;;GAGG;AACH,QAAA,MAAM,KAAK,8FAUR,UAAU,KAAG,KAAK,CAAC,YAYrB,CAAC;AAEF,eAAe,KAAK,CAAC"}
@@ -1,8 +1,17 @@
1
1
  import type React from "react";
2
+ import type { JSX } from "react";
3
+ export interface LabelMessages {
4
+ optional: () => string;
5
+ }
2
6
  export interface LabelProps {
3
7
  id?: string;
4
8
  className?: string;
5
9
  children?: React.ReactNode;
6
10
  style?: React.CSSProperties;
11
+ name: string;
12
+ namePrefix?: string;
13
+ isOptional?: boolean;
14
+ messages?: LabelMessages;
15
+ tag?: keyof JSX.IntrinsicElements;
7
16
  }
8
17
  //# sourceMappingURL=types.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../../../src/ui/Field/common/Label/types.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,MAAM,WAAW,UAAU;IAEzB,EAAE,CAAC,EAAE,MAAM,CAAC;IAEZ,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAE3B,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CAC7B"}
1
+ {"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../../../src/ui/Field/common/Label/types.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAEjC,MAAM,WAAW,aAAa;IAE5B,QAAQ,EAAE,MAAM,MAAM,CAAC;CACxB;AAED,MAAM,WAAW,UAAU;IAEzB,EAAE,CAAC,EAAE,MAAM,CAAC;IAEZ,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAE3B,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAE5B,IAAI,EAAE,MAAM,CAAC;IAEb,UAAU,CAAC,EAAE,MAAM,CAAC;IAEpB,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB,QAAQ,CAAC,EAAE,aAAa,CAAC;IAEzB,GAAG,CAAC,EAAE,MAAM,GAAG,CAAC,iBAAiB,CAAC;CACnC"}
@@ -5,6 +5,6 @@ import "./styles.css";
5
5
  * description of the Wrapper component
6
6
  * @returns {React.ReactElement} - Rendered Wrapper
7
7
  */
8
- declare const Wrapper: ({ id, children, className, style, }: WrapperProps) => React.ReactElement;
8
+ declare const Wrapper: ({ id, children, className, style, name, Component, description, label, isOptional, registerProps: userRegisterProps, nestedRegisterProps, unregisterOnUnmount, mockLabel, ...otherProps }: WrapperProps) => React.ReactElement;
9
9
  export default Wrapper;
10
10
  //# sourceMappingURL=Wrapper.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"Wrapper.d.ts","sourceRoot":"","sources":["../../../../../../src/ui/Field/common/Wrapper/Wrapper.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,YAAY,CAAC;AAC/C,OAAO,cAAc,CAAC;AAItB;;;GAGG;AACH,QAAA,MAAM,OAAO,wCAKV,YAAY,KAAG,KAAK,CAAC,YAUvB,CAAC;AAEF,eAAe,OAAO,CAAC"}
1
+ {"version":3,"file":"Wrapper.d.ts","sourceRoot":"","sources":["../../../../../../src/ui/Field/common/Wrapper/Wrapper.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,YAAY,CAAC;AAC/C,OAAO,cAAc,CAAC;AAMtB;;;GAGG;AACH,QAAA,MAAM,OAAO,8LAiBV,YAAY,KAAG,KAAK,CAAC,YAyCvB,CAAC;AAEF,eAAe,OAAO,CAAC"}
@@ -0,0 +1,2 @@
1
+ export { default as useFieldWrapper } from "./useFieldWrapper.js";
2
+ //# sourceMappingURL=index.d.ts.map