@luscii-healthtech/web-ui 2.64.1 → 2.66.0

package/dist/components/Form/FormTextarea.d.ts

@@ -0,0 +1,14 @@
+import React from "react";
+import { Control, RegisterOptions } from "react-hook-form";
+import { TextareaProps } from "../Textarea/Textarea";
+import { FieldTextareaConfiguration, FormFieldLabelerWithFormProps } from "./form.types";
+interface FormTextareaProps extends FieldTextareaConfiguration, Omit<TextareaProps, "name">, FormFieldLabelerWithFormProps {
+    control: Control;
+    rules?: Exclude<RegisterOptions, "valueAsNumber" | "valueAsDate" | "setValueAs">;
+    type: "textarea";
+}
+/**
+ * Input field that can be used in any react-hook-form context.
+ */
+export declare const FormTextarea: React.ForwardRefExoticComponent<FormTextareaProps & React.RefAttributes<HTMLTextAreaElement>>;
+export {};

package/dist/components/Form/form.types.d.ts

@@ -7,6 +7,7 @@ import { ImagePickerProps } from "../ImagePicker/ImagePicker";
 import { PartialProperties } from "../../types/general.types";
 import { CheckboxProps } from "../Checkbox/Checkbox";
 import { CheckboxListProps } from "../CheckboxList/CheckboxList.types";
+import { TextareaProps } from "../Textarea/Textarea";
 export declare type AllowedTextInputTypes = Extract<HTMLInputTypeAttribute, "email" | "number" | "password" | "text">;
 export declare type FormFieldWidth = "sm" | "md" | "lg" | "xl" | "full";
 interface FormFieldBaseConfiguration<TFieldType> extends FormFieldLabelerProps {
@@ -31,7 +32,7 @@ export interface FormFieldLabelerProps {
 interface FieldVoidConfiguration extends Partial<FormFieldBaseConfiguration<never>> {
     type: "void";
 }
-export declare type FormFieldConfiguration<TFieldValues> = FieldInputConfiguration | FieldSelectConfiguration | FieldImagePickerConfiguration | FieldRadioGroupConfiguration | FieldRowConfiguration<TFieldValues> | FieldCheckboxConfiguration | FieldCheckboxListConfiguration | FieldVoidConfiguration;
+export declare type FormFieldConfiguration<TFieldValues> = FieldInputConfiguration | FieldSelectConfiguration | FieldImagePickerConfiguration | FieldRadioGroupConfiguration | FieldRowConfiguration<TFieldValues> | FieldCheckboxConfiguration | FieldCheckboxListConfiguration | FieldTextareaConfiguration | FieldVoidConfiguration;
 /**
  * @backwardscompatibility
  * @deprecated - this is an alias for `FormFieldConfiguration`, for backwards compatibility the name can remain for now, but
@@ -46,6 +47,9 @@ export interface FieldRowConfiguration<TFieldValues> extends Record<keyof FormFi
 export interface FieldInputConfiguration extends FormFieldBaseConfiguration<Omit<InputProps, "name">> {
     type: AllowedTextInputTypes;
 }
+export interface FieldTextareaConfiguration extends FormFieldBaseConfiguration<Omit<TextareaProps, "name">> {
+    type: "textarea";
+}
 export interface FieldRadioGroupConfiguration extends FormFieldBaseConfiguration<Omit<RadioGroupProps, "name">> {
     type: "radioGroup";
 }

package/dist/components/Textarea/Textarea.d.ts

@@ -1,22 +1,29 @@
-export default Textarea;
-declare function Textarea(props: any): JSX.Element;
-declare namespace Textarea {
-    namespace propTypes {
-        const className: PropTypes.Requireable<string>;
-        const value: PropTypes.Requireable<string>;
-        const name: PropTypes.Validator<string>;
-        const placeholder: PropTypes.Requireable<string>;
-        const maxLength: PropTypes.Requireable<number>;
-        const rows: PropTypes.Requireable<number>;
-        const resizable: PropTypes.Requireable<string>;
-        const isDisabled: PropTypes.Requireable<boolean>;
-        const icon: PropTypes.Requireable<string>;
-        const onChange: PropTypes.Validator<(...args: any[]) => any>;
-        const onBlur: PropTypes.Requireable<(...args: any[]) => any>;
-        const onFocus: PropTypes.Requireable<(...args: any[]) => any>;
-        const onKeyPress: PropTypes.Requireable<(...args: any[]) => any>;
-        const onKeyDown: PropTypes.Requireable<(...args: any[]) => any>;
-        const onCtrlEnter: PropTypes.Requireable<(...args: any[]) => any>;
-    }
+import React, { ChangeEvent, FocusEvent, KeyboardEvent } from "react";
+import "./Textarea.scss";
+declare const resizeTypes: {
+    readonly NONE: "none";
+    readonly BOTH: "both";
+    readonly HORIZONTAL: "horizontal";
+    readonly VERTICAL: "vertical";
+};
+export declare type ResizeTypes = (typeof resizeTypes)[keyof typeof resizeTypes];
+export interface TextareaProps {
+    className?: string;
+    value?: string;
+    name?: string;
+    placeholder?: string;
+    maxLength?: number;
+    rows?: number;
+    resizable?: ResizeTypes;
+    isDisabled?: boolean;
+    icon?: string;
+    onChange: (event: ChangeEvent) => void;
+    onBlur?: (event: FocusEvent<HTMLTextAreaElement>) => void;
+    onFocus?: (event: FocusEvent<HTMLTextAreaElement>) => void;
+    onKeyPress?: (event: KeyboardEvent<HTMLTextAreaElement>) => void;
+    onKeyDown?: (event: KeyboardEvent<HTMLTextAreaElement>) => void;
+    onCtrlEnter?: () => void;
+    isError?: boolean;
 }
-import PropTypes from "prop-types";
+export declare const Textarea: React.ForwardRefExoticComponent<TextareaProps & React.RefAttributes<HTMLTextAreaElement>>;
+export {};

package/dist/index.d.ts

@@ -61,7 +61,7 @@ export { PageHeader, PageHeaderProps } from "./components/PageHeader";
 export { default as TabLinks } from "./components/TabLinks/TabLinks";
 export { default as Tag } from "./components/Tag/Tag";
 export { default as TagGroup } from "./components/Tag/TagGroup";
-export { default as TextArea } from "./components/Textarea/Textarea";
+export { Textarea, TextareaProps, ResizeTypes, } from "./components/Textarea/Textarea";
 export { default as TextEditor } from "./components/TextEditor/TextEditor";
 export { default as TextEditorV2 } from "./components/TextEditorV2/TextEditorV2";
 export { TextLink, TextLinkProps } from "./components/TextLink/TextLink";

package/dist/web-ui.cjs.development.js

@@ -7,7 +7,6 @@ function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'defau
 var React = require('react');
 var React__default = _interopDefault(React);
 var classNames = _interopDefault(require('classnames'));
-var dragula = _interopDefault(require('react-dragula'));
 var lodash = require('lodash');
 var core = require('@dnd-kit/core');
 var sortable = require('@dnd-kit/sortable');
@@ -35,6 +34,7 @@ var htmlToDraft = _interopDefault(require('html-to-draftjs'));
 require('react-draft-wysiwyg/dist/react-draft-wysiwyg.css');
 var pick = _interopDefault(require('lodash/pick'));
 var index_ie11 = require('react-hook-form/dist/index.ie11');
+var reactHookForm = require('react-hook-form');
 
 function _regeneratorRuntime() {
   /*! regenerator-runtime -- Copyright (c) 2014-present, Facebook, Inc. -- license (MIT): https://github.com/facebook/regenerator/blob/main/LICENSE */
@@ -2804,71 +2804,79 @@ var _excluded$9 = ["items", "onDragEnd", "onAssetLoadError"];
 
 var DefaultList = function DefaultList(_ref) {
   var items = _ref.items,
-      onDragEnd = _ref.onDragEnd,
+      _onDragEnd = _ref.onDragEnd,
       onAssetLoadError = _ref.onAssetLoadError,
       props = _objectWithoutPropertiesLoose(_ref, _excluded$9);
 
-  var listRef = React.useRef(null);
-  var dragulaRef = React.useRef(null);
-  React.useEffect(function () {
-    var _dragulaRef$current;
-
-    (_dragulaRef$current = dragulaRef.current) == null ? void 0 : _dragulaRef$current.destroy == null ? void 0 : _dragulaRef$current.destroy();
+  var sensor = core.useSensor(core.MouseSensor);
 
-    if (listRef.current && onDragEnd && items.length) {
-      dragulaRef.current = setupDragging();
-    }
+  var _useState = React.useState(null),
+      draggedListItem = _useState[0],
+      setDraggedListItem = _useState[1];
 
-    return function () {
-      var _dragulaRef$current2;
+  var _useState2 = React.useState(items),
+      innerItems = _useState2[0],
+      setInnerItems = _useState2[1];
 
-      (_dragulaRef$current2 = dragulaRef.current) == null ? void 0 : _dragulaRef$current2.destroy == null ? void 0 : _dragulaRef$current2.destroy();
-    };
-  }, [items, listRef]);
+  React.useEffect(function () {
+    setInnerItems(items);
+  }, [items]);
 
-  var handleDragEnd = function handleDragEnd(element) {
-    var draggedItemId = element.dataset["id"];
+  if (!_onDragEnd) {
+    return /*#__PURE__*/React__default.createElement(BaseList, _extends({
+      itemComponent: ListItem,
+      items: items.map(function (item) {
+        return _extends({}, item, {
+          isDraggable: false,
+          onAssetLoadError: onAssetLoadError
+        });
+      })
+    }, props));
+  }
 
-    if (listRef.current && draggedItemId) {
-      var itemIdsWithOldOrder = items.map(function (item) {
-        return item.itemId.toString();
-      });
-      var itemIdsWithNewOrder = Array.from(listRef.current.children).map(function (child) {
-        return child.dataset["id"];
-      }).filter(function (itemId) {
-        return !!itemId;
-      });
-      var oldIndexOfDraggedItemId = itemIdsWithOldOrder.indexOf(draggedItemId);
-      var newIndexOfDraggedItemId = itemIdsWithNewOrder.indexOf(draggedItemId);
+  return /*#__PURE__*/React__default.createElement(core.DndContext, {
+    sensors: [sensor],
+    onDragStart: function onDragStart(event) {
+      setDraggedListItem(getDndListItemProps(event.active));
+    },
+    onDragEnd: function onDragEnd(event) {
+      var _event$active, _event$active$data, _event$active$data$cu, _event$active$data$cu2, _event$over, _event$over$data, _event$over$data$curr, _event$over$data$curr2;
 
-      if (oldIndexOfDraggedItemId !== newIndexOfDraggedItemId) {
-        onDragEnd == null ? void 0 : onDragEnd(draggedItemId, newIndexOfDraggedItemId);
+      if (!draggedListItem) {
+        return;
       }
-    }
-  };
 
-  var setupDragging = function setupDragging() {
-    if (!listRef.current) {
-      return null;
-    }
+      var currentIndex = (_event$active = event.active) == null ? void 0 : (_event$active$data = _event$active.data) == null ? void 0 : (_event$active$data$cu = _event$active$data.current) == null ? void 0 : (_event$active$data$cu2 = _event$active$data$cu.sortable) == null ? void 0 : _event$active$data$cu2.index;
+      var newIndex = (_event$over = event.over) == null ? void 0 : (_event$over$data = _event$over.data) == null ? void 0 : (_event$over$data$curr = _event$over$data.current) == null ? void 0 : (_event$over$data$curr2 = _event$over$data$curr.sortable) == null ? void 0 : _event$over$data$curr2.index;
 
-    var dragulaInstance = dragula([listRef.current], {
-      revertOnSpill: true
-    });
-    dragulaInstance.on("dragend", handleDragEnd);
-    return dragulaInstance;
-  };
+      if (typeof currentIndex === "number" && typeof newIndex === "number") {
+        setInnerItems(sortable.arrayMove(innerItems, currentIndex, newIndex));
 
-  return /*#__PURE__*/React__default.createElement(BaseList, _extends({
-    ref: listRef,
-    itemComponent: ListItem,
-    items: items.map(function (item) {
+        _onDragEnd(draggedListItem.itemId, newIndex);
+      }
+
+      setDraggedListItem(null);
+    }
+  }, /*#__PURE__*/React__default.createElement(SortableBaseList, _extends({
+    draggableIdentifier: "sortable-list-identifier",
+    items: innerItems.map(function (item) {
       return _extends({}, item, {
-        isDraggable: !!onDragEnd,
+        draggableIdentifier: "" + item.itemId,
+        isDraggable: true,
         onAssetLoadError: onAssetLoadError
       });
     })
-  }, props));
+  }, props)), /*#__PURE__*/React__default.createElement(core.DragOverlay, {
+    dropAnimation: null,
+    wrapperElement: "ul",
+    className: "shadow-lg"
+  }, draggedListItem && /*#__PURE__*/React__default.createElement(ListItem, _extends({}, draggedListItem, {
+    renderDragHandle: function renderDragHandle() {
+      return /*#__PURE__*/React__default.createElement(DragHandle, {
+        grabbing: true
+      });
+    }
+  }))));
 }; // Rest operator isn't used here because TS seems to require the operation
 // happening in the branch of the code where the object is used in
 
@@ -7827,50 +7835,32 @@ var css_248z$p = ".cweb-textarea {\n  border: 1px solid #cccccc;\n  border-radiu
 styleInject(css_248z$p);
 
 var _excluded$s = ["className", "value", "name", "placeholder", "maxLength", "rows", "resizable", "isDisabled", "icon", "onChange", "onBlur", "onFocus", "onKeyPress", "onKeyDown", "onCtrlEnter"];
-var RESIZE_TYPES = {
+var resizeTypes = {
   NONE: "none",
   BOTH: "both",
   HORIZONTAL: "horizontal",
   VERTICAL: "vertical"
 };
-Textarea.propTypes = {
-  className: PropTypes.string,
-  value: PropTypes.string,
-  name: PropTypes.string.isRequired,
-  placeholder: PropTypes.string,
-  maxLength: PropTypes.number,
-  rows: PropTypes.number,
-  resizable: /*#__PURE__*/PropTypes.oneOf([RESIZE_TYPES.BOTH, RESIZE_TYPES.HORIZONTAL, RESIZE_TYPES.VERTICAL, RESIZE_TYPES.NONE]),
-  isDisabled: PropTypes.bool,
-  icon: PropTypes.string,
-  onChange: PropTypes.func.isRequired,
-  onBlur: PropTypes.func,
-  onFocus: PropTypes.func,
-  onKeyPress: PropTypes.func,
-  onKeyDown: PropTypes.func,
-  onCtrlEnter: PropTypes.func
-};
-
-function Textarea(props) {
-  var className = props.className,
-      value = props.value,
-      name = props.name,
-      placeholder = props.placeholder,
-      maxLength = props.maxLength,
-      _props$rows = props.rows,
-      rows = _props$rows === void 0 ? 4 : _props$rows,
-      _props$resizable = props.resizable,
-      resizable = _props$resizable === void 0 ? RESIZE_TYPES.VERTICAL : _props$resizable,
-      _props$isDisabled = props.isDisabled,
-      isDisabled = _props$isDisabled === void 0 ? false : _props$isDisabled,
-      icon = props.icon,
-      onChange = props.onChange,
-      onBlur = props.onBlur,
-      onFocus = props.onFocus,
-      onKeyPress = props.onKeyPress,
-      _onKeyDown = props.onKeyDown,
-      onCtrlEnter = props.onCtrlEnter,
-      otherProps = _objectWithoutPropertiesLoose(props, _excluded$s);
+var Textarea = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
+  var className = _ref.className,
+      value = _ref.value,
+      name = _ref.name,
+      placeholder = _ref.placeholder,
+      maxLength = _ref.maxLength,
+      _ref$rows = _ref.rows,
+      rows = _ref$rows === void 0 ? 4 : _ref$rows,
+      _ref$resizable = _ref.resizable,
+      resizable = _ref$resizable === void 0 ? resizeTypes.VERTICAL : _ref$resizable,
+      _ref$isDisabled = _ref.isDisabled,
+      isDisabled = _ref$isDisabled === void 0 ? false : _ref$isDisabled,
+      icon = _ref.icon,
+      onChange = _ref.onChange,
+      onBlur = _ref.onBlur,
+      onFocus = _ref.onFocus,
+      onKeyPress = _ref.onKeyPress,
+      _onKeyDown = _ref.onKeyDown,
+      onCtrlEnter = _ref.onCtrlEnter,
+      otherProps = _objectWithoutPropertiesLoose(_ref, _excluded$s);
 
   var style;
 
@@ -7889,7 +7879,7 @@ function Textarea(props) {
     onFocus: onFocus,
     onKeyPress: onKeyPress,
     onKeyDown: function onKeyDown(event) {
-      _onKeyDown == null ? void 0 : _onKeyDown();
+      _onKeyDown == null ? void 0 : _onKeyDown(event);
       var ctrlKey = event.ctrlKey,
           metaKey = event.metaKey,
           key = event.key;
@@ -7903,13 +7893,14 @@ function Textarea(props) {
     disabled: isDisabled,
     className: classNames("cweb-textarea", className, "p-2", "border", "placeholder-gray-500", "text-sm", "border-solid", "border-input-border", "hover:border-input-border-dark", "focus:outline-primary", "transition-colors", "duration-300", "w-full", "focus:border-primary", {
       "has-icon": !!icon,
-      resizable: resizable === RESIZE_TYPES.BOTH,
-      "resizable-x": resizable === RESIZE_TYPES.HORIZONTAL,
-      "resizable-y": resizable === RESIZE_TYPES.VERTICAL
+      resizable: resizable === resizeTypes.BOTH,
+      "resizable-x": resizable === resizeTypes.HORIZONTAL,
+      "resizable-y": resizable === resizeTypes.VERTICAL
     }),
-    style: style
+    style: style,
+    ref: ref
   }));
-}
+});
 
 var css_248z$q = ".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}";
 styleInject(css_248z$q);
@@ -8506,6 +8497,42 @@ var FormFieldCheckboxList = function FormFieldCheckboxList(_ref) {
   }));
 };
 
+var _excluded$z = ["control", "name", "rules", "fieldErrors", "fieldRequired", "label", "info", "decoratorClassname"];
+/**
+ * Input field that can be used in any react-hook-form context.
+ */
+
+var FormTextarea = /*#__PURE__*/React__default.forwardRef(function (_ref, innerRef) {
+  var control = _ref.control,
+      name = _ref.name,
+      rules = _ref.rules,
+      fieldErrors = _ref.fieldErrors,
+      fieldRequired = _ref.fieldRequired,
+      label = _ref.label,
+      info = _ref.info,
+      decoratorClassname = _ref.decoratorClassname,
+      fieldProps = _objectWithoutPropertiesLoose(_ref, _excluded$z);
+
+  return /*#__PURE__*/React__default.createElement(FormFieldLabeler, {
+    name: name,
+    fieldErrors: fieldErrors,
+    fieldRequired: fieldRequired,
+    label: label,
+    info: info,
+    decoratorClassname: decoratorClassname
+  }, /*#__PURE__*/React__default.createElement(reactHookForm.Controller, {
+    name: name,
+    control: control,
+    rules: rules,
+    render: function render(field) {
+      return /*#__PURE__*/React__default.createElement(Textarea, _extends({}, fieldProps, field, {
+        isError: hasError(name, fieldErrors),
+        ref: innerRef
+      }));
+    }
+  }));
+});
+
 /**
  * Create a straight forward Form, which takes away the 'overhead' of react-hook-form.
  *
@@ -8662,6 +8689,20 @@ function FormFieldMapper(formFieldProps, useFormReturn) {
         }));
       }
 
+    case "textarea":
+      {
+        return /*#__PURE__*/React__default.createElement(FormTextarea, _extends({
+          key: name
+        }, decoratorProps, {
+          fieldRequired: isRequired(options),
+          fieldErrors: errors,
+          type: "textarea",
+          name: name,
+          rules: options,
+          control: control
+        }, fieldProps));
+      }
+
     case "void":
       return null;
 
@@ -8841,10 +8882,10 @@ exports.Tag = Tag;
 exports.TagGroup = TagGroup;
 exports.TertiaryButton = TertiaryButton;
 exports.Text = Text;
-exports.TextArea = Textarea;
 exports.TextEditor = TextEditor;
 exports.TextEditorV2 = TextEditorV2;
 exports.TextLink = TextLink;
+exports.Textarea = Textarea;
 exports.Timeline = Timeline;
 exports.Title = Title;
 exports.Toaster = Toaster;