@itwin/core-react 3.6.0-dev.8 → 4.0.0-dev.2

package/lib/esm/core-react/layout-variables.scss

@@ -1,17 +1,17 @@
-/*---------------------------------------------------------------------------------------------
-* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
-* See LICENSE.md in the project root for license terms and full copyright notice.
-*--------------------------------------------------------------------------------------------*/
-@import "./z-index";
-
-:root {
-
-  /** Default Widget Opacity */
-  --buic-widget-opacity:      0.90;
-  /** Default Toolbar Opacity */
-  --buic-toolbar-opacity:     0.50;
-
-  /** CSS variables for each z-index layer */
-  @include uicore-z-index-variables();
-
-}
+/*---------------------------------------------------------------------------------------------
+* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+* See LICENSE.md in the project root for license terms and full copyright notice.
+*--------------------------------------------------------------------------------------------*/
+@import "./z-index";
+
+:root {
+
+  /** Default Widget Opacity */
+  --buic-widget-opacity:      0.90;
+  /** Default Toolbar Opacity */
+  --buic-toolbar-opacity:     0.50;
+
+  /** CSS variables for each z-index layer */
+  @include uicore-z-index-variables();
+
+}

package/lib/esm/core-react/listbox/Listbox.d.ts

@@ -1,56 +1,56 @@
-import * as React from "react";
-import "./Listbox.scss";
-/** Ideas borrowed from  https://reacttraining.com/reach-ui/listbox */
-/**
- * `Listbox` value.
- * @alpha
- */
-export declare type ListboxValue = string;
-/**
- * `Listbox` Props.
- * @alpha
- */
-export interface ListboxProps extends React.DetailedHTMLProps<React.HTMLAttributes<HTMLUListElement>, HTMLUListElement> {
-    id?: string;
-    selectedValue?: ListboxValue;
-    ariaLabel?: any;
-    ariaLabelledBy?: any;
-    onListboxValueChange?: ((newValue: ListboxValue, isControlOrCommandPressed?: boolean) => void);
-}
-/**
- * `ListboxItem` Props.
- * @alpha
- */
-export interface ListboxItemProps extends React.DetailedHTMLProps<React.LiHTMLAttributes<HTMLLIElement>, HTMLLIElement> {
-    /** The unique item's value. */
-    value: ListboxValue;
-    /** set if item is disabled. */
-    disabled?: boolean;
-}
-/**
- * `Listbox` Context.
- * @alpha
- */
-export interface ListboxContextProps {
-    listboxId?: string;
-    listboxValue?: ListboxValue;
-    focusValue?: ListboxValue;
-    onListboxValueChange: ((newValue: ListboxValue, isControlOrCommandPressed?: boolean) => void);
-    listboxRef?: React.RefObject<HTMLUListElement>;
-}
-/**
- * Context set up by listbox for use by `ListboxItems` .
- * @alpha
- */
-export declare const ListboxContext: React.Context<ListboxContextProps>;
-/**
- * Single select `Listbox` component
- * @alpha
- */
-export declare function Listbox(props: ListboxProps): JSX.Element;
-/**
- * `ListboxItem` component.
- * @alpha
- */
-export declare function ListboxItem(props: ListboxItemProps): JSX.Element;
+import * as React from "react";
+import "./Listbox.scss";
+/** Ideas borrowed from  https://reacttraining.com/reach-ui/listbox */
+/**
+ * `Listbox` value.
+ * @alpha
+ */
+export declare type ListboxValue = string;
+/**
+ * `Listbox` Props.
+ * @alpha
+ */
+export interface ListboxProps extends React.DetailedHTMLProps<React.HTMLAttributes<HTMLUListElement>, HTMLUListElement> {
+    id?: string;
+    selectedValue?: ListboxValue;
+    ariaLabel?: any;
+    ariaLabelledBy?: any;
+    onListboxValueChange?: ((newValue: ListboxValue, isControlOrCommandPressed?: boolean) => void);
+}
+/**
+ * `ListboxItem` Props.
+ * @alpha
+ */
+export interface ListboxItemProps extends React.DetailedHTMLProps<React.LiHTMLAttributes<HTMLLIElement>, HTMLLIElement> {
+    /** The unique item's value. */
+    value: ListboxValue;
+    /** set if item is disabled. */
+    disabled?: boolean;
+}
+/**
+ * `Listbox` Context.
+ * @alpha
+ */
+export interface ListboxContextProps {
+    listboxId?: string;
+    listboxValue?: ListboxValue;
+    focusValue?: ListboxValue;
+    onListboxValueChange: ((newValue: ListboxValue, isControlOrCommandPressed?: boolean) => void);
+    listboxRef?: React.RefObject<HTMLUListElement>;
+}
+/**
+ * Context set up by listbox for use by `ListboxItems` .
+ * @alpha
+ */
+export declare const ListboxContext: React.Context<ListboxContextProps>;
+/**
+ * Single select `Listbox` component
+ * @alpha
+ */
+export declare function Listbox(props: ListboxProps): JSX.Element;
+/**
+ * `ListboxItem` component.
+ * @alpha
+ */
+export declare function ListboxItem(props: ListboxItemProps): JSX.Element;
 //# sourceMappingURL=Listbox.d.ts.map

package/lib/esm/core-react/listbox/Listbox.js

@@ -1,218 +1,218 @@
-/*---------------------------------------------------------------------------------------------
-* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
-* See LICENSE.md in the project root for license terms and full copyright notice.
-*--------------------------------------------------------------------------------------------*/
-import * as React from "react";
-import classnames from "classnames";
-import "./Listbox.scss";
-import { Guid } from "@itwin/core-bentley";
-import { SpecialKey } from "@itwin/appui-abstract";
-/**
- * Context set up by listbox for use by `ListboxItems` .
- * @alpha
- */
-// istanbul ignore next
-export const ListboxContext = React.createContext({ onListboxValueChange: (_newValue) => { } }); // eslint-disable-line @typescript-eslint/naming-convention
-function makeId(...args) {
-    return args.filter((val) => val != null).join("--");
-}
-function getOptionValueArray(childNodes) {
-    return React.Children.toArray(childNodes).filter((node) => React.isValidElement(node) && node.props.value).map((optionNode) => optionNode.props);
-}
-function processKeyboardNavigation(optionValues, itemIndex, key) {
-    let keyProcessed = false;
-    let newIndex = itemIndex >= 0 ? itemIndex : 0;
-    // Note: In aria example Page Up/Down just moves up or down by one item. See https://www.w3.org/TR/wai-aria-practices-1.1/examples/listbox/js/listbox.js
-    if (key === SpecialKey.ArrowDown || key === SpecialKey.PageDown) {
-        for (let i = itemIndex + 1; i < optionValues.length; i++) {
-            if (!optionValues[i].disabled) {
-                newIndex = i;
-                break;
-            }
-        }
-        keyProcessed = true;
-    }
-    else if (key === SpecialKey.ArrowUp || key === SpecialKey.PageUp) {
-        for (let i = itemIndex - 1; i >= 0; i--) {
-            if (!optionValues[i].disabled) {
-                newIndex = i;
-                break;
-            }
-        }
-        keyProcessed = true;
-    }
-    else if (key === SpecialKey.Home) {
-        for (let i = 0; i < optionValues.length; i++) {
-            if (!optionValues[i].disabled) {
-                newIndex = i;
-                break;
-            }
-        }
-        keyProcessed = true;
-    }
-    else if (key === SpecialKey.End) {
-        for (let i = optionValues.length - 1; i >= 0; i--) {
-            if (!optionValues[i].disabled) {
-                newIndex = i;
-                break;
-            }
-        }
-        keyProcessed = true;
-    }
-    return [newIndex, keyProcessed];
-}
-/**
- * Single select `Listbox` component
- * @alpha
- */
-export function Listbox(props) {
-    const { ariaLabel, ariaLabelledBy, id, children, selectedValue, className, onListboxValueChange, onKeyDown, ...otherProps } = props;
-    const listRef = React.useRef(null);
-    const [listId] = React.useState(() => { return id !== null && id !== void 0 ? id : Guid.createValue(); });
-    const optionValues = React.useMemo(() => getOptionValueArray(children), [children]);
-    const classes = React.useMemo(() => classnames("core-listbox", className), [className]);
-    const [currentValue, setCurrentValue] = React.useState(selectedValue);
-    const [focusValue, setFocusValue] = React.useState(currentValue);
-    React.useEffect(() => {
-        setCurrentValue(selectedValue);
-        setFocusValue(selectedValue);
-    }, [selectedValue]);
-    const scrollTopRef = React.useRef(0);
-    const handleValueChange = React.useCallback((newValue, isControlOrCommandPressed) => {
-        // istanbul ignore else
-        if (newValue !== currentValue) {
-            setCurrentValue(newValue);
-            setFocusValue(newValue);
-            if (onListboxValueChange)
-                onListboxValueChange(newValue, isControlOrCommandPressed);
-        }
-    }, [setCurrentValue, currentValue, onListboxValueChange]);
-    const focusOption = React.useCallback((itemIndex) => {
-        // istanbul ignore else
-        if (itemIndex >= 0 && itemIndex < optionValues.length) {
-            const newSelection = optionValues[itemIndex];
-            const listElement = listRef.current;
-            // eslint-disable-next-line @typescript-eslint/no-unnecessary-type-assertion
-            const optionToFocus = listElement.querySelector(`li[data-value="${newSelection.value}"]`);
-            // istanbul ignore else
-            if (optionToFocus && listElement) {
-                let newScrollTop = listElement.scrollTop;
-                // istanbul ignore next
-                if (listElement.scrollHeight > listElement.clientHeight) {
-                    const scrollBottom = listElement.clientHeight + listElement.scrollTop;
-                    const elementBottom = optionToFocus.offsetTop + optionToFocus.offsetHeight;
-                    if (elementBottom > scrollBottom) {
-                        newScrollTop = elementBottom - listElement.clientHeight;
-                    }
-                    else if (optionToFocus.offsetTop < listElement.scrollTop) {
-                        newScrollTop = optionToFocus.offsetTop;
-                    }
-                    scrollTopRef.current = newScrollTop;
-                }
-                setFocusValue(newSelection.value);
-            }
-        }
-    }, [optionValues]);
-    const handleKeyDown = React.useCallback((event) => {
-        if (optionValues.length < 1)
-            return;
-        const itemIndex = (undefined === focusValue) ? -1 : optionValues.findIndex((optionValue) => ((optionValue.value === focusValue)));
-        if (event.key === SpecialKey.Space) {
-            event.preventDefault();
-            // istanbul ignore else
-            if (focusValue)
-                handleValueChange(focusValue, event.getModifierState("Control") || event.getModifierState("Meta")); // Control or Command
-            return;
-        }
-        else {
-            const [newItemIndex, keyProcessed] = processKeyboardNavigation(optionValues, itemIndex, event.key);
-            // istanbul ignore else
-            if (keyProcessed) {
-                event.preventDefault();
-                focusOption(newItemIndex);
-                return;
-            }
-        }
-        // istanbul ignore else
-        if (onKeyDown)
-            onKeyDown(event);
-    }, [focusValue, optionValues, focusOption, onKeyDown, handleValueChange]);
-    const isInitialMount = React.useRef(true);
-    React.useEffect(() => {
-        const list = listRef.current;
-        if (isInitialMount.current) {
-            isInitialMount.current = false;
-            if (undefined !== focusValue) {
-                const itemIndex = optionValues.findIndex((optionValue) => (optionValue.value === focusValue));
-                focusOption(itemIndex);
-            }
-        }
-        else {
-            list.scrollTop = scrollTopRef.current;
-        }
-    }, [focusValue, focusOption, optionValues]);
-    // istanbul ignore next
-    const handleOnScroll = React.useCallback((_event) => {
-        if (listRef.current)
-            scrollTopRef.current = listRef.current.scrollTop;
-    }, []);
-    // istanbul ignore next
-    const handleOnFocus = React.useCallback((_event) => {
-        if (!focusValue || 0 === focusValue.length) {
-            if (currentValue) {
-                setFocusValue(currentValue);
-            }
-            else {
-                if (optionValues.length > 0)
-                    setFocusValue(optionValues[0].value);
-            }
-        }
-    }, [currentValue, focusValue, optionValues]);
-    return React.createElement("ul", { className: classes, "aria-labelledby": ariaLabel ? undefined : ariaLabelledBy, "aria-label": ariaLabel, 
-        // An element that contains or owns all the listbox options has role
-        // listbox.
-        // https://www.w3.org/TR/wai-aria-practices-1.2/#Listbox
-        role: "listbox", 
-        // https://www.w3.org/TR/wai-aria-practices-1.2/examples/listbox/listbox-collapsible.html
-        tabIndex: 0, "aria-activedescendant": makeId(currentValue, listId), ...otherProps, ref: listRef, id: listId, onKeyDown: handleKeyDown, onScroll: handleOnScroll, "data-value": currentValue, "data-focusvalue": focusValue, onFocus: handleOnFocus },
-        React.createElement(ListboxContext.Provider, { value: {
-                listboxValue: currentValue,
-                focusValue,
-                listboxId: listId,
-                onListboxValueChange: handleValueChange,
-                listboxRef: listRef,
-            } }, children));
-}
-/**
- * `ListboxItem` component.
- * @alpha
- */
-export function ListboxItem(props) {
-    const { children, value, className, disabled, ...otherProps } = props;
-    const { listboxValue, focusValue, listboxId, onListboxValueChange, } = React.useContext(ListboxContext);
-    const hasFocus = focusValue === value;
-    const classes = React.useMemo(() => classnames("core-listbox-item", hasFocus && "focused", className), [className, hasFocus]);
-    const itemRef = React.useRef(null);
-    const isSelected = listboxValue === value;
-    const handleClick = React.useCallback((event) => {
-        var _a, _b;
-        event.preventDefault();
-        // istanbul ignore next
-        const selectedValue = (_b = (_a = event.currentTarget) === null || _a === void 0 ? void 0 : _a.dataset) === null || _b === void 0 ? void 0 : _b.value;
-        // istanbul ignore else
-        if (undefined !== selectedValue) {
-            onListboxValueChange(selectedValue, event.ctrlKey);
-        }
-    }, [onListboxValueChange]);
-    const getItemId = React.useCallback(() => {
-        return makeId(value, listboxId);
-    }, [listboxId, value]);
-    return (
-    // eslint-disable-next-line jsx-a11y/click-events-have-key-events
-    React.createElement("li", { "aria-selected": isSelected, "aria-disabled": disabled || undefined, 
-        // Each option in the listbox has role `option` and is a DOM descendant
-        // of the element with role `listbox`.
-        // https://www.w3.org/TR/wai-aria-practices-1.2/#Listbox
-        role: "option", className: classes, ...otherProps, ref: itemRef, id: getItemId(), "data-value": value, onClick: handleClick }, children));
-}
+/*---------------------------------------------------------------------------------------------
+* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+* See LICENSE.md in the project root for license terms and full copyright notice.
+*--------------------------------------------------------------------------------------------*/
+import * as React from "react";
+import classnames from "classnames";
+import "./Listbox.scss";
+import { Guid } from "@itwin/core-bentley";
+import { SpecialKey } from "@itwin/appui-abstract";
+/**
+ * Context set up by listbox for use by `ListboxItems` .
+ * @alpha
+ */
+// istanbul ignore next
+export const ListboxContext = React.createContext({ onListboxValueChange: (_newValue) => { } }); // eslint-disable-line @typescript-eslint/naming-convention
+function makeId(...args) {
+    return args.filter((val) => val != null).join("--");
+}
+function getOptionValueArray(childNodes) {
+    return React.Children.toArray(childNodes).filter((node) => React.isValidElement(node) && node.props.value).map((optionNode) => optionNode.props);
+}
+function processKeyboardNavigation(optionValues, itemIndex, key) {
+    let keyProcessed = false;
+    let newIndex = itemIndex >= 0 ? itemIndex : 0;
+    // Note: In aria example Page Up/Down just moves up or down by one item. See https://www.w3.org/TR/wai-aria-practices-1.1/examples/listbox/js/listbox.js
+    if (key === SpecialKey.ArrowDown || key === SpecialKey.PageDown) {
+        for (let i = itemIndex + 1; i < optionValues.length; i++) {
+            if (!optionValues[i].disabled) {
+                newIndex = i;
+                break;
+            }
+        }
+        keyProcessed = true;
+    }
+    else if (key === SpecialKey.ArrowUp || key === SpecialKey.PageUp) {
+        for (let i = itemIndex - 1; i >= 0; i--) {
+            if (!optionValues[i].disabled) {
+                newIndex = i;
+                break;
+            }
+        }
+        keyProcessed = true;
+    }
+    else if (key === SpecialKey.Home) {
+        for (let i = 0; i < optionValues.length; i++) {
+            if (!optionValues[i].disabled) {
+                newIndex = i;
+                break;
+            }
+        }
+        keyProcessed = true;
+    }
+    else if (key === SpecialKey.End) {
+        for (let i = optionValues.length - 1; i >= 0; i--) {
+            if (!optionValues[i].disabled) {
+                newIndex = i;
+                break;
+            }
+        }
+        keyProcessed = true;
+    }
+    return [newIndex, keyProcessed];
+}
+/**
+ * Single select `Listbox` component
+ * @alpha
+ */
+export function Listbox(props) {
+    const { ariaLabel, ariaLabelledBy, id, children, selectedValue, className, onListboxValueChange, onKeyDown, ...otherProps } = props;
+    const listRef = React.useRef(null);
+    const [listId] = React.useState(() => { return id !== null && id !== void 0 ? id : Guid.createValue(); });
+    const optionValues = React.useMemo(() => getOptionValueArray(children), [children]);
+    const classes = React.useMemo(() => classnames("core-listbox", className), [className]);
+    const [currentValue, setCurrentValue] = React.useState(selectedValue);
+    const [focusValue, setFocusValue] = React.useState(currentValue);
+    React.useEffect(() => {
+        setCurrentValue(selectedValue);
+        setFocusValue(selectedValue);
+    }, [selectedValue]);
+    const scrollTopRef = React.useRef(0);
+    const handleValueChange = React.useCallback((newValue, isControlOrCommandPressed) => {
+        // istanbul ignore else
+        if (newValue !== currentValue) {
+            setCurrentValue(newValue);
+            setFocusValue(newValue);
+            if (onListboxValueChange)
+                onListboxValueChange(newValue, isControlOrCommandPressed);
+        }
+    }, [setCurrentValue, currentValue, onListboxValueChange]);
+    const focusOption = React.useCallback((itemIndex) => {
+        // istanbul ignore else
+        if (itemIndex >= 0 && itemIndex < optionValues.length) {
+            const newSelection = optionValues[itemIndex];
+            const listElement = listRef.current;
+            // eslint-disable-next-line @typescript-eslint/no-unnecessary-type-assertion
+            const optionToFocus = listElement.querySelector(`li[data-value="${newSelection.value}"]`);
+            // istanbul ignore else
+            if (optionToFocus && listElement) {
+                let newScrollTop = listElement.scrollTop;
+                // istanbul ignore next
+                if (listElement.scrollHeight > listElement.clientHeight) {
+                    const scrollBottom = listElement.clientHeight + listElement.scrollTop;
+                    const elementBottom = optionToFocus.offsetTop + optionToFocus.offsetHeight;
+                    if (elementBottom > scrollBottom) {
+                        newScrollTop = elementBottom - listElement.clientHeight;
+                    }
+                    else if (optionToFocus.offsetTop < listElement.scrollTop) {
+                        newScrollTop = optionToFocus.offsetTop;
+                    }
+                    scrollTopRef.current = newScrollTop;
+                }
+                setFocusValue(newSelection.value);
+            }
+        }
+    }, [optionValues]);
+    const handleKeyDown = React.useCallback((event) => {
+        if (optionValues.length < 1)
+            return;
+        const itemIndex = (undefined === focusValue) ? -1 : optionValues.findIndex((optionValue) => ((optionValue.value === focusValue)));
+        if (event.key === SpecialKey.Space) {
+            event.preventDefault();
+            // istanbul ignore else
+            if (focusValue)
+                handleValueChange(focusValue, event.getModifierState("Control") || event.getModifierState("Meta")); // Control or Command
+            return;
+        }
+        else {
+            const [newItemIndex, keyProcessed] = processKeyboardNavigation(optionValues, itemIndex, event.key);
+            // istanbul ignore else
+            if (keyProcessed) {
+                event.preventDefault();
+                focusOption(newItemIndex);
+                return;
+            }
+        }
+        // istanbul ignore else
+        if (onKeyDown)
+            onKeyDown(event);
+    }, [focusValue, optionValues, focusOption, onKeyDown, handleValueChange]);
+    const isInitialMount = React.useRef(true);
+    React.useEffect(() => {
+        const list = listRef.current;
+        if (isInitialMount.current) {
+            isInitialMount.current = false;
+            if (undefined !== focusValue) {
+                const itemIndex = optionValues.findIndex((optionValue) => (optionValue.value === focusValue));
+                focusOption(itemIndex);
+            }
+        }
+        else {
+            list.scrollTop = scrollTopRef.current;
+        }
+    }, [focusValue, focusOption, optionValues]);
+    // istanbul ignore next
+    const handleOnScroll = React.useCallback((_event) => {
+        if (listRef.current)
+            scrollTopRef.current = listRef.current.scrollTop;
+    }, []);
+    // istanbul ignore next
+    const handleOnFocus = React.useCallback((_event) => {
+        if (!focusValue || 0 === focusValue.length) {
+            if (currentValue) {
+                setFocusValue(currentValue);
+            }
+            else {
+                if (optionValues.length > 0)
+                    setFocusValue(optionValues[0].value);
+            }
+        }
+    }, [currentValue, focusValue, optionValues]);
+    return React.createElement("ul", { className: classes, "aria-labelledby": ariaLabel ? undefined : ariaLabelledBy, "aria-label": ariaLabel, 
+        // An element that contains or owns all the listbox options has role
+        // listbox.
+        // https://www.w3.org/TR/wai-aria-practices-1.2/#Listbox
+        role: "listbox", 
+        // https://www.w3.org/TR/wai-aria-practices-1.2/examples/listbox/listbox-collapsible.html
+        tabIndex: 0, "aria-activedescendant": makeId(currentValue, listId), ...otherProps, ref: listRef, id: listId, onKeyDown: handleKeyDown, onScroll: handleOnScroll, "data-value": currentValue, "data-focusvalue": focusValue, onFocus: handleOnFocus },
+        React.createElement(ListboxContext.Provider, { value: {
+                listboxValue: currentValue,
+                focusValue,
+                listboxId: listId,
+                onListboxValueChange: handleValueChange,
+                listboxRef: listRef,
+            } }, children));
+}
+/**
+ * `ListboxItem` component.
+ * @alpha
+ */
+export function ListboxItem(props) {
+    const { children, value, className, disabled, ...otherProps } = props;
+    const { listboxValue, focusValue, listboxId, onListboxValueChange, } = React.useContext(ListboxContext);
+    const hasFocus = focusValue === value;
+    const classes = React.useMemo(() => classnames("core-listbox-item", hasFocus && "focused", className), [className, hasFocus]);
+    const itemRef = React.useRef(null);
+    const isSelected = listboxValue === value;
+    const handleClick = React.useCallback((event) => {
+        var _a, _b;
+        event.preventDefault();
+        // istanbul ignore next
+        const selectedValue = (_b = (_a = event.currentTarget) === null || _a === void 0 ? void 0 : _a.dataset) === null || _b === void 0 ? void 0 : _b.value;
+        // istanbul ignore else
+        if (undefined !== selectedValue) {
+            onListboxValueChange(selectedValue, event.ctrlKey);
+        }
+    }, [onListboxValueChange]);
+    const getItemId = React.useCallback(() => {
+        return makeId(value, listboxId);
+    }, [listboxId, value]);
+    return (
+    // eslint-disable-next-line jsx-a11y/click-events-have-key-events
+    React.createElement("li", { "aria-selected": isSelected, "aria-disabled": disabled || undefined, 
+        // Each option in the listbox has role `option` and is a DOM descendant
+        // of the element with role `listbox`.
+        // https://www.w3.org/TR/wai-aria-practices-1.2/#Listbox
+        role: "option", className: classes, ...otherProps, ref: itemRef, id: getItemId(), "data-value": value, onClick: handleClick }, children));
+}
 //# sourceMappingURL=Listbox.js.map