@hitachivantara/uikit-react-lab 3.52.2 → 3.54.0

package/dist/StepNavigation/SimpleNavigation/SimpleNavigation.d.ts

@@ -0,0 +1,58 @@
+import * as React from "react";
+import { StandardProps } from "@material-ui/core";
+
+import { HvStepNavigationProps } from "../StepNavigation";
+import { HvDotProps } from "./Dot";
+
+export type HvSimpleNavigationClassKey = "root";
+
+export type ComponentChildProps = {
+  stepsWidth: number;
+  navWidth: number;
+  separatorValues: {
+    minWidth: number;
+    maxWidth: number;
+    getColor: (state: HvDotProps["state"]) => any;
+    height: number;
+  };
+  stepValues: {
+    minSize: number;
+    maxSize: number;
+    StepComponent: React.ComponentType<HvDotProps>;
+  };
+};
+
+export type HvSimpleNavigationProps = StandardProps<
+  React.HTMLAttributes<HTMLDivElement>,
+  HvSimpleNavigationClassKey
+> &
+  Pick<HvStepNavigationProps, "stepSize"> & {
+    /**
+     * Number of steps to show on the component.
+     */
+    numSteps: number;
+    /**
+     * Returns a JSX.element of the titles container.
+     */
+    getTitles: (
+      getTitleProps?: (params: {
+        state: HvDotProps["state"];
+        rawTitle: string;
+        number: number;
+      }) => { variant: string; title: string }
+    ) => JSX.Element | null;
+    /**
+     * Returns dynamic width values of the component (width, titleWidth, separatorWidth).
+     */
+    getDynamicValues: (stepsWidth: number) => {
+      width: number;
+      titleWidth: number;
+      separatorWidth: number;
+    };
+    /**
+     * Component to render Step Navigation with props = {separatorValues, stepValues, stepsWidth}
+     */
+    children: React.FunctionComponent<ComponentChildProps>;
+  };
+
+export default function HvSimpleNavigation(props: HvSimpleNavigationProps): JSX.Element | null;

package/dist/StepNavigation/SimpleNavigation/SimpleNavigation.js

@@ -0,0 +1,133 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+require("core-js/modules/es.array.includes.js");
+
+require("core-js/modules/es.array.concat.js");
+
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _core = require("@material-ui/core");
+
+var _Dot = _interopRequireDefault(require("./Dot"));
+
+var _utils = require("./utils");
+
+var _styles = _interopRequireDefault(require("./styles"));
+
+var _excluded = ["numSteps", "stepSize", "getTitles", "getDynamicValues", "children"];
+
+/**
+ * Simple Navigation
+ */
+var HvSimpleNavigation = function HvSimpleNavigation(_ref) {
+  var numSteps = _ref.numSteps,
+      stepSize = _ref.stepSize,
+      getTitles = _ref.getTitles,
+      getDynamicValues = _ref.getDynamicValues,
+      children = _ref.children,
+      other = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+  var theme = (0, _core.useTheme)(); // step values
+
+  var dotSize = _utils.dotSizes[stepSize];
+  var StepComponent = _Dot.default; //
+
+  var stepsWidth = (numSteps + 0.5) * dotSize;
+
+  var _getDynamicValues = getDynamicValues(stepsWidth),
+      width = _getDynamicValues.width,
+      titleWidth = _getDynamicValues.titleWidth,
+      separatorWidth = _getDynamicValues.separatorWidth; // separator values
+
+
+  var getColor = function getColor(state) {
+    return ["Current", "Disabled"].includes(state) ? (0, _utils.disabledColor)(theme) : (0, _utils.defaultColor)(theme);
+  };
+
+  var maxWidth = Math.max(titleWidth - dotSize, separatorWidth);
+  var minWidth = Math.max(titleWidth - dotSize * 1.25, separatorWidth); //
+
+  var Steps = children;
+  var titles = getTitles(function (_ref2) {
+    var rawTitle = _ref2.rawTitle,
+        number = _ref2.number;
+    return {
+      title: "".concat(number, ". ").concat(rawTitle),
+      titleWidth: titleWidth
+    };
+  });
+  return /*#__PURE__*/_react.default.createElement("div", other, titles, /*#__PURE__*/_react.default.createElement(Steps, {
+    stepsWidth: stepsWidth,
+    navWidth: width,
+    separatorValues: {
+      minWidth: minWidth,
+      maxWidth: maxWidth,
+      getColor: getColor,
+      height: 2
+    },
+    stepValues: {
+      minSize: dotSize,
+      maxSize: 1.5 * dotSize,
+      StepComponent: StepComponent
+    }
+  }));
+};
+
+process.env.NODE_ENV !== "production" ? HvSimpleNavigation.propTypes = {
+  /**
+   * Class names to be applied.
+   */
+  className: _propTypes.default.string,
+
+  /**
+   * A Jss Object used to override or extend the styles applied.
+   */
+  classes: _propTypes.default.shape({
+    /**
+     * Styles applied to the component root class.
+     */
+    root: _propTypes.default.string
+  }).isRequired,
+
+  /**
+   * Number of steps to show on the component.
+   */
+  numSteps: _propTypes.default.number.isRequired,
+
+  /**
+   * Sets one of the standard sizes of the steps
+   */
+  stepSize: _propTypes.default.oneOf(["XS", "SM", "MD", "LG", "XL"]).isRequired,
+
+  /**
+   * Returns dynamic width values of the component (width, titleWidth, separatorWidth).
+   */
+  getDynamicValues: _propTypes.default.func.isRequired,
+
+  /**
+   * Returns a JSX.element of the titles container.
+   */
+  getTitles: _propTypes.default.func.isRequired,
+
+  /**
+   * Component to render Step Navigation with props = {separatorValues, stepValues, stepsWidth}
+   */
+  children: _propTypes.default.elementType.isRequired
+} : void 0;
+
+var _default = (0, _core.withStyles)(_styles.default, {
+  name: "HvSimpleNavigation"
+})(HvSimpleNavigation);
+
+exports.default = _default;
+//# sourceMappingURL=SimpleNavigation.js.map

package/dist/StepNavigation/SimpleNavigation/SimpleNavigation.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SimpleNavigation.js","names":["HvSimpleNavigation","numSteps","stepSize","getTitles","getDynamicValues","children","other","theme","useTheme","dotSize","dotSizes","StepComponent","HvDot","stepsWidth","width","titleWidth","separatorWidth","getColor","state","includes","disabledColor","defaultColor","maxWidth","Math","max","minWidth","Steps","titles","rawTitle","number","title","navWidth","separatorValues","height","stepValues","minSize","maxSize","propTypes","className","PropTypes","string","classes","shape","root","isRequired","oneOf","func","elementType","withStyles","styles","name"],"sources":["../../../src/StepNavigation/SimpleNavigation/SimpleNavigation.js"],"sourcesContent":["import React from \"react\";\nimport PropTypes from \"prop-types\";\n\nimport { useTheme, withStyles } from \"@material-ui/core\";\n\nimport HvDot from \"./Dot\";\nimport { defaultColor, disabledColor, dotSizes } from \"./utils\";\nimport styles from \"./styles\";\n\n/**\n * Simple Navigation\n */\nconst HvSimpleNavigation = ({\n  numSteps,\n  stepSize,\n  getTitles,\n  getDynamicValues,\n  children,\n  ...other\n}) => {\n  const theme = useTheme();\n\n  // step values\n  const dotSize = dotSizes[stepSize];\n  const StepComponent = HvDot;\n  //\n\n  const stepsWidth = (numSteps + 0.5) * dotSize;\n  const { width, titleWidth, separatorWidth } = getDynamicValues(stepsWidth);\n\n  // separator values\n  const getColor = (state) =>\n    [\"Current\", \"Disabled\"].includes(state) ? disabledColor(theme) : defaultColor(theme);\n  const maxWidth = Math.max(titleWidth - dotSize, separatorWidth);\n  const minWidth = Math.max(titleWidth - dotSize * 1.25, separatorWidth);\n  //\n\n  const Steps = children;\n\n  const titles = getTitles(({ rawTitle, number }) => ({\n    title: `${number}. ${rawTitle}`,\n    titleWidth,\n  }));\n\n  return (\n    <div {...other}>\n      {titles}\n      <Steps\n        {...{\n          stepsWidth,\n          navWidth: width,\n          separatorValues: {\n            minWidth,\n            maxWidth,\n            getColor,\n            height: 2,\n          },\n          stepValues: {\n            minSize: dotSize,\n            maxSize: 1.5 * dotSize,\n            StepComponent,\n          },\n        }}\n      />\n    </div>\n  );\n};\n\nHvSimpleNavigation.propTypes = {\n  /**\n   * Class names to be applied.\n   */\n  className: PropTypes.string,\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   * Number of steps to show on the component.\n   */\n  numSteps: PropTypes.number.isRequired,\n  /**\n   * Sets one of the standard sizes of the steps\n   */\n  stepSize: PropTypes.oneOf([\"XS\", \"SM\", \"MD\", \"LG\", \"XL\"]).isRequired,\n  /**\n   * Returns dynamic width values of the component (width, titleWidth, separatorWidth).\n   */\n  getDynamicValues: PropTypes.func.isRequired,\n  /**\n   * Returns a JSX.element of the titles container.\n   */\n  getTitles: PropTypes.func.isRequired,\n  /**\n   * Component to render Step Navigation with props = {separatorValues, stepValues, stepsWidth}\n   */\n  children: PropTypes.elementType.isRequired,\n};\n\nexport default withStyles(styles, { name: \"HvSimpleNavigation\" })(HvSimpleNavigation);\n"],"mappings":";;;;;;;;;;;;;;;AAAA;;AACA;;AAEA;;AAEA;;AACA;;AACA;;;;AAEA;AACA;AACA;AACA,IAAMA,kBAAkB,GAAG,SAArBA,kBAAqB,OAOrB;EAAA,IANJC,QAMI,QANJA,QAMI;EAAA,IALJC,QAKI,QALJA,QAKI;EAAA,IAJJC,SAII,QAJJA,SAII;EAAA,IAHJC,gBAGI,QAHJA,gBAGI;EAAA,IAFJC,QAEI,QAFJA,QAEI;EAAA,IADDC,KACC;EACJ,IAAMC,KAAK,GAAG,IAAAC,cAAA,GAAd,CADI,CAGJ;;EACA,IAAMC,OAAO,GAAGC,eAAA,CAASR,QAAT,CAAhB;EACA,IAAMS,aAAa,GAAGC,YAAtB,CALI,CAMJ;;EAEA,IAAMC,UAAU,GAAG,CAACZ,QAAQ,GAAG,GAAZ,IAAmBQ,OAAtC;;EACA,wBAA8CL,gBAAgB,CAACS,UAAD,CAA9D;EAAA,IAAQC,KAAR,qBAAQA,KAAR;EAAA,IAAeC,UAAf,qBAAeA,UAAf;EAAA,IAA2BC,cAA3B,qBAA2BA,cAA3B,CATI,CAWJ;;;EACA,IAAMC,QAAQ,GAAG,SAAXA,QAAW,CAACC,KAAD;IAAA,OACf,CAAC,SAAD,EAAY,UAAZ,EAAwBC,QAAxB,CAAiCD,KAAjC,IAA0C,IAAAE,oBAAA,EAAcb,KAAd,CAA1C,GAAiE,IAAAc,mBAAA,EAAad,KAAb,CADlD;EAAA,CAAjB;;EAEA,IAAMe,QAAQ,GAAGC,IAAI,CAACC,GAAL,CAAST,UAAU,GAAGN,OAAtB,EAA+BO,cAA/B,CAAjB;EACA,IAAMS,QAAQ,GAAGF,IAAI,CAACC,GAAL,CAAST,UAAU,GAAGN,OAAO,GAAG,IAAhC,EAAsCO,cAAtC,CAAjB,CAfI,CAgBJ;;EAEA,IAAMU,KAAK,GAAGrB,QAAd;EAEA,IAAMsB,MAAM,GAAGxB,SAAS,CAAC;IAAA,IAAGyB,QAAH,SAAGA,QAAH;IAAA,IAAaC,MAAb,SAAaA,MAAb;IAAA,OAA2B;MAClDC,KAAK,YAAKD,MAAL,eAAgBD,QAAhB,CAD6C;MAElDb,UAAU,EAAVA;IAFkD,CAA3B;EAAA,CAAD,CAAxB;EAKA,oBACE,oCAAST,KAAT,EACGqB,MADH,eAEE,6BAAC,KAAD;IAEId,UAAU,EAAVA,UAFJ;IAGIkB,QAAQ,EAAEjB,KAHd;IAIIkB,eAAe,EAAE;MACfP,QAAQ,EAARA,QADe;MAEfH,QAAQ,EAARA,QAFe;MAGfL,QAAQ,EAARA,QAHe;MAIfgB,MAAM,EAAE;IAJO,CAJrB;IAUIC,UAAU,EAAE;MACVC,OAAO,EAAE1B,OADC;MAEV2B,OAAO,EAAE,MAAM3B,OAFL;MAGVE,aAAa,EAAbA;IAHU;EAVhB,EAFF,CADF;AAsBD,CAtDD;;AAwDA,wCAAAX,kBAAkB,CAACqC,SAAnB,GAA+B;EAC7B;AACF;AACA;EACEC,SAAS,EAAEC,kBAAA,CAAUC,MAJQ;;EAK7B;AACF;AACA;EACEC,OAAO,EAAEF,kBAAA,CAAUG,KAAV,CAAgB;IACvB;AACJ;AACA;IACIC,IAAI,EAAEJ,kBAAA,CAAUC;EAJO,CAAhB,EAKNI,UAb0B;;EAc7B;AACF;AACA;EACE3C,QAAQ,EAAEsC,kBAAA,CAAUV,MAAV,CAAiBe,UAjBE;;EAkB7B;AACF;AACA;EACE1C,QAAQ,EAAEqC,kBAAA,CAAUM,KAAV,CAAgB,CAAC,IAAD,EAAO,IAAP,EAAa,IAAb,EAAmB,IAAnB,EAAyB,IAAzB,CAAhB,EAAgDD,UArB7B;;EAsB7B;AACF;AACA;EACExC,gBAAgB,EAAEmC,kBAAA,CAAUO,IAAV,CAAeF,UAzBJ;;EA0B7B;AACF;AACA;EACEzC,SAAS,EAAEoC,kBAAA,CAAUO,IAAV,CAAeF,UA7BG;;EA8B7B;AACF;AACA;EACEvC,QAAQ,EAAEkC,kBAAA,CAAUQ,WAAV,CAAsBH;AAjCH,CAA/B;;eAoCe,IAAAI,gBAAA,EAAWC,eAAX,EAAmB;EAAEC,IAAI,EAAE;AAAR,CAAnB,EAAmDlD,kBAAnD,C"}

package/dist/StepNavigation/SimpleNavigation/index.d.ts

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

package/dist/StepNavigation/SimpleNavigation/index.js

@@ -0,0 +1,16 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "default", {
+  enumerable: true,
+  get: function get() {
+    return _SimpleNavigation.default;
+  }
+});
+
+var _SimpleNavigation = _interopRequireDefault(require("./SimpleNavigation"));
+//# sourceMappingURL=index.js.map

package/dist/StepNavigation/SimpleNavigation/index.js.map

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

package/dist/StepNavigation/SimpleNavigation/styles.js

@@ -0,0 +1,16 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var styles = function styles() {
+  return {
+    root: {}
+  };
+};
+
+var _default = styles;
+exports.default = _default;
+//# sourceMappingURL=styles.js.map

package/dist/StepNavigation/SimpleNavigation/styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.js","names":["styles","root"],"sources":["../../../src/StepNavigation/SimpleNavigation/styles.js"],"sourcesContent":["const styles = () => ({\n  root: {},\n});\n\nexport default styles;\n"],"mappings":";;;;;;;AAAA,IAAMA,MAAM,GAAG,SAATA,MAAS;EAAA,OAAO;IACpBC,IAAI,EAAE;EADc,CAAP;AAAA,CAAf;;eAIeD,M"}

package/dist/StepNavigation/SimpleNavigation/utils.js

@@ -0,0 +1,31 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.dotSizes = exports.disabledColor = exports.defaultColor = void 0;
+var dotSizes = {
+  XS: 8,
+  SM: 10,
+  MD: 12,
+  LG: 14,
+  XL: 16
+};
+exports.dotSizes = dotSizes;
+
+var defaultColor = function defaultColor(theme) {
+  var _theme$hv, _theme$hv$palette, _theme$hv$palette$acc;
+
+  return theme === null || theme === void 0 ? void 0 : (_theme$hv = theme.hv) === null || _theme$hv === void 0 ? void 0 : (_theme$hv$palette = _theme$hv.palette) === null || _theme$hv$palette === void 0 ? void 0 : (_theme$hv$palette$acc = _theme$hv$palette.accent) === null || _theme$hv$palette$acc === void 0 ? void 0 : _theme$hv$palette$acc.acce1;
+};
+
+exports.defaultColor = defaultColor;
+
+var disabledColor = function disabledColor(theme) {
+  var _theme$hv2, _theme$hv2$palette, _theme$hv2$palette$at;
+
+  return theme === null || theme === void 0 ? void 0 : (_theme$hv2 = theme.hv) === null || _theme$hv2 === void 0 ? void 0 : (_theme$hv2$palette = _theme$hv2.palette) === null || _theme$hv2$palette === void 0 ? void 0 : (_theme$hv2$palette$at = _theme$hv2$palette.atmosphere) === null || _theme$hv2$palette$at === void 0 ? void 0 : _theme$hv2$palette$at.atmo5;
+};
+
+exports.disabledColor = disabledColor;
+//# sourceMappingURL=utils.js.map

package/dist/StepNavigation/SimpleNavigation/utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.js","names":["dotSizes","XS","SM","MD","LG","XL","defaultColor","theme","hv","palette","accent","acce1","disabledColor","atmosphere","atmo5"],"sources":["../../../src/StepNavigation/SimpleNavigation/utils.js"],"sourcesContent":["const dotSizes = {\n  XS: 8,\n  SM: 10,\n  MD: 12,\n  LG: 14,\n  XL: 16,\n};\n\nconst defaultColor = (theme) => theme?.hv?.palette?.accent?.acce1;\nconst disabledColor = (theme) => theme?.hv?.palette?.atmosphere?.atmo5;\n\nexport { dotSizes, defaultColor, disabledColor };\n"],"mappings":";;;;;;AAAA,IAAMA,QAAQ,GAAG;EACfC,EAAE,EAAE,CADW;EAEfC,EAAE,EAAE,EAFW;EAGfC,EAAE,EAAE,EAHW;EAIfC,EAAE,EAAE,EAJW;EAKfC,EAAE,EAAE;AALW,CAAjB;;;AAQA,IAAMC,YAAY,GAAG,SAAfA,YAAe,CAACC,KAAD;EAAA;;EAAA,OAAWA,KAAX,aAAWA,KAAX,oCAAWA,KAAK,CAAEC,EAAlB,mEAAW,UAAWC,OAAtB,+EAAW,kBAAoBC,MAA/B,0DAAW,sBAA4BC,KAAvC;AAAA,CAArB;;;;AACA,IAAMC,aAAa,GAAG,SAAhBA,aAAgB,CAACL,KAAD;EAAA;;EAAA,OAAWA,KAAX,aAAWA,KAAX,qCAAWA,KAAK,CAAEC,EAAlB,qEAAW,WAAWC,OAAtB,gFAAW,mBAAoBI,UAA/B,0DAAW,sBAAgCC,KAA3C;AAAA,CAAtB"}

package/dist/StepNavigation/StepNavigation.d.ts

@@ -0,0 +1,42 @@
+import * as React from "react";
+import { StandardProps } from "@material-ui/core";
+import { HvStepProps } from "./DefaultNavigation/Step/Step";
+
+export type HvStepNavigationClassKey = "root";
+
+export type HvStepNavigationProps = StandardProps<
+  React.HTMLAttributes<HTMLDivElement>,
+  HvStepNavigationClassKey
+> & {
+  /**
+   * Type of step navigation. Values = {"Simple", "Default"}
+   */
+  type: "Simple" | "Default";
+  /**
+   * Steps to show on the component.
+   */
+  steps: Array<Pick<HvStepProps, "state" | "title" | "onClick" | "className">> & {
+    /**
+     * Class names to override styles on the separator component after the step.
+     */
+    separatorClassName: string;
+    /**
+     * Class names to override styles on the title component above the step.
+     */
+    titleClassName: string;
+  };
+  /**
+   * Sets one of the standard sizes of the steps
+   */
+  stepSize?: "XS" | "SM" | "MD" | "LG" | "XL";
+  /**
+   * Width of the component element.
+   */
+  width?: number;
+  /**
+   * Defines either show a title or only a tooltip on each step component
+   */
+  showTitles?: boolean;
+};
+
+export default function HvStepNavigation(props: HvStepNavigationProps): JSX.Element | null;