@sprinklrjs/spaceweb 10.1.0

package/esm/select/base-select.js

@@ -0,0 +1,256 @@
+import { __assign, __awaiter, __extends, __generator, __read, __spreadArray } from "tslib";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { normalizeOptions } from 'baseui/select/utils';
+import _noop from 'lodash/noop';
+import _pick from 'lodash/pick';
+import _omit from 'lodash/omit';
+import memoizeOne from 'memoize-one';
+import { Component } from 'react';
+import * as React from 'react';
+import { mergeAndConvertOverrides } from '../helpers/baseui/useConvertOverrides';
+import { borderRadius, borderWidth } from '../helpers/longHandHelpers';
+import Search from '../icon/components/search';
+import { Loader } from '../loader';
+import { LocaleConsumer } from '../locale';
+import { Popover } from '../popover';
+import SpaceStyleConsumer from '../spaceConsumer';
+import { typeAdaptor } from './adaptor';
+import { STATE_CHANGE_TYPE } from './constants';
+import defaultProps from './default-props';
+import MultiValue from './multi-value';
+import { getControlContainerStyles, getSelectInputStyles, getSearchIconContainerStyles, getSearchIconStyles, getValueContainerStyles, getValueTypography, SelectArrow, } from './overrides';
+import { getPlaceholderTypography } from '../input/styled-components';
+import SelectMenuAdapter from './selectMenuAdapter';
+import ClearIconButton from '../helpers/ClearIconButton';
+import { Input, InputContainer, StyledSelect } from './styled-component';
+import { SELECT_ALL_ID } from './types';
+import { add$props } from '../helpers';
+import { combineRefs } from '../hooks/useCombinedRef';
+import { getUniqueId } from '../hooks/useUniqueId';
+var BaseSelect = /** @class */ (function (_super) {
+    __extends(BaseSelect, _super);
+    function BaseSelect() {
+        var _this = _super !== null && _super.apply(this, arguments) || this;
+        _this.id = getUniqueId();
+        _this.menuId = getUniqueId();
+        _this.shouldDisplaySelectAll = function () {
+            var _a = _this.props, multi = _a.multi, hideSelectAll = _a.hideSelectAll, options = _a.options;
+            return (multi && !hideSelectAll && _this.getNormalizedOptions(_this.mergeOptions(options, _this.createdOptions)).length > 0);
+        };
+        _this.getNormalizedOptions = memoizeOne(function (options) { return normalizeOptions(options); });
+        _this.isSelectAllChecked = memoizeOne(
+        // in creatable select, value length can be more than length of options
+        function (value, options) {
+            return (value === null || value === void 0 ? void 0 : value.length) >= _this.getNormalizedOptions(_this.mergeOptions(options, _this.createdOptions)).length;
+        });
+        _this.getSelectOverrides = 
+        // FIXME: Remove use of any
+        function () {
+            var _a = _this.props, _b = _a.id, id = _b === void 0 ? _this.id : _b, valueKey = _a.valueKey, labelKey = _a.labelKey, value = _a.value, multi = _a.multi, overrides = _a.overrides, noResultsMsg = _a.noResultsMsg, options = _a.options, className = _a.className, style = _a.style, intent = _a.intent, size = _a.size, disabled = _a.disabled, captureScroll = _a.captureScroll, placement = _a.placement, popoverMinWidth = _a.popoverMinWidth, searchable = _a.searchable;
+            return {
+                Root: {
+                    style: [className, style],
+                    // https://github.com/uber/baseweb/issues/3702#issuecomment-792665393
+                    props: { tabIndex: -1 },
+                },
+                StatefulMenu: {
+                    component: SelectMenuAdapter,
+                    props: {
+                        id: _this.menuId,
+                        value: value,
+                        overrides: _pick(overrides, ['Menu', 'MenuItem', 'NoResults', 'Divider', 'ListItemText']),
+                        valueKey: valueKey,
+                        labelKey: labelKey,
+                        multi: multi,
+                        selectAllSelected: _this.isSelectAllChecked(value, options),
+                        noResultsMsg: noResultsMsg,
+                        captureScroll: captureScroll,
+                    },
+                },
+                DropdownContainer: {
+                    props: {
+                        // remove `listBox` role applied by baseui. `listBox` will be applied on Menu
+                        role: null,
+                    },
+                    style: __assign(__assign({}, (popoverMinWidth ? { minWidth: popoverMinWidth } : {})), borderRadius('inherit')),
+                },
+                OptionContent: { style: { fontWeight: 'inherit' } },
+                ControlContainer: { style: getControlContainerStyles, props: add$props({ intent: intent, size: size, disabled: disabled }) },
+                ValueContainer: { style: getValueContainerStyles, props: add$props({ intent: intent, size: size, disabled: disabled }) },
+                MultiValue: { component: MultiValue, props: { selectSize: size } },
+                SingleValue: { style: getValueTypography, props: { $selectSize: size } },
+                InputContainer: {
+                    component: InputContainer,
+                    props: { menuId: _this.menuId, size: size },
+                    style: getValueTypography,
+                },
+                Input: {
+                    component: Input,
+                    props: { id: id, menuId: searchable ? _this.menuId : null, onPaste: _this.handlePaste },
+                    style: getSelectInputStyles,
+                },
+                Placeholder: {
+                    style: getPlaceholderTypography,
+                },
+                IconsContainer: { style: 'cursor-pointer pr-0 sticky top-0' },
+                SelectArrow: { component: SelectArrow },
+                ClearIcon: { component: ClearIconButton },
+                SearchIcon: { component: Search, style: getSearchIconStyles },
+                SearchIconContainer: { style: getSearchIconContainerStyles },
+                Popover: {
+                    component: Popover,
+                    props: { placement: placement, showArrow: false, returnFocus: false, overrides: { Body: { style: 'mt-2' } } },
+                },
+                LoadingIndicator: {
+                    component: function () { return (_jsx(Loader, { size: 16, variant: "clip", className: "mx-1", overrides: {
+                            Loader: {
+                                style: __assign({}, borderWidth('2px')),
+                            },
+                        } }, void 0)); },
+                },
+            };
+        };
+        _this.mergeOptions = function (options1, options2) {
+            var mergedOptions = options1;
+            if (Array.isArray(options1)) {
+                if (Array.isArray(options2)) {
+                    mergedOptions = options1.concat(options2);
+                }
+                else if (typeof options2 === 'object') {
+                    mergedOptions = __assign({}, options2);
+                    mergedOptions.__ungrouped = mergedOptions.__ungrouped
+                        ? options1.concat(mergedOptions.__ungrouped)
+                        : options1;
+                }
+            }
+            else if (typeof options1 === 'object') {
+                mergedOptions = __assign({}, options1);
+                if (Array.isArray(options2)) {
+                    mergedOptions.__ungrouped = mergedOptions.__ungrouped
+                        ? mergedOptions.__ungrouped.concat(options2)
+                        : options2;
+                }
+                else if (typeof options2 === 'object') {
+                    Object.keys(options2).forEach(function (key) {
+                        if (!mergedOptions) {
+                            return;
+                        }
+                        if (key in mergedOptions) {
+                            mergedOptions[key] = mergedOptions[key].concat(options2[key]);
+                        }
+                        else {
+                            mergedOptions[key] = options2[key];
+                        }
+                    });
+                }
+            }
+            else {
+                mergedOptions = options2;
+            }
+            return mergedOptions;
+        };
+        /*
+         * 1. Add selected values which are not present in Options (to display newly created option)
+         * 2. Add selectAll option in multi-select
+         * */
+        // todo: remove usage of normalizeOptions
+        _this.getOptions = memoizeOne(function (locale, createdOptions, options) {
+            var _a;
+            var _b = _this.props, valueKey = _b.valueKey, labelKey = _b.labelKey;
+            var mergedOptions = _this.mergeOptions(options, createdOptions);
+            var optionArr = _this.getNormalizedOptions(mergedOptions);
+            if (!_this.shouldDisplaySelectAll()) {
+                return optionArr;
+            }
+            return __spreadArray([
+                (_a = {}, _a[valueKey] = SELECT_ALL_ID, _a[labelKey] = locale.select.selectAllLabel, _a[SELECT_ALL_ID] = true, _a)
+            ], __read(optionArr), false);
+        });
+        _this.getCreatedOptions = function (option) {
+            var _a = _this.props, labelKey = _a.labelKey, createOption = _a.createOption;
+            if (createOption && typeof option[labelKey] === 'string') {
+                return Promise.resolve(createOption(option[labelKey]));
+            }
+            return Promise.resolve([
+                __assign(__assign({}, option), { isCreatable: false }),
+            ]);
+        };
+        _this.getCreatedValues = function (options) {
+            if (Array.isArray(options)) {
+                return options.map(function (option) { return (__assign(__assign({}, option), { isCreatable: true })); });
+            }
+            return Object.keys(options).reduce(function (acc, key) {
+                var _a;
+                var _b;
+                return (__assign(__assign({}, acc), (_a = {}, _a[key] = (_b = options[key]) === null || _b === void 0 ? void 0 : _b.map(function (option) { return (__assign(__assign({}, option), { isCreatable: true })); }), _a)));
+            }, {});
+        };
+        _this.handleChange = function (params) { return __awaiter(_this, void 0, void 0, function () {
+            var _a, options, _b, onChange, value, creatable, prevSelectAllState, newCreatedOptions, newCreatedValues, mergedValue;
+            return __generator(this, function (_c) {
+                switch (_c.label) {
+                    case 0:
+                        _a = this.props, options = _a.options, _b = _a.onChange, onChange = _b === void 0 ? _noop : _b, value = _a.value, creatable = _a.creatable;
+                        //select the user input on option selection
+                        if (params.type === STATE_CHANGE_TYPE.select && this.inputRef.current && 'select' in this.inputRef.current) {
+                            this.inputRef.current.select();
+                        }
+                        // intercept changes in select-all state
+                        if (params.option && params.option[SELECT_ALL_ID]) {
+                            prevSelectAllState = this.isSelectAllChecked(value, options);
+                            // since we are not letting baseui handle state of select all, baseui will always assume that select all is unchecked
+                            // Thus we need to intercept STATE_CHANGE_TYPE.select type only
+                            if (params.type === STATE_CHANGE_TYPE.select) {
+                                onChange(prevSelectAllState
+                                    ? { type: STATE_CHANGE_TYPE.clear, value: [] }
+                                    : {
+                                        type: STATE_CHANGE_TYPE.selectAll,
+                                        value: normalizeOptions(this.mergeOptions(options, this.createdOptions)),
+                                    });
+                            }
+                            return [2 /*return*/];
+                        }
+                        if (!(creatable && params.type === STATE_CHANGE_TYPE.select && params.option && params.option.isCreatable)) return [3 /*break*/, 2];
+                        return [4 /*yield*/, this.getCreatedOptions(params.option)];
+                    case 1:
+                        newCreatedOptions = _c.sent();
+                        this.createdOptions = this.mergeOptions(this.createdOptions, newCreatedOptions);
+                        newCreatedValues = this.getCreatedValues(newCreatedOptions);
+                        mergedValue = this.mergeOptions(value, newCreatedValues);
+                        onChange({
+                            option: __assign(__assign({}, newCreatedOptions[0]), { isCreatable: true }),
+                            type: STATE_CHANGE_TYPE.select,
+                            value: this.getNormalizedOptions(mergedValue),
+                        });
+                        return [2 /*return*/];
+                    case 2:
+                        onChange(params);
+                        return [2 /*return*/];
+                }
+            });
+        }); };
+        _this.handlePaste = function (e) {
+            var _a = _this.props, onPaste = _a.onPaste, _b = _a.onChange, onChange = _b === void 0 ? _noop : _b, value = _a.value;
+            var pastedOptions = onPaste === null || onPaste === void 0 ? void 0 : onPaste(e);
+            if (!pastedOptions) {
+                return;
+            }
+            _this.createdOptions = _this.mergeOptions(_this.createdOptions, pastedOptions);
+            var mergedValue = _this.mergeOptions(value, pastedOptions);
+            onChange({ type: STATE_CHANGE_TYPE.select, value: _this.getNormalizedOptions(mergedValue) });
+        };
+        _this.inputRef = React.createRef();
+        _this.combinedInputRef = memoizeOne(function (refParam) {
+            return combineRefs(_this.inputRef, refParam);
+        });
+        return _this;
+    }
+    BaseSelect.prototype.render = function () {
+        var _this = this;
+        var _a = this.props, options = _a.options, selectOverrides = _a.overrides, type = _a.type, controlRef = _a.controlRef;
+        return (_jsx(LocaleConsumer, { children: function (locale) { return (_jsx(SpaceStyleConsumer, { children: function (utils) { return (_jsx(StyledSelect, __assign({}, _omit(_this.props, 'size'), { overrides: mergeAndConvertOverrides(_this.getSelectOverrides(), selectOverrides, utils), controlRef: _this.combinedInputRef(controlRef), options: _this.getOptions(locale, _this.createdOptions, options), onChange: _this.handleChange, type: typeAdaptor[type] }), void 0)); } }, void 0)); } }, void 0));
+    };
+    BaseSelect.defaultProps = defaultProps;
+    return BaseSelect;
+}(Component));
+export default BaseSelect;

package/esm/select/constants.d.ts

@@ -0,0 +1,7 @@
+export declare const STATE_CHANGE_TYPE: {
+    readonly select: "select";
+    readonly remove: "remove";
+    readonly clear: "clear";
+    readonly selectAll: "selectAll";
+};
+export declare const UNGROUPED_ID = "__ungrouped";

package/esm/select/constants.js

@@ -0,0 +1,4 @@
+import { __assign } from "tslib";
+import { STATE_CHANGE_TYPE as BASE_STATE_CHANGE_TYPE } from 'baseui/select';
+export var STATE_CHANGE_TYPE = __assign({ selectAll: 'selectAll' }, BASE_STATE_CHANGE_TYPE);
+export var UNGROUPED_ID = '__ungrouped';

package/esm/select/default-props.d.ts

@@ -0,0 +1,38 @@
+import { OptionsT, Value, Size, Type } from './types';
+declare const defaultProps: {
+    autoFocus: boolean;
+    backspaceRemoves: boolean;
+    clearable: boolean;
+    closeOnSelect: boolean;
+    creatable: boolean;
+    deleteRemoves: boolean;
+    disabled: boolean;
+    error: boolean;
+    positive: boolean;
+    escapeClearsValue: boolean;
+    filterOptions: any;
+    filterOutSelected: boolean;
+    isLoading: boolean;
+    labelKey: string;
+    maxDropdownHeight: string;
+    multi: boolean;
+    onBlur: (...args: any[]) => void;
+    onBlurResetsInput: boolean;
+    onChange: (...args: any[]) => void;
+    onFocus: (...args: any[]) => void;
+    onInputChange: (...args: any[]) => void;
+    onCloseResetsInput: boolean;
+    onSelectResetsInput: boolean;
+    openOnClick: boolean;
+    startOpen: boolean;
+    options: OptionsT;
+    overrides: {};
+    required: boolean;
+    searchable: boolean;
+    size: Size;
+    type: "overlay" | Type | "mobile";
+    value: Value;
+    valueKey: string;
+    placement: "auto" | "bottom" | "left" | "right" | "top" | "topLeft" | "topRight" | "rightTop" | "rightBottom" | "bottomLeft" | "bottomRight" | "leftTop" | "leftBottom" | undefined;
+};
+export default defaultProps;

package/esm/select/default-props.js

@@ -0,0 +1,39 @@
+import _noop from 'lodash/noop';
+import { filterOptions } from './utils/default-filter-options';
+var defaultProps = {
+    autoFocus: false,
+    backspaceRemoves: true,
+    clearable: true,
+    closeOnSelect: true,
+    creatable: false,
+    deleteRemoves: true,
+    disabled: false,
+    error: false,
+    positive: false,
+    escapeClearsValue: true,
+    filterOptions: filterOptions,
+    filterOutSelected: true,
+    isLoading: false,
+    labelKey: 'label',
+    maxDropdownHeight: '200px',
+    multi: false,
+    onBlur: _noop,
+    onBlurResetsInput: true,
+    onChange: _noop,
+    onFocus: _noop,
+    onInputChange: _noop,
+    onCloseResetsInput: true,
+    onSelectResetsInput: true,
+    openOnClick: true,
+    startOpen: false,
+    options: [],
+    overrides: {},
+    required: false,
+    searchable: true,
+    size: 'lg',
+    type: 'select',
+    value: [],
+    valueKey: 'id',
+    placement: 'bottom',
+};
+export default defaultProps;

package/esm/select/index.d.ts

@@ -0,0 +1,15 @@
+export type { Option, Value, OptionsT, StateReducer, OnChangeParams, SelectProps, AutosizeInputProps, DropdownProps, StatefulSelectProps, StatefulContainerProps, SelectActions, SelectState, AutosizeInputState, StatefulContainerState, } from './types';
+export { SELECT_ALL_ID } from './types';
+export type { SelectLocale } from './locale';
+export { STATE_CHANGE_TYPE } from './constants';
+export { StyledRoot, StyledClearIcon, StyledControlContainer, StyledDropdownContainer, StyledIconsContainer, StyledInput, StyledInputContainer, StyledInputSizer, StyledPlaceholder, StyledSearchIcon, StyledSearchIconContainer, StyledSelectArrow, StyledSingleValue, StyledValueContainer, NoResults, StyledOverlayContentContainer, } from './styled-component';
+export type { StyledSelect } from './styled-component';
+export { default as Select } from './select';
+export { default as StatefulSelect } from './stateful-select';
+export { MultiSelect, SingleSelect } from './select-variants';
+export { default as MultiValue } from './multi-value';
+export { default as SelectMenuAdapter } from './selectMenuAdapter';
+export { MobileSheet } from './mobileSelect';
+export { SingleValue } from 'baseui/select';
+export type { AutosizeInput, StatefulSelectContainer } from 'baseui/select';
+export { filterOptions as defaultFilterOptions } from './utils/default-filter-options';

package/esm/select/index.js

@@ -0,0 +1,14 @@
+export { SELECT_ALL_ID } from './types';
+export { STATE_CHANGE_TYPE } from './constants';
+// styled-components
+export { StyledRoot, StyledClearIcon, StyledControlContainer, StyledDropdownContainer, StyledIconsContainer, StyledInput, StyledInputContainer, StyledInputSizer, StyledPlaceholder, StyledSearchIcon, StyledSearchIconContainer, StyledSelectArrow, StyledSingleValue, StyledValueContainer, NoResults, StyledOverlayContentContainer, } from './styled-component';
+// components
+export { default as Select } from './select';
+export { default as StatefulSelect } from './stateful-select';
+export { MultiSelect, SingleSelect } from './select-variants';
+export { default as MultiValue } from './multi-value';
+export { default as SelectMenuAdapter } from './selectMenuAdapter';
+export { MobileSheet } from './mobileSelect';
+export { SingleValue } from 'baseui/select';
+// Utils
+export { filterOptions as defaultFilterOptions } from './utils/default-filter-options';

package/esm/select/locale.d.ts

@@ -0,0 +1,4 @@
+export declare type SelectLocale = {
+    noResultsMsg: string;
+    selectAllLabel: string;
+};

package/esm/select/locale.js

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

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

@@ -0,0 +1,8 @@
+import * as React from 'react';
+import { TransitionType } from './types';
+declare const AdaptedCSSTransition: ({ show, transitionType, children, }: {
+    show: boolean;
+    transitionType?: TransitionType | undefined;
+    children?: React.ReactNode;
+}) => React.ReactElement;
+export { AdaptedCSSTransition };

package/esm/select/mobileSelect/AdaptedCSSTransition/AdaptedCSSTransition.js

@@ -0,0 +1,11 @@
+import { __assign } from "tslib";
+import { jsx as _jsx } from "react/jsx-runtime";
+import CSSTransition from 'react-transition-group/CSSTransition';
+import { useTransitionStyles } from '../hooks/useTransitionStyles';
+import { TRANSITION_TYPES, TRANSITION_TIMEOUT } from './constants';
+var AdaptedCSSTransition = function (_a) {
+    var show = _a.show, _b = _a.transitionType, transitionType = _b === void 0 ? TRANSITION_TYPES.FADE : _b, children = _a.children;
+    var styles = useTransitionStyles(transitionType);
+    return (_jsx(CSSTransition, __assign({ timeout: TRANSITION_TIMEOUT, classNames: styles, in: show, mountOnEnter: true, unmountOnExit: true }, { children: children }), void 0));
+};
+export { AdaptedCSSTransition };

package/esm/select/mobileSelect/AdaptedCSSTransition/constants.d.ts

@@ -0,0 +1,8 @@
+export declare const TRANSITION_TYPES: {
+    readonly FADE: "FADE";
+    readonly SLIDE_FROM_BOTTOM: "SLIDE_FROM_BOTTOM";
+};
+export declare const TRANSITION_TIMEOUT: {
+    enter: number;
+    exit: number;
+};

package/esm/select/mobileSelect/AdaptedCSSTransition/constants.js

@@ -0,0 +1,8 @@
+export var TRANSITION_TYPES = {
+    FADE: 'FADE',
+    SLIDE_FROM_BOTTOM: 'SLIDE_FROM_BOTTOM',
+};
+export var TRANSITION_TIMEOUT = {
+    enter: 500,
+    exit: 500,
+};

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

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

package/esm/select/mobileSelect/AdaptedCSSTransition/index.js

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

package/esm/select/mobileSelect/AdaptedCSSTransition/types.d.ts

@@ -0,0 +1,2 @@
+import { TRANSITION_TYPES } from './constants';
+export declare type TransitionType = typeof TRANSITION_TYPES[keyof typeof TRANSITION_TYPES];

package/esm/select/mobileSelect/AdaptedCSSTransition/types.js

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

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

@@ -0,0 +1,6 @@
+import * as React from 'react';
+export declare const Backdrop: React.MemoExoticComponent<({ onHide, show, backdropKey, }: {
+    onHide: (e: React.MouseEvent) => void;
+    show: boolean;
+    backdropKey?: string | undefined;
+}) => React.ReactElement>;

package/esm/select/mobileSelect/Backdrop.js

@@ -0,0 +1,10 @@
+import { __assign } from "tslib";
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from 'react';
+import { Box } from '../../box';
+import AdaptedCSSTransition from './AdaptedCSSTransition';
+import { TRANSITION_TYPES } from './AdaptedCSSTransition/constants';
+export var Backdrop = React.memo(function (_a) {
+    var onHide = _a.onHide, show = _a.show, backdropKey = _a.backdropKey;
+    return (_jsx(AdaptedCSSTransition, __assign({ show: show, transitionType: TRANSITION_TYPES.FADE }, { children: _jsx(Box, { role: "presentation", className: "spr-overlay w-full h-screen cursor-pointer fixed inset-0 z-10", onClick: onHide, "data-id": backdropKey, id: backdropKey ? "".concat(backdropKey, "-backdrop") : undefined, "data-testid": "backdropEl" }, void 0) }), void 0));
+});

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

@@ -0,0 +1,3 @@
+import * as React from 'react';
+import { MobileSelectProps } from '../types';
+export declare const MobileSelect: React.MemoExoticComponent<(props: MobileSelectProps) => React.ReactElement>;

package/esm/select/mobileSelect/MobileSelect.js

@@ -0,0 +1,20 @@
+import { __assign, __read } from "tslib";
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from 'react';
+import _omit from 'lodash/omit';
+import { Select } from '../index';
+import { mergeOverrides } from '../../overrides';
+import { CHILD_SELECT_OVERRIDES, CHILD_SELECT_PROPS_TO_OMIT, OVERLAY_SELECT_PROPS_TO_OMIT, getOverlayOverrides, } from './overrides';
+import { usePauseBodyScrollEffect } from './hooks/usePauseBodyScrollEffect';
+export var MobileSelect = React.memo(function (props) {
+    var overrides = props.overrides, children = props.children, label = props.label;
+    var _a = __read(React.useState(null), 2), scrollContainer = _a[0], setScrollContainer = _a[1];
+    var mergedOverrides = React.useMemo(function () { return mergeOverrides(overrides !== null && overrides !== void 0 ? overrides : {}, getOverlayOverrides({ overlayContainerRef: setScrollContainer, label: label })); }, [overrides]);
+    var childSelectOverrides = React.useMemo(function () { return mergeOverrides(overrides !== null && overrides !== void 0 ? overrides : {}, CHILD_SELECT_OVERRIDES); }, [
+        overrides,
+    ]);
+    var overlaySelectProps = _omit(props, OVERLAY_SELECT_PROPS_TO_OMIT);
+    var viewSelectProps = _omit(props, CHILD_SELECT_PROPS_TO_OMIT);
+    usePauseBodyScrollEffect({ currentEl: scrollContainer || undefined });
+    return (_jsx(Select, __assign({ overlayWidth: "100%", maxDropdownHeight: "100%", autoFocus: true }, overlaySelectProps, { overrides: mergedOverrides, type: "overlay" }, { children: React.isValidElement(children) ? (children) : (_jsx(Select, __assign({}, viewSelectProps, { overrides: childSelectOverrides, type: "select" }), void 0)) }), void 0));
+});

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

@@ -0,0 +1,21 @@
+import * as React from 'react';
+import { Override } from '../../overrides';
+declare type MobileSheetOverrides = {
+    SheetContainer?: Override<Record<string, any>>;
+    Label?: Override<Record<string, any>>;
+    Layer?: Override<Record<string, any>>;
+    Backdrop?: Override<Record<string, any>>;
+};
+declare type MobileSheetProps = {
+    visible: boolean;
+    children: React.ReactNode;
+    sheetKey?: string;
+    onSheetHide?: () => void;
+    label?: React.ReactNode;
+    overrides?: MobileSheetOverrides;
+};
+export declare const MobileSheet: {
+    ({ children, sheetKey, visible, onSheetHide, label, overrides, }: MobileSheetProps): React.ReactElement;
+    displayName: string;
+};
+export {};

package/esm/select/mobileSelect/MobileSheet.js

@@ -0,0 +1,47 @@
+import { __assign, __read } from "tslib";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from 'react';
+import { Layer as DefaultLayer } from 'baseui/layer';
+import { LayersManager, Z_INDEX } from '../../layer';
+import { Box } from '../../box';
+import { IconButton } from '../../button';
+import { Typography } from '../../typography';
+import ChevronDown from '../../icon/components/chevron-down';
+import AdaptedCSSTransition from './AdaptedCSSTransition';
+import { Backdrop } from './Backdrop';
+import { SwipeableTargetArea } from './SwipeableTargetArea';
+import useCombinedRefs from '../../hooks/useCombinedRef';
+import { useMeasure } from '../../hooks/useMeasure';
+import { useSwipeableSheetStyles } from './hooks/useSwipeableSheetStyles';
+import { useKeyboardViewportShiftOffset } from './hooks/useKeyboardViewportShiftOffset';
+import { useOverrides } from '../../overrides';
+import { styled } from '../../style';
+import { TRANSITION_TYPES } from './AdaptedCSSTransition/constants';
+var StyledSheetContainer = styled('div', 'spr-ui-01 fixed bottom-0 w-full z-50 flex flex-col', function (_a) {
+    var px2rem = _a.px2rem;
+    return ({
+        maxHeight: px2rem(360),
+        borderTopRightRadius: px2rem(20),
+        borderTopLeftRadius: px2rem(20),
+        'overscroll-behavior': 'contain',
+        touchAction: 'none',
+    });
+});
+var StyledLabel = styled('div', 'flex items-center p-2');
+export var MobileSheet = function (_a) {
+    var children = _a.children, sheetKey = _a.sheetKey, visible = _a.visible, onSheetHide = _a.onSheetHide, label = _a.label, overrides = _a.overrides;
+    var _b = __read(useMeasure(), 2), sheetElementRef = _b[0], sheetElementHeight = _b[1].height;
+    var rootRef = React.useRef(null);
+    var combinedRef = useCombinedRefs(rootRef, sheetElementRef);
+    var _c = useSwipeableSheetStyles({
+        swipeThreshold: sheetElementHeight / 3,
+        handleDismiss: onSheetHide,
+    }), sheetStyles = _c.sheetStyles, onSwipeStart = _c.onSwipeStart, onSwipe = _c.onSwipe, onSwipeEnd = _c.onSwipeEnd, onHide = _c.onHide;
+    var offsetBottom = useKeyboardViewportShiftOffset(rootRef).offsetBottom;
+    var _d = __read(useOverrides(overrides === null || overrides === void 0 ? void 0 : overrides.SheetContainer, StyledSheetContainer), 2), SheetContainer = _d[0], sheetContainerProps = _d[1];
+    var _e = __read(useOverrides(overrides === null || overrides === void 0 ? void 0 : overrides.Label, StyledLabel), 2), Label = _e[0], labelProps = _e[1];
+    var _f = __read(useOverrides(overrides === null || overrides === void 0 ? void 0 : overrides.Layer, DefaultLayer), 2), Layer = _f[0], layerProps = _f[1];
+    var _g = __read(useOverrides(overrides === null || overrides === void 0 ? void 0 : overrides.Backdrop, Backdrop), 2), BackdropComp = _g[0], backdropProps = _g[1];
+    return (_jsx(LayersManager, __assign({ zIndex: Z_INDEX.OVERLAY }, { children: _jsx(Layer, __assign({}, layerProps, { children: _jsxs(Box, __assign({ id: "".concat(sheetKey, "-container"), "data-testid": "sheetContainer", role: "contentinfo" }, { children: [_jsx(BackdropComp, __assign({ show: visible, onHide: onHide, backdropKey: sheetKey }, backdropProps), void 0), _jsx(AdaptedCSSTransition, __assign({ show: visible, transitionType: TRANSITION_TYPES.SLIDE_FROM_BOTTOM }, { children: _jsxs(SheetContainer, __assign({ "data-testid": "".concat(sheetKey, "-sheetContainer") }, sheetContainerProps, { className: [{ bottom: offsetBottom }, sheetStyles, sheetContainerProps.className], ref: combinedRef }, { children: [label && (_jsxs(Label, __assign({}, labelProps, { children: [_jsx(IconButton, __assign({ onClick: onHide }, { children: _jsx(ChevronDown, { size: 12, className: { transform: 'rotate(90deg)' } }, void 0) }), void 0), _jsx(Typography, __assign({ variant: "h4" }, { children: label }), void 0)] }), void 0)), _jsx(SwipeableTargetArea, { onSwipeStart: onSwipeStart, onSwipe: onSwipe, onSwipeEnd: onSwipeEnd }, void 0), children] }), void 0) }), void 0)] }), void 0) }), void 0) }), void 0));
+};
+MobileSheet.displayName = 'MobileSheet';

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

@@ -0,0 +1,6 @@
+import * as React from 'react';
+export declare const SwipeableTargetArea: ({ onSwipeStart, onSwipeEnd, onSwipe, }: {
+    onSwipeStart: (e: React.TouchEvent) => void;
+    onSwipeEnd: (e: React.TouchEvent) => void;
+    onSwipe: (e: React.TouchEvent) => void;
+}) => React.ReactElement;

package/esm/select/mobileSelect/SwipeableTargetArea.js

@@ -0,0 +1,10 @@
+import { __assign } from "tslib";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Box } from '../../box';
+export var SwipeableTargetArea = function (_a) {
+    var onSwipeStart = _a.onSwipeStart, onSwipeEnd = _a.onSwipeEnd, onSwipe = _a.onSwipe;
+    return (_jsx(Box, __assign({ onTouchStart: onSwipeStart, onTouchEnd: onSwipeEnd, onTouchMove: onSwipe, className: [
+            'w-full relative z-10 flex flex-col justify-center items-center py-3',
+            { backgroundColor: 'transparent' },
+        ], "data-testid": "swipeableTargetHeader" }, { children: _jsx(Box, { className: "spr-tag rounded-16 h-1 w-10" }, void 0) }), void 0));
+};

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

@@ -0,0 +1,4 @@
+import * as React from 'react';
+export declare const useKeyboardViewportShiftOffset: (rootRef: React.MutableRefObject<HTMLElement | null>) => {
+    offsetBottom: number;
+};

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

@@ -0,0 +1,20 @@
+import { __read } from "tslib";
+import * as React from 'react';
+export var useKeyboardViewportShiftOffset = function (rootRef) {
+    var _a = __read(React.useState(0), 2), offsetBottom = _a[0], setOffsetBottom = _a[1];
+    React.useEffect(function () {
+        // needed for mobile Safari which shifts the layout viewport up without resizing it
+        // when the keyboard shows (see https://bugs.webkit.org/show_bug.cgi?id=141832)
+        var handler = function () {
+            if (rootRef.current) {
+                var _offsetBottom = window.innerHeight - window.visualViewport.height - window.visualViewport.offsetTop;
+                setOffsetBottom(_offsetBottom);
+            }
+        };
+        window.visualViewport.addEventListener('resize', handler);
+        return function () {
+            window.visualViewport.removeEventListener('resize', handler);
+        };
+    }, []);
+    return { offsetBottom: offsetBottom };
+};

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

@@ -0,0 +1,5 @@
+import { BodyScrollOptions } from 'body-scroll-lock';
+export declare const usePauseBodyScrollEffect: ({ currentEl, options, }: {
+    currentEl: HTMLElement | undefined | null;
+    options?: any;
+}) => void;

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

@@ -0,0 +1,14 @@
+import * as React from 'react';
+import { disableBodyScroll, enableBodyScroll } from 'body-scroll-lock';
+export var usePauseBodyScrollEffect = function (_a) {
+    var currentEl = _a.currentEl, options = _a.options;
+    React.useEffect(function () {
+        if (currentEl) {
+            disableBodyScroll(currentEl, options);
+            return function () {
+                enableBodyScroll(currentEl);
+            };
+        }
+        return undefined;
+    }, [currentEl, options]);
+};