@luscii-healthtech/web-ui 2.4.0 → 2.4.1
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.
- package/dist/components/Form/Form.d.ts +15 -5
- package/dist/components/Form/form.types.d.ts +6 -2
- package/dist/index.d.ts +5 -2
- package/dist/web-ui.cjs.development.js +344 -319
- package/dist/web-ui.cjs.development.js.map +1 -1
- package/dist/web-ui.cjs.production.min.js +1 -1
- package/dist/web-ui.cjs.production.min.js.map +1 -1
- package/dist/web-ui.esm.js +341 -320
- package/dist/web-ui.esm.js.map +1 -1
- package/package.json +1 -1
- package/src/components/Form/Form.tsx +100 -68
- package/src/components/Form/form.types.ts +8 -1
- package/src/index.tsx +8 -2
package/dist/web-ui.esm.js
CHANGED
|
@@ -4259,10 +4259,96 @@ RadioGroup.propTypes = {
|
|
|
4259
4259
|
onChange: PropTypes.func
|
|
4260
4260
|
};
|
|
4261
4261
|
|
|
4262
|
-
var css_248z$m = ".
|
|
4262
|
+
var css_248z$m = ".radio-form-field-label input[type=\"radio\"]:checked + .radio-circle {\n --bg-opacity: 1;\n background-color: #0074DD;\n background-color: rgba(0, 116, 221, var(--bg-opacity));\n}\n\n.radio-form-field-label[data-has-error=\"true\"] .radio-circle {\n --border-opacity: 1;\n border-color: #c53030;\n border-color: rgba(197, 48, 48, var(--border-opacity));\n outline: 4px solid rgba(255, 98, 102, 0.3);\n outline-offset: 0;\n}\n\n.radio-form-field-label\n input[type=\"radio\"]:checked\n + .radio-circle\n .radio-inner-circle {\n --bg-opacity: 1;\n background-color: #fff;\n background-color: rgba(255, 255, 255, var(--bg-opacity));\n}\n";
|
|
4263
4263
|
styleInject(css_248z$m);
|
|
4264
4264
|
|
|
4265
|
-
var _excluded$c = ["
|
|
4265
|
+
var _excluded$c = ["text", "info", "isError", "innerRef", "className"];
|
|
4266
|
+
|
|
4267
|
+
function RadioInner(_ref) {
|
|
4268
|
+
var text = _ref.text,
|
|
4269
|
+
info = _ref.info,
|
|
4270
|
+
isError = _ref.isError,
|
|
4271
|
+
innerRef = _ref.innerRef,
|
|
4272
|
+
className = _ref.className,
|
|
4273
|
+
otherProps = _objectWithoutPropertiesLoose(_ref, _excluded$c);
|
|
4274
|
+
|
|
4275
|
+
var value = otherProps.value,
|
|
4276
|
+
disabled = otherProps.disabled;
|
|
4277
|
+
var nameHtmlFor = "field-" + value;
|
|
4278
|
+
return /*#__PURE__*/React__default.createElement("label", {
|
|
4279
|
+
className: "radio-form-field-label leading-tight",
|
|
4280
|
+
htmlFor: nameHtmlFor,
|
|
4281
|
+
"data-has-error": isError,
|
|
4282
|
+
"data-test-id": nameHtmlFor
|
|
4283
|
+
}, /*#__PURE__*/React__default.createElement("div", {
|
|
4284
|
+
className: "flex flex-row items-center "
|
|
4285
|
+
}, /*#__PURE__*/React__default.createElement("input", Object.assign({}, otherProps, {
|
|
4286
|
+
className: classNames("appearance-none", className),
|
|
4287
|
+
ref: innerRef,
|
|
4288
|
+
type: "radio",
|
|
4289
|
+
id: nameHtmlFor,
|
|
4290
|
+
disabled: disabled
|
|
4291
|
+
})), /*#__PURE__*/React__default.createElement("span", {
|
|
4292
|
+
className: classNames("flex flex-col items-center justify-center w-4 h-4 transition-colors duration-300 ease-in-out border radio-circle rounded-xl border-slate-300")
|
|
4293
|
+
}, /*#__PURE__*/React__default.createElement("span", {
|
|
4294
|
+
className: "block transition-colors duration-300 ease-in-out radio-inner-circle w-1.5 h-1.5 rounded-xl"
|
|
4295
|
+
})), text && /*#__PURE__*/React__default.createElement("div", {
|
|
4296
|
+
className: "ml-2"
|
|
4297
|
+
}, /*#__PURE__*/React__default.createElement(Text, {
|
|
4298
|
+
inline: true,
|
|
4299
|
+
text: text,
|
|
4300
|
+
type: "base",
|
|
4301
|
+
color: disabled ? "slate-500" : undefined
|
|
4302
|
+
}))), info && /*#__PURE__*/React__default.createElement(Text, {
|
|
4303
|
+
inline: true,
|
|
4304
|
+
className: "ml-6",
|
|
4305
|
+
text: info,
|
|
4306
|
+
type: "sm",
|
|
4307
|
+
color: disabled ? "slate-200" : "slate-500"
|
|
4308
|
+
}));
|
|
4309
|
+
}
|
|
4310
|
+
/**
|
|
4311
|
+
* TODO: The CSS styling is all messed up, including isError
|
|
4312
|
+
* Warning: don't use this prop before this is resolved
|
|
4313
|
+
* Issue to track: https://github.com/Luscii/web-ui/issues/57
|
|
4314
|
+
* TODO: remove this comment once this is resolved
|
|
4315
|
+
*/
|
|
4316
|
+
|
|
4317
|
+
|
|
4318
|
+
var RadioV2 = /*#__PURE__*/React__default.forwardRef(function (props, ref) {
|
|
4319
|
+
return /*#__PURE__*/React__default.createElement(RadioInner, Object.assign({}, props, {
|
|
4320
|
+
innerRef: ref
|
|
4321
|
+
}));
|
|
4322
|
+
});
|
|
4323
|
+
|
|
4324
|
+
var _excluded$d = ["innerRef", "options"];
|
|
4325
|
+
|
|
4326
|
+
function RadioGroupInner(_ref) {
|
|
4327
|
+
var innerRef = _ref.innerRef,
|
|
4328
|
+
options = _ref.options,
|
|
4329
|
+
registerProps = _objectWithoutPropertiesLoose(_ref, _excluded$d);
|
|
4330
|
+
|
|
4331
|
+
return /*#__PURE__*/React__default.createElement("div", {
|
|
4332
|
+
className: classNames("flex flex-col space-y-2")
|
|
4333
|
+
}, options.map(function (option) {
|
|
4334
|
+
return /*#__PURE__*/React__default.createElement(RadioV2, Object.assign({
|
|
4335
|
+
key: option.value
|
|
4336
|
+
}, option, registerProps, {
|
|
4337
|
+
ref: innerRef
|
|
4338
|
+
}));
|
|
4339
|
+
}));
|
|
4340
|
+
}
|
|
4341
|
+
|
|
4342
|
+
var RadioGroupV2 = /*#__PURE__*/React__default.forwardRef(function (props, ref) {
|
|
4343
|
+
return /*#__PURE__*/React__default.createElement(RadioGroupInner, Object.assign({}, props, {
|
|
4344
|
+
innerRef: ref
|
|
4345
|
+
}));
|
|
4346
|
+
});
|
|
4347
|
+
|
|
4348
|
+
var css_248z$n = ".cweb-section .cweb-button:last-of-type {\n margin-right: 24px;\n}\n\n.cweb-section .cweb-button:not(:last-of-type) {\n margin-right: 8px;\n}\n\n.cweb-section .cweb-button.add-button, .cweb-section .cweb-button.edit-button, .cweb-section .cweb-button.delete-button {\n margin-left: auto;\n width: 32px;\n height: 32px;\n}\n\n.cweb-section .cweb-button.add-button {\n background: url(\"data:image/svg+xml,%3Csvg width%3D%2244%22 height%3D%2244%22 viewBox%3D%220 0 44 44%22 fill%3D%22none%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Ccircle cx%3D%2222%22 cy%3D%2222%22 r%3D%2222%22 fill%3D%22white%22%2F%3E%3Crect x%3D%220.5%22 y%3D%220.5%22 width%3D%2243%22 height%3D%2243%22 rx%3D%2221.5%22 stroke%3D%22%23009FE3%22%2F%3E%3Cpath fill-rule%3D%22evenodd%22 clip-rule%3D%22evenodd%22 d%3D%22M22 32C23.1046 32 24 31.1046 24 30L24 24H30C31.1046 24 32 23.1046 32 22C32 20.8954 31.1046 20 30 20H24L24 14C24 12.8954 23.1046 12 22 12C20.8954 12 20 12.8954 20 14L20 20H14C12.8954 20 12 20.8954 12 22C12 23.1046 12.8954 24 14 24H20L20 30C20 31.1046 20.8954 32 22 32Z%22 fill%3D%22%23009FE3%22%2F%3E%3C%2Fsvg%3E\") no-repeat center;\n background-size: contain;\n}\n\n.cweb-section .cweb-button.add-button:hover, .cweb-section .cweb-button.add-button:active, .cweb-section .cweb-button.add-button:focus {\n background: url(\"data:image/svg+xml,%3Csvg width%3D%2244%22 height%3D%2244%22 viewBox%3D%220 0 44 44%22 fill%3D%22none%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Crect x%3D%220.5%22 y%3D%220.5%22 width%3D%2243%22 height%3D%2243%22 rx%3D%2221.5%22 stroke%3D%22%230A78B2%22%2F%3E%3Cpath fill-rule%3D%22evenodd%22 clip-rule%3D%22evenodd%22 d%3D%22M21 12C19.8954 12 19 12.8954 19 14V19L14 19C12.8954 19 12 19.8954 12 21V23C12 24.1046 12.8954 25 14 25H19V30C19 31.1046 19.8954 32 21 32H23C24.1046 32 25 31.1046 25 30V25H30C31.1046 25 32 24.1046 32 23V21C32 19.8954 31.1046 19 30 19L25 19V14C25 12.8954 24.1046 12 23 12H21Z%22 fill%3D%22%23007BBB%22%2F%3E%3C%2Fsvg%3E\") no-repeat center;\n background-size: contain;\n}\n\n.cweb-section .cweb-button.edit-button {\n background: url(\"data:image/svg+xml,%3Csvg width%3D%2244%22 height%3D%2244%22 viewBox%3D%220 0 44 44%22 fill%3D%22none%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Crect x%3D%220.5%22 y%3D%220.5%22 width%3D%2243%22 height%3D%2243%22 rx%3D%2221.5%22 stroke%3D%22%23009FE3%22%2F%3E%3Cpath d%3D%22M13.5643 27.1001C13.4169 26.9527 13.1433 27.0159 13.1012 27.2266L12.0065 31.6507C11.9644 31.8614 12.1328 32.051 12.3433 31.9878L16.7851 30.9134C16.9956 30.8712 17.0799 30.5973 16.9114 30.4499L13.5643 27.1001Z%22 fill%3D%22%23009FE3%22%2F%3E%3Cpath d%3D%22M26.2161 14.1222C26.1109 14.0169 25.9214 14.0169 25.8161 14.1222L14.4484 25.4987C14.3432 25.604 14.3432 25.7936 14.4484 25.8989L18.1114 29.5647C18.2166 29.67 18.4061 29.67 18.5113 29.5647L29.879 18.1882C29.9843 18.0829 29.9843 17.8933 29.879 17.788L26.2161 14.1222Z%22 fill%3D%22%23009FE3%22%2F%3E%3Cpath d%3D%22M31.1633 12.8374C30.0475 11.7209 28.2161 11.7209 27.1004 12.8374C27.0583 12.8796 27.0583 12.9217 27.1004 12.9638L31.037 16.9035C31.0791 16.9456 31.1212 16.9456 31.1633 16.9035C32.279 15.7869 32.279 13.954 31.1633 12.8374Z%22 fill%3D%22%23009FE3%22%2F%3E%3C%2Fsvg%3E\") no-repeat center;\n background-size: contain;\n}\n\n.cweb-section .cweb-button.edit-button:hover, .cweb-section .cweb-button.edit-button:active, .cweb-section .cweb-button.edit-button:focus {\n background: url(\"data:image/svg+xml,%3Csvg width%3D%2244%22 height%3D%2244%22 viewBox%3D%220 0 44 44%22 fill%3D%22none%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Crect x%3D%220.5%22 y%3D%220.5%22 width%3D%2243%22 height%3D%2243%22 rx%3D%2221.5%22 stroke%3D%22%23007BBB%22%2F%3E%3Cpath d%3D%22M13.5643 27.1001C13.4169 26.9527 13.1433 27.0159 13.1012 27.2266L12.0065 31.6507C11.9644 31.8614 12.1328 32.051 12.3433 31.9878L16.7851 30.9134C16.9956 30.8712 17.0799 30.5973 16.9114 30.4499L13.5643 27.1001Z%22 fill%3D%22%230A78B2%22%2F%3E%3Cpath d%3D%22M26.2161 14.1222C26.1109 14.0169 25.9214 14.0169 25.8161 14.1222L14.4484 25.4987C14.3432 25.604 14.3432 25.7936 14.4484 25.8989L18.1114 29.5647C18.2166 29.67 18.4061 29.67 18.5113 29.5647L29.879 18.1882C29.9843 18.0829 29.9843 17.8933 29.879 17.788L26.2161 14.1222Z%22 fill%3D%22%230A78B2%22%2F%3E%3Cpath d%3D%22M31.1633 12.8374C30.0475 11.7209 28.2161 11.7209 27.1004 12.8374C27.0583 12.8796 27.0583 12.9217 27.1004 12.9638L31.037 16.9035C31.0791 16.9456 31.1212 16.9456 31.1633 16.9035C32.279 15.7869 32.279 13.954 31.1633 12.8374Z%22 fill%3D%22%230A78B2%22%2F%3E%3C%2Fsvg%3E\") no-repeat center;\n background-size: contain;\n}\n\n.cweb-section .cweb-button.delete-button {\n background: url(\"data:image/svg+xml,%3Csvg width%3D%2244%22 height%3D%2244%22 viewBox%3D%220 0 44 44%22 fill%3D%22none%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Crect x%3D%220.5%22 y%3D%220.5%22 width%3D%2243%22 height%3D%2243%22 rx%3D%2221.5%22 stroke%3D%22%23FF6266%22%2F%3E%3Cpath fill-rule%3D%22evenodd%22 clip-rule%3D%22evenodd%22 d%3D%22M13 12C12.4477 12 12 12.4477 12 13C12 13.5523 12.4477 14 13 14H31C31.5523 14 32 13.5523 32 13C32 12.4477 31.5523 12 31 12H13ZM14 16H30V30C30 31.1046 29.1046 32 28 32H16C14.8954 32 14 31.1046 14 30V16ZM17 18H19V30H17V18ZM21 18H23V30H21V18ZM27 18H25V30H27V18Z%22 fill%3D%22%23FF6266%22%2F%3E%3C%2Fsvg%3E\") no-repeat center;\n background-size: contain;\n}\n\n.cweb-section .cweb-button.delete-button:hover, .cweb-section .cweb-button.delete-button:active, .cweb-section .cweb-button.delete-button:focus {\n background: url(\"data:image/svg+xml,%3Csvg width%3D%2244%22 height%3D%2244%22 viewBox%3D%220 0 44 44%22 fill%3D%22none%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath fill-rule%3D%22evenodd%22 clip-rule%3D%22evenodd%22 d%3D%22M13 12C12.4477 12 12 12.4477 12 13C12 13.5523 12.4477 14 13 14H31C31.5523 14 32 13.5523 32 13C32 12.4477 31.5523 12 31 12H13ZM14 16H30V30C30 31.1046 29.1046 32 28 32H16C14.8954 32 14 31.1046 14 30V16ZM17 18H19V30H17V18ZM21 18H23V30H21V18ZM27 18H25V30H27V18Z%22 fill%3D%22%23FC494E%22%2F%3E%3Crect x%3D%220.5%22 y%3D%220.5%22 width%3D%2243%22 height%3D%2243%22 rx%3D%2221.5%22 stroke%3D%22%23FC494E%22%2F%3E%3C%2Fsvg%3E\") no-repeat center;\n background-size: contain;\n}\n\n.cweb-section > .cweb-section-header {\n display: flex;\n justify-content: space-between;\n flex-direction: row;\n align-items: center;\n border-bottom: 1px solid #eeeeee;\n width: 100%;\n padding: 18px 24px;\n}\n\n.cweb-section > .cweb-section-footer {\n display: flex;\n justify-content: space-between;\n flex-direction: row;\n align-items: center;\n border-top: 1px solid #eeeeee;\n width: 100%;\n padding: 1rem 24px 1rem 24px;\n}\n\n.cweb-section > .cweb-section-footer img {\n width: 32px;\n height: 32px;\n}\n";
|
|
4349
|
+
styleInject(css_248z$n);
|
|
4350
|
+
|
|
4351
|
+
var _excluded$e = ["title", "buttons", "footer", "children", "className", "isLoading", "loadingIndicatorProps"];
|
|
4266
4352
|
function Section(_ref) {
|
|
4267
4353
|
var title = _ref.title,
|
|
4268
4354
|
buttons = _ref.buttons,
|
|
@@ -4272,7 +4358,7 @@ function Section(_ref) {
|
|
|
4272
4358
|
_ref$isLoading = _ref.isLoading,
|
|
4273
4359
|
isLoading = _ref$isLoading === void 0 ? false : _ref$isLoading,
|
|
4274
4360
|
loadingIndicatorProps = _ref.loadingIndicatorProps,
|
|
4275
|
-
restProps = _objectWithoutPropertiesLoose(_ref, _excluded$
|
|
4361
|
+
restProps = _objectWithoutPropertiesLoose(_ref, _excluded$e);
|
|
4276
4362
|
|
|
4277
4363
|
return /*#__PURE__*/React__default.createElement("div", Object.assign({}, restProps, {
|
|
4278
4364
|
className: classNames("cweb-section", "flex justify-start flex-col items-start", "rounded-lg", "mx-0 my-4", "bg-white", "w-full", className)
|
|
@@ -4300,15 +4386,15 @@ function Section(_ref) {
|
|
|
4300
4386
|
}, footer));
|
|
4301
4387
|
}
|
|
4302
4388
|
|
|
4303
|
-
var css_248z$
|
|
4304
|
-
styleInject(css_248z$
|
|
4389
|
+
var css_248z$o = ".cweb-list-item {\n display: flex;\n justify-content: flex-start;\n flex-direction: row;\n align-items: center;\n padding: 16px 0 16px 0;\n border-bottom: 1px solid #eeeeee;\n}\n\n.cweb-list-item:last-child {\n border-bottom: none;\n}\n\n.cweb-list-item.cweb-list-item-clickable {\n cursor: pointer;\n}\n\n.cweb-list-item.cweb-list-item-clickable:hover {\n background-color: #f2fafd;\n}\n";
|
|
4390
|
+
styleInject(css_248z$o);
|
|
4305
4391
|
|
|
4306
|
-
var _excluded$
|
|
4392
|
+
var _excluded$f = ["children", "className", "onClick"];
|
|
4307
4393
|
var SectionItem = function SectionItem(props) {
|
|
4308
4394
|
var children = props.children,
|
|
4309
4395
|
className = props.className,
|
|
4310
4396
|
onClick = props.onClick,
|
|
4311
|
-
rest = _objectWithoutPropertiesLoose(props, _excluded$
|
|
4397
|
+
rest = _objectWithoutPropertiesLoose(props, _excluded$f);
|
|
4312
4398
|
|
|
4313
4399
|
var classes = classNames("cweb-list-item", className, {
|
|
4314
4400
|
"cweb-list-item-clickable": !!onClick
|
|
@@ -4319,7 +4405,7 @@ var SectionItem = function SectionItem(props) {
|
|
|
4319
4405
|
}, rest), children);
|
|
4320
4406
|
};
|
|
4321
4407
|
|
|
4322
|
-
var _excluded$
|
|
4408
|
+
var _excluded$g = ["text", "icon", "className", "iconClass", "onClick"];
|
|
4323
4409
|
|
|
4324
4410
|
function SectionItemWithContent(props) {
|
|
4325
4411
|
var text = props.text,
|
|
@@ -4327,7 +4413,7 @@ function SectionItemWithContent(props) {
|
|
|
4327
4413
|
className = props.className,
|
|
4328
4414
|
iconClass = props.iconClass,
|
|
4329
4415
|
onClick = props.onClick,
|
|
4330
|
-
rest = _objectWithoutPropertiesLoose(props, _excluded$
|
|
4416
|
+
rest = _objectWithoutPropertiesLoose(props, _excluded$g);
|
|
4331
4417
|
|
|
4332
4418
|
var mergedClasses = classNames("cweb-section-text-item", className);
|
|
4333
4419
|
var iconClasses = classNames("w-6 h-6 mr-4", iconClass);
|
|
@@ -4343,6 +4429,150 @@ function SectionItemWithContent(props) {
|
|
|
4343
4429
|
}));
|
|
4344
4430
|
}
|
|
4345
4431
|
|
|
4432
|
+
var _excluded$h = ["isError", "styles", "options", "onChange", "value", "isMulti", "className"];
|
|
4433
|
+
|
|
4434
|
+
function generateCustomStyles$1(hasError, isIE11) {
|
|
4435
|
+
return {
|
|
4436
|
+
option: function option(baseStyles, state) {
|
|
4437
|
+
return _extends({}, baseStyles, {
|
|
4438
|
+
fontWeight: state.isSelected ? "bold" : "normal",
|
|
4439
|
+
fontSize: "14px",
|
|
4440
|
+
backgroundColor: "none",
|
|
4441
|
+
color: "inherit",
|
|
4442
|
+
position: "relative",
|
|
4443
|
+
padding: "0.75rem",
|
|
4444
|
+
opacity: state.isDisabled ? "0.5" : 1,
|
|
4445
|
+
"&:after": {
|
|
4446
|
+
visibility: state.isSelected ? "visible" : "hidden"
|
|
4447
|
+
},
|
|
4448
|
+
transition: "background-color 0.3s ease-in-out",
|
|
4449
|
+
"&:hover": {
|
|
4450
|
+
// tailwind blue-50
|
|
4451
|
+
backgroundColor: state.isSelected ? "transparent" : "#F2FAFD"
|
|
4452
|
+
},
|
|
4453
|
+
pointerEvents: state.isDisabled ? "none" : "auto"
|
|
4454
|
+
});
|
|
4455
|
+
},
|
|
4456
|
+
container: function container(baseStyles) {
|
|
4457
|
+
return _extends({}, baseStyles, {
|
|
4458
|
+
flexGrow: isIE11 ? 0.5 : "initial"
|
|
4459
|
+
});
|
|
4460
|
+
},
|
|
4461
|
+
control: function control(baseStyles, state) {
|
|
4462
|
+
var defaultBorderColor = state.isFocused ? "#045baa" : "#D1D5DB";
|
|
4463
|
+
var validatedBorderColor = hasError ? "#c53030" : defaultBorderColor;
|
|
4464
|
+
var defaultOutline = hasError ? "rgba(255, 98, 102, 0.3)" : "rgba(0, 159, 227, 0.3)";
|
|
4465
|
+
var validatedOutline = "4px solid " + (state.isFocused ? defaultOutline : "transparent");
|
|
4466
|
+
return _extends({}, baseStyles, {
|
|
4467
|
+
fontSize: "14px",
|
|
4468
|
+
transition: "border 0.3s ease-in-out",
|
|
4469
|
+
height: isIE11 ? "50px" : "2.75rem",
|
|
4470
|
+
// primary outline
|
|
4471
|
+
outline: validatedOutline,
|
|
4472
|
+
borderColor: validatedBorderColor,
|
|
4473
|
+
borderWidth: "1px !important",
|
|
4474
|
+
borderStyle: "solid",
|
|
4475
|
+
borderRadius: "4px",
|
|
4476
|
+
boxShadow: "0px 1px 2px rgba(0, 0, 0, 0.05)",
|
|
4477
|
+
"&:hover": {
|
|
4478
|
+
borderColor: "#9CA3AF",
|
|
4479
|
+
// selector for the chevron
|
|
4480
|
+
"> [class*=\"IndicatorsContainer\"]": {
|
|
4481
|
+
opacity: 1
|
|
4482
|
+
}
|
|
4483
|
+
}
|
|
4484
|
+
});
|
|
4485
|
+
},
|
|
4486
|
+
// The placeholder has the following css prop: grid-area: 1/1/2/3;
|
|
4487
|
+
// And grid-area doesn't work on IE11, so we need to style it slightly different.
|
|
4488
|
+
placeholder: function placeholder(baseStyles) {
|
|
4489
|
+
return _extends({}, baseStyles, {
|
|
4490
|
+
fontWeight: 100,
|
|
4491
|
+
color: "#6B7280",
|
|
4492
|
+
paddingTop: isIE11 ? "1.2rem" : undefined
|
|
4493
|
+
});
|
|
4494
|
+
},
|
|
4495
|
+
singleValue: function singleValue(baseStyles) {
|
|
4496
|
+
return _extends({}, baseStyles, {
|
|
4497
|
+
paddingTop: isIE11 ? "1.2rem" : undefined,
|
|
4498
|
+
fontSize: "14px"
|
|
4499
|
+
});
|
|
4500
|
+
},
|
|
4501
|
+
indicatorSeparator: function indicatorSeparator() {
|
|
4502
|
+
return {
|
|
4503
|
+
display: "none"
|
|
4504
|
+
};
|
|
4505
|
+
},
|
|
4506
|
+
menu: function menu(baseStyles) {
|
|
4507
|
+
return _extends({}, baseStyles, {
|
|
4508
|
+
zIndex: 20
|
|
4509
|
+
});
|
|
4510
|
+
}
|
|
4511
|
+
};
|
|
4512
|
+
}
|
|
4513
|
+
/**
|
|
4514
|
+
* A wrapper around react-select to style it according to our design specification.
|
|
4515
|
+
*
|
|
4516
|
+
* In addition, the value is taken out of the option, instead of returning the complete option.
|
|
4517
|
+
*
|
|
4518
|
+
* Care when using grouped options: the value of the options overspanning all groups need to be unique!
|
|
4519
|
+
* For instance, if you have an option with value "chocolate" in both the groups "flavor" and "dip", then you get unforeseen errors.
|
|
4520
|
+
* This is a problem within react-select itself, not our wrapper.
|
|
4521
|
+
*
|
|
4522
|
+
* Care when using defaultValue: this still requires the complete Option (instead of the value of the Option).
|
|
4523
|
+
* So far there wasn't a use-case for this.
|
|
4524
|
+
*/
|
|
4525
|
+
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
4526
|
+
|
|
4527
|
+
|
|
4528
|
+
var Select = /*#__PURE__*/React__default.forwardRef(function (_ref, innerRef) {
|
|
4529
|
+
var _ref$isError = _ref.isError,
|
|
4530
|
+
isError = _ref$isError === void 0 ? false : _ref$isError,
|
|
4531
|
+
styles = _ref.styles,
|
|
4532
|
+
options = _ref.options,
|
|
4533
|
+
onChange = _ref.onChange,
|
|
4534
|
+
value = _ref.value,
|
|
4535
|
+
isMulti = _ref.isMulti,
|
|
4536
|
+
className = _ref.className,
|
|
4537
|
+
otherProps = _objectWithoutPropertiesLoose(_ref, _excluded$h);
|
|
4538
|
+
|
|
4539
|
+
var isIE11 = "MSInputMethodContext" in window && "documentMode" in document;
|
|
4540
|
+
var customStyles = generateCustomStyles$1(isError, isIE11);
|
|
4541
|
+
var mergedStyles = mergeStyles(customStyles, styles); // the options can be either a list of options or a grouped list of options
|
|
4542
|
+
// this is a typechecker to verify it is the case.
|
|
4543
|
+
|
|
4544
|
+
var isOptionsGrouped = !options ? false : options.reduce(function (acc, o) {
|
|
4545
|
+
return acc || "options" in o && !("values" in o);
|
|
4546
|
+
}, false); // we subsequently flatmap to ensure it's always a list of options
|
|
4547
|
+
|
|
4548
|
+
var flatmappedOptions = !options ? [] : isOptionsGrouped ? options.flatMap(function (g) {
|
|
4549
|
+
return g.options;
|
|
4550
|
+
}) : options; // based on: https://stackoverflow.com/a/70022957
|
|
4551
|
+
|
|
4552
|
+
var onChangeWrapped = !onChange ? undefined : isMulti ? function (val, a) {
|
|
4553
|
+
return onChange(val.map(function (v) {
|
|
4554
|
+
return v.value;
|
|
4555
|
+
}), a);
|
|
4556
|
+
} : function (val, a) {
|
|
4557
|
+
return onChange(val == null ? void 0 : val.value, a);
|
|
4558
|
+
}; // TODO: how can we report the error if a value was given that is not within the options?
|
|
4559
|
+
|
|
4560
|
+
var valueWrapped = !value || !options ? value : isMulti ? flatmappedOptions.filter(function (o) {
|
|
4561
|
+
return value.includes(o.value);
|
|
4562
|
+
}) : flatmappedOptions.find(function (o) {
|
|
4563
|
+
return o.value === value;
|
|
4564
|
+
});
|
|
4565
|
+
return /*#__PURE__*/React__default.createElement(ReactSelect, Object.assign({}, otherProps, {
|
|
4566
|
+
ref: innerRef,
|
|
4567
|
+
styles: mergedStyles,
|
|
4568
|
+
options: options,
|
|
4569
|
+
onChange: onChangeWrapped,
|
|
4570
|
+
value: valueWrapped,
|
|
4571
|
+
isMulti: isMulti,
|
|
4572
|
+
className: classNames("customized-select", className)
|
|
4573
|
+
}));
|
|
4574
|
+
});
|
|
4575
|
+
|
|
4346
4576
|
var useOutsideClick = function useOutsideClick(ref, callback) {
|
|
4347
4577
|
var handleClick = function handleClick(e) {
|
|
4348
4578
|
if (ref.current && !ref.current.contains(e.target)) {
|
|
@@ -4449,8 +4679,8 @@ var SettingsMenuButton = function SettingsMenuButton(props) {
|
|
|
4449
4679
|
})));
|
|
4450
4680
|
};
|
|
4451
4681
|
|
|
4452
|
-
var css_248z$
|
|
4453
|
-
styleInject(css_248z$
|
|
4682
|
+
var css_248z$p = ".cweb-switcher-item {\n display: flex;\n justify-content: center;\n flex-direction: row;\n align-items: center;\n}\n\n.cweb-switcher-item .cweb-switcher-item-link {\n display: flex;\n align-items: center;\n text-decoration: none;\n padding: 0.5rem 1rem;\n cursor: pointer;\n}\n\n.cweb-switcher-item .cweb-switcher-item-link .cweb-switcher-item-link-icon {\n display: flex;\n align-items: center;\n}\n\n.cweb-switcher-item .cweb-switcher-item-link .cweb-switcher-item-link-icon .cweb-switcher-item-link-icon-default,\n .cweb-switcher-item .cweb-switcher-item-link .cweb-switcher-item-link-icon .cweb-switcher-item-link-icon-active {\n width: 20px;\n height: 20px;\n}\n\n.cweb-switcher-item .cweb-switcher-item-link .cweb-switcher-item-link-icon .cweb-switcher-item-link-icon-active {\n display: none;\n}\n\n.cweb-switcher-item .cweb-switcher-item-link .cweb-switcher-item-link-text {\n color: #737373;\n transition: color 0.4s ease;\n padding-bottom: 0;\n}\n\n.cweb-switcher-item .cweb-switcher-item-link .cweb-switcher-item-link-icon + .cweb-switcher-item-link-text {\n margin-left: 8px;\n padding: 0;\n}\n\n.cweb-switcher-item.is-selected, .cweb-switcher-item:hover, .cweb-switcher-item:active {\n border-color: #0074dd;\n z-index: 1;\n}\n\n.cweb-switcher-item.is-selected .cweb-switcher-item-link .cweb-switcher-item-link-icon .cweb-switcher-item-link-icon-default, .cweb-switcher-item:hover .cweb-switcher-item-link .cweb-switcher-item-link-icon .cweb-switcher-item-link-icon-default, .cweb-switcher-item:active .cweb-switcher-item-link .cweb-switcher-item-link-icon .cweb-switcher-item-link-icon-default {\n display: none;\n}\n\n.cweb-switcher-item.is-selected .cweb-switcher-item-link .cweb-switcher-item-link-icon .cweb-switcher-item-link-icon-active, .cweb-switcher-item:hover .cweb-switcher-item-link .cweb-switcher-item-link-icon .cweb-switcher-item-link-icon-active, .cweb-switcher-item:active .cweb-switcher-item-link .cweb-switcher-item-link-icon .cweb-switcher-item-link-icon-active {\n display: inherit;\n}\n\n.cweb-switcher-item.is-selected .cweb-switcher-item-link .cweb-switcher-item-link-text, .cweb-switcher-item:hover .cweb-switcher-item-link .cweb-switcher-item-link-text, .cweb-switcher-item:active .cweb-switcher-item-link .cweb-switcher-item-link-text {\n color: #0074dd;\n}\n\n.cweb-switcher-item.is-disabled {\n pointer-events: none;\n}\n";
|
|
4683
|
+
styleInject(css_248z$p);
|
|
4454
4684
|
|
|
4455
4685
|
SwitcherItem.propTypes = {
|
|
4456
4686
|
name: PropTypes.string,
|
|
@@ -4783,10 +5013,10 @@ var TagGroup = function TagGroup(_ref) {
|
|
|
4783
5013
|
}));
|
|
4784
5014
|
};
|
|
4785
5015
|
|
|
4786
|
-
var css_248z$
|
|
4787
|
-
styleInject(css_248z$
|
|
5016
|
+
var css_248z$q = ".cweb-textarea {\n border: 1px solid #cccccc;\n border-radius: 4px;\n outline: none;\n background-color: #ffffff;\n resize: none;\n}\n\n.cweb-textarea.has-icon {\n background-size: 24px;\n background-position: 10px 10px;\n background-repeat: no-repeat;\n padding-left: 44px;\n}\n\n.cweb-textarea.resizable {\n resize: both;\n}\n\n.cweb-textarea.resizable-x {\n resize: horizontal;\n}\n\n.cweb-textarea.resizable-y {\n resize: vertical;\n}\n\n.cweb-textarea:-ms-input-placeholder {\n color: #737373;\n}\n\n.cweb-textarea::placeholder {\n color: #737373;\n}\n\n.cweb-textarea:-ms-input-placeholder {\n color: #64748b !important;\n}\n\n.cweb-textarea::-ms-input-placeholder {\n color: #64748b;\n}\n\n.cweb-textarea:focus {\n border-color: #0074dd;\n}\n\n.cweb-textarea:disabled {\n cursor: not-allowed;\n}\n\n.cweb-textarea.has-error {\n border: 1px solid #ff6266;\n color: #ff6266;\n}\n";
|
|
5017
|
+
styleInject(css_248z$q);
|
|
4788
5018
|
|
|
4789
|
-
var _excluded$
|
|
5019
|
+
var _excluded$i = ["className", "value", "name", "placeholder", "maxLength", "rows", "resizable", "isDisabled", "icon", "onChange", "onBlur", "onFocus", "onKeyPress", "onKeyDown", "onCtrlEnter"];
|
|
4790
5020
|
var RESIZE_TYPES = {
|
|
4791
5021
|
NONE: "none",
|
|
4792
5022
|
BOTH: "both",
|
|
@@ -4830,7 +5060,7 @@ function Textarea(props) {
|
|
|
4830
5060
|
onKeyPress = props.onKeyPress,
|
|
4831
5061
|
_onKeyDown = props.onKeyDown,
|
|
4832
5062
|
onCtrlEnter = props.onCtrlEnter,
|
|
4833
|
-
otherProps = _objectWithoutPropertiesLoose(props, _excluded$
|
|
5063
|
+
otherProps = _objectWithoutPropertiesLoose(props, _excluded$i);
|
|
4834
5064
|
|
|
4835
5065
|
var style;
|
|
4836
5066
|
|
|
@@ -4871,8 +5101,8 @@ function Textarea(props) {
|
|
|
4871
5101
|
}));
|
|
4872
5102
|
}
|
|
4873
5103
|
|
|
4874
|
-
var css_248z$
|
|
4875
|
-
styleInject(css_248z$
|
|
5104
|
+
var css_248z$r = ".ql-editor {\n resize: vertical;\n min-height: 10rem;\n}\n\n.ql-snow.ql-toolbar {\n display: block;\n background: #f1f5f9;\n border-top-left-radius: 0.5em;\n border-top-right-radius: 0.5em;\n margin-top: 0.5em;\n}\n";
|
|
5105
|
+
styleInject(css_248z$r);
|
|
4876
5106
|
|
|
4877
5107
|
function TextEditor(_ref) {
|
|
4878
5108
|
var defaultValue = _ref.defaultValue,
|
|
@@ -4926,8 +5156,8 @@ TextEditor.propTypes = {
|
|
|
4926
5156
|
onValueChange: PropTypes.func.isRequired
|
|
4927
5157
|
};
|
|
4928
5158
|
|
|
4929
|
-
var css_248z$
|
|
4930
|
-
styleInject(css_248z$
|
|
5159
|
+
var css_248z$s = ".editor .rdw-editor {\n overflow-y: auto;\n}\n\n.editor .rdw-editor .rdw-link-modal {\n width: 20rem;\n height: 19rem;\n}\n\n.editor .rdw-editor .rdw-link-modal .rdw-link-modal-label,\n .editor .rdw-editor .rdw-link-modal .rdw-link-modal-target-option {\n font-weight: normal;\n}\n\n.editor .rdw-editor .rdw-link-modal .rdw-link-modal-input {\n margin-bottom: 1rem;\n font-size: 16px;\n font-weight: normal;\n line-height: 21px;\n color: #2d2d2d;\n height: 44px;\n border: 1px solid #cccccc;\n border-radius: 4px;\n outline: none;\n background-color: #ffffff;\n padding: 12px;\n caret-color: #0a78b2;\n}\n\n.editor .rdw-editor .rdw-link-modal .rdw-link-modal-buttonsection {\n display: flex;\n flex-direction: row-reverse;\n align-items: center;\n}\n\n.editor .rdw-editor .rdw-link-modal .rdw-link-modal-buttonsection .rdw-link-modal-btn {\n border-radius: 1.375rem;\n width: 6.5rem;\n height: 2.75rem;\n border: 1px solid #009fe3;\n background-color: transparent;\n color: #009fe3;\n}\n\n.editor .rdw-editor .rdw-link-modal .rdw-link-modal-buttonsection .rdw-link-modal-btn:first-child,\n .editor .rdw-editor .rdw-link-modal .rdw-link-modal-buttonsection .rdw-link-modal-btn:disabled {\n background: #009fe3;\n color: #ffffff;\n}\n\n.editor .rdw-editor .rdw-embedded-modal {\n width: 22rem;\n height: 15rem;\n}\n\n.editor .rdw-editor .rdw-embedded-modal .rdw-embedded-modal-link-input,\n .editor .rdw-editor .rdw-embedded-modal .rdw-embedded-modal-size-input {\n font-size: 16px;\n font-weight: normal;\n line-height: 21px;\n color: #2d2d2d;\n height: 44px;\n border: 1px solid #cccccc;\n border-radius: 4px;\n outline: none;\n background-color: #ffffff;\n padding: 12px;\n caret-color: #0a78b2;\n}\n\n.editor .rdw-editor .rdw-embedded-modal .rdw-embedded-modal-link-input {\n width: 100%;\n}\n\n.editor .rdw-editor .rdw-embedded-modal .rdw-embedded-modal-size-input {\n width: 90%;\n}\n\n.editor .rdw-editor .rdw-embedded-modal .rdw-embedded-modal-btn-section {\n display: flex;\n flex-direction: row;\n align-items: center;\n}\n\n.editor .rdw-editor .rdw-embedded-modal .rdw-embedded-modal-btn-section .rdw-embedded-modal-btn {\n border-radius: 1.375rem;\n width: 6.5rem;\n height: 2.75rem;\n border: 1px solid #009fe3;\n background-color: transparent;\n color: #009fe3;\n}\n\n.editor .rdw-editor .rdw-embedded-modal .rdw-embedded-modal-btn-section .rdw-embedded-modal-btn:first-child,\n .editor .rdw-editor .rdw-embedded-modal .rdw-embedded-modal-btn-section .rdw-embedded-modal-btn:disabled {\n background: #009fe3;\n color: #ffffff;\n}\n\n.editor .rdw-editor .rdw-editor-main {\n min-height: 14rem;\n overflow: hidden;\n}\n\n.editor .rdw-editor .rdw-editor-main .DraftEditor-root {\n margin: 0 12px;\n}\n";
|
|
5160
|
+
styleInject(css_248z$s);
|
|
4931
5161
|
|
|
4932
5162
|
var TextEditorV2 = function TextEditorV2(_ref) {
|
|
4933
5163
|
var defaultValue = _ref.defaultValue,
|
|
@@ -5006,7 +5236,7 @@ var Timeline = function Timeline(props) {
|
|
|
5006
5236
|
}, props.loadMoreButtonProps)));
|
|
5007
5237
|
};
|
|
5008
5238
|
|
|
5009
|
-
var _excluded$
|
|
5239
|
+
var _excluded$j = ["titleProps", "title", "titleAccessory", "contentProps", "content", "defaultContent", "className", "buttons"];
|
|
5010
5240
|
function ViewItem(_ref) {
|
|
5011
5241
|
var titleProps = _ref.titleProps,
|
|
5012
5242
|
title = _ref.title,
|
|
@@ -5017,7 +5247,7 @@ function ViewItem(_ref) {
|
|
|
5017
5247
|
defaultContent = _ref$defaultContent === void 0 ? "-" : _ref$defaultContent,
|
|
5018
5248
|
className = _ref.className,
|
|
5019
5249
|
buttons = _ref.buttons,
|
|
5020
|
-
restProps = _objectWithoutPropertiesLoose(_ref, _excluded$
|
|
5250
|
+
restProps = _objectWithoutPropertiesLoose(_ref, _excluded$j);
|
|
5021
5251
|
|
|
5022
5252
|
var titlePropsMerged = titleProps != null ? titleProps : {
|
|
5023
5253
|
text: title != null ? title : defaultContent
|
|
@@ -5135,7 +5365,7 @@ var isRequired = function isRequired(options) {
|
|
|
5135
5365
|
return !!(options && "required" in options);
|
|
5136
5366
|
};
|
|
5137
5367
|
|
|
5138
|
-
var _excluded$
|
|
5368
|
+
var _excluded$k = ["name", "fieldErrors", "fieldRequired", "label", "info", "decoratorClassname"];
|
|
5139
5369
|
/**
|
|
5140
5370
|
* Input field that can be used in any react-hook-form context.
|
|
5141
5371
|
*/
|
|
@@ -5147,7 +5377,7 @@ var FormInputInner = /*#__PURE__*/React__default.forwardRef(function (_ref, ref)
|
|
|
5147
5377
|
label = _ref.label,
|
|
5148
5378
|
info = _ref.info,
|
|
5149
5379
|
decoratorClassname = _ref.decoratorClassname,
|
|
5150
|
-
fieldProps = _objectWithoutPropertiesLoose(_ref, _excluded$
|
|
5380
|
+
fieldProps = _objectWithoutPropertiesLoose(_ref, _excluded$k);
|
|
5151
5381
|
|
|
5152
5382
|
return /*#__PURE__*/React__default.createElement(FormFieldDecorator, {
|
|
5153
5383
|
name: name,
|
|
@@ -5168,93 +5398,7 @@ var FormInput = /*#__PURE__*/React__default.forwardRef(function (props, ref) {
|
|
|
5168
5398
|
}));
|
|
5169
5399
|
});
|
|
5170
5400
|
|
|
5171
|
-
var
|
|
5172
|
-
styleInject(css_248z$s);
|
|
5173
|
-
|
|
5174
|
-
var _excluded$i = ["text", "info", "isError", "innerRef", "className"];
|
|
5175
|
-
|
|
5176
|
-
function RadioInner(_ref) {
|
|
5177
|
-
var text = _ref.text,
|
|
5178
|
-
info = _ref.info,
|
|
5179
|
-
isError = _ref.isError,
|
|
5180
|
-
innerRef = _ref.innerRef,
|
|
5181
|
-
className = _ref.className,
|
|
5182
|
-
otherProps = _objectWithoutPropertiesLoose(_ref, _excluded$i);
|
|
5183
|
-
|
|
5184
|
-
var value = otherProps.value,
|
|
5185
|
-
disabled = otherProps.disabled;
|
|
5186
|
-
var nameHtmlFor = "field-" + value;
|
|
5187
|
-
return /*#__PURE__*/React__default.createElement("label", {
|
|
5188
|
-
className: "radio-form-field-label leading-tight",
|
|
5189
|
-
htmlFor: nameHtmlFor,
|
|
5190
|
-
"data-has-error": isError,
|
|
5191
|
-
"data-test-id": nameHtmlFor
|
|
5192
|
-
}, /*#__PURE__*/React__default.createElement("div", {
|
|
5193
|
-
className: "flex flex-row items-center "
|
|
5194
|
-
}, /*#__PURE__*/React__default.createElement("input", Object.assign({}, otherProps, {
|
|
5195
|
-
className: classNames("appearance-none", className),
|
|
5196
|
-
ref: innerRef,
|
|
5197
|
-
type: "radio",
|
|
5198
|
-
id: nameHtmlFor,
|
|
5199
|
-
disabled: disabled
|
|
5200
|
-
})), /*#__PURE__*/React__default.createElement("span", {
|
|
5201
|
-
className: classNames("flex flex-col items-center justify-center w-4 h-4 transition-colors duration-300 ease-in-out border radio-circle rounded-xl border-slate-300")
|
|
5202
|
-
}, /*#__PURE__*/React__default.createElement("span", {
|
|
5203
|
-
className: "block transition-colors duration-300 ease-in-out radio-inner-circle w-1.5 h-1.5 rounded-xl"
|
|
5204
|
-
})), text && /*#__PURE__*/React__default.createElement("div", {
|
|
5205
|
-
className: "ml-2"
|
|
5206
|
-
}, /*#__PURE__*/React__default.createElement(Text, {
|
|
5207
|
-
inline: true,
|
|
5208
|
-
text: text,
|
|
5209
|
-
type: "base",
|
|
5210
|
-
color: disabled ? "slate-500" : undefined
|
|
5211
|
-
}))), info && /*#__PURE__*/React__default.createElement(Text, {
|
|
5212
|
-
inline: true,
|
|
5213
|
-
className: "ml-6",
|
|
5214
|
-
text: info,
|
|
5215
|
-
type: "sm",
|
|
5216
|
-
color: disabled ? "slate-200" : "slate-500"
|
|
5217
|
-
}));
|
|
5218
|
-
}
|
|
5219
|
-
/**
|
|
5220
|
-
* TODO: The CSS styling is all messed up, including isError
|
|
5221
|
-
* Warning: don't use this prop before this is resolved
|
|
5222
|
-
* Issue to track: https://github.com/Luscii/web-ui/issues/57
|
|
5223
|
-
* TODO: remove this comment once this is resolved
|
|
5224
|
-
*/
|
|
5225
|
-
|
|
5226
|
-
|
|
5227
|
-
var RadioV2 = /*#__PURE__*/React__default.forwardRef(function (props, ref) {
|
|
5228
|
-
return /*#__PURE__*/React__default.createElement(RadioInner, Object.assign({}, props, {
|
|
5229
|
-
innerRef: ref
|
|
5230
|
-
}));
|
|
5231
|
-
});
|
|
5232
|
-
|
|
5233
|
-
var _excluded$j = ["innerRef", "options"];
|
|
5234
|
-
|
|
5235
|
-
function RadioGroupInner(_ref) {
|
|
5236
|
-
var innerRef = _ref.innerRef,
|
|
5237
|
-
options = _ref.options,
|
|
5238
|
-
registerProps = _objectWithoutPropertiesLoose(_ref, _excluded$j);
|
|
5239
|
-
|
|
5240
|
-
return /*#__PURE__*/React__default.createElement("div", {
|
|
5241
|
-
className: classNames("flex flex-col space-y-2")
|
|
5242
|
-
}, options.map(function (option) {
|
|
5243
|
-
return /*#__PURE__*/React__default.createElement(RadioV2, Object.assign({
|
|
5244
|
-
key: option.value
|
|
5245
|
-
}, option, registerProps, {
|
|
5246
|
-
ref: innerRef
|
|
5247
|
-
}));
|
|
5248
|
-
}));
|
|
5249
|
-
}
|
|
5250
|
-
|
|
5251
|
-
var RadioGroupV2 = /*#__PURE__*/React__default.forwardRef(function (props, ref) {
|
|
5252
|
-
return /*#__PURE__*/React__default.createElement(RadioGroupInner, Object.assign({}, props, {
|
|
5253
|
-
innerRef: ref
|
|
5254
|
-
}));
|
|
5255
|
-
});
|
|
5256
|
-
|
|
5257
|
-
var _excluded$k = ["innerRef", "name", "fieldErrors", "fieldRequired", "label", "info", "decoratorClassname"];
|
|
5401
|
+
var _excluded$l = ["innerRef", "name", "fieldErrors", "fieldRequired", "label", "info", "decoratorClassname"];
|
|
5258
5402
|
/**
|
|
5259
5403
|
* Input field that can be used in any react-hook-form context.
|
|
5260
5404
|
*/
|
|
@@ -5267,7 +5411,7 @@ function FormRadioGroupInner(_ref) {
|
|
|
5267
5411
|
label = _ref.label,
|
|
5268
5412
|
info = _ref.info,
|
|
5269
5413
|
decoratorClassname = _ref.decoratorClassname,
|
|
5270
|
-
fieldProps = _objectWithoutPropertiesLoose(_ref, _excluded$
|
|
5414
|
+
fieldProps = _objectWithoutPropertiesLoose(_ref, _excluded$l);
|
|
5271
5415
|
|
|
5272
5416
|
return /*#__PURE__*/React__default.createElement(FormFieldDecorator, {
|
|
5273
5417
|
name: name,
|
|
@@ -5289,150 +5433,6 @@ var FormRadioGroup = /*#__PURE__*/React__default.forwardRef(function (props, ref
|
|
|
5289
5433
|
}));
|
|
5290
5434
|
});
|
|
5291
5435
|
|
|
5292
|
-
var _excluded$l = ["isError", "styles", "options", "onChange", "value", "isMulti", "className"];
|
|
5293
|
-
|
|
5294
|
-
function generateCustomStyles$1(hasError, isIE11) {
|
|
5295
|
-
return {
|
|
5296
|
-
option: function option(baseStyles, state) {
|
|
5297
|
-
return _extends({}, baseStyles, {
|
|
5298
|
-
fontWeight: state.isSelected ? "bold" : "normal",
|
|
5299
|
-
fontSize: "14px",
|
|
5300
|
-
backgroundColor: "none",
|
|
5301
|
-
color: "inherit",
|
|
5302
|
-
position: "relative",
|
|
5303
|
-
padding: "0.75rem",
|
|
5304
|
-
opacity: state.isDisabled ? "0.5" : 1,
|
|
5305
|
-
"&:after": {
|
|
5306
|
-
visibility: state.isSelected ? "visible" : "hidden"
|
|
5307
|
-
},
|
|
5308
|
-
transition: "background-color 0.3s ease-in-out",
|
|
5309
|
-
"&:hover": {
|
|
5310
|
-
// tailwind blue-50
|
|
5311
|
-
backgroundColor: state.isSelected ? "transparent" : "#F2FAFD"
|
|
5312
|
-
},
|
|
5313
|
-
pointerEvents: state.isDisabled ? "none" : "auto"
|
|
5314
|
-
});
|
|
5315
|
-
},
|
|
5316
|
-
container: function container(baseStyles) {
|
|
5317
|
-
return _extends({}, baseStyles, {
|
|
5318
|
-
flexGrow: isIE11 ? 0.5 : "initial"
|
|
5319
|
-
});
|
|
5320
|
-
},
|
|
5321
|
-
control: function control(baseStyles, state) {
|
|
5322
|
-
var defaultBorderColor = state.isFocused ? "#045baa" : "#D1D5DB";
|
|
5323
|
-
var validatedBorderColor = hasError ? "#c53030" : defaultBorderColor;
|
|
5324
|
-
var defaultOutline = hasError ? "rgba(255, 98, 102, 0.3)" : "rgba(0, 159, 227, 0.3)";
|
|
5325
|
-
var validatedOutline = "4px solid " + (state.isFocused ? defaultOutline : "transparent");
|
|
5326
|
-
return _extends({}, baseStyles, {
|
|
5327
|
-
fontSize: "14px",
|
|
5328
|
-
transition: "border 0.3s ease-in-out",
|
|
5329
|
-
height: isIE11 ? "50px" : "2.75rem",
|
|
5330
|
-
// primary outline
|
|
5331
|
-
outline: validatedOutline,
|
|
5332
|
-
borderColor: validatedBorderColor,
|
|
5333
|
-
borderWidth: "1px !important",
|
|
5334
|
-
borderStyle: "solid",
|
|
5335
|
-
borderRadius: "4px",
|
|
5336
|
-
boxShadow: "0px 1px 2px rgba(0, 0, 0, 0.05)",
|
|
5337
|
-
"&:hover": {
|
|
5338
|
-
borderColor: "#9CA3AF",
|
|
5339
|
-
// selector for the chevron
|
|
5340
|
-
"> [class*=\"IndicatorsContainer\"]": {
|
|
5341
|
-
opacity: 1
|
|
5342
|
-
}
|
|
5343
|
-
}
|
|
5344
|
-
});
|
|
5345
|
-
},
|
|
5346
|
-
// The placeholder has the following css prop: grid-area: 1/1/2/3;
|
|
5347
|
-
// And grid-area doesn't work on IE11, so we need to style it slightly different.
|
|
5348
|
-
placeholder: function placeholder(baseStyles) {
|
|
5349
|
-
return _extends({}, baseStyles, {
|
|
5350
|
-
fontWeight: 100,
|
|
5351
|
-
color: "#6B7280",
|
|
5352
|
-
paddingTop: isIE11 ? "1.2rem" : undefined
|
|
5353
|
-
});
|
|
5354
|
-
},
|
|
5355
|
-
singleValue: function singleValue(baseStyles) {
|
|
5356
|
-
return _extends({}, baseStyles, {
|
|
5357
|
-
paddingTop: isIE11 ? "1.2rem" : undefined,
|
|
5358
|
-
fontSize: "14px"
|
|
5359
|
-
});
|
|
5360
|
-
},
|
|
5361
|
-
indicatorSeparator: function indicatorSeparator() {
|
|
5362
|
-
return {
|
|
5363
|
-
display: "none"
|
|
5364
|
-
};
|
|
5365
|
-
},
|
|
5366
|
-
menu: function menu(baseStyles) {
|
|
5367
|
-
return _extends({}, baseStyles, {
|
|
5368
|
-
zIndex: 20
|
|
5369
|
-
});
|
|
5370
|
-
}
|
|
5371
|
-
};
|
|
5372
|
-
}
|
|
5373
|
-
/**
|
|
5374
|
-
* A wrapper around react-select to style it according to our design specification.
|
|
5375
|
-
*
|
|
5376
|
-
* In addition, the value is taken out of the option, instead of returning the complete option.
|
|
5377
|
-
*
|
|
5378
|
-
* Care when using grouped options: the value of the options overspanning all groups need to be unique!
|
|
5379
|
-
* For instance, if you have an option with value "chocolate" in both the groups "flavor" and "dip", then you get unforeseen errors.
|
|
5380
|
-
* This is a problem within react-select itself, not our wrapper.
|
|
5381
|
-
*
|
|
5382
|
-
* Care when using defaultValue: this still requires the complete Option (instead of the value of the Option).
|
|
5383
|
-
* So far there wasn't a use-case for this.
|
|
5384
|
-
*/
|
|
5385
|
-
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
5386
|
-
|
|
5387
|
-
|
|
5388
|
-
var Select = /*#__PURE__*/React__default.forwardRef(function (_ref, innerRef) {
|
|
5389
|
-
var _ref$isError = _ref.isError,
|
|
5390
|
-
isError = _ref$isError === void 0 ? false : _ref$isError,
|
|
5391
|
-
styles = _ref.styles,
|
|
5392
|
-
options = _ref.options,
|
|
5393
|
-
onChange = _ref.onChange,
|
|
5394
|
-
value = _ref.value,
|
|
5395
|
-
isMulti = _ref.isMulti,
|
|
5396
|
-
className = _ref.className,
|
|
5397
|
-
otherProps = _objectWithoutPropertiesLoose(_ref, _excluded$l);
|
|
5398
|
-
|
|
5399
|
-
var isIE11 = "MSInputMethodContext" in window && "documentMode" in document;
|
|
5400
|
-
var customStyles = generateCustomStyles$1(isError, isIE11);
|
|
5401
|
-
var mergedStyles = mergeStyles(customStyles, styles); // the options can be either a list of options or a grouped list of options
|
|
5402
|
-
// this is a typechecker to verify it is the case.
|
|
5403
|
-
|
|
5404
|
-
var isOptionsGrouped = !options ? false : options.reduce(function (acc, o) {
|
|
5405
|
-
return acc || "options" in o && !("values" in o);
|
|
5406
|
-
}, false); // we subsequently flatmap to ensure it's always a list of options
|
|
5407
|
-
|
|
5408
|
-
var flatmappedOptions = !options ? [] : isOptionsGrouped ? options.flatMap(function (g) {
|
|
5409
|
-
return g.options;
|
|
5410
|
-
}) : options; // based on: https://stackoverflow.com/a/70022957
|
|
5411
|
-
|
|
5412
|
-
var onChangeWrapped = !onChange ? undefined : isMulti ? function (val, a) {
|
|
5413
|
-
return onChange(val.map(function (v) {
|
|
5414
|
-
return v.value;
|
|
5415
|
-
}), a);
|
|
5416
|
-
} : function (val, a) {
|
|
5417
|
-
return onChange(val == null ? void 0 : val.value, a);
|
|
5418
|
-
}; // TODO: how can we report the error if a value was given that is not within the options?
|
|
5419
|
-
|
|
5420
|
-
var valueWrapped = !value || !options ? value : isMulti ? flatmappedOptions.filter(function (o) {
|
|
5421
|
-
return value.includes(o.value);
|
|
5422
|
-
}) : flatmappedOptions.find(function (o) {
|
|
5423
|
-
return o.value === value;
|
|
5424
|
-
});
|
|
5425
|
-
return /*#__PURE__*/React__default.createElement(ReactSelect, Object.assign({}, otherProps, {
|
|
5426
|
-
ref: innerRef,
|
|
5427
|
-
styles: mergedStyles,
|
|
5428
|
-
options: options,
|
|
5429
|
-
onChange: onChangeWrapped,
|
|
5430
|
-
value: valueWrapped,
|
|
5431
|
-
isMulti: isMulti,
|
|
5432
|
-
className: classNames("customized-select", className)
|
|
5433
|
-
}));
|
|
5434
|
-
});
|
|
5435
|
-
|
|
5436
5436
|
var _excluded$m = ["control", "name", "rules", "fieldErrors", "fieldRequired", "label", "info", "decoratorClassname"];
|
|
5437
5437
|
|
|
5438
5438
|
var FormSelect = /*#__PURE__*/React__default.forwardRef(function (_ref, innerRef) {
|
|
@@ -5469,74 +5469,45 @@ var FormSelect = /*#__PURE__*/React__default.forwardRef(function (_ref, innerRef
|
|
|
5469
5469
|
|
|
5470
5470
|
var _excluded$n = ["type", "name", "options", "fieldProps"];
|
|
5471
5471
|
/**
|
|
5472
|
-
* Create a straight forward Form.
|
|
5472
|
+
* Create a straight forward Form, which takes away the 'overhead' of react-hook-form.
|
|
5473
5473
|
*
|
|
5474
|
-
*
|
|
5475
|
-
*
|
|
5474
|
+
* You will probably don't want to use this component for now, given that the button is hardcoded.
|
|
5475
|
+
* This is an example for the Form for now, though it could be improved to enforce further unification.
|
|
5476
|
+
*
|
|
5477
|
+
* TODO: make the buttons configurable.
|
|
5476
5478
|
*/
|
|
5477
5479
|
|
|
5478
|
-
function
|
|
5480
|
+
function GenericForm(_ref) {
|
|
5479
5481
|
var fields = _ref.fields,
|
|
5480
5482
|
onValid = _ref.onValid,
|
|
5481
5483
|
onError = _ref.onError,
|
|
5482
5484
|
defaultValues = _ref.defaultValues;
|
|
5483
|
-
|
|
5484
|
-
var _useForm = useForm({
|
|
5485
|
+
var useFormReturn = useForm({
|
|
5485
5486
|
criteriaMode: "all",
|
|
5486
5487
|
defaultValues: defaultValues
|
|
5487
|
-
})
|
|
5488
|
-
|
|
5489
|
-
|
|
5490
|
-
|
|
5491
|
-
|
|
5492
|
-
|
|
5493
|
-
|
|
5494
|
-
|
|
5495
|
-
|
|
5496
|
-
|
|
5497
|
-
|
|
5498
|
-
|
|
5499
|
-
|
|
5500
|
-
|
|
5501
|
-
|
|
5502
|
-
|
|
5503
|
-
|
|
5504
|
-
|
|
5505
|
-
|
|
5506
|
-
return /*#__PURE__*/React__default.createElement(FormInput, Object.assign({
|
|
5507
|
-
key: name
|
|
5508
|
-
}, decoratorProps, {
|
|
5509
|
-
fieldRequired: isRequired(options),
|
|
5510
|
-
fieldErrors: errors
|
|
5511
|
-
}, fieldProps, register(name, options), {
|
|
5512
|
-
type: type || "text"
|
|
5513
|
-
}));
|
|
5514
|
-
|
|
5515
|
-
case "select":
|
|
5516
|
-
return /*#__PURE__*/React__default.createElement(FormSelect, Object.assign({
|
|
5517
|
-
key: name
|
|
5518
|
-
}, decoratorProps, {
|
|
5519
|
-
fieldRequired: isRequired(options),
|
|
5520
|
-
fieldErrors: errors
|
|
5521
|
-
}, fieldProps, {
|
|
5522
|
-
control: control,
|
|
5523
|
-
rules: options,
|
|
5524
|
-
name: name
|
|
5525
|
-
}));
|
|
5526
|
-
|
|
5527
|
-
case "radioGroup":
|
|
5528
|
-
return /*#__PURE__*/React__default.createElement(FormRadioGroup, Object.assign({
|
|
5529
|
-
key: name
|
|
5530
|
-
}, decoratorProps, {
|
|
5531
|
-
fieldRequired: isRequired(options),
|
|
5532
|
-
fieldErrors: errors
|
|
5533
|
-
}, fieldProps, register(name, options)));
|
|
5534
|
-
|
|
5535
|
-
default:
|
|
5536
|
-
return undefined;
|
|
5537
|
-
}
|
|
5538
|
-
};
|
|
5488
|
+
});
|
|
5489
|
+
var handleSubmit = useFormReturn.handleSubmit;
|
|
5490
|
+
return /*#__PURE__*/React__default.createElement("div", {
|
|
5491
|
+
className: "space-y-4"
|
|
5492
|
+
}, /*#__PURE__*/React__default.createElement(Form, {
|
|
5493
|
+
fields: fields,
|
|
5494
|
+
useFormReturn: useFormReturn
|
|
5495
|
+
}), /*#__PURE__*/React__default.createElement(PrimaryButton, {
|
|
5496
|
+
onClick: handleSubmit(onValid, onError),
|
|
5497
|
+
text: "submit"
|
|
5498
|
+
}));
|
|
5499
|
+
}
|
|
5500
|
+
/**
|
|
5501
|
+
* Creates a Form based on the fields input.
|
|
5502
|
+
*
|
|
5503
|
+
* Expects the results of the useForm hook to be injected into the useFormReturn parameter.
|
|
5504
|
+
*
|
|
5505
|
+
* This allows you to use and modify the useFormReturn before injecting it here.
|
|
5506
|
+
*/
|
|
5539
5507
|
|
|
5508
|
+
function Form(_ref2) {
|
|
5509
|
+
var fields = _ref2.fields,
|
|
5510
|
+
useFormReturn = _ref2.useFormReturn;
|
|
5540
5511
|
return /*#__PURE__*/React__default.createElement("div", {
|
|
5541
5512
|
className: "space-y-4"
|
|
5542
5513
|
}, fields.map(function (props) {
|
|
@@ -5544,18 +5515,68 @@ function Form(_ref) {
|
|
|
5544
5515
|
var rowFields = props.fields,
|
|
5545
5516
|
key = props.key;
|
|
5546
5517
|
return /*#__PURE__*/React__default.createElement("div", {
|
|
5547
|
-
className: "flex flex-row",
|
|
5518
|
+
className: "flex flex-row space-x-4",
|
|
5548
5519
|
key: key
|
|
5549
|
-
}, rowFields.map(
|
|
5520
|
+
}, rowFields.map(function (field) {
|
|
5521
|
+
return FormFieldMapper(field, useFormReturn);
|
|
5522
|
+
}));
|
|
5550
5523
|
}
|
|
5551
5524
|
|
|
5552
|
-
return
|
|
5553
|
-
}), /*#__PURE__*/React__default.createElement(PrimaryButton, {
|
|
5554
|
-
onClick: handleSubmit(onValid, onError),
|
|
5555
|
-
text: "submit"
|
|
5525
|
+
return FormFieldMapper(props, useFormReturn);
|
|
5556
5526
|
}));
|
|
5557
5527
|
}
|
|
5558
5528
|
|
|
5529
|
+
function FormFieldMapper(formFieldProps, useFormReturn) {
|
|
5530
|
+
var type = formFieldProps.type,
|
|
5531
|
+
name = formFieldProps.name,
|
|
5532
|
+
options = formFieldProps.options,
|
|
5533
|
+
_formFieldProps$field = formFieldProps.fieldProps,
|
|
5534
|
+
fieldProps = _formFieldProps$field === void 0 ? {} : _formFieldProps$field,
|
|
5535
|
+
decoratorProps = _objectWithoutPropertiesLoose(formFieldProps, _excluded$n);
|
|
5536
|
+
|
|
5537
|
+
var register = useFormReturn.register,
|
|
5538
|
+
control = useFormReturn.control,
|
|
5539
|
+
errors = useFormReturn.formState.errors;
|
|
5540
|
+
|
|
5541
|
+
switch (type) {
|
|
5542
|
+
case "text":
|
|
5543
|
+
case "number":
|
|
5544
|
+
case "email":
|
|
5545
|
+
case "password":
|
|
5546
|
+
return /*#__PURE__*/React__default.createElement(FormInput, Object.assign({
|
|
5547
|
+
key: name
|
|
5548
|
+
}, decoratorProps, {
|
|
5549
|
+
fieldRequired: isRequired(options),
|
|
5550
|
+
fieldErrors: errors
|
|
5551
|
+
}, fieldProps, register(name, options), {
|
|
5552
|
+
type: type || "text"
|
|
5553
|
+
}));
|
|
5554
|
+
|
|
5555
|
+
case "select":
|
|
5556
|
+
return /*#__PURE__*/React__default.createElement(FormSelect, Object.assign({
|
|
5557
|
+
key: name
|
|
5558
|
+
}, decoratorProps, {
|
|
5559
|
+
fieldRequired: isRequired(options),
|
|
5560
|
+
fieldErrors: errors
|
|
5561
|
+
}, fieldProps, {
|
|
5562
|
+
control: control,
|
|
5563
|
+
rules: options,
|
|
5564
|
+
name: name
|
|
5565
|
+
}));
|
|
5566
|
+
|
|
5567
|
+
case "radioGroup":
|
|
5568
|
+
return /*#__PURE__*/React__default.createElement(FormRadioGroup, Object.assign({
|
|
5569
|
+
key: name
|
|
5570
|
+
}, decoratorProps, {
|
|
5571
|
+
fieldRequired: isRequired(options),
|
|
5572
|
+
fieldErrors: errors
|
|
5573
|
+
}, fieldProps, register(name, options)));
|
|
5574
|
+
|
|
5575
|
+
default:
|
|
5576
|
+
return /*#__PURE__*/React__default.createElement(React__default.Fragment, null);
|
|
5577
|
+
}
|
|
5578
|
+
}
|
|
5579
|
+
|
|
5559
5580
|
var AlertsIcon = function AlertsIcon(props) {
|
|
5560
5581
|
return /*#__PURE__*/React__default.createElement("svg", {
|
|
5561
5582
|
className: props.className,
|
|
@@ -6309,5 +6330,5 @@ var SearchCancelIcon = function SearchCancelIcon(props) {
|
|
|
6309
6330
|
}));
|
|
6310
6331
|
};
|
|
6311
6332
|
|
|
6312
|
-
export { AddIcon, AlertsIcon, Avatar, Badge, BellIcon, Breadcrumbs, CRUDPage, Carousel, CenteredHero, ChartIcon, ChatBoxIcon, CheckIcon, Checkbox, CheckboxList, ChevronDoubleIcon, ConfirmationDialog, CrossIcon, Datepicker as DatePicker, DeleteIcon, DownArrowIcon, DragIcon, Dropdown, EditIcon, EmptyListMessage, EmptyStateDashboardIcon, ErrorBlock, ExclamationMarkIcon, EyeIcon, Form, GearIcon, GroupIcon, HamburgerIcon, HeartIcon, INPUT_TYPES, InfoBlock, InfoField, Input, LeftArrowIcon, LightBulbIcon, Line, List, LoadingIndicator, LockIcon, Menu, MessagesIcon, MultiSelect, NavLayout, NavMenu, NotesIcon, NotificationBanner, Page, PageHeader, PaginationMenu, PinIcon, PreviewPhone, PrimaryButton, PrintIcon, Radio, RadioGroup, RightArrowIcon, SearchCancelIcon, SearchIcon, SearchInput, SecondaryButton, Section, SectionItem, SectionItemWithContent, SettingsMenuButton, SmallCircleIcon, SmallDiamondIcon, SmallSquareIcon, SpaceRocketIcon, Spinner, StarIcon, Steps, Switcher, TOASTER_TYPE_OPTIONS, TabLinks, Tabbar, Table, Tag, TagGroup, TertiaryButton, Text, Textarea as TextArea, TextEditor, TextEditorV2, TextLink, Timeline, Title, Toaster, ViewItem, toast };
|
|
6333
|
+
export { AddIcon, AlertsIcon, Avatar, Badge, BellIcon, Breadcrumbs, CRUDPage, Carousel, CenteredHero, ChartIcon, ChatBoxIcon, CheckIcon, Checkbox, CheckboxList, ChevronDoubleIcon, ConfirmationDialog, CrossIcon, Datepicker as DatePicker, DeleteIcon, DownArrowIcon, DragIcon, Dropdown, EditIcon, EmptyListMessage, EmptyStateDashboardIcon, ErrorBlock, ExclamationMarkIcon, EyeIcon, Form, GearIcon, GenericForm, GroupIcon, HamburgerIcon, HeartIcon, INPUT_TYPES, InfoBlock, InfoField, Input, LeftArrowIcon, LightBulbIcon, Line, List, LoadingIndicator, LockIcon, Menu, MessagesIcon, MultiSelect, NavLayout, NavMenu, NotesIcon, NotificationBanner, Page, PageHeader, PaginationMenu, PinIcon, PreviewPhone, PrimaryButton, PrintIcon, Radio, RadioGroup, RadioGroupV2, RadioV2, RightArrowIcon, SearchCancelIcon, SearchIcon, SearchInput, SecondaryButton, Section, SectionItem, SectionItemWithContent, Select, SettingsMenuButton, SmallCircleIcon, SmallDiamondIcon, SmallSquareIcon, SpaceRocketIcon, Spinner, StarIcon, Steps, Switcher, TOASTER_TYPE_OPTIONS, TabLinks, Tabbar, Table, Tag, TagGroup, TertiaryButton, Text, Textarea as TextArea, TextEditor, TextEditorV2, TextLink, Timeline, Title, Toaster, ViewItem, toast };
|
|
6313
6334
|
//# sourceMappingURL=web-ui.esm.js.map
|