@luscii-healthtech/web-ui 2.65.0 → 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

@@ -34,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 */
@@ -7834,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;
 
@@ -7896,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;
@@ -7910,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);
@@ -8513,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.
  *
@@ -8669,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;
 
@@ -8848,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;