carbon-react 104.33.1 → 104.35.0

package/esm/components/tile/tile-footer/tile-footer.component.d.ts

@@ -0,0 +1,13 @@
+export default TileFooter;
+declare function TileFooter({ variant, children, ...props }: {
+    [x: string]: any;
+    variant: any;
+    children: any;
+}): JSX.Element;
+declare namespace TileFooter {
+    namespace propTypes {
+        const variant: PropTypes.Requireable<string>;
+        const children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+    }
+}
+import PropTypes from "prop-types";

package/esm/components/tile/tile-footer/tile-footer.component.js

@@ -0,0 +1,27 @@
+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 styledSystemPropTypes from "@styled-system/prop-types";
+import StyledTileFooter from "./tile-footer.style";
+import { filterStyledSystemPaddingProps } from "../../../style/utils";
+const paddingPropTypes = filterStyledSystemPaddingProps(styledSystemPropTypes.space);
+
+const TileFooter = ({
+  variant,
+  children,
+  ...props
+}) => {
+  return /*#__PURE__*/React.createElement(StyledTileFooter, _extends({
+    "data-component": "tile-footer",
+    variant: variant
+  }, props), children);
+};
+
+TileFooter.propTypes = { ...paddingPropTypes,
+
+  /** set which background color variant should be used */
+  variant: PropTypes.oneOf(["default", "transparent"]),
+  children: PropTypes.node
+};
+export default TileFooter;

package/esm/components/tile/tile-footer/tile-footer.d.ts

@@ -0,0 +1,13 @@
+import * as React from "react";
+import { PaddingProps } from "styled-system";
+
+export interface TileFooterProps extends PaddingProps {
+  /** set which background color variant should be used */
+  variant?: "default" | "transparent";
+}
+
+declare function TileFooter(
+  props: React.PropsWithChildren<TileFooterProps>
+): JSX.Element;
+
+export default TileFooter;

package/esm/components/tile/tile-footer/tile-footer.style.d.ts

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

package/esm/components/tile/tile-footer/tile-footer.style.js

@@ -0,0 +1,17 @@
+import styled, { css } from "styled-components";
+import { padding } from "styled-system";
+import { baseTheme } from "../../../style/themes";
+const StyledTileFooter = styled.div`
+  ${padding}
+
+  ${({
+  variant
+}) => css`
+    background: ${variant === "transparent" ? "transparent" : "var(--colorsUtilityMajor025)"};
+    border-top: 1px solid var(--colorsUtilityMajor100);
+  `}
+`;
+StyledTileFooter.defaultProps = {
+  theme: baseTheme
+};
+export default StyledTileFooter;

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

@@ -0,0 +1,12 @@
+export default Tile;
+declare function Tile({ as, p, children, orientation, width, ...props }: {
+    [x: string]: any;
+    as?: string | undefined;
+    p?: number | undefined;
+    children: any;
+    orientation?: string | undefined;
+    width: any;
+}): JSX.Element;
+declare namespace Tile {
+    const propTypes: any;
+}

package/esm/components/tile/tile.component.js

@@ -0,0 +1,77 @@
+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 propTypes from "@styled-system/prop-types";
+import { StyledTile, TileContent } from "./tile.style.js";
+
+const Tile = ({
+  as = "tile",
+  p = 3,
+  children,
+  orientation = "horizontal",
+  width,
+  ...props
+}) => {
+  const isHorizontal = () => orientation === "horizontal";
+
+  const isVertical = () => orientation === "vertical";
+
+  const wrappedChildren = React.Children.map(children, (child, index) => {
+    if (!child) {
+      return null;
+    }
+
+    const {
+      width: contentWidth,
+      ...childProps
+    } = child.props;
+    const key = child.key || `tile-content-${index + 1}`;
+    return /*#__PURE__*/React.createElement(TileContent, _extends({
+      key: key,
+      width: contentWidth,
+      isHorizontal: isHorizontal(orientation),
+      isVertical: isVertical(orientation)
+    }, isVertical(orientation) && {
+      pt: props.pt || props.py || p,
+      pb: props.pb || props.py || p
+    }, isHorizontal(orientation) && {
+      pr: props.pr || props.px || p,
+      pl: props.pl || props.px || p
+    }), /*#__PURE__*/React.cloneElement(child, childProps));
+  });
+  return /*#__PURE__*/React.createElement(StyledTile, _extends({
+    tileTheme: as,
+    width: width,
+    "data-component": "tile",
+    isHorizontal: isHorizontal(orientation),
+    p: p
+  }, props), wrappedChildren);
+};
+
+Tile.propTypes = {
+  /** Styled system spacing props */
+  ...propTypes.space,
+
+  /** Sets the theme of the tile - either 'tile' or 'transparent' */
+  as: PropTypes.oneOf(["tile", "transparent"]),
+
+  /**
+   * The content to render within the tile. Each child will be wrapped with
+   * a TileContent wrapper, which allows any individual child component to take a
+   * percentage-based width prop, dictating the percentage of the tile width it will take up.
+   *
+   * Width will have no effect on a child component if the tile orientation is set to 'vertical'.
+   */
+  children: PropTypes.node,
+
+  /** The orientation of the tile - set to either horizontal or vertical */
+  orientation: PropTypes.oneOf(["horizontal", "vertical"]),
+
+  /**
+   * Set a percentage-based width for the whole Tile component, relative to its parent.
+   * If unset or zero, this will default to 100%.
+   */
+  width: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
+};
+export default Tile;

package/esm/components/tile/tile.config.d.ts

@@ -0,0 +1,2 @@
+export const TILE_ORIENTATIONS: string[];
+export const TILE_THEMES: string[];

package/esm/components/tile/tile.config.js

@@ -0,0 +1,2 @@
+export const TILE_ORIENTATIONS = ["horizontal", "vertical"];
+export const TILE_THEMES = ["tile", "transparent"];

package/esm/components/tile/tile.d.ts

@@ -0,0 +1,31 @@
+import * as React from "react";
+import { SpaceProps } from "styled-system";
+
+export interface TileProps extends SpaceProps {
+  /** Sets the theme of the tile - either 'tile' or 'transparent' */
+  as?: "tile" | "transparent";
+  /**
+   * The content to render within the tile. Each child will be wrapped with
+   * a TileContent wrapper, which allows any individual child component to take a
+   * percentage-based width prop, dictating the percentage of the tile width it will take up.
+   *
+   * Width will have no effect on a child component if the tile orientation is set to 'vertical'.
+   */
+  children?: React.ReactNode;
+  /** The orientation of the tile - set to either horizontal or vertical */
+  orientation?: "horizontal" | "vertical";
+  /**
+   * Set a pixel with for the Tile component. If both are set to non-zero values, this
+   * takes precedence over the percentage-based "width" prop.
+   */
+  pixelWidth?: number;
+  /**
+   * Set a percentage-based width for the whole Tile component, relative to its parent.
+   * If unset or zero, this will default to 100%.
+   */
+  width?: string | number;
+}
+
+declare function Tile(props: TileProps): JSX.Element;
+
+export default Tile;

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

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

package/esm/components/tile/tile.style.js

@@ -0,0 +1,94 @@
+import styled, { css } from "styled-components";
+import PropTypes from "prop-types";
+import { space } from "styled-system";
+import baseTheme from "../../style/themes/base";
+import computeWidth from "../../style/utils/width";
+const TileContent = styled.div`
+  ${({
+  isHorizontal,
+  isVertical,
+  width
+}) => css`
+    ${space}
+
+    box-sizing: border-box;
+    position: relative;
+    flex-grow: 1;
+
+    ${isHorizontal && css`
+      display: inline;
+
+      :last-of-type {
+        padding-right: 0;
+      }
+
+      :first-of-type {
+        padding-left: 0;
+      }
+
+      & + & {
+        margin-top: 0;
+        border-left: solid 1px var(--colorsUtilityMajor050);
+      }
+    `}
+
+    ${isVertical && css`
+      width: auto;
+
+      :last-of-type {
+        padding-bottom: 0;
+      }
+
+      :first-of-type {
+        padding-top: 0;
+      }
+
+      & + & {
+        margin-top: 0;
+        border-top: solid 1px var(--colorsUtilityMajor050);
+      }
+    `}
+
+    ${width && css`
+      flex-grow: 0;
+      ${computeWidth}
+    `}
+  `}
+`;
+const StyledTile = styled.div`
+  ${({
+  isHorizontal,
+  tileTheme,
+  width
+}) => css`
+    ${space}
+
+    box-sizing: border-box;
+    background-color: ${tileTheme === "tile" ? "var(--colorsUtilityYang100)" : "transparent"};
+    border: 1px solid var(--colorsUtilityMajor100);
+    display: flex;
+    flex-direction: ${isHorizontal ? "row" : "column"};
+    position: relative;
+    width: 100%;
+
+    ${width && css`
+      ${computeWidth}
+    `}
+  `}
+`;
+TileContent.propTypes = {
+  width: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
+};
+TileContent.defaultProps = {
+  theme: baseTheme
+};
+StyledTile.propTypes = {
+  orientation: PropTypes.string,
+  padding: PropTypes.string,
+  tileTheme: PropTypes.string,
+  width: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
+};
+StyledTile.defaultProps = {
+  theme: baseTheme
+};
+export { StyledTile, TileContent };

package/esm/components/tile-select/__internal__/accordion/accordion.component.d.ts

@@ -0,0 +1,16 @@
+export default Accordion;
+declare function Accordion({ children, expanded, contentId, controlId }: {
+    children: any;
+    expanded: any;
+    contentId: any;
+    controlId: any;
+}): JSX.Element;
+declare namespace Accordion {
+    namespace propTypes {
+        const children: PropTypes.Validator<string | number | boolean | {} | PropTypes.ReactElementLike | PropTypes.ReactNodeArray>;
+        const expanded: PropTypes.Requireable<boolean>;
+        const contentId: PropTypes.Requireable<string>;
+        const controlId: PropTypes.Requireable<string>;
+    }
+}
+import PropTypes from "prop-types";

package/esm/components/tile-select/__internal__/accordion/accordion.component.js

@@ -0,0 +1,39 @@
+import React, { useEffect, useRef, useState } from "react";
+import PropTypes from "prop-types";
+import { StyledContentContainer, StyledContent } from "./accordion.style";
+import useResizeObserver from "../../../../hooks/__internal__/useResizeObserver";
+
+const Accordion = ({
+  children,
+  expanded,
+  contentId,
+  controlId
+}) => {
+  const [contentHeight, setContentHeight] = useState(0);
+  const contentRef = useRef(null);
+  useResizeObserver(contentRef, () => {
+    setContentHeight(contentRef.current.scrollHeight);
+  });
+  useEffect(() => {
+    setContentHeight(contentRef.current.scrollHeight);
+  }, [contentRef]);
+  return /*#__PURE__*/React.createElement(StyledContentContainer, {
+    "aria-expanded": expanded,
+    isExpanded: expanded,
+    maxHeight: contentHeight
+  }, /*#__PURE__*/React.createElement(StyledContent, {
+    role: "region",
+    "data-element": "tile-select-accordion-content",
+    ref: contentRef,
+    id: contentId,
+    "aria-labelledby": controlId
+  }, children));
+};
+
+Accordion.propTypes = {
+  children: PropTypes.node.isRequired,
+  expanded: PropTypes.bool,
+  contentId: PropTypes.string,
+  controlId: PropTypes.string
+};
+export default Accordion;

package/esm/components/tile-select/__internal__/accordion/accordion.d.ts

@@ -0,0 +1,13 @@
+import * as React from "react";
+import { SpaceProps } from "styled-system";
+
+export interface AccordionProps extends SpaceProps {
+  children: React.ReactNode;
+  expanded?: boolean;
+  contentId?: string;
+  controlId?: string;
+}
+
+declare function Accordion(props: AccordionProps): JSX.Element;
+
+export default Accordion;

package/esm/components/tile-select/__internal__/accordion/accordion.style.d.ts

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

package/esm/components/tile-select/__internal__/accordion/accordion.style.js

@@ -0,0 +1,17 @@
+import styled from "styled-components";
+import { StyledAccordionContentContainer, StyledAccordionContent } from "../../../accordion/accordion.style";
+import baseTheme from "../../../../style/themes/base";
+const StyledContentContainer = styled(StyledAccordionContentContainer)`
+  background-color: ${({
+  theme
+}) => theme.tileSelect.hoverBackground};
+`;
+const StyledContent = styled(StyledAccordionContent)`
+  padding: 24px;
+  position: relative;
+  z-index: 200;
+`;
+StyledContentContainer.defaultProps = {
+  theme: baseTheme
+};
+export { StyledContentContainer, StyledContent };

package/esm/components/tile-select/__internal__/accordion/index.d.ts

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

package/esm/components/tile-select/__internal__/accordion/index.js

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

package/esm/components/tile-select/index.d.ts

@@ -0,0 +1,2 @@
+export { TileSelect } from "./tile-select";
+export { TileSelectGroup } from "./tile-select-group";

package/esm/components/tile-select/index.js

@@ -0,0 +1,2 @@
+export { default as TileSelect } from "./tile-select.component.js";
+export { default as TileSelectGroup } from "./tile-select-group.component.js";

package/esm/components/tile-select/tile-select-group.component.d.ts

@@ -0,0 +1,19 @@
+export default TileSelectGroup;
+declare function TileSelectGroup(props: any): JSX.Element;
+declare namespace TileSelectGroup {
+    namespace propTypes {
+        function children(props: any, propName: any, componentName: any): undefined;
+        const legend: PropTypes.Requireable<string>;
+        const description: PropTypes.Requireable<string>;
+        const value: PropTypes.Requireable<string>;
+        const name: PropTypes.Requireable<string>;
+        const onChange: PropTypes.Requireable<(...args: any[]) => any>;
+        const onBlur: PropTypes.Requireable<(...args: any[]) => any>;
+        const multiSelect: PropTypes.Requireable<boolean>;
+    }
+    namespace defaultProps {
+        const multiSelect_1: boolean;
+        export { multiSelect_1 as multiSelect };
+    }
+}
+import PropTypes from "prop-types";

package/esm/components/tile-select/tile-select-group.component.js

@@ -0,0 +1,89 @@
+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 styledSystemPropTypes from "@styled-system/prop-types";
+import tagComponent from "../../__internal__/utils/helpers/tags/tags";
+import TileSelect from "./tile-select.component";
+import RadioButtonMapper from "../radio-button/radio-button-mapper.component";
+import { StyledTileSelectFieldset, StyledGroupDescription } from "./tile-select.style";
+import { filterStyledSystemMarginProps } from "../../style/utils";
+const marginPropTypes = filterStyledSystemMarginProps(styledSystemPropTypes.space);
+
+const TileSelectGroup = props => {
+  const {
+    children,
+    name,
+    legend,
+    description,
+    onChange,
+    onBlur,
+    value,
+    multiSelect,
+    ...rest
+  } = props;
+  let tiles;
+
+  if (multiSelect) {
+    tiles = children;
+  } else {
+    tiles = /*#__PURE__*/React.createElement(RadioButtonMapper, {
+      name: name,
+      onBlur: onBlur,
+      onChange: onChange,
+      value: value
+    }, React.Children.map(children, child => /*#__PURE__*/React.cloneElement(child, {
+      type: "radio"
+    })));
+  }
+
+  return /*#__PURE__*/React.createElement(StyledTileSelectFieldset, _extends({
+    legend: legend
+  }, tagComponent("tile-select-group", rest), {
+    multiSelect: multiSelect
+  }, filterStyledSystemMarginProps(rest)), /*#__PURE__*/React.createElement(StyledGroupDescription, null, description), /*#__PURE__*/React.createElement("div", null, tiles));
+};
+
+TileSelectGroup.propTypes = { ...marginPropTypes,
+
+  /** The TileSelect components to be rendered in the group */
+  children: (props, propName, componentName) => {
+    let error;
+    const prop = props[propName];
+    React.Children.forEach(prop, child => {
+      if (TileSelect.displayName !== child.type.displayName) {
+        error = new Error(`\`${componentName}\` only accepts children of type \`${TileSelect.displayName}\`.`);
+      }
+    });
+    return error;
+  },
+
+  /** The content for the TileSelectGroup Legend */
+  legend: PropTypes.string,
+
+  /** Description to be rendered below the legend */
+  description: PropTypes.string,
+
+  /** The currently selected value - only for single select mode. */
+  value: PropTypes.string,
+
+  /** The name to apply to the input - only for single select mode. */
+  name: PropTypes.string,
+
+  /** A callback triggered when one of tiles is selected - only for single select mode. */
+  onChange: PropTypes.func,
+
+  /** A callback triggered when one of tiles is blurred - only for single select mode. */
+  onBlur: PropTypes.func,
+
+  /** When passed as true TileSelectGroup serves only visual purpose */
+
+  /** It wraps TileSelects in fieldset element and renders the legend and description props content */
+
+  /** onChange, onBlur, value, checked and name props are meant to be passed individually on each of the TileSelects */
+  multiSelect: PropTypes.bool
+};
+TileSelectGroup.defaultProps = {
+  multiSelect: false
+};
+export default TileSelectGroup;

package/esm/components/tile-select/tile-select-group.d.ts

@@ -0,0 +1,27 @@
+import * as React from "react";
+import { MarginProps } from "styled-system";
+
+export interface TileSelectGroupProps extends MarginProps {
+  /** The TileSelect components to be rendered in the group */
+  children: React.ReactNode;
+  /** The content for the TileSelectGroup Legend */
+  legend?: string;
+  /** Description to be rendered below the legend */
+  description?: string;
+  /** The currently selected value - only for single select mode. */
+  value?: string;
+  /** The name to apply to the input - only for single select mode. */
+  name?: string;
+  /** A callback triggered when one of tiles is selected - only for single select mode. */
+  onChange?: (ev: React.ChangeEvent<HTMLInputElement>) => void;
+  /** A callback triggered when one of tiles is blurred - only for single select mode. */
+  onBlur?: (ev: React.FocusEvent<HTMLInputElement>) => void;
+  /** When passed as true TileSelectGroup serves only visual purpose */
+  /** It wraps TileSelects in fieldset element and renders the legend and description props content */
+  /** onChange, onBlur, value, checked and name props are meant to be passed individually on each of the TileSelects */
+  multiSelect?: boolean;
+}
+
+declare function TileSelectGroup(props: TileSelectGroupProps): JSX.Element;
+
+export { TileSelectGroup };

package/esm/components/tile-select/tile-select.component.d.ts

@@ -0,0 +1,60 @@
+export default TileSelect;
+declare function TileSelect({ onChange, onBlur, onFocus, value, name, checked, className, disabled, title, subtitle, description, titleAdornment, type, id, customActionButton, actionButtonAdornment, footer, prefixAdornment, additionalInformation, accordionContent, accordionControl, accordionExpanded, ...rest }: {
+    [x: string]: any;
+    onChange: any;
+    onBlur: any;
+    onFocus: any;
+    value: any;
+    name: any;
+    checked: any;
+    className: any;
+    disabled: any;
+    title: any;
+    subtitle: any;
+    description: any;
+    titleAdornment: any;
+    type: any;
+    id: any;
+    customActionButton: any;
+    actionButtonAdornment: any;
+    footer: any;
+    prefixAdornment: any;
+    additionalInformation: any;
+    accordionContent: any;
+    accordionControl: any;
+    accordionExpanded: any;
+}): JSX.Element;
+declare namespace TileSelect {
+    namespace defaultProps {
+        const checked: boolean;
+        const type: string;
+    }
+    namespace propTypes {
+        export const title: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        export const titleAdornment: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        export const subtitle: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        export const description: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        export const disabled: PropTypes.Requireable<boolean>;
+        export const value: PropTypes.Requireable<string>;
+        export const id: PropTypes.Requireable<string>;
+        export const name: PropTypes.Requireable<string>;
+        export const onChange: PropTypes.Requireable<(...args: any[]) => any>;
+        export const onBlur: PropTypes.Requireable<(...args: any[]) => any>;
+        export const onFocus: PropTypes.Requireable<(...args: any[]) => any>;
+        const checked_1: PropTypes.Requireable<boolean>;
+        export { checked_1 as checked };
+        export const className: PropTypes.Requireable<string>;
+        const type_1: PropTypes.Requireable<string>;
+        export { type_1 as type };
+        export const customActionButton: PropTypes.Requireable<(...args: any[]) => any>;
+        export const actionButtonAdornment: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        export const footer: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        export const prefixAdornment: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        export const additionalInformation: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        export const accordionContent: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        export const accordionControl: PropTypes.Requireable<(...args: any[]) => any>;
+        export const accordionExpanded: PropTypes.Requireable<boolean>;
+    }
+    const displayName: string;
+}
+import PropTypes from "prop-types";