@ttoss/ui 3.1.3 → 3.1.5

package/dist/esm/index.js

@@ -266,6 +266,16 @@ var Select = /*#__PURE__*/React4.forwardRef(({
   ...props
 }, ref) => {
   const hasError = props["aria-invalid"] === "true";
+  const refEl = React4.useRef({});
+  React4.useImperativeHandle(ref, () => {
+    return refEl.current;
+  });
+  React4.useEffect(() => {
+    const parentEl = refEl.current?.parentElement;
+    if (parentEl) {
+      parentEl.style.position = "relative";
+    }
+  }, []);
   return /* @__PURE__ */jsx7(SelectUi, {
     arrow: /* @__PURE__ */jsxs6(Fragment2, {
       children: [leadingIcon && /* @__PURE__ */jsx7(Text, {
@@ -279,9 +289,8 @@ var Select = /*#__PURE__*/React4.forwardRef(({
           left: ({
             space
           }) => {
-            const defaultLeftValue = "16px";
             const leftSpaceValue = space?.["xl"] || "16px";
-            return `calc(${leftSpaceValue} + ${defaultLeftValue})`;
+            return leftSpaceValue;
           }
         },
         children: /* @__PURE__ */jsx7(Icon5, {
@@ -295,9 +304,8 @@ var Select = /*#__PURE__*/React4.forwardRef(({
           right: ({
             space
           }) => {
-            const defaultRightValue = "16px";
             const xlSpace = space?.["xl"] || "16px";
-            return `calc(${xlSpace} + ${defaultRightValue})`;
+            return xlSpace;
           },
           alignSelf: "center",
           pointerEvents: "none"
@@ -357,7 +365,7 @@ var Select = /*#__PURE__*/React4.forwardRef(({
       },
       ...sx
     },
-    ref,
+    ref: refEl,
     ...props
   });
 });

package/dist/index.js

@@ -342,6 +342,16 @@ var Select = React4.forwardRef(({
   ...props
 }, ref) => {
   const hasError = props["aria-invalid"] === "true";
+  const refEl = React4.useRef({});
+  React4.useImperativeHandle(ref, () => {
+    return refEl.current;
+  });
+  React4.useEffect(() => {
+    const parentEl = refEl.current?.parentElement;
+    if (parentEl) {
+      parentEl.style.position = "relative";
+    }
+  }, []);
   return /* @__PURE__ */(0, import_jsx_runtime7.jsx)(import_theme_ui17.Select, {
     arrow: /* @__PURE__ */(0, import_jsx_runtime7.jsxs)(import_jsx_runtime7.Fragment, {
       children: [leadingIcon && /* @__PURE__ */(0, import_jsx_runtime7.jsx)(import_theme_ui16.Text, {
@@ -355,9 +365,8 @@ var Select = React4.forwardRef(({
           left: ({
             space
           }) => {
-            const defaultLeftValue = "16px";
             const leftSpaceValue = space?.["xl"] || "16px";
-            return `calc(${leftSpaceValue} + ${defaultLeftValue})`;
+            return leftSpaceValue;
           }
         },
         children: /* @__PURE__ */(0, import_jsx_runtime7.jsx)(import_react_icons5.Icon, {
@@ -371,9 +380,8 @@ var Select = React4.forwardRef(({
           right: ({
             space
           }) => {
-            const defaultRightValue = "16px";
             const xlSpace = space?.["xl"] || "16px";
-            return `calc(${xlSpace} + ${defaultRightValue})`;
+            return xlSpace;
           },
           alignSelf: "center",
           pointerEvents: "none"
@@ -433,7 +441,7 @@ var Select = React4.forwardRef(({
       },
       ...sx
     },
-    ref,
+    ref: refEl,
     ...props
   });
 });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ttoss/ui",
-  "version": "3.1.3",
+  "version": "3.1.5",
   "description": "Primitive layout, typographic, and other components for styling applications.",
   "author": "ttoss",
   "contributors": [
@@ -22,7 +22,7 @@
   "dependencies": {
     "@theme-ui/match-media": "^0.16.0",
     "theme-ui": "^0.16.0",
-    "@ttoss/theme": "^1.6.3"
+    "@ttoss/theme": "^1.6.4"
   },
   "peerDependencies": {
     "@emotion/react": "^11",

package/src/components/Select.tsx

@@ -15,6 +15,20 @@ export const Select = React.forwardRef<HTMLSelectElement, SelectProps>(
   ({ arrow, sx, leadingIcon, trailingIcon, ...props }, ref) => {
     const hasError = props['aria-invalid'] === 'true';
 
+    const refEl = React.useRef<HTMLSelectElement>({} as HTMLSelectElement);
+
+    React.useImperativeHandle(ref, () => {
+      return refEl.current;
+    });
+
+    React.useEffect(() => {
+      const parentEl = refEl.current?.parentElement;
+
+      if (parentEl) {
+        parentEl.style.position = 'relative';
+      }
+    }, []);
+
     return (
       <SelectUi
         // https://theme-ui.com/components/select#custom-arrow-icon
@@ -30,10 +44,9 @@ export const Select = React.forwardRef<HTMLSelectElement, SelectProps>(
                   position: 'absolute',
                   // eslint-disable-next-line @typescript-eslint/no-explicit-any
                   left: ({ space }: any) => {
-                    const defaultLeftValue = '16px';
                     const leftSpaceValue = space?.['xl'] || '16px';
 
-                    return `calc(${leftSpaceValue} + ${defaultLeftValue})`;
+                    return leftSpaceValue;
                   },
                 }}
               >
@@ -47,10 +60,9 @@ export const Select = React.forwardRef<HTMLSelectElement, SelectProps>(
                 position: 'absolute',
                 // eslint-disable-next-line @typescript-eslint/no-explicit-any
                 right: ({ space }: any) => {
-                  const defaultRightValue = '16px';
                   const xlSpace = space?.['xl'] || '16px';
 
-                  return `calc(${xlSpace} + ${defaultRightValue})`;
+                  return xlSpace;
                 },
                 alignSelf: 'center',
                 pointerEvents: 'none',
@@ -116,7 +128,7 @@ export const Select = React.forwardRef<HTMLSelectElement, SelectProps>(
           },
           ...sx,
         }}
-        ref={ref}
+        ref={refEl}
         {...props}
       />
     );