@hitachivantara/uikit-react-core 3.63.0 → 3.66.0

package/dist/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,IAAMA,MAAM,GAAG,SAATA,MAAS,CAACC,KAAD;AAAA,SAAY;AACzBC,IAAAA,IAAI,EAAE;AACJC,MAAAA,OAAO,EAAE;AADL,KADmB;AAIzBC,IAAAA,MAAM,EAAE;AACNC,MAAAA,aAAa,EAAE;AADT,KAJiB;AAOzBC,IAAAA,GAAG,EAAE;AACHD,MAAAA,aAAa,EAAE;AADZ,KAPoB;AAUzBE,IAAAA,EAAE,EAAE;AACFC,MAAAA,GAAG,EAAEP,KAAK,CAACQ,SAAN,CAAgB,IAAhB;AADH,KAVqB;AAazBC,IAAAA,EAAE,EAAE;AACFF,MAAAA,GAAG,EAAEP,KAAK,CAACQ,SAAN,CAAgB,IAAhB;AADH,KAbqB;AAgBzBE,IAAAA,EAAE,EAAE;AACFH,MAAAA,GAAG,EAAEP,KAAK,CAACQ,SAAN,CAAgB,IAAhB;AADH,KAhBqB;AAmBzBG,IAAAA,EAAE,EAAE;AACFJ,MAAAA,GAAG,EAAEP,KAAK,CAACQ,SAAN,CAAgB,IAAhB;AADH,KAnBqB;AAsBzBI,IAAAA,EAAE,EAAE;AACFL,MAAAA,GAAG,EAAEP,KAAK,CAACQ,SAAN,CAAgB,IAAhB;AADH;AAtBqB,GAAZ;AAAA,CAAf;;eA2BeT,M","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/TimePicker/PeriodPicker/PeriodPicker.js

@@ -0,0 +1,112 @@
+"use strict";
+
+require("core-js/modules/es.array.iterator.js");
+
+require("core-js/modules/es.object.to-string.js");
+
+require("core-js/modules/es.string.iterator.js");
+
+require("core-js/modules/es.weak-map.js");
+
+require("core-js/modules/web.dom-collections.iterator.js");
+
+require("core-js/modules/es.object.get-own-property-descriptor.js");
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _clsx = _interopRequireDefault(require("clsx"));
+
+var _uikitReactIcons = require("@hitachivantara/uikit-react-icons");
+
+var _ = require("../..");
+
+var _enums = require("../enums");
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+var PeriodPicker = function PeriodPicker(props) {
+  var classes = props.classes,
+      period = props.period,
+      onChangePeriod = props.onChangePeriod;
+
+  var _useState = (0, _react.useState)(period !== null && period !== void 0 ? period : _enums.PeriodPickerOptions.AM),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+      currentPeriod = _useState2[0],
+      setCurrentPeriod = _useState2[1];
+  /**
+   * Gets the new value for the period
+   * @returns the new value for the period
+   * @memberof UnitTimePicker
+   */
+
+
+  var selectDifferentPeriod = function selectDifferentPeriod() {
+    return currentPeriod === _enums.PeriodPickerOptions.AM ? _enums.PeriodPickerOptions.PM : _enums.PeriodPickerOptions.AM;
+  };
+  /**
+   * Handles the period change
+   * @memberof PeriodPicker
+   */
+
+
+  var handleChangePeriod = function handleChangePeriod() {
+    var newPeriod = selectDifferentPeriod();
+    setCurrentPeriod(newPeriod);
+    onChangePeriod(newPeriod);
+  };
+  /**
+   * Renders the PeriodPicker
+   * @memberof UnitTimePicker
+   */
+
+
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: classes.periodContainer
+  }, /*#__PURE__*/_react.default.createElement(_uikitReactIcons.DropUpXS, {
+    className: classes.icon,
+    onClick: handleChangePeriod
+  }), /*#__PURE__*/_react.default.createElement(_.HvToggleButton, {
+    className: classes.periodToggle,
+    selected: currentPeriod === _enums.PeriodPickerOptions.PM,
+    onClick: handleChangePeriod
+  }, currentPeriod), /*#__PURE__*/_react.default.createElement(_uikitReactIcons.DropDownXS, {
+    className: (0, _clsx.default)(classes.icon, classes.subtractIcon),
+    onClick: handleChangePeriod
+  }));
+}; // }
+
+
+process.env.NODE_ENV !== "production" ? PeriodPicker.propTypes = {
+  /**
+   * A Jss Object used to override or extend the styles applied to the input/popper
+   */
+  classes: _propTypes.default.instanceOf(Object).isRequired,
+
+  /**
+   * Callback function called when the period value changes
+   */
+  onChangePeriod: _propTypes.default.func.isRequired,
+
+  /**
+   * Default period value
+   */
+  period: _propTypes.default.oneOf([_enums.PeriodPickerOptions.AM, _enums.PeriodPickerOptions.PM])
+} : void 0;
+var _default = PeriodPicker;
+exports.default = _default;
+//# sourceMappingURL=PeriodPicker.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/TimePicker/PeriodPicker/PeriodPicker.js"],"names":["PeriodPicker","props","classes","period","onChangePeriod","PeriodPickerOptions","AM","currentPeriod","setCurrentPeriod","selectDifferentPeriod","PM","handleChangePeriod","newPeriod","periodContainer","icon","periodToggle","subtractIcon","propTypes","PropTypes","instanceOf","Object","isRequired","func","oneOf"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;;;AAEA,IAAMA,YAAY,GAAG,SAAfA,YAAe,CAACC,KAAD,EAAW;AAC9B,MAAQC,OAAR,GAA4CD,KAA5C,CAAQC,OAAR;AAAA,MAAiBC,MAAjB,GAA4CF,KAA5C,CAAiBE,MAAjB;AAAA,MAAyBC,cAAzB,GAA4CH,KAA5C,CAAyBG,cAAzB;;AACA,kBAA0C,qBAASD,MAAT,aAASA,MAAT,cAASA,MAAT,GAAmBE,2BAAoBC,EAAvC,CAA1C;AAAA;AAAA,MAAOC,aAAP;AAAA,MAAsBC,gBAAtB;AAEA;AACF;AACA;AACA;AACA;;;AACE,MAAMC,qBAAqB,GAAG,SAAxBA,qBAAwB,GAAM;AAClC,WAAOF,aAAa,KAAKF,2BAAoBC,EAAtC,GACHD,2BAAoBK,EADjB,GAEHL,2BAAoBC,EAFxB;AAGD,GAJD;AAMA;AACF;AACA;AACA;;;AACE,MAAMK,kBAAkB,GAAG,SAArBA,kBAAqB,GAAM;AAC/B,QAAMC,SAAS,GAAGH,qBAAqB,EAAvC;AACAD,IAAAA,gBAAgB,CAACI,SAAD,CAAhB;AACAR,IAAAA,cAAc,CAACQ,SAAD,CAAd;AACD,GAJD;AAMA;AACF;AACA;AACA;;;AACE,sBACE;AAAK,IAAA,SAAS,EAAEV,OAAO,CAACW;AAAxB,kBACE,6BAAC,yBAAD;AAAQ,IAAA,SAAS,EAAEX,OAAO,CAACY,IAA3B;AAAiC,IAAA,OAAO,EAAEH;AAA1C,IADF,eAEE,6BAAC,gBAAD;AACE,IAAA,SAAS,EAAET,OAAO,CAACa,YADrB;AAEE,IAAA,QAAQ,EAAER,aAAa,KAAKF,2BAAoBK,EAFlD;AAGE,IAAA,OAAO,EAAEC;AAHX,KAKGJ,aALH,CAFF,eASE,6BAAC,2BAAD;AAAU,IAAA,SAAS,EAAE,mBAAKL,OAAO,CAACY,IAAb,EAAmBZ,OAAO,CAACc,YAA3B,CAArB;AAA+D,IAAA,OAAO,EAAEL;AAAxE,IATF,CADF;AAaD,CA1CD,C,CA2CA;;;AAEA,wCAAAX,YAAY,CAACiB,SAAb,GAAyB;AACvB;AACF;AACA;AACEf,EAAAA,OAAO,EAAEgB,mBAAUC,UAAV,CAAqBC,MAArB,EAA6BC,UAJf;;AAKvB;AACF;AACA;AACEjB,EAAAA,cAAc,EAAEc,mBAAUI,IAAV,CAAeD,UARR;;AASvB;AACF;AACA;AACElB,EAAAA,MAAM,EAAEe,mBAAUK,KAAV,CAAgB,CAAClB,2BAAoBC,EAArB,EAAyBD,2BAAoBK,EAA7C,CAAhB;AAZe,CAAzB;eAeeV,Y","sourcesContent":["import React, { useState } from \"react\";\nimport PropTypes from \"prop-types\";\nimport clsx from \"clsx\";\nimport { DropUpXS as UpIcon, DropDownXS as DownIcon } from \"@hitachivantara/uikit-react-icons\";\nimport { HvToggleButton } from \"../..\";\nimport { PeriodPickerOptions } from \"../enums\";\n\nconst PeriodPicker = (props) => {\n  const { classes, period, onChangePeriod } = props;\n  const [currentPeriod, setCurrentPeriod] = useState(period ?? PeriodPickerOptions.AM);\n\n  /**\n   * Gets the new value for the period\n   * @returns the new value for the period\n   * @memberof UnitTimePicker\n   */\n  const selectDifferentPeriod = () => {\n    return currentPeriod === PeriodPickerOptions.AM\n      ? PeriodPickerOptions.PM\n      : PeriodPickerOptions.AM;\n  };\n\n  /**\n   * Handles the period change\n   * @memberof PeriodPicker\n   */\n  const handleChangePeriod = () => {\n    const newPeriod = selectDifferentPeriod();\n    setCurrentPeriod(newPeriod);\n    onChangePeriod(newPeriod);\n  };\n\n  /**\n   * Renders the PeriodPicker\n   * @memberof UnitTimePicker\n   */\n  return (\n    <div className={classes.periodContainer}>\n      <UpIcon className={classes.icon} onClick={handleChangePeriod} />\n      <HvToggleButton\n        className={classes.periodToggle}\n        selected={currentPeriod === PeriodPickerOptions.PM}\n        onClick={handleChangePeriod}\n      >\n        {currentPeriod}\n      </HvToggleButton>\n      <DownIcon className={clsx(classes.icon, classes.subtractIcon)} onClick={handleChangePeriod} />\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/TimePicker/PeriodPicker/index.js

@@ -0,0 +1,21 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _withStyles = _interopRequireDefault(require("@material-ui/core/styles/withStyles"));
+
+var _styles = _interopRequireDefault(require("./styles"));
+
+var _PeriodPicker = _interopRequireDefault(require("./PeriodPicker"));
+
+var _default = (0, _withStyles.default)(_styles.default, {
+  name: "HvTimePickerPeriodPicker"
+})(_PeriodPicker.default);
+
+exports.default = _default;
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/TimePicker/PeriodPicker/index.js"],"names":["styles","name","PeriodPicker"],"mappings":";;;;;;;;;AAAA;;AACA;;AACA;;eAEe,yBAAWA,eAAX,EAAmB;AAAEC,EAAAA,IAAI,EAAE;AAAR,CAAnB,EAAyDC,qBAAzD,C","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/TimePicker/PeriodPicker/styles.js

@@ -0,0 +1,32 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+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")
+    }
+  };
+};
+
+var _default = styles;
+exports.default = _default;
+//# sourceMappingURL=styles.js.map

package/dist/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;;eAoBejB,M","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/TimePicker/TimePicker.d.ts

@@ -0,0 +1,140 @@
+import { StandardProps } from "@material-ui/core";
+import { HvFormElementProps, HvBaseDropdownProps } from "..";
+
+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;