@itwin/components-react 4.0.0-dev.2 → 4.0.0-dev.21

package/lib/esm/components-react/toolbar/groupPanel/_variables.scss

@@ -1,17 +1,17 @@
-/*---------------------------------------------------------------------------------------------
-* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
-* See LICENSE.md in the project root for license terms and full copyright notice.
-*--------------------------------------------------------------------------------------------*/
-@import "~@itwin/core-react/lib/cjs/core-react/style/themecolors";
-@import "~@itwin/core-react/lib/cjs/core-react/typography";
-@import "../variables";
-
-$panel-padding-left: 16px;
-$panel-padding-right: 8px;
-$panel-padding-top: $panel-padding-right;
-$panel-padding-bottom: 12px;
-$title-color: $buic-text-color;
-$back-arrow-thickness: 2px;
-$back-arrow-size-val: 6;
-$title-horizontal-margin: 20px;
+/*---------------------------------------------------------------------------------------------
+* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+* See LICENSE.md in the project root for license terms and full copyright notice.
+*--------------------------------------------------------------------------------------------*/
+@import "~@itwin/core-react/lib/cjs/core-react/style/themecolors";
+@import "~@itwin/core-react/lib/cjs/core-react/typography";
+@import "../variables";
+
+$panel-padding-left: 16px;
+$panel-padding-right: 8px;
+$panel-padding-top: $panel-padding-right;
+$panel-padding-bottom: 12px;
+$title-color: var(--iui-color-text);
+$back-arrow-thickness: 2px;
+$back-arrow-size-val: 6;
+$title-horizontal-margin: 20px;
 $title-horizontal-back-arrow-margin: 28px;

package/lib/esm/components-react/toolbar/groupPanel/tool/Expander.js.map

@@ -1 +1 @@
-{"version":3,"file":"Expander.js","sourceRoot":"","sources":["../../../../../../src/components-react/toolbar/groupPanel/tool/Expander.tsx"],"names":[],"mappings":"AAAA;;;+FAG+F;AAC/F;;GAEG;AAEH,OAAO,iBAAiB,CAAC;AACzB,OAAO,UAAU,MAAM,YAAY,CAAC;AACpC,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAE,SAAS,EAAkB,MAAM,QAAQ,CAAC;AAQnD;;GAEG;AACH,8CAA8C;AAC9C,MAAM,CAAC,MAAM,iBAAiB,GAAG,KAAK,CAAC,IAAI,CACzC,CAAC,KAA6B,EAAE,EAAE;IAChC,MAAM,EAAE,SAAS,EAAE,GAAG,UAAU,EAAE,GAAG,KAAK,CAAC;IAE3C,MAAM,iBAAiB,GAAG,UAAU,CAClC,wDAAwD,EACxD,SAAS,CAAC,CAAC;IAEb,OAAO,CACL,oBAAC,SAAS,IACR,SAAS,EAAE,iBAAiB,KACxB,UAAU;QACd,6BAAK,SAAS,EAAC,gCAAgC,GAAG,CACxC,CACb,CAAC;AACJ,CAAC,CAAC,CAAC","sourcesContent":["/*---------------------------------------------------------------------------------------------\n* Copyright (c) Bentley Systems, Incorporated. All rights reserved.\n* See LICENSE.md in the project root for license terms and full copyright notice.\n*--------------------------------------------------------------------------------------------*/\n/** @packageDocumentation\n * @module Toolbar\n */\n\nimport \"./Expander.scss\";\nimport classnames from \"classnames\";\nimport * as React from \"react\";\nimport { NoChildrenProps, Omit } from \"@itwin/core-react\";\nimport { GroupTool, GroupToolProps } from \"./Tool\";\n\n/** Properties of [[GroupToolExpander]] component.\n * @internal\n */\nexport interface GroupToolExpanderProps extends Omit<GroupToolProps, \"isActive\" | \"children\">, NoChildrenProps {\n}\n\n/** Expandable entry of tool group panel. Used in [[GroupColumn]] to select nested Groups.\n * @internal\n */\n// eslint-disable-next-line react/display-name\nexport const GroupToolExpander = React.memo<React.FC<GroupToolExpanderProps>>(\n  (props: GroupToolExpanderProps) => {\n    const { className, ...otherProps } = props;\n\n    const expanderClassName = classnames(\n      \"components-toolbar-item-expandable-group-tool-expander\",\n      className);\n\n    return (\n      <GroupTool\n        className={expanderClassName}\n        {...otherProps}>\n        <div className=\"components-expansion-indicator\" />\n      </GroupTool>\n    );\n  });\n"]}
+{"version":3,"file":"Expander.js","sourceRoot":"","sources":["../../../../../../src/components-react/toolbar/groupPanel/tool/Expander.tsx"],"names":[],"mappings":"AAAA;;;+FAG+F;AAC/F;;GAEG;AAEH,OAAO,iBAAiB,CAAC;AACzB,OAAO,UAAU,MAAM,YAAY,CAAC;AACpC,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAE,SAAS,EAAkB,MAAM,QAAQ,CAAC;AAQnD;;GAEG;AACH,8CAA8C;AAC9C,MAAM,CAAC,MAAM,iBAAiB,GAAG,KAAK,CAAC,IAAI,CACzC,CAAC,KAA6B,EAAE,EAAE;IAChC,MAAM,EAAE,SAAS,EAAE,GAAG,UAAU,EAAE,GAAG,KAAK,CAAC;IAE3C,MAAM,iBAAiB,GAAG,UAAU,CAClC,wDAAwD,EACxD,SAAS,CAAC,CAAC;IAEb,OAAO,CACL,oBAAC,SAAS,IACR,SAAS,EAAE,iBAAiB,KACxB,UAAU;QACd,6BAAK,SAAS,EAAC,gCAAgC,GAAG,CACxC,CACb,CAAC;AACJ,CAAC,CAAC,CAAC","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 Toolbar\r\n */\r\n\r\nimport \"./Expander.scss\";\r\nimport classnames from \"classnames\";\r\nimport * as React from \"react\";\r\nimport { NoChildrenProps, Omit } from \"@itwin/core-react\";\r\nimport { GroupTool, GroupToolProps } from \"./Tool\";\r\n\r\n/** Properties of [[GroupToolExpander]] component.\r\n * @internal\r\n */\r\nexport interface GroupToolExpanderProps extends Omit<GroupToolProps, \"isActive\" | \"children\">, NoChildrenProps {\r\n}\r\n\r\n/** Expandable entry of tool group panel. Used in [[GroupColumn]] to select nested Groups.\r\n * @internal\r\n */\r\n// eslint-disable-next-line react/display-name\r\nexport const GroupToolExpander = React.memo<React.FC<GroupToolExpanderProps>>(\r\n  (props: GroupToolExpanderProps) => {\r\n    const { className, ...otherProps } = props;\r\n\r\n    const expanderClassName = classnames(\r\n      \"components-toolbar-item-expandable-group-tool-expander\",\r\n      className);\r\n\r\n    return (\r\n      <GroupTool\r\n        className={expanderClassName}\r\n        {...otherProps}>\r\n        <div className=\"components-expansion-indicator\" />\r\n      </GroupTool>\r\n    );\r\n  });\r\n"]}

package/lib/esm/components-react/toolbar/groupPanel/tool/Expander.scss

@@ -1,29 +1,29 @@
-/*---------------------------------------------------------------------------------------------
-* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
-* See LICENSE.md in the project root for license terms and full copyright notice.
-*--------------------------------------------------------------------------------------------*/
-@use "sass:math";
-@import "variables";
-
-.components-toolbar-item-expandable-group-tool-expander {
-  > .components-expansion-indicator {
-    $border: solid $expander-arrow-thickness currentColor;
-    $size: math.sqrt($expander-arrow-size-val * $expander-arrow-size-val * 8) * 0.5 + px;
-
-    width: $size;
-    height: $size;
-    border-top: $border;
-    border-left: $border;
-    margin-left: $expander-arrow-thickness;
-    margin-top: $expander-arrow-thickness;
-    margin-right: $space-after-expander;
-    box-sizing: border-box;
-    transform: rotate(135deg);
-  }
-
-  &:active:not(.components-disabled) {
-    > .components-expansion-indicator {
-      filter: $no-shadow;
-    }
-  }
-}
+/*---------------------------------------------------------------------------------------------
+* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+* See LICENSE.md in the project root for license terms and full copyright notice.
+*--------------------------------------------------------------------------------------------*/
+@use "sass:math";
+@import "variables";
+
+.components-toolbar-item-expandable-group-tool-expander {
+  > .components-expansion-indicator {
+    $border: solid $expander-arrow-thickness currentColor;
+    $size: math.sqrt($expander-arrow-size-val * $expander-arrow-size-val * 8) * 0.5 + px;
+
+    width: $size;
+    height: $size;
+    border-top: $border;
+    border-left: $border;
+    margin-left: $expander-arrow-thickness;
+    margin-top: $expander-arrow-thickness;
+    margin-right: $space-after-expander;
+    box-sizing: border-box;
+    transform: rotate(135deg);
+  }
+
+  &:active:not(.components-disabled) {
+    > .components-expansion-indicator {
+      filter: $no-shadow;
+    }
+  }
+}

package/lib/esm/components-react/toolbar/groupPanel/tool/Tool.js.map

@@ -1 +1 @@
-{"version":3,"file":"Tool.js","sourceRoot":"","sources":["../../../../../../src/components-react/toolbar/groupPanel/tool/Tool.tsx"],"names":[],"mappings":"AAAA;;;+FAG+F;AAC/F;;GAEG;AAEH,OAAO,aAAa,CAAC;AACrB,OAAO,UAAU,MAAM,YAAY,CAAC;AACpC,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAe,WAAW,EAAE,MAAM,mBAAmB,CAAC;AA8B7D;;GAEG;AACH,MAAM,UAAU,SAAS,CAAC,KAAqB;IAC7C,MAAM,GAAG,GAAG,KAAK,CAAC,MAAM,CAAiB,IAAI,CAAC,CAAC;IAC/C,MAAM,QAAQ,GAAG,WAAW,CAAC,GAAG,CAAC,CAAC;IAClC,MAAM,aAAa,GAAG,UAAU,CAC9B,oDAAoD,EACpD,KAAK,CAAC,QAAQ,IAAI,mBAAmB,EACrC,KAAK,CAAC,SAAS,IAAI,oBAAoB,EACvC,KAAK,CAAC,UAAU,IAAI,qBAAqB,EACzC,KAAK,CAAC,WAAW,IAAI,uBAAuB,EAC5C,QAAQ,IAAI,qBAAqB,EACjC,KAAK,CAAC,SAAS,CAAC,CAAC;IAEnB,MAAM,WAAW,GAAG,KAAK,CAAC,WAAW,CAAC,GAAG,EAAE;QACzC,uBAAuB;QACvB,IAAI,CAAC,KAAK,CAAC,UAAU,IAAI,KAAK,CAAC,OAAO;YACpC,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC;IAC9B,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC;IAEZ,MAAM,eAAe,GAAG,KAAK,CAAC,WAAW,CAAC,GAAG,EAAE;QAC7C,uBAAuB;QACvB,IAAI,CAAC,KAAK,CAAC,UAAU,IAAI,KAAK,CAAC,WAAW;YACxC,KAAK,CAAC,WAAW,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC;IAClC,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC;IAEZ,OAAO,CACL,6BACE,SAAS,EAAE,aAAa,EACxB,OAAO,EAAE,WAAW,EACpB,SAAS,EAAE,KAAK,CAAC,SAAS,EAC1B,WAAW,EAAE,eAAe,kBACd,KAAK,CAAC,IAAI,CAAC,EAAE,oBACZ,uBAAuB,wBAClB,KAAK,CAAC,IAAI,CAAC,YAAY,2BACpB,KAAK,CAAC,IAAI,CAAC,UAAU,EAC5C,GAAG,EAAE,GAAG,EACR,KAAK,EAAE,KAAK,CAAC,KAAK,EAClB,IAAI,EAAC,QAAQ,EACb,QAAQ,EAAE,CAAC;QAEX,6BAAK,SAAS,EAAC,iBAAiB;YAC7B,KAAK,CAAC,IAAI;YACV,KAAK,CAAC,KAAK;gBACV,6BAAK,SAAS,EAAC,kBAAkB,IAC9B,KAAK,CAAC,KAAK,CACR,CAEJ;QACN,6BAAK,SAAS,EAAC,kBAAkB,IAC9B,KAAK,CAAC,KAAK,CACR;QACL,KAAK,CAAC,QAAQ,CACX,CACP,CAAC;AACJ,CAAC","sourcesContent":["/*---------------------------------------------------------------------------------------------\n* Copyright (c) Bentley Systems, Incorporated. All rights reserved.\n* See LICENSE.md in the project root for license terms and full copyright notice.\n*--------------------------------------------------------------------------------------------*/\n/** @packageDocumentation\n * @module Toolbar\n */\n\nimport \"./Tool.scss\";\nimport classnames from \"classnames\";\nimport * as React from \"react\";\nimport { ActionButton, GroupButton } from \"@itwin/appui-abstract\";\nimport { CommonProps, useTargeted } from \"@itwin/core-react\";\n\n/** Properties of [[GroupTool]] component.\n * @internal\n */\nexport interface GroupToolProps extends CommonProps {\n  /** Additional content, besides icon and label. */\n  children?: React.ReactNode;\n  /** Tool icon. */\n  icon?: React.ReactNode;\n  /** Describes if the item is active. */\n  isActive?: boolean;\n  /** Describes if the item is disabled. */\n  isDisabled?: boolean;\n  /** Describes if the item is focused. */\n  isFocused?: boolean;\n  /** Tool label. */\n  label?: string;\n  /** Function called when the item is clicked. */\n  onClick?: (item: GroupButton | ActionButton) => void;\n  /** Function called when pointer up event is received. */\n  onPointerUp?: (item: GroupButton | ActionButton) => void;\n  /** A badge to draw. */\n  badge?: React.ReactNode;\n  /** GroupButton item */\n  item: GroupButton | ActionButton;\n  /** Optional function to call on any KeyDown events processed by toolbar */\n  onKeyDown?: (e: React.KeyboardEvent) => void;\n}\n\n/** Tool entry of tool group panel. Used in [[GroupColumn]].\n * @internal\n */\nexport function GroupTool(props: GroupToolProps) {\n  const ref = React.useRef<HTMLDivElement>(null);\n  const targeted = useTargeted(ref);\n  const itemClassName = classnames(\n    \"components-toolbar-item-expandable-group-tool-item\",\n    props.isActive && \"components-active\",\n    props.isFocused && \"components-focused\",\n    props.isDisabled && \"components-disabled\",\n    props.onPointerUp && \"components-pointer-up\",\n    targeted && \"components-targeted\",\n    props.className);\n\n  const handleClick = React.useCallback(() => {\n    // istanbul ignore else\n    if (!props.isDisabled && props.onClick)\n      props.onClick(props.item);\n  }, [props]);\n\n  const handlePointerUp = React.useCallback(() => {\n    // istanbul ignore else\n    if (!props.isDisabled && props.onPointerUp)\n      props.onPointerUp(props.item);\n  }, [props]);\n\n  return (\n    <div\n      className={itemClassName}\n      onClick={handleClick}\n      onKeyDown={props.onKeyDown}\n      onPointerUp={handlePointerUp}\n      data-item-id={props.item.id}\n      data-item-type=\"popup-tool-panel-item\"\n      data-item-priority={props.item.itemPriority}\n      data-item-provider-id={props.item.providerId}\n      ref={ref}\n      style={props.style}\n      role=\"button\"\n      tabIndex={0}\n    >\n      <div className=\"components-icon\">\n        {props.icon}\n        {props.badge &&\n          <div className=\"components-badge\">\n            {props.badge}\n          </div>\n        }\n      </div>\n      <div className=\"components-label\">\n        {props.label}\n      </div>\n      {props.children}\n    </div>\n  );\n}\n"]}
+{"version":3,"file":"Tool.js","sourceRoot":"","sources":["../../../../../../src/components-react/toolbar/groupPanel/tool/Tool.tsx"],"names":[],"mappings":"AAAA;;;+FAG+F;AAC/F;;GAEG;AAEH,OAAO,aAAa,CAAC;AACrB,OAAO,UAAU,MAAM,YAAY,CAAC;AACpC,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAe,WAAW,EAAE,MAAM,mBAAmB,CAAC;AA8B7D;;GAEG;AACH,MAAM,UAAU,SAAS,CAAC,KAAqB;IAC7C,MAAM,GAAG,GAAG,KAAK,CAAC,MAAM,CAAiB,IAAI,CAAC,CAAC;IAC/C,MAAM,QAAQ,GAAG,WAAW,CAAC,GAAG,CAAC,CAAC;IAClC,MAAM,aAAa,GAAG,UAAU,CAC9B,oDAAoD,EACpD,KAAK,CAAC,QAAQ,IAAI,mBAAmB,EACrC,KAAK,CAAC,SAAS,IAAI,oBAAoB,EACvC,KAAK,CAAC,UAAU,IAAI,qBAAqB,EACzC,KAAK,CAAC,WAAW,IAAI,uBAAuB,EAC5C,QAAQ,IAAI,qBAAqB,EACjC,KAAK,CAAC,SAAS,CAAC,CAAC;IAEnB,MAAM,WAAW,GAAG,KAAK,CAAC,WAAW,CAAC,GAAG,EAAE;QACzC,uBAAuB;QACvB,IAAI,CAAC,KAAK,CAAC,UAAU,IAAI,KAAK,CAAC,OAAO;YACpC,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC;IAC9B,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC;IAEZ,MAAM,eAAe,GAAG,KAAK,CAAC,WAAW,CAAC,GAAG,EAAE;QAC7C,uBAAuB;QACvB,IAAI,CAAC,KAAK,CAAC,UAAU,IAAI,KAAK,CAAC,WAAW;YACxC,KAAK,CAAC,WAAW,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC;IAClC,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC;IAEZ,OAAO,CACL,6BACE,SAAS,EAAE,aAAa,EACxB,OAAO,EAAE,WAAW,EACpB,SAAS,EAAE,KAAK,CAAC,SAAS,EAC1B,WAAW,EAAE,eAAe,kBACd,KAAK,CAAC,IAAI,CAAC,EAAE,oBACZ,uBAAuB,wBAClB,KAAK,CAAC,IAAI,CAAC,YAAY,2BACpB,KAAK,CAAC,IAAI,CAAC,UAAU,EAC5C,GAAG,EAAE,GAAG,EACR,KAAK,EAAE,KAAK,CAAC,KAAK,EAClB,IAAI,EAAC,QAAQ,EACb,QAAQ,EAAE,CAAC;QAEX,6BAAK,SAAS,EAAC,iBAAiB;YAC7B,KAAK,CAAC,IAAI;YACV,KAAK,CAAC,KAAK;gBACV,6BAAK,SAAS,EAAC,kBAAkB,IAC9B,KAAK,CAAC,KAAK,CACR,CAEJ;QACN,6BAAK,SAAS,EAAC,kBAAkB,IAC9B,KAAK,CAAC,KAAK,CACR;QACL,KAAK,CAAC,QAAQ,CACX,CACP,CAAC;AACJ,CAAC","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 Toolbar\r\n */\r\n\r\nimport \"./Tool.scss\";\r\nimport classnames from \"classnames\";\r\nimport * as React from \"react\";\r\nimport { ActionButton, GroupButton } from \"@itwin/appui-abstract\";\r\nimport { CommonProps, useTargeted } from \"@itwin/core-react\";\r\n\r\n/** Properties of [[GroupTool]] component.\r\n * @internal\r\n */\r\nexport interface GroupToolProps extends CommonProps {\r\n  /** Additional content, besides icon and label. */\r\n  children?: React.ReactNode;\r\n  /** Tool icon. */\r\n  icon?: React.ReactNode;\r\n  /** Describes if the item is active. */\r\n  isActive?: boolean;\r\n  /** Describes if the item is disabled. */\r\n  isDisabled?: boolean;\r\n  /** Describes if the item is focused. */\r\n  isFocused?: boolean;\r\n  /** Tool label. */\r\n  label?: string;\r\n  /** Function called when the item is clicked. */\r\n  onClick?: (item: GroupButton | ActionButton) => void;\r\n  /** Function called when pointer up event is received. */\r\n  onPointerUp?: (item: GroupButton | ActionButton) => void;\r\n  /** A badge to draw. */\r\n  badge?: React.ReactNode;\r\n  /** GroupButton item */\r\n  item: GroupButton | ActionButton;\r\n  /** Optional function to call on any KeyDown events processed by toolbar */\r\n  onKeyDown?: (e: React.KeyboardEvent) => void;\r\n}\r\n\r\n/** Tool entry of tool group panel. Used in [[GroupColumn]].\r\n * @internal\r\n */\r\nexport function GroupTool(props: GroupToolProps) {\r\n  const ref = React.useRef<HTMLDivElement>(null);\r\n  const targeted = useTargeted(ref);\r\n  const itemClassName = classnames(\r\n    \"components-toolbar-item-expandable-group-tool-item\",\r\n    props.isActive && \"components-active\",\r\n    props.isFocused && \"components-focused\",\r\n    props.isDisabled && \"components-disabled\",\r\n    props.onPointerUp && \"components-pointer-up\",\r\n    targeted && \"components-targeted\",\r\n    props.className);\r\n\r\n  const handleClick = React.useCallback(() => {\r\n    // istanbul ignore else\r\n    if (!props.isDisabled && props.onClick)\r\n      props.onClick(props.item);\r\n  }, [props]);\r\n\r\n  const handlePointerUp = React.useCallback(() => {\r\n    // istanbul ignore else\r\n    if (!props.isDisabled && props.onPointerUp)\r\n      props.onPointerUp(props.item);\r\n  }, [props]);\r\n\r\n  return (\r\n    <div\r\n      className={itemClassName}\r\n      onClick={handleClick}\r\n      onKeyDown={props.onKeyDown}\r\n      onPointerUp={handlePointerUp}\r\n      data-item-id={props.item.id}\r\n      data-item-type=\"popup-tool-panel-item\"\r\n      data-item-priority={props.item.itemPriority}\r\n      data-item-provider-id={props.item.providerId}\r\n      ref={ref}\r\n      style={props.style}\r\n      role=\"button\"\r\n      tabIndex={0}\r\n    >\r\n      <div className=\"components-icon\">\r\n        {props.icon}\r\n        {props.badge &&\r\n          <div className=\"components-badge\">\r\n            {props.badge}\r\n          </div>\r\n        }\r\n      </div>\r\n      <div className=\"components-label\">\r\n        {props.label}\r\n      </div>\r\n      {props.children}\r\n    </div>\r\n  );\r\n}\r\n"]}

package/lib/esm/components-react/toolbar/groupPanel/tool/Tool.scss

@@ -1,146 +1,117 @@
-/*---------------------------------------------------------------------------------------------
-* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
-* See LICENSE.md in the project root for license terms and full copyright notice.
-*--------------------------------------------------------------------------------------------*/
-@import "../../../target";
-@import "~@itwin/core-react/lib/cjs/core-react/typography";
-@import "variables";
-
-.components-toolbar-item-expandable-group-tool-item {
-  $label-color: $buic-text-color;
-  $pressed-label-color: $buic-foreground-activehover;
-  $hovered-label-color: $buic-foreground-primary;
-  $focused-label-color: $buic-foreground-primary;
-  $active-label-color: $buic-foreground-primary;
-  $disabled-label-color: $buic-text-color-disabled;
-  $item-height: 32px;
-  $item-border-width: 2px;
-  $active-tool-stripe-height: 22px;
-  $active-tool-stripe-width: 2px;
-  $icon-size: 16px;
-  $space-between-icon-and-label: 32px - 16px;
-
-  white-space: nowrap;
-  height: $item-height;
-  color: $label-color;
-  cursor: pointer;
-  border-radius: var(--iui-border-radius-1);
-  display: flex;
-  align-items: center;
-
-  @include body1;
-
-  @mixin components-active-tool {
-    &:not(.components-disabled) {
-      background: $buic-row-selection;
-      color: $pressed-label-color;
-
-      > .components-icon,
-      .components-label {
-        filter: $no-shadow;
-      }
-    }
-  }
-
-  > .components-icon {
-    width: $icon-size;
-    height: $icon-size;
-    display: inline-block;
-    margin-right: $space-between-icon-and-label;
-    margin-left: 8px;
-    filter: $shadow;
-    position: relative;
-
-    > .components-badge {
-      position: absolute;
-      top: -8px;
-      left: -8px;
-      filter: $no-shadow;
-    }
-  }
-
-  > .components-label {
-    display: inline-block;
-    margin-right: $space-after-label;
-    line-height: $item-height;
-    filter: $shadow;
-
-    &:after {
-      display: block;
-      content: attr(title);
-      font-weight: bold;
-      height: 1px;
-      color: transparent;
-      overflow: hidden;
-      visibility: hidden;
-    }
-  }
-
-  @include components-internal-targeted {
-    &:not(.components-disabled) {
-      color: $hovered-label-color;
-
-      @include body1;
-
-      > .components-icon,
-      .components-label {
-        filter: $shadow;
-      }
-    }
-  }
-
-  &:active {
-    @include components-active-tool;
-  }
-
-  &:focus {
-    outline: none;
-  }
-
-  &.components-pointer-up {
-    @include components-internal-targeted {
-      @include components-active-tool;
-    }
-  }
-
-  &.components-focused:not(.components-disabled) {
-    color: $focused-label-color;
-    border-color: $buic-foreground-primary;
-    border-width: $item-border-width;
-    border-style: solid;
-
-    @include body1;
-
-    > .components-icon,
-    .components-label {
-      filter: $shadow;
-    }
-  }
-
-  &.components-active:not(.components-disabled) {
-    color: $active-label-color;
-
-    @include body1;
-
-    &::before {
-      content: "";
-      background-color: $active-label-color;
-      display: block;
-      position: relative;
-      top: 0;
-      left: $item-border-width + 1;
-      width: $active-tool-stripe-width;
-      height: $active-tool-stripe-height;
-      border-radius: 2px;
-    }
-
-    > .components-icon,
-    .components-label {
-      filter: $no-shadow;
-    }
-  }
-
-  &.components-disabled {
-    color: $disabled-label-color;
-  }
-}
+/*---------------------------------------------------------------------------------------------
+* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+* See LICENSE.md in the project root for license terms and full copyright notice.
+*--------------------------------------------------------------------------------------------*/
+@import "../../../target";
+@import "~@itwin/core-react/lib/cjs/core-react/typography";
+@import "variables";
+
+.components-toolbar-item-expandable-group-tool-item {
+  $item-height: 32px;
+  $item-border-width: 2px;
+  $active-tool-stripe-height: 22px;
+  $active-tool-stripe-width: 2px;
+  $icon-size: 16px;
+  $space-between-icon-and-label: 32px - 16px;
+
+  white-space: nowrap;
+  height: $item-height;
+  color: var(--iui-color-text);
+  cursor: pointer;
+  border-radius: var(--iui-border-radius-1);
+  display: flex;
+  align-items: center;
+
+  @include body1;
+
+  @mixin components-active-tool {
+    &:not(.components-disabled) {
+      background: var(--iui-color-background-hover);
+      color: var(--iui-color-text-accent-hover);
+    }
+  }
+
+  > .components-icon {
+    width: $icon-size;
+    height: $icon-size;
+    display: inline-block;
+    margin-right: $space-between-icon-and-label;
+    margin-left: 8px;
+    position: relative;
+
+    > .components-badge {
+      position: absolute;
+      top: -8px;
+      left: -8px;
+    }
+  }
+
+  > .components-label {
+    display: inline-block;
+    margin-right: $space-after-label;
+    line-height: $item-height;
+
+    &:after {
+      display: block;
+      content: attr(title);
+      font-weight: bold;
+      height: 1px;
+      color: transparent;
+      overflow: hidden;
+      visibility: hidden;
+    }
+  }
+
+  @include components-internal-targeted {
+    &:not(.components-disabled) {
+      color: var(--iui-color-text-hover);
+
+      @include body1;
+    }
+  }
+
+  &:active {
+    @include components-active-tool;
+  }
+
+  &:focus {
+    outline: none;
+  }
+
+  &.components-pointer-up {
+    @include components-internal-targeted {
+      @include components-active-tool;
+    }
+  }
+
+  &.components-focused:not(.components-disabled) {
+    color: var(--iui-color-text-accent);
+    border-color: var(--iui-color-border-accent);
+    border-width: $item-border-width;
+    border-style: solid;
+
+    @include body1;
+  }
+
+  &.components-active:not(.components-disabled) {
+    color: var(--iui-color-text-accent);
+
+    @include body1;
+
+    &::before {
+      content: "";
+      background-color: var(--iui-color-border-accent);
+      display: block;
+      position: relative;
+      top: 0;
+      left: $item-border-width + 1;
+      width: $active-tool-stripe-width;
+      height: $active-tool-stripe-height;
+      border-radius: 2px;
+    }
+  }
+
+  &.components-disabled {
+    color: var(--iui-color-text-disabled);
+  }
+}

package/lib/esm/components-react/toolbar/groupPanel/tool/_variables.scss

@@ -1,13 +1,13 @@
-/*---------------------------------------------------------------------------------------------
-* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
-* See LICENSE.md in the project root for license terms and full copyright notice.
-*--------------------------------------------------------------------------------------------*/
-@import "~@itwin/core-react/lib/cjs/core-react/style/themecolors";
-
-$no-shadow: none;
-$shadow: drop-shadow(0 1px 0 $buic-foreground-body-reverse);
-$space-after-label: 16px;
-
-$expander-arrow-thickness: 2px;
-$expander-arrow-size-val: 6;
+/*---------------------------------------------------------------------------------------------
+* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+* See LICENSE.md in the project root for license terms and full copyright notice.
+*--------------------------------------------------------------------------------------------*/
+@import "~@itwin/core-react/lib/cjs/core-react/style/themecolors";
+
+$no-shadow: none;
+$shadow: drop-shadow(0 1px 0 $buic-foreground-body-reverse);
+$space-after-label: 16px;
+
+$expander-arrow-thickness: 2px;
+$expander-arrow-size-val: 6;
 $space-after-expander: 10px;

package/lib/esm/components-react/toolbar/useDragInteraction.js.map

@@ -1 +1 @@
-{"version":3,"file":"useDragInteraction.js","sourceRoot":"","sources":["../../../../src/components-react/toolbar/useDragInteraction.tsx"],"names":[],"mappings":"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","sourcesContent":["/*---------------------------------------------------------------------------------------------\n* Copyright (c) Bentley Systems, Incorporated. All rights reserved.\n* See LICENSE.md in the project root for license terms and full copyright notice.\n*--------------------------------------------------------------------------------------------*/\n/** @packageDocumentation\n * @module Toolbar\n */\n\nimport * as React from \"react\";\nimport { Point, Timer } from \"@itwin/core-react\";\n\n/** @internal */\nconst getDragDistance = (from: Point, to: Point) => {\n  return from.getDistanceTo(to);\n};\n\ninterface UseDragArgs {\n  readonly initialPosition: React.MutableRefObject<Point | undefined>;\n  readonly onDrag: () => void;\n}\n\nfunction useDrag(args: UseDragArgs) {\n  const { initialPosition, onDrag } = args;\n  const handlePointerMove = React.useCallback((e: PointerEvent) => {\n    // istanbul ignore if\n    if (!initialPosition.current)\n      return;\n    const newPosition = new Point(e.clientX, e.clientY);\n    const dragDistance = getDragDistance(initialPosition.current, newPosition);\n    if (dragDistance < 20)\n      return;\n    onDrag();\n  }, [initialPosition, onDrag]);\n  return { handlePointerMove };\n}\n\ninterface UseLongPressArgs {\n  readonly initialPosition: React.RefObject<Point | undefined>;\n  readonly onLongPress: () => void;\n}\n\nfunction useLongPress(args: UseLongPressArgs) {\n  const longPressTimer = React.useRef(new Timer(500));\n  const handlePointerDown = React.useCallback(() => {\n    longPressTimer.current.start();\n  }, []);\n  const handlePointerUp = React.useCallback(() => {\n    longPressTimer.current.stop();\n  }, []);\n\n  const handlePointerMove = React.useCallback((e: PointerEvent) => {\n    if (!args.initialPosition.current)\n      return;\n    const newPosition = new Point(e.clientX, e.clientY);\n    const distance = args.initialPosition.current.getDistanceTo(newPosition);\n    distance >= 10 && longPressTimer.current.stop();\n  }, [args.initialPosition]);\n  React.useEffect(() => {\n    longPressTimer.current.setOnExecute(args.onLongPress);\n    return () => {\n      longPressTimer.current.setOnExecute(undefined); // eslint-disable-line react-hooks/exhaustive-deps\n    };\n  }, [args.onLongPress]);\n  return { handlePointerDown, handlePointerMove, handlePointerUp };\n}\n\n/**\n * Hook used on expandable item that require drag or long press to open\n * @param onClick Function called when item is clicked.\n * @param onOpenPanel Function called when item is dragged or long pressed to open panel.\n * @public\n */\nexport function useDragInteraction(onClick?: () => void, onOpenPanel?: () => void) {\n  const initialPosition = React.useRef<Point | undefined>(undefined);\n  const skipClick = React.useRef<boolean>(false);\n  const handleOpenPanel = React.useCallback(() => {\n    initialPosition.current = undefined;\n    skipClick.current = true;\n    onOpenPanel && onOpenPanel();\n  }, [onOpenPanel]);\n  const {\n    handlePointerMove: dragPointerMove,\n  } = useDrag({\n    initialPosition,\n    onDrag: handleOpenPanel,\n  });\n  const {\n    handlePointerDown: longPressPointerDown,\n    handlePointerMove: longPressPointerMove,\n    handlePointerUp: longPressPointerUp,\n  } = useLongPress({\n    initialPosition,\n    onLongPress: handleOpenPanel,\n  });\n  const handleButtonClick = React.useCallback(() => {\n    // istanbul ignore if\n    if (skipClick.current)\n      return;\n    onClick && onClick();\n  }, [onClick]);\n  const handlePointerDown = React.useCallback((e: React.PointerEvent) => {\n    (e.target instanceof Element) && e.target.releasePointerCapture(e.pointerId);\n    initialPosition.current = new Point(e.clientX, e.clientY);\n    skipClick.current = false;\n    longPressPointerDown();\n  }, [longPressPointerDown]);\n  const handlePointerMove = React.useCallback((e: PointerEvent) => {\n    dragPointerMove(e);\n    longPressPointerMove(e);\n  }, [dragPointerMove, longPressPointerMove]);\n  const handlePointerUp = React.useCallback(() => {\n    initialPosition.current = undefined;\n    longPressPointerUp();\n  }, [longPressPointerUp]);\n  React.useEffect(() => {\n    document.addEventListener(\"pointermove\", handlePointerMove);\n    document.addEventListener(\"pointerup\", handlePointerUp);\n    return () => {\n      document.removeEventListener(\"pointermove\", handlePointerMove);\n      document.removeEventListener(\"pointerup\", handlePointerUp);\n    };\n  }, [handlePointerMove, handlePointerUp]);\n  return { handlePointerDown, handleButtonClick };\n}\n"]}
+{"version":3,"file":"useDragInteraction.js","sourceRoot":"","sources":["../../../../src/components-react/toolbar/useDragInteraction.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 Toolbar\r\n */\r\n\r\nimport * as React from \"react\";\r\nimport { Point, Timer } from \"@itwin/core-react\";\r\n\r\n/** @internal */\r\nconst getDragDistance = (from: Point, to: Point) => {\r\n  return from.getDistanceTo(to);\r\n};\r\n\r\ninterface UseDragArgs {\r\n  readonly initialPosition: React.MutableRefObject<Point | undefined>;\r\n  readonly onDrag: () => void;\r\n}\r\n\r\nfunction useDrag(args: UseDragArgs) {\r\n  const { initialPosition, onDrag } = args;\r\n  const handlePointerMove = React.useCallback((e: PointerEvent) => {\r\n    // istanbul ignore if\r\n    if (!initialPosition.current)\r\n      return;\r\n    const newPosition = new Point(e.clientX, e.clientY);\r\n    const dragDistance = getDragDistance(initialPosition.current, newPosition);\r\n    if (dragDistance < 20)\r\n      return;\r\n    onDrag();\r\n  }, [initialPosition, onDrag]);\r\n  return { handlePointerMove };\r\n}\r\n\r\ninterface UseLongPressArgs {\r\n  readonly initialPosition: React.RefObject<Point | undefined>;\r\n  readonly onLongPress: () => void;\r\n}\r\n\r\nfunction useLongPress(args: UseLongPressArgs) {\r\n  const longPressTimer = React.useRef(new Timer(500));\r\n  const handlePointerDown = React.useCallback(() => {\r\n    longPressTimer.current.start();\r\n  }, []);\r\n  const handlePointerUp = React.useCallback(() => {\r\n    longPressTimer.current.stop();\r\n  }, []);\r\n\r\n  const handlePointerMove = React.useCallback((e: PointerEvent) => {\r\n    if (!args.initialPosition.current)\r\n      return;\r\n    const newPosition = new Point(e.clientX, e.clientY);\r\n    const distance = args.initialPosition.current.getDistanceTo(newPosition);\r\n    distance >= 10 && longPressTimer.current.stop();\r\n  }, [args.initialPosition]);\r\n  React.useEffect(() => {\r\n    longPressTimer.current.setOnExecute(args.onLongPress);\r\n    return () => {\r\n      longPressTimer.current.setOnExecute(undefined); // eslint-disable-line react-hooks/exhaustive-deps\r\n    };\r\n  }, [args.onLongPress]);\r\n  return { handlePointerDown, handlePointerMove, handlePointerUp };\r\n}\r\n\r\n/**\r\n * Hook used on expandable item that require drag or long press to open\r\n * @param onClick Function called when item is clicked.\r\n * @param onOpenPanel Function called when item is dragged or long pressed to open panel.\r\n * @public\r\n */\r\nexport function useDragInteraction(onClick?: () => void, onOpenPanel?: () => void) {\r\n  const initialPosition = React.useRef<Point | undefined>(undefined);\r\n  const skipClick = React.useRef<boolean>(false);\r\n  const handleOpenPanel = React.useCallback(() => {\r\n    initialPosition.current = undefined;\r\n    skipClick.current = true;\r\n    onOpenPanel && onOpenPanel();\r\n  }, [onOpenPanel]);\r\n  const {\r\n    handlePointerMove: dragPointerMove,\r\n  } = useDrag({\r\n    initialPosition,\r\n    onDrag: handleOpenPanel,\r\n  });\r\n  const {\r\n    handlePointerDown: longPressPointerDown,\r\n    handlePointerMove: longPressPointerMove,\r\n    handlePointerUp: longPressPointerUp,\r\n  } = useLongPress({\r\n    initialPosition,\r\n    onLongPress: handleOpenPanel,\r\n  });\r\n  const handleButtonClick = React.useCallback(() => {\r\n    // istanbul ignore if\r\n    if (skipClick.current)\r\n      return;\r\n    onClick && onClick();\r\n  }, [onClick]);\r\n  const handlePointerDown = React.useCallback((e: React.PointerEvent) => {\r\n    (e.target instanceof Element) && e.target.releasePointerCapture(e.pointerId);\r\n    initialPosition.current = new Point(e.clientX, e.clientY);\r\n    skipClick.current = false;\r\n    longPressPointerDown();\r\n  }, [longPressPointerDown]);\r\n  const handlePointerMove = React.useCallback((e: PointerEvent) => {\r\n    dragPointerMove(e);\r\n    longPressPointerMove(e);\r\n  }, [dragPointerMove, longPressPointerMove]);\r\n  const handlePointerUp = React.useCallback(() => {\r\n    initialPosition.current = undefined;\r\n    longPressPointerUp();\r\n  }, [longPressPointerUp]);\r\n  React.useEffect(() => {\r\n    document.addEventListener(\"pointermove\", handlePointerMove);\r\n    document.addEventListener(\"pointerup\", handlePointerUp);\r\n    return () => {\r\n      document.removeEventListener(\"pointermove\", handlePointerMove);\r\n      document.removeEventListener(\"pointerup\", handlePointerUp);\r\n    };\r\n  }, [handlePointerMove, handlePointerUp]);\r\n  return { handlePointerDown, handleButtonClick };\r\n}\r\n"]}

package/lib/esm/components-react/toolbar/utilities/Direction.js

@@ -18,7 +18,7 @@ export var Direction;
 /** Helpers for [[Direction]].
  * @internal
  */
-export class DirectionHelpers {
+class DirectionHelpers {
     /** @returns Class name of specified [[Direction]] */
     static getCssClassName(direction) {
         switch (direction) {
@@ -52,6 +52,7 @@ DirectionHelpers.TOP_CLASS_NAME = "components-direction-top";
 DirectionHelpers.RIGHT_CLASS_NAME = "components-direction-right";
 /** Class name of [[Direction.Bottom]] */
 DirectionHelpers.BOTTOM_CLASS_NAME = "components-direction-bottom";
+export { DirectionHelpers };
 /** Available orthogonal directions.
  * @alpha
  */
@@ -63,7 +64,7 @@ export var OrthogonalDirection;
 /** Helpers for [[OrthogonalDirection]].
  * @internal
  */
-export class OrthogonalDirectionHelpers {
+class OrthogonalDirectionHelpers {
     /** @returns Class name of specified [[OrthogonalDirection]] */
     static getCssClassName(direction) {
         switch (direction) {
@@ -87,4 +88,5 @@ export class OrthogonalDirectionHelpers {
 OrthogonalDirectionHelpers.VERTICAL_CLASS_NAME = "components-vertical";
 /** Class name of [[OrthogonalDirection.Horizontal]] */
 OrthogonalDirectionHelpers.HORIZONTAL_CLASS_NAME = "components-horizontal";
+export { OrthogonalDirectionHelpers };
 //# sourceMappingURL=Direction.js.map

package/lib/esm/components-react/toolbar/utilities/Direction.js.map

@@ -1 +1 @@
-{"version":3,"file":"Direction.js","sourceRoot":"","sources":["../../../../../src/components-react/toolbar/utilities/Direction.ts"],"names":[],"mappings":"AAAA;;;+FAG+F;AAC/F;;GAEG;AAEH;;GAEG;AACH,MAAM,CAAN,IAAY,SAKX;AALD,WAAY,SAAS;IACnB,yCAAQ,CAAA;IACR,uCAAG,CAAA;IACH,2CAAK,CAAA;IACL,6CAAM,CAAA;AACR,CAAC,EALW,SAAS,KAAT,SAAS,QAKpB;AAED;;GAEG;AACH,MAAM,OAAO,gBAAgB;IAU3B,qDAAqD;IAC9C,MAAM,CAAC,eAAe,CAAC,SAAoB;QAChD,QAAQ,SAAS,EAAE;YACjB,KAAK,SAAS,CAAC,IAAI;gBACjB,OAAO,gBAAgB,CAAC,eAAe,CAAC;YAC1C,KAAK,SAAS,CAAC,GAAG;gBAChB,OAAO,gBAAgB,CAAC,cAAc,CAAC;YACzC,KAAK,SAAS,CAAC,KAAK;gBAClB,OAAO,gBAAgB,CAAC,gBAAgB,CAAC;YAC3C,KAAK,SAAS,CAAC,MAAM;gBACnB,OAAO,gBAAgB,CAAC,iBAAiB,CAAC;SAC7C;IACH,CAAC;IAED,+DAA+D;IACxD,MAAM,CAAC,sBAAsB,CAAC,SAAoB;QACvD,QAAQ,SAAS,EAAE;YACjB,KAAK,SAAS,CAAC,IAAI,CAAC;YACpB,KAAK,SAAS,CAAC,KAAK;gBAClB,OAAO,mBAAmB,CAAC,UAAU,CAAC;YACxC,KAAK,SAAS,CAAC,GAAG,CAAC;YACnB,KAAK,SAAS,CAAC,MAAM;gBACnB,OAAO,mBAAmB,CAAC,QAAQ,CAAC;SACvC;IACH,CAAC;;AAjCD,uCAAuC;AAChB,gCAAe,GAAG,2BAA2B,CAAC;AACrE,sCAAsC;AACf,+BAAc,GAAG,0BAA0B,CAAC;AACnE,wCAAwC;AACjB,iCAAgB,GAAG,4BAA4B,CAAC;AACvE,yCAAyC;AAClB,kCAAiB,GAAG,6BAA6B,CAAC;AA6B3E;;GAEG;AACH,MAAM,CAAN,IAAY,mBAGX;AAHD,WAAY,mBAAmB;IAC7B,qEAAQ,CAAA;IACR,yEAAU,CAAA;AACZ,CAAC,EAHW,mBAAmB,KAAnB,mBAAmB,QAG9B;AAED;;GAEG;AACH,MAAM,OAAO,0BAA0B;IAMrC,+DAA+D;IACxD,MAAM,CAAC,eAAe,CAAC,SAA8B;QAC1D,QAAQ,SAAS,EAAE;YACjB,KAAK,mBAAmB,CAAC,QAAQ;gBAC/B,OAAO,0BAA0B,CAAC,mBAAmB,CAAC;YACxD,KAAK,mBAAmB,CAAC,UAAU;gBACjC,OAAO,0BAA0B,CAAC,qBAAqB,CAAC;SAC3D;IACH,CAAC;IAED,6DAA6D;IACtD,MAAM,CAAC,OAAO,CAAC,SAA8B;QAClD,QAAQ,SAAS,EAAE;YACjB,KAAK,mBAAmB,CAAC,QAAQ;gBAC/B,OAAO,mBAAmB,CAAC,UAAU,CAAC;YACxC,KAAK,mBAAmB,CAAC,UAAU;gBACjC,OAAO,mBAAmB,CAAC,QAAQ,CAAC;SACvC;IACH,CAAC;;AAvBD,qDAAqD;AAC9B,8CAAmB,GAAG,qBAAqB,CAAC;AACnE,uDAAuD;AAChC,gDAAqB,GAAG,uBAAuB,CAAC","sourcesContent":["/*---------------------------------------------------------------------------------------------\n* Copyright (c) Bentley Systems, Incorporated. All rights reserved.\n* See LICENSE.md in the project root for license terms and full copyright notice.\n*--------------------------------------------------------------------------------------------*/\n/** @packageDocumentation\n * @module Toolbar\n */\n\n/** Available directions.\n * @public\n */\nexport enum Direction {\n  Left = 1,\n  Top,\n  Right,\n  Bottom,\n}\n\n/** Helpers for [[Direction]].\n * @internal\n */\nexport class DirectionHelpers {\n  /** Class name of [[Direction.Left]] */\n  public static readonly LEFT_CLASS_NAME = \"components-direction-left\";\n  /** Class name of [[Direction.Top]] */\n  public static readonly TOP_CLASS_NAME = \"components-direction-top\";\n  /** Class name of [[Direction.Right]] */\n  public static readonly RIGHT_CLASS_NAME = \"components-direction-right\";\n  /** Class name of [[Direction.Bottom]] */\n  public static readonly BOTTOM_CLASS_NAME = \"components-direction-bottom\";\n\n  /** @returns Class name of specified [[Direction]] */\n  public static getCssClassName(direction: Direction): string {\n    switch (direction) {\n      case Direction.Left:\n        return DirectionHelpers.LEFT_CLASS_NAME;\n      case Direction.Top:\n        return DirectionHelpers.TOP_CLASS_NAME;\n      case Direction.Right:\n        return DirectionHelpers.RIGHT_CLASS_NAME;\n      case Direction.Bottom:\n        return DirectionHelpers.BOTTOM_CLASS_NAME;\n    }\n  }\n\n  /** @returns Orthogonal direction of specified [[Direction]] */\n  public static getOrthogonalDirection(direction: Direction): OrthogonalDirection {\n    switch (direction) {\n      case Direction.Left:\n      case Direction.Right:\n        return OrthogonalDirection.Horizontal;\n      case Direction.Top:\n      case Direction.Bottom:\n        return OrthogonalDirection.Vertical;\n    }\n  }\n}\n\n/** Available orthogonal directions.\n * @alpha\n */\nexport enum OrthogonalDirection {\n  Vertical,\n  Horizontal,\n}\n\n/** Helpers for [[OrthogonalDirection]].\n * @internal\n */\nexport class OrthogonalDirectionHelpers {\n  /** Class name of [[OrthogonalDirection.Vertical]] */\n  public static readonly VERTICAL_CLASS_NAME = \"components-vertical\";\n  /** Class name of [[OrthogonalDirection.Horizontal]] */\n  public static readonly HORIZONTAL_CLASS_NAME = \"components-horizontal\";\n\n  /** @returns Class name of specified [[OrthogonalDirection]] */\n  public static getCssClassName(direction: OrthogonalDirection): string {\n    switch (direction) {\n      case OrthogonalDirection.Vertical:\n        return OrthogonalDirectionHelpers.VERTICAL_CLASS_NAME;\n      case OrthogonalDirection.Horizontal:\n        return OrthogonalDirectionHelpers.HORIZONTAL_CLASS_NAME;\n    }\n  }\n\n  /** @returns Opposite of specified [[OrthogonalDirection]] */\n  public static inverse(direction: OrthogonalDirection): OrthogonalDirection {\n    switch (direction) {\n      case OrthogonalDirection.Vertical:\n        return OrthogonalDirection.Horizontal;\n      case OrthogonalDirection.Horizontal:\n        return OrthogonalDirection.Vertical;\n    }\n  }\n}\n"]}
+{"version":3,"file":"Direction.js","sourceRoot":"","sources":["../../../../../src/components-react/toolbar/utilities/Direction.ts"],"names":[],"mappings":"AAAA;;;+FAG+F;AAC/F;;GAEG;AAEH;;GAEG;AACH,MAAM,CAAN,IAAY,SAKX;AALD,WAAY,SAAS;IACnB,yCAAQ,CAAA;IACR,uCAAG,CAAA;IACH,2CAAK,CAAA;IACL,6CAAM,CAAA;AACR,CAAC,EALW,SAAS,KAAT,SAAS,QAKpB;AAED;;GAEG;AACH,MAAa,gBAAgB;IAU3B,qDAAqD;IAC9C,MAAM,CAAC,eAAe,CAAC,SAAoB;QAChD,QAAQ,SAAS,EAAE;YACjB,KAAK,SAAS,CAAC,IAAI;gBACjB,OAAO,gBAAgB,CAAC,eAAe,CAAC;YAC1C,KAAK,SAAS,CAAC,GAAG;gBAChB,OAAO,gBAAgB,CAAC,cAAc,CAAC;YACzC,KAAK,SAAS,CAAC,KAAK;gBAClB,OAAO,gBAAgB,CAAC,gBAAgB,CAAC;YAC3C,KAAK,SAAS,CAAC,MAAM;gBACnB,OAAO,gBAAgB,CAAC,iBAAiB,CAAC;SAC7C;IACH,CAAC;IAED,+DAA+D;IACxD,MAAM,CAAC,sBAAsB,CAAC,SAAoB;QACvD,QAAQ,SAAS,EAAE;YACjB,KAAK,SAAS,CAAC,IAAI,CAAC;YACpB,KAAK,SAAS,CAAC,KAAK;gBAClB,OAAO,mBAAmB,CAAC,UAAU,CAAC;YACxC,KAAK,SAAS,CAAC,GAAG,CAAC;YACnB,KAAK,SAAS,CAAC,MAAM;gBACnB,OAAO,mBAAmB,CAAC,QAAQ,CAAC;SACvC;IACH,CAAC;;AAjCD,uCAAuC;AAChB,gCAAe,GAAG,2BAA2B,CAAC;AACrE,sCAAsC;AACf,+BAAc,GAAG,0BAA0B,CAAC;AACnE,wCAAwC;AACjB,iCAAgB,GAAG,4BAA4B,CAAC;AACvE,yCAAyC;AAClB,kCAAiB,GAAG,6BAA6B,CAAC;SAR9D,gBAAgB;AAqC7B;;GAEG;AACH,MAAM,CAAN,IAAY,mBAGX;AAHD,WAAY,mBAAmB;IAC7B,qEAAQ,CAAA;IACR,yEAAU,CAAA;AACZ,CAAC,EAHW,mBAAmB,KAAnB,mBAAmB,QAG9B;AAED;;GAEG;AACH,MAAa,0BAA0B;IAMrC,+DAA+D;IACxD,MAAM,CAAC,eAAe,CAAC,SAA8B;QAC1D,QAAQ,SAAS,EAAE;YACjB,KAAK,mBAAmB,CAAC,QAAQ;gBAC/B,OAAO,0BAA0B,CAAC,mBAAmB,CAAC;YACxD,KAAK,mBAAmB,CAAC,UAAU;gBACjC,OAAO,0BAA0B,CAAC,qBAAqB,CAAC;SAC3D;IACH,CAAC;IAED,6DAA6D;IACtD,MAAM,CAAC,OAAO,CAAC,SAA8B;QAClD,QAAQ,SAAS,EAAE;YACjB,KAAK,mBAAmB,CAAC,QAAQ;gBAC/B,OAAO,mBAAmB,CAAC,UAAU,CAAC;YACxC,KAAK,mBAAmB,CAAC,UAAU;gBACjC,OAAO,mBAAmB,CAAC,QAAQ,CAAC;SACvC;IACH,CAAC;;AAvBD,qDAAqD;AAC9B,8CAAmB,GAAG,qBAAqB,CAAC;AACnE,uDAAuD;AAChC,gDAAqB,GAAG,uBAAuB,CAAC;SAJ5D,0BAA0B","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 Toolbar\r\n */\r\n\r\n/** Available directions.\r\n * @public\r\n */\r\nexport enum Direction {\r\n  Left = 1,\r\n  Top,\r\n  Right,\r\n  Bottom,\r\n}\r\n\r\n/** Helpers for [[Direction]].\r\n * @internal\r\n */\r\nexport class DirectionHelpers {\r\n  /** Class name of [[Direction.Left]] */\r\n  public static readonly LEFT_CLASS_NAME = \"components-direction-left\";\r\n  /** Class name of [[Direction.Top]] */\r\n  public static readonly TOP_CLASS_NAME = \"components-direction-top\";\r\n  /** Class name of [[Direction.Right]] */\r\n  public static readonly RIGHT_CLASS_NAME = \"components-direction-right\";\r\n  /** Class name of [[Direction.Bottom]] */\r\n  public static readonly BOTTOM_CLASS_NAME = \"components-direction-bottom\";\r\n\r\n  /** @returns Class name of specified [[Direction]] */\r\n  public static getCssClassName(direction: Direction): string {\r\n    switch (direction) {\r\n      case Direction.Left:\r\n        return DirectionHelpers.LEFT_CLASS_NAME;\r\n      case Direction.Top:\r\n        return DirectionHelpers.TOP_CLASS_NAME;\r\n      case Direction.Right:\r\n        return DirectionHelpers.RIGHT_CLASS_NAME;\r\n      case Direction.Bottom:\r\n        return DirectionHelpers.BOTTOM_CLASS_NAME;\r\n    }\r\n  }\r\n\r\n  /** @returns Orthogonal direction of specified [[Direction]] */\r\n  public static getOrthogonalDirection(direction: Direction): OrthogonalDirection {\r\n    switch (direction) {\r\n      case Direction.Left:\r\n      case Direction.Right:\r\n        return OrthogonalDirection.Horizontal;\r\n      case Direction.Top:\r\n      case Direction.Bottom:\r\n        return OrthogonalDirection.Vertical;\r\n    }\r\n  }\r\n}\r\n\r\n/** Available orthogonal directions.\r\n * @alpha\r\n */\r\nexport enum OrthogonalDirection {\r\n  Vertical,\r\n  Horizontal,\r\n}\r\n\r\n/** Helpers for [[OrthogonalDirection]].\r\n * @internal\r\n */\r\nexport class OrthogonalDirectionHelpers {\r\n  /** Class name of [[OrthogonalDirection.Vertical]] */\r\n  public static readonly VERTICAL_CLASS_NAME = \"components-vertical\";\r\n  /** Class name of [[OrthogonalDirection.Horizontal]] */\r\n  public static readonly HORIZONTAL_CLASS_NAME = \"components-horizontal\";\r\n\r\n  /** @returns Class name of specified [[OrthogonalDirection]] */\r\n  public static getCssClassName(direction: OrthogonalDirection): string {\r\n    switch (direction) {\r\n      case OrthogonalDirection.Vertical:\r\n        return OrthogonalDirectionHelpers.VERTICAL_CLASS_NAME;\r\n      case OrthogonalDirection.Horizontal:\r\n        return OrthogonalDirectionHelpers.HORIZONTAL_CLASS_NAME;\r\n    }\r\n  }\r\n\r\n  /** @returns Opposite of specified [[OrthogonalDirection]] */\r\n  public static inverse(direction: OrthogonalDirection): OrthogonalDirection {\r\n    switch (direction) {\r\n      case OrthogonalDirection.Vertical:\r\n        return OrthogonalDirection.Horizontal;\r\n      case OrthogonalDirection.Horizontal:\r\n        return OrthogonalDirection.Vertical;\r\n    }\r\n  }\r\n}\r\n"]}

package/lib/esm/components-react/tree/HighlightingEngine.js

@@ -12,7 +12,7 @@ import { HighlightedText } from "../common/HighlightedText";
  * Tree highlighting engine
  * @public
  */
-export class HighlightingEngine {
+class HighlightingEngine {
     constructor(props) {
         this._searchText = props.searchText;
         this._activeMatch = props.activeMatch;
@@ -36,4 +36,5 @@ export class HighlightingEngine {
     }
 }
 HighlightingEngine.ACTIVE_CLASS_NAME = "components-activehighlight";
+export { HighlightingEngine };
 //# sourceMappingURL=HighlightingEngine.js.map

package/lib/esm/components-react/tree/HighlightingEngine.js.map

@@ -1 +1 @@
-{"version":3,"file":"HighlightingEngine.js","sourceRoot":"","sources":["../../../../src/components-react/tree/HighlightingEngine.tsx"],"names":[],"mappings":"AAAA;;;+FAG+F;AAC/F;;GAEG;AAEH,OAAO,2BAA2B,CAAC;AACnC,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,eAAe,EAAE,MAAM,2BAA2B,CAAC;AA+B5D;;;GAGG;AACH,MAAM,OAAO,kBAAkB;IAK7B,YAAY,KAA6B;QACvC,IAAI,CAAC,WAAW,GAAG,KAAK,CAAC,UAAU,CAAC;QACpC,IAAI,CAAC,YAAY,GAAG,KAAK,CAAC,WAAW,CAAC;IACxC,CAAC;IAEM,YAAY,CAAC,IAAqB;QACvC,OAAO,IAAI,CAAC,YAAY,IAAI,IAAI,CAAC,EAAE,KAAK,IAAI,CAAC,YAAY,CAAC,MAAM,CAAC;IACnE,CAAC;IAEM,mBAAmB,CAAC,IAAqB;QAC9C,OAAO,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,YAAa,CAAC,UAAU,CAAC,CAAC,CAAC,SAAS,CAAC;IAC7E,CAAC;IAEM,iBAAiB,CAAC,IAAqB;QAC5C,OAAO;YACL,UAAU,EAAE,IAAI,CAAC,WAAW;YAC5B,gBAAgB,EAAE,IAAI,CAAC,mBAAmB,CAAC,IAAI,CAAC;SACjD,CAAC;IACJ,CAAC;IAEM,MAAM,CAAC,eAAe,CAAC,IAAY,EAAE,KAAiC;QAC3E,IAAI,KAAK,CAAC,UAAU;YAClB,OAAO,CAAC,oBAAC,eAAe,IAAC,IAAI,EAAE,IAAI,KAAM,KAAK,GAAI,CAAC,CAAC;QACtD,OAAO,IAAI,CAAC;IACd,CAAC;;AA1BsB,oCAAiB,GAAG,4BAA4B,CAAC","sourcesContent":["/*---------------------------------------------------------------------------------------------\n* Copyright (c) Bentley Systems, Incorporated. All rights reserved.\n* See LICENSE.md in the project root for license terms and full copyright notice.\n*--------------------------------------------------------------------------------------------*/\n/** @packageDocumentation\n * @module Tree\n */\n\nimport \"./HighlightingEngine.scss\";\nimport * as React from \"react\";\nimport { HighlightedText } from \"../common/HighlightedText\";\n\n/**\n * Properties for identifying an active highlight on a node in a tree.\n * @see [[HighlightableTreeProps.activeMatch]]\n * @public\n */\nexport interface ActiveMatchInfo {\n  nodeId: string;\n  matchIndex: number;\n}\n\n/**\n * Properties for highlighting nodes in a tree.\n * @see [[ControlledTreeProps.nodeHighlightingProps]]\n * @public\n */\nexport interface HighlightableTreeProps {\n  searchText: string;\n  activeMatch?: ActiveMatchInfo;\n}\n\n/**\n * Properties for a highlightable [[TreeNode]]\n * @public\n */\nexport interface HighlightableTreeNodeProps {\n  searchText: string;\n  activeMatchIndex?: number;\n}\n\n/**\n * Tree highlighting engine\n * @public\n */\nexport class HighlightingEngine {\n  private _searchText: string;\n  private _activeMatch?: ActiveMatchInfo;\n  public static readonly ACTIVE_CLASS_NAME = \"components-activehighlight\";\n\n  constructor(props: HighlightableTreeProps) {\n    this._searchText = props.searchText;\n    this._activeMatch = props.activeMatch;\n  }\n\n  public isNodeActive(node: { id?: string }) {\n    return this._activeMatch && node.id === this._activeMatch.nodeId;\n  }\n\n  public getActiveMatchIndex(node: { id?: string }) {\n    return this.isNodeActive(node) ? this._activeMatch!.matchIndex : undefined;\n  }\n\n  public createRenderProps(node: { id?: string }): HighlightableTreeNodeProps {\n    return {\n      searchText: this._searchText,\n      activeMatchIndex: this.getActiveMatchIndex(node),\n    };\n  }\n\n  public static renderNodeLabel(text: string, props: HighlightableTreeNodeProps): React.ReactNode {\n    if (props.searchText)\n      return (<HighlightedText text={text} {...props} />);\n    return text;\n  }\n}\n"]}
+{"version":3,"file":"HighlightingEngine.js","sourceRoot":"","sources":["../../../../src/components-react/tree/HighlightingEngine.tsx"],"names":[],"mappings":"AAAA;;;+FAG+F;AAC/F;;GAEG;AAEH,OAAO,2BAA2B,CAAC;AACnC,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,eAAe,EAAE,MAAM,2BAA2B,CAAC;AA+B5D;;;GAGG;AACH,MAAa,kBAAkB;IAK7B,YAAY,KAA6B;QACvC,IAAI,CAAC,WAAW,GAAG,KAAK,CAAC,UAAU,CAAC;QACpC,IAAI,CAAC,YAAY,GAAG,KAAK,CAAC,WAAW,CAAC;IACxC,CAAC;IAEM,YAAY,CAAC,IAAqB;QACvC,OAAO,IAAI,CAAC,YAAY,IAAI,IAAI,CAAC,EAAE,KAAK,IAAI,CAAC,YAAY,CAAC,MAAM,CAAC;IACnE,CAAC;IAEM,mBAAmB,CAAC,IAAqB;QAC9C,OAAO,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,YAAa,CAAC,UAAU,CAAC,CAAC,CAAC,SAAS,CAAC;IAC7E,CAAC;IAEM,iBAAiB,CAAC,IAAqB;QAC5C,OAAO;YACL,UAAU,EAAE,IAAI,CAAC,WAAW;YAC5B,gBAAgB,EAAE,IAAI,CAAC,mBAAmB,CAAC,IAAI,CAAC;SACjD,CAAC;IACJ,CAAC;IAEM,MAAM,CAAC,eAAe,CAAC,IAAY,EAAE,KAAiC;QAC3E,IAAI,KAAK,CAAC,UAAU;YAClB,OAAO,CAAC,oBAAC,eAAe,IAAC,IAAI,EAAE,IAAI,KAAM,KAAK,GAAI,CAAC,CAAC;QACtD,OAAO,IAAI,CAAC;IACd,CAAC;;AA1BsB,oCAAiB,GAAG,4BAA4B,CAAC;SAH7D,kBAAkB","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 Tree\r\n */\r\n\r\nimport \"./HighlightingEngine.scss\";\r\nimport * as React from \"react\";\r\nimport { HighlightedText } from \"../common/HighlightedText\";\r\n\r\n/**\r\n * Properties for identifying an active highlight on a node in a tree.\r\n * @see [[HighlightableTreeProps.activeMatch]]\r\n * @public\r\n */\r\nexport interface ActiveMatchInfo {\r\n  nodeId: string;\r\n  matchIndex: number;\r\n}\r\n\r\n/**\r\n * Properties for highlighting nodes in a tree.\r\n * @see [[ControlledTreeProps.nodeHighlightingProps]]\r\n * @public\r\n */\r\nexport interface HighlightableTreeProps {\r\n  searchText: string;\r\n  activeMatch?: ActiveMatchInfo;\r\n}\r\n\r\n/**\r\n * Properties for a highlightable [[TreeNode]]\r\n * @public\r\n */\r\nexport interface HighlightableTreeNodeProps {\r\n  searchText: string;\r\n  activeMatchIndex?: number;\r\n}\r\n\r\n/**\r\n * Tree highlighting engine\r\n * @public\r\n */\r\nexport class HighlightingEngine {\r\n  private _searchText: string;\r\n  private _activeMatch?: ActiveMatchInfo;\r\n  public static readonly ACTIVE_CLASS_NAME = \"components-activehighlight\";\r\n\r\n  constructor(props: HighlightableTreeProps) {\r\n    this._searchText = props.searchText;\r\n    this._activeMatch = props.activeMatch;\r\n  }\r\n\r\n  public isNodeActive(node: { id?: string }) {\r\n    return this._activeMatch && node.id === this._activeMatch.nodeId;\r\n  }\r\n\r\n  public getActiveMatchIndex(node: { id?: string }) {\r\n    return this.isNodeActive(node) ? this._activeMatch!.matchIndex : undefined;\r\n  }\r\n\r\n  public createRenderProps(node: { id?: string }): HighlightableTreeNodeProps {\r\n    return {\r\n      searchText: this._searchText,\r\n      activeMatchIndex: this.getActiveMatchIndex(node),\r\n    };\r\n  }\r\n\r\n  public static renderNodeLabel(text: string, props: HighlightableTreeNodeProps): React.ReactNode {\r\n    if (props.searchText)\r\n      return (<HighlightedText text={text} {...props} />);\r\n    return text;\r\n  }\r\n}\r\n"]}

package/lib/esm/components-react/tree/HighlightingEngine.scss

@@ -1,8 +1,8 @@
-/*---------------------------------------------------------------------------------------------
-* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
-* See LICENSE.md in the project root for license terms and full copyright notice.
-*--------------------------------------------------------------------------------------------*/
-
-.components-activehighlight {
-  background-color: orange;
+/*---------------------------------------------------------------------------------------------
+* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+* See LICENSE.md in the project root for license terms and full copyright notice.
+*--------------------------------------------------------------------------------------------*/
+
+.components-activehighlight {
+  background-color: orange;
 }

package/lib/esm/components-react/tree/ImageLoader.js.map

@@ -1 +1 @@
-{"version":3,"file":"ImageLoader.js","sourceRoot":"","sources":["../../../../src/components-react/tree/ImageLoader.ts"],"names":[],"mappings":"AAAA;;;+FAG+F;AAC/F;;GAEG;AAYH;;GAEG;AACH,MAAM,OAAO,eAAe;IAC1B,oDAAoD;IAC7C,IAAI,CAAC,IAAkB;QAC5B,IAAI,CAAC,IAAI,CAAC,IAAI;YACZ,OAAO,SAAS,CAAC;QAEnB,OAAO;YACL,UAAU,EAAE,cAAc;YAC1B,KAAK,EAAE,IAAI,CAAC,IAAI;SACjB,CAAC;IACJ,CAAC;CACF","sourcesContent":["/*---------------------------------------------------------------------------------------------\n* Copyright (c) Bentley Systems, Incorporated. All rights reserved.\n* See LICENSE.md in the project root for license terms and full copyright notice.\n*--------------------------------------------------------------------------------------------*/\n/** @packageDocumentation\n * @module Tree\n */\n\nimport { IImageLoader, LoadedImage } from \"../common/IImageLoader\";\nimport { TreeNodeItem } from \"./TreeDataProvider\";\n\n/** Interface for a tree image loader\n * @public\n */\nexport interface ITreeImageLoader extends IImageLoader {\n  load: (item: TreeNodeItem) => LoadedImage | undefined;\n}\n\n/** Default image loader for the tree\n * @public\n */\nexport class TreeImageLoader implements ITreeImageLoader {\n  /** Loads image data from either [[TreeNodeItem]] */\n  public load(item: TreeNodeItem): LoadedImage | undefined {\n    if (!item.icon)\n      return undefined;\n\n    return {\n      sourceType: \"webfont-icon\",\n      value: item.icon,\n    };\n  }\n}\n"]}
+{"version":3,"file":"ImageLoader.js","sourceRoot":"","sources":["../../../../src/components-react/tree/ImageLoader.ts"],"names":[],"mappings":"AAAA;;;+FAG+F;AAC/F;;GAEG;AAYH;;GAEG;AACH,MAAM,OAAO,eAAe;IAC1B,oDAAoD;IAC7C,IAAI,CAAC,IAAkB;QAC5B,IAAI,CAAC,IAAI,CAAC,IAAI;YACZ,OAAO,SAAS,CAAC;QAEnB,OAAO;YACL,UAAU,EAAE,cAAc;YAC1B,KAAK,EAAE,IAAI,CAAC,IAAI;SACjB,CAAC;IACJ,CAAC;CACF","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 Tree\r\n */\r\n\r\nimport { IImageLoader, LoadedImage } from \"../common/IImageLoader\";\r\nimport { TreeNodeItem } from \"./TreeDataProvider\";\r\n\r\n/** Interface for a tree image loader\r\n * @public\r\n */\r\nexport interface ITreeImageLoader extends IImageLoader {\r\n  load: (item: TreeNodeItem) => LoadedImage | undefined;\r\n}\r\n\r\n/** Default image loader for the tree\r\n * @public\r\n */\r\nexport class TreeImageLoader implements ITreeImageLoader {\r\n  /** Loads image data from either [[TreeNodeItem]] */\r\n  public load(item: TreeNodeItem): LoadedImage | undefined {\r\n    if (!item.icon)\r\n      return undefined;\r\n\r\n    return {\r\n      sourceType: \"webfont-icon\",\r\n      value: item.icon,\r\n    };\r\n  }\r\n}\r\n"]}

package/lib/esm/components-react/tree/SimpleTreeDataProvider.d.ts

@@ -9,7 +9,7 @@ import { ITreeDataProvider, TreeNodeItem } from "./TreeDataProvider";
  * value - Child tree node items.
  * @public
  */
-export declare type SimpleTreeDataProviderHierarchy = Map<string | undefined, TreeNodeItem[]>;
+export type SimpleTreeDataProviderHierarchy = Map<string | undefined, TreeNodeItem[]>;
 /**
  * A tree data provider using [[SimpleTreeDataProviderHierarchy]].
  * @public

package/lib/esm/components-react/tree/SimpleTreeDataProvider.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SimpleTreeDataProvider.d.ts","sourceRoot":"","sources":["../../../../src/components-react/tree/SimpleTreeDataProvider.ts"],"names":[],"mappings":"AAIA;;GAEG;AAEH,OAAO,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAC;AACpD,OAAO,EAAE,iBAAiB,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAC;AAErE;;;;;GAKG;AACH,oBAAY,+BAA+B,GAAG,GAAG,CAAC,MAAM,GAAG,SAAS,EAAE,YAAY,EAAE,CAAC,CAAC;AAEtF;;;GAGG;AACH,qBAAa,sBAAuB,YAAW,iBAAiB;IAC9D,OAAO,CAAC,UAAU,CAAkC;gBAEjC,SAAS,EAAE,+BAA+B;IAI7D,OAAO,CAAC,kBAAkB;IAiBb,QAAQ,CAAC,MAAM,CAAC,EAAE,YAAY,EAAE,WAAW,CAAC,EAAE,WAAW,GAAG,OAAO,CAAC,YAAY,EAAE,CAAC;IAInF,aAAa,CAAC,MAAM,CAAC,EAAE,YAAY,GAAG,OAAO,CAAC,MAAM,CAAC;CAGnE"}
+{"version":3,"file":"SimpleTreeDataProvider.d.ts","sourceRoot":"","sources":["../../../../src/components-react/tree/SimpleTreeDataProvider.ts"],"names":[],"mappings":"AAIA;;GAEG;AAEH,OAAO,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAC;AACpD,OAAO,EAAE,iBAAiB,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAC;AAErE;;;;;GAKG;AACH,MAAM,MAAM,+BAA+B,GAAG,GAAG,CAAC,MAAM,GAAG,SAAS,EAAE,YAAY,EAAE,CAAC,CAAC;AAEtF;;;GAGG;AACH,qBAAa,sBAAuB,YAAW,iBAAiB;IAC9D,OAAO,CAAC,UAAU,CAAkC;gBAEjC,SAAS,EAAE,+BAA+B;IAI7D,OAAO,CAAC,kBAAkB;IAiBb,QAAQ,CAAC,MAAM,CAAC,EAAE,YAAY,EAAE,WAAW,CAAC,EAAE,WAAW,GAAG,OAAO,CAAC,YAAY,EAAE,CAAC;IAInF,aAAa,CAAC,MAAM,CAAC,EAAE,YAAY,GAAG,OAAO,CAAC,MAAM,CAAC;CAGnE"}