@itwin/imodel-components-react 4.17.6 → 5.0.0-dev.3

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

@@ -1,119 +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;
-    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.ColorPickerButton = void 0;
-require("./ColorPickerButton.scss");
-const classnames_1 = __importDefault(require("classnames"));
-const React = __importStar(require("react"));
-const core_common_1 = require("@itwin/core-common");
-const appui_abstract_1 = require("@itwin/appui-abstract");
-const core_react_1 = require("@itwin/core-react");
-const Swatch_1 = require("./Swatch");
-const getCSSColorFromDef_1 = require("./getCSSColorFromDef");
-const itwinui_icons_react_1 = require("@itwin/itwinui-icons-react");
-// cSpell:ignore colorpicker
-function ColorOptions({ handleColorPicked, options, numColumns, round, title, }) {
-    const containerStyle = {
-        gridTemplateColumns: `repeat(${numColumns}, 1fr)`,
-    };
-    return (React.createElement("div", { className: "components-colorpicker-popup-container" },
-        title && React.createElement("h4", null, title),
-        React.createElement("div", { "data-testid": "components-colorpicker-popup-colors", className: "components-colorpicker-popup-colors", style: containerStyle }, options.map((color, index) => (
-        // eslint-disable-next-line deprecation/deprecation
-        React.createElement(Swatch_1.ColorSwatch, { className: "components-colorpicker-swatch", key: index, colorDef: color, onColorPick: handleColorPicked, round: round }))))));
-}
-// Defined using following pattern (const ColorPickerButton at bottom) to ensure useful API documentation is extracted
-const ForwardRefColorPickerButton = React.forwardRef(function ForwardRefColorPickerButton({ className, colorDefs, disabled, dropDownTitle, initialColor, numColumns, onColorPick, readonly, round, showCaret, style, }, ref) {
-    const target = React.useRef(null);
-    const refs = (0, core_react_1.useRefs)(target, ref); // combine ref needed for target with the forwardRef needed by the Parent when parent is a Type Editor.
-    const [showPopup, setShowPopup] = React.useState(false);
-    const [colorDef, setColorDef] = React.useState(initialColor);
-    // See if new initialColor props have changed since component mounted
-    React.useEffect(() => {
-        setColorDef(initialColor);
-    }, [initialColor]);
-    const defaultColors = React.useRef([
-        core_common_1.ColorDef.create(core_common_1.ColorByName.red),
-        core_common_1.ColorDef.create(core_common_1.ColorByName.orange),
-        core_common_1.ColorDef.create(core_common_1.ColorByName.yellow),
-        core_common_1.ColorDef.create(core_common_1.ColorByName.green),
-        core_common_1.ColorDef.create(core_common_1.ColorByName.blue),
-        core_common_1.ColorDef.create(core_common_1.ColorByName.indigo),
-        core_common_1.ColorDef.create(core_common_1.ColorByName.violet),
-        core_common_1.ColorDef.create(core_common_1.ColorByName.black),
-        core_common_1.ColorDef.create(core_common_1.ColorByName.white),
-        core_common_1.ColorDef.create(core_common_1.ColorByName.cyan),
-        core_common_1.ColorDef.create(core_common_1.ColorByName.fuchsia),
-        core_common_1.ColorDef.create(core_common_1.ColorByName.tan),
-        core_common_1.ColorDef.create(core_common_1.ColorByName.gray),
-        core_common_1.ColorDef.create(core_common_1.ColorByName.brown),
-        core_common_1.ColorDef.create(core_common_1.ColorByName.purple),
-        core_common_1.ColorDef.create(core_common_1.ColorByName.olive),
-    ]);
-    const closePopup = React.useCallback(() => {
-        setShowPopup(false);
-    }, []);
-    const togglePopup = React.useCallback(() => {
-        setShowPopup(!showPopup);
-    }, [showPopup]);
-    const handleColorPicked = React.useCallback((color) => {
-        closePopup();
-        if (!color.equals(colorDef)) {
-            setColorDef(color);
-            onColorPick && onColorPick(color);
-        }
-    }, [closePopup, colorDef, onColorPick]);
-    const rgbaString = (0, getCSSColorFromDef_1.getCSSColorFromDef)(colorDef);
-    const buttonStyle = { ...style };
-    const swatchStyle = { backgroundColor: rgbaString };
-    const buttonClassNames = (0, classnames_1.default)("components-colorpicker-button", round && "round", readonly && "readonly", className);
-    const colorOptions = colorDefs && colorDefs.length ? colorDefs : defaultColors.current;
-    return (React.createElement(React.Fragment, null,
-        React.createElement("button", { "data-testid": "components-colorpicker-button", "data-value": rgbaString, onClick: togglePopup, className: buttonClassNames, style: buttonStyle, disabled: disabled, ref: refs },
-            React.createElement("div", { className: "components-colorpicker-button-container" },
-                React.createElement("div", { className: "components-colorpicker-button-color-swatch", style: swatchStyle, "data-testid": showPopup ? "caret-up" : "caret-down" }),
-                showCaret && (
-                // eslint-disable-next-line deprecation/deprecation
-                React.createElement(core_react_1.Icon, { className: "components-caret", iconSpec: showPopup ? React.createElement(itwinui_icons_react_1.SvgCaretUpSmall, null) : React.createElement(itwinui_icons_react_1.SvgCaretDownSmall, null) })))),
-        React.createElement(core_react_1.Popup, { className: "components-colorpicker-popup", isOpen: showPopup, position: appui_abstract_1.RelativePosition.BottomLeft, onClose: closePopup, target: target.current, closeOnNestedPopupOutsideClick: true },
-            React.createElement(ColorOptions, { handleColorPicked: handleColorPicked, options: colorOptions, numColumns: numColumns ?? 4, round: !!round, title: dropDownTitle }))));
-});
-/** ColorPickerButton component
- * @note Using forwardRef so the ColorEditor (Type Editor) can access the ref of the button element inside this component.
- * @beta
- * @deprecated in 4.11.0. Use {@link https://itwinui.bentley.com/docs/colorpicker iTwinUI color picker} instead.
- */
-exports.ColorPickerButton = ForwardRefColorPickerButton;
-//# sourceMappingURL=ColorPickerButton.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"ColorPickerButton.js","sourceRoot":"","sources":["../../../../src/imodel-components-react/color/ColorPickerButton.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\nimport \"./ColorPickerButton.scss\";\nimport classnames from \"classnames\";\nimport * as React from \"react\";\nimport { ColorByName, ColorDef } from \"@itwin/core-common\";\nimport { RelativePosition } from \"@itwin/appui-abstract\";\nimport type { CommonProps } from \"@itwin/core-react\";\nimport { Icon, Popup, useRefs } from \"@itwin/core-react\";\nimport { ColorSwatch } from \"./Swatch\";\nimport { getCSSColorFromDef } from \"./getCSSColorFromDef\";\nimport { SvgCaretDownSmall, SvgCaretUpSmall } from \"@itwin/itwinui-icons-react\";\n\n// cSpell:ignore colorpicker\n\nfunction ColorOptions({\n  handleColorPicked,\n  options,\n  numColumns,\n  round,\n  title,\n}: {\n  handleColorPicked: (color: ColorDef) => void;\n  options: ColorDef[];\n  numColumns: number;\n  round: boolean;\n  title?: string;\n}) {\n  const containerStyle: React.CSSProperties = {\n    gridTemplateColumns: `repeat(${numColumns}, 1fr)`,\n  };\n  return (\n    <div className=\"components-colorpicker-popup-container\">\n      {title && <h4>{title}</h4>}\n      <div\n        data-testid=\"components-colorpicker-popup-colors\"\n        className=\"components-colorpicker-popup-colors\"\n        style={containerStyle}\n      >\n        {options.map((color, index) => (\n          // eslint-disable-next-line deprecation/deprecation\n          <ColorSwatch\n            className=\"components-colorpicker-swatch\"\n            key={index}\n            colorDef={color}\n            onColorPick={handleColorPicked}\n            round={round}\n          />\n        ))}\n      </div>\n    </div>\n  );\n}\n\n/** Properties for the [[ColorPickerButton]] React component\n * @beta\n * @deprecated in 4.11.0. Props of deprecated component {@link ColorPickerButton}.\n */\nexport interface ColorPickerProps\n  extends React.ButtonHTMLAttributes<HTMLButtonElement>,\n    // eslint-disable-next-line deprecation/deprecation\n    CommonProps {\n  /** Active color */\n  initialColor: ColorDef;\n  /** Available colors */\n  colorDefs?: ColorDef[];\n  /** Function to run when user selects color swatch */\n  onColorPick?: ((color: ColorDef) => void) | undefined;\n  /** Show swatches as squares unless round is set to true */\n  round?: boolean;\n  /** Disabled or not */\n  disabled?: boolean;\n  /** Readonly or not */\n  readonly?: boolean;\n  /** Title to show at top of DropDown */\n  dropDownTitle?: string;\n  /** Number of columns */\n  numColumns?: number;\n  /** Provides ability to return reference to HTMLButtonElement */\n  ref?: React.Ref<HTMLButtonElement>;\n  /** If true show up/down caret next to color  */\n  showCaret?: boolean;\n}\n\n// Defined using following pattern (const ColorPickerButton at bottom) to ensure useful API documentation is extracted\nconst ForwardRefColorPickerButton = React.forwardRef<\n  HTMLButtonElement,\n  // eslint-disable-next-line deprecation/deprecation\n  ColorPickerProps\n>(function ForwardRefColorPickerButton(\n  {\n    className,\n    colorDefs,\n    disabled,\n    dropDownTitle,\n    initialColor,\n    numColumns,\n    onColorPick,\n    readonly,\n    round,\n    showCaret,\n    style,\n  },\n  ref\n) {\n  const target = React.useRef<HTMLButtonElement>(null);\n  const refs = useRefs(target, ref); // combine ref needed for target with the forwardRef needed by the Parent when parent is a Type Editor.\n  const [showPopup, setShowPopup] = React.useState(false);\n  const [colorDef, setColorDef] = React.useState(initialColor);\n\n  // See if new initialColor props have changed since component mounted\n  React.useEffect(() => {\n    setColorDef(initialColor);\n  }, [initialColor]);\n\n  const defaultColors = React.useRef([\n    ColorDef.create(ColorByName.red),\n    ColorDef.create(ColorByName.orange),\n    ColorDef.create(ColorByName.yellow),\n    ColorDef.create(ColorByName.green),\n    ColorDef.create(ColorByName.blue),\n    ColorDef.create(ColorByName.indigo),\n    ColorDef.create(ColorByName.violet),\n    ColorDef.create(ColorByName.black),\n    ColorDef.create(ColorByName.white),\n    ColorDef.create(ColorByName.cyan),\n    ColorDef.create(ColorByName.fuchsia),\n    ColorDef.create(ColorByName.tan),\n    ColorDef.create(ColorByName.gray),\n    ColorDef.create(ColorByName.brown),\n    ColorDef.create(ColorByName.purple),\n    ColorDef.create(ColorByName.olive),\n  ]);\n\n  const closePopup = React.useCallback(() => {\n    setShowPopup(false);\n  }, []);\n\n  const togglePopup = React.useCallback(() => {\n    setShowPopup(!showPopup);\n  }, [showPopup]);\n\n  const handleColorPicked = React.useCallback(\n    (color: ColorDef) => {\n      closePopup();\n\n      if (!color.equals(colorDef)) {\n        setColorDef(color);\n        onColorPick && onColorPick(color);\n      }\n    },\n    [closePopup, colorDef, onColorPick]\n  );\n\n  const rgbaString = getCSSColorFromDef(colorDef);\n\n  const buttonStyle = { ...style } as React.CSSProperties;\n  const swatchStyle = { backgroundColor: rgbaString } as React.CSSProperties;\n\n  const buttonClassNames = classnames(\n    \"components-colorpicker-button\",\n    round && \"round\",\n    readonly && \"readonly\",\n    className\n  );\n\n  const colorOptions =\n    colorDefs && colorDefs.length ? colorDefs : defaultColors.current;\n  return (\n    <>\n      <button\n        data-testid=\"components-colorpicker-button\"\n        data-value={rgbaString}\n        onClick={togglePopup}\n        className={buttonClassNames}\n        style={buttonStyle}\n        disabled={disabled}\n        ref={refs}\n      >\n        <div className=\"components-colorpicker-button-container\">\n          <div\n            className=\"components-colorpicker-button-color-swatch\"\n            style={swatchStyle}\n            data-testid={showPopup ? \"caret-up\" : \"caret-down\"}\n          />\n          {showCaret && (\n            // eslint-disable-next-line deprecation/deprecation\n            <Icon\n              className=\"components-caret\"\n              iconSpec={showPopup ? <SvgCaretUpSmall /> : <SvgCaretDownSmall />}\n            />\n          )}\n        </div>\n      </button>\n      {/* eslint-disable-next-line deprecation/deprecation */}\n      <Popup\n        className=\"components-colorpicker-popup\"\n        isOpen={showPopup}\n        position={RelativePosition.BottomLeft}\n        onClose={closePopup}\n        target={target.current}\n        closeOnNestedPopupOutsideClick\n      >\n        <ColorOptions\n          handleColorPicked={handleColorPicked}\n          options={colorOptions}\n          numColumns={numColumns ?? 4}\n          round={!!round}\n          title={dropDownTitle}\n        />\n      </Popup>\n    </>\n  );\n});\n\n/** ColorPickerButton component\n * @note Using forwardRef so the ColorEditor (Type Editor) can access the ref of the button element inside this component.\n * @beta\n * @deprecated in 4.11.0. Use {@link https://itwinui.bentley.com/docs/colorpicker iTwinUI color picker} instead.\n */\nexport const ColorPickerButton: (\n  // eslint-disable-next-line deprecation/deprecation\n  props: ColorPickerProps\n) => React.ReactNode = ForwardRefColorPickerButton;\n"]}

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

@@ -1 +0,0 @@
-{"version":3,"file":"ColorPickerDialog.d.ts","sourceRoot":"","sources":["../../../../src/imodel-components-react/color/ColorPickerDialog.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAEH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EAAE,QAAQ,EAAE,MAAM,oBAAoB,CAAC;AAS9C;;;GAGG;AACH,MAAM,WAAW,sBAAsB;IACrC,WAAW,EAAE,MAAM,CAAC;IACpB,KAAK,EAAE,QAAQ,CAAC;IAChB,UAAU,EAAE,CAAC,aAAa,EAAE,QAAQ,KAAK,IAAI,CAAC;IAC9C,cAAc,EAAE,MAAM,IAAI,CAAC;IAC3B,mCAAmC;IACnC,YAAY,CAAC,EAAE,QAAQ,EAAE,CAAC;IAC1B,6FAA6F;IAC7F,cAAc,CAAC,EAAE,KAAK,GAAG,KAAK,GAAG,KAAK,CAAC;CACxC;AAED;;;;GAIG;AACH,wBAAgB,iBAAiB,CAAC,EAChC,WAAW,EACX,KAAK,EACL,UAAU,EACV,cAAc,EACd,YAAY,EACZ,cAAc,GACf,EACD,sBAAsB,qBA0DrB"}

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

@@ -1,76 +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;
-    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;
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.ColorPickerDialog = void 0;
-const React = __importStar(require("react"));
-const appui_abstract_1 = require("@itwin/appui-abstract");
-const core_react_1 = require("@itwin/core-react");
-const core_common_1 = require("@itwin/core-common");
-const itwinui_react_1 = require("@itwin/itwinui-react");
-/**
- * Color Picker Dialog to use as modal dialog.
- * @beta
- * @deprecated in 4.11.0. Use {@link https://itwinui.bentley.com/docs/colorpicker iTwinUI color picker} instead.
- */
-function ColorPickerDialog({ dialogTitle, color, onOkResult, onCancelResult, colorPresets, colorInputType, }) {
-    const [activeColor, setActiveColor] = React.useState(color);
-    const dialogContainer = React.useRef(null);
-    const handleOk = React.useCallback(() => {
-        onOkResult(activeColor);
-    }, [onOkResult, activeColor]);
-    const handleCancel = React.useCallback(() => {
-        if (onCancelResult)
-            onCancelResult();
-    }, [onCancelResult]);
-    const handleColorChanged = React.useCallback((newColorValue) => {
-        const newColorDef = core_common_1.ColorDef.fromTbgr(newColorValue.toTbgr());
-        setActiveColor(newColorDef);
-    }, []);
-    const buttonCluster = React.useMemo(() => [
-        { type: appui_abstract_1.DialogButtonType.OK, onClick: handleOk },
-        { type: appui_abstract_1.DialogButtonType.Cancel, onClick: handleCancel },
-    ], [handleCancel, handleOk]);
-    const colorOptions = React.useMemo(() => {
-        if (colorPresets) {
-            return colorPresets.map((def) => itwinui_react_1.ColorValue.fromTbgr(def.tbgr));
-        }
-        return undefined;
-    }, [colorPresets]);
-    return (React.createElement("div", { ref: dialogContainer },
-        React.createElement(core_react_1.Dialog, { title: dialogTitle, opened: true, resizable: false, movable: true, modal: true, buttonCluster: buttonCluster, onClose: handleCancel, onEscape: handleCancel, maxWidth: 320 },
-            React.createElement(itwinui_react_1.ColorPicker, { selectedColor: itwinui_react_1.ColorValue.fromTbgr(activeColor.tbgr), onChangeComplete: handleColorChanged },
-                React.createElement(itwinui_react_1.ColorBuilder, null),
-                colorInputType && (React.createElement(itwinui_react_1.ColorInputPanel, { defaultColorFormat: colorInputType })),
-                colorOptions && React.createElement(itwinui_react_1.ColorPalette, { colors: colorOptions })))));
-}
-exports.ColorPickerDialog = ColorPickerDialog;
-//# sourceMappingURL=ColorPickerDialog.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"ColorPickerDialog.js","sourceRoot":"","sources":["../../../../src/imodel-components-react/color/ColorPickerDialog.tsx"],"names":[],"mappings":";AAAA;;;gGAGgG;AAChG;;GAEG;;;;;;;;;;;;;;;;;;;;;;;;;;AAEH,6CAA+B;AAC/B,0DAAyD;AACzD,kDAA2C;AAC3C,oDAA8C;AAC9C,wDAM8B;AAiB9B;;;;GAIG;AACH,SAAgB,iBAAiB,CAAC,EAChC,WAAW,EACX,KAAK,EACL,UAAU,EACV,cAAc,EACd,YAAY,EACZ,cAAc,GAEM;IACpB,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC;IAC5D,MAAM,eAAe,GAAG,KAAK,CAAC,MAAM,CAAiB,IAAI,CAAC,CAAC;IAE3D,MAAM,QAAQ,GAAG,KAAK,CAAC,WAAW,CAAC,GAAG,EAAE;QACtC,UAAU,CAAC,WAAW,CAAC,CAAC;IAC1B,CAAC,EAAE,CAAC,UAAU,EAAE,WAAW,CAAC,CAAC,CAAC;IAC9B,MAAM,YAAY,GAAG,KAAK,CAAC,WAAW,CAAC,GAAG,EAAE;QAC1C,IAAI,cAAc;YAAE,cAAc,EAAE,CAAC;IACvC,CAAC,EAAE,CAAC,cAAc,CAAC,CAAC,CAAC;IAErB,MAAM,kBAAkB,GAAG,KAAK,CAAC,WAAW,CAAC,CAAC,aAAyB,EAAE,EAAE;QACzE,MAAM,WAAW,GAAG,sBAAQ,CAAC,QAAQ,CAAC,aAAa,CAAC,MAAM,EAAE,CAAC,CAAC;QAC9D,cAAc,CAAC,WAAW,CAAC,CAAC;IAC9B,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,MAAM,aAAa,GAAG,KAAK,CAAC,OAAO,CACjC,GAAG,EAAE,CAAC;QACJ,EAAE,IAAI,EAAE,iCAAgB,CAAC,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE;QAChD,EAAE,IAAI,EAAE,iCAAgB,CAAC,MAAM,EAAE,OAAO,EAAE,YAAY,EAAE;KACzD,EACD,CAAC,YAAY,EAAE,QAAQ,CAAC,CACzB,CAAC;IAEF,MAAM,YAAY,GAAG,KAAK,CAAC,OAAO,CAAC,GAAG,EAAE;QACtC,IAAI,YAAY,EAAE,CAAC;YACjB,OAAO,YAAY,CAAC,GAAG,CAAC,CAAC,GAAG,EAAE,EAAE,CAAC,0BAAU,CAAC,QAAQ,CAAC,GAAG,CAAC,IAAI,CAAC,CAAC,CAAC;QAClE,CAAC;QACD,OAAO,SAAS,CAAC;IACnB,CAAC,EAAE,CAAC,YAAY,CAAC,CAAC,CAAC;IAEnB,OAAO,CACL,6BAAK,GAAG,EAAE,eAAe;QAEvB,oBAAC,mBAAM,IACL,KAAK,EAAE,WAAW,EAClB,MAAM,EAAE,IAAI,EACZ,SAAS,EAAE,KAAK,EAChB,OAAO,EAAE,IAAI,EACb,KAAK,EAAE,IAAI,EACX,aAAa,EAAE,aAAa,EAC5B,OAAO,EAAE,YAAY,EACrB,QAAQ,EAAE,YAAY,EACtB,QAAQ,EAAE,GAAG;YAEb,oBAAC,2BAAW,IACV,aAAa,EAAE,0BAAU,CAAC,QAAQ,CAAC,WAAW,CAAC,IAAI,CAAC,EACpD,gBAAgB,EAAE,kBAAkB;gBAEpC,oBAAC,4BAAY,OAAG;gBACf,cAAc,IAAI,CACjB,oBAAC,+BAAe,IAAC,kBAAkB,EAAE,cAAc,GAAI,CACxD;gBACA,YAAY,IAAI,oBAAC,4BAAY,IAAC,MAAM,EAAE,YAAY,GAAI,CAC3C,CACP,CACL,CACP,CAAC;AACJ,CAAC;AAlED,8CAkEC","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\nimport * as React from \"react\";\nimport { DialogButtonType } from \"@itwin/appui-abstract\";\nimport { Dialog } from \"@itwin/core-react\";\nimport { ColorDef } from \"@itwin/core-common\";\nimport {\n  ColorBuilder,\n  ColorInputPanel,\n  ColorPalette,\n  ColorPicker,\n  ColorValue,\n} from \"@itwin/itwinui-react\";\n\n/** Properties for the [[ColorPickerDialog]] React component\n * @beta\n * @deprecated in 4.11.0. Props of deprecated component {@link ColorPickerDialog}.\n */\nexport interface ColorPickerDialogProps {\n  dialogTitle: string;\n  color: ColorDef;\n  onOkResult: (selectedColor: ColorDef) => void;\n  onCancelResult: () => void;\n  /** displayed in rows of 9 items */\n  colorPresets?: ColorDef[];\n  /** If set show either HSL, RGB, or HEX input values. If undefined no input value is shown */\n  colorInputType?: \"hsl\" | \"rgb\" | \"hex\";\n}\n\n/**\n * Color Picker Dialog to use as modal dialog.\n * @beta\n * @deprecated in 4.11.0. Use {@link https://itwinui.bentley.com/docs/colorpicker iTwinUI color picker} instead.\n */\nexport function ColorPickerDialog({\n  dialogTitle,\n  color,\n  onOkResult,\n  onCancelResult,\n  colorPresets,\n  colorInputType,\n}: // eslint-disable-next-line deprecation/deprecation\nColorPickerDialogProps) {\n  const [activeColor, setActiveColor] = React.useState(color);\n  const dialogContainer = React.useRef<HTMLDivElement>(null);\n\n  const handleOk = React.useCallback(() => {\n    onOkResult(activeColor);\n  }, [onOkResult, activeColor]);\n  const handleCancel = React.useCallback(() => {\n    if (onCancelResult) onCancelResult();\n  }, [onCancelResult]);\n\n  const handleColorChanged = React.useCallback((newColorValue: ColorValue) => {\n    const newColorDef = ColorDef.fromTbgr(newColorValue.toTbgr());\n    setActiveColor(newColorDef);\n  }, []);\n\n  const buttonCluster = React.useMemo(\n    () => [\n      { type: DialogButtonType.OK, onClick: handleOk },\n      { type: DialogButtonType.Cancel, onClick: handleCancel },\n    ],\n    [handleCancel, handleOk]\n  );\n\n  const colorOptions = React.useMemo(() => {\n    if (colorPresets) {\n      return colorPresets.map((def) => ColorValue.fromTbgr(def.tbgr));\n    }\n    return undefined;\n  }, [colorPresets]);\n\n  return (\n    <div ref={dialogContainer}>\n      {/* eslint-disable-next-line deprecation/deprecation */}\n      <Dialog\n        title={dialogTitle}\n        opened={true}\n        resizable={false}\n        movable={true}\n        modal={true}\n        buttonCluster={buttonCluster}\n        onClose={handleCancel}\n        onEscape={handleCancel}\n        maxWidth={320}\n      >\n        <ColorPicker\n          selectedColor={ColorValue.fromTbgr(activeColor.tbgr)}\n          onChangeComplete={handleColorChanged}\n        >\n          <ColorBuilder />\n          {colorInputType && (\n            <ColorInputPanel defaultColorFormat={colorInputType} />\n          )}\n          {colorOptions && <ColorPalette colors={colorOptions} />}\n        </ColorPicker>\n      </Dialog>\n    </div>\n  );\n}\n"]}

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

@@ -1 +0,0 @@
-{"version":3,"file":"ColorPickerPopup.d.ts","sourceRoot":"","sources":["../../../../src/imodel-components-react/color/ColorPickerPopup.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAEH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAe,QAAQ,EAAE,MAAM,oBAAoB,CAAC;AAC3D,OAAO,EAAE,gBAAgB,EAAE,MAAM,uBAAuB,CAAC;AACzD,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AASrD,OAAO,yBAAyB,CAAC;AASjC;;;GAGG;AACH,MAAM,WAAW,qBACf,SAAQ,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EAEnD,WAAW;IACb,oBAAoB;IACpB,YAAY,EAAE,QAAQ,CAAC;IACvB;uCACmC;IACnC,SAAS,CAAC,EAAE,QAAQ,EAAE,CAAC;IACvB,uDAAuD;IACvD,aAAa,CAAC,EAAE,CAAC,CAAC,QAAQ,EAAE,QAAQ,KAAK,IAAI,CAAC,GAAG,SAAS,CAAC;IAC3D,gDAAgD;IAChD,OAAO,CAAC,EAAE,CAAC,CAAC,UAAU,EAAE,QAAQ,KAAK,IAAI,CAAC,GAAG,SAAS,CAAC;IACvD,sBAAsB;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,oFAAoF;IACpF,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,qEAAqE;IACrE,aAAa,CAAC,EAAE,gBAAgB,CAAC;IACjC,gEAAgE;IAChE,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,iBAAiB,CAAC,CAAC;IACnC,gDAAgD;IAChD,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,6DAA6D;IAC7D,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,8CAA8C;IAC9C,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,+BAA+B;IAC/B,cAAc,CAAC,EAAE,KAAK,GAAG,KAAK,GAAG,KAAK,CAAC;CACxC;AAgKD;;;;;GAKG;AACH,eAAO,MAAM,gBAAgB,EAAE,CAE7B,KAAK,EAAE,qBAAqB,KACzB,KAAK,CAAC,SAAsC,CAAC"}

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

@@ -1,141 +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;
-    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.ColorPickerPopup = void 0;
-const React = __importStar(require("react"));
-const classnames_1 = __importDefault(require("classnames"));
-const core_common_1 = require("@itwin/core-common");
-const appui_abstract_1 = require("@itwin/appui-abstract");
-const core_react_1 = require("@itwin/core-react");
-const itwinui_react_1 = require("@itwin/itwinui-react");
-require("./ColorPickerPopup.scss");
-const getCSSColorFromDef_1 = require("./getCSSColorFromDef");
-const itwinui_icons_react_1 = require("@itwin/itwinui-icons-react");
-const useTranslation_1 = require("../useTranslation");
-// Defined using following pattern (const ColorPickerPopup at bottom) to ensure useful API documentation is extracted
-const ForwardRefColorPickerPopup = React.forwardRef(function ForwardRefColorPickerPopup(props, ref) {
-    const { translate } = (0, useTranslation_1.useTranslation)();
-    const target = React.useRef(null);
-    const refs = (0, core_react_1.useRefs)(target, ref); // combine ref needed for target with the forwardRef needed by the Parent when parent is a Type Editor.
-    const [showPopup, setShowPopup] = React.useState(false);
-    const [colorDef, setColorDef] = React.useState(props.initialColor);
-    const initialColorRef = React.useRef(props.initialColor);
-    React.useEffect(() => {
-        if (props.initialColor !== initialColorRef.current) {
-            initialColorRef.current = props.initialColor;
-            setColorDef(props.initialColor);
-        }
-    }, [props.initialColor]);
-    const defaultColors = React.useRef([
-        itwinui_react_1.ColorValue.fromTbgr(core_common_1.ColorByName.red),
-        itwinui_react_1.ColorValue.fromTbgr(core_common_1.ColorByName.orange),
-        itwinui_react_1.ColorValue.fromTbgr(core_common_1.ColorByName.yellow),
-        itwinui_react_1.ColorValue.fromTbgr(core_common_1.ColorByName.green),
-        itwinui_react_1.ColorValue.fromTbgr(core_common_1.ColorByName.blue),
-        itwinui_react_1.ColorValue.fromTbgr(core_common_1.ColorByName.mediumBlue),
-        itwinui_react_1.ColorValue.fromTbgr(core_common_1.ColorByName.indigo),
-        itwinui_react_1.ColorValue.fromTbgr(core_common_1.ColorByName.violet),
-        itwinui_react_1.ColorValue.fromTbgr(core_common_1.ColorByName.black),
-        itwinui_react_1.ColorValue.fromTbgr(core_common_1.ColorByName.white),
-        itwinui_react_1.ColorValue.fromTbgr(core_common_1.ColorByName.cyan),
-        itwinui_react_1.ColorValue.fromTbgr(core_common_1.ColorByName.fuchsia),
-        itwinui_react_1.ColorValue.fromTbgr(core_common_1.ColorByName.tan),
-        itwinui_react_1.ColorValue.fromTbgr(core_common_1.ColorByName.gray),
-        itwinui_react_1.ColorValue.fromTbgr(core_common_1.ColorByName.brown),
-        itwinui_react_1.ColorValue.fromTbgr(core_common_1.ColorByName.purple),
-        itwinui_react_1.ColorValue.fromTbgr(core_common_1.ColorByName.olive),
-        itwinui_react_1.ColorValue.fromTbgr(core_common_1.ColorByName.darkGreen),
-    ]);
-    const closePopup = React.useCallback(() => {
-        props.onClose && props.onClose(colorDef);
-        setShowPopup(false);
-    }, [colorDef, props]);
-    const togglePopup = React.useCallback(() => {
-        setShowPopup(!showPopup);
-    }, [showPopup]);
-    const handleColorChanged = React.useCallback((newColorValue) => {
-        const newColor = core_common_1.ColorDef.fromTbgr(newColorValue.toTbgr());
-        if (!newColor.equals(colorDef)) {
-            setColorDef(newColor);
-            props.onColorChange && props.onColorChange(newColor);
-        }
-    }, [colorDef, props]);
-    const rgbaString = (0, getCSSColorFromDef_1.getCSSColorFromDef)(colorDef);
-    const buttonStyle = { ...props.style };
-    const swatchStyle = { backgroundColor: rgbaString };
-    const buttonClassNames = (0, classnames_1.default)("components-colorpicker-popup-button", props.readonly && "readonly", props.className);
-    const clickHandler = (event) => {
-        if (props.captureClicks)
-            event.stopPropagation();
-    };
-    const colorOptions = React.useMemo(() => {
-        if (props.colorDefs && props.colorDefs.length) {
-            return props.colorDefs.map((def) => itwinui_react_1.ColorValue.fromTbgr(def.tbgr));
-        }
-        if (props.colorDefs && 0 === props.colorDefs.length)
-            return undefined;
-        return defaultColors.current;
-    }, [props.colorDefs]);
-    const popupPosition = undefined !== props.popupPosition
-        ? props.popupPosition
-        : appui_abstract_1.RelativePosition.BottomLeft;
-    const closeLabel = translate("color.close");
-    const togglePopupLabel = translate("color.toggleColorPopup");
-    return (
-    /* eslint-disable-next-line jsx-a11y/no-static-element-interactions, jsx-a11y/click-events-have-key-events */
-    React.createElement("div", { onClick: clickHandler },
-        React.createElement("button", { "data-testid": "components-colorpicker-popup-button", onClick: togglePopup, className: buttonClassNames, style: buttonStyle, disabled: props.disabled, ref: refs, title: togglePopupLabel },
-            React.createElement("div", { className: "components-colorpicker-button-container" },
-                React.createElement("div", { className: "components-colorpicker-button-color-swatch", style: swatchStyle, "data-testid": showPopup ? "caret-up" : "caret-down" }),
-                props.showCaret && (
-                // eslint-disable-next-line deprecation/deprecation
-                React.createElement(core_react_1.Icon, { className: "components-caret", iconSpec: showPopup ? React.createElement(itwinui_icons_react_1.SvgCaretUpSmall, null) : React.createElement(itwinui_icons_react_1.SvgCaretDownSmall, null) })))),
-        React.createElement(core_react_1.Popup, { className: "components-colorpicker-popup", isOpen: showPopup, position: popupPosition, onClose: closePopup, target: target.current, closeOnNestedPopupOutsideClick: true },
-            React.createElement("div", { className: "components-colorpicker-popup-panel-padding" },
-                !props.hideCloseButton && (React.createElement("button", { title: closeLabel, className: "core-focus-trap-ignore-initial core-dialog-close icon", "data-testid": "core-dialog-close", onClick: togglePopup },
-                    React.createElement(core_react_1.Icon, { iconSpec: React.createElement(itwinui_icons_react_1.SvgClose, null) }))),
-                React.createElement(itwinui_react_1.ColorPicker, { selectedColor: itwinui_react_1.ColorValue.fromTbgr(colorDef.tbgr), onChangeComplete: handleColorChanged },
-                    React.createElement(itwinui_react_1.ColorBuilder, null),
-                    props.colorInputType && (React.createElement(itwinui_react_1.ColorInputPanel, { defaultColorFormat: props.colorInputType })),
-                    colorOptions && React.createElement(itwinui_react_1.ColorPalette, { colors: colorOptions }))))));
-});
-/**
- * ColorPickerButton component that allows user to select a color from a set of color swatches or to define a new color.
- * @note Using forwardRef so the ColorEditor (Type Editor) can access the ref of the button element inside this component.
- * @public
- * @deprecated in 4.11.0. Use {@link https://itwinui.bentley.com/docs/colorpicker iTwinUI color picker} instead.
- */
-exports.ColorPickerPopup = ForwardRefColorPickerPopup;
-//# sourceMappingURL=ColorPickerPopup.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"ColorPickerPopup.js","sourceRoot":"","sources":["../../../../src/imodel-components-react/color/ColorPickerPopup.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\nimport * as React from \"react\";\nimport classnames from \"classnames\";\nimport { ColorByName, ColorDef } from \"@itwin/core-common\";\nimport { RelativePosition } from \"@itwin/appui-abstract\";\nimport type { CommonProps } from \"@itwin/core-react\";\nimport { Icon, Popup, useRefs } from \"@itwin/core-react\";\nimport {\n  ColorBuilder,\n  ColorInputPanel,\n  ColorPalette,\n  ColorPicker,\n  ColorValue,\n} from \"@itwin/itwinui-react\";\nimport \"./ColorPickerPopup.scss\";\nimport { getCSSColorFromDef } from \"./getCSSColorFromDef\";\nimport {\n  SvgCaretDownSmall,\n  SvgCaretUpSmall,\n  SvgClose,\n} from \"@itwin/itwinui-icons-react\";\nimport { useTranslation } from \"../useTranslation\";\n\n/** Properties for the [[ColorPickerPopup]] React component\n * @public\n * @deprecated in 4.11.0. Props of deprecated component {@link ColorPickerPopup}.\n */\nexport interface ColorPickerPopupProps\n  extends React.ButtonHTMLAttributes<HTMLButtonElement>,\n    // eslint-disable-next-line deprecation/deprecation\n    CommonProps {\n  /** Current color */\n  initialColor: ColorDef;\n  /** Preset colors. Pass undefined to show default preset colors. Pass empty array to show no presets.\n   *  Displayed in rows of 9 items */\n  colorDefs?: ColorDef[];\n  /** Function to call when the color value is changed */\n  onColorChange?: ((newColor: ColorDef) => void) | undefined;\n  /** Function to call when the popup is closed */\n  onClose?: ((colorValue: ColorDef) => void) | undefined;\n  /** Disabled or not */\n  disabled?: boolean;\n  /** Readonly or not, color displayed on button but button will not trigger pop-up */\n  readonly?: boolean;\n  /** popup position. If not set RelativePosition.BottomLeft is used */\n  popupPosition?: RelativePosition;\n  /** Provides ability to return reference to HTMLButtonElement */\n  ref?: React.Ref<HTMLButtonElement>;\n  /** If true show up/down caret next to color  */\n  showCaret?: boolean;\n  /** If true, don't propagate clicks out of the ColorPicker */\n  captureClicks?: boolean;\n  /** If true, don't show close button at top */\n  hideCloseButton?: boolean;\n  /** If set show input values */\n  colorInputType?: \"hsl\" | \"rgb\" | \"hex\";\n}\n\n// Defined using following pattern (const ColorPickerPopup at bottom) to ensure useful API documentation is extracted\n\nconst ForwardRefColorPickerPopup = React.forwardRef<\n  HTMLButtonElement,\n  // eslint-disable-next-line deprecation/deprecation\n  ColorPickerPopupProps\n>(function ForwardRefColorPickerPopup(props, ref) {\n  const { translate } = useTranslation();\n  const target = React.useRef<HTMLButtonElement>(null);\n  const refs = useRefs(target, ref); // combine ref needed for target with the forwardRef needed by the Parent when parent is a Type Editor.\n  const [showPopup, setShowPopup] = React.useState(false);\n  const [colorDef, setColorDef] = React.useState(props.initialColor);\n  const initialColorRef = React.useRef(props.initialColor);\n\n  React.useEffect(() => {\n    if (props.initialColor !== initialColorRef.current) {\n      initialColorRef.current = props.initialColor;\n      setColorDef(props.initialColor);\n    }\n  }, [props.initialColor]);\n\n  const defaultColors = React.useRef([\n    ColorValue.fromTbgr(ColorByName.red),\n    ColorValue.fromTbgr(ColorByName.orange),\n    ColorValue.fromTbgr(ColorByName.yellow),\n    ColorValue.fromTbgr(ColorByName.green),\n    ColorValue.fromTbgr(ColorByName.blue),\n    ColorValue.fromTbgr(ColorByName.mediumBlue),\n    ColorValue.fromTbgr(ColorByName.indigo),\n    ColorValue.fromTbgr(ColorByName.violet),\n    ColorValue.fromTbgr(ColorByName.black),\n    ColorValue.fromTbgr(ColorByName.white),\n    ColorValue.fromTbgr(ColorByName.cyan),\n    ColorValue.fromTbgr(ColorByName.fuchsia),\n    ColorValue.fromTbgr(ColorByName.tan),\n    ColorValue.fromTbgr(ColorByName.gray),\n    ColorValue.fromTbgr(ColorByName.brown),\n    ColorValue.fromTbgr(ColorByName.purple),\n    ColorValue.fromTbgr(ColorByName.olive),\n    ColorValue.fromTbgr(ColorByName.darkGreen),\n  ]);\n\n  const closePopup = React.useCallback(() => {\n    props.onClose && props.onClose(colorDef);\n    setShowPopup(false);\n  }, [colorDef, props]);\n\n  const togglePopup = React.useCallback(() => {\n    setShowPopup(!showPopup);\n  }, [showPopup]);\n\n  const handleColorChanged = React.useCallback(\n    (newColorValue: ColorValue) => {\n      const newColor = ColorDef.fromTbgr(newColorValue.toTbgr());\n      if (!newColor.equals(colorDef)) {\n        setColorDef(newColor);\n\n        props.onColorChange && props.onColorChange(newColor);\n      }\n    },\n    [colorDef, props]\n  );\n\n  const rgbaString = getCSSColorFromDef(colorDef);\n\n  const buttonStyle = { ...props.style } as React.CSSProperties;\n  const swatchStyle = { backgroundColor: rgbaString } as React.CSSProperties;\n  const buttonClassNames = classnames(\n    \"components-colorpicker-popup-button\",\n    props.readonly && \"readonly\",\n    props.className\n  );\n\n  const clickHandler = (event: React.MouseEvent) => {\n    if (props.captureClicks) event.stopPropagation();\n  };\n\n  const colorOptions = React.useMemo(() => {\n    if (props.colorDefs && props.colorDefs.length) {\n      return props.colorDefs.map((def) => ColorValue.fromTbgr(def.tbgr));\n    }\n    if (props.colorDefs && 0 === props.colorDefs.length) return undefined;\n    return defaultColors.current;\n  }, [props.colorDefs]);\n  const popupPosition =\n    undefined !== props.popupPosition\n      ? props.popupPosition\n      : RelativePosition.BottomLeft;\n\n  const closeLabel = translate(\"color.close\");\n  const togglePopupLabel = translate(\"color.toggleColorPopup\");\n\n  return (\n    /* eslint-disable-next-line jsx-a11y/no-static-element-interactions, jsx-a11y/click-events-have-key-events */\n    <div onClick={clickHandler}>\n      <button\n        data-testid=\"components-colorpicker-popup-button\"\n        onClick={togglePopup}\n        className={buttonClassNames}\n        style={buttonStyle}\n        disabled={props.disabled}\n        ref={refs}\n        title={togglePopupLabel}\n      >\n        <div className=\"components-colorpicker-button-container\">\n          <div\n            className=\"components-colorpicker-button-color-swatch\"\n            style={swatchStyle}\n            data-testid={showPopup ? \"caret-up\" : \"caret-down\"}\n          />\n          {props.showCaret && (\n            // eslint-disable-next-line deprecation/deprecation\n            <Icon\n              className=\"components-caret\"\n              iconSpec={showPopup ? <SvgCaretUpSmall /> : <SvgCaretDownSmall />}\n            />\n          )}\n        </div>\n      </button>\n      {/* eslint-disable-next-line deprecation/deprecation */}\n      <Popup\n        className=\"components-colorpicker-popup\"\n        isOpen={showPopup}\n        position={popupPosition}\n        onClose={closePopup}\n        target={target.current}\n        closeOnNestedPopupOutsideClick\n      >\n        <div className=\"components-colorpicker-popup-panel-padding\">\n          {!props.hideCloseButton && (\n            <button\n              title={closeLabel}\n              className={\n                \"core-focus-trap-ignore-initial core-dialog-close icon\"\n              }\n              data-testid=\"core-dialog-close\"\n              onClick={togglePopup}\n            >\n              {/* eslint-disable-next-line deprecation/deprecation */}\n              <Icon iconSpec={<SvgClose />} />\n            </button>\n          )}\n          <ColorPicker\n            selectedColor={ColorValue.fromTbgr(colorDef.tbgr)}\n            onChangeComplete={handleColorChanged}\n          >\n            <ColorBuilder />\n            {props.colorInputType && (\n              <ColorInputPanel defaultColorFormat={props.colorInputType} />\n            )}\n            {colorOptions && <ColorPalette colors={colorOptions} />}\n          </ColorPicker>\n        </div>\n      </Popup>\n    </div>\n  );\n});\n\n/**\n * ColorPickerButton component that allows user to select a color from a set of color swatches or to define a new color.\n * @note Using forwardRef so the ColorEditor (Type Editor) can access the ref of the button element inside this component.\n * @public\n * @deprecated in 4.11.0. Use {@link https://itwinui.bentley.com/docs/colorpicker iTwinUI color picker} instead.\n */\nexport const ColorPickerPopup: (\n  // eslint-disable-next-line deprecation/deprecation\n  props: ColorPickerPopupProps\n) => React.ReactNode = ForwardRefColorPickerPopup;\n"]}

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

@@ -1 +0,0 @@
-{"version":3,"file":"HueSlider.d.ts","sourceRoot":"","sources":["../../../../src/imodel-components-react/color/HueSlider.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAEH,OAAO,kBAAkB,CAAC;AAE1B,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,oBAAoB,CAAC;AACnD,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AA2DrD;;;GAGG;AACH,MAAM,WAAW,cACf,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAE1C,WAAW;IACb,kFAAkF;IAClF,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,+CAA+C;IAC/C,WAAW,CAAC,EAAE,CAAC,CAAC,GAAG,EAAE,QAAQ,KAAK,IAAI,CAAC,GAAG,SAAS,CAAC;IACpD,sBAAsB;IACtB,GAAG,EAAE,QAAQ,CAAC;CACf;AAED;;;GAGG;AACH,wBAAgB,SAAS,CAAC,EACxB,YAAY,EACZ,WAAW,EACX,GAAG,EACH,SAAS,EACT,KAAK,GACN,EACD,cAAc,qBAwKb"}

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

@@ -1,201 +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;
-    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.HueSlider = void 0;
-require("./HueSlider.scss");
-const classnames_1 = __importDefault(require("classnames"));
-const React = __importStar(require("react"));
-const ts_key_enum_1 = require("ts-key-enum");
-const useTranslation_1 = require("../useTranslation");
-// hue is a value from 0 to 360
-function calculateHue(currentPos, high, isVertical) {
-    if (currentPos <= 0) {
-        return isVertical ? 359 : 0;
-    }
-    else if (currentPos >= high) {
-        return isVertical ? 0 : 359;
-    }
-    else {
-        let percent = (currentPos * 100) / high;
-        if (isVertical)
-            percent = 100 - percent;
-        return Math.round((359 * percent) / 100);
-    }
-}
-function calculateChange(currentHue, e, isHorizontal, container) {
-    const { width: containerWidth, height: containerHeight, top: containerTop, left: containerLeft, } = container.getBoundingClientRect();
-    let x;
-    if ("pageX" in e) {
-        x = e.pageX;
-    }
-    else {
-        if (undefined === e.touches || 0 === e.touches.length)
-            return currentHue;
-        x = e.touches[0].pageX;
-    }
-    if (undefined === x)
-        return currentHue;
-    let y;
-    if ("pageY" in e) {
-        y = e.pageY;
-    }
-    else {
-        if (undefined === e.touches || 0 === e.touches.length)
-            return currentHue;
-        y = e.touches[0].pageY;
-    }
-    if (undefined === y)
-        return currentHue;
-    const pointerX = x - (containerLeft + window.scrollX);
-    const pointerY = y - (containerTop + window.scrollY);
-    if (!isHorizontal) {
-        // vertical
-        return calculateHue(pointerY, containerHeight, true);
-    }
-    else {
-        // horizontal
-        return calculateHue(pointerX, containerWidth, false);
-    }
-}
-/** HueSlider component used to set the hue value.
- * @beta
- * @deprecated in 4.11.0. Use {@link https://itwinui.bentley.com/docs/colorpicker iTwinUI color picker} instead.
- */
-function HueSlider({ isHorizontal, onHueChange, hsv, className, style, }) {
-    const { translate } = (0, useTranslation_1.useTranslation)();
-    const container = React.useRef(null);
-    const isDragging = React.useRef(false);
-    const onChange = React.useCallback((e) => {
-        if (container.current) {
-            const newHue = calculateChange(hsv.h, e, !!isHorizontal, container.current);
-            const newColor = hsv.clone(newHue);
-            if (onHueChange)
-                onHueChange(newColor);
-        }
-    }, [isHorizontal, hsv, onHueChange]);
-    const onDragging = React.useCallback((e) => {
-        if (isDragging.current) {
-            onChange(e);
-        }
-    }, [onChange]);
-    const onMouseUp = React.useCallback(() => {
-        if (isDragging.current) {
-            isDragging.current = false;
-        }
-    }, []);
-    const onTouchEnd = React.useCallback((event) => {
-        event.preventDefault();
-        if (isDragging.current) {
-            onChange(event);
-            isDragging.current = false;
-        }
-    }, [onChange]);
-    const onMouseDown = React.useCallback((e) => {
-        e.preventDefault();
-        if (e.target !== e.currentTarget) {
-            if (!isDragging.current) {
-                document.addEventListener("mouseup", onMouseUp, {
-                    capture: true,
-                    once: true,
-                });
-                isDragging.current = true;
-            }
-        }
-        onChange(e);
-        if (container.current)
-            container.current.focus();
-    }, [onChange, onMouseUp]);
-    const onTouchStart = React.useCallback((e) => {
-        if (e.target !== e.currentTarget)
-            isDragging.current = true;
-        onChange(e);
-        if (container.current)
-            container.current.focus();
-    }, [onChange]);
-    const onKeyDown = React.useCallback((evt) => {
-        let newHue;
-        const hueValue = hsv.h;
-        if (evt.key === ts_key_enum_1.Key.ArrowLeft.valueOf() ||
-            evt.key === ts_key_enum_1.Key.ArrowDown.valueOf()) {
-            newHue = hueValue - (evt.ctrlKey ? 10 : 1);
-        }
-        else if (evt.key === ts_key_enum_1.Key.ArrowRight.valueOf() ||
-            evt.key === ts_key_enum_1.Key.ArrowUp.valueOf()) {
-            newHue = hueValue + (evt.ctrlKey ? 10 : 1);
-        }
-        else if (evt.key === ts_key_enum_1.Key.PageDown.valueOf()) {
-            newHue = hueValue - (evt.ctrlKey ? 180 : 60);
-        }
-        else if (evt.key === ts_key_enum_1.Key.PageUp.valueOf()) {
-            newHue = hueValue + (evt.ctrlKey ? 180 : 60);
-        }
-        else if (evt.key === ts_key_enum_1.Key.Home.valueOf()) {
-            newHue = 0;
-        }
-        else {
-            if (evt.key === ts_key_enum_1.Key.End.valueOf()) {
-                newHue = 359;
-            }
-        }
-        if (undefined !== newHue) {
-            if (newHue > 359)
-                newHue = 359; // 360 is same as zero
-            if (newHue < 0)
-                newHue = 0;
-            const newColor = hsv.clone(newHue);
-            if (onHueChange)
-                onHueChange(newColor);
-            evt.preventDefault();
-        }
-    }, [hsv, onHueChange]);
-    const containerClasses = (0, classnames_1.default)(isHorizontal
-        ? "components-hue-container-horizontal"
-        : "components-hue-container-vertical", className);
-    const pointerStyle = isHorizontal
-        ? {
-            left: `${(hsv.h * 100) / 360}%`,
-            backgroundColor: `hsl(${hsv.h} ,100%, 50%)`,
-        }
-        : {
-            left: `0px`,
-            top: `${-((hsv.h * 100) / 360) + 100}%`,
-            backgroundColor: `hsl(${hsv.h} ,100%, 50%)`,
-        };
-    return (React.createElement("div", { className: containerClasses, style: style, "data-testid": "hue-container" },
-        React.createElement("div", { "data-testid": "hue-slider", role: "slider", "aria-label": translate("color.hue"), "aria-valuemin": 0, "aria-valuemax": 360, "aria-valuenow": hsv.h, className: "components-hue-slider", ref: container, onMouseDown: onMouseDown, onMouseMove: onDragging, onTouchMove: onDragging, onMouseUp: onMouseUp, onTouchStart: onTouchStart, onTouchEnd: onTouchEnd, tabIndex: 0, onKeyDown: onKeyDown },
-            React.createElement("div", { style: pointerStyle, className: "components-hue-pointer", "data-testid": "hue-pointer" }))));
-}
-exports.HueSlider = HueSlider;
-//# sourceMappingURL=HueSlider.js.map