@hitachivantara/uikit-react-core 5.27.6 → 5.27.7

package/dist/esm/components/ColorPicker/Picker/Picker.js.map

@@ -1 +1 @@
-{"version":3,"file":"Picker.js","sources":["../../../../../src/components/ColorPicker/Picker/Picker.tsx"],"sourcesContent":["import { useCallback } from \"react\";\n\nimport { Saturation, Hue } from \"react-color/lib/components/common\";\nimport {\n  CustomPicker,\n  CustomPickerInjectedProps,\n  HSLColor,\n  HSVColor,\n  RGBColor,\n} from \"react-color\";\n\nimport { HvTypography } from \"@core/components/Typography\";\nimport { useTheme } from \"@core/hooks/useTheme\";\nimport { ExtractNames } from \"@core/utils/classes\";\n\nimport { staticClasses, useClasses } from \"./Picker.styles\";\nimport { Fields } from \"../Fields\";\n\nexport { staticClasses as colorPickerPickerClasses };\n\nexport type HvColorPickerPickerClasses = ExtractNames<typeof useClasses>;\n\nexport const Picker = CustomPicker(\n  ({\n    onChange,\n    rgb,\n    hsl,\n    hsv,\n    hex,\n    title,\n    classes: classesProp,\n  }: {\n    classes?: HvColorPickerPickerClasses;\n    title?: string;\n  } & CustomPickerInjectedProps<\n    | HSLColor\n    | HSVColor\n    | RGBColor\n    | {\n        source?: string;\n        hex?: string;\n      }\n  >) => {\n    const { activeTheme } = useTheme();\n    const { classes } = useClasses(classesProp);\n\n    const SaturationPointer = useCallback(\n      () => <div className={classes?.saturationPointer} />,\n      [classes?.saturationPointer]\n    );\n\n    const HueSlider = useCallback(\n      () => <div className={classes?.hueSlider} />,\n      [classes?.hueSlider]\n    );\n\n    return (\n      <>\n        {title && (\n          <HvTypography className={classes.title} variant=\"caption1\">\n            {title}\n          </HvTypography>\n        )}\n        <div className={classes.pickers}>\n          <div className={classes.saturation}>\n            <Saturation\n              hsl={hsl}\n              hsv={hsv}\n              onChange={onChange}\n              pointer={SaturationPointer}\n            />\n          </div>\n          <div className={classes.hue}>\n            <Hue\n              direction={activeTheme?.colorPicker.hueDirection}\n              hsl={hsl}\n              onChange={onChange}\n              pointer={HueSlider}\n            />\n          </div>\n        </div>\n        <Fields\n          className={classes.fields}\n          rgb={rgb}\n          hex={hex}\n          onChange={onChange}\n        />\n      </>\n    );\n  }\n);\n"],"names":["Picker","CustomPicker","onChange","rgb","hsl","hsv","hex","title","classes","classesProp","activeTheme","useTheme","useClasses","SaturationPointer","useCallback","_jsx","className","saturationPointer","HueSlider","hueSlider","_Fragment","children","HvTypography","variant","_jsxs","pickers","saturation","Saturation","pointer","hue","Hue","direction","colorPicker","hueDirection","Fields","fields"],"mappings":";;;;;;;;;AAsBaA,MAAAA,SAASC,aACpB,CAAC;AAAA,EACCC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC,SAASC;AAYX,MAAM;AACE,QAAA;AAAA,IAAEC;AAAAA,MAAgBC,SAAS;AAC3B,QAAA;AAAA,IAAEH;AAAAA,EAAAA,IAAYI,WAAWH,WAAW;AAE1C,QAAMI,oBAAoBC,YACxB,MAAMC,oBAAA,OAAA;AAAA,IAAKC,WAAWR,mCAASS;AAAAA,EAAoB,CAAA,GACnD,CAACT,mCAASS,iBAAiB,CAC7B;AAEA,QAAMC,YAAYJ,YAChB,MAAMC,oBAAA,OAAA;AAAA,IAAKC,WAAWR,mCAASW;AAAAA,EAAY,CAAA,GAC3C,CAACX,mCAASW,SAAS,CACrB;AAEA,8BACEC,UAAA;AAAA,IAAAC,UACGd,CAAAA,SACCQ,oBAACO,cAAY;AAAA,MAACN,WAAWR,QAAQD;AAAAA,MAAOgB,SAAQ;AAAA,MAAUF,UACvDd;AAAAA,IAAAA,CACW,GAEhBiB,qBAAA,OAAA;AAAA,MAAKR,WAAWR,QAAQiB;AAAAA,MAAQJ,WAC9BN,oBAAA,OAAA;AAAA,QAAKC,WAAWR,QAAQkB;AAAAA,QAAWL,8BAChCM,YAAU;AAAA,UACTvB;AAAAA,UACAC;AAAAA,UACAH;AAAAA,UACA0B,SAASf;AAAAA,QAAAA,CACV;AAAA,MAAA,CACE,GACLE,oBAAA,OAAA;AAAA,QAAKC,WAAWR,QAAQqB;AAAAA,QAAIR,8BACzBS,KAAG;AAAA,UACFC,WAAWrB,2CAAasB,YAAYC;AAAAA,UACpC7B;AAAAA,UACAF;AAAAA,UACA0B,SAASV;AAAAA,QAAAA,CACV;AAAA,MAAA,CACE,CAAC;AAAA,IAAA,CACH,GACLH,oBAACmB,QAAM;AAAA,MACLlB,WAAWR,QAAQ2B;AAAAA,MACnBhC;AAAAA,MACAG;AAAAA,MACAJ;AAAAA,IAAAA,CACD,CAAC;AAAA,EAAA,CACF;AAEN,CACF;"}
+{"version":3,"file":"Picker.js","sources":["../../../../../src/components/ColorPicker/Picker/Picker.tsx"],"sourcesContent":["import { useCallback } from \"react\";\n\nimport { Saturation, Hue } from \"react-color/lib/components/common\";\nimport {\n  CustomPicker,\n  CustomPickerInjectedProps,\n  HSLColor,\n  HSVColor,\n  RGBColor,\n} from \"react-color\";\n\nimport { HvTypography } from \"@core/components/Typography\";\nimport { useTheme } from \"@core/hooks/useTheme\";\nimport { ExtractNames } from \"@core/utils/classes\";\n\nimport { staticClasses, useClasses } from \"./Picker.styles\";\nimport { Fields } from \"../Fields\";\n\nexport { staticClasses as colorPickerPickerClasses };\n\nexport type HvColorPickerPickerClasses = ExtractNames<typeof useClasses>;\n\nexport const Picker = CustomPicker(\n  ({\n    onChange,\n    rgb,\n    hsl,\n    hsv,\n    hex,\n    title,\n    classes: classesProp,\n  }: {\n    classes?: HvColorPickerPickerClasses;\n    title?: string;\n  } & CustomPickerInjectedProps<\n    | HSLColor\n    | HSVColor\n    | RGBColor\n    | {\n        source?: string;\n        hex?: string;\n      }\n  >) => {\n    const { activeTheme } = useTheme();\n    const { classes } = useClasses(classesProp);\n\n    const SaturationPointer = useCallback(\n      () => <div className={classes?.saturationPointer} />,\n      [classes?.saturationPointer]\n    );\n\n    const HueSlider = useCallback(\n      () => <div className={classes?.hueSlider} />,\n      [classes?.hueSlider]\n    );\n\n    return (\n      <>\n        {title && (\n          <HvTypography className={classes.title} variant=\"caption1\">\n            {title}\n          </HvTypography>\n        )}\n        <div className={classes.pickers}>\n          <div className={classes.saturation}>\n            <Saturation\n              hsl={hsl}\n              hsv={hsv}\n              onChange={onChange}\n              pointer={SaturationPointer}\n            />\n          </div>\n          <div className={classes.hue}>\n            <Hue\n              direction={activeTheme?.colorPicker.hueDirection}\n              hsl={hsl}\n              onChange={onChange}\n              pointer={HueSlider}\n            />\n          </div>\n        </div>\n        <Fields\n          className={classes.fields}\n          rgb={rgb}\n          hex={hex}\n          onChange={onChange}\n        />\n      </>\n    );\n  }\n);\n"],"names":["Picker","CustomPicker","onChange","rgb","hsl","hsv","hex","title","classes","classesProp","activeTheme","useTheme","useClasses","SaturationPointer","useCallback","saturationPointer","HueSlider","hueSlider","pickers","saturation","hue","colorPicker","hueDirection","fields"],"mappings":";;;;;;;;;AAsBaA,MAAAA,SAASC,aACpB,CAAC;AAAA,EACCC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC,SAASC;AAYX,MAAM;AACE,QAAA;AAAA,IAAEC;AAAAA,MAAgBC,SAAS;AAC3B,QAAA;AAAA,IAAEH;AAAAA,EAAAA,IAAYI,WAAWH,WAAW;AAE1C,QAAMI,oBAAoBC,YACxB,MAAM,oBAAC,OAAI,EAAA,WAAWN,mCAASO,kBAAAA,CAAqB,GACpD,CAACP,mCAASO,iBAAiB,CAC7B;AAEA,QAAMC,YAAYF,YAChB,MAAM,oBAAC,OAAI,EAAA,WAAWN,mCAASS,UAAAA,CAAa,GAC5C,CAACT,mCAASS,SAAS,CACrB;AAEA,SAEKV,qBAAAA,UAAAA,EAAAA,UAAAA;AAAAA,IAAAA,6BACE,cAAa,EAAA,WAAWC,QAAQD,OAAO,SAAQ,YAC7CA,UACH,MAAA,CAAA;AAAA,IAED,qBAAA,OAAA,EAAI,WAAWC,QAAQU,SACtB,UAAA;AAAA,MAAC,oBAAA,OAAA,EAAI,WAAWV,QAAQW,YACtB,UAAA,oBAAC,YACC,EAAA,KACA,KACA,UACA,SAASN,kBAAkB,CAAA,GAE/B;AAAA,MACC,oBAAA,OAAA,EAAI,WAAWL,QAAQY,KACtB,UAAC,oBAAA,KAAA,EACC,WAAWV,2CAAaW,YAAYC,cACpC,KACA,UACA,SAASN,UAAU,CAAA,GAEvB;AAAA,IAAA,GACF;AAAA,wBACC,QACC,EAAA,WAAWR,QAAQe,QACnB,KACA,KACA,UAAmB;AAAA,EAEvB,EAAA,CAAA;AAEJ,CACF;"}

package/dist/esm/components/ColorPicker/PresetColors/PresetColors.js

@@ -1,7 +1,7 @@
+import { jsxs, jsx } from "@emotion/react/jsx-runtime";
 import { Swatch } from "react-color/lib/components/common";
 import { useClasses } from "./PresetColors.styles.js";
 import { staticClasses } from "./PresetColors.styles.js";
-import { jsxs, jsx } from "@emotion/react/jsx-runtime";
 import { HvTypography } from "../../Typography/Typography.js";
 const PresetColors = ({
   onClick,
@@ -20,26 +20,12 @@ const PresetColors = ({
       source: "hex"
     });
   };
-  return /* @__PURE__ */ jsxs("div", {
-    className: cx(classes.root, className),
-    children: [title && /* @__PURE__ */ jsx(HvTypography, {
-      className: classes.title,
-      variant: "caption1",
-      children: title
-    }), /* @__PURE__ */ jsx("div", {
-      className: classes.colors,
-      children: colors.map((color, index) => /* @__PURE__ */ jsx("div", {
-        className: classes.swatchWrap,
-        children: /* @__PURE__ */ jsx(Swatch, {
-          color,
-          onClick: handleClick,
-          focusStyle: {
-            boxShadow: `inset 0 0 0 1px rgba(0,0,0,.15), 0 0 4px ${color}`
-          }
-        })
-      }, `recommended-color-${color}-${index}`))
-    })]
-  });
+  return /* @__PURE__ */ jsxs("div", { className: cx(classes.root, className), children: [
+    title && /* @__PURE__ */ jsx(HvTypography, { className: classes.title, variant: "caption1", children: title }),
+    /* @__PURE__ */ jsx("div", { className: classes.colors, children: colors.map((color, index) => /* @__PURE__ */ jsx("div", { className: classes.swatchWrap, children: /* @__PURE__ */ jsx(Swatch, { color, onClick: handleClick, focusStyle: {
+      boxShadow: `inset 0 0 0 1px rgba(0,0,0,.15), 0 0 4px ${color}`
+    } }) }, `recommended-color-${color}-${index}`)) })
+  ] });
 };
 export {
   PresetColors,

package/dist/esm/components/ColorPicker/PresetColors/PresetColors.js.map

@@ -1 +1 @@
-{"version":3,"file":"PresetColors.js","sources":["../../../../../src/components/ColorPicker/PresetColors/PresetColors.tsx"],"sourcesContent":["// @types/react-color seems to be broken\n// @ts-ignore\nimport { Swatch } from \"react-color/lib/components/common\";\n\nimport { HvTypography } from \"@core/components/Typography\";\nimport { ExtractNames } from \"@core/utils/classes\";\n\nimport { staticClasses, useClasses } from \"./PresetColors.styles\";\n\nexport { staticClasses as colorPickerPresetColorsClasses };\n\nexport type HvColorPickerPresetColorsClasses = ExtractNames<typeof useClasses>;\n\ninterface PresetColorsProps {\n  colors: string[];\n  onClick: (color: { hex: string; source: string }) => void;\n  title?: string;\n  className?: string;\n  classes?: HvColorPickerPresetColorsClasses;\n}\n\nexport const PresetColors = ({\n  onClick,\n  colors,\n  title,\n  className,\n  classes: classesProp,\n}: PresetColorsProps) => {\n  const { classes, cx } = useClasses(classesProp);\n\n  const handleClick = (hex: string) => {\n    onClick({\n      hex,\n      source: \"hex\",\n    });\n  };\n\n  return (\n    <div className={cx(classes.root, className)}>\n      {title && (\n        <HvTypography className={classes.title} variant=\"caption1\">\n          {title}\n        </HvTypography>\n      )}\n      <div className={classes.colors}>\n        {colors.map((color, index) => (\n          <div\n            key={`recommended-color-${color}-${index}`}\n            className={classes.swatchWrap}\n          >\n            <Swatch\n              color={color}\n              onClick={handleClick}\n              focusStyle={{\n                boxShadow: `inset 0 0 0 1px rgba(0,0,0,.15), 0 0 4px ${color}`,\n              }}\n            />\n          </div>\n        ))}\n      </div>\n    </div>\n  );\n};\n"],"names":["PresetColors","onClick","colors","title","className","classes","classesProp","cx","useClasses","handleClick","hex","source","root","children","_jsx","HvTypography","variant","map","color","index","swatchWrap","Swatch","focusStyle","boxShadow"],"mappings":";;;;;AAqBO,MAAMA,eAAeA,CAAC;AAAA,EAC3BC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC,SAASC;AACQ,MAAM;AACjB,QAAA;AAAA,IAAED;AAAAA,IAASE;AAAAA,EAAAA,IAAOC,WAAWF,WAAW;AAExCG,QAAAA,cAAcA,CAACC,QAAgB;AAC3B,YAAA;AAAA,MACNA;AAAAA,MACAC,QAAQ;AAAA,IAAA,CACT;AAAA,EAAA;AAGH,8BACE,OAAA;AAAA,IAAKP,WAAWG,GAAGF,QAAQO,MAAMR,SAAS;AAAA,IAAES,UACzCV,CAAAA,SACCW,oBAACC,cAAY;AAAA,MAACX,WAAWC,QAAQF;AAAAA,MAAOa,SAAQ;AAAA,MAAUH,UACvDV;AAAAA,IAAAA,CACW,GAEhBW,oBAAA,OAAA;AAAA,MAAKV,WAAWC,QAAQH;AAAAA,MAAOW,UAC5BX,OAAOe,IAAI,CAACC,OAAOC,8BAClB,OAAA;AAAA,QAEEf,WAAWC,QAAQe;AAAAA,QAAWP,8BAE7BQ,QAAM;AAAA,UACLH;AAAAA,UACAjB,SAASQ;AAAAA,UACTa,YAAY;AAAA,YACVC,WAAY,4CAA2CL,KAAM;AAAA,UAC/D;AAAA,QAAA,CACD;AAAA,MAAA,GATK,qBAAoBA,KAAM,IAAGC,KAAM,EAUtC,CACN;AAAA,IAAA,CACE,CAAC;AAAA,EAAA,CACH;AAET;"}
+{"version":3,"file":"PresetColors.js","sources":["../../../../../src/components/ColorPicker/PresetColors/PresetColors.tsx"],"sourcesContent":["// @types/react-color seems to be broken\n// @ts-ignore\nimport { Swatch } from \"react-color/lib/components/common\";\n\nimport { HvTypography } from \"@core/components/Typography\";\nimport { ExtractNames } from \"@core/utils/classes\";\n\nimport { staticClasses, useClasses } from \"./PresetColors.styles\";\n\nexport { staticClasses as colorPickerPresetColorsClasses };\n\nexport type HvColorPickerPresetColorsClasses = ExtractNames<typeof useClasses>;\n\ninterface PresetColorsProps {\n  colors: string[];\n  onClick: (color: { hex: string; source: string }) => void;\n  title?: string;\n  className?: string;\n  classes?: HvColorPickerPresetColorsClasses;\n}\n\nexport const PresetColors = ({\n  onClick,\n  colors,\n  title,\n  className,\n  classes: classesProp,\n}: PresetColorsProps) => {\n  const { classes, cx } = useClasses(classesProp);\n\n  const handleClick = (hex: string) => {\n    onClick({\n      hex,\n      source: \"hex\",\n    });\n  };\n\n  return (\n    <div className={cx(classes.root, className)}>\n      {title && (\n        <HvTypography className={classes.title} variant=\"caption1\">\n          {title}\n        </HvTypography>\n      )}\n      <div className={classes.colors}>\n        {colors.map((color, index) => (\n          <div\n            key={`recommended-color-${color}-${index}`}\n            className={classes.swatchWrap}\n          >\n            <Swatch\n              color={color}\n              onClick={handleClick}\n              focusStyle={{\n                boxShadow: `inset 0 0 0 1px rgba(0,0,0,.15), 0 0 4px ${color}`,\n              }}\n            />\n          </div>\n        ))}\n      </div>\n    </div>\n  );\n};\n"],"names":["PresetColors","onClick","colors","title","className","classes","classesProp","cx","useClasses","handleClick","hex","source","root","map","color","index","swatchWrap","boxShadow"],"mappings":";;;;;AAqBO,MAAMA,eAAeA,CAAC;AAAA,EAC3BC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC,SAASC;AACQ,MAAM;AACjB,QAAA;AAAA,IAAED;AAAAA,IAASE;AAAAA,EAAAA,IAAOC,WAAWF,WAAW;AAExCG,QAAAA,cAAcA,CAACC,QAAgB;AAC3B,YAAA;AAAA,MACNA;AAAAA,MACAC,QAAQ;AAAA,IAAA,CACT;AAAA,EAAA;AAGH,8BACG,OAAI,EAAA,WAAWJ,GAAGF,QAAQO,MAAMR,SAAS,GACvCD,UAAAA;AAAAA,IAAAA,6BACE,cAAa,EAAA,WAAWE,QAAQF,OAAO,SAAQ,YAC7CA,UACH,MAAA,CAAA;AAAA,IAEF,oBAAC,SAAI,WAAWE,QAAQH,QACrBA,UAAOW,OAAAA,IAAI,CAACC,OAAOC,8BACjB,OAEC,EAAA,WAAWV,QAAQW,YAEnB,UAAA,oBAAC,UACC,OACA,SAASP,aACT,YAAY;AAAA,MACVQ,WAAY,4CAA2CH,KAAM;AAAA,IAAA,GAC7D,KARE,qBAAoBA,KAAM,IAAGC,KAAM,EAU3C,CACD,GACH;AAAA,EACF,EAAA,CAAA;AAEJ;"}

package/dist/esm/components/ColorPicker/SavedColors/SavedColors.js

@@ -1,8 +1,8 @@
+import { jsxs, jsx } from "@emotion/react/jsx-runtime";
 import { Add, CloseXS } from "@hitachivantara/uikit-react-icons";
 import { Swatch } from "react-color/lib/components/common";
 import { useClasses } from "./SavedColors.styles.js";
 import { staticClasses } from "./SavedColors.styles.js";
-import { jsxs, jsx } from "@emotion/react/jsx-runtime";
 import { HvButton } from "../../Button/Button.js";
 const SavedColors = ({
   colors,
@@ -22,44 +22,15 @@ const SavedColors = ({
       source: "hex"
     });
   };
-  return /* @__PURE__ */ jsxs("div", {
-    className: classes.root,
-    children: [/* @__PURE__ */ jsx(HvButton, {
-      className: classes.addButton,
-      variant: "secondarySubtle",
-      icon: true,
-      onClick: onAddColor,
-      "aria-label": addButtonAriaLabel,
-      children: /* @__PURE__ */ jsx(Add, {
-        "aria-hidden": true
-      })
-    }), colors.map((color, index) => /* @__PURE__ */ jsxs("div", {
-      className: classes.swatchRoot,
-      children: [/* @__PURE__ */ jsx("div", {
-        className: classes.swatchWrap,
-        children: /* @__PURE__ */ jsx(Swatch, {
-          color,
-          onClick: handleClick,
-          focusStyle: {
-            boxShadow: `inset 0 0 0 1px rgba(0,0,0,.15), 0 0 4px ${color}`
-          }
-        })
-      }), /* @__PURE__ */ jsx("div", {
-        className: classes.removeButtonRoot,
-        children: /* @__PURE__ */ jsx(HvButton, {
-          className: classes.removeButton,
-          variant: "secondarySubtle",
-          onClick: () => onRemoveColor(color, index),
-          tabIndex: 0,
-          "aria-label": deleteButtonAriaLabel,
-          children: /* @__PURE__ */ jsx(CloseXS, {
-            "aria-hidden": true,
-            iconSize: "XS"
-          })
-        })
-      })]
-    }, `saved-color-${color}-${index}`))]
-  });
+  return /* @__PURE__ */ jsxs("div", { className: classes.root, children: [
+    /* @__PURE__ */ jsx(HvButton, { className: classes.addButton, variant: "secondarySubtle", icon: true, onClick: onAddColor, "aria-label": addButtonAriaLabel, children: /* @__PURE__ */ jsx(Add, { "aria-hidden": true }) }),
+    colors.map((color, index) => /* @__PURE__ */ jsxs("div", { className: classes.swatchRoot, children: [
+      /* @__PURE__ */ jsx("div", { className: classes.swatchWrap, children: /* @__PURE__ */ jsx(Swatch, { color, onClick: handleClick, focusStyle: {
+        boxShadow: `inset 0 0 0 1px rgba(0,0,0,.15), 0 0 4px ${color}`
+      } }) }),
+      /* @__PURE__ */ jsx("div", { className: classes.removeButtonRoot, children: /* @__PURE__ */ jsx(HvButton, { className: classes.removeButton, variant: "secondarySubtle", onClick: () => onRemoveColor(color, index), tabIndex: 0, "aria-label": deleteButtonAriaLabel, children: /* @__PURE__ */ jsx(CloseXS, { "aria-hidden": true, iconSize: "XS" }) }) })
+    ] }, `saved-color-${color}-${index}`))
+  ] });
 };
 export {
   SavedColors,

package/dist/esm/components/ColorPicker/SavedColors/SavedColors.js.map

@@ -1 +1 @@
-{"version":3,"file":"SavedColors.js","sources":["../../../../../src/components/ColorPicker/SavedColors/SavedColors.tsx"],"sourcesContent":["import { CloseXS, Add } from \"@hitachivantara/uikit-react-icons\";\n\n// @types/react-color seems to be broken\n// @ts-ignore\nimport { Swatch } from \"react-color/lib/components/common\";\n\nimport { HvButton } from \"@core/components/Button\";\nimport { ExtractNames } from \"@core/utils/classes\";\n\nimport { staticClasses, useClasses } from \"./SavedColors.styles\";\n\nexport { staticClasses as colorPickerSavedColorsClasses };\n\nexport type HvColorPickerSavedColorsClasses = ExtractNames<typeof useClasses>;\n\ninterface SavedColorsProps {\n  colors: string[];\n  onClickColor: (color: { hex: string; source: string }) => void;\n  onAddColor: () => void;\n  onRemoveColor: (color: string, index: number) => void;\n  deleteButtonAriaLabel?: string;\n  addButtonAriaLabel?: string;\n  classes?: HvColorPickerSavedColorsClasses;\n}\n\nexport const SavedColors = ({\n  colors,\n  onClickColor,\n  onAddColor,\n  onRemoveColor,\n  deleteButtonAriaLabel,\n  addButtonAriaLabel,\n  classes: classesProp,\n}: SavedColorsProps) => {\n  const { classes } = useClasses(classesProp);\n\n  const handleClick = (hex: string) => {\n    onClickColor({\n      hex,\n      source: \"hex\",\n    });\n  };\n\n  return (\n    <div className={classes.root}>\n      <HvButton\n        className={classes.addButton}\n        variant=\"secondarySubtle\"\n        icon\n        onClick={onAddColor}\n        aria-label={addButtonAriaLabel}\n      >\n        <Add aria-hidden />\n      </HvButton>\n      {colors.map((color, index) => (\n        <div\n          key={`saved-color-${color}-${index}`}\n          className={classes.swatchRoot}\n        >\n          <div className={classes.swatchWrap}>\n            <Swatch\n              color={color}\n              onClick={handleClick}\n              focusStyle={{\n                boxShadow: `inset 0 0 0 1px rgba(0,0,0,.15), 0 0 4px ${color}`,\n              }}\n            />\n          </div>\n          <div className={classes.removeButtonRoot}>\n            <HvButton\n              className={classes.removeButton}\n              variant=\"secondarySubtle\"\n              onClick={() => onRemoveColor(color, index)}\n              tabIndex={0}\n              aria-label={deleteButtonAriaLabel}\n            >\n              <CloseXS aria-hidden iconSize=\"XS\" />\n            </HvButton>\n          </div>\n        </div>\n      ))}\n    </div>\n  );\n};\n"],"names":["SavedColors","colors","onClickColor","onAddColor","onRemoveColor","deleteButtonAriaLabel","addButtonAriaLabel","classes","classesProp","useClasses","handleClick","hex","source","className","root","children","_jsx","HvButton","addButton","variant","icon","onClick","Add","map","color","index","swatchRoot","swatchWrap","Swatch","focusStyle","boxShadow","removeButtonRoot","removeButton","tabIndex","CloseXS","iconSize"],"mappings":";;;;;;AAyBO,MAAMA,cAAcA,CAAC;AAAA,EAC1BC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC,SAASC;AACO,MAAM;AAChB,QAAA;AAAA,IAAED;AAAAA,EAAAA,IAAYE,WAAWD,WAAW;AAEpCE,QAAAA,cAAcA,CAACC,QAAgB;AACtB,iBAAA;AAAA,MACXA;AAAAA,MACAC,QAAQ;AAAA,IAAA,CACT;AAAA,EAAA;AAGH,8BACE,OAAA;AAAA,IAAKC,WAAWN,QAAQO;AAAAA,IAAKC,UAAA,CAC3BC,oBAACC,UAAQ;AAAA,MACPJ,WAAWN,QAAQW;AAAAA,MACnBC,SAAQ;AAAA,MACRC,MAAI;AAAA,MACJC,SAASlB;AAAAA,MACT,cAAYG;AAAAA,MAAmBS,8BAE9BO,KAAG;AAAA,QAAC,eAAA;AAAA,MAAA,CAAa;AAAA,IAAA,CACV,GACTrB,OAAOsB,IAAI,CAACC,OAAOC,+BAClB,OAAA;AAAA,MAEEZ,WAAWN,QAAQmB;AAAAA,MAAWX,WAE9BC,oBAAA,OAAA;AAAA,QAAKH,WAAWN,QAAQoB;AAAAA,QAAWZ,8BAChCa,QAAM;AAAA,UACLJ;AAAAA,UACAH,SAASX;AAAAA,UACTmB,YAAY;AAAA,YACVC,WAAY,4CAA2CN,KAAM;AAAA,UAC/D;AAAA,QAAA,CACD;AAAA,MAAA,CACE,GACLR,oBAAA,OAAA;AAAA,QAAKH,WAAWN,QAAQwB;AAAAA,QAAiBhB,8BACtCE,UAAQ;AAAA,UACPJ,WAAWN,QAAQyB;AAAAA,UACnBb,SAAQ;AAAA,UACRE,SAASA,MAAMjB,cAAcoB,OAAOC,KAAK;AAAA,UACzCQ,UAAU;AAAA,UACV,cAAY5B;AAAAA,UAAsBU,8BAEjCmB,SAAO;AAAA,YAAC,eAAW;AAAA,YAACC,UAAS;AAAA,UAAA,CAAM;AAAA,QAAA,CAC5B;AAAA,MAAA,CACP,CAAC;AAAA,IAAA,GAtBA,eAAcX,KAAM,IAAGC,KAAM,EAuBhC,CACN,CAAC;AAAA,EAAA,CACC;AAET;"}
+{"version":3,"file":"SavedColors.js","sources":["../../../../../src/components/ColorPicker/SavedColors/SavedColors.tsx"],"sourcesContent":["import { CloseXS, Add } from \"@hitachivantara/uikit-react-icons\";\n\n// @types/react-color seems to be broken\n// @ts-ignore\nimport { Swatch } from \"react-color/lib/components/common\";\n\nimport { HvButton } from \"@core/components/Button\";\nimport { ExtractNames } from \"@core/utils/classes\";\n\nimport { staticClasses, useClasses } from \"./SavedColors.styles\";\n\nexport { staticClasses as colorPickerSavedColorsClasses };\n\nexport type HvColorPickerSavedColorsClasses = ExtractNames<typeof useClasses>;\n\ninterface SavedColorsProps {\n  colors: string[];\n  onClickColor: (color: { hex: string; source: string }) => void;\n  onAddColor: () => void;\n  onRemoveColor: (color: string, index: number) => void;\n  deleteButtonAriaLabel?: string;\n  addButtonAriaLabel?: string;\n  classes?: HvColorPickerSavedColorsClasses;\n}\n\nexport const SavedColors = ({\n  colors,\n  onClickColor,\n  onAddColor,\n  onRemoveColor,\n  deleteButtonAriaLabel,\n  addButtonAriaLabel,\n  classes: classesProp,\n}: SavedColorsProps) => {\n  const { classes } = useClasses(classesProp);\n\n  const handleClick = (hex: string) => {\n    onClickColor({\n      hex,\n      source: \"hex\",\n    });\n  };\n\n  return (\n    <div className={classes.root}>\n      <HvButton\n        className={classes.addButton}\n        variant=\"secondarySubtle\"\n        icon\n        onClick={onAddColor}\n        aria-label={addButtonAriaLabel}\n      >\n        <Add aria-hidden />\n      </HvButton>\n      {colors.map((color, index) => (\n        <div\n          key={`saved-color-${color}-${index}`}\n          className={classes.swatchRoot}\n        >\n          <div className={classes.swatchWrap}>\n            <Swatch\n              color={color}\n              onClick={handleClick}\n              focusStyle={{\n                boxShadow: `inset 0 0 0 1px rgba(0,0,0,.15), 0 0 4px ${color}`,\n              }}\n            />\n          </div>\n          <div className={classes.removeButtonRoot}>\n            <HvButton\n              className={classes.removeButton}\n              variant=\"secondarySubtle\"\n              onClick={() => onRemoveColor(color, index)}\n              tabIndex={0}\n              aria-label={deleteButtonAriaLabel}\n            >\n              <CloseXS aria-hidden iconSize=\"XS\" />\n            </HvButton>\n          </div>\n        </div>\n      ))}\n    </div>\n  );\n};\n"],"names":["SavedColors","colors","onClickColor","onAddColor","onRemoveColor","deleteButtonAriaLabel","addButtonAriaLabel","classes","classesProp","useClasses","handleClick","hex","source","root","addButton","map","color","index","swatchRoot","swatchWrap","boxShadow","removeButtonRoot","removeButton"],"mappings":";;;;;;AAyBO,MAAMA,cAAcA,CAAC;AAAA,EAC1BC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC,SAASC;AACO,MAAM;AAChB,QAAA;AAAA,IAAED;AAAAA,EAAAA,IAAYE,WAAWD,WAAW;AAEpCE,QAAAA,cAAcA,CAACC,QAAgB;AACtB,iBAAA;AAAA,MACXA;AAAAA,MACAC,QAAQ;AAAA,IAAA,CACT;AAAA,EAAA;AAGH,SACG,qBAAA,OAAA,EAAI,WAAWL,QAAQM,MACtB,UAAA;AAAA,IAAA,oBAAC,YACC,WAAWN,QAAQO,WACnB,SAAQ,mBACR,MAAI,MACJ,SAASX,YACT,cAAYG,oBAEZ,UAAA,oBAAC,KAAI,EAAA,eAAW,KAAA,CAAA,GAClB;AAAA,IACCL,OAAOc,IAAI,CAACC,OAAOC,UACjB,qBAAA,OAAA,EAEC,WAAWV,QAAQW,YAEnB,UAAA;AAAA,MAAC,oBAAA,OAAA,EAAI,WAAWX,QAAQY,YACtB,8BAAC,QACC,EAAA,OACA,SAAST,aACT,YAAY;AAAA,QACVU,WAAY,4CAA2CJ,KAAM;AAAA,SAC7D,EAEN,CAAA;AAAA,MACC,oBAAA,OAAA,EAAI,WAAWT,QAAQc,kBACtB,UAAA,oBAAC,UACC,EAAA,WAAWd,QAAQe,cACnB,SAAQ,mBACR,SAAS,MAAMlB,cAAcY,OAAOC,KAAK,GACzC,UAAU,GACV,cAAYZ,uBAEZ,UAAC,oBAAA,SAAA,EAAQ,eAAW,MAAC,UAAS,KAAI,CAAA,EACpC,CAAA,GACF;AAAA,IAAA,EAAA,GAtBM,eAAcW,KAAM,IAAGC,KAAM,EAuBrC,CACD;AAAA,EACH,EAAA,CAAA;AAEJ;"}

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

@@ -1,3 +1,4 @@
+import { jsx } from "@emotion/react/jsx-runtime";
 import { forwardRef } from "react";
 import { theme } from "@hitachivantara/uikit-styles";
 import { useTheme } from "@mui/material/styles";
@@ -5,7 +6,6 @@ import MuiContainer from "@mui/material/Container";
 import useMediaQuery from "@mui/material/useMediaQuery";
 import { useDefaultProps } from "../../hooks/useDefaultProps.js";
 import { useClasses, staticClasses } from "./Container.styles.js";
-import { jsx } from "@emotion/react/jsx-runtime";
 const HvContainer = forwardRef((props, ref) => {
   const {
     maxWidth = false,
@@ -35,26 +35,18 @@ const HvContainer = forwardRef((props, ref) => {
       paddingRight: theme.space.sm
     }
   };
-  return /* @__PURE__ */ jsx(MuiContainer, {
-    className: cx({
-      [css(gutters)]: !disableGutters
-    }, className),
-    classes: {
-      root: classes.root,
-      disableGutters: classes.disableGutters,
-      fixed: classes.fixed,
-      maxWidthXs: classes.maxWidthXs,
-      maxWidthSm: classes.maxWidthSm,
-      maxWidthMd: classes.maxWidthMd,
-      maxWidthLg: classes.maxWidthLg,
-      maxWidthXl: classes.maxWidthXl
-    },
-    ref,
-    maxWidth,
-    fixed,
-    disableGutters,
-    ...others
-  });
+  return /* @__PURE__ */ jsx(MuiContainer, { className: cx({
+    [css(gutters)]: !disableGutters
+  }, className), classes: {
+    root: classes.root,
+    disableGutters: classes.disableGutters,
+    fixed: classes.fixed,
+    maxWidthXs: classes.maxWidthXs,
+    maxWidthSm: classes.maxWidthSm,
+    maxWidthMd: classes.maxWidthMd,
+    maxWidthLg: classes.maxWidthLg,
+    maxWidthXl: classes.maxWidthXl
+  }, ref, maxWidth, fixed, disableGutters, ...others });
 });
 export {
   HvContainer,

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

@@ -1 +1 @@
-{"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\n/** The container enables you to center your content horizontally and bound it to a specific breakpoint. */\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":";;;;;;;;AAgDO,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,IAAK,EAAC,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,IAAK,EAAC,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;"}
+{"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\n/** The container enables you to center your content horizontally and bound it to a specific breakpoint. */\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","maxWidthXs","maxWidthSm","maxWidthMd","maxWidthLg","maxWidthXl"],"mappings":";;;;;;;;AAgDO,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,IAAK,EAAC,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,IAAK,EAAC,GAAG;AAAA,MAC3BC,aAAaC,MAAMG,MAAMC;AAAAA,MACzBF,cAAcF,MAAMG,MAAMC;AAAAA,IAC5B;AAAA,EAAA;AAIJ,SAAA,oBAAC,cACC,EAAA,WAAWjB,GAAG;AAAA,IAAE,CAACC,IAAIQ,OAAO,CAAC,GAAG,CAACZ;AAAAA,EAAAA,GAAkBF,SAAS,GAC5D,SAAS;AAAA,IACPgB,MAAMlB,QAAQkB;AAAAA,IACdd,gBAAgBJ,QAAQI;AAAAA,IACxBD,OAAOH,QAAQG;AAAAA,IACfsB,YAAYzB,QAAQyB;AAAAA,IACpBC,YAAY1B,QAAQ0B;AAAAA,IACpBC,YAAY3B,QAAQ2B;AAAAA,IACpBC,YAAY5B,QAAQ4B;AAAAA,IACpBC,YAAY7B,QAAQ6B;AAAAA,EAAAA,GAEtB,KACA,UACA,OACA,gBACIxB,GAAAA,OACJ,CAAA;AAEN,CACF;"}

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

@@ -1,3 +1,4 @@
+import { jsx, jsxs } from "@emotion/react/jsx-runtime";
 import { Children } from "react";
 import { useDefaultProps } from "../../hooks/useDefaultProps.js";
 import { setId } from "../../utils/setId.js";
@@ -5,7 +6,6 @@ import { useControlled } from "../../hooks/useControlled.js";
 import { HvControlsContextProvider } from "./context/ControlsContext.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";
 const HvControls = (props) => {
@@ -46,37 +46,20 @@ 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("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 == null ? void 0 : 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))
-        })]
-      })]
-    })
-  });
+  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 == null ? void 0 : 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","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;"}
+{"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,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;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,qBAAoBL,+BAAOwC,UAAS,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;"}

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

@@ -1,9 +1,9 @@
+import { jsxs, jsx } from "@emotion/react/jsx-runtime";
 import { useContext } from "react";
 import { setId } from "../../../utils/setId.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,
@@ -27,18 +27,10 @@ const HvLeftControl = ({
     onSearch == null ? void 0 : onSearch(e, value);
     onSearchHandler == null ? void 0 : 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
-    }), children]
-  });
+  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 }),
+    children
+  ] });
 };
 export {
   HvLeftControl,

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","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;"}
+{"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,yCAAWU,GAAGC;AACdL,uDAAkBK;AAAAA,EAAK;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;"}

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

@@ -1,9 +1,9 @@
+import { jsxs, jsx } from "@emotion/react/jsx-runtime";
 import { useState, useContext } from "react";
 import { setId } from "../../../utils/setId.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,
@@ -32,19 +32,10 @@ const HvRightControl = ({
       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
-    }), children]
-  });
+  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 }),
+    children
+  ] });
 };
 export {
   HvRightControl,

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","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;"}
+{"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,qCAASa;AACTJ,mDAAgBI;AAEGC,sBAAAA,CAAAA,eACjBA,yCAAYC,IAAKC,CAAe,eAAA;AAAA,MAC9B,GAAGA;AAAAA,MACHC,UAAUD,UAAUtB,OAAOmB,MAAMnB;AAAAA,OAErC;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;"}