carbon-react 104.34.0 → 104.36.0

package/esm/components/simple-color-picker/tick-icon/tick-icon.style.d.ts

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

package/esm/components/simple-color-picker/tick-icon/tick-icon.style.js

@@ -0,0 +1,38 @@
+import styled, { css } from "styled-components";
+import Icon from "../../icon";
+import getRgbValues from "../../../style/utils/get-rgb-values";
+
+const getIconColor = color => {
+  const rgbValues = getRgbValues(color);
+  const [r, g, b] = rgbValues; // color contrast calculating formula as per W3 suggestions
+
+  const redMultiplier = 299,
+        greenMultiplier = 587,
+        blueMultiplier = 114;
+  const contrast = (Math.round(r * redMultiplier) + Math.round(g * greenMultiplier) + Math.round(b * blueMultiplier)) / 1000;
+  if (contrast < 128) return "var(--colorsActionMajorYang100)";
+  return "var(--colorsActionMajorYin090)";
+};
+
+const StyledTickIcon = styled(Icon)`
+  height: 22px;
+  width: 22px;
+  pointer-events: none;
+  display: none;
+
+  &::before {
+    font-size: 22px;
+    color: ${({
+  color
+}) => getIconColor(color)};
+  }
+
+  ${({
+  checked
+}) => checked && css`
+       {
+        display: block;
+      }
+    `}
+`;
+export default StyledTickIcon;

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

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

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

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

package/esm/components/split-button/split-button-children.style.d.ts

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

package/esm/components/split-button/split-button-children.style.js

@@ -0,0 +1,42 @@
+import styled, { css } from "styled-components";
+import BaseTheme from "../../style/themes/base";
+import StyledButton from "../button/button.style";
+const StyledSplitButtonChildrenContainer = styled.div`
+  ${({
+  theme,
+  align
+}) => css`
+    background-color: var(--colorsActionMajorYang100);
+    min-width: ${({
+  minWidth
+}) => minWidth}px;
+    white-space: nowrap;
+    z-index: ${theme.zIndex.popover};
+    box-shadow: var(--boxShadow100);
+
+    ${StyledButton} {
+      background-color: var(--colorsActionMajorYang100);
+      border: 1px solid var(--colorsActionMajorTransparent);
+      color: var(--colorsActionMajor500);
+      display: block;
+      margin-left: 0;
+      min-width: 100%;
+      text-align: ${align};
+      z-index: ${theme.zIndex.overlay};
+
+      &:focus,
+      &:hover {
+        color: var(--colorsActionMajorYang100);
+        background-color: var(--colorsActionMajor600);
+      }
+
+      & + & {
+        margin-top: 3px;
+      }
+    }
+  `}
+`;
+StyledSplitButtonChildrenContainer.defaultProps = {
+  theme: BaseTheme
+};
+export default StyledSplitButtonChildrenContainer;

package/esm/components/split-button/split-button-toggle.style.d.ts

@@ -0,0 +1,8 @@
+export default StyledSplitButtonToggle;
+declare const StyledSplitButtonToggle: import("styled-components").StyledComponent<"button", any, {
+    iconOnly: any;
+    disabled: any;
+    buttonType: any;
+    size: any;
+    destructive: any;
+}, never>;

package/esm/components/split-button/split-button-toggle.style.js

@@ -0,0 +1,58 @@
+import styled, { css } from "styled-components";
+import StyledButton from "../button/button.style";
+import StyledIcon from "../icon/icon.style";
+const horizontalPaddingSizes = {
+  small: 5,
+  medium: 10,
+  large: 14
+};
+const StyledSplitButtonToggle = styled(StyledButton)`
+  ${({
+  buttonType,
+  disabled,
+  displayed,
+  size
+}) => css`
+    ${!disabled && displayed ? css`
+          background-color: var(--colorsActionMajor500);
+          border-color: var(--colorsActionMajor500);
+
+          &,
+          ${StyledIcon} {
+            color: var(--colorsActionMajorYang100);
+          }
+
+          &:focus {
+            border-left-color: var(--colorsSemanticFocus500);
+          }
+        ` : ""}
+    ${!disabled && buttonType === "primary" && `position: relative;
+      &::before {
+        content: '';
+        width: 2px;
+        height: 100%;
+        background: var(--colorsActionMajorYang100);
+        position: absolute;
+        left: -2px;
+        z-index: 2;
+      }  
+    `}
+    ${buttonType === "secondary" && "border-left-width: 0;"}
+    padding: 0 ${horizontalPaddingSizes[size]}px;
+
+    ${StyledButton} + & {
+      margin-left: 0;
+
+      ${buttonType === "secondary" && css`
+        &:focus {
+          margin-left: -3px;
+        }
+      `}
+    }
+
+    ${StyledButton} + & ${StyledIcon} {
+      margin-left: 0;
+    }
+  `}
+`;
+export default StyledSplitButtonToggle;

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

@@ -0,0 +1,41 @@
+export default SplitButton;
+declare function SplitButton({ align, as, buttonType, children, disabled, iconPosition, iconType, onClick, size, subtext, text, ...rest }: {
+    [x: string]: any;
+    align?: string | undefined;
+    as?: string | undefined;
+    buttonType: any;
+    children: any;
+    disabled?: boolean | undefined;
+    iconPosition?: string | undefined;
+    iconType: any;
+    onClick: any;
+    size?: string | undefined;
+    subtext: any;
+    text: any;
+}): JSX.Element;
+declare namespace SplitButton {
+    const propTypes: {
+        /** Button type: "primary" | "secondary" */
+        buttonType: PropTypes.Requireable<string>;
+        /** Button type: "primary" | "secondary" for legacy theme */
+        as: PropTypes.Requireable<string>;
+        /** The additional button to display. */
+        children: PropTypes.Validator<string | number | boolean | {} | PropTypes.ReactElementLike | PropTypes.ReactNodeArray>;
+        /** A custom value for the data-element attribute */
+        "data-element": PropTypes.Requireable<string>;
+        /** A custom value for the data-role attribute */
+        "data-role": PropTypes.Requireable<string>;
+        /** Gives the button a disabled state. */
+        disabled: PropTypes.Requireable<boolean>;
+        /** The size of the buttons in the SplitButton. */
+        size: PropTypes.Requireable<string>;
+        /** The text to be displayed in the SplitButton. */
+        text: PropTypes.Validator<string>;
+        /** Defines an Icon position within the button: "before" | "after" */
+        iconPosition: PropTypes.Requireable<string>;
+        /** Set align of the rendered content */
+        align: PropTypes.Requireable<string>;
+    };
+    const safeProps: string[];
+}
+import PropTypes from "prop-types";

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

@@ -0,0 +1,262 @@
+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, { useRef, useState, useContext, useCallback, useEffect } from "react";
+import { ThemeContext } from "styled-components";
+import PropTypes from "prop-types";
+import styledSystemPropTypes from "@styled-system/prop-types";
+import Icon from "../icon";
+import Button, { ButtonWithForwardRef } from "../button";
+import StyledSplitButton from "./split-button.style";
+import StyledSplitButtonToggle from "./split-button-toggle.style";
+import StyledSplitButtonChildrenContainer from "./split-button-children.style";
+import Events from "../../__internal__/utils/helpers/events";
+import guid from "../../__internal__/utils/helpers/guid";
+import Popover from "../../__internal__/popover";
+import { filterStyledSystemMarginProps } from "../../style/utils";
+import { baseTheme } from "../../style/themes";
+const marginPropTypes = filterStyledSystemMarginProps(styledSystemPropTypes.space);
+const CONTENT_WIDTH_RATIO = 0.75;
+
+const SplitButton = ({
+  align = "left",
+  as = "secondary",
+  buttonType,
+  children,
+  disabled = false,
+  iconPosition = "before",
+  iconType,
+  onClick,
+  size = "medium",
+  subtext,
+  text,
+  ...rest
+}) => {
+  const theme = useContext(ThemeContext) || baseTheme;
+  const isToggleButtonFocused = useRef(false);
+  const buttonLabelId = useRef(guid());
+  const additionalButtons = useRef([]);
+  const splitButtonNode = useRef();
+  const buttonContainer = useRef();
+  const [showAdditionalButtons, setShowAdditionalButtons] = useState(false);
+  const [minWidth, setMinWidth] = useState(0);
+  const userInputType = useRef("ontouchstart" in document.documentElement ? "touchstart" : "click");
+  const hideButtons = useCallback(() => {
+    if (isToggleButtonFocused.current) return;
+    setShowAdditionalButtons(false);
+  }, []);
+  const handleClickOutside = useCallback(({
+    target
+  }) => {
+    if (!splitButtonNode.current.contains(target) && buttonContainer.current && !buttonContainer.current.contains(target)) {
+      hideButtons();
+    }
+  }, [hideButtons]);
+  const handleKeyDown = useCallback(ev => {
+    if (!showAdditionalButtons) {
+      return;
+    }
+
+    const numOfChildren = children.length - 1;
+    const currentIndex = additionalButtons.current.findIndex(isActiveElement);
+    let nextIndex = -1;
+
+    if (Events.isUpKey(ev)) {
+      nextIndex = currentIndex > 0 ? currentIndex - 1 : numOfChildren;
+      ev.preventDefault();
+    }
+
+    if (Events.isDownKey(ev)) {
+      nextIndex = currentIndex < numOfChildren ? currentIndex + 1 : 0;
+      ev.preventDefault();
+    } else if (Events.isTabKey(ev)) {
+      // timeout enforces that the "hideButtons" method will be run after browser focuses on the next element
+      setTimeout(hideButtons, 0);
+    }
+
+    if (nextIndex > -1) {
+      additionalButtons.current[nextIndex].focus();
+    }
+  }, [hideButtons, children, showAdditionalButtons]);
+  useEffect(() => {
+    const inputType = userInputType.current;
+    document.addEventListener(inputType, handleClickOutside);
+    document.addEventListener("keydown", handleKeyDown);
+    return function cleanup() {
+      document.removeEventListener(inputType, handleClickOutside);
+      document.removeEventListener("keydown", handleKeyDown);
+    };
+  }, [handleClickOutside, handleKeyDown]);
+
+  function mainButtonProps() {
+    return {
+      onMouseEnter: hideButtons,
+      onFocus: hideButtons,
+      onTouchStart: hideButtons,
+      iconPosition,
+      as,
+      buttonType,
+      disabled,
+      iconType,
+      onClick,
+      size,
+      subtext
+    };
+  }
+
+  function toggleButtonProps() {
+    const opts = {
+      disabled,
+      displayed: showAdditionalButtons,
+      onTouchStart: showButtons,
+      onFocus: focusToggleButton,
+      onBlur: () => {
+        isToggleButtonFocused.current = false;
+      },
+      onKeyDown: handleToggleButtonKeyDown,
+      buttonType: buttonType || as,
+      size
+    };
+
+    if (!disabled) {
+      opts.onMouseEnter = showButtons;
+    }
+
+    return opts;
+  }
+
+  function componentTags() {
+    return {
+      "data-component": "split-button",
+      "data-element": rest["data-element"],
+      "data-role": rest["data-role"]
+    };
+  }
+
+  function addRef(ref, index) {
+    if (!ref) return;
+    additionalButtons.current[index] = ref;
+  }
+
+  function getIconColor() {
+    const colorsMap = {
+      primary: theme.colors.white,
+      secondary: theme.colors.primary
+    };
+    return colorsMap[buttonType || as];
+  }
+
+  function renderMainButton() {
+    return [/*#__PURE__*/React.createElement(Button, _extends({
+      "data-element": "main-button",
+      key: "main-button",
+      id: buttonLabelId.current
+    }, mainButtonProps()), text), /*#__PURE__*/React.createElement(StyledSplitButtonToggle, _extends({
+      "aria-haspopup": "true",
+      "aria-expanded": showAdditionalButtons,
+      "aria-label": "Show more",
+      "data-element": "toggle-button",
+      key: "toggle-button",
+      type: "button"
+    }, toggleButtonProps()), /*#__PURE__*/React.createElement(Icon, {
+      type: "dropdown",
+      bgSize: "extra-small",
+      color: getIconColor(),
+      bg: "transparent",
+      disabled: disabled
+    }))];
+  }
+
+  function showButtons() {
+    setShowAdditionalButtons(true);
+    setMinWidth(CONTENT_WIDTH_RATIO * splitButtonNode.current.getBoundingClientRect().width);
+  }
+
+  function handleToggleButtonKeyDown(ev) {
+    if (Events.isEnterKey(ev) || Events.isSpaceKey(ev)) {
+      additionalButtons.current[0].focus();
+    }
+  }
+
+  function childrenWithProps() {
+    const childArray = Array.isArray(children) ? children : [children];
+    return childArray.filter(Boolean).map((child, index) => {
+      const childProps = {
+        key: index.toString(),
+        role: "menuitem",
+        ref: button => addRef(button, index),
+        tabIndex: -1
+      };
+
+      if (child.type === Button) {
+        return /*#__PURE__*/React.createElement(ButtonWithForwardRef, _extends({}, child.props, childProps));
+      }
+
+      return /*#__PURE__*/React.cloneElement(child, childProps);
+    });
+  }
+
+  function focusToggleButton() {
+    isToggleButtonFocused.current = true;
+    showButtons();
+  }
+
+  function isActiveElement(node) {
+    return node === document.activeElement;
+  }
+
+  function renderAdditionalButtons() {
+    if (!showAdditionalButtons) return null;
+    return /*#__PURE__*/React.createElement(Popover, {
+      placement: "bottom-end",
+      reference: splitButtonNode
+    }, /*#__PURE__*/React.createElement(StyledSplitButtonChildrenContainer, {
+      role: "menu",
+      "aria-label": text,
+      "data-element": "additional-buttons",
+      align: align,
+      minWidth: minWidth,
+      ref: buttonContainer
+    }, childrenWithProps()));
+  }
+
+  return /*#__PURE__*/React.createElement(StyledSplitButton, _extends({
+    "aria-haspopup": "true",
+    onMouseLeave: hideButtons,
+    ref: splitButtonNode
+  }, componentTags(), filterStyledSystemMarginProps(rest)), renderMainButton(), renderAdditionalButtons());
+};
+
+SplitButton.propTypes = { ...marginPropTypes,
+
+  /** Button type: "primary" | "secondary" */
+  buttonType: PropTypes.oneOf(["primary", "secondary"]),
+
+  /** Button type: "primary" | "secondary" for legacy theme */
+  as: PropTypes.oneOf(["primary", "secondary"]),
+
+  /** The additional button to display. */
+  children: PropTypes.node.isRequired,
+
+  /** A custom value for the data-element attribute */
+  "data-element": PropTypes.string,
+
+  /** A custom value for the data-role attribute */
+  "data-role": PropTypes.string,
+
+  /** Gives the button a disabled state. */
+  disabled: PropTypes.bool,
+
+  /** The size of the buttons in the SplitButton. */
+  size: PropTypes.oneOf(["small", "medium", "large"]),
+
+  /** The text to be displayed in the SplitButton. */
+  text: PropTypes.string.isRequired,
+
+  /** Defines an Icon position within the button: "before" | "after" */
+  iconPosition: PropTypes.oneOf(["before", "after"]),
+
+  /** Set align of the rendered content */
+  align: PropTypes.oneOf(["left", "right"])
+};
+SplitButton.safeProps = ["buttonType", "as", "disabled", "size"];
+export default SplitButton;

package/esm/components/split-button/split-button.config.d.ts

@@ -0,0 +1,4 @@
+export const SPLIT_BUTTON_ICON_POSITIONS: string[];
+export const SPLIT_BUTTON_THEMES: string[];
+export const SPLIT_BUTTON_SIZES: string[];
+export const SPLIT_BUTTON_ALIGNMENTS: string[];

package/esm/components/split-button/split-button.config.js

@@ -0,0 +1,4 @@
+export const SPLIT_BUTTON_ICON_POSITIONS = ["before", "after"];
+export const SPLIT_BUTTON_THEMES = ["primary", "secondary"];
+export const SPLIT_BUTTON_SIZES = ["small", "medium", "large"];
+export const SPLIT_BUTTON_ALIGNMENTS = ["left", "right"];

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

@@ -0,0 +1,28 @@
+import * as React from "react";
+
+export interface SplitButtonProps {
+  /** Set align of the rendered content */
+  align?: "left" | "right";
+  /** Button type: "primary" | "secondary" for legacy theme */
+  as?: "primary" | "secondary";
+  /** Button type: "primary" | "secondary" */
+  buttonType?: "primary" | "secondary";
+  /** The additional button to display. */
+  children: React.ReactNode;
+  /** A custom value for the data-element attribute */
+  "data-element"?: string;
+  /** A custom value for the data-role attribute */
+  "data-role"?: string;
+  /** Gives the button a disabled state. */
+  disabled?: boolean;
+  /** Defines an Icon position within the button: "before" | "after" */
+  iconPosition?: "before" | "after";
+  /** The size of the buttons in the SplitButton. */
+  size?: "small" | "medium" | "large";
+  /** The text to be displayed in the SplitButton. */
+  text: string;
+}
+
+declare class SplitButton extends React.Component<SplitButtonProps> {}
+
+export default SplitButton;

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

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

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

@@ -0,0 +1,24 @@
+import styled from "styled-components";
+import { margin } from "styled-system";
+import StyledButton from "../button/button.style";
+import baseTheme from "../../style/themes/base";
+const StyledSplitButton = styled.div`
+  ${margin}
+
+  display: inline-block;
+  position: relative;
+
+  & > ${StyledButton} {
+    margin: 0;
+
+    &:focus {
+      border: 3px solid var(--colorsSemanticFocus500);
+      outline: none;
+      margin: -1px;
+    }
+  }
+`;
+StyledSplitButton.defaultProps = {
+  theme: baseTheme
+};
+export default StyledSplitButton;

package/esm/components/step-sequence/index.d.ts

@@ -0,0 +1,2 @@
+export { default as StepSequence } from "./step-sequence";
+export { default as StepSequenceItem } from "./step-sequence-item/step-sequence-item";

package/esm/components/step-sequence/index.js

@@ -0,0 +1,2 @@
+export { default as StepSequence } from "./step-sequence.component";
+export { default as StepSequenceItem } from "./step-sequence-item";

package/esm/components/step-sequence/step-sequence-item/index.d.ts

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

package/esm/components/step-sequence/step-sequence-item/index.js

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

package/esm/components/step-sequence/step-sequence-item/step-sequence-item-content.style.d.ts

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

package/esm/components/step-sequence/step-sequence-item/step-sequence-item-content.style.js

@@ -0,0 +1,5 @@
+import styled from "styled-components";
+const StepSequenceItemContentStyle = styled.span`
+  display: flex;
+`;
+export default StepSequenceItemContentStyle;

package/esm/components/step-sequence/step-sequence-item/step-sequence-item-hidden-label.style.d.ts

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

package/esm/components/step-sequence/step-sequence-item/step-sequence-item-hidden-label.style.js

@@ -0,0 +1,9 @@
+import styled from "styled-components";
+const StepSequenceItemHiddenLabelStyle = styled.span`
+  position: absolute !important;
+  height: 1px;
+  width: 1px;
+  overflow: hidden;
+  clip: rect(1px, 1px, 1px, 1px);
+`;
+export default StepSequenceItemHiddenLabelStyle;

package/esm/components/step-sequence/step-sequence-item/step-sequence-item-indicator.style.d.ts

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

package/esm/components/step-sequence/step-sequence-item/step-sequence-item-indicator.style.js

@@ -0,0 +1,9 @@
+import styled from "styled-components";
+const StepSequenceItemIndicatorStyle = styled.span`
+  display: block;
+  min-width: 16px;
+  height: 16px;
+  margin-right: 8px;
+  text-align: center;
+`;
+export default StepSequenceItemIndicatorStyle;

package/esm/components/step-sequence/step-sequence-item/step-sequence-item.component.d.ts

@@ -0,0 +1,20 @@
+export default StepSequenceItem;
+declare function StepSequenceItem(props: any): JSX.Element;
+declare namespace StepSequenceItem {
+    namespace propTypes {
+        const children: PropTypes.Validator<string | number | boolean | {} | PropTypes.ReactElementLike | PropTypes.ReactNodeArray>;
+        const indicator: PropTypes.Validator<string>;
+        const hideIndicator: PropTypes.Requireable<boolean>;
+        const ariaLabel: PropTypes.Requireable<string>;
+        const status: PropTypes.Requireable<string>;
+        const hiddenCompleteLabel: PropTypes.Requireable<string>;
+        const hiddenCurrentLabel: PropTypes.Requireable<string>;
+    }
+    namespace defaultProps {
+        const status_1: string;
+        export { status_1 as status };
+        const hideIndicator_1: boolean;
+        export { hideIndicator_1 as hideIndicator };
+    }
+}
+import PropTypes from "prop-types";