@hitachivantara/uikit-react-lab 3.47.2 → 3.48.1

package/dist/legacy/Table/TableBody/TableBody.js.map

@@ -1 +1 @@
-{"version":3,"file":"TableBody.js","names":["React","forwardRef","useContext","useRef","PropTypes","clsx","withStyles","useForkRef","Focus","TableContext","TableSectionContext","styles","tableSectionContext","type","filterClassName","defaultComponent","HvTableBody","props","externalRef","classes","className","component","children","withNavigation","others","tableContext","bodyRef","handleRef","Component","components","TBody","root","map","element","key","selected","propTypes","string","node","elementType","bool","shape","isRequired","name"],"sources":["../../../../src/Table/TableBody/TableBody.js"],"sourcesContent":["import React, { forwardRef, useContext, useRef } from \"react\";\nimport PropTypes from \"prop-types\";\nimport clsx from \"clsx\";\n\nimport { withStyles } from \"@material-ui/core\";\nimport { useForkRef } from \"@hitachivantara/uikit-react-core\";\n\nimport Focus from \"@hitachivantara/uikit-react-core/dist/Focus\";\nimport TableContext from \"../TableContext\";\nimport TableSectionContext from \"../TableSectionContext\";\nimport styles from \"./styles\";\n\nconst tableSectionContext = {\n  type: \"body\",\n  filterClassName: \"grid\",\n};\n\nconst defaultComponent = \"tbody\";\n\n/**\n * HvTableBody acts as a `tbody` element.\n * `HvTableCell` and `HvTableRow` elements in it inherit body-specific styles\n */\nconst HvTableBody = forwardRef(function HvTableBody(props, externalRef) {\n  const { classes, className, component, children, withNavigation = false, ...others } = props;\n\n  const tableContext = useContext(TableContext);\n\n  const bodyRef = useRef(null);\n\n  const handleRef = useForkRef(externalRef, bodyRef);\n\n  const Component = component || tableContext?.components?.TBody || defaultComponent;\n\n  return (\n    <TableSectionContext.Provider value={tableSectionContext}>\n      <Component\n        className={clsx(classes.root, className)}\n        ref={handleRef}\n        role={Component === defaultComponent ? null : \"rowgroup\"}\n        {...others}\n      >\n        {withNavigation\n          ? children.map((element) => {\n              return (\n                <Focus\n                  rootRef={bodyRef}\n                  key={`row-${element.key}`}\n                  strategy=\"grid\"\n                  useArrows=\"true\"\n                  filterClass={tableSectionContext.filterClassName}\n                  navigationJump={1}\n                  focusDisabled={false}\n                  selected={element.props.selected}\n                >\n                  {element}\n                </Focus>\n              );\n            })\n          : children}\n      </Component>\n    </TableSectionContext.Provider>\n  );\n});\n\nHvTableBody.propTypes = {\n  /**\n   * Class names to be applied.\n   */\n  className: PropTypes.string,\n  /**\n   * Content to be rendered\n   */\n  children: PropTypes.node,\n  /**\n   * The component used for the root node. Either a string to use a HTML element or a component.\n   * Defaults to tbody.\n   */\n  component: PropTypes.elementType,\n  /**\n   * Sets whether or not there should be arrow navigation between the table rows\n   */\n  withNavigation: PropTypes.bool,\n  /**\n   * A Jss Object used to override or extend the styles applied.\n   */\n  classes: PropTypes.shape({\n    /**\n     * Styles applied to the component root class.\n     */\n    root: PropTypes.string,\n  }).isRequired,\n};\n\nexport default withStyles(styles, { name: \"HvTableBody\" })(HvTableBody);\n"],"mappings":";;;;AAAA,OAAOA,KAAP,IAAgBC,UAAhB,EAA4BC,UAA5B,EAAwCC,MAAxC,QAAsD,OAAtD;AACA,OAAOC,SAAP,MAAsB,YAAtB;AACA,OAAOC,IAAP,MAAiB,MAAjB;AAEA,SAASC,UAAT,QAA2B,mBAA3B;AACA,SAASC,UAAT,QAA2B,kCAA3B;AAEA,OAAOC,KAAP,MAAkB,6CAAlB;AACA,OAAOC,YAAP,MAAyB,iBAAzB;AACA,OAAOC,mBAAP,MAAgC,wBAAhC;AACA,OAAOC,MAAP,MAAmB,UAAnB;AAEA,IAAMC,mBAAmB,GAAG;EAC1BC,IAAI,EAAE,MADoB;EAE1BC,eAAe,EAAE;AAFS,CAA5B;AAKA,IAAMC,gBAAgB,GAAG,OAAzB;AAEA;AACA;AACA;AACA;;AACA,IAAMC,WAAW,gBAAGf,UAAU,CAAC,SAASe,WAAT,CAAqBC,KAArB,EAA4BC,WAA5B,EAAyC;EAAA;;EACtE,IAAQC,OAAR,GAAuFF,KAAvF,CAAQE,OAAR;EAAA,IAAiBC,SAAjB,GAAuFH,KAAvF,CAAiBG,SAAjB;EAAA,IAA4BC,SAA5B,GAAuFJ,KAAvF,CAA4BI,SAA5B;EAAA,IAAuCC,QAAvC,GAAuFL,KAAvF,CAAuCK,QAAvC;EAAA,4BAAuFL,KAAvF,CAAiDM,cAAjD;EAAA,IAAiDA,cAAjD,sCAAkE,KAAlE;EAAA,IAA4EC,MAA5E,4BAAuFP,KAAvF;;EAEA,IAAMQ,YAAY,GAAGvB,UAAU,CAACO,YAAD,CAA/B;EAEA,IAAMiB,OAAO,GAAGvB,MAAM,CAAC,IAAD,CAAtB;EAEA,IAAMwB,SAAS,GAAGpB,UAAU,CAACW,WAAD,EAAcQ,OAAd,CAA5B;EAEA,IAAME,SAAS,GAAGP,SAAS,KAAII,YAAJ,aAAIA,YAAJ,gDAAIA,YAAY,CAAEI,UAAlB,0DAAI,sBAA0BC,KAA9B,CAAT,IAAgDf,gBAAlE;EAEA,oBACE,oBAAC,mBAAD,CAAqB,QAArB;IAA8B,KAAK,EAAEH;EAArC,gBACE,oBAAC,SAAD;IACE,SAAS,EAAEP,IAAI,CAACc,OAAO,CAACY,IAAT,EAAeX,SAAf,CADjB;IAEE,GAAG,EAAEO,SAFP;IAGE,IAAI,EAAEC,SAAS,KAAKb,gBAAd,GAAiC,IAAjC,GAAwC;EAHhD,GAIMS,MAJN,GAMGD,cAAc,GACXD,QAAQ,CAACU,GAAT,CAAa,UAACC,OAAD,EAAa;IACxB,oBACE,oBAAC,KAAD;MACE,OAAO,EAAEP,OADX;MAEE,GAAG,gBAASO,OAAO,CAACC,GAAjB,CAFL;MAGE,QAAQ,EAAC,MAHX;MAIE,SAAS,EAAC,MAJZ;MAKE,WAAW,EAAEtB,mBAAmB,CAACE,eALnC;MAME,cAAc,EAAE,CANlB;MAOE,aAAa,EAAE,KAPjB;MAQE,QAAQ,EAAEmB,OAAO,CAAChB,KAAR,CAAckB;IAR1B,GAUGF,OAVH,CADF;EAcD,CAfD,CADW,GAiBXX,QAvBN,CADF,CADF;AA6BD,CAxC6B,CAA9B;AA0CA,wCAAAN,WAAW,CAACoB,SAAZ,GAAwB;EACtB;AACF;AACA;EACEhB,SAAS,EAAEhB,SAAS,CAACiC,MAJC;;EAKtB;AACF;AACA;EACEf,QAAQ,EAAElB,SAAS,CAACkC,IARE;;EAStB;AACF;AACA;AACA;EACEjB,SAAS,EAAEjB,SAAS,CAACmC,WAbC;;EActB;AACF;AACA;EACEhB,cAAc,EAAEnB,SAAS,CAACoC,IAjBJ;;EAkBtB;AACF;AACA;EACErB,OAAO,EAAEf,SAAS,CAACqC,KAAV,CAAgB;IACvB;AACJ;AACA;IACIV,IAAI,EAAE3B,SAAS,CAACiC;EAJO,CAAhB,EAKNK;AA1BmB,CAAxB;AA6BA,eAAepC,UAAU,CAACK,MAAD,EAAS;EAAEgC,IAAI,EAAE;AAAR,CAAT,CAAV,CAA4C3B,WAA5C,CAAf"}
+{"version":3,"file":"TableBody.js","names":["React","forwardRef","useContext","useRef","PropTypes","clsx","withStyles","HvFocus","useForkRef","TableContext","TableSectionContext","styles","tableSectionContext","type","filterClassName","defaultComponent","HvTableBody","props","externalRef","classes","className","component","children","withNavigation","others","tableContext","bodyRef","handleRef","Component","components","TBody","root","map","element","key","selected","propTypes","string","node","elementType","bool","shape","isRequired","name"],"sources":["../../../../src/Table/TableBody/TableBody.js"],"sourcesContent":["import React, { forwardRef, useContext, useRef } from \"react\";\nimport PropTypes from \"prop-types\";\nimport clsx from \"clsx\";\n\nimport { withStyles } from \"@material-ui/core\";\nimport { HvFocus, useForkRef } from \"@hitachivantara/uikit-react-core\";\n\nimport TableContext from \"../TableContext\";\nimport TableSectionContext from \"../TableSectionContext\";\nimport styles from \"./styles\";\n\nconst tableSectionContext = {\n  type: \"body\",\n  filterClassName: \"grid\",\n};\n\nconst defaultComponent = \"tbody\";\n\n/**\n * HvTableBody acts as a `tbody` element.\n * `HvTableCell` and `HvTableRow` elements in it inherit body-specific styles\n */\nconst HvTableBody = forwardRef(function HvTableBody(props, externalRef) {\n  const { classes, className, component, children, withNavigation = false, ...others } = props;\n\n  const tableContext = useContext(TableContext);\n\n  const bodyRef = useRef(null);\n\n  const handleRef = useForkRef(externalRef, bodyRef);\n\n  const Component = component || tableContext?.components?.TBody || defaultComponent;\n\n  return (\n    <TableSectionContext.Provider value={tableSectionContext}>\n      <Component\n        className={clsx(classes.root, className)}\n        ref={handleRef}\n        role={Component === defaultComponent ? null : \"rowgroup\"}\n        {...others}\n      >\n        {withNavigation\n          ? children.map((element) => {\n              return (\n                <HvFocus\n                  rootRef={bodyRef}\n                  key={`row-${element.key}`}\n                  strategy=\"grid\"\n                  useArrows=\"true\"\n                  filterClass={tableSectionContext.filterClassName}\n                  navigationJump={1}\n                  focusDisabled={false}\n                  selected={element.props.selected}\n                >\n                  {element}\n                </HvFocus>\n              );\n            })\n          : children}\n      </Component>\n    </TableSectionContext.Provider>\n  );\n});\n\nHvTableBody.propTypes = {\n  /**\n   * Class names to be applied.\n   */\n  className: PropTypes.string,\n  /**\n   * Content to be rendered\n   */\n  children: PropTypes.node,\n  /**\n   * The component used for the root node. Either a string to use a HTML element or a component.\n   * Defaults to tbody.\n   */\n  component: PropTypes.elementType,\n  /**\n   * Sets whether or not there should be arrow navigation between the table rows\n   */\n  withNavigation: PropTypes.bool,\n  /**\n   * A Jss Object used to override or extend the styles applied.\n   */\n  classes: PropTypes.shape({\n    /**\n     * Styles applied to the component root class.\n     */\n    root: PropTypes.string,\n  }).isRequired,\n};\n\nexport default withStyles(styles, { name: \"HvTableBody\" })(HvTableBody);\n"],"mappings":"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"}

package/dist/legacy/index.d.ts

@@ -42,3 +42,6 @@ export * from "./ProgressBar";
 
 export { default as HvDotPagination } from "./DotPagination";
 export * from "./DotPagination";
+
+export { default as HvControls } from "./Controls";
+export * from "./Controls";

package/dist/legacy/index.js

@@ -14,6 +14,8 @@ export { default as HvTag } from "./Tag";
 export { default as HvDrawer } from "./Drawer";
 export { default as HvColorPicker } from "./ColorPicker";
 export { default as HvQueryBuilder } from "./QueryBuilder";
+export { default as HvControls } from "./Controls";
+export * from "./Controls";
 export * from "./QueryBuilder";
 export { default as HvInlineEditor } from "./InlineEditor";
 export { default as HvProgressBar } from "./ProgressBar";

package/dist/legacy/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["default","HvAppSwitcherPanel","HvFormComposer","HvNavigationAnchors","HvNotificationPanel","HvSlider","HvTable","HvTimeAgo","HvTimePicker","HvTag","HvDrawer","HvColorPicker","HvQueryBuilder","HvInlineEditor","HvProgressBar","HvDotPagination"],"sources":["../../src/index.js"],"sourcesContent":["// components\nexport { default as HvAppSwitcherPanel } from \"./AppSwitcherPanel\";\nexport * from \"./AppSwitcherPanel\";\nexport { default as HvFormComposer } from \"./FormComposer\";\nexport { default as HvNavigationAnchors } from \"./NavigationAnchors\";\nexport { default as HvNotificationPanel } from \"./NotificationPanel\";\nexport { default as HvSlider } from \"./Slider\";\nexport { default as HvTable } from \"./Table\";\nexport * from \"./Table\";\nexport { default as HvTimeAgo } from \"./TimeAgo\";\nexport * from \"./TimeAgo\";\nexport { default as HvTimePicker } from \"./TimePicker\";\nexport { default as HvTag } from \"./Tag\";\nexport { default as HvDrawer } from \"./Drawer\";\nexport { default as HvColorPicker } from \"./ColorPicker\";\nexport { default as HvQueryBuilder } from \"./QueryBuilder\";\nexport * from \"./QueryBuilder\";\nexport { default as HvInlineEditor } from \"./InlineEditor\";\nexport { default as HvProgressBar } from \"./ProgressBar\";\nexport { default as HvDotPagination } from \"./DotPagination\";\n"],"mappings":"AAAA;AACA,SAASA,OAAO,IAAIC,kBAApB,QAA8C,oBAA9C;AACA,cAAc,oBAAd;AACA,SAASD,OAAO,IAAIE,cAApB,QAA0C,gBAA1C;AACA,SAASF,OAAO,IAAIG,mBAApB,QAA+C,qBAA/C;AACA,SAASH,OAAO,IAAII,mBAApB,QAA+C,qBAA/C;AACA,SAASJ,OAAO,IAAIK,QAApB,QAAoC,UAApC;AACA,SAASL,OAAO,IAAIM,OAApB,QAAmC,SAAnC;AACA,cAAc,SAAd;AACA,SAASN,OAAO,IAAIO,SAApB,QAAqC,WAArC;AACA,cAAc,WAAd;AACA,SAASP,OAAO,IAAIQ,YAApB,QAAwC,cAAxC;AACA,SAASR,OAAO,IAAIS,KAApB,QAAiC,OAAjC;AACA,SAAST,OAAO,IAAIU,QAApB,QAAoC,UAApC;AACA,SAASV,OAAO,IAAIW,aAApB,QAAyC,eAAzC;AACA,SAASX,OAAO,IAAIY,cAApB,QAA0C,gBAA1C;AACA,cAAc,gBAAd;AACA,SAASZ,OAAO,IAAIa,cAApB,QAA0C,gBAA1C;AACA,SAASb,OAAO,IAAIc,aAApB,QAAyC,eAAzC;AACA,SAASd,OAAO,IAAIe,eAApB,QAA2C,iBAA3C"}
+{"version":3,"file":"index.js","names":["default","HvAppSwitcherPanel","HvFormComposer","HvNavigationAnchors","HvNotificationPanel","HvSlider","HvTable","HvTimeAgo","HvTimePicker","HvTag","HvDrawer","HvColorPicker","HvQueryBuilder","HvControls","HvInlineEditor","HvProgressBar","HvDotPagination"],"sources":["../../src/index.js"],"sourcesContent":["// components\nexport { default as HvAppSwitcherPanel } from \"./AppSwitcherPanel\";\nexport * from \"./AppSwitcherPanel\";\nexport { default as HvFormComposer } from \"./FormComposer\";\nexport { default as HvNavigationAnchors } from \"./NavigationAnchors\";\nexport { default as HvNotificationPanel } from \"./NotificationPanel\";\nexport { default as HvSlider } from \"./Slider\";\nexport { default as HvTable } from \"./Table\";\nexport * from \"./Table\";\nexport { default as HvTimeAgo } from \"./TimeAgo\";\nexport * from \"./TimeAgo\";\nexport { default as HvTimePicker } from \"./TimePicker\";\nexport { default as HvTag } from \"./Tag\";\nexport { default as HvDrawer } from \"./Drawer\";\nexport { default as HvColorPicker } from \"./ColorPicker\";\nexport { default as HvQueryBuilder } from \"./QueryBuilder\";\nexport { default as HvControls } from \"./Controls\";\nexport * from \"./Controls\";\nexport * from \"./QueryBuilder\";\nexport { default as HvInlineEditor } from \"./InlineEditor\";\nexport { default as HvProgressBar } from \"./ProgressBar\";\nexport { default as HvDotPagination } from \"./DotPagination\";\n"],"mappings":"AAAA;AACA,SAASA,OAAO,IAAIC,kBAApB,QAA8C,oBAA9C;AACA,cAAc,oBAAd;AACA,SAASD,OAAO,IAAIE,cAApB,QAA0C,gBAA1C;AACA,SAASF,OAAO,IAAIG,mBAApB,QAA+C,qBAA/C;AACA,SAASH,OAAO,IAAII,mBAApB,QAA+C,qBAA/C;AACA,SAASJ,OAAO,IAAIK,QAApB,QAAoC,UAApC;AACA,SAASL,OAAO,IAAIM,OAApB,QAAmC,SAAnC;AACA,cAAc,SAAd;AACA,SAASN,OAAO,IAAIO,SAApB,QAAqC,WAArC;AACA,cAAc,WAAd;AACA,SAASP,OAAO,IAAIQ,YAApB,QAAwC,cAAxC;AACA,SAASR,OAAO,IAAIS,KAApB,QAAiC,OAAjC;AACA,SAAST,OAAO,IAAIU,QAApB,QAAoC,UAApC;AACA,SAASV,OAAO,IAAIW,aAApB,QAAyC,eAAzC;AACA,SAASX,OAAO,IAAIY,cAApB,QAA0C,gBAA1C;AACA,SAASZ,OAAO,IAAIa,UAApB,QAAsC,YAAtC;AACA,cAAc,YAAd;AACA,cAAc,gBAAd;AACA,SAASb,OAAO,IAAIc,cAApB,QAA0C,gBAA1C;AACA,SAASd,OAAO,IAAIe,aAApB,QAAyC,eAAzC;AACA,SAASf,OAAO,IAAIgB,eAApB,QAA2C,iBAA3C"}

package/dist/modern/Controls/Controls.d.ts

@@ -0,0 +1,57 @@
+import { StandardProps } from "@material-ui/core";
+
+export type HvControlsClassKey = "root" | "rightSection" | "leftSection";
+
+export interface HvControlsSortValue {
+  id: string;
+  desc: string;
+}
+export interface HvControlsViewConfiguration extends Record<string, unknown> {
+  setSortBy?: (v: HvControlsSortValue[]) => void;
+  setGlobalFilter?: (v: string) => void;
+}
+
+export interface HvControlsCallbacks extends Record<string, unknown> {
+  id: string;
+  label: string;
+  icon: React.ReactNode;
+}
+
+export interface HvControlsProps
+  extends StandardProps<React.HTMLAttributes<HTMLDivElement>, HvControlsClassKey> {
+  /** Children to be rendered. */
+  id?: string;
+  /**
+   * Class names to be applied.
+   */
+  className?: string;
+  /**
+   * An instance of useHvTable or useTable used to manage the data
+   * if this is not provided data sorting and search must be handled externally
+   */
+  callbacks?: HvControlsCallbacks;
+  /**
+   * Views configuration required for the view buttons
+   */
+  views?: HvControlsViewConfiguration[];
+  /**
+   * What view is selected by default
+   */
+  defaultView?: string;
+  /**
+   * Sets the selected view to be the one specified
+   * if specified the component is in a controlled state and it won't change it state
+   * unless specified externally
+   */
+  selectedView?: string;
+  /**
+   * Callback called when the view switcher button is pressed
+   */
+  onViewChange?: (event: Event, id: string) => void;
+  /**
+   * if `true` the button to switch views is not rendered
+   */
+  hideViewSwitcher?: boolean;
+}
+
+export default function HvControls(props: HvControlsProps): JSX.Element | null;

package/dist/modern/Controls/Controls.js

@@ -0,0 +1,164 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+const _excluded = ["id", "icon"];
+import "core-js/modules/web.dom-collections.iterator.js";
+import React from "react";
+import PropTypes from "prop-types";
+import clsx from "clsx";
+import { withStyles } from "@material-ui/core";
+import { useControlled, HvMultiButton, HvButton, setId } from "@hitachivantara/uikit-react-core";
+import { HvControlsContextProvider } from "./context/ControlsContext";
+import styleCreator from "./styles";
+/** Controls it's a group of features used to control data that can be rendered using different views (table, cards, list). */
+
+const HvControls = ({
+  id,
+  views,
+  classes,
+  className,
+  callbacks,
+  selectedView,
+  defaultView,
+  children,
+  hideViewSwitcher = false,
+  onViewChange
+}) => {
+  const [currentView, setCurrentView] = useControlled(selectedView, defaultView);
+
+  const onViewChangeHandler = (evt, btnId) => {
+    setCurrentView(btnId);
+    onViewChange === null || onViewChange === void 0 ? void 0 : onViewChange(evt, btnId);
+  };
+
+  const onSearchHandler = value => callbacks === null || callbacks === void 0 ? void 0 : callbacks.setGlobalFilter(value);
+
+  const onSortHandler = value => callbacks === null || callbacks === void 0 ? void 0 : callbacks.setSortBy([{
+    id: value === null || value === void 0 ? void 0 : value.accessor,
+    desc: value === null || value === void 0 ? void 0 : value.desc
+  }]);
+
+  const childrenIndexCut = (children === null || children === void 0 ? void 0 : children.length) > 0 ? Math.round(children.length * 0.5) : 0;
+  const leftChildren = children.slice(0, childrenIndexCut);
+  const rightChildren = children.slice(childrenIndexCut, (children === null || children === void 0 ? void 0 : children.length) || 0);
+  return /*#__PURE__*/React.createElement("div", {
+    id: id,
+    className: clsx(className, classes.root)
+  }, /*#__PURE__*/React.createElement(HvControlsContextProvider, {
+    value: {
+      onSearch: onSearchHandler,
+      onSort: onSortHandler
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    className: clsx(classes.section, classes.leftSection)
+  }, leftChildren), /*#__PURE__*/React.createElement("div", {
+    className: clsx(classes.section, classes.rightSection)
+  }, rightChildren, !hideViewSwitcher && (views === null || views === void 0 ? void 0 : views.length) > 0 && /*#__PURE__*/React.createElement(HvMultiButton, {
+    id: setId(id, "view-multi-button")
+  }, views === null || views === void 0 ? void 0 : views.map(_ref => {
+    let {
+      id: btnId,
+      icon
+    } = _ref,
+        others = _objectWithoutProperties(_ref, _excluded);
+
+    return /*#__PURE__*/React.createElement(HvButton, _extends({
+      id: btnId,
+      key: btnId,
+      icon: true,
+      selected: currentView === btnId,
+      onClick: evt => onViewChangeHandler(evt, btnId)
+    }, others), icon);
+  })))));
+};
+
+process.env.NODE_ENV !== "production" ? HvControls.propTypes = {
+  /** Children to be rendered. */
+  id: PropTypes.string,
+
+  /**
+   * Class names to be applied.
+   */
+  className: PropTypes.string,
+
+  /**
+   * Children elements to be rendered
+   */
+  children: PropTypes.node,
+
+  /**
+   * An instance of useHvTable or useTable used to manage the data
+   * if this is not provided data sorting and search must be handled externally
+   */
+  callbacks: PropTypes.shape({
+    /**
+     * Callback used by the .
+     */
+    setSortBy: PropTypes.func,
+
+    /**
+     * Callback used by the search input to filter data across all fields
+     */
+    setGlobalFilter: PropTypes.func
+  }),
+
+  /**
+   * Views configuration required for the view buttons
+   */
+  views: PropTypes.arrayOf(PropTypes.shape({
+    label: PropTypes.string,
+    icon: PropTypes.node,
+    id: PropTypes.string
+  })),
+
+  /**
+   * the classes object to be applied into the root object.
+   */
+  classes: PropTypes.shape({
+    /**
+     * Style applied to the root of the component.
+     */
+    root: PropTypes.string,
+
+    /**
+     * Right box of the controls
+     */
+    rightSection: PropTypes.string,
+
+    /**
+     * Left box of the controls
+     */
+    leftSection: PropTypes.string,
+
+    /**
+     * common styles for left and right controls
+     */
+    section: PropTypes.string
+  }).isRequired,
+
+  /**
+   * What view is selected by default
+   */
+  defaultView: PropTypes.string,
+
+  /**
+   * Sets the selected view to be the one specified
+   * if specified the component is in a controlled state and it won't change it state
+   * unless specified externally
+   */
+  selectedView: PropTypes.string,
+
+  /**
+   * Callback called when the view switcher button is pressed
+   */
+  onViewChange: PropTypes.func,
+
+  /**
+   * if `true` the button to switch views is not rendered
+   */
+  hideViewSwitcher: PropTypes.bool
+} : void 0;
+export default withStyles(styleCreator, {
+  name: "HvControls",
+  withTheme: true
+})(HvControls);
+//# sourceMappingURL=Controls.js.map

package/dist/modern/Controls/Controls.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Controls.js","names":["React","PropTypes","clsx","withStyles","useControlled","HvMultiButton","HvButton","setId","HvControlsContextProvider","styleCreator","HvControls","id","views","classes","className","callbacks","selectedView","defaultView","children","hideViewSwitcher","onViewChange","currentView","setCurrentView","onViewChangeHandler","evt","btnId","onSearchHandler","value","setGlobalFilter","onSortHandler","setSortBy","accessor","desc","childrenIndexCut","length","Math","round","leftChildren","slice","rightChildren","root","onSearch","onSort","section","leftSection","rightSection","map","icon","others","propTypes","string","node","shape","func","arrayOf","label","isRequired","bool","name","withTheme"],"sources":["../../../src/Controls/Controls.js"],"sourcesContent":["import React from \"react\";\nimport PropTypes from \"prop-types\";\nimport clsx from \"clsx\";\nimport { withStyles } from \"@material-ui/core\";\nimport { useControlled, HvMultiButton, HvButton, setId } from \"@hitachivantara/uikit-react-core\";\nimport { HvControlsContextProvider } from \"./context/ControlsContext\";\nimport styleCreator from \"./styles\";\n\n/** Controls it's a group of features used to control data that can be rendered using different views (table, cards, list). */\nconst HvControls = ({\n  id,\n  views,\n  classes,\n  className,\n  callbacks,\n  selectedView,\n  defaultView,\n  children,\n  hideViewSwitcher = false,\n  onViewChange,\n}) => {\n  const [currentView, setCurrentView] = useControlled(selectedView, defaultView);\n\n  const onViewChangeHandler = (evt, btnId) => {\n    setCurrentView(btnId);\n    onViewChange?.(evt, btnId);\n  };\n\n  const onSearchHandler = (value) => callbacks?.setGlobalFilter(value);\n  const onSortHandler = (value) =>\n    callbacks?.setSortBy([\n      {\n        id: value?.accessor,\n        desc: value?.desc,\n      },\n    ]);\n  const childrenIndexCut = children?.length > 0 ? Math.round(children.length * 0.5) : 0;\n  const leftChildren = children.slice(0, childrenIndexCut);\n  const rightChildren = children.slice(childrenIndexCut, children?.length || 0);\n  return (\n    <div id={id} className={clsx(className, classes.root)}>\n      <HvControlsContextProvider\n        value={{\n          onSearch: onSearchHandler,\n          onSort: onSortHandler,\n        }}\n      >\n        <div className={clsx(classes.section, classes.leftSection)}>{leftChildren}</div>\n        <div className={clsx(classes.section, classes.rightSection)}>\n          {rightChildren}\n          {!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\nHvControls.propTypes = {\n  /** Children to be rendered. */\n  id: PropTypes.string,\n  /**\n   * Class names to be applied.\n   */\n  className: PropTypes.string,\n  /**\n   * Children elements to be rendered\n   */\n  children: PropTypes.node,\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: PropTypes.shape({\n    /**\n     * Callback used by the .\n     */\n    setSortBy: PropTypes.func,\n    /**\n     * Callback used by the search input to filter data across all fields\n     */\n    setGlobalFilter: PropTypes.func,\n  }),\n  /**\n   * Views configuration required for the view buttons\n   */\n  views: PropTypes.arrayOf(\n    PropTypes.shape({\n      label: PropTypes.string,\n      icon: PropTypes.node,\n      id: PropTypes.string,\n    })\n  ),\n  /**\n   * the classes object to be applied into the root object.\n   */\n  classes: PropTypes.shape({\n    /**\n     * Style applied to the root of the component.\n     */\n    root: PropTypes.string,\n    /**\n     * Right box of the controls\n     */\n    rightSection: PropTypes.string,\n    /**\n     * Left box of the controls\n     */\n    leftSection: PropTypes.string,\n    /**\n     * common styles for left and right controls\n     */\n    section: PropTypes.string,\n  }).isRequired,\n  /**\n   * What view is selected by default\n   */\n  defaultView: PropTypes.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: PropTypes.string,\n  /**\n   * Callback called when the view switcher button is pressed\n   */\n  onViewChange: PropTypes.func,\n  /**\n   * if `true` the button to switch views is not rendered\n   */\n  hideViewSwitcher: PropTypes.bool,\n};\n\nexport default withStyles(styleCreator, { name: \"HvControls\", withTheme: true })(HvControls);\n"],"mappings":"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"}

package/dist/modern/Controls/LeftControl/LeftControl.d.ts

@@ -0,0 +1,32 @@
+import { StandardProps } from "@material-ui/core";
+import { HvInputProps } from "@hitachivantara/uikit-react-core";
+
+export type HvLeftControlClassKey = "root";
+
+export interface HvLeftControlProps
+  extends StandardProps<React.HTMLAttributes<HTMLDivElement>, HvLeftControlClassKey> {
+  /** Children to be rendered. */
+  id?: string;
+  /**
+   * Class names to be applied.
+   */
+  className?: string;
+  /**
+   * if `true` the hide sort by dropdown is not rendered
+   */
+  hideSearch?: boolean;
+  /**
+   * placeholder of the input
+   */
+  placeholder?: string;
+  /**
+   * Callback called when a search action occurs
+   */
+  onSearch?: (event: React.ChangeEvent<HTMLInputElement>, value: string) => void;
+  /**
+   * Extra props passed to input
+   */
+  searchProps?: HvInputProps;
+}
+
+export default function HvLeftControl(props: HvLeftControlProps): JSX.Element | null;

package/dist/modern/Controls/LeftControl/LeftControl.js

@@ -0,0 +1,90 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+const _excluded = ["id", "classes", "className", "children", "placeholder", "onSearch", "hideSearch", "searchProps"];
+import React, { useContext } from "react";
+import clsx from "clsx";
+import PropTypes from "prop-types";
+import { withStyles } from "@material-ui/core";
+import { HvInput, setId } from "@hitachivantara/uikit-react-core";
+import { HvControlsContext } from "../context/ControlsContext";
+import styleCreator from "./styles";
+
+const HvLeftControl = _ref => {
+  let {
+    id,
+    classes,
+    className,
+    children,
+    placeholder = "Search",
+    onSearch,
+    hideSearch = false,
+    searchProps
+  } = _ref,
+      others = _objectWithoutProperties(_ref, _excluded);
+
+  const {
+    onSearch: onSearchHandler
+  } = useContext(HvControlsContext);
+
+  const onChangeFilter = (e, value) => {
+    onSearch === null || onSearch === void 0 ? void 0 : onSearch(e, value);
+    onSearchHandler === null || onSearchHandler === void 0 ? void 0 : onSearchHandler(value);
+  };
+
+  return /*#__PURE__*/React.createElement("div", _extends({
+    id: id,
+    className: clsx(className, classes.root)
+  }, others), !hideSearch && /*#__PURE__*/React.createElement(HvInput, _extends({
+    id: setId(id, "search-input"),
+    type: "search",
+    placeholder: placeholder,
+    onChange: (e, value) => onChangeFilter(e, value)
+  }, searchProps)), children);
+};
+
+process.env.NODE_ENV !== "production" ? HvLeftControl.propTypes = {
+  /** Children to be rendered. */
+  id: PropTypes.string,
+
+  /**
+   * Class names to be applied.
+   */
+  className: PropTypes.string,
+
+  /** Children to be rendered. */
+  children: PropTypes.node,
+
+  /**
+   * the classes object to be applied.
+   */
+  classes: PropTypes.shape({
+    /**
+     * Style applied to the root of the component.
+     */
+    root: PropTypes.string,
+
+    /**
+     * Style applied to the dropdown in charge of sorting.
+     */
+    sortDropdown: PropTypes.string
+  }).isRequired,
+
+  /** Placeholder text to be show within the search input. */
+  placeholder: PropTypes.string,
+
+  /** Callback fired when the user starts to type in the search field. */
+  onSearch: PropTypes.func,
+
+  /** Boolean to control whether if the search input should appears or not. */
+  hideSearch: PropTypes.bool,
+
+  /**
+   * Extra props to be passed onto the input
+   */
+  searchProps: PropTypes.object
+} : void 0;
+export default withStyles(styleCreator, {
+  name: "HvLeftControl",
+  withTheme: true
+})(HvLeftControl);
+//# sourceMappingURL=LeftControl.js.map

package/dist/modern/Controls/LeftControl/LeftControl.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"LeftControl.js","names":["React","useContext","clsx","PropTypes","withStyles","HvInput","setId","HvControlsContext","styleCreator","HvLeftControl","id","classes","className","children","placeholder","onSearch","hideSearch","searchProps","others","onSearchHandler","onChangeFilter","e","value","root","propTypes","string","node","shape","sortDropdown","isRequired","func","bool","object","name","withTheme"],"sources":["../../../../src/Controls/LeftControl/LeftControl.js"],"sourcesContent":["import React, { useContext } from \"react\";\nimport clsx from \"clsx\";\nimport PropTypes from \"prop-types\";\nimport { withStyles } from \"@material-ui/core\";\nimport { HvInput, setId } from \"@hitachivantara/uikit-react-core\";\nimport { HvControlsContext } from \"../context/ControlsContext\";\nimport styleCreator from \"./styles\";\n\nconst HvLeftControl = ({\n  id,\n  classes,\n  className,\n  children,\n  placeholder = \"Search\",\n  onSearch,\n  hideSearch = false,\n  searchProps,\n  ...others\n}) => {\n  const { onSearch: onSearchHandler } = useContext(HvControlsContext);\n\n  const onChangeFilter = (e, value) => {\n    onSearch?.(e, value);\n    onSearchHandler?.(value);\n  };\n\n  return (\n    <div id={id} className={clsx(className, classes.root)} {...others}>\n      {!hideSearch && (\n        <HvInput\n          id={setId(id, \"search-input\")}\n          type=\"search\"\n          placeholder={placeholder}\n          onChange={(e, value) => onChangeFilter(e, value)}\n          {...searchProps}\n        />\n      )}\n      {children}\n    </div>\n  );\n};\n\nHvLeftControl.propTypes = {\n  /** Children to be rendered. */\n  id: PropTypes.string,\n  /**\n   * Class names to be applied.\n   */\n  className: PropTypes.string,\n  /** Children to be rendered. */\n  children: PropTypes.node,\n  /**\n   * the classes object to be applied.\n   */\n  classes: PropTypes.shape({\n    /**\n     * Style applied to the root of the component.\n     */\n    root: PropTypes.string,\n    /**\n     * Style applied to the dropdown in charge of sorting.\n     */\n    sortDropdown: PropTypes.string,\n  }).isRequired,\n  /** Placeholder text to be show within the search input. */\n  placeholder: PropTypes.string,\n  /** Callback fired when the user starts to type in the search field. */\n  onSearch: PropTypes.func,\n  /** Boolean to control whether if the search input should appears or not. */\n  hideSearch: PropTypes.bool,\n  /**\n   * Extra props to be passed onto the input\n   */\n  searchProps: PropTypes.object,\n};\n\nexport default withStyles(styleCreator, { name: \"HvLeftControl\", withTheme: true })(HvLeftControl);\n"],"mappings":";;;AAAA,OAAOA,KAAP,IAAgBC,UAAhB,QAAkC,OAAlC;AACA,OAAOC,IAAP,MAAiB,MAAjB;AACA,OAAOC,SAAP,MAAsB,YAAtB;AACA,SAASC,UAAT,QAA2B,mBAA3B;AACA,SAASC,OAAT,EAAkBC,KAAlB,QAA+B,kCAA/B;AACA,SAASC,iBAAT,QAAkC,4BAAlC;AACA,OAAOC,YAAP,MAAyB,UAAzB;;AAEA,MAAMC,aAAa,GAAG,QAUhB;EAAA,IAViB;IACrBC,EADqB;IAErBC,OAFqB;IAGrBC,SAHqB;IAIrBC,QAJqB;IAKrBC,WAAW,GAAG,QALO;IAMrBC,QANqB;IAOrBC,UAAU,GAAG,KAPQ;IAQrBC;EARqB,CAUjB;EAAA,IADDC,MACC;;EACJ,MAAM;IAAEH,QAAQ,EAAEI;EAAZ,IAAgClB,UAAU,CAACM,iBAAD,CAAhD;;EAEA,MAAMa,cAAc,GAAG,CAACC,CAAD,EAAIC,KAAJ,KAAc;IACnCP,QAAQ,SAAR,IAAAA,QAAQ,WAAR,YAAAA,QAAQ,CAAGM,CAAH,EAAMC,KAAN,CAAR;IACAH,eAAe,SAAf,IAAAA,eAAe,WAAf,YAAAA,eAAe,CAAGG,KAAH,CAAf;EACD,CAHD;;EAKA,oBACE;IAAK,EAAE,EAAEZ,EAAT;IAAa,SAAS,EAAER,IAAI,CAACU,SAAD,EAAYD,OAAO,CAACY,IAApB;EAA5B,GAA2DL,MAA3D,GACG,CAACF,UAAD,iBACC,oBAAC,OAAD;IACE,EAAE,EAAEV,KAAK,CAACI,EAAD,EAAK,cAAL,CADX;IAEE,IAAI,EAAC,QAFP;IAGE,WAAW,EAAEI,WAHf;IAIE,QAAQ,EAAE,CAACO,CAAD,EAAIC,KAAJ,KAAcF,cAAc,CAACC,CAAD,EAAIC,KAAJ;EAJxC,GAKML,WALN,EAFJ,EAUGJ,QAVH,CADF;AAcD,CAhCD;;AAkCA,wCAAAJ,aAAa,CAACe,SAAd,GAA0B;EACxB;EACAd,EAAE,EAAEP,SAAS,CAACsB,MAFU;;EAGxB;AACF;AACA;EACEb,SAAS,EAAET,SAAS,CAACsB,MANG;;EAOxB;EACAZ,QAAQ,EAAEV,SAAS,CAACuB,IARI;;EASxB;AACF;AACA;EACEf,OAAO,EAAER,SAAS,CAACwB,KAAV,CAAgB;IACvB;AACJ;AACA;IACIJ,IAAI,EAAEpB,SAAS,CAACsB,MAJO;;IAKvB;AACJ;AACA;IACIG,YAAY,EAAEzB,SAAS,CAACsB;EARD,CAAhB,EASNI,UArBqB;;EAsBxB;EACAf,WAAW,EAAEX,SAAS,CAACsB,MAvBC;;EAwBxB;EACAV,QAAQ,EAAEZ,SAAS,CAAC2B,IAzBI;;EA0BxB;EACAd,UAAU,EAAEb,SAAS,CAAC4B,IA3BE;;EA4BxB;AACF;AACA;EACEd,WAAW,EAAEd,SAAS,CAAC6B;AA/BC,CAA1B;AAkCA,eAAe5B,UAAU,CAACI,YAAD,EAAe;EAAEyB,IAAI,EAAE,eAAR;EAAyBC,SAAS,EAAE;AAApC,CAAf,CAAV,CAAqEzB,aAArE,CAAf"}

package/dist/modern/Controls/LeftControl/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from "./LeftControl";
+export * from "./LeftControl";

package/dist/modern/Controls/LeftControl/index.js

@@ -0,0 +1,2 @@
+export { default } from "./LeftControl";
+//# sourceMappingURL=index.js.map

package/dist/modern/Controls/LeftControl/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["default"],"sources":["../../../../src/Controls/LeftControl/index.js"],"sourcesContent":["export { default } from \"./LeftControl\";\n"],"mappings":"AAAA,SAASA,OAAT,QAAwB,eAAxB"}

package/dist/modern/Controls/LeftControl/styles.js

@@ -0,0 +1,9 @@
+const styles = () => ({
+  root: {
+    display: "inline-flex",
+    gap: 10
+  }
+});
+
+export default styles;
+//# sourceMappingURL=styles.js.map

package/dist/modern/Controls/LeftControl/styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.js","names":["styles","root","display","gap"],"sources":["../../../../src/Controls/LeftControl/styles.js"],"sourcesContent":["const styles = () => ({\n  root: {\n    display: \"inline-flex\",\n    gap: 10,\n  },\n});\n\nexport default styles;\n"],"mappings":"AAAA,MAAMA,MAAM,GAAG,OAAO;EACpBC,IAAI,EAAE;IACJC,OAAO,EAAE,aADL;IAEJC,GAAG,EAAE;EAFD;AADc,CAAP,CAAf;;AAOA,eAAeH,MAAf"}

package/dist/modern/Controls/RightControl/RightControl.d.ts

@@ -0,0 +1,43 @@
+import { StandardProps } from "@material-ui/core";
+import { HvDropdownProps, ListValueProp } from "@hitachivantara/uikit-react-core";
+
+export type HvRightControlClassKey = "root" | "sortDropdown";
+
+export interface HvControlsViewConfiguration extends Record<string, unknown> {
+  id: string;
+  label: string;
+  icon: React.ReactNode;
+}
+
+export interface RightListControls extends ListValueProp {
+  accesor: string;
+  desc: boolean;
+}
+
+export interface HvRightControlProps
+  extends StandardProps<React.HTMLAttributes<HTMLDivElement>, HvRightControlClassKey> {
+  /** Children to be rendered. */
+  id?: string;
+  /**
+   * Class names to be applied.
+   */
+  className?: string;
+  /**
+   * if `true` the hide sort by dropdown is not rendered
+   */
+  hideSortBy?: boolean;
+  /**
+   * options for the dropdown to sort
+   */
+  values?: RightListControls[];
+  /**
+   * Callback called when a sort action occurs
+   */
+  onSort?: (selected: RightListControls | ListValueProp | ListValueProp[] | undefined) => void;
+  /**
+   * Extra props passed to dropdown
+   */
+  sortProps?: HvDropdownProps;
+}
+
+export default function HvRightControl(props: HvRightControlProps): JSX.Element | null;

package/dist/modern/Controls/RightControl/RightControl.js

@@ -0,0 +1,109 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+const _excluded = ["id", "classes", "className", "children", "values", "onSort", "hideSortBy", "sortProps"];
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+import "core-js/modules/web.dom-collections.iterator.js";
+import React, { useContext, useState } from "react";
+import PropTypes from "prop-types";
+import clsx from "clsx";
+import { withStyles } from "@material-ui/core";
+import { HvDropdown, setId } from "@hitachivantara/uikit-react-core";
+import styleCreator from "./styles";
+import { HvControlsContext } from "../context/ControlsContext";
+
+const HvRightControl = _ref => {
+  let {
+    id,
+    classes,
+    className,
+    children,
+    values,
+    onSort,
+    hideSortBy = false,
+    sortProps
+  } = _ref,
+      others = _objectWithoutProperties(_ref, _excluded);
+
+  const [dropDownValues, setDropdownValues] = useState(values);
+  const {
+    onSort: onSortHandler
+  } = useContext(HvControlsContext);
+
+  const handleChangeSort = value => {
+    onSort === null || onSort === void 0 ? void 0 : onSort(value);
+    onSortHandler === null || onSortHandler === void 0 ? void 0 : onSortHandler(value); // this should be changed when dropdown changes his "values" behavior
+
+    setDropdownValues(prevValues => prevValues.map(prevValue => _objectSpread(_objectSpread({}, prevValue), {}, {
+      selected: prevValue.id === value.id
+    })));
+  };
+
+  return /*#__PURE__*/React.createElement("div", _extends({
+    id: id,
+    className: clsx(className, classes.root)
+  }, others), !hideSortBy && /*#__PURE__*/React.createElement(HvDropdown, _extends({
+    id: setId(id, "sort-by-dropdown"),
+    values: dropDownValues,
+    className: classes.sortDropdown,
+    onChange: handleChangeSort,
+    singleSelectionToggle: false
+  }, sortProps)), children);
+};
+
+process.env.NODE_ENV !== "production" ? HvRightControl.propTypes = {
+  /** Children to be rendered. */
+  id: PropTypes.string,
+
+  /**
+   * Class names to be applied.
+   */
+  className: PropTypes.string,
+
+  /** Children to be rendered. */
+  children: PropTypes.node,
+
+  /**
+   * the classes object to be applied.
+   */
+  classes: PropTypes.shape({
+    /**
+     * Style applied to the root of the component.
+     */
+    root: PropTypes.string,
+
+    /**
+     * Style applied to the dropdown in charge of sorting.
+     */
+    sortDropdown: PropTypes.string
+  }).isRequired,
+
+  /** Data collection to be listed on the sort field. */
+  values: PropTypes.arrayOf(PropTypes.shape({
+    id: PropTypes.string,
+    accessor: PropTypes.string,
+    label: PropTypes.string,
+    selected: PropTypes.bool,
+    desc: PropTypes.bool
+  })),
+
+  /** Callback fired when the selected sort item is changed. */
+  onSort: PropTypes.func,
+
+  /** Boolean to control whether if the sort input should appears or not. */
+  hideSortBy: PropTypes.bool,
+
+  /**
+   * Extra props to be passed onto the dropdown
+   */
+  sortProps: PropTypes.object
+} : void 0;
+export default withStyles(styleCreator, {
+  name: "HvRightControl",
+  withTheme: true
+})(HvRightControl);
+//# sourceMappingURL=RightControl.js.map

package/dist/modern/Controls/RightControl/RightControl.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RightControl.js","names":["React","useContext","useState","PropTypes","clsx","withStyles","HvDropdown","setId","styleCreator","HvControlsContext","HvRightControl","id","classes","className","children","values","onSort","hideSortBy","sortProps","others","dropDownValues","setDropdownValues","onSortHandler","handleChangeSort","value","prevValues","map","prevValue","selected","root","sortDropdown","propTypes","string","node","shape","isRequired","arrayOf","accessor","label","bool","desc","func","object","name","withTheme"],"sources":["../../../../src/Controls/RightControl/RightControl.js"],"sourcesContent":["import React, { useContext, useState } from \"react\";\nimport PropTypes from \"prop-types\";\nimport clsx from \"clsx\";\nimport { withStyles } from \"@material-ui/core\";\nimport { HvDropdown, setId } from \"@hitachivantara/uikit-react-core\";\nimport styleCreator from \"./styles\";\nimport { HvControlsContext } from \"../context/ControlsContext\";\n\nconst HvRightControl = ({\n  id,\n  classes,\n  className,\n  children,\n  values,\n  onSort,\n  hideSortBy = false,\n  sortProps,\n  ...others\n}) => {\n  const [dropDownValues, setDropdownValues] = useState(values);\n\n  const { onSort: onSortHandler } = useContext(HvControlsContext);\n\n  const handleChangeSort = (value) => {\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  return (\n    <div id={id} className={clsx(className, classes.root)} {...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\nHvRightControl.propTypes = {\n  /** Children to be rendered. */\n  id: PropTypes.string,\n  /**\n   * Class names to be applied.\n   */\n  className: PropTypes.string,\n  /** Children to be rendered. */\n  children: PropTypes.node,\n  /**\n   * the classes object to be applied.\n   */\n  classes: PropTypes.shape({\n    /**\n     * Style applied to the root of the component.\n     */\n    root: PropTypes.string,\n    /**\n     * Style applied to the dropdown in charge of sorting.\n     */\n    sortDropdown: PropTypes.string,\n  }).isRequired,\n  /** Data collection to be listed on the sort field. */\n  values: PropTypes.arrayOf(\n    PropTypes.shape({\n      id: PropTypes.string,\n      accessor: PropTypes.string,\n      label: PropTypes.string,\n      selected: PropTypes.bool,\n      desc: PropTypes.bool,\n    })\n  ),\n  /** Callback fired when the selected sort item is changed. */\n  onSort: PropTypes.func,\n  /** Boolean to control whether if the sort input should appears or not. */\n  hideSortBy: PropTypes.bool,\n  /**\n   * Extra props to be passed onto the dropdown\n   */\n  sortProps: PropTypes.object,\n};\n\nexport default withStyles(styleCreator, { name: \"HvRightControl\", withTheme: true })(\n  HvRightControl\n);\n"],"mappings":"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"}

package/dist/modern/Controls/RightControl/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from "./RightControl";
+export * from "./RightControl";

package/dist/modern/Controls/RightControl/index.js

@@ -0,0 +1,2 @@
+export { default } from "./RightControl";
+//# sourceMappingURL=index.js.map

package/dist/modern/Controls/RightControl/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["default"],"sources":["../../../../src/Controls/RightControl/index.js"],"sourcesContent":["export { default } from \"./RightControl\";\n"],"mappings":"AAAA,SAASA,OAAT,QAAwB,gBAAxB"}