reshaped 4.2.0 → 4.3.0-canary.1

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

@@ -1,5 +1,5 @@
 import React from "react";
-import type * as T from "./Select.types";
+import type * as T from "./Select.types.js";
 declare function Select(props: T.NativeControlledProps): React.JSX.Element;
 declare namespace Select {
     var displayName: string;

package/dist/components/Select/Select.js

@@ -1,19 +1,24 @@
 "use client";
 import { jsx as _jsx } from "react/jsx-runtime";
 import React from "react";
-import useElementId from "../../hooks/useElementId";
-import { useFormControl } from "../FormControl";
-import SelectCustom from "./SelectCustom";
-import SelectNative from "./SelectNative";
+import useElementId from "../../hooks/useElementId.js";
+import { useFormControl } from "../FormControl/index.js";
+import SelectCustom from "./SelectCustom.js";
+import SelectNative from "./SelectNative.js";
 function Select(passedProps) {
     const formControl = useFormControl();
     const internalId = useElementId(passedProps.id);
+    const hasError = formControl?.hasError || passedProps.hasError;
     const props = {
         ...passedProps,
         id: formControl?.attributes?.id || passedProps.inputAttributes?.id || internalId,
         disabled: formControl?.disabled || passedProps.disabled,
-        hasError: formControl?.hasError || passedProps.hasError,
-        inputAttributes: { ...passedProps.inputAttributes, ...formControl?.attributes },
+        hasError,
+        inputAttributes: {
+            ...passedProps.inputAttributes,
+            ...formControl?.attributes,
+            "aria-invalid": hasError || undefined,
+        },
     };
     const { children } = props;
     const hasNativeOptions = React.Children.toArray(children).some((child) => {

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

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

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

@@ -1,3 +1,3 @@
-import type * as T from "./Select.types";
+import type * as T from "./Select.types.js";
 declare const SelectCustom: React.FC<T.CustomProps>;
 export default SelectCustom;

package/dist/components/Select/SelectCustom.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import SelectCustomControlled from "./SelectCustomControlled";
-import SelectCustomUncontrolled from "./SelectCustomUncontrolled";
+import SelectCustomControlled from "./SelectCustomControlled.js";
+import SelectCustomUncontrolled from "./SelectCustomUncontrolled.js";
 const SelectCustom = (props) => {
     const { value } = props;
     if (value !== undefined) {

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

@@ -1,4 +1,4 @@
 import React from "react";
-import type * as T from "./Select.types";
+import type * as T from "./Select.types.js";
 declare const SelectCustomControlled: React.FC<T.CustomControlledProps>;
 export default SelectCustomControlled;

package/dist/components/Select/SelectCustomControlled.js

@@ -1,15 +1,17 @@
 "use client";
 import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from "react";
-import DropdownMenu from "../../components/DropdownMenu";
-import Icon from "../../components/Icon";
-import View from "../../components/View";
-import { responsivePropDependency } from "../../utilities/props";
-import CheckmarkIcon from "../../icons/Checkmark";
-import SelectGroup from "./SelectGroup";
-import SelectHiddenInput from "./SelectHiddenInput";
-import SelectOption from "./SelectOption";
-import SelectTrigger from "./SelectTrigger";
+import DropdownMenu from "../../components/DropdownMenu/index.js";
+import { DropdownMenuKeepOpenContext } from "../../components/DropdownMenu/DropdownMenu.js";
+import { useFormControl } from "../../components/FormControl/index.js";
+import Icon from "../../components/Icon/index.js";
+import View from "../../components/View/index.js";
+import { responsivePropDependency } from "../../utilities/props.js";
+import CheckmarkIcon from "../../icons/Checkmark.js";
+import SelectGroup from "./SelectGroup.js";
+import SelectHiddenInput from "./SelectHiddenInput.js";
+import SelectOption from "./SelectOption.js";
+import SelectTrigger from "./SelectTrigger.js";
 const SelectCustomControlled = (props) => {
     const { children, value, name, id, placeholder, multiple, selectedIconPosition = "start", width = "trigger", position, fallbackPositions, positionRef, size, disabled, hasError, inputAttributes, onClick, renderValue: passedRenderValue, renderTrigger: passedRenderTrigger, } = props;
     const initialFocusRef = React.useRef(null);
@@ -17,6 +19,8 @@ const SelectCustomControlled = (props) => {
     const searchTimeoutRef = React.useRef(null);
     const dropdownRef = React.useRef(null);
     const [openedWithTouch, setOpenedWithTouch] = React.useState(false);
+    const formControl = useFormControl();
+    const triggerId = `${id}-trigger`;
     const indexedOptions = [];
     const selectedOptions = [];
     const hasValue = multiple ? value.length > 0 : value;
@@ -124,9 +128,10 @@ const SelectCustomControlled = (props) => {
             return passedRenderTrigger(attributes, { ...triggerState, value });
         return passedRenderTrigger(attributes, { ...triggerState, value });
     };
-    return (_jsxs(DropdownMenu, { width: width, disableHideAnimation: true, position: position ?? "bottom", fallbackPositions: fallbackPositions ?? (position ? undefined : ["bottom", "top"]), fallbackAdjustLayout: !openedWithTouch, fallbackMinHeight: "220px", initialFocusRef: initialFocusRef, positionRef: positionRef, onClose: () => setOpenedWithTouch(false), children: [_jsx(DropdownMenu.Trigger, { children: (attributes) => {
+    return (_jsxs(DropdownMenu, { width: width, position: position ?? "bottom", fallbackPositions: fallbackPositions ?? (position ? undefined : ["bottom", "top"]), fallbackAdjustLayout: !openedWithTouch, fallbackMinHeight: "220px", initialFocusRef: initialFocusRef, positionRef: positionRef, onClose: () => setOpenedWithTouch(false), children: [_jsx(DropdownMenu.Trigger, { children: (attributes) => {
                     const triggerAttributes = {
                         ...attributes,
+                        "aria-haspopup": "listbox",
                         onTouchStart: () => {
                             setOpenedWithTouch(true);
                             attributes.onTouchStart?.();
@@ -147,13 +152,21 @@ const SelectCustomControlled = (props) => {
                                     children: renderedValue ?? placeholder,
                                 }), _jsx(SelectHiddenInput, { value: value, name: name, id: id, inputAttributes: inputAttributes })] }));
                     }
-                    return (_jsx(SelectTrigger, { ...props, triggerAttributes: triggerAttributes, value: value, children: renderValue() }));
+                    return (_jsx(SelectTrigger, { ...props, triggerAttributes: {
+                            ...triggerAttributes,
+                            id: triggerId,
+                            // Label the trigger with the FormControl label, while keeping the selected value in its name
+                            "aria-labelledby": formControl.attributes.id
+                                ? `${formControl.attributes.id}-label ${triggerId}`
+                                : undefined,
+                            "aria-describedby": formControl.attributes["aria-describedby"],
+                        }, value: value, children: renderValue() }));
                 } }), _jsx(DropdownMenu.Content, { attributes: {
                     ref: dropdownRef,
                     onKeyDown: handleKeyDown,
-                    // Ignore the default menu role since we're using options
-                    role: undefined,
-                }, children: resolvedChildren })] }));
+                    role: "listbox",
+                    "aria-multiselectable": multiple || undefined,
+                }, children: _jsx(DropdownMenuKeepOpenContext.Provider, { value: !!multiple, children: resolvedChildren }) })] }));
 };
 SelectCustomControlled.displayName = "SelectCustomControlled";
 export default SelectCustomControlled;

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

@@ -1,4 +1,4 @@
 import React from "react";
-import type * as T from "./Select.types";
+import type * as T from "./Select.types.js";
 declare const SelectCustomUncontrolled: React.FC<T.CustomUncontrolledProps>;
 export default SelectCustomUncontrolled;

package/dist/components/Select/SelectCustomUncontrolled.js

@@ -1,7 +1,7 @@
 "use client";
 import { jsx as _jsx } from "react/jsx-runtime";
 import React from "react";
-import SelectCustomControlled from "./SelectCustomControlled";
+import SelectCustomControlled from "./SelectCustomControlled.js";
 const SelectCustomUncontrolled = (props) => {
     const { defaultValue, onChange, multiple, ...controlledProps } = props;
     const [value, setValue] = React.useState(defaultValue || (multiple ? [] : ""));

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

@@ -1,3 +1,3 @@
-import type * as T from "./Select.types";
+import type * as T from "./Select.types.js";
 declare const SelectEndContent: React.FC<Pick<T.Props, "disabled" | "size">>;
 export default SelectEndContent;

package/dist/components/Select/SelectEndContent.js

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

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

@@ -1,4 +1,4 @@
 import React from "react";
-import type * as T from "./Select.types";
+import type * as T from "./Select.types.js";
 declare const SelectGroup: React.FC<T.GroupProps>;
 export default SelectGroup;

package/dist/components/Select/SelectGroup.js

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

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

@@ -1,4 +1,4 @@
-import type * as T from "./Select.types";
+import type * as T from "./Select.types.js";
 /**
  * Holds the selected value for the form submission,
  * shared between the default and the custom trigger rendering

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

@@ -1,4 +1,4 @@
 import React from "react";
-import type * as T from "./Select.types";
+import type * as T from "./Select.types.js";
 declare const SelectNative: React.FC<T.NativeProps>;
 export default SelectNative;

package/dist/components/Select/SelectNative.js

@@ -2,10 +2,10 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from "react";
 import { classNames } from "@reshaped/utilities";
-import { responsiveClassNames } from "../../utilities/props";
-import { resolveMixin } from "../../styles/mixin";
-import SelectEndContent from "./SelectEndContent";
-import SelectStartContent from "./SelectStartContent";
+import { responsiveClassNames } from "../../utilities/props.js";
+import { resolveMixin } from "../../styles/mixin.js";
+import SelectEndContent from "./SelectEndContent.js";
+import SelectStartContent from "./SelectStartContent.js";
 import s from "./Select.module.css";
 const SelectNative = (props) => {
     const { startSlot, icon, size = "medium", inputAttributes, disabled, name, value, defaultValue, onChange, onClick, variant = "outline", hasError, className, attributes, placeholder, id, children, } = props;

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

@@ -1,4 +1,4 @@
 import React from "react";
-import type * as T from "./Select.types";
+import type * as T from "./Select.types.js";
 declare const SelectOption: React.FC<T.OptionProps>;
 export default SelectOption;

package/dist/components/Select/SelectOption.js

@@ -1,6 +1,6 @@
 "use client";
 import { jsx as _jsx } from "react/jsx-runtime";
-import DropdownMenu from "../../components/DropdownMenu";
+import DropdownMenu from "../../components/DropdownMenu/index.js";
 import s from "./Select.module.css";
 const SelectOption = (props) => {
     const { value, ...menuItemProps } = props;

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

@@ -1,3 +1,3 @@
-import type * as T from "./Select.types";
+import type * as T from "./Select.types.js";
 declare const SelectStartContent: React.FC<Pick<T.Props, "startSlot" | "icon" | "size">>;
 export default SelectStartContent;

package/dist/components/Select/SelectStartContent.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import Icon from "../../components/Icon";
-import { responsivePropDependency } from "../../utilities/props";
+import Icon from "../../components/Icon/index.js";
+import { responsivePropDependency } from "../../utilities/props.js";
 import s from "./Select.module.css";
 const SelectStartContent = (props) => {
     const { startSlot, icon, size } = props;

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

@@ -1,4 +1,4 @@
 import React from "react";
-import type * as T from "./Select.types";
+import type * as T from "./Select.types.js";
 declare const SelectTrigger: React.FC<T.TriggerProps>;
 export default SelectTrigger;

package/dist/components/Select/SelectTrigger.js

@@ -1,13 +1,13 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { classNames } from "@reshaped/utilities";
-import Actionable from "../../components/Actionable";
-import Text from "../../components/Text";
-import { responsiveClassNames } from "../../utilities/props";
-import { resolveMixin } from "../../styles/mixin";
-import SelectEndContent from "./SelectEndContent";
-import SelectHiddenInput from "./SelectHiddenInput";
-import SelectStartContent from "./SelectStartContent";
+import Actionable from "../../components/Actionable/index.js";
+import Text from "../../components/Text/index.js";
+import { responsiveClassNames } from "../../utilities/props.js";
+import { resolveMixin } from "../../styles/mixin.js";
+import SelectEndContent from "./SelectEndContent.js";
+import SelectHiddenInput from "./SelectHiddenInput.js";
+import SelectStartContent from "./SelectStartContent.js";
 import s from "./Select.module.css";
 const SelectTrigger = (props) => {
     const { children, disabled, onClick, attributes, className, variant = "outline", hasError, inputAttributes, triggerAttributes, startSlot, icon, size = "medium", placeholder, value, name, id, } = props;
@@ -20,6 +20,6 @@ const SelectTrigger = (props) => {
     return (_jsxs("div", { ...attributes, style: {
             ...attributes?.style,
             ...mixin.variables,
-        }, className: rootClassName, "data-rs-aligner-target": true, children: [_jsxs(Actionable, { className: classNames(s.input, inputAttributes?.className), disabled: disabled, disableFocusRing: true, onClick: onClick, attributes: triggerAttributes, children: [_jsx(SelectStartContent, { startSlot: startSlot, icon: icon, size: size }), children ? (_jsx(Text, { maxLines: typeof children === "string" ? 1 : undefined, children: children })) : null, placeholder && !children ? _jsx(Text, { color: "disabled", children: placeholder }) : null, _jsx(SelectEndContent, { disabled: disabled, size: size })] }), _jsx(SelectHiddenInput, { value: value, name: name, id: id, inputAttributes: inputAttributes })] }));
+        }, className: rootClassName, "data-rs-aligner-target": true, children: [_jsxs(Actionable, { className: classNames(s.input, inputAttributes?.className), disabled: disabled, disableFocusRing: true, onClick: onClick, attributes: { ...triggerAttributes, "aria-invalid": hasError || undefined }, children: [_jsx(SelectStartContent, { startSlot: startSlot, icon: icon, size: size }), children ? (_jsx(Text, { maxLines: typeof children === "string" ? 1 : undefined, children: children })) : null, placeholder && !children ? _jsx(Text, { color: "disabled", children: placeholder }) : null, _jsx(SelectEndContent, { disabled: disabled, size: size })] }), _jsx(SelectHiddenInput, { value: value, name: name, id: id, inputAttributes: inputAttributes })] }));
 };
 export default SelectTrigger;

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

@@ -1,11 +1,11 @@
-import Select from "./Select";
-import SelectGroup from "./SelectGroup";
-import SelectOption from "./SelectOption";
+import Select from "./Select.js";
+import SelectGroup from "./SelectGroup.js";
+import SelectOption from "./SelectOption.js";
 declare const SelectRoot: typeof Select & {
     Option: typeof SelectOption;
     Group: typeof SelectGroup;
     OptionGroup: typeof SelectGroup;
 };
 export default SelectRoot;
-export { default as SelectTrigger } from "./SelectTrigger";
-export type { Props as SelectProps, TriggerProps as SelectTriggerProps } from "./Select.types";
+export { default as SelectTrigger } from "./SelectTrigger.js";
+export type { Props as SelectProps, TriggerProps as SelectTriggerProps } from "./Select.types.js";

package/dist/components/Select/index.js

@@ -1,9 +1,9 @@
-import Select from "./Select";
-import SelectGroup from "./SelectGroup";
-import SelectOption from "./SelectOption";
+import Select from "./Select.js";
+import SelectGroup from "./SelectGroup.js";
+import SelectOption from "./SelectOption.js";
 const SelectRoot = Select;
 SelectRoot.Option = SelectOption;
 SelectRoot.Group = SelectGroup;
 SelectRoot.OptionGroup = SelectGroup;
 export default SelectRoot;
-export { default as SelectTrigger } from "./SelectTrigger";
+export { default as SelectTrigger } from "./SelectTrigger.js";

package/dist/components/Select/tests/Select.stories.d.ts

@@ -3,10 +3,10 @@ import React from "react";
 import { Mock } from "storybook/test";
 declare const _default: {
     title: string;
-    component: typeof import("../Select").default & {
-        Option: React.FC<import("../Select.types").OptionProps>;
-        Group: React.FC<import("../Select.types").GroupProps>;
-        OptionGroup: React.FC<import("../Select.types").GroupProps>;
+    component: typeof import("../Select.js").default & {
+        Option: React.FC<import("../Select.types.js").OptionProps>;
+        Group: React.FC<import("../Select.types.js").GroupProps>;
+        OptionGroup: React.FC<import("../Select.types.js").GroupProps>;
     };
     parameters: {
         iframe: {