@carbon/react
Version:
React components for the Carbon Design System
203 lines (201 loc) • 8.57 kB
JavaScript
/**
* Copyright IBM Corp. 2016, 2026
*
* This source code is licensed under the Apache-2.0 license found in the
* LICENSE file in the root directory of this source tree.
*/
const require_runtime = require("../../_virtual/_rolldown/runtime.js");
const require_usePrefix = require("../../internal/usePrefix.js");
const require_Text = require("../Text/Text.js");
const require_useId = require("../../internal/useId.js");
const require_warning = require("../../internal/warning.js");
const require_deprecate = require("../../prop-types/deprecate.js");
const require_utils = require("../../internal/utils.js");
const require_useNormalizedInputProps = require("../../internal/useNormalizedInputProps.js");
const require_index = require("../AILabel/index.js");
const require_FormContext = require("../FluidForm/FormContext.js");
let classnames = require("classnames");
classnames = require_runtime.__toESM(classnames);
let react = require("react");
react = require_runtime.__toESM(react);
let prop_types = require("prop-types");
prop_types = require_runtime.__toESM(prop_types);
let react_jsx_runtime = require("react/jsx-runtime");
let _carbon_icons_react = require("@carbon/icons-react");
//#region src/components/DatePickerInput/DatePickerInput.tsx
/**
* Copyright IBM Corp. 2016, 2026
*
* This source code is licensed under the Apache-2.0 license found in the
* LICENSE file in the root directory of this source tree.
*/
let didWarnAboutDatePickerInputValue = false;
const DatePickerInput = (0, react.forwardRef)((props, ref) => {
const { datePickerType, decorator, disabled = false, helperText, hideLabel, id, invalid = false, invalidText, labelText, onClick = () => {}, onChange = () => {}, pattern = "\\d{1,2}\\/\\d{1,2}\\/\\d{4}", placeholder, size = "md", slug, type = "text", warn = false, warnText, readOnly, ...rest } = props;
const prefix = require_usePrefix.usePrefix();
const { isFluid } = (0, react.useContext)(require_FormContext.FormContext);
const datePickerInputInstanceId = require_useId.useId();
const normalizedProps = require_useNormalizedInputProps.useNormalizedInputProps({
id,
readOnly,
disabled,
invalid,
invalidText,
warn,
warnText
});
const datePickerInputProps = {
id,
onChange: (event) => {
if (!disabled) onChange(event);
},
onClick: (event) => {
if (!disabled) onClick(event);
},
pattern,
placeholder,
type
};
if (process.env.NODE_ENV !== "production" && "value" in rest && !didWarnAboutDatePickerInputValue) {
require_warning.warning(false, "The 'value' prop is not supported on the DatePickerInput component. For DatePicker components with 'datePickerType=\"range\"', please pass the 'value' prop (as an array of dates) to the parent DatePicker component instead.");
didWarnAboutDatePickerInputValue = true;
}
const wrapperClasses = (0, classnames.default)(`${prefix}--date-picker-input__wrapper`, {
[`${prefix}--date-picker-input__wrapper--invalid`]: normalizedProps.invalid,
[`${prefix}--date-picker-input__wrapper--warn`]: normalizedProps.warn,
[`${prefix}--date-picker-input__wrapper--slug`]: slug,
[`${prefix}--date-picker-input__wrapper--decorator`]: decorator
});
const labelClasses = (0, classnames.default)(`${prefix}--label`, {
[`${prefix}--visually-hidden`]: hideLabel,
[`${prefix}--label--disabled`]: normalizedProps.disabled,
[`${prefix}--label--readonly`]: readOnly
});
const helperTextClasses = (0, classnames.default)(`${prefix}--form__helper-text`, { [`${prefix}--form__helper-text--disabled`]: normalizedProps.disabled });
const inputClasses = (0, classnames.default)(`${prefix}--date-picker__input`, {
[`${prefix}--date-picker__input--${size}`]: size,
[`${prefix}--date-picker__input--invalid`]: normalizedProps.invalid,
[`${prefix}--date-picker__input--warn`]: normalizedProps.warn
});
const containerClasses = (0, classnames.default)(`${prefix}--date-picker-container`, {
[`${prefix}--date-picker--nolabel`]: !labelText,
[`${prefix}--date-picker--fluid--invalid`]: isFluid && normalizedProps.invalid,
[`${prefix}--date-picker--fluid--warn`]: isFluid && normalizedProps.warn
});
const datePickerInputHelperId = !helperText ? void 0 : `datepicker-input-helper-text-${datePickerInputInstanceId}`;
let ariaDescribedBy;
if (normalizedProps.invalid) ariaDescribedBy = normalizedProps.invalidId;
else if (normalizedProps.warn) ariaDescribedBy = normalizedProps.warnId;
else ariaDescribedBy = helperText ? datePickerInputHelperId : void 0;
const inputProps = {
...rest,
...datePickerInputProps,
className: inputClasses,
disabled: normalizedProps.disabled,
ref,
["aria-describedby"]: ariaDescribedBy
};
if (normalizedProps.invalid) {
inputProps["data-invalid"] = true;
inputProps["aria-invalid"] = true;
}
const input = /* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", { ...inputProps });
const candidate = slug ?? decorator;
const normalizedDecorator = require_utils.isComponentElement(candidate, require_index.AILabel) ? (0, react.cloneElement)(candidate, { size: "mini" }) : candidate;
return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
className: containerClasses,
children: [
labelText && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Text.Text, {
as: "label",
htmlFor: id,
className: labelClasses,
children: labelText
}),
/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
className: wrapperClasses,
children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", { children: [
input,
slug ? normalizedDecorator : decorator ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
className: `${prefix}--date-picker-input-inner-wrapper--decorator`,
children: normalizedDecorator
}) : "",
/* @__PURE__ */ (0, react_jsx_runtime.jsx)(DatePickerIcon, {
datePickerType,
invalid: normalizedProps.invalid,
warn: normalizedProps.warn,
disabled: normalizedProps.disabled,
readOnly
})
] })
}),
normalizedProps.validation,
helperText && !normalizedProps.invalid && !normalizedProps.warn && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Text.Text, {
as: "div",
id: datePickerInputHelperId,
className: helperTextClasses,
children: helperText
})
]
});
});
DatePickerInput.propTypes = {
datePickerType: prop_types.default.oneOf([
"simple",
"single",
"range"
]),
decorator: prop_types.default.node,
disabled: prop_types.default.bool,
helperText: prop_types.default.node,
hideLabel: prop_types.default.bool,
id: prop_types.default.string.isRequired,
invalid: prop_types.default.bool,
invalidText: prop_types.default.node,
labelText: prop_types.default.node.isRequired,
onChange: prop_types.default.func,
onClick: prop_types.default.func,
pattern: prop_types.default.string,
placeholder: prop_types.default.string,
readOnly: prop_types.default.bool,
size: prop_types.default.oneOf([
"sm",
"md",
"lg"
]),
slug: require_deprecate.deprecate(prop_types.default.node, "The `slug` prop has been deprecated and will be removed in the next major version. Use the decorator prop instead."),
type: prop_types.default.string,
warn: prop_types.default.bool,
warnText: prop_types.default.node
};
function DatePickerIcon({ datePickerType, invalid, warn, disabled, readOnly }) {
const prefix = require_usePrefix.usePrefix();
const { isFluid } = (0, react.useContext)(require_FormContext.FormContext);
if (datePickerType === "simple" && !invalid && !warn) {
if (!isFluid) return null;
}
if (disabled || readOnly) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_carbon_icons_react.Calendar, {
className: `${prefix}--date-picker__icon`,
role: "img",
"aria-hidden": "true"
});
if (invalid) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_carbon_icons_react.WarningFilled, { className: `${prefix}--date-picker__icon ${prefix}--date-picker__icon--invalid` });
if (!invalid && warn) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_carbon_icons_react.WarningAltFilled, { className: `${prefix}--date-picker__icon ${prefix}--date-picker__icon--warn` });
return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_carbon_icons_react.Calendar, {
className: `${prefix}--date-picker__icon`,
role: "img",
"aria-hidden": "true"
});
}
DatePickerIcon.propTypes = {
datePickerType: prop_types.default.oneOf([
"simple",
"single",
"range"
]),
invalid: prop_types.default.bool,
warn: prop_types.default.bool,
disabled: prop_types.default.bool,
readOnly: prop_types.default.bool
};
//#endregion
exports.default = DatePickerInput;