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

package/dist/cjs/index.js

@@ -13,24 +13,28 @@ var DefaultSnack = require('./components/DefaultSnack.js');
 var Drawer = require('./components/Drawer.js');
 var GroupButton = require('./components/GroupButton.js');
 var Hint = require('./components/Hint.js');
-var Input = require('./components/Input.js');
+var index = require('./components/Input/index.js');
 var Modal = require('./components/Modal.js');
 var ProgressBar = require('./components/ProgressBar.js');
 var RangeCalendar = require('./components/RangeCalendar.js');
-var Select = require('./components/Select.js');
+var index$1 = require('./components/Select/index.js');
 var Skeleton = require('./components/Skeleton.js');
 var Table = require('./components/Table.js');
 var Tag = require('./components/Tag.js');
 var TextArea = require('./components/TextArea.js');
 var TimeFieldInput = require('./components/TimeFieldInput.js');
 var Toggle = require('./components/Toggle.js');
+require('./components/Tooltip.js');
+var Popover = require('./components/Popover/Popover.js');
 var useCalendar = require('./hooks/useCalendar.js');
 var useCalendarCell = require('./hooks/useCalendarCell.js');
 var useCalendarGrid = require('./hooks/useCalendarGrid.js');
 var useDatePickerInput = require('./hooks/useDatePickerInput.js');
 var useDateRangePickerInput = require('./hooks/useDateRangePickerInput.js');
 var useDebouncedState = require('./hooks/useDebouncedState.js');
+var useOutsideClickListener = require('./hooks/useOutsideClickListener.js');
 var useRangeCalendar = require('./hooks/useRangeCalendar.js');
+var useFloatingLogic = require('./hooks/useFloatingLogic.js');
 var SnackbarSonner = require('./service/SnackbarSonner.js');
 
 
@@ -49,16 +53,11 @@ exports.DefaultSnack = DefaultSnack.DefaultSnack;
 exports.Drawer = Drawer.Drawer;
 exports.GroupButton = GroupButton.GroupButton;
 exports.Hint = Hint.Hint;
-exports.Box = Input.Box;
-exports.Face = Input.Face;
-exports.Input = Input.Input;
-exports.Left = Input.Left;
-exports.Right = Input.Right;
-exports.Root = Input.Root;
+exports.Input = index.Input;
 exports.Modal = Modal.Modal;
 exports.ProgressBar = ProgressBar.ProgressBar;
 exports.RangeCalendar = RangeCalendar.RangeCalendar;
-exports.Select = Select.Select;
+exports.Select = index$1.Select;
 exports.Skeleton = Skeleton.Skeleton;
 exports.TCell = Table.TCell;
 exports.TFoot = Table.TFoot;
@@ -72,11 +71,14 @@ exports.Tag = Tag.Tag;
 exports.TextArea = TextArea.TextArea;
 exports.TimeFieldInput = TimeFieldInput.TimeFieldInput;
 exports.Toggle = Toggle.Toggle;
+exports.Popover = Popover.Popover;
 exports.useCalendar = useCalendar.useCalendar;
 exports.useCalendarCell = useCalendarCell.useCalendarCell;
 exports.useCalendarGrid = useCalendarGrid.useCalendarGrid;
 exports.useDatePickerInput = useDatePickerInput.useDatePickerInput;
 exports.useDateRangePickerInput = useDateRangePickerInput.useDateRangePickerInput;
 exports.useDebouncedState = useDebouncedState.useDebouncedState;
+exports.useOutsideClickListener = useOutsideClickListener.useOutsideClickListener;
 exports.useRangeCalendar = useRangeCalendar.useRangeCalendar;
+exports.useFloatingLogic = useFloatingLogic.useFloatingLogic;
 exports.SnackbarSonner = SnackbarSonner.SnackbarSonner;

package/dist/cjs/service/SnackbarSonner.js

@@ -11,11 +11,17 @@ require('../components/Card.js');
 require('../components/Button.js');
 require('react-aria');
 require('react-stately');
+require('@floating-ui/react');
 require('../components/CalendarCell.js');
 require('@tecsinapse/cortex-core');
 require('react-icons/fa');
 require('react-icons/lia');
-require('../components/Input.js');
+require('../components/Input/Box.js');
+require('../components/Input/Face.js');
+require('../components/Input/Left.js');
+require('../components/Input/Right.js');
+require('../components/Input/Root.js');
+require('../components/Input/Search.js');
 var DefaultSnack = require('../components/DefaultSnack.js');
 require('../components/GroupButton.js');
 require('../components/Hint.js');
@@ -23,10 +29,15 @@ require('../components/Modal.js');
 require('../styles/calendar-cell.js');
 require('../styles/groupButton.js');
 require('../styles/progressBar.js');
-require('../components/Select.js');
+require('../components/Select/GroupedOptions.js');
+require('../components/Select/context.js');
+require('../components/Select/Popover.js');
+require('../components/Select/Trigger.js');
 require('../components/Tag.js');
 require('../components/TextArea.js');
 require('../components/Toggle.js');
+require('../components/Tooltip.js');
+require('../components/Popover/PopoverContext.js');
 
 class SnackbarSonner {
   custom(Component, options) {

package/dist/esm/components/Calendar.js

@@ -3,6 +3,7 @@ import { useCalendar } from '../hooks/useCalendar.js';
 import '@internationalized/date';
 import 'react-aria';
 import 'react-stately';
+import '@floating-ui/react';
 import { CalendarGrid } from './CalendarGrid.js';
 import { CalendarHeader } from './CalendarHeader.js';
 

package/dist/esm/components/CalendarCell.js

@@ -3,6 +3,7 @@ import '@internationalized/date';
 import 'react-aria';
 import 'react-stately';
 import { useCalendarCell } from '../hooks/useCalendarCell.js';
+import '@floating-ui/react';
 import { calendarCell } from '../styles/calendar-cell.js';
 import '../styles/groupButton.js';
 import '../styles/progressBar.js';

package/dist/esm/components/CalendarGrid.js

@@ -3,6 +3,7 @@ import '@internationalized/date';
 import 'react-aria';
 import 'react-stately';
 import { useCalendarGrid } from '../hooks/useCalendarGrid.js';
+import '@floating-ui/react';
 import { CalendarGridBodyRows } from './CalendarGridBodyRows.js';
 import { CalendarGridHeaderRow } from './CalendarGridHeaderRow.js';
 

package/dist/esm/components/DatePickerInput.js

@@ -4,6 +4,7 @@ import 'react-aria';
 import 'react-stately';
 import { dateToCalendarDate } from './utils.js';
 import { useDatePickerInput } from '../hooks/useDatePickerInput.js';
+import '@floating-ui/react';
 import { Calendar } from './Calendar.js';
 import { DateField } from './DateField.js';
 import { DatePickerInputBase } from './DatePickerInputBase.js';

package/dist/esm/components/DatePickerInputBase.js

@@ -1,7 +1,7 @@
 import { labelStyle, inputBox } from '@tecsinapse/cortex-core';
 import React from 'react';
 import { LiaCalendar } from 'react-icons/lia';
-import { Input } from './Input.js';
+import { Input } from './Input/index.js';
 
 const DatePickerInputBase = ({
   children,

package/dist/esm/components/DateRangePickerInput.js

@@ -4,6 +4,7 @@ import 'react-aria';
 import 'react-stately';
 import { dateToCalendarDate } from './utils.js';
 import { useDateRangePickerInput } from '../hooks/useDateRangePickerInput.js';
+import '@floating-ui/react';
 import { DateField } from './DateField.js';
 import { DatePickerInputBase } from './DatePickerInputBase.js';
 import { RangeCalendar } from './RangeCalendar.js';

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

@@ -0,0 +1,30 @@
+import { inputBox, labelStyle } from '@tecsinapse/cortex-core';
+import clsx from 'clsx';
+import React from '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(inputBox(placeholder, label, className)),
+        ...rest,
+        ref,
+        "data-testid": "input-box"
+      }
+    ), /* @__PURE__ */ React.createElement(
+      "label",
+      {
+        htmlFor: id ?? name,
+        className: labelStyle({ intent: variants?.intent, placeholder }),
+        "data-testid": "input-label"
+      },
+      label
+    ));
+  }
+);
+
+export { InputBox };

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

@@ -0,0 +1,28 @@
+import { input } from '@tecsinapse/cortex-core';
+import clsx from 'clsx';
+import React from '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(input(variants), className),
+        ref
+      },
+      clones
+    );
+  }
+);
+
+export { InputFace };

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

@@ -0,0 +1,10 @@
+import clsx from 'clsx';
+import React from 'react';
+
+const InputLeft = React.forwardRef(
+  ({ children, className, ...rest }, ref) => {
+    return /* @__PURE__ */ React.createElement("div", { className: clsx(className, "mr-2.5"), ...rest, ref }, children);
+  }
+);
+
+export { InputLeft };

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

@@ -0,0 +1,10 @@
+import clsx from 'clsx';
+import React from 'react';
+
+const InputRight = React.forwardRef(
+  ({ children, className, ...rest }, ref) => {
+    return /* @__PURE__ */ React.createElement("div", { className: clsx(className, "ml-2.5"), ...rest, ref }, children);
+  }
+);
+
+export { InputRight };

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

@@ -0,0 +1,11 @@
+import React from 'react';
+import { InputBox } from './Box.js';
+import { InputFace } from './Face.js';
+
+const InputRoot = React.forwardRef(
+  ({ variants, className, ...rest }, ref) => {
+    return /* @__PURE__ */ React.createElement(InputFace, { variants, className }, /* @__PURE__ */ React.createElement(InputBox, { ...rest, ref }));
+  }
+);
+
+export { InputRoot };

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

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

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

@@ -0,0 +1,17 @@
+import { InputBox } from './Box.js';
+import { InputFace } from './Face.js';
+import { InputLeft } from './Left.js';
+import { InputRight } from './Right.js';
+import { InputRoot } from './Root.js';
+import { InputSearch } from './Search.js';
+
+const Input = {
+  Root: InputRoot,
+  Face: InputFace,
+  Box: InputBox,
+  Left: InputLeft,
+  Right: InputRight,
+  Search: InputSearch
+};
+
+export { Input };

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

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

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

@@ -0,0 +1,26 @@
+import React from 'react';
+import clsx from 'clsx';
+import { usePopoverContext } from './PopoverContext.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 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));
+};
+
+export { PopoverContent as default };

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

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

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

@@ -0,0 +1,8 @@
+import React from 'react';
+import { PopoverProvider } from './PopoverContext.js';
+
+const PopoverRoot = ({ children, placement, trigger }) => {
+  return /* @__PURE__ */ React.createElement(PopoverProvider, { placement, trigger }, children);
+};
+
+export { PopoverRoot as default };

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

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

package/dist/esm/components/RangeCalendar.js

@@ -3,6 +3,7 @@ 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';
 

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

@@ -0,0 +1,30 @@
+import { selectVariants } from '@tecsinapse/cortex-core';
+import React, { useContext, useCallback } from 'react';
+import { Select } from './index.js';
+import { SelectContext } from './context.js';
+
+const { groupedTitle, containerGrouped } = selectVariants();
+const SelectGroupedOptions = ({
+  onSelect,
+  groupedLabelExtractor,
+  options
+}) => {
+  const { setOpen, keyExtractor } = useContext(SelectContext);
+  const handleSelect = 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(
+    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,27 @@
+import React, { useContext, useCallback } from 'react';
+import { Select } from './index.js';
+import { SelectContext } from './context.js';
+
+const SelectOptions = ({
+  onSelect,
+  options
+}) => {
+  const { setOpen, keyExtractor } = useContext(SelectContext);
+  const handleSelect = useCallback(
+    (option) => {
+      onSelect(option);
+      setOpen?.(false);
+    },
+    [onSelect]
+  );
+  return /* @__PURE__ */ React.createElement("ul", { role: "select" }, (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,11 @@
+import { selectVariants } from '@tecsinapse/cortex-core';
+import React, { useContext } from 'react';
+import { SelectContext } from './context.js';
+
+const { dropdown } = selectVariants();
+const SelectPopover = ({ children }) => {
+  const { open } = useContext(SelectContext);
+  return /* @__PURE__ */ React.createElement("div", { className: dropdown({ open }), "data-testid": "select-popover" }, children);
+};
+
+export { SelectPopover };

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

@@ -0,0 +1,30 @@
+import React, { useState, useRef } from 'react';
+import '@internationalized/date';
+import 'react-aria';
+import 'react-stately';
+import { useOutsideClickListener } from '../../hooks/useOutsideClickListener.js';
+import '@floating-ui/react';
+import { SelectContext } from './context.js';
+
+const SelectRoot = ({
+  children,
+  value,
+  keyExtractor,
+  labelExtractor
+}) => {
+  const [open, setOpen] = useState(false);
+  const ref = useRef(null);
+  useOutsideClickListener({
+    ref,
+    onClickOutside: () => setOpen?.(false)
+  });
+  return /* @__PURE__ */ React.createElement(
+    SelectContext.Provider,
+    {
+      value: { value, open, setOpen, keyExtractor, labelExtractor }
+    },
+    /* @__PURE__ */ React.createElement("div", { className: "w-full relative bg-white", ref }, 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';
+
+const { button } = selectVariants();
+const SelectTrigger = ({ label, disabled }) => {
+  const { value, setOpen, labelExtractor, open } = useContext(SelectContext);
+  const placeholder = 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(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/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,45 @@
+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';
+
+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));
+});