diginet-core-ui 1.3.42 → 1.3.43

package/components/tab/tab-header.js

@@ -7,7 +7,7 @@ import PropTypes from 'prop-types';
 import { color as colors } from '../../styles/colors';
 import TabContext from './context';
 import ButtonIcon from '../button/icon';
-import { borderBox, displayNone, flexCol, flexRow, justifyCenter, overflowHidden, positionRelative, whiteSpaceNoWrap } from '../../styles/general';
+import { borderBox, displayNone, flexCol, flexRow, justifyCenter, overflowHidden, parseWidthHeight, positionRelative, whiteSpaceNoWrap } from '../../styles/general';
 const {
   line: {
     tab
@@ -33,6 +33,13 @@ const TabHeader = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   let showScrollLeftButton = !isVertical && scrollLeft > 0;
   let showScrollRightButton = !isVertical && (ref === null || ref === void 0 ? void 0 : (_ref$current = ref.current) === null || _ref$current === void 0 ? void 0 : _ref$current.offsetWidth) + scrollLeft < (ref === null || ref === void 0 ? void 0 : (_ref$current2 = ref.current) === null || _ref$current2 === void 0 ? void 0 : _ref$current2.scrollWidth);
 
+  const _ContainerCSS = ContainerCSS(centered, isVertical);
+
+  const _TabHeaderCSS = TabHeaderCSS(isVertical);
+
+  const scrollLeftButtonCSS = scrollButtonCSS(true, showScrollLeftButton, showScrollRightButton);
+  const scrollRightButtonCSS = scrollButtonCSS(false, showScrollLeftButton, showScrollRightButton);
+
   const _onClickScrollButton = scrollPrevious => {
     let scrollValue = scrollPrevious ? ref.current.scrollLeft - (ref.current.offsetWidth + 30) : ref.current.scrollLeft + (ref.current.offsetWidth + 30);
     ref.current.scrollLeft = scrollValue;
@@ -49,13 +56,13 @@ const TabHeader = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     return currentRef;
   });
   return jsx("div", {
-    css: ContainerCSS(centered, isVertical),
+    css: _ContainerCSS,
     id: `DGN-control`,
     className: ['DGN-UI-Tab-Header-Container', className].join(' ').trim().replace(/\s+/g, ' '),
     style: style,
     ...props
-  }, scrollButtons && jsx(ButtonIcon, {
-    css: scrollButtonCSS(true, showScrollLeftButton, showScrollRightButton),
+  }, scrollButtons && !isVertical && jsx(ButtonIcon, {
+    css: scrollLeftButtonCSS,
     name: isVertical ? 'ArrowUp' : 'ArrowLeft',
     viewType: 'text',
     size: 'tiny',
@@ -63,7 +70,7 @@ const TabHeader = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     disabled: !showScrollLeftButton,
     onClick: () => _onClickScrollButton(true)
   }), jsx("div", {
-    css: TabHeaderCSS(isVertical),
+    css: _TabHeaderCSS,
     className: 'DGN-UI-Tab-Header',
     ref: ref,
     onScroll: e => {
@@ -73,8 +80,8 @@ const TabHeader = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     }
   }, React.Children.map(children, child => child && /*#__PURE__*/React.cloneElement(child, {
     level
-  }))), scrollButtons && jsx(ButtonIcon, {
-    css: scrollButtonCSS(false, showScrollLeftButton, showScrollRightButton),
+  }))), scrollButtons && !isVertical && jsx(ButtonIcon, {
+    css: scrollRightButtonCSS,
     name: isVertical ? 'ArrowDown' : 'ArrowRight',
     viewType: 'text',
     size: 'tiny',
@@ -85,43 +92,39 @@ const TabHeader = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
 }));
 
 const ContainerCSS = (centered, isVertical) => css`
-    ${flexRow}
-    ${overflowHidden}
-    ${positionRelative}
-    ${borderBox}
-    ${centered && justifyCenter}
-    height: auto;
-    min-height: 2.5rem;
+    ${flexRow};
+    ${overflowHidden};
+    ${positionRelative};
+    ${borderBox};
+    ${centered && justifyCenter};
     flex-direction: ${isVertical ? 'column' : 'row'};
     max-width: ${isVertical ? 'max-content' : '100%'};
+    height: auto;
     width: 100%;
     padding: 0;
     ${isVertical ? `border-right: solid 1px ${tab}` : `border-bottom: solid 1px ${tab}`};
 `;
 
 const TabHeaderCSS = isVertical => isVertical ? css`
-              ${flexCol}
-              padding: 0 3px 0 0;
+              ${flexCol};
           ` : css`
-              ${flexRow}
-              ${positionRelative}
-			${whiteSpaceNoWrap}
-			margin: 0;
-              list-style: none;
+              ${flexRow};
+              ${positionRelative};
+              ${whiteSpaceNoWrap};
+              margin: 0;
               overflow-x: auto;
               scroll-behavior: smooth;
               scroll-snap-type: x mandatory;
               scroll-padding: 50%;
               transition: 0.3s ease-in-out 0.3s;
               &::-webkit-scrollbar {
-                  ${displayNone}
+                  ${displayNone};
               }
           `;
 
 const scrollButtonCSS = (scrollPrevious, showScrollLeftButton, showScrollRightButton) => css`
+    ${parseWidthHeight(24, 24)};
     overflow: initial;
-    width: 24px;
-    height: 24px;
     align-self: center;
     margin: ${scrollPrevious ? '0 8px 0 0' : '0 0 0 8px'};
     opacity: ${scrollPrevious && showScrollLeftButton || !scrollPrevious && showScrollRightButton ? '1' : '0'};
@@ -139,26 +142,26 @@ TabHeader.defaultProps = {
   centered: false
 };
 TabHeader.propTypes = {
-  /** element to display in Tabs (like text) */
+  /** Element to display in Tab header. */
   children: PropTypes.array,
 
-  /** class for component */
+  /** Class for component. */
   className: PropTypes.string,
 
-  /** style inline of component */
+  /** Style inline of component. */
   style: PropTypes.object,
 
-  /** show scroll buttons if true */
+  /** If true, show scroll buttons. */
   scrollButtons: PropTypes.bool,
 
-  /** If true, the tabs are centered */
+  /** If true, the tabs are centered. */
   centered: PropTypes.bool,
 
-  /** any props else */
+  /** Any props else. */
   props: PropTypes.any,
 
   /**
-   * ref methods
+   * Ref methods.
    */
   reference: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({
     current: PropTypes.instanceOf(Element)

package/components/tab/tab-panel.js

@@ -28,6 +28,9 @@ const TabPanel = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   const ref = useRef(null);
   const isVertical = direction === 'vertical';
   const isActive = index === tabIndexState;
+
+  const _TabPanelCSS = TabPanelCSS(isVertical, isActive);
+
   useEffect(() => {
     if (isRendered) return;else if (index === tabIndexState) setIsRendered(true);
   }, [tabIndexState]);
@@ -41,7 +44,7 @@ const TabPanel = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     return currentRef;
   });
   return jsx("div", {
-    css: TabPanelCSS(isVertical, isActive),
+    css: _TabPanelCSS,
     "aria-labelledby": `tab-${index}`,
     id: `tab-panel-${index}`,
     className: ['DGN-UI-Tab-Panel', className].join(' ').trim().replace(/\s+/g, ' '),
@@ -53,10 +56,10 @@ const TabPanel = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
 }));
 
 const TabPanelCSS = (isVertical, isActive) => css`
-    ${flexCol}
-    ${borderBox}
-    ${positionRelative}
-    ${isActive ? flexCol : displayNone}
+    ${flexCol};
+    ${borderBox};
+    ${positionRelative};
+    ${isActive ? flexCol : displayNone};
     color: ${main};
     height: ${isVertical ? '300px' : '100%'};
     padding: 0px ${isVertical ? '12px' : '10'};
@@ -69,26 +72,26 @@ TabPanel.defaultProps = {
   lazyLoading: false
 };
 TabPanel.propTypes = {
-  /** element to display in Tabs (like text) */
+  /** The content of the component. */
   children: PropTypes.node,
 
-  /** index received in position of TabHeaderButton */
+  /** Index received in position of TabHeaderButton. */
   index: PropTypes.number,
 
-  /** class for component */
+  /** Class for component. */
   className: PropTypes.string,
 
-  /** style inline of component */
+  /** Style inline of component. */
   style: PropTypes.object,
 
-  /** lazy loading mode */
+  /** Lazy loading mode. */
   lazyLoading: PropTypes.bool,
 
-  /** any props else */
+  /** Any props else. */
   props: PropTypes.any,
 
   /**
-   * ref methods
+   * Ref methods.
    */
   reference: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({
     current: PropTypes.instanceOf(Element)

package/components/tab/tab.js

@@ -9,7 +9,7 @@ import { color as colors } from '../../styles/colors';
 import Ripple from '../button/ripple-effect';
 import Typography from '../typography';
 import TabContext from './context';
-import { alignCenter, backgroundTransparent, borderBox, breakWord, cursorPointer, flexRow, justifyCenter, outlineNone, overflowHidden, pointerEventsNone, positionAbsolute, positionRelative, whiteSpaceNoWrap } from '../../styles/general';
+import { alignCenter, backgroundTransparent, borderBox, boxShadowNone, breakWord, cursorDefault, cursorPointer, flexRow, justifyCenter, justifyStart, outlineNone, overflowHidden, pointerEventsNone, positionAbsolute, positionRelative, textCenter, whiteSpaceNoWrap } from '../../styles/general';
 const {
   system: {
     active,
@@ -34,9 +34,15 @@ const TabItem = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
 }, reference) => {
   const {
     tabIndexState,
-    setTabIndexState
+    setTabIndexState,
+    direction
   } = useContext(TabContext);
   const ref = useRef(null);
+  const isVertical = direction === 'vertical';
+
+  const _TabButtonCSS = TabButtonCSS(color, isVertical);
+
+  const _IndicatorCSS = IndicatorCSS(isVertical);
 
   const _onClick = event => {
     if (disabled) return;
@@ -81,54 +87,49 @@ const TabItem = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       className: 'end-icon'
     }, ' ', node, ' ');
   }, [endIcon]);
-  return jsx("button", {
-    css: TabButtonCSS(color),
-    className: ['DGN-UI-Tab-Item', index === tabIndexState && !disabled ? 'selected' : '', className].join(' ').trim().replace(/\s+/g, ' '),
+  return jsx("div", {
+    css: _TabButtonCSS,
+    className: ['DGN-UI-Tab-Item', disabled ? 'disabled' : '', index === tabIndexState && !disabled ? 'selected' : '', className].join(' ').trim().replace(/\s+/g, ' '),
     style: style,
-    disabled: disabled,
     onClick: _onClick,
     ref: ref,
-    index: index,
     ...props
   }, startIcon && StartIcon, jsx(Typography, {
     type: level,
     color: 'inherit'
   }, label), children, endIcon && EndIcon, jsx(Ripple, null), jsx("span", {
-    css: IndicatorCSS,
+    css: _IndicatorCSS,
     className: 'Indicator'
   }));
 }));
 
-const TabButtonCSS = color => css`
-    ${flexRow}
-    ${overflowHidden}
-    ${alignCenter}
-    ${justifyCenter}
-    ${borderBox}
-    ${cursorPointer}
-    ${positionRelative}
-    ${outlineNone}
-    ${breakWord}
-    ${whiteSpaceNoWrap}
+const TabButtonCSS = (color, isVertical) => css`
+    ${flexRow};
+    ${overflowHidden};
+    ${alignCenter};
+    ${isVertical ? justifyStart : justifyCenter};
+    ${borderBox};
+    ${cursorPointer};
+    ${positionRelative};
+    ${outlineNone};
+    ${breakWord};
+    ${whiteSpaceNoWrap};
+    ${boxShadowNone};
+    ${!isVertical && textCenter};
     flex: 0 0 auto;
     background-color: ${white};
     border: 0;
-    box-shadow: none;
-    color: ${color || rest};
+    color: ${colors[color] || color || rest};
     max-width: 320px;
-    min-width: 80px;
-    padding: 10px 16px;
+    min-width: ${isVertical ? '264px' : '80px'};
+    padding: ${isVertical ? '14px 16px' : '10px 16px'};
     pointer-events: auto;
-    text-decoration: none;
-    text-rendering: auto;
     transition: all 0.2s ease-in-out, background-color 0.2s ease-in-out;
-    vertical-align: middle;
-    scroll-snap-align: auto;
-    :disabled {
-        ${pointerEventsNone}
-        ${backgroundTransparent}
-    color: ${systemDisabled};
-        cursor: default;
+    &.disabled {
+        ${pointerEventsNone};
+        ${backgroundTransparent};
+        ${cursorDefault};
+        color: ${systemDisabled};
     }
     :hover,
     :focus:not(.selected):not(:disabled) {
@@ -136,7 +137,7 @@ const TabButtonCSS = color => css`
         color: ${rest};
         .Indicator {
             background-color: ${rest};
-            transform: scaleX(1);
+            transform: scale(1);
         }
     }
     &.selected {
@@ -144,26 +145,28 @@ const TabButtonCSS = color => css`
         color: ${active};
         .Indicator {
             background-color: ${active};
-            transform: scaleX(1);
+            transform: scale(1);
         }
     }
 `;
 
-const IndicatorCSS = css`
-    ${positionAbsolute}
-    height: 4px;
-    width: 100%;
+const IndicatorCSS = isVertical => css`
+    ${positionAbsolute};
+    height: ${isVertical ? '100%' : '4px'};
+    width: ${isVertical ? '4px' : '100%'};
     bottom: 0;
-    transform: scaleX(0);
+    left: 0;
+    transform: ${isVertical ? 'scaleY(0)' : 'scaleX(0)'};
     transition: transform 0.2s ease-in-out;
     border-radius: 1px;
 `;
+
 const ButtonIconCSS = css`
-    ${flexRow}
-    ${alignCenter}
-    ${justifyCenter}
-    ${positionRelative}
-    ${borderBox}
+    ${flexRow};
+    ${alignCenter};
+    ${justifyCenter};
+    ${positionRelative};
+    ${borderBox};
     max-height: 24px;
     max-width: 24px;
     margin-right: 4px;
@@ -179,42 +182,41 @@ TabItem.defaultProps = {
   style: {}
 };
 TabItem.propTypes = {
-  /** color for Tabs */
+  /** Color for Tabs. */
   color: PropTypes.string,
 
-  /** prevent all event if true */
+  /** If true, the component is disabled. */
   disabled: PropTypes.bool,
 
-  /** object passed to add effects and to change location icons */
-  iconStyle: PropTypes.object,
-
-  /** index received in position of TabHeaderButton */
+  /** Index received in position of TabHeaderButton. */
   index: PropTypes.number,
 
-  /** data string, if any */
+  /** Data string, if any. */
   label: PropTypes.string,
 
-  /** element to display in Tabs (like text) */
+  /** Element to display in Tabs (like label). */
   children: PropTypes.node,
 
-  /** icon to the left of the button */
+  /** Icon to the left of the button. */
   startIcon: PropTypes.node,
 
-  /** icon to the right of the button */
+  /** Icon to the right of the button. */
   endIcon: PropTypes.node,
+
+  /** Callback fired when a "click" event is detected. */
   onClick: PropTypes.func,
 
-  /** class for component */
+  /** Class for component. */
   className: PropTypes.string,
 
-  /** style inline of component */
+  /** Style inline of component. */
   style: PropTypes.object,
 
-  /** any props else */
+  /** Any props else. */
   props: PropTypes.any,
 
   /**
-   * ref methods
+   * Ref methods.
    */
   reference: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({
     current: PropTypes.instanceOf(Element)

package/icons/effect.js

@@ -96,8 +96,8 @@ Icon.propTypes = {
   /** name of icon in icons store */
   name: PropTypes.string.isRequired,
 
-  /** color of icon<br />
-   * default: #7F828E
+  /** color of icon<br />
+   * default: #7F828E
    */
   color: PropTypes.string,
 
@@ -119,19 +119,19 @@ Icon.propTypes = {
   /** have view box if true */
   onClick: PropTypes.func,
 
-  /**
-   * ref methods
-   *
-   * * option(): Gets all UI component properties
-   *  * Returns value - object
-   * * option(optionName): Gets the value of a single property
-   *  * @param {optionName} - string
-   *  * Returns value - any
-   * * option(optionName, optionValue): Updates the value of a single property
-   *  * @param {optionName} - string
-   *  * @param {optionValue} - any
-   * * option(options): Updates the values of several properties
-   *  * @param {options} - object
+  /**
+   * ref methods
+   *
+   * * option(): Gets all UI component properties
+   *  * Returns value - object
+   * * option(optionName): Gets the value of a single property
+   *  * @param {optionName} - string
+   *  * Returns value - any
+   * * option(optionName, optionValue): Updates the value of a single property
+   *  * @param {optionName} - string
+   *  * @param {optionValue} - any
+   * * option(options): Updates the values of several properties
+   *  * @param {options} - object
    */
   reference: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({
     current: PropTypes.instanceOf(Element)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "diginet-core-ui",
-  "version": "1.3.42",
+  "version": "1.3.43",
   "description": "The DigiNet core ui",
   "homepage": "https://diginet.com.vn",
   "main": "index.js",

package/readme.md

@@ -38,52 +38,68 @@ npm test
 ```
 
 ## Changelog
+## 1.3.43
+- \[Added\]: MenuIcon – MHRM00N0002, MHRM39N0018, MHRM39N0019, MHRM00N0003, MHRM00N0004 , MHRM13N0002, MHRM13N0003, MHRM29N0004
+- \[Changed\]: Checkbox - Add labelProps
+- \[Changed\]: PagingInfo - Add case listPerPage not include itemsPerPage
+- \[Changed\]: PagingInfo - Update design typeShort (Design update)
+- \[Changed\]: Tab - Update vertical tab (Design update)
+- \[Changed\]: Checkbox - Fix spacing & Update UI with New Design
+- \[Changed\]: Toggle - Add props readOnly - update UI with new design
+- \[Changed\]: Label - Reuse props of  Typography component
+- \[Changed\]: TextInput - Change logic showing error
+- \[Fixed\]: TextInput - Optimize code, manage with hook useState
+- \[Fixed\]: InputBase - Optimize code, manage with hook useState
+- \[Fixed\]: DropdownBox - Change onChangeInput, delayOnInput according to new InputBase; Fix warning className
+- \[Fixed\]: FormGroup - Fix bug css
+- \[Fixed\]: NumberInput - Fix case VIE keyboard
+
 ## 1.3.42
-\[Added\]: Icon - MoneyHistory, Calculate, ShoppingCart
+- \[Added\]: Icon - MoneyHistory, Calculate, ShoppingCart
 
 ## 1.3.41
-\[Fixed\]: DropdownBox - Fix zIndex
+- \[Fixed\]: DropdownBox - Fix zIndex
 
 ## 1.3.40
-\[Fixed\]: Slider - Fix bug can't view https file
-\[Fixed\]: Typography - Fix word-wrap css
-\[Fixed\]: Slider - Fix bug not showing pdf file with blob url
+- \[Fixed\]: Slider - Fix bug can't view https file
+- \[Fixed\]: Typography - Fix word-wrap css
+- \[Fixed\]: Slider - Fix bug not showing pdf file with blob url
 
 ## 1.3.39
-\[Added\]: MenuIcon - MHRM29N0003
+- \[Added\]: MenuIcon - MHRM29N0003
 
 ## 1.3.38
-\[Added\]: System - Phát triển chuẩn zIndex
-\[Changed\]: NumberInput - Phát triển lại component NumberInput
-\[Fixed\]: Accordion - Fix bug Accordion auto expand when render; Add prop style, id; Fix css
-\[Fixed\]: Radio - Fix spacing & Update UI with New Design
-\[Fixed\]: Toggle - Fix Toggle when label is line-break, Update style Toggle with new Design
-\[Fixed\]: Divider - Fix width, height Divider
+- \[Added\]: System - Phát triển chuẩn zIndex
+- \[Changed\]: NumberInput - Phát triển lại component NumberInput
+- \[Fixed\]: Accordion - Fix bug Accordion auto expand when render; Add prop style, id; Fix css
+- \[Fixed\]: Radio - Fix spacing & Update UI with New Design
+- \[Fixed\]: Toggle - Fix Toggle when label is line-break, Update style Toggle with new Design
+- \[Fixed\]: Divider - Fix width, height Divider
 
 ## 1.3.37
-\[Added\]: Icon – EditNote, Payment
-\[Added\]: MenuIcon - MHRM29N0002
-\[Changed\]: Alert - Add white background behind opacity background color
-\[Changed\]: Tech - Add storybook for Colors
-\[Changed\]: Attachment - Add ref method openFileDialog
-\[Changed\]: Modal - Change position of Modal from center to top; Add prop alignment
-\[Changed\]: Icon - Remove duplicate icons
-\[Changed\]: Icon – Pdf, Word, Sheet
-\[Fixed\]: Slider - Fix bug not showing pdf file
-\[Fixed\]: Chip - Fix bug show wrong startIcon
-\[Fixed\]: ModalHeader - Fix css; Add prop showClose
-\[Fixed\]: Dropdown - Change error logic; Remove pointerEvent, userSelect when disabled; Add ref method setValue; Fix css disabled; Add prop onClosed
+- \[Added\]: Icon – EditNote, Payment
+- \[Added\]: MenuIcon - MHRM29N0002
+- \[Changed\]: Alert - Add white background behind opacity background color
+- \[Changed\]: Tech - Add storybook for Colors
+- \[Changed\]: Attachment - Add ref method openFileDialog
+- \[Changed\]: Modal - Change position of Modal from center to top; Add prop alignment
+- \[Changed\]: Icon - Remove duplicate icons
+- \[Changed\]: Icon – Pdf, Word, Sheet
+- \[Fixed\]: Slider - Fix bug not showing pdf file
+- \[Fixed\]: Chip - Fix bug show wrong startIcon
+- \[Fixed\]: ModalHeader - Fix css; Add prop showClose
+- \[Fixed\]: Dropdown - Change error logic; Remove pointerEvent, userSelect when disabled; Add ref method setValue; Fix css disabled; Add prop onClosed
 
 ## 1.3.36
-\[Added\]: MenuIcon - W05F0013N0000, MHRP39N0017, MHRM09N0005, MHRM13N0001
-\[Changed\]: Attachment - Add prop domain, isStripDomain
-\[Changed\]: Tooltip - Add className
-\[Changed\]: Avatar - Add Add lazyLoading
-\[Changed\]: Popover - Change transition; Add prop direction; Add description on storybook
-\[Changed\]: TECH - Hide unused components on storybook
-\[Changed\]: Typography - Add prop showTooltip to show tooltip when content is clamped 
-\[Changed\]: DropdownBox - Add endIcon
-\[Fixed\]: Tooltip - Fix bug not show tooltip; Optimize code
+- \[Added\]: MenuIcon - W05F0013N0000, MHRP39N0017, MHRM09N0005, MHRM13N0001
+- \[Changed\]: Attachment - Add prop domain, isStripDomain
+- \[Changed\]: Tooltip - Add className
+- \[Changed\]: Avatar - Add Add lazyLoading
+- \[Changed\]: Popover - Change transition; Add prop direction; Add description on storybook
+- \[Changed\]: TECH - Hide unused components on storybook
+- \[Changed\]: Typography - Add prop showTooltip to show tooltip when content is clamped 
+- \[Changed\]: DropdownBox - Add endIcon
+- \[Fixed\]: Tooltip - Fix bug not show tooltip; Optimize code
 
 ## 1.3.35
 - \[Added\]: Icon - AssignmentTurnedIn, DGNProducts

package/utils/number.js

@@ -1,7 +1,7 @@
-/**
- *
- * @param {String} value
- * @param {String} format
+/**
+ *
+ * @param {String} value
+ * @param {String} format
  */
 export default function numberFormat(value, format) {
   let hashCount = 0;
@@ -44,8 +44,8 @@ export default function numberFormat(value, format) {
         //For case like +1 (911) 911 91 91 having pattern +1 (###) ### ## ##
 
         const index = i === ln ? value.length : value.indexOf(part, start);
-        /* in any case if we don't find the pattern part in the value assume the val as numeric string
-        This will be also in case if user has started typing, in any other case it will not be -1
+        /* in any case if we don't find the pattern part in the value assume the val as numeric string
+        This will be also in case if user has started typing, in any other case it will not be -1
         unless wrong prop value is provided */
 
         if (index === -1) {