@carbon/react 1.40.0 → 1.41.0-rc.0

package/lib/components/DataTable/DataTable.d.ts

@@ -27,24 +27,6 @@ import TableToolbarAction from './TableToolbarAction';
 import TableToolbarContent from './TableToolbarContent';
 import TableToolbarSearch from './TableToolbarSearch';
 import TableToolbarMenu from './TableToolbarMenu';
-declare const dataTableDefaultProps: {
-    filterRows: ({ rowIds, headers, cellsById, inputValue, getCellId, }: {
-        rowIds: string[];
-        headers: any[];
-        cellsById: any;
-        inputValue: string;
-        getCellId: Function;
-    }) => string[];
-    locale: string;
-    overflowMenuOnHover: boolean;
-    size: string;
-    sortRow: (cellA: any, cellB: any, { sortDirection, sortStates, locale }: {
-        sortDirection: any;
-        sortStates: any;
-        locale: any;
-    }) => number;
-    translateWithId: (id: any) => string;
-};
 export type DataTableSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
 export interface DataTableCell<T> {
     id: string;
@@ -181,7 +163,7 @@ export interface DataTableProps<RowType, ColTypes extends any[]> {
     children?: (renderProps: DataTableRenderProps<RowType, ColTypes>) => React.ReactElement;
     experimentalAutoAlign?: boolean;
     filterRows?: (filterRowsArgs: {
-        cellsById: Record<string, DataTableCell<RowType>>;
+        cellsById: Record<string, DataTableCell<ColTypes>>;
         getCellId: (rowId: string, header: string) => string;
         headers: Array<DataTableHeader>;
         inputValue: string;
@@ -226,26 +208,8 @@ interface DataTableState<ColTypes extends any[]> {
  * and updating the state of the single entity will cascade updates to the
  * consumer.
  */
-declare class DataTable<RowType, ColTypes extends any[]> extends React.Component<DataTableProps<RowType, ColTypes> & typeof dataTableDefaultProps, DataTableState<ColTypes>> {
+declare class DataTable<RowType, ColTypes extends any[]> extends React.Component<DataTableProps<RowType, ColTypes>, DataTableState<ColTypes>> {
     instanceId: number;
-    static defaultProps: {
-        filterRows: ({ rowIds, headers, cellsById, inputValue, getCellId, }: {
-            rowIds: string[];
-            headers: any[];
-            cellsById: any;
-            inputValue: string;
-            getCellId: Function;
-        }) => string[];
-        locale: string;
-        overflowMenuOnHover: boolean;
-        size: string;
-        sortRow: (cellA: any, cellB: any, { sortDirection, sortStates, locale }: {
-            sortDirection: any;
-            sortStates: any;
-            locale: any;
-        }) => number;
-        translateWithId: (id: any) => string;
-    };
     static propTypes: {
         /**
          * Experimental property. Allows table to align cell contents to the top if there is text wrapping in the content. Might have performance issues, intended for smaller tables
@@ -488,7 +452,7 @@ declare class DataTable<RowType, ColTypes extends any[]> extends React.Component
      */
     getTableProps: () => {
         useZebraStyles: boolean | undefined;
-        size: "sm" | "md" | "lg" | "xl" | "xs";
+        size: DataTableSize;
         isSortable: boolean | undefined;
         useStaticWidth: boolean | undefined;
         stickyHeader: boolean | undefined;

package/lib/components/DataTable/DataTable.js

@@ -14,12 +14,11 @@ var PropTypes = require('prop-types');
 var React = require('react');
 var isEqual = require('lodash.isequal');
 var getDerivedStateFromProps = require('./state/getDerivedStateFromProps.js');
-var sorting$1 = require('./state/sorting.js');
+var sorting = require('./state/sorting.js');
 var cells = require('./tools/cells.js');
 var denormalize = require('./tools/denormalize.js');
 var events = require('../../tools/events.js');
 var filter = require('./tools/filter.js');
-var sorting = require('./tools/sorting.js');
 var instanceId = require('./tools/instanceId.js');
 var Table = require('./Table.js');
 var TableActionList = require('./TableActionList.js');
@@ -70,14 +69,6 @@ const defaultTranslations = {
   [translationKeys.unselectRow]: 'Unselect row'
 };
 const translateWithId = id => defaultTranslations[id];
-const dataTableDefaultProps = {
-  filterRows: filter.defaultFilterRows,
-  locale: 'en',
-  overflowMenuOnHover: true,
-  size: 'lg',
-  sortRow: sorting.defaultSortRow,
-  translateWithId
-};
 /**
  * Data Tables are used to represent a collection of resources, displaying a
  * subset of their fields in columns, or headers. We prioritize direct updates
@@ -122,7 +113,7 @@ class DataTable extends React__default["default"].Component {
         isSortable,
         isSortHeader: sortHeaderKey === header.key,
         onClick: event => {
-          const nextSortState = sorting$1.getNextSortState(this.props, this.state, {
+          const nextSortState = sorting.getNextSortState(this.props, this.state, {
             key: header.key
           });
           this.setState(nextSortState, () => {
@@ -149,7 +140,7 @@ class DataTable extends React__default["default"].Component {
         ...rest
       } = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
       const {
-        translateWithId: t
+        translateWithId: t = translateWithId
       } = _this.props;
       const {
         isExpandedAll,
@@ -208,7 +199,7 @@ class DataTable extends React__default["default"].Component {
         ...rest
       } = _ref2;
       const {
-        translateWithId: t
+        translateWithId: t = translateWithId
       } = this.props;
       const translationKey = row.isExpanded ? translationKeys.collapseRow : translationKeys.expandRow;
       return {
@@ -260,7 +251,7 @@ class DataTable extends React__default["default"].Component {
         ...rest
       } = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
       const {
-        translateWithId: t
+        translateWithId: t = translateWithId
       } = _this.props;
 
       // If we're given a row, return the selection state values for that row
@@ -327,11 +318,11 @@ class DataTable extends React__default["default"].Component {
     _rollupPluginBabelHelpers.defineProperty(this, "getTableProps", () => {
       const {
         useZebraStyles,
-        size,
+        size = 'lg',
         isSortable,
         useStaticWidth,
         stickyHeader,
-        overflowMenuOnHover,
+        overflowMenuOnHover = true,
         experimentalAutoAlign
       } = this.props;
       return {
@@ -370,7 +361,10 @@ class DataTable extends React__default["default"].Component {
      * @returns {Array<string>} the array of rowIds that are currently included through the filter
      *  */
     _rollupPluginBabelHelpers.defineProperty(this, "getFilteredRowIds", () => {
-      const filteredRowIds = typeof this.state.filterInputValue === 'string' ? this.props.filterRows({
+      const {
+        filterRows = filter.defaultFilterRows
+      } = this.props;
+      const filteredRowIds = typeof this.state.filterInputValue === 'string' ? filterRows({
         rowIds: this.state.rowIds,
         headers: this.props.headers,
         cellsById: this.state.cellsById,
@@ -540,7 +534,7 @@ class DataTable extends React__default["default"].Component {
      * @returns {Function}
      */
     _rollupPluginBabelHelpers.defineProperty(this, "handleSortBy", headerKey => () => {
-      this.setState(state => sorting$1.getNextSortState(this.props, state, {
+      this.setState(state => sorting.getNextSortState(this.props, state, {
         key: headerKey
       }));
     });
@@ -593,10 +587,9 @@ class DataTable extends React__default["default"].Component {
     return true;
   }
   render() {
-    // eslint-disable-next-line react/prop-types
     const {
       children,
-      filterRows,
+      filterRows = filter.defaultFilterRows,
       headers,
       render
     } = this.props;
@@ -647,7 +640,6 @@ class DataTable extends React__default["default"].Component {
     return null;
   }
 }
-_rollupPluginBabelHelpers.defineProperty(DataTable, "defaultProps", dataTableDefaultProps);
 _rollupPluginBabelHelpers.defineProperty(DataTable, "propTypes", {
   /**
    * Experimental property. Allows table to align cell contents to the top if there is text wrapping in the content. Might have performance issues, intended for smaller tables

package/lib/components/DataTable/Table.d.ts

@@ -71,9 +71,5 @@ export declare const Table: {
          */
         useZebraStyles: PropTypes.Requireable<boolean>;
     };
-    defaultProps: {
-        isSortable: boolean;
-        overflowMenuOnHover: boolean;
-    };
 };
 export default Table;

package/lib/components/DataTable/Table.js

@@ -186,10 +186,6 @@ Table.propTypes = {
    */
   useZebraStyles: PropTypes__default["default"].bool
 };
-Table.defaultProps = {
-  isSortable: false,
-  overflowMenuOnHover: true
-};
 
 exports.Table = Table;
 exports["default"] = Table;

package/lib/components/DataTable/TableBatchAction.js

@@ -9,6 +9,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
+var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelpers.js');
 var PropTypes = require('prop-types');
 var React = require('react');
 var iconsReact = require('@carbon/icons-react');
@@ -20,7 +21,17 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
-const TableBatchAction = props => /*#__PURE__*/React__default["default"].createElement(Button["default"], props);
+const TableBatchAction = _ref => {
+  let {
+    renderIcon = iconsReact.AddFilled,
+    iconDescription = 'Add',
+    ...props
+  } = _ref;
+  return /*#__PURE__*/React__default["default"].createElement(Button["default"], _rollupPluginBabelHelpers["extends"]({
+    renderIcon: renderIcon,
+    iconDescription: iconDescription
+  }, props));
+};
 TableBatchAction.propTypes = {
   /**
    * Specify if the button is an icon-only button
@@ -41,10 +52,6 @@ TableBatchAction.propTypes = {
    */
   renderIcon: PropTypes__default["default"].oneOfType([PropTypes__default["default"].func, PropTypes__default["default"].object])
 };
-TableBatchAction.defaultProps = {
-  renderIcon: iconsReact.AddFilled,
-  iconDescription: 'Add'
-};
 var TableBatchAction$1 = TableBatchAction;
 
 exports["default"] = TableBatchAction$1;

package/lib/components/DataTable/TableBatchActions.js

@@ -80,9 +80,7 @@ const TableBatchActions = _ref => {
     className: batchSummaryClasses
   }, /*#__PURE__*/React__default["default"].createElement("p", {
     className: `${prefix}--batch-summary__para`
-  }, /*#__PURE__*/React__default["default"].createElement(Text.Text, {
-    as: "span"
-  }, totalSelected > 1 || totalSelected === 0 ? t('carbon.table.batch.items.selected', {
+  }, /*#__PURE__*/React__default["default"].createElement(Text.Text, null, totalSelected > 1 || totalSelected === 0 ? t('carbon.table.batch.items.selected', {
     totalSelected
   }) : t('carbon.table.batch.item.selected', {
     totalSelected
@@ -136,8 +134,5 @@ TableBatchActions.propTypes = {
    */
   translateWithId: PropTypes__default["default"].func
 };
-TableBatchActions.defaultProps = {
-  translateWithId
-};
 
 exports["default"] = TableBatchActions;

package/lib/components/DataTable/TableBody.d.ts

@@ -22,8 +22,5 @@ declare const TableBody: {
         children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
         className: PropTypes.Requireable<string>;
     };
-    defaultProps: {
-        'aria-live': string;
-    };
 };
 export default TableBody;

package/lib/components/DataTable/TableBody.js

@@ -25,6 +25,7 @@ const TableBody = _ref => {
     ...rest
   } = _ref;
   return /*#__PURE__*/React__default["default"].createElement("tbody", _rollupPluginBabelHelpers["extends"]({
+    "aria-live": 'polite' ,
     className: className
   }, rest), children);
 };
@@ -36,8 +37,5 @@ TableBody.propTypes = {
   children: PropTypes__default["default"].node,
   className: PropTypes__default["default"].string
 };
-TableBody.defaultProps = {
-  'aria-live': 'polite'
-};
 
 exports["default"] = TableBody;

package/lib/components/DataTable/TableHeader.js

@@ -56,12 +56,12 @@ const TableHeader = /*#__PURE__*/React__default["default"].forwardRef(function T
     className: headerClassName,
     children,
     colSpan,
-    isSortable,
+    isSortable = false,
     isSortHeader,
     onClick,
     scope = defaultScope,
     sortDirection,
-    translateWithId: t,
+    translateWithId: t = translateWithId,
     id,
     ...rest
   } = _ref;
@@ -154,7 +154,7 @@ TableHeader.propTypes = {
    * attribute at the following URL:
    * https://developer.mozilla.org/en-US/docs/Web/HTML/Element/th#attr-scope
    */
-  scope: PropTypes__default["default"].string.isRequired,
+  scope: PropTypes__default["default"].string,
   /**
    * Specify which direction we are currently sorting by, should be one of DESC,
    * NONE, or ASC.
@@ -167,11 +167,6 @@ TableHeader.propTypes = {
    */
   translateWithId: PropTypes__default["default"].func
 };
-TableHeader.defaultProps = {
-  isSortable: false,
-  scope: defaultScope,
-  translateWithId
-};
 TableHeader.translationKeys = Object.values(translationKeys);
 TableHeader.displayName = 'TableHeader';
 

package/lib/components/DataTable/TableSelectAll.d.ts

@@ -76,8 +76,5 @@ declare const TableSelectAll: {
          */
         onSelect: PropTypes.Validator<(...args: any[]) => any>;
     };
-    defaultProps: {
-        ariaLabel: string;
-    };
 };
 export default TableSelectAll;

package/lib/components/DataTable/TableSelectAll.js

@@ -23,7 +23,7 @@ var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 
 const TableSelectAll = _ref => {
   let {
-    ariaLabel,
+    ariaLabel = 'Select all rows in the table',
     checked,
     id,
     indeterminate,
@@ -81,8 +81,5 @@ TableSelectAll.propTypes = {
    */
   onSelect: PropTypes__default["default"].func.isRequired
 };
-TableSelectAll.defaultProps = {
-  ariaLabel: 'Select all rows in the table'
-};
 
 exports["default"] = TableSelectAll;

package/lib/components/DataTable/TableToolbar.d.ts

@@ -6,6 +6,16 @@
  */
 import React from 'react';
 export interface TableToolbarProps extends React.HTMLAttributes<HTMLDivElement> {
+    /**
+     * Specify a label to be read by screen readers on the container node
+     * 'aria-label' of the TableToolbar component.
+     */
+    ['aria-label']?: string;
+    /**
+     * @deprecated please use `aria-label` instead.
+     * 'aria-label' of the TableToolbar component.
+     */
+    ariaLabel?: string;
     /**
      * Pass in the children that will be rendered inside the TableToolbar
      */

package/lib/components/DataTable/TableToolbar.js

@@ -14,7 +14,7 @@ var cx = require('classnames');
 var PropTypes = require('prop-types');
 var React = require('react');
 var usePrefix = require('../../internal/usePrefix.js');
-var AriaPropTypes = require('../../prop-types/AriaPropTypes.js');
+var deprecate = require('../../prop-types/deprecate.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -24,6 +24,8 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
 const TableToolbar = _ref => {
   let {
+    ['aria-label']: ariaLabel = 'data table toolbar',
+    ariaLabel: deprecatedAriaLabel,
     children,
     size,
     ...rest
@@ -33,15 +35,24 @@ const TableToolbar = _ref => {
     [`${prefix}--table-toolbar`]: true,
     [`${prefix}--table-toolbar--${size}`]: size
   });
-  return /*#__PURE__*/React__default["default"].createElement("section", _rollupPluginBabelHelpers["extends"]({}, rest, {
+  return /*#__PURE__*/React__default["default"].createElement("section", _rollupPluginBabelHelpers["extends"]({
+    "aria-label": deprecatedAriaLabel || ariaLabel
+  }, rest, {
     className: className
   }), children);
 };
 TableToolbar.propTypes = {
   /**
-   * Required props for the accessibility label of the TableToolbar
+   * 'aria-label' of the TableToolbar component.
+   * Specify a label to be read by screen readers on the container node
    */
-  ...AriaPropTypes.AriaLabelPropType,
+  ['aria-label']: PropTypes__default["default"].string,
+  /**
+   * Deprecated, please use `aria-label` instead.
+   * Specify a label to be read by screen readers on the container node.
+   * 'aria-label' of the TableToolbar component.
+   */
+  ariaLabel: deprecate["default"](PropTypes__default["default"].string, 'This prop syntax has been deprecated. Please use the new `aria-label`.'),
   /**
    * Pass in the children that will be rendered inside the TableToolbar
    */
@@ -51,8 +62,5 @@ TableToolbar.propTypes = {
    */
   size: PropTypes__default["default"].oneOf(['sm', 'lg'])
 };
-TableToolbar.defaultProps = {
-  'aria-label': 'data table toolbar'
-};
 
 exports["default"] = TableToolbar;

package/lib/components/DataTable/TableToolbarMenu.js

@@ -27,7 +27,7 @@ const defaultIconDescription = 'Settings';
 const TableToolbarMenu = _ref => {
   let {
     className,
-    renderIcon,
+    renderIcon = iconsReact.Settings,
     iconDescription = defaultIconDescription,
     children,
     ...rest
@@ -43,10 +43,6 @@ const TableToolbarMenu = _ref => {
     flipped: true
   }, rest), children);
 };
-TableToolbarMenu.defaultProps = {
-  renderIcon: iconsReact.Settings,
-  iconDescription: defaultIconDescription
-};
 TableToolbarMenu.propTypes = {
   children: PropTypes__default["default"].node.isRequired,
   /**
@@ -56,7 +52,7 @@ TableToolbarMenu.propTypes = {
   /**
    * The description of the menu icon.
    */
-  iconDescription: PropTypes__default["default"].string.isRequired,
+  iconDescription: PropTypes__default["default"].string,
   /**
    * Optional prop to allow overriding the default menu icon
    */

package/lib/components/DataTable/TableToolbarSearch.d.ts

@@ -83,7 +83,7 @@ export interface TableToolbarSearchProps {
     /**
      * Provide custom text for the component for each translation id
      */
-    translateWithId: (id: string) => string;
+    translateWithId?: (id: string) => string;
 }
 declare const TableToolbarSearch: {
     ({ className, searchContainerClass, onChange: onChangeProp, onClear, translateWithId: t, placeholder, labelText, expanded: expandedProp, defaultExpanded, defaultValue, disabled, onExpand, persistent, id, onBlur, onFocus, size, tabIndex, ...rest }: TableToolbarSearchProps): JSX.Element;
@@ -164,13 +164,7 @@ declare const TableToolbarSearch: {
         /**
          * Provide custom text for the component for each translation id
          */
-        translateWithId: PropTypes.Validator<(...args: any[]) => any>;
-    };
-    defaultProps: {
-        tabIndex: string;
-        translateWithId: (id: string) => string;
-        persistent: boolean;
-        onClear: () => void;
+        translateWithId: PropTypes.Requireable<(...args: any[]) => any>;
     };
 };
 export default TableToolbarSearch;

package/lib/components/DataTable/TableToolbarSearch.js

@@ -17,6 +17,7 @@ var Search = require('../Search/Search.js');
 require('../Search/Search.Skeleton.js');
 var instanceId = require('./tools/instanceId.js');
 var usePrefix = require('../../internal/usePrefix.js');
+var noopFn = require('../../internal/noopFn.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -37,8 +38,8 @@ const TableToolbarSearch = _ref => {
     className,
     searchContainerClass,
     onChange: onChangeProp,
-    onClear,
-    translateWithId: t,
+    onClear = noopFn.noopFn,
+    translateWithId: t = translateWithId,
     placeholder,
     labelText,
     expanded: expandedProp,
@@ -46,12 +47,12 @@ const TableToolbarSearch = _ref => {
     defaultValue,
     disabled,
     onExpand,
-    persistent,
+    persistent = false,
     id,
     onBlur,
     onFocus,
     size = 'lg',
-    tabIndex,
+    tabIndex = '0',
     ...rest
   } = _ref;
   const {
@@ -198,13 +199,7 @@ TableToolbarSearch.propTypes = {
   /**
    * Provide custom text for the component for each translation id
    */
-  translateWithId: PropTypes__default["default"].func.isRequired
-};
-TableToolbarSearch.defaultProps = {
-  tabIndex: '0',
-  translateWithId,
-  persistent: false,
-  onClear: () => {}
+  translateWithId: PropTypes__default["default"].func
 };
 
 exports["default"] = TableToolbarSearch;

package/lib/components/DataTable/tools/sorting.js

@@ -90,8 +90,8 @@ const sortRows = _ref => {
     cellsById,
     sortDirection,
     key,
-    locale,
-    sortRow
+    locale = 'en',
+    sortRow = defaultSortRow
   } = _ref;
   return rowIds.slice().sort((a, b) => {
     const cellA = cellsById[cells.getCellId(a, key)];

package/lib/components/DatePicker/DatePicker.d.ts

@@ -24,8 +24,8 @@ export type CalRef = {
 };
 interface DatePickerProps extends Omit<ReactAttr<HTMLDivElement>, ExcludedAttributes> {
     /**
-     * flatpickr prop passthrough. Allows the user to enter a date directly
-     * into the input field
+     * Flatpickr prop passthrough enables direct date input, and when set to false,
+     * we must clear dates manually by resetting the value prop to empty string making it a controlled input.
      */
     allowInput?: boolean;
     /**
@@ -87,11 +87,11 @@ interface DatePickerProps extends Omit<ReactAttr<HTMLDivElement>, ExcludedAttrib
     /**
      * The maximum date that a user can pick to.
      */
-    maxDate?: string;
+    maxDate?: string | number;
     /**
      * The minimum date that a user can start picking from.
      */
-    minDate?: string;
+    minDate?: string | number;
     /**
      * The `change` event handler.
      */

package/lib/components/DatePicker/DatePicker.js

@@ -435,6 +435,11 @@ const DatePicker = /*#__PURE__*/React__default["default"].forwardRef(function Da
       calendarRef.current.set('minDate', minDate);
     }
   }, [minDate]);
+  React.useEffect(() => {
+    if (calendarRef?.current?.set) {
+      calendarRef.current.set('allowInput', allowInput);
+    }
+  }, [allowInput]);
   React.useEffect(() => {
     if (calendarRef?.current?.set) {
       calendarRef.current.set('maxDate', maxDate);
@@ -497,8 +502,8 @@ const DatePicker = /*#__PURE__*/React__default["default"].forwardRef(function Da
 });
 DatePicker.propTypes = {
   /**
-   * flatpickr prop passthrough. Allows the user to enter a date directly
-   * into the input field
+   * Flatpickr prop passthrough enables direct date input, and when set to false,
+   * we must clear dates manually by resetting the value prop to empty string making it a controlled input.
    */
   allowInput: PropTypes__default["default"].bool,
   /**
@@ -682,11 +687,11 @@ DatePicker.propTypes = {
   /**
    * The maximum date that a user can pick to.
    */
-  maxDate: PropTypes__default["default"].string,
+  maxDate: PropTypes__default["default"].oneOfType([PropTypes__default["default"].string, PropTypes__default["default"].number]),
   /**
    * The minimum date that a user can start picking from.
    */
-  minDate: PropTypes__default["default"].string,
+  minDate: PropTypes__default["default"].oneOfType([PropTypes__default["default"].string, PropTypes__default["default"].number]),
   /**
    * The `change` event handler.
    * `(dates: Date[], dStr: string, fp: Instance, data?: any):void;`

package/lib/components/DatePicker/plugins/fixEventsPlugin.js

@@ -43,6 +43,12 @@ var carbonFlatpickrFixEventsPlugin = (config => fp => {
       } else if (match.match(event, keys.ArrowDown)) {
         event.preventDefault();
         fp.open();
+      } else if (!fp.config.allowInput) {
+        // We override the default behaviour of Flatpickr, ideally when allowInput is set to false,
+        // the Delete/Backspace button clears all of the date, which we don't want, hence
+        // we stop event bubbling and the default Flatpickr's onChange behaviour here itself
+        event.stopPropagation();
+        event.preventDefault();
       }
     }
   };