carbon-react 104.34.0 → 104.36.0

package/esm/components/grouped-character/grouped-character.component.d.ts

@@ -0,0 +1,23 @@
+export default GroupedCharacter;
+declare function GroupedCharacter({ defaultValue, groups, onBlur, onChange, separator: rawSeparator, value: externalValue, ...rest }: {
+    [x: string]: any;
+    defaultValue: any;
+    groups: any;
+    onBlur: any;
+    onChange: any;
+    separator: any;
+    value: any;
+}): JSX.Element;
+declare namespace GroupedCharacter {
+    namespace propTypes {
+        function separator(props: any, propName: any, componentName: any): Error | null;
+        const groups: PropTypes.Requireable<any[]>;
+        const value: PropTypes.Requireable<string>;
+        const defaultValue: PropTypes.Requireable<string>;
+        const onChange: PropTypes.Requireable<(...args: any[]) => any>;
+        const onBlur: PropTypes.Requireable<(...args: any[]) => any>;
+        const required: PropTypes.Requireable<boolean>;
+        const helpAriaLabel: PropTypes.Requireable<string>;
+    }
+}
+import PropTypes from "prop-types";

package/esm/components/grouped-character/grouped-character.component.js

@@ -0,0 +1,153 @@
+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 } from "react";
+import PropTypes from "prop-types";
+import styledSystemPropTypes from "@styled-system/prop-types";
+import Textbox from "../textbox";
+import { filterStyledSystemMarginProps } from "../../style/utils";
+import { generateGroups, toSum } from "./grouped-character.utils";
+const marginPropTypes = filterStyledSystemMarginProps(styledSystemPropTypes.space);
+
+const buildCustomTarget = ({
+  target
+}, value) => {
+  const {
+    name,
+    id
+  } = target;
+  return { ...(name && {
+      name
+    }),
+    ...(id && {
+      id
+    }),
+    value
+  };
+};
+
+const GroupedCharacter = ({
+  defaultValue,
+  groups,
+  onBlur,
+  onChange,
+  separator: rawSeparator,
+  value: externalValue,
+  ...rest
+}) => {
+  const [internalValue, setInternalValue] = useState(defaultValue || "");
+  const isControlled = externalValue !== undefined;
+  const separator = rawSeparator.substring(0, 1); // Ensure max length is 1
+
+  const maxRawLength = groups.reduce(toSum);
+
+  const formatValue = val => generateGroups(groups, val).join(separator);
+
+  const sanitizeValue = val => val.split(separator).join("").substring(0, maxRawLength);
+
+  const value = isControlled ? externalValue : internalValue;
+
+  const handleChange = ev => {
+    const {
+      target
+    } = ev;
+    const {
+      selectionEnd
+    } = target;
+    let newCursorPos = selectionEnd;
+    const rawValue = sanitizeValue(target.value);
+    const formattedValue = formatValue(rawValue);
+    const isLastPosition = target.value.length === newCursorPos;
+    const isAtOneBeyondSeparator = formattedValue[selectionEnd - 1] === separator;
+
+    if (isLastPosition) {
+      const targetValSeparatorCount = target.value.split(separator).length - 1;
+      const formatValSeparatorCount = formattedValue.split(separator).length - 1;
+      const separatorDiff = formatValSeparatorCount - targetValSeparatorCount;
+      newCursorPos += separatorDiff;
+    } else if (isAtOneBeyondSeparator) {
+      const isDeleting = value.length > rawValue.length;
+      newCursorPos += isDeleting ? -1 : 1;
+    }
+
+    ev.target = buildCustomTarget(ev, {
+      rawValue,
+      formattedValue
+    });
+    onChange(ev);
+
+    if (!isControlled) {
+      setInternalValue(rawValue);
+    }
+
+    setTimeout(() => target.setSelectionRange(newCursorPos, newCursorPos));
+  };
+
+  const handleBlur = ev => {
+    if (onBlur) {
+      const {
+        target
+      } = ev;
+      const rawValue = sanitizeValue(target.value);
+      const formattedValue = formatValue(rawValue);
+      ev.target = buildCustomTarget(ev, {
+        rawValue,
+        formattedValue
+      });
+      onBlur(ev);
+    }
+  };
+
+  const handleKeyPress = ev => {
+    const {
+      selectionStart,
+      selectionEnd
+    } = ev.target;
+    const hasSelection = selectionEnd - selectionStart > 0;
+
+    if (maxRawLength === value.length && !hasSelection) {
+      ev.preventDefault();
+    }
+  };
+
+  return /*#__PURE__*/React.createElement(Textbox, _extends({}, rest, {
+    value: value,
+    formattedValue: formatValue(value),
+    onChange: handleChange,
+    onBlur: handleBlur,
+    onKeyPress: handleKeyPress
+  }));
+};
+
+GroupedCharacter.propTypes = { ...marginPropTypes,
+
+  /** character to be used as separator - has to be a 1 character string */
+  separator: (props, propName, componentName) => {
+    if (typeof props[propName] !== "string" || props[propName].length > 1) {
+      return new Error(`Invalid prop ${propName} supplied to ${componentName}. Must be string of length 1.`);
+    }
+
+    return null;
+  },
+
+  /** pattern by which input value should be grouped */
+  groups: PropTypes.array,
+
+  /** Input value if component is meant to be used as a controlled component */
+  value: PropTypes.string,
+
+  /** Default input value if component is meant to be used as an uncontrolled component */
+  defaultValue: PropTypes.string,
+
+  /** on change handler which receives the event with object as a value containing rawValue and formattedValue */
+  onChange: PropTypes.func,
+
+  /** on blur handler which receives the event with object as a value containing rawValue and formattedValue */
+  onBlur: PropTypes.func,
+
+  /** Flag to configure component as mandatory */
+  required: PropTypes.bool,
+
+  /** Aria label for rendered help component */
+  helpAriaLabel: PropTypes.string
+};
+export default GroupedCharacter;

package/esm/components/grouped-character/grouped-character.d.ts

@@ -0,0 +1,23 @@
+import * as React from "react";
+import { TextboxProps } from "../textbox";
+
+export interface GroupedCharacterProps extends Omit<TextboxProps, "value"> {
+  /** Default input value if component is meant to be used as an uncontrolled component */
+  defaultValue?: string;
+  /** pattern by which input value should be grouped */
+  groups?: number[];
+  /** Handler for blur event */
+  onBlur?: (ev: React.FocusEvent<HTMLInputElement>) => void;
+  /** Handler for change event if input is meant to be used as a controlled component */
+  onChange?: (ev: React.ChangeEvent<HTMLInputElement>) => void;
+  /** Flag to configure component as mandatory */
+  required?: boolean;
+  /** character to be used as separator - has to be a 1 character string */
+  separator?: string;
+  /** Input value if component is meant to be used as a controlled component */
+  value?: string;
+}
+
+declare function GroupedCharacter(props: GroupedCharacterProps): JSX.Element;
+
+export default GroupedCharacter;

package/esm/components/grouped-character/grouped-character.utils.d.ts

@@ -0,0 +1,2 @@
+export function toSum(acc: any, i: any): any;
+export function generateGroups(groups: any, rawValue: any): any;

package/esm/components/grouped-character/grouped-character.utils.js

@@ -0,0 +1,8 @@
+export const toSum = (acc, i) => acc + i;
+export const generateGroups = (groups, rawValue) => {
+  return groups.reduce((acc, group, index, src) => {
+    const soFar = src.slice(0, index).reduce(toSum, 0);
+    const toAdd = rawValue.slice(soFar, soFar + group);
+    return toAdd ? [...acc, toAdd] : acc;
+  }, []);
+};

package/esm/components/grouped-character/index.d.ts

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

package/esm/components/grouped-character/index.js

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

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

@@ -0,0 +1,71 @@
+export default Heading;
+declare class Heading extends React.Component<any, any, any> {
+    constructor(props: any);
+    constructor(props: any, context: any);
+    /**
+     * Returns the help component.
+     *
+     * @method help
+     * @return {Object} JSX
+     */
+    get help(): Object;
+    /**
+     * Returns the back button.
+     *
+     * @method back
+     * @return {Object} JSX
+     */
+    get back(): Object;
+    /**
+     * Returns the subheader.
+     *
+     * @method subheader
+     * @return {Object} JSX
+     */
+    get subheader(): Object;
+    /**
+     * Returns the separator if enabled and needed.
+     *
+     * @method separator
+     * @return {Object} JSX
+     */
+    get separator(): Object;
+    /**
+     * Returns the separator if enabled and needed.
+     *
+     * @method divider
+     * @return {Object} JSX
+     */
+    get divider(): Object;
+    /**
+     * Returns pills if provided
+     *
+     * @method pills
+     * @return {Object} JSX
+     */
+    get pills(): Object;
+}
+declare namespace Heading {
+    namespace propTypes {
+        const children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        const title: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        const titleId: PropTypes.Requireable<string>;
+        const subheader: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        const subtitleId: PropTypes.Requireable<string>;
+        const help: PropTypes.Requireable<string>;
+        const helpLink: PropTypes.Requireable<string>;
+        const backLink: PropTypes.Requireable<string | ((...args: any[]) => any)>;
+        const divider: PropTypes.Requireable<boolean>;
+        const separator: PropTypes.Requireable<boolean>;
+        const pills: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        const helpAriaLabel: PropTypes.Requireable<string>;
+    }
+    namespace defaultProps {
+        const divider_1: boolean;
+        export { divider_1 as divider };
+        const separator_1: boolean;
+        export { separator_1 as separator };
+    }
+}
+import React from "react";
+import PropTypes from "prop-types";

package/esm/components/heading/heading.component.js

@@ -0,0 +1,255 @@
+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); }
+
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
+
+function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }
+
+function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) _setPrototypeOf(subClass, superClass); }
+
+function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
+
+function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
+
+function _possibleConstructorReturn(self, call) { if (call && (typeof call === "object" || typeof call === "function")) { return call; } return _assertThisInitialized(self); }
+
+function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
+
+function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
+
+function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
+
+import React from "react";
+import PropTypes from "prop-types";
+import styledSystemPropTypes from "@styled-system/prop-types";
+import { filterStyledSystemMarginProps } from "../../style/utils";
+import tagComponent from "../../__internal__/utils/helpers/tags/tags";
+import { StyledHeading, StyledHeadingIcon, StyledSubHeader, StyledHeader, StyledSeparator, StyledHeaderHelp, StyledHeadingTitle, StyledDivider, StyledHeaderContent, StyledHeadingBackButton, StyledHeadingPills } from "./heading.style";
+const marginPropTypes = filterStyledSystemMarginProps(styledSystemPropTypes.space);
+
+let Heading = /*#__PURE__*/function (_React$Component) {
+  _inherits(Heading, _React$Component);
+
+  var _super = _createSuper(Heading);
+
+  function Heading() {
+    _classCallCheck(this, Heading);
+
+    return _super.apply(this, arguments);
+  }
+
+  _createClass(Heading, [{
+    key: "help",
+    get:
+    /**
+     * Returns the help component.
+     *
+     * @method help
+     * @return {Object} JSX
+     */
+    function () {
+      if (!this.props.help && !this.props.helpLink) {
+        return null;
+      }
+
+      return /*#__PURE__*/React.createElement(StyledHeaderHelp, {
+        "data-element": "help",
+        tooltipPosition: "right",
+        href: this.props.helpLink,
+        ariaLabel: this.props.helpAriaLabel
+      }, this.props.help);
+    }
+    /**
+     * Returns the back button.
+     *
+     * @method back
+     * @return {Object} JSX
+     */
+
+  }, {
+    key: "back",
+    get: function () {
+      if (!this.props.backLink) {
+        return null;
+      }
+
+      let props;
+
+      if (typeof this.props.backLink === "string") {
+        props = {
+          href: this.props.backLink
+        };
+      } else {
+        props = {
+          onClick: this.props.backLink
+        };
+      }
+
+      return /*#__PURE__*/React.createElement(StyledHeadingBackButton // this event allows an element to be focusable on click event on IE
+      , _extends({
+        onMouseDown: e => e.currentTarget.focus(),
+        "data-element": "back"
+      }, props), /*#__PURE__*/React.createElement(StyledHeadingIcon, {
+        type: "chevron_left",
+        divider: this.props.divider
+      }));
+    }
+    /**
+     * Returns the subheader.
+     *
+     * @method subheader
+     * @return {Object} JSX
+     */
+
+  }, {
+    key: "subheader",
+    get: function () {
+      if (!this.props.subheader) {
+        return null;
+      }
+
+      return /*#__PURE__*/React.createElement(StyledSubHeader, {
+        "data-element": "subtitle",
+        id: this.props.subtitleId,
+        hasBackLink: !!this.props.backLink,
+        hasSeparator: this.props.separator
+      }, this.props.subheader);
+    }
+    /**
+     * Returns the separator if enabled and needed.
+     *
+     * @method separator
+     * @return {Object} JSX
+     */
+
+  }, {
+    key: "separator",
+    get: function () {
+      return this.props.separator ? /*#__PURE__*/React.createElement(StyledSeparator, null) : null;
+    }
+    /**
+     * Returns the separator if enabled and needed.
+     *
+     * @method divider
+     * @return {Object} JSX
+     */
+
+  }, {
+    key: "divider",
+    get: function () {
+      return this.props.divider ? /*#__PURE__*/React.createElement(StyledDivider, {
+        "data-element": "divider"
+      }) : null;
+    }
+    /**
+     * Returns pills if provided
+     *
+     * @method pills
+     * @return {Object} JSX
+     */
+
+  }, {
+    key: "pills",
+    get: function () {
+      return this.props.pills ? /*#__PURE__*/React.createElement(StyledHeadingPills, {
+        "data-element": "pills"
+      }, this.props.pills) : null;
+    }
+    /**
+     * @method render
+     * @return {Object} JSX
+     */
+
+  }, {
+    key: "render",
+    value: function render() {
+      if (!this.props.title) {
+        return null;
+      }
+
+      const marginProps = filterStyledSystemMarginProps(this.props);
+      return /*#__PURE__*/React.createElement(StyledHeading, _extends({}, tagComponent("heading", this.props), marginProps), /*#__PURE__*/React.createElement(StyledHeader, {
+        "data-element": "header-container",
+        divider: this.props.divider,
+        subheader: this.props.subheader,
+        hasBackLink: !!this.props.backLink
+      }, this.back, /*#__PURE__*/React.createElement(StyledHeaderContent, null, /*#__PURE__*/React.createElement(StyledHeadingTitle, {
+        withMargin: this.props.pills || this.props.help,
+        variant: "h1",
+        "data-element": "title",
+        id: this.props.titleId
+      }, this.props.title), this.help, this.pills), this.separator, this.subheader), this.divider, this.props.children);
+    }
+  }]);
+
+  return Heading;
+}(React.Component);
+
+Heading.propTypes = { ...marginPropTypes,
+
+  /**
+   * Children elements
+   */
+  children: PropTypes.node,
+
+  /**
+   * Defines the title for the heading.
+   */
+  title: PropTypes.node,
+
+  /**
+   * Defines the title id for the heading.
+   */
+  titleId: PropTypes.string,
+
+  /**
+   * Defines the subheader for the heading.
+   */
+  subheader: PropTypes.node,
+
+  /**
+   * Defines the subtitle id for the heading.
+   */
+  subtitleId: PropTypes.string,
+
+  /**
+   * Defines the help text for the heading.
+   */
+  help: PropTypes.string,
+
+  /**
+   * Defines the help link for the heading.
+   */
+  helpLink: PropTypes.string,
+
+  /**
+   * Defines the a href for the back link.
+   */
+  backLink: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
+
+  /**
+   * Adds a divider below the heading and the content.
+   */
+  divider: PropTypes.bool,
+
+  /**
+   * Adds a separator between the title and the subheader.
+   */
+  separator: PropTypes.bool,
+
+  /**
+   * Pills that will be added after the title.
+   */
+  pills: PropTypes.node,
+
+  /**
+   * Aria label for rendered help component
+   */
+  helpAriaLabel: PropTypes.string
+};
+Heading.defaultProps = {
+  divider: true,
+  separator: false
+};
+export default Heading;

package/esm/components/heading/heading.d.ts

@@ -0,0 +1,31 @@
+import * as React from "react";
+import { MarginProps } from "styled-system";
+
+export interface HeadingProps extends MarginProps {
+  /** Custom className */
+  className?: string;
+  /** Defines the title for the heading. */
+  title?: React.ReactNode;
+  /** Defines the title id for the heading. */
+  titleId?: string;
+  /** Defines the subheader for the heading. */
+  subheader?: React.ReactNode;
+  /** Defines the subtitle id for the heading. */
+  subtitleId?: string;
+  /** Defines the help text for the heading. */
+  help?: string;
+  /** Defines the help link for the heading. */
+  helpLink?: string;
+  /** Defines the a href for the back link. */
+  backLink?: string | React.MouseEventHandler<HTMLButtonElement>;
+  /** Adds a divider below the heading and the content. */
+  divider?: boolean;
+  /** Adds a separator between the title and the subheader. */
+  separator?: boolean;
+  /** Pills that will be added after the title. */
+  pills?: React.ReactNode;
+}
+
+declare class Heading extends React.Component<HeadingProps> {}
+
+export default Heading;

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

@@ -0,0 +1,15 @@
+export const StyledHeadingIcon: import("styled-components").StyledComponent<typeof Icon, any, {}, never>;
+export const StyledHeading: import("styled-components").StyledComponent<"div", any, {}, never>;
+export const StyledSubHeader: import("styled-components").StyledComponent<"div", any, {}, never>;
+export const StyledHeader: import("styled-components").StyledComponent<"div", any, {}, never>;
+export const StyledSeparator: import("styled-components").StyledComponent<"hr", any, {}, never>;
+export const StyledHeaderHelp: import("styled-components").StyledComponent<typeof Help, any, {}, never>;
+export const StyledHeadingTitle: import("styled-components").StyledComponent<typeof Typography, any, {}, never>;
+export const StyledDivider: import("styled-components").StyledComponent<({ adaptiveMxBreakpoint, ml, mr, ...rest }: import("../hr/hr.component").HrProps) => JSX.Element, any, {}, never>;
+export const StyledHeaderContent: import("styled-components").StyledComponent<"div", any, {}, never>;
+export const StyledHeadingBackButton: import("styled-components").StyledComponent<typeof Link, any, {}, never>;
+export const StyledHeadingPills: import("styled-components").StyledComponent<"span", any, {}, never>;
+import Icon from "../icon";
+import Help from "../help";
+import Typography from "../typography";
+import Link from "../link";