carbon-react 111.8.2 → 111.8.4

package/esm/__internal__/input/input-presentation.component.d.ts

@@ -13,10 +13,12 @@ export interface CommonInputPresentationProps extends ValidationProps {
     readOnly?: boolean;
     /** Size of an input */
     size?: Sizes;
+    /** If true, the component has an icon rendered inside */
+    hasIcon?: boolean;
 }
 export interface InputPresentationProps extends CommonInputPresentationProps {
     /** Content to be rendered before the input */
     positionedChildren?: React.ReactNode;
 }
-declare const InputPresentation: ({ children, positionedChildren, inputWidth, align, disabled, readOnly, size, error, warning, info, }: InputPresentationProps) => JSX.Element;
+declare const InputPresentation: ({ children, positionedChildren, inputWidth, align, disabled, readOnly, size, error, warning, info, hasIcon, }: InputPresentationProps) => JSX.Element;
 export default InputPresentation;

package/esm/__internal__/input/input-presentation.component.js

@@ -14,7 +14,8 @@ const InputPresentation = ({
   size = "medium",
   error,
   warning,
-  info
+  info,
+  hasIcon
 }) => {
   const {
     hasFocus,
@@ -55,7 +56,8 @@ const InputPresentation = ({
     warning: warning,
     error: error,
     info: info,
-    validationRedesignOptIn: validationRedesignOptIn
+    validationRedesignOptIn: validationRedesignOptIn,
+    hasIcon: hasIcon
   }, children));
 };
 
@@ -64,6 +66,7 @@ InputPresentation.propTypes = {
   "children": PropTypes.node,
   "disabled": PropTypes.bool,
   "error": PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
+  "hasIcon": PropTypes.bool,
   "info": PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
   "inputWidth": PropTypes.number,
   "positionedChildren": PropTypes.node,

package/esm/__internal__/input/input-presentation.style.d.ts

@@ -2,5 +2,5 @@ import { CommonInputPresentationProps } from "./input-presentation.component";
 import { InputContextProps } from "../input-behaviour";
 import { CarbonProviderProps } from "../../components/carbon-provider";
 export declare const StyledInputPresentationContainer: import("styled-components").StyledComponent<"div", any, Pick<CommonInputPresentationProps, "inputWidth">, never>;
-declare const InputPresentationStyle: import("styled-components").StyledComponent<"div", any, Pick<InputContextProps, "hasFocus"> & Pick<CommonInputPresentationProps, "disabled" | "error" | "info" | "warning" | "align" | "readOnly" | "size"> & Pick<CarbonProviderProps, "validationRedesignOptIn">, never>;
+declare const InputPresentationStyle: import("styled-components").StyledComponent<"div", any, Pick<InputContextProps, "hasFocus"> & Pick<CommonInputPresentationProps, "disabled" | "error" | "info" | "warning" | "align" | "readOnly" | "size" | "hasIcon"> & Pick<CarbonProviderProps, "validationRedesignOptIn">, never>;
 export default InputPresentationStyle;

package/esm/__internal__/input/input-presentation.style.js

@@ -1,5 +1,6 @@
 import styled, { css } from "styled-components";
 import sizes from "./input-sizes.style";
+import StyledInput from "./input.style";
 export const StyledInputPresentationContainer = styled.div`
   flex: 0 0 ${({
   inputWidth
@@ -49,11 +50,17 @@ const InputPresentationStyle = styled.div`
   width: 100%;
   margin: 0;
   ${({
-  size
+  size,
+  hasIcon,
+  align
 }) => size && css`
       min-height: ${sizes[size].height};
-      padding-left: ${sizes[size].horizontalPadding};
-      padding-right: ${sizes[size].horizontalPadding};
+
+      ${StyledInput} {
+        padding: 0 ${sizes[size].horizontalPadding};
+        ${hasIcon && align === "right" && "padding-left: 0;"}
+        ${hasIcon && align === "left" && "padding-right: 0;"}
+      }
     `}
 
   ${({

package/esm/__internal__/input-behaviour/useInputBehaviour.js

@@ -11,8 +11,13 @@ const useInputBehaviour = blockGroupBehaviour => {
   }, []); // use mouse down rather than click to accommodate click and drag events too
 
   const onMouseDown = useCallback(() => {
-    // use a zero timeout to ensure focus is applied even on click and drag events
-    setTimeout(() => inputRef && inputRef.current && inputRef.current.focus());
+    requestAnimationFrame(() => {
+      var _inputRef$current;
+
+      inputRef === null || inputRef === void 0 ? void 0 : (_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 ? void 0 : _inputRef$current.focus({
+        preventScroll: true
+      });
+    });
   }, []);
   const onMouseEnter = useCallback(() => setHasMouseOver(true), []);
   const onMouseLeave = useCallback(() => setHasMouseOver(false), []);

package/esm/__internal__/input-icon-toggle/input-icon-toggle.style.js

@@ -20,8 +20,6 @@ const InputIconToggleStyle = styled.span.attrs(({
   ${({
   size = "medium"
 }) => css`
-    margin-right: calc(-1 * ${sizes[size].horizontalPadding});
-    margin-left: calc(-1 * ${sizes[size].horizontalPadding});
     width: ${sizes[size].height};
   `}
 

package/esm/components/date/date.style.js

@@ -2,6 +2,7 @@ import styled from "styled-components";
 import PropTypes from "prop-types";
 import { margin } from "styled-system";
 import baseTheme from "../../style/themes/base";
+import StyledInput from "../../__internal__/input/input.style";
 import StyledInputPresentation from "../../__internal__/input/input-presentation.style";
 const datePickerWidth = {
   large: "140px",
@@ -16,6 +17,10 @@ const StyledDateInput = styled.div`
     width: ${({
   size
 }) => datePickerWidth[size]};
+
+    ${StyledInput} {
+      margin-right: -8px;
+    }
   }
 `;
 StyledDateInput.propTypes = {

package/esm/components/form/__internal__/form-summary.component.d.ts

@@ -1,14 +1,19 @@
-export default FormSummary;
-declare function FormSummary({ fullWidth, ...props }: {
-    [x: string]: any;
-    fullWidth: any;
-}): JSX.Element;
-declare namespace FormSummary {
-    namespace propTypes {
-        const children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
-        const errors: PropTypes.Requireable<number>;
-        const warnings: PropTypes.Requireable<number>;
-        const fullWidth: PropTypes.Requireable<boolean>;
-    }
+import React from "react";
+import { StyledInternalSummaryProps } from "./form-summary.style";
+interface SummaryProps extends StyledInternalSummaryProps {
+    errorCount?: number;
+    warningCount?: number;
+}
+export interface FormSummaryProps {
+    /** Child elements */
+    children?: React.ReactNode;
+    /** The total number of errors present in the form */
+    errorCount?: number;
+    /** The total number of warnings present in the form */
+    warningCount?: number;
+    /** Applies full width styling */
+    fullWidth?: boolean;
 }
-import PropTypes from "prop-types";
+export declare const Summary: ({ type, errorCount, warningCount, }: SummaryProps) => JSX.Element | null;
+declare const FormSummary: ({ fullWidth, ...props }: FormSummaryProps) => JSX.Element;
+export default FormSummary;

package/esm/components/form/__internal__/form-summary.component.js

@@ -8,53 +8,54 @@ import useLocale from "../../../hooks/__internal__/useLocale";
 
 const Summary = ({
   type,
-  errors,
-  warnings
+  errorCount = 0,
+  warningCount = 0
 }) => {
   const l = useLocale();
   const messages = {
-    errors,
-    warnings
+    errorCount,
+    warningCount
   };
-  const message = useMemo(() => l.errors.messages.formSummary(errors, warnings, type), [l.errors.messages, errors, warnings, type]);
+  const message = useMemo(() => l.errors.messages.formSummary(errorCount, warningCount, type), [l.errors.messages, errorCount, warningCount, type]);
 
-  if (messages[type]) {
-    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(StyledMessagePrefix, null, message[0]), /*#__PURE__*/React.createElement(StyledInternalSummary, {
+  if (messages[`${type}Count`]) {
+    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(StyledMessagePrefix, null, message === null || message === void 0 ? void 0 : message[0]), /*#__PURE__*/React.createElement(StyledInternalSummary, {
       type: type,
-      "data-element": type
+      "data-element": `${type}s`
     }, /*#__PURE__*/React.createElement(Icon, {
-      type: type.slice(0, -1)
-    }), /*#__PURE__*/React.createElement("span", null, message[1])));
+      type: type
+    }), /*#__PURE__*/React.createElement("span", null, message === null || message === void 0 ? void 0 : message[1])));
   }
 
   return null;
 };
 
 Summary.propTypes = {
-  type: PropTypes.oneOf(["errors", "warnings"]),
-  errors: PropTypes.number,
-  warnings: PropTypes.number
+  "errorCount": PropTypes.number,
+  "type": PropTypes.oneOf(["error", "warning"]).isRequired,
+  "warningCount": PropTypes.number
 };
+export { Summary };
 
 const FormSummary = ({
   fullWidth,
   ...props
 }) => {
   return /*#__PURE__*/React.createElement(StyledFormSummary, {
-    showSummary: props.errors || props.warnings,
+    showSummary: !!(props.errorCount || props.warningCount),
     "data-element": "form-summary",
     fullWidth: fullWidth
   }, /*#__PURE__*/React.createElement(Summary, _extends({
-    type: "errors"
+    type: "error"
   }, props)), /*#__PURE__*/React.createElement(Summary, _extends({
-    type: "warnings"
+    type: "warning"
   }, props)), props.children);
 };
 
 FormSummary.propTypes = {
-  children: PropTypes.node,
-  errors: PropTypes.number,
-  warnings: PropTypes.number,
-  fullWidth: PropTypes.bool
+  "children": PropTypes.node,
+  "errorCount": PropTypes.number,
+  "fullWidth": PropTypes.bool,
+  "warningCount": PropTypes.number
 };
 export default FormSummary;

package/esm/components/form/__internal__/form-summary.style.d.ts

@@ -1,3 +1,11 @@
-export const StyledFormSummary: import("styled-components").StyledComponent<"div", any, {}, never>;
-export const StyledMessagePrefix: import("styled-components").StyledComponent<"div", any, {}, never>;
-export const StyledInternalSummary: import("styled-components").StyledComponent<"div", any, {}, never>;
+declare type StyledFormSummaryProps = {
+    showSummary?: boolean;
+    fullWidth?: boolean;
+};
+export declare const StyledFormSummary: import("styled-components").StyledComponent<"div", any, StyledFormSummaryProps, never>;
+export declare const StyledMessagePrefix: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare type StyledInternalSummaryProps = {
+    type: "error" | "warning";
+};
+export declare const StyledInternalSummary: import("styled-components").StyledComponent<"div", any, StyledInternalSummaryProps, never>;
+export {};

package/esm/components/form/__internal__/form-summary.style.js

@@ -1,5 +1,4 @@
 import styled, { css } from "styled-components";
-import PropTypes from "prop-types";
 import StyledIcon from "../../icon/icon.style";
 import StyledButton from "../../button/button.style";
 export const StyledFormSummary = styled.div`
@@ -44,12 +43,12 @@ export const StyledInternalSummary = styled.div`
   }
   ${({
   type
-}) => type === "warnings" && css`
+}) => type === "warning" && css`
       color: var(--colorsSemanticCaution650);
     `}
   ${({
   type
-}) => type === "errors" && css`
+}) => type === "error" && css`
       color: var(--colorsSemanticNegative600);
     `}
 
@@ -57,20 +56,13 @@ export const StyledInternalSummary = styled.div`
     margin-right: 4px;
     ${({
   type
-}) => type === "warnings" && css`
+}) => type === "warning" && css`
         color: var(--colorsSemanticCaution650);
       `}
     ${({
   type
-}) => type === "errors" && css`
+}) => type === "error" && css`
         color: var(--colorsSemanticNegative600);
       `}
   }
-`;
-StyledFormSummary.propTypes = {
-  showSummary: PropTypes.bool,
-  fullWidth: PropTypes.bool
-};
-StyledInternalSummary.propTypes = {
-  type: PropTypes.oneOf(["errors", "warnings"])
-};
+`;

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

@@ -1,21 +1,36 @@
-export default Form;
-declare function Form({ children, saveButton, leftSideButtons, rightSideButtons, errorCount, warningCount, onSubmit, buttonAlignment, stickyFooter, fieldSpacing, noValidate, height, fullWidthButtons, ...rest }: {
-    [x: string]: any;
-    children: any;
-    saveButton: any;
-    leftSideButtons: any;
-    rightSideButtons: any;
-    errorCount: any;
-    warningCount: any;
-    onSubmit: any;
-    buttonAlignment?: string | undefined;
-    stickyFooter: any;
-    fieldSpacing?: number | undefined;
-    noValidate?: boolean | undefined;
-    height: any;
-    fullWidthButtons?: boolean | undefined;
-}): JSX.Element;
-declare namespace Form {
-    const propTypes: any;
-    const displayName: string;
+import React from "react";
+import { SpaceProps } from "styled-system";
+import { FormButtonAlignment } from "./form.config";
+export interface FormProps extends SpaceProps {
+    /** Alignment of buttons */
+    buttonAlignment?: FormButtonAlignment;
+    /** Child elements */
+    children?: React.ReactNode;
+    /** The total number of errors present in the form */
+    errorCount?: number;
+    /** Spacing between form fields, given number will be multiplied by base spacing unit (8) */
+    fieldSpacing?: 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7;
+    /** Additional buttons rendered on the left side of the save button */
+    leftSideButtons?: React.ReactNode;
+    /** Disable HTML5 validation */
+    noValidate?: boolean;
+    /** Callback passed to the form element */
+    onSubmit?: React.FormEventHandler;
+    /** Additional buttons rendered on the right side of the save button */
+    rightSideButtons?: React.ReactNode;
+    /** Save button to be rendered */
+    saveButton?: React.ReactNode;
+    /** Enables the sticky footer. */
+    stickyFooter?: boolean;
+    /** The total number of warnings present in the form */
+    warningCount?: number;
+    /** Height of the form (any valid CSS value) */
+    height?: string;
+    /** Applies styling for full width buttons. Please note that you will still need to pass the `fullWidth` prop to the button you compose */
+    fullWidthButtons?: boolean;
 }
+export declare const Form: {
+    ({ children, saveButton, leftSideButtons, rightSideButtons, errorCount, warningCount, onSubmit, buttonAlignment, stickyFooter, fieldSpacing, noValidate, height, fullWidthButtons, ...rest }: FormProps): JSX.Element;
+    displayName: string;
+};
+export default Form;