@grandbazar/ui-baza 1.2.9 → 1.2.11

package/dist/index.cjs

@@ -1321,6 +1321,19 @@ function getCalendarGrid(month, year, firstDayOfWeek) {
   );
 }
 
+function normalizeDateRange(firstDate, secondDate) {
+  if (!firstDate || !secondDate) {
+    return { firstDate, secondDate };
+  }
+  if (firstDate.getTime() <= secondDate.getTime()) {
+    return { firstDate, secondDate };
+  }
+  return {
+    firstDate: secondDate,
+    secondDate: firstDate
+  };
+}
+
 const datePickerField = "_datePickerField_1qk8s_2";
 const datePickerFieldCalendar = "_datePickerFieldCalendar_1qk8s_8";
 const datePickerFieldWeek = "_datePickerFieldWeek_1qk8s_14";
@@ -1426,9 +1439,14 @@ function useDatePickerControls(initialDate = /* @__PURE__ */ new Date()) {
   };
 }
 
-function useDatePickerMultiSelect(firstDayOfWeek = LOCALE_FIRST_DAY_OF_WEEK.ru) {
-  const [firstSelectedDate, setFirstSelectedDate] = React.useState(null);
-  const [secondSelectedDate, setSecondSelectedDate] = React.useState(null);
+function useDatePickerMultiSelect({
+  firstDayOfWeek = LOCALE_FIRST_DAY_OF_WEEK.ru,
+  initialFirstSelectedDate = null,
+  initialSecondSelectedDate = null
+} = {}) {
+  const normalizedRange = normalizeDateRange(initialFirstSelectedDate, initialSecondSelectedDate);
+  const [firstSelectedDate, setFirstSelectedDate] = React.useState(normalizedRange.firstDate);
+  const [secondSelectedDate, setSecondSelectedDate] = React.useState(normalizedRange.secondDate);
   const lastDayOfWeek = (firstDayOfWeek + 6) % 7;
   const dayInfoCache = React.useMemo(() => /* @__PURE__ */ new Map(), []);
   const getDayInfo = React.useCallback(
@@ -1544,8 +1562,8 @@ function useDatePickerMultiSelect(firstDayOfWeek = LOCALE_FIRST_DAY_OF_WEEK.ru)
   return { firstSelectedDate, secondSelectedDate, setFirstSelectedDate, setSecondSelectedDate, getCellProps };
 }
 
-function useDatePickerSelect() {
-  const [selectedDate, setSelectedDate] = React.useState(null);
+function useDatePickerSelect({ initialSelectedDate = null } = {}) {
+  const [selectedDate, setSelectedDate] = React.useState(initialSelectedDate);
   const getCellProps = React.useCallback(
     (day) => {
       return {
@@ -1684,7 +1702,7 @@ function DropdownMenuProvider({ children }) {
         portalPlacement,
         setPortalPlacement
       },
-      children: typeof children === "function" ? children({ isOpen, setIsOpen, portalPlacement }) : children
+      children: typeof children === "function" ? children({ isOpen, setIsOpen, portalPlacement, triggerRef }) : children
     }
   );
 }
@@ -2068,6 +2086,7 @@ const styles$g = {
 function DropdownPortal({
   children,
   className,
+  style,
   align = "start",
   position = "bottom",
   isNested,
@@ -2096,7 +2115,8 @@ function DropdownPortal({
         style: {
           ...portalPosition,
           ...maxWidth && { "--dropdown-portal-max-width": `${maxWidth + offset}px` },
-          ...maxHeight && { "--dropdown-portal-max-height": `${maxHeight + offset}px` }
+          ...maxHeight && { "--dropdown-portal-max-height": `${maxHeight + offset}px` },
+          ...style
         },
         ref: portalRef,
         className: classNames(styles$g.dropdownPortal, className),
@@ -2784,8 +2804,15 @@ function Tag({ children, className, size = "md", mode = "primary", disabled, ...
   );
 }
 
-const tooltipContent = "_tooltipContent_1267q_2";
-const tooltipTitle = "_tooltipTitle_1267q_96";
+const TOOLTIP_CONTENT_ARROW = {
+  width: 16,
+  height: 8,
+  offsetInline: 12,
+  offsetBlock: 10
+};
+
+const tooltipContent = "_tooltipContent_ww0bo_2";
+const tooltipTitle = "_tooltipTitle_ww0bo_92";
 const styles = {
 	tooltipContent: tooltipContent,
 	tooltipTitle: tooltipTitle
@@ -2798,7 +2825,6 @@ function TooltipContent({
   description,
   arrowAlign,
   arrowPosition,
-  arrowOffset,
   ...props
 }) {
   return /* @__PURE__ */ jsxRuntime.jsxs(
@@ -2808,11 +2834,11 @@ function TooltipContent({
       role: role ?? "tooltip",
       "data-align": arrowAlign,
       "data-position": arrowPosition,
-      ...arrowOffset && {
-        style: {
-          "--tooltip-content-arrow-offset-inline": `${arrowOffset.inline}px`,
-          "--tooltip-content-arrow-offset-block": `${arrowOffset.block}px`
-        }
+      style: {
+        "--tooltip-content-arrow-width": `${TOOLTIP_CONTENT_ARROW.width}px`,
+        "--tooltip-content-arrow-height": `${TOOLTIP_CONTENT_ARROW.height}px`,
+        "--tooltip-content-arrow-offset-inline": `${TOOLTIP_CONTENT_ARROW.offsetInline}px`,
+        "--tooltip-content-arrow-offset-block": `${TOOLTIP_CONTENT_ARROW.offsetBlock}px`
       },
       ...props,
       children: [
@@ -2823,7 +2849,24 @@ function TooltipContent({
   );
 }
 
-const TOOLTIP_OFFSET = 8;
+function getCenteredPortalShiftStyle({
+  portalPlacement,
+  triggerRef
+}) {
+  const triggerRect = triggerRef.current?.getBoundingClientRect();
+  if (!triggerRect || !portalPlacement || portalPlacement.align === "center") {
+    return {};
+  }
+  const isHorizontal = portalPlacement.position === "top" || portalPlacement.position === "bottom";
+  const triggerHalfSize = isHorizontal ? triggerRect.width / 2 : triggerRect.height / 2;
+  const arrowOffset = (isHorizontal ? TOOLTIP_CONTENT_ARROW.offsetInline : TOOLTIP_CONTENT_ARROW.offsetBlock) + TOOLTIP_CONTENT_ARROW.height * Math.SQRT2 / 2;
+  const shift = portalPlacement.align === "start" ? triggerHalfSize - arrowOffset : arrowOffset - triggerHalfSize;
+  const shiftPx = `${Number(shift.toFixed(3))}px`;
+  if (isHorizontal) {
+    return { marginLeft: shiftPx };
+  }
+  return { marginTop: shiftPx };
+}
 
 function TooltipRoot({
   children,
@@ -2834,19 +2877,23 @@ function TooltipRoot({
   maxHeight,
   withoutArrow = false,
   scrollContainerRef,
+  centerArrowToTrigger = true,
   ...tooltipContentProps
 }) {
-  return /* @__PURE__ */ jsxRuntime.jsx(DropdownMenu.Root, { children: ({ portalPlacement }) => /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+  return /* @__PURE__ */ jsxRuntime.jsx(DropdownMenu.Root, { children: ({ portalPlacement, triggerRef }) => /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
     /* @__PURE__ */ jsxRuntime.jsx(DropdownMenu.Trigger, { asChild: true, triggerEvent, children }),
     /* @__PURE__ */ jsxRuntime.jsx(
       DropdownMenu.Portal,
       {
         align,
         position,
-        offset: TOOLTIP_OFFSET,
+        offset: TOOLTIP_CONTENT_ARROW.height,
         maxWidth,
         maxHeight,
         scrollContainerRef,
+        style: {
+          ...!withoutArrow && centerArrowToTrigger && getCenteredPortalShiftStyle({ portalPlacement, triggerRef })
+        },
         children: /* @__PURE__ */ jsxRuntime.jsx(
           TooltipContent,
           {

package/dist/index.d.ts

@@ -1,4 +1,5 @@
 import { ComponentProps } from 'react';
+import { CSSProperties } from 'react';
 import { default as default_2 } from 'react';
 import { Dispatch } from 'react';
 import { IconGoogle } from './logos';
@@ -190,7 +191,7 @@ export declare namespace DropdownMenu {
     var Portal: typeof DropdownPortal;
 }
 
-declare function DropdownPortal({ children, className, align, position, isNested, offset, maxWidth, maxHeight, scrollContainerRef, }: TDropdownPortalProps): ReactPortal | null;
+declare function DropdownPortal({ children, className, style, align, position, isNested, offset, maxWidth, maxHeight, scrollContainerRef, }: TDropdownPortalProps): ReactPortal | null;
 
 declare function DropdownRoot({ children }: TDropdownRootProps): JSX.Element;
 
@@ -664,6 +665,7 @@ declare type TDropdownMenuContextValue = {
 declare type TDropdownPortalProps = {
     children: React.ReactNode;
     className?: string;
+    style?: CSSProperties;
     align?: TArrayElement<typeof DROPDOWN_PORTAL_ALIGN_LIST>;
     position?: TArrayElement<typeof DROPDOWN_PORTAL_POSITION_LIST>;
     isNested?: boolean;
@@ -674,7 +676,7 @@ declare type TDropdownPortalProps = {
 };
 
 declare type TDropdownRootProps = {
-    children: React.ReactNode | ((context: Pick<TDropdownMenuContextValue, 'isOpen' | 'setIsOpen' | 'portalPlacement'>) => React.ReactNode);
+    children: React.ReactNode | ((context: Pick<TDropdownMenuContextValue, 'isOpen' | 'setIsOpen' | 'portalPlacement' | 'triggerRef'>) => React.ReactNode);
 };
 
 declare type TDropdownTriggerProps = TAsChildProps<React.HTMLAttributes<HTMLButtonElement>> & {
@@ -727,7 +729,8 @@ declare type TLocale = TArrayElement<typeof LOCALES>;
  * @param triggerEvent - Trigger behavior (hover, click)
  * @param maxWidth - Max width of the tooltip content in pixels (required for horizontal flip)
  * @param maxHeight - Max height of the tooltip content in pixels (required for vertical flip)
- * @param arrowOffset - Arrow offset in pixels for inline and block axes
+ * @param scrollContainerRef - Optional scroll container used as portal mount node and positioning boundary
+ * @param centerArrowToTrigger - Automatically shifts portal to keep arrow at trigger center for start/end align
  * @param withoutArrow - Hide tooltip arrow
  *
  * @example
@@ -741,9 +744,9 @@ export declare namespace Tooltip {
     var Content: typeof TooltipContent;
 }
 
-declare function TooltipContent({ className, role, title, description, arrowAlign, arrowPosition, arrowOffset, ...props }: TTooltipContentProps): JSX.Element;
+declare function TooltipContent({ className, role, title, description, arrowAlign, arrowPosition, ...props }: TTooltipContentProps): JSX.Element;
 
-declare function TooltipRoot({ children, align, position, triggerEvent, maxWidth, maxHeight, withoutArrow, scrollContainerRef, ...tooltipContentProps }: TTooltipRootProps): JSX.Element;
+declare function TooltipRoot({ children, align, position, triggerEvent, maxWidth, maxHeight, withoutArrow, scrollContainerRef, centerArrowToTrigger, ...tooltipContentProps }: TTooltipRootProps): JSX.Element;
 
 declare type TPaginationItemProps = React.ButtonHTMLAttributes<HTMLButtonElement> & {
     size?: TArrayElement<typeof PAGINATION_SIZES>;
@@ -869,21 +872,22 @@ declare type TTooltipContentProps = Omit<React.HTMLAttributes<HTMLDivElement>, '
     description?: string;
     arrowAlign?: TArrayElement<typeof DROPDOWN_PORTAL_ALIGN_LIST>;
     arrowPosition?: TArrayElement<typeof DROPDOWN_PORTAL_POSITION_LIST>;
-    arrowOffset?: {
-        inline: number;
-        block: number;
-    };
 };
 
-declare type TTooltipRootProps = Omit<React.ComponentProps<typeof TooltipContent>, 'arrowAlign' | 'arrowPosition'> & {
-    children: React.ReactNode;
+declare type TTooltipRootProps = Omit<React.ComponentProps<typeof TooltipContent>, 'arrowAlign' | 'arrowPosition'> & Pick<React.ComponentProps<typeof DropdownMenu.Portal>, 'align' | 'position' | 'maxWidth' | 'maxHeight' | 'scrollContainerRef' | 'children'> & {
     triggerEvent?: TArrayElement<typeof DROPDOWN_TRIGGER_EVENT_LIST>;
-    align?: TArrayElement<typeof DROPDOWN_PORTAL_ALIGN_LIST>;
-    position?: TArrayElement<typeof DROPDOWN_PORTAL_POSITION_LIST>;
-    maxWidth?: number;
-    maxHeight?: number;
     withoutArrow?: boolean;
-    scrollContainerRef?: React.RefObject<HTMLElement | null>;
+    centerArrowToTrigger?: boolean;
+};
+
+declare type TUseDatePickerMultiSelectOptions = {
+    firstDayOfWeek?: number;
+    initialFirstSelectedDate?: Date | null;
+    initialSecondSelectedDate?: Date | null;
+};
+
+declare type TUseDatePickerSelectOptions = {
+    initialSelectedDate?: Date | null;
 };
 
 declare type TWithRef<TProps, TElement = HTMLElement> = TProps & {
@@ -910,10 +914,13 @@ export declare function useDatePickerControls(initialDate?: Date): {
  * Manages date range selection state for DatePicker.
  * Handles two-date selection with automatic ordering and visual range styling.
  *
- * @param firstDayOfWeek - First day of the week (0 = Sunday, 1 = Monday, etc.)
+ * @param options - Hook options for range selection
+ * @param options.firstDayOfWeek - First day of the week (0 = Sunday, 1 = Monday, etc.)
+ * @param options.initialFirstSelectedDate - Initial start date for range selection
+ * @param options.initialSecondSelectedDate - Initial end date for range selection
  * @returns Object containing selected dates, setters, and cell props generator with range styling
  */
-export declare function useDatePickerMultiSelect(firstDayOfWeek?: number): {
+export declare function useDatePickerMultiSelect({ firstDayOfWeek, initialFirstSelectedDate, initialSecondSelectedDate, }?: TUseDatePickerMultiSelectOptions): {
     firstSelectedDate: Date | null;
     secondSelectedDate: Date | null;
     setFirstSelectedDate: Dispatch<SetStateAction<Date | null>>;
@@ -925,9 +932,11 @@ export declare function useDatePickerMultiSelect(firstDayOfWeek?: number): {
  * Manages single date selection state for DatePicker.
  * Provides cell props with selection logic and state management.
  *
+ * @param options - Hook options for initial selection state
+ * @param options.initialSelectedDate - Initial selected date
  * @returns Object containing selected date, setter, and cell props generator
  */
-export declare function useDatePickerSelect(): {
+export declare function useDatePickerSelect({ initialSelectedDate }?: TUseDatePickerSelectOptions): {
     selectedDate: Date | null;
     setSelectedDate: Dispatch<SetStateAction<Date | null>>;
     getCellProps: (day: TCalendarDay) => Pick<ComponentProps<typeof DatePickerCell>, "onClick" | "disabled" | "isCurrent" | "state">;

package/dist/index.js

@@ -1317,6 +1317,19 @@ function getCalendarGrid(month, year, firstDayOfWeek) {
   );
 }
 
+function normalizeDateRange(firstDate, secondDate) {
+  if (!firstDate || !secondDate) {
+    return { firstDate, secondDate };
+  }
+  if (firstDate.getTime() <= secondDate.getTime()) {
+    return { firstDate, secondDate };
+  }
+  return {
+    firstDate: secondDate,
+    secondDate: firstDate
+  };
+}
+
 const datePickerField = "_datePickerField_1qk8s_2";
 const datePickerFieldCalendar = "_datePickerFieldCalendar_1qk8s_8";
 const datePickerFieldWeek = "_datePickerFieldWeek_1qk8s_14";
@@ -1422,9 +1435,14 @@ function useDatePickerControls(initialDate = /* @__PURE__ */ new Date()) {
   };
 }
 
-function useDatePickerMultiSelect(firstDayOfWeek = LOCALE_FIRST_DAY_OF_WEEK.ru) {
-  const [firstSelectedDate, setFirstSelectedDate] = useState(null);
-  const [secondSelectedDate, setSecondSelectedDate] = useState(null);
+function useDatePickerMultiSelect({
+  firstDayOfWeek = LOCALE_FIRST_DAY_OF_WEEK.ru,
+  initialFirstSelectedDate = null,
+  initialSecondSelectedDate = null
+} = {}) {
+  const normalizedRange = normalizeDateRange(initialFirstSelectedDate, initialSecondSelectedDate);
+  const [firstSelectedDate, setFirstSelectedDate] = useState(normalizedRange.firstDate);
+  const [secondSelectedDate, setSecondSelectedDate] = useState(normalizedRange.secondDate);
   const lastDayOfWeek = (firstDayOfWeek + 6) % 7;
   const dayInfoCache = useMemo(() => /* @__PURE__ */ new Map(), []);
   const getDayInfo = useCallback(
@@ -1540,8 +1558,8 @@ function useDatePickerMultiSelect(firstDayOfWeek = LOCALE_FIRST_DAY_OF_WEEK.ru)
   return { firstSelectedDate, secondSelectedDate, setFirstSelectedDate, setSecondSelectedDate, getCellProps };
 }
 
-function useDatePickerSelect() {
-  const [selectedDate, setSelectedDate] = useState(null);
+function useDatePickerSelect({ initialSelectedDate = null } = {}) {
+  const [selectedDate, setSelectedDate] = useState(initialSelectedDate);
   const getCellProps = useCallback(
     (day) => {
       return {
@@ -1680,7 +1698,7 @@ function DropdownMenuProvider({ children }) {
         portalPlacement,
         setPortalPlacement
       },
-      children: typeof children === "function" ? children({ isOpen, setIsOpen, portalPlacement }) : children
+      children: typeof children === "function" ? children({ isOpen, setIsOpen, portalPlacement, triggerRef }) : children
     }
   );
 }
@@ -2064,6 +2082,7 @@ const styles$g = {
 function DropdownPortal({
   children,
   className,
+  style,
   align = "start",
   position = "bottom",
   isNested,
@@ -2092,7 +2111,8 @@ function DropdownPortal({
         style: {
           ...portalPosition,
           ...maxWidth && { "--dropdown-portal-max-width": `${maxWidth + offset}px` },
-          ...maxHeight && { "--dropdown-portal-max-height": `${maxHeight + offset}px` }
+          ...maxHeight && { "--dropdown-portal-max-height": `${maxHeight + offset}px` },
+          ...style
         },
         ref: portalRef,
         className: classNames(styles$g.dropdownPortal, className),
@@ -2780,8 +2800,15 @@ function Tag({ children, className, size = "md", mode = "primary", disabled, ...
   );
 }
 
-const tooltipContent = "_tooltipContent_1267q_2";
-const tooltipTitle = "_tooltipTitle_1267q_96";
+const TOOLTIP_CONTENT_ARROW = {
+  width: 16,
+  height: 8,
+  offsetInline: 12,
+  offsetBlock: 10
+};
+
+const tooltipContent = "_tooltipContent_ww0bo_2";
+const tooltipTitle = "_tooltipTitle_ww0bo_92";
 const styles = {
 	tooltipContent: tooltipContent,
 	tooltipTitle: tooltipTitle
@@ -2794,7 +2821,6 @@ function TooltipContent({
   description,
   arrowAlign,
   arrowPosition,
-  arrowOffset,
   ...props
 }) {
   return /* @__PURE__ */ jsxs(
@@ -2804,11 +2830,11 @@ function TooltipContent({
       role: role ?? "tooltip",
       "data-align": arrowAlign,
       "data-position": arrowPosition,
-      ...arrowOffset && {
-        style: {
-          "--tooltip-content-arrow-offset-inline": `${arrowOffset.inline}px`,
-          "--tooltip-content-arrow-offset-block": `${arrowOffset.block}px`
-        }
+      style: {
+        "--tooltip-content-arrow-width": `${TOOLTIP_CONTENT_ARROW.width}px`,
+        "--tooltip-content-arrow-height": `${TOOLTIP_CONTENT_ARROW.height}px`,
+        "--tooltip-content-arrow-offset-inline": `${TOOLTIP_CONTENT_ARROW.offsetInline}px`,
+        "--tooltip-content-arrow-offset-block": `${TOOLTIP_CONTENT_ARROW.offsetBlock}px`
       },
       ...props,
       children: [
@@ -2819,7 +2845,24 @@ function TooltipContent({
   );
 }
 
-const TOOLTIP_OFFSET = 8;
+function getCenteredPortalShiftStyle({
+  portalPlacement,
+  triggerRef
+}) {
+  const triggerRect = triggerRef.current?.getBoundingClientRect();
+  if (!triggerRect || !portalPlacement || portalPlacement.align === "center") {
+    return {};
+  }
+  const isHorizontal = portalPlacement.position === "top" || portalPlacement.position === "bottom";
+  const triggerHalfSize = isHorizontal ? triggerRect.width / 2 : triggerRect.height / 2;
+  const arrowOffset = (isHorizontal ? TOOLTIP_CONTENT_ARROW.offsetInline : TOOLTIP_CONTENT_ARROW.offsetBlock) + TOOLTIP_CONTENT_ARROW.height * Math.SQRT2 / 2;
+  const shift = portalPlacement.align === "start" ? triggerHalfSize - arrowOffset : arrowOffset - triggerHalfSize;
+  const shiftPx = `${Number(shift.toFixed(3))}px`;
+  if (isHorizontal) {
+    return { marginLeft: shiftPx };
+  }
+  return { marginTop: shiftPx };
+}
 
 function TooltipRoot({
   children,
@@ -2830,19 +2873,23 @@ function TooltipRoot({
   maxHeight,
   withoutArrow = false,
   scrollContainerRef,
+  centerArrowToTrigger = true,
   ...tooltipContentProps
 }) {
-  return /* @__PURE__ */ jsx(DropdownMenu.Root, { children: ({ portalPlacement }) => /* @__PURE__ */ jsxs(Fragment$1, { children: [
+  return /* @__PURE__ */ jsx(DropdownMenu.Root, { children: ({ portalPlacement, triggerRef }) => /* @__PURE__ */ jsxs(Fragment$1, { children: [
     /* @__PURE__ */ jsx(DropdownMenu.Trigger, { asChild: true, triggerEvent, children }),
     /* @__PURE__ */ jsx(
       DropdownMenu.Portal,
       {
         align,
         position,
-        offset: TOOLTIP_OFFSET,
+        offset: TOOLTIP_CONTENT_ARROW.height,
         maxWidth,
         maxHeight,
         scrollContainerRef,
+        style: {
+          ...!withoutArrow && centerArrowToTrigger && getCenteredPortalShiftStyle({ portalPlacement, triggerRef })
+        },
         children: /* @__PURE__ */ jsx(
           TooltipContent,
           {

package/dist/style.css

@@ -1863,13 +1863,9 @@ textarea {
   }
 }
 @layer ui_baza_components {
-  ._tooltipContent_1267q_2 {
-    --tooltip-content-arrow-width: 16px;
-    --tooltip-content-arrow-height: 8px;
+  ._tooltipContent_ww0bo_2 {
     --tooltip-content-arrow-square-side: calc(var(--tooltip-content-arrow-height) * sqrt(2));
     --tooltip-content-arrow-border-radius: 2px;
-    --tooltip-content-arrow-offset-inline: var(--space-xl);
-    --tooltip-content-arrow-offset-block: var(--space-lg);
 
     display: flex;
     position: relative;
@@ -1957,7 +1953,7 @@ textarea {
     }
   }
 
-  ._tooltipTitle_1267q_96 {
+  ._tooltipTitle_ww0bo_92 {
     font-weight: var(--font-weight-medium);
     font-size: var(--size-md);
     line-height: var(--line-height-lg);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@grandbazar/ui-baza",
-  "version": "1.2.9",
+  "version": "1.2.11",
   "description": "A lightweight and modular UI kit for building modern, accessible web interfaces. Designed for flexibility, scalability, and developer happiness.",
   "repository": {
     "type": "git",