@sprinklrjs/spaceweb 12.14.4 → 12.33.2

package/esm/baseui/popover/styled-components.js

@@ -0,0 +1,68 @@
+import { __assign } from "tslib";
+/*
+Copyright (c) Uber Technologies, Inc.
+
+This source code is licensed under the MIT license found in the
+LICENSE file in the root directory of this source tree.
+*/
+import { styled } from '../../style';
+import { ARROW_SIZE, ARROW_WIDTH } from './constants';
+import { getPopoverMarginStyles, getArrowPositionStyles, getStartPosition, getEndPosition } from './utils';
+/**
+ * Main popover container element that gets positioned next to the anchor
+ */
+export function getBodyStyles(_, props) {
+    var $animationDuration = props.$animationDuration, $isOpen = props.$isOpen, $isAnimating = props.$isAnimating, $placement = props.$placement, $popoverOffset = props.$popoverOffset, $showArrow = props.$showArrow, $popoverMargin = props.$popoverMargin, $isHoverTrigger = props.$isHoverTrigger;
+    return __assign(__assign({ position: 'absolute', top: 0, left: '0px /* @noflip */', transitionProperty: 'opacity,transform', transitionDuration: $isAnimating ? ($isOpen ? '0.1s' : "".concat($animationDuration, "ms")) : '0s', transitionTimingFunction: $isOpen ? 'ease-out' : 'ease-in', opacity: $isAnimating && $isOpen ? 1 : 0, transform: $isAnimating && $isOpen
+            ? getEndPosition($popoverOffset)
+            : getStartPosition($popoverOffset, $placement, $showArrow ? ARROW_SIZE : 0, $popoverMargin) }, getPopoverMarginStyles($showArrow ? ARROW_SIZE : 0, $placement, $popoverMargin)), ($isHoverTrigger
+        ? {
+            animationDuration: '.1s',
+            animationName: {
+                '0%': { pointerEvents: 'none' },
+                '99%': { pointerEvents: 'none' },
+                '100%': { pointerEvents: 'auto' },
+            },
+        }
+        : {}));
+}
+export var Body = styled('div', getBodyStyles);
+Body.displayName = 'Body';
+/**
+ * Arrow shown between the popover and the anchor element
+ */
+export function getArrowStyles(_, props) {
+    var $arrowOffset = props.$arrowOffset, $placement = props.$placement;
+    return __assign({ width: "".concat(ARROW_WIDTH, "px"), height: "".concat(ARROW_WIDTH, "px"), transform: 'rotate(45deg) /* @noflip */', position: 'absolute' }, getArrowPositionStyles($arrowOffset, $placement));
+}
+export var Arrow = styled('div', getArrowStyles);
+Arrow.displayName = 'Arrow';
+/**
+ * Extra div that holds the popover content. This extra element
+ * is needed for the arrow–the arrow is just a 45deg rotated div,
+ * and rendering this extra element on top with a solid background
+ * clips the part of the arrow that extends into the popover.
+ */
+export function getInnerStyles() {
+    return {
+        position: 'relative',
+    };
+}
+export var Inner = styled('div', getInnerStyles);
+Inner.displayName = 'Inner';
+/**
+ * A drop-in component that provides the recommended padding
+ * for popovers. Mostly a convenience for users so they don't
+ * have to define this themselves.
+ */
+export var Padding = styled('div', {
+    paddingLeft: '12px /* @noflip */',
+    paddingTop: '12px',
+    paddingRight: '12px /* @noflip */',
+    paddingBottom: '12px',
+});
+Padding.displayName = 'Padding';
+export var Hidden = styled('div', {
+    display: 'none',
+});
+Hidden.displayName = 'Hidden';

package/esm/baseui/popover/types.d.ts

@@ -0,0 +1,165 @@
+import type * as React from 'react';
+import type { Override } from '../helpers/overrides';
+import type { TetherPlacement } from '../layer';
+import type { ACCESSIBILITY_TYPE, STATE_CHANGE_TYPE, TRIGGER_TYPE } from './constants';
+export type { PopperDataObject, PopperOffset, PopperOptions } from '../layer';
+export declare type PopoverPlacement = TetherPlacement;
+export declare type TriggerType = keyof typeof TRIGGER_TYPE;
+export declare type AccessibilityType = keyof typeof ACCESSIBILITY_TYPE;
+export declare type State = {
+    isOpen: boolean;
+};
+export declare type StateChangeType = keyof typeof STATE_CHANGE_TYPE;
+export declare type StateReducer = (stateChangeType: StateChangeType, nextState: State, currentState: State) => State;
+export declare type ContentRenderProp = () => React.ReactNode;
+export declare type StatefulContentRenderProp = (a: {
+    close: () => void;
+}) => React.ReactNode;
+export declare type PopoverOverrides = {
+    Body?: Override;
+    Arrow?: Override;
+    Inner?: Override;
+};
+export declare type Child = React.ReactNode;
+export declare type Children = Array<Child> | Child;
+export declare type BasePopoverProps = {
+    /** Controls how this popover behaves for screen readers and other assistive devices.
+     * See the A11Y section at the bottom of this document for more details.
+     */
+    accessibilityType?: AccessibilityType;
+    /** How long should be fade out animation in ms, default 0ms */
+    animateOutTime?: number;
+    /** If true, focus will shift to the first interactive element within the popover.
+     * If false, the popover container itself will receive focus.
+     * Moving focus into a newly opened popover is important for accessibility purposes, so please be careful!
+     */
+    autoFocus?: boolean;
+    /** If true, focus will be locked to elements within the popover.
+     */
+    focusLock?: boolean;
+    'data-baseweb'?: string;
+    id?: string;
+    /** If true, popover element will not avoid element boundaries. */
+    ignoreBoundary?: boolean;
+    /** Where to mount the popover */
+    mountNode?: HTMLElement;
+    /** Handler for blur events on trigger element. */
+    onBlur?: (e: React.FocusEvent) => unknown;
+    /** Handler for click events on trigger element. */
+    onClick?: (e: React.SyntheticEvent) => unknown;
+    /** Handler for 'Esc' keypress events */
+    onFocus?: (e: React.FocusEvent) => unknown;
+    /** Pass FocusOptions for focusing (used as `HtmlElement.focus(focusOptions)`) */
+    focusOptions?: FocusOptions;
+    /** Handler for mouseenter events on trigger element. */
+    onMouseEnter?: (e: React.MouseEvent) => unknown;
+    /** Number of milliseconds to wait before showing the popover after mouse enters the trigger element (for triggerType `hover`). */
+    onMouseEnterDelay?: number;
+    /** Handler for mouseleave events on trigger element. */
+    onMouseLeave?: (e: React.MouseEvent) => unknown;
+    /** Number of milliseconds to wait before showing the popover after mouse leaves the trigger element (for triggerType `hover`). */
+    onMouseLeaveDelay?: number;
+    overrides?: PopoverOverrides;
+    /** How to position the popover relative to the target. */
+    placement?: TetherPlacement;
+    /** Popper options override
+     * https://github.com/popperjs/popper.js/blob/v1.x/docs/_includes/popper-documentation.md
+     */
+    popperOptions?: any;
+    /** Renders all popover content for SEO purposes regardless of popover isOpen state */
+    renderAll?: boolean;
+    /** If true, focus will shift back to the original element that triggered the popover
+     * Be careful with elements that open the popover on focus (e.g. input) this will cause the popover to reopen on close!
+     */
+    returnFocus?: boolean | FocusOptions | ((returnTo: Element) => boolean | FocusOptions);
+    /** Whether or not to show the arrow pointing from the popover to the trigger. */
+    showArrow?: boolean;
+    /** Whether to toggle the popover when trigger is clicked or hovered. */
+    triggerType?: TriggerType;
+    /** Margin of the popover */
+    popoverMargin?: number;
+    /** Reposition popover whenever dimension of popup content or targetElement changes **/
+    repositionOnResize?: boolean;
+};
+export declare type PopoverProps = BasePopoverProps & {
+    /** Content that should trigger the popover to be shown (also acts as the anchor against
+     * which the popover will be positioned).
+     */
+    children: React.ReactNode;
+    /** Content to render within the popover when it's shown. */
+    content: React.ReactNode | ContentRenderProp;
+    /** Whether or not to show the popover. */
+    isOpen: boolean;
+    /** Handler for clicks outside the anchor/popover elements. */
+    onClickOutside?: (event: MouseEvent) => unknown;
+    /** Handler for click events on trigger element. */
+    onEsc?: () => unknown;
+};
+export declare type StatefulPopoverProps = BasePopoverProps & {
+    /** Content that should trigger the popover to be shown (also acts as the anchor against
+     * which the popover will be positioned).
+     */
+    children: React.ReactNode;
+    /** Content to render within the popover when it's shown. */
+    content: React.ReactNode | StatefulContentRenderProp;
+    /** Whether to hide the popover when the user clicks anywhere outside the trigger/popover. */
+    dismissOnClickOutside?: boolean;
+    /** Whether to hide the popover when the user presses the escape key. */
+    dismissOnEsc?: boolean;
+    /** Initial state populated into the component */
+    initialState?: State;
+    /** Event handler when popover is hidden. */
+    onClose?: () => unknown;
+    /** Event handler when popover is shown. */
+    onOpen?: () => unknown;
+    /** Reducer function to manipulate internal state updates. */
+    stateReducer?: StateReducer;
+};
+export declare type StatefulPopoverContainerProps = Omit<StatefulPopoverProps, 'children'> & {
+    children: (props: Omit<PopoverProps, 'children'>) => React.ReactNode;
+};
+export declare type PopoverPropsWithoutChildren = Omit<PopoverProps, 'children'>;
+export declare type Offset = {
+    top: number;
+    left: number;
+};
+export declare type PopoverPrivateState = {
+    isAnimating: boolean;
+    arrowOffset: Offset;
+    popoverOffset: Offset;
+    placement: TetherPlacement;
+    isLayerMounted: boolean;
+    isMounted: boolean;
+    autoFocusAfterPositioning: boolean;
+};
+export declare type ArrowStylePropsArg = {
+    $arrowOffset: Offset;
+    $placement: TetherPlacement;
+};
+export declare type BodyStylePropsArg = {
+    $animationDuration: number;
+    $isAnimating: boolean;
+    $isHoverTrigger: boolean;
+    $isOpen: boolean;
+    $popoverOffset: Offset;
+    $placement: TetherPlacement;
+    $showArrow: boolean;
+    $popoverMargin: number;
+};
+export declare type InnerStylePropsArg = {};
+export declare type SharedStylePropsArg = {} & ArrowStylePropsArg & BodyStylePropsArg;
+export declare type AnchorProps = {
+    'aria-controls'?: string | null;
+    'aria-describedby'?: string | null;
+    'aria-expanded'?: boolean;
+    'aria-haspopup'?: boolean;
+    'aria-owns'?: string | null;
+    id?: string | null;
+    onBlur?: (e: React.FocusEvent) => unknown;
+    onClick?: (e: React.MouseEvent) => unknown;
+    onFocus?: (e: React.FocusEvent) => unknown;
+    onMouseEnter?: (e: React.MouseEvent) => unknown;
+    onMouseLeave?: (e: React.MouseEvent) => unknown;
+    ref?: React.Ref<HTMLElement>;
+    tabIndex?: number;
+};

package/esm/baseui/popover/types.js

@@ -0,0 +1 @@
+export {};

package/esm/baseui/popover/utils.d.ts

@@ -0,0 +1,47 @@
+import type { Offset, PopoverPlacement } from './types';
+/**
+ * Returns the opposite of the specified position. Useful for tooltip
+ * positioning logic.
+ * Examples:
+ * top -> bottom
+ * left -> right
+ */
+export declare function getOppositePosition(position: string): string;
+/**
+ * Determines whether or not the specified position is a vertical one (top or bottom)
+ */
+export declare function isVerticalPosition(position: string): boolean;
+/**
+ * Simple utility function for capitalizing the first letter of a string
+ */
+export declare function capitalize(str: string): string;
+/**
+ * Opposite of function above, converts from Popper.js placement
+ * to our placement prop
+ */
+export declare function fromPopperPlacement(placement: string): PopoverPlacement | null;
+/**
+ * Splits something like 'topLeft' to ['top', 'left'] for easier usage
+ */
+export declare function splitPlacement(placement: PopoverPlacement): string[];
+/**
+ * Returns margin styles to add spacing between the popover
+ * and its anchor.
+ */
+export declare function getPopoverMarginStyles(arrowSize: number, placement: PopoverPlacement, popoverMargin: number): {
+    [x: string]: string;
+} | null;
+/**
+ * Returns CSS rules for the popover animation start keyframe
+ */
+export declare function getStartPosition(offset: Offset, placement: PopoverPlacement, arrowSize: number, popoverMargin: number): string;
+/**
+ * Returns CSS rules for the popover animation end keyframe
+ */
+export declare function getEndPosition(offset: Offset): string;
+/**
+ * Returns top/left styles to position the popover arrow
+ */
+export declare function getArrowPositionStyles(offsets: Offset, placement: PopoverPlacement): {
+    [x: string]: string;
+} | null;

package/esm/baseui/popover/utils.js

@@ -0,0 +1,115 @@
+import { __assign, __read } from "tslib";
+/*
+Copyright (c) Uber Technologies, Inc.
+
+This source code is licensed under the MIT license found in the
+LICENSE file in the root directory of this source tree.
+*/
+/* eslint-disable import/prefer-default-export */
+import { ARROW_SIZE, PLACEMENT } from './constants';
+var OPPOSITE_POSITIONS = {
+    top: 'bottom',
+    bottom: 'top',
+    right: 'left',
+    left: 'right',
+};
+/**
+ * Returns the opposite of the specified position. Useful for tooltip
+ * positioning logic.
+ * Examples:
+ * top -> bottom
+ * left -> right
+ */
+export function getOppositePosition(position) {
+    // @ts-ignore
+    return OPPOSITE_POSITIONS[position];
+}
+/**
+ * Determines whether or not the specified position is a vertical one (top or bottom)
+ */
+export function isVerticalPosition(position) {
+    return position === 'top' || position === 'bottom';
+}
+/**
+ * Simple utility function for capitalizing the first letter of a string
+ */
+export function capitalize(str) {
+    return str.charAt(0).toUpperCase() + str.slice(1);
+}
+/**
+ * Opposite of function above, converts from Popper.js placement
+ * to our placement prop
+ */
+export function fromPopperPlacement(placement) {
+    var popoverPlacement = placement
+        .replace(/(top|bottom)-start$/, '$1Left')
+        .replace(/(top|bottom)-end$/, '$1Right')
+        .replace(/(left|right)-start$/, '$1Top')
+        .replace(/(left|right)-end$/, '$1Bottom');
+    // @ts-ignore
+    return PLACEMENT[popoverPlacement] || null;
+}
+/**
+ * Splits something like 'topLeft' to ['top', 'left'] for easier usage
+ */
+export function splitPlacement(placement) {
+    var matches = placement.match(/^([a-z]+)([A-Z][a-z]+)?/) || [];
+    return matches
+        .slice(1, 3)
+        .filter(Boolean)
+        .map(function (s) { return s.toLowerCase(); });
+}
+/**
+ * Returns margin styles to add spacing between the popover
+ * and its anchor.
+ */
+export function getPopoverMarginStyles(arrowSize, placement, popoverMargin) {
+    var _a;
+    var _b = __read(splitPlacement(placement), 1), position = _b[0];
+    var opposite = getOppositePosition(position);
+    if (!opposite) {
+        return null;
+    }
+    var property = "margin".concat(capitalize(opposite));
+    return _a = {},
+        _a[property] = "".concat(arrowSize + popoverMargin, "px /* @noflip */"),
+        _a;
+}
+/**
+ * Returns CSS rules for the popover animation start keyframe
+ */
+export function getStartPosition(offset, placement, arrowSize, popoverMargin) {
+    offset = __assign({}, offset);
+    var _a = __read(splitPlacement(placement), 1), position = _a[0];
+    var margin = (arrowSize > 0 ? arrowSize : popoverMargin) * 2;
+    if (isVerticalPosition(position)) {
+        offset.top += position === 'top' ? margin : -margin;
+    }
+    else {
+        offset.left += position === 'left' ? margin : -margin;
+    }
+    return "translate3d(".concat(offset.left, "px, ").concat(offset.top, "px, 0) /* @noflip */");
+}
+/**
+ * Returns CSS rules for the popover animation end keyframe
+ */
+export function getEndPosition(offset) {
+    return "translate3d(".concat(offset.left, "px, ").concat(offset.top, "px, 0) /* @noflip */");
+}
+/**
+ * Returns top/left styles to position the popover arrow
+ */
+export function getArrowPositionStyles(offsets, placement) {
+    var _a;
+    var _b = __read(splitPlacement(placement), 1), position = _b[0];
+    var oppositePosition = getOppositePosition(position);
+    if (!oppositePosition) {
+        return null;
+    }
+    var alignmentProperty = isVerticalPosition(position) ? 'left' : 'top';
+    return _a = {},
+        // @ts-ignore
+        _a[alignmentProperty] = "".concat(offsets[alignmentProperty], "px /* @noflip */"),
+        _a[oppositePosition] = "-".concat(ARROW_SIZE - 2, "px /* @noflip */"),
+        _a;
+}

package/esm/baseui/radio/constants.d.ts

@@ -0,0 +1,7 @@
+export declare const STATE_TYPE: {
+    readonly change: "CHANGE";
+};
+export declare const ALIGN: {
+    readonly vertical: "vertical";
+    readonly horizontal: "horizontal";
+};

package/esm/baseui/radio/constants.js

@@ -0,0 +1,15 @@
+/*
+Copyright (c) Uber Technologies, Inc.
+
+This source code is licensed under the MIT license found in the
+LICENSE file in the root directory of this source tree.
+*/
+/* eslint-disable import/prefer-default-export */
+export var STATE_TYPE = {
+    change: 'CHANGE',
+};
+export var ALIGN = {
+    vertical: 'vertical',
+    horizontal: 'horizontal',
+};
+/* eslint-enable import/prefer-default-export */

package/esm/baseui/radio/index.d.ts

@@ -0,0 +1,7 @@
+export { default as StatefulRadioGroup } from './stateful-radiogroup';
+export { default as StatefulContainer } from './stateful-radiogroup-container';
+export { default as RadioGroup } from './radiogroup';
+export { Root as StyledRoot, Label as StyledLabel, Input as StyledInput, Description as StyledDescription, RadioMarkInner as StyledRadioMarkInner, RadioMarkOuter as StyledRadioMarkOuter, RadioGroupRoot as StyledRadioGroupRoot, } from './styled-components';
+export { default as Radio } from './radio';
+export * from './types';
+export { ALIGN } from './constants';

package/esm/baseui/radio/index.js

@@ -0,0 +1,14 @@
+/*
+Copyright (c) Uber Technologies, Inc.
+
+This source code is licensed under the MIT license found in the
+LICENSE file in the root directory of this source tree.
+*/
+export { default as StatefulRadioGroup } from './stateful-radiogroup';
+export { default as StatefulContainer } from './stateful-radiogroup-container';
+export { default as RadioGroup } from './radiogroup';
+// Styled elements
+export { Root as StyledRoot, Label as StyledLabel, Input as StyledInput, Description as StyledDescription, RadioMarkInner as StyledRadioMarkInner, RadioMarkOuter as StyledRadioMarkOuter, RadioGroupRoot as StyledRadioGroupRoot, } from './styled-components';
+export { default as Radio } from './radio';
+export * from './types';
+export { ALIGN } from './constants';

package/esm/baseui/radio/radio.d.ts

@@ -0,0 +1,33 @@
+import * as React from 'react';
+import type { RadioProps, RadioState } from './types';
+import type { ChangeEvent } from 'react';
+declare class Radio extends React.Component<RadioProps, RadioState> {
+    static defaultProps: {
+        overrides: {};
+        containsInteractiveElement: boolean;
+        checked: boolean;
+        disabled: boolean;
+        autoFocus: boolean;
+        inputRef: React.RefObject<HTMLInputElement>;
+        align: string;
+        error: boolean;
+        onChange: () => void;
+        onMouseEnter: () => void;
+        onMouseLeave: () => void;
+        onMouseDown: () => void;
+        onMouseUp: () => void;
+        onFocus: () => void;
+        onBlur: () => void;
+    };
+    state: {
+        isActive: boolean;
+        isHovered: boolean;
+    };
+    componentDidMount(): void;
+    onMouseEnter: (e: ChangeEvent<HTMLInputElement>) => void;
+    onMouseLeave: (e: ChangeEvent<HTMLInputElement>) => void;
+    onMouseDown: (e: ChangeEvent<HTMLInputElement>) => void;
+    onMouseUp: (e: ChangeEvent<HTMLInputElement>) => void;
+    render(): import("react/jsx-runtime").JSX.Element;
+}
+export default Radio;

package/esm/baseui/radio/radio.js

@@ -0,0 +1,104 @@
+import { __assign, __extends, __read } from "tslib";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/*
+Copyright (c) Uber Technologies, Inc.
+
+This source code is licensed under the MIT license found in the
+LICENSE file in the root directory of this source tree.
+*/
+import * as React from 'react';
+import { getOverrides } from '../helpers/overrides';
+import { Root as StyledRoot, Label as StyledLabel, Input as StyledInput, RadioMarkInner as StyledRadioMarkInner, RadioMarkOuter as StyledRadioMarkOuter, Description as StyledDescription, } from './styled-components';
+// @ts-ignore
+function isLabelTopLeft(labelPlacement) {
+    return labelPlacement === 'top' || labelPlacement === 'left';
+}
+// @ts-ignore
+function isLabelBottomRight(labelPlacement) {
+    return labelPlacement === 'bottom' || labelPlacement === 'right';
+}
+// @ts-ignore
+var stopPropagation = function (e) { return e.stopPropagation(); };
+var Radio = /** @class */ (function (_super) {
+    __extends(Radio, _super);
+    function Radio() {
+        var _this = _super !== null && _super.apply(this, arguments) || this;
+        _this.state = {
+            isActive: false,
+            isHovered: false,
+        };
+        _this.onMouseEnter = function (e) {
+            _this.setState({ isHovered: true });
+            _this.props.onMouseEnter && _this.props.onMouseEnter(e);
+        };
+        _this.onMouseLeave = function (e) {
+            _this.setState({ isHovered: false });
+            _this.props.onMouseLeave && _this.props.onMouseLeave(e);
+        };
+        _this.onMouseDown = function (e) {
+            _this.setState({ isActive: true });
+            _this.props.onMouseDown && _this.props.onMouseDown(e);
+        };
+        _this.onMouseUp = function (e) {
+            _this.setState({ isActive: false });
+            _this.props.onMouseUp && _this.props.onMouseUp(e);
+        };
+        return _this;
+    }
+    Radio.prototype.componentDidMount = function () {
+        var _a;
+        if (this.props.autoFocus && ((_a = this.props.inputRef) === null || _a === void 0 ? void 0 : _a.current)) {
+            this.props.inputRef.current.focus();
+        }
+    };
+    Radio.prototype.render = function () {
+        var _a = this.props.overrides, overrides = _a === void 0 ? {} : _a;
+        var _b = __read(getOverrides(overrides.Root, StyledRoot), 2), Root = _b[0], rootProps = _b[1];
+        var _c = __read(getOverrides(overrides.Label, StyledLabel), 2), Label = _c[0], labelProps = _c[1];
+        var _d = __read(getOverrides(overrides.Input, StyledInput), 2), Input = _d[0], inputProps = _d[1];
+        var _e = __read(getOverrides(overrides.Description, StyledDescription), 2), Description = _e[0], descriptionProps = _e[1];
+        var _f = __read(getOverrides(overrides.RadioMarkInner, StyledRadioMarkInner), 2), RadioMarkInner = _f[0], radioMarkInnerProps = _f[1];
+        var _g = __read(getOverrides(overrides.RadioMarkOuter, StyledRadioMarkOuter), 2), RadioMarkOuter = _g[0], radioMarkOuterProps = _g[1];
+        var sharedProps = {
+            $align: this.props.align,
+            $checked: this.props.checked,
+            $disabled: this.props.disabled,
+            $hasDescription: !!this.props.description,
+            $isActive: this.state.isActive,
+            $error: this.props.error,
+            $isFocused: this.props.isFocused,
+            $isFocusVisible: this.props.isFocused && this.props.isFocusVisible,
+            $isHovered: this.state.isHovered,
+            $labelPlacement: this.props.labelPlacement,
+            $required: this.props.required,
+            $value: this.props.value,
+        };
+        var label = (_jsx(Label, __assign({}, sharedProps, labelProps, { children: this.props.containsInteractiveElement ? (
+            // Prevents the event from bubbling up to the label and moving focus to the radio button
+            // eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions
+            _jsx("div", __assign({ onClick: function (e) { return e.preventDefault(); } }, { children: this.props.children }), void 0)) : (this.props.children) }), void 0));
+        return (_jsxs(React.Fragment, { children: [_jsxs(Root, __assign({ "data-baseweb": "radio", onMouseEnter: this.onMouseEnter, onMouseLeave: this.onMouseLeave, onMouseDown: this.onMouseDown, onMouseUp: this.onMouseUp }, sharedProps, rootProps, { children: [isLabelTopLeft(this.props.labelPlacement) && label, _jsx(RadioMarkOuter, __assign({}, sharedProps, radioMarkOuterProps, { children: _jsx(RadioMarkInner, __assign({}, sharedProps, radioMarkInnerProps), void 0) }), void 0), _jsx(Input, __assign({ "aria-invalid": this.props.error || null, checked: this.props.checked, disabled: this.props.disabled, name: this.props.name, onBlur: this.props.onBlur, onFocus: this.props.onFocus, 
+                            // Prevent a second click event from firing when label is clicked.
+                            // See https://github.com/uber/baseweb/issues/3847 & https://github.com/uber/baseweb/issues/4033
+                            onClick: stopPropagation, onChange: this.props.onChange, ref: this.props.inputRef, required: this.props.required, tabIndex: this.props.tabIndex, type: "radio", value: this.props.value }, sharedProps, inputProps), void 0), isLabelBottomRight(this.props.labelPlacement) && label] }), void 0), !!this.props.description && (_jsx(Description, __assign({}, sharedProps, descriptionProps, { children: this.props.description }), void 0))] }, void 0));
+    };
+    Radio.defaultProps = {
+        overrides: {},
+        containsInteractiveElement: false,
+        checked: false,
+        disabled: false,
+        autoFocus: false,
+        inputRef: React.createRef(),
+        align: 'vertical',
+        error: false,
+        onChange: function () { },
+        onMouseEnter: function () { },
+        onMouseLeave: function () { },
+        onMouseDown: function () { },
+        onMouseUp: function () { },
+        onFocus: function () { },
+        onBlur: function () { },
+    };
+    return Radio;
+}(React.Component));
+export default Radio;

package/esm/baseui/radio/radiogroup.d.ts

@@ -0,0 +1,14 @@
+import * as React from 'react';
+import type { RadioGroupProps, DefaultProps, StatelessState } from './types';
+import type { ChangeEvent } from 'react';
+declare class StatelessRadioGroup extends React.Component<RadioGroupProps, StatelessState> {
+    static defaultProps: DefaultProps;
+    state: {
+        isFocusVisible: boolean;
+        focusedRadioIndex: number;
+    };
+    handleFocus: (event: ChangeEvent<HTMLInputElement>, index: number) => void;
+    handleBlur: (event: ChangeEvent<HTMLInputElement>, index: number) => void;
+    render(): import("react/jsx-runtime").JSX.Element;
+}
+export default StatelessRadioGroup;