linear-react-components-ui 1.0.10-beta.2 → 1.0.10-beta.21

package/lib/form/index.js

@@ -22,6 +22,12 @@ Object.defineProperty(exports, "FieldNumber", {
     return _FieldNumber.default;
   }
 });
+Object.defineProperty(exports, "FieldPeriod", {
+  enumerable: true,
+  get: function get() {
+    return _FieldPeriod.default;
+  }
+});
 exports.default = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _lodash = _interopRequireDefault(require("lodash"));
@@ -29,6 +35,7 @@ var _helpers = require("./helpers");
 var _Field = _interopRequireDefault(require("./Field"));
 var _FieldNumber = _interopRequireDefault(require("./FieldNumber"));
 var _FieldArray = _interopRequireDefault(require("./FieldArray"));
+var _FieldPeriod = _interopRequireDefault(require("./FieldPeriod"));
 require("../assets/styles/form.scss");
 var _dialog = require("../dialog");
 var _withFormSecurity = require("./withFormSecurity");
@@ -61,13 +68,16 @@ var Form = function Form(_ref) {
     customClass = _ref.customClass,
     securityTitle = _ref.securityTitle,
     securityText = _ref.securityText,
+    securityData = _ref.securityData,
     onDataChange = _ref.onDataChange,
     onValidateForm = _ref.onValidateForm,
     externalFieldErrors = _ref.externalFieldErrors,
     onSubmit = _ref.onSubmit,
     skeletonize = _ref.skeletonize,
     disabled = _ref.disabled,
-    children = _ref.children;
+    children = _ref.children,
+    _ref$useInternalState = _ref.useInternalState,
+    useInternalState = _ref$useInternalState === void 0 ? false : _ref$useInternalState;
   var _useState = (0, _react.useState)(dataSource),
     _useState2 = _slicedToArray(_useState, 2),
     data = _useState2[0],
@@ -86,6 +96,7 @@ var Form = function Form(_ref) {
     setFieldErrors = _useState8[1];
   var fieldsValidators = (0, _react.useRef)({});
   var context = (0, _react.useContext)(_withFormSecurity.FormSecurityContext);
+  var usedData = useInternalState ? data : dataSource;
   var getValidatesErrorMessages = function getValidatesErrorMessages(validators, fieldValue) {
     var validatorsArray = !(validators instanceof Array) ? [validators] : validators;
     var errors = [];
@@ -97,25 +108,35 @@ var Form = function Form(_ref) {
     });
     return errors;
   };
-  var checkIsValid = function checkIsValid(value) {
-    var updateState = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
-    var dataValidate = value || data;
-    var currentFieldErrors = {};
-    _lodash.default.forEach(fieldsValidators.current, function (validators, fieldName) {
+  var getErrorMessages = function getErrorMessages(currentData, currentValidators) {
+    var dataValidate = currentData || usedData;
+    var currentFieldErrors = _extends({}, fieldErrors);
+    _lodash.default.forEach(currentValidators, function (validators, fieldName) {
       var fieldValue = _lodash.default.get(dataValidate, fieldName);
       var messages = getValidatesErrorMessages(validators, fieldValue);
-      if (messages.length > 0) {
-        currentFieldErrors = _extends({}, fieldErrors, _defineProperty({}, fieldName, messages));
-      }
+      currentFieldErrors = _extends({}, currentFieldErrors, _defineProperty({}, fieldName, messages));
     });
+    return currentFieldErrors;
+  };
+  var checkIsValid = function checkIsValid(currentData) {
+    var updateState = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
+    var currentValidators = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : null;
+    var currentFieldErrors = getErrorMessages(currentData, currentValidators || fieldsValidators.current);
     if (updateState) setFieldErrors(currentFieldErrors);
-    return _lodash.default.isEmpty(currentFieldErrors);
+    return Object.values(currentFieldErrors).every(function (value) {
+      return value.length === 0;
+    });
   };
   var onFieldChange = function onFieldChange(event) {
     var target = event.target;
-    setData(function (prevState) {
-      return (0, _helpers.changeValue)(prevState, target);
-    });
+    if (!useInternalState && onDataChange) {
+      var newData = (0, _helpers.changeValue)(dataSource, target);
+      onDataChange(newData);
+    } else {
+      setData(function (prevState) {
+        return (0, _helpers.changeValue)(prevState, target);
+      });
+    }
   };
   var onValidate = function onValidate(fieldName, fieldValue, validators) {
     if (validators) {
@@ -131,20 +152,24 @@ var Form = function Form(_ref) {
   };
   var onFormSubmit = function onFormSubmit(event) {
     if (event) event.preventDefault();
-    if (checkIsValid(data)) onSubmit(data);
+    if (checkIsValid(usedData)) onSubmit(usedData);
   };
   var onReset = function onReset() {
-    setData(JSON.parse(JSON.stringify(originalData)));
+    if (!useInternalState && onDataChange) {
+      onDataChange(JSON.parse(JSON.stringify(originalData)));
+    } else {
+      setData(JSON.parse(JSON.stringify(originalData)));
+    }
     setFieldErrors({});
   };
   var onRemoveFieldValidators = function onRemoveFieldValidators(fieldName) {
-    var newFieldsValidators = _lodash.default.omit(fieldsValidators.current, fieldName);
+    var newFieldsValidators = _lodash.default.omit(fieldsValidators, fieldName);
     fieldsValidators.current = newFieldsValidators;
   };
   var onBeforeUnload = function onBeforeUnload(e) {
     var event = e;
     event.preventDefault();
-    if (_lodash.default.isEqual(data, originalData)) {
+    if (_lodash.default.isEqual(usedData, originalData)) {
       return;
     }
     event.returnValue = true;
@@ -169,25 +194,32 @@ var Form = function Form(_ref) {
     }
     return propsForm;
   };
-  (0, _react.useEffect)(function () {
+  var updateFormState = function updateFormState() {
     if (!_lodash.default.isEmpty(context)) {
       var onChangedData = context.onChangedData;
-      if (!_lodash.default.isEqual(data, originalData)) {
+      if (securityData && !_lodash.default.isEqual(usedData, securityData)) {
         onChangedData(true);
       } else {
         onChangedData(false);
       }
     }
+    if (onDataChange) onDataChange(usedData);
 
     // TODO - Usar debounce para evitar chamada a cada letra digitada
-    if (onDataChange) onDataChange(data);
-    if (onValidateForm) onValidateForm(checkIsValid(data, false));
+    if (onValidateForm) onValidateForm(checkIsValid(usedData, true));
     if (!disabled) {
       handlerSubmit(onFormSubmit);
       if (handlerReset) handlerReset(onReset);
-      if (handlerValidates) handlerValidates(checkIsValid(data));
+      if (handlerValidates) handlerValidates(checkIsValid(usedData));
     }
-  }, [data]);
+    if (_lodash.default.isEmpty(usedData)) setOriginalData(usedData);
+  };
+  (0, _react.useEffect)(function () {
+    if (useInternalState) updateFormState();
+  }, [JSON.stringify(data), useInternalState]);
+  (0, _react.useEffect)(function () {
+    if (!useInternalState && onDataChange) updateFormState();
+  }, [JSON.stringify(dataSource), useInternalState]);
   (0, _react.useEffect)(function () {
     if (securityBeforeUnload) {
       if (context) context.setSecurityBeforeUnload(true);
@@ -198,27 +230,32 @@ var Form = function Form(_ref) {
     };
   }, [securityBeforeUnload, onBeforeUnload]);
   (0, _react.useEffect)(function () {
-    if (!disabled) {
-      if (submitOnPressEnterKey !== submitFormOnEnter || dataSource !== originalData) {
-        setData(function (prevState) {
-          return !_lodash.default.isEqual(data, dataSource) ? dataSource : prevState;
-        });
-        setOriginalData(function (prevState) {
-          return prevState || dataSource;
-        });
-        setSubmitFormOnEnter(submitOnPressEnterKey);
-      }
+    if (!disabled && submitOnPressEnterKey !== submitFormOnEnter) {
+      setSubmitFormOnEnter(submitOnPressEnterKey);
     }
-  }, [submitOnPressEnterKey, dataSource]);
+  }, [submitOnPressEnterKey]);
   var contextValues = {
     skeletonize: skeletonize,
     handlerFieldChange: onFieldChange,
     handlerFieldValidade: onValidate,
     handlerStoreValidators: function handlerStoreValidators(fieldName, fieldValidates) {
+      var oldFieldsValidators = _extends({}, fieldsValidators.current);
       fieldsValidators.current = _extends({}, fieldsValidators.current, _defineProperty({}, fieldName, fieldValidates));
+      if (onValidateForm && oldFieldsValidators && oldFieldsValidators[fieldName]) {
+        var oldValidatorsValue = Object.values(oldFieldsValidators[fieldName]);
+        var newValidatorValue = Object.values(fieldValidates);
+        var validatorsIsNotEqual = oldValidatorsValue.length !== newValidatorValue.length;
+        if (validatorsIsNotEqual) {
+          if (!useInternalState && onDataChange) {
+            onValidateForm(checkIsValid(dataSource, true, fieldsValidators.current));
+          } else {
+            onValidateForm(checkIsValid(data, true, fieldsValidators.current));
+          }
+        }
+      }
     },
     handlerRemoveValidators: onRemoveFieldValidators,
-    data: data,
+    data: useInternalState ? data : dataSource,
     fieldErrors: fieldErrors,
     externalFieldErrors: externalFieldErrors
   };

package/lib/form/types.d.ts

@@ -1,5 +1,6 @@
-import { ChangeEvent, ReactNode, CSSProperties, ComponentType, MouseEventHandler } from 'react';
+import { ChangeEvent, ComponentType, MouseEventHandler, ReactNode, CSSProperties } from 'react';
 import { AllOptions } from '../inputs/select/types.js';
+import '../@types/Align.js';
 import '../@types/DataCombo.js';
 import '../@types/PermissionAttr.js';
 import '../inputs/base/types.js';
@@ -16,7 +17,7 @@ type OnFielChangeEvent = Event & {
 type CustomKeyboardEvent = ChangeEvent<HTMLInputElement> & {
     keyCode: number;
 };
-interface IFormProps {
+type BaseFormProps = {
     dataSource: object;
     children: ReactNode;
     onSubmit: (data: object) => void;
@@ -27,14 +28,21 @@ interface IFormProps {
     submitOnPressEnterKey?: boolean;
     style?: CSSProperties;
     customClass?: string;
-    onDataChange?: (data: object) => void;
     securityBeforeUnload?: boolean;
     securityTitle?: string;
     securityText?: string;
+    securityData?: object;
     externalFieldErrors?: object;
     skeletonize?: boolean;
     disabled?: boolean;
-}
+};
+type FormProps = BaseFormProps & ({
+    useInternalState?: false;
+    onDataChange: (data: object) => void;
+} | {
+    useInternalState: true;
+    onDataChange?: (data: object) => void;
+});
 interface IFieldProps extends WithFieldProps {
     data?: object;
     dataSource?: object;
@@ -65,6 +73,9 @@ interface IFieldProps extends WithFieldProps {
     gridLayout?: string;
     allOptions?: AllOptions;
     searchNotFoundText?: string;
+    min?: number;
+    max?: number;
+    autoFocus?: boolean;
 }
 interface CustomEvent {
     target: {
@@ -128,7 +139,7 @@ interface FormContextProps {
     skeletonize?: boolean;
     handlerFieldChange: (event: OnFielChangeEvent) => void;
     handlerFieldValidade: (name: string, value: string, validatorsArray: Validator[] | Validator) => void;
-    handlerStoreValidators: (fieldName: string, fieldValidates: object) => void;
+    handlerStoreValidators: (fieldName: string, fieldValidates: Validator) => void;
     handlerRemoveValidators: (fieldName: string) => void;
     data: object;
     fieldErrors: object;
@@ -141,6 +152,7 @@ interface WithFieldProps {
     validators?: Validator | Validator[] | PeriodValidator | PeriodValidator[];
 }
 interface IWithFieldContext {
+    validatorFromComponent: Validator | Validator[] | undefined;
     handlerSetValidatorFromComponent: (validator: Validator | Validator[]) => void;
 }
 interface IWithFormSecurity {
@@ -166,6 +178,7 @@ interface IEventParams {
     handlerFieldValidade?: (name: string, value: string, validatorsArray: Validator[] | Validator) => void;
     handlerFieldChange?: (event: ChangeEvent<HTMLInputElement> | CustomKeyboardEvent) => void;
     validatorFromComponent?: Validator | Validator[];
+    handleShowValidateMessages: (value: boolean) => void;
 }
 interface IGetErrorMessagesParams {
     name: string;
@@ -177,5 +190,11 @@ interface IGetErrorMessagesParams {
     };
     externalMessagesErrors?: string[];
 }
+type FieldErrors = {
+    [name: string]: string[];
+};
+type FieldValidator = {
+    [name: string]: Validator | Validator[];
+};
 
-export { CustomEvent, CustomKeyboardEvent, FormContextProps, IEventParams, IFieldArrayProps, IFieldPeriodProps, IFieldProps, IFormProps, IFormSecurityContext, IGetErrorMessagesParams, IWithFieldContext, IWithFormSecurity, OnFielChangeEvent, PeriodChangeEvent, PeriodValidator, Validator, WithFieldProps };
+export { CustomEvent, CustomKeyboardEvent, FieldErrors, FieldValidator, FormContextProps, FormProps, IEventParams, IFieldArrayProps, IFieldPeriodProps, IFieldProps, IFormSecurityContext, IGetErrorMessagesParams, IWithFieldContext, IWithFormSecurity, OnFielChangeEvent, PeriodChangeEvent, PeriodValidator, Validator, WithFieldProps };

package/lib/form/withFieldHOC.d.ts

@@ -1,6 +1,7 @@
 import React__default from 'react';
 import { WithFieldProps } from './types.js';
 import '../inputs/select/types.js';
+import '../@types/Align.js';
 import '../@types/DataCombo.js';
 import '../@types/PermissionAttr.js';
 import '../inputs/base/types.js';

package/lib/form/withFieldHOC.js

@@ -40,6 +40,7 @@ var withFieldHOC = function withFieldHOC(WrappedComponent) {
       updateValidators();
     }, [validators]);
     var contextValues = {
+      validatorFromComponent: validatorFromComponent,
       handlerSetValidatorFromComponent: function handlerSetValidatorFromComponent(validator) {
         setValidatorFromComponent(validator);
       }

package/lib/form/withFormSecurity.d.ts

@@ -1,6 +1,7 @@
 import React__default from 'react';
 import { IFormSecurityContext, IWithFormSecurity } from './types.js';
 import '../inputs/select/types.js';
+import '../@types/Align.js';
 import '../@types/DataCombo.js';
 import '../@types/PermissionAttr.js';
 import '../inputs/base/types.js';

package/lib/form/withFormSecurity.js

@@ -48,7 +48,8 @@ var withFormSecurity = function withFormSecurity(WrappedComponent) {
       showQuestion: showQuestion,
       onConfirmClick: onConfirmClick,
       onUnconfirmClick: onUnconfirmClick,
-      setSecurityBeforeUnload: setSecurityBeforeUnload
+      setSecurityBeforeUnload: setSecurityBeforeUnload,
+      securityBeforeUnload: securityBeforeUnload.current
     };
     return /*#__PURE__*/_react.default.createElement(FormSecurityContext.Provider, {
       value: contextValues

package/lib/gridlayout/gridLayout.spec.js

@@ -0,0 +1,169 @@
+"use strict";
+
+function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
+
+var _react = _interopRequireDefault(require("react"));
+
+var _react2 = require("@testing-library/react");
+
+require("@testing-library/jest-dom/extend-expect");
+
+var _ = _interopRequireWildcard(require("."));
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(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; }
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+var gridLayout = function gridLayout(propsRow, propsCol) {
+  return /*#__PURE__*/_react.default.createElement(_.GridRow, _extends({
+    customClass: "mock-gridRow",
+    style: {
+      backgroundColor: 'red'
+    }
+  }, propsRow), /*#__PURE__*/_react.default.createElement(_.default, _extends({
+    customClass: "mock-gridCol",
+    style: {
+      backgroundColor: 'blue'
+    }
+  }, propsCol), "Grid Layout"));
+};
+
+describe('GridLayout', function () {
+  it('should render correctly', function () {
+    var _render = (0, _react2.render)(gridLayout()),
+        container = _render.container;
+
+    expect(container.firstChild).toBeTruthy();
+  });
+  describe('GridRow', function () {
+    it('should apply custom class', function () {
+      var _render2 = (0, _react2.render)(gridLayout()),
+          container = _render2.container;
+
+      expect(container.querySelector('.row')).toHaveClass('mock-gridRow');
+    });
+    it('should apply style', function () {
+      var _render3 = (0, _react2.render)(gridLayout()),
+          container = _render3.container;
+
+      expect(container.querySelector('.row')).toHaveStyle('background-color: red;');
+    });
+    it('should apply with trim', function () {
+      var _render4 = (0, _react2.render)(gridLayout({
+        withTrim: true
+      })),
+          container = _render4.container;
+
+      expect(container.querySelector('.row')).toHaveClass('-withtrim');
+    });
+    it('should apply horizontal align start', function () {
+      var _render5 = (0, _react2.render)(gridLayout({
+        horizontalAlign: 'start'
+      })),
+          container = _render5.container;
+
+      expect(container.querySelector('.row')).toHaveClass('justify-content-start');
+    });
+    it('should apply horizontal align end', function () {
+      var _render6 = (0, _react2.render)(gridLayout({
+        horizontalAlign: 'end'
+      })),
+          container = _render6.container;
+
+      expect(container.querySelector('.row')).toHaveClass('justify-content-end');
+    });
+    it('should apply horizontal align center', function () {
+      var _render7 = (0, _react2.render)(gridLayout({
+        horizontalAlign: 'center'
+      })),
+          container = _render7.container;
+
+      expect(container.querySelector('.row')).toHaveClass('justify-content-center');
+    });
+    it('should apply horizontal align around', function () {
+      var _render8 = (0, _react2.render)(gridLayout({
+        horizontalAlign: 'around'
+      })),
+          container = _render8.container;
+
+      expect(container.querySelector('.row')).toHaveClass('justify-content-around');
+    });
+    it('should apply horizontal align between', function () {
+      var _render9 = (0, _react2.render)(gridLayout({
+        horizontalAlign: 'between'
+      })),
+          container = _render9.container;
+
+      expect(container.querySelector('.row')).toHaveClass('justify-content-between');
+    });
+    it('should apply vertical align items-start', function () {
+      var _render10 = (0, _react2.render)(gridLayout({
+        verticalAlign: 'items-start'
+      })),
+          container = _render10.container;
+
+      expect(container.querySelector('.row')).toHaveClass('align-items-start');
+    });
+    it('should apply vertical align items-center', function () {
+      var _render11 = (0, _react2.render)(gridLayout({
+        verticalAlign: 'items-center'
+      })),
+          container = _render11.container;
+
+      expect(container.querySelector('.row')).toHaveClass('align-items-center');
+    });
+    it('should apply vertical align items-end', function () {
+      var _render12 = (0, _react2.render)(gridLayout({
+        verticalAlign: 'items-end'
+      })),
+          container = _render12.container;
+
+      expect(container.querySelector('.row')).toHaveClass('align-items-end');
+    });
+    it('should hide component when visible is false', function () {
+      var _render13 = (0, _react2.render)(gridLayout({
+        visible: false
+      })),
+          container = _render13.container;
+
+      expect(container.querySelector('.row')).not.toBeInTheDocument();
+    });
+  });
+  describe('GridCol', function () {
+    it('should apply custom class', function () {
+      var _render14 = (0, _react2.render)(gridLayout()),
+          container = _render14.container;
+
+      expect(container.querySelector('.grid-container')).toHaveClass('mock-gridCol');
+    });
+    it('should apply style', function () {
+      var _render15 = (0, _react2.render)(gridLayout()),
+          container = _render15.container;
+
+      expect(container.querySelector('.grid-container')).toHaveStyle('background-color: blue;');
+    });
+    it('should apply columns to grid', function () {
+      var _render16 = (0, _react2.render)(gridLayout({}, {
+        cols: '12 12 12 12'
+      })),
+          container = _render16.container;
+
+      expect(container.querySelector('.grid-container')).toHaveClass('col-xs-12');
+      expect(container.querySelector('.grid-container')).toHaveClass('col-sm-12');
+      expect(container.querySelector('.grid-container')).toHaveClass('col-md-12');
+      expect(container.querySelector('.grid-container')).toHaveClass('col-lg-12');
+    });
+    it('should hide component when visible is false', function () {
+      var _render17 = (0, _react2.render)(gridLayout({}, {
+        visible: false
+      })),
+          container = _render17.container;
+
+      expect(container.querySelector('.grid-container')).not.toBeInTheDocument();
+    });
+  });
+});

package/lib/icons/helper.d.ts

@@ -575,6 +575,10 @@ declare const _default: {
         viewbox: string;
         paths: string[];
     };
+    select2: {
+        viewbox: string;
+        paths: string[];
+    };
 };
 
 export { _default as default };

package/lib/icons/helper.js

@@ -580,6 +580,10 @@ var _default = {
   stackEmpty: {
     viewbox: '0 0 16 16',
     paths: ['M16 13v-12h-11v1.155l-2.619 0.368 0.17 1.211-2.551 0.732 3.308 11.535 10.189-2.921 0.558-0.079h1.945zM6 2h9v10h-9v-10zM5 3.070v9.93h2.543l-2.721 0.382-1.418-10.088 1.595-0.224zM3.929 14.879l-2.808-9.793 1.558-0.447 1.373 9.766 2.997-0.421-3.119 0.894z']
+  },
+  select2: {
+    viewbox: '0 0 16 16',
+    paths: ['M13.002 14.658v0l-2.16-4.329 4.278-0.74-10.119-7.589v12.649l3.158-2.978 2.16 4.329z', 'M1 10.5v-9c0-0.271 0.229-0.5 0.5-0.5h11c0.271 0 0.5 0.229 0.5 0.5v4l1 0.75v-4.75c0-0.825-0.675-1.5-1.5-1.5h-11c-0.825 0-1.5 0.675-1.5 1.5v9c0 0.825 0.675 1.5 1.5 1.5h1.5v-1h-1.5c-0.271 0-0.5-0.229-0.5-0.5z']
   }
 };
 exports.default = _default;

package/lib/icons/icons.spec.js

@@ -0,0 +1,86 @@
+"use strict";
+
+var _react = _interopRequireDefault(require("react"));
+
+var _react2 = require("@testing-library/react");
+
+require("@testing-library/jest-dom/extend-expect");
+
+var _index = _interopRequireDefault(require("./index"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+var IconMock = function IconMock(props) {
+  return /*#__PURE__*/_react.default.createElement(_index.default, _extends({
+    name: "user"
+  }, props));
+};
+
+var mockSvgStruct = {
+  viewbox: '0 0 18 18',
+  paths: ['M17.064,4.656l-2.05-2.035C14.936,2.544,14.831,2.5,14.721,2.5H3.854c-0.229,0-0.417,0.188-0.417,417v14.167c0,0.229,0.188,0.417,0.417,0.417h12.917c0.229,0,0.416-0.188,0.416-0.417V4.952C17.188,4.84,17.144,4.733,17.064,4.656M6.354,3.333h7.917V10H6.354V3.333z M16.354,16.667H4.271V3.333h1.25v7.083c0,0.229,0.188,0.417,0.417,0.417h8.75c0.229,0,0.416-0.188,0.416-0.417V3.886l1.25,1.239V16.667z M13.402,4.688v3.958c0,0.229-0.186,0.417-0.417,0.417c-0.229,0-0.417-0.188-0.417-0.417V4.688c0-0.229,0.188-0.417,0.417-0.417C13.217,4.271,13.402,4.458,13.402,4.688']
+};
+describe('Icons', function () {
+  it('should render correctly', function () {
+    var _render = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(IconMock, null)),
+        getByTestId = _render.getByTestId;
+
+    expect(getByTestId('icon')).toBeTruthy();
+  });
+  it('should change icon size', function () {
+    var _render2 = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(IconMock, {
+      size: 64
+    })),
+        getByTestId = _render2.getByTestId;
+
+    expect(getByTestId('icon')).toHaveAttribute('width', '64px');
+    expect(getByTestId('icon')).toHaveAttribute('height', '64px');
+  });
+  it('should change icon color', function () {
+    var _render3 = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(IconMock, {
+      color: "red"
+    })),
+        getByTestId = _render3.getByTestId;
+
+    expect(getByTestId('icon')).toHaveAttribute('fill', 'red');
+  });
+  it('should change pointer-events', function () {
+    var _render4 = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(IconMock, {
+      pointerEvents: "all"
+    })),
+        getByTestId = _render4.getByTestId;
+
+    expect(getByTestId('icon')).toHaveAttribute('pointer-events', 'all');
+  });
+  it('should fire click on icon', function () {
+    var mockOnClick = jest.fn();
+
+    var _render5 = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(IconMock, {
+      onClick: mockOnClick
+    })),
+        getByTestId = _render5.getByTestId;
+
+    _react2.fireEvent.click(getByTestId('icon'));
+
+    expect(mockOnClick).toHaveBeenCalled();
+  });
+  it('should hide component when visible is false', function () {
+    var _render6 = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(IconMock, {
+      visible: false
+    })),
+        container = _render6.container;
+
+    expect(container.firstChild).not.toBeInTheDocument();
+  });
+  it('should render icon when use svgStruct', function () {
+    var _render7 = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_index.default, {
+      svgStruct: mockSvgStruct
+    })),
+        getByTestId = _render7.getByTestId;
+
+    expect(getByTestId('icon')).toHaveAttribute('viewBox', mockSvgStruct.viewbox);
+    expect(getByTestId('icon-path')).toHaveAttribute('d', mockSvgStruct.paths[0]);
+  });
+});

package/lib/icons/index.d.ts

@@ -2,6 +2,8 @@ import { IIconProps } from './types.js';
 import 'react';
 import '../@types/PointerEvents.js';
 import '../@types/SizePixels.js';
+import '../@types/Icon.js';
+import './helper.js';
 
 declare const Icon: ({ name, onClick, svgStruct, size, style, visible, disabled, customClass, color, pointerEvents, }: IIconProps) => JSX.Element | null;
 

package/lib/icons/types.d.ts

@@ -1,6 +1,8 @@
 import { CSSProperties } from 'react';
 import { PointerEvents } from '../@types/PointerEvents.js';
 import { SizePixels } from '../@types/SizePixels.js';
+import { IconNames } from '../@types/Icon.js';
+import './helper.js';
 
 type ListIconType = {
     [name: string]: {
@@ -16,7 +18,7 @@ interface IIconProps {
     visible?: boolean;
     disabled?: boolean;
     pointerEvents?: PointerEvents;
-    name?: string;
+    name?: IconNames;
     viewBox?: string;
     svgStruct?: {
         viewbox: string;

package/lib/index.d.ts

@@ -7,10 +7,12 @@ export { default as List } from './list/index.js';
 export { default as Radio } from './radio/index.js';
 export { default as Tab } from './tabs/index.js';
 export { default as Dialog } from './dialog/base/index.js';
-import './types-90c43ae1.js';
+import './types-c1e2d0c9.js';
 import 'react';
 import './@types/PermissionAttr.js';
 import './internals/colorStyles.js';
+import './@types/Icon.js';
+import './icons/helper.js';
 import './toolbar/ToolBarGroup.js';
 import './toolbar/types.js';
 import './@types/ButtonTypes.js';
@@ -33,3 +35,4 @@ import './radio/types.js';
 import './tabs/Panel.js';
 import './tabs/types.js';
 import './dialog/types.js';
+import './@types/Align.js';

package/lib/inputs/base/InputTextBase.d.ts

@@ -1,5 +1,6 @@
 import { IBaseProps } from './types.js';
 import 'react';
+import '../../@types/Align.js';
 import '../../@types/Period.js';
 import '../../@types/PermissionAttr.js';