guestbell-forms 3.0.102 → 3.0.104

package/build/components/base/input/useBaseInput.d.ts

@@ -0,0 +1,44 @@
+/// <reference types="react" />
+import { AllowedHtmlElements, BaseTranslations, ValidationError } from './BaseInput';
+import * as Validators from '../../../validators';
+import { FormContextState } from '../../form/FormContext';
+interface UseBaseInputProps<TranslationsT extends BaseTranslations> {
+    value?: string;
+    required?: boolean;
+    validators?: string[];
+    customValidators?: Validators.IBaseValidator[];
+    onTheFlightValidate?: (value: string) => boolean;
+    onChange?: (event: React.ChangeEvent<AllowedHtmlElements>, isValid: boolean) => void;
+    onBlur?: () => void;
+    onFocus?: () => void;
+    errors?: ValidationError[];
+    infoText?: string;
+    touchOn?: 'focus' | 'blur';
+    showValidation?: boolean;
+    disabled?: boolean;
+    ignoreContext?: boolean;
+    formContext?: FormContextState;
+    translations?: TranslationsT;
+    validationName?: string;
+    label?: string | JSX.Element;
+}
+export declare function useBaseInput<TranslationsT extends BaseTranslations = BaseTranslations>(props: UseBaseInputProps<TranslationsT>): {
+    value: string;
+    setValue: (newValue: string) => void;
+    isValid: boolean;
+    errors: ValidationError[];
+    touched: boolean;
+    focused: boolean;
+    inputRef: import("react").MutableRefObject<AllowedHtmlElements>;
+    containerRef: import("react").MutableRefObject<HTMLDivElement>;
+    handleFocus: () => void;
+    handleBlur: () => void;
+    scrollTo: () => void;
+    setValid: () => void;
+    setInvalid: (validationErrors?: ValidationError[]) => void;
+    disableComponent: () => void;
+    enableComponent: () => void;
+    setTouched: import("react").Dispatch<import("react").SetStateAction<boolean>>;
+    componentDisabled: boolean;
+};
+export {};

package/build/components/base/input/useBaseInput.js

@@ -0,0 +1,181 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useBaseInput = useBaseInput;
+var _react = require("react");
+var Validators = _interopRequireWildcard(require("../../../validators"));
+var _Guid = _interopRequireDefault(require("../../utils/Guid"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+// experimental and unfinished and unused for now
+
+function useBaseInput(props) {
+  const {
+    value: initialValue = '',
+    required = false,
+    validators = [],
+    customValidators = [],
+    onTheFlightValidate,
+    onChange,
+    onBlur,
+    onFocus,
+    //errors: propErrors = [],
+    //infoText,
+    touchOn = 'focus',
+    //showValidation = true,
+    disabled = false,
+    ignoreContext = false,
+    formContext,
+    translations,
+    validationName,
+    label
+  } = props;
+  const [value, setValue] = (0, _react.useState)(initialValue);
+  const [touched, setTouched] = (0, _react.useState)(false);
+  const [isValid, setIsValid] = (0, _react.useState)(true);
+  const [errors, setErrors] = (0, _react.useState)([]);
+  const [focused, setFocused] = (0, _react.useState)(false);
+  const [componentDisabled, setComponentDisabled] = (0, _react.useState)(disabled);
+  const inputRef = (0, _react.useRef)(null);
+  const containerRef = (0, _react.useRef)(null);
+  const componentId = (0, _react.useRef)((0, _Guid.default)());
+  const handleValidation = (0, _react.useCallback)(function (currentValue) {
+    let initializing = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
+    let validationErrors = [];
+    let validationStatus = true;
+    if (required && !currentValue) {
+      validationErrors.push((translations === null || translations === void 0 ? void 0 : translations.required) || 'This field is required');
+      validationStatus = false;
+    } else if (validators) {
+      validators.forEach(validator => {
+        let isValidForValidator = false;
+        switch (validator) {
+          case 'email':
+            isValidForValidator = new Validators.EmailValidator().Validate(currentValue, required, error => validationErrors.push(error));
+            break;
+          // Add other validators as needed
+          default:
+            throw new Error(`Validator ${validator} not implemented`);
+        }
+        if (!isValidForValidator) validationStatus = false;
+      });
+    }
+    customValidators.forEach(customValidator => {
+      const isValidForCustomValidator = customValidator.Validate(currentValue, required, error => validationErrors.push(error));
+      if (!isValidForCustomValidator) validationStatus = false;
+    });
+    setErrors(validationErrors);
+    setIsValid(validationStatus);
+    if (!initializing && !ignoreContext) {
+      formContext === null || formContext === void 0 ? void 0 : formContext.updateCallback(componentId.current, {
+        isValid: validationStatus,
+        errors: validationErrors
+      });
+    }
+    return {
+      isValid: validationStatus,
+      errors: validationErrors
+    };
+  }, [required, validators, customValidators, formContext, translations, ignoreContext]);
+  const handleValueChange = (0, _react.useCallback)(newValue => {
+    if (!onTheFlightValidate || onTheFlightValidate(newValue)) {
+      const result = handleValidation(newValue);
+      setValue(newValue);
+      onChange === null || onChange === void 0 ? void 0 : onChange({
+        target: {
+          value: newValue
+        }
+      }, result.isValid);
+    }
+  }, [handleValidation, onTheFlightValidate, onChange]);
+  const handleFocus = (0, _react.useCallback)(() => {
+    if (!disabled) {
+      onFocus === null || onFocus === void 0 ? void 0 : onFocus();
+      setFocused(true);
+      if (touchOn === 'focus') setTouched(true);
+    }
+  }, [disabled, onFocus, touchOn]);
+  const handleBlur = (0, _react.useCallback)(() => {
+    onBlur === null || onBlur === void 0 ? void 0 : onBlur();
+    setFocused(false);
+    if (touchOn === 'blur') setTouched(true);
+  }, [onBlur, touchOn]);
+  const scrollTo = (0, _react.useCallback)(() => {
+    var _containerRef$current;
+    (_containerRef$current = containerRef.current) === null || _containerRef$current === void 0 ? void 0 : _containerRef$current.scrollIntoView({
+      behavior: 'smooth'
+    });
+  }, []);
+  const setValid = (0, _react.useCallback)(() => {
+    setIsValid(true);
+    setErrors([]);
+    formContext === null || formContext === void 0 ? void 0 : formContext.updateCallback(componentId.current, {
+      isValid: true,
+      errors: []
+    });
+  }, [formContext]);
+  const setInvalid = (0, _react.useCallback)(function () {
+    let validationErrors = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
+    setIsValid(false);
+    setErrors(validationErrors);
+    formContext === null || formContext === void 0 ? void 0 : formContext.updateCallback(componentId.current, {
+      isValid: false,
+      errors: validationErrors
+    });
+  }, [formContext]);
+  const disableComponent = (0, _react.useCallback)(() => {
+    setComponentDisabled(true);
+  }, []);
+  const enableComponent = (0, _react.useCallback)(() => {
+    setComponentDisabled(false);
+  }, []);
+  (0, _react.useEffect)(() => {
+    handleValidation(value, true);
+    if (!ignoreContext && formContext) {
+      formContext.subscribe(componentId.current, {
+        componentApi: {
+          disableComponent,
+          enableComponent,
+          focus: () => {
+            var _inputRef$current;
+            return (_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 ? void 0 : _inputRef$current.focus();
+          },
+          scrollTo,
+          touch: () => setTouched(true),
+          unTouch: () => setTouched(false)
+        },
+        validation: {
+          isValid,
+          errors,
+          name: validationName || label
+        }
+      });
+    }
+    return () => {
+      if (!ignoreContext) formContext === null || formContext === void 0 ? void 0 : formContext.unSubscribe(componentId.current);
+    };
+  }, [formContext, ignoreContext, handleValidation, value]);
+  return {
+    value,
+    setValue: handleValueChange,
+    isValid,
+    errors,
+    touched,
+    focused,
+    inputRef,
+    containerRef,
+    handleFocus,
+    handleBlur,
+    scrollTo,
+    setValid,
+    setInvalid,
+    disableComponent,
+    enableComponent,
+    setTouched,
+    componentDisabled
+  };
+}
+//# sourceMappingURL=useBaseInput.js.map

package/build/components/base/input/useBaseInput.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useBaseInput.js","names":["_react","require","Validators","_interopRequireWildcard","_Guid","_interopRequireDefault","obj","__esModule","default","_getRequireWildcardCache","nodeInterop","WeakMap","cacheBabelInterop","cacheNodeInterop","cache","has","get","newObj","hasPropertyDescriptor","Object","defineProperty","getOwnPropertyDescriptor","key","prototype","hasOwnProperty","call","desc","set","useBaseInput","props","value","initialValue","required","validators","customValidators","onTheFlightValidate","onChange","onBlur","onFocus","touchOn","disabled","ignoreContext","formContext","translations","validationName","label","setValue","useState","touched","setTouched","isValid","setIsValid","errors","setErrors","focused","setFocused","componentDisabled","setComponentDisabled","inputRef","useRef","containerRef","componentId","guid","handleValidation","useCallback","currentValue","initializing","arguments","length","undefined","validationErrors","validationStatus","push","forEach","validator","isValidForValidator","EmailValidator","Validate","error","Error","customValidator","isValidForCustomValidator","updateCallback","current","handleValueChange","newValue","result","target","handleFocus","handleBlur","scrollTo","_containerRef$current","scrollIntoView","behavior","setValid","setInvalid","disableComponent","enableComponent","useEffect","subscribe","componentApi","focus","_inputRef$current","touch","unTouch","validation","name","unSubscribe"],"sources":["../../../../src/lib/components/base/input/useBaseInput.tsx"],"sourcesContent":["// experimental and unfinished and unused for now\nimport { useState, useRef, useCallback, useEffect } from 'react';\nimport {\n  AllowedHtmlElements,\n  BaseTranslations,\n  ValidationError,\n} from './BaseInput';\nimport * as Validators from '../../../validators';\nimport { FormContextState } from '../../form/FormContext';\nimport guid from '../../utils/Guid';\n\ninterface UseBaseInputProps<TranslationsT extends BaseTranslations> {\n  value?: string;\n  required?: boolean;\n  validators?: string[];\n  customValidators?: Validators.IBaseValidator[];\n  onTheFlightValidate?: (value: string) => boolean;\n  onChange?: (\n    event: React.ChangeEvent<AllowedHtmlElements>,\n    isValid: boolean\n  ) => void;\n  onBlur?: () => void;\n  onFocus?: () => void;\n  errors?: ValidationError[];\n  infoText?: string;\n  touchOn?: 'focus' | 'blur';\n  showValidation?: boolean;\n  disabled?: boolean;\n  ignoreContext?: boolean;\n  formContext?: FormContextState;\n  translations?: TranslationsT;\n  validationName?: string;\n  label?: string | JSX.Element;\n}\n\nexport function useBaseInput<\n  TranslationsT extends BaseTranslations = BaseTranslations\n>(props: UseBaseInputProps<TranslationsT>) {\n  const {\n    value: initialValue = '',\n    required = false,\n    validators = [],\n    customValidators = [],\n    onTheFlightValidate,\n    onChange,\n    onBlur,\n    onFocus,\n    //errors: propErrors = [],\n    //infoText,\n    touchOn = 'focus',\n    //showValidation = true,\n    disabled = false,\n    ignoreContext = false,\n    formContext,\n    translations,\n    validationName,\n    label,\n  } = props;\n\n  const [value, setValue] = useState<string>(initialValue);\n  const [touched, setTouched] = useState<boolean>(false);\n  const [isValid, setIsValid] = useState<boolean>(true);\n  const [errors, setErrors] = useState<ValidationError[]>([]);\n  const [focused, setFocused] = useState<boolean>(false);\n  const [componentDisabled, setComponentDisabled] = useState<boolean>(disabled);\n\n  const inputRef = useRef<AllowedHtmlElements>(null);\n  const containerRef = useRef<HTMLDivElement>(null);\n  const componentId = useRef(guid());\n\n  const handleValidation = useCallback(\n    (currentValue: string, initializing = false) => {\n      let validationErrors: ValidationError[] = [];\n      let validationStatus = true;\n\n      if (required && !currentValue) {\n        validationErrors.push(\n          translations?.required || 'This field is required'\n        );\n        validationStatus = false;\n      } else if (validators) {\n        validators.forEach((validator) => {\n          let isValidForValidator = false;\n          switch (validator) {\n            case 'email':\n              isValidForValidator = new Validators.EmailValidator().Validate(\n                currentValue,\n                required,\n                (error) => validationErrors.push(error)\n              );\n              break;\n            // Add other validators as needed\n            default:\n              throw new Error(`Validator ${validator} not implemented`);\n          }\n          if (!isValidForValidator) validationStatus = false;\n        });\n      }\n\n      customValidators.forEach((customValidator) => {\n        const isValidForCustomValidator = customValidator.Validate(\n          currentValue,\n          required,\n          (error) => validationErrors.push(error)\n        );\n        if (!isValidForCustomValidator) validationStatus = false;\n      });\n\n      setErrors(validationErrors);\n      setIsValid(validationStatus);\n\n      if (!initializing && !ignoreContext) {\n        formContext?.updateCallback(componentId.current, {\n          isValid: validationStatus,\n          errors: validationErrors,\n        });\n      }\n\n      return { isValid: validationStatus, errors: validationErrors };\n    },\n    [\n      required,\n      validators,\n      customValidators,\n      formContext,\n      translations,\n      ignoreContext,\n    ]\n  );\n\n  const handleValueChange = useCallback(\n    (newValue: string) => {\n      if (!onTheFlightValidate || onTheFlightValidate(newValue)) {\n        const result = handleValidation(newValue);\n        setValue(newValue);\n        onChange?.(\n          {\n            target: { value: newValue },\n          } as React.ChangeEvent<AllowedHtmlElements>,\n          result.isValid\n        );\n      }\n    },\n    [handleValidation, onTheFlightValidate, onChange]\n  );\n\n  const handleFocus = useCallback(() => {\n    if (!disabled) {\n      onFocus?.();\n      setFocused(true);\n      if (touchOn === 'focus') setTouched(true);\n    }\n  }, [disabled, onFocus, touchOn]);\n\n  const handleBlur = useCallback(() => {\n    onBlur?.();\n    setFocused(false);\n    if (touchOn === 'blur') setTouched(true);\n  }, [onBlur, touchOn]);\n\n  const scrollTo = useCallback(() => {\n    containerRef.current?.scrollIntoView({ behavior: 'smooth' });\n  }, []);\n\n  const setValid = useCallback(() => {\n    setIsValid(true);\n    setErrors([]);\n    formContext?.updateCallback(componentId.current, {\n      isValid: true,\n      errors: [],\n    });\n  }, [formContext]);\n\n  const setInvalid = useCallback(\n    (validationErrors: ValidationError[] = []) => {\n      setIsValid(false);\n      setErrors(validationErrors);\n      formContext?.updateCallback(componentId.current, {\n        isValid: false,\n        errors: validationErrors,\n      });\n    },\n    [formContext]\n  );\n\n  const disableComponent = useCallback(() => {\n    setComponentDisabled(true);\n  }, []);\n\n  const enableComponent = useCallback(() => {\n    setComponentDisabled(false);\n  }, []);\n\n  useEffect(() => {\n    handleValidation(value, true);\n\n    if (!ignoreContext && formContext) {\n      formContext.subscribe(componentId.current, {\n        componentApi: {\n          disableComponent,\n          enableComponent,\n          focus: () => inputRef.current?.focus(),\n          scrollTo,\n          touch: () => setTouched(true),\n          unTouch: () => setTouched(false),\n        },\n        validation: {\n          isValid,\n          errors,\n          name: validationName || label,\n        },\n      });\n    }\n\n    return () => {\n      if (!ignoreContext) formContext?.unSubscribe(componentId.current);\n    };\n  }, [formContext, ignoreContext, handleValidation, value]);\n\n  return {\n    value,\n    setValue: handleValueChange,\n    isValid,\n    errors,\n    touched,\n    focused,\n    inputRef,\n    containerRef,\n    handleFocus,\n    handleBlur,\n    scrollTo,\n    setValid,\n    setInvalid,\n    disableComponent,\n    enableComponent,\n    setTouched,\n    componentDisabled,\n  };\n}\n"],"mappings":"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"}

package/build/components/tags/Tags.d.ts

@@ -79,7 +79,7 @@ export declare class TagsRaw<IdT extends number | string = number, T extends Res
     private isMobile;
     constructor(props: TagsProps<IdT, T> & InjectedProps);
     focus(): void;
-    componentDidUpdate(oldProps: TagsProps<IdT, T> & InjectedProps): void;
+    componentDidUpdate(oldProps: TagsProps<IdT, T> & InjectedProps, oldState: TagsState<IdT, T>): void;
     handleLeaveMobileClick(): void;
     handleClickOutside(e: MouseEvent): void;
     componentDidMount(): void;

package/build/components/tags/Tags.js

@@ -80,7 +80,6 @@ class TagsRaw extends _BaseInput.BaseInput {
         var _this$props$onSuggest, _this$props2;
         (_this$props$onSuggest = (_this$props2 = this.props).onSuggestionsOpened) === null || _this$props$onSuggest === void 0 ? void 0 : _this$props$onSuggest.call(_this$props2);
       }
-      this.fetchExistingTags(this.state.value);
       this.setState(() => ({
         textIsFocused: true,
         suggestionsVisible: true,
@@ -111,7 +110,6 @@ class TagsRaw extends _BaseInput.BaseInput {
             value: '',
             preselectedSuggestion: undefined
           }, () => {
-            this.fetchExistingTags();
             this.handleErrors();
           });
         } else if (existingTag) {
@@ -119,7 +117,6 @@ class TagsRaw extends _BaseInput.BaseInput {
           this.setState({
             value: ''
           }, () => {
-            this.fetchExistingTags();
             this.handleErrors();
           });
         } else if (this.props.allowNew) {
@@ -150,14 +147,14 @@ class TagsRaw extends _BaseInput.BaseInput {
       this.setState({
         suggestionsVisible: this.props.closeSuggestionsAfterCreate ? false : this.state.suggestionsVisible
       });
+      const newTags = newTag ? this.props.tags ? this.props.tags.concat(newTag) : [newTag] : this.props.tags;
       if (newTag) {
-        this.props.onTagsChanged(this.props.tags ? this.props.tags.concat(newTag) : [newTag]);
+        this.props.onTagsChanged(newTags);
       }
       this.setState({
         value: '',
         textErrors: []
       }, () => {
-        this.fetchExistingTags();
         this.handleErrors();
       });
     };
@@ -199,7 +196,6 @@ class TagsRaw extends _BaseInput.BaseInput {
         textIsValid: isValid,
         suggestionsVisible: true
       }), () => this.handleErrors());
-      this.fetchExistingTags(e.target.value);
     };
     this.handleErrors = function () {
       let tags = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : _this.props.tags;
@@ -253,10 +249,13 @@ class TagsRaw extends _BaseInput.BaseInput {
       this.textRef.current.focus();
     }
   }
-  componentDidUpdate(oldProps) {
+  componentDidUpdate(oldProps, oldState) {
     if (oldProps.tags !== this.props.tags || oldProps.validators !== this.props.validators || oldProps.customValidators !== this.props.customValidators || oldProps.required !== this.props.required) {
       this.handleErrors(this.props.tags);
     }
+    if (this.state.suggestionsVisible && (oldProps.tags !== this.props.tags || oldProps.existingTags !== this.props.existingTags || this.state.value !== oldState.value || this.state.suggestionsVisible !== oldState.suggestionsVisible)) {
+      this.fetchExistingTags(this.state.value);
+    }
   }
   handleLeaveMobileClick() {
     this.setState({
@@ -420,9 +419,16 @@ class TagsRaw extends _BaseInput.BaseInput {
         fetchingExistingTags: true
       })), this.props.loadingDelayMs);
       this.props.fetchExistingTags(startsWith, this.props.tags).then(fetchedExistingTags => {
+        if (fetchedExistingTags) {
+          clearTimeout(timer);
+          this.setState(() => ({
+            fetchedExistingTags,
+            fetchingExistingTags: false
+          }));
+        }
+      }).catch(() => {
         clearTimeout(timer);
         this.setState(() => ({
-          fetchedExistingTags,
           fetchingExistingTags: false
         }));
       });
@@ -444,10 +450,12 @@ class TagsRaw extends _BaseInput.BaseInput {
       circular: true,
       blank: true,
       onClick: this.tagRemoveClick(tag),
-      className: "ml-1 transform-rotate--45 line-height--0 p-0",
+      className: "tags-input__tag__removeButton p-0",
       Component: TagButtonComponent,
       preventsDefault: false
-    }), /*#__PURE__*/React.createElement(PlusIcon, null)));
+    }), /*#__PURE__*/React.createElement(PlusIcon, {
+      className: "transform-rotate--45"
+    })));
     const className = (0, _classnames.default)('tags-input__tag', {
       'tags-input__tag-chip': this.props.showChips
     });
@@ -459,7 +467,7 @@ class TagsRaw extends _BaseInput.BaseInput {
         key: index
       }, body);
     }
-    return /*#__PURE__*/React.createElement("div", {
+    return /*#__PURE__*/React.createElement("span", {
       onClick: this.tagClick(tag),
       className: className,
       key: index