carbon-react 104.34.1 → 104.35.0

package/esm/__internal__/input-icon-toggle/input-icon-toggle.component.js

@@ -0,0 +1,90 @@
+import React from "react";
+import PropTypes from "prop-types";
+import Icon from "../../components/icon";
+import InputIconToggleStyle from "./input-icon-toggle.style";
+import ValidationIcon from "../validations/validation-icon.component";
+
+const shouldDisplayValidationIcon = ({
+  error,
+  warning,
+  info
+}) => {
+  const validation = error || warning || info || null;
+  return typeof validation === "string";
+};
+
+const InputIconToggle = ({
+  disabled,
+  readOnly,
+  size,
+  inputIcon: type,
+  onClick,
+  onFocus,
+  onBlur,
+  onMouseDown,
+  error,
+  warning,
+  info,
+  useValidationIcon,
+  align,
+  iconTabIndex,
+  validationIconId
+}) => {
+  if (useValidationIcon && !disabled && shouldDisplayValidationIcon({
+    error,
+    warning,
+    info
+  })) {
+    return /*#__PURE__*/React.createElement(InputIconToggleStyle, {
+      size: size
+    }, /*#__PURE__*/React.createElement(ValidationIcon, {
+      error: error,
+      warning: warning,
+      info: info,
+      size: size,
+      onClick: onClick,
+      onFocus: onFocus,
+      onBlur: onBlur,
+      isPartOfInput: true,
+      tabIndex: iconTabIndex,
+      iconId: validationIconId,
+      tooltipPosition: align === "right" ? "left" : "right"
+    }));
+  }
+
+  if (type && !(disabled || readOnly)) {
+    return /*#__PURE__*/React.createElement(InputIconToggleStyle, {
+      size: size,
+      onClick: onClick,
+      onFocus: onFocus,
+      onBlur: onBlur,
+      onMouseDown: onMouseDown,
+      tabIndex: iconTabIndex
+    }, /*#__PURE__*/React.createElement(Icon, {
+      type: type
+    }));
+  }
+
+  return null;
+};
+
+InputIconToggle.propTypes = {
+  error: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]),
+  warning: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]),
+  info: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]),
+  disabled: PropTypes.bool,
+  readOnly: PropTypes.bool,
+  onClick: PropTypes.func,
+  onFocus: PropTypes.func,
+  onBlur: PropTypes.func,
+  onMouseDown: PropTypes.func,
+  inputIcon: PropTypes.string,
+  size: PropTypes.oneOf(["small", "medium", "large"]),
+  align: PropTypes.oneOf(["left", "right"]),
+  useValidationIcon: PropTypes.bool,
+  iconTabIndex: PropTypes.number,
+
+  /** Id of the validation icon */
+  validationIconId: PropTypes.string
+};
+export default InputIconToggle;

package/esm/__internal__/input-icon-toggle/input-icon-toggle.d.ts

@@ -0,0 +1,24 @@
+import * as React from "react";
+
+export interface InputIconToggleProps {
+  error?: boolean | string;
+  info?: boolean | string;
+  warning?: boolean | string;
+  disabled?: boolean;
+  readOnly?: boolean;
+  size?: "small" | "medium" | "large";
+  onClick?: (ev: React.ChangeEvent<HTMLElement>) => void;
+  onBlur?: (ev: React.FocusEvent<HTMLElement>) => void;
+  onFocus?: (ev: React.FocusEvent<HTMLElement>) => void;
+  onMouseDown?: (ev: React.ChangeEvent<HTMLElement>) => void;
+  inputIcon?: string;
+  align?: "left" | "right";
+  useValidationIcon?: boolean;
+  iconTabIndex?: number;
+  tooltipId?: string;
+  /** Id of the validation icon */
+  validationIconId?: string;
+}
+declare function InputIconToggle(props: InputIconToggleProps): JSX.Element;
+
+export default InputIconToggle;

package/esm/__internal__/input-icon-toggle/input-icon-toggle.style.d.ts

@@ -0,0 +1,5 @@
+export default InputIconToggleStyle;
+declare const InputIconToggleStyle: import("styled-components").StyledComponent<"span", any, {
+    onKeyDown: (e: import("react").KeyboardEvent<HTMLSpanElement>) => any;
+    theme: import("../../style/themes/base").ThemeObject;
+}, "theme" | "onKeyDown">;

package/esm/__internal__/input-icon-toggle/input-icon-toggle.style.js

@@ -0,0 +1,47 @@
+import styled, { css } from "styled-components";
+import PropTypes from "prop-types";
+import BaseTheme from "../../style/themes/base";
+import sizes from "../input/input-sizes.style";
+const InputIconToggleStyle = styled.span.attrs(({
+  onClick
+}) => ({
+  // eslint-disable-next-line consistent-return
+  onKeyDown: e => {
+    if (onClick && (e.key === " " || e.key === "Enter")) {
+      e.preventDefault();
+      return onClick(e);
+    }
+  },
+  theme: BaseTheme
+}))`
+  align-items: center;
+  cursor: pointer;
+  display: flex;
+  justify-content: center;
+
+  ${({
+  size
+}) => css`
+    margin-right: calc(-1 * ${sizes[size].horizontalPadding});
+    margin-left: calc(-1 * ${sizes[size].horizontalPadding});
+    width: ${sizes[size].height};
+  `}
+
+  &:focus {
+    outline: solid 3px ${({
+  theme
+}) => theme.colors.focus};
+  }
+`;
+InputIconToggleStyle.safeProps = ["size", "error", "warning", "info"];
+InputIconToggleStyle.defaultProps = {
+  size: "medium",
+  theme: BaseTheme
+};
+InputIconToggleStyle.propTypes = {
+  size: PropTypes.oneOf(["small", "medium", "large"]),
+  error: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
+  warning: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
+  info: PropTypes.oneOfType([PropTypes.string, PropTypes.bool])
+};
+export default InputIconToggleStyle;

package/esm/__internal__/label/icon-wrapper.style.d.ts

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

package/esm/__internal__/label/icon-wrapper.style.js

@@ -0,0 +1,23 @@
+import styled from "styled-components";
+import ValidationIconStyle from "../validations/validation-icon.style";
+import StyledHelp from "../../components/help/help.style";
+const IconWrapperStyle = styled.div`
+  display: inline-block;
+  margin: 0;
+  margin-left: 4px;
+  width: 24px;
+  height: 24px;
+  position: relative;
+  margin-top: -3px;
+  margin-bottom: -4px;
+  vertical-align: top;
+
+  :focus {
+    outline: 2px solid var(--colorsSemanticFocus500);
+  }
+
+  ${ValidationIconStyle}, ${StyledHelp} {
+    position: static;
+  }
+`;
+export default IconWrapperStyle;

package/esm/__internal__/label/index.d.ts

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

package/esm/__internal__/label/index.js

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

package/esm/__internal__/label/label.component.d.ts

@@ -0,0 +1,69 @@
+declare var _default: React.MemoExoticComponent<{
+    ({ disabled, inline, align, width, optional, labelId, tooltipId, children, error, warning, info, help, helpIcon, helpTabIndex, useValidationIcon, htmlFor, pr, pl, isRequired, validationIconId, }: {
+        disabled: any;
+        inline: any;
+        align?: string | undefined;
+        width: any;
+        optional: any;
+        labelId: any;
+        tooltipId: any;
+        children: any;
+        error: any;
+        warning: any;
+        info: any;
+        help: any;
+        helpIcon: any;
+        helpTabIndex: any;
+        useValidationIcon?: boolean | undefined;
+        htmlFor: any;
+        pr: any;
+        pl: any;
+        isRequired: any;
+        validationIconId: any;
+    }): JSX.Element;
+    propTypes: {
+        /** Label width */
+        width: PropTypes.Requireable<number>;
+        /** Label alignment */
+        align: PropTypes.Requireable<string>;
+        /** When true, label is placed in line an input */
+        inline: PropTypes.Requireable<boolean>;
+        /** If true, the component will be disabled */
+        disabled: PropTypes.Requireable<boolean>;
+        /** Flag to configure component as optional in Form */
+        optional: PropTypes.Requireable<boolean>;
+        /** The unique id of the label element */
+        labelId: PropTypes.Requireable<string>;
+        /** The unique id of the Help component tooltip, used for accessibility */
+        tooltipId: PropTypes.Requireable<string>;
+        /** Children elements */
+        children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        /** Status of error validations */
+        error: PropTypes.Requireable<string | boolean>;
+        /** Status of warnings */
+        warning: PropTypes.Requireable<string | boolean>;
+        /** Status of info */
+        info: PropTypes.Requireable<string | boolean>;
+        /** A message that the Help component will display */
+        help: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        /** Icon type */
+        helpIcon: PropTypes.Requireable<string>;
+        /** Overrides the default tabindex of the Help component */
+        helpTabIndex: PropTypes.Requireable<string | number>;
+        /** Whether to show the validation icon */
+        useValidationIcon: PropTypes.Requireable<boolean>;
+        /** A string that represents the ID of another form element */
+        htmlFor: PropTypes.Requireable<string>;
+        /** Padding right, integer multiplied by base spacing constant (8) */
+        pr: PropTypes.Requireable<number>;
+        /** Padding left, integer multiplied by base spacing constant (8) */
+        pl: PropTypes.Requireable<number>;
+        /** Flag to configure component as mandatory */
+        isRequired: PropTypes.Requireable<boolean>;
+        /** Id of the validation icon */
+        validationIconId: PropTypes.Requireable<string>;
+    };
+}>;
+export default _default;
+import PropTypes from "prop-types";
+import React from "react";

package/esm/__internal__/label/label.component.js

@@ -0,0 +1,186 @@
+import React, { useState, useContext } from "react";
+import PropTypes from "prop-types";
+import Help from "../../components/help";
+import StyledLabel, { StyledLabelContainer } from "./label.style";
+import ValidationIcon from "../validations/validation-icon.component";
+import IconWrapperStyle from "./icon-wrapper.style";
+import { InputContext, InputGroupContext } from "../input-behaviour";
+
+const shouldDisplayValidationIcon = ({
+  error,
+  warning,
+  info,
+  disabled
+}) => {
+  const validation = error || warning || info;
+  return disabled ? false : typeof validation === "string";
+};
+
+const tooltipPosition = ({
+  error,
+  warning,
+  info,
+  inline
+}) => {
+  return (error || warning || info) && inline === true ? "top" : "right";
+};
+
+const Label = ({
+  disabled,
+  inline,
+  align = "right",
+  width,
+  optional,
+  labelId,
+  tooltipId,
+  children,
+  error,
+  warning,
+  info,
+  help,
+  helpIcon,
+  helpTabIndex,
+  useValidationIcon = true,
+  htmlFor,
+  pr,
+  pl,
+  isRequired,
+  validationIconId
+}) => {
+  const [isFocused, setFocus] = useState(false);
+  const {
+    onMouseEnter,
+    onMouseLeave
+  } = useContext(InputContext);
+  const {
+    onMouseEnter: onGroupMouseEnter,
+    onMouseLeave: onGroupMouseLeave
+  } = useContext(InputGroupContext);
+
+  const handleMouseEnter = ev => {
+    if (onMouseEnter) onMouseEnter(ev);
+    if (onGroupMouseEnter) onGroupMouseEnter(ev);
+  };
+
+  const handleMouseLeave = ev => {
+    if (onMouseLeave) onMouseLeave(ev);
+    if (onGroupMouseLeave) onGroupMouseLeave(ev);
+  };
+
+  const icon = () => {
+    const wrapperProps = {
+      onFocus: () => setFocus(true),
+      onBlur: () => setFocus(false)
+    };
+
+    if (useValidationIcon && shouldDisplayValidationIcon({
+      error,
+      warning,
+      info,
+      disabled
+    })) {
+      const tooltipPositionValue = tooltipPosition({
+        error,
+        warning,
+        info,
+        inline
+      });
+      return /*#__PURE__*/React.createElement(IconWrapperStyle, null, /*#__PURE__*/React.createElement(ValidationIcon, {
+        iconId: validationIconId,
+        tooltipId: tooltipId,
+        error: error,
+        warning: warning,
+        info: info,
+        tooltipPosition: tooltipPositionValue,
+        tooltipFlipOverrides: ["top", "bottom"]
+      }));
+    }
+
+    return help && /*#__PURE__*/React.createElement(IconWrapperStyle, wrapperProps, /*#__PURE__*/React.createElement(Help, {
+      tooltipId: tooltipId,
+      tabIndex: helpTabIndex,
+      type: helpIcon,
+      isFocused: isFocused
+    }, help));
+  };
+
+  return /*#__PURE__*/React.createElement(StyledLabelContainer, {
+    align: align,
+    inline: inline,
+    width: width,
+    optional: optional,
+    pr: pr,
+    pl: pl
+  }, /*#__PURE__*/React.createElement(StyledLabel, {
+    "data-element": "label",
+    disabled: disabled,
+    id: labelId,
+    htmlFor: htmlFor,
+    onMouseEnter: handleMouseEnter,
+    onMouseLeave: handleMouseLeave,
+    isRequired: isRequired
+  }, children), icon());
+};
+
+Label.propTypes = {
+  /** Label width */
+  width: PropTypes.number,
+
+  /** Label alignment */
+  align: PropTypes.oneOf(["left", "right"]),
+
+  /** When true, label is placed in line an input */
+  inline: PropTypes.bool,
+
+  /** If true, the component will be disabled */
+  disabled: PropTypes.bool,
+
+  /** Flag to configure component as optional in Form */
+  optional: PropTypes.bool,
+
+  /** The unique id of the label element */
+  labelId: PropTypes.string,
+
+  /** The unique id of the Help component tooltip, used for accessibility */
+  tooltipId: PropTypes.string,
+
+  /** Children elements */
+  children: PropTypes.node,
+
+  /** Status of error validations */
+  error: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]),
+
+  /** Status of warnings */
+  warning: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]),
+
+  /** Status of info */
+  info: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]),
+
+  /** A message that the Help component will display */
+  help: PropTypes.node,
+
+  /** Icon type */
+  helpIcon: PropTypes.string,
+
+  /** Overrides the default tabindex of the Help component */
+  helpTabIndex: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+
+  /** Whether to show the validation icon */
+  useValidationIcon: PropTypes.bool,
+
+  /** A string that represents the ID of another form element */
+  htmlFor: PropTypes.string,
+
+  /** Padding right, integer multiplied by base spacing constant (8) */
+  pr: PropTypes.oneOf([1, 2]),
+
+  /** Padding left, integer multiplied by base spacing constant (8) */
+  pl: PropTypes.oneOf([1, 2]),
+
+  /** Flag to configure component as mandatory */
+  isRequired: PropTypes.bool,
+
+  /** Id of the validation icon */
+  validationIconId: PropTypes.string
+};
+export default /*#__PURE__*/React.memo(Label);

package/esm/__internal__/label/label.d.ts

@@ -0,0 +1,43 @@
+import * as React from "react";
+import { ValidationPropTypes } from "../validations";
+
+export interface LabelPropTypes extends ValidationPropTypes {
+  /** Label width */
+  width?: number;
+  /** Label alignment */
+  align?: "left" | "right";
+  /** When true, label is placed in line an input */
+  inline?: boolean;
+  /** Flag to configure component as mandatory */
+  isRequired?: boolean;
+  /** If true, the component will be disabled */
+  disabled?: boolean;
+  /** Flag to configure component as optional in Form */
+  optional?: boolean;
+  /** The unique id of the label element */
+  labelId?: string;
+  /** The unique id of the Help component tooltip, used for accessibility */
+  tooltipId?: string;
+  /** Children elements */
+  children?: React.ReactNode;
+  /** A message that the Help component will display */
+  help?: React.ReactNode;
+  /** Icon type */
+  helpIcon?: string;
+  /** Overrides the default tabindex of the Help component */
+  helpTabIndex?: string;
+  /** Whether to show the validation icon */
+  useValidationIcon?: boolean;
+  /** A string that represents the ID of another form element */
+  htmlFor: string;
+  /** Padding right, integer multiplied by base spacing constant (8) */
+  pr?: 1 | 2;
+  /** Padding left, integer multiplied by base spacing constant (8) */
+  pl?: 1 | 2;
+  /** Id of the validation icon */
+  validationIconId?: string;
+}
+
+declare function Label(props: LabelPropTypes): JSX.Element;
+
+export default Label;

package/esm/__internal__/label/label.style.d.ts

@@ -0,0 +1,3 @@
+export const StyledLabelContainer: any;
+export default LabelStyle;
+declare const LabelStyle: import("styled-components").StyledComponent<"label", any, {}, never>;

package/esm/__internal__/label/label.style.js

@@ -0,0 +1,74 @@
+import styled, { css } from "styled-components";
+import PropTypes from "prop-types";
+const LabelStyle = styled.label`
+  color: var(--colorsUtilityYin090);
+  display: block;
+  font-weight: 600; //TODO: (tokens) use token var(--fontWeights500)
+
+  ${({
+  isRequired
+}) => isRequired && css`
+      ::after {
+        content: "*";
+        color: var(--colorsSemanticNegative500);
+        font-weight: 700;
+        margin-left: var(--spacing100);
+      }
+    `}
+
+  ${({
+  disabled
+}) => disabled && css`
+      color: var(--colorsUtilityYin030);
+    `}
+`;
+LabelStyle.propTypes = {
+  disabled: PropTypes.bool,
+  isRequired: PropTypes.bool
+};
+export const StyledLabelContainer = styled.div`
+  display: flex;
+  align-items: center;
+  margin-bottom: 8px;
+
+  ${({
+  align,
+  inline,
+  pr,
+  pl,
+  width
+}) => inline && css`
+      box-sizing: border-box;
+      margin-bottom: 0;
+      ${pr && css`
+        padding-right: var(${pr === 1 ? "--spacing100" : "--spacing200"});
+      `};
+      ${pl && css`
+        padding-left: var(${pl === 1 ? "--spacing100" : "--spacing200"});
+      `};
+      justify-content: ${align === "right" ? "flex-end" : "flex-start"};
+      width: ${width === 0 ? StyledLabelContainer.defaultProps.width : width}%;
+    `}
+
+  ${({
+  optional
+}) => optional && css`
+      ::after {
+        content: "(optional)";
+        font-weight: 350; //TODO: (tokens) use token var(--fontWeights400)
+        margin-left: 4px;
+      }
+    `}
+`;
+StyledLabelContainer.defaultProps = {
+  align: "right",
+  width: 30
+};
+StyledLabelContainer.propTypes = {
+  align: PropTypes.oneOf(["left", "right"]),
+  inline: PropTypes.bool,
+  width: PropTypes.number,
+  pr: PropTypes.number,
+  pl: PropTypes.number
+};
+export default LabelStyle;

package/esm/__internal__/popover/index.d.ts

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

package/esm/__internal__/popover/index.js

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

package/esm/__internal__/popover/popover.component.d.ts

@@ -0,0 +1,24 @@
+export default Popover;
+declare function Popover({ children, placement, disablePortal, reference, onFirstUpdate, modifiers, disableBackgroundUI, }: {
+    children: any;
+    placement: any;
+    disablePortal: any;
+    reference: any;
+    onFirstUpdate: any;
+    modifiers: any;
+    disableBackgroundUI: any;
+}): any;
+declare namespace Popover {
+    namespace propTypes {
+        const children: PropTypes.Validator<string | number | boolean | {} | PropTypes.ReactElementLike | PropTypes.ReactNodeArray>;
+        const placement: PropTypes.Requireable<string>;
+        const disableBackgroundUI: PropTypes.Requireable<boolean>;
+        const modifiers: PropTypes.Requireable<any[]>;
+        const onFirstUpdate: PropTypes.Requireable<(...args: any[]) => any>;
+        const disablePortal: PropTypes.Requireable<boolean>;
+        const reference: PropTypes.Requireable<PropTypes.InferProps<{
+            current: PropTypes.Requireable<any>;
+        }>>;
+    }
+}
+import PropTypes from "prop-types";