@bigbinary/neeto-form-frontend 2.0.0 → 2.0.1

package/dist/index.js

@@ -1,7 +1,8 @@
 import * as React$2 from 'react';
 import React__default, { useState, useRef, useEffect, useContext, useLayoutEffect as useLayoutEffect$1, forwardRef, useImperativeHandle, Fragment, useReducer, useCallback as useCallback$1, useMemo as useMemo$1, createContext, createElement } from 'react';
+import classnames from 'classnames';
 import { useFormikContext, useField, FieldArray, Form as Form$3, Formik, Field, FastField } from 'formik';
-import { filterNonNull, noop as noop$4, findBy, toLabelAndValue, isPresent as isPresent$1, truncate, humanize, isNotPresent, slugify, filterBy, removeBy, isNotEmpty, findById, notEqualsDeep } from '@bigbinary/neeto-cist';
+import { filterNonNull, noop as noop$4, findBy, toLabelAndValue, isPresent as isPresent$1, truncate, humanize, slugify, filterBy, removeBy, isNotPresent, isNotEmpty, findById, notEqualsDeep } from '@bigbinary/neeto-cist';
 import { buildUrl, showThumbsUpToastr, withEventTargetValue, getQueryParams, dateFormat } from '@bigbinary/neeto-commons-frontend/utils';
 import PageLoader from '@bigbinary/neeto-molecules/PageLoader';
 import { assoc, mergeLeft, compose as compose$1, isEmpty, trim, useWith, path, split, either, isNil, values, equals, modify, prop, range, includes, __, reduce, reject, keys, pick, omit, pluck, without, difference, pipe as pipe$1, last, not, toLower, map, identity, clamp as clamp$2, isNotNil, filter as filter$1 } from 'ramda';
@@ -20,7 +21,6 @@ import MoreDropdown from '@bigbinary/neeto-molecules/MoreDropdown';
 import Typography from '@bigbinary/neetoui/Typography';
 import Dropdown from '@bigbinary/neetoui/Dropdown';
 import Tooltip from '@bigbinary/neetoui/Tooltip';
-import classnames from 'classnames';
 import Pane from '@bigbinary/neetoui/Pane';
 import Form$2 from '@bigbinary/neetoui/formik/Form';
 import Select from '@bigbinary/neetoui/formik/Select';
@@ -11567,13 +11567,6 @@ var getActiveQuestionKindDetails = function getActiveQuestionKindDetails(_ref) {
 var generateArray = function generateArray(start, end) {
   return 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");
@@ -11928,7 +11921,7 @@ var Overview = function Overview(_ref) {
     onLanguageChange = _ref.onLanguageChange,
     additionalActionOptions = _ref.additionalActionOptions;
   return /*#__PURE__*/React__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.createElement("div", {
     className: "flex items-center justify-between"
   }, /*#__PURE__*/React__default.createElement(Typography, {
@@ -12037,14 +12030,21 @@ var Drag = function Drag(props) {
     height: size,
     viewBox: "0 0 24 24",
     width: size
-  }, other), /*#__PURE__*/React__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.createElement("g", {
+    clipPath: "url(#clip0_6290_43)",
     fill: color,
     stroke: color,
     strokeLinecap: "round",
     strokeLinejoin: "round",
     strokeWidth: "1.5"
-  }));
+  }, /*#__PURE__*/React__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.createElement("defs", null, /*#__PURE__*/React__default.createElement("clipPath", {
+    id: "clip0_6290_43"
+  }, /*#__PURE__*/React__default.createElement("path", {
+    d: "M0 0H24V24H0z",
+    fill: color
+  }))));
 };
 Drag.defaultProps = {
   color: "currentColor",
@@ -12077,11 +12077,6 @@ var Card = function Card(_ref) {
     onEdit = _ref.onEdit,
     onClone = _ref.onClone,
     onDelete = _ref.onDelete;
-  var _useState = useState(false),
-    _useState2 = _slicedToArray$3(_useState, 2),
-    isTooltipEnabled = _useState2[0],
-    setIsTooltipEnabled = _useState2[1];
-  var questionLabelRef = useRef(null);
   var _useTranslation = useTranslation(),
     t = _useTranslation.t;
   var _getActiveKindDetails = getActiveKindDetails({
@@ -12092,34 +12087,27 @@ var Card = function Card(_ref) {
     label = _getActiveKindDetails.label,
     isSingular = _getActiveKindDetails.isSingular;
   var questionLabel = isRichTextQuestion(kind) ? htmlToPlainText(label) : label;
-  useEffect(function () {
-    var element = questionLabelRef.current;
-    if (isNotPresent(element)) return;
-    setIsTooltipEnabled(isElementOverflowing(element));
-  }, [questionLabel]);
   return /*#__PURE__*/React__default.createElement("div", {
     "data-cy": "neeto-form-engine-".concat(slugify(questionLabel)),
-    className: classnames("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("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.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.createElement(Drag, {
-    className: "flex-shrink-0 cursor-move"
-  }), /*#__PURE__*/React__default.createElement(Tooltip, {
-    content: questionLabel,
-    disabled: !isTooltipEnabled,
-    position: "top"
-  }, /*#__PURE__*/React__default.createElement(Typography, {
-    className: "max-w-md truncate",
-    lineHeight: "neeto-ui-leading-tight",
-    ref: questionLabelRef,
-    style: "h5",
-    weight: "neeto-ui-font-medium"
-  }, questionLabel))), /*#__PURE__*/React__default.createElement(MoreDropdown, {
+    className: "neeto-ui-text-gray-600 flex-shrink-0"
+  }), /*#__PURE__*/React__default.createElement(Typography, {
+    className: "line-clamp-2 min-w-0 flex-grow truncate break-words",
+    lineHeight: "snug",
+    style: "body2",
+    weight: "medium"
+  }, questionLabel)), /*#__PURE__*/React__default.createElement(MoreDropdown, {
+    dropdownButtonProps: {
+      className: "shrink-0"
+    },
     dropdownProps: {
       strategy: "fixed"
     },
@@ -13455,7 +13443,7 @@ var Form = function Form(_ref) {
       return setIsDeleteAlertOpen(false);
     }
   }), /*#__PURE__*/React__default.createElement(Form$3, _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.createElement(Overview, {
@@ -13466,7 +13454,7 @@ var Form = function Form(_ref) {
     title: formTitle,
     onLanguageChange: handleLanguageChange
   }), /*#__PURE__*/React__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.createElement("div", {
     className: "space-y-6",
     ref: containerRef
@@ -13502,7 +13490,7 @@ var Form = function Form(_ref) {
     isDisabled: isEmpty(availableQuestionKinds),
     onAdd: handleAdd
   }))), (showActionBlock || dirty) && /*#__PURE__*/React__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.createElement(ActionBlock, {
     submitButtonProps: submitButtonProps,
     isSubmitting: isReordering,
@@ -13574,7 +13562,8 @@ var BuildForm = function BuildForm(_ref) {
     onLanguageChange = _ref$onLanguageChange === void 0 ? noop$4 : _ref$onLanguageChange,
     _ref$additionalAction = _ref.additionalActionOptions,
     additionalActionOptions = _ref$additionalAction === void 0 ? [] : _ref$additionalAction,
-    additionalQuestionKindPattern = _ref.additionalQuestionKindPattern;
+    additionalQuestionKindPattern = _ref.additionalQuestionKindPattern,
+    className = _ref.className;
   var queryClient = useQueryClient();
   var _useReorderQuestions = useReorderQuestions(id, {
       onSuccess: showThumbsUpToastr
@@ -13647,7 +13636,7 @@ var BuildForm = function BuildForm(_ref) {
     type: QUESTION_KIND.ADDITIONAL_GUESTS.value
   }, QUESTION_KINDS);
   return /*#__PURE__*/React__default.createElement("div", {
-    className: "relative h-full"
+    className: classnames("neeto-form-nano-form-outer-wrapper relative", className)
   }, /*#__PURE__*/React__default.createElement(Formik, {
     enableReinitialize: true,
     initialValues: {
@@ -13690,7 +13679,7 @@ var BuildForm = function BuildForm(_ref) {
       }
     }));
   }), isQuestionsLoading && /*#__PURE__*/React__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.createElement(PageLoader, null)));
 };