@hitachivantara/uikit-react-core 3.74.0 → 4.0.1-next.2

package/dist/legacy/Controls/RightControl/RightControl.js

@@ -0,0 +1,128 @@
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+var _excluded = ["id", "classes", "className", "children", "values", "onSort", "hideSortBy", "sortProps"];
+
+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 "core-js/modules/es.array.iterator.js";
+import "core-js/modules/es.object.to-string.js";
+import "core-js/modules/web.dom-collections.iterator.js";
+import "core-js/modules/es.array.map.js";
+import "core-js/modules/es.object.keys.js";
+import "core-js/modules/es.symbol.js";
+import "core-js/modules/es.array.filter.js";
+import "core-js/modules/es.object.get-own-property-descriptor.js";
+import "core-js/modules/web.dom-collections.for-each.js";
+import "core-js/modules/es.object.get-own-property-descriptors.js";
+import React, { useContext, useState } from "react";
+import PropTypes from "prop-types";
+import clsx from "clsx";
+import { withStyles } from "@mui/styles";
+import { HvDropdown, setId } from "../..";
+import { HvControlsContext } from "../context/ControlsContext";
+import styleCreator from "./styles";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+
+var HvRightControl = function HvRightControl(_ref) {
+  var id = _ref.id,
+      classes = _ref.classes,
+      className = _ref.className,
+      children = _ref.children,
+      values = _ref.values,
+      onSort = _ref.onSort,
+      _ref$hideSortBy = _ref.hideSortBy,
+      hideSortBy = _ref$hideSortBy === void 0 ? false : _ref$hideSortBy,
+      sortProps = _ref.sortProps,
+      others = _objectWithoutProperties(_ref, _excluded);
+
+  var _useState = useState(values),
+      _useState2 = _slicedToArray(_useState, 2),
+      dropDownValues = _useState2[0],
+      setDropdownValues = _useState2[1];
+
+  var _useContext = useContext(HvControlsContext),
+      onSortHandler = _useContext.onSort;
+
+  var handleChangeSort = function handleChangeSort(value) {
+    onSort === null || onSort === void 0 ? void 0 : onSort(value);
+    onSortHandler === null || onSortHandler === void 0 ? void 0 : onSortHandler(value); // this should be changed when dropdown changes his "values" behavior
+
+    setDropdownValues(function (prevValues) {
+      return prevValues.map(function (prevValue) {
+        return _objectSpread(_objectSpread({}, prevValue), {}, {
+          selected: prevValue.id === value.id
+        });
+      });
+    });
+  };
+
+  return /*#__PURE__*/_jsxs("div", _objectSpread(_objectSpread({
+    id: id,
+    className: clsx(className, classes.root)
+  }, others), {}, {
+    children: [!hideSortBy && /*#__PURE__*/_jsx(HvDropdown, _objectSpread({
+      id: setId(id, "sort-by-dropdown"),
+      values: dropDownValues,
+      className: classes.sortDropdown,
+      onChange: handleChangeSort,
+      singleSelectionToggle: false
+    }, sortProps)), children]
+  }));
+};
+
+process.env.NODE_ENV !== "production" ? HvRightControl.propTypes = {
+  /** Children to be rendered. */
+  id: PropTypes.string,
+
+  /**
+   * Class names to be applied.
+   */
+  className: PropTypes.string,
+
+  /** Children to be rendered. */
+  children: PropTypes.node,
+
+  /**
+   * the classes object to be applied.
+   */
+  classes: PropTypes.shape({
+    /**
+     * Style applied to the root of the component.
+     */
+    root: PropTypes.string,
+
+    /**
+     * Style applied to the dropdown in charge of sorting.
+     */
+    sortDropdown: PropTypes.string
+  }).isRequired,
+
+  /** Data collection to be listed on the sort field. */
+  values: PropTypes.arrayOf(PropTypes.shape({
+    id: PropTypes.string,
+    accessor: PropTypes.string,
+    label: PropTypes.string,
+    selected: PropTypes.bool,
+    desc: PropTypes.bool
+  })),
+
+  /** Callback fired when the selected sort item is changed. */
+  onSort: PropTypes.func,
+
+  /** Boolean to control whether if the sort input should appears or not. */
+  hideSortBy: PropTypes.bool,
+
+  /**
+   * Extra props to be passed onto the dropdown
+   */
+  sortProps: PropTypes.object
+} : void 0;
+export default withStyles(styleCreator, {
+  name: "HvRightControl",
+  withTheme: true
+})(HvRightControl);
+//# sourceMappingURL=RightControl.js.map

package/dist/legacy/Controls/RightControl/RightControl.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RightControl.js","names":["React","useContext","useState","PropTypes","clsx","withStyles","HvDropdown","setId","HvControlsContext","styleCreator","HvRightControl","id","classes","className","children","values","onSort","hideSortBy","sortProps","others","dropDownValues","setDropdownValues","onSortHandler","handleChangeSort","value","prevValues","map","prevValue","selected","root","sortDropdown","propTypes","string","node","shape","isRequired","arrayOf","accessor","label","bool","desc","func","object","name","withTheme"],"sources":["../../../../src/Controls/RightControl/RightControl.js"],"sourcesContent":["import React, { useContext, useState } from \"react\";\nimport PropTypes from \"prop-types\";\nimport clsx from \"clsx\";\nimport { withStyles } from \"@mui/styles\";\n\nimport { HvDropdown, setId } from \"../..\";\nimport { HvControlsContext } from \"../context/ControlsContext\";\nimport styleCreator from \"./styles\";\n\nconst HvRightControl = ({\n  id,\n  classes,\n  className,\n  children,\n  values,\n  onSort,\n  hideSortBy = false,\n  sortProps,\n  ...others\n}) => {\n  const [dropDownValues, setDropdownValues] = useState(values);\n\n  const { onSort: onSortHandler } = useContext(HvControlsContext);\n\n  const handleChangeSort = (value) => {\n    onSort?.(value);\n    onSortHandler?.(value);\n    // this should be changed when dropdown changes his \"values\" behavior\n    setDropdownValues((prevValues) =>\n      prevValues.map((prevValue) => ({\n        ...prevValue,\n        selected: prevValue.id === value.id,\n      }))\n    );\n  };\n  return (\n    <div id={id} className={clsx(className, classes.root)} {...others}>\n      {!hideSortBy && (\n        <HvDropdown\n          id={setId(id, \"sort-by-dropdown\")}\n          values={dropDownValues}\n          className={classes.sortDropdown}\n          onChange={handleChangeSort}\n          singleSelectionToggle={false}\n          {...sortProps}\n        />\n      )}\n      {children}\n    </div>\n  );\n};\n\nHvRightControl.propTypes = {\n  /** Children to be rendered. */\n  id: PropTypes.string,\n  /**\n   * Class names to be applied.\n   */\n  className: PropTypes.string,\n  /** Children to be rendered. */\n  children: PropTypes.node,\n  /**\n   * the classes object to be applied.\n   */\n  classes: PropTypes.shape({\n    /**\n     * Style applied to the root of the component.\n     */\n    root: PropTypes.string,\n    /**\n     * Style applied to the dropdown in charge of sorting.\n     */\n    sortDropdown: PropTypes.string,\n  }).isRequired,\n  /** Data collection to be listed on the sort field. */\n  values: PropTypes.arrayOf(\n    PropTypes.shape({\n      id: PropTypes.string,\n      accessor: PropTypes.string,\n      label: PropTypes.string,\n      selected: PropTypes.bool,\n      desc: PropTypes.bool,\n    })\n  ),\n  /** Callback fired when the selected sort item is changed. */\n  onSort: PropTypes.func,\n  /** Boolean to control whether if the sort input should appears or not. */\n  hideSortBy: PropTypes.bool,\n  /**\n   * Extra props to be passed onto the dropdown\n   */\n  sortProps: PropTypes.object,\n};\n\nexport default withStyles(styleCreator, { name: \"HvRightControl\", withTheme: true })(\n  HvRightControl\n);\n"],"mappings":"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"}

package/dist/legacy/Controls/RightControl/index.d.ts

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

package/dist/legacy/Controls/RightControl/index.js

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

package/dist/legacy/Controls/RightControl/index.js.map

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

package/dist/legacy/Controls/RightControl/styles.js

@@ -0,0 +1,14 @@
+var styles = function styles() {
+  return {
+    root: {
+      display: "inline-flex",
+      gap: 10
+    },
+    sortDropdown: {
+      minWidth: 200
+    }
+  };
+};
+
+export default styles;
+//# sourceMappingURL=styles.js.map

package/dist/legacy/Controls/RightControl/styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.js","names":["styles","root","display","gap","sortDropdown","minWidth"],"sources":["../../../../src/Controls/RightControl/styles.js"],"sourcesContent":["const styles = () => ({\n  root: {\n    display: \"inline-flex\",\n    gap: 10,\n  },\n  sortDropdown: {\n    minWidth: 200,\n  },\n});\n\nexport default styles;\n"],"mappings":"AAAA,IAAMA,MAAM,GAAG,SAATA,MAAS;EAAA,OAAO;IACpBC,IAAI,EAAE;MACJC,OAAO,EAAE,aADL;MAEJC,GAAG,EAAE;IAFD,CADc;IAKpBC,YAAY,EAAE;MACZC,QAAQ,EAAE;IADE;EALM,CAAP;AAAA,CAAf;;AAUA,eAAeL,MAAf"}

package/dist/legacy/Controls/context/ControlsContext.js

@@ -0,0 +1,6 @@
+import React from "react";
+export var HvControlsContext = /*#__PURE__*/React.createContext({});
+export var HvControlsContextProvider = HvControlsContext.Provider;
+export var HvControlsContextConsumer = HvControlsContext.Consumer;
+export default HvControlsContext;
+//# sourceMappingURL=ControlsContext.js.map

package/dist/legacy/Controls/context/ControlsContext.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ControlsContext.js","names":["React","HvControlsContext","createContext","HvControlsContextProvider","Provider","HvControlsContextConsumer","Consumer"],"sources":["../../../../src/Controls/context/ControlsContext.js"],"sourcesContent":["import React from \"react\";\n\nexport const HvControlsContext = React.createContext({});\n\nexport const HvControlsContextProvider = HvControlsContext.Provider;\nexport const HvControlsContextConsumer = HvControlsContext.Consumer;\nexport default HvControlsContext;\n"],"mappings":"AAAA,OAAOA,KAAP,MAAkB,OAAlB;AAEA,OAAO,IAAMC,iBAAiB,gBAAGD,KAAK,CAACE,aAAN,CAAoB,EAApB,CAA1B;AAEP,OAAO,IAAMC,yBAAyB,GAAGF,iBAAiB,CAACG,QAApD;AACP,OAAO,IAAMC,yBAAyB,GAAGJ,iBAAiB,CAACK,QAApD;AACP,eAAeL,iBAAf"}

package/dist/legacy/Controls/index.d.ts

@@ -0,0 +1,3 @@
+export { default } from "./Controls";
+export { default as HvLeftControl } from "./LeftControl";
+export { default as HvRightControl } from "./RightControl";

package/dist/legacy/Controls/index.js

@@ -0,0 +1,4 @@
+export { default } from "./Controls";
+export { default as HvLeftControl } from "./LeftControl";
+export { default as HvRightControl } from "./RightControl";
+//# sourceMappingURL=index.js.map

package/dist/legacy/Controls/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["default","HvLeftControl","HvRightControl"],"sources":["../../../src/Controls/index.js"],"sourcesContent":["export { default } from \"./Controls\";\nexport { default as HvLeftControl } from \"./LeftControl\";\nexport { default as HvRightControl } from \"./RightControl\";\n"],"mappings":"AAAA,SAASA,OAAT,QAAwB,YAAxB;AACA,SAASA,OAAO,IAAIC,aAApB,QAAyC,eAAzC;AACA,SAASD,OAAO,IAAIE,cAApB,QAA0C,gBAA1C"}

package/dist/legacy/Controls/styles.js

@@ -0,0 +1,22 @@
+var styles = function styles() {
+  return {
+    root: {
+      display: "inline-flex",
+      width: "100%",
+      justifyContent: "space-between"
+    },
+    section: {
+      display: "inline-flex",
+      alignItems: "flex-end",
+      gap: 10
+    },
+    leftSection: {},
+    rightSection: {},
+    sortInput: {
+      minWidth: 200
+    }
+  };
+};
+
+export default styles;
+//# sourceMappingURL=styles.js.map

package/dist/legacy/Controls/styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.js","names":["styles","root","display","width","justifyContent","section","alignItems","gap","leftSection","rightSection","sortInput","minWidth"],"sources":["../../../src/Controls/styles.js"],"sourcesContent":["const styles = () => ({\n  root: {\n    display: \"inline-flex\",\n    width: \"100%\",\n    justifyContent: \"space-between\",\n  },\n  section: {\n    display: \"inline-flex\",\n    alignItems: \"flex-end\",\n    gap: 10,\n  },\n  leftSection: {},\n  rightSection: {},\n  sortInput: {\n    minWidth: 200,\n  },\n});\n\nexport default styles;\n"],"mappings":"AAAA,IAAMA,MAAM,GAAG,SAATA,MAAS;EAAA,OAAO;IACpBC,IAAI,EAAE;MACJC,OAAO,EAAE,aADL;MAEJC,KAAK,EAAE,MAFH;MAGJC,cAAc,EAAE;IAHZ,CADc;IAMpBC,OAAO,EAAE;MACPH,OAAO,EAAE,aADF;MAEPI,UAAU,EAAE,UAFL;MAGPC,GAAG,EAAE;IAHE,CANW;IAWpBC,WAAW,EAAE,EAXO;IAYpBC,YAAY,EAAE,EAZM;IAapBC,SAAS,EAAE;MACTC,QAAQ,EAAE;IADD;EAbS,CAAP;AAAA,CAAf;;AAkBA,eAAeX,MAAf"}

package/dist/legacy/DatePicker/DatePicker.d.ts

@@ -1,4 +1,4 @@
-import { StandardProps } from "@material-ui/core";
+import { StandardProps } from "@mui/material";
 import { HvFormElementProps } from "..";
 
 export type HvDatePickerClassKey =

package/dist/legacy/DatePicker/DatePicker.js

@@ -1,15 +1,26 @@
-import _extends from "@babel/runtime/helpers/esm/extends";
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 var _excluded = ["classes", "className", "id", "name", "required", "disabled", "label", "aria-label", "aria-labelledby", "description", "aria-describedby", "onChange", "onCancel", "onClear", "status", "statusMessage", "aria-errormessage", "placeholder", "labels", "value", "startValue", "endValue", "rangeMode", "startAdornment", "horizontalPlacement", "locale", "showActions", "showClear", "disablePortal", "escapeWithReference", "dropdownProps", "readOnly"];
+
+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 "core-js/modules/es.function.name.js";
 import "core-js/modules/es.symbol.js";
 import "core-js/modules/es.symbol.description.js";
 import "core-js/modules/es.string.trim.js";
 import "core-js/modules/es.array.join.js";
+import "core-js/modules/es.object.keys.js";
+import "core-js/modules/es.array.filter.js";
+import "core-js/modules/es.object.to-string.js";
+import "core-js/modules/es.object.get-own-property-descriptor.js";
+import "core-js/modules/web.dom-collections.for-each.js";
+import "core-js/modules/es.object.get-own-property-descriptors.js";
 import React, { useState, useEffect, useRef } from "react";
 import PropTypes from "prop-types";
-import { withStyles } from "@material-ui/core";
+import { withStyles } from "@mui/styles";
 import { Calendar } from "@hitachivantara/uikit-react-icons";
 import clsx from "clsx";
 import { setId, useSavedState, useLabels } from "../utils";
@@ -21,6 +32,8 @@ import { getDateLabel } from "./utils";
 import useVisibleDate from "./useVisibleDate";
 import useLocale from "../Provider/useLocale";
 import { NAV_OPTIONS } from "../Calendar/enums";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
 var DEFAULT_LABELS = {
   applyLabel: "Apply",
   cancelLabel: "Cancel",
@@ -259,34 +272,41 @@ var HvDatePicker = function HvDatePicker(props) {
 
 
   var renderActions = function renderActions() {
-    return /*#__PURE__*/React.createElement(HvActionBar, {
-      className: clsx(showClear && classes.actionContainer)
-    }, showClear && /*#__PURE__*/React.createElement("div", {
-      className: classes.leftContainer
-    }, /*#__PURE__*/React.createElement(HvButton, {
-      id: setId(id, "action", "clear"),
-      className: classes.action,
-      category: "ghost",
-      onClick: handleClear
-    }, labels.clearLabel)), /*#__PURE__*/React.createElement("div", {
-      className: classes.rightContainer
-    }, /*#__PURE__*/React.createElement(HvButton, {
-      id: setId(id, "action", "apply"),
-      className: classes.action,
-      category: "ghost",
-      onClick: handleApply
-    }, labels.applyLabel), /*#__PURE__*/React.createElement(HvButton, {
-      id: setId(id, "action", "cancel"),
-      className: classes.action,
-      category: "ghost",
-      onClick: handleCancel
-    }, labels.cancelLabel)));
+    return /*#__PURE__*/_jsxs(HvActionBar, {
+      className: clsx(showClear && classes.actionContainer),
+      children: [showClear && /*#__PURE__*/_jsx("div", {
+        className: classes.leftContainer,
+        children: /*#__PURE__*/_jsx(HvButton, {
+          id: setId(id, "action", "clear"),
+          className: classes.action,
+          category: "ghost",
+          onClick: handleClear,
+          children: labels.clearLabel
+        })
+      }), /*#__PURE__*/_jsxs("div", {
+        className: classes.rightContainer,
+        children: [/*#__PURE__*/_jsx(HvButton, {
+          id: setId(id, "action", "apply"),
+          className: classes.action,
+          category: "ghost",
+          onClick: handleApply,
+          children: labels.applyLabel
+        }), /*#__PURE__*/_jsx(HvButton, {
+          id: setId(id, "action", "cancel"),
+          className: classes.action,
+          category: "ghost",
+          onClick: handleCancel,
+          children: labels.cancelLabel
+        })]
+      })]
+    });
   };
 
   var renderInput = function renderInput(dateString) {
-    return /*#__PURE__*/React.createElement(HvTypography, {
-      variant: dateString ? "normalText" : "placeholderText"
-    }, (dateString || placeholder) === undefined ? "" : dateString || placeholder);
+    return /*#__PURE__*/_jsx(HvTypography, {
+      variant: dateString ? "normalText" : "placeholderText",
+      children: (dateString || placeholder) === undefined ? "" : dateString || placeholder
+    });
   };
 
   var dateValue = rangeMode ? {
@@ -307,7 +327,7 @@ var HvDatePicker = function HvDatePicker(props) {
     errorMessageId = canShowError ? setId(elementId, "error") : ariaErrorMessage;
   }
 
-  return /*#__PURE__*/React.createElement(HvFormElement, _extends({
+  return /*#__PURE__*/_jsxs(HvFormElement, _objectSpread(_objectSpread({
     id: id,
     name: name,
     value: dateValue,
@@ -317,70 +337,77 @@ var HvDatePicker = function HvDatePicker(props) {
     className: clsx(className, classes.root),
     locale: locale,
     readOnly: readOnly
-  }, others), (hasLabel || hasDescription) && /*#__PURE__*/React.createElement("div", {
-    className: classes.labelContainer
-  }, hasLabel && /*#__PURE__*/React.createElement(HvLabel, {
-    id: setId(elementId, "label"),
-    label: label,
-    className: classes.label
-  }), hasDescription && /*#__PURE__*/React.createElement(HvInfoMessage, {
-    id: setId(elementId, "description"),
-    className: classes.description
-  }, description)), /*#__PURE__*/React.createElement(HvBaseDropdown, _extends({
-    role: "combobox",
-    classes: {
-      root: classes.dropdown,
-      panel: classes.panel,
-      header: isStateInvalid ? classes.dropdownHeaderInvalid : undefined,
-      headerOpen: classes.dropdownHeaderOpen
-    },
-    readOnly: readOnly,
-    disabled: disabled,
-    disablePortal: disablePortal,
-    variableWidth: true,
-    placement: horizontalPlacement,
-    expanded: calendarOpen,
-    onToggle: handleToggle,
-    onClickOutside: handleCalendarClose,
-    onContainerCreation: focusOnContainer,
-    placeholder: renderInput(getDateLabel(dateValue, rangeMode, locale)),
-    adornment: /*#__PURE__*/React.createElement(Calendar, {
-      className: classes.icon,
-      color: disabled ? "atmo5" : undefined
-    }),
-    popperProps: {
-      modifiers: [{
-        name: "preventOverflow",
-        enabled: escapeWithReference
-      }]
-    },
-    "aria-haspopup": "dialog",
-    "aria-label": ariaLabel,
-    "aria-labelledby": [label && setId(elementId, "label"), ariaLabelledBy].join(" ").trim() || undefined,
-    "aria-invalid": isStateInvalid ? true : undefined,
-    "aria-errormessage": errorMessageId,
-    "aria-describedby": [description && setId(elementId, "description"), ariaDescribedBy].join(" ").trim() || undefined
-  }, dropdownProps), /*#__PURE__*/React.createElement("div", {
-    ref: focusTarget,
-    tabIndex: -1
-  }), /*#__PURE__*/React.createElement(HvCalendar, _extends({
-    id: setId(id, "calendar"),
-    startAdornment: startAdornment,
-    onChange: handleDateChange,
-    onInputChange: handleInputDateChange,
-    onVisibleDateChange: function onVisibleDateChange(_event, type, month, target) {
-      dispatchAction({
-        type: type,
-        target: target,
-        month: month
-      });
-    },
-    locale: locale
-  }, visibleDate)), (rangeMode || showActions) && renderActions()), canShowError && /*#__PURE__*/React.createElement(HvWarningText, {
-    id: setId(elementId, "error"),
-    disableBorder: true,
-    className: classes.error
-  }, validationMessage));
+  }, others), {}, {
+    children: [(hasLabel || hasDescription) && /*#__PURE__*/_jsxs("div", {
+      className: classes.labelContainer,
+      children: [hasLabel && /*#__PURE__*/_jsx(HvLabel, {
+        id: setId(elementId, "label"),
+        label: label,
+        className: classes.label
+      }), hasDescription && /*#__PURE__*/_jsx(HvInfoMessage, {
+        id: setId(elementId, "description"),
+        className: classes.description,
+        children: description
+      })]
+    }), /*#__PURE__*/_jsxs(HvBaseDropdown, _objectSpread(_objectSpread({
+      role: "combobox",
+      classes: {
+        root: classes.dropdown,
+        panel: classes.panel,
+        header: isStateInvalid ? classes.dropdownHeaderInvalid : undefined,
+        headerOpen: classes.dropdownHeaderOpen
+      },
+      readOnly: readOnly,
+      disabled: disabled,
+      disablePortal: disablePortal,
+      variableWidth: true,
+      placement: horizontalPlacement,
+      expanded: calendarOpen,
+      onToggle: handleToggle,
+      onClickOutside: handleCalendarClose,
+      onContainerCreation: focusOnContainer,
+      placeholder: renderInput(getDateLabel(dateValue, rangeMode, locale)),
+      adornment: /*#__PURE__*/_jsx(Calendar, {
+        className: classes.icon,
+        color: disabled ? "atmo5" : undefined
+      }),
+      popperProps: {
+        modifiers: [{
+          name: "preventOverflow",
+          enabled: escapeWithReference
+        }]
+      },
+      "aria-haspopup": "dialog",
+      "aria-label": ariaLabel,
+      "aria-labelledby": [label && setId(elementId, "label"), ariaLabelledBy].join(" ").trim() || undefined,
+      "aria-invalid": isStateInvalid ? true : undefined,
+      "aria-errormessage": errorMessageId,
+      "aria-describedby": [description && setId(elementId, "description"), ariaDescribedBy].join(" ").trim() || undefined
+    }, dropdownProps), {}, {
+      children: [/*#__PURE__*/_jsx("div", {
+        ref: focusTarget,
+        tabIndex: -1
+      }), /*#__PURE__*/_jsx(HvCalendar, _objectSpread({
+        id: setId(id, "calendar"),
+        startAdornment: startAdornment,
+        onChange: handleDateChange,
+        onInputChange: handleInputDateChange,
+        onVisibleDateChange: function onVisibleDateChange(_event, type, month, target) {
+          dispatchAction({
+            type: type,
+            target: target,
+            month: month
+          });
+        },
+        locale: locale
+      }, visibleDate)), (rangeMode || showActions) && renderActions()]
+    })), canShowError && /*#__PURE__*/_jsx(HvWarningText, {
+      id: setId(elementId, "error"),
+      disableBorder: true,
+      className: classes.error,
+      children: validationMessage
+    })]
+  }));
 };
 
 process.env.NODE_ENV !== "production" ? HvDatePicker.propTypes = {