@hitachivantara/uikit-react-core 3.52.5

package/dist/DropDownMenu/DropDownMenu.js

@@ -0,0 +1,297 @@
+"use strict";
+
+require("core-js/modules/es.array.iterator.js");
+
+require("core-js/modules/es.string.iterator.js");
+
+require("core-js/modules/es.weak-map.js");
+
+require("core-js/modules/web.dom-collections.iterator.js");
+
+require("core-js/modules/es.object.get-own-property-descriptor.js");
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+require("core-js/modules/es.object.to-string.js");
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _clsx = _interopRequireDefault(require("clsx"));
+
+var _deprecatedPropType = _interopRequireDefault(require("@material-ui/core/utils/deprecatedPropType"));
+
+var _core = require("@material-ui/core");
+
+var _uikitReactIcons = require("@hitachivantara/uikit-react-icons");
+
+var _utils = require("../utils");
+
+var _ = require("..");
+
+var _styles = _interopRequireDefault(require("./styles"));
+
+var _withId = _interopRequireDefault(require("../withId"));
+
+var _excluded = ["id", "classes", "className", "icon", "placement", "dataList", "disablePortal", "onToggle", "onToggleOpen", "onClick", "keepOpened", "disabled", "expanded", "defaultExpanded", "category"];
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+/**
+ * A drop-down menu is a graphical control element, similar to a list box, that allows the user to choose a value from a list.
+ */
+var DropDownMenu = function DropDownMenu(_ref) {
+  var id = _ref.id,
+      classes = _ref.classes,
+      className = _ref.className,
+      icon = _ref.icon,
+      _ref$placement = _ref.placement,
+      placement = _ref$placement === void 0 ? "right" : _ref$placement,
+      dataList = _ref.dataList,
+      _ref$disablePortal = _ref.disablePortal,
+      disablePortal = _ref$disablePortal === void 0 ? false : _ref$disablePortal,
+      _onToggle = _ref.onToggle,
+      onToggleOpen = _ref.onToggleOpen,
+      _onClick = _ref.onClick,
+      _ref$keepOpened = _ref.keepOpened,
+      keepOpened = _ref$keepOpened === void 0 ? true : _ref$keepOpened,
+      _ref$disabled = _ref.disabled,
+      disabled = _ref$disabled === void 0 ? false : _ref$disabled,
+      expanded = _ref.expanded,
+      _ref$defaultExpanded = _ref.defaultExpanded,
+      defaultExpanded = _ref$defaultExpanded === void 0 ? false : _ref$defaultExpanded,
+      category = _ref.category,
+      others = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+
+  var _useControlled = (0, _utils.useControlled)(expanded, Boolean(defaultExpanded)),
+      _useControlled2 = (0, _slicedToArray2.default)(_useControlled, 2),
+      open = _useControlled2[0],
+      setOpen = _useControlled2[1];
+
+  var theme = (0, _core.useTheme)();
+  var focusNodes = (0, _utils.getPrevNextFocus)((0, _.setId)(id, "icon-button"));
+  var listId = (0, _.setId)(id, "list");
+
+  var handleClose = function handleClose(event) {
+    // this will only run if uncontrolled
+    setOpen(false);
+    onToggleOpen === null || onToggleOpen === void 0 ? void 0 : onToggleOpen(false);
+    _onToggle === null || _onToggle === void 0 ? void 0 : _onToggle(event, false);
+  }; // If the ESCAPE key is pressed inside the list, the close handler must be called.
+
+
+  var handleKeyDown = function handleKeyDown(event) {
+    if ((0, _utils.isKeypress)(event, _utils.KeyboardCodes.Tab)) {
+      var node = event.shiftKey ? focusNodes.prevFocus : focusNodes.nextFocus;
+      if (node) setTimeout(function () {
+        return node.focus();
+      }, 0);
+      handleClose(event);
+    }
+
+    event.preventDefault();
+  };
+
+  var setFocusToContent = function setFocusToContent(containerRef) {
+    var _containerRef$getElem;
+
+    containerRef === null || containerRef === void 0 ? void 0 : (_containerRef$getElem = containerRef.getElementsByTagName("li")[0]) === null || _containerRef$getElem === void 0 ? void 0 : _containerRef$getElem.focus();
+  };
+
+  var headerComponent = /*#__PURE__*/_react.default.createElement(_.HvButton, {
+    icon: true,
+    category: category,
+    id: (0, _.setId)(id, "icon-button"),
+    className: (0, _clsx.default)(classes.icon, open && classes.iconSelected),
+    "aria-expanded": open,
+    disabled: disabled,
+    "aria-label": "Dropdown menu"
+  }, icon || /*#__PURE__*/_react.default.createElement(_uikitReactIcons.MoreOptionsVertical, {
+    color: disabled ? "atmo5" : undefined
+  }));
+
+  var condensed = (0, _react.useMemo)(function () {
+    return dataList.every(function (el) {
+      return !el.icon;
+    });
+  }, [dataList]);
+  var popperStyle = {
+    style: {
+      zIndex: theme.zIndex.tooltip,
+      width: null
+    }
+  };
+  return /*#__PURE__*/_react.default.createElement(_.HvBaseDropdown, (0, _extends2.default)({
+    id: id,
+    className: (0, _clsx.default)(className, classes.container),
+    classes: {
+      root: classes.root,
+      container: classes.baseContainer
+    },
+    expanded: open && !disabled,
+    component: headerComponent,
+    "aria-haspopup": "menu",
+    placement: placement,
+    variableWidth: true,
+    disablePortal: disablePortal,
+    onToggle: function onToggle(e, s) {
+      // this will only run if uncontrolled
+      setOpen(s);
+      onToggleOpen === null || onToggleOpen === void 0 ? void 0 : onToggleOpen(s);
+      _onToggle === null || _onToggle === void 0 ? void 0 : _onToggle(e, s);
+    },
+    disabled: disabled,
+    onContainerCreation: setFocusToContent,
+    popperProps: popperStyle
+  }, others), /*#__PURE__*/_react.default.createElement(_.HvPanel, null, /*#__PURE__*/_react.default.createElement(_.HvList, {
+    id: listId,
+    values: dataList,
+    selectable: false,
+    condensed: condensed,
+    onClick: function onClick(event, item) {
+      if (!keepOpened) handleClose(event);
+      _onClick === null || _onClick === void 0 ? void 0 : _onClick(event, item);
+    },
+    onKeyDown: handleKeyDown,
+    classes: {
+      root: classes.menuList
+    }
+  })));
+};
+
+DropDownMenu.propTypes = {
+  /**
+   * Class names to be applied.
+   */
+  className: _propTypes.default.string,
+
+  /**
+   * Id to be applied to the root node.
+   */
+  id: _propTypes.default.string,
+
+  /**
+   * A Jss Object used to override or extend the styles applied.
+   */
+  classes: _propTypes.default.shape({
+    /**
+     * Styles applied to the root.
+     */
+    root: _propTypes.default.string,
+
+    /**
+     * Styles applied to the container.
+     */
+    container: _propTypes.default.string,
+
+    /**
+     * Styles applied to the BaseDropdown container.
+     */
+    baseContainer: _propTypes.default.string,
+
+    /**
+     * Styles applied to the icon.
+     */
+    icon: _propTypes.default.string,
+
+    /**
+     * Styles applied to the icon when selected.
+     */
+    iconSelected: _propTypes.default.string,
+
+    /**
+     * Styles applied to the list.
+     */
+    menuList: _propTypes.default.string
+  }).isRequired,
+
+  /**
+   * Icon.
+   */
+  icon: _propTypes.default.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.
+   * - icon: The icon node to be rendered on the left.
+   * - showNavIcon: If true renders the navigation icon on the right.
+   */
+  dataList: _propTypes.default.arrayOf(_propTypes.default.shape({
+    label: _propTypes.default.node.isRequired,
+    selected: _propTypes.default.bool,
+    disabled: _propTypes.default.bool,
+    icon: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.node]),
+    showNavIcon: _propTypes.default.bool
+  })).isRequired,
+
+  /**
+   * Placement of the dropdown.
+   */
+  placement: _propTypes.default.oneOf(["left", "right"]),
+
+  /**
+   * Disable the portal behavior. The children stay within it's parent DOM hierarchy.
+   */
+  disablePortal: _propTypes.default.bool,
+
+  /**
+   * Function executed on toggle of the dropdown. Should receive the open status.
+   */
+  onToggleOpen: (0, _deprecatedPropType.default)(_propTypes.default.func, "Instead use the onToggle prop which receives the event"),
+
+  /**
+   * Function executed on toggle of the dropdown. Should receive the open status.
+   */
+  onToggle: _propTypes.default.func,
+
+  /**
+   * Function executed in each onClick. Should received the clicked element.
+   */
+  onClick: _propTypes.default.func,
+
+  /**
+   * Keep the Dropdown Menu opened after clicking one option
+   */
+  keepOpened: _propTypes.default.bool,
+
+  /**
+   * Defines if the component is disabled.
+   */
+  disabled: _propTypes.default.bool,
+
+  /**
+   * If true it should be displayed open.
+   */
+  expanded: _propTypes.default.bool,
+
+  /**
+   * When uncontrolled, defines the initial expanded state.
+   */
+  defaultExpanded: _propTypes.default.bool
+};
+
+var _default = (0, _core.withStyles)(_styles.default, {
+  name: "HvDropDownMenu"
+})((0, _withId.default)(DropDownMenu));
+
+exports.default = _default;
+//# sourceMappingURL=DropDownMenu.js.map

package/dist/DropDownMenu/DropDownMenu.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/DropDownMenu/DropDownMenu.js"],"names":["DropDownMenu","id","classes","className","icon","placement","dataList","disablePortal","onToggle","onToggleOpen","onClick","keepOpened","disabled","expanded","defaultExpanded","category","others","Boolean","open","setOpen","theme","focusNodes","listId","handleClose","event","handleKeyDown","KeyboardCodes","Tab","node","shiftKey","prevFocus","nextFocus","setTimeout","focus","preventDefault","setFocusToContent","containerRef","getElementsByTagName","headerComponent","iconSelected","undefined","condensed","every","el","popperStyle","style","zIndex","tooltip","width","container","root","baseContainer","e","s","item","menuList","propTypes","PropTypes","string","shape","isRequired","element","arrayOf","label","selected","bool","oneOfType","func","showNavIcon","oneOf","styles","name"],"mappings":"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","sourcesContent":["import React, { useMemo } from \"react\";\nimport PropTypes from \"prop-types\";\nimport clsx from \"clsx\";\nimport deprecatedPropType from \"@material-ui/core/utils/deprecatedPropType\";\nimport { withStyles, useTheme } from \"@material-ui/core\";\nimport { MoreOptionsVertical } from \"@hitachivantara/uikit-react-icons\";\nimport { getPrevNextFocus, isKeypress, KeyboardCodes, useControlled } from \"../utils\";\nimport { HvButton, HvList, HvPanel, HvBaseDropdown, setId } from \"..\";\nimport styles from \"./styles\";\nimport withId from \"../withId\";\n\n/**\n * A drop-down menu is a graphical control element, similar to a list box, that allows the user to choose a value from a list.\n */\nconst DropDownMenu = ({\n  id,\n  classes,\n  className,\n  icon,\n  placement = \"right\",\n  dataList,\n  disablePortal = false,\n  onToggle,\n  onToggleOpen,\n  onClick,\n  keepOpened = true,\n  disabled = false,\n  expanded,\n  defaultExpanded = false,\n  // eslint-disable-next-line\n  category,\n  ...others\n}) => {\n  const [open, setOpen] = useControlled(expanded, Boolean(defaultExpanded));\n  const theme = useTheme();\n  const focusNodes = getPrevNextFocus(setId(id, \"icon-button\"));\n\n  const listId = setId(id, \"list\");\n\n  const handleClose = (event) => {\n    // this will only run if uncontrolled\n    setOpen(false);\n    onToggleOpen?.(false);\n    onToggle?.(event, false);\n  };\n\n  // If the ESCAPE key is pressed inside the list, the close handler must be called.\n  const handleKeyDown = (event) => {\n    if (isKeypress(event, KeyboardCodes.Tab)) {\n      const node = event.shiftKey ? focusNodes.prevFocus : focusNodes.nextFocus;\n      if (node) setTimeout(() => node.focus(), 0);\n      handleClose(event);\n    }\n    event.preventDefault();\n  };\n\n  const setFocusToContent = (containerRef) => {\n    containerRef?.getElementsByTagName(\"li\")[0]?.focus();\n  };\n\n  const headerComponent = (\n    <HvButton\n      icon\n      category={category}\n      id={setId(id, \"icon-button\")}\n      className={clsx(classes.icon, {\n        [classes.iconSelected]: open,\n      })}\n      aria-expanded={open}\n      disabled={disabled}\n      aria-label=\"Dropdown menu\"\n    >\n      {icon || <MoreOptionsVertical color={disabled ? \"atmo5\" : undefined} />}\n    </HvButton>\n  );\n\n  const condensed = useMemo(() => dataList.every((el) => !el.icon), [dataList]);\n  const popperStyle = {\n    style: { zIndex: theme.zIndex.tooltip, width: null },\n  };\n\n  return (\n    <HvBaseDropdown\n      id={id}\n      className={clsx(className, classes.container)}\n      classes={{ root: classes.root, container: classes.baseContainer }}\n      expanded={open && !disabled}\n      component={headerComponent}\n      aria-haspopup=\"menu\"\n      placement={placement}\n      variableWidth\n      disablePortal={disablePortal}\n      onToggle={(e, s) => {\n        // this will only run if uncontrolled\n        setOpen(s);\n        onToggleOpen?.(s);\n        onToggle?.(e, s);\n      }}\n      disabled={disabled}\n      onContainerCreation={setFocusToContent}\n      popperProps={popperStyle}\n      {...others}\n    >\n      <HvPanel>\n        <HvList\n          id={listId}\n          values={dataList}\n          selectable={false}\n          condensed={condensed}\n          onClick={(event, item) => {\n            if (!keepOpened) handleClose(event);\n            onClick?.(event, item);\n          }}\n          onKeyDown={handleKeyDown}\n          classes={{ root: classes.menuList }}\n        />\n      </HvPanel>\n    </HvBaseDropdown>\n  );\n};\n\nDropDownMenu.propTypes = {\n  /**\n   * Class names to be applied.\n   */\n  className: PropTypes.string,\n  /**\n   * Id to be applied to the root node.\n   */\n  id: PropTypes.string,\n  /**\n   * A Jss Object used to override or extend the styles applied.\n   */\n  classes: PropTypes.shape({\n    /**\n     * Styles applied to the root.\n     */\n    root: PropTypes.string,\n    /**\n     * Styles applied to the container.\n     */\n    container: PropTypes.string,\n    /**\n     * Styles applied to the BaseDropdown container.\n     */\n    baseContainer: PropTypes.string,\n    /**\n     * Styles applied to the icon.\n     */\n    icon: PropTypes.string,\n    /**\n     * Styles applied to the icon when selected.\n     */\n    iconSelected: PropTypes.string,\n    /**\n     * Styles applied to the list.\n     */\n    menuList: PropTypes.string,\n  }).isRequired,\n  /**\n   * Icon.\n   */\n  icon: PropTypes.element,\n  /**\n   * A list containing the elements to be rendered.\n   *\n   * - label: The label of the element to be rendered.\n   * - selected: The selection state of the element.\n   * - disabled: The disabled state of the element.\n   * - icon: The icon node to be rendered on the left.\n   * - showNavIcon: If true renders the navigation icon on the right.\n   */\n  dataList: PropTypes.arrayOf(\n    PropTypes.shape({\n      label: PropTypes.node.isRequired,\n      selected: PropTypes.bool,\n      disabled: PropTypes.bool,\n      icon: PropTypes.oneOfType([PropTypes.func, PropTypes.node]),\n      showNavIcon: PropTypes.bool,\n    })\n  ).isRequired,\n  /**\n   * Placement of the dropdown.\n   */\n  placement: PropTypes.oneOf([\"left\", \"right\"]),\n  /**\n   * Disable the portal behavior. The children stay within it's parent DOM hierarchy.\n   */\n  disablePortal: PropTypes.bool,\n  /**\n   * Function executed on toggle of the dropdown. Should receive the open status.\n   */\n  onToggleOpen: deprecatedPropType(\n    PropTypes.func,\n    \"Instead use the onToggle prop which receives the event\"\n  ),\n  /**\n   * Function executed on toggle of the dropdown. Should receive the open status.\n   */\n  onToggle: PropTypes.func,\n  /**\n   * Function executed in each onClick. Should received the clicked element.\n   */\n  onClick: PropTypes.func,\n  /**\n   * Keep the Dropdown Menu opened after clicking one option\n   */\n  keepOpened: PropTypes.bool,\n  /**\n   * Defines if the component is disabled.\n   */\n  disabled: PropTypes.bool,\n  /**\n   * If true it should be displayed open.\n   */\n  expanded: PropTypes.bool,\n  /**\n   * When uncontrolled, defines the initial expanded state.\n   */\n  defaultExpanded: PropTypes.bool,\n};\n\nexport default withStyles(styles, { name: \"HvDropDownMenu\" })(withId(DropDownMenu));\n"],"file":"DropDownMenu.js"}

package/dist/DropDownMenu/index.d.ts

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

package/dist/DropDownMenu/index.js

@@ -0,0 +1,16 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "default", {
+  enumerable: true,
+  get: function get() {
+    return _DropDownMenu.default;
+  }
+});
+
+var _DropDownMenu = _interopRequireDefault(require("./DropDownMenu"));
+//# sourceMappingURL=index.js.map

package/dist/DropDownMenu/index.js.map

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

package/dist/DropDownMenu/styles.js

@@ -0,0 +1,66 @@
+"use strict";
+
+require("core-js/modules/es.object.keys.js");
+
+require("core-js/modules/es.symbol.js");
+
+require("core-js/modules/es.array.filter.js");
+
+require("core-js/modules/es.object.to-string.js");
+
+require("core-js/modules/es.object.get-own-property-descriptor.js");
+
+require("core-js/modules/web.dom-collections.for-each.js");
+
+require("core-js/modules/es.object.get-own-property-descriptors.js");
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var _styles = require("../Focus/styles");
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (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 = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+
+var styles = function styles(theme) {
+  return {
+    root: {
+      display: "inline-block",
+      width: "auto",
+      "&.focus-visible $icon": _objectSpread({}, _styles.outlineStyles)
+    },
+    container: {
+      width: 32
+    },
+    baseContainer: {},
+    icon: {
+      position: "relative",
+      boxSizing: "content-box",
+      padding: 0,
+      borderRadius: 0
+    },
+    iconSelected: {
+      backgroundColor: theme.palette.atmo1,
+      boxShadow: theme.hv.shadows[1],
+      "&:hover": {
+        backgroundColor: theme.palette.atmo1
+      },
+      "& svg .color0": {
+        fill: theme.palette.acce1
+      },
+      borderRadius: "2px 2px 0px 0px"
+    },
+    menuList: {}
+  };
+};
+
+var _default = styles;
+exports.default = _default;
+//# sourceMappingURL=styles.js.map

package/dist/DropDownMenu/styles.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/DropDownMenu/styles.js"],"names":["styles","theme","root","display","width","outlineStyles","container","baseContainer","icon","position","boxSizing","padding","borderRadius","iconSelected","backgroundColor","palette","atmo1","boxShadow","hv","shadows","fill","acce1","menuList"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AAAA;;;;;;AAEA,IAAMA,MAAM,GAAG,SAATA,MAAS,CAACC,KAAD;AAAA,SAAY;AACzBC,IAAAA,IAAI,EAAE;AACJC,MAAAA,OAAO,EAAE,cADL;AAEJC,MAAAA,KAAK,EAAE,MAFH;AAGJ,iDACKC,qBADL;AAHI,KADmB;AAQzBC,IAAAA,SAAS,EAAE;AACTF,MAAAA,KAAK,EAAE;AADE,KARc;AAWzBG,IAAAA,aAAa,EAAE,EAXU;AAYzBC,IAAAA,IAAI,EAAE;AACJC,MAAAA,QAAQ,EAAE,UADN;AAEJC,MAAAA,SAAS,EAAE,aAFP;AAGJC,MAAAA,OAAO,EAAE,CAHL;AAIJC,MAAAA,YAAY,EAAE;AAJV,KAZmB;AAkBzBC,IAAAA,YAAY,EAAE;AACZC,MAAAA,eAAe,EAAEb,KAAK,CAACc,OAAN,CAAcC,KADnB;AAEZC,MAAAA,SAAS,EAAEhB,KAAK,CAACiB,EAAN,CAASC,OAAT,CAAiB,CAAjB,CAFC;AAGZ,iBAAW;AACTL,QAAAA,eAAe,EAAEb,KAAK,CAACc,OAAN,CAAcC;AADtB,OAHC;AAMZ,uBAAiB;AACfI,QAAAA,IAAI,EAAEnB,KAAK,CAACc,OAAN,CAAcM;AADL,OANL;AASZT,MAAAA,YAAY,EAAE;AATF,KAlBW;AA6BzBU,IAAAA,QAAQ,EAAE;AA7Be,GAAZ;AAAA,CAAf;;eAgCetB,M","sourcesContent":["import { outlineStyles } from \"../Focus/styles\";\n\nconst styles = (theme) => ({\n  root: {\n    display: \"inline-block\",\n    width: \"auto\",\n    \"&.focus-visible $icon\": {\n      ...outlineStyles,\n    },\n  },\n  container: {\n    width: 32,\n  },\n  baseContainer: {},\n  icon: {\n    position: \"relative\",\n    boxSizing: \"content-box\",\n    padding: 0,\n    borderRadius: 0,\n  },\n  iconSelected: {\n    backgroundColor: theme.palette.atmo1,\n    boxShadow: theme.hv.shadows[1],\n    \"&:hover\": {\n      backgroundColor: theme.palette.atmo1,\n    },\n    \"& svg .color0\": {\n      fill: theme.palette.acce1,\n    },\n    borderRadius: \"2px 2px 0px 0px\",\n  },\n  menuList: {},\n});\n\nexport default styles;\n"],"file":"styles.js"}

package/dist/Dropdown/Dropdown.d.ts

@@ -0,0 +1,141 @@
+import { StandardProps } from "@material-ui/core";
+import { PopperProps } from "@material-ui/core/Popper";
+import { ListLabelsProp, ListValueProp } from "../List";
+import { HvFormElementProps } from "..";
+
+export interface DropDownLabelsProp extends ListLabelsProp {
+  /**
+   * The default when there are no options available.
+   */
+  select?: string;
+  /**
+   * Cancel button label.
+   */
+  cancelLabel?: string;
+  /**
+   * Apply button label.
+   */
+  applyLabel?: string;
+  /**
+   * The label used preceding the multiselection count.
+   */
+  multiSelectionAction?: string;
+  // TODO: deprecate in favour of List's selectionConjunction ?
+  /**
+   * The label used in the middle of the multiselection count.
+   */
+  multiSelectionConjunction?: string;
+}
+
+export type HvDropdownClassKey =
+  | "root"
+  | "labelContainer"
+  | "label"
+  | "description"
+  | "dropdown"
+  | "arrow"
+  | "placeholder"
+  | "selectionDisabled"
+  | "rootList"
+  | "dropdownHeader"
+  | "dropdownHeaderInvalid"
+  | "dropdownHeaderOpen"
+  | "dropdownListContainer";
+
+export interface HvDropdownProps
+  extends StandardProps<HvFormElementProps, HvDropdownClassKey, "onChange"> {
+  /**
+   * The list to be rendered by the dropdown.
+   */
+  values?: ListValueProp[];
+  /**
+   * If `true` the dropdown is multiselect, if `false` the dropdown is single select.
+   */
+  multiSelect?: boolean;
+  /**
+   * If `true` the dropdown is rendered with a search bar, if `false` there won't be a search bar.
+   */
+  showSearch?: boolean;
+  /**
+   * If `true` the dropdown is disabled unable to be interacted, if `false` it is enabled.
+   */
+  disabled?: boolean;
+  /**
+   * If `true` the dropdown starts opened if `false` it starts closed.
+   */
+  expanded?: boolean;
+  /**
+   * When uncontrolled, defines the initial expanded state.
+   */
+  defaultExpanded?: boolean;
+  /**
+   * If 'true' the dropdown will notify on the first render.
+   */
+  notifyChangesOnFirstRender?: boolean;
+  /**
+   * An object containing all the labels for the dropdown.
+   */
+  labels?: DropDownLabelsProp;
+  /**
+   * If `true` the dropdown will show tooltips when user mouseenter text in list
+   */
+  hasTooltips?: boolean;
+  /**
+   * Disable the portal behavior.
+   * The children stay within it's parent DOM hierarchy.
+   */
+  disablePortal?: boolean;
+  /**
+   * If `true` the dropdown width depends size of content if `false` the width depends on the header size.
+   * Defaults to `false`.
+   */
+  variableWidth?: boolean;
+  /**
+   * If `true`, selection can be toggled when single selection.
+   */
+  singleSelectionToggle?: boolean;
+  /**
+   * Placement of the dropdown.
+   */
+  placement?: "left" | "right";
+  /**
+   * A function to be executed whenever a item is selected in the dropdown, the function receives the selected item(s).
+   */
+  onChange?: (selected: ListValueProp | ListValueProp[] | undefined) => void;
+  /**
+   * Properties passed to the underlying Popper component
+   */
+  popperProps?: Partial<PopperProps>;
+
+  /**
+   * Callback called when the user cancels the changes.
+   *
+   * Called when the cancel button is used and when the user clicks outside the open container.
+   *
+   * @param {object} event The event source of the callback.
+   */
+  onCancel?: (event: Event) => void;
+  /**
+   * Callback called when dropdown changes the expanded state.
+   *
+   * @param {object} event The event source of the callback.
+   * @param {boolean} open If the dropdown new state is open (`true`) or closed (`false`).
+   */
+  onToggle?: (event: Event, open: boolean) => void;
+  /**
+   * Callback called when the user clicks outside the open container.
+   *
+   * @param {object} event The event source of the callback.
+   */
+  onClickOutside?: (event: Event) => void;
+  /**
+   * Experimental. Height of the dropdown, in case you want to control it from a prop. Styles can also be used through dropdownListContainer class. Required in case virtualized is used
+   */
+  height?: number;
+  /**
+   * Experimental. Uses dropdown in a virtualized form, where not all options are rendered initially. Good for use cases with a lot of options.
+   */
+  virtualized?: boolean;
+}
+
+export default function HvDropdown(props: HvDropdownProps): JSX.Element | null;