@majoo-ui/react 2.1.3 → 2.2.1

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

@@ -57,6 +57,7 @@ export { default as Skeleton } from './components/skeleton/Skeleton.esm.js';
 export { default as TagList } from './components/tagList/TagList.esm.js';
 export { ScrollSync } from './components/scrollSync/ScrollSync.esm.js';
 export { ScrollSyncNode } from './components/scrollSync/ScrollSyncNode.esm.js';
+export { default as PeriodSelect } from './components/periodSelect/PeriodSelect.esm.js';
 export { useListOption } from './hooks/useListOption/useListOption.esm.js';
 export { useToggle } from './hooks/useToggle/useToggle.esm.js';
 export { Avatar } from './components/avatar/Avatar.esm.js';
@@ -94,7 +95,7 @@ export { default as Upload } from './components/upload/Upload.esm.js';
 export { AlertDialog, AlertDialogCancel, AlertDialogConfirm, AlertDialogContent, AlertDialogDescription, AlertDialogFunction, AlertDialogRoot, AlertDialogTitle, AlertDialogTrigger } from './components/alertDialog/AlertDialog.esm.js';
 export { BOTTOM_LEFT_POSITION, BOTTOM_RIGHT_POSITION, TOP_LEFT_POSITION, TOP_RIGHT_POSITION } from './components/toast/Toast.esm.js';
 export { BreadcrumbItem } from './components/breadcrumb/Breadcrumb.esm.js';
-export { ButtonDropdown, DropdownMenu, DropdownMenuArrow, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuItem, DropdownMenuItemIndicator, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuTrigger, RightSlot, StyledDropdown } from './components/dropdownMenu/DropdownMenu.esm.js';
+export { ButtonDropdown, DropdownMenu, DropdownMenuArrow, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuItem, DropdownMenuItemIndicator, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, RightSlot, StyledDropdown } from './components/dropdownMenu/DropdownMenu.esm.js';
 export { ButtonGroup, ButtonGroupItem } from './components/buttonGroup/ButtonGroup.esm.js';
 export { default as ColorPicker } from './components/colorPicker/ColorPicker.esm.js';
 export { Drawer, DrawerBody, DrawerClose, DrawerCloseButton, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerTitle, DrawerTrigger } from './components/drawer/Drawer.esm.js';

package/package.json

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

package/src/components/index.d.ts

@@ -46,3 +46,4 @@ export * from './contextMenu';
 export * from './skeleton';
 export * from './tagList';
 export * from './scrollSync';
+export * from './periodSelect';

package/src/components/periodSelect/PeriodSelect.d.ts

@@ -0,0 +1,83 @@
+import React from 'react';
+import { CSS } from '../../config/stitches.config';
+export type PeriodValue = 'day' | 'week' | 'month';
+export interface PeriodSelectProps {
+    /**
+     * The selected period.
+     */
+    value: PeriodValue;
+    /**
+     * Called when the user picks a period. Picking a start day also reports `'week'`.
+     */
+    onChange: (value: PeriodValue) => void;
+    /**
+     * First day of the week, indexed like `Date#getDay` (0 = Sunday, 1 = Monday).
+     * Leave undefined to let the component hold it internally.
+     */
+    startDay?: number;
+    /**
+     * Called when the user picks a different first day of the week.
+     */
+    onStartDayChange?: (startDay: number) => void;
+    /**
+     * First day of the week before the user changes anything.
+     */
+    defaultStartDay?: number;
+    /**
+     * If true, leaving the weekly period reports `defaultStartDay` back through
+     * `onStartDayChange`, so returning to weekly starts from the default again.
+     */
+    resetStartDayOnPeriodChange?: boolean;
+    /**
+     * Periods offered, in the order they are listed.
+     */
+    periods?: PeriodValue[];
+    /**
+     * If false, the trigger shows the period alone, without the day range.
+     */
+    showRange?: boolean;
+    /**
+     * If true, the component is disabled.
+     */
+    disabled?: boolean;
+    /**
+     * Specify the trigger size.
+     */
+    size?: 'sm' | 'lg';
+    /**
+     * The preferred side of the trigger to render the menu against.
+     */
+    side?: 'top' | 'right' | 'bottom' | 'left';
+    /**
+     * The preferred alignment against the trigger.
+     */
+    align?: 'start' | 'center' | 'end';
+    /**
+     * Replaces the label of one or more periods. Anything left out keeps its default
+     * (`Hari`, `Minggu`, `Bulan`), which already goes through i18n.
+     */
+    periodLabels?: Partial<Record<PeriodValue, React.ReactNode>>;
+    /**
+     * Replaces the submenu heading above the start-day options.
+     */
+    startWeekLabel?: React.ReactNode;
+    /**
+     * Replaces the default `Senin - Minggu` label, both on the trigger and on each option.
+     * `place` says which of the two is being rendered, so the two can read differently.
+     * Days are indexed like `Date#getDay`.
+     */
+    formatWeekRange?: (range: WeekRange) => React.ReactNode;
+    /**
+     * Additional CSS trigger styles.
+     */
+    css?: CSS;
+}
+export interface WeekRange {
+    startDay: number;
+    endDay: number;
+    startName: string;
+    endName: string;
+    place: 'trigger' | 'option';
+}
+declare const PeriodSelect: React.ForwardRefExoticComponent<PeriodSelectProps & React.RefAttributes<HTMLButtonElement>>;
+export default PeriodSelect;

package/src/components/periodSelect/index.d.ts

@@ -0,0 +1,2 @@
+export { default as PeriodSelect } from './PeriodSelect';
+export * from './PeriodSelect';