@cashub/ui 0.42.0 → 0.43.0

package/datetimePicker/DatetimePickerV3.js

@@ -0,0 +1,85 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = require("react");
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _reactDatepicker = _interopRequireDefault(require("react-datepicker"));
+require("react-datepicker/dist/react-datepicker.css");
+var _TimePickerV = _interopRequireDefault(require("./TimePickerV2"));
+var _jsxRuntime = require("react/jsx-runtime");
+var _templateObject;
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _taggedTemplateLiteral(e, t) { return t || (t = e.slice(0)), Object.freeze(Object.defineProperties(e, { raw: { value: Object.freeze(t) } })); }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+const DatetimePickerV3 = _ref => {
+  let {
+    selected = '',
+    onChange,
+    dateFormat = 'yyyy-MM-dd HH:mm:ss',
+    minDate,
+    maxDate,
+    showTimeInput,
+    readOnly,
+    disabled,
+    onBlur,
+    allowClear = false,
+    shouldCloseOnSelect = true
+  } = _ref;
+  const datepickerRef = (0, _react.useRef)(null);
+  const handleOnBlur = () => {
+    onBlur();
+  };
+  const selectedDate = selected ? new Date(Date.parse(selected)) : '';
+  const datePickerProps = {
+    dateFormat,
+    disabled,
+    onChange,
+    selected: selectedDate,
+    minDate: minDate ? new Date(Date.parse(minDate)) : '',
+    maxDate: maxDate ? new Date(Date.parse(maxDate)) : '',
+    isClearable: allowClear && selected,
+    shouldCloseOnSelect
+  };
+  if (showTimeInput) {
+    datePickerProps.showTimeInput = true;
+    datePickerProps.customTimeInput = /*#__PURE__*/(0, _jsxRuntime.jsx)(_TimePickerV.default, {
+      selected: selected,
+      onSelect: value => {
+        if (selectedDate) {
+          const [hh, mm, ss] = value.split(':');
+          selectedDate.setHours(Number(hh) || 0, Number(mm) || 0, Number(ss) || 0);
+          onChange(selectedDate);
+        }
+      }
+    });
+  }
+  if (onBlur) {
+    datePickerProps.onCalendarClose = handleOnBlur;
+  }
+  (0, _react.useEffect)(() => {
+    // set input to readonly
+    if (datepickerRef && datepickerRef.current && readOnly) {
+      datepickerRef.current.input.readOnly = readOnly;
+    }
+  }, [readOnly]);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(Wrapper, {
+    disabled: disabled,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactDatepicker.default, _objectSpread(_objectSpread({}, datePickerProps), {}, {
+      ref: datepickerRef
+    }))
+  });
+};
+const Wrapper = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  .react-datepicker-wrapper,\n  .react-datepicker__input-container {\n    width: 100%;\n\n    > input {\n      width: 100%;\n      height: 36px;\n      color: var(--font-on-background);\n      background: transparent;\n      border-radius: var(--border-radius-l);\n      border: var(--border-width) solid var(--border-color);\n      padding: 0 var(--spacing-s);\n      outline: none;\n\n      ", "\n    }\n\n    > input + button {\n      padding: 0;\n      right: var(--spacing-s);\n      &::after {\n        color: var(--color-primary);\n        background-color: transparent;\n        font-size: 24px;\n        padding: 0;\n      }\n    }\n  }\n\n  .react-datepicker-popper {\n    z-index: 2;\n  }\n\n  .react-datepicker-popper[data-placement^='top'] {\n    padding-bottom: var(--spacing-xs);\n  }\n\n  .react-datepicker-popper[data-placement^='bottom'] {\n    padding-top: var(--spacing-xs);\n  }\n\n  .react-datepicker {\n    box-shadow: var(--box-shadow);\n    border-radius: var(--border-radius);\n    border: var(--border-width) solid var(--border-color);\n    padding: var(--spacing-s);\n    font-size: var(--font-body1);\n    color: var(--font-on-background);\n    background: var(--color-background1);\n\n    .react-datepicker__triangle {\n      &::before,\n      &::after {\n        display: none;\n      }\n    }\n\n    .react-datepicker__header {\n      border: none;\n      padding: 0;\n      background: var(--color-background1);\n    }\n\n    .react-datepicker__current-month {\n      line-height: 36px;\n      color: var(--font-on-background);\n      font-size: var(--font-body1);\n      font-weight: var(--font-normal);\n    }\n\n    .react-datepicker__day-names {\n      margin: 0;\n    }\n\n    .react-datepicker__day-name,\n    .react-datepicker__day {\n      width: 36px;\n      height: 36px;\n      line-height: 36px;\n      color: var(--font-on-background);\n      font-weight: var(--font-normal);\n      margin: 0;\n      border-radius: 4px;\n    }\n\n    .react-datepicker__day:hover {\n      background: var(--color-hover);\n    }\n\n    .react-datepicker__day--disabled {\n      color: var(--font-on-mute);\n      background: none !important;\n    }\n  }\n\n  .react-datepicker__month {\n    margin: 0;\n  }\n\n  .react-datepicker__navigation {\n    top: 0;\n    width: 36px;\n    height: 36px;\n    margin: var(--spacing-s) var(--spacing-s) 0 var(--spacing-s);\n    border-radius: 4px;\n\n    &.react-datepicker__navigation--previous {\n      left: 0;\n    }\n\n    &.react-datepicker__navigation--next {\n      right: 0;\n    }\n\n    &:hover {\n      background: var(--color-hover);\n    }\n\n    .react-datepicker__navigation-icon::before {\n      border-color: var(--font-on-background);\n    }\n\n    .react-datepicker__navigation-icon--previous::before {\n      right: -4px;\n    }\n\n    .react-datepicker__navigation-icon--next::before {\n      left: -4px;\n    }\n  }\n\n  .react-datepicker__day--selected,\n  .react-datepicker__day--in-selecting-range,\n  .react-datepicker__day--in-range,\n  .react-datepicker__month-text--selected,\n  .react-datepicker__month-text--in-selecting-range,\n  .react-datepicker__month-text--in-range,\n  .react-datepicker__quarter-text--selected,\n  .react-datepicker__quarter-text--in-selecting-range,\n  .react-datepicker__quarter-text--in-range,\n  .react-datepicker__year-text--selected,\n  .react-datepicker__year-text--in-selecting-range,\n  .react-datepicker__year-text--in-range {\n    background: var(--color-primary) !important;\n  }\n\n  .react-datepicker__day--keyboard-selected,\n  .react-datepicker__month-text--keyboard-selected,\n  .react-datepicker__quarter-text--keyboard-selected,\n  .react-datepicker__year-text--keyboard-selected {\n    background: none;\n  }\n\n  .react-datepicker__input-time-container {\n    margin: 0;\n    margin-top: var(--spacing-s);\n    margin-left: var(--spacing-xs);\n\n    .react-datepicker-time__input input {\n      height: 36px;\n      padding: 0 var(--spacing-xs);\n      border-radius: var(--border-radius);\n      border: var(--border-width) solid var(--border-color);\n      background: transparent;\n      color: var(--font-on-background);\n      outline: none;\n    }\n  }\n"])), _ref2 => {
+  let {
+    disabled
+  } = _ref2;
+  return disabled ? 'cursor: not-allowed; opacity: 0.5;' : '';
+});
+var _default = exports.default = DatetimePickerV3;

package/datetimePicker/TimePickerV2.js

@@ -0,0 +1,163 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = require("react");
+var _styledComponents = _interopRequireWildcard(require("styled-components"));
+var _reactOutsideClickHandler = _interopRequireDefault(require("react-outside-click-handler"));
+var _hooks = require("@cashub/hooks");
+var _utils = require("@cashub/utils");
+var _pad = _interopRequireDefault(require("./utils/pad"));
+var _form = require("../form");
+var _scrollbar = _interopRequireDefault(require("../styles/mixin/scrollbar"));
+var _jsxRuntime = require("react/jsx-runtime");
+var _templateObject, _templateObject2, _templateObject3, _templateObject4;
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+function _taggedTemplateLiteral(e, t) { return t || (t = e.slice(0)), Object.freeze(Object.defineProperties(e, { raw: { value: Object.freeze(t) } })); }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+const LENGTH = 2;
+const PAD_STRING = '0';
+const HOUR_OPTIONS = (0, _utils.generateRange)(0, 23).map(value => {
+  return (0, _pad.default)(value, LENGTH, PAD_STRING);
+});
+const MINUTE_SECOND_OPTIONS = (0, _utils.generateRange)(0, 59).map(value => {
+  return (0, _pad.default)(value, LENGTH, PAD_STRING);
+});
+const TimePickerV2 = _ref => {
+  let {
+    selected,
+    onSelect
+  } = _ref;
+  const [display, setDisplay] = (0, _react.useState)(false);
+  const [targetElement, setTargetElement] = (0, _react.useState)(null);
+  const [popperElement, setPopperElement] = (0, _react.useState)(null);
+  const [time, setTime] = (0, _react.useState)(() => {
+    let time = new Date(Date.parse(selected));
+
+    // use current time when time value is invalid
+    if (isNaN(time)) {
+      time = new Date();
+    }
+    return {
+      hour: (0, _pad.default)(time.getHours(), LENGTH, PAD_STRING),
+      minute: (0, _pad.default)(time.getMinutes(), LENGTH, PAD_STRING),
+      second: (0, _pad.default)(time.getSeconds(), LENGTH, PAD_STRING)
+    };
+  });
+  const {
+    styles,
+    attributes,
+    state,
+    update
+  } = (0, _hooks.useCustomPopper)(targetElement, popperElement, {
+    placement: 'bottom-start'
+  });
+  const handleToggle = () => {
+    setDisplay(!display);
+    update();
+  };
+  const handleChange = (type, value) => {
+    setTime(previous => {
+      return _objectSpread(_objectSpread({}, previous), {}, {
+        [type]: value
+      });
+    });
+  };
+  (0, _react.useEffect)(() => {
+    if (typeof onSelect === 'function' && time.hour && time.minute && time.second) {
+      onSelect("".concat(time.hour, ":").concat(time.minute, ":").concat(time.second));
+    }
+  }, [onSelect, time.hour, time.minute, time.second]);
+  (0, _react.useEffect)(() => {
+    if (display) {
+      const {
+        childNodes
+      } = popperElement;
+      childNodes.forEach(panel => {
+        const selectedItem = panel.querySelector('[aria-selected="true"]');
+        if (panel.scrollHeight > panel.clientHeight) {
+          panel.scrollTop = selectedItem.offsetTop;
+        }
+      });
+    }
+  }, [display, popperElement]);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactOutsideClickHandler.default, {
+    onOutsideClick: () => {
+      setDisplay(false);
+    },
+    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_form.Input, {
+        ref: setTargetElement,
+        type: "text",
+        readOnly: true,
+        onClick: handleToggle,
+        value: "".concat(time.hour, ":").concat(time.minute, ":").concat(time.second)
+      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(Panel, _objectSpread(_objectSpread({
+        ref: setPopperElement,
+        $display: display,
+        style: styles.popper
+      }, attributes.popper), {}, {
+        placement: state && state.placement,
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(Picker, {
+          children: HOUR_OPTIONS.map(option => {
+            return /*#__PURE__*/(0, _jsxRuntime.jsx)(Option, {
+              role: "option",
+              onClick: () => {
+                handleChange('hour', option);
+              },
+              selected: option === time.hour,
+              "aria-selected": option === time.hour,
+              children: option
+            }, option);
+          })
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(Picker, {
+          children: MINUTE_SECOND_OPTIONS.map(option => {
+            return /*#__PURE__*/(0, _jsxRuntime.jsx)(Option, {
+              role: "option",
+              onClick: () => {
+                handleChange('minute', option);
+              },
+              selected: option === time.minute,
+              "aria-selected": option === time.minute,
+              children: option
+            }, option);
+          })
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(Picker, {
+          children: MINUTE_SECOND_OPTIONS.map(option => {
+            return /*#__PURE__*/(0, _jsxRuntime.jsx)(Option, {
+              role: "option",
+              onClick: () => {
+                handleChange('second', option);
+              },
+              selected: option === time.second,
+              "aria-selected": option === time.second,
+              children: option
+            }, option);
+          })
+        })]
+      }))]
+    })
+  });
+};
+const Panel = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  visibility: ", ";\n  width: 100%;\n  max-width: 360px;\n  background: var(--color-background1);\n  color: var(--font-on-background);\n  border: var(--border-width) solid var(--border-color);\n  border-radius: var(--border-radius);\n  box-shadow: var(--box-shadow);\n  z-index: 85;\n"])), _ref2 => {
+  let {
+    $display
+  } = _ref2;
+  return $display ? 'visible' : 'hidden';
+});
+const Picker = _styledComponents.default.ul(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  flex: 1;\n  text-align: center;\n  max-height: 144px;\n  overflow-y: auto;\n\n  ", "\n\n  &:first-child {\n    border-top-left-radius: var(--border-radius);\n    border-bottom-left-radius: var(--border-radius);\n  }\n\n  &:not(:last-child) {\n    border-right: var(--border-width) solid var(--border-color);\n  }\n"])), _scrollbar.default);
+const Option = _styledComponents.default.li(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  padding: var(--spacing-xs) 0;\n  background: var(--color-background1);\n  transition: background 0.3s;\n\n  &:hover {\n    background: var(--color-hover);\n  }\n\n  ", "\n"])), _ref3 => {
+  let {
+    selected
+  } = _ref3;
+  return selected && (0, _styledComponents.css)(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n      background: var(--color-hover);\n    "])));
+});
+var _default = exports.default = TimePickerV2;

package/datetimePicker/index.js

@@ -27,6 +27,12 @@ Object.defineProperty(exports, "DatetimePickerV2", {
     return _DatetimePickerV.default;
   }
 });
+Object.defineProperty(exports, "DatetimePickerV3", {
+  enumerable: true,
+  get: function () {
+    return _DatetimePickerV2.default;
+  }
+});
 Object.defineProperty(exports, "TimeInput", {
   enumerable: true,
   get: function () {
@@ -45,11 +51,19 @@ Object.defineProperty(exports, "TimePickerStyle", {
     return _TimePickerStyle.default;
   }
 });
+Object.defineProperty(exports, "TimePickerV2", {
+  enumerable: true,
+  get: function () {
+    return _TimePickerV.default;
+  }
+});
 var _DatePicker = _interopRequireDefault(require("./DatePicker"));
 var _DatePickerV = _interopRequireDefault(require("./DatePickerV2"));
 var _DatetimePicker = _interopRequireDefault(require("./DatetimePicker"));
 var _DatetimePickerV = _interopRequireDefault(require("./DatetimePickerV2"));
+var _DatetimePickerV2 = _interopRequireDefault(require("./DatetimePickerV3"));
 var _TimeInput = _interopRequireDefault(require("./TimeInput"));
 var _TimePicker = _interopRequireDefault(require("./TimePicker"));
+var _TimePickerV = _interopRequireDefault(require("./TimePickerV2"));
 var _TimePickerStyle = _interopRequireDefault(require("./TimePickerStyle"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }

package/form/PasswordInput.js

@@ -0,0 +1,40 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = require("react");
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _Input = _interopRequireDefault(require("./Input"));
+var _button = require("../button");
+var _bi = require("react-icons/bi");
+var _jsxRuntime = require("react/jsx-runtime");
+var _templateObject;
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _taggedTemplateLiteral(e, t) { return t || (t = e.slice(0)), Object.freeze(Object.defineProperties(e, { raw: { value: Object.freeze(t) } })); }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+function _objectDestructuringEmpty(t) { if (null == t) throw new TypeError("Cannot destructure " + t); }
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+const PasswordInput = _ref => {
+  let props = _extends({}, (_objectDestructuringEmpty(_ref), _ref));
+  const [type, setType] = (0, _react.useState)('password');
+  const toggleType = () => {
+    setType(type === 'password' ? 'text' : 'password');
+  };
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(Container, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Input.default, _objectSpread(_objectSpread({}, props), {}, {
+      type: type
+    })), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_button.IconButton, {
+      size: "small",
+      onClick: toggleType,
+      children: [type === 'password' && /*#__PURE__*/(0, _jsxRuntime.jsx)(_bi.BiHide, {}), type === 'text' && /*#__PURE__*/(0, _jsxRuntime.jsx)(_bi.BiShow, {})]
+    })]
+  });
+};
+const Container = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  position: relative;\n\n  ", " {\n    padding-right: 40px;\n  }\n\n  ", " {\n    position: absolute;\n    top: 50%;\n    transform: translateY(-50%);\n    right: 0.5rem;\n  }\n"])), _Input.default, _button.IconButton);
+var _default = exports.default = PasswordInput;

package/form/index.js

@@ -39,6 +39,12 @@ Object.defineProperty(exports, "MutedText", {
     return _MutedText.default;
   }
 });
+Object.defineProperty(exports, "PasswordInput", {
+  enumerable: true,
+  get: function () {
+    return _PasswordInput.default;
+  }
+});
 Object.defineProperty(exports, "RadioButton", {
   enumerable: true,
   get: function () {
@@ -81,6 +87,7 @@ var _FormItem = _interopRequireDefault(require("./FormItem"));
 var _Input = _interopRequireDefault(require("./Input"));
 var _Label = _interopRequireDefault(require("./Label"));
 var _MutedText = _interopRequireDefault(require("./MutedText"));
+var _PasswordInput = _interopRequireDefault(require("./PasswordInput"));
 var _RadioButton = _interopRequireDefault(require("./RadioButton"));
 var _Searchbox = _interopRequireDefault(require("./Searchbox"));
 var _Slider = _interopRequireDefault(require("./Slider"));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cashub/ui",
-  "version": "0.42.0",
+  "version": "0.43.0",
   "private": false,
   "author": "CasHUB Team",
   "description": "CasHUB UI components library",
@@ -10,8 +10,8 @@
   ],
   "license": "MIT",
   "dependencies": {
-    "@cashub/hooks": "^0.3.1",
-    "@cashub/utils": "^0.5.0",
+    "@cashub/hooks": "^0.5.3",
+    "@cashub/utils": "^1.3.2",
     "@googlemaps/markerclusterer": "^2.5.1",
     "@googlemaps/react-wrapper": "^1.1.35",
     "@monaco-editor/react": "^4.6.0",

package/table/InfiniteGridTable.js

@@ -232,6 +232,7 @@ const InfiniteGridTable = _ref => {
         "data-index": index,
         style: {
           position: 'absolute',
+          display: 'flex',
           left: 0,
           top: "".concat(top, "px")
         },
@@ -324,36 +325,31 @@ const TableWrapper = _styledComponents.default.div(_templateObject || (_template
   return backgroundReverse ? 'var(--color-background1)' : 'var(--color-background2)';
 });
 const ResponsiveTable = _styledComponents.default.table(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  /* make fixed width work */\n  position: relative;\n  width: 0px;\n  color: var(--font-on-background);\n  table-layout: fixed;\n  border-collapse: collapse;\n"])));
-const TD = _styledComponents.default.td(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  width: ", ";\n  max-width: ", ";\n  height: 48px;\n  padding: 0 var(--spacing-xs);\n  border-top: 1px solid var(--border-color);\n  border-right: 1px solid var(--border-color);\n  border-bottom: 1px solid var(--border-color);\n  text-align: ", ";\n  background: ", ";\n\n  &:last-child {\n    border-right: none;\n    padding: 0;\n  }\n\n  > span {\n    display: inline-block;\n    width: 100%;\n    padding: 0 2px;\n    overflow: hidden;\n    white-space: pre;\n    text-overflow: ellipsis;\n  }\n"])), _ref3 => {
+const TD = _styledComponents.default.td(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  align-content: center;\n  width: ", ";\n  height: 48px;\n  padding: 0 var(--spacing-xs);\n  border-top: 1px solid var(--border-color);\n  border-right: 1px solid var(--border-color);\n  border-bottom: 1px solid var(--border-color);\n  text-align: ", ";\n  background: ", ";\n\n  &:last-child {\n    border-right: none;\n    padding: 0;\n  }\n\n  > span {\n    display: inline-block;\n    width: 100%;\n    padding: 0 2px;\n    overflow: hidden;\n    white-space: pre;\n    text-overflow: ellipsis;\n  }\n"])), _ref3 => {
   let {
     $width
   } = _ref3;
   return $width;
 }, _ref4 => {
-  let {
-    $width
-  } = _ref4;
-  return $width;
-}, _ref5 => {
   let {
     center
-  } = _ref5;
+  } = _ref4;
   return center ? 'center' : 'left';
-}, _ref6 => {
+}, _ref5 => {
   let {
     backgroundReverse
-  } = _ref6;
+  } = _ref5;
   return backgroundReverse ? 'var(--color-background1)' : 'var(--color-background2)';
 });
-const Scrollbar = _styledComponents.default.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  position: sticky;\n  bottom: 0;\n  width: 100%;\n  overflow: auto;\n  background: ", ";\n\n  ::before {\n    display: block;\n    content: '';\n    width: ", ";\n    height: 1px;\n  }\n\n  ", "\n"])), _ref7 => {
+const Scrollbar = _styledComponents.default.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  position: sticky;\n  bottom: 0;\n  width: 100%;\n  overflow: auto;\n  background: ", ";\n\n  ::before {\n    display: block;\n    content: '';\n    width: ", ";\n    height: 1px;\n  }\n\n  ", "\n"])), _ref6 => {
   let {
     backgroundReverse
-  } = _ref7;
+  } = _ref6;
   return backgroundReverse ? 'var(--color-background1)' : 'var(--color-background2)';
-}, _ref8 => {
+}, _ref7 => {
   let {
     width
-  } = _ref8;
+  } = _ref7;
   return "".concat(width, "px");
 }, (0, _scrollbar.default)({
   size: 'large'

package/table/subComponent/Resizer.js

@@ -19,7 +19,10 @@ const Resizer = _ref => {
   const handleMouseMove = (0, _react.useCallback)(event => {
     event.stopPropagation();
     event.preventDefault();
-    const targetWidth = event.clientX - parentNode.getBoundingClientRect().left;
+    let targetWidth = event.clientX - parentNode.getBoundingClientRect().left;
+    if (targetWidth < 1) {
+      targetWidth = 1;
+    }
     parentNode.style.width = "".concat(targetWidth, "px");
     if (typeof onResize === 'function') {
       onResize(index, targetWidth);