@carbon/react 0.17.0 → 1.0.1

package/es/components/DatePicker/next/DatePicker.js

@@ -0,0 +1,558 @@
+/**
+ * Copyright IBM Corp. 2016, 2021
+ *
+ * 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 { objectWithoutProperties as _objectWithoutProperties, defineProperty as _defineProperty, typeof as _typeof, objectSpread2 as _objectSpread2, extends as _extends, toConsumableArray as _toConsumableArray } from '../../../_virtual/_rollupPluginBabelHelpers.js';
+import PropTypes from 'prop-types';
+import React__default, { useRef, useEffect } from 'react';
+import cx from 'classnames';
+import flatpickr from 'flatpickr';
+import l10n from '../../../node_modules/flatpickr/dist/l10n/index.js';
+import DatePickerInput from '../../DatePickerInput/index.js';
+import carbonFlatpickrAppendToPlugin from '../plugins/appendToPlugin.js';
+import carbonFlatpickrFixEventsPlugin from '../plugins/fixEventsPlugin.js';
+import carbonFlatpickrRangePlugin from '../plugins/rangePlugin.js';
+import { usePrefix } from '../../../internal/usePrefix.js';
+import { useSavedCallback } from '../../../internal/useSavedCallback.js';
+import { match } from '../../../internal/keyboard/match.js';
+import { ArrowDown } from '../../../internal/keyboard/keys.js';
+
+var _excluded = ["allowInput", "appendTo", "children", "className", "dateFormat", "datePickerType", "disable", "enable", "inline", "light", "locale", "maxDate", "minDate", "onChange", "onClose", "onOpen", "short", "value"];
+
+l10n.en.weekdays.shorthand.forEach(function (_day, index) {
+  var currentDay = l10n.en.weekdays.shorthand;
+
+  if (currentDay[index] === 'Thu' || currentDay[index] === 'Th') {
+    currentDay[index] = 'Th';
+  } else {
+    currentDay[index] = currentDay[index].charAt(0);
+  }
+});
+var forEach = Array.prototype.forEach;
+/**
+ * @param {number} monthNumber The month number.
+ * @param {boolean} shorthand `true` to use shorthand month.
+ * @param {Locale} locale The Flatpickr locale data.
+ * @returns {string} The month string.
+ */
+
+var monthToStr = function monthToStr(monthNumber, shorthand, locale) {
+  return locale.months[shorthand ? 'shorthand' : 'longhand'][monthNumber];
+};
+/**
+ * @param {object} config Plugin configuration.
+ * @param {boolean} [config.shorthand] `true` to use shorthand month.
+ * @param {string} config.selectorFlatpickrMonthYearContainer The CSS selector for the container of month/year selection UI.
+ * @param {string} config.selectorFlatpickrYearContainer The CSS selector for the container of year selection UI.
+ * @param {string} config.selectorFlatpickrCurrentMonth The CSS selector for the text-based month selection UI.
+ * @param {string} config.classFlatpickrCurrentMonth The CSS class for the text-based month selection UI.
+ * @returns {Plugin} A Flatpickr plugin to use text instead of `<select>` for month picker.
+ */
+
+
+var carbonFlatpickrMonthSelectPlugin = function carbonFlatpickrMonthSelectPlugin(config) {
+  return function (fp) {
+    var setupElements = function setupElements() {
+      var _fp$monthElements;
+
+      if (!fp.monthElements) {
+        return;
+      }
+
+      fp.monthElements.forEach(function (elem) {
+        if (!elem.parentNode) {
+          return;
+        }
+
+        elem.parentNode.removeChild(elem);
+      });
+
+      (_fp$monthElements = fp.monthElements).splice.apply(_fp$monthElements, [0, fp.monthElements.length].concat(_toConsumableArray(fp.monthElements.map(function () {
+        // eslint-disable-next-line no-underscore-dangle
+        var monthElement = fp._createElement('span', config.classFlatpickrCurrentMonth);
+
+        monthElement.textContent = monthToStr(fp.currentMonth, config.shorthand === true, fp.l10n);
+        fp.yearElements[0].closest(config.selectorFlatpickrMonthYearContainer).insertBefore(monthElement, fp.yearElements[0].closest(config.selectorFlatpickrYearContainer));
+        return monthElement;
+      }))));
+    };
+
+    var updateCurrentMonth = function updateCurrentMonth() {
+      var monthStr = monthToStr(fp.currentMonth, config.shorthand === true, fp.l10n);
+      fp.yearElements.forEach(function (elem) {
+        var currentMonthContainer = elem.closest(config.selectorFlatpickrMonthYearContainer);
+        Array.prototype.forEach.call(currentMonthContainer.querySelectorAll('.cur-month'), function (monthElement) {
+          monthElement.textContent = monthStr;
+        });
+      });
+    };
+
+    var register = function register() {
+      fp.loadedPlugins.push('carbonFlatpickrMonthSelectPlugin');
+    };
+
+    return {
+      onMonthChange: updateCurrentMonth,
+      onValueUpdate: updateCurrentMonth,
+      onOpen: updateCurrentMonth,
+      onReady: [setupElements, updateCurrentMonth, register]
+    };
+  };
+};
+/**
+ * Determine if every child in a list of children has no label specified
+ * @param {Array<ReactElement>} children
+ * @returns {boolean}
+ */
+
+
+function isLabelTextEmpty(children) {
+  return children.every(function (child) {
+    return !child.props.labelText;
+  });
+}
+
+var rightArrowHTML = "<svg width=\"16px\" height=\"16px\" viewBox=\"0 0 16 16\">\n  <polygon points=\"11,8 6,13 5.3,12.3 9.6,8 5.3,3.7 6,3 \"/>\n  <rect width=\"16\" height=\"16\" style=\"fill:none\" />\n</svg>";
+var leftArrowHTML = "<svg width=\"16px\" height=\"16px\" viewBox=\"0 0 16 16\">\n  <polygon points=\"5,8 10,3 10.7,3.7 6.4,8 10.7,12.3 10,13 \"/>\n  <rect width=\"16\" height=\"16\" style=\"fill:none\" />\n</svg>";
+
+function updateClassNames(calendar, prefix) {
+  var calendarContainer = calendar.calendarContainer;
+  var daysContainer = calendar.days;
+
+  if (calendarContainer && daysContainer) {
+    // calendarContainer and daysContainer are undefined if flatpickr detects a mobile device
+    calendarContainer.classList.add("".concat(prefix, "--date-picker__calendar"));
+    calendarContainer.querySelector('.flatpickr-month').classList.add("".concat(prefix, "--date-picker__month"));
+    calendarContainer.querySelector('.flatpickr-weekdays').classList.add("".concat(prefix, "--date-picker__weekdays"));
+    calendarContainer.querySelector('.flatpickr-days').classList.add("".concat(prefix, "--date-picker__days"));
+    forEach.call(calendarContainer.querySelectorAll('.flatpickr-weekday'), function (item) {
+      var currentItem = item;
+      currentItem.innerHTML = currentItem.innerHTML.replace(/\s+/g, '');
+      currentItem.classList.add("".concat(prefix, "--date-picker__weekday"));
+    });
+    forEach.call(daysContainer.querySelectorAll('.flatpickr-day'), function (item) {
+      item.classList.add("".concat(prefix, "--date-picker__day"));
+
+      if (item.classList.contains('today') && calendar.selectedDates.length > 0) {
+        item.classList.add('no-border');
+      } else if (item.classList.contains('today') && calendar.selectedDates.length === 0) {
+        item.classList.remove('no-border');
+      }
+    });
+  }
+}
+
+function DatePicker(_ref) {
+  var _cx;
+
+  var allowInput = _ref.allowInput,
+      appendTo = _ref.appendTo,
+      children = _ref.children,
+      className = _ref.className,
+      _ref$dateFormat = _ref.dateFormat,
+      dateFormat = _ref$dateFormat === void 0 ? 'm/d/Y' : _ref$dateFormat,
+      datePickerType = _ref.datePickerType,
+      disable = _ref.disable,
+      enable = _ref.enable,
+      inline = _ref.inline,
+      _ref$light = _ref.light,
+      light = _ref$light === void 0 ? false : _ref$light,
+      _ref$locale = _ref.locale,
+      locale = _ref$locale === void 0 ? 'en' : _ref$locale,
+      maxDate = _ref.maxDate,
+      minDate = _ref.minDate,
+      onChange = _ref.onChange,
+      onClose = _ref.onClose,
+      onOpen = _ref.onOpen,
+      _ref$short = _ref.short,
+      short = _ref$short === void 0 ? false : _ref$short,
+      value = _ref.value,
+      rest = _objectWithoutProperties(_ref, _excluded);
+
+  var prefix = usePrefix();
+  var startInputField = useRef(null);
+  var endInputField = useRef(null);
+  var calendarRef = useRef(null);
+  var savedOnChange = useSavedCallback(onChange);
+  var savedOnClose = useSavedCallback(onClose);
+  var savedOnOpen = useSavedCallback(onOpen);
+  var datePickerClasses = cx("".concat(prefix, "--date-picker"), (_cx = {}, _defineProperty(_cx, "".concat(prefix, "--date-picker--short"), short), _defineProperty(_cx, "".concat(prefix, "--date-picker--light"), light), _defineProperty(_cx, "".concat(prefix, "--date-picker--simple"), datePickerType === 'simple'), _defineProperty(_cx, "".concat(prefix, "--date-picker--single"), datePickerType === 'single'), _defineProperty(_cx, "".concat(prefix, "--date-picker--range"), datePickerType === 'range'), _defineProperty(_cx, "".concat(prefix, "--date-picker--nolabel"), datePickerType === 'range' && isLabelTextEmpty(children)), _cx));
+  var wrapperClasses = cx("".concat(prefix, "--form-item"), _defineProperty({}, className, className));
+  var childrenWithProps = React__default.Children.toArray(children).map(function (child, index) {
+    if (index === 0 && child.type === React__default.createElement(DatePickerInput, child.props).type) {
+      return /*#__PURE__*/React__default.cloneElement(child, {
+        datePickerType: datePickerType,
+        ref: startInputField,
+        openCalendar: function openCalendar() {
+          if (calendarRef.current) {
+            calendarRef.current.open();
+          }
+        }
+      });
+    }
+
+    if (index === 1 && child.type === React__default.createElement(DatePickerInput, child.props).type) {
+      return /*#__PURE__*/React__default.cloneElement(child, {
+        datePickerType: datePickerType,
+        ref: endInputField,
+        openCalendar: function openCalendar() {
+          if (calendarRef.current) {
+            calendarRef.current.open();
+          }
+        }
+      });
+    }
+
+    if (index === 0) {
+      return /*#__PURE__*/React__default.cloneElement(child, {
+        ref: startInputField
+      });
+    }
+
+    if (index === 1) {
+      return /*#__PURE__*/React__default.cloneElement(child, {
+        ref: endInputField
+      });
+    }
+  });
+  useEffect(function () {
+    var _flatpickr;
+
+    if (datePickerType !== 'single' && datePickerType !== 'range') {
+      return;
+    }
+
+    if (startInputField.current === null) {
+      return;
+    }
+
+    var onHook = function onHook(_electedDates, _dateStr, instance, prefix) {
+      updateClassNames(instance, prefix);
+    }; // Logic to determine if `enable` or `disable` will be passed down. If neither
+    // is provided, we return the default empty disabled array, allowing all dates.
+
+
+    var enableOrDisable = enable ? 'enable' : 'disable';
+    var enableOrDisableArr;
+
+    if (!enable && !disable) {
+      enableOrDisableArr = [];
+    } else if (enable) {
+      enableOrDisableArr = enable;
+    } else {
+      enableOrDisableArr = disable;
+    }
+
+    var localeData;
+
+    if (_typeof(locale) === 'object') {
+      var location = locale.locale ? locale.locale : 'en';
+      localeData = _objectSpread2(_objectSpread2({}, l10n[location]), locale);
+    } else {
+      localeData = l10n[locale];
+    }
+
+    var start = startInputField.current;
+    var end = endInputField.current;
+    var calendar = new flatpickr(start, (_flatpickr = {
+      inline: inline !== null && inline !== void 0 ? inline : false,
+      disableMobile: true,
+      defaultDate: value,
+      mode: datePickerType,
+      allowInput: allowInput !== null && allowInput !== void 0 ? allowInput : true,
+      dateFormat: dateFormat,
+      locale: localeData
+    }, _defineProperty(_flatpickr, enableOrDisable, enableOrDisableArr), _defineProperty(_flatpickr, "minDate", minDate), _defineProperty(_flatpickr, "maxDate", maxDate), _defineProperty(_flatpickr, "plugins", [datePickerType === 'range' ? new carbonFlatpickrRangePlugin({
+      input: endInputField.current
+    }) : function () {}, appendTo ? carbonFlatpickrAppendToPlugin({
+      appendTo: appendTo
+    }) : function () {}, carbonFlatpickrMonthSelectPlugin({
+      selectorFlatpickrMonthYearContainer: '.flatpickr-current-month',
+      selectorFlatpickrYearContainer: '.numInputWrapper',
+      selectorFlatpickrCurrentMonth: '.cur-month',
+      classFlatpickrCurrentMonth: 'cur-month'
+    }), carbonFlatpickrFixEventsPlugin({
+      inputFrom: startInputField.current,
+      inputTo: endInputField.current
+    })]), _defineProperty(_flatpickr, "clickOpens", true), _defineProperty(_flatpickr, "nextArrow", rightArrowHTML), _defineProperty(_flatpickr, "prevArrow", leftArrowHTML), _defineProperty(_flatpickr, "onChange", savedOnChange), _defineProperty(_flatpickr, "onClose", savedOnClose), _defineProperty(_flatpickr, "onReady", onHook), _defineProperty(_flatpickr, "onMonthChange", onHook), _defineProperty(_flatpickr, "onYearChange", onHook), _defineProperty(_flatpickr, "onOpen", function onOpen() {
+      onHook.apply(void 0, arguments);
+      savedOnOpen.apply(void 0, arguments);
+    }), _defineProperty(_flatpickr, "onValueUpdate", onHook), _flatpickr));
+    calendarRef.current = calendar;
+
+    function handleArrowDown(event) {
+      if (match(event, ArrowDown)) {
+        var calendarContainer = calendar.calendarContainer,
+            fpSelectedDateElem = calendar.selectedDateElem,
+            fptodayDateElem = calendar.todayDateElem;
+        var selectedDateElem = calendarContainer.querySelector('.selected') && fpSelectedDateElem;
+        var todayDateElem = calendarContainer.querySelector('.today') && fptodayDateElem;
+        (selectedDateElem || todayDateElem || calendarContainer.querySelector('.flatpickr-day[tabindex]') || calendarContainer).focus();
+      }
+    }
+
+    function handleOnChange() {
+      if (start.value !== '') {
+        return;
+      }
+
+      if (!calendar.selectedDates) {
+        return;
+      }
+
+      if (calendar.selectedDates.length === 0) {
+        return;
+      }
+
+      calendar.clear();
+      calendar.input.focus();
+    }
+
+    if (start) {
+      start.addEventListener('keydown', handleArrowDown);
+      start.addEventListener('change', handleOnChange); // Flatpickr's calendar dialog is not rendered in a landmark causing an
+      // error with IBM Equal Access Accessibility Checker so we add an aria
+      // role to the container div.
+
+      calendar.calendarContainer.setAttribute('role', 'region'); // IBM EAAC requires an aria-label on a role='region'
+
+      calendar.calendarContainer.setAttribute('aria-label', 'calendar-container');
+    }
+
+    if (end) {
+      end.addEventListener('keydown', handleArrowDown);
+      end.addEventListener('change', handleOnChange);
+    } //component did unmount equivalent
+
+
+    return function () {
+      // Note: if the `startInputField` ref is undefined then calendar will be
+      // of type: Array and `destroy` will not be defined
+      if (calendar && calendar.destroy) {
+        calendar.destroy();
+      }
+
+      if (start) {
+        start.removeEventListener('keydown', handleArrowDown);
+        start.removeEventListener('change', handleOnChange);
+      }
+
+      if (end) {
+        end.removeEventListener('keydown', handleArrowDown);
+        end.removeEventListener('change', handleOnChange);
+      }
+    };
+  }, [savedOnChange, savedOnClose, savedOnOpen]); //eslint-disable-line react-hooks/exhaustive-deps
+
+  useEffect(function () {
+    if (calendarRef.current) {
+      calendarRef.current.set({
+        dateFormat: dateFormat
+      });
+    }
+  }, [dateFormat]);
+  useEffect(function () {
+    if (calendarRef.current && minDate) {
+      calendarRef.current.set('minDate', minDate);
+    }
+  }, [minDate]);
+  useEffect(function () {
+    if (calendarRef.current && maxDate) {
+      calendarRef.current.set('maxDate', maxDate);
+    }
+  }, [maxDate]);
+  useEffect(function () {
+    if (calendarRef.current && disable) {
+      calendarRef.current.set('disbale', disable);
+    }
+  }, [disable]);
+  useEffect(function () {
+    if (calendarRef.current && enable) {
+      calendarRef.current.set('enable', enable);
+    }
+  }, [enable]);
+  useEffect(function () {
+    if (calendarRef.current && inline) {
+      calendarRef.current.set('inline', inline);
+    }
+  }, [inline]);
+  useEffect(function () {
+    if (calendarRef.current) {
+      calendarRef.current.set({
+        value: value
+      });
+      updateClassNames(calendarRef.current, prefix); //for simple date picker w/o calendar; initial mount may not have value
+    } else if (!calendarRef.current && value) {
+      startInputField.current.value = value;
+    }
+  }, [value, prefix]);
+  return /*#__PURE__*/React__default.createElement("div", _extends({
+    className: wrapperClasses
+  }, rest), /*#__PURE__*/React__default.createElement("div", {
+    className: datePickerClasses
+  }, childrenWithProps));
+}
+
+DatePicker.propTypes = {
+  /**
+   * flatpickr prop passthrough. Allows the user to enter a date directly
+   * into the input field
+   */
+  allowInput: PropTypes.bool,
+
+  /**
+   * The DOM element the Flatpicker should be inserted into. `<body>` by default.
+   */
+  appendTo: PropTypes.object,
+
+  /**
+   * The child nodes.
+   */
+  children: PropTypes.node,
+
+  /**
+   * The CSS class names.
+   */
+  className: PropTypes.string,
+
+  /**
+   * The date format.
+   */
+  dateFormat: PropTypes.string,
+
+  /**
+   * 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: PropTypes.oneOf(['simple', 'single', 'range']),
+
+  /**
+   * The flatpickr `disable` option that allows a user to disable certain dates.
+   */
+  disable: PropTypes.array,
+
+  /**
+   * The flatpickr `enable` option that allows a user to enable certain dates.
+   */
+  enable: PropTypes.array,
+
+  /**
+   * The flatpickr `inline` option.
+   */
+  inline: PropTypes.bool,
+
+  /**
+   * `true` to use the light version.
+   */
+  light: PropTypes.bool,
+
+  /**
+   *  The language locale used to format the days of the week, months, and numbers. The full list of supported locales can be found here https://github.com/flatpickr/flatpickr/tree/master/src/l10n
+   */
+  locale: PropTypes.oneOfType([PropTypes.object, PropTypes.oneOf(['ar', // Arabic
+  'at', // Austria
+  'az', // Azerbaijan
+  'be', // Belarusian
+  'bg', // Bulgarian
+  'bn', // Bangla
+  'bs', // Bosnia
+  'cat', // Catalan
+  'cs', // Czech
+  'cy', // Welsh
+  'da', // Danish
+  'de', // German
+  'en', // English
+  'eo', // Esperanto
+  'es', // Spanish
+  'et', // Estonian
+  'fa', // Persian
+  'fi', // Finnish
+  'fo', // Faroese
+  'fr', // French
+  'ga', // Gaelic
+  'gr', // Greek
+  'he', // Hebrew
+  'hi', // Hindi
+  'hr', // Croatian
+  'hu', // Hungarian
+  'id', // Indonesian
+  'is', // Icelandic
+  'it', // Italian
+  'ja', // Japanese
+  'ka', // Georgian
+  'km', // Khmer
+  'ko', // Korean
+  'kz', // Kazakh
+  'lt', // Lithuanian
+  'lv', // Latvian
+  'mk', // Macedonian
+  'mn', // Mongolian
+  'ms', // Malaysian
+  'my', // Burmese
+  'nl', // Dutch
+  'no', // Norwegian
+  'pa', // Punjabi
+  'pl', // Polish
+  'pt', // Portuguese
+  'ro', // Romanian
+  'ru', // Russian
+  'si', // Sinhala
+  'sk', // Slovak
+  'sl', // Slovenian
+  'sq', // Albanian
+  'sr', // Serbian
+  'sv', // Swedish
+  'th', // Thai
+  'tr', // Turkish
+  'uk', // Ukrainian
+  'uz', // Uzbek
+  'uz_latn', // Uzbek Latin
+  'vn', // Vietnamese
+  'zh_tw', // Mandarin Traditional
+  'zh' // Mandarin
+  ])]),
+
+  /**
+   * The maximum date that a user can pick to.
+   */
+  maxDate: PropTypes.string,
+
+  /**
+   * The minimum date that a user can start picking from.
+   */
+  minDate: PropTypes.string,
+
+  /**
+   * The `change` event handler.
+   */
+  onChange: PropTypes.func,
+
+  /**
+   * The `close` event handler.
+   */
+  onClose: PropTypes.func,
+
+  /**
+   * The `open` event handler.
+   */
+  onOpen: PropTypes.func,
+
+  /**
+   * `true` to use the short version.
+   */
+  short: PropTypes.bool,
+
+  /**
+   * The value of the date value provided to flatpickr, could
+   * be a date, a date number, a date string, an array of dates.
+   */
+  value: PropTypes.oneOfType([PropTypes.string, PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.string, PropTypes.number, PropTypes.object])), PropTypes.object, PropTypes.number])
+};
+
+export { DatePicker as default };

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

@@ -0,0 +1,58 @@
+/**
+ * Copyright IBM Corp. 2016, 2021
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+/**
+ * @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
+    };
+  };
+});
+
+export { carbonFlatpickrAppendToPlugin as default };