@sprinklrjs/spaceweb 10.1.0

package/esm/select/mobileSelect/hooks/useSwipeableSheetStyles.d.ts

@@ -0,0 +1,13 @@
+import * as React from 'react';
+import { Styles } from '../../../types';
+export declare const useSwipeableSheetStyles: ({ swipeThreshold, handleDismiss, dismissTimeout, }: {
+    swipeThreshold: number;
+    handleDismiss?: (() => void) | undefined;
+    dismissTimeout?: number | undefined;
+}) => {
+    sheetStyles: Styles;
+    onSwipeStart: (e: React.TouchEvent) => void;
+    onSwipeEnd: (e: React.TouchEvent) => void;
+    onSwipe: (e: React.TouchEvent) => void;
+    onHide: () => void;
+};

package/esm/select/mobileSelect/hooks/useSwipeableSheetStyles.js

@@ -0,0 +1,53 @@
+import { __read } from "tslib";
+import * as React from 'react';
+import _noop from 'lodash/noop';
+var getTouches = function (e) { return e.touches[0]; };
+export var useSwipeableSheetStyles = function (_a) {
+    var swipeThreshold = _a.swipeThreshold, handleDismiss = _a.handleDismiss, _b = _a.dismissTimeout, dismissTimeout = _b === void 0 ? 200 : _b;
+    var initialPositionRef = React.useRef(0);
+    var _c = __read(React.useState('0px'), 2), swipedArea = _c[0], setSwipedArea = _c[1];
+    var onSwipeStart = React.useCallback(function (e) {
+        var _initialPosition = getTouches(e).clientY;
+        initialPositionRef.current = _initialPosition;
+    }, []);
+    var onSwipe = React.useCallback(function (e) {
+        var change = getTouches(e).clientY - initialPositionRef.current;
+        // If moved up then do nothing
+        if (change < 0)
+            return;
+        // If sheet is moved down then translate
+        setSwipedArea("".concat(change, "px"));
+    }, []);
+    var onSwipeEnd = React.useCallback(function (e) {
+        var change = e.changedTouches[0].clientY - initialPositionRef.current;
+        initialPositionRef.current = 0;
+        setSwipedArea(change < swipeThreshold ? '0px' : '100%');
+    }, [swipeThreshold]);
+    var onHide = React.useCallback(function () {
+        if (typeof handleDismiss === 'function') {
+            handleDismiss();
+        }
+    }, [handleDismiss]);
+    React.useEffect(function () {
+        if (swipedArea !== '100%')
+            return _noop;
+        var timeoutId = setTimeout(function () {
+            handleDismiss === null || handleDismiss === void 0 ? void 0 : handleDismiss();
+        }, dismissTimeout);
+        return function () {
+            clearTimeout(timeoutId);
+        };
+    }, [swipedArea, dismissTimeout, handleDismiss]);
+    return {
+        sheetStyles: [
+            {
+                transform: "translateY(".concat(swipedArea, ")"),
+            },
+            swipedArea === '100%' ? 'transition-transform duration-200 ease-in-out' : '',
+        ],
+        onSwipeStart: onSwipeStart,
+        onSwipe: onSwipe,
+        onSwipeEnd: onSwipeEnd,
+        onHide: onHide,
+    };
+};

package/esm/select/mobileSelect/hooks/useTransitionStyles.d.ts

@@ -0,0 +1,2 @@
+import { TransitionType } from '../AdaptedCSSTransition/types';
+export declare const useTransitionStyles: (transitionType: TransitionType) => Record<string, any>;

package/esm/select/mobileSelect/hooks/useTransitionStyles.js

@@ -0,0 +1,24 @@
+import * as React from 'react';
+import { useStyle } from '../../../style';
+import { TRANSITION_TYPES } from '../AdaptedCSSTransition/constants';
+export var useTransitionStyles = function (transitionType) {
+    var css = useStyle().css;
+    var transitionTypeToClassNames = React.useMemo(function () {
+        var _a;
+        return (_a = {},
+            _a[TRANSITION_TYPES.FADE] = {
+                enter: css('opacity-0'),
+                enterActive: css('opacity-100 transition-opacity duration-200 ease-in'),
+                exit: css('opacity-100'),
+                exitActive: css('opacity-0 transition-opacity duration-200 ease-out'),
+            },
+            _a[TRANSITION_TYPES.SLIDE_FROM_BOTTOM] = {
+                enter: css('translate-y-full'),
+                enterActive: css('translate-x-0 transition-transform duration-200 ease-in'),
+                exit: css('translate-x-0'),
+                exitActive: css('translate-y-full transition-transform duration-200 ease-out'),
+            },
+            _a);
+    }, [css]);
+    return transitionTypeToClassNames[transitionType];
+};

package/esm/select/mobileSelect/index.d.ts

@@ -0,0 +1,2 @@
+export { MobileSelect as default } from './MobileSelect';
+export { MobileSheet } from './MobileSheet';

package/esm/select/mobileSelect/index.js

@@ -0,0 +1,2 @@
+export { MobileSelect as default } from './MobileSelect';
+export { MobileSheet } from './MobileSheet';

package/esm/select/mobileSelect/overrides.d.ts

@@ -0,0 +1,9 @@
+import * as React from 'react';
+import { SelectProps } from '../index';
+export declare const getOverlayOverrides: ({ overlayContainerRef, label, }: {
+    overlayContainerRef: (el: null | HTMLElement) => void;
+    label?: React.ReactNode;
+}) => SelectProps['overrides'];
+export declare const CHILD_SELECT_OVERRIDES: SelectProps['overrides'];
+export declare const OVERLAY_SELECT_PROPS_TO_OMIT: string[];
+export declare const CHILD_SELECT_PROPS_TO_OMIT: string[];

package/esm/select/mobileSelect/overrides.js

@@ -0,0 +1,71 @@
+import { __assign, __rest } from "tslib";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from 'react';
+import { Box } from '../../box';
+import { MobileSheet } from './MobileSheet';
+import { StyledAction } from '../../tag';
+import { MenuItem } from '../../menu';
+var OverridenPopover = function (_a) {
+    var content = _a.content, children = _a.children, isOpen = _a.isOpen, onClick = _a.onClick, onClickOutside = _a.onClickOutside, label = _a.label;
+    return (_jsxs(_Fragment, { children: [_jsx(Box, __assign({ onClick: onClick }, { children: children }), void 0), isOpen && (_jsx(MobileSheet, __assign({ visible: isOpen, sheetKey: "mobileSelect", onSheetHide: onClickOutside, label: label }, { children: typeof content === 'function' ? content() : content }), void 0))] }, void 0));
+};
+var OverridenMenuItem = function (_a) {
+    var startEnhancer = _a.startEnhancer, restProps = __rest(_a, ["startEnhancer"]);
+    return (_jsx(MenuItem, __assign({}, restProps, { endEnhancer: startEnhancer }), void 0));
+};
+var OverridenAction = function (_a) {
+    var children = _a.children, onClick = _a.onClick, restProps = __rest(_a, ["children", "onClick"]);
+    return (_jsx(StyledAction, __assign({}, restProps, { onClick: React.useCallback(function (e) {
+            e.stopPropagation();
+            onClick(e);
+        }, [onClick]) }, { children: children }), void 0));
+};
+var MULTI_VALUE_OVERRIDES = {
+    Tag: {
+        props: {
+            overrides: {
+                Action: OverridenAction,
+            },
+        },
+    },
+};
+var OVERLAY_OVERRIDES = {
+    // Legit override - Keep search box font-size as 16px and so it is not automatically zoomed in
+    ControlContainer: {
+        props: { size: 'md', autoComplete: 'off' },
+    },
+    Root: {
+        style: 'pt-1 pb-4',
+    },
+    MenuItem: OverridenMenuItem,
+};
+export var getOverlayOverrides = function (_a) {
+    var overlayContainerRef = _a.overlayContainerRef, label = _a.label;
+    return (__assign(__assign({}, OVERLAY_OVERRIDES), { Popover: {
+            component: OverridenPopover,
+            props: {
+                label: label,
+                ignoreBoundary: true,
+            },
+        }, OverlayContentContainer: {
+            props: {
+                ref: overlayContainerRef,
+            },
+        } }));
+};
+var ChildSelectPopover = function (_a) {
+    var children = _a.children;
+    return _jsx(_Fragment, { children: children }, void 0);
+};
+export var CHILD_SELECT_OVERRIDES = {
+    Popover: ChildSelectPopover,
+    // Legit override - Don't render Input in child select so after removing value via x icon cursor doesn't come
+    InputContainer: function () { return null; },
+    MultiValue: {
+        props: {
+            overrides: MULTI_VALUE_OVERRIDES,
+        },
+    },
+};
+export var OVERLAY_SELECT_PROPS_TO_OMIT = ['onBlur'];
+export var CHILD_SELECT_PROPS_TO_OMIT = ['onClose', 'onBlur', 'type', 'startOpen', 'autoFocus', 'children'];

package/esm/select/multi-value.d.ts

@@ -0,0 +1,3 @@
+import * as React from 'react';
+import { MultiValueProps } from './types';
+export default function MultiValue(props: MultiValueProps): React.ReactElement;

package/esm/select/multi-value.js

@@ -0,0 +1,26 @@
+import { __assign, __read, __rest } from "tslib";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useMemo } from 'react';
+import { borderRadius } from '../helpers/longHandHelpers';
+import { getComponentSizeTheme } from '../helpers/themeHelpers';
+import { mergeOverrides, useOverrides } from '../overrides';
+import { useStyle } from '../style';
+import { Tag } from '../tag';
+export default function MultiValue(props) {
+    var _a;
+    var _b = props.overrides, overrides = _b === void 0 ? {} : _b, onActionClick = props.onActionClick, value = props.value, selectSize = props.selectSize, $disabled = props.$disabled, restProps = __rest(props, ["overrides", "onActionClick", "value", "selectSize", "$disabled"]);
+    var _c = __read(useOverrides(overrides.Tag, Tag), 2), TagComponent = _c[0], tagProps = _c[1];
+    var theme = useStyle().theme;
+    var multiSelectTheme = useMemo(function () { return getComponentSizeTheme(theme, 'multiSelect', selectSize, 'lg'); }, [
+        selectSize,
+        theme,
+    ]);
+    return (_jsx(TagComponent, __assign({ variant: "light", intent: "default", "aria-label": "".concat(typeof restProps.children === 'string' ? "".concat(restProps.children, ", ") : '', "close by backspace"), tabIndex: 0, onActionClick: onActionClick, "$item": value, "$disabled": $disabled }, restProps, tagProps, { closeable: (_a = tagProps.closeable) !== null && _a !== void 0 ? _a : !$disabled, overrides: mergeOverrides({
+            Root: {
+                style: [
+                    'box-border',
+                    __assign(__assign({}, (theme.multiSelect.tagBorderRadius && borderRadius(theme.multiSelect.tagBorderRadius))), { marginRight: multiSelectTheme.tagMarginX, marginLeft: multiSelectTheme.tagMarginX, marginTop: multiSelectTheme.tagMarginY, marginBottom: multiSelectTheme.tagMarginY, height: multiSelectTheme.tagHeight, maxWidth: "calc(100% - ".concat(2 * parseInt(multiSelectTheme.tagMarginX, 10), "px)") }),
+                ],
+            },
+        }, tagProps.overrides) }, { children: props.children }), void 0));
+}

package/esm/select/overlaySelect/OverlaySelect.d.ts

@@ -0,0 +1,3 @@
+import { OverlaySelectProps } from '../types';
+declare const OverlaySelect: (props: OverlaySelectProps) => any;
+export default OverlaySelect;

package/esm/select/overlaySelect/OverlaySelect.js

@@ -0,0 +1,62 @@
+import { __assign, __read } from "tslib";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect } from 'react';
+import _omit from 'lodash/omit';
+import { useOverrides } from '../../overrides';
+import { Popover } from '../../popover';
+import BaseSelect from '../base-select';
+import { StyledOverlayContentContainer } from '../styled-component';
+import useOverlaySelectOverrides from './useOverlaySelectOverrides';
+import useScrollCapture from '../../hooks/useScrollCapture';
+import useCombinedRefs from '../../hooks/useCombinedRef';
+// These props are handled by OverlaySelect itself and hence should not be passed to BaseSelect
+var propsToOmit = [
+    'children',
+    'overrides',
+    'closeOnSelect',
+    'onChange',
+    'startOpen',
+    'searchable',
+    'controlRef',
+    'autoFocus',
+    'placeholder',
+    'isLoading',
+    'onInputChange',
+    'onOpen',
+    'onClose',
+    'filterOptions',
+    'overlayWidth',
+    'disabled',
+    'captureScroll',
+    'placement',
+    'methodsRef',
+];
+var OverlaySelect = function (props) {
+    var _a, _b, _c;
+    var _d = __read(useOverrides((_a = props.overrides) === null || _a === void 0 ? void 0 : _a.OverlayContentContainer, StyledOverlayContentContainer), 2), OverlayContentContainer = _d[0], overlayContentContainerProps = _d[1];
+    var _e = __read(useOverrides((_b = props.overrides) === null || _b === void 0 ? void 0 : _b.Popover, Popover), 2), PopoverOverriden = _e[0], popoverProps = _e[1];
+    var setScrollTarget = useScrollCapture({ enabled: props.captureScroll });
+    var combinedRef = useCombinedRefs(setScrollTarget, overlayContentContainerProps === null || overlayContentContainerProps === void 0 ? void 0 : overlayContentContainerProps.ref);
+    var _f = useOverlaySelectOverrides(props), popoverOpen = _f.popoverOpen, filterOptionsOverride = _f.filterOptionsOverride, handleValuesChange = _f.handleValuesChange, overrides = _f.overrides, togglePopoverState = _f.togglePopoverState, closePopover = _f.closePopover, openPopover = _f.openPopover;
+    useEffect(function () {
+        if (props.methodsRef) {
+            props.methodsRef.current = {
+                setDropdownOpen: function (shouldOpen) {
+                    if (shouldOpen)
+                        openPopover();
+                    else
+                        closePopover();
+                },
+            };
+        }
+    }, [openPopover, closePopover]);
+    var baseSelectProps = _omit(props, propsToOmit);
+    if (props.disabled) {
+        if (typeof props.children === 'function') {
+            return props.children({ isOpen: false });
+        }
+        return props.children;
+    }
+    return (_jsx(PopoverOverriden, __assign({ isOpen: popoverOpen, content: _jsx(OverlayContentContainer, __assign({ "$closePopover": closePopover, "$overlayWidth": props.overlayWidth }, overlayContentContainerProps, { ref: combinedRef }, { children: _jsx(BaseSelect, __assign({}, baseSelectProps, { filterOptions: filterOptionsOverride, onChange: handleValuesChange, overrides: overrides, type: "search" }), void 0) }), void 0), onClick: togglePopoverState, onClickOutside: closePopover, onEsc: closePopover, placement: (_c = props.placement) !== null && _c !== void 0 ? _c : 'bottom', focusLock: true, returnFocus: true, overrides: { Inner: { style: 'spr-ui-01' }, Arrow: { style: 'spr-ui-01' } }, mountNode: props.mountNode }, popoverProps, { children: props.children }), void 0));
+};
+export default OverlaySelect;

package/esm/select/overlaySelect/index.d.ts

@@ -0,0 +1 @@
+export { default } from './OverlaySelect';

package/esm/select/overlaySelect/index.js

@@ -0,0 +1 @@
+export { default } from './OverlaySelect';

package/esm/select/overlaySelect/useOverlaySelectOverrides.d.ts

@@ -0,0 +1,14 @@
+import { OnChangeParams, OverlaySelectProps } from '../types';
+declare const useOverlaySelectOverrides: (props: OverlaySelectProps) => {
+    overrides: import("../../overrides").OverridesObject<any>;
+    filterOptionsOverride: (options: import("baseui/select").Value, filterValue: string, excludeOptions?: import("baseui/select").Value | undefined, newProps?: {
+        valueKey: string;
+        labelKey: string;
+    } | undefined) => import("baseui/select").Value;
+    handleValuesChange: (params: OnChangeParams) => void;
+    popoverOpen: boolean;
+    closePopover: () => void;
+    openPopover: () => void;
+    togglePopoverState: () => void;
+};
+export default useOverlaySelectOverrides;

package/esm/select/overlaySelect/useOverlaySelectOverrides.js

@@ -0,0 +1,204 @@
+import { __assign, __read } from "tslib";
+import { jsx as _jsx } from "react/jsx-runtime";
+import _omit from 'lodash/omit';
+import _noop from 'lodash/noop';
+import { useCallback, useEffect, useMemo, useState } from 'react';
+import { Box } from '../../box';
+import { borderRadius } from '../../helpers/longHandHelpers';
+import { Loader } from '../../loader';
+import { mergeOverrides } from '../../overrides';
+import { Search } from '../../search';
+import { useStyle } from '../../style';
+import { OverlaySelectPopoverOverride } from '../overrides';
+import usePopover from './usePopover';
+import useStickyElement from '../../hooks/useStickyElement';
+import useUpdateEffect from '../../hooks/useUpdateEffect';
+var useAutoFocus = function (_a) {
+    var autoFocus = _a.autoFocus, inputRef = _a.inputRef;
+    var _b = __read(useState(null), 2), inputElement = _b[0], setInputElement = _b[1];
+    useEffect(function () {
+        if (inputRef) {
+            typeof inputRef === 'function'
+                ? inputRef(inputElement)
+                : (inputRef.current = inputElement);
+        }
+        if (autoFocus) {
+            /**
+             * When input is rendered inside popover, scroll jumps to top. passing preventScroll explicitly
+             */
+            inputElement === null || inputElement === void 0 ? void 0 : inputElement.focus({ preventScroll: true });
+        }
+    }, [autoFocus, inputElement, inputRef]);
+    return [inputElement, setInputElement];
+};
+function SelectLoader() {
+    var direction = useStyle().direction;
+    return (_jsx(Box, __assign({ className: ['flex items-center pl-3', direction !== 'rtl' ? 'pr-3' : 'pl-3'] }, { children: _jsx(Loader, { size: 14, variant: "clip" }, void 0) }), void 0));
+}
+var useSearchContainerHeight = function () {
+    var _a = __read(useState(), 2), containerHeight = _a[0], setHeight = _a[1];
+    var _b = __read(useState(), 2), containerElement = _b[0], setContainerElement = _b[1];
+    useEffect(function () {
+        if (containerElement) {
+            setHeight(containerElement.getBoundingClientRect().height);
+        }
+    }, [containerElement, setHeight]);
+    return { setContainerElement: setContainerElement, containerHeight: containerHeight };
+};
+/*
+ * These overrides are meant for OverlaySelect and not for BaseSelect
+ */
+var overridesToOmit = ['SelectContainer', 'Popover'];
+var useOverlaySelectOverrides = function (props) {
+    var closeOnSelect = props.closeOnSelect, autoFocus = props.autoFocus, controlRef = props.controlRef, filterOptions = props.filterOptions, onInputChange = props.onInputChange, searchable = props.searchable, placeholder = props.placeholder, isLoading = props.isLoading, onChange = props.onChange, _a = props.clearable, clearable = _a === void 0 ? true : _a, onFocus = props.onFocus, onBlur = props.onBlur, onCloseResetsInput = props.onCloseResetsInput;
+    var _b = __read(useState(''), 2), inputValue = _b[0], setInputValue = _b[1];
+    var _c = usePopover(props), popoverOpen = _c.popoverOpen, togglePopoverState = _c.togglePopoverState, closePopover = _c.closePopover, openPopover = _c.openPopover;
+    useUpdateEffect(function () {
+        if (!popoverOpen && onCloseResetsInput) {
+            setInputValue('');
+        }
+    }, [onCloseResetsInput, popoverOpen]);
+    var _d = __read(useAutoFocus({ autoFocus: autoFocus, inputRef: controlRef }), 2), inputElement = _d[0], setInputElement = _d[1];
+    var filterOptionsOverride = useCallback(function (options, _, excludeOptions, params) {
+        if (filterOptions) {
+            return filterOptions(options, inputValue, excludeOptions, params);
+        }
+        return options;
+    }, [filterOptions, inputValue]);
+    var handleInputChange = useCallback(function (e) {
+        onInputChange === null || onInputChange === void 0 ? void 0 : onInputChange(e);
+        setInputValue(e.target.value);
+    }, [onInputChange]);
+    // trigger a fake input change event (as if all text was deleted)
+    // reference: https://github.com/uber/baseweb/blob/master/src/input/base-input.js#L101
+    var handleOnClear = useCallback(function () {
+        var _a, _b;
+        if (inputElement) {
+            (_b = (_a = Object.getOwnPropertyDescriptor(window.HTMLInputElement.prototype, 'value')) === null || _a === void 0 ? void 0 : _a.set) === null || _b === void 0 ? void 0 : _b.call(inputElement, '');
+            var event_1 = new Event('input', { bubbles: true, cancelable: true });
+            inputElement.dispatchEvent(event_1);
+            inputElement.focus();
+        }
+    }, [inputElement]);
+    var handleValuesChange = useCallback(function (params) {
+        if (closeOnSelect) {
+            closePopover();
+        }
+        onChange === null || onChange === void 0 ? void 0 : onChange(params);
+    }, [closePopover, onChange, closeOnSelect]);
+    var _e = useStickyElement(), isSticky = _e.isSticky, setStickySentinelRef = _e.setStickySentinelRef;
+    var _f = useSearchContainerHeight(), containerHeight = _f.containerHeight, setContainerElement = _f.setContainerElement;
+    var memoizedOverrides = useMemo(function () { return ({
+        // BaseSelect wil render this Popover component with DropdownContainer as content and ControlContainer as children/target
+        Popover: {
+            component: OverlaySelectPopoverOverride,
+            props: {
+                setStickySentinelRef: setStickySentinelRef,
+            },
+        },
+        ControlContainer: {
+            component: Search,
+            props: {
+                value: inputValue,
+                onChange: handleInputChange,
+                inputRef: setInputElement,
+                placeholder: placeholder,
+                size: 'sm',
+                className: 'mx-4 w-auto',
+                overrides: {
+                    After: isLoading ? SelectLoader : function () { return null; },
+                    ClearIcon: {
+                        props: {
+                            onClick: handleOnClear,
+                        },
+                    },
+                },
+                autoFocus: true,
+                // override baseui's onKeyDown
+                onKeyDown: _noop,
+                clearable: clearable,
+                onFocus: onFocus,
+                onBlur: onBlur,
+            },
+        },
+        Root: {
+            style: (function (_a) {
+                var theme = _a.theme, px2rem = _a.px2rem;
+                return ({
+                    paddingTop: px2rem(12),
+                    paddingBottom: px2rem(8),
+                    position: 'sticky',
+                    zIndex: 1,
+                    top: '0px',
+                    backgroundColor: theme.spr.popup,
+                    boxShadow: isSticky ? theme.spr.shadow01 : 'none',
+                });
+            }),
+            props: {
+                ref: setContainerElement,
+            },
+            component: searchable ? undefined : function () { return null; },
+        },
+        Menu: {
+            props: {
+                overrides: {
+                    List: {
+                        props: {
+                            overrides: {
+                                Root: {
+                                    style: __assign(__assign(__assign({}, (searchable ? { paddingTop: 0 } : {})), borderRadius(0)), { overflow: 'visible' }),
+                                },
+                            },
+                        },
+                    },
+                },
+            },
+        },
+        MenuItem: {
+            props: {
+                overrides: {
+                    ListItem: {
+                        props: {
+                            overrides: {
+                                Root: {
+                                    style: { scrollMarginTop: "".concat(containerHeight, "px") },
+                                },
+                            },
+                        },
+                    },
+                },
+                $closePopover: closePopover,
+            },
+        },
+    }); }, [
+        handleInputChange,
+        inputValue,
+        setInputElement,
+        placeholder,
+        isLoading,
+        searchable,
+        isSticky,
+        containerHeight,
+        setContainerElement,
+        setStickySentinelRef,
+        handleOnClear,
+        closePopover,
+        clearable,
+        onFocus,
+        onBlur,
+    ]);
+    var overrides = useMemo(function () { return mergeOverrides(memoizedOverrides, _omit(props.overrides, overridesToOmit)); }, [
+        memoizedOverrides,
+        props.overrides,
+    ]);
+    return {
+        overrides: overrides,
+        filterOptionsOverride: filterOptionsOverride,
+        handleValuesChange: handleValuesChange,
+        popoverOpen: popoverOpen,
+        closePopover: closePopover,
+        openPopover: openPopover,
+        togglePopoverState: togglePopoverState,
+    };
+};
+export default useOverlaySelectOverrides;

package/esm/select/overlaySelect/usePopover.d.ts

@@ -0,0 +1,8 @@
+import { OverlaySelectProps } from '../types';
+declare const usePopover: ({ startOpen, onOpen, onClose }: OverlaySelectProps) => {
+    popoverOpen: boolean;
+    togglePopoverState: () => void;
+    openPopover: () => void;
+    closePopover: () => void;
+};
+export default usePopover;

package/esm/select/overlaySelect/usePopover.js

@@ -0,0 +1,27 @@
+import { __read } from "tslib";
+import { useCallback, useEffect, useState } from 'react';
+import { useLatest } from '../../hooks/useLatest';
+import { useFirstMountState } from '../../hooks/useFirstMountState';
+var usePopover = function (_a) {
+    var startOpen = _a.startOpen, onOpen = _a.onOpen, onClose = _a.onClose;
+    var isFirstMount = useFirstMountState();
+    var onOpenRef = useLatest(onOpen);
+    var onCloseRef = useLatest(onClose);
+    var _b = __read(useState(!!startOpen), 2), popoverOpen = _b[0], setPopoverState = _b[1];
+    var togglePopoverState = useCallback(function () { return setPopoverState(function (prev) { return !prev; }); }, []);
+    var closePopover = useCallback(function () { return setPopoverState(false); }, []);
+    var openPopover = useCallback(function () { return setPopoverState(true); }, []);
+    useEffect(function () {
+        var _a, _b;
+        if (!isFirstMount) {
+            popoverOpen ? (_a = onOpenRef.current) === null || _a === void 0 ? void 0 : _a.call(onOpenRef) : (_b = onCloseRef.current) === null || _b === void 0 ? void 0 : _b.call(onCloseRef);
+        }
+    }, [popoverOpen]);
+    return {
+        popoverOpen: popoverOpen,
+        togglePopoverState: togglePopoverState,
+        openPopover: openPopover,
+        closePopover: closePopover,
+    };
+};
+export default usePopover;

package/esm/select/overrides.d.ts

@@ -0,0 +1,56 @@
+import * as React from 'react';
+import { StyleFn, StyleObject, Styles } from '../types';
+import { SharedProps } from './types';
+export declare const SelectArrow: ({ $isOpen, title, overrides, ...restProps }: {
+    [x: string]: any;
+    $isOpen: any;
+    title: any;
+    overrides: any;
+}) => React.ReactElement;
+export declare const getSearchIconContainerStyles: Styles;
+export declare const getSearchIconStyles: StyleFn<SharedProps>;
+export declare const getControlContainerStyles: Styles;
+export declare const getValueContainerStyles: Styles;
+export declare const getValueTypography: Styles;
+export declare const getSelectInputStyles: StyleFn;
+export declare const OverlaySelectPopoverOverride: ({ content, children: inputContainer, setStickySentinelRef }: {
+    content: any;
+    children: any;
+    setStickySentinelRef: any;
+}) => JSX.Element;
+export declare const selectMenuOverrides: {
+    readonly Menu: {
+        readonly props: {
+            readonly overrides: {
+                readonly List: {
+                    readonly props: {
+                        readonly overrides: {
+                            readonly Root: {
+                                readonly style: (_: any, { $maxHeight }: {
+                                    $maxHeight: any;
+                                }) => StyleObject;
+                            };
+                        };
+                    };
+                };
+            };
+        };
+    };
+    readonly MenuItem: {
+        readonly props: {
+            readonly overrides: {
+                readonly ListItem: {
+                    readonly props: {
+                        readonly overrides: {
+                            readonly Root: {
+                                readonly style: {
+                                    readonly wordBreak: "break-word";
+                                };
+                            };
+                        };
+                    };
+                };
+            };
+        };
+    };
+};