@itwin/components-react 4.1.0 → 4.2.0-dev.1

package/lib/cjs/components-react/iconpicker/IconPickerButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"IconPickerButton.js","sourceRoot":"","sources":["../../../../src/components-react/iconpicker/IconPickerButton.tsx"],"names":[],"mappings":";AAAA;;;+FAG+F;AAC/F,4CAA4C;AAC5C;;GAEG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAEH,mCAAiC;AACjC,4DAAoC;AACpC,6CAA+B;AAC/B,0DAAyD;AAEzD,kDAAgD;AAChD,oEAA4D;AAY5D;;GAEG;AACH,uBAAuB;AACvB,MAAM,QAAS,SAAQ,KAAK,CAAC,aAA4B;IACvD,gBAAgB;IAChB,YAAY,KAAoB;QAC9B,KAAK,CAAC,KAAK,CAAC,CAAC;IACf,CAAC;IAEe,MAAM;QACpB,MAAM;QACJ,6DAA6D;QAC7D,OAAO,EAAE,IAAI,EAAE,qCAAqC;QACpD,GAAG,UAAU,EACd,GAAG,IAAI,CAAC,KAAK,CAAC;QAEf,MAAM,WAAW,GAAG,CAAC,EAAoB,EAAE,EAAE;YAC3C,IAAI,OAAO;gBACT,OAAO,EAAE,CAAC;QACd,CAAC,CAAC;QAEF,MAAM,OAAO,GAAG,IAAA,oBAAU,EAAC,wBAAwB,EAAE,IAAI,CAAC,KAAK,CAAC,SAAS,CAAC,CAAC;QAE3E,OAAO,CACL,mCAAY,UAAU,EAAE,SAAS,EAAE,OAAO,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,KAAK,EAAE,OAAO,EAAE,WAAW;YACvF,oBAAC,iBAAI,IAAC,QAAQ,EAAE,IAAI,CAAC,KAAK,CAAC,IAAI,GAAI,CAC5B,CACV,CAAC;IACJ,CAAC;CACF;AA6BD;;GAEG;AACH,uBAAuB;AACvB,MAAa,gBAAiB,SAAQ,KAAK,CAAC,aAA+C;IAQzF,gBAAgB;IAChB,YAAY,KAAsB;QAChC,KAAK,CAAC,KAAK,CAAC,CAAC;QATP,YAAO,GAAG,KAAK,CAAC,SAAS,EAAqB,CAAC;QAc/C,iBAAY,GAAG,GAAG,EAAE;YAC1B,IAAI,IAAI,CAAC,KAAK,CAAC,QAAQ;gBACrB,OAAO;YAET,IAAI,CAAC,QAAQ,CAAC,CAAC,SAAS,EAAE,EAAE,CAAC,CAAC,EAAE,SAAS,EAAE,CAAC,SAAS,CAAC,SAAS,EAAE,CAAC,CAAC,CAAC;QACtE,CAAC,CAAC;QAEM,gBAAW,GAAG,GAAG,EAAE;YACzB,IAAI,CAAC,QAAQ,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE,CAAC,CAAC;QACtC,CAAC,CAAC;QAEM,sBAAiB,GAAG,CAAC,IAAY,EAAE,EAAE;YAC3C,IAAI,CAAC,QAAQ,CACX,EAAE,SAAS,EAAE,KAAK,EAAE,IAAI,EAAE,EAC1B,GAAG,EAAE;gBACH,uBAAuB;gBACvB,IAAI,IAAI,CAAC,KAAK,CAAC,YAAY;oBACzB,IAAI,CAAC,KAAK,CAAC,YAAY,CAAC,IAAI,CAAC,CAAC;YAClC,CAAC,CAAC,CAAC;QACP,CAAC,CAAC;QAtBA,IAAI,CAAC,KAAK,GAAG,EAAE,SAAS,EAAE,KAAK,EAAE,IAAI,EAAE,IAAI,CAAC,KAAK,CAAC,IAAI,EAAE,CAAC;IAC3D,CAAC;IAuBO,WAAW,CAAC,KAAyB;QAC3C,MAAM,cAAc,GAAwB,EAAE,mBAAmB,EAAE,UAAU,IAAI,CAAC,KAAK,CAAC,UAAU,QAAQ,EAAE,CAAC;QAC7G,OAAO,CACL,6BAAK,SAAS,EAAC,uCAAuC;YACnD,KAAK,IAAI,gCAAK,KAAK,CAAM;YAC1B,4CAAiB,mCAAmC,EAAC,SAAS,EAAC,mCAAmC,EAAC,KAAK,EAAE,cAAc,IACrH,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,IAAY,EAAE,KAAa,EAAE,EAAE,CAAC,oBAAC,QAAQ,IAAC,GAAG,EAAE,KAAK,EAAE,IAAI,EAAE,IAAI,EAAE,OAAO,EAAE,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,IAAI,EAAE,IAAI,CAAC,GAAI,CAAC,CAC1I,CACF,CACP,CAAC;IACJ,CAAC;IAED,gBAAgB;IACA,MAAM;QACpB,MAAM,WAAW,GAAG,EAAE,GAAG,IAAI,CAAC,KAAK,CAAC,KAAK,EAAyB,CAAC;QACnE,MAAM,gBAAgB,GAAG,IAAA,oBAAU,EAAC,8BAA8B,EAChE,IAAI,CAAC,KAAK,CAAC,QAAQ,IAAI,UAAU,EACjC,IAAI,CAAC,KAAK,CAAC,SAAS,CACrB,CAAC;QAEF,OAAO,CACL;YACE,+CAAoB,8BAA8B,EAAC,OAAO,EAAE,IAAI,CAAC,YAAY,EAAE,SAAS,EAAE,gBAAgB,EAAE,KAAK,EAAE,WAAW,EAAE,QAAQ,EAAE,IAAI,CAAC,KAAK,CAAC,QAAQ,EAAE,GAAG,EAAE,IAAI,CAAC,OAAO;gBAC9K,oBAAC,iBAAI,IAAC,SAAS,EAAC,0BAA0B,EAAC,QAAQ,EAAE,IAAI,CAAC,KAAK,CAAC,IAAI,GAAI;gBACxE,8BAAM,SAAS,EAAC,MAAM;;oBAAE,oBAAC,iBAAI,IAAC,QAAQ,EAAE,oBAAC,oCAAc,OAAG,GAAI;wBAAQ,CAC/D;YACT,oBAAC,kBAAK,IACJ,SAAS,EAAC,6BAA6B,EACvC,MAAM,EAAE,IAAI,CAAC,KAAK,CAAC,SAAS,EAC5B,QAAQ,EAAE,iCAAgB,CAAC,UAAU,EACrC,OAAO,EAAE,IAAI,CAAC,WAAW,EACzB,MAAM,EAAE,IAAI,CAAC,OAAO,CAAC,OAAO,IAC3B,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,KAAK,CAAC,aAAa,CAAC,CACrC,CACP,CACJ,CAAC;IACJ,CAAC;;AArED,gBAAgB;AACF,6BAAY,GAA6B;IACrD,UAAU,EAAE,CAAC;CACd,AAFyB,CAExB;AANS,4CAAgB","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/* eslint-disable deprecation/deprecation */\r\n/** @packageDocumentation\r\n * @module IconPicker\r\n */\r\n\r\nimport \"./IconPickerButton.scss\";\r\nimport classnames from \"classnames\";\r\nimport * as React from \"react\";\r\nimport { RelativePosition } from \"@itwin/appui-abstract\";\r\nimport type { CommonProps} from \"@itwin/core-react\";\r\nimport { Icon, Popup } from \"@itwin/core-react\";\r\nimport { SvgChevronDown } from \"@itwin/itwinui-icons-react\";\r\n\r\n/** Properties for the [[IconItem]] React component\r\n * @internal\r\n */\r\ninterface IconItemProps extends React.ButtonHTMLAttributes<HTMLButtonElement>, CommonProps {\r\n  /** icon specification */\r\n  icon: string;\r\n  /** function to run when user selects icon */\r\n  onClick?: () => void;\r\n}\r\n\r\n/** IconItem Functional component\r\n * @internal\r\n */\r\n// istanbul ignore next\r\nclass IconItem extends React.PureComponent<IconItemProps> {\r\n  /** @internal */\r\n  constructor(props: IconItemProps) {\r\n    super(props);\r\n  }\r\n\r\n  public override render() {\r\n    const {\r\n      // eslint-disable-next-line @typescript-eslint/no-unused-vars\r\n      onClick, icon, // do not pass on item specific props\r\n      ...otherProps\r\n    } = this.props;\r\n\r\n    const handleClick = (_e: React.MouseEvent) => {\r\n      if (onClick)\r\n        onClick();\r\n    };\r\n\r\n    const classes = classnames(\"components-icon-swatch\", this.props.className);\r\n\r\n    return (\r\n      <button {...otherProps} className={classes} style={this.props.style} onClick={handleClick}>\r\n        <Icon iconSpec={this.props.icon} />\r\n      </button>\r\n    );\r\n  }\r\n}\r\n\r\n/** Properties for the [[IconPicker]] React component\r\n * @internal\r\n */\r\n// istanbul ignore next\r\nexport interface IconPickerProps extends React.ButtonHTMLAttributes<HTMLButtonElement>, CommonProps {\r\n  /** active string */\r\n  icon: string;\r\n  /** available icons */\r\n  icons: string[];\r\n  /** function to run when user selects icon */\r\n  onIconChange?: ((icon: string) => void) | undefined;\r\n  /** Disabled or not */\r\n  disabled?: boolean;\r\n  /** Readonly or not */\r\n  readonly?: boolean;\r\n  /** Title to show at top of DropDown */\r\n  dropDownTitle?: string;\r\n  /** Number of columns */\r\n  numColumns: number;\r\n}\r\n\r\n/** @internal */\r\ninterface IconPickerState {\r\n  showPopup: boolean;\r\n  icon: string;\r\n}\r\n\r\n/** IconPickerButton component\r\n * @internal\r\n */\r\n// istanbul ignore next\r\nexport class IconPickerButton extends React.PureComponent<IconPickerProps, IconPickerState> {\r\n  private _target = React.createRef<HTMLButtonElement>();\r\n\r\n  /** @internal */\r\n  public static defaultProps: Partial<IconPickerProps> = {\r\n    numColumns: 4,\r\n  };\r\n\r\n  /** @internal */\r\n  constructor(props: IconPickerProps) {\r\n    super(props);\r\n\r\n    this.state = { showPopup: false, icon: this.props.icon };\r\n  }\r\n\r\n  private _togglePopup = () => {\r\n    if (this.props.readonly)\r\n      return;\r\n\r\n    this.setState((prevState) => ({ showPopup: !prevState.showPopup }));\r\n  };\r\n\r\n  private _closePopup = () => {\r\n    this.setState({ showPopup: false });\r\n  };\r\n\r\n  private _handleIconPicked = (icon: string) => {\r\n    this.setState(\r\n      { showPopup: false, icon },\r\n      () => {\r\n        // istanbul ignore else\r\n        if (this.props.onIconChange)\r\n          this.props.onIconChange(icon);\r\n      });\r\n  };\r\n\r\n  private renderPopup(title: string | undefined) {\r\n    const containerStyle: React.CSSProperties = { gridTemplateColumns: `repeat(${this.props.numColumns}, 1fr)` };\r\n    return (\r\n      <div className=\"components-iconpicker-popup-container\">\r\n        {title && <h4>{title}</h4>}\r\n        <div data-testid=\"components-iconpicker-popup-icons\" className=\"components-iconpicker-popup-icons\" style={containerStyle}>\r\n          {this.props.icons.map((icon: string, index: number) => <IconItem key={index} icon={icon} onClick={this._handleIconPicked.bind(this, icon)} />)}\r\n        </div>\r\n      </div>\r\n    );\r\n  }\r\n\r\n  /** @internal */\r\n  public override render() {\r\n    const buttonStyle = { ...this.props.style } as React.CSSProperties;\r\n    const buttonClassNames = classnames(\"components-iconpicker-button\",\r\n      this.props.readonly && \"readonly\",\r\n      this.props.className,\r\n    );\r\n\r\n    return (\r\n      <>\r\n        <button data-testid=\"components-iconpicker-button\" onClick={this._togglePopup} className={buttonClassNames} style={buttonStyle} disabled={this.props.disabled} ref={this._target}>\r\n          <Icon className=\"iconpicker-button-sprite\" iconSpec={this.state.icon} />\r\n          <span className=\"icon\"> <Icon iconSpec={<SvgChevronDown />} /> </span>\r\n        </button>\r\n        <Popup\r\n          className=\"components-iconpicker-popup\"\r\n          isOpen={this.state.showPopup}\r\n          position={RelativePosition.BottomLeft}\r\n          onClose={this._closePopup}\r\n          target={this._target.current}>\r\n          {this.renderPopup(this.props.dropDownTitle)}\r\n        </Popup>\r\n      </>\r\n    );\r\n  }\r\n\r\n}\r\n"]}
+{"version":3,"file":"IconPickerButton.js","sourceRoot":"","sources":["../../../../src/components-react/iconpicker/IconPickerButton.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 IconPicker\n */\n\nimport \"./IconPickerButton.scss\";\nimport classnames from \"classnames\";\nimport * as React from \"react\";\nimport { RelativePosition } from \"@itwin/appui-abstract\";\nimport type { CommonProps } from \"@itwin/core-react\";\nimport { Icon, Popup } from \"@itwin/core-react\";\nimport { SvgChevronDown } from \"@itwin/itwinui-icons-react\";\n\n/** Properties for the [[IconItem]] React component\n * @internal\n */\ninterface IconItemProps\n  extends React.ButtonHTMLAttributes<HTMLButtonElement>,\n    CommonProps {\n  /** icon specification */\n  icon: string;\n  /** function to run when user selects icon */\n  onClick?: () => void;\n}\n\n/** IconItem Functional component\n * @internal\n */\n// istanbul ignore next\nclass IconItem extends React.PureComponent<IconItemProps> {\n  /** @internal */\n  constructor(props: IconItemProps) {\n    super(props);\n  }\n\n  public override render() {\n    const {\n      onClick,\n      icon, // do not pass on item specific props\n      ...otherProps\n    } = this.props;\n\n    const handleClick = (_e: React.MouseEvent) => {\n      if (onClick) onClick();\n    };\n\n    const classes = classnames(\"components-icon-swatch\", this.props.className);\n\n    return (\n      <button\n        {...otherProps}\n        className={classes}\n        style={this.props.style}\n        onClick={handleClick}\n      >\n        <Icon iconSpec={icon} />\n      </button>\n    );\n  }\n}\n\n/** Properties for the [[IconPicker]] React component\n * @internal\n */\n// istanbul ignore next\nexport interface IconPickerProps\n  extends React.ButtonHTMLAttributes<HTMLButtonElement>,\n    CommonProps {\n  /** active string */\n  icon: string;\n  /** available icons */\n  icons: string[];\n  /** function to run when user selects icon */\n  onIconChange?: ((icon: string) => void) | undefined;\n  /** Disabled or not */\n  disabled?: boolean;\n  /** Readonly or not */\n  readonly?: boolean;\n  /** Title to show at top of DropDown */\n  dropDownTitle?: string;\n  /** Number of columns */\n  numColumns: number;\n}\n\n/** @internal */\ninterface IconPickerState {\n  showPopup: boolean;\n  icon: string;\n}\n\n/** IconPickerButton component\n * @internal\n */\n// istanbul ignore next\nexport class IconPickerButton extends React.PureComponent<\n  IconPickerProps,\n  IconPickerState\n> {\n  private _target = React.createRef<HTMLButtonElement>();\n\n  /** @internal */\n  public static defaultProps: Partial<IconPickerProps> = {\n    numColumns: 4,\n  };\n\n  /** @internal */\n  constructor(props: IconPickerProps) {\n    super(props);\n\n    this.state = { showPopup: false, icon: this.props.icon };\n  }\n\n  private _togglePopup = () => {\n    if (this.props.readonly) return;\n\n    this.setState((prevState) => ({ showPopup: !prevState.showPopup }));\n  };\n\n  private _closePopup = () => {\n    this.setState({ showPopup: false });\n  };\n\n  private _handleIconPicked = (icon: string) => {\n    this.setState({ showPopup: false, icon }, () => {\n      // istanbul ignore else\n      if (this.props.onIconChange) this.props.onIconChange(icon);\n    });\n  };\n\n  private renderPopup(title: string | undefined) {\n    const containerStyle: React.CSSProperties = {\n      gridTemplateColumns: `repeat(${this.props.numColumns}, 1fr)`,\n    };\n    return (\n      <div className=\"components-iconpicker-popup-container\">\n        {title && <h4>{title}</h4>}\n        <div\n          data-testid=\"components-iconpicker-popup-icons\"\n          className=\"components-iconpicker-popup-icons\"\n          style={containerStyle}\n        >\n          {this.props.icons.map((icon: string, index: number) => (\n            <IconItem\n              key={index}\n              icon={icon}\n              onClick={this._handleIconPicked.bind(this, icon)}\n            />\n          ))}\n        </div>\n      </div>\n    );\n  }\n\n  /** @internal */\n  public override render() {\n    const buttonStyle = { ...this.props.style } as React.CSSProperties;\n    const buttonClassNames = classnames(\n      \"components-iconpicker-button\",\n      this.props.readonly && \"readonly\",\n      this.props.className\n    );\n\n    return (\n      <>\n        <button\n          data-testid=\"components-iconpicker-button\"\n          onClick={this._togglePopup}\n          className={buttonClassNames}\n          style={buttonStyle}\n          disabled={this.props.disabled}\n          ref={this._target}\n        >\n          <Icon\n            className=\"iconpicker-button-sprite\"\n            iconSpec={this.state.icon}\n          />\n          <span className=\"icon\">\n            {\" \"}\n            <Icon iconSpec={<SvgChevronDown />} />{\" \"}\n          </span>\n        </button>\n        <Popup\n          className=\"components-iconpicker-popup\"\n          isOpen={this.state.showPopup}\n          position={RelativePosition.BottomLeft}\n          onClose={this._closePopup}\n          target={this._target.current}\n        >\n          {this.renderPopup(this.props.dropDownTitle)}\n        </Popup>\n      </>\n    );\n  }\n}\n"]}

package/lib/cjs/components-react/iconpicker/IconPickerButton.scss

@@ -1,75 +1,75 @@
-/*---------------------------------------------------------------------------------------------
-* 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/z-index";
-
-.components-iconpicker-button {
-  color: var(--iui-color-text);
-  background: $buic-background-control;
-  box-sizing: border-box;
-  border: 1px solid var(--iui-color-border-foreground);
-  border-radius: var(--iui-border-radius-1);
-  display: flex;
-  align-items: center;
-  width: fit-content;
-
-  .iconpicker-button-sprite {
-    width: 18px;
-    height: 18px;
-    margin: 4px;
-  }
-
-  .icon {
-    margin-left: 4px;
-    font-size: 10px;
-    transition: color 0.1s ease;
-  }
-
-  &:not(.readonly) {
-    cursor: pointer;
-  }
-
-  &:hover .icon {
-    color: var(--iui-color-text-accent);
-  }
-}
-
-.components-iconpicker-popup {
-  border: 1px solid var(--iui-color-border-foreground);
-  @include uicore-z-index(dialog-popup);
-
-  .components-iconpicker-popup-container {
-    color: var(--iui-color-text);
-    background: $buic-background-control;
-
-    .components-iconpicker-popup-icons {
-      display: grid;
-      grid-gap: 8px;
-      padding: 8px;
-
-      .components-icon-swatch {
-        width: 34px;
-        height: 34px;
-        padding: 4px;
-        border-width: 1px;
-        border-radius: var(--iui-border-radius-1);
-        border-style: solid;
-        border-color: rgba(0, 0, 0, 0.2);
-        background: $buic-background-control;
-        transition: scale 0.2s ease;
-        cursor: pointer;
-        outline: none;
-
-        &:hover {
-          transform: scale(1.15);
-        }
-
-        &[disabled] {
-          opacity: 0.2;
-        }
-      }
-    }
-  }
-}
+/*---------------------------------------------------------------------------------------------
+* 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/z-index";
+
+.components-iconpicker-button {
+  color: var(--iui-color-text);
+  background: $buic-background-control;
+  box-sizing: border-box;
+  border: 1px solid var(--iui-color-border-foreground);
+  border-radius: var(--iui-border-radius-1);
+  display: flex;
+  align-items: center;
+  width: fit-content;
+
+  .iconpicker-button-sprite {
+    width: 18px;
+    height: 18px;
+    margin: 4px;
+  }
+
+  .icon {
+    margin-left: 4px;
+    font-size: 10px;
+    transition: color 0.1s ease;
+  }
+
+  &:not(.readonly) {
+    cursor: pointer;
+  }
+
+  &:hover .icon {
+    color: var(--iui-color-text-accent);
+  }
+}
+
+.components-iconpicker-popup {
+  border: 1px solid var(--iui-color-border-foreground);
+  @include uicore-z-index(dialog-popup);
+
+  .components-iconpicker-popup-container {
+    color: var(--iui-color-text);
+    background: $buic-background-control;
+
+    .components-iconpicker-popup-icons {
+      display: grid;
+      grid-gap: 8px;
+      padding: 8px;
+
+      .components-icon-swatch {
+        width: 34px;
+        height: 34px;
+        padding: 4px;
+        border-width: 1px;
+        border-radius: var(--iui-border-radius-1);
+        border-style: solid;
+        border-color: rgba(0, 0, 0, 0.2);
+        background: $buic-background-control;
+        transition: scale 0.2s ease;
+        cursor: pointer;
+        outline: none;
+
+        &:hover {
+          transform: scale(1.15);
+        }
+
+        &[disabled] {
+          opacity: 0.2;
+        }
+      }
+    }
+  }
+}

package/lib/cjs/components-react/inputs/ParsedInput.d.ts

@@ -25,5 +25,5 @@ export interface ParsedInputProps extends CommonProps {
 /** Generic Input component that requires formatting and parsing functions to be passed in as props.
  * @public
  */
-export declare const ParsedInput: (props: ParsedInputProps) => JSX.Element | null;
+export declare const ParsedInput: (props: ParsedInputProps) => React.ReactElement | null;
 //# sourceMappingURL=ParsedInput.d.ts.map

package/lib/cjs/components-react/inputs/ParsedInput.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ParsedInput.d.ts","sourceRoot":"","sources":["../../../../src/components-react/inputs/ParsedInput.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAEH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AACrD,OAAO,KAAK,EAAE,YAAY,EAAC,MAAM,uBAAuB,CAAC;AAEzD,OAAO,oBAAoB,CAAC;AAE5B;;GAEG;AACH,MAAM,WAAW,gBAAiB,SAAQ,WAAW;IACnD,0EAA0E;IAC1E,YAAY,EAAE,MAAM,CAAC;IACrB,wCAAwC;IACxC,WAAW,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;IACvC,qDAAqD;IACrD,WAAW,EAAE,CAAC,WAAW,EAAE,MAAM,KAAK,YAAY,CAAC;IACnD,6CAA6C;IAC7C,QAAQ,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IACtC,8DAA8D;IAC9D,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,+DAA+D;IAC/D,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,gBAAgB,CAAC,CAAC;CACnC;AAmFD;;GAEG;AACH,eAAO,MAAM,WAAW,EAAE,CAAC,KAAK,EAAE,gBAAgB,KAAK,GAAG,CAAC,OAAO,GAAG,IAA4B,CAAC"}
+{"version":3,"file":"ParsedInput.d.ts","sourceRoot":"","sources":["../../../../src/components-react/inputs/ParsedInput.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAEH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AACrD,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,uBAAuB,CAAC;AAE1D,OAAO,oBAAoB,CAAC;AAE5B;;GAEG;AACH,MAAM,WAAW,gBAAiB,SAAQ,WAAW;IACnD,0EAA0E;IAC1E,YAAY,EAAE,MAAM,CAAC;IACrB,wCAAwC;IACxC,WAAW,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;IACvC,qDAAqD;IACrD,WAAW,EAAE,CAAC,WAAW,EAAE,MAAM,KAAK,YAAY,CAAC;IACnD,6CAA6C;IAC7C,QAAQ,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IACtC,8DAA8D;IAC9D,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,+DAA+D;IAC/D,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,gBAAgB,CAAC,CAAC;CACnC;AA+HD;;GAEG;AACH,eAAO,MAAM,WAAW,EAAE,CACxB,KAAK,EAAE,gBAAgB,KACpB,KAAK,CAAC,YAAY,GAAG,IAA4B,CAAC"}

package/lib/cjs/components-react/inputs/ParsedInput.js

@@ -1,8 +1,8 @@
 "use strict";
 /*---------------------------------------------------------------------------------------------
-* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
-* See LICENSE.md in the project root for license terms and full copyright notice.
-*--------------------------------------------------------------------------------------------*/
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
 /** @packageDocumentation
  * @module Inputs
  */
@@ -39,7 +39,7 @@ const classnames_1 = __importDefault(require("classnames"));
 const itwinui_react_1 = require("@itwin/itwinui-react");
 const appui_abstract_1 = require("@itwin/appui-abstract");
 require("./ParsedInput.scss");
-const ForwardRefParsedInput = React.forwardRef(function ForwardRefParsedInput({ initialValue, formatValue, parseString, readonly, className, style, onChange }, ref) {
+const ForwardRefParsedInput = React.forwardRef(function ForwardRefParsedInput({ initialValue, formatValue, parseString, readonly, className, style, onChange, }, ref) {
     const currentValueRef = React.useRef(initialValue);
     const isMountedRef = React.useRef(false);
     const lastFormattedValueRef = React.useRef(formatValue(initialValue));
@@ -67,11 +67,12 @@ const ForwardRefParsedInput = React.forwardRef(function ForwardRefParsedInput({
     const updateValueFromString = React.useCallback((strVal) => {
         if (lastFormattedValueRef.current === strVal)
             return;
-        const parseResults = (parseString(strVal));
+        const parseResults = parseString(strVal);
         // istanbul ignore else
         if (!parseResults.parseError) {
             // istanbul ignore else
-            if (undefined !== parseResults.value && typeof parseResults.value === "number") {
+            if (undefined !== parseResults.value &&
+                typeof parseResults.value === "number") {
                 const currentValue = parseResults.value;
                 // istanbul ignore else
                 if (currentValue !== currentValueRef.current) {
@@ -106,7 +107,7 @@ const ForwardRefParsedInput = React.forwardRef(function ForwardRefParsedInput({
         }
     }, [formatValue, updateValueFromString]);
     const classNames = (0, classnames_1.default)(className, "components-parsed-input", hasBadInput && "components-parsed-input-has-error");
-    return React.createElement(itwinui_react_1.Input, { "data-testid": "components-parsed-input", ref: ref, style: style, className: classNames, onKeyDown: handleKeyDown, onBlur: handleBlur, onChange: handleChange, value: formattedValue, disabled: readonly, size: "small" });
+    return (React.createElement(itwinui_react_1.Input, { "data-testid": "components-parsed-input", ref: ref, style: style, className: classNames, onKeyDown: handleKeyDown, onBlur: handleBlur, onChange: handleChange, value: formattedValue, disabled: readonly, size: "small" }));
 });
 /** Generic Input component that requires formatting and parsing functions to be passed in as props.
  * @public

package/lib/cjs/components-react/inputs/ParsedInput.js.map

@@ -1 +1 @@
-{"version":3,"file":"ParsedInput.js","sourceRoot":"","sources":["../../../../src/components-react/inputs/ParsedInput.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 Inputs\r\n */\r\n\r\nimport * as React from \"react\";\r\nimport classnames from \"classnames\";\r\nimport { Input } from \"@itwin/itwinui-react\";\r\nimport type { CommonProps } from \"@itwin/core-react\";\r\nimport type { ParseResults} from \"@itwin/appui-abstract\";\r\nimport { SpecialKey } from \"@itwin/appui-abstract\";\r\nimport \"./ParsedInput.scss\";\r\n\r\n/** Props for [[ParsedInput]] control\r\n * @public\r\n */\r\nexport interface ParsedInputProps extends CommonProps {\r\n  /** InitialValue which is used to restore input field if ESC is pressed */\r\n  initialValue: number;\r\n  /** Function used to format the value */\r\n  formatValue: (value: number) => string;\r\n  /** Function used to parse user input into a value */\r\n  parseString: (stringValue: string) => ParseResults;\r\n  /** Function to call when value is changed */\r\n  onChange?: (newValue: number) => void;\r\n  /** if readonly then only the formatValue function is used. */\r\n  readonly?: boolean;\r\n  /** Provides ability to return reference to HTMLInputElement */\r\n  ref?: React.Ref<HTMLInputElement>;\r\n}\r\n\r\nconst ForwardRefParsedInput = React.forwardRef<HTMLInputElement, ParsedInputProps>(\r\n  function ForwardRefParsedInput({ initialValue, formatValue, parseString, readonly, className, style, onChange }, ref) {\r\n    const currentValueRef = React.useRef(initialValue);\r\n    const isMountedRef = React.useRef(false);\r\n    const lastFormattedValueRef = React.useRef(formatValue(initialValue));\r\n    const [formattedValue, setFormattedValue] = React.useState(() => lastFormattedValueRef.current);\r\n    const [hasBadInput, setHasBadInput] = React.useState(false);\r\n\r\n    React.useEffect(() => {\r\n      isMountedRef.current = true;\r\n      return () => {\r\n        isMountedRef.current = false;\r\n      };\r\n    }, []);\r\n\r\n    // See if new initialValue props have changed since component mounted\r\n    React.useEffect(() => {\r\n      currentValueRef.current = initialValue;\r\n      const currentFormattedValue = formatValue(currentValueRef.current);\r\n      if (currentFormattedValue !== lastFormattedValueRef.current) {\r\n        lastFormattedValueRef.current = currentFormattedValue;\r\n        setFormattedValue(lastFormattedValueRef.current);\r\n        setHasBadInput(false);\r\n      }\r\n    }, [formatValue, initialValue]);\r\n\r\n    const handleChange = React.useCallback((event: React.ChangeEvent<HTMLInputElement>) => {\r\n      setFormattedValue(event.currentTarget.value);\r\n    }, []);\r\n\r\n    const updateValueFromString = React.useCallback((strVal: string) => {\r\n      if (lastFormattedValueRef.current === strVal)\r\n        return;\r\n\r\n      const parseResults = (parseString(strVal));\r\n      // istanbul ignore else\r\n      if (!parseResults.parseError) {\r\n        // istanbul ignore else\r\n        if (undefined !== parseResults.value && typeof parseResults.value === \"number\") {\r\n          const currentValue = parseResults.value;\r\n          // istanbul ignore else\r\n          if (currentValue !== currentValueRef.current) {\r\n            currentValueRef.current = currentValue;\r\n            onChange && onChange(currentValueRef.current);\r\n          }\r\n          // istanbul ignore else\r\n          if (isMountedRef.current) {\r\n            lastFormattedValueRef.current = formatValue(currentValue);\r\n            setFormattedValue(lastFormattedValueRef.current);\r\n            setHasBadInput(false);\r\n          }\r\n        }\r\n      } else {\r\n        setHasBadInput(true);\r\n      }\r\n    }, [formatValue, onChange, parseString]);\r\n\r\n    const handleBlur = React.useCallback((event: React.FocusEvent<HTMLInputElement>) => {\r\n      updateValueFromString(event.target.value);\r\n    }, [updateValueFromString]);\r\n\r\n    const handleKeyDown = React.useCallback((event: React.KeyboardEvent<HTMLInputElement>) => {\r\n      // istanbul ignore else\r\n      if (event.key === SpecialKey.Enter) {\r\n        updateValueFromString(event.currentTarget.value);\r\n        event.preventDefault();\r\n      }\r\n      if (event.key === SpecialKey.Escape) {\r\n        setFormattedValue(formatValue(currentValueRef.current));\r\n        setHasBadInput(false);\r\n        event.preventDefault();\r\n      }\r\n    }, [formatValue, updateValueFromString]);\r\n\r\n    const classNames = classnames(className, \"components-parsed-input\", hasBadInput && \"components-parsed-input-has-error\");\r\n\r\n    return <Input data-testid=\"components-parsed-input\" ref={ref} style={style} className={classNames} onKeyDown={handleKeyDown} onBlur={handleBlur}\r\n      onChange={handleChange} value={formattedValue} disabled={readonly} size=\"small\" />;\r\n  }\r\n);\r\n\r\n/** Generic Input component that requires formatting and parsing functions to be passed in as props.\r\n * @public\r\n */\r\nexport const ParsedInput: (props: ParsedInputProps) => JSX.Element | null = ForwardRefParsedInput;\r\n\r\n"]}
+{"version":3,"file":"ParsedInput.js","sourceRoot":"","sources":["../../../../src/components-react/inputs/ParsedInput.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 Inputs\n */\n\nimport * as React from \"react\";\nimport classnames from \"classnames\";\nimport { Input } from \"@itwin/itwinui-react\";\nimport type { CommonProps } from \"@itwin/core-react\";\nimport type { ParseResults } from \"@itwin/appui-abstract\";\nimport { SpecialKey } from \"@itwin/appui-abstract\";\nimport \"./ParsedInput.scss\";\n\n/** Props for [[ParsedInput]] control\n * @public\n */\nexport interface ParsedInputProps extends CommonProps {\n  /** InitialValue which is used to restore input field if ESC is pressed */\n  initialValue: number;\n  /** Function used to format the value */\n  formatValue: (value: number) => string;\n  /** Function used to parse user input into a value */\n  parseString: (stringValue: string) => ParseResults;\n  /** Function to call when value is changed */\n  onChange?: (newValue: number) => void;\n  /** if readonly then only the formatValue function is used. */\n  readonly?: boolean;\n  /** Provides ability to return reference to HTMLInputElement */\n  ref?: React.Ref<HTMLInputElement>;\n}\n\nconst ForwardRefParsedInput = React.forwardRef<\n  HTMLInputElement,\n  ParsedInputProps\n>(function ForwardRefParsedInput(\n  {\n    initialValue,\n    formatValue,\n    parseString,\n    readonly,\n    className,\n    style,\n    onChange,\n  },\n  ref\n) {\n  const currentValueRef = React.useRef(initialValue);\n  const isMountedRef = React.useRef(false);\n  const lastFormattedValueRef = React.useRef(formatValue(initialValue));\n  const [formattedValue, setFormattedValue] = React.useState(\n    () => lastFormattedValueRef.current\n  );\n  const [hasBadInput, setHasBadInput] = React.useState(false);\n\n  React.useEffect(() => {\n    isMountedRef.current = true;\n    return () => {\n      isMountedRef.current = false;\n    };\n  }, []);\n\n  // See if new initialValue props have changed since component mounted\n  React.useEffect(() => {\n    currentValueRef.current = initialValue;\n    const currentFormattedValue = formatValue(currentValueRef.current);\n    if (currentFormattedValue !== lastFormattedValueRef.current) {\n      lastFormattedValueRef.current = currentFormattedValue;\n      setFormattedValue(lastFormattedValueRef.current);\n      setHasBadInput(false);\n    }\n  }, [formatValue, initialValue]);\n\n  const handleChange = React.useCallback(\n    (event: React.ChangeEvent<HTMLInputElement>) => {\n      setFormattedValue(event.currentTarget.value);\n    },\n    []\n  );\n\n  const updateValueFromString = React.useCallback(\n    (strVal: string) => {\n      if (lastFormattedValueRef.current === strVal) return;\n\n      const parseResults = parseString(strVal);\n      // istanbul ignore else\n      if (!parseResults.parseError) {\n        // istanbul ignore else\n        if (\n          undefined !== parseResults.value &&\n          typeof parseResults.value === \"number\"\n        ) {\n          const currentValue = parseResults.value;\n          // istanbul ignore else\n          if (currentValue !== currentValueRef.current) {\n            currentValueRef.current = currentValue;\n            onChange && onChange(currentValueRef.current);\n          }\n          // istanbul ignore else\n          if (isMountedRef.current) {\n            lastFormattedValueRef.current = formatValue(currentValue);\n            setFormattedValue(lastFormattedValueRef.current);\n            setHasBadInput(false);\n          }\n        }\n      } else {\n        setHasBadInput(true);\n      }\n    },\n    [formatValue, onChange, parseString]\n  );\n\n  const handleBlur = React.useCallback(\n    (event: React.FocusEvent<HTMLInputElement>) => {\n      updateValueFromString(event.target.value);\n    },\n    [updateValueFromString]\n  );\n\n  const handleKeyDown = React.useCallback(\n    (event: React.KeyboardEvent<HTMLInputElement>) => {\n      // istanbul ignore else\n      if (event.key === SpecialKey.Enter) {\n        updateValueFromString(event.currentTarget.value);\n        event.preventDefault();\n      }\n      if (event.key === SpecialKey.Escape) {\n        setFormattedValue(formatValue(currentValueRef.current));\n        setHasBadInput(false);\n        event.preventDefault();\n      }\n    },\n    [formatValue, updateValueFromString]\n  );\n\n  const classNames = classnames(\n    className,\n    \"components-parsed-input\",\n    hasBadInput && \"components-parsed-input-has-error\"\n  );\n\n  return (\n    <Input\n      data-testid=\"components-parsed-input\"\n      ref={ref}\n      style={style}\n      className={classNames}\n      onKeyDown={handleKeyDown}\n      onBlur={handleBlur}\n      onChange={handleChange}\n      value={formattedValue}\n      disabled={readonly}\n      size=\"small\"\n    />\n  );\n});\n\n/** Generic Input component that requires formatting and parsing functions to be passed in as props.\n * @public\n */\nexport const ParsedInput: (\n  props: ParsedInputProps\n) => React.ReactElement | null = ForwardRefParsedInput;\n"]}

package/lib/cjs/components-react/inputs/ParsedInput.scss

@@ -1,24 +1,24 @@
-/*---------------------------------------------------------------------------------------------
-* 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/inputs/variables";
-
-.components-parsed-input {
-  width: auto;
-
-  &.components-parsed-input-has-error {
-    color: var(--iui-color-text-negative);
-    font-weight: bold;
-  }
-
-  &.components-parsed-input[disabled] {
-    color: var(--iui-color-text);
-    opacity: 0.65;
-  }
-
-  &.iui-input {
-    padding: $uicore-iui-input-padding;
-  }
-}
+/*---------------------------------------------------------------------------------------------
+ * 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/inputs/variables";
+
+.components-parsed-input {
+  width: auto;
+
+  &.components-parsed-input-has-error {
+    color: var(--iui-color-text-negative);
+    font-weight: bold;
+  }
+
+  &.components-parsed-input[disabled] {
+    color: var(--iui-color-text);
+    opacity: 0.65;
+  }
+
+  &.iui-input {
+    padding: $uicore-iui-input-padding;
+  }
+}

package/lib/cjs/components-react/properties/ItemStyle.d.ts

@@ -44,6 +44,6 @@ export declare const TableRowStyleProvider: {
     /**
      * Create CSS style from [[ItemStyle]]
      */
-    createStyle: ({ color, backgroundColor }: ItemColorOverrides) => CSSProperties;
+    createStyle: ({ color, backgroundColor, }: ItemColorOverrides) => CSSProperties;
 };
 //# sourceMappingURL=ItemStyle.d.ts.map

package/lib/cjs/components-react/properties/ItemStyle.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ItemStyle.d.ts","sourceRoot":"","sources":["../../../../src/components-react/properties/ItemStyle.ts"],"names":[],"mappings":"AAIA;;GAEG;AAEH,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAK3C;;GAEG;AACH,MAAM,WAAW,SAAS;IACxB,qBAAqB;IACrB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,qBAAqB;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,sCAAsC;IACtC,cAAc,CAAC,EAAE,kBAAkB,CAAC;CACrC;AAED;;GAEG;AACH,MAAM,WAAW,kBAAkB;IACjC,4BAA4B;IAC5B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,uBAAuB;IACvB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,0CAA0C;IAC1C,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,qCAAqC;IACrC,uBAAuB,CAAC,EAAE,MAAM,CAAC;CAClC;AAgCD;;;GAGG;AAEH,eAAO,MAAM,iBAAiB;IAC5B;;OAEG;wDACiD,SAAS,eAAe,OAAO,KAAG,aAAa;CAMpG,CAAC;AAEF;;;GAGG;AAEH,eAAO,MAAM,qBAAqB;IAChC;;OAEG;8CACuC,kBAAkB,KAAG,aAAa;CAI7E,CAAC"}
+{"version":3,"file":"ItemStyle.d.ts","sourceRoot":"","sources":["../../../../src/components-react/properties/ItemStyle.ts"],"names":[],"mappings":"AAIA;;GAEG;AAEH,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAM3C;;GAEG;AACH,MAAM,WAAW,SAAS;IACxB,qBAAqB;IACrB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,qBAAqB;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,sCAAsC;IACtC,cAAc,CAAC,EAAE,kBAAkB,CAAC;CACrC;AAED;;GAEG;AACH,MAAM,WAAW,kBAAkB;IACjC,4BAA4B;IAC5B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,uBAAuB;IACvB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,0CAA0C;IAC1C,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,qCAAqC;IACrC,uBAAuB,CAAC,EAAE,MAAM,CAAC;CAClC;AAmCD;;;GAGG;AACH,eAAO,MAAM,iBAAiB;IAC5B;;OAEG;wDAEqC,SAAS,eAClC,OAAO,KACnB,aAAa;CAMjB,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,qBAAqB;IAChC;;OAEG;+CAIA,kBAAkB,KAAG,aAAa;CAMtC,CAAC"}

package/lib/cjs/components-react/properties/ItemStyle.js

@@ -1,8 +1,8 @@
 "use strict";
 /*---------------------------------------------------------------------------------------------
-* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
-* See LICENSE.md in the project root for license terms and full copyright notice.
-*--------------------------------------------------------------------------------------------*/
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
 /** @packageDocumentation
  * @module Properties
  */
@@ -36,7 +36,6 @@ function getForegroundColor(isSelected, colorOverrides) {
  * Style provider for stylable items like [[TreeNodeItem]]
  * @public
  */
-// eslint-disable-next-line @typescript-eslint/naming-convention
 exports.ItemStyleProvider = {
     /**
      * Create CSS style from [[ItemStyle]]
@@ -52,14 +51,15 @@ exports.ItemStyleProvider = {
  * Style provider for table rows
  * @public
  */
-// eslint-disable-next-line @typescript-eslint/naming-convention
 exports.TableRowStyleProvider = {
     /**
      * Create CSS style from [[ItemStyle]]
      */
-    createStyle: ({ color, backgroundColor }) => ({
+    createStyle: ({ color, backgroundColor, }) => ({
         color: color ? colorDecimalToHex(color) : undefined,
-        backgroundColor: backgroundColor ? colorDecimalToHex(backgroundColor) : undefined,
+        backgroundColor: backgroundColor
+            ? colorDecimalToHex(backgroundColor)
+            : undefined,
     }),
 };
 //# sourceMappingURL=ItemStyle.js.map

package/lib/cjs/components-react/properties/ItemStyle.js.map

@@ -1 +1 @@
-{"version":3,"file":"ItemStyle.js","sourceRoot":"","sources":["../../../../src/components-react/properties/ItemStyle.ts"],"names":[],"mappings":";AAAA;;;+FAG+F;AAC/F;;GAEG;;;AAIH,qEAAqE;AACrE,MAAM,iBAAiB,GAAG,CAAC,OAAe,EAAE,EAAE,CAAC,IAAI,OAAO,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC,QAAQ,CAAC,CAAC,EAAE,GAAG,CAAC,EAAE,CAAC;AA4B3F,SAAS,kBAAkB,CAAC,UAAmB,EAAE,cAAmC;IAClF,IAAI,CAAC,cAAc;QACjB,OAAO,SAAS,CAAC;IAEnB,IAAI,UAAU;QACZ,OAAO,cAAc,CAAC,uBAAuB,KAAK,SAAS;YACzD,CAAC,CAAC,iBAAiB,CAAC,cAAc,CAAC,uBAAuB,CAAC;YAC3D,CAAC,CAAC,SAAS,CAAC;IAEhB,IAAI,cAAc,CAAC,eAAe;QAChC,OAAO,iBAAiB,CAAC,cAAc,CAAC,eAAe,CAAC,CAAC;IAE3D,OAAO,SAAS,CAAC;AACnB,CAAC;AAED,SAAS,kBAAkB,CAAC,UAAmB,EAAE,cAAmC;IAClF,IAAI,CAAC,cAAc;QACjB,OAAO,SAAS,CAAC;IAEnB,IAAI,UAAU;QACZ,OAAO,cAAc,CAAC,aAAa,KAAK,SAAS;YAC/C,CAAC,CAAC,iBAAiB,CAAC,cAAc,CAAC,aAAa,CAAC;YACjD,CAAC,CAAC,SAAS,CAAC;IAEhB,IAAI,cAAc,CAAC,KAAK;QACtB,OAAO,iBAAiB,CAAC,cAAc,CAAC,KAAK,CAAC,CAAC;IAEjD,OAAO,SAAS,CAAC;AACnB,CAAC;AAED;;;GAGG;AACH,gEAAgE;AACnD,QAAA,iBAAiB,GAAG;IAC/B;;OAEG;IACH,WAAW,EAAE,CAAC,EAAE,cAAc,EAAE,MAAM,EAAE,QAAQ,EAAa,EAAE,UAAoB,EAAiB,EAAE,CAAC,CAAC;QACtG,KAAK,EAAE,kBAAkB,CAAC,CAAC,CAAC,UAAU,EAAE,cAAc,CAAC;QACvD,eAAe,EAAE,kBAAkB,CAAC,CAAC,CAAC,UAAU,EAAE,cAAc,CAAC;QACjE,UAAU,EAAE,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS;QACvC,SAAS,EAAE,QAAQ,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,SAAS;KAC3C,CAAC;CACH,CAAC;AAEF;;;GAGG;AACH,gEAAgE;AACnD,QAAA,qBAAqB,GAAG;IACnC;;OAEG;IACH,WAAW,EAAE,CAAC,EAAE,KAAK,EAAE,eAAe,EAAsB,EAAiB,EAAE,CAAC,CAAC;QAC/E,KAAK,EAAE,KAAK,CAAC,CAAC,CAAC,iBAAiB,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,SAAS;QACnD,eAAe,EAAE,eAAe,CAAC,CAAC,CAAC,iBAAiB,CAAC,eAAe,CAAC,CAAC,CAAC,CAAC,SAAS;KAClF,CAAC;CACH,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 Properties\r\n */\r\n\r\nimport type { CSSProperties } from \"react\";\r\n\r\n/** Converts a color value from a number to an HTML/CSS hex string */\r\nconst colorDecimalToHex = (decimal: number) => `#${decimal.toString(16).padStart(6, \"0\")}`;\r\n\r\n/** Style properties for styled item like [[TreeNodeItem]]\r\n * @public\r\n */\r\nexport interface ItemStyle {\r\n  /** Is text bolded */\r\n  isBold?: boolean;\r\n  /** Is text italic */\r\n  isItalic?: boolean;\r\n  /** Color overrides for styled item */\r\n  colorOverrides?: ItemColorOverrides;\r\n}\r\n\r\n/** Color overrides for styled item\r\n * @public\r\n */\r\nexport interface ItemColorOverrides {\r\n  /** Text/foreground color */\r\n  color?: number;\r\n  /** Background color */\r\n  backgroundColor?: number;\r\n  /** Selected item text/foreground color */\r\n  colorSelected?: number;\r\n  /** Selected item background color */\r\n  backgroundColorSelected?: number;\r\n}\r\n\r\nfunction getBackgroundColor(isSelected: boolean, colorOverrides?: ItemColorOverrides) {\r\n  if (!colorOverrides)\r\n    return undefined;\r\n\r\n  if (isSelected)\r\n    return colorOverrides.backgroundColorSelected !== undefined\r\n      ? colorDecimalToHex(colorOverrides.backgroundColorSelected)\r\n      : undefined;\r\n\r\n  if (colorOverrides.backgroundColor)\r\n    return colorDecimalToHex(colorOverrides.backgroundColor);\r\n\r\n  return undefined;\r\n}\r\n\r\nfunction getForegroundColor(isSelected: boolean, colorOverrides?: ItemColorOverrides) {\r\n  if (!colorOverrides)\r\n    return undefined;\r\n\r\n  if (isSelected)\r\n    return colorOverrides.colorSelected !== undefined\r\n      ? colorDecimalToHex(colorOverrides.colorSelected)\r\n      : undefined;\r\n\r\n  if (colorOverrides.color)\r\n    return colorDecimalToHex(colorOverrides.color);\r\n\r\n  return undefined;\r\n}\r\n\r\n/**\r\n * Style provider for stylable items like [[TreeNodeItem]]\r\n * @public\r\n */\r\n// eslint-disable-next-line @typescript-eslint/naming-convention\r\nexport const ItemStyleProvider = {\r\n  /**\r\n   * Create CSS style from [[ItemStyle]]\r\n   */\r\n  createStyle: ({ colorOverrides, isBold, isItalic }: ItemStyle, isSelected?: boolean): CSSProperties => ({\r\n    color: getForegroundColor(!!isSelected, colorOverrides),\r\n    backgroundColor: getBackgroundColor(!!isSelected, colorOverrides),\r\n    fontWeight: isBold ? \"bold\" : undefined,\r\n    fontStyle: isItalic ? \"italic\" : undefined,\r\n  }),\r\n};\r\n\r\n/**\r\n * Style provider for table rows\r\n * @public\r\n */\r\n// eslint-disable-next-line @typescript-eslint/naming-convention\r\nexport const TableRowStyleProvider = {\r\n  /**\r\n   * Create CSS style from [[ItemStyle]]\r\n   */\r\n  createStyle: ({ color, backgroundColor }: ItemColorOverrides): CSSProperties => ({\r\n    color: color ? colorDecimalToHex(color) : undefined,\r\n    backgroundColor: backgroundColor ? colorDecimalToHex(backgroundColor) : undefined,\r\n  }),\r\n};\r\n"]}
+{"version":3,"file":"ItemStyle.js","sourceRoot":"","sources":["../../../../src/components-react/properties/ItemStyle.ts"],"names":[],"mappings":";AAAA;;;gGAGgG;AAChG;;GAEG;;;AAIH,qEAAqE;AACrE,MAAM,iBAAiB,GAAG,CAAC,OAAe,EAAE,EAAE,CAC5C,IAAI,OAAO,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC,QAAQ,CAAC,CAAC,EAAE,GAAG,CAAC,EAAE,CAAC;AA4B9C,SAAS,kBAAkB,CACzB,UAAmB,EACnB,cAAmC;IAEnC,IAAI,CAAC,cAAc;QAAE,OAAO,SAAS,CAAC;IAEtC,IAAI,UAAU;QACZ,OAAO,cAAc,CAAC,uBAAuB,KAAK,SAAS;YACzD,CAAC,CAAC,iBAAiB,CAAC,cAAc,CAAC,uBAAuB,CAAC;YAC3D,CAAC,CAAC,SAAS,CAAC;IAEhB,IAAI,cAAc,CAAC,eAAe;QAChC,OAAO,iBAAiB,CAAC,cAAc,CAAC,eAAe,CAAC,CAAC;IAE3D,OAAO,SAAS,CAAC;AACnB,CAAC;AAED,SAAS,kBAAkB,CACzB,UAAmB,EACnB,cAAmC;IAEnC,IAAI,CAAC,cAAc;QAAE,OAAO,SAAS,CAAC;IAEtC,IAAI,UAAU;QACZ,OAAO,cAAc,CAAC,aAAa,KAAK,SAAS;YAC/C,CAAC,CAAC,iBAAiB,CAAC,cAAc,CAAC,aAAa,CAAC;YACjD,CAAC,CAAC,SAAS,CAAC;IAEhB,IAAI,cAAc,CAAC,KAAK;QAAE,OAAO,iBAAiB,CAAC,cAAc,CAAC,KAAK,CAAC,CAAC;IAEzE,OAAO,SAAS,CAAC;AACnB,CAAC;AAED;;;GAGG;AACU,QAAA,iBAAiB,GAAG;IAC/B;;OAEG;IACH,WAAW,EAAE,CACX,EAAE,cAAc,EAAE,MAAM,EAAE,QAAQ,EAAa,EAC/C,UAAoB,EACL,EAAE,CAAC,CAAC;QACnB,KAAK,EAAE,kBAAkB,CAAC,CAAC,CAAC,UAAU,EAAE,cAAc,CAAC;QACvD,eAAe,EAAE,kBAAkB,CAAC,CAAC,CAAC,UAAU,EAAE,cAAc,CAAC;QACjE,UAAU,EAAE,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS;QACvC,SAAS,EAAE,QAAQ,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,SAAS;KAC3C,CAAC;CACH,CAAC;AAEF;;;GAGG;AACU,QAAA,qBAAqB,GAAG;IACnC;;OAEG;IACH,WAAW,EAAE,CAAC,EACZ,KAAK,EACL,eAAe,GACI,EAAiB,EAAE,CAAC,CAAC;QACxC,KAAK,EAAE,KAAK,CAAC,CAAC,CAAC,iBAAiB,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,SAAS;QACnD,eAAe,EAAE,eAAe;YAC9B,CAAC,CAAC,iBAAiB,CAAC,eAAe,CAAC;YACpC,CAAC,CAAC,SAAS;KACd,CAAC;CACH,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 Properties\n */\n\nimport type { CSSProperties } from \"react\";\n\n/** Converts a color value from a number to an HTML/CSS hex string */\nconst colorDecimalToHex = (decimal: number) =>\n  `#${decimal.toString(16).padStart(6, \"0\")}`;\n\n/** Style properties for styled item like [[TreeNodeItem]]\n * @public\n */\nexport interface ItemStyle {\n  /** Is text bolded */\n  isBold?: boolean;\n  /** Is text italic */\n  isItalic?: boolean;\n  /** Color overrides for styled item */\n  colorOverrides?: ItemColorOverrides;\n}\n\n/** Color overrides for styled item\n * @public\n */\nexport interface ItemColorOverrides {\n  /** Text/foreground color */\n  color?: number;\n  /** Background color */\n  backgroundColor?: number;\n  /** Selected item text/foreground color */\n  colorSelected?: number;\n  /** Selected item background color */\n  backgroundColorSelected?: number;\n}\n\nfunction getBackgroundColor(\n  isSelected: boolean,\n  colorOverrides?: ItemColorOverrides\n) {\n  if (!colorOverrides) return undefined;\n\n  if (isSelected)\n    return colorOverrides.backgroundColorSelected !== undefined\n      ? colorDecimalToHex(colorOverrides.backgroundColorSelected)\n      : undefined;\n\n  if (colorOverrides.backgroundColor)\n    return colorDecimalToHex(colorOverrides.backgroundColor);\n\n  return undefined;\n}\n\nfunction getForegroundColor(\n  isSelected: boolean,\n  colorOverrides?: ItemColorOverrides\n) {\n  if (!colorOverrides) return undefined;\n\n  if (isSelected)\n    return colorOverrides.colorSelected !== undefined\n      ? colorDecimalToHex(colorOverrides.colorSelected)\n      : undefined;\n\n  if (colorOverrides.color) return colorDecimalToHex(colorOverrides.color);\n\n  return undefined;\n}\n\n/**\n * Style provider for stylable items like [[TreeNodeItem]]\n * @public\n */\nexport const ItemStyleProvider = {\n  /**\n   * Create CSS style from [[ItemStyle]]\n   */\n  createStyle: (\n    { colorOverrides, isBold, isItalic }: ItemStyle,\n    isSelected?: boolean\n  ): CSSProperties => ({\n    color: getForegroundColor(!!isSelected, colorOverrides),\n    backgroundColor: getBackgroundColor(!!isSelected, colorOverrides),\n    fontWeight: isBold ? \"bold\" : undefined,\n    fontStyle: isItalic ? \"italic\" : undefined,\n  }),\n};\n\n/**\n * Style provider for table rows\n * @public\n */\nexport const TableRowStyleProvider = {\n  /**\n   * Create CSS style from [[ItemStyle]]\n   */\n  createStyle: ({\n    color,\n    backgroundColor,\n  }: ItemColorOverrides): CSSProperties => ({\n    color: color ? colorDecimalToHex(color) : undefined,\n    backgroundColor: backgroundColor\n      ? colorDecimalToHex(backgroundColor)\n      : undefined,\n  }),\n};\n"]}

package/lib/cjs/components-react/properties/LinkHandler.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"LinkHandler.d.ts","sourceRoot":"","sources":["../../../../src/components-react/properties/LinkHandler.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAEH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,uBAAuB,CAAC;AAqE9D;;GAEG;AACH,eAAO,MAAM,WAAW,SAAU,MAAM,SAAS,gBAAgB,sBAAqB,MAAM,KAAK,MAAM,SAAS,kBAAG,MAAM,SAExH,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,SAAS,gBAAiB,MAAM,UAAU,gBAAgB,sBAAqB,MAAM,KAAK,MAAM,SAAS,kBAAG,MAAM,SAM9H,CAAC;AAEF;;;GAGG;AACH,MAAM,WAAW,kBAAkB;IACjC,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,gBAAgB,CAAC;IACzB,WAAW,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,KAAK,CAAC,SAAS,CAAC;CACjD;AAED;;;GAGG;AACH,wBAAgB,aAAa,CAAC,KAAK,EAAE,kBAAkB,eAEtD"}
+{"version":3,"file":"LinkHandler.d.ts","sourceRoot":"","sources":["../../../../src/components-react/properties/LinkHandler.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAEH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,uBAAuB,CAAC;AA0F9D;;GAEG;AACH,eAAO,MAAM,WAAW,SAChB,MAAM,SACL,gBAAgB,sBACJ,MAAM,KAAK,MAAM,SAAS,kBAC5C,MAAM,SAER,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,SAAS,gBACP,MAAM,UACX,gBAAgB,sBACL,MAAM,KAAK,MAAM,SAAS,kBAC5C,MAAM,SAIR,CAAC;AAEF;;;GAGG;AACH,MAAM,WAAW,kBAAkB;IACjC,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,gBAAgB,CAAC;IACzB,WAAW,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,KAAK,CAAC,SAAS,CAAC;CACjD;AAED;;;GAGG;AACH,wBAAgB,aAAa,CAAC,KAAK,EAAE,kBAAkB,eAEtD"}

package/lib/cjs/components-react/properties/LinkHandler.js

@@ -1,8 +1,8 @@
 "use strict";
 /*---------------------------------------------------------------------------------------------
-* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
-* See LICENSE.md in the project root for license terms and full copyright notice.
-*--------------------------------------------------------------------------------------------*/
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
 /** @packageDocumentation
  * @module Properties
  */
@@ -74,7 +74,7 @@ function renderText(text, links, highlight) {
     if (text.length > lastIndex)
         parts.push(renderTextPart(text.substring(lastIndex), highlight));
     // Need to map, because React complains about the lack of keys
-    return parts.map((part, index) => React.createElement(React.Fragment, { key: index }, part));
+    return parts.map((part, index) => (React.createElement(React.Fragment, { key: index }, part)));
 }
 function renderHighlighted(text, highlight) {
     return highlight(text);

package/lib/cjs/components-react/properties/LinkHandler.js.map

@@ -1 +1 @@
-{"version":3,"file":"LinkHandler.js","sourceRoot":"","sources":["../../../../src/components-react/properties/LinkHandler.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 Properties\r\n */\r\n\r\nimport * as React from \"react\";\r\nimport { BentleyError, BentleyStatus } from \"@itwin/core-bentley\";\r\nimport type { LinkElementsInfo } from \"@itwin/appui-abstract\";\r\nimport { UnderlinedButton } from \"@itwin/core-react\";\r\n\r\n/** Render a single anchor tag */\r\nfunction renderTag(text: string, links: LinkElementsInfo, highlight?: (text: string) => React.ReactNode) {\r\n  return (\r\n    <UnderlinedButton\r\n      onClick={(e) => {\r\n        e.preventDefault();\r\n        e.stopPropagation();\r\n        links.onClick(text);\r\n      }}\r\n    >\r\n      {highlight ? highlight(text) : text}\r\n    </UnderlinedButton>\r\n  );\r\n}\r\n\r\ninterface Match { start: number, end: number }\r\n\r\nfunction matchComparison(matchA: Match, matchB: Match) {\r\n  if (matchA.start > matchB.start)\r\n    return 1;\r\n  if (matchB.start > matchA.start)\r\n    return -1;\r\n  return 0;\r\n}\r\n\r\nfunction renderTextPart(text: string, highlight?: (text: string) => React.ReactNode): React.ReactNode {\r\n  return highlight ? highlight(text) : text;\r\n}\r\n\r\nfunction renderText(text: string, links: LinkElementsInfo, highlight?: (text: string) => React.ReactNode): React.ReactNode {\r\n  const { matcher } = links;\r\n\r\n  if (!matcher)\r\n    return renderTag(text, links, highlight);\r\n\r\n  const matches = matcher(text);\r\n\r\n  // Sort just to be sure\r\n  matches.sort(matchComparison);\r\n\r\n  const parts: React.ReactNode[] = [];\r\n  let lastIndex = 0;\r\n  for (const match of matches) {\r\n    // If matches overlap there must be something wrong with the matcher\r\n    if (lastIndex > match.start)\r\n      throw new BentleyError(BentleyStatus.ERROR, \"renderText: matcher returned overlapping matches\");\r\n\r\n    if (lastIndex < match.start)\r\n      parts.push(renderTextPart(text.substring(lastIndex, match.start), highlight));\r\n\r\n    const anchorText = text.substring(match.start, match.end);\r\n    parts.push(renderTag(anchorText, links, highlight));\r\n\r\n    lastIndex = match.end;\r\n  }\r\n  if (text.length > lastIndex)\r\n    parts.push(renderTextPart(text.substring(lastIndex), highlight));\r\n\r\n  // Need to map, because React complains about the lack of keys\r\n  return parts.map((part, index) => <React.Fragment key={index}>{part}</React.Fragment>);\r\n}\r\n\r\nfunction renderHighlighted(text: string, highlight: (text: string) => React.ReactNode) {\r\n  return highlight(text);\r\n}\r\n\r\n/** Renders anchor tag by wrapping or splitting provided text\r\n * @public\r\n */\r\nexport const renderLinks = (text: string, links: LinkElementsInfo, highlight?: (text: string) => React.ReactNode): React.ReactNode => {\r\n  return renderText(text, links, highlight);\r\n};\r\n\r\n/** If record has links, wraps stringValue in them, otherwise returns unchanged stringValue\r\n * Optionally it can highlight text\r\n * @public\r\n */\r\nexport const withLinks = (stringValue: string, links?: LinkElementsInfo, highlight?: (text: string) => React.ReactNode): React.ReactNode => {\r\n  if (links)\r\n    return renderLinks(stringValue, links, highlight);\r\n  if (highlight)\r\n    return renderHighlighted(stringValue, highlight);\r\n  return stringValue;\r\n};\r\n\r\n/**\r\n * Properties for [[LinksRenderer]] component.\r\n * @public\r\n */\r\nexport interface LinksRendererProps {\r\n  value: string;\r\n  links?: LinkElementsInfo;\r\n  highlighter?: (text: string) => React.ReactNode;\r\n}\r\n\r\n/**\r\n * React component for rendering string with links.\r\n * @public\r\n */\r\nexport function LinksRenderer(props: LinksRendererProps) {\r\n  return <>{withLinks(props.value, props.links, props.highlighter)}</>;\r\n}\r\n"]}
+{"version":3,"file":"LinkHandler.js","sourceRoot":"","sources":["../../../../src/components-react/properties/LinkHandler.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 Properties\n */\n\nimport * as React from \"react\";\nimport { BentleyError, BentleyStatus } from \"@itwin/core-bentley\";\nimport type { LinkElementsInfo } from \"@itwin/appui-abstract\";\nimport { UnderlinedButton } from \"@itwin/core-react\";\n\n/** Render a single anchor tag */\nfunction renderTag(\n  text: string,\n  links: LinkElementsInfo,\n  highlight?: (text: string) => React.ReactNode\n) {\n  return (\n    <UnderlinedButton\n      onClick={(e) => {\n        e.preventDefault();\n        e.stopPropagation();\n        links.onClick(text);\n      }}\n    >\n      {highlight ? highlight(text) : text}\n    </UnderlinedButton>\n  );\n}\n\ninterface Match {\n  start: number;\n  end: number;\n}\n\nfunction matchComparison(matchA: Match, matchB: Match) {\n  if (matchA.start > matchB.start) return 1;\n  if (matchB.start > matchA.start) return -1;\n  return 0;\n}\n\nfunction renderTextPart(\n  text: string,\n  highlight?: (text: string) => React.ReactNode\n): React.ReactNode {\n  return highlight ? highlight(text) : text;\n}\n\nfunction renderText(\n  text: string,\n  links: LinkElementsInfo,\n  highlight?: (text: string) => React.ReactNode\n): React.ReactNode {\n  const { matcher } = links;\n\n  if (!matcher) return renderTag(text, links, highlight);\n\n  const matches = matcher(text);\n\n  // Sort just to be sure\n  matches.sort(matchComparison);\n\n  const parts: React.ReactNode[] = [];\n  let lastIndex = 0;\n  for (const match of matches) {\n    // If matches overlap there must be something wrong with the matcher\n    if (lastIndex > match.start)\n      throw new BentleyError(\n        BentleyStatus.ERROR,\n        \"renderText: matcher returned overlapping matches\"\n      );\n\n    if (lastIndex < match.start)\n      parts.push(\n        renderTextPart(text.substring(lastIndex, match.start), highlight)\n      );\n\n    const anchorText = text.substring(match.start, match.end);\n    parts.push(renderTag(anchorText, links, highlight));\n\n    lastIndex = match.end;\n  }\n  if (text.length > lastIndex)\n    parts.push(renderTextPart(text.substring(lastIndex), highlight));\n\n  // Need to map, because React complains about the lack of keys\n  return parts.map((part, index) => (\n    <React.Fragment key={index}>{part}</React.Fragment>\n  ));\n}\n\nfunction renderHighlighted(\n  text: string,\n  highlight: (text: string) => React.ReactNode\n) {\n  return highlight(text);\n}\n\n/** Renders anchor tag by wrapping or splitting provided text\n * @public\n */\nexport const renderLinks = (\n  text: string,\n  links: LinkElementsInfo,\n  highlight?: (text: string) => React.ReactNode\n): React.ReactNode => {\n  return renderText(text, links, highlight);\n};\n\n/** If record has links, wraps stringValue in them, otherwise returns unchanged stringValue\n * Optionally it can highlight text\n * @public\n */\nexport const withLinks = (\n  stringValue: string,\n  links?: LinkElementsInfo,\n  highlight?: (text: string) => React.ReactNode\n): React.ReactNode => {\n  if (links) return renderLinks(stringValue, links, highlight);\n  if (highlight) return renderHighlighted(stringValue, highlight);\n  return stringValue;\n};\n\n/**\n * Properties for [[LinksRenderer]] component.\n * @public\n */\nexport interface LinksRendererProps {\n  value: string;\n  links?: LinkElementsInfo;\n  highlighter?: (text: string) => React.ReactNode;\n}\n\n/**\n * React component for rendering string with links.\n * @public\n */\nexport function LinksRenderer(props: LinksRendererProps) {\n  return <>{withLinks(props.value, props.links, props.highlighter)}</>;\n}\n"]}

package/lib/cjs/components-react/properties/ValueRendererManager.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ValueRendererManager.d.ts","sourceRoot":"","sources":["../../../../src/components-react/properties/ValueRendererManager.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"ValueRendererManager.d.ts","sourceRoot":"","sources":["../../../../src/components-react/properties/ValueRendererManager.tsx"],"names":[],"mappings":"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"}

package/lib/cjs/components-react/properties/ValueRendererManager.js

@@ -1,8 +1,8 @@
 "use strict";
 /*---------------------------------------------------------------------------------------------
-* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
-* See LICENSE.md in the project root for license terms and full copyright notice.
-*--------------------------------------------------------------------------------------------*/
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
 /** @packageDocumentation
  * @module Properties
  */
@@ -38,7 +38,8 @@ class PropertyValueRendererManager {
         this._defaultMergedValueRenderer = new MergedPropertyValueRenderer_1.MergedPropertyValueRenderer();
     }
     selectRenderer(record) {
-        if (record.property.renderer && this._propertyRenderers.has(record.property.renderer.name))
+        if (record.property.renderer &&
+            this._propertyRenderers.has(record.property.renderer.name))
             return this._propertyRenderers.get(record.property.renderer.name);
         if (this._defaultMergedValueRenderer.canRender(record))
             return this._defaultMergedValueRenderer;