@jobber/components 6.101.4 → 6.101.5-JOB-140604-4487daa.55

package/dist/InternalChipDismissible-es.js

@@ -8,13 +8,13 @@ import { F as FloatingPortal } from './floating-ui.react-es.js';
 import { T as Text } from './Text-es.js';
 import { B as Button } from './Button-es.js';
 import { S as Spinner } from './Spinner-es.js';
-import { C as ChipNamespace, I as InternalChipButton } from './Chip-es.js';
+import { C as Chip, I as InternalChipButton } from './Chip-es.js';
 import './tslib.es6-es.js';
 
 function InternalChip({ label, active = false, disabled = false, invalid = false, prefix, suffix, tabIndex, ariaLabel, onClick, onKeyDown, }) {
-    return (React__default.createElement(ChipNamespace, { disabled: disabled, invalid: invalid, onKeyDown: onKeyDown, testID: "ATL-InternalChip", ariaLabel: ariaLabel, tabIndex: tabIndex, variation: active ? "base" : "subtle", role: tabIndex !== undefined ? "option" : undefined, onClick: onClick ? (_, ev) => onClick(ev) : undefined, label: label },
-        prefix && React__default.createElement(ChipNamespace.Prefix, null, prefix),
-        suffix && React__default.createElement(ChipNamespace.Suffix, null, suffix)));
+    return (React__default.createElement(Chip, { disabled: disabled, invalid: invalid, onKeyDown: onKeyDown, testID: "ATL-InternalChip", ariaLabel: ariaLabel, tabIndex: tabIndex, variation: active ? "base" : "subtle", role: tabIndex !== undefined ? "option" : undefined, onClick: onClick ? (_, ev) => onClick(ev) : undefined, label: label },
+        prefix && React__default.createElement(Chip.Prefix, null, prefix),
+        suffix && React__default.createElement(Chip.Suffix, null, suffix)));
 }
 
 var styles = {"wrapper":"XRnU90M2-fs-","input":"Dq-yFHd1zK0-","menu":"F7CpurjKzBI-","menuListOption":"_9SAK31TqNDY-","loadingIndicator":"s5vFJVv0t0Q-","activeOption":"_8d0w-JzgzS4-","spinning":"hDJGLX6kE-U-"};

package/dist/List/index.cjs

@@ -8,9 +8,9 @@ require('../identity-cjs.js');
 require('../isTypedArray-cjs.js');
 require('../isObjectLike-cjs.js');
 require('../_commonjsHelpers-cjs.js');
-require('../_baseGet-cjs.js');
-require('../_getTag-cjs.js');
+require('../_getAllKeys-cjs.js');
 require('../isSymbol-cjs.js');
+require('../_getTag-cjs.js');
 require('../_baseFor-cjs.js');
 require('../_baseAssignValue-cjs.js');
 require('../Typography-cjs.js');

package/dist/List/index.mjs

@@ -6,9 +6,9 @@ import '../identity-es.js';
 import '../isTypedArray-es.js';
 import '../isObjectLike-es.js';
 import '../_commonjsHelpers-es.js';
-import '../_baseGet-es.js';
-import '../_getTag-es.js';
+import '../_getAllKeys-es.js';
 import '../isSymbol-es.js';
+import '../_getTag-es.js';
 import '../_baseFor-es.js';
 import '../_baseAssignValue-es.js';
 import '../Typography-es.js';

package/dist/Menu/Menu.d.ts

@@ -1,6 +1,6 @@
 import type { ReactElement } from "react";
 import React from "react";
-import type { MenuComposableProps, MenuContentComposableProps, MenuHeaderComposableProps, MenuItemComposableProps, MenuItemIconComposableProps, MenuLegacyProps, MenuSectionComposableProps, MenuSeparatorComposableProps, MenuTriggerComposableProps } from "./Menu.types";
+import type { MenuComposableProps, MenuContentComposableProps, MenuHeaderComposableProps, MenuItemComposableProps, MenuItemIconComposableProps, MenuItemLabelComposableProps, MenuLegacyProps, MenuSectionComposableProps, MenuSeparatorComposableProps, MenuTriggerComposableProps } from "./Menu.types";
 export declare function Menu(props: MenuLegacyProps): ReactElement;
 export declare function Menu(props: MenuComposableProps): ReactElement;
 export declare namespace Menu {
@@ -20,9 +20,7 @@ declare function MenuSeparatorComposable({ UNSAFE_style, UNSAFE_className, }: Me
 declare function MenuSectionComposable({ children, UNSAFE_style, UNSAFE_className, ariaLabel, }: MenuSectionComposableProps): React.JSX.Element;
 declare function MenuHeaderComposable(props: MenuHeaderComposableProps): React.JSX.Element;
 declare function MenuItemIconComposable(props: MenuItemIconComposableProps): React.JSX.Element;
-declare function MenuItemLabelComposable(props: {
-    readonly children: string;
-}): React.JSX.Element;
+declare function MenuItemLabelComposable(props: MenuItemLabelComposableProps): React.JSX.Element;
 declare function MenuHeaderLabel(props: {
     readonly children: React.ReactNode;
 }): React.JSX.Element;

package/dist/Menu/Menu.types.d.ts

@@ -1,12 +1,18 @@
 import type { IconColorNames, IconNames } from "@jobber/design";
 import type React from "react";
-import type { CSSProperties, ReactElement, ReactNode } from "react";
+import type { CSSProperties, ComponentProps, ReactElement, ReactNode } from "react";
+import type { Pressable as AriaPressable } from "react-aria-components";
 import type { IconProps } from "../Icon";
+type PressableChild = ComponentProps<typeof AriaPressable>["children"];
 export interface MenuLegacyProps extends MenuBaseProps {
     /**
      * Custom menu activator. If this is not provided a default [… More] will be used.
      */
-    readonly activator?: ReactElement;
+    readonly activator?: ReactElement<{
+        fullWidth?: boolean;
+        onClick?: (event?: React.MouseEvent) => void;
+        [key: string]: unknown;
+    }>;
     /**
      * Collection of action items.
      */
@@ -128,11 +134,12 @@ export interface MenuSectionComposableProps extends UnsafeProps {
 export interface MenuHeaderComposableProps extends UnsafeProps {
     readonly children: ReactNode;
 }
+type MenuItemVariants = "destructive";
 export interface MenuItemComposableProps extends UnsafeProps {
     /**
-     * Apply destructive styling to the item label and icon.
+     * Visual style variations for the MenuItem default content.
      */
-    readonly destructive?: boolean;
+    readonly variation?: MenuItemVariants;
     /**
      * Item content.
      */
@@ -172,7 +179,7 @@ export interface MenuTriggerComposableProps {
      * If you want to access the open event, use the onOpenChange on the Menu component.
      * If it does not have an interactive role, or a focus style it will have issues.
      */
-    readonly children: ReactNode;
+    readonly children: PressableChild;
 }
 export interface MenuSeparatorComposableProps extends UnsafeProps {
 }
@@ -180,4 +187,13 @@ export type AnimationState = "unmounted" | "hidden" | "visible";
 export interface MenuMobileUnderlayProps {
     readonly animation: AnimationState;
 }
+export interface MenuItemLabelComposableProps {
+    /**
+     * Item label content.
+     * This is rendered inside a Typography (span) component, so you MUST supply either
+     * a string or a fragment/utility component that renders down to a raw string (e.g.
+     * translation helpers).
+     */
+    readonly children: React.ReactNode;
+}
 export {};

package/dist/Menu-cjs.js

@@ -87,7 +87,7 @@ const composeOverlayVariation = {
     hidden: { opacity: 0 },
     visible: { opacity: 1 },
 };
-const variation = {
+const animationVariation = {
     overlayStartStop: { opacity: 0 },
     startOrStop: (placement) => {
         let y = Y_TRANSLATION_DESKTOP;
@@ -206,14 +206,14 @@ function MenuLegacy({ activator, items, UNSAFE_className, UNSAFE_style, }) {
         })),
         React.createElement(MenuPortal, null,
             React.createElement(framerMotion.AnimatePresence, null, visible && (React.createElement(React.Fragment, null,
-                React.createElement(framerMotion.motion.div, { className: styles.overlay, onClick: toggle(), variants: variation, initial: "overlayStartStop", animate: "done", exit: "overlayStartStop", transition: Object.assign({}, OVERLAY_ANIMATION_CONFIG) }),
+                React.createElement(framerMotion.motion.div, { className: styles.overlay, onClick: toggle(), variants: animationVariation, initial: "overlayStartStop", animate: "done", exit: "overlayStartStop", transition: Object.assign({}, OVERLAY_ANIMATION_CONFIG) }),
                 React.createElement("div", Object.assign({ ref: refs.setFloating, className: styles.floatingContainer }, getFloatingProps({
                     onKeyDown: event => {
                         if (event.key === "Tab") {
                             event.preventDefault();
                         }
                     },
-                }), positionAttributes, useFormFieldFocus.formFieldFocusAttribute), items.length > 0 && (React.createElement(framerMotion.motion.div, { className: classnames(styles.menu, UNSAFE_className === null || UNSAFE_className === void 0 ? void 0 : UNSAFE_className.menu), role: "menu", "data-elevation": "elevated", "aria-labelledby": buttonID, id: menuID, onClick: hide, variants: variation, initial: "startOrStop", animate: "done", exit: "startOrStop", custom: context === null || context === void 0 ? void 0 : context.placement, transition: Object.assign({}, MENU_ANIMATION_CONFIG), style: UNSAFE_style === null || UNSAFE_style === void 0 ? void 0 : UNSAFE_style.menu }, renderedSections)))))))));
+                }), positionAttributes, useFormFieldFocus.formFieldFocusAttribute), items.length > 0 && (React.createElement(framerMotion.motion.div, { className: classnames(styles.menu, UNSAFE_className === null || UNSAFE_className === void 0 ? void 0 : UNSAFE_className.menu), role: "menu", "data-elevation": "elevated", "aria-labelledby": buttonID, id: menuID, onClick: hide, variants: animationVariation, initial: "startOrStop", animate: "done", exit: "startOrStop", custom: context === null || context === void 0 ? void 0 : context.placement, transition: Object.assign({}, MENU_ANIMATION_CONFIG), style: UNSAFE_style === null || UNSAFE_style === void 0 ? void 0 : UNSAFE_style.menu }, renderedSections)))))))));
     function toggle(callbackPassthrough) {
         return (event) => {
             setVisible(!visible);
@@ -348,14 +348,14 @@ const MenuItemComposable = React.forwardRef(function MenuItemComposable(props, r
     if (props.href) {
         const { href, target, rel, onClick } = props;
         return (React.createElement(Tree.$3674c52c6b3c5bce$export$2ce376c2cc3355c8, { ref: ref, className: className, style: UNSAFE_style, textValue: props.textValue, href: href, target: target, rel: rel, onClick: onClick },
-            React.createElement(MenuItemContext.Provider, { value: { destructive: props.destructive } }, props.children)));
+            React.createElement(MenuItemContext.Provider, { value: { variation: props.variation } }, props.children)));
     }
     return (React.createElement(Tree.$3674c52c6b3c5bce$export$2ce376c2cc3355c8, { ref: ref, className: className, style: UNSAFE_style, textValue: props.textValue, onAction: () => {
             var _a;
             // Zero-arg activation for non-link items
             (_a = props.onClick) === null || _a === void 0 ? void 0 : _a.call(props);
         } },
-        React.createElement(MenuItemContext.Provider, { value: { destructive: props.destructive } }, props.children)));
+        React.createElement(MenuItemContext.Provider, { value: { variation: props.variation } }, props.children)));
 });
 const MenuItemContext = React.createContext(null);
 function useMenuItemContext() {
@@ -363,14 +363,14 @@ function useMenuItemContext() {
     return ctx !== null && ctx !== void 0 ? ctx : {};
 }
 function MenuItemIconComposable(props) {
-    const { destructive } = useMenuItemContext();
+    const { variation } = useMenuItemContext();
     return (React.createElement("div", { "data-menu-slot": "icon" },
-        React.createElement(Icon.Icon, Object.assign({}, props, { color: destructive ? "destructive" : props.color }))));
+        React.createElement(Icon.Icon, Object.assign({}, props, { color: variation === "destructive" ? "destructive" : props.color }))));
 }
 function MenuItemLabelComposable(props) {
-    const { destructive } = useMenuItemContext();
+    const { variation } = useMenuItemContext();
     return (React.createElement("div", { "data-menu-slot": "label" },
-        React.createElement(Typography.Typography, { element: "span", fontWeight: "semiBold", textColor: destructive ? "destructive" : "text" }, props.children)));
+        React.createElement(Typography.Typography, { element: "span", fontWeight: "semiBold", textColor: variation === "destructive" ? "destructive" : "text" }, props.children)));
 }
 function MenuHeaderLabel(props) {
     return React.createElement(DefaultHeaderContent, null, props.children);

package/dist/Menu-es.js

@@ -85,7 +85,7 @@ const composeOverlayVariation = {
     hidden: { opacity: 0 },
     visible: { opacity: 1 },
 };
-const variation = {
+const animationVariation = {
     overlayStartStop: { opacity: 0 },
     startOrStop: (placement) => {
         let y = Y_TRANSLATION_DESKTOP;
@@ -204,14 +204,14 @@ function MenuLegacy({ activator, items, UNSAFE_className, UNSAFE_style, }) {
         })),
         React__default.createElement(MenuPortal, null,
             React__default.createElement(AnimatePresence, null, visible && (React__default.createElement(React__default.Fragment, null,
-                React__default.createElement(motion.div, { className: styles.overlay, onClick: toggle(), variants: variation, initial: "overlayStartStop", animate: "done", exit: "overlayStartStop", transition: Object.assign({}, OVERLAY_ANIMATION_CONFIG) }),
+                React__default.createElement(motion.div, { className: styles.overlay, onClick: toggle(), variants: animationVariation, initial: "overlayStartStop", animate: "done", exit: "overlayStartStop", transition: Object.assign({}, OVERLAY_ANIMATION_CONFIG) }),
                 React__default.createElement("div", Object.assign({ ref: refs.setFloating, className: styles.floatingContainer }, getFloatingProps({
                     onKeyDown: event => {
                         if (event.key === "Tab") {
                             event.preventDefault();
                         }
                     },
-                }), positionAttributes, formFieldFocusAttribute), items.length > 0 && (React__default.createElement(motion.div, { className: classnames(styles.menu, UNSAFE_className === null || UNSAFE_className === void 0 ? void 0 : UNSAFE_className.menu), role: "menu", "data-elevation": "elevated", "aria-labelledby": buttonID, id: menuID, onClick: hide, variants: variation, initial: "startOrStop", animate: "done", exit: "startOrStop", custom: context === null || context === void 0 ? void 0 : context.placement, transition: Object.assign({}, MENU_ANIMATION_CONFIG), style: UNSAFE_style === null || UNSAFE_style === void 0 ? void 0 : UNSAFE_style.menu }, renderedSections)))))))));
+                }), positionAttributes, formFieldFocusAttribute), items.length > 0 && (React__default.createElement(motion.div, { className: classnames(styles.menu, UNSAFE_className === null || UNSAFE_className === void 0 ? void 0 : UNSAFE_className.menu), role: "menu", "data-elevation": "elevated", "aria-labelledby": buttonID, id: menuID, onClick: hide, variants: animationVariation, initial: "startOrStop", animate: "done", exit: "startOrStop", custom: context === null || context === void 0 ? void 0 : context.placement, transition: Object.assign({}, MENU_ANIMATION_CONFIG), style: UNSAFE_style === null || UNSAFE_style === void 0 ? void 0 : UNSAFE_style.menu }, renderedSections)))))))));
     function toggle(callbackPassthrough) {
         return (event) => {
             setVisible(!visible);
@@ -346,14 +346,14 @@ const MenuItemComposable = React__default.forwardRef(function MenuItemComposable
     if (props.href) {
         const { href, target, rel, onClick } = props;
         return (React__default.createElement($3674c52c6b3c5bce$export$2ce376c2cc3355c8, { ref: ref, className: className, style: UNSAFE_style, textValue: props.textValue, href: href, target: target, rel: rel, onClick: onClick },
-            React__default.createElement(MenuItemContext.Provider, { value: { destructive: props.destructive } }, props.children)));
+            React__default.createElement(MenuItemContext.Provider, { value: { variation: props.variation } }, props.children)));
     }
     return (React__default.createElement($3674c52c6b3c5bce$export$2ce376c2cc3355c8, { ref: ref, className: className, style: UNSAFE_style, textValue: props.textValue, onAction: () => {
             var _a;
             // Zero-arg activation for non-link items
             (_a = props.onClick) === null || _a === void 0 ? void 0 : _a.call(props);
         } },
-        React__default.createElement(MenuItemContext.Provider, { value: { destructive: props.destructive } }, props.children)));
+        React__default.createElement(MenuItemContext.Provider, { value: { variation: props.variation } }, props.children)));
 });
 const MenuItemContext = createContext(null);
 function useMenuItemContext() {
@@ -361,14 +361,14 @@ function useMenuItemContext() {
     return ctx !== null && ctx !== void 0 ? ctx : {};
 }
 function MenuItemIconComposable(props) {
-    const { destructive } = useMenuItemContext();
+    const { variation } = useMenuItemContext();
     return (React__default.createElement("div", { "data-menu-slot": "icon" },
-        React__default.createElement(Icon, Object.assign({}, props, { color: destructive ? "destructive" : props.color }))));
+        React__default.createElement(Icon, Object.assign({}, props, { color: variation === "destructive" ? "destructive" : props.color }))));
 }
 function MenuItemLabelComposable(props) {
-    const { destructive } = useMenuItemContext();
+    const { variation } = useMenuItemContext();
     return (React__default.createElement("div", { "data-menu-slot": "label" },
-        React__default.createElement(Typography, { element: "span", fontWeight: "semiBold", textColor: destructive ? "destructive" : "text" }, props.children)));
+        React__default.createElement(Typography, { element: "span", fontWeight: "semiBold", textColor: variation === "destructive" ? "destructive" : "text" }, props.children)));
 }
 function MenuHeaderLabel(props) {
     return React__default.createElement(DefaultHeaderContent, null, props.children);

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

@@ -1,4 +1,4 @@
-import type { MutableRefObject, PropsWithChildren, ReactNode } from "react";
+import type { PropsWithChildren, ReactNode, RefObject } from "react";
 import type { ExtendedRefs, FloatingContext, ReferenceType, UseInteractionsReturn } from "@floating-ui/react";
 import type { XOR } from "ts-xor";
 import type sizes from "./ModalSizes.module.css";
@@ -18,7 +18,7 @@ export interface ModalContextType {
      * Ref to specify the activator element. Useful if the activator can unmount
      * and needs to be re-mounted.
      */
-    readonly activatorRef?: MutableRefObject<HTMLElement | null> | null;
+    readonly activatorRef?: RefObject<HTMLElement | null>;
     /**
      * Refs used by floating-ui to position the modal.
      */
@@ -57,7 +57,7 @@ export interface ModalContextType {
      * Tracks whether the current pointer interaction began inside the dialog.
      * Used to disambiguate outsidePress after nested overlay closes.
      */
-    readonly startedInsideRef?: MutableRefObject<boolean>;
+    readonly startedInsideRef?: RefObject<boolean>;
 }
 export interface ModalActionsProps {
     /**

package/dist/Modal/ModalContext.rebuilt.d.ts

@@ -1,4 +1,4 @@
-import type { MutableRefObject } from "react";
+import type { RefObject } from "react";
 import React from "react";
 import type sizes from "./ModalSizes.module.css";
 import type { ModalContextType } from "./Modal.types";
@@ -8,7 +8,7 @@ export interface ModalProviderProps {
     readonly size?: keyof typeof sizes;
     readonly open?: boolean;
     readonly onRequestClose?: () => void;
-    readonly activatorRef?: MutableRefObject<HTMLElement | null> | null;
+    readonly activatorRef?: RefObject<HTMLElement | null>;
     readonly dismissible?: boolean;
     readonly modalLabelledBy?: string;
     readonly ariaLabel?: string;

package/dist/MultiSelect/DropDownMenu.d.ts

@@ -1,5 +1,5 @@
-import type { Dispatch } from "react";
 import React from "react";
+import type { Dispatch } from "react";
 import type { Options } from "./types";
 interface DropDownMenuProps {
     /**

package/dist/MultiSelect/index.cjs

@@ -10,6 +10,7 @@ require('../Icon-cjs.js');
 require('@jobber/design');
 require('../Text-cjs.js');
 require('../Typography-cjs.js');
+require('../filterDataAttributes-cjs.js');
 
 
 

package/dist/MultiSelect/index.mjs

@@ -8,3 +8,4 @@ import '../Icon-es.js';
 import '@jobber/design';
 import '../Text-es.js';
 import '../Typography-es.js';
+import '../filterDataAttributes-es.js';

package/dist/MultiSelect-cjs.js

@@ -12,7 +12,7 @@ var styles = {"dropDownMenuContainer":"zossMHCpMPU-","option":"poS49c-LqiU-","ac
 
 function DropDownMenu({ options, setOptions }) {
     const [highlightedIndex, setHighlightedIndex] = React.useState(0);
-    const menuDiv = React.useRef();
+    const menuDiv = React.useRef(null);
     const handleOptionClick = React.useCallback((clickedOption) => {
         setOptions(current => current.map(option => {
             if (option.label == clickedOption.label) {
@@ -87,13 +87,17 @@ function DropDownMenu({ options, setOptions }) {
         event.preventDefault();
         const newIndex = Math.max(0, highlightedIndex - 1);
         handleOptionFocus(newIndex);
-        scrollMenuIfItemNotInView(menuDiv.current, "up");
+        if (menuDiv.current) {
+            scrollMenuIfItemNotInView(menuDiv.current, "up");
+        }
     }
     function handlePressDown(event) {
         event.preventDefault();
         const newIndex = Math.min(options.length - 1, highlightedIndex + 1);
         handleOptionFocus(newIndex);
-        scrollMenuIfItemNotInView(menuDiv.current, "down");
+        if (menuDiv.current) {
+            scrollMenuIfItemNotInView(menuDiv.current, "down");
+        }
     }
 }
 
@@ -101,15 +105,16 @@ function MultiSelect({ defaultLabel, allSelectedLabel, options, onOptionsChange,
     const [label, setLabel] = React.useState(defaultLabel);
     const [menuVisible, setMenuVisible] = React.useState(false);
     const [focused, setFocused] = React.useState(false);
-    const multiSelectContainer = React.useRef();
-    const multiSelectRef = React.useRef();
+    const multiSelectContainer = React.useRef(null);
+    const multiSelectRef = React.useRef(null);
     const multiSelectClass = classnames(styles$1.multiSelect, {
         [styles$1.active]: menuVisible,
         [styles$1.large]: size === "large",
         [styles$1.small]: size === "small",
     });
     function handleMenuVisibility() {
-        multiSelectRef.current.focus();
+        var _a;
+        (_a = multiSelectRef.current) === null || _a === void 0 ? void 0 : _a.focus();
         setMenuVisible(!menuVisible);
     }
     const handleClickOutside = (e) => {
@@ -119,6 +124,7 @@ function MultiSelect({ defaultLabel, allSelectedLabel, options, onOptionsChange,
         }
     };
     function handleKeydown(event) {
+        var _a;
         const { key, metaKey, ctrlKey } = event;
         if (metaKey || ctrlKey)
             return;
@@ -131,7 +137,7 @@ function MultiSelect({ defaultLabel, allSelectedLabel, options, onOptionsChange,
                 break;
             }
             case "Escape": {
-                multiSelectRef.current.focus();
+                (_a = multiSelectRef.current) === null || _a === void 0 ? void 0 : _a.focus();
                 setMenuVisible(false);
                 break;
             }

package/dist/MultiSelect-es.js

@@ -10,7 +10,7 @@ var styles = {"dropDownMenuContainer":"zossMHCpMPU-","option":"poS49c-LqiU-","ac
 
 function DropDownMenu({ options, setOptions }) {
     const [highlightedIndex, setHighlightedIndex] = useState(0);
-    const menuDiv = useRef();
+    const menuDiv = useRef(null);
     const handleOptionClick = useCallback((clickedOption) => {
         setOptions(current => current.map(option => {
             if (option.label == clickedOption.label) {
@@ -85,13 +85,17 @@ function DropDownMenu({ options, setOptions }) {
         event.preventDefault();
         const newIndex = Math.max(0, highlightedIndex - 1);
         handleOptionFocus(newIndex);
-        scrollMenuIfItemNotInView(menuDiv.current, "up");
+        if (menuDiv.current) {
+            scrollMenuIfItemNotInView(menuDiv.current, "up");
+        }
     }
     function handlePressDown(event) {
         event.preventDefault();
         const newIndex = Math.min(options.length - 1, highlightedIndex + 1);
         handleOptionFocus(newIndex);
-        scrollMenuIfItemNotInView(menuDiv.current, "down");
+        if (menuDiv.current) {
+            scrollMenuIfItemNotInView(menuDiv.current, "down");
+        }
     }
 }
 
@@ -99,15 +103,16 @@ function MultiSelect({ defaultLabel, allSelectedLabel, options, onOptionsChange,
     const [label, setLabel] = useState(defaultLabel);
     const [menuVisible, setMenuVisible] = useState(false);
     const [focused, setFocused] = useState(false);
-    const multiSelectContainer = useRef();
-    const multiSelectRef = useRef();
+    const multiSelectContainer = useRef(null);
+    const multiSelectRef = useRef(null);
     const multiSelectClass = classnames(styles$1.multiSelect, {
         [styles$1.active]: menuVisible,
         [styles$1.large]: size === "large",
         [styles$1.small]: size === "small",
     });
     function handleMenuVisibility() {
-        multiSelectRef.current.focus();
+        var _a;
+        (_a = multiSelectRef.current) === null || _a === void 0 ? void 0 : _a.focus();
         setMenuVisible(!menuVisible);
     }
     const handleClickOutside = (e) => {
@@ -117,6 +122,7 @@ function MultiSelect({ defaultLabel, allSelectedLabel, options, onOptionsChange,
         }
     };
     function handleKeydown(event) {
+        var _a;
         const { key, metaKey, ctrlKey } = event;
         if (metaKey || ctrlKey)
             return;
@@ -129,7 +135,7 @@ function MultiSelect({ defaultLabel, allSelectedLabel, options, onOptionsChange,
                 break;
             }
             case "Escape": {
-                multiSelectRef.current.focus();
+                (_a = multiSelectRef.current) === null || _a === void 0 ? void 0 : _a.focus();
                 setMenuVisible(false);
                 break;
             }

package/dist/RadioGroup/RadioGroup.d.ts

@@ -1,7 +1,8 @@
 import type { ReactElement } from "react";
 import React from "react";
+import type { RadioOptionProps } from "./RadioOption";
 export interface RadioGroupProps {
-    readonly children: ReactElement | ReactElement[];
+    readonly children: ReactElement<RadioOptionProps> | ReactElement<RadioOptionProps>[];
     /**
      * Defines the default value that will be pre-selected in the radio group.
      */

package/dist/RadioGroup/RadioOption.d.ts

@@ -33,7 +33,7 @@ interface WithRequiredChildren extends BaseRadioOptionProps {
 interface WithRequiredLabel extends BaseRadioOptionProps {
     readonly label: string;
 }
-type RadioOptionProps = XOR<WithRequiredChildren, WithRequiredLabel>;
+export type RadioOptionProps = XOR<WithRequiredChildren, WithRequiredLabel>;
 /**
  * For rendering props only. To make updates to
  * the real RadioOption, look at InternalRadioOption

package/dist/RecurringSelect/index.cjs

@@ -9,12 +9,12 @@ require('classnames');
 require('../Select/index.cjs');
 require('../omit-cjs.js');
 require('../_commonjsHelpers-cjs.js');
-require('../_baseGet-cjs.js');
+require('../_getAllKeys-cjs.js');
 require('../isTypedArray-cjs.js');
 require('../isObjectLike-cjs.js');
+require('../isSymbol-cjs.js');
 require('../identity-cjs.js');
 require('../_getTag-cjs.js');
-require('../isSymbol-cjs.js');
 require('../keysIn-cjs.js');
 require('../_baseAssignValue-cjs.js');
 require('../_baseFlatten-cjs.js');
@@ -31,6 +31,7 @@ require('../useFormFieldFocus-cjs.js');
 require('../InputValidation-cjs.js');
 require('../Spinner-cjs.js');
 require('react-hook-form');
+require('../filterDataAttributes-cjs.js');
 require('../InputNumber/index.cjs');
 require('../Tree-cjs.js');
 require('react-dom');

package/dist/RecurringSelect/index.mjs

@@ -7,12 +7,12 @@ import 'classnames';
 import '../Select/index.mjs';
 import '../omit-es.js';
 import '../_commonjsHelpers-es.js';
-import '../_baseGet-es.js';
+import '../_getAllKeys-es.js';
 import '../isTypedArray-es.js';
 import '../isObjectLike-es.js';
+import '../isSymbol-es.js';
 import '../identity-es.js';
 import '../_getTag-es.js';
-import '../isSymbol-es.js';
 import '../keysIn-es.js';
 import '../_baseAssignValue-es.js';
 import '../_baseFlatten-es.js';
@@ -29,6 +29,7 @@ import '../useFormFieldFocus-es.js';
 import '../InputValidation-es.js';
 import '../Spinner-es.js';
 import 'react-hook-form';
+import '../filterDataAttributes-es.js';
 import '../InputNumber/index.mjs';
 import '../Tree-es.js';
 import 'react-dom';

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

@@ -1,4 +1,5 @@
 import type { CommonFormFieldProps, FormFieldProps } from "../FormField";
+import type { FocusEvents, HTMLInputBaseProps, RebuiltInputCommonProps } from "../sharedHelpers/types";
 export interface SelectLegacyProps extends Pick<CommonFormFieldProps, "id" | "align" | "description" | "disabled" | "invalid" | "inline" | "name" | "onValidation" | "placeholder" | "size" | "value" | "onChange">, Pick<FormFieldProps, "autofocus" | "onEnter" | "onBlur" | "onFocus" | "inputRef" | "wrapperRef" | "validations" | "children" | "prefix" | "suffix" | "defaultValue" | "version"> {
     /**
      * Changes the width to roughly the same size as the maximum character length
@@ -8,12 +9,15 @@ export interface SelectLegacyProps extends Pick<CommonFormFieldProps, "id" | "al
 /**
  * Rebuilt version of the Select component without React Hook Form dependency.
  */
-export interface SelectRebuiltProps extends Omit<SelectLegacyProps, "defaultValue" | "version" | "onChange" | "value" | "validations" | "onValidation"> {
+export interface SelectRebuiltProps extends Omit<HTMLInputBaseProps, "readOnly">, FocusEvents<HTMLSelectElement>, Omit<RebuiltInputCommonProps, "clearable" | "prefix" | "suffix" | "align">, Pick<SelectLegacyProps, "prefix" | "suffix" | "align" | "children"> {
     defaultValue?: never;
     readonly value?: string | number;
     onChange?(newValue?: string | number): void;
-    version: 2;
-    error?: string;
+    readonly inputRef?: FormFieldProps["inputRef"];
+    /**
+     * @deprecated Use `onKeyDown` or `onKeyUp` instead.
+     */
+    readonly onEnter?: FormFieldProps["onEnter"];
     /**
      * Opt-in to the customizable select UI (Chromium 123+).
      * When true, the component will apply the custom select styles

package/dist/Select/hooks/useSelectActions.d.ts

@@ -1,15 +1,15 @@
-import type { ChangeEvent } from "react";
+import type { ChangeEvent, FocusEvent } from "react";
 interface UseSelectActionsProps {
     readonly onChange?: (newValue: string | number, event?: ChangeEvent<HTMLSelectElement>) => void;
-    readonly onBlur?: () => void;
-    readonly onFocus?: () => void;
+    readonly onBlur?: (event: FocusEvent<HTMLSelectElement>) => void;
+    readonly onFocus?: (event: FocusEvent<HTMLSelectElement>) => void;
 }
 /**
  * Hook with actions on the Select component.
  */
 export declare function useSelectActions({ onChange, onBlur, onFocus, }: UseSelectActionsProps): {
     handleChange: (event: ChangeEvent<HTMLSelectElement>) => void;
-    handleBlur: () => void;
-    handleFocus: () => void;
+    handleBlur: (event: FocusEvent<HTMLSelectElement>) => void;
+    handleFocus: (event: FocusEvent<HTMLSelectElement>) => void;
 };
 export {};