@geneui/components 2.11.2 → 2.12.2

package/{ValidatableDatePicker.js → ValidatableDatePicker/index.js}

@@ -1,35 +1,37 @@
-import { _ as _extends } from './_rollupPluginBabelHelpers-e8fb2e5c.js';
+import { _ as _extends } from '../_rollupPluginBabelHelpers-e8fb2e5c.js';
 import React__default, { forwardRef, useCallback, useState, useEffect } from 'react';
-import { p as propTypesExports } from './index-e0af0caf.js';
-import { n as noop } from './index-ac59cb10.js';
-import { u as useMount } from './useMount-6fef51a5.js';
-import './configs-91c86664.js';
-import { D as DatePickerInput } from './index-0199942c.js';
-import { d as dayjsWithPlugins, v as validateDatePickerField } from './dateValidation-67caec66.js';
-import { c as checkTimeValidation } from './checkTimeValidation-e56771be.js';
-import { g as getBrowserDateFormat } from './localization-4ba17032.js';
+import PropTypes from 'prop-types';
+import { n as noop } from '../index-a0e4e333.js';
+import useMount from '../hooks/useMount.js';
+import '../configs-fed6ac34.js';
+import DatePickerInput from '../DatePickerInput/index.js';
+import { d as dayjsWithPlugins, v as validateDatePickerField } from '../dateValidation-67caec66.js';
+import { c as checkTimeValidation } from '../checkTimeValidation-e56771be.js';
+import { g as getBrowserDateFormat } from '../localization-4ba17032.js';
 import 'react-dom';
-import './globalStyling-9c60a159.js';
-import './style-inject.es-746bb8ed.js';
-import './useKeyDown-38102ae7.js';
-import './useDeviceType-dd51db38.js';
-import './useWindowSize-80369d76.js';
-import './index-6ff23041.js';
-import './index-5e96cb4d.js';
-import './_commonjsHelpers-24198af3.js';
-import './index-122432cd.js';
-import './useClickOutside-5183e396.js';
-import './Scrollbar.js';
-import './GeneUIProvider.js';
-import './debounce-4419bc2f.js';
-import './DatePicker.js';
-import './guid-8ddf77b3.js';
-import './Button.js';
-import './Icon.js';
-import './ExtendedInput.js';
-import './index-897d8240.js';
-import './Tooltip.js';
-import './Popover-f4d1cac0.js';
+import '../_commonjsHelpers-24198af3.js';
+import '../style-inject.es-746bb8ed.js';
+import '../index-6ff23041.js';
+import '../hooks/useClick.js';
+import '../hooks/useKeyDown.js';
+import '../hooks/useDeviceType.js';
+import '../hooks/useWindowSize.js';
+import '../index-462461c0.js';
+import '../index-122432cd.js';
+import '../hooks/useClickOutside.js';
+import '../Scrollbar/index.js';
+import '../GeneUIProvider/index.js';
+import '../debounce-4419bc2f.js';
+import '../ExtendedInput/index.js';
+import '../hooks/useEllipsisDetection.js';
+import '../Icon/index.js';
+import '../SuggestionList/index.js';
+import '../config-0ca92874.js';
+import '../Tooltip/index.js';
+import '../Popover-f4d1cac0.js';
+import '../DatePicker/index.js';
+import '../guid-8ddf77b3.js';
+import '../Button/index.js';
 
 const nonLettersRegex = /[\W_]+/g;
 const hourFormats = ['H', 'HH', 'h', 'hh'];
@@ -257,51 +259,51 @@ DatePicker.propTypes = {
   /**
    * Value for date picker
    */
-  value: propTypesExports.oneOfType([propTypesExports.object, propTypesExports.arrayOf(propTypesExports.object)]),
+  value: PropTypes.oneOfType([PropTypes.object, PropTypes.arrayOf(PropTypes.object)]),
   /**
    * Callback fires when date changes
    */
-  onChange: propTypesExports.func,
+  onChange: PropTypes.func,
   /**
    * Callback fires when input blur
    */
-  onBlur: propTypesExports.func,
+  onBlur: PropTypes.func,
   /**
    * Define is field required or no.
    */
-  required: propTypesExports.bool,
+  required: PropTypes.bool,
   /**
    * Define is range picker with time or no
    */
-  withTime: propTypesExports.bool,
+  withTime: PropTypes.bool,
   /**
    * Define is single date picker or with range
    */
-  withRange: propTypesExports.bool,
+  withRange: PropTypes.bool,
   /**
    * Callback fires when field validation state changes
    */
-  isFieldValid: propTypesExports.func,
+  isFieldValid: PropTypes.func,
   /**
    * Additional validation state
    */
-  isValid: propTypesExports.bool,
+  isValid: PropTypes.bool,
   /**
    * Minimum date value
    */
-  min: propTypesExports.string,
+  min: PropTypes.string,
   /**
    * Maximum date value
    */
-  max: propTypesExports.string,
+  max: PropTypes.string,
   /**
    * Date format
    */
-  format: propTypesExports.string,
+  format: PropTypes.string,
   /**
    * Allow validation without onBlur, validate field when mount
    */
-  forceAllowValidation: propTypesExports.bool
+  forceAllowValidation: PropTypes.bool
 };
 DatePicker.defaultProps = {
   isValid: true,

package/ValidatableDropdown/index.js

@@ -0,0 +1,139 @@
+import { _ as _extends } from '../_rollupPluginBabelHelpers-e8fb2e5c.js';
+import React__default, { forwardRef, useState, useCallback, useEffect } from 'react';
+import PropTypes from 'prop-types';
+import useMount from '../hooks/useMount.js';
+import '../configs-fed6ac34.js';
+import { n as noop } from '../index-a0e4e333.js';
+import { D as Dropdown } from '../index-34e47647.js';
+import '../dateValidation-67caec66.js';
+import '../_commonjsHelpers-24198af3.js';
+import 'react-dom';
+import '../objectWithoutPropertiesLoose-d8a4a68c.js';
+import '../react-lifecycles-compat.es-6e1f3768.js';
+import '../clsx.m-2bb6df4b.js';
+import '../index-6ff23041.js';
+import '../hooks/useClick.js';
+import '../hooks/useKeyDown.js';
+import '../hooks/useDeviceType.js';
+import '../hooks/useWindowSize.js';
+import '../hooks/useClickOutside.js';
+import '../hooks/useUpdatableRef.js';
+import '../hooks/useForceUpdate.js';
+import '../hooks/useEllipsisDetection.js';
+import '../BusyLoader/index.js';
+import '../Icon/index.js';
+import '../style-inject.es-746bb8ed.js';
+import '../Empty/index.js';
+import '../index-462461c0.js';
+import '../index-122432cd.js';
+import '../Scrollbar/index.js';
+import '../GeneUIProvider/index.js';
+import '../debounce-4419bc2f.js';
+import '../Tooltip/index.js';
+import '../Popover-f4d1cac0.js';
+import '../ExtendedInput/index.js';
+import '../SuggestionList/index.js';
+import '../config-0ca92874.js';
+import '../Checkbox/index.js';
+import '../checkboxRadioSwitcher-5b69d7bd.js';
+import '../guid-8ddf77b3.js';
+import '../index-2ad83e03.js';
+import '../Tag/index.js';
+
+function checkValidation(required, isValid, value) {
+  if (isValid === false) return {
+    key: 'customValidation',
+    isValid: false
+  };
+  if ((value === 'undefined' || value === null) && required) return {
+    key: 'required',
+    isValid: false
+  };
+  return {
+    key: null,
+    isValid: true
+  };
+}
+const DropdownField = /*#__PURE__*/forwardRef((props, ref) => {
+  const {
+    onChange,
+    value,
+    isValid,
+    required,
+    isFieldValid,
+    forceAllowValidation,
+    valueKey,
+    ...restProps
+  } = props;
+  const isControlled = 'value' in props && typeof value !== 'undefined';
+  const [val, setVal] = useState(value || null);
+  const [validationState, setValidationState] = useState(true);
+  const [allowValidation, setAllowValidation] = useState(false);
+  const validate = useCallback(() => checkValidation(required, isValid, val).isValid, [val, required, isValid]);
+  const handleChange = useCallback(param => {
+    const {
+      [valueKey]: value = null
+    } = param || {};
+    const validation = checkValidation(required, isValid, value);
+    setValidationState(validation.isValid);
+    setVal(value);
+    onChange(param, validation.isValid, validation.key);
+  }, [onChange, required, isValid, valueKey]);
+
+  // we use this because need to show field validation after onClose
+  const onBlur = useCallback(() => setAllowValidation(true), []);
+  const onClear = useCallback(() => {
+    const validState = checkValidation(required, isValid, null).isValid;
+    setValidationState(validState);
+  }, [required, isValid]);
+  useEffect(() => {
+    isControlled && setValidationState(validate());
+  }, [isControlled, validate]);
+  useEffect(() => {
+    setVal(value);
+  }, [value]);
+
+  // need this for handling user's `isValid` prop
+  useEffect(() => {
+    setValidationState(isValid);
+  }, [isValid]);
+
+  // call function when validation state changes
+  useEffect(() => {
+    isFieldValid(validationState);
+  }, [validationState]);
+
+  // set Allow validation true if submit button clicked
+  useEffect(() => {
+    forceAllowValidation && setAllowValidation(true);
+  }, [forceAllowValidation]);
+  useMount(() => setValidationState(validate()));
+  return /*#__PURE__*/React__default.createElement(Dropdown, _extends({
+    required: required,
+    ref: ref,
+    value: val,
+    isValid: !allowValidation || validationState,
+    onChange: handleChange,
+    onBlur: onBlur,
+    onClear: onClear,
+    valueKey: valueKey
+  }, restProps));
+});
+DropdownField.propTypes = {
+  value: PropTypes.any,
+  onChange: PropTypes.func,
+  required: PropTypes.bool,
+  readOnly: PropTypes.bool,
+  isValid: PropTypes.bool,
+  forceAllowValidation: PropTypes.bool,
+  isFieldValid: PropTypes.func
+};
+DropdownField.defaultProps = {
+  required: false,
+  readOnly: false,
+  valueKey: 'value',
+  isFieldValid: noop,
+  onChange: noop
+};
+
+export { DropdownField as default };

package/ValidatableElements/index.js

@@ -0,0 +1,65 @@
+export { default as ValidatableDropdown } from '../ValidatableDropdown/index.js';
+export { default as MultiSelectDropdownField } from '../ValidatableMultiSelectDropdown/index.js';
+export { default as ValidatableEditor } from '../Editor/index.js';
+export { default as ValidatableUploader } from '../ValidatableUploader/index.js';
+export { default as ValidatableRadio } from '../ValidatableRadio/index.js';
+export { default as ValidatableCheckbox } from '../ValidatableCheckbox/index.js';
+export { default as ValidatableSwitcher } from '../ValidatableSwitcher/index.js';
+export { default as ValidatableNumberInput } from '../ValidatableNumberInput/index.js';
+export { default as ValidatableTextInput } from '../ValidatableTextInput/index.js';
+export { default as ValidatableDatePicker } from '../ValidatableDatePicker/index.js';
+import '../_rollupPluginBabelHelpers-e8fb2e5c.js';
+import 'react';
+import 'prop-types';
+import '../hooks/useMount.js';
+import '../index-a0e4e333.js';
+import '../dateValidation-67caec66.js';
+import '../_commonjsHelpers-24198af3.js';
+import 'react-dom';
+import '../configs-fed6ac34.js';
+import '../index-34e47647.js';
+import '../objectWithoutPropertiesLoose-d8a4a68c.js';
+import '../react-lifecycles-compat.es-6e1f3768.js';
+import '../clsx.m-2bb6df4b.js';
+import '../index-6ff23041.js';
+import '../hooks/useClick.js';
+import '../hooks/useKeyDown.js';
+import '../hooks/useDeviceType.js';
+import '../hooks/useWindowSize.js';
+import '../hooks/useClickOutside.js';
+import '../hooks/useUpdatableRef.js';
+import '../hooks/useForceUpdate.js';
+import '../hooks/useEllipsisDetection.js';
+import '../BusyLoader/index.js';
+import '../Icon/index.js';
+import '../style-inject.es-746bb8ed.js';
+import '../Empty/index.js';
+import '../index-462461c0.js';
+import '../index-122432cd.js';
+import '../Scrollbar/index.js';
+import '../GeneUIProvider/index.js';
+import '../debounce-4419bc2f.js';
+import '../Tooltip/index.js';
+import '../Popover-f4d1cac0.js';
+import '../ExtendedInput/index.js';
+import '../SuggestionList/index.js';
+import '../config-0ca92874.js';
+import '../Checkbox/index.js';
+import '../checkboxRadioSwitcher-5b69d7bd.js';
+import '../guid-8ddf77b3.js';
+import '../index-2ad83e03.js';
+import '../Tag/index.js';
+import '../index-45eafea6.js';
+import '../Button/index.js';
+import '../Uploader/index.js';
+import '../Grid/index.js';
+import '../hooks/useWidth.js';
+import '../hooks/useImgDownload.js';
+import '../Image/index.js';
+import '../RadioGroup/index.js';
+import '../Radio/index.js';
+import '../Switcher/index.js';
+import '../DatePickerInput/index.js';
+import '../DatePicker/index.js';
+import '../localization-4ba17032.js';
+import '../checkTimeValidation-e56771be.js';

package/ValidatableMultiSelectDropdown/index.js

@@ -0,0 +1,150 @@
+import { _ as _extends } from '../_rollupPluginBabelHelpers-e8fb2e5c.js';
+import React__default, { forwardRef, useState, useCallback, useEffect } from 'react';
+import PropTypes from 'prop-types';
+import useMount from '../hooks/useMount.js';
+import '../configs-fed6ac34.js';
+import { n as noop } from '../index-a0e4e333.js';
+import { D as Dropdown } from '../index-34e47647.js';
+import '../dateValidation-67caec66.js';
+import '../_commonjsHelpers-24198af3.js';
+import 'react-dom';
+import '../objectWithoutPropertiesLoose-d8a4a68c.js';
+import '../react-lifecycles-compat.es-6e1f3768.js';
+import '../clsx.m-2bb6df4b.js';
+import '../index-6ff23041.js';
+import '../hooks/useClick.js';
+import '../hooks/useKeyDown.js';
+import '../hooks/useDeviceType.js';
+import '../hooks/useWindowSize.js';
+import '../hooks/useClickOutside.js';
+import '../hooks/useUpdatableRef.js';
+import '../hooks/useForceUpdate.js';
+import '../hooks/useEllipsisDetection.js';
+import '../BusyLoader/index.js';
+import '../Icon/index.js';
+import '../style-inject.es-746bb8ed.js';
+import '../Empty/index.js';
+import '../index-462461c0.js';
+import '../index-122432cd.js';
+import '../Scrollbar/index.js';
+import '../GeneUIProvider/index.js';
+import '../debounce-4419bc2f.js';
+import '../Tooltip/index.js';
+import '../Popover-f4d1cac0.js';
+import '../ExtendedInput/index.js';
+import '../SuggestionList/index.js';
+import '../config-0ca92874.js';
+import '../Checkbox/index.js';
+import '../checkboxRadioSwitcher-5b69d7bd.js';
+import '../guid-8ddf77b3.js';
+import '../index-2ad83e03.js';
+import '../Tag/index.js';
+
+function checkValidation(required, isValid, value, min, max) {
+  const length = value === null || value === void 0 ? void 0 : value.length;
+  if (isValid === false) return {
+    key: 'customValidation',
+    isValid: false
+  };
+  if (!length && required) return {
+    key: 'required',
+    isValid: false
+  };
+  if (min && length < min) return {
+    key: 'min',
+    isValid: false
+  };
+  if (max && length > max) return {
+    key: 'max',
+    isValid: false
+  };
+  return {
+    key: null,
+    isValid: true
+  };
+}
+const MultiSelectDropdownField = /*#__PURE__*/forwardRef((props, ref) => {
+  const {
+    onChange,
+    value,
+    isValid,
+    required,
+    min,
+    max,
+    isFieldValid,
+    valueKey,
+    forceAllowValidation,
+    ...restProps
+  } = props;
+  const isControlled = 'value' in props && typeof value !== 'undefined';
+  const [val, setVal] = useState(value || []);
+  const [validationState, setValidationState] = useState(true);
+  const [allowValidation, setAllowValidation] = useState(false);
+  const validate = useCallback(() => checkValidation(required, isValid, val, min, max).isValid, [required, isValid, val, min, max]);
+  const handleChange = useCallback(e => {
+    const validation = checkValidation(required, isValid, e, min, max);
+    setValidationState(validation.isValid);
+    setVal(e.map(item => item[valueKey]));
+    onChange && onChange(e, validation.isValid, validation.key);
+  }, [required, isValid, min, max, onChange, valueKey]);
+
+  // we use this because need to show field validation after onClose
+  const onBlur = useCallback(() => setAllowValidation(true), []);
+  const onClear = useCallback(() => {
+    const validState = checkValidation(required, isValid, []).isValid;
+    setValidationState(validState);
+  }, [required, isValid]);
+  useEffect(() => {
+    isControlled && setValidationState(validate());
+  }, [isControlled, validate]);
+  useEffect(() => {
+    setVal(value);
+  }, [value]);
+
+  // need this for handling user's `isValid` prop
+  useEffect(() => {
+    setValidationState(isValid);
+  }, [isValid]);
+
+  // call function when validation state changes
+  useEffect(() => {
+    isFieldValid(validationState);
+  }, [validationState]);
+
+  // set Allow validation true if submit button clicked
+  useEffect(() => {
+    forceAllowValidation && setAllowValidation(true);
+  }, [forceAllowValidation]);
+  useMount(() => setValidationState(validate()));
+  return /*#__PURE__*/React__default.createElement(Dropdown, _extends({
+    required: required,
+    ref: ref,
+    value: val,
+    isMultiSelect: true,
+    isValid: !allowValidation || validationState,
+    onChange: handleChange,
+    onBlur: onBlur,
+    valueKey: valueKey,
+    onClear: onClear
+  }, restProps));
+});
+MultiSelectDropdownField.propTypes = {
+  min: PropTypes.number,
+  max: PropTypes.number,
+  valueKey: PropTypes.string,
+  value: PropTypes.any,
+  onChange: PropTypes.func,
+  required: PropTypes.bool,
+  readOnly: PropTypes.bool,
+  isValid: PropTypes.bool,
+  forceAllowValidation: PropTypes.bool,
+  isFieldValid: PropTypes.func
+};
+MultiSelectDropdownField.defaultProps = {
+  required: false,
+  readOnly: false,
+  isFieldValid: noop,
+  valueKey: 'value'
+};
+
+export { MultiSelectDropdownField as default };

package/{ValidatableNumberInput.js → ValidatableNumberInput/index.js}

@@ -1,26 +1,27 @@
-import { _ as _extends } from './_rollupPluginBabelHelpers-e8fb2e5c.js';
+import { _ as _extends } from '../_rollupPluginBabelHelpers-e8fb2e5c.js';
 import React__default, { forwardRef, useState, useCallback, useEffect } from 'react';
-import { p as propTypesExports } from './index-e0af0caf.js';
-import { n as noop } from './index-ac59cb10.js';
-import { u as useMount } from './useMount-6fef51a5.js';
-import './configs-91c86664.js';
-import ExtendedInput from './ExtendedInput.js';
-import './dateValidation-67caec66.js';
-import './_commonjsHelpers-24198af3.js';
+import PropTypes from 'prop-types';
+import { n as noop } from '../index-a0e4e333.js';
+import useMount from '../hooks/useMount.js';
+import '../configs-fed6ac34.js';
+import ExtendedInput from '../ExtendedInput/index.js';
+import '../dateValidation-67caec66.js';
+import '../_commonjsHelpers-24198af3.js';
 import 'react-dom';
-import './index-6ff23041.js';
-import './useDeviceType-dd51db38.js';
-import './useWindowSize-80369d76.js';
-import './index-897d8240.js';
-import './useKeyDown-38102ae7.js';
-import './useClickOutside-5183e396.js';
-import './Scrollbar.js';
-import './globalStyling-9c60a159.js';
-import './style-inject.es-746bb8ed.js';
-import './Icon.js';
-import './Tooltip.js';
-import './Popover-f4d1cac0.js';
-import './GeneUIProvider.js';
+import '../index-6ff23041.js';
+import '../hooks/useDeviceType.js';
+import '../hooks/useWindowSize.js';
+import '../hooks/useEllipsisDetection.js';
+import '../Icon/index.js';
+import '../style-inject.es-746bb8ed.js';
+import '../SuggestionList/index.js';
+import '../hooks/useKeyDown.js';
+import '../hooks/useClickOutside.js';
+import '../config-0ca92874.js';
+import '../Scrollbar/index.js';
+import '../Tooltip/index.js';
+import '../Popover-f4d1cac0.js';
+import '../GeneUIProvider/index.js';
 
 const validateMin = (value, min) => value >= min;
 const validateMax = (value, max) => value <= max;
@@ -94,6 +95,13 @@ const NumberInput = /*#__PURE__*/forwardRef((props, ref) => {
 
   // we use this because need to show field validation after onBlur
   const handleBlur = useCallback(e => {
+    const {
+      value,
+      validity
+    } = e.target;
+    if (validity.badInput && !value.length) {
+      e.target.value = '';
+    }
     onBlur(e);
     setAllowValidation(true);
   }, [onBlur]);
@@ -137,51 +145,51 @@ NumberInput.propTypes = {
   /**
    * Maximum value
    */
-  min: propTypesExports.number,
+  min: PropTypes.number,
   /**
    * Minimum value
    */
-  max: propTypesExports.number,
+  max: PropTypes.number,
   /**
    * Value for number field
    */
-  value: propTypesExports.oneOfType([propTypesExports.string, propTypesExports.number]),
+  value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
   /**
    * Callback fires when field changes
    */
-  onChange: propTypesExports.func,
+  onChange: PropTypes.func,
   /**
    * Callback fires when input loose focus
    */
-  onBlur: propTypesExports.func,
+  onBlur: PropTypes.func,
   /**
    * Callback fires when field validation state changes
    */
-  isFieldValid: propTypesExports.func,
+  isFieldValid: PropTypes.func,
   /**
    * Additional validation state
    */
-  isValid: propTypesExports.bool,
+  isValid: PropTypes.bool,
   /**
    * Allow validation without onBlur, validate field when mount
    */
-  forceAllowValidation: propTypesExports.bool,
+  forceAllowValidation: PropTypes.bool,
   /**
    * Define number type
    */
-  numberType: propTypesExports.oneOf(['integer', 'float']),
+  numberType: PropTypes.oneOf(['integer', 'float']),
   /**
    * Precision minimum count
    */
-  precisionMin: propTypesExports.number,
+  precisionMin: PropTypes.number,
   /**
    * Precision maximum count
    */
-  precisionMax: propTypesExports.number,
+  precisionMax: PropTypes.number,
   /**
    * We use this props if we need to show validation of a field during onChange
    */
-  forceValidateDuringChange: propTypesExports.bool
+  forceValidateDuringChange: PropTypes.bool
 };
 NumberInput.defaultProps = {
   isValid: true,