carbon-react 151.5.2 → 152.0.0

package/esm/components/checkbox/checkbox-group/checkbox-group.component.js

@@ -56,7 +56,8 @@ export const CheckboxGroup = ({
     error: error,
     warning: warning,
     isRequired: required,
-    isOptional: isOptional
+    isOptional: isOptional,
+    width: "fit-content"
   }, combinedAriaDescribedBy && {
     "aria-describedby": combinedAriaDescribedBy
   }, tagComponent("checkboxgroup", rest), {

package/esm/components/date/__internal__/date-picker/date-picker.component.d.ts

@@ -3,10 +3,8 @@ import { DayPickerProps, Modifiers } from "react-day-picker";
 declare type CustomRefObject<T> = {
     current?: T | null;
 };
-export interface PickerProps extends Omit<DayPickerProps, "mode" | "disabledDays" | "modifiers" | "selectedDays"> {
-    disabledDays?: NonNullable<Date> | NonNullable<Date>[] | undefined[];
+export interface PickerProps extends Omit<DayPickerProps, "mode" | "modifiers"> {
     modifiers?: Partial<Modifiers>;
-    selectedDays?: NonNullable<Date> | NonNullable<Date>[] | undefined[];
 }
 export interface DatePickerProps {
     /** Boolean to toggle where DatePicker is rendered in relation to the Date Input */
@@ -15,7 +13,10 @@ export interface DatePickerProps {
     minDate?: string;
     /** Maximum possible date YYYY-MM-DD */
     maxDate?: string;
-    /** Pass any props that match the DayPickerProps interface to override default behaviors */
+    /**
+     * Pass any props that match the DayPickerProps interface to override default behaviors
+     * See [DayPickerProps](https://daypicker.dev/api/type-aliases/DayPickerProps) for a full list of available props
+     * */
     pickerProps?: PickerProps;
     /** Element that the DatePicker will be displayed under */
     inputElement: CustomRefObject<HTMLElement>;

package/esm/components/date/date.component.d.ts

@@ -29,7 +29,7 @@ export interface DateInputProps extends Omit<TextboxProps, "value" | "formattedV
     value: string;
     /**
      * Pass any props that match the DayPickerProps interface to override default behaviors
-     * See [DayPickerProps](https://daypicker.dev/start) for a full list of available props
+     * See [DayPickerProps](https://daypicker.dev/api/type-aliases/DayPickerProps) for a full list of available props
      * */
     pickerProps?: PickerProps;
     /**

package/esm/components/date/date.component.js

@@ -2,7 +2,6 @@ function _extends() { return _extends = Object.assign ? Object.assign.bind() : f
 import React, { useContext, useEffect, useMemo, useRef, useState, useCallback } from "react";
 import { additionalYears, findMatchedFormatAndValue, formattedValue, formatToISO, isDateValid, parseDate, parseISODate, checkISOFormatAndLength, getSeparator, isValidLocaleDate } from "./__internal__/utils";
 import useLocale from "../../hooks/__internal__/useLocale";
-import Logger from "../../__internal__/utils/logger";
 import Events from "../../__internal__/utils/helpers/events";
 import { filterOutStyledSystemSpacingProps } from "../../style/utils";
 import getFormatData from "./__internal__/date-formats";
@@ -14,8 +13,6 @@ import useClickAwayListener from "../../hooks/__internal__/useClickAwayListener"
 import useFormSpacing from "../../hooks/__internal__/useFormSpacing";
 import guid from "../../__internal__/utils/helpers/guid";
 import tagComponent from "../../__internal__/utils/helpers/tags/tags";
-let deprecateDisabledDaysWarnTriggered = false;
-let deprecateSelectedDaysWarnTriggered = false;
 export const DateInput = /*#__PURE__*/React.forwardRef(({
   adaptiveLabelBreakpoint,
   allowEmptyValue,
@@ -48,14 +45,6 @@ export const DateInput = /*#__PURE__*/React.forwardRef(({
   datePickerAriaLabelledBy,
   ...rest
 }, ref) => {
-  if (!deprecateDisabledDaysWarnTriggered && pickerProps?.disabledDays) {
-    deprecateDisabledDaysWarnTriggered = true;
-    Logger.deprecate('The `disabledDays` prop has been deprecated as it is currently no longer available in `DayPickerProps` from "react-day-picker".' + "Please use the `disabled` prop instead.");
-  }
-  if (!deprecateSelectedDaysWarnTriggered && pickerProps?.selectedDays) {
-    deprecateSelectedDaysWarnTriggered = true;
-    Logger.deprecate('The `selectedDays` prop has been deprecated as it is currently no longer available in `DayPickerProps` from "react-day-picker".' + "Please use the `selected` prop instead.");
-  }
   const wrapperRef = useRef(null);
   const parentRef = useRef(null);
   const internalInputRef = useRef(null);

package/esm/components/numeral-date/index.d.ts

@@ -1,2 +1,2 @@
 export { default } from "./numeral-date.component";
-export type { NumeralDateProps } from "./numeral-date.component";
+export type { NumeralDateProps, NumeralDateHandle, } from "./numeral-date.component";

package/esm/components/numeral-date/numeral-date.component.d.ts

@@ -3,26 +3,19 @@ import { MarginProps } from "styled-system";
 import { TagProps } from "../../__internal__/utils/helpers/tags";
 import { ValidationProps } from "../../__internal__/validations";
 export declare const ALLOWED_DATE_FORMATS: readonly [readonly ["dd", "mm", "yyyy"], readonly ["mm", "dd", "yyyy"], readonly ["yyyy", "mm", "dd"], readonly ["dd", "mm"], readonly ["mm", "dd"], readonly ["mm", "yyyy"]];
-export interface DayMonthDate {
-    dd: string;
-    mm: string;
+export interface NumeralDateValue {
+    dd?: string;
+    mm?: string;
+    yyyy?: string;
 }
-export interface MonthYearDate {
-    mm: string;
-    yyyy: string;
-}
-export interface FullDate extends DayMonthDate {
-    yyyy: string;
-}
-export declare type NumeralDateObject = DayMonthDate | MonthYearDate | FullDate;
-export interface NumeralDateEvent<DateType extends NumeralDateObject = FullDate> {
+export interface NumeralDateEvent {
     target: {
         name?: string;
         id: string;
-        value: DateType;
+        value: NumeralDateValue;
     };
 }
-export interface NumeralDateProps<DateType extends NumeralDateObject = FullDate> extends ValidationProps, MarginProps, TagProps {
+export interface NumeralDateProps extends ValidationProps, MarginProps, TagProps {
     /** Breakpoint for adaptive label (inline labels change to top aligned). Enables the adaptive behaviour when set */
     adaptiveLabelBreakpoint?: number;
     /** If true, the component will be disabled */
@@ -31,9 +24,9 @@ export interface NumeralDateProps<DateType extends NumeralDateObject = FullDate>
     readOnly?: boolean;
     dateFormat?: ValidDateFormat;
     /** Default value for use in uncontrolled mode  */
-    defaultValue?: DateType;
+    defaultValue?: NumeralDateValue;
     /**  Value for use in controlled mode  */
-    value?: DateType;
+    value?: NumeralDateValue;
     /** When true, enables the internal errors to be displayed */
     enableInternalError?: boolean;
     /** When true, enables the internal warnings to be displayed */
@@ -62,9 +55,9 @@ export interface NumeralDateProps<DateType extends NumeralDateObject = FullDate>
     /** [Legacy] Spacing between label and a field for inline label, given number will be multiplied by base spacing unit (8) */
     labelSpacing?: 1 | 2;
     /** Blur event handler */
-    onBlur?: (ev: NumeralDateEvent<DateType>) => void;
+    onBlur?: (ev: NumeralDateEvent) => void;
     /** Change event handler */
-    onChange?: (ev: NumeralDateEvent<DateType>) => void;
+    onChange?: (ev: NumeralDateEvent) => void;
     /** Flag to configure component as mandatory */
     required?: boolean;
     /** Size of an input */
@@ -91,5 +84,8 @@ export interface NumeralDateProps<DateType extends NumeralDateObject = FullDate>
     isOptional?: boolean;
 }
 export declare type ValidDateFormat = (typeof ALLOWED_DATE_FORMATS)[number];
-export declare const NumeralDate: <DateType extends NumeralDateObject = FullDate>({ dateFormat, defaultValue, disabled, error, warning, info, id, name, onBlur, onChange, value, validationOnLabel, label, labelInline, labelWidth, labelAlign, fieldLabelsAlign, labelHelp, labelSpacing, fieldHelp, adaptiveLabelBreakpoint, required, isOptional, readOnly, size, enableInternalError, enableInternalWarning, tooltipPosition, helpAriaLabel, dayRef, monthRef, yearRef, ...rest }: NumeralDateProps<DateType>) => React.JSX.Element;
+export declare type NumeralDateHandle = {
+    focus: () => void;
+} | null;
+export declare const NumeralDate: React.ForwardRefExoticComponent<NumeralDateProps & React.RefAttributes<NumeralDateHandle>>;
 export default NumeralDate;

package/esm/components/numeral-date/numeral-date.component.js

@@ -1,5 +1,5 @@
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
-import React, { useContext, useState, useEffect, useRef, useMemo } from "react";
+import React, { useContext, useState, useEffect, useRef, useMemo, forwardRef, useImperativeHandle } from "react";
 import invariant from "invariant";
 import tagComponent from "../../__internal__/utils/helpers/tags";
 import { filterStyledSystemMarginProps } from "../../style/utils";
@@ -78,7 +78,7 @@ const getDateLabel = (datePart, locale) => {
       return locale.numeralDate.labels.day();
   }
 };
-export const NumeralDate = ({
+export const NumeralDate = /*#__PURE__*/forwardRef(({
   dateFormat = ["dd", "mm", "yyyy"],
   defaultValue,
   disabled,
@@ -112,7 +112,7 @@ export const NumeralDate = ({
   monthRef,
   yearRef,
   ...rest
-}) => {
+}, ref) => {
   const locale = useLocale();
   const {
     validationRedesignOptIn
@@ -129,6 +129,11 @@ export const NumeralDate = ({
   const isControlled = useRef(value !== undefined);
   const initialValue = isControlled.current ? value : defaultValue;
   const refs = useRef(dateFormat.map(() => null));
+  useImperativeHandle(ref, () => ({
+    focus: () => {
+      refs.current[0]?.focus();
+    }
+  }));
   const [internalMessages, setInternalMessages] = useState({
     ...Object.fromEntries(dateFormat.map(datePart => [datePart, ""]))
   });
@@ -184,7 +189,7 @@ export const NumeralDate = ({
       }));
     }
     setTimeout(() => {
-      const hasBlurred = !refs.current.find(ref => ref === document.activeElement);
+      const hasBlurred = !refs.current.find(r => r === document.activeElement);
       /* istanbul ignore else */
       if (onBlur && hasBlurred) {
         onBlur(createCustomEventObject(dateValue));
@@ -341,5 +346,5 @@ export const NumeralDate = ({
   }), /*#__PURE__*/React.createElement(ErrorBorder, {
     warning: !!(!internalError && internalWarning)
   })), renderInputs()));
-};
+});
 export default NumeralDate;

package/esm/components/radio-button/radio-button-group/radio-button-group.component.js

@@ -79,7 +79,8 @@ export const RadioButtonGroup = ({
     warning: warning,
     legendAlign: legendAlign,
     isRequired: required,
-    isOptional: isOptional
+    isOptional: isOptional,
+    width: "fit-content"
   }, tagComponent("radiogroup", rest), marginProps, {
     ml: marginLeft,
     blockGroupBehaviour: !(error || warning)

package/lib/components/checkbox/checkbox-group/checkbox-group.component.js

@@ -65,7 +65,8 @@ const CheckboxGroup = ({
     error: error,
     warning: warning,
     isRequired: required,
-    isOptional: isOptional
+    isOptional: isOptional,
+    width: "fit-content"
   }, combinedAriaDescribedBy && {
     "aria-describedby": combinedAriaDescribedBy
   }, (0, _tags.default)("checkboxgroup", rest), {

package/lib/components/date/__internal__/date-picker/date-picker.component.d.ts

@@ -3,10 +3,8 @@ import { DayPickerProps, Modifiers } from "react-day-picker";
 declare type CustomRefObject<T> = {
     current?: T | null;
 };
-export interface PickerProps extends Omit<DayPickerProps, "mode" | "disabledDays" | "modifiers" | "selectedDays"> {
-    disabledDays?: NonNullable<Date> | NonNullable<Date>[] | undefined[];
+export interface PickerProps extends Omit<DayPickerProps, "mode" | "modifiers"> {
     modifiers?: Partial<Modifiers>;
-    selectedDays?: NonNullable<Date> | NonNullable<Date>[] | undefined[];
 }
 export interface DatePickerProps {
     /** Boolean to toggle where DatePicker is rendered in relation to the Date Input */
@@ -15,7 +13,10 @@ export interface DatePickerProps {
     minDate?: string;
     /** Maximum possible date YYYY-MM-DD */
     maxDate?: string;
-    /** Pass any props that match the DayPickerProps interface to override default behaviors */
+    /**
+     * Pass any props that match the DayPickerProps interface to override default behaviors
+     * See [DayPickerProps](https://daypicker.dev/api/type-aliases/DayPickerProps) for a full list of available props
+     * */
     pickerProps?: PickerProps;
     /** Element that the DatePicker will be displayed under */
     inputElement: CustomRefObject<HTMLElement>;

package/lib/components/date/date.component.d.ts

@@ -29,7 +29,7 @@ export interface DateInputProps extends Omit<TextboxProps, "value" | "formattedV
     value: string;
     /**
      * Pass any props that match the DayPickerProps interface to override default behaviors
-     * See [DayPickerProps](https://daypicker.dev/start) for a full list of available props
+     * See [DayPickerProps](https://daypicker.dev/api/type-aliases/DayPickerProps) for a full list of available props
      * */
     pickerProps?: PickerProps;
     /**

package/lib/components/date/date.component.js

@@ -7,7 +7,6 @@ exports.default = exports.DateInput = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _utils = require("./__internal__/utils");
 var _useLocale = _interopRequireDefault(require("../../hooks/__internal__/useLocale"));
-var _logger = _interopRequireDefault(require("../../__internal__/utils/logger"));
 var _events = _interopRequireDefault(require("../../__internal__/utils/helpers/events"));
 var _utils2 = require("../../style/utils");
 var _dateFormats = _interopRequireDefault(require("./__internal__/date-formats"));
@@ -23,8 +22,6 @@ function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
-let deprecateDisabledDaysWarnTriggered = false;
-let deprecateSelectedDaysWarnTriggered = false;
 const DateInput = exports.DateInput = /*#__PURE__*/_react.default.forwardRef(({
   adaptiveLabelBreakpoint,
   allowEmptyValue,
@@ -57,14 +54,6 @@ const DateInput = exports.DateInput = /*#__PURE__*/_react.default.forwardRef(({
   datePickerAriaLabelledBy,
   ...rest
 }, ref) => {
-  if (!deprecateDisabledDaysWarnTriggered && pickerProps?.disabledDays) {
-    deprecateDisabledDaysWarnTriggered = true;
-    _logger.default.deprecate('The `disabledDays` prop has been deprecated as it is currently no longer available in `DayPickerProps` from "react-day-picker".' + "Please use the `disabled` prop instead.");
-  }
-  if (!deprecateSelectedDaysWarnTriggered && pickerProps?.selectedDays) {
-    deprecateSelectedDaysWarnTriggered = true;
-    _logger.default.deprecate('The `selectedDays` prop has been deprecated as it is currently no longer available in `DayPickerProps` from "react-day-picker".' + "Please use the `selected` prop instead.");
-  }
   const wrapperRef = (0, _react.useRef)(null);
   const parentRef = (0, _react.useRef)(null);
   const internalInputRef = (0, _react.useRef)(null);

package/lib/components/numeral-date/index.d.ts

@@ -1,2 +1,2 @@
 export { default } from "./numeral-date.component";
-export type { NumeralDateProps } from "./numeral-date.component";
+export type { NumeralDateProps, NumeralDateHandle, } from "./numeral-date.component";

package/lib/components/numeral-date/numeral-date.component.d.ts

@@ -3,26 +3,19 @@ import { MarginProps } from "styled-system";
 import { TagProps } from "../../__internal__/utils/helpers/tags";
 import { ValidationProps } from "../../__internal__/validations";
 export declare const ALLOWED_DATE_FORMATS: readonly [readonly ["dd", "mm", "yyyy"], readonly ["mm", "dd", "yyyy"], readonly ["yyyy", "mm", "dd"], readonly ["dd", "mm"], readonly ["mm", "dd"], readonly ["mm", "yyyy"]];
-export interface DayMonthDate {
-    dd: string;
-    mm: string;
+export interface NumeralDateValue {
+    dd?: string;
+    mm?: string;
+    yyyy?: string;
 }
-export interface MonthYearDate {
-    mm: string;
-    yyyy: string;
-}
-export interface FullDate extends DayMonthDate {
-    yyyy: string;
-}
-export declare type NumeralDateObject = DayMonthDate | MonthYearDate | FullDate;
-export interface NumeralDateEvent<DateType extends NumeralDateObject = FullDate> {
+export interface NumeralDateEvent {
     target: {
         name?: string;
         id: string;
-        value: DateType;
+        value: NumeralDateValue;
     };
 }
-export interface NumeralDateProps<DateType extends NumeralDateObject = FullDate> extends ValidationProps, MarginProps, TagProps {
+export interface NumeralDateProps extends ValidationProps, MarginProps, TagProps {
     /** Breakpoint for adaptive label (inline labels change to top aligned). Enables the adaptive behaviour when set */
     adaptiveLabelBreakpoint?: number;
     /** If true, the component will be disabled */
@@ -31,9 +24,9 @@ export interface NumeralDateProps<DateType extends NumeralDateObject = FullDate>
     readOnly?: boolean;
     dateFormat?: ValidDateFormat;
     /** Default value for use in uncontrolled mode  */
-    defaultValue?: DateType;
+    defaultValue?: NumeralDateValue;
     /**  Value for use in controlled mode  */
-    value?: DateType;
+    value?: NumeralDateValue;
     /** When true, enables the internal errors to be displayed */
     enableInternalError?: boolean;
     /** When true, enables the internal warnings to be displayed */
@@ -62,9 +55,9 @@ export interface NumeralDateProps<DateType extends NumeralDateObject = FullDate>
     /** [Legacy] Spacing between label and a field for inline label, given number will be multiplied by base spacing unit (8) */
     labelSpacing?: 1 | 2;
     /** Blur event handler */
-    onBlur?: (ev: NumeralDateEvent<DateType>) => void;
+    onBlur?: (ev: NumeralDateEvent) => void;
     /** Change event handler */
-    onChange?: (ev: NumeralDateEvent<DateType>) => void;
+    onChange?: (ev: NumeralDateEvent) => void;
     /** Flag to configure component as mandatory */
     required?: boolean;
     /** Size of an input */
@@ -91,5 +84,8 @@ export interface NumeralDateProps<DateType extends NumeralDateObject = FullDate>
     isOptional?: boolean;
 }
 export declare type ValidDateFormat = (typeof ALLOWED_DATE_FORMATS)[number];
-export declare const NumeralDate: <DateType extends NumeralDateObject = FullDate>({ dateFormat, defaultValue, disabled, error, warning, info, id, name, onBlur, onChange, value, validationOnLabel, label, labelInline, labelWidth, labelAlign, fieldLabelsAlign, labelHelp, labelSpacing, fieldHelp, adaptiveLabelBreakpoint, required, isOptional, readOnly, size, enableInternalError, enableInternalWarning, tooltipPosition, helpAriaLabel, dayRef, monthRef, yearRef, ...rest }: NumeralDateProps<DateType>) => React.JSX.Element;
+export declare type NumeralDateHandle = {
+    focus: () => void;
+} | null;
+export declare const NumeralDate: React.ForwardRefExoticComponent<NumeralDateProps & React.RefAttributes<NumeralDateHandle>>;
 export default NumeralDate;

package/lib/components/numeral-date/numeral-date.component.js

@@ -87,7 +87,7 @@ const getDateLabel = (datePart, locale) => {
       return locale.numeralDate.labels.day();
   }
 };
-const NumeralDate = ({
+const NumeralDate = exports.NumeralDate = /*#__PURE__*/(0, _react.forwardRef)(({
   dateFormat = ["dd", "mm", "yyyy"],
   defaultValue,
   disabled,
@@ -121,7 +121,7 @@ const NumeralDate = ({
   monthRef,
   yearRef,
   ...rest
-}) => {
+}, ref) => {
   const locale = (0, _useLocale.default)();
   const {
     validationRedesignOptIn
@@ -138,6 +138,11 @@ const NumeralDate = ({
   const isControlled = (0, _react.useRef)(value !== undefined);
   const initialValue = isControlled.current ? value : defaultValue;
   const refs = (0, _react.useRef)(dateFormat.map(() => null));
+  (0, _react.useImperativeHandle)(ref, () => ({
+    focus: () => {
+      refs.current[0]?.focus();
+    }
+  }));
   const [internalMessages, setInternalMessages] = (0, _react.useState)({
     ...Object.fromEntries(dateFormat.map(datePart => [datePart, ""]))
   });
@@ -193,7 +198,7 @@ const NumeralDate = ({
       }));
     }
     setTimeout(() => {
-      const hasBlurred = !refs.current.find(ref => ref === document.activeElement);
+      const hasBlurred = !refs.current.find(r => r === document.activeElement);
       /* istanbul ignore else */
       if (onBlur && hasBlurred) {
         onBlur(createCustomEventObject(dateValue));
@@ -350,6 +355,5 @@ const NumeralDate = ({
   }), /*#__PURE__*/_react.default.createElement(_textbox2.default, {
     warning: !!(!internalError && internalWarning)
   })), renderInputs()));
-};
-exports.NumeralDate = NumeralDate;
+});
 var _default = exports.default = NumeralDate;

package/lib/components/radio-button/radio-button-group/radio-button-group.component.js

@@ -88,7 +88,8 @@ const RadioButtonGroup = ({
     warning: warning,
     legendAlign: legendAlign,
     isRequired: required,
-    isOptional: isOptional
+    isOptional: isOptional,
+    width: "fit-content"
   }, (0, _tags.default)("radiogroup", rest), marginProps, {
     ml: marginLeft,
     blockGroupBehaviour: !(error || warning)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "carbon-react",
-  "version": "151.5.2",
+  "version": "152.0.0",
   "description": "A library of reusable React components for easily building user interfaces.",
   "files": [
     "lib",
@@ -153,7 +153,6 @@
     "node-fetch": "^3.3.2",
     "nyc": "^17.1.0",
     "prettier": "~3.3.3",
-    "raf": "^3.4.1",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-markdown": "^8.0.7",