@hitachivantara/uikit-react-core 2.23.2

package/dist/modern/DatePicker/DatePicker.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DatePicker.js","names":["React","PropTypes","isNil","ClickAwayListener","Popper","withStyles","Calendar","CalendarIcon","clsx","isKeypress","KeyboardCodes","setId","Typography","Actions","styles","withLabels","withId","convertISOStringDateToDate","DEFAULT_LOCALE","getDateISO","getFormattedDate","isDate","isValidLocale","DEFAULT_LABELS","applyLabel","cancelLabel","title","undefined","placeholder","rangeStart","rangeEnd","HvDatePicker","Component","getDerivedStateFromProps","props","state","rangeMode","locale","value","startValue","endValue","originalValue","originalStartValue","originalEndValue","stateLocale","validLocale","resolveStateFromProps","constructor","open","setState","calendarOpen","data","created","flipped","placement","calendarPlacement","calendarFlipped","tempStartSelectedDate","tempEndSelectedDate","setRangeDate","tempSelectedDate","setSingleDate","cancelDateSelection","event","Enter","handleCalendarIconClick","currentTarget","calendarAnchorElement","id","target","selectedDate","startSelectedDate","endSelectedDate","setCalendarOpen","date","closeCalendar","onChange","showActions","startDate","endDate","endVisibleDate","startVisibleDate","classes","labels","label","actionLabels","rangeCalendarsFooter","rangeFooterLeft","rangeFooterRight","handleCancelAction","handleApplyAction","singleCalendarFooter","calendarContainer","close","handleSingleCalendarDateChange","renderActions","rangeMainContainer","rangeCalendarsContainer","rangeLeftCalendarContainer","handleRangeCalendarDateStartChange","rangeRightCalendarContainer","handleRangeCalendarDateEndChange","className","naming","renderLabel","root","inputCalendarOpen","inputCalendarClosed","handleKeyboardClick","element","inputElement","input","getFormattedSelectedDate","icon","theme","horizontalPlacement","disablePortal","escapeWithReference","RenderCalendar","renderRangeCalendars","renderSingleCalendar","onCreate","createCalendarPlacement","onUpdate","updateCalendarPlacement","preventOverflow","zIndex","tooltip","handleCalendarClickAway","popperRoot","listBorderDown","calendarOpenUp","calendarOpenDown","listBorderUp","render","datePickerContainer","renderInput","renderPopper","propTypes","string","shape","instanceOf","Object","isRequired","bool","oneOf","func","defaultProps","name","withTheme"],"sources":["../../../src/DatePicker/DatePicker.js"],"sourcesContent":["import React from \"react\";\nimport PropTypes from \"prop-types\";\nimport isNil from \"lodash/isNil\";\nimport { ClickAwayListener, Popper, withStyles } from \"@material-ui/core\";\nimport { Calendar as CalendarIcon } from \"@hitachivantara/uikit-react-icons\";\nimport clsx from \"clsx\";\nimport { isKeypress, KeyboardCodes, setId } from \"../utils\";\nimport Typography from \"../Typography\";\nimport Calendar from \"./Calendar\";\nimport Actions from \"./Actions\";\nimport styles from \"./styles\";\nimport withLabels from \"../withLabels\";\nimport withId from \"../withId\";\nimport {\n  convertISOStringDateToDate,\n  DEFAULT_LOCALE,\n  getDateISO,\n  getFormattedDate,\n  isDate,\n  isValidLocale,\n} from \"./Calendar/utils\";\n\nconst DEFAULT_LABELS = {\n  applyLabel: \"Apply\",\n  cancelLabel: \"Cancel\",\n  title: undefined,\n  placeholder: \"Select a date\",\n  rangeStart: \"Start date\",\n  rangeEnd: \"End date\",\n};\n\n/**\n * A graphical widget which allows the user to select a date.\n */\nclass HvDatePicker extends React.Component {\n  /**\n   * Triggered right before the Render() function of the components.\n   * Here we can update the state when a prop is changed.\n   *\n   * @static\n   * @param {Object} props - The new props object.\n   * @param {Object} state - The current state object.\n   *\n   * @returns {Object} - The updated state\n   * @memberOf HvDatePicker\n   */\n  static getDerivedStateFromProps(props, state) {\n    const { rangeMode, locale, value, startValue, endValue } = props;\n\n    const { originalValue, originalStartValue, originalEndValue, locale: stateLocale } = state;\n\n    if (locale !== stateLocale) {\n      const validLocale = isValidLocale(locale) ? locale : DEFAULT_LOCALE;\n      return {\n        ...state,\n        locale: validLocale,\n      };\n    }\n    if (\n      value !== originalValue ||\n      startValue !== originalStartValue ||\n      endValue !== originalEndValue\n    ) {\n      return {\n        ...state,\n        ...HvDatePicker.resolveStateFromProps(value, startValue, endValue, rangeMode),\n      };\n    }\n    return null;\n  }\n\n  /**\n   * Resolves the state using the received props.\n   *\n   * @memberOf HvDatePicker\n   */\n  static resolveStateFromProps = (value, startValue, endValue, rangeMode) => {\n    if (rangeMode) {\n      const startSelectedDate =\n        startValue && startValue !== \"\" ? convertISOStringDateToDate(startValue) : null;\n      const endSelectedDate =\n        endValue && endValue !== \"\" ? convertISOStringDateToDate(endValue) : null;\n      // Range mode state\n      return {\n        startSelectedDate,\n        endSelectedDate,\n        tempStartSelectedDate: startSelectedDate,\n        tempEndSelectedDate: endSelectedDate,\n        originalStartValue: startValue,\n        originalEndValue: endValue,\n        startVisibleDate: null,\n        endVisibleDate: null,\n      };\n    }\n\n    // Single calendar mode state\n    const selectedDate = value && value !== \"\" ? convertISOStringDateToDate(value) : null;\n\n    return {\n      selectedDate,\n      tempSelectedDate: selectedDate,\n      originalValue: value,\n    };\n  };\n\n  constructor(props) {\n    super(props);\n\n    const { locale } = this.props;\n\n    this.state = {\n      created: false,\n      ...HvDatePicker.resolveStateFromProps(),\n      calendarOpen: false,\n      calendarAnchorElement: null,\n      locale: isValidLocale(locale) ? locale : DEFAULT_LOCALE,\n    };\n  }\n\n  /**\n   * Changes the calendar open state according to the received flag.\n   *\n   * @param {boolean} open - Opens / closes the calendar according to this flag.\n   * @memberOf HvDatePicker\n   */\n  setCalendarOpen = (open) => {\n    this.setState({\n      calendarOpen: open,\n    });\n  };\n\n  createCalendarPlacement = (data) => {\n    const { created } = this.state;\n    const { flipped, placement } = data;\n    if (!created) {\n      this.setState({\n        calendarPlacement: placement,\n        calendarFlipped: flipped,\n        created: true,\n      });\n    }\n  };\n\n  /**\n   * Updates the calendar placement in case the Popper placement changed.\n   *\n   * @param {Object} data - The data provided by the popper plugin.\n   * @memberOf HvDatePicker\n   */\n  updateCalendarPlacement = (data) => {\n    const { calendarFlipped } = this.state;\n    if (calendarFlipped !== data.flipped) {\n      this.setState({\n        calendarPlacement: data.placement,\n        calendarFlipped: data.flipped,\n      });\n    }\n  };\n\n  /**\n   * Handles the `Apply` action. Both single and ranged modes are handled here.\n   *\n   * @memberOf HvDatePicker\n   */\n  handleApplyAction = () => {\n    const { rangeMode } = this.props;\n\n    if (rangeMode) {\n      const { tempStartSelectedDate, tempEndSelectedDate } = this.state;\n\n      if (tempStartSelectedDate && tempEndSelectedDate) {\n        this.setRangeDate(tempStartSelectedDate, tempEndSelectedDate);\n      }\n    } else {\n      const { tempSelectedDate } = this.state;\n\n      if (tempSelectedDate) {\n        this.setSingleDate(tempSelectedDate, true);\n      }\n    }\n  };\n\n  /**\n   * Handles the `Cancel` action. Both single and ranged modes are handled here.\n   *\n   * @memberOf HvDatePicker\n   */\n  handleCancelAction = () => {\n    this.cancelDateSelection();\n  };\n\n  /**\n   * Handle keyboard click in the input.\n   *\n   * @param event\n   */\n  handleKeyboardClick = (event) => {\n    if (isKeypress(event, KeyboardCodes.Enter)) {\n      this.handleCalendarIconClick(event);\n    }\n  };\n\n  /**\n   * Handles the click on the Calendar icon inside the input.\n   *\n   * @memberOf HvDatePicker\n   */\n  handleCalendarIconClick = (event) => {\n    const { currentTarget } = event;\n\n    this.setState(\n      (state) => ({\n        calendarAnchorElement: currentTarget,\n        calendarOpen: !state.calendarOpen,\n      }),\n      () => {\n        const { calendarOpen } = this.state;\n        if (!calendarOpen) {\n          this.cancelDateSelection();\n        }\n      }\n    );\n  };\n\n  /**\n   * Handles the event of clicking away from the Calendar.\n   *\n   * @param {Object} event - The event triggered when clicking outside of the calendar container.\n   * @memberOf HvDatePicker\n   */\n  handleCalendarClickAway = (event) => {\n    const { id } = this.props;\n\n    if (event.target.id !== `${id}`) {\n      this.cancelDateSelection();\n    }\n  };\n\n  /**\n   * Gets the formatted selected value to be displayed on the input.\n   *\n   * @memberOf HvDatePicker\n   */\n  getFormattedSelectedDate = () => {\n    const { rangeMode } = this.props;\n    const { locale, selectedDate, startSelectedDate, endSelectedDate } = this.state;\n\n    if (rangeMode) {\n      if (isDate(startSelectedDate) && isDate(endSelectedDate)) {\n        return `${getFormattedDate(startSelectedDate, locale)} - ${getFormattedDate(\n          endSelectedDate,\n          locale\n        )}`;\n      }\n    }\n\n    return isDate(selectedDate) ? getFormattedDate(selectedDate, locale) : \"\";\n  };\n\n  /**\n   * Cancels the date selection and closes the Calendar component.\n   *\n   * @memberOf HvDatePicker\n   */\n  cancelDateSelection = () => {\n    const { rangeMode } = this.props;\n    const { selectedDate, startSelectedDate, endSelectedDate } = this.state;\n\n    if (rangeMode) {\n      this.setState({\n        tempStartSelectedDate: startSelectedDate,\n        tempEndSelectedDate: endSelectedDate,\n      });\n    } else {\n      this.setState({\n        tempSelectedDate: selectedDate,\n      });\n    }\n\n    this.setCalendarOpen(false);\n  };\n\n  /**\n   * Single Calendar\n   */\n\n  /**\n   * Set the date in the input, and changes the calendar visibility (hide).\n   *\n   * @param {Date} date - Date value that was selected.\n   * @param closeCalendar\n   * @memberOf HvDatePicker\n   */\n  setSingleDate = (date, closeCalendar) => {\n    const { onChange } = this.props;\n\n    this.setState({ selectedDate: date, tempSelectedDate: date });\n\n    this.setCalendarOpen(!closeCalendar);\n\n    if (typeof onChange === \"function\") {\n      onChange(getDateISO(date));\n    }\n  };\n\n  /**\n   * Handles the `handleDateChange` action from the Calendar component when in single mode. If the `showActions` prop\n   * is set to false then the date is immediately applied and the Calendar closed, otherwise the Calendar remains open.\n   *\n   * @param {Date} date - Date value received from the Calendar component.\n   * @param {boolean} closeCalendar - if it should close the date picker.\n   * @memberOf HvDatePicker\n   */\n  handleSingleCalendarDateChange = (date, closeCalendar = true) => {\n    const { showActions } = this.props;\n\n    if (!showActions) {\n      this.setSingleDate(date, closeCalendar);\n    } else {\n      this.setState({ tempSelectedDate: date });\n    }\n  };\n\n  /**\n   * Range Calendars functions\n   */\n\n  /**\n   * Set the date in the input, and changes the calendar visibility (hide).\n   *\n   * @param {Date} startDate - Start date value that was selected.\n   * @param {Date} endDate - End date value that was selected.\n   * @memberOf HvDatePicker\n   */\n  setRangeDate = (startDate, endDate) => {\n    const { onChange } = this.props;\n\n    this.setState({\n      startSelectedDate: startDate,\n      endSelectedDate: endDate,\n    });\n\n    this.setCalendarOpen(false);\n\n    if (typeof onChange === \"function\") {\n      onChange(getDateISO(startDate), getDateISO(endDate));\n    }\n  };\n\n  /**\n   * Handles the `handleDateChange` action from the Calendar component associated to the Start date when in range mode.\n   *\n   * @param {Date} date - Date value received from the Calendar component.\n   * @memberOf HvDatePicker\n   */\n  handleRangeCalendarDateStartChange = (date) => {\n    const { tempEndSelectedDate } = this.state;\n\n    if (tempEndSelectedDate > date) {\n      this.setState({ tempStartSelectedDate: date });\n    } else {\n      this.setState({\n        tempStartSelectedDate: date,\n        tempEndSelectedDate: date,\n        endVisibleDate: date,\n      });\n    }\n  };\n\n  /**\n   * Handles the `handleDateChange` action from the Calendar component associated to the end date when in range mode.\n   *\n   * @param {Date} date - Date value received from the Calendar component.\n   * @memberOf HvDatePicker\n   */\n  handleRangeCalendarDateEndChange = (date) => {\n    const { tempStartSelectedDate } = this.state;\n\n    if (tempStartSelectedDate < date) {\n      this.setState({ tempEndSelectedDate: date });\n    } else {\n      this.setState({\n        tempEndSelectedDate: date,\n        tempStartSelectedDate: date,\n        startVisibleDate: date,\n      });\n    }\n  };\n\n  /**\n   * Renderers\n   */\n\n  /**\n   * Renders the Label element.\n   *\n   * @memberOf HvDatePicker\n   */\n  renderLabel = () => {\n    const { id, classes, labels } = this.props;\n    return (\n      <Typography\n        id={setId(id, \"label\")}\n        variant=\"labelText\"\n        component=\"label\"\n        className={classes.label}\n      >\n        {labels.title}\n      </Typography>\n    );\n  };\n\n  /**\n   * Renders the container for the action elements.\n   *\n   * @memberOf HvDatePicker\n   */\n  renderActions = () => {\n    const { classes, labels, rangeMode, id } = this.props;\n\n    const actionLabels = {\n      applyLabel: labels.applyLabel,\n      cancelLabel: labels.cancelLabel,\n    };\n\n    if (rangeMode) {\n      return (\n        <div className={classes.rangeCalendarsFooter}>\n          <div className={classes.rangeFooterLeft} />\n          <div className={classes.rangeFooterRight}>\n            <Actions\n              id={setId(id, \"action\")}\n              onCancel={() => this.handleCancelAction()}\n              onApply={() => this.handleApplyAction()}\n              labels={actionLabels}\n            />\n          </div>\n        </div>\n      );\n    }\n\n    return (\n      <div className={classes.singleCalendarFooter}>\n        <Actions\n          id={setId(id, \"action\")}\n          onCancel={() => this.handleCancelAction()}\n          onApply={() => this.handleApplyAction()}\n          labels={actionLabels}\n        />\n      </div>\n    );\n  };\n\n  /**\n   * Renders one calendar component.\n   *\n   * @memberOf Calendar\n   */\n  renderSingleCalendar = () => {\n    const { classes, showActions, rangeMode, id } = this.props;\n    const { tempSelectedDate, locale, calendarFlipped } = this.state;\n\n    return (\n      <div className={classes.calendarContainer}>\n        <Calendar\n          id={setId(id, \"calendar\")}\n          handleDateChange={(date, close) => this.handleSingleCalendarDateChange(date, close)}\n          selectedDate={tempSelectedDate}\n          locale={locale}\n          rangeMode={rangeMode}\n          flipped={calendarFlipped}\n        />\n        {showActions && this.renderActions()}\n      </div>\n    );\n  };\n\n  /**\n   * Renders two calendar for range mode.\n   *\n   * @memberOf Calendar\n   */\n  renderRangeCalendars = () => {\n    const { id, classes, rangeMode, labels } = this.props;\n    const {\n      tempStartSelectedDate,\n      tempEndSelectedDate,\n      startVisibleDate,\n      endVisibleDate,\n      locale,\n      calendarFlipped,\n    } = this.state;\n    return (\n      <div className={classes.rangeMainContainer}>\n        <div className={classes.rangeCalendarsContainer}>\n          <div className={classes.rangeLeftCalendarContainer}>\n            <Calendar\n              id={setId(id, \"calendar-start\")}\n              handleDateChange={(date) => this.handleRangeCalendarDateStartChange(date)}\n              selectedDate={tempStartSelectedDate}\n              visibleDate={startVisibleDate}\n              locale={locale}\n              rangeMode={rangeMode}\n              label={labels.rangeStart}\n              flipped={calendarFlipped}\n            />\n          </div>\n\n          <div className={classes.rangeRightCalendarContainer}>\n            <Calendar\n              id={setId(id, \"calendar-end\")}\n              handleDateChange={(date) => this.handleRangeCalendarDateEndChange(date)}\n              selectedDate={tempEndSelectedDate}\n              visibleDate={endVisibleDate}\n              locale={locale}\n              rangeMode={rangeMode}\n              label={labels.rangeEnd}\n              flipped={calendarFlipped}\n            />\n          </div>\n        </div>\n        {this.renderActions()}\n      </div>\n    );\n  };\n\n  /**\n   * Renders the input.\n   *\n   * @memberOf Calendar\n   */\n  renderInput = () => {\n    const { id, className, classes, labels } = this.props;\n    const { calendarOpen } = this.state;\n\n    const naming = {\n      \"aria-label\": isNil(labels) || isNil(labels.title) ? \"Date input\" : undefined,\n      \"aria-labelledby\": labels && labels.title ? setId(id, \"label\") : undefined,\n    };\n\n    return (\n      <>\n        {labels && labels.title && this.renderLabel()}\n        <div\n          className={clsx(className, classes.root, {\n            [classes.inputCalendarOpen]: calendarOpen,\n            [classes.inputCalendarClosed]: !calendarOpen,\n          })}\n          onKeyDown={this.handleKeyboardClick}\n          onClick={this.handleCalendarIconClick}\n          role=\"button\"\n          tabIndex={0}\n          id={id}\n          {...naming}\n        >\n          <input\n            ref={(element) => {\n              this.inputElement = element;\n            }}\n            className={classes.input}\n            value={this.getFormattedSelectedDate()}\n            placeholder={labels.placeholder}\n            type=\"text\"\n            readOnly\n            tabIndex={-1}\n            {...naming}\n          />\n          <CalendarIcon tabIndex={-1} className={classes.icon} />\n        </div>\n      </>\n    );\n  };\n\n  /**\n   * Renders the Popper component with the calendars inside.\n   *\n   * @memberOf HvDatePicker\n   */\n  renderPopper = () => {\n    const {\n      id,\n      classes,\n      theme,\n      rangeMode,\n      horizontalPlacement,\n      disablePortal,\n      escapeWithReference,\n    } = this.props;\n\n    const { calendarOpen, calendarAnchorElement, calendarFlipped } = this.state;\n\n    const RenderCalendar = rangeMode ? this.renderRangeCalendars() : this.renderSingleCalendar();\n    return (\n      <Popper\n        id={setId(id, \"tooltip\")}\n        open={calendarOpen}\n        placement={horizontalPlacement === \"left\" ? \"bottom-start\" : \"bottom-end\"}\n        anchorEl={calendarAnchorElement}\n        disablePortal={disablePortal}\n        popperOptions={{\n          onCreate: this.createCalendarPlacement,\n          onUpdate: this.updateCalendarPlacement,\n        }}\n        modifiers={{\n          preventOverflow: {\n            // Follows the anchor element outside of the boundaries.\n            escapeWithReference,\n          },\n        }}\n        style={{\n          zIndex: `${calendarFlipped ? theme.zIndex.tooltip : 1}`,\n        }}\n      >\n        <ClickAwayListener onClickAway={this.handleCalendarClickAway}>\n          <div>\n            {!calendarFlipped && (\n              <div className={clsx(classes.popperRoot, classes.listBorderDown)} />\n            )}\n            <div\n              className={clsx(classes.popperRoot, {\n                [classes.calendarOpenDown]: calendarOpen && !calendarFlipped,\n                [classes.calendarOpenUp]: calendarOpen && calendarFlipped,\n              })}\n            >\n              {RenderCalendar}\n            </div>\n            {calendarFlipped && <div className={clsx(classes.popperRoot, classes.listBorderUp)} />}\n          </div>\n        </ClickAwayListener>\n      </Popper>\n    );\n  };\n\n  /**\n   * Renders the DatePicker component.\n   *\n   * @returns\n   * @memberOf HvDatePicker\n   */\n  render() {\n    const { classes } = this.props;\n\n    return (\n      <div className={classes.datePickerContainer}>\n        {this.renderInput()}\n        {this.renderPopper()}\n      </div>\n    );\n  }\n}\n\nHvDatePicker.propTypes = {\n  /**\n   * Id to be applied to the root node.\n   */\n  id: PropTypes.string,\n  /**\n   * Class name to be applied.\n   */\n  className: PropTypes.string,\n  /**\n   * An object containing all the labels for the datepicker.\n   */\n  labels: PropTypes.shape({\n    /**\n     * Apply button label.\n     */\n    applyLabel: PropTypes.string,\n    /**\n     * Cancel button label.\n     */\n    cancelLabel: PropTypes.string,\n    /**\n     * Text above the input/dropdown.\n     */\n    title: PropTypes.string,\n    /**\n     * Start date label.\n     */\n    rangeStart: PropTypes.string,\n    /**\n     * End date label.\n     */\n    rangeEnd: PropTypes.string,\n    /**\n     * Text inside the input/dropdown\n     */\n    placeholder: PropTypes.string,\n  }),\n  /**\n   * A Jss Object used to override or extend the styles applied to the input/calendar box.\n   */\n  classes: PropTypes.instanceOf(Object).isRequired,\n  /**\n   * The initial value of the input when in single calendar mode.\n   */\n  value: PropTypes.string,\n  /**\n   * The initial value for the start date when in range mode.\n   */\n  startValue: PropTypes.string,\n  /**\n   * The initial value for the end date when in range mode.\n   */\n  endValue: PropTypes.string,\n  /**\n   * Flag informing if the the component should be in range mode or in single mode.\n   */\n  rangeMode: PropTypes.bool,\n  /**\n   * The placement where the calendar should be placed according to the input. Options are `left` or `right`.\n   * Note this prop only affects the calendar when in `rangeMode`.\n   */\n  horizontalPlacement: PropTypes.oneOf([\"left\", \"right\"]),\n  /**\n   * The calendar locale. If undefined, it uses calendar default\n   */\n  locale: PropTypes.string,\n  /**\n   * Controls if actions buttons are visible at the calendar.\n   */\n  showActions: PropTypes.bool,\n  /**\n   * Callback function to be triggered when the input value is changed\n   */\n  onChange: PropTypes.func,\n  /**\n   * The theme object provided by the withStyles component.\n   */\n  theme: PropTypes.instanceOf(Object).isRequired,\n  /**\n   * Disable the portal behavior. The children stay within it's parent DOM hierarchy.\n   */\n  disablePortal: PropTypes.bool,\n  /**\n   * Sets if the calendar container should follow the date picker input out of the screen or stay visible.\n   */\n  escapeWithReference: PropTypes.bool,\n};\n\nHvDatePicker.defaultProps = {\n  id: undefined,\n  rangeMode: false,\n  horizontalPlacement: \"left\",\n  value: undefined,\n  startValue: undefined,\n  endValue: undefined,\n  locale: DEFAULT_LOCALE,\n  showActions: false,\n  onChange: undefined,\n  disablePortal: true,\n  escapeWithReference: true,\n};\n\nexport default withStyles(styles, { name: \"HvDatePicker\", withTheme: true })(\n  withLabels(DEFAULT_LABELS)(withId(HvDatePicker))\n);\n"],"mappings":"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"}

package/dist/modern/DatePicker/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from "./DatePicker";
+export * from "./DatePicker";

package/dist/modern/DatePicker/index.js

@@ -0,0 +1,2 @@
+export { default } from "./DatePicker";
+//# sourceMappingURL=index.js.map

package/dist/modern/DatePicker/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["default"],"sources":["../../../src/DatePicker/index.js"],"sourcesContent":["export { default } from \"./DatePicker\";\n"],"mappings":"AAAA,SAASA,OAAT,QAAwB,cAAxB"}

package/dist/modern/DatePicker/styles.js

@@ -0,0 +1,153 @@
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+import { outlineStyles } from "../Focus/styles";
+const icon = {
+  position: "absolute",
+  right: 0,
+  bottom: 0,
+  width: "30px",
+  height: "30px"
+};
+
+const styles = theme => ({
+  root: {
+    position: "relative",
+    background: theme.palette.atmo1,
+    height: "32px",
+    paddingLeft: theme.spacing("xs"),
+    paddingRight: theme.spacing("md"),
+    fontFamily: theme.hv.typography.fontFamily,
+    "&:focus": _objectSpread({}, outlineStyles)
+  },
+  inputCalendarClosed: {
+    border: `1px solid ${theme.palette.atmo6}`,
+    "&:hover": {
+      cursor: "pointer",
+      border: `1px solid ${theme.palette.acce1}`
+    }
+  },
+  inputCalendarOpen: {
+    boxShadow: theme.hv.shadows[1],
+    border: `1px solid ${theme.palette.atmo1}`
+  },
+  noBorderTop: {
+    borderTop: "none"
+  },
+  noBorderBottom: {
+    borderBottom: "none"
+  },
+  input: _objectSpread(_objectSpread({
+    border: "none",
+    height: "30px",
+    width: "100%",
+    background: "transparent",
+    fontFamily: theme.hv.typography.fontFamily
+  }, theme.hv.typography.normalText), {}, {
+    "&:hover": {
+      cursor: "pointer"
+    },
+    "&:focus": {
+      outline: "none"
+    },
+    "&::placeholder": _objectSpread({
+      fontFamily: theme.hv.typography.fontFamily
+    }, theme.hv.typography.placeholderText)
+  }),
+  icon: _objectSpread(_objectSpread({}, icon), {}, {
+    cursor: "pointer",
+    "&:focus": _objectSpread({}, outlineStyles)
+  }),
+  iconClear: _objectSpread(_objectSpread({}, icon), {}, {
+    cursor: "pointer"
+  }),
+  datePickerContainer: {
+    position: "relative",
+    width: "320px"
+  },
+  label: {
+    marginBottom: theme.spacing("xs"),
+    display: "block"
+  },
+  calendarContainer: {
+    backgroundColor: theme.palette.atmo1,
+    width: "320px"
+  },
+  singleCalendarFooter: {
+    padding: theme.spacing("sm"),
+    textAlign: "right",
+    borderTop: `3px solid ${theme.palette.atmo2}`
+  },
+  rangeMainContainer: {
+    display: "flex",
+    flexDirection: "column",
+    backgroundColor: theme.palette.atmo1,
+    width: "640px"
+  },
+  rangeCalendarsContainer: {
+    display: "flex",
+    flexDirection: "row"
+  },
+  rangeLeftCalendarContainer: {
+    width: "50%"
+  },
+  rangeRightCalendarContainer: {
+    width: "50%"
+  },
+  rangeCalendarsFooter: {
+    display: "flex",
+    flexDirection: "row",
+    borderTop: `3px solid ${theme.palette.atmo2}`
+  },
+  rangeFooterLeft: {
+    width: "50%"
+  },
+  rangeFooterRight: {
+    width: "50%",
+    textAlign: "right",
+    padding: theme.spacing("sm")
+  },
+  actionsContainer: {
+    textAlign: "right"
+  },
+  borderTopNone: {
+    borderTop: "none"
+  },
+  borderBottomNone: {
+    borderBottom: "none"
+  },
+  borderTopDisplay: {
+    borderTop: `1px solid ${theme.palette.acce1}`
+  },
+  borderBottomDisplay: {
+    borderBottom: `1px solid ${theme.palette.acce1}`
+  },
+  popperRoot: {
+    display: "block"
+  },
+  listBorderDown: {
+    height: "10px",
+    width: "320px",
+    background: theme.palette.atmo1
+  },
+  listBorderUp: {
+    height: "10px",
+    boxShadow: " 0px -5px 5px -4px rgba(65,65,65,.12)",
+    width: "320px",
+    background: theme.palette.atmo1
+  },
+  calendarOpenDown: {
+    background: theme.palette.atmo1,
+    boxShadow: theme.hv.shadows[1]
+  },
+  calendarOpenUp: {
+    background: theme.palette.atmo1,
+    boxShadow: theme.hv.shadows[1]
+  }
+});
+
+export default styles;
+//# sourceMappingURL=styles.js.map

package/dist/modern/DatePicker/styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.js","names":["outlineStyles","icon","position","right","bottom","width","height","styles","theme","root","background","palette","atmo1","paddingLeft","spacing","paddingRight","fontFamily","hv","typography","inputCalendarClosed","border","atmo6","cursor","acce1","inputCalendarOpen","boxShadow","shadows","noBorderTop","borderTop","noBorderBottom","borderBottom","input","normalText","outline","placeholderText","iconClear","datePickerContainer","label","marginBottom","display","calendarContainer","backgroundColor","singleCalendarFooter","padding","textAlign","atmo2","rangeMainContainer","flexDirection","rangeCalendarsContainer","rangeLeftCalendarContainer","rangeRightCalendarContainer","rangeCalendarsFooter","rangeFooterLeft","rangeFooterRight","actionsContainer","borderTopNone","borderBottomNone","borderTopDisplay","borderBottomDisplay","popperRoot","listBorderDown","listBorderUp","calendarOpenDown","calendarOpenUp"],"sources":["../../../src/DatePicker/styles.js"],"sourcesContent":["import { outlineStyles } from \"../Focus/styles\";\n\nconst icon = {\n  position: \"absolute\",\n  right: 0,\n  bottom: 0,\n  width: \"30px\",\n  height: \"30px\",\n};\n\nconst styles = (theme) => ({\n  root: {\n    position: \"relative\",\n    background: theme.palette.atmo1,\n    height: \"32px\",\n    paddingLeft: theme.spacing(\"xs\"),\n    paddingRight: theme.spacing(\"md\"),\n    fontFamily: theme.hv.typography.fontFamily,\n    \"&:focus\": {\n      ...outlineStyles,\n    },\n  },\n  inputCalendarClosed: {\n    border: `1px solid ${theme.palette.atmo6}`,\n    \"&:hover\": {\n      cursor: \"pointer\",\n      border: `1px solid ${theme.palette.acce1}`,\n    },\n  },\n  inputCalendarOpen: {\n    boxShadow: theme.hv.shadows[1],\n    border: `1px solid ${theme.palette.atmo1}`,\n  },\n  noBorderTop: {\n    borderTop: \"none\",\n  },\n  noBorderBottom: {\n    borderBottom: \"none\",\n  },\n  input: {\n    border: \"none\",\n    height: \"30px\",\n    width: \"100%\",\n    background: \"transparent\",\n    fontFamily: theme.hv.typography.fontFamily,\n    ...theme.hv.typography.normalText,\n    \"&:hover\": {\n      cursor: \"pointer\",\n    },\n    \"&:focus\": {\n      outline: \"none\",\n    },\n    \"&::placeholder\": {\n      fontFamily: theme.hv.typography.fontFamily,\n      ...theme.hv.typography.placeholderText,\n    },\n  },\n  icon: {\n    ...icon,\n    cursor: \"pointer\",\n    \"&:focus\": {\n      ...outlineStyles,\n    },\n  },\n  iconClear: {\n    ...icon,\n    cursor: \"pointer\",\n  },\n  datePickerContainer: {\n    position: \"relative\",\n    width: \"320px\",\n  },\n  label: {\n    marginBottom: theme.spacing(\"xs\"),\n    display: \"block\",\n  },\n  calendarContainer: {\n    backgroundColor: theme.palette.atmo1,\n    width: \"320px\",\n  },\n  singleCalendarFooter: {\n    padding: theme.spacing(\"sm\"),\n    textAlign: \"right\",\n    borderTop: `3px solid ${theme.palette.atmo2}`,\n  },\n  rangeMainContainer: {\n    display: \"flex\",\n    flexDirection: \"column\",\n    backgroundColor: theme.palette.atmo1,\n    width: \"640px\",\n  },\n  rangeCalendarsContainer: {\n    display: \"flex\",\n    flexDirection: \"row\",\n  },\n  rangeLeftCalendarContainer: {\n    width: \"50%\",\n  },\n  rangeRightCalendarContainer: {\n    width: \"50%\",\n  },\n  rangeCalendarsFooter: {\n    display: \"flex\",\n    flexDirection: \"row\",\n    borderTop: `3px solid ${theme.palette.atmo2}`,\n  },\n  rangeFooterLeft: {\n    width: \"50%\",\n  },\n  rangeFooterRight: {\n    width: \"50%\",\n    textAlign: \"right\",\n    padding: theme.spacing(\"sm\"),\n  },\n  actionsContainer: {\n    textAlign: \"right\",\n  },\n  borderTopNone: {\n    borderTop: \"none\",\n  },\n  borderBottomNone: {\n    borderBottom: \"none\",\n  },\n  borderTopDisplay: {\n    borderTop: `1px solid ${theme.palette.acce1}`,\n  },\n  borderBottomDisplay: {\n    borderBottom: `1px solid ${theme.palette.acce1}`,\n  },\n  popperRoot: {\n    display: \"block\",\n  },\n  listBorderDown: {\n    height: \"10px\",\n    width: \"320px\",\n    background: theme.palette.atmo1,\n  },\n  listBorderUp: {\n    height: \"10px\",\n    boxShadow: \" 0px -5px 5px -4px rgba(65,65,65,.12)\",\n    width: \"320px\",\n    background: theme.palette.atmo1,\n  },\n  calendarOpenDown: {\n    background: theme.palette.atmo1,\n    boxShadow: theme.hv.shadows[1],\n  },\n  calendarOpenUp: {\n    background: theme.palette.atmo1,\n    boxShadow: theme.hv.shadows[1],\n  },\n});\n\nexport default styles;\n"],"mappings":"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"}

package/dist/modern/DropDownMenu/DropDownMenu.d.ts

@@ -0,0 +1,63 @@
+import * as React from "react";
+import { IconButtonProps, StandardProps } from "@material-ui/core";
+import { ListValueProp } from "../List";
+
+export interface HvDropDownMenuProps
+  extends StandardProps<IconButtonProps, HvDropDownMenuClassKey, "onClick"> {
+  /**
+   * Icon.
+   */
+  icon?: React.ReactNode;
+  /**
+   * A list containing the elements to be rendered.
+   *
+   * - label: The label of the element to be rendered.
+   * - selected: The selection state of the element.
+   * - disabled: The disabled state of the element.
+   * - iconCallback: The icon node to be rendered on the left.
+   * - showNavIcon: If true renders the navigation icon on the right.
+   */
+  dataList: ListValueProp[];
+  /**
+   * Placement of the dropdown.
+   */
+  placement?: "left" | "right";
+  /**
+   * Disable the portal behavior. The children stay within it's parent DOM hierarchy.
+   */
+  disablePortal?: boolean;
+  /**
+   * Function executed on toggle of the dropdown. Should receive the open status.
+   */
+  onToggleOpen?: (open: boolean) => void;
+  /**
+   * Function executed in each onClick. Should received the clicked element.
+   */
+  onClick?: (event: MouseEvent, item: ListValueProp) => void;
+  /**
+   * Keep the Dropdown Menu opened after clicking one option
+   */
+  keepOpened?: boolean;
+  /**
+   * Defines if the component is disabled.
+   */
+  disabled?: boolean;
+  /**
+   * If true it should be displayed open.
+   */
+  expanded?: boolean;
+}
+
+export type HvDropDownMenuClassKey =
+  | "root"
+  | "popper"
+  | "icon"
+  | "iconSelected"
+  | "menuList"
+  | "inputExtensionOpen"
+  | "inputExtensionOpenShadow"
+  | "inputExtensionFloatRight"
+  | "inputExtensionFloatLeft"
+  | "inputExtensionLeftPosition";
+
+export default function HvDropDownMenu(props: HvDropDownMenuProps): JSX.Element | null;

package/dist/modern/DropDownMenu/DropDownMenu.js

@@ -0,0 +1,302 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+const _excluded = ["id", "classes", "className", "icon", "placement", "dataList", "disablePortal", "onToggleOpen", "onClick", "keepOpened", "disabled", "expanded", "popperProps"];
+import "core-js/modules/web.dom-collections.iterator.js";
+import React, { useEffect, useRef, useState } from "react";
+import PropTypes from "prop-types";
+import clsx from "clsx";
+import { IconButton, Popper, withStyles } from "@material-ui/core";
+import OutsideClickHandler from "react-outside-click-handler";
+import { MoreOptionsVertical as MoreVert } from "@hitachivantara/uikit-react-icons";
+import { isKeypress, KeyboardCodes } from "../utils";
+import List from "../List";
+import { getPrevNextFocus, setId } from "..";
+import styles from "./styles";
+import withId from "../withId";
+/**
+ * A drop-down menu is a graphical control element, similar to a list box, that allows the user to choose one value from a list.
+ */
+
+const DropDownMenu = _ref => {
+  let {
+    id,
+    classes,
+    className,
+    icon,
+    placement = "right",
+    dataList,
+    disablePortal = false,
+    onToggleOpen,
+    onClick,
+    keepOpened = true,
+    disabled = false,
+    expanded = false,
+    popperProps
+  } = _ref,
+      others = _objectWithoutProperties(_ref, _excluded);
+
+  const didMountRef = useRef(false);
+  const [open, setOpen] = useState(expanded && !disabled);
+  const [positionUp, setPositionUp] = useState(false);
+  const anchorRef = React.useRef(null);
+  const listContainerRef = React.useRef(null);
+  const focusNodes = getPrevNextFocus(setId(id, "icon-button"));
+
+  const getFirstListItem = () => listContainerRef !== null && listContainerRef !== void 0 && listContainerRef.current ? Array.from(listContainerRef.current.getElementsByTagName("li"))[0] : undefined;
+
+  const handleFocusOnToggle = () => {
+    if (open) {
+      setTimeout(() => {
+        const itemToFocus = getFirstListItem();
+        itemToFocus === null || itemToFocus === void 0 ? void 0 : itemToFocus.focus();
+      });
+    } else {
+      setTimeout(() => {
+        anchorRef.current.focus();
+      });
+    }
+  };
+
+  useEffect(() => {
+    if (didMountRef.current) {
+      handleFocusOnToggle();
+      onToggleOpen === null || onToggleOpen === void 0 ? void 0 : onToggleOpen(open);
+    } else {
+      didMountRef.current = true;
+    }
+  }, [open, onToggleOpen]);
+  useEffect(() => {
+    if (expanded !== open) {
+      setOpen(expanded && !disabled);
+    } // eslint-disable-next-line react-hooks/exhaustive-deps
+
+  }, [expanded, disabled]);
+
+  const handleToggle = () => {
+    setOpen(prevOpen => !prevOpen);
+  };
+
+  const handleClose = event => {
+    var _anchorRef$current;
+
+    const isButtonClick = (_anchorRef$current = anchorRef.current) === null || _anchorRef$current === void 0 ? void 0 : _anchorRef$current.contains(event.target);
+
+    if (!isButtonClick) {
+      setOpen(false);
+    }
+  }; // If the ESCAPE key is pressed the close handler must be called.
+
+
+  const handleKeyDown = event => {
+    if (isKeypress(event, KeyboardCodes.Esc)) {
+      handleClose(event);
+    }
+
+    if (isKeypress(event, KeyboardCodes.Tab)) {
+      const node = event.shiftKey ? focusNodes.prevFocus : focusNodes.nextFocus;
+      if (node) setTimeout(() => node.focus(), 0);
+      handleToggle(event);
+    }
+
+    event.preventDefault();
+  };
+
+  const handleKeyboardToggle = event => {
+    if (isKeypress(event, KeyboardCodes.SpaceBar) || isKeypress(event, KeyboardCodes.Enter) || isKeypress(event, KeyboardCodes.ArrowDown) && !open || isKeypress(event, KeyboardCodes.ArrowUp) && open) {
+      handleToggle(event);
+      event.preventDefault();
+      event.stopPropagation();
+    }
+  };
+
+  const handleListFlip = data => {
+    const position = data.flipped;
+
+    if (positionUp !== position) {
+      setPositionUp(position);
+    }
+  };
+
+  return /*#__PURE__*/React.createElement("div", {
+    id: id,
+    className: clsx(className, classes.root)
+  }, /*#__PURE__*/React.createElement(IconButton, _extends({
+    id: setId(id, "icon-button"),
+    buttonRef: anchorRef,
+    "aria-label": "Dropdown menu",
+    "aria-controls": open ? `${id}` : undefined,
+    "aria-haspopup": "true",
+    "aria-expanded": open ? true : undefined,
+    onClick: handleToggle,
+    onKeyDown: handleKeyboardToggle,
+    className: clsx(classes.icon, open && classes.iconSelected),
+    disabled: disabled
+  }, others), icon || /*#__PURE__*/React.createElement(MoreVert, {
+    color: disabled ? "atmo7" : undefined
+  })), /*#__PURE__*/React.createElement(Popper, _extends({
+    className: classes.popper,
+    disablePortal: disablePortal,
+    open: open,
+    anchorEl: anchorRef.current,
+    placement: `bottom-${placement === "left" ? "end" : "start"}`,
+    popperOptions: {
+      onUpdate: data => handleListFlip(data),
+      onCreate: data => handleListFlip(data)
+    }
+  }, popperProps), /*#__PURE__*/React.createElement(OutsideClickHandler, {
+    onOutsideClick: handleClose
+  }, /*#__PURE__*/React.createElement("div", null, !positionUp && /*#__PURE__*/React.createElement("div", {
+    className: clsx(classes.inputExtensionOpen, placement === "left" && classes.inputExtensionLeftPosition)
+  }), /*#__PURE__*/React.createElement("div", {
+    className: classes.menuList,
+    onKeyDown: handleKeyDown,
+    ref: listContainerRef
+  }, /*#__PURE__*/React.createElement(List, {
+    id: setId(id, "list"),
+    values: dataList,
+    selectable: false,
+    condensed: true,
+    onClick: (event, item) => {
+      if (!keepOpened) setOpen(false);
+      onClick === null || onClick === void 0 ? void 0 : onClick(event, item);
+    }
+  })), positionUp && /*#__PURE__*/React.createElement("div", {
+    className: clsx(classes.inputExtensionOpen, classes.inputExtensionOpenShadow, {
+      "right": classes.inputExtensionFloatRight,
+      "left": classes.inputExtensionFloatLeft
+    }[placement])
+  })))));
+};
+
+process.env.NODE_ENV !== "production" ? DropDownMenu.propTypes = {
+  /**
+   * Class names to be applied.
+   */
+  className: PropTypes.string,
+
+  /**
+   * Id to be applied to the root node.
+   */
+  id: PropTypes.string,
+
+  /**
+   * A Jss Object used to override or extend the styles applied.
+   */
+  classes: PropTypes.shape({
+    /**
+     * Styles applied to the root of the component.
+     */
+    root: PropTypes.string,
+
+    /**
+     * Styles applied to the popper.
+     */
+    popper: PropTypes.string,
+
+    /**
+     * Styles applied to the icon.
+     */
+    icon: PropTypes.string,
+
+    /**
+     * Styles applied to the icon when selected.
+     */
+    iconSelected: PropTypes.string,
+
+    /**
+     * Styles applied to the list.
+     */
+    menuList: PropTypes.string,
+
+    /**
+     * Styles applied to the extension of the button.
+     */
+    inputExtensionOpen: PropTypes.string,
+
+    /**
+     * Styles applied to the extension shadow.
+     */
+    inputExtensionOpenShadow: PropTypes.string,
+
+    /**
+     * Styles applied to the extension to go right when open down.
+     */
+    inputExtensionFloatRight: PropTypes.string,
+
+    /**
+     * Styles applied to the extension to go right when open up.
+     */
+    inputExtensionFloatLeft: PropTypes.string,
+
+    /**
+     * Styles applied to the extension to go left when open up.
+     */
+    inputExtensionLeftPosition: PropTypes.string
+  }).isRequired,
+
+  /**
+   * Icon.
+   */
+  icon: PropTypes.element,
+
+  /**
+   * A list containing the elements to be rendered.
+   *
+   * - label: The label of the element to be rendered.
+   * - selected: The selection state of the element.
+   * - disabled: The disabled state of the element.
+   * - iconCallback: The icon node to be rendered on the left.
+   * - showNavIcon: If true renders the navigation icon on the right.
+   */
+  dataList: PropTypes.arrayOf(PropTypes.shape({
+    label: PropTypes.string.isRequired,
+    selected: PropTypes.bool,
+    disabled: PropTypes.bool,
+    iconCallback: PropTypes.func,
+    showNavIcon: PropTypes.bool
+  })).isRequired,
+
+  /**
+   * Placement of the dropdown.
+   */
+  placement: PropTypes.oneOf(["left", "right"]),
+
+  /**
+   * Disable the portal behavior. The children stay within it's parent DOM hierarchy.
+   */
+  disablePortal: PropTypes.bool,
+
+  /**
+   * Function executed on toggle of the dropdown. Should receive the open status.
+   */
+  onToggleOpen: PropTypes.func,
+
+  /**
+   * Function executed in each onClick. Should received the clicked element.
+   */
+  onClick: PropTypes.func,
+
+  /**
+   * Keep the Dropdown Menu opened after clicking one option
+   */
+  keepOpened: PropTypes.bool,
+
+  /**
+   * Defines if the component is disabled.
+   */
+  disabled: PropTypes.bool,
+
+  /**
+   * If true it should be displayed open.
+   */
+  expanded: PropTypes.bool,
+
+  /**
+   *
+   */
+  popperProps: PropTypes.instanceOf(Object)
+} : void 0;
+export default withStyles(styles, {
+  name: "HvDropDownMenu"
+})(withId(DropDownMenu));
+//# sourceMappingURL=DropDownMenu.js.map