@hitachivantara/uikit-react-core 3.52.5

package/dist/modern/FilterGroup/FilterContent/FilterContent.js

@@ -0,0 +1,178 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+const _excluded = ["id", "status", "disabled", "aria-label", "aria-labelledby", "description", "aria-describedby", "onChange", "onCancel", "onClear", "labels", "horizontalPlacement", "disablePortal", "escapeWithReference", "height"];
+import "core-js/modules/web.dom-collections.iterator.js";
+import "core-js/modules/es.array.unscopables.flat.js";
+import React, { useMemo, useState, useRef, useContext } from "react";
+import PropTypes from "prop-types";
+import { Filters } from "@hitachivantara/uikit-react-icons";
+import { FilterGroupContext } from "../FilterGroupContext";
+import LeftPanel from "../LeftPanel";
+import RightPanel from "../RightPanel";
+import Counter from "../Counter";
+import useStyles from "./styles";
+import { setId, HvBaseDropdown, HvTypography, HvButton, HvActionBar } from "../..";
+
+const FilterContent = _ref => {
+  let {
+    id,
+    status,
+    disabled = false,
+    "aria-label": ariaLabel,
+    "aria-labelledby": ariaLabelledBy,
+    description,
+    "aria-describedby": ariaDescribedBy,
+    onChange,
+    onCancel,
+    onClear,
+    labels,
+    horizontalPlacement = "right",
+    disablePortal = true,
+    escapeWithReference = true,
+    height
+  } = _ref,
+      others = _objectWithoutProperties(_ref, _excluded);
+
+  const classes = useStyles();
+  const [filterGroupOpen, setFilterGroupOpen] = useState(false);
+  const {
+    filterValues,
+    rollbackFilters,
+    clearFilters,
+    applyFilters,
+    applyDisabled
+  } = useContext(FilterGroupContext);
+  const focusTarget = useRef();
+
+  const focusOnContainer = () => {
+    var _focusTarget$current;
+
+    (_focusTarget$current = focusTarget.current) === null || _focusTarget$current === void 0 ? void 0 : _focusTarget$current.focus();
+  };
+
+  const onApplyHandler = evt => {
+    applyFilters();
+    onChange === null || onChange === void 0 ? void 0 : onChange(evt, filterValues);
+    setFilterGroupOpen(false);
+  };
+
+  const onCancelHandler = evt => {
+    rollbackFilters();
+    onCancel === null || onCancel === void 0 ? void 0 : onCancel(evt);
+    setFilterGroupOpen(false);
+  };
+
+  const onClearHandler = evt => {
+    clearFilters();
+    onClear === null || onClear === void 0 ? void 0 : onClear(evt);
+  };
+
+  const handleToggle = (evt, open) => {
+    /* 
+     If evt is null this toggle wasn't triggered by the user.
+     instead it was triggered by the baseDropdown useEffect after
+     the datepicker changed the expanded value this baseDropdown behavior needs a review
+    */
+    if (evt === null) return;
+    setFilterGroupOpen(open);
+    if (!open) onCancelHandler === null || onCancelHandler === void 0 ? void 0 : onCancelHandler(evt);
+  };
+
+  const Header = useMemo(() => /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Filters, null), /*#__PURE__*/React.createElement(HvTypography, {
+    variant: "highlightText"
+  }, labels.placeholder)), [labels.placeholder]);
+  return /*#__PURE__*/React.createElement(HvBaseDropdown, _extends({
+    id: setId(id, "dropdown"),
+    role: "combobox",
+    classes: {
+      root: classes.dropdown,
+      panel: classes.panel,
+      selection: classes.baseDropdownSelection,
+      header: classes.header
+    },
+    disabled: disabled,
+    disablePortal: disablePortal,
+    variableWidth: true,
+    placement: horizontalPlacement,
+    expanded: filterGroupOpen,
+    onToggle: handleToggle,
+    onClickOutside: onCancelHandler,
+    onContainerCreation: focusOnContainer,
+    placeholder: Header,
+    adornment: /*#__PURE__*/React.createElement(Counter, null),
+    popperProps: {
+      modifiers: [{
+        name: "preventOverflow",
+        enabled: escapeWithReference
+      }]
+    },
+    "aria-haspopup": "dialog",
+    "aria-label": ariaLabel,
+    "aria-labelledby": ariaLabelledBy,
+    "aria-invalid": status === "invalid" ? true : undefined,
+    "aria-errormessage": status === "invalid" ? setId(id, "error") : undefined,
+    "aria-describedby": [description && setId(id, "description"), ariaDescribedBy].join(" ").trim() || undefined
+  }, others), /*#__PURE__*/React.createElement("div", {
+    ref: focusTarget,
+    tabIndex: -1
+  }), /*#__PURE__*/React.createElement("div", {
+    className: classes.root,
+    style: {
+      height
+    }
+  }, /*#__PURE__*/React.createElement(LeftPanel, {
+    id: id,
+    className: classes.leftSidePanel
+  }), /*#__PURE__*/React.createElement(RightPanel, {
+    id: id,
+    className: classes.rightSidePanel,
+    labels: labels
+  })), /*#__PURE__*/React.createElement(HvActionBar, {
+    className: classes.actionBar
+  }, /*#__PURE__*/React.createElement(HvButton, {
+    id: setId(id, "clearFilters-button"),
+    disabled: filterValues.flat().length === 0,
+    category: "ghost",
+    onClick: onClearHandler
+  }, labels.clearLabel), /*#__PURE__*/React.createElement("div", {
+    "aria-hidden": "true",
+    className: classes.space
+  }, "\xA0"), /*#__PURE__*/React.createElement(HvButton, {
+    id: setId(id, "apply-button"),
+    disabled: applyDisabled,
+    category: "ghost",
+    onClick: onApplyHandler
+  }, labels.applyLabel), /*#__PURE__*/React.createElement(HvButton, {
+    id: setId(id, "cancel-button"),
+    category: "ghost",
+    onClick: onCancelHandler
+  }, labels.cancelLabel)));
+};
+
+FilterContent.propTypes = {
+  id: PropTypes.string,
+  "aria-label": PropTypes.string,
+  "aria-labelledby": PropTypes.string,
+  description: PropTypes.node,
+  "aria-describedby": PropTypes.string,
+  disabled: PropTypes.bool,
+  status: PropTypes.oneOf(["standBy", "valid", "invalid"]),
+  onChange: PropTypes.func,
+  onCancel: PropTypes.func,
+  onClear: PropTypes.func,
+  labels: PropTypes.shape({
+    applyLabel: PropTypes.string,
+    cancelLabel: PropTypes.string,
+    clearLabel: PropTypes.string,
+    placeholder: PropTypes.string,
+    searchBoxPlaceholder: PropTypes.string,
+    selectAll: PropTypes.string,
+    multiSelectionConjunction: PropTypes.string
+  }),
+  horizontalPlacement: PropTypes.oneOf(["left", "right"]),
+  disablePortal: PropTypes.bool,
+  escapeWithReference: PropTypes.bool,
+  height: PropTypes.any
+};
+export default FilterContent;
+//# sourceMappingURL=FilterContent.js.map

package/dist/modern/FilterGroup/FilterContent/FilterContent.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/FilterGroup/FilterContent/FilterContent.js"],"names":["React","useMemo","useState","useRef","useContext","PropTypes","Filters","FilterGroupContext","LeftPanel","RightPanel","Counter","useStyles","setId","HvBaseDropdown","HvTypography","HvButton","HvActionBar","FilterContent","id","status","disabled","ariaLabel","ariaLabelledBy","description","ariaDescribedBy","onChange","onCancel","onClear","labels","horizontalPlacement","disablePortal","escapeWithReference","height","others","classes","filterGroupOpen","setFilterGroupOpen","filterValues","rollbackFilters","clearFilters","applyFilters","applyDisabled","focusTarget","focusOnContainer","current","focus","onApplyHandler","evt","onCancelHandler","onClearHandler","handleToggle","open","Header","placeholder","root","dropdown","panel","selection","baseDropdownSelection","header","modifiers","name","enabled","undefined","join","trim","leftSidePanel","rightSidePanel","actionBar","flat","length","clearLabel","space","applyLabel","cancelLabel","propTypes","string","node","bool","oneOf","func","shape","searchBoxPlaceholder","selectAll","multiSelectionConjunction","any"],"mappings":"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","sourcesContent":["import React, { useMemo, useState, useRef, useContext } from \"react\";\nimport PropTypes from \"prop-types\";\nimport { Filters } from \"@hitachivantara/uikit-react-icons\";\nimport { FilterGroupContext } from \"../FilterGroupContext\";\nimport LeftPanel from \"../LeftPanel\";\nimport RightPanel from \"../RightPanel\";\nimport Counter from \"../Counter\";\n\nimport useStyles from \"./styles\";\n\nimport { setId, HvBaseDropdown, HvTypography, HvButton, HvActionBar } from \"../..\";\n\nconst FilterContent = ({\n  id,\n  status,\n  disabled = false,\n\n  \"aria-label\": ariaLabel,\n  \"aria-labelledby\": ariaLabelledBy,\n  description,\n  \"aria-describedby\": ariaDescribedBy,\n\n  onChange,\n  onCancel,\n  onClear,\n\n  labels,\n\n  horizontalPlacement = \"right\",\n  disablePortal = true,\n  escapeWithReference = true,\n\n  height,\n\n  ...others\n}) => {\n  const classes = useStyles();\n  const [filterGroupOpen, setFilterGroupOpen] = useState(false);\n\n  const { filterValues, rollbackFilters, clearFilters, applyFilters, applyDisabled } =\n    useContext(FilterGroupContext);\n\n  const focusTarget = useRef();\n\n  const focusOnContainer = () => {\n    focusTarget.current?.focus();\n  };\n\n  const onApplyHandler = (evt) => {\n    applyFilters();\n    onChange?.(evt, filterValues);\n    setFilterGroupOpen(false);\n  };\n\n  const onCancelHandler = (evt) => {\n    rollbackFilters();\n    onCancel?.(evt);\n    setFilterGroupOpen(false);\n  };\n\n  const onClearHandler = (evt) => {\n    clearFilters();\n    onClear?.(evt);\n  };\n\n  const handleToggle = (evt, open) => {\n    /* \n     If evt is null this toggle wasn't triggered by the user.\n     instead it was triggered by the baseDropdown useEffect after\n     the datepicker changed the expanded value this baseDropdown behavior needs a review\n    */\n    if (evt === null) return;\n    setFilterGroupOpen(open);\n    if (!open) onCancelHandler?.(evt);\n  };\n\n  const Header = useMemo(\n    () => (\n      <>\n        <Filters />\n        <HvTypography variant=\"highlightText\">{labels.placeholder}</HvTypography>\n      </>\n    ),\n    [labels.placeholder]\n  );\n\n  return (\n    <HvBaseDropdown\n      id={setId(id, \"dropdown\")}\n      role=\"combobox\"\n      classes={{\n        root: classes.dropdown,\n        panel: classes.panel,\n        selection: classes.baseDropdownSelection,\n        header: classes.header,\n      }}\n      disabled={disabled}\n      disablePortal={disablePortal}\n      variableWidth\n      placement={horizontalPlacement}\n      expanded={filterGroupOpen}\n      onToggle={handleToggle}\n      onClickOutside={onCancelHandler}\n      onContainerCreation={focusOnContainer}\n      placeholder={Header}\n      adornment={<Counter />}\n      popperProps={{ modifiers: [{ name: \"preventOverflow\", enabled: escapeWithReference }] }}\n      aria-haspopup=\"dialog\"\n      aria-label={ariaLabel}\n      aria-labelledby={ariaLabelledBy}\n      aria-invalid={status === \"invalid\" ? true : undefined}\n      aria-errormessage={status === \"invalid\" ? setId(id, \"error\") : undefined}\n      aria-describedby={\n        [description && setId(id, \"description\"), ariaDescribedBy].join(\" \").trim() || undefined\n      }\n      {...others}\n    >\n      <div ref={focusTarget} tabIndex={-1} />\n      <div className={classes.root} style={{ height }}>\n        <LeftPanel id={id} className={classes.leftSidePanel} />\n        <RightPanel id={id} className={classes.rightSidePanel} labels={labels} />\n      </div>\n      <HvActionBar className={classes.actionBar}>\n        <HvButton\n          id={setId(id, \"clearFilters-button\")}\n          disabled={filterValues.flat().length === 0}\n          category=\"ghost\"\n          onClick={onClearHandler}\n        >\n          {labels.clearLabel}\n        </HvButton>\n        <div aria-hidden=\"true\" className={classes.space}>\n          &nbsp;\n        </div>\n        <HvButton\n          id={setId(id, \"apply-button\")}\n          disabled={applyDisabled}\n          category=\"ghost\"\n          onClick={onApplyHandler}\n        >\n          {labels.applyLabel}\n        </HvButton>\n        <HvButton id={setId(id, \"cancel-button\")} category=\"ghost\" onClick={onCancelHandler}>\n          {labels.cancelLabel}\n        </HvButton>\n      </HvActionBar>\n    </HvBaseDropdown>\n  );\n};\n\nFilterContent.propTypes = {\n  id: PropTypes.string,\n\n  \"aria-label\": PropTypes.string,\n  \"aria-labelledby\": PropTypes.string,\n  description: PropTypes.node,\n  \"aria-describedby\": PropTypes.string,\n  disabled: PropTypes.bool,\n  status: PropTypes.oneOf([\"standBy\", \"valid\", \"invalid\"]),\n\n  onChange: PropTypes.func,\n  onCancel: PropTypes.func,\n  onClear: PropTypes.func,\n\n  labels: PropTypes.shape({\n    applyLabel: PropTypes.string,\n    cancelLabel: PropTypes.string,\n    clearLabel: PropTypes.string,\n    placeholder: PropTypes.string,\n    searchBoxPlaceholder: PropTypes.string,\n    selectAll: PropTypes.string,\n    multiSelectionConjunction: PropTypes.string,\n  }),\n\n  horizontalPlacement: PropTypes.oneOf([\"left\", \"right\"]),\n  disablePortal: PropTypes.bool,\n  escapeWithReference: PropTypes.bool,\n  height: PropTypes.any,\n};\n\nexport default FilterContent;\n"],"file":"FilterContent.js"}

package/dist/modern/FilterGroup/FilterContent/index.js

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

package/dist/modern/FilterGroup/FilterContent/index.js.map

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

package/dist/modern/FilterGroup/FilterContent/styles.js

@@ -0,0 +1,51 @@
+import { makeStyles } from "@material-ui/core";
+const styles = makeStyles(theme => ({
+  root: {
+    width: 640,
+    backgroundColor: theme.hv.palette.atmosphere.atmo1,
+    maxHeight: "calc(500px - 75px)",
+    minHeight: "calc(370px - 75px)",
+    "& div$leftSidePanel": {
+      display: "inline-block",
+      width: `calc(50% - ${theme.spacing("sm")}px - ${theme.spacing("sm")}px + 8px)`,
+      height: `calc(100% - ${theme.spacing("sm")}px - ${theme.spacing("sm")}px + 8px)`,
+      verticalAlign: "top",
+      maxHeight: "calc(500px - 75px)",
+      minHeight: "calc(370px - 75px)",
+      padding: 4,
+      margin: theme.spacing("sm") - 4
+    },
+    "& div$rightSidePanel": {
+      display: "inline-block",
+      width: "50%",
+      height: "100%",
+      maxHeight: "calc(500px - 75px)",
+      minHeight: "calc(370px - 75px)",
+      verticalAlign: "top",
+      overflow: "visible",
+      boxShadow: `inset 8px 0 8px -6px ${theme.hv.palette.shadow.shad1}`
+    }
+  },
+  panel: {
+    maxHeight: 500,
+    minHeight: 370
+  },
+  actionBar: {
+    backgroundColor: theme.hv.palette.atmosphere.atmo1
+  },
+  space: {
+    flex: 1
+  },
+  baseDropdownSelection: {
+    padding: "0 30px 0 0"
+  },
+  header: {
+    display: "flex",
+    justifyContent: "space-between",
+    height: 32
+  },
+  leftSidePanel: {},
+  rightSidePanel: {}
+}));
+export default styles;
+//# sourceMappingURL=styles.js.map

package/dist/modern/FilterGroup/FilterContent/styles.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/FilterGroup/FilterContent/styles.js"],"names":["makeStyles","styles","theme","root","width","backgroundColor","hv","palette","atmosphere","atmo1","maxHeight","minHeight","display","spacing","height","verticalAlign","padding","margin","overflow","boxShadow","shadow","shad1","panel","actionBar","space","flex","baseDropdownSelection","header","justifyContent","leftSidePanel","rightSidePanel"],"mappings":"AAAA,SAASA,UAAT,QAA2B,mBAA3B;AAEA,MAAMC,MAAM,GAAGD,UAAU,CAAEE,KAAD,KAAY;AACpCC,EAAAA,IAAI,EAAE;AACJC,IAAAA,KAAK,EAAE,GADH;AAEJC,IAAAA,eAAe,EAAEH,KAAK,CAACI,EAAN,CAASC,OAAT,CAAiBC,UAAjB,CAA4BC,KAFzC;AAGJC,IAAAA,SAAS,EAAE,oBAHP;AAIJC,IAAAA,SAAS,EAAE,oBAJP;AAKJ,2BAAuB;AACrBC,MAAAA,OAAO,EAAE,cADY;AAErBR,MAAAA,KAAK,EAAG,cAAaF,KAAK,CAACW,OAAN,CAAc,IAAd,CAAoB,QAAOX,KAAK,CAACW,OAAN,CAAc,IAAd,CAAoB,WAF/C;AAGrBC,MAAAA,MAAM,EAAG,eAAcZ,KAAK,CAACW,OAAN,CAAc,IAAd,CAAoB,QAAOX,KAAK,CAACW,OAAN,CAAc,IAAd,CAAoB,WAHjD;AAIrBE,MAAAA,aAAa,EAAE,KAJM;AAKrBL,MAAAA,SAAS,EAAE,oBALU;AAMrBC,MAAAA,SAAS,EAAE,oBANU;AAOrBK,MAAAA,OAAO,EAAE,CAPY;AAQrBC,MAAAA,MAAM,EAAEf,KAAK,CAACW,OAAN,CAAc,IAAd,IAAsB;AART,KALnB;AAeJ,4BAAwB;AACtBD,MAAAA,OAAO,EAAE,cADa;AAEtBR,MAAAA,KAAK,EAAE,KAFe;AAGtBU,MAAAA,MAAM,EAAE,MAHc;AAItBJ,MAAAA,SAAS,EAAE,oBAJW;AAKtBC,MAAAA,SAAS,EAAE,oBALW;AAMtBI,MAAAA,aAAa,EAAE,KANO;AAOtBG,MAAAA,QAAQ,EAAE,SAPY;AAQtBC,MAAAA,SAAS,EAAG,wBAAuBjB,KAAK,CAACI,EAAN,CAASC,OAAT,CAAiBa,MAAjB,CAAwBC,KAAM;AAR3C;AAfpB,GAD8B;AA2BpCC,EAAAA,KAAK,EAAE;AACLZ,IAAAA,SAAS,EAAE,GADN;AAELC,IAAAA,SAAS,EAAE;AAFN,GA3B6B;AA+BpCY,EAAAA,SAAS,EAAE;AACTlB,IAAAA,eAAe,EAAEH,KAAK,CAACI,EAAN,CAASC,OAAT,CAAiBC,UAAjB,CAA4BC;AADpC,GA/ByB;AAkCpCe,EAAAA,KAAK,EAAE;AACLC,IAAAA,IAAI,EAAE;AADD,GAlC6B;AAqCpCC,EAAAA,qBAAqB,EAAE;AACrBV,IAAAA,OAAO,EAAE;AADY,GArCa;AAwCpCW,EAAAA,MAAM,EAAE;AACNf,IAAAA,OAAO,EAAE,MADH;AAENgB,IAAAA,cAAc,EAAE,eAFV;AAGNd,IAAAA,MAAM,EAAE;AAHF,GAxC4B;AA6CpCe,EAAAA,aAAa,EAAE,EA7CqB;AA8CpCC,EAAAA,cAAc,EAAE;AA9CoB,CAAZ,CAAD,CAAzB;AAiDA,eAAe7B,MAAf","sourcesContent":["import { makeStyles } from \"@material-ui/core\";\n\nconst styles = makeStyles((theme) => ({\n  root: {\n    width: 640,\n    backgroundColor: theme.hv.palette.atmosphere.atmo1,\n    maxHeight: \"calc(500px - 75px)\",\n    minHeight: \"calc(370px - 75px)\",\n    \"& div$leftSidePanel\": {\n      display: \"inline-block\",\n      width: `calc(50% - ${theme.spacing(\"sm\")}px - ${theme.spacing(\"sm\")}px + 8px)`,\n      height: `calc(100% - ${theme.spacing(\"sm\")}px - ${theme.spacing(\"sm\")}px + 8px)`,\n      verticalAlign: \"top\",\n      maxHeight: \"calc(500px - 75px)\",\n      minHeight: \"calc(370px - 75px)\",\n      padding: 4,\n      margin: theme.spacing(\"sm\") - 4,\n    },\n    \"& div$rightSidePanel\": {\n      display: \"inline-block\",\n      width: \"50%\",\n      height: \"100%\",\n      maxHeight: \"calc(500px - 75px)\",\n      minHeight: \"calc(370px - 75px)\",\n      verticalAlign: \"top\",\n      overflow: \"visible\",\n      boxShadow: `inset 8px 0 8px -6px ${theme.hv.palette.shadow.shad1}`,\n    },\n  },\n  panel: {\n    maxHeight: 500,\n    minHeight: 370,\n  },\n  actionBar: {\n    backgroundColor: theme.hv.palette.atmosphere.atmo1,\n  },\n  space: {\n    flex: 1,\n  },\n  baseDropdownSelection: {\n    padding: \"0 30px 0 0\",\n  },\n  header: {\n    display: \"flex\",\n    justifyContent: \"space-between\",\n    height: 32,\n  },\n  leftSidePanel: {},\n  rightSidePanel: {},\n}));\n\nexport default styles;\n"],"file":"styles.js"}

package/dist/modern/FilterGroup/FilterGroup.d.ts

@@ -0,0 +1,108 @@
+import { StandardProps } from "@material-ui/core";
+import { HvFormElementProps } from "..";
+
+export type HvFilterGroupClassKey = "root" | "labelContainer" | "label" | "description" | "error";
+
+interface FilterValue {
+  value: string | number[][];
+}
+
+export interface HvFilterGroupProps
+  extends StandardProps<HvFormElementProps, HvFilterGroupClassKey> {
+  /**
+   * The callback fired when the cancel button is clicked.
+   */
+  onCancel: (event: Event) => void;
+
+  /**
+   * The callback fired when the clear filters button is clicked.
+   */
+  onClear: (event: Event) => void;
+
+  /**
+   * The callback fired when the value changes.
+   */
+  onChange?: (event: Event, value: FilterValue) => void;
+
+  /**
+   * An Object containing the various text associated with the input.
+   */
+  labels?: {
+    /**
+     * Apply button label.
+     */
+    applyLabel?: string;
+    /**
+     * Cancel button label.
+     */
+    cancelLabel?: string;
+    /**
+     * Cancel button label.
+     */
+    clearLabel?: string;
+    /**
+     * Placeholder label.
+     */
+    placeholder?: string;
+    /**
+     * SearchBox placeholder label.
+     */
+    searchBoxPlaceholder?: string;
+    /**
+     * Select All placeholder label.
+     */
+    selectAll?: string;
+    /**
+     * Multi selection conjunction placeholder label.
+     */
+    multiSelectionConjunction?: string;
+  };
+
+  /**
+   * The placeholder value when nothing is selected.
+   */
+  placeholder?: string;
+
+  /**
+   * The initial value of the input when in single calendar mode.
+   */
+  filters: {
+    id: string;
+    name: string;
+    data: {
+      id: string | number;
+      name: string;
+      checked?: boolean;
+    }[];
+  }[];
+
+  /**
+   * The value of the filter group.
+   */
+  value?: FilterValue;
+
+  /**
+   * The placement where the filter group should be placed according to the input. Options are `left` or `right`.
+   */
+  horizontalPlacement?: "left" | "right";
+  /**
+   * Disable the portal behavior. The children stay within it's parent DOM hierarchy.
+   */
+  disablePortal?: boolean;
+  /**
+   * Sets if the filter container should be out of the screen or stay visible.
+   */
+  escapeWithReference?: boolean;
+
+  /**
+   * The Height of the filter panel, between 295 and 425. Defaults to 350
+   */
+  height?: number | string;
+
+  /**
+   * The filter content props
+   */
+  filterContentProps?: object;
+}
+
+export default function HvFilterGroup(props: HvFilterGroupProps): JSX.Element | null;

package/dist/modern/FilterGroup/FilterGroup.js

@@ -0,0 +1,274 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+const _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"];
+import "core-js/modules/web.dom-collections.iterator.js";
+import React from "react";
+import clsx from "clsx";
+import PropTypes from "prop-types";
+import { FilterGroupProvider } from "./FilterGroupContext";
+import FilterContent from "./FilterContent";
+import useStyles from "./styles";
+import { setId, useLabels, useUniqueId, useControlled, HvFormElement, HvLabel, HvWarningText, HvInfoMessage } from "..";
+const DEFAULT_LABELS = {
+  applyLabel: "Apply",
+  cancelLabel: "Cancel",
+  clearLabel: "Clear Filters",
+  placeholder: "Filters",
+  searchBoxPlaceholder: "Search",
+  selectAll: "All",
+  multiSelectionConjunction: "/"
+};
+
+const HvFilterGroup = _ref => {
+  let {
+    className,
+    id,
+    name,
+    required = false,
+    disabled = false,
+    label,
+    "aria-label": ariaLabel,
+    "aria-labelledby": ariaLabelledBy,
+    description,
+    "aria-describedby": ariaDescribedBy,
+    onChange,
+    onCancel,
+    onClear,
+    status,
+    statusMessage,
+    labels: labelsProp,
+    value,
+    filters,
+    horizontalPlacement = "right",
+    disablePortal = true,
+    escapeWithReference = true,
+    height = 350,
+    filterContentProps
+  } = _ref,
+      others = _objectWithoutProperties(_ref, _excluded);
+
+  const classes = useStyles();
+  const [validationMessage] = useControlled(statusMessage, "Required");
+  const elementId = useUniqueId(id, "hvfiltergroup");
+  const labels = useLabels(DEFAULT_LABELS, labelsProp);
+  const hasLabel = label != null;
+  const hasDescription = description != null; // error message area will only be needed if the status is being controlled
+  // or if required is true
+
+  const canShowError = status !== undefined || required;
+  return /*#__PURE__*/React.createElement(HvFormElement, _extends({
+    id: id,
+    name: name,
+    value: value,
+    status: status,
+    disabled: disabled,
+    required: required,
+    className: clsx(className, classes.root)
+  }, others), (hasLabel || hasDescription) && /*#__PURE__*/React.createElement("div", {
+    className: classes.labelContainer
+  }, hasLabel && /*#__PURE__*/React.createElement(HvLabel, {
+    id: setId(elementId, "label"),
+    htmlFor: setId(elementId, "input"),
+    label: label,
+    className: classes.label
+  }), hasDescription && /*#__PURE__*/React.createElement(HvInfoMessage, {
+    id: setId(elementId, "description"),
+    className: classes.description
+  }, description)), /*#__PURE__*/React.createElement(FilterGroupProvider, {
+    value: value,
+    filters: filters
+  }, /*#__PURE__*/React.createElement(FilterContent, _extends({
+    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.createElement(HvWarningText, {
+    id: setId(elementId, "error"),
+    disableBorder: true,
+    className: classes.error
+  }, validationMessage)));
+};
+
+HvFilterGroup.propTypes = {
+  /**
+   * Class names to be applied.
+   */
+  className: PropTypes.string,
+
+  /**
+   * Id to be applied to the form element root node.
+   */
+  id: PropTypes.string,
+
+  /**
+   * The form element name.
+   */
+  name: PropTypes.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.node,
+
+  /**
+   * @ignore
+   */
+  "aria-label": PropTypes.string,
+
+  /**
+   * @ignore
+   */
+  "aria-labelledby": PropTypes.string,
+
+  /**
+   * Provide additional descriptive text for the form element.
+   */
+  description: PropTypes.node,
+
+  /**
+   * @ignore
+   */
+  "aria-describedby": PropTypes.string,
+
+  /**
+   * Indicates that the form element is disabled.
+   */
+  disabled: PropTypes.bool,
+
+  /**
+   * Indicates that user input is required on the form element.
+   */
+  required: PropTypes.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.oneOf(["standBy", "valid", "invalid"]),
+
+  /**
+   * The error message to show when `status` is "invalid". Defaults to "Required".
+   */
+  statusMessage: PropTypes.node,
+
+  /**
+   * The callback fired when the value changes.
+   */
+  onChange: PropTypes.func,
+
+  /**
+   * The callback fired when the cancel button is clicked.
+   */
+  onCancel: PropTypes.func,
+
+  /**
+   * The callback fired when the clear filters button is clicked.
+   */
+  onClear: PropTypes.func,
+
+  /**
+   * An object containing all the labels for the Filter Group.
+   */
+  labels: PropTypes.shape({
+    /**
+     * Apply button label.
+     */
+    applyLabel: PropTypes.string,
+
+    /**
+     * Cancel button label.
+     */
+    cancelLabel: PropTypes.string,
+
+    /**
+     * Clear Filters button label.
+     */
+    clearLabel: PropTypes.string,
+
+    /**
+     * Placeholder label.
+     */
+    placeholder: PropTypes.string,
+
+    /**
+     * SearchBox placeholder label.
+     */
+    searchBoxPlaceholder: PropTypes.string,
+
+    /**
+     * Select All placeholder label.
+     */
+    selectAll: PropTypes.string,
+
+    /**
+     * Multi selection conjunction placeholder label.
+     */
+    multiSelectionConjunction: PropTypes.string
+  }),
+
+  /**
+   * The options of the filter group.
+   */
+  filters: PropTypes.arrayOf(PropTypes.shape({
+    id: PropTypes.string.isRequired,
+    name: PropTypes.string.isRequired,
+    data: PropTypes.arrayOf(PropTypes.shape({
+      id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
+      name: PropTypes.string.isRequired
+    })).isRequired
+  })).isRequired,
+
+  /**
+   * The value of the filter group.
+   */
+  value: PropTypes.arrayOf(PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.string, PropTypes.number]))),
+
+  /**
+   * The placement where the filter group should be placed according to the input. Options are `left` or `right`.
+   */
+  horizontalPlacement: PropTypes.oneOf(["left", "right"]),
+
+  /**
+   * Disable the portal behavior. The children stay within it's parent DOM hierarchy.
+   */
+  disablePortal: PropTypes.bool,
+
+  /**
+   * Sets if the filter container should be out of the screen or stay visible.
+   */
+  escapeWithReference: PropTypes.bool,
+
+  /**
+   * The Height of the filter panel, between 295 and 425. Defaults to 350
+   */
+  height: PropTypes.oneOf([PropTypes.number, PropTypes.string]),
+
+  /**
+   * The filter content props
+   */
+  filterContentProps: PropTypes.object,
+
+  /**
+   * If `true` the filter group starts opened if `false` it starts closed.
+   */
+  expanded: PropTypes.bool
+};
+export default HvFilterGroup;
+//# sourceMappingURL=FilterGroup.js.map