carbon-react 106.0.1 → 106.1.0

package/lib/__internal__/input/input.component.js

@@ -7,9 +7,7 @@ exports.default = void 0;
 
 var _react = _interopRequireWildcard(require("react"));
 
-var _propTypes = _interopRequireDefault(require("prop-types"));
-
-var _input = _interopRequireDefault(require("./input.style"));
+var _input2 = _interopRequireDefault(require("./input.style"));
 
 var _inputBehaviour = require("../input-behaviour");
 
@@ -21,6 +19,28 @@ function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj;
 
 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); }
 
+function selectTextOnFocus(input) {
+  // setTimeout is required so the dom has a chance to place the cursor in the input
+  setTimeout(() => {
+    if (input !== null && input !== void 0 && input.current) {
+      const {
+        selectionStart,
+        selectionEnd,
+        value
+      } = input.current;
+      const {
+        length
+      } = value; // only select text if cursor is at the very end or the very start of the value
+
+      if (selectionStart === 0 && selectionEnd === 0 || selectionStart === length && selectionEnd === length) {
+        if (document.activeElement === input.current) {
+          input.current.setSelectionRange(0, length);
+        }
+      }
+    }
+  });
+}
+
 const Input = /*#__PURE__*/_react.default.forwardRef(({
   align,
   placeholder,
@@ -43,59 +63,95 @@ const Input = /*#__PURE__*/_react.default.forwardRef(({
   const groupContext = (0, _react.useContext)(_inputBehaviour.InputGroupContext);
   const deferredTimeout = (0, _react.useRef)(null);
   let input = (0, _react.useRef)(null);
-  if (ref) input = ref;
+
+  if (ref) {
+    input = ref;
+  }
+
   (0, _react.useEffect)(() => {
-    if (autoFocus && input.current) input.current.focus();
+    if (autoFocus && input.current) {
+      input.current.focus();
+    }
   }, [autoFocus, input]);
   (0, _react.useEffect)(() => {
-    if (inputRef) inputRef(input);
+    if (inputRef) {
+      inputRef(input);
+    }
   }, [input, inputRef]);
   (0, _react.useEffect)(() => {
-    if (context.inputRef) context.inputRef(input);
+    if (context.inputRef) {
+      context.inputRef(input);
+    }
   }, [context, input]);
   (0, _react.useEffect)(() => {
-    if (disabled && context.onBlur) context.onBlur();
+    if (disabled && context.onBlur) {
+      context.onBlur();
+    }
   }, [disabled, context]);
 
   const handleClick = ev => {
-    if (onClick) onClick(ev);
-    input.current.focus();
+    var _input, _input$current;
+
+    if (onClick) {
+      onClick(ev);
+    }
+
+    (_input = input) === null || _input === void 0 ? void 0 : (_input$current = _input.current) === null || _input$current === void 0 ? void 0 : _input$current.focus();
   };
 
   const handleFocus = ev => {
-    if (onFocus) onFocus(ev);
-    if (context.onFocus) context.onFocus(ev);
-    if (groupContext.onFocus) groupContext.onFocus(ev);
-    if (type === "text") selectTextOnFocus(input);
+    if (onFocus) {
+      onFocus(ev);
+    }
+
+    if (context.onFocus) {
+      context.onFocus();
+    }
+
+    if (groupContext.onFocus) {
+      groupContext.onFocus();
+    }
+
+    if (type === "text") {
+      selectTextOnFocus(input);
+    }
   };
 
   const handleBlur = ev => {
-    if (onBlur) onBlur(ev);
-    if (context.onBlur) context.onBlur(ev);
-    if (groupContext.onBlur) groupContext.onBlur(ev);
+    if (onBlur) {
+      onBlur(ev);
+    }
+
+    if (context.onBlur) {
+      context.onBlur();
+    }
+
+    if (groupContext.onBlur) {
+      groupContext.onBlur();
+    }
   };
 
-  const handleDeferred = ({
-    currentTarget,
-    target
-  }) => {
+  const handleDeferred = ev => {
     if (onChangeDeferred) {
-      clearTimeout(deferredTimeout.current);
+      if (deferredTimeout.current) {
+        clearTimeout(deferredTimeout.current);
+      }
+
       deferredTimeout.current = setTimeout(() => {
-        onChangeDeferred({
-          currentTarget,
-          target
-        });
+        onChangeDeferred(ev);
       }, deferTimeout || 750);
     }
   };
 
   const handleChange = ev => {
-    if (onChange) onChange(ev);
+    if (onChange) {
+      onChange(ev);
+    }
+
     handleDeferred(ev);
   };
 
-  return /*#__PURE__*/_react.default.createElement(_input.default, _extends({}, rest, {
+  return /*#__PURE__*/_react.default.createElement(_input2.default, _extends({}, rest, {
     "aria-labelledby": context.ariaLabelledBy,
     align: align,
     placeholder: placeholder,
@@ -113,46 +169,6 @@ const Input = /*#__PURE__*/_react.default.forwardRef(({
   }));
 });
 
-Input.propTypes = {
-  align: _propTypes.default.oneOf(["right", "left"]),
-  placeholder: _propTypes.default.string,
-  disabled: _propTypes.default.bool,
-  readOnly: _propTypes.default.bool,
-  className: _propTypes.default.string,
-  id: _propTypes.default.string,
-
-  /** A callback to retrieve the input reference */
-  inputRef: _propTypes.default.func,
-  name: _propTypes.default.string,
-  onBlur: _propTypes.default.func,
-  onClick: _propTypes.default.func,
-  onKeyDown: _propTypes.default.func,
-  onFocus: _propTypes.default.func,
-  autoFocus: _propTypes.default.bool,
-  onChange: _propTypes.default.func,
-  onChangeDeferred: _propTypes.default.func,
-  deferTimeout: _propTypes.default.number,
-  type: _propTypes.default.string
-};
-
-function selectTextOnFocus(input) {
-  // setTimeout is required so the dom has a chance to place the cursor in the input
-  setTimeout(() => {
-    if (input.current) {
-      const {
-        length
-      } = input.current.value;
-      const cursorStart = input.current.selectionStart;
-      const cursorEnd = input.current.selectionEnd; // only select text if cursor is at the very end or the very start of the value
-
-      if (cursorStart === 0 && cursorEnd === 0 || cursorStart === length && cursorEnd === length) {
-        if (document.activeElement === input.current) {
-          input.current.setSelectionRange(0, length);
-        }
-      }
-    }
-  });
-}
-
+Input.displayName = "Input";
 var _default = Input;
 exports.default = _default;

package/lib/__internal__/input/input.style.d.ts

@@ -1,2 +1,3 @@
+import { CommonInputProps } from "./input.component";
+declare const StyledInput: import("styled-components").StyledComponent<"input", any, Pick<CommonInputProps, "disabled" | "align" | "readOnly">, never>;
 export default StyledInput;
-declare const StyledInput: import("styled-components").StyledComponent<"input", any, {}, never>;

package/lib/__internal__/input/input.style.js

@@ -7,10 +7,6 @@ exports.default = void 0;
 
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
 
-var _propTypes = _interopRequireDefault(require("prop-types"));
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
 function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function () { return cache; }; return cache; }
 
 function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
@@ -54,8 +50,5 @@ const StyledInput = _styledComponents.default.input`
       color: var(--colorsActionMinorYin090);
     `}
 `;
-StyledInput.propTypes = {
-  disabled: _propTypes.default.bool
-};
 var _default = StyledInput;
 exports.default = _default;

package/lib/__internal__/input-behaviour/index.d.ts

@@ -1,2 +1,3 @@
 export { InputBehaviour, InputContext } from "./input-behaviour.component";
-export { InputGroupBehaviour, InputGroupContext } from "./input-group-behaviour.component";
+export { InputGroupBehaviour, InputGroupContext, } from "./input-group-behaviour.component";
+export type { InputContextProps } from "./useInputBehaviour";

package/lib/__internal__/input-behaviour/input-behaviour.component.d.ts

@@ -1,11 +1,8 @@
-export const InputContext: React.Context<{}>;
-export function InputBehaviour({ children }: {
-    children: any;
-}): JSX.Element;
-export namespace InputBehaviour {
-    namespace propTypes {
-        const children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
-    }
-}
 import React from "react";
-import PropTypes from "prop-types";
+import { InputContextProps } from "./useInputBehaviour";
+declare const InputContext: React.Context<InputContextProps>;
+export interface InputBehaviourProps {
+    children?: React.ReactNode;
+}
+declare const InputBehaviour: ({ children }: InputBehaviourProps) => JSX.Element;
+export { InputContext, InputBehaviour };

package/lib/__internal__/input-behaviour/input-behaviour.component.js

@@ -7,9 +7,7 @@ exports.InputBehaviour = exports.InputContext = void 0;
 
 var _react = _interopRequireWildcard(require("react"));
 
-var _propTypes = _interopRequireDefault(require("prop-types"));
-
-var _inlineInputs = require("../../components/inline-inputs/inline-inputs.component");
+var _inlineInputs = require("../../components/inline-inputs");
 
 var _useInputBehaviour = _interopRequireDefault(require("./useInputBehaviour"));
 
@@ -19,9 +17,7 @@ function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return
 
 function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
-const defaultValue = {};
-
-const InputContext = /*#__PURE__*/_react.default.createContext(defaultValue);
+const InputContext = /*#__PURE__*/_react.default.createContext({});
 
 exports.InputContext = InputContext;
 
@@ -39,7 +35,4 @@ const InputBehaviour = ({
   }, children);
 };
 
-exports.InputBehaviour = InputBehaviour;
-InputBehaviour.propTypes = {
-  children: _propTypes.default.node
-};
+exports.InputBehaviour = InputBehaviour;

package/lib/__internal__/input-behaviour/input-group-behaviour.component.d.ts

@@ -1,13 +1,9 @@
-export const InputGroupContext: React.Context<{}>;
-export function InputGroupBehaviour({ children, blockGroupBehaviour }: {
-    children: any;
-    blockGroupBehaviour: any;
-}): JSX.Element;
-export namespace InputGroupBehaviour {
-    namespace propTypes {
-        const children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
-        const blockGroupBehaviour: PropTypes.Requireable<boolean>;
-    }
-}
 import React from "react";
-import PropTypes from "prop-types";
+import { InputContextProps } from "./useInputBehaviour";
+import { InputBehaviourProps } from "./input-behaviour.component";
+declare const InputGroupContext: React.Context<InputContextProps>;
+export interface InputGroupBehaviourProps extends InputBehaviourProps {
+    blockGroupBehaviour?: boolean;
+}
+declare const InputGroupBehaviour: ({ children, blockGroupBehaviour, }: InputGroupBehaviourProps) => JSX.Element;
+export { InputGroupContext, InputGroupBehaviour };

package/lib/__internal__/input-behaviour/input-group-behaviour.component.js

@@ -7,15 +7,11 @@ exports.InputGroupBehaviour = exports.InputGroupContext = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
-var _propTypes = _interopRequireDefault(require("prop-types"));
-
 var _useInputBehaviour = _interopRequireDefault(require("./useInputBehaviour"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-const defaultValue = {};
-
-const InputGroupContext = /*#__PURE__*/_react.default.createContext(defaultValue);
+const InputGroupContext = /*#__PURE__*/_react.default.createContext({});
 
 exports.InputGroupContext = InputGroupContext;
 
@@ -29,8 +25,4 @@ const InputGroupBehaviour = ({
   }, children);
 };
 
-exports.InputGroupBehaviour = InputGroupBehaviour;
-InputGroupBehaviour.propTypes = {
-  children: _propTypes.default.node,
-  blockGroupBehaviour: _propTypes.default.bool
-};
+exports.InputGroupBehaviour = InputGroupBehaviour;

package/lib/__internal__/input-behaviour/useInputBehaviour.d.ts

@@ -1,11 +1,15 @@
+export interface InputContextProps {
+    hasFocus?: boolean;
+    hasMouseOver?: boolean;
+    onFocus?: () => void;
+    onBlur?: () => void;
+    onMouseDown?: () => void;
+    onMouseEnter?: () => void;
+    onMouseLeave?: () => void;
+    inputRef?: (input: {
+        current: HTMLInputElement | null;
+    }) => void;
+    ariaLabelledBy?: string;
+}
+declare const useInputBehaviour: (blockGroupBehaviour?: boolean | undefined) => InputContextProps;
 export default useInputBehaviour;
-declare function useInputBehaviour(blockGroupBehaviour: any): {
-    hasFocus: boolean;
-    hasMouseOver: boolean;
-    onFocus: (() => void) | undefined;
-    onBlur: (() => void) | undefined;
-    onMouseDown: () => void;
-    onMouseEnter: (() => void) | undefined;
-    onMouseLeave: (() => void) | undefined;
-    inputRef: (input: any) => void;
-};

package/lib/__internal__/label/label.d.ts

@@ -29,7 +29,7 @@ export interface LabelPropTypes extends ValidationPropTypes {
   /** Whether to show the validation icon */
   useValidationIcon?: boolean;
   /** A string that represents the ID of another form element */
-  htmlFor: string;
+  htmlFor?: string;
   /** Padding right, integer multiplied by base spacing constant (8) */
   pr?: 1 | 2;
   /** Padding left, integer multiplied by base spacing constant (8) */

package/lib/components/badge/badge.component.d.ts

@@ -1,14 +1,11 @@
-export default Badge;
-declare function Badge({ children, counter, onClick }: {
-    children: any;
-    counter: any;
-    onClick: any;
-}): JSX.Element;
-declare namespace Badge {
-    namespace propTypes {
-        const children: PropTypes.Validator<string | number | boolean | {} | PropTypes.ReactElementLike | PropTypes.ReactNodeArray>;
-        const counter: PropTypes.Requireable<string | number>;
-        const onClick: PropTypes.Requireable<(...args: any[]) => any>;
-    }
+import React from "react";
+export interface BadgeProps {
+    /** The badge will be added to this element */
+    children: React.ReactNode;
+    /** The number rendered in the badge component */
+    counter?: string | number;
+    /** Callback fired when badge is clicked */
+    onClick?: (ev: React.MouseEvent<HTMLElement>) => void;
 }
-import PropTypes from "prop-types";
+export declare const Badge: ({ children, counter, onClick }: BadgeProps) => JSX.Element;
+export default Badge;

package/lib/components/badge/badge.component.js

@@ -1,44 +1,66 @@
 "use strict";
 
 Object.defineProperty(exports, "__esModule", {
-  value: true
+  value: true,
 });
-exports.default = void 0;
 
-var _react = _interopRequireDefault(require("react"));
+exports.default = exports.Badge = void 0;
 
+var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _badge = require("./badge.style");
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-const Badge = ({
-  children,
-  counter,
-  onClick
-}) => {
-  return /*#__PURE__*/_react.default.createElement(_badge.StyledBadgeWrapper, null, counter > 0 && /*#__PURE__*/_react.default.createElement(_badge.StyledButton, {
-    "data-component": "badge",
-    buttonType: "secondary",
-    onClick: onClick
-  }, /*#__PURE__*/_react.default.createElement(_badge.StyledCrossIcon, {
-    "data-element": "badge-cross-icon",
-    type: "cross"
-  }), /*#__PURE__*/_react.default.createElement(_badge.StyledCounter, {
-    "data-element": "badge-counter"
-  }, counter > 99 ? 99 : counter)), children);
+function _interopRequireDefault(obj) {
+  return obj && obj.__esModule ? obj : { default: obj };
+}
+
+const Badge = ({ children, counter = 0, onClick }) => {
+  return /*#__PURE__*/ _react.default.createElement(
+    _badge.StyledBadgeWrapper,
+    null,
+    counter > 0 &&
+      /*#__PURE__*/ _react.default.createElement(
+        _badge.StyledButton,
+        {
+          "data-component": "badge",
+          buttonType: "secondary",
+          onClick: onClick,
+        },
+        /*#__PURE__*/ _react.default.createElement(_badge.StyledCrossIcon, {
+          "data-element": "badge-cross-icon",
+          type: "cross",
+        }),
+        /*#__PURE__*/ _react.default.createElement(
+          _badge.StyledCounter,
+          {
+            "data-element": "badge-counter",
+          },
+          counter > 99 ? 99 : counter
+        )
+      ),
+    children
+  );
 };
 
 Badge.propTypes = {
-  /** The badge will be added to this element */
-  children: _propTypes.default.node.isRequired,
-
-  /** The number rendered in the badge component */
-  counter: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),
-
-  /** Callback fired when badge is clicked */
-  onClick: _propTypes.default.func
+  /**
+   * The badge will be added to this element
+   */
+  children: _propTypes.default.node,
+  /**
+   * The number rendered in the badge component
+   */
+  counter: _propTypes.default.oneOfType([
+    _propTypes.default.number,
+    _propTypes.default.string,
+  ]),
+  /**
+   * Callback fired when badge is clicked
+   */
+  onClick: _propTypes.default.func,
 };
+
+exports.Badge = Badge;
 var _default = Badge;
-exports.default = _default;
+exports.default = _default;

package/lib/components/badge/badge.style.d.ts

@@ -1,8 +1,10 @@
-export const StyledBadgeWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
-export const StyledButton: import("styled-components").StyledComponent<{
+/// <reference types="react" />
+import Icon from "../icon";
+declare const StyledBadgeWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
+declare const StyledCounter: import("styled-components").StyledComponent<"div", any, {}, never>;
+declare const StyledButton: import("styled-components").StyledComponent<{
     ({ size, subtext, as, children, forwardRef, "aria-label": ariaLabel, disabled, destructive, buttonType: buttonTypeProp, iconType, iconPosition, href, m, px, noWrap, target, rel, iconTooltipMessage, iconTooltipPosition, fullWidth, ...rest }: import("../button").ButtonProps): JSX.Element;
     displayName: string;
 }, any, {}, never>;
-export const StyledCrossIcon: import("styled-components").StyledComponent<typeof Icon, any, {}, never>;
-export const StyledCounter: import("styled-components").StyledComponent<"div", any, {}, never>;
-import Icon from "../icon";
+declare const StyledCrossIcon: import("styled-components").StyledComponent<typeof Icon, any, {}, never>;
+export { StyledBadgeWrapper, StyledButton, StyledCrossIcon, StyledCounter };

package/lib/components/badge/index.d.ts

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

package/lib/components/carbon-provider/carbon-provider.component.d.ts

@@ -1,16 +1,10 @@
-export const NewValidationContext: React.Context<{}>;
-export default CarbonProvider;
 import React from "react";
-declare function CarbonProvider({ children, theme, validationRedesignOptIn, }: {
-    children: any;
-    theme?: import("../../style/themes/base").ThemeObject | undefined;
-    validationRedesignOptIn?: boolean | undefined;
-}): JSX.Element;
-declare namespace CarbonProvider {
-    namespace propTypes {
-        const children: PropTypes.Validator<string | number | boolean | {} | PropTypes.ReactElementLike | PropTypes.ReactNodeArray>;
-        const theme: PropTypes.Requireable<object>;
-        const validationRedesignOptIn: PropTypes.Requireable<boolean>;
-    }
+import { ThemeObject } from "../../style/themes/base";
+export interface CarbonProviderProps {
+    theme?: ThemeObject;
+    children: React.ReactNode;
+    validationRedesignOptIn?: boolean;
 }
-import PropTypes from "prop-types";
+export declare const NewValidationContext: React.Context<Pick<CarbonProviderProps, "validationRedesignOptIn">>;
+export declare const CarbonProvider: ({ children, theme, validationRedesignOptIn, }: CarbonProviderProps) => JSX.Element;
+export default CarbonProvider;