carbon-react 147.9.0 → 147.10.0

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

@@ -43,5 +43,5 @@ export interface PortraitProps extends MarginProps {
     /** The hex code of the foreground colour. This will only take effect if use in conjunction with `backgroundColor` */
     foregroundColor?: string;
 }
-declare const Portrait: ({ alt, backgroundColor, foregroundColor, name, darkBackground, iconType, initials, shape, size, src, onClick, tooltipMessage, tooltipId, tooltipIsVisible, tooltipPosition, tooltipType, tooltipSize, tooltipBgColor, tooltipFontColor, ...rest }: PortraitProps) => React.JSX.Element;
+export declare const Portrait: ({ alt, backgroundColor, foregroundColor, name, darkBackground, iconType, initials, shape, size, src, onClick, tooltipMessage, tooltipId, tooltipIsVisible, tooltipPosition, tooltipType, tooltipSize, tooltipBgColor, tooltipFontColor, ...rest }: PortraitProps) => React.JSX.Element;
 export default Portrait;

package/esm/components/portrait/portrait.component.js

@@ -5,7 +5,7 @@ import Tooltip from "../tooltip";
 import tagComponent from "../../__internal__/utils/helpers/tags/tags";
 import { StyledCustomImg, StyledIcon, StyledPortraitContainer, StyledPortraitInitials } from "./portrait.style";
 import { filterStyledSystemMarginProps } from "../../style/utils";
-const Portrait = ({
+export const Portrait = ({
   alt,
   backgroundColor,
   foregroundColor = undefined,

package/esm/components/profile/profile.config.js

@@ -5,14 +5,14 @@ export default {
     nameSize: "var(--fontSizes050)",
     emailSize: "var(--fontSizes025)",
     lineHeight: "12px",
-    marginLeft: "16px"
+    marginLeft: "8px"
   },
   S: {
     initialSize: "var(--fontSizes100)",
     nameSize: "var(--fontSizes100)",
     emailSize: "var(--fontSizes100)",
     lineHeight: "16px",
-    marginLeft: "16px"
+    marginLeft: "8px"
   },
   M: {
     initialSize: "var(--fontSizes300)",

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

@@ -9,6 +9,8 @@ export declare type TimeValue = {
     hours: string;
     minutes: string;
     period?: ToggleValue;
+    formattedHours?: string;
+    formattedMinutes?: string;
 };
 export interface TimeInputEvent {
     target: {
@@ -55,7 +57,7 @@ export interface TimeProps extends Omit<TagProps, "data-component">, MarginProps
     /** Set a name value on the component */
     name?: string;
     /** Callback called when focus is lost on input elements */
-    onBlur?: (ev?: React.FocusEvent<HTMLInputElement>) => void;
+    onBlur?: (ev?: React.FocusEvent<HTMLInputElement>, value?: TimeValue) => void;
     /** Flag to configure component as mandatory */
     required?: boolean;
     /** Flag to configure component as optional */

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

@@ -55,7 +55,10 @@ const Time = /*#__PURE__*/React.forwardRef(({
     minutes: minuteValue,
     period: toggleValue
   } = value;
+  const formattedHoursValue = hourValue.length ? hourValue.padStart(2, "0") : hourValue;
+  const formattedMinutesValue = minuteValue.length ? minuteValue.padStart(2, "0") : minuteValue;
   const [inputValues, setInputValues] = useState([hourValue, minuteValue]);
+  const [formattedInputValues, setFormattedInputValues] = useState([formattedHoursValue, formattedMinutesValue]);
   const locale = useLocale();
   const showToggle = toggleValue !== undefined;
   const [period, setPeriod] = useState(toggleValue);
@@ -104,6 +107,9 @@ const Time = /*#__PURE__*/React.forwardRef(({
     const hours = inputName === "hrs" ? ev.target.value : inputValues[0];
     const minutes = inputName === "mins" ? ev.target.value : inputValues[1];
     setInputValues([hours, minutes]);
+    const formattedHours = hours.length ? hours.padStart(2, "0") : hours;
+    const formattedMinutes = minutes.length ? minutes.padStart(2, "0") : minutes;
+    setFormattedInputValues([formattedHours, formattedMinutes]);
     onChange({
       target: {
         name,
@@ -111,13 +117,16 @@ const Time = /*#__PURE__*/React.forwardRef(({
         value: {
           hours,
           minutes,
-          period
+          period,
+          formattedHours,
+          formattedMinutes
         }
       }
     });
   };
   const handlePeriodChange = periodName => {
     const [hours, minutes] = inputValues;
+    const [formattedHours, formattedMinutes] = formattedInputValues;
     setPeriod(periodName);
     onChange({
       target: {
@@ -126,18 +135,29 @@ const Time = /*#__PURE__*/React.forwardRef(({
         value: {
           hours,
           minutes,
-          period: periodName
+          period: periodName,
+          formattedHours,
+          formattedMinutes
         }
       }
     });
   };
   const handleBlur = useCallback(ev => {
     setTimeout(() => {
+      const [hours, minutes] = inputValues;
+      const [formattedHours, formattedMinutes] = formattedInputValues;
+      const timeValueObj = {
+        hours,
+        minutes,
+        period,
+        formattedHours,
+        formattedMinutes
+      };
       if (hoursRef.current !== document.activeElement && minsRef.current !== document.activeElement) {
-        onBlur?.(ev);
+        onBlur?.(ev, timeValueObj);
       }
     });
-  }, [onBlur]);
+  }, [formattedInputValues, inputValues, onBlur, period]);
   return /*#__PURE__*/React.createElement(Fieldset, _extends({
     legend: label,
     legendMargin: {
@@ -429,6 +449,8 @@ if (process.env.NODE_ENV !== "production") {
       })
     }),
     "value": PropTypes.shape({
+      "formattedHours": PropTypes.string,
+      "formattedMinutes": PropTypes.string,
       "hours": PropTypes.string.isRequired,
       "minutes": PropTypes.string.isRequired,
       "period": PropTypes.oneOf(["AM", "PM"])

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

@@ -43,5 +43,5 @@ export interface PortraitProps extends MarginProps {
     /** The hex code of the foreground colour. This will only take effect if use in conjunction with `backgroundColor` */
     foregroundColor?: string;
 }
-declare const Portrait: ({ alt, backgroundColor, foregroundColor, name, darkBackground, iconType, initials, shape, size, src, onClick, tooltipMessage, tooltipId, tooltipIsVisible, tooltipPosition, tooltipType, tooltipSize, tooltipBgColor, tooltipFontColor, ...rest }: PortraitProps) => React.JSX.Element;
+export declare const Portrait: ({ alt, backgroundColor, foregroundColor, name, darkBackground, iconType, initials, shape, size, src, onClick, tooltipMessage, tooltipId, tooltipIsVisible, tooltipPosition, tooltipType, tooltipSize, tooltipBgColor, tooltipFontColor, ...rest }: PortraitProps) => React.JSX.Element;
 export default Portrait;

package/lib/components/portrait/portrait.component.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.default = exports.Portrait = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _tooltip = _interopRequireDefault(require("../tooltip"));
@@ -95,4 +95,5 @@ const Portrait = ({
   };
   return renderComponent();
 };
+exports.Portrait = Portrait;
 var _default = exports.default = Portrait;

package/lib/components/profile/profile.config.js

@@ -11,14 +11,14 @@ var _default = exports.default = {
     nameSize: "var(--fontSizes050)",
     emailSize: "var(--fontSizes025)",
     lineHeight: "12px",
-    marginLeft: "16px"
+    marginLeft: "8px"
   },
   S: {
     initialSize: "var(--fontSizes100)",
     nameSize: "var(--fontSizes100)",
     emailSize: "var(--fontSizes100)",
     lineHeight: "16px",
-    marginLeft: "16px"
+    marginLeft: "8px"
   },
   M: {
     initialSize: "var(--fontSizes300)",

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

@@ -9,6 +9,8 @@ export declare type TimeValue = {
     hours: string;
     minutes: string;
     period?: ToggleValue;
+    formattedHours?: string;
+    formattedMinutes?: string;
 };
 export interface TimeInputEvent {
     target: {
@@ -55,7 +57,7 @@ export interface TimeProps extends Omit<TagProps, "data-component">, MarginProps
     /** Set a name value on the component */
     name?: string;
     /** Callback called when focus is lost on input elements */
-    onBlur?: (ev?: React.FocusEvent<HTMLInputElement>) => void;
+    onBlur?: (ev?: React.FocusEvent<HTMLInputElement>, value?: TimeValue) => void;
     /** Flag to configure component as mandatory */
     required?: boolean;
     /** Flag to configure component as optional */

package/lib/components/time/time.component.js

@@ -64,7 +64,10 @@ const Time = /*#__PURE__*/_react.default.forwardRef(({
     minutes: minuteValue,
     period: toggleValue
   } = value;
+  const formattedHoursValue = hourValue.length ? hourValue.padStart(2, "0") : hourValue;
+  const formattedMinutesValue = minuteValue.length ? minuteValue.padStart(2, "0") : minuteValue;
   const [inputValues, setInputValues] = (0, _react.useState)([hourValue, minuteValue]);
+  const [formattedInputValues, setFormattedInputValues] = (0, _react.useState)([formattedHoursValue, formattedMinutesValue]);
   const locale = (0, _useLocale.default)();
   const showToggle = toggleValue !== undefined;
   const [period, setPeriod] = (0, _react.useState)(toggleValue);
@@ -113,6 +116,9 @@ const Time = /*#__PURE__*/_react.default.forwardRef(({
     const hours = inputName === "hrs" ? ev.target.value : inputValues[0];
     const minutes = inputName === "mins" ? ev.target.value : inputValues[1];
     setInputValues([hours, minutes]);
+    const formattedHours = hours.length ? hours.padStart(2, "0") : hours;
+    const formattedMinutes = minutes.length ? minutes.padStart(2, "0") : minutes;
+    setFormattedInputValues([formattedHours, formattedMinutes]);
     onChange({
       target: {
         name,
@@ -120,13 +126,16 @@ const Time = /*#__PURE__*/_react.default.forwardRef(({
         value: {
           hours,
           minutes,
-          period
+          period,
+          formattedHours,
+          formattedMinutes
         }
       }
     });
   };
   const handlePeriodChange = periodName => {
     const [hours, minutes] = inputValues;
+    const [formattedHours, formattedMinutes] = formattedInputValues;
     setPeriod(periodName);
     onChange({
       target: {
@@ -135,18 +144,29 @@ const Time = /*#__PURE__*/_react.default.forwardRef(({
         value: {
           hours,
           minutes,
-          period: periodName
+          period: periodName,
+          formattedHours,
+          formattedMinutes
         }
       }
     });
   };
   const handleBlur = (0, _react.useCallback)(ev => {
     setTimeout(() => {
+      const [hours, minutes] = inputValues;
+      const [formattedHours, formattedMinutes] = formattedInputValues;
+      const timeValueObj = {
+        hours,
+        minutes,
+        period,
+        formattedHours,
+        formattedMinutes
+      };
       if (hoursRef.current !== document.activeElement && minsRef.current !== document.activeElement) {
-        onBlur?.(ev);
+        onBlur?.(ev, timeValueObj);
       }
     });
-  }, [onBlur]);
+  }, [formattedInputValues, inputValues, onBlur, period]);
   return /*#__PURE__*/_react.default.createElement(_fieldset.default, _extends({
     legend: label,
     legendMargin: {
@@ -438,6 +458,8 @@ if (process.env.NODE_ENV !== "production") {
       })
     }),
     "value": _propTypes.default.shape({
+      "formattedHours": _propTypes.default.string,
+      "formattedMinutes": _propTypes.default.string,
       "hours": _propTypes.default.string.isRequired,
       "minutes": _propTypes.default.string.isRequired,
       "period": _propTypes.default.oneOf(["AM", "PM"])

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "carbon-react",
-  "version": "147.9.0",
+  "version": "147.10.0",
   "description": "A library of reusable React components for easily building user interfaces.",
   "files": [
     "lib",