@hitachivantara/uikit-react-core 3.63.0 → 3.66.0

package/dist/modern/TimePicker/PeriodPicker/PeriodPicker.js

@@ -0,0 +1,75 @@
+import "core-js/modules/web.dom-collections.iterator.js";
+import React, { useState } from "react";
+import PropTypes from "prop-types";
+import clsx from "clsx";
+import { DropUpXS as UpIcon, DropDownXS as DownIcon } from "@hitachivantara/uikit-react-icons";
+import { HvToggleButton } from "../..";
+import { PeriodPickerOptions } from "../enums";
+
+const PeriodPicker = props => {
+  const {
+    classes,
+    period,
+    onChangePeriod
+  } = props;
+  const [currentPeriod, setCurrentPeriod] = useState(period !== null && period !== void 0 ? period : PeriodPickerOptions.AM);
+  /**
+   * Gets the new value for the period
+   * @returns the new value for the period
+   * @memberof UnitTimePicker
+   */
+
+  const selectDifferentPeriod = () => {
+    return currentPeriod === PeriodPickerOptions.AM ? PeriodPickerOptions.PM : PeriodPickerOptions.AM;
+  };
+  /**
+   * Handles the period change
+   * @memberof PeriodPicker
+   */
+
+
+  const handleChangePeriod = () => {
+    const newPeriod = selectDifferentPeriod();
+    setCurrentPeriod(newPeriod);
+    onChangePeriod(newPeriod);
+  };
+  /**
+   * Renders the PeriodPicker
+   * @memberof UnitTimePicker
+   */
+
+
+  return /*#__PURE__*/React.createElement("div", {
+    className: classes.periodContainer
+  }, /*#__PURE__*/React.createElement(UpIcon, {
+    className: classes.icon,
+    onClick: handleChangePeriod
+  }), /*#__PURE__*/React.createElement(HvToggleButton, {
+    className: classes.periodToggle,
+    selected: currentPeriod === PeriodPickerOptions.PM,
+    onClick: handleChangePeriod
+  }, currentPeriod), /*#__PURE__*/React.createElement(DownIcon, {
+    className: clsx(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.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])
+} : void 0;
+export default PeriodPicker;
+//# sourceMappingURL=PeriodPicker.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/TimePicker/PeriodPicker/PeriodPicker.js"],"names":["React","useState","PropTypes","clsx","DropUpXS","UpIcon","DropDownXS","DownIcon","HvToggleButton","PeriodPickerOptions","PeriodPicker","props","classes","period","onChangePeriod","currentPeriod","setCurrentPeriod","AM","selectDifferentPeriod","PM","handleChangePeriod","newPeriod","periodContainer","icon","periodToggle","subtractIcon","propTypes","instanceOf","Object","isRequired","func","oneOf"],"mappings":";AAAA,OAAOA,KAAP,IAAgBC,QAAhB,QAAgC,OAAhC;AACA,OAAOC,SAAP,MAAsB,YAAtB;AACA,OAAOC,IAAP,MAAiB,MAAjB;AACA,SAASC,QAAQ,IAAIC,MAArB,EAA6BC,UAAU,IAAIC,QAA3C,QAA2D,mCAA3D;AACA,SAASC,cAAT,QAA+B,OAA/B;AACA,SAASC,mBAAT,QAAoC,UAApC;;AAEA,MAAMC,YAAY,GAAIC,KAAD,IAAW;AAC9B,QAAM;AAAEC,IAAAA,OAAF;AAAWC,IAAAA,MAAX;AAAmBC,IAAAA;AAAnB,MAAsCH,KAA5C;AACA,QAAM,CAACI,aAAD,EAAgBC,gBAAhB,IAAoCf,QAAQ,CAACY,MAAD,aAACA,MAAD,cAACA,MAAD,GAAWJ,mBAAmB,CAACQ,EAA/B,CAAlD;AAEA;AACF;AACA;AACA;AACA;;AACE,QAAMC,qBAAqB,GAAG,MAAM;AAClC,WAAOH,aAAa,KAAKN,mBAAmB,CAACQ,EAAtC,GACHR,mBAAmB,CAACU,EADjB,GAEHV,mBAAmB,CAACQ,EAFxB;AAGD,GAJD;AAMA;AACF;AACA;AACA;;;AACE,QAAMG,kBAAkB,GAAG,MAAM;AAC/B,UAAMC,SAAS,GAAGH,qBAAqB,EAAvC;AACAF,IAAAA,gBAAgB,CAACK,SAAD,CAAhB;AACAP,IAAAA,cAAc,CAACO,SAAD,CAAd;AACD,GAJD;AAMA;AACF;AACA;AACA;;;AACE,sBACE;AAAK,IAAA,SAAS,EAAET,OAAO,CAACU;AAAxB,kBACE,oBAAC,MAAD;AAAQ,IAAA,SAAS,EAAEV,OAAO,CAACW,IAA3B;AAAiC,IAAA,OAAO,EAAEH;AAA1C,IADF,eAEE,oBAAC,cAAD;AACE,IAAA,SAAS,EAAER,OAAO,CAACY,YADrB;AAEE,IAAA,QAAQ,EAAET,aAAa,KAAKN,mBAAmB,CAACU,EAFlD;AAGE,IAAA,OAAO,EAAEC;AAHX,KAKGL,aALH,CAFF,eASE,oBAAC,QAAD;AAAU,IAAA,SAAS,EAAEZ,IAAI,CAACS,OAAO,CAACW,IAAT,EAAeX,OAAO,CAACa,YAAvB,CAAzB;AAA+D,IAAA,OAAO,EAAEL;AAAxE,IATF,CADF;AAaD,CA1CD,C,CA2CA;;;AAEA,wCAAAV,YAAY,CAACgB,SAAb,GAAyB;AACvB;AACF;AACA;AACEd,EAAAA,OAAO,EAAEV,SAAS,CAACyB,UAAV,CAAqBC,MAArB,EAA6BC,UAJf;;AAKvB;AACF;AACA;AACEf,EAAAA,cAAc,EAAEZ,SAAS,CAAC4B,IAAV,CAAeD,UARR;;AASvB;AACF;AACA;AACEhB,EAAAA,MAAM,EAAEX,SAAS,CAAC6B,KAAV,CAAgB,CAACtB,mBAAmB,CAACQ,EAArB,EAAyBR,mBAAmB,CAACU,EAA7C,CAAhB;AAZe,CAAzB;AAeA,eAAeT,YAAf","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/modern/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/modern/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/modern/TimePicker/PeriodPicker/styles.js

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

package/dist/modern/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,MAAMA,MAAM,GAAIC,KAAD,KAAY;AACzBC,EAAAA,eAAe,EAAE;AACfC,IAAAA,OAAO,EAAE,MADM;AAEfC,IAAAA,aAAa,EAAE,QAFA;AAGfC,IAAAA,cAAc,EAAE,QAHD;AAIfC,IAAAA,UAAU,EAAE,QAJG;AAKfC,IAAAA,UAAU,EAAE;AALG,GADQ;AAQzBC,EAAAA,YAAY,EAAE;AACZC,IAAAA,MAAM,EAAE,MADI;AAEZC,IAAAA,KAAK,EAAE;AAFK,GARW;AAYzBC,EAAAA,IAAI,EAAE;AACJC,IAAAA,MAAM,EAAE;AADJ,GAZmB;AAezBC,EAAAA,YAAY,EAAE;AACZC,IAAAA,SAAS,EAAG,GAAEb,KAAK,CAACc,EAAN,CAASC,OAAT,CAAiBC,EAAG;AADtB;AAfW,CAAZ,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/modern/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;