@carbon/react 1.27.0 → 1.28.0

package/lib/components/DatePicker/index.js

@@ -10,8 +10,10 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var DatePicker = require('./DatePicker.js');
+var DatePicker_Skeleton = require('./DatePicker.Skeleton.js');
 
 
 
 exports.DatePicker = DatePicker["default"];
 exports["default"] = DatePicker["default"];
+exports.DatePickerSkeleton = DatePicker_Skeleton["default"];

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

@@ -13,49 +13,51 @@ Object.defineProperty(exports, '__esModule', { value: true });
  * @param {object} config Plugin configuration.
  * @returns {Plugin} A Flatpickr plugin to put adjust the position of calendar dropdown.
  */
-var carbonFlatpickrAppendToPlugin = (function (config) {
-  return function (fp) {
-    /**
-     * Adjusts the floating menu position after Flatpicker sets it.
-     */
-    var handlePreCalendarPosition = function handlePreCalendarPosition() {
-      Promise.resolve().then(function () {
-        var calendarContainer = fp.calendarContainer,
-            fpConfig = fp.config,
-            positionElement = fp._positionElement;
-        var appendTo = fpConfig.appendTo;
-
-        var _appendTo$getBounding = appendTo.getBoundingClientRect(),
-            containerLeft = _appendTo$getBounding.left,
-            containerTop = _appendTo$getBounding.top;
-
-        var _positionElement$getB = positionElement.getBoundingClientRect(),
-            refLeft = _positionElement$getB.left,
-            refBottom = _positionElement$getB.bottom;
-
-        if ((appendTo !== appendTo.ownerDocument.body || containerLeft !== 0 || containerTop !== 0) && appendTo.ownerDocument.defaultView.getComputedStyle(appendTo).getPropertyValue('position') === 'static') {
-          throw new Error('Floating menu container must not have `position:static`.');
-        } // `2` for negative margin on calendar dropdown
-
-
-        calendarContainer.style.top = "".concat(refBottom - containerTop + 2, "px");
-        calendarContainer.style.left = "".concat(refLeft - containerLeft, "px");
-      });
-    };
-    /**
-     * Registers this Flatpickr plugin.
-     */
-
-
-    var register = function register() {
-      fp.loadedPlugins.push('carbonFlatpickrAppendToPlugin');
-    };
-
-    return {
-      appendTo: config.appendTo,
-      onReady: register,
-      onPreCalendarPosition: handlePreCalendarPosition
-    };
+var carbonFlatpickrAppendToPlugin = (config => fp => {
+  /**
+   * Adjusts the floating menu position after Flatpicker sets it.
+   */
+  const handlePreCalendarPosition = () => {
+    Promise.resolve().then(() => {
+      const {
+        calendarContainer,
+        config: fpConfig,
+        _positionElement: positionElement
+      } = fp;
+      const {
+        appendTo
+      } = fpConfig;
+      const {
+        left: containerLeft,
+        top: containerTop
+      } = appendTo.getBoundingClientRect();
+      const {
+        left: refLeft,
+        bottom: refBottom
+      } = positionElement.getBoundingClientRect();
+
+      if ((appendTo !== appendTo.ownerDocument.body || containerLeft !== 0 || containerTop !== 0) && appendTo.ownerDocument.defaultView.getComputedStyle(appendTo).getPropertyValue('position') === 'static') {
+        throw new Error('Floating menu container must not have `position:static`.');
+      } // `2` for negative margin on calendar dropdown
+
+
+      calendarContainer.style.top = `${refBottom - containerTop + 2}px`;
+      calendarContainer.style.left = `${refLeft - containerLeft}px`;
+    });
+  };
+  /**
+   * Registers this Flatpickr plugin.
+   */
+
+
+  const register = () => {
+    fp.loadedPlugins.push('carbonFlatpickrAppendToPlugin');
+  };
+
+  return {
+    appendTo: config.appendTo,
+    onReady: register,
+    onPreCalendarPosition: handlePreCalendarPosition
   };
 });
 

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

@@ -17,130 +17,140 @@ var keys = require('../../../internal/keyboard/keys.js');
  * @returns {Plugin} A Flatpickr plugin to fix Flatpickr's behavior of certain events.
  */
 
-var carbonFlatpickrFixEventsPlugin = (function (config) {
-  return function (fp) {
-    /**
-     * Handles `keydown` event.
-     */
-    var handleKeydown = function handleKeydown(event) {
-      var inputFrom = config.inputFrom,
-          inputTo = config.inputTo;
-      var target = event.target;
-
-      if (inputFrom === target || inputTo === target) {
-        if (match.match(event, keys.Enter)) {
-          // Makes sure the hitting enter key picks up pending values of both `<input>`
-          // Workaround for: https://github.com/flatpickr/flatpickr/issues/1942
-          fp.setDate([inputFrom.value, inputTo && inputTo.value], true, fp.config.dateFormat);
-          event.stopPropagation();
-        } else if (match.match(event, keys.ArrowLeft) || match.match(event, keys.ArrowRight)) {
-          // Prevents Flatpickr code from canceling the event if left/right arrow keys are hit on `<input>`,
-          // so user can move the keyboard cursor for editing dates
-          // Workaround for: https://github.com/flatpickr/flatpickr/issues/1943
-          event.stopPropagation();
-        } else if (match.match(event, keys.ArrowDown)) {
-          event.preventDefault();
-          fp.open();
-        }
+var carbonFlatpickrFixEventsPlugin = (config => fp => {
+  /**
+   * Handles `keydown` event.
+   */
+  const handleKeydown = event => {
+    const {
+      inputFrom,
+      inputTo
+    } = config;
+    const {
+      target
+    } = event;
+
+    if (inputFrom === target || inputTo === target) {
+      if (match.match(event, keys.Enter)) {
+        // Makes sure the hitting enter key picks up pending values of both `<input>`
+        // Workaround for: https://github.com/flatpickr/flatpickr/issues/1942
+        fp.setDate([inputFrom.value, inputTo && inputTo.value], true, fp.config.dateFormat);
+        event.stopPropagation();
+      } else if (match.match(event, keys.ArrowLeft) || match.match(event, keys.ArrowRight)) {
+        // Prevents Flatpickr code from canceling the event if left/right arrow keys are hit on `<input>`,
+        // so user can move the keyboard cursor for editing dates
+        // Workaround for: https://github.com/flatpickr/flatpickr/issues/1943
+        event.stopPropagation();
+      } else if (match.match(event, keys.ArrowDown)) {
+        event.preventDefault();
+        fp.open();
       }
-    };
-    /**
-     * Handles `blur` event.
-     *
-     * For whatever reason, manual changes within the `to` input do not update the
-     * calendar on blur. If a manual change is made within the input, this block will
-     * set the date again, triggering the calendar to update.
-     */
-
-
-    var handleBlur = function handleBlur(event) {
-      var inputFrom = config.inputFrom,
-          inputTo = config.inputTo,
-          lastStartValue = config.lastStartValue;
-      var target = event.target; // Only fall into this logic if the event is on the `to` input and there is a
-      // `to` date selected
-
-      if (inputTo === target && fp.selectedDates[1]) {
-        // Using getTime() enables the ability to more readily compare the date currently
-        // selected in the calendar and the date currently in the value of the input
-        var selectedToDate = new Date(fp.selectedDates[1]).setHours(0, 0, 0, 0);
-        var currentValueToDate = new Date(inputTo.value).setHours(0, 0, 0, 0); // The date should only be set if both dates are valid dates, and they don't match.
-        // When they don't match, this indiciates that the date selected in the calendar is stale,
-        // and the current value in the input should be set for the calendar to update.
-
-        if (selectedToDate && currentValueToDate && selectedToDate !== currentValueToDate) {
-          // Update the calendar with the value of the `to` date input
-          fp.setDate([inputFrom.value, inputTo && inputTo.value], true, fp.config.dateFormat);
-        }
-      } // save end date in calendar inmediately after it's been written down
+    }
+  };
+  /**
+   * Handles `blur` event.
+   *
+   * For whatever reason, manual changes within the `to` input do not update the
+   * calendar on blur. If a manual change is made within the input, this block will
+   * set the date again, triggering the calendar to update.
+   */
+
+
+  const handleBlur = event => {
+    const {
+      inputFrom,
+      inputTo,
+      lastStartValue
+    } = config;
+    const {
+      target
+    } = event; // Only fall into this logic if the event is on the `to` input and there is a
+    // `to` date selected
+
+    if (inputTo === target && fp.selectedDates[1]) {
+      // Using getTime() enables the ability to more readily compare the date currently
+      // selected in the calendar and the date currently in the value of the input
+      const selectedToDate = new Date(fp.selectedDates[1]).setHours(0, 0, 0, 0);
+      const currentValueToDate = new Date(inputTo.value).setHours(0, 0, 0, 0); // The date should only be set if both dates are valid dates, and they don't match.
+      // When they don't match, this indiciates that the date selected in the calendar is stale,
+      // and the current value in the input should be set for the calendar to update.
+
+      if (selectedToDate && currentValueToDate && selectedToDate !== currentValueToDate) {
+        // Update the calendar with the value of the `to` date input
+        fp.setDate([inputFrom.value, inputTo && inputTo.value], true, fp.config.dateFormat);
+      }
+    } // save end date in calendar inmediately after it's been written down
 
 
-      if (inputTo === target && fp.selectedDates.length === 1 && inputTo.value) {
-        var currentEndDate = new Date(inputTo.value);
+    if (inputTo === target && fp.selectedDates.length === 1 && inputTo.value) {
+      let currentEndDate = new Date(inputTo.value);
 
-        if (currentEndDate.toString() !== 'Invalid Date') {
-          fp.setDate([inputFrom.value, inputTo.value], true, fp.config.dateFormat);
-        }
-      } // overriding the flatpickr bug where the startDate gets deleted on blur
+      if (currentEndDate.toString() !== 'Invalid Date') {
+        fp.setDate([inputFrom.value, inputTo.value], true, fp.config.dateFormat);
+      }
+    } // overriding the flatpickr bug where the startDate gets deleted on blur
 
 
-      if (inputTo === target && !inputFrom.value && lastStartValue.current) {
-        var currentStartDate = new Date(lastStartValue.current);
+    if (inputTo === target && !inputFrom.value && lastStartValue.current) {
+      let currentStartDate = new Date(lastStartValue.current);
 
-        if (currentStartDate.toString() !== 'Invalid Date') {
-          inputFrom.value = lastStartValue.current;
+      if (currentStartDate.toString() !== 'Invalid Date') {
+        inputFrom.value = lastStartValue.current;
 
-          if (inputTo.value) {
-            fp.setDate([inputFrom.value, inputTo.value], true, fp.config.dateFormat);
-          }
+        if (inputTo.value) {
+          fp.setDate([inputFrom.value, inputTo.value], true, fp.config.dateFormat);
         }
       }
-    };
-    /**
-     * Releases event listeners used in this Flatpickr plugin.
-     */
-
-
-    var release = function release() {
-      var inputFrom = config.inputFrom,
-          inputTo = config.inputTo;
-
-      if (inputTo) {
-        inputTo.removeEventListener('keydown', handleKeydown, true);
-        inputTo.removeEventListener('blur', handleBlur, true);
-      }
+    }
+  };
+  /**
+   * Releases event listeners used in this Flatpickr plugin.
+   */
 
-      inputFrom.removeEventListener('keydown', handleKeydown, true);
-    };
-    /**
-     * Sets up event listeners used for this Flatpickr plugin.
-     */
 
+  const release = () => {
+    const {
+      inputFrom,
+      inputTo
+    } = config;
 
-    var init = function init() {
-      release();
-      var inputFrom = config.inputFrom,
-          inputTo = config.inputTo;
-      inputFrom.addEventListener('keydown', handleKeydown, true);
+    if (inputTo) {
+      inputTo.removeEventListener('keydown', handleKeydown, true);
+      inputTo.removeEventListener('blur', handleBlur, true);
+    }
 
-      if (inputTo) {
-        inputTo.addEventListener('keydown', handleKeydown, true);
-        inputTo.addEventListener('blur', handleBlur, true);
-      }
-    };
-    /**
-     * Registers this Flatpickr plugin.
-     */
+    inputFrom.removeEventListener('keydown', handleKeydown, true);
+  };
+  /**
+   * Sets up event listeners used for this Flatpickr plugin.
+   */
+
+
+  const init = () => {
+    release();
+    const {
+      inputFrom,
+      inputTo
+    } = config;
+    inputFrom.addEventListener('keydown', handleKeydown, true);
+
+    if (inputTo) {
+      inputTo.addEventListener('keydown', handleKeydown, true);
+      inputTo.addEventListener('blur', handleBlur, true);
+    }
+  };
+  /**
+   * Registers this Flatpickr plugin.
+   */
 
 
-    var register = function register() {
-      fp.loadedPlugins.push('carbonFlatpickrFixEventsPlugin');
-    };
+  const register = () => {
+    fp.loadedPlugins.push('carbonFlatpickrFixEventsPlugin');
+  };
 
-    return {
-      onReady: [register, init],
-      onDestroy: [release]
-    };
+  return {
+    onReady: [register, init],
+    onDestroy: [release]
   };
 });
 

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

@@ -23,22 +23,26 @@ var rangePlugin__default = /*#__PURE__*/_interopDefaultLegacy(rangePlugin);
  *   * A logic to ensure `fp.setDate()` call won't end up with "startDate to endDate" set to the first `<input>`
  */
 
-var carbonFlatpickrRangePlugin = (function (config) {
-  var factory = rangePlugin__default["default"](Object.assign({
+var carbonFlatpickrRangePlugin = (config => {
+  const factory = rangePlugin__default["default"](Object.assign({
     position: 'left'
   }, config));
-  return function (fp) {
-    var origSetDate = fp.setDate;
+  return fp => {
+    const origSetDate = fp.setDate;
 
-    var init = function init() {
+    const init = () => {
       fp.setDate = function setDate(dates, triggerChange, format) {
         origSetDate.call(this, dates, triggerChange, format); // If `triggerChange` is `true`, `onValueUpdate` Flatpickr event is fired
         // where Flatpickr's range plugin takes care of fixing the first `<input>`
 
         if (!triggerChange) {
-          var inputFrom = fp._input;
-          var inputTo = config.input;
-          [inputFrom, inputTo].forEach(function (input, i) {
+          const {
+            _input: inputFrom
+          } = fp;
+          const {
+            input: inputTo
+          } = config;
+          [inputFrom, inputTo].forEach((input, i) => {
             if (input) {
               input.value = !dates[i] ? '' : fp.formatDate(new Date(dates[i]), fp.config.dateFormat);
             }
@@ -47,11 +51,15 @@ var carbonFlatpickrRangePlugin = (function (config) {
       };
     };
 
-    var origRangePlugin = factory(fp);
-    var origOnReady = origRangePlugin.onReady;
+    const origRangePlugin = factory(fp);
+    const {
+      onReady: origOnReady
+    } = origRangePlugin;
     return Object.assign(origRangePlugin, {
       onReady: [init, origOnReady],
-      onPreCalendarPosition: function onPreCalendarPosition() {}
+
+      onPreCalendarPosition() {}
+
     });
   };
 });

package/lib/components/DatePickerInput/DatePickerInput.d.ts

@@ -0,0 +1,93 @@
+/**
+ * Copyright IBM Corp. 2016, 2023
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import { ReactElementLike, ReactNodeArray } from 'prop-types';
+import React from 'react';
+import { ReactAttr } from '../../types/common';
+type ExcludedAttributes = 'value' | 'onChange' | 'locale' | 'children';
+export type ReactNodeLike = ReactElementLike | ReactNodeArray | string | number | boolean | null | undefined;
+export type func = (...args: any[]) => any;
+interface DatePickerInputProps extends Omit<ReactAttr<HTMLDivElement>, ExcludedAttributes> {
+    /**
+     * The type of the date picker:
+     *
+     * * `simple` - Without calendar dropdown.
+     * * `single` - With calendar dropdown and single date.
+     * * `range` - With calendar dropdown and a date range.
+     */
+    datePickerType?: 'simple' | 'single' | 'range';
+    /**
+     * Specify whether or not the input should be disabled
+     */
+    disabled?: boolean;
+    /**
+     * Provide text that is used alongside the control label for additional help
+     */
+    helperText?: ReactNodeLike;
+    /**
+     * Specify if the label should be hidden
+     */
+    hideLabel?: boolean;
+    /**
+     * Specify an id that uniquely identifies the `<input>`
+     */
+    id: string;
+    /**
+     * Specify whether or not the input should be invalid
+     */
+    invalid?: boolean;
+    /**
+     * Specify the text to be rendered when the input is invalid
+     */
+    invalidText: ReactNodeLike;
+    /**
+     * Provide the text that will be read by a screen reader when visiting this
+     * control
+     */
+    labelText: ReactNodeLike;
+    /**
+     * Specify an `onChange` handler that is called whenever a change in the
+     * input field has occurred
+     */
+    onChange?: func;
+    /**
+     * Provide a function to be called when the input field is clicked
+     */
+    onClick?: func;
+    /**
+     * Provide a regular expression that the input value must match
+     * TODO:need to be rewritten
+     */
+    pattern: (props: {
+        [key: string]: any;
+    }, propName: string, componentName: string) => null | any | Error;
+    /**
+     * Specify the placeholder text
+     */
+    placeholder?: string;
+    /**
+     * whether the DatePicker is to be readOnly
+     */
+    readOnly?: boolean;
+    /**
+     * Specify the size of the Date Picker Input. Currently supports either `sm`, `md`, or `lg` as an option.
+     */
+    size?: 'sm' | 'md' | 'lg';
+    /**
+     * Specify the type of the `<input>`
+     */
+    type?: string;
+    /**
+     * Specify whether the control is currently in warning state
+     */
+    warn?: boolean;
+    /**
+     * Provide the text that is displayed when the control is in warning state
+     */
+    warnText?: ReactNodeLike;
+}
+declare const DatePickerInput: React.ForwardRefExoticComponent<DatePickerInputProps & React.RefAttributes<HTMLDivElement>>;
+export default DatePickerInput;