reshaped 3.9.0-canary.1 → 3.9.0-canary.2

package/dist/components/FileUpload/FileUpload.js

@@ -1,9 +1,9 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { classNames } from "../../utilities/props.js";
-import View from "../View/index.js";
 import HiddenVisually from "../HiddenVisually/index.js";
+import View from "../View/index.js";
 import useToggle from "../../hooks/useToggle.js";
+import { classNames } from "../../utilities/props.js";
 import s from "./FileUpload.module.css";
 export const FileUploadTrigger = (props) => {
     const { children } = props;

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

@@ -1,5 +1,5 @@
-import type React from "react";
 import type { ViewProps } from "../View";
+import type React from "react";
 import type * as G from "../../types/global";
 export type Props = {
     /** Name of the input element */

package/dist/components/Flyout/Flyout.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import FlyoutUncontrolled from "./FlyoutUncontrolled.js";
 import FlyoutControlled from "./FlyoutControlled.js";
+import FlyoutUncontrolled from "./FlyoutUncontrolled.js";
 const Flyout = (props) => {
     const { active } = props;
     if (typeof active === "boolean")

package/dist/components/Flyout/FlyoutContent.js

@@ -1,14 +1,14 @@
 "use client";
 import { jsx as _jsx } from "react/jsx-runtime";
 import React from "react";
-import { classNames } from "../../utilities/props.js";
-import { rafThrottle } from "../../utilities/helpers.js";
-import useIsomorphicLayoutEffect from "../../hooks/useIsomorphicLayoutEffect.js";
 import Portal from "../_private/Portal/index.js";
+import useIsomorphicLayoutEffect from "../../hooks/useIsomorphicLayoutEffect.js";
 import { findClosestPositionContainer, findClosestScrollableContainer } from "../../utilities/dom/index.js";
-import cooldown from "./utilities/cooldown.js";
+import { rafThrottle } from "../../utilities/helpers.js";
+import { classNames } from "../../utilities/props.js";
 import { useFlyoutContext, ContentProvider } from "./Flyout.context.js";
 import s from "./Flyout.module.css";
+import cooldown from "./utilities/cooldown.js";
 const FlyoutContent = (props) => {
     const { children, className, attributes } = props;
     const { flyout, id, flyoutElRef, triggerElRef, handleClose, handleTransitionEnd, handleTransitionStart, triggerType, handleMouseEnter, handleMouseLeave, handleContentMouseDown, handleContentMouseUp, contentClassName, contentAttributes, contentGap, trapFocusMode, disableContentHover, autoFocus, width, containerRef: passedContainerRef, isSubmenu, } = useFlyoutContext();

package/dist/components/Flyout/FlyoutControlled.js

@@ -1,19 +1,19 @@
 "use client";
 import { jsx as _jsx } from "react/jsx-runtime";
 import React from "react";
-import { TrapFocus, checkKeyboardMode } from "../../utilities/a11y/index.js";
 import useIsDismissible from "../../hooks/_private/useIsDismissible.js";
 import useElementId from "../../hooks/useElementId.js";
-import useIsomorphicLayoutEffect from "../../hooks/useIsomorphicLayoutEffect.js";
+import useHandlerRef from "../../hooks/useHandlerRef.js";
 import useHotkeys from "../../hooks/useHotkeys.js";
+import useIsomorphicLayoutEffect from "../../hooks/useIsomorphicLayoutEffect.js";
 import useOnClickOutside from "../../hooks/useOnClickOutside.js";
 import useRTL from "../../hooks/useRTL.js";
+import { TrapFocus, checkKeyboardMode } from "../../utilities/a11y/index.js";
 import { checkTransitions, onNextFrame } from "../../utilities/animation.js";
-import useFlyout from "./useFlyout.js";
 import * as timeouts from "./Flyout.constants.js";
-import cooldown from "./utilities/cooldown.js";
 import { Provider, useFlyoutTriggerContext, useFlyoutContext, useFlyoutContentContext, } from "./Flyout.context.js";
-import useHandlerRef from "../../hooks/useHandlerRef.js";
+import useFlyout from "./useFlyout.js";
+import cooldown from "./utilities/cooldown.js";
 const FlyoutControlled = (props) => {
     const { triggerType = "click", groupTimeouts, onOpen, onClose, children, disabled, forcePosition, fallbackAdjustLayout, fallbackMinWidth, fallbackMinHeight, trapFocusMode = "dialog", width, disableHideAnimation, disableContentHover, disableCloseOnOutsideClick, autoFocus = true, originCoordinates, contentGap = 2, contentShift, contentClassName, contentAttributes, position: passedPosition, active: passedActive, id: passedId, instanceRef, containerRef, initialFocusRef, positionRef, } = props;
     const fallbackPositions = props.fallbackPositions === false || forcePosition ? [] : props.fallbackPositions;

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

@@ -1,6 +1,6 @@
 import Flyout from "./Flyout";
-import FlyoutTrigger from "./FlyoutTrigger";
 import FlyoutContent from "./FlyoutContent";
+import FlyoutTrigger from "./FlyoutTrigger";
 declare const FlyoutRoot: typeof Flyout & {
     Trigger: typeof FlyoutTrigger;
     Content: typeof FlyoutContent;

package/dist/components/Flyout/index.js

@@ -1,6 +1,6 @@
 import Flyout from "./Flyout.js";
-import FlyoutTrigger from "./FlyoutTrigger.js";
 import FlyoutContent from "./FlyoutContent.js";
+import FlyoutTrigger from "./FlyoutTrigger.js";
 const FlyoutRoot = Flyout;
 FlyoutRoot.Trigger = FlyoutTrigger;
 FlyoutRoot.Content = FlyoutContent;

package/dist/components/Flyout/useFlyout.d.ts

@@ -1,6 +1,6 @@
 import React from "react";
-import type * as G from "../../types/global";
 import type * as T from "./Flyout.types";
+import type * as G from "../../types/global";
 type UseFlyout = (args: Pick<T.Props, "width" | "position" | "defaultActive" | "fallbackAdjustLayout" | "fallbackMinWidth" | "fallbackMinHeight" | "contentGap" | "contentShift"> & {
     fallbackPositions?: T.Position[];
     container?: HTMLElement | null;

package/dist/components/Flyout/useFlyout.js

@@ -1,7 +1,7 @@
 import React from "react";
 import useRTL from "../../hooks/useRTL.js";
-import flyout from "./utilities/flyout.js";
 import { defaultStyles, resetStyles } from "./Flyout.constants.js";
+import flyout from "./utilities/flyout.js";
 const flyoutReducer = (state, action) => {
     switch (action.type) {
         case "render":

package/dist/components/Flyout/utilities/flyout.d.ts

@@ -1,5 +1,5 @@
-import type * as G from "../../../types/global";
 import type * as T from "../Flyout.types";
+import type * as G from "../../../types/global";
 /**
  * Set position of the target element to fit on the screen
  */

package/dist/components/Flyout/utilities/flyout.js

@@ -1,8 +1,8 @@
 import { getRectFromCoordinates, getShadowRoot, findClosestPositionContainer } from "../../../utilities/dom/index.js";
+import { resetStyles } from "../Flyout.constants.js";
 import calculatePosition from "./calculatePosition.js";
 import getPositionFallbacks from "./getPositionFallbacks.js";
 import isFullyVisible from "./isFullyVisible.js";
-import { resetStyles } from "../Flyout.constants.js";
 /**
  * Set position of the target element to fit on the screen
  */

package/dist/components/FormControl/FormControlCaption.js

@@ -2,8 +2,8 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import Text from "../Text/index.js";
 import { useFormControlPrivate } from "./FormControl.context.js";
-import { getCaptionId } from "./FormControl.utilities.js";
 import s from "./FormControl.module.css";
+import { getCaptionId } from "./FormControl.utilities.js";
 const FormControlCaption = (props) => {
     const { children, variant, disabled } = props;
     const { attributes, size, helperRef, errorRef } = useFormControlPrivate();

package/dist/components/FormControl/FormControlLabel.js

@@ -1,7 +1,7 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useFormControlPrivate } from "./FormControl.context.js";
 import Text from "../Text/index.js";
+import { useFormControlPrivate } from "./FormControl.context.js";
 import s from "./FormControl.module.css";
 const FormControlLabel = (props) => {
     const { children } = props;

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

@@ -1,7 +1,7 @@
 import FormControl from "./FormControl";
-import FormControlLabel from "./FormControlLabel";
-import FormControlHelper from "./FormControlHelper";
 import FormControlError from "./FormControlError";
+import FormControlHelper from "./FormControlHelper";
+import FormControlLabel from "./FormControlLabel";
 declare const FormControlRoot: typeof FormControl & {
     Label: typeof FormControlLabel;
     Helper: typeof FormControlHelper;

package/dist/components/FormControl/index.js

@@ -1,7 +1,7 @@
 import FormControl from "./FormControl.js";
-import FormControlLabel from "./FormControlLabel.js";
-import FormControlHelper from "./FormControlHelper.js";
 import FormControlError from "./FormControlError.js";
+import FormControlHelper from "./FormControlHelper.js";
+import FormControlLabel from "./FormControlLabel.js";
 const FormControlRoot = FormControl;
 FormControlRoot.Label = FormControlLabel;
 FormControlRoot.Helper = FormControlHelper;

package/dist/components/Grid/Grid.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { classNames, responsiveVariables, responsivePropDependency } from "../../utilities/props.js";
 import { resolveMixin } from "../../styles/mixin.js";
+import { classNames, responsiveVariables, responsivePropDependency } from "../../utilities/props.js";
 import s from "./Grid.module.css";
 export const GridItem = (props) => {
     const { area, colStart, colEnd, colSpan, rowStart, rowEnd, rowSpan, children, className, 

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

@@ -1,7 +1,7 @@
-import type React from "react";
 import type { Property } from "csstype";
-import type * as G from "../../types/global";
+import type React from "react";
 import type * as TStyles from "../../styles/types";
+import type * as G from "../../types/global";
 export type Props<TagName extends keyof React.JSX.IntrinsicElements = "div"> = {
     /** Gap between grid items */
     gap?: G.Responsive<number>;

package/dist/components/Icon/Icon.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import React from "react";
-import { classNames } from "../../utilities/props.js";
 import { resolveMixin } from "../../styles/mixin.js";
+import { classNames } from "../../utilities/props.js";
 import s from "./Icon.module.css";
 const Icon = (props) => {
     const { svg: Component, className, color, size = "1em", autoWidth, attributes } = props;

package/dist/components/Image/Image.js

@@ -1,8 +1,8 @@
 "use client";
 import { jsx as _jsx } from "react/jsx-runtime";
 import React from "react";
-import { classNames } from "../../utilities/props.js";
 import { resolveMixin } from "../../styles/mixin.js";
+import { classNames } from "../../utilities/props.js";
 import s from "./Image.module.css";
 const Image = (props) => {
     const { src, alt, width, maxWidth, height, aspectRatio, onLoad, onError, fallback, displayMode = "cover", borderRadius, className, attributes, imageAttributes: passedImageAttributes, renderImage, } = props;

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

@@ -1,6 +1,6 @@
 import type React from "react";
-import type * as G from "../../types/global";
 import type * as TStyles from "../../styles/types";
+import type * as G from "../../types/global";
 export type Props = {
     /** Image URL */
     src?: string;

package/dist/components/Link/Link.js

@@ -1,8 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { forwardRef } from "react";
-import { classNames } from "../../utilities/props.js";
 import Actionable from "../Actionable/index.js";
 import Icon from "../Icon/index.js";
+import { classNames } from "../../utilities/props.js";
 import s from "./Link.module.css";
 const Link = forwardRef((props, ref) => {
     const { icon, disabled, href, color = "primary", variant = "underline", className, children, attributes, type, onClick, stopPropagation, render, } = props;

package/dist/components/MenuItem/MenuItem.js

@@ -1,9 +1,9 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { forwardRef } from "react";
-import { classNames, responsiveClassNames, responsivePropDependency } from "../../utilities/props.js";
 import Actionable from "../Actionable/index.js";
 import Icon from "../Icon/index.js";
 import View from "../View/index.js";
+import { classNames, responsiveClassNames, responsivePropDependency } from "../../utilities/props.js";
 import s from "./MenuItem.module.css";
 const MenuItem = forwardRef((props, ref) => {
     const { icon, startSlot, endSlot, children, color = "primary", selected, highlighted, disabled, onClick, href, size = "medium", roundedCorners, stopPropagation, as, render, className, attributes, } = props;

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

@@ -1,6 +1,6 @@
-import type React from "react";
-import type { IconProps } from "../Icon";
 import type { ActionableProps } from "../Actionable";
+import type { IconProps } from "../Icon";
+import type React from "react";
 import type * as G from "../../types/global";
 export type Size = "small" | "medium" | "large";
 export type Props = Pick<ActionableProps, "attributes" | "className" | "disabled" | "children" | "href" | "onClick" | "as" | "stopPropagation" | "render"> & {

package/dist/components/Modal/Modal.js

@@ -1,16 +1,16 @@
 "use client";
 import { jsx as _jsx } from "react/jsx-runtime";
 import React from "react";
-import { classNames, responsiveVariables, responsiveClassNames, responsivePropDependency, } from "../../utilities/props.js";
-import { enableUserSelect, disableUserSelect } from "../../utilities/dom/index.js";
-import { enableScroll, disableScroll } from "../../utilities/scroll/index.js";
-import useResponsiveClientValue from "../../hooks/useResponsiveClientValue.js";
-import Text from "../Text/index.js";
 import Overlay from "../Overlay/index.js";
+import Text from "../Text/index.js";
 import useElementId from "../../hooks/useElementId.js";
-import s from "./Modal.module.css";
-import { resolveMixin } from "../../styles/mixin.js";
 import useHandlerRef from "../../hooks/useHandlerRef.js";
+import useResponsiveClientValue from "../../hooks/useResponsiveClientValue.js";
+import { resolveMixin } from "../../styles/mixin.js";
+import { enableUserSelect, disableUserSelect } from "../../utilities/dom/index.js";
+import { classNames, responsiveVariables, responsiveClassNames, responsivePropDependency, } from "../../utilities/props.js";
+import { enableScroll, disableScroll } from "../../utilities/scroll/index.js";
+import s from "./Modal.module.css";
 const DRAG_THRESHOLD = 32;
 const DRAG_OPPOSITE_THRESHOLD = 100;
 const DRAG_EDGE_BOUNDARY = 32;

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

@@ -1,6 +1,6 @@
+import type { OverlayProps, OverlayCloseReason } from "../Overlay";
 import type React from "react";
 import type * as G from "../../types/global";
-import type { OverlayProps, OverlayCloseReason } from "../Overlay";
 export type Context = {
     id: string;
     titleMounted: boolean;

package/dist/components/NumberField/NumberFieldControlled.js

@@ -2,17 +2,17 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from "react";
 import Actionable from "../Actionable/index.js";
+import { useFormControl } from "../FormControl/index.js";
 import Icon from "../Icon/index.js";
 import TextField from "../TextField/index.js";
-import { useFormControl } from "../FormControl/index.js";
-import IconChevronUp from "../../icons/ChevronUp.js";
-import IconChevronDown from "../../icons/ChevronDown.js";
-import IconPlus from "../../icons/Plus.js";
-import IconMinus from "../../icons/Minus.js";
+import * as keys from "../../constants/keys.js";
 import useElementId from "../../hooks/useElementId.js";
-import useHotkeys from "../../hooks/useHotkeys.js";
 import useHandlerRef from "../../hooks/useHandlerRef.js";
-import * as keys from "../../constants/keys.js";
+import useHotkeys from "../../hooks/useHotkeys.js";
+import IconChevronDown from "../../icons/ChevronDown.js";
+import IconChevronUp from "../../icons/ChevronUp.js";
+import IconMinus from "../../icons/Minus.js";
+import IconPlus from "../../icons/Plus.js";
 import { responsiveClassNames, responsivePropDependency } from "../../utilities/props.js";
 import s from "./NumberField.module.css";
 const NumberFieldControlled = (props) => {

package/dist/components/Overlay/Overlay.js

@@ -1,17 +1,17 @@
 "use client";
 import { jsx as _jsx } from "react/jsx-runtime";
 import React from "react";
-import { onNextFrame } from "../../utilities/animation.js";
-import { classNames } from "../../utilities/props.js";
-import { TrapFocus } from "../../utilities/a11y/index.js";
-import useToggle from "../../hooks/useToggle.js";
-import useIsomorphicLayoutEffect from "../../hooks/useIsomorphicLayoutEffect.js";
+import Portal from "../_private/Portal/index.js";
+import useIsDismissible from "../../hooks/_private/useIsDismissible.js";
+import useHandlerRef from "../../hooks/useHandlerRef.js";
 import useHotkeys from "../../hooks/useHotkeys.js";
+import useIsomorphicLayoutEffect from "../../hooks/useIsomorphicLayoutEffect.js";
 import useScrollLock from "../../hooks/useScrollLock.js";
-import useIsDismissible from "../../hooks/_private/useIsDismissible.js";
-import Portal from "../_private/Portal/index.js";
+import useToggle from "../../hooks/useToggle.js";
+import { TrapFocus } from "../../utilities/a11y/index.js";
+import { onNextFrame } from "../../utilities/animation.js";
+import { classNames } from "../../utilities/props.js";
 import s from "./Overlay.module.css";
-import useHandlerRef from "../../hooks/useHandlerRef.js";
 const Overlay = (props) => {
     const { active, children, transparent, blurred, overflow, onClose, onOpen, onAfterClose, onAfterOpen, disableCloseOnClick, containerRef, className, attributes, } = props;
     // Selectors wrapped with refs to simplify working with useEffect dependency array

package/dist/components/PinField/PinFieldControlled.js

@@ -1,13 +1,13 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from "react";
-import { responsivePropDependency } from "../../utilities/props.js";
-import View from "../View/index.js";
+import { useFormControl } from "../FormControl/index.js";
 import Text from "../Text/index.js";
+import View from "../View/index.js";
+import * as keys from "../../constants/keys.js";
 import useHotkeys from "../../hooks/useHotkeys.js";
-import { useFormControl } from "../FormControl/index.js";
 import { onNextFrame } from "../../utilities/animation.js";
-import * as keys from "../../constants/keys.js";
+import { responsivePropDependency } from "../../utilities/props.js";
 import { regExpNumericChar, regExpAlphabeticChar, regExpAlphaNumericChar, } from "./PinField.constants.js";
 import s from "./PinField.module.css";
 const sizeMap = {

package/dist/components/Popover/Popover.js

@@ -1,9 +1,9 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { classNames } from "../../utilities/props.js";
-import Flyout, { useFlyoutContext } from "../Flyout/index.js";
 import Dismissible from "../Dismissible/index.js";
-import s from "./Popover.module.css";
+import Flyout, { useFlyoutContext } from "../Flyout/index.js";
 import { resolveMixin } from "../../styles/mixin.js";
+import { classNames } from "../../utilities/props.js";
+import s from "./Popover.module.css";
 const Popover = (props) => {
     const { width, variant = "elevated", triggerType = "click", position = "bottom", elevation, borderRadius, ...flyoutProps } = props;
     const padding = props.padding ?? (variant === "headless" ? 0 : 4);

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

@@ -1,5 +1,5 @@
-import type React from "react";
 import type { FlyoutProps, FlyoutInstance } from "../Flyout";
+import type React from "react";
 export type Instance = FlyoutInstance;
 export type Props = Pick<FlyoutProps, "id" | "position" | "forcePosition" | "fallbackPositions" | "fallbackAdjustLayout" | "fallbackMinWidth" | "fallbackMinHeight" | "onOpen" | "onClose" | "width" | "trapFocusMode" | "active" | "defaultActive" | "contentGap" | "contentShift" | "instanceRef" | "triggerType" | "disableHideAnimation" | "disableContentHover" | "disableCloseOnOutsideClick" | "autoFocus" | "containerRef" | "positionRef" | "initialFocusRef" | "originCoordinates"> & {
     /** Node for inserting children */

package/dist/components/Radio/Radio.js

@@ -1,10 +1,10 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { classNames, responsiveClassNames, responsivePropDependency } from "../../utilities/props.js";
 import HiddenInput from "../_private/HiddenInput/index.js";
-import Text from "../Text/index.js";
-import { useRadioGroup } from "../RadioGroup/index.js";
 import { useFormControl } from "../FormControl/index.js";
+import { useRadioGroup } from "../RadioGroup/index.js";
+import Text from "../Text/index.js";
+import { classNames, responsiveClassNames, responsivePropDependency } from "../../utilities/props.js";
 import s from "./Radio.module.css";
 const Radio = (props) => {
     const { children, value, onChange, onFocus, onBlur, size = "medium", className, attributes, inputAttributes, } = props;

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

@@ -1,6 +1,6 @@
+import type { RadioProps } from "../Radio";
 import type React from "react";
 import type * as G from "../../types/global";
-import type { RadioProps } from "../Radio";
 type BaseProps = {
     /** Unique identifier for the radio group */
     id?: string;

package/dist/components/Reshaped/Reshaped.js

@@ -1,15 +1,15 @@
 "use client";
 import { jsx as _jsx } from "react/jsx-runtime";
 import React from "react";
-import { classNames } from "../../utilities/props.js";
 import { GlobalColorMode, PrivateTheme } from "../Theme/index.js";
-import { ToastProvider } from "../Toast/index.js";
 import { useGlobalColorMode } from "../Theme/useTheme.js";
+import { ToastProvider } from "../Toast/index.js";
 import { SingletonEnvironmentContext, useSingletonEnvironment, } from "../../hooks/_private/useSingletonEnvironment.js";
-import { SingletonKeyboardModeProvider } from "../../hooks/_private/useSingletonKeyboardMode.js";
 import { SingletonHotkeysProvider } from "../../hooks/_private/useSingletonHotkeys.js";
-import "./Reshaped.css";
+import { SingletonKeyboardModeProvider } from "../../hooks/_private/useSingletonKeyboardMode.js";
+import { classNames } from "../../utilities/props.js";
 import s from "./Reshaped.module.css";
+import "./Reshaped.css";
 const ReshapedInner = (props) => {
     const { children, defaultRTL, defaultViewport = "s", toastOptions } = props;
     const rtlState = useSingletonEnvironment(defaultRTL);

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

@@ -1,6 +1,6 @@
-import type React from "react";
 import type { GlobalColorModeProps, ThemeProps } from "../Theme";
 import type { ToastProviderProps } from "../Toast";
+import type React from "react";
 import type * as G from "../../types/global";
 export type Props = {
     /** Node for inserting children */

package/dist/components/Resizable/Resizable.js

@@ -1,10 +1,10 @@
 "use client";
 import { jsx as _jsx } from "react/jsx-runtime";
 import React from "react";
-import { classNames } from "../../utilities/props.js";
 import View from "../View/index.js";
-import { ResizableHandleContext } from "./ResizableHandle.js";
+import { classNames } from "../../utilities/props.js";
 import s from "./Resizable.module.css";
+import { ResizableHandleContext } from "./ResizableHandle.js";
 export const ResizableItem = () => null;
 const PrivateResizableItem = React.forwardRef((props, ref) => {
     const { children, defaultSize, minSize, maxSize } = props;

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

@@ -1,6 +1,6 @@
-import type React from "react";
 import type { ViewProps } from "../View";
 import type { UseDragCallbackArgs } from "../../hooks/_private/useDrag";
+import type React from "react";
 export type Props = {
     /** Component render variant */
     variant?: "bordered" | "borderless";

package/dist/components/Resizable/ResizableHandle.js

@@ -1,9 +1,9 @@
 "use client";
 import { jsx as _jsx } from "react/jsx-runtime";
 import React from "react";
-import { classNames } from "../../utilities/props.js";
 import View from "../View/index.js";
 import useDrag from "../../hooks/_private/useDrag.js";
+import { classNames } from "../../utilities/props.js";
 import s from "./Resizable.module.css";
 export const ResizableHandleContext = React.createContext({});
 const ResizableHandle = (props) => {

package/dist/components/ScrollArea/ScrollArea.js

@@ -1,12 +1,12 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React, { forwardRef } from "react";
-import { classNames } from "../../utilities/props.js";
-import { disableUserSelect, enableUserSelect } from "../../utilities/dom/index.js";
-import { resolveMixin } from "../../styles/mixin.js";
+import useHandlerRef from "../../hooks/useHandlerRef.js";
 import useIsomorphicLayoutEffect from "../../hooks/useIsomorphicLayoutEffect.js";
+import { resolveMixin } from "../../styles/mixin.js";
+import { disableUserSelect, enableUserSelect } from "../../utilities/dom/index.js";
+import { classNames } from "../../utilities/props.js";
 import s from "./ScrollArea.module.css";
-import useHandlerRef from "../../hooks/useHandlerRef.js";
 const ScrollAreaBar = (props) => {
     const { ratio, position, vertical, onThumbMove } = props;
     const onThumbMoveRef = useHandlerRef(onThumbMove);

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

@@ -1,9 +1,9 @@
 import React from "react";
-import type * as G from "../../types/global";
-import type { IconProps } from "../Icon";
+import { DropdownMenuProps } from "../DropdownMenu";
 import type { ActionableProps } from "../Actionable";
+import type { IconProps } from "../Icon";
 import type { MenuItemProps } from "../MenuItem";
-import { DropdownMenuProps } from "../DropdownMenu";
+import type * as G from "../../types/global";
 type Size = G.Responsive<"small" | "medium" | "large" | "xlarge">;
 type RenderSingleValue = (args: {
     value: string;

package/dist/components/Select/SelectCustomControlled.js

@@ -3,13 +3,13 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from "react";
 import DropdownMenu from "../DropdownMenu/index.js";
 import Icon from "../Icon/index.js";
+import View from "../View/index.js";
 import CheckmarkIcon from "../../icons/Checkmark.js";
 import { responsivePropDependency } from "../../utilities/props.js";
+import SelectGroup from "./SelectGroup.js";
+import SelectOption from "./SelectOption.js";
 import SelectRoot from "./SelectRoot.js";
 import SelectTrigger from "./SelectTrigger.js";
-import SelectOption from "./SelectOption.js";
-import SelectGroup from "./SelectGroup.js";
-import View from "../View/index.js";
 const SelectCustomControlled = (props) => {
     const { children, value, name, placeholder, size, multiple, width = "trigger", position, fallbackPositions, positionRef, renderValue: passedRenderValue, } = props;
     const initialFocusRef = React.useRef(null);
@@ -72,6 +72,9 @@ const SelectCustomControlled = (props) => {
     const resolvedChildren = traverseOptionList(children);
     const handleKeyDown = (e) => {
         const key = e.key;
+        // Ignore search when user is typing, e.g. if there is a filter input inside the dropdown
+        if (document.activeElement?.tagName === "INPUT")
+            return;
         // Only handle alphanumeric and space characters for type-ahead
         if (key.length !== 1 || !key.match(/[\w\s]/))
             return;

package/dist/components/Select/SelectEndContent.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import Icon from "../Icon/index.js";
-import { responsivePropDependency } from "../../utilities/props.js";
 import IconArrow from "../../icons/ChevronVertical.js";
+import { responsivePropDependency } from "../../utilities/props.js";
 import s from "./Select.module.css";
 const SelectEndContent = (props) => {
     const { disabled, size } = props;

package/dist/components/Select/SelectGroup.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import View from "../View/index.js";
 import Text from "../Text/index.js";
+import View from "../View/index.js";
 import s from "./Select.module.css";
 const SelectGroup = (props) => {
     const { label, children } = props;

package/dist/components/Select/SelectNative.js

@@ -2,9 +2,9 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import React from "react";
 import { classNames } from "../../utilities/props.js";
-import SelectStartContent from "./SelectStartContent.js";
-import SelectEndContent from "./SelectEndContent.js";
 import s from "./Select.module.css";
+import SelectEndContent from "./SelectEndContent.js";
+import SelectStartContent from "./SelectStartContent.js";
 const SelectNative = (props) => {
     const { startSlot, icon, size, inputAttributes, onFocus, onBlur, disabled, name, value, defaultValue, onChange, onClick, placeholder, id, children, } = props;
     const [empty, setEmpty] = React.useState(value === undefined ? !defaultValue : !value);

package/dist/components/Select/SelectRoot.js

@@ -1,7 +1,7 @@
 "use client";
 import { jsx as _jsx } from "react/jsx-runtime";
-import useElementId from "../../hooks/useElementId.js";
 import { useFormControl } from "../FormControl/index.js";
+import useElementId from "../../hooks/useElementId.js";
 import { classNames, responsiveClassNames } from "../../utilities/props.js";
 import s from "./Select.module.css";
 const SelectRoot = (passedProps) => {

package/dist/components/Select/SelectTrigger.js

@@ -2,9 +2,9 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import Actionable from "../Actionable/index.js";
 import Text from "../Text/index.js";
-import SelectStartContent from "./SelectStartContent.js";
 import s from "./Select.module.css";
 import SelectEndContent from "./SelectEndContent.js";
+import SelectStartContent from "./SelectStartContent.js";
 const SelectTrigger = (props) => {
     const { children, disabled, onClick, onFocus, onBlur, inputAttributes, startSlot, icon, size, placeholder, value, name, id, } = props;
     return (_jsxs(_Fragment, { children: [_jsxs(Actionable, { className: s.input, disabled: disabled, disableFocusRing: true, onClick: onClick, attributes: {

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

@@ -1,7 +1,7 @@
 import Select from "./Select";
 import SelectCustom from "./SelectCustom";
-import SelectOption from "./SelectOption";
 import SelectGroup from "./SelectGroup";
+import SelectOption from "./SelectOption";
 declare const SelectRoot: typeof Select & {
     Custom: typeof SelectCustom;
     Option: typeof SelectOption;