@hitachivantara/uikit-react-lab 3.38.0

package/dist/legacy/TimePicker/PeriodPicker/PeriodPicker.js

@@ -0,0 +1,110 @@
+import "core-js/modules/es.object.to-string.js";
+import "core-js/modules/es.reflect.construct.js";
+import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
+import _createClass from "@babel/runtime/helpers/esm/createClass";
+import _assertThisInitialized from "@babel/runtime/helpers/esm/assertThisInitialized";
+import _inherits from "@babel/runtime/helpers/esm/inherits";
+import _possibleConstructorReturn from "@babel/runtime/helpers/esm/possibleConstructorReturn";
+import _getPrototypeOf from "@babel/runtime/helpers/esm/getPrototypeOf";
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+
+function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
+
+function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
+
+import React from "react";
+import PropTypes from "prop-types";
+import clsx from "clsx";
+import { HvToggleButton } from "@hitachivantara/uikit-react-core";
+import { DropUpXS as UpIcon, DropDownXS as DownIcon } from "@hitachivantara/uikit-react-icons";
+import { PeriodPickerOptions } from "../enums";
+
+var PeriodPicker = /*#__PURE__*/function (_React$Component) {
+  _inherits(PeriodPicker, _React$Component);
+
+  var _super = _createSuper(PeriodPicker);
+
+  function PeriodPicker(props) {
+    var _props$period;
+
+    var _this;
+
+    _classCallCheck(this, PeriodPicker);
+
+    _this = _super.call(this, props);
+
+    _defineProperty(_assertThisInitialized(_this), "handleChangePeriod", function () {
+      var onChangePeriod = _this.props.onChangePeriod;
+
+      var period = _this.selectDifferentPeriod();
+
+      _this.setState({
+        currentPeriod: period
+      });
+
+      onChangePeriod(period);
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "selectDifferentPeriod", function () {
+      var currentPeriod = _this.state.currentPeriod;
+      return currentPeriod === PeriodPickerOptions.AM ? PeriodPickerOptions.PM : PeriodPickerOptions.AM;
+    });
+
+    _this.state = {
+      currentPeriod: (_props$period = props.period) !== null && _props$period !== void 0 ? _props$period : PeriodPickerOptions.AM
+    };
+    return _this;
+  }
+  /**
+   * Handles the period change
+   * @memberof PeriodPicker
+   */
+
+
+  _createClass(PeriodPicker, [{
+    key: "render",
+    value:
+    /**
+     * Renders the PeriodPicker
+     * @memberof UnitTimePicker
+     */
+    function render() {
+      var classes = this.props.classes;
+      var currentPeriod = this.state.currentPeriod;
+      return /*#__PURE__*/React.createElement("div", {
+        className: classes.periodContainer
+      }, /*#__PURE__*/React.createElement(UpIcon, {
+        className: classes.icon,
+        onClick: this.handleChangePeriod
+      }), /*#__PURE__*/React.createElement(HvToggleButton, {
+        className: classes.periodToggle,
+        selected: currentPeriod === PeriodPickerOptions.PM,
+        onClick: this.handleChangePeriod
+      }, currentPeriod), /*#__PURE__*/React.createElement(DownIcon, {
+        className: clsx(classes.icon, classes.subtractIcon),
+        onClick: this.handleChangePeriod
+      }));
+    }
+  }]);
+
+  return PeriodPicker;
+}(React.Component);
+
+PeriodPicker.propTypes = {
+  /**
+   * A Jss Object used to override or extend the styles applied to the input/popper
+   */
+  classes: PropTypes.instanceOf(Object).isRequired,
+
+  /**
+   * Callback function called when the period value changes
+   */
+  onChangePeriod: PropTypes.func.isRequired,
+
+  /**
+   * Default period value
+   */
+  period: PropTypes.oneOf([PeriodPickerOptions.AM, PeriodPickerOptions.PM])
+};
+export default PeriodPicker;
+//# sourceMappingURL=PeriodPicker.js.map

package/dist/legacy/TimePicker/PeriodPicker/PeriodPicker.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/TimePicker/PeriodPicker/PeriodPicker.js"],"names":["React","PropTypes","clsx","HvToggleButton","DropUpXS","UpIcon","DropDownXS","DownIcon","PeriodPickerOptions","PeriodPicker","props","onChangePeriod","period","selectDifferentPeriod","setState","currentPeriod","state","AM","PM","classes","periodContainer","icon","handleChangePeriod","periodToggle","subtractIcon","Component","propTypes","instanceOf","Object","isRequired","func","oneOf"],"mappings":";;;;;;;;;;;;;;AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,OAAOC,SAAP,MAAsB,YAAtB;AACA,OAAOC,IAAP,MAAiB,MAAjB;AACA,SAASC,cAAT,QAA+B,kCAA/B;AACA,SAASC,QAAQ,IAAIC,MAArB,EAA6BC,UAAU,IAAIC,QAA3C,QAA2D,mCAA3D;AACA,SAASC,mBAAT,QAAoC,UAApC;;IAEMC,Y;;;;;AACJ,wBAAYC,KAAZ,EAAmB;AAAA;;AAAA;;AAAA;;AACjB,8BAAMA,KAAN;;AADiB,yEAYE,YAAM;AACzB,UAAQC,cAAR,GAA2B,MAAKD,KAAhC,CAAQC,cAAR;;AACA,UAAMC,MAAM,GAAG,MAAKC,qBAAL,EAAf;;AACA,YAAKC,QAAL,CAAc;AACZC,QAAAA,aAAa,EAAEH;AADH,OAAd;;AAGAD,MAAAA,cAAc,CAACC,MAAD,CAAd;AACD,KAnBkB;;AAAA,4EA0BK,YAAM;AAC5B,UAAQG,aAAR,GAA0B,MAAKC,KAA/B,CAAQD,aAAR;AACA,aAAOA,aAAa,KAAKP,mBAAmB,CAACS,EAAtC,GACHT,mBAAmB,CAACU,EADjB,GAEHV,mBAAmB,CAACS,EAFxB;AAGD,KA/BkB;;AAGjB,UAAKD,KAAL,GAAa;AACXD,MAAAA,aAAa,mBAAEL,KAAK,CAACE,MAAR,yDAAkBJ,mBAAmB,CAACS;AADxC,KAAb;AAHiB;AAMlB;AAED;AACF;AACA;AACA;;;;;;AAsBE;AACF;AACA;AACA;AACE,sBAAS;AACP,UAAQE,OAAR,GAAoB,KAAKT,KAAzB,CAAQS,OAAR;AACA,UAAQJ,aAAR,GAA0B,KAAKC,KAA/B,CAAQD,aAAR;AAEA,0BACE;AAAK,QAAA,SAAS,EAAEI,OAAO,CAACC;AAAxB,sBACE,oBAAC,MAAD;AAAQ,QAAA,SAAS,EAAED,OAAO,CAACE,IAA3B;AAAiC,QAAA,OAAO,EAAE,KAAKC;AAA/C,QADF,eAEE,oBAAC,cAAD;AACE,QAAA,SAAS,EAAEH,OAAO,CAACI,YADrB;AAEE,QAAA,QAAQ,EAAER,aAAa,KAAKP,mBAAmB,CAACU,EAFlD;AAGE,QAAA,OAAO,EAAE,KAAKI;AAHhB,SAKGP,aALH,CAFF,eASE,oBAAC,QAAD;AACE,QAAA,SAAS,EAAEb,IAAI,CAACiB,OAAO,CAACE,IAAT,EAAeF,OAAO,CAACK,YAAvB,CADjB;AAEE,QAAA,OAAO,EAAE,KAAKF;AAFhB,QATF,CADF;AAgBD;;;;EA1DwBtB,KAAK,CAACyB,S;;AA6DjChB,YAAY,CAACiB,SAAb,GAAyB;AACvB;AACF;AACA;AACEP,EAAAA,OAAO,EAAElB,SAAS,CAAC0B,UAAV,CAAqBC,MAArB,EAA6BC,UAJf;;AAKvB;AACF;AACA;AACElB,EAAAA,cAAc,EAAEV,SAAS,CAAC6B,IAAV,CAAeD,UARR;;AASvB;AACF;AACA;AACEjB,EAAAA,MAAM,EAAEX,SAAS,CAAC8B,KAAV,CAAgB,CAACvB,mBAAmB,CAACS,EAArB,EAAyBT,mBAAmB,CAACU,EAA7C,CAAhB;AAZe,CAAzB;AAeA,eAAeT,YAAf","sourcesContent":["import React from \"react\";\nimport PropTypes from \"prop-types\";\nimport clsx from \"clsx\";\nimport { HvToggleButton } from \"@hitachivantara/uikit-react-core\";\nimport { DropUpXS as UpIcon, DropDownXS as DownIcon } from \"@hitachivantara/uikit-react-icons\";\nimport { PeriodPickerOptions } from \"../enums\";\n\nclass PeriodPicker extends React.Component {\n  constructor(props) {\n    super(props);\n\n    this.state = {\n      currentPeriod: props.period ?? PeriodPickerOptions.AM,\n    };\n  }\n\n  /**\n   * Handles the period change\n   * @memberof PeriodPicker\n   */\n  handleChangePeriod = () => {\n    const { onChangePeriod } = this.props;\n    const period = this.selectDifferentPeriod();\n    this.setState({\n      currentPeriod: period,\n    });\n    onChangePeriod(period);\n  };\n\n  /**\n   * Gets the new value for the period\n   * @returns the new value for the period\n   * @memberof UnitTimePicker\n   */\n  selectDifferentPeriod = () => {\n    const { currentPeriod } = this.state;\n    return currentPeriod === PeriodPickerOptions.AM\n      ? PeriodPickerOptions.PM\n      : PeriodPickerOptions.AM;\n  };\n\n  /**\n   * Renders the PeriodPicker\n   * @memberof UnitTimePicker\n   */\n  render() {\n    const { classes } = this.props;\n    const { currentPeriod } = this.state;\n\n    return (\n      <div className={classes.periodContainer}>\n        <UpIcon className={classes.icon} onClick={this.handleChangePeriod} />\n        <HvToggleButton\n          className={classes.periodToggle}\n          selected={currentPeriod === PeriodPickerOptions.PM}\n          onClick={this.handleChangePeriod}\n        >\n          {currentPeriod}\n        </HvToggleButton>\n        <DownIcon\n          className={clsx(classes.icon, classes.subtractIcon)}\n          onClick={this.handleChangePeriod}\n        />\n      </div>\n    );\n  }\n}\n\nPeriodPicker.propTypes = {\n  /**\n   * A Jss Object used to override or extend the styles applied to the input/popper\n   */\n  classes: PropTypes.instanceOf(Object).isRequired,\n  /**\n   * Callback function called when the period value changes\n   */\n  onChangePeriod: PropTypes.func.isRequired,\n  /**\n   * Default period value\n   */\n  period: PropTypes.oneOf([PeriodPickerOptions.AM, PeriodPickerOptions.PM]),\n};\n\nexport default PeriodPicker;\n"],"file":"PeriodPicker.js"}

package/dist/legacy/TimePicker/PeriodPicker/index.js

@@ -0,0 +1,7 @@
+import withStyles from "@material-ui/core/styles/withStyles";
+import styles from "./styles";
+import PeriodPicker from "./PeriodPicker";
+export default withStyles(styles, {
+  name: "HvTimePickerPeriodPicker"
+})(PeriodPicker);
+//# sourceMappingURL=index.js.map

package/dist/legacy/TimePicker/PeriodPicker/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/TimePicker/PeriodPicker/index.js"],"names":["withStyles","styles","PeriodPicker","name"],"mappings":"AAAA,OAAOA,UAAP,MAAuB,qCAAvB;AACA,OAAOC,MAAP,MAAmB,UAAnB;AACA,OAAOC,YAAP,MAAyB,gBAAzB;AAEA,eAAeF,UAAU,CAACC,MAAD,EAAS;AAAEE,EAAAA,IAAI,EAAE;AAAR,CAAT,CAAV,CAAyDD,YAAzD,CAAf","sourcesContent":["import withStyles from \"@material-ui/core/styles/withStyles\";\nimport styles from \"./styles\";\nimport PeriodPicker from \"./PeriodPicker\";\n\nexport default withStyles(styles, { name: \"HvTimePickerPeriodPicker\" })(PeriodPicker);\n"],"file":"index.js"}

package/dist/legacy/TimePicker/PeriodPicker/styles.js

@@ -0,0 +1,24 @@
+var styles = function styles(theme) {
+  return {
+    periodContainer: {
+      display: "flex",
+      flexDirection: "column",
+      justifyContent: "center",
+      alignItems: "center",
+      marginLeft: 8
+    },
+    periodToggle: {
+      height: "40px",
+      width: "40px"
+    },
+    icon: {
+      cursor: "pointer"
+    },
+    subtractIcon: {
+      marginTop: "".concat(theme.hv.spacing.xs, "px")
+    }
+  };
+};
+
+export default styles;
+//# sourceMappingURL=styles.js.map

package/dist/legacy/TimePicker/PeriodPicker/styles.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/TimePicker/PeriodPicker/styles.js"],"names":["styles","theme","periodContainer","display","flexDirection","justifyContent","alignItems","marginLeft","periodToggle","height","width","icon","cursor","subtractIcon","marginTop","hv","spacing","xs"],"mappings":"AAAA,IAAMA,MAAM,GAAG,SAATA,MAAS,CAACC,KAAD;AAAA,SAAY;AACzBC,IAAAA,eAAe,EAAE;AACfC,MAAAA,OAAO,EAAE,MADM;AAEfC,MAAAA,aAAa,EAAE,QAFA;AAGfC,MAAAA,cAAc,EAAE,QAHD;AAIfC,MAAAA,UAAU,EAAE,QAJG;AAKfC,MAAAA,UAAU,EAAE;AALG,KADQ;AAQzBC,IAAAA,YAAY,EAAE;AACZC,MAAAA,MAAM,EAAE,MADI;AAEZC,MAAAA,KAAK,EAAE;AAFK,KARW;AAYzBC,IAAAA,IAAI,EAAE;AACJC,MAAAA,MAAM,EAAE;AADJ,KAZmB;AAezBC,IAAAA,YAAY,EAAE;AACZC,MAAAA,SAAS,YAAKb,KAAK,CAACc,EAAN,CAASC,OAAT,CAAiBC,EAAtB;AADG;AAfW,GAAZ;AAAA,CAAf;;AAoBA,eAAejB,MAAf","sourcesContent":["const styles = (theme) => ({\n  periodContainer: {\n    display: \"flex\",\n    flexDirection: \"column\",\n    justifyContent: \"center\",\n    alignItems: \"center\",\n    marginLeft: 8,\n  },\n  periodToggle: {\n    height: \"40px\",\n    width: \"40px\",\n  },\n  icon: {\n    cursor: \"pointer\",\n  },\n  subtractIcon: {\n    marginTop: `${theme.hv.spacing.xs}px`,\n  },\n});\n\nexport default styles;\n"],"file":"styles.js"}

package/dist/legacy/TimePicker/TimePicker.d.ts

@@ -0,0 +1,140 @@
+import { StandardProps } from "@material-ui/core";
+import { HvFormElementProps, HvBaseDropdownProps } from "@hitachivantara/uikit-react-core";
+
+export type HvTimePickerClassKey =
+  | "root"
+  | "input"
+  | "label"
+  | "timePopperContainer"
+  | "separator"
+  | "periodContainer"
+  | "formElementRoot"
+  | "dropdownPlaceholder"
+  | "iconBaseRoot"
+  | "error"
+  | "labelContainer"
+  | "description"
+  | "dropdownHeaderInvalid"
+  | "dropdownPlaceholderDisabled"
+  | "dropdownHeaderOpen";
+
+export interface HvTimePickerValue {
+  hours: number;
+  minutes: number;
+  seconds: number;
+  period?: "AM" | "PM";
+}
+export interface HvTimePickerProps
+  extends StandardProps<
+    HvFormElementProps,
+    HvTimePickerClassKey,
+    "onChange" | "value" | "defaultValue" | "readOnly"
+  > {
+  /**
+   * Id to be applied to the form element root node.
+   */
+  id?: string;
+
+  /**
+   * Current value of the form element.
+   */
+  value?: HvTimePickerValue | null | undefined;
+  /**
+   * When uncontrolled, defines the initial value.
+   */
+  defaultValue?: HvTimePickerValue | null | undefined;
+
+  /**
+   * The placeholder value when no time is selected.
+   */
+  placeholder?: string;
+
+  /**
+   * The placeholder of the hours input.
+   */
+  hoursPlaceholder?: string;
+  /**
+   * The placeholder of the minutes input.
+   */
+  minutesPlaceholder?: string;
+  /**
+   * The placeholder of the seconds input.
+   */
+  secondsPlaceholder?: string;
+
+  /**
+   * If the time should be presented in 12 or 24 hour format.
+   * If undefined, the component will use a format according to the passed locale.
+   * If defined, it will "override" the default value given by the locale
+   */
+  timeFormat?: "12" | "24" | 12 | 24 | undefined;
+  /**
+   * Locale that will provide the time format(12 or 24 hour format)
+   * It is "overwritten" by the timeFormat prop
+   */
+  locale?: string;
+
+  /**
+   * Allow starting with an empty value by not defaulting to the current time.
+   * This should become the default behavior when the component is promoted to core.
+   */
+  disableDefaultValue?: boolean;
+
+  /**
+   * Default value for the hours picker
+   * @deprecated use defaultValue instead
+   */
+  hours?: number;
+  /**
+   * Default value for the minutes picker
+   * @deprecated use defaultValue instead
+   */
+  minutes?: number;
+  /**
+   * Default value for the seconds picker
+   * @deprecated use defaultValue instead
+   */
+  seconds?: number;
+  /**
+   * Default value for the period picker
+   * @deprecated use defaultValue instead
+   */
+  period?: "AM" | "PM";
+
+  /**
+   * Callback function to be triggered when the input value is changed.
+   * It is invoked with a object param with the following props:
+   *  - hours (in a 24h format)
+   *  - minutes
+   *  - seconds
+   *  - period
+   *
+   * It is always invoked with the hours in a 24h format
+   */
+  onChange?: (timeIn24Format: HvTimePickerValue) => void;
+
+  /**
+   * Callback called when dropdown changes the expanded state.
+   *
+   * @param {object} event The event source of the callback.
+   * @param {boolean} open If the dropdown new state is open (`true`) or closed (`false`).
+   */
+  onToggle?: (event: Event, open: boolean) => void;
+
+  /**
+   * Disable the portal behavior. The children stay within it's parent DOM hierarchy.
+   */
+  disablePortal?: boolean;
+
+  /**
+   * Sets if the calendar container should follow the date picker input out of the screen or stay visible.
+   */
+  escapeWithReference?: boolean;
+
+  /**
+   * Extra properties to be passed to the timepicker dropdown.
+   */
+  dropdownProps?: HvBaseDropdownProps;
+}
+
+export default function HvTimePicker(props: HvTimePickerProps): JSX.Element | null;