carbon-react 104.58.8 → 105.0.2

package/esm/components/vertical-divider/vertical-divider.style.d.ts

@@ -1,2 +1,4 @@
-export const StyledVerticalWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
-export const StyledDivider: import("styled-components").StyledComponent<"div", any, {}, never>;
+import { VerticalDividerPropTypes } from "./vertical-divider.component";
+declare const StyledVerticalWrapper: import("styled-components").StyledComponent<"div", any, VerticalDividerPropTypes, never>;
+declare const StyledDivider: import("styled-components").StyledComponent<"div", any, Pick<VerticalDividerPropTypes, "tint">, never>;
+export { StyledVerticalWrapper, StyledDivider };

package/esm/components/vertical-divider/vertical-divider.style.js

@@ -6,7 +6,7 @@ const StyledVerticalWrapper = styled.div`
   ${({
   height
 }) => height && css`
-      height: ${typeof height === "string" ? `${height};` : `${height}px;`};
+      height: ${typeof height === "string" ? `${height}` : `${height}px`};
     `}
   ${({
   displayInline

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

@@ -16,7 +16,7 @@ declare namespace Popover {
         const modifiers: PropTypes.Requireable<any[]>;
         const onFirstUpdate: PropTypes.Requireable<(...args: any[]) => any>;
         const disablePortal: PropTypes.Requireable<boolean>;
-        const reference: PropTypes.Requireable<PropTypes.InferProps<{
+        const reference: PropTypes.Validator<PropTypes.InferProps<{
             current: PropTypes.Requireable<any>;
         }>>;
     }

package/lib/__internal__/popover/popover.component.js

@@ -19,6 +19,8 @@ var _popover = _interopRequireDefault(require("./popover.style"));
 
 var _carbonScopedTokensProvider = _interopRequireDefault(require("../../style/design-tokens/carbon-scoped-tokens-provider/carbon-scoped-tokens-provider.component"));
 
+var _modal = require("../../components/modal/modal.component");
+
 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; }
@@ -35,10 +37,18 @@ const Popover = ({
   disableBackgroundUI
 }) => {
   const elementDOM = (0, _react.useRef)();
+  const {
+    isInModal
+  } = (0, _react.useContext)(_modal.ModalContext);
+  let mountNode = document.body;
+
+  if (isInModal && reference.current) {
+    mountNode = reference.current.closest("[role='dialog']");
+  }
 
   if (!elementDOM.current && !disablePortal) {
     elementDOM.current = document.createElement("div");
-    document.body.appendChild(elementDOM.current);
+    mountNode.appendChild(elementDOM.current);
   }
 
   const popperInstance = (0, _react.useRef)();
@@ -88,10 +98,11 @@ const Popover = ({
   (0, _react.useEffect)(() => {
     return () => {
       if (!disablePortal) {
-        document.body.removeChild(elementDOM.current);
+        mountNode.removeChild(elementDOM.current);
+        elementDOM.current = null;
       }
     };
-  }, [disablePortal]);
+  }, [disablePortal, mountNode]);
 
   if (disableBackgroundUI) {
     content = /*#__PURE__*/_react.default.createElement(_popover.default, null, content);
@@ -122,7 +133,7 @@ Popover.propTypes = {
   // Reference element, children will be positioned in relation to this element - should be a ref
   reference: _propTypes.default.shape({
     current: _propTypes.default.any
-  })
+  }).isRequired
 };
 var _default = Popover;
 exports.default = _default;

package/lib/components/menu/menu-full-screen/menu-full-screen.component.js

@@ -122,7 +122,8 @@ const MenuFullscreen = ({
   }, _react.default.Children.map(children, (child, index) => /*#__PURE__*/_react.default.createElement(_menu2.default.Provider, {
     value: {
       inFullscreenView: true,
-      menuType
+      menuType,
+      inMenu: true
     }
   }, child, index < _react.default.Children.count(children) - 1 && /*#__PURE__*/_react.default.createElement(_menuDivider.default, null)))))))));
 };

package/lib/components/menu/menu.component.js

@@ -68,7 +68,8 @@ const Menu = ({
       value: {
         menuType,
         handleKeyDown: ev => handleKeyDown(ev, index),
-        isFocused
+        isFocused,
+        inMenu: true
       }
     }, child);
   }));

package/lib/components/menu/menu.context.d.ts

@@ -1,5 +1,6 @@
 declare var _default: React.Context<{
     menuType: string;
+    inMenu: boolean;
 }>;
 export default _default;
 import React from "react";

package/lib/components/menu/menu.context.js

@@ -10,7 +10,8 @@ var _react = _interopRequireDefault(require("react"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 var _default = /*#__PURE__*/_react.default.createContext({
-  menuType: "light"
+  menuType: "light",
+  inMenu: false
 });
 
 exports.default = _default;

package/lib/components/menu/menu.d.ts

@@ -8,6 +8,7 @@ interface MenuContextProps {
   handleKeyDown: (ev, submenuOpen) => void;
   isFocused: boolean;
   openSubmenu: boolean;
+  inMenu: boolean;
 }
 
 export interface MenuProps extends LayoutProps, FlexBoxProps {

package/lib/components/modal/modal.component.js

@@ -165,7 +165,8 @@ const Modal = ({
   }, /*#__PURE__*/_react.default.createElement(ModalContext.Provider, {
     value: {
       isAnimationComplete,
-      triggerRefocusFlag
+      triggerRefocusFlag,
+      isInModal: true
     }
   }, content)))));
 };

package/lib/components/select/__internal__/select-text/select-text.component.d.ts

@@ -1,11 +1,9 @@
 export default SelectText;
-declare function SelectText({ disabled, formattedValue, onClick, onKeyDown, onFocus, onBlur, onMouseDown, placeholder, readOnly, textId, transparent, }: {
+declare function SelectText({ disabled, formattedValue, onClick, onKeyDown, onMouseDown, placeholder, readOnly, textId, transparent, }: {
     disabled: any;
     formattedValue?: string | undefined;
     onClick: any;
     onKeyDown: any;
-    onFocus: any;
-    onBlur: any;
     onMouseDown: any;
     placeholder: any;
     readOnly: any;
@@ -16,9 +14,7 @@ declare namespace SelectText {
     namespace propTypes {
         const disabled: PropTypes.Requireable<boolean>;
         const formattedValue: PropTypes.Requireable<string>;
-        const onBlur: PropTypes.Requireable<(...args: any[]) => any>;
         const onClick: PropTypes.Requireable<(...args: any[]) => any>;
-        const onFocus: PropTypes.Requireable<(...args: any[]) => any>;
         const onKeyDown: PropTypes.Requireable<(...args: any[]) => any>;
         const onMouseDown: PropTypes.Requireable<(...args: any[]) => any>;
         const placeholder: PropTypes.Requireable<string>;

package/lib/components/select/__internal__/select-text/select-text.component.js

@@ -5,50 +5,29 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 
-var _react = _interopRequireWildcard(require("react"));
+var _react = _interopRequireDefault(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _selectText = _interopRequireDefault(require("./select-text.style"));
 
-var _inputBehaviour = require("../../../../__internal__/input-behaviour");
-
 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; }
-
 const SelectText = ({
   disabled,
   formattedValue = "",
   onClick,
   onKeyDown,
-  onFocus,
-  onBlur,
   onMouseDown,
   placeholder,
   readOnly,
   textId,
   transparent
 }) => {
-  const inputContext = (0, _react.useContext)(_inputBehaviour.InputContext);
   const hasPlaceholder = !disabled && !readOnly && !formattedValue;
 
-  function handleFocus(event) {
-    inputContext.onFocus(event);
-
-    if (onFocus) {
-      onFocus(event);
-    }
-  }
-
-  function handleBlur(event) {
-    inputContext.onBlur(event);
-
-    if (onBlur) {
-      onBlur(event);
-    }
+  function handleClick(event) {
+    onClick(event);
   }
 
   return /*#__PURE__*/_react.default.createElement(_selectText.default, {
@@ -57,9 +36,7 @@ const SelectText = ({
     disabled: disabled,
     hasPlaceholder: hasPlaceholder,
     id: textId,
-    onBlur: handleBlur,
-    onClick: onClick,
-    onFocus: handleFocus,
+    onClick: handleClick,
     onKeyDown: onKeyDown,
     onMouseDown: onMouseDown,
     readOnly: readOnly,
@@ -76,15 +53,9 @@ SelectText.propTypes = {
   /** Value to be displayed */
   formattedValue: _propTypes.default.string,
 
-  /** Callback function for when the Select Textbox loses it's focus. */
-  onBlur: _propTypes.default.func,
-
   /** Callback function for when the component is clicked. */
   onClick: _propTypes.default.func,
 
-  /** Callback function for when the Select Textbox is focused. */
-  onFocus: _propTypes.default.func,
-
   /** Callback function for when the key is pressed when focused on Select Text. */
   onKeyDown: _propTypes.default.func,
 

package/lib/components/select/select-textbox/select-textbox.component.js

@@ -171,8 +171,11 @@ const SelectTextbox = ({
       textId: textId.current,
       transparent: transparent,
       onKeyDown: handleSelectTextKeydown,
-      placeholder: placeholder || l.select.placeholder()
-    }, getTextboxProps()));
+      placeholder: placeholder || l.select.placeholder(),
+      onClick: handleTextboxClick,
+      disabled: disabled,
+      readOnly: readOnly
+    }, restProps));
   }
 
   function handleSelectTextKeydown(event) {

package/lib/components/vertical-divider/index.d.ts

@@ -1,2 +1 @@
-export { default } from "./vertical-divider";
-export * from "./vertical-divider";
+export { default } from "./vertical-divider.component";

package/lib/components/vertical-divider/vertical-divider.component.d.ts

@@ -1,10 +1,12 @@
-export default VerticalDivider;
-declare function VerticalDivider({ h, displayInline, tint, ...props }: {
-    [x: string]: any;
-    h: any;
-    displayInline?: boolean | undefined;
-    tint?: number | undefined;
-}): JSX.Element;
-declare namespace VerticalDivider {
-    const propTypes: any;
+/// <reference types="react" />
+import { SpaceProps } from "styled-system";
+declare type TintRange = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | 61 | 62 | 63 | 64 | 65 | 66 | 67 | 68 | 69 | 70 | 71 | 72 | 73 | 74 | 75 | 76 | 77 | 78 | 79 | 80 | 81 | 82 | 83 | 84 | 85 | 86 | 87 | 88 | 89 | 90 | 91 | 92 | 93 | 94 | 95 | 96 | 97 | 98 | 99 | 100;
+export interface VerticalDividerPropTypes extends SpaceProps {
+    h?: number | string;
+    height?: number | string;
+    displayInline?: boolean;
+    /** the supported rage is 1-100  */
+    tint?: TintRange;
 }
+declare const VerticalDivider: ({ h, height, displayInline, tint, ...props }: VerticalDividerPropTypes) => JSX.Element;
+export default VerticalDivider;