@itwin/core-react 4.0.0-dev.3 → 4.0.0-dev.6

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

@@ -1,70 +1,81 @@
-/*---------------------------------------------------------------------------------------------
-* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
-* See LICENSE.md in the project root for license terms and full copyright notice.
-*--------------------------------------------------------------------------------------------*/
-@import "./variables";
-
-// cspell:ignore unbordered
-
-/// Mixins ---------------------------------------------------------------------
-
-@mixin uicore-buttons-button {
-  display: inline-block;
-
-  padding: $uicore-button-padding $uicore-unbordered-padding;
-  margin: $uicore-inputs-margin 0;
-  border-radius: var(--iui-border-radius-1);
-  line-height: $uicore-button-line-height;
-  outline: none;
-  font-family: var(--iui-font-sans);
-  font-size: var(--iui-font-size-1);
-  text-decoration: none;
-  cursor: pointer;
-  box-sizing: border-box;
-  box-shadow: transparent 0px 1px 1px inset;
-  border: 1px solid transparent;
-  transition: all var(--iui-duration-1) ease-in-out;
-
-  &:active,
-  &:focus {
-    @include uicore-buttons-button-focused;
-  }
-
-  &[disabled],
-  &[disabled]:hover,
-  &[disabled]:active,
-  &[disabled]:focus {
-    @include uicore-buttons-button-disabled;
-  }
-}
-
-@mixin uicore-buttons-button-focused {
-  box-shadow: $uicore-button-focus-boxshadow;
-}
-
-@mixin uicore-buttons-button-unbordered {
-  border-color: transparent;
-  box-shadow: transparent 0px 1px 1px inset;
-}
-
-@mixin uicore-buttons-button-disabled {
-  opacity: $uicore-opacity-disabled;
-  background-color: $uicore-gray;
-  border: 0;
-  color: $uicore-white;
-  cursor: not-allowed;
-}
-
-@mixin uicore-buttons-large-size {
-  padding: $uicore-inputs-padding-large $uicore-unbordered-padding-large;
-  margin: $uicore-inputs-margin-large 0;
-  font-size: var(--iui-font-size-2);
-  font-weight: var(--iui-font-weight-normal);
-}
-
-@mixin uicore-buttons-large-bordered-size {
-  padding: $uicore-button-padding-bordered-large $uicore-bordered-padding-large;
-  margin: $uicore-inputs-margin-large 0;
-  font-size: var(--iui-font-size-2);
-  font-weight: var(--iui-font-weight-normal);
-}
+/*---------------------------------------------------------------------------------------------
+* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+* See LICENSE.md in the project root for license terms and full copyright notice.
+*--------------------------------------------------------------------------------------------*/
+@import "./variables";
+@import "~@itwin/itwinui-css/scss/style/speed";
+@import "~@itwin/itwinui-css/scss/style/typography";
+@import "~@itwin/itwinui-css/scss/style/variables";
+
+// cspell:ignore unbordered
+
+/// Mixins ---------------------------------------------------------------------
+
+@mixin uicore-buttons-button {
+
+  display:                inline-block;
+
+  padding:                $uicore-button-padding $uicore-unbordered-padding;
+  margin:                 $uicore-inputs-margin 0;
+  border-radius:          $iui-border-radius;
+  line-height:            $uicore-button-line-height;
+  outline:                none;
+  font-family:            $iui-font-family;
+  font-size:              $iui-font-size;
+  text-decoration:        none;
+  cursor:                 pointer;
+  box-sizing:             border-box;
+  box-shadow:             transparent 0px 1px 1px inset;
+  border:                 1px solid transparent;
+  transition:             all $iui-speed-fast ease-in-out;
+
+  &:active,
+  &:focus {
+
+    @include uicore-buttons-button-focused;
+  }
+
+  &[disabled],
+  &[disabled]:hover,
+  &[disabled]:active,
+  &[disabled]:focus {
+
+    @include uicore-buttons-button-disabled;
+  }
+}
+
+@mixin uicore-buttons-button-focused {
+
+  box-shadow:           $uicore-button-focus-boxshadow;
+}
+
+@mixin uicore-buttons-button-unbordered {
+
+  border-color:         transparent;
+  box-shadow:           transparent 0px 1px 1px inset;
+}
+
+@mixin uicore-buttons-button-disabled {
+
+  opacity:                $uicore-opacity-disabled;
+  background-color:       $uicore-gray;
+  border:                 0;
+  color:                  $uicore-white;
+  cursor:                 not-allowed;
+}
+
+@mixin uicore-buttons-large-size {
+
+  padding:                $uicore-inputs-padding-large $uicore-unbordered-padding-large;
+  margin:                 $uicore-inputs-margin-large 0;
+  font-size:              $iui-font-size-leading;
+  font-weight:            $iui-font-weight-normal;
+}
+
+@mixin uicore-buttons-large-bordered-size {
+
+  padding:                $uicore-button-padding-bordered-large $uicore-bordered-padding-large;
+  margin:                 $uicore-inputs-margin-large 0;
+  font-size:              $iui-font-size-leading;
+  font-weight:            $iui-font-weight-normal;
+}

package/lib/cjs/core-react/button/classes.scss

@@ -1,14 +1,14 @@
-/*---------------------------------------------------------------------------------------------
-* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
-* See LICENSE.md in the project root for license terms and full copyright notice.
-*--------------------------------------------------------------------------------------------*/
-@import "./index";
-
-.uicore-buttons-blue { @include uicore-buttons-blue; }
-.uicore-buttons-blue-large { @include uicore-buttons-blue-large; }
-.uicore-buttons-disabled { @include uicore-buttons-disabled; }
-.uicore-buttons-disabled-large { @include uicore-buttons-disabled-large; }
-.uicore-buttons-hollow { @include uicore-buttons-hollow; }
-.uicore-buttons-hollow-large { @include uicore-buttons-hollow-large; }
-.uicore-buttons-primary { @include uicore-buttons-primary; }
-.uicore-buttons-primary-large { @include uicore-buttons-primary-large; }
+/*---------------------------------------------------------------------------------------------
+* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+* See LICENSE.md in the project root for license terms and full copyright notice.
+*--------------------------------------------------------------------------------------------*/
+@import "./index";
+
+.uicore-buttons-blue { @include uicore-buttons-blue; }
+.uicore-buttons-blue-large { @include uicore-buttons-blue-large; }
+.uicore-buttons-disabled { @include uicore-buttons-disabled; }
+.uicore-buttons-disabled-large { @include uicore-buttons-disabled-large; }
+.uicore-buttons-hollow { @include uicore-buttons-hollow; }
+.uicore-buttons-hollow-large { @include uicore-buttons-hollow-large; }
+.uicore-buttons-primary { @include uicore-buttons-primary; }
+.uicore-buttons-primary-large { @include uicore-buttons-primary-large; }

package/lib/cjs/core-react/button/disabled-large.scss

@@ -1,12 +1,12 @@
-/*---------------------------------------------------------------------------------------------
-* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
-* See LICENSE.md in the project root for license terms and full copyright notice.
-*--------------------------------------------------------------------------------------------*/
-@import "./button";
-@import "./disabled";
-
-@mixin uicore-buttons-disabled-large {
-
-    @include uicore-buttons-disabled;
-    @include uicore-buttons-large-size;
-}
+/*---------------------------------------------------------------------------------------------
+* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+* See LICENSE.md in the project root for license terms and full copyright notice.
+*--------------------------------------------------------------------------------------------*/
+@import "./button";
+@import "./disabled";
+
+@mixin uicore-buttons-disabled-large {
+
+    @include uicore-buttons-disabled;
+    @include uicore-buttons-large-size;
+}

package/lib/cjs/core-react/button/disabled.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 "../style/index";
-@import "./button";
-
-
-@mixin uicore-buttons-disabled {
-
-    @include uicore-buttons-button;
-
-    &, &:active, &:focus, &:hover {
-
-        @include uicore-buttons-button-disabled;
-    }
-}
+/*---------------------------------------------------------------------------------------------
+* 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";
+@import "./button";
+
+
+@mixin uicore-buttons-disabled {
+
+    @include uicore-buttons-button;
+
+    &, &:active, &:focus, &:hover {
+
+        @include uicore-buttons-button-disabled;
+    }
+}

package/lib/cjs/core-react/button/hollow-large.scss

@@ -1,13 +1,13 @@
-/*---------------------------------------------------------------------------------------------
-* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
-* See LICENSE.md in the project root for license terms and full copyright notice.
-*--------------------------------------------------------------------------------------------*/
-@import "./button";
-@import "./hollow";
-
-@mixin uicore-buttons-hollow-large {
-
-    @include uicore-buttons-hollow;
-    @include uicore-buttons-large-bordered-size;
-
-}
+/*---------------------------------------------------------------------------------------------
+* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+* See LICENSE.md in the project root for license terms and full copyright notice.
+*--------------------------------------------------------------------------------------------*/
+@import "./button";
+@import "./hollow";
+
+@mixin uicore-buttons-hollow-large {
+
+    @include uicore-buttons-hollow;
+    @include uicore-buttons-large-bordered-size;
+
+}

package/lib/cjs/core-react/button/hollow.scss

@@ -1,30 +1,30 @@
-/*---------------------------------------------------------------------------------------------
-* 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";
-@import "../inputs/variables";
-
-@import "./button";
-@import "./disabled";
-
-@mixin uicore-buttons-hollow {
-
-    @include uicore-buttons-button;
-
-    padding:            $uicore-button-padding-bordered $uicore-bordered-padding;
-    border-color:       $buic-foreground-disabled;
-    background-color:   transparent;
-    color:              $buic-text-color;
-
-    &:hover {
-
-      border-color:       $buic-foreground-body;
-      color:              $buic-foreground-activehover;
-    }
-
-    &:active, &:focus {
-
-      border-color:       $buic-foreground-activehover;
-    }
-}
+/*---------------------------------------------------------------------------------------------
+* 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";
+@import "../inputs/variables";
+
+@import "./button";
+@import "./disabled";
+
+@mixin uicore-buttons-hollow {
+
+    @include uicore-buttons-button;
+
+    padding:            $uicore-button-padding-bordered $uicore-bordered-padding;
+    border-color:       $buic-foreground-disabled;
+    background-color:   transparent;
+    color:              $buic-text-color;
+
+    &:hover {
+
+      border-color:       $buic-foreground-body;
+      color:              $buic-foreground-activehover;
+    }
+
+    &:active, &:focus {
+
+      border-color:       $buic-foreground-activehover;
+    }
+}

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

@@ -1,14 +1,14 @@
-/*---------------------------------------------------------------------------------------------
-* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
-* See LICENSE.md in the project root for license terms and full copyright notice.
-*--------------------------------------------------------------------------------------------*/
-@import "./button";
-
-@import "./blue";
-@import "./blue-large";
-@import "./disabled";
-@import "./disabled-large";
-@import "./hollow";
-@import "./hollow-large";
-@import "./primary";
-@import "./primary-large";
+/*---------------------------------------------------------------------------------------------
+* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+* See LICENSE.md in the project root for license terms and full copyright notice.
+*--------------------------------------------------------------------------------------------*/
+@import "./button";
+
+@import "./blue";
+@import "./blue-large";
+@import "./disabled";
+@import "./disabled-large";
+@import "./hollow";
+@import "./hollow-large";
+@import "./primary";
+@import "./primary-large";

package/lib/cjs/core-react/button/primary-large.scss

@@ -1,12 +1,12 @@
-/*---------------------------------------------------------------------------------------------
-* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
-* See LICENSE.md in the project root for license terms and full copyright notice.
-*--------------------------------------------------------------------------------------------*/
-@import "./button";
-@import "./primary";
-
-@mixin uicore-buttons-primary-large {
-
-    @include uicore-buttons-primary;
-    @include uicore-buttons-large-size;
-}
+/*---------------------------------------------------------------------------------------------
+* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+* See LICENSE.md in the project root for license terms and full copyright notice.
+*--------------------------------------------------------------------------------------------*/
+@import "./button";
+@import "./primary";
+
+@mixin uicore-buttons-primary-large {
+
+    @include uicore-buttons-primary;
+    @include uicore-buttons-large-size;
+}

package/lib/cjs/core-react/button/primary.scss

@@ -1,25 +1,25 @@
-/*---------------------------------------------------------------------------------------------
-* 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";
-
-@import "./button";
-@import "./disabled";
-
-
-@mixin uicore-buttons-primary {
-
-  @include uicore-buttons-button;
-
-  background:         $buic-accessory-success;
-  color:              $buic-accessory-hollow;
-
-  &:hover {
-    background-color:   $uicore-green-5;
-  }
-
-  &:active {
-    background-color:   $uicore-green-4;
-  }
-}
+/*---------------------------------------------------------------------------------------------
+* 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";
+
+@import "./button";
+@import "./disabled";
+
+
+@mixin uicore-buttons-primary {
+
+  @include uicore-buttons-button;
+
+  background:         $buic-accessory-success;
+  color:              $buic-accessory-hollow;
+
+  &:hover {
+    background-color:   $uicore-green-5;
+  }
+
+  &:active {
+    background-color:   $uicore-green-4;
+  }
+}

package/lib/cjs/core-react/button/variables.scss

@@ -1,22 +1,19 @@
-/*---------------------------------------------------------------------------------------------
-* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
-* See LICENSE.md in the project root for license terms and full copyright notice.
-*--------------------------------------------------------------------------------------------*/
-@import "../style/baseline";
-@import "../style/themecolors";
-@import "../inputs/variables";
-
-// cspell:ignore unbordered
-
-$uicore-button-height: 28px;
-$uicore-button-line-height: calc(var(--iui-size-s) * 1.5);
-$uicore-button-padding: calc(
-  (#{$uicore-button-height} - #{$uicore-button-line-height}) * 0.5
-);
-$uicore-button-padding-bordered: calc(#{$uicore-button-padding} - 1px);
-$uicore-button-padding-bordered-large: calc(
-  #{$uicore-inputs-padding-large} - 1px
-);
-$uicore-unbordered-padding: var(--iui-size-s);
-$uicore-bordered-padding: calc(#{$uicore-unbordered-padding} - 1px);
-$uicore-button-focus-boxshadow: $buic-focus-boxshadow 0px 0px 0px 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/baseline";
+@import "../style/themecolors";
+@import "../inputs/variables";
+
+// cspell:ignore unbordered
+
+$uicore-button-height: 28px;
+$uicore-button-line-height: $uicore-baseline * 1.5;
+$uicore-button-padding: ($uicore-button-height - $uicore-button-line-height) *
+  0.5;
+$uicore-button-padding-bordered: $uicore-button-padding - 1px;
+$uicore-button-padding-bordered-large: $uicore-inputs-padding-large - 1px;
+$uicore-unbordered-padding: $uicore-baseline;
+$uicore-bordered-padding: $uicore-unbordered-padding - 1px;
+$uicore-button-focus-boxshadow: $buic-focus-boxshadow 0px 0px 0px 2px;

package/lib/cjs/core-react/checkbox/Checkbox.d.ts

@@ -0,0 +1,57 @@
+/** @packageDocumentation
+ * @module Checkbox
+ */
+import * as React from "react";
+import { InputStatus } from "../inputs/InputStatus";
+import { CommonProps } from "../utils/Props";
+import { Omit } from "../utils/typeUtils";
+/** Properties for [[Checkbox]] React component
+ * @public
+ * @deprecated in 3.0. Use CheckboxProps in itwinui-react instead
+ */
+export interface CheckboxProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "type" | "onClick" | "onBlur">, CommonProps {
+    /** Text that will be shown next to the checkbox. */
+    label?: string;
+    /** Indicates checkbox is in an Indeterminate or Partial state, regardless of the `checked` state */
+    indeterminate?: boolean;
+    /** Input status like: "Success", "Warning" or "Error" */
+    status?: InputStatus;
+    /** Custom CSS class name for the checkbox input element */
+    inputClassName?: string;
+    /** Custom CSS Style for the checkbox input element */
+    inputStyle?: React.CSSProperties;
+    /** Custom CSS class name for the label element */
+    labelClassName?: string;
+    /** Custom CSS Style for the label element */
+    labelStyle?: React.CSSProperties;
+    /**
+     * Event called when checkbox is clicked on. This is a good event to
+     * use for preventing the action from bubbling to component's parents.
+     */
+    onClick?: (e: React.MouseEvent) => void;
+    /** Event called when checkbox loses focus. */
+    onBlur?: (e: React.FocusEvent) => void;
+    /** Indicates whether the checkbox should set focus */
+    setFocus?: boolean;
+    /** Provides ability to return reference to HTMLInputElement */
+    inputRef?: React.Ref<HTMLInputElement>;
+}
+/** A React component that renders a simple checkbox with label.
+ * It is a wrapper for the `<input type="checkbox">` HTML element.
+ * @public
+ * @deprecated in 3.0. Use Checkbox in itwinui-react instead
+ */
+export declare class Checkbox extends React.PureComponent<CheckboxProps> {
+    private _checkboxInput;
+    private _refs;
+    /** @internal */
+    constructor(props: CheckboxProps);
+    private _onCheckboxClick;
+    private _onCheckboxBlur;
+    private _setIndeterminate;
+    componentDidMount(): void;
+    /** @internal */
+    componentDidUpdate(_prevProps: CheckboxProps): void;
+    render(): JSX.Element;
+}
+//# sourceMappingURL=Checkbox.d.ts.map

package/lib/cjs/core-react/checkbox/Checkbox.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Checkbox.d.ts","sourceRoot":"","sources":["../../../../src/core-react/checkbox/Checkbox.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAGH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAC;AACpD,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAC7C,OAAO,EAAE,IAAI,EAAE,MAAM,oBAAoB,CAAC;AAG1C;;;GAGG;AACH,MAAM,WAAW,aAAc,SAAQ,IAAI,CAAC,KAAK,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EAAE,MAAM,GAAG,SAAS,GAAG,QAAQ,CAAC,EAAE,WAAW;IAClI,oDAAoD;IACpD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,oGAAoG;IACpG,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,yDAAyD;IACzD,MAAM,CAAC,EAAE,WAAW,CAAC;IACrB,2DAA2D;IAC3D,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,sDAAsD;IACtD,UAAU,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IACjC,kDAAkD;IAClD,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,6CAA6C;IAC7C,UAAU,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IACjC;;;OAGG;IACH,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,CAAC;IACxC,8CAA8C;IAC9C,MAAM,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,CAAC;IACvC,sDAAsD;IACtD,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,+DAA+D;IAC/D,QAAQ,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,gBAAgB,CAAC,CAAC;CACxC;AAED;;;;GAIG;AACH,qBAAa,QAAS,SAAQ,KAAK,CAAC,aAAa,CAAC,aAAa,CAAC;IAC9D,OAAO,CAAC,cAAc,CAAuC;IAC7D,OAAO,CAAC,KAAK,CAAkC;IAE/C,gBAAgB;gBACJ,KAAK,EAAE,aAAa;IAOhC,OAAO,CAAC,gBAAgB,CAEtB;IAEF,OAAO,CAAC,eAAe,CAErB;IAEF,OAAO,CAAC,iBAAiB;IAMT,iBAAiB;IAQjC,gBAAgB;IACA,kBAAkB,CAAC,UAAU,EAAE,aAAa;IAK5C,MAAM;CAuBvB"}

package/lib/cjs/core-react/checkbox/Checkbox.js

@@ -0,0 +1,65 @@
+"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.Checkbox = void 0;
+const classnames_1 = require("classnames");
+const React = require("react");
+const useRefs_1 = require("../utils/hooks/useRefs");
+/** A React component that renders a simple checkbox with label.
+ * It is a wrapper for the `<input type="checkbox">` HTML element.
+ * @public
+ * @deprecated in 3.0. Use Checkbox in itwinui-react instead
+ */
+class Checkbox extends React.PureComponent {
+    /** @internal */
+    constructor(props) {
+        super(props);
+        this._checkboxInput = React.createRef();
+        this._refs = (0, useRefs_1.mergeRefs)(this._checkboxInput);
+        this._onCheckboxClick = (e) => {
+            e.stopPropagation();
+        };
+        this._onCheckboxBlur = (e) => {
+            e.stopPropagation();
+        };
+        if (props.inputRef)
+            this._refs = (0, useRefs_1.mergeRefs)(this._checkboxInput, props.inputRef);
+    }
+    _setIndeterminate(indeterminate) {
+        // istanbul ignore else
+        if (this._checkboxInput.current)
+            this._checkboxInput.current.indeterminate = indeterminate;
+    }
+    componentDidMount() {
+        if (this.props.indeterminate !== undefined)
+            this._setIndeterminate(this.props.indeterminate);
+        if (this.props.setFocus && this._checkboxInput.current)
+            this._checkboxInput.current.focus();
+    }
+    /** @internal */
+    componentDidUpdate(_prevProps) {
+        if (this.props.indeterminate !== undefined)
+            this._setIndeterminate(this.props.indeterminate);
+    }
+    render() {
+        const { status, disabled, label, indeterminate, className, inputClassName, inputStyle, labelClassName, labelStyle, // eslint-disable-line @typescript-eslint/no-unused-vars
+        onClick, onBlur, setFocus, inputRef, ...inputProps } = this.props; // eslint-disable-line @typescript-eslint/no-unused-vars
+        const checkBoxClass = (0, classnames_1.default)("core-checkbox", disabled && "core-disabled", !label && "core-checkbox-no-label", status, className);
+        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, onClick: onClick, onBlur: onBlur },
+            label &&
+                React.createElement("span", { className: "core-checkbox-label" }, label),
+            React.createElement("input", { type: "checkbox", ref: this._refs, ...inputProps, disabled: disabled, className: inputClassName, style: inputStyle, onClick: this._onCheckboxClick, onBlur: this._onCheckboxBlur }),
+            React.createElement("span", { className: "core-checkbox-checkmark" })));
+    }
+}
+exports.Checkbox = Checkbox;
+//# sourceMappingURL=Checkbox.js.map

package/lib/cjs/core-react/checkbox/Checkbox.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Checkbox.js","sourceRoot":"","sources":["../../../../src/core-react/checkbox/Checkbox.tsx"],"names":[],"mappings":";AAAA;;;+FAG+F;AAC/F;;GAEG;;;AAEH,2CAAoC;AACpC,+BAA+B;AAI/B,oDAAmD;AAkCnD;;;;GAIG;AACH,MAAa,QAAS,SAAQ,KAAK,CAAC,aAA4B;IAI9D,gBAAgB;IAChB,YAAY,KAAoB;QAC9B,KAAK,CAAC,KAAK,CAAC,CAAC;QALP,mBAAc,GAAG,KAAK,CAAC,SAAS,EAAoB,CAAC;QACrD,UAAK,GAAG,IAAA,mBAAS,EAAC,IAAI,CAAC,cAAc,CAAC,CAAC;QAUvC,qBAAgB,GAAG,CAAC,CAAmB,EAAE,EAAE;YACjD,CAAC,CAAC,eAAe,EAAE,CAAC;QACtB,CAAC,CAAC;QAEM,oBAAe,GAAG,CAAC,CAAmB,EAAE,EAAE;YAChD,CAAC,CAAC,eAAe,EAAE,CAAC;QACtB,CAAC,CAAC;QAVA,IAAI,KAAK,CAAC,QAAQ;YAChB,IAAI,CAAC,KAAK,GAAG,IAAA,mBAAS,EAAC,IAAI,CAAC,cAAc,EAAE,KAAK,CAAC,QAAQ,CAAC,CAAC;IAChE,CAAC;IAUO,iBAAiB,CAAC,aAAsB;QAC9C,uBAAuB;QACvB,IAAI,IAAI,CAAC,cAAc,CAAC,OAAO;YAC7B,IAAI,CAAC,cAAc,CAAC,OAAO,CAAC,aAAa,GAAG,aAAa,CAAC;IAC9D,CAAC;IAEe,iBAAiB;QAC/B,IAAI,IAAI,CAAC,KAAK,CAAC,aAAa,KAAK,SAAS;YACxC,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,KAAK,CAAC,aAAa,CAAC,CAAC;QAEnD,IAAI,IAAI,CAAC,KAAK,CAAC,QAAQ,IAAI,IAAI,CAAC,cAAc,CAAC,OAAO;YACpD,IAAI,CAAC,cAAc,CAAC,OAAO,CAAC,KAAK,EAAE,CAAC;IACxC,CAAC;IAED,gBAAgB;IACA,kBAAkB,CAAC,UAAyB;QAC1D,IAAI,IAAI,CAAC,KAAK,CAAC,aAAa,KAAK,SAAS;YACxC,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,KAAK,CAAC,aAAa,CAAC,CAAC;IACrD,CAAC;IAEe,MAAM;QACpB,MAAM,EAAE,MAAM,EAAE,QAAQ,EAAE,KAAK,EAAE,aAAa,EAAE,SAAS,EAAE,cAAc,EAAE,UAAU,EAAE,cAAc,EAAE,UAAU,EAAE,wDAAwD;QACzK,OAAO,EAAE,MAAM,EAAE,QAAQ,EAAE,QAAQ,EAAE,GAAG,UAAU,EAAE,GAAG,IAAI,CAAC,KAAK,CAAC,CAAC,wDAAwD;QAC7H,MAAM,aAAa,GAAG,IAAA,oBAAU,EAAC,eAAe,EAC9C,QAAQ,IAAI,eAAe,EAC3B,CAAC,KAAK,IAAI,wBAAwB,EAClC,MAAM,EACN,SAAS,CAAC,CAAC;QAEb,OAAO;QACL,oEAAoE;QACpE,oEAAoE;QACpE,+BAAO,SAAS,EAAE,aAAa,EAAE,OAAO,EAAE,OAAO,EAAE,MAAM,EAAE,MAAM;YAC9D,KAAK;gBACJ,8BAAM,SAAS,EAAC,qBAAqB,IAAE,KAAK,CAAQ;YAEtD,+BAAO,IAAI,EAAC,UAAU,EAAC,GAAG,EAAE,IAAI,CAAC,KAAK,KAAM,UAAU,EACpD,QAAQ,EAAE,QAAQ,EAAE,SAAS,EAAE,cAAc,EAAE,KAAK,EAAE,UAAU,EAChE,OAAO,EAAE,IAAI,CAAC,gBAAgB,EAAE,MAAM,EAAE,IAAI,CAAC,eAAe,GAAI;YAClE,8BAAM,SAAS,EAAC,yBAAyB,GAAQ,CAC1C,CACV,CAAC;IACJ,CAAC;CACF;AA/DD,4BA+DC","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 classnames from \"classnames\";\r\nimport * as React from \"react\";\r\nimport { InputStatus } from \"../inputs/InputStatus\";\r\nimport { CommonProps } from \"../utils/Props\";\r\nimport { Omit } from \"../utils/typeUtils\";\r\nimport { mergeRefs } from \"../utils/hooks/useRefs\";\r\n\r\n/** Properties for [[Checkbox]] React component\r\n * @public\r\n * @deprecated in 3.0. Use CheckboxProps in itwinui-react instead\r\n */\r\nexport interface CheckboxProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, \"type\" | \"onClick\" | \"onBlur\">, CommonProps {\r\n  /** Text that will be shown next to the checkbox. */\r\n  label?: string;\r\n  /** Indicates checkbox is in an Indeterminate or Partial state, regardless of the `checked` state */\r\n  indeterminate?: boolean;\r\n  /** Input status like: \"Success\", \"Warning\" or \"Error\" */\r\n  status?: InputStatus;\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  /** Custom CSS class name for the label element */\r\n  labelClassName?: string;\r\n  /** Custom CSS Style for the label element */\r\n  labelStyle?: React.CSSProperties;\r\n  /**\r\n   * Event called when checkbox is clicked on. This is a good event to\r\n   * use for preventing the action from bubbling to component's parents.\r\n   */\r\n  onClick?: (e: React.MouseEvent) => void;\r\n  /** Event called when checkbox loses focus. */\r\n  onBlur?: (e: React.FocusEvent) => void;\r\n  /** Indicates whether the checkbox should set focus */\r\n  setFocus?: boolean;\r\n  /** Provides ability to return reference to HTMLInputElement */\r\n  inputRef?: React.Ref<HTMLInputElement>;\r\n}\r\n\r\n/** A React component that renders a simple checkbox with label.\r\n * It is a wrapper for the `<input type=\"checkbox\">` HTML element.\r\n * @public\r\n * @deprecated in 3.0. Use Checkbox in itwinui-react instead\r\n */\r\nexport class Checkbox extends React.PureComponent<CheckboxProps> {  // eslint-disable-line deprecation/deprecation\r\n  private _checkboxInput = React.createRef<HTMLInputElement>();\r\n  private _refs = mergeRefs(this._checkboxInput);\r\n\r\n  /** @internal */\r\n  constructor(props: CheckboxProps) { // eslint-disable-line deprecation/deprecation\r\n    super(props);\r\n\r\n    if (props.inputRef)\r\n      this._refs = mergeRefs(this._checkboxInput, props.inputRef);\r\n  }\r\n\r\n  private _onCheckboxClick = (e: React.MouseEvent) => {\r\n    e.stopPropagation();\r\n  };\r\n\r\n  private _onCheckboxBlur = (e: React.FocusEvent) => {\r\n    e.stopPropagation();\r\n  };\r\n\r\n  private _setIndeterminate(indeterminate: boolean) {\r\n    // istanbul ignore else\r\n    if (this._checkboxInput.current)\r\n      this._checkboxInput.current.indeterminate = indeterminate;\r\n  }\r\n\r\n  public override componentDidMount() {\r\n    if (this.props.indeterminate !== undefined)\r\n      this._setIndeterminate(this.props.indeterminate);\r\n\r\n    if (this.props.setFocus && this._checkboxInput.current)\r\n      this._checkboxInput.current.focus();\r\n  }\r\n\r\n  /** @internal */\r\n  public override componentDidUpdate(_prevProps: CheckboxProps) {  // eslint-disable-line deprecation/deprecation\r\n    if (this.props.indeterminate !== undefined)\r\n      this._setIndeterminate(this.props.indeterminate);\r\n  }\r\n\r\n  public override render() {\r\n    const { status, disabled, label, indeterminate, className, inputClassName, inputStyle, labelClassName, labelStyle, // eslint-disable-line @typescript-eslint/no-unused-vars\r\n      onClick, onBlur, setFocus, inputRef, ...inputProps } = this.props; // eslint-disable-line @typescript-eslint/no-unused-vars\r\n    const checkBoxClass = classnames(\"core-checkbox\",\r\n      disabled && \"core-disabled\",\r\n      !label && \"core-checkbox-no-label\",\r\n      status,\r\n      className);\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} onClick={onClick} onBlur={onBlur}>\r\n        {label &&\r\n          <span className=\"core-checkbox-label\">{label}</span>\r\n        }\r\n        <input type=\"checkbox\" ref={this._refs} {...inputProps}\r\n          disabled={disabled} className={inputClassName} style={inputStyle}\r\n          onClick={this._onCheckboxClick} onBlur={this._onCheckboxBlur} />\r\n        <span className=\"core-checkbox-checkmark\"></span>\r\n      </label >\r\n    );\r\n  }\r\n}\r\n"]}