carbon-react 104.34.0 → 104.36.0

package/esm/components/decimal/decimal.component.js

@@ -0,0 +1,290 @@
+function _extends() { _extends = Object.assign || 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, { useState, useEffect, useRef, useCallback, useContext } from "react";
+import PropTypes from "prop-types";
+import styledSystemPropTypes from "@styled-system/prop-types";
+import invariant from "invariant";
+import Textbox from "../textbox";
+import { filterStyledSystemMarginProps } from "../../style/utils";
+import LocaleContext from "../../__internal__/i18n-context";
+import usePrevious from "../../hooks/__internal__/usePrevious";
+const marginPropTypes = filterStyledSystemMarginProps(styledSystemPropTypes.space);
+
+const Decimal = ({
+  align,
+  defaultValue,
+  precision,
+  inputWidth,
+  readOnly,
+  onChange,
+  onBlur,
+  onKeyPress,
+  id,
+  name,
+  allowEmptyValue,
+  required,
+  locale,
+  value,
+  ...rest
+}) => {
+  const l = useContext(LocaleContext);
+  const emptyValue = allowEmptyValue ? "" : "0.00";
+
+  const getSafeValueProp = initialValue => {
+    // We're intentionally preventing the use of number values to help prevent any unintentional rounding issues
+    invariant(typeof initialValue === "string", "Decimal `value` prop must be a string");
+
+    if (initialValue && !allowEmptyValue) {
+      invariant(initialValue !== "", "Decimal `value` must not be an empty string. Please use `allowEmptyValue` or `0.00`");
+    }
+
+    return initialValue;
+  };
+
+  const getSeparator = useCallback(separatorType => {
+    const numberWithGroupAndDecimalSeparator = 10000.1;
+    return Intl.NumberFormat(locale || l.locale()).formatToParts(numberWithGroupAndDecimalSeparator).find(part => part.type === separatorType).value;
+  }, [l, locale]);
+  const isNaN = useCallback(valueToTest => {
+    return Number.isNaN(Number(valueToTest));
+  }, []);
+  /**
+   * Format a user defined value
+   */
+
+  const formatValue = useCallback(valueToFormat => {
+    if (isNaN(valueToFormat)) {
+      return valueToFormat;
+    }
+    /* Guards against any white-space only strings like "   " being 
+     mishandled and returned as `NaN` for the value displayed in the textbox */
+
+
+    if (valueToFormat === "" || valueToFormat.match(/\s+/g)) {
+      return valueToFormat;
+    }
+
+    const separator = getSeparator("decimal");
+    const [integer, remainder] = valueToFormat.split(".");
+    const formattedInteger = Intl.NumberFormat(locale || l.locale(), {
+      maximumFractionDigits: 0
+    }).format(integer);
+    let formattedNumber = formattedInteger;
+
+    if ((remainder === null || remainder === void 0 ? void 0 : remainder.length) > precision) {
+      formattedNumber += `${separator + remainder}`;
+    } else if ((remainder === null || remainder === void 0 ? void 0 : remainder.length) <= precision) {
+      formattedNumber += `${separator + remainder + "0".repeat(precision - remainder.length)}`;
+    } else {
+      formattedNumber += `${precision ? separator + "0".repeat(precision) : ""}`;
+    }
+
+    return formattedNumber;
+  }, [getSeparator, isNaN, l, locale, precision]);
+  /**
+   * Determine if the precision value has changed from the previous ref value for precision
+   */
+
+  const prevPrecisionValue = usePrevious(precision);
+  useEffect(() => {
+    if (prevPrecisionValue && prevPrecisionValue !== precision) {
+      // eslint-disable-next-line no-console
+      console.error("Decimal `precision` prop has changed value. Changing the Decimal `precision` prop has no effect.");
+    }
+  }, [precision, prevPrecisionValue]);
+  const removeDelimiters = useCallback(valueToFormat => {
+    const delimiterMatcher = new RegExp(`[\\${getSeparator("group")} ]*`, "g");
+    return valueToFormat.replace(delimiterMatcher, "");
+  }, [getSeparator]);
+  /**
+   * Convert raw input to a standard decimal format
+   */
+
+  const toStandardDecimal = useCallback(i18nValue => {
+    const valueWithoutNBS = getSeparator("group").match(/\s+/) && !i18nValue.match(/\s{2,}/) ? i18nValue.replace(/\s+/g, "") : i18nValue;
+    /* If a value is passed in that is a number but has too many delimiters in succession, we want to handle this
+    value without formatting it or removing delimiters. We also want to consider that,
+    if a value consists of only delimiters, we want to treat that 
+    value in the same way as if the value was NaN. We want to pass this value to the 
+    formatValue function, before the delimiters can be removed. */
+
+    const errorsWithDelimiter = new RegExp(`([^A-Za-z0-9]{2,})|(^[^A-Za-z0-9-]+)|([^0-9a-z-,.])|([^0-9-,.]+)|([W,.])$`, "g");
+    const separator = getSeparator("decimal");
+    const separatorRegex = new RegExp(separator === "." ? `\\${separator}` : separator, "g");
+
+    if (valueWithoutNBS.match(errorsWithDelimiter) || (valueWithoutNBS.match(separatorRegex) || []).length > 1) {
+      return valueWithoutNBS;
+    }
+
+    const withoutDelimiters = removeDelimiters(valueWithoutNBS);
+    return withoutDelimiters.replace(new RegExp(`\\${separator}`, "g"), ".");
+  }, [getSeparator, removeDelimiters]);
+  const decimalValue = getSafeValueProp(defaultValue || value || emptyValue);
+  const [stateValue, setStateValue] = useState(isNaN(toStandardDecimal(decimalValue)) ? decimalValue : formatValue(decimalValue));
+
+  const createEvent = (formatted, raw) => {
+    return {
+      target: {
+        name,
+        id,
+        value: {
+          formattedValue: formatValue(toStandardDecimal(formatted)),
+          rawValue: raw || toStandardDecimal(formatted)
+        }
+      }
+    };
+  };
+
+  const handleOnChange = ev => {
+    const {
+      value: val
+    } = ev.target;
+    setStateValue(val);
+    if (onChange) onChange(createEvent(val));
+  };
+
+  const handleOnBlur = ev => {
+    const {
+      value: updatedValue
+    } = ev.target;
+    let event;
+
+    if (updatedValue) {
+      const standardVisible = toStandardDecimal(updatedValue);
+      const formattedValue = isNaN(standardVisible) ? updatedValue : formatValue(standardVisible);
+      event = createEvent(formattedValue, standardVisible);
+      setStateValue(formattedValue);
+    } else {
+      event = createEvent(emptyValue);
+      setStateValue(emptyValue);
+    }
+
+    if (onBlur) onBlur(event);
+  };
+
+  const isControlled = value !== undefined;
+  const prevControlledRef = useRef();
+  useEffect(() => {
+    const message = "Input elements should not switch from uncontrolled to controlled (or vice versa). " + "Decide between using a controlled or uncontrolled input element for the lifetime of the component";
+    invariant(prevControlledRef.current !== isControlled, message);
+    prevControlledRef.current = isControlled;
+  }, [isControlled]);
+  useEffect(() => {
+    const unformattedValue = toStandardDecimal(stateValue);
+
+    if (isControlled) {
+      const valueProp = getSafeValueProp(value);
+
+      if (unformattedValue !== valueProp) {
+        setStateValue(formatValue(value));
+      }
+    } // eslint-disable-next-line react-hooks/exhaustive-deps
+
+  }, [value]);
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Textbox, _extends({
+    onKeyPress: onKeyPress,
+    align: align,
+    readOnly: readOnly,
+    required: required,
+    inputWidth: inputWidth,
+    onChange: handleOnChange,
+    onBlur: handleOnBlur,
+    value: stateValue,
+    "data-component": "decimal"
+  }, rest)), /*#__PURE__*/React.createElement("input", {
+    name: name,
+    value: toStandardDecimal(stateValue),
+    type: "hidden",
+    "data-component": "hidden-input"
+  }));
+};
+
+Decimal.propTypes = {
+  /** Styled-system margin props */
+  ...marginPropTypes,
+
+  /** Identifier used for testing purposes, applied to the root element of the component. */
+  "data-component": PropTypes.string,
+
+  /**
+   * The default value alignment on the input
+   */
+  align: PropTypes.oneOf(["right", "left"]),
+
+  /**
+   * The decimal precision of the value in the input
+   */
+  // eslint-disable-next-line consistent-return
+  precision: props => {
+    if (!Number.isInteger(props.precision) || props.precision < 0 || props.precision > 15) {
+      return new Error("Precision prop must be a number greater than 0 or equal to or less than 15.");
+    }
+  },
+
+  /**
+   * The width of the input as a percentage
+   */
+  inputWidth: PropTypes.number,
+
+  /**
+   * If true, the component will be read-only
+   */
+  readOnly: PropTypes.bool,
+
+  /**
+   * The default value of the input if it's meant to be used as an uncontrolled component
+   */
+  defaultValue: PropTypes.string,
+
+  /**
+   * The value of the input if it's used as a controlled component
+   */
+  value: PropTypes.string,
+
+  /**
+   * Handler for change event if input is meant to be used as a controlled component
+   */
+  onChange: PropTypes.func,
+
+  /**
+   * Handler for blur event
+   */
+  onBlur: PropTypes.func,
+
+  /**
+   * Handler for key press event
+   */
+  onKeyPress: PropTypes.func,
+
+  /**
+   * The input name
+   */
+  name: PropTypes.string,
+
+  /**
+   * The input id
+   */
+  id: PropTypes.string,
+
+  /**
+   * Allow an empty value instead of defaulting to 0.00
+   */
+  allowEmptyValue: PropTypes.bool,
+
+  /** Flag to configure component as mandatory */
+  required: PropTypes.bool,
+
+  /**
+   * Override the locale string, default from I18nProvider
+   */
+  locale: PropTypes.string,
+
+  /** Aria label for rendered help component */
+  helpAriaLabel: PropTypes.string
+};
+Decimal.defaultProps = {
+  precision: 2,
+  allowEmptyValue: false,
+  align: "right"
+};
+export default Decimal;

package/esm/components/decimal/decimal.d.ts

@@ -0,0 +1,37 @@
+import * as React from "react";
+import { CommonTextboxProps } from "../textbox";
+
+export interface DecimalProps extends CommonTextboxProps {
+  /** Text alignment of the label */
+  align?: "left" | "right";
+  /** Allow an empty value instead of defaulting to 0.00 */
+  allowEmptyValue?: boolean;
+  /** The default value of the input if it's meant to be used as an uncontrolled component */
+  defaultValue?: string;
+  /** The input id */
+  id?: string;
+  /** The width of the input as a percentage */
+  inputWidth?: number;
+  /** Handler for change event if input is meant to be used as a controlled component */
+  onChange?: (ev: React.ChangeEvent<HTMLInputElement>) => void;
+  /** Handler for blur event */
+  onBlur?: (ev: React.FocusEvent<HTMLInputElement>) => void;
+  /** Handler for key press event */
+  onKeyPress?: (ev: React.KeyboardEvent<HTMLInputElement>) => void;
+  /** The input name */
+  name?: string;
+  /** The decimal precision of the value in the input */
+  precision?: number;
+  /** If true, the component will be read-only */
+  readOnly?: boolean;
+  /** Flag to configure component as mandatory */
+  required?: boolean;
+  /** The value of the input if it's used as a controlled component */
+  value?: string;
+  /** The locale string - default en */
+  locale?: string;
+}
+
+declare class Decimal extends React.Component<DecimalProps> {}
+
+export default Decimal;

package/esm/components/decimal/index.d.ts

@@ -0,0 +1 @@
+export { default } from "./decimal";

package/esm/components/decimal/index.js

@@ -0,0 +1 @@
+export { default } from "./decimal.component";

package/esm/components/definition-list/__internal__/dl.context.d.ts

@@ -0,0 +1,3 @@
+declare var _default: React.Context<{}>;
+export default _default;
+import React from "react";

package/esm/components/definition-list/__internal__/dl.context.js

@@ -0,0 +1,2 @@
+import React from "react";
+export default /*#__PURE__*/React.createContext({});

package/esm/components/definition-list/dd.component.d.ts

@@ -0,0 +1,8 @@
+export default Dd;
+declare function Dd({ children, ...rest }: {
+    [x: string]: any;
+    children: any;
+}): JSX.Element;
+declare namespace Dd {
+    const propTypes: any;
+}

package/esm/components/definition-list/dd.component.js

@@ -0,0 +1,25 @@
+function _extends() { _extends = Object.assign || 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 from "react";
+import propTypes from "@styled-system/prop-types";
+import PropTypes from "prop-types";
+import { StyledDd } from "./definition-list.style";
+
+const Dd = ({
+  children,
+  ...rest
+}) => {
+  const {
+    mb
+  } = rest;
+  return /*#__PURE__*/React.createElement(StyledDd, _extends({
+    mb: mb || 2
+  }, rest), children);
+};
+
+Dd.propTypes = { ...propTypes.space,
+
+  /** Prop to render string or node in the `<Dd></Dd>` tags */
+  children: PropTypes.node.isRequired
+};
+export default Dd;

package/esm/components/definition-list/dd.d.ts

@@ -0,0 +1,11 @@
+import * as React from "react";
+import { SpaceProps } from "styled-system";
+
+export interface DdProps extends SpaceProps {
+  /** Prop for what will render in the `<Dd></Dd>` tags */
+  children: React.ReactNode;
+}
+
+declare function DdComponent(props: DdProps): JSX.Element;
+
+export default DdComponent;

package/esm/components/definition-list/definition-list.style.d.ts

@@ -0,0 +1,5 @@
+export const StyledDl: import("styled-components").StyledComponent<"dl", any, {}, never>;
+export const StyledDtDiv: import("styled-components").StyledComponent<"div", any, {}, never>;
+export const StyledDdDiv: import("styled-components").StyledComponent<"div", any, {}, never>;
+export const StyledDt: import("styled-components").StyledComponent<"dt", any, {}, never>;
+export const StyledDd: import("styled-components").StyledComponent<"dd", any, {}, never>;

package/esm/components/definition-list/definition-list.style.js

@@ -0,0 +1,77 @@
+import styled, { css } from "styled-components";
+import { space } from "styled-system";
+import StyledButton from "../button/button.style";
+import { StyledLink } from "../link/link.style";
+import { baseTheme } from "../../style/themes";
+export const StyledDl = styled.dl`
+  ${space}
+
+  ${({
+  asSingleColumn
+}) => css`
+    ${!asSingleColumn && css`
+      display: grid;
+      grid-template-rows: auto;
+      grid-template-columns: ${({
+  w
+}) => `${w}% auto;`};
+    `}
+    ${asSingleColumn && css`
+      line-height: 21px;
+    `}
+  `}
+
+  width: 100%;
+  height: auto;
+  background-color: transparent;
+`;
+StyledDl.defaultProps = {
+  theme: baseTheme
+};
+export const StyledDtDiv = styled.div`
+  ${space}
+  ${({
+  dtTextAlign
+}) => css`
+    text-align: ${dtTextAlign};
+  `}
+`;
+StyledDtDiv.defaultProps = {
+  theme: baseTheme
+};
+export const StyledDdDiv = styled.div`
+  ${({
+  ddTextAlign
+}) => css`
+    text-align: ${ddTextAlign};
+  `}
+`;
+export const StyledDt = styled.dt`
+  ${space}
+  font-size: 14px;
+  font-weight: 700;
+  color: var(--colorsUtilityYin090);
+`;
+StyledDt.defaultProps = {
+  theme: baseTheme
+};
+export const StyledDd = styled.dd`
+  font-size: 14px;
+  font-weight: 700;
+  color: var(--colorsUtilityYin065);
+  margin-left: 0px;
+
+  ${StyledButton} {
+    padding: 0;
+    border: none;
+  }
+
+  ${StyledLink} {
+    a,
+    button {
+      font-weight: 700px;
+      text-decoration: none;
+    }
+  }
+  ${space}
+`;

package/esm/components/definition-list/dl.component.d.ts

@@ -0,0 +1,12 @@
+export default Dl;
+declare function Dl({ children, w, dtTextAlign, ddTextAlign, asSingleColumn, ...rest }: {
+    [x: string]: any;
+    children: any;
+    w?: number | undefined;
+    dtTextAlign?: string | undefined;
+    ddTextAlign?: string | undefined;
+    asSingleColumn?: boolean | undefined;
+}): JSX.Element;
+declare namespace Dl {
+    const propTypes: any;
+}

package/esm/components/definition-list/dl.component.js

@@ -0,0 +1,92 @@
+function _extends() { _extends = Object.assign || 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 from "react";
+import propTypes from "@styled-system/prop-types";
+import PropTypes from "prop-types";
+import { StyledDl, StyledDtDiv, StyledDdDiv } from "./definition-list.style";
+import Dt from "./dt.component";
+import Dd from "./dd.component";
+import DlContext from "./__internal__/dl.context";
+
+const Dl = ({
+  children,
+  w = 50,
+  dtTextAlign = "right",
+  ddTextAlign = "left",
+  asSingleColumn = false,
+  ...rest
+}) => {
+  const dlComponent = [];
+  const listChildren = React.Children.toArray(children);
+  let key = "";
+
+  const composeDlComponent = childrenArray => {
+    let dtLabel;
+    let ddContent = [];
+    let isLastChild;
+    let nextItemIsNotDd;
+    childrenArray.forEach((child, index) => {
+      if (child.type === React.Fragment) {
+        composeDlComponent(child.props.children);
+      } else {
+        if (child.type === Dt) {
+          dtLabel = child;
+        }
+
+        if (child.type === Dd) {
+          ddContent.push(child);
+        }
+
+        isLastChild = index === childrenArray.length - 1;
+        nextItemIsNotDd = !isLastChild && [Dt, React.Fragment].includes(childrenArray[index + 1].type);
+
+        if (dtLabel && (nextItemIsNotDd || isLastChild)) {
+          key = `${key + 1}`;
+          dlComponent.push( /*#__PURE__*/React.createElement(React.Fragment, {
+            key: child.props.key || key
+          }, /*#__PURE__*/React.createElement(StyledDtDiv, {
+            dtTextAlign: dtTextAlign
+          }, dtLabel), /*#__PURE__*/React.createElement(StyledDdDiv, {
+            ddTextAlign: ddTextAlign
+          }, ddContent)));
+          ddContent = [];
+        }
+      }
+    });
+    return dlComponent;
+  };
+
+  return /*#__PURE__*/React.createElement(StyledDl, _extends({
+    w: w,
+    "data-component": "dl",
+    asSingleColumn: asSingleColumn
+  }, rest), /*#__PURE__*/React.createElement(DlContext.Provider, {
+    value: {
+      asSingleColumn
+    }
+  }, composeDlComponent(listChildren)));
+};
+
+Dl.propTypes = { ...propTypes.space,
+
+  /** This string will specify the text align styling of the `<dt></dt>`. */
+  dtTextAlign: PropTypes.oneOf(["left", "center", "right"]),
+
+  /** This string will specify the text align styling of the `<dd></dd>`. */
+  ddTextAlign: PropTypes.oneOf(["left", "center", "right"]),
+
+  /** This value will specify the width of the `StyledDtDiv` as a percentage. The remaining space will be taken up
+      by the `StyledDdDiv`. This prop has no effect when `asSingleColumn` is set.
+   */
+  w: PropTypes.number,
+
+  /**
+   * @private
+   * @ignore
+   */
+  children: PropTypes.node.isRequired,
+
+  /** Render the DefinitionList as a single column */
+  asSingleColumn: PropTypes.bool
+};
+export default Dl;

package/esm/components/definition-list/dl.d.ts

@@ -0,0 +1,19 @@
+import * as React from "react";
+import { SpaceProps } from "styled-system";
+
+export interface DlProps extends SpaceProps {
+  /** This string will specify the text align styling of the `<dt></dt>`. */
+  dtTextAlign?: "left" | "center" | "right";
+  /** This string will specify the text align styling of the `<dd></dd>`. */
+  ddTextAlign?: "left" | "center" | "right";
+  /** This value will specify the width of the `StyledDtDiv` as a percentage. */
+  w?: number;
+  /** prop to render children. */
+  children: React.ReactNode;
+  /** Render the DefinitionList as a single column */
+  asSingleColumn?: boolean;
+}
+
+declare function DlComponent(props: DlProps): JSX.Element;
+
+export default DlComponent;

package/esm/components/definition-list/dt.component.d.ts

@@ -0,0 +1,8 @@
+export default Dt;
+declare function Dt({ children, ...rest }: {
+    [x: string]: any;
+    children: any;
+}): JSX.Element;
+declare namespace Dt {
+    const propTypes: any;
+}

package/esm/components/definition-list/dt.component.js

@@ -0,0 +1,32 @@
+function _extends() { _extends = Object.assign || 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, { useContext } from "react";
+import propTypes from "@styled-system/prop-types";
+import PropTypes from "prop-types";
+import { StyledDt } from "./definition-list.style";
+import DlContext from "./__internal__/dl.context";
+
+const Dt = ({
+  children,
+  ...rest
+}) => {
+  const {
+    asSingleColumn
+  } = useContext(DlContext);
+  const {
+    mb,
+    pr
+  } = rest;
+  return /*#__PURE__*/React.createElement(StyledDt, _extends({
+    "data-element": "dt",
+    mb: mb || asSingleColumn ? undefined : 2,
+    pr: pr || asSingleColumn ? undefined : 3
+  }, rest), children);
+};
+
+Dt.propTypes = { ...propTypes.space,
+
+  /** Child elements */
+  children: PropTypes.node.isRequired
+};
+export default Dt;

package/esm/components/definition-list/dt.d.ts

@@ -0,0 +1,10 @@
+import { SpaceProps } from "styled-system";
+
+export interface DtProps extends SpaceProps {
+  /** prop for dt text */
+  children: string;
+}
+
+declare function DtComponent(props: DtProps): JSX.Element;
+
+export default DtComponent;

package/esm/components/definition-list/index.d.ts

@@ -0,0 +1,3 @@
+export { default as Dl } from "./dl";
+export { default as Dd } from "./dd";
+export { default as Dt } from "./dt";

package/esm/components/definition-list/index.js

@@ -0,0 +1,3 @@
+export { default as Dt } from "./dt.component";
+export { default as Dd } from "./dd.component";
+export { default as Dl } from "./dl.component";

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

@@ -0,0 +1,17 @@
+export default Detail;
+declare function Detail({ className, icon, footnote, children, ...rest }: {
+    [x: string]: any;
+    className: any;
+    icon: any;
+    footnote: any;
+    children: any;
+}): JSX.Element;
+declare namespace Detail {
+    namespace propTypes {
+        const className: PropTypes.Requireable<string>;
+        const icon: PropTypes.Requireable<string>;
+        const footnote: PropTypes.Requireable<string>;
+        const children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+    }
+}
+import PropTypes from "prop-types";