@hipay/hipay-material-ui 3.7.4 → 3.7.6

package/HiSelectableList/HiSelectableListItem.js

@@ -39,6 +39,10 @@ var _HiLoader = _interopRequireDefault(require("../HiLoader"));
 
 var _helpers = require("../utils/helpers");
 
+var _ArrowDropDown = _interopRequireDefault(require("@material-ui/icons/ArrowDropDown"));
+
+var _ArrowRight = _interopRequireDefault(require("@material-ui/icons/ArrowRight"));
+
 var useItemLabelStyles = (0, _styles.makeStyles)(function (theme) {
   return {
     label: {
@@ -57,7 +61,8 @@ function ItemLabel(props) {
   var color = props.color,
       label = props.label,
       labelHighlight = props.labelHighlight,
-      selected = props.selected;
+      selected = props.selected,
+      title = props.title;
   var classes = useItemLabelStyles(props);
 
   if (labelHighlight) {
@@ -90,7 +95,7 @@ function ItemLabel(props) {
 
   return /*#__PURE__*/_react.default.createElement("div", {
     className: classes.label,
-    title: label
+    title: title || label
   }, label);
 }
 
@@ -123,16 +128,20 @@ var useStyles = (0, _styles.makeStyles)(function (theme) {
         }
       },
       '&:focus': {
-        '&:not($disabled):not($pinned)': {
+        '&:not($disabled):not($pinned):not($collapseHeader)': {
           backgroundColor: theme.palette.action.hover
         },
         outline: 'none'
+      },
+      '&$collapseHeader': {
+        minHeight: 32,
+        lineHeight: "32px"
       }
     },
     listItemWithoutSecondaryInline: {},
     listItemInlineWithInfoWithoutSecondary: {},
     listItemHover: {
-      '&:hover:not($disabled):not($pinned)': {
+      '&:hover:not($disabled):not($pinned):not($collapseHeader)': {
         backgroundColor: theme.palette.action.hover,
         fontWeight: theme.typography.fontWeightMedium
       }
@@ -154,6 +163,11 @@ var useStyles = (0, _styles.makeStyles)(function (theme) {
       display: 'inherit',
       backgroundColor: theme.palette.background3
     },
+    collapseHeader: {
+      zIndex: 1,
+      display: 'inherit',
+      backgroundColor: theme.palette.background3
+    },
     thin: {
       fontWeight: theme.typography.fontWeightLight
     },
@@ -241,7 +255,12 @@ var useStyles = (0, _styles.makeStyles)(function (theme) {
     },
     infosInlineWithoutSecondary: {},
     infosWithSecondaryInline: {},
-    infosWithoutSecondaryInline: {}
+    infosWithoutSecondaryInline: {},
+    rightIcon: {
+      position: "absolute",
+      right: 12,
+      top: 8
+    }
   };
 });
 /**
@@ -251,6 +270,10 @@ var useStyles = (0, _styles.makeStyles)(function (theme) {
 
 exports.useStyles = useStyles;
 
+var _ref = /*#__PURE__*/_react.default.createElement(_ArrowDropDown.default, null);
+
+var _ref2 = /*#__PURE__*/_react.default.createElement(_ArrowRight.default, null);
+
 function HiSelectableListItem(props) {
   var _classNames, _classNames3, _classNames4;
 
@@ -273,22 +296,27 @@ function HiSelectableListItem(props) {
       labelHighlight = props.labelHighlight,
       paddingLeft = props.paddingLeft,
       pinned = props.pinned,
+      collapseHeader = props.collapseHeader,
       secondaryInline = props.secondaryInline,
       secondaryLabel = props.secondaryLabel,
       thin = props.thin,
+      title = props.title,
       type = props.type,
       color = props.color,
-      item = props.item;
+      item = props.item,
+      opened = props.opened,
+      group = props.group;
   var classes = useStyles(props);
   var ref = (0, _react.useRef)(null);
   var isHovering = !!hoverIcon ? (0, _reactUse.useHoverDirty)(ref) : false;
-  var onKeyDown = (0, _react.useCallback)(function (_ref) {
-    var code = _ref.code;
-
-    if (code === 'Space' || code === 'Enter') {
+  var onKeyDown = (0, _react.useCallback)(function (event) {
+    if (event.code === 'Space' || event.code === 'Enter') {
       event.preventDefault();
       event.stopPropagation();
-      if (item) onSelect(null, item);
+
+      if (item) {
+        onSelect(event, item);
+      }
     }
   }, [item]);
   (0, _reactUse.useEvent)('keydown', onKeyDown, ref.current); // Return simple loader list item
@@ -309,7 +337,7 @@ function HiSelectableListItem(props) {
     displayedIcon = icon;
   }
 
-  var ListItemComponentName = pinned ? _ListSubheader.default : _ListItem.default;
+  var ListItemComponentName = pinned || collapseHeader ? _ListSubheader.default : _ListItem.default;
   var itemIcon;
 
   if (displayedIcon) {
@@ -336,14 +364,15 @@ function HiSelectableListItem(props) {
     classes: {
       root: classes.root
     },
-    className: (0, _classnames.default)(classes.listItem, classes.listItemHover, (_classNames = {}, (0, _defineProperty2.default)(_classNames, classes.disabled, disabled), (0, _defineProperty2.default)(_classNames, classes.selected, selected), (0, _defineProperty2.default)(_classNames, classes.thin, thin), (0, _defineProperty2.default)(_classNames, classes.pinned, pinned), (0, _defineProperty2.default)(_classNames, classes.inline, secondaryInline), (0, _defineProperty2.default)(_classNames, classes.listItemWithoutSecondaryInline, !secondaryInline), (0, _defineProperty2.default)(_classNames, classes.listItemInlineWithInfoWithoutSecondary, secondaryInline && info && !secondaryLabel), _classNames)),
+    className: (0, _classnames.default)(classes.listItem, classes.listItemHover, (_classNames = {}, (0, _defineProperty2.default)(_classNames, classes.disabled, disabled), (0, _defineProperty2.default)(_classNames, classes.selected, selected), (0, _defineProperty2.default)(_classNames, classes.thin, thin), (0, _defineProperty2.default)(_classNames, classes.pinned, pinned), (0, _defineProperty2.default)(_classNames, classes.collapseHeader, collapseHeader), (0, _defineProperty2.default)(_classNames, classes.inline, secondaryInline), (0, _defineProperty2.default)(_classNames, classes.listItemWithoutSecondaryInline, !secondaryInline), (0, _defineProperty2.default)(_classNames, classes.listItemInlineWithInfoWithoutSecondary, secondaryInline && typeof info !== "undefined" && !secondaryLabel), _classNames)),
     disabled: disabled,
     onClick: !disabled ? onSelect : undefined,
     style: {
       paddingLeft: "".concat(paddingLeft + level * 32, "px")
-    }
+    },
+    "data-group": group
   }, /*#__PURE__*/_react.default.createElement("div", {
-    className: (0, _classnames.default)(classes.labelContent, (0, _defineProperty2.default)({}, classes.labelWithoutSecondaryInline, !secondaryInline || !secondaryLabel && !info))
+    className: (0, _classnames.default)(classes.labelContent, (0, _defineProperty2.default)({}, classes.labelWithoutSecondaryInline, !secondaryInline || !secondaryLabel && typeof info === "undefined"))
   }, !hideCheckbox && !pinned && /*#__PURE__*/_react.default.createElement(_HiCheckbox.default, {
     tabIndex: 0,
     classes: {
@@ -374,12 +403,15 @@ function HiSelectableListItem(props) {
     color: color,
     label: label,
     labelHighlight: labelHighlight,
-    selected: selected
-  }))), /*#__PURE__*/_react.default.createElement("div", {
+    selected: selected,
+    title: title
+  }), collapseHeader && /*#__PURE__*/_react.default.createElement("span", {
+    className: classes.rightIcon
+  }, opened ? _ref : _ref2))), /*#__PURE__*/_react.default.createElement("div", {
     className: (0, _classnames.default)(classes.infosContent, (_classNames4 = {}, (0, _defineProperty2.default)(_classNames4, classes.infosWithoutSecondaryInline, !secondaryInline), (0, _defineProperty2.default)(_classNames4, classes.infosWithSecondaryInline, !secondaryInline), (0, _defineProperty2.default)(_classNames4, classes.infosInlineWithoutSecondary, secondaryInline && !secondaryLabel), _classNames4))
   }, !!secondaryLabel && /*#__PURE__*/_react.default.createElement("div", {
     className: (0, _classnames.default)(classes.secondaryLabel, (0, _defineProperty2.default)({}, classes.inline, secondaryInline))
-  }, secondaryLabel), !!info && /*#__PURE__*/_react.default.createElement("span", {
+  }, secondaryLabel), typeof info !== "undefined" && /*#__PURE__*/_react.default.createElement("span", {
     className: (0, _classnames.default)(classes.info)
   }, info)));
 }
@@ -396,7 +428,8 @@ HiSelectableListItem.defaultProps = {
   pinned: false,
   secondaryInline: true,
   selected: false,
-  thin: false
+  thin: false,
+  opened: false
 };
 var _default = HiSelectableListItem;
 exports.default = _default;

package/HiSwitch/HiSwitch.js

@@ -21,6 +21,8 @@ var _SwitchBase = _interopRequireDefault(require("@material-ui/core/internal/Swi
 
 var _Check = _interopRequireDefault(require("@material-ui/icons/Check"));
 
+var _Close = _interopRequireDefault(require("@material-ui/icons/Close"));
+
 var _helpers = require("../utils/helpers");
 
 var _styles = require("@material-ui/core/styles");
@@ -83,6 +85,9 @@ var styles = function styles(theme) {
         opacity: theme.palette.type === 'light' ? 0.12 : 0.1
       }
     },
+    iconNotChecked: {
+      color: "#CBCBCB"
+    },
     iconChecked: {},
     iconCheckedPrimary: {
       backgroundColor: theme.palette.primary.main,
@@ -165,9 +170,13 @@ function HiSwitch(props) {
       disabled = props.disabled,
       other = (0, _objectWithoutProperties2.default)(props, ["classes", "className", "checked", "color", "disabled"]);
   var isHiColor = ['primary', 'secondary', 'positive', 'negative', 'middle', 'neutral'].includes(color);
-  var iconClass = (0, _classnames.default)(classes.icon, (_classNames = {}, (0, _defineProperty2.default)(_classNames, classes.iconChecked, checked), (0, _defineProperty2.default)(_classNames, classes.iconCheckedNeutral, !disabled && checked && !isHiColor), (0, _defineProperty2.default)(_classNames, classes["iconChecked".concat((0, _helpers.capitalize)(color))], !disabled && checked && isHiColor), (0, _defineProperty2.default)(_classNames, classes.iconDisabled, disabled), _classNames));
+  var iconClass = (0, _classnames.default)(classes.icon, (_classNames = {}, (0, _defineProperty2.default)(_classNames, classes.iconNotChecked, !checked), (0, _defineProperty2.default)(_classNames, classes.iconChecked, checked), (0, _defineProperty2.default)(_classNames, classes.iconCheckedNeutral, !disabled && checked && !isHiColor), (0, _defineProperty2.default)(_classNames, classes["iconChecked".concat((0, _helpers.capitalize)(color))], !disabled && checked && isHiColor), (0, _defineProperty2.default)(_classNames, classes.iconDisabled, disabled), _classNames));
+
+  var icon = /*#__PURE__*/_react.default.createElement(_Close.default, {
+    className: iconClass
+  });
 
-  var icon = /*#__PURE__*/_react.default.createElement(_Check.default, {
+  var checkedIcon = /*#__PURE__*/_react.default.createElement(_Check.default, {
     className: iconClass
   });
 
@@ -181,7 +190,7 @@ function HiSwitch(props) {
       checked: isHiColor && !disabled ? classes["checked".concat((0, _helpers.capitalize)(color))] : classes.checkedNeutral,
       disabled: classes.disabled
     },
-    checkedIcon: icon,
+    checkedIcon: checkedIcon,
     checked: checked,
     disabled: disabled,
     inputProps: {

package/HiTable/HiCellBuilder.js

@@ -163,6 +163,7 @@ var HiCellBuilder = /*#__PURE__*/function (_React$PureComponent) {
                   });
 
                 case cst.TYPE_DATE:
+                case cst.TYPE_MONTH:
                   return /*#__PURE__*/_react.default.createElement(_CellDate.default, {
                     date: datacell.date,
                     displayTime: datacell.displayTime,

package/HiTable/constants.js

@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.ALIGN_RIGHT_TYPES = exports.DEFAULT_PADDING = exports.DEFAULT_VIEWS = exports.DEFAULT_WIDTHS = exports.FRAUD_RESULT_ASK_AUTHENTICATE = exports.FRAUD_RESULT_FORCE_AUTHENTICATE = exports.FRAUD_RESULT_PENDING = exports.FRAUD_RESULT_CHALLENGED = exports.FRAUD_RESULT_BLOCKED = exports.FRAUD_RESULT_ACCEPTED = exports.ELLIPSIS_RIGHT = exports.ELLIPSIS_NAME = exports.ELLIPSIS_MIDDLE = exports.ELLIPSIS_LEFT = exports.ELLIPSIS_AFTER_FIRST_WORD = exports.NO_EVOLUTION = exports.EVOLUTION_DOWN = exports.EVOLUTION_UP = exports.VIEWS = exports.TYPE_PIN_TO_ACTION = exports.TYPE_THIRD_PARTY_SECURITY = exports.TYPE_TEXT = exports.TYPE_COUNTRY = exports.TYPE_STATUS = exports.TYPE_SCORE = exports.TYPE_SENTINEL = exports.TYPE_RATE = exports.TYPE_NUMERIC = exports.TYPE_IMAGE = exports.TYPE_ICON = exports.TYPE_DATE = exports.TYPE_CHECKBOX = exports.TYPE_ADDRESS = exports.TYPE_CUSTOMER_ACCOUNT_NUMBER = exports.TYPE_AMOUNT = exports.TYPE_ACCOUNT_NUMBER = exports.TYPE_ACCOUNT = exports.CELL_HEADER_HEIGHT_DENSE = exports.CELL_HEADER_HEIGHT = exports.CELL_HEIGHT_DENSE = exports.CELL_HEIGHT = exports.NB_ROWS_BACK_TO_TOP = exports.MAX_ROWS = void 0;
+exports.ALIGN_RIGHT_TYPES = exports.DEFAULT_PADDING = exports.DEFAULT_VIEWS = exports.DEFAULT_WIDTHS = exports.FRAUD_RESULT_ASK_AUTHENTICATE = exports.FRAUD_RESULT_FORCE_AUTHENTICATE = exports.FRAUD_RESULT_PENDING = exports.FRAUD_RESULT_CHALLENGED = exports.FRAUD_RESULT_BLOCKED = exports.FRAUD_RESULT_ACCEPTED = exports.ELLIPSIS_RIGHT = exports.ELLIPSIS_NAME = exports.ELLIPSIS_MIDDLE = exports.ELLIPSIS_LEFT = exports.ELLIPSIS_AFTER_FIRST_WORD = exports.NO_EVOLUTION = exports.EVOLUTION_DOWN = exports.EVOLUTION_UP = exports.VIEWS = exports.TYPE_PIN_TO_ACTION = exports.TYPE_THIRD_PARTY_SECURITY = exports.TYPE_TEXT = exports.TYPE_COUNTRY = exports.TYPE_STATUS = exports.TYPE_SCORE = exports.TYPE_SENTINEL = exports.TYPE_RATE = exports.TYPE_NUMERIC = exports.TYPE_MONTH = exports.TYPE_IMAGE = exports.TYPE_ICON = exports.TYPE_DATE = exports.TYPE_CHECKBOX = exports.TYPE_ADDRESS = exports.TYPE_CUSTOMER_ACCOUNT_NUMBER = exports.TYPE_AMOUNT = exports.TYPE_ACCOUNT_NUMBER = exports.TYPE_ACCOUNT = exports.CELL_HEADER_HEIGHT_DENSE = exports.CELL_HEADER_HEIGHT = exports.CELL_HEIGHT_DENSE = exports.CELL_HEIGHT = exports.NB_ROWS_BACK_TO_TOP = exports.MAX_ROWS = void 0;
 
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/defineProperty"));
 
@@ -53,6 +53,8 @@ var TYPE_ICON = 'icon';
 exports.TYPE_ICON = TYPE_ICON;
 var TYPE_IMAGE = 'image';
 exports.TYPE_IMAGE = TYPE_IMAGE;
+var TYPE_MONTH = 'month';
+exports.TYPE_MONTH = TYPE_MONTH;
 var TYPE_NUMERIC = 'numeric';
 exports.TYPE_NUMERIC = TYPE_NUMERIC;
 var TYPE_RATE = 'rate';

package/README.md

@@ -203,27 +203,7 @@ prettier --write src/HiForm/HiInput.js
 ## Publish
 Le projet est publié sur un repo privé npm : https://www.npmjs.com/package/@hipay/hipay-material-ui
 
-#### Publier une nouvelle version
-
-Avoir installé [conventional-changelog-cli](https://github.com/conventional-changelog/conventional-changelog/tree/master/packages/conventional-changelog-cli) pour générer le CHANGELOG à partir des commits git.
-```sh
-npm install -g conventional-changelog-cli
-npm install -g cz-conventional-changelog
-```
-
-1. Changer la version dans package.json et dans packages/hipay-material-ui/package.json
-2. Générer le fichier HI-CHANGELOG.md : ```npm run changelog```
-3. Commiter la release : ```git ci -am "chore(release): VERSION DATE (YYYY-mm-dd)```
-4. Build : ```cd packages/hipay-material-ui/ && npm run build```
-5. Publish :
-
-```sh
-cd build
-npm login
-# Username: hipay
-# Password: (voir avec la tribu PSYCHE)
-npm publish
-```
+Un script de déploiement automatique est disponible dans gitlab CI.
 
 #### [Semantic Versioning](https://semver.org/)
 

package/es/HiDatePicker/HiDatePicker.js

@@ -263,7 +263,8 @@ var HiDatePicker = /*#__PURE__*/function (_React$Component) {
           translations = _this$props.translations,
           value = _this$props.value,
           hideOnDayClick = _this$props.hideOnDayClick,
-          props = (0, _objectWithoutProperties2.default)(_this$props, ["classes", "disabledDays", "disablePastDays", "disableFutureDays", "enableTime", "format", "locale", "minimumDate", "onReset", "translations", "value", "hideOnDayClick"]);
+          HiInputProps = _this$props.HiInputProps,
+          props = (0, _objectWithoutProperties2.default)(_this$props, ["classes", "disabledDays", "disablePastDays", "disableFutureDays", "enableTime", "format", "locale", "minimumDate", "onReset", "translations", "value", "hideOnDayClick", "HiInputProps"]);
       var currentMonth = this.state.currentMonth;
       var today = (0, _momentTimezone.default)();
       var effectiveDisabledDays = (0, _objectSpread2.default)({}, disablePastDays && {
@@ -312,6 +313,11 @@ var HiDatePicker = /*#__PURE__*/function (_React$Component) {
           onSubmit: this.props.onSubmit
         }
       });
+
+      if (typeof HiInputProps !== "undefined") {
+        inputProps.HiInputProps = (0, _objectSpread2.default)({}, inputProps.HiInputProps, {}, HiInputProps);
+      }
+
       return /*#__PURE__*/_react.default.createElement("div", {
         className: classes.root,
         onKeyDown: this.handleKeyDown()

package/es/HiDatePicker/HiDateRangeSelector.js

@@ -48,6 +48,8 @@ var _Calendar = _interopRequireDefault(require("mdi-material-ui/Calendar"));
 
 var _CalendarBlank = _interopRequireDefault(require("mdi-material-ui/CalendarBlank"));
 
+var _CalendarArrowRight = _interopRequireDefault(require("mdi-material-ui/CalendarArrowRight"));
+
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(this, result); }; }
 
 function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Date.prototype.toString.call(Reflect.construct(Date, [], function () {})); return true; } catch (e) { return false; } }
@@ -104,12 +106,23 @@ function buildDateRangeInfo(t, from, to, format) {
       prefix = _options$prefix === void 0 ? null : _options$prefix,
       _options$toNow = options.toNow,
       toNow = _options$toNow === void 0 ? false : _options$toNow,
+      _options$toToday = options.toToday,
+      toToday = _options$toToday === void 0 ? false : _options$toToday,
       _options$displayDays = options.displayDays,
-      displayDays = _options$displayDays === void 0 ? true : _options$displayDays; // From
+      displayDays = _options$displayDays === void 0 ? true : _options$displayDays,
+      _options$displayDayNa = options.displayDayName,
+      displayDayName = _options$displayDayNa === void 0 ? false : _options$displayDayNa; // From
+
+  var info = "".concat(t.from, " ").concat(from.format(format), " "); // Display day name
+
+  if (displayDayName) {
+    info = "".concat(t.from, " ").concat(from.format('dddd'), "  ").concat(from.format(format), " ");
+  } // To
 
-  var info = "".concat(t.from, " ").concat(from.format(format), " "); // To
 
-  if (toNow) {
+  if (toToday) {
+    info += "".concat(t.to_today);
+  } else if (toNow) {
     info += "".concat(t.to_now);
   } else {
     info += "".concat(t.to, " ").concat(to.format(format));
@@ -132,7 +145,7 @@ function buildDateRangeInfo(t, from, to, format) {
 
   if (displayDays) {
     var days = Math.ceil(to.diff(from, 'days', true));
-    info = "".concat(days, " ").concat(t.days, ", ").concat(info);
+    info = "".concat(days, " ").concat(days === 1 ? t.day : t.days, ", ").concat(info);
   }
 
   return info;
@@ -143,6 +156,7 @@ function buildDateRangeOptionByKey(key, t, format) {
   var label;
   var info;
   var to;
+  var days;
 
   switch (key) {
     case 'custom':
@@ -203,7 +217,8 @@ function buildDateRangeOptionByKey(key, t, format) {
       label = t.previous_month;
       from = (0, _momentTimezone.default)().subtract(1, 'month').startOf('month');
       to = (0, _momentTimezone.default)().subtract(1, 'month').endOf('month');
-      info = "".concat(from.daysInMonth(), " ").concat(t.days, ", ").concat(yearAndMonth(format, from));
+      days = from.daysInMonth();
+      info = "".concat(days, " ").concat(days === 1 ? t.day : t.days, ", ").concat(yearAndMonth(format, from));
       break;
 
     case 'cq':
@@ -239,18 +254,27 @@ function buildDateRangeOptionByKey(key, t, format) {
       });
       break;
 
-    case 'yy':
-      label = t.year_on_year;
-      from = (0, _momentTimezone.default)().subtract(1, 'years');
+    case "1":
+      label = "24h";
+      from = (0, _momentTimezone.default)().subtract(1, 'day');
       to = (0, _momentTimezone.default)();
-      info = buildDateRangeInfo(t, from, to, format, {
-        prefix: null,
-        toNow: true,
-        displayDays: true
-      });
+      info = "".concat(t.from, " ").concat(from.format("HH:mm"), " ").concat(t.yesterday.toLowerCase(), " ").concat(t.to_now);
       break;
 
     default:
+      if (parseInt(key) > 0) {
+        label = "".concat(key, " ").concat(key === 1 ? t.day : t.days);
+        from = (0, _momentTimezone.default)().subtract(parseInt(key), 'day');
+        to = (0, _momentTimezone.default)();
+        info = buildDateRangeInfo(t, from, to, format, {
+          prefix: null,
+          toNow: true,
+          toToday: key === 1,
+          displayDays: false,
+          displayDayName: true
+        });
+      }
+
       break;
   }
 
@@ -307,12 +331,15 @@ var styles = function styles(theme) {
 };
 
 exports.styles = styles;
-var PRESET_PERIOD_LIST = ['cd', 'pd', 'cw', 'pw', 'cm', 'pm', 'cq', 'pq', 'cy', 'yy'];
+var PRESET_PERIOD_LIST = ['cd', 'pd', 'cw', 'pw', 'cm', 'pm', 'cq', 'pq', 'cy'];
+var SLIDING_PERIOD_LIST = ['1', '7', '30', '365'];
 var CUSTOM_PERIOD_LIST = ['custom'];
 
 var _ref2 = /*#__PURE__*/_react.default.createElement(_Calendar.default, null);
 
-var _ref3 = /*#__PURE__*/_react.default.createElement(_CalendarBlank.default, null);
+var _ref3 = /*#__PURE__*/_react.default.createElement(_CalendarArrowRight.default, null);
+
+var _ref4 = /*#__PURE__*/_react.default.createElement(_CalendarBlank.default, null);
 
 var HiDateRangeSelector = /*#__PURE__*/function (_React$Component) {
   (0, _inherits2.default)(HiDateRangeSelector, _React$Component);
@@ -395,8 +422,6 @@ var HiDateRangeSelector = /*#__PURE__*/function (_React$Component) {
   }, {
     key: "buildOptions",
     value: function buildOptions() {
-      var _this2 = this;
-
       var _this$props = this.props,
           availableOptionKeys = _this$props.availableOptionKeys,
           translations = _this$props.translations;
@@ -405,39 +430,49 @@ var HiDateRangeSelector = /*#__PURE__*/function (_React$Component) {
       var presetOptionsAvailable = availableOptionKeys.filter(function (option) {
         return PRESET_PERIOD_LIST.includes(option);
       });
+      var slidingOptionsAvailable = availableOptionKeys.filter(function (option) {
+        return SLIDING_PERIOD_LIST.includes(option);
+      });
       var customOptionsAvailable = availableOptionKeys.filter(function (option) {
         return CUSTOM_PERIOD_LIST.includes(option);
       });
 
-      if (presetOptionsAvailable) {
+      if (presetOptionsAvailable.length) {
         options.push({
           id: "preset_periods_subheader",
           type: PRESET_PERIOD_LIST.includes(selectedPreset) ? "primary-highlight" : "highlight",
-          pinned: true,
           icon: _ref2,
           label: translations.preset_periods,
-          selectable: false
+          children: this.options.filter(function (o) {
+            return presetOptionsAvailable.includes(o.id);
+          }),
+          collapseParent: true
         });
-        presetOptionsAvailable.forEach(function (option) {
-          options.push(_this2.options.find(function (_option) {
-            return _option.id === option;
-          }));
+      }
+
+      if (slidingOptionsAvailable.length) {
+        options.push({
+          id: "sliding_periods_subheader",
+          type: SLIDING_PERIOD_LIST.includes(selectedPreset) ? "primary-highlight" : "highlight",
+          icon: _ref3,
+          label: translations.sliding_periods,
+          children: this.options.filter(function (o) {
+            return slidingOptionsAvailable.includes(o.id);
+          }),
+          collapseParent: true
         });
       }
 
-      if (customOptionsAvailable) {
+      if (customOptionsAvailable.length) {
         options.push({
           id: "custom_periods_subheader",
           type: CUSTOM_PERIOD_LIST.includes(selectedPreset) ? "primary-highlight" : "highlight",
-          pinned: true,
-          icon: _ref3,
+          icon: _ref4,
           label: translations.custom_periods,
-          selectable: false
-        });
-        customOptionsAvailable.forEach(function (option) {
-          options.push(_this2.options.find(function (_option) {
-            return _option.id === option;
-          }));
+          children: this.options.filter(function (o) {
+            return customOptionsAvailable.includes(o.id);
+          }),
+          collapseParent: true
         });
       }
 
@@ -446,7 +481,7 @@ var HiDateRangeSelector = /*#__PURE__*/function (_React$Component) {
   }, {
     key: "render",
     value: function render() {
-      var _this3 = this;
+      var _this2 = this;
 
       var _this$props2 = this.props,
           availableOptionKeys = _this$props2.availableOptionKeys,
@@ -477,7 +512,9 @@ var HiDateRangeSelector = /*#__PURE__*/function (_React$Component) {
       var hiSelectableListProps = {
         secondaryInline: false,
         hideCheckbox: true,
-        lazy: false
+        lazy: false,
+        collapseParent: true,
+        noPadding: true
       };
       var options = this.buildOptions();
       return /*#__PURE__*/_react.default.createElement(_HiFormControl.default, {
@@ -497,7 +534,7 @@ var HiDateRangeSelector = /*#__PURE__*/function (_React$Component) {
           flexDirection: 'column'
         } : {},
         ref: function ref(container) {
-          _this3.container = container;
+          _this2.container = container;
         }
       }, /*#__PURE__*/_react.default.createElement("div", {
         className: classes.select,
@@ -584,12 +621,14 @@ HiDateRangeSelector.defaultProps = {
     yearAndMonth: 'YYYY[-]MM',
     yearAndQuarter: 'YYYY[-Q]Q',
     year: 'Year',
+    day: 'day',
     days: 'days',
     custom_period: 'Custom Period',
     yesterday: 'Yesterday',
     from: 'from',
     to: 'to',
     to_now: 'to now',
+    to_today: 'to today',
     current_week: 'Current Week',
     previous_week: 'Previous Week',
     current_month: 'Current Month',
@@ -606,7 +645,8 @@ HiDateRangeSelector.defaultProps = {
     missing_date_to: 'Missing date to',
     preset_periods: 'Preset periods',
     custom_periods: 'Custom periods',
-    custom_period_info: "Select a custom period"
+    custom_period_info: "Select a custom period",
+    sliding_periods: 'Sliding periods'
   }
 };
 

package/es/HiDialog/HiDialog.js

@@ -52,7 +52,8 @@ var HiDialog = function HiDialog(props) {
       id = props.id,
       onClose = props.onClose,
       open = props.open,
-      title = props.title;
+      title = props.title,
+      closeBtn = props.closeBtn;
   var classes = useStyles(props);
   var handleClose = (0, _react.useCallback)(function () {
     if (onClose) {
@@ -68,9 +69,9 @@ var HiDialog = function HiDialog(props) {
     open: open
   }, /*#__PURE__*/_react.default.createElement("div", {
     className: classes.header
-  }, /*#__PURE__*/_react.default.createElement("p", {
+  }, typeof title === "string" ? /*#__PURE__*/_react.default.createElement("p", {
     className: classes.title
-  }, title), /*#__PURE__*/_react.default.createElement("div", {
+  }, title) : title, closeBtn !== false && /*#__PURE__*/_react.default.createElement("div", {
     className: classes.closeDiv
   }, /*#__PURE__*/_react.default.createElement(_HiIconButton.default, {
     id: "close-dialog-btn",