@itwin/imodel-components-react 3.0.0-dev.99 → 3.1.0-dev.1

package/LICENSE.md

@@ -1,6 +1,6 @@
 # MIT License
 
-Copyright © 2017-2021 Bentley Systems, Incorporated. All rights reserved.
+Copyright © 2017-2022 Bentley Systems, Incorporated. All rights reserved.
 
 Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
 

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

@@ -11,9 +11,10 @@ export interface ColorPickerDialogProps {
     color: ColorDef;
     onOkResult: (selectedColor: ColorDef) => void;
     onCancelResult: () => void;
+    /** displayed in rows of 9 items */
     colorPresets?: ColorDef[];
-    /** If set show either HSL or RGB input values. If undefined no input value is shown */
-    colorInputType?: "HSL" | "RGB";
+    /** 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.

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

@@ -1 +1 @@
-{"version":3,"file":"ColorPickerDialog.d.ts","sourceRoot":"","sources":["../../../../src/imodel-components-react/color/ColorPickerDialog.tsx"],"names":[],"mappings":"AAIA;;GAEG;;AAOH,OAAO,EAAE,QAAQ,EAAE,MAAM,oBAAoB,CAAC;AAG9C;;GAEG;AACH,MAAM,WAAW,sBAAsB;IACrC,WAAW,EAAE,MAAM,CAAC;IACpB,KAAK,EAAE,QAAQ,CAAC;IAChB,UAAU,EAAE,CAAC,aAAa,EAAE,QAAQ,KAAK,IAAI,CAAC;IAC9C,cAAc,EAAE,MAAM,IAAI,CAAC;IAC3B,YAAY,CAAC,EAAE,QAAQ,EAAE,CAAC;IAC1B,uFAAuF;IACvF,cAAc,CAAC,EAAE,KAAK,GAAG,KAAK,CAAC;CAChC;AAED;;;GAGG;AACH,wBAAgB,iBAAiB,CAAC,EAAE,WAAW,EAAE,KAAK,EAAE,UAAU,EAAE,cAAc,EAAE,YAAY,EAAE,cAAc,EAAE,EAAE,sBAAsB,eAwCzI"}
+{"version":3,"file":"ColorPickerDialog.d.ts","sourceRoot":"","sources":["../../../../src/imodel-components-react/color/ColorPickerDialog.tsx"],"names":[],"mappings":"AAIA;;GAEG;;AAOH,OAAO,EAAE,QAAQ,EAAE,MAAM,oBAAoB,CAAC;AAG9C;;GAEG;AACH,MAAM,WAAW,sBAAsB;IACrC,WAAW,EAAE,MAAM,CAAC;IACpB,KAAK,EAAE,QAAQ,CAAC;IAChB,UAAU,EAAE,CAAC,aAAa,EAAE,QAAQ,KAAK,IAAI,CAAC;IAC9C,cAAc,EAAE,MAAM,IAAI,CAAC;IAC3B,mCAAmC;IACnC,YAAY,CAAC,EAAE,QAAQ,EAAE,CAAC;IAC1B,6FAA6F;IAC7F,cAAc,CAAC,EAAE,KAAK,GAAG,KAAK,GAAG,KAAK,CAAC;CACxC;AAED;;;GAGG;AACH,wBAAgB,iBAAiB,CAAC,EAAE,WAAW,EAAE,KAAK,EAAE,UAAU,EAAE,cAAc,EAAE,YAAY,EAAE,cAAc,EAAE,EAAE,sBAAsB,eAsDzI"}

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

@@ -31,7 +31,8 @@ exports.ColorPickerDialog = void 0;
 const React = __importStar(require("react"));
 const appui_abstract_1 = require("@itwin/appui-abstract");
 const core_react_1 = require("@itwin/core-react");
-const ColorPickerPanel_1 = require("./ColorPickerPanel");
+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
@@ -47,16 +48,28 @@ function ColorPickerDialog({ dialogTitle, color, onOkResult, onCancelResult, col
         if (onCancelResult)
             onCancelResult();
     }, [onCancelResult]);
-    const handleColorChange = React.useCallback((newColorDef) => {
+    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: true, movable: true, modal: true, buttonCluster: buttonCluster, onClose: handleCancel, onEscape: handleCancel, minHeight: 340, maxWidth: 400 },
-            React.createElement(ColorPickerPanel_1.ColorPickerPanel, { colorInputType: colorInputType, activeColor: activeColor, colorPresets: colorPresets, onColorChange: handleColorChange }))));
+        React.createElement(core_react_1.Dialog, { title: dialogTitle, opened: true, resizable: false, movable: true, modal: true, buttonCluster: buttonCluster, onClose: handleCancel, onEscape: handleCancel, minHeight: 490, 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;AAE3C,yDAAsD;AAetD;;;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,iBAAiB,GAAG,KAAK,CAAC,WAAW,CAAC,CAAC,WAAqB,EAAE,EAAE;QACpE,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,OAAO,CACL,6BAAK,GAAG,EAAE,eAAe;QACvB,oBAAC,mBAAM,IACL,KAAK,EAAE,WAAW,EAClB,MAAM,EAAE,IAAI,EACZ,SAAS,EAAE,IAAI,EACf,OAAO,EAAE,IAAI,EACb,KAAK,EAAE,IAAI,EACX,aAAa,EAAE,aAAa,EAC5B,OAAO,EAAE,YAAY,EACrB,QAAQ,EAAE,YAAY,EACtB,SAAS,EAAE,GAAG,EACd,QAAQ,EAAE,GAAG;YAEb,oBAAC,mCAAgB,IAAC,cAAc,EAAE,cAAc,EAAE,WAAW,EAAE,WAAW,EAAE,YAAY,EAAE,YAAY,EAAE,aAAa,EAAE,iBAAiB,GAAI,CACrI,CACJ,CACR,CAAC;AACJ,CAAC;AAxCD,8CAwCC","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 { ColorPickerPanel } from \"./ColorPickerPanel\";\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  colorPresets?: ColorDef[];\r\n  /** If set show either HSL or RGB input values. If undefined no input value is shown */\r\n  colorInputType?: \"HSL\" | \"RGB\";\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 handleColorChange = React.useCallback((newColorDef: ColorDef) => {\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  return (\r\n    <div ref={dialogContainer}>\r\n      <Dialog\r\n        title={dialogTitle}\r\n        opened={true}\r\n        resizable={true}\r\n        movable={true}\r\n        modal={true}\r\n        buttonCluster={buttonCluster}\r\n        onClose={handleCancel}\r\n        onEscape={handleCancel}\r\n        minHeight={340}\r\n        maxWidth={400}\r\n      >\r\n        <ColorPickerPanel colorInputType={colorInputType} activeColor={activeColor} colorPresets={colorPresets} onColorChange={handleColorChange} />\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,SAAS,EAAE,GAAG,EACd,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;AAtDD,8CAsDC","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        minHeight={490}\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"]}

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

@@ -5,7 +5,7 @@
 import { ColorDef } from "@itwin/core-common";
 import "./ColorPickerPanel.scss";
 /** Properties for the [[ColorPickerPanel]] React component
- * @public
+ * @public @deprecated use `ColorPicker` for itwinui-react
  */
 export interface ColorPickerPanelProps {
     activeColor: ColorDef;
@@ -16,7 +16,7 @@ export interface ColorPickerPanelProps {
 }
 /**
  * Color Picker Dialog to use as modal dialog.
- * @public
+ * @public @deprecated use `ColorPicker` for itwinui-react
  */
 export declare function ColorPickerPanel({ activeColor, onColorChange, colorPresets, colorInputType }: ColorPickerPanelProps): JSX.Element;
 //# sourceMappingURL=ColorPickerPanel.d.ts.map

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

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

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

@@ -37,7 +37,7 @@ require("./ColorPickerPanel.scss");
 const core_react_1 = require("@itwin/core-react");
 /**
  * Color Picker Dialog to use as modal dialog.
- * @public
+ * @public @deprecated use `ColorPicker` for itwinui-react
  */
 // istanbul ignore next
 function ColorPickerPanel({ activeColor, onColorChange, colorPresets, colorInputType }) {

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

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

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

@@ -12,7 +12,8 @@ import "./ColorPickerPopup.scss";
 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. */
+    /** 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;
@@ -32,8 +33,8 @@ export interface ColorPickerPopupProps extends React.ButtonHTMLAttributes<HTMLBu
     captureClicks?: boolean;
     /** If true, don't show close button at top */
     hideCloseButton?: boolean;
-    /** If set show either HSL or RGB input values */
-    colorInputType?: "HSL" | "RGB";
+    /** 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.

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;AAGjC;;GAEG;AACH,MAAM,WAAW,qBAAsB,SAAQ,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EAAE,WAAW;IACvG,oBAAoB;IACpB,YAAY,EAAE,QAAQ,CAAC;IACvB,wGAAwG;IACxG,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,iDAAiD;IACjD,cAAc,CAAC,EAAE,KAAK,GAAG,KAAK,CAAC;CAChC;AA4GD;;;;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,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"}

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

@@ -36,9 +36,11 @@ const classnames_1 = __importDefault(require("classnames"));
 const core_common_1 = require("@itwin/core-common");
 const appui_abstract_1 = require("@itwin/appui-abstract");
 const core_react_1 = require("@itwin/core-react");
-const ColorPickerPanel_1 = require("./ColorPickerPanel");
+// 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();
@@ -53,22 +55,24 @@ const ForwardRefColorPickerPopup = React.forwardRef(function ForwardRefColorPick
         }
     }, [props.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),
+        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(() => {
@@ -78,7 +82,8 @@ const ForwardRefColorPickerPopup = React.forwardRef(function ForwardRefColorPick
     const togglePopup = React.useCallback(() => {
         setShowPopup(!showPopup);
     }, [showPopup]);
-    const handleColorChanged = React.useCallback((newColor) => {
+    const handleColorChanged = React.useCallback((newColorValue) => {
+        const newColor = core_common_1.ColorDef.fromTbgr(newColorValue.toTbgr());
         // istanbul ignore else
         if (!newColor.equals(colorDef)) {
             setColorDef(newColor);
@@ -95,20 +100,34 @@ const ForwardRefColorPickerPopup = React.forwardRef(function ForwardRefColorPick
         if (props.captureClicks)
             event.stopPropagation();
     };
-    const colorOptions = props.colorDefs && props.colorDefs.length ? props.colorDefs : defaultColors.current;
+    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 },
+        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", { className: "core-focus-trap-ignore-initial core-dialog-close icon icon-close", "data-testid": "core-dialog-close", onClick: togglePopup }),
-                React.createElement(ColorPickerPanel_1.ColorPickerPanel, { colorInputType: props.colorInputType, activeColor: colorDef, colorPresets: colorOptions, onColorChange: handleColorChanged })))));
+                    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.

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

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

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

@@ -49,5 +49,15 @@ button.components-colorpicker-popup-button {
 }
 
 .components-colorpicker-popup-panel-padding {
-  padding: 6px;
-}
+  padding: 3px 6px 6px 6px;
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+
+  button.core-dialog-close {
+    margin-left: auto;
+    background: transparent;
+    border: none;
+    color: var(--buic-foreground-body);
+  }
+}

package/lib/cjs/imodel-components-react/inputs/QuantityNumberInput.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"QuantityNumberInput.d.ts","sourceRoot":"","sources":["../../../../src/imodel-components-react/inputs/QuantityNumberInput.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAEH,OAAO,4BAA4B,CAAC;AAEpC,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EAAyC,eAAe,EAAE,MAAM,sBAAsB,CAAC;AAE9F,OAAO,EAAS,UAAU,EAAE,MAAM,sBAAsB,CAAC;AAEzD;;GAEG;AACH,oBAAY,gBAAgB,GAAG,MAAM,GAAG,CAAC,CAAC,SAAS,EAAE,MAAM,KAAK,MAAM,GAAG,SAAS,CAAC,CAAC;AAEpF;;GAEG;AACH,MAAM,WAAW,wBAAyB,SAAQ,IAAI,CAAC,UAAU,EAAE,OAAO,GAAG,KAAK,GAAG,KAAK,GAAG,MAAM,GAAG,SAAS,GAAG,UAAU,CAAC;IAC3H;qDACiD;IACjD,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,yEAAyE;IACzE,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,iDAAiD;IACjD,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,6DAA6D;IAC7D,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,kHAAkH;IAClH,IAAI,CAAC,EAAE,gBAAgB,CAAC;IACxB,0HAA0H;IAC1H,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,8GAA8G;IAC9G,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,gEAAgE;IAChE,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,+DAA+D;IAC/D,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,gBAAgB,CAAC,CAAC;IAClC,oCAAoC;IACpC,YAAY,EAAE,eAAe,CAAC;CAC/B;AA0QD;;;;;GAKG;AACH,eAAO,MAAM,mBAAmB,EAAE,CAAC,KAAK,EAAE,wBAAwB,KAAK,GAAG,CAAC,OAAO,GAAG,IAAoC,CAAC"}
+{"version":3,"file":"QuantityNumberInput.d.ts","sourceRoot":"","sources":["../../../../src/imodel-components-react/inputs/QuantityNumberInput.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAEH,OAAO,4BAA4B,CAAC;AAEpC,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EAAyC,eAAe,EAAE,MAAM,sBAAsB,CAAC;AAE9F,OAAO,EAAS,UAAU,EAAE,MAAM,sBAAsB,CAAC;AAEzD;;GAEG;AACH,oBAAY,gBAAgB,GAAG,MAAM,GAAG,CAAC,CAAC,SAAS,EAAE,MAAM,KAAK,MAAM,GAAG,SAAS,CAAC,CAAC;AAEpF;;GAEG;AACH,MAAM,WAAW,wBAAyB,SAAQ,IAAI,CAAC,UAAU,EAAE,OAAO,GAAG,KAAK,GAAG,KAAK,GAAG,MAAM,GAAG,SAAS,GAAG,UAAU,CAAC;IAC3H;qDACiD;IACjD,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,yEAAyE;IACzE,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,iDAAiD;IACjD,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,6DAA6D;IAC7D,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,kHAAkH;IAClH,IAAI,CAAC,EAAE,gBAAgB,CAAC;IACxB,0HAA0H;IAC1H,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,8GAA8G;IAC9G,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,gEAAgE;IAChE,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,+DAA+D;IAC/D,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,gBAAgB,CAAC,CAAC;IAClC,oCAAoC;IACpC,YAAY,EAAE,eAAe,CAAC;CAC/B;AA8QD;;;;;GAKG;AACH,eAAO,MAAM,mBAAmB,EAAE,CAAC,KAAK,EAAE,wBAAwB,KAAK,GAAG,CAAC,OAAO,GAAG,IAAoC,CAAC"}

package/lib/cjs/imodel-components-react/inputs/QuantityNumberInput.js

@@ -244,10 +244,11 @@ const ForwardRefQuantityNumberInput = React.forwardRef(function ForwardRefQuanti
     const handleFocus = React.useCallback((event) => {
         event.currentTarget.select();
     }, []);
-    const containerClasses = (0, classnames_1.default)("component-quantity-number-input-container", containerClassName, showTouchButtons && "component-number-buttons-for-touch");
+    const isDisabled = !!otherProps.disabled;
+    const containerClasses = (0, classnames_1.default)("component-quantity-number-input-container", containerClassName, showTouchButtons && "component-number-buttons-for-touch", isDisabled && "component-quantity-number-input-disabled");
     return (React.createElement("div", { className: containerClasses },
         React.createElement("div", { className: "component-quantity-number-input-value-and-buttons-container" },
-            React.createElement(itwinui_react_1.Input, { ref: ref, value: formattedValue, onChange: handleDisplayValueChange, onKeyDown: handleKeyDown, onBlur: handleBlur, onFocus: handleFocus, ...otherProps }),
+            React.createElement(itwinui_react_1.Input, { ref: ref, value: formattedValue, onChange: handleDisplayValueChange, onKeyDown: handleKeyDown, onBlur: handleBlur, onFocus: handleFocus, size: "small", ...otherProps }),
             React.createElement("div", { className: (0, classnames_1.default)("component-quantity-number-input-buttons-container", showTouchButtons && "component-number-buttons-for-touch") },
                 React.createElement("div", { className: "component-quantity-number-input-button component-quantity-number-input-button-up", tabIndex: -1, onClick: handleUpClick },
                     React.createElement(core_react_1.WebFontIcon, { iconName: "icon-caret-up" })),

package/lib/cjs/imodel-components-react/inputs/QuantityNumberInput.js.map

@@ -1 +1 @@
-{"version":3,"file":"QuantityNumberInput.js","sourceRoot":"","sources":["../../../../src/imodel-components-react/inputs/QuantityNumberInput.tsx"],"names":[],"mappings":";AAAA;;;+FAG+F;AAC/F;;GAEG;;;;;;;;;;;;;;;;;;;;;;;;;AAEH,sCAAoC;AACpC,4DAAoC;AACpC,6CAA+B;AAC/B,kDAAgD;AAChD,0DAAmD;AACnD,wDAA8F;AAC9F,wDAAoJ;AACpJ,wDAAyD;AAkCzD,wEAAwE;AACxE,SAAS,mBAAmB,CAAC,aAAwC;IACnE,IAAI,SAAS,KAAK,aAAa;QAC7B,OAAO,aAAa,CAAC;IACvB,MAAM,oBAAoB,GAAyB,EAAE,CAAC;IACtD,oBAAoB,CAAC,IAAI,CAAC,aAAa,CAAC,eAAe,CAAC,CAAC,CAAC,CAAC,CAAC;IAC5D,MAAM,SAAS,GAAG,aAAa,CAAC,MAAM,CAAC,KAAK,CAAC;QAC3C,mBAAmB,EAAE,IAAI;QACzB,MAAM,EAAE,aAAa,CAAC,MAAM,CAAC,YAAY,GAAG,CAAC,4BAAY,CAAC,aAAa;QACvE,IAAI,EAAE,0BAAU,CAAC,OAAO;QACxB,SAAS,EAAE,0BAAU,CAAC,OAAO,KAAK,aAAa,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC,gCAAgB,CAAC,IAAI,CAAC,CAAC,CAAC,aAAa,CAAC,MAAM,CAAC,SAAS;KACrH,CAAC,CAAC;IACH,OAAO,IAAI,6BAAa,CAAC,cAAc,EAAE,SAAS,EAAE,oBAAoB,EAAE,aAAa,CAAC,eAAe,CAAC,CAAC;AAC3G,CAAC;AAED,SAAS,oCAAoC,CAAC,KAAa,EAAE,eAAiD,EAAE,IAAe;IAC7H,uBAAuB;IACvB,IAAI,CAAC,eAAe,IAAI,CAAC,KAAK,eAAe,CAAC,MAAM;QAClD,OAAO,KAAK,CAAC;IAEf,MAAM,cAAc,GAAG,eAAe,CAAC,IAAI,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,IAAI,KAAK,IAAI,CAAC,IAAI,CAAC,CAAC;IAC/E,uBAAuB;IACvB,IAAI,CAAC,cAAc;QACjB,OAAO,KAAK,CAAC;IAEf,MAAM,cAAc,GAAG,CAAC,KAAK,GAAG,cAAc,CAAC,UAAU,CAAC,MAAM,CAAC,GAAG,cAAc,CAAC,UAAU,CAAC,MAAM,CAAC;IACrG,OAAO,cAAc,CAAC;AACxB,CAAC;AAED,SAAS,YAAY,CAAC,UAAkC;IACtD,IAAI,SAAS,KAAK,UAAU;QAC1B,OAAO,EAAE,CAAC;IAEZ,MAAM,MAAM,GAAG,UAAU,CAAC,MAAM,CAAC;IACjC,uBAAuB;IACvB,IAAI,CAAC,MAAM,CAAC,KAAK,IAAI,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC;QACnC,OAAO,UAAU,CAAC,OAAO,CAAC,KAAK,CAAC;IAClC,MAAM,CAAC,IAAI,EAAE,KAAK,CAAC,GAAG,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC;IACtC,uBAAuB;IACvB,OAAO,KAAK,aAAL,KAAK,cAAL,KAAK,GAAI,IAAI,CAAC,KAAK,CAAC;AAC7B,CAAC;AAED,MAAM,6BAA6B,GAAG,KAAK,CAAC,UAAU,CACpD,SAAS,6BAA6B,CAAC,KAAK,EAAE,GAAG;IAE/C,MAAM,EAAE,kBAAkB,EAAE,gBAAgB,EAAE,GAAG,EAAE,GAAG,EACpD,QAAQ,EAAE,MAAM,EAAE,SAAS,EAAE,IAAI,EAAE,IAAI,EAAE,gBAAgB,EAAE,YAAY,EAAE,GAAG,UAAU,EAAE,GAAG,KAAK,CAAC;IACnG,MAAM,WAAW,GAAG,KAAK,CAAC,MAAM,CAAC,gBAAgB,CAAC,CAAC;IAEnD,MAAM,CAAC,aAAa,EAAE,gBAAgB,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,GAAG,EAAE,CAAC,mBAAmB,CAAC,yBAAS,CAAC,iBAAiB,CAAC,+BAA+B,CAAC,YAAY,CAAC,CAAC,CAAC,CAAC;IAC/J,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,GAAG,EAAE,CAAC,yBAAS,CAAC,iBAAiB,CAAC,4BAA4B,CAAC,YAAY,CAAC,CAAC,CAAC;IAEjI,MAAM,WAAW,GAAG,KAAK,CAAC,WAAW,CAAC,CAAC,KAAyB,EAAE,EAAE;QAClE,IAAI,SAAS,KAAK,KAAK;YACrB,OAAO,EAAE,CAAC;QAEZ,uBAAuB;QACvB,IAAI,aAAa,EAAE;YACjB,OAAO,aAAa,CAAC,eAAe,CAAC,KAAK,CAAC,CAAC;SAC7C;QACD,uBAAuB;QACvB,OAAO,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC;IAC1B,CAAC,EAAE,CAAC,aAAa,CAAC,CAAC,CAAC;IAEpB,MAAM,qBAAqB,GAAG,KAAK,CAAC,MAAM,CAAC,WAAW,CAAC,gBAAgB,CAAC,CAAC,CAAC;IAC1E,MAAM,CAAC,cAAc,EAAE,iBAAiB,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,GAAG,EAAE,CAAC,qBAAqB,CAAC,OAAO,CAAC,CAAC;IAEhG,KAAK,CAAC,SAAS,CAAC,GAAG,EAAE;QACnB,MAAM,uBAAuB,GAAG,CAAC,GAAS,EAAE;YAC1C,gBAAgB,CAAC,mBAAmB,CAAC,yBAAS,CAAC,iBAAiB,CAAC,+BAA+B,CAAC,YAAY,CAAC,CAAC,CAAC,CAAC;YACjH,aAAa,CAAC,yBAAS,CAAC,iBAAiB,CAAC,4BAA4B,CAAC,YAAY,CAAC,CAAC,CAAC;QACxF,CAAC,CAAC,CAAC;QAEH,yBAAS,CAAC,iBAAiB,CAAC,mCAAmC,CAAC,WAAW,CAAC,uBAAuB,CAAC,CAAC;QACrG,OAAO,GAAG,EAAE;YACV,yBAAS,CAAC,iBAAiB,CAAC,mCAAmC,CAAC,cAAc,CAAC,uBAAuB,CAAC,CAAC;QAC1G,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,YAAY,CAAC,CAAC,CAAC;IAEnB,KAAK,CAAC,SAAS,CAAC,GAAG,EAAE;QACnB,MAAM,uBAAuB,GAAG,CAAC,CAAC,IAAgC,EAAQ,EAAE;YAC1E,MAAM,WAAW,GAAG,yBAAS,CAAC,iBAAiB,CAAC,kBAAkB,CAAC,YAAY,CAAC,CAAC;YACjF,uBAAuB;YACvB,IAAI,IAAI,CAAC,YAAY,KAAK,WAAW,EAAE;gBACrC,gBAAgB,CAAC,mBAAmB,CAAC,yBAAS,CAAC,iBAAiB,CAAC,+BAA+B,CAAC,YAAY,CAAC,CAAC,CAAC,CAAC;gBACjH,aAAa,CAAC,yBAAS,CAAC,iBAAiB,CAAC,4BAA4B,CAAC,YAAY,CAAC,CAAC,CAAC;aACvF;QACH,CAAC,CAAC,CAAC;QAEH,yBAAS,CAAC,iBAAiB,CAAC,wBAAwB,CAAC,WAAW,CAAC,uBAAuB,CAAC,CAAC;QAC1F,OAAO,GAAG,EAAE;YACV,yBAAS,CAAC,iBAAiB,CAAC,wBAAwB,CAAC,cAAc,CAAC,uBAAuB,CAAC,CAAC;QAC/F,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,YAAY,CAAC,CAAC,CAAC;IAEnB,MAAM,SAAS,GAAG,YAAY,CAAC,UAAU,CAAC,CAAC;IAE3C,qEAAqE;IACrE,KAAK,CAAC,SAAS,CAAC,GAAG,EAAE;QACnB,WAAW,CAAC,OAAO,GAAG,gBAAgB,CAAC;QACvC,MAAM,qBAAqB,GAAG,WAAW,CAAC,WAAW,CAAC,OAAO,CAAC,CAAC;QAC/D,iBAAiB,CAAC,qBAAqB,CAAC,CAAC;IAC3C,CAAC,EAAE,CAAC,WAAW,EAAE,gBAAgB,CAAC,CAAC,CAAC;IAEpC,6FAA6F;IAC7F,MAAM,wBAAwB,GAAG,KAAK,CAAC,WAAW,CAAC,CAAC,KAA0C,EAAE,EAAE;QAChG,iBAAiB,CAAC,KAAK,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;IAC/C,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,MAAM,WAAW,GAAG,KAAK,CAAC,WAAW,CAAC,CAAC,QAAgB,EAAE,EAAE;QACzD,IAAI,cAAc,GAAG,QAAQ,CAAC;QAC9B,uBAAuB;QACvB,IAAI,UAAU,EAAE;YACd,sDAAsD;YACtD,MAAM,CAAC,IAAI,CAAC,GAAG,UAAU,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC,UAAU,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,0BAA0B,CAAA,CAAC,UAAU,CAAC,OAAO,CAAC,CAAC;YACrH,cAAc,GAAG,oCAAoC,CAAC,QAAQ,EAAE,UAAU,CAAC,eAAe,EAAE,IAAI,CAAC,CAAC;YAClG,WAAW,CAAC,OAAO,GAAG,cAAc,CAAC;SACtC;QACD,MAAM,eAAe,GAAG,WAAW,CAAC,cAAc,CAAC,CAAC;QACpD,QAAQ,IAAI,QAAQ,CAAC,cAAc,CAAC,CAAC;QACrC,iBAAiB,CAAC,eAAe,CAAC,CAAC;IAErC,CAAC,EAAE,CAAC,WAAW,EAAE,QAAQ,EAAE,UAAU,CAAC,CAAC,CAAC;IAExC;;;;;;KAMC;IACD,MAAM,aAAa,GAAG,KAAK,CAAC,WAAW,CAAC,CAAC,CAAqB,EAAE,EAAE;QAChE,IAAI,CAAC,CAAC;YACJ,OAAO,CAAC,CAAC;QAEX,IAAI,CAAC,GAAG,UAAU,CAAC,CAAC,CAAC,CAAC;QACtB,uBAAuB;QACvB,IAAI,KAAK,CAAC,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE;YAC5B,CAAC,GAAG,CAAC,CAAC;SACP;QAED,MAAM,cAAc,GAAG,CAAC,CAAC,CAAC,0CAA0C;QACpE,MAAM,CAAC,GAAG,IAAI,CAAC,GAAG,CAAC,EAAE,EAAE,cAAc,CAAC,CAAC;QACvC,MAAM,QAAQ,GAAG,SAAS,KAAK,GAAG,CAAC,CAAC,CAAC,MAAM,CAAC,gBAAgB,CAAC,CAAC,CAAC,GAAG,CAAC;QACnE,MAAM,QAAQ,GAAG,SAAS,KAAK,GAAG,CAAC,CAAC,CAAC,MAAM,CAAC,gBAAgB,CAAC,CAAC,CAAC,GAAG,CAAC;QACnE,CAAC,GAAG,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,QAAQ,CAAC,EAAE,QAAQ,CAAC,CAAC;QAC9C,CAAC,GAAG,IAAI,CAAC,KAAK,CAAC,CAAC,GAAG,CAAC,CAAC,GAAG,CAAC,CAAC;QAE1B,OAAO,CAAC,CAAC;IACX,CAAC,EAAE,CAAC,GAAG,EAAE,GAAG,CAAC,CAAC,CAAC;IAEf,MAAM,qBAAqB,GAAG,KAAK,CAAC,WAAW,CAAC,CAAC,QAAgB,EAAE,EAAE;QACnE,uBAAuB;QACvB,IAAI,UAAU,EAAE;YACd,MAAM,WAAW,GAAG,yBAAS,CAAC,iBAAiB,CAAC,oBAAoB,CAAC,QAAQ,EAAE,UAAU,CAAC,CAAC;YAC3F,mFAAmF;YACnF,IAAI,sBAAM,CAAC,gBAAgB,CAAC,WAAW,CAAC,EAAE;gBACxC,MAAM,cAAc,GAAG,WAAW,CAAC,KAAK,CAAC,CAAE,uBAAuB;gBAClE,iGAAiG;gBACjG,QAAQ,GAAG,WAAW,CAAC,cAAc,CAAE,CAAC;aACzC;iBAAM;gBACL,uBAAuB;gBACvB,IAAI,WAAW,CAAC,OAAO,EAAE,EAAE,gCAAgC;oBACzD,MAAM,qBAAqB,GAAG,WAAW,CAAC,WAAW,CAAC,OAAO,CAAC,CAAC;oBAC/D,iBAAiB,CAAC,qBAAqB,CAAC,CAAC;oBACzC,OAAO;iBACR;aACF;SACF;QACD,MAAM,QAAQ,GAAG,aAAa,CAAC,QAAQ,CAAC,CAAC;QACzC,uBAAuB;QACvB,IAAI,SAAS,KAAK,QAAQ;YACxB,WAAW,CAAC,QAAQ,CAAC,CAAC;IAC1B,CAAC,EAAE,CAAC,WAAW,EAAE,aAAa,EAAE,UAAU,EAAE,WAAW,CAAC,CAAC,CAAC;IAE1D,MAAM,UAAU,GAAG,KAAK,CAAC,WAAW,CAAC,CAAC,KAAyC,EAAE,EAAE;QACjF,MAAM,MAAM,GAAG,aAAa,CAAC,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;QACjD,MAAM,IAAI,MAAM,CAAC,KAAK,CAAC,CAAC;QACxB,WAAW,CAAC,MAAM,CAAC,CAAC;IACtB,CAAC,EAAE,CAAC,aAAa,EAAE,WAAW,EAAE,MAAM,CAAC,CAAC,CAAC;IAEzC,MAAM,iBAAiB,GAAG,KAAK,CAAC,WAAW,CAAC,CAAC,SAAkB,EAAE,EAAE;QACjE,IAAI,OAAO,IAAI,KAAK,UAAU,EAAE;YAC9B,MAAM,OAAO,GAAG,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC;YAChD,OAAO,OAAO,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,CAAC;SAC9B;QAED,OAAO,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC;IAC1B,CAAC,EAAE,CAAC,IAAI,CAAC,CAAC,CAAC;IAEX;;SAEK;IACL,MAAM,SAAS,GAAG,KAAK,CAAC,WAAW,CAAC,CAAC,SAAkB,EAAE,EAAE;QACzD,MAAM,cAAc,GAAG,iBAAiB,CAAC,SAAS,CAAC,CAAC;QAEpD,IAAI,GAAG,GAAG,aAAa,CAAC,cAAc,CAAC,GAAG,CAAC,SAAS,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC;QACzF,IAAI,IAAI,EAAE;YACR,GAAG,GAAG,IAAI,CAAC,KAAK,CAAC,GAAG,GAAG,cAAc,CAAC,GAAG,cAAc,CAAC;SACzD;QAED,MAAM,QAAQ,GAAG,SAAS,KAAK,GAAG,CAAC,CAAC,CAAC,MAAM,CAAC,gBAAgB,CAAC,CAAC,CAAC,GAAG,CAAC;QACnE,MAAM,QAAQ,GAAG,SAAS,KAAK,GAAG,CAAC,CAAC,CAAC,MAAM,CAAC,gBAAgB,CAAC,CAAC,CAAC,GAAG,CAAC;QACnE,GAAG,GAAG,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,GAAG,CAAC,GAAG,EAAE,QAAQ,CAAC,EAAE,QAAQ,CAAC,CAAC;QAElD,WAAW,CAAC,GAAG,CAAC,CAAC;IACnB,CAAC,EAAE,CAAC,cAAc,EAAE,iBAAiB,EAAE,GAAG,EAAE,GAAG,EAAE,aAAa,EAAE,IAAI,EAAE,WAAW,CAAC,CAAC,CAAC;IAEpF,MAAM,aAAa,GAAG,KAAK,CAAC,WAAW,CAAC,CAAC,KAA4C,EAAE,EAAE;QACvF,uBAAuB;QACvB,IAAI,KAAK,CAAC,GAAG,KAAK,2BAAU,CAAC,KAAK,EAAE;YAClC,qBAAqB,CAAC,KAAK,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;YACjD,KAAK,CAAC,cAAc,EAAE,CAAC;SACxB;aAAM,IAAI,KAAK,CAAC,GAAG,KAAK,2BAAU,CAAC,MAAM,EAAE;YAC1C,iBAAiB,CAAC,WAAW,CAAC,WAAW,CAAC,OAAO,CAAC,CAAC,CAAC;YACpD,KAAK,CAAC,cAAc,EAAE,CAAC;SACxB;aAAM,IAAI,KAAK,CAAC,GAAG,KAAK,2BAAU,CAAC,SAAS,EAAE;YAC7C,SAAS,CAAC,KAAK,CAAC,CAAC;YACjB,KAAK,CAAC,cAAc,EAAE,CAAC;SACxB;aAAM,IAAI,KAAK,CAAC,GAAG,KAAK,2BAAU,CAAC,OAAO,EAAE;YAC3C,SAAS,CAAC,IAAI,CAAC,CAAC;YAChB,KAAK,CAAC,cAAc,EAAE,CAAC;SACxB;QACD,SAAS,IAAI,SAAS,CAAC,KAAK,CAAC,CAAC;IAChC,CAAC,EAAE,CAAC,SAAS,EAAE,qBAAqB,EAAE,WAAW,EAAE,SAAS,CAAC,CAAC,CAAC;IAE/D,MAAM,eAAe,GAAG,KAAK,CAAC,WAAW,CAAC,CAAC,KAAmD,EAAE,EAAE;QAChG,SAAS,CAAC,KAAK,CAAC,CAAC;QACjB,KAAK,CAAC,cAAc,EAAE,CAAC;IACzB,CAAC,EAAE,CAAC,SAAS,CAAC,CAAC,CAAC;IAEhB,MAAM,aAAa,GAAG,KAAK,CAAC,WAAW,CAAC,CAAC,KAAmD,EAAE,EAAE;QAC9F,SAAS,CAAC,IAAI,CAAC,CAAC;QAChB,KAAK,CAAC,cAAc,EAAE,CAAC;IACzB,CAAC,EAAE,CAAC,SAAS,CAAC,CAAC,CAAC;IAEhB,uBAAuB;IACvB,MAAM,WAAW,GAAG,KAAK,CAAC,WAAW,CAAC,CAAC,KAAyC,EAAE,EAAE;QAClF,KAAK,CAAC,aAAa,CAAC,MAAM,EAAE,CAAC;IAC/B,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,MAAM,gBAAgB,GAAG,IAAA,oBAAU,EAAC,2CAA2C,EAAE,kBAAkB,EAAE,gBAAgB,IAAI,oCAAoC,CAAC,CAAC;IAC/J,OAAO,CACL,6BAAK,SAAS,EAAE,gBAAgB;QAC9B,6BAAK,SAAS,EAAC,6DAA6D;YAC1E,oBAAC,qBAAK,IAAC,GAAG,EAAE,GAAG,EAAE,KAAK,EAAE,cAAc,EAAE,QAAQ,EAAE,wBAAwB,EAAE,SAAS,EAAE,aAAa,EAClG,MAAM,EAAE,UAAU,EAAE,OAAO,EAAE,WAAW,KAAM,UAAU,GAAI;YAC9D,6BAAK,SAAS,EAAE,IAAA,oBAAU,EAAC,mDAAmD,EAAE,gBAAgB,IAAI,oCAAoC,CAAC;gBAEvI,6BAAK,SAAS,EAAC,kFAAkF,EAAC,QAAQ,EAAE,CAAC,CAAC,EAAE,OAAO,EAAE,aAAa;oBACpI,oBAAC,wBAAW,IAAC,QAAQ,EAAC,eAAe,GAAG,CACpC;gBAEN,6BAAK,SAAS,EAAC,oFAAoF,EAAC,QAAQ,EAAE,CAAC,CAAC,EAAE,OAAO,EAAE,eAAe;oBACxI,oBAAC,wBAAW,IAAC,QAAQ,EAAC,iBAAiB,GAAG,CACtC,CACF,CACF;QACN,8BAAM,SAAS,EAAC,wCAAwC,IAAE,SAAS,CAAQ,CACtE,CACR,CAAC;AACJ,CAAC,CACF,CAAC;AAEF;;;;;GAKG;AACU,QAAA,mBAAmB,GAA4D,6BAA6B,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 Inputs\r\n */\r\n\r\nimport \"./QuantityNumberInput.scss\";\r\nimport classnames from \"classnames\";\r\nimport * as React from \"react\";\r\nimport { WebFontIcon } from \"@itwin/core-react\";\r\nimport { SpecialKey } from \"@itwin/appui-abstract\";\r\nimport { IModelApp, QuantityFormatsChangedArgs, QuantityTypeArg } from \"@itwin/core-frontend\";\r\nimport { DecimalPrecision, FormatterSpec, FormatTraits, FormatType, Parser, ParserSpec, UnitConversionSpec, UnitProps } from \"@itwin/core-quantity\";\r\nimport { Input, InputProps } from \"@itwin/itwinui-react\";\r\n\r\n/** Step function prototype for [[QuantityNumberInput]] component\r\n * @beta\r\n */\r\nexport type StepFunctionProp = number | ((direction: string) => number | undefined);\r\n\r\n/** Properties for the [[QuantityNumberInput]] component\r\n * @beta\r\n */\r\nexport interface QuantityNumberInputProps extends Omit<InputProps, \"value\" | \"min\" | \"max\" | \"step\" | \"onFocus\" | \"onChange\"> {\r\n  /** Initial magnitude in 'persistence' units. See `getPersistenceUnitByQuantityType` in [QuantityFormatter]($core-frontend).\r\n   * Set to `undefined` to show placeholder text */\r\n  persistenceValue?: number;\r\n  /** CSS class name for the QuantityNumberInput component container div */\r\n  containerClassName?: string;\r\n  /** number or function\tNumber.MIN_SAFE_INTEGER */\r\n  min?: number;\r\n  /** number or function\tdefaults to Number.MAX_SAFE_INTEGER */\r\n  max?: number;\r\n  /** increment step value used while incrementing or decrementing (up/down buttons or arrow keys) defaults to 1. */\r\n  step?: StepFunctionProp;\r\n  /** Set to true to \"snap\" to the closest step value while incrementing or decrementing (up/down buttons or arrow keys). */\r\n  snap?: boolean;\r\n  /** Function to call when the quantity value is changed. The value returned will be in 'persistence' units. */\r\n  onChange?: (value: number) => void;\r\n  /** if true up/down buttons are shown larger and side by side */\r\n  showTouchButtons?: boolean;\r\n  /** Provides ability to return reference to HTMLInputElement */\r\n  ref?: React.Ref<HTMLInputElement>;\r\n  /** Type of quantity being input. */\r\n  quantityType: QuantityTypeArg;\r\n}\r\n\r\n/** adjust formatter spec to show only primary unit without a label.  */\r\nfunction adjustFormatterSpec(formatterSpec: FormatterSpec | undefined) {\r\n  if (undefined === formatterSpec)\r\n    return formatterSpec;\r\n  const singleUnitConversion: UnitConversionSpec[] = [];\r\n  singleUnitConversion.push(formatterSpec.unitConversions[0]);\r\n  const newFormat = formatterSpec.format.clone({\r\n    showOnlyPrimaryUnit: true,\r\n    traits: formatterSpec.format.formatTraits & ~FormatTraits.ShowUnitLabel,\r\n    type: FormatType.Decimal,\r\n    precision: FormatType.Decimal !== formatterSpec.format.type ? DecimalPrecision.Four : formatterSpec.format.precision,\r\n  });\r\n  return new FormatterSpec(\"single-value\", newFormat, singleUnitConversion, formatterSpec.persistenceUnit);\r\n}\r\n\r\nfunction convertValueFromDisplayToPersistence(value: number, unitConversions: UnitConversionSpec[] | undefined, unit: UnitProps) {\r\n  // istanbul ignore next\r\n  if (!unitConversions || 0 === unitConversions.length)\r\n    return value;\r\n\r\n  const unitConversion = unitConversions.find((spec) => spec.name === unit.name);\r\n  // istanbul ignore next\r\n  if (!unitConversion)\r\n    return value;\r\n\r\n  const convertedValue = (value * unitConversion.conversion.factor) + unitConversion.conversion.offset;\r\n  return convertedValue;\r\n}\r\n\r\nfunction getUnitLabel(parserSpec: ParserSpec | undefined) {\r\n  if (undefined === parserSpec)\r\n    return \"\";\r\n\r\n  const format = parserSpec.format;\r\n  // istanbul ignore else\r\n  if (!format.units || !format.units[0])\r\n    return parserSpec.outUnit.label;\r\n  const [unit, label] = format.units[0];\r\n  // istanbul ignore next\r\n  return label ?? unit.label;\r\n}\r\n\r\nconst ForwardRefQuantityNumberInput = React.forwardRef<HTMLInputElement, QuantityNumberInputProps>(\r\n  function ForwardRefQuantityNumberInput(props, ref) {\r\n\r\n    const { containerClassName, persistenceValue, min, max,\r\n      onChange, onBlur, onKeyDown, step, snap, showTouchButtons, quantityType, ...otherProps } = props;\r\n    const rawValueRef = React.useRef(persistenceValue);\r\n\r\n    const [formatterSpec, setFormatterSpec] = React.useState(() => adjustFormatterSpec(IModelApp.quantityFormatter.findFormatterSpecByQuantityType(quantityType)));\r\n    const [parserSpec, setParserSpec] = React.useState(() => IModelApp.quantityFormatter.findParserSpecByQuantityType(quantityType));\r\n\r\n    const formatValue = React.useCallback((value: number | undefined) => {\r\n      if (undefined === value)\r\n        return \"\";\r\n\r\n      // istanbul ignore else\r\n      if (formatterSpec) {\r\n        return formatterSpec.applyFormatting(value);\r\n      }\r\n      // istanbul ignore next\r\n      return value.toFixed(2);\r\n    }, [formatterSpec]);\r\n\r\n    const lastFormattedValueRef = React.useRef(formatValue(persistenceValue));\r\n    const [formattedValue, setFormattedValue] = React.useState(() => lastFormattedValueRef.current);\r\n\r\n    React.useEffect(() => {\r\n      const handleUnitSystemChanged = ((): void => {\r\n        setFormatterSpec(adjustFormatterSpec(IModelApp.quantityFormatter.findFormatterSpecByQuantityType(quantityType)));\r\n        setParserSpec(IModelApp.quantityFormatter.findParserSpecByQuantityType(quantityType));\r\n      });\r\n\r\n      IModelApp.quantityFormatter.onActiveFormattingUnitSystemChanged.addListener(handleUnitSystemChanged);\r\n      return () => {\r\n        IModelApp.quantityFormatter.onActiveFormattingUnitSystemChanged.removeListener(handleUnitSystemChanged);\r\n      };\r\n    }, [quantityType]);\r\n\r\n    React.useEffect(() => {\r\n      const handleUnitSystemChanged = ((args: QuantityFormatsChangedArgs): void => {\r\n        const quantityKey = IModelApp.quantityFormatter.getQuantityTypeKey(quantityType);\r\n        // istanbul ignore else\r\n        if (args.quantityType === quantityKey) {\r\n          setFormatterSpec(adjustFormatterSpec(IModelApp.quantityFormatter.findFormatterSpecByQuantityType(quantityType)));\r\n          setParserSpec(IModelApp.quantityFormatter.findParserSpecByQuantityType(quantityType));\r\n        }\r\n      });\r\n\r\n      IModelApp.quantityFormatter.onQuantityFormatsChanged.addListener(handleUnitSystemChanged);\r\n      return () => {\r\n        IModelApp.quantityFormatter.onQuantityFormatsChanged.removeListener(handleUnitSystemChanged);\r\n      };\r\n    }, [quantityType]);\r\n\r\n    const unitLabel = getUnitLabel(parserSpec);\r\n\r\n    // See if new initialValue props have changed since component mounted\r\n    React.useEffect(() => {\r\n      rawValueRef.current = persistenceValue;\r\n      const currentFormattedValue = formatValue(rawValueRef.current);\r\n      setFormattedValue(currentFormattedValue);\r\n    }, [formatValue, persistenceValue]);\r\n\r\n    // this is the unprocessed input from user, it is not processed until blur or enter key press\r\n    const handleDisplayValueChange = React.useCallback((event: React.ChangeEvent<HTMLInputElement>) => {\r\n      setFormattedValue(event.currentTarget.value);\r\n    }, []);\r\n\r\n    const updateValue = React.useCallback((newValue: number) => {\r\n      let persistedValue = newValue;\r\n      // istanbul ignore else\r\n      if (parserSpec) {\r\n        // convert value from display unit to persistence unit\r\n        const [unit] = parserSpec.format.units ? parserSpec.format.units[0] : /* istanbul ignore next */[parserSpec.outUnit];\r\n        persistedValue = convertValueFromDisplayToPersistence(newValue, parserSpec.unitConversions, unit);\r\n        rawValueRef.current = persistedValue;\r\n      }\r\n      const newFormattedVal = formatValue(persistedValue);\r\n      onChange && onChange(persistedValue);\r\n      setFormattedValue(newFormattedVal);\r\n\r\n    }, [formatValue, onChange, parserSpec]);\r\n\r\n    /**\r\n   * Used internally to parse the argument x to it's numeric representation.\r\n   * If the argument cannot be converted to finite number returns 0; If a\r\n   * \"precision\" prop is specified uses it round the number with that\r\n   * precision (no fixed precision here because the return value is float, not\r\n   * string).\r\n   */\r\n    const parseInternal = React.useCallback((x: string | undefined) => {\r\n      if (!x)\r\n        return 0;\r\n\r\n      let n = parseFloat(x);\r\n      // istanbul ignore next\r\n      if (isNaN(n) || !isFinite(n)) {\r\n        n = 0;\r\n      }\r\n\r\n      const localPrecision = 6; // TODO get a reasonable value from format\r\n      const q = Math.pow(10, localPrecision);\r\n      const localMin = undefined === min ? Number.MIN_SAFE_INTEGER : min;\r\n      const localMax = undefined === max ? Number.MAX_SAFE_INTEGER : max;\r\n      n = Math.min(Math.max(n, localMin), localMax);\r\n      n = Math.round(n * q) / q;\r\n\r\n      return n;\r\n    }, [min, max]);\r\n\r\n    const updateValueFromString = React.useCallback((strValue: string) => {\r\n      // istanbul ignore else\r\n      if (parserSpec) {\r\n        const parseResult = IModelApp.quantityFormatter.parseToQuantityValue(strValue, parserSpec);\r\n        // at this point we should have a string value in persistence units without a label\r\n        if (Parser.isParsedQuantity(parseResult)) {\r\n          const persistedValue = parseResult.value;  // in persistence units\r\n          // set strValue and let it go through parseInternal which will ensure min/max limits are observed\r\n          strValue = formatValue(persistedValue)!;\r\n        } else {\r\n          // istanbul ignore else\r\n          if (rawValueRef.current) { // restore last known good value\r\n            const lastKnownFormattedVal = formatValue(rawValueRef.current);\r\n            setFormattedValue(lastKnownFormattedVal);\r\n            return;\r\n          }\r\n        }\r\n      }\r\n      const newValue = parseInternal(strValue);\r\n      // istanbul ignore else\r\n      if (undefined !== newValue)\r\n        updateValue(newValue);\r\n    }, [formatValue, parseInternal, parserSpec, updateValue]);\r\n\r\n    const handleBlur = React.useCallback((event: React.FocusEvent<HTMLInputElement>) => {\r\n      const newVal = parseInternal(event.target.value);\r\n      onBlur && onBlur(event);\r\n      updateValue(newVal);\r\n    }, [parseInternal, updateValue, onBlur]);\r\n\r\n    const getIncrementValue = React.useCallback((increment: boolean) => {\r\n      if (typeof step === \"function\") {\r\n        const stepVal = step(increment ? \"up\" : \"down\");\r\n        return stepVal ? stepVal : 1;\r\n      }\r\n\r\n      return !step ? 1 : step;\r\n    }, [step]);\r\n\r\n    /**\r\n       * The internal method that actually sets the new value on the input\r\n       */\r\n    const applyStep = React.useCallback((increment: boolean) => {\r\n      const incrementValue = getIncrementValue(increment);\r\n\r\n      let num = parseInternal(formattedValue) + (increment ? incrementValue : -incrementValue);\r\n      if (snap) {\r\n        num = Math.round(num / incrementValue) * incrementValue;\r\n      }\r\n\r\n      const localMin = undefined === min ? Number.MIN_SAFE_INTEGER : min;\r\n      const localMax = undefined === max ? Number.MAX_SAFE_INTEGER : max;\r\n      num = Math.min(Math.max(num, localMin), localMax);\r\n\r\n      updateValue(num);\r\n    }, [formattedValue, getIncrementValue, max, min, parseInternal, snap, updateValue]);\r\n\r\n    const handleKeyDown = React.useCallback((event: React.KeyboardEvent<HTMLInputElement>) => {\r\n      // istanbul ignore else\r\n      if (event.key === SpecialKey.Enter) {\r\n        updateValueFromString(event.currentTarget.value);\r\n        event.preventDefault();\r\n      } else if (event.key === SpecialKey.Escape) {\r\n        setFormattedValue(formatValue(rawValueRef.current));\r\n        event.preventDefault();\r\n      } else if (event.key === SpecialKey.ArrowDown) {\r\n        applyStep(false);\r\n        event.preventDefault();\r\n      } else if (event.key === SpecialKey.ArrowUp) {\r\n        applyStep(true);\r\n        event.preventDefault();\r\n      }\r\n      onKeyDown && onKeyDown(event);\r\n    }, [onKeyDown, updateValueFromString, formatValue, applyStep]);\r\n\r\n    const handleDownClick = React.useCallback((event: React.MouseEvent<HTMLDivElement, MouseEvent>) => {\r\n      applyStep(false);\r\n      event.preventDefault();\r\n    }, [applyStep]);\r\n\r\n    const handleUpClick = React.useCallback((event: React.MouseEvent<HTMLDivElement, MouseEvent>) => {\r\n      applyStep(true);\r\n      event.preventDefault();\r\n    }, [applyStep]);\r\n\r\n    // istanbul ignore next\r\n    const handleFocus = React.useCallback((event: React.FocusEvent<HTMLInputElement>) => {\r\n      event.currentTarget.select();\r\n    }, []);\r\n\r\n    const containerClasses = classnames(\"component-quantity-number-input-container\", containerClassName, showTouchButtons && \"component-number-buttons-for-touch\");\r\n    return (\r\n      <div className={containerClasses} >\r\n        <div className=\"component-quantity-number-input-value-and-buttons-container\">\r\n          <Input ref={ref} value={formattedValue} onChange={handleDisplayValueChange} onKeyDown={handleKeyDown}\r\n            onBlur={handleBlur} onFocus={handleFocus} {...otherProps} />\r\n          <div className={classnames(\"component-quantity-number-input-buttons-container\", showTouchButtons && \"component-number-buttons-for-touch\")}>\r\n            { /* eslint-disable-next-line jsx-a11y/no-static-element-interactions, jsx-a11y/click-events-have-key-events */}\r\n            <div className=\"component-quantity-number-input-button component-quantity-number-input-button-up\" tabIndex={-1} onClick={handleUpClick}>\r\n              <WebFontIcon iconName=\"icon-caret-up\" />\r\n            </div>\r\n            { /* eslint-disable-next-line jsx-a11y/no-static-element-interactions, jsx-a11y/click-events-have-key-events */}\r\n            <div className=\"component-quantity-number-input-button component-quantity-number-input-button-down\" tabIndex={-1} onClick={handleDownClick}>\r\n              <WebFontIcon iconName=\"icon-caret-down\" />\r\n            </div>\r\n          </div>\r\n        </div>\r\n        <span className=\"component-quantity-number-input-suffix\">{unitLabel}</span>\r\n      </div >\r\n    );\r\n  }\r\n);\r\n\r\n/** The QuantityNumberInput component accepts input for quantity values. The quantity value is shown as a single numeric value and the quantity's\r\n * \"display\" unit is shown next to the input control. The \"display\" unit is determined by the active unit system as defined by the [QuantityFormatter]($frontend).\r\n * The control also display buttons to increment and decrement the \"displayed\" value. The value reported by via the onChange function is in \"persistence\"\r\n * units that can be stored in the iModel.\r\n * @beta\r\n */\r\nexport const QuantityNumberInput: (props: QuantityNumberInputProps) => JSX.Element | null = ForwardRefQuantityNumberInput;\r\n"]}
+{"version":3,"file":"QuantityNumberInput.js","sourceRoot":"","sources":["../../../../src/imodel-components-react/inputs/QuantityNumberInput.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 Inputs\r\n */\r\n\r\nimport \"./QuantityNumberInput.scss\";\r\nimport classnames from \"classnames\";\r\nimport * as React from \"react\";\r\nimport { WebFontIcon } from \"@itwin/core-react\";\r\nimport { SpecialKey } from \"@itwin/appui-abstract\";\r\nimport { IModelApp, QuantityFormatsChangedArgs, QuantityTypeArg } from \"@itwin/core-frontend\";\r\nimport { DecimalPrecision, FormatterSpec, FormatTraits, FormatType, Parser, ParserSpec, UnitConversionSpec, UnitProps } from \"@itwin/core-quantity\";\r\nimport { Input, InputProps } from \"@itwin/itwinui-react\";\r\n\r\n/** Step function prototype for [[QuantityNumberInput]] component\r\n * @beta\r\n */\r\nexport type StepFunctionProp = number | ((direction: string) => number | undefined);\r\n\r\n/** Properties for the [[QuantityNumberInput]] component\r\n * @beta\r\n */\r\nexport interface QuantityNumberInputProps extends Omit<InputProps, \"value\" | \"min\" | \"max\" | \"step\" | \"onFocus\" | \"onChange\"> {\r\n  /** Initial magnitude in 'persistence' units. See `getPersistenceUnitByQuantityType` in [QuantityFormatter]($core-frontend).\r\n   * Set to `undefined` to show placeholder text */\r\n  persistenceValue?: number;\r\n  /** CSS class name for the QuantityNumberInput component container div */\r\n  containerClassName?: string;\r\n  /** number or function\tNumber.MIN_SAFE_INTEGER */\r\n  min?: number;\r\n  /** number or function\tdefaults to Number.MAX_SAFE_INTEGER */\r\n  max?: number;\r\n  /** increment step value used while incrementing or decrementing (up/down buttons or arrow keys) defaults to 1. */\r\n  step?: StepFunctionProp;\r\n  /** Set to true to \"snap\" to the closest step value while incrementing or decrementing (up/down buttons or arrow keys). */\r\n  snap?: boolean;\r\n  /** Function to call when the quantity value is changed. The value returned will be in 'persistence' units. */\r\n  onChange?: (value: number) => void;\r\n  /** if true up/down buttons are shown larger and side by side */\r\n  showTouchButtons?: boolean;\r\n  /** Provides ability to return reference to HTMLInputElement */\r\n  ref?: React.Ref<HTMLInputElement>;\r\n  /** Type of quantity being input. */\r\n  quantityType: QuantityTypeArg;\r\n}\r\n\r\n/** adjust formatter spec to show only primary unit without a label.  */\r\nfunction adjustFormatterSpec(formatterSpec: FormatterSpec | undefined) {\r\n  if (undefined === formatterSpec)\r\n    return formatterSpec;\r\n  const singleUnitConversion: UnitConversionSpec[] = [];\r\n  singleUnitConversion.push(formatterSpec.unitConversions[0]);\r\n  const newFormat = formatterSpec.format.clone({\r\n    showOnlyPrimaryUnit: true,\r\n    traits: formatterSpec.format.formatTraits & ~FormatTraits.ShowUnitLabel,\r\n    type: FormatType.Decimal,\r\n    precision: FormatType.Decimal !== formatterSpec.format.type ? DecimalPrecision.Four : formatterSpec.format.precision,\r\n  });\r\n  return new FormatterSpec(\"single-value\", newFormat, singleUnitConversion, formatterSpec.persistenceUnit);\r\n}\r\n\r\nfunction convertValueFromDisplayToPersistence(value: number, unitConversions: UnitConversionSpec[] | undefined, unit: UnitProps) {\r\n  // istanbul ignore next\r\n  if (!unitConversions || 0 === unitConversions.length)\r\n    return value;\r\n\r\n  const unitConversion = unitConversions.find((spec) => spec.name === unit.name);\r\n  // istanbul ignore next\r\n  if (!unitConversion)\r\n    return value;\r\n\r\n  const convertedValue = (value * unitConversion.conversion.factor) + unitConversion.conversion.offset;\r\n  return convertedValue;\r\n}\r\n\r\nfunction getUnitLabel(parserSpec: ParserSpec | undefined) {\r\n  if (undefined === parserSpec)\r\n    return \"\";\r\n\r\n  const format = parserSpec.format;\r\n  // istanbul ignore else\r\n  if (!format.units || !format.units[0])\r\n    return parserSpec.outUnit.label;\r\n  const [unit, label] = format.units[0];\r\n  // istanbul ignore next\r\n  return label ?? unit.label;\r\n}\r\n\r\nconst ForwardRefQuantityNumberInput = React.forwardRef<HTMLInputElement, QuantityNumberInputProps>(\r\n  function ForwardRefQuantityNumberInput(props, ref) {\r\n\r\n    const { containerClassName, persistenceValue, min, max,\r\n      onChange, onBlur, onKeyDown, step, snap, showTouchButtons, quantityType, ...otherProps } = props;\r\n    const rawValueRef = React.useRef(persistenceValue);\r\n\r\n    const [formatterSpec, setFormatterSpec] = React.useState(() => adjustFormatterSpec(IModelApp.quantityFormatter.findFormatterSpecByQuantityType(quantityType)));\r\n    const [parserSpec, setParserSpec] = React.useState(() => IModelApp.quantityFormatter.findParserSpecByQuantityType(quantityType));\r\n\r\n    const formatValue = React.useCallback((value: number | undefined) => {\r\n      if (undefined === value)\r\n        return \"\";\r\n\r\n      // istanbul ignore else\r\n      if (formatterSpec) {\r\n        return formatterSpec.applyFormatting(value);\r\n      }\r\n      // istanbul ignore next\r\n      return value.toFixed(2);\r\n    }, [formatterSpec]);\r\n\r\n    const lastFormattedValueRef = React.useRef(formatValue(persistenceValue));\r\n    const [formattedValue, setFormattedValue] = React.useState(() => lastFormattedValueRef.current);\r\n\r\n    React.useEffect(() => {\r\n      const handleUnitSystemChanged = ((): void => {\r\n        setFormatterSpec(adjustFormatterSpec(IModelApp.quantityFormatter.findFormatterSpecByQuantityType(quantityType)));\r\n        setParserSpec(IModelApp.quantityFormatter.findParserSpecByQuantityType(quantityType));\r\n      });\r\n\r\n      IModelApp.quantityFormatter.onActiveFormattingUnitSystemChanged.addListener(handleUnitSystemChanged);\r\n      return () => {\r\n        IModelApp.quantityFormatter.onActiveFormattingUnitSystemChanged.removeListener(handleUnitSystemChanged);\r\n      };\r\n    }, [quantityType]);\r\n\r\n    React.useEffect(() => {\r\n      const handleUnitSystemChanged = ((args: QuantityFormatsChangedArgs): void => {\r\n        const quantityKey = IModelApp.quantityFormatter.getQuantityTypeKey(quantityType);\r\n        // istanbul ignore else\r\n        if (args.quantityType === quantityKey) {\r\n          setFormatterSpec(adjustFormatterSpec(IModelApp.quantityFormatter.findFormatterSpecByQuantityType(quantityType)));\r\n          setParserSpec(IModelApp.quantityFormatter.findParserSpecByQuantityType(quantityType));\r\n        }\r\n      });\r\n\r\n      IModelApp.quantityFormatter.onQuantityFormatsChanged.addListener(handleUnitSystemChanged);\r\n      return () => {\r\n        IModelApp.quantityFormatter.onQuantityFormatsChanged.removeListener(handleUnitSystemChanged);\r\n      };\r\n    }, [quantityType]);\r\n\r\n    const unitLabel = getUnitLabel(parserSpec);\r\n\r\n    // See if new initialValue props have changed since component mounted\r\n    React.useEffect(() => {\r\n      rawValueRef.current = persistenceValue;\r\n      const currentFormattedValue = formatValue(rawValueRef.current);\r\n      setFormattedValue(currentFormattedValue);\r\n    }, [formatValue, persistenceValue]);\r\n\r\n    // this is the unprocessed input from user, it is not processed until blur or enter key press\r\n    const handleDisplayValueChange = React.useCallback((event: React.ChangeEvent<HTMLInputElement>) => {\r\n      setFormattedValue(event.currentTarget.value);\r\n    }, []);\r\n\r\n    const updateValue = React.useCallback((newValue: number) => {\r\n      let persistedValue = newValue;\r\n      // istanbul ignore else\r\n      if (parserSpec) {\r\n        // convert value from display unit to persistence unit\r\n        const [unit] = parserSpec.format.units ? parserSpec.format.units[0] : /* istanbul ignore next */[parserSpec.outUnit];\r\n        persistedValue = convertValueFromDisplayToPersistence(newValue, parserSpec.unitConversions, unit);\r\n        rawValueRef.current = persistedValue;\r\n      }\r\n      const newFormattedVal = formatValue(persistedValue);\r\n      onChange && onChange(persistedValue);\r\n      setFormattedValue(newFormattedVal);\r\n\r\n    }, [formatValue, onChange, parserSpec]);\r\n\r\n    /**\r\n   * Used internally to parse the argument x to it's numeric representation.\r\n   * If the argument cannot be converted to finite number returns 0; If a\r\n   * \"precision\" prop is specified uses it round the number with that\r\n   * precision (no fixed precision here because the return value is float, not\r\n   * string).\r\n   */\r\n    const parseInternal = React.useCallback((x: string | undefined) => {\r\n      if (!x)\r\n        return 0;\r\n\r\n      let n = parseFloat(x);\r\n      // istanbul ignore next\r\n      if (isNaN(n) || !isFinite(n)) {\r\n        n = 0;\r\n      }\r\n\r\n      const localPrecision = 6; // TODO get a reasonable value from format\r\n      const q = Math.pow(10, localPrecision);\r\n      const localMin = undefined === min ? Number.MIN_SAFE_INTEGER : min;\r\n      const localMax = undefined === max ? Number.MAX_SAFE_INTEGER : max;\r\n      n = Math.min(Math.max(n, localMin), localMax);\r\n      n = Math.round(n * q) / q;\r\n\r\n      return n;\r\n    }, [min, max]);\r\n\r\n    const updateValueFromString = React.useCallback((strValue: string) => {\r\n      // istanbul ignore else\r\n      if (parserSpec) {\r\n        const parseResult = IModelApp.quantityFormatter.parseToQuantityValue(strValue, parserSpec);\r\n        // at this point we should have a string value in persistence units without a label\r\n        if (Parser.isParsedQuantity(parseResult)) {\r\n          const persistedValue = parseResult.value;  // in persistence units\r\n          // set strValue and let it go through parseInternal which will ensure min/max limits are observed\r\n          strValue = formatValue(persistedValue)!;\r\n        } else {\r\n          // istanbul ignore else\r\n          if (rawValueRef.current) { // restore last known good value\r\n            const lastKnownFormattedVal = formatValue(rawValueRef.current);\r\n            setFormattedValue(lastKnownFormattedVal);\r\n            return;\r\n          }\r\n        }\r\n      }\r\n      const newValue = parseInternal(strValue);\r\n      // istanbul ignore else\r\n      if (undefined !== newValue)\r\n        updateValue(newValue);\r\n    }, [formatValue, parseInternal, parserSpec, updateValue]);\r\n\r\n    const handleBlur = React.useCallback((event: React.FocusEvent<HTMLInputElement>) => {\r\n      const newVal = parseInternal(event.target.value);\r\n      onBlur && onBlur(event);\r\n      updateValue(newVal);\r\n    }, [parseInternal, updateValue, onBlur]);\r\n\r\n    const getIncrementValue = React.useCallback((increment: boolean) => {\r\n      if (typeof step === \"function\") {\r\n        const stepVal = step(increment ? \"up\" : \"down\");\r\n        return stepVal ? stepVal : 1;\r\n      }\r\n\r\n      return !step ? 1 : step;\r\n    }, [step]);\r\n\r\n    /**\r\n       * The internal method that actually sets the new value on the input\r\n       */\r\n    const applyStep = React.useCallback((increment: boolean) => {\r\n      const incrementValue = getIncrementValue(increment);\r\n\r\n      let num = parseInternal(formattedValue) + (increment ? incrementValue : -incrementValue);\r\n      if (snap) {\r\n        num = Math.round(num / incrementValue) * incrementValue;\r\n      }\r\n\r\n      const localMin = undefined === min ? Number.MIN_SAFE_INTEGER : min;\r\n      const localMax = undefined === max ? Number.MAX_SAFE_INTEGER : max;\r\n      num = Math.min(Math.max(num, localMin), localMax);\r\n\r\n      updateValue(num);\r\n    }, [formattedValue, getIncrementValue, max, min, parseInternal, snap, updateValue]);\r\n\r\n    const handleKeyDown = React.useCallback((event: React.KeyboardEvent<HTMLInputElement>) => {\r\n      // istanbul ignore else\r\n      if (event.key === SpecialKey.Enter) {\r\n        updateValueFromString(event.currentTarget.value);\r\n        event.preventDefault();\r\n      } else if (event.key === SpecialKey.Escape) {\r\n        setFormattedValue(formatValue(rawValueRef.current));\r\n        event.preventDefault();\r\n      } else if (event.key === SpecialKey.ArrowDown) {\r\n        applyStep(false);\r\n        event.preventDefault();\r\n      } else if (event.key === SpecialKey.ArrowUp) {\r\n        applyStep(true);\r\n        event.preventDefault();\r\n      }\r\n      onKeyDown && onKeyDown(event);\r\n    }, [onKeyDown, updateValueFromString, formatValue, applyStep]);\r\n\r\n    const handleDownClick = React.useCallback((event: React.MouseEvent<HTMLDivElement, MouseEvent>) => {\r\n      applyStep(false);\r\n      event.preventDefault();\r\n    }, [applyStep]);\r\n\r\n    const handleUpClick = React.useCallback((event: React.MouseEvent<HTMLDivElement, MouseEvent>) => {\r\n      applyStep(true);\r\n      event.preventDefault();\r\n    }, [applyStep]);\r\n\r\n    // istanbul ignore next\r\n    const handleFocus = React.useCallback((event: React.FocusEvent<HTMLInputElement>) => {\r\n      event.currentTarget.select();\r\n    }, []);\r\n\r\n    const isDisabled = !!otherProps.disabled;\r\n    const containerClasses = classnames(\"component-quantity-number-input-container\",\r\n      containerClassName, showTouchButtons && \"component-number-buttons-for-touch\",\r\n      isDisabled && \"component-quantity-number-input-disabled\",\r\n    );\r\n    return (\r\n      <div className={containerClasses} >\r\n        <div className=\"component-quantity-number-input-value-and-buttons-container\">\r\n          <Input ref={ref} value={formattedValue} onChange={handleDisplayValueChange} onKeyDown={handleKeyDown}\r\n            onBlur={handleBlur} onFocus={handleFocus} size=\"small\" {...otherProps} />\r\n          <div className={classnames(\"component-quantity-number-input-buttons-container\", showTouchButtons && \"component-number-buttons-for-touch\")}>\r\n            { /* eslint-disable-next-line jsx-a11y/no-static-element-interactions, jsx-a11y/click-events-have-key-events */}\r\n            <div className=\"component-quantity-number-input-button component-quantity-number-input-button-up\" tabIndex={-1} onClick={handleUpClick}>\r\n              <WebFontIcon iconName=\"icon-caret-up\" />\r\n            </div>\r\n            { /* eslint-disable-next-line jsx-a11y/no-static-element-interactions, jsx-a11y/click-events-have-key-events */}\r\n            <div className=\"component-quantity-number-input-button component-quantity-number-input-button-down\" tabIndex={-1} onClick={handleDownClick}>\r\n              <WebFontIcon iconName=\"icon-caret-down\" />\r\n            </div>\r\n          </div>\r\n        </div>\r\n        <span className=\"component-quantity-number-input-suffix\">{unitLabel}</span>\r\n      </div >\r\n    );\r\n  }\r\n);\r\n\r\n/** The QuantityNumberInput component accepts input for quantity values. The quantity value is shown as a single numeric value and the quantity's\r\n * \"display\" unit is shown next to the input control. The \"display\" unit is determined by the active unit system as defined by the [QuantityFormatter]($frontend).\r\n * The control also display buttons to increment and decrement the \"displayed\" value. The value reported by via the onChange function is in \"persistence\"\r\n * units that can be stored in the iModel.\r\n * @beta\r\n */\r\nexport const QuantityNumberInput: (props: QuantityNumberInputProps) => JSX.Element | null = ForwardRefQuantityNumberInput;\r\n"]}