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

package/lib/esm/imodel-components-react/color/SaturationPicker.js

@@ -1,188 +1,188 @@
-/*---------------------------------------------------------------------------------------------
-* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
-* See LICENSE.md in the project root for license terms and full copyright notice.
-*--------------------------------------------------------------------------------------------*/
-/** @packageDocumentation
- * @module Color
- */
-import "./SaturationPicker.scss";
-import classnames from "classnames";
-import * as React from "react";
-import { ColorDef, HSVColor } from "@itwin/core-common";
-import { SpecialKey } from "@itwin/appui-abstract";
-import { UiIModelComponents } from "../UiIModelComponents";
-function calculateChange(e, hsv, container) {
-    const { width: containerWidth, height: containerHeight, top: containerTop, left: containerLeft } = container.getBoundingClientRect();
-    let x;
-    if ("pageX" in e) {
-        x = e.pageX;
-    }
-    else {
-        // istanbul ignore next
-        if (undefined !== e.touches && e.touches.length)
-            x = e.touches[0].pageX;
-    }
-    // istanbul ignore if
-    if (undefined === x)
-        return hsv;
-    let y = 0;
-    if ("pageY" in e) {
-        y = e.pageY;
-    }
-    else {
-        // istanbul ignore next
-        if (undefined !== e.touches && e.touches.length)
-            y = e.touches[0].pageY;
-    }
-    // istanbul ignore if
-    if (undefined === y)
-        return hsv;
-    let left = x - (containerLeft + window.scrollX);
-    let top = y - (containerTop + window.scrollY);
-    // istanbul ignore next
-    if (left < 0) {
-        left = 0;
-    }
-    else if (left > containerWidth) {
-        left = containerWidth;
-    }
-    else if (top < 0) {
-        top = 0;
-    }
-    else if (top > containerHeight) {
-        top = containerHeight;
-    }
-    let saturation = Math.round((left * 100) / containerWidth);
-    let value = Math.round(-((top * 100) / containerHeight) + 100);
-    // istanbul ignore if
-    if (saturation < 0)
-        saturation = 0;
-    // istanbul ignore if
-    if (saturation > 100)
-        saturation = 100;
-    // istanbul ignore if
-    if (value < 0)
-        value = 0;
-    // istanbul ignore if
-    if (value > 100)
-        value = 100;
-    return hsv.clone(hsv.h, saturation, value);
-}
-/** SaturationPicker component used to set the saturation value.
- * @beta
- */
-export function SaturationPicker({ onSaturationChange, hsv, className, style }) {
-    const container = React.useRef(null);
-    const [saturationLabel] = React.useState(() => UiIModelComponents.translate("color.saturation"));
-    const isDragging = React.useRef(false);
-    const onChange = React.useCallback((e) => {
-        // istanbul ignore else
-        if (container.current) {
-            const newHsvColor = calculateChange(e, hsv, container.current);
-            // istanbul ignore else
-            if (newHsvColor) {
-                // istanbul ignore else
-                if (onSaturationChange)
-                    onSaturationChange(newHsvColor);
-            }
-        }
-    }, [hsv, onSaturationChange]);
-    const onDragging = React.useCallback((e) => {
-        // istanbul ignore else
-        if (isDragging.current) {
-            onChange(e);
-        }
-    }, [onChange]);
-    const onMouseUp = React.useCallback(() => {
-        // istanbul ignore else
-        if (isDragging.current) {
-            isDragging.current = false;
-        }
-    }, []);
-    const onTouchEnd = React.useCallback((event) => {
-        // istanbul ignore else
-        if (isDragging.current) {
-            onChange(event);
-            isDragging.current = false;
-        }
-    }, [onChange]);
-    const onMouseDown = React.useCallback((e) => {
-        // istanbul ignore else
-        if (e.target !== e.currentTarget) {
-            isDragging.current = true;
-            document.addEventListener("mouseup", onMouseUp, { capture: true, once: true });
-        }
-        onChange(e);
-        // istanbul ignore else
-        if (container.current)
-            container.current.focus();
-        e.preventDefault();
-    }, [onChange, onMouseUp]);
-    const onTouchStart = React.useCallback((e) => {
-        // istanbul ignore else
-        if (e.target !== e.currentTarget)
-            isDragging.current = true;
-        onChange(e);
-        // istanbul ignore else
-        if (container.current)
-            container.current.focus();
-    }, [onChange]);
-    const onKeyDown = React.useCallback((evt) => {
-        const h = hsv.h;
-        let { s, v } = { ...hsv };
-        if (evt.key === SpecialKey.ArrowLeft) {
-            s -= (evt.ctrlKey ? 10 : 1);
-        }
-        else if (evt.key === SpecialKey.ArrowDown) {
-            v -= (evt.ctrlKey ? 10 : 1);
-        }
-        else if (evt.key === SpecialKey.ArrowRight) {
-            s += (evt.ctrlKey ? 10 : 1);
-        }
-        else if (evt.key === SpecialKey.ArrowUp) {
-            v += (evt.ctrlKey ? 10 : 1);
-        }
-        else if (evt.key === SpecialKey.PageDown) {
-            v = 0;
-        }
-        else if (evt.key === SpecialKey.PageUp) {
-            v = 100;
-        }
-        else if (evt.key === SpecialKey.Home) {
-            s = 0;
-        }
-        else {
-            // istanbul ignore else
-            if (evt.key === SpecialKey.End) {
-                s = 100;
-            }
-        }
-        // istanbul ignore if
-        if (s < 0)
-            s = 0;
-        // istanbul ignore if
-        if (s > 100)
-            s = 100;
-        // istanbul ignore if
-        if (v < 0)
-            v = 0;
-        // istanbul ignore if
-        if (v > 100)
-            v = 100;
-        const newColor = new HSVColor(h, s, v);
-        // istanbul ignore else
-        if (onSaturationChange)
-            onSaturationChange(newColor);
-        evt.preventDefault();
-    }, [hsv, onSaturationChange]);
-    const pointerStyle = React.useMemo(() => ({
-        left: `${hsv.s}%`,
-        top: `${-(hsv.v) + 100}%`,
-        backgroundColor: `${ColorDef.fromHSV(hsv).toRgbString()}`,
-    }), [hsv]);
-    const colorStyle = React.useMemo(() => ({ backgroundColor: `hsl(${hsv.h} ,100%, 50%)` }), [hsv]);
-    return (React.createElement("div", { className: classnames("components-saturation-container", className), style: style, "data-testid": "saturation-container" },
-        React.createElement("div", { "data-testid": "saturation-region", role: "slider", "aria-label": saturationLabel, "aria-valuenow": hsv.s, style: colorStyle, className: "components-saturation-region", ref: container, onMouseDown: onMouseDown, onMouseMove: onDragging, onTouchMove: onDragging, onTouchStart: onTouchStart, onTouchEnd: onTouchEnd, tabIndex: 0, onKeyDown: onKeyDown },
-            React.createElement("div", { style: pointerStyle, className: "components-saturation-pointer", "data-testid": "saturation-pointer" }))));
-}
+/*---------------------------------------------------------------------------------------------
+* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+* See LICENSE.md in the project root for license terms and full copyright notice.
+*--------------------------------------------------------------------------------------------*/
+/** @packageDocumentation
+ * @module Color
+ */
+import "./SaturationPicker.scss";
+import classnames from "classnames";
+import * as React from "react";
+import { ColorDef, HSVColor } from "@itwin/core-common";
+import { SpecialKey } from "@itwin/appui-abstract";
+import { UiIModelComponents } from "../UiIModelComponents";
+function calculateChange(e, hsv, container) {
+    const { width: containerWidth, height: containerHeight, top: containerTop, left: containerLeft } = container.getBoundingClientRect();
+    let x;
+    if ("pageX" in e) {
+        x = e.pageX;
+    }
+    else {
+        // istanbul ignore next
+        if (undefined !== e.touches && e.touches.length)
+            x = e.touches[0].pageX;
+    }
+    // istanbul ignore if
+    if (undefined === x)
+        return hsv;
+    let y = 0;
+    if ("pageY" in e) {
+        y = e.pageY;
+    }
+    else {
+        // istanbul ignore next
+        if (undefined !== e.touches && e.touches.length)
+            y = e.touches[0].pageY;
+    }
+    // istanbul ignore if
+    if (undefined === y)
+        return hsv;
+    let left = x - (containerLeft + window.scrollX);
+    let top = y - (containerTop + window.scrollY);
+    // istanbul ignore next
+    if (left < 0) {
+        left = 0;
+    }
+    else if (left > containerWidth) {
+        left = containerWidth;
+    }
+    else if (top < 0) {
+        top = 0;
+    }
+    else if (top > containerHeight) {
+        top = containerHeight;
+    }
+    let saturation = Math.round((left * 100) / containerWidth);
+    let value = Math.round(-((top * 100) / containerHeight) + 100);
+    // istanbul ignore if
+    if (saturation < 0)
+        saturation = 0;
+    // istanbul ignore if
+    if (saturation > 100)
+        saturation = 100;
+    // istanbul ignore if
+    if (value < 0)
+        value = 0;
+    // istanbul ignore if
+    if (value > 100)
+        value = 100;
+    return hsv.clone(hsv.h, saturation, value);
+}
+/** SaturationPicker component used to set the saturation value.
+ * @beta
+ */
+export function SaturationPicker({ onSaturationChange, hsv, className, style }) {
+    const container = React.useRef(null);
+    const [saturationLabel] = React.useState(() => UiIModelComponents.translate("color.saturation"));
+    const isDragging = React.useRef(false);
+    const onChange = React.useCallback((e) => {
+        // istanbul ignore else
+        if (container.current) {
+            const newHsvColor = calculateChange(e, hsv, container.current);
+            // istanbul ignore else
+            if (newHsvColor) {
+                // istanbul ignore else
+                if (onSaturationChange)
+                    onSaturationChange(newHsvColor);
+            }
+        }
+    }, [hsv, onSaturationChange]);
+    const onDragging = React.useCallback((e) => {
+        // istanbul ignore else
+        if (isDragging.current) {
+            onChange(e);
+        }
+    }, [onChange]);
+    const onMouseUp = React.useCallback(() => {
+        // istanbul ignore else
+        if (isDragging.current) {
+            isDragging.current = false;
+        }
+    }, []);
+    const onTouchEnd = React.useCallback((event) => {
+        // istanbul ignore else
+        if (isDragging.current) {
+            onChange(event);
+            isDragging.current = false;
+        }
+    }, [onChange]);
+    const onMouseDown = React.useCallback((e) => {
+        // istanbul ignore else
+        if (e.target !== e.currentTarget) {
+            isDragging.current = true;
+            document.addEventListener("mouseup", onMouseUp, { capture: true, once: true });
+        }
+        onChange(e);
+        // istanbul ignore else
+        if (container.current)
+            container.current.focus();
+        e.preventDefault();
+    }, [onChange, onMouseUp]);
+    const onTouchStart = React.useCallback((e) => {
+        // istanbul ignore else
+        if (e.target !== e.currentTarget)
+            isDragging.current = true;
+        onChange(e);
+        // istanbul ignore else
+        if (container.current)
+            container.current.focus();
+    }, [onChange]);
+    const onKeyDown = React.useCallback((evt) => {
+        const h = hsv.h;
+        let { s, v } = { ...hsv };
+        if (evt.key === SpecialKey.ArrowLeft) {
+            s -= (evt.ctrlKey ? 10 : 1);
+        }
+        else if (evt.key === SpecialKey.ArrowDown) {
+            v -= (evt.ctrlKey ? 10 : 1);
+        }
+        else if (evt.key === SpecialKey.ArrowRight) {
+            s += (evt.ctrlKey ? 10 : 1);
+        }
+        else if (evt.key === SpecialKey.ArrowUp) {
+            v += (evt.ctrlKey ? 10 : 1);
+        }
+        else if (evt.key === SpecialKey.PageDown) {
+            v = 0;
+        }
+        else if (evt.key === SpecialKey.PageUp) {
+            v = 100;
+        }
+        else if (evt.key === SpecialKey.Home) {
+            s = 0;
+        }
+        else {
+            // istanbul ignore else
+            if (evt.key === SpecialKey.End) {
+                s = 100;
+            }
+        }
+        // istanbul ignore if
+        if (s < 0)
+            s = 0;
+        // istanbul ignore if
+        if (s > 100)
+            s = 100;
+        // istanbul ignore if
+        if (v < 0)
+            v = 0;
+        // istanbul ignore if
+        if (v > 100)
+            v = 100;
+        const newColor = new HSVColor(h, s, v);
+        // istanbul ignore else
+        if (onSaturationChange)
+            onSaturationChange(newColor);
+        evt.preventDefault();
+    }, [hsv, onSaturationChange]);
+    const pointerStyle = React.useMemo(() => ({
+        left: `${hsv.s}%`,
+        top: `${-(hsv.v) + 100}%`,
+        backgroundColor: `${ColorDef.fromHSV(hsv).toRgbString()}`,
+    }), [hsv]);
+    const colorStyle = React.useMemo(() => ({ backgroundColor: `hsl(${hsv.h} ,100%, 50%)` }), [hsv]);
+    return (React.createElement("div", { className: classnames("components-saturation-container", className), style: style, "data-testid": "saturation-container" },
+        React.createElement("div", { "data-testid": "saturation-region", role: "slider", "aria-label": saturationLabel, "aria-valuenow": hsv.s, style: colorStyle, className: "components-saturation-region", ref: container, onMouseDown: onMouseDown, onMouseMove: onDragging, onTouchMove: onDragging, onTouchStart: onTouchStart, onTouchEnd: onTouchEnd, tabIndex: 0, onKeyDown: onKeyDown },
+            React.createElement("div", { style: pointerStyle, className: "components-saturation-pointer", "data-testid": "saturation-pointer" }))));
+}
 //# sourceMappingURL=SaturationPicker.js.map

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

@@ -1,23 +1,23 @@
-/** @packageDocumentation
- * @module Color
- */
-import "./Swatch.scss";
-import * as React from "react";
-import { ColorDef } from "@itwin/core-common";
-import { CommonProps } from "@itwin/core-react";
-/** Properties for the [[ColorSwatch]] React component
- * @beta
- */
-export interface ColorSwatchProps extends React.ButtonHTMLAttributes<HTMLButtonElement>, CommonProps {
-    /** color specification */
-    colorDef: ColorDef;
-    /** function to run when user selects color swatch */
-    onColorPick?: ((color: ColorDef, e: React.MouseEvent) => void) | undefined;
-    /** Show swatches as squares unless round is set to true */
-    round?: boolean;
-}
-/** ColorSwatch Functional component displays a color swatch in a button
- * @beta
- */
-export declare function ColorSwatch(props: ColorSwatchProps): JSX.Element;
+/** @packageDocumentation
+ * @module Color
+ */
+import "./Swatch.scss";
+import * as React from "react";
+import { ColorDef } from "@itwin/core-common";
+import { CommonProps } from "@itwin/core-react";
+/** Properties for the [[ColorSwatch]] React component
+ * @beta
+ */
+export interface ColorSwatchProps extends React.ButtonHTMLAttributes<HTMLButtonElement>, CommonProps {
+    /** color specification */
+    colorDef: ColorDef;
+    /** function to run when user selects color swatch */
+    onColorPick?: ((color: ColorDef, e: React.MouseEvent) => void) | undefined;
+    /** Show swatches as squares unless round is set to true */
+    round?: boolean;
+}
+/** ColorSwatch Functional component displays a color swatch in a button
+ * @beta
+ */
+export declare function ColorSwatch(props: ColorSwatchProps): JSX.Element;
 //# sourceMappingURL=Swatch.d.ts.map

package/lib/esm/imodel-components-react/color/Swatch.js

@@ -1,35 +1,35 @@
-/*---------------------------------------------------------------------------------------------
-* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
-* See LICENSE.md in the project root for license terms and full copyright notice.
-*--------------------------------------------------------------------------------------------*/
-/** @packageDocumentation
- * @module Color
- */
-import "./Swatch.scss";
-import classnames from "classnames";
-import * as React from "react";
-import { getCSSColorFromDef } from "./getCSSColorFromDef";
-/** ColorSwatch Functional component displays a color swatch in a button
- * @beta
- */
-export function ColorSwatch(props) {
-    const rgbaString = getCSSColorFromDef(props.colorDef);
-    const colorStyle = {
-        backgroundColor: rgbaString,
-        ...props.style,
-    };
-    const handleClick = (e) => {
-        // istanbul ignore else
-        if (props && props.onColorPick)
-            props.onColorPick(props.colorDef, e);
-    };
-    const classes = classnames("components-color-swatch", props.round && "round", props.className);
-    const { 
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    onColorPick, colorDef, round, // do not pass on color swatch specific props
-    // eslint-disable-next-line comma-dangle
-    ...otherProps // pass-through props
-     } = props;
-    return React.createElement("button", { ...otherProps, style: colorStyle, className: classes, onClick: handleClick });
-}
+/*---------------------------------------------------------------------------------------------
+* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+* See LICENSE.md in the project root for license terms and full copyright notice.
+*--------------------------------------------------------------------------------------------*/
+/** @packageDocumentation
+ * @module Color
+ */
+import "./Swatch.scss";
+import classnames from "classnames";
+import * as React from "react";
+import { getCSSColorFromDef } from "./getCSSColorFromDef";
+/** ColorSwatch Functional component displays a color swatch in a button
+ * @beta
+ */
+export function ColorSwatch(props) {
+    const rgbaString = getCSSColorFromDef(props.colorDef);
+    const colorStyle = {
+        backgroundColor: rgbaString,
+        ...props.style,
+    };
+    const handleClick = (e) => {
+        // istanbul ignore else
+        if (props && props.onColorPick)
+            props.onColorPick(props.colorDef, e);
+    };
+    const classes = classnames("components-color-swatch", props.round && "round", props.className);
+    const { 
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    onColorPick, colorDef, round, // do not pass on color swatch specific props
+    // eslint-disable-next-line comma-dangle
+    ...otherProps // pass-through props
+     } = props;
+    return React.createElement("button", { ...otherProps, style: colorStyle, className: classes, onClick: handleClick });
+}
 //# sourceMappingURL=Swatch.js.map

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

@@ -2,23 +2,21 @@
 * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
 * See LICENSE.md in the project root for license terms and full copyright notice.
 *--------------------------------------------------------------------------------------------*/
-@import "~@itwin/core-react/lib/cjs/core-react/style/themecolors";
-@import "~@itwin/itwinui-css/scss/style/typography";
 
 .components-color-swatch {
-  font-size: $iui-font-size;
+  font-size: var(--iui-font-size-1);
   height: 1em * 1.2;
   width: 1em * 1.2;
   border-width: 1px;
-  border-radius: 3px;
+  border-radius: var(--iui-border-radius-1);
   border-style: solid;
-  border-color: $buic-inputs-border;
+  border-color: var(--iui-color-border-subtle);
 
   &.round {
     border-radius: 50%;
   }
 
   &[disabled] {
-    opacity: .2;
+    opacity: 0.2;
   }
-}
+}

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

@@ -1,7 +1,7 @@
-/** @packageDocumentation
- * @module Color
- */
-import { ColorDef } from "@itwin/core-common";
-/** @internal */
-export declare function getCSSColorFromDef(colorDef: ColorDef): string;
+/** @packageDocumentation
+ * @module Color
+ */
+import { ColorDef } from "@itwin/core-common";
+/** @internal */
+export declare function getCSSColorFromDef(colorDef: ColorDef): string;
 //# sourceMappingURL=getCSSColorFromDef.d.ts.map

package/lib/esm/imodel-components-react/color/getCSSColorFromDef.js

@@ -1,20 +1,20 @@
-/*---------------------------------------------------------------------------------------------
-* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
-* See LICENSE.md in the project root for license terms and full copyright notice.
-*--------------------------------------------------------------------------------------------*/
-/** @packageDocumentation
- * @module Color
- */
-/** @internal */
-export function getCSSColorFromDef(colorDef) {
-    const { b, g, r, t } = colorDef.colors;
-    let rgbaString = "";
-    if (t === 0)
-        rgbaString = `rgb(${r},${g},${b})`;
-    else {
-        const alpha = ((255 - t) / 255).toFixed(2);
-        rgbaString = `rgba(${r},${g},${b},${alpha})`;
-    }
-    return rgbaString;
-}
+/*---------------------------------------------------------------------------------------------
+* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+* See LICENSE.md in the project root for license terms and full copyright notice.
+*--------------------------------------------------------------------------------------------*/
+/** @packageDocumentation
+ * @module Color
+ */
+/** @internal */
+export function getCSSColorFromDef(colorDef) {
+    const { b, g, r, t } = colorDef.colors;
+    let rgbaString = "";
+    if (t === 0)
+        rgbaString = `rgb(${r},${g},${b})`;
+    else {
+        const alpha = ((255 - t) / 255).toFixed(2);
+        rgbaString = `rgba(${r},${g},${b},${alpha})`;
+    }
+    return rgbaString;
+}
 //# sourceMappingURL=getCSSColorFromDef.js.map