carbon-react 134.1.0 → 134.1.2

package/esm/__internal__/input/input.component.js

@@ -3,6 +3,7 @@ import React, { useEffect, useContext, useRef, useCallback } from "react";
 import PropTypes from "prop-types";
 import StyledInput from "./input.style";
 import { InputContext, InputGroupContext } from "../input-behaviour";
+import { SelectTextboxContext } from "../../components/select/select-textbox/select-textbox-context";
 function selectTextOnFocus(input) {
   // setTimeout is required so the dom has a chance to place the cursor in the input
   setTimeout(() => {
@@ -48,6 +49,9 @@ const Input = /*#__PURE__*/React.forwardRef(({
 }, ref) => {
   const context = useContext(InputContext);
   const groupContext = useContext(InputGroupContext);
+  const {
+    isInputInSelect
+  } = useContext(SelectTextboxContext);
   const deferredTimeout = useRef(null);
   let input = useRef(null);
   if (ref && "current" in ref) {
@@ -129,6 +133,7 @@ const Input = /*#__PURE__*/React.forwardRef(({
   }
   const combinedDescription = descriptionList.length ? descriptionList.filter(Boolean).join(" ") : undefined;
   return /*#__PURE__*/React.createElement(StyledInput, _extends({}, rest, {
+    isInputInSelect: isInputInSelect,
     "data-has-autofocus": autoFocus ? true : undefined,
     "aria-describedby": combinedDescription,
     "aria-labelledby": ariaLabelledBy,

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

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

package/esm/__internal__/input/input.style.js

@@ -1,5 +1,8 @@
 import styled, { css } from "styled-components";
 const StyledInput = styled.input`
+  ${({
+  isInputInSelect
+}) => isInputInSelect && "text-overflow: ellipsis"};
   background: transparent;
   border: none;
   color: var(--colorsUtilityYin090);

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

@@ -1,7 +1,8 @@
 import { SpaceProps } from "styled-system";
 import { ButtonProps } from "./button.component";
-declare const StyledButton: import("styled-components").StyledComponent<"button", any, SpaceProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, string | number | symbol> & ButtonProps & {
+declare const StyledButton: import("styled-components").StyledComponent<"button", any, SpaceProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, string | number | symbol> & Omit<ButtonProps, "buttonType"> & {
     iconOnly?: boolean | undefined;
+    buttonType: Required<ButtonProps>["buttonType"];
 }, never>;
 export declare const StyledButtonSubtext: import("styled-components").StyledComponent<"span", any, {}, never>;
 export declare const StyledButtonMainText: import("styled-components").StyledComponent<"span", any, {}, never>;

package/esm/components/button/button.style.js

@@ -28,7 +28,7 @@ function stylingForIconOnly(size) {
 function stylingForType({
   iconOnly,
   disabled,
-  buttonType = "secondary",
+  buttonType,
   size,
   destructive
 }) {

package/esm/components/pager/pager.style.js

@@ -3,7 +3,7 @@ import StyledInput from "../../__internal__/input/input.style";
 import StyledInputPresentation from "../../__internal__/input/input-presentation.style";
 import StyledFormField from "../../__internal__/form-field/form-field.style";
 import InputIconToggleStyle from "../../__internal__/input-icon-toggle/input-icon-toggle.style";
-import StyledSelectText from "../select/__internal__/select-text/select-text.style";
+import { StyledSelectText } from "../select/__internal__/select-text/select-text.style";
 import Link from "../link";
 const StyledSelectContainer = styled.div`
   height: 26px;

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

@@ -1,6 +1,6 @@
 import React from "react";
 import PropTypes from "prop-types";
-import StyledSelectText from "./select-text.style";
+import { StyledSelectText, StyledSelectTextChildrenWrapper } from "./select-text.style";
 const SelectText = ({
   disabled,
   formattedValue = "",
@@ -22,6 +22,6 @@ const SelectText = ({
     readOnly: readOnly,
     transparent: transparent,
     size: size
-  }, hasPlaceholder ? placeholder : formattedValue);
+  }, /*#__PURE__*/React.createElement(StyledSelectTextChildrenWrapper, null, hasPlaceholder ? placeholder : formattedValue));
 };
 export default SelectText;

package/esm/components/select/__internal__/select-text/select-text.style.d.ts

@@ -4,4 +4,5 @@ interface StyledSelectTextProps extends Pick<SelectTextProps, "disabled" | "read
     size: NonNullable<SelectTextProps["size"]>;
 }
 declare const StyledSelectText: import("styled-components").StyledComponent<"span", any, StyledSelectTextProps, never>;
-export default StyledSelectText;
+declare const StyledSelectTextChildrenWrapper: import("styled-components").StyledComponent<"span", any, {}, never>;
+export { StyledSelectText, StyledSelectTextChildrenWrapper };

package/esm/components/select/__internal__/select-text/select-text.style.js

@@ -13,10 +13,7 @@ const StyledSelectText = styled.span`
     flex-grow: 1;
     font-size: 14px;
     height: auto;
-    overflow: hidden;
     outline: none;
-    text-overflow: ellipsis;
-    white-space: nowrap;
     width: 30px;
     z-index: 1;
     padding-left: ${sizes[size].horizontalPadding};
@@ -46,4 +43,10 @@ const StyledSelectText = styled.span`
     `}
   `}
 `;
-export default StyledSelectText;
+const StyledSelectTextChildrenWrapper = styled.span`
+  display: block;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+`;
+export { StyledSelectText, StyledSelectTextChildrenWrapper };

package/esm/components/select/select-textbox/select-textbox-context.d.ts

@@ -0,0 +1,5 @@
+import React from "react";
+export declare type SelectTextboxContextProps = {
+    isInputInSelect?: boolean;
+};
+export declare const SelectTextboxContext: React.Context<SelectTextboxContextProps>;

package/esm/components/select/select-textbox/select-textbox-context.js

@@ -0,0 +1,2 @@
+import React from "react";
+export const SelectTextboxContext = /*#__PURE__*/React.createContext({});

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

@@ -6,6 +6,7 @@ import useFloating from "../../../hooks/__internal__/useFloating";
 import Textbox from "../../textbox";
 import SelectText from "../__internal__/select-text";
 import useLocale from "../../../hooks/__internal__/useLocale";
+import { SelectTextboxContext } from "./select-textbox-context";
 const floatingMiddleware = [offset(({
   rects
 }) => ({
@@ -100,7 +101,11 @@ const SelectTextbox = /*#__PURE__*/React.forwardRef(({
     role: readOnly ? undefined : "combobox"
   };
   const hasStringValue = typeof selectedValue === "string" || Array.isArray(selectedValue) && typeof selectedValue[0] === "string";
-  return /*#__PURE__*/React.createElement(Textbox, _extends({
+  return /*#__PURE__*/React.createElement(SelectTextboxContext.Provider, {
+    value: {
+      isInputInSelect: true
+    }
+  }, /*#__PURE__*/React.createElement(Textbox, _extends({
     "aria-label": ariaLabel,
     "data-element": "select-input",
     inputIcon: "dropdown",
@@ -118,7 +123,7 @@ const SelectTextbox = /*#__PURE__*/React.forwardRef(({
     disabled: disabled,
     readOnly: readOnly,
     size: size
-  }, restProps)));
+  }, restProps))));
 });
 if (process.env.NODE_ENV !== "production") {
   SelectTextbox.propTypes = {

package/esm/components/split-button/split-button-toggle.style.d.ts

@@ -4,7 +4,8 @@ declare type StyledSplitButtonToggleProps = {
     displayed: boolean;
     size: "small" | "medium" | "large";
 };
-declare const StyledSplitButtonToggle: import("styled-components").StyledComponent<"button", any, import("styled-system").SpaceProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, string | number | symbol> & import("../button").ButtonProps & {
+declare const StyledSplitButtonToggle: import("styled-components").StyledComponent<"button", any, import("styled-system").SpaceProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, string | number | symbol> & Omit<import("../button").ButtonProps, "buttonType"> & {
     iconOnly?: boolean | undefined;
+    buttonType: import("../button/button.component").ButtonTypes;
 } & StyledSplitButtonToggleProps, never>;
 export default StyledSplitButtonToggle;

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

@@ -8,6 +8,7 @@ var _react = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _input = _interopRequireDefault(require("./input.style"));
 var _inputBehaviour = require("../input-behaviour");
+var _selectTextboxContext = require("../../components/select/select-textbox/select-textbox-context");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
@@ -57,6 +58,9 @@ const Input = /*#__PURE__*/_react.default.forwardRef(({
 }, ref) => {
   const context = (0, _react.useContext)(_inputBehaviour.InputContext);
   const groupContext = (0, _react.useContext)(_inputBehaviour.InputGroupContext);
+  const {
+    isInputInSelect
+  } = (0, _react.useContext)(_selectTextboxContext.SelectTextboxContext);
   const deferredTimeout = (0, _react.useRef)(null);
   let input = (0, _react.useRef)(null);
   if (ref && "current" in ref) {
@@ -138,6 +142,7 @@ const Input = /*#__PURE__*/_react.default.forwardRef(({
   }
   const combinedDescription = descriptionList.length ? descriptionList.filter(Boolean).join(" ") : undefined;
   return /*#__PURE__*/_react.default.createElement(_input.default, _extends({}, rest, {
+    isInputInSelect: isInputInSelect,
     "data-has-autofocus": autoFocus ? true : undefined,
     "aria-describedby": combinedDescription,
     "aria-labelledby": ariaLabelledBy,

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

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

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

@@ -8,6 +8,9 @@ var _styledComponents = _interopRequireWildcard(require("styled-components"));
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 const StyledInput = _styledComponents.default.input`
+  ${({
+  isInputInSelect
+}) => isInputInSelect && "text-overflow: ellipsis"};
   background: transparent;
   border: none;
   color: var(--colorsUtilityYin090);

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

@@ -1,7 +1,8 @@
 import { SpaceProps } from "styled-system";
 import { ButtonProps } from "./button.component";
-declare const StyledButton: import("styled-components").StyledComponent<"button", any, SpaceProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, string | number | symbol> & ButtonProps & {
+declare const StyledButton: import("styled-components").StyledComponent<"button", any, SpaceProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, string | number | symbol> & Omit<ButtonProps, "buttonType"> & {
     iconOnly?: boolean | undefined;
+    buttonType: Required<ButtonProps>["buttonType"];
 }, never>;
 export declare const StyledButtonSubtext: import("styled-components").StyledComponent<"span", any, {}, never>;
 export declare const StyledButtonMainText: import("styled-components").StyledComponent<"span", any, {}, never>;

package/lib/components/button/button.style.js

@@ -37,7 +37,7 @@ function stylingForIconOnly(size) {
 function stylingForType({
   iconOnly,
   disabled,
-  buttonType = "secondary",
+  buttonType,
   size,
   destructive
 }) {

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

@@ -9,7 +9,7 @@ var _input = _interopRequireDefault(require("../../__internal__/input/input.styl
 var _inputPresentation = _interopRequireDefault(require("../../__internal__/input/input-presentation.style"));
 var _formField = _interopRequireDefault(require("../../__internal__/form-field/form-field.style"));
 var _inputIconToggle = _interopRequireDefault(require("../../__internal__/input-icon-toggle/input-icon-toggle.style"));
-var _selectText = _interopRequireDefault(require("../select/__internal__/select-text/select-text.style"));
+var _selectText = require("../select/__internal__/select-text/select-text.style");
 var _link = _interopRequireDefault(require("../link"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
@@ -51,7 +51,7 @@ const StyledPagerSizeOptions = exports.StyledPagerSizeOptions = _styledComponent
     min-width: 10px;
     margin: 0px;
 
-    ${_selectText.default} {
+    ${_selectText.StyledSelectText} {
       font-size: 14px;
       padding-right: 0px;
       padding-left: 8px;

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

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
-var _selectText = _interopRequireDefault(require("./select-text.style"));
+var _selectText = require("./select-text.style");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 const SelectText = ({
   disabled,
@@ -19,7 +19,7 @@ const SelectText = ({
   size = "medium"
 }) => {
   const hasPlaceholder = !disabled && !readOnly && !formattedValue;
-  return /*#__PURE__*/_react.default.createElement(_selectText.default, {
+  return /*#__PURE__*/_react.default.createElement(_selectText.StyledSelectText, {
     "aria-hidden": true,
     "data-element": "select-text",
     disabled: disabled,
@@ -29,6 +29,6 @@ const SelectText = ({
     readOnly: readOnly,
     transparent: transparent,
     size: size
-  }, hasPlaceholder ? placeholder : formattedValue);
+  }, /*#__PURE__*/_react.default.createElement(_selectText.StyledSelectTextChildrenWrapper, null, hasPlaceholder ? placeholder : formattedValue));
 };
 var _default = exports.default = SelectText;

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

@@ -4,4 +4,5 @@ interface StyledSelectTextProps extends Pick<SelectTextProps, "disabled" | "read
     size: NonNullable<SelectTextProps["size"]>;
 }
 declare const StyledSelectText: import("styled-components").StyledComponent<"span", any, StyledSelectTextProps, never>;
-export default StyledSelectText;
+declare const StyledSelectTextChildrenWrapper: import("styled-components").StyledComponent<"span", any, {}, never>;
+export { StyledSelectText, StyledSelectTextChildrenWrapper };

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

@@ -3,13 +3,13 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.StyledSelectTextChildrenWrapper = exports.StyledSelectText = void 0;
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
 var _inputSizes = _interopRequireDefault(require("../../../../__internal__/input/input-sizes.style"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
-const StyledSelectText = _styledComponents.default.span`
+const StyledSelectText = exports.StyledSelectText = _styledComponents.default.span`
   ${({
   disabled,
   hasPlaceholder,
@@ -22,10 +22,7 @@ const StyledSelectText = _styledComponents.default.span`
     flex-grow: 1;
     font-size: 14px;
     height: auto;
-    overflow: hidden;
     outline: none;
-    text-overflow: ellipsis;
-    white-space: nowrap;
     width: 30px;
     z-index: 1;
     padding-left: ${_inputSizes.default[size].horizontalPadding};
@@ -55,4 +52,9 @@ const StyledSelectText = _styledComponents.default.span`
     `}
   `}
 `;
-var _default = exports.default = StyledSelectText;
+const StyledSelectTextChildrenWrapper = exports.StyledSelectTextChildrenWrapper = _styledComponents.default.span`
+  display: block;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+`;

package/lib/components/select/select-textbox/select-textbox-context.d.ts

@@ -0,0 +1,5 @@
+import React from "react";
+export declare type SelectTextboxContextProps = {
+    isInputInSelect?: boolean;
+};
+export declare const SelectTextboxContext: React.Context<SelectTextboxContextProps>;

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

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

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

@@ -11,6 +11,7 @@ var _useFloating = _interopRequireDefault(require("../../../hooks/__internal__/u
 var _textbox = _interopRequireDefault(require("../../textbox"));
 var _selectText = _interopRequireDefault(require("../__internal__/select-text"));
 var _useLocale = _interopRequireDefault(require("../../../hooks/__internal__/useLocale"));
+var _selectTextboxContext = require("./select-textbox-context");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
@@ -109,7 +110,11 @@ const SelectTextbox = /*#__PURE__*/_react.default.forwardRef(({
     role: readOnly ? undefined : "combobox"
   };
   const hasStringValue = typeof selectedValue === "string" || Array.isArray(selectedValue) && typeof selectedValue[0] === "string";
-  return /*#__PURE__*/_react.default.createElement(_textbox.default, _extends({
+  return /*#__PURE__*/_react.default.createElement(_selectTextboxContext.SelectTextboxContext.Provider, {
+    value: {
+      isInputInSelect: true
+    }
+  }, /*#__PURE__*/_react.default.createElement(_textbox.default, _extends({
     "aria-label": ariaLabel,
     "data-element": "select-input",
     inputIcon: "dropdown",
@@ -127,7 +132,7 @@ const SelectTextbox = /*#__PURE__*/_react.default.forwardRef(({
     disabled: disabled,
     readOnly: readOnly,
     size: size
-  }, restProps)));
+  }, restProps))));
 });
 if (process.env.NODE_ENV !== "production") {
   SelectTextbox.propTypes = {

package/lib/components/split-button/split-button-toggle.style.d.ts

@@ -4,7 +4,8 @@ declare type StyledSplitButtonToggleProps = {
     displayed: boolean;
     size: "small" | "medium" | "large";
 };
-declare const StyledSplitButtonToggle: import("styled-components").StyledComponent<"button", any, import("styled-system").SpaceProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, string | number | symbol> & import("../button").ButtonProps & {
+declare const StyledSplitButtonToggle: import("styled-components").StyledComponent<"button", any, import("styled-system").SpaceProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, string | number | symbol> & Omit<import("../button").ButtonProps, "buttonType"> & {
     iconOnly?: boolean | undefined;
+    buttonType: import("../button/button.component").ButtonTypes;
 } & StyledSplitButtonToggleProps, never>;
 export default StyledSplitButtonToggle;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "carbon-react",
-  "version": "134.1.0",
+  "version": "134.1.2",
   "description": "A library of reusable React components for easily building user interfaces.",
   "files": [
     "lib",