carbon-react 104.34.1 → 104.35.0

package/esm/components/icon/icon.style.js

@@ -0,0 +1,161 @@
+import styled, { css } from "styled-components";
+import PropTypes from "prop-types";
+import { shade } from "polished";
+import { margin } from "styled-system";
+import iconUnicodes from "./icon-unicodes";
+import baseTheme from "../../style/themes/base";
+import iconSizeConfig, { ICON_SHAPES } from "./icon-config";
+import browserTypeCheck, { isSafari } from "../../__internal__/utils/helpers/browser-type-check";
+import styledColor from "../../style/utils/color";
+
+function adjustIconBgSize(fontSize, bgSize) {
+  var _replacements$fontSiz;
+
+  const replacements = {
+    medium: {
+      small: "medium"
+    },
+    large: {
+      small: "large",
+      medium: "large"
+    },
+    "extra-large": {
+      small: "extra-large",
+      medium: "extra-large",
+      large: "extra-large"
+    }
+  };
+  const replacement = replacements === null || replacements === void 0 ? void 0 : (_replacements$fontSiz = replacements[fontSize]) === null || _replacements$fontSiz === void 0 ? void 0 : _replacements$fontSiz[bgSize];
+
+  if (replacement) {
+    return iconSizeConfig.backgroundSize[replacement];
+  }
+
+  return iconSizeConfig.backgroundSize[bgSize];
+}
+
+const StyledIcon = styled.span`
+  ${({
+  theme,
+  color,
+  bg,
+  isInteractive,
+  bgSize,
+  bgShape,
+  type,
+  fontSize,
+  disabled,
+  hasTooltip
+}) => {
+  let finalColor;
+  let finalHoverColor;
+  let bgColor;
+  let bgHoverColor;
+
+  try {
+    if (disabled) {
+      finalColor = "var(--colorsYin030)";
+      finalHoverColor = "var(--colorsYin030)";
+    } else if (typeof color === "string" && color.startsWith("var")) {
+      finalColor = color;
+      finalHoverColor = shade(0.2, theme.compatibility[color.replace("var(--", "").replace(")", "")]);
+    } else if (color) {
+      const {
+        color: renderedColor
+      } = styledColor({
+        color,
+        theme
+      });
+      finalColor = renderedColor;
+      finalHoverColor = shade(0.2, renderedColor);
+    } else {
+      finalColor = "var(--colorsYin065)";
+      finalHoverColor = "var(--colorsYin090)";
+    }
+
+    if (bg) {
+      const {
+        backgroundColor
+      } = styledColor({
+        bg,
+        theme
+      });
+      bgColor = backgroundColor;
+      bgHoverColor = shade(0.2, backgroundColor);
+    } else if (disabled) {
+      bgColor = "var(--colorsYin030)";
+      bgHoverColor = "var(--colorsYin030)";
+    } else {
+      bgColor = "transparent";
+      bgHoverColor = "transparent";
+    }
+  } catch (e) {
+    // eslint-disable-next-line no-console
+    console.error(e);
+  }
+
+  return css`
+      position: relative;
+      color: ${finalColor};
+      background-color: ${bgColor};
+      vertical-align: middle;
+      align-items: center;
+      display: inline-flex;
+      justify-content: center;
+      height: ${adjustIconBgSize(fontSize, bgSize)};
+      width: ${adjustIconBgSize(fontSize, bgSize)};
+      border-radius: ${iconSizeConfig.backgroundShape[bgShape]};
+
+      ${isInteractive && css`
+        &:hover {
+          color: ${finalHoverColor};
+          background-color: ${bgHoverColor};
+        }
+      `}
+
+      &::before {
+        -webkit-font-smoothing: antialiased;
+        -moz-osx-font-smoothing: grayscale;
+
+        font-family: CarbonIcons;
+        content: "${iconUnicodes[type]}";
+        font-size: ${iconSizeConfig.iconSize[fontSize]};
+        font-style: normal;
+        font-weight: normal;
+        line-height: ${iconSizeConfig.iconSize[fontSize]};
+        vertical-align: middle;
+
+        ${type === "services" && browserTypeCheck(window) && css`
+          margin-top: ${fontSize === "small" ? "-7px" : "-8px"};
+        `}
+
+        ${type === "services" && isSafari(navigator) && !browserTypeCheck(window) && css`
+          margin-top: -6px;
+        `}
+        
+        display: block;
+      }
+
+      ${hasTooltip && `
+        :focus {
+          outline: 2px solid var(--colorsSemanticFocus500);
+        }
+      `}
+
+      ${margin}
+    `;
+}}
+`;
+StyledIcon.propTypes = {
+  theme: PropTypes.object,
+  type: PropTypes.string,
+  isInteractive: PropTypes.bool,
+  disabled: PropTypes.bool,
+  bgSize: PropTypes.oneOf(["extra-small", "small", "medium", "large", "extra-large"]),
+  bgShape: PropTypes.oneOf(ICON_SHAPES),
+  fontSize: PropTypes.oneOf(["small", "medium", "large", "extra-large"])
+};
+StyledIcon.defaultProps = {
+  theme: baseTheme
+};
+export default StyledIcon;

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

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

package/esm/components/icon/index.js

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

package/esm/components/icon-button/icon-button.component.d.ts

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

package/esm/components/icon-button/icon-button.component.js

@@ -0,0 +1,70 @@
+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 Events from "../../__internal__/utils/helpers/events";
+import StyledIconButton from "./icon-button.style";
+import Icon from "../icon";
+import { filterStyledSystemMarginProps } from "../../style/utils";
+import { TooltipProvider } from "../../__internal__/tooltip-provider";
+const marginPropTypes = filterStyledSystemMarginProps(styledSystemPropTypes.space);
+const IconButton = /*#__PURE__*/React.forwardRef(({
+  "aria-label": ariaLabel,
+  onAction,
+  children,
+  disabled,
+  ...rest
+}, ref) => {
+  const [internalRef, setInternalRef] = useState(null);
+  const marginProps = filterStyledSystemMarginProps(rest);
+
+  const onKeyDown = e => {
+    if (Events.isEnterKey(e) || Events.isSpaceKey(e)) {
+      e.preventDefault();
+      onAction(e);
+    } else {
+      e.stopPropagation();
+    }
+  };
+
+  const handleOnAction = e => {
+    onAction(e);
+  };
+
+  return /*#__PURE__*/React.createElement(StyledIconButton, _extends({}, rest, {
+    "aria-label": ariaLabel,
+    onKeyDown: onKeyDown,
+    onClick: handleOnAction,
+    ref: reference => {
+      if (reference) {
+        setInternalRef(reference);
+        if (!ref) return;
+        if (typeof ref === "object") ref.current = reference;
+        if (typeof ref === "function") ref(reference);
+      }
+    },
+    disabled: disabled
+  }, marginProps), /*#__PURE__*/React.createElement(TooltipProvider, {
+    disabled: disabled,
+    focusable: false,
+    target: internalRef
+  }, children));
+});
+IconButton.propTypes = { ...marginPropTypes,
+
+  /** Children prop is restricted to one Icon Component */
+  children: PropTypes.shape({
+    type: PropTypes.oneOf([Icon, PropTypes.element])
+  }).isRequired,
+
+  /** Callback */
+  onAction: PropTypes.func.isRequired,
+
+  /** Prop to specify the aria-label of the icon-button component */
+  "aria-label": PropTypes.string,
+
+  /** Set the button to disabled */
+  disabled: PropTypes.bool
+};
+export default IconButton;

package/esm/components/icon-button/icon-button.d.ts

@@ -0,0 +1,18 @@
+import * as React from "react";
+import { MarginProps } from "styled-system";
+import { IconProps } from "../icon/icon";
+
+export interface IconButtonProps extends MarginProps {
+  /** Optional: alternative rendered content, displayed within <SelectList> of <Select> (eg: an icon, an image, etc) */
+  children: React.ReactElement<IconProps>;
+  /** Callback */
+  onAction: React.MouseEventHandler<HTMLButtonElement>;
+  /** Set the button to disabled */
+  disabled?: boolean;
+}
+
+declare function IconButton(
+  props: IconButtonProps & React.RefAttributes<HTMLButtonElement>
+): JSX.Element;
+
+export default IconButton;

package/esm/components/icon-button/icon-button.style.d.ts

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

package/esm/components/icon-button/icon-button.style.js

@@ -0,0 +1,46 @@
+import styled, { css } from "styled-components";
+import { margin } from "styled-system";
+import StyledIcon from "../icon/icon.style";
+import { baseTheme } from "../../style/themes";
+const StyledIconButton = styled.button.attrs({
+  type: "button"
+})`
+  ${({
+  disabled
+}) => css`
+    ${margin}
+    background: transparent;
+    border: none;
+    padding: 0;
+
+    &:focus {
+      background-color: transparent;
+      outline: solid 3px var(--colorsSemanticFocus500);
+      z-index: 1;
+    }
+
+    &:hover {
+      cursor: ${!disabled ? "pointer" : "not-allowed"};
+    }
+
+    &::-moz-focus-inner {
+      border: none;
+    }
+
+    ${StyledIcon} {
+      ${disabled && css`
+        color: var(--colorsActionMinorYin030);
+        background-color: transparent;
+      `};
+      position: relative;
+
+      &:focus {
+        border: none;
+      }
+    }
+  `}
+`;
+StyledIconButton.defaultProps = {
+  theme: baseTheme
+};
+export default StyledIconButton;

package/esm/components/icon-button/index.d.ts

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

package/esm/components/icon-button/index.js

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

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

@@ -0,0 +1,2 @@
+export default Image;
+declare const Image: import("styled-components").StyledComponent<"div", any, any, string | number | symbol>;

package/esm/components/image/image.component.js

@@ -0,0 +1,66 @@
+import PropTypes from "prop-types";
+import styledSystemPropTypes from "@styled-system/prop-types";
+import styled, { css } from "styled-components";
+import { margin, layout, background } from "styled-system";
+import BaseTheme from "../../style/themes/base";
+import { filterStyledSystemMarginProps } from "../../style/utils";
+const marginPropTypes = filterStyledSystemMarginProps(styledSystemPropTypes.space);
+const Image = styled.div.attrs(({
+  src,
+  children
+}) => ({ ...(src && {
+    as: "img"
+  }),
+  children: src ? undefined : children,
+  src
+}))`
+  ${margin}
+  ${layout}
+
+  ${({
+  as
+}) => as !== "img" && css`
+      ${background}
+    `}
+`;
+Image.defaultProps = {
+  theme: BaseTheme,
+  backgroundPosition: "center",
+  backgroundRepeat: "no-repeat",
+  backgroundSize: "cover"
+};
+Image.displayName = "Image";
+Image.propTypes = { ...marginPropTypes,
+  ...styledSystemPropTypes.layout,
+  ...styledSystemPropTypes.background,
+
+  /** any valid file path, passing this will render the component as an img element */
+  src: PropTypes.string,
+
+  /** alt property to display when an img fails to load */
+  alt: (props, propName, componentName) => {
+    const prop = props[propName];
+    let error;
+
+    if (props.src && (!prop || typeof prop !== "string")) {
+      error = new Error( // eslint-disable-next-line max-len
+      `Please provide an \`${propName}\` string when rendering the \`${componentName}\` component as an \`img\` element.`);
+    }
+
+    return error;
+  },
+
+  /** Children elements, will only render if component is a div element */
+  children: (props, propName, componentName) => {
+    const prop = props[propName];
+    let error;
+
+    if (props.src && prop) {
+      error = new Error( // eslint-disable-next-line max-len
+      `The \`${componentName}\` component renders as an \`img\` element when the \`${propName}\` prop is used and therefore does not accept children.`);
+    }
+
+    return error;
+  }
+};
+export default Image;

package/esm/components/image/image.d.ts

@@ -0,0 +1,18 @@
+import * as React from "react";
+import { StyledComponentProps } from "styled-components";
+import { MarginProps, BackgroundProps, LayoutProps } from "styled-system";
+
+export interface ImageProps extends MarginProps, BackgroundProps, LayoutProps {
+  /** any valid file path, passing this will render the component as an img element */
+  src?: string;
+  /** alt property to display when an img fails to load */
+  alt?: string;
+  /** Children elements, will only render if component is a div element */
+  children?: React.ReactNode;
+}
+
+declare function Image(
+  attrs: StyledComponentProps<"div", Record<string, unknown>, ImageProps, "">
+): JSX.Element;
+
+export default Image;

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

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

package/esm/components/image/index.js

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

package/esm/components/inline-inputs/index.d.ts

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

package/esm/components/inline-inputs/index.js

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

package/esm/components/inline-inputs/inline-inputs.component.d.ts

@@ -0,0 +1,22 @@
+export default InlineInputs;
+declare function InlineInputs(props: any): JSX.Element;
+declare namespace InlineInputs {
+    namespace propTypes {
+        const children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        const className: PropTypes.Requireable<string>;
+        const label: PropTypes.Requireable<string>;
+        const htmlFor: PropTypes.Requireable<string>;
+        const gutter: PropTypes.Requireable<string>;
+        const inputWidth: PropTypes.Requireable<number>;
+        const labelWidth: PropTypes.Requireable<number>;
+    }
+    namespace defaultProps {
+        const children_1: null;
+        export { children_1 as children };
+        const className_1: string;
+        export { className_1 as className };
+        const gutter_1: string;
+        export { gutter_1 as gutter };
+    }
+}
+import PropTypes from "prop-types";

package/esm/components/inline-inputs/inline-inputs.component.js

@@ -0,0 +1,94 @@
+import React, { useRef } from "react";
+import PropTypes from "prop-types";
+import Label from "../../__internal__/label";
+import StyledInlineInputs, { StyledContentContainer, StyledInlineInput } from "./inline-inputs.style";
+import createGuid from "../../__internal__/utils/helpers/guid";
+
+const columnWrapper = (children, gutter) => {
+  let inputs = children;
+
+  if (!Array.isArray(inputs)) {
+    inputs = [children];
+  }
+
+  return inputs.map((input, index) => {
+    // Input is never going to be re-ordered so we don't require a defined key
+
+    /* eslint-disable react/no-array-index-key */
+    return /*#__PURE__*/React.createElement(StyledInlineInput, {
+      key: index,
+      gutter: gutter,
+      "data-element": "inline-input"
+    }, input);
+  });
+};
+
+const InlineInputs = props => {
+  const {
+    label,
+    htmlFor,
+    children,
+    className,
+    gutter,
+    inputWidth,
+    labelWidth
+  } = props;
+  const labelId = useRef(createGuid());
+
+  function renderLabel() {
+    if (!label) return null;
+    return /*#__PURE__*/React.createElement(Label, {
+      labelId: labelId.current,
+      inline: true,
+      htmlFor: htmlFor
+    }, label);
+  }
+
+  function renderChildren() {
+    if (!label) return children;
+    return React.Children.map(children, child => /*#__PURE__*/React.cloneElement(child, {
+      "aria-labelledby": labelId.current
+    }));
+  }
+
+  return /*#__PURE__*/React.createElement(StyledInlineInputs, {
+    gutter: gutter,
+    "data-component": "inline-inputs",
+    className: className,
+    labelWidth: labelWidth
+  }, renderLabel(), /*#__PURE__*/React.createElement(StyledContentContainer, {
+    gutter: gutter,
+    "data-element": "inline-inputs-container",
+    inputWidth: inputWidth
+  }, columnWrapper(renderChildren(), gutter)));
+}; // Assign props over for demo site
+
+
+InlineInputs.propTypes = {
+  /** Children elements */
+  children: PropTypes.node,
+
+  /** [Legacy prop] A custom class name for the component. */
+  className: PropTypes.string,
+
+  /** Defines the label text for the heading. */
+  label: PropTypes.string,
+
+  /** The id of the corresponding input control for the label */
+  htmlFor: PropTypes.string,
+
+  /** Gutter prop gets passed down to Row component if false gutter value is "none" */
+  gutter: PropTypes.oneOf(["none", "extra-small", "small", "medium-small", "medium", "medium-large", "large", "extra-large"]),
+
+  /** Width of the inline inputs container in percentage */
+  inputWidth: PropTypes.number,
+
+  /** Width of a label in percentage */
+  labelWidth: PropTypes.number
+};
+InlineInputs.defaultProps = {
+  children: null,
+  className: "",
+  gutter: "none"
+};
+export default InlineInputs;

package/esm/components/inline-inputs/inline-inputs.config.d.ts

@@ -0,0 +1 @@
+export const INLINE_INPUTS_SIZES: string[];

package/esm/components/inline-inputs/inline-inputs.config.js

@@ -0,0 +1,2 @@
+// eslint-disable-next-line import/prefer-default-export
+export const INLINE_INPUTS_SIZES = ["none", "extra-small", "small", "medium-small", "medium", "medium-large", "large", "extra-large"];

package/esm/components/inline-inputs/inline-inputs.d.ts

@@ -0,0 +1,30 @@
+import * as React from "react";
+
+export interface InlineInputsProps {
+  /** Children elements */
+  children?: React.ReactNode;
+  /** [Legacy prop] A custom class name for the component. */
+  className?: string;
+  /** Gutter prop gets passed down to Row component if false gutter value is "none" */
+  gutter?:
+    | "none"
+    | "extra-small"
+    | "small"
+    | "medium-small"
+    | "medium"
+    | "medium-large"
+    | "large"
+    | "extra-large";
+  /** The id of the corresponding input control for the label */
+  htmlFor?: string;
+  /** Width of the inline inputs container in percentage */
+  inputWidth?: number;
+  /** Defines the label text for the heading. */
+  label?: string;
+  /** Width of a label in percentage */
+  labelWidth?: number;
+}
+
+declare function InlineInputs(props: InlineInputsProps): JSX.Element;
+
+export default InlineInputs;

package/esm/components/inline-inputs/inline-inputs.style.d.ts

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

package/esm/components/inline-inputs/inline-inputs.style.js

@@ -0,0 +1,69 @@
+import styled, { css } from "styled-components";
+import InputPresentation from "../../__internal__/input/input-presentation.style";
+import { StyledLabelContainer } from "../../__internal__/label/label.style";
+import baseTheme from "../../style/themes/base";
+const spacings = {
+  none: 0,
+  "extra-small": 8,
+  small: 16,
+  "medium-small": 20,
+  medium: 24,
+  "medium-large": 28,
+  large: 32,
+  "extra-large": 40
+};
+const StyledInlineInput = styled.div`
+  flex: 1;
+
+  ${({
+  gutter
+}) => css`
+      margin-bottom: 0;
+      padding-left: ${spacings[gutter]}px;
+    `}
+`;
+const StyledContentContainer = styled.div`
+  display: flex;
+  flex: ${({
+  inputWidth
+}) => inputWidth ? `0 0 ${inputWidth}%` : 1};
+
+  ${({
+  gutter
+}) => css`
+      margin-bottom: 0;
+      margin-left: -${spacings[gutter]}px;
+
+      ${gutter === "none" && css`
+        ${StyledInlineInput} + ${StyledInlineInput} ${InputPresentation} {
+          border-left: none;
+        }
+      `}
+    `}
+`;
+const StyledInlineInputs = styled.div`
+  display: flex;
+  align-items: center;
+
+  ${StyledLabelContainer} {
+    width: auto;
+    margin-bottom: 0;
+    padding-right: 16px;
+    flex: 0 0 ${({
+  labelWidth
+}) => labelWidth ? `${labelWidth}%` : "auto"};
+  }
+
+  input {
+    width: 1px;
+  }
+
+  [data-component="carbon-select"] input {
+    width: 30px;
+  }
+`;
+StyledInlineInputs.defaultProps = {
+  theme: baseTheme
+};
+export { StyledContentContainer, StyledInlineInput };
+export default StyledInlineInputs;

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

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

package/esm/components/link/index.js

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

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

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