@hitachivantara/uikit-react-core 2.23.2

package/dist/MultiButton/MultiButton.js

@@ -0,0 +1,301 @@
+"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;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+
+require("core-js/modules/es.array.map.js");
+
+require("core-js/modules/es.array.filter.js");
+
+require("core-js/modules/es.object.to-string.js");
+
+require("core-js/modules/es.array.includes.js");
+
+require("core-js/modules/es.string.includes.js");
+
+require("core-js/modules/es.array.concat.js");
+
+require("core-js/modules/es.array.slice.js");
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _clsx = _interopRequireDefault(require("clsx"));
+
+var _core = require("@material-ui/core");
+
+var _Button = _interopRequireDefault(require("../Button"));
+
+var _styles = _interopRequireDefault(require("./styles"));
+
+var _excluded = ["id", "className", "classes", "type", "onChange", "multi", "minSelection", "maxSelection", "buttons", "vertical"],
+    _excluded2 = ["id", "icon", "selected", "value"];
+
+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; }
+
+/**
+ * parse button properties and if any buttons are preset as selected
+ * set the state with their ids
+ * */
+var getInitialState = function getInitialState(buttons) {
+  return buttons.filter(function (item) {
+    return item.selected;
+  }).map(function (item) {
+    return item.id;
+  });
+};
+
+var MultiButton = function MultiButton(_ref) {
+  var id = _ref.id,
+      className = _ref.className,
+      classes = _ref.classes,
+      type = _ref.type,
+      onChange = _ref.onChange,
+      _ref$multi = _ref.multi,
+      multi = _ref$multi === void 0 ? false : _ref$multi,
+      _ref$minSelection = _ref.minSelection,
+      minSelection = _ref$minSelection === void 0 ? 0 : _ref$minSelection,
+      _ref$maxSelection = _ref.maxSelection,
+      maxSelection = _ref$maxSelection === void 0 ? Infinity : _ref$maxSelection,
+      buttons = _ref.buttons,
+      _ref$vertical = _ref.vertical,
+      vertical = _ref$vertical === void 0 ? false : _ref$vertical,
+      others = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+
+  /**
+   * set state; if button properties are mismatched set hasError prop
+   * in order to throw error in component and alert for the need to correctly
+   * set the button props
+   */
+  var _useState = (0, _react.useState)(getInitialState(buttons)),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+      checkedItems = _useState2[0],
+      setCheckedItems = _useState2[1];
+
+  (0, _react.useEffect)(function () {
+    setCheckedItems(getInitialState(buttons));
+  }, [buttons]);
+
+  var handleClick = function handleClick(event, idx) {
+    var newState;
+    var clickedBtnDefs = buttons[idx];
+    var btnClickable = clickedBtnDefs.enforced !== undefined ? clickedBtnDefs : false;
+    if (btnClickable) return;
+    var clickedBtnId = buttons[idx].id;
+
+    if (checkedItems.length === minSelection && checkedItems.includes(clickedBtnId)) {
+      return;
+    }
+
+    if (checkedItems.length === maxSelection && !checkedItems.includes(clickedBtnId)) {
+      return;
+    }
+
+    var clickedBtnPositionInState = checkedItems.indexOf(clickedBtnId);
+
+    if (multi) {
+      // check if item has not been clicked
+      if (clickedBtnPositionInState === -1) {
+        // handle state change
+        newState = [].concat((0, _toConsumableArray2.default)(checkedItems), [buttons[idx].id]);
+      } else {
+        var itemToRemove = clickedBtnPositionInState;
+        newState = checkedItems.filter(function (_, i) {
+          return i !== itemToRemove;
+        });
+      }
+    } else if (clickedBtnPositionInState === -1) {
+      // handle state change
+      // this enforces that the change happens only when we click on
+      // a deselected element mimicking the behavior of the button component
+      newState = [clickedBtnId];
+    } else {
+      return;
+    }
+
+    setCheckedItems(newState);
+    onChange === null || onChange === void 0 ? void 0 : onChange(event, newState.slice());
+  };
+
+  var renderButton = function renderButton(button, idx) {
+    var bId = button.id,
+        icon = button.icon,
+        selected = button.selected,
+        value = button.value,
+        other = (0, _objectWithoutProperties2.default)(button, _excluded2);
+    var isSelected = checkedItems.indexOf(bId) !== -1;
+    var iconButton = icon && type === "mixed" ? /*#__PURE__*/_react.default.cloneElement(icon, {
+      className: classes.icon
+    }) : icon;
+    return /*#__PURE__*/_react.default.createElement(_Button.default, (0, _extends2.default)({
+      key: "btnkey_".concat(idx + 1),
+      id: bId,
+      onClick: function onClick(event) {
+        return handleClick(event, idx);
+      },
+      className: (0, _clsx.default)(classes.button, isSelected ? classes.isSelected : classes.isUnselected),
+      category: "ghost",
+      "aria-label": value,
+      overrideIconColors: false
+    }, other), type !== "text" && iconButton, type !== "icon" && /*#__PURE__*/_react.default.createElement("div", {
+      className: classes.labelText
+    }, value));
+  };
+
+  return /*#__PURE__*/_react.default.createElement("div", (0, _extends2.default)({
+    id: id,
+    className: (0, _clsx.default)(className, classes.root, vertical && classes.vertical)
+  }, others), buttons.map(function (button, idx) {
+    return renderButton(button, idx);
+  }));
+};
+
+process.env.NODE_ENV !== "production" ? MultiButton.propTypes = {
+  /**
+   * Identifier
+   */
+  id: _propTypes.default.string,
+
+  /**
+   * Class names to be applied.
+   */
+  className: _propTypes.default.string,
+
+  /**
+   * A Jss Object used to override or extend the styles applied.
+   */
+  classes: _propTypes.default.shape({
+    /**
+     * Styles applied to the multibutton root class.
+     */
+    root: _propTypes.default.string,
+
+    /**
+     * Styles applied to the multibutton when it's vertical.
+     */
+    vertical: _propTypes.default.string,
+
+    /**
+     * Styles applied to the button label.
+     */
+    labelText: _propTypes.default.string,
+
+    /**
+     * Styles applied to the each button.
+     */
+    button: _propTypes.default.string,
+
+    /**
+     * Styles applied to the each button's icon.
+     */
+    icon: _propTypes.default.string,
+
+    /**
+     * Styles applied to the button when it's selected.
+     */
+    isSelected: _propTypes.default.string,
+
+    /**
+     * Styles applied to the button when it's not selected.
+     */
+    isUnselected: _propTypes.default.string
+  }).isRequired,
+
+  /**
+   * If the multibutton is to be displayed vertically.
+   */
+  vertical: _propTypes.default.bool,
+
+  /**
+   * If the multibutton is multi selectable.
+   */
+  multi: _propTypes.default.bool,
+
+  /**
+   * Type of button display.
+   *  - Accepted values:
+   *    --"label": displays just a text label,
+   *    --"icon": displays just an icon,
+   *    --"mixed": displays both a label and an icon
+   */
+  type: _propTypes.default.oneOf(["text", "icon", "mixed"]).isRequired,
+
+  /**
+   * Buttons definitions
+   */
+  buttons: _propTypes.default.arrayOf(_propTypes.default.shape({
+    /**
+     * the button id.
+     */
+    id: _propTypes.default.string.isRequired,
+
+    /**
+     * the button label.
+     */
+    value: _propTypes.default.string,
+
+    /**
+     * icon in button.
+     */
+    icon: _propTypes.default.node,
+
+    /**
+     * If the button is selected.
+     */
+    selected: _propTypes.default.bool,
+
+    /**
+     * Specify if item can be toggled or not.
+     */
+    enforced: _propTypes.default.bool
+  })).isRequired,
+
+  /**
+   * Callback function to be triggered when the input value is changed
+   */
+  onChange: _propTypes.default.func,
+
+  /**
+   * Specify minimum number of selections in component
+   */
+  minSelection: _propTypes.default.number,
+
+  /**
+   * Specify maximum number of selections in component
+   */
+  maxSelection: _propTypes.default.number
+} : void 0;
+
+var _default = (0, _core.withStyles)(_styles.default, {
+  name: "HvMultiButton"
+})(MultiButton);
+
+exports.default = _default;
+//# sourceMappingURL=MultiButton.js.map

package/dist/MultiButton/MultiButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MultiButton.js","names":["getInitialState","buttons","filter","item","selected","map","id","MultiButton","className","classes","type","onChange","multi","minSelection","maxSelection","Infinity","vertical","others","useState","checkedItems","setCheckedItems","useEffect","handleClick","event","idx","newState","clickedBtnDefs","btnClickable","enforced","undefined","clickedBtnId","length","includes","clickedBtnPositionInState","indexOf","itemToRemove","_","i","slice","renderButton","button","bId","icon","value","other","isSelected","iconButton","React","cloneElement","clsx","isUnselected","labelText","root","propTypes","PropTypes","string","shape","isRequired","bool","oneOf","arrayOf","node","func","number","withStyles","styles","name"],"sources":["../../src/MultiButton/MultiButton.js"],"sourcesContent":["import React, { useEffect, useState } from \"react\";\nimport PropTypes from \"prop-types\";\nimport clsx from \"clsx\";\nimport { withStyles } from \"@material-ui/core\";\nimport HvButton from \"../Button\";\nimport styles from \"./styles\";\n\n/**\n * parse button properties and if any buttons are preset as selected\n * set the state with their ids\n * */\nconst getInitialState = (buttons) => buttons.filter((item) => item.selected).map((item) => item.id);\n\nconst MultiButton = ({\n  id,\n  className,\n  classes,\n  type,\n  onChange,\n  multi = false,\n  minSelection = 0,\n  maxSelection = Infinity,\n  buttons,\n  vertical = false,\n  ...others\n}) => {\n  /**\n   * set state; if button properties are mismatched set hasError prop\n   * in order to throw error in component and alert for the need to correctly\n   * set the button props\n   */\n  const [checkedItems, setCheckedItems] = useState(getInitialState(buttons));\n\n  useEffect(() => {\n    setCheckedItems(getInitialState(buttons));\n  }, [buttons]);\n\n  const handleClick = (event, idx) => {\n    let newState;\n\n    const clickedBtnDefs = buttons[idx];\n    const btnClickable = clickedBtnDefs.enforced !== undefined ? clickedBtnDefs : false;\n\n    if (btnClickable) return;\n\n    const clickedBtnId = buttons[idx].id;\n\n    if (checkedItems.length === minSelection && checkedItems.includes(clickedBtnId)) {\n      return;\n    }\n\n    if (checkedItems.length === maxSelection && !checkedItems.includes(clickedBtnId)) {\n      return;\n    }\n\n    const clickedBtnPositionInState = checkedItems.indexOf(clickedBtnId);\n\n    if (multi) {\n      // check if item has not been clicked\n      if (clickedBtnPositionInState === -1) {\n        // handle state change\n        newState = [...checkedItems, buttons[idx].id];\n      } else {\n        const itemToRemove = clickedBtnPositionInState;\n        newState = checkedItems.filter((_, i) => i !== itemToRemove);\n      }\n    } else if (clickedBtnPositionInState === -1) {\n      // handle state change\n      // this enforces that the change happens only when we click on\n      // a deselected element mimicking the behavior of the button component\n      newState = [clickedBtnId];\n    } else {\n      return;\n    }\n\n    setCheckedItems(newState);\n    onChange?.(event, newState.slice());\n  };\n\n  const renderButton = (button, idx) => {\n    const { id: bId, icon, selected, value, ...other } = button;\n    const isSelected = checkedItems.indexOf(bId) !== -1;\n\n    const iconButton =\n      icon && type === \"mixed\" ? React.cloneElement(icon, { className: classes.icon }) : icon;\n\n    return (\n      <HvButton\n        key={`btnkey_${idx + 1}`}\n        id={bId}\n        onClick={(event) => handleClick(event, idx)}\n        className={clsx(classes.button, {\n          [classes.isSelected]: isSelected,\n          [classes.isUnselected]: !isSelected,\n        })}\n        category=\"ghost\"\n        aria-label={value}\n        overrideIconColors={false}\n        {...other}\n      >\n        {type !== \"text\" && iconButton}\n        {type !== \"icon\" && <div className={classes.labelText}>{value}</div>}\n      </HvButton>\n    );\n  };\n\n  return (\n    <div\n      id={id}\n      className={clsx(className, classes.root, {\n        [classes.vertical]: vertical,\n      })}\n      {...others}\n    >\n      {buttons.map((button, idx) => renderButton(button, idx))}\n    </div>\n  );\n};\n\nMultiButton.propTypes = {\n  /**\n   * Identifier\n   */\n  id: PropTypes.string,\n  /**\n   * Class names to be applied.\n   */\n  className: 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 multibutton root class.\n     */\n    root: PropTypes.string,\n    /**\n     * Styles applied to the multibutton when it's vertical.\n     */\n    vertical: PropTypes.string,\n    /**\n     * Styles applied to the button label.\n     */\n    labelText: PropTypes.string,\n    /**\n     * Styles applied to the each button.\n     */\n    button: PropTypes.string,\n    /**\n     * Styles applied to the each button's icon.\n     */\n    icon: PropTypes.string,\n    /**\n     * Styles applied to the button when it's selected.\n     */\n    isSelected: PropTypes.string,\n    /**\n     * Styles applied to the button when it's not selected.\n     */\n    isUnselected: PropTypes.string,\n  }).isRequired,\n  /**\n   * If the multibutton is to be displayed vertically.\n   */\n  vertical: PropTypes.bool,\n  /**\n   * If the multibutton is multi selectable.\n   */\n  multi: PropTypes.bool,\n  /**\n   * Type of button display.\n   *  - Accepted values:\n   *    --\"label\": displays just a text label,\n   *    --\"icon\": displays just an icon,\n   *    --\"mixed\": displays both a label and an icon\n   */\n  type: PropTypes.oneOf([\"text\", \"icon\", \"mixed\"]).isRequired,\n  /**\n   * Buttons definitions\n   */\n  buttons: PropTypes.arrayOf(\n    PropTypes.shape({\n      /**\n       * the button id.\n       */\n      id: PropTypes.string.isRequired,\n      /**\n       * the button label.\n       */\n      value: PropTypes.string,\n      /**\n       * icon in button.\n       */\n      icon: PropTypes.node,\n      /**\n       * If the button is selected.\n       */\n      selected: PropTypes.bool,\n      /**\n       * Specify if item can be toggled or not.\n       */\n      enforced: PropTypes.bool,\n    })\n  ).isRequired,\n  /**\n   * Callback function to be triggered when the input value is changed\n   */\n  onChange: PropTypes.func,\n  /**\n   * Specify minimum number of selections in component\n   */\n  minSelection: PropTypes.number,\n  /**\n   * Specify maximum number of selections in component\n   */\n  maxSelection: PropTypes.number,\n};\n\nexport default withStyles(styles, { name: \"HvMultiButton\" })(MultiButton);\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;;;;;;AAEA;AACA;AACA;AACA;AACA,IAAMA,eAAe,GAAG,SAAlBA,eAAkB,CAACC,OAAD;EAAA,OAAaA,OAAO,CAACC,MAAR,CAAe,UAACC,IAAD;IAAA,OAAUA,IAAI,CAACC,QAAf;EAAA,CAAf,EAAwCC,GAAxC,CAA4C,UAACF,IAAD;IAAA,OAAUA,IAAI,CAACG,EAAf;EAAA,CAA5C,CAAb;AAAA,CAAxB;;AAEA,IAAMC,WAAW,GAAG,SAAdA,WAAc,OAYd;EAAA,IAXJD,EAWI,QAXJA,EAWI;EAAA,IAVJE,SAUI,QAVJA,SAUI;EAAA,IATJC,OASI,QATJA,OASI;EAAA,IARJC,IAQI,QARJA,IAQI;EAAA,IAPJC,QAOI,QAPJA,QAOI;EAAA,sBANJC,KAMI;EAAA,IANJA,KAMI,2BANI,KAMJ;EAAA,6BALJC,YAKI;EAAA,IALJA,YAKI,kCALW,CAKX;EAAA,6BAJJC,YAII;EAAA,IAJJA,YAII,kCAJWC,QAIX;EAAA,IAHJd,OAGI,QAHJA,OAGI;EAAA,yBAFJe,QAEI;EAAA,IAFJA,QAEI,8BAFO,KAEP;EAAA,IADDC,MACC;;EACJ;AACF;AACA;AACA;AACA;EACE,gBAAwC,IAAAC,eAAA,EAASlB,eAAe,CAACC,OAAD,CAAxB,CAAxC;EAAA;EAAA,IAAOkB,YAAP;EAAA,IAAqBC,eAArB;;EAEA,IAAAC,gBAAA,EAAU,YAAM;IACdD,eAAe,CAACpB,eAAe,CAACC,OAAD,CAAhB,CAAf;EACD,CAFD,EAEG,CAACA,OAAD,CAFH;;EAIA,IAAMqB,WAAW,GAAG,SAAdA,WAAc,CAACC,KAAD,EAAQC,GAAR,EAAgB;IAClC,IAAIC,QAAJ;IAEA,IAAMC,cAAc,GAAGzB,OAAO,CAACuB,GAAD,CAA9B;IACA,IAAMG,YAAY,GAAGD,cAAc,CAACE,QAAf,KAA4BC,SAA5B,GAAwCH,cAAxC,GAAyD,KAA9E;IAEA,IAAIC,YAAJ,EAAkB;IAElB,IAAMG,YAAY,GAAG7B,OAAO,CAACuB,GAAD,CAAP,CAAalB,EAAlC;;IAEA,IAAIa,YAAY,CAACY,MAAb,KAAwBlB,YAAxB,IAAwCM,YAAY,CAACa,QAAb,CAAsBF,YAAtB,CAA5C,EAAiF;MAC/E;IACD;;IAED,IAAIX,YAAY,CAACY,MAAb,KAAwBjB,YAAxB,IAAwC,CAACK,YAAY,CAACa,QAAb,CAAsBF,YAAtB,CAA7C,EAAkF;MAChF;IACD;;IAED,IAAMG,yBAAyB,GAAGd,YAAY,CAACe,OAAb,CAAqBJ,YAArB,CAAlC;;IAEA,IAAIlB,KAAJ,EAAW;MACT;MACA,IAAIqB,yBAAyB,KAAK,CAAC,CAAnC,EAAsC;QACpC;QACAR,QAAQ,8CAAON,YAAP,IAAqBlB,OAAO,CAACuB,GAAD,CAAP,CAAalB,EAAlC,EAAR;MACD,CAHD,MAGO;QACL,IAAM6B,YAAY,GAAGF,yBAArB;QACAR,QAAQ,GAAGN,YAAY,CAACjB,MAAb,CAAoB,UAACkC,CAAD,EAAIC,CAAJ;UAAA,OAAUA,CAAC,KAAKF,YAAhB;QAAA,CAApB,CAAX;MACD;IACF,CATD,MASO,IAAIF,yBAAyB,KAAK,CAAC,CAAnC,EAAsC;MAC3C;MACA;MACA;MACAR,QAAQ,GAAG,CAACK,YAAD,CAAX;IACD,CALM,MAKA;MACL;IACD;;IAEDV,eAAe,CAACK,QAAD,CAAf;IACAd,QAAQ,SAAR,IAAAA,QAAQ,WAAR,YAAAA,QAAQ,CAAGY,KAAH,EAAUE,QAAQ,CAACa,KAAT,EAAV,CAAR;EACD,CAxCD;;EA0CA,IAAMC,YAAY,GAAG,SAAfA,YAAe,CAACC,MAAD,EAAShB,GAAT,EAAiB;IACpC,IAAYiB,GAAZ,GAAqDD,MAArD,CAAQlC,EAAR;IAAA,IAAiBoC,IAAjB,GAAqDF,MAArD,CAAiBE,IAAjB;IAAA,IAAuBtC,QAAvB,GAAqDoC,MAArD,CAAuBpC,QAAvB;IAAA,IAAiCuC,KAAjC,GAAqDH,MAArD,CAAiCG,KAAjC;IAAA,IAA2CC,KAA3C,0CAAqDJ,MAArD;IACA,IAAMK,UAAU,GAAG1B,YAAY,CAACe,OAAb,CAAqBO,GAArB,MAA8B,CAAC,CAAlD;IAEA,IAAMK,UAAU,GACdJ,IAAI,IAAIhC,IAAI,KAAK,OAAjB,gBAA2BqC,cAAA,CAAMC,YAAN,CAAmBN,IAAnB,EAAyB;MAAElC,SAAS,EAAEC,OAAO,CAACiC;IAArB,CAAzB,CAA3B,GAAmFA,IADrF;IAGA,oBACE,6BAAC,eAAD;MACE,GAAG,mBAAYlB,GAAG,GAAG,CAAlB,CADL;MAEE,EAAE,EAAEiB,GAFN;MAGE,OAAO,EAAE,iBAAClB,KAAD;QAAA,OAAWD,WAAW,CAACC,KAAD,EAAQC,GAAR,CAAtB;MAAA,CAHX;MAIE,SAAS,EAAE,IAAAyB,aAAA,EAAKxC,OAAO,CAAC+B,MAAb,EACaK,UADb,GACRpC,OAAO,CAACoC,UADA,GAERpC,OAAO,CAACyC,YAFA,CAJb;MAQE,QAAQ,EAAC,OARX;MASE,cAAYP,KATd;MAUE,kBAAkB,EAAE;IAVtB,GAWMC,KAXN,GAaGlC,IAAI,KAAK,MAAT,IAAmBoC,UAbtB,EAcGpC,IAAI,KAAK,MAAT,iBAAmB;MAAK,SAAS,EAAED,OAAO,CAAC0C;IAAxB,GAAoCR,KAApC,CAdtB,CADF;EAkBD,CAzBD;;EA2BA,oBACE;IACE,EAAE,EAAErC,EADN;IAEE,SAAS,EAAE,IAAA2C,aAAA,EAAKzC,SAAL,EAAgBC,OAAO,CAAC2C,IAAxB,EACWpC,QADX,IACRP,OAAO,CAACO,QADA;EAFb,GAKMC,MALN,GAOGhB,OAAO,CAACI,GAAR,CAAY,UAACmC,MAAD,EAAShB,GAAT;IAAA,OAAiBe,YAAY,CAACC,MAAD,EAAShB,GAAT,CAA7B;EAAA,CAAZ,CAPH,CADF;AAWD,CAxGD;;AA0GA,wCAAAjB,WAAW,CAAC8C,SAAZ,GAAwB;EACtB;AACF;AACA;EACE/C,EAAE,EAAEgD,kBAAA,CAAUC,MAJQ;;EAKtB;AACF;AACA;EACE/C,SAAS,EAAE8C,kBAAA,CAAUC,MARC;;EAStB;AACF;AACA;EACE9C,OAAO,EAAE6C,kBAAA,CAAUE,KAAV,CAAgB;IACvB;AACJ;AACA;IACIJ,IAAI,EAAEE,kBAAA,CAAUC,MAJO;;IAKvB;AACJ;AACA;IACIvC,QAAQ,EAAEsC,kBAAA,CAAUC,MARG;;IASvB;AACJ;AACA;IACIJ,SAAS,EAAEG,kBAAA,CAAUC,MAZE;;IAavB;AACJ;AACA;IACIf,MAAM,EAAEc,kBAAA,CAAUC,MAhBK;;IAiBvB;AACJ;AACA;IACIb,IAAI,EAAEY,kBAAA,CAAUC,MApBO;;IAqBvB;AACJ;AACA;IACIV,UAAU,EAAES,kBAAA,CAAUC,MAxBC;;IAyBvB;AACJ;AACA;IACIL,YAAY,EAAEI,kBAAA,CAAUC;EA5BD,CAAhB,EA6BNE,UAzCmB;;EA0CtB;AACF;AACA;EACEzC,QAAQ,EAAEsC,kBAAA,CAAUI,IA7CE;;EA8CtB;AACF;AACA;EACE9C,KAAK,EAAE0C,kBAAA,CAAUI,IAjDK;;EAkDtB;AACF;AACA;AACA;AACA;AACA;AACA;EACEhD,IAAI,EAAE4C,kBAAA,CAAUK,KAAV,CAAgB,CAAC,MAAD,EAAS,MAAT,EAAiB,OAAjB,CAAhB,EAA2CF,UAzD3B;;EA0DtB;AACF;AACA;EACExD,OAAO,EAAEqD,kBAAA,CAAUM,OAAV,CACPN,kBAAA,CAAUE,KAAV,CAAgB;IACd;AACN;AACA;IACMlD,EAAE,EAAEgD,kBAAA,CAAUC,MAAV,CAAiBE,UAJP;;IAKd;AACN;AACA;IACMd,KAAK,EAAEW,kBAAA,CAAUC,MARH;;IASd;AACN;AACA;IACMb,IAAI,EAAEY,kBAAA,CAAUO,IAZF;;IAad;AACN;AACA;IACMzD,QAAQ,EAAEkD,kBAAA,CAAUI,IAhBN;;IAiBd;AACN;AACA;IACM9B,QAAQ,EAAE0B,kBAAA,CAAUI;EApBN,CAAhB,CADO,EAuBPD,UApFoB;;EAqFtB;AACF;AACA;EACE9C,QAAQ,EAAE2C,kBAAA,CAAUQ,IAxFE;;EAyFtB;AACF;AACA;EACEjD,YAAY,EAAEyC,kBAAA,CAAUS,MA5FF;;EA6FtB;AACF;AACA;EACEjD,YAAY,EAAEwC,kBAAA,CAAUS;AAhGF,CAAxB;;eAmGe,IAAAC,gBAAA,EAAWC,eAAX,EAAmB;EAAEC,IAAI,EAAE;AAAR,CAAnB,EAA8C3D,WAA9C,C"}

package/dist/MultiButton/index.d.ts

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

package/dist/MultiButton/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 _MultiButton.default;
+  }
+});
+
+var _MultiButton = _interopRequireDefault(require("./MultiButton"));
+//# sourceMappingURL=index.js.map

package/dist/MultiButton/index.js.map

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

package/dist/MultiButton/styles.js

@@ -0,0 +1,99 @@
+"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"));
+
+require("core-js/modules/es.array.concat.js");
+
+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) { (0, _defineProperty2.default)(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; }
+
+var styles = function styles(theme) {
+  return {
+    root: {
+      display: "flex",
+      height: 32,
+      alignItems: "center",
+      transition: "none",
+      boxShadow: "-1px 1px 0px 0px ".concat(theme.hv.palette.atmosphere.atmo6, ", 1px 1px 0px 0px ").concat(theme.hv.palette.atmosphere.atmo6, ", -1px -1px 0px 0px ").concat(theme.hv.palette.atmosphere.atmo6, ", 1px -1px 0px 0px ").concat(theme.hv.palette.atmosphere.atmo6),
+      background: theme.hv.palette.atmosphere.atmo2,
+      position: "relative",
+      zIndex: 0
+    },
+    button: {
+      width: "100%",
+      minWidth: 32,
+      maxWidth: 200,
+      padding: 0,
+      border: "none",
+      transition: "none",
+      flex: "1 0 0px",
+      "&:active": {
+        backgroundColor: "".concat(theme.hv.palette.atmosphere.atmo4)
+      }
+    },
+    labelText: {
+      textOverflow: "ellipsis",
+      whiteSpace: "nowrap",
+      overflow: "hidden"
+    },
+    isSelected: _objectSpread(_objectSpread({
+      background: theme.hv.palette.atmosphere.atmo1,
+      height: 34,
+      cursor: "default"
+    }, theme.hv.typography.highlightText), {}, {
+      boxShadow: "1px -1px 0px 0px ".concat(theme.hv.palette.accent.acce1, ", 1px 0px 0px 0px ").concat(theme.hv.palette.accent.acce1, ", 0px 0px 0px 1px ").concat(theme.hv.palette.accent.acce1, ", 0px 0px 0px 0px ").concat(theme.hv.palette.accent.acce1),
+      zIndex: 1
+    }),
+    isUnselected: _objectSpread(_objectSpread({
+      minWidth: "32px !important"
+    }, theme.hv.typography.normalText), {}, {
+      "&:hover": {
+        background: theme.hv.palette.atmosphere.atmo4
+      }
+    }),
+    icon: {
+      marginLeft: -8
+    },
+    // vertical button display Styling
+    vertical: {
+      flexDirection: "column",
+      height: "auto",
+      btnSecondary: {
+        flex: "1 1 20px"
+      },
+      "& $button": {
+        width: "100%"
+      },
+      "& $isSelected": {
+        height: 32,
+        width: "calc(100% + 2px) !important"
+      }
+    }
+  };
+};
+
+var _default = styles;
+exports.default = _default;
+//# sourceMappingURL=styles.js.map

package/dist/MultiButton/styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.js","names":["styles","theme","root","display","height","alignItems","transition","boxShadow","hv","palette","atmosphere","atmo6","background","atmo2","position","zIndex","button","width","minWidth","maxWidth","padding","border","flex","backgroundColor","atmo4","labelText","textOverflow","whiteSpace","overflow","isSelected","atmo1","cursor","typography","highlightText","accent","acce1","isUnselected","normalText","icon","marginLeft","vertical","flexDirection","btnSecondary"],"sources":["../../src/MultiButton/styles.js"],"sourcesContent":["const styles = (theme) => ({\n  root: {\n    display: \"flex\",\n    height: 32,\n    alignItems: \"center\",\n    transition: \"none\",\n    boxShadow: `-1px 1px 0px 0px ${theme.hv.palette.atmosphere.atmo6}, 1px 1px 0px 0px ${theme.hv.palette.atmosphere.atmo6}, -1px -1px 0px 0px ${theme.hv.palette.atmosphere.atmo6}, 1px -1px 0px 0px ${theme.hv.palette.atmosphere.atmo6}`,\n    background: theme.hv.palette.atmosphere.atmo2,\n    position: \"relative\",\n    zIndex: 0,\n  },\n  button: {\n    width: \"100%\",\n    minWidth: 32,\n    maxWidth: 200,\n    padding: 0,\n    border: \"none\",\n    transition: \"none\",\n    flex: \"1 0 0px\",\n    \"&:active\": {\n      backgroundColor: `${theme.hv.palette.atmosphere.atmo4}`,\n    },\n  },\n  labelText: {\n    textOverflow: \"ellipsis\",\n    whiteSpace: \"nowrap\",\n    overflow: \"hidden\",\n  },\n  isSelected: {\n    background: theme.hv.palette.atmosphere.atmo1,\n    height: 34,\n    cursor: \"default\",\n    ...theme.hv.typography.highlightText,\n    boxShadow: `1px -1px 0px 0px ${theme.hv.palette.accent.acce1}, 1px 0px 0px 0px ${theme.hv.palette.accent.acce1}, 0px 0px 0px 1px ${theme.hv.palette.accent.acce1}, 0px 0px 0px 0px ${theme.hv.palette.accent.acce1}`,\n    zIndex: 1,\n  },\n  isUnselected: {\n    minWidth: \"32px !important\",\n\n    ...theme.hv.typography.normalText,\n    \"&:hover\": {\n      background: theme.hv.palette.atmosphere.atmo4,\n    },\n  },\n  icon: {\n    marginLeft: -8,\n  },\n  // vertical button display Styling\n  vertical: {\n    flexDirection: \"column\",\n    height: \"auto\",\n    btnSecondary: {\n      flex: \"1 1 20px\",\n    },\n    \"& $button\": {\n      width: \"100%\",\n    },\n    \"& $isSelected\": {\n      height: 32,\n      width: `calc(100% + 2px) !important`,\n    },\n  },\n});\n\nexport default styles;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,IAAMA,MAAM,GAAG,SAATA,MAAS,CAACC,KAAD;EAAA,OAAY;IACzBC,IAAI,EAAE;MACJC,OAAO,EAAE,MADL;MAEJC,MAAM,EAAE,EAFJ;MAGJC,UAAU,EAAE,QAHR;MAIJC,UAAU,EAAE,MAJR;MAKJC,SAAS,6BAAsBN,KAAK,CAACO,EAAN,CAASC,OAAT,CAAiBC,UAAjB,CAA4BC,KAAlD,+BAA4EV,KAAK,CAACO,EAAN,CAASC,OAAT,CAAiBC,UAAjB,CAA4BC,KAAxG,iCAAoIV,KAAK,CAACO,EAAN,CAASC,OAAT,CAAiBC,UAAjB,CAA4BC,KAAhK,gCAA2LV,KAAK,CAACO,EAAN,CAASC,OAAT,CAAiBC,UAAjB,CAA4BC,KAAvN,CALL;MAMJC,UAAU,EAAEX,KAAK,CAACO,EAAN,CAASC,OAAT,CAAiBC,UAAjB,CAA4BG,KANpC;MAOJC,QAAQ,EAAE,UAPN;MAQJC,MAAM,EAAE;IARJ,CADmB;IAWzBC,MAAM,EAAE;MACNC,KAAK,EAAE,MADD;MAENC,QAAQ,EAAE,EAFJ;MAGNC,QAAQ,EAAE,GAHJ;MAINC,OAAO,EAAE,CAJH;MAKNC,MAAM,EAAE,MALF;MAMNf,UAAU,EAAE,MANN;MAONgB,IAAI,EAAE,SAPA;MAQN,YAAY;QACVC,eAAe,YAAKtB,KAAK,CAACO,EAAN,CAASC,OAAT,CAAiBC,UAAjB,CAA4Bc,KAAjC;MADL;IARN,CAXiB;IAuBzBC,SAAS,EAAE;MACTC,YAAY,EAAE,UADL;MAETC,UAAU,EAAE,QAFH;MAGTC,QAAQ,EAAE;IAHD,CAvBc;IA4BzBC,UAAU;MACRjB,UAAU,EAAEX,KAAK,CAACO,EAAN,CAASC,OAAT,CAAiBC,UAAjB,CAA4BoB,KADhC;MAER1B,MAAM,EAAE,EAFA;MAGR2B,MAAM,EAAE;IAHA,GAIL9B,KAAK,CAACO,EAAN,CAASwB,UAAT,CAAoBC,aAJf;MAKR1B,SAAS,6BAAsBN,KAAK,CAACO,EAAN,CAASC,OAAT,CAAiByB,MAAjB,CAAwBC,KAA9C,+BAAwElC,KAAK,CAACO,EAAN,CAASC,OAAT,CAAiByB,MAAjB,CAAwBC,KAAhG,+BAA0HlC,KAAK,CAACO,EAAN,CAASC,OAAT,CAAiByB,MAAjB,CAAwBC,KAAlJ,+BAA4KlC,KAAK,CAACO,EAAN,CAASC,OAAT,CAAiByB,MAAjB,CAAwBC,KAApM,CALD;MAMRpB,MAAM,EAAE;IANA,EA5Be;IAoCzBqB,YAAY;MACVlB,QAAQ,EAAE;IADA,GAGPjB,KAAK,CAACO,EAAN,CAASwB,UAAT,CAAoBK,UAHb;MAIV,WAAW;QACTzB,UAAU,EAAEX,KAAK,CAACO,EAAN,CAASC,OAAT,CAAiBC,UAAjB,CAA4Bc;MAD/B;IAJD,EApCa;IA4CzBc,IAAI,EAAE;MACJC,UAAU,EAAE,CAAC;IADT,CA5CmB;IA+CzB;IACAC,QAAQ,EAAE;MACRC,aAAa,EAAE,QADP;MAERrC,MAAM,EAAE,MAFA;MAGRsC,YAAY,EAAE;QACZpB,IAAI,EAAE;MADM,CAHN;MAMR,aAAa;QACXL,KAAK,EAAE;MADI,CANL;MASR,iBAAiB;QACfb,MAAM,EAAE,EADO;QAEfa,KAAK;MAFU;IATT;EAhDe,CAAZ;AAAA,CAAf;;eAgEejB,M"}

package/dist/Pagination/Pagination.d.ts

@@ -0,0 +1,122 @@
+import * as React from "react";
+import { StandardProps } from "@material-ui/core";
+import { HvInputProps } from "../Input";
+
+export interface PaginationLabelsProp {
+  /**
+   * The show label.
+   */
+  pageSizePrev?: string;
+  /**
+   * Indicate the units of the page size selection.
+   */
+  pageSizeEntryName?: string;
+  /**
+   * Used for the aria-label of the selection of number of unit.s
+   */
+  pageSizeSelectorDescription?: string;
+  /**
+   * Separator of current page and total pages.
+   */
+  pagesSeparator?: string;
+  /**
+   * Title of button `firstPage`.
+   */
+  paginationFirstPageTitle?: string;
+  /**
+   * Title of button `previousPage`.
+   */
+  paginationPreviousPageTitle?: string;
+  /**
+   * Title of button `nextPage`.
+   */
+  paginationNextPageTitle?: string;
+  /**
+   * Title of button `lastPage`.
+   */
+  paginationLastPageTitle?: string;
+  /**
+   * Aria-label passed to the page input.
+   */
+  paginationInputLabel?: string;
+}
+
+export interface HvPaginationCommonProps {
+  /**
+   * The number of pages the component has.
+   */
+  pages?: number;
+  /**
+   * The currently selected page (0-indexed).
+   */
+  page?: number;
+  /**
+   * Controls whether the left page size mechanism should be visible.
+   */
+  showPageSizeOptions?: boolean;
+  /**
+   * The array of possible page sizes for the dropdown.
+   */
+  pageSizeOptions?: number[];
+  /**
+   * The currently selected page size.
+   */
+  pageSize?: number;
+  /**
+   * Controls whether the previous/first page buttons are enabled.
+   */
+  canPrevious?: boolean;
+  /**
+   * Controls whether the next/last page buttons are enabled.
+   */
+  canNext?: boolean;
+  /**
+   * Function called when the page changes.
+   */
+  onPageChange?: (page: number) => void;
+  /**
+   * Function called when the page size changes.
+   */
+  onPageSizeChange?: (pageSize: number) => void;
+}
+
+export interface HvPaginationProps
+  extends StandardProps<React.HTMLAttributes<HTMLDivElement>, HvPaginationClassKey>,
+    HvPaginationCommonProps {
+  /**
+   * Controls whether the central page changing mechanism should be visible.
+   */
+  showPageJump?: boolean;
+  /**
+   * An object containing all the labels for the component.
+   */
+  labels?: PaginationLabelsProp;
+  /**
+   * Other props to show page component.
+   */
+  showPageProps?: Record<string, any>;
+  /**
+   * Other props to pagination component.
+   */
+  navigationProps?: Record<string, any>;
+  /**
+   * Extra properties passed to the input component representing the current pages.
+   */
+  currentPageInputProps?: HvInputProps;
+}
+
+export type HvPaginationClassKey =
+  | "root"
+  | "pageSizeOptions"
+  | "pageSizeOptionsSelect"
+  | "pageNavigator"
+  | "pageInfo"
+  | "pageJump"
+  | "pageSizeInput"
+  | "pageSizeInputRoot"
+  | "pageSizeInputContainer"
+  | "iconContainer"
+  | "icon"
+  | "selectDownIcon";
+
+export default function HvPagination(props: HvPaginationProps): JSX.Element | null;