carbon-react 104.34.0 → 104.36.0

package/esm/components/tabs/tab/tab.component.d.ts

@@ -0,0 +1,40 @@
+export default Tab;
+export const TabContext: React.Context<{}>;
+declare function Tab({ ariaLabelledby, className, children, isTabSelected, position, role, tabId, updateErrors, updateWarnings, updateInfos, href, ...rest }: {
+    [x: string]: any;
+    ariaLabelledby: any;
+    className: any;
+    children: any;
+    isTabSelected: any;
+    position?: string | undefined;
+    role?: string | undefined;
+    tabId: any;
+    updateErrors: any;
+    updateWarnings: any;
+    updateInfos: any;
+    href: any;
+}): JSX.Element;
+declare namespace Tab {
+    namespace propTypes {
+        const title: PropTypes.Requireable<string>;
+        const tabId: PropTypes.Validator<string>;
+        const className: PropTypes.Requireable<string>;
+        const children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        const customLayout: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        const isTabSelected: PropTypes.Requireable<boolean>;
+        const position: PropTypes.Requireable<string>;
+        const role: PropTypes.Requireable<string>;
+        const ariaLabelledby: PropTypes.Requireable<string>;
+        const updateErrors: PropTypes.Requireable<(...args: any[]) => any>;
+        const updateWarnings: PropTypes.Requireable<(...args: any[]) => any>;
+        const updateInfos: PropTypes.Requireable<(...args: any[]) => any>;
+        const errorMessage: PropTypes.Requireable<string>;
+        const warningMessage: PropTypes.Requireable<string>;
+        const infoMessage: PropTypes.Requireable<string>;
+        const siblings: PropTypes.Requireable<PropTypes.ReactNodeLike[]>;
+        const titlePosition: PropTypes.Requireable<string>;
+        const href: PropTypes.Requireable<string>;
+    }
+}
+import React from "react";
+import PropTypes from "prop-types";

package/esm/components/tabs/tab/tab.component.js

@@ -0,0 +1,135 @@
+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, { useCallback, useEffect, useState } from "react";
+import PropTypes from "prop-types";
+import styledSystemPropTypes from "@styled-system/prop-types";
+import StyledTab from "./tab.style";
+import tagComponent from "../../../__internal__/utils/helpers/tags/tags";
+import { filterStyledSystemPaddingProps } from "../../../style/utils";
+const TabContext = /*#__PURE__*/React.createContext({});
+const paddingPropTypes = filterStyledSystemPaddingProps(styledSystemPropTypes.space);
+
+const Tab = ({
+  ariaLabelledby,
+  className,
+  children,
+  isTabSelected,
+  position = "top",
+  role = "tabpanel",
+  tabId,
+  updateErrors,
+  updateWarnings,
+  updateInfos,
+  href,
+  ...rest
+}) => {
+  const [tabErrors, setTabErrors] = useState({});
+  const [tabWarnings, setTabWarnings] = useState({});
+  const [tabInfos, setTabInfos] = useState({});
+  const setError = useCallback((childId, hasError) => {
+    if (tabErrors[childId] !== hasError) {
+      setTabErrors({ ...tabErrors,
+        [childId]: hasError
+      });
+    }
+  }, [tabErrors]);
+  const setWarning = useCallback((childId, hasWarning) => {
+    if (tabWarnings[childId] !== hasWarning) {
+      setTabWarnings({ ...tabWarnings,
+        [childId]: hasWarning
+      });
+    }
+  }, [tabWarnings]);
+  const setInfo = useCallback((childId, hasInfo) => {
+    if (tabInfos[childId] !== hasInfo) {
+      setTabInfos({ ...tabInfos,
+        [childId]: hasInfo
+      });
+    }
+  }, [tabInfos]);
+  useEffect(() => {
+    if (updateErrors) {
+      updateErrors(tabId, tabErrors);
+    }
+  }, [tabId, tabErrors, updateErrors]);
+  useEffect(() => {
+    if (updateWarnings) {
+      updateWarnings(tabId, tabWarnings);
+    }
+  }, [tabId, tabWarnings, updateWarnings]);
+  useEffect(() => {
+    if (updateInfos) {
+      updateInfos(tabId, tabInfos);
+    }
+  }, [tabId, tabInfos, updateInfos]);
+  return /*#__PURE__*/React.createElement(TabContext.Provider, {
+    value: {
+      setError,
+      setWarning,
+      setInfo
+    }
+  }, /*#__PURE__*/React.createElement(StyledTab, _extends({
+    className: className,
+    role: role,
+    isTabSelected: isTabSelected,
+    "aria-labelledby": ariaLabelledby,
+    position: position
+  }, tagComponent("tab", rest), rest), !href && children));
+};
+
+Tab.propTypes = { ...paddingPropTypes,
+  title: PropTypes.string,
+
+  /** A unique ID to identify this specific tab. */
+  tabId: PropTypes.string.isRequired,
+
+  /** @ignore @private */
+  className: PropTypes.string,
+
+  /** The child elements of Tab component. */
+  children: PropTypes.node,
+
+  /** Overrides Title default layout with a one defined in this prop */
+  customLayout: PropTypes.node,
+
+  /** Boolean indicating selected state of Tab. */
+  isTabSelected: PropTypes.bool,
+
+  /** The position of the Tab. */
+  position: PropTypes.oneOf(["top", "left"]),
+
+  /** @ignore @private */
+  role: PropTypes.string,
+
+  /** @ignore @private */
+  ariaLabelledby: PropTypes.string,
+
+  /** @ignore @private */
+  updateErrors: PropTypes.func,
+
+  /** @ignore @private */
+  updateWarnings: PropTypes.func,
+
+  /** @ignore @private */
+  updateInfos: PropTypes.func,
+
+  /** Message displayed when Tab has error */
+  errorMessage: PropTypes.string,
+
+  /** Message displayed when Tab has warning */
+  warningMessage: PropTypes.string,
+
+  /** Message displayed when Tab has warning */
+  infoMessage: PropTypes.string,
+
+  /** Additional content to display with title */
+  siblings: PropTypes.arrayOf(PropTypes.node),
+
+  /** Position title before or after siblings */
+  titlePosition: PropTypes.oneOf(["before", "after"]),
+
+  /** Allows Tab to be a link */
+  href: PropTypes.string
+};
+export { TabContext };
+export default Tab;

package/esm/components/tabs/tab/tab.d.ts

@@ -0,0 +1,49 @@
+import * as React from "react";
+import { PaddingProps } from "styled-system";
+
+export interface TabContextProps {
+  setError: (childId: string, hasError: boolean) => void;
+  setWarning: (childId: string, hasWarning: boolean) => void;
+  setInfo: (childId: string, hasInfo: boolean) => void;
+}
+
+export interface TabProps extends PaddingProps {
+  title?: string;
+  /** A unique ID to identify this specific tab. */
+  tabId: string;
+  className?: string;
+  /** The child elements of Tab component. */
+  children?: React.ReactNode;
+  /** Boolean indicating selected state of Tab. */
+  isTabSelected?: boolean;
+  /** The position of the Tab. */
+  position?: "top" | "left";
+  /** Message displayed when Tab has error */
+  errorMessage?: string;
+  /** Message displayed when Tab has warning */
+  warningMessage?: string;
+  /** Message displayed when Tab has warning */
+  infoMessage?: string;
+  /** Additional content to display with title */
+  siblings?: React.ReactNode[];
+  /** Position title before or after siblings */
+  titlePosition?: "before" | "after";
+  /** Allows Tab to be a link */
+  href?: string;
+  /** Overrides default layout with a one defined in this prop */
+  customLayout?: React.ReactNode;
+}
+
+export interface TabAllProps {
+  role?: string;
+  ariaLabelledby?: string;
+  updateErrors?: (id: string, hasError: boolean) => void;
+  updateWarnings?: (id: string, hasWarning: boolean) => void;
+  updateInfos?: (id: string, hasInfo: boolean) => void;
+}
+
+declare const TabContext: React.Context<TabContextProps>;
+declare function Tab(props: TabProps): JSX.Element;
+
+export { TabContext };
+export default Tab;

package/esm/components/tabs/tab/tab.style.d.ts

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

package/esm/components/tabs/tab/tab.style.js

@@ -0,0 +1,28 @@
+import styled, { css } from "styled-components";
+import propTypes from "prop-types";
+import { padding } from "styled-system";
+import BaseTheme from "../../../style/themes/base";
+const StyledTab = styled.div`
+  display: none;
+
+  ${({
+  isTabSelected,
+  position
+}) => isTabSelected && css`
+      display: block;
+
+      ${position === "left" && css`
+        width: 80%;
+      `}
+
+      ${padding}
+    `}
+`;
+StyledTab.defaultProps = {
+  position: "top",
+  theme: BaseTheme
+};
+StyledTab.propTypes = {
+  position: propTypes.oneOf(["top", "left"])
+};
+export default StyledTab;

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

@@ -0,0 +1,42 @@
+export function Tabs({ align, className, children, onTabChange, selectedTabId, renderHiddenTabs, position, extendedLine, size, borders, variant, validationStatusOverride, headerWidth, ...rest }: {
+    [x: string]: any;
+    align?: string | undefined;
+    className: any;
+    children: any;
+    onTabChange: any;
+    selectedTabId: any;
+    renderHiddenTabs?: boolean | undefined;
+    position?: string | undefined;
+    extendedLine?: boolean | undefined;
+    size: any;
+    borders?: string | undefined;
+    variant?: string | undefined;
+    validationStatusOverride: any;
+    headerWidth: any;
+}): JSX.Element;
+export namespace Tabs {
+    namespace propTypes {
+        const className: PropTypes.Requireable<string>;
+        const renderHiddenTabs: PropTypes.Requireable<boolean>;
+        const selectedTabId: PropTypes.Requireable<string>;
+        const children: PropTypes.Validator<string | number | boolean | {} | PropTypes.ReactElementLike | PropTypes.ReactNodeArray>;
+        const align: PropTypes.Requireable<string>;
+        const onTabChange: PropTypes.Requireable<(...args: any[]) => any>;
+        const position: PropTypes.Requireable<string>;
+        const size: PropTypes.Requireable<string>;
+        const extendedLine: PropTypes.Requireable<boolean>;
+        const borders: PropTypes.Requireable<string>;
+        function headerWidth(props: any, propName: any, componentName: any): Error | null;
+        const variant: PropTypes.Requireable<string>;
+        const validationStatusOverride: PropTypes.Requireable<PropTypes.InferProps<{
+            id: PropTypes.Requireable<PropTypes.InferProps<{
+                error: PropTypes.Requireable<boolean>;
+                warning: PropTypes.Requireable<boolean>;
+                info: PropTypes.Requireable<boolean>;
+            }>>;
+        }>>;
+    }
+}
+import Tab from "./tab";
+import PropTypes from "prop-types";
+export { Tab };

package/esm/components/tabs/tabs.component.js

@@ -0,0 +1,354 @@
+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, { useCallback, useContext, useEffect, useLayoutEffect, useMemo, useRef, useState, createRef, cloneElement, Children } from "react";
+import PropTypes from "prop-types";
+import styledSystemPropTypes from "@styled-system/prop-types";
+import Tab from "./tab";
+import Event from "../../__internal__/utils/helpers/events";
+import tagComponent from "../../__internal__/utils/helpers/tags/tags";
+import StyledTabs from "./tabs.style";
+import TabsHeader from "./__internal__/tabs-header";
+import TabTitle from "./__internal__/tab-title";
+import { DrawerSidebarContext } from "../drawer";
+import { filterStyledSystemMarginProps } from "../../style/utils";
+const marginPropTypes = filterStyledSystemMarginProps(styledSystemPropTypes.space);
+
+const Tabs = ({
+  align = "left",
+  className,
+  children,
+  onTabChange,
+  selectedTabId,
+  renderHiddenTabs = true,
+  position = "top",
+  extendedLine = true,
+  size,
+  borders = "off",
+  variant = "default",
+  validationStatusOverride,
+  headerWidth,
+  ...rest
+}) => {
+  /** The children nodes converted into an Array */
+  const filteredChildren = useMemo(() => Children.toArray(children).filter(child => child), [children]);
+  /** Array of the tabIds for the child nodes */
+
+  const tabIds = () => {
+    return filteredChildren.map(child => child.props.tabId);
+  };
+  /** Array of refs to the TabTitle nodes */
+
+
+  const tabRefs = useMemo(() => Array.from({
+    length: filteredChildren.length
+  }).map(() => /*#__PURE__*/createRef()), [filteredChildren.length]);
+  const previousSelectedTabId = useRef(selectedTabId);
+  const [selectedTabIdState, setSelectedTabIdState] = useState();
+  const [tabStopId, setTabStopId] = useState();
+  const {
+    isInSidebar
+  } = useContext(DrawerSidebarContext);
+  const [tabsErrors, setTabsErrors] = useState({});
+  const [tabsWarnings, setTabsWarnings] = useState({});
+  const [tabsInfos, setTabsInfos] = useState({});
+  useLayoutEffect(() => {
+    const selectedTab = selectedTabId || Children.toArray(children)[0].props.tabId;
+
+    if (!tabIds().includes(selectedTabId)) {
+      setTabStopId(React.Children.toArray(children)[0].props.tabId);
+    } else {
+      setTabStopId(selectedTab);
+    }
+
+    setSelectedTabIdState(selectedTab); // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+  const updateErrors = useCallback((id, hasError) => {
+    if (tabsErrors[id] !== hasError) {
+      setTabsErrors({ ...tabsErrors,
+        [id]: hasError
+      });
+    }
+  }, [tabsErrors]);
+  const updateWarnings = useCallback((id, hasWarning) => {
+    if (tabsWarnings[id] !== hasWarning) {
+      setTabsWarnings({ ...tabsWarnings,
+        [id]: hasWarning
+      });
+    }
+  }, [tabsWarnings]);
+  const updateInfos = useCallback((id, hasInfo) => {
+    if (tabsInfos[id] !== hasInfo) {
+      setTabsInfos({ ...tabsInfos,
+        [id]: hasInfo
+      });
+    }
+  }, [tabsInfos]);
+  /** Returns true/false for if the given tab id is selected. */
+
+  const isTabSelected = useCallback(tabId => tabId === selectedTabIdState, [selectedTabIdState]);
+  const hasTabStop = useCallback(tabId => tabId === tabStopId, [tabStopId]);
+  /** Updates the currently visible tab */
+
+  const updateVisibleTab = useCallback(tabid => {
+    if (!isTabSelected(tabid)) {
+      setSelectedTabIdState(tabid);
+    }
+
+    if (!hasTabStop(tabid)) {
+      setTabStopId(tabid);
+    }
+
+    if (onTabChange) {
+      onTabChange(tabid);
+    }
+  }, [onTabChange, isTabSelected, hasTabStop]);
+  /** Determines if the tab titles are in a vertical format. */
+
+  const isVertical = currentPosition => currentPosition === "left";
+  /** Handles the changing of tabs with the mouse */
+
+
+  const handleTabClick = ev => {
+    if (Event.isEventType(ev, "keydown")) {
+      return;
+    }
+
+    const {
+      tabid
+    } = ev.target.dataset;
+    updateVisibleTab(tabid);
+  };
+  /** Focuses the tab for the reference specified */
+
+
+  const focusTab = ref => ref.current.focus();
+  /** Will trigger the tab at the given index. */
+
+
+  const goToTab = (event, index) => {
+    event.preventDefault();
+    let newIndex = index;
+    const ids = tabIds();
+
+    if (index < 0) {
+      newIndex = ids.length - 1;
+    } else if (index === ids.length) {
+      newIndex = 0;
+    }
+
+    const nextTabId = ids[newIndex];
+    const nextRef = tabRefs[newIndex];
+    updateVisibleTab(nextTabId);
+    focusTab(nextRef);
+  };
+  /** Handles the keyboard navigation of tabs */
+
+
+  const handleKeyDown = index => {
+    return event => {
+      const isTabVertical = isVertical(position);
+      const isUp = isTabVertical && Event.isUpKey(event);
+      const isDown = isTabVertical && Event.isDownKey(event);
+      const isLeft = !isTabVertical && Event.isLeftKey(event);
+      const isRight = !isTabVertical && Event.isRightKey(event);
+
+      if (isUp || isLeft) {
+        goToTab(event, index - 1);
+      } else if (isDown || isRight) {
+        goToTab(event, index + 1);
+      }
+    };
+  };
+  /** Build the headers for the tab component */
+
+
+  const renderTabHeaders = () => {
+    const tabTitles = filteredChildren.map((child, index) => {
+      const {
+        tabId,
+        title,
+        siblings,
+        titlePosition,
+        errorMessage,
+        warningMessage,
+        infoMessage,
+        href,
+        customLayout
+      } = child.props;
+      const refId = `${tabId}-tab`;
+      const errors = tabsErrors[tabId] ? Object.entries(tabsErrors[tabId]).filter(tab => tab[1] === true).length : 0;
+      const warnings = tabsWarnings[tabId] ? Object.entries(tabsWarnings[tabId]).filter(tab => tab[1] === true).length : 0;
+      const infos = tabsInfos[tabId] ? Object.entries(tabsInfos[tabId]).filter(tab => tab[1] === true).length : 0;
+      const hasOverride = validationStatusOverride && validationStatusOverride[tabId];
+      const errorOverride = hasOverride && validationStatusOverride[tabId].error;
+      const warningOverride = hasOverride && validationStatusOverride[tabId].warning;
+      const infoOverride = hasOverride && validationStatusOverride[tabId].info;
+      const tabHasError = errorOverride !== undefined ? errorOverride : errors > 0;
+      const tabHasWarning = warningOverride !== undefined ? warningOverride : warnings > 0 && !tabHasError;
+      const tabHasInfo = infoOverride !== undefined ? infoOverride : infos > 0 && !tabHasError && !tabHasWarning;
+      const tabTitle = /*#__PURE__*/React.createElement(TabTitle, {
+        position: isInSidebar ? "left" : position,
+        className: child.props.className || "",
+        dataTabId: tabId,
+        id: refId,
+        key: tabId,
+        onClick: handleTabClick,
+        onKeyDown: handleKeyDown(index),
+        ref: tabRefs[index],
+        tabIndex: isTabSelected(tabId) || hasTabStop(tabId) ? "0" : "-1",
+        title: title,
+        href: href,
+        isTabSelected: isTabSelected(tabId),
+        error: tabHasError,
+        warning: tabHasWarning,
+        info: tabHasInfo,
+        size: size || "default",
+        borders: borders !== "off",
+        siblings: siblings,
+        titlePosition: titlePosition,
+        errorMessage: errorMessage,
+        warningMessage: warningMessage,
+        infoMessage: infoMessage,
+        alternateStyling: variant === "alternate",
+        noLeftBorder: ["no left side", "no sides"].includes(borders),
+        noRightBorder: ["no right side", "no sides"].includes(borders),
+        customLayout: customLayout,
+        isInSidebar: isInSidebar,
+        align: align
+      });
+      return tabTitle;
+    });
+    return /*#__PURE__*/React.createElement(TabsHeader, {
+      align: align,
+      position: isInSidebar ? "left" : position,
+      role: "tablist",
+      extendedLine: extendedLine,
+      alternateStyling: variant === "alternate" || isInSidebar,
+      noRightBorder: ["no right side", "no sides"].includes(borders),
+      isInSidebar: isInSidebar
+    }, tabTitles);
+  };
+  /** Builds the single currently selected tab */
+
+
+  const visibleTab = () => {
+    let tab;
+    filteredChildren.forEach(child => {
+      if (isTabSelected(child.props.tabId)) {
+        tab = child;
+      }
+    });
+    return tab ? /*#__PURE__*/cloneElement(tab, { ...tab.props,
+      role: "tabpanel",
+      position,
+      isTabSelected: isTabSelected(tab.props.tabId),
+      key: `${tab.props.tabId}-tab`,
+      ariaLabelledby: `${tab.props.tabId}-tab`,
+      updateErrors,
+      updateWarnings,
+      updateInfos
+    }) : null;
+  };
+  /** Builds all tabs where non selected tabs have class of hidden */
+
+
+  const renderTabs = () => {
+    if (isInSidebar) return null;
+
+    if (!renderHiddenTabs) {
+      return visibleTab();
+    }
+
+    const tabs = filteredChildren.map(child => {
+      return /*#__PURE__*/cloneElement(child, { ...child.props,
+        role: "tabpanel",
+        position,
+        isTabSelected: isTabSelected(child.props.tabId),
+        key: `${child.props.tabId}-tab`,
+        ariaLabelledby: `${child.props.tabId}-tab`,
+        updateErrors,
+        updateWarnings,
+        updateInfos
+      });
+    });
+    return tabs;
+  };
+
+  useEffect(() => {
+    if (previousSelectedTabId.current !== selectedTabId) {
+      if (selectedTabId !== selectedTabIdState) {
+        setSelectedTabIdState(selectedTabId);
+      }
+
+      previousSelectedTabId.current = selectedTabId;
+    }
+  }, [previousSelectedTabId, selectedTabId, selectedTabIdState]);
+  return /*#__PURE__*/React.createElement(StyledTabs, _extends({
+    className: className,
+    position: isInSidebar ? "left" : position,
+    updateErrors: updateErrors,
+    updateWarnings: updateWarnings
+  }, tagComponent("tabs", rest), {
+    isInSidebar: isInSidebar,
+    headerWidth: headerWidth
+  }, rest), renderTabHeaders(), renderTabs());
+};
+
+Tabs.propTypes = { ...marginPropTypes,
+
+  /** @ignore @private */
+  className: PropTypes.string,
+
+  /** Prevent rendering of hidden tabs, by default this is set to true and therefore all tabs will be rendered */
+  renderHiddenTabs: PropTypes.bool,
+
+  /** Allows manual control over the currently selected tab. */
+  selectedTabId: PropTypes.string,
+
+  /** The child elements of Tabs need to be Tab components. */
+  children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]).isRequired,
+
+  /** Sets the alignment of the tab titles. Possible values include. */
+  align: PropTypes.oneOf(["left", "right"]),
+
+  /** A callback for when a tab is changed. You can use this to manually control
+   * tab changing or to fire other events when a tab is changed. */
+  onTabChange: PropTypes.func,
+
+  /** The position of the tab title. */
+  position: PropTypes.oneOf(["top", "left"]),
+
+  /** Sets size of the tab titles. */
+  size: PropTypes.oneOf(["default", "large"]),
+
+  /** Sets the divider of the tab titles header to extend the full width of the parent. */
+  extendedLine: PropTypes.bool,
+
+  /** Adds a combination of borders to the tab titles. */
+  borders: PropTypes.oneOf(["off", "on", "no left side", "no right side", "no sides"]),
+
+  /** sets width to the tab headers. Can be any valid CSS string.
+   * The headerWidth prop works only for `position="left"`
+   */
+  headerWidth: (props, propName, componentName) => {
+    if (props.position !== "left" && props[propName] !== undefined) {
+      return new Error(`Invalid usage of prop ${propName} in ${componentName}. The ${propName} can be used only if position is set to left`);
+    }
+
+    return null;
+  },
+
+  /** Adds an alternate styling variant to the tab titles. */
+  variant: PropTypes.oneOf(["default", "alternate"]),
+
+  /** An object to support overriding validation statuses, when the Tabs have custom targets for example.
+   * The `id` property should match the `tabId`s for the rendered Tabs. */
+  validationStatusOverride: PropTypes.shape({
+    id: PropTypes.shape({
+      error: PropTypes.bool,
+      warning: PropTypes.bool,
+      info: PropTypes.bool
+    })
+  })
+};
+export { Tabs, Tab };