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

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

@@ -21,7 +21,7 @@ const PopoverContent = ({
     getFloatingProps,
     context
   } = Context.usePopoverContext();
-  return /* @__PURE__ */ React.createElement(React.Fragment, null, isOpen && /* @__PURE__ */ React.createElement(react.FloatingPortal, { preserveTabOrder: true }, /* @__PURE__ */ React.createElement(react.FloatingFocusManager, { ...rest, context, modal }, /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, isOpen && /* @__PURE__ */ React.createElement(react.FloatingFocusManager, { ...rest, context, modal }, /* @__PURE__ */ React.createElement(
     "div",
     {
       ref: refs.setFloating,
@@ -38,7 +38,7 @@ const PopoverContent = ({
       }
     },
     children
-  ))));
+  )));
 };
 
 exports.PopoverContent = PopoverContent;

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

@@ -1,10 +1,24 @@
 'use strict';
 
 var React = require('react');
+var clsx = require('clsx');
 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);
+  const widthClass = triggerWidth ? `w-[${triggerWidth}px]` : "w-auto";
+  return /* @__PURE__ */ React.createElement(react.FloatingPortal, null, /* @__PURE__ */ React.createElement(
+    index.Popover.Content,
+    {
+      className: clsx(
+        "bg-white max-h-[30vh] overflow-y-scroll gap-y-mili flex flex-col p-0",
+        widthClass
+      )
+    },
+    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/esm/components/Popover/Content.js

@@ -1,4 +1,4 @@
-import { FloatingPortal, FloatingFocusManager } from '@floating-ui/react';
+import { FloatingFocusManager } from '@floating-ui/react';
 import clsx from 'clsx';
 import React__default from 'react';
 import { usePopoverContext } from './Context.js';
@@ -19,7 +19,7 @@ const PopoverContent = ({
     getFloatingProps,
     context
   } = usePopoverContext();
-  return /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, isOpen && /* @__PURE__ */ React__default.createElement(FloatingPortal, { preserveTabOrder: true }, /* @__PURE__ */ React__default.createElement(FloatingFocusManager, { ...rest, context, modal }, /* @__PURE__ */ React__default.createElement(
+  return /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, isOpen && /* @__PURE__ */ React__default.createElement(FloatingFocusManager, { ...rest, context, modal }, /* @__PURE__ */ React__default.createElement(
     "div",
     {
       ref: refs.setFloating,
@@ -36,7 +36,7 @@ const PopoverContent = ({
       }
     },
     children
-  ))));
+  )));
 };
 
 export { PopoverContent };

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

@@ -1,8 +1,22 @@
-import React__default from 'react';
+import React__default, { useContext } from 'react';
+import clsx from 'clsx';
 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);
+  const widthClass = triggerWidth ? `w-[${triggerWidth}px]` : "w-auto";
+  return /* @__PURE__ */ React__default.createElement(FloatingPortal, null, /* @__PURE__ */ React__default.createElement(
+    Popover.Content,
+    {
+      className: clsx(
+        "bg-white max-h-[30vh] overflow-y-scroll gap-y-mili flex flex-col p-0",
+        widthClass
+      )
+    },
+    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/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.37",
+  "version": "1.9.38-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": "358f009c767b36078cad5c0ee3577f1468741cb3"
+  "gitHead": "ca5ac6efededbf5334f1c4626d1e94eb48751699"
 }