@hitachivantara/uikit-react-core 3.52.5

package/dist/modern/BaseSwitch/BaseSwitch.js

@@ -0,0 +1,202 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+const _excluded = ["classes", "className", "id", "name", "value", "required", "readOnly", "disabled", "checked", "defaultChecked", "onChange", "inputProps", "onFocusVisible", "onBlur"];
+import "core-js/modules/web.dom-collections.iterator.js";
+import React, { useState, useCallback } from "react";
+import PropTypes from "prop-types";
+import clsx from "clsx";
+import { Switch, withStyles } from "@material-ui/core";
+import styles from "./styles";
+/**
+ * A Switch is <b>binary</b> and work as a digital on/off button.
+ *
+ * The Base Switch is a building block of the Switch form element. Don't use unless
+ * implementing a custom use case not covered by the Switch form element.
+ */
+
+const HvBaseSwitch = props => {
+  const {
+    classes,
+    className,
+    id,
+    name,
+    value = "on",
+    required = false,
+    readOnly = false,
+    disabled = false,
+    checked,
+    defaultChecked,
+    onChange,
+    inputProps,
+    onFocusVisible,
+    onBlur
+  } = props,
+        others = _objectWithoutProperties(props, _excluded);
+
+  const [focusVisible, setFocusVisible] = useState(false);
+  const onFocusVisibleCallback = useCallback(evt => {
+    setFocusVisible(true);
+    onFocusVisible === null || onFocusVisible === void 0 ? void 0 : onFocusVisible(evt);
+  }, [onFocusVisible]);
+  const onBlurCallback = useCallback(evt => {
+    setFocusVisible(false);
+    onBlur === null || onBlur === void 0 ? void 0 : onBlur(evt);
+  }, [onBlur]);
+  const onLocalChange = useCallback(evt => {
+    if (readOnly) {
+      return;
+    }
+
+    onChange === null || onChange === void 0 ? void 0 : onChange(evt, evt.target.checked, value);
+  }, [onChange, readOnly, value]);
+  return /*#__PURE__*/React.createElement(Switch, _extends({
+    id: id,
+    name: name,
+    className: clsx(className, classes.root, disabled && classes.disabled, focusVisible && classes.focusVisible),
+    color: "default",
+    disabled: disabled,
+    required: required,
+    readOnly: readOnly,
+    disableRipple: true,
+    onChange: onLocalChange,
+    value: value,
+    checked: checked,
+    defaultChecked: defaultChecked,
+    classes: {
+      root: classes.switch,
+      switchBase: classes.switchBase,
+      checked: classes.checked,
+      track: classes.track,
+      thumb: classes.thumb,
+      disabled: classes.disabled
+    },
+    inputProps: inputProps,
+    onFocusVisible: onFocusVisibleCallback,
+    onBlur: onBlurCallback
+  }, others));
+};
+
+HvBaseSwitch.propTypes = {
+  /**
+   * Class names to be applied.
+   */
+  className: PropTypes.string,
+
+  /**
+   * A Jss Object used to override or extend the styles applied to the switch.
+   */
+  classes: PropTypes.shape({
+    /**
+     * Styles applied to the component.
+     */
+    root: PropTypes.string,
+
+    /**
+     * Styles applied to the switch when it is disabled.
+     */
+    disabled: PropTypes.string,
+
+    /**
+     * Styles applied to the internal Switch component's root class.
+     */
+    switch: PropTypes.string,
+
+    /**
+     * Styles applied to the internal SwitchBase component's root class.
+     */
+    switchBase: PropTypes.string,
+
+    /**
+     * Pseudo-class applied to the internal SwitchBase component's checked class.
+     */
+    checked: PropTypes.string,
+
+    /**
+     * Styles applied to the track element.
+     */
+    track: PropTypes.string,
+
+    /**
+     * Styles used to create the thumb passed to the internal SwitchBase component icon prop.
+     */
+    thumb: PropTypes.string,
+
+    /**
+     * Class applied to the root element if keyboard focused.
+     */
+    focusVisible: PropTypes.string
+  }).isRequired,
+
+  /**
+   * Id to be applied to the root node.
+   */
+  id: PropTypes.string,
+
+  /**
+   * The input name.
+   */
+  name: PropTypes.string,
+
+  /**
+   * The value of the input.
+   *
+   * Is up to the application's logic when to consider the submission of this value.
+   * Generally it should be used only when the switch is neither unchecked nor indeterminate.
+   *
+   * The default value is "on".
+   */
+  // eslint-disable-next-line react/forbid-prop-types
+  value: PropTypes.any,
+
+  /**
+   * Indicates that user input is required.
+   */
+  required: PropTypes.bool,
+
+  /**
+   * Indicates that the input is not editable.
+   */
+  readOnly: PropTypes.bool,
+
+  /**
+   * Indicates that the input is disabled.
+   */
+  disabled: PropTypes.bool,
+
+  /**
+   * If `true` the switch is selected, if set to `false` the switch is not selected.
+   *
+   * When defined the switch state becomes controlled.
+   */
+  checked: PropTypes.bool,
+
+  /**
+   * When uncontrolled, defines the initial checked state.
+   */
+  defaultChecked: PropTypes.bool,
+
+  /**
+   * The callback fired when the switch is pressed.
+   */
+  onChange: PropTypes.func,
+
+  /**
+   * Properties passed on to the input element.
+   */
+  inputProps: PropTypes.instanceOf(Object),
+
+  /**
+   * Callback fired when the component is focused with a keyboard.
+   * We trigger a `onFocus` callback too.
+   */
+  onFocusVisible: PropTypes.func,
+
+  /**
+   * @ignore
+   */
+  onBlur: PropTypes.func
+};
+export default withStyles(styles, {
+  name: "HvBaseSwitch"
+})(HvBaseSwitch);
+//# sourceMappingURL=BaseSwitch.js.map

package/dist/modern/BaseSwitch/BaseSwitch.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/BaseSwitch/BaseSwitch.js"],"names":["React","useState","useCallback","PropTypes","clsx","Switch","withStyles","styles","HvBaseSwitch","props","classes","className","id","name","value","required","readOnly","disabled","checked","defaultChecked","onChange","inputProps","onFocusVisible","onBlur","others","focusVisible","setFocusVisible","onFocusVisibleCallback","evt","onBlurCallback","onLocalChange","target","root","switch","switchBase","track","thumb","propTypes","string","shape","isRequired","any","bool","func","instanceOf","Object"],"mappings":"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","sourcesContent":["import React, { useState, useCallback } from \"react\";\n\nimport PropTypes from \"prop-types\";\nimport clsx from \"clsx\";\n\nimport { Switch, withStyles } from \"@material-ui/core\";\n\nimport styles from \"./styles\";\n\n/**\n * A Switch is <b>binary</b> and work as a digital on/off button.\n *\n * The Base Switch is a building block of the Switch form element. Don't use unless\n * implementing a custom use case not covered by the Switch form element.\n */\nconst HvBaseSwitch = (props) => {\n  const {\n    classes,\n    className,\n\n    id,\n    name,\n    value = \"on\",\n\n    required = false,\n    readOnly = false,\n    disabled = false,\n\n    checked,\n    defaultChecked,\n\n    onChange,\n\n    inputProps,\n\n    onFocusVisible,\n    onBlur,\n\n    ...others\n  } = props;\n\n  const [focusVisible, setFocusVisible] = useState(false);\n\n  const onFocusVisibleCallback = useCallback(\n    (evt) => {\n      setFocusVisible(true);\n      onFocusVisible?.(evt);\n    },\n    [onFocusVisible]\n  );\n\n  const onBlurCallback = useCallback(\n    (evt) => {\n      setFocusVisible(false);\n      onBlur?.(evt);\n    },\n    [onBlur]\n  );\n\n  const onLocalChange = useCallback(\n    (evt) => {\n      if (readOnly) {\n        return;\n      }\n\n      onChange?.(evt, evt.target.checked, value);\n    },\n    [onChange, readOnly, value]\n  );\n\n  return (\n    <Switch\n      id={id}\n      name={name}\n      className={clsx(className, classes.root, {\n        [classes.disabled]: disabled,\n        [classes.focusVisible]: focusVisible,\n      })}\n      color=\"default\"\n      disabled={disabled}\n      required={required}\n      readOnly={readOnly}\n      disableRipple\n      onChange={onLocalChange}\n      value={value}\n      checked={checked}\n      defaultChecked={defaultChecked}\n      classes={{\n        root: classes.switch,\n        switchBase: classes.switchBase,\n        checked: classes.checked,\n        track: classes.track,\n        thumb: classes.thumb,\n        disabled: classes.disabled,\n      }}\n      inputProps={inputProps}\n      onFocusVisible={onFocusVisibleCallback}\n      onBlur={onBlurCallback}\n      {...others}\n    />\n  );\n};\n\nHvBaseSwitch.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 to the switch.\n   */\n  classes: PropTypes.shape({\n    /**\n     * Styles applied to the component.\n     */\n    root: PropTypes.string,\n    /**\n     * Styles applied to the switch when it is disabled.\n     */\n    disabled: PropTypes.string,\n    /**\n     * Styles applied to the internal Switch component's root class.\n     */\n    switch: PropTypes.string,\n    /**\n     * Styles applied to the internal SwitchBase component's root class.\n     */\n    switchBase: PropTypes.string,\n    /**\n     * Pseudo-class applied to the internal SwitchBase component's checked class.\n     */\n    checked: PropTypes.string,\n    /**\n     * Styles applied to the track element.\n     */\n    track: PropTypes.string,\n    /**\n     * Styles used to create the thumb passed to the internal SwitchBase component icon prop.\n     */\n    thumb: PropTypes.string,\n    /**\n     * Class applied to the root element if keyboard focused.\n     */\n    focusVisible: PropTypes.string,\n  }).isRequired,\n\n  /**\n   * Id to be applied to the root node.\n   */\n  id: PropTypes.string,\n\n  /**\n   * The input name.\n   */\n  name: PropTypes.string,\n  /**\n   * The value of the input.\n   *\n   * Is up to the application's logic when to consider the submission of this value.\n   * Generally it should be used only when the switch is neither unchecked nor indeterminate.\n   *\n   * The default value is \"on\".\n   */\n  // eslint-disable-next-line react/forbid-prop-types\n  value: PropTypes.any,\n\n  /**\n   * Indicates that user input is required.\n   */\n  required: PropTypes.bool,\n  /**\n   * Indicates that the input is not editable.\n   */\n  readOnly: PropTypes.bool,\n  /**\n   * Indicates that the input is disabled.\n   */\n  disabled: PropTypes.bool,\n\n  /**\n   * If `true` the switch is selected, if set to `false` the switch is not selected.\n   *\n   * When defined the switch state becomes controlled.\n   */\n  checked: PropTypes.bool,\n  /**\n   * When uncontrolled, defines the initial checked state.\n   */\n  defaultChecked: PropTypes.bool,\n\n  /**\n   * The callback fired when the switch is pressed.\n   */\n  onChange: PropTypes.func,\n\n  /**\n   * Properties passed on to the input element.\n   */\n  inputProps: PropTypes.instanceOf(Object),\n\n  /**\n   * Callback fired when the component is focused with a keyboard.\n   * We trigger a `onFocus` callback too.\n   */\n  onFocusVisible: PropTypes.func,\n  /**\n   * @ignore\n   */\n  onBlur: PropTypes.func,\n};\n\nexport default withStyles(styles, { name: \"HvBaseSwitch\" })(HvBaseSwitch);\n"],"file":"BaseSwitch.js"}

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

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

package/dist/modern/BaseSwitch/index.js

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

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

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

package/dist/modern/BaseSwitch/styles.js

@@ -0,0 +1,81 @@
+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); if (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 = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+
+import { outlineStyles } from "../Focus/styles";
+const switchWidth = 32;
+const thumbPosition = {
+  position: "relative",
+  left: -9,
+  width: 12,
+  height: 12
+};
+
+const styles = theme => ({
+  root: {
+    padding: 0,
+    cursor: "pointer"
+  },
+  switch: {
+    padding: 0,
+    width: switchWidth,
+    height: 16
+  },
+  switchBase: {
+    width: switchWidth,
+    height: 16,
+    padding: 0,
+    // increase CSS specificity
+    "&:hover": {
+      backgroundColor: "transparent"
+    },
+    "&$checked": {
+      transform: "translateX(16px)",
+      "& + $track": {
+        opacity: 1,
+        backgroundColor: theme.hv.palette.accent.acce1
+      },
+      "&:hover": {
+        backgroundColor: "transparent"
+      }
+    }
+  },
+  track: {
+    opacity: 1,
+    borderRadius: 15,
+    left: 17,
+    height: 16,
+    border: `solid 1px ${theme.hv.palette.accent.acce1}`,
+    backgroundColor: theme.hv.palette.atmosphere.atmo2
+  },
+  thumb: _objectSpread(_objectSpread({}, thumbPosition), {}, {
+    border: `solid 1px ${theme.hv.palette.accent.acce1}`,
+    backgroundColor: theme.hv.palette.atmosphere.atmo1,
+    marginLeft: 2,
+    marginTop: 0
+  }),
+  checked: {},
+  disabled: {
+    cursor: "not-allowed",
+    "& $switch": {
+      cursor: "not-allowed"
+    },
+    "& $thumb": {
+      backgroundColor: `${theme.hv.palette.atmosphere.atmo3}`,
+      border: `solid 1px ${theme.hv.palette.atmosphere.atmo5}`
+    },
+    "& $switchBase + $track": {
+      backgroundColor: `${theme.hv.palette.atmosphere.atmo3}`,
+      border: `solid 1px ${theme.hv.palette.atmosphere.atmo5}`,
+      opacity: 1
+    }
+  },
+  focusVisible: _objectSpread({
+    borderRadius: "8px"
+  }, outlineStyles)
+});
+
+export default styles;
+//# sourceMappingURL=styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/BaseSwitch/styles.js"],"names":["outlineStyles","switchWidth","thumbPosition","position","left","width","height","styles","theme","root","padding","cursor","switch","switchBase","backgroundColor","transform","opacity","hv","palette","accent","acce1","track","borderRadius","border","atmosphere","atmo2","thumb","atmo1","marginLeft","marginTop","checked","disabled","atmo3","atmo5","focusVisible"],"mappings":";;;;;;AAAA,SAASA,aAAT,QAA8B,iBAA9B;AAEA,MAAMC,WAAW,GAAG,EAApB;AAEA,MAAMC,aAAa,GAAG;AACpBC,EAAAA,QAAQ,EAAE,UADU;AAEpBC,EAAAA,IAAI,EAAE,CAAC,CAFa;AAGpBC,EAAAA,KAAK,EAAE,EAHa;AAIpBC,EAAAA,MAAM,EAAE;AAJY,CAAtB;;AAOA,MAAMC,MAAM,GAAIC,KAAD,KAAY;AACzBC,EAAAA,IAAI,EAAE;AACJC,IAAAA,OAAO,EAAE,CADL;AAEJC,IAAAA,MAAM,EAAE;AAFJ,GADmB;AAMzBC,EAAAA,MAAM,EAAE;AACNF,IAAAA,OAAO,EAAE,CADH;AAENL,IAAAA,KAAK,EAAEJ,WAFD;AAGNK,IAAAA,MAAM,EAAE;AAHF,GANiB;AAYzBO,EAAAA,UAAU,EAAE;AACVR,IAAAA,KAAK,EAAEJ,WADG;AAEVK,IAAAA,MAAM,EAAE,EAFE;AAGVI,IAAAA,OAAO,EAAE,CAHC;AAKV;AACA,eAAW;AACTI,MAAAA,eAAe,EAAE;AADR,KAND;AASV,iBAAa;AACXC,MAAAA,SAAS,EAAE,kBADA;AAEX,oBAAc;AACZC,QAAAA,OAAO,EAAE,CADG;AAEZF,QAAAA,eAAe,EAAEN,KAAK,CAACS,EAAN,CAASC,OAAT,CAAiBC,MAAjB,CAAwBC;AAF7B,OAFH;AAMX,iBAAW;AACTN,QAAAA,eAAe,EAAE;AADR;AANA;AATH,GAZa;AAiCzBO,EAAAA,KAAK,EAAE;AACLL,IAAAA,OAAO,EAAE,CADJ;AAELM,IAAAA,YAAY,EAAE,EAFT;AAGLlB,IAAAA,IAAI,EAAE,EAHD;AAILE,IAAAA,MAAM,EAAE,EAJH;AAKLiB,IAAAA,MAAM,EAAG,aAAYf,KAAK,CAACS,EAAN,CAASC,OAAT,CAAiBC,MAAjB,CAAwBC,KAAM,EAL9C;AAMLN,IAAAA,eAAe,EAAEN,KAAK,CAACS,EAAN,CAASC,OAAT,CAAiBM,UAAjB,CAA4BC;AANxC,GAjCkB;AA0CzBC,EAAAA,KAAK,kCACAxB,aADA;AAEHqB,IAAAA,MAAM,EAAG,aAAYf,KAAK,CAACS,EAAN,CAASC,OAAT,CAAiBC,MAAjB,CAAwBC,KAAM,EAFhD;AAGHN,IAAAA,eAAe,EAAEN,KAAK,CAACS,EAAN,CAASC,OAAT,CAAiBM,UAAjB,CAA4BG,KAH1C;AAIHC,IAAAA,UAAU,EAAE,CAJT;AAKHC,IAAAA,SAAS,EAAE;AALR,IA1CoB;AAkDzBC,EAAAA,OAAO,EAAE,EAlDgB;AAoDzBC,EAAAA,QAAQ,EAAE;AACRpB,IAAAA,MAAM,EAAE,aADA;AAGR,iBAAa;AACXA,MAAAA,MAAM,EAAE;AADG,KAHL;AAOR,gBAAY;AACVG,MAAAA,eAAe,EAAG,GAAEN,KAAK,CAACS,EAAN,CAASC,OAAT,CAAiBM,UAAjB,CAA4BQ,KAAM,EAD5C;AAEVT,MAAAA,MAAM,EAAG,aAAYf,KAAK,CAACS,EAAN,CAASC,OAAT,CAAiBM,UAAjB,CAA4BS,KAAM;AAF7C,KAPJ;AAYR,8BAA0B;AACxBnB,MAAAA,eAAe,EAAG,GAAEN,KAAK,CAACS,EAAN,CAASC,OAAT,CAAiBM,UAAjB,CAA4BQ,KAAM,EAD9B;AAExBT,MAAAA,MAAM,EAAG,aAAYf,KAAK,CAACS,EAAN,CAASC,OAAT,CAAiBM,UAAjB,CAA4BS,KAAM,EAF/B;AAGxBjB,MAAAA,OAAO,EAAE;AAHe;AAZlB,GApDe;AAuEzBkB,EAAAA,YAAY;AACVZ,IAAAA,YAAY,EAAE;AADJ,KAEPtB,aAFO;AAvEa,CAAZ,CAAf;;AA6EA,eAAeO,MAAf","sourcesContent":["import { outlineStyles } from \"../Focus/styles\";\n\nconst switchWidth = 32;\n\nconst thumbPosition = {\n  position: \"relative\",\n  left: -9,\n  width: 12,\n  height: 12,\n};\n\nconst styles = (theme) => ({\n  root: {\n    padding: 0,\n    cursor: \"pointer\",\n  },\n\n  switch: {\n    padding: 0,\n    width: switchWidth,\n    height: 16,\n  },\n\n  switchBase: {\n    width: switchWidth,\n    height: 16,\n    padding: 0,\n\n    // increase CSS specificity\n    \"&:hover\": {\n      backgroundColor: \"transparent\",\n    },\n    \"&$checked\": {\n      transform: \"translateX(16px)\",\n      \"& + $track\": {\n        opacity: 1,\n        backgroundColor: theme.hv.palette.accent.acce1,\n      },\n      \"&:hover\": {\n        backgroundColor: \"transparent\",\n      },\n    },\n  },\n\n  track: {\n    opacity: 1,\n    borderRadius: 15,\n    left: 17,\n    height: 16,\n    border: `solid 1px ${theme.hv.palette.accent.acce1}`,\n    backgroundColor: theme.hv.palette.atmosphere.atmo2,\n  },\n\n  thumb: {\n    ...thumbPosition,\n    border: `solid 1px ${theme.hv.palette.accent.acce1}`,\n    backgroundColor: theme.hv.palette.atmosphere.atmo1,\n    marginLeft: 2,\n    marginTop: 0,\n  },\n\n  checked: {},\n\n  disabled: {\n    cursor: \"not-allowed\",\n\n    \"& $switch\": {\n      cursor: \"not-allowed\",\n    },\n\n    \"& $thumb\": {\n      backgroundColor: `${theme.hv.palette.atmosphere.atmo3}`,\n      border: `solid 1px ${theme.hv.palette.atmosphere.atmo5}`,\n    },\n\n    \"& $switchBase + $track\": {\n      backgroundColor: `${theme.hv.palette.atmosphere.atmo3}`,\n      border: `solid 1px ${theme.hv.palette.atmosphere.atmo5}`,\n      opacity: 1,\n    },\n  },\n\n  focusVisible: {\n    borderRadius: \"8px\",\n    ...outlineStyles,\n  },\n});\n\nexport default styles;\n"],"file":"styles.js"}

package/dist/modern/BreadCrumb/BreadCrumb.d.ts

@@ -0,0 +1,37 @@
+import * as React from "react";
+import { StandardProps } from "@material-ui/core";
+import { HvDropDownMenuProps } from "..";
+
+export interface BreadCrumbPathElement {
+  label: string;
+  path: string;
+}
+
+export type HvBreadCrumbClassKey = "root" | "link" | "separator" | "orderedList" | "currentPage";
+
+export interface HvBreadCrumbProps
+  extends StandardProps<React.HTMLAttributes<HTMLDivElement>, HvBreadCrumbClassKey> {
+  /**
+   * List of breadcrumb.
+   */
+  listRoute?: BreadCrumbPathElement[];
+  /**
+   * URL to build the breadcrumb.
+   */
+  url?: string;
+  /**
+   * Number of pages visible.
+   */
+  maxVisible?: number;
+  /**
+   * The component used for the link node.
+   * Either a string to use a DOM element or a component.
+   */
+  component?: React.ElementType<React.HTMLAttributes<HTMLElement>>;
+  /**
+   * Props passed down to the DropDownMenu sub-menu component.
+   */
+  dropDownMenuProps?: HvDropDownMenuProps;
+}
+
+export default function HvBreadCrumb(props: HvBreadCrumbProps): JSX.Element | null;

package/dist/modern/BreadCrumb/BreadCrumb.js

@@ -0,0 +1,195 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+const _excluded = ["classes", "className", "id", "listRoute", "maxVisible", "url", "onClick", "component", "dropDownMenuProps"];
+import "core-js/modules/es.string.replace.js";
+import React from "react";
+import PropTypes from "prop-types";
+import clsx from "clsx";
+import { withStyles } from "@material-ui/core";
+import { DropRightXS } from "@hitachivantara/uikit-react-icons";
+import startCase from "lodash/startCase";
+import isNil from "lodash/isNil";
+import { HvLink, HvTypography } from "..";
+import { pathWithSubMenu, removeExtension } from "./utils";
+import styles from "./styles";
+
+const Page = ({
+  Component,
+  onClick,
+  elem,
+  classes
+}) => /*#__PURE__*/React.createElement(HvLink, {
+  route: elem.path,
+  Component: Component,
+  onClick: onClick,
+  data: elem,
+  classes: {
+    a: classes.a
+  }
+}, /*#__PURE__*/React.createElement(HvTypography, {
+  noWrap: true,
+  variant: "highlightText",
+  className: classes.link
+}, startCase(elem.label)));
+
+Page.propTypes = {
+  Component: PropTypes.elementType,
+  onClick: PropTypes.func,
+  elem: PropTypes.shape({
+    path: PropTypes.string,
+    label: PropTypes.string
+  }).isRequired,
+  classes: PropTypes.instanceOf(Object).isRequired
+};
+
+const PathElement = ({
+  classes,
+  last = false,
+  children
+}) => /*#__PURE__*/React.createElement("li", {
+  className: classes.centerContainer
+}, children, !last && /*#__PURE__*/React.createElement(DropRightXS, {
+  className: classes.separatorContainer,
+  color: "atmo5"
+}));
+
+PathElement.propTypes = {
+  last: PropTypes.bool,
+  classes: PropTypes.instanceOf(Object).isRequired,
+  children: PropTypes.element.isRequired
+};
+/**
+ * A breadcrumb is a graphical control element frequently used as a navigational aid.
+ */
+
+const BreadCrumb = props => {
+  const {
+    classes,
+    className,
+    id,
+    listRoute = [],
+    maxVisible,
+    url,
+    onClick,
+    component = "div",
+    dropDownMenuProps
+  } = props,
+        others = _objectWithoutProperties(props, _excluded);
+
+  const maxVisibleElem = maxVisible < 2 ? 2 : maxVisible;
+  let listPath = listRoute.slice(); // build the listPath object list
+
+  if (!isNil(url)) {
+    listPath = []; // get the domain
+
+    const baseUrl = url.match(/^.*\/\/[^/]+/, ""); // get url without domain
+
+    const urlWithoutDomain = url.replace(/^.*\/\/[^/]+/, "");
+    const pathNames = urlWithoutDomain.split("/").filter(x => x);
+    pathNames.map((elem, index) => listPath.push({
+      label: decodeURI(elem),
+      path: `${baseUrl}/${pathNames.slice(0, index + 1).join("/")}`
+    }));
+  }
+
+  const breadcrumbPath = listPath.length > maxVisibleElem ? pathWithSubMenu(id, classes, listPath, maxVisibleElem, dropDownMenuProps) : listPath;
+  return /*#__PURE__*/React.createElement("nav", _extends({
+    id: id,
+    className: clsx(classes.root, className)
+  }, others), /*#__PURE__*/React.createElement("ol", {
+    className: classes.orderedList
+  }, listPath.map((elem, index) => {
+    const key = `key_${index}`;
+    const isLast = index === breadcrumbPath.length - 1;
+    return /*#__PURE__*/React.createElement(PathElement, {
+      classes: classes,
+      key: key,
+      last: isLast
+    }, /*#__PURE__*/React.isValidElement(elem) && elem || isLast && /*#__PURE__*/React.createElement(HvTypography, {
+      className: classes.currentPage,
+      variant: "normalText"
+    }, startCase(removeExtension(elem.label))) || /*#__PURE__*/React.createElement(Page, {
+      key: key,
+      elem: elem,
+      classes: classes,
+      Component: onClick ? component : undefined,
+      onClick: onClick
+    }));
+  })));
+};
+
+BreadCrumb.propTypes = {
+  /**
+   * Class names to be applied.
+   */
+  className: PropTypes.string,
+
+  /**
+   * Id to be applied to the root node.
+   */
+  id: PropTypes.string,
+
+  /**
+   * A Jss Object used to override or extend the styles applied.
+   */
+  classes: PropTypes.shape({
+    /**
+     * Styles applied to the component root class.
+     */
+    root: PropTypes.string,
+
+    /**
+     * Styles applied to the links.
+     */
+    link: PropTypes.string,
+
+    /**
+     *  Styles applied to the list.
+     */
+    orderedList: PropTypes.string,
+
+    /**
+     *  Styles applied to the last element.
+     */
+    currentPage: PropTypes.string
+  }).isRequired,
+
+  /**
+   * List of breadcrumb.
+   */
+  listRoute: PropTypes.arrayOf(PropTypes.shape({
+    label: PropTypes.string,
+    path: PropTypes.string
+  })),
+
+  /**
+   * URL to build the breadcrumb.
+   */
+  url: PropTypes.string,
+
+  /**
+   * Number of pages visible.
+   */
+  maxVisible: PropTypes.number,
+
+  /**
+   * The component used for the link node.
+   * Either a string to use a DOM element or a component.
+   */
+  component: PropTypes.elementType,
+
+  /**
+   * Function passed to the component. If defined the component prop is used as the link node.
+   */
+  onClick: PropTypes.func,
+
+  /**
+   * Props passed down to the DropDownMenu sub-menu component.
+   */
+  dropDownMenuProps: PropTypes.instanceOf(Object)
+};
+export default withStyles(styles, {
+  name: "HvBreadCrumb",
+  index: 1
+})(BreadCrumb);
+//# sourceMappingURL=BreadCrumb.js.map

package/dist/modern/BreadCrumb/BreadCrumb.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/BreadCrumb/BreadCrumb.js"],"names":["React","PropTypes","clsx","withStyles","DropRightXS","startCase","isNil","HvLink","HvTypography","pathWithSubMenu","removeExtension","styles","Page","Component","onClick","elem","classes","path","a","link","label","propTypes","elementType","func","shape","string","isRequired","instanceOf","Object","PathElement","last","children","centerContainer","separatorContainer","bool","element","BreadCrumb","props","className","id","listRoute","maxVisible","url","component","dropDownMenuProps","others","maxVisibleElem","listPath","slice","baseUrl","match","urlWithoutDomain","replace","pathNames","split","filter","x","map","index","push","decodeURI","join","breadcrumbPath","length","root","orderedList","key","isLast","isValidElement","currentPage","undefined","arrayOf","number","name"],"mappings":"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","sourcesContent":["import React from \"react\";\nimport PropTypes from \"prop-types\";\nimport clsx from \"clsx\";\nimport { withStyles } from \"@material-ui/core\";\nimport { DropRightXS } from \"@hitachivantara/uikit-react-icons\";\nimport startCase from \"lodash/startCase\";\nimport isNil from \"lodash/isNil\";\nimport { HvLink, HvTypography } from \"..\";\nimport { pathWithSubMenu, removeExtension } from \"./utils\";\nimport styles from \"./styles\";\n\nconst Page = ({ Component, onClick, elem, classes }) => (\n  <HvLink\n    route={elem.path}\n    Component={Component}\n    onClick={onClick}\n    data={elem}\n    classes={{ a: classes.a }}\n  >\n    <HvTypography noWrap variant=\"highlightText\" className={classes.link}>\n      {startCase(elem.label)}\n    </HvTypography>\n  </HvLink>\n);\n\nPage.propTypes = {\n  Component: PropTypes.elementType,\n  onClick: PropTypes.func,\n  elem: PropTypes.shape({\n    path: PropTypes.string,\n    label: PropTypes.string,\n  }).isRequired,\n  classes: PropTypes.instanceOf(Object).isRequired,\n};\n\nconst PathElement = ({ classes, last = false, children }) => (\n  <li className={classes.centerContainer}>\n    {children}\n    {!last && <DropRightXS className={classes.separatorContainer} color=\"atmo5\" />}\n  </li>\n);\n\nPathElement.propTypes = {\n  last: PropTypes.bool,\n  classes: PropTypes.instanceOf(Object).isRequired,\n  children: PropTypes.element.isRequired,\n};\n\n/**\n * A breadcrumb is a graphical control element frequently used as a navigational aid.\n */\nconst BreadCrumb = (props) => {\n  const {\n    classes,\n    className,\n    id,\n    listRoute = [],\n    maxVisible,\n    url,\n    onClick,\n    component = \"div\",\n    dropDownMenuProps,\n    ...others\n  } = props;\n  const maxVisibleElem = maxVisible < 2 ? 2 : maxVisible;\n  let listPath = listRoute.slice();\n\n  // build the listPath object list\n  if (!isNil(url)) {\n    listPath = [];\n\n    // get the domain\n    const baseUrl = url.match(/^.*\\/\\/[^/]+/, \"\");\n\n    // get url without domain\n    const urlWithoutDomain = url.replace(/^.*\\/\\/[^/]+/, \"\");\n\n    const pathNames = urlWithoutDomain.split(\"/\").filter((x) => x);\n\n    pathNames.map((elem, index) =>\n      listPath.push({\n        label: decodeURI(elem),\n        path: `${baseUrl}/${pathNames.slice(0, index + 1).join(\"/\")}`,\n      })\n    );\n  }\n\n  const breadcrumbPath =\n    listPath.length > maxVisibleElem\n      ? pathWithSubMenu(id, classes, listPath, maxVisibleElem, dropDownMenuProps)\n      : listPath;\n\n  return (\n    <nav id={id} className={clsx(classes.root, className)} {...others}>\n      <ol className={classes.orderedList}>\n        {listPath.map((elem, index) => {\n          const key = `key_${index}`;\n          const isLast = index === breadcrumbPath.length - 1;\n\n          return (\n            <PathElement classes={classes} key={key} last={isLast}>\n              {(React.isValidElement(elem) && elem) ||\n                (isLast && (\n                  <HvTypography className={classes.currentPage} variant=\"normalText\">\n                    {startCase(removeExtension(elem.label))}\n                  </HvTypography>\n                )) || (\n                  <Page\n                    key={key}\n                    elem={elem}\n                    classes={classes}\n                    Component={onClick ? component : undefined}\n                    onClick={onClick}\n                  />\n                )}\n            </PathElement>\n          );\n        })}\n      </ol>\n    </nav>\n  );\n};\n\nBreadCrumb.propTypes = {\n  /**\n   * Class names to be applied.\n   */\n  className: PropTypes.string,\n  /**\n   * Id to be applied to the root node.\n   */\n  id: 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    /**\n     * Styles applied to the links.\n     */\n    link: PropTypes.string,\n    /**\n     *  Styles applied to the list.\n     */\n    orderedList: PropTypes.string,\n    /**\n     *  Styles applied to the last element.\n     */\n    currentPage: PropTypes.string,\n  }).isRequired,\n  /**\n   * List of breadcrumb.\n   */\n  listRoute: PropTypes.arrayOf(\n    PropTypes.shape({\n      label: PropTypes.string,\n      path: PropTypes.string,\n    })\n  ),\n  /**\n   * URL to build the breadcrumb.\n   */\n  url: PropTypes.string,\n  /**\n   * Number of pages visible.\n   */\n  maxVisible: PropTypes.number,\n  /**\n   * The component used for the link node.\n   * Either a string to use a DOM element or a component.\n   */\n  component: PropTypes.elementType,\n  /**\n   * Function passed to the component. If defined the component prop is used as the link node.\n   */\n  onClick: PropTypes.func,\n  /**\n   * Props passed down to the DropDownMenu sub-menu component.\n   */\n  dropDownMenuProps: PropTypes.instanceOf(Object),\n};\n\nexport default withStyles(styles, { name: \"HvBreadCrumb\", index: 1 })(BreadCrumb);\n"],"file":"BreadCrumb.js"}

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

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

package/dist/modern/BreadCrumb/index.js

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

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

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

package/dist/modern/BreadCrumb/styles.js

@@ -0,0 +1,42 @@
+const styles = theme => ({
+  root: {
+    display: "flex",
+    alignItems: "center",
+    zIndex: 0
+  },
+  centerContainer: {
+    display: "flex",
+    alignItems: "center"
+  },
+  link: {
+    maxWidth: "170px",
+    color: theme.hv.palette.accent.acce1,
+    "&:hover": {
+      cursor: "pointer",
+      backgroundColor: theme.hv.palette.atmosphere.atmo3
+    }
+  },
+  separatorContainer: {},
+  orderedList: {
+    display: "flex",
+    paddingLeft: 0,
+    marginLeft: `-${theme.spacing("xs")}px`
+  },
+  currentPage: {
+    padding: `8px ${theme.spacing("xs")}px`
+  },
+  a: {
+    padding: `8px ${theme.spacing("xs")}px`,
+    textDecoration: "none",
+    borderRadius: "2px",
+    "&:hover": {
+      backgroundColor: theme.hv.palette.atmosphere.atmo3
+    },
+    "&:focus": {
+      backgroundColor: theme.hv.palette.atmosphere.atmo3
+    }
+  }
+});
+
+export default styles;
+//# sourceMappingURL=styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/BreadCrumb/styles.js"],"names":["styles","theme","root","display","alignItems","zIndex","centerContainer","link","maxWidth","color","hv","palette","accent","acce1","cursor","backgroundColor","atmosphere","atmo3","separatorContainer","orderedList","paddingLeft","marginLeft","spacing","currentPage","padding","a","textDecoration","borderRadius"],"mappings":"AAAA,MAAMA,MAAM,GAAIC,KAAD,KAAY;AACzBC,EAAAA,IAAI,EAAE;AACJC,IAAAA,OAAO,EAAE,MADL;AAEJC,IAAAA,UAAU,EAAE,QAFR;AAGJC,IAAAA,MAAM,EAAE;AAHJ,GADmB;AAMzBC,EAAAA,eAAe,EAAE;AACfH,IAAAA,OAAO,EAAE,MADM;AAEfC,IAAAA,UAAU,EAAE;AAFG,GANQ;AAUzBG,EAAAA,IAAI,EAAE;AACJC,IAAAA,QAAQ,EAAE,OADN;AAEJC,IAAAA,KAAK,EAAER,KAAK,CAACS,EAAN,CAASC,OAAT,CAAiBC,MAAjB,CAAwBC,KAF3B;AAGJ,eAAW;AACTC,MAAAA,MAAM,EAAE,SADC;AAETC,MAAAA,eAAe,EAAEd,KAAK,CAACS,EAAN,CAASC,OAAT,CAAiBK,UAAjB,CAA4BC;AAFpC;AAHP,GAVmB;AAkBzBC,EAAAA,kBAAkB,EAAE,EAlBK;AAmBzBC,EAAAA,WAAW,EAAE;AACXhB,IAAAA,OAAO,EAAE,MADE;AAEXiB,IAAAA,WAAW,EAAE,CAFF;AAGXC,IAAAA,UAAU,EAAG,IAAGpB,KAAK,CAACqB,OAAN,CAAc,IAAd,CAAoB;AAHzB,GAnBY;AAwBzBC,EAAAA,WAAW,EAAE;AACXC,IAAAA,OAAO,EAAG,OAAMvB,KAAK,CAACqB,OAAN,CAAc,IAAd,CAAoB;AADzB,GAxBY;AA2BzBG,EAAAA,CAAC,EAAE;AACDD,IAAAA,OAAO,EAAG,OAAMvB,KAAK,CAACqB,OAAN,CAAc,IAAd,CAAoB,IADnC;AAEDI,IAAAA,cAAc,EAAE,MAFf;AAGDC,IAAAA,YAAY,EAAE,KAHb;AAID,eAAW;AACTZ,MAAAA,eAAe,EAAEd,KAAK,CAACS,EAAN,CAASC,OAAT,CAAiBK,UAAjB,CAA4BC;AADpC,KAJV;AAOD,eAAW;AACTF,MAAAA,eAAe,EAAEd,KAAK,CAACS,EAAN,CAASC,OAAT,CAAiBK,UAAjB,CAA4BC;AADpC;AAPV;AA3BsB,CAAZ,CAAf;;AAwCA,eAAejB,MAAf","sourcesContent":["const styles = (theme) => ({\n  root: {\n    display: \"flex\",\n    alignItems: \"center\",\n    zIndex: 0,\n  },\n  centerContainer: {\n    display: \"flex\",\n    alignItems: \"center\",\n  },\n  link: {\n    maxWidth: \"170px\",\n    color: theme.hv.palette.accent.acce1,\n    \"&:hover\": {\n      cursor: \"pointer\",\n      backgroundColor: theme.hv.palette.atmosphere.atmo3,\n    },\n  },\n  separatorContainer: {},\n  orderedList: {\n    display: \"flex\",\n    paddingLeft: 0,\n    marginLeft: `-${theme.spacing(\"xs\")}px`,\n  },\n  currentPage: {\n    padding: `8px ${theme.spacing(\"xs\")}px`,\n  },\n  a: {\n    padding: `8px ${theme.spacing(\"xs\")}px`,\n    textDecoration: \"none\",\n    borderRadius: \"2px\",\n    \"&:hover\": {\n      backgroundColor: theme.hv.palette.atmosphere.atmo3,\n    },\n    \"&:focus\": {\n      backgroundColor: theme.hv.palette.atmosphere.atmo3,\n    },\n  },\n});\n\nexport default styles;\n"],"file":"styles.js"}

package/dist/modern/BreadCrumb/utils.js

@@ -0,0 +1,20 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import React from "react";
+import { MoreOptionsHorizontal } from "@hitachivantara/uikit-react-icons";
+import { HvDropDownMenu } from "..";
+import { setId } from "../utils";
+export const removeExtension = label => label.includes(".") ? label.substring(0, label.lastIndexOf(".")) : label;
+export const pathWithSubMenu = (id, classes, listRoute, maxVisible, dropDownMenuProps) => {
+  const nbrElemToSubMenu = listRoute.length - maxVisible;
+  const subMenuList = listRoute.slice(1, nbrElemToSubMenu + 1);
+  listRoute.splice(1, nbrElemToSubMenu, /*#__PURE__*/React.createElement(HvDropDownMenu, _extends({
+    id: setId(id, "submenu"),
+    icon: /*#__PURE__*/React.createElement(MoreOptionsHorizontal, {
+      iconSize: "S",
+      color: "acce1"
+    }),
+    dataList: subMenuList
+  }, dropDownMenuProps)));
+  return listRoute;
+};
+//# sourceMappingURL=utils.js.map