@itwin/appui-react 4.0.0-dev.9 → 4.0.0

package/lib/esm/appui-react/pickers/ListPicker.js

@@ -1,188 +1,191 @@
-/*---------------------------------------------------------------------------------------------
-* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
-* See LICENSE.md in the project root for license terms and full copyright notice.
-*--------------------------------------------------------------------------------------------*/
-/** @packageDocumentation
- * @module Picker
- */
-import "./ListPicker.scss";
-import classnames from "classnames";
-import * as React from "react";
-import { Columns, GroupColumn, Panel, PopupItem, Title } from "@itwin/components-react";
-import { Icon } from "@itwin/core-react";
-import { ToolbarDragInteractionContext } from "../toolbar/DragInteraction";
-import { UiFramework } from "../UiFramework";
-/** Enum for the list picker item type
- * @beta
- */
-export var ListItemType;
-(function (ListItemType) {
-    ListItemType[ListItemType["Item"] = 0] = "Item";
-    ListItemType[ListItemType["Separator"] = 1] = "Separator";
-    ListItemType[ListItemType["Container"] = 2] = "Container";
-})(ListItemType || (ListItemType = {}));
-/** List Picker Item React component
- * @beta
- */
-export class ListPickerItem extends React.PureComponent {
-    /** Renders ListPickerItem */
-    render() {
-        const itemClassName = classnames("ListPicker-item", this.props.isActive && "is-active", this.props.isFocused && "is-focused", this.props.className);
-        // TODO - if cut off, show a title
-        const title = (this.props.label && this.props.label.length > 25) ? this.props.label : undefined;
-        return (
-        // eslint-disable-next-line jsx-a11y/click-events-have-key-events
-        React.createElement("div", { className: itemClassName, onClick: this.props.onClick, role: "button", tabIndex: -1 },
-            React.createElement("div", { className: "label", title: title }, this.props.label)));
-    }
-}
-/** Expandable Section React component used by [[ListPickerBase]]
- * @beta
- */
-export class ExpandableSection extends React.PureComponent {
-    /** Creates an ExpandableSection */
-    constructor(props) {
-        super(props);
-        this._onClick = () => {
-            this.setState((prevState) => ({ expanded: !prevState.expanded }));
-        };
-        this.state = { expanded: !!this.props.expanded };
-    }
-    /** Renders ExpandableSection */
-    render() {
-        const className = classnames("nz-toolbar-item-expandable-group-group", this.props.className);
-        const icon = this.state.expanded ? React.createElement("i", { className: "icon icon-chevron-down" }) : React.createElement("i", { className: "icon icon-chevron-right" });
-        return (React.createElement(Panel, { className: className, style: this.props.style, key: this.props.title },
-            React.createElement("div", { onClick: this._onClick, className: this.state.expanded ? "ListPickerInnerContainer-header-expanded" : "ListPickerInnerContainer-header", role: "button", tabIndex: -1, "aria-expanded": this.state.expanded },
-                React.createElement("div", { className: "ListPickerInnerContainer-header-content" },
-                    React.createElement("div", { className: "ListPickerInnerContainer-expander" }, icon),
-                    React.createElement("div", { className: "ListPickerInnerContainer-title" }, this.props.title))),
-            this.state.expanded ?
-                React.createElement(GroupColumn, null, this.props.children) : React.createElement("div", null)));
-    }
-}
-/** @beta */
-export function getListPanel(props) {
-    const expandSingleSection = () => {
-        const populatedContainers = props.items.filter((item) => {
-            return (item.type === ListItemType.Container && item.children.length !== 0);
-        });
-        return populatedContainers.length === 1;
-    };
-    const listItemToElement = (item, itemIndex) => {
-        switch (item.type) {
-            case ListItemType.Item:
-                return (React.createElement(ListPickerItem, { ...props, key: itemIndex.toString(), label: item.name, isActive: item.enabled, onClick: 
-                    // istanbul ignore next
-                    () => { props.setEnabled(item, !item.enabled); } }));
-            case ListItemType.Separator:
-                return (React.createElement("div", { key: itemIndex.toString(), className: "ListPicker-separator" }));
-            case ListItemType.Container:
-                if (item.children.length !== 0) {
-                    return (React.createElement(ExpandableSection, { key: itemIndex.toString(), title: item.name, className: "ListPickerInnerContainer", expanded: expandSingleSection() },
-                        React.createElement(GroupColumn, null, item.children.map(listItemToElement))));
-                }
-                else {
-                    return (React.createElement("div", { key: itemIndex.toString() }));
-                }
-            // istanbul ignore next
-            default:
-                return (React.createElement("div", { key: itemIndex.toString() }));
-        }
-    };
-    return (React.createElement(Panel, { className: "ListPickerContainer" },
-        React.createElement(Title, null, props.title),
-        React.createElement(Columns, null,
-            React.createElement(GroupColumn, { className: "ListPicker-column" }, props.items.map(listItemToElement)))));
-}
-/**
- * List picker toolbar popup item.
- * Used to provide an expandable list of items to enable/disable items.
- * @beta
- */
-function ListPickerPopupItem(props) {
-    const icon = props.iconSpec ? ( /* istanbul ignore next */typeof props.iconSpec === "string" ? React.createElement(Icon, { iconSpec: props.iconSpec }) :
-        React.createElement("i", { className: "icon uifw-item-svg-icon" }, props.iconSpec)) : React.createElement(Icon, { iconSpec: "icon-list" });
-    return (React.createElement(ToolbarDragInteractionContext.Consumer, null, (isEnabled) => {
-        return React.createElement(PopupItem, { hideIndicator: isEnabled, icon: icon, title: props.title, panel: getListPanel(props) });
-    }));
-}
-/**
- * List Picker that lets the user pick from a list of items to enable/disable
- * It also provides options to enable all, disable all and invert selection
- * @beta
- */
-export class ListPicker extends React.Component {
-    /** Creates a ListPicker */
-    constructor(props) {
-        super(props);
-        // Handle enabling/disabling the items
-        // This will call the this.props.setEnabled function to provide the parent with a chance to process it
-        this._setEnabled = (item, enabled) => {
-            if (this.isSpecialItem(item)) {
-                switch (item.key) {
-                    case ListPicker.Key_All: {
-                        // istanbul ignore else
-                        if (this.props.enableAllFunc)
-                            this.props.enableAllFunc();
-                        return;
-                    }
-                    case ListPicker.Key_None: {
-                        // istanbul ignore else
-                        if (this.props.disableAllFunc)
-                            this.props.disableAllFunc();
-                        return;
-                    }
-                    case ListPicker.Key_Invert: {
-                        // istanbul ignore else
-                        if (this.props.invertFunc)
-                            this.props.invertFunc();
-                        return;
-                    }
-                }
-            }
-            // Call on parent to do processing of the item
-            this.props.setEnabled(item, enabled);
-        };
-    }
-    static get Key_All() { return -3; }
-    static get Key_None() { return -2; }
-    static get Key_Invert() { return -1; }
-    static get Key_Separator() { return -4; }
-    // Creates an array of items containing the separator and special requests (all, none, invert)
-    createItems(items) {
-        const newItems = [];
-        // Create special buttons (All/None/Invert)
-        if (this.props.enableAllFunc) {
-            let allEnabled = true;
-            items.map((item) => { allEnabled = allEnabled && item.enabled; });
-            newItems.push({ key: ListPicker.Key_All, name: UiFramework.translate("pickerButtons.all"), enabled: allEnabled, type: ListItemType.Item });
-        }
-        if (this.props.disableAllFunc) {
-            let allDisabled = false;
-            items.map((item) => { allDisabled = allDisabled || item.enabled; });
-            newItems.push({ key: ListPicker.Key_None, name: UiFramework.translate("pickerButtons.none"), enabled: !allDisabled, type: ListItemType.Item });
-        }
-        if (this.props.invertFunc) {
-            newItems.push({ key: ListPicker.Key_Invert, name: UiFramework.translate("pickerButtons.invert"), enabled: false, type: ListItemType.Item });
-        }
-        if (this.props.enableAllFunc || this.props.disableAllFunc || this.props.invertFunc) {
-            newItems.push({ key: ListPicker.Key_Separator, name: UiFramework.translate("pickerButtons.separator"), enabled: false, type: ListItemType.Separator });
-        }
-        // Push items
-        items.map((item) => { newItems.push(item); });
-        return newItems;
-    }
-    /**
-     * Checks if item is a special item.
-     * @param item Item to check
-     */
-    isSpecialItem(item) {
-        return item.key === ListPicker.Key_All || item.key === ListPicker.Key_Invert || item.key === ListPicker.Key_None || item.type !== ListItemType.Item || item.key === ListPicker.Key_Separator;
-    }
-    /** Renders ListPicker */
-    render() {
-        return (React.createElement(ListPickerPopupItem, { ...this.props, title: this.props.title, setEnabled: this._setEnabled, onExpanded: this.props.onExpanded, items: this.createItems(this.props.items), iconSpec: this.props.iconSpec }));
-    }
-}
+/*---------------------------------------------------------------------------------------------
+* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+* See LICENSE.md in the project root for license terms and full copyright notice.
+*--------------------------------------------------------------------------------------------*/
+/** @packageDocumentation
+ * @module Picker
+ */
+import "./ListPicker.scss";
+import classnames from "classnames";
+import * as React from "react";
+import { Columns, GroupColumn, Panel, PopupItem, Title } from "@itwin/components-react";
+import { Icon, SearchBox } from "@itwin/core-react";
+import { ToolbarDragInteractionContext } from "../toolbar/DragInteraction";
+import { UiFramework } from "../UiFramework";
+import { SvgChevronDown, SvgChevronRight, SvgList } from "@itwin/itwinui-icons-react";
+/** Enum for the list picker item type
+ * @beta
+ */
+export var ListItemType;
+(function (ListItemType) {
+    ListItemType[ListItemType["Item"] = 0] = "Item";
+    ListItemType[ListItemType["Separator"] = 1] = "Separator";
+    ListItemType[ListItemType["Container"] = 2] = "Container";
+})(ListItemType || (ListItemType = {}));
+/** List Picker Item React component
+ * @beta
+ */
+export class ListPickerItem extends React.PureComponent {
+    /** Renders ListPickerItem */
+    render() {
+        const itemClassName = classnames("ListPicker-item", this.props.isActive && "is-active", this.props.isFocused && "is-focused", this.props.className);
+        // TODO - if cut off, show a title
+        const title = (this.props.label && this.props.label.length > 25) ? this.props.label : undefined;
+        return (
+        // eslint-disable-next-line jsx-a11y/click-events-have-key-events
+        React.createElement("div", { className: itemClassName, onClick: this.props.onClick, role: "button", tabIndex: -1 },
+            React.createElement("div", { className: "label", title: title }, this.props.label)));
+    }
+}
+/** Expandable Section React component
+ * @beta
+ */
+export class ExpandableSection extends React.PureComponent {
+    /** Creates an ExpandableSection */
+    constructor(props) {
+        super(props);
+        this._onClick = () => {
+            this.setState((prevState) => ({ expanded: !prevState.expanded }));
+        };
+        this.state = { expanded: !!this.props.expanded };
+    }
+    /** Renders ExpandableSection */
+    render() {
+        const className = classnames("nz-toolbar-item-expandable-group-group", this.props.className);
+        const icon = this.state.expanded ? React.createElement(Icon, { iconSpec: React.createElement(SvgChevronDown, null) }) : React.createElement(Icon, { iconSpec: React.createElement(SvgChevronRight, null) });
+        return (React.createElement(Panel, { className: className, style: this.props.style, key: this.props.title },
+            React.createElement("div", { onClick: this._onClick, className: this.state.expanded ? "ListPickerInnerContainer-header-expanded" : "ListPickerInnerContainer-header", role: "button", tabIndex: -1, "aria-expanded": this.state.expanded },
+                React.createElement("div", { className: "ListPickerInnerContainer-header-content" },
+                    React.createElement("div", { className: "ListPickerInnerContainer-expander" }, icon),
+                    React.createElement("div", { className: "ListPickerInnerContainer-title" }, this.props.title))),
+            this.state.expanded ?
+                React.createElement(GroupColumn, null, this.props.children) : React.createElement("div", null)));
+    }
+}
+/** @beta */
+export function getListPanel(props) {
+    const expandSingleSection = () => {
+        const populatedContainers = props.items.filter((item) => {
+            return (item.type === ListItemType.Container && item.children.length !== 0);
+        });
+        return populatedContainers.length === 1;
+    };
+    const listItemToElement = (item, itemIndex) => {
+        switch (item.type) {
+            case ListItemType.Item:
+                return (React.createElement(ListPickerItem, { ...props, key: itemIndex.toString(), label: item.name, isActive: item.enabled, onClick: 
+                    // istanbul ignore next
+                    () => { props.setEnabled(item, !item.enabled); } }));
+            case ListItemType.Separator:
+                return (React.createElement("div", { key: itemIndex.toString(), className: "ListPicker-separator" }));
+            case ListItemType.Container:
+                if (item.children.length !== 0) {
+                    return (React.createElement(ExpandableSection, { key: itemIndex.toString(), title: item.name, className: "ListPickerInnerContainer", expanded: expandSingleSection() },
+                        React.createElement(GroupColumn, null, item.children.map(listItemToElement))));
+                }
+                else {
+                    return (React.createElement("div", { key: itemIndex.toString() }));
+                }
+            // istanbul ignore next
+            default:
+                return (React.createElement("div", { key: itemIndex.toString() }));
+        }
+    };
+    return (React.createElement(Panel, { className: "ListPickerContainer" },
+        React.createElement(Title, null, props.title),
+        props.searchBox && props.onSearchValueChange &&
+            React.createElement(SearchBox, { className: "ListPickerSearchBox", onValueChanged: props.onSearchValueChange }),
+        React.createElement(Columns, null,
+            React.createElement(GroupColumn, { className: "ListPicker-column" }, props.items.map(listItemToElement)))));
+}
+/**
+ * List picker toolbar popup item.
+ * Used to provide an expandable list of items to enable/disable items.
+ * @beta
+ */
+function ListPickerPopupItem(props) {
+    const icon = props.iconSpec ? ( /* istanbul ignore next */typeof props.iconSpec === "string" ? React.createElement(Icon, { iconSpec: props.iconSpec }) :
+        React.createElement("i", { className: "icon uifw-item-svg-icon" }, props.iconSpec)) : React.createElement(Icon, { iconSpec: React.createElement(SvgList, null) });
+    return (React.createElement(ToolbarDragInteractionContext.Consumer, null, (isEnabled) => {
+        return (props.panelOnly === true ? getListPanel(props) : React.createElement(PopupItem, { hideIndicator: isEnabled, icon: icon, title: props.title, panel: getListPanel(props) }));
+    }));
+}
+/**
+ * List Picker that lets the user pick from a list of items to enable/disable
+ * It also provides options to enable all, disable all and invert selection
+ * @beta
+ */
+export class ListPicker extends React.Component {
+    static get Key_All() { return -3; }
+    static get Key_None() { return -2; }
+    static get Key_Invert() { return -1; }
+    static get Key_Separator() { return -4; }
+    /** Creates a ListPicker */
+    constructor(props) {
+        super(props);
+        // Handle enabling/disabling the items
+        // This will call the this.props.setEnabled function to provide the parent with a chance to process it
+        this._setEnabled = (item, enabled) => {
+            if (this.isSpecialItem(item)) {
+                switch (item.key) {
+                    case ListPicker.Key_All: {
+                        // istanbul ignore else
+                        if (this.props.enableAllFunc)
+                            this.props.enableAllFunc();
+                        return;
+                    }
+                    case ListPicker.Key_None: {
+                        // istanbul ignore else
+                        if (this.props.disableAllFunc)
+                            this.props.disableAllFunc();
+                        return;
+                    }
+                    case ListPicker.Key_Invert: {
+                        // istanbul ignore else
+                        if (this.props.invertFunc)
+                            this.props.invertFunc();
+                        return;
+                    }
+                }
+            }
+            // Call on parent to do processing of the item
+            this.props.setEnabled(item, enabled);
+        };
+    }
+    // Creates an array of items containing the separator and special requests (all, none, invert)
+    createItems(items) {
+        const newItems = [];
+        // Create special buttons (All/None/Invert)
+        if (this.props.enableAllFunc) {
+            let allEnabled = true;
+            items.map((item) => { allEnabled = allEnabled && item.enabled; });
+            newItems.push({ key: ListPicker.Key_All, name: UiFramework.translate("pickerButtons.all"), enabled: allEnabled, type: ListItemType.Item });
+        }
+        if (this.props.disableAllFunc) {
+            let allDisabled = false;
+            items.map((item) => { allDisabled = allDisabled || item.enabled; });
+            newItems.push({ key: ListPicker.Key_None, name: UiFramework.translate("pickerButtons.none"), enabled: !allDisabled, type: ListItemType.Item });
+        }
+        if (this.props.invertFunc) {
+            newItems.push({ key: ListPicker.Key_Invert, name: UiFramework.translate("pickerButtons.invert"), enabled: false, type: ListItemType.Item });
+        }
+        if (this.props.enableAllFunc || this.props.disableAllFunc || this.props.invertFunc) {
+            newItems.push({ key: ListPicker.Key_Separator, name: UiFramework.translate("pickerButtons.separator"), enabled: false, type: ListItemType.Separator });
+        }
+        // Push items
+        items.map((item) => { newItems.push(item); });
+        return newItems;
+    }
+    /**
+     * Checks if item is a special item.
+     * @param item Item to check
+     */
+    isSpecialItem(item) {
+        return item.key === ListPicker.Key_All || item.key === ListPicker.Key_Invert || item.key === ListPicker.Key_None || item.type !== ListItemType.Item || item.key === ListPicker.Key_Separator;
+    }
+    /** Renders ListPicker */
+    render() {
+        return (React.createElement(ListPickerPopupItem, { ...this.props, title: this.props.title, setEnabled: this._setEnabled, onExpanded: this.props.onExpanded, items: this.createItems(this.props.items), iconSpec: this.props.iconSpec }));
+    }
+}
 //# sourceMappingURL=ListPicker.js.map

package/lib/esm/appui-react/pickers/ListPicker.js.map

@@ -1 +1 @@
-{"version":3,"file":"ListPicker.js","sourceRoot":"","sources":["../../../../src/appui-react/pickers/ListPicker.tsx"],"names":[],"mappings":"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","sourcesContent":["/*---------------------------------------------------------------------------------------------\r\n* Copyright (c) Bentley Systems, Incorporated. All rights reserved.\r\n* See LICENSE.md in the project root for license terms and full copyright notice.\r\n*--------------------------------------------------------------------------------------------*/\r\n/** @packageDocumentation\r\n * @module Picker\r\n */\r\n\r\nimport \"./ListPicker.scss\";\r\nimport classnames from \"classnames\";\r\nimport * as React from \"react\";\r\nimport { Columns, GroupColumn, Panel, PopupItem, Title } from \"@itwin/components-react\";\r\nimport { CommonProps, Icon, SizeProps } from \"@itwin/core-react\";\r\nimport { ToolbarDragInteractionContext } from \"../toolbar/DragInteraction\";\r\nimport { UiFramework } from \"../UiFramework\";\r\n\r\n/** Enum for the list picker item type\r\n * @beta\r\n */\r\nexport enum ListItemType {\r\n  Item = 0, // eslint-disable-line @typescript-eslint/no-shadow\r\n  Separator = 1,\r\n  Container = 2,\r\n}\r\n\r\n/** List picker item\r\n * @beta\r\n */\r\nexport interface ListItem {\r\n  [key: string]: any;\r\n  id?: string;\r\n  name?: string;\r\n  enabled: boolean;\r\n  type?: ListItemType;\r\n  children?: ListItem[];\r\n}\r\n\r\n/** Properties for the [[ListPicker]] component\r\n * @beta\r\n */\r\nexport interface ListPickerProps {\r\n  title: string;\r\n  items: ListItem[];\r\n  iconSpec?: string | React.ReactNode;\r\n  setEnabled: (item: ListItem, enabled: boolean) => any;\r\n  onExpanded?: (expand: boolean) => void;\r\n  onSizeKnown?: (size: SizeProps) => void;\r\n}\r\n\r\n/** Properties for the [[ListPickerItem]] component\r\n * @beta\r\n */\r\nexport interface ListPickerItemProps extends CommonProps {\r\n  key: any;\r\n  isActive?: boolean;\r\n  isFocused?: boolean;\r\n  onClick?: () => void;\r\n  label?: string;\r\n}\r\n\r\n/** List Picker Item React component\r\n * @beta\r\n */\r\nexport class ListPickerItem extends React.PureComponent<ListPickerItemProps> {\r\n  /** Renders ListPickerItem */\r\n  public override render() {\r\n    const itemClassName = classnames(\r\n      \"ListPicker-item\",\r\n      this.props.isActive && \"is-active\",\r\n      this.props.isFocused && \"is-focused\",\r\n      this.props.className,\r\n    );\r\n    // TODO - if cut off, show a title\r\n    const title: string | undefined = (this.props.label && this.props.label.length > 25) ? this.props.label : undefined;\r\n\r\n    return (\r\n      // eslint-disable-next-line jsx-a11y/click-events-have-key-events\r\n      <div className={itemClassName} onClick={this.props.onClick} role=\"button\" tabIndex={-1}>\r\n        <div className=\"label\" title={title}>\r\n          {this.props.label}\r\n        </div>\r\n      </div>\r\n    );\r\n  }\r\n}\r\n\r\n/** Properties for the [[ExpandableSection]] component\r\n * @beta\r\n */\r\nexport interface ExpandableSectionProps extends CommonProps {\r\n  title?: string;\r\n  expanded?: boolean;\r\n  /** Content */\r\n  children?: React.ReactNode;\r\n}\r\n\r\n/** State for the [[ExpandableSection]] component\r\n * @internal\r\n */\r\ninterface ExpandableSectionState {\r\n  expanded: boolean;\r\n}\r\n\r\n/** Expandable Section React component used by [[ListPickerBase]]\r\n * @beta\r\n */\r\nexport class ExpandableSection extends React.PureComponent<ExpandableSectionProps, ExpandableSectionState> {\r\n  /** Creates an ExpandableSection */\r\n  constructor(props: ExpandableSectionProps) {\r\n    super(props);\r\n    this.state = { expanded: !!this.props.expanded };\r\n  }\r\n\r\n  private _onClick = () => {\r\n    this.setState((prevState) => ({ expanded: !prevState.expanded }));\r\n  };\r\n\r\n  /** Renders ExpandableSection */\r\n  public override render() {\r\n    const className = classnames(\r\n      \"nz-toolbar-item-expandable-group-group\",\r\n      this.props.className,\r\n    );\r\n\r\n    const icon = this.state.expanded ? <i className=\"icon icon-chevron-down\" /> : <i className=\"icon icon-chevron-right\" />;\r\n\r\n    return (\r\n      <Panel className={className} style={this.props.style} key={this.props.title}>\r\n        {/* eslint-disable-next-line jsx-a11y/click-events-have-key-events */}\r\n        <div onClick={this._onClick}\r\n          className={this.state.expanded ? \"ListPickerInnerContainer-header-expanded\" : \"ListPickerInnerContainer-header\"}\r\n          role=\"button\" tabIndex={-1} aria-expanded={this.state.expanded}\r\n        >\r\n          <div className=\"ListPickerInnerContainer-header-content\">\r\n            <div className=\"ListPickerInnerContainer-expander\">{icon}</div>\r\n            <div className=\"ListPickerInnerContainer-title\">{this.props.title}</div>\r\n          </div>\r\n        </div>\r\n        {this.state.expanded ?\r\n          <GroupColumn>\r\n            {this.props.children}\r\n          </GroupColumn> : <div />\r\n        }\r\n      </Panel>\r\n    );\r\n  }\r\n}\r\n\r\n/** @beta */\r\nexport function getListPanel(props: ListPickerProps): React.ReactNode {\r\n  const expandSingleSection = (): boolean => {\r\n    const populatedContainers = props.items.filter((item: ListItem) => {\r\n      return (item.type === ListItemType.Container && item.children!.length !== 0);\r\n    });\r\n    return populatedContainers.length === 1;\r\n  };\r\n\r\n  const listItemToElement = (item: ListItem, itemIndex: number) => {\r\n    switch (item.type) {\r\n      case ListItemType.Item:\r\n        return (\r\n          <ListPickerItem\r\n            {...props}\r\n            key={itemIndex.toString()}\r\n            label={item.name}\r\n            isActive={item.enabled}\r\n            onClick={\r\n              // istanbul ignore next\r\n              () => { props.setEnabled(item, !item.enabled); }\r\n            }\r\n          />\r\n        );\r\n      case ListItemType.Separator:\r\n        return (\r\n          <div key={itemIndex.toString()} className=\"ListPicker-separator\" />\r\n        );\r\n      case ListItemType.Container:\r\n        if (item.children!.length !== 0) {\r\n          return (\r\n            <ExpandableSection\r\n              key={itemIndex.toString()}\r\n              title={item.name}\r\n              className=\"ListPickerInnerContainer\"\r\n              expanded={expandSingleSection()}\r\n            >\r\n              <GroupColumn>\r\n                {item.children!.map(listItemToElement)}\r\n              </GroupColumn>\r\n            </ExpandableSection>\r\n          );\r\n        } else {\r\n          return (<div key={itemIndex.toString()} />);\r\n        }\r\n      // istanbul ignore next\r\n      default:\r\n        return (<div key={itemIndex.toString()} />);\r\n    }\r\n  };\r\n\r\n  return (\r\n    <Panel className=\"ListPickerContainer\">\r\n      <Title>\r\n        {props.title}\r\n      </Title>\r\n      <Columns>\r\n        <GroupColumn className=\"ListPicker-column\">\r\n          {props.items.map(listItemToElement)}\r\n        </GroupColumn>\r\n      </Columns>\r\n    </Panel>\r\n  );\r\n}\r\n\r\n/**\r\n * List picker toolbar popup item.\r\n * Used to provide an expandable list of items to enable/disable items.\r\n * @beta\r\n */\r\nfunction ListPickerPopupItem(props: ListPickerProps) {\r\n  const icon = props.iconSpec ? (/* istanbul ignore next */ typeof props.iconSpec === \"string\" ? <Icon iconSpec={props.iconSpec} /> :\r\n    <i className=\"icon uifw-item-svg-icon\">{props.iconSpec}</i>) : <Icon iconSpec=\"icon-list\" />;\r\n\r\n  return (\r\n    <ToolbarDragInteractionContext.Consumer>\r\n      {(isEnabled) => {\r\n        return <PopupItem\r\n          hideIndicator={isEnabled}\r\n          icon={icon}\r\n          title={props.title}\r\n          panel={getListPanel(props)}\r\n        />;\r\n      }}\r\n    </ToolbarDragInteractionContext.Consumer>\r\n  );\r\n}\r\n\r\n/** Properties for the [[ListPicker]] component\r\n * @beta\r\n */\r\nexport interface ListPickerPropsExtended extends ListPickerProps {\r\n  enableAllFunc?: () => void;\r\n  disableAllFunc?: () => void;\r\n  invertFunc?: () => void;\r\n}\r\n\r\n/**\r\n * List Picker that lets the user pick from a list of items to enable/disable\r\n * It also provides options to enable all, disable all and invert selection\r\n * @beta\r\n */\r\nexport class ListPicker extends React.Component<ListPickerPropsExtended> {\r\n  public static get Key_All() { return -3; }\r\n  public static get Key_None() { return -2; }\r\n  public static get Key_Invert() { return -1; }\r\n  public static get Key_Separator() { return -4; }\r\n\r\n  /** Creates a ListPicker */\r\n  constructor(props: ListPickerPropsExtended) {\r\n    super(props);\r\n  }\r\n\r\n  // Creates an array of items containing the separator and special requests (all, none, invert)\r\n  private createItems(items: ListItem[]): ListItem[] {\r\n    const newItems: ListItem[] = [];\r\n\r\n    // Create special buttons (All/None/Invert)\r\n    if (this.props.enableAllFunc) {\r\n      let allEnabled = true;\r\n      items.map((item: ListItem) => { allEnabled = allEnabled && item.enabled; });\r\n      newItems.push({ key: ListPicker.Key_All, name: UiFramework.translate(\"pickerButtons.all\"), enabled: allEnabled, type: ListItemType.Item });\r\n    }\r\n    if (this.props.disableAllFunc) {\r\n      let allDisabled = false;\r\n      items.map((item: ListItem) => { allDisabled = allDisabled || item.enabled; });\r\n      newItems.push({ key: ListPicker.Key_None, name: UiFramework.translate(\"pickerButtons.none\"), enabled: !allDisabled, type: ListItemType.Item });\r\n    }\r\n    if (this.props.invertFunc) {\r\n      newItems.push({ key: ListPicker.Key_Invert, name: UiFramework.translate(\"pickerButtons.invert\"), enabled: false, type: ListItemType.Item });\r\n    }\r\n    if (this.props.enableAllFunc || this.props.disableAllFunc || this.props.invertFunc) {\r\n      newItems.push({ key: ListPicker.Key_Separator, name: UiFramework.translate(\"pickerButtons.separator\"), enabled: false, type: ListItemType.Separator });\r\n    }\r\n\r\n    // Push items\r\n    items.map((item) => { newItems.push(item); });\r\n    return newItems;\r\n  }\r\n\r\n  /**\r\n   * Checks if item is a special item.\r\n   * @param item Item to check\r\n   */\r\n  public isSpecialItem(item: ListItem) {\r\n    return item.key === ListPicker.Key_All || item.key === ListPicker.Key_Invert || item.key === ListPicker.Key_None || item.type !== ListItemType.Item || item.key === ListPicker.Key_Separator;\r\n  }\r\n\r\n  // Handle enabling/disabling the items\r\n  // This will call the this.props.setEnabled function to provide the parent with a chance to process it\r\n  private _setEnabled = (item: ListItem, enabled: boolean) => {\r\n    if (this.isSpecialItem(item)) {\r\n      switch (item.key) {\r\n        case ListPicker.Key_All: {\r\n          // istanbul ignore else\r\n          if (this.props.enableAllFunc)\r\n            this.props.enableAllFunc();\r\n          return;\r\n        }\r\n        case ListPicker.Key_None: {\r\n          // istanbul ignore else\r\n          if (this.props.disableAllFunc)\r\n            this.props.disableAllFunc();\r\n          return;\r\n        }\r\n        case ListPicker.Key_Invert: {\r\n          // istanbul ignore else\r\n          if (this.props.invertFunc)\r\n            this.props.invertFunc();\r\n          return;\r\n        }\r\n      }\r\n    }\r\n\r\n    // Call on parent to do processing of the item\r\n    this.props.setEnabled(item, enabled);\r\n  };\r\n\r\n  /** Renders ListPicker */\r\n  public override render() {\r\n    return (\r\n      <ListPickerPopupItem\r\n        {...this.props}\r\n        title={this.props.title}\r\n        setEnabled={this._setEnabled}\r\n        onExpanded={this.props.onExpanded}\r\n        items={this.createItems(this.props.items)}\r\n        iconSpec={this.props.iconSpec}\r\n      />\r\n    );\r\n  }\r\n}\r\n"]}
+{"version":3,"file":"ListPicker.js","sourceRoot":"","sources":["../../../../src/appui-react/pickers/ListPicker.tsx"],"names":[],"mappings":"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","sourcesContent":["/*---------------------------------------------------------------------------------------------\r\n* Copyright (c) Bentley Systems, Incorporated. All rights reserved.\r\n* See LICENSE.md in the project root for license terms and full copyright notice.\r\n*--------------------------------------------------------------------------------------------*/\r\n/** @packageDocumentation\r\n * @module Picker\r\n */\r\n\r\nimport \"./ListPicker.scss\";\r\nimport classnames from \"classnames\";\r\nimport * as React from \"react\";\r\nimport { Columns, GroupColumn, Panel, PopupItem, Title } from \"@itwin/components-react\";\r\nimport { CommonProps, Icon, SearchBox, SizeProps } from \"@itwin/core-react\";\r\nimport { ToolbarDragInteractionContext } from \"../toolbar/DragInteraction\";\r\nimport { UiFramework } from \"../UiFramework\";\r\nimport { SvgChevronDown, SvgChevronRight, SvgList } from \"@itwin/itwinui-icons-react\";\r\n\r\n/** Enum for the list picker item type\r\n * @beta\r\n */\r\nexport enum ListItemType {\r\n  Item = 0, // eslint-disable-line @typescript-eslint/no-shadow\r\n  Separator = 1,\r\n  Container = 2,\r\n}\r\n\r\n/** List picker item\r\n * @beta\r\n */\r\nexport interface ListItem {\r\n  [key: string]: any;\r\n  id?: string;\r\n  name?: string;\r\n  enabled: boolean;\r\n  type?: ListItemType;\r\n  children?: ListItem[];\r\n}\r\n\r\n/** Properties for the [[ListPicker]] component\r\n * @beta\r\n */\r\nexport interface ListPickerProps {\r\n  title: string;\r\n  items: ListItem[];\r\n  iconSpec?: string | React.ReactNode;\r\n  setEnabled: (item: ListItem, enabled: boolean) => any;\r\n  onExpanded?: (expand: boolean) => void;\r\n  onSizeKnown?: (size: SizeProps) => void;\r\n  searchBox?: boolean;\r\n  onSearchValueChange?: (search: string) => void;\r\n  panelOnly?: boolean;\r\n}\r\n\r\n/** Properties for the [[ListPickerItem]] component\r\n * @beta\r\n */\r\nexport interface ListPickerItemProps extends CommonProps {\r\n  key: any;\r\n  isActive?: boolean;\r\n  isFocused?: boolean;\r\n  onClick?: () => void;\r\n  label?: string;\r\n}\r\n\r\n/** List Picker Item React component\r\n * @beta\r\n */\r\nexport class ListPickerItem extends React.PureComponent<ListPickerItemProps> {\r\n  /** Renders ListPickerItem */\r\n  public override render() {\r\n    const itemClassName = classnames(\r\n      \"ListPicker-item\",\r\n      this.props.isActive && \"is-active\",\r\n      this.props.isFocused && \"is-focused\",\r\n      this.props.className,\r\n    );\r\n    // TODO - if cut off, show a title\r\n    const title: string | undefined = (this.props.label && this.props.label.length > 25) ? this.props.label : undefined;\r\n\r\n    return (\r\n      // eslint-disable-next-line jsx-a11y/click-events-have-key-events\r\n      <div className={itemClassName} onClick={this.props.onClick} role=\"button\" tabIndex={-1}>\r\n        <div className=\"label\" title={title}>\r\n          {this.props.label}\r\n        </div>\r\n      </div>\r\n    );\r\n  }\r\n}\r\n\r\n/** Properties for the [[ExpandableSection]] component\r\n * @beta\r\n */\r\nexport interface ExpandableSectionProps extends CommonProps {\r\n  title?: string;\r\n  expanded?: boolean;\r\n  /** Content */\r\n  children?: React.ReactNode;\r\n}\r\n\r\n/** State for the [[ExpandableSection]] component\r\n * @internal\r\n */\r\ninterface ExpandableSectionState {\r\n  expanded: boolean;\r\n}\r\n\r\n/** Expandable Section React component\r\n * @beta\r\n */\r\nexport class ExpandableSection extends React.PureComponent<ExpandableSectionProps, ExpandableSectionState> {\r\n  /** Creates an ExpandableSection */\r\n  constructor(props: ExpandableSectionProps) {\r\n    super(props);\r\n    this.state = { expanded: !!this.props.expanded };\r\n  }\r\n\r\n  private _onClick = () => {\r\n    this.setState((prevState) => ({ expanded: !prevState.expanded }));\r\n  };\r\n\r\n  /** Renders ExpandableSection */\r\n  public override render() {\r\n    const className = classnames(\r\n      \"nz-toolbar-item-expandable-group-group\",\r\n      this.props.className,\r\n    );\r\n\r\n    const icon = this.state.expanded ? <Icon iconSpec={<SvgChevronDown />} /> : <Icon iconSpec={<SvgChevronRight />} />;\r\n\r\n    return (\r\n      <Panel className={className} style={this.props.style} key={this.props.title}>\r\n        {/* eslint-disable-next-line jsx-a11y/click-events-have-key-events */}\r\n        <div onClick={this._onClick}\r\n          className={this.state.expanded ? \"ListPickerInnerContainer-header-expanded\" : \"ListPickerInnerContainer-header\"}\r\n          role=\"button\" tabIndex={-1} aria-expanded={this.state.expanded}\r\n        >\r\n          <div className=\"ListPickerInnerContainer-header-content\">\r\n            <div className=\"ListPickerInnerContainer-expander\">{icon}</div>\r\n            <div className=\"ListPickerInnerContainer-title\">{this.props.title}</div>\r\n          </div>\r\n        </div>\r\n        {this.state.expanded ?\r\n          <GroupColumn>\r\n            {this.props.children}\r\n          </GroupColumn> : <div />\r\n        }\r\n      </Panel>\r\n    );\r\n  }\r\n}\r\n\r\n/** @beta */\r\nexport function getListPanel(props: ListPickerProps): React.ReactNode {\r\n  const expandSingleSection = (): boolean => {\r\n    const populatedContainers = props.items.filter((item: ListItem) => {\r\n      return (item.type === ListItemType.Container && item.children!.length !== 0);\r\n    });\r\n    return populatedContainers.length === 1;\r\n  };\r\n\r\n  const listItemToElement = (item: ListItem, itemIndex: number) => {\r\n    switch (item.type) {\r\n      case ListItemType.Item:\r\n        return (\r\n          <ListPickerItem\r\n            {...props}\r\n            key={itemIndex.toString()}\r\n            label={item.name}\r\n            isActive={item.enabled}\r\n            onClick={\r\n              // istanbul ignore next\r\n              () => { props.setEnabled(item, !item.enabled); }\r\n            }\r\n          />\r\n        );\r\n      case ListItemType.Separator:\r\n        return (\r\n          <div key={itemIndex.toString()} className=\"ListPicker-separator\" />\r\n        );\r\n      case ListItemType.Container:\r\n        if (item.children!.length !== 0) {\r\n          return (\r\n            <ExpandableSection\r\n              key={itemIndex.toString()}\r\n              title={item.name}\r\n              className=\"ListPickerInnerContainer\"\r\n              expanded={expandSingleSection()}\r\n            >\r\n              <GroupColumn>\r\n                {item.children!.map(listItemToElement)}\r\n              </GroupColumn>\r\n            </ExpandableSection>\r\n          );\r\n        } else {\r\n          return (<div key={itemIndex.toString()} />);\r\n        }\r\n      // istanbul ignore next\r\n      default:\r\n        return (<div key={itemIndex.toString()} />);\r\n    }\r\n  };\r\n\r\n  return (\r\n    <Panel className=\"ListPickerContainer\">\r\n      <Title>\r\n        {props.title}\r\n      </Title>\r\n      {\r\n        props.searchBox && props.onSearchValueChange &&\r\n          <SearchBox className=\"ListPickerSearchBox\" onValueChanged={props.onSearchValueChange}/>\r\n      }\r\n      <Columns>\r\n        <GroupColumn className=\"ListPicker-column\">\r\n          {props.items.map(listItemToElement)}\r\n        </GroupColumn>\r\n      </Columns>\r\n    </Panel>\r\n  );\r\n}\r\n\r\n/**\r\n * List picker toolbar popup item.\r\n * Used to provide an expandable list of items to enable/disable items.\r\n * @beta\r\n */\r\nfunction ListPickerPopupItem(props: ListPickerProps) {\r\n  const icon = props.iconSpec ? (/* istanbul ignore next */ typeof props.iconSpec === \"string\" ? <Icon iconSpec={props.iconSpec} /> :\r\n    <i className=\"icon uifw-item-svg-icon\">{props.iconSpec}</i>) : <Icon iconSpec={<SvgList />} />;\r\n\r\n  return (\r\n    <ToolbarDragInteractionContext.Consumer>\r\n      {(isEnabled) => {\r\n        return (props.panelOnly === true ? getListPanel(props) : <PopupItem\r\n          hideIndicator={isEnabled}\r\n          icon={icon}\r\n          title={props.title}\r\n          panel={getListPanel(props)}\r\n        />);\r\n      }}\r\n    </ToolbarDragInteractionContext.Consumer>\r\n  );\r\n}\r\n\r\n/** Properties for the [[ListPicker]] component\r\n * @beta\r\n */\r\nexport interface ListPickerPropsExtended extends ListPickerProps {\r\n  enableAllFunc?: () => void;\r\n  disableAllFunc?: () => void;\r\n  invertFunc?: () => void;\r\n}\r\n\r\n/**\r\n * List Picker that lets the user pick from a list of items to enable/disable\r\n * It also provides options to enable all, disable all and invert selection\r\n * @beta\r\n */\r\nexport class ListPicker extends React.Component<ListPickerPropsExtended> {\r\n  public static get Key_All() { return -3; }\r\n  public static get Key_None() { return -2; }\r\n  public static get Key_Invert() { return -1; }\r\n  public static get Key_Separator() { return -4; }\r\n\r\n  /** Creates a ListPicker */\r\n  constructor(props: ListPickerPropsExtended) {\r\n    super(props);\r\n  }\r\n\r\n  // Creates an array of items containing the separator and special requests (all, none, invert)\r\n  private createItems(items: ListItem[]): ListItem[] {\r\n    const newItems: ListItem[] = [];\r\n\r\n    // Create special buttons (All/None/Invert)\r\n    if (this.props.enableAllFunc) {\r\n      let allEnabled = true;\r\n      items.map((item: ListItem) => { allEnabled = allEnabled && item.enabled; });\r\n      newItems.push({ key: ListPicker.Key_All, name: UiFramework.translate(\"pickerButtons.all\"), enabled: allEnabled, type: ListItemType.Item });\r\n    }\r\n    if (this.props.disableAllFunc) {\r\n      let allDisabled = false;\r\n      items.map((item: ListItem) => { allDisabled = allDisabled || item.enabled; });\r\n      newItems.push({ key: ListPicker.Key_None, name: UiFramework.translate(\"pickerButtons.none\"), enabled: !allDisabled, type: ListItemType.Item });\r\n    }\r\n    if (this.props.invertFunc) {\r\n      newItems.push({ key: ListPicker.Key_Invert, name: UiFramework.translate(\"pickerButtons.invert\"), enabled: false, type: ListItemType.Item });\r\n    }\r\n    if (this.props.enableAllFunc || this.props.disableAllFunc || this.props.invertFunc) {\r\n      newItems.push({ key: ListPicker.Key_Separator, name: UiFramework.translate(\"pickerButtons.separator\"), enabled: false, type: ListItemType.Separator });\r\n    }\r\n\r\n    // Push items\r\n    items.map((item) => { newItems.push(item); });\r\n    return newItems;\r\n  }\r\n\r\n  /**\r\n   * Checks if item is a special item.\r\n   * @param item Item to check\r\n   */\r\n  public isSpecialItem(item: ListItem) {\r\n    return item.key === ListPicker.Key_All || item.key === ListPicker.Key_Invert || item.key === ListPicker.Key_None || item.type !== ListItemType.Item || item.key === ListPicker.Key_Separator;\r\n  }\r\n\r\n  // Handle enabling/disabling the items\r\n  // This will call the this.props.setEnabled function to provide the parent with a chance to process it\r\n  private _setEnabled = (item: ListItem, enabled: boolean) => {\r\n    if (this.isSpecialItem(item)) {\r\n      switch (item.key) {\r\n        case ListPicker.Key_All: {\r\n          // istanbul ignore else\r\n          if (this.props.enableAllFunc)\r\n            this.props.enableAllFunc();\r\n          return;\r\n        }\r\n        case ListPicker.Key_None: {\r\n          // istanbul ignore else\r\n          if (this.props.disableAllFunc)\r\n            this.props.disableAllFunc();\r\n          return;\r\n        }\r\n        case ListPicker.Key_Invert: {\r\n          // istanbul ignore else\r\n          if (this.props.invertFunc)\r\n            this.props.invertFunc();\r\n          return;\r\n        }\r\n      }\r\n    }\r\n\r\n    // Call on parent to do processing of the item\r\n    this.props.setEnabled(item, enabled);\r\n  };\r\n\r\n  /** Renders ListPicker */\r\n  public override render() {\r\n    return (\r\n      <ListPickerPopupItem\r\n        {...this.props}\r\n        title={this.props.title}\r\n        setEnabled={this._setEnabled}\r\n        onExpanded={this.props.onExpanded}\r\n        items={this.createItems(this.props.items)}\r\n        iconSpec={this.props.iconSpec}\r\n      />\r\n    );\r\n  }\r\n}\r\n"]}

package/lib/esm/appui-react/pickers/ListPicker.scss

@@ -12,7 +12,7 @@ $no-shadow: none;
 $shadow: drop-shadow(0 1px 0 $buic-text-color-reverse);
 $space-after-label: 16px;
 $space-before-label: 16px;
-$label-color: $buic-text-color;
+$label-color: var(--iui-color-text);
 $border-color: $buic-background-control-stroke;
 $item-height: 32px;
 
@@ -85,7 +85,7 @@ $item-height: 32px;
 }
 
 .ListPicker-item {
-  $label-color: $buic-text-color;
+  $label-color: var(--iui-color-text);
   $pressed-label-color: $buic-foreground-activehover;
   $hovered-label-color: $buic-foreground-primary-tone;
   $focused-label-color: $buic-foreground-primary-tone;
@@ -135,7 +135,7 @@ $item-height: 32px;
   }
 
   &:active {
-    background: $buic-row-selection;
+    background: var(--iui-color-background-hover);
     color: $pressed-label-color;
 
     > .icon,
@@ -187,7 +187,7 @@ $item-height: 32px;
 }
 
 .ListPickerWidget-item {
-  $label-color: $buic-text-color;
+  $label-color: var(--iui-color-text);
   $pressed-label-color: $buic-foreground-activehover;
   $hovered-label-color: $buic-foreground-primary;
   $focused-label-color: $buic-foreground-primary;
@@ -289,7 +289,7 @@ $item-height: 32px;
 
   white-space: nowrap;
   text-align: center;
-  color: $buic-text-color;
+  color: var(--iui-color-text);
   filter: drop-shadow(0 1px 0 $buic-text-color-reverse);
   margin-bottom: 9px;
   margin-left: $horizontal-margin;
@@ -297,3 +297,10 @@ $item-height: 32px;
 
   @include title;
 }
+
+.core-searchbox.ListPickerSearchBox {
+  width: inherit;
+  margin-left: 10px;
+  margin-right: 10px;
+  margin-bottom: 10px;
+}