@cashub/ui 0.6.7 → 0.8.0

package/datetimePicker/DatetimePicker.js

@@ -71,7 +71,7 @@ var DatetimePicker = function DatetimePicker(_ref) {
   });
 };
 
-var Wrapper = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  .react-datepicker-wrapper,\n  .react-datepicker__input-container {\n    > input {\n      width: 100%;\n      height: 36px;\n      color: var(--color-white);\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\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(--color-white);\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(--color-white);\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(--color-white);\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(--color-white);\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"])), function (_ref2) {
+var Wrapper = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  .react-datepicker-wrapper,\n  .react-datepicker__input-container {\n    > input {\n      width: 100%;\n      height: 36px;\n      color: var(--color-white);\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\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(--color-white);\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(--color-white);\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(--color-white);\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(--color-white);\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"])), function (_ref2) {
   var disabled = _ref2.disabled;
   return disabled ? 'cursor: not-allowed ; opacity: 0.5;' : '';
 });

package/datetimePicker/TimeInput.js

@@ -1,11 +1,13 @@
 "use strict";
 
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
 
-var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _styledComponents = _interopRequireWildcard(require("styled-components"));
 
 var _rcTimePicker = _interopRequireDefault(require("rc-time-picker"));
 
@@ -13,10 +15,14 @@ require("rc-time-picker/assets/index.css");
 
 var _jsxRuntime = require("react/jsx-runtime");
 
-var _templateObject;
+var _templateObject, _templateObject2;
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
 function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
 
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
@@ -27,11 +33,15 @@ function _defineProperty(obj, key, value) { if (key in obj) { Object.definePrope
 
 var TimeInput = function TimeInput(props) {
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(Wrapper, {
+    disabled: props.disabled,
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_rcTimePicker.default, _objectSpread({}, props))
   });
 };
 
-var Wrapper = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  .rc-time-picker {\n    width: 100%;\n\n    .rc-time-picker-input {\n      height: 36px;\n      border-radius: var(--border-radius);\n      border: var(--border-width) solid var(--border-color);\n      padding: 10px var(--spacing-s);\n      color: var(--font-on-background);\n      background: transparent;\n      font-size: var(--font-body1);\n\n      &:focus {\n        border: var(--border-width) solid var(--color-primary);\n        outline: none;\n      }\n    }\n\n    .rc-time-picker-clear {\n      top: 6px;\n      right: 8px;\n\n      i:after {\n        font-size: var(--font-body1);\n      }\n    }\n  }\n"])));
+var Wrapper = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  .rc-time-picker {\n    width: 100%;\n\n    .rc-time-picker-input {\n      height: 36px;\n      border-radius: var(--border-radius);\n      border: var(--border-width) solid var(--border-color);\n      padding: 10px var(--spacing-s);\n      color: var(--font-on-background);\n      background: transparent;\n      font-size: var(--font-body1);\n\n      ", ";\n\n      &:focus {\n        border: var(--border-width) solid var(--color-primary);\n        outline: none;\n      }\n    }\n\n    .rc-time-picker-clear {\n      top: 6px;\n      right: 8px;\n\n      i:after {\n        font-size: var(--font-body1);\n      }\n    }\n  }\n"])), function (_ref) {
+  var disabled = _ref.disabled;
+  return disabled && (0, _styledComponents.css)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n          opacity: 0.5;\n        "])));
+});
 
 var _default = TimeInput;
 exports.default = _default;

package/image/UploadImage.js

@@ -56,7 +56,13 @@ var UploadImage = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
       alt = _ref$alt === void 0 ? 'user avatar' : _ref$alt,
       _ref$roundedCircle = _ref.roundedCircle,
       roundedCircle = _ref$roundedCircle === void 0 ? false : _ref$roundedCircle,
-      cropperHandler = _ref.cropperHandler;
+      cropperHandler = _ref.cropperHandler,
+      onBlur = _ref.onBlur;
+
+  var _useTranslation = (0, _reactI18next.useTranslation)(),
+      t = _useTranslation.t;
+
+  var refWrapper = (0, _react.useRef)();
 
   var _useState = (0, _react.useState)(src),
       _useState2 = _slicedToArray(_useState, 2),
@@ -68,8 +74,10 @@ var UploadImage = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
       currentFile = _useState4[0],
       setCurrentFile = _useState4[1];
 
-  var _useTranslation = (0, _reactI18next.useTranslation)(),
-      t = _useTranslation.t;
+  var _useState5 = (0, _react.useState)(0),
+      _useState6 = _slicedToArray(_useState5, 2),
+      focusCount = _useState6[0],
+      setFocusCount = _useState6[1];
 
   var handleAvatarRemove = function handleAvatarRemove() {
     setCurrentSrc(src);
@@ -142,11 +150,42 @@ var UploadImage = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
       }
     });
   }, [cropperHandler, handleImageFile]);
+
+  var handleFocus = function handleFocus(e) {
+    e.preventDefault();
+    e.stopPropagation();
+
+    if (e.target.tagName === 'BUTTON') {
+      setFocusCount(focusCount + 1);
+    }
+  };
+
+  var handleBlur = function handleBlur(e) {
+    e.preventDefault();
+    e.stopPropagation();
+    if (refWrapper.current.contains(e.relatedTarget)) return;
+
+    if (e.target === refWrapper.current && onBlur) {
+      onBlur();
+    }
+  };
+
   (0, _react.useEffect)(function () {
     setCurrentSrc(src);
-  }, [src, ref]);
+  }, [src, ref]); // if click button icon,can focus figure element
+
+  (0, _react.useEffect)(function () {
+    if (focusCount === 2) {
+      refWrapper.current.focus();
+      setFocusCount(0);
+    }
+  }, [ref, focusCount]);
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(Wrapper, {
+    ref: refWrapper,
     roundedCircle: roundedCircle,
+    onBlur: handleBlur,
+    onFocus: handleFocus,
+    tabIndex: "0",
     children: [currentSrc && /*#__PURE__*/(0, _jsxRuntime.jsx)(_ImageFluid.default, {
       crossOrigin: "anonymous",
       src: currentSrc,

package/map/CustomLeafletMapContainer.js

@@ -15,7 +15,7 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 
 function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
 
-var CustomLeafletMapContainer = (0, _styledComponents.default)(_reactLeaflet.MapContainer)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  width: 100%;\n  height: ", "px;\n  border-radius: var(--border-radius);\n  z-index: 1;\n\n  &:focus {\n    border: 1px solid var(--border-color);\n    box-shadow: var(--box-shadow);\n  }\n\n  .leaflet-control-container {\n    .leaflet-bar {\n      box-shadow: var(--box-shadow);\n      border-radius: var(--border-radius);\n\n      a {\n        background: transparent;\n        border-bottom: 1px solid var(--border-color);\n        color: #fff;\n\n        &:last-child {\n          border-bottom: none;\n        }\n\n        &.leaflet-disabled {\n          opacity: 0.5;\n        }\n      }\n    }\n\n    .leaflet-left .leaflet-control {\n      margin-left: var(--spacing-s);\n    }\n\n    .leaflet-right .leaflet-control {\n      margin-right: var(--spacing-s);\n    }\n\n    .leaflet-top .leaflet-control {\n      margin-top: var(--spacing-s);\n    }\n\n    .leaflet-control {\n      font-weight: bold;\n      background: var(--color-background1);\n\n      &.leaflet-control-attribution {\n        background: var(--font-on-mute);\n        margin: 0;\n      }\n    }\n  }\n\n  &.leaflet-touch {\n    .leaflet-bar {\n      border: none;\n\n      a {\n        width: 24px;\n        height: 24px;\n        line-height: 24px;\n      }\n    }\n\n    .leaflet-left .leaflet-control {\n      margin-left: var(--spacing-s);\n    }\n\n    .leaflet-right .leaflet-control {\n      margin-right: var(--spacing-s);\n    }\n\n    .leaflet-top .leaflet-control {\n      margin-top: var(--spacing-s);\n    }\n  }\n\n  .marker-cluster {\n    background: var(--color-primary) a1;\n\n    div {\n      background: var(--color-primary);\n    }\n  }\n\n  .leaflet-popup-content-wrapper {\n    background: transparent;\n    box-shadow: unset;\n  }\n\n  .leaflet-popup-tip {\n    display: none;\n  }\n"])), function (_ref) {
+var CustomLeafletMapContainer = (0, _styledComponents.default)(_reactLeaflet.MapContainer)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  width: 100%;\n  height: ", "px;\n  border-radius: var(--border-radius);\n  z-index: 1;\n\n  &:focus {\n    border: 1px solid var(--border-color);\n    box-shadow: var(--box-shadow);\n  }\n\n  .leaflet-control-container {\n    .leaflet-control-zoom {\n      box-shadow: var(--box-shadow);\n      border-radius: var(--border-radius);\n\n      a {\n        background: transparent;\n        border-bottom: 1px solid var(--border-color);\n        color: #fff;\n\n        &:last-child {\n          border-bottom: none;\n        }\n\n        &.leaflet-disabled {\n          opacity: 0.5;\n        }\n      }\n    }\n\n    .leaflet-draw {\n      box-shadow: var(--box-shadow);\n      border-radius: var(--border-radius);\n\n      a {\n        background-color: var(--color-background1);\n      }\n\n      .leaflet-draw-draw-polyline {\n        background-position: -3px -3px;\n      }\n\n      .leaflet-draw-draw-polygon {\n        background-position: -32px -3px;\n      }\n\n      .leaflet-draw-draw-rectangle {\n        background-position: -63px -3px;\n      }\n\n      .leaflet-draw-draw-circle {\n        background-position: -93px -3px;\n      }\n\n      .leaflet-draw-draw-marker {\n        background-position: -123px -3px;\n      }\n\n      .leaflet-draw-draw-circlemarker {\n        background-position: -273px -3px;\n      }\n\n      .leaflet-draw-edit-edit {\n        background-position: -213px -3px;\n      }\n\n      .leaflet-draw-edit-remove {\n        background-position: -243px -3px;\n      }\n    }\n\n    .leaflet-left .leaflet-control {\n      margin-left: var(--spacing-s);\n    }\n\n    .leaflet-right .leaflet-control {\n      margin-right: var(--spacing-s);\n    }\n\n    .leaflet-top .leaflet-control {\n      margin-top: var(--spacing-s);\n    }\n\n    .leaflet-control {\n      font-weight: bold;\n      background: var(--color-background1);\n\n      &.leaflet-control-attribution {\n        background: var(--font-on-mute);\n        margin: 0;\n      }\n    }\n  }\n\n  .leaflet-edit-move {\n    border-radius: 50px;\n    border-color: var(--border-color);\n  }\n\n  .leaflet-edit-resize {\n    border-radius: 50px;\n    border-color: var(--border-color);\n  }\n\n  &.leaflet-touch {\n    .leaflet-bar {\n      border: none;\n\n      a {\n        width: 24px;\n        height: 24px;\n        line-height: 24px;\n      }\n    }\n\n    .leaflet-left .leaflet-control {\n      margin-left: var(--spacing-s);\n    }\n\n    .leaflet-right .leaflet-control {\n      margin-right: var(--spacing-s);\n    }\n\n    .leaflet-top .leaflet-control {\n      margin-top: var(--spacing-s);\n    }\n  }\n\n  .marker-cluster {\n    background: var(--color-primary) a1;\n\n    div {\n      background: var(--color-primary);\n    }\n  }\n\n  .leaflet-popup-content-wrapper {\n    background: transparent;\n    box-shadow: unset;\n  }\n\n  .leaflet-popup-tip {\n    display: none;\n  }\n\n  .sr-only {\n    display: none;\n  }\n"])), function (_ref) {
   var height = _ref.height;
   return height;
 });

package/map/DrawControl.js

@@ -0,0 +1,150 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = require("react");
+
+var _leaflet = _interopRequireWildcard(require("leaflet"));
+
+var _leafletDraw = _interopRequireDefault(require("leaflet-draw"));
+
+require("leaflet-draw/dist/leaflet.draw.css");
+
+var _core = require("@react-leaflet/core");
+
+var _fastDeepEqual = _interopRequireDefault(require("fast-deep-equal"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+
+var eventHandlers = {
+  onEdited: 'draw:edited',
+  onDrawStart: 'draw:drawstart',
+  onDrawStop: 'draw:drawstop',
+  onDrawVertex: 'draw:drawvertex',
+  onEditStart: 'draw:editstart',
+  onEditMove: 'draw:editmove',
+  onEditResize: 'draw:editresize',
+  onEditVertex: 'draw:editvertex',
+  onEditStop: 'draw:editstop',
+  onDeleted: 'draw:deleted',
+  onDeleteStart: 'draw:deletestart',
+  onDeleteStop: 'draw:deletestop'
+};
+_leaflet.default.drawLocal.edit.handlers.edit.tooltip = {
+  text: 'Drag handles or markers to edit features.',
+  subtext: null
+};
+
+var DrawControl = function DrawControl(props) {
+  var _useLeafletContext = (0, _core.useLeafletContext)(),
+      map = _useLeafletContext.map,
+      layerContainer = _useLeafletContext.layerContainer;
+
+  var drawRef = (0, _react.useRef)();
+  var propsRef = (0, _react.useRef)(props);
+  var onDrawCreate = (0, _react.useCallback)(function (e) {
+    var container = layerContainer;
+    container.addLayer(e.layer);
+  }, [layerContainer]);
+  var enableEdit = (0, _react.useCallback)(function () {
+    // programatically enable edit mode
+    // https://github.com/Leaflet/Leaflet.draw/issues/129
+    var editHandler = drawRef.current._toolbars.edit.getModeHandlers()[0].handler; // this is hacky but needed otherwise enabling the edit mode will fail
+    // when the code attempts to fire map events for edit start etc
+
+
+    editHandler._map = map;
+    editHandler.enable();
+  }, [map]);
+  (0, _react.useEffect)(function () {
+    // if rendered and all props no change prevent render again
+    if (drawRef.current && props.draw !== undefined && (0, _fastDeepEqual.default)(props.draw, propsRef.current.draw) && (0, _fastDeepEqual.default)(props.edit, propsRef.current.edit) && props.position === propsRef.current.position) {
+      return;
+    } // add event listener
+
+
+    for (var key in eventHandlers) {
+      map.on(eventHandlers[key], function (evt) {
+        var handlers = Object.keys(eventHandlers).filter(function (handler) {
+          return eventHandlers[handler] === evt.type;
+        });
+
+        if (handlers.length === 1) {
+          var handler = handlers[0];
+          props[handler] && props[handler](evt);
+        }
+      });
+    } // add create draw event listener
+
+
+    map.on(_leaflet.default.Draw.Event.CREATED, onDrawCreate); // create draw element and render on map
+
+    drawRef.current = createDrawElement(props, layerContainer);
+    map.addControl(drawRef.current);
+    drawRef.current.enableEdit = enableEdit;
+
+    if (props.onMounted) {
+      props.onMounted(drawRef.current);
+    }
+
+    return function () {
+      drawRef.current.remove(map);
+      drawRef.current = null;
+      map.off(_leaflet.default.Draw.Event.CREATED, onDrawCreate);
+
+      for (var _key in eventHandlers) {
+        if (props[_key]) {
+          map.off(eventHandlers[_key], props[_key]);
+        }
+      }
+    };
+  }, [props, map, layerContainer, onDrawCreate, enableEdit]);
+  return null;
+};
+
+var createDrawElement = function createDrawElement(props, layerContainer) {
+  var draw = props.draw,
+      edit = props.edit,
+      position = props.position;
+  var options = {
+    edit: {
+      featureGroup: layerContainer
+    }
+  };
+
+  if (draw !== undefined) {
+    if (_typeof(draw) === 'object') {
+      options.draw = _objectSpread({}, draw);
+    } else {
+      options.draw = draw;
+    }
+  }
+
+  if (edit) {
+    options.edit = _objectSpread(_objectSpread({}, options.edit), edit);
+  }
+
+  if (position) {
+    options.position = position;
+  }
+
+  return new _leaflet.Control.Draw(options);
+};
+
+var _default = DrawControl;
+exports.default = _default;

package/map/LeafletMap.js

@@ -52,7 +52,8 @@ var LeafletMap = function LeafletMap(_ref) {
   } : _ref$data,
       onError = _ref.onError,
       customPopup = _ref.customPopup,
-      checkPrimaryLocation = _ref.checkPrimaryLocation;
+      checkPrimaryLocation = _ref.checkPrimaryLocation,
+      children = _ref.children;
 
   var _useState = (0, _react.useState)(true),
       _useState2 = _slicedToArray(_useState, 2),
@@ -94,7 +95,7 @@ var LeafletMap = function LeafletMap(_ref) {
     }
 
     locations.forEach(function (e, index) {
-      if (!e.latitude && e.latitude !== 0 || !e.longitude && e.longitude !== 0 || e.latitude === 0 && e.longitude === 0) {
+      if (!e.latitude && e.latitude !== 0 || !e.longitude && e.longitude !== 0 || e.latitude === 0 && e.longitude === 0 || e.latitude === '0' && e.longitude === '0') {
         return;
       } // prevent duplicate LatLngBounds
 
@@ -172,7 +173,7 @@ var LeafletMap = function LeafletMap(_ref) {
           });
         },
         children: markers
-      })]
+      }), children]
     });
   }
 
@@ -187,6 +188,9 @@ var MapInteractor = function MapInteractor(_ref2) {
       defaultPosition = _ref2.defaultPosition,
       position = _ref2.position;
   var map = (0, _reactLeaflet.useMapEvents)({
+    click: function click(e) {
+      e.originalEvent.stopPropagation();
+    },
     focus: function focus() {
       map.scrollWheelZoom.enable();
     },

package/map/index.js

@@ -9,6 +9,12 @@ Object.defineProperty(exports, "CustomLeafletMapContainer", {
     return _CustomLeafletMapContainer.default;
   }
 });
+Object.defineProperty(exports, "DrawControl", {
+  enumerable: true,
+  get: function get() {
+    return _DrawControl.default;
+  }
+});
 Object.defineProperty(exports, "LeafletMap", {
   enumerable: true,
   get: function get() {
@@ -20,4 +26,6 @@ var _CustomLeafletMapContainer = _interopRequireDefault(require("./CustomLeaflet
 
 var _LeafletMap = _interopRequireDefault(require("./LeafletMap"));
 
+var _DrawControl = _interopRequireDefault(require("./DrawControl"));
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cashub/ui",
-  "version": "0.6.7",
+  "version": "0.8.0",
   "private": false,
   "author": "CASHUB Team",
   "description": "CASHUB UI components library",

package/section/SectionToolbar.js

@@ -3,11 +3,11 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.SectionToolbarItem = exports.SectionToolbar = void 0;
+exports.default = void 0;
 
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 
-var _templateObject, _templateObject2;
+var _templateObject;
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
@@ -15,8 +15,5 @@ function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(
 
 var SectionToolbar = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n\n  > *:not(:first-child) {\n    margin-left: var(--spacing-s);\n  }\n"])));
 
-exports.SectionToolbar = SectionToolbar;
-
-var SectionToolbarItem = _styledComponents.default.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n\n  > *:not(:first-child) {\n    margin-left: var(--spacing-s);\n  }\n"])));
-
-exports.SectionToolbarItem = SectionToolbarItem;
+var _default = SectionToolbar;
+exports.default = _default;

package/section/SectionToolbarItem.js

@@ -0,0 +1,19 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var _templateObject;
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
+
+var SectionToolbarItem = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n\n  > *:not(:first-child) {\n    margin-left: var(--spacing-s);\n  }\n"])));
+
+var _default = SectionToolbarItem;
+exports.default = _default;

package/section/index.js

@@ -3,11 +3,6 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-var _exportNames = {
-  Section: true,
-  SectionBody: true,
-  SectionHeader: true
-};
 Object.defineProperty(exports, "Section", {
   enumerable: true,
   get: function get() {
@@ -26,6 +21,18 @@ Object.defineProperty(exports, "SectionHeader", {
     return _SectionHeader.default;
   }
 });
+Object.defineProperty(exports, "SectionToolbar", {
+  enumerable: true,
+  get: function get() {
+    return _SectionToolbar.default;
+  }
+});
+Object.defineProperty(exports, "SectionToolbarItem", {
+  enumerable: true,
+  get: function get() {
+    return _SectionToolbarItem.default;
+  }
+});
 
 var _Section = _interopRequireDefault(require("./Section"));
 
@@ -33,18 +40,8 @@ var _SectionBody = _interopRequireDefault(require("./SectionBody"));
 
 var _SectionHeader = _interopRequireDefault(require("./SectionHeader"));
 
-var _SectionToolbar = require("./SectionToolbar");
+var _SectionToolbar = _interopRequireDefault(require("./SectionToolbar"));
 
-Object.keys(_SectionToolbar).forEach(function (key) {
-  if (key === "default" || key === "__esModule") return;
-  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
-  if (key in exports && exports[key] === _SectionToolbar[key]) return;
-  Object.defineProperty(exports, key, {
-    enumerable: true,
-    get: function get() {
-      return _SectionToolbar[key];
-    }
-  });
-});
+var _SectionToolbarItem = _interopRequireDefault(require("./SectionToolbarItem"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

package/table/Table.js

@@ -122,7 +122,7 @@ var Table = function Table(_ref) {
     var containerLength = event.target.offsetWidth;
     var textLength = event.target.scrollWidth;
 
-    if (textLength > containerLength) {
+    if (textLength >= containerLength) {
       event.stopPropagation();
       (0, _Popover.default)({
         id: id,