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

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

@@ -1,108 +1,113 @@
-"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.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");
-// 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) => 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();
-        // istanbul ignore else
-        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 }),
-                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: appui_abstract_1.RelativePosition.BottomLeft, onClose: closePopup, target: target.current, closeOnNestedPopupOutsideClick: true },
-            React.createElement(ColorOptions, { handleColorPicked: handleColorPicked, options: colorOptions, numColumns: numColumns !== null && numColumns !== void 0 ? 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
- */
-exports.ColorPickerButton = ForwardRefColorPickerButton;
+"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) => 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();
+        // istanbul ignore else
+        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 && 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 !== null && numColumns !== void 0 ? 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
+ */
+exports.ColorPickerButton = ForwardRefColorPickerButton;
 //# sourceMappingURL=ColorPickerButton.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"ColorPickerButton.js","sourceRoot":"","sources":["../../../../src/imodel-components-react/color/ColorPickerButton.tsx"],"names":[],"mappings":"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","sourcesContent":["/*---------------------------------------------------------------------------------------------\r\n* Copyright (c) Bentley Systems, Incorporated. All rights reserved.\r\n* See LICENSE.md in the project root for license terms and full copyright notice.\r\n*--------------------------------------------------------------------------------------------*/\r\n/** @packageDocumentation\r\n * @module Color\r\n */\r\n\r\nimport \"./ColorPickerButton.scss\";\r\nimport classnames from \"classnames\";\r\nimport * as React from \"react\";\r\nimport { ColorByName, ColorDef } from \"@itwin/core-common\";\r\nimport { RelativePosition } from \"@itwin/appui-abstract\";\r\nimport { CommonProps, Popup, useRefs, WebFontIcon } from \"@itwin/core-react\";\r\nimport { ColorSwatch } from \"./Swatch\";\r\nimport { getCSSColorFromDef } from \"./getCSSColorFromDef\";\r\n\r\n// cSpell:ignore colorpicker\r\n\r\nfunction ColorOptions({ handleColorPicked, options, numColumns, round, title }: { handleColorPicked: ((color: ColorDef) => void), options: ColorDef[], numColumns: number, round: boolean, title?: string }) {\r\n  const containerStyle: React.CSSProperties = { gridTemplateColumns: `repeat(${numColumns}, 1fr)` };\r\n  return (\r\n    <div className=\"components-colorpicker-popup-container\">\r\n      {title && <h4>{title}</h4>}\r\n      <div data-testid=\"components-colorpicker-popup-colors\" className=\"components-colorpicker-popup-colors\" style={containerStyle}>\r\n        {options.map((color, index) => <ColorSwatch className=\"components-colorpicker-swatch\" key={index} colorDef={color}\r\n          onColorPick={handleColorPicked} round={round} />)}\r\n      </div>\r\n    </div>\r\n  );\r\n}\r\n\r\n/** Properties for the [[ColorPickerButton]] React component\r\n * @beta\r\n */\r\nexport interface ColorPickerProps extends React.ButtonHTMLAttributes<HTMLButtonElement>, CommonProps {\r\n  /** Active color */\r\n  initialColor: ColorDef;\r\n  /** Available colors */\r\n  colorDefs?: ColorDef[];\r\n  /** Function to run when user selects color swatch */\r\n  onColorPick?: ((color: ColorDef) => void) | undefined;\r\n  /** Show swatches as squares unless round is set to true */\r\n  round?: boolean;\r\n  /** Disabled or not */\r\n  disabled?: boolean;\r\n  /** Readonly or not */\r\n  readonly?: boolean;\r\n  /** Title to show at top of DropDown */\r\n  dropDownTitle?: string;\r\n  /** Number of columns */\r\n  numColumns?: number;\r\n  /** Provides ability to return reference to HTMLButtonElement */\r\n  ref?: React.Ref<HTMLButtonElement>;\r\n  /** If true show up/down caret next to color  */\r\n  showCaret?: boolean;\r\n}\r\n\r\n// Defined using following pattern (const ColorPickerButton at bottom) to ensure useful API documentation is extracted\r\nconst ForwardRefColorPickerButton = React.forwardRef<HTMLButtonElement, ColorPickerProps>(\r\n  function ForwardRefColorPickerButton({ className, colorDefs, disabled, dropDownTitle, initialColor, numColumns, onColorPick, readonly, round, showCaret, style }, ref) {\r\n    const target = React.useRef<HTMLButtonElement>(null);\r\n    const refs = useRefs(target, ref);  // combine ref needed for target with the forwardRef needed by the Parent when parent is a Type Editor.\r\n    const [showPopup, setShowPopup] = React.useState(false);\r\n    const [colorDef, setColorDef] = React.useState(initialColor);\r\n\r\n    // See if new initialColor props have changed since component mounted\r\n    React.useEffect(() => {\r\n      setColorDef(initialColor);\r\n    }, [initialColor]);\r\n\r\n    const defaultColors = React.useRef(\r\n      [\r\n        ColorDef.create(ColorByName.red),\r\n        ColorDef.create(ColorByName.orange),\r\n        ColorDef.create(ColorByName.yellow),\r\n        ColorDef.create(ColorByName.green),\r\n        ColorDef.create(ColorByName.blue),\r\n        ColorDef.create(ColorByName.indigo),\r\n        ColorDef.create(ColorByName.violet),\r\n        ColorDef.create(ColorByName.black),\r\n        ColorDef.create(ColorByName.white),\r\n        ColorDef.create(ColorByName.cyan),\r\n        ColorDef.create(ColorByName.fuchsia),\r\n        ColorDef.create(ColorByName.tan),\r\n        ColorDef.create(ColorByName.gray),\r\n        ColorDef.create(ColorByName.brown),\r\n        ColorDef.create(ColorByName.purple),\r\n        ColorDef.create(ColorByName.olive),\r\n      ]);\r\n\r\n    const closePopup = React.useCallback(() => {\r\n      setShowPopup(false);\r\n    }, []);\r\n\r\n    const togglePopup = React.useCallback(() => {\r\n      setShowPopup(!showPopup);\r\n    }, [showPopup]);\r\n\r\n    const handleColorPicked = React.useCallback((color: ColorDef) => {\r\n      closePopup();\r\n\r\n      // istanbul ignore else\r\n      if (!color.equals(colorDef)) {\r\n        setColorDef(color);\r\n        onColorPick && onColorPick(color);\r\n      }\r\n    }, [closePopup, colorDef, onColorPick]);\r\n\r\n    const rgbaString = getCSSColorFromDef(colorDef);\r\n\r\n    const buttonStyle = { ...style } as React.CSSProperties;\r\n    const swatchStyle = { backgroundColor: rgbaString } as React.CSSProperties;\r\n\r\n    const buttonClassNames = classnames(\"components-colorpicker-button\",\r\n      round && \"round\",\r\n      readonly && \"readonly\",\r\n      className,\r\n    );\r\n\r\n    const colorOptions = colorDefs && colorDefs.length ? colorDefs : defaultColors.current;\r\n    return (\r\n      <>\r\n        <button data-testid=\"components-colorpicker-button\" data-value={rgbaString} onClick={togglePopup} className={buttonClassNames}\r\n          style={buttonStyle} disabled={disabled} ref={refs} >\r\n          <div className=\"components-colorpicker-button-container\">\r\n            <div className=\"components-colorpicker-button-color-swatch\" style={swatchStyle} />\r\n            {showCaret && <WebFontIcon className=\"components-caret\" iconName={showPopup ? \"icon-caret-up\" : \"icon-caret-down\"} iconSize=\"x-small\" />}\r\n          </div>\r\n        </button>\r\n        <Popup\r\n          className=\"components-colorpicker-popup\"\r\n          isOpen={showPopup}\r\n          position={RelativePosition.BottomLeft}\r\n          onClose={closePopup}\r\n          target={target.current}\r\n          closeOnNestedPopupOutsideClick\r\n        >\r\n          <ColorOptions handleColorPicked={handleColorPicked} options={colorOptions} numColumns={numColumns ?? 4} round={!!round} title={dropDownTitle} />\r\n        </Popup>\r\n      </>\r\n    );\r\n  }\r\n);\r\n\r\n/** ColorPickerButton component\r\n * @note Using forwardRef so the ColorEditor (Type Editor) can access the ref of the button element inside this component.\r\n * @beta\r\n */\r\nexport const ColorPickerButton: (props: ColorPickerProps) => JSX.Element | null = ForwardRefColorPickerButton;\r\n\r\n"]}
+{"version":3,"file":"ColorPickerButton.js","sourceRoot":"","sources":["../../../../src/imodel-components-react/color/ColorPickerButton.tsx"],"names":[],"mappings":";AAAA;;;+FAG+F;AAC/F;;GAEG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAEH,oCAAkC;AAClC,4DAAoC;AACpC,6CAA+B;AAC/B,oDAA2D;AAC3D,0DAAyD;AACzD,kDAAsE;AACtE,qCAAuC;AACvC,6DAA0D;AAC1D,oEAAgF;AAEhF,4BAA4B;AAE5B,SAAS,YAAY,CAAC,EAAE,iBAAiB,EAAE,OAAO,EAAE,UAAU,EAAE,KAAK,EAAE,KAAK,EAA+H;IACzM,MAAM,cAAc,GAAwB,EAAE,mBAAmB,EAAE,UAAU,UAAU,QAAQ,EAAE,CAAC;IAClG,OAAO,CACL,6BAAK,SAAS,EAAC,wCAAwC;QACpD,KAAK,IAAI,gCAAK,KAAK,CAAM;QAC1B,4CAAiB,qCAAqC,EAAC,SAAS,EAAC,qCAAqC,EAAC,KAAK,EAAE,cAAc,IACzH,OAAO,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,KAAK,EAAE,EAAE,CAAC,oBAAC,oBAAW,IAAC,SAAS,EAAC,+BAA+B,EAAC,GAAG,EAAE,KAAK,EAAE,QAAQ,EAAE,KAAK,EAC/G,WAAW,EAAE,iBAAiB,EAAE,KAAK,EAAE,KAAK,GAAI,CAAC,CAC/C,CACF,CACP,CAAC;AACJ,CAAC;AA4BD,sHAAsH;AACtH,MAAM,2BAA2B,GAAG,KAAK,CAAC,UAAU,CAClD,SAAS,2BAA2B,CAAC,EAAE,SAAS,EAAE,SAAS,EAAE,QAAQ,EAAE,aAAa,EAAE,YAAY,EAAE,UAAU,EAAE,WAAW,EAAE,QAAQ,EAAE,KAAK,EAAE,SAAS,EAAE,KAAK,EAAE,EAAE,GAAG;IACnK,MAAM,MAAM,GAAG,KAAK,CAAC,MAAM,CAAoB,IAAI,CAAC,CAAC;IACrD,MAAM,IAAI,GAAG,IAAA,oBAAO,EAAC,MAAM,EAAE,GAAG,CAAC,CAAC,CAAE,uGAAuG;IAC3I,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC;IACxD,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,YAAY,CAAC,CAAC;IAE7D,qEAAqE;IACrE,KAAK,CAAC,SAAS,CAAC,GAAG,EAAE;QACnB,WAAW,CAAC,YAAY,CAAC,CAAC;IAC5B,CAAC,EAAE,CAAC,YAAY,CAAC,CAAC,CAAC;IAEnB,MAAM,aAAa,GAAG,KAAK,CAAC,MAAM,CAChC;QACE,sBAAQ,CAAC,MAAM,CAAC,yBAAW,CAAC,GAAG,CAAC;QAChC,sBAAQ,CAAC,MAAM,CAAC,yBAAW,CAAC,MAAM,CAAC;QACnC,sBAAQ,CAAC,MAAM,CAAC,yBAAW,CAAC,MAAM,CAAC;QACnC,sBAAQ,CAAC,MAAM,CAAC,yBAAW,CAAC,KAAK,CAAC;QAClC,sBAAQ,CAAC,MAAM,CAAC,yBAAW,CAAC,IAAI,CAAC;QACjC,sBAAQ,CAAC,MAAM,CAAC,yBAAW,CAAC,MAAM,CAAC;QACnC,sBAAQ,CAAC,MAAM,CAAC,yBAAW,CAAC,MAAM,CAAC;QACnC,sBAAQ,CAAC,MAAM,CAAC,yBAAW,CAAC,KAAK,CAAC;QAClC,sBAAQ,CAAC,MAAM,CAAC,yBAAW,CAAC,KAAK,CAAC;QAClC,sBAAQ,CAAC,MAAM,CAAC,yBAAW,CAAC,IAAI,CAAC;QACjC,sBAAQ,CAAC,MAAM,CAAC,yBAAW,CAAC,OAAO,CAAC;QACpC,sBAAQ,CAAC,MAAM,CAAC,yBAAW,CAAC,GAAG,CAAC;QAChC,sBAAQ,CAAC,MAAM,CAAC,yBAAW,CAAC,IAAI,CAAC;QACjC,sBAAQ,CAAC,MAAM,CAAC,yBAAW,CAAC,KAAK,CAAC;QAClC,sBAAQ,CAAC,MAAM,CAAC,yBAAW,CAAC,MAAM,CAAC;QACnC,sBAAQ,CAAC,MAAM,CAAC,yBAAW,CAAC,KAAK,CAAC;KACnC,CAAC,CAAC;IAEL,MAAM,UAAU,GAAG,KAAK,CAAC,WAAW,CAAC,GAAG,EAAE;QACxC,YAAY,CAAC,KAAK,CAAC,CAAC;IACtB,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,MAAM,WAAW,GAAG,KAAK,CAAC,WAAW,CAAC,GAAG,EAAE;QACzC,YAAY,CAAC,CAAC,SAAS,CAAC,CAAC;IAC3B,CAAC,EAAE,CAAC,SAAS,CAAC,CAAC,CAAC;IAEhB,MAAM,iBAAiB,GAAG,KAAK,CAAC,WAAW,CAAC,CAAC,KAAe,EAAE,EAAE;QAC9D,UAAU,EAAE,CAAC;QAEb,uBAAuB;QACvB,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,QAAQ,CAAC,EAAE;YAC3B,WAAW,CAAC,KAAK,CAAC,CAAC;YACnB,WAAW,IAAI,WAAW,CAAC,KAAK,CAAC,CAAC;SACnC;IACH,CAAC,EAAE,CAAC,UAAU,EAAE,QAAQ,EAAE,WAAW,CAAC,CAAC,CAAC;IAExC,MAAM,UAAU,GAAG,IAAA,uCAAkB,EAAC,QAAQ,CAAC,CAAC;IAEhD,MAAM,WAAW,GAAG,EAAE,GAAG,KAAK,EAAyB,CAAC;IACxD,MAAM,WAAW,GAAG,EAAE,eAAe,EAAE,UAAU,EAAyB,CAAC;IAE3E,MAAM,gBAAgB,GAAG,IAAA,oBAAU,EAAC,+BAA+B,EACjE,KAAK,IAAI,OAAO,EAChB,QAAQ,IAAI,UAAU,EACtB,SAAS,CACV,CAAC;IAEF,MAAM,YAAY,GAAG,SAAS,IAAI,SAAS,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,aAAa,CAAC,OAAO,CAAC;IACvF,OAAO,CACL;QACE,+CAAoB,+BAA+B,gBAAa,UAAU,EAAE,OAAO,EAAE,WAAW,EAAE,SAAS,EAAE,gBAAgB,EAC3H,KAAK,EAAE,WAAW,EAAE,QAAQ,EAAE,QAAQ,EAAE,GAAG,EAAE,IAAI;YACjD,6BAAK,SAAS,EAAC,yCAAyC;gBACtD,6BAAK,SAAS,EAAC,4CAA4C,EAAC,KAAK,EAAE,WAAW,iBAAe,SAAS,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,YAAY,GAAI;gBACrI,SAAS,IAAI,oBAAC,iBAAI,IAAC,SAAS,EAAC,kBAAkB,EAAC,QAAQ,EAAE,SAAS,CAAC,CAAC,CAAC,oBAAC,qCAAe,OAAG,CAAC,CAAC,CAAC,oBAAC,uCAAiB,OAAG,GAAK,CACnH,CACC;QACT,oBAAC,kBAAK,IACJ,SAAS,EAAC,8BAA8B,EACxC,MAAM,EAAE,SAAS,EACjB,QAAQ,EAAE,iCAAgB,CAAC,UAAU,EACrC,OAAO,EAAE,UAAU,EACnB,MAAM,EAAE,MAAM,CAAC,OAAO,EACtB,8BAA8B;YAE9B,oBAAC,YAAY,IAAC,iBAAiB,EAAE,iBAAiB,EAAE,OAAO,EAAE,YAAY,EAAE,UAAU,EAAE,UAAU,aAAV,UAAU,cAAV,UAAU,GAAI,CAAC,EAAE,KAAK,EAAE,CAAC,CAAC,KAAK,EAAE,KAAK,EAAE,aAAa,GAAI,CAC1I,CACP,CACJ,CAAC;AACJ,CAAC,CACF,CAAC;AAEF;;;GAGG;AACU,QAAA,iBAAiB,GAAoD,2BAA2B,CAAC","sourcesContent":["/*---------------------------------------------------------------------------------------------\r\n* Copyright (c) Bentley Systems, Incorporated. All rights reserved.\r\n* See LICENSE.md in the project root for license terms and full copyright notice.\r\n*--------------------------------------------------------------------------------------------*/\r\n/** @packageDocumentation\r\n * @module Color\r\n */\r\n\r\nimport \"./ColorPickerButton.scss\";\r\nimport classnames from \"classnames\";\r\nimport * as React from \"react\";\r\nimport { ColorByName, ColorDef } from \"@itwin/core-common\";\r\nimport { RelativePosition } from \"@itwin/appui-abstract\";\r\nimport { CommonProps, Icon, Popup, useRefs } from \"@itwin/core-react\";\r\nimport { ColorSwatch } from \"./Swatch\";\r\nimport { getCSSColorFromDef } from \"./getCSSColorFromDef\";\r\nimport { SvgCaretDownSmall, SvgCaretUpSmall } from \"@itwin/itwinui-icons-react\";\r\n\r\n// cSpell:ignore colorpicker\r\n\r\nfunction ColorOptions({ handleColorPicked, options, numColumns, round, title }: { handleColorPicked: ((color: ColorDef) => void), options: ColorDef[], numColumns: number, round: boolean, title?: string }) {\r\n  const containerStyle: React.CSSProperties = { gridTemplateColumns: `repeat(${numColumns}, 1fr)` };\r\n  return (\r\n    <div className=\"components-colorpicker-popup-container\">\r\n      {title && <h4>{title}</h4>}\r\n      <div data-testid=\"components-colorpicker-popup-colors\" className=\"components-colorpicker-popup-colors\" style={containerStyle}>\r\n        {options.map((color, index) => <ColorSwatch className=\"components-colorpicker-swatch\" key={index} colorDef={color}\r\n          onColorPick={handleColorPicked} round={round} />)}\r\n      </div>\r\n    </div>\r\n  );\r\n}\r\n\r\n/** Properties for the [[ColorPickerButton]] React component\r\n * @beta\r\n */\r\nexport interface ColorPickerProps extends React.ButtonHTMLAttributes<HTMLButtonElement>, CommonProps {\r\n  /** Active color */\r\n  initialColor: ColorDef;\r\n  /** Available colors */\r\n  colorDefs?: ColorDef[];\r\n  /** Function to run when user selects color swatch */\r\n  onColorPick?: ((color: ColorDef) => void) | undefined;\r\n  /** Show swatches as squares unless round is set to true */\r\n  round?: boolean;\r\n  /** Disabled or not */\r\n  disabled?: boolean;\r\n  /** Readonly or not */\r\n  readonly?: boolean;\r\n  /** Title to show at top of DropDown */\r\n  dropDownTitle?: string;\r\n  /** Number of columns */\r\n  numColumns?: number;\r\n  /** Provides ability to return reference to HTMLButtonElement */\r\n  ref?: React.Ref<HTMLButtonElement>;\r\n  /** If true show up/down caret next to color  */\r\n  showCaret?: boolean;\r\n}\r\n\r\n// Defined using following pattern (const ColorPickerButton at bottom) to ensure useful API documentation is extracted\r\nconst ForwardRefColorPickerButton = React.forwardRef<HTMLButtonElement, ColorPickerProps>(\r\n  function ForwardRefColorPickerButton({ className, colorDefs, disabled, dropDownTitle, initialColor, numColumns, onColorPick, readonly, round, showCaret, style }, ref) {\r\n    const target = React.useRef<HTMLButtonElement>(null);\r\n    const refs = useRefs(target, ref);  // combine ref needed for target with the forwardRef needed by the Parent when parent is a Type Editor.\r\n    const [showPopup, setShowPopup] = React.useState(false);\r\n    const [colorDef, setColorDef] = React.useState(initialColor);\r\n\r\n    // See if new initialColor props have changed since component mounted\r\n    React.useEffect(() => {\r\n      setColorDef(initialColor);\r\n    }, [initialColor]);\r\n\r\n    const defaultColors = React.useRef(\r\n      [\r\n        ColorDef.create(ColorByName.red),\r\n        ColorDef.create(ColorByName.orange),\r\n        ColorDef.create(ColorByName.yellow),\r\n        ColorDef.create(ColorByName.green),\r\n        ColorDef.create(ColorByName.blue),\r\n        ColorDef.create(ColorByName.indigo),\r\n        ColorDef.create(ColorByName.violet),\r\n        ColorDef.create(ColorByName.black),\r\n        ColorDef.create(ColorByName.white),\r\n        ColorDef.create(ColorByName.cyan),\r\n        ColorDef.create(ColorByName.fuchsia),\r\n        ColorDef.create(ColorByName.tan),\r\n        ColorDef.create(ColorByName.gray),\r\n        ColorDef.create(ColorByName.brown),\r\n        ColorDef.create(ColorByName.purple),\r\n        ColorDef.create(ColorByName.olive),\r\n      ]);\r\n\r\n    const closePopup = React.useCallback(() => {\r\n      setShowPopup(false);\r\n    }, []);\r\n\r\n    const togglePopup = React.useCallback(() => {\r\n      setShowPopup(!showPopup);\r\n    }, [showPopup]);\r\n\r\n    const handleColorPicked = React.useCallback((color: ColorDef) => {\r\n      closePopup();\r\n\r\n      // istanbul ignore else\r\n      if (!color.equals(colorDef)) {\r\n        setColorDef(color);\r\n        onColorPick && onColorPick(color);\r\n      }\r\n    }, [closePopup, colorDef, onColorPick]);\r\n\r\n    const rgbaString = getCSSColorFromDef(colorDef);\r\n\r\n    const buttonStyle = { ...style } as React.CSSProperties;\r\n    const swatchStyle = { backgroundColor: rgbaString } as React.CSSProperties;\r\n\r\n    const buttonClassNames = classnames(\"components-colorpicker-button\",\r\n      round && \"round\",\r\n      readonly && \"readonly\",\r\n      className,\r\n    );\r\n\r\n    const colorOptions = colorDefs && colorDefs.length ? colorDefs : defaultColors.current;\r\n    return (\r\n      <>\r\n        <button data-testid=\"components-colorpicker-button\" data-value={rgbaString} onClick={togglePopup} className={buttonClassNames}\r\n          style={buttonStyle} disabled={disabled} ref={refs} >\r\n          <div className=\"components-colorpicker-button-container\">\r\n            <div className=\"components-colorpicker-button-color-swatch\" style={swatchStyle} data-testid={showPopup ? \"caret-up\" : \"caret-down\"} />\r\n            {showCaret && <Icon className=\"components-caret\" iconSpec={showPopup ? <SvgCaretUpSmall /> : <SvgCaretDownSmall /> } />}\r\n          </div>\r\n        </button>\r\n        <Popup\r\n          className=\"components-colorpicker-popup\"\r\n          isOpen={showPopup}\r\n          position={RelativePosition.BottomLeft}\r\n          onClose={closePopup}\r\n          target={target.current}\r\n          closeOnNestedPopupOutsideClick\r\n        >\r\n          <ColorOptions handleColorPicked={handleColorPicked} options={colorOptions} numColumns={numColumns ?? 4} round={!!round} title={dropDownTitle} />\r\n        </Popup>\r\n      </>\r\n    );\r\n  }\r\n);\r\n\r\n/** ColorPickerButton component\r\n * @note Using forwardRef so the ColorEditor (Type Editor) can access the ref of the button element inside this component.\r\n * @beta\r\n */\r\nexport const ColorPickerButton: (props: ColorPickerProps) => JSX.Element | null = ForwardRefColorPickerButton;\r\n\r\n"]}

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

@@ -3,35 +3,34 @@
 * See LICENSE.md in the project root for license terms and full copyright notice.
 *--------------------------------------------------------------------------------------------*/
 @import "~@itwin/core-react/lib/cjs/core-react/style/themecolors";
-@import "~@itwin/itwinui-css/scss/style/typography";
 
 button.components-colorpicker-button {
-  font-family: $iui-font-family;
-  font-size: $iui-font-size;
-  color: $buic-foreground-body;
+  font-family: var(--iui-font-sans);
+  font-size: var(--iui-font-size-1);
+  color: var(--iui-color-text);
   box-sizing: border-box;
   border: 1px solid transparent;
-  border-radius: 3px;
+  border-radius: var(--iui-border-radius-1);
   background-color: transparent;
   border: none;
   padding: 0;
 
-  >.components-colorpicker-button-container {
+  > .components-colorpicker-button-container {
     display: flex;
     flex-direction: row;
     align-items: center;
-    border-radius: 3px;
+    border-radius: var(--iui-border-radius-1);
 
-    >.components-colorpicker-button-color-swatch {
-      border: 1px solid $buic-inputs-border;
-      border-radius: 3px;
+    > .components-colorpicker-button-color-swatch {
+      border: 1px solid var(--iui-color-border-foreground);
+      border-radius: var(--iui-border-radius-1);
       width: 1.25em;
       height: 1.25em;
     }
 
-    >.components-caret {
-      margin-left: .25em;
-      margin-right: .25em;
+    > .components-caret {
+      margin-left: 0.25em;
+      margin-right: 0.25em;
     }
   }
 
@@ -42,8 +41,8 @@ button.components-colorpicker-button {
   &:disabled {
     pointer-events: none;
 
-    >.components-colorpicker-button-container {
-      >.components-caret {
+    > .components-colorpicker-button-container {
+      > .components-caret {
         color: $buic-icon-color-disabled;
       }
     }
@@ -59,24 +58,23 @@ button.components-colorpicker-button {
       border-radius: 50%;
     }
   }
-
 }
 
 .components-colorpicker-popup {
-  border: 1px solid $buic-inputs-border;
+  border: 1px solid var(--iui-color-border-foreground);
   border-radius: 6px;
 
   .components-colorpicker-popup-container {
-    color: $buic-foreground-body;
+    color: var(--iui-color-text);
     background: $buic-background-control;
     border-radius: 6px;
 
-    >.components-colorpicker-popup-colors {
+    > .components-colorpicker-popup-colors {
       display: grid;
       grid-gap: 8px;
       padding: 8px;
 
-      >.components-colorpicker-swatch {
+      > .components-colorpicker-swatch {
         height: 1.5em;
         width: 1.5em;
         transition: scale 0.2s ease;
@@ -89,4 +87,4 @@ button.components-colorpicker-button {
       }
     }
   }
-}
+}

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

@@ -1,24 +1,24 @@
-/** @packageDocumentation
- * @module Color
- */
-/// <reference types="react" />
-import { ColorDef } from "@itwin/core-common";
-/** Properties for the [[ColorPickerDialog]] React component
- * @beta
- */
-export interface ColorPickerDialogProps {
-    dialogTitle: string;
-    color: ColorDef;
-    onOkResult: (selectedColor: ColorDef) => void;
-    onCancelResult: () => void;
-    /** displayed in rows of 9 items */
-    colorPresets?: ColorDef[];
-    /** If set show either HSL, RGB, or HEX input values. If undefined no input value is shown */
-    colorInputType?: "hsl" | "rgb" | "hex";
-}
-/**
- * Color Picker Dialog to use as modal dialog.
- * @beta
- */
-export declare function ColorPickerDialog({ dialogTitle, color, onOkResult, onCancelResult, colorPresets, colorInputType }: ColorPickerDialogProps): JSX.Element;
+/** @packageDocumentation
+ * @module Color
+ */
+/// <reference types="react" />
+import { ColorDef } from "@itwin/core-common";
+/** Properties for the [[ColorPickerDialog]] React component
+ * @beta
+ */
+export interface ColorPickerDialogProps {
+    dialogTitle: string;
+    color: ColorDef;
+    onOkResult: (selectedColor: ColorDef) => void;
+    onCancelResult: () => void;
+    /** displayed in rows of 9 items */
+    colorPresets?: ColorDef[];
+    /** If set show either HSL, RGB, or HEX input values. If undefined no input value is shown */
+    colorInputType?: "hsl" | "rgb" | "hex";
+}
+/**
+ * Color Picker Dialog to use as modal dialog.
+ * @beta
+ */
+export declare function ColorPickerDialog({ dialogTitle, color, onOkResult, onCancelResult, colorPresets, colorInputType }: ColorPickerDialogProps): JSX.Element;
 //# sourceMappingURL=ColorPickerDialog.d.ts.map

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

@@ -1,75 +1,79 @@
-"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.ColorPickerDialog = void 0;
-// cSpell:ignore colorpicker
-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
- */
-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(() => {
-        // istanbul ignore else
-        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;
+"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;
+// cSpell:ignore colorpicker
+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
+ */
+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(() => {
+        // istanbul ignore else
+        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 +1 @@
-{"version":3,"file":"ColorPickerDialog.js","sourceRoot":"","sources":["../../../../src/imodel-components-react/color/ColorPickerDialog.tsx"],"names":[],"mappings":";AAAA;;;+FAG+F;AAC/F;;GAEG;;;;;;;;;;;;;;;;;;;;;;AAEH,4BAA4B;AAE5B,6CAA+B;AAC/B,0DAAyD;AACzD,kDAA2C;AAC3C,oDAA8C;AAC9C,wDAA4G;AAgB5G;;;GAGG;AACH,SAAgB,iBAAiB,CAAC,EAAE,WAAW,EAAE,KAAK,EAAE,UAAU,EAAE,cAAc,EAAE,YAAY,EAAE,cAAc,EAA0B;IACxI,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,uBAAuB;QACvB,IAAI,cAAc;YAChB,cAAc,EAAE,CAAC;IACrB,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,CAAC,GAAG,EAAE,CAAC;QACxC,EAAE,IAAI,EAAE,iCAAgB,CAAC,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE;QAChD,EAAE,IAAI,EAAE,iCAAgB,CAAC,MAAM,EAAE,OAAO,EAAE,YAAY,EAAE;KACzD,EAAE,CAAC,YAAY,EAAE,QAAQ,CAAC,CAAC,CAAC;IAE7B,MAAM,YAAY,GAAG,KAAK,CAAC,OAAO,CAAC,GAAG,EAAE;QACtC,IAAI,YAAY,EAAE;YAChB,OAAO,YAAY,CAAC,GAAG,CAAC,CAAC,GAAG,EAAE,EAAE,CAAC,0BAAU,CAAC,QAAQ,CAAC,GAAG,CAAC,IAAI,CAAC,CAAC,CAAC;SACjE;QACD,OAAO,SAAS,CAAC;IACnB,CAAC,EAAE,CAAC,YAAY,CAAC,CAAC,CAAC;IAEnB,OAAO,CACL,6BAAK,GAAG,EAAE,eAAe;QACvB,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,IAAC,aAAa,EAAE,0BAAU,CAAC,QAAQ,CAAC,WAAW,CAAC,IAAI,CAAC,EAAE,gBAAgB,EAAE,kBAAkB;gBACrG,oBAAC,4BAAY,OAAG;gBACf,cAAc;oBACb,oBAAC,+BAAe,IAAC,kBAAkB,EAAE,cAAc,GAAI;gBACxD,YAAY;oBACX,oBAAC,4BAAY,IAAC,MAAM,EAAE,YAAY,GAAI,CAC5B,CACP,CACJ,CACR,CAAC;AACJ,CAAC;AArDD,8CAqDC","sourcesContent":["/*---------------------------------------------------------------------------------------------\r\n* Copyright (c) Bentley Systems, Incorporated. All rights reserved.\r\n* See LICENSE.md in the project root for license terms and full copyright notice.\r\n*--------------------------------------------------------------------------------------------*/\r\n/** @packageDocumentation\r\n * @module Color\r\n */\r\n\r\n// cSpell:ignore colorpicker\r\n\r\nimport * as React from \"react\";\r\nimport { DialogButtonType } from \"@itwin/appui-abstract\";\r\nimport { Dialog } from \"@itwin/core-react\";\r\nimport { ColorDef } from \"@itwin/core-common\";\r\nimport { ColorBuilder, ColorInputPanel, ColorPalette, ColorPicker, ColorValue } from \"@itwin/itwinui-react\";\r\n\r\n/** Properties for the [[ColorPickerDialog]] React component\r\n * @beta\r\n */\r\nexport interface ColorPickerDialogProps {\r\n  dialogTitle: string;\r\n  color: ColorDef;\r\n  onOkResult: (selectedColor: ColorDef) => void;\r\n  onCancelResult: () => void;\r\n  /** displayed in rows of 9 items */\r\n  colorPresets?: ColorDef[];\r\n  /** If set show either HSL, RGB, or HEX input values. If undefined no input value is shown */\r\n  colorInputType?: \"hsl\" | \"rgb\" | \"hex\";\r\n}\r\n\r\n/**\r\n * Color Picker Dialog to use as modal dialog.\r\n * @beta\r\n */\r\nexport function ColorPickerDialog({ dialogTitle, color, onOkResult, onCancelResult, colorPresets, colorInputType }: ColorPickerDialogProps) {\r\n  const [activeColor, setActiveColor] = React.useState(color);\r\n  const dialogContainer = React.useRef<HTMLDivElement>(null);\r\n\r\n  const handleOk = React.useCallback(() => {\r\n    onOkResult(activeColor);\r\n  }, [onOkResult, activeColor]);\r\n  const handleCancel = React.useCallback(() => {\r\n    // istanbul ignore else\r\n    if (onCancelResult)\r\n      onCancelResult();\r\n  }, [onCancelResult]);\r\n\r\n  const handleColorChanged = React.useCallback((newColorValue: ColorValue) => {\r\n    const newColorDef = ColorDef.fromTbgr(newColorValue.toTbgr());\r\n    setActiveColor(newColorDef);\r\n  }, []);\r\n\r\n  const buttonCluster = React.useMemo(() => [\r\n    { type: DialogButtonType.OK, onClick: handleOk },\r\n    { type: DialogButtonType.Cancel, onClick: handleCancel },\r\n  ], [handleCancel, handleOk]);\r\n\r\n  const colorOptions = React.useMemo(() => {\r\n    if (colorPresets) {\r\n      return colorPresets.map((def) => ColorValue.fromTbgr(def.tbgr));\r\n    }\r\n    return undefined;\r\n  }, [colorPresets]);\r\n\r\n  return (\r\n    <div ref={dialogContainer}>\r\n      <Dialog\r\n        title={dialogTitle}\r\n        opened={true}\r\n        resizable={false}\r\n        movable={true}\r\n        modal={true}\r\n        buttonCluster={buttonCluster}\r\n        onClose={handleCancel}\r\n        onEscape={handleCancel}\r\n        maxWidth={320}\r\n      >\r\n        <ColorPicker selectedColor={ColorValue.fromTbgr(activeColor.tbgr)} onChangeComplete={handleColorChanged} >\r\n          <ColorBuilder />\r\n          {colorInputType &&\r\n            <ColorInputPanel defaultColorFormat={colorInputType} />}\r\n          {colorOptions &&\r\n            <ColorPalette colors={colorOptions} />}\r\n        </ColorPicker>\r\n      </Dialog>\r\n    </div >\r\n  );\r\n}\r\n"]}
+{"version":3,"file":"ColorPickerDialog.js","sourceRoot":"","sources":["../../../../src/imodel-components-react/color/ColorPickerDialog.tsx"],"names":[],"mappings":";AAAA;;;+FAG+F;AAC/F;;GAEG;;;;;;;;;;;;;;;;;;;;;;;;;;AAEH,4BAA4B;AAE5B,6CAA+B;AAC/B,0DAAyD;AACzD,kDAA2C;AAC3C,oDAA8C;AAC9C,wDAA4G;AAgB5G;;;GAGG;AACH,SAAgB,iBAAiB,CAAC,EAAE,WAAW,EAAE,KAAK,EAAE,UAAU,EAAE,cAAc,EAAE,YAAY,EAAE,cAAc,EAA0B;IACxI,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,uBAAuB;QACvB,IAAI,cAAc;YAChB,cAAc,EAAE,CAAC;IACrB,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,CAAC,GAAG,EAAE,CAAC;QACxC,EAAE,IAAI,EAAE,iCAAgB,CAAC,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE;QAChD,EAAE,IAAI,EAAE,iCAAgB,CAAC,MAAM,EAAE,OAAO,EAAE,YAAY,EAAE;KACzD,EAAE,CAAC,YAAY,EAAE,QAAQ,CAAC,CAAC,CAAC;IAE7B,MAAM,YAAY,GAAG,KAAK,CAAC,OAAO,CAAC,GAAG,EAAE;QACtC,IAAI,YAAY,EAAE;YAChB,OAAO,YAAY,CAAC,GAAG,CAAC,CAAC,GAAG,EAAE,EAAE,CAAC,0BAAU,CAAC,QAAQ,CAAC,GAAG,CAAC,IAAI,CAAC,CAAC,CAAC;SACjE;QACD,OAAO,SAAS,CAAC;IACnB,CAAC,EAAE,CAAC,YAAY,CAAC,CAAC,CAAC;IAEnB,OAAO,CACL,6BAAK,GAAG,EAAE,eAAe;QACvB,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,IAAC,aAAa,EAAE,0BAAU,CAAC,QAAQ,CAAC,WAAW,CAAC,IAAI,CAAC,EAAE,gBAAgB,EAAE,kBAAkB;gBACrG,oBAAC,4BAAY,OAAG;gBACf,cAAc;oBACb,oBAAC,+BAAe,IAAC,kBAAkB,EAAE,cAAc,GAAI;gBACxD,YAAY;oBACX,oBAAC,4BAAY,IAAC,MAAM,EAAE,YAAY,GAAI,CAC5B,CACP,CACJ,CACR,CAAC;AACJ,CAAC;AArDD,8CAqDC","sourcesContent":["/*---------------------------------------------------------------------------------------------\r\n* Copyright (c) Bentley Systems, Incorporated. All rights reserved.\r\n* See LICENSE.md in the project root for license terms and full copyright notice.\r\n*--------------------------------------------------------------------------------------------*/\r\n/** @packageDocumentation\r\n * @module Color\r\n */\r\n\r\n// cSpell:ignore colorpicker\r\n\r\nimport * as React from \"react\";\r\nimport { DialogButtonType } from \"@itwin/appui-abstract\";\r\nimport { Dialog } from \"@itwin/core-react\";\r\nimport { ColorDef } from \"@itwin/core-common\";\r\nimport { ColorBuilder, ColorInputPanel, ColorPalette, ColorPicker, ColorValue } from \"@itwin/itwinui-react\";\r\n\r\n/** Properties for the [[ColorPickerDialog]] React component\r\n * @beta\r\n */\r\nexport interface ColorPickerDialogProps {\r\n  dialogTitle: string;\r\n  color: ColorDef;\r\n  onOkResult: (selectedColor: ColorDef) => void;\r\n  onCancelResult: () => void;\r\n  /** displayed in rows of 9 items */\r\n  colorPresets?: ColorDef[];\r\n  /** If set show either HSL, RGB, or HEX input values. If undefined no input value is shown */\r\n  colorInputType?: \"hsl\" | \"rgb\" | \"hex\";\r\n}\r\n\r\n/**\r\n * Color Picker Dialog to use as modal dialog.\r\n * @beta\r\n */\r\nexport function ColorPickerDialog({ dialogTitle, color, onOkResult, onCancelResult, colorPresets, colorInputType }: ColorPickerDialogProps) {\r\n  const [activeColor, setActiveColor] = React.useState(color);\r\n  const dialogContainer = React.useRef<HTMLDivElement>(null);\r\n\r\n  const handleOk = React.useCallback(() => {\r\n    onOkResult(activeColor);\r\n  }, [onOkResult, activeColor]);\r\n  const handleCancel = React.useCallback(() => {\r\n    // istanbul ignore else\r\n    if (onCancelResult)\r\n      onCancelResult();\r\n  }, [onCancelResult]);\r\n\r\n  const handleColorChanged = React.useCallback((newColorValue: ColorValue) => {\r\n    const newColorDef = ColorDef.fromTbgr(newColorValue.toTbgr());\r\n    setActiveColor(newColorDef);\r\n  }, []);\r\n\r\n  const buttonCluster = React.useMemo(() => [\r\n    { type: DialogButtonType.OK, onClick: handleOk },\r\n    { type: DialogButtonType.Cancel, onClick: handleCancel },\r\n  ], [handleCancel, handleOk]);\r\n\r\n  const colorOptions = React.useMemo(() => {\r\n    if (colorPresets) {\r\n      return colorPresets.map((def) => ColorValue.fromTbgr(def.tbgr));\r\n    }\r\n    return undefined;\r\n  }, [colorPresets]);\r\n\r\n  return (\r\n    <div ref={dialogContainer}>\r\n      <Dialog\r\n        title={dialogTitle}\r\n        opened={true}\r\n        resizable={false}\r\n        movable={true}\r\n        modal={true}\r\n        buttonCluster={buttonCluster}\r\n        onClose={handleCancel}\r\n        onEscape={handleCancel}\r\n        maxWidth={320}\r\n      >\r\n        <ColorPicker selectedColor={ColorValue.fromTbgr(activeColor.tbgr)} onChangeComplete={handleColorChanged} >\r\n          <ColorBuilder />\r\n          {colorInputType &&\r\n            <ColorInputPanel defaultColorFormat={colorInputType} />}\r\n          {colorOptions &&\r\n            <ColorPalette colors={colorOptions} />}\r\n        </ColorPicker>\r\n      </Dialog>\r\n    </div >\r\n  );\r\n}\r\n"]}