@invoicebox/ui 0.1.0-alpha.224 → 0.1.0-alpha.226

package/dist/components/form/DateTimeInput/components/MobileDateTimeCalendar/index.js

@@ -75,10 +75,10 @@ var MobileDateTimeCalendar = exports.MobileDateTimeCalendar = function MobileDat
     minDate: minDate,
     maxDate: maxDate,
     isLargeMobileSize: true
-  })) : /*#__PURE__*/_react["default"].createElement(_TimePicker.TimePicker, {
+  })) : /*#__PURE__*/_react["default"].createElement(S.TimePickerWrapper, null, /*#__PURE__*/_react["default"].createElement(_TimePicker.TimePicker, {
     value: [(calendarDropdownValue === null || calendarDropdownValue === void 0 ? void 0 : calendarDropdownValue.getHours()) || 0, (calendarDropdownValue === null || calendarDropdownValue === void 0 ? void 0 : calendarDropdownValue.getMinutes()) || 0],
     onChange: onTimeChange,
     maxTime: calendarDropdownValue && maxDate && calendarDropdownValue.getDay() === maxDate.getDay() ? [maxDate.getHours(), maxDate.getMinutes()] : undefined,
     minTime: calendarDropdownValue && minDate && calendarDropdownValue.getDay() === minDate.getDay() ? [minDate.getHours(), minDate.getMinutes()] : undefined
-  }));
+  })));
 };

package/dist/components/form/DateTimeInput/components/MobileDateTimeCalendar/styles.d.ts

@@ -10,3 +10,4 @@ export declare const ApplyButton: import("styled-components/dist/types").IStyled
     $color: string;
 }>> & string;
 export declare const MobileCalendarWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const TimePickerWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;

package/dist/components/form/DateTimeInput/components/MobileDateTimeCalendar/styles.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.MobileCalendarWrapper = exports.Header = exports.HeadLabel = exports.CloseButton = exports.ApplyButton = void 0;
+exports.TimePickerWrapper = exports.MobileCalendarWrapper = exports.Header = exports.HeadLabel = exports.CloseButton = exports.ApplyButton = void 0;
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 var _Typography = require("../../../../common/Typography");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
@@ -35,4 +35,8 @@ var ApplyButton = exports.ApplyButton = _styledComponents["default"].button.with
 var MobileCalendarWrapper = exports.MobileCalendarWrapper = _styledComponents["default"].div.withConfig({
   displayName: "styles__MobileCalendarWrapper",
   componentId: "sc-agerw5-4"
-})(["padding:18px 16px 30px;display:flex;justify-content:center;"]);
+})(["padding:18px 16px 30px;display:flex;justify-content:center;"]);
+var TimePickerWrapper = exports.TimePickerWrapper = _styledComponents["default"].div.withConfig({
+  displayName: "styles__TimePickerWrapper",
+  componentId: "sc-agerw5-5"
+})(["padding-bottom:30px;"]);

package/dist/components/form/DateTimeInput/components/TimePicker/styles.js

@@ -11,7 +11,7 @@ function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default":
 var Wrapper = exports.Wrapper = _styledComponents["default"].div.withConfig({
   displayName: "styles__Wrapper",
   componentId: "sc-okz9lx-0"
-})(["display:flex;width:93px;box-sizing:border-box;height:", "px;@media ", "{flex-direction:column;width:auto;}"], function (_ref) {
+})(["display:flex;width:93px;box-sizing:border-box;height:", "px;@media ", "{flex-direction:column;width:auto;height:auto;}"], function (_ref) {
   var $height = _ref.$height;
   return $height;
 }, _breakpoints.breakpoints.sm);
@@ -35,11 +35,11 @@ var Label = exports.Label = (0, _styledComponents["default"])(_Typography.Typogr
 var ValuesWrapper = exports.ValuesWrapper = _styledComponents["default"].div.withConfig({
   displayName: "styles__ValuesWrapper",
   componentId: "sc-okz9lx-3"
-})(["display:flex;flex-direction:column;gap:4px;width:30px;padding:8px;@media ", "{flex-direction:row;gap:0;}"], _breakpoints.breakpoints.sm);
+})(["display:flex;flex-direction:column;gap:4px;width:30px;padding:8px 0;box-sizing:border-box;margin:0 auto;@media ", "{flex-direction:row;gap:0;margin:0;width:auto;padding:8px 0;}"], _breakpoints.breakpoints.sm);
 var ValueWrapper = exports.ValueWrapper = _styledComponents["default"].button.withConfig({
   displayName: "styles__ValueWrapper",
   componentId: "sc-okz9lx-4"
-})(["padding:2px 0;display:flex;justify-content:center;align-items:center;color:", ";background:", ";border-radius:5px;border:none;cursor:pointer;outline:none;&:disabled{cursor:not-allowed;color:", ";}@media ", "{flex-direction:row;width:44px;height:48px;flex-shrink:0;border-radius:50%;}"], function (_ref5) {
+})(["padding:2px 0;display:flex;justify-content:center;align-items:center;color:", ";background:", ";border-radius:5px;border:none;cursor:pointer;outline:none;&:disabled{cursor:not-allowed;color:", ";}@media ", "{flex-direction:row;width:44px;height:48px;flex-shrink:0;border-radius:50%;padding:0;}"], function (_ref5) {
   var $isActive = _ref5.$isActive,
     $color = _ref5.$color,
     $colorActive = _ref5.$colorActive;

package/dist/components/form/DateTimeInput/hooks/useTimePickerHeight.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-export declare const useTimePickerHeight: () => {
+export declare const useTimePickerHeight: (isOpen: boolean) => {
     calendarRef: import("react").RefObject<HTMLDivElement>;
     timePickerHeight: number;
     handleTimePickerSetHeight: () => void;

package/dist/components/form/DateTimeInput/hooks/useTimePickerHeight.js

@@ -11,7 +11,7 @@ function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r)
 function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
 function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
 function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
-var useTimePickerHeight = exports.useTimePickerHeight = function useTimePickerHeight() {
+var useTimePickerHeight = exports.useTimePickerHeight = function useTimePickerHeight(isOpen) {
   var calendarRef = (0, _react.useRef)(null);
   var _useState = (0, _react.useState)(0),
     _useState2 = _slicedToArray(_useState, 2),
@@ -28,7 +28,7 @@ var useTimePickerHeight = exports.useTimePickerHeight = function useTimePickerHe
   };
   (0, _react.useEffect)(function () {
     handleTimePickerSetHeight();
-  }, []);
+  }, [isOpen]);
   return {
     calendarRef: calendarRef,
     timePickerHeight: timePickerHeight,

package/dist/components/form/DateTimeInput/index.js

@@ -74,7 +74,7 @@ var DateTimeInput = exports.DateTimeInput = function DateTimeInput(_ref) {
     return isOpen ? handleCloseAndSkipDropdownValue() : setOpenFlag(true);
   }, [handleCloseAndSkipDropdownValue, isOpen]);
   var elRef = (0, _useOutsideClick.useOutsideClick)(handleCloseAndSkipDropdownValue);
-  var _useTimePickerHeight = (0, _useTimePickerHeight2.useTimePickerHeight)(),
+  var _useTimePickerHeight = (0, _useTimePickerHeight2.useTimePickerHeight)(isOpen),
     calendarRef = _useTimePickerHeight.calendarRef,
     handleTimePickerSetHeight = _useTimePickerHeight.handleTimePickerSetHeight,
     timePickerHeight = _useTimePickerHeight.timePickerHeight;

package/dist/index.d.ts

@@ -45,6 +45,8 @@ export { Toggle } from './components/form/Toggle';
 export type { TProps as TToggleProps } from './components/form/Toggle';
 export { DateInput } from './components/form/DateInput';
 export type { TProps as TDateInputProps } from './components/form/DateInput';
+export { DateTimeInput } from './components/form/DateTimeInput';
+export type { TProps as TDateTimeInputProps } from './components/form/DateTimeInput';
 export { SearchInput } from './components/form/SearchInput';
 export type { TProps as TSearchInputProps } from './components/form/SearchInput';
 export { CodeInput } from './components/form/CodeInput';

package/dist/index.js

@@ -75,6 +75,12 @@ Object.defineProperty(exports, "DateInput", {
     return _DateInput.DateInput;
   }
 });
+Object.defineProperty(exports, "DateTimeInput", {
+  enumerable: true,
+  get: function get() {
+    return _DateTimeInput.DateTimeInput;
+  }
+});
 Object.defineProperty(exports, "Divider", {
   enumerable: true,
   get: function get() {
@@ -364,6 +370,7 @@ var _TextInput = require("./components/form/TextInput");
 var _Select = require("./components/form/Select");
 var _Toggle = require("./components/form/Toggle");
 var _DateInput = require("./components/form/DateInput");
+var _DateTimeInput = require("./components/form/DateTimeInput");
 var _SearchInput = require("./components/form/SearchInput");
 var _CodeInput = require("./components/form/CodeInput");
 var _CountrySelect = require("./components/form/CountrySelect");

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@invoicebox/ui",
-    "version": "0.1.0-alpha.224",
+    "version": "0.1.0-alpha.226",
     "description": "Invoicebox UI",
     "license": "Apache License 2.0",
     "scripts": {