@tecsinapse/cortex-react 1.3.0-beta.27 → 1.3.0-beta.29

package/dist/cjs/components/DatePicker/Content.js

@@ -0,0 +1,21 @@
+'use strict';
+
+var React = require('react');
+require('@internationalized/date');
+require('react-aria');
+require('react-stately');
+require('@floating-ui/react');
+var useOutsideClickListener = require('../../hooks/useOutsideClickListener.js');
+var Context = require('../Popover/Context.js');
+
+const Content = ({ children }) => {
+  const { setIsOpen } = Context.usePopoverContext();
+  const ref = React.useRef(null);
+  useOutsideClickListener.useOutsideClickListener({
+    ref,
+    onClickOutside: () => setIsOpen(false)
+  });
+  return /* @__PURE__ */ React.createElement("div", { ref }, children);
+};
+
+exports.Content = Content;

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

@@ -10,40 +10,43 @@ require('@floating-ui/react');
 var Calendar = require('../Calendar/Calendar.js');
 var DateField = require('./DateField.js');
 var DatePickerInputBase = require('./DatePickerInputBase.js');
+var index = require('../Popover/index.js');
+var Context = require('../Popover/Context.js');
+var Content = require('./Content.js');
 
-const DatePickerInput = (props) => {
+const DatePickerInputWithPopover = (props) => {
+  const { setIsOpen } = Context.usePopoverContext();
   const { onChange, value, label, variants } = props;
   const { fieldProps, state, ref } = useDatePickerInput.useDatePickerInput({ value, onChange });
-  return /* @__PURE__ */ React.createElement("div", { "data-testid": "date-picker-input" }, /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ React.createElement("div", { ref, "data-testid": "date-picker-input" }, /* @__PURE__ */ React.createElement(index.Popover.Trigger, null, /* @__PURE__ */ React.createElement(
     DatePickerInputBase.DatePickerInputBase,
     {
-      onClickCalendar: () => state.isOpen ? state.close() : state.open(),
       variants: {
         ...variants,
         intent: state.isInvalid ? "error" : variants?.intent
       },
       label
     },
-    /* @__PURE__ */ React.createElement("div", { ref }, /* @__PURE__ */ React.createElement(
+    /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(
       DateField.DateField,
       {
         ...fieldProps,
         onChange: (value2) => {
           state.setDateValue(value2);
-          state.close();
         }
       }
     ))
-  ), state.isOpen ? /* @__PURE__ */ React.createElement("div", { className: "absolute" }, /* @__PURE__ */ React.createElement(
+  )), /* @__PURE__ */ React.createElement(index.Popover.Content, { className: "bg-inherit shadow-none border-none" }, /* @__PURE__ */ React.createElement(
     Calendar.Calendar,
     {
       value,
       onChange: (value2) => {
+        setIsOpen(false);
         state.setDateValue(utils.dateToCalendarDate(value2));
-        state.close();
       }
     }
-  )) : /* @__PURE__ */ React.createElement(React.Fragment, null));
+  )));
 };
+const DatePickerInput = (props) => /* @__PURE__ */ React.createElement(index.Popover.Root, { placement: "bottom-start", trigger: "click" }, /* @__PURE__ */ React.createElement(Content.Content, null, /* @__PURE__ */ React.createElement(DatePickerInputWithPopover, { ...props })));
 
 exports.DatePickerInput = DatePickerInput;

package/dist/cjs/components/DatePicker/DatePickerInputBase.js

@@ -8,14 +8,12 @@ var index = require('../Input/index.js');
 const DatePickerInputBase = ({
   children,
   variants,
-  label,
-  onClickCalendar
+  label
 }) => {
   return /* @__PURE__ */ React.createElement(index.Input.Face, { variants, "data-testid": "date-picker-input-base" }, /* @__PURE__ */ React.createElement("span", { className: cortexCore.labelStyle({}) }, label), /* @__PURE__ */ React.createElement("div", { className: cortexCore.inputBox("", label, "w-full flex flex-row") }, children), /* @__PURE__ */ React.createElement(index.Input.Right, { className: "" }, /* @__PURE__ */ React.createElement(
     lia.LiaCalendar,
     {
       className: "cursor-pointer mt-centi",
-      onClick: onClickCalendar,
       "data-testid": "date-picker-input-base-calendar"
     }
   )));

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

@@ -10,28 +10,30 @@ require('@floating-ui/react');
 var RangeCalendar = require('../Calendar/RangeCalendar.js');
 var DateField = require('./DateField.js');
 var DatePickerInputBase = require('./DatePickerInputBase.js');
+var index = require('../Popover/index.js');
+var Context = require('../Popover/Context.js');
+var Content = require('./Content.js');
 
-const DateRangePickerInput = (props) => {
+const DateRangePickerInputWithPopover = (props) => {
+  const { setIsOpen } = Context.usePopoverContext();
   const { onChange, value, label, variants } = props;
   const { endFieldProps, startFieldProps, ref, state } = useDateRangePickerInput.useDateRangePickerInput({ value, onChange });
-  return /* @__PURE__ */ React.createElement("div", { "data-testid": "date-range-picker-input" }, /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ React.createElement("div", { ref, "data-testid": "date-range-picker-input" }, /* @__PURE__ */ React.createElement(index.Popover.Trigger, null, /* @__PURE__ */ React.createElement(
     DatePickerInputBase.DatePickerInputBase,
     {
-      onClickCalendar: () => state.isOpen ? state.close() : state.open(),
       variants: {
         ...variants,
         intent: state.isInvalid ? "error" : variants?.intent
       },
       label
     },
-    /* @__PURE__ */ React.createElement("div", { ref, className: "flex flex-row gap-x-micro items-center" }, /* @__PURE__ */ React.createElement(
+    /* @__PURE__ */ React.createElement("div", { className: "flex flex-row gap-x-micro items-center" }, /* @__PURE__ */ React.createElement(
       DateField.DateField,
       {
         ...startFieldProps,
         value: utils.dateToCalendarDate(value?.start),
         onChange: (value2) => {
           state.setDate("start", value2);
-          state.close();
         }
       }
     ), /* @__PURE__ */ React.createElement("span", null, "-"), /* @__PURE__ */ React.createElement(
@@ -41,23 +43,23 @@ const DateRangePickerInput = (props) => {
         value: utils.dateToCalendarDate(value?.end),
         onChange: (value2) => {
           state.setDate("end", value2);
-          state.close();
         }
       }
     ))
-  ), state.isOpen ? /* @__PURE__ */ React.createElement("div", { className: "absolute" }, /* @__PURE__ */ React.createElement(
+  )), /* @__PURE__ */ React.createElement(index.Popover.Content, { className: "bg-inherit shadow-none border-none" }, /* @__PURE__ */ React.createElement(
     RangeCalendar.RangeCalendar,
     {
       value,
       onChange: (value2) => {
+        setIsOpen?.(false);
         state.setDateRange({
           start: utils.dateToCalendarDate(value2.start),
           end: utils.dateToCalendarDate(value2.end)
         });
-        state.close();
       }
     }
-  )) : /* @__PURE__ */ React.createElement(React.Fragment, null));
+  )));
 };
+const DateRangePickerInput = (props) => /* @__PURE__ */ React.createElement(index.Popover.Root, { placement: "bottom-start", trigger: "click" }, /* @__PURE__ */ React.createElement(Content.Content, null, /* @__PURE__ */ React.createElement(DateRangePickerInputWithPopover, { ...props })));
 
 exports.DateRangePickerInput = DateRangePickerInput;

package/dist/cjs/components/Menubar/MostUsedList.js

@@ -21,11 +21,11 @@ require('../Input/Mask.js');
 require('../Input/Right.js');
 require('../Input/Root.js');
 require('../Input/Search.js');
+require('../Popover/Context.js');
 require('../GroupButton.js');
 require('../Hint.js');
 var index = require('./index.js');
 require('../Modal.js');
-require('../Popover/Context.js');
 require('../../styles/calendar-cell.js');
 require('../../styles/groupButton.js');
 require('../../styles/progressBar.js');

package/dist/cjs/components/Select/Root.js

@@ -11,7 +11,7 @@ const SelectRoot = ({
   keyExtractor,
   labelExtractor
 }) => {
-  return /* @__PURE__ */ React.createElement(index.Popover.Provider, null, /* @__PURE__ */ React.createElement(index.Popover.Root, { placement: "bottom", trigger: "click" }, /* @__PURE__ */ React.createElement(context.SelectContext.Provider, { value: { value, keyExtractor, labelExtractor } }, /* @__PURE__ */ React.createElement(Content.Content, null, children))));
+  return /* @__PURE__ */ React.createElement(index.Popover.Root, { placement: "bottom", trigger: "click" }, /* @__PURE__ */ React.createElement(context.SelectContext.Provider, { value: { value, keyExtractor, labelExtractor } }, /* @__PURE__ */ React.createElement(Content.Content, null, children)));
 };
 
 exports.SelectRoot = SelectRoot;

package/dist/cjs/service/SnackbarSonner.js

@@ -22,6 +22,7 @@ require('../components/Input/Mask.js');
 require('../components/Input/Right.js');
 require('../components/Input/Root.js');
 require('../components/Input/Search.js');
+require('../components/Popover/Context.js');
 require('../components/GroupButton.js');
 require('../components/Hint.js');
 require('../provider/MenubarProvider.js');
@@ -36,7 +37,6 @@ require('../components/Menubar/Header.js');
 require('../components/Menubar/Item.js');
 require('../components/Menubar/SubItem.js');
 require('../components/Modal.js');
-require('../components/Popover/Context.js');
 require('../styles/calendar-cell.js');
 require('../styles/groupButton.js');
 require('../styles/progressBar.js');

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

@@ -0,0 +1,19 @@
+import React__default, { useRef } from 'react';
+import '@internationalized/date';
+import 'react-aria';
+import 'react-stately';
+import '@floating-ui/react';
+import { useOutsideClickListener } from '../../hooks/useOutsideClickListener.js';
+import { usePopoverContext } from '../Popover/Context.js';
+
+const Content = ({ children }) => {
+  const { setIsOpen } = usePopoverContext();
+  const ref = useRef(null);
+  useOutsideClickListener({
+    ref,
+    onClickOutside: () => setIsOpen(false)
+  });
+  return /* @__PURE__ */ React__default.createElement("div", { ref }, children);
+};
+
+export { Content };

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

@@ -8,40 +8,43 @@ import '@floating-ui/react';
 import { Calendar } from '../Calendar/Calendar.js';
 import { DateField } from './DateField.js';
 import { DatePickerInputBase } from './DatePickerInputBase.js';
+import { Popover } from '../Popover/index.js';
+import { usePopoverContext } from '../Popover/Context.js';
+import { Content } from './Content.js';
 
-const DatePickerInput = (props) => {
+const DatePickerInputWithPopover = (props) => {
+  const { setIsOpen } = usePopoverContext();
   const { onChange, value, label, variants } = props;
   const { fieldProps, state, ref } = useDatePickerInput({ value, onChange });
-  return /* @__PURE__ */ React__default.createElement("div", { "data-testid": "date-picker-input" }, /* @__PURE__ */ React__default.createElement(
+  return /* @__PURE__ */ React__default.createElement("div", { ref, "data-testid": "date-picker-input" }, /* @__PURE__ */ React__default.createElement(Popover.Trigger, null, /* @__PURE__ */ React__default.createElement(
     DatePickerInputBase,
     {
-      onClickCalendar: () => state.isOpen ? state.close() : state.open(),
       variants: {
         ...variants,
         intent: state.isInvalid ? "error" : variants?.intent
       },
       label
     },
-    /* @__PURE__ */ React__default.createElement("div", { ref }, /* @__PURE__ */ React__default.createElement(
+    /* @__PURE__ */ React__default.createElement("div", null, /* @__PURE__ */ React__default.createElement(
       DateField,
       {
         ...fieldProps,
         onChange: (value2) => {
           state.setDateValue(value2);
-          state.close();
         }
       }
     ))
-  ), state.isOpen ? /* @__PURE__ */ React__default.createElement("div", { className: "absolute" }, /* @__PURE__ */ React__default.createElement(
+  )), /* @__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));
-        state.close();
       }
     }
-  )) : /* @__PURE__ */ React__default.createElement(React__default.Fragment, null));
+  )));
 };
+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 })));
 
 export { DatePickerInput };

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

@@ -6,14 +6,12 @@ import { Input } from '../Input/index.js';
 const DatePickerInputBase = ({
   children,
   variants,
-  label,
-  onClickCalendar
+  label
 }) => {
   return /* @__PURE__ */ React__default.createElement(Input.Face, { variants, "data-testid": "date-picker-input-base" }, /* @__PURE__ */ React__default.createElement("span", { className: labelStyle({}) }, label), /* @__PURE__ */ React__default.createElement("div", { className: inputBox("", label, "w-full flex flex-row") }, children), /* @__PURE__ */ React__default.createElement(Input.Right, { className: "" }, /* @__PURE__ */ React__default.createElement(
     LiaCalendar,
     {
       className: "cursor-pointer mt-centi",
-      onClick: onClickCalendar,
       "data-testid": "date-picker-input-base-calendar"
     }
   )));

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

@@ -8,28 +8,30 @@ import '@floating-ui/react';
 import { RangeCalendar } from '../Calendar/RangeCalendar.js';
 import { DateField } from './DateField.js';
 import { DatePickerInputBase } from './DatePickerInputBase.js';
+import { Popover } from '../Popover/index.js';
+import { usePopoverContext } from '../Popover/Context.js';
+import { Content } from './Content.js';
 
-const DateRangePickerInput = (props) => {
+const DateRangePickerInputWithPopover = (props) => {
+  const { setIsOpen } = usePopoverContext();
   const { onChange, value, label, variants } = props;
   const { endFieldProps, startFieldProps, ref, state } = useDateRangePickerInput({ value, onChange });
-  return /* @__PURE__ */ React__default.createElement("div", { "data-testid": "date-range-picker-input" }, /* @__PURE__ */ React__default.createElement(
+  return /* @__PURE__ */ React__default.createElement("div", { ref, "data-testid": "date-range-picker-input" }, /* @__PURE__ */ React__default.createElement(Popover.Trigger, null, /* @__PURE__ */ React__default.createElement(
     DatePickerInputBase,
     {
-      onClickCalendar: () => state.isOpen ? state.close() : state.open(),
       variants: {
         ...variants,
         intent: state.isInvalid ? "error" : variants?.intent
       },
       label
     },
-    /* @__PURE__ */ React__default.createElement("div", { ref, className: "flex flex-row gap-x-micro items-center" }, /* @__PURE__ */ React__default.createElement(
+    /* @__PURE__ */ React__default.createElement("div", { className: "flex flex-row gap-x-micro items-center" }, /* @__PURE__ */ React__default.createElement(
       DateField,
       {
         ...startFieldProps,
         value: dateToCalendarDate(value?.start),
         onChange: (value2) => {
           state.setDate("start", value2);
-          state.close();
         }
       }
     ), /* @__PURE__ */ React__default.createElement("span", null, "-"), /* @__PURE__ */ React__default.createElement(
@@ -39,23 +41,23 @@ const DateRangePickerInput = (props) => {
         value: dateToCalendarDate(value?.end),
         onChange: (value2) => {
           state.setDate("end", value2);
-          state.close();
         }
       }
     ))
-  ), state.isOpen ? /* @__PURE__ */ React__default.createElement("div", { className: "absolute" }, /* @__PURE__ */ React__default.createElement(
+  )), /* @__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)
         });
-        state.close();
       }
     }
-  )) : /* @__PURE__ */ React__default.createElement(React__default.Fragment, null));
+  )));
 };
+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 })));
 
 export { DateRangePickerInput };

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

@@ -19,11 +19,11 @@ import '../Input/Mask.js';
 import '../Input/Right.js';
 import '../Input/Root.js';
 import '../Input/Search.js';
+import '../Popover/Context.js';
 import '../GroupButton.js';
 import '../Hint.js';
 import { Menubar } from './index.js';
 import '../Modal.js';
-import '../Popover/Context.js';
 import '../../styles/calendar-cell.js';
 import '../../styles/groupButton.js';
 import '../../styles/progressBar.js';

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

@@ -9,7 +9,7 @@ const SelectRoot = ({
   keyExtractor,
   labelExtractor
 }) => {
-  return /* @__PURE__ */ React__default.createElement(Popover.Provider, null, /* @__PURE__ */ React__default.createElement(Popover.Root, { placement: "bottom", trigger: "click" }, /* @__PURE__ */ React__default.createElement(SelectContext.Provider, { value: { value, keyExtractor, labelExtractor } }, /* @__PURE__ */ React__default.createElement(Content, null, children))));
+  return /* @__PURE__ */ React__default.createElement(Popover.Root, { placement: "bottom", trigger: "click" }, /* @__PURE__ */ React__default.createElement(SelectContext.Provider, { value: { value, keyExtractor, labelExtractor } }, /* @__PURE__ */ React__default.createElement(Content, null, children)));
 };
 
 export { SelectRoot };

package/dist/esm/service/SnackbarSonner.js

@@ -20,6 +20,7 @@ import '../components/Input/Mask.js';
 import '../components/Input/Right.js';
 import '../components/Input/Root.js';
 import '../components/Input/Search.js';
+import '../components/Popover/Context.js';
 import '../components/GroupButton.js';
 import '../components/Hint.js';
 import '../provider/MenubarProvider.js';
@@ -34,7 +35,6 @@ import '../components/Menubar/Header.js';
 import '../components/Menubar/Item.js';
 import '../components/Menubar/SubItem.js';
 import '../components/Modal.js';
-import '../components/Popover/Context.js';
 import '../styles/calendar-cell.js';
 import '../styles/groupButton.js';
 import '../styles/progressBar.js';

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

@@ -0,0 +1,5 @@
+import { ReactNode } from 'react';
+export interface ContentProps {
+    children: ReactNode;
+}
+export declare const Content: ({ children }: ContentProps) => JSX.Element;

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

@@ -1,8 +1,7 @@
 import React from 'react';
 import { InputPropsBase } from '../Input';
 interface DatePickerInputBaseProps extends InputPropsBase {
-    onClickCalendar: () => void;
     children: React.ReactElement;
 }
-export declare const DatePickerInputBase: ({ children, variants, label, onClickCalendar, }: DatePickerInputBaseProps) => JSX.Element;
+export declare const DatePickerInputBase: ({ children, variants, label, }: DatePickerInputBaseProps) => JSX.Element;
 export {};

package/dist/types/components/Input/types.d.ts

@@ -29,6 +29,3 @@ export interface InputMaskProps extends Omit<InputProps, 'onChange'> {
     onChange?: (e: InputMaskEvent) => void;
     mask: Mask;
 }
-export interface InputMaskExpressionProps extends InputMaskProps {
-    mask: Mask;
-}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tecsinapse/cortex-react",
-  "version": "1.3.0-beta.27",
+  "version": "1.3.0-beta.29",
   "description": "React components based in @tecsinapse/cortex-core",
   "license": "MIT",
   "main": "dist/esm/index.js",
@@ -43,5 +43,5 @@
     "react-dom": ">=18.0.0",
     "tailwind": ">=3.3.0"
   },
-  "gitHead": "43a88a5a80a54451f5e2621363f7164927e5ef47"
+  "gitHead": "2ceb508137d792de6f16fd375bd66abe5db90420"
 }