@itwin/components-react 4.0.0-dev.19 → 4.0.0-dev.20

package/lib/esm/components-react/editors/EnumEditor.scss

@@ -1,23 +1,23 @@
-/*---------------------------------------------------------------------------------------------
-* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
-* See LICENSE.md in the project root for license terms and full copyright notice.
-*--------------------------------------------------------------------------------------------*/
-@import "./variables";
-
-.components-enum-editor {
-  width: 100%;
-  height: 100%;
-  margin: 0;
-}
-
-.components-smallEditor-host {
-  .components-enum-editor {
-    &.iui-select {
-      >.iui-select-button {
-        min-height: $editor-component-height-small !important;
-        padding-top: 0px !important;
-        padding-bottom: 0px !important;
-      }
-    }
-  }
+/*---------------------------------------------------------------------------------------------
+* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+* See LICENSE.md in the project root for license terms and full copyright notice.
+*--------------------------------------------------------------------------------------------*/
+@import "./variables";
+
+.components-enum-editor {
+  width: 100%;
+  height: 100%;
+  margin: 0;
+}
+
+.components-smallEditor-host {
+  .components-enum-editor {
+    &.iui-select {
+      >.iui-select-button {
+        min-height: $editor-component-height-small !important;
+        padding-top: 0px !important;
+        padding-bottom: 0px !important;
+      }
+    }
+  }
 }

package/lib/esm/components-react/editors/IconEditor.js.map

@@ -1 +1 @@
-{"version":3,"file":"IconEditor.js","sourceRoot":"","sources":["../../../../src/components-react/editors/IconEditor.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/* eslint-disable deprecation/deprecation */\r\n/** @packageDocumentation\r\n * @module PropertyEditors\r\n */\r\n\r\nimport \"./IconEditor.scss\";\r\nimport classnames from \"classnames\";\r\nimport * as React from \"react\";\r\nimport {\r\n  IconListEditorParams, PropertyEditorParams, PropertyEditorParamTypes, PropertyRecord, PropertyValue, PropertyValueFormat,\r\n  StandardEditorNames, StandardTypeNames,\r\n} from \"@itwin/appui-abstract\";\r\nimport { IconPickerButton } from \"../iconpicker/IconPickerButton\";\r\nimport { PropertyEditorProps, TypeEditor } from \"./EditorContainer\";\r\nimport { PropertyEditorBase, PropertyEditorManager } from \"./PropertyEditorManager\";\r\n\r\n// cspell:ignore iconpicker\r\n\r\n/** @internal */\r\ninterface IconEditorState {\r\n  icon: string;\r\n  icons: string[];\r\n  numColumns: number;\r\n  readonly?: boolean;\r\n  isDisabled?: boolean;\r\n}\r\n\r\n/** IconEditor React component that is a property editor with button and popup\r\n * @alpha\r\n */\r\n// istanbul ignore next\r\nexport class IconEditor extends React.PureComponent<PropertyEditorProps, IconEditorState> implements TypeEditor {\r\n  private _control: any | null = null;\r\n  private _isMounted = false;\r\n  private _divElement = React.createRef<HTMLDivElement>();\r\n\r\n  constructor(props: PropertyEditorProps) {\r\n    super(props);\r\n\r\n    let icon = \"\";\r\n    let numColumns = 4;\r\n    const icons: string[] = [];\r\n    const readonly = false;\r\n\r\n    // TODO: add support for following if we need to specify set of weights to display\r\n    const record = props.propertyRecord;\r\n    if (record && record.property && record.property.editor && record.property.editor.params) {\r\n      const iconParams = record.property.editor.params.find((param: PropertyEditorParams) => param.type === PropertyEditorParamTypes.IconListData) as IconListEditorParams;\r\n      // istanbul ignore else\r\n      if (iconParams) {\r\n        if (iconParams.iconValue)\r\n          icon = iconParams.iconValue;\r\n        if (iconParams.numColumns)\r\n          numColumns = iconParams.numColumns;\r\n        if (iconParams.iconValues)\r\n          iconParams.iconValues.forEach((i: string) => icons.push(i));\r\n      }\r\n    }\r\n\r\n    this.state = { icon, icons, numColumns, readonly };\r\n  }\r\n\r\n  public async getPropertyValue(): Promise<PropertyValue | undefined> {\r\n    const record = this.props.propertyRecord;\r\n    let propertyValue: PropertyValue | undefined;\r\n\r\n    // istanbul ignore else\r\n    if (record && record.value.valueFormat === PropertyValueFormat.Primitive) {\r\n      propertyValue = {\r\n        valueFormat: PropertyValueFormat.Primitive,\r\n        value: this.state.icon,\r\n        displayValue: \"\",\r\n      };\r\n    }\r\n\r\n    return propertyValue;\r\n  }\r\n\r\n  public get htmlElement(): HTMLElement | null {\r\n    return this._divElement.current;\r\n  }\r\n\r\n  public get hasFocus(): boolean {\r\n    let containsFocus = false;\r\n    if (this._divElement.current)\r\n      containsFocus = this._divElement.current.contains(document.activeElement);\r\n    return containsFocus;\r\n  }\r\n\r\n  private setFocus(): void {\r\n    // istanbul ignore else\r\n    if (this._control && !this.state.isDisabled) {\r\n      this._control.setFocus();\r\n    }\r\n  }\r\n\r\n  private _onIconChange = (icon: string) => {\r\n    const propertyRecord = this.props.propertyRecord as PropertyRecord;\r\n\r\n    this.setState({\r\n      icon,\r\n    }, async () => {\r\n      // istanbul ignore else\r\n      if (propertyRecord && this.props.onCommit) {\r\n        const propertyValue = await this.getPropertyValue();\r\n        // istanbul ignore else\r\n        if (propertyValue) {\r\n          this.props.onCommit({ propertyRecord, newValue: propertyValue });\r\n        }\r\n      }\r\n    });\r\n  };\r\n\r\n  /** @internal */\r\n  public override componentDidMount() {\r\n    this._isMounted = true;\r\n    this.setStateFromProps(); // eslint-disable-line @typescript-eslint/no-floating-promises\r\n  }\r\n\r\n  /** @internal */\r\n  public override componentWillUnmount() {\r\n    this._isMounted = false;\r\n  }\r\n\r\n  /** @internal */\r\n  public override componentDidUpdate(prevProps: PropertyEditorProps) {\r\n    if (this.props.propertyRecord !== prevProps.propertyRecord) {\r\n      this.setStateFromProps(); // eslint-disable-line @typescript-eslint/no-floating-promises\r\n    }\r\n  }\r\n\r\n  private async setStateFromProps() {\r\n    const record = this.props.propertyRecord;\r\n    let initialValue = \"\";\r\n\r\n    // istanbul ignore else\r\n    if (record && record.value.valueFormat === PropertyValueFormat.Primitive) {\r\n      initialValue = record.value.value as string;\r\n    }\r\n\r\n    const readonly = record && undefined !== record.isReadonly ? record.isReadonly : false;\r\n    const isDisabled = record ? record.isDisabled : undefined;\r\n\r\n    // istanbul ignore else\r\n    if (this._isMounted)\r\n      this.setState(\r\n        { icon: initialValue, readonly, isDisabled },\r\n        () => {\r\n          if (this.props.setFocus) {\r\n            this.setFocus();\r\n          }\r\n        },\r\n      );\r\n  }\r\n\r\n  /** @internal */\r\n  public override render() {\r\n    const { icon, icons, numColumns } = this.state;\r\n    return (\r\n      <div className={classnames(\"components-icon-editor\", this.props.className)} style={this.props.style} ref={this._divElement}>\r\n        <IconPickerButton ref={(control) => this._control = control}\r\n          icon={icon}\r\n          icons={icons}\r\n          numColumns={numColumns}\r\n          disabled={this.state.isDisabled}\r\n          readonly={this.state.readonly}\r\n          onIconChange={this._onIconChange}\r\n          data-testid=\"components-icon-editor\" />\r\n      </div>\r\n    );\r\n  }\r\n}\r\n\r\n/** Icon Property Editor registered for the \"text\" and \"string\" type names and the \"icon-picker\" editor name.\r\n * It uses the [[IconEditor]] React component.\r\n * @alpha\r\n */\r\n// istanbul ignore next\r\nexport class IconPropertyEditor extends PropertyEditorBase {\r\n  public get reactNode(): React.ReactNode {\r\n    return <IconEditor />;\r\n  }\r\n}\r\n\r\nPropertyEditorManager.registerEditor(StandardTypeNames.Text, IconPropertyEditor, StandardEditorNames.IconPicker);\r\nPropertyEditorManager.registerEditor(StandardTypeNames.String, IconPropertyEditor, StandardEditorNames.IconPicker);\r\n"]}
+{"version":3,"file":"IconEditor.js","sourceRoot":"","sources":["../../../../src/components-react/editors/IconEditor.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/* eslint-disable deprecation/deprecation */\n/** @packageDocumentation\n * @module PropertyEditors\n */\n\nimport \"./IconEditor.scss\";\nimport classnames from \"classnames\";\nimport * as React from \"react\";\nimport {\n  IconListEditorParams, PropertyEditorParams, PropertyEditorParamTypes, PropertyRecord, PropertyValue, PropertyValueFormat,\n  StandardEditorNames, StandardTypeNames,\n} from \"@itwin/appui-abstract\";\nimport { IconPickerButton } from \"../iconpicker/IconPickerButton\";\nimport { PropertyEditorProps, TypeEditor } from \"./EditorContainer\";\nimport { PropertyEditorBase, PropertyEditorManager } from \"./PropertyEditorManager\";\n\n// cspell:ignore iconpicker\n\n/** @internal */\ninterface IconEditorState {\n  icon: string;\n  icons: string[];\n  numColumns: number;\n  readonly?: boolean;\n  isDisabled?: boolean;\n}\n\n/** IconEditor React component that is a property editor with button and popup\n * @alpha\n */\n// istanbul ignore next\nexport class IconEditor extends React.PureComponent<PropertyEditorProps, IconEditorState> implements TypeEditor {\n  private _control: any | null = null;\n  private _isMounted = false;\n  private _divElement = React.createRef<HTMLDivElement>();\n\n  constructor(props: PropertyEditorProps) {\n    super(props);\n\n    let icon = \"\";\n    let numColumns = 4;\n    const icons: string[] = [];\n    const readonly = false;\n\n    // TODO: add support for following if we need to specify set of weights to display\n    const record = props.propertyRecord;\n    if (record && record.property && record.property.editor && record.property.editor.params) {\n      const iconParams = record.property.editor.params.find((param: PropertyEditorParams) => param.type === PropertyEditorParamTypes.IconListData) as IconListEditorParams;\n      // istanbul ignore else\n      if (iconParams) {\n        if (iconParams.iconValue)\n          icon = iconParams.iconValue;\n        if (iconParams.numColumns)\n          numColumns = iconParams.numColumns;\n        if (iconParams.iconValues)\n          iconParams.iconValues.forEach((i: string) => icons.push(i));\n      }\n    }\n\n    this.state = { icon, icons, numColumns, readonly };\n  }\n\n  public async getPropertyValue(): Promise<PropertyValue | undefined> {\n    const record = this.props.propertyRecord;\n    let propertyValue: PropertyValue | undefined;\n\n    // istanbul ignore else\n    if (record && record.value.valueFormat === PropertyValueFormat.Primitive) {\n      propertyValue = {\n        valueFormat: PropertyValueFormat.Primitive,\n        value: this.state.icon,\n        displayValue: \"\",\n      };\n    }\n\n    return propertyValue;\n  }\n\n  public get htmlElement(): HTMLElement | null {\n    return this._divElement.current;\n  }\n\n  public get hasFocus(): boolean {\n    let containsFocus = false;\n    if (this._divElement.current)\n      containsFocus = this._divElement.current.contains(document.activeElement);\n    return containsFocus;\n  }\n\n  private setFocus(): void {\n    // istanbul ignore else\n    if (this._control && !this.state.isDisabled) {\n      this._control.setFocus();\n    }\n  }\n\n  private _onIconChange = (icon: string) => {\n    const propertyRecord = this.props.propertyRecord as PropertyRecord;\n\n    this.setState({\n      icon,\n    }, async () => {\n      // istanbul ignore else\n      if (propertyRecord && this.props.onCommit) {\n        const propertyValue = await this.getPropertyValue();\n        // istanbul ignore else\n        if (propertyValue) {\n          this.props.onCommit({ propertyRecord, newValue: propertyValue });\n        }\n      }\n    });\n  };\n\n  /** @internal */\n  public override componentDidMount() {\n    this._isMounted = true;\n    this.setStateFromProps(); // eslint-disable-line @typescript-eslint/no-floating-promises\n  }\n\n  /** @internal */\n  public override componentWillUnmount() {\n    this._isMounted = false;\n  }\n\n  /** @internal */\n  public override componentDidUpdate(prevProps: PropertyEditorProps) {\n    if (this.props.propertyRecord !== prevProps.propertyRecord) {\n      this.setStateFromProps(); // eslint-disable-line @typescript-eslint/no-floating-promises\n    }\n  }\n\n  private async setStateFromProps() {\n    const record = this.props.propertyRecord;\n    let initialValue = \"\";\n\n    // istanbul ignore else\n    if (record && record.value.valueFormat === PropertyValueFormat.Primitive) {\n      initialValue = record.value.value as string;\n    }\n\n    const readonly = record && undefined !== record.isReadonly ? record.isReadonly : false;\n    const isDisabled = record ? record.isDisabled : undefined;\n\n    // istanbul ignore else\n    if (this._isMounted)\n      this.setState(\n        { icon: initialValue, readonly, isDisabled },\n        () => {\n          if (this.props.setFocus) {\n            this.setFocus();\n          }\n        },\n      );\n  }\n\n  /** @internal */\n  public override render() {\n    const { icon, icons, numColumns } = this.state;\n    return (\n      <div className={classnames(\"components-icon-editor\", this.props.className)} style={this.props.style} ref={this._divElement}>\n        <IconPickerButton ref={(control) => this._control = control}\n          icon={icon}\n          icons={icons}\n          numColumns={numColumns}\n          disabled={this.state.isDisabled}\n          readonly={this.state.readonly}\n          onIconChange={this._onIconChange}\n          data-testid=\"components-icon-editor\" />\n      </div>\n    );\n  }\n}\n\n/** Icon Property Editor registered for the \"text\" and \"string\" type names and the \"icon-picker\" editor name.\n * It uses the [[IconEditor]] React component.\n * @alpha\n */\n// istanbul ignore next\nexport class IconPropertyEditor extends PropertyEditorBase {\n  public get reactNode(): React.ReactNode {\n    return <IconEditor />;\n  }\n}\n\nPropertyEditorManager.registerEditor(StandardTypeNames.Text, IconPropertyEditor, StandardEditorNames.IconPicker);\nPropertyEditorManager.registerEditor(StandardTypeNames.String, IconPropertyEditor, StandardEditorNames.IconPicker);\n"]}

package/lib/esm/components-react/editors/IconEditor.scss

@@ -1,16 +1,16 @@
-/*---------------------------------------------------------------------------------------------
-* 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";
-
-$components-color-editor-item-height: 100%;
-
-.components-icon-editor {
-  font-family: var(--iui-font-sans);
-  font-size: var(--iui-font-size-1);
-  color: var(--iui-color-text);
-  border: none;
-  box-sizing: border-box;
-  height: $components-color-editor-item-height;
-}
+/*---------------------------------------------------------------------------------------------
+* 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";
+
+$components-color-editor-item-height: 100%;
+
+.components-icon-editor {
+  font-family: var(--iui-font-sans);
+  font-size: var(--iui-font-size-1);
+  color: var(--iui-color-text);
+  border: none;
+  box-sizing: border-box;
+  height: $components-color-editor-item-height;
+}

package/lib/esm/components-react/editors/ImageCheckBoxEditor.js.map

@@ -1 +1 @@
-{"version":3,"file":"ImageCheckBoxEditor.js","sourceRoot":"","sources":["../../../../src/components-react/editors/ImageCheckBoxEditor.tsx"],"names":[],"mappings":"AAAA;;;+FAG+F;AAC/F;;GAEG;AAEH,OAAO,4BAA4B,CAAC;AACpC,OAAO,UAAU,MAAM,YAAY,CAAC;AACpC,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EACsC,wBAAwB,EAAiB,mBAAmB,EAAE,mBAAmB,EAAE,iBAAiB,GAChJ,MAAM,uBAAuB,CAAC;AAE/B,OAAO,EAAE,kBAAkB,EAAE,qBAAqB,EAAE,MAAM,yBAAyB,CAAC;AACpF,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAalD;;;GAGG;AACH,MAAM,OAAO,mBAAoB,SAAQ,KAAK,CAAC,aAA4D;IAA3G;;QACU,eAAU,GAAG,KAAK,CAAC;QACnB,kBAAa,GAAsC,KAAK,CAAC,SAAS,EAAE,CAAC;QAE7E,gBAAgB;QACS,UAAK,GAAuC;YACnE,QAAQ,EAAE,EAAE;YACZ,OAAO,EAAE,EAAE;YACX,aAAa,EAAE,KAAK;YACpB,UAAU,EAAE,KAAK;SAClB,CAAC;QAwEM,iBAAY,GAAG,CAAC,OAAgB,EAAE,EAAE;YAC1C,IAAI,CAAC,QAAQ,CAAC;gBACZ,aAAa,EAAE,OAAO;aACvB,EAAE,KAAK,IAAI,EAAE;gBACZ,uBAAuB;gBACvB,IAAI,IAAI,CAAC,KAAK,CAAC,cAAc,IAAI,IAAI,CAAC,KAAK,CAAC,QAAQ,EAAE;oBACpD,MAAM,aAAa,GAAG,MAAM,IAAI,CAAC,gBAAgB,EAAE,CAAC;oBACpD,uBAAuB;oBACvB,IAAI,IAAI,CAAC,UAAU,IAAI,aAAa,KAAK,SAAS,EAAE;wBAClD,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,EAAE,cAAc,EAAE,IAAI,CAAC,KAAK,CAAC,cAAc,EAAE,QAAQ,EAAE,aAAa,EAAE,CAAC,CAAC;qBAC7F;iBACF;YACH,CAAC,CAAC,CAAC;QACL,CAAC,CAAC;IAqBJ,CAAC;IAxGQ,KAAK,CAAC,gBAAgB;QAC3B,MAAM,MAAM,GAAG,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC;QACzC,IAAI,aAAwC,CAAC;QAE7C,uBAAuB;QACvB,IAAI,MAAM,IAAI,MAAM,CAAC,KAAK,CAAC,WAAW,KAAK,mBAAmB,CAAC,SAAS,EAAE;YACxE,aAAa,GAAG;gBACd,WAAW,EAAE,mBAAmB,CAAC,SAAS;gBAC1C,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,aAAa;gBAC/B,YAAY,EAAE,EAAE;aACjB,CAAC;SACH;QAED,OAAO,aAAa,CAAC;IACvB,CAAC;IAED,IAAW,WAAW;QACpB,OAAO,IAAI,CAAC,aAAa,CAAC,OAAO,CAAC;IACpC,CAAC;IAED,IAAW,QAAQ;QACjB,OAAO,QAAQ,CAAC,aAAa,KAAK,IAAI,CAAC,aAAa,CAAC,OAAO,CAAC;IAC/D,CAAC;IAED,gBAAgB;IACA,iBAAiB;QAC/B,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC;QACvB,IAAI,CAAC,iBAAiB,EAAE,CAAC;IAC3B,CAAC;IAED,gBAAgB;IACA,oBAAoB;QAClC,IAAI,CAAC,UAAU,GAAG,KAAK,CAAC;IAC1B,CAAC;IAED,gBAAgB;IACA,kBAAkB,CAAC,SAA8B;QAC/D,IAAI,IAAI,CAAC,KAAK,CAAC,cAAc,KAAK,SAAS,CAAC,cAAc,EAAE;YAC1D,IAAI,CAAC,iBAAiB,EAAE,CAAC;SAC1B;IACH,CAAC;IAEO,iBAAiB;QACvB,MAAM,EAAE,cAAc,EAAE,GAAG,IAAI,CAAC,KAAK,CAAC;QACtC,IAAI,aAAa,GAAG,KAAK,CAAC;QAC1B,IAAI,OAAO,GAAG,EAAE,CAAC;QACjB,IAAI,QAAQ,GAAG,EAAE,CAAC;QAClB,IAAI,UAAU,GAAG,KAAK,CAAC;QAEvB,uBAAuB;QACvB,IAAI,cAAc,IAAI,cAAc,CAAC,KAAK,CAAC,WAAW,KAAK,mBAAmB,CAAC,SAAS,EAAE;YACxF,MAAM,cAAc,GAAG,cAAc,CAAC,KAAK,CAAC,KAAK,CAAC;YAClD,aAAa,GAAG,cAAyB,CAAC;SAC3C;QAED,uBAAuB;QACvB,IAAI,cAAc,IAAI,cAAc,CAAC,UAAU;YAC7C,UAAU,GAAG,cAAc,CAAC,UAAU,CAAC;QAEzC,IAAI,cAAc,IAAI,cAAc,CAAC,QAAQ,IAAI,cAAc,CAAC,QAAQ,CAAC,MAAM,IAAI,cAAc,CAAC,QAAQ,CAAC,MAAM,CAAC,MAAM,EAAE;YACxH,MAAM,mBAAmB,GAAG,cAAc,CAAC,QAAQ,CAAC,MAAM,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,KAA2B,EAAE,EAAE,CAAC,KAAK,CAAC,IAAI,KAAK,wBAAwB,CAAC,cAAc,CAAwB,CAAC;YACvL,uBAAuB;YACvB,IAAI,mBAAmB,EAAE;gBACvB,OAAO,GAAG,mBAAmB,CAAC,OAAO,CAAC;gBACtC,QAAQ,GAAG,mBAAmB,CAAC,QAAQ,CAAC;aACzC;SACF;QACD,IAAI,CAAC,QAAQ,CAAC,EAAE,OAAO,EAAE,QAAQ,EAAE,aAAa,EAAE,UAAU,EAAE,CAAC,CAAC;IAClE,CAAC;IAiBe,MAAM;QACpB,MAAM,SAAS,GAAG,UAAU,CAAC,wBAAwB,EAAE,iCAAiC,EAAE,IAAI,CAAC,KAAK,CAAC,SAAS,CAAC,CAAC;QAChH,MAAM,OAAO,GAAG,IAAI,CAAC,KAAK,CAAC,aAAa,CAAC;QACzC,MAAM,UAAU,GAAG,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,UAAU,CAAC;QAE3C,OAAO,CACL,oBAAC,aAAa,IACZ,QAAQ,EAAE,IAAI,CAAC,aAAa,EAC5B,QAAQ,EAAE,IAAI,CAAC,KAAK,CAAC,QAAQ,EAC7B,OAAO,EAAE,IAAI,CAAC,KAAK,CAAC,OAAO,EAC3B,SAAS,EAAE,SAAS,EACpB,MAAM,EAAE,IAAI,EACZ,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,KAAK,EACvB,OAAO,EAAE,OAAO,EAChB,QAAQ,EAAE,UAAU,EACpB,OAAO,EAAE,IAAI,CAAC,YAAY,iBACd,iCAAiC,GAAE,CAClD,CAAC;IACJ,CAAC;CACF;AAED;;;GAGG;AACH,MAAM,OAAO,2BAA4B,SAAQ,kBAAkB;IACjE,IAAW,SAAS;QAClB,OAAO,oBAAC,mBAAmB,OAAG,CAAC;IACjC,CAAC;CACF;AAED,qBAAqB,CAAC,cAAc,CAAC,iBAAiB,CAAC,OAAO,EAAE,2BAA2B,EAAE,mBAAmB,CAAC,aAAa,CAAC,CAAC;AAChI,qBAAqB,CAAC,cAAc,CAAC,iBAAiB,CAAC,IAAI,EAAE,2BAA2B,EAAE,mBAAmB,CAAC,aAAa,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 PropertyEditors\r\n */\r\n\r\nimport \"./ImageCheckBoxEditor.scss\";\r\nimport classnames from \"classnames\";\r\nimport * as React from \"react\";\r\nimport {\r\n  ImageCheckBoxParams, PropertyEditorParams, PropertyEditorParamTypes, PropertyValue, PropertyValueFormat, StandardEditorNames, StandardTypeNames,\r\n} from \"@itwin/appui-abstract\";\r\nimport { PropertyEditorProps, TypeEditor } from \"./EditorContainer\";\r\nimport { PropertyEditorBase, PropertyEditorManager } from \"./PropertyEditorManager\";\r\nimport { ImageCheckBox } from \"@itwin/core-react\";\r\n\r\n// cSpell:ignore imagecheckbox\r\n\r\n/** @internal */\r\ninterface ImageCheckBoxEditorState {\r\n  /** Image for the \"checked\" state */\r\n  imageOn: string;\r\n  /** Image for the \"unchecked\" (default) state */\r\n  imageOff: string;\r\n  checkboxValue: boolean;\r\n  isDisabled?: boolean;\r\n}\r\n/** [[ImageCheckBoxEditor]]\r\n * Boolean editor that renders with an image instead of checkbox\r\n * @public\r\n */\r\nexport class ImageCheckBoxEditor extends React.PureComponent<PropertyEditorProps, ImageCheckBoxEditorState> implements TypeEditor {\r\n  private _isMounted = false;\r\n  private _inputElement: React.RefObject<HTMLInputElement> = React.createRef();\r\n\r\n  /** @internal */\r\n  public override readonly state: Readonly<ImageCheckBoxEditorState> = {\r\n    imageOff: \"\",\r\n    imageOn: \"\",\r\n    checkboxValue: false,\r\n    isDisabled: false,\r\n  };\r\n\r\n  public async getPropertyValue(): Promise<PropertyValue | undefined> {\r\n    const record = this.props.propertyRecord;\r\n    let propertyValue: PropertyValue | undefined;\r\n\r\n    // istanbul ignore else\r\n    if (record && record.value.valueFormat === PropertyValueFormat.Primitive) {\r\n      propertyValue = {\r\n        valueFormat: PropertyValueFormat.Primitive,\r\n        value: this.state.checkboxValue,\r\n        displayValue: \"\",\r\n      };\r\n    }\r\n\r\n    return propertyValue;\r\n  }\r\n\r\n  public get htmlElement(): HTMLElement | null {\r\n    return this._inputElement.current;\r\n  }\r\n\r\n  public get hasFocus(): boolean {\r\n    return document.activeElement === this._inputElement.current;\r\n  }\r\n\r\n  /** @internal */\r\n  public override componentDidMount() {\r\n    this._isMounted = true;\r\n    this.setStateFromProps();\r\n  }\r\n\r\n  /** @internal */\r\n  public override componentWillUnmount() {\r\n    this._isMounted = false;\r\n  }\r\n\r\n  /** @internal */\r\n  public override componentDidUpdate(prevProps: PropertyEditorProps) {\r\n    if (this.props.propertyRecord !== prevProps.propertyRecord) {\r\n      this.setStateFromProps();\r\n    }\r\n  }\r\n\r\n  private setStateFromProps() {\r\n    const { propertyRecord } = this.props;\r\n    let checkboxValue = false;\r\n    let imageOn = \"\";\r\n    let imageOff = \"\";\r\n    let isDisabled = false;\r\n\r\n    // istanbul ignore else\r\n    if (propertyRecord && propertyRecord.value.valueFormat === PropertyValueFormat.Primitive) {\r\n      const primitiveValue = propertyRecord.value.value;\r\n      checkboxValue = primitiveValue as boolean;\r\n    }\r\n\r\n    // istanbul ignore else\r\n    if (propertyRecord && propertyRecord.isDisabled)\r\n      isDisabled = propertyRecord.isDisabled;\r\n\r\n    if (propertyRecord && propertyRecord.property && propertyRecord.property.editor && propertyRecord.property.editor.params) {\r\n      const imageCheckBoxParams = propertyRecord.property.editor.params.find((param: PropertyEditorParams) => param.type === PropertyEditorParamTypes.CheckBoxImages) as ImageCheckBoxParams;\r\n      // istanbul ignore else\r\n      if (imageCheckBoxParams) {\r\n        imageOn = imageCheckBoxParams.imageOn;\r\n        imageOff = imageCheckBoxParams.imageOff;\r\n      }\r\n    }\r\n    this.setState({ imageOn, imageOff, checkboxValue, isDisabled });\r\n  }\r\n\r\n  private _handleClick = (checked: boolean) => {\r\n    this.setState({\r\n      checkboxValue: checked,\r\n    }, async () => {\r\n      // istanbul ignore else\r\n      if (this.props.propertyRecord && this.props.onCommit) {\r\n        const propertyValue = await this.getPropertyValue();\r\n        // istanbul ignore else\r\n        if (this._isMounted && propertyValue !== undefined) {\r\n          this.props.onCommit({ propertyRecord: this.props.propertyRecord, newValue: propertyValue });\r\n        }\r\n      }\r\n    });\r\n  };\r\n\r\n  public override render() {\r\n    const className = classnames(\"components-cell-editor\", \"components-imagecheckbox-editor\", this.props.className);\r\n    const checked = this.state.checkboxValue;\r\n    const isDisabled = !!this.state.isDisabled;\r\n\r\n    return (\r\n      <ImageCheckBox\r\n        inputRef={this._inputElement}\r\n        imageOff={this.state.imageOff}\r\n        imageOn={this.state.imageOn}\r\n        className={className}\r\n        border={true}\r\n        style={this.props.style}\r\n        checked={checked}\r\n        disabled={isDisabled}\r\n        onClick={this._handleClick}\r\n        data-testid=\"components-imagecheckbox-editor\"/>\r\n    );\r\n  }\r\n}\r\n\r\n/** ImageCheckBox Property Editor registered for the \"bool\" and \"boolean\" type names.\r\n * It uses the [[ImageCheckBoxEditor]] React component.\r\n * @public\r\n */\r\nexport class ImageCheckBoxPropertyEditor extends PropertyEditorBase {\r\n  public get reactNode(): React.ReactNode {\r\n    return <ImageCheckBoxEditor />;\r\n  }\r\n}\r\n\r\nPropertyEditorManager.registerEditor(StandardTypeNames.Boolean, ImageCheckBoxPropertyEditor, StandardEditorNames.ImageCheckBox);\r\nPropertyEditorManager.registerEditor(StandardTypeNames.Bool, ImageCheckBoxPropertyEditor, StandardEditorNames.ImageCheckBox);\r\n"]}
+{"version":3,"file":"ImageCheckBoxEditor.js","sourceRoot":"","sources":["../../../../src/components-react/editors/ImageCheckBoxEditor.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 PropertyEditors\n */\n\nimport \"./ImageCheckBoxEditor.scss\";\nimport classnames from \"classnames\";\nimport * as React from \"react\";\nimport {\n  ImageCheckBoxParams, PropertyEditorParams, PropertyEditorParamTypes, PropertyValue, PropertyValueFormat, StandardEditorNames, StandardTypeNames,\n} from \"@itwin/appui-abstract\";\nimport { PropertyEditorProps, TypeEditor } from \"./EditorContainer\";\nimport { PropertyEditorBase, PropertyEditorManager } from \"./PropertyEditorManager\";\nimport { ImageCheckBox } from \"@itwin/core-react\";\n\n// cSpell:ignore imagecheckbox\n\n/** @internal */\ninterface ImageCheckBoxEditorState {\n  /** Image for the \"checked\" state */\n  imageOn: string;\n  /** Image for the \"unchecked\" (default) state */\n  imageOff: string;\n  checkboxValue: boolean;\n  isDisabled?: boolean;\n}\n/** [[ImageCheckBoxEditor]]\n * Boolean editor that renders with an image instead of checkbox\n * @public\n */\nexport class ImageCheckBoxEditor extends React.PureComponent<PropertyEditorProps, ImageCheckBoxEditorState> implements TypeEditor {\n  private _isMounted = false;\n  private _inputElement: React.RefObject<HTMLInputElement> = React.createRef();\n\n  /** @internal */\n  public override readonly state: Readonly<ImageCheckBoxEditorState> = {\n    imageOff: \"\",\n    imageOn: \"\",\n    checkboxValue: false,\n    isDisabled: false,\n  };\n\n  public async getPropertyValue(): Promise<PropertyValue | undefined> {\n    const record = this.props.propertyRecord;\n    let propertyValue: PropertyValue | undefined;\n\n    // istanbul ignore else\n    if (record && record.value.valueFormat === PropertyValueFormat.Primitive) {\n      propertyValue = {\n        valueFormat: PropertyValueFormat.Primitive,\n        value: this.state.checkboxValue,\n        displayValue: \"\",\n      };\n    }\n\n    return propertyValue;\n  }\n\n  public get htmlElement(): HTMLElement | null {\n    return this._inputElement.current;\n  }\n\n  public get hasFocus(): boolean {\n    return document.activeElement === this._inputElement.current;\n  }\n\n  /** @internal */\n  public override componentDidMount() {\n    this._isMounted = true;\n    this.setStateFromProps();\n  }\n\n  /** @internal */\n  public override componentWillUnmount() {\n    this._isMounted = false;\n  }\n\n  /** @internal */\n  public override componentDidUpdate(prevProps: PropertyEditorProps) {\n    if (this.props.propertyRecord !== prevProps.propertyRecord) {\n      this.setStateFromProps();\n    }\n  }\n\n  private setStateFromProps() {\n    const { propertyRecord } = this.props;\n    let checkboxValue = false;\n    let imageOn = \"\";\n    let imageOff = \"\";\n    let isDisabled = false;\n\n    // istanbul ignore else\n    if (propertyRecord && propertyRecord.value.valueFormat === PropertyValueFormat.Primitive) {\n      const primitiveValue = propertyRecord.value.value;\n      checkboxValue = primitiveValue as boolean;\n    }\n\n    // istanbul ignore else\n    if (propertyRecord && propertyRecord.isDisabled)\n      isDisabled = propertyRecord.isDisabled;\n\n    if (propertyRecord && propertyRecord.property && propertyRecord.property.editor && propertyRecord.property.editor.params) {\n      const imageCheckBoxParams = propertyRecord.property.editor.params.find((param: PropertyEditorParams) => param.type === PropertyEditorParamTypes.CheckBoxImages) as ImageCheckBoxParams;\n      // istanbul ignore else\n      if (imageCheckBoxParams) {\n        imageOn = imageCheckBoxParams.imageOn;\n        imageOff = imageCheckBoxParams.imageOff;\n      }\n    }\n    this.setState({ imageOn, imageOff, checkboxValue, isDisabled });\n  }\n\n  private _handleClick = (checked: boolean) => {\n    this.setState({\n      checkboxValue: checked,\n    }, async () => {\n      // istanbul ignore else\n      if (this.props.propertyRecord && this.props.onCommit) {\n        const propertyValue = await this.getPropertyValue();\n        // istanbul ignore else\n        if (this._isMounted && propertyValue !== undefined) {\n          this.props.onCommit({ propertyRecord: this.props.propertyRecord, newValue: propertyValue });\n        }\n      }\n    });\n  };\n\n  public override render() {\n    const className = classnames(\"components-cell-editor\", \"components-imagecheckbox-editor\", this.props.className);\n    const checked = this.state.checkboxValue;\n    const isDisabled = !!this.state.isDisabled;\n\n    return (\n      <ImageCheckBox\n        inputRef={this._inputElement}\n        imageOff={this.state.imageOff}\n        imageOn={this.state.imageOn}\n        className={className}\n        border={true}\n        style={this.props.style}\n        checked={checked}\n        disabled={isDisabled}\n        onClick={this._handleClick}\n        data-testid=\"components-imagecheckbox-editor\"/>\n    );\n  }\n}\n\n/** ImageCheckBox Property Editor registered for the \"bool\" and \"boolean\" type names.\n * It uses the [[ImageCheckBoxEditor]] React component.\n * @public\n */\nexport class ImageCheckBoxPropertyEditor extends PropertyEditorBase {\n  public get reactNode(): React.ReactNode {\n    return <ImageCheckBoxEditor />;\n  }\n}\n\nPropertyEditorManager.registerEditor(StandardTypeNames.Boolean, ImageCheckBoxPropertyEditor, StandardEditorNames.ImageCheckBox);\nPropertyEditorManager.registerEditor(StandardTypeNames.Bool, ImageCheckBoxPropertyEditor, StandardEditorNames.ImageCheckBox);\n"]}

package/lib/esm/components-react/editors/ImageCheckBoxEditor.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.
-*--------------------------------------------------------------------------------------------*/
-
-$image-checkbox-size: 32px;
-
-.components-image-checkbox-editor {
-  height: $image-checkbox-size;
-  width: $image-checkbox-size;
-  margin-left: 0px;
-
-  &.components-cell-editor {
-    border: none;
-  }
-}
-
-.components-property-list--horizontal {
-  .components-image-checkbox-editor {
-    margin-left: var(
-      --iui-font-size-1
-    ); // Clear the resizer in the PropertyGrid
-  }
-}
+/*---------------------------------------------------------------------------------------------
+* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+* See LICENSE.md in the project root for license terms and full copyright notice.
+*--------------------------------------------------------------------------------------------*/
+
+$image-checkbox-size: 32px;
+
+.components-image-checkbox-editor {
+  height: $image-checkbox-size;
+  width: $image-checkbox-size;
+  margin-left: 0px;
+
+  &.components-cell-editor {
+    border: none;
+  }
+}
+
+.components-property-list--horizontal {
+  .components-image-checkbox-editor {
+    margin-left: var(
+      --iui-font-size-1
+    ); // Clear the resizer in the PropertyGrid
+  }
+}

package/lib/esm/components-react/editors/NumericInputEditor.js.map

@@ -1 +1 @@
-{"version":3,"file":"NumericInputEditor.js","sourceRoot":"","sources":["../../../../src/components-react/editors/NumericInputEditor.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 PropertyEditors\r\n */\r\n\r\nimport \"./NumericInputEditor.scss\";\r\nimport classnames from \"classnames\";\r\nimport * as React from \"react\";\r\nimport {\r\n  InputEditorSizeParams, PropertyEditorParams, PropertyEditorParamTypes, PropertyValue, PropertyValueFormat, RangeEditorParams,\r\n  StandardEditorNames, StandardTypeNames,\r\n} from \"@itwin/appui-abstract\";\r\nimport { NumberInput } from \"@itwin/core-react\";\r\nimport { PropertyEditorProps, TypeEditor } from \"./EditorContainer\";\r\nimport { PropertyEditorBase, PropertyEditorManager } from \"./PropertyEditorManager\";\r\n\r\n/** @internal */\r\ninterface NumericInputEditorState {\r\n  value: number;\r\n  readonly: boolean;\r\n  isDisabled?: boolean;\r\n  size?: number;\r\n  maxLength?: number;\r\n\r\n  min?: number;\r\n  max?: number;\r\n  step?: number;\r\n  precision?: number;\r\n}\r\n\r\n/** NumericInputEditor React component that is a property editor with numeric input & up/down buttons\r\n * @public\r\n */\r\nexport class NumericInputEditor extends React.PureComponent<PropertyEditorProps, NumericInputEditorState> implements TypeEditor {\r\n  private _isMounted = false;\r\n  private _inputElement: React.RefObject<HTMLInputElement> = React.createRef();\r\n  public hasFocus = false; // hot used since containerHandlesEnter is false\r\n\r\n  /** @internal */\r\n  public override readonly state: Readonly<NumericInputEditorState> = {\r\n    value: 0,\r\n    readonly: false,\r\n  };\r\n\r\n  public async getPropertyValue(): Promise<PropertyValue | undefined> {\r\n    const record = this.props.propertyRecord;\r\n    let propertyValue: PropertyValue | undefined;\r\n\r\n    // istanbul ignore else\r\n    if (record && record.value.valueFormat === PropertyValueFormat.Primitive) {\r\n      propertyValue = {\r\n        valueFormat: PropertyValueFormat.Primitive,\r\n        value: this.state.value,\r\n        displayValue: \"\",\r\n      };\r\n    }\r\n\r\n    return propertyValue;\r\n  }\r\n\r\n  public get htmlElement(): HTMLElement | null {\r\n    return this._inputElement.current;\r\n  }\r\n\r\n  private _handleCommit = async (): Promise<void> => {\r\n    // istanbul ignore else\r\n    if (this.props.propertyRecord && this.props.onCommit) {\r\n      const propertyValue = await this.getPropertyValue();\r\n      // istanbul ignore else\r\n      if (propertyValue !== undefined) {\r\n        this.props.onCommit({ propertyRecord: this.props.propertyRecord, newValue: propertyValue });\r\n      }\r\n    }\r\n  };\r\n\r\n  private _updateValue = (value: number | undefined, _stringValue: string): void => {\r\n    const newValue = value !== undefined ? value : /* istanbul ignore next */ 0;\r\n\r\n    // istanbul ignore else\r\n    if (this._isMounted)\r\n      this.setState({\r\n        value: newValue,\r\n      }, async () => {\r\n        await this._handleCommit();\r\n      });\r\n  };\r\n\r\n  /** @internal */\r\n  public override componentDidMount() {\r\n    this._isMounted = true;\r\n    this.setStateFromProps(); // eslint-disable-line @typescript-eslint/no-floating-promises\r\n  }\r\n\r\n  /** @internal */\r\n  public override componentWillUnmount() {\r\n    this._isMounted = false;\r\n  }\r\n\r\n  /** @internal */\r\n  public override componentDidUpdate(prevProps: PropertyEditorProps) {\r\n    if (this.props.propertyRecord !== prevProps.propertyRecord) {\r\n      this.setStateFromProps(); // eslint-disable-line @typescript-eslint/no-floating-promises\r\n    }\r\n  }\r\n\r\n  private async setStateFromProps() {\r\n    const record = this.props.propertyRecord;\r\n    let initialValue = 0;\r\n\r\n    // istanbul ignore else\r\n    if (record && record.value.valueFormat === PropertyValueFormat.Primitive) {\r\n      initialValue = record.value.value as number;\r\n    }\r\n\r\n    const readonly = record && undefined !== record.isReadonly ? record.isReadonly : false;\r\n    let size: number | undefined;\r\n    let maxLength: number | undefined;\r\n    let min: number | undefined;\r\n    let max: number | undefined;\r\n    let step: number | undefined;\r\n    let precision: number | undefined;\r\n\r\n    const isDisabled = record ? record.isDisabled : undefined;\r\n\r\n    if (record && record.property && record.property.editor && record.property.editor.params) {\r\n      const editorSizeParams = record.property.editor.params.find((param: PropertyEditorParams) => param.type === PropertyEditorParamTypes.InputEditorSize) as InputEditorSizeParams;\r\n      if (editorSizeParams) {\r\n        // istanbul ignore else\r\n        if (editorSizeParams.size)\r\n          size = editorSizeParams.size;\r\n        // istanbul ignore else\r\n        if (editorSizeParams.maxLength)\r\n          maxLength = editorSizeParams.maxLength;\r\n      }\r\n\r\n      const rangeParams = record.property.editor.params.find((param: PropertyEditorParams) => param.type === PropertyEditorParamTypes.Range) as RangeEditorParams;\r\n      if (rangeParams) {\r\n        min = rangeParams.minimum;\r\n        max = rangeParams.maximum;\r\n        step = rangeParams.step;\r\n        precision = rangeParams.precision;\r\n      }\r\n    }\r\n\r\n    // istanbul ignore else\r\n    if (this._isMounted)\r\n      this.setState({ value: initialValue, readonly, size, maxLength, isDisabled, min, max, step, precision });\r\n  }\r\n\r\n  /** @internal */\r\n  public override render(): React.ReactNode {\r\n    const className = classnames(\"components-cell-editor\", \"components-numeric-input-editor\", this.props.className);\r\n    const minSize = this.state.size ? this.state.size : 8;\r\n    const style: React.CSSProperties = {\r\n      ...this.props.style,\r\n      minWidth: `${minSize * 0.75}em`,\r\n    };\r\n\r\n    return (\r\n      <NumberInput\r\n        ref={this._inputElement}\r\n        className={className}\r\n        style={style}\r\n        value={this.state.value}\r\n        min={this.state.min}\r\n        max={this.state.max}\r\n        step={this.state.step}\r\n        precision={this.state.precision}\r\n        readOnly={this.state.readonly}\r\n        maxLength={this.state.maxLength}\r\n        onBlur={this.props.onBlur}\r\n        onChange={this._updateValue}\r\n        setFocus={this.props.setFocus && !this.state.isDisabled}\r\n        isControlled={this.props.shouldCommitOnChange}\r\n      />\r\n    );\r\n  }\r\n}\r\n\r\n/** Numeric Input Property Editor registered for the \"number\" type name and \"numeric-input\" editor name.\r\n * It uses the [[NumericInputEditor]] React component.\r\n * @public\r\n */\r\nexport class NumericInputPropertyEditor extends PropertyEditorBase {\r\n  public get reactNode(): React.ReactNode {\r\n    return <NumericInputEditor />;\r\n  }\r\n  // istanbul ignore next\r\n  public override get containerHandlesEnter(): boolean { // let input editor process enter key\r\n    return false;\r\n  }\r\n}\r\n\r\nPropertyEditorManager.registerEditor(StandardTypeNames.Number, NumericInputPropertyEditor, StandardEditorNames.NumericInput);\r\nPropertyEditorManager.registerEditor(StandardTypeNames.Int, NumericInputPropertyEditor, StandardEditorNames.NumericInput);\r\nPropertyEditorManager.registerEditor(StandardTypeNames.Float, NumericInputPropertyEditor, StandardEditorNames.NumericInput);\r\nPropertyEditorManager.registerEditor(StandardTypeNames.Double, NumericInputPropertyEditor, StandardEditorNames.NumericInput);\r\n"]}
+{"version":3,"file":"NumericInputEditor.js","sourceRoot":"","sources":["../../../../src/components-react/editors/NumericInputEditor.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 PropertyEditors\n */\n\nimport \"./NumericInputEditor.scss\";\nimport classnames from \"classnames\";\nimport * as React from \"react\";\nimport {\n  InputEditorSizeParams, PropertyEditorParams, PropertyEditorParamTypes, PropertyValue, PropertyValueFormat, RangeEditorParams,\n  StandardEditorNames, StandardTypeNames,\n} from \"@itwin/appui-abstract\";\nimport { NumberInput } from \"@itwin/core-react\";\nimport { PropertyEditorProps, TypeEditor } from \"./EditorContainer\";\nimport { PropertyEditorBase, PropertyEditorManager } from \"./PropertyEditorManager\";\n\n/** @internal */\ninterface NumericInputEditorState {\n  value: number;\n  readonly: boolean;\n  isDisabled?: boolean;\n  size?: number;\n  maxLength?: number;\n\n  min?: number;\n  max?: number;\n  step?: number;\n  precision?: number;\n}\n\n/** NumericInputEditor React component that is a property editor with numeric input & up/down buttons\n * @public\n */\nexport class NumericInputEditor extends React.PureComponent<PropertyEditorProps, NumericInputEditorState> implements TypeEditor {\n  private _isMounted = false;\n  private _inputElement: React.RefObject<HTMLInputElement> = React.createRef();\n  public hasFocus = false; // hot used since containerHandlesEnter is false\n\n  /** @internal */\n  public override readonly state: Readonly<NumericInputEditorState> = {\n    value: 0,\n    readonly: false,\n  };\n\n  public async getPropertyValue(): Promise<PropertyValue | undefined> {\n    const record = this.props.propertyRecord;\n    let propertyValue: PropertyValue | undefined;\n\n    // istanbul ignore else\n    if (record && record.value.valueFormat === PropertyValueFormat.Primitive) {\n      propertyValue = {\n        valueFormat: PropertyValueFormat.Primitive,\n        value: this.state.value,\n        displayValue: \"\",\n      };\n    }\n\n    return propertyValue;\n  }\n\n  public get htmlElement(): HTMLElement | null {\n    return this._inputElement.current;\n  }\n\n  private _handleCommit = async (): Promise<void> => {\n    // istanbul ignore else\n    if (this.props.propertyRecord && this.props.onCommit) {\n      const propertyValue = await this.getPropertyValue();\n      // istanbul ignore else\n      if (propertyValue !== undefined) {\n        this.props.onCommit({ propertyRecord: this.props.propertyRecord, newValue: propertyValue });\n      }\n    }\n  };\n\n  private _updateValue = (value: number | undefined, _stringValue: string): void => {\n    const newValue = value !== undefined ? value : /* istanbul ignore next */ 0;\n\n    // istanbul ignore else\n    if (this._isMounted)\n      this.setState({\n        value: newValue,\n      }, async () => {\n        await this._handleCommit();\n      });\n  };\n\n  /** @internal */\n  public override componentDidMount() {\n    this._isMounted = true;\n    this.setStateFromProps(); // eslint-disable-line @typescript-eslint/no-floating-promises\n  }\n\n  /** @internal */\n  public override componentWillUnmount() {\n    this._isMounted = false;\n  }\n\n  /** @internal */\n  public override componentDidUpdate(prevProps: PropertyEditorProps) {\n    if (this.props.propertyRecord !== prevProps.propertyRecord) {\n      this.setStateFromProps(); // eslint-disable-line @typescript-eslint/no-floating-promises\n    }\n  }\n\n  private async setStateFromProps() {\n    const record = this.props.propertyRecord;\n    let initialValue = 0;\n\n    // istanbul ignore else\n    if (record && record.value.valueFormat === PropertyValueFormat.Primitive) {\n      initialValue = record.value.value as number;\n    }\n\n    const readonly = record && undefined !== record.isReadonly ? record.isReadonly : false;\n    let size: number | undefined;\n    let maxLength: number | undefined;\n    let min: number | undefined;\n    let max: number | undefined;\n    let step: number | undefined;\n    let precision: number | undefined;\n\n    const isDisabled = record ? record.isDisabled : undefined;\n\n    if (record && record.property && record.property.editor && record.property.editor.params) {\n      const editorSizeParams = record.property.editor.params.find((param: PropertyEditorParams) => param.type === PropertyEditorParamTypes.InputEditorSize) as InputEditorSizeParams;\n      if (editorSizeParams) {\n        // istanbul ignore else\n        if (editorSizeParams.size)\n          size = editorSizeParams.size;\n        // istanbul ignore else\n        if (editorSizeParams.maxLength)\n          maxLength = editorSizeParams.maxLength;\n      }\n\n      const rangeParams = record.property.editor.params.find((param: PropertyEditorParams) => param.type === PropertyEditorParamTypes.Range) as RangeEditorParams;\n      if (rangeParams) {\n        min = rangeParams.minimum;\n        max = rangeParams.maximum;\n        step = rangeParams.step;\n        precision = rangeParams.precision;\n      }\n    }\n\n    // istanbul ignore else\n    if (this._isMounted)\n      this.setState({ value: initialValue, readonly, size, maxLength, isDisabled, min, max, step, precision });\n  }\n\n  /** @internal */\n  public override render(): React.ReactNode {\n    const className = classnames(\"components-cell-editor\", \"components-numeric-input-editor\", this.props.className);\n    const minSize = this.state.size ? this.state.size : 8;\n    const style: React.CSSProperties = {\n      ...this.props.style,\n      minWidth: `${minSize * 0.75}em`,\n    };\n\n    return (\n      <NumberInput\n        ref={this._inputElement}\n        className={className}\n        style={style}\n        value={this.state.value}\n        min={this.state.min}\n        max={this.state.max}\n        step={this.state.step}\n        precision={this.state.precision}\n        readOnly={this.state.readonly}\n        maxLength={this.state.maxLength}\n        onBlur={this.props.onBlur}\n        onChange={this._updateValue}\n        setFocus={this.props.setFocus && !this.state.isDisabled}\n        isControlled={this.props.shouldCommitOnChange}\n      />\n    );\n  }\n}\n\n/** Numeric Input Property Editor registered for the \"number\" type name and \"numeric-input\" editor name.\n * It uses the [[NumericInputEditor]] React component.\n * @public\n */\nexport class NumericInputPropertyEditor extends PropertyEditorBase {\n  public get reactNode(): React.ReactNode {\n    return <NumericInputEditor />;\n  }\n  // istanbul ignore next\n  public override get containerHandlesEnter(): boolean { // let input editor process enter key\n    return false;\n  }\n}\n\nPropertyEditorManager.registerEditor(StandardTypeNames.Number, NumericInputPropertyEditor, StandardEditorNames.NumericInput);\nPropertyEditorManager.registerEditor(StandardTypeNames.Int, NumericInputPropertyEditor, StandardEditorNames.NumericInput);\nPropertyEditorManager.registerEditor(StandardTypeNames.Float, NumericInputPropertyEditor, StandardEditorNames.NumericInput);\nPropertyEditorManager.registerEditor(StandardTypeNames.Double, NumericInputPropertyEditor, StandardEditorNames.NumericInput);\n"]}

package/lib/esm/components-react/editors/NumericInputEditor.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 "./variables";
-
-.components-smallEditor-host {
-
-  .components-numeric-input-editor {
-
-    &.iui-input {
-      min-height: $editor-component-height-small !important;
-      padding-top: 0px !important;
-      padding-bottom: 0px !important;
-    }
-  }
+/*---------------------------------------------------------------------------------------------
+* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+* See LICENSE.md in the project root for license terms and full copyright notice.
+*--------------------------------------------------------------------------------------------*/
+@import "./variables";
+
+.components-smallEditor-host {
+
+  .components-numeric-input-editor {
+
+    &.iui-input {
+      min-height: $editor-component-height-small !important;
+      padding-top: 0px !important;
+      padding-bottom: 0px !important;
+    }
+  }
 }

package/lib/esm/components-react/editors/PopupButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"PopupButton.js","sourceRoot":"","sources":["../../../../src/components-react/editors/PopupButton.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 PropertyEditors\r\n */\r\n\r\nimport \"./PopupButton.scss\";\r\nimport classnames from \"classnames\";\r\nimport * as React from \"react\";\r\nimport { RelativePosition, SpecialKey } from \"@itwin/appui-abstract\";\r\nimport { CommonDivProps, CommonProps, Div, Icon, Popup, UiCore } from \"@itwin/core-react\";\r\nimport { Button } from \"@itwin/itwinui-react\";\r\nimport { SvgCheckmark, SvgChevronDown, SvgRemove } from \"@itwin/itwinui-icons-react\";\r\n\r\n/** Properties for [[PopupButton]] component\r\n * @alpha\r\n */\r\nexport interface PopupButtonProps extends CommonProps {\r\n  /** Label to display in click area. */\r\n  label?: string | React.ReactNode;\r\n  /* Placeholder text used when there is no label yet */\r\n  placeholder?: string;\r\n  /** Contents of the popup */\r\n  children: React.ReactNode;\r\n  /** Title to display as tooltip. */\r\n  title?: string;\r\n\r\n  /** Set focus to popup - default is to set focus */\r\n  moveFocus?: boolean;\r\n  /** Element to receive focus, specified by React.RefObject or CSS selector string. If undefined and moveFocus is true then focus is moved to first focusable element. */\r\n  focusTarget?: React.RefObject<HTMLElement> | string;\r\n\r\n  /** Show or hide the box shadow (defaults to false) */\r\n  showShadow?: boolean;\r\n  /** Show or hide the arrow (defaults to false) */\r\n  showArrow?: boolean;\r\n  /** Indicates whether to set focus to the input element */\r\n  setFocus?: boolean;\r\n  /** Indicates whether to close the popup when Enter is pressed (defaults to true) */\r\n  closeOnEnter?: boolean;\r\n\r\n  /** Listens for click events on button area */\r\n  onClick?: (event: React.MouseEvent) => void;\r\n  /** Listens for popup close events */\r\n  onClose?: () => void;\r\n  /** Listens for Enter key in popup */\r\n  onEnter?: () => void;\r\n}\r\n\r\n/** @internal */\r\ninterface PopupButtonState {\r\n  showPopup: boolean;\r\n}\r\n\r\n/** PopupButton React component that is a button and property editor popup host\r\n * @alpha\r\n */\r\nexport class PopupButton extends React.PureComponent<PopupButtonProps, PopupButtonState> {\r\n  private _buttonRef = React.createRef<HTMLDivElement>();\r\n\r\n  /** @internal */\r\n  public override readonly state: Readonly<PopupButtonState> = {\r\n    showPopup: false,\r\n  };\r\n\r\n  /** @internal */\r\n  public override componentDidMount() {\r\n    if (this.props.setFocus && this._buttonRef.current)\r\n      this._buttonRef.current.focus();\r\n  }\r\n\r\n  private _togglePopup = (event: React.MouseEvent) => {\r\n    this.setState(\r\n      (prevState) => ({ showPopup: !prevState.showPopup }),\r\n      () => this.props.onClick && this.props.onClick(event));\r\n  };\r\n\r\n  public closePopup() {\r\n    this._closePopup();\r\n  }\r\n\r\n  private _closePopup = () => {\r\n    this.setState(\r\n      { showPopup: false },\r\n      () => {\r\n        this.props.onClose && this.props.onClose();\r\n\r\n        // istanbul ignore else\r\n        if (this._buttonRef.current)\r\n          this._buttonRef.current.focus();\r\n      });\r\n  };\r\n\r\n  private _handleKeyDown = (event: React.KeyboardEvent) => {\r\n    // istanbul ignore else\r\n    if ((event.key === SpecialKey.ArrowDown || event.key === SpecialKey.Space || event.key === SpecialKey.Enter) && !this.state.showPopup) {\r\n      event.preventDefault();\r\n      event.stopPropagation();\r\n      this.setState({ showPopup: true });\r\n    }\r\n  };\r\n\r\n  /** @internal */\r\n  public override render(): React.ReactNode {\r\n    const showArrow = this.props.showArrow ?? false;\r\n    const showShadow = this.props.showShadow ?? false;\r\n    const moveFocus = this.props.moveFocus ?? true;\r\n    const showPlaceholder = this.props.label === undefined && this.props.placeholder !== undefined;\r\n\r\n    const classNames = classnames(\r\n      \"components-popup-button\",\r\n      this.state.showPopup && \"components-popup-expanded\",\r\n    );\r\n\r\n    const valueClassNames = classnames(\r\n      \"components-popup-button-value\",\r\n      showPlaceholder && \"components-popup-button-placeholder\",\r\n    );\r\n\r\n    return (\r\n      <div className={this.props.className}>\r\n        <div className={classNames}\r\n          onClick={this._togglePopup}\r\n          onKeyDown={this._handleKeyDown}\r\n          data-testid=\"components-popup-button\"\r\n          tabIndex={0}\r\n          ref={this._buttonRef}\r\n          title={this.props.title}\r\n          role=\"button\"\r\n        >\r\n          <div className={valueClassNames}>\r\n            {this.props.label || this.props.placeholder}\r\n          </div>\r\n          <div className={\"components-popup-button-arrow\"}>\r\n            <div className={classnames(\"components-popup-button-arrow-icon\", \"icon\")}><Icon iconSpec={<SvgChevronDown />} /></div>\r\n          </div>\r\n        </div>\r\n        <Popup className=\"components-popup-button-popup\" isOpen={this.state.showPopup} position={RelativePosition.Bottom}\r\n          onClose={this._closePopup} onEnter={this.props.onEnter} closeOnEnter={this.props.closeOnEnter} target={this._buttonRef.current}\r\n          showArrow={showArrow} showShadow={showShadow}\r\n          moveFocus={moveFocus} focusTarget={this.props.focusTarget}\r\n        >\r\n          {this.props.children}\r\n        </Popup>\r\n      </div>\r\n\r\n    );\r\n  }\r\n}\r\n\r\n/** Popup content with padding\r\n * @alpha\r\n */\r\nexport function PopupContent(props: CommonDivProps) {\r\n  return <Div {...props} mainClassName=\"components-editor-popup-content\" />;\r\n}\r\n\r\n/** Properties for [[PopupOkCancelButtons]] component\r\n * @alpha\r\n */\r\nexport interface OkCancelProps {\r\n  onOk: (event: React.MouseEvent) => void;\r\n  onCancel: (event: React.MouseEvent) => void;\r\n}\r\n\r\n/** OK/Cancel Buttons\r\n * @alpha\r\n */\r\nexport function PopupOkCancelButtons(props: OkCancelProps) {\r\n  return (\r\n    <div className=\"components-popup-bottom-buttons\">\r\n      <Button\r\n        className={classnames(\"components-popup-large-button\", \"components-popup-ok-button\")}\r\n        data-testid=\"components-popup-ok-button\"\r\n        styleType=\"cta\"\r\n        title={UiCore.translate(\"dialog.ok\")}\r\n        onClick={props.onOk}\r\n      >\r\n        <Icon iconSpec={<SvgCheckmark />} />\r\n      </Button>\r\n      <Button\r\n        className={classnames(\"components-popup-large-button\", \"components-popup-cancel-button\")}\r\n        data-testid=\"components-popup-cancel-button\"\r\n        title={UiCore.translate(\"dialog.cancel\")}\r\n        onClick={props.onCancel}\r\n      >\r\n        <Icon iconSpec={<SvgRemove />} />\r\n      </Button>\r\n    </div>\r\n  );\r\n}\r\n"]}
+{"version":3,"file":"PopupButton.js","sourceRoot":"","sources":["../../../../src/components-react/editors/PopupButton.tsx"],"names":[],"mappings":"AAAA;;;+FAG+F;AAC/F;;GAEG;AAEH,OAAO,oBAAoB,CAAC;AAC5B,OAAO,UAAU,MAAM,YAAY,CAAC;AACpC,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,gBAAgB,EAAE,UAAU,EAAE,MAAM,uBAAuB,CAAC;AACrE,OAAO,EAA+B,GAAG,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,mBAAmB,CAAC;AAC1F,OAAO,EAAE,MAAM,EAAE,MAAM,sBAAsB,CAAC;AAC9C,OAAO,EAAE,YAAY,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,4BAA4B,CAAC;AA0CrF;;GAEG;AACH,MAAM,OAAO,WAAY,SAAQ,KAAK,CAAC,aAAiD;IAAxF;;QACU,eAAU,GAAG,KAAK,CAAC,SAAS,EAAkB,CAAC;QAEvD,gBAAgB;QACS,UAAK,GAA+B;YAC3D,SAAS,EAAE,KAAK;SACjB,CAAC;QAQM,iBAAY,GAAG,CAAC,KAAuB,EAAE,EAAE;YACjD,IAAI,CAAC,QAAQ,CACX,CAAC,SAAS,EAAE,EAAE,CAAC,CAAC,EAAE,SAAS,EAAE,CAAC,SAAS,CAAC,SAAS,EAAE,CAAC,EACpD,GAAG,EAAE,CAAC,IAAI,CAAC,KAAK,CAAC,OAAO,IAAI,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC,CAAC;QAC3D,CAAC,CAAC;QAMM,gBAAW,GAAG,GAAG,EAAE;YACzB,IAAI,CAAC,QAAQ,CACX,EAAE,SAAS,EAAE,KAAK,EAAE,EACpB,GAAG,EAAE;gBACH,IAAI,CAAC,KAAK,CAAC,OAAO,IAAI,IAAI,CAAC,KAAK,CAAC,OAAO,EAAE,CAAC;gBAE3C,uBAAuB;gBACvB,IAAI,IAAI,CAAC,UAAU,CAAC,OAAO;oBACzB,IAAI,CAAC,UAAU,CAAC,OAAO,CAAC,KAAK,EAAE,CAAC;YACpC,CAAC,CAAC,CAAC;QACP,CAAC,CAAC;QAEM,mBAAc,GAAG,CAAC,KAA0B,EAAE,EAAE;YACtD,uBAAuB;YACvB,IAAI,CAAC,KAAK,CAAC,GAAG,KAAK,UAAU,CAAC,SAAS,IAAI,KAAK,CAAC,GAAG,KAAK,UAAU,CAAC,KAAK,IAAI,KAAK,CAAC,GAAG,KAAK,UAAU,CAAC,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,SAAS,EAAE;gBACrI,KAAK,CAAC,cAAc,EAAE,CAAC;gBACvB,KAAK,CAAC,eAAe,EAAE,CAAC;gBACxB,IAAI,CAAC,QAAQ,CAAC,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,CAAC;aACpC;QACH,CAAC,CAAC;IAgDJ,CAAC;IAnFC,gBAAgB;IACA,iBAAiB;QAC/B,IAAI,IAAI,CAAC,KAAK,CAAC,QAAQ,IAAI,IAAI,CAAC,UAAU,CAAC,OAAO;YAChD,IAAI,CAAC,UAAU,CAAC,OAAO,CAAC,KAAK,EAAE,CAAC;IACpC,CAAC;IAQM,UAAU;QACf,IAAI,CAAC,WAAW,EAAE,CAAC;IACrB,CAAC;IAuBD,gBAAgB;IACA,MAAM;QACpB,MAAM,SAAS,GAAG,IAAI,CAAC,KAAK,CAAC,SAAS,IAAI,KAAK,CAAC;QAChD,MAAM,UAAU,GAAG,IAAI,CAAC,KAAK,CAAC,UAAU,IAAI,KAAK,CAAC;QAClD,MAAM,SAAS,GAAG,IAAI,CAAC,KAAK,CAAC,SAAS,IAAI,IAAI,CAAC;QAC/C,MAAM,eAAe,GAAG,IAAI,CAAC,KAAK,CAAC,KAAK,KAAK,SAAS,IAAI,IAAI,CAAC,KAAK,CAAC,WAAW,KAAK,SAAS,CAAC;QAE/F,MAAM,UAAU,GAAG,UAAU,CAC3B,yBAAyB,EACzB,IAAI,CAAC,KAAK,CAAC,SAAS,IAAI,2BAA2B,CACpD,CAAC;QAEF,MAAM,eAAe,GAAG,UAAU,CAChC,+BAA+B,EAC/B,eAAe,IAAI,qCAAqC,CACzD,CAAC;QAEF,OAAO,CACL,6BAAK,SAAS,EAAE,IAAI,CAAC,KAAK,CAAC,SAAS;YAClC,6BAAK,SAAS,EAAE,UAAU,EACxB,OAAO,EAAE,IAAI,CAAC,YAAY,EAC1B,SAAS,EAAE,IAAI,CAAC,cAAc,iBAClB,yBAAyB,EACrC,QAAQ,EAAE,CAAC,EACX,GAAG,EAAE,IAAI,CAAC,UAAU,EACpB,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,KAAK,EACvB,IAAI,EAAC,QAAQ;gBAEb,6BAAK,SAAS,EAAE,eAAe,IAC5B,IAAI,CAAC,KAAK,CAAC,KAAK,IAAI,IAAI,CAAC,KAAK,CAAC,WAAW,CACvC;gBACN,6BAAK,SAAS,EAAE,+BAA+B;oBAC7C,6BAAK,SAAS,EAAE,UAAU,CAAC,oCAAoC,EAAE,MAAM,CAAC;wBAAE,oBAAC,IAAI,IAAC,QAAQ,EAAE,oBAAC,cAAc,OAAG,GAAI,CAAM,CAClH,CACF;YACN,oBAAC,KAAK,IAAC,SAAS,EAAC,+BAA+B,EAAC,MAAM,EAAE,IAAI,CAAC,KAAK,CAAC,SAAS,EAAE,QAAQ,EAAE,gBAAgB,CAAC,MAAM,EAC9G,OAAO,EAAE,IAAI,CAAC,WAAW,EAAE,OAAO,EAAE,IAAI,CAAC,KAAK,CAAC,OAAO,EAAE,YAAY,EAAE,IAAI,CAAC,KAAK,CAAC,YAAY,EAAE,MAAM,EAAE,IAAI,CAAC,UAAU,CAAC,OAAO,EAC9H,SAAS,EAAE,SAAS,EAAE,UAAU,EAAE,UAAU,EAC5C,SAAS,EAAE,SAAS,EAAE,WAAW,EAAE,IAAI,CAAC,KAAK,CAAC,WAAW,IAExD,IAAI,CAAC,KAAK,CAAC,QAAQ,CACd,CACJ,CAEP,CAAC;IACJ,CAAC;CACF;AAED;;GAEG;AACH,MAAM,UAAU,YAAY,CAAC,KAAqB;IAChD,OAAO,oBAAC,GAAG,OAAK,KAAK,EAAE,aAAa,EAAC,iCAAiC,GAAG,CAAC;AAC5E,CAAC;AAUD;;GAEG;AACH,MAAM,UAAU,oBAAoB,CAAC,KAAoB;IACvD,OAAO,CACL,6BAAK,SAAS,EAAC,iCAAiC;QAC9C,oBAAC,MAAM,IACL,SAAS,EAAE,UAAU,CAAC,+BAA+B,EAAE,4BAA4B,CAAC,iBACxE,4BAA4B,EACxC,SAAS,EAAC,KAAK,EACf,KAAK,EAAE,MAAM,CAAC,SAAS,CAAC,WAAW,CAAC,EACpC,OAAO,EAAE,KAAK,CAAC,IAAI;YAEnB,oBAAC,IAAI,IAAC,QAAQ,EAAE,oBAAC,YAAY,OAAG,GAAI,CAC7B;QACT,oBAAC,MAAM,IACL,SAAS,EAAE,UAAU,CAAC,+BAA+B,EAAE,gCAAgC,CAAC,iBAC5E,gCAAgC,EAC5C,KAAK,EAAE,MAAM,CAAC,SAAS,CAAC,eAAe,CAAC,EACxC,OAAO,EAAE,KAAK,CAAC,QAAQ;YAEvB,oBAAC,IAAI,IAAC,QAAQ,EAAE,oBAAC,SAAS,OAAG,GAAI,CAC1B,CACL,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 PropertyEditors\n */\n\nimport \"./PopupButton.scss\";\nimport classnames from \"classnames\";\nimport * as React from \"react\";\nimport { RelativePosition, SpecialKey } from \"@itwin/appui-abstract\";\nimport { CommonDivProps, CommonProps, Div, Icon, Popup, UiCore } from \"@itwin/core-react\";\nimport { Button } from \"@itwin/itwinui-react\";\nimport { SvgCheckmark, SvgChevronDown, SvgRemove } from \"@itwin/itwinui-icons-react\";\n\n/** Properties for [[PopupButton]] component\n * @alpha\n */\nexport interface PopupButtonProps extends CommonProps {\n  /** Label to display in click area. */\n  label?: string | React.ReactNode;\n  /* Placeholder text used when there is no label yet */\n  placeholder?: string;\n  /** Contents of the popup */\n  children: React.ReactNode;\n  /** Title to display as tooltip. */\n  title?: string;\n\n  /** Set focus to popup - default is to set focus */\n  moveFocus?: boolean;\n  /** Element to receive focus, specified by React.RefObject or CSS selector string. If undefined and moveFocus is true then focus is moved to first focusable element. */\n  focusTarget?: React.RefObject<HTMLElement> | string;\n\n  /** Show or hide the box shadow (defaults to false) */\n  showShadow?: boolean;\n  /** Show or hide the arrow (defaults to false) */\n  showArrow?: boolean;\n  /** Indicates whether to set focus to the input element */\n  setFocus?: boolean;\n  /** Indicates whether to close the popup when Enter is pressed (defaults to true) */\n  closeOnEnter?: boolean;\n\n  /** Listens for click events on button area */\n  onClick?: (event: React.MouseEvent) => void;\n  /** Listens for popup close events */\n  onClose?: () => void;\n  /** Listens for Enter key in popup */\n  onEnter?: () => void;\n}\n\n/** @internal */\ninterface PopupButtonState {\n  showPopup: boolean;\n}\n\n/** PopupButton React component that is a button and property editor popup host\n * @alpha\n */\nexport class PopupButton extends React.PureComponent<PopupButtonProps, PopupButtonState> {\n  private _buttonRef = React.createRef<HTMLDivElement>();\n\n  /** @internal */\n  public override readonly state: Readonly<PopupButtonState> = {\n    showPopup: false,\n  };\n\n  /** @internal */\n  public override componentDidMount() {\n    if (this.props.setFocus && this._buttonRef.current)\n      this._buttonRef.current.focus();\n  }\n\n  private _togglePopup = (event: React.MouseEvent) => {\n    this.setState(\n      (prevState) => ({ showPopup: !prevState.showPopup }),\n      () => this.props.onClick && this.props.onClick(event));\n  };\n\n  public closePopup() {\n    this._closePopup();\n  }\n\n  private _closePopup = () => {\n    this.setState(\n      { showPopup: false },\n      () => {\n        this.props.onClose && this.props.onClose();\n\n        // istanbul ignore else\n        if (this._buttonRef.current)\n          this._buttonRef.current.focus();\n      });\n  };\n\n  private _handleKeyDown = (event: React.KeyboardEvent) => {\n    // istanbul ignore else\n    if ((event.key === SpecialKey.ArrowDown || event.key === SpecialKey.Space || event.key === SpecialKey.Enter) && !this.state.showPopup) {\n      event.preventDefault();\n      event.stopPropagation();\n      this.setState({ showPopup: true });\n    }\n  };\n\n  /** @internal */\n  public override render(): React.ReactNode {\n    const showArrow = this.props.showArrow ?? false;\n    const showShadow = this.props.showShadow ?? false;\n    const moveFocus = this.props.moveFocus ?? true;\n    const showPlaceholder = this.props.label === undefined && this.props.placeholder !== undefined;\n\n    const classNames = classnames(\n      \"components-popup-button\",\n      this.state.showPopup && \"components-popup-expanded\",\n    );\n\n    const valueClassNames = classnames(\n      \"components-popup-button-value\",\n      showPlaceholder && \"components-popup-button-placeholder\",\n    );\n\n    return (\n      <div className={this.props.className}>\n        <div className={classNames}\n          onClick={this._togglePopup}\n          onKeyDown={this._handleKeyDown}\n          data-testid=\"components-popup-button\"\n          tabIndex={0}\n          ref={this._buttonRef}\n          title={this.props.title}\n          role=\"button\"\n        >\n          <div className={valueClassNames}>\n            {this.props.label || this.props.placeholder}\n          </div>\n          <div className={\"components-popup-button-arrow\"}>\n            <div className={classnames(\"components-popup-button-arrow-icon\", \"icon\")}><Icon iconSpec={<SvgChevronDown />} /></div>\n          </div>\n        </div>\n        <Popup className=\"components-popup-button-popup\" isOpen={this.state.showPopup} position={RelativePosition.Bottom}\n          onClose={this._closePopup} onEnter={this.props.onEnter} closeOnEnter={this.props.closeOnEnter} target={this._buttonRef.current}\n          showArrow={showArrow} showShadow={showShadow}\n          moveFocus={moveFocus} focusTarget={this.props.focusTarget}\n        >\n          {this.props.children}\n        </Popup>\n      </div>\n\n    );\n  }\n}\n\n/** Popup content with padding\n * @alpha\n */\nexport function PopupContent(props: CommonDivProps) {\n  return <Div {...props} mainClassName=\"components-editor-popup-content\" />;\n}\n\n/** Properties for [[PopupOkCancelButtons]] component\n * @alpha\n */\nexport interface OkCancelProps {\n  onOk: (event: React.MouseEvent) => void;\n  onCancel: (event: React.MouseEvent) => void;\n}\n\n/** OK/Cancel Buttons\n * @alpha\n */\nexport function PopupOkCancelButtons(props: OkCancelProps) {\n  return (\n    <div className=\"components-popup-bottom-buttons\">\n      <Button\n        className={classnames(\"components-popup-large-button\", \"components-popup-ok-button\")}\n        data-testid=\"components-popup-ok-button\"\n        styleType=\"cta\"\n        title={UiCore.translate(\"dialog.ok\")}\n        onClick={props.onOk}\n      >\n        <Icon iconSpec={<SvgCheckmark />} />\n      </Button>\n      <Button\n        className={classnames(\"components-popup-large-button\", \"components-popup-cancel-button\")}\n        data-testid=\"components-popup-cancel-button\"\n        title={UiCore.translate(\"dialog.cancel\")}\n        onClick={props.onCancel}\n      >\n        <Icon iconSpec={<SvgRemove />} />\n      </Button>\n    </div>\n  );\n}\n"]}

package/lib/esm/components-react/editors/PopupButton.scss

@@ -1,116 +1,116 @@
-/*---------------------------------------------------------------------------------------------
-* 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/icons/variables";
-@import "~@itwin/core-react/lib/cjs/core-react/inputs/variables";
-@import "~@itwin/core-react/lib/cjs/core-react/style/baseline";
-@import "~@itwin/core-react/lib/cjs/core-react/style/themecolors";
-@import "./variables.scss";
-
-.components-popup-button {
-  min-width: 100%;
-  min-height: 28px;
-  height: 100%;
-  margin: 0;
-  padding: 0;
-  background-color: $buic-background-control;
-  border: 1px solid var(--iui-color-border-foreground);
-  border-radius: var(--iui-border-radius-1);
-  box-shadow: $buic-inputs-boxshadow 0px 1px 1px inset;
-  box-sizing: border-box;
-  cursor: pointer;
-
-  display: flex;
-  flex-shrink: 1;
-  align-items: center;
-
-  font-weight: normal;
-
-  > .components-popup-button-value {
-    flex-grow: 1;
-    max-width: calc(100% - var(--iui-size-l));
-    overflow-x: hidden;
-    padding: 0 3px;
-
-    &.components-popup-button-placeholder {
-      color: var(--iui-color-text-disabled);
-    }
-  }
-
-  > .components-popup-button-arrow {
-    background-color: $buic-background-control;
-    width: var(--iui-size-l);
-    height: var(--iui-size-l);
-
-    > .components-popup-button-arrow-icon {
-      transition: transform 0.2s;
-
-      &:hover {
-        color: var(--iui-color-text-accent);
-      }
-
-      text-align: center;
-      font-size: var(--iui-font-size-0);
-      line-height: var(--iui-size-l);
-    }
-  }
-
-  &:focus,
-  &.components-popup-expanded {
-    border-color: $buic-foreground-focus;
-    outline: 0px;
-    box-shadow: $uicore-inputs-focus-boxshadow;
-
-    > .components-popup-button-arrow {
-      border: none;
-      box-shadow: none;
-      outline: 0px;
-
-      > .components-popup-button-arrow-icon {
-        color: var(--iui-color-text-accent);
-      }
-    }
-  }
-}
-
-.components-smallEditor-host {
-  .components-popup-button {
-    min-height: $editor-component-height-small !important;
-  }
-}
-
-.components-popup-button-popup {
-  background-color: var(--iui-color-background);
-}
-
-.components-editor-popup-content {
-  padding: 4px 8px;
-}
-
-.components-popup-bottom-buttons {
-  display: flex;
-  justify-content: flex-end;
-  margin-top: 4px;
-
-  > .components-popup-large-button {
-    width: 70px;
-    font-size: 20px;
-    margin-left: 6px;
-  }
-
-  > .components-popup-cancel-button {
-    &,
-    &:active,
-    &:focus {
-      border: none;
-      background-color: var(--iui-color-background-negative);
-      color: var(--iui-color-white);
-    }
-
-    &:hover {
-      background-color: var(--iui-color-background-negative-hover);
-      color: var(--iui-color-white);
-    }
-  }
-}
+/*---------------------------------------------------------------------------------------------
+* 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/icons/variables";
+@import "~@itwin/core-react/lib/cjs/core-react/inputs/variables";
+@import "~@itwin/core-react/lib/cjs/core-react/style/baseline";
+@import "~@itwin/core-react/lib/cjs/core-react/style/themecolors";
+@import "./variables.scss";
+
+.components-popup-button {
+  min-width: 100%;
+  min-height: 28px;
+  height: 100%;
+  margin: 0;
+  padding: 0;
+  background-color: $buic-background-control;
+  border: 1px solid var(--iui-color-border-foreground);
+  border-radius: var(--iui-border-radius-1);
+  box-shadow: $buic-inputs-boxshadow 0px 1px 1px inset;
+  box-sizing: border-box;
+  cursor: pointer;
+
+  display: flex;
+  flex-shrink: 1;
+  align-items: center;
+
+  font-weight: normal;
+
+  > .components-popup-button-value {
+    flex-grow: 1;
+    max-width: calc(100% - var(--iui-size-l));
+    overflow-x: hidden;
+    padding: 0 3px;
+
+    &.components-popup-button-placeholder {
+      color: var(--iui-color-text-disabled);
+    }
+  }
+
+  > .components-popup-button-arrow {
+    background-color: $buic-background-control;
+    width: var(--iui-size-l);
+    height: var(--iui-size-l);
+
+    > .components-popup-button-arrow-icon {
+      transition: transform 0.2s;
+
+      &:hover {
+        color: var(--iui-color-text-accent);
+      }
+
+      text-align: center;
+      font-size: var(--iui-font-size-0);
+      line-height: var(--iui-size-l);
+    }
+  }
+
+  &:focus,
+  &.components-popup-expanded {
+    border-color: $buic-foreground-focus;
+    outline: 0px;
+    box-shadow: $uicore-inputs-focus-boxshadow;
+
+    > .components-popup-button-arrow {
+      border: none;
+      box-shadow: none;
+      outline: 0px;
+
+      > .components-popup-button-arrow-icon {
+        color: var(--iui-color-text-accent);
+      }
+    }
+  }
+}
+
+.components-smallEditor-host {
+  .components-popup-button {
+    min-height: $editor-component-height-small !important;
+  }
+}
+
+.components-popup-button-popup {
+  background-color: var(--iui-color-background);
+}
+
+.components-editor-popup-content {
+  padding: 4px 8px;
+}
+
+.components-popup-bottom-buttons {
+  display: flex;
+  justify-content: flex-end;
+  margin-top: 4px;
+
+  > .components-popup-large-button {
+    width: 70px;
+    font-size: 20px;
+    margin-left: 6px;
+  }
+
+  > .components-popup-cancel-button {
+    &,
+    &:active,
+    &:focus {
+      border: none;
+      background-color: var(--iui-color-background-negative);
+      color: var(--iui-color-white);
+    }
+
+    &:hover {
+      background-color: var(--iui-color-background-negative-hover);
+      color: var(--iui-color-white);
+    }
+  }
+}