carbon-react 104.34.1 → 104.37.0

package/esm/components/tabs/tabs.d.ts

@@ -0,0 +1,47 @@
+import * as React from "react";
+import { MarginProps } from "styled-system";
+import Tab from "./tab";
+
+export interface TabsProps extends MarginProps {
+  className?: string;
+  /** Prevent rendering of hidden tabs, by default this is set to true and therefore all tabs will be rendered */
+  renderHiddenTabs?: boolean;
+  /** Allows manual control over the currently selected tab. */
+  selectedTabId?: string;
+  /** The child elements of Tabs need to be Tab components. */
+  children: React.ReactNode[] | React.ReactNode;
+  /** Sets the alignment of the tab titles. Possible values include. */
+  align?: "left" | "right";
+  /** A callback for when a tab is changed. You can use this to manually control
+   * tab changing or to fire other events when a tab is changed.
+   */
+  onTabChange?: (tabId: string) => void;
+  /** The position of the tab title. */
+  position?: "top" | "left";
+  /** Sets size of the tab titles. */
+  size?: "default" | "large";
+  /** Sets the divider of the tab titles header to extend the full width of the parent. */
+  extendedLine?: boolean;
+  /** Adds a combination of borders to the tab titles. */
+  borders?: "off" | "on" | "no left side" | "no right side" | "no sides";
+  /** Adds an alternate styling variant to the tab titles. */
+  variant?: "default" | "alternate";
+  /** sets width to the tab headers. Can be any valid CSS string.
+   * The headerWidth prop works only for `position="left"`
+   */
+  headerWidth?: string;
+  /** An object to support overriding validation statuses, when the Tabs have custom targets for example.
+   * The `id` property should match the `tabId`s for the rendered Tabs.
+   */
+  validationStatusOverride?: {
+    id?: {
+      error?: boolean;
+      warning?: boolean;
+      info?: boolean;
+    };
+  };
+}
+
+declare function Tabs(props: TabsProps): JSX.Element;
+
+export { Tabs, Tab };

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

@@ -0,0 +1,2 @@
+export default StyledTabs;
+declare const StyledTabs: import("styled-components").StyledComponent<"div", any, {}, never>;

package/esm/components/tabs/tabs.style.js

@@ -0,0 +1,44 @@
+import styled, { css } from "styled-components";
+import { margin } from "styled-system";
+import PropTypes from "prop-types";
+import BaseTheme from "../../style/themes/base";
+import { StyledTabsHeaderWrapper } from "./__internal__/tabs-header/tabs-header.style";
+import StyledTab from "./tab/tab.style";
+const StyledTabs = styled.div`
+  ${({
+  position,
+  inSidebar,
+  headerWidth
+}) => css`
+    color: var(--colorsActionMinorYin090);
+
+    ${position === "left" && css`
+      ${headerWidth && css`
+        ${StyledTabsHeaderWrapper} {
+          width: ${headerWidth};
+        }
+
+        ${StyledTab} {
+          width: auto;
+        }
+      `}
+
+      ${!inSidebar && css`
+        display: flex;
+      `}
+
+      width: 100%;
+    `}
+  `}
+
+  ${margin}
+`;
+StyledTabs.defaultProps = {
+  position: "top",
+  theme: BaseTheme
+};
+StyledTabs.propTypes = {
+  position: PropTypes.oneOf(["top", "left"]),
+  hasCustomTarget: PropTypes.bool
+};
+export default StyledTabs;

package/esm/components/text-editor/__internal__/decorators/index.d.ts

@@ -0,0 +1,2 @@
+declare var _default: any;
+export default _default;

package/esm/components/text-editor/__internal__/decorators/index.js

@@ -0,0 +1,3 @@
+import { CompositeDecorator } from "draft-js";
+import linkDecorator from "./link-decorator";
+export default new CompositeDecorator([linkDecorator]);

package/esm/components/text-editor/__internal__/decorators/link-decorator.d.ts

@@ -0,0 +1,7 @@
+declare namespace _default {
+    export { linkStrategy as strategy };
+    export { EditorLink as component };
+}
+export default _default;
+declare function linkStrategy(contentBlock: any, callback: any): void;
+import EditorLink from "../editor-link";

package/esm/components/text-editor/__internal__/decorators/link-decorator.js

@@ -0,0 +1,37 @@
+import EditorLink from "../editor-link";
+
+function findWithRegex(regex, contentBlock, callback) {
+  const text = contentBlock.getText();
+  let matchArr;
+  let start = 0;
+  let candidates = [];
+  text.split(" ").forEach(chars => {
+    candidates = [...candidates, [...chars]];
+  });
+  candidates.forEach(candidate => {
+    // eslint-disable-next-line no-cond-assign
+    while ((matchArr = regex.exec(candidate.join(""))) !== null) {
+      start += matchArr.index;
+      callback(start, start + candidate.length);
+    }
+
+    start += candidate.length + 1;
+  });
+}
+
+const linkStrategy = (contentBlock, callback) => {
+  const combineRegex = (...regex) => new RegExp(regex.map(r => r.source).join(""), "g");
+
+  const urlRegex = combineRegex(/\b/, /(http:\/\/|https:\/\/|www\.)/, // prefix
+  /([\w-]+:([\w-]+@))?/, // userinfo
+  /([\w-]+\.)+\w+/, // domain
+  /(:\d+)?/, // port
+  /(\/[\w#!:.?+=&%@!-/]+)?/, // paths, queries, fragments
+  /\b/);
+  findWithRegex(urlRegex, contentBlock, callback);
+};
+
+export default {
+  strategy: linkStrategy,
+  component: EditorLink
+};

package/esm/components/text-editor/__internal__/editor-counter/editor-counter.component.d.ts

@@ -0,0 +1,18 @@
+export default Counter;
+declare function Counter({ count, limit, error, warning, info }: {
+    count?: number | undefined;
+    limit?: number | undefined;
+    error: any;
+    warning: any;
+    info: any;
+}): JSX.Element;
+declare namespace Counter {
+    namespace propTypes {
+        const count: PropTypes.Requireable<number>;
+        const limit: PropTypes.Requireable<number>;
+        const error: PropTypes.Requireable<string>;
+        const warning: PropTypes.Requireable<string>;
+        const info: PropTypes.Requireable<string>;
+    }
+}
+import PropTypes from "prop-types";

package/esm/components/text-editor/__internal__/editor-counter/editor-counter.component.js

@@ -0,0 +1,41 @@
+import React from "react";
+import PropTypes from "prop-types";
+import { StyledCounterWrapper, StyledCounter } from "./editor-counter.style";
+import ValidationIcon from "../../../../__internal__/validations";
+
+const Counter = ({
+  count = 0,
+  limit = 3000,
+  error,
+  warning,
+  info
+}) => /*#__PURE__*/React.createElement(StyledCounterWrapper, {
+  hasIcon: !!(error || warning || info),
+  "data-component": "text-editor-counter"
+}, !!(error || warning || info) && /*#__PURE__*/React.createElement(ValidationIcon, {
+  error: error,
+  warning: warning,
+  info: info,
+  tooltipPosition: "top",
+  tabIndex: 0
+}), /*#__PURE__*/React.createElement(StyledCounter, {
+  hasError: !!error
+}, `${limit - count}`));
+
+Counter.propTypes = {
+  /** Sets the current count value */
+  count: PropTypes.number,
+
+  /** Sets the current limit value */
+  limit: PropTypes.number,
+
+  /** Message to be displayed when there is an error */
+  error: PropTypes.string,
+
+  /** Message to be displayed when there is a warning */
+  warning: PropTypes.string,
+
+  /** Message to be displayed when there is an info */
+  info: PropTypes.string
+};
+export default Counter;

package/esm/components/text-editor/__internal__/editor-counter/editor-counter.d.ts

@@ -0,0 +1,11 @@
+export interface EditorCounterProps {
+  count: number;
+  limit: number;
+  error?: string;
+  warning?: string;
+  info?: string;
+}
+
+declare function EditorCounter(props: EditorCounterProps): JSX.Element;
+
+export default EditorCounter;

package/esm/components/text-editor/__internal__/editor-counter/editor-counter.style.d.ts

@@ -0,0 +1,2 @@
+export const StyledCounter: import("styled-components").StyledComponent<"span", any, {}, never>;
+export const StyledCounterWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;

package/esm/components/text-editor/__internal__/editor-counter/editor-counter.style.js

@@ -0,0 +1,18 @@
+import styled from "styled-components";
+const StyledCounter = styled.span`
+  color: ${({
+  hasError
+}) => hasError ? "var(--colorsSemanticNegative500)" : "var(--colorsUtilityYin055)"};
+  width: 100%;
+`;
+const StyledCounterWrapper = styled.div`
+  margin: 16px 16px 0px 4px;
+  min-width: 40px;
+  height: 21px;
+  font-size: 14px;
+  display: flex;
+  float: right;
+  text-align: right;
+  align-items: center;
+`;
+export { StyledCounter, StyledCounterWrapper };

package/esm/components/text-editor/__internal__/editor-counter/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from "./editor-counter";
+export * from "./editor-counter";

package/esm/components/text-editor/__internal__/editor-counter/index.js

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

package/esm/components/text-editor/__internal__/editor-link/editor-link.component.d.ts

@@ -0,0 +1,15 @@
+export default EditorLink;
+declare function EditorLink({ children, contentState, entityKey, ...rest }: {
+    [x: string]: any;
+    children: any;
+    contentState: any;
+    entityKey: any;
+}): JSX.Element;
+declare namespace EditorLink {
+    namespace propTypes {
+        const children: PropTypes.Validator<string | number | boolean | {} | PropTypes.ReactElementLike | PropTypes.ReactNodeArray>;
+        const contentState: PropTypes.Requireable<object>;
+        const entityKey: PropTypes.Requireable<string>;
+    }
+}
+import PropTypes from "prop-types";

package/esm/components/text-editor/__internal__/editor-link/editor-link.component.js

@@ -0,0 +1,48 @@
+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, useEffect } from "react";
+import PropTypes from "prop-types";
+import StyledLink from "./editor-link.style";
+import { EditorContext } from "../../text-editor.component";
+
+const EditorLink = ({
+  children,
+  contentState,
+  entityKey,
+  ...rest
+}) => {
+  const url = !!contentState && !!entityKey ? contentState.getEntity(entityKey).getData() : children[0].props.text;
+
+  const buildValidUrl = () => {
+    const candidateUrl = url.url || url;
+    const regex = /(http:\/\/|https:\/\/)+/g;
+    return regex.test(candidateUrl) ? candidateUrl : `https://${candidateUrl}`;
+  };
+
+  const validUrl = buildValidUrl();
+  const {
+    onLinkAdded,
+    editMode
+  } = useContext(EditorContext);
+  useEffect(() => {
+    if (onLinkAdded) {
+      onLinkAdded(validUrl);
+    } // eslint-disable-next-line react-hooks/exhaustive-deps
+
+  }, [validUrl]);
+  return /*#__PURE__*/React.createElement(StyledLink, _extends({
+    href: validUrl,
+    title: validUrl,
+    "aria-label": validUrl,
+    target: "_blank",
+    rel: "noopener noreferrer",
+    tabbable: !editMode
+  }, rest), children);
+};
+
+EditorLink.propTypes = {
+  children: PropTypes.node.isRequired,
+  contentState: PropTypes.object,
+  entityKey: PropTypes.string
+};
+export default EditorLink;

package/esm/components/text-editor/__internal__/editor-link/editor-link.d.ts

@@ -0,0 +1,11 @@
+import * as React from "react";
+
+export interface EditorLinkProps {
+  children: React.ReactNode;
+  contentState: Record<string, unknown>;
+  entityKey?: string;
+}
+
+declare function EditorLink(props: EditorLinkProps): JSX.Element;
+
+export default EditorLink;

package/esm/components/text-editor/__internal__/editor-link/editor-link.style.d.ts

@@ -0,0 +1,3 @@
+export default StyledEditorLink;
+declare const StyledEditorLink: import("styled-components").StyledComponent<typeof Link, any, {}, never>;
+import Link from "../../../link";

package/esm/components/text-editor/__internal__/editor-link/editor-link.style.js

@@ -0,0 +1,13 @@
+import styled from "styled-components";
+import Link from "../../../link";
+const StyledEditorLink = styled(Link)`
+  max-width: 100%;
+
+  a {
+    max-width: 100% span span span {
+      font-weight: 700;
+      font-style: normal;
+    }
+  }
+`;
+export default StyledEditorLink;

package/esm/components/text-editor/__internal__/editor-link/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from "./editor-link";
+export * from "./editor-link";

package/esm/components/text-editor/__internal__/editor-link/index.js

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

package/esm/components/text-editor/__internal__/label-wrapper/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from "./label-wrapper";
+export * from "./label-wrapper";

package/esm/components/text-editor/__internal__/label-wrapper/index.js

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

package/esm/components/text-editor/__internal__/label-wrapper/label-wrapper.component.d.ts

@@ -0,0 +1,17 @@
+export default LabelWrapper;
+/**
+ * TextEditor component is composed with divs and spans.
+ * We have to manually trigger focus on TextEditor by clicking on label component.
+ * This wrapper allows us to trigger focus on TextEditor
+ */
+declare function LabelWrapper({ onClick, children }: {
+    onClick: any;
+    children: any;
+}): JSX.Element;
+declare namespace LabelWrapper {
+    namespace propTypes {
+        const onClick: PropTypes.Validator<(...args: any[]) => any>;
+        const children: PropTypes.Validator<string | number | boolean | {} | PropTypes.ReactElementLike | PropTypes.ReactNodeArray>;
+    }
+}
+import PropTypes from "prop-types";

package/esm/components/text-editor/__internal__/label-wrapper/label-wrapper.component.js

@@ -0,0 +1,25 @@
+/* eslint-disable jsx-a11y/click-events-have-key-events */
+
+/* eslint-disable jsx-a11y/no-static-element-interactions */
+import React from "react";
+import PropTypes from "prop-types";
+/**
+ * TextEditor component is composed with divs and spans.
+ * We have to manually trigger focus on TextEditor by clicking on label component.
+ * This wrapper allows us to trigger focus on TextEditor
+ */
+
+const LabelWrapper = ({
+  onClick,
+  children
+}) => {
+  return /*#__PURE__*/React.createElement("span", {
+    onClick: onClick
+  }, " ", children, " ");
+};
+
+LabelWrapper.propTypes = {
+  onClick: PropTypes.func.isRequired,
+  children: PropTypes.node.isRequired
+};
+export default LabelWrapper;

package/esm/components/text-editor/__internal__/label-wrapper/label-wrapper.d.ts

@@ -0,0 +1,10 @@
+import * as React from "react";
+
+export interface LabelWrapperProps {
+  children: React.ReactNode;
+  onClick: () => void;
+}
+
+declare function LabelWrapper(props: LabelWrapperProps): JSX.Element;
+
+export default LabelWrapper;

package/esm/components/text-editor/__internal__/toolbar/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from "./toolbar";
+export * from "./toolbar";

package/esm/components/text-editor/__internal__/toolbar/index.js

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

package/esm/components/text-editor/__internal__/toolbar/toolbar-button/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from "./toolbar-button";
+export * from "./toolbar-button";

package/esm/components/text-editor/__internal__/toolbar/toolbar-button/index.js

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

package/esm/components/text-editor/__internal__/toolbar/toolbar-button/toolbar-button.component.d.ts

@@ -0,0 +1,3 @@
+export default ToolbarButton;
+declare const ToolbarButton: React.ForwardRefExoticComponent<React.RefAttributes<any>>;
+import React from "react";

package/esm/components/text-editor/__internal__/toolbar/toolbar-button/toolbar-button.component.js

@@ -0,0 +1,59 @@
+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 "prop-types";
+import StyledToolbarButton from "./toolbar-button.style";
+const ToolbarButton = /*#__PURE__*/React.forwardRef(({
+  onKeyDown,
+  onMouseDown,
+  activated,
+  ariaLabel,
+  tabbable,
+  children,
+  onMouseOver,
+  onMouseLeave,
+  onFocus,
+  onBlur
+}, ref) => {
+  return /*#__PURE__*/React.createElement(StyledToolbarButton, _extends({
+    "data-component": "text-editor-toolbar-button",
+    ref: ref,
+    onKeyDown: onKeyDown,
+    onMouseDown: onMouseDown,
+    isActive: activated,
+    "aria-label": ariaLabel
+  }, !tabbable && {
+    tabIndex: -1
+  }, {
+    activated: activated,
+    tabbable: tabbable,
+    onMouseOver: onMouseOver,
+    onMouseLeave: onMouseLeave,
+    onFocus: onFocus,
+    onBlur: onBlur
+  }), children);
+});
+ToolbarButton.propTypes = {
+  /** Accessibility label for a button */
+  ariaLabel: PropTypes.string.isRequired,
+
+  /** The children for the button */
+  children: PropTypes.oneOfType([PropTypes.node, PropTypes.array]).isRequired,
+
+  /** Used to control the button's active status */
+  activated: PropTypes.bool,
+
+  /** Callback to handle any keydown events on a button */
+  onKeyDown: PropTypes.func.isRequired,
+
+  /** Callback to handle any mouse down events on a button */
+  onMouseDown: PropTypes.func.isRequired,
+
+  /** Controls whether the button can be tabbed to */
+  tabbable: PropTypes.bool,
+  onMouseOver: PropTypes.func,
+  onMouseLeave: PropTypes.func,
+  onFocus: PropTypes.func,
+  onBlur: PropTypes.func
+};
+export default ToolbarButton;

package/esm/components/text-editor/__internal__/toolbar/toolbar-button/toolbar-button.d.ts

@@ -0,0 +1,20 @@
+import * as React from "react";
+
+export interface ToolbarButtonProps {
+  ariaLabel?: string;
+  children: React.ReactNode;
+  activated?: boolean;
+  onKeyDown: (event: React.KeyboardEvent<HTMLElement>) => void;
+  onMouseDown: (event: React.MouseEvent<HTMLElement>) => void;
+  onMouseOver?: (event: React.MouseEvent<HTMLElement>) => void;
+  onMouseLeave?: (event: React.MouseEvent<HTMLElement>) => void;
+  onFocus?: (event: React.FocusEvent<HTMLButtonElement>) => void;
+  onBlur?: (event: React.FocusEvent<HTMLButtonElement>) => void;
+  tabbable?: boolean;
+}
+
+declare function ToolbarButton(
+  props: ToolbarButtonProps & React.RefAttributes<HTMLButtonElement>
+): JSX.Element;
+
+export default ToolbarButton;

package/esm/components/text-editor/__internal__/toolbar/toolbar-button/toolbar-button.style.d.ts

@@ -0,0 +1,4 @@
+export default StyledToolbarButton;
+declare const StyledToolbarButton: import("styled-components").StyledComponent<"button", any, {
+    type: "button";
+}, "type">;

package/esm/components/text-editor/__internal__/toolbar/toolbar-button/toolbar-button.style.js

@@ -0,0 +1,35 @@
+import styled, { css } from "styled-components";
+import StyledIcon from "../../../../icon/icon.style";
+const StyledToolbarButton = styled.button.attrs({
+  type: "button"
+})`
+  background-color: inherit;
+  border: none;
+  cursor: pointer;
+  width: 32px;
+  font-size: 14px;
+  height: 32px;
+
+  ${StyledIcon} {
+    width: auto;
+  }
+
+  ${({
+  isActive
+}) => css`
+    :focus,
+    :active {
+      outline: 2px solid var(--colorsSemanticFocus500);
+      outline-offset: -2px;
+    }
+
+    :hover {
+      background-color: var(--colorsActionMinor200);
+    }
+
+    ${isActive && css`
+      background-color: var(--colorsActionMinor200);
+    `}
+  `}
+`;
+export default StyledToolbarButton;

package/esm/components/text-editor/__internal__/toolbar/toolbar.component.d.ts

@@ -0,0 +1,18 @@
+export default Toolbar;
+declare function Toolbar({ activeControls, canFocus, toolbarElements, setBlockStyle, setInlineStyle, }: {
+    activeControls: any;
+    canFocus: any;
+    toolbarElements: any;
+    setBlockStyle: any;
+    setInlineStyle: any;
+}): JSX.Element;
+declare namespace Toolbar {
+    namespace propTypes {
+        const activeControls: PropTypes.Validator<object>;
+        const canFocus: PropTypes.Requireable<boolean>;
+        const setInlineStyle: PropTypes.Validator<(...args: any[]) => any>;
+        const setBlockStyle: PropTypes.Validator<(...args: any[]) => any>;
+        const toolbarElements: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+    }
+}
+import PropTypes from "prop-types";