@itwin/imodel-components-react 4.0.0-dev.8 → 4.0.0

package/lib/cjs/imodel-components-react/color/Swatch.js

@@ -1,61 +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 Color
- */
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.ColorSwatch = void 0;
-require("./Swatch.scss");
-const classnames_1 = __importDefault(require("classnames"));
-const React = __importStar(require("react"));
-const getCSSColorFromDef_1 = require("./getCSSColorFromDef");
-/** ColorSwatch Functional component displays a color swatch in a button
- * @beta
- */
-function ColorSwatch(props) {
-    const rgbaString = (0, getCSSColorFromDef_1.getCSSColorFromDef)(props.colorDef);
-    const colorStyle = {
-        backgroundColor: rgbaString,
-        ...props.style,
-    };
-    const handleClick = (e) => {
-        // istanbul ignore else
-        if (props && props.onColorPick)
-            props.onColorPick(props.colorDef, e);
-    };
-    const classes = (0, classnames_1.default)("components-color-swatch", props.round && "round", props.className);
-    const { 
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    onColorPick, colorDef, round, // do not pass on color swatch specific props
-    // eslint-disable-next-line comma-dangle
-    ...otherProps // pass-through props
-     } = props;
-    return React.createElement("button", { ...otherProps, style: colorStyle, className: classes, onClick: handleClick });
-}
-exports.ColorSwatch = ColorSwatch;
+"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 Color
+ */
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ColorSwatch = void 0;
+require("./Swatch.scss");
+const classnames_1 = __importDefault(require("classnames"));
+const React = __importStar(require("react"));
+const getCSSColorFromDef_1 = require("./getCSSColorFromDef");
+/** ColorSwatch Functional component displays a color swatch in a button
+ * @beta
+ */
+function ColorSwatch(props) {
+    const rgbaString = (0, getCSSColorFromDef_1.getCSSColorFromDef)(props.colorDef);
+    const colorStyle = {
+        backgroundColor: rgbaString,
+        ...props.style,
+    };
+    const handleClick = (e) => {
+        // istanbul ignore else
+        if (props && props.onColorPick)
+            props.onColorPick(props.colorDef, e);
+    };
+    const classes = (0, classnames_1.default)("components-color-swatch", props.round && "round", props.className);
+    const { 
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    onColorPick, colorDef, round, // do not pass on color swatch specific props
+    // eslint-disable-next-line comma-dangle
+    ...otherProps // pass-through props
+     } = props;
+    return React.createElement("button", { ...otherProps, style: colorStyle, className: classes, onClick: handleClick });
+}
+exports.ColorSwatch = ColorSwatch;
 //# sourceMappingURL=Swatch.js.map

package/lib/cjs/imodel-components-react/color/Swatch.js.map

@@ -1 +1 @@
-{"version":3,"file":"Swatch.js","sourceRoot":"","sources":["../../../../src/imodel-components-react/color/Swatch.tsx"],"names":[],"mappings":";AAAA;;;+FAG+F;AAC/F;;GAEG;;;;;;;;;;;;;;;;;;;;;;;;;AAEH,yBAAuB;AACvB,4DAAoC;AACpC,6CAA+B;AAG/B,6DAA0D;AAc1D;;GAEG;AACH,SAAgB,WAAW,CAAC,KAAuB;IACjD,MAAM,UAAU,GAAG,IAAA,uCAAkB,EAAC,KAAK,CAAC,QAAQ,CAAC,CAAC;IACtD,MAAM,UAAU,GAAwB;QACtC,eAAe,EAAE,UAAU;QAC3B,GAAG,KAAK,CAAC,KAAK;KACf,CAAC;IAEF,MAAM,WAAW,GAAG,CAAC,CAAmB,EAAE,EAAE;QAC1C,uBAAuB;QACvB,IAAI,KAAK,IAAI,KAAK,CAAC,WAAW;YAC5B,KAAK,CAAC,WAAW,CAAC,KAAK,CAAC,QAAQ,EAAE,CAAC,CAAC,CAAC;IACzC,CAAC,CAAC;IAEF,MAAM,OAAO,GAAG,IAAA,oBAAU,EACxB,yBAAyB,EACzB,KAAK,CAAC,KAAK,IAAI,OAAO,EACtB,KAAK,CAAC,SAAS,CAChB,CAAC;IAEF,MAAM;IACJ,6DAA6D;IAC7D,WAAW,EAAE,QAAQ,EAAE,KAAK,EAAE,6CAA6C;IAC3E,wCAAwC;IACxC,GAAG,UAAU,CAAC,qBAAqB;MACpC,GAAG,KAAK,CAAC;IAEV,OAAO,mCAAY,UAAU,EAAE,KAAK,EAAE,UAAU,EAAE,SAAS,EAAE,OAAO,EAAE,OAAO,EAAE,WAAW,GAAI,CAAC;AACjG,CAAC;AA3BD,kCA2BC","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 Color\r\n */\r\n\r\nimport \"./Swatch.scss\";\r\nimport classnames from \"classnames\";\r\nimport * as React from \"react\";\r\nimport { ColorDef } from \"@itwin/core-common\";\r\nimport { CommonProps } from \"@itwin/core-react\";\r\nimport { getCSSColorFromDef } from \"./getCSSColorFromDef\";\r\n\r\n/** Properties for the [[ColorSwatch]] React component\r\n * @beta\r\n */\r\nexport interface ColorSwatchProps extends React.ButtonHTMLAttributes<HTMLButtonElement>, CommonProps {\r\n  /** color specification */\r\n  colorDef: ColorDef;\r\n  /** function to run when user selects color swatch */\r\n  onColorPick?: ((color: ColorDef, e: React.MouseEvent) => void) | undefined;\r\n  /** Show swatches as squares unless round is set to true */\r\n  round?: boolean;\r\n}\r\n\r\n/** ColorSwatch Functional component displays a color swatch in a button\r\n * @beta\r\n */\r\nexport function ColorSwatch(props: ColorSwatchProps) {\r\n  const rgbaString = getCSSColorFromDef(props.colorDef);\r\n  const colorStyle: React.CSSProperties = {\r\n    backgroundColor: rgbaString,\r\n    ...props.style,\r\n  };\r\n\r\n  const handleClick = (e: React.MouseEvent) => {\r\n    // istanbul ignore else\r\n    if (props && props.onColorPick)\r\n      props.onColorPick(props.colorDef, e);\r\n  };\r\n\r\n  const classes = classnames(\r\n    \"components-color-swatch\",\r\n    props.round && \"round\",\r\n    props.className,\r\n  );\r\n\r\n  const {\r\n    // eslint-disable-next-line @typescript-eslint/no-unused-vars\r\n    onColorPick, colorDef, round, // do not pass on color swatch specific props\r\n    // eslint-disable-next-line comma-dangle\r\n    ...otherProps // pass-through props\r\n  } = props;\r\n\r\n  return <button {...otherProps} style={colorStyle} className={classes} onClick={handleClick} />;\r\n}\r\n"]}
+{"version":3,"file":"Swatch.js","sourceRoot":"","sources":["../../../../src/imodel-components-react/color/Swatch.tsx"],"names":[],"mappings":";AAAA;;;+FAG+F;AAC/F;;GAEG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAEH,yBAAuB;AACvB,4DAAoC;AACpC,6CAA+B;AAG/B,6DAA0D;AAc1D;;GAEG;AACH,SAAgB,WAAW,CAAC,KAAuB;IACjD,MAAM,UAAU,GAAG,IAAA,uCAAkB,EAAC,KAAK,CAAC,QAAQ,CAAC,CAAC;IACtD,MAAM,UAAU,GAAwB;QACtC,eAAe,EAAE,UAAU;QAC3B,GAAG,KAAK,CAAC,KAAK;KACf,CAAC;IAEF,MAAM,WAAW,GAAG,CAAC,CAAmB,EAAE,EAAE;QAC1C,uBAAuB;QACvB,IAAI,KAAK,IAAI,KAAK,CAAC,WAAW;YAC5B,KAAK,CAAC,WAAW,CAAC,KAAK,CAAC,QAAQ,EAAE,CAAC,CAAC,CAAC;IACzC,CAAC,CAAC;IAEF,MAAM,OAAO,GAAG,IAAA,oBAAU,EACxB,yBAAyB,EACzB,KAAK,CAAC,KAAK,IAAI,OAAO,EACtB,KAAK,CAAC,SAAS,CAChB,CAAC;IAEF,MAAM;IACJ,6DAA6D;IAC7D,WAAW,EAAE,QAAQ,EAAE,KAAK,EAAE,6CAA6C;IAC3E,wCAAwC;IACxC,GAAG,UAAU,CAAC,qBAAqB;MACpC,GAAG,KAAK,CAAC;IAEV,OAAO,mCAAY,UAAU,EAAE,KAAK,EAAE,UAAU,EAAE,SAAS,EAAE,OAAO,EAAE,OAAO,EAAE,WAAW,GAAI,CAAC;AACjG,CAAC;AA3BD,kCA2BC","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 Color\r\n */\r\n\r\nimport \"./Swatch.scss\";\r\nimport classnames from \"classnames\";\r\nimport * as React from \"react\";\r\nimport { ColorDef } from \"@itwin/core-common\";\r\nimport { CommonProps } from \"@itwin/core-react\";\r\nimport { getCSSColorFromDef } from \"./getCSSColorFromDef\";\r\n\r\n/** Properties for the [[ColorSwatch]] React component\r\n * @beta\r\n */\r\nexport interface ColorSwatchProps extends React.ButtonHTMLAttributes<HTMLButtonElement>, CommonProps {\r\n  /** color specification */\r\n  colorDef: ColorDef;\r\n  /** function to run when user selects color swatch */\r\n  onColorPick?: ((color: ColorDef, e: React.MouseEvent) => void) | undefined;\r\n  /** Show swatches as squares unless round is set to true */\r\n  round?: boolean;\r\n}\r\n\r\n/** ColorSwatch Functional component displays a color swatch in a button\r\n * @beta\r\n */\r\nexport function ColorSwatch(props: ColorSwatchProps) {\r\n  const rgbaString = getCSSColorFromDef(props.colorDef);\r\n  const colorStyle: React.CSSProperties = {\r\n    backgroundColor: rgbaString,\r\n    ...props.style,\r\n  };\r\n\r\n  const handleClick = (e: React.MouseEvent) => {\r\n    // istanbul ignore else\r\n    if (props && props.onColorPick)\r\n      props.onColorPick(props.colorDef, e);\r\n  };\r\n\r\n  const classes = classnames(\r\n    \"components-color-swatch\",\r\n    props.round && \"round\",\r\n    props.className,\r\n  );\r\n\r\n  const {\r\n    // eslint-disable-next-line @typescript-eslint/no-unused-vars\r\n    onColorPick, colorDef, round, // do not pass on color swatch specific props\r\n    // eslint-disable-next-line comma-dangle\r\n    ...otherProps // pass-through props\r\n  } = props;\r\n\r\n  return <button {...otherProps} style={colorStyle} className={classes} onClick={handleClick} />;\r\n}\r\n"]}

package/lib/cjs/imodel-components-react/color/Swatch.scss

@@ -2,23 +2,21 @@
 * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
 * See LICENSE.md in the project root for license terms and full copyright notice.
 *--------------------------------------------------------------------------------------------*/
-@import "~@itwin/core-react/lib/cjs/core-react/style/themecolors";
-@import "~@itwin/itwinui-css/scss/style/typography";
 
 .components-color-swatch {
-  font-size: $iui-font-size;
+  font-size: var(--iui-font-size-1);
   height: 1em * 1.2;
   width: 1em * 1.2;
   border-width: 1px;
-  border-radius: 3px;
+  border-radius: var(--iui-border-radius-1);
   border-style: solid;
-  border-color: $buic-inputs-border;
+  border-color: var(--iui-color-border-subtle);
 
   &.round {
     border-radius: 50%;
   }
 
   &[disabled] {
-    opacity: .2;
+    opacity: 0.2;
   }
-}
+}

package/lib/cjs/imodel-components-react/color/getCSSColorFromDef.d.ts

@@ -1,7 +1,7 @@
-/** @packageDocumentation
- * @module Color
- */
-import { ColorDef } from "@itwin/core-common";
-/** @internal */
-export declare function getCSSColorFromDef(colorDef: ColorDef): string;
+/** @packageDocumentation
+ * @module Color
+ */
+import { ColorDef } from "@itwin/core-common";
+/** @internal */
+export declare function getCSSColorFromDef(colorDef: ColorDef): string;
 //# sourceMappingURL=getCSSColorFromDef.d.ts.map

package/lib/cjs/imodel-components-react/color/getCSSColorFromDef.js

@@ -1,24 +1,24 @@
-"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 Color
- */
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.getCSSColorFromDef = void 0;
-/** @internal */
-function getCSSColorFromDef(colorDef) {
-    const { b, g, r, t } = colorDef.colors;
-    let rgbaString = "";
-    if (t === 0)
-        rgbaString = `rgb(${r},${g},${b})`;
-    else {
-        const alpha = ((255 - t) / 255).toFixed(2);
-        rgbaString = `rgba(${r},${g},${b},${alpha})`;
-    }
-    return rgbaString;
-}
-exports.getCSSColorFromDef = getCSSColorFromDef;
+"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 Color
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getCSSColorFromDef = void 0;
+/** @internal */
+function getCSSColorFromDef(colorDef) {
+    const { b, g, r, t } = colorDef.colors;
+    let rgbaString = "";
+    if (t === 0)
+        rgbaString = `rgb(${r},${g},${b})`;
+    else {
+        const alpha = ((255 - t) / 255).toFixed(2);
+        rgbaString = `rgba(${r},${g},${b},${alpha})`;
+    }
+    return rgbaString;
+}
+exports.getCSSColorFromDef = getCSSColorFromDef;
 //# sourceMappingURL=getCSSColorFromDef.js.map

package/lib/cjs/imodel-components-react/editors/ColorEditor.d.ts

@@ -1,45 +1,45 @@
-/** @packageDocumentation
- * @module PropertyEditors
- */
-import "./ColorEditor.scss";
-import * as React from "react";
-import { ColorDef } from "@itwin/core-common";
-import { PropertyValue } from "@itwin/appui-abstract";
-import { PropertyEditorBase, PropertyEditorProps, TypeEditor } from "@itwin/components-react";
-/** @internal */
-interface ColorEditorState {
-    colorValue: number;
-    readonly: boolean;
-    isDisabled?: boolean;
-    numColumns: number;
-    availableColors: ColorDef[];
-}
-/** ColorEditor React component that is a property editor with text input
- * @beta
- */
-export declare class ColorEditor extends React.PureComponent<PropertyEditorProps, ColorEditorState> implements TypeEditor {
-    private _buttonElement;
-    /** @internal */
-    readonly state: Readonly<ColorEditorState>;
-    getPropertyValue(): Promise<PropertyValue | undefined>;
-    get htmlElement(): HTMLElement | null;
-    get hasFocus(): boolean;
-    private setFocus;
-    private _onColorPick;
-    /** @internal */
-    componentDidMount(): void;
-    /** @internal */
-    componentDidUpdate(prevProps: PropertyEditorProps): void;
-    private setStateFromProps;
-    /** @internal */
-    render(): JSX.Element;
-}
-/** Color Property Editor registered for the "number" type name and "color-picker" editor name.
- * It uses the [[ColorEditor]] React component.
- * @beta
- */
-export declare class ColorPropertyEditor extends PropertyEditorBase {
-    get reactNode(): React.ReactNode;
-}
-export {};
+/** @packageDocumentation
+ * @module PropertyEditors
+ */
+import "./ColorEditor.scss";
+import * as React from "react";
+import { ColorDef } from "@itwin/core-common";
+import { PropertyValue } from "@itwin/appui-abstract";
+import { PropertyEditorBase, PropertyEditorProps, TypeEditor } from "@itwin/components-react";
+/** @internal */
+interface ColorEditorState {
+    colorValue: number;
+    readonly: boolean;
+    isDisabled?: boolean;
+    numColumns: number;
+    availableColors: ColorDef[];
+}
+/** ColorEditor React component that is a property editor with text input
+ * @beta
+ */
+export declare class ColorEditor extends React.PureComponent<PropertyEditorProps, ColorEditorState> implements TypeEditor {
+    private _buttonElement;
+    /** @internal */
+    readonly state: Readonly<ColorEditorState>;
+    getPropertyValue(): Promise<PropertyValue | undefined>;
+    get htmlElement(): HTMLElement | null;
+    get hasFocus(): boolean;
+    private setFocus;
+    private _onColorPick;
+    /** @internal */
+    componentDidMount(): void;
+    /** @internal */
+    componentDidUpdate(prevProps: PropertyEditorProps): void;
+    private setStateFromProps;
+    /** @internal */
+    render(): JSX.Element;
+}
+/** Color Property Editor registered for the "number" type name and "color-picker" editor name.
+ * It uses the [[ColorEditor]] React component.
+ * @beta
+ */
+export declare class ColorPropertyEditor extends PropertyEditorBase {
+    get reactNode(): React.ReactNode;
+}
+export {};
 //# sourceMappingURL=ColorEditor.d.ts.map