@octopusdeploy/design-system-components/dist/src/components/DeprecatedDatePicker/DeprecatedDatePicker.js

The design systems component library.

"use strict";
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
    if (k2 === undefined) k2 = k;
    var desc = Object.getOwnPropertyDescriptor(m, k);
    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
      desc = { enumerable: true, get: function() { return m[k]; } };
    }
    Object.defineProperty(o, k2, desc);
}) : (function(o, m, k, k2) {
    if (k2 === undefined) k2 = k;
    o[k2] = m[k];
}));
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
    Object.defineProperty(o, "default", { enumerable: true, value: v });
}) : function(o, v) {
    o["default"] = v;
});
var __importStar = (this && this.__importStar) || (function () {
    var ownKeys = function(o) {
        ownKeys = Object.getOwnPropertyNames || function (o) {
            var ar = [];
            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
            return ar;
        };
        return ownKeys(o);
    };
    return function (mod) {
        if (mod && mod.__esModule) return mod;
        var result = {};
        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
        __setModuleDefault(result, mod);
        return result;
    };
})();
Object.defineProperty(exports, "__esModule", { value: true });
exports.DeprecatedDatePicker = DeprecatedDatePicker;
const jsx_runtime_1 = require("react/jsx-runtime");
const css_1 = require("@emotion/css");
const material_1 = require("@mui/material");
const x_date_pickers_1 = require("@mui/x-date-pickers");
const AdapterDateFns_1 = require("@mui/x-date-pickers/AdapterDateFns");
const design_system_tokens_1 = require("@octopusdeploy/design-system-tokens");
const React = __importStar(require("react"));
/**
 * @deprecated
 * Deprecated: 05/02/2026
 * Replacement: DatePicker component from @octopusdeploy/design-system-components
 * Reason: This component is deprecated and will be removed in a future release.
 */
function DeprecatedDatePicker({ value, label, error, name, disabled, format, minDate, onChange, note, fullWidth }) {
    const latestChangeHandler = React.useRef(onChange);
    const handleChange = React.useCallback((value) => {
        if (value) {
            latestChangeHandler.current?.(value);
        }
    }, []);
    return ((0, jsx_runtime_1.jsx)(x_date_pickers_1.LocalizationProvider, { dateAdapter: AdapterDateFns_1.AdapterDateFns, children: (0, jsx_runtime_1.jsx)(x_date_pickers_1.DatePicker, { slotProps: {
                day: {
                    classes: dayStyles,
                    disableRipple: true,
                },
                layout: {
                    classes: layoutStyles,
                },
                textField: {
                    classes: textFieldStyles,
                    variant: "standard",
                    error: !!error,
                    helperText: error || note,
                    fullWidth,
                },
                openPickerButton: { ...(label ? { "aria-label": label } : {}), disableRipple: true },
                switchViewButton: { classes: switchViewButtonStyles, disableRipple: true },
                yearButton: { className: yearButtonStyles },
                nextIconButton: { classes: nextIconButtonStyles, disableRipple: true },
                previousIconButton: { classes: previousIconButtonStyles, disableRipple: true },
            }, name: name, format: format, value: value, onChange: handleChange, disabled: disabled, minDate: minDate, label: label }) }));
}
const dayStyles = {
    root: (0, css_1.css)({
        [`&.${x_date_pickers_1.pickersDayClasses.root}`]: {
            color: design_system_tokens_1.themeTokens.color.text.primary,
            "&:hover": {
                backgroundColor: design_system_tokens_1.themeTokens.color.button.background.quiet.hover,
                color: design_system_tokens_1.themeTokens.color.button.text.quiet,
            },
            "&:focus-visible": {
                outline: `solid 1px ${design_system_tokens_1.themeTokens.color.border.selected}`,
            },
        },
    }),
    today: (0, css_1.css)({
        [`&.${x_date_pickers_1.pickersDayClasses.today}`]: {
            color: design_system_tokens_1.themeTokens.color.text.primary,
            border: `solid 1px ${design_system_tokens_1.themeTokens.color.border.tertiary}`,
        },
        [`&.${x_date_pickers_1.pickersDayClasses.today}:not(${x_date_pickers_1.pickersDayClasses.selected})`]: {
            borderColor: design_system_tokens_1.themeTokens.color.border.tertiary,
        },
    }),
    selected: (0, css_1.css)({
        [`&.${x_date_pickers_1.pickersDayClasses.selected}.${x_date_pickers_1.pickersDayClasses.today}.${material_1.buttonBaseClasses.root}`]: {
            color: design_system_tokens_1.themeTokens.color.text.inverse.primary,
            backgroundColor: design_system_tokens_1.themeTokens.color.background.selected,
            "&:hover": {
                backgroundColor: design_system_tokens_1.themeTokens.color.button.background.quiet.hover,
                color: design_system_tokens_1.themeTokens.color.button.text.quiet,
            },
        },
        [`&.${x_date_pickers_1.pickersDayClasses.root}.${x_date_pickers_1.pickersDayClasses.selected}.${material_1.buttonBaseClasses.root}`]: {
            color: design_system_tokens_1.themeTokens.color.text.inverse.primary,
            backgroundColor: design_system_tokens_1.themeTokens.color.background.selected,
            "&:hover": {
                backgroundColor: design_system_tokens_1.themeTokens.color.button.background.quiet.hover,
                color: design_system_tokens_1.themeTokens.color.button.text.quiet,
            },
            "&:focus-visible": {
                boxShadow: design_system_tokens_1.themeTokens.shadow.focused,
            },
        },
    }),
};
const yearButtonStyles = (0, css_1.css)({
    [`&.${x_date_pickers_1.pickersYearClasses.yearButton}`]: {
        [`&.${x_date_pickers_1.pickersYearClasses.selected}`]: {
            backgroundColor: design_system_tokens_1.themeTokens.color.background.selected,
            color: design_system_tokens_1.themeTokens.color.text.inverse.primary,
            "&:hover": {
                backgroundColor: design_system_tokens_1.themeTokens.color.button.background.quiet.hover,
            },
            ":focus-visible": {
                boxShadow: design_system_tokens_1.themeTokens.shadow.focused,
            },
        },
        [`&:focus-visible`]: {
            outline: `solid 1px ${design_system_tokens_1.themeTokens.color.border.selected}`,
            backgroundColor: design_system_tokens_1.themeTokens.color.button.background.quiet.hover,
        },
        [`&:hover`]: {
            backgroundColor: design_system_tokens_1.themeTokens.color.button.background.quiet.hover,
            color: design_system_tokens_1.themeTokens.color.button.text.quiet,
        },
    },
});
const layoutStyles = {
    root: (0, css_1.css)({
        //Targets the year selector
        [`&.${x_date_pickers_1.pickersLayoutClasses.root}`]: {
            color: design_system_tokens_1.themeTokens.color.text.primary,
            background: design_system_tokens_1.themeTokens.color.background.primary.default,
        },
        //Targets the column headings for each day
        [`&.${x_date_pickers_1.pickersLayoutClasses.root} .${material_1.typographyClasses.root}`]: {
            color: design_system_tokens_1.themeTokens.color.text.secondary,
        },
    }),
};
const baseIconButtonStyles = {
    root: (0, css_1.css)({
        [`&.${material_1.iconButtonClasses.root}`]: {
            color: design_system_tokens_1.themeTokens.color.text.info,
            [`&.${material_1.iconButtonClasses.disabled}`]: { color: design_system_tokens_1.themeTokens.color.button.icon.disabled },
            "&:hover, &:focus-visible": {
                backgroundColor: design_system_tokens_1.themeTokens.color.button.background.quiet.hover,
            },
        },
    }),
};
const switchViewButtonStyles = baseIconButtonStyles;
const nextIconButtonStyles = baseIconButtonStyles;
const previousIconButtonStyles = baseIconButtonStyles;
const textFieldStyles = {
    root: (0, css_1.css)({
        [`&.${material_1.textFieldClasses.root}`]: {
            [`.${material_1.inputLabelClasses.root}`]: {
                color: design_system_tokens_1.themeTokens.color.textField.text.primary,
                [`&.${material_1.inputLabelClasses.focused}`]: { color: design_system_tokens_1.themeTokens.color.textField.text.selected },
                [`&.${material_1.inputLabelClasses.error}`]: {
                    color: design_system_tokens_1.themeTokens.color.textField.text.danger,
                },
                [`&.${material_1.inputLabelClasses.disabled}`]: { color: design_system_tokens_1.themeTokens.color.textField.text.disabled },
            },
            [`.${material_1.inputBaseClasses.root}`]: {
                //Field bottom border colours
                "::before": {
                    borderBottom: `1px solid ${design_system_tokens_1.themeTokens.color.textField.border.default}`,
                },
                [`&.${material_1.inputBaseClasses.focused}:not(.${material_1.inputBaseClasses.error}, .${material_1.inputBaseClasses.disabled})::after`]: {
                    borderBottom: `2px solid ${design_system_tokens_1.themeTokens.color.textField.border.active}`,
                },
                [`&.${material_1.inputBaseClasses.error}::after`]: {
                    borderBottom: `2px solid ${design_system_tokens_1.themeTokens.color.textField.border.danger}`,
                },
                [`&:hover:not(.${material_1.inputBaseClasses.error}, .${material_1.inputBaseClasses.disabled})::before`]: {
                    borderBottom: `2px solid ${design_system_tokens_1.themeTokens.color.textField.border.hover}`,
                },
                [`&.${material_1.inputBaseClasses.disabled}::before`]: { borderBottom: `1px solid ${design_system_tokens_1.themeTokens.color.textField.border.disabled}` },
            },
            [`.${material_1.inputBaseClasses.input}`]: {
                color: design_system_tokens_1.themeTokens.color.textField.text.primary,
                font: design_system_tokens_1.text.body.regular.medium,
                [`&.${material_1.inputBaseClasses.disabled}`]: { color: design_system_tokens_1.themeTokens.color.textField.text.disabled },
            },
            //Icon
            [`.${material_1.inputBaseClasses.adornedEnd} .${material_1.iconButtonClasses.root}`]: {
                color: design_system_tokens_1.themeTokens.color.icon.tertiary,
                [`&.${material_1.inputBaseClasses.disabled}`]: { color: design_system_tokens_1.themeTokens.color.textField.icon.disabled },
            },
            //Notes and Error text
            [`.${material_1.formHelperTextClasses.root}`]: {
                font: design_system_tokens_1.text.body.regular.xSmall,
                color: design_system_tokens_1.themeTokens.color.textField.text.secondary,
                [`&.${material_1.formHelperTextClasses.disabled}`]: { color: design_system_tokens_1.themeTokens.color.textField.text.disabled },
            },
            [`.${material_1.formHelperTextClasses.error}`]: {
                color: design_system_tokens_1.themeTokens.color.textField.text.danger,
            },
        },
    }),
};