@tecsinapse/cortex-react 1.3.0-beta.0 → 1.3.0-beta.10

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

@@ -0,0 +1,29 @@
+import React from 'react';
+import clsx from 'clsx';
+import { usePopoverContext } from './Context.js';
+
+const PopoverContent = ({
+  children,
+  className
+}) => {
+  const { isOpen, x, y, strategy, floatingStyles, refs } = usePopoverContext();
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, isOpen ? /* @__PURE__ */ React.createElement(
+    "div",
+    {
+      ref: refs.setFloating,
+      className: clsx(
+        "border border-gray-200 bg-black  p-4 rounded-md shadow-lg z-50",
+        className
+      ),
+      style: {
+        position: strategy,
+        top: y ?? 0,
+        left: x ?? 0,
+        ...floatingStyles
+      }
+    },
+    children
+  ) : /* @__PURE__ */ React.createElement(React.Fragment, null));
+};
+
+export { PopoverContent };

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

@@ -0,0 +1,12 @@
+import { createContext, useContext } from 'react';
+
+const Context = createContext(void 0);
+const usePopoverContext = () => {
+  const context = useContext(Context);
+  if (!context) {
+    throw new Error("usePopoverContext must be used within a PopoverProvider");
+  }
+  return context;
+};
+
+export { Context, usePopoverContext };

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

@@ -0,0 +1,17 @@
+import React from 'react';
+import '@internationalized/date';
+import 'react-aria';
+import 'react-stately';
+import { useFloatingLogic } from '../../hooks/useFloatingLogic.js';
+import { Context } from './Context.js';
+
+const PopoverProvider = ({
+  children,
+  placement,
+  trigger
+}) => {
+  const floatingLogic = useFloatingLogic({ placement, trigger });
+  return /* @__PURE__ */ React.createElement(Context.Provider, { value: { ...floatingLogic } }, children);
+};
+
+export { PopoverProvider };

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

@@ -0,0 +1,12 @@
+import React from 'react';
+import { Popover } from './index.js';
+
+const PopoverRoot = ({
+  children,
+  placement,
+  trigger
+}) => {
+  return /* @__PURE__ */ React.createElement(Popover.Provider, { placement, trigger }, children);
+};
+
+export { PopoverRoot };

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

@@ -0,0 +1,9 @@
+import React from 'react';
+import { usePopoverContext } from './Context.js';
+
+const PopoverTrigger = ({ children }) => {
+  const { triggerProps } = usePopoverContext();
+  return React.cloneElement(children, triggerProps);
+};
+
+export { PopoverTrigger };

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

@@ -0,0 +1,13 @@
+import { PopoverRoot } from './Root.js';
+import { PopoverTrigger } from './Trigger.js';
+import { PopoverContent } from './Content.js';
+import { PopoverProvider } from './Provider.js';
+
+const Popover = {
+  Root: PopoverRoot,
+  Trigger: PopoverTrigger,
+  Content: PopoverContent,
+  Provider: PopoverProvider
+};
+
+export { Popover };

package/dist/esm/components/RangeCalendar.js

@@ -1,42 +1,35 @@
-import { createCalendar, CalendarDate, getLocalTimeZone } from '@internationalized/date';
 import React from 'react';
-import { useLocale, useRangeCalendar } from 'react-aria';
-import { useRangeCalendarState } from 'react-stately';
+import '@internationalized/date';
+import 'react-aria';
+import 'react-stately';
+import { useRangeCalendar } from '../hooks/useRangeCalendar.js';
+import '@floating-ui/react';
 import { CalendarGrid } from './CalendarGrid.js';
 import { CalendarHeader } from './CalendarHeader.js';
 
 const RangeCalendar = ({ value, onChange }) => {
-  const { locale } = useLocale();
-  const state = useRangeCalendarState({
-    locale,
-    createCalendar,
-    defaultValue: {
-      start: new CalendarDate(
-        value.start.getFullYear(),
-        value.start.getMonth(),
-        value.start.getDate()
-      ),
-      end: new CalendarDate(
-        value.end.getFullYear(),
-        value.end.getMonth(),
-        value.end.getDate()
-      )
-    },
-    onChange: (value2) => onChange({
-      start: value2.start.toDate(getLocalTimeZone()),
-      end: value2.end.toDate(getLocalTimeZone())
-    })
+  const { calendarProps, state, title, ref } = useRangeCalendar({
+    value,
+    onChange
   });
-  const ref = React.useRef(null);
-  const { calendarProps, title } = useRangeCalendar({}, state, ref);
-  return /* @__PURE__ */ React.createElement("div", { ...calendarProps, className: "calendar", ref }, /* @__PURE__ */ React.createElement(
-    CalendarHeader,
+  return /* @__PURE__ */ React.createElement(
+    "div",
     {
-      onClickPrevButton: () => state.focusPreviousPage(),
-      onClickNextButton: () => state.focusNextPage(),
-      title
-    }
-  ), /* @__PURE__ */ React.createElement(CalendarGrid, { state }));
+      ...calendarProps,
+      className: "calendar",
+      ref,
+      "data-testid": "calendar-range-div"
+    },
+    /* @__PURE__ */ React.createElement(
+      CalendarHeader,
+      {
+        onClickPrevButton: () => state.focusPreviousPage(),
+        onClickNextButton: () => state.focusNextPage(),
+        title
+      }
+    ),
+    /* @__PURE__ */ React.createElement(CalendarGrid, { state })
+  );
 };
 
 export { RangeCalendar };

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

@@ -0,0 +1,25 @@
+import React, { useRef } from 'react';
+import '@internationalized/date';
+import 'react-aria';
+import 'react-stately';
+import { useOutsideClickListener } from '../../hooks/useOutsideClickListener.js';
+import '@floating-ui/react';
+import { usePopoverContext } from '../Popover/Context.js';
+import { SelectContext } from './context.js';
+
+const Content = ({
+  children,
+  keyExtractor,
+  labelExtractor,
+  value
+}) => {
+  const { setIsOpen } = usePopoverContext();
+  const ref = useRef(null);
+  useOutsideClickListener({
+    ref,
+    onClickOutside: () => setIsOpen(false)
+  });
+  return /* @__PURE__ */ React.createElement(SelectContext.Provider, { value: { value, keyExtractor, labelExtractor } }, /* @__PURE__ */ React.createElement("div", { className: "w-full relative bg-white", ref }, children));
+};
+
+export { Content as default };

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

@@ -0,0 +1,32 @@
+import { selectVariants } from '@tecsinapse/cortex-core';
+import React, { useContext, useCallback } from 'react';
+import { Select } from './index.js';
+import { SelectContext } from './context.js';
+import { usePopoverContext } from '../Popover/Context.js';
+
+const { groupedTitle, containerGrouped } = selectVariants();
+const SelectGroupedOptions = ({
+  onSelect,
+  groupedLabelExtractor,
+  options
+}) => {
+  const { keyExtractor } = useContext(SelectContext);
+  const { setIsOpen } = usePopoverContext();
+  const handleSelect = useCallback(
+    (option) => {
+      onSelect(option);
+      setIsOpen?.(false);
+    },
+    [onSelect]
+  );
+  return /* @__PURE__ */ React.createElement("ul", { role: "select", className: containerGrouped() }, [...options ?? []].map(([key, value]) => /* @__PURE__ */ React.createElement("div", { key }, /* @__PURE__ */ React.createElement("span", { className: groupedTitle() }, groupedLabelExtractor?.(key)), value.map((option) => /* @__PURE__ */ React.createElement(
+    Select.Option,
+    {
+      option,
+      key: keyExtractor(option),
+      onSelectOption: handleSelect
+    }
+  )))));
+};
+
+export { SelectGroupedOptions };

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

@@ -0,0 +1,23 @@
+import { option } from '@tecsinapse/cortex-core';
+import React, { useContext } from 'react';
+import { SelectContext } from './context.js';
+
+const SelectOption = ({
+  onSelectOption,
+  option: option$1
+}) => {
+  const { keyExtractor, labelExtractor, value } = useContext(SelectContext);
+  return /* @__PURE__ */ React.createElement(
+    "li",
+    {
+      onClick: () => onSelectOption(option$1),
+      className: option({
+        selected: value && keyExtractor(value) === keyExtractor(option$1)
+      }),
+      role: "option"
+    },
+    labelExtractor(option$1)
+  );
+};
+
+export { SelectOption };

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

@@ -0,0 +1,29 @@
+import React, { useContext, useCallback } from 'react';
+import { SelectContext } from './context.js';
+import { Select } from './index.js';
+import { usePopoverContext } from '../Popover/Context.js';
+
+const SelectOptions = ({
+  onSelect,
+  options
+}) => {
+  const { keyExtractor } = useContext(SelectContext);
+  const { setIsOpen } = usePopoverContext();
+  const handleSelect = useCallback(
+    (option) => {
+      onSelect(option);
+      setIsOpen?.(false);
+    },
+    [onSelect]
+  );
+  return /* @__PURE__ */ React.createElement("ul", { role: "select", className: "list-none" }, (options ?? []).map((option) => /* @__PURE__ */ React.createElement(
+    Select.Option,
+    {
+      option,
+      key: keyExtractor(option),
+      onSelectOption: handleSelect
+    }
+  )));
+};
+
+export { SelectOptions };

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

@@ -0,0 +1,8 @@
+import React from 'react';
+import { Popover } from '../Popover/index.js';
+
+const SelectPopover = ({ children }) => {
+  return /* @__PURE__ */ React.createElement(Popover.Content, { className: "bg-white max-h-[30vh] w-full overflow-y-scroll gap-y-mili flex flex-col" }, children);
+};
+
+export { SelectPopover };

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

@@ -0,0 +1,22 @@
+import React from 'react';
+import Content from './Content.js';
+import { Popover } from '../Popover/index.js';
+
+const SelectRoot = ({
+  children,
+  value,
+  keyExtractor,
+  labelExtractor
+}) => {
+  return /* @__PURE__ */ React.createElement(Popover.Provider, null, /* @__PURE__ */ React.createElement(Popover.Root, { placement: "bottom", trigger: "click" }, /* @__PURE__ */ React.createElement(
+    Content,
+    {
+      keyExtractor,
+      labelExtractor,
+      value
+    },
+    children
+  )));
+};
+
+export { SelectRoot };

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

@@ -0,0 +1,26 @@
+import { selectVariants } from '@tecsinapse/cortex-core';
+import React, { useContext, useMemo } from 'react';
+import { IoChevronDownOutline } from 'react-icons/io5';
+import { SelectContext } from './context.js';
+import { Popover } from '../Popover/index.js';
+
+const { button } = selectVariants();
+const SelectTrigger = ({ label, disabled }) => {
+  const { value, labelExtractor } = useContext(SelectContext);
+  const placeholder = useMemo(
+    () => value ? labelExtractor(value) : label,
+    [label, value]
+  );
+  return /* @__PURE__ */ React.createElement(Popover.Trigger, null, /* @__PURE__ */ React.createElement(
+    "button",
+    {
+      className: button({ disabled }),
+      disabled,
+      role: "button"
+    },
+    /* @__PURE__ */ React.createElement("span", { "data-testid": "select-placeholder" }, placeholder),
+    /* @__PURE__ */ React.createElement(IoChevronDownOutline, null)
+  ));
+};
+
+export { SelectTrigger };

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

@@ -0,0 +1,8 @@
+import { createContext } from 'react';
+
+const SelectContext = createContext({
+  keyExtractor: () => "",
+  labelExtractor: () => ""
+});
+
+export { SelectContext };

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

@@ -0,0 +1,17 @@
+import { SelectGroupedOptions } from './GroupedOptions.js';
+import { SelectOption } from './Option.js';
+import { SelectOptions } from './Options.js';
+import { SelectPopover } from './Popover.js';
+import { SelectRoot } from './Root.js';
+import { SelectTrigger } from './Trigger.js';
+
+const Select = {
+  Root: SelectRoot,
+  Trigger: SelectTrigger,
+  Popover: SelectPopover,
+  Options: SelectOptions,
+  GroupedOptions: SelectGroupedOptions,
+  Option: SelectOption
+};
+
+export { Select };

package/dist/esm/components/Table.js

@@ -1,5 +1,5 @@
-import React from 'react';
 import { tHead, tRow, tHeadCell, hr, tCell, tFoot, tRoot } from '@tecsinapse/cortex-core';
+import React from 'react';
 
 const THead = ({
   children,
@@ -37,6 +37,6 @@ const Table = ({
 const Td = ({
   children,
   ...rest
-}) => /* @__PURE__ */ React.createElement("td", { ...rest, "data-testid": "td" }, children);
+}) => /* @__PURE__ */ React.createElement("td", { "data-testid": "td", ...rest }, children);
 
 export { TCell, TFoot, THead, THeadCell, TRow, TRowHeader, Table, Td };

package/dist/esm/components/TimeFieldInput.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Input } from './Input.js';
+import { Input } from './Input/index.js';
 import { labelStyle, inputBox } from '@tecsinapse/cortex-core';
 import TimeField from './TimeField.js';
 

package/dist/esm/components/Tooltip.js

@@ -0,0 +1,49 @@
+import React, { forwardRef, useRef } from 'react';
+import { FloatingArrow } from '@floating-ui/react';
+import '@internationalized/date';
+import 'react-aria';
+import 'react-stately';
+import { useFloatingLogic } from '../hooks/useFloatingLogic.js';
+
+const Tooltip = forwardRef(
+  (props, ref) => {
+    const {
+      children,
+      text,
+      trigger = "hover",
+      placement = "top",
+      width,
+      height
+    } = props;
+    const arrowRef = useRef(null);
+    const {
+      isOpen,
+      triggerProps,
+      x,
+      y,
+      strategy,
+      refs,
+      context,
+      floatingStyles
+    } = useFloatingLogic({ placement, arrowRef, trigger });
+    return /* @__PURE__ */ React.createElement(React.Fragment, null, React.cloneElement(children, triggerProps), isOpen ? /* @__PURE__ */ React.createElement(
+      "div",
+      {
+        ref: ref || refs.setFloating,
+        className: "bg-black text-white p-2 rounded z-50 shadow-md text-justify",
+        style: {
+          position: strategy,
+          top: y ?? 0,
+          left: x ?? 0,
+          width,
+          height,
+          ...floatingStyles
+        }
+      },
+      text,
+      /* @__PURE__ */ React.createElement(FloatingArrow, { ref: arrowRef, context, fill: "black" })
+    ) : /* @__PURE__ */ React.createElement(React.Fragment, null));
+  }
+);
+
+export { Tooltip, Tooltip as default };

package/dist/esm/components/utils.js

@@ -1,3 +1,5 @@
+import { CalendarDate, getLocalTimeZone } from '@internationalized/date';
+
 const getNameInitials = (name) => {
   const nameSplit = name.split(" ");
   const length = nameSplit.length;
@@ -6,5 +8,15 @@ const getNameInitials = (name) => {
   }
   return name[0];
 };
+const dateToCalendarDate = (value) => {
+  return new CalendarDate(
+    value?.getFullYear() ?? (/* @__PURE__ */ new Date()).getFullYear(),
+    value?.getMonth() ? value.getMonth() + 1 : (/* @__PURE__ */ new Date()).getMonth() + 1,
+    value?.getDate() ?? (/* @__PURE__ */ new Date()).getDate()
+  );
+};
+const calendarDateToDate = (value) => {
+  return value.toDate(getLocalTimeZone());
+};
 
-export { getNameInitials };
+export { calendarDateToDate, dateToCalendarDate, getNameInitials };

package/dist/esm/hooks/useCalendar.js

@@ -1,18 +1,15 @@
-import { createCalendar, CalendarDate, getLocalTimeZone } from '@internationalized/date';
+import { createCalendar } from '@internationalized/date';
 import { useLocale, useCalendar as useCalendar$1 } from 'react-aria';
 import { useCalendarState } from 'react-stately';
+import { dateToCalendarDate, calendarDateToDate } from '../components/utils.js';
 
 const useCalendar = ({ value, onChange }) => {
   const { locale } = useLocale();
   const state = useCalendarState({
     locale,
     createCalendar,
-    defaultValue: new CalendarDate(
-      value.getFullYear(),
-      value.getMonth(),
-      value.getDate()
-    ),
-    onChange: (value2) => onChange(value2.toDate(getLocalTimeZone()))
+    defaultValue: dateToCalendarDate(value),
+    onChange: (value2) => onChange(calendarDateToDate(value2))
   });
   const { calendarProps, title } = useCalendar$1({}, state);
   return {

package/dist/esm/hooks/useDatePickerInput.js

@@ -0,0 +1,29 @@
+import { useRef } from 'react';
+import { useDatePicker } from 'react-aria';
+import { useDatePickerState } from 'react-stately';
+import { dateToCalendarDate, calendarDateToDate } from '../components/utils.js';
+
+const useDatePickerInput = ({
+  value,
+  onChange
+}) => {
+  const state = useDatePickerState({
+    defaultValue: dateToCalendarDate(value),
+    onChange: (value2) => {
+      onChange(calendarDateToDate(value2));
+    }
+  });
+  const ref = useRef(null);
+  const { fieldProps } = useDatePicker(
+    { "aria-label": "date-picker-field" },
+    state,
+    ref
+  );
+  return {
+    fieldProps,
+    state,
+    ref
+  };
+};
+
+export { useDatePickerInput };

package/dist/esm/hooks/useDateRangePickerInput.js

@@ -0,0 +1,31 @@
+import { useRef } from 'react';
+import { useDateRangePicker } from 'react-aria';
+import { useDateRangePickerState } from 'react-stately';
+import { dateToCalendarDate, calendarDateToDate } from '../components/utils.js';
+
+const useDateRangePickerInput = ({
+  value,
+  onChange
+}) => {
+  const state = useDateRangePickerState({
+    defaultValue: {
+      start: dateToCalendarDate(value?.start),
+      end: dateToCalendarDate(value?.end)
+    },
+    onChange: (value2) => {
+      onChange({
+        start: calendarDateToDate(value2.start),
+        end: calendarDateToDate(value2.end)
+      });
+    }
+  });
+  const ref = useRef(null);
+  const { startFieldProps, endFieldProps } = useDateRangePicker(
+    { "aria-label": "date-range-picker-field" },
+    state,
+    ref
+  );
+  return { startFieldProps, endFieldProps, state, ref };
+};
+
+export { useDateRangePickerInput };

package/dist/esm/hooks/useFloatingLogic.js

@@ -0,0 +1,51 @@
+import { useState, useEffect } from 'react';
+import { useFloating, autoUpdate, offset, flip, shift, arrow } from '@floating-ui/react';
+
+const useFloatingLogic = ({
+  placement,
+  trigger,
+  arrowRef
+}) => {
+  const [isOpen, setIsOpen] = useState(false);
+  const { x, y, strategy, refs, update, context, floatingStyles } = useFloating(
+    {
+      placement,
+      whileElementsMounted: autoUpdate,
+      middleware: [
+        offset(10),
+        flip({
+          flipAlignment: true,
+          fallbackPlacements: ["right", "bottom", "left", "top"]
+        }),
+        shift(),
+        ...arrowRef ? [arrow({ element: arrowRef })] : []
+      ]
+    }
+  );
+  useEffect(() => {
+    if (isOpen) update();
+  }, [isOpen, update]);
+  const triggerProps = {
+    ref: refs.setReference,
+    ...trigger === "hover" && {
+      onMouseEnter: () => setIsOpen(true),
+      onMouseLeave: () => setIsOpen(false)
+    },
+    ...trigger === "click" && {
+      onClick: () => setIsOpen((prev) => !prev)
+    }
+  };
+  return {
+    isOpen,
+    setIsOpen,
+    x,
+    y,
+    strategy,
+    refs,
+    context,
+    floatingStyles,
+    triggerProps
+  };
+};
+
+export { useFloatingLogic };

package/dist/esm/hooks/useOutsideClickListener.js

@@ -0,0 +1,20 @@
+import { useCallback, useEffect } from 'react';
+
+const useOutsideClickListener = ({
+  ref,
+  onClickOutside
+}) => {
+  const handleClickOutside = useCallback((event) => {
+    if (ref.current && !ref.current.contains(event.target)) {
+      onClickOutside?.();
+    }
+  }, []);
+  useEffect(() => {
+    document.addEventListener("click", handleClickOutside, true);
+    return () => {
+      document.removeEventListener("click", handleClickOutside, true);
+    };
+  }, [handleClickOutside]);
+};
+
+export { useOutsideClickListener };

package/dist/esm/hooks/useRangeCalendar.js

@@ -0,0 +1,34 @@
+import { createCalendar } from '@internationalized/date';
+import { useRef } from 'react';
+import { useLocale, useRangeCalendar as useRangeCalendar$1 } from 'react-aria';
+import { useRangeCalendarState } from 'react-stately';
+import { dateToCalendarDate, calendarDateToDate } from '../components/utils.js';
+
+const useRangeCalendar = ({
+  value,
+  onChange
+}) => {
+  const { locale } = useLocale();
+  const state = useRangeCalendarState({
+    locale,
+    createCalendar,
+    defaultValue: {
+      start: dateToCalendarDate(value?.start),
+      end: dateToCalendarDate(value?.end)
+    },
+    onChange: (value2) => onChange({
+      start: calendarDateToDate(value2.start),
+      end: calendarDateToDate(value2.end)
+    })
+  });
+  const ref = useRef(null);
+  const { calendarProps, title } = useRangeCalendar$1({}, state, ref);
+  return {
+    calendarProps,
+    title,
+    state,
+    ref
+  };
+};
+
+export { useRangeCalendar };