carbon-react 104.8.0 → 104.10.2

package/lib/components/advanced-color-picker/advanced-color-picker.style.d.ts

@@ -2,7 +2,7 @@ export const StyledAdvancedColorPickerWrapper: import("styled-components").Style
 import StyledAdvancedColorPickerCell from "./advanced-color-picker-cell.style";
 export const StyledAdvancedColorPickerPreview: import("styled-components").StyledComponent<"div", any, {}, never>;
 export const DialogStyle: import("styled-components").StyledComponent<{
-    ({ className, children, open, height, size, title, disableEscKey, subtitle, disableAutoFocus, focusFirstElement, onCancel, showCloseIcon, bespokeFocusTrap, disableClose, help, role, ...rest }: {
+    ({ className, children, open, height, size, title, disableEscKey, subtitle, disableAutoFocus, focusFirstElement, onCancel, showCloseIcon, bespokeFocusTrap, disableClose, help, role, contentPadding, ...rest }: {
         [x: string]: any;
         className: any;
         children: any;
@@ -20,6 +20,7 @@ export const DialogStyle: import("styled-components").StyledComponent<{
         disableClose: any;
         help: any;
         role?: string | undefined;
+        contentPadding?: {} | undefined;
     }): JSX.Element;
     propTypes: {
         "aria-describedby": import("prop-types").Requireable<string>;
@@ -43,6 +44,11 @@ export const DialogStyle: import("styled-components").StyledComponent<{
         disableAutoFocus: import("prop-types").Requireable<boolean>;
         bespokeFocusTrap: import("prop-types").Requireable<(...args: any[]) => any>;
         role: import("prop-types").Requireable<string>;
+        contentPadding: import("prop-types").Requireable<import("prop-types").InferProps<{
+            p: import("prop-types").Requireable<number>;
+            px: import("prop-types").Requireable<number>;
+            py: import("prop-types").Requireable<number>;
+        }>>;
     };
     defaultProps: {
         size: string;

package/lib/components/anchor-navigation/anchor-navigation-item/anchor-navigation-item.style.js

@@ -5,14 +5,16 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 
-var _styledComponents = _interopRequireWildcard(require("styled-components"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _themes = require("../../../style/themes");
+var _styledComponents = _interopRequireWildcard(require("styled-components"));
 
 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; }
 
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
 const StyledNavigationItem = _styledComponents.default.li`
   width: 100%;
 
@@ -20,52 +22,32 @@ const StyledNavigationItem = _styledComponents.default.li`
     cursor: pointer;
     display: block;
     text-decoration: none;
-    color: ${({
-  theme
-}) => theme.text.color};
+    color: var(--colorsUtilityYin090);
     background-color: transparent;
-    border-left: 3px solid ${({
-  theme
-}) => theme.disabled.background};
+    border-left: var(--sizing050) solid var(--colorsActionMinor100);
     font-weight: 700;
     padding: 12px 24px;
 
     &:focus {
-      outline: none;
-      position: relative;
-
-      &:before {
-        content: "";
-        position: absolute;
-        top: 0;
-        bottom: 0;
-        left: -3px;
-        right: 0;
-        z-index: 1;
-        box-shadow: 0 0 6px ${({
-  theme
-}) => theme.colors.focus};
-      }
+      outline: var(--borderWidth300) solid var(--colorsSemanticFocus500);
     }
 
     &:hover {
       background-color: ${({
-  isSelected,
-  theme
-}) => !isSelected && theme.anchorNavigation.navItemHoverBackground};
+  isSelected
+}) => !isSelected && "var(--colorsActionMinor100)"};
     }
 
     ${({
-  isSelected,
-  theme
+  isSelected
 }) => isSelected && (0, _styledComponents.css)`
-        background-color: ${theme.colors.white};
-        border-left-color: ${theme.colors.primary};
+        background-color: var(--colorsActionMinorYang100);
+        border-left-color: var(--colorsActionMajor500);
       `}
   }
 `;
-StyledNavigationItem.defaultProps = {
-  theme: _themes.baseTheme
+StyledNavigationItem.propTypes = {
+  isSelected: _propTypes.default.bool
 };
 var _default = StyledNavigationItem;
 exports.default = _default;

package/lib/components/anchor-navigation/anchor-navigation.style.js

@@ -7,8 +7,6 @@ exports.StyledContent = exports.StyledNavigation = exports.StyledAnchorNavigatio
 
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 
-var _themes = require("../../style/themes");
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 const StyledAnchorNavigation = _styledComponents.default.div`
@@ -20,9 +18,6 @@ exports.StyledAnchorNavigation = StyledAnchorNavigation;
 const StyledNavigation = _styledComponents.default.ul`
   position: sticky;
   top: 32px;
-  box-shadow: inset 3px 0px 0px 0px ${({
-  theme
-}) => theme.disabled.background};
   list-style: none;
   margin: 0;
   padding: 0;
@@ -33,13 +28,4 @@ const StyledContent = _styledComponents.default.div`
   flex: 1;
   margin-left: 32px;
 `;
-exports.StyledContent = StyledContent;
-StyledAnchorNavigation.defaultProps = {
-  theme: _themes.baseTheme
-};
-StyledNavigation.defaultProps = {
-  theme: _themes.baseTheme
-};
-StyledContent.defaultProps = {
-  theme: _themes.baseTheme
-};
+exports.StyledContent = StyledContent;

package/lib/components/anchor-navigation/anchor-section-divider/anchor-section-divider.style.js

@@ -7,20 +7,13 @@ exports.default = void 0;
 
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 
-var _themes = require("../../../style/themes");
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 const StyledAnchorDivider = _styledComponents.default.div.attrs({
   "data-element": "anchor-navigation-divider"
 })`
-  background-color: ${({
-  theme
-}) => theme.anchorNavigation.divider};
+  background-color: var(--colorsActionMinor200);
   height: 1px;
 `;
-StyledAnchorDivider.defaultProps = {
-  theme: _themes.baseTheme
-};
 var _default = StyledAnchorDivider;
 exports.default = _default;

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

@@ -1,5 +1,5 @@
 export default Dialog;
-declare function Dialog({ className, children, open, height, size, title, disableEscKey, subtitle, disableAutoFocus, focusFirstElement, onCancel, showCloseIcon, bespokeFocusTrap, disableClose, help, role, ...rest }: {
+declare function Dialog({ className, children, open, height, size, title, disableEscKey, subtitle, disableAutoFocus, focusFirstElement, onCancel, showCloseIcon, bespokeFocusTrap, disableClose, help, role, contentPadding, ...rest }: {
     [x: string]: any;
     className: any;
     children: any;
@@ -17,6 +17,7 @@ declare function Dialog({ className, children, open, height, size, title, disabl
     disableClose: any;
     help: any;
     role?: string | undefined;
+    contentPadding?: {} | undefined;
 }): JSX.Element;
 declare namespace Dialog {
     const propTypes: {
@@ -28,7 +29,7 @@ declare namespace Dialog {
          */
         "aria-label": PropTypes.Requireable<string>;
         /**
-         * Prop to specify the aria-labeledby property of the Dialog component
+         * Prop to specify the aria-labelledby property of the Dialog component
          * To be used when the title prop is a custom React Node,
          * or the component is labelled by an internal element other than the title.
          */
@@ -71,6 +72,12 @@ declare namespace Dialog {
         bespokeFocusTrap: PropTypes.Requireable<(...args: any[]) => any>;
         /** The ARIA role to be applied to the Dialog container */
         role: PropTypes.Requireable<string>;
+        /** Padding to be set on the Dialog content */
+        contentPadding: PropTypes.Requireable<PropTypes.InferProps<{
+            p: PropTypes.Requireable<number>;
+            px: PropTypes.Requireable<number>;
+            py: PropTypes.Requireable<number>;
+        }>>;
     };
     namespace defaultProps {
         const size: string;

package/lib/components/dialog/dialog.component.js

@@ -56,6 +56,7 @@ const Dialog = ({
   disableClose,
   help,
   role = "dialog",
+  contentPadding = {},
   ...rest
 }) => {
   const locale = (0, _useLocale.default)();
@@ -190,9 +191,9 @@ const Dialog = ({
     "data-element": "dialog",
     "data-role": rest["data-role"],
     role: role
-  }), dialogTitle(), /*#__PURE__*/_react.default.createElement(_dialog.DialogContentStyle, null, /*#__PURE__*/_react.default.createElement(_dialog.DialogInnerContentStyle, {
+  }, contentPadding), dialogTitle(), /*#__PURE__*/_react.default.createElement(_dialog.DialogContentStyle, contentPadding, /*#__PURE__*/_react.default.createElement(_dialog.DialogInnerContentStyle, _extends({
     ref: innerContentRef
-  }, _react.default.Children.map(children, child => {
+  }, contentPadding), _react.default.Children.map(children, child => {
     if ((child === null || child === void 0 ? void 0 : child.type) === _form.default) {
       return /*#__PURE__*/_react.default.cloneElement(child, {
         dialogRef
@@ -214,7 +215,7 @@ Dialog.propTypes = {
   "aria-label": _propTypes.default.string,
 
   /**
-   * Prop to specify the aria-labeledby property of the Dialog component
+   * Prop to specify the aria-labelledby property of the Dialog component
    * To be used when the title prop is a custom React Node,
    * or the component is labelled by an internal element other than the title.
    */
@@ -272,7 +273,14 @@ Dialog.propTypes = {
   bespokeFocusTrap: _propTypes.default.func,
 
   /** The ARIA role to be applied to the Dialog container */
-  role: _propTypes.default.string
+  role: _propTypes.default.string,
+
+  /** Padding to be set on the Dialog content */
+  contentPadding: _propTypes.default.shape({
+    p: _propTypes.default.oneOf([0, 1, 2, 3, 4, 5, 6, 7, 8]),
+    px: _propTypes.default.oneOf([0, 1, 2, 3, 4, 5, 6, 7, 8]),
+    py: _propTypes.default.oneOf([0, 1, 2, 3, 4, 5, 6, 7, 8])
+  })
 };
 Dialog.defaultProps = {
   size: "medium",

package/lib/components/dialog/dialog.config.d.ts

@@ -1,2 +1,5 @@
 export const DIALOG_SIZES: string[];
 export const TOP_MARGIN: 20;
+export const CONTENT_TOP_PADDING: 24;
+export const HORIZONTAL_PADDING: 32;
+export const CONTENT_BOTTOM_PADDING: 30;

package/lib/components/dialog/dialog.config.js

@@ -3,8 +3,14 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.TOP_MARGIN = exports.DIALOG_SIZES = void 0;
+exports.CONTENT_BOTTOM_PADDING = exports.HORIZONTAL_PADDING = exports.CONTENT_TOP_PADDING = exports.TOP_MARGIN = exports.DIALOG_SIZES = void 0;
 const DIALOG_SIZES = ["extra-small", "small", "medium-small", "medium", "medium-large", "large", "extra-large"];
 exports.DIALOG_SIZES = DIALOG_SIZES;
 const TOP_MARGIN = 20;
-exports.TOP_MARGIN = TOP_MARGIN;
+exports.TOP_MARGIN = TOP_MARGIN;
+const CONTENT_TOP_PADDING = 24;
+exports.CONTENT_TOP_PADDING = CONTENT_TOP_PADDING;
+const HORIZONTAL_PADDING = 32;
+exports.HORIZONTAL_PADDING = HORIZONTAL_PADDING;
+const CONTENT_BOTTOM_PADDING = 30;
+exports.CONTENT_BOTTOM_PADDING = CONTENT_BOTTOM_PADDING;

package/lib/components/dialog/dialog.d.ts

@@ -1,6 +1,14 @@
 import * as React from "react";
 import { ModalProps } from "../modal/modal";
 
+type PaddingValues = 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8;
+
+interface ContentPaddingInterface {
+  p?: PaddingValues;
+  py?: PaddingValues;
+  px?: PaddingValues;
+}
+
 export type DialogSizes =
   | "auto"
   | "extra-small"
@@ -20,7 +28,7 @@ export interface DialogProps extends ModalProps {
    */
   "aria-label"?: string;
   /**
-   * Prop to specify the aria-labeledby property of the Dialog component
+   * Prop to specify the aria-labelledby property of the Dialog component
    * To be used when the title prop is a custom React Node,
    * or the component is labelled by an internal element other than the title.
    */
@@ -49,6 +57,8 @@ export interface DialogProps extends ModalProps {
   title?: React.ReactNode;
   /** The ARIA role to be applied to the Dialog container */
   role?: string;
+  /** Padding to be set on the Dialog content */
+  contentPadding?: ContentPaddingInterface;
 }
 
 declare function Dialog(props: DialogProps): JSX.Element;

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

@@ -1,4 +1,7 @@
 export const DialogStyle: import("styled-components").StyledComponent<"div", any, {}, never>;
 export const DialogTitleStyle: import("styled-components").StyledComponent<"div", any, {}, never>;
 export const DialogContentStyle: import("styled-components").StyledComponent<"div", any, {}, never>;
-export const DialogInnerContentStyle: import("styled-components").StyledComponent<"div", any, {}, never>;
+export const DialogInnerContentStyle: import("styled-components").StyledComponent<"div", any, {
+    py: any;
+    p: any;
+}, never>;

package/lib/components/dialog/dialog.style.js

@@ -7,12 +7,18 @@ exports.DialogInnerContentStyle = exports.DialogContentStyle = exports.DialogTit
 
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
 
+var _styledSystem = require("styled-system");
+
+var _base = _interopRequireDefault(require("../../style/themes/base"));
+
 var _form = require("../form/form.style");
 
 var _heading = require("../heading/heading.style");
 
 var _iconButton = _interopRequireDefault(require("../icon-button/icon-button.style"));
 
+var _dialog = require("./dialog.config");
+
 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; }
@@ -29,8 +35,51 @@ const dialogSizes = {
   large: "960px",
   "extra-large": "1080px"
 };
-const HORIZONTAL_PADDING = 35;
-const CONTENT_BOTTOM_PADDING = 30;
+
+const calculateWidthValue = props => {
+  const {
+    paddingLeft,
+    paddingRight,
+    padding
+  } = (0, _styledSystem.padding)(props);
+  const paddingValue = paddingLeft ?? paddingRight ?? padding;
+  return paddingValue === undefined ? _dialog.HORIZONTAL_PADDING * 2 : paddingValue * 2;
+};
+
+const calculateFormSpacingValues = (props, isFormContent) => {
+  const {
+    paddingTop,
+    paddingBottom,
+    paddingLeft,
+    paddingRight,
+    padding
+  } = (0, _styledSystem.padding)(props);
+  const spacingTopValue = paddingTop ?? padding ?? _dialog.CONTENT_TOP_PADDING;
+  const spacingRightValue = paddingRight ?? padding ?? _dialog.HORIZONTAL_PADDING;
+  const spacingBottomValue = paddingBottom ?? padding ?? _dialog.CONTENT_BOTTOM_PADDING;
+  const spacingLeftValue = paddingLeft ?? padding ?? _dialog.HORIZONTAL_PADDING;
+  return {
+    "margin-left": spacingLeftValue ? `-${spacingLeftValue}px` : spacingLeftValue,
+    "margin-right": spacingRightValue ? `-${spacingRightValue}px` : spacingRightValue,
+    ...(isFormContent && {
+      "margin-top": spacingTopValue ? `-${spacingTopValue}px` : spacingTopValue,
+      "padding-top": spacingTopValue,
+      "padding-bottom": spacingBottomValue,
+      "padding-left": spacingLeftValue,
+      "padding-right": spacingRightValue
+    }),
+    ...(!isFormContent && {
+      "margin-bottom": spacingBottomValue ? `-${spacingBottomValue}px` : spacingBottomValue,
+      bottom: spacingBottomValue ? `-${spacingBottomValue}px` : spacingBottomValue
+    })
+  };
+};
+
+const calculatePaddingTopInnerContent = ({
+  py,
+  p
+}) => [py, p].some(padding => padding !== undefined) ? 0 : `${_dialog.CONTENT_TOP_PADDING}px`;
+
 const DialogStyle = _styledComponents.default.div`
   background-color: var(--colorsUtilityMajor025);
   box-shadow: var(--boxShadow300);
@@ -62,7 +111,7 @@ const DialogStyle = _styledComponents.default.div`
   dialogHeight
 }) => dialogHeight && (0, _styledComponents.css)`
       height: ${dialogHeight}px;
-    `};
+    `}
 
   ${_form.StyledForm} {
     padding-bottom: 0px;
@@ -70,21 +119,12 @@ const DialogStyle = _styledComponents.default.div`
   }
 
   ${_form.StyledFormContent}.sticky {
-    padding-right: ${HORIZONTAL_PADDING}px;
-    padding-left: ${HORIZONTAL_PADDING}px;
-    padding-top: 20px;
-    margin-right: -${HORIZONTAL_PADDING}px;
-    margin-left: -${HORIZONTAL_PADDING}px;
-    margin-top: -20px;
+    ${props => calculateFormSpacingValues(props, true)}
   }
 
   ${_form.StyledFormFooter}.sticky {
-    margin-left: -${HORIZONTAL_PADDING}px;
-    bottom: -${CONTENT_BOTTOM_PADDING}px;
-    margin-bottom: -${CONTENT_BOTTOM_PADDING}px;
-    width: calc(100% + ${2 * HORIZONTAL_PADDING}px);
-    padding-left: ${HORIZONTAL_PADDING}px;
-    padding-right: ${HORIZONTAL_PADDING}px;
+    width: calc(100% + ${calculateWidthValue}px);
+    ${props => calculateFormSpacingValues(props, false)}
   }
 
   > ${_iconButton.default} {
@@ -101,7 +141,7 @@ const DialogStyle = _styledComponents.default.div`
 `;
 exports.DialogStyle = DialogStyle;
 const DialogTitleStyle = _styledComponents.default.div`
-  padding: 23px ${HORIZONTAL_PADDING}px 0;
+  padding: 23px ${_dialog.HORIZONTAL_PADDING}px 0;
   border-bottom: 1px solid #ccd6db;
   ${({
   showCloseIcon
@@ -133,12 +173,19 @@ const DialogContentStyle = _styledComponents.default.div`
   overflow-y: auto;
   width: 100%;
   flex: 1;
-  padding: 0px ${HORIZONTAL_PADDING}px ${CONTENT_BOTTOM_PADDING}px;
+  padding: 0px ${_dialog.HORIZONTAL_PADDING}px ${_dialog.CONTENT_BOTTOM_PADDING}px;
+  ${_styledSystem.padding}
 `;
 exports.DialogContentStyle = DialogContentStyle;
 const DialogInnerContentStyle = _styledComponents.default.div`
-  padding-top: 20px;
   position: relative;
   flex: 1;
+  padding-top: ${calculatePaddingTopInnerContent};
 `;
-exports.DialogInnerContentStyle = DialogInnerContentStyle;
+exports.DialogInnerContentStyle = DialogInnerContentStyle;
+DialogStyle.defaultProps = {
+  theme: _base.default
+};
+DialogContentStyle.defaultProps = {
+  theme: _base.default
+};

package/lib/components/icon/icon.component.js

@@ -121,7 +121,7 @@ const Icon = /*#__PURE__*/_react.default.forwardRef(({
 
   if (tooltipMessage) {
     const showTooltip = tooltipVisibleFromContext !== undefined ? tooltipVisibleFromContext : tooltipVisible;
-    const visible = disabled ? false : showTooltip;
+    const visible = disabled ? undefined : showTooltip;
     return /*#__PURE__*/_react.default.createElement(_tooltip.default, {
       message: tooltipMessage,
       position: tooltipPositionFromContext || tooltipPosition,

package/lib/components/pager/pager.style.js

@@ -15,6 +15,8 @@ var _inputIconToggle = _interopRequireDefault(require("../../__internal__/input-
 
 var _base = _interopRequireDefault(require("../../style/themes/base"));
 
+var _selectText = _interopRequireDefault(require("../select/__internal__/select-text/select-text.style"));
+
 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; }
@@ -108,7 +110,7 @@ const StyledPagerSizeOptions = _styledComponents.default.div`
     min-width: 10px;
     margin: 0px 4px;
 
-    ${_input.default} {
+    ${_selectText.default} {
       font-size: 14px;
       padding-right: 0px;
       padding-left: 8px;

package/lib/components/select/__internal__/select-list-context.d.ts

@@ -0,0 +1,3 @@
+export default SelectListContext;
+declare const SelectListContext: React.Context<{}>;
+import React from "react";

package/lib/components/select/__internal__/select-list-context.js

@@ -0,0 +1,15 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+const SelectListContext = /*#__PURE__*/_react.default.createContext({});
+
+var _default = SelectListContext;
+exports.default = _default;

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

@@ -0,0 +1,30 @@
+export default SelectText;
+declare function SelectText({ disabled, formattedValue, onClick, onKeyDown, onFocus, onBlur, onMouseDown, placeholder, readOnly, textId, transparent, }: {
+    disabled: any;
+    formattedValue: any;
+    onClick: any;
+    onKeyDown: any;
+    onFocus: any;
+    onBlur: any;
+    onMouseDown: any;
+    placeholder: any;
+    readOnly: any;
+    textId: any;
+    transparent: any;
+}): JSX.Element;
+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>;
+        const readOnly: PropTypes.Requireable<boolean>;
+        const transparent: PropTypes.Requireable<boolean>;
+        const textId: PropTypes.Requireable<string>;
+    }
+}
+import PropTypes from "prop-types";

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

@@ -0,0 +1,111 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _selectText = _interopRequireDefault(require("./select-text.style"));
+
+var _useLocale = _interopRequireDefault(require("../../../../hooks/__internal__/useLocale"));
+
+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 l = (0, _useLocale.default)();
+  const inputContext = (0, _react.useContext)(_inputBehaviour.InputContext);
+  const hasPlaceholder = !disabled && !readOnly && !formattedValue;
+  const placeholderText = hasPlaceholder ? placeholder || l.select.placeholder() : "";
+
+  function handleFocus(event) {
+    inputContext.onFocus(event);
+
+    if (onFocus) {
+      onFocus(event);
+    }
+  }
+
+  function handleBlur(event) {
+    inputContext.onBlur(event);
+
+    if (onBlur) {
+      onBlur(event);
+    }
+  }
+
+  return /*#__PURE__*/_react.default.createElement(_selectText.default, {
+    "aria-hidden": true,
+    "data-element": "select-text",
+    disabled: disabled,
+    hasPlaceholder: hasPlaceholder,
+    id: textId,
+    onBlur: handleBlur,
+    onClick: onClick,
+    onFocus: handleFocus,
+    onKeyDown: onKeyDown,
+    onMouseDown: onMouseDown,
+    readOnly: readOnly,
+    role: "button",
+    tabIndex: "-1",
+    transparent: transparent
+  }, formattedValue || placeholderText);
+};
+
+SelectText.propTypes = {
+  /** If true the Component will be disabled */
+  disabled: _propTypes.default.bool,
+
+  /** 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,
+
+  /** Callback function for when the left mouse key is pressed when focused on Select Text. */
+  onMouseDown: _propTypes.default.func,
+
+  /** Placeholder string to be displayed when formattedValue is empty */
+  placeholder: _propTypes.default.string,
+
+  /** If true the Component will be read-only */
+  readOnly: _propTypes.default.bool,
+
+  /** If true the component has no border and a transparent background */
+  transparent: _propTypes.default.bool,
+
+  /** Id of the Select Text element */
+  textId: _propTypes.default.string
+};
+var _default = SelectText;
+exports.default = _default;