carbon-react 104.34.0 → 104.36.0

package/esm/components/show-edit-pod/show-edit-pod.component.js

@@ -0,0 +1,242 @@
+import React, { useState, useEffect, useContext, useRef } from "react";
+import PropTypes from "prop-types";
+import { TransitionGroup, CSSTransition } from "react-transition-group";
+import styledSystemPropTypes from "@styled-system/prop-types";
+import { filterStyledSystemMarginProps } from "../../style/utils";
+import Form from "../form";
+import Button from "../button";
+import Events from "../../__internal__/utils/helpers/events";
+import tagComponent from "../../__internal__/utils/helpers/tags/tags";
+import LocaleContext from "../../__internal__/i18n-context";
+import StyledPod from "./show-edit-pod.style";
+const marginPropTypes = filterStyledSystemMarginProps(styledSystemPropTypes.space);
+
+const ShowEditPod = ({
+  border = false,
+  className,
+  children,
+  saving = false,
+  editFields,
+  editing,
+  onEdit,
+  onSave,
+  onCancel,
+  onUndo,
+  cancel = true,
+  cancelText,
+  saveText,
+  onDelete,
+  deleteText,
+  softDelete,
+  buttonAlign = "right",
+  transitionName = "carbon-show-edit-pod__transition",
+  title,
+  hideDeleteButtonInViewMode = false,
+  variant = "transparent",
+  ...rest
+}) => {
+  const locale = useContext(LocaleContext);
+  const ref = useRef();
+  const [isEditing, setIsEditingState] = useState(false);
+  const isControlled = editing !== undefined;
+
+  const focusPod = () => {
+    ref.current.focus();
+  };
+
+  useEffect(() => {
+    if (editing) {
+      focusPod();
+    }
+  }, [editing]);
+  const isInEditMode = isControlled ? editing : isEditing;
+
+  const toggleEditingState = newState => {
+    if (!isControlled) {
+      setIsEditingState(newState);
+    }
+  };
+
+  const handleEdit = ev => {
+    onEdit(ev);
+    toggleEditingState(true);
+    focusPod();
+  };
+
+  const onSaveEditForm = ev => {
+    ev.preventDefault();
+    onSave(ev);
+    toggleEditingState(false);
+  };
+
+  const onCancelEditForm = ev => {
+    if (onCancel) {
+      onCancel(ev);
+    }
+
+    toggleEditingState(false);
+  };
+
+  const onKeyDown = ev => {
+    if (Events.isEscKey(ev)) {
+      onCancelEditForm(ev);
+    }
+  };
+
+  const deleteButton = () => {
+    const label = deleteText || locale.actions.delete();
+    return /*#__PURE__*/React.createElement(Button, {
+      buttonType: "tertiary",
+      destructive: true,
+      "data-element": "delete-button",
+      size: "small",
+      onClick: onDelete
+    }, label);
+  };
+
+  const editContent = () => /*#__PURE__*/React.createElement(Form, {
+    onSubmit: onSaveEditForm,
+    buttonAlignment: buttonAlign,
+    "data-element": "edit-form",
+    leftSideButtons: cancel && /*#__PURE__*/React.createElement(Button, {
+      "data-element": "cancel-button",
+      onClick: onCancelEditForm,
+      size: "small"
+    }, cancelText),
+    saveButton: /*#__PURE__*/React.createElement(Button, {
+      disabled: saving,
+      "data-element": "submit-button",
+      buttonType: "primary",
+      type: "submit",
+      size: "small"
+    }, saveText),
+    rightSideButtons: onDelete ? deleteButton() : null,
+    saving: saving
+  }, editFields);
+
+  const content = () => {
+    if (isInEditMode) {
+      return /*#__PURE__*/React.createElement(CSSTransition, {
+        key: "1",
+        classNames: transitionName,
+        timeout: {
+          enter: 300,
+          exit: 50
+        }
+      }, /*#__PURE__*/React.createElement("div", {
+        key: "edit"
+      }, editContent()));
+    }
+
+    return /*#__PURE__*/React.createElement(CSSTransition, {
+      key: "2",
+      classNames: transitionName,
+      timeout: {
+        enter: 300,
+        exit: 50
+      }
+    }, /*#__PURE__*/React.createElement("div", {
+      key: "show"
+    }, children));
+  };
+
+  const universalProps = () => ({
+    size: "small",
+    tabIndex: "-1",
+    title,
+    ref,
+    className,
+    border,
+    onUndo,
+    softDelete,
+    variant,
+    ...rest,
+    ...tagComponent("show-edit-pod", rest)
+  });
+
+  const contentProps = () => ({ ...universalProps(),
+    ...(!hideDeleteButtonInViewMode && {
+      onDelete
+    }),
+    ...(onEdit && {
+      onEdit: handleEdit
+    })
+  });
+
+  const editingProps = () => ({ ...universalProps(),
+    onKeyDown
+  });
+
+  const podProps = () => isInEditMode ? editingProps() : contentProps();
+
+  return /*#__PURE__*/React.createElement(StyledPod, podProps(), /*#__PURE__*/React.createElement(TransitionGroup, null, content()));
+};
+
+ShowEditPod.propTypes = { ...marginPropTypes,
+
+  /** Pod theme variant. */
+  variant: PropTypes.oneOf(["primary", "secondary", "tertiary", "tile", "transparent"]),
+
+  /** Enable/disable the border on the Pod. */
+  border: PropTypes.bool,
+
+  /** This component supports children. */
+  children: PropTypes.node,
+
+  /** Classes to apply to the component. */
+  className: PropTypes.string,
+
+  /** Allows developers to control the editing state manually. */
+  editing: PropTypes.bool,
+
+  /** Callback when edit button is clicked. */
+  onEdit: PropTypes.func,
+
+  /** A callback triggered when the delete action is clicked. */
+  onDelete: PropTypes.func,
+
+  /** A callback triggered when the undo action is clicked. */
+  onUndo: PropTypes.func,
+
+  /** Sets soft delete state. */
+  softDelete: PropTypes.bool,
+
+  /** Hide delete button in view mode. */
+  hideDeleteButtonInViewMode: PropTypes.bool,
+
+  /** Define fields to be rendered in the edit state */
+  editFields: PropTypes.node,
+
+  /** Define a custom transition between show and edit states */
+  transitionName: PropTypes.string,
+  // Props passed to Form
+
+  /** A callback triggered after clicking the save button */
+  onSave: PropTypes.func,
+
+  /** Controls which direction the form buttons align */
+  buttonAlign: PropTypes.oneOf(["left", "right"]),
+
+  /** Set to false to hide the cancel button */
+  cancel: PropTypes.bool,
+
+  /** Supply custom text for the cancel button */
+  cancelText: PropTypes.string,
+
+  /** A callback triggered when the form is cancelled */
+  onCancel: PropTypes.func,
+
+  /** Supply custom text for the save button */
+  saveText: PropTypes.string,
+
+  /** Supply custom text for the delete button */
+  deleteText: PropTypes.string,
+
+  /** Can inform if the form is in a saving state (disables the save button) */
+  saving: PropTypes.bool,
+
+  /** Title to be displayed */
+  title: PropTypes.node
+};
+export default ShowEditPod;
+export { ShowEditPod as BaseShowEditPod };

package/esm/components/show-edit-pod/show-edit-pod.config.d.ts

@@ -0,0 +1,2 @@
+export const SHOW_EDIT_POD_ALIGNMENTS: string[];
+export const SHOW_EDIT_POD_THEMES: string[];

package/esm/components/show-edit-pod/show-edit-pod.config.js

@@ -0,0 +1,2 @@
+export const SHOW_EDIT_POD_ALIGNMENTS = ["left", "right"];
+export const SHOW_EDIT_POD_THEMES = ["primary", "secondary", "tertiary", "tile", "transparent"];

package/esm/components/show-edit-pod/show-edit-pod.d.ts

@@ -0,0 +1,57 @@
+import * as React from "react";
+
+export interface ShowEditPodProps {
+  /** Enable/disable the border on the Pod. */
+  border?: boolean;
+  /** Controls which direction the form buttons align */
+  buttonAlign?: string;
+  /** Set to false to hide the cancel button */
+  cancel?: boolean;
+  /** Supply custom text for the cancel button */
+  cancelText?: string;
+  /** This component supports children. */
+  children?: React.ReactNode;
+  /** Classes to apply to the component. */
+  className?: string;
+  /** Supply custom text for the delete button */
+  deleteText?: string;
+  /** Define fields to be rendered in the edit state */
+  editFields?: React.ReactNode;
+  /** Allows developers to control the editing state manually. */
+  editing?: boolean;
+  /** Hide delete button in view mode. */
+  hideDeleteButtonInViewMode?: boolean;
+  /** Sets soft delete state. */
+  softDelete?: boolean;
+  /** A callback triggered when the form is cancelled */
+  onCancel?: (ev: React.MouseEvent<HTMLElement>) => void;
+  /** A callback triggered when the delete action is clicked. */
+  onDelete?: (
+    ev: React.MouseEvent<HTMLElement> | React.KeyboardEvent<HTMLElement>
+  ) => void;
+  /** A callback triggered when the undo action is clicked. */
+  onUndo?: (
+    ev: React.MouseEvent<HTMLElement> | React.KeyboardEvent<HTMLElement>
+  ) => void;
+  /** Callback when edit button is clicked. */
+  onEdit?: (
+    ev: React.MouseEvent<HTMLElement> | React.KeyboardEvent<HTMLElement>
+  ) => void;
+  // Props passed to Form
+  /** A callback triggered after clicking the save button */
+  onSave?: (ev: React.FormEvent<HTMLFormElement>) => void;
+  /** Define a custom transition between show and edit states */
+  transitionName?: string;
+  /** Pod theme variant. */
+  variant?: string;
+  /** Supply custom text for the save button */
+  saveText?: string;
+  /** Can inform if the form is in a saving state (disables the save button) */
+  saving?: boolean;
+  /** Title to be displayed */
+  title?: React.ReactNode;
+}
+
+declare function ShowEditPod(props: ShowEditPodProps): JSX.Element;
+
+export default ShowEditPod;

package/esm/components/show-edit-pod/show-edit-pod.style.d.ts

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

package/esm/components/show-edit-pod/show-edit-pod.style.js

@@ -0,0 +1,32 @@
+import styled from "styled-components";
+import { StyledFormFooter } from "../form/form.style.js";
+import { StyledContent } from "../pod/pod.style.js";
+import Pod from "../pod";
+const StyledPod = styled(Pod)`
+  ${StyledFormFooter} {
+    margin-top: 24px;
+  }
+
+  ${StyledContent} {
+    padding: 16px;
+  }
+
+  .common-input__prefix {
+    z-index: 5;
+  }
+
+  .carbon-show-edit-pod__transition-enter {
+    opacity: 0;
+  }
+
+  .carbon-show-edit-pod__transition-enter.carbon-show-edit-pod__transition-enter-active {
+    opacity: 1;
+    transition: all 300ms ease-in;
+  }
+
+  .carbon-show-edit-pod__transition-exit {
+    opacity: 0;
+    position: absolute;
+  }
+`;
+export default StyledPod;

package/esm/components/sidebar/__internal__/sidebar-header/__definition__.d.ts

@@ -0,0 +1,2 @@
+export default definition;
+declare let definition: any;

package/esm/components/sidebar/__internal__/sidebar-header/__definition__.js

@@ -0,0 +1,13 @@
+import SidebarHeader from ".";
+import Definition from "./../../../../../demo/utils/definition";
+let definition = new Definition("sidebar-header", SidebarHeader, {
+  description: "[content needed] Basic example of the component",
+  designerNotes: "[content needed] Basic designs description for the component",
+  propTypes: {
+    children: "Node"
+  },
+  propDescriptions: {
+    children: "This component supports children."
+  }
+});
+export default definition;

package/esm/components/sidebar/__internal__/sidebar-header/index.d.ts

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

package/esm/components/sidebar/__internal__/sidebar-header/index.js

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

package/esm/components/sidebar/__internal__/sidebar-header/sidebar-header.component.d.ts

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

package/esm/components/sidebar/__internal__/sidebar-header/sidebar-header.component.js

@@ -0,0 +1,23 @@
+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 tagComponent from "../../../../__internal__/utils/helpers/tags/tags";
+import SidebarHeaderStyle from "./sidebar-header.style";
+
+const SidebarHeader = ({
+  className,
+  children,
+  ...props
+}) => /*#__PURE__*/React.createElement(SidebarHeaderStyle, _extends({
+  className: className
+}, tagComponent("sidebar-header", props)), children);
+
+SidebarHeader.propTypes = {
+  /** This component supports children. */
+  children: PropTypes.node,
+
+  /** A custom class name. */
+  className: PropTypes.string
+};
+export default SidebarHeader;

package/esm/components/sidebar/__internal__/sidebar-header/sidebar-header.style.d.ts

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

package/esm/components/sidebar/__internal__/sidebar-header/sidebar-header.style.js

@@ -0,0 +1,21 @@
+import styled from "styled-components";
+import baseTheme from "../../../../style/themes/base";
+const SidebarHeaderStyle = styled.div`
+  background-color: ${({
+  theme
+}) => theme.colors.white};
+  box-shadow: inset 0 -1px 0 0 ${({
+  theme
+}) => theme.disabled.border};
+  box-sizing: border-box;
+  width: 100%;
+  color: ${({
+  theme
+}) => theme.text.color};
+  transition: all 0.2s ease;
+  padding: 27px 32px 32px 32px;
+`;
+SidebarHeaderStyle.defaultProps = {
+  theme: baseTheme
+};
+export default SidebarHeaderStyle;

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

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

package/esm/components/sidebar/index.js

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

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

@@ -0,0 +1,4 @@
+export const SidebarContext: React.Context<{}>;
+export default Sidebar;
+import React from "react";
+declare const Sidebar: React.ForwardRefExoticComponent<React.RefAttributes<any>>;

package/esm/components/sidebar/sidebar.component.js

@@ -0,0 +1,125 @@
+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 } from "react";
+import PropTypes from "prop-types";
+import Modal from "../modal";
+import SidebarStyle from "./sidebar.style";
+import IconButton from "../icon-button";
+import Icon from "../icon";
+import FocusTrap from "../../__internal__/focus-trap";
+import SidebarHeader from "./__internal__/sidebar-header";
+import Box from "../box";
+import { SIDEBAR_SIZES, SIDEBAR_ALIGNMENTS } from "./sidebar.config";
+import useLocale from "../../hooks/__internal__/useLocale";
+export const SidebarContext = /*#__PURE__*/React.createContext({});
+const Sidebar = /*#__PURE__*/React.forwardRef(({
+  "aria-describedby": ariaDescribedBy,
+  "aria-label": ariaLabel,
+  "aria-labelledby": ariaLabelledBy,
+  open,
+  disableEscKey,
+  enableBackgroundUI,
+  header,
+  position,
+  size,
+  children,
+  onCancel,
+  role = "dialog",
+  ...rest
+}, ref) => {
+  const locale = useLocale();
+  let sidebarRef = useRef();
+  if (ref) sidebarRef = ref;
+
+  const closeIcon = () => {
+    if (!onCancel) return null;
+    return /*#__PURE__*/React.createElement(IconButton, {
+      "aria-label": locale.sidebar.ariaLabels.close(),
+      onAction: onCancel,
+      "data-element": "close"
+    }, /*#__PURE__*/React.createElement(Icon, {
+      type: "close"
+    }));
+  };
+
+  const componentTags = {
+    "data-component": "sidebar",
+    "data-element": rest["data-element"],
+    "data-role": rest["data-role"]
+  };
+  const sidebar = /*#__PURE__*/React.createElement(SidebarStyle, {
+    "aria-modal": !enableBackgroundUI,
+    "aria-describedby": ariaDescribedBy,
+    "aria-label": ariaLabel,
+    "aria-labelledby": ariaLabelledBy,
+    ref: sidebarRef,
+    position: position,
+    size: size,
+    "data-element": "sidebar",
+    onCancel: onCancel,
+    role: role
+  }, closeIcon(), header && /*#__PURE__*/React.createElement(SidebarHeader, null, header), /*#__PURE__*/React.createElement(Box, {
+    "data-element": "sidebar-content",
+    p: 4,
+    pt: "27px",
+    scrollVariant: "light",
+    overflow: "auto",
+    flex: "1"
+  }, /*#__PURE__*/React.createElement(SidebarContext.Provider, {
+    value: {
+      isInSidebar: true
+    }
+  }, children)));
+  return /*#__PURE__*/React.createElement(Modal, _extends({
+    open: open,
+    onCancel: onCancel,
+    disableEscKey: disableEscKey,
+    enableBackgroundUI: enableBackgroundUI,
+    className: "carbon-sidebar"
+  }, componentTags), enableBackgroundUI ? sidebar : /*#__PURE__*/React.createElement(FocusTrap, {
+    wrapperRef: sidebarRef
+  }, sidebar));
+});
+Sidebar.propTypes = {
+  /** Prop to specify the aria-describedby property of the component */
+  "aria-describedby": PropTypes.string,
+
+  /** Prop to specify the aria-label of the component */
+  "aria-label": PropTypes.string,
+
+  /** Prop to specify the aria-labeledby property of the component */
+  "aria-labelledby": PropTypes.string,
+
+  /** Modal content */
+  children: PropTypes.node,
+
+  /** A custom close event handler */
+  onCancel: PropTypes.func,
+
+  /** Determines if the Esc Key closes the modal */
+  disableEscKey: PropTypes.bool,
+
+  /** A boolean to track the open state of the dialog */
+  open: PropTypes.bool.isRequired,
+
+  /** Set this prop to false to hide the translucent background when the dialog is open. */
+  enableBackgroundUI: PropTypes.bool,
+
+  /** Sets the position of sidebar, either left or right. */
+  position: PropTypes.oneOf(SIDEBAR_ALIGNMENTS),
+
+  /** Sets the size of the sidebar when open. */
+  size: PropTypes.oneOf(SIDEBAR_SIZES),
+
+  /** Node that will be used as sidebar header. */
+  header: PropTypes.node,
+
+  /** The ARIA role to be applied to the container */
+  role: PropTypes.string
+};
+Sidebar.defaultProps = {
+  position: "right",
+  size: "medium",
+  enableBackgroundUI: false
+};
+export default Sidebar;

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

@@ -0,0 +1,11 @@
+export const SIDEBAR_SIZES_CSS: {
+    "extra-small": string;
+    small: string;
+    "medium-small": string;
+    medium: string;
+    "medium-large": string;
+    large: string;
+    "extra-large": string;
+};
+export const SIDEBAR_SIZES: string[];
+export const SIDEBAR_ALIGNMENTS: string[];

package/esm/components/sidebar/sidebar.config.js

@@ -0,0 +1,11 @@
+export const SIDEBAR_SIZES_CSS = {
+  "extra-small": "214px",
+  small: "314px",
+  "medium-small": "414px",
+  medium: "514px",
+  "medium-large": "614px",
+  large: "714px",
+  "extra-large": "814px"
+};
+export const SIDEBAR_SIZES = ["extra-small", "small", "medium-small", "medium", "medium-large", "large", "extra-large"];
+export const SIDEBAR_ALIGNMENTS = ["left", "right"];

package/esm/components/sidebar/sidebar.d.ts

@@ -0,0 +1,54 @@
+import * as React from "react";
+
+export interface SidebarContextProps {
+  isInSidebar: boolean;
+}
+export interface SidebarProps {
+  /** Prop to specify the aria-describedby property of the component */
+  "aria-describedby"?: string;
+  /**
+   * Prop to specify the aria-label of the component.
+   * To be used only when the title prop is not defined, and the component is not labelled by any internal element.
+   */
+  "aria-label"?: string;
+  /**
+   * Prop to specify the aria-labeledby property of the component
+   * To be used when the title prop is a custom React Node,
+   * or the component is labelled by an internal element other than the title.
+   */
+  "aria-labelledby"?: string;
+  /** Modal content */
+  children?: React.ReactNode;
+  /** Determines if the Esc Key closes the modal */
+  disableEscKey?: boolean;
+  /** Set this prop to false to hide the translucent background when the dialog is open. */
+  enableBackgroundUI?: boolean;
+  /** Node that will be used as sidebar header. */
+  header?: React.ReactNode;
+  /** A custom close event handler */
+  onCancel?: (ev: React.KeyboardEvent<HTMLElement>) => void;
+  /** Sets the open state of the modal */
+  open: boolean;
+  /** Sets the position of sidebar, either left or right. */
+  position?: "left" | "right";
+  /** The ARIA role to be applied to the component container */
+  role?: string;
+  /** Sets the size of the sidebar when open. */
+  size?:
+    | "extra-small"
+    | "small"
+    | "medium-small"
+    | "medium"
+    | "medium-large"
+    | "large"
+    | "extra-large";
+}
+
+declare const SidebarContext: React.Context<SidebarContextProps>;
+
+declare function Sidebar(
+  props: SidebarProps & React.RefAttributes<HTMLDivElement>
+): JSX.Element;
+
+export { SidebarContext };
+export default Sidebar;

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

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