@hitachivantara/uikit-react-core 5.15.0 → 5.16.0

package/dist/esm/components/TimePicker/Unit/Unit.js

@@ -0,0 +1,72 @@
+import { ClassNames } from "@emotion/react";
+import { DropUpXS, DropDownXS } from "@hitachivantara/uikit-react-icons";
+import { theme } from "@hitachivantara/uikit-styles";
+import { styles } from "./Unit.styles.js";
+import { jsx, jsxs } from "@emotion/react/jsx-runtime";
+import { HvToggleButton } from "../../ToggleButton/ToggleButton.js";
+import { HvInput } from "../../Input/Input.js";
+const Unit = ({
+  id,
+  state,
+  segment,
+  placeholder: placeholderProp,
+  onChange,
+  onAdd,
+  onSub
+}) => {
+  const {
+    type,
+    text
+  } = segment;
+  const placeholder = placeholderProp ?? segment.placeholder;
+  return /* @__PURE__ */ jsx(ClassNames, {
+    children: ({
+      css
+    }) => /* @__PURE__ */ jsxs("div", {
+      className: css(styles.root),
+      children: [type !== "literal" && /* @__PURE__ */ jsx(DropUpXS, {
+        onClick: onAdd
+      }), type === "literal" && /* @__PURE__ */ jsx("div", {
+        className: css(styles.separator),
+        children: text
+      }), type === "dayPeriod" && /* @__PURE__ */ jsx(HvToggleButton, {
+        className: css(styles.periodToggle),
+        onClick: onAdd,
+        children: text
+      }), ["hour", "minute", "second"].includes(type) && /* @__PURE__ */ jsx(HvInput, {
+        id,
+        disableClear: true,
+        style: {
+          ...theme.typography.title3
+        },
+        classes: {
+          input: css(styles.input),
+          root: css(styles.inputContainer),
+          inputBorderContainer: css(styles.inputBorderContainer),
+          inputRoot: css(styles.inputRoot)
+        },
+        onKeyDown: (event) => {
+          if (event.key === "Enter") {
+            event.preventDefault();
+            event.stopPropagation();
+          }
+        },
+        required: true,
+        status: state.validationState,
+        value: text.padStart(2, "0"),
+        onChange,
+        placeholder,
+        inputProps: {
+          autoComplete: "off",
+          type: "number"
+        }
+      }), type !== "literal" && /* @__PURE__ */ jsx(DropDownXS, {
+        onClick: onSub
+      })]
+    })
+  });
+};
+export {
+  Unit
+};
+//# sourceMappingURL=Unit.js.map

package/dist/esm/components/TimePicker/Unit/Unit.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Unit.js","sources":["../../../../../src/components/TimePicker/Unit/Unit.tsx"],"sourcesContent":["import { KeyboardEvent } from \"react\";\nimport { ClassNames } from \"@emotion/react\";\nimport { DateFieldState, DateSegment } from \"@react-stately/datepicker\";\nimport {\n  DropDownXS as SubtractTimeIcon,\n  DropUpXS as AddTimeIcon,\n} from \"@hitachivantara/uikit-react-icons\";\nimport { HvInput, HvInputProps, HvToggleButton, theme } from \"../../..\";\nimport { styles } from \"./Unit.styles\";\n\ninterface UnitProps {\n  id?: string;\n  state: DateFieldState;\n  segment: DateSegment;\n  placeholder?: string;\n  /** Called when the value changes */\n  onChange?: HvInputProps[\"onChange\"];\n  /** Called when the up/add arrow is pressed */\n  onAdd?: () => void;\n  /** Called when the down/subtract arrow is pressed */\n  onSub?: () => void;\n}\n\nexport const Unit = ({\n  id,\n  state,\n  segment,\n  placeholder: placeholderProp,\n  onChange,\n  onAdd,\n  onSub,\n}: UnitProps) => {\n  const { type, text } = segment;\n  const placeholder = placeholderProp ?? segment.placeholder;\n\n  return (\n    <ClassNames>\n      {({ css }) => (\n        <div className={css(styles.root)}>\n          {type !== \"literal\" && <AddTimeIcon onClick={onAdd} />}\n          {type === \"literal\" && (\n            <div className={css(styles.separator)}>{text}</div>\n          )}\n          {type === \"dayPeriod\" && (\n            <HvToggleButton\n              className={css(styles.periodToggle)}\n              onClick={onAdd}\n            >\n              {text}\n            </HvToggleButton>\n          )}\n          {[\"hour\", \"minute\", \"second\"].includes(type) && (\n            <HvInput\n              id={id}\n              disableClear\n              style={{\n                ...theme.typography.title3,\n              }}\n              classes={{\n                input: css(styles.input),\n                root: css(styles.inputContainer),\n                inputBorderContainer: css(styles.inputBorderContainer),\n                inputRoot: css(styles.inputRoot),\n              }}\n              onKeyDown={(event) => {\n                if ((event as KeyboardEvent).key === \"Enter\") {\n                  event.preventDefault();\n                  event.stopPropagation();\n                }\n              }}\n              required\n              status={state.validationState}\n              value={text.padStart(2, \"0\")}\n              onChange={onChange}\n              placeholder={placeholder}\n              inputProps={{ autoComplete: \"off\", type: \"number\" }}\n            />\n          )}\n          {type !== \"literal\" && <SubtractTimeIcon onClick={onSub} />}\n        </div>\n      )}\n    </ClassNames>\n  );\n};\n"],"names":["Unit","id","state","segment","placeholder","placeholderProp","onChange","onAdd","onSub","type","text","ClassNames","children","css","className","styles","root","AddTimeIcon","onClick","separator","HvToggleButton","periodToggle","includes","_jsx","HvInput","disableClear","style","theme","typography","title3","classes","input","inputContainer","inputBorderContainer","inputRoot","onKeyDown","event","key","preventDefault","stopPropagation","required","status","validationState","value","padStart","inputProps","autoComplete","SubtractTimeIcon"],"mappings":";;;;;;;AAuBO,MAAMA,OAAOA,CAAC;AAAA,EACnBC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC,aAAaC;AAAAA,EACbC;AAAAA,EACAC;AAAAA,EACAC;AACS,MAAM;AACT,QAAA;AAAA,IAAEC;AAAAA,IAAMC;AAAAA,EAASP,IAAAA;AACjBC,QAAAA,cAAcC,mBAAmBF,QAAQC;AAE/C,6BACGO,YAAU;AAAA,IAAAC,UACRA,CAAC;AAAA,MAAEC;AAAAA,IAAAA,2BACF,OAAA;AAAA,MAAKC,WAAWD,IAAIE,OAAOC,IAAI;AAAA,MAAEJ,WAC9BH,SAAS,iCAAcQ,UAAW;AAAA,QAACC,SAASX;AAAAA,MAAQ,CAAA,GACpDE,SAAS,iCACR,OAAA;AAAA,QAAKK,WAAWD,IAAIE,OAAOI,SAAS;AAAA,QAAEP,UAAEF;AAAAA,MAAU,CAAA,GAEnDD,SAAS,mCACPW,gBAAc;AAAA,QACbN,WAAWD,IAAIE,OAAOM,YAAY;AAAA,QAClCH,SAASX;AAAAA,QAAMK,UAEdF;AAAAA,MAAAA,CACa,GAEjB,CAAC,QAAQ,UAAU,QAAQ,EAAEY,SAASb,IAAI,KACzCc,oBAACC,SAAO;AAAA,QACNvB;AAAAA,QACAwB,cAAY;AAAA,QACZC,OAAO;AAAA,UACL,GAAGC,MAAMC,WAAWC;AAAAA,QACtB;AAAA,QACAC,SAAS;AAAA,UACPC,OAAOlB,IAAIE,OAAOgB,KAAK;AAAA,UACvBf,MAAMH,IAAIE,OAAOiB,cAAc;AAAA,UAC/BC,sBAAsBpB,IAAIE,OAAOkB,oBAAoB;AAAA,UACrDC,WAAWrB,IAAIE,OAAOmB,SAAS;AAAA,QACjC;AAAA,QACAC,WAAYC,CAAU,UAAA;AACfA,cAAAA,MAAwBC,QAAQ,SAAS;AAC5CD,kBAAME,eAAe;AACrBF,kBAAMG,gBAAgB;AAAA,UACxB;AAAA,QACF;AAAA,QACAC,UAAQ;AAAA,QACRC,QAAQvC,MAAMwC;AAAAA,QACdC,OAAOjC,KAAKkC,SAAS,GAAG,GAAG;AAAA,QAC3BtC;AAAAA,QACAF;AAAAA,QACAyC,YAAY;AAAA,UAAEC,cAAc;AAAA,UAAOrC,MAAM;AAAA,QAAS;AAAA,MACnD,CAAA,GAEFA,SAAS,iCAAcsC,YAAgB;AAAA,QAAC7B,SAASV;AAAAA,MAAAA,CAAQ,CAAC;AAAA,IAAA,CACxD;AAAA,EAAA,CAEG;AAEhB;"}

package/dist/esm/components/TimePicker/Unit/Unit.styles.js

@@ -0,0 +1,56 @@
+import { theme } from "@hitachivantara/uikit-styles";
+const styles = {
+  root: {
+    display: "flex",
+    flexDirection: "column",
+    justifyContent: "center",
+    alignItems: "center",
+    textAlign: "center",
+    ...theme.typography.sTitle
+  },
+  separator: {
+    width: 8
+  },
+  periodToggle: {
+    height: 40,
+    width: 40
+  },
+  element: {
+    display: "flex",
+    justifyContent: "center",
+    alignItems: "center",
+    height: 40,
+    width: 40
+  },
+  input: {
+    ...theme.typography.sTitle,
+    fontWeight: 600,
+    textAlign: "center",
+    height: 40,
+    width: 40,
+    padding: 0,
+    margin: 0,
+    "&::placeholder": {
+      fontSize: 16,
+      fontWeight: 600
+    }
+  },
+  inputRoot: {
+    width: 40,
+    height: 40
+  },
+  subtractIcon: {
+    marginTop: theme.space.xs
+  },
+  inputContainer: {
+    minWidth: 40,
+    maxWidth: 40
+  },
+  inputBorderContainer: {
+    top: 40
+  }
+};
+export {
+  styles
+};
+//# sourceMappingURL=Unit.styles.js.map

package/dist/esm/components/TimePicker/Unit/Unit.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Unit.styles.js","sources":["../../../../../src/components/TimePicker/Unit/Unit.styles.ts"],"sourcesContent":["import { CSSInterpolation } from \"@emotion/css\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nexport const styles = {\n  root: {\n    display: \"flex\",\n    flexDirection: \"column\",\n    justifyContent: \"center\",\n    alignItems: \"center\",\n    textAlign: \"center\",\n    ...theme.typography.sTitle,\n  },\n\n  separator: {\n    width: 8,\n  },\n\n  periodToggle: {\n    height: 40,\n    width: 40,\n  },\n\n  element: {\n    display: \"flex\",\n    justifyContent: \"center\",\n    alignItems: \"center\",\n    height: 40,\n    width: 40,\n  },\n\n  input: {\n    ...theme.typography.sTitle,\n    fontWeight: 600,\n    textAlign: \"center\",\n    height: 40,\n    width: 40,\n    padding: 0,\n    margin: 0,\n    \"&::placeholder\": {\n      fontSize: 16,\n      fontWeight: 600,\n    },\n  },\n  inputRoot: {\n    width: 40,\n    height: 40,\n  },\n\n  subtractIcon: {\n    marginTop: theme.space.xs,\n  },\n  inputContainer: {\n    minWidth: 40,\n    maxWidth: 40,\n  },\n  inputBorderContainer: {\n    top: 40,\n  },\n} satisfies Record<string, CSSInterpolation>;\n"],"names":["styles","root","display","flexDirection","justifyContent","alignItems","textAlign","theme","typography","sTitle","separator","width","periodToggle","height","element","input","fontWeight","padding","margin","fontSize","inputRoot","subtractIcon","marginTop","space","xs","inputContainer","minWidth","maxWidth","inputBorderContainer","top"],"mappings":";AAGO,MAAMA,SAAS;AAAA,EACpBC,MAAM;AAAA,IACJC,SAAS;AAAA,IACTC,eAAe;AAAA,IACfC,gBAAgB;AAAA,IAChBC,YAAY;AAAA,IACZC,WAAW;AAAA,IACX,GAAGC,MAAMC,WAAWC;AAAAA,EACtB;AAAA,EAEAC,WAAW;AAAA,IACTC,OAAO;AAAA,EACT;AAAA,EAEAC,cAAc;AAAA,IACZC,QAAQ;AAAA,IACRF,OAAO;AAAA,EACT;AAAA,EAEAG,SAAS;AAAA,IACPZ,SAAS;AAAA,IACTE,gBAAgB;AAAA,IAChBC,YAAY;AAAA,IACZQ,QAAQ;AAAA,IACRF,OAAO;AAAA,EACT;AAAA,EAEAI,OAAO;AAAA,IACL,GAAGR,MAAMC,WAAWC;AAAAA,IACpBO,YAAY;AAAA,IACZV,WAAW;AAAA,IACXO,QAAQ;AAAA,IACRF,OAAO;AAAA,IACPM,SAAS;AAAA,IACTC,QAAQ;AAAA,IACR,kBAAkB;AAAA,MAChBC,UAAU;AAAA,MACVH,YAAY;AAAA,IACd;AAAA,EACF;AAAA,EACAI,WAAW;AAAA,IACTT,OAAO;AAAA,IACPE,QAAQ;AAAA,EACV;AAAA,EAEAQ,cAAc;AAAA,IACZC,WAAWf,MAAMgB,MAAMC;AAAAA,EACzB;AAAA,EACAC,gBAAgB;AAAA,IACdC,UAAU;AAAA,IACVC,UAAU;AAAA,EACZ;AAAA,EACAC,sBAAsB;AAAA,IACpBC,KAAK;AAAA,EACP;AACF;"}