@hitachivantara/uikit-react-core 3.52.5

package/dist/FilterGroup/FilterGroup.js

@@ -0,0 +1,307 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+require("core-js/modules/es.function.name.js");
+
+require("core-js/modules/es.symbol.js");
+
+require("core-js/modules/es.symbol.description.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 = _interopRequireDefault(require("react"));
+
+var _clsx = _interopRequireDefault(require("clsx"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _FilterGroupContext = require("./FilterGroupContext");
+
+var _FilterContent = _interopRequireDefault(require("./FilterContent"));
+
+var _styles = _interopRequireDefault(require("./styles"));
+
+var _ = require("..");
+
+var _excluded = ["className", "id", "name", "required", "disabled", "label", "aria-label", "aria-labelledby", "description", "aria-describedby", "onChange", "onCancel", "onClear", "status", "statusMessage", "labels", "value", "filters", "horizontalPlacement", "disablePortal", "escapeWithReference", "height", "filterContentProps"];
+var DEFAULT_LABELS = {
+  applyLabel: "Apply",
+  cancelLabel: "Cancel",
+  clearLabel: "Clear Filters",
+  placeholder: "Filters",
+  searchBoxPlaceholder: "Search",
+  selectAll: "All",
+  multiSelectionConjunction: "/"
+};
+
+var HvFilterGroup = function HvFilterGroup(_ref) {
+  var className = _ref.className,
+      id = _ref.id,
+      name = _ref.name,
+      _ref$required = _ref.required,
+      required = _ref$required === void 0 ? false : _ref$required,
+      _ref$disabled = _ref.disabled,
+      disabled = _ref$disabled === void 0 ? false : _ref$disabled,
+      label = _ref.label,
+      ariaLabel = _ref["aria-label"],
+      ariaLabelledBy = _ref["aria-labelledby"],
+      description = _ref.description,
+      ariaDescribedBy = _ref["aria-describedby"],
+      onChange = _ref.onChange,
+      onCancel = _ref.onCancel,
+      onClear = _ref.onClear,
+      status = _ref.status,
+      statusMessage = _ref.statusMessage,
+      labelsProp = _ref.labels,
+      value = _ref.value,
+      filters = _ref.filters,
+      _ref$horizontalPlacem = _ref.horizontalPlacement,
+      horizontalPlacement = _ref$horizontalPlacem === void 0 ? "right" : _ref$horizontalPlacem,
+      _ref$disablePortal = _ref.disablePortal,
+      disablePortal = _ref$disablePortal === void 0 ? true : _ref$disablePortal,
+      _ref$escapeWithRefere = _ref.escapeWithReference,
+      escapeWithReference = _ref$escapeWithRefere === void 0 ? true : _ref$escapeWithRefere,
+      _ref$height = _ref.height,
+      height = _ref$height === void 0 ? 350 : _ref$height,
+      filterContentProps = _ref.filterContentProps,
+      others = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+  var classes = (0, _styles.default)();
+
+  var _useControlled = (0, _.useControlled)(statusMessage, "Required"),
+      _useControlled2 = (0, _slicedToArray2.default)(_useControlled, 1),
+      validationMessage = _useControlled2[0];
+
+  var elementId = (0, _.useUniqueId)(id, "hvfiltergroup");
+  var labels = (0, _.useLabels)(DEFAULT_LABELS, labelsProp);
+  var hasLabel = label != null;
+  var hasDescription = description != null; // error message area will only be needed if the status is being controlled
+  // or if required is true
+
+  var canShowError = status !== undefined || required;
+  return /*#__PURE__*/_react.default.createElement(_.HvFormElement, (0, _extends2.default)({
+    id: id,
+    name: name,
+    value: value,
+    status: status,
+    disabled: disabled,
+    required: required,
+    className: (0, _clsx.default)(className, classes.root)
+  }, others), (hasLabel || hasDescription) && /*#__PURE__*/_react.default.createElement("div", {
+    className: classes.labelContainer
+  }, hasLabel && /*#__PURE__*/_react.default.createElement(_.HvLabel, {
+    id: (0, _.setId)(elementId, "label"),
+    htmlFor: (0, _.setId)(elementId, "input"),
+    label: label,
+    className: classes.label
+  }), hasDescription && /*#__PURE__*/_react.default.createElement(_.HvInfoMessage, {
+    id: (0, _.setId)(elementId, "description"),
+    className: classes.description
+  }, description)), /*#__PURE__*/_react.default.createElement(_FilterGroupContext.FilterGroupProvider, {
+    value: value,
+    filters: filters
+  }, /*#__PURE__*/_react.default.createElement(_FilterContent.default, (0, _extends2.default)({
+    id: elementId,
+    disabled: disabled,
+    disablePortal: disablePortal,
+    variableWidth: true,
+    placement: horizontalPlacement,
+    escapeWithReference: escapeWithReference,
+    "aria-label": ariaLabel,
+    "aria-labelledby": ariaLabelledBy,
+    status: status,
+    onChange: onChange,
+    onCancel: onCancel,
+    onClear: onClear,
+    labels: labels,
+    height: height
+  }, filterContentProps)), canShowError && /*#__PURE__*/_react.default.createElement(_.HvWarningText, {
+    id: (0, _.setId)(elementId, "error"),
+    disableBorder: true,
+    className: classes.error
+  }, validationMessage)));
+};
+
+HvFilterGroup.propTypes = {
+  /**
+   * Class names to be applied.
+   */
+  className: _propTypes.default.string,
+
+  /**
+   * Id to be applied to the form element root node.
+   */
+  id: _propTypes.default.string,
+
+  /**
+   * The form element name.
+   */
+  name: _propTypes.default.string,
+
+  /**
+   * The label of the form element.
+   *
+   * The form element must be labeled for accessibility reasons.
+   * If not provided, an aria-label or aria-labelledby must be provided instead.
+   */
+  label: _propTypes.default.node,
+
+  /**
+   * @ignore
+   */
+  "aria-label": _propTypes.default.string,
+
+  /**
+   * @ignore
+   */
+  "aria-labelledby": _propTypes.default.string,
+
+  /**
+   * Provide additional descriptive text for the form element.
+   */
+  description: _propTypes.default.node,
+
+  /**
+   * @ignore
+   */
+  "aria-describedby": _propTypes.default.string,
+
+  /**
+   * Indicates that the form element is disabled.
+   */
+  disabled: _propTypes.default.bool,
+
+  /**
+   * Indicates that user input is required on the form element.
+   */
+  required: _propTypes.default.bool,
+
+  /**
+   * The status of the form element.
+   *
+   * Valid is correct, invalid is incorrect and standBy means no validations have run.
+   *
+   * When uncontrolled and unspecified it will default to "standBy" and change to either "valid"
+   * or "invalid" after any change to the state.
+   */
+  status: _propTypes.default.oneOf(["standBy", "valid", "invalid"]),
+
+  /**
+   * The error message to show when `status` is "invalid". Defaults to "Required".
+   */
+  statusMessage: _propTypes.default.node,
+
+  /**
+   * The callback fired when the value changes.
+   */
+  onChange: _propTypes.default.func,
+
+  /**
+   * The callback fired when the cancel button is clicked.
+   */
+  onCancel: _propTypes.default.func,
+
+  /**
+   * The callback fired when the clear filters button is clicked.
+   */
+  onClear: _propTypes.default.func,
+
+  /**
+   * An object containing all the labels for the Filter Group.
+   */
+  labels: _propTypes.default.shape({
+    /**
+     * Apply button label.
+     */
+    applyLabel: _propTypes.default.string,
+
+    /**
+     * Cancel button label.
+     */
+    cancelLabel: _propTypes.default.string,
+
+    /**
+     * Clear Filters button label.
+     */
+    clearLabel: _propTypes.default.string,
+
+    /**
+     * Placeholder label.
+     */
+    placeholder: _propTypes.default.string,
+
+    /**
+     * SearchBox placeholder label.
+     */
+    searchBoxPlaceholder: _propTypes.default.string,
+
+    /**
+     * Select All placeholder label.
+     */
+    selectAll: _propTypes.default.string,
+
+    /**
+     * Multi selection conjunction placeholder label.
+     */
+    multiSelectionConjunction: _propTypes.default.string
+  }),
+
+  /**
+   * The options of the filter group.
+   */
+  filters: _propTypes.default.arrayOf(_propTypes.default.shape({
+    id: _propTypes.default.string.isRequired,
+    name: _propTypes.default.string.isRequired,
+    data: _propTypes.default.arrayOf(_propTypes.default.shape({
+      id: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]).isRequired,
+      name: _propTypes.default.string.isRequired
+    })).isRequired
+  })).isRequired,
+
+  /**
+   * The value of the filter group.
+   */
+  value: _propTypes.default.arrayOf(_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]))),
+
+  /**
+   * The placement where the filter group should be placed according to the input. Options are `left` or `right`.
+   */
+  horizontalPlacement: _propTypes.default.oneOf(["left", "right"]),
+
+  /**
+   * Disable the portal behavior. The children stay within it's parent DOM hierarchy.
+   */
+  disablePortal: _propTypes.default.bool,
+
+  /**
+   * Sets if the filter container should be out of the screen or stay visible.
+   */
+  escapeWithReference: _propTypes.default.bool,
+
+  /**
+   * The Height of the filter panel, between 295 and 425. Defaults to 350
+   */
+  height: _propTypes.default.oneOf([_propTypes.default.number, _propTypes.default.string]),
+
+  /**
+   * The filter content props
+   */
+  filterContentProps: _propTypes.default.object,
+
+  /**
+   * If `true` the filter group starts opened if `false` it starts closed.
+   */
+  expanded: _propTypes.default.bool
+};
+var _default = HvFilterGroup;
+exports.default = _default;
+//# sourceMappingURL=FilterGroup.js.map

package/dist/FilterGroup/FilterGroup.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/FilterGroup/FilterGroup.js"],"names":["DEFAULT_LABELS","applyLabel","cancelLabel","clearLabel","placeholder","searchBoxPlaceholder","selectAll","multiSelectionConjunction","HvFilterGroup","className","id","name","required","disabled","label","ariaLabel","ariaLabelledBy","description","ariaDescribedBy","onChange","onCancel","onClear","status","statusMessage","labelsProp","labels","value","filters","horizontalPlacement","disablePortal","escapeWithReference","height","filterContentProps","others","classes","validationMessage","elementId","hasLabel","hasDescription","canShowError","undefined","root","labelContainer","error","propTypes","PropTypes","string","node","bool","oneOf","func","shape","arrayOf","isRequired","data","oneOfType","number","object","expanded"],"mappings":"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","sourcesContent":["import React from \"react\";\nimport clsx from \"clsx\";\nimport PropTypes from \"prop-types\";\nimport { FilterGroupProvider } from \"./FilterGroupContext\";\nimport FilterContent from \"./FilterContent\";\nimport useStyles from \"./styles\";\nimport {\n  setId,\n  useLabels,\n  useUniqueId,\n  useControlled,\n  HvFormElement,\n  HvLabel,\n  HvWarningText,\n  HvInfoMessage,\n} from \"..\";\n\nconst DEFAULT_LABELS = {\n  applyLabel: \"Apply\",\n  cancelLabel: \"Cancel\",\n  clearLabel: \"Clear Filters\",\n  placeholder: \"Filters\",\n  searchBoxPlaceholder: \"Search\",\n  selectAll: \"All\",\n  multiSelectionConjunction: \"/\",\n};\n\nconst HvFilterGroup = ({\n  className,\n\n  id,\n  name,\n\n  required = false,\n  disabled = false,\n\n  label,\n  \"aria-label\": ariaLabel,\n  \"aria-labelledby\": ariaLabelledBy,\n  description,\n  \"aria-describedby\": ariaDescribedBy,\n\n  onChange,\n  onCancel,\n  onClear,\n\n  status,\n  statusMessage,\n\n  labels: labelsProp,\n\n  value,\n  filters,\n\n  horizontalPlacement = \"right\",\n  disablePortal = true,\n  escapeWithReference = true,\n\n  height = 350,\n  filterContentProps,\n\n  ...others\n}) => {\n  const classes = useStyles();\n\n  const [validationMessage] = useControlled(statusMessage, \"Required\");\n\n  const elementId = useUniqueId(id, \"hvfiltergroup\");\n\n  const labels = useLabels(DEFAULT_LABELS, labelsProp);\n\n  const hasLabel = label != null;\n  const hasDescription = description != null;\n\n  // error message area will only be needed if the status is being controlled\n  // or if required is true\n  const canShowError = status !== undefined || required;\n\n  return (\n    <HvFormElement\n      id={id}\n      name={name}\n      value={value}\n      status={status}\n      disabled={disabled}\n      required={required}\n      className={clsx(className, classes.root)}\n      {...others}\n    >\n      {(hasLabel || hasDescription) && (\n        <div className={classes.labelContainer}>\n          {hasLabel && (\n            <HvLabel\n              id={setId(elementId, \"label\")}\n              htmlFor={setId(elementId, \"input\")}\n              label={label}\n              className={classes.label}\n            />\n          )}\n\n          {hasDescription && (\n            <HvInfoMessage id={setId(elementId, \"description\")} className={classes.description}>\n              {description}\n            </HvInfoMessage>\n          )}\n        </div>\n      )}\n      <FilterGroupProvider value={value} filters={filters}>\n        <FilterContent\n          id={elementId}\n          disabled={disabled}\n          disablePortal={disablePortal}\n          variableWidth\n          placement={horizontalPlacement}\n          escapeWithReference={escapeWithReference}\n          aria-label={ariaLabel}\n          aria-labelledby={ariaLabelledBy}\n          status={status}\n          onChange={onChange}\n          onCancel={onCancel}\n          onClear={onClear}\n          labels={labels}\n          height={height}\n          {...filterContentProps}\n        />\n        {canShowError && (\n          <HvWarningText id={setId(elementId, \"error\")} disableBorder className={classes.error}>\n            {validationMessage}\n          </HvWarningText>\n        )}\n      </FilterGroupProvider>\n    </HvFormElement>\n  );\n};\n\nHvFilterGroup.propTypes = {\n  /**\n   * Class names to be applied.\n   */\n  className: PropTypes.string,\n\n  /**\n   * Id to be applied to the form element root node.\n   */\n  id: PropTypes.string,\n\n  /**\n   * The form element name.\n   */\n  name: PropTypes.string,\n\n  /**\n   * The label of the form element.\n   *\n   * The form element must be labeled for accessibility reasons.\n   * If not provided, an aria-label or aria-labelledby must be provided instead.\n   */\n  label: PropTypes.node,\n  /**\n   * @ignore\n   */\n  \"aria-label\": PropTypes.string,\n  /**\n   * @ignore\n   */\n  \"aria-labelledby\": PropTypes.string,\n  /**\n   * Provide additional descriptive text for the form element.\n   */\n  description: PropTypes.node,\n  /**\n   * @ignore\n   */\n  \"aria-describedby\": PropTypes.string,\n\n  /**\n   * Indicates that the form element is disabled.\n   */\n  disabled: PropTypes.bool,\n  /**\n   * Indicates that user input is required on the form element.\n   */\n  required: PropTypes.bool,\n\n  /**\n   * The status of the form element.\n   *\n   * Valid is correct, invalid is incorrect and standBy means no validations have run.\n   *\n   * When uncontrolled and unspecified it will default to \"standBy\" and change to either \"valid\"\n   * or \"invalid\" after any change to the state.\n   */\n  status: PropTypes.oneOf([\"standBy\", \"valid\", \"invalid\"]),\n  /**\n   * The error message to show when `status` is \"invalid\". Defaults to \"Required\".\n   */\n  statusMessage: PropTypes.node,\n\n  /**\n   * The callback fired when the value changes.\n   */\n  onChange: PropTypes.func,\n\n  /**\n   * The callback fired when the cancel button is clicked.\n   */\n  onCancel: PropTypes.func,\n\n  /**\n   * The callback fired when the clear filters button is clicked.\n   */\n  onClear: PropTypes.func,\n\n  /**\n   * An object containing all the labels for the Filter Group.\n   */\n  labels: PropTypes.shape({\n    /**\n     * Apply button label.\n     */\n    applyLabel: PropTypes.string,\n    /**\n     * Cancel button label.\n     */\n    cancelLabel: PropTypes.string,\n    /**\n     * Clear Filters button label.\n     */\n    clearLabel: PropTypes.string,\n    /**\n     * Placeholder label.\n     */\n    placeholder: PropTypes.string,\n    /**\n     * SearchBox placeholder label.\n     */\n    searchBoxPlaceholder: PropTypes.string,\n    /**\n     * Select All placeholder label.\n     */\n    selectAll: PropTypes.string,\n    /**\n     * Multi selection conjunction placeholder label.\n     */\n    multiSelectionConjunction: PropTypes.string,\n  }),\n\n  /**\n   * The options of the filter group.\n   */\n  filters: PropTypes.arrayOf(\n    PropTypes.shape({\n      id: PropTypes.string.isRequired,\n      name: PropTypes.string.isRequired,\n      data: PropTypes.arrayOf(\n        PropTypes.shape({\n          id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,\n          name: PropTypes.string.isRequired,\n        })\n      ).isRequired,\n    })\n  ).isRequired,\n\n  /**\n   * The value of the filter group.\n   */\n  value: PropTypes.arrayOf(\n    PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.string, PropTypes.number]))\n  ),\n  /**\n   * The placement where the filter group should be placed according to the input. Options are `left` or `right`.\n   */\n  horizontalPlacement: PropTypes.oneOf([\"left\", \"right\"]),\n\n  /**\n   * Disable the portal behavior. The children stay within it's parent DOM hierarchy.\n   */\n  disablePortal: PropTypes.bool,\n  /**\n   * Sets if the filter container should be out of the screen or stay visible.\n   */\n  escapeWithReference: PropTypes.bool,\n\n  /**\n   * The Height of the filter panel, between 295 and 425. Defaults to 350\n   */\n  height: PropTypes.oneOf([PropTypes.number, PropTypes.string]),\n\n  /**\n   * The filter content props\n   */\n  filterContentProps: PropTypes.object,\n\n  /**\n   * If `true` the filter group starts opened if `false` it starts closed.\n   */\n  expanded: PropTypes.bool,\n};\n\nexport default HvFilterGroup;\n"],"file":"FilterGroup.js"}

package/dist/FilterGroup/FilterGroupContext.js

@@ -0,0 +1,124 @@
+"use strict";
+
+require("core-js/modules/es.array.iterator.js");
+
+require("core-js/modules/es.object.to-string.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.FilterGroupProvider = exports.FilterGroupContext = void 0;
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
+require("core-js/modules/es.array.map.js");
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _isEqual = _interopRequireDefault(require("lodash/isEqual"));
+
+var _utils = require("../utils");
+
+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; }
+
+var FilterGroupContext = /*#__PURE__*/_react.default.createContext({
+  activeGroup: 0,
+  setActiveGroup: function setActiveGroup() {},
+  filterOptions: [],
+  setFilterOptions: function setFilterOptions() {},
+  filterValues: [],
+  setFilterValues: function setFilterValues() {},
+  rollbackFilters: function rollbackFilters() {},
+  clearFilters: function clearFilters() {},
+  applyFilters: function applyFilters() {},
+  applyDisabled: false
+});
+
+exports.FilterGroupContext = FilterGroupContext;
+
+var groups = function groups(filters) {
+  return filters.map(function () {
+    return [];
+  });
+};
+
+var FilterGroupProvider = function FilterGroupProvider(_ref) {
+  var value = _ref.value,
+      filters = _ref.filters,
+      children = _ref.children;
+
+  var _useState = (0, _react.useState)(0),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+      group = _useState2[0],
+      setActiveGroup = _useState2[1];
+
+  var _useSavedState = (0, _utils.useSavedState)(value || groups(filters)),
+      _useSavedState2 = (0, _slicedToArray2.default)(_useSavedState, 4),
+      filterValues = _useSavedState2[0],
+      setFilterValues = _useSavedState2[1],
+      rollbackFilters = _useSavedState2[2],
+      appliedFilters = _useSavedState2[3];
+
+  var _useState3 = (0, _react.useState)(false),
+      _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+      applyDisabled = _useState4[0],
+      setApplyDisabled = _useState4[1];
+
+  (0, _react.useEffect)(function () {
+    setApplyDisabled((0, _isEqual.default)(filterValues, appliedFilters));
+  }, [filterValues, appliedFilters]);
+  var clearFilters = (0, _react.useCallback)(function () {
+    setFilterValues(groups(filters));
+  }, [filters, setFilterValues]);
+  var applyFilters = (0, _react.useCallback)(function () {
+    setFilterValues(filterValues, true);
+  }, [filterValues, setFilterValues]);
+  var contextValue = (0, _react.useMemo)(function () {
+    return {
+      activeGroup: group,
+      setActiveGroup: setActiveGroup,
+      filterOptions: filters,
+      filterValues: filterValues,
+      setFilterValues: setFilterValues,
+      appliedFilters: appliedFilters,
+      rollbackFilters: rollbackFilters,
+      clearFilters: clearFilters,
+      applyFilters: applyFilters,
+      applyDisabled: applyDisabled
+    };
+  }, [appliedFilters, applyDisabled, applyFilters, clearFilters, filterValues, filters, group, rollbackFilters, setFilterValues]);
+  return /*#__PURE__*/_react.default.createElement(FilterGroupContext.Provider, {
+    value: contextValue
+  }, children);
+};
+
+exports.FilterGroupProvider = FilterGroupProvider;
+FilterGroupProvider.propTypes = {
+  value: _propTypes.default.arrayOf(_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]))),
+  filters: _propTypes.default.arrayOf(_propTypes.default.shape({
+    id: _propTypes.default.string.isRequired,
+    name: _propTypes.default.string.isRequired,
+    data: _propTypes.default.arrayOf(_propTypes.default.shape({
+      id: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]).isRequired,
+      name: _propTypes.default.string.isRequired
+    })).isRequired
+  })),
+  children: _propTypes.default.node.isRequired
+};
+//# sourceMappingURL=FilterGroupContext.js.map

package/dist/FilterGroup/FilterGroupContext.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/FilterGroup/FilterGroupContext.js"],"names":["FilterGroupContext","React","createContext","activeGroup","setActiveGroup","filterOptions","setFilterOptions","filterValues","setFilterValues","rollbackFilters","clearFilters","applyFilters","applyDisabled","groups","filters","map","FilterGroupProvider","value","children","group","appliedFilters","setApplyDisabled","contextValue","propTypes","PropTypes","arrayOf","oneOfType","string","number","shape","id","isRequired","name","data","node"],"mappings":"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","sourcesContent":["import React, { useState, useEffect, useMemo, useCallback } from \"react\";\nimport PropTypes from \"prop-types\";\nimport isEqual from \"lodash/isEqual\";\nimport { useSavedState } from \"../utils\";\n\nexport const FilterGroupContext = React.createContext({\n  activeGroup: 0,\n  setActiveGroup: () => {},\n  filterOptions: [],\n  setFilterOptions: () => {},\n  filterValues: [],\n  setFilterValues: () => {},\n  rollbackFilters: () => {},\n  clearFilters: () => {},\n  applyFilters: () => {},\n  applyDisabled: false,\n});\n\nconst groups = (filters) => filters.map(() => []);\n\nexport const FilterGroupProvider = ({ value, filters, children }) => {\n  const [group, setActiveGroup] = useState(0);\n  const [filterValues, setFilterValues, rollbackFilters, appliedFilters] = useSavedState(\n    value || groups(filters)\n  );\n  const [applyDisabled, setApplyDisabled] = useState(false);\n\n  useEffect(() => {\n    setApplyDisabled(isEqual(filterValues, appliedFilters));\n  }, [filterValues, appliedFilters]);\n\n  const clearFilters = useCallback(() => {\n    setFilterValues(groups(filters));\n  }, [filters, setFilterValues]);\n\n  const applyFilters = useCallback(() => {\n    setFilterValues(filterValues, true);\n  }, [filterValues, setFilterValues]);\n\n  const contextValue = useMemo(\n    () => ({\n      activeGroup: group,\n      setActiveGroup,\n      filterOptions: filters,\n      filterValues,\n      setFilterValues,\n      appliedFilters,\n      rollbackFilters,\n      clearFilters,\n      applyFilters,\n      applyDisabled,\n    }),\n    [\n      appliedFilters,\n      applyDisabled,\n      applyFilters,\n      clearFilters,\n      filterValues,\n      filters,\n      group,\n      rollbackFilters,\n      setFilterValues,\n    ]\n  );\n\n  return <FilterGroupContext.Provider value={contextValue}>{children}</FilterGroupContext.Provider>;\n};\n\nFilterGroupProvider.propTypes = {\n  value: PropTypes.arrayOf(\n    PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.string, PropTypes.number]))\n  ),\n  filters: PropTypes.arrayOf(\n    PropTypes.shape({\n      id: PropTypes.string.isRequired,\n      name: PropTypes.string.isRequired,\n      data: PropTypes.arrayOf(\n        PropTypes.shape({\n          id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,\n          name: PropTypes.string.isRequired,\n        })\n      ).isRequired,\n    })\n  ),\n  children: PropTypes.node.isRequired,\n};\n"],"file":"FilterGroupContext.js"}

package/dist/FilterGroup/LeftPanel/LeftPanel.js

@@ -0,0 +1,88 @@
+"use strict";
+
+require("core-js/modules/es.array.iterator.js");
+
+require("core-js/modules/es.object.to-string.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.array.map.js");
+
+require("core-js/modules/es.function.name.js");
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _clsx = _interopRequireDefault(require("clsx"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _ = require("../..");
+
+var _FilterGroupContext = require("../FilterGroupContext");
+
+var _Counter = _interopRequireDefault(require("../Counter"));
+
+var _styles = _interopRequireDefault(require("./styles"));
+
+var _utils = require("../../List/utils");
+
+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; }
+
+var LeftPanel = function LeftPanel(_ref) {
+  var id = _ref.id,
+      className = _ref.className;
+  var classes = (0, _styles.default)();
+
+  var _useContext = (0, _react.useContext)(_FilterGroupContext.FilterGroupContext),
+      filterOptions = _useContext.filterOptions,
+      activeGroup = _useContext.activeGroup,
+      setActiveGroup = _useContext.setActiveGroup;
+
+  return /*#__PURE__*/_react.default.createElement(_.HvPanel, {
+    id: (0, _.setId)(id, "leftPanel"),
+    className: (0, _clsx.default)(className, classes.root)
+  }, /*#__PURE__*/_react.default.createElement(_.HvListContainer, {
+    id: (0, _.setId)(id, "leftPanel-list"),
+    condensed: true,
+    interactive: true
+  }, filterOptions.map(function (group, index) {
+    var ItemText = (0, _utils.wrapperTooltip)(true, group.name, group.name);
+    return /*#__PURE__*/_react.default.createElement(_.HvListItem, {
+      id: group.id,
+      className: classes.filterItem,
+      key: group.name,
+      onClick: function onClick() {
+        return setActiveGroup(index);
+      },
+      selected: filterOptions[activeGroup].id === group.id,
+      endAdornment: /*#__PURE__*/_react.default.createElement(_Counter.default, {
+        id: group.id
+      })
+    }, /*#__PURE__*/_react.default.createElement(ItemText, null));
+  })));
+};
+
+LeftPanel.propTypes = {
+  id: _propTypes.default.string,
+  className: _propTypes.default.string
+};
+var _default = LeftPanel;
+exports.default = _default;
+//# sourceMappingURL=LeftPanel.js.map

package/dist/FilterGroup/LeftPanel/LeftPanel.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/FilterGroup/LeftPanel/LeftPanel.js"],"names":["LeftPanel","id","className","classes","FilterGroupContext","filterOptions","activeGroup","setActiveGroup","root","map","group","index","ItemText","name","filterItem","propTypes","PropTypes","string"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;;;AAEA,IAAMA,SAAS,GAAG,SAAZA,SAAY,OAAuB;AAAA,MAApBC,EAAoB,QAApBA,EAAoB;AAAA,MAAhBC,SAAgB,QAAhBA,SAAgB;AACvC,MAAMC,OAAO,GAAG,sBAAhB;;AACA,oBAAuD,uBAAWC,sCAAX,CAAvD;AAAA,MAAQC,aAAR,eAAQA,aAAR;AAAA,MAAuBC,WAAvB,eAAuBA,WAAvB;AAAA,MAAoCC,cAApC,eAAoCA,cAApC;;AAEA,sBACE,6BAAC,SAAD;AAAS,IAAA,EAAE,EAAE,aAAMN,EAAN,EAAU,WAAV,CAAb;AAAqC,IAAA,SAAS,EAAE,mBAAKC,SAAL,EAAgBC,OAAO,CAACK,IAAxB;AAAhD,kBACE,6BAAC,iBAAD;AAAiB,IAAA,EAAE,EAAE,aAAMP,EAAN,EAAU,gBAAV,CAArB;AAAkD,IAAA,SAAS,MAA3D;AAA4D,IAAA,WAAW;AAAvE,KACGI,aAAa,CAACI,GAAd,CAAkB,UAACC,KAAD,EAAQC,KAAR,EAAkB;AACnC,QAAMC,QAAQ,GAAG,2BAAe,IAAf,EAAqBF,KAAK,CAACG,IAA3B,EAAiCH,KAAK,CAACG,IAAvC,CAAjB;AACA,wBACE,6BAAC,YAAD;AACE,MAAA,EAAE,EAAEH,KAAK,CAACT,EADZ;AAEE,MAAA,SAAS,EAAEE,OAAO,CAACW,UAFrB;AAGE,MAAA,GAAG,EAAEJ,KAAK,CAACG,IAHb;AAIE,MAAA,OAAO,EAAE;AAAA,eAAMN,cAAc,CAACI,KAAD,CAApB;AAAA,OAJX;AAKE,MAAA,QAAQ,EAAEN,aAAa,CAACC,WAAD,CAAb,CAA2BL,EAA3B,KAAkCS,KAAK,CAACT,EALpD;AAME,MAAA,YAAY,eAAE,6BAAC,gBAAD;AAAS,QAAA,EAAE,EAAES,KAAK,CAACT;AAAnB;AANhB,oBAQE,6BAAC,QAAD,OARF,CADF;AAYD,GAdA,CADH,CADF,CADF;AAqBD,CAzBD;;AA2BAD,SAAS,CAACe,SAAV,GAAsB;AACpBd,EAAAA,EAAE,EAAEe,mBAAUC,MADM;AAEpBf,EAAAA,SAAS,EAAEc,mBAAUC;AAFD,CAAtB;eAKejB,S","sourcesContent":["import React, { useContext } from \"react\";\nimport clsx from \"clsx\";\nimport PropTypes from \"prop-types\";\nimport { HvPanel, HvListContainer, HvListItem, setId } from \"../..\";\nimport { FilterGroupContext } from \"../FilterGroupContext\";\nimport Counter from \"../Counter\";\nimport useStyles from \"./styles\";\nimport { wrapperTooltip } from \"../../List/utils\";\n\nconst LeftPanel = ({ id, className }) => {\n  const classes = useStyles();\n  const { filterOptions, activeGroup, setActiveGroup } = useContext(FilterGroupContext);\n\n  return (\n    <HvPanel id={setId(id, \"leftPanel\")} className={clsx(className, classes.root)}>\n      <HvListContainer id={setId(id, \"leftPanel-list\")} condensed interactive>\n        {filterOptions.map((group, index) => {\n          const ItemText = wrapperTooltip(true, group.name, group.name);\n          return (\n            <HvListItem\n              id={group.id}\n              className={classes.filterItem}\n              key={group.name}\n              onClick={() => setActiveGroup(index)}\n              selected={filterOptions[activeGroup].id === group.id}\n              endAdornment={<Counter id={group.id} />}\n            >\n              <ItemText />\n            </HvListItem>\n          );\n        })}\n      </HvListContainer>\n    </HvPanel>\n  );\n};\n\nLeftPanel.propTypes = {\n  id: PropTypes.string,\n  className: PropTypes.string,\n};\n\nexport default LeftPanel;\n"],"file":"LeftPanel.js"}

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

package/dist/FilterGroup/LeftPanel/index.js.map

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

package/dist/FilterGroup/LeftPanel/styles.js

@@ -0,0 +1,24 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _core = require("@material-ui/core");
+
+// accommodating the focus outline space with extra 4px
+var styles = (0, _core.makeStyles)(function () {
+  return {
+    root: {
+      "& $filterItem": {
+        display: "flex",
+        justifyContent: "space-between"
+      }
+    },
+    filterItem: {}
+  };
+});
+var _default = styles;
+exports.default = _default;
+//# sourceMappingURL=styles.js.map

package/dist/FilterGroup/LeftPanel/styles.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/FilterGroup/LeftPanel/styles.js"],"names":["styles","root","display","justifyContent","filterItem"],"mappings":";;;;;;;AAAA;;AAEA;AAEA,IAAMA,MAAM,GAAG,sBAAW;AAAA,SAAO;AAC/BC,IAAAA,IAAI,EAAE;AACJ,uBAAiB;AACfC,QAAAA,OAAO,EAAE,MADM;AAEfC,QAAAA,cAAc,EAAE;AAFD;AADb,KADyB;AAO/BC,IAAAA,UAAU,EAAE;AAPmB,GAAP;AAAA,CAAX,CAAf;eAUeJ,M","sourcesContent":["import { makeStyles } from \"@material-ui/core\";\n\n// accommodating the focus outline space with extra 4px\n\nconst styles = makeStyles(() => ({\n  root: {\n    \"& $filterItem\": {\n      display: \"flex\",\n      justifyContent: \"space-between\",\n    },\n  },\n  filterItem: {},\n}));\n\nexport default styles;\n"],"file":"styles.js"}