carbon-react 110.8.0 → 110.9.1

package/esm/components/confirm/confirm.d.ts

@@ -1,6 +1,6 @@
 import { IconType } from "components/icon/icon-type";
 import * as React from "react";
-import { DialogProps } from "../dialog/dialog";
+import { DialogProps } from "../dialog";
 
 export interface ConfirmProps extends DialogProps {
   /** Color variants for new business themes: "primary" | "secondary" | "tertiary" | "dashed" | "darkBackground" */

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

@@ -30,6 +30,7 @@ const FilterableSelect = /*#__PURE__*/React.forwardRef(({
   noResultsMessage,
   disablePortal,
   listActionButton,
+  listMaxHeight,
   onListAction,
   isLoading,
   disabled,
@@ -401,6 +402,7 @@ const FilterableSelect = /*#__PURE__*/React.forwardRef(({
     noResultsMessage: noResultsMessage,
     disablePortal: disablePortal,
     listActionButton: listActionButton,
+    listMaxHeight: listMaxHeight,
     onListAction: handleOnListAction,
     isLoading: isLoading,
     readOnly: readOnly,
@@ -490,6 +492,9 @@ FilterableSelect.propTypes = { ...formInputPropTypes,
   /** Overrides the default tooltip position */
   tooltipPosition: PropTypes.oneOf(["top", "bottom", "left", "right"]),
 
+  /** Maximum list height - defaults to 180 */
+  listMaxHeight: PropTypes.number,
+
   /** Placement of the select list in relation to the input element */
   listPlacement: PropTypes.oneOf(["auto", "auto-start", "auto-end", "top", "top-start", "top-end", "bottom", "bottom-start", "bottom-end", "right", "right-start", "right-end", "left", "left-start", "left-end"]),
 

package/esm/components/select/filterable-select/filterable-select.d.ts

@@ -44,6 +44,8 @@ export interface FilterableSelectProps
   value?: string | Record<string, unknown>;
   /** Overrides the default tooltip position */
   tooltipPosition?: "top" | "bottom" | "left" | "right";
+  /** Maximum list height - defaults to 180 */
+  listMaxHeight?: number;
   /** Placement of the select list in relation to the input element */
   listPlacement?:
     | "auto"

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

@@ -42,6 +42,7 @@ const MultiSelect = /*#__PURE__*/React.forwardRef(({
   "data-element": dataElement,
   "data-role": dataRole,
   listPlacement = "bottom-start",
+  listMaxHeight,
   flipEnabled = true,
   wrapPillText = true,
   ...textboxProps
@@ -423,6 +424,7 @@ const MultiSelect = /*#__PURE__*/React.forwardRef(({
     tableHeader: tableHeader,
     multiColumn: multiColumn,
     listPlacement: listPlacement,
+    listMaxHeight: listMaxHeight,
     flipEnabled: flipEnabled,
     loaderDataRole: "multi-select-list-loader",
     multiselectValues: actualValue,
@@ -501,6 +503,9 @@ MultiSelect.propTypes = { ...formInputPropTypes,
   /** Overrides the default tooltip position */
   tooltipPosition: PropTypes.oneOf(["top", "bottom", "left", "right"]),
 
+  /** Maximum list height - defaults to 180 */
+  listMaxHeight: PropTypes.number,
+
   /** Placement of the select list in relation to the input element */
   listPlacement: PropTypes.oneOf(["auto", "auto-start", "auto-end", "top", "top-start", "top-end", "bottom", "bottom-start", "bottom-end", "right", "right-start", "right-end", "left", "left-start", "left-end"]),
 

package/esm/components/select/multi-select/multi-select.d.ts

@@ -39,6 +39,8 @@ export interface MultiSelectProps
   value?: string[] | Record<string, unknown>[];
   /** Overrides the default tooltip position */
   tooltipPosition?: "top" | "bottom" | "left" | "right";
+  /** Maximum list height - defaults to 180 */
+  listMaxHeight?: number;
   /** Placement of the select list in relation to the input element */
   listPlacement?:
     | "auto"

package/esm/components/select/select-list/select-list-container.style.js

@@ -8,9 +8,7 @@ const StyledSelectListContainer = styled.div`
 }) => placement === "top-start" && "bottom: 0"};
   min-width: 100%;
   max-width: 870px;
-  height: ${({
-  height
-}) => height};
+  height: 100%;
   overflow: hidden;
   animation: fadeIn 250ms ease-out;
 

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

@@ -28,6 +28,7 @@ const fixedPopoverModifiers = [{
   }
 }];
 const SelectList = /*#__PURE__*/React.forwardRef(({
+  listMaxHeight = 180,
   listActionButton,
   id,
   labelId,
@@ -337,7 +338,6 @@ const SelectList = /*#__PURE__*/React.forwardRef(({
     }
   }, /*#__PURE__*/React.createElement(StyledSelectListContainer, _extends({
     "data-element": "select-list-wrapper",
-    height: listHeight,
     placement: placement.current
   }, listProps), /*#__PURE__*/React.createElement(StyledSelectList, {
     id: id,
@@ -348,7 +348,8 @@ const SelectList = /*#__PURE__*/React.forwardRef(({
     ref: listCallbackRef,
     tabIndex: "-1",
     isLoading: isLoading,
-    multiColumn: multiColumn
+    multiColumn: multiColumn,
+    maxHeight: listMaxHeight
   }, selectListContent, isLoading && loader()), listActionButton && /*#__PURE__*/React.createElement(ListActionButton, {
     ref: listActionButtonRef,
     listActionButton: listActionButton,
@@ -386,6 +387,9 @@ SelectList.propTypes = {
   /** True for default text button or a Button Component to be rendered */
   listActionButton: PropTypes.oneOfType([PropTypes.bool, PropTypes.element]),
 
+  /** Maximum list height - defaults to 180 */
+  listMaxHeight: PropTypes.number,
+
   /** A callback for when the Action Button is triggered */
   onListAction: PropTypes.func,
 

package/esm/components/select/select-list/select-list.style.js

@@ -32,7 +32,7 @@ const StyledSelectList = styled.ul`
     list-style-type: none;
     max-height: ${({
   maxHeight
-}) => `${maxHeight}`};
+}) => `${maxHeight}`}px;
     margin: 0;
     outline: none;
     overflow-x: hidden;

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

@@ -30,6 +30,7 @@ const SimpleSelect = /*#__PURE__*/React.forwardRef(({
   onBlur,
   disablePortal,
   isLoading,
+  listMaxHeight,
   onListScrollBottom,
   tableHeader,
   multiColumn,
@@ -325,6 +326,7 @@ const SimpleSelect = /*#__PURE__*/React.forwardRef(({
     onSelectListClose: onSelectListClose,
     highlightedValue: selectedValue,
     disablePortal: disablePortal,
+    listMaxHeight: listMaxHeight,
     isLoading: isLoading,
     onListScrollBottom: onListScrollBottom,
     tableHeader: tableHeader,
@@ -404,6 +406,9 @@ SimpleSelect.propTypes = {
   /** Overrides the default tooltip position */
   tooltipPosition: PropTypes.oneOf(["top", "bottom", "left", "right"]),
 
+  /** Maximum list height - defaults to 180 */
+  listMaxHeight: PropTypes.number,
+
   /** Placement of the select list in relation to the input element */
   listPlacement: PropTypes.oneOf(["auto", "auto-start", "auto-end", "top", "top-start", "top-end", "bottom", "bottom-start", "bottom-end", "right", "right-start", "right-end", "left", "left-start", "left-end"]),
 

package/esm/components/select/simple-select/simple-select.d.ts

@@ -37,6 +37,8 @@ export interface SimpleSelectProps
   value?: string | Record<string, unknown>;
   /** Overrides the default tooltip position */
   tooltipPosition?: "top" | "bottom" | "left" | "right";
+  /** Maximum list height - defaults to 180 */
+  listMaxHeight?: number;
   /** Placement of the select list in relation to the input element */
   listPlacement?:
     | "auto"

package/lib/components/confirm/confirm.d.ts

@@ -1,6 +1,6 @@
 import { IconType } from "components/icon/icon-type";
 import * as React from "react";
-import { DialogProps } from "../dialog/dialog";
+import { DialogProps } from "../dialog";
 
 export interface ConfirmProps extends DialogProps {
   /** Color variants for new business themes: "primary" | "secondary" | "tertiary" | "dashed" | "darkBackground" */

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

@@ -55,6 +55,7 @@ const FilterableSelect = /*#__PURE__*/_react.default.forwardRef(({
   noResultsMessage,
   disablePortal,
   listActionButton,
+  listMaxHeight,
   onListAction,
   isLoading,
   disabled,
@@ -426,6 +427,7 @@ const FilterableSelect = /*#__PURE__*/_react.default.forwardRef(({
     noResultsMessage: noResultsMessage,
     disablePortal: disablePortal,
     listActionButton: listActionButton,
+    listMaxHeight: listMaxHeight,
     onListAction: handleOnListAction,
     isLoading: isLoading,
     readOnly: readOnly,
@@ -517,6 +519,9 @@ FilterableSelect.propTypes = { ..._selectTextbox.formInputPropTypes,
   /** Overrides the default tooltip position */
   tooltipPosition: _propTypes.default.oneOf(["top", "bottom", "left", "right"]),
 
+  /** Maximum list height - defaults to 180 */
+  listMaxHeight: _propTypes.default.number,
+
   /** Placement of the select list in relation to the input element */
   listPlacement: _propTypes.default.oneOf(["auto", "auto-start", "auto-end", "top", "top-start", "top-end", "bottom", "bottom-start", "bottom-end", "right", "right-start", "right-end", "left", "left-start", "left-end"]),
 

package/lib/components/select/filterable-select/filterable-select.d.ts

@@ -44,6 +44,8 @@ export interface FilterableSelectProps
   value?: string | Record<string, unknown>;
   /** Overrides the default tooltip position */
   tooltipPosition?: "top" | "bottom" | "left" | "right";
+  /** Maximum list height - defaults to 180 */
+  listMaxHeight?: number;
   /** Placement of the select list in relation to the input element */
   listPlacement?:
     | "auto"

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

@@ -69,6 +69,7 @@ const MultiSelect = /*#__PURE__*/_react.default.forwardRef(({
   "data-element": dataElement,
   "data-role": dataRole,
   listPlacement = "bottom-start",
+  listMaxHeight,
   flipEnabled = true,
   wrapPillText = true,
   ...textboxProps
@@ -451,6 +452,7 @@ const MultiSelect = /*#__PURE__*/_react.default.forwardRef(({
     tableHeader: tableHeader,
     multiColumn: multiColumn,
     listPlacement: listPlacement,
+    listMaxHeight: listMaxHeight,
     flipEnabled: flipEnabled,
     loaderDataRole: "multi-select-list-loader",
     multiselectValues: actualValue,
@@ -531,6 +533,9 @@ MultiSelect.propTypes = { ..._selectTextbox.formInputPropTypes,
   /** Overrides the default tooltip position */
   tooltipPosition: _propTypes.default.oneOf(["top", "bottom", "left", "right"]),
 
+  /** Maximum list height - defaults to 180 */
+  listMaxHeight: _propTypes.default.number,
+
   /** Placement of the select list in relation to the input element */
   listPlacement: _propTypes.default.oneOf(["auto", "auto-start", "auto-end", "top", "top-start", "top-end", "bottom", "bottom-start", "bottom-end", "right", "right-start", "right-end", "left", "left-start", "left-end"]),
 

package/lib/components/select/multi-select/multi-select.d.ts

@@ -39,6 +39,8 @@ export interface MultiSelectProps
   value?: string[] | Record<string, unknown>[];
   /** Overrides the default tooltip position */
   tooltipPosition?: "top" | "bottom" | "left" | "right";
+  /** Maximum list height - defaults to 180 */
+  listMaxHeight?: number;
   /** Placement of the select list in relation to the input element */
   listPlacement?:
     | "auto"

package/lib/components/select/select-list/select-list-container.style.js

@@ -18,9 +18,7 @@ const StyledSelectListContainer = _styledComponents.default.div`
 }) => placement === "top-start" && "bottom: 0"};
   min-width: 100%;
   max-width: 870px;
-  height: ${({
-  height
-}) => height};
+  height: 100%;
   overflow: hidden;
   animation: fadeIn 250ms ease-out;
 

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

@@ -58,6 +58,7 @@ const fixedPopoverModifiers = [{
 }];
 
 const SelectList = /*#__PURE__*/_react.default.forwardRef(({
+  listMaxHeight = 180,
   listActionButton,
   id,
   labelId,
@@ -367,7 +368,6 @@ const SelectList = /*#__PURE__*/_react.default.forwardRef(({
     }
   }, /*#__PURE__*/_react.default.createElement(_selectListContainer.default, _extends({
     "data-element": "select-list-wrapper",
-    height: listHeight,
     placement: placement.current
   }, listProps), /*#__PURE__*/_react.default.createElement(_selectList.StyledSelectList, {
     id: id,
@@ -378,7 +378,8 @@ const SelectList = /*#__PURE__*/_react.default.forwardRef(({
     ref: listCallbackRef,
     tabIndex: "-1",
     isLoading: isLoading,
-    multiColumn: multiColumn
+    multiColumn: multiColumn,
+    maxHeight: listMaxHeight
   }, selectListContent, isLoading && loader()), listActionButton && /*#__PURE__*/_react.default.createElement(_listActionButton.default, {
     ref: listActionButtonRef,
     listActionButton: listActionButton,
@@ -417,6 +418,9 @@ SelectList.propTypes = {
   /** True for default text button or a Button Component to be rendered */
   listActionButton: _propTypes.default.oneOfType([_propTypes.default.bool, _propTypes.default.element]),
 
+  /** Maximum list height - defaults to 180 */
+  listMaxHeight: _propTypes.default.number,
+
   /** A callback for when the Action Button is triggered */
   onListAction: _propTypes.default.func,
 

package/lib/components/select/select-list/select-list.style.js

@@ -46,7 +46,7 @@ const StyledSelectList = _styledComponents.default.ul`
     list-style-type: none;
     max-height: ${({
   maxHeight
-}) => `${maxHeight}`};
+}) => `${maxHeight}`}px;
     margin: 0;
     outline: none;
     overflow-x: hidden;

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

@@ -55,6 +55,7 @@ const SimpleSelect = /*#__PURE__*/_react.default.forwardRef(({
   onBlur,
   disablePortal,
   isLoading,
+  listMaxHeight,
   onListScrollBottom,
   tableHeader,
   multiColumn,
@@ -350,6 +351,7 @@ const SimpleSelect = /*#__PURE__*/_react.default.forwardRef(({
     onSelectListClose: onSelectListClose,
     highlightedValue: selectedValue,
     disablePortal: disablePortal,
+    listMaxHeight: listMaxHeight,
     isLoading: isLoading,
     onListScrollBottom: onListScrollBottom,
     tableHeader: tableHeader,
@@ -431,6 +433,9 @@ SimpleSelect.propTypes = {
   /** Overrides the default tooltip position */
   tooltipPosition: _propTypes.default.oneOf(["top", "bottom", "left", "right"]),
 
+  /** Maximum list height - defaults to 180 */
+  listMaxHeight: _propTypes.default.number,
+
   /** Placement of the select list in relation to the input element */
   listPlacement: _propTypes.default.oneOf(["auto", "auto-start", "auto-end", "top", "top-start", "top-end", "bottom", "bottom-start", "bottom-end", "right", "right-start", "right-end", "left", "left-start", "left-end"]),
 

package/lib/components/select/simple-select/simple-select.d.ts

@@ -37,6 +37,8 @@ export interface SimpleSelectProps
   value?: string | Record<string, unknown>;
   /** Overrides the default tooltip position */
   tooltipPosition?: "top" | "bottom" | "left" | "right";
+  /** Maximum list height - defaults to 180 */
+  listMaxHeight?: number;
   /** Placement of the select list in relation to the input element */
   listPlacement?:
     | "auto"

package/package.json

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