@bigbinary/neeto-fields-frontend 1.3.24 → 1.3.26

package/dist/index.cjs.js

@@ -26,6 +26,7 @@ var MenuBar = require('@bigbinary/neeto-molecules/MenuBar');
 var MoreDropdown = require('@bigbinary/neeto-molecules/MoreDropdown');
 var TableWrapper = require('@bigbinary/neeto-molecules/TableWrapper');
 var NeetoUIHeader = require('@bigbinary/neeto-molecules/Header');
+var HelpPopover = require('@bigbinary/neeto-molecules/HelpPopover');
 var reactDom = require('react-dom');
 var NeetoUISubHeader = require('@bigbinary/neeto-molecules/SubHeader');
 var classnames = require('classnames');
@@ -59,6 +60,7 @@ var MenuBar__default = /*#__PURE__*/_interopDefaultLegacy(MenuBar);
 var MoreDropdown__default = /*#__PURE__*/_interopDefaultLegacy(MoreDropdown);
 var TableWrapper__default = /*#__PURE__*/_interopDefaultLegacy(TableWrapper);
 var NeetoUIHeader__default = /*#__PURE__*/_interopDefaultLegacy(NeetoUIHeader);
+var HelpPopover__default = /*#__PURE__*/_interopDefaultLegacy(HelpPopover);
 var NeetoUISubHeader__default = /*#__PURE__*/_interopDefaultLegacy(NeetoUISubHeader);
 var classnames__default = /*#__PURE__*/_interopDefaultLegacy(classnames);
 
@@ -824,9 +826,9 @@ var getValueFromBool = function getValueFromBool(value) {
   return value === true ? i18next.t("neetoFields.common.yes") : i18next.t("neetoFields.common.no");
 };
 
-var _excluded$6 = ["name", "id", "kind", "data", "individualSubmit", "formRef", "formRefs", "disabled", "isRequiredColumnName", "isInline", "onBlur"];
-function ownKeys$g(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread$g(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$g(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$g(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var _excluded$7 = ["name", "id", "kind", "data", "individualSubmit", "formRef", "formRefs", "disabled", "isRequiredColumnName", "isInline", "onBlur"];
+function ownKeys$h(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread$h(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$h(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$h(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var useFormikFields = function useFormikFields(_ref) {
   var name = _ref.name,
     fieldId = _ref.id,
@@ -842,7 +844,7 @@ var useFormikFields = function useFormikFields(_ref) {
     isInline = _ref$isInline === void 0 ? false : _ref$isInline,
     _ref$onBlur = _ref.onBlur,
     handleBlur = _ref$onBlur === void 0 ? neetoCist.noop : _ref$onBlur,
-    props = _objectWithoutProperties(_ref, _excluded$6);
+    props = _objectWithoutProperties(_ref, _excluded$7);
   var formikContext = formik.useFormikContext();
   var submitForm = formikContext.submitForm,
     dirty = formikContext.dirty,
@@ -934,7 +936,7 @@ var useFormikFields = function useFormikFields(_ref) {
   return {
     dirty: dirty,
     handleSubmit: handleSubmit,
-    fieldProps: _objectSpread$g(_objectSpread$g({}, formikFieldProps), {}, {
+    fieldProps: _objectSpread$h(_objectSpread$h({}, formikFieldProps), {}, {
       error: individualSubmit ? meta.error : meta.touched && meta.error,
       value: getValueForField(formikFieldProps.value),
       label: !isInline && neetoCist.capitalize(name),
@@ -964,28 +966,43 @@ var Checkbox = function Checkbox(props) {
   }));
 };
 
+var _excluded$6 = ["onBlur"];
+function ownKeys$g(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread$g(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$g(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$g(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var DateOrTime = function DateOrTime(props) {
   var _useFormikFields = useFormikFields(props),
     handleSubmit = _useFormikFields.handleSubmit,
-    fieldProps = _useFormikFields.fieldProps;
+    _useFormikFields$fiel = _useFormikFields.fieldProps,
+    onBlur = _useFormikFields$fiel.onBlur,
+    fieldProps = _objectWithoutProperties(_useFormikFields$fiel, _excluded$6);
   var handleChange = function handleChange(dateTime) {
     return handleSubmit(dateTimeToString(dateTime));
   };
+  var onOpenChange = function onOpenChange(open) {
+    if (open) return;
+    onBlur === null || onBlur === void 0 || onBlur();
+  };
   if (props.kind === KINDS.time) {
-    return /*#__PURE__*/React__default["default"].createElement(neetoui.TimePicker, _extends({}, fieldProps, {
+    return /*#__PURE__*/React__default["default"].createElement(neetoui.TimePicker, _extends({}, _objectSpread$g(_objectSpread$g({}, fieldProps), {}, {
+      onOpenChange: onOpenChange
+    }), {
       use12Hours: true,
       format: "h:mm A",
       onChange: handleChange
     }));
   } else if (props.kind === KINDS.date) {
-    return /*#__PURE__*/React__default["default"].createElement(neetoui.DatePicker, _extends({}, fieldProps, {
+    return /*#__PURE__*/React__default["default"].createElement(neetoui.DatePicker, _extends({}, _objectSpread$g(_objectSpread$g({}, fieldProps), {}, {
+      onOpenChange: onOpenChange
+    }), {
       onChange: handleChange
     }));
   }
   return /*#__PURE__*/React__default["default"].createElement(neetoui.DatePicker, _extends({
     showTime: true,
     timeFormat: "h:mm A"
-  }, fieldProps, {
+  }, _objectSpread$g(_objectSpread$g({}, fieldProps), {}, {
+    onOpenChange: onOpenChange
+  }), {
     onChange: handleChange
   }));
 };
@@ -1012,8 +1029,13 @@ var Number$1 = function Number(props) {
     dirty = _useFormikFields.dirty;
   var individualSubmit = props.individualSubmit,
     isInline = props.isInline;
-  var showSubmitButton = !isInline && individualSubmit && dirty;
-  return /*#__PURE__*/React__default["default"].createElement(neetoui.Input, _extends({}, fieldProps, {
+  var isNotInline = !isInline;
+  var showSubmitButton = isNotInline && individualSubmit && dirty;
+  return /*#__PURE__*/React__default["default"].createElement(neetoui.Input, _extends({}, fieldProps, isNotInline && {
+    onBlur: function onBlur() {
+      return dirty && handleSubmit();
+    }
+  }, {
     type: "number",
     suffix: showSubmitButton && /*#__PURE__*/React__default["default"].createElement(formik$1.Button, {
       "data-cy": utils.joinHyphenCase(fieldProps.label, "check-button"),
@@ -1099,8 +1121,13 @@ var Text = function Text(props) {
     dirty = _useFormikFields.dirty;
   var individualSubmit = props.individualSubmit,
     isInline = props.isInline;
-  var showSubmitButton = !isInline && individualSubmit && dirty;
-  return /*#__PURE__*/React__default["default"].createElement(neetoui.Input, _extends({}, fieldProps, {
+  var isNotInline = !isInline;
+  var showSubmitButton = isNotInline && individualSubmit && dirty;
+  return /*#__PURE__*/React__default["default"].createElement(neetoui.Input, _extends({}, fieldProps, isNotInline && {
+    onBlur: function onBlur() {
+      return dirty && handleSubmit();
+    }
+  }, {
     suffix: showSubmitButton && /*#__PURE__*/React__default["default"].createElement(formik$1.Button, {
       "data-cy": utils.joinHyphenCase(fieldProps.label, "check-button"),
       icon: neetoIcons.Check,
@@ -1286,7 +1313,6 @@ var FIELD_URL = "".concat(NEETO_FIELDS_URL, "/fields/:fieldId");
 var DEPENDENCIES_URL = "".concat(NEETO_FIELDS_URL, "/fields/:fieldId/dependencies");
 var FIELDS_REORDER_URL = "".concat(FIELDS_URL, "/reorder");
 var CONFIGS_URL = "".concat(NEETO_FIELDS_URL, "/configs");
-var INFO_ICON_SIZE = 16;
 
 function ownKeys$d(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread$d(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$d(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$d(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
@@ -2494,7 +2520,7 @@ var buildDefaultColumns = function buildDefaultColumns(_ref2) {
     key: "name",
     dataIndex: "name",
     title: i18next.t("neetoFields.titles.fieldName"),
-    width: "300px",
+    width: 300,
     render: function render(name, field) {
       return /*#__PURE__*/React__default["default"].createElement("div", {
         className: "flex items-center justify-between gap-x-3"
@@ -2522,12 +2548,12 @@ var buildDefaultColumns = function buildDefaultColumns(_ref2) {
     render: function render(kind) {
       return DISPLAY_KINDS[kind];
     },
-    width: "300px"
+    width: 180
   }, {
     key: "isRequired",
     dataIndex: "isRequired",
     title: i18next.t("neetoFields.titles.required"),
-    width: "300px",
+    width: 140,
     render: function render(boolVal) {
       return boolVal ? i18next.t("neetoFields.common.yes") : i18next.t("neetoFields.common.no");
     }
@@ -3007,20 +3033,6 @@ var FieldsTable = function FieldsTable(_ref) {
   }));
 };
 
-var TitleWithHelpLink = function TitleWithHelpLink(_ref) {
-  var title = _ref.title,
-    helpUrl = _ref.helpUrl;
-  return /*#__PURE__*/React__default["default"].createElement("div", {
-    className: "flex items-center gap-x-1"
-  }, title, helpUrl && /*#__PURE__*/React__default["default"].createElement("a", {
-    href: helpUrl,
-    rel: "noreferrer",
-    target: "_blank"
-  }, /*#__PURE__*/React__default["default"].createElement(neetoIcons.Info, {
-    size: INFO_ICON_SIZE
-  })));
-};
-
 // eslint-disable-next-line @bigbinary/neeto/no-dumb-components-with-use-translation
 var ActionBlock = function ActionBlock(_ref) {
   var reorderable = _ref.reorderable,
@@ -3047,24 +3059,32 @@ var ActionBlock = function ActionBlock(_ref) {
   }));
 };
 
-var _excluded = ["searchInputProps", "breadcrumbs", "title", "helpDocUrl"];
-var Header = function Header(_ref) {
+var _excluded = ["searchInputProps", "breadcrumbs", "title", "helpDocUrl", "helpDescription"];
+var Header = reactUtils.withT(function (_ref) {
   var searchInputProps = _ref.searchInputProps,
     breadcrumbs = _ref.breadcrumbs,
     title = _ref.title,
     helpDocUrl = _ref.helpDocUrl,
+    helpDescription = _ref.helpDescription,
     actionBlockProps = _objectWithoutProperties(_ref, _excluded);
   return /*#__PURE__*/React__default["default"].createElement(NeetoUIHeader__default["default"], {
     breadcrumbs: breadcrumbs,
     actionBlock: /*#__PURE__*/React__default["default"].createElement(ActionBlock, actionBlockProps),
     searchProps: searchInputProps,
     size: "small",
-    title: /*#__PURE__*/React__default["default"].createElement(TitleWithHelpLink, {
-      title: title,
-      helpUrl: helpDocUrl
-    })
+    title: /*#__PURE__*/React__default["default"].createElement("span", null, title, (helpDocUrl || helpDescription) && /*#__PURE__*/React__default["default"].createElement(HelpPopover__default["default"], _extends({
+      className: "ml-2 self-center"
+    }, helpDocUrl && {
+      title: title
+    }, helpDescription && {
+      description: helpDescription
+    }, helpDocUrl && {
+      helpLinkProps: {
+        href: helpDocUrl
+      }
+    })))
   });
-};
+});
 
 var Menubar = function Menubar(_ref) {
   var menuBarItems = _ref.menuBarItems,
@@ -7493,6 +7513,7 @@ var FieldsDashboard = function FieldsDashboard(_ref) {
     _ref$fieldStatesTaxon = _ref.fieldStatesTaxonomy,
     fieldStatesTaxonomy = _ref$fieldStatesTaxon === void 0 ? DEFAULT_FIELD_STATE_TAXONOMY : _ref$fieldStatesTaxon,
     helpDocUrl = _ref.helpDocUrl,
+    helpDescription = _ref.helpDescription,
     _ref$nameAliases = _ref.nameAliases,
     nameAliases = _ref$nameAliases === void 0 ? {} : _ref$nameAliases,
     headerTitle = _ref.headerTitle,
@@ -7542,6 +7563,7 @@ var FieldsDashboard = function FieldsDashboard(_ref) {
     reorderable: reorderable,
     breadcrumbs: breadcrumbs,
     helpDocUrl: helpDocUrl,
+    helpDescription: helpDescription,
     searchInputProps: searchInputProps,
     setIsPaneOpen: setIsPaneOpen,
     setIsReorderPaneOpen: setIsReorderPaneOpen,
@@ -7558,6 +7580,7 @@ var FieldsDashboard = function FieldsDashboard(_ref) {
     className: "flex h-screen w-full flex-grow items-center justify-center"
   }, /*#__PURE__*/React__default["default"].createElement(PageLoader__default["default"], null)) : /*#__PURE__*/React__default["default"].createElement(FieldsTable, {
     columnData: columnData,
+    helpDescription: helpDescription,
     helpDocUrl: helpDocUrl,
     pageProps: pageProps,
     setIsPaneOpen: setIsPaneOpen,