@hitachivantara/uikit-react-core 5.44.1 → 5.44.3

package/dist/esm/FilterGroup/Counter/Counter.styles.js

@@ -0,0 +1,18 @@
+import { theme } from "@hitachivantara/uikit-styles";
+import { createClasses } from "../../utils/classes.js";
+const name = "HvFilterGroupCounter";
+const { staticClasses, useClasses } = createClasses(name, {
+  root: {
+    lineHeight: "34px",
+    marginRight: 10
+  },
+  partialCounter: {
+    display: "inline-block",
+    fontWeight: theme.fontWeights.normal
+  }
+});
+export {
+  staticClasses,
+  useClasses
+};
+//# sourceMappingURL=Counter.styles.js.map

package/dist/esm/FilterGroup/Counter/Counter.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Counter.styles.js","sources":["../../../../src/FilterGroup/Counter/Counter.styles.tsx"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { createClasses } from \"../../utils/classes\";\n\nconst name = \"HvFilterGroupCounter\";\n\nexport const { staticClasses, useClasses } = createClasses(name, {\n  root: {\n    lineHeight: \"34px\",\n    marginRight: 10,\n  },\n  partialCounter: {\n    display: \"inline-block\",\n    fontWeight: theme.fontWeights.normal,\n  },\n});\n"],"names":[],"mappings":";;AAIA,MAAM,OAAO;AAEN,MAAM,EAAE,eAAe,eAAe,cAAc,MAAM;AAAA,EAC/D,MAAM;AAAA,IACJ,YAAY;AAAA,IACZ,aAAa;AAAA,EACf;AAAA,EACA,gBAAgB;AAAA,IACd,SAAS;AAAA,IACT,YAAY,MAAM,YAAY;AAAA,EAChC;AACF,CAAC;"}

package/dist/esm/FilterGroup/FilterContent/FilterContent.js

@@ -0,0 +1,176 @@
+import { jsxs, Fragment, jsx } from "@emotion/react/jsx-runtime";
+import { forwardRef, useState, useContext, useRef, useMemo } from "react";
+import { Filters } from "@hitachivantara/uikit-react-icons";
+import { useTheme } from "../../hooks/useTheme.js";
+import { setId } from "../../utils/setId.js";
+import { useDefaultProps } from "../../hooks/useDefaultProps.js";
+import { useClasses } from "./FilterContent.styles.js";
+import { staticClasses } from "./FilterContent.styles.js";
+import { HvFilterGroupContext } from "../FilterGroupContext.js";
+import { HvFilterGroupLeftPanel } from "../LeftPanel/LeftPanel.js";
+import { HvFilterGroupRightPanel } from "../RightPanel/RightPanel.js";
+import { HvButton } from "../../Button/Button.js";
+import { HvTypography } from "../../Typography/Typography.js";
+import { HvBaseDropdown } from "../../BaseDropdown/BaseDropdown.js";
+import { HvFilterGroupCounter } from "../Counter/Counter.js";
+import { HvActionBar } from "../../ActionBar/ActionBar.js";
+const HvFilterGroupContent = forwardRef((props, ref) => {
+  const {
+    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: classesProp,
+    ...others
+  } = useDefaultProps("HvFilterGroupContent", props);
+  const { classes } = useClasses(classesProp);
+  const { activeTheme } = useTheme();
+  const [filterGroupOpen, setFilterGroupOpen] = useState(false);
+  const {
+    defaultValue,
+    filterValues,
+    rollbackFilters,
+    clearFilters,
+    applyFilters,
+    applyDisabled
+  } = useContext(HvFilterGroupContext);
+  const focusTarget = useRef(null);
+  const focusOnContainer = () => {
+    focusTarget.current?.focus();
+  };
+  const onApplyHandler = (event) => {
+    applyFilters();
+    onChange?.(event, filterValues);
+    setFilterGroupOpen(false);
+  };
+  const onCancelHandler = (event) => {
+    rollbackFilters();
+    onCancel?.(event);
+    setFilterGroupOpen(false);
+  };
+  const onClearHandler = (event) => {
+    clearFilters();
+    onClear?.(event);
+  };
+  const handleToggle = (event, open) => {
+    if (event === null)
+      return;
+    setFilterGroupOpen(open);
+    if (!open)
+      onCancelHandler?.(event);
+  };
+  const Header = useMemo(
+    () => /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(Filters, {}),
+      /* @__PURE__ */ jsx(HvTypography, { variant: "label", children: labels?.placeholder })
+    ] }),
+    [labels?.placeholder]
+  );
+  return /* @__PURE__ */ jsxs(
+    HvBaseDropdown,
+    {
+      ref,
+      id: setId(id, "dropdown"),
+      role: "combobox",
+      classes: {
+        root: classes.dropdown,
+        panel: classes.panel,
+        selection: classes.baseDropdownSelection,
+        header: classes.header
+      },
+      disabled,
+      disablePortal,
+      variableWidth: true,
+      placement: horizontalPlacement,
+      expanded: filterGroupOpen,
+      onToggle: handleToggle,
+      onClickOutside: onCancelHandler,
+      onContainerCreation: focusOnContainer,
+      placeholder: Header,
+      adornment: /* @__PURE__ */ jsx(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(id, "error") : void 0,
+      "aria-describedby": [description && setId(id, "description"), ariaDescribedBy].join(" ").trim() || void 0,
+      ...others,
+      children: [
+        /* @__PURE__ */ jsx("div", { ref: focusTarget, tabIndex: -1 }),
+        /* @__PURE__ */ jsxs("div", { className: classes.root, style: { height }, children: [
+          /* @__PURE__ */ jsx(
+            HvFilterGroupLeftPanel,
+            {
+              id,
+              className: classes.leftSidePanel,
+              emptyElement: leftEmptyElement
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            HvFilterGroupRightPanel,
+            {
+              id,
+              className: classes.rightSidePanel,
+              emptyElement: rightEmptyElement,
+              labels
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxs(HvActionBar, { className: classes.actionBar, children: [
+          /* @__PURE__ */ jsx(
+            HvButton,
+            {
+              id: setId(id, "clearFilters-button"),
+              disabled: defaultValue ? defaultValue?.flat().length === filterValues?.flat().length : filterValues?.flat().length === 0,
+              variant: "secondaryGhost",
+              onClick: onClearHandler,
+              children: labels?.clearLabel
+            }
+          ),
+          /* @__PURE__ */ jsx("div", { "aria-hidden": "true", className: classes.space, children: " " }),
+          /* @__PURE__ */ jsx(
+            HvButton,
+            {
+              id: setId(id, "apply-button"),
+              disabled: applyDisabled,
+              variant: activeTheme?.filterGroup.applyButtonVariant,
+              onClick: onApplyHandler,
+              className: classes.applyButton,
+              children: labels?.applyLabel
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            HvButton,
+            {
+              id: setId(id, "cancel-button"),
+              variant: activeTheme?.filterGroup.cancelButtonVariant,
+              onClick: onCancelHandler,
+              children: labels?.cancelLabel
+            }
+          )
+        ] })
+      ]
+    }
+  );
+});
+export {
+  HvFilterGroupContent,
+  staticClasses as filterGroupContentClasses
+};
+//# sourceMappingURL=FilterContent.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"FilterContent.js","sources":["../../../../src/FilterGroup/FilterContent/FilterContent.tsx"],"sourcesContent":["import { forwardRef, useContext, useMemo, useRef, useState } from \"react\";\n\nimport { Filters } from \"@hitachivantara/uikit-react-icons\";\n\nimport { useTheme } from \"../../hooks/useTheme\";\nimport { HvActionBar } from \"../../ActionBar\";\nimport { HvBaseDropdown, HvBaseDropdownProps } from \"../../BaseDropdown\";\nimport { HvButton, HvButtonVariant } from \"../../Button\";\nimport { HvFormStatus } from \"../../Forms\";\nimport { HvTypography } from \"../../Typography\";\nimport { ExtractNames } from \"../../utils/classes\";\nimport { setId } from \"../../utils/setId\";\n\nimport { useDefaultProps } from \"../../hooks/useDefaultProps\";\n\nimport {\n  HvFilterGroupLabels,\n  HvFilterGroupValue,\n  HvFilterGroupHorizontalPlacement,\n} from \"../types\";\nimport { staticClasses, useClasses } from \"./FilterContent.styles\";\nimport { HvFilterGroupContext } from \"../FilterGroupContext\";\nimport { HvFilterGroupCounter } from \"../Counter\";\nimport { HvFilterGroupLeftPanel } from \"../LeftPanel\";\nimport { HvFilterGroupRightPanel } from \"../RightPanel\";\n\nexport { staticClasses as filterGroupContentClasses };\n\nexport type HvFilterGroupContentClasses = ExtractNames<typeof useClasses>;\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 = forwardRef<\n  HTMLDivElement,\n  HvFilterGroupContentProps\n>((props, ref) => {\n  const {\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: classesProp,\n    ...others\n  } = useDefaultProps(\"HvFilterGroupContent\", props);\n\n  const { classes } = useClasses(classesProp);\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    <HvBaseDropdown\n      ref={ref}\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={<HvFilterGroupCounter />}\n      popperProps={{\n        modifiers: [{ name: \"preventOverflow\", enabled: escapeWithReference }],\n      }}\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]\n          .join(\" \")\n          .trim() || undefined\n      }\n      {...others}\n    >\n      <div ref={focusTarget} tabIndex={-1} />\n      <div className={classes.root} style={{ height }}>\n        <HvFilterGroupLeftPanel\n          id={id}\n          className={classes.leftSidePanel}\n          emptyElement={leftEmptyElement}\n        />\n        <HvFilterGroupRightPanel\n          id={id}\n          className={classes.rightSidePanel}\n          emptyElement={rightEmptyElement}\n          labels={labels}\n        />\n      </div>\n      <HvActionBar className={classes.actionBar}>\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 aria-hidden=\"true\" className={classes.space}>\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={classes.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});\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAmDO,MAAM,uBAAuB,WAGlC,CAAC,OAAO,QAAQ;AACV,QAAA;AAAA,IACJ;AAAA,IACA;AAAA,IACA,WAAW;AAAA,IACX,cAAc;AAAA,IACd,mBAAmB;AAAA,IACnB;AAAA,IACA,oBAAoB;AAAA,IACpB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,sBAAsB;AAAA,IACtB,gBAAgB;AAAA,IAChB,sBAAsB;AAAA,IACtB;AAAA,IACA;AAAA,IACA;AAAA,IACA,SAAS;AAAA,IACT,GAAG;AAAA,EAAA,IACD,gBAAgB,wBAAwB,KAAK;AAEjD,QAAM,EAAE,QAAA,IAAY,WAAW,WAAW;AACpC,QAAA,EAAE,gBAAgB;AAExB,QAAM,CAAC,iBAAiB,kBAAkB,IAAI,SAAkB,KAAK;AAE/D,QAAA;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EAAA,IACE,WAAW,oBAAoB;AAE7B,QAAA,cAAc,OAAuB,IAAI;AAE/C,QAAM,mBAAmB,MAAM;AAC7B,gBAAY,SAAS;EAAM;AAGvB,QAAA,iBAAiB,CAAC,UAA+C;AACxD;AACb,eAAW,OAAO,YAAY;AAC9B,uBAAmB,KAAK;AAAA,EAAA;AAGpB,QAAA,kBAAkB,CACtB,UACG;AACa;AAChB,eAAW,KAAK;AAChB,uBAAmB,KAAK;AAAA,EAAA;AAGpB,QAAA,iBAAiB,CAAC,UAA+C;AACxD;AACb,cAAU,KAAK;AAAA,EAAA;AAGX,QAAA,eAAe,CAAC,OAAc,SAAkB;AAMpD,QAAI,UAAU;AAAM;AACpB,uBAAmB,IAAI;AACvB,QAAI,CAAC;AAAM,wBAAkB,KAAK;AAAA,EAAA;AAGpC,QAAM,SAAS;AAAA,IACb,MAEI,qBAAA,UAAA,EAAA,UAAA;AAAA,MAAA,oBAAC,SAAQ,EAAA;AAAA,MACR,oBAAA,cAAA,EAAa,SAAQ,SAAS,kBAAQ,aAAY;AAAA,IAAA,GACrD;AAAA,IAEF,CAAC,QAAQ,WAAW;AAAA,EAAA;AAIpB,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACA,IAAI,MAAM,IAAI,UAAU;AAAA,MACxB,MAAK;AAAA,MACL,SAAS;AAAA,QACP,MAAM,QAAQ;AAAA,QACd,OAAO,QAAQ;AAAA,QACf,WAAW,QAAQ;AAAA,QACnB,QAAQ,QAAQ;AAAA,MAClB;AAAA,MACA;AAAA,MACA;AAAA,MACA,eAAa;AAAA,MACb,WAAW;AAAA,MACX,UAAU;AAAA,MACV,UAAU;AAAA,MACV,gBAAgB;AAAA,MAChB,qBAAqB;AAAA,MACrB,aAAa;AAAA,MACb,+BAAY,sBAAqB,EAAA;AAAA,MACjC,aAAa;AAAA,QACX,WAAW,CAAC,EAAE,MAAM,mBAAmB,SAAS,qBAAqB;AAAA,MACvE;AAAA,MACA,iBAAc;AAAA,MACd,cAAY;AAAA,MACZ,mBAAiB;AAAA,MACjB,gBAAc,WAAW,YAAY,OAAO;AAAA,MAC5C,qBAAmB,WAAW,YAAY,MAAM,IAAI,OAAO,IAAI;AAAA,MAC/D,oBACE,CAAC,eAAe,MAAM,IAAI,aAAa,GAAG,eAAe,EACtD,KAAK,GAAG,EACR,UAAU;AAAA,MAEd,GAAG;AAAA,MAEJ,UAAA;AAAA,QAAA,oBAAC,OAAI,EAAA,KAAK,aAAa,UAAU,IAAI;AAAA,QACrC,qBAAC,SAAI,WAAW,QAAQ,MAAM,OAAO,EAAE,OACrC,GAAA,UAAA;AAAA,UAAA;AAAA,YAAC;AAAA,YAAA;AAAA,cACC;AAAA,cACA,WAAW,QAAQ;AAAA,cACnB,cAAc;AAAA,YAAA;AAAA,UAChB;AAAA,UACA;AAAA,YAAC;AAAA,YAAA;AAAA,cACC;AAAA,cACA,WAAW,QAAQ;AAAA,cACnB,cAAc;AAAA,cACd;AAAA,YAAA;AAAA,UACF;AAAA,QAAA,GACF;AAAA,QACC,qBAAA,aAAA,EAAY,WAAW,QAAQ,WAC9B,UAAA;AAAA,UAAA;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,IAAI,MAAM,IAAI,qBAAqB;AAAA,cACnC,UACE,eACI,cAAc,KAAA,EAAO,WAAW,cAAc,KAAA,EAAO,SACrD,cAAc,OAAO,WAAW;AAAA,cAEtC,SAAQ;AAAA,cACR,SAAS;AAAA,cAER,UAAQ,QAAA;AAAA,YAAA;AAAA,UACX;AAAA,8BACC,OAAI,EAAA,eAAY,QAAO,WAAW,QAAQ,OAAO,UAElD,KAAA;AAAA,UACA;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,IAAI,MAAM,IAAI,cAAc;AAAA,cAC5B,UAAU;AAAA,cACV,SACE,aAAa,YAAY;AAAA,cAE3B,SAAS;AAAA,cACT,WAAW,QAAQ;AAAA,cAElB,UAAQ,QAAA;AAAA,YAAA;AAAA,UACX;AAAA,UACA;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,IAAI,MAAM,IAAI,eAAe;AAAA,cAC7B,SACE,aAAa,YAAY;AAAA,cAE3B,SAAS;AAAA,cAER,UAAQ,QAAA;AAAA,YAAA;AAAA,UACX;AAAA,QAAA,GACF;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGN,CAAC;"}

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

@@ -0,0 +1,56 @@
+import { theme } from "@hitachivantara/uikit-styles";
+import { createClasses } from "../../utils/classes.js";
+const name = "HvFilterGroupContent";
+const { staticClasses, useClasses } = createClasses(name, {
+  dropdown: {},
+  panel: {
+    maxHeight: 500,
+    minHeight: 370
+  },
+  header: {
+    display: "flex",
+    justifyContent: "space-between",
+    height: 32
+  },
+  baseDropdownSelection: {
+    padding: theme.spacing("0px", "30px", "0px", "0px")
+  },
+  root: {
+    width: 640,
+    maxHeight: "calc(500px - 75px)",
+    minHeight: "calc(370px - 75px)"
+  },
+  rightSidePanel: {
+    display: "inline-block",
+    width: "50%",
+    height: "100%",
+    maxHeight: "calc(500px - 75px)",
+    minHeight: "calc(370px - 75px)",
+    verticalAlign: "top",
+    overflow: "visible",
+    boxShadow: "none",
+    borderLeft: `1px solid ${theme.colors.atmo3}`
+  },
+  leftSidePanel: {
+    display: "inline-block",
+    width: `calc(50% - ${theme.space.sm} - ${theme.space.sm} + 8px)`,
+    height: `calc(100% - ${theme.space.sm} - ${theme.space.sm} + 8px)`,
+    verticalAlign: "top",
+    maxHeight: "calc(500px - 75px)",
+    minHeight: "calc(370px - 75px)",
+    padding: 4,
+    margin: `calc(${theme.spacing("sm")} - 4px)`
+  },
+  actionBar: {},
+  space: {
+    flex: 1
+  },
+  applyButton: {
+    marginRight: "8px"
+  }
+});
+export {
+  staticClasses,
+  useClasses
+};
+//# sourceMappingURL=FilterContent.styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"FilterContent.styles.js","sources":["../../../../src/FilterGroup/FilterContent/FilterContent.styles.tsx"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { createClasses } from \"../../utils/classes\";\n\nconst name = \"HvFilterGroupContent\";\n\nexport const { staticClasses, useClasses } = createClasses(name, {\n  dropdown: {},\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    maxHeight: \"calc(500px - 75px)\",\n    minHeight: \"calc(370px - 75px)\",\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: \"none\",\n    borderLeft: `1px solid ${theme.colors.atmo3}`,\n  },\n  leftSidePanel: {\n    display: \"inline-block\",\n    width: `calc(50% - ${theme.space.sm} - ${theme.space.sm} + 8px)`,\n    height: `calc(100% - ${theme.space.sm} - ${theme.space.sm} + 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  space: {\n    flex: 1,\n  },\n  applyButton: {\n    marginRight: \"8px\",\n  },\n});\n"],"names":[],"mappings":";;AAIA,MAAM,OAAO;AAEN,MAAM,EAAE,eAAe,eAAe,cAAc,MAAM;AAAA,EAC/D,UAAU,CAAC;AAAA,EACX,OAAO;AAAA,IACL,WAAW;AAAA,IACX,WAAW;AAAA,EACb;AAAA,EACA,QAAQ;AAAA,IACN,SAAS;AAAA,IACT,gBAAgB;AAAA,IAChB,QAAQ;AAAA,EACV;AAAA,EACA,uBAAuB;AAAA,IACrB,SAAS,MAAM,QAAQ,OAAO,QAAQ,OAAO,KAAK;AAAA,EACpD;AAAA,EACA,MAAM;AAAA,IACJ,OAAO;AAAA,IACP,WAAW;AAAA,IACX,WAAW;AAAA,EACb;AAAA,EACA,gBAAgB;AAAA,IACd,SAAS;AAAA,IACT,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,WAAW;AAAA,IACX,WAAW;AAAA,IACX,eAAe;AAAA,IACf,UAAU;AAAA,IACV,WAAW;AAAA,IACX,YAAY,aAAa,MAAM,OAAO,KAAK;AAAA,EAC7C;AAAA,EACA,eAAe;AAAA,IACb,SAAS;AAAA,IACT,OAAO,cAAc,MAAM,MAAM,EAAE,MAAM,MAAM,MAAM,EAAE;AAAA,IACvD,QAAQ,eAAe,MAAM,MAAM,EAAE,MAAM,MAAM,MAAM,EAAE;AAAA,IACzD,eAAe;AAAA,IACf,WAAW;AAAA,IACX,WAAW;AAAA,IACX,SAAS;AAAA,IACT,QAAQ,QAAQ,MAAM,QAAQ,IAAI,CAAC;AAAA,EACrC;AAAA,EACA,WAAW,CAAC;AAAA,EACZ,OAAO;AAAA,IACL,MAAM;AAAA,EACR;AAAA,EACA,aAAa;AAAA,IACX,aAAa;AAAA,EACf;AACF,CAAC;"}

package/dist/esm/FilterGroup/FilterGroup.js

@@ -0,0 +1,142 @@
+import { jsxs, jsx } from "@emotion/react/jsx-runtime";
+import { forwardRef } from "react";
+import { useLabels } from "../hooks/useLabels.js";
+import { useUniqueId } from "../hooks/useUniqueId.js";
+import { useControlled } from "../hooks/useControlled.js";
+import { setId } from "../utils/setId.js";
+import { useDefaultProps } from "../hooks/useDefaultProps.js";
+import { useClasses } from "./FilterGroup.styles.js";
+import { staticClasses } from "./FilterGroup.styles.js";
+import { HvFilterGroupProvider } from "./FilterGroupContext.js";
+import { HvFilterGroupContent } from "./FilterContent/FilterContent.js";
+import { HvFormElement } from "../Forms/FormElement/FormElement.js";
+import { HvLabel } from "../Forms/Label/Label.js";
+import { HvInfoMessage } from "../Forms/InfoMessage/InfoMessage.js";
+import { HvWarningText } from "../Forms/WarningText/WarningText.js";
+const DEFAULT_LABELS = {
+  applyLabel: "Apply",
+  cancelLabel: "Cancel",
+  clearLabel: "Clear Filters",
+  placeholder: "Filters",
+  searchBoxPlaceholder: "Search",
+  selectAll: "All",
+  multiSelectionConjunction: "/"
+};
+const HvFilterGroup = forwardRef(
+  (props, ref) => {
+    const {
+      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: classesProp,
+      ...others
+    } = useDefaultProps("HvFilterGroup", props);
+    const { classes, cx } = useClasses(classesProp);
+    const [validationMessage] = useControlled(statusMessage, "Required");
+    const elementId = useUniqueId(id, "hvfiltergroup");
+    const labels = useLabels(DEFAULT_LABELS, labelsProp);
+    const hasLabel = label != null;
+    const hasDescription = description != null;
+    const canShowError = status !== void 0 || required;
+    return /* @__PURE__ */ jsxs(
+      HvFormElement,
+      {
+        id,
+        name,
+        value,
+        status,
+        disabled,
+        required,
+        className: cx(classes.root, className),
+        ...others,
+        children: [
+          (hasLabel || hasDescription) && /* @__PURE__ */ jsxs("div", { className: classes.labelContainer, children: [
+            hasLabel && /* @__PURE__ */ jsx(
+              HvLabel,
+              {
+                id: setId(elementId, "label"),
+                htmlFor: setId(elementId, "input"),
+                label,
+                className: classes.label
+              }
+            ),
+            hasDescription && /* @__PURE__ */ jsx(
+              HvInfoMessage,
+              {
+                id: setId(elementId, "description"),
+                className: classes.description,
+                children: description
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxs(
+            HvFilterGroupProvider,
+            {
+              defaultValue,
+              value,
+              filters,
+              children: [
+                /* @__PURE__ */ jsx(
+                  HvFilterGroupContent,
+                  {
+                    ref,
+                    id: elementId,
+                    disabled,
+                    disablePortal,
+                    variableWidth: true,
+                    placement: horizontalPlacement,
+                    escapeWithReference,
+                    "aria-label": ariaLabel,
+                    "aria-labelledby": ariaLabelledBy,
+                    status,
+                    onChange,
+                    onCancel,
+                    onClear,
+                    labels,
+                    height,
+                    ...filterContentProps
+                  }
+                ),
+                canShowError && /* @__PURE__ */ jsx(
+                  HvWarningText,
+                  {
+                    id: setId(elementId, "error"),
+                    disableBorder: true,
+                    className: classes.error,
+                    children: validationMessage
+                  }
+                )
+              ]
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+export {
+  HvFilterGroup,
+  staticClasses as filterGroupClasses
+};
+//# sourceMappingURL=FilterGroup.js.map

package/dist/esm/FilterGroup/FilterGroup.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FilterGroup.js","sources":["../../../src/FilterGroup/FilterGroup.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\n\nimport {\n  HvFormElement,\n  HvFormElementProps,\n  HvFormStatus,\n  HvInfoMessage,\n  HvLabel,\n  HvWarningText,\n} from \"../Forms\";\nimport { useLabels } from \"../hooks/useLabels\";\nimport { useUniqueId } from \"../hooks/useUniqueId\";\nimport { useControlled } from \"../hooks/useControlled\";\nimport { ExtractNames } from \"../utils/classes\";\nimport { setId } from \"../utils/setId\";\nimport { useDefaultProps } from \"../hooks/useDefaultProps\";\n\nimport {\n  HvFilterGroupContent,\n  HvFilterGroupContentProps,\n} from \"./FilterContent\";\nimport { staticClasses, useClasses } from \"./FilterGroup.styles\";\nimport { HvFilterGroupProvider } from \"./FilterGroupContext\";\nimport {\n  HvFilterGroupFilters,\n  HvFilterGroupHorizontalPlacement,\n  HvFilterGroupLabels,\n  HvFilterGroupValue,\n} from \"./types\";\n\nexport { staticClasses as filterGroupClasses };\n\nexport type HvFilterGroupClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvFilterGroupProps\n  extends Omit<\n    HvFormElementProps,\n    \"classes\" | \"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 = forwardRef<HTMLDivElement, HvFilterGroupProps>(\n  (props, ref) => {\n    const {\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: classesProp,\n      ...others\n    } = useDefaultProps(\"HvFilterGroup\", props);\n\n    const { classes, cx } = useClasses(classesProp);\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      <HvFormElement\n        id={id}\n        name={name}\n        value={value}\n        status={status}\n        disabled={disabled}\n        required={required}\n        className={cx(classes.root, className)}\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\n                id={setId(elementId, \"description\")}\n                className={classes.description}\n              >\n                {description}\n              </HvInfoMessage>\n            )}\n          </div>\n        )}\n        <HvFilterGroupProvider\n          defaultValue={defaultValue}\n          value={value}\n          filters={filters}\n        >\n          <HvFilterGroupContent\n            ref={ref}\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={classes.error}\n            >\n              {validationMessage}\n            </HvWarningText>\n          )}\n        </HvFilterGroupProvider>\n      </HvFormElement>\n    );\n  }\n);\n"],"names":[],"mappings":";;;;;;;;;;;;;;;AAkGA,MAAM,iBAAsC;AAAA,EAC1C,YAAY;AAAA,EACZ,aAAa;AAAA,EACb,YAAY;AAAA,EACZ,aAAa;AAAA,EACb,sBAAsB;AAAA,EACtB,WAAW;AAAA,EACX,2BAA2B;AAC7B;AAOO,MAAM,gBAAgB;AAAA,EAC3B,CAAC,OAAO,QAAQ;AACR,UAAA;AAAA,MACJ;AAAA,MACA;AAAA,MACA;AAAA,MACA,WAAW;AAAA,MACX,WAAW;AAAA,MACX;AAAA,MACA,cAAc;AAAA,MACd,mBAAmB;AAAA,MACnB;AAAA,MACA,oBAAoB;AAAA,MACpB;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,QAAQ;AAAA,MACR;AAAA,MACA;AAAA,MACA;AAAA,MACA,sBAAsB;AAAA,MACtB,gBAAgB;AAAA,MAChB,sBAAsB;AAAA,MACtB,SAAS;AAAA,MACT;AAAA,MACA,SAAS;AAAA,MACT,GAAG;AAAA,IAAA,IACD,gBAAgB,iBAAiB,KAAK;AAE1C,UAAM,EAAE,SAAS,GAAG,IAAI,WAAW,WAAW;AAC9C,UAAM,CAAC,iBAAiB,IAAI,cAAc,eAAe,UAAU;AAE7D,UAAA,YAAY,YAAY,IAAI,eAAe;AAE3C,UAAA,SAAS,UAAU,gBAAgB,UAAU;AAEnD,UAAM,WAAW,SAAS;AAE1B,UAAM,iBAAiB,eAAe;AAIhC,UAAA,eAAe,WAAW,UAAa;AAG3C,WAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA,WAAW,GAAG,QAAQ,MAAM,SAAS;AAAA,QACpC,GAAG;AAAA,QAEF,UAAA;AAAA,WAAA,YAAY,mBACZ,qBAAC,OAAI,EAAA,WAAW,QAAQ,gBACrB,UAAA;AAAA,YACC,YAAA;AAAA,cAAC;AAAA,cAAA;AAAA,gBACC,IAAI,MAAM,WAAW,OAAO;AAAA,gBAC5B,SAAS,MAAM,WAAW,OAAO;AAAA,gBACjC;AAAA,gBACA,WAAW,QAAQ;AAAA,cAAA;AAAA,YACrB;AAAA,YAGD,kBACC;AAAA,cAAC;AAAA,cAAA;AAAA,gBACC,IAAI,MAAM,WAAW,aAAa;AAAA,gBAClC,WAAW,QAAQ;AAAA,gBAElB,UAAA;AAAA,cAAA;AAAA,YACH;AAAA,UAAA,GAEJ;AAAA,UAEF;AAAA,YAAC;AAAA,YAAA;AAAA,cACC;AAAA,cACA;AAAA,cACA;AAAA,cAEA,UAAA;AAAA,gBAAA;AAAA,kBAAC;AAAA,kBAAA;AAAA,oBACC;AAAA,oBACA,IAAI;AAAA,oBACJ;AAAA,oBACA;AAAA,oBACA,eAAa;AAAA,oBACb,WAAW;AAAA,oBACX;AAAA,oBACA,cAAY;AAAA,oBACZ,mBAAiB;AAAA,oBACjB;AAAA,oBACA;AAAA,oBACA;AAAA,oBACA;AAAA,oBACA;AAAA,oBACA;AAAA,oBACC,GAAG;AAAA,kBAAA;AAAA,gBACN;AAAA,gBACC,gBACC;AAAA,kBAAC;AAAA,kBAAA;AAAA,oBACC,IAAI,MAAM,WAAW,OAAO;AAAA,oBAC5B,eAAa;AAAA,oBACb,WAAW,QAAQ;AAAA,oBAElB,UAAA;AAAA,kBAAA;AAAA,gBACH;AAAA,cAAA;AAAA,YAAA;AAAA,UAEJ;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAGN;AACF;"}

package/dist/esm/FilterGroup/FilterGroup.styles.js

@@ -0,0 +1,16 @@
+import { createClasses } from "../utils/classes.js";
+const { staticClasses, useClasses } = createClasses("HvFilterGroup", {
+  root: {},
+  label: {
+    display: "flex",
+    alignItems: "flex-start"
+  },
+  labelContainer: { display: "flex", alignItems: "flex-start" },
+  description: {},
+  error: {}
+});
+export {
+  staticClasses,
+  useClasses
+};
+//# sourceMappingURL=FilterGroup.styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"FilterGroup.styles.js","sources":["../../../src/FilterGroup/FilterGroup.styles.tsx"],"sourcesContent":["import { createClasses } from \"../utils/classes\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvFilterGroup\", {\n  root: {},\n  label: {\n    display: \"flex\",\n    alignItems: \"flex-start\",\n  },\n  labelContainer: { display: \"flex\", alignItems: \"flex-start\" },\n  description: {},\n  error: {},\n});\n"],"names":[],"mappings":";AAEO,MAAM,EAAE,eAAe,eAAe,cAAc,iBAAiB;AAAA,EAC1E,MAAM,CAAC;AAAA,EACP,OAAO;AAAA,IACL,SAAS;AAAA,IACT,YAAY;AAAA,EACd;AAAA,EACA,gBAAgB,EAAE,SAAS,QAAQ,YAAY,aAAa;AAAA,EAC5D,aAAa,CAAC;AAAA,EACd,OAAO,CAAC;AACV,CAAC;"}

package/dist/esm/FilterGroup/FilterGroupContext.js

@@ -0,0 +1,78 @@
+import { jsx } from "@emotion/react/jsx-runtime";
+import { createContext, useState, useEffect, useCallback, useMemo } from "react";
+import isEqual from "lodash/isEqual";
+import { useDefaultProps } from "../hooks/useDefaultProps.js";
+import { useSavedState } from "../utils/useSavedState.js";
+const HvFilterGroupContext = 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 = (props) => {
+  const { defaultValue, value, filters, children } = useDefaultProps(
+    "HvFilterGroupProvider",
+    props
+  );
+  const [group, setActiveGroup] = useState(0);
+  const [filterValues, setFilterValues, rollbackFilters, appliedFilters] = useSavedState(value || groups(filters));
+  const [applyDisabled, setApplyDisabled] = useState(false);
+  useEffect(() => {
+    setFilterValues(value, true);
+  }, [value, setFilterValues]);
+  useEffect(() => {
+    setApplyDisabled(isEqual(filterValues, appliedFilters));
+  }, [filterValues, appliedFilters]);
+  const clearFilters = useCallback(() => {
+    setFilterValues(defaultValue || groups(filters));
+  }, [filters, setFilterValues, defaultValue]);
+  const applyFilters = useCallback(() => {
+    setFilterValues(filterValues, true);
+  }, [filterValues, setFilterValues]);
+  const contextValue = 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__ */ jsx(HvFilterGroupContext.Provider, { value: contextValue, children });
+};
+export {
+  HvFilterGroupContext,
+  HvFilterGroupProvider
+};
+//# sourceMappingURL=FilterGroupContext.js.map

package/dist/esm/FilterGroup/FilterGroupContext.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FilterGroupContext.js","sources":["../../../src/FilterGroup/FilterGroupContext.tsx"],"sourcesContent":["import {\n  Dispatch,\n  SetStateAction,\n  createContext,\n  useCallback,\n  useEffect,\n  useMemo,\n  useState,\n} from \"react\";\n\nimport isEqual from \"lodash/isEqual\";\n\nimport { useDefaultProps } from \"../hooks/useDefaultProps\";\n\nimport { useSavedState } from \"../utils/useSavedState\";\n\nimport { HvFilterGroupFilters, HvFilterGroupValue } from \"./types\";\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 = (props: HvFilterGroupProviderProps) => {\n  const { defaultValue, value, filters, children } = useDefaultProps(\n    \"HvFilterGroupProvider\",\n    props\n  );\n\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":[],"mappings":";;;;;AAgCO,MAAM,uBAAuB,cAAyC;AAAA,EAC3E,aAAa;AAAA,EACb,gBAAgB,MAAM;AAAA,EAAC;AAAA,EACvB,eAAe,CAAC;AAAA,EAChB,iBAAiB,MAAM;AAAA,EAAC;AAAA,EACxB,iBAAiB,MAAM;AAAA,EAAC;AAAA,EACxB,cAAc,MAAM;AAAA,EAAC;AAAA,EACrB,cAAc,MAAM;AAAA,EAAC;AAAA,EACrB,eAAe;AAAA,EACf,cAAc,CAAC;AAAA,EACf,gBAAgB;AAAA,EAChB,cAAc;AAChB,CAAC;AAED,MAAM,SAAS,CAAC,YAAkC,QAAQ,IAAI,MAAM,CAAE,CAAA;AASzD,MAAA,wBAAwB,CAAC,UAAsC;AAC1E,QAAM,EAAE,cAAc,OAAO,SAAS,SAAa,IAAA;AAAA,IACjD;AAAA,IACA;AAAA,EAAA;AAGF,QAAM,CAAC,OAAO,cAAc,IAAI,SAAiB,CAAC;AAC5C,QAAA,CAAC,cAAc,iBAAiB,iBAAiB,cAAc,IACnE,cAAkC,SAAS,OAAO,OAAO,CAAC;AAC5D,QAAM,CAAC,eAAe,gBAAgB,IAAI,SAAkB,KAAK;AAEjE,YAAU,MAAM;AACd,oBAAgB,OAAO,IAAI;AAAA,EAAA,GAC1B,CAAC,OAAO,eAAe,CAAC;AAE3B,YAAU,MAAM;AACG,qBAAA,QAAQ,cAAc,cAAc,CAAC;AAAA,EAAA,GACrD,CAAC,cAAc,cAAc,CAAC;AAE3B,QAAA,eAAe,YAAY,MAAM;AACrB,oBAAA,gBAAgB,OAAO,OAAO,CAAC;AAAA,EAC9C,GAAA,CAAC,SAAS,iBAAiB,YAAY,CAAC;AAErC,QAAA,eAAe,YAAY,MAAM;AACrC,oBAAgB,cAAc,IAAI;AAAA,EAAA,GACjC,CAAC,cAAc,eAAe,CAAC;AAElC,QAAM,eAA0C;AAAA,IAC9C,OAAO;AAAA,MACL,aAAa;AAAA,MACb;AAAA,MACA,eAAe;AAAA,MACf;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IAAA;AAAA,IAEF;AAAA,MACE;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,EAAA;AAGF,6BACG,qBAAqB,UAArB,EAA8B,OAAO,cACnC,SACH,CAAA;AAEJ;"}

package/dist/esm/FilterGroup/LeftPanel/LeftPanel.js

@@ -0,0 +1,40 @@
+import { jsx } from "@emotion/react/jsx-runtime";
+import { useContext } from "react";
+import { setId } from "../../utils/setId.js";
+import { wrapperTooltip } from "../../utils/wrapperTooltip.js";
+import { HvFilterGroupContext } from "../FilterGroupContext.js";
+import { useClasses } from "./LeftPanel.styles.js";
+import { staticClasses } from "./LeftPanel.styles.js";
+import { HvFilterGroupCounter } from "../Counter/Counter.js";
+import { HvPanel } from "../../Panel/Panel.js";
+import { HvListContainer } from "../../ListContainer/ListContainer.js";
+import { HvListItem } from "../../ListContainer/ListItem/ListItem.js";
+const HvFilterGroupLeftPanel = ({
+  id,
+  className,
+  emptyElement,
+  classes: classesProp
+}) => {
+  const { classes, cx } = useClasses(classesProp);
+  const { filterOptions, activeGroup, setActiveGroup } = useContext(HvFilterGroupContext);
+  return /* @__PURE__ */ jsx(HvPanel, { id: setId(id, "leftPanel"), className, children: filterOptions.length > 0 ? /* @__PURE__ */ jsx(HvListContainer, { id: setId(id, "leftPanel-list"), condensed: true, interactive: true, children: filterOptions.map((group, index) => {
+    const ItemText = wrapperTooltip(true, group.name, group.name);
+    return /* @__PURE__ */ jsx(
+      HvListItem,
+      {
+        id: group.id,
+        className: cx(classes.listItem),
+        onClick: () => setActiveGroup(index),
+        selected: filterOptions[activeGroup].id === group.id,
+        endAdornment: /* @__PURE__ */ jsx(HvFilterGroupCounter, { id: group.id }),
+        children: /* @__PURE__ */ jsx(ItemText, {})
+      },
+      group.name
+    );
+  }) }) : emptyElement });
+};
+export {
+  HvFilterGroupLeftPanel,
+  staticClasses as filterGroupLeftPanelClasses
+};
+//# sourceMappingURL=LeftPanel.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"LeftPanel.js","sources":["../../../../src/FilterGroup/LeftPanel/LeftPanel.tsx"],"sourcesContent":["import { useContext } from \"react\";\n\nimport { HvListContainer, HvListItem } from \"../../ListContainer\";\nimport { HvPanel } from \"../../Panel\";\nimport { ExtractNames } from \"../../utils/classes\";\nimport { setId } from \"../../utils/setId\";\nimport { wrapperTooltip } from \"../../utils/wrapperTooltip\";\n\nimport { HvFilterGroupCounter } from \"../Counter\";\nimport { HvFilterGroupContext } from \"../FilterGroupContext\";\nimport { staticClasses, useClasses } from \"./LeftPanel.styles\";\n\nexport { staticClasses as filterGroupLeftPanelClasses };\n\nexport type HvFilterGroupLeftPanelClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvFilterGroupLeftPanelProps {\n  id?: string;\n  className?: string;\n  emptyElement?: React.ReactNode;\n  classes?: HvFilterGroupLeftPanelClasses;\n}\n\nexport const HvFilterGroupLeftPanel = ({\n  id,\n  className,\n  emptyElement,\n  classes: classesProp,\n}: HvFilterGroupLeftPanelProps) => {\n  const { classes, cx } = useClasses(classesProp);\n  const { filterOptions, activeGroup, setActiveGroup } =\n    useContext(HvFilterGroupContext);\n\n  return (\n    <HvPanel id={setId(id, \"leftPanel\")} className={className}>\n      {filterOptions.length > 0 ? (\n        <HvListContainer id={setId(id, \"leftPanel-list\")} condensed interactive>\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={cx(classes.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};\n"],"names":[],"mappings":";;;;;;;;;;;AAuBO,MAAM,yBAAyB,CAAC;AAAA,EACrC;AAAA,EACA;AAAA,EACA;AAAA,EACA,SAAS;AACX,MAAmC;AACjC,QAAM,EAAE,SAAS,GAAG,IAAI,WAAW,WAAW;AAC9C,QAAM,EAAE,eAAe,aAAa,eAAe,IACjD,WAAW,oBAAoB;AAG/B,SAAA,oBAAC,SAAQ,EAAA,IAAI,MAAM,IAAI,WAAW,GAAG,WAClC,UAAA,cAAc,SAAS,IACrB,oBAAA,iBAAA,EAAgB,IAAI,MAAM,IAAI,gBAAgB,GAAG,WAAS,MAAC,aAAW,MACpE,UAAc,cAAA,IAAI,CAAC,OAAO,UAAU;AACnC,UAAM,WAAW,eAAe,MAAM,MAAM,MAAM,MAAM,IAAI;AAG1D,WAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,IAAI,MAAM;AAAA,QAEV,WAAW,GAAG,QAAQ,QAAQ;AAAA,QAC9B,SAAS,MAAM,eAAe,KAAK;AAAA,QACnC,UAAU,cAAc,WAAW,EAAE,OAAO,MAAM;AAAA,QAClD,cAAc,oBAAC,sBAAqB,EAAA,IAAI,MAAM,IAAI;AAAA,QAElD,8BAAC,UAAS,EAAA;AAAA,MAAA;AAAA,MANL,MAAM;AAAA,IAAA;AAAA,EAOb,CAEH,EACH,CAAA,IAEA,aAEJ,CAAA;AAEJ;"}

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

@@ -0,0 +1,13 @@
+import { createClasses } from "../../utils/classes.js";
+const name = "HvFilterGroupLeftPanel";
+const { staticClasses, useClasses } = createClasses(name, {
+  listItem: {
+    display: "flex",
+    justifyContent: "space-between"
+  }
+});
+export {
+  staticClasses,
+  useClasses
+};
+//# sourceMappingURL=LeftPanel.styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"LeftPanel.styles.js","sources":["../../../../src/FilterGroup/LeftPanel/LeftPanel.styles.tsx"],"sourcesContent":["import { createClasses } from \"../../utils/classes\";\n\nconst name = \"HvFilterGroupLeftPanel\";\n\nexport const { staticClasses, useClasses } = createClasses(name, {\n  listItem: {\n    display: \"flex\",\n    justifyContent: \"space-between\",\n  },\n});\n"],"names":[],"mappings":";AAEA,MAAM,OAAO;AAEN,MAAM,EAAE,eAAe,eAAe,cAAc,MAAM;AAAA,EAC/D,UAAU;AAAA,IACR,SAAS;AAAA,IACT,gBAAgB;AAAA,EAClB;AACF,CAAC;"}