carbon-react 118.1.0 → 118.2.0

package/lib/components/select/option-group-header/index.js

@@ -0,0 +1,15 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "default", {
+  enumerable: true,
+  get: function () {
+    return _optionGroupHeader.default;
+  }
+});
+
+var _optionGroupHeader = _interopRequireDefault(require("./option-group-header.component"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

package/lib/components/select/option-group-header/option-group-header.component.d.ts

@@ -0,0 +1,16 @@
+import React from "react";
+import { CSSProperties } from "styled-components";
+import { IconProps } from "../../icon";
+export interface OptionGroupHeaderProps {
+    /** Heading text */
+    label: string;
+    /** Any valid Carbon icon name */
+    icon?: IconProps["type"];
+    /**
+     * @private
+     * @ignore
+     * object containing CSS styles to be passed to the underlying DOM element */
+    style?: CSSProperties;
+}
+declare const OptionGroupHeader: React.ForwardRefExoticComponent<OptionGroupHeaderProps & React.RefAttributes<HTMLDivElement>>;
+export default OptionGroupHeader;

package/lib/components/select/option-group-header/option-group-header.component.js

@@ -33,21 +33,10 @@ const OptionGroupHeader = /*#__PURE__*/_react.default.forwardRef(({
 });
 
 OptionGroupHeader.propTypes = {
-  /** Heading text */
-  label: _propTypes.default.string.isRequired,
-
-  /**
-   * <a href="https://brand.sage.com/d/NdbrveWvNheA/foundations#/icons/icons" target="_blank">List of supported icons</a>
-   *
-   * Any valid Carbon icon name
-   */
-  icon: _propTypes.default.string,
-
-  /**
-   * @private
-   * @ignore
-   * object containing CSS styles to be passed to the underlying DOM element */
-  style: _propTypes.default.object
+  "icon": _propTypes.default.oneOf(["add", "admin", "alert_on", "alert", "analysis", "arrow_bottom_right_circle", "arrow_down", "arrow_left_boxed", "arrow_left_right_small", "arrow_left_small", "arrow_left", "arrow_right_small", "arrow_right", "arrow_top_left_circle", "arrow_up", "arrow", "arrows_left_right", "attach", "bank_with_card", "bank", "basket_with_squares", "basket", "bed", "bin", "block_arrow_right", "blocked_square", "blocked", "bold", "box_arrow_left", "boxed_shapes", "bulk_destroy", "bullet_list_dotted", "bullet_list_numbers", "bullet_list", "business", "calendar_today", "calendar", "call", "camera", "car_lock", "car_money", "car_repair", "card_view", "caret_down", "caret_large_down", "caret_large_left", "caret_large_right", "caret_large_up", "caret_left", "caret_right", "caret_up", "cart", "cash", "chart_bar", "chart_line", "chart_pie", "chat_notes", "chat", "chevron_down_thick", "chevron_down", "chevron_left_thick", "chevron_left", "chevron_right_thick", "chevron_right", "chevron_up_thick", "chevron_up", "circle_with_dots", "circles_connection", "clock", "close", "coins", "collaborate", "computer_clock", "connect", "construction", "contacts", "copy", "create", "credit_card_slash", "credit_card", "cross_circle", "cross", "csv", "dashboard", "delete", "delivery", "disconnect", "disputed", "document_right_align", "document_tick", "document_vertical_lines", "download", "draft", "drag_vertical", "drag", "drill", "dropdown", "duplicate", "edit", "edited", "ellipsis_horizontal", "ellipsis_vertical", "email_switch", "email", "entry", "envelope_dollar", "envelope_euro", "error_square", "error", "euro", "expand", "factory", "favourite_lined", "favourite", "fax", "feedback", "file_excel", "file_generic", "file_image", "file_pdf", "file_word", "files_leaning", "filter_new", "filter", "fit_height", "fit_width", "flag", "folder", "form_refresh", "gift", "go", "graduation_hat", "graph", "grid", "hand_cash_coins", "hand_cash_note", "help", "hide", "home", "image", "in_progress", "in_transit", "individual", "info", "italic", "key", "laptop", "ledger_arrow_left", "ledger_arrow_right", "ledger", "lightbulb_off", "lightbulb_on", "link", "list_view", "location", "locked", "logout", "lookup", "maintenance", "marker", "message", "messages", "minus_large", "minus", "mobile", "money_bag", "new", "none", "old_warning", "palm_tree", "pause_circle", "pause", "pdf", "people_switch", "people", "percentage_boxed", "person_info", "person_tick", "person", "petrol_pump", "phone", "piggy_bank", "plane", "play_circle", "play", "plus_large", "plus", "pound", "print", "progress", "progressed", "question_hollow", "question_mark", "question", "refresh_clock", "refresh", "remove", "sage_coin", "save", "scan", "search", "services", "settings_old", "settings", "share", "shop", "sort_down", "sort_up", "spanner", "split_container", "split", "square_dot", "squares_nine", "stacked_boxes", "stacked_squares", "submitted", "success", "sync", "tag", "talk", "theatre_masks", "three_boxes", "tick_circle", "tick_thick", "tick", "true_tick", "u_turn_left", "u_turn_right", "undo", "unlocked", "upload", "uploaded", "video", "view", "warning"]),
+  "label": _propTypes.default.string.isRequired,
+  "style": _propTypes.default.object
 };
+OptionGroupHeader.displayName = "OptionGroupHeader";
 var _default = OptionGroupHeader;
 exports.default = _default;

package/lib/components/select/option-group-header/option-group-header.style.d.ts

@@ -0,0 +1,2 @@
+declare const StyledOptionGroupHeader: import("styled-components").StyledComponent<"div", any, {}, never>;
+export default StyledOptionGroupHeader;

package/lib/components/select/option-group-header/package.json

@@ -0,0 +1,6 @@
+{
+  "sideEffects": false,
+  "module": "../../../../esm/components/select/option-group-header/index.js",
+  "main": "./index.js",
+  "types": "./index.d.ts"
+}

package/lib/components/select/option-row/index.d.ts

@@ -1,16 +1,2 @@
-import * as React from "react";
-
-export interface OptionRowProps {
-  /** The option's visible text, displayed within <Textbox> of <Select> */
-  text: string;
-  /** Row content, should consist of multiple td elements */
-  children: React.ReactNode;
-  /** The option's invisible internal value */
-  value: string | Record<string, unknown>;
-}
-
-declare function OptionRow(
-  props: OptionRowProps & React.RefAttributes<HTMLTableRowElement>
-): JSX.Element;
-
-export default OptionRow;
+export { default } from "./option-row.component";
+export type { OptionRowProps } from "./option-row.component";

package/lib/components/select/option-row/index.js

@@ -0,0 +1,15 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "default", {
+  enumerable: true,
+  get: function () {
+    return _optionRow.default;
+  }
+});
+
+var _optionRow = _interopRequireDefault(require("./option-row.component"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

package/lib/components/select/option-row/option-row.component.d.ts

@@ -0,0 +1,42 @@
+import React from "react";
+import { CSSProperties } from "styled-components";
+export interface OptionRowProps {
+    /** The option's visible text, displayed within <Textbox> of <Select> */
+    text: string;
+    /** Row content, should consist of multiple td elements */
+    children: React.ReactNode;
+    /** The option's invisible internal value */
+    value: string | Record<string, unknown>;
+    /**
+     * @private
+     * @ignore
+     * Component id (prop added by the SelectList component)
+     */
+    id: string;
+    /**
+     * @private
+     * @ignore
+     * Callback to return value when the element is selected (prop added by the SelectList component) */
+    onSelect?: (ev: {
+        id: string;
+        text: string;
+        value: string | Record<string, unknown>;
+    }) => void;
+    /**
+     * @private
+     * @ignore
+     * Position of the element in the list */
+    index?: number;
+    /**
+     * @private
+     * @ignore
+     * True when option should be hidden from the view (prop added by the SelectList component) */
+    hidden?: boolean;
+    /**
+     * @private
+     * @ignore
+     * object containing CSS styles to be passed to the underlying DOM element */
+    style?: CSSProperties;
+}
+declare const OptionRow: React.ForwardRefExoticComponent<OptionRowProps & React.RefAttributes<HTMLTableRowElement>>;
+export default OptionRow;

package/lib/components/select/option-row/option-row.component.js

@@ -33,7 +33,7 @@ const OptionRow = /*#__PURE__*/_react.default.forwardRef(({
   ...rest
 }, ref) => {
   const handleClick = () => {
-    onSelect({
+    onSelect === null || onSelect === void 0 ? void 0 : onSelect({
       id,
       text,
       value
@@ -61,45 +61,15 @@ const OptionRow = /*#__PURE__*/_react.default.forwardRef(({
 });
 
 OptionRow.propTypes = {
-  /** The option's visible text, displayed within Textbox of Select */
-  text: _propTypes.default.string.isRequired,
-
-  /** Row content, should consist of multiple `td` elements */
-  children: _propTypes.default.node.isRequired,
-
-  /** The option's invisible internal value */
-  value: _propTypes.default.oneOfType([_propTypes.default.object, _propTypes.default.string]).isRequired,
-
-  /**
-   * @private
-   * @ignore
-   * Component id (prop added by the SelectList component)
-   */
-  id: _propTypes.default.string.isRequired,
-
-  /**
-   * @private
-   * @ignore
-   * Callback to return value when the element is selected (prop added by the SelectList component) */
-  onSelect: _propTypes.default.func,
-
-  /**
-   * @private
-   * @ignore
-   * Position of the element in the list */
-  index: _propTypes.default.number,
-
-  /**
-   * @private
-   * @ignore
-   * True when option should be hidden from the view (prop added by the SelectList component) */
-  hidden: _propTypes.default.bool,
-
-  /**
-   * @private
-   * @ignore
-   * object containing CSS styles to be passed to the underlying DOM element */
-  style: _propTypes.default.object
+  "children": _propTypes.default.node,
+  "hidden": _propTypes.default.bool,
+  "id": _propTypes.default.string.isRequired,
+  "index": _propTypes.default.number,
+  "onSelect": _propTypes.default.func,
+  "style": _propTypes.default.object,
+  "text": _propTypes.default.string.isRequired,
+  "value": _propTypes.default.oneOfType([_propTypes.default.object, _propTypes.default.string]).isRequired
 };
+OptionRow.displayName = "OptionRow";
 var _default = OptionRow;
 exports.default = _default;

package/lib/components/select/option-row/option-row.style.d.ts

@@ -0,0 +1,6 @@
+import { OptionRowProps } from ".";
+interface StyledOptionRowProps extends Pick<OptionRowProps, "hidden"> {
+    isHighlighted?: boolean;
+}
+declare const StyledOptionRow: import("styled-components").StyledComponent<"tr", any, StyledOptionRowProps, never>;
+export default StyledOptionRow;

package/lib/components/select/option-row/package.json

@@ -0,0 +1,6 @@
+{
+  "sideEffects": false,
+  "module": "../../../../esm/components/select/option-row/index.js",
+  "main": "./index.js",
+  "types": "./index.d.ts"
+}

package/lib/components/select/select-list/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from "./select-list.component";
+export type { SelectListProps } from "./select-list.component";

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

@@ -0,0 +1,15 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "default", {
+  enumerable: true,
+  get: function () {
+    return _selectList.default;
+  }
+});
+
+var _selectList = _interopRequireDefault(require("./select-list.component"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

package/lib/components/select/select-list/package.json

@@ -0,0 +1,6 @@
+{
+  "sideEffects": false,
+  "module": "../../../../esm/components/select/select-list/index.js",
+  "main": "./index.js",
+  "types": "./index.d.ts"
+}

package/lib/components/select/select-list/select-list-container.style.d.ts

@@ -0,0 +1,6 @@
+import { SelectListProps } from ".";
+interface StyledSelectListContainerProps extends Pick<SelectListProps, "isLoading"> {
+    maxHeight: number;
+}
+declare const StyledSelectListContainer: import("styled-components").StyledComponent<"div", any, StyledSelectListContainerProps, never>;
+export default StyledSelectListContainer;

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

@@ -26,6 +26,7 @@ const StyledSelectListContainer = _styledComponents.default.div`
   display: flex;
   flex-wrap: wrap;
   align-items: flex-start;
+  border-radius: var(--borderRadius050);
 
   ${({
   isLoading

package/lib/components/select/select-list/select-list.component.d.ts

@@ -0,0 +1,64 @@
+import React from "react";
+import { Side } from "@floating-ui/dom";
+export interface SelectListProps {
+    /** The ID for the parent <div> */
+    id?: string;
+    /** The Id of the label */
+    labelId?: string;
+    /** Child components (such as <Option>) */
+    children?: React.ReactNode;
+    /** Boolean to toggle where DatePicker is rendered in relation to the Date Input */
+    disablePortal?: boolean;
+    /** DOM element to position the dropdown menu list relative to */
+    anchorElement?: HTMLElement;
+    /** A callback for when a child is selected */
+    onSelect: (target: {
+        text?: string;
+        value?: string | Record<string, unknown>;
+        id?: string;
+        selectionType: string;
+    }) => void;
+    /** A callback for when the list should be closed */
+    onSelectListClose: () => void;
+    /** Text value to highlight an option */
+    filterText?: string;
+    /** Value of option to be highlighted on component render */
+    highlightedValue?: string | Record<string, unknown>;
+    /** True for default text button or a Button Component to be rendered */
+    listActionButton?: boolean | React.ReactNode;
+    /** Maximum list height - defaults to 180 */
+    listMaxHeight?: number;
+    /** A callback for when the Action Button is triggered */
+    onListAction?: (ev?: React.MouseEvent<HTMLButtonElement | HTMLAnchorElement>) => void;
+    /** If true the loader animation is displayed below the last option */
+    isLoading?: boolean;
+    /** A callback that is triggered when a user scrolls to the bottom of the list */
+    onListScrollBottom?: () => void;
+    /** SelectList table header, should consist of multiple th elements. Works only in multiColumn mode */
+    tableHeader?: React.ReactNode;
+    /** When true component will work in multi column mode, children should consist of OptionRow components in this mode */
+    multiColumn?: boolean;
+    /** Data role for loader component */
+    loaderDataRole?: string;
+    /** Placement of the select list relative to the input element */
+    listPlacement?: Side;
+    /** Use the opposite list placement if the set placement does not fit */
+    flipEnabled?: boolean;
+    /** @private @ignore
+     * Hides the list (with CSS display: none) if not set
+     */
+    isOpen?: boolean;
+    /** array of selected values, if rendered as part of a MultiSelect */
+    multiselectValues?: string[] | Record<string, unknown>[];
+    /** Set this prop to enable a virtualised list of options. If it is not used then all options will be in the
+     * DOM at all times, which may cause performance problems on very large lists */
+    enableVirtualScroll?: boolean;
+    /** The number of options to render into the DOM at once, either side of the currently-visible ones.
+     * Higher values make for smoother scrolling but may impact performance.
+     * Only used if the `enableVirtualScroll` prop is set. */
+    virtualScrollOverscan?: number;
+    /** @private @ignore A callback for when a mouseDown event occurs on the component */
+    onMouseDown?: () => void;
+}
+declare const SelectList: React.ForwardRefExoticComponent<SelectListProps & React.RefAttributes<HTMLDivElement>>;
+export default SelectList;