@activecollab/components 2.0.167 → 2.0.169

package/dist/esm/components/Input/InputTime.js

@@ -0,0 +1,107 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import React, { useCallback, useEffect, useState } from "react";
+import classNames from "classnames";
+import nlp from "compromise";
+import plg from "compromise-dates";
+import moment from "moment";
+import styled from "styled-components";
+import { isValidTime } from "../../utils/timeUtils";
+import { ComboBox } from "../ComboBox/ComboBox";
+nlp.plugin(plg);
+export const StyledInputTimeWrapper = styled.div.withConfig({
+  displayName: "InputTime__StyledInputTimeWrapper",
+  componentId: "sc-71akdh-0"
+})(["max-width:176px;flex:1;& .c-combo-box--list{min-width:176px;}"]);
+const renderOption = option => {
+  return /*#__PURE__*/React.createElement("div", {
+    id: option.id
+  }, option.name);
+};
+export const InputTime = _ref => {
+  let {
+    mode = "24",
+    selected: defaultSelected,
+    min = "00:00",
+    max = "23:45",
+    onChange,
+    step = 15,
+    size,
+    className,
+    placeholder,
+    triggerMode,
+    disabled,
+    invalid,
+    ...rest
+  } = _ref;
+  const [selected, setSelected] = useState(defaultSelected || "");
+  const [isOpen, setIsOpen] = useState(false);
+  const generateTimeOptions = () => {
+    const minTime = moment(isValidTime(min) ? min : "00:00", "HH:mm");
+    const maxTime = moment(isValidTime(max) ? max : "23:45", "HH:mm");
+    const options = [];
+    const currentTime = minTime.clone();
+    while (currentTime.isSameOrBefore(maxTime)) {
+      options.push({
+        id: currentTime.format("HH:mm"),
+        name: currentTime.format(mode === "12" ? "hh:mm A" : "HH:mm")
+      });
+      currentTime.add(step, "minutes");
+    }
+    return options;
+  };
+  const timeOptions = generateTimeOptions();
+  const handleInputChange = useCallback(text => {
+    const doc = nlp(text);
+    const parsed = doc.times().get()[0];
+    if (parsed && parsed["24h"] && parsed["24h"] !== selected) {
+      const value = moment(parsed).format("HH:mm");
+      if (timeOptions.some(option => option.id === value)) {
+        setSelected(value);
+        onChange == null || onChange(value);
+        setIsOpen(false);
+      }
+    }
+  }, [onChange, selected, timeOptions]);
+  const handleChange = e => {
+    setSelected(e);
+    onChange == null || onChange(e);
+  };
+  const handleOpen = () => {
+    setIsOpen(true);
+  };
+  const handleClose = () => {
+    setIsOpen(false);
+  };
+  useEffect(() => {
+    if (isOpen && selected) {
+      var _document$getElementB;
+      const selectedItem = (_document$getElementB = document.getElementById(selected)) == null ? void 0 : _document$getElementB.parentElement;
+      selectedItem == null || selectedItem.scrollIntoView({
+        behavior: "smooth",
+        block: "center"
+      });
+    }
+  }, [isOpen, selected]);
+  return /*#__PURE__*/React.createElement(StyledInputTimeWrapper, {
+    className: classNames("c-input-time", className)
+  }, /*#__PURE__*/React.createElement(ComboBox, _extends({}, rest, {
+    options: timeOptions,
+    open: isOpen,
+    disabledInternalSort: true,
+    selected: selected,
+    keepSameOptionsOrder: true,
+    onInputChange: handleInputChange,
+    onChange: handleChange,
+    forceCloseMenu: true,
+    placeholder: placeholder,
+    renderOption: renderOption,
+    autoHeightMax: 226,
+    size: size,
+    onClose: handleClose,
+    onOpen: handleOpen,
+    triggerMode: triggerMode,
+    disabled: disabled,
+    invalid: invalid
+  })));
+};
+//# sourceMappingURL=InputTime.js.map

package/dist/esm/components/Input/InputTime.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"InputTime.js","names":["React","useCallback","useEffect","useState","classNames","nlp","plg","moment","styled","isValidTime","ComboBox","plugin","StyledInputTimeWrapper","div","withConfig","displayName","componentId","renderOption","option","createElement","id","name","InputTime","_ref","mode","selected","defaultSelected","min","max","onChange","step","size","className","placeholder","triggerMode","disabled","invalid","rest","setSelected","isOpen","setIsOpen","generateTimeOptions","minTime","maxTime","options","currentTime","clone","isSameOrBefore","push","format","add","timeOptions","handleInputChange","text","doc","parsed","times","get","value","some","handleChange","e","handleOpen","handleClose","_document$getElementB","selectedItem","document","getElementById","parentElement","scrollIntoView","behavior","block","_extends","open","disabledInternalSort","keepSameOptionsOrder","onInputChange","forceCloseMenu","autoHeightMax","onClose","onOpen"],"sources":["../../../../src/components/Input/InputTime.tsx"],"sourcesContent":["import React, { useCallback, useEffect, useState } from \"react\";\n\nimport classNames from \"classnames\";\nimport nlp from \"compromise\";\nimport plg, { DatesMethods } from \"compromise-dates\";\nimport moment from \"moment\";\nimport styled from \"styled-components\";\n\nimport { InputMode, InputSize } from \"./types\";\nimport { isValidTime } from \"../../utils/timeUtils\";\nimport { ComboBox } from \"../ComboBox/ComboBox\";\nimport { IOptionItemProps } from \"../Select/Option\";\nimport { Time24HourFormat } from \"../SelectTime\";\n\nnlp.plugin(plg);\n\nexport const StyledInputTimeWrapper = styled.div`\n  max-width: 176px;\n  flex: 1;\n\n  & .c-combo-box--list {\n    min-width: 176px;\n  }\n`;\n\nexport interface InputTimeProps {\n  mode?: \"12\" | \"24\";\n  selected?: Time24HourFormat;\n  min?: Time24HourFormat;\n  max?: Time24HourFormat;\n  onChange?: (val: string) => void;\n  className?: string;\n  placeholder?: string;\n  size?: InputSize;\n  step?: 1 | 5 | 15 | 30 | 60;\n  triggerMode?: InputMode;\n  disabled?: boolean;\n  invalid?: boolean;\n}\n\nconst renderOption = (option) => {\n  return <div id={option.id}>{option.name}</div>;\n};\n\nexport const InputTime: React.FC<InputTimeProps> = ({\n  mode = \"24\",\n  selected: defaultSelected,\n  min = \"00:00\",\n  max = \"23:45\",\n  onChange,\n  step = 15,\n  size,\n  className,\n  placeholder,\n  triggerMode,\n  disabled,\n  invalid,\n  ...rest\n}) => {\n  const [selected, setSelected] = useState<string>(defaultSelected || \"\");\n  const [isOpen, setIsOpen] = useState(false);\n\n  const generateTimeOptions = (): IOptionItemProps[] => {\n    const minTime = moment(isValidTime(min) ? min : \"00:00\", \"HH:mm\");\n    const maxTime = moment(isValidTime(max) ? max : \"23:45\", \"HH:mm\");\n    const options: IOptionItemProps[] = [];\n\n    const currentTime = minTime.clone();\n    while (currentTime.isSameOrBefore(maxTime)) {\n      options.push({\n        id: currentTime.format(\"HH:mm\"),\n        name: currentTime.format(mode === \"12\" ? \"hh:mm A\" : \"HH:mm\"),\n      });\n      currentTime.add(step, \"minutes\");\n    }\n\n    return options;\n  };\n\n  const timeOptions = generateTimeOptions();\n\n  const handleInputChange = useCallback(\n    (text: string) => {\n      const doc = nlp<DatesMethods>(text);\n      const parsed = doc.times().get()[0];\n      if (parsed && parsed[\"24h\"] && parsed[\"24h\"] !== selected) {\n        const value = moment(parsed).format(\"HH:mm\");\n        if (timeOptions.some((option) => option.id === value)) {\n          setSelected(value);\n          onChange?.(value);\n          setIsOpen(false);\n        }\n      }\n    },\n    [onChange, selected, timeOptions]\n  );\n\n  const handleChange = (e) => {\n    setSelected(e);\n    onChange?.(e);\n  };\n\n  const handleOpen = () => {\n    setIsOpen(true);\n  };\n\n  const handleClose = () => {\n    setIsOpen(false);\n  };\n\n  useEffect(() => {\n    if (isOpen && selected) {\n      const selectedItem = document.getElementById(selected)?.parentElement;\n      selectedItem?.scrollIntoView({ behavior: \"smooth\", block: \"center\" });\n    }\n  }, [isOpen, selected]);\n\n  return (\n    <StyledInputTimeWrapper className={classNames(\"c-input-time\", className)}>\n      <ComboBox\n        {...rest}\n        options={timeOptions}\n        open={isOpen}\n        disabledInternalSort\n        selected={selected}\n        keepSameOptionsOrder\n        onInputChange={handleInputChange}\n        onChange={handleChange}\n        forceCloseMenu\n        placeholder={placeholder}\n        renderOption={renderOption}\n        autoHeightMax={226}\n        size={size}\n        onClose={handleClose}\n        onOpen={handleOpen}\n        triggerMode={triggerMode}\n        disabled={disabled}\n        invalid={invalid}\n      />\n    </StyledInputTimeWrapper>\n  );\n};\n"],"mappings":";AAAA,OAAOA,KAAK,IAAIC,WAAW,EAAEC,SAAS,EAAEC,QAAQ,QAAQ,OAAO;AAE/D,OAAOC,UAAU,MAAM,YAAY;AACnC,OAAOC,GAAG,MAAM,YAAY;AAC5B,OAAOC,GAAG,MAAwB,kBAAkB;AACpD,OAAOC,MAAM,MAAM,QAAQ;AAC3B,OAAOC,MAAM,MAAM,mBAAmB;AAGtC,SAASC,WAAW,QAAQ,uBAAuB;AACnD,SAASC,QAAQ,QAAQ,sBAAsB;AAI/CL,GAAG,CAACM,MAAM,CAACL,GAAG,CAAC;AAEf,OAAO,MAAMM,sBAAsB,GAAGJ,MAAM,CAACK,GAAG,CAAAC,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,qEAO/C;AAiBD,MAAMC,YAAY,GAAIC,MAAM,IAAK;EAC/B,oBAAOlB,KAAA,CAAAmB,aAAA;IAAKC,EAAE,EAAEF,MAAM,CAACE;EAAG,GAAEF,MAAM,CAACG,IAAU,CAAC;AAChD,CAAC;AAED,OAAO,MAAMC,SAAmC,GAAGC,IAAA,IAc7C;EAAA,IAd8C;IAClDC,IAAI,GAAG,IAAI;IACXC,QAAQ,EAAEC,eAAe;IACzBC,GAAG,GAAG,OAAO;IACbC,GAAG,GAAG,OAAO;IACbC,QAAQ;IACRC,IAAI,GAAG,EAAE;IACTC,IAAI;IACJC,SAAS;IACTC,WAAW;IACXC,WAAW;IACXC,QAAQ;IACRC,OAAO;IACP,GAAGC;EACL,CAAC,GAAAd,IAAA;EACC,MAAM,CAACE,QAAQ,EAAEa,WAAW,CAAC,GAAGnC,QAAQ,CAASuB,eAAe,IAAI,EAAE,CAAC;EACvE,MAAM,CAACa,MAAM,EAAEC,SAAS,CAAC,GAAGrC,QAAQ,CAAC,KAAK,CAAC;EAE3C,MAAMsC,mBAAmB,GAAGA,CAAA,KAA0B;IACpD,MAAMC,OAAO,GAAGnC,MAAM,CAACE,WAAW,CAACkB,GAAG,CAAC,GAAGA,GAAG,GAAG,OAAO,EAAE,OAAO,CAAC;IACjE,MAAMgB,OAAO,GAAGpC,MAAM,CAACE,WAAW,CAACmB,GAAG,CAAC,GAAGA,GAAG,GAAG,OAAO,EAAE,OAAO,CAAC;IACjE,MAAMgB,OAA2B,GAAG,EAAE;IAEtC,MAAMC,WAAW,GAAGH,OAAO,CAACI,KAAK,CAAC,CAAC;IACnC,OAAOD,WAAW,CAACE,cAAc,CAACJ,OAAO,CAAC,EAAE;MAC1CC,OAAO,CAACI,IAAI,CAAC;QACX5B,EAAE,EAAEyB,WAAW,CAACI,MAAM,CAAC,OAAO,CAAC;QAC/B5B,IAAI,EAAEwB,WAAW,CAACI,MAAM,CAACzB,IAAI,KAAK,IAAI,GAAG,SAAS,GAAG,OAAO;MAC9D,CAAC,CAAC;MACFqB,WAAW,CAACK,GAAG,CAACpB,IAAI,EAAE,SAAS,CAAC;IAClC;IAEA,OAAOc,OAAO;EAChB,CAAC;EAED,MAAMO,WAAW,GAAGV,mBAAmB,CAAC,CAAC;EAEzC,MAAMW,iBAAiB,GAAGnD,WAAW,CAClCoD,IAAY,IAAK;IAChB,MAAMC,GAAG,GAAGjD,GAAG,CAAegD,IAAI,CAAC;IACnC,MAAME,MAAM,GAAGD,GAAG,CAACE,KAAK,CAAC,CAAC,CAACC,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC;IACnC,IAAIF,MAAM,IAAIA,MAAM,CAAC,KAAK,CAAC,IAAIA,MAAM,CAAC,KAAK,CAAC,KAAK9B,QAAQ,EAAE;MACzD,MAAMiC,KAAK,GAAGnD,MAAM,CAACgD,MAAM,CAAC,CAACN,MAAM,CAAC,OAAO,CAAC;MAC5C,IAAIE,WAAW,CAACQ,IAAI,CAAEzC,MAAM,IAAKA,MAAM,CAACE,EAAE,KAAKsC,KAAK,CAAC,EAAE;QACrDpB,WAAW,CAACoB,KAAK,CAAC;QAClB7B,QAAQ,YAARA,QAAQ,CAAG6B,KAAK,CAAC;QACjBlB,SAAS,CAAC,KAAK,CAAC;MAClB;IACF;EACF,CAAC,EACD,CAACX,QAAQ,EAAEJ,QAAQ,EAAE0B,WAAW,CAClC,CAAC;EAED,MAAMS,YAAY,GAAIC,CAAC,IAAK;IAC1BvB,WAAW,CAACuB,CAAC,CAAC;IACdhC,QAAQ,YAARA,QAAQ,CAAGgC,CAAC,CAAC;EACf,CAAC;EAED,MAAMC,UAAU,GAAGA,CAAA,KAAM;IACvBtB,SAAS,CAAC,IAAI,CAAC;EACjB,CAAC;EAED,MAAMuB,WAAW,GAAGA,CAAA,KAAM;IACxBvB,SAAS,CAAC,KAAK,CAAC;EAClB,CAAC;EAEDtC,SAAS,CAAC,MAAM;IACd,IAAIqC,MAAM,IAAId,QAAQ,EAAE;MAAA,IAAAuC,qBAAA;MACtB,MAAMC,YAAY,IAAAD,qBAAA,GAAGE,QAAQ,CAACC,cAAc,CAAC1C,QAAQ,CAAC,qBAAjCuC,qBAAA,CAAmCI,aAAa;MACrEH,YAAY,YAAZA,YAAY,CAAEI,cAAc,CAAC;QAAEC,QAAQ,EAAE,QAAQ;QAAEC,KAAK,EAAE;MAAS,CAAC,CAAC;IACvE;EACF,CAAC,EAAE,CAAChC,MAAM,EAAEd,QAAQ,CAAC,CAAC;EAEtB,oBACEzB,KAAA,CAAAmB,aAAA,CAACP,sBAAsB;IAACoB,SAAS,EAAE5B,UAAU,CAAC,cAAc,EAAE4B,SAAS;EAAE,gBACvEhC,KAAA,CAAAmB,aAAA,CAACT,QAAQ,EAAA8D,QAAA,KACHnC,IAAI;IACRO,OAAO,EAAEO,WAAY;IACrBsB,IAAI,EAAElC,MAAO;IACbmC,oBAAoB;IACpBjD,QAAQ,EAAEA,QAAS;IACnBkD,oBAAoB;IACpBC,aAAa,EAAExB,iBAAkB;IACjCvB,QAAQ,EAAE+B,YAAa;IACvBiB,cAAc;IACd5C,WAAW,EAAEA,WAAY;IACzBhB,YAAY,EAAEA,YAAa;IAC3B6D,aAAa,EAAE,GAAI;IACnB/C,IAAI,EAAEA,IAAK;IACXgD,OAAO,EAAEhB,WAAY;IACrBiB,MAAM,EAAElB,UAAW;IACnB5B,WAAW,EAAEA,WAAY;IACzBC,QAAQ,EAAEA,QAAS;IACnBC,OAAO,EAAEA;EAAQ,EAClB,CACqB,CAAC;AAE7B,CAAC"}

package/dist/esm/components/Input/index.d.ts

@@ -6,4 +6,5 @@ export * from "./InputNumber";
 export * from "./InputPassword";
 export * from "./InputUrl";
 export * from "./InputPhone";
+export * from "./InputTime";
 //# sourceMappingURL=index.d.ts.map

package/dist/esm/components/Input/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/Input/index.ts"],"names":[],"mappings":"AAAA,cAAc,SAAS,CAAC;AACxB,cAAc,kBAAkB,CAAC;AACjC,cAAc,cAAc,CAAC;AAC7B,cAAc,iBAAiB,CAAC;AAChC,cAAc,eAAe,CAAC;AAC9B,cAAc,iBAAiB,CAAC;AAChC,cAAc,YAAY,CAAC;AAC3B,cAAc,cAAc,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/Input/index.ts"],"names":[],"mappings":"AAAA,cAAc,SAAS,CAAC;AACxB,cAAc,kBAAkB,CAAC;AACjC,cAAc,cAAc,CAAC;AAC7B,cAAc,iBAAiB,CAAC;AAChC,cAAc,eAAe,CAAC;AAC9B,cAAc,iBAAiB,CAAC;AAChC,cAAc,YAAY,CAAC;AAC3B,cAAc,cAAc,CAAC;AAC7B,cAAc,aAAa,CAAC"}

package/dist/esm/components/Input/index.js

@@ -6,4 +6,5 @@ export * from "./InputNumber";
 export * from "./InputPassword";
 export * from "./InputUrl";
 export * from "./InputPhone";
+export * from "./InputTime";
 //# sourceMappingURL=index.js.map

package/dist/esm/components/Input/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../../../src/components/Input/index.ts"],"sourcesContent":["export * from \"./Input\";\nexport * from \"./InputAdornment\";\nexport * from \"./InputHours\";\nexport * from \"./InputCurrency\";\nexport * from \"./InputNumber\";\nexport * from \"./InputPassword\";\nexport * from \"./InputUrl\";\nexport * from \"./InputPhone\";\n"],"mappings":"AAAA,cAAc,SAAS;AACvB,cAAc,kBAAkB;AAChC,cAAc,cAAc;AAC5B,cAAc,iBAAiB;AAC/B,cAAc,eAAe;AAC7B,cAAc,iBAAiB;AAC/B,cAAc,YAAY;AAC1B,cAAc,cAAc"}
+{"version":3,"file":"index.js","names":[],"sources":["../../../../src/components/Input/index.ts"],"sourcesContent":["export * from \"./Input\";\nexport * from \"./InputAdornment\";\nexport * from \"./InputHours\";\nexport * from \"./InputCurrency\";\nexport * from \"./InputNumber\";\nexport * from \"./InputPassword\";\nexport * from \"./InputUrl\";\nexport * from \"./InputPhone\";\nexport * from \"./InputTime\";\n"],"mappings":"AAAA,cAAc,SAAS;AACvB,cAAc,kBAAkB;AAChC,cAAc,cAAc;AAC5B,cAAc,iBAAiB;AAC/B,cAAc,eAAe;AAC7B,cAAc,iBAAiB;AAC/B,cAAc,YAAY;AAC1B,cAAc,cAAc;AAC5B,cAAc,aAAa"}

package/dist/esm/components/SelectTime/SelectTime.d.ts

@@ -14,7 +14,7 @@ export interface SelectTimeProps extends Omit<SelectTriggerProps, "mode"> {
     triggerMode?: InputMode;
     locale?: string;
     trigger?: string;
-    step?: number;
+    step?: 1 | 5 | 15 | 30 | 60;
 }
 export declare const SelectTime: React.FC<SelectTimeProps>;
 //# sourceMappingURL=SelectTime.d.ts.map

package/dist/esm/components/SelectTime/SelectTime.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SelectTime.d.ts","sourceRoot":"","sources":["../../../../src/components/SelectTime/SelectTime.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAK1B,OAAO,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAE3C,OAAO,EAAE,cAAc,EAAU,MAAM,kBAAkB,CAAC;AAC1D,OAAO,EAAiB,kBAAkB,EAAE,MAAM,kBAAkB,CAAC;AAErE,MAAM,MAAM,gBAAgB,GAAG,GAAG,MAAM,IAAI,MAAM,EAAE,GAAG,SAAS,CAAC;AAEjE,MAAM,WAAW,eAAgB,SAAQ,IAAI,CAAC,kBAAkB,EAAE,MAAM,CAAC;IACvE,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;IACnB,QAAQ,CAAC,EAAE,gBAAgB,CAAC;IAC5B,GAAG,CAAC,EAAE,gBAAgB,CAAC;IACvB,GAAG,CAAC,EAAE,gBAAgB,CAAC;IACvB,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,MAAM,CAAC,EAAE,cAAc,CAAC,OAAO,CAAC,CAAC;IACjC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAED,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC,eAAe,CAwDhD,CAAC"}
+{"version":3,"file":"SelectTime.d.ts","sourceRoot":"","sources":["../../../../src/components/SelectTime/SelectTime.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAK1B,OAAO,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAE3C,OAAO,EAAE,cAAc,EAAU,MAAM,kBAAkB,CAAC;AAC1D,OAAO,EAAiB,kBAAkB,EAAE,MAAM,kBAAkB,CAAC;AAErE,MAAM,MAAM,gBAAgB,GAAG,GAAG,MAAM,IAAI,MAAM,EAAE,GAAG,SAAS,CAAC;AAEjE,MAAM,WAAW,eAAgB,SAAQ,IAAI,CAAC,kBAAkB,EAAE,MAAM,CAAC;IACvE,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;IACnB,QAAQ,CAAC,EAAE,gBAAgB,CAAC;IAC5B,GAAG,CAAC,EAAE,gBAAgB,CAAC;IACvB,GAAG,CAAC,EAAE,gBAAgB,CAAC;IACvB,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,MAAM,CAAC,EAAE,cAAc,CAAC,OAAO,CAAC,CAAC;IACjC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,IAAI,CAAC,EAAE,CAAC,GAAG,CAAC,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,CAAC;CAC7B;AAMD,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC,eAAe,CAkEhD,CAAC"}

package/dist/esm/components/SelectTime/SelectTime.js

@@ -4,12 +4,17 @@ import moment from "moment";
 import { isValidTime } from "../../utils/timeUtils";
 import { Select } from "../Select/Select";
 import { SelectTrigger } from "../SelectTrigger";
+const renderOption = option => {
+  return /*#__PURE__*/React.createElement("div", {
+    id: option.id
+  }, option.name);
+};
 export const SelectTime = _ref => {
   let {
     mode = "24",
-    selected = "12:00",
-    min,
-    max,
+    selected,
+    min = "00:00",
+    max = "23:45",
     onChange,
     target,
     triggerMode,
@@ -32,6 +37,18 @@ export const SelectTime = _ref => {
   };
   const timeOptions = generateTimeOptions();
   const displaySelectedTime = moment(selected, "HH:mm").format(mode === "12" ? "hh:mm A" : "HH:mm");
+  const handleScrollToSelected = () => {
+    if (selected) {
+      setTimeout(() => {
+        var _document$getElementB;
+        const selectedItem = (_document$getElementB = document.getElementById(selected)) == null ? void 0 : _document$getElementB.parentElement;
+        selectedItem == null || selectedItem.scrollIntoView({
+          behavior: "smooth",
+          block: "center"
+        });
+      }, 50);
+    }
+  };
   return /*#__PURE__*/React.createElement(Select, {
     options: timeOptions,
     disabledInternalSort: true,
@@ -42,14 +59,10 @@ export const SelectTime = _ref => {
       mode: triggerMode
     }, rest), displaySelectedTime),
     mode: "tiny",
-    renderOption: _ref2 => {
-      let {
-        name
-      } = _ref2;
-      return /*#__PURE__*/React.createElement("div", null, name);
-    },
+    renderOption: renderOption,
     onChange: onChange,
-    forceCloseMenu: true
+    forceCloseMenu: true,
+    onSelectOpen: handleScrollToSelected
   });
 };
 //# sourceMappingURL=SelectTime.js.map

package/dist/esm/components/SelectTime/SelectTime.js.map

@@ -1 +1 @@
-{"version":3,"file":"SelectTime.js","names":["React","moment","isValidTime","Select","SelectTrigger","SelectTime","_ref","mode","selected","min","max","onChange","target","triggerMode","step","rest","generateTimeOptions","minTime","maxTime","options","currentTime","clone","isSameOrBefore","push","id","format","name","add","timeOptions","displaySelectedTime","createElement","disabledInternalSort","disableSearch","keepSameOptionsOrder","_extends","renderOption","_ref2","forceCloseMenu"],"sources":["../../../../src/components/SelectTime/SelectTime.tsx"],"sourcesContent":["import React from \"react\";\n\nimport moment from \"moment\";\n\nimport { isValidTime } from \"../../utils/timeUtils\";\nimport { InputMode } from \"../Input/types\";\nimport { IOptionItemProps } from \"../Select/Option\";\nimport { ElementWithRef, Select } from \"../Select/Select\";\nimport { SelectTrigger, SelectTriggerProps } from \"../SelectTrigger\";\n\nexport type Time24HourFormat = `${string}:${string}` | undefined;\n\nexport interface SelectTimeProps extends Omit<SelectTriggerProps, \"mode\"> {\n  mode?: \"12\" | \"24\";\n  selected?: Time24HourFormat;\n  min?: Time24HourFormat;\n  max?: Time24HourFormat;\n  onChange?: () => void;\n  target?: ElementWithRef<Element>;\n  className?: string;\n  triggerMode?: InputMode;\n  locale?: string;\n  trigger?: string;\n  step?: number;\n}\n\nexport const SelectTime: React.FC<SelectTimeProps> = ({\n  mode = \"24\",\n  selected = \"12:00\",\n  min,\n  max,\n  onChange,\n  target,\n  triggerMode,\n  step = 15,\n  ...rest\n}) => {\n  const generateTimeOptions = (): IOptionItemProps[] => {\n    const minTime = moment(isValidTime(min) ? min : \"00:00\", \"HH:mm\");\n    const maxTime = moment(isValidTime(max) ? max : \"23:45\", \"HH:mm\");\n    const options: IOptionItemProps[] = [];\n\n    const currentTime = minTime.clone();\n    while (currentTime.isSameOrBefore(maxTime)) {\n      options.push({\n        id: currentTime.format(\"HH:mm\"),\n        name: currentTime.format(mode === \"12\" ? \"hh:mm A\" : \"HH:mm\"),\n      });\n      currentTime.add(step, \"minutes\");\n    }\n\n    return options;\n  };\n\n  const timeOptions = generateTimeOptions();\n\n  const displaySelectedTime = moment(selected, \"HH:mm\").format(\n    mode === \"12\" ? \"hh:mm A\" : \"HH:mm\"\n  );\n\n  return (\n    <Select\n      options={timeOptions}\n      disabledInternalSort\n      selected={selected}\n      disableSearch\n      keepSameOptionsOrder\n      target={\n        target ? (\n          target\n        ) : (\n          <SelectTrigger mode={triggerMode} {...rest}>\n            {displaySelectedTime}\n          </SelectTrigger>\n        )\n      }\n      mode=\"tiny\"\n      renderOption={({ name }) => <div>{name}</div>}\n      onChange={onChange}\n      forceCloseMenu\n    />\n  );\n};\n"],"mappings":";AAAA,OAAOA,KAAK,MAAM,OAAO;AAEzB,OAAOC,MAAM,MAAM,QAAQ;AAE3B,SAASC,WAAW,QAAQ,uBAAuB;AAGnD,SAAyBC,MAAM,QAAQ,kBAAkB;AACzD,SAASC,aAAa,QAA4B,kBAAkB;AAkBpE,OAAO,MAAMC,UAAqC,GAAGC,IAAA,IAU/C;EAAA,IAVgD;IACpDC,IAAI,GAAG,IAAI;IACXC,QAAQ,GAAG,OAAO;IAClBC,GAAG;IACHC,GAAG;IACHC,QAAQ;IACRC,MAAM;IACNC,WAAW;IACXC,IAAI,GAAG,EAAE;IACT,GAAGC;EACL,CAAC,GAAAT,IAAA;EACC,MAAMU,mBAAmB,GAAGA,CAAA,KAA0B;IACpD,MAAMC,OAAO,GAAGhB,MAAM,CAACC,WAAW,CAACO,GAAG,CAAC,GAAGA,GAAG,GAAG,OAAO,EAAE,OAAO,CAAC;IACjE,MAAMS,OAAO,GAAGjB,MAAM,CAACC,WAAW,CAACQ,GAAG,CAAC,GAAGA,GAAG,GAAG,OAAO,EAAE,OAAO,CAAC;IACjE,MAAMS,OAA2B,GAAG,EAAE;IAEtC,MAAMC,WAAW,GAAGH,OAAO,CAACI,KAAK,CAAC,CAAC;IACnC,OAAOD,WAAW,CAACE,cAAc,CAACJ,OAAO,CAAC,EAAE;MAC1CC,OAAO,CAACI,IAAI,CAAC;QACXC,EAAE,EAAEJ,WAAW,CAACK,MAAM,CAAC,OAAO,CAAC;QAC/BC,IAAI,EAAEN,WAAW,CAACK,MAAM,CAAClB,IAAI,KAAK,IAAI,GAAG,SAAS,GAAG,OAAO;MAC9D,CAAC,CAAC;MACFa,WAAW,CAACO,GAAG,CAACb,IAAI,EAAE,SAAS,CAAC;IAClC;IAEA,OAAOK,OAAO;EAChB,CAAC;EAED,MAAMS,WAAW,GAAGZ,mBAAmB,CAAC,CAAC;EAEzC,MAAMa,mBAAmB,GAAG5B,MAAM,CAACO,QAAQ,EAAE,OAAO,CAAC,CAACiB,MAAM,CAC1DlB,IAAI,KAAK,IAAI,GAAG,SAAS,GAAG,OAC9B,CAAC;EAED,oBACEP,KAAA,CAAA8B,aAAA,CAAC3B,MAAM;IACLgB,OAAO,EAAES,WAAY;IACrBG,oBAAoB;IACpBvB,QAAQ,EAAEA,QAAS;IACnBwB,aAAa;IACbC,oBAAoB;IACpBrB,MAAM,EACJA,MAAM,GACJA,MAAM,gBAENZ,KAAA,CAAA8B,aAAA,CAAC1B,aAAa,EAAA8B,QAAA;MAAC3B,IAAI,EAAEM;IAAY,GAAKE,IAAI,GACvCc,mBACY,CAElB;IACDtB,IAAI,EAAC,MAAM;IACX4B,YAAY,EAAEC,KAAA;MAAA,IAAC;QAAEV;MAAK,CAAC,GAAAU,KAAA;MAAA,oBAAKpC,KAAA,CAAA8B,aAAA,cAAMJ,IAAU,CAAC;IAAA,CAAC;IAC9Cf,QAAQ,EAAEA,QAAS;IACnB0B,cAAc;EAAA,CACf,CAAC;AAEN,CAAC"}
+{"version":3,"file":"SelectTime.js","names":["React","moment","isValidTime","Select","SelectTrigger","renderOption","option","createElement","id","name","SelectTime","_ref","mode","selected","min","max","onChange","target","triggerMode","step","rest","generateTimeOptions","minTime","maxTime","options","currentTime","clone","isSameOrBefore","push","format","add","timeOptions","displaySelectedTime","handleScrollToSelected","setTimeout","_document$getElementB","selectedItem","document","getElementById","parentElement","scrollIntoView","behavior","block","disabledInternalSort","disableSearch","keepSameOptionsOrder","_extends","forceCloseMenu","onSelectOpen"],"sources":["../../../../src/components/SelectTime/SelectTime.tsx"],"sourcesContent":["import React from \"react\";\n\nimport moment from \"moment\";\n\nimport { isValidTime } from \"../../utils/timeUtils\";\nimport { InputMode } from \"../Input/types\";\nimport { IOptionItemProps } from \"../Select/Option\";\nimport { ElementWithRef, Select } from \"../Select/Select\";\nimport { SelectTrigger, SelectTriggerProps } from \"../SelectTrigger\";\n\nexport type Time24HourFormat = `${string}:${string}` | undefined;\n\nexport interface SelectTimeProps extends Omit<SelectTriggerProps, \"mode\"> {\n  mode?: \"12\" | \"24\";\n  selected?: Time24HourFormat;\n  min?: Time24HourFormat;\n  max?: Time24HourFormat;\n  onChange?: () => void;\n  target?: ElementWithRef<Element>;\n  className?: string;\n  triggerMode?: InputMode;\n  locale?: string;\n  trigger?: string;\n  step?: 1 | 5 | 15 | 30 | 60;\n}\n\nconst renderOption = (option) => {\n  return <div id={option.id}>{option.name}</div>;\n};\n\nexport const SelectTime: React.FC<SelectTimeProps> = ({\n  mode = \"24\",\n  selected,\n  min = \"00:00\",\n  max = \"23:45\",\n  onChange,\n  target,\n  triggerMode,\n  step = 15,\n  ...rest\n}) => {\n  const generateTimeOptions = (): IOptionItemProps[] => {\n    const minTime = moment(isValidTime(min) ? min : \"00:00\", \"HH:mm\");\n    const maxTime = moment(isValidTime(max) ? max : \"23:45\", \"HH:mm\");\n    const options: IOptionItemProps[] = [];\n\n    const currentTime = minTime.clone();\n    while (currentTime.isSameOrBefore(maxTime)) {\n      options.push({\n        id: currentTime.format(\"HH:mm\"),\n        name: currentTime.format(mode === \"12\" ? \"hh:mm A\" : \"HH:mm\"),\n      });\n      currentTime.add(step, \"minutes\");\n    }\n\n    return options;\n  };\n\n  const timeOptions = generateTimeOptions();\n\n  const displaySelectedTime = moment(selected, \"HH:mm\").format(\n    mode === \"12\" ? \"hh:mm A\" : \"HH:mm\"\n  );\n\n  const handleScrollToSelected = () => {\n    if (selected) {\n      setTimeout(() => {\n        const selectedItem = document.getElementById(selected)?.parentElement;\n        selectedItem?.scrollIntoView({ behavior: \"smooth\", block: \"center\" });\n      }, 50);\n    }\n  };\n\n  return (\n    <Select\n      options={timeOptions}\n      disabledInternalSort\n      selected={selected}\n      disableSearch\n      keepSameOptionsOrder\n      target={\n        target ? (\n          target\n        ) : (\n          <SelectTrigger mode={triggerMode} {...rest}>\n            {displaySelectedTime}\n          </SelectTrigger>\n        )\n      }\n      mode=\"tiny\"\n      renderOption={renderOption}\n      onChange={onChange}\n      forceCloseMenu\n      onSelectOpen={handleScrollToSelected}\n    />\n  );\n};\n"],"mappings":";AAAA,OAAOA,KAAK,MAAM,OAAO;AAEzB,OAAOC,MAAM,MAAM,QAAQ;AAE3B,SAASC,WAAW,QAAQ,uBAAuB;AAGnD,SAAyBC,MAAM,QAAQ,kBAAkB;AACzD,SAASC,aAAa,QAA4B,kBAAkB;AAkBpE,MAAMC,YAAY,GAAIC,MAAM,IAAK;EAC/B,oBAAON,KAAA,CAAAO,aAAA;IAAKC,EAAE,EAAEF,MAAM,CAACE;EAAG,GAAEF,MAAM,CAACG,IAAU,CAAC;AAChD,CAAC;AAED,OAAO,MAAMC,UAAqC,GAAGC,IAAA,IAU/C;EAAA,IAVgD;IACpDC,IAAI,GAAG,IAAI;IACXC,QAAQ;IACRC,GAAG,GAAG,OAAO;IACbC,GAAG,GAAG,OAAO;IACbC,QAAQ;IACRC,MAAM;IACNC,WAAW;IACXC,IAAI,GAAG,EAAE;IACT,GAAGC;EACL,CAAC,GAAAT,IAAA;EACC,MAAMU,mBAAmB,GAAGA,CAAA,KAA0B;IACpD,MAAMC,OAAO,GAAGrB,MAAM,CAACC,WAAW,CAACY,GAAG,CAAC,GAAGA,GAAG,GAAG,OAAO,EAAE,OAAO,CAAC;IACjE,MAAMS,OAAO,GAAGtB,MAAM,CAACC,WAAW,CAACa,GAAG,CAAC,GAAGA,GAAG,GAAG,OAAO,EAAE,OAAO,CAAC;IACjE,MAAMS,OAA2B,GAAG,EAAE;IAEtC,MAAMC,WAAW,GAAGH,OAAO,CAACI,KAAK,CAAC,CAAC;IACnC,OAAOD,WAAW,CAACE,cAAc,CAACJ,OAAO,CAAC,EAAE;MAC1CC,OAAO,CAACI,IAAI,CAAC;QACXpB,EAAE,EAAEiB,WAAW,CAACI,MAAM,CAAC,OAAO,CAAC;QAC/BpB,IAAI,EAAEgB,WAAW,CAACI,MAAM,CAACjB,IAAI,KAAK,IAAI,GAAG,SAAS,GAAG,OAAO;MAC9D,CAAC,CAAC;MACFa,WAAW,CAACK,GAAG,CAACX,IAAI,EAAE,SAAS,CAAC;IAClC;IAEA,OAAOK,OAAO;EAChB,CAAC;EAED,MAAMO,WAAW,GAAGV,mBAAmB,CAAC,CAAC;EAEzC,MAAMW,mBAAmB,GAAG/B,MAAM,CAACY,QAAQ,EAAE,OAAO,CAAC,CAACgB,MAAM,CAC1DjB,IAAI,KAAK,IAAI,GAAG,SAAS,GAAG,OAC9B,CAAC;EAED,MAAMqB,sBAAsB,GAAGA,CAAA,KAAM;IACnC,IAAIpB,QAAQ,EAAE;MACZqB,UAAU,CAAC,MAAM;QAAA,IAAAC,qBAAA;QACf,MAAMC,YAAY,IAAAD,qBAAA,GAAGE,QAAQ,CAACC,cAAc,CAACzB,QAAQ,CAAC,qBAAjCsB,qBAAA,CAAmCI,aAAa;QACrEH,YAAY,YAAZA,YAAY,CAAEI,cAAc,CAAC;UAAEC,QAAQ,EAAE,QAAQ;UAAEC,KAAK,EAAE;QAAS,CAAC,CAAC;MACvE,CAAC,EAAE,EAAE,CAAC;IACR;EACF,CAAC;EAED,oBACE1C,KAAA,CAAAO,aAAA,CAACJ,MAAM;IACLqB,OAAO,EAAEO,WAAY;IACrBY,oBAAoB;IACpB9B,QAAQ,EAAEA,QAAS;IACnB+B,aAAa;IACbC,oBAAoB;IACpB5B,MAAM,EACJA,MAAM,GACJA,MAAM,gBAENjB,KAAA,CAAAO,aAAA,CAACH,aAAa,EAAA0C,QAAA;MAAClC,IAAI,EAAEM;IAAY,GAAKE,IAAI,GACvCY,mBACY,CAElB;IACDpB,IAAI,EAAC,MAAM;IACXP,YAAY,EAAEA,YAAa;IAC3BW,QAAQ,EAAEA,QAAS;IACnB+B,cAAc;IACdC,YAAY,EAAEf;EAAuB,CACtC,CAAC;AAEN,CAAC"}