@bigbinary/neeto-form-frontend 2.0.0 → 2.0.1

package/dist/index.cjs.js

@@ -3,6 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var React$2 = require('react');
+var classnames = require('classnames');
 var formik = require('formik');
 var neetoCist = require('@bigbinary/neeto-cist');
 var utils = require('@bigbinary/neeto-commons-frontend/utils');
@@ -23,7 +24,6 @@ var MoreDropdown = require('@bigbinary/neeto-molecules/MoreDropdown');
 var Typography = require('@bigbinary/neetoui/Typography');
 var Dropdown = require('@bigbinary/neetoui/Dropdown');
 var Tooltip = require('@bigbinary/neetoui/Tooltip');
-var classnames = require('classnames');
 var Pane = require('@bigbinary/neetoui/Pane');
 var Form$2 = require('@bigbinary/neetoui/formik/Form');
 var Select = require('@bigbinary/neetoui/formik/Select');
@@ -77,6 +77,7 @@ function _interopNamespace(e) {
 
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React$2);
 var React__namespace = /*#__PURE__*/_interopNamespace(React$2);
+var classnames__default = /*#__PURE__*/_interopDefaultLegacy(classnames);
 var PageLoader__default = /*#__PURE__*/_interopDefaultLegacy(PageLoader);
 var i18next__default = /*#__PURE__*/_interopDefaultLegacy(i18next);
 var axios__default = /*#__PURE__*/_interopDefaultLegacy(axios);
@@ -87,7 +88,6 @@ var MoreDropdown__default = /*#__PURE__*/_interopDefaultLegacy(MoreDropdown);
 var Typography__default = /*#__PURE__*/_interopDefaultLegacy(Typography);
 var Dropdown__default = /*#__PURE__*/_interopDefaultLegacy(Dropdown);
 var Tooltip__default = /*#__PURE__*/_interopDefaultLegacy(Tooltip);
-var classnames__default = /*#__PURE__*/_interopDefaultLegacy(classnames);
 var Pane__default = /*#__PURE__*/_interopDefaultLegacy(Pane);
 var Form__default = /*#__PURE__*/_interopDefaultLegacy(Form$2);
 var Select__default = /*#__PURE__*/_interopDefaultLegacy(Select);
@@ -11630,13 +11630,6 @@ var getActiveQuestionKindDetails = function getActiveQuestionKindDetails(_ref) {
 var generateArray = function generateArray(start, end) {
   return ramda.range(start, end + 1);
 };
-var isElementOverflowing = function isElementOverflowing(_ref2) {
-  var clientWidth = _ref2.clientWidth,
-    clientHeight = _ref2.clientHeight,
-    scrollWidth = _ref2.scrollWidth,
-    scrollHeight = _ref2.scrollHeight;
-  return scrollHeight > clientHeight || scrollWidth > clientWidth;
-};
 var htmlToPlainText = function htmlToPlainText(htmlContent) {
   var formattedContent = htmlContent.replaceAll(EMPTY_PARAGRAPH_REGEX, "\n");
   var node = document.createElement("div");
@@ -11991,7 +11984,7 @@ var Overview = function Overview(_ref) {
     onLanguageChange = _ref.onLanguageChange,
     additionalActionOptions = _ref.additionalActionOptions;
   return /*#__PURE__*/React__default["default"].createElement("div", {
-    className: "mb-6 flex-shrink-0 space-y-6"
+    className: "neeto-form-nano-form-wrapper__overview mb-4 w-full flex-shrink-0 space-y-4 px-6 pt-6"
   }, /*#__PURE__*/React__default["default"].createElement("div", {
     className: "flex items-center justify-between"
   }, /*#__PURE__*/React__default["default"].createElement(Typography__default["default"], {
@@ -12100,14 +12093,21 @@ var Drag = function Drag(props) {
     height: size,
     viewBox: "0 0 24 24",
     width: size
-  }, other), /*#__PURE__*/React__default["default"].createElement("path", {
-    d: "M8.997 17.5c-.275 0-.5.225-.497.5 0 .275.225.5.5.5s.5-.225.5-.5-.225-.5-.503-.5zM14.497 17.5c-.275 0-.5.225-.497.5 0 .275.225.5.5.5s.5-.225.5-.5-.225-.5-.503-.5zM8.997 11.5c-.275 0-.5.225-.497.5 0 .275.225.5.5.5s.5-.225.5-.5-.225-.5-.503-.5zM14.497 11.5c-.275 0-.5.225-.497.5 0 .275.225.5.5.5s.5-.225.5-.5-.225-.5-.503-.5zM8.997 5.5c-.275 0-.5.225-.497.5 0 .275.225.5.5.5s.5-.225.5-.5-.225-.5-.503-.5zM14.497 5.5c-.275 0-.5.225-.497.5 0 .275.225.5.5.5s.5-.225.5-.5-.225-.5-.503-.5z",
+  }, other), /*#__PURE__*/React__default["default"].createElement("g", {
+    clipPath: "url(#clip0_6290_43)",
     fill: color,
     stroke: color,
     strokeLinecap: "round",
     strokeLinejoin: "round",
     strokeWidth: "1.5"
-  }));
+  }, /*#__PURE__*/React__default["default"].createElement("path", {
+    d: "M8 12a1 1 0 102 0 1 1 0 00-2 0zM8 18a1 1 0 102 0 1 1 0 00-2 0zM8 6a1 1 0 102 0 1 1 0 00-2 0zM14 12a1 1 0 102 0 1 1 0 00-2 0zM14 18a1 1 0 102 0 1 1 0 00-2 0zM14 6a1 1 0 102 0 1 1 0 00-2 0z"
+  })), /*#__PURE__*/React__default["default"].createElement("defs", null, /*#__PURE__*/React__default["default"].createElement("clipPath", {
+    id: "clip0_6290_43"
+  }, /*#__PURE__*/React__default["default"].createElement("path", {
+    d: "M0 0H24V24H0z",
+    fill: color
+  }))));
 };
 Drag.defaultProps = {
   color: "currentColor",
@@ -12140,11 +12140,6 @@ var Card = function Card(_ref) {
     onEdit = _ref.onEdit,
     onClone = _ref.onClone,
     onDelete = _ref.onDelete;
-  var _useState = React$2.useState(false),
-    _useState2 = _slicedToArray$3(_useState, 2),
-    isTooltipEnabled = _useState2[0],
-    setIsTooltipEnabled = _useState2[1];
-  var questionLabelRef = React$2.useRef(null);
   var _useTranslation = reactI18next.useTranslation(),
     t = _useTranslation.t;
   var _getActiveKindDetails = getActiveKindDetails({
@@ -12155,34 +12150,27 @@ var Card = function Card(_ref) {
     label = _getActiveKindDetails.label,
     isSingular = _getActiveKindDetails.isSingular;
   var questionLabel = isRichTextQuestion(kind) ? htmlToPlainText(label) : label;
-  React$2.useEffect(function () {
-    var element = questionLabelRef.current;
-    if (neetoCist.isNotPresent(element)) return;
-    setIsTooltipEnabled(isElementOverflowing(element));
-  }, [questionLabel]);
   return /*#__PURE__*/React__default["default"].createElement("div", {
     "data-cy": "neeto-form-engine-".concat(neetoCist.slugify(questionLabel)),
-    className: classnames__default["default"]("neeto-ui-rounded neeto-ui-border-gray-300 flex h-10 w-full items-center justify-between border p-2", {
-      "neeto-ui-border-primary-500 border-2": isActive
+    className: classnames__default["default"]("neeto-ui-rounded neeto-ui-border-gray-300 neeto-ui-bg-white neeto-form-nano-form__card flex h-10 w-full items-center justify-between border p-2", {
+      "neeto-ui-border-primary-500 neeto-form-nano-form__card--active": isActive
     }),
     onClick: function onClick() {
       return onSelect(question);
     }
   }, /*#__PURE__*/React__default["default"].createElement("div", {
-    className: "flex items-center justify-between space-x-2"
+    className: "flex min-w-0 flex-grow items-center gap-1"
   }, /*#__PURE__*/React__default["default"].createElement(Drag, {
-    className: "flex-shrink-0 cursor-move"
-  }), /*#__PURE__*/React__default["default"].createElement(Tooltip__default["default"], {
-    content: questionLabel,
-    disabled: !isTooltipEnabled,
-    position: "top"
-  }, /*#__PURE__*/React__default["default"].createElement(Typography__default["default"], {
-    className: "max-w-md truncate",
-    lineHeight: "neeto-ui-leading-tight",
-    ref: questionLabelRef,
-    style: "h5",
-    weight: "neeto-ui-font-medium"
-  }, questionLabel))), /*#__PURE__*/React__default["default"].createElement(MoreDropdown__default["default"], {
+    className: "neeto-ui-text-gray-600 flex-shrink-0"
+  }), /*#__PURE__*/React__default["default"].createElement(Typography__default["default"], {
+    className: "line-clamp-2 min-w-0 flex-grow truncate break-words",
+    lineHeight: "snug",
+    style: "body2",
+    weight: "medium"
+  }, questionLabel)), /*#__PURE__*/React__default["default"].createElement(MoreDropdown__default["default"], {
+    dropdownButtonProps: {
+      className: "shrink-0"
+    },
     dropdownProps: {
       strategy: "fixed"
     },
@@ -13518,7 +13506,7 @@ var Form = function Form(_ref) {
       return setIsDeleteAlertOpen(false);
     }
   }), /*#__PURE__*/React__default["default"].createElement(formik.Form, _extends$8({
-    className: "flex h-full flex-col"
+    className: "neeto-form-nano-form-wrapper flex h-full flex-col"
   }, formDomProps, {
     noValidate: true
   }), formTitle && /*#__PURE__*/React__default["default"].createElement(Overview, {
@@ -13529,7 +13517,7 @@ var Form = function Form(_ref) {
     title: formTitle,
     onLanguageChange: handleLanguageChange
   }), /*#__PURE__*/React__default["default"].createElement("div", {
-    className: "w-full flex-grow space-y-6 overflow-y-auto"
+    className: "neeto-form-nano-form-wrapper__body min-h-0 w-full flex-grow space-y-6 overflow-y-auto px-6 pb-6"
   }, hasActiveQuestions ? /*#__PURE__*/React__default["default"].createElement("div", {
     className: "space-y-6",
     ref: containerRef
@@ -13565,7 +13553,7 @@ var Form = function Form(_ref) {
     isDisabled: ramda.isEmpty(availableQuestionKinds),
     onAdd: handleAdd
   }))), (showActionBlock || dirty) && /*#__PURE__*/React__default["default"].createElement("div", {
-    className: "neeto-ui-border-gray-300 flex flex-shrink-0 justify-end border-t p-6"
+    className: "neeto-ui-border-gray-300 neeto-form-nano-form-wrapper__footer flex flex-shrink-0 justify-end border-t px-6 py-4"
   }, /*#__PURE__*/React__default["default"].createElement(ActionBlock__default["default"], {
     submitButtonProps: submitButtonProps,
     isSubmitting: isReordering,
@@ -13637,7 +13625,8 @@ var BuildForm = function BuildForm(_ref) {
     onLanguageChange = _ref$onLanguageChange === void 0 ? neetoCist.noop : _ref$onLanguageChange,
     _ref$additionalAction = _ref.additionalActionOptions,
     additionalActionOptions = _ref$additionalAction === void 0 ? [] : _ref$additionalAction,
-    additionalQuestionKindPattern = _ref.additionalQuestionKindPattern;
+    additionalQuestionKindPattern = _ref.additionalQuestionKindPattern,
+    className = _ref.className;
   var queryClient = reactQuery.useQueryClient();
   var _useReorderQuestions = useReorderQuestions(id, {
       onSuccess: utils.showThumbsUpToastr
@@ -13710,7 +13699,7 @@ var BuildForm = function BuildForm(_ref) {
     type: QUESTION_KIND.ADDITIONAL_GUESTS.value
   }, QUESTION_KINDS);
   return /*#__PURE__*/React__default["default"].createElement("div", {
-    className: "relative h-full"
+    className: classnames__default["default"]("neeto-form-nano-form-outer-wrapper relative", className)
   }, /*#__PURE__*/React__default["default"].createElement(formik.Formik, {
     enableReinitialize: true,
     initialValues: {
@@ -13753,7 +13742,7 @@ var BuildForm = function BuildForm(_ref) {
       }
     }));
   }), isQuestionsLoading && /*#__PURE__*/React__default["default"].createElement("div", {
-    className: "neeto-ui-bg-gray-100 absolute bottom-0 left-0 right-0 top-0 flex items-center justify-center opacity-75"
+    className: "neeto-ui-bg-white absolute inset-0 flex items-center justify-center"
   }, /*#__PURE__*/React__default["default"].createElement(PageLoader__default["default"], null)));
 };