@sprinklrjs/spaceweb 12.14.4 → 12.33.2

package/baseui/datepicker/month.js

@@ -0,0 +1,91 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var tslib_1 = require("tslib");
+var jsx_runtime_1 = require("react/jsx-runtime");
+/*
+Copyright (c) Uber Technologies, Inc.
+
+This source code is licensed under the MIT license found in the
+LICENSE file in the root directory of this source tree.
+*/
+var React = (0, tslib_1.__importStar)(require("react"));
+var week_1 = (0, tslib_1.__importDefault)(require("./week"));
+var styled_components_1 = require("./styled-components");
+var date_fns_adapter_1 = (0, tslib_1.__importDefault)(require("./utils/date-fns-adapter"));
+var date_helpers_1 = (0, tslib_1.__importDefault)(require("./utils/date-helpers"));
+var overrides_1 = require("../helpers/overrides");
+var constants_1 = require("./constants");
+var defaultProps = {
+    // @ts-ignore
+    dateLabel: null,
+    density: constants_1.DENSITY.high,
+    // @ts-ignore
+    excludeDates: null,
+    // @ts-ignore
+    filterDate: null,
+    // @ts-ignore
+    highlightDates: null,
+    // @ts-ignore
+    includeDates: null,
+    // @ts-ignore
+    locale: null,
+    // @ts-ignore
+    maxDate: null,
+    // @ts-ignore
+    minDate: null,
+    // @ts-ignore
+    month: null,
+    adapter: date_fns_adapter_1.default,
+    onDayClick: function () { },
+    onDayFocus: function () { },
+    onDayBlur: function () { },
+    onDayMouseOver: function () { },
+    onDayMouseLeave: function () { },
+    overrides: {},
+    peekNextMonth: false,
+    // @ts-ignore
+    value: null,
+};
+var CALENDAR_MAX_ROWS = 6;
+var CalendarMonth = /** @class */ (function (_super) {
+    (0, tslib_1.__extends)(CalendarMonth, _super);
+    function CalendarMonth(props) {
+        var _this = _super.call(this, props) || this;
+        _this.getDateProp = function () {
+            return _this.props.date || _this.dateHelpers.date();
+        };
+        _this.isWeekInMonth = function (startOfWeek) {
+            var date = _this.getDateProp();
+            var endOfWeek = _this.dateHelpers.addDays(startOfWeek, 6);
+            return (_this.dateHelpers.isSameMonth(startOfWeek, date) ||
+                _this.dateHelpers.isSameMonth(endOfWeek, date));
+        };
+        _this.renderWeeks = function () {
+            var weeks = [];
+            var currentWeekStart = _this.dateHelpers.getStartOfWeek(_this.dateHelpers.getStartOfMonth(_this.getDateProp()), _this.props.locale);
+            var i = 0;
+            var isWithinMonth = true;
+            while (isWithinMonth ||
+                (_this.props.fixedHeight && _this.props.peekNextMonth && i < CALENDAR_MAX_ROWS)) {
+                weeks.push(
+                // @ts-ignore
+                (0, jsx_runtime_1.jsx)(week_1.default, { adapter: _this.props.adapter, date: currentWeekStart, dateLabel: _this.props.dateLabel, density: _this.props.density, excludeDates: _this.props.excludeDates, filterDate: _this.props.filterDate, highlightedDate: _this.props.highlightedDate, includeDates: _this.props.includeDates, focusedCalendar: _this.props.focusedCalendar, range: _this.props.range, locale: _this.props.locale, minDate: _this.props.minDate, maxDate: _this.props.maxDate, month: _this.dateHelpers.getMonth(_this.getDateProp()), onDayBlur: _this.props.onDayBlur, onDayFocus: _this.props.onDayFocus, onDayClick: _this.props.onDayClick, onDayMouseOver: _this.props.onDayMouseOver, onDayMouseLeave: _this.props.onDayMouseLeave, onChange: _this.props.onChange, overrides: _this.props.overrides, peekNextMonth: _this.props.peekNextMonth, value: _this.props.value, hasLockedBehavior: _this.props.hasLockedBehavior, selectedInput: _this.props.selectedInput }, i));
+                i++;
+                currentWeekStart = _this.dateHelpers.addWeeks(currentWeekStart, 1);
+                // It will break on the next week if the week is out of the month
+                isWithinMonth = _this.isWeekInMonth(currentWeekStart);
+            }
+            return weeks;
+        };
+        _this.dateHelpers = new date_helpers_1.default(props.adapter);
+        return _this;
+    }
+    CalendarMonth.prototype.render = function () {
+        var _a = this.props.overrides, overrides = _a === void 0 ? {} : _a;
+        var _b = (0, tslib_1.__read)((0, overrides_1.getOverrides)(overrides.Month, styled_components_1.StyledMonth), 2), Month = _b[0], monthProps = _b[1];
+        return (0, jsx_runtime_1.jsx)(Month, (0, tslib_1.__assign)({}, monthProps, { children: this.renderWeeks() }), void 0);
+    };
+    CalendarMonth.defaultProps = defaultProps;
+    return CalendarMonth;
+}(React.Component));
+exports.default = CalendarMonth;

package/baseui/datepicker/styled-components.d.ts

@@ -0,0 +1,25 @@
+/**
+ * Main component container element
+ */
+export declare const StyledInputWrapper: import("../../style/styled").StyledComponent;
+export declare const StyledInputLabel: import("../../style/styled").StyledComponent;
+export declare const StyledStartDate: import("../../style/styled").StyledComponent;
+export declare const StyledEndDate: import("../../style/styled").StyledComponent;
+/**
+ * Main component container element
+ */
+export declare const StyledRoot: import("../../style/styled").StyledComponent;
+export declare const StyledMonthContainer: import("../../style/styled").StyledComponent;
+export declare const StyledCalendarContainer: import("../../style/styled").StyledComponent;
+export declare const StyledSelectorContainer: import("../../style/styled").StyledComponent;
+export declare const StyledCalendarHeader: import("../../style/styled").StyledComponent;
+export declare const StyledMonthHeader: import("../../style/styled").StyledComponent;
+export declare const StyledMonthYearSelectButton: import("../../style/styled").StyledComponent;
+export declare const StyledMonthYearSelectIconContainer: import("../../style/styled").StyledComponent;
+export declare const StyledPrevButton: import("../../style/styled").StyledComponent;
+export declare const StyledNextButton: import("../../style/styled").StyledComponent;
+export declare const StyledMonth: import("../../style/styled").StyledComponent;
+export declare const StyledWeek: import("../../style/styled").StyledComponent;
+export declare const StyledDay: import("../../style/styled").StyledComponent;
+export declare const StyledDayLabel: import("../../style/styled").StyledComponent;
+export declare const StyledWeekdayHeader: import("../../style/styled").StyledComponent;

package/baseui/datepicker/styled-components.js

@@ -0,0 +1,287 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.StyledWeekdayHeader = exports.StyledDayLabel = exports.StyledDay = exports.StyledWeek = exports.StyledMonth = exports.StyledNextButton = exports.StyledPrevButton = exports.StyledMonthYearSelectIconContainer = exports.StyledMonthYearSelectButton = exports.StyledMonthHeader = exports.StyledCalendarHeader = exports.StyledSelectorContainer = exports.StyledCalendarContainer = exports.StyledMonthContainer = exports.StyledRoot = exports.StyledEndDate = exports.StyledStartDate = exports.StyledInputLabel = exports.StyledInputWrapper = void 0;
+var tslib_1 = require("tslib");
+/*
+Copyright (c) Uber Technologies, Inc.
+
+This source code is licensed under the MIT license found in the
+LICENSE file in the root directory of this source tree.
+*/
+var style_1 = require("../../style");
+var day_state_1 = (0, tslib_1.__importDefault)(require("./utils/day-state"));
+var constants_1 = require("./constants");
+var longHandHelpers_1 = require("../../helpers/longHandHelpers");
+/**
+ * Main component container element
+ */
+exports.StyledInputWrapper = (0, style_1.styled)('div');
+exports.StyledInputWrapper.displayName = 'StyledInputWrapper';
+exports.StyledInputLabel = (0, style_1.styled)('div');
+exports.StyledInputLabel.displayName = 'StyledInputLabel';
+exports.StyledStartDate = (0, style_1.styled)('div');
+exports.StyledStartDate.displayName = 'StyledStartDate';
+exports.StyledEndDate = (0, style_1.styled)('div');
+exports.StyledEndDate.displayName = 'StyledEndDate';
+/**
+ * Main component container element
+ */
+exports.StyledRoot = (0, style_1.styled)('div', 'rounded-0 inline-block text-center spr-ui-01');
+exports.StyledRoot.displayName = 'StyledRoot';
+exports.StyledMonthContainer = (0, style_1.styled)('div', 'flex', function (_, props) {
+    var $orientation = props.$orientation;
+    return {
+        flexDirection: $orientation === constants_1.ORIENTATION.vertical ? 'column' : 'row',
+        gap: '16px',
+    };
+});
+exports.StyledMonthContainer.displayName = 'StyledMonthContainer';
+exports.StyledCalendarContainer = (0, style_1.styled)('div', {});
+exports.StyledCalendarContainer.displayName = 'StyledCalendarContainer';
+exports.StyledSelectorContainer = (0, style_1.styled)('div');
+exports.StyledSelectorContainer.displayName = 'StyledSelectorContainer';
+exports.StyledCalendarHeader = (0, style_1.styled)('div', 'box-border spr-text-01 items-center spr-ui-01', function (_, props) {
+    var $density = props.$density;
+    return {
+        minHeight: $density === constants_1.DENSITY.high ? '26px' : '36px',
+        width: $density === constants_1.DENSITY.high ? '100%' : '392px',
+    };
+});
+exports.StyledCalendarHeader.displayName = 'StyledCalendarHeader';
+exports.StyledMonthHeader = (0, style_1.styled)('div', 'spr-text-01 spr-ui-01 w-full whitespace-no-wrap');
+exports.StyledMonthHeader.displayName = 'StyledMonthHeader';
+exports.StyledMonthYearSelectButton = (0, style_1.styled)('button', 'border-0 outline-none items-center flex cursor-pointer bg-transparent spr-text-01', function (_a, _b) {
+    var theme = _a.theme;
+    var $isFocusVisible = _b.$isFocusVisible;
+    return ({
+        ':focus': {
+            boxShadow: $isFocusVisible ? "0 0 0 3px ".concat(theme.spr.focus01) : 'none',
+        },
+    });
+});
+exports.StyledMonthYearSelectButton.displayName = 'StyledMonthYearSelectButton';
+exports.StyledMonthYearSelectIconContainer = (0, style_1.styled)('span', 'flex items-center ml-3');
+exports.StyledMonthYearSelectIconContainer.displayName = 'StyledMonthYearSelectIconContainer';
+exports.StyledPrevButton = (0, style_1.styled)('button');
+exports.StyledPrevButton.displayName = 'StyledNextButton';
+exports.StyledNextButton = (0, style_1.styled)('button');
+exports.StyledNextButton.displayName = 'StyledNextButton';
+exports.StyledMonth = (0, style_1.styled)('div', 'inline-block w-full');
+exports.StyledMonth.displayName = 'StyledMonth';
+exports.StyledWeek = (0, style_1.styled)('div', 'mb-0.5 justify-around flex w-full whitespace-no-wrap');
+exports.StyledWeek.displayName = 'StyledWeek';
+// @ts-ignore
+function generateDayStyles(defaultCode, defaultStyle) {
+    var _a;
+    var codeForSM = defaultCode.substr(0, 12) + '1' + defaultCode.substr(12 + 1);
+    var codeForEM = defaultCode.substr(0, 13) + '1' + defaultCode.substr(13 + 1);
+    return _a = {},
+        _a[defaultCode] = defaultStyle,
+        _a[codeForSM] = defaultStyle,
+        _a[codeForEM] = defaultStyle,
+        _a;
+}
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+function getDayStyles(code, theme) {
+    var undefinedDayStyle = {
+        // @ts-ignore
+        ':before': { content: null },
+        // @ts-ignore
+        ':after': { content: null },
+    };
+    var defaultDayStyle = undefinedDayStyle;
+    var disabledDateStyle = {
+        color: theme.spr.ui05,
+        // @ts-ignore
+        ':before': { content: null },
+        // @ts-ignore
+        ':after': { content: null },
+    };
+    var outsideMonthDateStyle = {
+        color: theme.spr.ui05,
+        ':before': {
+            borderTopStyle: 'none',
+            borderBottomStyle: 'none',
+            borderLeftStyle: 'none',
+            borderRightStyle: 'none',
+            backgroundColor: 'transparent',
+        },
+        ':after': {
+            borderTopLeftRadius: '0%',
+            borderTopRightRadius: '0%',
+            borderBottomLeftRadius: '0%',
+            borderBottomRightRadius: '0%',
+            borderTopColor: 'transparent',
+            borderBottomColor: 'transparent',
+            borderRightColor: 'transparent',
+            borderLeftColor: 'transparent',
+        },
+    };
+    var highlightedStyle = {
+        // @ts-ignore
+        ':before': { content: null },
+    };
+    var CODE_DISABLED_INDEX = 1;
+    if (code && code[CODE_DISABLED_INDEX] === '1') {
+        defaultDayStyle = disabledDateStyle;
+    }
+    // See the ./utils/day-state.js file for the description of all available states
+    // rdhsrSsDeDpSrHpHrRrLsMeMoM
+    // '000000000000000'
+    var dayStateStyle = Object.assign({}, 
+    // highlighted date
+    generateDayStyles('001000000000000', {
+        color: theme.spr.text01,
+    }), 
+    // selected date
+    generateDayStyles('000100000000000', {
+        color: theme.spr.text05,
+    }), 
+    // selected highlighted date
+    generateDayStyles('001100000000000', {
+        color: theme.spr.text05,
+    }), 
+    // disabled date
+    {
+        '010000000000000': {
+            color: theme.spr.ui05,
+            ':after': { content: null },
+        },
+    }, 
+    // disabled highlighted date
+    {
+        '011000000000000': {
+            color: theme.spr.ui05,
+            ':after': { content: null },
+        },
+    }, 
+    // date outside of the currently displayed month (when peekNextMonth is true)
+    generateDayStyles('000000000000001', outsideMonthDateStyle), 
+    // Range Datepicker
+    // range: highlighted date outside of a selected range
+    generateDayStyles('101000000000000', highlightedStyle), generateDayStyles('101010000000000', highlightedStyle), 
+    // range: selected date
+    generateDayStyles('100100000000000', {
+        color: theme.spr.text05,
+    }), 
+    // range: selected highlighted date
+    // when single date selected in a range
+    generateDayStyles('101100000000000', {
+        color: theme.spr.text05,
+        ':before': { content: null },
+    }), 
+    // range: selected start and end dates are the same
+    generateDayStyles('100111100000000', {
+        color: theme.spr.text05,
+        ':before': { content: null },
+    }), generateDayStyles('101111100000000', {
+        color: theme.spr.text05,
+        ':before': { content: null },
+    }), 
+    // range: selected start date
+    generateDayStyles('100111000000000', {
+        color: theme.spr.text05,
+    }), 
+    // range: selected end date
+    generateDayStyles('100110100000000', {
+        color: theme.spr.text05,
+        ':before': { left: null, right: '50%' },
+    }), 
+    // range: first selected date while a range is highlighted but no second date selected yet
+    // highlighted range on the right from the selected
+    generateDayStyles('100100001010000', {
+        color: theme.spr.text05,
+    }), 
+    // highlighted range on the left from the selected
+    generateDayStyles('100100001001000', {
+        color: theme.spr.text05,
+        ':before': { left: null, right: '50%' },
+    }), 
+    // range: second date in a range that is highlighted but not selected
+    generateDayStyles('101000001010000', {
+        ':before': { left: null, right: '50%' },
+    }), { '101000001001000': {} }, { '101000001001100': {} }, { '101000001001010': {} }, 
+    // range: pseudo-selected date
+    generateDayStyles('100010010000000', {
+        color: theme.spr.text01,
+        ':before': { left: '0', width: '100%' },
+        ':after': { content: null },
+    }), 
+    // range: pseudo-highlighted date (in a range where only one date is
+    // selected and second date is highlighted)
+    {
+        '101000001100000': {
+            color: theme.spr.text01,
+            ':before': {
+                left: '0',
+                width: '100%',
+            },
+            ':after': {
+                content: null,
+            },
+        },
+    }, generateDayStyles('100000001100000', {
+        color: theme.spr.text01,
+        ':before': {
+            left: '0',
+            width: '100%',
+        },
+        ':after': {
+            content: null,
+        },
+    }), 
+    // highlighted start date in a range
+    generateDayStyles('101111000000000', {
+        color: theme.spr.text05,
+    }), 
+    // highlighted end date in a range
+    generateDayStyles('101110100000000', {
+        color: theme.spr.text05,
+        ':before': { left: null, right: '50%' },
+    }), 
+    // range: pseudo-selected date
+    generateDayStyles('101010010000000', {
+        color: theme.spr.text01,
+        ':before': { left: '0', width: '100%' },
+    }), 
+    // Range is true Date outside current month (when peekNextMonth is true)
+    generateDayStyles('100000000000001', outsideMonthDateStyle), 
+    // peekNextMonth is true, date is outside month, start date is selected and range is highlighted is on right
+    generateDayStyles('100000001010001', outsideMonthDateStyle), 
+    // peekNextMonth is true, date is outside month, start date is selected and range is highlighted is on left
+    generateDayStyles('100000001001001', outsideMonthDateStyle), 
+    // peekNextMonth is true, date is outside month, range is selected
+    generateDayStyles('100010000000001', outsideMonthDateStyle));
+    return dayStateStyle[code] || defaultDayStyle;
+}
+exports.StyledDay = (0, style_1.styled)('div', 'spr-text-01 box-border relative text-center py-2 inline-block m-0 bg-transparent outline-none' + ' ', function (_a, props) {
+    var theme = _a.theme;
+    var $disabled = props.$disabled, $peekNextMonth = props.$peekNextMonth, $range = props.$range, $outsideMonth = props.$outsideMonth, $outsideMonthWithinRange = props.$outsideMonthWithinRange, $hasDateLabel = props.$hasDateLabel, $density = props.$density, $hasLockedBehavior = props.$hasLockedBehavior, $selectedInput = props.$selectedInput, $value = props.$value;
+    var code = (0, day_state_1.default)(props);
+    var _b = (0, tslib_1.__read)(Array.isArray($value) ? $value : [$value, null], 2), startDate = _b[0], endDate = _b[1];
+    var oppositeInputIsPopulated = $selectedInput === constants_1.INPUT_ROLE.startDate
+        ? endDate !== null && typeof endDate !== 'undefined'
+        : startDate !== null && typeof startDate !== 'undefined';
+    var shouldHighlightRange = $range && !($hasLockedBehavior && !oppositeInputIsPopulated);
+    return (0, tslib_1.__assign)((0, tslib_1.__assign)((0, tslib_1.__assign)({ cursor: $disabled || (!$peekNextMonth && $outsideMonth) ? 'default' : 'pointer', transform: 'scale(1)' }, getDayStyles(code, theme)), { ':after': (0, tslib_1.__assign)((0, tslib_1.__assign)((0, tslib_1.__assign)((0, tslib_1.__assign)({ zIndex: -1, content: '""', boxSizing: 'border-box', display: 'inline-block', position: 'absolute', top: '2px', left: $density === constants_1.DENSITY.high ? '6px' : '4px', paddingTop: '6px', paddingBottom: '6px', borderLeftWidth: '2px', borderRightWidth: '2px', borderTopWidth: '2px', borderBottomWidth: '2px' }, (0, longHandHelpers_1.borderStyle)('solid')), (0, longHandHelpers_1.borderRadius)('100%')), (getDayStyles(code, theme)[':after'] || {})), ($outsideMonthWithinRange ? { content: null } : {})) }), (shouldHighlightRange
+        ? {
+            // :before pseudo element defines a grey background style that extends
+            // the selected/highlighted day's circle and spans through a range
+            ':before': (0, tslib_1.__assign)((0, tslib_1.__assign)((0, tslib_1.__assign)((0, tslib_1.__assign)({ zIndex: -1, content: '""', boxSizing: 'border-box', display: 'inline-block', backgroundColor: theme.spr.ui05, position: 'absolute', width: '50%', top: '2px', left: '50%', borderTopWidth: '2px', borderBottomWidth: '2px', borderLeftWidth: '0', borderRightWidth: '0' }, (0, longHandHelpers_1.borderStyle)('solid')), (0, longHandHelpers_1.borderColor)('transparent')), (getDayStyles(code, theme)[':before'] || {})), ($outsideMonthWithinRange
+                ? {
+                    backgroundColor: theme.spr.ui05,
+                    left: '0',
+                    width: '100%',
+                    content: '""',
+                }
+                : {})),
+        }
+        : // a hack to make flow happy, otherwise it complains about complexity
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            {}));
+});
+exports.StyledDay.displayName = 'StyledDay';
+exports.StyledDayLabel = (0, style_1.styled)('div');
+exports.StyledDayLabel.displayName = 'StyledDayLabel';
+exports.StyledWeekdayHeader = (0, style_1.styled)('div', 'px-1.5 py-2 m-0 bg-transparent inline-block text-center cursor-default relative box-border');
+exports.StyledWeekdayHeader.displayName = 'StyledWeekdayHeader';