@itwin/imodel-components-react 4.0.0-dev.2 → 4.0.0-dev.21

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@itwin/imodel-components-react",
-  "version": "4.0.0-dev.2",
+  "version": "4.0.0-dev.21",
   "description": "iTwin.js UI IModel Components",
   "main": "lib/cjs/imodel-components-react.js",
   "module": "lib/esm/imodel-components-react.js",
@@ -8,9 +8,11 @@
   "license": "MIT",
   "repository": {
     "type": "git",
-    "url": "https://github.com/iTwin/appui/tree/master/ui/imodel-components-react"
+    "url": "https://github.com/iTwin/appui.git",
+    "directory": "ui/imodel-components-react"
   },
   "keywords": [
+    "AppUI",
     "Bentley",
     "BIM",
     "iModel"
@@ -20,41 +22,40 @@
     "url": "http://www.bentley.com"
   },
   "peerDependencies": {
-    "@itwin/appui-abstract": "^4.0.0-dev.2",
-    "@itwin/components-react": "^4.0.0-dev.2",
-    "@itwin/core-bentley": "^3.5.1",
-    "@itwin/core-common": "^3.5.1",
-    "@itwin/core-frontend": "^3.5.1",
-    "@itwin/core-geometry": "^3.5.1",
-    "@itwin/core-quantity": "^3.5.1",
-    "@itwin/core-react": "^4.0.0-dev.2",
-    "react": "^17.0.0",
-    "react-dom": "^17.0.0"
+    "@itwin/appui-abstract": ">=3.7.0",
+    "@itwin/components-react": "^4.0.0-dev.21",
+    "@itwin/core-bentley": ">=3.7.0",
+    "@itwin/core-common": ">=3.7.0",
+    "@itwin/core-frontend": ">=3.7.0",
+    "@itwin/core-geometry": ">=3.7.0",
+    "@itwin/core-quantity": ">=3.7.0",
+    "@itwin/core-react": "^4.0.0-dev.21",
+    "react": "^17.0.0 || ^18.0.0",
+    "react-dom": "^17.0.0 || ^18.0.0"
   },
   "//devDependencies": [
     "NOTE: All peerDependencies should also be listed as devDependencies since peerDependencies are not considered by npm install",
     "NOTE: All tools used by scripts in this package must be listed as devDependencies"
   ],
   "devDependencies": {
-    "@itwin/appui-abstract": "4.0.0-dev.2",
-    "@itwin/build-tools": "^3.5.1",
-    "@itwin/components-react": "4.0.0-dev.2",
-    "@itwin/core-bentley": "^3.5.1",
-    "@itwin/core-common": "^3.5.1",
-    "@itwin/core-frontend": "^3.5.1",
-    "@itwin/core-geometry": "^3.5.1",
-    "@itwin/core-orbitgt": "^3.5.1",
-    "@itwin/core-quantity": "^3.5.1",
-    "@itwin/core-react": "4.0.0-dev.2",
-    "@itwin/eslint-plugin": "^3.5.1",
-    "@itwin/webgl-compatibility": "^3.5.1",
+    "@itwin/appui-abstract": "^3.7.0",
+    "@itwin/build-tools": "^3.7.0",
+    "@itwin/components-react": "4.0.0-dev.21",
+    "@itwin/core-bentley": "^3.7.0",
+    "@itwin/core-common": "^3.7.0",
+    "@itwin/core-frontend": "^3.7.0",
+    "@itwin/core-geometry": "^3.7.0",
+    "@itwin/core-orbitgt": "^3.7.0",
+    "@itwin/core-quantity": "^3.7.0",
+    "@itwin/core-react": "4.0.0-dev.21",
+    "@itwin/eslint-plugin": "^3.7.0",
+    "@itwin/webgl-compatibility": "^3.7.0",
     "@testing-library/dom": "^8.11.2",
     "@testing-library/react": "^12.0.0",
     "@testing-library/react-hooks": "^7.0.2",
     "@testing-library/user-event": "^14.4.2",
     "@types/chai": "4.3.1",
     "@types/chai-as-promised": "^7",
-    "@types/chai-spies": "^1.0.0",
     "@types/chai-string": "^1.4.1",
     "@types/faker": "^4.1.0",
     "@types/mocha": "^8.2.2",
@@ -65,7 +66,6 @@
     "@types/sinon-chai": "^3.2.0",
     "chai": "^4.1.2",
     "chai-as-promised": "^7",
-    "chai-spies": "1.0.0",
     "chai-string": "^1.5.0",
     "cpx2": "^3.0.0",
     "eslint": "^7.11.0",
@@ -84,20 +84,18 @@
     "sinon-chai": "^3.2.0",
     "ts-node": "^10.8.2",
     "typemoq": "^2.1.0",
-    "typescript": "~4.4.0",
-    "xmlhttprequest": "^1.8.0"
+    "typescript": "~5.0.2"
   },
   "//dependencies": [
     "NOTE: these dependencies should be only for things that DO NOT APPEAR IN THE API",
     "NOTE: core-frontend should remain UI technology agnostic, so no react/angular dependencies are allowed"
   ],
   "dependencies": {
-    "@bentley/icons-generic-webfont": "^1.0.15",
-    "@itwin/itwinui-css": "0.x",
-    "@itwin/itwinui-variables": "^1.0.0",
-    "@itwin/itwinui-react": "~1.42.0",
-    "classnames": "2.3.1",
-    "immer": "9.0.6"
+    "@bentley/icons-generic": "^1.0.34",
+    "@itwin/itwinui-react": "^2.5.0",
+    "@itwin/itwinui-variables": "^2.0.0",
+    "@itwin/itwinui-icons-react": "^2.1.0",
+    "classnames": "2.3.1"
   },
   "nyc": {
     "extends": "./node_modules/@itwin/build-tools/.nycrc",
@@ -123,8 +121,7 @@
     ]
   },
   "scripts": {
-    "build": "npm run -s copy:locale && npm run -s build:cjs",
-    "build:ci": "npm run -s build && npm run -s build:esm",
+    "build": "npm run -s copy:locale && npm run -s build:cjs && npm run -s build:esm",
     "build:cjs": "tsc 1>&2 --outDir lib/cjs && npm run -s copy:cjs",
     "build:esm": "tsc 1>&2 --module ES2020 --outDir lib/esm && npm run -s copy:esm",
     "copy:locale": "cpx \"./public/**/*\" ./lib/public",
@@ -133,11 +130,13 @@
     "pseudolocalize": "betools pseudolocalize --englishDir ./public/locales/en --out ./public/locales/en-PSEUDO",
     "clean": "rimraf lib .rush/temp/package-deps*.json",
     "cover": "nyc npm -s test",
-    "docs": "betools docs --includes=../../generated-docs/extract --json=../../generated-docs/ui/imodel-components-react/file.json --tsIndexFile=./imodel-components-react.ts --onlyJson",
     "lint": "eslint -f visualstudio \"./src/**/*.{ts,tsx}\" 1>&2",
     "extract-api": "betools extract-api --entry=imodel-components-react",
     "test": "mocha --config ../.mocharc.json \"./lib/cjs/test/**/*.test.js\"",
-    "test:watch": "npm -s test -- --reporter min --watch-extensions ts,tsx --watch"
+    "test:watch": "npm -s test -- --reporter min --watch-extensions ts,tsx --watch",
+    "docs": "npm run -s docs:reference && npm run -s docs:changelog",
+    "docs:changelog": "cpx ./CHANGELOG.md ../../generated-docs/reference/imodel-components-react",
+    "docs:reference": "betools docs --includes=../../generated-docs/extract --json=../../generated-docs/reference/imodel-components-react/file.json --tsIndexFile=./imodel-components-react.ts --onlyJson"
   },
-  "readme": "# @itwin/imodel-components-react\r\n\r\nCopyright © Bentley Systems, Incorporated. All rights reserved. See LICENSE.md for license terms and full copyright notice.\r\n\r\n## Description\r\n\r\nThe __@itwin/imodel-components-react__ package contains React components that depend on the imodeljs-frontend, imodeljs-common or imodeljs-quantity packages.\r\n\r\n## Documentation\r\n\r\nSee the [iTwin.js](https://www.itwinjs.org) documentation for more information.\r\n"
+  "readme": "# @itwin/imodel-components-react\r\n\r\nCopyright © Bentley Systems, Incorporated. All rights reserved. See LICENSE.md for license terms and full copyright notice.\r\n\r\n## Description\r\n\r\nThe __@itwin/imodel-components-react__ package contains React components that depend on the @itwin/core-frontend, @itwin/core-common or @itwin/core-quantity packages.\r\n\r\n## Documentation\r\n\r\nSee the [iTwin.js](https://www.itwinjs.org/learning/ui/imodel-components/) documentation for more information.\r\n"
 }

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

@@ -1,22 +0,0 @@
-/** @packageDocumentation
- * @module Color
- */
-/// <reference types="react" />
-import { ColorDef } from "@itwin/core-common";
-import "./ColorPickerPanel.scss";
-/** Properties for the [[ColorPickerPanel]] React component
- * @public @deprecated use `ColorPicker` for itwinui-react
- */
-export interface ColorPickerPanelProps {
-    activeColor: ColorDef;
-    onColorChange: (selectedColor: ColorDef) => void;
-    colorPresets?: ColorDef[];
-    /** If set show either HSL or RGB input values. If undefined no input value is shown */
-    colorInputType?: "HSL" | "RGB";
-}
-/**
- * Color Picker Dialog to use as modal dialog.
- * @public @deprecated use `ColorPicker` for itwinui-react
- */
-export declare function ColorPickerPanel({ activeColor, onColorChange, colorPresets, colorInputType }: ColorPickerPanelProps): JSX.Element;
-//# sourceMappingURL=ColorPickerPanel.d.ts.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"ColorPickerPanel.d.ts","sourceRoot":"","sources":["../../../../src/imodel-components-react/color/ColorPickerPanel.tsx"],"names":[],"mappings":"AAIA;;GAEG;;AAKH,OAAO,EAAE,QAAQ,EAAY,MAAM,oBAAoB,CAAC;AAIxD,OAAO,yBAAyB,CAAC;AAGjC;;GAEG;AACH,MAAM,WAAW,qBAAqB;IACpC,WAAW,EAAE,QAAQ,CAAC;IACtB,aAAa,EAAE,CAAC,aAAa,EAAE,QAAQ,KAAK,IAAI,CAAC;IACjD,YAAY,CAAC,EAAE,QAAQ,EAAE,CAAC;IAC1B,uFAAuF;IACvF,cAAc,CAAC,EAAE,KAAK,GAAG,KAAK,CAAC;CAChC;AAED;;;GAGG;AAEH,wBAAgB,gBAAgB,CAAC,EAAE,WAAW,EAAE,aAAa,EAAE,YAAY,EAAE,cAAc,EAAE,EAAE,qBAAqB,eAsInH"}

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

@@ -1,146 +0,0 @@
-"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;
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.ColorPickerPanel = void 0;
-// cSpell:ignore colorpicker
-const React = __importStar(require("react"));
-const core_common_1 = require("@itwin/core-common");
-const Swatch_1 = require("./Swatch");
-const HueSlider_1 = require("./HueSlider");
-const SaturationPicker_1 = require("./SaturationPicker");
-require("./ColorPickerPanel.scss");
-const core_react_1 = require("@itwin/core-react");
-/**
- * Color Picker Dialog to use as modal dialog.
- * @public @deprecated use `ColorPicker` for itwinui-react
- */
-// istanbul ignore next
-function ColorPickerPanel({ activeColor, onColorChange, colorPresets, colorInputType }) {
-    const handlePresetColorPick = React.useCallback((newColor, e) => {
-        e.preventDefault();
-        if (onColorChange) {
-            onColorChange(newColor);
-        }
-    }, [onColorChange]);
-    const handleHueChange = React.useCallback((newHsvColor) => {
-        // for a ColorDef to be created from hsv s can't be 0
-        if (newHsvColor.s === 0) {
-            newHsvColor = newHsvColor.clone(undefined, 0.5);
-        }
-        const newColorDef = newHsvColor.toColorDef();
-        if (onColorChange) {
-            onColorChange(newColorDef);
-        }
-    }, [onColorChange]);
-    const handleSaturationChange = React.useCallback((newHsvColor) => {
-        const newColorDef = newHsvColor.toColorDef();
-        if (onColorChange) {
-            onColorChange(newColorDef);
-        }
-    }, [onColorChange]);
-    const currentHsl = React.useMemo(() => activeColor.toHSL(), [activeColor]);
-    const currentHsv = React.useMemo(() => activeColor.toHSV(), [activeColor]);
-    const color = React.useMemo(() => activeColor.colors, [activeColor]);
-    const handleLightnessValueChange = React.useCallback((value, _stringValue) => {
-        const newHsl = currentHsl.clone(undefined, undefined, (value !== null && value !== void 0 ? value : 0) / 100);
-        if (onColorChange) {
-            const newColorDef = newHsl.toColorDef();
-            onColorChange(newColorDef);
-        }
-    }, [currentHsl, onColorChange]);
-    const handleHueValueChange = React.useCallback((value, _stringValue) => {
-        const newHsl = currentHsl.clone((value !== null && value !== void 0 ? value : 0) / 360, undefined, undefined);
-        if (onColorChange) {
-            const newColorDef = newHsl.toColorDef();
-            onColorChange(newColorDef);
-        }
-    }, [currentHsl, onColorChange]);
-    const handleSaturationValueChange = React.useCallback((value, _stringValue) => {
-        const newHsl = currentHsl.clone(undefined, (value !== null && value !== void 0 ? value : 0) / 100, undefined);
-        if (onColorChange) {
-            const newColorDef = newHsl.toColorDef();
-            onColorChange(newColorDef);
-        }
-    }, [currentHsl, onColorChange]);
-    const handleRedChange = React.useCallback((value, _stringValue) => {
-        if (undefined !== value) {
-            const newColorDef = core_common_1.ColorDef.from(value, color.g, color.b);
-            if (onColorChange) {
-                onColorChange(newColorDef);
-            }
-        }
-    }, [color, onColorChange]);
-    const handleGreenChange = React.useCallback((value, _stringValue) => {
-        if (undefined !== value) {
-            const newColorDef = core_common_1.ColorDef.from(color.r, value, color.b);
-            if (onColorChange) {
-                onColorChange(newColorDef);
-            }
-        }
-    }, [color, onColorChange]);
-    const handleBlueChange = React.useCallback((value, _stringValue) => {
-        if (undefined !== value) {
-            const newColorDef = core_common_1.ColorDef.from(color.r, color.g, value);
-            if (onColorChange) {
-                onColorChange(newColorDef);
-            }
-        }
-    }, [color, onColorChange]);
-    return (React.createElement("div", { "data-testid": "components-colorpicker-panel", className: "components-colorpicker-panel" },
-        React.createElement("div", { className: "components-colorpicker-panel-color" },
-            React.createElement("div", { className: "components-colorpicker-saturation" },
-                React.createElement(SaturationPicker_1.SaturationPicker, { hsv: currentHsv, onSaturationChange: handleSaturationChange })),
-            React.createElement("div", { className: "components-colorpicker-hue" },
-                React.createElement(HueSlider_1.HueSlider, { hsv: currentHsv, onHueChange: handleHueChange, isHorizontal: false }))),
-        (colorInputType === "RGB") &&
-            React.createElement("div", { "data-testid": "components-colorpicker-input-panel", className: "components-colorpicker-input-panel" },
-                React.createElement("div", { className: "components-colorpicker-input-value-wrapper" },
-                    React.createElement("span", { className: "uicore-inputs-labeled-input" }, "R"),
-                    React.createElement(core_react_1.NumberInput, { "data-testid": "components-colorpicker-input-value-red", value: color.r, onChange: handleRedChange, min: 0, max: 255 })),
-                React.createElement("div", { className: "components-colorpicker-input-value-wrapper" },
-                    React.createElement("span", { className: "uicore-inputs-labeled-input" }, "G"),
-                    React.createElement(core_react_1.NumberInput, { "data-testid": "components-colorpicker-input-value-green", value: color.g, onChange: handleGreenChange, min: 0, max: 255 })),
-                React.createElement("div", { className: "components-colorpicker-input-value-wrapper" },
-                    React.createElement("span", { className: "uicore-inputs-labeled-input" }, "B"),
-                    React.createElement(core_react_1.NumberInput, { "data-testid": "components-colorpicker-input-value-blue", value: color.b, onChange: handleBlueChange, min: 0, max: 255 }))),
-        (colorInputType === "HSL") &&
-            React.createElement("div", { "data-testid": "components-colorpicker-input-panel", className: "components-colorpicker-input-panel" },
-                React.createElement("div", { className: "components-colorpicker-input-value-wrapper" },
-                    React.createElement("span", { className: "uicore-inputs-labeled-input" }, "H"),
-                    React.createElement(core_react_1.NumberInput, { "data-testid": "components-colorpicker-input-value-hue", value: Math.round(currentHsl.h * 360), onChange: handleHueValueChange, min: 0, max: 360 })),
-                React.createElement("div", { className: "components-colorpicker-input-value-wrapper" },
-                    React.createElement("span", { className: "uicore-inputs-labeled-input" }, "S"),
-                    React.createElement(core_react_1.NumberInput, { "data-testid": "components-colorpicker-input-value-saturation", value: Math.round(currentHsl.s * 100), onChange: handleSaturationValueChange, min: 0, max: 100 })),
-                React.createElement("div", { className: "components-colorpicker-input-value-wrapper" },
-                    React.createElement("span", { className: "uicore-inputs-labeled-input" }, "L"),
-                    React.createElement(core_react_1.NumberInput, { "data-testid": "components-colorpicker-input-value-lightness", value: Math.round(currentHsl.l * 100), onChange: handleLightnessValueChange, min: 0, max: 100 }))),
-        colorPresets && colorPresets.length &&
-            React.createElement("div", { className: "components-colorpicker-panel-presets" }, colorPresets.map((preset, index) => React.createElement(Swatch_1.ColorSwatch, { className: "components-colorpicker-panel-swatch", key: index, colorDef: preset, round: false, onColorPick: handlePresetColorPick })))));
-}
-exports.ColorPickerPanel = ColorPickerPanel;
-//# sourceMappingURL=ColorPickerPanel.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"ColorPickerPanel.js","sourceRoot":"","sources":["../../../../src/imodel-components-react/color/ColorPickerPanel.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 Color\n */\n\n// cSpell:ignore colorpicker\n\nimport * as React from \"react\";\nimport { ColorDef, HSVColor } from \"@itwin/core-common\";\nimport { ColorSwatch } from \"./Swatch\";\nimport { HueSlider } from \"./HueSlider\";\nimport { SaturationPicker } from \"./SaturationPicker\";\nimport \"./ColorPickerPanel.scss\";\nimport { NumberInput } from \"@itwin/core-react\";\n\n/** Properties for the [[ColorPickerPanel]] React component\n * @public @deprecated use `ColorPicker` for itwinui-react\n */\nexport interface ColorPickerPanelProps {\n  activeColor: ColorDef;\n  onColorChange: (selectedColor: ColorDef) => void;\n  colorPresets?: ColorDef[];\n  /** If set show either HSL or RGB input values. If undefined no input value is shown */\n  colorInputType?: \"HSL\" | \"RGB\";\n}\n\n/**\n * Color Picker Dialog to use as modal dialog.\n * @public @deprecated use `ColorPicker` for itwinui-react\n */\n// istanbul ignore next\nexport function ColorPickerPanel({ activeColor, onColorChange, colorPresets, colorInputType }: ColorPickerPanelProps) { // eslint-disable-line deprecation/deprecation\n  const handlePresetColorPick = React.useCallback((newColor: ColorDef, e: React.MouseEvent<Element, MouseEvent>) => {\n    e.preventDefault();\n    if (onColorChange) {\n      onColorChange(newColor);\n    }\n  }, [onColorChange]);\n\n  const handleHueChange = React.useCallback((newHsvColor: HSVColor) => {\n    // for a ColorDef to be created from hsv s can't be 0\n    if (newHsvColor.s === 0) {\n      newHsvColor = newHsvColor.clone(undefined, 0.5);\n    }\n\n    const newColorDef = newHsvColor.toColorDef();\n    if (onColorChange) {\n      onColorChange(newColorDef);\n    }\n  }, [onColorChange]);\n\n  const handleSaturationChange = React.useCallback((newHsvColor: HSVColor) => {\n    const newColorDef = newHsvColor.toColorDef();\n    if (onColorChange) {\n      onColorChange(newColorDef);\n    }\n  }, [onColorChange]);\n\n  const currentHsl = React.useMemo(() => activeColor.toHSL(), [activeColor]);\n  const currentHsv = React.useMemo(() => activeColor.toHSV(), [activeColor]);\n  const color = React.useMemo(() => activeColor.colors, [activeColor]);\n\n  const handleLightnessValueChange = React.useCallback((value: number | undefined, _stringValue: string) => {\n    const newHsl = currentHsl.clone(undefined, undefined, (value ?? 0) / 100);\n\n    if (onColorChange) {\n      const newColorDef = newHsl.toColorDef();\n      onColorChange(newColorDef);\n    }\n  }, [currentHsl, onColorChange]);\n\n  const handleHueValueChange = React.useCallback((value: number | undefined, _stringValue: string) => {\n    const newHsl = currentHsl.clone((value ?? 0) / 360, undefined, undefined);\n\n    if (onColorChange) {\n      const newColorDef = newHsl.toColorDef();\n      onColorChange(newColorDef);\n    }\n  }, [currentHsl, onColorChange]);\n\n  const handleSaturationValueChange = React.useCallback((value: number | undefined, _stringValue: string) => {\n    const newHsl = currentHsl.clone(undefined, (value ?? 0) / 100, undefined);\n\n    if (onColorChange) {\n      const newColorDef = newHsl.toColorDef();\n      onColorChange(newColorDef);\n    }\n  }, [currentHsl, onColorChange]);\n\n  const handleRedChange = React.useCallback((value: number | undefined, _stringValue: string) => {\n    if (undefined !== value) {\n      const newColorDef = ColorDef.from(value, color.g, color.b);\n      if (onColorChange) {\n        onColorChange(newColorDef);\n      }\n    }\n  }, [color, onColorChange]);\n\n  const handleGreenChange = React.useCallback((value: number | undefined, _stringValue: string) => {\n    if (undefined !== value) {\n      const newColorDef = ColorDef.from(color.r, value, color.b);\n      if (onColorChange) {\n        onColorChange(newColorDef);\n      }\n    }\n  }, [color, onColorChange]);\n\n  const handleBlueChange = React.useCallback((value: number | undefined, _stringValue: string) => {\n    if (undefined !== value) {\n      const newColorDef = ColorDef.from(color.r, color.g, value);\n      if (onColorChange) {\n        onColorChange(newColorDef);\n      }\n    }\n  }, [color, onColorChange]);\n\n  return (\n    <div data-testid=\"components-colorpicker-panel\" className=\"components-colorpicker-panel\">\n      <div className=\"components-colorpicker-panel-color\">\n        <div className=\"components-colorpicker-saturation\">\n          <SaturationPicker hsv={currentHsv} onSaturationChange={handleSaturationChange} />\n        </div>\n        <div className=\"components-colorpicker-hue\">\n          <HueSlider hsv={currentHsv} onHueChange={handleHueChange} isHorizontal={false} />\n        </div>\n      </div>\n      {(colorInputType === \"RGB\") &&\n        <div data-testid=\"components-colorpicker-input-panel\" className=\"components-colorpicker-input-panel\">\n          <div className=\"components-colorpicker-input-value-wrapper\">\n            <span className=\"uicore-inputs-labeled-input\">R</span>\n            <NumberInput data-testid=\"components-colorpicker-input-value-red\" value={color.r} onChange={handleRedChange} min={0} max={255} />\n          </div>\n          <div className=\"components-colorpicker-input-value-wrapper\">\n            <span className=\"uicore-inputs-labeled-input\">G</span>\n            <NumberInput data-testid=\"components-colorpicker-input-value-green\" value={color.g} onChange={handleGreenChange} min={0} max={255} />\n          </div>\n          <div className=\"components-colorpicker-input-value-wrapper\">\n            <span className=\"uicore-inputs-labeled-input\">B</span>\n            <NumberInput data-testid=\"components-colorpicker-input-value-blue\" value={color.b} onChange={handleBlueChange} min={0} max={255} />\n          </div>\n        </div>}\n      {(colorInputType === \"HSL\") &&\n        <div data-testid=\"components-colorpicker-input-panel\" className=\"components-colorpicker-input-panel\">\n          <div className=\"components-colorpicker-input-value-wrapper\">\n            <span className=\"uicore-inputs-labeled-input\">H</span>\n            <NumberInput data-testid=\"components-colorpicker-input-value-hue\" value={Math.round(currentHsl.h * 360)} onChange={handleHueValueChange} min={0} max={360} />\n          </div>\n          <div className=\"components-colorpicker-input-value-wrapper\">\n            <span className=\"uicore-inputs-labeled-input\">S</span>\n            <NumberInput data-testid=\"components-colorpicker-input-value-saturation\" value={Math.round(currentHsl.s * 100)} onChange={handleSaturationValueChange} min={0} max={100} />\n          </div>\n          <div className=\"components-colorpicker-input-value-wrapper\">\n            <span className=\"uicore-inputs-labeled-input\">L</span>\n            <NumberInput data-testid=\"components-colorpicker-input-value-lightness\" value={Math.round(currentHsl.l * 100)} onChange={handleLightnessValueChange} min={0} max={100} />\n          </div>\n        </div>}\n\n      {\n        colorPresets && colorPresets.length &&\n        <div className=\"components-colorpicker-panel-presets\">\n          {colorPresets.map((preset, index) => <ColorSwatch className=\"components-colorpicker-panel-swatch\" key={index} colorDef={preset} round={false} onColorPick={handlePresetColorPick} />)}\n        </div>\n      }\n    </div>\n  );\n}\n"]}

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

@@ -1,94 +0,0 @@
-/*---------------------------------------------------------------------------------------------
-* 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/index";
-
-$hovered-icon-color: $buic-foreground-primary-tone;
-$saturation-hue-height: 150px;
-
-.components-colorpicker-panel {
-  display: flex;
-  flex-direction: column;
-
-  .components-colorpicker-panel-color {
-    display: flex;
-    flex-direction: row;
-    height: 100%;
-    column-gap: 20px;
-
-    .components-colorpicker-saturation {
-      margin: 1em;
-      display: block;
-      width: calc(100% - 40px);
-      height: $saturation-hue-height;
-    }
-
-    .components-hue-container-vertical {
-      height: $saturation-hue-height;
-      margin-top: 1em;
-      margin-right: .5em;
-    }
-  }
-
-  .components-color-swatch {
-    width: 2.0em;
-    height: 2.0em;
-  }
-}
-
-.components-colorpicker-panel-presets {
-  width: 100%;
-  height: 100%;
-  padding-top: 10px;
-  margin-top: 10px;
-  margin-bottom: 10px;
-  display: grid;
-  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
-  column-gap: 2px;
-  row-gap: 10px;
-  border-top: 1px solid $buic-inputs-border;
-  justify-items: center;
-
-  .components-colorpicker-panel-swatch {
-    width: 2em;
-    height: 2em;
-    padding: 0;
-    border-color: $buic-inputs-border;
-  }
-}
-
-.components-colorpicker-popup-panel-padding {
-  display: flex;
-  flex-direction: column;
-
-  button.core-dialog-close {
-    margin-left: auto;
-    background: transparent;
-    border: none;
-    color: var(--buic-foreground-body);
-  }
-}
-
-.components-colorpicker-input-panel {
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  justify-content: space-evenly;
-
-  .components-colorpicker-input-value-wrapper {
-    align-items: center;
-    display: flex;
-    flex-direction: row;
-    gap: 4px;
-
-    .uicore-inputs-labeled-input {
-      text-align: right;
-      margin: 0;
-    }
-
-    .core-number-input-container {
-      width: 54px;
-    }
-  }
-}

package/lib/esm/imodel-components-react/color/ColorPickerPanel.d.ts

@@ -1,22 +0,0 @@
-/** @packageDocumentation
- * @module Color
- */
-/// <reference types="react" />
-import { ColorDef } from "@itwin/core-common";
-import "./ColorPickerPanel.scss";
-/** Properties for the [[ColorPickerPanel]] React component
- * @public @deprecated use `ColorPicker` for itwinui-react
- */
-export interface ColorPickerPanelProps {
-    activeColor: ColorDef;
-    onColorChange: (selectedColor: ColorDef) => void;
-    colorPresets?: ColorDef[];
-    /** If set show either HSL or RGB input values. If undefined no input value is shown */
-    colorInputType?: "HSL" | "RGB";
-}
-/**
- * Color Picker Dialog to use as modal dialog.
- * @public @deprecated use `ColorPicker` for itwinui-react
- */
-export declare function ColorPickerPanel({ activeColor, onColorChange, colorPresets, colorInputType }: ColorPickerPanelProps): JSX.Element;
-//# sourceMappingURL=ColorPickerPanel.d.ts.map

package/lib/esm/imodel-components-react/color/ColorPickerPanel.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"ColorPickerPanel.d.ts","sourceRoot":"","sources":["../../../../src/imodel-components-react/color/ColorPickerPanel.tsx"],"names":[],"mappings":"AAIA;;GAEG;;AAKH,OAAO,EAAE,QAAQ,EAAY,MAAM,oBAAoB,CAAC;AAIxD,OAAO,yBAAyB,CAAC;AAGjC;;GAEG;AACH,MAAM,WAAW,qBAAqB;IACpC,WAAW,EAAE,QAAQ,CAAC;IACtB,aAAa,EAAE,CAAC,aAAa,EAAE,QAAQ,KAAK,IAAI,CAAC;IACjD,YAAY,CAAC,EAAE,QAAQ,EAAE,CAAC;IAC1B,uFAAuF;IACvF,cAAc,CAAC,EAAE,KAAK,GAAG,KAAK,CAAC;CAChC;AAED;;;GAGG;AAEH,wBAAgB,gBAAgB,CAAC,EAAE,WAAW,EAAE,aAAa,EAAE,YAAY,EAAE,cAAc,EAAE,EAAE,qBAAqB,eAsInH"}

package/lib/esm/imodel-components-react/color/ColorPickerPanel.js

@@ -1,123 +0,0 @@
-/*---------------------------------------------------------------------------------------------
-* 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
- */
-// cSpell:ignore colorpicker
-import * as React from "react";
-import { ColorDef } from "@itwin/core-common";
-import { ColorSwatch } from "./Swatch";
-import { HueSlider } from "./HueSlider";
-import { SaturationPicker } from "./SaturationPicker";
-import "./ColorPickerPanel.scss";
-import { NumberInput } from "@itwin/core-react";
-/**
- * Color Picker Dialog to use as modal dialog.
- * @public @deprecated use `ColorPicker` for itwinui-react
- */
-// istanbul ignore next
-export function ColorPickerPanel({ activeColor, onColorChange, colorPresets, colorInputType }) {
-    const handlePresetColorPick = React.useCallback((newColor, e) => {
-        e.preventDefault();
-        if (onColorChange) {
-            onColorChange(newColor);
-        }
-    }, [onColorChange]);
-    const handleHueChange = React.useCallback((newHsvColor) => {
-        // for a ColorDef to be created from hsv s can't be 0
-        if (newHsvColor.s === 0) {
-            newHsvColor = newHsvColor.clone(undefined, 0.5);
-        }
-        const newColorDef = newHsvColor.toColorDef();
-        if (onColorChange) {
-            onColorChange(newColorDef);
-        }
-    }, [onColorChange]);
-    const handleSaturationChange = React.useCallback((newHsvColor) => {
-        const newColorDef = newHsvColor.toColorDef();
-        if (onColorChange) {
-            onColorChange(newColorDef);
-        }
-    }, [onColorChange]);
-    const currentHsl = React.useMemo(() => activeColor.toHSL(), [activeColor]);
-    const currentHsv = React.useMemo(() => activeColor.toHSV(), [activeColor]);
-    const color = React.useMemo(() => activeColor.colors, [activeColor]);
-    const handleLightnessValueChange = React.useCallback((value, _stringValue) => {
-        const newHsl = currentHsl.clone(undefined, undefined, (value !== null && value !== void 0 ? value : 0) / 100);
-        if (onColorChange) {
-            const newColorDef = newHsl.toColorDef();
-            onColorChange(newColorDef);
-        }
-    }, [currentHsl, onColorChange]);
-    const handleHueValueChange = React.useCallback((value, _stringValue) => {
-        const newHsl = currentHsl.clone((value !== null && value !== void 0 ? value : 0) / 360, undefined, undefined);
-        if (onColorChange) {
-            const newColorDef = newHsl.toColorDef();
-            onColorChange(newColorDef);
-        }
-    }, [currentHsl, onColorChange]);
-    const handleSaturationValueChange = React.useCallback((value, _stringValue) => {
-        const newHsl = currentHsl.clone(undefined, (value !== null && value !== void 0 ? value : 0) / 100, undefined);
-        if (onColorChange) {
-            const newColorDef = newHsl.toColorDef();
-            onColorChange(newColorDef);
-        }
-    }, [currentHsl, onColorChange]);
-    const handleRedChange = React.useCallback((value, _stringValue) => {
-        if (undefined !== value) {
-            const newColorDef = ColorDef.from(value, color.g, color.b);
-            if (onColorChange) {
-                onColorChange(newColorDef);
-            }
-        }
-    }, [color, onColorChange]);
-    const handleGreenChange = React.useCallback((value, _stringValue) => {
-        if (undefined !== value) {
-            const newColorDef = ColorDef.from(color.r, value, color.b);
-            if (onColorChange) {
-                onColorChange(newColorDef);
-            }
-        }
-    }, [color, onColorChange]);
-    const handleBlueChange = React.useCallback((value, _stringValue) => {
-        if (undefined !== value) {
-            const newColorDef = ColorDef.from(color.r, color.g, value);
-            if (onColorChange) {
-                onColorChange(newColorDef);
-            }
-        }
-    }, [color, onColorChange]);
-    return (React.createElement("div", { "data-testid": "components-colorpicker-panel", className: "components-colorpicker-panel" },
-        React.createElement("div", { className: "components-colorpicker-panel-color" },
-            React.createElement("div", { className: "components-colorpicker-saturation" },
-                React.createElement(SaturationPicker, { hsv: currentHsv, onSaturationChange: handleSaturationChange })),
-            React.createElement("div", { className: "components-colorpicker-hue" },
-                React.createElement(HueSlider, { hsv: currentHsv, onHueChange: handleHueChange, isHorizontal: false }))),
-        (colorInputType === "RGB") &&
-            React.createElement("div", { "data-testid": "components-colorpicker-input-panel", className: "components-colorpicker-input-panel" },
-                React.createElement("div", { className: "components-colorpicker-input-value-wrapper" },
-                    React.createElement("span", { className: "uicore-inputs-labeled-input" }, "R"),
-                    React.createElement(NumberInput, { "data-testid": "components-colorpicker-input-value-red", value: color.r, onChange: handleRedChange, min: 0, max: 255 })),
-                React.createElement("div", { className: "components-colorpicker-input-value-wrapper" },
-                    React.createElement("span", { className: "uicore-inputs-labeled-input" }, "G"),
-                    React.createElement(NumberInput, { "data-testid": "components-colorpicker-input-value-green", value: color.g, onChange: handleGreenChange, min: 0, max: 255 })),
-                React.createElement("div", { className: "components-colorpicker-input-value-wrapper" },
-                    React.createElement("span", { className: "uicore-inputs-labeled-input" }, "B"),
-                    React.createElement(NumberInput, { "data-testid": "components-colorpicker-input-value-blue", value: color.b, onChange: handleBlueChange, min: 0, max: 255 }))),
-        (colorInputType === "HSL") &&
-            React.createElement("div", { "data-testid": "components-colorpicker-input-panel", className: "components-colorpicker-input-panel" },
-                React.createElement("div", { className: "components-colorpicker-input-value-wrapper" },
-                    React.createElement("span", { className: "uicore-inputs-labeled-input" }, "H"),
-                    React.createElement(NumberInput, { "data-testid": "components-colorpicker-input-value-hue", value: Math.round(currentHsl.h * 360), onChange: handleHueValueChange, min: 0, max: 360 })),
-                React.createElement("div", { className: "components-colorpicker-input-value-wrapper" },
-                    React.createElement("span", { className: "uicore-inputs-labeled-input" }, "S"),
-                    React.createElement(NumberInput, { "data-testid": "components-colorpicker-input-value-saturation", value: Math.round(currentHsl.s * 100), onChange: handleSaturationValueChange, min: 0, max: 100 })),
-                React.createElement("div", { className: "components-colorpicker-input-value-wrapper" },
-                    React.createElement("span", { className: "uicore-inputs-labeled-input" }, "L"),
-                    React.createElement(NumberInput, { "data-testid": "components-colorpicker-input-value-lightness", value: Math.round(currentHsl.l * 100), onChange: handleLightnessValueChange, min: 0, max: 100 }))),
-        colorPresets && colorPresets.length &&
-            React.createElement("div", { className: "components-colorpicker-panel-presets" }, colorPresets.map((preset, index) => React.createElement(ColorSwatch, { className: "components-colorpicker-panel-swatch", key: index, colorDef: preset, round: false, onColorPick: handlePresetColorPick })))));
-}
-//# sourceMappingURL=ColorPickerPanel.js.map

package/lib/esm/imodel-components-react/color/ColorPickerPanel.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"ColorPickerPanel.js","sourceRoot":"","sources":["../../../../src/imodel-components-react/color/ColorPickerPanel.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 Color\n */\n\n// cSpell:ignore colorpicker\n\nimport * as React from \"react\";\nimport { ColorDef, HSVColor } from \"@itwin/core-common\";\nimport { ColorSwatch } from \"./Swatch\";\nimport { HueSlider } from \"./HueSlider\";\nimport { SaturationPicker } from \"./SaturationPicker\";\nimport \"./ColorPickerPanel.scss\";\nimport { NumberInput } from \"@itwin/core-react\";\n\n/** Properties for the [[ColorPickerPanel]] React component\n * @public @deprecated use `ColorPicker` for itwinui-react\n */\nexport interface ColorPickerPanelProps {\n  activeColor: ColorDef;\n  onColorChange: (selectedColor: ColorDef) => void;\n  colorPresets?: ColorDef[];\n  /** If set show either HSL or RGB input values. If undefined no input value is shown */\n  colorInputType?: \"HSL\" | \"RGB\";\n}\n\n/**\n * Color Picker Dialog to use as modal dialog.\n * @public @deprecated use `ColorPicker` for itwinui-react\n */\n// istanbul ignore next\nexport function ColorPickerPanel({ activeColor, onColorChange, colorPresets, colorInputType }: ColorPickerPanelProps) { // eslint-disable-line deprecation/deprecation\n  const handlePresetColorPick = React.useCallback((newColor: ColorDef, e: React.MouseEvent<Element, MouseEvent>) => {\n    e.preventDefault();\n    if (onColorChange) {\n      onColorChange(newColor);\n    }\n  }, [onColorChange]);\n\n  const handleHueChange = React.useCallback((newHsvColor: HSVColor) => {\n    // for a ColorDef to be created from hsv s can't be 0\n    if (newHsvColor.s === 0) {\n      newHsvColor = newHsvColor.clone(undefined, 0.5);\n    }\n\n    const newColorDef = newHsvColor.toColorDef();\n    if (onColorChange) {\n      onColorChange(newColorDef);\n    }\n  }, [onColorChange]);\n\n  const handleSaturationChange = React.useCallback((newHsvColor: HSVColor) => {\n    const newColorDef = newHsvColor.toColorDef();\n    if (onColorChange) {\n      onColorChange(newColorDef);\n    }\n  }, [onColorChange]);\n\n  const currentHsl = React.useMemo(() => activeColor.toHSL(), [activeColor]);\n  const currentHsv = React.useMemo(() => activeColor.toHSV(), [activeColor]);\n  const color = React.useMemo(() => activeColor.colors, [activeColor]);\n\n  const handleLightnessValueChange = React.useCallback((value: number | undefined, _stringValue: string) => {\n    const newHsl = currentHsl.clone(undefined, undefined, (value ?? 0) / 100);\n\n    if (onColorChange) {\n      const newColorDef = newHsl.toColorDef();\n      onColorChange(newColorDef);\n    }\n  }, [currentHsl, onColorChange]);\n\n  const handleHueValueChange = React.useCallback((value: number | undefined, _stringValue: string) => {\n    const newHsl = currentHsl.clone((value ?? 0) / 360, undefined, undefined);\n\n    if (onColorChange) {\n      const newColorDef = newHsl.toColorDef();\n      onColorChange(newColorDef);\n    }\n  }, [currentHsl, onColorChange]);\n\n  const handleSaturationValueChange = React.useCallback((value: number | undefined, _stringValue: string) => {\n    const newHsl = currentHsl.clone(undefined, (value ?? 0) / 100, undefined);\n\n    if (onColorChange) {\n      const newColorDef = newHsl.toColorDef();\n      onColorChange(newColorDef);\n    }\n  }, [currentHsl, onColorChange]);\n\n  const handleRedChange = React.useCallback((value: number | undefined, _stringValue: string) => {\n    if (undefined !== value) {\n      const newColorDef = ColorDef.from(value, color.g, color.b);\n      if (onColorChange) {\n        onColorChange(newColorDef);\n      }\n    }\n  }, [color, onColorChange]);\n\n  const handleGreenChange = React.useCallback((value: number | undefined, _stringValue: string) => {\n    if (undefined !== value) {\n      const newColorDef = ColorDef.from(color.r, value, color.b);\n      if (onColorChange) {\n        onColorChange(newColorDef);\n      }\n    }\n  }, [color, onColorChange]);\n\n  const handleBlueChange = React.useCallback((value: number | undefined, _stringValue: string) => {\n    if (undefined !== value) {\n      const newColorDef = ColorDef.from(color.r, color.g, value);\n      if (onColorChange) {\n        onColorChange(newColorDef);\n      }\n    }\n  }, [color, onColorChange]);\n\n  return (\n    <div data-testid=\"components-colorpicker-panel\" className=\"components-colorpicker-panel\">\n      <div className=\"components-colorpicker-panel-color\">\n        <div className=\"components-colorpicker-saturation\">\n          <SaturationPicker hsv={currentHsv} onSaturationChange={handleSaturationChange} />\n        </div>\n        <div className=\"components-colorpicker-hue\">\n          <HueSlider hsv={currentHsv} onHueChange={handleHueChange} isHorizontal={false} />\n        </div>\n      </div>\n      {(colorInputType === \"RGB\") &&\n        <div data-testid=\"components-colorpicker-input-panel\" className=\"components-colorpicker-input-panel\">\n          <div className=\"components-colorpicker-input-value-wrapper\">\n            <span className=\"uicore-inputs-labeled-input\">R</span>\n            <NumberInput data-testid=\"components-colorpicker-input-value-red\" value={color.r} onChange={handleRedChange} min={0} max={255} />\n          </div>\n          <div className=\"components-colorpicker-input-value-wrapper\">\n            <span className=\"uicore-inputs-labeled-input\">G</span>\n            <NumberInput data-testid=\"components-colorpicker-input-value-green\" value={color.g} onChange={handleGreenChange} min={0} max={255} />\n          </div>\n          <div className=\"components-colorpicker-input-value-wrapper\">\n            <span className=\"uicore-inputs-labeled-input\">B</span>\n            <NumberInput data-testid=\"components-colorpicker-input-value-blue\" value={color.b} onChange={handleBlueChange} min={0} max={255} />\n          </div>\n        </div>}\n      {(colorInputType === \"HSL\") &&\n        <div data-testid=\"components-colorpicker-input-panel\" className=\"components-colorpicker-input-panel\">\n          <div className=\"components-colorpicker-input-value-wrapper\">\n            <span className=\"uicore-inputs-labeled-input\">H</span>\n            <NumberInput data-testid=\"components-colorpicker-input-value-hue\" value={Math.round(currentHsl.h * 360)} onChange={handleHueValueChange} min={0} max={360} />\n          </div>\n          <div className=\"components-colorpicker-input-value-wrapper\">\n            <span className=\"uicore-inputs-labeled-input\">S</span>\n            <NumberInput data-testid=\"components-colorpicker-input-value-saturation\" value={Math.round(currentHsl.s * 100)} onChange={handleSaturationValueChange} min={0} max={100} />\n          </div>\n          <div className=\"components-colorpicker-input-value-wrapper\">\n            <span className=\"uicore-inputs-labeled-input\">L</span>\n            <NumberInput data-testid=\"components-colorpicker-input-value-lightness\" value={Math.round(currentHsl.l * 100)} onChange={handleLightnessValueChange} min={0} max={100} />\n          </div>\n        </div>}\n\n      {\n        colorPresets && colorPresets.length &&\n        <div className=\"components-colorpicker-panel-presets\">\n          {colorPresets.map((preset, index) => <ColorSwatch className=\"components-colorpicker-panel-swatch\" key={index} colorDef={preset} round={false} onColorPick={handlePresetColorPick} />)}\n        </div>\n      }\n    </div>\n  );\n}\n"]}