@itwin/itwinui-react 3.12.2 → 3.13.0

package/DEV-esm/utils/color/ColorValue.js

@@ -0,0 +1,319 @@
+import { _ as _define_property } from "@swc/helpers/_/_define_property";
+import { getBoundedValue } from '../functions/numbers.js';
+let scratchBytes = new Uint8Array(4);
+let scratchUInt32 = new Uint32Array(scratchBytes.buffer);
+export const isRgbColor = (value)=>'string' != typeof value && 'r' in value && 'g' in value && 'b' in value;
+export const isHslColor = (value)=>'string' != typeof value && 'h' in value && 's' in value && 'l' in value;
+export const isHsvColor = (value)=>'string' != typeof value && 'h' in value && 's' in value && 'v' in value;
+export class ColorValue {
+    static create(val) {
+        if (!val) return ColorValue.fromTbgr(0);
+        if (isRgbColor(val)) return ColorValue.fromRGB(val);
+        if (isHslColor(val)) return ColorValue.fromHSL(val);
+        if (isHsvColor(val)) return ColorValue.fromHSV(val);
+        if ('string' == typeof val) return ColorValue.fromString(val, ColorValue.fromTbgr(0));
+        return ColorValue.fromTbgr(0);
+    }
+    toTbgr() {
+        return this._tbgr;
+    }
+    static fromTbgr(tbgr) {
+        return new ColorValue(tbgr);
+    }
+    static fromRgbt(red, green, blue, transparency) {
+        return this.fromTbgr(this.computeTbgrFromComponents(red, green, blue, transparency));
+    }
+    static computeTbgrFromComponents(red, green, blue, transparency) {
+        scratchBytes[0] = red;
+        scratchBytes[1] = green;
+        scratchBytes[2] = blue;
+        scratchBytes[3] = transparency || 0;
+        return scratchUInt32[0];
+    }
+    static fromString(val, defaultColorIfNotParsed) {
+        let [tbgr, hue] = this.computeTbgrFromString(val, defaultColorIfNotParsed?.toTbgr());
+        return new ColorValue(tbgr, hue);
+    }
+    static fromHSL(hsl) {
+        let alpha = hsl.a ?? 1;
+        return new ColorValue(this.computeTbgrFromHSL(hsl.h / 360, hsl.s / 100, hsl.l / 100, Math.round((1 - alpha) * 255)), hsl.h);
+    }
+    static fromRGB(rgb) {
+        let alpha = rgb.a ?? 1;
+        return ColorValue.fromRgbt(rgb.r, rgb.g, rgb.b, Math.round((1 - alpha) * 255));
+    }
+    static fromHSV(hsv) {
+        let alpha = hsv.a ?? 1;
+        let transparency = Math.round((1 - alpha) * 255);
+        if (!hsv.s || -1 === hsv.h) {
+            let white = 0xff & Math.floor(255.0 * hsv.v / 100.0 + 0.5 + 3.0e-14);
+            return ColorValue.fromRgbt(white, white, white, 0);
+        }
+        let dhue = hsv.h, dsaturation = hsv.s, dvalue = hsv.v;
+        if (360 === dhue) dhue = 0.0;
+        dhue /= 60;
+        let hueIntpart = Math.floor(dhue);
+        let hueFractpart = dhue - hueIntpart;
+        dvalue /= 100;
+        dsaturation /= 100;
+        let p = 0xff & Math.floor(dvalue * (1.0 - dsaturation) * 255.0 + 0.5);
+        let q = 0xff & Math.floor(dvalue * (1.0 - dsaturation * hueFractpart) * 255.0 + 0.5);
+        let t = 0xff & Math.floor(dvalue * (1.0 - dsaturation * (1.0 - hueFractpart)) * 255.0 + 0.5);
+        let v = 0xff & Math.floor(255 * dvalue + 0.5);
+        let r = 0, b = 0, g = 0;
+        switch(hueIntpart){
+            case 0:
+                r = v;
+                g = t;
+                b = p;
+                break;
+            case 1:
+                r = q, g = v;
+                b = p;
+                break;
+            case 2:
+                r = p, g = v;
+                b = t;
+                break;
+            case 3:
+                r = p, g = q;
+                b = v;
+                break;
+            case 4:
+                r = t, g = p;
+                b = v;
+                break;
+            case 5:
+                r = v, g = p;
+                b = q;
+                break;
+        }
+        return new ColorValue(ColorValue.computeTbgrFromComponents(r, g, b, transparency), hsv.h);
+    }
+    static computeTbgrFromString(val, defaultColorIfNotParsed) {
+        val = val.toLowerCase();
+        let m = /^((?:rgb|hsl)a?)\(([^\)]*)\)/.exec(val);
+        if (m) {
+            let color;
+            let name = m[1];
+            let components = m[2];
+            let hasPercent = (str)=>'%' === str[str.length - 1];
+            let floatOrPercent = (str)=>{
+                let v = parseFloat(str);
+                return 255 * getBoundedValue(hasPercent(str) ? v / 100 : v, 0, 1);
+            };
+            let intOrPercent = (str)=>{
+                let v = hasPercent(str) ? parseFloat(str) / 100 * 255 : parseInt(str, 10);
+                return getBoundedValue(v, 0, 255);
+            };
+            switch(name){
+                case 'rgb':
+                case 'rgba':
+                    color = /^(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*(?:,\s*(\d*\.?\d+)\s*)?$/.exec(components);
+                    if (color) return [
+                        this.computeTbgrFromComponents(intOrPercent(color[1]), intOrPercent(color[2]), intOrPercent(color[3]), 'string' == typeof color[4] ? 255 - floatOrPercent(color[4]) : 0),
+                        void 0
+                    ];
+                    break;
+                case 'hsl':
+                case 'hsla':
+                    color = /^(\d*\.?\d+)\s*,\s*(\d+)\%\s*,\s*(\d+)\%\s*(?:,\s*(\d*\.?\d+)\s*)?$/.exec(components);
+                    if (color) {
+                        let h = parseFloat(color[1]);
+                        let s = parseInt(color[2], 10) / 100;
+                        let l = parseInt(color[3], 10) / 100;
+                        let t = 'string' == typeof color[4] ? 255 - floatOrPercent(color[4]) : 0;
+                        return [
+                            this.computeTbgrFromHSL(h / 360, s, l, t),
+                            h
+                        ];
+                    }
+                    break;
+            }
+        } else if (m = /^\#([A-Fa-f\d]+)$/.exec(val)) {
+            let hex = m[1];
+            let size = hex.length;
+            if (3 === size) return [
+                this.computeTbgrFromComponents(parseInt(hex.charAt(0) + hex.charAt(0), 16), parseInt(hex.charAt(1) + hex.charAt(1), 16), parseInt(hex.charAt(2) + hex.charAt(2), 16), 0),
+                void 0
+            ];
+            if (6 === size) return [
+                this.computeTbgrFromComponents(parseInt(hex.charAt(0) + hex.charAt(1), 16), parseInt(hex.charAt(2) + hex.charAt(3), 16), parseInt(hex.charAt(4) + hex.charAt(5), 16), 0),
+                void 0
+            ];
+            if (8 === size) return [
+                this.computeTbgrFromComponents(parseInt(hex.charAt(0) + hex.charAt(1), 16), parseInt(hex.charAt(2) + hex.charAt(3), 16), parseInt(hex.charAt(4) + hex.charAt(5), 16), 255 - parseInt(hex.charAt(6) + hex.charAt(7), 16)),
+                void 0
+            ];
+        }
+        if (defaultColorIfNotParsed) return [
+            defaultColorIfNotParsed,
+            void 0
+        ];
+        throw new Error('unable to parse string into ColorValue');
+    }
+    static getColors(tbgr) {
+        scratchUInt32[0] = tbgr;
+        return {
+            b: scratchBytes[2],
+            g: scratchBytes[1],
+            r: scratchBytes[0],
+            t: scratchBytes[3]
+        };
+    }
+    getRgb(includeAlpha) {
+        scratchUInt32[0] = this._tbgr;
+        if (includeAlpha) return (scratchBytes[0] << 24) + (scratchBytes[1] << 16) + (scratchBytes[2] << 8) + (255 - scratchBytes[3]);
+        return (scratchBytes[0] << 16) + (scratchBytes[1] << 8) + scratchBytes[2];
+    }
+    getAlpha() {
+        return ColorValue.getAlpha(this._tbgr);
+    }
+    static getAlpha(tbgr) {
+        scratchUInt32[0] = tbgr;
+        return 255 - scratchBytes[3];
+    }
+    toHexString(includeAlpha) {
+        if (includeAlpha) {
+            let value = this.getRgb(includeAlpha);
+            if (value < 0) value = 0xffffffff + value + 1;
+            return `#${`00000000${value.toString(16)}`.slice(-8)}`;
+        }
+        return `#${`000000${this.getRgb().toString(16)}`.slice(-6)}`;
+    }
+    static computeTbgrFromHSL(h, s, l, transparency = 0) {
+        let torgb = (p1, q1, t)=>{
+            if (t < 0) t += 1;
+            if (t > 1) t -= 1;
+            if (t < 1 / 6) return p1 + (q1 - p1) * 6 * t;
+            if (t < 0.5) return q1;
+            if (t < 2 / 3) return p1 + (q1 - p1) * 6 * (2 / 3 - t);
+            return p1;
+        };
+        let hue2rgb = (p1, q1, t)=>Math.round(255 * torgb(p1, q1, t));
+        let modulo = (n, m)=>(n % m + m) % m;
+        h = modulo(h, 1);
+        s = getBoundedValue(s, 0, 1);
+        l = getBoundedValue(l, 0, 1);
+        if (0 === s) {
+            l *= 255;
+            return this.computeTbgrFromComponents(l, l, l, transparency);
+        }
+        let p = l <= 0.5 ? l * (1 + s) : l + s - l * s;
+        let q = 2 * l - p;
+        return this.computeTbgrFromComponents(hue2rgb(q, p, h + 1 / 3), hue2rgb(q, p, h), hue2rgb(q, p, h - 1 / 3), transparency);
+    }
+    toHslColor() {
+        return {
+            ...ColorValue.toHsl(this._tbgr),
+            ...void 0 != this._hue && {
+                h: this._hue
+            }
+        };
+    }
+    static toHsl(tbgr) {
+        let { r, g, b } = ColorValue.getColors(tbgr);
+        let red = r / 255;
+        let green = g / 255;
+        let blue = b / 255;
+        let cMin = Math.min(red, green, blue);
+        let cMax = Math.max(red, green, blue);
+        let delta = cMax - cMin;
+        let hue = 0;
+        let saturation = 0;
+        hue = 0 === delta ? 0 : red === cMax ? (green - blue) / delta % 6 : green === cMax ? (blue - red) / delta + 2 : (red - green) / delta + 4;
+        hue = Math.round(60 * hue);
+        if (hue < 0) hue += 360;
+        let lightness = (cMax + cMin) / 2;
+        saturation = 0 === delta ? 0 : delta / (1 - Math.abs(2 * lightness - 1));
+        saturation = Number((100 * saturation).toFixed(1));
+        lightness = Number((100 * lightness).toFixed(1));
+        return {
+            h: hue,
+            s: saturation,
+            l: lightness,
+            a: this.getAlpha(tbgr) / 255
+        };
+    }
+    toRgbColor() {
+        let { r, g, b } = ColorValue.getColors(this._tbgr);
+        return {
+            r,
+            g,
+            b,
+            a: this.getAlpha() / 255
+        };
+    }
+    toHsvColor() {
+        return {
+            ...ColorValue.toHsv(this._tbgr),
+            ...void 0 != this._hue && {
+                h: this._hue
+            }
+        };
+    }
+    static toHsv(tbgr) {
+        let { r, g, b } = ColorValue.getColors(tbgr);
+        let red = r / 255;
+        let green = g / 255;
+        let blue = b / 255;
+        let cMin = Math.min(red, green, blue);
+        let cMax = Math.max(red, green, blue);
+        let delta = cMax - cMin;
+        let hue = 0;
+        hue = 0 === delta ? 0 : red === cMax ? (green - blue) / delta % 6 : green === cMax ? (blue - red) / delta + 2 : (red - green) / delta + 4;
+        hue = Math.round(60 * hue);
+        if (hue < 0) hue += 360;
+        let brightness = cMax;
+        let saturation = 0 === cMax ? 0 : delta / cMax;
+        saturation = Number((100 * saturation).toFixed(1));
+        brightness = Number((100 * brightness).toFixed(1));
+        return {
+            h: hue,
+            s: saturation,
+            v: brightness,
+            a: this.getAlpha(tbgr) / 255
+        };
+    }
+    equals(other) {
+        return this._tbgr === other._tbgr;
+    }
+    static getFormattedColorNumber(value, precision = 1) {
+        if (0 === precision) Math.round(value).toString();
+        return Number(value.toFixed(precision)).toString();
+    }
+    toRgbString(includeAlpha) {
+        let rgb = this.toRgbColor();
+        let rgbString = `${rgb.r}, ${rgb.g}, ${rgb.b}`;
+        if (includeAlpha) {
+            let alpha = rgb.a ?? 1;
+            return `rgba(${rgbString}, ${ColorValue.getFormattedColorNumber(alpha, 2)})`;
+        }
+        return `rgb(${rgbString})`;
+    }
+    toHslString(includeAlpha) {
+        let hsl = this.toHslColor();
+        let hslString = `${ColorValue.getFormattedColorNumber(this._hue ?? hsl.h)}, ${ColorValue.getFormattedColorNumber(hsl.s)}%, ${ColorValue.getFormattedColorNumber(hsl.l)}%`;
+        if (includeAlpha) {
+            let alpha = hsl.a ?? 1;
+            return `hsla(${hslString}, ${ColorValue.getFormattedColorNumber(alpha, 2)})`;
+        }
+        return `hsl(${hslString})`;
+    }
+    toHsvString(includeAlpha) {
+        let hsv = this.toHsvColor();
+        let hsvString = `${this._hue ?? hsv.h}, ${hsv.s}%, ${hsv.v}%`;
+        if (includeAlpha) {
+            let alpha = hsv.a ?? 1;
+            return `hsva(${hsvString}, ${ColorValue.getFormattedColorNumber(alpha, 2)})`;
+        }
+        return `hsv(${hsvString})`;
+    }
+    constructor(tbgr, hue){
+        _define_property(this, "_tbgr", void 0);
+        _define_property(this, "_hue", void 0);
+        scratchUInt32[0] = tbgr;
+        this._tbgr = scratchUInt32[0];
+        this._hue = hue;
+    }
+}

package/DEV-esm/utils/color/index.js

@@ -0,0 +1 @@
+export * from './ColorValue.js';

package/DEV-esm/utils/components/AutoclearingHiddenLiveRegion.js

@@ -0,0 +1,18 @@
+import * as React from 'react';
+import { VisuallyHidden } from '../../core/VisuallyHidden/VisuallyHidden.js';
+import { getWindow } from '../functions/index.js';
+export const AutoclearingHiddenLiveRegion = ({ text = '' })=>{
+    let [maybeText, setMaybeText] = React.useState(text);
+    React.useEffect(()=>{
+        setMaybeText(text);
+        let timeout = getWindow()?.setTimeout(()=>setMaybeText(''), 5000);
+        return ()=>void getWindow()?.clearTimeout(timeout);
+    }, [
+        text
+    ]);
+    return React.createElement(VisuallyHidden, {
+        as: "div",
+        "aria-live": "polite",
+        "aria-atomic": "true"
+    }, maybeText);
+};

package/DEV-esm/utils/components/Box.js

@@ -0,0 +1,2 @@
+import { polymorphic } from '../functions/polymorphic.js';
+export const Box = polymorphic.div('');

package/DEV-esm/utils/components/ButtonBase.js

@@ -0,0 +1,27 @@
+import * as React from 'react';
+import cx from 'classnames';
+import { Box } from './Box.js';
+import { useIsClient } from '../hooks/useIsClient.js';
+export const ButtonBase = React.forwardRef((props, forwardedRef)=>{
+    let { as: asProp = 'button', disabled: disabledProp, htmlDisabled, ...rest } = props;
+    let isClient = useIsClient();
+    let ariaDisabled = disabledProp && !htmlDisabled && isClient && 'button' === asProp;
+    let handleIfEnabled = (handler)=>(e)=>{
+            if (disabledProp) return;
+            handler?.(e);
+        };
+    return React.createElement(Box, {
+        as: asProp,
+        type: 'button' === asProp ? 'button' : void 0,
+        ref: forwardedRef,
+        "aria-disabled": ariaDisabled ? 'true' : void 0,
+        "data-iui-disabled": disabledProp ? 'true' : void 0,
+        disabled: !!(htmlDisabled ?? (!isClient && disabledProp)) || void 0,
+        ...rest,
+        className: cx('iui-button-base', props.className),
+        onClick: handleIfEnabled(props.onClick),
+        onPointerDown: handleIfEnabled(props.onPointerDown),
+        onPointerUp: handleIfEnabled(props.onPointerUp)
+    });
+});
+ButtonBase.displayName = 'ButtonBase';

package/DEV-esm/utils/components/FieldsetBase.js

@@ -0,0 +1,2 @@
+import { polymorphic } from '../functions/polymorphic.js';
+export const FieldsetBase = polymorphic.fieldset('iui-fieldset-base');

package/DEV-esm/utils/components/FocusTrap.js

@@ -0,0 +1,37 @@
+import * as React from 'react';
+import { getTabbableElements } from '../functions/focusable.js';
+import { mergeRefs } from '../hooks/useMergedRefs.js';
+export const FocusTrap = (props)=>{
+    let { children } = props;
+    let childRef = React.useRef();
+    let getFirstLastFocusables = ()=>{
+        let elements = getTabbableElements(childRef.current);
+        let firstElement = elements[0];
+        let lastElement = elements[(elements.length || 1) - 1];
+        return [
+            firstElement,
+            lastElement
+        ];
+    };
+    let onFirstFocus = (event)=>{
+        let [firstElement, lastElement] = getFirstLastFocusables();
+        if (event.relatedTarget === firstElement) lastElement?.focus();
+        else firstElement?.focus();
+    };
+    let onLastFocus = (event)=>{
+        let [firstElement, lastElement] = getFirstLastFocusables();
+        if (event.relatedTarget === lastElement) firstElement?.focus();
+        else lastElement?.focus();
+    };
+    return React.createElement(React.Fragment, null, React.createElement("div", {
+        tabIndex: 0,
+        onFocus: onFirstFocus,
+        "aria-hidden": true
+    }), React.cloneElement(children, {
+        ref: mergeRefs(children.ref, childRef)
+    }), React.createElement("div", {
+        tabIndex: 0,
+        onFocus: onLastFocus,
+        "aria-hidden": true
+    }));
+};

package/DEV-esm/utils/components/InputContainer.js

@@ -0,0 +1,25 @@
+import * as React from 'react';
+import cx from 'classnames';
+import { Box } from './Box.js';
+import { Label } from '../../core/Label/Label.js';
+import { StatusMessage } from '../../core/StatusMessage/StatusMessage.js';
+export const InputContainer = React.forwardRef((props, forwardedRef)=>{
+    let { label, disabled, required, status, message, icon, isLabelInline, children, className, style, statusMessage, inputId, labelId, ...rest } = props;
+    return React.createElement(Box, {
+        className: cx('iui-input-grid', className),
+        "data-iui-status": status,
+        "data-iui-label-placement": isLabelInline ? 'inline' : void 0,
+        style: style,
+        ref: forwardedRef,
+        ...rest
+    }, label && React.createElement(Label, {
+        as: inputId && 'label' !== props.as ? 'label' : 'div',
+        required: required,
+        disabled: disabled,
+        htmlFor: inputId,
+        id: labelId
+    }, label), children, statusMessage ? statusMessage : message && React.createElement(StatusMessage, {
+        startIcon: icon,
+        status: status
+    }, message));
+});

package/DEV-esm/utils/components/InputFlexContainer.js

@@ -0,0 +1,35 @@
+import * as React from 'react';
+import cx from 'classnames';
+import { Box } from './Box.js';
+import { Icon } from '../../core/Icon/Icon.js';
+import { IconButton } from '../../core/Buttons/IconButton.js';
+export const InputFlexContainer = React.forwardRef((props, ref)=>{
+    let { isDisabled, status, children, className, size, style, ...rest } = props;
+    return React.createElement(Box, {
+        className: cx('iui-input-flex-container', className),
+        "data-iui-status": status,
+        "data-iui-size": size,
+        "data-iui-disabled": isDisabled ? 'true' : void 0,
+        ref: ref,
+        style: style,
+        ...rest
+    }, children);
+});
+export const InputFlexContainerButton = React.forwardRef((props, ref)=>{
+    let { className, ...rest } = props;
+    return React.createElement(IconButton, {
+        ref: ref,
+        className: cx('iui-input-flex-container-icon', className),
+        styleType: "borderless",
+        ...rest
+    });
+});
+export const InputFlexContainerIcon = React.forwardRef((props, ref)=>{
+    let { className, ...rest } = props;
+    return React.createElement(Icon, {
+        ref: ref,
+        className: cx('iui-input-flex-container-icon', className),
+        padded: true,
+        ...rest
+    });
+});

package/DEV-esm/utils/components/InputWithIcon.js

@@ -0,0 +1,3 @@
+import { polymorphic } from '../functions/polymorphic.js';
+export const InputWithIcon = polymorphic.div('iui-input-with-icon');
+InputWithIcon.displayName = 'InputWithIcon';

package/DEV-esm/utils/components/LineClamp.js

@@ -0,0 +1,24 @@
+import * as React from 'react';
+import { Box } from './Box.js';
+import { ShadowRoot } from './ShadowRoot.js';
+export const LineClamp = React.forwardRef((props, forwardedRef)=>{
+    let { lines, children, ...rest } = props;
+    return React.createElement(Box, {
+        ref: forwardedRef,
+        ...rest,
+        style: {
+            '--_iui-line-clamp': lines,
+            ...props.style
+        }
+    }, React.createElement(ShadowRoot, {
+        css: css
+    }, React.createElement("slot", null)), children);
+});
+let css = `
+  :host {
+    overflow: hidden;
+    display: -webkit-box;
+    -webkit-line-clamp: var(--_iui-line-clamp, 3);
+    -webkit-box-orient: vertical;
+  }
+`;

package/DEV-esm/utils/components/MiddleTextTruncation.js

@@ -0,0 +1,27 @@
+import * as React from 'react';
+import { useOverflow } from '../hooks/useOverflow.js';
+let ELLIPSIS_CHAR = '…';
+export const MiddleTextTruncation = (props)=>{
+    let { text, endCharsCount = 6, textRenderer, style, ...rest } = props;
+    let [ref, visibleCount] = useOverflow(text);
+    let truncatedText = React.useMemo(()=>{
+        if (visibleCount < text.length) return `${text.substring(0, visibleCount - endCharsCount - ELLIPSIS_CHAR.length)}${ELLIPSIS_CHAR}${text.substring(text.length - endCharsCount)}`;
+        return text;
+    }, [
+        endCharsCount,
+        text,
+        visibleCount
+    ]);
+    return React.createElement("span", {
+        style: {
+            display: 'flex',
+            minWidth: 0,
+            flexGrow: 1,
+            whiteSpace: 'nowrap',
+            ...style
+        },
+        ref: ref,
+        ...rest
+    }, textRenderer?.(truncatedText, text) ?? truncatedText);
+};
+MiddleTextTruncation.displayName = 'MiddleTextTruncation';

package/DEV-esm/utils/components/Portal.js

@@ -0,0 +1,19 @@
+import * as React from 'react';
+import * as ReactDOM from 'react-dom';
+import { useIsClient } from '../hooks/useIsClient.js';
+import { atom } from 'jotai';
+import { useScopedAtom } from '../providers/ScopeProvider.js';
+export const portalContainerAtom = atom(void 0);
+export const Portal = (props)=>{
+    let { portal = true, children } = props;
+    let isClient = useIsClient();
+    let portalTo = usePortalTo(portal);
+    if (!isClient) return null;
+    return portalTo ? ReactDOM.createPortal(children, portalTo) : children;
+};
+export const usePortalTo = (portal)=>{
+    let [portalContainer] = useScopedAtom(portalContainerAtom);
+    if ('boolean' == typeof portal) return portal ? portalContainer : null;
+    let portalTo = 'function' == typeof portal.to ? portal.to() : portal.to;
+    return portalTo ?? portalContainer;
+};