pixelplay 1.0.13 → 1.2.0

package/dist/index.mjs

@@ -1794,7 +1794,7 @@ function DropdownMenuItem({
 }
 
 // ../../app/ui-kit/pixelplay-ui/shared/ui/select/Select.tsx
-import { useState, useRef, useEffect } from "react";
+import { useState, useRef, useEffect, useCallback } from "react";
 import Image2 from "next/image";
 import { Check as Check2, ChevronDown, ChevronUp, Search } from "react-feather";
 import { jsx as jsx15, jsxs as jsxs13 } from "react/jsx-runtime";
@@ -1886,6 +1886,7 @@ function Select({
 }) {
   const [open, setOpen] = useState(false);
   const [search, setSearch] = useState("");
+  const [openAbove, setOpenAbove] = useState(false);
   const containerRef = useRef(null);
   useEffect(() => {
     function onOutsideClick(e) {
@@ -1897,6 +1898,21 @@ function Select({
     document.addEventListener("mousedown", onOutsideClick);
     return () => document.removeEventListener("mousedown", onOutsideClick);
   }, []);
+  const computeOpenAbove = useCallback(() => {
+    if (!containerRef.current) return false;
+    const rect = containerRef.current.getBoundingClientRect();
+    const spaceBelow = window.innerHeight - rect.bottom;
+    const panelHeight = 280;
+    return spaceBelow < panelHeight && rect.top > spaceBelow;
+  }, []);
+  const toggleOpen = useCallback(() => {
+    setOpen((prev) => {
+      if (!prev) {
+        setOpenAbove(computeOpenAbove());
+      }
+      return !prev;
+    });
+  }, [computeOpenAbove]);
   const selectedOption = options.find((o) => o.value === value);
   const filtered = isSearchable ? options.filter(
     (o) => o.label.toLowerCase().includes(search.toLowerCase())
@@ -1916,7 +1932,7 @@ function Select({
           {
             type: "button",
             disabled: isDisabled,
-            onClick: () => !isDisabled && setOpen((v) => !v),
+            onClick: () => !isDisabled && toggleOpen(),
             className: cn(
               "flex w-full items-center rounded-lg border transition-all",
               "bg-[var(--surface-container-lowest)] border-[var(--outline)]",
@@ -1952,7 +1968,8 @@ function Select({
           "div",
           {
             className: cn(
-              "absolute left-0 top-full z-50 mt-1 w-full overflow-hidden rounded-lg",
+              "absolute left-0 z-50 w-full overflow-hidden rounded-lg",
+              openAbove ? "bottom-full mb-1" : "top-full mt-1",
               "bg-[var(--surface-container-lowest)]",
               "shadow-[0px_4px_6px_-2px_rgba(10,13,18,0.05),0px_12px_16px_-4px_rgba(10,13,18,0.10)]",
               "outline outline-1 outline-offset-[-1px] outline-[var(--outline)]"
@@ -3360,7 +3377,7 @@ function TooltipTrigger({
 import {
   useEffect as useEffect2,
   useRef as useRef3,
-  useCallback,
+  useCallback as useCallback2,
   useId as useId4,
   useSyncExternalStore
 } from "react";
@@ -3562,7 +3579,7 @@ function Modal({
   const titleId = useId4();
   const descId = useId4();
   const panelRef = useRef3(null);
-  const handleKeyDown = useCallback(
+  const handleKeyDown = useCallback2(
     (e) => {
       if (e.key === "Escape") onClose == null ? void 0 : onClose();
     },
@@ -6303,7 +6320,7 @@ function Alert({
 // ../../app/ui-kit/pixelplay-ui/shared/ui/toast/Toast.tsx
 import {
   createContext,
-  useCallback as useCallback2,
+  useCallback as useCallback3,
   useContext,
   useEffect as useEffect4,
   useState as useState6
@@ -6386,7 +6403,7 @@ function ToastProvider({ children }) {
   const [toasts, setToasts] = useState6([]);
   const [mounted, setMounted] = useState6(false);
   useEffect4(() => setMounted(true), []);
-  const removeToast = useCallback2((id) => {
+  const removeToast = useCallback3((id) => {
     setToasts(
       (prev) => prev.map((t) => t.id === id ? __spreadProps(__spreadValues({}, t), { visible: false }) : t)
     );
@@ -6394,7 +6411,7 @@ function ToastProvider({ children }) {
       setToasts((prev) => prev.filter((t) => t.id !== id));
     }, 300);
   }, []);
-  const addToast = useCallback2(
+  const addToast = useCallback3(
     (toast) => {
       var _a;
       const id = String(++_idCounter);
@@ -6437,7 +6454,7 @@ function ToastProvider({ children }) {
 }
 
 // ../../app/ui-kit/pixelplay-ui/shared/ui/date-picker/DatePicker.tsx
-import { useCallback as useCallback3, useEffect as useEffect5, useRef as useRef5, useState as useState7 } from "react";
+import { useCallback as useCallback4, useEffect as useEffect5, useRef as useRef5, useState as useState7 } from "react";
 import { Calendar, ChevronLeft as ChevronLeft3, ChevronRight as ChevronRight3 } from "react-feather";
 import { jsx as jsx41, jsxs as jsxs37 } from "react/jsx-runtime";
 var MONTHS = [
@@ -6785,7 +6802,7 @@ function DatePicker({
   const [pending, setPending] = useState7(current != null ? current : null);
   const [open, setOpen] = useState7(false);
   const wrapRef = useRef5(null);
-  const handleClose = useCallback3(() => setOpen(false), []);
+  const handleClose = useCallback4(() => setOpen(false), []);
   useClickOutside(wrapRef, handleClose, open && !inline);
   useEffect5(() => {
     if (controlled) {
@@ -6895,7 +6912,7 @@ function DateTimePicker({
   const slots = timeSlots != null ? timeSlots : DEFAULT_SLOTS;
   const wrapRef = useRef5(null);
   const slotListRef = useRef5(null);
-  const handleClose = useCallback3(() => setOpen(false), []);
+  const handleClose = useCallback4(() => setOpen(false), []);
   useClickOutside(wrapRef, handleClose, open && !inline);
   useEffect5(() => {
     if (controlled) {
@@ -7058,7 +7075,7 @@ function DateRangePicker({
   const [activePreset, setActivePreset] = useState7(null);
   const [open, setOpen] = useState7(false);
   const wrapRef = useRef5(null);
-  const handleClose = useCallback3(() => setOpen(false), []);
+  const handleClose = useCallback4(() => setOpen(false), []);
   useClickOutside(wrapRef, handleClose, open && !inline);
   useEffect5(() => {
     if (controlled) {
@@ -7191,7 +7208,7 @@ function DateRangePicker({
 }
 
 // ../../app/ui-kit/pixelplay-ui/shared/ui/calendar/Calendar.tsx
-import React23, { useState as useState8, useCallback as useCallback4, useMemo } from "react";
+import React23, { useState as useState8, useCallback as useCallback5, useMemo } from "react";
 import {
   Plus,
   ChevronLeft as ChevronLeft4,
@@ -7423,7 +7440,7 @@ function MonthView({
   onEventClick
 }) {
   const cells = useMemo(() => getMonthCells(year, month), [year, month]);
-  const eventsForDay = useCallback4(
+  const eventsForDay = useCallback5(
     (date) => events.filter((e) => isSameDay2(e.date, date)).sort((a, b) => {
       return timeToMinutes(a.startTime) - timeToMinutes(b.startTime);
     }),
@@ -7588,7 +7605,7 @@ function WeekView({
     () => days.findIndex((d) => isToday2(d)),
     [days]
   );
-  const eventsForDay = useCallback4(
+  const eventsForDay = useCallback5(
     (date) => events.filter((e) => isSameDay2(e.date, date)).sort(
       (a, b) => timeToMinutes(a.startTime) - timeToMinutes(b.startTime)
     ),
@@ -7811,7 +7828,7 @@ function DayView({
     const now = /* @__PURE__ */ new Date();
     return now.getHours() * 60 + now.getMinutes();
   }, [date]);
-  const hasEvents = useCallback4(
+  const hasEvents = useCallback5(
     (d) => events.some((e) => isSameDay2(e.date, d)),
     [events]
   );
@@ -8210,35 +8227,35 @@ function Calendar2({
   const view = controlledView != null ? controlledView : internalView;
   const [internalDate, setInternalDate] = useState8(defaultDate != null ? defaultDate : today);
   const date = controlledDate != null ? controlledDate : internalDate;
-  const handleViewChange = useCallback4(
+  const handleViewChange = useCallback5(
     (v) => {
       setInternalView(v);
       onViewChange == null ? void 0 : onViewChange(v);
     },
     [onViewChange]
   );
-  const handleDateChange = useCallback4(
+  const handleDateChange = useCallback5(
     (d) => {
       setInternalDate(d);
       onDateChange == null ? void 0 : onDateChange(d);
     },
     [onDateChange]
   );
-  const handlePrev = useCallback4(() => {
+  const handlePrev = useCallback5(() => {
     const d = new Date(date);
     if (view === "month") d.setMonth(d.getMonth() - 1);
     else if (view === "week") d.setDate(d.getDate() - 7);
     else d.setDate(d.getDate() - 1);
     handleDateChange(d);
   }, [date, view, handleDateChange]);
-  const handleNext = useCallback4(() => {
+  const handleNext = useCallback5(() => {
     const d = new Date(date);
     if (view === "month") d.setMonth(d.getMonth() + 1);
     else if (view === "week") d.setDate(d.getDate() + 7);
     else d.setDate(d.getDate() + 1);
     handleDateChange(d);
   }, [date, view, handleDateChange]);
-  const handleToday = useCallback4(() => {
+  const handleToday = useCallback5(() => {
     handleDateChange(/* @__PURE__ */ new Date());
   }, [handleDateChange]);
   return /* @__PURE__ */ jsxs38(