@itwin/core-react 4.0.0-dev.11 → 4.0.0-dev.13

package/lib/cjs/core-react/imagecheckbox/ImageCheckBox.d.ts

@@ -1,43 +1,43 @@
-/** @packageDocumentation
- * @module Checkbox
- */
-import "./ImageCheckBox.scss";
-import * as React from "react";
-import { CommonProps } from "../utils/Props";
-/** Properties for the [[ImageCheckBox]] component
- * @public
- */
-export interface ImageCheckBoxProps extends CommonProps {
-    /** Image for the "checked" state */
-    imageOn: string | React.ReactNode;
-    /** Image for the "unchecked" (default) state */
-    imageOff: string | React.ReactNode;
-    /** Determine if the item is checked or not */
-    checked?: boolean;
-    /** Determine if the item is disabled or not */
-    disabled?: boolean;
-    /** Function called when item is clicked. */
-    onClick?: (checked: boolean) => any;
-    /** Custom CSS class name for the checkbox input element */
-    inputClassName?: string;
-    /** Custom CSS Style for the checkbox input element */
-    inputStyle?: React.CSSProperties;
-    /** Tooltip to be displayed when mouse is hovered over the checkbox */
-    tooltip?: string;
-    /** If true, draw a border around the image checkbox */
-    border?: boolean;
-    /** Provides ability to return reference to HTMLInputElement */
-    inputRef?: React.Ref<HTMLInputElement>;
-}
-/**
- * ImageCheckBox React component shows a checked or unchecked image
- * @public
- */
-export declare class ImageCheckBox extends React.PureComponent<ImageCheckBoxProps> {
-    private _onChange;
-    private _onInputClick;
-    private _onLabelClick;
-    /** @internal */
-    render(): JSX.Element;
-}
+/** @packageDocumentation
+ * @module Checkbox
+ */
+import "./ImageCheckBox.scss";
+import * as React from "react";
+import { CommonProps } from "../utils/Props";
+/** Properties for the [[ImageCheckBox]] component
+ * @public
+ */
+export interface ImageCheckBoxProps extends CommonProps {
+    /** Image for the "checked" state */
+    imageOn: string | React.ReactNode;
+    /** Image for the "unchecked" (default) state */
+    imageOff: string | React.ReactNode;
+    /** Determine if the item is checked or not */
+    checked?: boolean;
+    /** Determine if the item is disabled or not */
+    disabled?: boolean;
+    /** Function called when item is clicked. */
+    onClick?: (checked: boolean) => any;
+    /** Custom CSS class name for the checkbox input element */
+    inputClassName?: string;
+    /** Custom CSS Style for the checkbox input element */
+    inputStyle?: React.CSSProperties;
+    /** Tooltip to be displayed when mouse is hovered over the checkbox */
+    tooltip?: string;
+    /** If true, draw a border around the image checkbox */
+    border?: boolean;
+    /** Provides ability to return reference to HTMLInputElement */
+    inputRef?: React.Ref<HTMLInputElement>;
+}
+/**
+ * ImageCheckBox React component shows a checked or unchecked image
+ * @public
+ */
+export declare class ImageCheckBox extends React.PureComponent<ImageCheckBoxProps> {
+    private _onChange;
+    private _onInputClick;
+    private _onLabelClick;
+    /** @internal */
+    render(): JSX.Element;
+}
 //# sourceMappingURL=ImageCheckBox.d.ts.map

package/lib/cjs/core-react/imagecheckbox/ImageCheckBox.js

@@ -1,57 +1,57 @@
-"use strict";
-/*---------------------------------------------------------------------------------------------
-* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
-* See LICENSE.md in the project root for license terms and full copyright notice.
-*--------------------------------------------------------------------------------------------*/
-/** @packageDocumentation
- * @module Checkbox
- */
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.ImageCheckBox = void 0;
-require("./ImageCheckBox.scss");
-const classnames_1 = require("classnames");
-const React = require("react");
-const IconComponent_1 = require("../icons/IconComponent");
-/**
- * ImageCheckBox React component shows a checked or unchecked image
- * @public
- */
-class ImageCheckBox extends React.PureComponent {
-    constructor() {
-        super(...arguments);
-        this._onChange = (e) => {
-            // istanbul ignore next
-            if (e && e.stopPropagation)
-                e.stopPropagation();
-            // istanbul ignore else
-            if (this.props.onClick) {
-                this.props.onClick(e.target.checked);
-            }
-        };
-        this._onInputClick = (e) => {
-            // istanbul ignore next
-            if (e && e.stopPropagation)
-                e.stopPropagation();
-        };
-        this._onLabelClick = (e) => {
-            // istanbul ignore next
-            if (e && e.stopPropagation)
-                e.stopPropagation();
-        };
-    }
-    /** @internal */
-    render() {
-        const checkBoxClass = (0, classnames_1.default)("core-image-checkbox", this.props.className);
-        const imageClass = (0, classnames_1.default)("image", this.props.border && "image-checkbox-border");
-        const iconSpec = this.props.checked ? this.props.imageOn : this.props.imageOff;
-        return (
-        /* eslint-disable jsx-a11y/no-noninteractive-element-interactions */
-        /* eslint-disable-next-line jsx-a11y/click-events-have-key-events */
-        React.createElement("label", { className: checkBoxClass, style: this.props.style, onClick: this._onLabelClick, title: this.props.tooltip },
-            React.createElement("input", { type: "checkbox", className: this.props.inputClassName, style: this.props.inputStyle, checked: this.props.checked, disabled: this.props.disabled, onChange: this._onChange, onClick: this._onInputClick, ref: this.props.inputRef }),
-            React.createElement("span", { className: imageClass },
-                React.createElement(IconComponent_1.Icon, { iconSpec: iconSpec }))));
-    }
-}
-exports.ImageCheckBox = ImageCheckBox;
+"use strict";
+/*---------------------------------------------------------------------------------------------
+* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+* See LICENSE.md in the project root for license terms and full copyright notice.
+*--------------------------------------------------------------------------------------------*/
+/** @packageDocumentation
+ * @module Checkbox
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ImageCheckBox = void 0;
+require("./ImageCheckBox.scss");
+const classnames_1 = require("classnames");
+const React = require("react");
+const IconComponent_1 = require("../icons/IconComponent");
+/**
+ * ImageCheckBox React component shows a checked or unchecked image
+ * @public
+ */
+class ImageCheckBox extends React.PureComponent {
+    constructor() {
+        super(...arguments);
+        this._onChange = (e) => {
+            // istanbul ignore next
+            if (e && e.stopPropagation)
+                e.stopPropagation();
+            // istanbul ignore else
+            if (this.props.onClick) {
+                this.props.onClick(e.target.checked);
+            }
+        };
+        this._onInputClick = (e) => {
+            // istanbul ignore next
+            if (e && e.stopPropagation)
+                e.stopPropagation();
+        };
+        this._onLabelClick = (e) => {
+            // istanbul ignore next
+            if (e && e.stopPropagation)
+                e.stopPropagation();
+        };
+    }
+    /** @internal */
+    render() {
+        const checkBoxClass = (0, classnames_1.default)("core-image-checkbox", this.props.className);
+        const imageClass = (0, classnames_1.default)("image", this.props.border && "image-checkbox-border");
+        const iconSpec = this.props.checked ? this.props.imageOn : this.props.imageOff;
+        return (
+        /* eslint-disable jsx-a11y/no-noninteractive-element-interactions */
+        /* eslint-disable-next-line jsx-a11y/click-events-have-key-events */
+        React.createElement("label", { className: checkBoxClass, style: this.props.style, onClick: this._onLabelClick, title: this.props.tooltip },
+            React.createElement("input", { type: "checkbox", className: this.props.inputClassName, style: this.props.inputStyle, checked: this.props.checked, disabled: this.props.disabled, onChange: this._onChange, onClick: this._onInputClick, ref: this.props.inputRef }),
+            React.createElement("span", { className: imageClass },
+                React.createElement(IconComponent_1.Icon, { iconSpec: iconSpec }))));
+    }
+}
+exports.ImageCheckBox = ImageCheckBox;
 //# sourceMappingURL=ImageCheckBox.js.map

package/lib/cjs/core-react/imagecheckbox/ImageCheckBox.js.map

@@ -1 +1 @@
-{"version":3,"file":"ImageCheckBox.js","sourceRoot":"","sources":["../../../../src/core-react/imagecheckbox/ImageCheckBox.tsx"],"names":[],"mappings":";AAAA;;;+FAG+F;AAC/F;;GAEG;;;AAEH,gCAA8B;AAC9B,2CAAoC;AACpC,+BAA+B;AAC/B,0DAA8C;AA6B9C;;;GAGG;AACH,MAAa,aAAc,SAAQ,KAAK,CAAC,aAAiC;IAA1E;;QAEU,cAAS,GAAG,CAAC,CAAsC,EAAE,EAAE;YAC7D,uBAAuB;YACvB,IAAI,CAAC,IAAI,CAAC,CAAC,eAAe;gBACxB,CAAC,CAAC,eAAe,EAAE,CAAC;YAEtB,uBAAuB;YACvB,IAAI,IAAI,CAAC,KAAK,CAAC,OAAO,EAAE;gBACtB,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC;aACtC;QACH,CAAC,CAAC;QAEM,kBAAa,GAAG,CAAC,CAAqC,EAAE,EAAE;YAChE,uBAAuB;YACvB,IAAI,CAAC,IAAI,CAAC,CAAC,eAAe;gBACxB,CAAC,CAAC,eAAe,EAAE,CAAC;QACxB,CAAC,CAAC;QAEM,kBAAa,GAAG,CAAC,CAAqC,EAAE,EAAE;YAChE,uBAAuB;YACvB,IAAI,CAAC,IAAI,CAAC,CAAC,eAAe;gBACxB,CAAC,CAAC,eAAe,EAAE,CAAC;QACxB,CAAC,CAAC;IAmBJ,CAAC;IAjBC,gBAAgB;IACA,MAAM;QACpB,MAAM,aAAa,GAAG,IAAA,oBAAU,EAAC,qBAAqB,EAAE,IAAI,CAAC,KAAK,CAAC,SAAS,CAAC,CAAC;QAC9E,MAAM,UAAU,GAAG,IAAA,oBAAU,EAAC,OAAO,EAAE,IAAI,CAAC,KAAK,CAAC,MAAM,IAAI,uBAAuB,CAAC,CAAC;QACrF,MAAM,QAAQ,GAAG,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC;QAE/E,OAAO;QACL,oEAAoE;QACpE,oEAAoE;QACpE,+BAAO,SAAS,EAAE,aAAa,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,KAAK,EAAE,OAAO,EAAE,IAAI,CAAC,aAAa,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,OAAO;YAC9G,+BAAO,IAAI,EAAC,UAAU,EAAC,SAAS,EAAE,IAAI,CAAC,KAAK,CAAC,cAAc,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,UAAU,EACvF,OAAO,EAAE,IAAI,CAAC,KAAK,CAAC,OAAO,EAAE,QAAQ,EAAE,IAAI,CAAC,KAAK,CAAC,QAAQ,EAAE,QAAQ,EAAE,IAAI,CAAC,SAAS,EAAE,OAAO,EAAE,IAAI,CAAC,aAAa,EACjH,GAAG,EAAE,IAAI,CAAC,KAAK,CAAC,QAAQ,GAAI;YAC9B,8BAAM,SAAS,EAAE,UAAU;gBAAE,oBAAC,oBAAI,IAAC,QAAQ,EAAE,QAAQ,GAAI,CAAO,CAC1D,CACT,CAAC;IACJ,CAAC;CACF;AA1CD,sCA0CC","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 Checkbox\r\n */\r\n\r\nimport \"./ImageCheckBox.scss\";\r\nimport classnames from \"classnames\";\r\nimport * as React from \"react\";\r\nimport { Icon } from \"../icons/IconComponent\";\r\nimport { CommonProps } from \"../utils/Props\";\r\n\r\n/** Properties for the [[ImageCheckBox]] component\r\n * @public\r\n */\r\nexport interface ImageCheckBoxProps extends CommonProps {\r\n  /** Image for the \"checked\" state */\r\n  imageOn: string | React.ReactNode;\r\n  /** Image for the \"unchecked\" (default) state */\r\n  imageOff: string | React.ReactNode;\r\n  /** Determine if the item is checked or not */\r\n  checked?: boolean;\r\n  /** Determine if the item is disabled or not */\r\n  disabled?: boolean;\r\n  /** Function called when item is clicked. */\r\n  onClick?: (checked: boolean) => any;\r\n  /** Custom CSS class name for the checkbox input element */\r\n  inputClassName?: string;\r\n  /** Custom CSS Style for the checkbox input element */\r\n  inputStyle?: React.CSSProperties;\r\n  /** Tooltip to be displayed when mouse is hovered over the checkbox */\r\n  tooltip?: string;\r\n  /** If true, draw a border around the image checkbox */\r\n  border?: boolean;\r\n  /** Provides ability to return reference to HTMLInputElement */\r\n  inputRef?: React.Ref<HTMLInputElement>;\r\n}\r\n\r\n/**\r\n * ImageCheckBox React component shows a checked or unchecked image\r\n * @public\r\n */\r\nexport class ImageCheckBox extends React.PureComponent<ImageCheckBoxProps> {\r\n\r\n  private _onChange = (e: React.ChangeEvent<HTMLInputElement>) => {\r\n    // istanbul ignore next\r\n    if (e && e.stopPropagation)\r\n      e.stopPropagation();\r\n\r\n    // istanbul ignore else\r\n    if (this.props.onClick) {\r\n      this.props.onClick(e.target.checked);\r\n    }\r\n  };\r\n\r\n  private _onInputClick = (e: React.MouseEvent<HTMLInputElement>) => {\r\n    // istanbul ignore next\r\n    if (e && e.stopPropagation)\r\n      e.stopPropagation();\r\n  };\r\n\r\n  private _onLabelClick = (e: React.MouseEvent<HTMLLabelElement>) => {\r\n    // istanbul ignore next\r\n    if (e && e.stopPropagation)\r\n      e.stopPropagation();\r\n  };\r\n\r\n  /** @internal */\r\n  public override render() {\r\n    const checkBoxClass = classnames(\"core-image-checkbox\", this.props.className);\r\n    const imageClass = classnames(\"image\", this.props.border && \"image-checkbox-border\");\r\n    const iconSpec = this.props.checked ? this.props.imageOn : this.props.imageOff;\r\n\r\n    return (\r\n      /* eslint-disable jsx-a11y/no-noninteractive-element-interactions */\r\n      /* eslint-disable-next-line jsx-a11y/click-events-have-key-events */\r\n      <label className={checkBoxClass} style={this.props.style} onClick={this._onLabelClick} title={this.props.tooltip}>\r\n        <input type=\"checkbox\" className={this.props.inputClassName} style={this.props.inputStyle}\r\n          checked={this.props.checked} disabled={this.props.disabled} onChange={this._onChange} onClick={this._onInputClick}\r\n          ref={this.props.inputRef} />\r\n        <span className={imageClass}><Icon iconSpec={iconSpec} /></span>\r\n      </label>\r\n    );\r\n  }\r\n}\r\n"]}
+{"version":3,"file":"ImageCheckBox.js","sourceRoot":"","sources":["../../../../src/core-react/imagecheckbox/ImageCheckBox.tsx"],"names":[],"mappings":";AAAA;;;+FAG+F;AAC/F;;GAEG;;;AAEH,gCAA8B;AAC9B,2CAAoC;AACpC,+BAA+B;AAC/B,0DAA8C;AA6B9C;;;GAGG;AACH,MAAa,aAAc,SAAQ,KAAK,CAAC,aAAiC;IAA1E;;QAEU,cAAS,GAAG,CAAC,CAAsC,EAAE,EAAE;YAC7D,uBAAuB;YACvB,IAAI,CAAC,IAAI,CAAC,CAAC,eAAe;gBACxB,CAAC,CAAC,eAAe,EAAE,CAAC;YAEtB,uBAAuB;YACvB,IAAI,IAAI,CAAC,KAAK,CAAC,OAAO,EAAE;gBACtB,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC;aACtC;QACH,CAAC,CAAC;QAEM,kBAAa,GAAG,CAAC,CAAqC,EAAE,EAAE;YAChE,uBAAuB;YACvB,IAAI,CAAC,IAAI,CAAC,CAAC,eAAe;gBACxB,CAAC,CAAC,eAAe,EAAE,CAAC;QACxB,CAAC,CAAC;QAEM,kBAAa,GAAG,CAAC,CAAqC,EAAE,EAAE;YAChE,uBAAuB;YACvB,IAAI,CAAC,IAAI,CAAC,CAAC,eAAe;gBACxB,CAAC,CAAC,eAAe,EAAE,CAAC;QACxB,CAAC,CAAC;IAmBJ,CAAC;IAjBC,gBAAgB;IACA,MAAM;QACpB,MAAM,aAAa,GAAG,IAAA,oBAAU,EAAC,qBAAqB,EAAE,IAAI,CAAC,KAAK,CAAC,SAAS,CAAC,CAAC;QAC9E,MAAM,UAAU,GAAG,IAAA,oBAAU,EAAC,OAAO,EAAE,IAAI,CAAC,KAAK,CAAC,MAAM,IAAI,uBAAuB,CAAC,CAAC;QACrF,MAAM,QAAQ,GAAG,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC;QAE/E,OAAO;QACL,oEAAoE;QACpE,oEAAoE;QACpE,+BAAO,SAAS,EAAE,aAAa,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,KAAK,EAAE,OAAO,EAAE,IAAI,CAAC,aAAa,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,OAAO;YAC9G,+BAAO,IAAI,EAAC,UAAU,EAAC,SAAS,EAAE,IAAI,CAAC,KAAK,CAAC,cAAc,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,UAAU,EACvF,OAAO,EAAE,IAAI,CAAC,KAAK,CAAC,OAAO,EAAE,QAAQ,EAAE,IAAI,CAAC,KAAK,CAAC,QAAQ,EAAE,QAAQ,EAAE,IAAI,CAAC,SAAS,EAAE,OAAO,EAAE,IAAI,CAAC,aAAa,EACjH,GAAG,EAAE,IAAI,CAAC,KAAK,CAAC,QAAQ,GAAI;YAC9B,8BAAM,SAAS,EAAE,UAAU;gBAAE,oBAAC,oBAAI,IAAC,QAAQ,EAAE,QAAQ,GAAI,CAAO,CAC1D,CACT,CAAC;IACJ,CAAC;CACF;AA1CD,sCA0CC","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 Checkbox\n */\n\nimport \"./ImageCheckBox.scss\";\nimport classnames from \"classnames\";\nimport * as React from \"react\";\nimport { Icon } from \"../icons/IconComponent\";\nimport { CommonProps } from \"../utils/Props\";\n\n/** Properties for the [[ImageCheckBox]] component\n * @public\n */\nexport interface ImageCheckBoxProps extends CommonProps {\n  /** Image for the \"checked\" state */\n  imageOn: string | React.ReactNode;\n  /** Image for the \"unchecked\" (default) state */\n  imageOff: string | React.ReactNode;\n  /** Determine if the item is checked or not */\n  checked?: boolean;\n  /** Determine if the item is disabled or not */\n  disabled?: boolean;\n  /** Function called when item is clicked. */\n  onClick?: (checked: boolean) => any;\n  /** Custom CSS class name for the checkbox input element */\n  inputClassName?: string;\n  /** Custom CSS Style for the checkbox input element */\n  inputStyle?: React.CSSProperties;\n  /** Tooltip to be displayed when mouse is hovered over the checkbox */\n  tooltip?: string;\n  /** If true, draw a border around the image checkbox */\n  border?: boolean;\n  /** Provides ability to return reference to HTMLInputElement */\n  inputRef?: React.Ref<HTMLInputElement>;\n}\n\n/**\n * ImageCheckBox React component shows a checked or unchecked image\n * @public\n */\nexport class ImageCheckBox extends React.PureComponent<ImageCheckBoxProps> {\n\n  private _onChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n    // istanbul ignore next\n    if (e && e.stopPropagation)\n      e.stopPropagation();\n\n    // istanbul ignore else\n    if (this.props.onClick) {\n      this.props.onClick(e.target.checked);\n    }\n  };\n\n  private _onInputClick = (e: React.MouseEvent<HTMLInputElement>) => {\n    // istanbul ignore next\n    if (e && e.stopPropagation)\n      e.stopPropagation();\n  };\n\n  private _onLabelClick = (e: React.MouseEvent<HTMLLabelElement>) => {\n    // istanbul ignore next\n    if (e && e.stopPropagation)\n      e.stopPropagation();\n  };\n\n  /** @internal */\n  public override render() {\n    const checkBoxClass = classnames(\"core-image-checkbox\", this.props.className);\n    const imageClass = classnames(\"image\", this.props.border && \"image-checkbox-border\");\n    const iconSpec = this.props.checked ? this.props.imageOn : this.props.imageOff;\n\n    return (\n      /* eslint-disable jsx-a11y/no-noninteractive-element-interactions */\n      /* eslint-disable-next-line jsx-a11y/click-events-have-key-events */\n      <label className={checkBoxClass} style={this.props.style} onClick={this._onLabelClick} title={this.props.tooltip}>\n        <input type=\"checkbox\" className={this.props.inputClassName} style={this.props.inputStyle}\n          checked={this.props.checked} disabled={this.props.disabled} onChange={this._onChange} onClick={this._onInputClick}\n          ref={this.props.inputRef} />\n        <span className={imageClass}><Icon iconSpec={iconSpec} /></span>\n      </label>\n    );\n  }\n}\n"]}

package/lib/cjs/core-react/imagecheckbox/ImageCheckBox.scss

@@ -1,54 +1,54 @@
-/*---------------------------------------------------------------------------------------------
-* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
-* See LICENSE.md in the project root for license terms and full copyright notice.
-*--------------------------------------------------------------------------------------------*/
-@import "../style/index.scss";
-@import "../icons/variables.scss";
-
-.core-image-checkbox {
-  display: inline-block;
-  font-size: 16px;
-  position: relative;
-  height: 1em;
-  width: 1em;
-  cursor: pointer;
-
-  input[type="checkbox"]:not(:checked),
-  input[type="checkbox"]:checked {
-    position: absolute;
-    z-index: -1;
-    opacity: 0;
-  }
-
-  input[type="checkbox"]:checked + .image {
-    color: var(--iui-color-text-accent);
-  }
-
-  input[type="checkbox"]:not(:checked) + .image {
-    color: var(--iui-color-text);
-  }
-
-  input[type="checkbox"] + .image {
-    opacity: 0.65;
-
-    &:hover {
-      opacity: 1;
-    }
-  }
-
-  input[type="checkbox"]:disabled:not(:checked) + .image,
-  input[type="checkbox"]:disabled:checked + .image {
-    opacity: 0.25;
-  }
-
-  /* accessibility */
-  [type="checkbox"]:focus + .image:before {
-    outline: 1px dotted currentColor;
-  }
-}
-.image-checkbox-border {
-  border: 1px solid $buic-foreground-disabled;
-  background-color: $buic-background-control;
-  border-radius: var(--iui-border-radius-1);
-  padding: 1px 3px 0 2px;
-}
+/*---------------------------------------------------------------------------------------------
+* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+* See LICENSE.md in the project root for license terms and full copyright notice.
+*--------------------------------------------------------------------------------------------*/
+@import "../style/index.scss";
+@import "../icons/variables.scss";
+
+.core-image-checkbox {
+  display: inline-block;
+  font-size: 16px;
+  position: relative;
+  height: 1em;
+  width: 1em;
+  cursor: pointer;
+
+  input[type="checkbox"]:not(:checked),
+  input[type="checkbox"]:checked {
+    position: absolute;
+    z-index: -1;
+    opacity: 0;
+  }
+
+  input[type="checkbox"]:checked + .image {
+    color: var(--iui-color-text-accent);
+  }
+
+  input[type="checkbox"]:not(:checked) + .image {
+    color: var(--iui-color-text);
+  }
+
+  input[type="checkbox"] + .image {
+    opacity: 0.65;
+
+    &:hover {
+      opacity: 1;
+    }
+  }
+
+  input[type="checkbox"]:disabled:not(:checked) + .image,
+  input[type="checkbox"]:disabled:checked + .image {
+    opacity: 0.25;
+  }
+
+  /* accessibility */
+  [type="checkbox"]:focus + .image:before {
+    outline: 1px dotted currentColor;
+  }
+}
+.image-checkbox-border {
+  border: 1px solid $buic-foreground-disabled;
+  background-color: $buic-background-control;
+  border-radius: var(--iui-border-radius-1);
+  padding: 1px 3px 0 2px;
+}

package/lib/cjs/core-react/index.scss

@@ -1,23 +1,21 @@
-/*---------------------------------------------------------------------------------------------
-* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
-* See LICENSE.md in the project root for license terms and full copyright notice.
-*--------------------------------------------------------------------------------------------*/
-@use "sass:math";
-
-@import "./style/index";
-
-@import "./_scrollbar";
-@import "./_z-index";
-@import "./_geometry";
-@import "./_math";
-@import "./_typography";
-
-@import "./base/index";
-@import "./button/index";
-@import "./checkbox/index";
-@import "./expandable/index";
-@import "./icons/index";
-@import "./inputs/index";
-@import "./loading/index";
-@import "./tabs/index";
-@import "./text/index";
+/*---------------------------------------------------------------------------------------------
+* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+* See LICENSE.md in the project root for license terms and full copyright notice.
+*--------------------------------------------------------------------------------------------*/
+@use "sass:math";
+
+@import "./style/index";
+
+@import "./_scrollbar";
+@import "./_z-index";
+@import "./_geometry";
+@import "./_math";
+@import "./_typography";
+
+@import "./base/index";
+@import "./expandable/index";
+@import "./icons/index";
+@import "./inputs/index";
+@import "./loading/index";
+@import "./tabs/index";
+@import "./text/index";

package/lib/cjs/core-react/inputs/Input.d.ts

@@ -1,21 +1,21 @@
-/** @packageDocumentation
- * @module Inputs
- */
-import * as React from "react";
-import { CommonProps } from "../utils/Props";
-/** Properties for the [[Input]] component
- * @internal
- */
-export interface InputProps extends React.InputHTMLAttributes<HTMLInputElement>, CommonProps {
-    /** Indicates whether to set focus to the input element */
-    setFocus?: boolean;
-    /** Native keydown event handler */
-    nativeKeyHandler?: (e: KeyboardEvent) => void;
-    /** Provides ability to return reference to HTMLInputElement */
-    ref?: React.Ref<HTMLInputElement>;
-}
-/** Basic text input, is a wrapper for the `<input type="text">` HTML element.
- * @internal
- */
-export declare const Input: (props: InputProps) => JSX.Element | null;
+/** @packageDocumentation
+ * @module Inputs
+ */
+import * as React from "react";
+import { CommonProps } from "../utils/Props";
+/** Properties for the [[Input]] component
+ * @internal
+ */
+export interface InputProps extends React.InputHTMLAttributes<HTMLInputElement>, CommonProps {
+    /** Indicates whether to set focus to the input element */
+    setFocus?: boolean;
+    /** Native keydown event handler */
+    nativeKeyHandler?: (e: KeyboardEvent) => void;
+    /** Provides ability to return reference to HTMLInputElement */
+    ref?: React.Ref<HTMLInputElement>;
+}
+/** Basic text input, is a wrapper for the `<input type="text">` HTML element.
+ * @internal
+ */
+export declare const Input: (props: InputProps) => JSX.Element | null;
 //# sourceMappingURL=Input.d.ts.map

package/lib/cjs/core-react/inputs/Input.js

@@ -1,46 +1,46 @@
-"use strict";
-/*---------------------------------------------------------------------------------------------
-* 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
- */
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Input = void 0;
-const classnames_1 = require("classnames");
-const React = require("react");
-const itwinui_react_1 = require("@itwin/itwinui-react");
-const useRefs_1 = require("../utils/hooks/useRefs");
-// Defined using following pattern (const Input at bottom) to ensure useful API documentation is extracted
-const ForwardRefInput = React.forwardRef(// eslint-disable-line deprecation/deprecation
-function ForwardRefInput(props, ref) {
-    const { className, style, setFocus, nativeKeyHandler, size, ...otherProps } = props; // eslint-disable-line @typescript-eslint/no-unused-vars
-    const inputElementRef = React.useRef(null);
-    const refs = (0, useRefs_1.useRefs)(inputElementRef, ref); // combine ref needed for target with the forwardRef needed by the Parent when parent is a Type Editor.
-    React.useEffect(() => {
-        const currentElement = inputElementRef.current;
-        const currentHandler = nativeKeyHandler;
-        if (currentElement && currentHandler) {
-            currentElement.addEventListener("keydown", currentHandler);
-        }
-        return () => {
-            if (currentHandler && currentElement) {
-                currentElement.removeEventListener("keydown", currentHandler);
-            }
-        };
-    }, [nativeKeyHandler]);
-    React.useEffect(() => {
-        if (inputElementRef.current && setFocus)
-            inputElementRef.current.focus();
-    }, [setFocus]);
-    const handleFocus = React.useCallback((event) => {
-        event.currentTarget.select();
-    }, []);
-    return (React.createElement(itwinui_react_1.Input, { ref: refs, type: "text", ...otherProps, onFocus: handleFocus, className: (0, classnames_1.default)("uicore-inputs-input", className), style: style }));
-});
-/** Basic text input, is a wrapper for the `<input type="text">` HTML element.
- * @internal
- */
-exports.Input = ForwardRefInput; // eslint-disable-line deprecation/deprecation
+"use strict";
+/*---------------------------------------------------------------------------------------------
+* 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
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Input = void 0;
+const classnames_1 = require("classnames");
+const React = require("react");
+const itwinui_react_1 = require("@itwin/itwinui-react");
+const useRefs_1 = require("../utils/hooks/useRefs");
+// Defined using following pattern (const Input at bottom) to ensure useful API documentation is extracted
+const ForwardRefInput = React.forwardRef(// eslint-disable-line deprecation/deprecation
+function ForwardRefInput(props, ref) {
+    const { className, style, setFocus, nativeKeyHandler, size, ...otherProps } = props; // eslint-disable-line @typescript-eslint/no-unused-vars
+    const inputElementRef = React.useRef(null);
+    const refs = (0, useRefs_1.useRefs)(inputElementRef, ref); // combine ref needed for target with the forwardRef needed by the Parent when parent is a Type Editor.
+    React.useEffect(() => {
+        const currentElement = inputElementRef.current;
+        const currentHandler = nativeKeyHandler;
+        if (currentElement && currentHandler) {
+            currentElement.addEventListener("keydown", currentHandler);
+        }
+        return () => {
+            if (currentHandler && currentElement) {
+                currentElement.removeEventListener("keydown", currentHandler);
+            }
+        };
+    }, [nativeKeyHandler]);
+    React.useEffect(() => {
+        if (inputElementRef.current && setFocus)
+            inputElementRef.current.focus();
+    }, [setFocus]);
+    const handleFocus = React.useCallback((event) => {
+        event.currentTarget.select();
+    }, []);
+    return (React.createElement(itwinui_react_1.Input, { ref: refs, type: "text", ...otherProps, onFocus: handleFocus, className: (0, classnames_1.default)("uicore-inputs-input", className), style: style }));
+});
+/** Basic text input, is a wrapper for the `<input type="text">` HTML element.
+ * @internal
+ */
+exports.Input = ForwardRefInput; // eslint-disable-line deprecation/deprecation
 //# sourceMappingURL=Input.js.map

package/lib/cjs/core-react/inputs/Input.js.map

@@ -1 +1 @@
-{"version":3,"file":"Input.js","sourceRoot":"","sources":["../../../../src/core-react/inputs/Input.tsx"],"names":[],"mappings":";AAAA;;;+FAG+F;AAC/F;;GAEG;;;AAEH,2CAAoC;AACpC,+BAA+B;AAC/B,wDAA8D;AAC9D,oDAAiD;AAejD,0GAA0G;AAC1G,MAAM,eAAe,GAAG,KAAK,CAAC,UAAU,CAAkC,8CAA8C;AACtH,SAAS,eAAe,CAAC,KAAK,EAAE,GAAG;IACjC,MAAM,EAAE,SAAS,EAAE,KAAK,EAAE,QAAQ,EAAE,gBAAgB,EAAE,IAAI,EAAE,GAAG,UAAU,EAAE,GAAG,KAAK,CAAC,CAAC,wDAAwD;IAC7I,MAAM,eAAe,GAAG,KAAK,CAAC,MAAM,CAAmB,IAAI,CAAC,CAAC;IAC7D,MAAM,IAAI,GAAG,IAAA,iBAAO,EAAC,eAAe,EAAE,GAAG,CAAC,CAAC,CAAE,uGAAuG;IAEpJ,KAAK,CAAC,SAAS,CAAC,GAAG,EAAE;QACnB,MAAM,cAAc,GAAG,eAAe,CAAC,OAAO,CAAC;QAC/C,MAAM,cAAc,GAAG,gBAAgB,CAAC;QAExC,IAAI,cAAc,IAAI,cAAc,EAAE;YACpC,cAAc,CAAC,gBAAgB,CAAC,SAAS,EAAE,cAAc,CAAC,CAAC;SAC5D;QACD,OAAO,GAAG,EAAE;YACV,IAAI,cAAc,IAAI,cAAc,EAAE;gBACpC,cAAc,CAAC,mBAAmB,CAAC,SAAS,EAAE,cAAc,CAAC,CAAC;aAC/D;QACH,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,gBAAgB,CAAC,CAAC,CAAC;IAEvB,KAAK,CAAC,SAAS,CAAC,GAAG,EAAE;QACnB,IAAI,eAAe,CAAC,OAAO,IAAI,QAAQ;YACrC,eAAe,CAAC,OAAO,CAAC,KAAK,EAAE,CAAC;IACpC,CAAC,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC;IAEf,MAAM,WAAW,GAAG,KAAK,CAAC,WAAW,CAAC,CAAC,KAAyC,EAAE,EAAE;QAClF,KAAK,CAAC,aAAa,CAAC,MAAM,EAAE,CAAC;IAC/B,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,OAAO,CACL,oBAAC,qBAAa,IAAC,GAAG,EAAE,IAAI,EAAE,IAAI,EAAC,MAAM,KAAK,UAAU,EAAE,OAAO,EAAE,WAAW,EACxE,SAAS,EAAE,IAAA,oBAAU,EAAC,qBAAqB,EAAE,SAAS,CAAC,EAAE,KAAK,EAAE,KAAK,GAAI,CAC5E,CAAC;AACJ,CAAC,CACF,CAAC;AAEF;;GAEG;AACU,QAAA,KAAK,GAA8C,eAAe,CAAC,CAAE,8CAA8C","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 classnames from \"classnames\";\r\nimport * as React from \"react\";\r\nimport { Input as ITwinUI_Input } from \"@itwin/itwinui-react\";\r\nimport { useRefs } from \"../utils/hooks/useRefs\";\r\nimport { CommonProps } from \"../utils/Props\";\r\n\r\n/** Properties for the [[Input]] component\r\n * @internal\r\n */\r\nexport interface InputProps extends React.InputHTMLAttributes<HTMLInputElement>, CommonProps {\r\n  /** Indicates whether to set focus to the input element */\r\n  setFocus?: boolean;\r\n  /** Native keydown event handler */\r\n  nativeKeyHandler?: (e: KeyboardEvent) => void;\r\n  /** Provides ability to return reference to HTMLInputElement */\r\n  ref?: React.Ref<HTMLInputElement>;\r\n}\r\n\r\n// Defined using following pattern (const Input at bottom) to ensure useful API documentation is extracted\r\nconst ForwardRefInput = React.forwardRef<HTMLInputElement, InputProps>(   // eslint-disable-line deprecation/deprecation\r\n  function ForwardRefInput(props, ref) {\r\n    const { className, style, setFocus, nativeKeyHandler, size, ...otherProps } = props; // eslint-disable-line @typescript-eslint/no-unused-vars\r\n    const inputElementRef = React.useRef<HTMLInputElement>(null);\r\n    const refs = useRefs(inputElementRef, ref);  // combine ref needed for target with the forwardRef needed by the Parent when parent is a Type Editor.\r\n\r\n    React.useEffect(() => {\r\n      const currentElement = inputElementRef.current;\r\n      const currentHandler = nativeKeyHandler;\r\n\r\n      if (currentElement && currentHandler) {\r\n        currentElement.addEventListener(\"keydown\", currentHandler);\r\n      }\r\n      return () => {\r\n        if (currentHandler && currentElement) {\r\n          currentElement.removeEventListener(\"keydown\", currentHandler);\r\n        }\r\n      };\r\n    }, [nativeKeyHandler]);\r\n\r\n    React.useEffect(() => {\r\n      if (inputElementRef.current && setFocus)\r\n        inputElementRef.current.focus();\r\n    }, [setFocus]);\r\n\r\n    const handleFocus = React.useCallback((event: React.FocusEvent<HTMLInputElement>) => {\r\n      event.currentTarget.select();\r\n    }, []);\r\n\r\n    return (\r\n      <ITwinUI_Input ref={refs} type=\"text\" {...otherProps} onFocus={handleFocus}\r\n        className={classnames(\"uicore-inputs-input\", className)} style={style} />\r\n    );\r\n  }\r\n);\r\n\r\n/** Basic text input, is a wrapper for the `<input type=\"text\">` HTML element.\r\n * @internal\r\n */\r\nexport const Input: (props: InputProps) => JSX.Element | null = ForwardRefInput;  // eslint-disable-line deprecation/deprecation\r\n"]}
+{"version":3,"file":"Input.js","sourceRoot":"","sources":["../../../../src/core-react/inputs/Input.tsx"],"names":[],"mappings":";AAAA;;;+FAG+F;AAC/F;;GAEG;;;AAEH,2CAAoC;AACpC,+BAA+B;AAC/B,wDAA8D;AAC9D,oDAAiD;AAejD,0GAA0G;AAC1G,MAAM,eAAe,GAAG,KAAK,CAAC,UAAU,CAAkC,8CAA8C;AACtH,SAAS,eAAe,CAAC,KAAK,EAAE,GAAG;IACjC,MAAM,EAAE,SAAS,EAAE,KAAK,EAAE,QAAQ,EAAE,gBAAgB,EAAE,IAAI,EAAE,GAAG,UAAU,EAAE,GAAG,KAAK,CAAC,CAAC,wDAAwD;IAC7I,MAAM,eAAe,GAAG,KAAK,CAAC,MAAM,CAAmB,IAAI,CAAC,CAAC;IAC7D,MAAM,IAAI,GAAG,IAAA,iBAAO,EAAC,eAAe,EAAE,GAAG,CAAC,CAAC,CAAE,uGAAuG;IAEpJ,KAAK,CAAC,SAAS,CAAC,GAAG,EAAE;QACnB,MAAM,cAAc,GAAG,eAAe,CAAC,OAAO,CAAC;QAC/C,MAAM,cAAc,GAAG,gBAAgB,CAAC;QAExC,IAAI,cAAc,IAAI,cAAc,EAAE;YACpC,cAAc,CAAC,gBAAgB,CAAC,SAAS,EAAE,cAAc,CAAC,CAAC;SAC5D;QACD,OAAO,GAAG,EAAE;YACV,IAAI,cAAc,IAAI,cAAc,EAAE;gBACpC,cAAc,CAAC,mBAAmB,CAAC,SAAS,EAAE,cAAc,CAAC,CAAC;aAC/D;QACH,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,gBAAgB,CAAC,CAAC,CAAC;IAEvB,KAAK,CAAC,SAAS,CAAC,GAAG,EAAE;QACnB,IAAI,eAAe,CAAC,OAAO,IAAI,QAAQ;YACrC,eAAe,CAAC,OAAO,CAAC,KAAK,EAAE,CAAC;IACpC,CAAC,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC;IAEf,MAAM,WAAW,GAAG,KAAK,CAAC,WAAW,CAAC,CAAC,KAAyC,EAAE,EAAE;QAClF,KAAK,CAAC,aAAa,CAAC,MAAM,EAAE,CAAC;IAC/B,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,OAAO,CACL,oBAAC,qBAAa,IAAC,GAAG,EAAE,IAAI,EAAE,IAAI,EAAC,MAAM,KAAK,UAAU,EAAE,OAAO,EAAE,WAAW,EACxE,SAAS,EAAE,IAAA,oBAAU,EAAC,qBAAqB,EAAE,SAAS,CAAC,EAAE,KAAK,EAAE,KAAK,GAAI,CAC5E,CAAC;AACJ,CAAC,CACF,CAAC;AAEF;;GAEG;AACU,QAAA,KAAK,GAA8C,eAAe,CAAC,CAAE,8CAA8C","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 classnames from \"classnames\";\nimport * as React from \"react\";\nimport { Input as ITwinUI_Input } from \"@itwin/itwinui-react\";\nimport { useRefs } from \"../utils/hooks/useRefs\";\nimport { CommonProps } from \"../utils/Props\";\n\n/** Properties for the [[Input]] component\n * @internal\n */\nexport interface InputProps extends React.InputHTMLAttributes<HTMLInputElement>, CommonProps {\n  /** Indicates whether to set focus to the input element */\n  setFocus?: boolean;\n  /** Native keydown event handler */\n  nativeKeyHandler?: (e: KeyboardEvent) => void;\n  /** Provides ability to return reference to HTMLInputElement */\n  ref?: React.Ref<HTMLInputElement>;\n}\n\n// Defined using following pattern (const Input at bottom) to ensure useful API documentation is extracted\nconst ForwardRefInput = React.forwardRef<HTMLInputElement, InputProps>(   // eslint-disable-line deprecation/deprecation\n  function ForwardRefInput(props, ref) {\n    const { className, style, setFocus, nativeKeyHandler, size, ...otherProps } = props; // eslint-disable-line @typescript-eslint/no-unused-vars\n    const inputElementRef = React.useRef<HTMLInputElement>(null);\n    const refs = useRefs(inputElementRef, ref);  // combine ref needed for target with the forwardRef needed by the Parent when parent is a Type Editor.\n\n    React.useEffect(() => {\n      const currentElement = inputElementRef.current;\n      const currentHandler = nativeKeyHandler;\n\n      if (currentElement && currentHandler) {\n        currentElement.addEventListener(\"keydown\", currentHandler);\n      }\n      return () => {\n        if (currentHandler && currentElement) {\n          currentElement.removeEventListener(\"keydown\", currentHandler);\n        }\n      };\n    }, [nativeKeyHandler]);\n\n    React.useEffect(() => {\n      if (inputElementRef.current && setFocus)\n        inputElementRef.current.focus();\n    }, [setFocus]);\n\n    const handleFocus = React.useCallback((event: React.FocusEvent<HTMLInputElement>) => {\n      event.currentTarget.select();\n    }, []);\n\n    return (\n      <ITwinUI_Input ref={refs} type=\"text\" {...otherProps} onFocus={handleFocus}\n        className={classnames(\"uicore-inputs-input\", className)} style={style} />\n    );\n  }\n);\n\n/** Basic text input, is a wrapper for the `<input type=\"text\">` HTML element.\n * @internal\n */\nexport const Input: (props: InputProps) => JSX.Element | null = ForwardRefInput;  // eslint-disable-line deprecation/deprecation\n"]}

package/lib/cjs/core-react/inputs/InputLabel.d.ts

@@ -1,21 +1,21 @@
-/** @packageDocumentation
- * @module Inputs
- */
-import * as React from "react";
-import { CommonProps } from "../utils/Props";
-import { LabeledComponentProps, MessagedComponentProps } from "./LabeledComponentProps";
-/** Properties for [[InputLabel]] components
- * @public
- */
-export interface InputLabelProps extends LabeledComponentProps, MessagedComponentProps, CommonProps {
-    disabled?: boolean;
-    /** Labeled content */
-    children?: React.ReactNode;
-}
-/** Text input wrapper that provides additional styling and labeling
- * @public
- */
-export declare class InputLabel extends React.PureComponent<InputLabelProps> {
-    render(): JSX.Element;
-}
+/** @packageDocumentation
+ * @module Inputs
+ */
+import * as React from "react";
+import { CommonProps } from "../utils/Props";
+import { LabeledComponentProps, MessagedComponentProps } from "./LabeledComponentProps";
+/** Properties for [[InputLabel]] components
+ * @public
+ */
+export interface InputLabelProps extends LabeledComponentProps, MessagedComponentProps, CommonProps {
+    disabled?: boolean;
+    /** Labeled content */
+    children?: React.ReactNode;
+}
+/** Text input wrapper that provides additional styling and labeling
+ * @public
+ */
+export declare class InputLabel extends React.PureComponent<InputLabelProps> {
+    render(): JSX.Element;
+}
 //# sourceMappingURL=InputLabel.d.ts.map