@hitachivantara/uikit-react-core 5.1.3 → 5.2.0

package/dist/cjs/components/FilterGroup/FilterContent/FilterContent.cjs

@@ -0,0 +1,168 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const FilterContent_styles = require("./FilterContent.styles.cjs");
+const filterContentClasses = require("./filterContentClasses.cjs");
+const FilterGroupContext = require("../FilterGroupContext.cjs");
+const React = require("react");
+const uikitReactIcons = require("@hitachivantara/uikit-react-icons");
+const clsx = require("clsx");
+const react = require("@emotion/react");
+const jsxRuntime = require("@emotion/react/jsx-runtime");
+const LeftPanel = require("../LeftPanel/LeftPanel.cjs");
+const RightPanel = require("../RightPanel/RightPanel.cjs");
+const useTheme = require("../../../hooks/useTheme.cjs");
+const Typography = require("../../Typography/Typography.cjs");
+const BaseDropdown = require("../../BaseDropdown/BaseDropdown.cjs");
+const setId = require("../../../utils/setId.cjs");
+const Counter = require("../Counter/Counter.cjs");
+const ActionBar = require("../../ActionBar/ActionBar.cjs");
+const Button = require("../../Button/Button.cjs");
+const HvFilterGroupContent = ({
+  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,
+  leftEmptyElement,
+  rightEmptyElement,
+  classes,
+  ...others
+}) => {
+  const {
+    activeTheme
+  } = useTheme.useTheme();
+  const [filterGroupOpen, setFilterGroupOpen] = React.useState(false);
+  const {
+    defaultValue,
+    filterValues,
+    rollbackFilters,
+    clearFilters,
+    applyFilters,
+    applyDisabled
+  } = React.useContext(FilterGroupContext.HvFilterGroupContext);
+  const focusTarget = React.useRef(null);
+  const focusOnContainer = () => {
+    var _a;
+    (_a = focusTarget.current) == null ? void 0 : _a.focus();
+  };
+  const onApplyHandler = (event) => {
+    applyFilters();
+    onChange == null ? void 0 : onChange(event, filterValues);
+    setFilterGroupOpen(false);
+  };
+  const onCancelHandler = (event) => {
+    rollbackFilters();
+    onCancel == null ? void 0 : onCancel(event);
+    setFilterGroupOpen(false);
+  };
+  const onClearHandler = (event) => {
+    clearFilters();
+    onClear == null ? void 0 : onClear(event);
+  };
+  const handleToggle = (event, open) => {
+    if (event === null)
+      return;
+    setFilterGroupOpen(open);
+    if (!open)
+      onCancelHandler == null ? void 0 : onCancelHandler(event);
+  };
+  const Header = React.useMemo(() => /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, {
+    children: [/* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.Filters, {}), /* @__PURE__ */ jsxRuntime.jsx(Typography.HvTypography, {
+      variant: "label",
+      children: labels == null ? void 0 : labels.placeholder
+    })]
+  }), [labels == null ? void 0 : labels.placeholder]);
+  return /* @__PURE__ */ jsxRuntime.jsx(react.ClassNames, {
+    children: ({
+      css
+    }) => /* @__PURE__ */ jsxRuntime.jsxs(BaseDropdown.HvBaseDropdown, {
+      id: setId.setId(id, "dropdown"),
+      role: "combobox",
+      classes: {
+        root: clsx.clsx(classes == null ? void 0 : classes.dropdown, filterContentClasses.default.dropdown),
+        panel: clsx.clsx(classes == null ? void 0 : classes.panel, filterContentClasses.default.panel, css(FilterContent_styles.styles.panel)),
+        selection: clsx.clsx(classes == null ? void 0 : classes.baseDropdownSelection, filterContentClasses.default.baseDropdownSelection, css(FilterContent_styles.styles.baseDropdownSelection)),
+        header: clsx.clsx(classes == null ? void 0 : classes.header, filterContentClasses.default.header, css(FilterContent_styles.styles.header))
+      },
+      disabled,
+      disablePortal,
+      variableWidth: true,
+      placement: horizontalPlacement,
+      expanded: filterGroupOpen,
+      onToggle: handleToggle,
+      onClickOutside: onCancelHandler,
+      onContainerCreation: focusOnContainer,
+      placeholder: Header,
+      adornment: /* @__PURE__ */ jsxRuntime.jsx(Counter.HvFilterGroupCounter, {}),
+      popperProps: {
+        modifiers: [{
+          name: "preventOverflow",
+          enabled: escapeWithReference
+        }]
+      },
+      "aria-haspopup": "dialog",
+      "aria-label": ariaLabel,
+      "aria-labelledby": ariaLabelledBy,
+      "aria-invalid": status === "invalid" ? true : void 0,
+      "aria-errormessage": status === "invalid" ? setId.setId(id, "error") : void 0,
+      "aria-describedby": [description && setId.setId(id, "description"), ariaDescribedBy].join(" ").trim() || void 0,
+      ...others,
+      children: [/* @__PURE__ */ jsxRuntime.jsx("div", {
+        ref: focusTarget,
+        tabIndex: -1
+      }), /* @__PURE__ */ jsxRuntime.jsxs("div", {
+        className: clsx.clsx(classes == null ? void 0 : classes.root, filterContentClasses.default.root, css(FilterContent_styles.styles.root)),
+        style: {
+          height
+        },
+        children: [/* @__PURE__ */ jsxRuntime.jsx(LeftPanel.HvFilterGroupLeftPanel, {
+          id,
+          className: clsx.clsx(classes == null ? void 0 : classes.leftSidePanel, filterContentClasses.default.leftSidePanel, css(FilterContent_styles.styles.leftSidePanel)),
+          emptyElement: leftEmptyElement
+        }), /* @__PURE__ */ jsxRuntime.jsx(RightPanel.HvFilterGroupRightPanel, {
+          id,
+          className: clsx.clsx(classes == null ? void 0 : classes.rightSidePanel, filterContentClasses.default.rightSidePanel, css(FilterContent_styles.styles.rightSidePanel)),
+          emptyElement: rightEmptyElement,
+          labels
+        })]
+      }), /* @__PURE__ */ jsxRuntime.jsxs(ActionBar.HvActionBar, {
+        className: clsx.clsx(classes == null ? void 0 : classes.actionBar, filterContentClasses.default.actionBar, css(FilterContent_styles.styles.actionBar)),
+        children: [/* @__PURE__ */ jsxRuntime.jsx(Button.HvButton, {
+          id: setId.setId(id, "clearFilters-button"),
+          disabled: defaultValue ? (defaultValue == null ? void 0 : defaultValue.flat().length) === (filterValues == null ? void 0 : filterValues.flat().length) : (filterValues == null ? void 0 : filterValues.flat().length) === 0,
+          variant: "secondaryGhost",
+          onClick: onClearHandler,
+          children: labels == null ? void 0 : labels.clearLabel
+        }), /* @__PURE__ */ jsxRuntime.jsx("div", {
+          "aria-hidden": "true",
+          className: clsx.clsx(classes == null ? void 0 : classes.space, filterContentClasses.default.space, css(FilterContent_styles.styles.space)),
+          children: " "
+        }), /* @__PURE__ */ jsxRuntime.jsx(Button.HvButton, {
+          id: setId.setId(id, "apply-button"),
+          disabled: applyDisabled,
+          variant: activeTheme == null ? void 0 : activeTheme.filterGroup.applyButtonVariant,
+          onClick: onApplyHandler,
+          className: css(FilterContent_styles.styles.applyButton),
+          children: labels == null ? void 0 : labels.applyLabel
+        }), /* @__PURE__ */ jsxRuntime.jsx(Button.HvButton, {
+          id: setId.setId(id, "cancel-button"),
+          variant: activeTheme == null ? void 0 : activeTheme.filterGroup.cancelButtonVariant,
+          onClick: onCancelHandler,
+          children: labels == null ? void 0 : labels.cancelLabel
+        })]
+      })]
+    })
+  });
+};
+exports.HvFilterGroupContent = HvFilterGroupContent;
+//# sourceMappingURL=FilterContent.cjs.map

package/dist/cjs/components/FilterGroup/FilterContent/FilterContent.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"FilterContent.cjs","sources":["../../../../../src/components/FilterGroup/FilterContent/FilterContent.tsx"],"sourcesContent":["import {\n  HvActionBar,\n  HvBaseDropdown,\n  HvBaseDropdownProps,\n  HvButton,\n  HvButtonVariant,\n  HvFormStatus,\n  HvTypography,\n} from \"@core/components\";\nimport { setId } from \"@core/utils\";\nimport {\n  HvFilterGroupLabels,\n  HvFilterGroupValue,\n  HvFilterGroupHorizontalPlacement,\n} from \"../FilterGroup\";\nimport { styles } from \"./FilterContent.styles\";\nimport filterGroupContentClasses, {\n  HvFilterGroupContentClasses,\n} from \"./filterContentClasses\";\nimport { HvFilterGroupContext } from \"../FilterGroupContext\";\nimport { useContext, useMemo, useRef, useState } from \"react\";\nimport { Filters } from \"@hitachivantara/uikit-react-icons\";\nimport { clsx } from \"clsx\";\nimport { HvFilterGroupCounter } from \"../Counter\";\nimport { ClassNames } from \"@emotion/react\";\nimport { HvFilterGroupLeftPanel } from \"../LeftPanel\";\nimport { HvFilterGroupRightPanel } from \"../RightPanel\";\nimport { useTheme } from \"@core/hooks\";\n\nexport interface HvFilterGroupContentProps\n  extends Omit<HvBaseDropdownProps, \"onChange\"> {\n  description?: React.ReactNode;\n  status?: HvFormStatus;\n  onChange?: (\n    event: React.MouseEvent<HTMLButtonElement>,\n    value?: HvFilterGroupValue\n  ) => void;\n  onCancel?: (event: React.MouseEvent<HTMLButtonElement> | Event) => void;\n  onClear?: (event: React.MouseEvent<HTMLButtonElement>) => void;\n  labels?: HvFilterGroupLabels;\n  horizontalPlacement?: HvFilterGroupHorizontalPlacement;\n  disablePortal?: boolean;\n  escapeWithReference?: boolean;\n  height?: string | number;\n  leftEmptyElement?: React.ReactNode;\n  rightEmptyElement?: React.ReactNode;\n  disabled?: boolean;\n  classes?: HvFilterGroupContentClasses;\n}\n\nexport const HvFilterGroupContent = ({\n  id,\n  status,\n  disabled = false,\n  \"aria-label\": ariaLabel,\n  \"aria-labelledby\": ariaLabelledBy,\n  description,\n  \"aria-describedby\": ariaDescribedBy,\n  onChange,\n  onCancel,\n  onClear,\n  labels,\n  horizontalPlacement = \"right\",\n  disablePortal = true,\n  escapeWithReference = true,\n  height,\n  leftEmptyElement,\n  rightEmptyElement,\n  classes,\n  ...others\n}: HvFilterGroupContentProps) => {\n  const { activeTheme } = useTheme();\n\n  const [filterGroupOpen, setFilterGroupOpen] = useState<boolean>(false);\n\n  const {\n    defaultValue,\n    filterValues,\n    rollbackFilters,\n    clearFilters,\n    applyFilters,\n    applyDisabled,\n  } = useContext(HvFilterGroupContext);\n\n  const focusTarget = useRef<HTMLDivElement>(null);\n\n  const focusOnContainer = () => {\n    focusTarget.current?.focus();\n  };\n\n  const onApplyHandler = (event: React.MouseEvent<HTMLButtonElement>) => {\n    applyFilters();\n    onChange?.(event, filterValues);\n    setFilterGroupOpen(false);\n  };\n\n  const onCancelHandler = (\n    event: React.MouseEvent<HTMLButtonElement> | Event\n  ) => {\n    rollbackFilters();\n    onCancel?.(event);\n    setFilterGroupOpen(false);\n  };\n\n  const onClearHandler = (event: React.MouseEvent<HTMLButtonElement>) => {\n    clearFilters();\n    onClear?.(event);\n  };\n\n  const handleToggle = (event: Event, open: boolean) => {\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 (event === null) return;\n    setFilterGroupOpen(open);\n    if (!open) onCancelHandler?.(event);\n  };\n\n  const Header = useMemo(\n    () => (\n      <>\n        <Filters />\n        <HvTypography variant=\"label\">{labels?.placeholder}</HvTypography>\n      </>\n    ),\n    [labels?.placeholder]\n  );\n\n  return (\n    <ClassNames>\n      {({ css }) => (\n        <HvBaseDropdown\n          id={setId(id, \"dropdown\")}\n          role=\"combobox\"\n          classes={{\n            root: clsx(classes?.dropdown, filterGroupContentClasses.dropdown),\n            panel: clsx(\n              classes?.panel,\n              filterGroupContentClasses.panel,\n              css(styles.panel)\n            ),\n            selection: clsx(\n              classes?.baseDropdownSelection,\n              filterGroupContentClasses.baseDropdownSelection,\n              css(styles.baseDropdownSelection)\n            ),\n            header: clsx(\n              classes?.header,\n              filterGroupContentClasses.header,\n              css(styles.header)\n            ),\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={<HvFilterGroupCounter />}\n          popperProps={{\n            modifiers: [\n              { name: \"preventOverflow\", enabled: escapeWithReference },\n            ],\n          }}\n          aria-haspopup=\"dialog\"\n          aria-label={ariaLabel}\n          aria-labelledby={ariaLabelledBy}\n          aria-invalid={status === \"invalid\" ? true : undefined}\n          aria-errormessage={\n            status === \"invalid\" ? setId(id, \"error\") : undefined\n          }\n          aria-describedby={\n            [description && setId(id, \"description\"), ariaDescribedBy]\n              .join(\" \")\n              .trim() || undefined\n          }\n          {...others}\n        >\n          <div ref={focusTarget} tabIndex={-1} />\n          <div\n            className={clsx(\n              classes?.root,\n              filterGroupContentClasses.root,\n              css(styles.root)\n            )}\n            style={{ height }}\n          >\n            <HvFilterGroupLeftPanel\n              id={id}\n              className={clsx(\n                classes?.leftSidePanel,\n                filterGroupContentClasses.leftSidePanel,\n                css(styles.leftSidePanel)\n              )}\n              emptyElement={leftEmptyElement}\n            />\n            <HvFilterGroupRightPanel\n              id={id}\n              className={clsx(\n                classes?.rightSidePanel,\n                filterGroupContentClasses.rightSidePanel,\n                css(styles.rightSidePanel)\n              )}\n              emptyElement={rightEmptyElement}\n              labels={labels}\n            />\n          </div>\n          <HvActionBar\n            className={clsx(\n              classes?.actionBar,\n              filterGroupContentClasses.actionBar,\n              css(styles.actionBar)\n            )}\n          >\n            <HvButton\n              id={setId(id, \"clearFilters-button\")}\n              disabled={\n                defaultValue\n                  ? defaultValue?.flat().length === filterValues?.flat().length\n                  : filterValues?.flat().length === 0\n              }\n              variant=\"secondaryGhost\"\n              onClick={onClearHandler}\n            >\n              {labels?.clearLabel}\n            </HvButton>\n            <div\n              aria-hidden=\"true\"\n              className={clsx(\n                classes?.space,\n                filterGroupContentClasses.space,\n                css(styles.space)\n              )}\n            >\n              &nbsp;\n            </div>\n            <HvButton\n              id={setId(id, \"apply-button\")}\n              disabled={applyDisabled}\n              variant={\n                activeTheme?.filterGroup.applyButtonVariant as HvButtonVariant\n              }\n              onClick={onApplyHandler}\n              className={css(styles.applyButton)}\n            >\n              {labels?.applyLabel}\n            </HvButton>\n            <HvButton\n              id={setId(id, \"cancel-button\")}\n              variant={\n                activeTheme?.filterGroup.cancelButtonVariant as HvButtonVariant\n              }\n              onClick={onCancelHandler}\n            >\n              {labels?.cancelLabel}\n            </HvButton>\n          </HvActionBar>\n        </HvBaseDropdown>\n      )}\n    </ClassNames>\n  );\n};\n"],"names":["HvFilterGroupContent","id","status","disabled","ariaLabel","ariaLabelledBy","description","ariaDescribedBy","onChange","onCancel","onClear","labels","horizontalPlacement","disablePortal","escapeWithReference","height","leftEmptyElement","rightEmptyElement","classes","others","activeTheme","useTheme","filterGroupOpen","setFilterGroupOpen","useState","defaultValue","filterValues","rollbackFilters","clearFilters","applyFilters","applyDisabled","useContext","HvFilterGroupContext","focusTarget","useRef","focusOnContainer","current","focus","onApplyHandler","event","onCancelHandler","onClearHandler","handleToggle","open","Header","useMemo","_jsxs","_Fragment","children","Filters","HvTypography","variant","placeholder","ClassNames","css","HvBaseDropdown","setId","role","root","clsx","dropdown","filterGroupContentClasses","panel","styles","selection","baseDropdownSelection","header","variableWidth","placement","expanded","onToggle","onClickOutside","onContainerCreation","adornment","_jsx","HvFilterGroupCounter","popperProps","modifiers","name","enabled","undefined","join","trim","ref","tabIndex","className","style","HvFilterGroupLeftPanel","leftSidePanel","emptyElement","HvFilterGroupRightPanel","rightSidePanel","HvActionBar","actionBar","HvButton","flat","length","onClick","clearLabel","space","filterGroup","applyButtonVariant","applyButton","applyLabel","cancelButtonVariant","cancelLabel"],"mappings":"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"}

package/dist/cjs/components/FilterGroup/FilterContent/FilterContent.styles.cjs

@@ -0,0 +1,60 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const uikitStyles = require("@hitachivantara/uikit-styles");
+const styles = {
+  panel: {
+    maxHeight: 500,
+    minHeight: 370
+  },
+  header: {
+    display: "flex",
+    justifyContent: "space-between",
+    height: 32
+  },
+  baseDropdownSelection: {
+    padding: uikitStyles.theme.spacing(["0px", "30px", "0px", "0px"])
+  },
+  root: {
+    width: 640,
+    backgroundColor: uikitStyles.theme.colors.atmo1,
+    maxHeight: "calc(500px - 75px)",
+    minHeight: "calc(370px - 75px)",
+    border: uikitStyles.theme.filterGroup.panelsBorder,
+    borderBottom: uikitStyles.theme.filterGroup.panelsBorderBottom
+  },
+  rightSidePanel: {
+    display: "inline-block",
+    width: "50%",
+    height: "100%",
+    maxHeight: "calc(500px - 75px)",
+    minHeight: "calc(370px - 75px)",
+    verticalAlign: "top",
+    overflow: "visible",
+    boxShadow: uikitStyles.theme.filterGroup.rightPanelShadow,
+    borderLeft: uikitStyles.theme.filterGroup.rightPanelBorderLeft
+  },
+  leftSidePanel: {
+    display: "inline-block",
+    width: `calc(50% - ${uikitStyles.theme.spacing("sm")} - ${uikitStyles.theme.spacing("sm")} + 8px)`,
+    height: `calc(100% - ${uikitStyles.theme.spacing("sm")} - ${uikitStyles.theme.spacing("sm")} + 8px)`,
+    verticalAlign: "top",
+    maxHeight: "calc(500px - 75px)",
+    minHeight: "calc(370px - 75px)",
+    padding: 4,
+    margin: `calc(${uikitStyles.theme.spacing("sm")} - 4px)`
+  },
+  actionBar: {
+    backgroundColor: uikitStyles.theme.colors.atmo1,
+    border: uikitStyles.theme.filterGroup.actionBarBorder,
+    borderTop: uikitStyles.theme.filterGroup.actionBarBorderTop,
+    alignItems: "center"
+  },
+  space: {
+    flex: 1
+  },
+  applyButton: {
+    marginRight: uikitStyles.theme.filterGroup.applyButtonMarginRight
+  }
+};
+exports.styles = styles;
+//# sourceMappingURL=FilterContent.styles.cjs.map

package/dist/cjs/components/FilterGroup/FilterContent/FilterContent.styles.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"FilterContent.styles.cjs","sources":["../../../../../src/components/FilterGroup/FilterContent/FilterContent.styles.tsx"],"sourcesContent":["import { CSSInterpolation } from \"@emotion/serialize\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nexport const styles: {\n  panel: CSSInterpolation;\n  header: CSSInterpolation;\n  baseDropdownSelection: CSSInterpolation;\n  root: CSSInterpolation;\n  actionBar: CSSInterpolation;\n  space: CSSInterpolation;\n  rightSidePanel: CSSInterpolation;\n  leftSidePanel: CSSInterpolation;\n  applyButton: CSSInterpolation;\n} = {\n  panel: {\n    maxHeight: 500,\n    minHeight: 370,\n  },\n  header: {\n    display: \"flex\",\n    justifyContent: \"space-between\",\n    height: 32,\n  },\n  baseDropdownSelection: {\n    padding: theme.spacing([\"0px\", \"30px\", \"0px\", \"0px\"]),\n  },\n  root: {\n    width: 640,\n    backgroundColor: theme.colors.atmo1,\n    maxHeight: \"calc(500px - 75px)\",\n    minHeight: \"calc(370px - 75px)\",\n    border: theme.filterGroup.panelsBorder,\n    borderBottom: theme.filterGroup.panelsBorderBottom,\n  },\n  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: theme.filterGroup.rightPanelShadow,\n    borderLeft: theme.filterGroup.rightPanelBorderLeft,\n  },\n  leftSidePanel: {\n    display: \"inline-block\",\n    width: `calc(50% - ${theme.spacing(\"sm\")} - ${theme.spacing(\"sm\")} + 8px)`,\n    height: `calc(100% - ${theme.spacing(\"sm\")} - ${theme.spacing(\n      \"sm\"\n    )} + 8px)`,\n    verticalAlign: \"top\",\n    maxHeight: \"calc(500px - 75px)\",\n    minHeight: \"calc(370px - 75px)\",\n    padding: 4,\n    margin: `calc(${theme.spacing(\"sm\")} - 4px)`,\n  },\n  actionBar: {\n    backgroundColor: theme.colors.atmo1,\n    border: theme.filterGroup.actionBarBorder,\n    borderTop: theme.filterGroup.actionBarBorderTop,\n    alignItems: \"center\",\n  },\n  space: {\n    flex: 1,\n  },\n  applyButton: {\n    marginRight: theme.filterGroup.applyButtonMarginRight,\n  },\n};\n"],"names":["styles","panel","maxHeight","minHeight","header","display","justifyContent","height","baseDropdownSelection","padding","theme","spacing","root","width","backgroundColor","colors","atmo1","border","filterGroup","panelsBorder","borderBottom","panelsBorderBottom","rightSidePanel","verticalAlign","overflow","boxShadow","rightPanelShadow","borderLeft","rightPanelBorderLeft","leftSidePanel","margin","actionBar","actionBarBorder","borderTop","actionBarBorderTop","alignItems","space","flex","applyButton","marginRight","applyButtonMarginRight"],"mappings":";;;AAGO,MAAMA,SAUT;AAAA,EACFC,OAAO;AAAA,IACLC,WAAW;AAAA,IACXC,WAAW;AAAA,EACb;AAAA,EACAC,QAAQ;AAAA,IACNC,SAAS;AAAA,IACTC,gBAAgB;AAAA,IAChBC,QAAQ;AAAA,EACV;AAAA,EACAC,uBAAuB;AAAA,IACrBC,SAASC,kBAAMC,QAAQ,CAAC,OAAO,QAAQ,OAAO,KAAK,CAAC;AAAA,EACtD;AAAA,EACAC,MAAM;AAAA,IACJC,OAAO;AAAA,IACPC,iBAAiBJ,YAAAA,MAAMK,OAAOC;AAAAA,IAC9Bd,WAAW;AAAA,IACXC,WAAW;AAAA,IACXc,QAAQP,YAAAA,MAAMQ,YAAYC;AAAAA,IAC1BC,cAAcV,YAAAA,MAAMQ,YAAYG;AAAAA,EAClC;AAAA,EACAC,gBAAgB;AAAA,IACdjB,SAAS;AAAA,IACTQ,OAAO;AAAA,IACPN,QAAQ;AAAA,IACRL,WAAW;AAAA,IACXC,WAAW;AAAA,IACXoB,eAAe;AAAA,IACfC,UAAU;AAAA,IACVC,WAAWf,YAAAA,MAAMQ,YAAYQ;AAAAA,IAC7BC,YAAYjB,YAAAA,MAAMQ,YAAYU;AAAAA,EAChC;AAAA,EACAC,eAAe;AAAA,IACbxB,SAAS;AAAA,IACTQ,OAAQ,cAAaH,YAAMC,MAAAA,QAAQ,IAAI,OAAOD,kBAAMC,QAAQ,IAAI;AAAA,IAChEJ,QAAS,eAAcG,YAAMC,MAAAA,QAAQ,IAAI,OAAOD,kBAAMC,QACpD,IAAI;AAAA,IAENY,eAAe;AAAA,IACfrB,WAAW;AAAA,IACXC,WAAW;AAAA,IACXM,SAAS;AAAA,IACTqB,QAAS,QAAOpB,YAAAA,MAAMC,QAAQ,IAAI;AAAA,EACpC;AAAA,EACAoB,WAAW;AAAA,IACTjB,iBAAiBJ,YAAAA,MAAMK,OAAOC;AAAAA,IAC9BC,QAAQP,YAAAA,MAAMQ,YAAYc;AAAAA,IAC1BC,WAAWvB,YAAAA,MAAMQ,YAAYgB;AAAAA,IAC7BC,YAAY;AAAA,EACd;AAAA,EACAC,OAAO;AAAA,IACLC,MAAM;AAAA,EACR;AAAA,EACAC,aAAa;AAAA,IACXC,aAAa7B,YAAAA,MAAMQ,YAAYsB;AAAAA,EACjC;AACF;;"}

package/dist/cjs/components/FilterGroup/FilterContent/filterContentClasses.cjs

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+const classes = require("../../../utils/classes.cjs");
+const classKeys = ["dropdown", "panel", "baseDropdownSelection", "header", "root", "leftSidePanel", "rightSidePanel", "actionBar", "space"];
+const filterGroupContentClasses = classes.getClasses(classKeys, "HvFilterGroupContent");
+const filterGroupContentClasses$1 = filterGroupContentClasses;
+exports.default = filterGroupContentClasses$1;
+//# sourceMappingURL=filterContentClasses.cjs.map

package/dist/cjs/components/FilterGroup/FilterContent/filterContentClasses.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"filterContentClasses.cjs","sources":["../../../../../src/components/FilterGroup/FilterContent/filterContentClasses.ts"],"sourcesContent":["import { getClasses } from \"@core/utils\";\n\nexport interface HvFilterGroupContentClasses {\n  dropdown?: string;\n  panel?: string;\n  baseDropdownSelection?: string;\n  header?: string;\n  root?: string;\n  leftSidePanel?: string;\n  rightSidePanel?: string;\n  actionBar?: string;\n  space?: string;\n}\n\nconst classKeys: string[] = [\n  \"dropdown\",\n  \"panel\",\n  \"baseDropdownSelection\",\n  \"header\",\n  \"root\",\n  \"leftSidePanel\",\n  \"rightSidePanel\",\n  \"actionBar\",\n  \"space\",\n];\n\nconst filterGroupContentClasses = getClasses<HvFilterGroupContentClasses>(\n  classKeys,\n  \"HvFilterGroupContent\"\n);\n\nexport default filterGroupContentClasses;\n"],"names":["classKeys","filterGroupContentClasses","getClasses"],"mappings":";;;AAcA,MAAMA,YAAsB,CAC1B,YACA,SACA,yBACA,UACA,QACA,iBACA,kBACA,aACA,OAAO;AAGT,MAAMC,4BAA4BC,QAChCF,WAAAA,WACA,sBAAsB;AAGxB,MAAA,8BAAeC;;"}

package/dist/cjs/components/FilterGroup/FilterGroup.cjs

@@ -0,0 +1,116 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const filterGroupClasses = require("./filterGroupClasses.cjs");
+const clsx = require("clsx");
+const FilterGroup_styles = require("./FilterGroup.styles.cjs");
+const FilterGroupContext = require("./FilterGroupContext.cjs");
+const react = require("@emotion/react");
+const jsxRuntime = require("@emotion/react/jsx-runtime");
+const useUniqueId = require("../../hooks/useUniqueId.cjs");
+const FilterContent = require("./FilterContent/FilterContent.cjs");
+const useControlled = require("../../hooks/useControlled.cjs");
+const useLabels = require("../../hooks/useLabels.cjs");
+const FormElement = require("../Forms/FormElement/FormElement.cjs");
+const Label = require("../Forms/Label/Label.cjs");
+const setId = require("../../utils/setId.cjs");
+const InfoMessage = require("../Forms/InfoMessage/InfoMessage.cjs");
+const WarningText = require("../Forms/WarningText/WarningText.cjs");
+const DEFAULT_LABELS = {
+  applyLabel: "Apply",
+  cancelLabel: "Cancel",
+  clearLabel: "Clear Filters",
+  placeholder: "Filters",
+  searchBoxPlaceholder: "Search",
+  selectAll: "All",
+  multiSelectionConjunction: "/"
+};
+const HvFilterGroup = ({
+  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,
+  defaultValue,
+  value,
+  filters,
+  horizontalPlacement = "right",
+  disablePortal = true,
+  escapeWithReference = true,
+  height = 350,
+  filterContentProps,
+  classes,
+  ...others
+}) => {
+  const [validationMessage] = useControlled.useControlled(statusMessage, "Required");
+  const elementId = useUniqueId.default(id, "hvfiltergroup");
+  const labels = useLabels.useLabels(DEFAULT_LABELS, labelsProp);
+  const hasLabel = label != null;
+  const hasDescription = description != null;
+  const canShowError = status !== void 0 || required;
+  return /* @__PURE__ */ jsxRuntime.jsx(react.ClassNames, {
+    children: ({
+      css
+    }) => /* @__PURE__ */ jsxRuntime.jsxs(FormElement.HvFormElement, {
+      id,
+      name,
+      value,
+      status,
+      disabled,
+      required,
+      className: clsx.clsx(className, classes == null ? void 0 : classes.root, filterGroupClasses.default.root),
+      ...others,
+      children: [(hasLabel || hasDescription) && /* @__PURE__ */ jsxRuntime.jsxs("div", {
+        className: clsx.clsx(classes == null ? void 0 : classes.labelContainer, filterGroupClasses.default.labelContainer, css(FilterGroup_styles.styles.labelContainer)),
+        children: [hasLabel && /* @__PURE__ */ jsxRuntime.jsx(Label.HvLabel, {
+          id: setId.setId(elementId, "label"),
+          htmlFor: setId.setId(elementId, "input"),
+          label,
+          className: clsx.clsx(classes == null ? void 0 : classes.label, filterGroupClasses.default.label, css(FilterGroup_styles.styles.label))
+        }), hasDescription && /* @__PURE__ */ jsxRuntime.jsx(InfoMessage.HvInfoMessage, {
+          id: setId.setId(elementId, "description"),
+          className: clsx.clsx(classes == null ? void 0 : classes.description, filterGroupClasses.default.description),
+          children: description
+        })]
+      }), /* @__PURE__ */ jsxRuntime.jsxs(FilterGroupContext.HvFilterGroupProvider, {
+        defaultValue,
+        value,
+        filters,
+        children: [/* @__PURE__ */ jsxRuntime.jsx(FilterContent.HvFilterGroupContent, {
+          id: elementId,
+          disabled,
+          disablePortal,
+          variableWidth: true,
+          placement: horizontalPlacement,
+          escapeWithReference,
+          "aria-label": ariaLabel,
+          "aria-labelledby": ariaLabelledBy,
+          status,
+          onChange,
+          onCancel,
+          onClear,
+          labels,
+          height,
+          ...filterContentProps
+        }), canShowError && /* @__PURE__ */ jsxRuntime.jsx(WarningText.HvWarningText, {
+          id: setId.setId(elementId, "error"),
+          disableBorder: true,
+          className: clsx.clsx(classes == null ? void 0 : classes.error, filterGroupClasses.default.error),
+          children: validationMessage
+        })]
+      })]
+    })
+  });
+};
+exports.HvFilterGroup = HvFilterGroup;
+//# sourceMappingURL=FilterGroup.cjs.map

package/dist/cjs/components/FilterGroup/FilterGroup.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"FilterGroup.cjs","sources":["../../../../src/components/FilterGroup/FilterGroup.tsx"],"sourcesContent":["import {\n  HvFormElement,\n  HvFormElementProps,\n  HvFormStatus,\n  HvInfoMessage,\n  HvLabel,\n  HvWarningText,\n} from \"@core/components\";\nimport filterGroupClasses, { HvFilterGroupClasses } from \"./filterGroupClasses\";\nimport {\n  HvFilterGroupContent,\n  HvFilterGroupContentProps,\n} from \"./FilterContent\";\nimport { clsx } from \"clsx\";\nimport { useControlled, useLabels, useUniqueId } from \"@core/hooks\";\nimport { styles } from \"./FilterGroup.styles\";\nimport { setId } from \"@core/utils\";\nimport { HvFilterGroupProvider } from \"./FilterGroupContext\";\nimport { ClassNames } from \"@emotion/react\";\n\nexport type HvFilterGroupValue = (string | number)[][];\n\nexport interface HvFilterGroupLabels {\n  /** Apply button label. */\n  applyLabel?: string;\n  /** Cancel button label. */\n  cancelLabel?: string;\n  /** Cancel button label. */\n  clearLabel?: string;\n  /** Placeholder label. */\n  placeholder?: string;\n  /** SearchBox placeholder label. */\n  searchBoxPlaceholder?: string;\n  /** Select All placeholder label. */\n  selectAll?: string;\n  /** Multi selection conjunction placeholder label. */\n  multiSelectionConjunction?: string;\n}\n\nexport type HvFilterGroupFilters = {\n  id: string;\n  name: string;\n  data: {\n    id: string | number;\n    name: string;\n  }[];\n}[];\n\nexport type HvFilterGroupHorizontalPlacement = \"left\" | \"right\";\n\nexport interface HvFilterGroupProps\n  extends Omit<\n    HvFormElementProps,\n    \"onChange\" | \"defaultValue\" | \"statusMessage\"\n  > {\n  /** The initial value of the input when in single calendar mode. */\n  filters: HvFilterGroupFilters;\n  /** The form element name. */\n  name?: string;\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?: React.ReactNode;\n  /**  Provide additional descriptive text for the form element. */\n  description?: React.ReactNode;\n  /** Indicates that the form element is disabled. */\n  disabled?: boolean;\n  /** Indicates that user input is required on the form element. */\n  required?: boolean;\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?: HvFormStatus;\n  /**  The error message to show when `status` is \"invalid\". Defaults to \"Required\". */\n  statusMessage?: React.ReactNode;\n  /** The callback fired when the cancel button is clicked. */\n  onCancel?: (event: React.MouseEvent<HTMLButtonElement> | Event) => void;\n  /** The callback fired when the clear filters button is clicked. */\n  onClear?: (event: React.MouseEvent<HTMLButtonElement>) => void;\n  /** The callback fired when the value changes. */\n  onChange?: (\n    event: React.MouseEvent<HTMLButtonElement>,\n    value?: HvFilterGroupValue\n  ) => void;\n  /** An Object containing the various text associated with the input. */\n  labels?: HvFilterGroupLabels;\n  /** The placeholder value when nothing is selected. */\n  placeholder?: string;\n  /** The default value of the filter group. If defined the clear action will reset to it. */\n  defaultValue?: HvFilterGroupValue;\n  /** The value of the filter group. */\n  value?: HvFilterGroupValue;\n  /** The placement where the filter group should be placed according to the input. Options are `left` or `right`. */\n  horizontalPlacement?: HvFilterGroupHorizontalPlacement;\n  /** Disable the portal behavior. The children stay within it's parent DOM hierarchy. */\n  disablePortal?: boolean;\n  /** Sets if the filter container should be out of the screen or stay visible. */\n  escapeWithReference?: boolean;\n  /** The height of the filter panel, between 295 and 425. Defaults to 350 */\n  height?: number | string;\n  /** The filter content props */\n  filterContentProps?: Partial<HvFilterGroupContentProps>;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvFilterGroupClasses;\n}\n\nconst DEFAULT_LABELS: HvFilterGroupLabels = {\n  applyLabel: \"Apply\",\n  cancelLabel: \"Cancel\",\n  clearLabel: \"Clear Filters\",\n  placeholder: \"Filters\",\n  searchBoxPlaceholder: \"Search\",\n  selectAll: \"All\",\n  multiSelectionConjunction: \"/\",\n};\n\n/**\n * This component implements one potential use-case of the Filter Group pattern Design System Specifies.\n * Due to the enormous variety of capabilities required for this, we strongly recommend checking the code of the component and extend it yourself,\n * while we do not provide a better approach for building this component with smaller and more composable parts.\n */\nexport const HvFilterGroup = ({\n  className,\n  id,\n  name,\n  required = false,\n  disabled = false,\n  label,\n  \"aria-label\": ariaLabel,\n  \"aria-labelledby\": ariaLabelledBy,\n  description,\n  \"aria-describedby\": ariaDescribedBy,\n  onChange,\n  onCancel,\n  onClear,\n  status,\n  statusMessage,\n  labels: labelsProp,\n  defaultValue,\n  value,\n  filters,\n  horizontalPlacement = \"right\",\n  disablePortal = true,\n  escapeWithReference = true,\n  height = 350,\n  filterContentProps,\n  classes,\n  ...others\n}: HvFilterGroupProps) => {\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\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    <ClassNames>\n      {({ css }) => (\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, filterGroupClasses.root)}\n          {...others}\n        >\n          {(hasLabel || hasDescription) && (\n            <div\n              className={clsx(\n                classes?.labelContainer,\n                filterGroupClasses.labelContainer,\n                css(styles.labelContainer)\n              )}\n            >\n              {hasLabel && (\n                <HvLabel\n                  id={setId(elementId, \"label\")}\n                  htmlFor={setId(elementId, \"input\")}\n                  label={label}\n                  className={clsx(\n                    classes?.label,\n                    filterGroupClasses.label,\n                    css(styles.label)\n                  )}\n                />\n              )}\n\n              {hasDescription && (\n                <HvInfoMessage\n                  id={setId(elementId, \"description\")}\n                  className={clsx(\n                    classes?.description,\n                    filterGroupClasses.description\n                  )}\n                >\n                  {description}\n                </HvInfoMessage>\n              )}\n            </div>\n          )}\n          <HvFilterGroupProvider\n            defaultValue={defaultValue}\n            value={value}\n            filters={filters}\n          >\n            <HvFilterGroupContent\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\n                id={setId(elementId, \"error\")}\n                disableBorder\n                className={clsx(classes?.error, filterGroupClasses.error)}\n              >\n                {validationMessage}\n              </HvWarningText>\n            )}\n          </HvFilterGroupProvider>\n        </HvFormElement>\n      )}\n    </ClassNames>\n  );\n};\n"],"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","labels","labelsProp","defaultValue","value","filters","horizontalPlacement","disablePortal","escapeWithReference","height","filterContentProps","classes","others","validationMessage","useControlled","elementId","useUniqueId","useLabels","hasLabel","hasDescription","canShowError","undefined","ClassNames","children","css","HvFormElement","clsx","root","filterGroupClasses","labelContainer","styles","_jsx","HvLabel","setId","htmlFor","HvInfoMessage","_jsxs","HvFilterGroupProvider","HvFilterGroupContent","variableWidth","placement","HvWarningText","disableBorder","error"],"mappings":"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"}

package/dist/cjs/components/FilterGroup/FilterGroup.styles.cjs

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const styles = {
+  label: {
+    display: "flex",
+    alignItems: "flex-start"
+  },
+  labelContainer: {
+    display: "flex",
+    alignItems: "flex-start"
+  }
+};
+exports.styles = styles;
+//# sourceMappingURL=FilterGroup.styles.cjs.map

package/dist/cjs/components/FilterGroup/FilterGroup.styles.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"FilterGroup.styles.cjs","sources":["../../../../src/components/FilterGroup/FilterGroup.styles.tsx"],"sourcesContent":["import { CSSInterpolation } from \"@emotion/serialize\";\n\nexport const styles: {\n  label: CSSInterpolation;\n  labelContainer: CSSInterpolation;\n} = {\n  label: {\n    display: \"flex\",\n    alignItems: \"flex-start\",\n  },\n  labelContainer: { display: \"flex\", alignItems: \"flex-start\" },\n};\n"],"names":["styles","label","display","alignItems","labelContainer"],"mappings":";;AAEO,MAAMA,SAGT;AAAA,EACFC,OAAO;AAAA,IACLC,SAAS;AAAA,IACTC,YAAY;AAAA,EACd;AAAA,EACAC,gBAAgB;AAAA,IAAEF,SAAS;AAAA,IAAQC,YAAY;AAAA,EAAa;AAC9D;;"}

package/dist/cjs/components/FilterGroup/FilterGroupContext.cjs

@@ -0,0 +1,69 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const React = require("react");
+const isEqual = require("lodash/isEqual");
+const jsxRuntime = require("@emotion/react/jsx-runtime");
+const useSavedState = require("../../utils/useSavedState.cjs");
+const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
+const isEqual__default = /* @__PURE__ */ _interopDefault(isEqual);
+const HvFilterGroupContext = React.createContext({
+  activeGroup: 0,
+  setActiveGroup: () => {
+  },
+  filterOptions: [],
+  setFilterValues: () => {
+  },
+  rollbackFilters: () => {
+  },
+  clearFilters: () => {
+  },
+  applyFilters: () => {
+  },
+  applyDisabled: false,
+  filterValues: [],
+  appliedFilters: void 0,
+  defaultValue: void 0
+});
+const groups = (filters) => filters.map(() => []);
+const HvFilterGroupProvider = ({
+  defaultValue,
+  value,
+  filters,
+  children
+}) => {
+  const [group, setActiveGroup] = React.useState(0);
+  const [filterValues, setFilterValues, rollbackFilters, appliedFilters] = useSavedState.useSavedState(value || groups(filters));
+  const [applyDisabled, setApplyDisabled] = React.useState(false);
+  React.useEffect(() => {
+    setFilterValues(value, true);
+  }, [value, setFilterValues]);
+  React.useEffect(() => {
+    setApplyDisabled(isEqual__default.default(filterValues, appliedFilters));
+  }, [filterValues, appliedFilters]);
+  const clearFilters = React.useCallback(() => {
+    setFilterValues(defaultValue || groups(filters));
+  }, [filters, setFilterValues, defaultValue]);
+  const applyFilters = React.useCallback(() => {
+    setFilterValues(filterValues, true);
+  }, [filterValues, setFilterValues]);
+  const contextValue = React.useMemo(() => ({
+    activeGroup: group,
+    setActiveGroup,
+    filterOptions: filters,
+    filterValues,
+    setFilterValues,
+    appliedFilters,
+    rollbackFilters,
+    clearFilters,
+    applyFilters,
+    applyDisabled,
+    defaultValue
+  }), [appliedFilters, applyDisabled, applyFilters, clearFilters, filterValues, filters, group, rollbackFilters, setFilterValues, defaultValue]);
+  return /* @__PURE__ */ jsxRuntime.jsx(HvFilterGroupContext.Provider, {
+    value: contextValue,
+    children
+  });
+};
+exports.HvFilterGroupContext = HvFilterGroupContext;
+exports.HvFilterGroupProvider = HvFilterGroupProvider;
+//# sourceMappingURL=FilterGroupContext.cjs.map

package/dist/cjs/components/FilterGroup/FilterGroupContext.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"FilterGroupContext.cjs","sources":["../../../../src/components/FilterGroup/FilterGroupContext.tsx"],"sourcesContent":["import {\n  Dispatch,\n  SetStateAction,\n  createContext,\n  useCallback,\n  useEffect,\n  useMemo,\n  useState,\n} from \"react\";\nimport isEqual from \"lodash/isEqual\";\nimport { useSavedState } from \"@core/utils\";\nimport { HvFilterGroupFilters, HvFilterGroupValue } from \"./FilterGroup\";\n\ninterface HvFilterGroupContextValue {\n  activeGroup: number;\n  setActiveGroup: Dispatch<SetStateAction<number>>;\n  filterOptions: HvFilterGroupFilters;\n  setFilterValues: (value?: HvFilterGroupValue, save?: boolean) => void;\n  rollbackFilters: () => void;\n  clearFilters: () => void;\n  applyFilters: () => void;\n  applyDisabled: boolean;\n  appliedFilters?: HvFilterGroupValue;\n  defaultValue?: HvFilterGroupValue;\n  filterValues?: HvFilterGroupValue;\n}\n\nexport const HvFilterGroupContext = createContext<HvFilterGroupContextValue>({\n  activeGroup: 0,\n  setActiveGroup: () => {},\n  filterOptions: [],\n  setFilterValues: () => {},\n  rollbackFilters: () => {},\n  clearFilters: () => {},\n  applyFilters: () => {},\n  applyDisabled: false,\n  filterValues: [],\n  appliedFilters: undefined,\n  defaultValue: undefined,\n});\n\nconst groups = (filters: HvFilterGroupFilters) => filters.map(() => []);\n\ninterface HvFilterGroupProviderProps {\n  children: React.ReactNode;\n  filters: HvFilterGroupFilters;\n  defaultValue?: HvFilterGroupValue;\n  value?: HvFilterGroupValue;\n}\n\nexport const HvFilterGroupProvider = ({\n  defaultValue,\n  value,\n  filters,\n  children,\n}: HvFilterGroupProviderProps) => {\n  const [group, setActiveGroup] = useState<number>(0);\n  const [filterValues, setFilterValues, rollbackFilters, appliedFilters] =\n    useSavedState<HvFilterGroupValue>(value || groups(filters));\n  const [applyDisabled, setApplyDisabled] = useState<boolean>(false);\n\n  useEffect(() => {\n    setFilterValues(value, true);\n  }, [value, setFilterValues]);\n\n  useEffect(() => {\n    setApplyDisabled(isEqual(filterValues, appliedFilters));\n  }, [filterValues, appliedFilters]);\n\n  const clearFilters = useCallback(() => {\n    setFilterValues(defaultValue || groups(filters));\n  }, [filters, setFilterValues, defaultValue]);\n\n  const applyFilters = useCallback(() => {\n    setFilterValues(filterValues, true);\n  }, [filterValues, setFilterValues]);\n\n  const contextValue: HvFilterGroupContextValue = 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      defaultValue,\n    }),\n    [\n      appliedFilters,\n      applyDisabled,\n      applyFilters,\n      clearFilters,\n      filterValues,\n      filters,\n      group,\n      rollbackFilters,\n      setFilterValues,\n      defaultValue,\n    ]\n  );\n\n  return (\n    <HvFilterGroupContext.Provider value={contextValue}>\n      {children}\n    </HvFilterGroupContext.Provider>\n  );\n};\n"],"names":["HvFilterGroupContext","createContext","activeGroup","setActiveGroup","filterOptions","setFilterValues","rollbackFilters","clearFilters","applyFilters","applyDisabled","filterValues","appliedFilters","undefined","defaultValue","groups","filters","map","HvFilterGroupProvider","value","children","group","useState","useSavedState","setApplyDisabled","useEffect","isEqual","useCallback","contextValue","useMemo","_jsx","Provider"],"mappings":";;;;;;;;AA2BO,MAAMA,uBAAuBC,MAAAA,cAAyC;AAAA,EAC3EC,aAAa;AAAA,EACbC,gBAAgBA,MAAM;AAAA,EAAC;AAAA,EACvBC,eAAe,CAAE;AAAA,EACjBC,iBAAiBA,MAAM;AAAA,EAAC;AAAA,EACxBC,iBAAiBA,MAAM;AAAA,EAAC;AAAA,EACxBC,cAAcA,MAAM;AAAA,EAAC;AAAA,EACrBC,cAAcA,MAAM;AAAA,EAAC;AAAA,EACrBC,eAAe;AAAA,EACfC,cAAc,CAAE;AAAA,EAChBC,gBAAgBC;AAAAA,EAChBC,cAAcD;AAChB,CAAC;AAED,MAAME,SAASA,CAACC,YAAkCA,QAAQC,IAAI,MAAM,CAAE,CAAA;AAS/D,MAAMC,wBAAwBA,CAAC;AAAA,EACpCJ;AAAAA,EACAK;AAAAA,EACAH;AAAAA,EACAI;AAC0B,MAAM;AAChC,QAAM,CAACC,OAAOjB,cAAc,IAAIkB,eAAiB,CAAC;AAC5C,QAAA,CAACX,cAAcL,iBAAiBC,iBAAiBK,cAAc,IACnEW,cAAkCJ,cAAAA,SAASJ,OAAOC,OAAO,CAAC;AAC5D,QAAM,CAACN,eAAec,gBAAgB,IAAIF,eAAkB,KAAK;AAEjEG,QAAAA,UAAU,MAAM;AACdnB,oBAAgBa,OAAO,IAAI;AAAA,EAAA,GAC1B,CAACA,OAAOb,eAAe,CAAC;AAE3BmB,QAAAA,UAAU,MAAM;AACGC,qBAAAA,iBAAAA,QAAQf,cAAcC,cAAc,CAAC;AAAA,EAAA,GACrD,CAACD,cAAcC,cAAc,CAAC;AAE3BJ,QAAAA,eAAemB,MAAAA,YAAY,MAAM;AACrBb,oBAAAA,gBAAgBC,OAAOC,OAAO,CAAC;AAAA,EAC9C,GAAA,CAACA,SAASV,iBAAiBQ,YAAY,CAAC;AAErCL,QAAAA,eAAekB,MAAAA,YAAY,MAAM;AACrCrB,oBAAgBK,cAAc,IAAI;AAAA,EAAA,GACjC,CAACA,cAAcL,eAAe,CAAC;AAE5BsB,QAAAA,eAA0CC,MAAAA,QAC9C,OAAO;AAAA,IACL1B,aAAakB;AAAAA,IACbjB;AAAAA,IACAC,eAAeW;AAAAA,IACfL;AAAAA,IACAL;AAAAA,IACAM;AAAAA,IACAL;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAI;AAAAA,EAEF,IAAA,CACEF,gBACAF,eACAD,cACAD,cACAG,cACAK,SACAK,OACAd,iBACAD,iBACAQ,YAAY,CACb;AAIDgB,SAAAA,2BAAAA,IAAC7B,qBAAqB8B,UAAQ;AAAA,IAACZ,OAAOS;AAAAA,IAAaR;AAAAA,EAAAA,CAEnB;AAEpC;;;"}

package/dist/cjs/components/FilterGroup/LeftPanel/LeftPanel.cjs

@@ -0,0 +1,52 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const React = require("react");
+const FilterGroupContext = require("../FilterGroupContext.cjs");
+const react = require("@emotion/react");
+const LeftPanel_styles = require("./LeftPanel.styles.cjs");
+const jsxRuntime = require("@emotion/react/jsx-runtime");
+const Counter = require("../Counter/Counter.cjs");
+const Panel = require("../../Panel/Panel.cjs");
+const setId = require("../../../utils/setId.cjs");
+const ListContainer = require("../../ListContainer/ListContainer.cjs");
+const wrapperTooltip = require("../../../utils/wrapperTooltip.cjs");
+const ListItem = require("../../ListContainer/ListItem/ListItem.cjs");
+const HvFilterGroupLeftPanel = ({
+  id,
+  className,
+  emptyElement
+}) => {
+  const {
+    filterOptions,
+    activeGroup,
+    setActiveGroup
+  } = React.useContext(FilterGroupContext.HvFilterGroupContext);
+  return /* @__PURE__ */ jsxRuntime.jsx(react.ClassNames, {
+    children: ({
+      css
+    }) => /* @__PURE__ */ jsxRuntime.jsx(Panel.HvPanel, {
+      id: setId.setId(id, "leftPanel"),
+      className,
+      children: filterOptions.length > 0 ? /* @__PURE__ */ jsxRuntime.jsx(ListContainer.HvListContainer, {
+        id: setId.setId(id, "leftPanel-list"),
+        condensed: true,
+        interactive: true,
+        children: filterOptions.map((group, index) => {
+          const ItemText = wrapperTooltip.wrapperTooltip(true, group.name, group.name);
+          return /* @__PURE__ */ jsxRuntime.jsx(ListItem.HvListItem, {
+            id: group.id,
+            className: css(LeftPanel_styles.styles.listItem),
+            onClick: () => setActiveGroup(index),
+            selected: filterOptions[activeGroup].id === group.id,
+            endAdornment: /* @__PURE__ */ jsxRuntime.jsx(Counter.HvFilterGroupCounter, {
+              id: group.id
+            }),
+            children: /* @__PURE__ */ jsxRuntime.jsx(ItemText, {})
+          }, group.name);
+        })
+      }) : emptyElement
+    })
+  });
+};
+exports.HvFilterGroupLeftPanel = HvFilterGroupLeftPanel;
+//# sourceMappingURL=LeftPanel.cjs.map

package/dist/cjs/components/FilterGroup/LeftPanel/LeftPanel.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"LeftPanel.cjs","sources":["../../../../../src/components/FilterGroup/LeftPanel/LeftPanel.tsx"],"sourcesContent":["import { useContext } from \"react\";\nimport { HvFilterGroupContext } from \"../FilterGroupContext\";\nimport { HvListContainer, HvListItem, HvPanel } from \"@core/components\";\nimport { setId, wrapperTooltip } from \"@core/utils\";\nimport { HvFilterGroupCounter } from \"../Counter\";\nimport { ClassNames } from \"@emotion/react\";\nimport { styles } from \"./LeftPanel.styles\";\n\nexport interface HvFilterGroupLeftPanelProps {\n  id?: string;\n  className?: string;\n  emptyElement?: React.ReactNode;\n}\n\nexport const HvFilterGroupLeftPanel = ({\n  id,\n  className,\n  emptyElement,\n}: HvFilterGroupLeftPanelProps) => {\n  const { filterOptions, activeGroup, setActiveGroup } =\n    useContext(HvFilterGroupContext);\n\n  return (\n    <ClassNames>\n      {({ css }) => (\n        <HvPanel id={setId(id, \"leftPanel\")} className={className}>\n          {filterOptions.length > 0 ? (\n            <HvListContainer\n              id={setId(id, \"leftPanel-list\")}\n              condensed\n              interactive\n            >\n              {filterOptions.map((group, index) => {\n                const ItemText = wrapperTooltip(true, group.name, group.name);\n\n                return (\n                  <HvListItem\n                    id={group.id}\n                    key={group.name}\n                    className={css(styles.listItem)}\n                    onClick={() => setActiveGroup(index)}\n                    selected={filterOptions[activeGroup].id === group.id}\n                    endAdornment={<HvFilterGroupCounter id={group.id} />}\n                  >\n                    <ItemText />\n                  </HvListItem>\n                );\n              })}\n            </HvListContainer>\n          ) : (\n            emptyElement\n          )}\n        </HvPanel>\n      )}\n    </ClassNames>\n  );\n};\n"],"names":["HvFilterGroupLeftPanel","id","className","emptyElement","filterOptions","activeGroup","setActiveGroup","useContext","HvFilterGroupContext","ClassNames","children","css","HvPanel","setId","length","HvListContainer","condensed","interactive","map","group","index","ItemText","wrapperTooltip","name","HvListItem","styles","listItem","onClick","selected","endAdornment","HvFilterGroupCounter","_jsx"],"mappings":";;;;;;;;;;;;;AAcO,MAAMA,yBAAyBA,CAAC;AAAA,EACrCC;AAAAA,EACAC;AAAAA,EACAC;AAC2B,MAAM;AAC3B,QAAA;AAAA,IAAEC;AAAAA,IAAeC;AAAAA,IAAaC;AAAAA,EAAAA,IAClCC,MAAAA,WAAWC,mBAAAA,oBAAoB;AAEjC,wCACGC,MAAAA,YAAU;AAAA,IAAAC,UACRA,CAAC;AAAA,MAAEC;AAAAA,IAAAA,qCACDC,MAAAA,SAAO;AAAA,MAACX,IAAIY,MAAAA,MAAMZ,IAAI,WAAW;AAAA,MAAGC;AAAAA,MAAqBQ,UACvDN,cAAcU,SAAS,mCACrBC,cAAAA,iBAAe;AAAA,QACdd,IAAIY,MAAAA,MAAMZ,IAAI,gBAAgB;AAAA,QAC9Be,WAAS;AAAA,QACTC,aAAW;AAAA,QAAAP,UAEVN,cAAcc,IAAI,CAACC,OAAOC,UAAU;AACnC,gBAAMC,WAAWC,eAAAA,eAAe,MAAMH,MAAMI,MAAMJ,MAAMI,IAAI;AAE5D,gDACGC,SAAAA,YAAU;AAAA,YACTvB,IAAIkB,MAAMlB;AAAAA,YAEVC,WAAWS,IAAIc,iBAAAA,OAAOC,QAAQ;AAAA,YAC9BC,SAASA,MAAMrB,eAAec,KAAK;AAAA,YACnCQ,UAAUxB,cAAcC,WAAW,EAAEJ,OAAOkB,MAAMlB;AAAAA,YAClD4B,6CAAeC,8BAAoB;AAAA,cAAC7B,IAAIkB,MAAMlB;AAAAA,YAAAA,CAAO;AAAA,YAAAS,UAErDqB,2BAAAA,IAACV,UAAQ,EAAA;AAAA,UAAA,GANJF,MAAMI,IAAI;AAAA,QAAA,CASpB;AAAA,MAAC,CAAA,IAGJpB;AAAAA,IAAAA,CACD;AAAA,EAAA,CAGM;AAEjB;;"}

package/dist/cjs/components/FilterGroup/LeftPanel/LeftPanel.styles.cjs

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const styles = {
+  listItem: {
+    display: "flex",
+    justifyContent: "space-between"
+  }
+};
+exports.styles = styles;
+//# sourceMappingURL=LeftPanel.styles.cjs.map

package/dist/cjs/components/FilterGroup/LeftPanel/LeftPanel.styles.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"LeftPanel.styles.cjs","sources":["../../../../../src/components/FilterGroup/LeftPanel/LeftPanel.styles.tsx"],"sourcesContent":["import { CSSInterpolation } from \"@emotion/serialize\";\n\nexport const styles: {\n  listItem: CSSInterpolation;\n} = {\n  listItem: {\n    display: \"flex\",\n    justifyContent: \"space-between\",\n  },\n};\n"],"names":["styles","listItem","display","justifyContent"],"mappings":";;AAEO,MAAMA,SAET;AAAA,EACFC,UAAU;AAAA,IACRC,SAAS;AAAA,IACTC,gBAAgB;AAAA,EAClB;AACF;;"}