diginet-core-ui 1.4.35 → 1.4.36-beta.1

package/components/form-control/date-picker/index.js

@@ -114,7 +114,9 @@ const DatePicker = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((inProps, referenc
     !controls ? onChangeValue(e) : focusedValue.current = e === null || e === void 0 ? void 0 : e.value;
   };
   const openPicker = () => {
-    setOpenPickerState(true);
+    if (!readOnly) {
+      setOpenPickerState(true);
+    }
   };
   const closePicker = () => {
     var _pickerRef$current;

package/components/form-control/date-range-picker/index.js

@@ -783,7 +783,7 @@ const DateRangePicker = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((inProps, ref
         ipRef.current.removeEventListener('focus', onInputFocus);
       }
     };
-  }, [onChange]);
+  }, [readOnly, onChange]);
   useEffect(() => {
     if (min) {
       let arr = [];

package/components/form-control/dropdown-box/index.js

@@ -1,13 +1,15 @@
 /** @jsxRuntime classic */
 /** @jsx jsx */
 import { css, jsx } from '@emotion/core';
-import { ButtonIcon, InputBase, Label, Popover, PopoverBody } from "../..";
+import { ButtonIcon, InputBase, Label, Popover, PopoverBody, HelperText } from "../..";
 import PropTypes from 'prop-types';
-import { Fragment, forwardRef, memo, useEffect, useImperativeHandle, useLayoutEffect, useRef, useState } from 'react';
+import { Fragment, forwardRef, memo, useEffect, useImperativeHandle, useLayoutEffect, useRef, useState, useMemo } from 'react';
 import { animation, borderColor, displayBlock, overflowHidden, parseHeight, parseMinWidth, positionRelative, scaleX } from "../../../styles/general";
 import { useTheme } from "../../../theme";
 import useThemeProps from "../../../theme/utils/useThemeProps";
 import { classNames, getProp } from "../../../utils";
+const regexBetween = /[^{}]+(?=})/g;
+const regexInclude = /{|}/g;
 const DropdownBox = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((inProps, reference) => {
   if (!reference) reference = useRef(null);
   const theme = useTheme();
@@ -22,10 +24,14 @@ const DropdownBox = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((inProps, referen
   });
   const {
     action = {},
+    allowInput,
     bgColor: bgColorProp,
     children,
     className,
     delayOnInput,
+    disabled,
+    displayExpr: displayExprProp,
+    error,
     endIcon,
     inputProps,
     inputRef,
@@ -39,10 +45,19 @@ const DropdownBox = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((inProps, referen
     placeholder,
     startIcon,
     style,
-    value,
-    viewType
+    value: valueProps,
+    valueExpr,
+    viewType,
+    helperTextProps
   } = props;
+  let displayExpr = displayExprProp;
   const bgColor = typeof bgColorProp === 'string' ? getProp(colors, bgColorProp, bgColorProp) : bgColorProp;
+  const ErrorView = useMemo(() => {
+    return error ? jsx(HelperText, {
+      ...helperTextProps,
+      disabled: disabled
+    }, error) : null;
+  }, [disabled, error, helperTextProps]);
   const ref = useRef(null);
   const dropdownBoxRef = useRef(null);
   const timer = useRef(null);
@@ -85,6 +100,28 @@ const DropdownBox = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((inProps, referen
       onClosed === null || onClosed === void 0 ? void 0 : onClosed();
     }
   };
+
+  /**
+   * Chuyển đổi data thành giá trị cần hiện thị dựa vào displayExpr [string, string object {field} - {field}], renderSelectedItem, displayExpr, valueExpr
+   * @param data {object} rowData of dataSource
+   * @return {string}
+   */
+  const displayValue = data => {
+    let text = '';
+    if (data || data === 0) {
+      displayExpr = displayExpr || valueExpr;
+      let mask = data === null || data === void 0 ? void 0 : data[displayExpr];
+      // convert {id} - {name} to {<data[id]>} - {<data[name]>}
+      if (!mask && regexBetween.test(displayExpr)) {
+        var _displayExpr;
+        mask = (_displayExpr = displayExpr) === null || _displayExpr === void 0 ? void 0 : _displayExpr.replace(regexBetween, _ => (data === null || data === void 0 ? void 0 : data[_]) || '');
+      } else if (!mask) {
+        mask = typeof data !== 'object' ? data : '';
+      }
+      text = mask.toString().replace(regexInclude, '');
+    }
+    return text;
+  };
   useLayoutEffect(() => {
     if (ref.current) {
       const {
@@ -130,15 +167,17 @@ const DropdownBox = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((inProps, referen
       onClick: openOnClickAt === 'icon' ? onTriggerDropdown : null
     }) : null;
   };
+  const value = displayValue(valueProps);
   return jsx(Fragment, null, jsx("div", {
     ref: ref,
     css: _DropdownBoxRootCSS,
-    className: classNames('DGN-UI-Dropdown-Box', className),
+    className: classNames('DGN-UI-Dropdown-Box', className, error && 'error'),
     style: style
   }, label ? jsx(Label, {
     ...labelProps
   }, label) : null, jsx(InputBase, {
     ...inputProps,
+    readOnly: !allowInput,
     style: inputStyle,
     viewType: viewType,
     inputRef: inputRef,
@@ -157,7 +196,7 @@ const DropdownBox = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((inProps, referen
     anchor: ref.current,
     width: popoverWidth,
     onClose: closeDropdownBox
-  }, jsx(PopoverBody, null, children)));
+  }, jsx(PopoverBody, null, children)), ErrorView);
 }));
 const DropdownBoxRootCSS = (bgColorProp, {
   colors
@@ -166,6 +205,17 @@ const DropdownBoxRootCSS = (bgColorProp, {
     ${positionRelative};
     ${parseMinWidth(150)};
     ${parseHeight('max-content')};
+    &.error {
+        .DGN-UI-InputBase {
+            ${borderColor(getProp(colors, 'semantic/danger'))};
+            &::before {
+                ${borderColor(getProp(colors, 'semantic/danger'))};
+            }
+            &::after {
+                ${borderColor(getProp(colors, 'semantic/danger'))};
+            }
+        }
+    }
     .DGN-UI-InputBase {
         background: ${bgColorProp ? bgColorProp === true ? getProp(colors, 'fill/disabled') : bgColorProp : 'inherit'} !important;
         ${openState && css`
@@ -183,20 +233,6 @@ const DropdownBoxCSS = ({
     margin-top: ${spacing([1])};
     ${overflowHidden};
 `;
-
-// DropdownBox.defaultProps = {
-//     className: '',
-//     label: '',
-//     placeholder: '',
-//     startIcon: 'Search',
-//     endIcon: 'ArrowDown',
-//     openOnClickAt: 'icon',
-//     viewType: 'underlined',
-//     inputProps: {},
-//     delayOnInput: 700,
-//     zIndex: zIndexCORE(1),
-// };
-
 DropdownBox.propTypes = {
   /** class for dropdown */
   className: PropTypes.string,
@@ -233,6 +269,12 @@ DropdownBox.propTypes = {
   /** the function will run after open */
   onOpened: PropTypes.func,
   /** the function will run after close */
-  onClosed: PropTypes.func
+  onClosed: PropTypes.func,
+  /** Error message displayed below the input. */
+  error: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]),
+  /** If `true`, the component is disabled. */
+  disabled: PropTypes.bool,
+  /** If `true`, the input is enable. */
+  allowInput: PropTypes.bool
 };
 export default DropdownBox;

package/components/form-control/time-picker/v2/index.js

@@ -90,10 +90,10 @@ const TimePicker = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((inProps, referenc
   const saveText = getGlobal(['save']);
   const nowText = getGlobal(['now']);
 
-  /**
-   * onChange handler with condition base on min max
-   * @param {*} e
-   * @param {String} key one of ['hour', 'minute', 'second']
+  /**
+   * onChange handler with condition base on min max
+   * @param {*} e
+   * @param {String} key one of ['hour', 'minute', 'second']
    */
   const onChangeHandler = (e, key) => {
     var _e$target;
@@ -149,10 +149,10 @@ const TimePicker = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((inProps, referenc
     }
   };
 
-  /**
-   *
-   * @param {String} key
-   * @param {Number} value
+  /**
+   *
+   * @param {String} key
+   * @param {Number} value
    */
   const setTimeAfterChange = (key, value) => {
     setTimeValue({
@@ -161,14 +161,14 @@ const TimePicker = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((inProps, referenc
     });
   };
 
-  /**
-   *
-   * Arrow up hour input onClick in the following cases:
-   * (1): Increase current hour by 1
-   * (2): If current hour is equal to max hour value, set current hour equal to min hour
-   * (3): If current hour plus 1 is equal to max hour, set current minute equal to max minute if current minute greater than max minute value
-   * (4): If current hour plus 1 is equal to max hour, set current second equal to max second if current second greater than max second value
-   * (5): Set current minute, second to min minute, second if current hour is greater than max hour value and current minute, second is greater than min minute, second value
+  /**
+   *
+   * Arrow up hour input onClick in the following cases:
+   * (1): Increase current hour by 1
+   * (2): If current hour is equal to max hour value, set current hour equal to min hour
+   * (3): If current hour plus 1 is equal to max hour, set current minute equal to max minute if current minute greater than max minute value
+   * (4): If current hour plus 1 is equal to max hour, set current second equal to max second if current second greater than max second value
+   * (5): Set current minute, second to min minute, second if current hour is greater than max hour value and current minute, second is greater than min minute, second value
    */
   const onIncreaseHour = () => {
     if (maxHour === currentHour + 1 && maxMinute < currentMinute) {
@@ -209,15 +209,15 @@ const TimePicker = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((inProps, referenc
     }
   };
 
-  /**
-   *
-   * @constant {Number} minuteStep
-   * @constant {Number} lastMinute
-   * Arrow up minute input onClick in the following cases:
-   * (1): Increase current minute by minute step (default 1).
-   * (2): If current minute plus minute step is greater than lastMinute, set current minute equal to min minute.
-   * (3): If current second greater than max second value, set current second equal to max second.
-   * (4): (3) and current second is greater than max second value, set current second equal to max second.
+  /**
+   *
+   * @constant {Number} minuteStep
+   * @constant {Number} lastMinute
+   * Arrow up minute input onClick in the following cases:
+   * (1): Increase current minute by minute step (default 1).
+   * (2): If current minute plus minute step is greater than lastMinute, set current minute equal to min minute.
+   * (3): If current second greater than max second value, set current second equal to max second.
+   * (4): (3) and current second is greater than max second value, set current second equal to max second.
    */
   const onIncreaseMinute = () => {
     if (lastMinute < currentMinute + minuteStep) {
@@ -244,11 +244,11 @@ const TimePicker = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((inProps, referenc
     }
   };
 
-  /**
-   *
-   * Arrow up second input onClick in the following cases:
-   * (1): Increase current second by 1
-   * (2): If current second plus 1 equal to max second value, set current second to min second
+  /**
+   *
+   * Arrow up second input onClick in the following cases:
+   * (1): Increase current second by 1
+   * (2): If current second plus 1 equal to max second value, set current second to min second
    */
   const onIncreaseSecond = () => {
     if (lastSecond < currentSecond + 1) {
@@ -260,15 +260,15 @@ const TimePicker = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((inProps, referenc
     }
   };
 
-  /**
-   *
-   * Arrow down hour input onClick in the following cases:
-   * (1): Decrease current hour by 1
-   * (2): If current hour is equal to min hour value, set current hour equal to max hour
-   * (3): (2) and current minute is greater than max minute value, set minute to max minute value
-   * (4): (3) and current second is greater than min second value, set second to max second value
-   * (5): If current hour minus 1 is equal to min hour and current minute greater than min minute value, set current minute equal to min minute
-   * (6): (5) and current second is greater than min second value, set current second equal to min second
+  /**
+   *
+   * Arrow down hour input onClick in the following cases:
+   * (1): Decrease current hour by 1
+   * (2): If current hour is equal to min hour value, set current hour equal to max hour
+   * (3): (2) and current minute is greater than max minute value, set minute to max minute value
+   * (4): (3) and current second is greater than min second value, set second to max second value
+   * (5): If current hour minus 1 is equal to min hour and current minute greater than min minute value, set current minute equal to min minute
+   * (6): (5) and current second is greater than min second value, set current second equal to min second
    */
   const onDecreaseHour = () => {
     if (minHour === currentHour - 1 && minMinute > currentMinute) {
@@ -319,15 +319,15 @@ const TimePicker = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((inProps, referenc
     }
   };
 
-  /**
-   *
-   * @constant {Number} minuteStep
-   * @constant {Number} startMinute
-   * @constant {Number} lastMinute
-   * Arrow down minute input onClick in the following cases:
-   * (1): Decrease current minute by @minuteStep
-   * (2): If current minute minus @minuteStep is smaller than @startMinute , set current minute to @lastMinute - @lastMinute % @minuteStep
-   * (3): (2) and current second is greater than max second, set current second to max second
+  /**
+   *
+   * @constant {Number} minuteStep
+   * @constant {Number} startMinute
+   * @constant {Number} lastMinute
+   * Arrow down minute input onClick in the following cases:
+   * (1): Decrease current minute by @minuteStep
+   * (2): If current minute minus @minuteStep is smaller than @startMinute , set current minute to @lastMinute - @lastMinute % @minuteStep
+   * (3): (2) and current second is greater than max second, set current second to max second
    */
   const onDecreaseMinute = () => {
     if (startMinute > currentMinute - minuteStep) {
@@ -348,13 +348,13 @@ const TimePicker = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((inProps, referenc
     }
   };
 
-  /**
-   *
-   * @constant {Number} startSecond
-   * @constant {Number} lastSecond
-   * Arrow down second input onClick in the following cases:
-   * (1): Decrease current second by 1
-   * (2): If current second minus 1 is smaller than start second, set current second to last second
+  /**
+   *
+   * @constant {Number} startSecond
+   * @constant {Number} lastSecond
+   * Arrow down second input onClick in the following cases:
+   * (1): Decrease current second by 1
+   * (2): If current second minus 1 is smaller than start second, set current second to last second
    */
   const onDecreaseSecond = () => {
     if (startSecond >= currentSecond - 1) {
@@ -366,30 +366,30 @@ const TimePicker = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((inProps, referenc
     }
   };
 
-  /**
-   *
-   * onClose Popover Timepicker when click Save button
+  /**
+   *
+   * onClose Popover Timepicker when click Save button
    */
   const onCloseTimePicker = () => {
     timePickerRef.current.close();
     setCurrentInputFocus(null);
   };
 
-  /**
-   *
-   * Format value using date().format() in utils
-   * @param {Date} value
-   * @param {String} outputFormat
-   * @returns
+  /**
+   *
+   * Format value using date().format() in utils
+   * @param {Date} value
+   * @param {String} outputFormat
+   * @returns
    */
   const formatTime = (value, outputFormat) => {
     return mode12h ? date(value).format(`hh${outputFormat.slice(2)} A`) : date(value).format(outputFormat);
   };
 
-  /**
-   *
-   * Button Save onClick
-   * @param {Boolean} now
+  /**
+   *
+   * Button Save onClick
+   * @param {Boolean} now
    */
   const onSelectTime = (now = false) => {
     let displayTimeValue = '00:00:00';
@@ -404,8 +404,8 @@ const TimePicker = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((inProps, referenc
         text: displayTimeValue.slice(0, 2).includes(':') ? displayTimeValue.slice(9, 11) : displayTimeValue.slice(10, 12)
       });
     } else {
-      displayTimeValue = `${date(currentTime).format(displayFormat)} ${mode12h ? timeValue === null || timeValue === void 0 ? void 0 : timeValue.text : ''}`;
-      returnTimeValue = `${date(currentTime).format(returnFormat)} ${mode12h ? timeValue === null || timeValue === void 0 ? void 0 : timeValue.text : ''}`;
+      displayTimeValue = `${date(currentTime).format(displayFormat)}${mode12h ? ` ${timeValue === null || timeValue === void 0 ? void 0 : timeValue.text}` : ''}`;
+      returnTimeValue = `${date(currentTime).format(returnFormat)}${mode12h ? ` ${timeValue === null || timeValue === void 0 ? void 0 : timeValue.text}` : ''}`;
     }
     if (!now) {
       setDisplayTime(displayTimeValue);
@@ -420,12 +420,22 @@ const TimePicker = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((inProps, referenc
   // useEffect for prop value
   useEffect(() => {
     if (!value) {
-      setTimeValue({
-        hour: min ? min.slice(0, 2) : mode12h ? 1 : 0,
-        minute: min ? min.slice(3, 5) : 0,
-        second: min ? min.slice(6, 8) : 0,
-        text: min ? min.slice(10, 12) || 'AM' : 'AM'
-      });
+      if (!mode12h) {
+        const timeValue = {
+          hour: min ? min.slice(0, 2) : mode12h ? 1 : 0,
+          minute: min ? min.slice(3, 5) : 0,
+          second: min ? min.slice(6, 8) : 0
+        };
+        setTimeValue(timeValue);
+      } else {
+        const timeValue = {
+          hour: min ? min.slice(0, 2) : mode12h ? 1 : 0,
+          minute: min ? min.slice(3, 5) : 0,
+          second: min ? min.slice(6, 8) : 0,
+          text: min ? (returnFormat === 'HH:mm:ss' ? min.slice(10, 12) : min.slice(6, 8)) || 'AM' : 'AM'
+        };
+        setTimeValue(timeValue);
+      }
       setDisplayTime(null);
     } else {
       let displayTimeValue = '00:00:00';
@@ -433,13 +443,22 @@ const TimePicker = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((inProps, referenc
       const valueMinute = Number(value.slice(3, 5)) || '00';
       const valueSecond = Number(value.slice(6, 8)) || '00';
       const valueTime = new Date(new Date().getFullYear(), 0, 1, valueHour, valueMinute, valueSecond);
-      displayTimeValue = formatTime(valueTime, displayFormat);
-      setTimeValue({
-        hour: value.slice(0, 2),
-        minute: value.slice(3, 5),
-        second: value.slice(6, 8),
-        text: value.slice(10, 12)
-      });
+      displayTimeValue = formatTime(valueTime, displayFormat).slice(0, -3).concat(returnFormat === 'HH:mm:ss' ? ` ${value.slice(10, 12)}` : ` ${value.slice(6, 8)}`);
+      if (!mode12h) {
+        setTimeValue({
+          hour: value.slice(0, 2),
+          minute: value.slice(3, 5),
+          second: value.slice(6, 8)
+        });
+      } else {
+        const timeValue = {
+          hour: value.slice(0, 2),
+          minute: value.slice(3, 5),
+          second: returnFormat === 'HH:mm:ss' ? value.slice(6, 8) : '00',
+          text: returnFormat === 'HH:mm:ss' ? value.slice(10, 12) : value.slice(6, 8)
+        };
+        setTimeValue(timeValue);
+      }
       setDisplayTime(displayTimeValue);
     }
   }, [value, displayFormat, returnFormat, mode12h, min, max]);
@@ -477,7 +496,23 @@ const TimePicker = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((inProps, referenc
     disabled: disabled,
     required: required,
     ...labelProps
-  }, label), jsx(Popover, {
+  }, label), readOnly ? jsx(InputBase, {
+    inputProps: {
+      placeholder: !readOnly && !disabled ? placeholder : '',
+      ...inputProps
+    },
+    disabled: disabled,
+    viewType: viewType,
+    inputStyle: {
+      ...inputStyle
+    },
+    value: displayTime,
+    endIcon: endIcon,
+    startIcon: startIcon,
+    onKeyDown: e => e.preventDefault(),
+    status: error ? 'danger' : 'default',
+    readOnly: true
+  }) : jsx(Popover, {
     css: _TimePickerCSS,
     anchor: jsx(InputBase, {
       inputProps: {
@@ -725,24 +760,6 @@ const TimePickerAMPMCSS = (currentText, {
         ${parseWidth(32)};
     }
 `;
-
-// TimePicker.defaultProps = {
-//     actionIconAt: 'end',
-//     className: '',
-//     disabled: false,
-//     displayFormat: 'HH:mm:ss',
-//     mode12h: false,
-//     readOnly: false,
-//     required: false,
-//     returnFormat: 'HH:mm:ss',
-//     error: '',
-//     minuteStep: 1,
-//     min: '',
-//     max: '',
-//     label: '',
-//     value: '',
-// };
-
 TimePicker.propTypes = {
   /** CSS class for the component. ({container: '', header: '', body: '', footer: ''}) */
   className: PropTypes.oneOfType([PropTypes.object, PropTypes.string]),

package/package.json

@@ -1,44 +1,78 @@
-{
-  "name": "diginet-core-ui",
-  "version": "1.4.35",
-  "description": "The DigiNet core ui",
-  "homepage": "https://diginet.com.vn",
-  "main": "index.js",
-  "scripts": {
-    "start-js": "react-scripts start --max_old_space_size=4096",
-    "start": "npx npm-run-all -p start-js",
-    "build": "GENERATE_SOURCEMAP=false && react-scripts build --env=production --max_old_space_size=8192",
-    "eject": "react-scripts eject",
-    "test": "echo \"Error: no test specified\" && exit 1"
-  },
-  "dependencies": {
-    "@emotion/core": "^10.0.35",
-    "prop-types": "^15.7.2",
-    "@emotion/css": "^11.11.0",
-    "@emotion/react": "^11.10.6"
-  },
-  "repository": {
-    "type": "git",
-    "url": "git+https://diginetvn@bitbucket.org/diginetvn/diginet-core-ui.git"
-  },
-  "keywords": [
-    "core ui",
-    "diginet"
-  ],
-  "author": "rocachien",
-  "contributors": [
-    {
-      "name": "Chien Do",
-      "email": "rocachien@gmail.com"
-    },
-    {
-      "name": "Nhat Tran",
-      "email": "tranminhnhat1005@gmail.com"
-    },
-    {
-      "name": "Thuan Nguyen",
-      "email": "nt.thuan.hutech@gmail.com"
-    }
-  ],
-  "license": "MIT"
-}
+{
+  "name": "diginet-core-ui",
+  "version": "1.4.36-beta.1",
+  "description": "",
+  "main": "index.js",
+  "license": "UNLICENSED",
+  "scripts": {
+    "start": "npm-run-all --parallel start-sb eslint-test",
+    "start-sb": "start-storybook -p 9050",
+    "build-storybook": "build-storybook -c .storybook -s src",
+    "build": "run-script-os",
+    "build:windows": "rimraf dist && mkdirp dist/components && npm run compile && sass --style=compressed src/scss:dist/css && xcopy src\\\\assets dist\\\\assets\\ /e /y",
+    "build:darwin:linux:default": "rm -rf dist && npm run compile && sass --style=compressed src/scss:dist/css && cp -rf src/assets dist/assets",
+    "compile": "babel src --out-dir dist --ignore **/*.stories.js",
+    "pack": "npm run build && cp *.md dist/ && npm run version:bump --silent && npm run version:add --silent && cd dist && npm pack",
+    "production-keep-version": "npm run build && cp *.md dist/ && cp package.json dist/ && cd dist && npm publish",
+    "beta": "npm run build && cp *.md dist/ && cp package.json dist/ && cd dist && npm publish --tag beta",
+    "production": "npm run build && cp *.md dist/ && npm run version:bump --silent && npm run version:add --silent && cd dist && npm publish",
+    "version:add": "run-script-os",
+    "version:add:windows": "cat package.json.tmp | sed \"s/0.0.0/%npm_package_version%/g\" > dist/package.json",
+    "version:add:darwin:linux:default": "VERSION=$(npm run version:extract --silent) && cat package.json.tmp | sed \"s/0.0.0/${VERSION}/g\" > dist/package.json",
+    "version:bump": "npm version patch --no-git-tag-version --silent",
+    "version:extract": "cat package.json | grep version | head -1 | awk -F: '{ print $2 }' | sed 's/[\",]//g' | tr -d '[[:space:]]'",
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "lint": "eslint --fix --config .eslintrc.js \"**/*.js\"",
+    "eslint-test": "onchange \"src/**/*.{js,jsx,json}\" -- eslint . --fix",
+    "freshtall": "npm cache clean --force && rm -rf node_modules && rm -f package-lock.json && npm install",
+    "test-storybook": "test-storybook --url http://localhost:9050",
+    "preinstall": "echo {} > package-lock.json"
+  },
+  "dependencies": {
+    "@emotion/core": "^10.0.35",
+    "@emotion/css": "^11.11.0",
+    "@emotion/react": "^11.10.6",
+    "babel-plugin-module-resolver": "^4.1.0",
+    "date-fns": "^2.30.0",
+    "prop-types": "^15.7.2"
+  },
+  "lint-staged": {
+    "*/**/*.{js,jsx,json}": [
+      "prettier --write",
+      "git add"
+    ]
+  },
+  "devDependencies": {
+    "@babel/cli": "^7.14.3",
+    "@babel/plugin-proposal-class-properties": "^7.13.0",
+    "@babel/plugin-proposal-logical-assignment-operators": "^7.16.0",
+    "@babel/plugin-proposal-nullish-coalescing-operator": "^7.16.0",
+    "@babel/plugin-proposal-optional-chaining": "^7.14.2",
+    "@babel/plugin-proposal-private-methods": "^7.18.6",
+    "@babel/plugin-proposal-private-property-in-object": "^7.18.6",
+    "@babel/preset-react": "^7.13.13",
+    "@storybook/addon-actions": "6.2.9",
+    "@storybook/addon-essentials": "6.2.9",
+    "@storybook/addon-links": "6.2.9",
+    "@storybook/addon-postcss": "^2.0.0",
+    "@storybook/react": "6.2.9",
+    "@storybook/test-runner": "^0.7.1",
+    "autoprefixer": "^10.3.1",
+    "babel-loader": "^8.2.2",
+    "eslint": "^8.4.1",
+    "eslint-plugin-react": "^7.27.1",
+    "eslint-plugin-regex": "^1.10.0",
+    "husky": "^7.0.4",
+    "jest": "^27.5.1",
+    "lint-staged": "^12.1.2",
+    "mkdirp": "^1.0.4",
+    "npm-run-all": "^4.1.5",
+    "onchange": "^7.1.0",
+    "postcss-flexbugs-fixes": "^5.0.2",
+    "react": "^17.0.1",
+    "react-dom": "^17.0.1",
+    "rimraf": "^3.0.2",
+    "run-script-os": "^1.1.6",
+    "sass": "1.58.3"
+  }
+}

package/readme.md

@@ -42,6 +42,17 @@ npm test
 
 ## Changelog
 
+## 1.4.36
+
+- \[Fixed\]: TimePicker – Fix show popover when readOnly is true, fix return value contain space
+- \[Changed\]: index.stories.js – Add props to components in index.stories.js
+- \[Fixed\]: DatePicker – Fix still open popup when readOnly
+- \[Fixed\]: DateRangePicker – Fix still open popup when readOnly
+
+## 1.4.35
+
+* [Changed\]: DropdownBox - Added props allowInput, disabled, displayExpr, error, valueExpr, helperTextProps
+
 ## 1.4.34
 
 - \[Fixed]: DatePicker – Fix disabled navigator on first render
@@ -1367,3 +1378,5 @@ npm test
 - \[Added\]: Icon component for DHR/ERP
 - \[Changed\]: Progress/Linear component
 - \[Changed\]: Form/Dropdown component
+
+[Added]: Adde