@tecsinapse/cortex-react 1.3.0-beta.1 → 1.3.0-beta.3

package/dist/cjs/components/Calendar.js

@@ -5,6 +5,7 @@ var useCalendar = require('../hooks/useCalendar.js');
 require('@internationalized/date');
 require('react-aria');
 require('react-stately');
+require('@floating-ui/react');
 var CalendarGrid = require('./CalendarGrid.js');
 var CalendarHeader = require('./CalendarHeader.js');
 

package/dist/cjs/components/CalendarCell.js

@@ -5,6 +5,7 @@ require('@internationalized/date');
 require('react-aria');
 require('react-stately');
 var useCalendarCell = require('../hooks/useCalendarCell.js');
+require('@floating-ui/react');
 var calendarCell = require('../styles/calendar-cell.js');
 require('../styles/groupButton.js');
 require('../styles/progressBar.js');

package/dist/cjs/components/CalendarGrid.js

@@ -5,6 +5,7 @@ require('@internationalized/date');
 require('react-aria');
 require('react-stately');
 var useCalendarGrid = require('../hooks/useCalendarGrid.js');
+require('@floating-ui/react');
 var CalendarGridBodyRows = require('./CalendarGridBodyRows.js');
 var CalendarGridHeaderRow = require('./CalendarGridHeaderRow.js');
 

package/dist/cjs/components/DatePickerInput.js

@@ -6,6 +6,7 @@ require('react-aria');
 require('react-stately');
 var utils = require('./utils.js');
 var useDatePickerInput = require('../hooks/useDatePickerInput.js');
+require('@floating-ui/react');
 var Calendar = require('./Calendar.js');
 var DateField = require('./DateField.js');
 var DatePickerInputBase = require('./DatePickerInputBase.js');

package/dist/cjs/components/DatePickerInputBase.js

@@ -3,7 +3,7 @@
 var cortexCore = require('@tecsinapse/cortex-core');
 var React = require('react');
 var lia = require('react-icons/lia');
-var Input = require('./Input.js');
+var index = require('./Input/index.js');
 
 const DatePickerInputBase = ({
   children,
@@ -11,7 +11,7 @@ const DatePickerInputBase = ({
   label,
   onClickCalendar
 }) => {
-  return /* @__PURE__ */ React.createElement(Input.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) }, children), /* @__PURE__ */ React.createElement(Input.Input.Right, { className: "" }, /* @__PURE__ */ React.createElement(
+  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) }, children), /* @__PURE__ */ React.createElement(index.Input.Right, { className: "" }, /* @__PURE__ */ React.createElement(
     lia.LiaCalendar,
     {
       className: "cursor-pointer mt-centi",

package/dist/cjs/components/DateRangePickerInput.js

@@ -6,6 +6,7 @@ require('react-aria');
 require('react-stately');
 var utils = require('./utils.js');
 var useDateRangePickerInput = require('../hooks/useDateRangePickerInput.js');
+require('@floating-ui/react');
 var DateField = require('./DateField.js');
 var DatePickerInputBase = require('./DatePickerInputBase.js');
 var RangeCalendar = require('./RangeCalendar.js');

package/dist/cjs/components/Input/Box.js

@@ -0,0 +1,32 @@
+'use strict';
+
+var cortexCore = require('@tecsinapse/cortex-core');
+var clsx = require('clsx');
+var React = require('react');
+
+const InputBox = React.forwardRef(
+  ({ id, name, variants, label, placeholder, className, ...rest }, ref) => {
+    return /* @__PURE__ */ React.createElement("div", { className: "flex w-full flex-col" }, /* @__PURE__ */ React.createElement(
+      "input",
+      {
+        id: id ?? name,
+        name,
+        placeholder: placeholder ?? " ",
+        className: clsx(cortexCore.inputBox(placeholder, label, className)),
+        ...rest,
+        ref,
+        "data-testid": "input-box"
+      }
+    ), /* @__PURE__ */ React.createElement(
+      "label",
+      {
+        htmlFor: id ?? name,
+        className: cortexCore.labelStyle({ intent: variants?.intent, placeholder }),
+        "data-testid": "input-label"
+      },
+      label
+    ));
+  }
+);
+
+exports.InputBox = InputBox;

package/dist/cjs/components/Input/Face.js

@@ -0,0 +1,30 @@
+'use strict';
+
+var cortexCore = require('@tecsinapse/cortex-core');
+var clsx = require('clsx');
+var React = require('react');
+
+const getValidChildren = (children) => {
+  return React.Children.toArray(children).filter(
+    (el) => React.isValidElement(el)
+  );
+};
+const InputFace = React.forwardRef(
+  ({ children, variants, className, ...rest }, ref) => {
+    const clones = getValidChildren(children).map((el) => {
+      return React.cloneElement(el, { ...el.props, variants });
+    });
+    return /* @__PURE__ */ React.createElement(
+      "div",
+      {
+        "data-testid": "input-face",
+        ...rest,
+        className: clsx(cortexCore.input(variants), className),
+        ref
+      },
+      clones
+    );
+  }
+);
+
+exports.InputFace = InputFace;

package/dist/cjs/components/Input/Left.js

@@ -0,0 +1,12 @@
+'use strict';
+
+var clsx = require('clsx');
+var React = require('react');
+
+const InputLeft = React.forwardRef(
+  ({ children, className, ...rest }, ref) => {
+    return /* @__PURE__ */ React.createElement("div", { className: clsx(className, "mr-2.5"), ...rest, ref }, children);
+  }
+);
+
+exports.InputLeft = InputLeft;

package/dist/cjs/components/Input/Right.js

@@ -0,0 +1,12 @@
+'use strict';
+
+var clsx = require('clsx');
+var React = require('react');
+
+const InputRight = React.forwardRef(
+  ({ children, className, ...rest }, ref) => {
+    return /* @__PURE__ */ React.createElement("div", { className: clsx(className, "ml-2.5"), ...rest, ref }, children);
+  }
+);
+
+exports.InputRight = InputRight;

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

@@ -0,0 +1,13 @@
+'use strict';
+
+var React = require('react');
+var Box = require('./Box.js');
+var Face = require('./Face.js');
+
+const InputRoot = React.forwardRef(
+  ({ variants, className, ...rest }, ref) => {
+    return /* @__PURE__ */ React.createElement(Face.InputFace, { variants, className }, /* @__PURE__ */ React.createElement(Box.InputBox, { ...rest, ref }));
+  }
+);
+
+exports.InputRoot = InputRoot;

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

@@ -0,0 +1,25 @@
+'use strict';
+
+var React = require('react');
+var io5 = require('react-icons/io5');
+var index = require('./index.js');
+require('@internationalized/date');
+require('react-aria');
+require('react-stately');
+var useDebouncedState = require('../../hooks/useDebouncedState.js');
+require('@floating-ui/react');
+
+const InputSearch = React.forwardRef(
+  ({ bounceTimeout = 1e3, variants, className, onChange, ...rest }, ref) => {
+    const [bouncedTextEvent, setBouncedTextEvent] = React.useState();
+    const [searchInputEvent, setSearchInputEvent] = useDebouncedState.useDebouncedState(void 0, setBouncedTextEvent, bounceTimeout);
+    React.useEffect(() => {
+      if (onChange && searchInputEvent) {
+        onChange(searchInputEvent);
+      }
+    }, [bouncedTextEvent]);
+    return /* @__PURE__ */ React.createElement(index.Input.Face, { variants, className }, /* @__PURE__ */ React.createElement(index.Input.Left, null, /* @__PURE__ */ React.createElement(io5.IoSearchOutline, { "data-testid": "icon-search-left" })), /* @__PURE__ */ React.createElement(index.Input.Box, { ...rest, ref, onChange: (e) => setSearchInputEvent(e) }));
+  }
+);
+
+exports.InputSearch = InputSearch;

package/dist/cjs/components/Input/index.js

@@ -0,0 +1,19 @@
+'use strict';
+
+var Box = require('./Box.js');
+var Face = require('./Face.js');
+var Left = require('./Left.js');
+var Right = require('./Right.js');
+var Root = require('./Root.js');
+var Search = require('./Search.js');
+
+const Input = {
+  Root: Root.InputRoot,
+  Face: Face.InputFace,
+  Box: Box.InputBox,
+  Left: Left.InputLeft,
+  Right: Right.InputRight,
+  Search: Search.InputSearch
+};
+
+exports.Input = Input;

package/dist/cjs/components/Popover/Popover.js

@@ -0,0 +1,13 @@
+'use strict';
+
+var PopoverRoot = require('./PopoverRoot.js');
+var PopoverTrigger = require('./PopoverTrigger.js');
+var PopoverContent = require('./PopoverContent.js');
+
+const Popover = {
+  Root: PopoverRoot,
+  Trigger: PopoverTrigger,
+  Content: PopoverContent
+};
+
+exports.Popover = Popover;

package/dist/cjs/components/Popover/PopoverContent.js

@@ -0,0 +1,28 @@
+'use strict';
+
+var React = require('react');
+var clsx = require('clsx');
+var PopoverContext = require('./PopoverContext.js');
+
+const PopoverContent = ({ children, className }) => {
+  const { isOpen, x, y, strategy, floatingStyles, refs } = PopoverContext.usePopoverContext();
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, isOpen ? /* @__PURE__ */ React.createElement(
+    "div",
+    {
+      ref: refs.setFloating,
+      className: clsx(
+        "border border-gray-200 bg-black text-white 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));
+};
+
+module.exports = PopoverContent;

package/dist/cjs/components/Popover/PopoverContext.js

@@ -0,0 +1,29 @@
+'use strict';
+
+var React = require('react');
+require('@internationalized/date');
+require('react-aria');
+require('react-stately');
+var useFloatingLogic = require('../../hooks/useFloatingLogic.js');
+
+const PopoverContext = React.createContext(
+  void 0
+);
+const usePopoverContext = () => {
+  const context = React.useContext(PopoverContext);
+  if (!context) {
+    throw new Error("usePopoverContext must be used within a PopoverProvider");
+  }
+  return context;
+};
+const PopoverProvider = ({
+  children,
+  placement,
+  trigger
+}) => {
+  const floatingLogic = useFloatingLogic.useFloatingLogic({ placement, trigger });
+  return /* @__PURE__ */ React.createElement(PopoverContext.Provider, { value: { ...floatingLogic } }, children);
+};
+
+exports.PopoverProvider = PopoverProvider;
+exports.usePopoverContext = usePopoverContext;

package/dist/cjs/components/Popover/PopoverRoot.js

@@ -0,0 +1,10 @@
+'use strict';
+
+var React = require('react');
+var PopoverContext = require('./PopoverContext.js');
+
+const PopoverRoot = ({ children, placement, trigger }) => {
+  return /* @__PURE__ */ React.createElement(PopoverContext.PopoverProvider, { placement, trigger }, children);
+};
+
+module.exports = PopoverRoot;

package/dist/cjs/components/Popover/PopoverTrigger.js

@@ -0,0 +1,11 @@
+'use strict';
+
+var React = require('react');
+var PopoverContext = require('./PopoverContext.js');
+
+const PopoverTrigger = ({ children }) => {
+  const { triggerProps } = PopoverContext.usePopoverContext();
+  return React.cloneElement(children, triggerProps);
+};
+
+module.exports = PopoverTrigger;

package/dist/cjs/components/RangeCalendar.js

@@ -5,6 +5,7 @@ require('@internationalized/date');
 require('react-aria');
 require('react-stately');
 var useRangeCalendar = require('../hooks/useRangeCalendar.js');
+require('@floating-ui/react');
 var CalendarGrid = require('./CalendarGrid.js');
 var CalendarHeader = require('./CalendarHeader.js');
 

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

@@ -0,0 +1,32 @@
+'use strict';
+
+var cortexCore = require('@tecsinapse/cortex-core');
+var React = require('react');
+var index = require('./index.js');
+var context = require('./context.js');
+
+const { groupedTitle, containerGrouped } = cortexCore.selectVariants();
+const SelectGroupedOptions = ({
+  onSelect,
+  groupedLabelExtractor,
+  options
+}) => {
+  const { setOpen, keyExtractor } = React.useContext(context.SelectContext);
+  const handleSelect = React.useCallback(
+    (option) => {
+      onSelect(option);
+      setOpen?.(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(
+    index.Select.Option,
+    {
+      option,
+      key: keyExtractor(option),
+      onSelectOption: handleSelect
+    }
+  )))));
+};
+
+exports.SelectGroupedOptions = SelectGroupedOptions;

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

@@ -0,0 +1,25 @@
+'use strict';
+
+var cortexCore = require('@tecsinapse/cortex-core');
+var React = require('react');
+var context = require('./context.js');
+
+const SelectOption = ({
+  onSelectOption,
+  option
+}) => {
+  const { keyExtractor, labelExtractor, value } = React.useContext(context.SelectContext);
+  return /* @__PURE__ */ React.createElement(
+    "li",
+    {
+      onClick: () => onSelectOption(option),
+      className: cortexCore.option({
+        selected: value && keyExtractor(value) === keyExtractor(option)
+      }),
+      role: "option"
+    },
+    labelExtractor(option)
+  );
+};
+
+exports.SelectOption = SelectOption;

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

@@ -0,0 +1,29 @@
+'use strict';
+
+var React = require('react');
+var index = require('./index.js');
+var context = require('./context.js');
+
+const SelectOptions = ({
+  onSelect,
+  options
+}) => {
+  const { setOpen, keyExtractor } = React.useContext(context.SelectContext);
+  const handleSelect = React.useCallback(
+    (option) => {
+      onSelect(option);
+      setOpen?.(false);
+    },
+    [onSelect]
+  );
+  return /* @__PURE__ */ React.createElement("ul", { role: "select" }, (options ?? []).map((option) => /* @__PURE__ */ React.createElement(
+    index.Select.Option,
+    {
+      option,
+      key: keyExtractor(option),
+      onSelectOption: handleSelect
+    }
+  )));
+};
+
+exports.SelectOptions = SelectOptions;

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

@@ -0,0 +1,13 @@
+'use strict';
+
+var cortexCore = require('@tecsinapse/cortex-core');
+var React = require('react');
+var context = require('./context.js');
+
+const { dropdown } = cortexCore.selectVariants();
+const SelectPopover = ({ children }) => {
+  const { open } = React.useContext(context.SelectContext);
+  return /* @__PURE__ */ React.createElement("div", { className: dropdown({ open }), "data-testid": "select-popover" }, children);
+};
+
+exports.SelectPopover = SelectPopover;

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

@@ -0,0 +1,32 @@
+'use strict';
+
+var React = require('react');
+require('@internationalized/date');
+require('react-aria');
+require('react-stately');
+var useOutsideClickListener = require('../../hooks/useOutsideClickListener.js');
+require('@floating-ui/react');
+var context = require('./context.js');
+
+const SelectRoot = ({
+  children,
+  value,
+  keyExtractor,
+  labelExtractor
+}) => {
+  const [open, setOpen] = React.useState(false);
+  const ref = React.useRef(null);
+  useOutsideClickListener.useOutsideClickListener({
+    ref,
+    onClickOutside: () => setOpen?.(false)
+  });
+  return /* @__PURE__ */ React.createElement(
+    context.SelectContext.Provider,
+    {
+      value: { value, open, setOpen, keyExtractor, labelExtractor }
+    },
+    /* @__PURE__ */ React.createElement("div", { className: "w-full relative bg-white", ref }, children)
+  );
+};
+
+exports.SelectRoot = SelectRoot;

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

@@ -0,0 +1,28 @@
+'use strict';
+
+var cortexCore = require('@tecsinapse/cortex-core');
+var React = require('react');
+var io5 = require('react-icons/io5');
+var context = require('./context.js');
+
+const { button } = cortexCore.selectVariants();
+const SelectTrigger = ({ label, disabled }) => {
+  const { value, setOpen, labelExtractor, open } = React.useContext(context.SelectContext);
+  const placeholder = React.useMemo(
+    () => value ? labelExtractor(value) : label,
+    [label, value]
+  );
+  return /* @__PURE__ */ React.createElement(
+    "button",
+    {
+      className: button({ disabled }),
+      onClick: () => setOpen?.(!open),
+      disabled,
+      role: "button"
+    },
+    /* @__PURE__ */ React.createElement("span", { "data-testid": "select-placeholder" }, placeholder),
+    /* @__PURE__ */ React.createElement(io5.IoChevronDownOutline, null)
+  );
+};
+
+exports.SelectTrigger = SelectTrigger;

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

@@ -0,0 +1,10 @@
+'use strict';
+
+var React = require('react');
+
+const SelectContext = React.createContext({
+  keyExtractor: () => "",
+  labelExtractor: () => ""
+});
+
+exports.SelectContext = SelectContext;

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

@@ -0,0 +1,19 @@
+'use strict';
+
+var GroupedOptions = require('./GroupedOptions.js');
+var Option = require('./Option.js');
+var Options = require('./Options.js');
+var Popover = require('./Popover.js');
+var Root = require('./Root.js');
+var Trigger = require('./Trigger.js');
+
+const Select = {
+  Root: Root.SelectRoot,
+  Trigger: Trigger.SelectTrigger,
+  Popover: Popover.SelectPopover,
+  Options: Options.SelectOptions,
+  GroupedOptions: GroupedOptions.SelectGroupedOptions,
+  Option: Option.SelectOption
+};
+
+exports.Select = Select;

package/dist/cjs/components/TimeFieldInput.js

@@ -1,14 +1,14 @@
 'use strict';
 
 var React = require('react');
-var Input = require('./Input.js');
+var index = require('./Input/index.js');
 var cortexCore = require('@tecsinapse/cortex-core');
 var TimeField = require('./TimeField.js');
 
 const TimeFieldInput = (props) => {
   const { onChange, value, label, variants } = props;
   return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(
-    Input.Input.Face,
+    index.Input.Face,
     {
       variants,
       className: "flex flex-row",

package/dist/cjs/components/Tooltip.js

@@ -0,0 +1,47 @@
+'use strict';
+
+var React = require('react');
+var react = require('@floating-ui/react');
+require('@internationalized/date');
+require('react-aria');
+require('react-stately');
+var useFloatingLogic = require('../hooks/useFloatingLogic.js');
+
+React.forwardRef((props, ref) => {
+  const {
+    children,
+    text,
+    trigger = "hover",
+    placement = "top",
+    width,
+    height
+  } = props;
+  const arrowRef = React.useRef(null);
+  const {
+    isOpen,
+    triggerProps,
+    x,
+    y,
+    strategy,
+    refs,
+    context,
+    floatingStyles
+  } = useFloatingLogic.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(react.FloatingArrow, { ref: arrowRef, context, fill: "black" })
+  ) : /* @__PURE__ */ React.createElement(React.Fragment, null));
+});

package/dist/cjs/hooks/useFloatingLogic.js

@@ -0,0 +1,53 @@
+'use strict';
+
+var React = require('react');
+var react = require('@floating-ui/react');
+
+const useFloatingLogic = ({
+  placement,
+  trigger,
+  arrowRef
+}) => {
+  const [isOpen, setIsOpen] = React.useState(false);
+  const { x, y, strategy, refs, update, context, floatingStyles } = react.useFloating(
+    {
+      placement,
+      whileElementsMounted: react.autoUpdate,
+      middleware: [
+        react.offset(10),
+        react.flip({
+          flipAlignment: true,
+          fallbackPlacements: ["right", "bottom", "left", "top"]
+        }),
+        react.shift(),
+        ...arrowRef ? [react.arrow({ element: arrowRef })] : []
+      ]
+    }
+  );
+  React.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
+  };
+};
+
+exports.useFloatingLogic = useFloatingLogic;

package/dist/cjs/hooks/useOutsideClickListener.js

@@ -0,0 +1,22 @@
+'use strict';
+
+var React = require('react');
+
+const useOutsideClickListener = ({
+  ref,
+  onClickOutside
+}) => {
+  const handleClickOutside = React.useCallback((event) => {
+    if (ref.current && !ref.current.contains(event.target)) {
+      onClickOutside?.();
+    }
+  }, []);
+  React.useEffect(() => {
+    document.addEventListener("click", handleClickOutside, true);
+    return () => {
+      document.removeEventListener("click", handleClickOutside, true);
+    };
+  }, [handleClickOutside]);
+};
+
+exports.useOutsideClickListener = useOutsideClickListener;