@tecsinapse/cortex-react 1.9.14 → 1.9.15

package/dist/esm/components/DatePicker/DateField.js

@@ -4,7 +4,7 @@ import { useLocale, useDateField } from 'react-aria';
 import { useDateFieldState } from 'react-stately';
 import { DateSegment } from './DateSegment.js';
 
-const DateField = (props) => {
+const DateField = ({ onClick, ...props }) => {
   const { locale } = useLocale();
   const state = useDateFieldState({
     ...props,
@@ -17,7 +17,17 @@ const DateField = (props) => {
     state,
     ref
   );
-  return /* @__PURE__ */ React__default.createElement("div", { ...fieldProps, ref, className: "flex flex-row" }, state.segments.map((segment, i) => /* @__PURE__ */ React__default.createElement(DateSegment, { key: i, segment, state })));
+  return /* @__PURE__ */ React__default.createElement(
+    "div",
+    {
+      ...fieldProps,
+      ref,
+      className: "flex flex-row",
+      onClick,
+      "data-testid": "date-field-div"
+    },
+    state.segments.map((segment, i) => /* @__PURE__ */ React__default.createElement(DateSegment, { key: i, segment, state }))
+  );
 };
 
 export { DateField };

package/dist/esm/components/DatePicker/DatePickerInput.js

@@ -4,21 +4,25 @@ import 'react-aria';
 import 'react-stately';
 import { dateToCalendarDate } from '../../utils/date.js';
 import { useDatePickerInput } from '../../hooks/useDatePickerInput.js';
-import '@floating-ui/react';
-import 'currency.js';
+import { useDatePickerInputCommon } from '../../hooks/useDatePickerInputCommon.js';
 import 'react-dropzone';
 import 'uuid';
+import '@floating-ui/react';
+import 'currency.js';
 import { Calendar } from '../Calendar/Calendar.js';
 import { Popover } from '../Popover/index.js';
-import { usePopoverContext } from '../Popover/Context.js';
 import { Content } from '../Select/Content.js';
 import { DateField } from './DateField.js';
 import { DatePickerInputBase } from './DatePickerInputBase.js';
 
 const DatePickerInputWithPopover = (props) => {
-  const { setIsOpen } = usePopoverContext();
   const { onChange, value, label, variants, disabled } = props;
   const { fieldProps, state, ref } = useDatePickerInput({ value, onChange });
+  const { handleTogglePopover, handleChangeCalendar } = useDatePickerInputCommon({
+    onChangeCalendar: (value2) => {
+      state.setDateValue(dateToCalendarDate(value2));
+    }
+  });
   return /* @__PURE__ */ React__default.createElement("div", { ref, "data-testid": "date-picker-input" }, /* @__PURE__ */ React__default.createElement(Popover.Trigger, { disabled: true }, /* @__PURE__ */ React__default.createElement(
     DatePickerInputBase,
     {
@@ -30,19 +34,24 @@ const DatePickerInputWithPopover = (props) => {
       disabled,
       value,
       onClean: () => state.setValue(null),
-      onToggle: () => setIsOpen((open) => !open)
+      onToggle: handleTogglePopover
     },
-    /* @__PURE__ */ React__default.createElement(DateField, { ...fieldProps, isDisabled: disabled })
-  )), /* @__PURE__ */ React__default.createElement(Popover.Content, { className: "bg-inherit shadow-none border-none" }, /* @__PURE__ */ React__default.createElement(
-    Calendar,
-    {
-      value,
-      onChange: (value2) => {
-        setIsOpen(false);
-        state.setDateValue(dateToCalendarDate(value2));
+    /* @__PURE__ */ React__default.createElement(
+      DateField,
+      {
+        ...fieldProps,
+        isDisabled: disabled,
+        onClick: handleTogglePopover
       }
-    }
-  )));
+    )
+  )), /* @__PURE__ */ React__default.createElement(
+    Popover.Content,
+    {
+      className: "bg-inherit shadow-none border-none",
+      initialFocus: -1
+    },
+    /* @__PURE__ */ React__default.createElement(Calendar, { value, onChange: handleChangeCalendar })
+  ));
 };
 const DatePickerInput = (props) => /* @__PURE__ */ React__default.createElement(Popover.Root, { placement: "bottom-start", trigger: "click" }, /* @__PURE__ */ React__default.createElement(Content, null, /* @__PURE__ */ React__default.createElement(DatePickerInputWithPopover, { ...props })));
 

package/dist/esm/components/DatePicker/DateRangePickerInput.js

@@ -3,22 +3,29 @@ import '@internationalized/date';
 import 'react-aria';
 import 'react-stately';
 import { dateToCalendarDate } from '../../utils/date.js';
+import { useDatePickerInputCommon } from '../../hooks/useDatePickerInputCommon.js';
 import { useDateRangePickerInput } from '../../hooks/useDateRangePickerInput.js';
-import '@floating-ui/react';
-import 'currency.js';
 import 'react-dropzone';
 import 'uuid';
+import '@floating-ui/react';
+import 'currency.js';
 import { RangeCalendar } from '../Calendar/RangeCalendar.js';
 import { Popover } from '../Popover/index.js';
-import { usePopoverContext } from '../Popover/Context.js';
 import { Content } from './Content.js';
 import { DateField } from './DateField.js';
 import { DatePickerInputBase } from './DatePickerInputBase.js';
 
 const DateRangePickerInputWithPopover = (props) => {
-  const { setIsOpen } = usePopoverContext();
   const { onChange, value, label, variants, disabled = false } = props;
   const { endFieldProps, startFieldProps, ref, state } = useDateRangePickerInput({ value, onChange });
+  const { handleTogglePopover, handleChangeCalendar } = useDatePickerInputCommon({
+    onChangeRangeCalendar: (value2) => {
+      state.setDateRange({
+        start: dateToCalendarDate(value2?.start),
+        end: dateToCalendarDate(value2?.end)
+      });
+    }
+  });
   return /* @__PURE__ */ React__default.createElement("div", { ref, "data-testid": "date-range-picker-input" }, /* @__PURE__ */ React__default.createElement(Popover.Trigger, { disabled: true }, /* @__PURE__ */ React__default.createElement(
     DatePickerInputBase,
     {
@@ -30,22 +37,31 @@ const DateRangePickerInputWithPopover = (props) => {
       disabled,
       value,
       onClean: () => state.setValue(null),
-      onToggle: () => setIsOpen((open) => !open)
+      onToggle: handleTogglePopover
     },
-    /* @__PURE__ */ React__default.createElement("div", { className: "flex flex-row gap-x-micro items-center" }, /* @__PURE__ */ React__default.createElement(DateField, { ...startFieldProps, isDisabled: disabled }), /* @__PURE__ */ React__default.createElement("span", null, "-"), /* @__PURE__ */ React__default.createElement(DateField, { ...endFieldProps, isDisabled: disabled }))
-  )), /* @__PURE__ */ React__default.createElement(Popover.Content, { className: "bg-inherit shadow-none border-none" }, /* @__PURE__ */ React__default.createElement(
-    RangeCalendar,
-    {
-      value,
-      onChange: (value2) => {
-        setIsOpen?.(false);
-        state.setDateRange({
-          start: dateToCalendarDate(value2.start),
-          end: dateToCalendarDate(value2.end)
-        });
+    /* @__PURE__ */ React__default.createElement("div", { className: "flex flex-row gap-x-micro items-center" }, /* @__PURE__ */ React__default.createElement(
+      DateField,
+      {
+        ...startFieldProps,
+        isDisabled: disabled,
+        onClick: handleTogglePopover
       }
-    }
-  )));
+    ), /* @__PURE__ */ React__default.createElement("span", null, "-"), /* @__PURE__ */ React__default.createElement(
+      DateField,
+      {
+        ...endFieldProps,
+        isDisabled: disabled,
+        onClick: handleTogglePopover
+      }
+    ))
+  )), /* @__PURE__ */ React__default.createElement(
+    Popover.Content,
+    {
+      className: "bg-inherit shadow-none border-none",
+      initialFocus: -1
+    },
+    /* @__PURE__ */ React__default.createElement(RangeCalendar, { value, onChange: handleChangeCalendar })
+  ));
 };
 const DateRangePickerInput = (props) => /* @__PURE__ */ React__default.createElement(Popover.Root, { placement: "bottom-start", trigger: "click" }, /* @__PURE__ */ React__default.createElement(Content, null, /* @__PURE__ */ React__default.createElement(DateRangePickerInputWithPopover, { ...props })));
 

package/dist/esm/components/Input/Mask.js

@@ -2,11 +2,12 @@ import React__default, { useEffect, useCallback } from 'react';
 import '@internationalized/date';
 import 'react-aria';
 import 'react-stately';
+import '../Popover/Context.js';
+import 'react-dropzone';
+import 'uuid';
 import '@floating-ui/react';
 import { useNumberMask } from '../../hooks/useNumberMask.js';
 import { useStringMask } from '../../hooks/useStringMask.js';
-import 'react-dropzone';
-import 'uuid';
 import { InputRoot } from './Root.js';
 
 const InputMask = React__default.forwardRef(

package/dist/esm/components/Input/Search.js

@@ -3,11 +3,12 @@ import { IoSearchOutline } from 'react-icons/io5';
 import '@internationalized/date';
 import 'react-aria';
 import 'react-stately';
+import '../Popover/Context.js';
 import { useDebouncedState } from '../../hooks/useDebouncedState.js';
-import '@floating-ui/react';
-import 'currency.js';
 import 'react-dropzone';
 import 'uuid';
+import '@floating-ui/react';
+import 'currency.js';
 import { InputBox } from './Box.js';
 import { InputFace } from './Face.js';
 import { InputLeft } from './Left.js';

package/dist/esm/components/Menubar/Categories.js

@@ -3,11 +3,12 @@ import Masonry from '../Masonry.js';
 import '@internationalized/date';
 import 'react-aria';
 import 'react-stately';
-import '@floating-ui/react';
-import 'currency.js';
+import '../Popover/Context.js';
+import { useDimensions } from '../../hooks/useDimensions.js';
 import 'react-dropzone';
 import 'uuid';
-import { useDimensions } from '../../hooks/useDimensions.js';
+import '@floating-ui/react';
+import 'currency.js';
 
 const Categories = ({ children }) => {
   const { width } = useDimensions();

package/dist/esm/components/Menubar/Dropdown.js

@@ -4,10 +4,11 @@ import clsx from 'clsx';
 import '@internationalized/date';
 import 'react-aria';
 import 'react-stately';
-import '@floating-ui/react';
-import 'currency.js';
+import '../Popover/Context.js';
 import 'react-dropzone';
 import 'uuid';
+import '@floating-ui/react';
+import 'currency.js';
 import '../../provider/MenubarContext.js';
 import '../../provider/SnackbarProvider.js';
 import { useMenubar } from '../../provider/useMenubar.js';

package/dist/esm/components/Menubar/Header.js

@@ -3,10 +3,11 @@ import { IoCloseOutline, IoMenu } from 'react-icons/io5';
 import '@internationalized/date';
 import 'react-aria';
 import 'react-stately';
-import '@floating-ui/react';
-import 'currency.js';
+import '../Popover/Context.js';
 import 'react-dropzone';
 import 'uuid';
+import '@floating-ui/react';
+import 'currency.js';
 import '../../provider/MenubarContext.js';
 import '../../provider/SnackbarProvider.js';
 import { useMenubar } from '../../provider/useMenubar.js';

package/dist/esm/components/Menubar/Item.js

@@ -6,10 +6,11 @@ import clsx from 'clsx';
 import '@internationalized/date';
 import 'react-aria';
 import 'react-stately';
-import '@floating-ui/react';
-import 'currency.js';
+import '../Popover/Context.js';
 import 'react-dropzone';
 import 'uuid';
+import '@floating-ui/react';
+import 'currency.js';
 import '../../provider/MenubarContext.js';
 import '../../provider/SnackbarProvider.js';
 import { useMenubar } from '../../provider/useMenubar.js';

package/dist/esm/components/Menubar/MostUsed.js

@@ -3,11 +3,12 @@ import { mostUsed } from '../../styles/menubar.js';
 import '@internationalized/date';
 import 'react-aria';
 import 'react-stately';
-import '@floating-ui/react';
-import 'currency.js';
+import '../Popover/Context.js';
+import { useDimensions } from '../../hooks/useDimensions.js';
 import 'react-dropzone';
 import 'uuid';
-import { useDimensions } from '../../hooks/useDimensions.js';
+import '@floating-ui/react';
+import 'currency.js';
 
 const { container, label: labelClass, containerList } = mostUsed();
 const MostUsed = ({ label, children, ...rest }) => {

package/dist/esm/components/Menubar/Search.js

@@ -5,10 +5,11 @@ import { animate } from '../../styles/menubar.js';
 import '@internationalized/date';
 import 'react-aria';
 import 'react-stately';
-import '@floating-ui/react';
-import 'currency.js';
+import '../Popover/Context.js';
 import 'react-dropzone';
 import 'uuid';
+import '@floating-ui/react';
+import 'currency.js';
 import '../../provider/MenubarContext.js';
 import '../../provider/SnackbarProvider.js';
 import { useMenubar } from '../../provider/useMenubar.js';

package/dist/esm/components/Menubar/SubItem.js

@@ -4,10 +4,11 @@ import ItemLink from './ItemLink.js';
 import '@internationalized/date';
 import 'react-aria';
 import 'react-stately';
-import '@floating-ui/react';
-import 'currency.js';
+import '../Popover/Context.js';
 import 'react-dropzone';
 import 'uuid';
+import '@floating-ui/react';
+import 'currency.js';
 import '../../provider/MenubarContext.js';
 import '../../provider/SnackbarProvider.js';
 import { useMenubar } from '../../provider/useMenubar.js';

package/dist/esm/components/Popover/Provider.js

@@ -2,11 +2,11 @@ import React__default from 'react';
 import '@internationalized/date';
 import 'react-aria';
 import 'react-stately';
-import { useFloatingElement } from '../../hooks/useFloatingElement.js';
-import 'currency.js';
+import { Context } from './Context.js';
 import 'react-dropzone';
 import 'uuid';
-import { Context } from './Context.js';
+import { useFloatingElement } from '../../hooks/useFloatingElement.js';
+import 'currency.js';
 
 const PopoverProvider = ({
   children,

package/dist/esm/components/Select/GroupedOptions.js

@@ -3,12 +3,12 @@ import React__default, { useContext, useCallback } from 'react';
 import '@internationalized/date';
 import 'react-aria';
 import 'react-stately';
+import { usePopoverContext } from '../Popover/Context.js';
+import 'react-dropzone';
+import 'uuid';
 import '@floating-ui/react';
 import 'currency.js';
 import { useSelectGroupedOptions } from '../../hooks/useSelectGroupedOptions.js';
-import 'react-dropzone';
-import 'uuid';
-import { usePopoverContext } from '../Popover/Context.js';
 import { SelectOption } from './Option.js';
 import { SkeletonOptions } from './SkeletonOptions.js';
 import { SelectContext } from './context.js';

package/dist/esm/components/Select/MultiGroupedOptions.js

@@ -3,11 +3,12 @@ import React__default, { useContext, useMemo } from 'react';
 import '@internationalized/date';
 import 'react-aria';
 import 'react-stately';
+import '../Popover/Context.js';
+import 'react-dropzone';
+import 'uuid';
 import '@floating-ui/react';
 import 'currency.js';
 import { useSelectGroupedOptions } from '../../hooks/useSelectGroupedOptions.js';
-import 'react-dropzone';
-import 'uuid';
 import { SelectMultiOption } from './MultiOption.js';
 import { SkeletonOptions } from './SkeletonOptions.js';
 import { SelectContext, SelectMultiOptionsContext } from './context.js';

package/dist/esm/components/Select/MultiOptions.js

@@ -3,11 +3,12 @@ import React__default, { useContext } from 'react';
 import '@internationalized/date';
 import 'react-aria';
 import 'react-stately';
+import '../Popover/Context.js';
+import 'react-dropzone';
+import 'uuid';
 import '@floating-ui/react';
 import 'currency.js';
 import { useSelectOptions } from '../../hooks/useSelectOptions.js';
-import 'react-dropzone';
-import 'uuid';
 import { SelectMultiOption } from './MultiOption.js';
 import { SkeletonOptions } from './SkeletonOptions.js';
 import { SelectContext, SelectMultiOptionsContext } from './context.js';

package/dist/esm/components/Select/Options.js

@@ -3,12 +3,12 @@ import React__default, { useContext, useCallback } from 'react';
 import '@internationalized/date';
 import 'react-aria';
 import 'react-stately';
+import { usePopoverContext } from '../Popover/Context.js';
+import 'react-dropzone';
+import 'uuid';
 import '@floating-ui/react';
 import 'currency.js';
 import { useSelectOptions } from '../../hooks/useSelectOptions.js';
-import 'react-dropzone';
-import 'uuid';
-import { usePopoverContext } from '../Popover/Context.js';
 import { SelectOption } from './Option.js';
 import { SkeletonOptions } from './SkeletonOptions.js';
 import { SelectContext } from './context.js';

package/dist/esm/components/Tooltip.js

@@ -4,10 +4,11 @@ import '@internationalized/date';
 import 'react-aria';
 import 'react-stately';
 import { cloneWithProps } from '../utils/react.js';
-import { useFloatingElement } from '../hooks/useFloatingElement.js';
-import 'currency.js';
+import './Popover/Context.js';
 import 'react-dropzone';
 import 'uuid';
+import { useFloatingElement } from '../hooks/useFloatingElement.js';
+import 'currency.js';
 
 const Tooltip = forwardRef(
   (props, ref) => {

package/dist/esm/hooks/useDatePickerInputCommon.js

@@ -0,0 +1,23 @@
+import { useCallback } from 'react';
+import { usePopoverContext } from '../components/Popover/Context.js';
+
+const useDatePickerInputCommon = ({
+  onChangeCalendar,
+  onChangeRangeCalendar
+}) => {
+  const { setIsOpen } = usePopoverContext();
+  const handleTogglePopover = useCallback(() => {
+    setIsOpen((open) => !open);
+  }, []);
+  const handleChangeCalendar = useCallback((value) => {
+    setIsOpen(false);
+    onChangeCalendar?.(value);
+    onChangeRangeCalendar?.(value);
+  }, []);
+  return {
+    handleTogglePopover,
+    handleChangeCalendar
+  };
+};
+
+export { useDatePickerInputCommon };

package/dist/esm/hooks/useDateRangePickerInput.js

@@ -25,7 +25,12 @@ const useDateRangePickerInput = ({
     state,
     ref
   );
-  return { startFieldProps, endFieldProps, state, ref };
+  return {
+    startFieldProps,
+    endFieldProps,
+    state,
+    ref
+  };
 };
 
 export { useDateRangePickerInput };

package/dist/esm/index.js

@@ -43,8 +43,11 @@ export { useCalendar } from './hooks/useCalendar.js';
 export { useCalendarCell } from './hooks/useCalendarCell.js';
 export { useCalendarGrid } from './hooks/useCalendarGrid.js';
 export { useDatePickerInput } from './hooks/useDatePickerInput.js';
+export { useDatePickerInputCommon } from './hooks/useDatePickerInputCommon.js';
 export { useDateRangePickerInput } from './hooks/useDateRangePickerInput.js';
 export { useDebouncedState } from './hooks/useDebouncedState.js';
+export { useDimensions } from './hooks/useDimensions.js';
+export { useFileUpload } from './hooks/useFileUpload.js';
 export { useFloatingElement } from './hooks/useFloatingElement.js';
 export { applyNumberMask, getInternalNumberAndMask, useNumberMask } from './hooks/useNumberMask.js';
 export { useOutsideClickListener } from './hooks/useOutsideClickListener.js';
@@ -52,8 +55,6 @@ export { useRangeCalendar } from './hooks/useRangeCalendar.js';
 export { useSelectGroupedOptions } from './hooks/useSelectGroupedOptions.js';
 export { useSelectOptions } from './hooks/useSelectOptions.js';
 export { applyStringMask, getMask, mergeMask, useStringMask } from './hooks/useStringMask.js';
-export { useFileUpload } from './hooks/useFileUpload.js';
-export { useDimensions } from './hooks/useDimensions.js';
 export { SnackbarSonner } from './service/SnackbarSonner.js';
 export { MenubarProvider } from './provider/MenubarProvider.js';
 export { SnackbarProvider, useSnackbar } from './provider/SnackbarProvider.js';

package/dist/esm/provider/MenubarProvider.js

@@ -2,11 +2,12 @@ import React__default, { useRef, useEffect } from 'react';
 import '@internationalized/date';
 import 'react-aria';
 import 'react-stately';
+import '../components/Popover/Context.js';
+import 'react-dropzone';
+import 'uuid';
 import '@floating-ui/react';
 import 'currency.js';
 import { useOutsideClickListener } from '../hooks/useOutsideClickListener.js';
-import 'react-dropzone';
-import 'uuid';
 import { MenubarContext } from './MenubarContext.js';
 
 const MenubarProvider = ({ children }) => {

package/dist/types/components/DatePicker/DateField.d.ts

@@ -1,6 +1,7 @@
 /// <reference types="react" />
 import { AriaDateFieldProps, DateValue } from 'react-aria';
 interface DateFieldProps extends AriaDateFieldProps<DateValue> {
+    onClick?: () => void;
 }
-export declare const DateField: (props: DateFieldProps) => JSX.Element;
+export declare const DateField: ({ onClick, ...props }: DateFieldProps) => JSX.Element;
 export {};

package/dist/types/components/DatePicker/DateSegment.d.ts

@@ -1,6 +1,6 @@
-/// <reference types="react" />
+import { HTMLAttributes } from 'react';
 import { DateFieldState, DateSegment as DateSegmentType } from 'react-stately';
-interface DateSegmentProps {
+interface DateSegmentProps extends HTMLAttributes<HTMLDivElement> {
     segment: DateSegmentType;
     state: DateFieldState;
 }

package/dist/types/hooks/index.d.ts

@@ -2,8 +2,11 @@ export * from './useCalendar';
 export * from './useCalendarCell';
 export * from './useCalendarGrid';
 export * from './useDatePickerInput';
+export * from './useDatePickerInputCommon';
 export * from './useDateRangePickerInput';
 export * from './useDebouncedState';
+export * from './useDimensions';
+export * from './useFileUpload';
 export * from './useFloatingElement';
 export * from './useNumberMask';
 export * from './useOutsideClickListener';
@@ -11,5 +14,3 @@ export * from './useRangeCalendar';
 export * from './useSelectGroupedOptions';
 export * from './useSelectOptions';
 export * from './useStringMask';
-export * from './useFileUpload';
-export * from './useDimensions';

package/dist/types/hooks/useDatePickerInputCommon.d.ts

@@ -0,0 +1,10 @@
+import { DateRange } from '../components';
+interface useDatePickerInputCommonProps {
+    onChangeCalendar?: (value?: Date) => void;
+    onChangeRangeCalendar?: (value?: DateRange) => void;
+}
+export declare const useDatePickerInputCommon: ({ onChangeCalendar, onChangeRangeCalendar, }: useDatePickerInputCommonProps) => {
+    handleTogglePopover: () => void;
+    handleChangeCalendar: (value?: Date | DateRange) => void;
+};
+export {};

package/dist/types/hooks/useFloatingElement.d.ts

@@ -26,10 +26,10 @@ export declare const useFloatingElement: ({ placement, trigger, delay, arrowRef,
         setFloating: (node: HTMLElement | null) => void;
     } & import("@floating-ui/react").ExtendedRefs<import("@floating-ui/react").ReferenceType>;
     context: {
-        placement: Placement;
-        strategy: import("@floating-ui/utils").Strategy;
         x: number;
         y: number;
+        placement: Placement;
+        strategy: import("@floating-ui/utils").Strategy;
         middlewareData: import("@floating-ui/core").MiddlewareData;
         isPositioned: boolean;
         update: () => void;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tecsinapse/cortex-react",
-  "version": "1.9.14",
+  "version": "1.9.15",
   "description": "React components based in @tecsinapse/cortex-core",
   "license": "MIT",
   "main": "dist/esm/index.js",
@@ -48,5 +48,5 @@
     "react-dom": ">=18.0.0",
     "tailwind": ">=3.3.0"
   },
-  "gitHead": "1de76c217177d6db0658ba0421572070d92325fb"
+  "gitHead": "df515a84caa892402119fb491ba062ac0654918c"
 }