@tecsinapse/cortex-react 1.9.38 → 1.9.39-beta.0

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

@@ -9,6 +9,7 @@ const PopoverContent = ({
   children,
   className,
   modal = false,
+  style,
   ...rest
 }) => {
   const {
@@ -34,6 +35,7 @@ const PopoverContent = ({
         position: strategy,
         top: y ?? 0,
         left: x ?? 0,
+        ...style,
         ...floatingStyles
       }
     },

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

@@ -2,9 +2,19 @@
 
 var React = require('react');
 var index = require('../Popover/index.js');
+var react = require('@floating-ui/react');
+var context = require('./context.js');
 
 const SelectPopover = ({ children }) => {
-  return /* @__PURE__ */ React.createElement(index.Popover.Content, { className: "bg-white max-h-[30vh] w-full overflow-y-scroll gap-y-mili flex flex-col p-0" }, children);
+  const { triggerWidth } = React.useContext(context.SelectContext);
+  return /* @__PURE__ */ React.createElement(react.FloatingPortal, null, /* @__PURE__ */ React.createElement(
+    index.Popover.Content,
+    {
+      className: "bg-white max-h-[30vh] overflow-y-scroll gap-y-mili flex flex-col p-0",
+      style: { width: triggerWidth ? `${triggerWidth}px` : "auto" }
+    },
+    children
+  ));
 };
 
 exports.SelectPopover = SelectPopover;

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

@@ -12,6 +12,7 @@ const SelectRoot = ({
   labelExtractor,
   className
 }) => {
+  const [triggerWidth, setTriggerWidth] = React.useState(0);
   return /* @__PURE__ */ React.createElement(
     index.Popover.Root,
     {
@@ -19,7 +20,19 @@ const SelectRoot = ({
       placement: "bottom",
       trigger: "click"
     },
-    /* @__PURE__ */ React.createElement(context.SelectContext.Provider, { value: { value, keyExtractor, labelExtractor } }, /* @__PURE__ */ React.createElement(Content.Content, { className }, children))
+    /* @__PURE__ */ React.createElement(
+      context.SelectContext.Provider,
+      {
+        value: {
+          value,
+          keyExtractor,
+          labelExtractor,
+          triggerWidth,
+          setTriggerWidth
+        }
+      },
+      /* @__PURE__ */ React.createElement(Content.Content, { className }, children)
+    )
   );
 };
 

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

@@ -1,11 +1,11 @@
 'use strict';
 
-var cortexCore = require('@tecsinapse/cortex-core');
 var React = require('react');
 var io5 = require('react-icons/io5');
 var index = require('../Popover/index.js');
 var context = require('./context.js');
 var clsx = require('clsx');
+var cortexCore = require('@tecsinapse/cortex-core');
 
 const { button } = cortexCore.selectVariants();
 const SelectTrigger = ({
@@ -15,7 +15,8 @@ const SelectTrigger = ({
   multiLabelSelected,
   ...rest
 }) => {
-  const { value, labelExtractor } = React.useContext(context.SelectContext);
+  const { value, labelExtractor, setTriggerWidth } = React.useContext(context.SelectContext);
+  const triggerRef = React.useRef(null);
   const _placeholder = React.useMemo(() => {
     if (value?.length === 0 || !value) return placeholder ?? label;
     if (value?.length === 1) return labelExtractor(value[0]);
@@ -23,12 +24,18 @@ const SelectTrigger = ({
       return multiLabelSelected ? multiLabelSelected(value.length) : `${value.length} items selected`;
     return labelExtractor(value);
   }, [label, value]);
-  const { className } = rest;
   const hasValue = Array.isArray(value) ? value.length > 0 : !!value;
+  React.useEffect(() => {
+    if (triggerRef.current && setTriggerWidth) {
+      const width = triggerRef.current.getBoundingClientRect().width;
+      setTriggerWidth(width);
+    }
+  }, [triggerRef.current, setTriggerWidth]);
   return /* @__PURE__ */ React.createElement(index.Popover.Trigger, { disabled }, /* @__PURE__ */ React.createElement("div", { className: "w-full gap-mili" }, /* @__PURE__ */ React.createElement(
     "button",
     {
-      className: button({ className }),
+      ref: triggerRef,
+      className: button({ className: rest.className }),
       disabled,
       role: "button",
       ...rest
@@ -53,7 +60,7 @@ const SelectTrigger = ({
       "data-testid": "input-label"
     },
     label
-  ) : /* @__PURE__ */ React.createElement(React.Fragment, null)));
+  ) : null));
 };
 
 exports.SelectTrigger = SelectTrigger;

package/dist/cjs/components/Tooltip.js

@@ -21,6 +21,7 @@ const Tooltip = React.forwardRef(
       placement = "top",
       width,
       height,
+      style,
       delay = { open: 500, close: 0 }
     } = props;
     const arrowRef = React.useRef(null);
@@ -46,6 +47,7 @@ const Tooltip = React.forwardRef(
           left: x ?? 0,
           width,
           height,
+          ...style,
           ...floatingStyles
         },
         ...getFloatingProps()

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

@@ -7,6 +7,7 @@ const PopoverContent = ({
   children,
   className,
   modal = false,
+  style,
   ...rest
 }) => {
   const {
@@ -32,6 +33,7 @@ const PopoverContent = ({
         position: strategy,
         top: y ?? 0,
         left: x ?? 0,
+        ...style,
         ...floatingStyles
       }
     },

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

@@ -1,8 +1,18 @@
-import React__default from 'react';
+import React__default, { useContext } from 'react';
 import { Popover } from '../Popover/index.js';
+import { FloatingPortal } from '@floating-ui/react';
+import { SelectContext } from './context.js';
 
 const SelectPopover = ({ children }) => {
-  return /* @__PURE__ */ React__default.createElement(Popover.Content, { className: "bg-white max-h-[30vh] w-full overflow-y-scroll gap-y-mili flex flex-col p-0" }, children);
+  const { triggerWidth } = useContext(SelectContext);
+  return /* @__PURE__ */ React__default.createElement(FloatingPortal, null, /* @__PURE__ */ React__default.createElement(
+    Popover.Content,
+    {
+      className: "bg-white max-h-[30vh] overflow-y-scroll gap-y-mili flex flex-col p-0",
+      style: { width: triggerWidth ? `${triggerWidth}px` : "auto" }
+    },
+    children
+  ));
 };
 
 export { SelectPopover };

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

@@ -1,4 +1,4 @@
-import React__default from 'react';
+import React__default, { useState } from 'react';
 import { Popover } from '../Popover/index.js';
 import { Content } from './Content.js';
 import { SelectContext } from './context.js';
@@ -10,6 +10,7 @@ const SelectRoot = ({
   labelExtractor,
   className
 }) => {
+  const [triggerWidth, setTriggerWidth] = useState(0);
   return /* @__PURE__ */ React__default.createElement(
     Popover.Root,
     {
@@ -17,7 +18,19 @@ const SelectRoot = ({
       placement: "bottom",
       trigger: "click"
     },
-    /* @__PURE__ */ React__default.createElement(SelectContext.Provider, { value: { value, keyExtractor, labelExtractor } }, /* @__PURE__ */ React__default.createElement(Content, { className }, children))
+    /* @__PURE__ */ React__default.createElement(
+      SelectContext.Provider,
+      {
+        value: {
+          value,
+          keyExtractor,
+          labelExtractor,
+          triggerWidth,
+          setTriggerWidth
+        }
+      },
+      /* @__PURE__ */ React__default.createElement(Content, { className }, children)
+    )
   );
 };
 

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

@@ -1,9 +1,9 @@
-import { selectVariants, labelStyle } from '@tecsinapse/cortex-core';
-import React__default, { useContext, useMemo } from 'react';
+import React__default, { useContext, useRef, useMemo, useEffect } from 'react';
 import { IoChevronDownOutline } from 'react-icons/io5';
 import { Popover } from '../Popover/index.js';
 import { SelectContext } from './context.js';
 import clsx from 'clsx';
+import { selectVariants, labelStyle } from '@tecsinapse/cortex-core';
 
 const { button } = selectVariants();
 const SelectTrigger = ({
@@ -13,7 +13,8 @@ const SelectTrigger = ({
   multiLabelSelected,
   ...rest
 }) => {
-  const { value, labelExtractor } = useContext(SelectContext);
+  const { value, labelExtractor, setTriggerWidth } = useContext(SelectContext);
+  const triggerRef = useRef(null);
   const _placeholder = useMemo(() => {
     if (value?.length === 0 || !value) return placeholder ?? label;
     if (value?.length === 1) return labelExtractor(value[0]);
@@ -21,12 +22,18 @@ const SelectTrigger = ({
       return multiLabelSelected ? multiLabelSelected(value.length) : `${value.length} items selected`;
     return labelExtractor(value);
   }, [label, value]);
-  const { className } = rest;
   const hasValue = Array.isArray(value) ? value.length > 0 : !!value;
+  useEffect(() => {
+    if (triggerRef.current && setTriggerWidth) {
+      const width = triggerRef.current.getBoundingClientRect().width;
+      setTriggerWidth(width);
+    }
+  }, [triggerRef.current, setTriggerWidth]);
   return /* @__PURE__ */ React__default.createElement(Popover.Trigger, { disabled }, /* @__PURE__ */ React__default.createElement("div", { className: "w-full gap-mili" }, /* @__PURE__ */ React__default.createElement(
     "button",
     {
-      className: button({ className }),
+      ref: triggerRef,
+      className: button({ className: rest.className }),
       disabled,
       role: "button",
       ...rest
@@ -51,7 +58,7 @@ const SelectTrigger = ({
       "data-testid": "input-label"
     },
     label
-  ) : /* @__PURE__ */ React__default.createElement(React__default.Fragment, null)));
+  ) : null));
 };
 
 export { SelectTrigger };

package/dist/esm/components/Tooltip.js

@@ -19,6 +19,7 @@ const Tooltip = forwardRef(
       placement = "top",
       width,
       height,
+      style,
       delay = { open: 500, close: 0 }
     } = props;
     const arrowRef = useRef(null);
@@ -44,6 +45,7 @@ const Tooltip = forwardRef(
           left: x ?? 0,
           width,
           height,
+          ...style,
           ...floatingStyles
         },
         ...getFloatingProps()

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

@@ -3,5 +3,6 @@ import React from 'react';
 export interface PopoverContentProps extends Omit<FloatingFocusManagerProps, 'children' | 'context'> {
     children: React.ReactNode;
     className?: string;
+    style?: React.CSSProperties;
 }
-export declare const PopoverContent: ({ children, className, modal, ...rest }: PopoverContentProps) => React.JSX.Element;
+export declare const PopoverContent: ({ children, className, modal, style, ...rest }: PopoverContentProps) => React.JSX.Element;

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

@@ -1,6 +1,6 @@
 export declare const Popover: {
     Root: ({ children, placement, trigger, ...props }: import("./Root").PopoverRootProps) => import("react").JSX.Element;
     Trigger: ({ children, disabled }: import("./Trigger").PopoverTriggerProps) => import("react").FunctionComponentElement<any>;
-    Content: ({ children, className, modal, ...rest }: import("./Content").PopoverContentProps) => import("react").JSX.Element;
+    Content: ({ children, className, modal, style, ...rest }: import("./Content").PopoverContentProps) => import("react").JSX.Element;
     Provider: ({ children, placement, trigger, fallbackPlacements, ...props }: import("./Provider").PopoverProviderProps) => import("react").JSX.Element;
 };

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

@@ -2,6 +2,8 @@ interface SelectContextProps<T> {
     value?: T | T[];
     keyExtractor: (value: T) => string;
     labelExtractor: (value: T) => string;
+    triggerWidth?: number;
+    setTriggerWidth?: (width: number) => void;
 }
 export declare const SelectContext: import("react").Context<SelectContextProps<any>>;
 interface SelectMultiOptionsContextProps<T> {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tecsinapse/cortex-react",
-  "version": "1.9.38",
+  "version": "1.9.39-beta.0",
   "description": "React components based in @tecsinapse/cortex-core",
   "license": "MIT",
   "main": "dist/esm/index.js",
@@ -48,5 +48,5 @@
     "react-dom": ">=18.0.0",
     "tailwind": ">=3.3.0"
   },
-  "gitHead": "b8c5795863dd10ef090d61654a70163d1dfdd452"
+  "gitHead": "a1dad574a57b736560c130d08965a92bbc8b1b85"
 }