carbon-react 125.7.0 → 125.9.0

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

@@ -0,0 +1,73 @@
+import React from "react";
+import { MarginProps } from "styled-system";
+import { ValidationProps } from "../../__internal__/validations";
+import { TagProps } from "../../__internal__/utils/helpers/tags";
+import { Sizes } from "../../__internal__/input/input-presentation.component";
+import { ToggleDataProps } from "./__internal__/time-toggle";
+export declare type ToggleValue = "AM" | "PM";
+export declare type TimeValue = {
+    hours: string;
+    minutes: string;
+    period?: ToggleValue;
+};
+export interface TimeInputEvent {
+    target: {
+        name?: string;
+        id: string;
+        value: TimeValue;
+    };
+}
+interface TimeInputProps extends Omit<TagProps, "data-component">, Omit<ValidationProps, "info"> {
+    /** Set an id value on the input */
+    id?: string;
+    /** Override the default label text */
+    label?: string;
+    /** Override the default aria-label text */
+    "aria-label"?: string;
+}
+export interface TimeProps extends Omit<TagProps, "data-component">, MarginProps {
+    /** Label text for the component */
+    label?: string;
+    /** Sets the size of the inputs */
+    size?: Sizes;
+    /** Additional hint text rendered above the input elements */
+    inputHint?: string;
+    /**
+     * Set custom `data-` and `id` attributes on the input element.
+     * Set the `label` and `aria-label` values for the associated Label element.
+     * Set the `error` and `warning` states for the input
+     *  */
+    hoursInputProps?: TimeInputProps;
+    /**
+     * Set custom `data-` and `id` attributes on the input element.
+     * Set the `label` and `aria-label` values for the associated Label element.
+     * Set the `error` and `warning` states for the input
+     *  */
+    minutesInputProps?: TimeInputProps;
+    /** The value of the input elements */
+    value: TimeValue;
+    /** Callback to handle change events in input elements */
+    onChange: (ev: TimeInputEvent) => void;
+    /** Set a name value on the component */
+    name?: string;
+    /** Callback called when focus is lost on input elements */
+    onBlur?: (ev?: React.FocusEvent<HTMLInputElement>) => void;
+    /** Flag to configure component as mandatory */
+    required?: boolean;
+    /** Flag to configure component as optional */
+    isOptional?: boolean;
+    /** If true, the component will be disabled */
+    disabled?: boolean;
+    /** If true, the component will be read-only */
+    readOnly?: boolean;
+    /** Set custom data- attributes on the toggle elements */
+    toggleProps?: ToggleDataProps;
+}
+export declare type TimeHandle = {
+    /** Programmatically focus the hours input. */
+    focusHoursInput: () => void;
+    /** Programmatically focus the minutes input. */
+    focusMinutesInput: () => void;
+} | null;
+declare const Time: React.ForwardRefExoticComponent<TimeProps & React.RefAttributes<TimeHandle>>;
+export default Time;

package/esm/components/time/time.component.js

@@ -0,0 +1,428 @@
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+import React, { useCallback, useImperativeHandle, useRef, useState } from "react";
+import PropTypes from "prop-types";
+import guid from "../../__internal__/utils/helpers/guid";
+import useLocale from "../../hooks/__internal__/useLocale";
+import tagComponent from "../../__internal__/utils/helpers/tags/tags";
+import useInputAccessibility from "../../hooks/__internal__/useInputAccessibility";
+import Fieldset from "../../__internal__/fieldset";
+import Box from "../box";
+import { ErrorBorder } from "../textbox/textbox.style";
+import ValidationMessage from "../../__internal__/validation-message";
+import Number from "../number";
+import Typography from "../typography";
+import { StyledLabel as Label, StyledHintText as Hint } from "./time.style";
+import { TimeToggle } from "./__internal__/time-toggle";
+const Time = /*#__PURE__*/React.forwardRef(({
+  label,
+  size = "medium",
+  inputHint,
+  hoursInputProps = {},
+  minutesInputProps = {},
+  value,
+  name,
+  onChange,
+  onBlur,
+  required,
+  isOptional,
+  disabled,
+  readOnly,
+  toggleProps = {},
+  ...rest
+}, ref) => {
+  const {
+    id: hoursInputId,
+    label: hoursLabel,
+    "aria-label": hoursAriaLabel,
+    error: hoursError,
+    warning: hoursWarning
+  } = hoursInputProps;
+  const {
+    id: minutesInputId,
+    label: minutesLabel,
+    "aria-label": minutesAriaLabel,
+    error: minutesError,
+    warning: minutesWarning
+  } = minutesInputProps;
+  const internalHrsId = useRef(hoursInputId || guid());
+  const internalMinsId = useRef(minutesInputId || guid());
+  const inputHintId = useRef(guid());
+  const internalId = useRef(`${internalHrsId.current} ${internalMinsId.current}`);
+  const {
+    hours: hourValue,
+    minutes: minuteValue,
+    period: toggleValue
+  } = value;
+  const [inputValues, setInputValues] = useState([hourValue, minuteValue]);
+  const locale = useLocale();
+  const showToggle = toggleValue !== undefined;
+  const [period, setPeriod] = useState(toggleValue);
+  const hrsLabel = hoursLabel || locale.time.hoursLabelText();
+  const minsLabel = minutesLabel || locale.time.minutesLabelText();
+  const hrsAriaLabel = hoursAriaLabel || locale.time.hoursAriaLabelText();
+  const minsAriaLabel = minutesAriaLabel || locale.time.minutesAriaLabelText();
+  const hoursRef = useRef(null);
+  const minsRef = useRef(null);
+  const computedValidations = (hrs, mins) => {
+    const hoursIsString = typeof hrs === "string";
+    const minutesIsString = typeof mins === "string";
+    if (!hoursIsString && !minutesIsString) {
+      return hrs || mins;
+    }
+    if (hoursIsString && !minutesIsString) {
+      return hrs;
+    }
+    if (minutesIsString && !hoursIsString) {
+      return mins;
+    }
+    return `${hrs} ${mins}`;
+  };
+  const error = computedValidations(hoursError, minutesError);
+  const warning = computedValidations(hoursWarning, minutesWarning);
+  const hasValidationFailure = !!(error || warning);
+  const {
+    validationId,
+    ariaDescribedBy
+  } = useInputAccessibility({
+    id: internalId.current,
+    validationRedesignOptIn: true,
+    error,
+    warning
+  });
+  const combinedAriaDescribedBy = [ariaDescribedBy, inputHintId.current].filter(Boolean).join(" ");
+  useImperativeHandle(ref, () => ({
+    focusHoursInput() {
+      hoursRef.current?.focus();
+    },
+    focusMinutesInput() {
+      minsRef.current?.focus();
+    }
+  }), []);
+  const handleChange = (ev, inputName) => {
+    const hours = inputName === "hrs" ? ev.target.value : inputValues[0];
+    const minutes = inputName === "mins" ? ev.target.value : inputValues[1];
+    setInputValues([hours, minutes]);
+    onChange({
+      target: {
+        name,
+        id: internalId.current,
+        value: {
+          hours,
+          minutes,
+          period
+        }
+      }
+    });
+  };
+  const handlePeriodChange = periodName => {
+    const [hours, minutes] = inputValues;
+    setPeriod(periodName);
+    onChange({
+      target: {
+        name,
+        id: internalId.current,
+        value: {
+          hours,
+          minutes,
+          period: periodName
+        }
+      }
+    });
+  };
+  const handleBlur = useCallback(ev => {
+    setTimeout(() => {
+      if (hoursRef.current !== document.activeElement && minsRef.current !== document.activeElement) {
+        onBlur?.(ev);
+      }
+    });
+  }, [onBlur]);
+  return /*#__PURE__*/React.createElement(Fieldset, _extends({
+    legend: label,
+    legendMargin: {
+      mb: 0
+    },
+    width: "min-content",
+    isRequired: required,
+    isOptional: isOptional,
+    isDisabled: disabled,
+    name: name,
+    id: internalId.current
+  }, rest, tagComponent("time", rest), {
+    "aria-describedby": combinedAriaDescribedBy
+  }), inputHint && /*#__PURE__*/React.createElement(Hint, {
+    id: inputHintId.current,
+    isDisabled: disabled
+  }, inputHint), /*#__PURE__*/React.createElement(Box, {
+    position: "relative"
+  }, /*#__PURE__*/React.createElement(ValidationMessage, {
+    validationId: validationId,
+    error: error,
+    warning: warning
+  }), hasValidationFailure && /*#__PURE__*/React.createElement(ErrorBorder, {
+    warning: !!(!error && warning)
+  }), /*#__PURE__*/React.createElement(Box, {
+    display: "flex"
+  }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Label, {
+    "aria-label": hrsAriaLabel,
+    htmlFor: internalHrsId.current,
+    disabled: disabled
+  }, hrsLabel), /*#__PURE__*/React.createElement(Number, _extends({}, hoursInputProps, {
+    label: undefined,
+    "data-component": "hours",
+    ref: hoursRef,
+    value: hourValue,
+    onChange: ev => handleChange(ev, "hrs"),
+    onBlur: handleBlur,
+    id: internalHrsId.current,
+    size: size,
+    error: !!hoursError,
+    warning: !!hoursWarning,
+    disabled: disabled,
+    readOnly: readOnly
+  }))), /*#__PURE__*/React.createElement(Box, {
+    display: "flex",
+    flexDirection: "column",
+    justifyContent: "center",
+    mx: 1,
+    "aria-hidden": "true"
+  }, /*#__PURE__*/React.createElement("span", null, "\xA0"), /*#__PURE__*/React.createElement(Typography, {
+    isDisabled: disabled,
+    variant: "span",
+    mb: "-4px"
+  }, ":")), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Label, {
+    "aria-label": minsAriaLabel,
+    htmlFor: internalMinsId.current,
+    disabled: disabled
+  }, minsLabel), /*#__PURE__*/React.createElement(Number, _extends({}, minutesInputProps, {
+    label: undefined,
+    "data-component": "minutes",
+    ref: minsRef,
+    value: minuteValue,
+    onChange: ev => handleChange(ev, "mins"),
+    onBlur: handleBlur,
+    id: internalMinsId.current,
+    size: size,
+    error: !!minutesError,
+    warning: !!minutesWarning,
+    disabled: disabled,
+    readOnly: readOnly
+  }))), showToggle && /*#__PURE__*/React.createElement(Box, {
+    display: "flex",
+    flexDirection: "column",
+    justifyContent: "flex-end"
+  }, /*#__PURE__*/React.createElement(TimeToggle, {
+    toggleProps: toggleProps,
+    size: size,
+    onChange: handlePeriodChange,
+    toggleValue: toggleValue,
+    disabled: disabled || readOnly
+  })))));
+});
+Time.propTypes = {
+  "children": PropTypes.node,
+  "data-element": PropTypes.string,
+  "data-role": PropTypes.string,
+  "disabled": PropTypes.bool,
+  "hoursInputProps": PropTypes.shape({
+    "aria-label": PropTypes.string,
+    "data-element": PropTypes.string,
+    "data-role": PropTypes.string,
+    "error": PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
+    "id": PropTypes.string,
+    "label": PropTypes.string,
+    "warning": PropTypes.oneOfType([PropTypes.string, PropTypes.bool])
+  }),
+  "inputHint": PropTypes.string,
+  "isOptional": PropTypes.bool,
+  "label": PropTypes.string,
+  "m": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string]),
+  "margin": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string]),
+  "marginBottom": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string]),
+  "marginLeft": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string]),
+  "marginRight": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string]),
+  "marginTop": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string]),
+  "marginX": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string]),
+  "marginY": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string]),
+  "mb": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string]),
+  "minutesInputProps": PropTypes.shape({
+    "aria-label": PropTypes.string,
+    "data-element": PropTypes.string,
+    "data-role": PropTypes.string,
+    "error": PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
+    "id": PropTypes.string,
+    "label": PropTypes.string,
+    "warning": PropTypes.oneOfType([PropTypes.string, PropTypes.bool])
+  }),
+  "ml": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string]),
+  "mr": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string]),
+  "mt": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string]),
+  "mx": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string]),
+  "my": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string]),
+  "name": PropTypes.string,
+  "onBlur": PropTypes.func,
+  "onChange": PropTypes.func.isRequired,
+  "readOnly": PropTypes.bool,
+  "required": PropTypes.bool,
+  "size": PropTypes.oneOf(["large", "medium", "small"]),
+  "toggleProps": PropTypes.shape({
+    "amToggleProps": PropTypes.shape({
+      "data-element": PropTypes.string,
+      "data-role": PropTypes.string
+    }),
+    "pmToggleProps": PropTypes.shape({
+      "data-element": PropTypes.string,
+      "data-role": PropTypes.string
+    }),
+    "wrapperProps": PropTypes.shape({
+      "data-element": PropTypes.string,
+      "data-role": PropTypes.string
+    })
+  }),
+  "value": PropTypes.shape({
+    "hours": PropTypes.string.isRequired,
+    "minutes": PropTypes.string.isRequired,
+    "period": PropTypes.oneOf(["AM", "PM"])
+  }).isRequired
+};
+Time.displayName = "Time";
+export default Time;

package/esm/components/time/time.style.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+export declare const StyledLabel: import("styled-components").StyledComponent<import("react").MemoExoticComponent<({ align, as, children, disabled, error, help, helpIcon, htmlFor, info, inline, isRequired, labelId, optional, pr, pl, tooltipId, useValidationIcon, validationIconId, warning, width, className, "aria-label": ariaLabel, }: import("../../__internal__/label").LabelProps) => import("react").JSX.Element>, any, {}, never>;
+export declare const StyledHintText: import("styled-components").StyledComponent<"div", any, {
+    isDisabled?: boolean | undefined;
+    hasError?: boolean | undefined;
+}, never>;

package/esm/components/time/time.style.js

@@ -0,0 +1,19 @@
+import styled from "styled-components";
+import Label from "../../__internal__/label";
+export const StyledLabel = styled(Label)`
+  label {
+    font-weight: var(--fontWeights500);
+  }
+`;
+export const StyledHintText = styled.div`
+  ::after {
+    content: " ";
+  }
+
+  margin-top: 0px;
+  margin-bottom: var(--spacing150);
+  color: ${({
+  isDisabled
+}) => isDisabled ? "var(--colorsUtilityYin030)" : "var(--colorsUtilityYin055)"};
+  font-size: 14px;
+`;

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

@@ -49,9 +49,15 @@ export interface TypographyProps extends SpaceProps, TagProps {
     /** Set whether it will be visually hidden
      * NOTE: This is for screen readers only and will make a lot of the other props redundant */
     screenReaderOnly?: boolean;
+    /**
+     * @private
+     * @ignore
+     * Override the default color of the rendered element to match disabled styling
+     * */
+    isDisabled?: boolean;
 }
 export declare const Typography: {
-    ({ "data-component": dataComponent, variant, as, id, fontSize, fontWeight, textTransform, lineHeight, textDecoration, display, listStyleType, whiteSpace, wordWrap, textAlign, textOverflow, truncate, color, backgroundColor, bg, opacity, children, className, screenReaderOnly, ...rest }: TypographyProps): React.JSX.Element;
+    ({ "data-component": dataComponent, variant, as, id, fontSize, fontWeight, textTransform, lineHeight, textDecoration, display, listStyleType, whiteSpace, wordWrap, textAlign, textOverflow, truncate, color, backgroundColor, bg, opacity, children, className, screenReaderOnly, isDisabled, ...rest }: TypographyProps): React.JSX.Element;
     displayName: string;
 };
 export default Typography;

package/esm/components/typography/typography.component.js

@@ -29,6 +29,7 @@ export const Typography = ({
   children,
   className,
   screenReaderOnly,
+  isDisabled,
   ...rest
 }) => {
   return /*#__PURE__*/React.createElement(StyledTypography, _extends({
@@ -52,7 +53,8 @@ export const Typography = ({
     bg: bg,
     opacity: opacity,
     className: className,
-    screenReaderOnly: screenReaderOnly
+    screenReaderOnly: screenReaderOnly,
+    isDisabled: isDisabled
   }, tagComponent(dataComponent, rest), filterStyledSystemMarginProps(rest), filterStyledSystemPaddingProps(rest)), children);
 };
 Typography.displayName = "Typography";

package/esm/components/typography/typography.style.js

@@ -190,6 +190,11 @@ const StyledTypography = styled.span.attrs(({
   backgroundColor,
   ...rest
 })}
+  ${({
+  isDisabled
+}) => isDisabled && css`
+      color: var(--colorsUtilityYin030);
+    `}
 `;
 StyledTypography.defaultProps = {
   theme: baseTheme

package/esm/locales/__internal__/pl-pl.js

@@ -198,6 +198,14 @@ const plPL = {
   tileSelect: {
     deselect: () => "Odznacz"
   },
+  time: {
+    amText: () => "AM",
+    pmText: () => "PM",
+    hoursLabelText: () => "Hrs.",
+    minutesLabelText: () => "Min.",
+    hoursAriaLabelText: () => "Godziny",
+    minutesAriaLabelText: () => "Minuty"
+  },
   toast: {
     ariaLabels: {
       close: () => "Zamknij"

package/esm/locales/en-gb.js

@@ -163,6 +163,14 @@ const enGB = {
   tileSelect: {
     deselect: () => "Deselect"
   },
+  time: {
+    amText: () => "AM",
+    pmText: () => "PM",
+    hoursLabelText: () => "Hrs.",
+    minutesLabelText: () => "Mins.",
+    hoursAriaLabelText: () => "Hours",
+    minutesAriaLabelText: () => "Minutes"
+  },
   toast: {
     ariaLabels: {
       close: () => "Close"

package/esm/locales/locale.d.ts

@@ -138,6 +138,14 @@ interface Locale {
     tileSelect: {
         deselect: () => string;
     };
+    time: {
+        amText: () => string;
+        pmText: () => string;
+        hoursLabelText: () => string;
+        minutesLabelText: () => string;
+        hoursAriaLabelText: () => string;
+        minutesAriaLabelText: () => string;
+    };
     toast: {
         ariaLabels: {
             close: () => string;

package/lib/__internal__/fieldset/fieldset.component.d.ts

@@ -22,6 +22,18 @@ export interface FieldsetProps extends MarginProps {
     isRequired?: boolean;
     /** Controls whether group behaviour should be enabled */
     blockGroupBehaviour?: boolean;
+    /** Margin props for the legend element */
+    legendMargin?: Pick<MarginProps, "mb">;
+    /** Any valid CSS string to set the component's width */
+    width?: string;
+    /** Flag to configure component as optional in Form */
+    isOptional?: boolean;
+    /** Apply disabled styling to the legend content */
+    isDisabled?: boolean;
+    /** Set a name value on the component */
+    name?: string;
+    /** Set an id value on the component */
+    id?: string;
 }
-declare const Fieldset: ({ legend, children, inline, legendWidth, legendAlign, legendSpacing, error, warning, info, isRequired, blockGroupBehaviour, ...rest }: FieldsetProps) => React.JSX.Element;
+declare const Fieldset: ({ legend, children, inline, legendWidth, legendAlign, legendSpacing, error, warning, info, isRequired, blockGroupBehaviour, legendMargin, isDisabled, isOptional, ...rest }: FieldsetProps) => React.JSX.Element;
 export default Fieldset;