@bigbinary/neeto-fields-frontend 1.3.24 → 1.3.26

package/dist/index.js

@@ -8,7 +8,7 @@ import { t } from 'i18next';
 import * as yup from 'yup';
 import { Select, Button, ActionBlock as ActionBlock$1, Input as Input$1, Switch, Form } from '@bigbinary/neetoui/formik';
 import { joinHyphenCase, buildUrl, getQueryParams, dateFormat } from '@bigbinary/neeto-commons-frontend/utils';
-import { Check, Delete, Info, Reorder } from '@bigbinary/neeto-icons';
+import { Check, Delete, Reorder } from '@bigbinary/neeto-icons';
 import { useTranslation, Trans } from 'react-i18next';
 import { DEFAULT_PAGE_INDEX, DEFAULT_PAGE_SIZE, PLURAL } from '@bigbinary/neeto-commons-frontend/constants';
 import Container from '@bigbinary/neeto-molecules/Container';
@@ -22,6 +22,7 @@ import MenuBar from '@bigbinary/neeto-molecules/MenuBar';
 import MoreDropdown from '@bigbinary/neeto-molecules/MoreDropdown';
 import TableWrapper from '@bigbinary/neeto-molecules/TableWrapper';
 import NeetoUIHeader from '@bigbinary/neeto-molecules/Header';
+import HelpPopover from '@bigbinary/neeto-molecules/HelpPopover';
 import { unstable_batchedUpdates, createPortal } from 'react-dom';
 import NeetoUISubHeader from '@bigbinary/neeto-molecules/SubHeader';
 import classnames from 'classnames';
@@ -788,9 +789,9 @@ var getValueFromBool = function getValueFromBool(value) {
   return value === true ? t("neetoFields.common.yes") : 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,
@@ -806,7 +807,7 @@ var useFormikFields = function useFormikFields(_ref) {
     isInline = _ref$isInline === void 0 ? false : _ref$isInline,
     _ref$onBlur = _ref.onBlur,
     handleBlur = _ref$onBlur === void 0 ? noop$1 : _ref$onBlur,
-    props = _objectWithoutProperties(_ref, _excluded$6);
+    props = _objectWithoutProperties(_ref, _excluded$7);
   var formikContext = useFormikContext();
   var submitForm = formikContext.submitForm,
     dirty = formikContext.dirty,
@@ -898,7 +899,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 && capitalize(name),
@@ -928,28 +929,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.createElement(TimePicker, _extends({}, fieldProps, {
+    return /*#__PURE__*/React.createElement(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.createElement(DatePicker, _extends({}, fieldProps, {
+    return /*#__PURE__*/React.createElement(DatePicker, _extends({}, _objectSpread$g(_objectSpread$g({}, fieldProps), {}, {
+      onOpenChange: onOpenChange
+    }), {
       onChange: handleChange
     }));
   }
   return /*#__PURE__*/React.createElement(DatePicker, _extends({
     showTime: true,
     timeFormat: "h:mm A"
-  }, fieldProps, {
+  }, _objectSpread$g(_objectSpread$g({}, fieldProps), {}, {
+    onOpenChange: onOpenChange
+  }), {
     onChange: handleChange
   }));
 };
@@ -976,8 +992,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.createElement(Input, _extends({}, fieldProps, {
+  var isNotInline = !isInline;
+  var showSubmitButton = isNotInline && individualSubmit && dirty;
+  return /*#__PURE__*/React.createElement(Input, _extends({}, fieldProps, isNotInline && {
+    onBlur: function onBlur() {
+      return dirty && handleSubmit();
+    }
+  }, {
     type: "number",
     suffix: showSubmitButton && /*#__PURE__*/React.createElement(Button, {
       "data-cy": joinHyphenCase(fieldProps.label, "check-button"),
@@ -1063,8 +1084,13 @@ var Text = function Text(props) {
     dirty = _useFormikFields.dirty;
   var individualSubmit = props.individualSubmit,
     isInline = props.isInline;
-  var showSubmitButton = !isInline && individualSubmit && dirty;
-  return /*#__PURE__*/React.createElement(Input, _extends({}, fieldProps, {
+  var isNotInline = !isInline;
+  var showSubmitButton = isNotInline && individualSubmit && dirty;
+  return /*#__PURE__*/React.createElement(Input, _extends({}, fieldProps, isNotInline && {
+    onBlur: function onBlur() {
+      return dirty && handleSubmit();
+    }
+  }, {
     suffix: showSubmitButton && /*#__PURE__*/React.createElement(Button, {
       "data-cy": joinHyphenCase(fieldProps.label, "check-button"),
       icon: Check,
@@ -1250,7 +1276,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; }
@@ -2458,7 +2483,7 @@ var buildDefaultColumns = function buildDefaultColumns(_ref2) {
     key: "name",
     dataIndex: "name",
     title: t("neetoFields.titles.fieldName"),
-    width: "300px",
+    width: 300,
     render: function render(name, field) {
       return /*#__PURE__*/React.createElement("div", {
         className: "flex items-center justify-between gap-x-3"
@@ -2486,12 +2511,12 @@ var buildDefaultColumns = function buildDefaultColumns(_ref2) {
     render: function render(kind) {
       return DISPLAY_KINDS[kind];
     },
-    width: "300px"
+    width: 180
   }, {
     key: "isRequired",
     dataIndex: "isRequired",
     title: t("neetoFields.titles.required"),
-    width: "300px",
+    width: 140,
     render: function render(boolVal) {
       return boolVal ? t("neetoFields.common.yes") : t("neetoFields.common.no");
     }
@@ -2971,20 +2996,6 @@ var FieldsTable = function FieldsTable(_ref) {
   }));
 };
 
-var TitleWithHelpLink = function TitleWithHelpLink(_ref) {
-  var title = _ref.title,
-    helpUrl = _ref.helpUrl;
-  return /*#__PURE__*/React.createElement("div", {
-    className: "flex items-center gap-x-1"
-  }, title, helpUrl && /*#__PURE__*/React.createElement("a", {
-    href: helpUrl,
-    rel: "noreferrer",
-    target: "_blank"
-  }, /*#__PURE__*/React.createElement(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,
@@ -3011,24 +3022,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 = 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.createElement(NeetoUIHeader, {
     breadcrumbs: breadcrumbs,
     actionBlock: /*#__PURE__*/React.createElement(ActionBlock, actionBlockProps),
     searchProps: searchInputProps,
     size: "small",
-    title: /*#__PURE__*/React.createElement(TitleWithHelpLink, {
-      title: title,
-      helpUrl: helpDocUrl
-    })
+    title: /*#__PURE__*/React.createElement("span", null, title, (helpDocUrl || helpDescription) && /*#__PURE__*/React.createElement(HelpPopover, _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,
@@ -7457,6 +7476,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,
@@ -7506,6 +7526,7 @@ var FieldsDashboard = function FieldsDashboard(_ref) {
     reorderable: reorderable,
     breadcrumbs: breadcrumbs,
     helpDocUrl: helpDocUrl,
+    helpDescription: helpDescription,
     searchInputProps: searchInputProps,
     setIsPaneOpen: setIsPaneOpen,
     setIsReorderPaneOpen: setIsReorderPaneOpen,
@@ -7522,6 +7543,7 @@ var FieldsDashboard = function FieldsDashboard(_ref) {
     className: "flex h-screen w-full flex-grow items-center justify-center"
   }, /*#__PURE__*/React.createElement(PageLoader, null)) : /*#__PURE__*/React.createElement(FieldsTable, {
     columnData: columnData,
+    helpDescription: helpDescription,
     helpDocUrl: helpDocUrl,
     pageProps: pageProps,
     setIsPaneOpen: setIsPaneOpen,