carbon-react 104.34.0 → 104.36.0

package/esm/components/dismissible-box/dismissible-box.component.js

@@ -0,0 +1,60 @@
+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 StyledDismissibleBox from "./dismissible-box.style";
+import IconButton from "../icon-button";
+import Icon from "../icon";
+const variantStyles = {
+  light: {
+    backgroundColor: "#FFFFFF"
+  },
+  dark: {
+    backgroundColor: "slateTint90"
+  }
+};
+
+const DismissibleBox = ({
+  hasBorderLeftHighlight = true,
+  children,
+  onClose,
+  variant = "light",
+  ...rest
+}) => /*#__PURE__*/React.createElement(StyledDismissibleBox, _extends({
+  backgroundColor: variantStyles[variant].backgroundColor,
+  p: "20px 24px 20px 20px",
+  hasBorderLeftHighlight: hasBorderLeftHighlight
+}, rest, {
+  display: "flex",
+  justifyContent: "space-between"
+}), children, /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement(IconButton, {
+  onAction: onClose,
+  "aria-label": "close-button",
+  ml: 3
+}, /*#__PURE__*/React.createElement(Icon, {
+  type: "close",
+  color: "slateTint20"
+}))));
+
+DismissibleBox.propTypes = { ...propTypes.space,
+
+  /** Flag to control whether the thicker left border highlight should be rendered */
+  hasBorderLeftHighlight: PropTypes.bool,
+
+  /** The content to render in the component */
+  children: PropTypes.node,
+
+  /** Callback to be called when the close icon button is clicked */
+  onClose: PropTypes.func.isRequired,
+
+  /** Use this prop to override the default width. Numbers from 0-1 are converted to percentage widths. Numbers greater
+   * than 1 are converted to pixel values. String values are passed as raw CSS values. And arrays are converted to
+   * responsive width styles. If theme.sizes is defined, the width prop will attempt to pick up values from the theme.
+   * Please note this component has a minWidth of 600px */
+  width: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+
+  /** Set the base color variant */
+  variant: PropTypes.oneOf(["light", "dark"])
+};
+export default DismissibleBox;

package/esm/components/dismissible-box/dismissible-box.d.ts

@@ -0,0 +1,18 @@
+import * as React from "react";
+import { BoxProps } from "components/box/box";
+
+export interface DismissibleBoxProps
+  extends Omit<BoxProps, "display" | "justifyContent"> {
+  /** Flag to control whether the thicker left border highlight should be rendered */
+  hasBorderLeftHighlight?: boolean;
+  /** The content to render in the component */
+  children?: React.ReactNode;
+  /** Callback to be called when the close icon button is clicked */
+  onClose: React.MouseEventHandler<HTMLButtonElement>;
+  /** Set the base color variant */
+  variant?: "light" | "dark";
+}
+
+declare function DismissibleBox(props: DismissibleBoxProps): JSX.Element;
+
+export default DismissibleBox;

package/esm/components/dismissible-box/dismissible-box.style.d.ts

@@ -0,0 +1,3 @@
+declare var _default: import("styled-components").StyledComponent<typeof Box, any, {}, never>;
+export default _default;
+import Box from "../box";

package/esm/components/dismissible-box/dismissible-box.style.js

@@ -0,0 +1,23 @@
+import styled, { css } from "styled-components";
+import Box from "../box";
+import { toColor } from "../../style/utils/color";
+import StyledIcon from "../icon/icon.style";
+export default styled(Box)`
+  ${({
+  hasBorderLeftHighlight,
+  theme
+}) => css`
+    word-break: break-word;
+
+    border: 1px solid ${toColor(theme, "slateTint80")};
+
+    ${hasBorderLeftHighlight && `
+      border-left: none;
+      box-shadow: -4px 0 0 0 ${toColor(theme, "slateTint20")};
+    `}
+
+    ${StyledIcon}:hover {
+      color: ${theme.palette.slate};
+    }
+  `}
+`;

package/esm/components/dismissible-box/index.d.ts

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

package/esm/components/dismissible-box/index.js

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

package/esm/components/draggable/draggable-container.component.d.ts

@@ -0,0 +1,13 @@
+export default DraggableContainer;
+declare function DraggableContainer({ children, getOrder, ...rest }: {
+    [x: string]: any;
+    children: any;
+    getOrder: any;
+}): JSX.Element;
+declare namespace DraggableContainer {
+    namespace propTypes {
+        const getOrder: PropTypes.Requireable<(...args: any[]) => any>;
+        function children(props: any, propName: any, componentName: any): undefined;
+    }
+}
+import PropTypes from "prop-types";

package/esm/components/draggable/draggable-container.component.js

@@ -0,0 +1,121 @@
+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, { useEffect, useState, useRef } from "react";
+import { DndProvider, useDrop } from "react-dnd";
+import { HTML5Backend } from "react-dnd-html5-backend";
+import PropTypes from "prop-types";
+import styledSystemPropTypes from "@styled-system/prop-types";
+import { filterStyledSystemMarginProps } from "../../style/utils";
+import DraggableItem from "./draggable-item.component";
+import { StyledIcon, StyledDraggableContainer } from "./draggable-item.style";
+const marginPropTypes = filterStyledSystemMarginProps(styledSystemPropTypes);
+
+const DropTarget = ({
+  children,
+  getOrder,
+  ...rest
+}) => {
+  const [, drop] = useDrop({
+    accept: "draggableItem",
+
+    drop() {
+      getOrder();
+    }
+
+  });
+  return /*#__PURE__*/React.createElement(StyledDraggableContainer, _extends({
+    ref: drop
+  }, rest), children);
+};
+
+const DraggableContainer = ({
+  children,
+  getOrder,
+  ...rest
+}) => {
+  const [draggableItems, setDraggableItems] = useState(React.Children.toArray(children));
+  const isFirstRender = useRef(true);
+  useEffect(() => {
+    if (!isFirstRender.current) {
+      setDraggableItems(React.Children.toArray(children));
+    } else {
+      isFirstRender.current = false;
+    }
+  }, [children]);
+
+  const findItem = id => {
+    const draggableItem = draggableItems.filter(item => {
+      return `${item.props.id}` === id;
+    })[0];
+    return {
+      draggableItem,
+      index: draggableItems.indexOf(draggableItem)
+    };
+  };
+
+  const moveItem = (id, atIndex) => {
+    const {
+      draggableItem,
+      index
+    } = findItem(id);
+    if (!draggableItem) return;
+    const copyOfDraggableItems = [...draggableItems];
+    copyOfDraggableItems.splice(index, 1);
+    copyOfDraggableItems.splice(atIndex, 0, draggableItem);
+    setDraggableItems(copyOfDraggableItems);
+  };
+
+  const getItemsId = () => {
+    if (!getOrder) {
+      return;
+    }
+
+    const draggableItemIds = draggableItems.map(draggableItem => draggableItem.props.id);
+    getOrder(draggableItemIds);
+  };
+
+  const marginProps = filterStyledSystemMarginProps(rest);
+  return /*#__PURE__*/React.createElement(DndProvider, {
+    backend: HTML5Backend
+  }, /*#__PURE__*/React.createElement(DropTarget, _extends({
+    getOrder: getItemsId
+  }, marginProps), draggableItems.map(item => /*#__PURE__*/React.cloneElement(item, {
+    id: `${item.props.id}`,
+    findItem,
+    moveItem
+  }, [item.props.children, /*#__PURE__*/React.createElement(StyledIcon, {
+    key: item.props.id,
+    type: "drag"
+  })]))));
+};
+
+DraggableContainer.propTypes = { ...marginPropTypes,
+
+  /** Callback fired when order is changed */
+  getOrder: PropTypes.func,
+
+  /**
+   * The content of the component
+   *
+   *  `<DraggableItem />` is required to make `Draggable` works
+   * */
+  children: (props, propName, componentName) => {
+    const prop = props[propName];
+    let error;
+    React.Children.forEach(prop, child => {
+      if (!child) {
+        return;
+      }
+
+      if (DraggableItem.displayName !== child.type.displayName) {
+        error = new Error(`\`${componentName}\` only accepts children of type \`${DraggableItem.displayName}\`.`);
+      }
+    });
+    return error;
+  }
+};
+DropTarget.propTypes = { ...marginPropTypes,
+  children: PropTypes.node.isRequired,
+  getOrder: PropTypes.func
+};
+export default DraggableContainer;

package/esm/components/draggable/draggable-container.d.ts

@@ -0,0 +1,25 @@
+import * as React from "react";
+import { DraggableItemProps } from "./draggable-item";
+
+type DraggableContainerChild =
+  | React.ReactElement<DraggableItemProps>
+  | boolean
+  | null
+  | undefined;
+
+export interface DraggableContainerProps {
+  /** Callback fired when order is changed */
+  getOrder?: (draggableItemIds: number[]) => void;
+  /**
+   * The content of the component
+   *
+   * `<DraggableItem />` is required to make `Draggable` works
+   */
+  children?: DraggableContainerChild | DraggableContainerChild[];
+}
+
+declare function DraggableContainer(
+  props: DraggableContainerProps
+): JSX.Element;
+
+export default DraggableContainer;

package/esm/components/draggable/draggable-item.component.d.ts

@@ -0,0 +1,19 @@
+export default DraggableItem;
+declare function DraggableItem({ id, findItem, moveItem, children, py, ...rest }: {
+    [x: string]: any;
+    id: any;
+    findItem: any;
+    moveItem: any;
+    children: any;
+    py?: number | undefined;
+}): JSX.Element;
+declare namespace DraggableItem {
+    namespace propTypes {
+        const id: PropTypes.Validator<string | number>;
+        const children: PropTypes.Validator<string | number | boolean | {} | PropTypes.ReactElementLike | PropTypes.ReactNodeArray>;
+        const findItem: PropTypes.Requireable<(...args: any[]) => any>;
+        const moveItem: PropTypes.Requireable<(...args: any[]) => any>;
+    }
+    const displayName: string;
+}
+import PropTypes from "prop-types";

package/esm/components/draggable/draggable-item.component.js

@@ -0,0 +1,93 @@
+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 { useDrop, useDrag } from "react-dnd";
+import PropTypes from "prop-types";
+import styledSystemPropTypes from "@styled-system/prop-types";
+import { filterStyledSystemPaddingProps } from "../../style/utils";
+import { StyledDraggableItem } from "./draggable-item.style";
+const paddingPropTypes = filterStyledSystemPaddingProps(styledSystemPropTypes);
+
+const DraggableItem = ({
+  id,
+  findItem,
+  moveItem,
+  children,
+  py = 1,
+  ...rest
+}) => {
+  const originalIndex = findItem(id).index;
+  const [{
+    isDragging
+  }, drag] = useDrag({
+    type: "draggableItem",
+    item: {
+      id,
+      originalIndex
+    },
+    collect: monitor => ({
+      isDragging: monitor.isDragging()
+    }),
+    end: (dropResult, monitor) => {
+      const {
+        id: droppedId,
+        originalIndex: oIndex
+      } = monitor.getItem();
+      const didDrop = monitor.didDrop();
+
+      if (!didDrop) {
+        moveItem(droppedId, oIndex);
+      }
+    }
+  });
+  const [, drop] = useDrop({
+    accept: "draggableItem",
+    canDrop: () => false,
+
+    hover({
+      id: draggedId
+    }) {
+      if (draggedId !== id) {
+        const {
+          index: overIndex
+        } = findItem(id);
+        moveItem(draggedId, overIndex);
+      }
+    }
+
+  });
+  const paddingProps = filterStyledSystemPaddingProps(rest);
+  return /*#__PURE__*/React.createElement(StyledDraggableItem, _extends({
+    "data-element": "draggable",
+    isDragging: isDragging,
+    ref: node => drag(drop(node)),
+    py: py
+  }, paddingProps), children);
+};
+
+DraggableItem.propTypes = { ...paddingPropTypes,
+
+  /**
+   * The id of the `DraggableItem`.
+   *
+   * Use this prop to make `Draggable` works
+   */
+  id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
+
+  /** The content of the component. */
+  children: PropTypes.node.isRequired,
+
+  /**
+   * @private
+   * @ignore
+   */
+  findItem: PropTypes.func,
+
+  /**
+   * @private
+   * @ignore
+   */
+  moveItem: PropTypes.func
+};
+DraggableItem.displayName = "DraggableItem";
+export default DraggableItem;

package/esm/components/draggable/draggable-item.d.ts

@@ -0,0 +1,18 @@
+import * as React from "react";
+
+export interface DraggableItemProps {
+  /**
+   * The id of the `DraggableItem`.
+   *
+   * Use this prop to make `Draggable` works
+   */
+  id: number | string;
+  /** The content of the component. */
+  children: React.ReactNode;
+  findItem?: () => void;
+  moveItem?: () => void;
+}
+
+declare function DraggableItem(props: DraggableItemProps): JSX.Element;
+
+export default DraggableItem;

package/esm/components/draggable/draggable-item.style.d.ts

@@ -0,0 +1,4 @@
+export const StyledDraggableContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
+export const StyledDraggableItem: import("styled-components").StyledComponent<"div", any, {}, never>;
+export const StyledIcon: import("styled-components").StyledComponent<typeof Icon, any, {}, never>;
+import Icon from "../icon";

package/esm/components/draggable/draggable-item.style.js

@@ -0,0 +1,30 @@
+import styled from "styled-components";
+import { padding, margin } from "styled-system";
+import { baseTheme } from "../../style/themes";
+import Icon from "../icon";
+const StyledDraggableContainer = styled.div`
+  ${margin}
+`;
+const StyledDraggableItem = styled.div`
+  display: flex;
+  align-items: center;
+  border-bottom: 1px solid ${({
+  theme
+}) => theme.draggableItem.border};
+  ${padding}
+  cursor: move;
+
+  opacity: ${({
+  isDragging
+}) => isDragging ? "0" : "1"};
+`;
+const StyledIcon = styled(Icon)`
+  margin-left: auto;
+`;
+StyledDraggableContainer.defaultProps = {
+  theme: baseTheme
+};
+StyledDraggableItem.defaultProps = {
+  theme: baseTheme
+};
+export { StyledDraggableContainer, StyledDraggableItem, StyledIcon };

package/esm/components/draggable/draggable-test.stories.js

@@ -0,0 +1,48 @@
+import React from "react";
+import { action } from "@storybook/addon-actions";
+import DraggableContainer from "./draggable-container.component";
+import DraggableItem from "./draggable-item.component";
+import { Checkbox } from "../checkbox";
+export default {
+  title: "Draggable/Test",
+  parameters: {
+    info: {
+      disable: true
+    },
+    chromatic: {
+      disable: true
+    }
+  }
+};
+export const Default = () => {
+  const handleUpdate = items => {
+    action("onUpdate")(items);
+  };
+
+  return /*#__PURE__*/React.createElement(DraggableContainer, {
+    getOrder: handleUpdate
+  }, /*#__PURE__*/React.createElement(DraggableItem, {
+    key: "1",
+    id: 1
+  }, /*#__PURE__*/React.createElement(Checkbox, {
+    label: "Draggable Label One"
+  })), /*#__PURE__*/React.createElement(DraggableItem, {
+    key: "2",
+    id: 2
+  }, /*#__PURE__*/React.createElement(Checkbox, {
+    label: "Draggable Label Two"
+  })), /*#__PURE__*/React.createElement(DraggableItem, {
+    key: "3",
+    id: 3
+  }, /*#__PURE__*/React.createElement(Checkbox, {
+    label: "Draggable Label Three"
+  })), /*#__PURE__*/React.createElement(DraggableItem, {
+    key: "4",
+    id: 4
+  }, /*#__PURE__*/React.createElement(Checkbox, {
+    label: "Draggable Label Four"
+  })));
+};
+Default.story = {
+  name: "default"
+};

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

@@ -0,0 +1,2 @@
+export { default as DraggableContainer } from "./draggable-container";
+export { default as DraggableItem } from "./draggable-item";

package/esm/components/draggable/index.js

@@ -0,0 +1,2 @@
+export { default as DraggableContainer } from "./draggable-container.component";
+export { default as DraggableItem } from "./draggable-item.component";

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

@@ -0,0 +1,39 @@
+export default Drawer;
+export const DrawerSidebarContext: React.Context<{}>;
+declare function Drawer({ defaultExpanded, expanded, onChange, children, expandedWidth, sidebar, animationDuration, backgroundColor, title, footer, showControls, height, stickyHeader, stickyFooter, ...rest }: {
+    [x: string]: any;
+    defaultExpanded?: boolean | undefined;
+    expanded: any;
+    onChange: any;
+    children: any;
+    expandedWidth?: string | undefined;
+    sidebar: any;
+    animationDuration?: string | undefined;
+    backgroundColor: any;
+    title: any;
+    footer: any;
+    showControls: any;
+    height?: string | undefined;
+    stickyHeader: any;
+    stickyFooter: any;
+}): JSX.Element;
+declare namespace Drawer {
+    namespace propTypes {
+        const children: PropTypes.Validator<string | number | boolean | {} | PropTypes.ReactElementLike | PropTypes.ReactNodeArray>;
+        const defaultExpanded: PropTypes.Requireable<boolean>;
+        const expanded: PropTypes.Requireable<boolean>;
+        const onChange: PropTypes.Requireable<(...args: any[]) => any>;
+        const sidebar: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        const expandedWidth: PropTypes.Requireable<string>;
+        const animationDuration: PropTypes.Requireable<string>;
+        const backgroundColor: PropTypes.Requireable<string>;
+        const height: PropTypes.Requireable<string>;
+        const title: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        const showControls: PropTypes.Requireable<boolean>;
+        const footer: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        const stickyHeader: PropTypes.Requireable<boolean>;
+        const stickyFooter: PropTypes.Requireable<boolean>;
+    }
+}
+import React from "react";
+import PropTypes from "prop-types";