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

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/index.js

@@ -11,22 +11,26 @@ export { DefaultSnack } from './components/DefaultSnack.js';
 export { Drawer } from './components/Drawer.js';
 export { GroupButton } from './components/GroupButton.js';
 export { Hint } from './components/Hint.js';
-export { Box, Face, Input, Left, Right, Root } from './components/Input.js';
+export { Input } from './components/Input/index.js';
 export { Modal } from './components/Modal.js';
 export { ProgressBar } from './components/ProgressBar.js';
 export { RangeCalendar } from './components/RangeCalendar.js';
-export { Select } from './components/Select.js';
+export { Select } from './components/Select/index.js';
 export { Skeleton } from './components/Skeleton.js';
 export { TCell, TFoot, THead, THeadCell, TRow, TRowHeader, Table, Td } from './components/Table.js';
 export { Tag } from './components/Tag.js';
 export { TextArea } from './components/TextArea.js';
 export { TimeFieldInput } from './components/TimeFieldInput.js';
 export { Toggle } from './components/Toggle.js';
+import './components/Tooltip.js';
+export { Popover } from './components/Popover/Popover.js';
 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 { useDateRangePickerInput } from './hooks/useDateRangePickerInput.js';
 export { useDebouncedState } from './hooks/useDebouncedState.js';
+export { useOutsideClickListener } from './hooks/useOutsideClickListener.js';
 export { useRangeCalendar } from './hooks/useRangeCalendar.js';
+export { useFloatingLogic } from './hooks/useFloatingLogic.js';
 export { SnackbarSonner } from './service/SnackbarSonner.js';

package/dist/esm/service/SnackbarSonner.js

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

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

@@ -0,0 +1,3 @@
+import React from 'react';
+import { InputProps } from './types';
+export declare const InputBox: React.ForwardRefExoticComponent<InputProps & React.RefAttributes<HTMLInputElement>>;

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

@@ -0,0 +1,3 @@
+import React from 'react';
+import { InputFaceProps } from './types';
+export declare const InputFace: React.ForwardRefExoticComponent<InputFaceProps & React.RefAttributes<HTMLDivElement>>;

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

@@ -0,0 +1,3 @@
+import React from 'react';
+import { InputLeftProps } from './types';
+export declare const InputLeft: React.ForwardRefExoticComponent<InputLeftProps & React.RefAttributes<HTMLDivElement>>;

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

@@ -0,0 +1,3 @@
+import React from 'react';
+import { InputRightProps } from './types';
+export declare const InputRight: React.ForwardRefExoticComponent<InputRightProps & React.RefAttributes<HTMLDivElement>>;

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

@@ -0,0 +1,3 @@
+import React from 'react';
+import { InputProps } from './types';
+export declare const InputRoot: React.ForwardRefExoticComponent<InputProps & React.RefAttributes<HTMLInputElement>>;

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

@@ -0,0 +1,3 @@
+import React from 'react';
+import { InputSearchProps } from './types';
+export declare const InputSearch: React.ForwardRefExoticComponent<InputSearchProps & React.RefAttributes<HTMLInputElement>>;

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

@@ -0,0 +1,9 @@
+export declare const Input: {
+    Root: import("react").ForwardRefExoticComponent<import("./types").InputProps & import("react").RefAttributes<HTMLInputElement>>;
+    Face: import("react").ForwardRefExoticComponent<import("./types").InputFaceProps & import("react").RefAttributes<HTMLDivElement>>;
+    Box: import("react").ForwardRefExoticComponent<import("./types").InputProps & import("react").RefAttributes<HTMLInputElement>>;
+    Left: import("react").ForwardRefExoticComponent<import("./types").InputLeftProps & import("react").RefAttributes<HTMLDivElement>>;
+    Right: import("react").ForwardRefExoticComponent<import("./types").InputRightProps & import("react").RefAttributes<HTMLDivElement>>;
+    Search: import("react").ForwardRefExoticComponent<import("./types").InputSearchProps & import("react").RefAttributes<HTMLInputElement>>;
+};
+export * from './types';

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

@@ -0,0 +1,20 @@
+import { InputBaseVariants } from '@tecsinapse/cortex-core';
+export interface InputPropsBase {
+    variants?: InputBaseVariants;
+    label?: string;
+}
+export interface InputProps extends React.InputHTMLAttributes<HTMLInputElement>, InputPropsBase {
+}
+export interface InputFaceProps extends React.HTMLAttributes<HTMLDivElement>, Pick<InputPropsBase, 'variants'> {
+}
+export interface InputLeftProps extends React.HTMLAttributes<HTMLDivElement> {
+    children: React.ReactNode;
+    className?: string;
+}
+export interface InputRightProps extends React.HTMLAttributes<HTMLDivElement> {
+    children: React.ReactNode;
+    className?: string;
+}
+export interface InputSearchProps extends InputProps {
+    bounceTimeout?: number;
+}

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

@@ -0,0 +1,5 @@
+export declare const Popover: {
+    Root: ({ children, placement, trigger }: import("./PopoverRoot").PopoverRootProps) => JSX.Element;
+    Trigger: ({ children }: import("./PopoverTrigger").PopoverTriggerProps) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+    Content: ({ children, className }: import("./PopoverContent").PopoverContentProps) => JSX.Element;
+};

package/dist/types/components/Popover/PopoverContent.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+export interface PopoverContentProps {
+    children: React.ReactNode;
+    className?: string;
+}
+declare const PopoverContent: ({ children, className }: PopoverContentProps) => JSX.Element;
+export default PopoverContent;

package/dist/types/components/Popover/PopoverContext.d.ts

@@ -0,0 +1,22 @@
+import React, { ReactNode } from 'react';
+import { Placement } from '@floating-ui/react';
+interface PopoverContextProps {
+    triggerProps?: any;
+    refs?: any;
+    isOpen?: boolean;
+    x?: number;
+    y?: number;
+    strategy?: 'absolute' | 'fixed';
+    floatingStyles?: React.CSSProperties;
+    placement?: Placement;
+    setPlacement?: React.Dispatch<React.SetStateAction<Placement | undefined>>;
+    setTrigger?: React.Dispatch<React.SetStateAction<'hover' | 'click'>>;
+}
+export declare const usePopoverContext: () => PopoverContextProps;
+interface PopoverProviderProps {
+    children: ReactNode;
+    placement?: Placement;
+    trigger?: 'hover' | 'click';
+}
+export declare const PopoverProvider: ({ children, placement, trigger, }: PopoverProviderProps) => JSX.Element;
+export {};

package/dist/types/components/Popover/PopoverRoot.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import { Placement } from '@floating-ui/react';
+export interface PopoverRootProps {
+    children: React.ReactNode;
+    placement?: Placement;
+    trigger?: 'hover' | 'click';
+}
+declare const PopoverRoot: ({ children, placement, trigger }: PopoverRootProps) => JSX.Element;
+export default PopoverRoot;

package/dist/types/components/Popover/PopoverTrigger.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+export interface PopoverTriggerProps {
+    children: React.ReactElement;
+}
+declare const PopoverTrigger: ({ children }: PopoverTriggerProps) => React.ReactElement<any, string | React.JSXElementConstructor<any>>;
+export default PopoverTrigger;

package/dist/types/components/Popover/index.d.ts

@@ -0,0 +1,3 @@
+export { default as Root } from './PopoverRoot';
+export { default as Trigger } from './PopoverTrigger';
+export { default as Content } from './PopoverContent';

package/dist/types/components/Select/GroupedOptions.d.ts

@@ -0,0 +1,6 @@
+export interface SelectGroupedOptionsProps<T> {
+    onSelect: (value: T) => void;
+    options?: Map<string, T[]>;
+    groupedLabelExtractor: (value: string) => string;
+}
+export declare const SelectGroupedOptions: <T>({ onSelect, groupedLabelExtractor, options, }: SelectGroupedOptionsProps<T>) => JSX.Element;

package/dist/types/components/Select/Option.d.ts

@@ -0,0 +1,5 @@
+export interface SelectOptionProps<T> {
+    option: T;
+    onSelectOption: (option: T) => void;
+}
+export declare const SelectOption: <T>({ onSelectOption, option, }: SelectOptionProps<T>) => JSX.Element;

package/dist/types/components/Select/Options.d.ts

@@ -0,0 +1,5 @@
+export interface SelectOptionsProps<T> {
+    options?: T[];
+    onSelect: (value: T) => void;
+}
+export declare const SelectOptions: <T>({ onSelect, options, }: SelectOptionsProps<T>) => JSX.Element;

package/dist/types/components/Select/Popover.d.ts

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

package/dist/types/components/Select/Root.d.ts

@@ -0,0 +1,8 @@
+import { ReactNode } from 'react';
+export interface SelectRootProps<T> {
+    children: ReactNode;
+    value?: T;
+    keyExtractor: (value: T) => string;
+    labelExtractor: (value: T) => string;
+}
+export declare const SelectRoot: <T>({ children, value, keyExtractor, labelExtractor, }: SelectRootProps<T>) => JSX.Element;

package/dist/types/components/Select/Trigger.d.ts

@@ -0,0 +1,5 @@
+export interface SelectTriggerProps {
+    label: string;
+    disabled?: boolean;
+}
+export declare const SelectTrigger: ({ label, disabled }: SelectTriggerProps) => JSX.Element;

package/dist/types/components/Select/context.d.ts

@@ -0,0 +1,10 @@
+import { Dispatch, SetStateAction } from 'react';
+interface SelectContextProps<T> {
+    value?: T;
+    open?: boolean;
+    setOpen?: Dispatch<SetStateAction<boolean>>;
+    keyExtractor: (value: T) => string;
+    labelExtractor: (value: T) => string;
+}
+export declare const SelectContext: import("react").Context<SelectContextProps<any>>;
+export {};

package/dist/types/components/Select/index.d.ts

@@ -0,0 +1,8 @@
+export declare const Select: {
+    Root: <T>({ children, value, keyExtractor, labelExtractor, }: import("./Root").SelectRootProps<T>) => JSX.Element;
+    Trigger: ({ label, disabled }: import("./Trigger").SelectTriggerProps) => JSX.Element;
+    Popover: ({ children }: import("./Popover").SelectPopoverProps) => JSX.Element;
+    Options: <T_1>({ onSelect, options, }: import("./Options").SelectOptionsProps<T_1>) => JSX.Element;
+    GroupedOptions: <T_2>({ onSelect, groupedLabelExtractor, options, }: import("./GroupedOptions").SelectGroupedOptionsProps<T_2>) => JSX.Element;
+    Option: <T_3>({ onSelectOption, option, }: import("./Option").SelectOptionProps<T_3>) => JSX.Element;
+};

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

@@ -0,0 +1,13 @@
+import React from 'react';
+import { Placement } from '@floating-ui/react';
+interface TooltipProps {
+    children: React.ReactElement;
+    text: string;
+    trigger?: 'hover' | 'click';
+    placement?: Placement;
+    width?: number;
+    height?: number;
+    style?: React.CSSProperties;
+}
+declare const Tooltip: React.ForwardRefExoticComponent<TooltipProps & React.RefAttributes<HTMLDivElement>>;
+export default Tooltip;

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

@@ -15,10 +15,19 @@ export * from './Input';
 export * from './Modal';
 export * from './ProgressBar';
 export * from './RangeCalendar';
-export { default as Select } from './Select';
+export * from './Select';
 export * from './Skeleton';
 export * from './Table';
 export * from './Tag';
 export * from './TextArea';
 export * from './TimeFieldInput';
 export * from './Toggle';
+export * from './Table';
+export * from './Drawer';
+export * from './Breadcrumbs';
+export * from './Avatar';
+export * from './Skeleton';
+export * from './ProgressBar';
+export * from './GroupButton';
+export * from './Tooltip';
+export * from './Popover/Popover';

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

@@ -4,4 +4,6 @@ export * from './useCalendarGrid';
 export * from './useDatePickerInput';
 export * from './useDateRangePickerInput';
 export * from './useDebouncedState';
+export * from './useOutsideClickListener';
 export * from './useRangeCalendar';
+export * from './useFloatingLogic';

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

@@ -0,0 +1,46 @@
+import { RefObject } from 'react';
+import { Placement } from '@floating-ui/react';
+interface FloatingLogicProps {
+    placement?: Placement;
+    trigger?: 'hover' | 'click';
+    arrowRef?: RefObject<SVGSVGElement>;
+}
+export declare const useFloatingLogic: ({ placement, trigger, arrowRef, }: FloatingLogicProps) => {
+    isOpen: boolean;
+    setIsOpen: import("react").Dispatch<import("react").SetStateAction<boolean>>;
+    x: number;
+    y: number;
+    strategy: import("@floating-ui/utils").Strategy;
+    refs: {
+        reference: import("react").MutableRefObject<import("@floating-ui/react-dom").ReferenceType | null>;
+        floating: import("react").MutableRefObject<HTMLElement | null>;
+        setReference: (node: import("@floating-ui/react-dom").ReferenceType | null) => void;
+        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;
+        middlewareData: import("@floating-ui/core").MiddlewareData;
+        isPositioned: boolean;
+        update: () => void;
+        floatingStyles: import("react").CSSProperties;
+        open: boolean;
+        onOpenChange: (open: boolean, event?: Event | undefined, reason?: import("@floating-ui/react").OpenChangeReason | undefined) => void;
+        events: import("@floating-ui/react").FloatingEvents;
+        dataRef: import("react").MutableRefObject<import("@floating-ui/react").ContextData>;
+        nodeId: string | undefined;
+        floatingId: string;
+        refs: import("@floating-ui/react").ExtendedRefs<import("@floating-ui/react").ReferenceType>;
+        elements: import("@floating-ui/react").ExtendedElements<import("@floating-ui/react").ReferenceType>;
+    };
+    floatingStyles: import("react").CSSProperties;
+    triggerProps: {
+        onClick?: (() => void) | undefined;
+        onMouseEnter?: (() => void) | undefined;
+        onMouseLeave?: (() => void) | undefined;
+        ref: ((node: import("@floating-ui/react-dom").ReferenceType | null) => void) & ((node: import("@floating-ui/react").ReferenceType | null) => void);
+    };
+};
+export {};

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

@@ -0,0 +1,7 @@
+import { MutableRefObject } from 'react';
+interface useOutsideClickListenerProps {
+    ref: MutableRefObject<any>;
+    onClickOutside?: () => void;
+}
+export declare const useOutsideClickListener: ({ ref, onClickOutside, }: useOutsideClickListenerProps) => void;
+export {};

package/dist/types/tests/Input/Left.test.d.ts

@@ -0,0 +1 @@
+import '@testing-library/jest-dom';

package/dist/types/tests/Input/Right.test.d.ts

@@ -0,0 +1 @@
+import '@testing-library/jest-dom';

package/dist/types/tests/Input/Root.test.d.ts

@@ -0,0 +1 @@
+import '@testing-library/jest-dom';

package/dist/types/tests/Input/Search.test.d.ts

@@ -0,0 +1 @@
+import '@testing-library/jest-dom';

package/dist/types/tests/Popover.test.d.ts

@@ -0,0 +1 @@
+import '@testing-library/jest-dom';

package/dist/types/tests/Tooltip.test.d.ts

@@ -0,0 +1 @@
+import '@testing-library/jest-dom';

package/dist/types/tests/useOutsideClickListener.test.d.ts

@@ -0,0 +1 @@
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tecsinapse/cortex-react",
-  "version": "1.3.0-beta.1",
+  "version": "1.3.0-beta.3",
   "description": "React components based in @tecsinapse/cortex-core",
   "license": "MIT",
   "main": "dist/esm/index.js",
@@ -18,12 +18,15 @@
     "test:watch": "jest --watch"
   },
   "dependencies": {
-    "@tecsinapse/cortex-core": "0.2.2-beta.2",
+    "@floating-ui/react": "^0.26.18",
+    "@internationalized/date": "*",
+    "@tecsinapse/cortex-core": "0.3.0-beta.1",
     "clsx": "*",
     "react-aria": "^3.33.1",
     "react-icons": "^5.2.1",
     "react-stately": "^3.31.1",
-    "sonner": "^1.5.0"
+    "sonner": "^1.5.0",
+    "tailwind-merge": "*"
   },
   "repository": {
     "type": "git",
@@ -39,5 +42,5 @@
     "react-dom": ">=18.0.0",
     "tailwind": ">=3.3.0"
   },
-  "gitHead": "db686bfbca61f00d03a355fbb00cfa88646b68ed"
+  "gitHead": "6cfddfd6db49be4dcf6dc53f192e659566bce3b3"
 }

package/dist/cjs/components/Input.js

@@ -1,81 +0,0 @@
-'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 Box = 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.clsx(cortexCore.inputBox(placeholder, label, className)),
-        ...rest,
-        ref,
-        "data-testid": "input-input"
-      }
-    ), /* @__PURE__ */ React.createElement(
-      "label",
-      {
-        htmlFor: id ?? name,
-        className: cortexCore.labelStyle({ intent: variants?.intent, placeholder }),
-        "data-testid": "input-label"
-      },
-      label
-    ));
-  }
-);
-const Face = 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",
-      {
-        ...rest,
-        className: clsx.clsx(cortexCore.input(variants), className),
-        id: "input-face",
-        ref
-      },
-      clones
-    );
-  }
-);
-const Root = React.forwardRef(
-  ({ variants, className, ...rest }, ref) => {
-    return /* @__PURE__ */ React.createElement(Face, { variants, className }, /* @__PURE__ */ React.createElement(Box, { ...rest, ref }));
-  }
-);
-const Left = React.forwardRef(
-  ({ children, className, ...rest }, ref) => {
-    return /* @__PURE__ */ React.createElement("div", { className: clsx.clsx(className, "mr-2.5"), ...rest, ref }, children);
-  }
-);
-const Right = React.forwardRef(
-  ({ children, className, ...rest }, ref) => {
-    return /* @__PURE__ */ React.createElement("div", { className: clsx.clsx(className, "ml-2.5"), ...rest, ref }, children);
-  }
-);
-const Input = {
-  Root,
-  Face,
-  Box,
-  Left,
-  Right
-};
-
-exports.Box = Box;
-exports.Face = Face;
-exports.Input = Input;
-exports.Left = Left;
-exports.Right = Right;
-exports.Root = Root;