@carbon/react 1.3.0 → 1.4.0-rc.0

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

@@ -1,562 +0,0 @@
-/**
- * Copyright IBM Corp. 2016, 2022
- *
- * 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", function onChange() {
-      if (savedOnChange) {
-        savedOnChange.apply(void 0, arguments);
-      }
-    }), _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/DatePickerInput/index.js

@@ -1,15 +0,0 @@
-/**
- * Copyright IBM Corp. 2016, 2022
- *
- * 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 * as FeatureFlags from '@carbon/feature-flags';
-import DatePickerInputNext from './next/DatePickerInput.js';
-import DatePickerInput$2 from './DatePickerInput.js';
-
-var DatePickerInput = FeatureFlags.enabled('enable-v11-release') ? DatePickerInputNext : DatePickerInput$2;
-var DatePickerInput$1 = DatePickerInput;
-
-export { DatePickerInput$1 as default };