datocms-react-ui 0.3.27 → 0.3.31

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 (114) hide show
  1. package/dist/cjs/FieldHint/styles.module.css.json +1 -1
  2. package/dist/cjs/FieldWrapper/index.js +29 -0
  3. package/dist/cjs/FieldWrapper/index.js.map +1 -0
  4. package/dist/cjs/SelectField/index.js +8 -20
  5. package/dist/cjs/SelectField/index.js.map +1 -1
  6. package/dist/cjs/TextField/index.js +2 -5
  7. package/dist/cjs/TextField/index.js.map +1 -1
  8. package/dist/cjs/index.js +1 -0
  9. package/dist/cjs/index.js.map +1 -1
  10. package/dist/esm/FieldHint/styles.module.css.json +1 -1
  11. package/dist/esm/FieldWrapper/index.d.ts +13 -0
  12. package/dist/esm/FieldWrapper/index.js +22 -0
  13. package/dist/esm/FieldWrapper/index.js.map +1 -0
  14. package/dist/esm/SelectField/index.js +9 -21
  15. package/dist/esm/SelectField/index.js.map +1 -1
  16. package/dist/esm/TextField/index.js +3 -6
  17. package/dist/esm/TextField/index.js.map +1 -1
  18. package/dist/esm/index.d.ts +1 -0
  19. package/dist/esm/index.js +1 -0
  20. package/dist/esm/index.js.map +1 -1
  21. package/dist/types/FieldWrapper/index.d.ts +13 -0
  22. package/dist/types/index.d.ts +1 -0
  23. package/package.json +4 -3
  24. package/src/Button/index.tsx +173 -0
  25. package/src/Button/styles.module.css +149 -0
  26. package/src/Button/styles.module.css.json +1 -0
  27. package/src/ButtonGroup/Button/index.tsx +40 -0
  28. package/src/ButtonGroup/Button/styles.module.css +72 -0
  29. package/src/ButtonGroup/Button/styles.module.css.json +1 -0
  30. package/src/ButtonGroup/Group/index.tsx +31 -0
  31. package/src/ButtonGroup/Group/styles.module.css +6 -0
  32. package/src/ButtonGroup/Group/styles.module.css.json +1 -0
  33. package/src/ButtonGroup/index.ts +4 -0
  34. package/src/Canvas/index.tsx +556 -0
  35. package/src/Canvas/styles.module.css +75 -0
  36. package/src/Canvas/styles.module.css.json +1 -0
  37. package/src/ContextInspector/index.tsx +316 -0
  38. package/src/ContextInspector/styles.module.css +90 -0
  39. package/src/ContextInspector/styles.module.css.json +1 -0
  40. package/src/Dropdown/Dropdown.tsx +171 -0
  41. package/src/Dropdown/DropdownContext.tsx +10 -0
  42. package/src/Dropdown/Group.tsx +16 -0
  43. package/src/Dropdown/Menu.tsx +351 -0
  44. package/src/Dropdown/MenuContext.tsx +18 -0
  45. package/src/Dropdown/Option.tsx +148 -0
  46. package/src/Dropdown/OptionAction.tsx +42 -0
  47. package/src/Dropdown/Portal.tsx +46 -0
  48. package/src/Dropdown/Separator.tsx +13 -0
  49. package/src/Dropdown/Text.tsx +8 -0
  50. package/src/Dropdown/index.tsx +26 -0
  51. package/src/Dropdown/styles.module.css +331 -0
  52. package/src/Dropdown/styles.module.css.json +1 -0
  53. package/src/FieldError/index.tsx +10 -0
  54. package/src/FieldError/styles.module.css +6 -0
  55. package/src/FieldError/styles.module.css.json +1 -0
  56. package/src/FieldGroup/index.tsx +25 -0
  57. package/src/FieldGroup/styles.module.css +12 -0
  58. package/src/FieldGroup/styles.module.css.json +1 -0
  59. package/src/FieldHint/index.tsx +10 -0
  60. package/src/FieldHint/styles.module.css +14 -0
  61. package/src/FieldHint/styles.module.css.json +1 -0
  62. package/src/FieldWrapper/index.tsx +38 -0
  63. package/src/Form/index.tsx +145 -0
  64. package/src/Form/styles.module.css +19 -0
  65. package/src/Form/styles.module.css.json +1 -0
  66. package/src/FormLabel/index.tsx +36 -0
  67. package/src/FormLabel/styles.module.css +31 -0
  68. package/src/FormLabel/styles.module.css.json +1 -0
  69. package/src/Section/index.tsx +104 -0
  70. package/src/Section/styles.module.css +100 -0
  71. package/src/Section/styles.module.css.json +1 -0
  72. package/src/SelectField/index.tsx +242 -0
  73. package/src/SelectInput/index.tsx +233 -0
  74. package/src/SidebarPanel/index.tsx +110 -0
  75. package/src/SidebarPanel/styles.module.css +49 -0
  76. package/src/SidebarPanel/styles.module.css.json +1 -0
  77. package/src/Spinner/index.tsx +68 -0
  78. package/src/Spinner/styles.module.css +31 -0
  79. package/src/Spinner/styles.module.css.json +1 -0
  80. package/src/SwitchField/index.tsx +67 -0
  81. package/src/SwitchField/styles.module.css +25 -0
  82. package/src/SwitchField/styles.module.css.json +1 -0
  83. package/src/SwitchInput/index.tsx +74 -0
  84. package/src/SwitchInput/styles.module.css +100 -0
  85. package/src/SwitchInput/styles.module.css.json +1 -0
  86. package/src/TextField/index.tsx +51 -0
  87. package/src/TextField/styles.module.css +0 -0
  88. package/src/TextField/styles.module.css.json +1 -0
  89. package/src/TextInput/index.tsx +73 -0
  90. package/src/TextInput/styles.module.css +52 -0
  91. package/src/TextInput/styles.module.css.json +1 -0
  92. package/src/Toolbar/Button/index.tsx +32 -0
  93. package/src/Toolbar/Button/styles.module.css +43 -0
  94. package/src/Toolbar/Button/styles.module.css.json +1 -0
  95. package/src/Toolbar/Stack/index.tsx +33 -0
  96. package/src/Toolbar/Stack/styles.module.css +18 -0
  97. package/src/Toolbar/Stack/styles.module.css.json +1 -0
  98. package/src/Toolbar/Title/index.tsx +17 -0
  99. package/src/Toolbar/Title/styles.module.css +12 -0
  100. package/src/Toolbar/Title/styles.module.css.json +1 -0
  101. package/src/Toolbar/Toolbar/index.tsx +112 -0
  102. package/src/Toolbar/Toolbar/styles.module.css +15 -0
  103. package/src/Toolbar/Toolbar/styles.module.css.json +1 -0
  104. package/src/Toolbar/index.ts +8 -0
  105. package/src/base.css +89 -0
  106. package/src/generateStyleFromCtx/index.ts +25 -0
  107. package/src/global.css +23 -0
  108. package/src/icons.tsx +108 -0
  109. package/src/index.ts +24 -0
  110. package/src/mergeRefs/index.ts +8 -0
  111. package/src/useClickOutside/index.ts +30 -0
  112. package/src/useMediaQuery/index.ts +185 -0
  113. package/styles.css +1 -1
  114. package/types.json +801 -760
@@ -1 +1 @@
1
- { "fieldHint": "_fieldHint_1dor2_1" }
1
+ { "fieldHint": "_fieldHint_1avon_1" }
@@ -0,0 +1,29 @@
1
+ "use strict";
2
+ var __assign = (this && this.__assign) || function () {
3
+ __assign = Object.assign || function(t) {
4
+ for (var s, i = 1, n = arguments.length; i < n; i++) {
5
+ s = arguments[i];
6
+ for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
7
+ t[p] = s[p];
8
+ }
9
+ return t;
10
+ };
11
+ return __assign.apply(this, arguments);
12
+ };
13
+ var __importDefault = (this && this.__importDefault) || function (mod) {
14
+ return (mod && mod.__esModule) ? mod : { "default": mod };
15
+ };
16
+ Object.defineProperty(exports, "__esModule", { value: true });
17
+ exports.FieldWrapper = void 0;
18
+ var react_1 = __importDefault(require("react"));
19
+ var __1 = require("..");
20
+ function FieldWrapper(_a) {
21
+ var id = _a.id, label = _a.label, hint = _a.hint, error = _a.error, required = _a.required, formLabelProps = _a.formLabelProps, children = _a.children;
22
+ return (react_1.default.createElement(react_1.default.Fragment, null,
23
+ react_1.default.createElement(__1.FormLabel, __assign({}, formLabelProps, { htmlFor: id, required: required, error: !!error }), label),
24
+ children,
25
+ error && react_1.default.createElement(__1.FieldError, null, error),
26
+ hint && react_1.default.createElement(__1.FieldHint, null, hint)));
27
+ }
28
+ exports.FieldWrapper = FieldWrapper;
29
+ //# sourceMappingURL=index.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/FieldWrapper/index.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;AAAA,gDAAyC;AACzC,wBAAsE;AAYtE,SAAgB,YAAY,CAAC,EAQT;QAPlB,EAAE,QAAA,EACF,KAAK,WAAA,EACL,IAAI,UAAA,EACJ,KAAK,WAAA,EACL,QAAQ,cAAA,EACR,cAAc,oBAAA,EACd,QAAQ,cAAA;IAER,OAAO,CACL;QACE,8BAAC,aAAS,eACJ,cAAc,IAClB,OAAO,EAAE,EAAE,EACX,QAAQ,EAAE,QAAQ,EAClB,KAAK,EAAE,CAAC,CAAC,KAAK,KAEb,KAAK,CACI;QACX,QAAQ;QACR,KAAK,IAAI,8BAAC,cAAU,QAAE,KAAK,CAAc;QACzC,IAAI,IAAI,8BAAC,aAAS,QAAE,IAAI,CAAa,CACrC,CACJ,CAAC;AACJ,CAAC;AAxBD,oCAwBC"}
@@ -19,38 +19,26 @@ var react_1 = __importDefault(require("react"));
19
19
  var __1 = require("..");
20
20
  function SelectField(_a) {
21
21
  var id = _a.id, name = _a.name, label = _a.label, hint = _a.hint, error = _a.error, required = _a.required, placeholder = _a.placeholder, formLabelProps = _a.formLabelProps, value = _a.value, onChange = _a.onChange, selectInputProps = _a.selectInputProps;
22
- return (react_1.default.createElement(react_1.default.Fragment, null,
23
- react_1.default.createElement(__1.FormLabel, __assign({}, formLabelProps, { htmlFor: id, required: required, error: !!error }), label),
24
- react_1.default.createElement(__1.SelectInput, __assign({}, selectInputProps, { id: id, name: name, value: value, placeholder: placeholder, onChange: onChange, error: !!error })),
25
- error && react_1.default.createElement(__1.FieldError, null, error),
26
- hint && react_1.default.createElement(__1.FieldHint, null, hint)));
22
+ return (react_1.default.createElement(__1.FieldWrapper, { formLabelProps: formLabelProps, id: "id", required: required, error: error, hint: hint, label: label },
23
+ react_1.default.createElement(__1.SelectInput, __assign({}, selectInputProps, { id: id, name: name, value: value, placeholder: placeholder, onChange: onChange, error: !!error }))));
27
24
  }
28
25
  exports.SelectField = SelectField;
29
26
  function AsyncSelectField(_a) {
30
27
  var id = _a.id, name = _a.name, label = _a.label, hint = _a.hint, error = _a.error, required = _a.required, placeholder = _a.placeholder, formLabelProps = _a.formLabelProps, value = _a.value, onChange = _a.onChange, selectInputProps = _a.selectInputProps;
31
- return (react_1.default.createElement(react_1.default.Fragment, null,
32
- react_1.default.createElement(__1.FormLabel, __assign({}, formLabelProps, { htmlFor: id, required: required, error: !!error }), label),
33
- react_1.default.createElement(__1.AsyncSelectInput, __assign({}, selectInputProps, { id: id, name: name, value: value, placeholder: placeholder, onChange: onChange, error: !!error })),
34
- error && react_1.default.createElement(__1.FieldError, null, error),
35
- hint && react_1.default.createElement(__1.FieldHint, null, hint)));
28
+ return (react_1.default.createElement(__1.FieldWrapper, { formLabelProps: formLabelProps, id: "id", required: required, error: error, hint: hint, label: label },
29
+ react_1.default.createElement(__1.AsyncSelectInput, __assign({}, selectInputProps, { id: id, name: name, value: value, placeholder: placeholder, onChange: onChange, error: !!error }))));
36
30
  }
37
31
  exports.AsyncSelectField = AsyncSelectField;
38
32
  function CreatableSelectField(_a) {
39
33
  var id = _a.id, name = _a.name, label = _a.label, hint = _a.hint, error = _a.error, required = _a.required, placeholder = _a.placeholder, formLabelProps = _a.formLabelProps, value = _a.value, onChange = _a.onChange, selectInputProps = _a.selectInputProps;
40
- return (react_1.default.createElement(react_1.default.Fragment, null,
41
- react_1.default.createElement(__1.FormLabel, __assign({}, formLabelProps, { htmlFor: id, required: required, error: !!error }), label),
42
- react_1.default.createElement(__1.CreatableSelectInput, __assign({}, selectInputProps, { id: id, name: name, value: value, placeholder: placeholder, onChange: onChange, error: !!error })),
43
- error && react_1.default.createElement(__1.FieldError, null, error),
44
- hint && react_1.default.createElement(__1.FieldHint, null, hint)));
34
+ return (react_1.default.createElement(__1.FieldWrapper, { formLabelProps: formLabelProps, id: "id", required: required, error: error, hint: hint, label: label },
35
+ react_1.default.createElement(__1.CreatableSelectInput, __assign({}, selectInputProps, { id: id, name: name, value: value, placeholder: placeholder, onChange: onChange, error: !!error }))));
45
36
  }
46
37
  exports.CreatableSelectField = CreatableSelectField;
47
38
  function AsyncCreatableSelectField(_a) {
48
39
  var id = _a.id, name = _a.name, label = _a.label, hint = _a.hint, error = _a.error, required = _a.required, placeholder = _a.placeholder, formLabelProps = _a.formLabelProps, value = _a.value, onChange = _a.onChange, selectInputProps = _a.selectInputProps;
49
- return (react_1.default.createElement(react_1.default.Fragment, null,
50
- react_1.default.createElement(__1.FormLabel, __assign({}, formLabelProps, { htmlFor: id, required: required, error: !!error }), label),
51
- react_1.default.createElement(__1.AsyncCreatableSelectInput, __assign({}, selectInputProps, { id: id, name: name, value: value, placeholder: placeholder, onChange: onChange, error: !!error })),
52
- error && react_1.default.createElement(__1.FieldError, null, error),
53
- hint && react_1.default.createElement(__1.FieldHint, null, hint)));
40
+ return (react_1.default.createElement(__1.FieldWrapper, { formLabelProps: formLabelProps, id: "id", required: required, error: error, hint: hint, label: label },
41
+ react_1.default.createElement(__1.AsyncCreatableSelectInput, __assign({}, selectInputProps, { id: id, name: name, value: value, placeholder: placeholder, onChange: onChange, error: !!error }))));
54
42
  }
55
43
  exports.AsyncCreatableSelectField = AsyncCreatableSelectField;
56
44
  //# sourceMappingURL=index.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/SelectField/index.tsx"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/SelectField/index.tsx"],"names":[],"mappings":"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"}
@@ -19,11 +19,8 @@ var react_1 = __importDefault(require("react"));
19
19
  var __1 = require("..");
20
20
  function TextField(_a) {
21
21
  var id = _a.id, name = _a.name, label = _a.label, hint = _a.hint, error = _a.error, required = _a.required, placeholder = _a.placeholder, formLabelProps = _a.formLabelProps, value = _a.value, onChange = _a.onChange, textInputProps = _a.textInputProps;
22
- return (react_1.default.createElement(react_1.default.Fragment, null,
23
- react_1.default.createElement(__1.FormLabel, __assign({}, formLabelProps, { htmlFor: id, required: required, error: !!error }), label),
24
- react_1.default.createElement(__1.TextInput, __assign({}, textInputProps, { id: id, name: name, value: value, placeholder: placeholder, onChange: onChange, error: !!error })),
25
- error && react_1.default.createElement(__1.FieldError, null, error),
26
- hint && react_1.default.createElement(__1.FieldHint, null, hint)));
22
+ return (react_1.default.createElement(__1.FieldWrapper, { formLabelProps: formLabelProps, id: id, required: required, error: error, hint: hint, label: label },
23
+ react_1.default.createElement(__1.TextInput, __assign({}, textInputProps, { id: id, name: name, value: value, placeholder: placeholder, onChange: onChange, error: !!error }))));
27
24
  }
28
25
  exports.TextField = TextField;
29
26
  //# sourceMappingURL=index.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/TextField/index.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;AAAA,gDAAyC;AACzC,wBAOY;AAgBZ,SAAgB,SAAS,CAAC,EAYT;QAXf,EAAE,QAAA,EACF,IAAI,UAAA,EACJ,KAAK,WAAA,EACL,IAAI,UAAA,EACJ,KAAK,WAAA,EACL,QAAQ,cAAA,EACR,WAAW,iBAAA,EACX,cAAc,oBAAA,EACd,KAAK,WAAA,EACL,QAAQ,cAAA,EACR,cAAc,oBAAA;IAEd,OAAO,CACL;QACE,8BAAC,aAAS,eAAK,cAAc,IAAE,OAAO,EAAE,EAAE,EAAE,QAAQ,EAAE,QAAQ,EAAE,KAAK,EAAE,CAAC,CAAC,KAAK,KAC3E,KAAK,CACI;QAEZ,8BAAC,aAAS,eACJ,cAAc,IAClB,EAAE,EAAE,EAAE,EACN,IAAI,EAAE,IAAI,EACV,KAAK,EAAE,KAAK,EACZ,WAAW,EAAE,WAAW,EACxB,QAAQ,EAAE,QAAQ,EAClB,KAAK,EAAE,CAAC,CAAC,KAAK,IACd;QAED,KAAK,IAAI,8BAAC,cAAU,QAAE,KAAK,CAAc;QACzC,IAAI,IAAI,8BAAC,aAAS,QAAE,IAAI,CAAa,CACrC,CACJ,CAAC;AACJ,CAAC;AAjCD,8BAiCC"}
1
+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/TextField/index.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;AAAA,gDAAyC;AACzC,wBAA6E;AAgB7E,SAAgB,SAAS,CAAC,EAYT;QAXf,EAAE,QAAA,EACF,IAAI,UAAA,EACJ,KAAK,WAAA,EACL,IAAI,UAAA,EACJ,KAAK,WAAA,EACL,QAAQ,cAAA,EACR,WAAW,iBAAA,EACX,cAAc,oBAAA,EACd,KAAK,WAAA,EACL,QAAQ,cAAA,EACR,cAAc,oBAAA;IAEd,OAAO,CACL,8BAAC,gBAAY,IACX,cAAc,EAAE,cAAc,EAC9B,EAAE,EAAE,EAAE,EACN,QAAQ,EAAE,QAAQ,EAClB,KAAK,EAAE,KAAK,EACZ,IAAI,EAAE,IAAI,EACV,KAAK,EAAE,KAAK;QAEZ,8BAAC,aAAS,eACJ,cAAc,IAClB,EAAE,EAAE,EAAE,EACN,IAAI,EAAE,IAAI,EACV,KAAK,EAAE,KAAK,EACZ,WAAW,EAAE,WAAW,EACxB,QAAQ,EAAE,QAAQ,EAClB,KAAK,EAAE,CAAC,CAAC,KAAK,IACd,CACW,CAChB,CAAC;AACJ,CAAC;AAjCD,8BAiCC"}
package/dist/cjs/index.js CHANGED
@@ -19,6 +19,7 @@ __exportStar(require("./FieldError"), exports);
19
19
  __exportStar(require("./FieldGroup"), exports);
20
20
  __exportStar(require("./FieldHint"), exports);
21
21
  __exportStar(require("./Form"), exports);
22
+ __exportStar(require("./FieldWrapper"), exports);
22
23
  __exportStar(require("./FormLabel"), exports);
23
24
  __exportStar(require("./icons"), exports);
24
25
  __exportStar(require("./Section"), exports);
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":";;;;;;;;;;;;AAAA,2CAAyB;AACzB,gDAA8B;AAC9B,2CAAyB;AACzB,qDAAmC;AACnC,6CAA2B;AAC3B,+CAA6B;AAC7B,+CAA6B;AAC7B,8CAA4B;AAC5B,yCAAuB;AACvB,8CAA4B;AAC5B,0CAAwB;AACxB,4CAA0B;AAC1B,gDAA8B;AAC9B,gDAA8B;AAC9B,iDAA+B;AAC/B,4CAA0B;AAC1B,gDAA8B;AAC9B,gDAA8B;AAC9B,8CAA4B;AAC5B,8CAA4B;AAC5B,4CAA0B;AAC1B,oDAAkC;AAClC,kDAAgC"}
1
+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":";;;;;;;;;;;;AAAA,2CAAyB;AACzB,gDAA8B;AAC9B,2CAAyB;AACzB,qDAAmC;AACnC,6CAA2B;AAC3B,+CAA6B;AAC7B,+CAA6B;AAC7B,8CAA4B;AAC5B,yCAAuB;AACvB,iDAA+B;AAC/B,8CAA4B;AAC5B,0CAAwB;AACxB,4CAA0B;AAC1B,gDAA8B;AAC9B,gDAA8B;AAC9B,iDAA+B;AAC/B,4CAA0B;AAC1B,gDAA8B;AAC9B,gDAA8B;AAC9B,8CAA4B;AAC5B,8CAA4B;AAC5B,4CAA0B;AAC1B,oDAAkC;AAClC,kDAAgC"}
@@ -1 +1 @@
1
- { "fieldHint": "_fieldHint_1dor2_1" }
1
+ { "fieldHint": "_fieldHint_1avon_1" }
@@ -0,0 +1,13 @@
1
+ import { ReactNode } from 'react';
2
+ import { FormLabelProps } from '..';
3
+ declare type FieldWrapperProps = {
4
+ id: string;
5
+ label: ReactNode;
6
+ hint?: ReactNode;
7
+ error?: ReactNode;
8
+ required?: boolean;
9
+ formLabelProps?: FormLabelProps;
10
+ children: ReactNode;
11
+ };
12
+ export declare function FieldWrapper({ id, label, hint, error, required, formLabelProps, children, }: FieldWrapperProps): JSX.Element;
13
+ export {};
@@ -0,0 +1,22 @@
1
+ var __assign = (this && this.__assign) || function () {
2
+ __assign = Object.assign || function(t) {
3
+ for (var s, i = 1, n = arguments.length; i < n; i++) {
4
+ s = arguments[i];
5
+ for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
6
+ t[p] = s[p];
7
+ }
8
+ return t;
9
+ };
10
+ return __assign.apply(this, arguments);
11
+ };
12
+ import React from 'react';
13
+ import { FieldError, FieldHint, FormLabel } from '..';
14
+ export function FieldWrapper(_a) {
15
+ var id = _a.id, label = _a.label, hint = _a.hint, error = _a.error, required = _a.required, formLabelProps = _a.formLabelProps, children = _a.children;
16
+ return (React.createElement(React.Fragment, null,
17
+ React.createElement(FormLabel, __assign({}, formLabelProps, { htmlFor: id, required: required, error: !!error }), label),
18
+ children,
19
+ error && React.createElement(FieldError, null, error),
20
+ hint && React.createElement(FieldHint, null, hint)));
21
+ }
22
+ //# sourceMappingURL=index.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/FieldWrapper/index.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAoB,MAAM,OAAO,CAAC;AACzC,OAAO,EAAE,UAAU,EAAE,SAAS,EAAE,SAAS,EAAkB,MAAM,IAAI,CAAC;AAYtE,MAAM,UAAU,YAAY,CAAC,EAQT;QAPlB,EAAE,QAAA,EACF,KAAK,WAAA,EACL,IAAI,UAAA,EACJ,KAAK,WAAA,EACL,QAAQ,cAAA,EACR,cAAc,oBAAA,EACd,QAAQ,cAAA;IAER,OAAO,CACL;QACE,oBAAC,SAAS,eACJ,cAAc,IAClB,OAAO,EAAE,EAAE,EACX,QAAQ,EAAE,QAAQ,EAClB,KAAK,EAAE,CAAC,CAAC,KAAK,KAEb,KAAK,CACI;QACX,QAAQ;QACR,KAAK,IAAI,oBAAC,UAAU,QAAE,KAAK,CAAc;QACzC,IAAI,IAAI,oBAAC,SAAS,QAAE,IAAI,CAAa,CACrC,CACJ,CAAC;AACJ,CAAC"}
@@ -10,37 +10,25 @@ var __assign = (this && this.__assign) || function () {
10
10
  return __assign.apply(this, arguments);
11
11
  };
12
12
  import React from 'react';
13
- import { AsyncCreatableSelectInput, AsyncSelectInput, CreatableSelectInput, FieldError, FieldHint, FormLabel, SelectInput, } from '..';
13
+ import { AsyncCreatableSelectInput, AsyncSelectInput, CreatableSelectInput, FieldWrapper, SelectInput, } from '..';
14
14
  export function SelectField(_a) {
15
15
  var id = _a.id, name = _a.name, label = _a.label, hint = _a.hint, error = _a.error, required = _a.required, placeholder = _a.placeholder, formLabelProps = _a.formLabelProps, value = _a.value, onChange = _a.onChange, selectInputProps = _a.selectInputProps;
16
- return (React.createElement(React.Fragment, null,
17
- React.createElement(FormLabel, __assign({}, formLabelProps, { htmlFor: id, required: required, error: !!error }), label),
18
- React.createElement(SelectInput, __assign({}, selectInputProps, { id: id, name: name, value: value, placeholder: placeholder, onChange: onChange, error: !!error })),
19
- error && React.createElement(FieldError, null, error),
20
- hint && React.createElement(FieldHint, null, hint)));
16
+ return (React.createElement(FieldWrapper, { formLabelProps: formLabelProps, id: "id", required: required, error: error, hint: hint, label: label },
17
+ React.createElement(SelectInput, __assign({}, selectInputProps, { id: id, name: name, value: value, placeholder: placeholder, onChange: onChange, error: !!error }))));
21
18
  }
22
19
  export function AsyncSelectField(_a) {
23
20
  var id = _a.id, name = _a.name, label = _a.label, hint = _a.hint, error = _a.error, required = _a.required, placeholder = _a.placeholder, formLabelProps = _a.formLabelProps, value = _a.value, onChange = _a.onChange, selectInputProps = _a.selectInputProps;
24
- return (React.createElement(React.Fragment, null,
25
- React.createElement(FormLabel, __assign({}, formLabelProps, { htmlFor: id, required: required, error: !!error }), label),
26
- React.createElement(AsyncSelectInput, __assign({}, selectInputProps, { id: id, name: name, value: value, placeholder: placeholder, onChange: onChange, error: !!error })),
27
- error && React.createElement(FieldError, null, error),
28
- hint && React.createElement(FieldHint, null, hint)));
21
+ return (React.createElement(FieldWrapper, { formLabelProps: formLabelProps, id: "id", required: required, error: error, hint: hint, label: label },
22
+ React.createElement(AsyncSelectInput, __assign({}, selectInputProps, { id: id, name: name, value: value, placeholder: placeholder, onChange: onChange, error: !!error }))));
29
23
  }
30
24
  export function CreatableSelectField(_a) {
31
25
  var id = _a.id, name = _a.name, label = _a.label, hint = _a.hint, error = _a.error, required = _a.required, placeholder = _a.placeholder, formLabelProps = _a.formLabelProps, value = _a.value, onChange = _a.onChange, selectInputProps = _a.selectInputProps;
32
- return (React.createElement(React.Fragment, null,
33
- React.createElement(FormLabel, __assign({}, formLabelProps, { htmlFor: id, required: required, error: !!error }), label),
34
- React.createElement(CreatableSelectInput, __assign({}, selectInputProps, { id: id, name: name, value: value, placeholder: placeholder, onChange: onChange, error: !!error })),
35
- error && React.createElement(FieldError, null, error),
36
- hint && React.createElement(FieldHint, null, hint)));
26
+ return (React.createElement(FieldWrapper, { formLabelProps: formLabelProps, id: "id", required: required, error: error, hint: hint, label: label },
27
+ React.createElement(CreatableSelectInput, __assign({}, selectInputProps, { id: id, name: name, value: value, placeholder: placeholder, onChange: onChange, error: !!error }))));
37
28
  }
38
29
  export function AsyncCreatableSelectField(_a) {
39
30
  var id = _a.id, name = _a.name, label = _a.label, hint = _a.hint, error = _a.error, required = _a.required, placeholder = _a.placeholder, formLabelProps = _a.formLabelProps, value = _a.value, onChange = _a.onChange, selectInputProps = _a.selectInputProps;
40
- return (React.createElement(React.Fragment, null,
41
- React.createElement(FormLabel, __assign({}, formLabelProps, { htmlFor: id, required: required, error: !!error }), label),
42
- React.createElement(AsyncCreatableSelectInput, __assign({}, selectInputProps, { id: id, name: name, value: value, placeholder: placeholder, onChange: onChange, error: !!error })),
43
- error && React.createElement(FieldError, null, error),
44
- hint && React.createElement(FieldHint, null, hint)));
31
+ return (React.createElement(FieldWrapper, { formLabelProps: formLabelProps, id: "id", required: required, error: error, hint: hint, label: label },
32
+ React.createElement(AsyncCreatableSelectInput, __assign({}, selectInputProps, { id: id, name: name, value: value, placeholder: placeholder, onChange: onChange, error: !!error }))));
45
33
  }
46
34
  //# sourceMappingURL=index.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/SelectField/index.tsx"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/SelectField/index.tsx"],"names":[],"mappings":"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"}
@@ -10,13 +10,10 @@ var __assign = (this && this.__assign) || function () {
10
10
  return __assign.apply(this, arguments);
11
11
  };
12
12
  import React from 'react';
13
- import { FieldError, FieldHint, FormLabel, TextInput, } from '..';
13
+ import { FieldWrapper, TextInput } from '..';
14
14
  export function TextField(_a) {
15
15
  var id = _a.id, name = _a.name, label = _a.label, hint = _a.hint, error = _a.error, required = _a.required, placeholder = _a.placeholder, formLabelProps = _a.formLabelProps, value = _a.value, onChange = _a.onChange, textInputProps = _a.textInputProps;
16
- return (React.createElement(React.Fragment, null,
17
- React.createElement(FormLabel, __assign({}, formLabelProps, { htmlFor: id, required: required, error: !!error }), label),
18
- React.createElement(TextInput, __assign({}, textInputProps, { id: id, name: name, value: value, placeholder: placeholder, onChange: onChange, error: !!error })),
19
- error && React.createElement(FieldError, null, error),
20
- hint && React.createElement(FieldHint, null, hint)));
16
+ return (React.createElement(FieldWrapper, { formLabelProps: formLabelProps, id: id, required: required, error: error, hint: hint, label: label },
17
+ React.createElement(TextInput, __assign({}, textInputProps, { id: id, name: name, value: value, placeholder: placeholder, onChange: onChange, error: !!error }))));
21
18
  }
22
19
  //# sourceMappingURL=index.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/TextField/index.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAoB,MAAM,OAAO,CAAC;AACzC,OAAO,EACL,UAAU,EACV,SAAS,EACT,SAAS,EAET,SAAS,GAEV,MAAM,IAAI,CAAC;AAgBZ,MAAM,UAAU,SAAS,CAAC,EAYT;QAXf,EAAE,QAAA,EACF,IAAI,UAAA,EACJ,KAAK,WAAA,EACL,IAAI,UAAA,EACJ,KAAK,WAAA,EACL,QAAQ,cAAA,EACR,WAAW,iBAAA,EACX,cAAc,oBAAA,EACd,KAAK,WAAA,EACL,QAAQ,cAAA,EACR,cAAc,oBAAA;IAEd,OAAO,CACL;QACE,oBAAC,SAAS,eAAK,cAAc,IAAE,OAAO,EAAE,EAAE,EAAE,QAAQ,EAAE,QAAQ,EAAE,KAAK,EAAE,CAAC,CAAC,KAAK,KAC3E,KAAK,CACI;QAEZ,oBAAC,SAAS,eACJ,cAAc,IAClB,EAAE,EAAE,EAAE,EACN,IAAI,EAAE,IAAI,EACV,KAAK,EAAE,KAAK,EACZ,WAAW,EAAE,WAAW,EACxB,QAAQ,EAAE,QAAQ,EAClB,KAAK,EAAE,CAAC,CAAC,KAAK,IACd;QAED,KAAK,IAAI,oBAAC,UAAU,QAAE,KAAK,CAAc;QACzC,IAAI,IAAI,oBAAC,SAAS,QAAE,IAAI,CAAa,CACrC,CACJ,CAAC;AACJ,CAAC"}
1
+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/TextField/index.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAoB,MAAM,OAAO,CAAC;AACzC,OAAO,EAAE,YAAY,EAAkB,SAAS,EAAkB,MAAM,IAAI,CAAC;AAgB7E,MAAM,UAAU,SAAS,CAAC,EAYT;QAXf,EAAE,QAAA,EACF,IAAI,UAAA,EACJ,KAAK,WAAA,EACL,IAAI,UAAA,EACJ,KAAK,WAAA,EACL,QAAQ,cAAA,EACR,WAAW,iBAAA,EACX,cAAc,oBAAA,EACd,KAAK,WAAA,EACL,QAAQ,cAAA,EACR,cAAc,oBAAA;IAEd,OAAO,CACL,oBAAC,YAAY,IACX,cAAc,EAAE,cAAc,EAC9B,EAAE,EAAE,EAAE,EACN,QAAQ,EAAE,QAAQ,EAClB,KAAK,EAAE,KAAK,EACZ,IAAI,EAAE,IAAI,EACV,KAAK,EAAE,KAAK;QAEZ,oBAAC,SAAS,eACJ,cAAc,IAClB,EAAE,EAAE,EAAE,EACN,IAAI,EAAE,IAAI,EACV,KAAK,EAAE,KAAK,EACZ,WAAW,EAAE,WAAW,EACxB,QAAQ,EAAE,QAAQ,EAClB,KAAK,EAAE,CAAC,CAAC,KAAK,IACd,CACW,CAChB,CAAC;AACJ,CAAC"}
@@ -7,6 +7,7 @@ export * from './FieldError';
7
7
  export * from './FieldGroup';
8
8
  export * from './FieldHint';
9
9
  export * from './Form';
10
+ export * from './FieldWrapper';
10
11
  export * from './FormLabel';
11
12
  export * from './icons';
12
13
  export * from './Section';
package/dist/esm/index.js CHANGED
@@ -7,6 +7,7 @@ export * from './FieldError';
7
7
  export * from './FieldGroup';
8
8
  export * from './FieldHint';
9
9
  export * from './Form';
10
+ export * from './FieldWrapper';
10
11
  export * from './FormLabel';
11
12
  export * from './icons';
12
13
  export * from './Section';
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,UAAU,CAAC;AACzB,cAAc,eAAe,CAAC;AAC9B,cAAc,UAAU,CAAC;AACzB,cAAc,oBAAoB,CAAC;AACnC,cAAc,YAAY,CAAC;AAC3B,cAAc,cAAc,CAAC;AAC7B,cAAc,cAAc,CAAC;AAC7B,cAAc,aAAa,CAAC;AAC5B,cAAc,QAAQ,CAAC;AACvB,cAAc,aAAa,CAAC;AAC5B,cAAc,SAAS,CAAC;AACxB,cAAc,WAAW,CAAC;AAC1B,cAAc,eAAe,CAAC;AAC9B,cAAc,eAAe,CAAC;AAC9B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,WAAW,CAAC;AAC1B,cAAc,eAAe,CAAC;AAC9B,cAAc,eAAe,CAAC;AAC9B,cAAc,aAAa,CAAC;AAC5B,cAAc,aAAa,CAAC;AAC5B,cAAc,WAAW,CAAC;AAC1B,cAAc,mBAAmB,CAAC;AAClC,cAAc,iBAAiB,CAAC"}
1
+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,UAAU,CAAC;AACzB,cAAc,eAAe,CAAC;AAC9B,cAAc,UAAU,CAAC;AACzB,cAAc,oBAAoB,CAAC;AACnC,cAAc,YAAY,CAAC;AAC3B,cAAc,cAAc,CAAC;AAC7B,cAAc,cAAc,CAAC;AAC7B,cAAc,aAAa,CAAC;AAC5B,cAAc,QAAQ,CAAC;AACvB,cAAc,gBAAgB,CAAC;AAC/B,cAAc,aAAa,CAAC;AAC5B,cAAc,SAAS,CAAC;AACxB,cAAc,WAAW,CAAC;AAC1B,cAAc,eAAe,CAAC;AAC9B,cAAc,eAAe,CAAC;AAC9B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,WAAW,CAAC;AAC1B,cAAc,eAAe,CAAC;AAC9B,cAAc,eAAe,CAAC;AAC9B,cAAc,aAAa,CAAC;AAC5B,cAAc,aAAa,CAAC;AAC5B,cAAc,WAAW,CAAC;AAC1B,cAAc,mBAAmB,CAAC;AAClC,cAAc,iBAAiB,CAAC"}
@@ -0,0 +1,13 @@
1
+ import { ReactNode } from 'react';
2
+ import { FormLabelProps } from '..';
3
+ declare type FieldWrapperProps = {
4
+ id: string;
5
+ label: ReactNode;
6
+ hint?: ReactNode;
7
+ error?: ReactNode;
8
+ required?: boolean;
9
+ formLabelProps?: FormLabelProps;
10
+ children: ReactNode;
11
+ };
12
+ export declare function FieldWrapper({ id, label, hint, error, required, formLabelProps, children, }: FieldWrapperProps): JSX.Element;
13
+ export {};
@@ -7,6 +7,7 @@ export * from './FieldError';
7
7
  export * from './FieldGroup';
8
8
  export * from './FieldHint';
9
9
  export * from './Form';
10
+ export * from './FieldWrapper';
10
11
  export * from './FormLabel';
11
12
  export * from './icons';
12
13
  export * from './Section';
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "datocms-react-ui",
3
- "version": "0.3.27",
3
+ "version": "0.3.31",
4
4
  "description": "React components to use inside DatoCMS plugins",
5
5
  "keywords": [
6
6
  "datocms",
@@ -19,6 +19,7 @@
19
19
  "test": "__tests__"
20
20
  },
21
21
  "files": [
22
+ "src",
22
23
  "dist",
23
24
  "styles.css",
24
25
  "types.json"
@@ -40,7 +41,7 @@
40
41
  },
41
42
  "dependencies": {
42
43
  "classnames": "^2.3.1",
43
- "datocms-plugin-sdk": "^0.3.27",
44
+ "datocms-plugin-sdk": "^0.3.30",
44
45
  "react-intersection-observer": "^8.31.0",
45
46
  "react-select": "^5.2.1",
46
47
  "scroll-into-view-if-needed": "^2.2.20"
@@ -56,5 +57,5 @@
56
57
  "postcss-nested": "^5.0.6",
57
58
  "typedoc": "^0.22.8"
58
59
  },
59
- "gitHead": "f28932bfb68e15a81b74c3f185b2cdd9a4a44ec3"
60
+ "gitHead": "93a0f4d31106ed3515f894723dd312f0b51ba49d"
60
61
  }
@@ -0,0 +1,173 @@
1
+ import React, { CSSProperties, MouseEventHandler, ReactNode } from 'react';
2
+ import cn from 'classnames';
3
+ import styles from './styles.module.css.json';
4
+
5
+ export type ButtonProps = {
6
+ children?: ReactNode;
7
+ type?: React.ButtonHTMLAttributes<HTMLButtonElement>['type'];
8
+ className?: string;
9
+ disabled?: boolean;
10
+ onClick?: MouseEventHandler;
11
+ buttonType?: 'primary' | 'muted' | 'negative';
12
+ buttonSize?: 'xxs' | 'xs' | 's' | 'm' | 'l' | 'xl';
13
+ leftIcon?: ReactNode;
14
+ rightIcon?: ReactNode;
15
+ fullWidth?: boolean;
16
+ style?: CSSProperties;
17
+ };
18
+
19
+ /**
20
+ * @example Button types
21
+ *
22
+ * ```js
23
+ * <Canvas ctx={ctx}>
24
+ * <div style={{ marginBottom: 'var(--spacing-m)' }}>
25
+ * <Button buttonType="muted">Submit</Button>{' '}
26
+ * <Button buttonType="primary">Submit</Button>{' '}
27
+ * <Button buttonType="negative">Submit</Button>
28
+ * </div>
29
+ * <div>
30
+ * <Button buttonType="muted" disabled>
31
+ * Submit
32
+ * </Button>{' '}
33
+ * <Button buttonType="primary" disabled>
34
+ * Submit
35
+ * </Button>{' '}
36
+ * <Button buttonType="negative" disabled>
37
+ * Submit
38
+ * </Button>
39
+ * </div>
40
+ * </Canvas>;
41
+ * ```
42
+ *
43
+ * @example Full-width
44
+ *
45
+ * ```js
46
+ * <Canvas ctx={ctx}>
47
+ * <Button fullWidth>Submit</Button>
48
+ * </Canvas>;
49
+ * ```
50
+ *
51
+ * @example Sizing
52
+ *
53
+ * ```js
54
+ * <Canvas ctx={ctx}>
55
+ * <Button buttonSize="xxs">Submit</Button>{' '}
56
+ * <Button buttonSize="xs">Submit</Button>{' '}
57
+ * <Button buttonSize="s">Submit</Button>{' '}
58
+ * <Button buttonSize="m">Submit</Button>{' '}
59
+ * <Button buttonSize="l">Submit</Button>{' '}
60
+ * <Button buttonSize="xl">Submit</Button>{' '}
61
+ * </Canvas>;
62
+ * ```
63
+ *
64
+ * @example Icons
65
+ *
66
+ * ```js
67
+ * <Canvas ctx={ctx}>
68
+ * <div style={{ marginBottom: 'var(--spacing-m)' }}>
69
+ * <Button leftIcon={<PlusIcon />}>Submit</Button>
70
+ * </div>
71
+ * <div style={{ marginBottom: 'var(--spacing-m)' }}>
72
+ * <Button rightIcon={<ChevronDownIcon />}>Options</Button>
73
+ * </div>
74
+ * <div>
75
+ * <Button leftIcon={<PlusIcon />} />
76
+ * </div>
77
+ * </Canvas>;
78
+ * ```
79
+ */
80
+ export function Button({
81
+ children,
82
+ className,
83
+ disabled,
84
+ buttonType = 'muted',
85
+ buttonSize = 'm',
86
+ fullWidth,
87
+ onClick,
88
+ style,
89
+ leftIcon,
90
+ rightIcon,
91
+ type = 'button',
92
+ }: ButtonProps): JSX.Element {
93
+ return (
94
+ <button
95
+ type={type}
96
+ className={cn(
97
+ styles.button,
98
+ styles[`buttonType-${buttonType}`],
99
+ styles[`buttonSize-${buttonSize}`],
100
+ {
101
+ [styles.disabled]: disabled,
102
+ [styles.fullWidth]: fullWidth,
103
+ },
104
+ className,
105
+ )}
106
+ disabled={disabled}
107
+ onClick={onClick}
108
+ style={style}
109
+ >
110
+ {leftIcon && (
111
+ <span className={styles['button__leftIcon']}>{leftIcon}</span>
112
+ )}
113
+ {children && <span>{children}</span>}
114
+ {rightIcon && (
115
+ <span className={styles['button__rightIcon']}>{rightIcon}</span>
116
+ )}
117
+ </button>
118
+ );
119
+ }
120
+
121
+ export type ButtonLinkProps = {
122
+ children?: ReactNode;
123
+ href: string;
124
+ target?: React.AnchorHTMLAttributes<HTMLAnchorElement>['target'];
125
+ className?: string;
126
+ onClick?: MouseEventHandler;
127
+ buttonType?: 'primary' | 'muted' | 'negative';
128
+ buttonSize?: 'xxs' | 'xs' | 's' | 'm' | 'l' | 'xl';
129
+ fullWidth?: boolean;
130
+ style?: CSSProperties;
131
+ leftIcon?: ReactNode;
132
+ rightIcon?: ReactNode;
133
+ };
134
+
135
+ export function ButtonLink({
136
+ children,
137
+ href,
138
+ target = '_blank',
139
+ className,
140
+ buttonType = 'muted',
141
+ buttonSize = 'm',
142
+ onClick,
143
+ fullWidth,
144
+ leftIcon,
145
+ rightIcon,
146
+ style,
147
+ }: ButtonLinkProps): JSX.Element {
148
+ return (
149
+ <a
150
+ href={href}
151
+ target={target}
152
+ className={cn(
153
+ styles.button,
154
+ styles[`buttonType-${buttonType}`],
155
+ styles[`buttonSize-${buttonSize}`],
156
+ {
157
+ [styles.fullWidth]: fullWidth,
158
+ },
159
+ className,
160
+ )}
161
+ style={style}
162
+ onClick={onClick}
163
+ >
164
+ {leftIcon && (
165
+ <span className={styles['button__leftIcon']}>{leftIcon}</span>
166
+ )}
167
+ {children && <span>{children}</span>}
168
+ {rightIcon && (
169
+ <span className={styles['button__rightIcon']}>{rightIcon}</span>
170
+ )}
171
+ </a>
172
+ );
173
+ }