carbon-react 116.1.2 → 116.1.3

package/esm/__internal__/utils/helpers/events/events.d.ts

@@ -17,7 +17,7 @@ declare const Events: {
     /**
      * Determines if event is a keyboard event
      */
-    isKeyboardEvent: (ev: React.SyntheticEvent | Event) => ev is React.KeyboardEvent<Element> | KeyboardEvent;
+    isKeyboardEvent: (ev: React.SyntheticEvent | Event) => ev is KeyboardEvent | React.KeyboardEvent<Element>;
     /**
      * Determines if a number key along the top of the keyboard or a number key on the
      * keypad is pressed

package/esm/components/date/date.component.js

@@ -41,6 +41,9 @@ const DateInput = /*#__PURE__*/React.forwardRef(({
   tooltipPosition,
   value,
   inputRef,
+  inputWidth,
+  labelWidth,
+  maxWidth,
   ...rest
 }, ref) => {
   const wrapperRef = useRef();
@@ -306,7 +309,9 @@ const DateInput = /*#__PURE__*/React.forwardRef(({
     "data-element": dataElement,
     "data-role": dataRole
   }, marginProps, {
-    applyDateRangeStyling: !!inputRefMap
+    applyDateRangeStyling: !!inputRefMap,
+    maxWidth: maxWidth,
+    inputWidth: inputWidth
   }), /*#__PURE__*/React.createElement(Textbox, _extends({}, filterOutStyledSystemSpacingProps(rest), {
     inputRef: inputRef,
     value: computedValue(),
@@ -328,6 +333,9 @@ const DateInput = /*#__PURE__*/React.forwardRef(({
     size: size,
     disabled: disabled,
     readOnly: readOnly,
+    inputWidth: inputWidth,
+    labelWidth: labelWidth,
+    maxWidth: maxWidth,
     m: 0
   })), /*#__PURE__*/React.createElement(DatePicker, {
     disablePortal: disablePortal,

package/esm/components/date/date.style.js

@@ -18,8 +18,10 @@ const StyledDateInput = styled.div`
   & ${StyledInputPresentation} {
     flex: none;
     width: ${({
+  inputWidth,
+  maxWidth,
   size
-}) => datePickerWidth[size]};
+}) => maxWidth || inputWidth ? "" : datePickerWidth[size]};
 
     ${StyledInput} {
       margin-right: -8px;
@@ -28,11 +30,12 @@ const StyledDateInput = styled.div`
 
   ${({
   applyDateRangeStyling,
+  maxWidth,
   size,
   labelInline
 }) => applyDateRangeStyling && !labelInline && css`
       ${FieldLineStyle} {
-        max-width: ${datePickerWidth[size]};
+        max-width: ${maxWidth || datePickerWidth[size]}};
       }
 
       ${StyledValidationMessage}, ${StyledLabel} {

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

@@ -0,0 +1,19 @@
+import React from "react";
+import { MarginProps } from "styled-system";
+import { IconType } from "../icon";
+import { TagProps } from "../../__internal__/utils/helpers/tags/tags";
+export interface DetailProps extends MarginProps, TagProps {
+    /** Custom className. */
+    className?: string;
+    /** The type of icon to use. */
+    icon?: IconType;
+    /** A small detail to display under the main content. */
+    footnote?: string;
+    /** The rendered children of the component. */
+    children?: React.ReactNode;
+}
+export declare const Detail: {
+    ({ className, icon, footnote, children, ...rest }: DetailProps): JSX.Element;
+    displayName: string;
+};
+export default Detail;

package/esm/components/detail/detail.component.js

@@ -2,12 +2,9 @@ function _extends() { _extends = Object.assign || function (target) { for (var i
 
 import React from "react";
 import PropTypes from "prop-types";
-import classNames from "classnames";
-import styledSystemPropTypes from "@styled-system/prop-types";
 import { filterStyledSystemMarginProps } from "../../style/utils";
 import tagComponent from "../../__internal__/utils/helpers/tags/tags";
 import { StyledDetail, StyledDetailContent, StyledDetailIcon, StyledDetailFootnote } from "./detail.style";
-const marginPropTypes = filterStyledSystemMarginProps(styledSystemPropTypes);
 
 const Detail = ({
   className,
@@ -15,45 +12,182 @@ const Detail = ({
   footnote,
   children,
   ...rest
-}) => {
-  const marginProps = filterStyledSystemMarginProps(rest);
-  return /*#__PURE__*/React.createElement(StyledDetail, _extends({
-    className: classNames("carbon-detail", className),
-    hasIcon: icon
-  }, tagComponent("detail", rest), marginProps), icon && /*#__PURE__*/React.createElement(StyledDetailIcon, {
-    type: icon,
-    "data-element": "icon"
-  }), /*#__PURE__*/React.createElement(StyledDetailContent, {
-    "data-element": "detail-content",
-    hasIcon: icon
-  }, children), footnote && /*#__PURE__*/React.createElement(StyledDetailFootnote, {
-    "data-element": "footnote",
-    hasIcon: icon
-  }, footnote));
-};
-
-Detail.propTypes = { ...marginPropTypes,
-
-  /**
-   * Custom className
-   */
-  className: PropTypes.string,
-
-  /**
-   * <a href="https://carbon.sage.com/?path=/docs/icon--list-of-icons#list-of-icons" target="_blank">List of supported icons</a>
-   *
-   * The type of icon to use.
-   */
-  icon: PropTypes.string,
-
-  /**
-   * A small detail to display under the main content.
-   */
-  footnote: PropTypes.string,
+}) => /*#__PURE__*/React.createElement(StyledDetail, _extends({
+  className: `carbon-detail ${className}`
+}, tagComponent("detail", rest), filterStyledSystemMarginProps(rest)), icon && /*#__PURE__*/React.createElement(StyledDetailIcon, {
+  type: icon,
+  "data-element": "icon"
+}), /*#__PURE__*/React.createElement(StyledDetailContent, {
+  "data-element": "detail-content",
+  hasIcon: !!icon
+}, children), footnote && /*#__PURE__*/React.createElement(StyledDetailFootnote, {
+  "data-element": "footnote",
+  hasIcon: !!icon
+}, footnote));
 
-  /**
-   * The rendered children of the component.
-   */
-  children: PropTypes.node
+Detail.propTypes = {
+  "children": PropTypes.node,
+  "className": PropTypes.string,
+  "data-component": PropTypes.string,
+  "data-element": PropTypes.string,
+  "data-role": PropTypes.string,
+  "footnote": PropTypes.string,
+  "icon": PropTypes.oneOf(["add", "admin", "alert_on", "alert", "analysis", "arrow_bottom_right_circle", "arrow_down", "arrow_left_boxed", "arrow_left_right_small", "arrow_left_small", "arrow_left", "arrow_right_small", "arrow_right", "arrow_top_left_circle", "arrow_up", "arrow", "arrows_left_right", "attach", "bank_with_card", "bank", "basket_with_squares", "basket", "bed", "bin", "block_arrow_right", "blocked_square", "blocked", "bold", "box_arrow_left", "boxed_shapes", "bulk_destroy", "bullet_list_dotted", "bullet_list_numbers", "bullet_list", "business", "calendar_today", "calendar", "call", "camera", "car_lock", "car_money", "car_repair", "card_view", "caret_down", "caret_large_down", "caret_large_left", "caret_large_right", "caret_large_up", "caret_left", "caret_right", "caret_up", "cart", "cash", "chart_bar", "chart_line", "chart_pie", "chat_notes", "chat", "chevron_down_thick", "chevron_down", "chevron_left_thick", "chevron_left", "chevron_right_thick", "chevron_right", "chevron_up_thick", "chevron_up", "circle_with_dots", "circles_connection", "clock", "close", "coins", "collaborate", "computer_clock", "connect", "construction", "contacts", "copy", "create", "credit_card_slash", "credit_card", "cross_circle", "cross", "csv", "dashboard", "delete", "delivery", "disconnect", "disputed", "document_right_align", "document_tick", "document_vertical_lines", "download", "draft", "drag_vertical", "drag", "drill", "dropdown", "duplicate", "edit", "edited", "ellipsis_horizontal", "ellipsis_vertical", "email_switch", "email", "entry", "envelope_dollar", "envelope_euro", "error_square", "error", "euro", "expand", "factory", "favourite_lined", "favourite", "fax", "feedback", "file_excel", "file_generic", "file_image", "file_pdf", "file_word", "files_leaning", "filter_new", "filter", "fit_height", "fit_width", "flag", "folder", "form_refresh", "gift", "go", "graduation_hat", "graph", "grid", "hand_cash_coins", "hand_cash_note", "help", "hide", "home", "image", "in_progress", "in_transit", "individual", "info", "italic", "key", "laptop", "ledger_arrow_left", "ledger_arrow_right", "ledger", "lightbulb_off", "lightbulb_on", "link", "list_view", "location", "locked", "logout", "lookup", "marker", "message", "minus_large", "minus", "mobile", "money_bag", "none", "old_warning", "palm_tree", "pause_circle", "pause", "pdf", "people_switch", "people", "percentage_boxed", "person_info", "person_tick", "person", "petrol_pump", "phone", "piggy_bank", "plane", "play_circle", "play", "plus_large", "plus", "pound", "print", "progress", "progressed", "question_hollow", "question_mark", "question", "refresh_clock", "refresh", "remove", "sage_coin", "save", "scan", "search", "services", "settings_old", "settings", "share", "shop", "sort_down", "sort_up", "spanner", "split_container", "split", "square_dot", "squares_nine", "stacked_boxes", "stacked_squares", "submitted", "sync", "tag", "talk", "theatre_masks", "three_boxes", "tick_circle", "tick_thick", "tick", "true_tick", "u_turn_left", "u_turn_right", "undo", "unlocked", "upload", "uploaded", "video", "view", "warning"]),
+  "m": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string]),
+  "margin": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string]),
+  "marginBottom": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string]),
+  "marginLeft": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string]),
+  "marginRight": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string]),
+  "marginTop": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string]),
+  "marginX": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string]),
+  "marginY": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string]),
+  "mb": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string]),
+  "ml": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string]),
+  "mr": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string]),
+  "mt": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string]),
+  "mx": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string]),
+  "my": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string])
 };
+export { Detail };
+Detail.displayName = "Detail";
 export default Detail;

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

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+declare const StyledDetail: import("styled-components").StyledComponent<"div", any, {}, never>;
+declare const StyledDetailContent: import("styled-components").StyledComponent<"div", any, {
+    hasIcon: boolean;
+}, never>;
+declare const StyledDetailIcon: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("../icon").IconProps & import("react").RefAttributes<HTMLSpanElement>>, any, {}, never>;
+declare const StyledDetailFootnote: import("styled-components").StyledComponent<"div", any, {
+    hasIcon: boolean;
+}, never>;
+export { StyledDetail, StyledDetailContent, StyledDetailIcon, StyledDetailFootnote, };

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

@@ -1 +1,2 @@
-export { default } from "./detail";
+export { default } from "./detail.component";
+export type { DetailProps } from "./detail.component";

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

@@ -31,7 +31,7 @@ export interface DrawerProps {
     /** Makes the footer of the drawer sticky. Footer prop must also be set. */
     stickyFooter?: boolean;
 }
-declare const DrawerSidebarContext: React.Context<{}>;
+declare const DrawerSidebarContext: React.Context<Partial<DrawerSidebarContextProps>>;
 export declare const Drawer: ({ defaultExpanded, expanded, onChange, children, expandedWidth, sidebar, animationDuration, backgroundColor, title, footer, showControls, height, stickyHeader, stickyFooter, ...rest }: DrawerProps) => JSX.Element;
 export { DrawerSidebarContext };
 export default Drawer;

package/esm/components/icon/icon.component.js

@@ -7,7 +7,7 @@ import { TooltipContext } from "../../__internal__/tooltip-provider";
 import tagComponent from "../../__internal__/utils/helpers/tags/tags";
 import StyledIcon from "./icon.style";
 import { ICON_TOOLTIP_POSITIONS } from "./icon-config";
-import { TabTitleContext } from "../tabs/__internal__/tab-title/tab-title.component";
+import { TabTitleContext } from "../tabs/__internal__/tab-title";
 const Icon = /*#__PURE__*/React.forwardRef(({
   "aria-hidden": ariaHidden,
   ariaLabel,

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

@@ -3,3 +3,4 @@ export { default as MenuItem } from "./menu-item/menu-item";
 export { default as ScrollableBlock } from "./scrollable-block/scrollable-block";
 export { default as MenuDivider } from "./menu-divider/menu-divider";
 export { default as MenuSegmentTitle } from "./menu-segment-title/menu-segment-title";
+export { default as MenuFullscreen } from "./menu-full-screen/menu-full-screen";

package/esm/components/tabs/__internal__/tab-title/index.d.ts

@@ -1 +1,2 @@
-export { default } from "./tab-title";
+export { default, TabTitleContext } from "./tab-title.component";
+export type { TabTitleProps } from "./tab-title.component";

package/esm/components/tabs/__internal__/tab-title/index.js

@@ -1 +1 @@
-export { default } from "./tab-title.component";
+export { default, TabTitleContext } from "./tab-title.component";

package/esm/components/tabs/__internal__/tab-title/tab-title.component.d.ts

@@ -1,4 +1,38 @@
-export const TabTitleContext: React.Context<{}>;
-export default TabTitle;
 import React from "react";
-declare const TabTitle: React.ForwardRefExoticComponent<React.RefAttributes<any>>;
+interface TabTitleContextProps {
+    isInTab?: boolean;
+}
+export interface TabTitleProps {
+    /** Identifier used for testing purposes */
+    "data-role"?: string;
+    title?: string;
+    id?: string;
+    dataTabId?: string;
+    className?: string;
+    children?: React.ReactNode;
+    isTabSelected?: boolean;
+    position?: "top" | "left";
+    errorMessage?: string;
+    warningMessage?: string;
+    infoMessage?: string;
+    error?: boolean;
+    warning?: boolean;
+    info?: boolean;
+    borders?: boolean;
+    noLeftBorder?: boolean;
+    noRightBorder?: boolean;
+    alternateStyling?: boolean;
+    isInSidebar?: boolean;
+    siblings?: React.ReactNode;
+    titlePosition?: "before" | "after";
+    href?: string;
+    tabIndex?: number;
+    size?: "default" | "large";
+    align?: "left" | "right";
+    customLayout?: React.ReactNode;
+    onClick: (ev: React.MouseEvent<HTMLButtonElement | HTMLAnchorElement>) => void;
+    onKeyDown: (ev: React.KeyboardEvent<HTMLButtonElement | HTMLAnchorElement>) => void;
+}
+export declare const TabTitleContext: React.Context<TabTitleContextProps>;
+declare const TabTitle: React.ForwardRefExoticComponent<TabTitleProps & React.RefAttributes<HTMLElement>>;
+export default TabTitle;