@majoo-ui/react 2.2.0 → 2.2.1

package/components/form/components/InputSelect/InputSelect.esm.js

@@ -219,23 +219,17 @@ const OptionWrapper = styled('div', {
   backgroundColor: '$bgWhite',
   boxShadow: '0px 2px 12px #00000014',
   width: '100%',
-  maxHeight: '300px',
-  position: 'absolute',
-  float: 'left',
-  top: '100%',
-  left: '0',
+  // In-flow on purpose: Popover's flip/shift/size measure the floating element,
+  // which is only as tall as this wrapper. An absolute wrapper measures 0px and
+  // the dropdown never flips. The cap shrinks to the space Popover reports.
+  maxHeight: 'min(300px, var(--majoo-popover-available-height, 300px))',
+  position: 'relative',
   variants: {
+    // Kept for API compatibility only — Popover (floating-ui) owns placement now,
+    // treating it as a preference that flips when the preferred side lacks room.
     placement: {
-      bottom: {
-        top: '100%',
-        left: '0',
-        transform: 'none'
-      },
-      top: {
-        top: '0',
-        left: '0',
-        transform: 'translate(0, -100%)'
-      }
+      bottom: {},
+      top: {}
     },
     withFooter: {
       true: {
@@ -683,13 +677,8 @@ const InputSelect = /*#__PURE__*/React.forwardRef((_a, ref) => {
                     position: 'absolute',
                     inset: 0,
                     zIndex: '$tooltip',
-                    top: item.length > 0 ? '0px' : placement === 'top' ? '-20px' : '20px',
-                    // bottom: '80px',
-                    width: '100%',
-                    height: scrollerRef.current ? scrollerRef.current.clientHeight : '40px',
                     backgroundColor: '$bgWhite',
-                    opacity: 0.8,
-                    transform: placement === 'top' ? 'translate(0, -100%)' : 'none'
+                    opacity: 0.8
                   },
                   children: jsx(Text, {
                     variant: "caption",
@@ -699,9 +688,10 @@ const InputSelect = /*#__PURE__*/React.forwardRef((_a, ref) => {
                   condition: renderFooter && typeof renderFooter === 'function',
                   wrapper: child => jsxs(Box, {
                     css: {
-                      position: 'absolute',
-                      float: 'left',
-                      display: isOpen ? 'block' : 'none',
+                      position: 'relative',
+                      display: isOpen ? 'flex' : 'none',
+                      flexDirection: 'column',
+                      maxHeight: 'var(--majoo-popover-available-height, calc(100vh - 160px))',
                       zIndex: '$popover',
                       width: '100%'
                     },
@@ -714,11 +704,16 @@ const InputSelect = /*#__PURE__*/React.forwardRef((_a, ref) => {
                   }, {
                     suppressRefError: true
                   }), {
-                    css: Object.assign({
+                    css: Object.assign(Object.assign({
                       display: isOpen ? 'block' : 'none',
                       zIndex: '$popover',
-                      pointerEvents: 'auto'
-                    }, optionCss),
+                      pointerEvents: 'auto',
+                      minHeight: isLoading ? '40px' : undefined
+                    }, renderFooter && typeof renderFooter === 'function' ? {
+                      flex: 1,
+                      minHeight: 0,
+                      maxHeight: 'none'
+                    } : {}), optionCss),
                     withFooter: renderFooter && typeof renderFooter === 'function',
                     placement: placement,
                     children: [!search && embedSearch && isOpen && jsx(SelectContainer, {

package/components/form/components/InputSelectCheck/InputSelectCheck.esm.js

@@ -36,6 +36,9 @@ import { ConditionalWrapper } from '../../../../wrapper/ConditionalWrapper.esm.j
 import OptionGroupItem from './OptionGroupItem.esm.js';
 import { useMountedLayoutEffect } from 'react-table';
 import { useVirtual } from 'react-virtual';
+import { useFloating, autoUpdate } from '@floating-ui/react';
+import { Portal } from '@majoo-ui/helpers';
+import { createPopoverMiddleware } from '../../../popover/middleware.esm.js';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 
 const startTransition = React__default.startTransition || (callback => {
@@ -223,34 +226,23 @@ const TagWrapper = styled(Box, {
   margin: '10px 0',
   gap: '5px'
 });
+
+// Positioned by floating-ui (see `useFloating` below) and portalled, so it is
+// neither clipped by an `overflow: hidden` ancestor nor pushed off the viewport.
+// Its children stay in-flow: floating-ui measures this element to decide flips.
 const OptionWrapper = styled('div', {
   display: 'none',
   overflow: 'hidden',
-  zIndex: 12,
+  zIndex: '$tooltip',
+  pointerEvents: 'auto',
   borderRadius: '$sm',
   backgroundColor: '$bgWhite',
   boxShadow: '0px 2px 12px #00000014',
-  width: '100%',
-  // height: '160px',
-  position: 'absolute',
-  float: 'left',
-  // top: '40px',
-  left: '0px',
+  width: 'var(--majoo-popover-reference-width, 100%)',
   color: '$textPrimary',
-  variants: {
-    placement: {
-      bottom: {
-        top: '100%',
-        left: '0',
-        transform: 'none'
-      },
-      top: {
-        top: '0',
-        left: '0',
-        transform: 'translate(0, -100%)'
-      }
-    }
-  }
+  fontFamily: 'inherit',
+  fontSize: '$short-content-regular',
+  textAlign: 'left'
 });
 const Option = styled('div', {
   flexDirection: 'column',
@@ -258,7 +250,7 @@ const Option = styled('div', {
   borderRadius: '$lg',
   overflowY: 'auto',
   padding: '8px 16px',
-  maxHeight: '160px',
+  maxHeight: 'min(160px, var(--majoo-popover-available-height, 160px))',
   height: 'auto',
   '@sm': {
     borderRadius: 'unset'
@@ -815,6 +807,20 @@ const InputSelectCheck = /*#__PURE__*/forwardRef(({
       }
     }
   });
+
+  // downshift owns open/close and outside-click; floating-ui only positions the
+  // menu. The floating ref is attached only while the menu is shown, so a closed
+  // select does not keep autoUpdate's scroll/resize listeners alive.
+  // `placement` is a preference: the menu flips when that side lacks room.
+  const isMenuShown = isOpen && disabled === false;
+  const floating = useFloating({
+    open: isMenuShown,
+    placement,
+    whileElementsMounted: autoUpdate,
+    middleware: createPopoverMiddleware({
+      sideOffset: 4
+    })
+  });
   const memoOptions = useMemo(() => {
     // Skip expensive operations for very large datasets
     const isVeryLarge = option?.length > 10000;
@@ -1019,6 +1025,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef(({
     mobileOnly: mobileOnly,
     desktopOnly: desktopOnly,
     children: [/*#__PURE__*/jsxs(Select, {
+      ref: floating.refs.setReference,
       size: size,
       disabled: disabled || readOnly,
       isInvalid: isInvalid,
@@ -1162,152 +1169,153 @@ const InputSelectCheck = /*#__PURE__*/forwardRef(({
       },
       color: "brand",
       children: `${totalOptions ? totalOptions : selectedItems?.filter(item => item?.id !== '!all')?.length} ${labelCounter || t('labelCounterText', 'Item terpilih')}`
-    }), /*#__PURE__*/jsxs(OptionWrapper, {
-      placement: placement,
-      css: {
-        display: isOpen && disabled === false ? 'block' : 'none',
-        top: size === 'lg' ? '45px' : '35px',
-        minHeight: isLoading ? 40 : 0
-      },
-      children: [isLoading && /*#__PURE__*/jsx(Flex, {
-        justify: "center",
-        align: "center",
+    }), /*#__PURE__*/jsx(Portal, {
+      children: /*#__PURE__*/jsxs(OptionWrapper, {
+        ref: isMenuShown ? floating.refs.setFloating : null,
+        style: {
+          position: floating.strategy,
+          top: floating.y ?? 0,
+          left: floating.x ?? 0
+        },
         css: {
-          position: 'absolute',
-          inset: 0,
-          zIndex: '$tooltip',
-          top: items.length > 0 ? '0px' : placement === 'top' ? '-20px' : '0px',
-          // bottom: '80px',
-          width: '100%',
-          minHeight: 40,
-          height: scrollerRef.current ? scrollerRef.current.clientHeight : '40px',
-          backgroundColor: '$bgWhite',
-          opacity: 0.8,
-          transform: placement === 'top' ? 'translate(0, -100%)' : 'none'
+          display: isMenuShown ? 'block' : 'none',
+          minHeight: isLoading ? 40 : 0
         },
-        children: /*#__PURE__*/jsx(Text, {
-          variant: "caption",
-          children: "Loading...."
-        })
-      }), items.length > 0 || isLoading ? /*#__PURE__*/jsx(Option, {
-        ...getMenuProps({
-          ref: scrollerRef
-        }, {
-          suppressRefError: true
-        }),
-        css: optionListCss,
-        children: /*#__PURE__*/jsx(ConditionalWrapper, {
-          condition: !!fetchData && items.length > 0,
-          wrapper: child => /*#__PURE__*/jsx(InfiniteScroll, {
-            loadMore: () => {
-              if (!isLoading) {
-                if (scrollerRef.current) {
-                  scrollerRef.current.scrollBy(0, -5);
+        children: [isLoading && /*#__PURE__*/jsx(Flex, {
+          justify: "center",
+          align: "center",
+          css: {
+            position: 'absolute',
+            inset: 0,
+            zIndex: '$tooltip',
+            minHeight: 40,
+            backgroundColor: '$bgWhite',
+            opacity: 0.8
+          },
+          children: /*#__PURE__*/jsx(Text, {
+            variant: "caption",
+            children: "Loading...."
+          })
+        }), items.length > 0 || isLoading ? /*#__PURE__*/jsx(Option, {
+          ...getMenuProps({
+            ref: scrollerRef
+          }, {
+            suppressRefError: true
+          }),
+          css: optionListCss,
+          children: /*#__PURE__*/jsx(ConditionalWrapper, {
+            condition: !!fetchData && items.length > 0,
+            wrapper: child => /*#__PURE__*/jsx(InfiniteScroll, {
+              loadMore: () => {
+                if (!isLoading) {
+                  if (scrollerRef.current) {
+                    scrollerRef.current.scrollBy(0, -5);
+                  }
+                  fetchData?.({
+                    query
+                  });
                 }
-                fetchData?.({
-                  query
-                });
-              }
-            },
-            hasMore: true,
-            threshold: 0,
-            useWindow: false,
-            children: child
-          }, isLoading),
-          children: isOpen && shouldVirtualize ?
-          /*#__PURE__*/
-          // Virtualized rendering for large lists
-          jsx(Fragment, {
-            children: /*#__PURE__*/jsx("div", {
-              style: {
-                height: `${rowVirtualizer.totalSize}px`,
-                position: 'relative',
-                width: '100%'
               },
-              children: rowVirtualizer.virtualItems.map(virtualRow => {
-                const virtualItem = getItemAtIndex(virtualRow.index);
-                if (!virtualItem) return null;
-                const {
-                  type,
-                  item
-                } = virtualItem;
-                return /*#__PURE__*/jsx("div", {
-                  style: {
-                    position: 'absolute',
-                    top: 0,
-                    left: 0,
-                    width: '100%',
-                    transform: `translateY(${virtualRow.start}px)`
-                  },
-                  children: type === 'group' ?
-                  /*#__PURE__*/
-                  // Render option group header (without children, as they're rendered separately)
-                  jsxs(ItemWrapper, {
-                    ...getItemProps({
-                      item,
-                      index: virtualRow.index,
-                      disabled: item.isDisabled
-                    }),
-                    css: {
-                      backgroundColor: highlightedIndex === virtualRow.index ? '$bgGray' : '$bgWhite',
-                      cursor: item.isDisabled ? 'not-allowed' : 'pointer',
-                      color: item.isDisabled ? '$textDisable' : 'textPrimary',
-                      fontWeight: 600
+              hasMore: true,
+              threshold: 0,
+              useWindow: false,
+              children: child
+            }, isLoading),
+            children: isOpen && shouldVirtualize ?
+            /*#__PURE__*/
+            // Virtualized rendering for large lists
+            jsx(Fragment, {
+              children: /*#__PURE__*/jsx("div", {
+                style: {
+                  height: `${rowVirtualizer.totalSize}px`,
+                  position: 'relative',
+                  width: '100%'
+                },
+                children: rowVirtualizer.virtualItems.map(virtualRow => {
+                  const virtualItem = getItemAtIndex(virtualRow.index);
+                  if (!virtualItem) return null;
+                  const {
+                    type,
+                    item
+                  } = virtualItem;
+                  return /*#__PURE__*/jsx("div", {
+                    style: {
+                      position: 'absolute',
+                      top: 0,
+                      left: 0,
+                      width: '100%',
+                      transform: `translateY(${virtualRow.start}px)`
                     },
-                    children: [/*#__PURE__*/jsx(IconWrapper, {
+                    children: type === 'group' ?
+                    /*#__PURE__*/
+                    // Render option group header (without children, as they're rendered separately)
+                    jsxs(ItemWrapper, {
+                      ...getItemProps({
+                        item,
+                        index: virtualRow.index,
+                        disabled: item.isDisabled
+                      }),
                       css: {
-                        width: '16px',
-                        height: '16px',
-                        border: '1px solid $bgBorder',
+                        backgroundColor: highlightedIndex === virtualRow.index ? '$bgGray' : '$bgWhite',
                         cursor: item.isDisabled ? 'not-allowed' : 'pointer',
-                        ...checkBoxCss
+                        color: item.isDisabled ? '$textDisable' : 'textPrimary',
+                        fontWeight: 600
                       },
-                      children: !item?.hideCheck && item.isDisabled ? /*#__PURE__*/jsx(CheckOutline, {
-                        color: colors.iconDisable
-                      }) : item?.children?.filter(e => selectedValueSet.has(e.id) && !e.isDisabled)?.length === item?.children?.filter(e => !e.isDisabled)?.length ? /*#__PURE__*/jsx(CheckOutline, {
-                        color: colors.iconBrand
-                      }) : item?.children?.filter(e => selectedValueSet.has(e.id) && !e.isDisabled)?.length > 0 ? /*#__PURE__*/jsx(IndeterminateFilled, {
-                        children: "-"
-                      }) : null
-                    }), /*#__PURE__*/jsx(Item, {
-                      css: {
-                        backgroundColor: 'unset',
-                        width: '100%'
-                      },
-                      children: item.render ? item.render?.(item.name) : item.name
-                    })]
-                  }) :
-                  // Render regular item or child item
-                  renderOptionItem(item, virtualRow.index, type === 'child')
-                }, `${type}-${item.id}-${virtualRow.index}`);
+                      children: [/*#__PURE__*/jsx(IconWrapper, {
+                        css: {
+                          width: '16px',
+                          height: '16px',
+                          border: '1px solid $bgBorder',
+                          cursor: item.isDisabled ? 'not-allowed' : 'pointer',
+                          ...checkBoxCss
+                        },
+                        children: !item?.hideCheck && item.isDisabled ? /*#__PURE__*/jsx(CheckOutline, {
+                          color: colors.iconDisable
+                        }) : item?.children?.filter(e => selectedValueSet.has(e.id) && !e.isDisabled)?.length === item?.children?.filter(e => !e.isDisabled)?.length ? /*#__PURE__*/jsx(CheckOutline, {
+                          color: colors.iconBrand
+                        }) : item?.children?.filter(e => selectedValueSet.has(e.id) && !e.isDisabled)?.length > 0 ? /*#__PURE__*/jsx(IndeterminateFilled, {
+                          children: "-"
+                        }) : null
+                      }), /*#__PURE__*/jsx(Item, {
+                        css: {
+                          backgroundColor: 'unset',
+                          width: '100%'
+                        },
+                        children: item.render ? item.render?.(item.name) : item.name
+                      })]
+                    }) :
+                    // Render regular item or child item
+                    renderOptionItem(item, virtualRow.index, type === 'child')
+                  }, `${type}-${item.id}-${virtualRow.index}`);
+                })
               })
-            })
-          }) :
-          // Non-virtualized rendering for small lists
-          isOpen && items.map((item, index) => item?.children ? renderOptionGroupItem(item) : renderOptionItem(item, index))
-        })
-      }) : /*#__PURE__*/jsx(Option, {
-        css: {
-          height: 'auto'
-        },
-        ...getMenuProps({}, {
-          suppressRefError: true
-        }),
-        children: /*#__PURE__*/jsxs(StyledDiv, {
-          children: [/*#__PURE__*/jsx("div", {
-            style: {
-              marginRight: '6px'
-            },
-            children: /*#__PURE__*/jsx(CircleInfoOutline, {
-              size: "16px",
-              color: colors.iconDisable,
+            }) :
+            // Non-virtualized rendering for small lists
+            isOpen && items.map((item, index) => item?.children ? renderOptionGroupItem(item) : renderOptionItem(item, index))
+          })
+        }) : /*#__PURE__*/jsx(Option, {
+          css: {
+            height: 'auto'
+          },
+          ...getMenuProps({}, {
+            suppressRefError: true
+          }),
+          children: /*#__PURE__*/jsxs(StyledDiv, {
+            children: [/*#__PURE__*/jsx("div", {
               style: {
-                verticalAlign: 'text-bottom'
-              }
-            })
-          }), textEmptyItem ?? t('emptyItemText', 'Item tidak ditemukan')]
-        })
-      })]
+                marginRight: '6px'
+              },
+              children: /*#__PURE__*/jsx(CircleInfoOutline, {
+                size: "16px",
+                color: colors.iconDisable,
+                style: {
+                  verticalAlign: 'text-bottom'
+                }
+              })
+            }), textEmptyItem ?? t('emptyItemText', 'Item tidak ditemukan')]
+          })
+        })]
+      })
     })]
   });
 });

package/components/mapPicker/MapPicker.esm.js

@@ -34,7 +34,6 @@ function MapPicker(props) {
   const isDesktop = useMediaQuery('(min-width: 767px)');
   const {
     center,
-    setCenter,
     places,
     searchQuery,
     searchResult,
@@ -49,12 +48,15 @@ function MapPicker(props) {
     showSelectButton,
     onChange
   });
+  // Keyed on the coordinates, not the object: a parent re-rendering with a new but equal
+  // `value` must not pull the map back from where the user dragged it. handleSearchLatLng is
+  // left out because it changes with every new `onChange`, which InputMapPicker passes inline.
   useEffect(() => {
     if (value && (value === null || value === void 0 ? void 0 : value.lat) && (value === null || value === void 0 ? void 0 : value.lng)) {
-      setCenter(value);
       handleSearchLatLng(value);
     }
-  }, [value, setCenter]);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [value === null || value === void 0 ? void 0 : value.lat, value === null || value === void 0 ? void 0 : value.lng]);
   function handleMarkerClick() {
     if (places.length > 0) {
       const mapObject = {

package/components/mapPicker/hooks/useMapSearch.esm.js

@@ -82,7 +82,19 @@ function useMapSearch({
     }, abortControllerRef.current.signal);
     // getFullAddress returns null if aborted
     if (fullAddress) {
-      handleSelect(fullAddress);
+      // Keep the chosen item's coordinates; the reverse geocode only supplies the address.
+      const {
+        display_name,
+        place_id,
+        address
+      } = fullAddress;
+      handleSelect({
+        lat: item.lat,
+        lon: item.lon,
+        display_name,
+        place_id,
+        address
+      });
     }
   }), [getFullAddress, handleSelect]);
   const handleSearchLatLng = useCallback(latLng => __awaiter(this, void 0, void 0, function* () {
@@ -90,19 +102,26 @@ function useMapSearch({
     // Cancel any previous pending request
     (_b = abortControllerRef.current) === null || _b === void 0 ? void 0 : _b.abort();
     abortControllerRef.current = new AbortController();
+    // Move the center now, so a re-render while the address loads (or a failed lookup)
+    // does not send the map back to the previous point.
+    setCenter({
+      lat: Number(latLng.lat),
+      lng: Number(latLng.lng)
+    });
     const fullAddress = yield getFullAddress(latLng, abortControllerRef.current.signal);
     // getFullAddress returns null if aborted
     if (fullAddress) {
+      // Nominatim answers with the coordinates of the OSM object it matched (for a large
+      // polygon such as a golf course, its centroid), not the point that was asked about.
+      // Keep the requested point; the reverse geocode only supplies the address.
       const {
-        lat,
-        lon,
         display_name,
         place_id,
         address
       } = fullAddress;
       handleSelect({
-        lat,
-        lon,
+        lat: String(latLng.lat),
+        lon: String(latLng.lng),
         display_name,
         place_id,
         address

package/components/popover/Popover.esm.js

@@ -1,9 +1,10 @@
-import { useFloating, offset, shift, flip, useInteractions, useClick, useDismiss, FloatingFocusManager, FloatingPortal } from '@floating-ui/react';
+import { useFloating, autoUpdate, useInteractions, useClick, useDismiss, FloatingFocusManager, FloatingPortal } from '@floating-ui/react';
 import PropTypes from 'prop-types';
 import { useState, useEffect, useContext, cloneElement, createContext } from 'react';
 import Flex from '../../layout/flex/Flex.esm.js';
 import { foundations } from '@majoo-ui/core';
 import { ConditionalWrapper } from '../../wrapper/ConditionalWrapper.esm.js';
+import { createPopoverMiddleware } from './middleware.esm.js';
 import { jsx, Fragment } from 'react/jsx-runtime';
 
 const {
@@ -17,7 +18,7 @@ const Popover = ({
   placement,
   sideOffset = 5,
   hideOnScroll = false,
-  flip: flip$1 = true,
+  flip = true,
   onClose
 }) => {
   const [openState, setOpenState] = useState(false);
@@ -27,9 +28,17 @@ const Popover = ({
   useEffect(() => {
     if (onOpenChange) onOpenChange(openState);
   }, [openState, onOpenChange]);
+
+  // floating-ui measures the element PopoverContent renders, so its children must
+  // be in-flow (see createPopoverMiddleware). autoUpdate recomputes when content
+  // height changes after mount (async options, a menu toggling display).
   const floatingHook = useFloating({
     open: openState,
-    middleware: [offset(sideOffset), shift(), flip$1 && flip()],
+    whileElementsMounted: autoUpdate,
+    middleware: createPopoverMiddleware({
+      sideOffset,
+      flip
+    }),
     onOpenChange: isOpen => {
       setOpenState(isOpen);
       !isOpen && onClose?.();

package/components/popover/middleware.esm.js

@@ -0,0 +1,43 @@
+import { offset, flip, shift, size } from '@floating-ui/react';
+
+/**
+ * The floating-ui middleware every majoo-ui dropdown shares, so Popover and the
+ * components that drive floating-ui themselves (InputSelectCheck) place content
+ * the same way.
+ *
+ * - `flip` treats `placement` as a preference: the other side is used when the
+ *   preferred one lacks room.
+ * - `size` writes two CSS variables on the floating element, which consumers opt
+ *   into: `--majoo-popover-available-height` (room left on the chosen side) and
+ *   `--majoo-popover-reference-width` (width of the trigger).
+ *
+ * floating-ui measures the floating element itself, so its content must be
+ * in-flow — an all-absolute child measures 0px and flip/shift never fire.
+ */
+// Floor for the reported available height. Without it, flip and size lock each
+// other: a menu that opens while still `display: none` measures 0px, flip keeps a
+// side with almost no room, size reports ~0px, the menu's max-height collapses to
+// 0 and never changes size again — so autoUpdate never re-runs flip. With a floor
+// the box always has real height, flip moves it to the roomier side, and size then
+// grows it from there.
+const MIN_AVAILABLE_HEIGHT = 120;
+const createPopoverMiddleware = ({
+  sideOffset = 5,
+  flip: flip$1 = true
+} = {}) => [offset(sideOffset), flip$1 && flip({
+  padding: 8
+}), shift({
+  padding: 8
+}), size({
+  padding: 8,
+  apply({
+    availableHeight,
+    rects,
+    elements
+  }) {
+    elements.floating.style.setProperty('--majoo-popover-available-height', `${Math.max(MIN_AVAILABLE_HEIGHT, availableHeight)}px`);
+    elements.floating.style.setProperty('--majoo-popover-reference-width', `${rects.reference.width}px`);
+  }
+})].filter(Boolean);
+
+export { createPopoverMiddleware };

package/index.esm.css

@@ -2,6 +2,251 @@
   outline: none;
 }
 
+.ReactCrop {
+  position: relative;
+  display: inline-block;
+  cursor: crosshair;
+  overflow: hidden;
+  max-width: 100%;
+}
+.ReactCrop *,
+.ReactCrop *::before,
+.ReactCrop *::after {
+  box-sizing: border-box;
+}
+.ReactCrop--disabled,
+.ReactCrop--locked {
+  cursor: inherit;
+}
+.ReactCrop__child-wrapper {
+  max-height: inherit;
+}
+.ReactCrop__child-wrapper > img,
+.ReactCrop__child-wrapper > video {
+  display: block;
+  max-width: 100%;
+  max-height: inherit;
+  touch-action: none;
+}
+.ReactCrop__crop-selection {
+  position: absolute;
+  top: 0;
+  left: 0;
+  transform: translate3d(0, 0, 0);
+  cursor: move;
+  box-shadow: 0 0 0 9999em rgba(0, 0, 0, 0.5);
+  touch-action: none;
+  border: 1px dashed #fff;
+}
+.ReactCrop--disabled .ReactCrop__crop-selection {
+  cursor: inherit;
+}
+.ReactCrop--circular-crop .ReactCrop__crop-selection {
+  border-radius: 50%;
+  box-shadow: 0px 0px 1px 1px #fff, 0 0 0 9999em rgba(0, 0, 0, 0.5);
+}
+.ReactCrop__crop-selection:focus {
+  outline: none;
+  border-color: blue;
+  border-style: solid;
+}
+.ReactCrop--invisible-crop .ReactCrop__crop-selection {
+  display: none;
+}
+.ReactCrop__rule-of-thirds-vt::before,
+.ReactCrop__rule-of-thirds-vt::after,
+.ReactCrop__rule-of-thirds-hz::before,
+.ReactCrop__rule-of-thirds-hz::after {
+  content: '';
+  display: block;
+  position: absolute;
+  background-color: rgba(255, 255, 255, 0.4);
+}
+.ReactCrop__rule-of-thirds-vt::before,
+.ReactCrop__rule-of-thirds-vt::after {
+  width: 1px;
+  height: 100%;
+}
+.ReactCrop__rule-of-thirds-vt::before {
+  left: 33.3333%;
+  left: 33.3333333333%;
+}
+.ReactCrop__rule-of-thirds-vt::after {
+  left: 66.6666%;
+  left: 66.6666666667%;
+}
+.ReactCrop__rule-of-thirds-hz::before,
+.ReactCrop__rule-of-thirds-hz::after {
+  width: 100%;
+  height: 1px;
+}
+.ReactCrop__rule-of-thirds-hz::before {
+  top: 33.3333%;
+  top: 33.3333333333%;
+}
+.ReactCrop__rule-of-thirds-hz::after {
+  top: 66.6666%;
+  top: 66.6666666667%;
+}
+.ReactCrop__drag-handle {
+  position: absolute;
+}
+.ReactCrop__drag-handle::after {
+  position: absolute;
+  content: '';
+  display: block;
+  width: 10px;
+  height: 10px;
+  background-color: rgba(0, 0, 0, 0.2);
+  border: 1px solid rgba(255, 255, 255, 0.7);
+  outline: 1px solid rgba(0, 0, 0, 0);
+}
+.ReactCrop__drag-handle:focus::after {
+  border-color: blue;
+  background: #2dbfff;
+}
+.ReactCrop .ord-nw {
+  top: 0;
+  left: 0;
+  margin-top: -5px;
+  margin-left: -5px;
+  cursor: nw-resize;
+}
+.ReactCrop .ord-nw::after {
+  top: 0;
+  left: 0;
+}
+.ReactCrop .ord-n {
+  top: 0;
+  left: 50%;
+  margin-top: -5px;
+  margin-left: -5px;
+  cursor: n-resize;
+}
+.ReactCrop .ord-n::after {
+  top: 0;
+}
+.ReactCrop .ord-ne {
+  top: 0;
+  right: 0;
+  margin-top: -5px;
+  margin-right: -5px;
+  cursor: ne-resize;
+}
+.ReactCrop .ord-ne::after {
+  top: 0;
+  right: 0;
+}
+.ReactCrop .ord-e {
+  top: 50%;
+  right: 0;
+  margin-top: -5px;
+  margin-right: -5px;
+  cursor: e-resize;
+}
+.ReactCrop .ord-e::after {
+  right: 0;
+}
+.ReactCrop .ord-se {
+  bottom: 0;
+  right: 0;
+  margin-bottom: -5px;
+  margin-right: -5px;
+  cursor: se-resize;
+}
+.ReactCrop .ord-se::after {
+  bottom: 0;
+  right: 0;
+}
+.ReactCrop .ord-s {
+  bottom: 0;
+  left: 50%;
+  margin-bottom: -5px;
+  margin-left: -5px;
+  cursor: s-resize;
+}
+.ReactCrop .ord-s::after {
+  bottom: 0;
+}
+.ReactCrop .ord-sw {
+  bottom: 0;
+  left: 0;
+  margin-bottom: -5px;
+  margin-left: -5px;
+  cursor: sw-resize;
+}
+.ReactCrop .ord-sw::after {
+  bottom: 0;
+  left: 0;
+}
+.ReactCrop .ord-w {
+  top: 50%;
+  left: 0;
+  margin-top: -5px;
+  margin-left: -5px;
+  cursor: w-resize;
+}
+.ReactCrop .ord-w::after {
+  left: 0;
+}
+.ReactCrop__disabled .ReactCrop__drag-handle {
+  cursor: inherit;
+}
+.ReactCrop__drag-bar {
+  position: absolute;
+}
+.ReactCrop__drag-bar.ord-n {
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 6px;
+  margin-top: -3px;
+}
+.ReactCrop__drag-bar.ord-e {
+  right: 0;
+  top: 0;
+  width: 6px;
+  height: 100%;
+  margin-right: -3px;
+}
+.ReactCrop__drag-bar.ord-s {
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  height: 6px;
+  margin-bottom: -3px;
+}
+.ReactCrop__drag-bar.ord-w {
+  top: 0;
+  left: 0;
+  width: 6px;
+  height: 100%;
+  margin-left: -3px;
+}
+.ReactCrop--new-crop .ReactCrop__drag-bar,
+.ReactCrop--new-crop .ReactCrop__drag-handle,
+.ReactCrop--fixed-aspect .ReactCrop__drag-bar {
+  display: none;
+}
+.ReactCrop--fixed-aspect .ReactCrop__drag-handle.ord-n,
+.ReactCrop--fixed-aspect .ReactCrop__drag-handle.ord-e,
+.ReactCrop--fixed-aspect .ReactCrop__drag-handle.ord-s,
+.ReactCrop--fixed-aspect .ReactCrop__drag-handle.ord-w {
+  display: none;
+}
+@media (pointer: coarse) {
+  .ReactCrop .ord-n,
+  .ReactCrop .ord-e,
+  .ReactCrop .ord-s,
+  .ReactCrop .ord-w {
+    display: none;
+  }
+  .ReactCrop__drag-handle {
+    width: 24px;
+    height: 24px;
+  }
+}
+
 .rdw-option-wrapper {
   padding: 5px;
   min-width: 25px;
@@ -1048,248 +1293,3 @@
 .public-DraftStyleDefault-depth4.public-DraftStyleDefault-reset {
   counter-reset: ol4;
 }
-
-.ReactCrop {
-  position: relative;
-  display: inline-block;
-  cursor: crosshair;
-  overflow: hidden;
-  max-width: 100%;
-}
-.ReactCrop *,
-.ReactCrop *::before,
-.ReactCrop *::after {
-  box-sizing: border-box;
-}
-.ReactCrop--disabled,
-.ReactCrop--locked {
-  cursor: inherit;
-}
-.ReactCrop__child-wrapper {
-  max-height: inherit;
-}
-.ReactCrop__child-wrapper > img,
-.ReactCrop__child-wrapper > video {
-  display: block;
-  max-width: 100%;
-  max-height: inherit;
-  touch-action: none;
-}
-.ReactCrop__crop-selection {
-  position: absolute;
-  top: 0;
-  left: 0;
-  transform: translate3d(0, 0, 0);
-  cursor: move;
-  box-shadow: 0 0 0 9999em rgba(0, 0, 0, 0.5);
-  touch-action: none;
-  border: 1px dashed #fff;
-}
-.ReactCrop--disabled .ReactCrop__crop-selection {
-  cursor: inherit;
-}
-.ReactCrop--circular-crop .ReactCrop__crop-selection {
-  border-radius: 50%;
-  box-shadow: 0px 0px 1px 1px #fff, 0 0 0 9999em rgba(0, 0, 0, 0.5);
-}
-.ReactCrop__crop-selection:focus {
-  outline: none;
-  border-color: blue;
-  border-style: solid;
-}
-.ReactCrop--invisible-crop .ReactCrop__crop-selection {
-  display: none;
-}
-.ReactCrop__rule-of-thirds-vt::before,
-.ReactCrop__rule-of-thirds-vt::after,
-.ReactCrop__rule-of-thirds-hz::before,
-.ReactCrop__rule-of-thirds-hz::after {
-  content: '';
-  display: block;
-  position: absolute;
-  background-color: rgba(255, 255, 255, 0.4);
-}
-.ReactCrop__rule-of-thirds-vt::before,
-.ReactCrop__rule-of-thirds-vt::after {
-  width: 1px;
-  height: 100%;
-}
-.ReactCrop__rule-of-thirds-vt::before {
-  left: 33.3333%;
-  left: 33.3333333333%;
-}
-.ReactCrop__rule-of-thirds-vt::after {
-  left: 66.6666%;
-  left: 66.6666666667%;
-}
-.ReactCrop__rule-of-thirds-hz::before,
-.ReactCrop__rule-of-thirds-hz::after {
-  width: 100%;
-  height: 1px;
-}
-.ReactCrop__rule-of-thirds-hz::before {
-  top: 33.3333%;
-  top: 33.3333333333%;
-}
-.ReactCrop__rule-of-thirds-hz::after {
-  top: 66.6666%;
-  top: 66.6666666667%;
-}
-.ReactCrop__drag-handle {
-  position: absolute;
-}
-.ReactCrop__drag-handle::after {
-  position: absolute;
-  content: '';
-  display: block;
-  width: 10px;
-  height: 10px;
-  background-color: rgba(0, 0, 0, 0.2);
-  border: 1px solid rgba(255, 255, 255, 0.7);
-  outline: 1px solid rgba(0, 0, 0, 0);
-}
-.ReactCrop__drag-handle:focus::after {
-  border-color: blue;
-  background: #2dbfff;
-}
-.ReactCrop .ord-nw {
-  top: 0;
-  left: 0;
-  margin-top: -5px;
-  margin-left: -5px;
-  cursor: nw-resize;
-}
-.ReactCrop .ord-nw::after {
-  top: 0;
-  left: 0;
-}
-.ReactCrop .ord-n {
-  top: 0;
-  left: 50%;
-  margin-top: -5px;
-  margin-left: -5px;
-  cursor: n-resize;
-}
-.ReactCrop .ord-n::after {
-  top: 0;
-}
-.ReactCrop .ord-ne {
-  top: 0;
-  right: 0;
-  margin-top: -5px;
-  margin-right: -5px;
-  cursor: ne-resize;
-}
-.ReactCrop .ord-ne::after {
-  top: 0;
-  right: 0;
-}
-.ReactCrop .ord-e {
-  top: 50%;
-  right: 0;
-  margin-top: -5px;
-  margin-right: -5px;
-  cursor: e-resize;
-}
-.ReactCrop .ord-e::after {
-  right: 0;
-}
-.ReactCrop .ord-se {
-  bottom: 0;
-  right: 0;
-  margin-bottom: -5px;
-  margin-right: -5px;
-  cursor: se-resize;
-}
-.ReactCrop .ord-se::after {
-  bottom: 0;
-  right: 0;
-}
-.ReactCrop .ord-s {
-  bottom: 0;
-  left: 50%;
-  margin-bottom: -5px;
-  margin-left: -5px;
-  cursor: s-resize;
-}
-.ReactCrop .ord-s::after {
-  bottom: 0;
-}
-.ReactCrop .ord-sw {
-  bottom: 0;
-  left: 0;
-  margin-bottom: -5px;
-  margin-left: -5px;
-  cursor: sw-resize;
-}
-.ReactCrop .ord-sw::after {
-  bottom: 0;
-  left: 0;
-}
-.ReactCrop .ord-w {
-  top: 50%;
-  left: 0;
-  margin-top: -5px;
-  margin-left: -5px;
-  cursor: w-resize;
-}
-.ReactCrop .ord-w::after {
-  left: 0;
-}
-.ReactCrop__disabled .ReactCrop__drag-handle {
-  cursor: inherit;
-}
-.ReactCrop__drag-bar {
-  position: absolute;
-}
-.ReactCrop__drag-bar.ord-n {
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 6px;
-  margin-top: -3px;
-}
-.ReactCrop__drag-bar.ord-e {
-  right: 0;
-  top: 0;
-  width: 6px;
-  height: 100%;
-  margin-right: -3px;
-}
-.ReactCrop__drag-bar.ord-s {
-  bottom: 0;
-  left: 0;
-  width: 100%;
-  height: 6px;
-  margin-bottom: -3px;
-}
-.ReactCrop__drag-bar.ord-w {
-  top: 0;
-  left: 0;
-  width: 6px;
-  height: 100%;
-  margin-left: -3px;
-}
-.ReactCrop--new-crop .ReactCrop__drag-bar,
-.ReactCrop--new-crop .ReactCrop__drag-handle,
-.ReactCrop--fixed-aspect .ReactCrop__drag-bar {
-  display: none;
-}
-.ReactCrop--fixed-aspect .ReactCrop__drag-handle.ord-n,
-.ReactCrop--fixed-aspect .ReactCrop__drag-handle.ord-e,
-.ReactCrop--fixed-aspect .ReactCrop__drag-handle.ord-s,
-.ReactCrop--fixed-aspect .ReactCrop__drag-handle.ord-w {
-  display: none;
-}
-@media (pointer: coarse) {
-  .ReactCrop .ord-n,
-  .ReactCrop .ord-e,
-  .ReactCrop .ord-s,
-  .ReactCrop .ord-w {
-    display: none;
-  }
-  .ReactCrop__drag-handle {
-    width: 24px;
-    height: 24px;
-  }
-}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@majoo-ui/react",
-  "version": "2.2.0",
+  "version": "2.2.1",
   "main": "./index.esm.js",
   "sideEffects": [
     "*.css",