@hitachivantara/uikit-react-core 5.23.0 → 5.24.1

package/dist/esm/components/Container/Container.js.map

@@ -1 +1 @@
-{"version":3,"file":"Container.js","sources":["../../../../src/components/Container/Container.tsx"],"sourcesContent":["import { useTheme } from \"@mui/material/styles\";\n\nimport { clsx } from \"clsx\";\n\nimport { ContainerProps as MuiContainerProps } from \"@mui/material/Container\";\n\nimport { forwardRef } from \"react\";\n\nimport { HvBaseProps } from \"@core/types/generic\";\nimport { useDefaultProps } from \"@core/hooks/useDefaultProps\";\n\nimport { StyledRoot } from \"./Container.styles\";\nimport containerClasses, { HvContainerClasses } from \"./containerClasses\";\n\nexport interface HvContainerProps\n  extends Omit<MuiContainerProps, \"classes\">,\n    HvBaseProps {\n  /**\n   * The component used for the root node.\n   * Either a string to use a DOM element or a component.\n   */\n  component?: React.ElementType;\n  /**\n   * Determine the max-width of the container.\n   * The container width grows with the size of the screen.\n   * Set to `false` to disable `maxWidth`.\n   */\n  maxWidth?: \"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\" | false;\n  /** If `true`, the left and right padding is removed. */\n  disableGutters?: boolean;\n  /**\n   * Set the max-width to match the min-width of the current breakpoint.\n   * This is useful if you'd prefer to design for a fixed set of sizes\n   * instead of trying to accommodate a fully fluid viewport.\n   * It's fluid by default.\n   */\n  fixed?: boolean;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvContainerClasses;\n}\n\nexport const HvContainer = forwardRef<HTMLDivElement, HvContainerProps>(\n  (props, ref) => {\n    const {\n      maxWidth = false,\n      classes,\n      className,\n      fixed,\n      ...others\n    } = useDefaultProps(\"HvContainer\", props);\n    const muiTheme = useTheme();\n    return (\n      <StyledRoot\n        className={className}\n        classes={{\n          root: clsx(containerClasses.root, classes?.root),\n          disableGutters: clsx(\n            containerClasses.disableGutters,\n            classes?.disableGutters\n          ),\n          fixed: clsx(containerClasses.fixed, classes?.fixed),\n          maxWidthXs: clsx(containerClasses.maxWidthXs, classes?.maxWidthXs),\n          maxWidthSm: clsx(containerClasses.maxWidthSm, classes?.maxWidthSm),\n          maxWidthMd: clsx(containerClasses.maxWidthMd, classes?.maxWidthMd),\n          maxWidthLg: clsx(containerClasses.maxWidthLg, classes?.maxWidthLg),\n          maxWidthXl: clsx(containerClasses.maxWidthXl, classes?.maxWidthXl),\n        }}\n        $breakpoints={muiTheme.breakpoints}\n        ref={ref}\n        maxWidth={maxWidth}\n        fixed={fixed}\n        {...others}\n      />\n    );\n  }\n);\n"],"names":["HvContainer","forwardRef","props","ref","maxWidth","classes","className","fixed","others","useDefaultProps","muiTheme","useTheme","StyledRoot","root","clsx","containerClasses","disableGutters","maxWidthXs","maxWidthSm","maxWidthMd","maxWidthLg","maxWidthXl","$breakpoints","breakpoints"],"mappings":";;;;;;;AAyCO,MAAMA,cAAcC,WACzB,CAACC,OAAOC,QAAQ;AACR,QAAA;AAAA,IACJC,WAAW;AAAA,IACXC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACA,GAAGC;AAAAA,EAAAA,IACDC,gBAAgB,eAAeP,KAAK;AACxC,QAAMQ,WAAWC;AACjB,6BACGC,YAAU;AAAA,IACTN;AAAAA,IACAD,SAAS;AAAA,MACPQ,MAAMC,KAAKC,iBAAiBF,MAAMR,mCAASQ,IAAI;AAAA,MAC/CG,gBAAgBF,KACdC,iBAAiBC,gBACjBX,mCAASW,cACX;AAAA,MACAT,OAAOO,KAAKC,iBAAiBR,OAAOF,mCAASE,KAAK;AAAA,MAClDU,YAAYH,KAAKC,iBAAiBE,YAAYZ,mCAASY,UAAU;AAAA,MACjEC,YAAYJ,KAAKC,iBAAiBG,YAAYb,mCAASa,UAAU;AAAA,MACjEC,YAAYL,KAAKC,iBAAiBI,YAAYd,mCAASc,UAAU;AAAA,MACjEC,YAAYN,KAAKC,iBAAiBK,YAAYf,mCAASe,UAAU;AAAA,MACjEC,YAAYP,KAAKC,iBAAiBM,YAAYhB,mCAASgB,UAAU;AAAA,IACnE;AAAA,IACAC,cAAcZ,SAASa;AAAAA,IACvBpB;AAAAA,IACAC;AAAAA,IACAG;AAAAA,IAAa,GACTC;AAAAA,EAAAA,CACL;AAEL,CACF;"}
+{"version":3,"file":"Container.js","sources":["../../../../src/components/Container/Container.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\n\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { useTheme } from \"@mui/material/styles\";\nimport MuiContainer, {\n  ContainerProps as MuiContainerProps,\n} from \"@mui/material/Container\";\nimport useMediaQuery from \"@mui/material/useMediaQuery\";\n\nimport { HvBaseProps } from \"@core/types/generic\";\nimport { useDefaultProps } from \"@core/hooks/useDefaultProps\";\nimport { ExtractNames } from \"@core/utils/classes\";\n\nimport { staticClasses, useClasses } from \"./Container.styles\";\n\nexport { staticClasses as containerClasses };\n\nexport type HvContainerClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvContainerProps\n  extends Omit<MuiContainerProps, \"classes\">,\n    HvBaseProps {\n  /**\n   * The component used for the root node.\n   * Either a string to use a DOM element or a component.\n   */\n  component?: React.ElementType;\n  /**\n   * Determine the max-width of the container.\n   * The container width grows with the size of the screen.\n   * Set to `false` to disable `maxWidth`.\n   */\n  maxWidth?: \"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\" | false;\n  /** If `true`, the left and right padding is removed. */\n  disableGutters?: boolean;\n  /**\n   * Set the max-width to match the min-width of the current breakpoint.\n   * This is useful if you'd prefer to design for a fixed set of sizes\n   * instead of trying to accommodate a fully fluid viewport.\n   * It's fluid by default.\n   */\n  fixed?: boolean;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvContainerClasses;\n}\n\nexport const HvContainer = forwardRef<HTMLDivElement, HvContainerProps>(\n  (props, ref) => {\n    const {\n      maxWidth = false,\n      classes: classesProp,\n      className,\n      fixed,\n      disableGutters,\n      ...others\n    } = useDefaultProps(\"HvContainer\", props);\n\n    const { classes, cx, css } = useClasses(classesProp);\n\n    const muiTheme = useTheme();\n\n    const upMd = useMediaQuery(muiTheme.breakpoints.up(\"md\"));\n\n    const gutters = upMd\n      ? {\n          // Increases specificity\n          [`&.${staticClasses.root}`]: {\n            paddingLeft: theme.spacing(4),\n            paddingRight: theme.spacing(4),\n          },\n        }\n      : {\n          // Increases specificity\n          [`&.${staticClasses.root}`]: {\n            paddingLeft: theme.space.sm,\n            paddingRight: theme.space.sm,\n          },\n        };\n\n    return (\n      <MuiContainer\n        className={cx({ [css(gutters)]: !disableGutters }, className)}\n        classes={{\n          root: classes.root,\n          disableGutters: classes.disableGutters,\n          fixed: classes.fixed,\n          maxWidthXs: classes.maxWidthXs,\n          maxWidthSm: classes.maxWidthSm,\n          maxWidthMd: classes.maxWidthMd,\n          maxWidthLg: classes.maxWidthLg,\n          maxWidthXl: classes.maxWidthXl,\n        }}\n        ref={ref}\n        maxWidth={maxWidth}\n        fixed={fixed}\n        disableGutters={disableGutters}\n        {...others}\n      />\n    );\n  }\n);\n"],"names":["HvContainer","forwardRef","props","ref","maxWidth","classes","classesProp","className","fixed","disableGutters","others","useDefaultProps","cx","css","useClasses","muiTheme","useTheme","upMd","useMediaQuery","breakpoints","up","gutters","staticClasses","root","paddingLeft","theme","spacing","paddingRight","space","sm","MuiContainer","maxWidthXs","maxWidthSm","maxWidthMd","maxWidthLg","maxWidthXl"],"mappings":";;;;;;;;AA+CO,MAAMA,cAAcC,WACzB,CAACC,OAAOC,QAAQ;AACR,QAAA;AAAA,IACJC,WAAW;AAAA,IACXC,SAASC;AAAAA,IACTC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACA,GAAGC;AAAAA,EAAAA,IACDC,gBAAgB,eAAeT,KAAK;AAElC,QAAA;AAAA,IAAEG;AAAAA,IAASO;AAAAA,IAAIC;AAAAA,EAAAA,IAAQC,WAAWR,WAAW;AAEnD,QAAMS,WAAWC;AAEjB,QAAMC,OAAOC,cAAcH,SAASI,YAAYC,GAAG,IAAI,CAAC;AAExD,QAAMC,UAAUJ,OACZ;AAAA;AAAA,IAEE,CAAE,KAAIK,cAAcC,MAAM,GAAG;AAAA,MAC3BC,aAAaC,MAAMC,QAAQ,CAAC;AAAA,MAC5BC,cAAcF,MAAMC,QAAQ,CAAC;AAAA,IAC/B;AAAA,EAAA,IAEF;AAAA;AAAA,IAEE,CAAE,KAAIJ,cAAcC,MAAM,GAAG;AAAA,MAC3BC,aAAaC,MAAMG,MAAMC;AAAAA,MACzBF,cAAcF,MAAMG,MAAMC;AAAAA,IAC5B;AAAA,EAAA;AAGN,6BACGC,cAAY;AAAA,IACXvB,WAAWK,GAAG;AAAA,MAAE,CAACC,IAAIQ,OAAO,CAAC,GAAG,CAACZ;AAAAA,OAAkBF,SAAS;AAAA,IAC5DF,SAAS;AAAA,MACPkB,MAAMlB,QAAQkB;AAAAA,MACdd,gBAAgBJ,QAAQI;AAAAA,MACxBD,OAAOH,QAAQG;AAAAA,MACfuB,YAAY1B,QAAQ0B;AAAAA,MACpBC,YAAY3B,QAAQ2B;AAAAA,MACpBC,YAAY5B,QAAQ4B;AAAAA,MACpBC,YAAY7B,QAAQ6B;AAAAA,MACpBC,YAAY9B,QAAQ8B;AAAAA,IACtB;AAAA,IACAhC;AAAAA,IACAC;AAAAA,IACAI;AAAAA,IACAC;AAAAA,IAA+B,GAC3BC;AAAAA,EAAAA,CACL;AAEL,CACF;"}

package/dist/esm/components/Container/Container.styles.js

@@ -1,37 +1,19 @@
-import _styled from "@emotion/styled/base";
-import { theme } from "@hitachivantara/uikit-styles";
-import { Container } from "@mui/material";
-import { transientOptions } from "../../utils/transientOptions.js";
-function _extends() {
-  _extends = Object.assign ? Object.assign.bind() : function(target) {
-    for (var i = 1; i < arguments.length; i++) {
-      var source = arguments[i];
-      for (var key in source) {
-        if (Object.prototype.hasOwnProperty.call(source, key)) {
-          target[key] = source[key];
-        }
-      }
-    }
-    return target;
-  };
-  return _extends.apply(this, arguments);
-}
-const StyledRoot = /* @__PURE__ */ _styled(Container, process.env.NODE_ENV === "production" ? _extends({}, {
-  target: "eq8pv0f0"
-}, transientOptions) : _extends({}, {
-  target: "eq8pv0f0",
-  label: "StyledRoot"
-}, transientOptions))(({
-  $breakpoints
-}) => ({
-  paddingLeft: theme.space.sm,
-  paddingRight: theme.space.sm,
-  [$breakpoints.up("md")]: {
-    paddingLeft: theme.spacing(4),
-    paddingRight: theme.spacing(4)
-  }
-}), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9ob21lL3J1bm5lci93b3JrL2h2LXVpa2l0LXJlYWN0L2h2LXVpa2l0LXJlYWN0L3BhY2thZ2VzL2NvcmUvc3JjL2NvbXBvbmVudHMvQ29udGFpbmVyL0NvbnRhaW5lci5zdHlsZXMudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQVEwQiIsImZpbGUiOiIvaG9tZS9ydW5uZXIvd29yay9odi11aWtpdC1yZWFjdC9odi11aWtpdC1yZWFjdC9wYWNrYWdlcy9jb3JlL3NyYy9jb21wb25lbnRzL0NvbnRhaW5lci9Db250YWluZXIuc3R5bGVzLnRzeCIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCBzdHlsZWQgZnJvbSBcIkBlbW90aW9uL3N0eWxlZFwiO1xuaW1wb3J0IHsgdGhlbWUgfSBmcm9tIFwiQGhpdGFjaGl2YW50YXJhL3Vpa2l0LXN0eWxlc1wiO1xuaW1wb3J0IHtcbiAgQ29udGFpbmVyIGFzIE11aUNvbnRhaW5lcixcbiAgQnJlYWtwb2ludHMgYXMgTXVpQnJlYWtwb2ludHMsXG59IGZyb20gXCJAbXVpL21hdGVyaWFsXCI7XG5pbXBvcnQgeyB0cmFuc2llbnRPcHRpb25zIH0gZnJvbSBcIkBjb3JlL3V0aWxzL3RyYW5zaWVudE9wdGlvbnNcIjtcblxuZXhwb3J0IGNvbnN0IFN0eWxlZFJvb3QgPSBzdHlsZWQoXG4gIE11aUNvbnRhaW5lcixcbiAgdHJhbnNpZW50T3B0aW9uc1xuKSgoeyAkYnJlYWtwb2ludHMgfTogeyAkYnJlYWtwb2ludHM6IE11aUJyZWFrcG9pbnRzIH0pID0+ICh7XG4gIHBhZGRpbmdMZWZ0OiB0aGVtZS5zcGFjZS5zbSxcbiAgcGFkZGluZ1JpZ2h0OiB0aGVtZS5zcGFjZS5zbSxcbiAgWyRicmVha3BvaW50cy51cChcIm1kXCIpXToge1xuICAgIHBhZGRpbmdMZWZ0OiB0aGVtZS5zcGFjaW5nKDQpLFxuICAgIHBhZGRpbmdSaWdodDogdGhlbWUuc3BhY2luZyg0KSxcbiAgfSxcbn0pKTtcbiJdfQ== */");
+import { createClasses } from "../../utils/classes.js";
+const {
+  staticClasses,
+  useClasses
+} = createClasses("HvContainer", {
+  root: {},
+  disableGutters: {},
+  fixed: {},
+  maxWidthXs: {},
+  maxWidthSm: {},
+  maxWidthMd: {},
+  maxWidthLg: {},
+  maxWidthXl: {}
+});
 export {
-  StyledRoot
+  staticClasses,
+  useClasses
 };
 //# sourceMappingURL=Container.styles.js.map

package/dist/esm/components/Container/Container.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"Container.styles.js","sources":["../../../../src/components/Container/Container.styles.tsx"],"sourcesContent":["import styled from \"@emotion/styled\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\nimport {\n  Container as MuiContainer,\n  Breakpoints as MuiBreakpoints,\n} from \"@mui/material\";\nimport { transientOptions } from \"@core/utils/transientOptions\";\n\nexport const StyledRoot = styled(\n  MuiContainer,\n  transientOptions\n)(({ $breakpoints }: { $breakpoints: MuiBreakpoints }) => ({\n  paddingLeft: theme.space.sm,\n  paddingRight: theme.space.sm,\n  [$breakpoints.up(\"md\")]: {\n    paddingLeft: theme.spacing(4),\n    paddingRight: theme.spacing(4),\n  },\n}));\n"],"names":["StyledRoot","MuiContainer","process","env","NODE_ENV","_extends","target","transientOptions","label","$breakpoints","paddingLeft","theme","space","sm","paddingRight","up","spacing"],"mappings":";;;;;;;;;;;;;;;;;;AAQaA,MAAAA,qCACXC,WAAYC,QAAAC,IAAAC,4BAAAC,SAAA,IAAA;AAAA,EAAAC,QAAA;AAAA,GACZC,gBAAgB,IAAAF,SAAA,IAAA;AAAA,EAAAC,QAAA;AAAA,EAAAE,OAAA;AAAA,GAAhBD,gBAAgB,CAClB,EAAE,CAAC;AAAA,EAAEE;AAA+C,OAAO;AAAA,EACzDC,aAAaC,MAAMC,MAAMC;AAAAA,EACzBC,cAAcH,MAAMC,MAAMC;AAAAA,EAC1B,CAACJ,aAAaM,GAAG,IAAI,CAAC,GAAG;AAAA,IACvBL,aAAaC,MAAMK,QAAQ,CAAC;AAAA,IAC5BF,cAAcH,MAAMK,QAAQ,CAAC;AAAA,EAC/B;AACF,IAAEd,QAAAC,IAAAC,aAAC,eAAA,KAAA,yuCAAA;"}
+{"version":3,"file":"Container.styles.js","sources":["../../../../src/components/Container/Container.styles.tsx"],"sourcesContent":["import { createClasses } from \"@core/utils/classes\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvContainer\", {\n  root: {},\n  disableGutters: {},\n  fixed: {},\n  maxWidthXs: {},\n  maxWidthSm: {},\n  maxWidthMd: {},\n  maxWidthLg: {},\n  maxWidthXl: {},\n});\n"],"names":["staticClasses","useClasses","createClasses","root","disableGutters","fixed","maxWidthXs","maxWidthSm","maxWidthMd","maxWidthLg","maxWidthXl"],"mappings":";AAEa,MAAA;AAAA,EAAEA;AAAAA,EAAeC;AAAW,IAAIC,cAAc,eAAe;AAAA,EACxEC,MAAM,CAAC;AAAA,EACPC,gBAAgB,CAAC;AAAA,EACjBC,OAAO,CAAC;AAAA,EACRC,YAAY,CAAC;AAAA,EACbC,YAAY,CAAC;AAAA,EACbC,YAAY,CAAC;AAAA,EACbC,YAAY,CAAC;AAAA,EACbC,YAAY,CAAC;AACf,CAAC;"}

package/dist/esm/components/Controls/Controls.js

@@ -1,11 +1,10 @@
 import { Children } from "react";
 import { useDefaultProps } from "../../hooks/useDefaultProps.js";
-import { clsx } from "clsx";
 import { setId } from "../../utils/setId.js";
 import { useControlled } from "../../hooks/useControlled.js";
 import { HvControlsContextProvider } from "./context/ControlsContext.js";
-import controlsClasses from "./controlClasses.js";
-import { StyledRoot, StyledSection } from "./Controls.styles.js";
+import { useClasses } from "./Controls.styles.js";
+import { staticClasses } from "./Controls.styles.js";
 import { jsx, jsxs } from "@emotion/react/jsx-runtime";
 import { HvMultiButton } from "../MultiButton/MultiButton.js";
 import { HvButton } from "../Button/Button.js";
@@ -13,7 +12,7 @@ const HvControls = (props) => {
   const {
     id,
     className,
-    classes,
+    classes: classesProp,
     views,
     callbacks,
     selectedView,
@@ -22,6 +21,10 @@ const HvControls = (props) => {
     hideViewSwitcher = false,
     onViewChange
   } = useDefaultProps("HvControls", props);
+  const {
+    classes,
+    cx
+  } = useClasses(classesProp);
   const [currentView, setCurrentView] = useControlled(selectedView, defaultView);
   const onViewChangeHandler = (evt, btnId) => {
     setCurrentView(btnId);
@@ -43,19 +46,19 @@ const HvControls = (props) => {
   const childrenIndexCut = childrenCount > 0 ? Math.round(childrenCount * 0.5) : 0;
   const leftChildren = childrenArray.slice(0, childrenIndexCut);
   const rightChildren = childrenArray.slice(childrenIndexCut, childrenCount || 0);
-  return /* @__PURE__ */ jsx(StyledRoot, {
+  return /* @__PURE__ */ jsx("div", {
     id,
-    className: clsx(className, controlsClasses.root, classes == null ? void 0 : classes.root),
+    className: cx(classes.root, className),
     children: /* @__PURE__ */ jsxs(HvControlsContextProvider, {
       value: {
         onSearch: onSearchHandler,
         onSort: onSortHandler
       },
-      children: [/* @__PURE__ */ jsx(StyledSection, {
-        className: clsx(classes == null ? void 0 : classes.section, controlsClasses.section, classes == null ? void 0 : classes.leftSection, controlsClasses.leftSection),
+      children: [/* @__PURE__ */ jsx("div", {
+        className: cx(classes.section, classes.leftSection),
         children: leftChildren
-      }), /* @__PURE__ */ jsxs(StyledSection, {
-        className: clsx(classes == null ? void 0 : classes.section, controlsClasses.section, classes == null ? void 0 : classes.rightSection, controlsClasses.rightSection),
+      }), /* @__PURE__ */ jsxs("div", {
+        className: cx(classes.section, classes.rightSection),
         children: [rightChildren, views && !hideViewSwitcher && (views == null ? void 0 : views.length) > 0 && /* @__PURE__ */ jsx(HvMultiButton, {
           id: setId(id, "view-multi-button"),
           children: views.map(({
@@ -76,6 +79,7 @@ const HvControls = (props) => {
   });
 };
 export {
-  HvControls
+  HvControls,
+  staticClasses as controlsClasses
 };
 //# sourceMappingURL=Controls.js.map

package/dist/esm/components/Controls/Controls.js.map

@@ -1 +1 @@
-{"version":3,"file":"Controls.js","sources":["../../../../src/components/Controls/Controls.tsx"],"sourcesContent":["import { Children, MouseEvent } from \"react\";\nimport { useDefaultProps } from \"@core/hooks/useDefaultProps\";\n\nimport { clsx } from \"clsx\";\n\nimport { HvBaseProps, HvExtraProps } from \"@core/types/generic\";\nimport { HvButton } from \"@core/components/Button\";\nimport { HvMultiButton } from \"@core/components/MultiButton\";\nimport { setId } from \"@core/utils/setId\";\nimport { useControlled } from \"@core/hooks/useControlled\";\nimport { HvTableInstance } from \"@core/components/Table/hooks/useTable\";\n\nimport { HvControlsContextProvider } from \"./context/ControlsContext\";\nimport controlsClasses, { HvControlsClasses } from \"./controlClasses\";\nimport { StyledRoot, StyledSection } from \"./Controls.styles\";\n\nexport interface HvControlsViewConfiguration extends HvExtraProps {\n  id?: string;\n  label?: string;\n  icon?: React.ReactNode;\n}\n\nexport interface HvControlsProps extends HvBaseProps {\n  /**\n   * An instance of useHvTable or useTable used to manage the data\n   * if this is not provided data sorting and search must be handled externally\n   */\n  callbacks?: {\n    setSortBy?: HvTableInstance[\"setSortBy\"];\n    setGlobalFilter?: HvTableInstance[\"setGlobalFilter\"];\n  };\n  /**\n   * Views configuration required for the view buttons\n   */\n  views?: HvControlsViewConfiguration[];\n  /**\n   * What view is selected by default\n   */\n  defaultView?: string;\n  /**\n   * Sets the selected view to be the one specified\n   * if specified the component is in a controlled state and it won't change it state\n   * unless specified externally\n   */\n  selectedView?: string;\n  /**\n   * Callback called when the view switcher button is pressed\n   */\n  onViewChange?: (event: MouseEvent<HTMLButtonElement>, id: string) => void;\n  /**\n   * if `true` the button to switch views is not rendered\n   */\n  hideViewSwitcher?: boolean;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvControlsClasses;\n}\n\nexport const HvControls = (props: HvControlsProps) => {\n  const {\n    id,\n    className,\n    classes,\n    views,\n    callbacks,\n    selectedView,\n    defaultView,\n    children,\n    hideViewSwitcher = false,\n    onViewChange,\n  } = useDefaultProps(\"HvControls\", props);\n\n  const [currentView, setCurrentView] = useControlled(\n    selectedView,\n    defaultView\n  );\n\n  const onViewChangeHandler = (\n    evt: MouseEvent<HTMLButtonElement>,\n    btnId: any\n  ) => {\n    setCurrentView(btnId);\n    onViewChange?.(evt, btnId);\n  };\n\n  const onSearchHandler = (value: any) => callbacks?.setGlobalFilter?.(value);\n  const onSortHandler = (value: any) =>\n    callbacks?.setSortBy?.([\n      {\n        id: value?.accessor,\n        desc: value?.desc,\n      },\n    ]);\n\n  const childrenCount = Children.count(children);\n  const childrenArray = Children.toArray(children);\n\n  const childrenIndexCut =\n    childrenCount > 0 ? Math.round(childrenCount * 0.5) : 0;\n  const leftChildren = childrenArray.slice(0, childrenIndexCut);\n  const rightChildren = childrenArray.slice(\n    childrenIndexCut,\n    childrenCount || 0\n  );\n\n  return (\n    <StyledRoot\n      id={id}\n      className={clsx(className, controlsClasses.root, classes?.root)}\n    >\n      <HvControlsContextProvider\n        value={{\n          onSearch: onSearchHandler,\n          onSort: onSortHandler,\n        }}\n      >\n        <StyledSection\n          className={clsx(\n            classes?.section,\n            controlsClasses.section,\n            classes?.leftSection,\n            controlsClasses.leftSection\n          )}\n        >\n          {leftChildren}\n        </StyledSection>\n        <StyledSection\n          className={clsx(\n            classes?.section,\n            controlsClasses.section,\n            classes?.rightSection,\n            controlsClasses.rightSection\n          )}\n        >\n          {rightChildren}\n          {views && !hideViewSwitcher && views?.length > 0 && (\n            <HvMultiButton id={setId(id, \"view-multi-button\")}>\n              {views.map(({ id: btnId, icon, ...others }) => (\n                <HvButton\n                  id={btnId}\n                  key={btnId}\n                  icon\n                  selected={currentView === btnId}\n                  onClick={(evt) => onViewChangeHandler(evt, btnId)}\n                  {...others}\n                >\n                  {icon}\n                </HvButton>\n              ))}\n            </HvMultiButton>\n          )}\n        </StyledSection>\n      </HvControlsContextProvider>\n    </StyledRoot>\n  );\n};\n"],"names":["HvControls","props","id","className","classes","views","callbacks","selectedView","defaultView","children","hideViewSwitcher","onViewChange","useDefaultProps","currentView","setCurrentView","useControlled","onViewChangeHandler","evt","btnId","onSearchHandler","value","setGlobalFilter","onSortHandler","setSortBy","accessor","desc","childrenCount","Children","count","childrenArray","toArray","childrenIndexCut","Math","round","leftChildren","slice","rightChildren","StyledRoot","clsx","controlsClasses","root","HvControlsContextProvider","onSearch","onSort","_jsx","StyledSection","section","leftSection","_jsxs","rightSection","length","HvMultiButton","setId","map","icon","others","HvButton","selected","onClick"],"mappings":";;;;;;;;;;;AAyDaA,MAAAA,aAAaA,CAACC,UAA2B;AAC9C,QAAA;AAAA,IACJC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC,mBAAmB;AAAA,IACnBC;AAAAA,EAAAA,IACEC,gBAAgB,cAAcX,KAAK;AAEvC,QAAM,CAACY,aAAaC,cAAc,IAAIC,cACpCR,cACAC,WACF;AAEMQ,QAAAA,sBAAsBA,CAC1BC,KACAC,UACG;AACHJ,mBAAeI,KAAK;AACpBP,iDAAeM,KAAKC;AAAAA,EAAK;AAG3B,QAAMC,kBAAkBA,CAACC,UAAed;;AAAAA,wDAAWe,oBAAXf,mCAA6Bc;AAAAA;AACrE,QAAME,gBAAgBA,CAACF;;AACrBd,wDAAWiB,cAAXjB,mCAAuB,CACrB;AAAA,MACEJ,IAAIkB,+BAAOI;AAAAA,MACXC,MAAML,+BAAOK;AAAAA,IACd,CAAA;AAAA;AAGCC,QAAAA,gBAAgBC,SAASC,MAAMnB,QAAQ;AACvCoB,QAAAA,gBAAgBF,SAASG,QAAQrB,QAAQ;AAE/C,QAAMsB,mBACJL,gBAAgB,IAAIM,KAAKC,MAAMP,gBAAgB,GAAG,IAAI;AACxD,QAAMQ,eAAeL,cAAcM,MAAM,GAAGJ,gBAAgB;AAC5D,QAAMK,gBAAgBP,cAAcM,MAClCJ,kBACAL,iBAAiB,CACnB;AAEA,6BACGW,YAAU;AAAA,IACTnC;AAAAA,IACAC,WAAWmC,KAAKnC,WAAWoC,gBAAgBC,MAAMpC,mCAASoC,IAAI;AAAA,IAAE/B,+BAE/DgC,2BAAyB;AAAA,MACxBrB,OAAO;AAAA,QACLsB,UAAUvB;AAAAA,QACVwB,QAAQrB;AAAAA,MACV;AAAA,MAAEb,UAAA,CAEFmC,oBAACC,eAAa;AAAA,QACZ1C,WAAWmC,KACTlC,mCAAS0C,SACTP,gBAAgBO,SAChB1C,mCAAS2C,aACTR,gBAAgBQ,WAClB;AAAA,QAAEtC,UAEDyB;AAAAA,MAAAA,CACY,GACfc,qBAACH,eAAa;AAAA,QACZ1C,WAAWmC,KACTlC,mCAAS0C,SACTP,gBAAgBO,SAChB1C,mCAAS6C,cACTV,gBAAgBU,YAClB;AAAA,QAAExC,WAED2B,eACA/B,SAAS,CAACK,qBAAoBL,+BAAO6C,UAAS,KAC7CN,oBAACO,eAAa;AAAA,UAACjD,IAAIkD,MAAMlD,IAAI,mBAAmB;AAAA,UAAEO,UAC/CJ,MAAMgD,IAAI,CAAC;AAAA,YAAEnD,IAAIgB;AAAAA,YAAOoC;AAAAA,YAAM,GAAGC;AAAAA,UAAAA,0BAC/BC,UAAQ;AAAA,YACPtD,IAAIgB;AAAAA,YAEJoC,MAAI;AAAA,YACJG,UAAU5C,gBAAgBK;AAAAA,YAC1BwC,SAAUzC,CAAAA,QAAQD,oBAAoBC,KAAKC,KAAK;AAAA,YAAE,GAC9CqC;AAAAA,YAAM9C,UAET6C;AAAAA,UAAI,GANApC,KAOG,CACX;AAAA,QAAA,CACY,CAChB;AAAA,MAAA,CACY,CAAC;AAAA,IAAA,CACS;AAAA,EAAA,CACjB;AAEhB;"}
+{"version":3,"file":"Controls.js","sources":["../../../../src/components/Controls/Controls.tsx"],"sourcesContent":["import { Children, MouseEvent } from \"react\";\n\nimport { useDefaultProps } from \"@core/hooks/useDefaultProps\";\nimport { HvBaseProps, HvExtraProps } from \"@core/types/generic\";\nimport { HvButton } from \"@core/components/Button\";\nimport { HvMultiButton } from \"@core/components/MultiButton\";\nimport { setId } from \"@core/utils/setId\";\nimport { useControlled } from \"@core/hooks/useControlled\";\nimport { HvTableInstance } from \"@core/components/Table/hooks/useTable\";\nimport { ExtractNames } from \"@core/utils/classes\";\n\nimport { HvControlsContextProvider } from \"./context/ControlsContext\";\nimport { staticClasses, useClasses } from \"./Controls.styles\";\n\nexport { staticClasses as controlsClasses };\n\nexport type HvControlsClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvControlsViewConfiguration extends HvExtraProps {\n  id?: string;\n  label?: string;\n  icon?: React.ReactNode;\n}\n\nexport interface HvControlsProps extends HvBaseProps {\n  /**\n   * An instance of useHvTable or useTable used to manage the data\n   * if this is not provided data sorting and search must be handled externally\n   */\n  callbacks?: {\n    setSortBy?: HvTableInstance[\"setSortBy\"];\n    setGlobalFilter?: HvTableInstance[\"setGlobalFilter\"];\n  };\n  /**\n   * Views configuration required for the view buttons\n   */\n  views?: HvControlsViewConfiguration[];\n  /**\n   * What view is selected by default\n   */\n  defaultView?: string;\n  /**\n   * Sets the selected view to be the one specified\n   * if specified the component is in a controlled state and it won't change it state\n   * unless specified externally\n   */\n  selectedView?: string;\n  /**\n   * Callback called when the view switcher button is pressed\n   */\n  onViewChange?: (event: MouseEvent<HTMLButtonElement>, id: string) => void;\n  /**\n   * if `true` the button to switch views is not rendered\n   */\n  hideViewSwitcher?: boolean;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvControlsClasses;\n}\n\nexport const HvControls = (props: HvControlsProps) => {\n  const {\n    id,\n    className,\n    classes: classesProp,\n    views,\n    callbacks,\n    selectedView,\n    defaultView,\n    children,\n    hideViewSwitcher = false,\n    onViewChange,\n  } = useDefaultProps(\"HvControls\", props);\n\n  const { classes, cx } = useClasses(classesProp);\n\n  const [currentView, setCurrentView] = useControlled(\n    selectedView,\n    defaultView\n  );\n\n  const onViewChangeHandler = (\n    evt: MouseEvent<HTMLButtonElement>,\n    btnId: any\n  ) => {\n    setCurrentView(btnId);\n    onViewChange?.(evt, btnId);\n  };\n\n  const onSearchHandler = (value: any) => callbacks?.setGlobalFilter?.(value);\n  const onSortHandler = (value: any) =>\n    callbacks?.setSortBy?.([\n      {\n        id: value?.accessor,\n        desc: value?.desc,\n      },\n    ]);\n\n  const childrenCount = Children.count(children);\n  const childrenArray = Children.toArray(children);\n\n  const childrenIndexCut =\n    childrenCount > 0 ? Math.round(childrenCount * 0.5) : 0;\n  const leftChildren = childrenArray.slice(0, childrenIndexCut);\n  const rightChildren = childrenArray.slice(\n    childrenIndexCut,\n    childrenCount || 0\n  );\n\n  return (\n    <div id={id} className={cx(classes.root, className)}>\n      <HvControlsContextProvider\n        value={{\n          onSearch: onSearchHandler,\n          onSort: onSortHandler,\n        }}\n      >\n        <div className={cx(classes.section, classes.leftSection)}>\n          {leftChildren}\n        </div>\n        <div className={cx(classes.section, classes.rightSection)}>\n          {rightChildren}\n          {views && !hideViewSwitcher && views?.length > 0 && (\n            <HvMultiButton id={setId(id, \"view-multi-button\")}>\n              {views.map(({ id: btnId, icon, ...others }) => (\n                <HvButton\n                  id={btnId}\n                  key={btnId}\n                  icon\n                  selected={currentView === btnId}\n                  onClick={(evt) => onViewChangeHandler(evt, btnId)}\n                  {...others}\n                >\n                  {icon}\n                </HvButton>\n              ))}\n            </HvMultiButton>\n          )}\n        </div>\n      </HvControlsContextProvider>\n    </div>\n  );\n};\n"],"names":["HvControls","props","id","className","classes","classesProp","views","callbacks","selectedView","defaultView","children","hideViewSwitcher","onViewChange","useDefaultProps","cx","useClasses","currentView","setCurrentView","useControlled","onViewChangeHandler","evt","btnId","onSearchHandler","value","setGlobalFilter","onSortHandler","setSortBy","accessor","desc","childrenCount","Children","count","childrenArray","toArray","childrenIndexCut","Math","round","leftChildren","slice","rightChildren","root","HvControlsContextProvider","onSearch","onSort","_jsx","section","leftSection","_jsxs","rightSection","length","HvMultiButton","setId","map","icon","others","HvButton","selected","onClick"],"mappings":";;;;;;;;;;AA2DaA,MAAAA,aAAaA,CAACC,UAA2B;AAC9C,QAAA;AAAA,IACJC;AAAAA,IACAC;AAAAA,IACAC,SAASC;AAAAA,IACTC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC,mBAAmB;AAAA,IACnBC;AAAAA,EAAAA,IACEC,gBAAgB,cAAcZ,KAAK;AAEjC,QAAA;AAAA,IAAEG;AAAAA,IAASU;AAAAA,EAAAA,IAAOC,WAAWV,WAAW;AAE9C,QAAM,CAACW,aAAaC,cAAc,IAAIC,cACpCV,cACAC,WACF;AAEMU,QAAAA,sBAAsBA,CAC1BC,KACAC,UACG;AACHJ,mBAAeI,KAAK;AACpBT,iDAAeQ,KAAKC;AAAAA,EAAK;AAG3B,QAAMC,kBAAkBA,CAACC,UAAehB;;AAAAA,wDAAWiB,oBAAXjB,mCAA6BgB;AAAAA;AACrE,QAAME,gBAAgBA,CAACF;;AACrBhB,wDAAWmB,cAAXnB,mCAAuB,CACrB;AAAA,MACEL,IAAIqB,+BAAOI;AAAAA,MACXC,MAAML,+BAAOK;AAAAA,IACd,CAAA;AAAA;AAGCC,QAAAA,gBAAgBC,SAASC,MAAMrB,QAAQ;AACvCsB,QAAAA,gBAAgBF,SAASG,QAAQvB,QAAQ;AAE/C,QAAMwB,mBACJL,gBAAgB,IAAIM,KAAKC,MAAMP,gBAAgB,GAAG,IAAI;AACxD,QAAMQ,eAAeL,cAAcM,MAAM,GAAGJ,gBAAgB;AAC5D,QAAMK,gBAAgBP,cAAcM,MAClCJ,kBACAL,iBAAiB,CACnB;AAEA,6BACE,OAAA;AAAA,IAAK3B;AAAAA,IAAQC,WAAWW,GAAGV,QAAQoC,MAAMrC,SAAS;AAAA,IAAEO,+BACjD+B,2BAAyB;AAAA,MACxBlB,OAAO;AAAA,QACLmB,UAAUpB;AAAAA,QACVqB,QAAQlB;AAAAA,MACV;AAAA,MAAEf,WAEFkC,oBAAA,OAAA;AAAA,QAAKzC,WAAWW,GAAGV,QAAQyC,SAASzC,QAAQ0C,WAAW;AAAA,QAAEpC,UACtD2B;AAAAA,MAAAA,CACE,GACLU,qBAAA,OAAA;AAAA,QAAK5C,WAAWW,GAAGV,QAAQyC,SAASzC,QAAQ4C,YAAY;AAAA,QAAEtC,WACvD6B,eACAjC,SAAS,CAACK,qBAAoBL,+BAAO2C,UAAS,KAC7CL,oBAACM,eAAa;AAAA,UAAChD,IAAIiD,MAAMjD,IAAI,mBAAmB;AAAA,UAAEQ,UAC/CJ,MAAM8C,IAAI,CAAC;AAAA,YAAElD,IAAImB;AAAAA,YAAOgC;AAAAA,YAAM,GAAGC;AAAAA,UAAAA,0BAC/BC,UAAQ;AAAA,YACPrD,IAAImB;AAAAA,YAEJgC,MAAI;AAAA,YACJG,UAAUxC,gBAAgBK;AAAAA,YAC1BoC,SAAUrC,CAAAA,QAAQD,oBAAoBC,KAAKC,KAAK;AAAA,YAAE,GAC9CiC;AAAAA,YAAM5C,UAET2C;AAAAA,UAAI,GANAhC,KAOG,CACX;AAAA,QAAA,CACY,CAChB;AAAA,MAAA,CACE,CAAC;AAAA,IAAA,CACmB;AAAA,EAAA,CACxB;AAET;"}

package/dist/esm/components/Controls/Controls.styles.js

@@ -1,37 +1,23 @@
-import _styled from "@emotion/styled/base";
-function _EMOTION_STRINGIFIED_CSS_ERROR__() {
-  return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop).";
-}
-const StyledRoot = /* @__PURE__ */ _styled("div", process.env.NODE_ENV === "production" ? {
-  target: "e1pt6zdq1"
-} : {
-  target: "e1pt6zdq1",
-  label: "StyledRoot"
-})(process.env.NODE_ENV === "production" ? {
-  name: "eqz57s",
-  styles: "display:inline-flex;width:100%;justify-content:space-between"
-} : {
-  name: "eqz57s",
-  styles: "display:inline-flex;width:100%;justify-content:space-between",
-  map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9ob21lL3J1bm5lci93b3JrL2h2LXVpa2l0LXJlYWN0L2h2LXVpa2l0LXJlYWN0L3BhY2thZ2VzL2NvcmUvc3JjL2NvbXBvbmVudHMvQ29udHJvbHMvQ29udHJvbHMuc3R5bGVzLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFFMEIiLCJmaWxlIjoiL2hvbWUvcnVubmVyL3dvcmsvaHYtdWlraXQtcmVhY3QvaHYtdWlraXQtcmVhY3QvcGFja2FnZXMvY29yZS9zcmMvY29tcG9uZW50cy9Db250cm9scy9Db250cm9scy5zdHlsZXMudHN4Iiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHN0eWxlZCBmcm9tIFwiQGVtb3Rpb24vc3R5bGVkXCI7XG5cbmV4cG9ydCBjb25zdCBTdHlsZWRSb290ID0gc3R5bGVkKFwiZGl2XCIpKHtcbiAgZGlzcGxheTogXCJpbmxpbmUtZmxleFwiLFxuICB3aWR0aDogXCIxMDAlXCIsXG4gIGp1c3RpZnlDb250ZW50OiBcInNwYWNlLWJldHdlZW5cIixcbn0pO1xuXG5leHBvcnQgY29uc3QgU3R5bGVkU2VjdGlvbiA9IHN0eWxlZChcImRpdlwiKSh7XG4gIGRpc3BsYXk6IFwiaW5saW5lLWZsZXhcIixcbiAgYWxpZ25JdGVtczogXCJmbGV4LWVuZFwiLFxuICBnYXA6IDEwLFxufSk7XG4iXX0= */",
-  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
-});
-const StyledSection = /* @__PURE__ */ _styled("div", process.env.NODE_ENV === "production" ? {
-  target: "e1pt6zdq0"
-} : {
-  target: "e1pt6zdq0",
-  label: "StyledSection"
-})(process.env.NODE_ENV === "production" ? {
-  name: "9df6r",
-  styles: "display:inline-flex;align-items:flex-end;gap:10px"
-} : {
-  name: "9df6r",
-  styles: "display:inline-flex;align-items:flex-end;gap:10px",
-  map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9ob21lL3J1bm5lci93b3JrL2h2LXVpa2l0LXJlYWN0L2h2LXVpa2l0LXJlYWN0L3BhY2thZ2VzL2NvcmUvc3JjL2NvbXBvbmVudHMvQ29udHJvbHMvQ29udHJvbHMuc3R5bGVzLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFRNkIiLCJmaWxlIjoiL2hvbWUvcnVubmVyL3dvcmsvaHYtdWlraXQtcmVhY3QvaHYtdWlraXQtcmVhY3QvcGFja2FnZXMvY29yZS9zcmMvY29tcG9uZW50cy9Db250cm9scy9Db250cm9scy5zdHlsZXMudHN4Iiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHN0eWxlZCBmcm9tIFwiQGVtb3Rpb24vc3R5bGVkXCI7XG5cbmV4cG9ydCBjb25zdCBTdHlsZWRSb290ID0gc3R5bGVkKFwiZGl2XCIpKHtcbiAgZGlzcGxheTogXCJpbmxpbmUtZmxleFwiLFxuICB3aWR0aDogXCIxMDAlXCIsXG4gIGp1c3RpZnlDb250ZW50OiBcInNwYWNlLWJldHdlZW5cIixcbn0pO1xuXG5leHBvcnQgY29uc3QgU3R5bGVkU2VjdGlvbiA9IHN0eWxlZChcImRpdlwiKSh7XG4gIGRpc3BsYXk6IFwiaW5saW5lLWZsZXhcIixcbiAgYWxpZ25JdGVtczogXCJmbGV4LWVuZFwiLFxuICBnYXA6IDEwLFxufSk7XG4iXX0= */",
-  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+import { createClasses } from "../../utils/classes.js";
+const {
+  staticClasses,
+  useClasses
+} = createClasses("HvControls", {
+  root: {
+    display: "inline-flex",
+    width: "100%",
+    justifyContent: "space-between"
+  },
+  section: {
+    display: "inline-flex",
+    alignItems: "flex-end",
+    gap: 10
+  },
+  rightSection: {},
+  leftSection: {}
 });
 export {
-  StyledRoot,
-  StyledSection
+  staticClasses,
+  useClasses
 };
 //# sourceMappingURL=Controls.styles.js.map

package/dist/esm/components/Controls/Controls.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"Controls.styles.js","sources":["../../../../src/components/Controls/Controls.styles.tsx"],"sourcesContent":["import styled from \"@emotion/styled\";\n\nexport const StyledRoot = styled(\"div\")({\n  display: \"inline-flex\",\n  width: \"100%\",\n  justifyContent: \"space-between\",\n});\n\nexport const StyledSection = styled(\"div\")({\n  display: \"inline-flex\",\n  alignItems: \"flex-end\",\n  gap: 10,\n});\n"],"names":["StyledRoot","process","env","NODE_ENV","target","label","name","styles","map","toString","_EMOTION_STRINGIFIED_CSS_ERROR__","StyledSection"],"mappings":";;;;AAEO,MAAMA,aAAoB,wBAAA,OAAKC,QAAAC,IAAAC,aAAA,eAAA;AAAA,EAAAC,QAAA;AAAA,IAAA;AAAA,EAAAA,QAAA;AAAA,EAAAC,OAAA;AAAA,CAAA,EAACJ,QAAAC,IAAAC,aAAA,eAAA;AAAA,EAAAG,MAAA;AAAA,EAAAC,QAAA;AAAA,IAAA;AAAA,EAAAD,MAAA;AAAA,EAAAC,QAAA;AAAA,EAAAC,KAAA;AAAA,EAAAC,UAAAC;AAAA,CAItC;AAEM,MAAMC,gBAAuB,wBAAA,OAAKV,QAAAC,IAAAC,aAAA,eAAA;AAAA,EAAAC,QAAA;AAAA,IAAA;AAAA,EAAAA,QAAA;AAAA,EAAAC,OAAA;AAAA,CAAA,EAACJ,QAAAC,IAAAC,aAAA,eAAA;AAAA,EAAAG,MAAA;AAAA,EAAAC,QAAA;AAAA,IAAA;AAAA,EAAAD,MAAA;AAAA,EAAAC,QAAA;AAAA,EAAAC,KAAA;AAAA,EAAAC,UAAAC;AAAA,CAIzC;"}
+{"version":3,"file":"Controls.styles.js","sources":["../../../../src/components/Controls/Controls.styles.tsx"],"sourcesContent":["import { createClasses } from \"@core/utils/classes\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvControls\", {\n  root: {\n    display: \"inline-flex\",\n    width: \"100%\",\n    justifyContent: \"space-between\",\n  },\n  section: { display: \"inline-flex\", alignItems: \"flex-end\", gap: 10 },\n  rightSection: {},\n  leftSection: {},\n});\n"],"names":["staticClasses","useClasses","createClasses","root","display","width","justifyContent","section","alignItems","gap","rightSection","leftSection"],"mappings":";AAEa,MAAA;AAAA,EAAEA;AAAAA,EAAeC;AAAW,IAAIC,cAAc,cAAc;AAAA,EACvEC,MAAM;AAAA,IACJC,SAAS;AAAA,IACTC,OAAO;AAAA,IACPC,gBAAgB;AAAA,EAClB;AAAA,EACAC,SAAS;AAAA,IAAEH,SAAS;AAAA,IAAeI,YAAY;AAAA,IAAYC,KAAK;AAAA,EAAG;AAAA,EACnEC,cAAc,CAAC;AAAA,EACfC,aAAa,CAAC;AAChB,CAAC;"}

package/dist/esm/components/Controls/LeftControl/LeftControl.js

@@ -1,14 +1,13 @@
-import { clsx } from "clsx";
 import { useContext } from "react";
 import { setId } from "../../../utils/setId.js";
-import { StyledRoot } from "./LeftControl.styles.js";
-import leftControlClasses from "./leftControlClasses.js";
+import { useClasses } from "./LeftControl.styles.js";
+import { staticClasses } from "./LeftControl.styles.js";
 import { HvControlsContext } from "../context/ControlsContext.js";
 import { jsxs, jsx } from "@emotion/react/jsx-runtime";
 import { HvInput } from "../../Input/Input.js";
 const HvLeftControl = ({
   id,
-  classes,
+  classes: classesProp,
   className,
   children,
   placeholder = "Search",
@@ -17,6 +16,10 @@ const HvLeftControl = ({
   searchProps,
   ...others
 }) => {
+  const {
+    classes,
+    cx
+  } = useClasses(classesProp);
   const {
     onSearch: onSearchHandler
   } = useContext(HvControlsContext);
@@ -24,9 +27,9 @@ const HvLeftControl = ({
     onSearch == null ? void 0 : onSearch(e, value);
     onSearchHandler == null ? void 0 : onSearchHandler(value);
   };
-  return /* @__PURE__ */ jsxs(StyledRoot, {
+  return /* @__PURE__ */ jsxs("div", {
     id,
-    className: clsx(className, leftControlClasses.root, classes == null ? void 0 : classes.root),
+    className: cx(classes.root, className),
     ...others,
     children: [!hideSearch && /* @__PURE__ */ jsx(HvInput, {
       id: setId(id, "search-input"),
@@ -38,6 +41,7 @@ const HvLeftControl = ({
   });
 };
 export {
-  HvLeftControl
+  HvLeftControl,
+  staticClasses as leftControlClasses
 };
 //# sourceMappingURL=LeftControl.js.map

package/dist/esm/components/Controls/LeftControl/LeftControl.js.map

@@ -1 +1 @@
-{"version":3,"file":"LeftControl.js","sources":["../../../../../src/components/Controls/LeftControl/LeftControl.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\n\nimport { useContext } from \"react\";\n\nimport { HvBaseProps } from \"@core/types/generic\";\nimport { setId } from \"@core/utils/setId\";\nimport { HvInput, HvInputProps } from \"@core/components/Input\";\n\nimport { StyledRoot } from \"./LeftControl.styles\";\nimport leftControlClasses, { HvLeftControlClasses } from \"./leftControlClasses\";\nimport { HvControlsContext } from \"../context/ControlsContext\";\n\nexport interface HvLeftControlProps extends HvBaseProps {\n  /** if `true` the hide sort by dropdown is not rendered */\n  hideSearch?: boolean;\n  /** placeholder of the input */\n  placeholder?: string;\n  /** Callback called when a search action occurs */\n  onSearch?: (\n    event: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>,\n    value: string\n  ) => void;\n  /** Extra props passed to input */\n  searchProps?: HvInputProps;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvLeftControlClasses;\n}\n\nexport const HvLeftControl = ({\n  id,\n  classes,\n  className,\n  children,\n  placeholder = \"Search\",\n  onSearch,\n  hideSearch = false,\n  searchProps,\n  ...others\n}: HvLeftControlProps) => {\n  const { onSearch: onSearchHandler } = useContext(HvControlsContext);\n\n  const onChangeFilter: HvInputProps[\"onChange\"] = (e, value) => {\n    onSearch?.(e, value);\n    onSearchHandler?.(value);\n  };\n\n  return (\n    <StyledRoot\n      id={id}\n      className={clsx(className, leftControlClasses.root, classes?.root)}\n      {...others}\n    >\n      {!hideSearch && (\n        <HvInput\n          id={setId(id, \"search-input\")}\n          type=\"search\"\n          placeholder={placeholder}\n          onChange={onChangeFilter}\n          {...searchProps}\n        />\n      )}\n      {children}\n    </StyledRoot>\n  );\n};\n"],"names":["HvLeftControl","id","classes","className","children","placeholder","onSearch","hideSearch","searchProps","others","onSearchHandler","useContext","HvControlsContext","onChangeFilter","e","value","StyledRoot","clsx","leftControlClasses","root","HvInput","setId","type","onChange"],"mappings":";;;;;;;;AA4BO,MAAMA,gBAAgBA,CAAC;AAAA,EAC5BC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC,cAAc;AAAA,EACdC;AAAAA,EACAC,aAAa;AAAA,EACbC;AAAAA,EACA,GAAGC;AACe,MAAM;AAClB,QAAA;AAAA,IAAEH,UAAUI;AAAAA,EAAAA,IAAoBC,WAAWC,iBAAiB;AAE5DC,QAAAA,iBAA2CA,CAACC,GAAGC,UAAU;AAC7DT,yCAAWQ,GAAGC;AACdL,uDAAkBK;AAAAA,EAAK;AAGzB,8BACGC,YAAU;AAAA,IACTf;AAAAA,IACAE,WAAWc,KAAKd,WAAWe,mBAAmBC,MAAMjB,mCAASiB,IAAI;AAAA,IAAE,GAC/DV;AAAAA,IAAML,WAET,CAACG,kCACCa,SAAO;AAAA,MACNnB,IAAIoB,MAAMpB,IAAI,cAAc;AAAA,MAC5BqB,MAAK;AAAA,MACLjB;AAAAA,MACAkB,UAAUV;AAAAA,MAAe,GACrBL;AAAAA,IACL,CAAA,GAEFJ,QAAQ;AAAA,EAAA,CACC;AAEhB;"}
+{"version":3,"file":"LeftControl.js","sources":["../../../../../src/components/Controls/LeftControl/LeftControl.tsx"],"sourcesContent":["import { useContext } from \"react\";\n\nimport { HvBaseProps } from \"@core/types/generic\";\nimport { setId } from \"@core/utils/setId\";\nimport { HvInput, HvInputProps } from \"@core/components/Input\";\nimport { ExtractNames } from \"@core/utils/classes\";\n\nimport { useClasses, staticClasses } from \"./LeftControl.styles\";\nimport { HvControlsContext } from \"../context/ControlsContext\";\n\nexport { staticClasses as leftControlClasses };\n\nexport type HvLeftControlClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvLeftControlProps extends HvBaseProps {\n  /** if `true` the hide sort by dropdown is not rendered */\n  hideSearch?: boolean;\n  /** placeholder of the input */\n  placeholder?: string;\n  /** Callback called when a search action occurs */\n  onSearch?: (\n    event: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>,\n    value: string\n  ) => void;\n  /** Extra props passed to input */\n  searchProps?: HvInputProps;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvLeftControlClasses;\n}\n\nexport const HvLeftControl = ({\n  id,\n  classes: classesProp,\n  className,\n  children,\n  placeholder = \"Search\",\n  onSearch,\n  hideSearch = false,\n  searchProps,\n  ...others\n}: HvLeftControlProps) => {\n  const { classes, cx } = useClasses(classesProp);\n\n  const { onSearch: onSearchHandler } = useContext(HvControlsContext);\n\n  const onChangeFilter: HvInputProps[\"onChange\"] = (e, value) => {\n    onSearch?.(e, value);\n    onSearchHandler?.(value);\n  };\n\n  return (\n    <div id={id} className={cx(classes.root, className)} {...others}>\n      {!hideSearch && (\n        <HvInput\n          id={setId(id, \"search-input\")}\n          type=\"search\"\n          placeholder={placeholder}\n          onChange={onChangeFilter}\n          {...searchProps}\n        />\n      )}\n      {children}\n    </div>\n  );\n};\n"],"names":["HvLeftControl","id","classes","classesProp","className","children","placeholder","onSearch","hideSearch","searchProps","others","cx","useClasses","onSearchHandler","useContext","HvControlsContext","onChangeFilter","e","value","root","HvInput","setId","type","onChange"],"mappings":";;;;;;;AA8BO,MAAMA,gBAAgBA,CAAC;AAAA,EAC5BC;AAAAA,EACAC,SAASC;AAAAA,EACTC;AAAAA,EACAC;AAAAA,EACAC,cAAc;AAAA,EACdC;AAAAA,EACAC,aAAa;AAAA,EACbC;AAAAA,EACA,GAAGC;AACe,MAAM;AAClB,QAAA;AAAA,IAAER;AAAAA,IAASS;AAAAA,EAAAA,IAAOC,WAAWT,WAAW;AAExC,QAAA;AAAA,IAAEI,UAAUM;AAAAA,EAAAA,IAAoBC,WAAWC,iBAAiB;AAE5DC,QAAAA,iBAA2CA,CAACC,GAAGC,UAAU;AAC7DX,yCAAWU,GAAGC;AACdL,uDAAkBK;AAAAA,EAAK;AAGzB,8BACE,OAAA;AAAA,IAAKjB;AAAAA,IAAQG,WAAWO,GAAGT,QAAQiB,MAAMf,SAAS;AAAA,IAAE,GAAKM;AAAAA,IAAML,WAC5D,CAACG,kCACCY,SAAO;AAAA,MACNnB,IAAIoB,MAAMpB,IAAI,cAAc;AAAA,MAC5BqB,MAAK;AAAA,MACLhB;AAAAA,MACAiB,UAAUP;AAAAA,MAAe,GACrBP;AAAAA,IACL,CAAA,GAEFJ,QAAQ;AAAA,EAAA,CACN;AAET;"}

package/dist/esm/components/Controls/LeftControl/LeftControl.styles.js

@@ -1,22 +1,15 @@
-import _styled from "@emotion/styled/base";
-function _EMOTION_STRINGIFIED_CSS_ERROR__() {
-  return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop).";
-}
-const StyledRoot = /* @__PURE__ */ _styled("div", process.env.NODE_ENV === "production" ? {
-  target: "e1ezp8s40"
-} : {
-  target: "e1ezp8s40",
-  label: "StyledRoot"
-})(process.env.NODE_ENV === "production" ? {
-  name: "f3qv9t",
-  styles: "display:inline-flex;gap:10px"
-} : {
-  name: "f3qv9t",
-  styles: "display:inline-flex;gap:10px",
-  map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9ob21lL3J1bm5lci93b3JrL2h2LXVpa2l0LXJlYWN0L2h2LXVpa2l0LXJlYWN0L3BhY2thZ2VzL2NvcmUvc3JjL2NvbXBvbmVudHMvQ29udHJvbHMvTGVmdENvbnRyb2wvTGVmdENvbnRyb2wuc3R5bGVzLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFFMEIiLCJmaWxlIjoiL2hvbWUvcnVubmVyL3dvcmsvaHYtdWlraXQtcmVhY3QvaHYtdWlraXQtcmVhY3QvcGFja2FnZXMvY29yZS9zcmMvY29tcG9uZW50cy9Db250cm9scy9MZWZ0Q29udHJvbC9MZWZ0Q29udHJvbC5zdHlsZXMudHN4Iiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHN0eWxlZCBmcm9tIFwiQGVtb3Rpb24vc3R5bGVkXCI7XG5cbmV4cG9ydCBjb25zdCBTdHlsZWRSb290ID0gc3R5bGVkKFwiZGl2XCIpKHtcbiAgZGlzcGxheTogXCJpbmxpbmUtZmxleFwiLFxuICBnYXA6IDEwLFxufSk7XG4iXX0= */",
-  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+import { createClasses } from "../../../utils/classes.js";
+const {
+  staticClasses,
+  useClasses
+} = createClasses("HvLeftControl", {
+  root: {
+    display: "inline-flex",
+    gap: 10
+  }
 });
 export {
-  StyledRoot
+  staticClasses,
+  useClasses
 };
 //# sourceMappingURL=LeftControl.styles.js.map

package/dist/esm/components/Controls/LeftControl/LeftControl.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"LeftControl.styles.js","sources":["../../../../../src/components/Controls/LeftControl/LeftControl.styles.tsx"],"sourcesContent":["import styled from \"@emotion/styled\";\n\nexport const StyledRoot = styled(\"div\")({\n  display: \"inline-flex\",\n  gap: 10,\n});\n"],"names":["StyledRoot","process","env","NODE_ENV","target","label","name","styles","map","toString","_EMOTION_STRINGIFIED_CSS_ERROR__"],"mappings":";;;;AAEO,MAAMA,aAAoB,wBAAA,OAAKC,QAAAC,IAAAC,aAAA,eAAA;AAAA,EAAAC,QAAA;AAAA,IAAA;AAAA,EAAAA,QAAA;AAAA,EAAAC,OAAA;AAAA,CAAA,EAACJ,QAAAC,IAAAC,aAAA,eAAA;AAAA,EAAAG,MAAA;AAAA,EAAAC,QAAA;AAAA,IAAA;AAAA,EAAAD,MAAA;AAAA,EAAAC,QAAA;AAAA,EAAAC,KAAA;AAAA,EAAAC,UAAAC;AAAA,CAGtC;"}
+{"version":3,"file":"LeftControl.styles.js","sources":["../../../../../src/components/Controls/LeftControl/LeftControl.styles.tsx"],"sourcesContent":["import { createClasses } from \"@core/utils/classes\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvLeftControl\", {\n  root: { display: \"inline-flex\", gap: 10 },\n});\n"],"names":["staticClasses","useClasses","createClasses","root","display","gap"],"mappings":";AAEa,MAAA;AAAA,EAAEA;AAAAA,EAAeC;AAAW,IAAIC,cAAc,iBAAiB;AAAA,EAC1EC,MAAM;AAAA,IAAEC,SAAS;AAAA,IAAeC,KAAK;AAAA,EAAG;AAC1C,CAAC;"}

package/dist/esm/components/Controls/RightControl/RightControl.js

@@ -1,13 +1,13 @@
-import { clsx } from "clsx";
 import { useState, useContext } from "react";
 import { setId } from "../../../utils/setId.js";
-import { StyledRoot, StyledDropdown } from "./RightControl.styles.js";
-import rightControlClasses from "./rightControlClasses.js";
+import { useClasses } from "./RightControl.styles.js";
+import { staticClasses } from "./RightControl.styles.js";
 import { HvControlsContext } from "../context/ControlsContext.js";
 import { jsxs, jsx } from "@emotion/react/jsx-runtime";
+import { HvDropdown } from "../../Dropdown/Dropdown.js";
 const HvRightControl = ({
   id,
-  classes,
+  classes: classesProp,
   className,
   children,
   values,
@@ -16,6 +16,10 @@ const HvRightControl = ({
   sortProps,
   ...others
 }) => {
+  const {
+    classes,
+    cx
+  } = useClasses(classesProp);
   const [dropDownValues, setDropdownValues] = useState(values);
   const {
     onSort: onSortHandler
@@ -28,14 +32,14 @@ const HvRightControl = ({
       selected: prevValue.id === value.id
     })));
   };
-  return /* @__PURE__ */ jsxs(StyledRoot, {
+  return /* @__PURE__ */ jsxs("div", {
     id,
-    className: clsx(className, rightControlClasses.root, classes == null ? void 0 : classes.root),
+    className: cx(classes.root, className),
     ...others,
-    children: [!hideSortBy && /* @__PURE__ */ jsx(StyledDropdown, {
+    children: [!hideSortBy && /* @__PURE__ */ jsx(HvDropdown, {
       id: setId(id, "sort-by-dropdown"),
       values: dropDownValues,
-      className: clsx(rightControlClasses.sortDropdown, classes == null ? void 0 : classes.sortDropdown),
+      className: classes.sortDropdown,
       onChange: handleChangeSort,
       singleSelectionToggle: false,
       ...sortProps
@@ -43,6 +47,7 @@ const HvRightControl = ({
   });
 };
 export {
-  HvRightControl
+  HvRightControl,
+  staticClasses as rightControlClasses
 };
 //# sourceMappingURL=RightControl.js.map

package/dist/esm/components/Controls/RightControl/RightControl.js.map

@@ -1 +1 @@
-{"version":3,"file":"RightControl.js","sources":["../../../../../src/components/Controls/RightControl/RightControl.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\n\nimport { useContext, useState } from \"react\";\n\nimport { HvBaseProps } from \"@core/types/generic\";\nimport { setId } from \"@core/utils/setId\";\nimport { HvDropdownProps } from \"@core/components/Dropdown\";\nimport { HvListValue } from \"@core/components/List\";\n\nimport { StyledDropdown, StyledRoot } from \"./RightControl.styles\";\nimport rightControlClasses, {\n  HvRightControlClasses,\n} from \"./rightControlClasses\";\nimport { HvControlsContext } from \"../context/ControlsContext\";\n\nexport interface HvRightListControls extends HvListValue {\n  accessor: string;\n  desc: boolean;\n}\n\nexport interface HvRightControlProps extends HvBaseProps {\n  /** if `true` the hide sort by dropdown is not rendered */\n  hideSortBy?: boolean;\n  /** options for the dropdown to sort */\n  values?: HvRightListControls[];\n  /** Callback called when a sort action occurs */\n  onSort?: (selected: HvRightListControls | undefined) => void;\n  /** Extra props passed to dropdown */\n  sortProps?: HvDropdownProps;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvRightControlClasses;\n}\n\nexport const HvRightControl = ({\n  id,\n  classes,\n  className,\n  children,\n  values,\n  onSort,\n  hideSortBy = false,\n  sortProps,\n  ...others\n}: HvRightControlProps) => {\n  const [dropDownValues, setDropdownValues] = useState(values);\n\n  const { onSort: onSortHandler } = useContext(HvControlsContext);\n\n  const handleChangeSort: HvDropdownProps[\"onChange\"] = (value: any) => {\n    onSort?.(value);\n    onSortHandler?.(value);\n    // this should be changed when dropdown changes his \"values\" behavior\n    setDropdownValues((prevValues) =>\n      prevValues?.map((prevValue) => ({\n        ...prevValue,\n        selected: prevValue.id === value.id,\n      }))\n    );\n  };\n\n  return (\n    <StyledRoot\n      id={id}\n      className={clsx(className, rightControlClasses.root, classes?.root)}\n      {...others}\n    >\n      {!hideSortBy && (\n        <StyledDropdown\n          id={setId(id, \"sort-by-dropdown\")}\n          values={dropDownValues}\n          className={clsx(\n            rightControlClasses.sortDropdown,\n            classes?.sortDropdown\n          )}\n          onChange={handleChangeSort}\n          singleSelectionToggle={false}\n          {...sortProps}\n        />\n      )}\n      {children}\n    </StyledRoot>\n  );\n};\n"],"names":["HvRightControl","id","classes","className","children","values","onSort","hideSortBy","sortProps","others","dropDownValues","setDropdownValues","useState","onSortHandler","useContext","HvControlsContext","handleChangeSort","value","prevValues","map","prevValue","selected","StyledRoot","clsx","rightControlClasses","root","StyledDropdown","setId","sortDropdown","onChange","singleSelectionToggle"],"mappings":";;;;;;;AAiCO,MAAMA,iBAAiBA,CAAC;AAAA,EAC7BC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC,aAAa;AAAA,EACbC;AAAAA,EACA,GAAGC;AACgB,MAAM;AACzB,QAAM,CAACC,gBAAgBC,iBAAiB,IAAIC,SAASP,MAAM;AAErD,QAAA;AAAA,IAAEC,QAAQO;AAAAA,EAAAA,IAAkBC,WAAWC,iBAAiB;AAExDC,QAAAA,mBAAgDA,CAACC,UAAe;AACpEX,qCAASW;AACTJ,mDAAgBI;AAEGC,sBAAAA,CAAAA,eACjBA,yCAAYC,IAAKC,CAAe,eAAA;AAAA,MAC9B,GAAGA;AAAAA,MACHC,UAAUD,UAAUnB,OAAOgB,MAAMhB;AAAAA,OAErC;AAAA,EAAA;AAGF,8BACGqB,YAAU;AAAA,IACTrB;AAAAA,IACAE,WAAWoB,KAAKpB,WAAWqB,oBAAoBC,MAAMvB,mCAASuB,IAAI;AAAA,IAAE,GAChEhB;AAAAA,IAAML,WAET,CAACG,kCACCmB,gBAAc;AAAA,MACbzB,IAAI0B,MAAM1B,IAAI,kBAAkB;AAAA,MAChCI,QAAQK;AAAAA,MACRP,WAAWoB,KACTC,oBAAoBI,cACpB1B,mCAAS0B,YACX;AAAA,MACAC,UAAUb;AAAAA,MACVc,uBAAuB;AAAA,MAAM,GACzBtB;AAAAA,IACL,CAAA,GAEFJ,QAAQ;AAAA,EAAA,CACC;AAEhB;"}
+{"version":3,"file":"RightControl.js","sources":["../../../../../src/components/Controls/RightControl/RightControl.tsx"],"sourcesContent":["import { useContext, useState } from \"react\";\n\nimport { HvBaseProps } from \"@core/types/generic\";\nimport { setId } from \"@core/utils/setId\";\nimport { HvDropdown, HvDropdownProps } from \"@core/components/Dropdown\";\nimport { HvListValue } from \"@core/components/List\";\nimport { ExtractNames } from \"@core/utils/classes\";\n\nimport { useClasses, staticClasses } from \"./RightControl.styles\";\nimport { HvControlsContext } from \"../context/ControlsContext\";\n\nexport { staticClasses as rightControlClasses };\n\nexport type HvRightControlClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvRightListControls extends HvListValue {\n  accessor: string;\n  desc: boolean;\n}\n\nexport interface HvRightControlProps extends HvBaseProps {\n  /** if `true` the hide sort by dropdown is not rendered */\n  hideSortBy?: boolean;\n  /** options for the dropdown to sort */\n  values?: HvRightListControls[];\n  /** Callback called when a sort action occurs */\n  onSort?: (selected: HvRightListControls | undefined) => void;\n  /** Extra props passed to dropdown */\n  sortProps?: HvDropdownProps;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvRightControlClasses;\n}\n\nexport const HvRightControl = ({\n  id,\n  classes: classesProp,\n  className,\n  children,\n  values,\n  onSort,\n  hideSortBy = false,\n  sortProps,\n  ...others\n}: HvRightControlProps) => {\n  const { classes, cx } = useClasses(classesProp);\n\n  const [dropDownValues, setDropdownValues] = useState(values);\n\n  const { onSort: onSortHandler } = useContext(HvControlsContext);\n\n  const handleChangeSort: HvDropdownProps[\"onChange\"] = (value: any) => {\n    onSort?.(value);\n    onSortHandler?.(value);\n    // this should be changed when dropdown changes his \"values\" behavior\n    setDropdownValues((prevValues) =>\n      prevValues?.map((prevValue) => ({\n        ...prevValue,\n        selected: prevValue.id === value.id,\n      }))\n    );\n  };\n\n  return (\n    <div id={id} className={cx(classes.root, className)} {...others}>\n      {!hideSortBy && (\n        <HvDropdown\n          id={setId(id, \"sort-by-dropdown\")}\n          values={dropDownValues}\n          className={classes.sortDropdown}\n          onChange={handleChangeSort}\n          singleSelectionToggle={false}\n          {...sortProps}\n        />\n      )}\n      {children}\n    </div>\n  );\n};\n"],"names":["HvRightControl","id","classes","classesProp","className","children","values","onSort","hideSortBy","sortProps","others","cx","useClasses","dropDownValues","setDropdownValues","useState","onSortHandler","useContext","HvControlsContext","handleChangeSort","value","prevValues","map","prevValue","selected","root","HvDropdown","setId","sortDropdown","onChange","singleSelectionToggle"],"mappings":";;;;;;;AAiCO,MAAMA,iBAAiBA,CAAC;AAAA,EAC7BC;AAAAA,EACAC,SAASC;AAAAA,EACTC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC,aAAa;AAAA,EACbC;AAAAA,EACA,GAAGC;AACgB,MAAM;AACnB,QAAA;AAAA,IAAER;AAAAA,IAASS;AAAAA,EAAAA,IAAOC,WAAWT,WAAW;AAE9C,QAAM,CAACU,gBAAgBC,iBAAiB,IAAIC,SAAST,MAAM;AAErD,QAAA;AAAA,IAAEC,QAAQS;AAAAA,EAAAA,IAAkBC,WAAWC,iBAAiB;AAExDC,QAAAA,mBAAgDA,CAACC,UAAe;AACpEb,qCAASa;AACTJ,mDAAgBI;AAEGC,sBAAAA,CAAAA,eACjBA,yCAAYC,IAAKC,CAAe,eAAA;AAAA,MAC9B,GAAGA;AAAAA,MACHC,UAAUD,UAAUtB,OAAOmB,MAAMnB;AAAAA,OAErC;AAAA,EAAA;AAGF,8BACE,OAAA;AAAA,IAAKA;AAAAA,IAAQG,WAAWO,GAAGT,QAAQuB,MAAMrB,SAAS;AAAA,IAAE,GAAKM;AAAAA,IAAML,WAC5D,CAACG,kCACCkB,YAAU;AAAA,MACTzB,IAAI0B,MAAM1B,IAAI,kBAAkB;AAAA,MAChCK,QAAQO;AAAAA,MACRT,WAAWF,QAAQ0B;AAAAA,MACnBC,UAAUV;AAAAA,MACVW,uBAAuB;AAAA,MAAM,GACzBrB;AAAAA,IACL,CAAA,GAEFJ,QAAQ;AAAA,EAAA,CACN;AAET;"}

package/dist/esm/components/Controls/RightControl/RightControl.styles.js

@@ -1,41 +1,18 @@
-import _styled from "@emotion/styled/base";
-import { jsx } from "@emotion/react/jsx-runtime";
-import { HvDropdown } from "../../Dropdown/Dropdown.js";
-function _EMOTION_STRINGIFIED_CSS_ERROR__() {
-  return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop).";
-}
-const StyledRoot = /* @__PURE__ */ _styled("div", process.env.NODE_ENV === "production" ? {
-  target: "e16dy5r71"
-} : {
-  target: "e16dy5r71",
-  label: "StyledRoot"
-})(process.env.NODE_ENV === "production" ? {
-  name: "f3qv9t",
-  styles: "display:inline-flex;gap:10px"
-} : {
-  name: "f3qv9t",
-  styles: "display:inline-flex;gap:10px",
-  map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9ob21lL3J1bm5lci93b3JrL2h2LXVpa2l0LXJlYWN0L2h2LXVpa2l0LXJlYWN0L3BhY2thZ2VzL2NvcmUvc3JjL2NvbXBvbmVudHMvQ29udHJvbHMvUmlnaHRDb250cm9sL1JpZ2h0Q29udHJvbC5zdHlsZXMudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUkwQiIsImZpbGUiOiIvaG9tZS9ydW5uZXIvd29yay9odi11aWtpdC1yZWFjdC9odi11aWtpdC1yZWFjdC9wYWNrYWdlcy9jb3JlL3NyYy9jb21wb25lbnRzL0NvbnRyb2xzL1JpZ2h0Q29udHJvbC9SaWdodENvbnRyb2wuc3R5bGVzLnRzeCIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCBzdHlsZWQgZnJvbSBcIkBlbW90aW9uL3N0eWxlZFwiO1xuXG5pbXBvcnQgeyBIdkRyb3Bkb3duLCBIdkRyb3Bkb3duUHJvcHMgfSBmcm9tIFwiQGNvcmUvY29tcG9uZW50cy9Ecm9wZG93blwiO1xuXG5leHBvcnQgY29uc3QgU3R5bGVkUm9vdCA9IHN0eWxlZChcImRpdlwiKSh7XG4gIGRpc3BsYXk6IFwiaW5saW5lLWZsZXhcIixcbiAgZ2FwOiAxMCxcbn0pO1xuXG5leHBvcnQgY29uc3QgU3R5bGVkRHJvcGRvd24gPSBzdHlsZWQoKHByb3BzOiBIdkRyb3Bkb3duUHJvcHMpID0+IChcbiAgPEh2RHJvcGRvd24gey4uLnByb3BzfSAvPlxuKSkoe1xuICBtaW5XaWR0aDogMjAwLFxufSk7XG4iXX0= */",
-  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
-});
-const StyledDropdown = /* @__PURE__ */ _styled((props) => /* @__PURE__ */ jsx(HvDropdown, {
-  ...props
-}), process.env.NODE_ENV === "production" ? {
-  target: "e16dy5r70"
-} : {
-  target: "e16dy5r70",
-  label: "StyledDropdown"
-})(process.env.NODE_ENV === "production" ? {
-  name: "16gsvie",
-  styles: "min-width:200px"
-} : {
-  name: "16gsvie",
-  styles: "min-width:200px",
-  map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9ob21lL3J1bm5lci93b3JrL2h2LXVpa2l0LXJlYWN0L2h2LXVpa2l0LXJlYWN0L3BhY2thZ2VzL2NvcmUvc3JjL2NvbXBvbmVudHMvQ29udHJvbHMvUmlnaHRDb250cm9sL1JpZ2h0Q29udHJvbC5zdHlsZXMudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQVM4QiIsImZpbGUiOiIvaG9tZS9ydW5uZXIvd29yay9odi11aWtpdC1yZWFjdC9odi11aWtpdC1yZWFjdC9wYWNrYWdlcy9jb3JlL3NyYy9jb21wb25lbnRzL0NvbnRyb2xzL1JpZ2h0Q29udHJvbC9SaWdodENvbnRyb2wuc3R5bGVzLnRzeCIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCBzdHlsZWQgZnJvbSBcIkBlbW90aW9uL3N0eWxlZFwiO1xuXG5pbXBvcnQgeyBIdkRyb3Bkb3duLCBIdkRyb3Bkb3duUHJvcHMgfSBmcm9tIFwiQGNvcmUvY29tcG9uZW50cy9Ecm9wZG93blwiO1xuXG5leHBvcnQgY29uc3QgU3R5bGVkUm9vdCA9IHN0eWxlZChcImRpdlwiKSh7XG4gIGRpc3BsYXk6IFwiaW5saW5lLWZsZXhcIixcbiAgZ2FwOiAxMCxcbn0pO1xuXG5leHBvcnQgY29uc3QgU3R5bGVkRHJvcGRvd24gPSBzdHlsZWQoKHByb3BzOiBIdkRyb3Bkb3duUHJvcHMpID0+IChcbiAgPEh2RHJvcGRvd24gey4uLnByb3BzfSAvPlxuKSkoe1xuICBtaW5XaWR0aDogMjAwLFxufSk7XG4iXX0= */",
-  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+import { createClasses } from "../../../utils/classes.js";
+const {
+  staticClasses,
+  useClasses
+} = createClasses("HvRightControl", {
+  root: {
+    display: "inline-flex",
+    gap: 10
+  },
+  sortDropdown: {
+    minWidth: 200
+  }
 });
 export {
-  StyledDropdown,
-  StyledRoot
+  staticClasses,
+  useClasses
 };
 //# sourceMappingURL=RightControl.styles.js.map

package/dist/esm/components/Controls/RightControl/RightControl.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"RightControl.styles.js","sources":["../../../../../src/components/Controls/RightControl/RightControl.styles.tsx"],"sourcesContent":["import styled from \"@emotion/styled\";\n\nimport { HvDropdown, HvDropdownProps } from \"@core/components/Dropdown\";\n\nexport const StyledRoot = styled(\"div\")({\n  display: \"inline-flex\",\n  gap: 10,\n});\n\nexport const StyledDropdown = styled((props: HvDropdownProps) => (\n  <HvDropdown {...props} />\n))({\n  minWidth: 200,\n});\n"],"names":["StyledRoot","process","env","NODE_ENV","target","label","name","styles","map","toString","_EMOTION_STRINGIFIED_CSS_ERROR__","StyledDropdown","_styled","props","HvDropdown"],"mappings":";;;;;;AAIO,MAAMA,aAAoB,wBAAA,OAAKC,QAAAC,IAAAC,aAAA,eAAA;AAAA,EAAAC,QAAA;AAAA,IAAA;AAAA,EAAAA,QAAA;AAAA,EAAAC,OAAA;AAAA,CAAA,EAACJ,QAAAC,IAAAC,aAAA,eAAA;AAAA,EAAAG,MAAA;AAAA,EAAAC,QAAA;AAAA,IAAA;AAAA,EAAAD,MAAA;AAAA,EAAAC,QAAA;AAAA,EAAAC,KAAA;AAAA,EAAAC,UAAAC;AAAA,CAGtC;AAEM,MAAMC,iBAAiBC,wBAAO,CAACC,8BACnCC,YAAU;AAAA,EAAA,GAAKD;AAAK,CAAG,GACzBZ,QAAAC,IAAAC,aAAA,eAAA;AAAA,EAAAC,QAAA;AAAA,IAAA;AAAA,EAAAA,QAAA;AAAA,EAAAC,OAAA;AAAA,CAAA,EAACJ,QAAAC,IAAAC,aAAA,eAAA;AAAA,EAAAG,MAAA;AAAA,EAAAC,QAAA;AAAA,IAAA;AAAA,EAAAD,MAAA;AAAA,EAAAC,QAAA;AAAA,EAAAC,KAAA;AAAA,EAAAC,UAAAC;AAAA,CAED;"}
+{"version":3,"file":"RightControl.styles.js","sources":["../../../../../src/components/Controls/RightControl/RightControl.styles.tsx"],"sourcesContent":["import { createClasses } from \"@core/utils/classes\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvRightControl\", {\n  root: { display: \"inline-flex\", gap: 10 },\n  sortDropdown: { minWidth: 200 },\n});\n"],"names":["staticClasses","useClasses","createClasses","root","display","gap","sortDropdown","minWidth"],"mappings":";AAEa,MAAA;AAAA,EAAEA;AAAAA,EAAeC;AAAW,IAAIC,cAAc,kBAAkB;AAAA,EAC3EC,MAAM;AAAA,IAAEC,SAAS;AAAA,IAAeC,KAAK;AAAA,EAAG;AAAA,EACxCC,cAAc;AAAA,IAAEC,UAAU;AAAA,EAAI;AAChC,CAAC;"}