@majoo-ui/react 2.1.3 → 2.2.1

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/periodSelect/PeriodSelect.esm.js

@@ -0,0 +1,212 @@
+import 'core-js/modules/es.iterator.constructor.js';
+import 'core-js/modules/es.iterator.map.js';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import React__default, { useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { CaretDownOutline, ChevronRightOutline } from '@majoo-ui/icons';
+import { styled, colors } from '../../config/stitches.config.esm.js';
+import { weekdayNamesFullEng, weekdayNamesFullId } from '../../utils/calendar.esm.js';
+import { DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuItem, DropdownMenuSub, DropdownMenuSubTrigger, RightSlot, DropdownMenuSubContent, DropdownMenuLabel, DropdownMenuRadioGroup, DropdownMenuRadioItem } from '../dropdownMenu/DropdownMenu.esm.js';
+
+const Trigger = styled('button', {
+  all: 'unset',
+  boxSizing: 'border-box',
+  display: 'inline-flex',
+  alignItems: 'center',
+  gap: '$spacing-02',
+  padding: '0 $spacing-04',
+  border: '1px solid $bgOutline',
+  borderRadius: '$lg',
+  backgroundColor: '$bgWhite',
+  color: '$textPrimary',
+  fontFamily: 'inherit',
+  fontSize: '$short-content-regular',
+  lineHeight: '$short-content-regular',
+  letterSpacing: '$short-content-regular',
+  cursor: 'pointer',
+  '&:hover': {
+    borderColor: '$primary600'
+  },
+  '&[data-state="open"]': {
+    borderColor: '$primary400'
+  },
+  variants: {
+    size: {
+      sm: {
+        height: 32
+      },
+      lg: {
+        height: 40
+      }
+    },
+    // Named apart from the DOM attribute so Stitches does not swallow it as a variant —
+    // the button still needs a real `disabled` to block the menu from opening.
+    isDisabled: {
+      true: {
+        backgroundColor: '$formDisable',
+        color: '$textDisable',
+        cursor: 'not-allowed',
+        '&:hover': {
+          borderColor: '$bgOutline'
+        }
+      }
+    }
+  },
+  defaultVariants: {
+    size: 'lg'
+  }
+});
+const TriggerLabel = styled('span', {
+  fontWeight: 600
+});
+const TriggerRange = styled('span', {
+  color: '$textDisable'
+});
+const MENU_ITEM_CSS = {
+  paddingLeft: '$spacing-04',
+  paddingRight: '$spacing-04'
+};
+const DEFAULT_PERIODS = ['day', 'week', 'month'];
+// Listed Monday first, the way the week reads in Indonesian — not in Date#getDay order.
+const START_DAY_ORDER = [1, 2, 3, 4, 5, 6, 0];
+const PeriodSelect = /*#__PURE__*/React__default.forwardRef(({
+  value,
+  onChange,
+  startDay,
+  onStartDayChange,
+  defaultStartDay = 1,
+  resetStartDayOnPeriodChange = true,
+  periods = DEFAULT_PERIODS,
+  showRange = true,
+  disabled = false,
+  size = 'lg',
+  side = 'bottom',
+  align = 'start',
+  periodLabels,
+  startWeekLabel,
+  formatWeekRange,
+  css
+}, ref) => {
+  const {
+    t,
+    i18n: {
+      language
+    }
+  } = useTranslation(['MajooUI/periodSelect', 'translation']);
+  const [open, setOpen] = useState(false);
+  const [internalStartDay, setInternalStartDay] = useState(defaultStartDay);
+  const activeStartDay = startDay !== null && startDay !== void 0 ? startDay : internalStartDay;
+  const weekdayNames = language === 'en' ? weekdayNamesFullEng : weekdayNamesFullId;
+  // A week always spans 7 days, so the last one is always 6 days after the first.
+  const rangeLabel = (day, place) => {
+    const endDay = (day + 6) % 7;
+    const range = {
+      startDay: day,
+      endDay,
+      startName: weekdayNames[day],
+      endName: weekdayNames[endDay],
+      place
+    };
+    return formatWeekRange ? formatWeekRange(range) : `${range.startName} - ${range.endName}`;
+  };
+  const showWeekRange = showRange && value === 'week';
+  const defaultPeriodLabels = {
+    day: t('day', 'Hari'),
+    week: t('week', 'Minggu'),
+    month: t('month', 'Bulan')
+  };
+  const periodLabel = period => {
+    var _a;
+    return (_a = periodLabels === null || periodLabels === void 0 ? void 0 : periodLabels[period]) !== null && _a !== void 0 ? _a : defaultPeriodLabels[period];
+  };
+  const applyStartDay = day => {
+    setInternalStartDay(day);
+    onStartDayChange === null || onStartDayChange === void 0 ? void 0 : onStartDayChange(day);
+  };
+  const selectPeriod = period => {
+    onChange(period);
+    if (resetStartDayOnPeriodChange && period !== 'week' && activeStartDay !== defaultStartDay) {
+      applyStartDay(defaultStartDay);
+    }
+    setOpen(false);
+  };
+  const renderPeriodItem = period => {
+    if (period !== 'week') {
+      return jsx(DropdownMenuItem, {
+        selected: value === period,
+        onSelect: () => selectPeriod(period),
+        css: MENU_ITEM_CSS,
+        children: periodLabel(period)
+      }, period);
+    }
+    return jsxs(DropdownMenuSub, {
+      children: [jsxs(DropdownMenuSubTrigger, {
+        selected: value === 'week',
+        onClick: () => selectPeriod('week'),
+        css: MENU_ITEM_CSS,
+        children: [periodLabel('week'), jsx(RightSlot, {
+          children: jsx(ChevronRightOutline, {
+            size: "16",
+            color: "currentColor"
+          })
+        })]
+      }), jsxs(DropdownMenuSubContent, {
+        sideOffset: 8,
+        alignOffset: -8,
+        css: {
+          padding: '$spacing-04 $spacing-05'
+        },
+        children: [jsx(DropdownMenuLabel, {
+          children: startWeekLabel !== null && startWeekLabel !== void 0 ? startWeekLabel : t('startWeekFrom', 'Mulai minggu dari:')
+        }), jsx(DropdownMenuRadioGroup, {
+          value: String(activeStartDay),
+          onValueChange: day => {
+            applyStartDay(Number(day));
+            onChange('week');
+          },
+          children: START_DAY_ORDER.map(day => jsx(DropdownMenuRadioItem, {
+            value: String(day),
+            children: rangeLabel(day, 'option')
+          }, day))
+        })]
+      })]
+    }, period);
+  };
+  return jsxs(DropdownMenu, {
+    open: open,
+    onOpenChange: setOpen,
+    side: side,
+    align: align,
+    modal: false,
+    children: [jsx(DropdownMenuTrigger, {
+      asChild: true,
+      children: jsxs(Trigger, {
+        ref: ref,
+        size: size,
+        isDisabled: disabled,
+        disabled: disabled,
+        css: css,
+        type: "button",
+        children: [jsxs(TriggerLabel, {
+          children: [periodLabel(value), showWeekRange && ',']
+        }), showWeekRange && jsx(TriggerRange, {
+          children: rangeLabel(activeStartDay, 'trigger')
+        }), jsx(CaretDownOutline, {
+          size: "16",
+          color: disabled ? colors.iconDisable : colors.iconPrimary
+        })]
+      })
+    }), jsx(DropdownMenuContent, {
+      sideOffset: 4,
+      css: {
+        width: 'max-content',
+        minWidth: 160,
+        maxWidth: 'none'
+      },
+      children: periods.map(renderPeriodItem)
+    })]
+  });
+});
+PeriodSelect.displayName = 'PeriodSelect';
+
+export { PeriodSelect as default };