@hitachivantara/uikit-react-core 5.39.0 → 5.39.2

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

@@ -21,39 +21,57 @@ const HvControls = (props) => {
     hideViewSwitcher = false,
     onViewChange
   } = useDefaultProps("HvControls", props);
-  const {
-    classes,
-    cx
-  } = useClasses(classesProp);
-  const [currentView, setCurrentView] = useControlled(selectedView, defaultView);
+  const { classes, cx } = useClasses(classesProp);
+  const [currentView, setCurrentView] = useControlled(
+    selectedView,
+    defaultView
+  );
   const onViewChangeHandler = (evt, btnId) => {
     setCurrentView(btnId);
     onViewChange?.(evt, btnId);
   };
   const onSearchHandler = (value) => callbacks?.setGlobalFilter?.(value);
-  const onSortHandler = (value) => callbacks?.setSortBy?.([{
-    id: value?.accessor,
-    desc: value?.desc
-  }]);
+  const onSortHandler = (value) => callbacks?.setSortBy?.([
+    {
+      id: value?.accessor,
+      desc: value?.desc
+    }
+  ]);
   const childrenCount = Children.count(children);
   const childrenArray = Children.toArray(children);
   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("div", { id, className: cx(classes.root, className), children: /* @__PURE__ */ jsxs(HvControlsContextProvider, { value: {
-    onSearch: onSearchHandler,
-    onSort: onSortHandler
-  }, children: [
-    /* @__PURE__ */ jsx("div", { className: cx(classes.section, classes.leftSection), children: leftChildren }),
-    /* @__PURE__ */ jsxs("div", { className: cx(classes.section, classes.rightSection), children: [
-      rightChildren,
-      views && !hideViewSwitcher && views?.length > 0 && /* @__PURE__ */ jsx(HvMultiButton, { id: setId(id, "view-multi-button"), children: views.map(({
-        id: btnId,
-        icon,
-        ...others
-      }) => /* @__PURE__ */ jsx(HvButton, { id: btnId, icon: true, selected: currentView === btnId, onClick: (evt) => onViewChangeHandler(evt, btnId), ...others, children: icon }, btnId)) })
-    ] })
-  ] }) });
+  const rightChildren = childrenArray.slice(
+    childrenIndexCut,
+    childrenCount || 0
+  );
+  return /* @__PURE__ */ jsx("div", { id, className: cx(classes.root, className), children: /* @__PURE__ */ jsxs(
+    HvControlsContextProvider,
+    {
+      value: {
+        onSearch: onSearchHandler,
+        onSort: onSortHandler
+      },
+      children: [
+        /* @__PURE__ */ jsx("div", { className: cx(classes.section, classes.leftSection), children: leftChildren }),
+        /* @__PURE__ */ jsxs("div", { className: cx(classes.section, classes.rightSection), children: [
+          rightChildren,
+          views && !hideViewSwitcher && views?.length > 0 && /* @__PURE__ */ jsx(HvMultiButton, { id: setId(id, "view-multi-button"), children: views.map(({ id: btnId, icon, ...others }) => /* @__PURE__ */ jsx(
+            HvButton,
+            {
+              id: btnId,
+              icon: true,
+              selected: currentView === btnId,
+              onClick: (evt) => onViewChangeHandler(evt, btnId),
+              ...others,
+              children: icon
+            },
+            btnId
+          )) })
+        ] })
+      ]
+    }
+  ) });
 };
 export {
   HvControls,

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\";\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","onSearch","onSort","section","leftSection","rightSection","length","setId","map","icon","others"],"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,mBAAeQ,KAAKC,KAAK;AAAA,EAAA;AAG3B,QAAMC,kBAAkBA,CAACC,UAAehB,WAAWiB,kBAAkBD,KAAK;AAC1E,QAAME,gBAAgBA,CAACF,UACrBhB,WAAWmB,YAAY,CACrB;AAAA,IACExB,IAAIqB,OAAOI;AAAAA,IACXC,MAAML,OAAOK;AAAAA,EACd,CAAA,CACF;AAEGC,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;AAGE,SAAA,oBAAC,OAAI,EAAA,IAAQ,WAAWf,GAAGV,QAAQoC,MAAMrC,SAAS,GAChD,UAAC,qBAAA,2BAAA,EACC,OAAO;AAAA,IACLsC,UAAUnB;AAAAA,IACVoB,QAAQjB;AAAAA,EAGV,GAAA,UAAA;AAAA,IAAC,oBAAA,OAAA,EAAI,WAAWX,GAAGV,QAAQuC,SAASvC,QAAQwC,WAAW,GACpDP,UACH,aAAA,CAAA;AAAA,IACA,qBAAC,SAAI,WAAWvB,GAAGV,QAAQuC,SAASvC,QAAQyC,YAAY,GACrDN,UAAAA;AAAAA,MAAAA;AAAAA,MACAjC,SAAS,CAACK,oBAAoBL,OAAOwC,SAAS,KAC7C,oBAAC,eAAc,EAAA,IAAIC,MAAM7C,IAAI,mBAAmB,GAC7CI,UAAAA,MAAM0C,IAAI,CAAC;AAAA,QAAE9C,IAAImB;AAAAA,QAAO4B;AAAAA,QAAM,GAAGC;AAAAA,MAAO,0BACtC,UACC,EAAA,IAAI7B,OAEJ,MAAI,MACJ,UAAUL,gBAAgBK,OAC1B,SAAUD,CAAQD,QAAAA,oBAAoBC,KAAKC,KAAK,GAChD,GAAI6B,QAEHD,UAAAA,KAAAA,GANI5B,KAOP,CACD,GACH;AAAA,IAAA,GAEJ;AAAA,EAAA,EACF,CAAA,EACF,CAAA;AAEJ;"}
+{"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":[],"mappings":";;;;;;;;;;AA2Da,MAAA,aAAa,CAAC,UAA2B;AAC9C,QAAA;AAAA,IACJ;AAAA,IACA;AAAA,IACA,SAAS;AAAA,IACT;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,mBAAmB;AAAA,IACnB;AAAA,EAAA,IACE,gBAAgB,cAAc,KAAK;AAEvC,QAAM,EAAE,SAAS,GAAG,IAAI,WAAW,WAAW;AAExC,QAAA,CAAC,aAAa,cAAc,IAAI;AAAA,IACpC;AAAA,IACA;AAAA,EAAA;AAGI,QAAA,sBAAsB,CAC1B,KACA,UACG;AACH,mBAAe,KAAK;AACpB,mBAAe,KAAK,KAAK;AAAA,EAAA;AAG3B,QAAM,kBAAkB,CAAC,UAAe,WAAW,kBAAkB,KAAK;AAC1E,QAAM,gBAAgB,CAAC,UACrB,WAAW,YAAY;AAAA,IACrB;AAAA,MACE,IAAI,OAAO;AAAA,MACX,MAAM,OAAO;AAAA,IACf;AAAA,EAAA,CACD;AAEG,QAAA,gBAAgB,SAAS,MAAM,QAAQ;AACvC,QAAA,gBAAgB,SAAS,QAAQ,QAAQ;AAE/C,QAAM,mBACJ,gBAAgB,IAAI,KAAK,MAAM,gBAAgB,GAAG,IAAI;AACxD,QAAM,eAAe,cAAc,MAAM,GAAG,gBAAgB;AAC5D,QAAM,gBAAgB,cAAc;AAAA,IAClC;AAAA,IACA,iBAAiB;AAAA,EAAA;AAIjB,SAAA,oBAAC,SAAI,IAAQ,WAAW,GAAG,QAAQ,MAAM,SAAS,GAChD,UAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,OAAO;AAAA,QACL,UAAU;AAAA,QACV,QAAQ;AAAA,MACV;AAAA,MAEA,UAAA;AAAA,QAAC,oBAAA,OAAA,EAAI,WAAW,GAAG,QAAQ,SAAS,QAAQ,WAAW,GACpD,UACH,aAAA,CAAA;AAAA,QACA,qBAAC,SAAI,WAAW,GAAG,QAAQ,SAAS,QAAQ,YAAY,GACrD,UAAA;AAAA,UAAA;AAAA,UACA,SAAS,CAAC,oBAAoB,OAAO,SAAS,KAC7C,oBAAC,eAAc,EAAA,IAAI,MAAM,IAAI,mBAAmB,GAC7C,UAAA,MAAM,IAAI,CAAC,EAAE,IAAI,OAAO,MAAM,GAAG,OAAA,MAChC;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,IAAI;AAAA,cAEJ,MAAI;AAAA,cACJ,UAAU,gBAAgB;AAAA,cAC1B,SAAS,CAAC,QAAQ,oBAAoB,KAAK,KAAK;AAAA,cAC/C,GAAG;AAAA,cAEH,UAAA;AAAA,YAAA;AAAA,YANI;AAAA,UAQR,CAAA,GACH;AAAA,QAAA,GAEJ;AAAA,MAAA;AAAA,IAAA;AAAA,EAEJ,EAAA,CAAA;AAEJ;"}

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

@@ -1,18 +1,11 @@
 import { createClasses } from "../../utils/classes.js";
-const {
-  staticClasses,
-  useClasses
-} = createClasses("HvControls", {
+const { staticClasses, useClasses } = createClasses("HvControls", {
   root: {
     display: "inline-flex",
     width: "100%",
     justifyContent: "space-between"
   },
-  section: {
-    display: "inline-flex",
-    alignItems: "flex-end",
-    gap: 10
-  },
+  section: { display: "inline-flex", alignItems: "flex-end", gap: 10 },
   rightSection: {},
   leftSection: {}
 });

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 { 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;"}
+{"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":[],"mappings":";AAEO,MAAM,EAAE,eAAe,eAAe,cAAc,cAAc;AAAA,EACvE,MAAM;AAAA,IACJ,SAAS;AAAA,IACT,OAAO;AAAA,IACP,gBAAgB;AAAA,EAClB;AAAA,EACA,SAAS,EAAE,SAAS,eAAe,YAAY,YAAY,KAAK,GAAG;AAAA,EACnE,cAAc,CAAC;AAAA,EACf,aAAa,CAAC;AAChB,CAAC;"}

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

@@ -16,19 +16,23 @@ const HvLeftControl = ({
   searchProps,
   ...others
 }) => {
-  const {
-    classes,
-    cx
-  } = useClasses(classesProp);
-  const {
-    onSearch: onSearchHandler
-  } = useContext(HvControlsContext);
+  const { classes, cx } = useClasses(classesProp);
+  const { onSearch: onSearchHandler } = useContext(HvControlsContext);
   const onChangeFilter = (e, value) => {
     onSearch?.(e, value);
     onSearchHandler?.(value);
   };
   return /* @__PURE__ */ jsxs("div", { id, className: cx(classes.root, className), ...others, children: [
-    !hideSearch && /* @__PURE__ */ jsx(HvInput, { id: setId(id, "search-input"), type: "search", placeholder, onChange: onChangeFilter, ...searchProps }),
+    !hideSearch && /* @__PURE__ */ jsx(
+      HvInput,
+      {
+        id: setId(id, "search-input"),
+        type: "search",
+        placeholder,
+        onChange: onChangeFilter,
+        ...searchProps
+      }
+    ),
     children
   ] });
 };

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 { 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","setId"],"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,eAAWU,GAAGC,KAAK;AACnBL,sBAAkBK,KAAK;AAAA,EAAA;AAIvB,SAAA,qBAAC,OAAI,EAAA,IAAQ,WAAWP,GAAGT,QAAQiB,MAAMf,SAAS,GAAOM,GAAAA,QACtD,UAAA;AAAA,IAAA,CAACF,cACA,oBAAC,SACC,EAAA,IAAIY,MAAMnB,IAAI,cAAc,GAC5B,MAAK,UACL,aACA,UAAUe,gBACNP,GAAAA,aAEP;AAAA,IACAJ;AAAAA,EACH,EAAA,CAAA;AAEJ;"}
+{"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":[],"mappings":";;;;;;;AA8BO,MAAM,gBAAgB,CAAC;AAAA,EAC5B;AAAA,EACA,SAAS;AAAA,EACT;AAAA,EACA;AAAA,EACA,cAAc;AAAA,EACd;AAAA,EACA,aAAa;AAAA,EACb;AAAA,EACA,GAAG;AACL,MAA0B;AACxB,QAAM,EAAE,SAAS,GAAG,IAAI,WAAW,WAAW;AAE9C,QAAM,EAAE,UAAU,gBAAgB,IAAI,WAAW,iBAAiB;AAE5D,QAAA,iBAA2C,CAAC,GAAG,UAAU;AAC7D,eAAW,GAAG,KAAK;AACnB,sBAAkB,KAAK;AAAA,EAAA;AAIvB,SAAA,qBAAC,OAAI,EAAA,IAAQ,WAAW,GAAG,QAAQ,MAAM,SAAS,GAAI,GAAG,QACtD,UAAA;AAAA,IAAA,CAAC,cACA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,IAAI,MAAM,IAAI,cAAc;AAAA,QAC5B,MAAK;AAAA,QACL;AAAA,QACA,UAAU;AAAA,QACT,GAAG;AAAA,MAAA;AAAA,IACN;AAAA,IAED;AAAA,EACH,EAAA,CAAA;AAEJ;"}

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

@@ -1,12 +1,6 @@
 import { createClasses } from "../../../utils/classes.js";
-const {
-  staticClasses,
-  useClasses
-} = createClasses("HvLeftControl", {
-  root: {
-    display: "inline-flex",
-    gap: 10
-  }
+const { staticClasses, useClasses } = createClasses("HvLeftControl", {
+  root: { display: "inline-flex", gap: 10 }
 });
 export {
   staticClasses,

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 { 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;"}
+{"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":[],"mappings":";AAEO,MAAM,EAAE,eAAe,eAAe,cAAc,iBAAiB;AAAA,EAC1E,MAAM,EAAE,SAAS,eAAe,KAAK,GAAG;AAC1C,CAAC;"}

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

@@ -16,24 +16,31 @@ const HvRightControl = ({
   sortProps,
   ...others
 }) => {
-  const {
-    classes,
-    cx
-  } = useClasses(classesProp);
+  const { classes, cx } = useClasses(classesProp);
   const [dropDownValues, setDropdownValues] = useState(values);
-  const {
-    onSort: onSortHandler
-  } = useContext(HvControlsContext);
+  const { onSort: onSortHandler } = useContext(HvControlsContext);
   const handleChangeSort = (value) => {
     onSort?.(value);
     onSortHandler?.(value);
-    setDropdownValues((prevValues) => prevValues?.map((prevValue) => ({
-      ...prevValue,
-      selected: prevValue.id === value.id
-    })));
+    setDropdownValues(
+      (prevValues) => prevValues?.map((prevValue) => ({
+        ...prevValue,
+        selected: prevValue.id === value.id
+      }))
+    );
   };
   return /* @__PURE__ */ jsxs("div", { id, className: cx(classes.root, className), ...others, children: [
-    !hideSortBy && /* @__PURE__ */ jsx(HvDropdown, { id: setId(id, "sort-by-dropdown"), values: dropDownValues, className: classes.sortDropdown, onChange: handleChangeSort, singleSelectionToggle: false, ...sortProps }),
+    !hideSortBy && /* @__PURE__ */ jsx(
+      HvDropdown,
+      {
+        id: setId(id, "sort-by-dropdown"),
+        values: dropDownValues,
+        className: classes.sortDropdown,
+        onChange: handleChangeSort,
+        singleSelectionToggle: false,
+        ...sortProps
+      }
+    ),
     children
   ] });
 };

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 { 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","setId","sortDropdown"],"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,aAASa,KAAK;AACdJ,oBAAgBI,KAAK;AAEFC,sBAAAA,CAAAA,eACjBA,YAAYC,IAAKC,CAAe,eAAA;AAAA,MAC9B,GAAGA;AAAAA,MACHC,UAAUD,UAAUtB,OAAOmB,MAAMnB;AAAAA,MACjC,CACJ;AAAA,EAAA;AAIA,SAAA,qBAAC,OAAI,EAAA,IAAQ,WAAWU,GAAGT,QAAQuB,MAAMrB,SAAS,GAAOM,GAAAA,QACtD,UAAA;AAAA,IAAA,CAACF,cACC,oBAAA,YAAA,EACC,IAAIkB,MAAMzB,IAAI,kBAAkB,GAChC,QAAQY,gBACR,WAAWX,QAAQyB,cACnB,UAAUR,kBACV,uBAAuB,OACvB,GAAIV,WAEP;AAAA,IACAJ;AAAAA,EACH,EAAA,CAAA;AAEJ;"}
+{"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":[],"mappings":";;;;;;;AAiCO,MAAM,iBAAiB,CAAC;AAAA,EAC7B;AAAA,EACA,SAAS;AAAA,EACT;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,aAAa;AAAA,EACb;AAAA,EACA,GAAG;AACL,MAA2B;AACzB,QAAM,EAAE,SAAS,GAAG,IAAI,WAAW,WAAW;AAE9C,QAAM,CAAC,gBAAgB,iBAAiB,IAAI,SAAS,MAAM;AAE3D,QAAM,EAAE,QAAQ,cAAc,IAAI,WAAW,iBAAiB;AAExD,QAAA,mBAAgD,CAAC,UAAe;AACpE,aAAS,KAAK;AACd,oBAAgB,KAAK;AAErB;AAAA,MAAkB,CAAC,eACjB,YAAY,IAAI,CAAC,eAAe;AAAA,QAC9B,GAAG;AAAA,QACH,UAAU,UAAU,OAAO,MAAM;AAAA,MAAA,EACjC;AAAA,IAAA;AAAA,EACJ;AAIA,SAAA,qBAAC,OAAI,EAAA,IAAQ,WAAW,GAAG,QAAQ,MAAM,SAAS,GAAI,GAAG,QACtD,UAAA;AAAA,IAAA,CAAC,cACA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,IAAI,MAAM,IAAI,kBAAkB;AAAA,QAChC,QAAQ;AAAA,QACR,WAAW,QAAQ;AAAA,QACnB,UAAU;AAAA,QACV,uBAAuB;AAAA,QACtB,GAAG;AAAA,MAAA;AAAA,IACN;AAAA,IAED;AAAA,EACH,EAAA,CAAA;AAEJ;"}

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

@@ -1,15 +1,7 @@
 import { createClasses } from "../../../utils/classes.js";
-const {
-  staticClasses,
-  useClasses
-} = createClasses("HvRightControl", {
-  root: {
-    display: "inline-flex",
-    gap: 10
-  },
-  sortDropdown: {
-    minWidth: 200
-  }
+const { staticClasses, useClasses } = createClasses("HvRightControl", {
+  root: { display: "inline-flex", gap: 10 },
+  sortDropdown: { minWidth: 200 }
 });
 export {
   staticClasses,

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 { 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;"}
+{"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":[],"mappings":";AAEO,MAAM,EAAE,eAAe,eAAe,cAAc,kBAAkB;AAAA,EAC3E,MAAM,EAAE,SAAS,eAAe,KAAK,GAAG;AAAA,EACxC,cAAc,EAAE,UAAU,IAAI;AAChC,CAAC;"}

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

@@ -1 +1 @@
-{"version":3,"file":"ControlsContext.js","sources":["../../../../../src/components/Controls/context/ControlsContext.ts"],"sourcesContent":["import React from \"react\";\n\nexport const HvControlsContext = React.createContext<{\n  onSearch?: any;\n  onSort?: any;\n}>({});\n\nexport const HvControlsContextProvider = HvControlsContext.Provider;\nexport const HvControlsContextConsumer = HvControlsContext.Consumer;\nexport default HvControlsContext;\n"],"names":["HvControlsContext","React","createContext","HvControlsContextProvider","Provider","Consumer"],"mappings":";AAEO,MAAMA,oBAAoBC,eAAMC,cAGpC,EAAE;AAEE,MAAMC,4BAA4BH,kBAAkBI;AAClBJ,kBAAkBK;"}
+{"version":3,"file":"ControlsContext.js","sources":["../../../../../src/components/Controls/context/ControlsContext.ts"],"sourcesContent":["import React from \"react\";\n\nexport const HvControlsContext = React.createContext<{\n  onSearch?: any;\n  onSort?: any;\n}>({});\n\nexport const HvControlsContextProvider = HvControlsContext.Provider;\nexport const HvControlsContextConsumer = HvControlsContext.Consumer;\nexport default HvControlsContext;\n"],"names":["React"],"mappings":";AAEO,MAAM,oBAAoBA,eAAM,cAGpC,EAAE;AAEE,MAAM,4BAA4B,kBAAkB;AAClB,kBAAkB;"}