@sprinklrjs/spaceweb 10.1.0

package/esm/checkbox/basewebAdapters.js

@@ -0,0 +1,31 @@
+import { __assign, __rest } from "tslib";
+import { add$props } from '../helpers';
+import { useConvertOverrides } from '../helpers/baseui/useConvertOverrides';
+import { getCheckmarkOverrides, getLabelOverrides, getRootOverrides } from './styled-components';
+import { useContextualFormProps } from '../form-control/context';
+export default function useCheckboxAdapter(props) {
+    var _a = useContextualFormProps(props), size = _a.size, className = _a.className, style = _a.style, overrides = _a.overrides, intent = _a.intent, $outlineStyle = _a.$outlineStyle, $outlineColor = _a.$outlineColor, $outlineOffset = _a.$outlineOffset, $outlineWidth = _a.$outlineWidth, restProps = __rest(_a, ["size", "className", "style", "overrides", "intent", "$outlineStyle", "$outlineColor", "$outlineOffset", "$outlineWidth"]);
+    var convertedOverrides = useConvertOverrides({
+        Root: {
+            style: [className, style, getRootOverrides],
+        },
+        Checkmark: {
+            style: getCheckmarkOverrides,
+            props: add$props({ size: size, intent: intent, $outlineStyle: $outlineStyle, $outlineColor: $outlineColor, $outlineOffset: $outlineOffset, $outlineWidth: $outlineWidth }),
+        },
+        Label: {
+            style: getLabelOverrides,
+            props: add$props({ size: size }),
+        },
+        // SharedProps for switch component
+        Toggle: {
+            props: add$props({ size: size, intent: intent }),
+        },
+        ToggleTrack: {
+            props: add$props({ size: size, intent: intent }),
+        },
+        // https://prod-gitlab.sprinklr.com/sprinklr/frontend/spaceweb/-/issues/406 - baseui adds position absolute
+        Input: { style: { position: 'static' } },
+    }, overrides);
+    return __assign(__assign({}, restProps), { overrides: convertedOverrides });
+}

package/esm/checkbox/checkbox.d.ts

@@ -0,0 +1,10 @@
+import { PropsWithChildren, ReactElement } from 'react';
+import { CheckboxProps, StatefulCheckboxProps } from './types';
+export declare const Checkbox: {
+    (props: PropsWithChildren<CheckboxProps>): ReactElement;
+    displayName: string;
+};
+export declare const StatefulCheckbox: {
+    (props: PropsWithChildren<StatefulCheckboxProps>): ReactElement;
+    displayName: string;
+};

package/esm/checkbox/checkbox.js

@@ -0,0 +1,17 @@
+import { __assign } from "tslib";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Checkbox as BaseCheckbox, StatefulCheckbox as BaseStatefulCheckbox } from 'baseui/checkbox';
+import useCheckboxAdapter from './basewebAdapters';
+// @ts-ignore
+BaseCheckbox.displayName = 'BaseUICheckbox';
+BaseStatefulCheckbox.displayName = 'BaseUIStatefulCheckbox';
+export var Checkbox = function (props) {
+    var adaptedProps = useCheckboxAdapter(props);
+    return _jsx(BaseCheckbox, __assign({}, adaptedProps), void 0);
+};
+Checkbox.displayName = 'Checkbox';
+export var StatefulCheckbox = function (props) {
+    var adaptedProps = useCheckboxAdapter(props);
+    return _jsx(BaseStatefulCheckbox, __assign({}, adaptedProps), void 0);
+};
+StatefulCheckbox.displayName = 'StatefulCheckbox';

package/esm/checkbox/index.d.ts

@@ -0,0 +1,5 @@
+export { Checkbox, StatefulCheckbox } from './checkbox';
+export { StatefulContainer, StyledRoot, StyledCheckmark, StyledLabel, StyledInput, StyledToggle, StyledToggleInner, StyledToggleTrack, } from 'baseui/checkbox';
+export type { StateReducer, StatefulContainerProps, CheckboxOverrides, CheckboxState } from 'baseui/checkbox';
+export { STATE_TYPE, STYLE_TYPE } from 'baseui/checkbox';
+export * from './types';

package/esm/checkbox/index.js

@@ -0,0 +1,4 @@
+export { Checkbox, StatefulCheckbox } from './checkbox';
+export { StatefulContainer, StyledRoot, StyledCheckmark, StyledLabel, StyledInput, StyledToggle, StyledToggleInner, StyledToggleTrack, } from 'baseui/checkbox';
+export { STATE_TYPE, STYLE_TYPE } from 'baseui/checkbox';
+export * from './types';

package/esm/checkbox/styled-components.d.ts

@@ -0,0 +1,5 @@
+import { StyleFn, StyleObject } from '../types';
+import { SharedProps } from './types';
+export declare const getLabelOverrides: StyleFn<SharedProps>;
+export declare const getCheckmarkOverrides: StyleFn<SharedProps>;
+export declare const getRootOverrides: () => StyleObject;

package/esm/checkbox/styled-components.js

@@ -0,0 +1,92 @@
+import { __assign } from "tslib";
+import { borderColor, borderWidth } from '../helpers/longHandHelpers';
+import { getOutlineStyles } from '../helpers/commonStyles';
+import { hex2rgb } from '../helpers';
+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;
+    }
+};
+var getBorderColor = function (utils, props) {
+    var theme = utils.theme;
+    var $disabled = props.$disabled, $checked = props.$checked, $isIndeterminate = props.$isIndeterminate, $isHovered = props.$isHovered, $isFocusVisible = props.$isFocusVisible;
+    if ($checked || $isIndeterminate) {
+        return 'transparent';
+    }
+    if ($disabled) {
+        return hex2rgb(intentColor(utils, props, theme.spr.iconDisable), '0.5');
+    }
+    if ($isHovered || $isFocusVisible) {
+        return intentColor(utils, props, theme.spr.border06);
+    }
+    return intentColor(utils, props, theme.spr.icon03);
+};
+var getBackgroundColor = function (utils, props) {
+    var $disabled = props.$disabled, $checked = props.$checked, $isIndeterminate = props.$isIndeterminate;
+    if ($disabled) {
+        if ($checked || $isIndeterminate) {
+            return hex2rgb(intentColor(utils, props), '0.5');
+        }
+        return 'transparent';
+    }
+    if ($checked || $isIndeterminate) {
+        return intentColor(utils, props);
+    }
+    return 'transparent';
+};
+export var getLabelOverrides = function (_a, _b) {
+    var px2rem = _a.px2rem, theme = _a.theme;
+    var $disabled = _b.$disabled, $size = _b.$size;
+    var styles = {
+        fontSize: theme.typography.bs2.fontSize,
+        lineHeight: theme.typography.bs2.lineHeight,
+        color: $disabled ? theme.spr.text02 : theme.spr.text01,
+        paddingLeft: px2rem(8),
+        wordBreak: 'break-word',
+    };
+    if ($size === 'lg') {
+        styles.fontSize = theme.typography.bs1.fontSize;
+        styles.lineHeight = theme.typography.bs1.lineHeight;
+        styles.paddingLeft = px2rem(10);
+    }
+    if ($size === 'sm') {
+        styles.fontSize = theme.typography.bs3.fontSize;
+        styles.lineHeight = theme.typography.bs3.lineHeight;
+    }
+    return styles;
+};
+export var getCheckmarkOverrides = function (utils, props) {
+    var px2rem = utils.px2rem;
+    var $size = props.$size, $isFocusVisible = props.$isFocusVisible, $outlineStyle = props.$outlineStyle, $outlineColor = props.$outlineColor, $outlineOffset = props.$outlineOffset, $outlineWidth = props.$outlineWidth;
+    var styles = __assign(__assign(__assign(__assign({ boxSizing: 'border-box', backgroundColor: getBackgroundColor(utils, props) }, borderColor(getBorderColor(utils, props))), borderWidth(px2rem(1))), { height: px2rem(14), width: px2rem(14), marginTop: px2rem(2), marginBottom: px2rem(2), marginLeft: '0', marginRight: '0', borderTopLeftRadius: px2rem(2), borderBottomLeftRadius: px2rem(2), borderBottomRightRadius: px2rem(2), borderTopRightRadius: px2rem(2), backgroundSize: "".concat(px2rem(8), " ").concat(px2rem(6)), alignSelf: 'flex-start' }), ($isFocusVisible
+        ? getOutlineStyles(utils, { $outlineStyle: $outlineStyle, $outlineColor: $outlineColor, $outlineOffset: $outlineOffset, $outlineWidth: $outlineWidth })
+        : {}));
+    switch ($size) {
+        case 'lg':
+            styles.height = styles.width = px2rem(16);
+            styles.backgroundSize = "".concat(px2rem(9), " ").concat(px2rem(7));
+            break;
+        case 'sm':
+            styles.height = styles.width = px2rem(12);
+            break;
+        default:
+            break;
+    }
+    return styles;
+};
+export var getRootOverrides = function () { return ({
+    alignItems: 'center',
+    userSelect: undefined,
+}); };

package/esm/checkbox/types.d.ts

@@ -0,0 +1,28 @@
+import { CheckboxProps as BaseCheckboxProps, StatefulCheckboxProps as BaseStatefulCheckboxProps } from 'baseui/checkbox';
+import { SharedProps as BaseSharedProps } from 'baseui/input';
+import { OutlineProps } from '../helpers/commonStyles';
+import { Override } from '../overrides';
+import { Intent, SpacewebComponentProps } from '../types';
+export declare type CheckboxSize = 'sm' | 'md' | 'lg';
+export declare type SharedProps = BaseSharedProps & {
+    $checked: boolean;
+    $intent: boolean;
+    $isFocusVisible: boolean;
+    $isHovered: boolean;
+    $isIndeterminate: boolean;
+    $size: CheckboxSize;
+};
+export declare type CheckboxProps = SpacewebComponentProps<Omit<BaseCheckboxProps, 'overrides' | 'size' | 'intent'>> & {
+    size?: CheckboxSize;
+    intent?: Intent;
+    overrides?: {
+        [key in keyof BaseCheckboxProps['overrides']]?: Override<SharedProps>;
+    };
+} & OutlineProps;
+export declare type StatefulCheckboxProps = SpacewebComponentProps<Omit<BaseStatefulCheckboxProps, 'overrides' | 'size' | 'intent'>> & {
+    size?: CheckboxSize;
+    intent?: Intent;
+    overrides?: {
+        [key in keyof BaseStatefulCheckboxProps['overrides']]?: Override<SharedProps>;
+    };
+} & OutlineProps;

package/esm/checkbox/types.js

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

package/esm/classNames/index.d.ts

@@ -0,0 +1 @@
+export { default } from 'classnames';

package/esm/classNames/index.js

@@ -0,0 +1 @@
+export { default } from 'classnames';

package/esm/col/index.d.ts

@@ -0,0 +1,2 @@
+import Col from '../grid/Col';
+export default Col;

package/esm/col/index.js

@@ -0,0 +1,2 @@
+import Col from '../grid/Col';
+export default Col;

package/esm/container/ContainerProps.d.ts

@@ -0,0 +1,6 @@
+import { ReactNode } from 'react';
+declare type ContainerProps = {
+    children: ReactNode;
+    variant: 'fixed' | 'fluid';
+};
+export default ContainerProps;

package/esm/container/ContainerProps.js

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

package/esm/date-input/Before.d.ts

@@ -0,0 +1,17 @@
+import { ReactElement } from 'react';
+import { SharedProps } from 'baseui/input';
+import { WeekStartsOn } from '../date-picker';
+import { Override } from '../overrides';
+export declare const Before: ({ weekStartsOn, adapter, locale, overrides, onChange: _onChange, minDate, maxDate, value, timeSelect, ...props }: SharedProps & {
+    adapter?: any;
+    locale?: any;
+    overrides?: {
+        DatePicker?: Override<Record<string, any>> | undefined;
+    } | undefined;
+    onChange: (value?: Date | undefined) => void;
+    weekStartsOn?: WeekStartsOn | undefined;
+    minDate?: Date | undefined;
+    maxDate?: Date | undefined;
+    value?: Date | undefined;
+    timeSelect?: boolean | undefined;
+}) => ReactElement;

package/esm/date-input/Before.js

@@ -0,0 +1,23 @@
+import { __assign, __read, __rest } from "tslib";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useMemo, useCallback } from 'react';
+import { DatePicker as DefaultDatePicker } from '../date-picker';
+import { CalendarIconButton } from './CalendarIconButton';
+import { mergeOverrides, useOverrides } from '../overrides';
+export var Before = function (_a) {
+    var weekStartsOn = _a.weekStartsOn, adapter = _a.adapter, locale = _a.locale, overrides = _a.overrides, _onChange = _a.onChange, minDate = _a.minDate, maxDate = _a.maxDate, value = _a.value, timeSelect = _a.timeSelect, props = __rest(_a, ["weekStartsOn", "adapter", "locale", "overrides", "onChange", "minDate", "maxDate", "value", "timeSelect"]);
+    var onChange = useCallback(function (data) {
+        _onChange(data.value);
+    }, [_onChange]);
+    var _b = __read(useOverrides(overrides === null || overrides === void 0 ? void 0 : overrides.DatePicker, DefaultDatePicker), 2), DatePicker = _b[0], datePickerProps = _b[1];
+    var mergedOverrides = useMemo(function () {
+        var _a;
+        return mergeOverrides({
+            Input: {
+                component: CalendarIconButton,
+                props: props,
+            },
+        }, (_a = datePickerProps) === null || _a === void 0 ? void 0 : _a.overrides);
+    }, [datePickerProps, props]);
+    return (_jsx(DatePicker, __assign({ weekStartsOn: weekStartsOn, adapter: adapter, locale: locale, onChange: onChange, disabled: props.$disabled, timeSelect: timeSelect, minDate: minDate, maxDate: maxDate, value: value }, datePickerProps, { overrides: mergedOverrides }), void 0));
+};

package/esm/date-input/CalendarIconButton.d.ts

@@ -0,0 +1,3 @@
+import { ReactElement } from 'react';
+import { SharedProps } from 'baseui/input';
+export declare const CalendarIconButton: (props: SharedProps) => ReactElement;

package/esm/date-input/CalendarIconButton.js

@@ -0,0 +1,6 @@
+import { __assign } from "tslib";
+import { jsx as _jsx } from "react/jsx-runtime";
+import BaseCalendarIcon from '../icon/components/calendar-solid';
+import { IconButton } from '../button';
+import { Box } from '../box';
+export var CalendarIconButton = function (props) { return (_jsx(Box, __assign({ className: "flex items-center h-full pl-1" }, { children: _jsx(IconButton, __assign({ size: "xs", className: "flex items-center", disabled: props.$disabled, type: "button" }, { children: _jsx(BaseCalendarIcon, {}, void 0) }), void 0) }), void 0)); };

package/esm/date-input/DateInput.d.ts

@@ -0,0 +1,3 @@
+import { ReactElement } from 'react';
+import { DateInputProps } from './types';
+export declare const DateInput: ({ adapter, formatString, mask, onChange, value, locale, weekStartsOn, maskChar, overrides, minDate, maxDate, timeSelect, ...restProps }: DateInputProps) => ReactElement;

package/esm/date-input/DateInput.js

@@ -0,0 +1,92 @@
+import { __assign, __read, __rest } from "tslib";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useMemo, useState, useCallback, useEffect } from 'react';
+import InputMask from 'react-input-mask';
+import DateHelpers from 'baseui/datepicker/utils/date-helpers';
+import dateFnsAdapter from 'baseui/datepicker/utils/date-fns-adapter';
+import { Input } from '../input';
+import { Before } from './Before';
+import { mergeOverrides } from '../overrides';
+import { DEFAULT_FORMAT_STRING } from '../date-picker/constants';
+import { prepareLocale, formatDate, normalizeDashes, isDayInRange } from '../date-picker/utils';
+import { inputStyles } from './styled-components';
+export var DateInput = function (_a) {
+    var _b = _a.adapter, adapter = _b === void 0 ? dateFnsAdapter : _b, _c = _a.formatString, formatString = _c === void 0 ? DEFAULT_FORMAT_STRING : _c, mask = _a.mask, onChange = _a.onChange, value = _a.value, locale = _a.locale, weekStartsOn = _a.weekStartsOn, _d = _a.maskChar, maskChar = _d === void 0 ? '_' : _d, overrides = _a.overrides, minDate = _a.minDate, maxDate = _a.maxDate, timeSelect = _a.timeSelect, restProps = __rest(_a, ["adapter", "formatString", "mask", "onChange", "value", "locale", "weekStartsOn", "maskChar", "overrides", "minDate", "maxDate", "timeSelect"]);
+    var dateFnsLocale = useMemo(function () { return prepareLocale(locale, { weekStartsOn: weekStartsOn }); }, [weekStartsOn, locale]);
+    var dateHelpers = useMemo(function () { return new DateHelpers(adapter); }, [adapter]);
+    var _e = __read(useState(function () { return formatDate({ date: value, locale: dateFnsLocale, dateHelpers: dateHelpers, formatString: formatString }); }), 2), date = _e[0], setDate = _e[1];
+    var _f = __read(useState(false), 2), error = _f[0], setError = _f[1];
+    useEffect(function () {
+        if (isDayInRange(value, {
+            minDate: minDate,
+            maxDate: maxDate,
+            dateHelpers: dateHelpers,
+        })) {
+            setError(false);
+        }
+        else {
+            setError(true);
+        }
+    }, [dateHelpers, maxDate, minDate, value]);
+    var getMask = useCallback(function () {
+        if (!mask && formatString !== DEFAULT_FORMAT_STRING) {
+            return null;
+        }
+        if (mask) {
+            return normalizeDashes(mask);
+        }
+        return '99/99/9999';
+    }, [formatString, mask]);
+    var handleInputChange = useCallback(function (e) {
+        var inputValue = e.target.value;
+        setDate(inputValue);
+        var dateString = normalizeDashes(inputValue);
+        var _mask = getMask();
+        var _date = dateHelpers.date(dateString);
+        // to check the clearable cases
+        if ((typeof _mask === 'string' && inputValue === _mask.replace(/[9|a|*]/g, ' ')) || inputValue.length === 0) {
+            onChange(null);
+            return;
+        }
+        if (dateString.replace(/(\s)*/g, '').length < formatString.replace(/(\s)*/g, '').length) {
+            _date = null;
+        }
+        else {
+            _date = dateHelpers.parseString(dateString, formatString, dateFnsLocale);
+        }
+        var isValidDate = _date && dateHelpers.isValid(_date);
+        if (isValidDate) {
+            setError(false);
+            setDate(formatDate({ date: _date, locale: dateFnsLocale, dateHelpers: dateHelpers, formatString: formatString }));
+            onChange === null || onChange === void 0 ? void 0 : onChange(_date);
+        }
+        else {
+            setError(true);
+        }
+    }, [onChange, dateFnsLocale, dateHelpers, formatString, getMask]);
+    var onCalendarDateChange = useCallback(function (_date) {
+        setDate(formatDate({ date: _date, locale: dateFnsLocale, dateHelpers: dateHelpers, formatString: formatString }));
+        onChange(_date);
+    }, [onChange, dateFnsLocale, dateHelpers, formatString]);
+    var mergedOverrides = useMemo(function () {
+        return mergeOverrides({
+            Before: {
+                component: Before,
+                props: {
+                    adapter: adapter,
+                    locale: locale,
+                    onChange: onCalendarDateChange,
+                    weekStartsOn: weekStartsOn,
+                    value: value,
+                    minDate: minDate,
+                    maxDate: maxDate,
+                    timeSelect: timeSelect,
+                },
+            },
+            Input: {
+                style: inputStyles,
+            },
+        }, overrides);
+    }, [adapter, onCalendarDateChange, locale, overrides, value, weekStartsOn, minDate, maxDate, timeSelect]);
+    return (_jsx(InputMask, __assign({ mask: getMask(), value: date, maskChar: maskChar, onChange: handleInputChange, disabled: restProps.disabled }, { children: function (props) { return _jsx(Input, __assign({}, props, restProps, { intent: error ? 'error' : 'default', overrides: mergedOverrides }), void 0); } }), void 0));
+};

package/esm/date-input/index.d.ts

@@ -0,0 +1,2 @@
+export { DateInput } from './DateInput';
+export * from './types';

package/esm/date-input/index.js

@@ -0,0 +1,2 @@
+export { DateInput } from './DateInput';
+export * from './types';

package/esm/date-input/styled-components.d.ts

@@ -0,0 +1,4 @@
+import { StyleObject } from '../types';
+export declare const inputStyles: (utils: any, { $size }: {
+    $size: any;
+}) => StyleObject;

package/esm/date-input/styled-components.js

@@ -0,0 +1,12 @@
+var dateInputSizeConfig = {
+    sm: { paddingLeft: '4px' },
+    md: { paddingLeft: '4px' },
+    lg: { paddingLeft: '8px' },
+};
+export var inputStyles = function (utils, _a) {
+    var _b;
+    var $size = _a.$size;
+    return ({
+        paddingLeft: ((_b = dateInputSizeConfig[$size]) !== null && _b !== void 0 ? _b : dateInputSizeConfig.lg).paddingLeft,
+    });
+};

package/esm/date-input/types.d.ts

@@ -0,0 +1,15 @@
+import { WeekStartsOn } from '../date-picker';
+import { InputProps } from '../input';
+export declare type DateInputProps = Omit<InputProps, 'value' | 'onChange' | 'intent' | 'min' | 'max' | 'debouncedOnChange' | 'debounceInterval' | 'type' | 'inputMode'> & {
+    formatString?: string;
+    adapter?: any;
+    mask?: string;
+    locale?: any;
+    value?: Date;
+    onChange: (value?: Date | null) => void;
+    weekStartsOn?: WeekStartsOn;
+    maskChar?: string;
+    minDate?: Date;
+    maxDate?: Date;
+    timeSelect?: boolean;
+};

package/esm/date-input/types.js

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

package/esm/date-picker/Calendar.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+import { SharedStyleProps } from './types';
+declare const _default: import("react").ForwardRefExoticComponent<Omit<import("baseui/datepicker").CalendarProps, "overrides"> & {
+    formatString?: string | undefined;
+    overrides?: import("./types").DatepickerOverrides<SharedStyleProps> | undefined;
+    adapter?: any;
+    weekStartsOn?: import("./types").WeekStartsOn | undefined;
+} & import("react").RefAttributes<unknown>>;
+export default _default;