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

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

@@ -1,90 +1,90 @@
-/*---------------------------------------------------------------------------------------------
-* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
-* See LICENSE.md in the project root for license terms and full copyright notice.
-*--------------------------------------------------------------------------------------------*/
-@import "~@itwin/core-react/lib/cjs/core-react/style/themecolors";
-
-button.components-colorpicker-button {
-  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: var(--iui-border-radius-1);
-  background-color: transparent;
-  border: none;
-  padding: 0;
-
-  > .components-colorpicker-button-container {
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    border-radius: var(--iui-border-radius-1);
-
-    > .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: 0.25em;
-      margin-right: 0.25em;
-    }
-  }
-
-  &:not(.readonly) {
-    cursor: pointer;
-  }
-
-  &:disabled {
-    pointer-events: none;
-
-    > .components-colorpicker-button-container {
-      > .components-caret {
-        color: $buic-icon-color-disabled;
-      }
-    }
-  }
-
-  &.round {
-    .components-colorpicker-button-container {
-      border-bottom-left-radius: 50%;
-      border-top-left-radius: 50%;
-    }
-
-    .components-colorpicker-button-color-swatch {
-      border-radius: 50%;
-    }
-  }
-}
-
-.components-colorpicker-popup {
-  border: 1px solid var(--iui-color-border-foreground);
-  border-radius: 6px;
-
-  .components-colorpicker-popup-container {
-    color: var(--iui-color-text);
-    background: $buic-background-control;
-    border-radius: 6px;
-
-    > .components-colorpicker-popup-colors {
-      display: grid;
-      grid-gap: 8px;
-      padding: 8px;
-
-      > .components-colorpicker-swatch {
-        height: 1.5em;
-        width: 1.5em;
-        transition: scale 0.2s ease;
-        cursor: pointer;
-        outline: none;
-
-        &:hover {
-          transform: scale(1.15);
-        }
-      }
-    }
-  }
-}
+/*---------------------------------------------------------------------------------------------
+* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+* See LICENSE.md in the project root for license terms and full copyright notice.
+*--------------------------------------------------------------------------------------------*/
+@import "~@itwin/core-react/lib/cjs/core-react/style/themecolors";
+
+button.components-colorpicker-button {
+  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: var(--iui-border-radius-1);
+  background-color: transparent;
+  border: none;
+  padding: 0;
+
+  > .components-colorpicker-button-container {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    border-radius: var(--iui-border-radius-1);
+
+    > .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: 0.25em;
+      margin-right: 0.25em;
+    }
+  }
+
+  &:not(.readonly) {
+    cursor: pointer;
+  }
+
+  &:disabled {
+    pointer-events: none;
+
+    > .components-colorpicker-button-container {
+      > .components-caret {
+        color: $buic-icon-color-disabled;
+      }
+    }
+  }
+
+  &.round {
+    .components-colorpicker-button-container {
+      border-bottom-left-radius: 50%;
+      border-top-left-radius: 50%;
+    }
+
+    .components-colorpicker-button-color-swatch {
+      border-radius: 50%;
+    }
+  }
+}
+
+.components-colorpicker-popup {
+  border: 1px solid var(--iui-color-border-foreground);
+  border-radius: 6px;
+
+  .components-colorpicker-popup-container {
+    color: var(--iui-color-text);
+    background: $buic-background-control;
+    border-radius: 6px;
+
+    > .components-colorpicker-popup-colors {
+      display: grid;
+      grid-gap: 8px;
+      padding: 8px;
+
+      > .components-colorpicker-swatch {
+        height: 1.5em;
+        width: 1.5em;
+        transition: scale 0.2s ease;
+        cursor: pointer;
+        outline: none;
+
+        &:hover {
+          transform: scale(1.15);
+        }
+      }
+    }
+  }
+}

package/lib/esm/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/esm/imodel-components-react/color/ColorPickerDialog.js

@@ -1,52 +1,52 @@
-/*---------------------------------------------------------------------------------------------
-* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
-* See LICENSE.md in the project root for license terms and full copyright notice.
-*--------------------------------------------------------------------------------------------*/
-/** @packageDocumentation
- * @module Color
- */
-// cSpell:ignore colorpicker
-import * as React from "react";
-import { DialogButtonType } from "@itwin/appui-abstract";
-import { Dialog } from "@itwin/core-react";
-import { ColorDef } from "@itwin/core-common";
-import { ColorBuilder, ColorInputPanel, ColorPalette, ColorPicker, ColorValue } from "@itwin/itwinui-react";
-/**
- * Color Picker Dialog to use as modal dialog.
- * @beta
- */
-export 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 = ColorDef.fromTbgr(newColorValue.toTbgr());
-        setActiveColor(newColorDef);
-    }, []);
-    const buttonCluster = React.useMemo(() => [
-        { type: DialogButtonType.OK, onClick: handleOk },
-        { type: DialogButtonType.Cancel, onClick: handleCancel },
-    ], [handleCancel, handleOk]);
-    const colorOptions = React.useMemo(() => {
-        if (colorPresets) {
-            return colorPresets.map((def) => ColorValue.fromTbgr(def.tbgr));
-        }
-        return undefined;
-    }, [colorPresets]);
-    return (React.createElement("div", { ref: dialogContainer },
-        React.createElement(Dialog, { title: dialogTitle, opened: true, resizable: false, movable: true, modal: true, buttonCluster: buttonCluster, onClose: handleCancel, onEscape: handleCancel, maxWidth: 320 },
-            React.createElement(ColorPicker, { selectedColor: ColorValue.fromTbgr(activeColor.tbgr), onChangeComplete: handleColorChanged },
-                React.createElement(ColorBuilder, null),
-                colorInputType &&
-                    React.createElement(ColorInputPanel, { defaultColorFormat: colorInputType }),
-                colorOptions &&
-                    React.createElement(ColorPalette, { colors: colorOptions })))));
-}
+/*---------------------------------------------------------------------------------------------
+* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+* See LICENSE.md in the project root for license terms and full copyright notice.
+*--------------------------------------------------------------------------------------------*/
+/** @packageDocumentation
+ * @module Color
+ */
+// cSpell:ignore colorpicker
+import * as React from "react";
+import { DialogButtonType } from "@itwin/appui-abstract";
+import { Dialog } from "@itwin/core-react";
+import { ColorDef } from "@itwin/core-common";
+import { ColorBuilder, ColorInputPanel, ColorPalette, ColorPicker, ColorValue } from "@itwin/itwinui-react";
+/**
+ * Color Picker Dialog to use as modal dialog.
+ * @beta
+ */
+export 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 = ColorDef.fromTbgr(newColorValue.toTbgr());
+        setActiveColor(newColorDef);
+    }, []);
+    const buttonCluster = React.useMemo(() => [
+        { type: DialogButtonType.OK, onClick: handleOk },
+        { type: DialogButtonType.Cancel, onClick: handleCancel },
+    ], [handleCancel, handleOk]);
+    const colorOptions = React.useMemo(() => {
+        if (colorPresets) {
+            return colorPresets.map((def) => ColorValue.fromTbgr(def.tbgr));
+        }
+        return undefined;
+    }, [colorPresets]);
+    return (React.createElement("div", { ref: dialogContainer },
+        React.createElement(Dialog, { title: dialogTitle, opened: true, resizable: false, movable: true, modal: true, buttonCluster: buttonCluster, onClose: handleCancel, onEscape: handleCancel, maxWidth: 320 },
+            React.createElement(ColorPicker, { selectedColor: ColorValue.fromTbgr(activeColor.tbgr), onChangeComplete: handleColorChanged },
+                React.createElement(ColorBuilder, null),
+                colorInputType &&
+                    React.createElement(ColorInputPanel, { defaultColorFormat: colorInputType }),
+                colorOptions &&
+                    React.createElement(ColorPalette, { colors: colorOptions })))));
+}
 //# sourceMappingURL=ColorPickerDialog.js.map

package/lib/esm/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,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,gBAAgB,EAAE,MAAM,uBAAuB,CAAC;AACzD,OAAO,EAAE,MAAM,EAAE,MAAM,mBAAmB,CAAC;AAC3C,OAAO,EAAE,QAAQ,EAAE,MAAM,oBAAoB,CAAC;AAC9C,OAAO,EAAE,YAAY,EAAE,eAAe,EAAE,YAAY,EAAE,WAAW,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAC;AAgB5G;;;GAGG;AACH,MAAM,UAAU,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,QAAQ,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,gBAAgB,CAAC,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE;QAChD,EAAE,IAAI,EAAE,gBAAgB,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,UAAU,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,MAAM,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,WAAW,IAAC,aAAa,EAAE,UAAU,CAAC,QAAQ,CAAC,WAAW,CAAC,IAAI,CAAC,EAAE,gBAAgB,EAAE,kBAAkB;gBACrG,oBAAC,YAAY,OAAG;gBACf,cAAc;oBACb,oBAAC,eAAe,IAAC,kBAAkB,EAAE,cAAc,GAAI;gBACxD,YAAY;oBACX,oBAAC,YAAY,IAAC,MAAM,EAAE,YAAY,GAAI,CAC5B,CACP,CACJ,CACR,CAAC;AACJ,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\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,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,gBAAgB,EAAE,MAAM,uBAAuB,CAAC;AACzD,OAAO,EAAE,MAAM,EAAE,MAAM,mBAAmB,CAAC;AAC3C,OAAO,EAAE,QAAQ,EAAE,MAAM,oBAAoB,CAAC;AAC9C,OAAO,EAAE,YAAY,EAAE,eAAe,EAAE,YAAY,EAAE,WAAW,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAC;AAgB5G;;;GAGG;AACH,MAAM,UAAU,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,QAAQ,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,gBAAgB,CAAC,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE;QAChD,EAAE,IAAI,EAAE,gBAAgB,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,UAAU,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,MAAM,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,WAAW,IAAC,aAAa,EAAE,UAAU,CAAC,QAAQ,CAAC,WAAW,CAAC,IAAI,CAAC,EAAE,gBAAgB,EAAE,kBAAkB;gBACrG,oBAAC,YAAY,OAAG;gBACf,cAAc;oBACb,oBAAC,eAAe,IAAC,kBAAkB,EAAE,cAAc,GAAI;gBACxD,YAAY;oBACX,oBAAC,YAAY,IAAC,MAAM,EAAE,YAAY,GAAI,CAC5B,CACP,CACJ,CACR,CAAC;AACJ,CAAC","sourcesContent":["/*---------------------------------------------------------------------------------------------\n* Copyright (c) Bentley Systems, Incorporated. All rights reserved.\n* See LICENSE.md in the project root for license terms and full copyright notice.\n*--------------------------------------------------------------------------------------------*/\n/** @packageDocumentation\n * @module Color\n */\n\n// cSpell:ignore colorpicker\n\nimport * as React from \"react\";\nimport { DialogButtonType } from \"@itwin/appui-abstract\";\nimport { Dialog } from \"@itwin/core-react\";\nimport { ColorDef } from \"@itwin/core-common\";\nimport { ColorBuilder, ColorInputPanel, ColorPalette, ColorPicker, ColorValue } from \"@itwin/itwinui-react\";\n\n/** Properties for the [[ColorPickerDialog]] React component\n * @beta\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 */\nexport function ColorPickerDialog({ dialogTitle, color, onOkResult, onCancelResult, colorPresets, colorInputType }: ColorPickerDialogProps) {\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    // istanbul ignore else\n    if (onCancelResult)\n      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    { type: DialogButtonType.OK, onClick: handleOk },\n    { type: DialogButtonType.Cancel, onClick: handleCancel },\n  ], [handleCancel, handleOk]);\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      <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 selectedColor={ColorValue.fromTbgr(activeColor.tbgr)} onChangeComplete={handleColorChanged} >\n          <ColorBuilder />\n          {colorInputType &&\n            <ColorInputPanel defaultColorFormat={colorInputType} />}\n          {colorOptions &&\n            <ColorPalette colors={colorOptions} />}\n        </ColorPicker>\n      </Dialog>\n    </div >\n  );\n}\n"]}

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

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