@itwin/imodel-components-react 4.0.0-dev.10 → 4.0.0-dev.11

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

@@ -1,94 +1,94 @@
-/*---------------------------------------------------------------------------------------------
-* 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;
-    }
-  }
+/*---------------------------------------------------------------------------------------------
+* 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 var(--iui-color-border-foreground);
+  justify-items: center;
+
+  .components-colorpicker-panel-swatch {
+    width: 2em;
+    height: 2em;
+    padding: 0;
+    border-color: var(--iui-color-border-foreground);
+  }
+}
+
+.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/cjs/imodel-components-react/color/ColorPickerPopup.d.ts

@@ -1,45 +1,45 @@
-/** @packageDocumentation
- * @module Color
- */
-import * as React from "react";
-import { ColorDef } from "@itwin/core-common";
-import { RelativePosition } from "@itwin/appui-abstract";
-import { CommonProps } from "@itwin/core-react";
-import "./ColorPickerPopup.scss";
-/** Properties for the [[ColorPickerPopup]] React component
- * @public
- */
-export interface ColorPickerPopupProps extends React.ButtonHTMLAttributes<HTMLButtonElement>, CommonProps {
-    /** Current color */
-    initialColor: ColorDef;
-    /** Preset colors. Pass undefined to show default preset colors. Pass empty array to show no presets.
-     *  Displayed in rows of 9 items */
-    colorDefs?: ColorDef[];
-    /** Function to call when the color value is changed */
-    onColorChange?: ((newColor: ColorDef) => void) | undefined;
-    /** Function to call when the popup is closed */
-    onClose?: ((colorValue: ColorDef) => void) | undefined;
-    /** Disabled or not */
-    disabled?: boolean;
-    /** Readonly or not, color displayed on button but button will not trigger pop-up */
-    readonly?: boolean;
-    /** popup position. If not set RelativePosition.BottomLeft is used */
-    popupPosition?: RelativePosition;
-    /** Provides ability to return reference to HTMLButtonElement */
-    ref?: React.Ref<HTMLButtonElement>;
-    /** If true show up/down caret next to color  */
-    showCaret?: boolean;
-    /** If true, don't propagate clicks out of the ColorPicker */
-    captureClicks?: boolean;
-    /** If true, don't show close button at top */
-    hideCloseButton?: boolean;
-    /** If set show input values */
-    colorInputType?: "hsl" | "rgb" | "hex";
-}
-/**
- * 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
- */
-export declare const ColorPickerPopup: (props: ColorPickerPopupProps) => JSX.Element | null;
+/** @packageDocumentation
+ * @module Color
+ */
+import * as React from "react";
+import { ColorDef } from "@itwin/core-common";
+import { RelativePosition } from "@itwin/appui-abstract";
+import { CommonProps } from "@itwin/core-react";
+import "./ColorPickerPopup.scss";
+/** Properties for the [[ColorPickerPopup]] React component
+ * @public
+ */
+export interface ColorPickerPopupProps extends React.ButtonHTMLAttributes<HTMLButtonElement>, CommonProps {
+    /** Current color */
+    initialColor: ColorDef;
+    /** Preset colors. Pass undefined to show default preset colors. Pass empty array to show no presets.
+     *  Displayed in rows of 9 items */
+    colorDefs?: ColorDef[];
+    /** Function to call when the color value is changed */
+    onColorChange?: ((newColor: ColorDef) => void) | undefined;
+    /** Function to call when the popup is closed */
+    onClose?: ((colorValue: ColorDef) => void) | undefined;
+    /** Disabled or not */
+    disabled?: boolean;
+    /** Readonly or not, color displayed on button but button will not trigger pop-up */
+    readonly?: boolean;
+    /** popup position. If not set RelativePosition.BottomLeft is used */
+    popupPosition?: RelativePosition;
+    /** Provides ability to return reference to HTMLButtonElement */
+    ref?: React.Ref<HTMLButtonElement>;
+    /** If true show up/down caret next to color  */
+    showCaret?: boolean;
+    /** If true, don't propagate clicks out of the ColorPicker */
+    captureClicks?: boolean;
+    /** If true, don't show close button at top */
+    hideCloseButton?: boolean;
+    /** If set show input values */
+    colorInputType?: "hsl" | "rgb" | "hex";
+}
+/**
+ * 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
+ */
+export declare const ColorPickerPopup: (props: ColorPickerPopupProps) => JSX.Element | null;
 //# sourceMappingURL=ColorPickerPopup.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"ColorPickerPopup.d.ts","sourceRoot":"","sources":["../../../../src/imodel-components-react/color/ColorPickerPopup.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAIH,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,EAAE,WAAW,EAA+B,MAAM,mBAAmB,CAAC;AAG7E,OAAO,yBAAyB,CAAC;AAIjC;;GAEG;AACH,MAAM,WAAW,qBAAsB,SAAQ,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EAAE,WAAW;IACvG,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;AAiID;;;;GAIG;AACH,eAAO,MAAM,gBAAgB,EAAE,CAAC,KAAK,EAAE,qBAAqB,KAAK,GAAG,CAAC,OAAO,GAAG,IAAiC,CAAC"}
+{"version":3,"file":"ColorPickerPopup.d.ts","sourceRoot":"","sources":["../../../../src/imodel-components-react/color/ColorPickerPopup.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAIH,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,EAAE,WAAW,EAAwB,MAAM,mBAAmB,CAAC;AAGtE,OAAO,yBAAyB,CAAC;AAKjC;;GAEG;AACH,MAAM,WAAW,qBAAsB,SAAQ,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EAAE,WAAW;IACvG,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;AAiID;;;;GAIG;AACH,eAAO,MAAM,gBAAgB,EAAE,CAAC,KAAK,EAAE,qBAAqB,KAAK,GAAG,CAAC,OAAO,GAAG,IAAiC,CAAC"}

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

@@ -1,138 +1,140 @@
-"use strict";
-/*---------------------------------------------------------------------------------------------
-* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
-* See LICENSE.md in the project root for license terms and full copyright notice.
-*--------------------------------------------------------------------------------------------*/
-/** @packageDocumentation
- * @module Color
- */
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.ColorPickerPopup = void 0;
-// cSpell:ignore colorpicker
-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");
-// import { ColorPickerPanel } from "./ColorPickerPanel";
-const itwinui_react_1 = require("@itwin/itwinui-react");
-require("./ColorPickerPopup.scss");
-const getCSSColorFromDef_1 = require("./getCSSColorFromDef");
-const UiIModelComponents_1 = require("../UiIModelComponents");
-// Defined using following pattern (const ColorPickerPopup at bottom) to ensure useful API documentation is extracted
-const ForwardRefColorPickerPopup = React.forwardRef(function ForwardRefColorPickerPopup(props, 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(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),
-    ]);
-    // istanbul ignore next
-    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());
-        // istanbul ignore else
-        if (!newColor.equals(colorDef)) {
-            setColorDef(newColor);
-            // istanbul ignore else
-            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) => {
-        // istanbul ignore else
-        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] = React.useState(() => UiIModelComponents_1.UiIModelComponents.translate("color.close"));
-    const [togglePopupLabel] = React.useState(() => UiIModelComponents_1.UiIModelComponents.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 }),
-                props.showCaret && React.createElement(core_react_1.WebFontIcon, { className: "components-caret", iconName: showPopup ? "icon-caret-up" : "icon-caret-down", iconSize: "x-small" }))),
-        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 icon-close", "data-testid": "core-dialog-close", onClick: togglePopup }),
-                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
- */
-exports.ColorPickerPopup = ForwardRefColorPickerPopup;
+"use strict";
+/*---------------------------------------------------------------------------------------------
+* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+* See LICENSE.md in the project root for license terms and full copyright notice.
+*--------------------------------------------------------------------------------------------*/
+/** @packageDocumentation
+ * @module Color
+ */
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ColorPickerPopup = void 0;
+// cSpell:ignore colorpicker
+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");
+// import { ColorPickerPanel } from "./ColorPickerPanel";
+const itwinui_react_1 = require("@itwin/itwinui-react");
+require("./ColorPickerPopup.scss");
+const getCSSColorFromDef_1 = require("./getCSSColorFromDef");
+const UiIModelComponents_1 = require("../UiIModelComponents");
+const itwinui_icons_react_1 = require("@itwin/itwinui-icons-react");
+// Defined using following pattern (const ColorPickerPopup at bottom) to ensure useful API documentation is extracted
+const ForwardRefColorPickerPopup = React.forwardRef(function ForwardRefColorPickerPopup(props, 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(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),
+    ]);
+    // istanbul ignore next
+    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());
+        // istanbul ignore else
+        if (!newColor.equals(colorDef)) {
+            setColorDef(newColor);
+            // istanbul ignore else
+            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) => {
+        // istanbul ignore else
+        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] = React.useState(() => UiIModelComponents_1.UiIModelComponents.translate("color.close"));
+    const [togglePopupLabel] = React.useState(() => UiIModelComponents_1.UiIModelComponents.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 && 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
+ */
+exports.ColorPickerPopup = ForwardRefColorPickerPopup;
 //# sourceMappingURL=ColorPickerPopup.js.map