carbon-react 134.2.0 → 135.0.0

package/esm/components/carousel/carousel.style.js

@@ -1,154 +0,0 @@
-import styled, { css } from "styled-components";
-import Icon from "../icon";
-import { slideAnimation, fadeAnimation } from "./slide.config";
-import { SlideStyle } from "./slide/slide.style";
-import addFocusStyling from "../../style/utils/add-focus-styling";
-import baseTheme from "../../style/themes/base";
-const CarouselNavigationStyle = styled.div`
-  margin-top: -32.5px;
-  position: absolute;
-  top: 52%;
-  z-index: 20;
-`;
-const CarouselPreviousButtonWrapperStyle = styled(CarouselNavigationStyle)`
-  margin-left: 8px;
-`;
-const CarouselNextButtonWrapperStyle = styled(CarouselNavigationStyle)`
-  right: 0;
-  margin-right: 8px;
-`;
-const CarouselStyledIcon = styled(Icon)`
-  cursor: pointer;
-  color: var(--colorsActionMajorYang100);
-  &::before {
-    font-size: 16px;
-  }
-`;
-const CarouselStyledIconLeft = styled(CarouselStyledIcon)`
-  transform: rotate(90deg);
-`;
-const CarouselStyledIconRight = styled(CarouselStyledIcon)`
-  transform: rotate(-90deg);
-`;
-const oldFocusStyling = `
-  outline: solid 2px var(--colorsSemanticFocus500);
-`;
-const CarouselButtonStyle = styled.button.attrs({
-  type: "button"
-})`
-  ${({
-  disabled
-}) => css`
-    border: none;
-    border-radius: var(--borderRadius400);
-    width: 40px;
-    height: 40px;
-    border-width: var(--borderWidth200);
-    border-color: var(--colorsActionMajorTransparent);
-    background-color: ${disabled ? "var(--colorsActionDisabled500)" : "var(--colorsActionMajor500)"};
-
-    ${disabled && css`
-      ${CarouselStyledIcon} {
-        color: var(--colorsActionMajorYin030);
-      }
-    `}
-
-    &:hover {
-      background-color: var(--colorsActionMajor600);
-      cursor: ${disabled ? "default" : "pointer"};
-
-      ${disabled && css`
-        background-color: var(--colorsActionDisabled500);
-        cursor: default;
-
-        ${CarouselStyledIcon} {
-          cursor: default;
-        }
-      `}
-    }
-
-    &:active {
-      border: none;
-    }
-
-    &:focus {
-      ${({
-  theme
-}) => `${!theme.focusRedesignOptOut ? addFocusStyling() : /* istanbul ignore next */oldFocusStyling}`}
-
-      ::-moz-focus-inner {
-        border: 0;
-      }
-
-      ${disabled && css`
-        outline: none;
-      `}
-    }
-  `}
-`;
-CarouselButtonStyle.defaultProps = {
-  theme: baseTheme
-};
-const CarouselSelectorInputStyle = styled.input`
-  display: none;
-`;
-const CarouselSelectorLabelStyle = styled.label`
-  display: inline-block;
-  border-radius: var(--borderRadius100);
-  width: 10px;
-  height: 10px;
-  background: var(--colorsActionMinor200);
-  margin: 0px 4px;
-
-  &:hover {
-    cursor: pointer;
-  }
-`;
-const CarouselSelectorWrapperStyle = styled.div`
-  ${css`
-    height: 20px;
-    margin-top: 25px;
-    text-align: center;
-
-    ${CarouselSelectorInputStyle}:checked {
-      + ${CarouselSelectorLabelStyle} {
-        width: 10px;
-        height: 10px;
-        background: var(--colorsActionMinor400);
-        border-color: transparent;
-        position: relative;
-      }
-    }
-  `}
-`;
-const CarouselSelectorInputWrapperStyle = styled.span`
-  display: inline-block;
-  line-height: 20px;
-  vertical-align: middle;
-`;
-const CarouselSliderWrapper = styled.div`
-  transition: 0.4s;
-  display: flex;
-  position: relative;
-
-  ${({
-  elementIndex
-}) => css`
-    left: ${10 - 80 * elementIndex}%;
-
-    ${SlideStyle}:nth-of-type(${elementIndex + 1}) {
-      transform: scale(1);
-      opacity: 1;
-    }
-  `}
-`;
-const CarouselWrapperStyle = styled.div`
-  .carbon-carousel__content {
-    overflow: hidden;
-    position: relative;
-  }
-
-  ${slideAnimation};
-  ${fadeAnimation};
-`;
-export { CarouselNavigationStyle, CarouselNextButtonWrapperStyle, CarouselPreviousButtonWrapperStyle, CarouselButtonStyle, CarouselStyledIcon, CarouselStyledIconLeft, CarouselStyledIconRight, CarouselSelectorWrapperStyle, CarouselSelectorInputWrapperStyle, CarouselSelectorInputStyle, CarouselSelectorLabelStyle, CarouselWrapperStyle, CarouselSliderWrapper };

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

@@ -1,4 +0,0 @@
-export { Carousel } from "./carousel.component";
-export { default as Slide } from "./slide";
-export type { CarouselProps } from "./carousel.component";
-export type { SlideProps } from "./slide";

package/esm/components/carousel/index.js

@@ -1,2 +0,0 @@
-export { Carousel } from "./carousel.component";
-export { default as Slide } from "./slide";

package/esm/components/carousel/slide/index.d.ts

@@ -1,2 +0,0 @@
-export { default } from "./slide.component";
-export type { SlideProps } from "./slide.component";

package/esm/components/carousel/slide/index.js

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

package/esm/components/carousel/slide/slide.component.d.ts

@@ -1,12 +0,0 @@
-import React from "react";
-export interface SlideProps {
-    /** Content of the Slide */
-    children?: React.ReactNode;
-    /** Accepts a callback function which is triggered on Slide click */
-    onClick?: (ev: React.MouseEvent<HTMLDivElement>) => void;
-}
-export declare const Slide: {
-    (props: SlideProps): React.JSX.Element;
-    displayName: string;
-};
-export default Slide;

package/esm/components/carousel/slide/slide.component.js

@@ -1,9 +0,0 @@
-function _extends() { _extends = Object.assign ? Object.assign.bind() : 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); }
-/* eslint-disable react/prop-types */
-import React from "react";
-import PropTypes from "prop-types";
-import tagComponent from "../../../__internal__/utils/helpers/tags/tags";
-import { SlideStyle } from "./slide.style";
-export const Slide = props => /*#__PURE__*/React.createElement(SlideStyle, _extends({}, props, tagComponent("slide", props)));
-Slide.displayName = "Slide";
-export default Slide;

package/esm/components/carousel/slide/slide.style.d.ts

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

package/esm/components/carousel/slide/slide.style.js

@@ -1,32 +0,0 @@
-import styled, { css } from "styled-components";
-const SlideStyle = styled.div`
-  ${({
-  onClick
-}) => css`
-    box-sizing: border-box;
-    display: inline-block;
-    width: 100%;
-    z-index: 10;
-    border-radius: var(--borderRadius200);
-    overflow: hidden;
-
-    transition: 0.5s;
-    min-width: 80%;
-    transform: scale(0.9);
-    opacity: 0.3;
-    margin: 30px 0;
-    box-shadow: var(--boxShadow200);
-    background-color: var(--colorsUtilityYang100);
-
-    ${onClick && css`
-      :hover {
-        transition: all 0.2s ease-in;
-        transform: scale(1.02);
-        cursor: pointer;
-      }
-    `}
-  `}
-`;
-
-// eslint-disable-next-line import/prefer-default-export
-export { SlideStyle };

package/esm/components/carousel/slide.config.d.ts

@@ -1,3 +0,0 @@
-declare const slideAnimation: import("styled-components").FlattenSimpleInterpolation;
-declare const fadeAnimation: import("styled-components").FlattenSimpleInterpolation;
-export { slideAnimation, fadeAnimation };

package/esm/components/carousel/slide.config.js

@@ -1,80 +0,0 @@
-import { css } from "styled-components";
-const animationStyle = "all 500ms cubic-bezier(.23,1.10,.69,1.01)";
-const slideAnimation = css`
-  // NEXT
-  .slide-next-enter {
-    opacity: 0;
-    left: 100%;
-    position: absolute;
-  }
-
-  .slide-next-enter.slide-next-enter-active {
-    opacity: 1;
-    left: 0;
-    transition: ${animationStyle};
-  }
-
-  .slide-next-exit {
-    opacity: 1;
-    left: 0;
-    position: relative;
-  }
-
-  .slide-next-exit.slide-next-exit-active {
-    opacity: 0;
-    left: -100%;
-    transition: ${animationStyle};
-  }
-
-  // PREVIOUS
-  .slide-previous-enter {
-    opacity: 0;
-    left: -100%;
-    position: absolute;
-  }
-
-  .slide-previous-enter.slide-previous-enter-active {
-    opacity: 1;
-    left: 0;
-    transition: ${animationStyle};
-  }
-
-  .slide-previous-exit {
-    opacity: 1;
-    left: 0;
-    position: relative;
-  }
-
-  .slide-previous-exit.slide-previous-exit-active {
-    opacity: 0;
-    left: 100%;
-    transition: ${animationStyle};
-  }
-`;
-const fadeAnimation = css`
-  // FADE
-  .carousel-transition-fade-enter {
-    opacity: 0;
-    position: absolute;
-  }
-
-  .carousel-transition-fade-enter.carousel-transition-fade-enter-active {
-    opacity: 1;
-    transition: ${animationStyle};
-  }
-
-  .carousel-transition-fade-exit {
-    opacity: 1;
-    position: relative;
-  }
-
-  .carousel-transition-fade-exit.carousel-transition-fade-exit-active {
-    opacity: 0;
-    transition: ${animationStyle};
-  }
-
-  .carbon-carousel__transition {
-    height: 100%;
-  }
-`;
-export { slideAnimation, fadeAnimation };

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

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

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

@@ -1,2 +0,0 @@
-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

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

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

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

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

@@ -1,19 +0,0 @@
-import React from "react";
-export interface StepSequenceItemProps {
-    /** Aria label */
-    ariaLabel?: string;
-    /** Hidden label to be displayed if item is complete */
-    hiddenCompleteLabel?: string;
-    /** Hidden label to be displayed if item is current */
-    hiddenCurrentLabel?: string;
-    /** Value to be displayed before text for uncomplete steps */
-    indicator: string;
-    /** Flag to hide the indicator for uncomplete steps */
-    hideIndicator?: boolean;
-    /** Status for the step */
-    status?: "complete" | "current" | "incomplete";
-    /** Content to be displayed */
-    children: React.ReactNode;
-}
-export declare const StepSequenceItem: ({ hideIndicator, indicator, status, hiddenCompleteLabel, hiddenCurrentLabel, children, ariaLabel, ...rest }: StepSequenceItemProps) => React.JSX.Element;
-export default StepSequenceItem;

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

@@ -1,43 +0,0 @@
-function _extends() { _extends = Object.assign ? Object.assign.bind() : 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 "prop-types";
-import { StyledStepSequenceItem, StyledStepSequenceItemContent, StyledStepSequenceItemIndicator, StyledStepSequenceItemHiddenLabel } from "./step-sequence-item.style";
-import Icon from "../../icon";
-import { StepSequenceContext } from "../step-sequence.component";
-export const StepSequenceItem = ({
-  hideIndicator = false,
-  indicator,
-  status = "incomplete",
-  hiddenCompleteLabel,
-  hiddenCurrentLabel,
-  children,
-  ariaLabel,
-  ...rest
-}) => {
-  const {
-    orientation
-  } = useContext(StepSequenceContext);
-  const indicatorText = () => {
-    return !hideIndicator ? /*#__PURE__*/React.createElement(StyledStepSequenceItemIndicator, null, indicator) : null;
-  };
-  const icon = () => status === "complete" ? /*#__PURE__*/React.createElement(Icon, {
-    type: "tick"
-  }) : indicatorText();
-  const hiddenLabel = () => {
-    if (hiddenCompleteLabel && status === "complete") {
-      return /*#__PURE__*/React.createElement(StyledStepSequenceItemHiddenLabel, null, hiddenCompleteLabel);
-    }
-    if (hiddenCurrentLabel && status === "current") {
-      return /*#__PURE__*/React.createElement(StyledStepSequenceItemHiddenLabel, null, hiddenCurrentLabel);
-    }
-    return null;
-  };
-  return /*#__PURE__*/React.createElement(StyledStepSequenceItem, _extends({
-    "data-component": "step-sequence-item",
-    orientation: orientation,
-    status: status,
-    key: `step-seq-item-${indicator}`,
-    "aria-label": ariaLabel
-  }, rest), hiddenLabel(), /*#__PURE__*/React.createElement(StyledStepSequenceItemContent, null, icon(), /*#__PURE__*/React.createElement("span", null, children)));
-};
-export default StepSequenceItem;

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

@@ -1,6 +0,0 @@
-import { StepSequenceProps } from "../step-sequence.component";
-import { StepSequenceItemProps } from "./step-sequence-item.component";
-export declare const StyledStepSequenceItem: import("styled-components").StyledComponent<"li", any, Pick<StepSequenceItemProps, "status"> & Pick<StepSequenceProps, "orientation">, never>;
-export declare const StyledStepSequenceItemContent: import("styled-components").StyledComponent<"span", any, {}, never>;
-export declare const StyledStepSequenceItemHiddenLabel: import("styled-components").StyledComponent<"span", any, {}, never>;
-export declare const StyledStepSequenceItemIndicator: import("styled-components").StyledComponent<"span", any, {}, never>;

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

@@ -1,96 +0,0 @@
-import styled, { css } from "styled-components";
-import StyledIcon from "../../icon/icon.style";
-export const StyledStepSequenceItem = styled.li`
-  display: flex;
-  align-items: center;
-  flex-grow: 1;
-  text-align: right;
-  list-style-type: none;
-  color: var(--colorsUtilityYin055);
-
-  ${({
-  orientation,
-  status
-}) => {
-  const side = orientation === "vertical" ? "left" : "top";
-  return css`
-      &::before {
-        content: "";
-        flex-grow: 1;
-        display: block;
-        margin: 0 16px;
-        border-${side}: var(--sizing025) dashed var(--colorsUtilityYin055);
-      }
-
-      & span {
-        display: flex;
-        align-items: center;
-        justify-content: center;
-      }
-
-      ${StyledIcon} {
-        margin-right: 8px;
-        color: var(--colorsBaseTheme, var(--colorsSemanticPositive500));
-      }
-
-      &:first-child {
-        flex-grow: 0;
-
-        &::before {
-          display: none;
-        }
-      }
-
-      ${status === "current" && css`
-          color: var(--colorsUtilityYin090);
-
-          &::before {
-            border-${side}-color: var(--colorsUtilityYin090);
-            border-${side}-style: solid;
-          }
-        `}
-
-      ${status === "complete" && css`
-          color: var(--colorsBaseTheme, var(--colorsSemanticPositive500));
-
-          &::before {
-            border-${side}-color: var(
-              --colorsBaseTheme,
-              var(--colorsSemanticPositive500)
-            );
-            border-${side}-style: solid;
-          }
-        `}
-
-      ${orientation === "vertical" && css`
-          flex-direction: column;
-          align-items: flex-start;
-
-          &::before {
-            flex-grow: 0;
-            border-left-width: var(--sizing025);
-            height: 100%;
-            min-height: var(--sizing300);
-            margin: 12px 8px;
-          }
-        `}
-    `;
-}}
-`;
-export const StyledStepSequenceItemContent = styled.span`
-  display: flex;
-`;
-export const StyledStepSequenceItemHiddenLabel = styled.span`
-  position: absolute !important;
-  height: 1px;
-  width: 1px;
-  overflow: hidden;
-  clip: rect(1px, 1px, 1px, 1px);
-`;
-export const StyledStepSequenceItemIndicator = styled.span`
-  display: block;
-  min-width: 16px;
-  height: 16px;
-  margin-right: 8px;
-  text-align: center;
-`;

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

@@ -1,13 +0,0 @@
-import React from "react";
-import { SpaceProps } from "styled-system";
-export declare const StepSequenceContext: React.Context<{
-    orientation: "horizontal" | "vertical";
-}>;
-export interface StepSequenceProps extends SpaceProps {
-    /** Step sequence items to be rendered */
-    children: React.ReactNode;
-    /** The direction that step sequence items should be rendered */
-    orientation?: "horizontal" | "vertical";
-}
-export declare const StepSequence: ({ children, orientation, ...props }: StepSequenceProps) => React.JSX.Element;
-export default StepSequence;

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

@@ -1,29 +0,0 @@
-function _extends() { _extends = Object.assign ? Object.assign.bind() : 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 Logger from "../../__internal__/utils/logger";
-import StyledStepSequence from "./step-sequence.style";
-export const StepSequenceContext = /*#__PURE__*/React.createContext({
-  orientation: "horizontal"
-});
-let deprecateWarnTriggered = false;
-export const StepSequence = ({
-  children,
-  orientation = "horizontal",
-  ...props
-}) => {
-  if (!deprecateWarnTriggered) {
-    deprecateWarnTriggered = true;
-    Logger.deprecate("The `StepSequence` component is deprecated and will soon be removed," + " please use the `StepFlow` component instead.");
-  }
-  return /*#__PURE__*/React.createElement(StyledStepSequence, _extends({
-    "data-component": "step-sequence",
-    orientation: orientation,
-    p: 0
-  }, props), /*#__PURE__*/React.createElement(StepSequenceContext.Provider, {
-    value: {
-      orientation
-    }
-  }, children));
-};
-export default StepSequence;

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

@@ -1,2 +0,0 @@
-export declare const STEP_SEQUENCE_STEPS: string[];
-export declare const STEP_SEQUENCE_ORIENTATION: string[];

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

@@ -1,2 +0,0 @@
-export const STEP_SEQUENCE_STEPS = ["complete", "current", "incomplete"];
-export const STEP_SEQUENCE_ORIENTATION = ["horizontal", "vertical"];

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

@@ -1,4 +0,0 @@
-import { SpaceProps } from "styled-system";
-import { StepSequenceProps } from "./step-sequence.component";
-declare const StyledStepSequence: import("styled-components").StyledComponent<"ol", any, Pick<StepSequenceProps, "orientation"> & SpaceProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, string | number | symbol>, never>;
-export default StyledStepSequence;

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

@@ -1,21 +0,0 @@
-import styled, { css } from "styled-components";
-import { space } from "styled-system";
-import { baseTheme } from "../../style/themes";
-const StyledStepSequence = styled.ol`
-  display: flex;
-  margin: 0;
-  font-weight: bold;
-
-  ${({
-  orientation
-}) => orientation === "vertical" && css`
-      flex-direction: column;
-      height: 100%;
-    `}
-
-  ${space}
-`;
-StyledStepSequence.defaultProps = {
-  theme: baseTheme
-};
-export default StyledStepSequence;

package/lib/components/carousel/carousel.component.d.ts

@@ -1,25 +0,0 @@
-import React from "react";
-import { TagProps } from "../../__internal__/utils/helpers/tags/tags";
-export interface CarouselProps extends TagProps {
-    /** Individual tabs */
-    children?: React.ReactNode;
-    /** [legacy] Custom className */
-    className?: string;
-    /** Enables the next button */
-    enableNextButton?: boolean;
-    /** Enables the previous button */
-    enablePreviousButton?: boolean;
-    /** Enables the slide selector */
-    enableSlideSelector?: boolean;
-    /** The selected tab on page load */
-    initialSlideIndex?: number | string;
-    /** Action to be called on slide change */
-    onSlideChange?: (index: number, transitionDirection: string) => void;
-    /** The selected slide */
-    slideIndex?: number | string;
-}
-export declare const Carousel: {
-    ({ children, className, enableSlideSelector, enablePreviousButton, enableNextButton, initialSlideIndex, onSlideChange, slideIndex, ...props }: CarouselProps): React.JSX.Element;
-    displayName: string;
-};
-export default Carousel;