@hitachivantara/uikit-react-core 5.41.1 → 5.42.1

package/dist/esm/Pagination/Pagination.styles.mjs

@@ -0,0 +1,124 @@
+import { theme } from "@hitachivantara/uikit-styles";
+import { createClasses } from "../utils/classes.mjs";
+import { staticClasses as staticClasses$1 } from "../BaseDropdown/BaseDropdown.styles.mjs";
+import "../BaseDropdown/BaseDropdown.mjs";
+import { staticClasses as staticClasses$2 } from "../Input/Input.styles.mjs";
+const hoverColor = theme.colors.atmo3;
+const { staticClasses, useClasses } = createClasses("HvPagination", {
+  /** Styles applied to the component root class. */
+  root: {
+    position: "relative",
+    zIndex: 1,
+    display: "flex",
+    justifyContent: "center",
+    alignItems: "stretch",
+    flexWrap: "wrap",
+    marginTop: theme.space.sm,
+    [`& $pageSizeInput`]: {
+      ...theme.typography.caption2,
+      "&:focus": {
+        padding: 0
+      }
+    },
+    [`& $pageSizeInputContainer`]: {
+      width: 24,
+      minWidth: 24,
+      maxWidth: theme.spacing(8)
+    },
+    [`&& $pageSizeInputRoot`]: {
+      backgroundColor: "transparent",
+      height: "24px",
+      "&:focus, &:focus-within, &:hover": {
+        backgroundColor: hoverColor
+      }
+    }
+  },
+  /** Styles applied to the page size selector container. */
+  pageSizeOptions: {
+    display: "flex",
+    position: "absolute",
+    height: 24,
+    top: "50%",
+    transform: "translateY(-50%)",
+    left: "0"
+  },
+  pageSizeHeader: {
+    height: 24,
+    display: "flex",
+    alignItems: "center",
+    [`& .${staticClasses$1.arrowContainer}`]: {
+      marginTop: -2
+    }
+  },
+  /** Styles applied to the element that holds the labels for the page size selector */
+  pageSizeTextContainer: {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    height: "24px",
+    padding: "8px 0",
+    ...theme.typography.caption2
+  },
+  totalPagesTextContainer: {
+    ...theme.typography.caption2
+  },
+  /** Styles applied to the page size selector dropdown element. */
+  pageSizeOptionsSelect: {
+    display: "inline-block",
+    margin: `0px ${theme.space.xs}`,
+    width: "auto",
+    ...theme.typography.caption2
+  },
+  /** Styles applied to the page navigation container. */
+  pageNavigator: {
+    display: "flex",
+    alignItems: "center",
+    height: "32px",
+    gap: 8
+  },
+  /** Styles applied to each navigation `HvButton` icon container. */
+  iconContainer: {
+    padding: 0
+  },
+  /** Styles applied to each navigation icon. */
+  icon: {},
+  /** Styles applied to the central page information container. */
+  pageInfo: {
+    display: "inline-block",
+    whiteSpace: "nowrap",
+    height: "32px",
+    lineHeight: "32px"
+  },
+  /** Styles applied to the page selector input container. */
+  pageJump: {
+    display: "inline-block",
+    marginRight: `4px`,
+    [`& .${staticClasses$2.inputRoot}`]: {
+      [`& $pageSizeInput`]: {
+        paddingLeft: `4px`,
+        paddingRight: `4px`,
+        margin: 0,
+        textAlign: "center",
+        borderRadius: theme.radii.base,
+        MozAppearance: "textfield",
+        "&:focus": {
+          backgroundColor: hoverColor
+        },
+        "&:hover": {
+          cursor: "pointer"
+        }
+      }
+    }
+  },
+  /** Styles passed down to the page selector Input component as `input`. */
+  pageSizeInput: {},
+  /** Styles passed down to the page selector Input root. */
+  pageSizeInputRoot: {},
+  /** Styles passed down to the page selector Input component as `container`. */
+  pageSizeInputContainer: {}
+});
+export {
+  staticClasses,
+  useClasses
+};
+//# sourceMappingURL=Pagination.styles.mjs.map

package/dist/esm/Pagination/Pagination.styles.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Pagination.styles.mjs","sources":["../../../src/Pagination/Pagination.styles.tsx"],"sourcesContent":["import { CSSProperties } from \"react\";\n\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { inputClasses } from \"../Input\";\nimport { createClasses } from \"../utils/classes\";\nimport { baseDropdownClasses } from \"../BaseDropdown\";\n\nconst hoverColor = theme.colors.atmo3;\n\nexport const { staticClasses, useClasses } = createClasses(\"HvPagination\", {\n  /** Styles applied to the component root class. */\n  root: {\n    position: \"relative\",\n    zIndex: 1,\n    display: \"flex\",\n    justifyContent: \"center\",\n    alignItems: \"stretch\",\n    flexWrap: \"wrap\",\n    marginTop: theme.space.sm,\n    [`& $pageSizeInput`]: {\n      ...(theme.typography.caption2 as CSSProperties),\n      \"&:focus\": {\n        padding: 0,\n      },\n    },\n    [`& $pageSizeInputContainer`]: {\n      width: 24,\n      minWidth: 24,\n      maxWidth: theme.spacing(8),\n    },\n    [`&& $pageSizeInputRoot`]: {\n      backgroundColor: \"transparent\",\n      height: \"24px\",\n      \"&:focus, &:focus-within, &:hover\": {\n        backgroundColor: hoverColor,\n      },\n    },\n  },\n  /** Styles applied to the page size selector container. */\n  pageSizeOptions: {\n    display: \"flex\",\n    position: \"absolute\",\n    height: 24,\n    top: \"50%\",\n    transform: \"translateY(-50%)\",\n    left: \"0\",\n  },\n  pageSizeHeader: {\n    height: 24,\n    display: \"flex\",\n    alignItems: \"center\",\n    [`& .${baseDropdownClasses.arrowContainer}`]: {\n      marginTop: -2,\n    },\n  },\n  /** Styles applied to the element that holds the labels for the page size selector */\n  pageSizeTextContainer: {\n    display: \"flex\",\n    alignItems: \"center\",\n    justifyContent: \"center\",\n    height: \"24px\",\n    padding: \"8px 0\",\n    ...(theme.typography.caption2 as CSSProperties),\n  },\n  totalPagesTextContainer: {\n    ...(theme.typography.caption2 as CSSProperties),\n  },\n  /** Styles applied to the page size selector dropdown element. */\n  pageSizeOptionsSelect: {\n    display: \"inline-block\",\n    margin: `0px ${theme.space.xs}`,\n    width: \"auto\",\n\n    ...(theme.typography.caption2 as CSSProperties),\n  },\n  /** Styles applied to the page navigation container. */\n  pageNavigator: {\n    display: \"flex\",\n    alignItems: \"center\",\n    height: \"32px\",\n    gap: 8,\n  },\n  /** Styles applied to each navigation `HvButton` icon container. */\n  iconContainer: {\n    padding: 0,\n  },\n  /** Styles applied to each navigation icon. */\n  icon: {},\n  /** Styles applied to the central page information container. */\n  pageInfo: {\n    display: \"inline-block\",\n    whiteSpace: \"nowrap\",\n    height: \"32px\",\n    lineHeight: \"32px\",\n  },\n  /** Styles applied to the page selector input container. */\n  pageJump: {\n    display: \"inline-block\",\n    marginRight: `4px`,\n    [`& .${inputClasses.inputRoot}`]: {\n      [`& $pageSizeInput`]: {\n        paddingLeft: `4px`,\n        paddingRight: `4px`,\n        margin: 0,\n        textAlign: \"center\",\n        borderRadius: theme.radii.base,\n        MozAppearance: \"textfield\",\n        \"&:focus\": {\n          backgroundColor: hoverColor,\n        },\n        \"&:hover\": {\n          cursor: \"pointer\",\n        },\n      },\n    },\n  },\n  /** Styles passed down to the page selector Input component as `input`. */\n  pageSizeInput: {},\n  /** Styles passed down to the page selector Input root. */\n  pageSizeInputRoot: {},\n  /** Styles passed down to the page selector Input component as `container`. */\n  pageSizeInputContainer: {},\n});\n"],"names":["baseDropdownClasses","inputClasses"],"mappings":";;;;;AAQA,MAAM,aAAa,MAAM,OAAO;AAEzB,MAAM,EAAE,eAAe,eAAe,cAAc,gBAAgB;AAAA;AAAA,EAEzE,MAAM;AAAA,IACJ,UAAU;AAAA,IACV,QAAQ;AAAA,IACR,SAAS;AAAA,IACT,gBAAgB;AAAA,IAChB,YAAY;AAAA,IACZ,UAAU;AAAA,IACV,WAAW,MAAM,MAAM;AAAA,IACvB,CAAC,kBAAkB,GAAG;AAAA,MACpB,GAAI,MAAM,WAAW;AAAA,MACrB,WAAW;AAAA,QACT,SAAS;AAAA,MACX;AAAA,IACF;AAAA,IACA,CAAC,2BAA2B,GAAG;AAAA,MAC7B,OAAO;AAAA,MACP,UAAU;AAAA,MACV,UAAU,MAAM,QAAQ,CAAC;AAAA,IAC3B;AAAA,IACA,CAAC,uBAAuB,GAAG;AAAA,MACzB,iBAAiB;AAAA,MACjB,QAAQ;AAAA,MACR,oCAAoC;AAAA,QAClC,iBAAiB;AAAA,MACnB;AAAA,IACF;AAAA,EACF;AAAA;AAAA,EAEA,iBAAiB;AAAA,IACf,SAAS;AAAA,IACT,UAAU;AAAA,IACV,QAAQ;AAAA,IACR,KAAK;AAAA,IACL,WAAW;AAAA,IACX,MAAM;AAAA,EACR;AAAA,EACA,gBAAgB;AAAA,IACd,QAAQ;AAAA,IACR,SAAS;AAAA,IACT,YAAY;AAAA,IACZ,CAAC,MAAMA,gBAAoB,cAAc,EAAE,GAAG;AAAA,MAC5C,WAAW;AAAA,IACb;AAAA,EACF;AAAA;AAAA,EAEA,uBAAuB;AAAA,IACrB,SAAS;AAAA,IACT,YAAY;AAAA,IACZ,gBAAgB;AAAA,IAChB,QAAQ;AAAA,IACR,SAAS;AAAA,IACT,GAAI,MAAM,WAAW;AAAA,EACvB;AAAA,EACA,yBAAyB;AAAA,IACvB,GAAI,MAAM,WAAW;AAAA,EACvB;AAAA;AAAA,EAEA,uBAAuB;AAAA,IACrB,SAAS;AAAA,IACT,QAAQ,OAAO,MAAM,MAAM,EAAE;AAAA,IAC7B,OAAO;AAAA,IAEP,GAAI,MAAM,WAAW;AAAA,EACvB;AAAA;AAAA,EAEA,eAAe;AAAA,IACb,SAAS;AAAA,IACT,YAAY;AAAA,IACZ,QAAQ;AAAA,IACR,KAAK;AAAA,EACP;AAAA;AAAA,EAEA,eAAe;AAAA,IACb,SAAS;AAAA,EACX;AAAA;AAAA,EAEA,MAAM,CAAC;AAAA;AAAA,EAEP,UAAU;AAAA,IACR,SAAS;AAAA,IACT,YAAY;AAAA,IACZ,QAAQ;AAAA,IACR,YAAY;AAAA,EACd;AAAA;AAAA,EAEA,UAAU;AAAA,IACR,SAAS;AAAA,IACT,aAAa;AAAA,IACb,CAAC,MAAMC,gBAAa,SAAS,EAAE,GAAG;AAAA,MAChC,CAAC,kBAAkB,GAAG;AAAA,QACpB,aAAa;AAAA,QACb,cAAc;AAAA,QACd,QAAQ;AAAA,QACR,WAAW;AAAA,QACX,cAAc,MAAM,MAAM;AAAA,QAC1B,eAAe;AAAA,QACf,WAAW;AAAA,UACT,iBAAiB;AAAA,QACnB;AAAA,QACA,WAAW;AAAA,UACT,QAAQ;AAAA,QACV;AAAA,MACF;AAAA,IACF;AAAA,EACF;AAAA;AAAA,EAEA,eAAe,CAAC;AAAA;AAAA,EAEhB,mBAAmB,CAAC;AAAA;AAAA,EAEpB,wBAAwB,CAAC;AAC3B,CAAC;"}

package/dist/esm/Pagination/Select.mjs

@@ -0,0 +1,64 @@
+import { jsx } from "@emotion/react/jsx-runtime";
+import { useState } from "react";
+import { useDefaultProps } from "../hooks/useDefaultProps.mjs";
+import { useClasses } from "./Select.styles.mjs";
+import { HvListItem } from "../ListContainer/ListItem/ListItem.mjs";
+import { HvBaseDropdown } from "../BaseDropdown/BaseDropdown.mjs";
+import { HvPanel } from "../Panel/Panel.mjs";
+import { HvSelectionList } from "../SelectionList/SelectionList.mjs";
+const Option = ({ ...props }) => /* @__PURE__ */ jsx(HvListItem, { ...props });
+const HvSelect = (props) => {
+  const {
+    className,
+    classes: classesProp,
+    onChange,
+    disabled,
+    value,
+    children,
+    ...others
+  } = useDefaultProps("HvPaginationSelect", props);
+  const { classes } = useClasses(classesProp);
+  const [open, setOpen] = useState(false);
+  const handleSelect = (evt, val) => {
+    onChange?.(evt, val);
+    setOpen(false);
+  };
+  const handleToggle = (_evt, s) => {
+    setOpen(s);
+  };
+  const setFocusToContent = (containerRef) => {
+    const listItems = containerRef != null ? [...containerRef.getElementsByTagName("li")] : [];
+    listItems.every((listItem) => {
+      if (listItem.tabIndex >= 0) {
+        listItem.focus();
+        return false;
+      }
+      return true;
+    });
+  };
+  return /* @__PURE__ */ jsx(
+    HvBaseDropdown,
+    {
+      className,
+      classes: {
+        selection: classes.selection,
+        header: classes.header,
+        headerOpen: classes.headerOpen
+      },
+      expanded: open,
+      onToggle: handleToggle,
+      onContainerCreation: setFocusToContent,
+      placeholder: value,
+      disabled,
+      variableWidth: true,
+      ...others,
+      children: /* @__PURE__ */ jsx(HvPanel, { children: /* @__PURE__ */ jsx(HvSelectionList, { value, onChange: handleSelect, children }) })
+    }
+  );
+};
+const HvSelect$1 = HvSelect;
+export {
+  Option,
+  HvSelect$1 as default
+};
+//# sourceMappingURL=Select.mjs.map

package/dist/esm/Pagination/Select.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Select.mjs","sources":["../../../src/Pagination/Select.tsx"],"sourcesContent":["import { SyntheticEvent, useState } from \"react\";\n\nimport { HvBaseDropdown, HvBaseDropdownProps } from \"../BaseDropdown\";\nimport { HvSelectionList, HvSelectionListProps } from \"../SelectionList\";\nimport { HvPanel } from \"../Panel\";\nimport { HvListItem, HvListItemProps } from \"../ListContainer\";\n\nimport { useDefaultProps } from \"../hooks/useDefaultProps\";\n\nimport { useClasses } from \"./Select.styles\";\n\nexport const Option = ({ ...props }: Partial<HvListItemProps>) => (\n  <HvListItem {...props} />\n);\n\nexport interface HvPaginationSelectProps\n  extends Omit<HvBaseDropdownProps, \"onChange\"> {\n  onChange: (event: React.SyntheticEvent, val: number) => void;\n  value: number;\n}\n\nconst HvSelect = (props: HvPaginationSelectProps) => {\n  const {\n    className,\n    classes: classesProp,\n    onChange,\n    disabled,\n    value,\n    children,\n    ...others\n  } = useDefaultProps(\"HvPaginationSelect\", props);\n  const { classes } = useClasses(classesProp);\n  const [open, setOpen] = useState(false);\n\n  const handleSelect: HvSelectionListProps[\"onChange\"] = (evt, val) => {\n    onChange?.(evt, val);\n    setOpen(false);\n  };\n\n  const handleToggle: HvBaseDropdownProps[\"onToggle\"] = (_evt, s) => {\n    setOpen(s);\n  };\n\n  const setFocusToContent: HvBaseDropdownProps[\"onContainerCreation\"] = (\n    containerRef\n  ) => {\n    const listItems =\n      containerRef != null ? [...containerRef.getElementsByTagName(\"li\")] : [];\n    listItems.every((listItem) => {\n      if (listItem.tabIndex >= 0) {\n        listItem.focus();\n        return false;\n      }\n      return true;\n    });\n  };\n\n  return (\n    <HvBaseDropdown\n      className={className}\n      classes={{\n        selection: classes.selection,\n        header: classes.header,\n        headerOpen: classes.headerOpen,\n      }}\n      expanded={open}\n      onToggle={handleToggle}\n      onContainerCreation={setFocusToContent}\n      placeholder={value}\n      disabled={disabled}\n      variableWidth\n      {...others}\n    >\n      <HvPanel>\n        <HvSelectionList value={value} onChange={handleSelect}>\n          {children}\n        </HvSelectionList>\n      </HvPanel>\n    </HvBaseDropdown>\n  );\n};\n\nexport default HvSelect;\n"],"names":[],"mappings":";;;;;;;;AAWa,MAAA,SAAS,CAAC,EAAE,GAAG,MAC1B,MAAA,oBAAC,YAAY,EAAA,GAAG,OAAO;AASzB,MAAM,WAAW,CAAC,UAAmC;AAC7C,QAAA;AAAA,IACJ;AAAA,IACA,SAAS;AAAA,IACT;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EAAA,IACD,gBAAgB,sBAAsB,KAAK;AAC/C,QAAM,EAAE,QAAA,IAAY,WAAW,WAAW;AAC1C,QAAM,CAAC,MAAM,OAAO,IAAI,SAAS,KAAK;AAEhC,QAAA,eAAiD,CAAC,KAAK,QAAQ;AACnE,eAAW,KAAK,GAAG;AACnB,YAAQ,KAAK;AAAA,EAAA;AAGT,QAAA,eAAgD,CAAC,MAAM,MAAM;AACjE,YAAQ,CAAC;AAAA,EAAA;AAGL,QAAA,oBAAgE,CACpE,iBACG;AACG,UAAA,YACJ,gBAAgB,OAAO,CAAC,GAAG,aAAa,qBAAqB,IAAI,CAAC,IAAI;AAC9D,cAAA,MAAM,CAAC,aAAa;AACxB,UAAA,SAAS,YAAY,GAAG;AAC1B,iBAAS,MAAM;AACR,eAAA;AAAA,MACT;AACO,aAAA;AAAA,IAAA,CACR;AAAA,EAAA;AAID,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACA,SAAS;AAAA,QACP,WAAW,QAAQ;AAAA,QACnB,QAAQ,QAAQ;AAAA,QAChB,YAAY,QAAQ;AAAA,MACtB;AAAA,MACA,UAAU;AAAA,MACV,UAAU;AAAA,MACV,qBAAqB;AAAA,MACrB,aAAa;AAAA,MACb;AAAA,MACA,eAAa;AAAA,MACZ,GAAG;AAAA,MAEJ,UAAA,oBAAC,WACC,UAAC,oBAAA,iBAAA,EAAgB,OAAc,UAAU,cACtC,UACH,EACF,CAAA;AAAA,IAAA;AAAA,EAAA;AAGN;AAEA,MAAA,aAAe;"}

package/dist/esm/Pagination/Select.styles.mjs

@@ -0,0 +1,21 @@
+import { theme } from "@hitachivantara/uikit-styles";
+import { createClasses } from "../utils/classes.mjs";
+const { useClasses } = createClasses("HvPaginationSelect", {
+  header: {
+    backgroundColor: "transparent",
+    borderColor: theme.colors.secondary_80,
+    "&:hover": {
+      borderColor: theme.colors.secondary_80
+    }
+  },
+  selection: {
+    padding: theme.spacing(0, "md", 0, "xs")
+  },
+  headerOpen: {
+    backgroundColor: theme.colors.atmo1
+  }
+});
+export {
+  useClasses
+};
+//# sourceMappingURL=Select.styles.mjs.map

package/dist/esm/Pagination/Select.styles.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Select.styles.mjs","sources":["../../../src/Pagination/Select.styles.tsx"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { createClasses } from \"../utils/classes\";\n\nexport const { useClasses } = createClasses(\"HvPaginationSelect\", {\n  header: {\n    backgroundColor: \"transparent\",\n    borderColor: theme.colors.secondary_80,\n    \"&:hover\": {\n      borderColor: theme.colors.secondary_80,\n    },\n  },\n  selection: {\n    padding: theme.spacing(0, \"md\", 0, \"xs\"),\n  },\n  headerOpen: {\n    backgroundColor: theme.colors.atmo1,\n  },\n});\n"],"names":[],"mappings":";;AAIO,MAAM,EAAE,WAAA,IAAe,cAAc,sBAAsB;AAAA,EAChE,QAAQ;AAAA,IACN,iBAAiB;AAAA,IACjB,aAAa,MAAM,OAAO;AAAA,IAC1B,WAAW;AAAA,MACT,aAAa,MAAM,OAAO;AAAA,IAC5B;AAAA,EACF;AAAA,EACA,WAAW;AAAA,IACT,SAAS,MAAM,QAAQ,GAAG,MAAM,GAAG,IAAI;AAAA,EACzC;AAAA,EACA,YAAY;AAAA,IACV,iBAAiB,MAAM,OAAO;AAAA,EAChC;AACF,CAAC;"}

package/dist/esm/Pagination/utils.mjs

@@ -0,0 +1,17 @@
+import { useState, useCallback } from "react";
+const setColor = (condition) => condition ? "secondary_60" : void 0;
+const getSafePage = (inPage, page, pages) => Number.isNaN(inPage) ? page : Math.min(Math.max(inPage, 0), pages - 1);
+const usePageInput = (initialPage) => {
+  const [page, setPage] = useState(initialPage + 1);
+  const handleChange = useCallback(
+    (evt, newPage) => setPage(newPage),
+    []
+  );
+  return [page, handleChange];
+};
+export {
+  getSafePage,
+  setColor,
+  usePageInput
+};
+//# sourceMappingURL=utils.mjs.map

package/dist/esm/Pagination/utils.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.mjs","sources":["../../../src/Pagination/utils.ts"],"sourcesContent":["import { useCallback, useState } from \"react\";\n\nexport const setColor = (condition: boolean): string | undefined =>\n  condition ? \"secondary_60\" : undefined;\n\nexport const getSafePage = (\n  inPage: number,\n  page: number,\n  pages: number\n): number =>\n  Number.isNaN(inPage) ? page : Math.min(Math.max(inPage, 0), pages - 1);\n\nexport const usePageInput = (initialPage: number) => {\n  const [page, setPage] = useState<number>(initialPage + 1);\n\n  const handleChange = useCallback(\n    (evt: any, newPage: number) => setPage(newPage),\n    []\n  );\n\n  return [page, handleChange] as const;\n};\n"],"names":[],"mappings":";AAEO,MAAM,WAAW,CAAC,cACvB,YAAY,iBAAiB;AAExB,MAAM,cAAc,CACzB,QACA,MACA,UAEA,OAAO,MAAM,MAAM,IAAI,OAAO,KAAK,IAAI,KAAK,IAAI,QAAQ,CAAC,GAAG,QAAQ,CAAC;AAE1D,MAAA,eAAe,CAAC,gBAAwB;AACnD,QAAM,CAAC,MAAM,OAAO,IAAI,SAAiB,cAAc,CAAC;AAExD,QAAM,eAAe;AAAA,IACnB,CAAC,KAAU,YAAoB,QAAQ,OAAO;AAAA,IAC9C,CAAC;AAAA,EAAA;AAGI,SAAA,CAAC,MAAM,YAAY;AAC5B;"}

package/dist/esm/Panel/Panel.mjs

@@ -0,0 +1,20 @@
+import { jsx } from "@emotion/react/jsx-runtime";
+import { useDefaultProps } from "../hooks/useDefaultProps.mjs";
+import { useClasses } from "./Panel.styles.mjs";
+import { staticClasses } from "./Panel.styles.mjs";
+const HvPanel = (props) => {
+  const {
+    id,
+    className,
+    classes: classesProp,
+    children,
+    ...others
+  } = useDefaultProps("HvPanel", props);
+  const { classes, cx } = useClasses(classesProp);
+  return /* @__PURE__ */ jsx("div", { id, className: cx(classes.root, className), ...others, children });
+};
+export {
+  HvPanel,
+  staticClasses as panelClasses
+};
+//# sourceMappingURL=Panel.mjs.map

package/dist/esm/Panel/Panel.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Panel.mjs","sources":["../../../src/Panel/Panel.tsx"],"sourcesContent":["import { useDefaultProps } from \"../hooks/useDefaultProps\";\n\nimport { HvBaseProps } from \"../types/generic\";\n\nimport { ExtractNames } from \"../utils/classes\";\n\nimport { staticClasses, useClasses } from \"./Panel.styles\";\n\nexport { staticClasses as panelClasses };\n\nexport type HvPanelClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvPanelProps extends HvBaseProps {\n  /** A Jss Object used to override or extend the styles applied. */\n  classes?: HvPanelClasses;\n}\n\n/**\n * A panel is a container used in a variety of patterns (e.g. dropdown, filter group, details section).\n * It can be horizontal or vertical and its size is defined by its content and how it relates to surrounding patterns.\n * Regardless of its content, a panel look and feel should be consistent.\n */\nexport const HvPanel = (props: HvPanelProps) => {\n  const {\n    id,\n    className,\n    classes: classesProp,\n    children,\n    ...others\n  } = useDefaultProps(\"HvPanel\", props);\n  const { classes, cx } = useClasses(classesProp);\n\n  return (\n    <div id={id} className={cx(classes.root, className)} {...others}>\n      {children}\n    </div>\n  );\n};\n"],"names":[],"mappings":";;;;AAsBa,MAAA,UAAU,CAAC,UAAwB;AACxC,QAAA;AAAA,IACJ;AAAA,IACA;AAAA,IACA,SAAS;AAAA,IACT;AAAA,IACA,GAAG;AAAA,EAAA,IACD,gBAAgB,WAAW,KAAK;AACpC,QAAM,EAAE,SAAS,GAAG,IAAI,WAAW,WAAW;AAG5C,SAAA,oBAAC,OAAI,EAAA,IAAQ,WAAW,GAAG,QAAQ,MAAM,SAAS,GAAI,GAAG,QACtD,SACH,CAAA;AAEJ;"}

package/dist/esm/Panel/Panel.styles.mjs

@@ -0,0 +1,15 @@
+import { theme } from "@hitachivantara/uikit-styles";
+import { createClasses } from "../utils/classes.mjs";
+const { useClasses, staticClasses } = createClasses("HvPanel", {
+  root: {
+    position: "relative",
+    padding: theme.space.sm,
+    backgroundColor: theme.colors.atmo1,
+    overflow: "auto"
+  }
+});
+export {
+  staticClasses,
+  useClasses
+};
+//# sourceMappingURL=Panel.styles.mjs.map

package/dist/esm/Panel/Panel.styles.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Panel.styles.mjs","sources":["../../../src/Panel/Panel.styles.tsx"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { createClasses } from \"../utils/classes\";\n\nexport const { useClasses, staticClasses } = createClasses(\"HvPanel\", {\n  root: {\n    position: \"relative\",\n    padding: theme.space.sm,\n    backgroundColor: theme.colors.atmo1,\n    overflow: \"auto\",\n  },\n});\n"],"names":[],"mappings":";;AAIO,MAAM,EAAE,YAAY,kBAAkB,cAAc,WAAW;AAAA,EACpE,MAAM;AAAA,IACJ,UAAU;AAAA,IACV,SAAS,MAAM,MAAM;AAAA,IACrB,iBAAiB,MAAM,OAAO;AAAA,IAC9B,UAAU;AAAA,EACZ;AACF,CAAC;"}

package/dist/esm/ProgressBar/ProgressBar.mjs

@@ -0,0 +1,57 @@
+import { jsx, jsxs } from "@emotion/react/jsx-runtime";
+import clamp from "lodash/clamp";
+import { useDefaultProps } from "../hooks/useDefaultProps.mjs";
+import { useClasses } from "./ProgressBar.styles.mjs";
+import { staticClasses } from "./ProgressBar.styles.mjs";
+import { HvTypography } from "../Typography/Typography.mjs";
+const HvProgressBar = (props) => {
+  const {
+    className,
+    classes: classesProp,
+    value = 0,
+    status = "inProgress",
+    labelProps,
+    hideLabel,
+    ...others
+  } = useDefaultProps("HvProgressBar", props);
+  const { classes, cx } = useClasses(classesProp);
+  const clampedValue = clamp(value, 0, 100);
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cx(classes.root, classes.progress, className),
+      role: "progressbar",
+      "aria-valuemin": 0,
+      "aria-valuemax": 100,
+      "aria-valuenow": clampedValue,
+      ...others,
+      children: /* @__PURE__ */ jsxs("div", { className: classes.progressContainer, children: [
+        !hideLabel && /* @__PURE__ */ jsx(
+          HvTypography,
+          {
+            className: classes.progressBarLabel,
+            variant: "caption2",
+            style: { width: `${clampedValue}%` },
+            ...labelProps,
+            children: `${clampedValue}%`
+          }
+        ),
+        /* @__PURE__ */ jsx("div", { className: classes.progressBarContainer, children: /* @__PURE__ */ jsx(
+          "div",
+          {
+            style: { width: `${clampedValue}%` },
+            className: cx(classes.progressBar, {
+              [classes.progressDone]: status === "completed",
+              [classes.progressError]: status === "error"
+            })
+          }
+        ) })
+      ] })
+    }
+  );
+};
+export {
+  HvProgressBar,
+  staticClasses as progressBarClasses
+};
+//# sourceMappingURL=ProgressBar.mjs.map

package/dist/esm/ProgressBar/ProgressBar.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ProgressBar.mjs","sources":["../../../src/ProgressBar/ProgressBar.tsx"],"sourcesContent":["import clamp from \"lodash/clamp\";\n\nimport { useDefaultProps } from \"../hooks/useDefaultProps\";\n\nimport { HvBaseProps } from \"../types/generic\";\nimport { HvTypography, HvTypographyProps } from \"../Typography\";\n\nimport { ExtractNames } from \"../utils/classes\";\n\nimport { staticClasses, useClasses } from \"./ProgressBar.styles\";\n\nexport { staticClasses as progressBarClasses };\n\nexport type HvProgressBarClasses = ExtractNames<typeof useClasses>;\n\nexport type HvProgressBarStatus = \"inProgress\" | \"completed\" | \"error\";\n\n/**\n * ProgressBar provides feedback about a process that is taking place in the application.\n */\nexport interface HvProgressBarProps extends HvBaseProps {\n  /** The value of the progress bar. */\n  value: number;\n  /**\n   * The status of the progress bar.\n   *\n   * inProgress is black, error is red and completed is green.\n   *\n   * When uncontrolled and unspecified it will default to \"inProgress\".\n   */\n  status?: HvProgressBarStatus;\n  /** Aria Properties passed on to the progress bar. */\n  labelProps?: HvTypographyProps;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvProgressBarClasses;\n  /**\n   * True if the text label should not be displayed.\n   */\n  hideLabel?: boolean;\n}\n\nexport const HvProgressBar = (props: HvProgressBarProps) => {\n  const {\n    className,\n    classes: classesProp,\n    value = 0,\n    status = \"inProgress\",\n    labelProps,\n    hideLabel,\n    ...others\n  } = useDefaultProps(\"HvProgressBar\", props);\n\n  const { classes, cx } = useClasses(classesProp);\n\n  const clampedValue = clamp(value, 0, 100);\n\n  return (\n    <div\n      className={cx(classes.root, classes.progress, className)}\n      role=\"progressbar\"\n      aria-valuemin={0}\n      aria-valuemax={100}\n      aria-valuenow={clampedValue}\n      {...others}\n    >\n      <div className={classes.progressContainer}>\n        {!hideLabel && (\n          <HvTypography\n            className={classes.progressBarLabel}\n            variant=\"caption2\"\n            style={{ width: `${clampedValue}%` }}\n            {...labelProps}\n          >\n            {`${clampedValue}%`}\n          </HvTypography>\n        )}\n        <div className={classes.progressBarContainer}>\n          <div\n            style={{ width: `${clampedValue}%` }}\n            className={cx(classes.progressBar, {\n              [classes.progressDone]: status === \"completed\",\n              [classes.progressError]: status === \"error\",\n            })}\n          />\n        </div>\n      </div>\n    </div>\n  );\n};\n"],"names":[],"mappings":";;;;;;AAyCa,MAAA,gBAAgB,CAAC,UAA8B;AACpD,QAAA;AAAA,IACJ;AAAA,IACA,SAAS;AAAA,IACT,QAAQ;AAAA,IACR,SAAS;AAAA,IACT;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EAAA,IACD,gBAAgB,iBAAiB,KAAK;AAE1C,QAAM,EAAE,SAAS,GAAG,IAAI,WAAW,WAAW;AAE9C,QAAM,eAAe,MAAM,OAAO,GAAG,GAAG;AAGtC,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAW,GAAG,QAAQ,MAAM,QAAQ,UAAU,SAAS;AAAA,MACvD,MAAK;AAAA,MACL,iBAAe;AAAA,MACf,iBAAe;AAAA,MACf,iBAAe;AAAA,MACd,GAAG;AAAA,MAEJ,UAAC,qBAAA,OAAA,EAAI,WAAW,QAAQ,mBACrB,UAAA;AAAA,QAAA,CAAC,aACA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAW,QAAQ;AAAA,YACnB,SAAQ;AAAA,YACR,OAAO,EAAE,OAAO,GAAG,YAAY,IAAI;AAAA,YAClC,GAAG;AAAA,YAEH,aAAG,YAAY;AAAA,UAAA;AAAA,QAClB;AAAA,QAED,oBAAA,OAAA,EAAI,WAAW,QAAQ,sBACtB,UAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,OAAO,EAAE,OAAO,GAAG,YAAY,IAAI;AAAA,YACnC,WAAW,GAAG,QAAQ,aAAa;AAAA,cACjC,CAAC,QAAQ,YAAY,GAAG,WAAW;AAAA,cACnC,CAAC,QAAQ,aAAa,GAAG,WAAW;AAAA,YAAA,CACrC;AAAA,UAAA;AAAA,QAAA,GAEL;AAAA,MAAA,GACF;AAAA,IAAA;AAAA,EAAA;AAGN;"}

package/dist/esm/ProgressBar/ProgressBar.styles.mjs

@@ -0,0 +1,43 @@
+import { theme } from "@hitachivantara/uikit-styles";
+import { createClasses } from "../utils/classes.mjs";
+const { useClasses, staticClasses } = createClasses("HvProgressBar", {
+  root: {
+    display: "flex",
+    flexDirection: "column",
+    alignItems: "center",
+    justifyContent: "center",
+    // progress
+    width: "100%"
+  },
+  progress: {
+    width: "100%"
+  },
+  progressBar: {
+    backgroundColor: theme.colors.secondary
+  },
+  progressBarLabel: {
+    backgroundColor: "transparent",
+    display: "flex",
+    justifyContent: "end"
+  },
+  progressContainer: {
+    width: "100%"
+  },
+  progressDone: {
+    backgroundColor: theme.colors.positive
+  },
+  progressBarContainer: {
+    display: "flex",
+    width: "100%",
+    height: 4,
+    backgroundColor: theme.colors.atmo4
+  },
+  progressError: {
+    backgroundColor: theme.colors.negative
+  }
+});
+export {
+  staticClasses,
+  useClasses
+};
+//# sourceMappingURL=ProgressBar.styles.mjs.map

package/dist/esm/ProgressBar/ProgressBar.styles.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ProgressBar.styles.mjs","sources":["../../../src/ProgressBar/ProgressBar.styles.tsx"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { createClasses } from \"../utils/classes\";\n\nexport const { useClasses, staticClasses } = createClasses(\"HvProgressBar\", {\n  root: {\n    display: \"flex\",\n    flexDirection: \"column\",\n    alignItems: \"center\",\n    justifyContent: \"center\",\n\n    // progress\n    width: \"100%\",\n  },\n  progress: {\n    width: \"100%\",\n  },\n  progressBar: {\n    backgroundColor: theme.colors.secondary,\n  },\n  progressBarLabel: {\n    backgroundColor: \"transparent\",\n    display: \"flex\",\n    justifyContent: \"end\",\n  },\n  progressContainer: {\n    width: \"100%\",\n  },\n  progressDone: {\n    backgroundColor: theme.colors.positive,\n  },\n  progressBarContainer: {\n    display: \"flex\",\n    width: \"100%\",\n    height: 4,\n    backgroundColor: theme.colors.atmo4,\n  },\n  progressError: {\n    backgroundColor: theme.colors.negative,\n  },\n});\n"],"names":[],"mappings":";;AAIO,MAAM,EAAE,YAAY,kBAAkB,cAAc,iBAAiB;AAAA,EAC1E,MAAM;AAAA,IACJ,SAAS;AAAA,IACT,eAAe;AAAA,IACf,YAAY;AAAA,IACZ,gBAAgB;AAAA;AAAA,IAGhB,OAAO;AAAA,EACT;AAAA,EACA,UAAU;AAAA,IACR,OAAO;AAAA,EACT;AAAA,EACA,aAAa;AAAA,IACX,iBAAiB,MAAM,OAAO;AAAA,EAChC;AAAA,EACA,kBAAkB;AAAA,IAChB,iBAAiB;AAAA,IACjB,SAAS;AAAA,IACT,gBAAgB;AAAA,EAClB;AAAA,EACA,mBAAmB;AAAA,IACjB,OAAO;AAAA,EACT;AAAA,EACA,cAAc;AAAA,IACZ,iBAAiB,MAAM,OAAO;AAAA,EAChC;AAAA,EACA,sBAAsB;AAAA,IACpB,SAAS;AAAA,IACT,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,iBAAiB,MAAM,OAAO;AAAA,EAChC;AAAA,EACA,eAAe;AAAA,IACb,iBAAiB,MAAM,OAAO;AAAA,EAChC;AACF,CAAC;"}

package/dist/esm/QueryBuilder/ConfirmationDialog/ConfirmationDialog.mjs

@@ -0,0 +1,54 @@
+import { jsxs, jsx } from "@emotion/react/jsx-runtime";
+import { useClasses } from "./ConfirmationDialog.styles.mjs";
+import { HvDialog } from "../../Dialog/Dialog.mjs";
+import { HvDialogTitle } from "../../Dialog/Title/Title.mjs";
+import { HvDialogContent } from "../../Dialog/Content/Content.mjs";
+import { HvDialogActions } from "../../Dialog/Actions/Actions.mjs";
+import { HvButton } from "../../Button/Button.mjs";
+const ConfirmationDialog = ({
+  title,
+  message,
+  isOpen,
+  onConfirm,
+  onCancel,
+  confirmButtonLabel,
+  cancelButtonLabel,
+  closeButtonTooltip
+}) => {
+  const { classes } = useClasses();
+  const handleClose = (_, reason) => {
+    if (reason !== "backdropClick") {
+      onCancel?.();
+    }
+  };
+  return /* @__PURE__ */ jsxs(
+    HvDialog,
+    {
+      classes: { paper: classes.paper },
+      open: isOpen,
+      onClose: handleClose,
+      firstFocusable: "confirmation-dialog-cancel",
+      buttonTitle: closeButtonTooltip,
+      children: [
+        /* @__PURE__ */ jsx(HvDialogTitle, { variant: "warning", children: title }),
+        /* @__PURE__ */ jsx(HvDialogContent, { indentContent: true, children: message }),
+        /* @__PURE__ */ jsxs(HvDialogActions, { children: [
+          /* @__PURE__ */ jsx(HvButton, { variant: "primaryGhost", onClick: onConfirm, children: confirmButtonLabel }),
+          /* @__PURE__ */ jsx(
+            HvButton,
+            {
+              id: "confirmation-dialog-cancel",
+              variant: "primaryGhost",
+              onClick: () => onCancel?.(),
+              children: cancelButtonLabel
+            }
+          )
+        ] })
+      ]
+    }
+  );
+};
+export {
+  ConfirmationDialog
+};
+//# sourceMappingURL=ConfirmationDialog.mjs.map

package/dist/esm/QueryBuilder/ConfirmationDialog/ConfirmationDialog.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ConfirmationDialog.mjs","sources":["../../../../src/QueryBuilder/ConfirmationDialog/ConfirmationDialog.tsx"],"sourcesContent":["import { HvButton, HvButtonProps } from \"../../Button\";\nimport {\n  HvDialog,\n  HvDialogActions,\n  HvDialogContent,\n  HvDialogProps,\n  HvDialogTitle,\n} from \"../../Dialog\";\n\nimport { useClasses } from \"./ConfirmationDialog.styles\";\n\nexport interface ConfirmationDialogProps {\n  title?: string;\n  message?: string;\n  isOpen?: boolean;\n  onConfirm?: HvButtonProps[\"onClick\"];\n  onCancel?: () => void;\n  confirmButtonLabel?: string;\n  cancelButtonLabel?: string;\n  closeButtonTooltip?: string;\n}\n\nexport const ConfirmationDialog = ({\n  title,\n  message,\n  isOpen,\n  onConfirm,\n  onCancel,\n  confirmButtonLabel,\n  cancelButtonLabel,\n  closeButtonTooltip,\n}: ConfirmationDialogProps) => {\n  const { classes } = useClasses();\n\n  const handleClose: HvDialogProps[\"onClose\"] = (_, reason) => {\n    if (reason !== \"backdropClick\") {\n      onCancel?.();\n    }\n  };\n\n  return (\n    <HvDialog\n      classes={{ paper: classes.paper }}\n      open={isOpen}\n      onClose={handleClose}\n      firstFocusable=\"confirmation-dialog-cancel\"\n      buttonTitle={closeButtonTooltip}\n    >\n      <HvDialogTitle variant=\"warning\">{title}</HvDialogTitle>\n      <HvDialogContent indentContent>{message}</HvDialogContent>\n      <HvDialogActions>\n        <HvButton variant=\"primaryGhost\" onClick={onConfirm}>\n          {confirmButtonLabel}\n        </HvButton>\n        <HvButton\n          id=\"confirmation-dialog-cancel\"\n          variant=\"primaryGhost\"\n          onClick={() => onCancel?.()}\n        >\n          {cancelButtonLabel}\n        </HvButton>\n      </HvDialogActions>\n    </HvDialog>\n  );\n};\n"],"names":[],"mappings":";;;;;;;AAsBO,MAAM,qBAAqB,CAAC;AAAA,EACjC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAA+B;AACvB,QAAA,EAAE,YAAY;AAEd,QAAA,cAAwC,CAAC,GAAG,WAAW;AAC3D,QAAI,WAAW,iBAAiB;AACnB;IACb;AAAA,EAAA;AAIA,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,SAAS,EAAE,OAAO,QAAQ,MAAM;AAAA,MAChC,MAAM;AAAA,MACN,SAAS;AAAA,MACT,gBAAe;AAAA,MACf,aAAa;AAAA,MAEb,UAAA;AAAA,QAAC,oBAAA,eAAA,EAAc,SAAQ,WAAW,UAAM,OAAA;AAAA,QACvC,oBAAA,iBAAA,EAAgB,eAAa,MAAE,UAAQ,SAAA;AAAA,6BACvC,iBACC,EAAA,UAAA;AAAA,UAAA,oBAAC,UAAS,EAAA,SAAQ,gBAAe,SAAS,WACvC,UACH,oBAAA;AAAA,UACA;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,IAAG;AAAA,cACH,SAAQ;AAAA,cACR,SAAS,MAAM,WAAW;AAAA,cAEzB,UAAA;AAAA,YAAA;AAAA,UACH;AAAA,QAAA,GACF;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGN;"}

package/dist/esm/QueryBuilder/ConfirmationDialog/ConfirmationDialog.styles.mjs

@@ -0,0 +1,12 @@
+import { createClasses } from "../../utils/classes.mjs";
+const { useClasses, staticClasses } = createClasses(
+  "HvQueryBuilder-ConfirmationDialog",
+  {
+    paper: {}
+  }
+);
+export {
+  staticClasses,
+  useClasses
+};
+//# sourceMappingURL=ConfirmationDialog.styles.mjs.map

package/dist/esm/QueryBuilder/ConfirmationDialog/ConfirmationDialog.styles.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ConfirmationDialog.styles.mjs","sources":["../../../../src/QueryBuilder/ConfirmationDialog/ConfirmationDialog.styles.tsx"],"sourcesContent":["import { createClasses } from \"../../utils/classes\";\n\nexport const { useClasses, staticClasses } = createClasses(\n  \"HvQueryBuilder-ConfirmationDialog\",\n  {\n    paper: {},\n  }\n);\n"],"names":[],"mappings":";AAEa,MAAA,EAAE,YAAY,cAAA,IAAkB;AAAA,EAC3C;AAAA,EACA;AAAA,IACE,OAAO,CAAC;AAAA,EACV;AACF;"}