@sprinklrjs/spaceweb 12.14.4 → 12.33.2

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

@@ -0,0 +1,170 @@
+import type * as React from 'react';
+import type { Properties } from 'csstype';
+import type { Override } from '../helpers/overrides';
+import type { STATE_CHANGE_TYPE, ADJOINED, SIZE, ENHANCER_POSITION } from './constants';
+export declare type Adjoined = keyof typeof ADJOINED;
+export declare type Size = keyof typeof SIZE;
+export declare type StateType = keyof typeof STATE_CHANGE_TYPE;
+export declare type InternalState = {
+    /** Renders UI in 'focus' state */
+    isFocused?: boolean;
+    /** Renders input in 'masked' state if type equals "password" */
+    isMasked?: boolean;
+    /** Tracks if focus should be visible on the clear button. */
+    isFocusVisibleForClear?: boolean;
+    /** Tracks if focus should be visible on the mask toggle button. */
+    isFocusVisibleForMaskToggle?: boolean;
+};
+export declare type State = {
+    value?: string | number;
+};
+export declare type StateReducer = (stateType: StateType, nextState: State, currentState: State) => State;
+export declare type SharedProps = {
+    /** Renders UI in 'focus' state */
+    $isFocused?: boolean;
+    /** Renders UI in 'readOnly' state */
+    $isReadOnly?: boolean;
+    /** Renders UI in 'disabled' state */
+    $disabled?: boolean;
+    /** Renders UI in 'error' state */
+    $error?: boolean;
+    /** Renders UI in 'positive' state */
+    $positive?: boolean;
+    /** Defines styles for inputs that are grouped with other controls. */
+    $adjoined: Adjoined;
+    /** Renders UI in provided size. */
+    $size: Size;
+    /** Renders UI in 'required' state */
+    $required?: boolean;
+    $resize?: Properties['resize'];
+    $position?: keyof typeof ENHANCER_POSITION;
+    /** Defines if has a clearable or MaskToggleButton at the end */
+    $hasIconTrailing?: boolean;
+};
+export declare type BaseInputOverrides = {
+    InputContainer?: Override;
+    Input?: Override;
+    Before?: Override;
+    After?: Override;
+    ClearIcon?: Override;
+    ClearIconContainer?: Override;
+    MaskToggleButton?: Override;
+    MaskToggleShowIcon?: Override;
+    MaskToggleHideIcon?: Override;
+};
+export declare type InputOverrides = {
+    Root?: Override;
+    StartEnhancer?: Override;
+    EndEnhancer?: Override;
+} & BaseInputOverrides;
+export declare type BaseInputProps<T> = {
+    'aria-activedescendant'?: string;
+    'aria-autocomplete'?: string;
+    'aria-controls'?: string;
+    /** Id of element which contains a related error message */
+    'aria-errormessage'?: string;
+    /** Sets aria-haspopup attribute. */
+    'aria-haspopup'?: string;
+    /** Sets aria-label attribute. */
+    'aria-label'?: string;
+    /** Sets aria-labelledby attribute. */
+    'aria-labelledby'?: string;
+    /** Sets aria-describedby attribute. */
+    'aria-describedby'?: string;
+    /** Defines styles for inputs that are grouped with other controls. */
+    adjoined?: Adjoined;
+    /** Determines if browser should provide value suggestions. */
+    autoComplete?: string;
+    /** If true the input will be focused on the first mount. */
+    autoFocus?: boolean;
+    /** Renders component in 'disabled' state. */
+    disabled?: boolean;
+    /** Renders component in 'error' state. */
+    error?: boolean;
+    /** Renders component in 'positive' state. */
+    positive?: boolean;
+    /** A regex that is used to validate the value of the input on form submission. The Input component must be wrapped in a form element */
+    pattern?: string;
+    /** Id attribute value to be added to the input element and as a label's for attribute value. */
+    id?: string;
+    'data-baseweb'?: string;
+    /** A  hint as to the type of data that might be entered by the user while editing the element or its contents. */
+    inputMode?: string;
+    /** A ref to access an input element. */
+    inputRef?: React.RefObject<T>;
+    name?: string;
+    onBlur?: (e: React.FocusEvent<T>) => void;
+    onChange?: (e: React.ChangeEvent<T>) => void;
+    onKeyDown?: (e: React.KeyboardEvent<T>) => void;
+    onKeyPress?: (e: React.KeyboardEvent<T>) => void;
+    onKeyUp?: (e: React.KeyboardEvent<T>) => void;
+    onFocus?: (e: React.FocusEvent<T>) => void;
+    /** If true, adds a clear value icon button to the end of the input container. */
+    clearable?: boolean;
+    /** If undefined or true, clears the input when the Escape button is pressed with the input focused. True by default. */
+    clearOnEscape?: boolean;
+    maxLength?: number;
+    onClear?: (e: React.SyntheticEvent<T>) => void;
+    overrides?: BaseInputOverrides;
+    placeholder?: string;
+    /** Renders component in 'required' state. */
+    required?: boolean;
+    resize?: Properties['resize'];
+    /** Input role attribute. */
+    role?: string;
+    /** Renders component in provided size. */
+    size?: Size;
+    /** Input type attribute. */
+    type?: string;
+    /** Input value attribute. */
+    value?: string | number;
+    rows?: number;
+    /** min value when used as input type=number */
+    min?: number;
+    /** max value when used as input type=number */
+    max?: number;
+    /** step value when used as input type=number */
+    step?: number | 'any';
+    /** Renders component in 'readOnly' state. */
+    readOnly?: boolean;
+};
+export declare type InputProps = {
+    overrides?: InputOverrides;
+    /** An input helper rendered before and attached to the input field. */
+    startEnhancer?: React.ReactNode | ((props: SharedProps) => React.ReactNode);
+    /** An input helper rendered after and attached to the input field. */
+    endEnhancer?: React.ReactNode | ((props: SharedProps) => React.ReactNode);
+    /** Handler for the `focus` event. */
+    onFocus?: (e: React.FocusEvent<HTMLInputElement | HTMLTextAreaElement>) => void;
+    /** Handler for the `blur` event. */
+    onBlur?: (e: React.FocusEvent<HTMLInputElement | HTMLTextAreaElement>) => void;
+} & BaseInputProps<HTMLInputElement | HTMLTextAreaElement>;
+export declare type MaskedInputProps = Partial<{
+    /** See mask examples here: https://github.com/sanniassin/react-input-mask */
+    mask?: string;
+    /** Character to render for unfilled mask element. */
+    maskChar?: string;
+} & InputProps>;
+export declare type StatefulContainerChildrenProps<T> = {
+    onChange: (e: React.ChangeEvent<T>) => void;
+    /** If true, adds a clear value icon button to the end of the input container. */
+    clearable?: boolean;
+} & StatefulInputProps;
+export declare type StatefulContainerProps<T> = {
+    children: (props: StatefulContainerChildrenProps<T>) => React.ReactNode;
+    /** Initial state of an uncontrolled input component. */
+    initialState?: State;
+    /** A state change handler. Used to override default state transitions. */
+    stateReducer?: StateReducer;
+    onChange?: (e: React.ChangeEvent<T>) => void;
+    /** If true, adds a clear value icon button to the end of the input container. */
+    clearable?: boolean;
+} & {
+    overrides?: InputOverrides;
+} & Omit<InputProps, 'overrides' | 'children'>;
+declare type FullStProps = InputProps & StatefulContainerProps<HTMLInputElement | HTMLTextAreaElement>;
+export declare type StInputPropsDiff = Omit<FullStProps, 'overrides' | 'children'>;
+export declare type StatefulInputProps = {
+    overrides?: InputOverrides;
+} & StInputPropsDiff;
+export {};

package/esm/baseui/input/types.js

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

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

@@ -0,0 +1,2 @@
+import type { InputProps, BaseInputProps, InternalState, SharedProps } from './types';
+export declare function getSharedProps<T>(props: BaseInputProps<T> | InputProps, state: InternalState): SharedProps;

package/esm/baseui/input/utils.js

@@ -0,0 +1,17 @@
+export function getSharedProps(props, state) {
+    var disabled = props.disabled, error = props.error, positive = props.positive, adjoined = props.adjoined, size = props.size, required = props.required, resize = props.resize, readOnly = props.readOnly;
+    var isFocused = state.isFocused;
+    return {
+        $isFocused: isFocused,
+        $disabled: disabled,
+        $error: error,
+        $positive: positive,
+        // @ts-ignore
+        $adjoined: adjoined,
+        // @ts-ignore
+        $size: size,
+        $required: required,
+        $resize: resize,
+        $isReadOnly: readOnly,
+    };
+}

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

@@ -0,0 +1,15 @@
+export declare const TETHER_PLACEMENT: {
+    readonly auto: "auto";
+    readonly topLeft: "topLeft";
+    readonly top: "top";
+    readonly topRight: "topRight";
+    readonly rightTop: "rightTop";
+    readonly right: "right";
+    readonly rightBottom: "rightBottom";
+    readonly bottomRight: "bottomRight";
+    readonly bottom: "bottom";
+    readonly bottomLeft: "bottomLeft";
+    readonly leftBottom: "leftBottom";
+    readonly left: "left";
+    readonly leftTop: "leftTop";
+};

package/esm/baseui/layer/constants.js

@@ -0,0 +1,21 @@
+/*
+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 var TETHER_PLACEMENT = {
+    auto: 'auto',
+    topLeft: 'topLeft',
+    top: 'top',
+    topRight: 'topRight',
+    rightTop: 'rightTop',
+    right: 'right',
+    rightBottom: 'rightBottom',
+    bottomRight: 'bottomRight',
+    bottom: 'bottom',
+    bottomLeft: 'bottomLeft',
+    leftBottom: 'leftBottom',
+    left: 'left',
+    leftTop: 'leftTop',
+};

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

@@ -0,0 +1,5 @@
+export { default as LayersManager, LayersContext } from './layers-manager';
+export { default as Layer } from './layer';
+export { default as TetherBehavior } from './tether';
+export { TETHER_PLACEMENT } from './constants';
+export * from './types';

package/esm/baseui/layer/index.js

@@ -0,0 +1,11 @@
+/*
+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 LayersManager, LayersContext } from './layers-manager';
+export { default as Layer } from './layer';
+export { default as TetherBehavior } from './tether';
+export { TETHER_PLACEMENT } from './constants';
+export * from './types';

package/esm/baseui/layer/layer.d.ts

@@ -0,0 +1,2 @@
+import type { LayerProps } from './types';
+export default function Layer(props: LayerProps): import("react/jsx-runtime").JSX.Element;

package/esm/baseui/layer/layer.js

@@ -0,0 +1,159 @@
+import { __assign, __extends } from "tslib";
+import { jsx as _jsx } 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.
+*/
+/* global document */
+import * as React from 'react';
+import ReactDOM from 'react-dom';
+import { styled } from '../../style';
+import { LayersContext, Consumer, isServer } from './layers-manager';
+// import { isServer } from '../../spacewebProvider';
+var Container = styled('div', 'absolute top-0 left-0 right-0', function (_, _a) {
+    var $zIndex = _a.$zIndex;
+    return ({
+        zIndex: $zIndex || null,
+    });
+});
+var LayerComponent = /** @class */ (function (_super) {
+    __extends(LayerComponent, _super);
+    function LayerComponent() {
+        var _this = _super !== null && _super.apply(this, arguments) || this;
+        _this.container = null;
+        // eslint-disable-next-line react/no-unused-state -- being used to trigger re-render
+        _this.state = { container: null };
+        _this.onEscape = function () {
+            if (_this.props.onEscape) {
+                _this.props.onEscape();
+            }
+        };
+        _this.onKeyDown = function (event) {
+            if (_this.props.onKeyDown) {
+                _this.props.onKeyDown(event);
+            }
+        };
+        _this.onKeyUp = function (event) {
+            if (_this.props.onKeyUp) {
+                _this.props.onKeyUp(event);
+            }
+        };
+        _this.onKeyPress = function (event) {
+            if (_this.props.onKeyPress) {
+                _this.props.onKeyPress(event);
+            }
+        };
+        _this.onDocumentClick = function (event) {
+            if (_this.props.onDocumentClick) {
+                _this.props.onDocumentClick(event);
+            }
+        };
+        return _this;
+    }
+    LayerComponent.prototype.componentDidMount = function () {
+        this.context.addEscapeHandler(this.onEscape);
+        this.context.addKeyDownHandler(this.onKeyDown);
+        this.context.addKeyUpHandler(this.onKeyUp);
+        this.context.addKeyPressHandler(this.onKeyPress);
+        if (!this.props.isHoverLayer) {
+            this.context.addDocClickHandler(this.onDocumentClick);
+        }
+        var _a = this.props, onMount = _a.onMount, mountNode = _a.mountNode, layersManagerHost = _a.host;
+        if (mountNode) {
+            onMount && onMount();
+            return;
+        }
+        // There was no LayersManager added if this.props.host === undefined.
+        // Use document.body is the case no LayersManager is used.
+        var hasLayersManager = layersManagerHost !== undefined;
+        if (process.env.NODE_ENV !== 'production') {
+            if (!hasLayersManager) {
+                console.warn('`LayersManager` was not found. This occurs if you are attempting to use a component requiring `Layer` without using the `BaseProvider` at the root of your app. Please visit https://baseweb.design/components/base-provider/ for more information');
+            }
+        }
+        var host = hasLayersManager ? layersManagerHost : document.body;
+        if (host) {
+            this.addContainer(host);
+        }
+    };
+    // @ts-ignore
+    LayerComponent.prototype.componentDidUpdate = function (prevProps) {
+        var _a = this.props, host = _a.host, mountNode = _a.mountNode;
+        if (mountNode) {
+            return;
+        }
+        if (host && host !== prevProps.host && prevProps.host === null) {
+            this.addContainer(host);
+        }
+        if (prevProps.isHoverLayer != this.props.isHoverLayer) {
+            if (this.props.isHoverLayer) {
+                this.context.removeDocClickHandler(this.onDocumentClick);
+            }
+            else {
+                this.context.addDocClickHandler(this.onDocumentClick);
+            }
+        }
+    };
+    LayerComponent.prototype.componentWillUnmount = function () {
+        this.context.removeEscapeHandler(this.onEscape);
+        this.context.removeKeyDownHandler(this.onKeyDown);
+        this.context.removeKeyUpHandler(this.onKeyUp);
+        this.context.removeKeyPressHandler(this.onKeyPress);
+        this.context.removeDocClickHandler(this.onDocumentClick);
+        if (this.props.onUnmount) {
+            this.props.onUnmount();
+        }
+        var host = this.props.host;
+        var container = this.container;
+        if (host && container) {
+            if (host.contains(container)) {
+                host.removeChild(container);
+            }
+        }
+    };
+    // @ts-ignore
+    LayerComponent.prototype.addContainer = function (host) {
+        var _a = this.props, index = _a.index, mountNode = _a.mountNode, onMount = _a.onMount;
+        // Do nothing if mountNode is provided
+        if (mountNode) {
+            return;
+        }
+        if (host) {
+            var container = host.ownerDocument.createElement('div');
+            // `host` is an DOM node, but not a React component
+            var sibling = typeof index === 'number' ? host.children[index] : null;
+            sibling ? host.insertBefore(container, sibling) : host.appendChild(container);
+            this.container = container;
+            // eslint-disable-next-line react/no-unused-state -- being used to trigger re-render
+            this.setState({ container: container }, function () {
+                onMount && onMount();
+            });
+        }
+    };
+    LayerComponent.prototype.render = function () {
+        var container = this.container;
+        var _a = this.props, children = _a.children, mountNode = _a.mountNode, zIndex = _a.zIndex;
+        // Only adding an additional wrapper when a layer has z-index to be set
+        var childrenToRender = zIndex ? _jsx(Container, __assign({ "$zIndex": zIndex }, { children: children }), void 0) : children;
+        if (!isServer) {
+            if (mountNode) {
+                return ReactDOM.createPortal(childrenToRender, mountNode);
+            }
+            else if (container) {
+                return ReactDOM.createPortal(childrenToRender, container);
+            }
+            return null;
+        }
+        return null;
+    };
+    LayerComponent.contextType = LayersContext;
+    return LayerComponent;
+}(React.Component));
+export default function Layer(props) {
+    return _jsx(Consumer, { children: function (_a) {
+            var host = _a.host, zIndex = _a.zIndex;
+            return _jsx(LayerComponent, __assign({}, props, { host: host, zIndex: zIndex }), void 0);
+        } }, void 0);
+}

package/esm/baseui/layer/layers-manager.d.ts

@@ -0,0 +1,28 @@
+import * as React from 'react';
+import type { LayersManagerProps, LayersManagerState, LayersContextProps } from './types';
+export declare const isServer: boolean;
+export declare const LayersContext: React.Context<LayersContextProps>;
+export declare const Provider: React.Provider<LayersContextProps>;
+export declare const Consumer: React.Consumer<LayersContextProps>;
+export default class LayersManager extends React.Component<LayersManagerProps, LayersManagerState> {
+    host: React.RefObject<HTMLElement>;
+    containerRef: React.RefObject<any>;
+    constructor(props: LayersManagerProps);
+    componentDidMount(): void;
+    componentWillUnmount(): void;
+    onDocumentClick: (event: MouseEvent) => void;
+    onKeyDown: (event: KeyboardEvent) => void;
+    onKeyUp: (event: KeyboardEvent) => void;
+    onKeyPress: (event: KeyboardEvent) => void;
+    onAddEscapeHandler: (escapeKeyHandler: () => unknown) => void;
+    onRemoveEscapeHandler: (escapeKeyHandler: () => unknown) => void;
+    onAddKeyDownHandler: (keyDownHandler: (event: KeyboardEvent) => void) => void;
+    onRemoveKeyDownHandler: (keyDownHandler: (event: KeyboardEvent) => void) => void;
+    onAddKeyUpHandler: (keyUpHandler: (event: KeyboardEvent) => void) => void;
+    onRemoveKeyUpHandler: (keyUpHandler: (event: KeyboardEvent) => void) => void;
+    onAddKeyPressHandler: (keyPressHandler: (event: KeyboardEvent) => void) => void;
+    onRemoveKeyPressHandler: (keyPressHandler: (event: KeyboardEvent) => void) => void;
+    onAddDocClickHandler: (docClickHandler: (event: MouseEvent) => void) => void;
+    onRemoveDocClickHandler: (docClickHandler: (event: MouseEvent) => void) => void;
+    render(): import("react/jsx-runtime").JSX.Element;
+}

package/esm/baseui/layer/layers-manager.js

@@ -0,0 +1,168 @@
+import { __assign, __extends, __read, __spreadArray } from "tslib";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from 'react';
+import { styled } from '../../style';
+import { getOverrides } from '../helpers/overrides';
+import { initFocusVisible } from '../utils/focusVisible';
+export var isServer = typeof window === 'undefined';
+var StyledAppContainer = styled('div', {});
+var StyledLayersContainer = styled('div', {});
+var __DEV__ = process.env.NODE_ENV !== 'production';
+function defaultEventHandlerFn() {
+    if (__DEV__) {
+        console.warn('`LayersManager` was not found. This occurs if you are attempting to use a component requiring `Layer` without using the `BaseProvider` at the root of your app. Please visit https://baseweb.design/components/base-provider/ for more information');
+    }
+}
+export var LayersContext = React.createContext({
+    addEscapeHandler: defaultEventHandlerFn,
+    removeEscapeHandler: defaultEventHandlerFn,
+    addKeyDownHandler: defaultEventHandlerFn,
+    removeKeyDownHandler: defaultEventHandlerFn,
+    addKeyUpHandler: defaultEventHandlerFn,
+    removeKeyUpHandler: defaultEventHandlerFn,
+    addKeyPressHandler: defaultEventHandlerFn,
+    removeKeyPressHandler: defaultEventHandlerFn,
+    addDocClickHandler: defaultEventHandlerFn,
+    removeDocClickHandler: defaultEventHandlerFn,
+    host: undefined,
+    zIndex: undefined,
+});
+export var Provider = LayersContext.Provider;
+export var Consumer = LayersContext.Consumer;
+var LayersManager = /** @class */ (function (_super) {
+    __extends(LayersManager, _super);
+    function LayersManager(props) {
+        var _this = _super.call(this, props) || this;
+        _this.host = React.createRef();
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        _this.containerRef = React.createRef();
+        _this.onDocumentClick = function (event) {
+            var docClickHandler = _this.state.docClickHandlers[_this.state.docClickHandlers.length - 1];
+            if (docClickHandler) {
+                docClickHandler(event);
+            }
+        };
+        _this.onKeyDown = function (event) {
+            var keyDownHandler = _this.state.keyDownHandlers[_this.state.keyDownHandlers.length - 1];
+            if (keyDownHandler) {
+                keyDownHandler(event);
+            }
+        };
+        _this.onKeyUp = function (event) {
+            if (event.key === 'Escape') {
+                var escapeKeyHandler = _this.state.escapeKeyHandlers[_this.state.escapeKeyHandlers.length - 1];
+                if (escapeKeyHandler) {
+                    escapeKeyHandler();
+                }
+            }
+            var keyUpHandler = _this.state.keyUpHandlers[_this.state.keyUpHandlers.length - 1];
+            if (keyUpHandler) {
+                keyUpHandler(event);
+            }
+        };
+        _this.onKeyPress = function (event) {
+            var keyPressHandler = _this.state.keyPressHandlers[_this.state.keyPressHandlers.length - 1];
+            if (keyPressHandler) {
+                keyPressHandler(event);
+            }
+        };
+        _this.onAddEscapeHandler = function (escapeKeyHandler) {
+            _this.setState(function (prev) { return ({ escapeKeyHandlers: __spreadArray(__spreadArray([], __read(prev.escapeKeyHandlers), false), [escapeKeyHandler], false) }); });
+        };
+        _this.onRemoveEscapeHandler = function (escapeKeyHandler) {
+            _this.setState(function (prev) { return ({
+                escapeKeyHandlers: prev.escapeKeyHandlers.filter(function (handler) { return handler !== escapeKeyHandler; }),
+            }); });
+        };
+        _this.onAddKeyDownHandler = function (keyDownHandler) {
+            _this.setState(function (prev) { return ({ keyDownHandlers: __spreadArray(__spreadArray([], __read(prev.keyDownHandlers), false), [keyDownHandler], false) }); });
+        };
+        _this.onRemoveKeyDownHandler = function (keyDownHandler) {
+            _this.setState(function (prev) { return ({
+                keyDownHandlers: prev.keyDownHandlers.filter(function (handler) { return handler !== keyDownHandler; }),
+            }); });
+        };
+        _this.onAddKeyUpHandler = function (keyUpHandler) {
+            _this.setState(function (prev) { return ({ keyUpHandlers: __spreadArray(__spreadArray([], __read(prev.keyUpHandlers), false), [keyUpHandler], false) }); });
+        };
+        _this.onRemoveKeyUpHandler = function (keyUpHandler) {
+            _this.setState(function (prev) { return ({
+                keyUpHandlers: prev.keyUpHandlers.filter(function (handler) { return handler !== keyUpHandler; }),
+            }); });
+        };
+        _this.onAddKeyPressHandler = function (keyPressHandler) {
+            _this.setState(function (prev) { return ({ keyPressHandlers: __spreadArray(__spreadArray([], __read(prev.keyPressHandlers), false), [keyPressHandler], false) }); });
+        };
+        _this.onRemoveKeyPressHandler = function (keyPressHandler) {
+            _this.setState(function (prev) { return ({
+                keyPressHandlers: prev.keyPressHandlers.filter(function (handler) { return handler !== keyPressHandler; }),
+            }); });
+        };
+        _this.onAddDocClickHandler = function (docClickHandler) {
+            _this.setState(function (prev) { return ({ docClickHandlers: __spreadArray(__spreadArray([], __read(prev.docClickHandlers), false), [docClickHandler], false) }); });
+        };
+        _this.onRemoveDocClickHandler = function (docClickHandler) {
+            _this.setState(function (prev) { return ({
+                docClickHandlers: prev.docClickHandlers.filter(function (handler) { return handler !== docClickHandler; }),
+            }); });
+        };
+        _this.state = {
+            escapeKeyHandlers: [],
+            keyDownHandlers: [],
+            keyUpHandlers: [],
+            keyPressHandlers: [],
+            docClickHandlers: [],
+        };
+        return _this;
+    }
+    LayersManager.prototype.componentDidMount = function () {
+        this.forceUpdate();
+        initFocusVisible(this.containerRef.current);
+        if (!isServer) {
+            document.addEventListener('keydown', this.onKeyDown);
+            document.addEventListener('keyup', this.onKeyUp);
+            document.addEventListener('keypress', this.onKeyPress);
+            // using mousedown event so that callback runs before events on children inside of the layer
+            document.addEventListener('mousedown', this.onDocumentClick);
+        }
+    };
+    LayersManager.prototype.componentWillUnmount = function () {
+        if (!isServer) {
+            document.removeEventListener('keydown', this.onKeyDown);
+            document.removeEventListener('keyup', this.onKeyUp);
+            document.removeEventListener('keypress', this.onKeyPress);
+            document.removeEventListener('mousedown', this.onDocumentClick);
+        }
+    };
+    LayersManager.prototype.render = function () {
+        var _this = this;
+        var _a = this.props.overrides, overrides = _a === void 0 ? {} : _a;
+        var _b = __read(getOverrides(overrides.AppContainer, StyledAppContainer), 2), AppContainer = _b[0], appContainerProps = _b[1];
+        var _c = __read(getOverrides(overrides.LayersContainer, StyledLayersContainer), 2), LayersContainer = _c[0], layersContainerProps = _c[1];
+        return (_jsx(Consumer, { children: function (_a) {
+                var host = _a.host;
+                if (__DEV__) {
+                    if (host !== undefined) {
+                        // eslint-disable-next-line no-console
+                        console.warn('There is a LayersManager already exists in your application. It is not recommended to have more than one LayersManager in an application.');
+                    }
+                }
+                return (_jsxs(Provider, __assign({ value: {
+                        host: host || _this.host.current,
+                        zIndex: _this.props.zIndex,
+                        addEscapeHandler: _this.onAddEscapeHandler,
+                        removeEscapeHandler: _this.onRemoveEscapeHandler,
+                        addKeyDownHandler: _this.onAddKeyDownHandler,
+                        removeKeyDownHandler: _this.onRemoveKeyDownHandler,
+                        addKeyUpHandler: _this.onAddKeyUpHandler,
+                        removeKeyUpHandler: _this.onRemoveKeyUpHandler,
+                        addKeyPressHandler: _this.onAddKeyPressHandler,
+                        removeKeyPressHandler: _this.onRemoveKeyPressHandler,
+                        addDocClickHandler: _this.onAddDocClickHandler,
+                        removeDocClickHandler: _this.onRemoveDocClickHandler,
+                    } }, { children: [_jsx(AppContainer, __assign({}, appContainerProps, { ref: _this.containerRef }, { children: _this.props.children }), void 0), _jsx(LayersContainer, __assign({}, layersContainerProps, { ref: _this.host }), void 0)] }), void 0));
+            } }, void 0));
+    };
+    return LayersManager;
+}(React.Component));
+export default LayersManager;

package/esm/baseui/layer/tether.d.ts

@@ -0,0 +1,30 @@
+import * as React from 'react';
+import Popper from 'popper.js';
+import type { TetherProps, TetherState, PopperDataObject } from './types';
+declare class Tether extends React.Component<TetherProps, TetherState> {
+    static defaultProps: {
+        anchorRef: null;
+        onPopperUpdate: () => null;
+        placement: "auto";
+        popperRef: null;
+        popperOptions: {};
+    };
+    popper?: Popper;
+    popperHeight: number;
+    popperWidth: number;
+    anchorHeight: number;
+    anchorWidth: number;
+    resizeObserver: ResizeObserver | undefined;
+    state: {
+        isMounted: boolean;
+    };
+    defineResizeObserver: () => ResizeObserver;
+    componentDidMount(): void;
+    componentDidUpdate(prevProps: TetherProps, prevState: TetherState): void;
+    componentWillUnmount(): void;
+    initializePopper(): void;
+    onPopperUpdate: (data: PopperDataObject) => void;
+    destroyPopover(): void;
+    render(): string | number | true | React.ReactElement<any, string | React.JSXElementConstructor<any>> | Iterable<React.ReactNode> | null;
+}
+export default Tether;