@geneui/components 2.11.1

package/Form.js

@@ -0,0 +1,116 @@
+import 'react';
+import FormContainer from './FormContainer.js';
+export { default as FormableMultiSelectDropdown } from './FormableMultiSelectDropdown.js';
+export { default as FormableNumberInput } from './FormableNumberInput.js';
+export { default as FormableDatePicker } from './FormableDatePicker.js';
+export { default as FormableTextInput } from './FormableTextInput.js';
+export { default as FormableDropdown } from './FormableDropdown.js';
+export { default as FormableCheckbox } from './FormableCheckbox.js';
+export { default as FormableUploader } from './FormableUploader.js';
+export { default as FormableSwitcher } from './FormableSwitcher.js';
+export { default as FormableEditor } from './FormableEditor.js';
+export { default as FormableRadio } from './FormableRadio.js';
+export { F as FormableHOC } from './FormableHOC-21051057.js';
+import './_rollupPluginBabelHelpers-e8fb2e5c.js';
+import './index-e0af0caf.js';
+import './index-ac59cb10.js';
+import './dateValidation-67caec66.js';
+import './_commonjsHelpers-24198af3.js';
+import 'react-dom';
+import './index-262edd7a.js';
+import './Paper.js';
+import './globalStyling-9c60a159.js';
+import './style-inject.es-746bb8ed.js';
+import './Button.js';
+import './index-6ff23041.js';
+import './Icon.js';
+import './index-0cf65939.js';
+import './Editor.js';
+import './useMount-6fef51a5.js';
+import './useDeviceType-dd51db38.js';
+import './configs-91c86664.js';
+import './useWindowSize-80369d76.js';
+import './ValidatableUploader.js';
+import './index-d9e8a888.js';
+import './Grid.js';
+import './useWidth-9f4647f8.js';
+import './useKeyDown-38102ae7.js';
+import './BusyLoader.js';
+import './Image.js';
+import './Empty.js';
+import './Tooltip.js';
+import './Popover-f4d1cac0.js';
+import './GeneUIProvider.js';
+import './Checkbox.js';
+import './checkboxRadioSwitcher-5b69d7bd.js';
+import './guid-8ddf77b3.js';
+import './ExtendedInput.js';
+import './index-5cea9a7d.js';
+import './useClickOutside-5183e396.js';
+import './Scrollbar.js';
+import './ValidatableRadio.js';
+import './RadioGroup.js';
+import './Radio.js';
+import './ValidatableCheckbox.js';
+import './ValidatableSwitcher.js';
+import './Switcher.js';
+import './ValidatableNumberInput.js';
+import './ValidatableTextInput.js';
+import './ValidatableDatePicker.js';
+import './index-5e722d91.js';
+import './index-702bf24a.js';
+import './index-122432cd.js';
+import './debounce-4419bc2f.js';
+import './DatePicker.js';
+import './localization-4ba17032.js';
+import './checkTimeValidation-e56771be.js';
+import './useEllipsisDetection-ef536015.js';
+import './Tabs.js';
+import './Steps.js';
+import './index-a4635754.js';
+import './Portal.js';
+import './Timeline.js';
+import './Card.js';
+import './MobilePopup.js';
+import './Menu.js';
+import './Option.js';
+import './SkeletonLoader.js';
+import './KeyValue.js';
+import './configs.js';
+import './Tag.js';
+import './Alert.js';
+import './index-00fe8887.js';
+import './rangeAndSlider-20599da4.js';
+import './Slider.js';
+import './Pagination.js';
+import './Divider.js';
+import './objectWithoutPropertiesLoose-299691d8.js';
+import './clsx.m-2bb6df4b.js';
+import './index-a59530cd.js';
+import './Notification.js';
+import './Modal.js';
+import './Collapse.js';
+import './Status.js';
+import './Avatar.js';
+import './Search.js';
+import './TextLink.js';
+import './Label.js';
+import './Badge.js';
+import './Time.js';
+import './Title.js';
+import './index-b7a33c58.js';
+import './QRCode.js';
+import './Progress.js';
+import './MobileNavigation.js';
+import './Products.js';
+import './Breadcrumb.js';
+import './Section.js';
+import './ColorPicker.js';
+import './NavigationMenu.js';
+import './Textarea.js';
+import './AdvancedSearch.js';
+import './LinkButton.js';
+
+
+
+export { FormContainer as default };

package/FormContainer.js

@@ -0,0 +1,189 @@
+import { _ as _extends } from './_rollupPluginBabelHelpers-e8fb2e5c.js';
+import React__default, { useMemo, useCallback, useEffect } from 'react';
+import { p as propTypesExports } from './index-e0af0caf.js';
+import { n as noop, s as stopEvent } from './index-ac59cb10.js';
+import { F as FormProvider, u as useFormContext } from './index-262edd7a.js';
+import Paper from './Paper.js';
+import Button from './Button.js';
+import './globalStyling-9c60a159.js';
+import { s as styleInject } from './style-inject.es-746bb8ed.js';
+import './dateValidation-67caec66.js';
+import './_commonjsHelpers-24198af3.js';
+import 'react-dom';
+import './index-6ff23041.js';
+import './Icon.js';
+
+var css_248z = "[data-gene-ui-version=\"2.11.0\"] .form-buttons{margin:2rem 0 0}[data-gene-ui-version=\"2.11.0\"] .form-buttons>*+*{margin-inline-start:1rem}[data-gene-ui-version=\"2.11.0\"] form{width:100%}";
+styleInject(css_248z);
+
+const KEYBOARD_ENTER_KEY = 13;
+function Form(_ref) {
+  let {
+    children,
+    buttons,
+    className,
+    cancelText,
+    submitText,
+    onSubmit,
+    onCancel,
+    onFormChange,
+    onValidationChange,
+    submitOnEnter,
+    onKeyPress,
+    readOnly,
+    disableFooter,
+    ...restProps
+  } = _ref;
+  const {
+    fields,
+    setReadOnly,
+    setAllowValidation
+  } = useFormContext();
+  const checkFormValidation = useMemo(() => fields.every(item => item.isValid), [fields]);
+  // Comment this row, because it can be useful after
+  // const checkFormChanges = useMemo(() => fields.some(item => item.isChanged), [fields]);
+  const checkFormChanges = true;
+  const handleSubmit = useCallback(e => {
+    stopEvent(e, true);
+    setAllowValidation(true);
+    checkFormValidation && onSubmit(e);
+  }, [setAllowValidation, checkFormValidation, onSubmit]);
+  const handleCancel = useCallback(e => {
+    stopEvent(e, true);
+    onCancel(e);
+  }, [onCancel]);
+  const stopFormSubmit = useCallback(stopEvent, []);
+
+  // handle this because we need stop form default submit when user press `Enter` key,
+  // and form still invalid
+  const handleFormDefaultSubmit = useCallback(e => {
+    if (e.which === 13) {
+      checkFormValidation && submitOnEnter && handleSubmit(e);
+    } else {
+      stopEvent(e);
+    }
+    onKeyPress(e);
+  }, [checkFormValidation, handleSubmit, onKeyPress, submitOnEnter]);
+
+  /**
+   * in this cases form call this two functions `onFormChange and onValidationChange`
+   * only in that case if this two values are changed
+   * but if we want to call this function in every change, we must add some other variables in deps list
+   */
+  // No need to fire effect when `onFormChange` changes
+  useEffect(() => {
+    onFormChange(checkFormChanges, fields);
+  }, [checkFormChanges]);
+
+  // No need to fire effect when `onValidationChange` changes
+  useEffect(() => {
+    onValidationChange(checkFormValidation, fields);
+  }, [checkFormValidation]);
+  useEffect(() => {
+    setReadOnly(readOnly);
+  }, [readOnly]);
+  const onKeyDown = useCallback(e => {
+    e.keyCode === KEYBOARD_ENTER_KEY && checkFormChanges && submitOnEnter && handleSubmit(e);
+  }, [handleSubmit, checkFormChanges]);
+  return /*#__PURE__*/React__default.createElement("form", _extends({}, restProps, {
+    noValidate: true // disable native (browser) form validation
+    ,
+    className: className,
+    onSubmit: stopFormSubmit,
+    onKeyPress: handleFormDefaultSubmit,
+    onKeyDown: onKeyDown
+  }), children, !disableFooter && (buttons || /*#__PURE__*/React__default.createElement(Paper, {
+    justifyContent: "center",
+    className: "form-buttons"
+  }, /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(Button, {
+    onClick: handleCancel,
+    appearance: "outline"
+  }, cancelText), /*#__PURE__*/React__default.createElement(Button, {
+    disabled: !checkFormChanges,
+    onClick: handleSubmit
+  }, submitText)))));
+}
+function FormContainer(_ref2) {
+  let {
+    readOnly,
+    ...restProps
+  } = _ref2;
+  return /*#__PURE__*/React__default.createElement(FormProvider, {
+    value: {
+      readOnly
+    }
+  }, /*#__PURE__*/React__default.createElement(Form, _extends({}, restProps, {
+    readOnly: readOnly
+  })));
+}
+FormContainer.propTypes = {
+  /**
+   * Disables form footer with cancel and sumbit buttons
+   */
+  disableFooter: propTypesExports.bool,
+  /**
+   * Desables events on form's elements
+   */
+  readOnly: propTypesExports.bool,
+  /**
+   * Form submit will be called on ENTER press
+   */
+  submitOnEnter: propTypesExports.bool,
+  /**
+   * Render custom buttons in footer
+   */
+  buttons: propTypesExports.any,
+  /**
+   * Valid React nodes
+   */
+  children: propTypesExports.node,
+  /**
+   * Additional classname which applies to form element
+   */
+  className: propTypesExports.string,
+  /**
+   * Custom text for reject button in footer
+   */
+  cancelText: propTypesExports.string,
+  /**
+   * Custom text for submit button in footer
+   */
+  submitText: propTypesExports.string,
+  /**
+   * fires event when submit button in footer was clicked
+   * (event: Event) => void
+   */
+  onSubmit: propTypesExports.func,
+  /**
+   * Fires event when reject button in footer was clicked
+   * (event: Event) => void
+   */
+  onCancel: propTypesExports.func,
+  /**
+   * Fires when user attempts to change form's fields
+   * (changedFields: Array) => void
+   */
+  onFormChange: propTypesExports.func,
+  /**
+   * Check if every fields are valid
+   * (isValid: Boolean) => void
+   */
+  onValidationChange: propTypesExports.func,
+  /**
+   * Fires event when `ENTER` is pressed
+   * (event: Event) => void
+   */
+  onKeyPress: propTypesExports.func
+};
+FormContainer.defaultProps = {
+  cancelText: 'Cancel',
+  submitText: 'Submit',
+  submitOnEnter: true,
+  onCancel: noop,
+  onSubmit: noop,
+  onKeyPress: noop,
+  onValidationChange: noop,
+  onFormChange: noop
+};
+
+export { FormContainer as default };

package/FormableCheckbox.js

@@ -0,0 +1,27 @@
+import { F as Formable } from './FormableHOC-21051057.js';
+import CheckboxField from './ValidatableCheckbox.js';
+import './_rollupPluginBabelHelpers-e8fb2e5c.js';
+import 'react';
+import './index-ac59cb10.js';
+import './index-e0af0caf.js';
+import './dateValidation-67caec66.js';
+import './_commonjsHelpers-24198af3.js';
+import 'react-dom';
+import './useMount-6fef51a5.js';
+import './configs-91c86664.js';
+import './index-262edd7a.js';
+import './guid-8ddf77b3.js';
+import './Checkbox.js';
+import './index-6ff23041.js';
+import './Tooltip.js';
+import './Popover-f4d1cac0.js';
+import './useDeviceType-dd51db38.js';
+import './useWindowSize-80369d76.js';
+import './GeneUIProvider.js';
+import './globalStyling-9c60a159.js';
+import './style-inject.es-746bb8ed.js';
+import './checkboxRadioSwitcher-5b69d7bd.js';
+
+var FormableCheckbox = Formable(CheckboxField);
+
+export { FormableCheckbox as default };

package/FormableDatePicker.js

@@ -0,0 +1,39 @@
+import { F as Formable } from './FormableHOC-21051057.js';
+import DatePicker from './ValidatableDatePicker.js';
+import './_rollupPluginBabelHelpers-e8fb2e5c.js';
+import 'react';
+import './index-ac59cb10.js';
+import './index-e0af0caf.js';
+import './dateValidation-67caec66.js';
+import './_commonjsHelpers-24198af3.js';
+import 'react-dom';
+import './useMount-6fef51a5.js';
+import './configs-91c86664.js';
+import './index-262edd7a.js';
+import './guid-8ddf77b3.js';
+import './index-5e722d91.js';
+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-702bf24a.js';
+import './index-122432cd.js';
+import './useClickOutside-5183e396.js';
+import './Scrollbar.js';
+import './GeneUIProvider.js';
+import './debounce-4419bc2f.js';
+import './DatePicker.js';
+import './Button.js';
+import './Icon.js';
+import './ExtendedInput.js';
+import './index-5cea9a7d.js';
+import './Tooltip.js';
+import './Popover-f4d1cac0.js';
+import './localization-4ba17032.js';
+import './checkTimeValidation-e56771be.js';
+
+var FormableDatePicker = Formable(DatePicker);
+
+export { FormableDatePicker as default };

package/FormableDropdown.js

@@ -0,0 +1,105 @@
+import { F as Formable } from './FormableHOC-21051057.js';
+import { D as DropdownField } from './index-0cf65939.js';
+import './_rollupPluginBabelHelpers-e8fb2e5c.js';
+import 'react';
+import './index-ac59cb10.js';
+import './index-e0af0caf.js';
+import './dateValidation-67caec66.js';
+import './_commonjsHelpers-24198af3.js';
+import 'react-dom';
+import './useMount-6fef51a5.js';
+import './configs-91c86664.js';
+import './index-262edd7a.js';
+import './guid-8ddf77b3.js';
+import './Editor.js';
+import './index-6ff23041.js';
+import './useDeviceType-dd51db38.js';
+import './useWindowSize-80369d76.js';
+import './Button.js';
+import './Icon.js';
+import './globalStyling-9c60a159.js';
+import './style-inject.es-746bb8ed.js';
+import './ValidatableUploader.js';
+import './index-d9e8a888.js';
+import './Grid.js';
+import './useWidth-9f4647f8.js';
+import './useKeyDown-38102ae7.js';
+import './BusyLoader.js';
+import './Image.js';
+import './Empty.js';
+import './Tooltip.js';
+import './Popover-f4d1cac0.js';
+import './GeneUIProvider.js';
+import './Checkbox.js';
+import './checkboxRadioSwitcher-5b69d7bd.js';
+import './ExtendedInput.js';
+import './index-5cea9a7d.js';
+import './useClickOutside-5183e396.js';
+import './Scrollbar.js';
+import './ValidatableRadio.js';
+import './RadioGroup.js';
+import './Radio.js';
+import './ValidatableCheckbox.js';
+import './ValidatableSwitcher.js';
+import './Switcher.js';
+import './ValidatableNumberInput.js';
+import './ValidatableTextInput.js';
+import './ValidatableDatePicker.js';
+import './index-5e722d91.js';
+import './index-702bf24a.js';
+import './index-122432cd.js';
+import './debounce-4419bc2f.js';
+import './DatePicker.js';
+import './localization-4ba17032.js';
+import './checkTimeValidation-e56771be.js';
+import './useEllipsisDetection-ef536015.js';
+import './Tabs.js';
+import './Steps.js';
+import './index-a4635754.js';
+import './Portal.js';
+import './Timeline.js';
+import './Card.js';
+import './MobilePopup.js';
+import './Menu.js';
+import './Option.js';
+import './SkeletonLoader.js';
+import './KeyValue.js';
+import './configs.js';
+import './Tag.js';
+import './Alert.js';
+import './index-00fe8887.js';
+import './rangeAndSlider-20599da4.js';
+import './Slider.js';
+import './Pagination.js';
+import './Divider.js';
+import './objectWithoutPropertiesLoose-299691d8.js';
+import './clsx.m-2bb6df4b.js';
+import './index-a59530cd.js';
+import './Notification.js';
+import './Modal.js';
+import './Collapse.js';
+import './Status.js';
+import './Avatar.js';
+import './Search.js';
+import './TextLink.js';
+import './Label.js';
+import './Paper.js';
+import './Badge.js';
+import './Time.js';
+import './Title.js';
+import './index-b7a33c58.js';
+import './QRCode.js';
+import './Progress.js';
+import './MobileNavigation.js';
+import './Products.js';
+import './Breadcrumb.js';
+import './Section.js';
+import './ColorPicker.js';
+import './NavigationMenu.js';
+import './Textarea.js';
+import './AdvancedSearch.js';
+import './LinkButton.js';
+
+var FormableDropdown = Formable(DropdownField);
+
+export { FormableDropdown as default };

package/FormableEditor.js

@@ -0,0 +1,24 @@
+import { F as Formable } from './FormableHOC-21051057.js';
+import Editor from './Editor.js';
+import './_rollupPluginBabelHelpers-e8fb2e5c.js';
+import 'react';
+import './index-ac59cb10.js';
+import './index-e0af0caf.js';
+import './dateValidation-67caec66.js';
+import './_commonjsHelpers-24198af3.js';
+import 'react-dom';
+import './useMount-6fef51a5.js';
+import './configs-91c86664.js';
+import './index-262edd7a.js';
+import './guid-8ddf77b3.js';
+import './index-6ff23041.js';
+import './useDeviceType-dd51db38.js';
+import './useWindowSize-80369d76.js';
+import './Button.js';
+import './Icon.js';
+import './globalStyling-9c60a159.js';
+import './style-inject.es-746bb8ed.js';
+
+var FormableEditor = Formable(Editor);
+
+export { FormableEditor as default };

package/FormableHOC-21051057.js

@@ -0,0 +1,83 @@
+import { _ as _extends } from './_rollupPluginBabelHelpers-e8fb2e5c.js';
+import React__default, { useState, useCallback } from 'react';
+import { n as noop } from './index-ac59cb10.js';
+import { u as useMount } from './useMount-6fef51a5.js';
+import './configs-91c86664.js';
+import { u as useFormContext } from './index-262edd7a.js';
+import { g as guid } from './guid-8ddf77b3.js';
+
+function Formable(WrappedComponent) {
+  return function (props) {
+    const {
+      isFieldValid = noop,
+      name: defaultName,
+      onChange = noop,
+      value
+    } = props;
+    const [_name, setName] = useState('');
+    const {
+      fields,
+      readOnlyState,
+      allowValidation,
+      handleFieldMount,
+      handleFieldUnMount,
+      handleFieldChange,
+      handleValidationChange
+    } = useFormContext();
+
+    // this function is called every time when validation changes
+    const handleInitialState = isValid => {
+      const field = fields.find(item => item.name === _name);
+      handleValidationChange({
+        ...field,
+        _name,
+        isValid
+      });
+      isFieldValid(isValid);
+    };
+
+    // this function is called every time when value changes
+    // need to handle this because form submit follows form changes
+    const handleChange = useCallback((e, isValid, key) => {
+      // we need this check, because some fields return string not `event` object
+      const value = e && e.target ? e.target.value : e;
+      const field = fields.find(item => item.name === _name);
+      field && handleFieldChange({
+        ...field,
+        isChanged: field.defaultValue !== value
+      });
+      onChange(e, isValid, key);
+    }, [fields, handleFieldChange, _name, onChange]);
+
+    // add fields to store when field mounted
+    useMount(() => {
+      // generate local name if `name` is undefined
+      const localName = defaultName || guid();
+      // generate default value if `value` is undefined
+      const defaultValue = value || '';
+      setName(localName);
+      handleFieldMount({
+        name: localName,
+        defaultValue,
+        isValid: true,
+        isChanged: false
+      });
+      return () => handleFieldUnMount({
+        name: localName
+      });
+    });
+    return /*#__PURE__*/React__default.createElement(WrappedComponent, _extends({}, props, {
+      name: _name,
+      onChange: handleChange,
+      isFieldValid: handleInitialState,
+      forceAllowValidation: allowValidation,
+      readOnly: readOnlyState || props.readOnly
+    }));
+  };
+}
+Formable.defaultProps = {
+  onChange: noop,
+  isFieldValid: noop
+};
+
+export { Formable as F };

package/FormableMultiSelectDropdown.js

@@ -0,0 +1,105 @@
+import { F as Formable } from './FormableHOC-21051057.js';
+import { b as MultiSelectDropdownField } from './index-0cf65939.js';
+import './_rollupPluginBabelHelpers-e8fb2e5c.js';
+import 'react';
+import './index-ac59cb10.js';
+import './index-e0af0caf.js';
+import './dateValidation-67caec66.js';
+import './_commonjsHelpers-24198af3.js';
+import 'react-dom';
+import './useMount-6fef51a5.js';
+import './configs-91c86664.js';
+import './index-262edd7a.js';
+import './guid-8ddf77b3.js';
+import './Editor.js';
+import './index-6ff23041.js';
+import './useDeviceType-dd51db38.js';
+import './useWindowSize-80369d76.js';
+import './Button.js';
+import './Icon.js';
+import './globalStyling-9c60a159.js';
+import './style-inject.es-746bb8ed.js';
+import './ValidatableUploader.js';
+import './index-d9e8a888.js';
+import './Grid.js';
+import './useWidth-9f4647f8.js';
+import './useKeyDown-38102ae7.js';
+import './BusyLoader.js';
+import './Image.js';
+import './Empty.js';
+import './Tooltip.js';
+import './Popover-f4d1cac0.js';
+import './GeneUIProvider.js';
+import './Checkbox.js';
+import './checkboxRadioSwitcher-5b69d7bd.js';
+import './ExtendedInput.js';
+import './index-5cea9a7d.js';
+import './useClickOutside-5183e396.js';
+import './Scrollbar.js';
+import './ValidatableRadio.js';
+import './RadioGroup.js';
+import './Radio.js';
+import './ValidatableCheckbox.js';
+import './ValidatableSwitcher.js';
+import './Switcher.js';
+import './ValidatableNumberInput.js';
+import './ValidatableTextInput.js';
+import './ValidatableDatePicker.js';
+import './index-5e722d91.js';
+import './index-702bf24a.js';
+import './index-122432cd.js';
+import './debounce-4419bc2f.js';
+import './DatePicker.js';
+import './localization-4ba17032.js';
+import './checkTimeValidation-e56771be.js';
+import './useEllipsisDetection-ef536015.js';
+import './Tabs.js';
+import './Steps.js';
+import './index-a4635754.js';
+import './Portal.js';
+import './Timeline.js';
+import './Card.js';
+import './MobilePopup.js';
+import './Menu.js';
+import './Option.js';
+import './SkeletonLoader.js';
+import './KeyValue.js';
+import './configs.js';
+import './Tag.js';
+import './Alert.js';
+import './index-00fe8887.js';
+import './rangeAndSlider-20599da4.js';
+import './Slider.js';
+import './Pagination.js';
+import './Divider.js';
+import './objectWithoutPropertiesLoose-299691d8.js';
+import './clsx.m-2bb6df4b.js';
+import './index-a59530cd.js';
+import './Notification.js';
+import './Modal.js';
+import './Collapse.js';
+import './Status.js';
+import './Avatar.js';
+import './Search.js';
+import './TextLink.js';
+import './Label.js';
+import './Paper.js';
+import './Badge.js';
+import './Time.js';
+import './Title.js';
+import './index-b7a33c58.js';
+import './QRCode.js';
+import './Progress.js';
+import './MobileNavigation.js';
+import './Products.js';
+import './Breadcrumb.js';
+import './Section.js';
+import './ColorPicker.js';
+import './NavigationMenu.js';
+import './Textarea.js';
+import './AdvancedSearch.js';
+import './LinkButton.js';
+
+var FormableMultiSelectDropdown = Formable(MultiSelectDropdownField);
+
+export { FormableMultiSelectDropdown as default };