@sprinklrjs/spaceweb 10.1.0

package/helpers/baseui/withThemeOverride.d.ts

@@ -0,0 +1,9 @@
+import * as React from 'react';
+import { Theme as StyletronTheme } from 'baseui/theme';
+import { Theme } from '@sprinklrjs/spaceweb-themes/types';
+declare const withThemeOverride: <P, FR>(Component: React.ComponentType<P>, mapSpaceThemeToBaseTheme: ThemeOverrideFunction) => React.ForwardRefExoticComponent<React.PropsWithoutRef<P> & React.RefAttributes<FR>>;
+export default withThemeOverride;
+declare type DeepPartial<T> = {
+    [P in keyof T]?: T[P] extends Array<infer U> ? Array<DeepPartial<U>> : T[P] extends ReadonlyArray<infer U> ? ReadonlyArray<DeepPartial<U>> : DeepPartial<T[P]>;
+};
+declare type ThemeOverrideFunction = (theme: Theme) => DeepPartial<StyletronTheme>;

package/helpers/baseui/withThemeOverride.js

@@ -0,0 +1,23 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var tslib_1 = require("tslib");
+var jsx_runtime_1 = require("react/jsx-runtime");
+var React = (0, tslib_1.__importStar)(require("react"));
+var baseui_1 = require("baseui");
+var useMemoizedStyletron_1 = (0, tslib_1.__importDefault)(require("../../style/useMemoizedStyletron"));
+var useStyle_1 = (0, tslib_1.__importDefault)(require("../../style/useStyle"));
+var themes_1 = require("../../themes");
+/* To update baseui theme object
+ * 2nd arg provides callback to map Theme to Baseweb Theme
+ * */
+var withThemeOverride = function (Component, mapSpaceThemeToBaseTheme) {
+    var ThemeOverridenComponent = React.forwardRef(function ThemeOverride(props, ref) {
+        var theme = (0, useStyle_1.default)().theme;
+        var _a = (0, tslib_1.__read)((0, useMemoizedStyletron_1.default)(), 2), styletronTheme = _a[1];
+        var updatedTheme = (0, themes_1.createTheme)(styletronTheme, mapSpaceThemeToBaseTheme(theme));
+        return ((0, jsx_runtime_1.jsx)(baseui_1.ThemeProvider, (0, tslib_1.__assign)({ theme: updatedTheme }, { children: (0, jsx_runtime_1.jsx)(Component, (0, tslib_1.__assign)({ ref: ref }, props), void 0) }), void 0));
+    });
+    ThemeOverridenComponent.displayName = "withThemeOverride(".concat(Component.displayName || Component.name, ")");
+    return ThemeOverridenComponent;
+};
+exports.default = withThemeOverride;

package/helpers/commonStyles.d.ts

@@ -0,0 +1,17 @@
+import { StyleFn, StyleObject, StyleUtils } from '../types';
+export declare const chevronStyles: StyleFn<{
+    $isOpen?: boolean;
+}>;
+/**
+ * This utility can be used when scroll track is clipping the border-radius of the container.
+ * https://prod-gitlab.sprinklr.com/sprinklr/frontend/spaceweb/-/merge_requests/890#note_1765218
+ */
+export declare const transparentScrollbarStyles: StyleObject;
+export declare type OutlineProps = {
+    $outlineColor?: string;
+    $outlineWidth?: string | number;
+    $outlineOffset?: string | number;
+    $outlineStyle?: string;
+};
+export declare const getOutlineStyles: ({ theme }: StyleUtils, props?: OutlineProps | undefined) => StyleObject;
+export declare const getFocusVisibleStyles: (utils: StyleUtils, props?: OutlineProps | undefined) => StyleObject;

package/helpers/commonStyles.js

@@ -0,0 +1,54 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getFocusVisibleStyles = exports.getOutlineStyles = exports.transparentScrollbarStyles = exports.chevronStyles = void 0;
+var chevronStyles = function (_a, _b) {
+    var theme = _a.theme, px2rem = _a.px2rem;
+    var $isOpen = _b.$isOpen;
+    var styles = {
+        color: theme.spr.icon03,
+        transition: 'transform 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms',
+        height: px2rem(10),
+        width: px2rem(10),
+    };
+    if ($isOpen) {
+        styles.color = theme.spr.icon04;
+        styles.transform = 'rotate(180deg)';
+    }
+    return styles;
+};
+exports.chevronStyles = chevronStyles;
+/**
+ * This utility can be used when scroll track is clipping the border-radius of the container.
+ * https://prod-gitlab.sprinklr.com/sprinklr/frontend/spaceweb/-/merge_requests/890#note_1765218
+ */
+exports.transparentScrollbarStyles = {
+    '::-webkit-scrollbar': {
+        backgroundColor: 'transparent',
+    },
+    '::-webkit-scrollbar-thumb': {
+        backgroundColor: 'darkgrey',
+        border: '4px solid transparent',
+        borderRadius: '8px',
+        backgroundClip: 'padding-box',
+    },
+};
+var getOutlineStyles = function (_a, props) {
+    var theme = _a.theme;
+    if (props === void 0) { props = {}; }
+    // TODO: default value of outlineColor
+    var _b = props.$outlineColor, $outlineColor = _b === void 0 ? theme.spr.focus01 : _b, _c = props.$outlineWidth, $outlineWidth = _c === void 0 ? '2px' : _c, _d = props.$outlineOffset, $outlineOffset = _d === void 0 ? '2px' : _d, _e = props.$outlineStyle, $outlineStyle = _e === void 0 ? 'solid' : _e;
+    return {
+        outlineStyle: $outlineStyle,
+        outlineWidth: $outlineWidth,
+        outlineColor: $outlineColor,
+        outlineOffset: $outlineOffset,
+    };
+};
+exports.getOutlineStyles = getOutlineStyles;
+var getFocusVisibleStyles = function (utils, props) {
+    if (props === void 0) { props = {}; }
+    return ({
+        ':focus-visible': (0, exports.getOutlineStyles)(utils, props),
+    });
+};
+exports.getFocusVisibleStyles = getFocusVisibleStyles;

package/helpers/index.d.ts

@@ -0,0 +1,25 @@
+/**
+ * Omits properties that starts with `$` (Styletron)
+ * @param $props properties
+ */
+export declare const omit$props: ($props: Record<string, unknown>) => Record<string, unknown>;
+/**
+ * Prefixes property names with `$` (Styletron)
+ * @param props properties
+ */
+export declare const add$props: (props: Record<string, unknown>) => Record<string, unknown>;
+/**
+ * Recursively extract css value from css variable value
+ * { ui01: 'var(--spr-ui-01, #FFF)' } -> { ui01: '#FFF' }
+ *
+ * Jest does not recognize css variables, this utility can help convert theme object.
+ *
+ * @param value
+ */
+export declare const covertCSSVariablesToValue: <T extends string | object>(value: T) => T;
+/**
+ * Converts hexadecimal color to RGB or RGBA (if alpha is provided)
+ * @param hex hexadecimal color
+ * @param alpha opacity
+ */
+export declare const hex2rgb: (_hex: string, alpha?: string | undefined) => string | null;

package/helpers/index.js

@@ -0,0 +1,72 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.hex2rgb = exports.covertCSSVariablesToValue = exports.add$props = exports.omit$props = void 0;
+var tslib_1 = require("tslib");
+/**
+ * Omits properties that starts with `$` (Styletron)
+ * @param $props properties
+ */
+var omit$props = function ($props) {
+    return Object.entries($props).reduce(function (props, _a) {
+        var _b = (0, tslib_1.__read)(_a, 2), key = _b[0], val = _b[1];
+        if (key[0] !== '$')
+            props[key] = val;
+        return props;
+    }, {});
+};
+exports.omit$props = omit$props;
+/**
+ * Prefixes property names with `$` (Styletron)
+ * @param props properties
+ */
+var add$props = function (props) {
+    return Object.entries(props).reduce(function ($props, _a) {
+        var _b;
+        var _c = (0, tslib_1.__read)(_a, 2), key = _c[0], val = _c[1];
+        return ((0, tslib_1.__assign)((0, tslib_1.__assign)({}, $props), (_b = {}, _b[key[0] === '$' ? key : "$".concat(key)] = val, _b)));
+    }, {});
+};
+exports.add$props = add$props;
+/**
+ * Recursively extract css value from css variable value
+ * { ui01: 'var(--spr-ui-01, #FFF)' } -> { ui01: '#FFF' }
+ *
+ * Jest does not recognize css variables, this utility can help convert theme object.
+ *
+ * @param value
+ */
+var covertCSSVariablesToValue = function (value) {
+    if (typeof value === 'string' && value.indexOf('var(') >= 0) {
+        var startIndex = value.indexOf(',');
+        return value.slice(startIndex + 1, value.length - 1).trim();
+    }
+    if (value && typeof value === 'object') {
+        var newValue_1 = {};
+        Object.keys(value).forEach(function (key) {
+            newValue_1[key] = (0, exports.covertCSSVariablesToValue)(value[key]);
+        });
+        return newValue_1;
+    }
+    return value;
+};
+exports.covertCSSVariablesToValue = covertCSSVariablesToValue;
+/**
+ * Converts hexadecimal color to RGB or RGBA (if alpha is provided)
+ * @param hex hexadecimal color
+ * @param alpha opacity
+ */
+var hex2rgb = function (_hex, alpha) {
+    var hex = (0, exports.covertCSSVariablesToValue)(_hex);
+    var shorthandRegex = /^#?([a-f\d])([a-f\d])([a-f\d])$/i;
+    var parsed = hex.replace(shorthandRegex, function (m, r, g, b) {
+        return r + r + g + g + b + b;
+    });
+    var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(parsed);
+    if (result) {
+        return alpha
+            ? "rgba(".concat(parseInt(result[1], 16), ", ").concat(parseInt(result[2], 16), ", ").concat(parseInt(result[3], 16), ", ").concat(alpha, ")")
+            : "rgb(".concat(parseInt(result[1], 16), ", ").concat(parseInt(result[2], 16), ", ").concat(parseInt(result[3], 16), ")");
+    }
+    return null;
+};
+exports.hex2rgb = hex2rgb;

package/helpers/intentHelper.d.ts

@@ -0,0 +1,5 @@
+export declare const intentColor: ({ theme }: {
+    theme: any;
+}, { $intent }: {
+    $intent?: string | undefined;
+}, defaultColor?: any) => any;

package/helpers/intentHelper.js

@@ -0,0 +1,21 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.intentColor = void 0;
+var intentColor = function (_a, _b, defaultColor) {
+    var theme = _a.theme;
+    var _c = _b.$intent, $intent = _c === void 0 ? 'default' : _c;
+    if (defaultColor === void 0) { defaultColor = theme.spr.focus01; }
+    switch ($intent) {
+        case 'default':
+        default: {
+            return defaultColor;
+        }
+        case 'success':
+            return theme.spr.supportSuccess;
+        case 'warning':
+            return theme.spr.supportWarning;
+        case 'error':
+            return theme.spr.supportError;
+    }
+};
+exports.intentColor = intentColor;

package/helpers/longHandHelpers.d.ts

@@ -0,0 +1,7 @@
+import { StyleObject } from '../types';
+export declare const borderRadius: (value: any) => StyleObject;
+export declare const borderWidth: (value: any) => StyleObject;
+export declare const borderStyle: (value: any) => StyleObject;
+export declare const borderColor: (value: any) => StyleObject;
+export declare const padding: (value: any) => StyleObject;
+export declare const margin: (value: any) => StyleObject;

package/helpers/longHandHelpers.js

@@ -0,0 +1,45 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.margin = exports.padding = exports.borderColor = exports.borderStyle = exports.borderWidth = exports.borderRadius = void 0;
+var borderRadius = function (value) { return ({
+    borderTopRightRadius: value,
+    borderTopLeftRadius: value,
+    borderBottomRightRadius: value,
+    borderBottomLeftRadius: value,
+}); };
+exports.borderRadius = borderRadius;
+var borderWidth = function (value) { return ({
+    borderTopWidth: value,
+    borderRightWidth: value,
+    borderBottomWidth: value,
+    borderLeftWidth: value,
+}); };
+exports.borderWidth = borderWidth;
+var borderStyle = function (value) { return ({
+    borderTopStyle: value,
+    borderBottomStyle: value,
+    borderRightStyle: value,
+    borderLeftStyle: value,
+}); };
+exports.borderStyle = borderStyle;
+var borderColor = function (value) { return ({
+    borderTopColor: value,
+    borderRightColor: value,
+    borderBottomColor: value,
+    borderLeftColor: value,
+}); };
+exports.borderColor = borderColor;
+var padding = function (value) { return ({
+    paddingTop: value,
+    paddingRight: value,
+    paddingBottom: value,
+    paddingLeft: value,
+}); };
+exports.padding = padding;
+var margin = function (value) { return ({
+    marginTop: value,
+    marginRight: value,
+    marginBottom: value,
+    marginLeft: value,
+}); };
+exports.margin = margin;

package/helpers/package.json

@@ -0,0 +1,4 @@
+{
+  "sideEffects": false,
+  "module": "../esm/helpers/index.js"
+}

package/helpers/styletron.d.ts

@@ -0,0 +1,12 @@
+/**
+ * @deprecated use spaceweb/styled
+ */
+export declare const styled: import("baseui").StyledFn<ThemeT>;
+/**
+ * @deprecated
+ */
+export declare const withStyle: import("baseui").WithStyleFn<ThemeT>;
+/**
+ * @deprecated use spaceweb/useStyle
+ */
+export declare const useStyletron: () => [(arg: import("styletron-standard").StyleObject) => string, ThemeT];

package/helpers/styletron.js

@@ -0,0 +1,16 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useStyletron = exports.withStyle = exports.styled = void 0;
+var baseui_1 = require("baseui");
+/**
+ * @deprecated use spaceweb/styled
+ */
+exports.styled = (0, baseui_1.createThemedStyled)(); // remove once spaceweb/styled provides props to style callback
+/**
+ * @deprecated
+ */
+exports.withStyle = (0, baseui_1.createThemedWithStyle)();
+/**
+ * @deprecated use spaceweb/useStyle
+ */
+exports.useStyletron = (0, baseui_1.createThemedUseStyletron)();

package/helpers/themeHelpers.d.ts

@@ -0,0 +1,4 @@
+import { Theme } from '@sprinklrjs/spaceweb-themes/types';
+import { Size } from '../types';
+export declare const getComponentTheme: (theme: Theme, componentName: string) => any;
+export declare const getComponentSizeTheme: (theme: Theme, componentName: string, size: Size | undefined, defaultSize: Size) => any;

package/helpers/themeHelpers.js

@@ -0,0 +1,24 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getComponentSizeTheme = exports.getComponentTheme = void 0;
+var getComponentTheme = function (theme, componentName) { return theme[componentName]; };
+exports.getComponentTheme = getComponentTheme;
+var sizeAdapter = {
+    xxxs: 'sizeXxxs',
+    xxs: 'sizeXxs',
+    xs: 'sizeXs',
+    sm: 'sizeSm',
+    md: 'sizeMd',
+    lg: 'sizeLg',
+    xl: 'sizeXl',
+};
+/*
+  NOTE: Need to add defaultSize as Button only supports xs - lg, whereas
+  it's consumers like IconButton support xs - xl, due to which accessing component theme breaks in Button for xl
+ */
+var getComponentSizeTheme = function (theme, componentName, size, defaultSize) {
+    var _a, _b;
+    var componentTheme = (_a = (0, exports.getComponentTheme)(theme, componentName)) !== null && _a !== void 0 ? _a : {};
+    return (_b = componentTheme[sizeAdapter[size !== null && size !== void 0 ? size : defaultSize]]) !== null && _b !== void 0 ? _b : componentTheme[sizeAdapter[defaultSize]];
+};
+exports.getComponentSizeTheme = getComponentSizeTheme;

package/helpers/typography.d.ts

@@ -0,0 +1,2 @@
+import * as React from 'react';
+export declare const isTypographyNode: (node: React.ReactNode) => boolean;

package/helpers/typography.js

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.isTypographyNode = void 0;
+var tslib_1 = require("tslib");
+var React = (0, tslib_1.__importStar)(require("react"));
+var typography_1 = require("../typography");
+var isTypographyNode = function (node) {
+    return React.isValidElement(node) && node.type === typography_1.Typography;
+};
+exports.isTypographyNode = isTypographyNode;

package/hooks/package.json

@@ -0,0 +1,4 @@
+{
+  "sideEffects": false,
+  "module": "../esm/hooks/index.js"
+}

package/hooks/useAutoFocus.d.ts

@@ -0,0 +1,9 @@
+import * as React from 'react';
+import { InputProps } from '../input';
+import { TextareaProps } from '../textarea';
+declare type UseAutoFocus = {
+    (props: Pick<InputProps, 'autoFocus' | 'inputRef'>): React.RefObject<HTMLInputElement>;
+    (props: Pick<TextareaProps, 'autoFocus' | 'inputRef'>): React.RefObject<HTMLTextAreaElement>;
+};
+declare const useAutoFocus: UseAutoFocus;
+export default useAutoFocus;

package/hooks/useAutoFocus.js

@@ -0,0 +1,61 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var tslib_1 = require("tslib");
+var React = (0, tslib_1.__importStar)(require("react"));
+var __DEV__ = process.env.NODE_ENV !== 'production';
+var useAutoFocus = function (_a) {
+    var autoFocus = _a.autoFocus, inputRef = _a.inputRef;
+    var ownRef = React.useRef(null);
+    var ref = inputRef !== null && inputRef !== void 0 ? inputRef : ownRef;
+    React.useEffect(function () {
+        if (!ref.current || typeof autoFocus === 'undefined') {
+            return;
+        }
+        var position;
+        switch (typeof autoFocus) {
+            case 'boolean':
+                if (autoFocus) {
+                    position = ref.current.value.length;
+                }
+                else {
+                    return;
+                }
+                break;
+            case 'number':
+                if (autoFocus >= ref.current.value.length) {
+                    position = ref.current.value.length;
+                }
+                else if (autoFocus >= 0) {
+                    position = autoFocus;
+                }
+                else {
+                    position = 0;
+                }
+                break;
+            case 'string':
+                if (autoFocus === 'start') {
+                    position = 0;
+                }
+                else if (autoFocus === 'end') {
+                    position = ref.current.value.length;
+                }
+                else {
+                    return;
+                }
+                break;
+            default:
+                position = 0;
+        }
+        try {
+            ref.current.focus();
+            ref.current.setSelectionRange(position, position);
+        }
+        catch (err) {
+            if (__DEV__) {
+                console.error(err);
+            }
+        }
+    }, [autoFocus]);
+    return ref;
+};
+exports.default = useAutoFocus;

package/hooks/useCombinedHandler.d.ts

@@ -0,0 +1,6 @@
+/**
+ * When you want to bind multiple handlers to same event.
+ * onKeyDown = useCombinedHandler(handleOnKeyDown, props.onKeyDown)
+ */
+declare const useCombinedHandler: <T extends (...args: unknown[]) => void>(...handlers: (T | undefined)[]) => (...args: Parameters<T>) => void;
+export default useCombinedHandler;

package/hooks/useCombinedHandler.js

@@ -0,0 +1,22 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var tslib_1 = require("tslib");
+var react_1 = require("react");
+/**
+ * When you want to bind multiple handlers to same event.
+ * onKeyDown = useCombinedHandler(handleOnKeyDown, props.onKeyDown)
+ */
+var useCombinedHandler = function () {
+    var handlers = [];
+    for (var _i = 0; _i < arguments.length; _i++) {
+        handlers[_i] = arguments[_i];
+    }
+    return (0, react_1.useCallback)(function () {
+        var args = [];
+        for (var _i = 0; _i < arguments.length; _i++) {
+            args[_i] = arguments[_i];
+        }
+        handlers.forEach(function (handler) { return handler && handler.apply(void 0, (0, tslib_1.__spreadArray)([], (0, tslib_1.__read)(args), false)); });
+    }, (0, tslib_1.__spreadArray)([], (0, tslib_1.__read)(handlers), false));
+};
+exports.default = useCombinedHandler;

package/hooks/useCombinedRef.d.ts

@@ -0,0 +1,6 @@
+import * as React from 'react';
+export declare type Ref<T> = React.RefCallback<T> | React.MutableRefObject<T> | null;
+declare type Refs<T> = (Ref<T | null> | null | undefined)[];
+export declare function combineRefs<T>(...refs: Refs<T>): (element: T) => void;
+declare function useCombinedRefs<T>(...refs: Refs<T>): React.RefCallback<T | null>;
+export default useCombinedRefs;

package/hooks/useCombinedRef.js

@@ -0,0 +1,37 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.combineRefs = void 0;
+var tslib_1 = require("tslib");
+var react_1 = require("react");
+function combineRefs() {
+    var refs = [];
+    for (var _i = 0; _i < arguments.length; _i++) {
+        refs[_i] = arguments[_i];
+    }
+    return function (element) {
+        refs.forEach(function (ref) {
+            if (!ref)
+                return;
+            if (typeof ref === 'function') {
+                ref(element);
+            }
+            else {
+                ref.current = element;
+            }
+        });
+    };
+}
+exports.combineRefs = combineRefs;
+/*
+ * combines multiple refs to single MutableRefObject - when one wants to assign same element/instance to multiple refs
+ * https://github.com/facebook/react/issues/13029#issue-331682836
+ * can also be used to convert RefCallback to MutableRefObject
+ */
+function useCombinedRefs() {
+    var refs = [];
+    for (var _i = 0; _i < arguments.length; _i++) {
+        refs[_i] = arguments[_i];
+    }
+    return (0, react_1.useCallback)(combineRefs.apply(void 0, (0, tslib_1.__spreadArray)([], (0, tslib_1.__read)(refs), false)), (0, tslib_1.__spreadArray)([], (0, tslib_1.__read)(refs), false));
+}
+exports.default = useCombinedRefs;

package/hooks/useDebouncedEventHandler.d.ts

@@ -0,0 +1,6 @@
+/**
+ *  Created by Aneree on 10/12/20.
+ */
+import { ReactEventHandler } from 'react';
+declare const useDebouncedEventHandler: <EH extends ReactEventHandler<Element>>(func: EH, defaultHandler?: EH | undefined, debounceInterval?: number) => (event: Parameters<EH>[0]) => void;
+export { useDebouncedEventHandler };

package/hooks/useDebouncedEventHandler.js

@@ -0,0 +1,38 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useDebouncedEventHandler = void 0;
+var tslib_1 = require("tslib");
+/**
+ *  Created by Aneree on 10/12/20.
+ */
+var react_1 = require("react");
+var debounce_1 = (0, tslib_1.__importDefault)(require("lodash/debounce"));
+var useLatest_1 = require("./useLatest");
+var useDebouncedEventHandler = function (func, //Event handler that needs to be debounced
+defaultHandler, // Event handler that should be invoked on every event trigger
+debounceInterval) {
+    if (debounceInterval === void 0) { debounceInterval = 200; }
+    var funcRef = (0, useLatest_1.useLatest)(func);
+    var debouncedHandler = (0, react_1.useMemo)(function () { return (0, debounce_1.default)(function () {
+        var args = [];
+        for (var _i = 0; _i < arguments.length; _i++) {
+            args[_i] = arguments[_i];
+        }
+        return funcRef.current.apply(funcRef, (0, tslib_1.__spreadArray)([], (0, tslib_1.__read)(args), false));
+    }, debounceInterval); }, [debounceInterval]);
+    var debounceHandlerRef = (0, useLatest_1.useLatest)(debouncedHandler);
+    (0, react_1.useEffect)(function () { return function () {
+        var _a, _b;
+        //cancel the invocation of debounced function on unmount
+        (_b = (_a = debounceHandlerRef.current).cancel) === null || _b === void 0 ? void 0 : _b.call(_a);
+    }; }, [debounceHandlerRef]);
+    return (0, react_1.useCallback)(function (event) {
+        var _a;
+        //Persist the event for it to be accessible in debounced function
+        (_a = event.persist) === null || _a === void 0 ? void 0 : _a.call(event);
+        //@ts-ignore
+        debouncedHandler(event);
+        defaultHandler === null || defaultHandler === void 0 ? void 0 : defaultHandler(event);
+    }, [defaultHandler, debouncedHandler]);
+};
+exports.useDebouncedEventHandler = useDebouncedEventHandler;

package/hooks/useFirstMountState.d.ts

@@ -0,0 +1,2 @@
+declare function useFirstMountState(): boolean;
+export { useFirstMountState };

package/hooks/useFirstMountState.js

@@ -0,0 +1,16 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useFirstMountState = void 0;
+/**
+ *  Created by Aneree on 15/01/21.
+ */
+var react_1 = require("react");
+function useFirstMountState() {
+    var isFirst = (0, react_1.useRef)(true);
+    if (isFirst.current) {
+        isFirst.current = false;
+        return true;
+    }
+    return isFirst.current;
+}
+exports.useFirstMountState = useFirstMountState;

package/hooks/useFocusVisible.d.ts

@@ -0,0 +1,5 @@
+export declare const useFocusVisible: (props?: Record<string, any> | undefined) => {
+    $isFocusVisible: boolean;
+    onFocus: (...args: unknown[]) => void;
+    onBlur: (...args: unknown[]) => void;
+};

package/hooks/useFocusVisible.js

@@ -0,0 +1,26 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useFocusVisible = void 0;
+var tslib_1 = require("tslib");
+var react_1 = require("react");
+var focusVisible_1 = require("baseui/utils/focusVisible");
+var useCombinedHandler_1 = (0, tslib_1.__importDefault)(require("./useCombinedHandler"));
+var useFocusVisible = function (props) {
+    var _a = (0, tslib_1.__read)((0, react_1.useState)(false), 2), $isFocusVisible = _a[0], setIsFocusVisible = _a[1];
+    var handleFocus = (0, react_1.useCallback)(function (event) {
+        if ((0, focusVisible_1.isFocusVisible)(event)) {
+            setIsFocusVisible(true);
+        }
+    }, [setIsFocusVisible]);
+    var handleBlur = (0, react_1.useCallback)(function () {
+        if ($isFocusVisible) {
+            setIsFocusVisible(false);
+        }
+    }, [$isFocusVisible, setIsFocusVisible]);
+    return {
+        $isFocusVisible: $isFocusVisible,
+        onFocus: (0, useCombinedHandler_1.default)(props === null || props === void 0 ? void 0 : props.onFocus, handleFocus),
+        onBlur: (0, useCombinedHandler_1.default)(props === null || props === void 0 ? void 0 : props.onBlur, handleBlur),
+    };
+};
+exports.useFocusVisible = useFocusVisible;

package/hooks/useIsomorphicLayoutEffect.d.ts

@@ -0,0 +1,2 @@
+import { useEffect } from 'react';
+export declare const useIsomorphicLayoutEffect: typeof useEffect;

package/hooks/useIsomorphicLayoutEffect.js

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useIsomorphicLayoutEffect = void 0;
+var react_1 = require("react");
+var isBrowser = typeof window !== 'undefined';
+exports.useIsomorphicLayoutEffect = isBrowser ? react_1.useLayoutEffect : react_1.useEffect;

package/hooks/useLatest.d.ts

@@ -0,0 +1,4 @@
+declare const useLatest: <T>(value: T) => {
+    readonly current: T;
+};
+export { useLatest };