@hitachivantara/uikit-react-core 3.63.0 → 3.66.0

package/dist/modern/SimpleGrid/SimpleGrid.d.ts

@@ -0,0 +1,17 @@
+import { FunctionComponent } from "react";
+
+export type Spacing = "xs" | "sm" | "md" | "lg";
+export type Breakpoints = {
+  cols?: number;
+  maxWidth?: number;
+  minWidth?: number;
+  spacing?: Spacing;
+};
+
+export interface SimpleGridProps extends FunctionComponent {
+  spacing?: Spacing;
+  cols?: number;
+  breakpoints?: Breakpoints;
+}
+
+export default function HvSimpleGrid(props: SimpleGridProps): JSX.Element | null;

package/dist/modern/SimpleGrid/SimpleGrid.js

@@ -0,0 +1,60 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+const _excluded = ["children", "breakpoints", "spacing", "cols"];
+import React from "react";
+import PropTypes from "prop-types";
+import useStyles from "./styles";
+
+const SimpleGrid = _ref => {
+  let {
+    children,
+    breakpoints,
+    spacing = "sm",
+    cols
+  } = _ref,
+      others = _objectWithoutProperties(_ref, _excluded);
+
+  const classes = useStyles({
+    breakpoints,
+    cols,
+    spacing
+  })();
+  return /*#__PURE__*/React.createElement("div", _extends({
+    className: classes.container
+  }, others), children);
+};
+
+process.env.NODE_ENV !== "production" ? SimpleGrid.propTypes = {
+  /**
+   * -
+   */
+  children: PropTypes.node,
+
+  /**
+   * Spacing with pre-defined values according the values defined in the theme
+   */
+  spacing: PropTypes.oneOf(["sm", "md", "lg", "xl"]),
+
+  /**
+   * Provide an array to define responsive behavior:
+   *
+   *    maxWidth or minWidth: max-width or min-width at which media query will work
+   *
+   *    cols: number of columns per row at given max-width
+   *
+   *    spacing: optional spacing at given max-width, if not provided spacing from component prop will be used instead
+   */
+  breakpoints: PropTypes.arrayOf(PropTypes.shape({
+    maxWidth: PropTypes.number,
+    minWidth: PropTypes.number,
+    cols: PropTypes.number,
+    spacing: PropTypes.oneOf(["sm", "md", "lg", "xl"])
+  })),
+
+  /**
+   * Number of how many columns the content will be displayed
+   */
+  cols: PropTypes.number
+} : void 0;
+export default SimpleGrid;
+//# sourceMappingURL=SimpleGrid.js.map

package/dist/modern/SimpleGrid/SimpleGrid.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/SimpleGrid/SimpleGrid.js"],"names":["React","PropTypes","useStyles","SimpleGrid","children","breakpoints","spacing","cols","others","classes","container","propTypes","node","oneOf","arrayOf","shape","maxWidth","number","minWidth"],"mappings":";;;AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,OAAOC,SAAP,MAAsB,YAAtB;AACA,OAAOC,SAAP,MAAsB,UAAtB;;AAEA,MAAMC,UAAU,GAAG,QAAgE;AAAA,MAA/D;AAAEC,IAAAA,QAAF;AAAYC,IAAAA,WAAZ;AAAyBC,IAAAA,OAAO,GAAG,IAAnC;AAAyCC,IAAAA;AAAzC,GAA+D;AAAA,MAAbC,MAAa;;AACjF,QAAMC,OAAO,GAAGP,SAAS,CAAC;AAAEG,IAAAA,WAAF;AAAeE,IAAAA,IAAf;AAAqBD,IAAAA;AAArB,GAAD,CAAT,EAAhB;AACA,sBACE;AAAK,IAAA,SAAS,EAAEG,OAAO,CAACC;AAAxB,KAAuCF,MAAvC,GACGJ,QADH,CADF;AAKD,CAPD;;AASA,wCAAAD,UAAU,CAACQ,SAAX,GAAuB;AACrB;AACF;AACA;AACEP,EAAAA,QAAQ,EAAEH,SAAS,CAACW,IAJC;;AAKrB;AACF;AACA;AACEN,EAAAA,OAAO,EAAEL,SAAS,CAACY,KAAV,CAAgB,CAAC,IAAD,EAAO,IAAP,EAAa,IAAb,EAAmB,IAAnB,CAAhB,CARY;;AASrB;AACF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACER,EAAAA,WAAW,EAAEJ,SAAS,CAACa,OAAV,CACXb,SAAS,CAACc,KAAV,CAAgB;AACdC,IAAAA,QAAQ,EAAEf,SAAS,CAACgB,MADN;AAEdC,IAAAA,QAAQ,EAAEjB,SAAS,CAACgB,MAFN;AAGdV,IAAAA,IAAI,EAAEN,SAAS,CAACgB,MAHF;AAIdX,IAAAA,OAAO,EAAEL,SAAS,CAACY,KAAV,CAAgB,CAAC,IAAD,EAAO,IAAP,EAAa,IAAb,EAAmB,IAAnB,CAAhB;AAJK,GAAhB,CADW,CAlBQ;;AA0BrB;AACF;AACA;AACEN,EAAAA,IAAI,EAAEN,SAAS,CAACgB;AA7BK,CAAvB;AAgCA,eAAed,UAAf","sourcesContent":["import React from \"react\";\nimport PropTypes from \"prop-types\";\nimport useStyles from \"./styles\";\n\nconst SimpleGrid = ({ children, breakpoints, spacing = \"sm\", cols, ...others }) => {\n  const classes = useStyles({ breakpoints, cols, spacing })();\n  return (\n    <div className={classes.container} {...others}>\n      {children}\n    </div>\n  );\n};\n\nSimpleGrid.propTypes = {\n  /**\n   * -\n   */\n  children: PropTypes.node,\n  /**\n   * Spacing with pre-defined values according the values defined in the theme\n   */\n  spacing: PropTypes.oneOf([\"sm\", \"md\", \"lg\", \"xl\"]),\n  /**\n   * Provide an array to define responsive behavior:\n   *\n   *    maxWidth or minWidth: max-width or min-width at which media query will work\n   *\n   *    cols: number of columns per row at given max-width\n   *\n   *    spacing: optional spacing at given max-width, if not provided spacing from component prop will be used instead\n   */\n  breakpoints: PropTypes.arrayOf(\n    PropTypes.shape({\n      maxWidth: PropTypes.number,\n      minWidth: PropTypes.number,\n      cols: PropTypes.number,\n      spacing: PropTypes.oneOf([\"sm\", \"md\", \"lg\", \"xl\"]),\n    })\n  ),\n  /**\n   * Number of how many columns the content will be displayed\n   */\n  cols: PropTypes.number,\n};\n\nexport default SimpleGrid;\n"],"file":"SimpleGrid.js"}

package/dist/modern/SimpleGrid/index.d.ts

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

package/dist/modern/SimpleGrid/index.js

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

package/dist/modern/SimpleGrid/index.js.map

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

package/dist/modern/SimpleGrid/styles.js

@@ -0,0 +1,68 @@
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+
+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 { makeStyles } from "@material-ui/core";
+
+function size(props) {
+  if (typeof props.size === "number") {
+    return props.size;
+  }
+
+  return props.sizes[props.size] || props.size || props.sizes.md;
+}
+
+function getSortedBreakpoints(theme, breakpoints) {
+  if (breakpoints.length === 0) {
+    return breakpoints;
+  }
+
+  const property = "maxWidth" in breakpoints[0] ? "maxWidth" : "minWidth";
+  const sorted = [...breakpoints].sort((a, b) => size({
+    size: b[property],
+    sizes: theme.breakpoints
+  }) - size({
+    size: a[property],
+    sizes: theme.breakpoints
+  }));
+  return property === "minWidth" ? sorted.reverse() : sorted;
+}
+
+const styles = props => makeStyles(theme => {
+  const {
+    breakpoints,
+    spacing,
+    cols
+  } = props;
+  let gridBreakpoints = null;
+
+  if (breakpoints) {
+    gridBreakpoints = getSortedBreakpoints(theme, breakpoints).reduce((acc, breakpoint) => {
+      const property = "maxWidth" in breakpoint ? "max-width" : "min-width";
+      const breakpointSize = size({
+        size: property === "max-width" ? breakpoint.maxWidth : breakpoint.minWidth,
+        sizes: theme.breakpoints
+      });
+      acc[`@media (${property}: ${breakpointSize + (property === "max-width" ? 0 : 1)}px)`] = {
+        gridTemplateColumns: `repeat(${breakpoint.cols}, minmax(0, 1fr))`,
+        gap: theme.hv.spacing[spacing]
+      };
+      return acc;
+    }, {});
+  }
+
+  return {
+    container: _objectSpread({
+      boxSizing: "border-box",
+      display: "grid",
+      gridTemplateColumns: `repeat(${cols}, minmax(0, 1fr))`,
+      gap: theme.hv.spacing[spacing]
+    }, gridBreakpoints)
+  };
+});
+
+export default styles;
+//# sourceMappingURL=styles.js.map

package/dist/modern/SimpleGrid/styles.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/SimpleGrid/styles.js"],"names":["makeStyles","size","props","sizes","md","getSortedBreakpoints","theme","breakpoints","length","property","sorted","sort","a","b","reverse","styles","spacing","cols","gridBreakpoints","reduce","acc","breakpoint","breakpointSize","maxWidth","minWidth","gridTemplateColumns","gap","hv","container","boxSizing","display"],"mappings":";;;;;;;AAAA,SAASA,UAAT,QAA2B,mBAA3B;;AAEA,SAASC,IAAT,CAAcC,KAAd,EAAqB;AACnB,MAAI,OAAOA,KAAK,CAACD,IAAb,KAAsB,QAA1B,EAAoC;AAClC,WAAOC,KAAK,CAACD,IAAb;AACD;;AAED,SAAOC,KAAK,CAACC,KAAN,CAAYD,KAAK,CAACD,IAAlB,KAA2BC,KAAK,CAACD,IAAjC,IAAyCC,KAAK,CAACC,KAAN,CAAYC,EAA5D;AACD;;AAED,SAASC,oBAAT,CAA8BC,KAA9B,EAAqCC,WAArC,EAAkD;AAChD,MAAIA,WAAW,CAACC,MAAZ,KAAuB,CAA3B,EAA8B;AAC5B,WAAOD,WAAP;AACD;;AAED,QAAME,QAAQ,GAAG,cAAcF,WAAW,CAAC,CAAD,CAAzB,GAA+B,UAA/B,GAA4C,UAA7D;AACA,QAAMG,MAAM,GAAG,CAAC,GAAGH,WAAJ,EAAiBI,IAAjB,CACb,CAACC,CAAD,EAAIC,CAAJ,KACEZ,IAAI,CAAC;AAAEA,IAAAA,IAAI,EAAEY,CAAC,CAACJ,QAAD,CAAT;AAAqBN,IAAAA,KAAK,EAAEG,KAAK,CAACC;AAAlC,GAAD,CAAJ,GACAN,IAAI,CAAC;AAAEA,IAAAA,IAAI,EAAEW,CAAC,CAACH,QAAD,CAAT;AAAqBN,IAAAA,KAAK,EAAEG,KAAK,CAACC;AAAlC,GAAD,CAHO,CAAf;AAMA,SAAOE,QAAQ,KAAK,UAAb,GAA0BC,MAAM,CAACI,OAAP,EAA1B,GAA6CJ,MAApD;AACD;;AAED,MAAMK,MAAM,GAAIb,KAAD,IACbF,UAAU,CAAEM,KAAD,IAAW;AACpB,QAAM;AAAEC,IAAAA,WAAF;AAAeS,IAAAA,OAAf;AAAwBC,IAAAA;AAAxB,MAAiCf,KAAvC;AACA,MAAIgB,eAAe,GAAG,IAAtB;;AACA,MAAIX,WAAJ,EAAiB;AACfW,IAAAA,eAAe,GAAGb,oBAAoB,CAACC,KAAD,EAAQC,WAAR,CAApB,CAAyCY,MAAzC,CAAgD,CAACC,GAAD,EAAMC,UAAN,KAAqB;AACrF,YAAMZ,QAAQ,GAAG,cAAcY,UAAd,GAA2B,WAA3B,GAAyC,WAA1D;AACA,YAAMC,cAAc,GAAGrB,IAAI,CAAC;AAC1BA,QAAAA,IAAI,EAAEQ,QAAQ,KAAK,WAAb,GAA2BY,UAAU,CAACE,QAAtC,GAAiDF,UAAU,CAACG,QADxC;AAE1BrB,QAAAA,KAAK,EAAEG,KAAK,CAACC;AAFa,OAAD,CAA3B;AAKAa,MAAAA,GAAG,CAAE,WAAUX,QAAS,KAAIa,cAAc,IAAIb,QAAQ,KAAK,WAAb,GAA2B,CAA3B,GAA+B,CAAnC,CAAsC,KAA7E,CAAH,GAAwF;AACtFgB,QAAAA,mBAAmB,EAAG,UAASJ,UAAU,CAACJ,IAAK,mBADuC;AAEtFS,QAAAA,GAAG,EAAEpB,KAAK,CAACqB,EAAN,CAASX,OAAT,CAAiBA,OAAjB;AAFiF,OAAxF;AAKA,aAAOI,GAAP;AACD,KAbiB,EAaf,EAbe,CAAlB;AAcD;;AAED,SAAO;AACLQ,IAAAA,SAAS;AACPC,MAAAA,SAAS,EAAE,YADJ;AAEPC,MAAAA,OAAO,EAAE,MAFF;AAGPL,MAAAA,mBAAmB,EAAG,UAASR,IAAK,mBAH7B;AAIPS,MAAAA,GAAG,EAAEpB,KAAK,CAACqB,EAAN,CAASX,OAAT,CAAiBA,OAAjB;AAJE,OAKJE,eALI;AADJ,GAAP;AASD,CA7BS,CADZ;;AAgCA,eAAeH,MAAf","sourcesContent":["import { makeStyles } from \"@material-ui/core\";\n\nfunction size(props) {\n  if (typeof props.size === \"number\") {\n    return props.size;\n  }\n\n  return props.sizes[props.size] || props.size || props.sizes.md;\n}\n\nfunction getSortedBreakpoints(theme, breakpoints) {\n  if (breakpoints.length === 0) {\n    return breakpoints;\n  }\n\n  const property = \"maxWidth\" in breakpoints[0] ? \"maxWidth\" : \"minWidth\";\n  const sorted = [...breakpoints].sort(\n    (a, b) =>\n      size({ size: b[property], sizes: theme.breakpoints }) -\n      size({ size: a[property], sizes: theme.breakpoints })\n  );\n\n  return property === \"minWidth\" ? sorted.reverse() : sorted;\n}\n\nconst styles = (props) =>\n  makeStyles((theme) => {\n    const { breakpoints, spacing, cols } = props;\n    let gridBreakpoints = null;\n    if (breakpoints) {\n      gridBreakpoints = getSortedBreakpoints(theme, breakpoints).reduce((acc, breakpoint) => {\n        const property = \"maxWidth\" in breakpoint ? \"max-width\" : \"min-width\";\n        const breakpointSize = size({\n          size: property === \"max-width\" ? breakpoint.maxWidth : breakpoint.minWidth,\n          sizes: theme.breakpoints,\n        });\n\n        acc[`@media (${property}: ${breakpointSize + (property === \"max-width\" ? 0 : 1)}px)`] = {\n          gridTemplateColumns: `repeat(${breakpoint.cols}, minmax(0, 1fr))`,\n          gap: theme.hv.spacing[spacing],\n        };\n\n        return acc;\n      }, {});\n    }\n\n    return {\n      container: {\n        boxSizing: \"border-box\",\n        display: \"grid\",\n        gridTemplateColumns: `repeat(${cols}, minmax(0, 1fr))`,\n        gap: theme.hv.spacing[spacing],\n        ...gridBreakpoints,\n      },\n    };\n  });\n\nexport default styles;\n"],"file":"styles.js"}

package/dist/modern/Stack/Stack.d.ts

@@ -0,0 +1,46 @@
+import { StandardProps, DividerProps } from "@material-ui/core";
+import React from "react";
+import { HvThemeSpacing } from "../theme";
+
+export type HvStackClassKey = "root";
+
+export type StackDirection = {
+  xs: string;
+  sm: string;
+  md: string;
+  lg: string;
+  xl: string;
+};
+
+export interface HvStackProps
+  extends StandardProps<React.HTMLAttributes<HTMLDivElement>, HvStackClassKey> {
+  /**
+   * Children of the stack component.
+   */
+  children: React.ReactNode;
+  /**
+   * The direction of the stack.
+   * Can be either a string or an object that states the direction for each breakpoint.
+   */
+  direction?: string | StackDirection;
+  /**
+   * Indicates that the form element is disabled.
+   */
+  spacing?: HvThemeSpacing;
+  /**
+   * The divider component to be used between the stack elements.
+   * - If `true` the Material-UI Divider component will be used.
+   * - If a React node is passed then the custom divider will be used.
+   */
+  divider?: boolean | React.ReactNode;
+  /**
+   * The properties to pass on to the Material-UI component.
+   */
+  dividerProps: DividerProps;
+  /**
+   * Sets whether or not there should be arrow navigation between the stack elements
+   */
+  withNavigation: boolean;
+}
+
+export default function HvStack(props: HvStackProps): JSX.Element | null;

package/dist/modern/Stack/Stack.js

@@ -0,0 +1,145 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+const _excluded = ["classes", "children", "direction", "spacing", "divider", "withNavigation", "dividerProps"];
+import "core-js/modules/web.dom-collections.iterator.js";
+import React, { useMemo, useCallback, useRef } from "react";
+import PropTypes from "prop-types";
+import clsx from "clsx";
+import { withStyles, Divider, useTheme } from "@material-ui/core";
+import isString from "lodash/isString";
+import isBoolean from "lodash/isBoolean";
+import styles from "./styles";
+import useWidth from "../utils/useWidth";
+import Focus from "../Focus";
+/**
+ * @returns {string} - Returns a direction for the stack: column or row. If the
+ *                     `direction` property is a string and a valid direction then we
+ *                     use it. If it's an object with multiple directions by breakpoint
+ *                     we use the appropriate one or search for the nearest breakpoint
+ *                     smaller than the current one to use.
+ */
+
+const getDirection = (direction, width, breakpoints) => {
+  if (isString(direction)) return direction;
+
+  for (let i = breakpoints.indexOf(width); i >= 0; i -= 1) {
+    if (direction[breakpoints[i]] !== undefined) {
+      return direction[breakpoints[i]];
+    }
+  }
+
+  return "column";
+};
+/**
+ * A Stack component allows the organization of its children in a vertical or horizontal layout.
+ *
+ * It also allows the specification of the spacing between the stack elements and the adition of a divider between the elements.
+ */
+
+
+const HvStack = props => {
+  const {
+    classes,
+    children,
+    direction = "column",
+    spacing = "sm",
+    divider = false,
+    withNavigation = false,
+    dividerProps = {}
+  } = props,
+        others = _objectWithoutProperties(props, _excluded);
+
+  const width = useWidth();
+  const theme = useTheme();
+  const containerRef = useRef(null);
+  const breakpoints = useMemo(() => [...theme.breakpoints.keys], [theme]);
+  const processedDirection = useMemo(() => getDirection(direction, width, breakpoints), [direction, width, breakpoints]);
+  /**
+   * @returns {node} - The divider component to use. If the property `divider` is
+   *                   set to `true` then the Material-UI divider is used, otherwise
+   *                   we use the custom divider the user passed.
+   */
+
+  const getDividerComponent = useCallback(() => {
+    if (isBoolean(divider) && divider) {
+      return /*#__PURE__*/React.createElement(Divider, _extends({
+        orientation: processedDirection === "column" ? "horizontal" : "vertical",
+        flexItem: processedDirection === "row",
+        role: "separator"
+      }, dividerProps));
+    }
+
+    return divider;
+  }, [divider, dividerProps, processedDirection]);
+  return /*#__PURE__*/React.createElement("div", _extends({
+    ref: containerRef,
+    className: clsx(classes.root, classes[processedDirection], classes[spacing])
+  }, others), React.Children.map(children, (child, i) => {
+    return /*#__PURE__*/React.createElement(React.Fragment, null, divider && i !== 0 && getDividerComponent(divider, processedDirection), withNavigation ? /*#__PURE__*/React.createElement(Focus, {
+      rootRef: containerRef,
+      focusDisabled: false,
+      strategy: "grid",
+      navigationJump: processedDirection === "column" ? 1 : children.length,
+      filterClass: "child"
+    }, /*#__PURE__*/React.createElement("div", {
+      className: "child"
+    }, child)) : child);
+  }));
+};
+
+process.env.NODE_ENV !== "production" ? HvStack.propTypes = {
+  /**
+   * A Jss Object used to override or extend the styles applied to the radio button.
+   */
+  classes: PropTypes.shape({
+    /**
+     * Styles applied to the component.
+     */
+    root: PropTypes.string
+  }).isRequired,
+
+  /**
+   * Children of the stack component.
+   */
+  children: PropTypes.node,
+
+  /**
+   * The direction of the stack.
+   * Can be either a string or an object that states the direction for each breakpoint.
+   */
+  direction: PropTypes.oneOfType([PropTypes.oneOf(["column", "row"]), PropTypes.shape({
+    xs: PropTypes.string,
+    sm: PropTypes.string,
+    md: PropTypes.string,
+    lg: PropTypes.string,
+    xl: PropTypes.string
+  })]),
+
+  /**
+   * The spacing between elements of the stack.
+   */
+  spacing: PropTypes.oneOf(["xs", "sm", "md", "lg", "xl"]),
+
+  /**
+   * The divider component to be used between the stack elements.
+   *
+   * - If `true` the Material-UI Divider component will be used.
+   *
+   * - If a React node is passed then the custom divider will be used.
+   */
+  divider: PropTypes.oneOfType([PropTypes.bool, PropTypes.node]),
+
+  /**
+   * The properties to pass on to the Material-UI component.
+   */
+  dividerProps: PropTypes.object,
+
+  /**
+   * Sets whether or not there should be arrow navigation between the stack elements
+   */
+  withNavigation: PropTypes.bool
+} : void 0;
+export default withStyles(styles, {
+  name: "HvStack"
+})(HvStack);
+//# sourceMappingURL=Stack.js.map

package/dist/modern/Stack/Stack.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/Stack/Stack.js"],"names":["React","useMemo","useCallback","useRef","PropTypes","clsx","withStyles","Divider","useTheme","isString","isBoolean","styles","useWidth","Focus","getDirection","direction","width","breakpoints","i","indexOf","undefined","HvStack","props","classes","children","spacing","divider","withNavigation","dividerProps","others","theme","containerRef","keys","processedDirection","getDividerComponent","root","Children","map","child","length","propTypes","shape","string","isRequired","node","oneOfType","oneOf","xs","sm","md","lg","xl","bool","object","name"],"mappings":"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","sourcesContent":["import React, { useMemo, useCallback, useRef } from \"react\";\nimport PropTypes from \"prop-types\";\nimport clsx from \"clsx\";\nimport { withStyles, Divider, useTheme } from \"@material-ui/core\";\nimport isString from \"lodash/isString\";\nimport isBoolean from \"lodash/isBoolean\";\nimport styles from \"./styles\";\nimport useWidth from \"../utils/useWidth\";\nimport Focus from \"../Focus\";\n\n/**\n * @returns {string} - Returns a direction for the stack: column or row. If the\n *                     `direction` property is a string and a valid direction then we\n *                     use it. If it's an object with multiple directions by breakpoint\n *                     we use the appropriate one or search for the nearest breakpoint\n *                     smaller than the current one to use.\n */\nconst getDirection = (direction, width, breakpoints) => {\n  if (isString(direction)) return direction;\n\n  for (let i = breakpoints.indexOf(width); i >= 0; i -= 1) {\n    if (direction[breakpoints[i]] !== undefined) {\n      return direction[breakpoints[i]];\n    }\n  }\n  return \"column\";\n};\n\n/**\n * A Stack component allows the organization of its children in a vertical or horizontal layout.\n *\n * It also allows the specification of the spacing between the stack elements and the adition of a divider between the elements.\n */\nconst HvStack = (props) => {\n  const {\n    classes,\n    children,\n    direction = \"column\",\n    spacing = \"sm\",\n    divider = false,\n    withNavigation = false,\n    dividerProps = {},\n    ...others\n  } = props;\n  const width = useWidth();\n  const theme = useTheme();\n  const containerRef = useRef(null);\n\n  const breakpoints = useMemo(() => [...theme.breakpoints.keys], [theme]);\n\n  const processedDirection = useMemo(\n    () => getDirection(direction, width, breakpoints),\n    [direction, width, breakpoints]\n  );\n\n  /**\n   * @returns {node} - The divider component to use. If the property `divider` is\n   *                   set to `true` then the Material-UI divider is used, otherwise\n   *                   we use the custom divider the user passed.\n   */\n  const getDividerComponent = useCallback(() => {\n    if (isBoolean(divider) && divider) {\n      return (\n        <Divider\n          orientation={processedDirection === \"column\" ? \"horizontal\" : \"vertical\"}\n          flexItem={processedDirection === \"row\"}\n          role=\"separator\"\n          {...dividerProps}\n        />\n      );\n    }\n    return divider;\n  }, [divider, dividerProps, processedDirection]);\n\n  return (\n    <div\n      ref={containerRef}\n      className={clsx(classes.root, classes[processedDirection], classes[spacing])}\n      {...others}\n    >\n      {React.Children.map(children, (child, i) => {\n        return (\n          <>\n            {divider && i !== 0 && getDividerComponent(divider, processedDirection)}\n            {withNavigation ? (\n              <Focus\n                rootRef={containerRef}\n                focusDisabled={false}\n                strategy=\"grid\"\n                navigationJump={processedDirection === \"column\" ? 1 : children.length}\n                filterClass=\"child\"\n              >\n                <div className=\"child\">{child}</div>\n              </Focus>\n            ) : (\n              child\n            )}\n          </>\n        );\n      })}\n    </div>\n  );\n};\n\nHvStack.propTypes = {\n  /**\n   * A Jss Object used to override or extend the styles applied to the radio button.\n   */\n  classes: PropTypes.shape({\n    /**\n     * Styles applied to the component.\n     */\n    root: PropTypes.string,\n  }).isRequired,\n  /**\n   * Children of the stack component.\n   */\n  children: PropTypes.node,\n  /**\n   * The direction of the stack.\n   * Can be either a string or an object that states the direction for each breakpoint.\n   */\n  direction: PropTypes.oneOfType([\n    PropTypes.oneOf([\"column\", \"row\"]),\n    PropTypes.shape({\n      xs: PropTypes.string,\n      sm: PropTypes.string,\n      md: PropTypes.string,\n      lg: PropTypes.string,\n      xl: PropTypes.string,\n    }),\n  ]),\n  /**\n   * The spacing between elements of the stack.\n   */\n  spacing: PropTypes.oneOf([\"xs\", \"sm\", \"md\", \"lg\", \"xl\"]),\n  /**\n   * The divider component to be used between the stack elements.\n   *\n   * - If `true` the Material-UI Divider component will be used.\n   *\n   * - If a React node is passed then the custom divider will be used.\n   */\n  divider: PropTypes.oneOfType([PropTypes.bool, PropTypes.node]),\n  /**\n   * The properties to pass on to the Material-UI component.\n   */\n  dividerProps: PropTypes.object,\n  /**\n   * Sets whether or not there should be arrow navigation between the stack elements\n   */\n  withNavigation: PropTypes.bool,\n};\n\nexport default withStyles(styles, { name: \"HvStack\" })(HvStack);\n"],"file":"Stack.js"}

package/dist/modern/Stack/index.d.ts

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

package/dist/modern/Stack/index.js

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

package/dist/modern/Stack/index.js.map

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

package/dist/modern/Stack/styles.js

@@ -0,0 +1,29 @@
+const styles = theme => ({
+  root: {
+    display: "flex"
+  },
+  column: {
+    flexDirection: "column"
+  },
+  row: {
+    flexDirection: "row"
+  },
+  xs: {
+    gap: theme.hvSpacing("xs")
+  },
+  sm: {
+    gap: theme.hvSpacing("sm")
+  },
+  md: {
+    gap: theme.hvSpacing("md")
+  },
+  lg: {
+    gap: theme.hvSpacing("lg")
+  },
+  xl: {
+    gap: theme.hvSpacing("xl")
+  }
+});
+
+export default styles;
+//# sourceMappingURL=styles.js.map

package/dist/modern/Stack/styles.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/Stack/styles.js"],"names":["styles","theme","root","display","column","flexDirection","row","xs","gap","hvSpacing","sm","md","lg","xl"],"mappings":"AAAA,MAAMA,MAAM,GAAIC,KAAD,KAAY;AACzBC,EAAAA,IAAI,EAAE;AACJC,IAAAA,OAAO,EAAE;AADL,GADmB;AAIzBC,EAAAA,MAAM,EAAE;AACNC,IAAAA,aAAa,EAAE;AADT,GAJiB;AAOzBC,EAAAA,GAAG,EAAE;AACHD,IAAAA,aAAa,EAAE;AADZ,GAPoB;AAUzBE,EAAAA,EAAE,EAAE;AACFC,IAAAA,GAAG,EAAEP,KAAK,CAACQ,SAAN,CAAgB,IAAhB;AADH,GAVqB;AAazBC,EAAAA,EAAE,EAAE;AACFF,IAAAA,GAAG,EAAEP,KAAK,CAACQ,SAAN,CAAgB,IAAhB;AADH,GAbqB;AAgBzBE,EAAAA,EAAE,EAAE;AACFH,IAAAA,GAAG,EAAEP,KAAK,CAACQ,SAAN,CAAgB,IAAhB;AADH,GAhBqB;AAmBzBG,EAAAA,EAAE,EAAE;AACFJ,IAAAA,GAAG,EAAEP,KAAK,CAACQ,SAAN,CAAgB,IAAhB;AADH,GAnBqB;AAsBzBI,EAAAA,EAAE,EAAE;AACFL,IAAAA,GAAG,EAAEP,KAAK,CAACQ,SAAN,CAAgB,IAAhB;AADH;AAtBqB,CAAZ,CAAf;;AA2BA,eAAeT,MAAf","sourcesContent":["const styles = (theme) => ({\n  root: {\n    display: \"flex\",\n  },\n  column: {\n    flexDirection: \"column\",\n  },\n  row: {\n    flexDirection: \"row\",\n  },\n  xs: {\n    gap: theme.hvSpacing(\"xs\"),\n  },\n  sm: {\n    gap: theme.hvSpacing(\"sm\"),\n  },\n  md: {\n    gap: theme.hvSpacing(\"md\"),\n  },\n  lg: {\n    gap: theme.hvSpacing(\"lg\"),\n  },\n  xl: {\n    gap: theme.hvSpacing(\"xl\"),\n  },\n});\n\nexport default styles;\n"],"file":"styles.js"}

package/dist/modern/Table/Table.js

@@ -8,6 +8,7 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
 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 "core-js/modules/es.array.includes.js";
 import clsx from "clsx";
 import isNil from "lodash/isNil";
 import PropTypes from "prop-types";