@mw-kit/mw-ui 1.10.2 → 1.10.3

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

@@ -1,5 +1,6 @@
 export { default as useAsyncOptions } from './useAsyncOptions';
 export { default as useFloatingMenu } from './useFloatingMenu';
+export { default as useInitialPlacement } from './useInitialPlacement';
 export { default as useListNavigation } from './useListNavigation';
 export { default as useRuleIndex } from './useRuleIndex';
 export { default as useVirtualizedOptions } from './useVirtualizedOptions';

package/dist/components/Select/hooks/useFloatingMenu/index.d.ts

@@ -1,8 +1,10 @@
+import type { SelectPlacement } from '../../types';
 type UseFloatingMenuParams = {
     open: boolean;
     onOpenChange: (open: boolean) => void;
+    placement?: SelectPlacement;
 };
-declare const useFloatingMenu: ({ open, onOpenChange }: UseFloatingMenuParams) => {
+declare const useFloatingMenu: ({ open, onOpenChange, placement, }: UseFloatingMenuParams) => {
     floating: {
         placement: import("@floating-ui/utils").Placement;
         strategy: import("@floating-ui/utils").Strategy;

package/dist/components/Select/hooks/useInitialPlacement/index.d.ts

@@ -0,0 +1,6 @@
+import type { SelectPlacement, SelectProps } from '../../types';
+declare const useInitialPlacement: (props: SelectProps<unknown>, referenceNode: HTMLButtonElement | null) => {
+    placement: SelectPlacement;
+    syncPlacement: (node: HTMLButtonElement | null) => void;
+};
+export default useInitialPlacement;

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

@@ -1,5 +1,6 @@
 import type React from 'react';
 import type { ReactVirtualizerOptions } from '@tanstack/react-virtual';
+import type { Property } from 'csstype';
 export type SelectOptionsLoader<Option> = (search: string, page: number, cursor: Option | null) => Promise<{
     options: Option[];
     last: boolean;
@@ -24,6 +25,7 @@ export type SelectApplyRule<Option, Id extends string = string> = {
     Component?: SelectApplyRuleComponent<Option>;
 };
 export type SelectApplyRules<T> = readonly SelectApplyRule<T, string>[];
+export type SelectPlacement = 'bottom' | 'top';
 export type SelectOptionComponent<Option> = React.FunctionComponent<{
     option: Option;
     isActive: boolean;
@@ -45,6 +47,13 @@ export type CommonSelectProps<Option> = SelectButtonProps & {
     viewMode?: boolean;
     borderless?: boolean;
     paddingless?: boolean;
+    zIndex?: Property.ZIndex;
+    placement?: SelectPlacement;
+    /**
+     * Defines the element used as the visual boundary when resolving the automatic placement.
+     * The viewport is used by default.
+     */
+    boundRef?: HTMLElement;
     /**
      * The number of items to render above and below the visible area.
      * The default is 2.

package/dist/index.d.mts

@@ -6,6 +6,7 @@ import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as _fortawesome_fontawesome_common_types from '@fortawesome/fontawesome-common-types';
 import * as styled_components_dist_types from 'styled-components/dist/types';
 import { ReactVirtualizerOptions } from '@tanstack/react-virtual';
+import { Property } from 'csstype';
 import SignatureCanvas, { SignatureCanvasProps } from 'react-signature-canvas';
 
 type TransitionFunction = 'ease' | 'ease-in' | 'ease-out' | 'ease-in-out' | 'linear' | 'step-start' | 'step-end' | `cubic-bezier(${number}, ${number}, ${number}, ${number})` | `frames(${number})` | `steps(${number})` | `steps(${number}, ${'jump-start' | 'jump-end' | 'jump-none' | 'jump-both' | 'start' | 'end'})`;
@@ -3174,6 +3175,7 @@ type SelectApplyRule<Option, Id extends string = string> = {
     Component?: SelectApplyRuleComponent<Option>;
 };
 type SelectApplyRules<T> = readonly SelectApplyRule<T, string>[];
+type SelectPlacement = 'bottom' | 'top';
 type SelectOptionComponent<Option> = react__default.FunctionComponent<{
     option: Option;
     isActive: boolean;
@@ -3195,6 +3197,13 @@ type CommonSelectProps<Option> = SelectButtonProps & {
     viewMode?: boolean;
     borderless?: boolean;
     paddingless?: boolean;
+    zIndex?: Property.ZIndex;
+    placement?: SelectPlacement;
+    /**
+     * Defines the element used as the visual boundary when resolving the automatic placement.
+     * The viewport is used by default.
+     */
+    boundRef?: HTMLElement;
     /**
      * The number of items to render above and below the visible area.
      * The default is 2.

package/dist/index.js

@@ -18974,8 +18974,8 @@ var ProgressBar = ({ type, value, ...props }) => {
 var ProgressBar_default = ProgressBar;
 
 // src/components/Select/index.tsx
-var import_react80 = __toESM(require("react"));
-var import_react81 = require("@floating-ui/react");
+var import_react81 = __toESM(require("react"));
+var import_react82 = require("@floating-ui/react");
 
 // src/components/Select/hooks/useAsyncOptions/index.ts
 var import_react70 = require("react");
@@ -19049,11 +19049,15 @@ var useAsyncOptions_default = useAsyncOptions;
 
 // src/components/Select/hooks/useFloatingMenu/index.ts
 var import_react71 = require("@floating-ui/react");
-var useFloatingMenu = ({ open, onOpenChange }) => {
+var useFloatingMenu = ({
+  open,
+  onOpenChange,
+  placement = "bottom"
+}) => {
   const floating = (0, import_react71.useFloating)({
     open,
     onOpenChange,
-    placement: "bottom-start",
+    placement: `${placement}-start`,
     whileElementsMounted: import_react71.autoUpdate,
     middleware: [
       (0, import_react71.flip)(),
@@ -19082,12 +19086,59 @@ var useFloatingMenu = ({ open, onOpenChange }) => {
 };
 var useFloatingMenu_default = useFloatingMenu;
 
-// src/components/Select/hooks/useListNavigation/index.ts
+// src/components/Select/hooks/useInitialPlacement/index.ts
 var import_react72 = require("react");
+var useIsomorphicLayoutEffect = typeof window !== "undefined" ? import_react72.useLayoutEffect : import_react72.useEffect;
+var resolveSelectPlacement = (triggerRect, context) => {
+  const midpoint = context.top + context.height / 2;
+  return triggerRect.top >= midpoint ? "top" : "bottom";
+};
+var useInitialPlacement = (props, referenceNode) => {
+  const [placement, setPlacement] = (0, import_react72.useState)(
+    props.placement ?? "bottom"
+  );
+  const syncPlacement = (0, import_react72.useCallback)(
+    (node) => {
+      if (props.placement !== void 0) {
+        setPlacement(props.placement);
+        return;
+      }
+      if (!node) return;
+      const context = props.boundRef ? props.boundRef.getBoundingClientRect() : {
+        top: 0,
+        height: window.innerHeight
+      };
+      const nextPlacement = resolveSelectPlacement(
+        node.getBoundingClientRect(),
+        context
+      );
+      setPlacement(nextPlacement);
+    },
+    [props.boundRef, props.placement]
+  );
+  useIsomorphicLayoutEffect(() => {
+    syncPlacement(referenceNode);
+    if (props.placement !== void 0 || !referenceNode) return;
+    const onUpdate = () => {
+      syncPlacement(referenceNode);
+    };
+    window.addEventListener("scroll", onUpdate, true);
+    window.addEventListener("resize", onUpdate);
+    return () => {
+      window.removeEventListener("scroll", onUpdate, true);
+      window.removeEventListener("resize", onUpdate);
+    };
+  }, [referenceNode, syncPlacement, props.placement]);
+  return { placement, syncPlacement };
+};
+var useInitialPlacement_default = useInitialPlacement;
+
+// src/components/Select/hooks/useListNavigation/index.ts
+var import_react73 = require("react");
 var INVALID_INDEX = -1;
 var useActiveIndex = (itemCount, scrollToIndex) => {
-  const [activeIndex, setActiveIndex] = (0, import_react72.useState)(INVALID_INDEX);
-  (0, import_react72.useEffect)(() => {
+  const [activeIndex, setActiveIndex] = (0, import_react73.useState)(INVALID_INDEX);
+  (0, import_react73.useEffect)(() => {
     setActiveIndex((current) => {
       if (current >= itemCount) return INVALID_INDEX;
       return current;
@@ -19107,19 +19158,19 @@ var useListNavigation = ({
   scrollToIndex
 }) => {
   const [activeIndex, setActiveIndex] = useActiveIndex(itemCount, scrollToIndex);
-  const firstEnabledIndex = (0, import_react72.useMemo)(() => {
+  const firstEnabledIndex = (0, import_react73.useMemo)(() => {
     for (let index = 0; index < itemCount; index += 1) {
       if (!isItemDisabled(index)) return index;
     }
     return INVALID_INDEX;
   }, [isItemDisabled, itemCount]);
-  const lastEnabledIndex = (0, import_react72.useMemo)(() => {
+  const lastEnabledIndex = (0, import_react73.useMemo)(() => {
     for (let index = itemCount - 1; index >= 0; index -= 1) {
       if (!isItemDisabled(index)) return index;
     }
     return INVALID_INDEX;
   }, [isItemDisabled, itemCount]);
-  const findNextEnabled = (0, import_react72.useCallback)(
+  const findNextEnabled = (0, import_react73.useCallback)(
     (from, direction) => {
       let index = from;
       while (index >= 0 && index < itemCount) {
@@ -19130,7 +19181,7 @@ var useListNavigation = ({
     },
     [isItemDisabled, itemCount]
   );
-  const onKeyDown = (0, import_react72.useCallback)(
+  const onKeyDown = (0, import_react73.useCallback)(
     (event) => {
       if (event.key === "ArrowDown") {
         event.preventDefault();
@@ -19183,13 +19234,13 @@ var useListNavigation = ({
 var useListNavigation_default = useListNavigation;
 
 // src/components/Select/hooks/useRuleIndex/index.ts
-var import_react73 = require("react");
+var import_react74 = require("react");
 var useRuleIndex = ({
   options,
   getKey,
   rules
 }) => {
-  const failedRuleByKey = (0, import_react73.useMemo)(() => {
+  const failedRuleByKey = (0, import_react74.useMemo)(() => {
     const failedRuleByKey2 = /* @__PURE__ */ new Map();
     options.forEach((option) => {
       const key = getKey(option);
@@ -19200,7 +19251,7 @@ var useRuleIndex = ({
     });
     return failedRuleByKey2;
   }, [getKey, options, rules]);
-  const getFailedRuleByKey = (0, import_react73.useCallback)(
+  const getFailedRuleByKey = (0, import_react74.useCallback)(
     (key) => {
       return failedRuleByKey.get(key);
     },
@@ -19214,11 +19265,11 @@ var useRuleIndex = ({
 var useRuleIndex_default = useRuleIndex;
 
 // src/components/Select/hooks/useVirtualizedOptions/index.ts
-var import_react74 = require("react");
+var import_react75 = require("react");
 var import_react_virtual = require("@tanstack/react-virtual");
 var useVirtualizedOptions = (params) => {
   const { optionsLength, loading, onPaginate, overscan = 2 } = params;
-  const estimateSize = (0, import_react74.useMemo)(() => {
+  const estimateSize = (0, import_react75.useMemo)(() => {
     const estimateSize2 = params.estimateSize;
     if (estimateSize2 === void 0) {
       return () => 46;
@@ -19228,8 +19279,8 @@ var useVirtualizedOptions = (params) => {
     }
     return () => estimateSize2;
   }, [params.estimateSize]);
-  const listRef = (0, import_react74.useRef)(null);
-  const searchRef = (0, import_react74.useRef)(null);
+  const listRef = (0, import_react75.useRef)(null);
+  const searchRef = (0, import_react75.useRef)(null);
   const rowVirtualizer = (0, import_react_virtual.useVirtualizer)({
     count: optionsLength,
     getScrollElement: () => listRef.current,
@@ -19237,14 +19288,14 @@ var useVirtualizedOptions = (params) => {
     overscan
   });
   const virtualItems = rowVirtualizer.getVirtualItems();
-  (0, import_react74.useEffect)(() => {
+  (0, import_react75.useEffect)(() => {
     searchRef.current?.focus();
   }, [searchRef.current]);
-  const endIndex = (0, import_react74.useMemo)(
+  const endIndex = (0, import_react75.useMemo)(
     () => virtualItems[virtualItems.length - 1]?.index ?? 0,
     [virtualItems]
   );
-  (0, import_react74.useEffect)(() => {
+  (0, import_react75.useEffect)(() => {
     if (loading || optionsLength < 1) return;
     if (endIndex >= optionsLength - 1 - overscan) {
       onPaginate();
@@ -19260,10 +19311,10 @@ var useVirtualizedOptions = (params) => {
 var useVirtualizedOptions_default = useVirtualizedOptions;
 
 // src/components/Select/instances/multi/index.tsx
-var import_react78 = __toESM(require("react"));
+var import_react79 = __toESM(require("react"));
 
 // src/components/Select/components/Apply/index.tsx
-var import_react75 = require("react");
+var import_react76 = require("react");
 
 // src/components/Select/components/Apply/styles.ts
 var import_styled_components73 = __toESM(require("styled-components"));
@@ -19306,8 +19357,8 @@ var Apply = ({
   onClose,
   draft
 }) => {
-  const value = (0, import_react75.useMemo)(() => Array.from(draft.values()), [draft]);
-  const failedApplyRule = (0, import_react75.useMemo)(() => {
+  const value = (0, import_react76.useMemo)(() => Array.from(draft.values()), [draft]);
+  const failedApplyRule = (0, import_react76.useMemo)(() => {
     const rule = applyRules.find((rule2) => !rule2.allow(value));
     return rule;
   }, [value, applyRules]);
@@ -19350,7 +19401,7 @@ var Apply = ({
 var Apply_default = Apply;
 
 // src/components/Select/components/Scroll/index.tsx
-var import_react76 = __toESM(require("react"));
+var import_react77 = __toESM(require("react"));
 
 // src/components/Select/components/Scroll/styles.ts
 var import_styled_components74 = __toESM(require("styled-components"));
@@ -19478,7 +19529,7 @@ var OptionRow = import_styled_components74.default.div`
 
 // src/components/Select/components/Scroll/index.tsx
 var import_jsx_runtime362 = require("react/jsx-runtime");
-var Scroll = import_react76.default.forwardRef(
+var Scroll = import_react77.default.forwardRef(
   ({
     menuId,
     loading,
@@ -19568,7 +19619,7 @@ var Scroll = import_react76.default.forwardRef(
 var Scroll_default = Scroll;
 
 // src/components/Select/components/Search/index.tsx
-var import_react77 = __toESM(require("react"));
+var import_react78 = __toESM(require("react"));
 
 // src/components/Select/components/Search/styles.ts
 var import_styled_components75 = __toESM(require("styled-components"));
@@ -19614,9 +19665,9 @@ var SearchContainer = import_styled_components75.default.div`
 
 // src/components/Select/components/Search/index.tsx
 var import_jsx_runtime363 = require("react/jsx-runtime");
-var Search = import_react77.default.forwardRef(
+var Search = import_react78.default.forwardRef(
   ({ menuId, onKeyDown, value: [value, setValue], activeIndex }, ref) => {
-    const [inputRef, setInputRef] = (0, import_react77.useState)(null);
+    const [inputRef, setInputRef] = (0, import_react78.useState)(null);
     return /* @__PURE__ */ (0, import_jsx_runtime363.jsxs)(SearchContainer, { children: [
       /* @__PURE__ */ (0, import_jsx_runtime363.jsx)(
         "input",
@@ -19773,7 +19824,7 @@ var useDraftOptions = (draft, finder) => {
     debounced: [search]
   } = useDebouncedState_default("", () => {
   }, SEARCH_DEBOUNCE_MS);
-  const options = (0, import_react78.useMemo)(() => {
+  const options = (0, import_react79.useMemo)(() => {
     const options2 = Array.from(draft.values());
     if (!search) return options2;
     return finder(search, options2);
@@ -19786,7 +19837,7 @@ var useDraftOptions = (draft, finder) => {
   };
 };
 var useDraft = (value, getKey) => {
-  const [draft, setDraft] = (0, import_react78.useState)(() => ({
+  const [draft, setDraft] = (0, import_react79.useState)(() => ({
     options: buildMap(value, getKey),
     on: false
   }));
@@ -19898,8 +19949,8 @@ var SelectMultiOptions = ({
   const onUnselectAll = () => {
     setDraft(/* @__PURE__ */ new Map([]));
   };
-  const getIsSelected = (0, import_react78.useCallback)((key) => draft.has(key), [draft]);
-  return /* @__PURE__ */ (0, import_jsx_runtime364.jsxs)(import_react78.default.Fragment, { children: [
+  const getIsSelected = (0, import_react79.useCallback)((key) => draft.has(key), [draft]);
+  return /* @__PURE__ */ (0, import_jsx_runtime364.jsxs)(import_react79.default.Fragment, { children: [
     /* @__PURE__ */ (0, import_jsx_runtime364.jsxs)(Header14, { children: [
       /* @__PURE__ */ (0, import_jsx_runtime364.jsxs)(
         DraftSwitch,
@@ -19989,6 +20040,9 @@ var useMultiSelect = ({
   viewMode,
   borderless,
   paddingless,
+  zIndex,
+  placement,
+  boundRef,
   overscan,
   estimateSize,
   height,
@@ -19998,9 +20052,9 @@ var useMultiSelect = ({
   applyRules,
   ...buttonProps
 }) => {
-  const closedLabel = (0, import_react78.useMemo)(() => {
+  const closedLabel = (0, import_react79.useMemo)(() => {
     if (value.length < 1) {
-      return viewMode ? /* @__PURE__ */ (0, import_jsx_runtime364.jsx)(import_react78.default.Fragment, { children: "\xA0" }) : placeholder;
+      return viewMode ? /* @__PURE__ */ (0, import_jsx_runtime364.jsx)(import_react79.default.Fragment, { children: "\xA0" }) : placeholder;
     }
     return `H\xE1 ${value.length} op\xE7\xF5es selecionadas`;
   }, [placeholder, value.length, viewMode]);
@@ -20015,7 +20069,7 @@ var useMultiSelect = ({
 var multi_default = useMultiSelect;
 
 // src/components/Select/instances/single/index.tsx
-var import_react79 = __toESM(require("react"));
+var import_react80 = __toESM(require("react"));
 var import_jsx_runtime365 = require("react/jsx-runtime");
 var SelectSingleOptions = ({
   loader: loader2,
@@ -20076,11 +20130,11 @@ var SelectSingleOptions = ({
     onSelect: onToggleByIndex,
     scrollToIndex: rowVirtualizer.scrollToIndex
   });
-  const getIsSelected = (0, import_react79.useCallback)(
+  const getIsSelected = (0, import_react80.useCallback)(
     (key) => selectedKey === key,
     [selectedKey]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime365.jsxs)(import_react79.default.Fragment, { children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime365.jsxs)(import_react80.default.Fragment, { children: [
     /* @__PURE__ */ (0, import_jsx_runtime365.jsx)(
       Search_default2,
       {
@@ -20128,6 +20182,9 @@ var useSingleSelect = ({
   viewMode,
   borderless,
   paddingless,
+  zIndex,
+  placement,
+  boundRef,
   overscan,
   estimateSize,
   height,
@@ -20137,9 +20194,9 @@ var useSingleSelect = ({
   ...buttonProps
 }) => {
   const ClosedValueComponent = ValueComponent || OptionComponent;
-  const closedLabel = (0, import_react79.useMemo)(() => {
+  const closedLabel = (0, import_react80.useMemo)(() => {
     if (!value) {
-      return viewMode ? /* @__PURE__ */ (0, import_jsx_runtime365.jsx)(import_react79.default.Fragment, { children: "\xA0" }) : placeholder;
+      return viewMode ? /* @__PURE__ */ (0, import_jsx_runtime365.jsx)(import_react80.default.Fragment, { children: "\xA0" }) : placeholder;
     }
     return /* @__PURE__ */ (0, import_jsx_runtime365.jsx)(
       ClosedValueComponent,
@@ -20170,8 +20227,6 @@ var instances_default = useSelect2;
 // src/components/Select/styles.ts
 var import_styled_components77 = __toESM(require("styled-components"));
 var FloatingWrapper = import_styled_components77.default.div`
-  z-index: 1000;
-
   &,
   & > div {
     height: var(--height);
@@ -20337,10 +20392,12 @@ var OptionContainer = import_styled_components77.default.div`
 
 // src/components/Select/index.tsx
 var import_jsx_runtime366 = require("react/jsx-runtime");
-var Select2 = import_react80.default.forwardRef(
+var Select2 = import_react81.default.forwardRef(
   (props, ref) => {
-    const [open, setOpen] = (0, import_react80.useState)(false);
-    const id = props.id || (0, import_react80.useId)();
+    const [open, setOpen] = (0, import_react81.useState)(false);
+    const [triggerRef, setTriggerRef] = (0, import_react81.useState)(null);
+    const { placement, syncPlacement } = useInitialPlacement_default(props, triggerRef);
+    const id = props.id || (0, import_react81.useId)();
     const { isRequired, isInvalid: isInvalid2, isViewMode, isDisabled } = Form_default.useContext(
       props.name
     );
@@ -20350,14 +20407,15 @@ var Select2 = import_react80.default.forwardRef(
     const viewMode = isViewMode() || props.viewMode;
     const { floating, transition, interactions } = useFloatingMenu_default({
       open,
-      onOpenChange: setOpen
+      onOpenChange: setOpen,
+      placement
     });
-    const height = (0, import_react80.useMemo)(() => {
+    const height = (0, import_react81.useMemo)(() => {
       if (transition.status !== "open") return 0;
       if (props.height !== void 0) return props.height;
       return props.type === "single-select" ? 240 : 260;
     }, [transition.status !== "open", props.type, props.height]);
-    const menuId = (0, import_react80.useId)();
+    const menuId = (0, import_react81.useId)();
     const onTriggerKeyDown = (event) => {
       if (!open && ["ArrowDown", "ArrowUp", "Enter", " "].includes(event.key)) {
         event.preventDefault();
@@ -20366,7 +20424,20 @@ var Select2 = import_react80.default.forwardRef(
     };
     const { isEmpty, placeholder, Component: Component5, onClear, buttonProps } = instances_default(props);
     const clearEnabled = !isEmpty && props.clearable && !props.disabled && !props.readOnly;
-    return /* @__PURE__ */ (0, import_jsx_runtime366.jsxs)(import_react80.default.Fragment, { children: [
+    const setRef = (0, import_react81.useCallback)(
+      (node) => {
+        floating.refs.setReference(node);
+        setTriggerRef(node);
+        syncPlacement(node);
+        if (typeof ref === "function") {
+          ref(node);
+        } else if (ref) {
+          ref.current = node;
+        }
+      },
+      [floating.refs.setReference, ref, syncPlacement]
+    );
+    return /* @__PURE__ */ (0, import_jsx_runtime366.jsxs)(import_react81.default.Fragment, { children: [
       props.label !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime366.jsx)(Label11, { htmlFor: id, $viewMode: viewMode, children: props.label }),
       /* @__PURE__ */ (0, import_jsx_runtime366.jsxs)(
         Trigger,
@@ -20399,14 +20470,7 @@ var Select2 = import_react80.default.forwardRef(
               buttonProps.onKeyDown?.(event);
             }
           }),
-          ref: (node) => {
-            floating.refs.setReference(node);
-            if (typeof ref === "function") {
-              ref(node);
-            } else if (ref) {
-              ref.current = node;
-            }
-          },
+          ref: setRef,
           children: [
             /* @__PURE__ */ (0, import_jsx_runtime366.jsx)(TriggerValue, { children: placeholder }),
             !viewMode && /* @__PURE__ */ (0, import_jsx_runtime366.jsx)(
@@ -20431,13 +20495,14 @@ var Select2 = import_react80.default.forwardRef(
           ]
         }
       ),
-      transition.isMounted ? /* @__PURE__ */ (0, import_jsx_runtime366.jsx)(import_react81.FloatingPortal, { children: /* @__PURE__ */ (0, import_jsx_runtime366.jsx)(
+      transition.isMounted ? /* @__PURE__ */ (0, import_jsx_runtime366.jsx)(import_react82.FloatingPortal, { children: /* @__PURE__ */ (0, import_jsx_runtime366.jsx)(
         FloatingWrapper,
         {
           ref: floating.refs.setFloating,
           style: {
             ...floating.floatingStyles,
-            "--height": `${height}px`
+            "--height": `${height}px`,
+            zIndex: props.zIndex !== void 0 ? props.zIndex : 1e3
           },
           ...interactions.getFloatingProps(),
           children: /* @__PURE__ */ (0, import_jsx_runtime366.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime366.jsx)(
@@ -20458,7 +20523,7 @@ var Select_default3 = Object.assign(Select2, {
 });
 
 // src/components/Signature/index.tsx
-var import_react82 = require("react");
+var import_react83 = require("react");
 var import_react_signature_canvas = __toESM(require("react-signature-canvas"));
 
 // src/components/Signature/styles.ts
@@ -20564,12 +20629,12 @@ var SignatureInput = ({
   onEnd = voidFn,
   ...props
 }) => {
-  const [name, setName] = (0, import_react82.useState)("");
-  const [font, setFont] = (0, import_react82.useState)(FONTS[0]);
-  const [showPlaceholder, setShowPlaceholder] = (0, import_react82.useState)(true);
-  const [loading, setLoading] = (0, import_react82.useState)(false);
-  const [ref, setRef] = (0, import_react82.useState)(null);
-  (0, import_react82.useEffect)(() => {
+  const [name, setName] = (0, import_react83.useState)("");
+  const [font, setFont] = (0, import_react83.useState)(FONTS[0]);
+  const [showPlaceholder, setShowPlaceholder] = (0, import_react83.useState)(true);
+  const [loading, setLoading] = (0, import_react83.useState)(false);
+  const [ref, setRef] = (0, import_react83.useState)(null);
+  (0, import_react83.useEffect)(() => {
     if (!ref) return;
     const refreshValue = () => {
       if (ref.isEmpty() && !value) return;
@@ -20582,7 +20647,7 @@ var SignatureInput = ({
     window.addEventListener("resize", refreshValue);
     return () => window.removeEventListener("resize", refreshValue);
   }, [ref, value]);
-  const setByText = (0, import_react82.useCallback)(
+  const setByText = (0, import_react83.useCallback)(
     async (name2, font2) => {
       if (!ref) return;
       const trimmed = name2.trim();
@@ -20611,14 +20676,14 @@ var SignatureInput = ({
     },
     [ref]
   );
-  const onBeginHandler = (0, import_react82.useCallback)(
+  const onBeginHandler = (0, import_react83.useCallback)(
     (event) => {
       onBegin(event, ref);
       setShowPlaceholder(false);
     },
     [ref, onBegin]
   );
-  const onEndHandler = (0, import_react82.useCallback)(
+  const onEndHandler = (0, import_react83.useCallback)(
     (event) => {
       onEnd(event, ref);
       if (!ref || ref.isEmpty()) return;
@@ -20626,17 +20691,17 @@ var SignatureInput = ({
     },
     [ref, onEnd]
   );
-  const onApplyHandler = (0, import_react82.useCallback)(() => {
+  const onApplyHandler = (0, import_react83.useCallback)(() => {
     setByText(name, font);
   }, [name, font, setByText]);
-  const onClearHandler = (0, import_react82.useCallback)(() => {
+  const onClearHandler = (0, import_react83.useCallback)(() => {
     if (!ref) return;
     setShowPlaceholder(true);
     setName("");
     ref.clear();
     setValue("");
   }, [ref]);
-  const empty = (0, import_react82.useMemo)(() => !value && (!ref || ref.isEmpty()), [ref, value]);
+  const empty = (0, import_react83.useMemo)(() => !value && (!ref || ref.isEmpty()), [ref, value]);
   return /* @__PURE__ */ (0, import_jsx_runtime367.jsxs)(Container26, { children: [
     /* @__PURE__ */ (0, import_jsx_runtime367.jsx)(
       Input_default,
@@ -20720,13 +20785,13 @@ var SignatureInput = ({
 var Signature_default = SignatureInput;
 
 // src/components/Tabs/index.tsx
-var import_react88 = __toESM(require("react"));
+var import_react89 = __toESM(require("react"));
 
 // src/components/Tabs/components/ScrollButtons/index.tsx
-var import_react84 = __toESM(require("react"));
+var import_react85 = __toESM(require("react"));
 
 // src/components/Tabs/components/ScrollButton/index.tsx
-var import_react83 = require("react");
+var import_react84 = require("react");
 
 // src/components/Tabs/components/ScrollButton/styled.ts
 var import_styled_components79 = __toESM(require("styled-components"));
@@ -20757,7 +20822,7 @@ var import_jsx_runtime368 = require("react/jsx-runtime");
 var ScrollButton = (props) => {
   const { mode, visible, scrollRef } = props;
   const icon = `chevron_${mode}`;
-  const onClick = (0, import_react83.useCallback)(() => {
+  const onClick = (0, import_react84.useCallback)(() => {
     if (!scrollRef) return;
     scrollRef.scrollBy({
       left: mode === "left" ? -(scrollRef.scrollWidth + 1) : scrollRef.scrollWidth,
@@ -20810,10 +20875,10 @@ var Container28 = import_styled_components80.default.div`
 var import_jsx_runtime369 = require("react/jsx-runtime");
 var ScrollButtons = (props) => {
   const { activeTabIndex, tabsLength } = props;
-  const [ref, setRef] = (0, import_react84.useState)(null);
-  const [showLeftArrow, setShowLeftArrow] = (0, import_react84.useState)(false);
-  const [showRightArrow, setShowRightArrow] = (0, import_react84.useState)(false);
-  const checkScrollPosition = (0, import_react84.useCallback)(() => {
+  const [ref, setRef] = (0, import_react85.useState)(null);
+  const [showLeftArrow, setShowLeftArrow] = (0, import_react85.useState)(false);
+  const [showRightArrow, setShowRightArrow] = (0, import_react85.useState)(false);
+  const checkScrollPosition = (0, import_react85.useCallback)(() => {
     if (!ref) return;
     if (ref.scrollWidth > ref.offsetWidth) {
       const { scrollLeft, scrollWidth, clientWidth } = ref;
@@ -20824,12 +20889,12 @@ var ScrollButtons = (props) => {
       setShowRightArrow(false);
     }
   }, [ref]);
-  (0, import_react84.useEffect)(() => {
+  (0, import_react85.useEffect)(() => {
     checkScrollPosition();
     window.addEventListener("resize", checkScrollPosition);
     return () => window.removeEventListener("resize", checkScrollPosition);
   }, [checkScrollPosition, tabsLength]);
-  (0, import_react84.useEffect)(() => {
+  (0, import_react85.useEffect)(() => {
     if (!ref) return;
     if (ref.scrollWidth <= ref.offsetWidth) return;
     const element = ref.children[activeTabIndex];
@@ -20839,7 +20904,7 @@ var ScrollButtons = (props) => {
       inline: "nearest"
     });
   }, [activeTabIndex, ref]);
-  return /* @__PURE__ */ (0, import_jsx_runtime369.jsxs)(import_react84.default.Fragment, { children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime369.jsxs)(import_react85.default.Fragment, { children: [
     /* @__PURE__ */ (0, import_jsx_runtime369.jsx)(ScrollButton_default, { scrollRef: ref, mode: "left", visible: showLeftArrow }),
     /* @__PURE__ */ (0, import_jsx_runtime369.jsx)(
       Container28,
@@ -20862,7 +20927,7 @@ var ScrollButtons = (props) => {
 var ScrollButtons_default = ScrollButtons;
 
 // src/components/Tabs/components/TabItem/index.tsx
-var import_react87 = __toESM(require("react"));
+var import_react88 = __toESM(require("react"));
 
 // src/components/Tabs/functions.ts
 var sortTabs = (tabs, sorted = []) => {
@@ -20910,7 +20975,7 @@ var buildComponent = (component, provider) => {
 };
 
 // src/components/Tabs/components/TabItem/components/Close/index.tsx
-var import_react85 = require("react");
+var import_react86 = require("react");
 
 // src/components/Tabs/components/TabItem/components/Close/styles.ts
 var import_styled_components81 = __toESM(require("styled-components"));
@@ -20948,7 +21013,7 @@ var Close2 = (props) => {
     options: [options, setOptions]
   } = props;
   const onClose = props.onClose || (() => true);
-  const onClickClose = (0, import_react85.useCallback)(
+  const onClickClose = (0, import_react86.useCallback)(
     async (event) => {
       if (options.length === 1) return;
       const newOptions = [...options];
@@ -20977,7 +21042,7 @@ var Close2 = (props) => {
 var Close_default = Close2;
 
 // src/components/Tabs/components/TabItem/components/LabelItem/index.tsx
-var import_react86 = require("react");
+var import_react87 = require("react");
 
 // src/components/Tabs/components/TabItem/components/LabelItem/styled.ts
 var import_styled_components82 = __toESM(require("styled-components"));
@@ -21035,7 +21100,7 @@ var StyledTab = import_styled_components82.default.div`
 var import_jsx_runtime371 = require("react/jsx-runtime");
 var LabelItem = (props) => {
   const { children, onClick, primary, hasSiblings, internal } = props;
-  const [ref, setRef] = (0, import_react86.useState)(null);
+  const [ref, setRef] = (0, import_react87.useState)(null);
   return /* @__PURE__ */ (0, import_jsx_runtime371.jsx)(
     StyledTab,
     {
@@ -21091,7 +21156,7 @@ var Container29 = import_styled_components83.default.div`
 
 // src/components/Tabs/components/TabItem/index.tsx
 var import_jsx_runtime372 = require("react/jsx-runtime");
-var VoidClose = () => /* @__PURE__ */ (0, import_jsx_runtime372.jsx)(import_react87.default.Fragment, {});
+var VoidClose = () => /* @__PURE__ */ (0, import_jsx_runtime372.jsx)(import_react88.default.Fragment, {});
 var TabItem = (props) => {
   const {
     active: [active, setActive],
@@ -21101,7 +21166,7 @@ var TabItem = (props) => {
     alwaysOpen
   } = props;
   const CloseComponent = alwaysOpen || tabs.length < 2 ? VoidClose : Close_default;
-  return /* @__PURE__ */ (0, import_jsx_runtime372.jsx)(import_react87.default.Fragment, { children: sortedTabs.map(({ index, ...tab }) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime372.jsx)(import_react88.default.Fragment, { children: sortedTabs.map(({ index, ...tab }) => {
     const isActive = index === active;
     const hasSiblings = hasChildren(tabs, tab.group);
     const canClose = !props.internal && (!tab.primary || !hasSiblings);
@@ -21197,11 +21262,11 @@ var Tabs = import_styled_components84.default.div`
 
 // src/components/Tabs/index.tsx
 var import_jsx_runtime373 = require("react/jsx-runtime");
-var VoidProvider = (props) => /* @__PURE__ */ (0, import_jsx_runtime373.jsx)(import_react88.default.Fragment, { children: props.children });
+var VoidProvider = (props) => /* @__PURE__ */ (0, import_jsx_runtime373.jsx)(import_react89.default.Fragment, { children: props.children });
 var Component4 = (props) => {
   const components = props.components || {};
-  const [options, setOptions] = typeof props.options[1] === "function" ? props.options : (0, import_react88.useState)(props.options);
-  const [active, setActive] = Array.isArray(props.active) ? props.active : (0, import_react88.useState)(props.active);
+  const [options, setOptions] = typeof props.options[1] === "function" ? props.options : (0, import_react89.useState)(props.options);
+  const [active, setActive] = Array.isArray(props.active) ? props.active : (0, import_react89.useState)(props.active);
   const sortedTabs = sortTabs(options.map((tab, index) => ({ ...tab, index })));
   const activeTabIndex = sortedTabs.findIndex((tab) => tab.index === active);
   const divProps = filterObject(props, [
@@ -21215,7 +21280,7 @@ var Component4 = (props) => {
     "delimiter",
     "spacing"
   ]);
-  return /* @__PURE__ */ (0, import_jsx_runtime373.jsxs)(import_react88.default.Fragment, { children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime373.jsxs)(import_react89.default.Fragment, { children: [
     /* @__PURE__ */ (0, import_jsx_runtime373.jsx)(
       Tabs,
       {
@@ -21248,7 +21313,7 @@ var Component4 = (props) => {
     ),
     options.map((tab, index) => {
       if (tab.component === void 0) {
-        return /* @__PURE__ */ (0, import_jsx_runtime373.jsx)(import_react88.default.Fragment, {}, index);
+        return /* @__PURE__ */ (0, import_jsx_runtime373.jsx)(import_react89.default.Fragment, {}, index);
       }
       const Component5 = components[tab.component];
       const Provider7 = Component5.provider || VoidProvider;
@@ -21426,7 +21491,7 @@ var Toast = ({
 var Toast_default = Toast;
 
 // src/components/Zoom/index.tsx
-var import_react89 = __toESM(require("react"));
+var import_react90 = __toESM(require("react"));
 
 // src/components/Zoom/styles.ts
 var import_styled_components87 = __toESM(require("styled-components"));
@@ -21501,8 +21566,8 @@ var ModalContent = import_styled_components87.default.div`
 var import_jsx_runtime376 = require("react/jsx-runtime");
 var Zoom = (props) => {
   const { src, width, height, ...imgProps } = props;
-  const [modalOpened, setModalOpened] = (0, import_react89.useState)(false);
-  return /* @__PURE__ */ (0, import_jsx_runtime376.jsxs)(import_react89.default.Fragment, { children: [
+  const [modalOpened, setModalOpened] = (0, import_react90.useState)(false);
+  return /* @__PURE__ */ (0, import_jsx_runtime376.jsxs)(import_react90.default.Fragment, { children: [
     /* @__PURE__ */ (0, import_jsx_runtime376.jsxs)(
       Container32,
       {

package/dist/index.mjs

@@ -18927,7 +18927,7 @@ var ProgressBar = ({ type, value, ...props }) => {
 var ProgressBar_default = ProgressBar;
 
 // src/components/Select/index.tsx
-import React348, { useId, useMemo as useMemo13, useState as useState30 } from "react";
+import React348, { useCallback as useCallback12, useId, useMemo as useMemo13, useState as useState31 } from "react";
 import { FloatingPortal as FloatingPortal2 } from "@floating-ui/react";
 
 // src/components/Select/hooks/useAsyncOptions/index.ts
@@ -19010,11 +19010,15 @@ import {
   useInteractions as useInteractions2,
   useTransitionStatus
 } from "@floating-ui/react";
-var useFloatingMenu = ({ open, onOpenChange }) => {
+var useFloatingMenu = ({
+  open,
+  onOpenChange,
+  placement = "bottom"
+}) => {
   const floating = useFloating2({
     open,
     onOpenChange,
-    placement: "bottom-start",
+    placement: `${placement}-start`,
     whileElementsMounted: autoUpdate2,
     middleware: [
       flip2(),
@@ -19043,12 +19047,59 @@ var useFloatingMenu = ({ open, onOpenChange }) => {
 };
 var useFloatingMenu_default = useFloatingMenu;
 
+// src/components/Select/hooks/useInitialPlacement/index.ts
+import { useCallback as useCallback7, useEffect as useEffect23, useLayoutEffect, useState as useState27 } from "react";
+var useIsomorphicLayoutEffect = typeof window !== "undefined" ? useLayoutEffect : useEffect23;
+var resolveSelectPlacement = (triggerRect, context) => {
+  const midpoint = context.top + context.height / 2;
+  return triggerRect.top >= midpoint ? "top" : "bottom";
+};
+var useInitialPlacement = (props, referenceNode) => {
+  const [placement, setPlacement] = useState27(
+    props.placement ?? "bottom"
+  );
+  const syncPlacement = useCallback7(
+    (node) => {
+      if (props.placement !== void 0) {
+        setPlacement(props.placement);
+        return;
+      }
+      if (!node) return;
+      const context = props.boundRef ? props.boundRef.getBoundingClientRect() : {
+        top: 0,
+        height: window.innerHeight
+      };
+      const nextPlacement = resolveSelectPlacement(
+        node.getBoundingClientRect(),
+        context
+      );
+      setPlacement(nextPlacement);
+    },
+    [props.boundRef, props.placement]
+  );
+  useIsomorphicLayoutEffect(() => {
+    syncPlacement(referenceNode);
+    if (props.placement !== void 0 || !referenceNode) return;
+    const onUpdate = () => {
+      syncPlacement(referenceNode);
+    };
+    window.addEventListener("scroll", onUpdate, true);
+    window.addEventListener("resize", onUpdate);
+    return () => {
+      window.removeEventListener("scroll", onUpdate, true);
+      window.removeEventListener("resize", onUpdate);
+    };
+  }, [referenceNode, syncPlacement, props.placement]);
+  return { placement, syncPlacement };
+};
+var useInitialPlacement_default = useInitialPlacement;
+
 // src/components/Select/hooks/useListNavigation/index.ts
-import { useCallback as useCallback7, useEffect as useEffect23, useMemo as useMemo7, useState as useState27 } from "react";
+import { useCallback as useCallback8, useEffect as useEffect24, useMemo as useMemo7, useState as useState28 } from "react";
 var INVALID_INDEX = -1;
 var useActiveIndex = (itemCount, scrollToIndex) => {
-  const [activeIndex, setActiveIndex] = useState27(INVALID_INDEX);
-  useEffect23(() => {
+  const [activeIndex, setActiveIndex] = useState28(INVALID_INDEX);
+  useEffect24(() => {
     setActiveIndex((current) => {
       if (current >= itemCount) return INVALID_INDEX;
       return current;
@@ -19080,7 +19131,7 @@ var useListNavigation = ({
     }
     return INVALID_INDEX;
   }, [isItemDisabled, itemCount]);
-  const findNextEnabled = useCallback7(
+  const findNextEnabled = useCallback8(
     (from, direction) => {
       let index = from;
       while (index >= 0 && index < itemCount) {
@@ -19091,7 +19142,7 @@ var useListNavigation = ({
     },
     [isItemDisabled, itemCount]
   );
-  const onKeyDown = useCallback7(
+  const onKeyDown = useCallback8(
     (event) => {
       if (event.key === "ArrowDown") {
         event.preventDefault();
@@ -19144,7 +19195,7 @@ var useListNavigation = ({
 var useListNavigation_default = useListNavigation;
 
 // src/components/Select/hooks/useRuleIndex/index.ts
-import { useCallback as useCallback8, useMemo as useMemo8 } from "react";
+import { useCallback as useCallback9, useMemo as useMemo8 } from "react";
 var useRuleIndex = ({
   options,
   getKey,
@@ -19161,7 +19212,7 @@ var useRuleIndex = ({
     });
     return failedRuleByKey2;
   }, [getKey, options, rules]);
-  const getFailedRuleByKey = useCallback8(
+  const getFailedRuleByKey = useCallback9(
     (key) => {
       return failedRuleByKey.get(key);
     },
@@ -19175,7 +19226,7 @@ var useRuleIndex = ({
 var useRuleIndex_default = useRuleIndex;
 
 // src/components/Select/hooks/useVirtualizedOptions/index.ts
-import { useEffect as useEffect24, useMemo as useMemo9, useRef as useRef4 } from "react";
+import { useEffect as useEffect25, useMemo as useMemo9, useRef as useRef4 } from "react";
 import { useVirtualizer } from "@tanstack/react-virtual";
 var useVirtualizedOptions = (params) => {
   const { optionsLength, loading, onPaginate, overscan = 2 } = params;
@@ -19198,14 +19249,14 @@ var useVirtualizedOptions = (params) => {
     overscan
   });
   const virtualItems = rowVirtualizer.getVirtualItems();
-  useEffect24(() => {
+  useEffect25(() => {
     searchRef.current?.focus();
   }, [searchRef.current]);
   const endIndex = useMemo9(
     () => virtualItems[virtualItems.length - 1]?.index ?? 0,
     [virtualItems]
   );
-  useEffect24(() => {
+  useEffect25(() => {
     if (loading || optionsLength < 1) return;
     if (endIndex >= optionsLength - 1 - overscan) {
       onPaginate();
@@ -19221,7 +19272,7 @@ var useVirtualizedOptions = (params) => {
 var useVirtualizedOptions_default = useVirtualizedOptions;
 
 // src/components/Select/instances/multi/index.tsx
-import React346, { useCallback as useCallback9, useMemo as useMemo11, useState as useState29 } from "react";
+import React346, { useCallback as useCallback10, useMemo as useMemo11, useState as useState30 } from "react";
 
 // src/components/Select/components/Apply/index.tsx
 import { useMemo as useMemo10 } from "react";
@@ -19529,7 +19580,7 @@ var Scroll = React344.forwardRef(
 var Scroll_default = Scroll;
 
 // src/components/Select/components/Search/index.tsx
-import React345, { useState as useState28 } from "react";
+import React345, { useState as useState29 } from "react";
 
 // src/components/Select/components/Search/styles.ts
 import styled72 from "styled-components";
@@ -19577,7 +19628,7 @@ var SearchContainer = styled72.div`
 import { jsx as jsx363, jsxs as jsxs185 } from "react/jsx-runtime";
 var Search = React345.forwardRef(
   ({ menuId, onKeyDown, value: [value, setValue], activeIndex }, ref) => {
-    const [inputRef, setInputRef] = useState28(null);
+    const [inputRef, setInputRef] = useState29(null);
     return /* @__PURE__ */ jsxs185(SearchContainer, { children: [
       /* @__PURE__ */ jsx363(
         "input",
@@ -19747,7 +19798,7 @@ var useDraftOptions = (draft, finder) => {
   };
 };
 var useDraft = (value, getKey) => {
-  const [draft, setDraft] = useState29(() => ({
+  const [draft, setDraft] = useState30(() => ({
     options: buildMap(value, getKey),
     on: false
   }));
@@ -19859,7 +19910,7 @@ var SelectMultiOptions = ({
   const onUnselectAll = () => {
     setDraft(/* @__PURE__ */ new Map([]));
   };
-  const getIsSelected = useCallback9((key) => draft.has(key), [draft]);
+  const getIsSelected = useCallback10((key) => draft.has(key), [draft]);
   return /* @__PURE__ */ jsxs186(React346.Fragment, { children: [
     /* @__PURE__ */ jsxs186(Header14, { children: [
       /* @__PURE__ */ jsxs186(
@@ -19950,6 +20001,9 @@ var useMultiSelect = ({
   viewMode,
   borderless,
   paddingless,
+  zIndex,
+  placement,
+  boundRef,
   overscan,
   estimateSize,
   height,
@@ -19976,7 +20030,7 @@ var useMultiSelect = ({
 var multi_default = useMultiSelect;
 
 // src/components/Select/instances/single/index.tsx
-import React347, { useCallback as useCallback10, useMemo as useMemo12 } from "react";
+import React347, { useCallback as useCallback11, useMemo as useMemo12 } from "react";
 import { jsx as jsx365, jsxs as jsxs187 } from "react/jsx-runtime";
 var SelectSingleOptions = ({
   loader: loader2,
@@ -20037,7 +20091,7 @@ var SelectSingleOptions = ({
     onSelect: onToggleByIndex,
     scrollToIndex: rowVirtualizer.scrollToIndex
   });
-  const getIsSelected = useCallback10(
+  const getIsSelected = useCallback11(
     (key) => selectedKey === key,
     [selectedKey]
   );
@@ -20089,6 +20143,9 @@ var useSingleSelect = ({
   viewMode,
   borderless,
   paddingless,
+  zIndex,
+  placement,
+  boundRef,
   overscan,
   estimateSize,
   height,
@@ -20131,8 +20188,6 @@ var instances_default = useSelect2;
 // src/components/Select/styles.ts
 import styled74, { css as css49 } from "styled-components";
 var FloatingWrapper = styled74.div`
-  z-index: 1000;
-
   &,
   & > div {
     height: var(--height);
@@ -20300,7 +20355,9 @@ var OptionContainer = styled74.div`
 import { jsx as jsx366, jsxs as jsxs188 } from "react/jsx-runtime";
 var Select2 = React348.forwardRef(
   (props, ref) => {
-    const [open, setOpen] = useState30(false);
+    const [open, setOpen] = useState31(false);
+    const [triggerRef, setTriggerRef] = useState31(null);
+    const { placement, syncPlacement } = useInitialPlacement_default(props, triggerRef);
     const id = props.id || useId();
     const { isRequired, isInvalid: isInvalid2, isViewMode, isDisabled } = Form_default.useContext(
       props.name
@@ -20311,7 +20368,8 @@ var Select2 = React348.forwardRef(
     const viewMode = isViewMode() || props.viewMode;
     const { floating, transition, interactions } = useFloatingMenu_default({
       open,
-      onOpenChange: setOpen
+      onOpenChange: setOpen,
+      placement
     });
     const height = useMemo13(() => {
       if (transition.status !== "open") return 0;
@@ -20327,6 +20385,19 @@ var Select2 = React348.forwardRef(
     };
     const { isEmpty, placeholder, Component: Component5, onClear, buttonProps } = instances_default(props);
     const clearEnabled = !isEmpty && props.clearable && !props.disabled && !props.readOnly;
+    const setRef = useCallback12(
+      (node) => {
+        floating.refs.setReference(node);
+        setTriggerRef(node);
+        syncPlacement(node);
+        if (typeof ref === "function") {
+          ref(node);
+        } else if (ref) {
+          ref.current = node;
+        }
+      },
+      [floating.refs.setReference, ref, syncPlacement]
+    );
     return /* @__PURE__ */ jsxs188(React348.Fragment, { children: [
       props.label !== void 0 && /* @__PURE__ */ jsx366(Label11, { htmlFor: id, $viewMode: viewMode, children: props.label }),
       /* @__PURE__ */ jsxs188(
@@ -20360,14 +20431,7 @@ var Select2 = React348.forwardRef(
               buttonProps.onKeyDown?.(event);
             }
           }),
-          ref: (node) => {
-            floating.refs.setReference(node);
-            if (typeof ref === "function") {
-              ref(node);
-            } else if (ref) {
-              ref.current = node;
-            }
-          },
+          ref: setRef,
           children: [
             /* @__PURE__ */ jsx366(TriggerValue, { children: placeholder }),
             !viewMode && /* @__PURE__ */ jsx366(
@@ -20398,7 +20462,8 @@ var Select2 = React348.forwardRef(
           ref: floating.refs.setFloating,
           style: {
             ...floating.floatingStyles,
-            "--height": `${height}px`
+            "--height": `${height}px`,
+            zIndex: props.zIndex !== void 0 ? props.zIndex : 1e3
           },
           ...interactions.getFloatingProps(),
           children: /* @__PURE__ */ jsx366("div", { children: /* @__PURE__ */ jsx366(
@@ -20419,7 +20484,7 @@ var Select_default3 = Object.assign(Select2, {
 });
 
 // src/components/Signature/index.tsx
-import { useCallback as useCallback11, useEffect as useEffect25, useMemo as useMemo14, useState as useState31 } from "react";
+import { useCallback as useCallback13, useEffect as useEffect26, useMemo as useMemo14, useState as useState32 } from "react";
 import SignatureCanvas from "react-signature-canvas";
 
 // src/components/Signature/styles.ts
@@ -20525,12 +20590,12 @@ var SignatureInput = ({
   onEnd = voidFn,
   ...props
 }) => {
-  const [name, setName] = useState31("");
-  const [font, setFont] = useState31(FONTS[0]);
-  const [showPlaceholder, setShowPlaceholder] = useState31(true);
-  const [loading, setLoading] = useState31(false);
-  const [ref, setRef] = useState31(null);
-  useEffect25(() => {
+  const [name, setName] = useState32("");
+  const [font, setFont] = useState32(FONTS[0]);
+  const [showPlaceholder, setShowPlaceholder] = useState32(true);
+  const [loading, setLoading] = useState32(false);
+  const [ref, setRef] = useState32(null);
+  useEffect26(() => {
     if (!ref) return;
     const refreshValue = () => {
       if (ref.isEmpty() && !value) return;
@@ -20543,7 +20608,7 @@ var SignatureInput = ({
     window.addEventListener("resize", refreshValue);
     return () => window.removeEventListener("resize", refreshValue);
   }, [ref, value]);
-  const setByText = useCallback11(
+  const setByText = useCallback13(
     async (name2, font2) => {
       if (!ref) return;
       const trimmed = name2.trim();
@@ -20572,14 +20637,14 @@ var SignatureInput = ({
     },
     [ref]
   );
-  const onBeginHandler = useCallback11(
+  const onBeginHandler = useCallback13(
     (event) => {
       onBegin(event, ref);
       setShowPlaceholder(false);
     },
     [ref, onBegin]
   );
-  const onEndHandler = useCallback11(
+  const onEndHandler = useCallback13(
     (event) => {
       onEnd(event, ref);
       if (!ref || ref.isEmpty()) return;
@@ -20587,10 +20652,10 @@ var SignatureInput = ({
     },
     [ref, onEnd]
   );
-  const onApplyHandler = useCallback11(() => {
+  const onApplyHandler = useCallback13(() => {
     setByText(name, font);
   }, [name, font, setByText]);
-  const onClearHandler = useCallback11(() => {
+  const onClearHandler = useCallback13(() => {
     if (!ref) return;
     setShowPlaceholder(true);
     setName("");
@@ -20681,13 +20746,13 @@ var SignatureInput = ({
 var Signature_default = SignatureInput;
 
 // src/components/Tabs/index.tsx
-import React353, { useState as useState34 } from "react";
+import React353, { useState as useState35 } from "react";
 
 // src/components/Tabs/components/ScrollButtons/index.tsx
-import React349, { useCallback as useCallback13, useEffect as useEffect26, useState as useState32 } from "react";
+import React349, { useCallback as useCallback15, useEffect as useEffect27, useState as useState33 } from "react";
 
 // src/components/Tabs/components/ScrollButton/index.tsx
-import { useCallback as useCallback12 } from "react";
+import { useCallback as useCallback14 } from "react";
 
 // src/components/Tabs/components/ScrollButton/styled.ts
 import styled76 from "styled-components";
@@ -20718,7 +20783,7 @@ import { jsx as jsx368 } from "react/jsx-runtime";
 var ScrollButton = (props) => {
   const { mode, visible, scrollRef } = props;
   const icon = `chevron_${mode}`;
-  const onClick = useCallback12(() => {
+  const onClick = useCallback14(() => {
     if (!scrollRef) return;
     scrollRef.scrollBy({
       left: mode === "left" ? -(scrollRef.scrollWidth + 1) : scrollRef.scrollWidth,
@@ -20771,10 +20836,10 @@ var Container28 = styled77.div`
 import { jsx as jsx369, jsxs as jsxs190 } from "react/jsx-runtime";
 var ScrollButtons = (props) => {
   const { activeTabIndex, tabsLength } = props;
-  const [ref, setRef] = useState32(null);
-  const [showLeftArrow, setShowLeftArrow] = useState32(false);
-  const [showRightArrow, setShowRightArrow] = useState32(false);
-  const checkScrollPosition = useCallback13(() => {
+  const [ref, setRef] = useState33(null);
+  const [showLeftArrow, setShowLeftArrow] = useState33(false);
+  const [showRightArrow, setShowRightArrow] = useState33(false);
+  const checkScrollPosition = useCallback15(() => {
     if (!ref) return;
     if (ref.scrollWidth > ref.offsetWidth) {
       const { scrollLeft, scrollWidth, clientWidth } = ref;
@@ -20785,12 +20850,12 @@ var ScrollButtons = (props) => {
       setShowRightArrow(false);
     }
   }, [ref]);
-  useEffect26(() => {
+  useEffect27(() => {
     checkScrollPosition();
     window.addEventListener("resize", checkScrollPosition);
     return () => window.removeEventListener("resize", checkScrollPosition);
   }, [checkScrollPosition, tabsLength]);
-  useEffect26(() => {
+  useEffect27(() => {
     if (!ref) return;
     if (ref.scrollWidth <= ref.offsetWidth) return;
     const element = ref.children[activeTabIndex];
@@ -20871,7 +20936,7 @@ var buildComponent = (component, provider) => {
 };
 
 // src/components/Tabs/components/TabItem/components/Close/index.tsx
-import { useCallback as useCallback14 } from "react";
+import { useCallback as useCallback16 } from "react";
 
 // src/components/Tabs/components/TabItem/components/Close/styles.ts
 import styled78 from "styled-components";
@@ -20909,7 +20974,7 @@ var Close2 = (props) => {
     options: [options, setOptions]
   } = props;
   const onClose = props.onClose || (() => true);
-  const onClickClose = useCallback14(
+  const onClickClose = useCallback16(
     async (event) => {
       if (options.length === 1) return;
       const newOptions = [...options];
@@ -20938,7 +21003,7 @@ var Close2 = (props) => {
 var Close_default = Close2;
 
 // src/components/Tabs/components/TabItem/components/LabelItem/index.tsx
-import { useState as useState33 } from "react";
+import { useState as useState34 } from "react";
 
 // src/components/Tabs/components/TabItem/components/LabelItem/styled.ts
 import styled79, { css as css51 } from "styled-components";
@@ -20996,7 +21061,7 @@ var StyledTab = styled79.div`
 import { jsx as jsx371 } from "react/jsx-runtime";
 var LabelItem = (props) => {
   const { children, onClick, primary, hasSiblings, internal } = props;
-  const [ref, setRef] = useState33(null);
+  const [ref, setRef] = useState34(null);
   return /* @__PURE__ */ jsx371(
     StyledTab,
     {
@@ -21161,8 +21226,8 @@ import { jsx as jsx373, jsxs as jsxs192 } from "react/jsx-runtime";
 var VoidProvider = (props) => /* @__PURE__ */ jsx373(React353.Fragment, { children: props.children });
 var Component4 = (props) => {
   const components = props.components || {};
-  const [options, setOptions] = typeof props.options[1] === "function" ? props.options : useState34(props.options);
-  const [active, setActive] = Array.isArray(props.active) ? props.active : useState34(props.active);
+  const [options, setOptions] = typeof props.options[1] === "function" ? props.options : useState35(props.options);
+  const [active, setActive] = Array.isArray(props.active) ? props.active : useState35(props.active);
   const sortedTabs = sortTabs(options.map((tab, index) => ({ ...tab, index })));
   const activeTabIndex = sortedTabs.findIndex((tab) => tab.index === active);
   const divProps = filterObject(props, [
@@ -21387,7 +21452,7 @@ var Toast = ({
 var Toast_default = Toast;
 
 // src/components/Zoom/index.tsx
-import React354, { useState as useState35 } from "react";
+import React354, { useState as useState36 } from "react";
 
 // src/components/Zoom/styles.ts
 import styled84 from "styled-components";
@@ -21462,7 +21527,7 @@ var ModalContent = styled84.div`
 import { jsx as jsx376, jsxs as jsxs194 } from "react/jsx-runtime";
 var Zoom = (props) => {
   const { src, width, height, ...imgProps } = props;
-  const [modalOpened, setModalOpened] = useState35(false);
+  const [modalOpened, setModalOpened] = useState36(false);
   return /* @__PURE__ */ jsxs194(React354.Fragment, { children: [
     /* @__PURE__ */ jsxs194(
       Container32,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mw-kit/mw-ui",
-  "version": "1.10.2",
+  "version": "1.10.3",
   "description": "Made with create-react-library",
   "author": "fmgusmao",
   "license": "MIT",