@sprinklrjs/spaceweb 12.14.4 → 12.33.2

package/esm/baseui/datepicker/month.js

@@ -0,0 +1,89 @@
+import { __assign, __extends, __read } from "tslib";
+import { jsx as _jsx } from "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.
+*/
+import * as React from 'react';
+import Week from './week';
+import { StyledMonth } from './styled-components';
+import dateFnsAdapter from './utils/date-fns-adapter';
+import DateHelpers from './utils/date-helpers';
+import { getOverrides } from '../helpers/overrides';
+import { DENSITY } from './constants';
+var defaultProps = {
+    // @ts-ignore
+    dateLabel: null,
+    density: 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: dateFnsAdapter,
+    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) {
+    __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
+                _jsx(Week, { 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 DateHelpers(props.adapter);
+        return _this;
+    }
+    CalendarMonth.prototype.render = function () {
+        var _a = this.props.overrides, overrides = _a === void 0 ? {} : _a;
+        var _b = __read(getOverrides(overrides.Month, StyledMonth), 2), Month = _b[0], monthProps = _b[1];
+        return _jsx(Month, __assign({}, monthProps, { children: this.renderWeeks() }), void 0);
+    };
+    CalendarMonth.defaultProps = defaultProps;
+    return CalendarMonth;
+}(React.Component));
+export default CalendarMonth;

package/esm/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/esm/baseui/datepicker/styled-components.js

@@ -0,0 +1,284 @@
+import { __assign, __read } from "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.
+*/
+import { styled } from '../../style';
+import getDayStateCode from './utils/day-state';
+import { ORIENTATION, DENSITY, INPUT_ROLE } from './constants';
+import { borderColor, borderRadius, borderStyle } from '../../helpers/longHandHelpers';
+/**
+ * Main component container element
+ */
+export var StyledInputWrapper = styled('div');
+StyledInputWrapper.displayName = 'StyledInputWrapper';
+export var StyledInputLabel = styled('div');
+StyledInputLabel.displayName = 'StyledInputLabel';
+export var StyledStartDate = styled('div');
+StyledStartDate.displayName = 'StyledStartDate';
+export var StyledEndDate = styled('div');
+StyledEndDate.displayName = 'StyledEndDate';
+/**
+ * Main component container element
+ */
+export var StyledRoot = styled('div', 'rounded-0 inline-block text-center spr-ui-01');
+StyledRoot.displayName = 'StyledRoot';
+export var StyledMonthContainer = styled('div', 'flex', function (_, props) {
+    var $orientation = props.$orientation;
+    return {
+        flexDirection: $orientation === ORIENTATION.vertical ? 'column' : 'row',
+        gap: '16px',
+    };
+});
+StyledMonthContainer.displayName = 'StyledMonthContainer';
+export var StyledCalendarContainer = styled('div', {});
+StyledCalendarContainer.displayName = 'StyledCalendarContainer';
+export var StyledSelectorContainer = styled('div');
+StyledSelectorContainer.displayName = 'StyledSelectorContainer';
+export var StyledCalendarHeader = styled('div', 'box-border spr-text-01 items-center spr-ui-01', function (_, props) {
+    var $density = props.$density;
+    return {
+        minHeight: $density === DENSITY.high ? '26px' : '36px',
+        width: $density === DENSITY.high ? '100%' : '392px',
+    };
+});
+StyledCalendarHeader.displayName = 'StyledCalendarHeader';
+export var StyledMonthHeader = styled('div', 'spr-text-01 spr-ui-01 w-full whitespace-no-wrap');
+StyledMonthHeader.displayName = 'StyledMonthHeader';
+export var StyledMonthYearSelectButton = 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',
+        },
+    });
+});
+StyledMonthYearSelectButton.displayName = 'StyledMonthYearSelectButton';
+export var StyledMonthYearSelectIconContainer = styled('span', 'flex items-center ml-3');
+StyledMonthYearSelectIconContainer.displayName = 'StyledMonthYearSelectIconContainer';
+export var StyledPrevButton = styled('button');
+StyledPrevButton.displayName = 'StyledNextButton';
+export var StyledNextButton = styled('button');
+StyledNextButton.displayName = 'StyledNextButton';
+export var StyledMonth = styled('div', 'inline-block w-full');
+StyledMonth.displayName = 'StyledMonth';
+export var StyledWeek = styled('div', 'mb-0.5 justify-around flex w-full whitespace-no-wrap');
+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;
+}
+export var StyledDay = 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 = getDayStateCode(props);
+    var _b = __read(Array.isArray($value) ? $value : [$value, null], 2), startDate = _b[0], endDate = _b[1];
+    var oppositeInputIsPopulated = $selectedInput === INPUT_ROLE.startDate
+        ? endDate !== null && typeof endDate !== 'undefined'
+        : startDate !== null && typeof startDate !== 'undefined';
+    var shouldHighlightRange = $range && !($hasLockedBehavior && !oppositeInputIsPopulated);
+    return __assign(__assign(__assign({ cursor: $disabled || (!$peekNextMonth && $outsideMonth) ? 'default' : 'pointer', transform: 'scale(1)' }, getDayStyles(code, theme)), { ':after': __assign(__assign(__assign(__assign({ zIndex: -1, content: '""', boxSizing: 'border-box', display: 'inline-block', position: 'absolute', top: '2px', left: $density === DENSITY.high ? '6px' : '4px', paddingTop: '6px', paddingBottom: '6px', borderLeftWidth: '2px', borderRightWidth: '2px', borderTopWidth: '2px', borderBottomWidth: '2px' }, borderStyle('solid')), 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': __assign(__assign(__assign(__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' }, borderStyle('solid')), 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
+            {}));
+});
+StyledDay.displayName = 'StyledDay';
+export var StyledDayLabel = styled('div');
+StyledDayLabel.displayName = 'StyledDayLabel';
+export var StyledWeekdayHeader = styled('div', 'px-1.5 py-2 m-0 bg-transparent inline-block text-center cursor-default relative box-border');
+StyledWeekdayHeader.displayName = 'StyledWeekdayHeader';